update

.env.development

@@ -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

src/App.vue

@@ -1,6 +1,15 @@
 <template>
+    <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>

src/assets/less/amap-item.less

@@ -30,7 +30,7 @@
 
 .alarm-content {
   background-color: #263d5e;
-  color: red;
+  color: #fff;
   font-size: 14px;
   padding: 7px 10px;
   border: 1px solid #1b7ef2;

src/assets/less/index.less

@@ -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;

src/assets/mapUtils/map.ts

@@ -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;
             }

src/assets/ts/antd.ts

@@ -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);
 }

src/components/body-d-right/right.api.ts

@@ -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);

src/components/dialog/Dialog.vue

@@ -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 {

src/components/item-d/pieCharts.ts

@@ -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',

src/components/secondaryScreen/commonApi.ts

@@ -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);

src/components/secondaryScreen/screen-left/screenLeft.vue

@@ -5,8 +5,9 @@
 </template>
 
 <script setup lang="ts">
-import {ref} from '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([
         {
@@ -51,8 +52,24 @@ const dataList = ref([
             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 scoped></style>
-
-</style>

src/components/secondaryScreen/screen-right/oneR.vue

@@ -1,12 +1,9 @@
 <template>
     <div class="terminal-container">
-        <public-title title="睡眠">
+        <public-title title="睡眠" />
-            <template #right>平均睡眠时长：6小时30分</template>
-        </public-title>
         <div class="inner">
             <div class="title">
-                <span class="count">6.5h</span>
+                <span class="lightSleep">平均睡眠 {{ nums.avg }} 深睡 {{ nums.avgLong }} 浅睡 {{ nums.avgShort }}</span>
-                <span class="lightSleep">深睡2.4小时 浅睡4.1小时</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, watch } from 'vue';
-    import { ref, onMounted, unref } from 'vue';
+    import { formatStr, sleepCharts } from '/@/components/secondaryScreen/screen-right/screenRightHooks';
-    import { 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() {
+    async function init() {
-        initChart();
+        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();

src/components/secondaryScreen/screen-right/screenRightHooks.ts

@@ -1,119 +1,174 @@
 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%',
+            left: '0%',
-            right: '3%',
+            right: '0%',
-            bottom: '20%',
+            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: {
+            axisTick: {
-                color: '#ffffff'
+                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: [
+                data: awake,
-                    2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
-                ],
             },
             {
                 name: '浅睡',
                 type: 'bar',
-                data: [
+                data: short,
-                    2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
-                ],
             },
             {
                 name: '深睡',
                 type: 'bar',
-                data: [
+                data: long,
-                    2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
+            },
         ],
-            }
-        ]
     };
 }
 
-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) {
+    function setStep(data) {
-        data?.map((item1) => {
+        stepData.value.map((item) => {
-            healthData.value.map((item2) => {
+            item.value = data[item.type] || 0;
-                if (item1.type == item2.type) {
-                    item2.value = item1.count;
-                }
-            });
         });
     }
 
     return {
-        healthData,
+        stepData,
-        getValue,
+        setStep,
-        getName,
-        setHealth,
     };
 }
+
+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,
+    },
+];

src/components/secondaryScreen/screen-right/threeR.vue

@@ -3,79 +3,75 @@
         <public-title title="预警" />
         <div class="inner-screen">
             <a-table
-          class="ant-table-striped"
+                :scroll="{
-          :dataSource="tableInfo.dataSource"
+                    y: tableHeight,
-          :columns="tableInfo.columns"
+                }"
-          :pagination="tableInfo.pagination"
+                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">
+                    <div class="police-times" @click="handlePoliceDetail(record)">
-            <span class="police-text">{{ record.address }}</span>
+                        <span class="position"></span>
-            <span class="police-icon" @click="handlePoliceDetail(record)"></span>
                     </div>
                 </template>
             </a-table>
         </div>
     </div>
 </template>
-<script setup lang="ts">
+<script lang="ts" setup>
-import {ref} from 'vue';
+    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({
+    const tableHeight = ref(0);
-  dataSource: [
+    const dataSource = ref([]);
-    {
+    const pagination = ref({
-      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,
+        pageSize: 10,
-    total: 10,
+        total: 0,
-  },
+        onChange: pageChange,
     });
 
     function handlePoliceDetail(record) {
-  console.log(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">
+<style lang="less" scoped>
     .inner-screen {
         width: 100%;
         height: calc(100% - 40px);
@@ -85,16 +81,14 @@ function handlePoliceDetail(record) {
             display: flex;
             align-items: center;
             justify-content: center;
+            cursor: pointer !important;
 
-    .police-text {
+            .position {
-      padding-right: 20px;
+                margin-left: 5px;
-    }
-
-    .police-icon {
                 display: inline-block;
                 width: 18px;
                 height: 18px;
-      background: url('/@/assets/images/terminal.png') no-repeat;
+                background: url('/@/assets/img/position.png') no-repeat;
                 background-size: 100% 100%;
                 cursor: pointer;
             }
@@ -106,11 +100,12 @@ function handlePoliceDetail(record) {
 
         :deep(.ant-table) {
             background-color: transparent;
-    pointer-events: none;
+            //pointer-events: none;
         }
 
         :deep(.ant-table-tbody > tr > td) {
             border-bottom: none;
+            padding: 6px 4px;
         }
 
         :deep(.ant-table-row:hover) {
@@ -119,13 +114,28 @@ function handlePoliceDetail(record) {
         }
     }
 
+    //奇行
     .ant-table-striped :deep(.table-striped) td {
         background-color: #0a0a0c;
         color: #ffffff;
     }
 
+    //偶行
     .ant-table-striped :deep(.table-default) td {
         color: #ffffff;
+        background: none !important;
+    }
+
+    //奇行-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;
+    }
+
+    //偶行-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;
     }
 
     // 分页

src/components/secondaryScreen/screen-right/twoR.vue

@@ -8,11 +8,15 @@
     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 { useStep } from '/@/components/secondaryScreen/screen-right/screenRightHooks.ts';
     import { screenPie } from '/@/components/item-d/pieCharts.ts';
+    import { getStep } from '/@/components/secondaryScreen/commonApi.ts';
 
+    const props = defineProps({
+        orgCode: String,
+        type: String,
+    });
     const { setSpin, spinning } = useSpin();
     const healthChart = ref<HTMLElement>();
 
@@ -20,21 +24,23 @@ const color = ref(['#B750BE', '#6C63F0', '#3AACFF', '#ED589D', '#FB466C']);
     onMounted(() => {
         init();
     });
-const {healthData, getValue, setHealth} = useHealth();
+    const { stepData, getValue, setStep } = useStep();
 
     async function init() {
         try {
-    const {code, result} = await getHealthDataList({});
+            const params = {
+                orgCode: props.orgCode,
+                type: props.type,
+            };
+            const { code, result } = await getStep(params);
             setSpin(true);
             if (code != 200) {
                 return;
             }
-    setHealth(result);
+            setStep(result);
-    const yData = unref(getValue);
+            initChart(unref(stepData), '15000');
-    let total = yData.reduce((accumulator, currentValue) => Number(accumulator) + Number(currentValue), 0);
-    initChart(unref(healthData), '89');
         } catch {
-    initChart(unref(healthData), 0);
+            initChart(unref(stepData), 0);
         }
     }
 

src/components/secondaryScreen/secondMap/components/watchListDialog.vue

@@ -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) {

src/components/secondaryScreen/secondMap/secondMap.vue

@@ -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(
+        getMapList();
-            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);
-            }
-        );
     }
 
     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,
+            orgCode: orgCode || props.orgCode,
-            // dataDate: getToday(),
+            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 {

src/components/secondaryScreen/secondMap/secondMapApi.ts

@@ -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);

src/components/secondaryScreen/secondMap/secondMapHooks.ts

@@ -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
+    }
+}

src/utils/busConstant.ts

@@ -0,0 +1,2 @@
+//副屏-预警
+export const earlyWarning = 'early-warning';

src/utils/utils.ts

@@ -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}分钟`;
+}

src/views/index.api.ts

@@ -1,8 +1,8 @@
 import { get } from '/@/api/request';
 
 export enum Api {
-    deleteWatchNo = 'health-watch/watch/watchMonitorData/delete',
+    organizationTree = '',
 }
 
-//获取全部部门
+// 组织机构tree
-export const deleteWatchNo = (params: any) => get(Api.deleteWatchNo, params);
+export const getOrganizationTree = () => get(Api.organizationTree);

src/views/indexSon.vue

@@ -14,7 +14,7 @@
         </div>
         <div class="body-d">
             <div class="body-d-left">
-        <screen-left/>
+                <screen-left :orgCode="orgCode" :type="type" />
             </div>
             <div class="body-d-middle">
                 <SecondMap :orgCode="orgCode" :type="type">
@@ -26,15 +26,15 @@
                             :options="option"
                             :field-names="fieldNames"
                         ></a-select>
-            <a-select placeholder="选择时间范围" v-model:value="type" class="type-select"
+                        <!--                        <a-cascader v-model:value="treeValue" :options="treeOption" placeholder="选择单位" :open="true" :changeOnSelect="true" />-->
-                      :options="timeRangeOption"></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/>
+                <one-r :orgCode="orgCode" :type="type" />
-        <two-r/>
+                <two-r :orgCode="orgCode" :type="type" />
-        <three-r/>
+                <three-r :orgCode="orgCode" :type="type" />
             </div>
         </div>
         <div class="bottom-d"></div>
@@ -42,14 +42,14 @@
 </template>
 <script setup lang="ts">
     import { RollbackOutlined } from '@ant-design/icons-vue';
-import {ref} from '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} from '/@/components/secondaryScreen/secondMap/secondMapHooks.ts';
+    import { useDepart, useTimeType, useTree } from '/@/components/secondaryScreen/secondMap/secondMapHooks.ts';
     import { useTopTime } from '/@/utils/utils.ts';
 
     const dayTimeT = ref();
@@ -72,6 +72,10 @@ function clickBack() {
         router.go(-1);
     }
 
+    const { orgCode: treeValue, treeOption } = useTree();
+    watch(treeValue, (n) => {
+        console.log('n', n);
+    });
     const { orgCode, option, fieldNames } = useDepart({});
     const { type, timeRangeOption } = useTimeType('week');
 </script>

vite.config.ts

@@ -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'],
+    },
 });