update
This commit is contained in:
zk
+2
-2
@@ -1,4 +1,4 @@
|
||||
# 王昊地址
|
||||
#VITE_GLOB_API_URL=http://192.168.1.6
|
||||
VITE_GLOB_API_URL=http://192.168.1.6
|
||||
#开发环境
|
||||
VITE_GLOB_API_URL=http://cqyt.dev.yg.dt.io
|
||||
#VITE_GLOB_API_URL=http://cqyt.dev.yg.dt.io
|
||||
+11
-2
@@ -1,6 +1,15 @@
|
||||
<template>
|
||||
<router-view />
|
||||
<a-config-provider :locale="locle">
|
||||
<router-view />
|
||||
</a-config-provider>
|
||||
</template>
|
||||
<script setup lang="ts"></script>
|
||||
<script setup lang="ts">
|
||||
import zhCN from 'ant-design-vue/es/locale/zh_CN';
|
||||
import dayjs from 'dayjs';
|
||||
import 'dayjs/locale/zh-cn';
|
||||
|
||||
dayjs.locale('zh-cn');
|
||||
const locle = zhCN;
|
||||
</script>
|
||||
<style lang="less" src="./assets/less/index.less"></style>
|
||||
<style lang="less" scoped></style>
|
||||
@@ -30,7 +30,7 @@
|
||||
|
||||
.alarm-content {
|
||||
background-color: #263d5e;
|
||||
color: red;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
padding: 7px 10px;
|
||||
border: 1px solid #1b7ef2;
|
||||
|
||||
@@ -63,6 +63,11 @@
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ant-modal-mask {
|
||||
background-color: rgba(0, 0, 0, 0.65) !important;
|
||||
}
|
||||
|
||||
// 下拉框样式-start
|
||||
.ant-select-dropdown {
|
||||
background-color: #00152b !important;
|
||||
border-right: 1px solid #1b7ef2;
|
||||
@@ -108,6 +113,28 @@
|
||||
background-color: #002e64 !important;
|
||||
}
|
||||
|
||||
// 下拉框样式-end
|
||||
|
||||
// 级联选择器样式-start
|
||||
.ant-cascader-menu-item {
|
||||
color: #1b7ef2 !important;
|
||||
}
|
||||
|
||||
.ant-cascader-menu-item:hover {
|
||||
background-color: #002e64 !important;
|
||||
}
|
||||
|
||||
.ant-cascader-menu-item-active {
|
||||
color: #fff !important;
|
||||
background-color: #002e64 !important;
|
||||
}
|
||||
|
||||
.ant-cascader-menu-item-expand .ant-cascader-menu-item-expand-icon, .ant-cascader-menu-item-loading-icon {
|
||||
color: #1b7ef2 !important;
|
||||
}
|
||||
|
||||
// 级联选择器样式-end
|
||||
|
||||
//直升机
|
||||
.helicopter {
|
||||
width: 60px;
|
||||
|
||||
+13
-10
@@ -41,11 +41,11 @@ export const Map = {
|
||||
* @desc 中国外层边界线
|
||||
*/,
|
||||
drawOutLine() {
|
||||
let geojson = new AMap.GeoJSON({
|
||||
let geoJson = new AMap.GeoJSON({
|
||||
geoJSON: china,
|
||||
getPolygon: function (geojson, lnglats) {
|
||||
getPolygon: function (geoJson, lngLats) {
|
||||
return new AMap.Polyline({
|
||||
path: lnglats[0],
|
||||
path: lngLats[0],
|
||||
strokeColor: '#6ccffe',
|
||||
strokeWeight: 3,
|
||||
lineJoin: 'round', //折线拐点的绘制样式
|
||||
@@ -55,22 +55,22 @@ export const Map = {
|
||||
});
|
||||
},
|
||||
});
|
||||
this.map.add(geojson);
|
||||
this.map.add(geoJson);
|
||||
} /**
|
||||
* @desc 中国内层边界线
|
||||
*/,
|
||||
drawInnerLine() {
|
||||
let geojson = new AMap.GeoJSON({
|
||||
let geoJson = new AMap.GeoJSON({
|
||||
geoJSON: chinaInner,
|
||||
getPolygon: function (geojson, lnglats) {
|
||||
getPolygon: function (geoJson, lngLats) {
|
||||
return new AMap.Polyline({
|
||||
path: lnglats[0],
|
||||
path: lngLats[0],
|
||||
strokeColor: '#359de5',
|
||||
strokeWeight: 1,
|
||||
});
|
||||
},
|
||||
});
|
||||
this.map.add(geojson);
|
||||
this.map.add(geoJson);
|
||||
}, // 清空当前地图上除了边界线的覆盖物
|
||||
removeOverlayGroup() {
|
||||
this.clearAircraft();
|
||||
@@ -92,7 +92,10 @@ export const Map = {
|
||||
this.removeOverlayGroup();
|
||||
this.overlayGroup = new AMap.OverlayGroup();
|
||||
for (let i = 0; i < result.length; i++) {
|
||||
let { type, lon, lat } = result[i];
|
||||
let { type, lon, lat, lng } = result[i];
|
||||
if (lng) {
|
||||
lon = lng;
|
||||
}
|
||||
if (!lon || !lat || !type) {
|
||||
continue;
|
||||
}
|
||||
@@ -231,7 +234,7 @@ export const Map = {
|
||||
label: {
|
||||
content: `<div class="alarm-content" >
|
||||
<div>${option?.realName},${option?.eventType_dictText}</div>
|
||||
</div>`,
|
||||
</div>`,
|
||||
offset: new AMap.Pixel(0, -9),
|
||||
direction: 'top',
|
||||
},
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import type { App } from 'vue';
|
||||
import { Form, Input, Button, Radio, Modal, Table, Select, Spin } from 'ant-design-vue';
|
||||
import { Form, Input, Button, Radio, Modal, Table, Select, Cascader, Spin, ConfigProvider } from 'ant-design-vue';
|
||||
|
||||
export default function registerGlobComp(app: App) {
|
||||
app.use(Button).use(Form).use(Input).use(Radio).use(Modal).use(Table).use(Select).use(Spin);
|
||||
app.use(Button).use(Form).use(Input).use(Radio).use(Modal).use(Table).use(Select).use(Cascader).use(Spin).use(ConfigProvider);
|
||||
}
|
||||
@@ -6,7 +6,6 @@ export enum Api {
|
||||
}
|
||||
|
||||
//健康终端报警
|
||||
|
||||
export const getMonitorList = (params: any) => get(Api.getMonitorList, params);
|
||||
//长庆油田大病人数
|
||||
export const getHealthDataList = (params: any) => get(Api.getHealthDataList, params);
|
||||
@@ -35,7 +35,6 @@
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background: url('../../assets/images/dialog.png') no-repeat;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
background-size: 100% 100%;
|
||||
color: #ffffff !important;
|
||||
padding-left: 2%;
|
||||
@@ -59,6 +58,8 @@
|
||||
.ant-modal-close-x,
|
||||
.anticon {
|
||||
color: #999999 !important;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.ant-modal-footer {
|
||||
|
||||
@@ -2,20 +2,36 @@ export function screenPie(chartData, total, color, formatter) {
|
||||
return {
|
||||
title: {
|
||||
text: '总人数',
|
||||
subtext: total + '',
|
||||
x: '38%',
|
||||
y: '42%',
|
||||
textStyle: {
|
||||
fontSize: 14,
|
||||
color: '#ffffff',
|
||||
fontWeight: 'normal',
|
||||
align: 'center',
|
||||
},
|
||||
subtext: total + '',
|
||||
x: '38%',
|
||||
y: '42%',
|
||||
subtextStyle: {
|
||||
color: '#ffffff',
|
||||
fontSize: 24,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
},
|
||||
// graphic: [
|
||||
// {
|
||||
// //环形图中间添加文字
|
||||
// type: 'text', //通过不同top值可以设置上下显示
|
||||
// left: 'center',
|
||||
// top: 'center',
|
||||
// style: {
|
||||
// text: 45465456,
|
||||
// textAlign: 'center',
|
||||
// fill: '#1E7CE8', //文字的颜色
|
||||
// fontSize: 20,
|
||||
// lineHeight: 20,
|
||||
// },
|
||||
// },
|
||||
// ],
|
||||
color: color,
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
|
||||
@@ -1,7 +1,22 @@
|
||||
import { get } from '/@/api/request.ts';
|
||||
import { get, post } from '/@/api/request.ts';
|
||||
|
||||
export enum Api {
|
||||
depart = 'sys/sysDepart/allSecondaryDeparts',
|
||||
getWatchDataByOrgCode = '/health-watch/watch/watchData/getWatchDataByOrgCode',
|
||||
getMonitorList = '/health-watch/watch/watchMonitorData/getMonitorList',
|
||||
sleepApi = '/health-watch/watch/watchData/getSleep',
|
||||
stepApi = '/health-watch/watch/watchData/getSdc',
|
||||
}
|
||||
|
||||
// 单位-
|
||||
export const allSecondaryDeparts = () => get(Api.depart);
|
||||
|
||||
//左側
|
||||
export const getWatchDataByOrgCode = (params) => post(Api.getWatchDataByOrgCode, params);
|
||||
|
||||
//右-健康终端报警
|
||||
export const getMonitorList = (params: any) => get(Api.getMonitorList, params);
|
||||
// 右-睡眠
|
||||
export const getSleep = (params: any) => post(Api.sleepApi, params);
|
||||
// 右-步数
|
||||
export const getStep = (params: any) => post(Api.stepApi, params);
|
||||
|
||||
@@ -1,58 +1,75 @@
|
||||
<template>
|
||||
<template v-for="(item, index) in dataList" :key="`list${index}`">
|
||||
<item-d :title="item.title" :data="item.data" :tips="item.tips" :color="item.color"/>
|
||||
</template>
|
||||
<template v-for="(item, index) in dataList" :key="`list${index}`">
|
||||
<item-d :title="item.title" :data="item.data" :tips="item.tips" :color="item.color" />
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue';
|
||||
import ItemD from '/@/components/item-d/item-d.vue';
|
||||
import { onMounted, ref, watch } from 'vue';
|
||||
import ItemD from '/@/components/item-d/item-d.vue';
|
||||
import { getWatchDataByOrgCode } from '/@/components/secondaryScreen/commonApi.ts';
|
||||
|
||||
const dataList = ref([
|
||||
{
|
||||
title: '心率',
|
||||
data: [
|
||||
{name: '正常', value: 234},
|
||||
{name: '警戒', value: 204},
|
||||
{name: '危险', value: 34},
|
||||
],
|
||||
color: ['#0098FA', '#FF6648', '#FB466C'],
|
||||
tips: '正常范围60~100次/分',
|
||||
},
|
||||
{
|
||||
title: '血氧',
|
||||
data: [
|
||||
{name: '正常', value: 234},
|
||||
{name: '警戒', value: 204},
|
||||
{name: '危险', value: 34},
|
||||
],
|
||||
color: ['#0098FA', '#FF6648', '#FB466C'],
|
||||
tips: '血氧饱和度范围95%~100%',
|
||||
},
|
||||
{
|
||||
title: '压力',
|
||||
data: [
|
||||
{name: '正常', value: 234},
|
||||
{name: '放松', value: 204},
|
||||
{name: '中等', value: 34},
|
||||
{name: '偏高', value: 78},
|
||||
],
|
||||
color: ['#1DCC79', '#0098FA', '#0CD9B5', '#6C63F0'],
|
||||
tips: '',
|
||||
},
|
||||
{
|
||||
title: '体温',
|
||||
data: [
|
||||
{name: '37.2', value: 234},
|
||||
{name: '37.2-38', value: 204},
|
||||
{name: '>38', value: 34},
|
||||
],
|
||||
color: ['#0098FA', '#0CD9B5', '#3B72AD'],
|
||||
tips: '',
|
||||
},
|
||||
]);
|
||||
const dataList = ref([
|
||||
{
|
||||
title: '心率',
|
||||
data: [
|
||||
{ name: '正常', value: 234 },
|
||||
{ name: '警戒', value: 204 },
|
||||
{ name: '危险', value: 34 },
|
||||
],
|
||||
color: ['#0098FA', '#FF6648', '#FB466C'],
|
||||
tips: '正常范围60~100次/分',
|
||||
},
|
||||
{
|
||||
title: '血氧',
|
||||
data: [
|
||||
{ name: '正常', value: 234 },
|
||||
{ name: '警戒', value: 204 },
|
||||
{ name: '危险', value: 34 },
|
||||
],
|
||||
color: ['#0098FA', '#FF6648', '#FB466C'],
|
||||
tips: '血氧饱和度范围95%~100%',
|
||||
},
|
||||
{
|
||||
title: '压力',
|
||||
data: [
|
||||
{ name: '正常', value: 234 },
|
||||
{ name: '放松', value: 204 },
|
||||
{ name: '中等', value: 34 },
|
||||
{ name: '偏高', value: 78 },
|
||||
],
|
||||
color: ['#1DCC79', '#0098FA', '#0CD9B5', '#6C63F0'],
|
||||
tips: '',
|
||||
},
|
||||
{
|
||||
title: '体温',
|
||||
data: [
|
||||
{ name: '37.2', value: 234 },
|
||||
{ name: '37.2-38', value: 204 },
|
||||
{ name: '>38', value: 34 },
|
||||
],
|
||||
color: ['#0098FA', '#0CD9B5', '#3B72AD'],
|
||||
tips: '',
|
||||
},
|
||||
]);
|
||||
|
||||
const props = defineProps({
|
||||
orgCode: String,
|
||||
type: String,
|
||||
});
|
||||
onMounted(() => {});
|
||||
watch(props, () => {
|
||||
init();
|
||||
});
|
||||
|
||||
async function init() {
|
||||
const data = await getWatchDataByOrgCode(props);
|
||||
console.log('data', data);
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
init,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
<style scoped></style>
|
||||
@@ -1,12 +1,9 @@
|
||||
<template>
|
||||
<div class="terminal-container">
|
||||
<public-title title="睡眠">
|
||||
<template #right>平均睡眠时长：6小时30分</template>
|
||||
</public-title>
|
||||
<public-title title="睡眠" />
|
||||
<div class="inner">
|
||||
<div class="title">
|
||||
<span class="count">6.5h</span>
|
||||
<span class="lightSleep">深睡2.4小时 浅睡4.1小时</span>
|
||||
<span class="lightSleep">平均睡眠 {{ nums.avg }} 深睡 {{ nums.avgLong }} 浅睡 {{ nums.avgShort }}</span>
|
||||
</div>
|
||||
<div class="sleepChart" ref="sleepChart"></div>
|
||||
</div>
|
||||
@@ -15,23 +12,55 @@
|
||||
<script setup lang="ts">
|
||||
import PublicTitle from '/@/components/publicTitle.vue';
|
||||
import * as echarts from 'echarts';
|
||||
import { ringOption, useHealth } from '/@/components/body-d-right/bodyRightHooks';
|
||||
import { ref, onMounted, unref } from 'vue';
|
||||
import { sleepCharts } from '/@/components/secondaryScreen/screen-right/screenRightHooks';
|
||||
import { ref, onMounted, watch } from 'vue';
|
||||
import { formatStr, sleepCharts } from '/@/components/secondaryScreen/screen-right/screenRightHooks';
|
||||
import { getSleep } from '/@/components/secondaryScreen/commonApi.ts';
|
||||
|
||||
const props = defineProps({
|
||||
orgCode: String,
|
||||
type: String,
|
||||
});
|
||||
const sleepChart = ref<HTMLElement>();
|
||||
onMounted(() => {
|
||||
init();
|
||||
});
|
||||
const { healthData, getValue, setHealth } = useHealth();
|
||||
watch(props, () => {
|
||||
init();
|
||||
});
|
||||
const nums = ref({
|
||||
avgShort: '',
|
||||
avgLong: '',
|
||||
avg: '',
|
||||
});
|
||||
|
||||
function init() {
|
||||
initChart();
|
||||
async function init() {
|
||||
const params = {
|
||||
orgCode: props.orgCode,
|
||||
type: props.type,
|
||||
};
|
||||
const { code, result } = await getSleep(params);
|
||||
if (code == 200 && result.length > 0) {
|
||||
let time = result?.map((item) => item.dataDate);
|
||||
let short = result?.map((item) => item.avgShortDuration);
|
||||
let long = result?.map((item) => item.avgLongDuration);
|
||||
let awake = result?.map((item) => item.awakeDuration);
|
||||
let avg = result?.map((item) => item.averageDuration);
|
||||
initChart({ time, short, long, awake, type: props.type });
|
||||
const len = time.length;
|
||||
if (!len > 0) {
|
||||
return;
|
||||
}
|
||||
nums.value = {
|
||||
avgShort: formatStr({ list: short, len }),
|
||||
avgLong: formatStr({ list: long, len }),
|
||||
avg: formatStr({ list: avg, len }), //平均
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
function initChart() {
|
||||
function initChart({ time, short, long, awake, type }) {
|
||||
let myChart = echarts.init(sleepChart.value);
|
||||
let options = sleepCharts();
|
||||
let options = sleepCharts({ time, short, long, awake, type });
|
||||
myChart.setOption(options);
|
||||
window.addEventListener('resize', () => {
|
||||
myChart.resize();
|
||||
|
||||
@@ -1,119 +1,174 @@
|
||||
import {computed, ref} from 'vue';
|
||||
import { computed, ref } from 'vue';
|
||||
import dayjs from 'dayjs';
|
||||
import { minuteToStr } from '/@/utils/utils.ts';
|
||||
|
||||
export function sleepCharts() {
|
||||
function timeFormat(type, list) {
|
||||
const o = {
|
||||
week: 'MM-DD',
|
||||
month: 'MM-DD',
|
||||
year: 'MM',
|
||||
};
|
||||
if (list) {
|
||||
return list.map((item) => dayjs(item).format(o[type]));
|
||||
}
|
||||
return [];
|
||||
}
|
||||
|
||||
//时间转换
|
||||
export function formatStr({ list, len }) {
|
||||
let sum =
|
||||
list.reduce((all, cur) => {
|
||||
return all + cur;
|
||||
}, 0) / len;
|
||||
|
||||
return minuteToStr(sum);
|
||||
}
|
||||
|
||||
export function sleepCharts({ time, short, long, awake, type }) {
|
||||
return {
|
||||
grid: {
|
||||
top: '15%',
|
||||
left: '8%',
|
||||
right: '3%',
|
||||
bottom: '20%',
|
||||
left: '0%',
|
||||
right: '0%',
|
||||
bottom: '0%',
|
||||
containLabel: true,
|
||||
},
|
||||
tooltip: {
|
||||
show: true,
|
||||
trigger: 'axis',
|
||||
textStyle: {
|
||||
align: 'left', // 使用左对齐样式显示tooltip文本
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
data: ['清醒', '浅睡', '深睡'],
|
||||
textStyle: {
|
||||
color: '#ffffff'
|
||||
color: '#ffffff',
|
||||
},
|
||||
top: 0,
|
||||
left: '55%',
|
||||
},
|
||||
color: ['#14B3F8', '#6D7BEB', '#5451DC'],
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisLabel: {
|
||||
color: '#ffffff'
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
data: ['0', '2', '4', '6', '8', '10', '12', '14', '16', '18', '20', '22'],
|
||||
axisLabel: {
|
||||
color: '#ffffff',
|
||||
formatter: (item, i) => {
|
||||
if (i == 0 || i == time.length - 1 || i == Math.floor(time.length / 2)) return item;
|
||||
},
|
||||
},
|
||||
data: timeFormat(type, time),
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
color: '#ffffff'
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
show: false,
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
color: '#696969'
|
||||
}
|
||||
}
|
||||
color: '#696969',
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '清醒',
|
||||
type: 'bar',
|
||||
data: [
|
||||
2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
|
||||
],
|
||||
data: awake,
|
||||
},
|
||||
{
|
||||
name: '浅睡',
|
||||
type: 'bar',
|
||||
data: [
|
||||
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
|
||||
],
|
||||
data: short,
|
||||
},
|
||||
{
|
||||
name: '深睡',
|
||||
type: 'bar',
|
||||
data: [
|
||||
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
|
||||
],
|
||||
}
|
||||
]
|
||||
data: long,
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
export function useHealth() {
|
||||
const healthData = ref([
|
||||
//步数
|
||||
export function useStep() {
|
||||
const stepData = ref([
|
||||
{
|
||||
name: '5000以下',
|
||||
value: '23',
|
||||
type: '1',
|
||||
type: 'lessThanFiveThousand',
|
||||
type_dictText: '恶性肿瘤',
|
||||
},
|
||||
{
|
||||
name: '5000~1w',
|
||||
value: '2',
|
||||
type: '2',
|
||||
type: 'fiveThousandToTenThousand',
|
||||
type_dictText: '其他',
|
||||
},
|
||||
{
|
||||
name: '1~1.5w',
|
||||
value: '34',
|
||||
type: '3',
|
||||
type: 'TenThousandToFifteenThousand',
|
||||
type_dictText: '其他',
|
||||
},
|
||||
{
|
||||
name: '1.5w~2w',
|
||||
value: '43',
|
||||
type: '3',
|
||||
type: 'FifteenToTwentyThousand',
|
||||
type_dictText: '其他',
|
||||
},
|
||||
{
|
||||
name: '2以上',
|
||||
value: '43',
|
||||
type: '3',
|
||||
type: 'TwentyThousandOrMore',
|
||||
type_dictText: '其他',
|
||||
},
|
||||
]);
|
||||
const getValue = computed(() => healthData.value.map((item) => item.value));
|
||||
const getName = computed(() => healthData.value.map((item) => item.name));
|
||||
|
||||
function setHealth(data) {
|
||||
data?.map((item1) => {
|
||||
healthData.value.map((item2) => {
|
||||
if (item1.type == item2.type) {
|
||||
item2.value = item1.count;
|
||||
}
|
||||
});
|
||||
function setStep(data) {
|
||||
stepData.value.map((item) => {
|
||||
item.value = data[item.type] || 0;
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
healthData,
|
||||
getValue,
|
||||
getName,
|
||||
setHealth,
|
||||
stepData,
|
||||
setStep,
|
||||
};
|
||||
}
|
||||
|
||||
export const monitorColumns = [
|
||||
{
|
||||
title: '姓名',
|
||||
dataIndex: 'realName',
|
||||
key: 'realName',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '类型',
|
||||
dataIndex: 'eventType_dictText',
|
||||
key: 'eventType_dictText',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '异常时间',
|
||||
dataIndex: 'warnTime',
|
||||
key: 'warnTime',
|
||||
align: 'center',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: '定位',
|
||||
key: 'address',
|
||||
align: 'center',
|
||||
slots: { customRender: 'address' },
|
||||
width: 40,
|
||||
},
|
||||
];
|
||||
@@ -1,178 +1,188 @@
|
||||
<template>
|
||||
<div>
|
||||
<public-title title="预警"/>
|
||||
<div class="inner-screen">
|
||||
<a-table
|
||||
class="ant-table-striped"
|
||||
:dataSource="tableInfo.dataSource"
|
||||
:columns="tableInfo.columns"
|
||||
:pagination="tableInfo.pagination"
|
||||
:rowClassName="(record, index) => (index % 2 === 1 ? 'table-default' : 'table-striped')"
|
||||
>
|
||||
<template #address="{text,record}">
|
||||
<div class="police-times">
|
||||
<span class="police-text">{{ record.address }}</span>
|
||||
<span class="police-icon" @click="handlePoliceDetail(record)"></span>
|
||||
</div>
|
||||
</template>
|
||||
</a-table>
|
||||
<div>
|
||||
<public-title title="预警" />
|
||||
<div class="inner-screen">
|
||||
<a-table
|
||||
:scroll="{
|
||||
y: tableHeight,
|
||||
}"
|
||||
style="overflow-y: auto"
|
||||
:columns="monitorColumns"
|
||||
:dataSource="dataSource"
|
||||
:pagination="pagination"
|
||||
:rowClassName="(record, index) => (index % 2 === 1 ? 'table-default' : 'table-striped')"
|
||||
class="ant-table-striped"
|
||||
>
|
||||
<template #address="{ text, record }">
|
||||
<div class="police-times" @click="handlePoliceDetail(record)">
|
||||
<span class="position"></span>
|
||||
</div>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import {ref} from 'vue';
|
||||
import PublicTitle from '/@/components/publicTitle.vue';
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, onUnmounted, ref } from 'vue';
|
||||
import PublicTitle from '/@/components/publicTitle.vue';
|
||||
import { getMonitorList } from '/@/components/secondaryScreen/commonApi.ts';
|
||||
import { monitorColumns } from '/@/components/secondaryScreen/screen-right/screenRightHooks.ts';
|
||||
import $bus from '/@/utils/bus.ts';
|
||||
import { earlyWarning } from '/@/utils/busConstant.ts';
|
||||
|
||||
const tableInfo = ref({
|
||||
dataSource: [
|
||||
{
|
||||
key: '1',
|
||||
name: '胡彦斌',
|
||||
age: 32,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
name: '胡彦祖',
|
||||
age: 42,
|
||||
address: '西湖区湖底公园1号',
|
||||
},
|
||||
],
|
||||
columns: [
|
||||
{
|
||||
title: '姓名',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '年龄',
|
||||
dataIndex: 'age',
|
||||
key: 'age',
|
||||
align: 'right',
|
||||
},
|
||||
{
|
||||
title: '住址',
|
||||
key: 'address',
|
||||
align: 'center',
|
||||
slots: {customRender: 'address'}
|
||||
},
|
||||
],
|
||||
pagination: {
|
||||
current: 1,
|
||||
pageSize: 2,
|
||||
total: 10,
|
||||
},
|
||||
});
|
||||
const tableHeight = ref(0);
|
||||
const dataSource = ref([]);
|
||||
const pagination = ref({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
onChange: pageChange,
|
||||
});
|
||||
|
||||
function handlePoliceDetail(record) {
|
||||
console.log(record)
|
||||
}
|
||||
function handlePoliceDetail(record) {
|
||||
$bus.emit(earlyWarning, record);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
init();
|
||||
setHeight();
|
||||
window.addEventListener('resize', setHeight);
|
||||
});
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', setHeight);
|
||||
});
|
||||
|
||||
function setHeight() {
|
||||
tableHeight.value = document.querySelector('.inner-screen').getBoundingClientRect().height - 60;
|
||||
}
|
||||
|
||||
async function init() {
|
||||
const { pageSize, current } = pagination.value;
|
||||
const { code, result } = await getMonitorList({ pageSize, pageNo: current });
|
||||
if (code == 200) {
|
||||
dataSource.value = [...result.records, ...result.records.map((item, i) => ({ ...item, id: item.id + i }))];
|
||||
pagination.value.total = result.total * 2;
|
||||
}
|
||||
}
|
||||
|
||||
function pageChange(page, pageS) {
|
||||
pagination.value.current = page;
|
||||
pagination.value.pageSize = pageS;
|
||||
init();
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.inner-screen {
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
margin: 20px 0;
|
||||
<style lang="less" scoped>
|
||||
.inner-screen {
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
margin: 20px 0;
|
||||
|
||||
.police-times {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.police-times {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer !important;
|
||||
|
||||
.police-text {
|
||||
padding-right: 20px;
|
||||
.position {
|
||||
margin-left: 5px;
|
||||
display: inline-block;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background: url('/@/assets/img/position.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-table-thead) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
:deep(.ant-table) {
|
||||
background-color: transparent;
|
||||
//pointer-events: none;
|
||||
}
|
||||
|
||||
:deep(.ant-table-tbody > tr > td) {
|
||||
border-bottom: none;
|
||||
padding: 6px 4px;
|
||||
}
|
||||
|
||||
:deep(.ant-table-row:hover) {
|
||||
background-color: transparent;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.police-icon {
|
||||
display: inline-block;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background: url('/@/assets/images/terminal.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
cursor: pointer;
|
||||
//奇行
|
||||
.ant-table-striped :deep(.table-striped) td {
|
||||
background-color: #0a0a0c;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-table-thead) {
|
||||
display: none !important;
|
||||
}
|
||||
//偶行
|
||||
.ant-table-striped :deep(.table-default) td {
|
||||
color: #ffffff;
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
:deep(.ant-table) {
|
||||
background-color: transparent;
|
||||
pointer-events: none;
|
||||
}
|
||||
//奇行-hover
|
||||
:deep(.ant-table-tbody > tr.ant-table-row.table-striped:hover > td, .ant-table-tbody > tr > td.table-striped) {
|
||||
background-color: #0a0a0c !important;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
:deep(.ant-table-tbody > tr > td) {
|
||||
border-bottom: none;
|
||||
}
|
||||
//偶行-hover
|
||||
:deep(.ant-table-tbody > tr.ant-table-row.table-default:hover > td, .ant-table-tbody > tr > td.table-default) {
|
||||
color: #ffffff;
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
:deep(.ant-table-row:hover) {
|
||||
background-color: transparent;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
// 分页
|
||||
:deep(.ant-pagination-prev .ant-pagination-item-link, .ant-pagination-next .ant-pagination-item-link) {
|
||||
background-color: #1f2935;
|
||||
color: #8291a9;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.ant-table-striped :deep(.table-striped) td {
|
||||
background-color: #0a0a0c;
|
||||
color: #ffffff;
|
||||
}
|
||||
:deep(.ant-pagination-item) {
|
||||
background-color: #1f2935;
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.ant-table-striped :deep(.table-default) td {
|
||||
color: #ffffff;
|
||||
}
|
||||
// 当前页选中的样式
|
||||
:deep(.ant-pagination-item-active) {
|
||||
background-color: #0081ff;
|
||||
}
|
||||
|
||||
// 分页
|
||||
:deep(.ant-pagination-prev .ant-pagination-item-link, .ant-pagination-next .ant-pagination-item-link) {
|
||||
background-color: #1f2935;
|
||||
color: #8291a9;
|
||||
border: none;
|
||||
}
|
||||
:deep(.ant-pagination-item-active a) {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
:deep(.ant-pagination-item) {
|
||||
background-color: #1f2935;
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
}
|
||||
:deep(.ant-pagination-item a) {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
// 当前页选中的样式
|
||||
:deep(.ant-pagination-item-active) {
|
||||
background-color: #0081ff;
|
||||
}
|
||||
:deep(.ant-pagination-prev .ant-pagination-item-link, .ant-pagination-next .ant-pagination-item-link) {
|
||||
color: #ffffff;
|
||||
background-color: #1f2935;
|
||||
}
|
||||
|
||||
:deep(.ant-pagination-item-active a) {
|
||||
color: #ffffff;
|
||||
}
|
||||
// 省略样式
|
||||
:deep(.ant-pagination-jump-next .ant-pagination-item-container .ant-pagination-item-ellipsis) {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
:deep(.ant-pagination-item a) {
|
||||
color: #ffffff;
|
||||
}
|
||||
// 省略鼠标移入样式
|
||||
:deep(.ant-pagination-jump-next .ant-pagination-item-container .ant-pagination-item-link-icon) {
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
:deep(.ant-pagination-prev .ant-pagination-item-link, .ant-pagination-next .ant-pagination-item-link) {
|
||||
color: #ffffff;
|
||||
background-color: #1f2935;
|
||||
}
|
||||
|
||||
// 省略样式
|
||||
:deep(.ant-pagination-jump-next .ant-pagination-item-container .ant-pagination-item-ellipsis) {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
// 省略鼠标移入样式
|
||||
:deep(.ant-pagination-jump-next .ant-pagination-item-container .ant-pagination-item-link-icon) {
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
// 下一页
|
||||
:deep(.ant-pagination-next .ant-pagination-item-link) {
|
||||
background-color: #1f2935;
|
||||
color: #8291a9;
|
||||
border: none;
|
||||
}
|
||||
// 下一页
|
||||
:deep(.ant-pagination-next .ant-pagination-item-link) {
|
||||
background-color: #1f2935;
|
||||
color: #8291a9;
|
||||
border: none;
|
||||
}
|
||||
</style>
|
||||
@@ -1,56 +1,62 @@
|
||||
<template>
|
||||
<div>
|
||||
<public-title title="步数"/>
|
||||
<div class="inner" ref="healthChart"></div>
|
||||
</div>
|
||||
<div>
|
||||
<public-title title="步数" />
|
||||
<div class="inner" ref="healthChart"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import {ref, unref, onMounted} from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import PublicTitle from '/@/components/publicTitle.vue';
|
||||
import {getHealthDataList} from '/@/components/body-d-right/right.api';
|
||||
import {useSpin} from '/@/components/body-d-left/bodyLeftHooks.ts';
|
||||
import {useHealth} from '/@/components/secondaryScreen/screen-right/screenRightHooks.ts';
|
||||
import {screenPie} from '/@/components/item-d/pieCharts.ts';
|
||||
import { ref, unref, onMounted } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import PublicTitle from '/@/components/publicTitle.vue';
|
||||
import { useSpin } from '/@/components/body-d-left/bodyLeftHooks.ts';
|
||||
import { useStep } from '/@/components/secondaryScreen/screen-right/screenRightHooks.ts';
|
||||
import { screenPie } from '/@/components/item-d/pieCharts.ts';
|
||||
import { getStep } from '/@/components/secondaryScreen/commonApi.ts';
|
||||
|
||||
const {setSpin, spinning} = useSpin();
|
||||
const healthChart = ref<HTMLElement>();
|
||||
const props = defineProps({
|
||||
orgCode: String,
|
||||
type: String,
|
||||
});
|
||||
const { setSpin, spinning } = useSpin();
|
||||
const healthChart = ref<HTMLElement>();
|
||||
|
||||
const color = ref(['#B750BE', '#6C63F0', '#3AACFF', '#ED589D', '#FB466C']);
|
||||
onMounted(() => {
|
||||
init();
|
||||
});
|
||||
const {healthData, getValue, setHealth} = useHealth();
|
||||
const color = ref(['#B750BE', '#6C63F0', '#3AACFF', '#ED589D', '#FB466C']);
|
||||
onMounted(() => {
|
||||
init();
|
||||
});
|
||||
const { stepData, getValue, setStep } = useStep();
|
||||
|
||||
async function init() {
|
||||
try {
|
||||
const {code, result} = await getHealthDataList({});
|
||||
setSpin(true);
|
||||
if (code != 200) {
|
||||
return;
|
||||
async function init() {
|
||||
try {
|
||||
const params = {
|
||||
orgCode: props.orgCode,
|
||||
type: props.type,
|
||||
};
|
||||
const { code, result } = await getStep(params);
|
||||
setSpin(true);
|
||||
if (code != 200) {
|
||||
return;
|
||||
}
|
||||
setStep(result);
|
||||
initChart(unref(stepData), '15000');
|
||||
} catch {
|
||||
initChart(unref(stepData), 0);
|
||||
}
|
||||
}
|
||||
setHealth(result);
|
||||
const yData = unref(getValue);
|
||||
let total = yData.reduce((accumulator, currentValue) => Number(accumulator) + Number(currentValue), 0);
|
||||
initChart(unref(healthData), '89');
|
||||
} catch {
|
||||
initChart(unref(healthData), 0);
|
||||
}
|
||||
}
|
||||
|
||||
function initChart(chartData, total) {
|
||||
let myChart = echarts.init(healthChart.value);
|
||||
let options = screenPie(chartData, total, color.value, '{c}');
|
||||
myChart.setOption(options);
|
||||
window.addEventListener('resize', () => {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
function initChart(chartData, total) {
|
||||
let myChart = echarts.init(healthChart.value);
|
||||
let options = screenPie(chartData, total, color.value, '{c}');
|
||||
myChart.setOption(options);
|
||||
window.addEventListener('resize', () => {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.inner {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
.inner {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
</style>
|
||||
@@ -33,7 +33,6 @@
|
||||
});
|
||||
|
||||
function pageChange(page, pageS) {
|
||||
// debugger;
|
||||
current.value = page;
|
||||
pageSize.value = pageS;
|
||||
}
|
||||
@@ -169,7 +168,7 @@
|
||||
key: 'address2',
|
||||
},
|
||||
]);
|
||||
const visible = ref(true);
|
||||
const visible = ref(false);
|
||||
|
||||
function openModal() {
|
||||
console.log('1');
|
||||
@@ -226,6 +225,10 @@
|
||||
border-bottom: 1px solid #2384dd;
|
||||
}
|
||||
|
||||
:deep(.ant-table-tbody > tr.ant-table-row:hover > td, .ant-table-tbody > tr > td.ant-table-cell-row-hover) {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
//#00152b
|
||||
// 分页
|
||||
:deep(.ant-pagination-prev .ant-pagination-item-link, .ant-pagination-next .ant-pagination-item-link) {
|
||||
|
||||
@@ -22,7 +22,12 @@
|
||||
<div class="col-value nowrap" :title="item.value">{{ item?.value }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-dialog-con" style="--moveUp: 50px; --moveDown: -50px" :class="show ? 'slide-top' : 'slide-bottom'" v-show="false">
|
||||
<div
|
||||
class="footer-dialog-con"
|
||||
style="--moveUp: 110px; --moveDown: -50px"
|
||||
:class="show ? 'slide-top' : 'slide-bottom'"
|
||||
v-show="isShowAlarm"
|
||||
>
|
||||
<FooterDialog></FooterDialog>
|
||||
</div>
|
||||
</div>
|
||||
@@ -31,12 +36,14 @@
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref, watch } from 'vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { Map } from '/@/assets/mapUtils/map';
|
||||
import $bus from '/@/utils/bus.ts';
|
||||
import FooterDialog from '/@/components/secondaryScreen/secondMap/components/footerDialog.vue';
|
||||
import WatchListDialog from '/@/components/secondaryScreen/secondMap/components/watchListDialog.vue';
|
||||
import { useFooterTable, useMoveClass } from '/@/components/secondaryScreen/secondMap/secondMapHooks.ts';
|
||||
import { footerApi } from '/@/components/secondaryScreen/secondMap/secondMapApi.ts';
|
||||
import { footerApi, mapListApi } from '/@/components/secondaryScreen/secondMap/secondMapApi.ts';
|
||||
import { earlyWarning } from '/@/utils/busConstant.ts';
|
||||
import { getToday } from '/@/utils/utils.ts';
|
||||
|
||||
const show = ref(false);
|
||||
|
||||
@@ -72,52 +79,13 @@
|
||||
count: 60,
|
||||
},
|
||||
];
|
||||
onMounted(() => {
|
||||
init();
|
||||
getFooterTable();
|
||||
});
|
||||
|
||||
// 底部表格
|
||||
const { isShow, className, setIsShow } = useMoveClass();
|
||||
|
||||
function init() {
|
||||
Map.initMap({ el: 'mapContainer' });
|
||||
Map.createOverlay(
|
||||
markerList,
|
||||
{
|
||||
content: function (val) {
|
||||
return `<div style="color: red;
|
||||
width: 21px;
|
||||
height: 44px;
|
||||
position: absolute;
|
||||
left: -20px;
|
||||
top: -20px;" title="${val.name}">
|
||||
</div>`;
|
||||
},
|
||||
},
|
||||
(val) => {
|
||||
console.log('info', val);
|
||||
const obj = {
|
||||
id: '1731587716383043586',
|
||||
orgCode: 'A01A01',
|
||||
orgCodeLeaf: 'A01A01A01',
|
||||
userCount: 4 + Math.random() * 4,
|
||||
deviceNum: 0,
|
||||
allotDeviceNum: Math.random() * 4,
|
||||
sevenDayNum: 1 + Math.random() * 4,
|
||||
fourteenDayNum: 1 + Math.random() * 4,
|
||||
heartRateErrorNum: Math.random() * 4,
|
||||
spoErrorNum: Math.random() * 4,
|
||||
stressErrorNum: Math.random() * 4,
|
||||
tempErrorNum: Math.random() * 4,
|
||||
dataDate: '2023-12-04 00:00:00',
|
||||
orgName: '安全环保监督部',
|
||||
deptName: '定边监督站',
|
||||
};
|
||||
setIsShow(true);
|
||||
setFooterList(obj);
|
||||
}
|
||||
);
|
||||
getMapList();
|
||||
}
|
||||
|
||||
const watchDialogRef = ref();
|
||||
@@ -128,25 +96,70 @@
|
||||
}
|
||||
}
|
||||
|
||||
const { footerList, setFooterList } = useFooterTable();
|
||||
const { footerList, setFooterList, setIsShowAlarm, isShowAlarm } = useFooterTable();
|
||||
watch(
|
||||
() => props.orgCode,
|
||||
() => {
|
||||
setIsShow(false);
|
||||
// getFooterTable();
|
||||
}
|
||||
);
|
||||
|
||||
async function getFooterTable() {
|
||||
async function getFooterTable(orgCode) {
|
||||
const params = {
|
||||
orgCode: 'A01A01' || props.orgCode,
|
||||
// dataDate: getToday(),
|
||||
orgCode: orgCode || props.orgCode,
|
||||
dataDate: getToday(),
|
||||
};
|
||||
const { code, result } = await footerApi(params);
|
||||
if (code == 200) {
|
||||
setFooterList(result.records[0]);
|
||||
}
|
||||
}
|
||||
|
||||
const mapList = ref([]);
|
||||
|
||||
async function getMapList() {
|
||||
const { code, result } = await mapListApi();
|
||||
if (code == 200 && result.length > 0) {
|
||||
const newArr = result.map((item) => ({ ...item, type: '6' }));
|
||||
mapList.value = newArr;
|
||||
Map.createOverlay(
|
||||
newArr,
|
||||
{
|
||||
content: function (val) {
|
||||
return `<div style="color: red;
|
||||
width: 21px;
|
||||
height: 44px;
|
||||
position: absolute;
|
||||
left: -20px;
|
||||
top: -20px;" title="${val.departName}">
|
||||
</div>`;
|
||||
},
|
||||
},
|
||||
(val) => {
|
||||
console.log('val', val);
|
||||
getFooterTable(val.orgCode);
|
||||
setIsShow(true);
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
init();
|
||||
|
||||
$bus.on(earlyWarning, (params) => {
|
||||
console.log('params', params);
|
||||
drawMarker(params);
|
||||
isShow.value ? setIsShow(true) : setIsShow(false);
|
||||
isShowAlarm.value ? setIsShowAlarm(true) : setIsShowAlarm(false);
|
||||
});
|
||||
});
|
||||
|
||||
function drawMarker(data) {
|
||||
const { lon, lat } = data;
|
||||
if (!lon || !lat) return;
|
||||
Map.createMarker(data);
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.center-map {
|
||||
|
||||
@@ -2,6 +2,8 @@ import { get } from '/@/api/request.ts';
|
||||
|
||||
export enum Api {
|
||||
footerStatistic = '/health-watch/watch/deptStatisticData/list',
|
||||
mapListApi = '/health-watch/watch/watchDevice/getMapList',
|
||||
}
|
||||
|
||||
export const footerApi = (params) => get(Api.footerStatistic, params);
|
||||
export const mapListApi = (params) => get(Api.mapListApi, params);
|
||||
|
||||
@@ -69,6 +69,12 @@ export function useTimeType(t) {
|
||||
}
|
||||
|
||||
export function useFooterTable() {
|
||||
const isShowAlarm = ref(false)
|
||||
|
||||
function setIsShowAlarm(type: boolean) {
|
||||
isShowAlarm.value = type
|
||||
}
|
||||
|
||||
const footerList = ref([
|
||||
{
|
||||
name: '单位名称',
|
||||
@@ -121,7 +127,9 @@ export function useFooterTable() {
|
||||
|
||||
return {
|
||||
footerList,
|
||||
setFooterList
|
||||
setFooterList,
|
||||
setIsShowAlarm,
|
||||
isShowAlarm
|
||||
}
|
||||
}
|
||||
|
||||
@@ -141,3 +149,33 @@ export function useMoveClass() {
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export function useTree() {
|
||||
const treeOption = [
|
||||
{
|
||||
value: 'Chinese delicious food',
|
||||
label: '中国美食',
|
||||
children: [
|
||||
{
|
||||
value: 'key3',
|
||||
label: '月饼',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: 'Russia delicious food',
|
||||
label: '俄罗斯美食',
|
||||
children: [
|
||||
{
|
||||
value: 'key6',
|
||||
label: '红肠',
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
const orgCode = ref([])
|
||||
return {
|
||||
orgCode,
|
||||
treeOption
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
//副屏-预警
|
||||
export const earlyWarning = 'early-warning';
|
||||
@@ -27,3 +27,15 @@ export function useTopTime() {
|
||||
export function getToday() {
|
||||
return dayjs().format('YYYY-MM-DD');
|
||||
}
|
||||
|
||||
//分钟转小时
|
||||
export function minuteToStr(minutes) {
|
||||
// debugger;
|
||||
if (!minutes) return '0分';
|
||||
let h = Math.floor(minutes / 60);
|
||||
let m = Math.floor(minutes % 60);
|
||||
if (h) {
|
||||
return `${h}小时${m > 0 ? `${m}分钟` : ''}`;
|
||||
}
|
||||
return `${m}分钟`;
|
||||
}
|
||||
@@ -1,8 +1,8 @@
|
||||
import { get } from '/@/api/request';
|
||||
|
||||
export enum Api {
|
||||
deleteWatchNo = 'health-watch/watch/watchMonitorData/delete',
|
||||
organizationTree = '',
|
||||
}
|
||||
|
||||
//获取全部部门
|
||||
export const deleteWatchNo = (params: any) => get(Api.deleteWatchNo, params);
|
||||
// 组织机构tree
|
||||
export const getOrganizationTree = () => get(Api.organizationTree);
|
||||
+170
-166
@@ -1,191 +1,195 @@
|
||||
<template>
|
||||
<div class="outer">
|
||||
<div class="title-d">
|
||||
<div class="title-d-left">
|
||||
<div class="outer">
|
||||
<div class="title-d">
|
||||
<div class="title-d-left">
|
||||
<span style="cursor: pointer" @click="clickBack">
|
||||
<a-space>
|
||||
<rollback-outlined/>
|
||||
<rollback-outlined />
|
||||
</a-space>
|
||||
返回
|
||||
</span>
|
||||
</div>
|
||||
<div class="title-d-middle"> 应急就医服务中心</div>
|
||||
<div class="title-d-right"> 累计运行时间：{{ dayTimeT }}</div>
|
||||
</div>
|
||||
<div class="title-d-middle"> 应急就医服务中心</div>
|
||||
<div class="title-d-right"> 累计运行时间：{{ dayTimeT }}</div>
|
||||
</div>
|
||||
<div class="body-d">
|
||||
<div class="body-d-left">
|
||||
<screen-left :orgCode="orgCode" :type="type" />
|
||||
</div>
|
||||
<div class="body-d-middle">
|
||||
<SecondMap :orgCode="orgCode" :type="type">
|
||||
<template #rightForm>
|
||||
<a-select
|
||||
placeholder="选择单位"
|
||||
v-model:value="orgCode"
|
||||
class="type-select"
|
||||
:options="option"
|
||||
:field-names="fieldNames"
|
||||
></a-select>
|
||||
<!-- <a-cascader v-model:value="treeValue" :options="treeOption" placeholder="选择单位" :open="true" :changeOnSelect="true" />-->
|
||||
<a-select placeholder="选择时间范围" v-model:value="type" class="type-select" :options="timeRangeOption"></a-select>
|
||||
</template>
|
||||
</SecondMap>
|
||||
</div>
|
||||
<div class="body-d-right">
|
||||
<one-r :orgCode="orgCode" :type="type" />
|
||||
<two-r :orgCode="orgCode" :type="type" />
|
||||
<three-r :orgCode="orgCode" :type="type" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-d"></div>
|
||||
</div>
|
||||
<div class="body-d">
|
||||
<div class="body-d-left">
|
||||
<screen-left/>
|
||||
</div>
|
||||
<div class="body-d-middle">
|
||||
<SecondMap :orgCode="orgCode" :type="type">
|
||||
<template #rightForm>
|
||||
<a-select
|
||||
placeholder="选择单位"
|
||||
v-model:value="orgCode"
|
||||
class="type-select"
|
||||
:options="option"
|
||||
:field-names="fieldNames"
|
||||
></a-select>
|
||||
<a-select placeholder="选择时间范围" v-model:value="type" class="type-select"
|
||||
:options="timeRangeOption"></a-select>
|
||||
</template>
|
||||
</SecondMap>
|
||||
</div>
|
||||
<div class="body-d-right">
|
||||
<one-r/>
|
||||
<two-r/>
|
||||
<three-r/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-d"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import {RollbackOutlined} from '@ant-design/icons-vue';
|
||||
import {ref} from 'vue';
|
||||
import OneR from '/@/components/secondaryScreen/screen-right/oneR.vue';
|
||||
import TwoR from '/@/components/secondaryScreen/screen-right/twoR.vue';
|
||||
import ThreeR from '/@/components/secondaryScreen/screen-right/threeR.vue';
|
||||
import SecondMap from '/@/components/secondaryScreen/secondMap/secondMap';
|
||||
import screenLeft from '/@/components/secondaryScreen/screen-left/screenLeft.vue';
|
||||
import router from '/@/router';
|
||||
import {useDepart, useTimeType} from '/@/components/secondaryScreen/secondMap/secondMapHooks.ts';
|
||||
import {useTopTime} from '/@/utils/utils.ts';
|
||||
import { RollbackOutlined } from '@ant-design/icons-vue';
|
||||
import { ref, watch } from 'vue';
|
||||
import OneR from '/@/components/secondaryScreen/screen-right/oneR.vue';
|
||||
import TwoR from '/@/components/secondaryScreen/screen-right/twoR.vue';
|
||||
import ThreeR from '/@/components/secondaryScreen/screen-right/threeR.vue';
|
||||
import SecondMap from '/@/components/secondaryScreen/secondMap/secondMap';
|
||||
import screenLeft from '/@/components/secondaryScreen/screen-left/screenLeft.vue';
|
||||
import router from '/@/router';
|
||||
import { useDepart, useTimeType, useTree } from '/@/components/secondaryScreen/secondMap/secondMapHooks.ts';
|
||||
import { useTopTime } from '/@/utils/utils.ts';
|
||||
|
||||
const dayTimeT = ref();
|
||||
const dayTimeT = ref();
|
||||
|
||||
function init() {
|
||||
getTime();
|
||||
setInterval(() => {
|
||||
getTime();
|
||||
}, 1000);
|
||||
}
|
||||
function init() {
|
||||
getTime();
|
||||
setInterval(() => {
|
||||
getTime();
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
init();
|
||||
init();
|
||||
|
||||
function getTime() {
|
||||
const {timeRight} = useTopTime();
|
||||
dayTimeT.value = timeRight;
|
||||
}
|
||||
function getTime() {
|
||||
const { timeRight } = useTopTime();
|
||||
dayTimeT.value = timeRight;
|
||||
}
|
||||
|
||||
function clickBack() {
|
||||
router.go(-1);
|
||||
}
|
||||
function clickBack() {
|
||||
router.go(-1);
|
||||
}
|
||||
|
||||
const {orgCode, option, fieldNames} = useDepart({});
|
||||
const {type, timeRangeOption} = useTimeType('week');
|
||||
const { orgCode: treeValue, treeOption } = useTree();
|
||||
watch(treeValue, (n) => {
|
||||
console.log('n', n);
|
||||
});
|
||||
const { orgCode, option, fieldNames } = useDepart({});
|
||||
const { type, timeRangeOption } = useTimeType('week');
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.outer {
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
background: url('../assets/images/bg.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.title-d {
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
display: flex;
|
||||
padding-bottom: 9px;
|
||||
background: url('../assets/images/top-title.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.title-d-left,
|
||||
.title-d-middle,
|
||||
.title-d-right {
|
||||
font-size: 27px;
|
||||
color: #ffffff;
|
||||
line-height: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title-d-left {
|
||||
text-align: left !important;
|
||||
padding-left: 80px;
|
||||
}
|
||||
|
||||
> :nth-child(1) {
|
||||
width: 29%;
|
||||
}
|
||||
|
||||
> :nth-child(2) {
|
||||
width: 42%;
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
> :nth-child(3) {
|
||||
width: 29%;
|
||||
}
|
||||
}
|
||||
|
||||
.body-d {
|
||||
display: flex;
|
||||
height: calc(100% - 120px);
|
||||
//padding-top: 10px;
|
||||
|
||||
> :nth-child(1) {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
> :nth-child(2) {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
> :nth-child(3) {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.body-d-left,
|
||||
.body-d-right {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.body-d-right {
|
||||
> :nth-child(1) {
|
||||
width: 100%;
|
||||
height: calc(100% / 4);
|
||||
max-height: calc(100% / 4);
|
||||
padding: 10px;
|
||||
.outer {
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
background: url('../assets/images/bg.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
> :nth-child(2) {
|
||||
width: 100%;
|
||||
height: calc(100% / 4);
|
||||
max-height: calc(100% / 4);
|
||||
padding: 10px;
|
||||
.title-d {
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
display: flex;
|
||||
padding-bottom: 9px;
|
||||
background: url('../assets/images/top-title.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.title-d-left,
|
||||
.title-d-middle,
|
||||
.title-d-right {
|
||||
font-size: 27px;
|
||||
color: #ffffff;
|
||||
line-height: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title-d-left {
|
||||
text-align: left !important;
|
||||
padding-left: 80px;
|
||||
}
|
||||
|
||||
> :nth-child(1) {
|
||||
width: 29%;
|
||||
}
|
||||
|
||||
> :nth-child(2) {
|
||||
width: 42%;
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
> :nth-child(3) {
|
||||
width: 29%;
|
||||
}
|
||||
}
|
||||
|
||||
> :nth-child(3) {
|
||||
width: 100%;
|
||||
height: calc(100% / 2);
|
||||
padding: 10px;
|
||||
.body-d {
|
||||
display: flex;
|
||||
height: calc(100% - 120px);
|
||||
//padding-top: 10px;
|
||||
|
||||
> :nth-child(1) {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
> :nth-child(2) {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
> :nth-child(3) {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.body-d-left,
|
||||
.body-d-right {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.body-d-right {
|
||||
> :nth-child(1) {
|
||||
width: 100%;
|
||||
height: calc(100% / 4);
|
||||
max-height: calc(100% / 4);
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
> :nth-child(2) {
|
||||
width: 100%;
|
||||
height: calc(100% / 4);
|
||||
max-height: calc(100% / 4);
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
> :nth-child(3) {
|
||||
width: 100%;
|
||||
height: calc(100% / 2);
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.body-d-left {
|
||||
> :nth-child(n) {
|
||||
width: 100%;
|
||||
height: calc(100% / 4);
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.body-d-middle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.type-select {
|
||||
width: 140px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.body-d-left {
|
||||
> :nth-child(n) {
|
||||
width: 100%;
|
||||
height: calc(100% / 4);
|
||||
padding: 10px;
|
||||
.bottom-d {
|
||||
height: 40px;
|
||||
background: url('../assets/images/bottom-b.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.body-d-middle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.type-select {
|
||||
width: 140px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-d {
|
||||
height: 40px;
|
||||
background: url('../assets/images/bottom-b.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -29,4 +29,11 @@ export default defineConfig({
|
||||
host: true,
|
||||
https: false,
|
||||
},
|
||||
optimizeDeps: {
|
||||
esbuildOptions: {
|
||||
target: 'es2020',
|
||||
},
|
||||
// @iconify/iconify: The dependency is dynamically and virtually loaded by @purge-icons/generated, so it needs to be specified explicitly
|
||||
include: ['lodash-es', 'ant-design-vue/es/locale/zh_CN', 'ant-design-vue/es/locale/en_US'],
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user