update

.env.development

@@ -1,4 +1,9 @@
 # 王昊地址
 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
+
+#应急求助-websocket
+VITE_GLOB_API_YIN_JI=ws://192.168.1.6:7098/websocket/watchMonitor
+#健康监测工具报警-websocket
+VITE_GLOB_API_JIAN_CE=ws://192.168.1.6:7011/websocket/emergency

.eslintignore

@@ -12,4 +12,4 @@ dist
 .husky
 .local
 /bin
-Dockerfile
+Dockerfile

package.json

@@ -4,13 +4,14 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --open",
     "build": "vue-tsc && vite build",
     "preview": "vite preview",
     "lint:prettier": "prettier --write  \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\""
   },
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
+    "@iamzzg/data-view": "^2.10.0",
     "axios": "^1.6.2",
     "dayjs": "^1.11.10",
     "lodash-es": "^4.17.21",

src/api/request.ts

@@ -3,7 +3,7 @@ import { getAppEnvConfig } from '../utils/env.ts';
 
 const { VITE_GLOB_API_URL } = getAppEnvConfig();
 let token =
-    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6ImFkbWluIiwiaWRlbnRpZmllciI6ImU5Y2EyM2Q2OGQ4ODRkNGViYjE5ZDA3ODg5NzI3ZGFlIiwiZXhwIjoxNzAyMDA1MDQ4fQ.M1Xlecj3eUOgZUSofOlyBMoxJ5F01KH-tgJxaV2Femc\n';
+    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6ImFkbWluIiwiaWRlbnRpZmllciI6ImU5Y2EyM2Q2OGQ4ODRkNGViYjE5ZDA3ODg5NzI3ZGFlIiwiZXhwIjoxNzAzMjMyOTQ0fQ.de0NagvCsVmg_sZGoE5PirZcdDRXPX-j9yj3AqbV6t4';
 const service = axios.create({
     baseURL: VITE_GLOB_API_URL,
     timeout: 50000,

src/assets/less/amap-item.less

@@ -1,59 +1,64 @@
 //高德信息弹窗
 .amap-info-contentContainer {
-  .amap-content-body {
+    .amap-content-body {
-    background: #00152B;
+        background: #00152B;
-    border: 1px solid #129BFF;
+        border: 1px solid #129BFF;
 
-    .amap-lib-infowindow {
+        .amap-lib-infowindow {
-      background: #00152B;
+            background: #00152B;
 
-      .amap-lib-infowindow-title {
+            .amap-lib-infowindow-title {
-        color: #fff;
+                color: #fff;
-        border-bottom: 1px solid #129BFF;
+                border-bottom: 1px solid #129BFF;
-        padding: 4px 0;
+                padding: 4px 0;
-      }
+            }
 
-      .amap-lib-infowindow-content {
+            .amap-lib-infowindow-content {
-        color: #fff;
+                color: #fff;
-        padding: 4px 0;
+                padding: 4px 0;
-      }
+            }
+        }
+    }
+
+    .amap-combo-close {
+        top: 5px;
+        right: 7px;
     }
-  }
 }
 
 
 /*地图元素样式---start*/
 //marker
 .amap-marker-label {
-  padding: 0;
+    padding: 0;
 }
 
 .alarm-content {
-  background-color: #263d5e;
+    background-color: #263d5e;
-  color: #fff;
-  font-size: 14px;
-  padding: 7px 10px;
-  border: 1px solid #1b7ef2;
-  position: relative;
-
-  .close-btn {
-    position: absolute;
-    top: -6px;
-    right: -8px;
-    width: 15px;
-    height: 15px;
-    font-size: 12px;
-    background: #ccc;
-    border-radius: 50%;
     color: #fff;
-    text-align: center;
+    font-size: 14px;
-    line-height: 15px;
+    padding: 7px 10px;
-    box-shadow: -1px 1px 1px rgba(10, 10, 10, 0.2);
+    border: 1px solid #1b7ef2;
-  }
+    position: relative;
 
-  .close-btn:hover {
+    .close-btn {
-    background: #666;
+        position: absolute;
-  }
+        top: -6px;
+        right: -8px;
+        width: 15px;
+        height: 15px;
+        font-size: 12px;
+        background: #ccc;
+        border-radius: 50%;
+        color: #fff;
+        text-align: center;
+        line-height: 15px;
+        box-shadow: -1px 1px 1px rgba(10, 10, 10, 0.2);
+    }
+
+    .close-btn:hover {
+        background: #666;
+    }
 }
 
 /*地图元素样式---end*/

src/assets/less/index.less

@@ -1,146 +1,149 @@
 @import "./amap-item";
 
 .type-time {
-  padding-right: 4%;
+    padding-right: 4%;
-  padding-top: 3%;
+    padding-top: 3%;
-  font-size: 16px;
+    font-size: 16px;
-  display: flex;
+    display: flex;
-  justify-content: right;
+    justify-content: right;
 
-  span {
+    span {
-    padding: 0 2%;
+        padding: 0 2%;
-    cursor: pointer;
+        cursor: pointer;
-  }
-
-  .select {
-    color: #45a2ff;
-    position: relative;
-
-    &:after {
-      content: '';
-      position: absolute;
-      display: block;
-      width: 72%;
-      left: 6px;
-      bottom: -12px;
-      height: 6px;
-      background: url('../images/light.png') no-repeat;
-      background-size: 100% 100%;
     }
-  }
 
-  .unSelect {
+    .select {
-    color: #a3a4a4;
+        color: #45a2ff;
-  }
+        position: relative;
+
+        &:after {
+            content: '';
+            position: absolute;
+            display: block;
+            width: 72%;
+            left: 6px;
+            bottom: -12px;
+            height: 6px;
+            background: url('../images/light.png') no-repeat;
+            background-size: 100% 100%;
+        }
+    }
+
+    .unSelect {
+        color: #a3a4a4;
+    }
 }
 
 *::-webkit-scrollbar {
-  width: 12px;
+    width: 12px;
-  height: 12px;
+    height: 12px;
 }
 
 *::-webkit-scrollbar-button {
-  width: 0;
+    width: 0;
-  height: 0;
+    height: 0;
-  display: none;
+    display: none;
 }
 
 *::-webkit-scrollbar-corner {
-  background-color: transparent;
+    background-color: transparent;
 }
 
 *::-webkit-scrollbar-thumb {
-  border: 4px solid rgba(0, 0, 0, 0);
+    border: 4px solid rgba(0, 0, 0, 0);
-  height: 6px;
+    height: 6px;
-  border-radius: 25px;
+    border-radius: 25px;
-  background-clip: padding-box;
+    background-clip: padding-box;
-  background-color: rgba(0, 0, 0, 0.3);
+    background-color: rgba(0, 0, 0, 0.3);
 }
 
 .nowrap {
-  overflow: hidden;
+    overflow: hidden;
-  text-overflow: ellipsis;
+    text-overflow: ellipsis;
-  white-space: nowrap;
+    white-space: nowrap;
 }
 
 .ant-modal-mask {
-  background-color: rgba(0, 0, 0, 0.65) !important;
+    background-color: rgba(0, 0, 0, 0.65) !important;
 }
 
 // 下拉框样式-start
 .ant-select-dropdown {
-  background-color: #00152b !important;
+    background-color: #00152b !important;
-  border-right: 1px solid #1b7ef2;
+    border-right: 1px solid #1b7ef2;
-  border-left: 1px solid #1b7ef2;
+    border-left: 1px solid #1b7ef2;
-  border-bottom: 1px solid #1b7ef2;
+    border-bottom: 1px solid #1b7ef2;
 }
 
 .ant-select-item {
-  color: #1b7ef2 !important;
+    color: #1b7ef2 !important;
 }
 
 //框背景色
 .ant-select:not(.ant-select-customize-input) .ant-select-selector {
-  color: #1b7ef2 !important;
+    color: #1b7ef2 !important;
-  background-color: transparent !important;
+    background-color: transparent !important;
-  border: 1px solid #1b7ef2 !important;
+    border: 1px solid #1b7ef2 !important;
 }
 
 .ant-select-item-option-selected {
-  color: #ffffff !important;
+    color: #ffffff !important;
 }
 
 // 选中字体颜色
 .ant-select-selection-item {
-  //color: #1b7ef2 !important;
+    //color: #1b7ef2 !important;
-  color: #fff;
+    color: #fff;
 }
 
 .ant-select-item-option-active {
-  background-color: transparent !important;
+    background-color: transparent !important;
 }
 
 .ant-select-item-option-active:hover {
-  background-color: #002e64 !important;
+    background-color: #002e64 !important;
 }
 
 // 箭头颜色
 .ant-select-arrow {
-  color: #1b7ef2 !important;
+    color: #1b7ef2 !important;
 }
 
 .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
-  background-color: #002e64 !important;
+    background-color: #002e64 !important;
 }
 
 // 下拉框样式-end
 
 // 级联选择器样式-start
 .ant-cascader-menu-item {
-  color: #1b7ef2 !important;
+    color: #1b7ef2 !important;
 }
 
 .ant-cascader-menu-item:hover {
-  background-color: #002e64 !important;
+    background-color: #002e64 !important;
 }
 
 .ant-cascader-menu-item-active {
-  color: #fff !important;
+    color: #fff !important;
-  background-color: #002e64 !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;
+    color: #1b7ef2 !important;
 }
 
 // 级联选择器样式-end
+.ant-empty-description {
+    color: #fff;
+}
 
 //直升机
 .helicopter {
-  width: 60px;
+    width: 60px;
-  height: 37px;
+    height: 37px;
-  background: url("../img/helicopter.png") no-repeat;
+    background: url("../img/helicopter.png") no-repeat;
-  background-size: 100% 100%;
+    background-size: 100% 100%;
-  margin-bottom: 4px;
+    margin-bottom: 4px;
 }
 

src/assets/mapUtils/map.ts

@@ -3,6 +3,7 @@ import chinaInner from '/@/assets/lngLat/chinaInner.ts';
 import { createCircle, createIcon, typeToIcon } from '/@/assets/mapUtils/commonFun.ts';
 import { aircraftContent, alarmIcon } from '/@/components/chinaMap/chinaHooks.ts';
 import { isFunction } from '/@/utils/is.ts';
+import { Callback, ExtDataType, InitMap, MarkerOption, ResultType } from '/@/assets/mapUtils/mapFunTypes.ts';
 
 export const defaultOption = {
     center: [106.3, 37.87], //地图中心点
@@ -23,7 +24,7 @@ export const Map = {
      * @param el dom元素 id选择器
      * @param option 地图配置
      */
-    initMap({ el, option }) {
+    initMap({ el, option }: InitMap) {
         const { zoom, center, mapStyle } = { ...defaultOption, ...option };
         //基本地图加载
         this.map = new AMap.Map(el, {
@@ -43,7 +44,7 @@ export const Map = {
     drawOutLine() {
         let geoJson = new AMap.GeoJSON({
             geoJSON: china,
-            getPolygon: function (geoJson, lngLats) {
+            getPolygon: function (geoJson: string, lngLats: any) {
                 return new AMap.Polyline({
                     path: lngLats[0],
                     strokeColor: '#6ccffe',
@@ -62,7 +63,7 @@ export const Map = {
     drawInnerLine() {
         let geoJson = new AMap.GeoJSON({
             geoJSON: chinaInner,
-            getPolygon: function (geoJson, lngLats) {
+            getPolygon: function (geoJson: string, lngLats: any) {
                 return new AMap.Polyline({
                     path: lngLats[0],
                     strokeColor: '#359de5',
@@ -71,24 +72,35 @@ export const Map = {
             },
         });
         this.map.add(geoJson);
-    }, // 清空当前地图上除了边界线的覆盖物
+    },
+    /**
+     * @desc 设置地图级别与中心点
+     * @param center 【lon,lat】
+     * @param zoom 地图层级
+     * */
+    setZoomCenter(center, zoom = 12) {
+        this.map && this.map.setZoomAndCenter(zoom, center);
+    },
+    /**
+     * @desc 清空当前地图上除了边界线的覆盖物
+     */
     removeOverlayGroup() {
         this.clearAircraft();
         this.clearOverlay();
         this.clearAirRange();
         this.clearMarker(); //
-        if (this.airMarkerList.length > 0) {
+        if (this.airMarkerList) {
-            for (let i = 0; i < this.airMarkerList.length; i++) {
+            this.airMarkerList = [];
-                this.airMarkerList[i].setMap(null);
-            }
         }
         // this.map.remove(this.airMarkerList);
     }, //
     /**
      * @desc 创建覆盖物组，用于批量处理点 （控制显隐，点击事件等）
      * @param result
+     * @param extData
+     * @param callback
      */
-    createOverlay(result, { extOption = {}, content }, callback) {
+    createOverlay(result: ResultType[], extData?: ExtDataType, callback?: Callback) {
         this.removeOverlayGroup();
         this.overlayGroup = new AMap.OverlayGroup();
         for (let i = 0; i < result.length; i++) {
@@ -101,6 +113,7 @@ export const Map = {
             }
             // 创建一个 Icon
             let startIcon = typeToIcon(type);
+            // debugger;
             // 将 icon 传入 marker
             let startMarker = new AMap.Marker({
                 // 点的坐标
@@ -109,9 +122,9 @@ export const Map = {
                 clickable: true, //点额外携带的数据，用户自定义属性，支持JavaScript API任意数据类型
                 extData: result[i],
                 label: {
-                    content: isFunction(content) && content(result[i]),
+                    content: isFunction(extData?.content) && extData?.content(result[i]),
                 },
-                ...extOption,
+                ...extData?.extOption,
             });
             // 可以调用setExtData（）设置自定义属性
             //将组 挂载到地图上
@@ -139,9 +152,11 @@ export const Map = {
      * @desc 创建直升机marker
      * @param result
      */
-    createAircraft(result) {
+    createAircraft(result: ResultType[]) {
+        console.log('result', result);
         this.removeOverlayGroup();
         this.clearActiveHospital();
+        // debugger;
         if (!Array.isArray(result) && result.length == 0) return;
         this.createAirRange(result);
         let that = this;
@@ -152,6 +167,7 @@ export const Map = {
             arr,
             {
                 renderMarker: (context) => {
+                    console.log('context', context);
                     let factor = Math.pow(context.count / count, 1 / 18);
                     let div = document.createElement('div');
                     div.className = 'render-air';
@@ -163,25 +179,26 @@ export const Map = {
                     div.style.fontSize = '14px';
                     context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
                     context.marker.setContent(div);
-                    this.airMarkerList.push(context.marker);
+                    // this.airMarkerList.push(context.marker);
-                    context.marker.on('click', () => {
+                    // context.marker.on('click', () => {
-                        console.log('data', context);
+                    //     console.log('data', context);
-                    });
+                    // });
                 },
             }
         );
-        this.cluster.setMap(this.map);
+        // this.cluster.setMap(this.map);
     },
     clearAircraft() {
         if (this.cluster) {
-            this.map.remove(this.cluster);
+            this.cluster.setMap(null);
-            this.cluster = null;
+            // this.map.remove(this.cluster);
+            // this.cluster = null;
         }
     } /**
      * @desc 飞机范围
      * @param list
      */,
-    createAirRange(list) {
+    createAirRange(list: ResultType[]) {
         this.removeOverlayGroup();
         this.circleGroup = new AMap.OverlayGroup();
         for (let i = 0; i < list.length; i++) {
@@ -223,17 +240,18 @@ export const Map = {
             this.placeSearch = null;
         }
     },
-    createMarker(option, callbck: () => {}) {
+    createMarker(option: MarkerOption, callbck?: Callback) {
         this.clearMarker();
         let { lon, lat, zoom = 12 } = option;
         const icon = createIcon({ icon: alarmIcon, iconSize: [36, 42], imageSize: [36, 42] });
+        let str = option?.realName && option?.eventType_dictText ? `${option?.realName},${option?.eventType_dictText}` : `${option?.realName}`;
         this.marker = new AMap.Marker({
             position: [lon, lat],
             icon: icon,
             offset: new AMap.Pixel(0, 0), //设置偏移量
             label: {
                 content: `<div class="alarm-content" > 
-                                <div>${option?.realName},${option?.eventType_dictText}</div>
+                                <div>${str}</div>
                           </div>`,
                 offset: new AMap.Pixel(0, -9),
                 direction: 'top',

src/assets/mapUtils/mapFunTypes.ts

@@ -0,0 +1,27 @@
+export interface InitMap {
+    el: string;
+    option: any;
+}
+
+export type Callback = (result?: any) => void;
+
+export interface ResultType {
+    lon?: number;
+    lat?: number;
+    lng?: number;
+    type?: string;
+    name?: string;
+}
+
+export interface ExtDataType {
+    extOption?: object;
+    content?: string;
+}
+
+export interface MarkerOption {
+    lon?: number;
+    lat?: number;
+    zoom?: number;
+
+    [k: string]: any;
+}

src/assets/ts/antd.ts

@@ -1,6 +1,7 @@
 import type { App } from 'vue';
 import { Form, Input, Button, Radio, Modal, Table, Select, Cascader, Spin, ConfigProvider } from 'ant-design-vue';
+import dataV from '@iamzzg/data-view/dist/vue3/datav.map.vue.esm';
 
 export default function registerGlobComp(app: App) {
-    app.use(Button).use(Form).use(Input).use(Radio).use(Modal).use(Table).use(Select).use(Cascader).use(Spin).use(ConfigProvider);
+    app.use(dataV).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/bodyRightHooks.ts

@@ -134,7 +134,8 @@ export function ringOption(chartData, total) {
         series: [
             {
                 type: 'pie',
-                radius: ['50%', '80%'],
+                radius: ['50%', '74%'],
+                center: ['50%', '47%'],
                 avoidLabelOverlap: false,
                 label: {
                     show: true,

src/components/body-d-right/threeR.vue

@@ -2,10 +2,10 @@
     <div>
         <public-title title="基层医疗点远程会诊" />
         <div class="inner">
-            <div class="inner-item"></div>
+            <div class="inner-item" data-text="应急就医-服务中心"></div>
-            <div class="inner-item"></div>
+            <div class="inner-item" data-text="采油九厂-薛岔作业区"></div>
-            <div class="inner-item"></div>
+            <div class="inner-item" data-text="第九采油厂-五谷城作业区"></div>
-            <div class="inner-item"></div>
+            <div class="inner-item" data-text="采油十一厂-彭阳作业区"></div>
         </div>
     </div>
 </template>
@@ -21,25 +21,43 @@
         justify-content: space-around;
         align-content: space-around;
         padding-top: 2%;
+
         .inner-item {
             width: 48%;
             height: 46%;
+            position: relative;
         }
+
         .inner-item:nth-child(1) {
             background: url('../../assets/images/doctors1.png') no-repeat;
             background-size: 100% 100%;
         }
+
+        .inner-item:after {
+            position: absolute;
+            content: attr(data-text);
+            color: #fff;
+            bottom: 0px;
+            left: 0px;
+            width: 100%;
+            text-align: left;
+            padding-left: 10px;
+            background: linear-gradient(to top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1));
+        }
+
         .inner-item:nth-child(2) {
             background: url('../../assets/images/doctors2.png') no-repeat;
             background-size: 100% 100%;
         }
+
         .inner-item:nth-child(3) {
             background: url('../../assets/images/doctors3.png') no-repeat;
             background-size: 100% 100%;
         }
+
         .inner-item:nth-child(4) {
             background: url('../../assets/images/doctors4.png') no-repeat;
             background-size: 100% 100%;
         }
     }
-</style>
+</style>

src/components/chinaMap/chinaMap.vue

@@ -9,10 +9,10 @@
             <div v-show="currentIndex == list.length - 1" class="route-navigation">
                 <a-form :model="formState" layout="inline">
                     <a-form-item class="form-item-self" label="起点">
-                        <a-input v-model:value="formState.start"></a-input>
+                        <a-input v-model:value="formState.start" placeholder="请输入起点"></a-input>
                     </a-form-item>
                     <a-form-item class="form-item-self" label="终点">
-                        <a-input v-model:value="formState.end"></a-input>
+                        <a-input v-model:value="formState.end" placeholder="请输入终点"></a-input>
                     </a-form-item>
                     <a-form-item>
                         <a-button class="reset-btn" @click="removeInput">清空</a-button>
@@ -74,34 +74,28 @@
     }
 
     const formState = ref({
-        start: '西安北站',
+        start: '',
         end: '',
     });
     const list = ref(tabList);
     const currentIndex = ref(0);
 
     function changeTab(item, i: number) {
-        // if (i == currentIndex.value) {
-        //     return;
-        // }
-
         currentIndex.value = i; // 地方医院
+        Map.clearActiveHospital();
+        Map.map.off('moveend', logMapinfo);
         if (TabType.diFangYiYuan == item.type) {
             Map.clearActiveHospital();
             Map.map.on('moveend', logMapinfo);
+            // debugger;
             return;
-        } else {
-            Map.clearActiveHospital();
-            Map.map.off('moveend', logMapinfo);
         }
-
-        // 直升机
         if (TabType.zhiShengJi == item.type) {
             Map.createAircraft(aircraft);
             return;
+        } else {
+            getMapData(item.type, { type: item.type });
         }
-
-        getMapData(item.type, { type: item.type });
     }
 
     function logMapinfo() {
@@ -123,7 +117,17 @@
         try {
             const { code, result } = await mapApiSwitch(type, params);
             if (code == 200 && Array.isArray(result) && result.length > 0) {
-                Map.createOverlay(result);
+                Map.createOverlay(result, {
+                    content: (val) => {
+                        return `<div style="
+                                width: 21px;
+                                height: 44px;
+                                position: absolute;
+                                left: -20px;
+                                top: -20px;" title="${val?.name}">
+                            </div>`;
+                    },
+                });
             }
         } catch (e) {
             console.log('error------------------------------');

src/components/item-d/item-d.vue

@@ -1,76 +1,103 @@
 <template>
-  <div>
+    <div class="left-pie">
-    <public-title :title="props.title">
+        <public-title :title="props.title">
-      <template #right>
+            <template #right>
-        {{ props.tips }}
+                {{ props.tips }}
-      </template>
+            </template>
-    </public-title>
+        </public-title>
-    <div class="inner" ref="healthChart"></div>
+        <div class="inner" ref="healthChart"></div>
-  </div>
+        <div class="count" v-show="props.tips">
+            <div class="t">总人数</div>
+            <div class="v">{{ userCount }}</div>
+        </div>
+    </div>
 </template>
 <script setup lang="ts">
-import PublicTitle from '/@/components/publicTitle.vue';
+    import PublicTitle from '/@/components/publicTitle.vue';
-import {useSpin} from '/@/components/body-d-left/bodyLeftHooks.ts';
+    import { circleRing } from '/@/components/item-d/pieCharts.ts';
-import {useHealth} from '/@/components/body-d-right/bodyRightHooks.ts';
+    import { onMounted, ref, watch } from 'vue';
-import {screenPie} from '/@/components/item-d/pieCharts.ts';
+    import * as echarts from 'echarts';
-import {onMounted, ref, unref, watch, defineProps} from 'vue';
-import * as echarts from 'echarts';
 
-const props = defineProps({
+    const props = defineProps({
-  title: {
+        title: {
-    type: String,
+            type: String,
-    default: () => '',
+            default: () => '',
-  },
+        },
-  data: {
+        data: {
-    type: Array,
+            type: Array,
-    default: () => [],
+            default: () => [],
-  },
+        },
-  color: {
+        color: {
-    type: Array,
+            type: Array,
-    default: () => [],
+            default: () => [],
-  },
+        },
-  tips: {
+        tips: {
-    type: String,
+            type: String,
-    default: () => '',
+            default: () => '',
-  },
+        },
-});
+        userCount: {
-const healthChart = ref<HTMLElement>();
+            type: Number,
+        },
+    });
+    const healthChart = ref<HTMLElement>();
+    onMounted(() => {
+        init();
+    });
 
-const {setSpin, spinning} = useSpin();
+    watch(
+        () => props.data,
+        () => {
+            init();
+        }
+    );
 
-onMounted(() => {
+    async function init() {
-  init();
+        initChart(props.data, props.userCount, props.color);
-});
-
-watch(
-    () => props.data,
-    () => {
-      init();
     }
-);
 
-const {healthData, getValue, setHealth} = useHealth();
+    function initChart(chartData, total, color) {
-
+        let myChart = echarts.init(healthChart.value);
-async function init() {
+        let options = circleRing(chartData, total, color, '{d}%');
-  // setHealth(props.data);
+        myChart.setOption(options);
-  // const yData = unref(getValue);
+        window.addEventListener('resize', () => {
-  // let total = yData.reduce((accumulator, currentValue) => Number(accumulator) + Number(currentValue), 0);
+            myChart.resize();
-  initChart(props.data, 78, props.color);
+        });
-}
+    }
-
-function initChart(chartData, total, color) {
-  let myChart = echarts.init(healthChart.value);
-  let options = screenPie(chartData, total, color, '{d}%');
-  myChart.setOption(options);
-  window.addEventListener('resize', () => {
-    myChart.resize();
-  });
-}
 </script>
 <style scoped lang="less">
-.inner {
+    .inner {
-  width: 100%;
+        width: 100%;
-  margin: 0 auto;
+        margin: 0 auto;
-  height: calc(100% - 40px);
+        height: calc(100% - 40px);
-}
+    }
-</style>
+
+    .left-pie {
+        position: relative;
+        padding-bottom: 0 !important;
+    }
+
+    .count {
+        position: absolute;
+        width: 80%;
+        top: 51%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        color: #fff;
+        font-size: 22px;
+        font-weight: bold;
+        z-index: 1;
+        pointer-events: none;
+
+        > div {
+            width: 80px;
+            z-index: 0;
+        }
+
+        .t {
+            font-size: 14px;
+            font-weight: normal;
+        }
+    }
+</style>

src/components/item-d/pieCharts.ts

@@ -1,37 +1,56 @@
 export function screenPie(chartData, total, color, formatter) {
     return {
-        title: {
+        color: color,
-            text: '总人数',
+        tooltip: {
+            trigger: 'item',
+            show: true,
             textStyle: {
-                fontSize: 14,
+                color: '#fff',
-                color: '#ffffff',
-                fontWeight: 'normal',
-                align: 'center',
             },
-            subtext: total + '',
+            backgroundColor: 'rgba(50,50,50,0.7)',
-            x: '38%',
+            borderColor: '#1b7ef2',
-            y: '42%',
+        },
-            subtextStyle: {
+        legend: {
+            left: '74%',
+            top: 'center',
+            orient: 'vertical',
+            icon: 'circle',
+            itemGap: 8,
+            textStyle: {
                 color: '#ffffff',
-                fontSize: 24,
+                fontSize: 16,
-                fontWeight: 'bold',
             },
         },
-        // graphic: [
+        series: [
-        //     {
+            {
-        //         //环形图中间添加文字
+                type: 'pie',
-        //         type: 'text', //通过不同top值可以设置上下显示
+                // radius: ['50%', '86%'],
-        //         left: 'center',
+                // center: ['42%', '55%'],
-        //         top: 'center',
+                radius: ['50%', '76%'],
-        //         style: {
+                center: ['42%', '49%'],
-        //             text: 45465456,
+                avoidLabelOverlap: false,
-        //             textAlign: 'center',
+                label: {
-        //             fill: '#1E7CE8', //文字的颜色
+                    show: true,
-        //             fontSize: 20,
+                    position: 'outside',
-        //             lineHeight: 20,
+                    formatter: formatter,
-        //         },
+                    color: '#ffffff',
-        //     },
+                    fontSize: 14,
-        // ],
+                },
+                labelLine: {
+                    show: true,
+                    length: 6,
+                    length2: 20,
+                    minTurnAngle: 120,
+                },
+                data: chartData,
+            },
+        ],
+    };
+}
+
+//左侧圆
+export function circleRing(chartData, total, color, formatter) {
+    return {
         color: color,
         tooltip: {
             trigger: 'item',
@@ -56,7 +75,7 @@ export function screenPie(chartData, total, color, formatter) {
         series: [
             {
                 type: 'pie',
-                radius: ['50%', '86%'],
+                radius: ['50%', '82%'],
                 center: ['42%', '55%'],
                 avoidLabelOverlap: false,
                 label: {

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

@@ -1,11 +1,12 @@
 <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" />
+        <item-d :title="item.title" :data="item.data" :tips="item.tips" :color="item.color" :userCount="item.userCount" />
     </template>
 </template>
 
 <script setup lang="ts">
     import { onMounted, ref, watch } from 'vue';
+    import { cloneDeep } from 'lodash-es';
     import ItemD from '/@/components/item-d/item-d.vue';
     import { getWatchDataByOrgCode } from '/@/components/secondaryScreen/commonApi.ts';
 
@@ -13,43 +14,51 @@
         {
             title: '心率',
             data: [
-                { name: '正常', value: 234 },
+                { name: '正常', value: 0, key: 'normalCount' },
-                { name: '警戒', value: 204 },
+                { name: '警戒', value: 0, key: 'warnCount' },
-                { name: '危险', value: 34 },
+                { name: '危险', value: 0, key: 'riskCount' },
             ],
+            type: '1',
             color: ['#0098FA', '#FF6648', '#FB466C'],
             tips: '正常范围60~100次/分',
+            userCount: '',
         },
         {
             title: '血氧',
             data: [
-                { name: '正常', value: 234 },
+                { name: '正常', value: 0, key: 'normalCount' },
-                { name: '警戒', value: 204 },
+                { name: '警戒', value: 0, key: 'warnCount' },
-                { name: '危险', value: 34 },
+                { name: '危险', value: 0, key: 'riskCount' },
             ],
+            type: '2',
             color: ['#0098FA', '#FF6648', '#FB466C'],
             tips: '血氧饱和度范围95%~100%',
+            userCount: '',
         },
         {
             title: '压力',
             data: [
-                { name: '正常', value: 234 },
+                { name: '正常', value: 0, key: 'normalCount' },
-                { name: '放松', value: 204 },
+                { name: '放松', value: 0, key: 'unwindCount' },
-                { name: '中等', value: 34 },
+                { name: '中等', value: 0, key: 'warnCount' },
-                { name: '偏高', value: 78 },
+                { name: '偏高', value: 0, key: 'riskCount' },
             ],
+            type: '3',
             color: ['#1DCC79', '#0098FA', '#0CD9B5', '#6C63F0'],
             tips: '',
+            userCount: '',
         },
         {
             title: '体温',
             data: [
-                { name: '37.2', value: 234 },
+                { name: '37.2', value: 0, key: 'normalCountCount' },
-                { name: '37.2-38', value: 204 },
+                { name: '37.2-38', value: 0, key: 'warnCount' },
-                { name: '>38', value: 34 },
+                { name: '>38', value: 0, key: 'riskCount' },
             ],
+            type: '5',
             color: ['#0098FA', '#0CD9B5', '#3B72AD'],
             tips: '',
+            userCount: '',
         },
     ]);
 
@@ -63,8 +72,18 @@
     });
 
     async function init() {
-        const data = await getWatchDataByOrgCode(props);
+        const { code, result } = await getWatchDataByOrgCode(props);
-        console.log('data', data);
+        if (code == 200) {
+            let data = cloneDeep(dataList.value);
+            data.forEach((item) => {
+                let resData = result.find((v) => v.type == item.type);
+                item.userCount = resData.userCount;
+                item.data.forEach((val) => {
+                    val.value = resData[val.key];
+                });
+            });
+            dataList.value = data;
+        }
     }
 
     defineExpose({

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

@@ -1,5 +1,5 @@
 <template>
-    <div class="terminal-container">
+    <div class="terminal-container self">
         <public-title title="睡眠" />
         <div class="inner">
             <div class="title">
@@ -21,12 +21,16 @@
         type: String,
     });
     const sleepChart = ref<HTMLElement>();
-    onMounted(() => {
+    // onMounted(() => {
-        init();
+    //     init();
-    });
+    // });
-    watch(props, () => {
+    watch(
-        init();
+        props,
-    });
+        () => {
+            init();
+        },
+        { immediate: true }
+    );
     const nums = ref({
         avgShort: '',
         avgLong: '',
@@ -68,13 +72,19 @@
     }
 </script>
 <style scoped lang="less">
+    .terminal-container.self {
+        position: relative;
+        padding-bottom: 0 !important;
+    }
+
     .inner {
-        height: calc(100% - 40px);
+        height: calc(100% - 20px);
 
         .title {
             color: #cfcfcf;
             text-align: left;
-            padding: 1% 6%;
+            height: 30px;
+            line-height: 30px;
 
             .count {
                 font-size: 28px;
@@ -82,7 +92,7 @@
             }
 
             .lightSleep {
-                padding-left: 2%;
+                padding: 3px 0 3px 2%;
             }
         }
 

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

@@ -1,4 +1,4 @@
-import { computed, ref } from 'vue';
+import { ref } from 'vue';
 import dayjs from 'dayjs';
 import { minuteToStr } from '/@/utils/utils.ts';
 
@@ -6,7 +6,7 @@ function timeFormat(type, list) {
     const o = {
         week: 'MM-DD',
         month: 'MM-DD',
-        year: 'MM',
+        year: 'YYYY-MM',
     };
     if (list) {
         return list.map((item) => dayjs(item).format(o[type]));
@@ -24,28 +24,51 @@ export function formatStr({ list, len }) {
     return minuteToStr(sum);
 }
 
+function createWeek() {
+    let arr = [];
+    for (let i = 0; i < 7; i++) {}
+}
+
+const defaultVal = (type) => {
+    if (type == 'week') {
+        return {
+            defaultTime: [],
+        };
+    }
+    if (type == 'month') {
+    }
+    if (type == 'year') {
+    }
+};
+
 export function sleepCharts({ time, short, long, awake, type }) {
+    let middleIndex = Math.floor(time.length / 2);
     return {
         grid: {
             top: '15%',
-            left: '0%',
+            left: '5%',
-            right: '0%',
+            right: '5%',
-            bottom: '0%',
+            bottom: 30,
-            containLabel: true,
         },
         tooltip: {
             show: true,
             trigger: 'axis',
             textStyle: {
                 align: 'left', // 使用左对齐样式显示tooltip文本
+                color: '#fff',
             },
+            backgroundColor: 'rgba(50,50,50,0.7)',
+            borderColor: '#1b7ef2',
         },
         legend: {
             data: ['清醒', '浅睡', '深睡'],
             textStyle: {
                 color: '#ffffff',
             },
-            top: 0,
+            icon: 'roundRect',
+            height: 40,
+            itemHeight: 14,
+            top: -5,
             left: '55%',
         },
         color: ['#14B3F8', '#6D7BEB', '#5451DC'],
@@ -57,8 +80,13 @@ export function sleepCharts({ time, short, long, awake, type }) {
             axisLabel: {
                 color: '#ffffff',
                 formatter: (item, i) => {
-                    if (i == 0 || i == time.length - 1 || i == Math.floor(time.length / 2)) return item;
+                    let mid = time.length == 30 ? 16 : middleIndex;
+                    if (i == 0 || i == mid || i == time.length - 1) {
+                        return item;
+                    }
                 },
+                showMinLabel: true,
+                showMaxLabel: true,
             },
             data: timeFormat(type, time),
         },
@@ -99,34 +127,35 @@ export function sleepCharts({ time, short, long, awake, type }) {
 
 //步数
 export function useStep() {
+    const total = ref();
     const stepData = ref([
         {
             name: '5000以下',
-            value: '23',
+            value: '0',
             type: 'lessThanFiveThousand',
             type_dictText: '恶性肿瘤',
         },
         {
             name: '5000~1w',
-            value: '2',
+            value: '0',
             type: 'fiveThousandToTenThousand',
             type_dictText: '其他',
         },
         {
             name: '1~1.5w',
-            value: '34',
+            value: '0',
             type: 'TenThousandToFifteenThousand',
             type_dictText: '其他',
         },
         {
             name: '1.5w~2w',
-            value: '43',
+            value: '0',
             type: 'FifteenToTwentyThousand',
             type_dictText: '其他',
         },
         {
             name: '2以上',
-            value: '43',
+            value: '0',
             type: 'TwentyThousandOrMore',
             type_dictText: '其他',
         },
@@ -136,9 +165,11 @@ export function useStep() {
         stepData.value.map((item) => {
             item.value = data[item.type] || 0;
         });
+        total.value = data?.userCount;
     }
 
     return {
+        total,
         stepData,
         setStep,
     };

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

@@ -38,15 +38,18 @@
         total: 0,
         onChange: pageChange,
     });
+    const timer = ref(null);
+    const pages = ref(0); //总页数
 
     function handlePoliceDetail(record) {
         $bus.emit(earlyWarning, record);
     }
 
     onMounted(() => {
-        init();
+        init(1);
         setHeight();
         window.addEventListener('resize', setHeight);
+        interval();
     });
     onUnmounted(() => {
         window.removeEventListener('resize', setHeight);
@@ -56,20 +59,33 @@
         tableHeight.value = document.querySelector('.inner-screen').getBoundingClientRect().height - 60;
     }
 
-    async function init() {
+    async function init(page) {
         const { pageSize, current } = pagination.value;
-        const { code, result } = await getMonitorList({ pageSize, pageNo: current });
+        const { code, result } = await getMonitorList({ pageSize, pageNo: page });
         if (code == 200) {
-            dataSource.value = [...result.records, ...result.records.map((item, i) => ({ ...item, id: item.id + i }))];
+            dataSource.value = result.records;
-            pagination.value.total = result.total * 2;
+            pagination.value.total = result.total;
+            pages.value = result.pages;
+            pagination.value.current = page;
         }
     }
 
     function pageChange(page, pageS) {
         pagination.value.current = page;
         pagination.value.pageSize = pageS;
-        init();
+        init(page);
     }
+
+    function interval() {
+        timer.value = setInterval(() => {
+            let page = pagination.value.current < pages.value ? pagination.value.current + 1 : 1;
+            init(page);
+        }, 10000);
+    }
+
+    onUnmounted(() => {
+        clearInterval(timer.value);
+    });
 </script>
 <style lang="less" scoped>
     .inner-screen {
@@ -100,7 +116,6 @@
 
         :deep(.ant-table) {
             background-color: transparent;
-            //pointer-events: none;
         }
 
         :deep(.ant-table-tbody > tr > td) {

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

@@ -1,7 +1,11 @@
 <template>
-    <div>
+    <div class="pie-container self">
         <public-title title="步数" />
         <div class="inner" ref="healthChart"></div>
+        <div class="count">
+            <div class="t">总人数</div>
+            <div class="v">{{ total }}</div>
+        </div>
     </div>
 </template>
 <script setup lang="ts">
@@ -24,7 +28,7 @@
     onMounted(() => {
         init();
     });
-    const { stepData, getValue, setStep } = useStep();
+    const { stepData, total, setStep } = useStep();
 
     async function init() {
         try {
@@ -59,4 +63,34 @@
         margin: 0 auto;
         height: calc(100% - 40px);
     }
+
+    .pie-container.self {
+        position: relative;
+        padding-bottom: 0 !important;
+    }
+
+    .count {
+        position: absolute;
+        width: 80%;
+        top: 51%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        color: #fff;
+        font-size: 22px;
+        font-weight: bold;
+        z-index: 1;
+        pointer-events: none;
+
+        > div {
+            width: 80px;
+            z-index: 0;
+        }
+
+        .t {
+            font-size: 14px;
+            font-weight: normal;
+        }
+    }
 </style>

src/components/secondaryScreen/secondMap/components/footerDialog.vue

@@ -2,29 +2,39 @@
     <div class="modal-content">
         <div class="empty-png"></div>
         <div class="modal-header">
-            <button type="button" aria-label="Close" class="modal-close">X</button>
+            <button type="button" aria-label="Close" class="modal-close" @click="closeDialog">X</button>
             <div class="modal-title" id="vcDialogTitle0">健康报警员工信息</div>
         </div>
         <div class="modal-body">
             <div class="info-left">
-                <div><span class="info-label">员工姓名：</span><span class="info-value">213</span></div>
+                <div v-for="item in detailLeft" :key="item.key"
-                <div><span class="info-label">员工姓名：</span><span class="info-value">213</span></div>
+                    ><span class="info-label">{{ item.name }}：</span><span class="info-value">{{ item.value }}</span></div
-                <div><span class="info-label">员工姓名：</span><span class="info-value">213</span></div>
+                >
             </div>
             <div class="info-right">
-                <div><span class="info-label">员工姓名：</span><span class="info-value">213</span></div>
+                <div v-for="item in detailRight" :key="item.key"
-                <div><span class="info-label">员工姓名：</span><span class="info-value">213</span></div>
+                    ><span class="info-label">{{ item.name }}：</span><span class="info-value">{{ item.value }}</span></div
-                <div><span class="info-label">员工姓名：</span><span class="info-value">213</span></div>
+                >
             </div>
         </div>
     </div>
 </template>
-<script setup lang="ts"></script>
+<script setup lang="ts">
+    const emits = defineEmits(['closeDialog']);
+
+    const props = defineProps({
+        detailRight: Array,
+        detailLeft: Array,
+    });
+
+    function closeDialog() {
+        emits('closeDialog');
+    }
+</script>
 
 <style scoped lang="less">
     .modal-content {
         position: relative;
-        //background-clip: padding-box;
         border: 0;
         border-radius: 2px;
 
@@ -36,9 +46,10 @@
         }
 
         .modal-close {
+            width: 40px;
+            height: 40px;
             position: absolute;
-            top: 10px;
+            right: 0;
-            right: 6px;
             z-index: 10;
             padding: 0;
             color: #999999;
@@ -58,7 +69,6 @@
 
             .modal-title {
                 margin: 0;
-                color: rgba(0, 0, 0, 0.85);
                 font-weight: 500;
                 font-size: 16px;
                 line-height: 22px;
@@ -83,6 +93,7 @@
             color: #ffffff;
             background-color: #00152b;
             border: 1px solid #129bff;
+            border-top: none;
             padding: 2% 0 2% 5%;
             display: flex;
 

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

@@ -18,10 +18,13 @@
 <script setup lang="ts">
     import Dialog from '/@/components/dialog/Dialog.vue';
     import { ref } from 'vue';
+    import { columns } from '/@/components/secondaryScreen/secondMap/secondMapHooks.ts';
+    import { getUserListByDeptId } from '/@/components/secondaryScreen/secondMap/secondMapApi.ts';
     //分页相关
     const current = ref(1);
     const pageSize = ref(10);
     const total = ref(0);
+    const deptId = ref();
     const paginationProp = ref({
         showSizeChanger: true,
         pageSizeOptions: ['10', '30', '50'],
@@ -35,150 +38,32 @@
     function pageChange(page, pageS) {
         current.value = page;
         pageSize.value = pageS;
+        getRecords(deptId.value);
     }
 
-    const dataSource = ref([
+    const dataSource = ref([]);
-        {
-            key: '1',
-            name: '胡彦斌1',
-            age: 32,
-            address: '西湖区湖底公园1号',
-        },
-        {
-            key: '2',
-            name: '胡彦祖2',
-            age: 42,
-            address: '西湖区湖底公园1号',
-        },
-        {
-            key: '3',
-            name: '胡彦祖3',
-            age: 42,
-            address: '西湖区湖底公园1号',
-        },
-        {
-            key: '4',
-            name: '胡彦祖4',
-            age: 42,
-            address: '西湖区湖底公园1号',
-        },
-        {
-            key: '5',
-            name: '胡彦祖5',
-            age: 42,
-            address: '西湖区湖底公园1号',
-        },
-        {
-            key: '6',
-            name: '胡彦祖6',
-            age: 42,
-            address: '西湖区湖底公园1号',
-        },
-        {
-            key: '7',
-            name: '胡彦祖7',
-            age: 42,
-            address: '西湖区湖底公园1号',
-        },
-        {
-            key: '8',
-            name: '胡彦祖8',
-            age: 42,
-            address: '西湖区湖底公园1号',
-        },
-        {
-            key: '9',
-            name: '胡彦祖9',
-            age: 42,
-            address: '西湖区湖底公园1号',
-        },
-        {
-            key: '10',
-            name: '胡彦祖10',
-            age: 42,
-            address: '西湖区湖底公园1号',
-        },
-    ]);
-
-    const columns = ref([
-        {
-            title: '员工名称',
-            dataIndex: 'name',
-            align: 'center',
-            key: 'name',
-        },
-        {
-            title: '单位名称',
-            dataIndex: 'age',
-            align: 'center',
-            key: 'age',
-        },
-        {
-            title: '部门名称',
-            dataIndex: 'address',
-            align: 'center',
-            key: 'address',
-        },
-        {
-            title: '工具编码',
-            dataIndex: 'address1',
-            align: 'center',
-            key: 'address1',
-        },
-        {
-            title: '心率（次/分）',
-            dataIndex: 'address2',
-            align: 'center',
-            key: 'address2',
-        },
-        {
-            title: '血氧（%）',
-            dataIndex: 'address2',
-            align: 'center',
-            key: 'address2',
-        },
-        {
-            title: '压力',
-            dataIndex: 'address2',
-            align: 'center',
-            key: 'address2',
-        },
-        {
-            title: '睡眠',
-            dataIndex: 'address2',
-            align: 'center',
-            key: 'address2',
-        },
-        {
-            title: '体温（℃）',
-            dataIndex: 'address2',
-            align: 'center',
-            key: 'address2',
-        },
-        {
-            title: '锻炼（千卡）',
-            dataIndex: 'address2',
-            align: 'center',
-            key: 'address2',
-        },
-        {
-            title: '步数（米）',
-            dataIndex: 'address2',
-            align: 'center',
-            key: 'address2',
-        },
-    ]);
     const visible = ref(false);
 
-    function openModal() {
+    function openModal(id: string) {
-        console.log('1');
         visible.value = true;
+        deptId.value = id;
+        getRecords(id);
     }
 
     function closeModal() {
         visible.value = false;
     }
 
+    async function getRecords(id: string) {
+        if (!id) {
+            return;
+        }
+        const { code, result } = await getUserListByDeptId({ orgId: id, pageSize: pageSize.value, pageNo: current.value });
+        if (code == 200) {
+            dataSource.value = result?.records;
+        }
+    }
+
     defineExpose({
         openModal,
         closeModal,
@@ -211,7 +96,7 @@
 
     :deep(.ant-table-tbody > tr > td) {
         border-bottom: none;
-        padding: 0px 4px;
+        padding: 0 4px;
     }
 
     :deep(.ant-table-row:hover) {

src/components/secondaryScreen/secondMap/secondMap.vue

@@ -2,7 +2,6 @@
     <div class="center-map">
         <div class="china-map-box">
             <div class="form-container">
-                <button @click="test">点击</button>
                 <slot name="rightForm"></slot>
             </div>
             <div style="flex: 1; overflow: hidden; margin: 0 0 10px; height: 100%">
@@ -24,62 +23,32 @@
             </div>
             <div
                 class="footer-dialog-con"
-                style="--moveUp: 110px; --moveDown: -50px"
+                style="--moveUp: 120px; --moveDown: -120px"
-                :class="show ? 'slide-top' : 'slide-bottom'"
+                :class="isShowAlarm ? 'slide-top' : 'slide-bottom'"
                 v-show="isShowAlarm"
             >
-                <FooterDialog></FooterDialog>
+                <FooterDialog :detailLeft="detailLeft" :detailRight="detailRight" @closeDialog="closeDialog"></FooterDialog>
             </div>
         </div>
         <WatchListDialog ref="watchDialogRef"></WatchListDialog>
     </div>
 </template>
 <script lang="ts" setup>
-    import { onMounted, ref, watch } from 'vue';
+    import { onMounted, ref } from '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 { useAlarmDetail, useFooterTable, useMoveClass } from '/@/components/secondaryScreen/secondMap/secondMapHooks.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);
-
-    function test() {
-        show.value = !show.value;
-    }
-
     const props = defineProps({
         orgCode: String,
         type: String,
     });
-
+    const mapList = ref([]); //地图数据
-    const markerList = [
-        {
-            lon: 109.42,
-            lat: 33.9,
-            type: '6',
-            name: '第一采油厂',
-            count: 20,
-        },
-        {
-            lon: 106.59,
-            lat: 34.93,
-            type: '6',
-            name: '第二采油厂',
-            count: 40,
-        },
-        {
-            lon: 109.42,
-            lat: 31.9,
-            type: '6',
-            name: '第三采油厂',
-            count: 60,
-        },
-    ];
-
     // 底部表格
     const { isShow, className, setIsShow } = useMoveClass();
 
@@ -91,18 +60,13 @@
     const watchDialogRef = ref();
 
     function openWatchList(item) {
+        console.log('item', item);
         if (item.key == 'allotDeviceNum') {
-            watchDialogRef.value.openModal();
+            watchDialogRef.value.openModal(item.extData?.deptId);
         }
     }
 
     const { footerList, setFooterList, setIsShowAlarm, isShowAlarm } = useFooterTable();
-    watch(
-        () => props.orgCode,
-        () => {
-            setIsShow(false);
-        }
-    );
 
     async function getFooterTable(orgCode) {
         const params = {
@@ -111,51 +75,57 @@
         };
         const { code, result } = await footerApi(params);
         if (code == 200) {
-            setFooterList(result.records[0]);
+            setFooterList(result);
         }
     }
 
-    const mapList = ref([]);
-
     async function getMapList() {
-        const { code, result } = await mapListApi();
+        try {
-        if (code == 200 && result.length > 0) {
+            const { code, result } = await mapListApi({});
-            const newArr = result.map((item) => ({ ...item, type: '6' }));
+            if (code == 200 && result.length > 0) {
-            mapList.value = newArr;
+                const newArr = result.map((item) => ({ ...item, type: '6' }));
-            Map.createOverlay(
+                mapList.value = newArr;
-                newArr,
+                Map.createOverlay(
-                {
+                    newArr,
-                    content: function (val) {
+                    {
-                        return `<div style="color: red;
+                        content: (val) => {
+                            return `<div style="
                                 width: 21px;
                                 height: 44px;
                                 position: absolute;
                                 left: -20px;
-                                top: -20px;" title="${val.departName}">
+                                top: -20px;" title="${val?.departName}">
                             </div>`;
+                        },
                     },
-                },
+                    (val) => {
-                (val) => {
+                        getFooterTable(val.orgCode);
-                    console.log('val', val);
+                        setIsShow(true);
-                    getFooterTable(val.orgCode);
+                    }
-                    setIsShow(true);
+                );
-                }
+            }
-            );
+        } catch {}
-        }
     }
 
+    const { detailLeft, detailRight, setDetail } = useAlarmDetail();
     onMounted(() => {
         init();
-
+        //点击预警定位
         $bus.on(earlyWarning, (params) => {
-            console.log('params', params);
+            setDetail(params);
             drawMarker(params);
-            isShow.value ? setIsShow(true) : setIsShow(false);
+            setIsShowAlarm(true);
-            isShowAlarm.value ? setIsShowAlarm(true) : setIsShowAlarm(false);
         });
     });
 
-    function drawMarker(data) {
+    /**
+     *@desc 预警弹窗关闭
+     */
+    function closeDialog() {
+        setIsShowAlarm(!isShowAlarm.value);
+    }
+
+    function drawMarker(data: any) {
         const { lon, lat } = data;
         if (!lon || !lat) return;
         Map.createMarker(data);

src/components/secondaryScreen/secondMap/secondMapApi.ts

@@ -1,9 +1,15 @@
 import { get } from '/@/api/request.ts';
 
 export enum Api {
-    footerStatistic = '/health-watch/watch/deptStatisticData/list',
+    footerStatistic = '/health-watch/watch/deptStatisticData/listByorgCode',
     mapListApi = '/health-watch/watch/watchDevice/getMapList',
+    getUserListByDeptId = '/health-watch/watch/watchDevice/getUserListByDeptId',
 }
 
+/**
+ * 底部单行表格
+ * @param params
+ */
 export const footerApi = (params) => get(Api.footerStatistic, params);
 export const mapListApi = (params) => get(Api.mapListApi, params);
+export const getUserListByDeptId = (params) => get(Api.getUserListByDeptId, params);

src/components/secondaryScreen/secondMap/secondMapHooks.ts

@@ -1,40 +1,26 @@
-// export const tabList = [
+import { cloneDeep } from 'lodash-es';
-//     {
+import { onMounted, ref } from 'vue';
-//         name: '所有资源',
+import { allSecondaryDeparts } from '/@/components/secondaryScreen/commonApi';
-//         type: TabType.all,
-//     },
-//     {
-//         name: '油田医院',
-//         type: TabType.youTianYiYuan,
-//     },
-//     {
-//         name: '医疗点',
-//         type: TabType.yiLiaoDian,
-//     },
-// ];
-import {cloneDeep} from 'lodash-es';
-import {nextTick, onMounted, ref} from "vue";
-import {allSecondaryDeparts} from "/@/components/secondaryScreen/commonApi";
 
 export const watchIcon = new URL('/@/assets/img/watch.png', import.meta.url).href;
 
 export function useDepart() {
     const orgCode = ref();
     const option = ref([]);
-    const fieldNames = {label: 'departName', value: 'orgCode',}
+    const fieldNames = { label: 'departName', value: 'orgCode' };
     onMounted(() => {
         getOptionData();
     });
 
     function setOption(data) {
         option.value = data;
-        orgCode.value = data[0]?.orgCode
+        orgCode.value = data[0]?.orgCode;
     }
 
     async function getOptionData() {
-        const {result, code} = await allSecondaryDeparts();
+        const { result, code } = await allSecondaryDeparts();
         if (code == 200) {
-            setOption(result)
+            setOption(result);
         }
     }
 
@@ -42,112 +28,177 @@ export function useDepart() {
         orgCode,
         option,
         setOption,
-        fieldNames
+        fieldNames,
     };
 }
 
 export function useTimeType(t) {
-    const type = ref(t || '')
+    const type = ref(t || '');
     const timeRangeOption = [
         {
             label: '近一周',
-            value: 'week'
+            value: 'week',
         },
         {
             label: '近一月',
-            value: 'month'
+            value: 'month',
         },
         {
             label: '近一年',
-            value: 'year'
+            value: 'year',
-        }
+        },
-    ]
+    ];
     return {
         type,
-        timeRangeOption
+        timeRangeOption,
-    }
+    };
 }
 
 export function useFooterTable() {
-    const isShowAlarm = ref(false)
+    const isShowAlarm = ref(false);
 
     function setIsShowAlarm(type: boolean) {
-        isShowAlarm.value = type
+        isShowAlarm.value = type;
     }
 
     const footerList = ref([
         {
             name: '单位名称',
             value: '',
-            key: 'orgName'
+            key: 'orgName',
+            extData: {},
         },
         {
             name: '单位人数',
             value: '',
-            key: 'userCount'
+            key: 'userCount',
+            extData: {},
         },
         {
             name: '入库设备数量',
             value: '',
-            key: 'deviceNum'
+            key: 'deviceNum',
+            extData: {},
         },
         {
             name: '佩戴手表人数',
             value: '',
             key: 'allotDeviceNum',
+            extData: {},
         },
         {
             name: '近一周活跃人数',
             value: '',
-            key: 'sevenDayNum'
+            key: 'sevenDayNum',
+            extData: {},
         },
         {
             name: '近一月活跃人数',
             value: '',
-            key: 'a'
+            key: 'thirtyDayNum',
+            extData: {},
         },
         {
             name: '近一年活跃人数',
             value: '',
-            key: 'b'
+            key: 'yearDayNum',
-        }
+            extData: {},
-    ])
+        },
+    ]);
 
     function setFooterList(res: any) {
-
+        const arrList = cloneDeep(footerList.value);
-        const arrList = cloneDeep(footerList.value)
         if (res) {
-            arrList.forEach(item => {
+            console.log('resssss', res);
-                item.value = res[item.key] || ''
+            arrList.forEach((item) => {
-            })
+                item.value = res[item.key];
+                item.extData = res;
+            });
         }
-        footerList.value = arrList
+        footerList.value = arrList;
-
     }
 
     return {
         footerList,
         setFooterList,
         setIsShowAlarm,
-        isShowAlarm
+        isShowAlarm,
+    };
+}
+
+export function useAlarmDetail() {
+    const detailLeft = ref([
+        {
+            name: '员工姓名',
+            value: '',
+            key: 'realName',
+        },
+        {
+            name: '工具编码',
+            value: '',
+            key: 'watchNo',
+        },
+        {
+            name: '单位名称',
+            value: '',
+            key: 'orgName2',
+        },
+    ]);
+    const detailRight = ref([
+        {
+            name: '部门名称',
+            value: '',
+            key: 'orgName',
+        },
+        {
+            name: '事件类型',
+            value: '',
+            key: 'eventType_dictText',
+        },
+        {
+            name: '异常数据',
+            value: '',
+            key: 'dataValue',
+        },
+        {
+            name: '报警时间',
+            value: '',
+            key: 'warnTime',
+        },
+    ]);
+
+    function setDetail(res) {
+        if (res) {
+            detailLeft.value.forEach((item) => {
+                item.value = res[item.key];
+            });
+            detailRight.value.forEach((item) => {
+                item.value = res[item.key];
+            });
+        }
     }
+
+    return {
+        detailLeft,
+        detailRight,
+        setDetail,
+    };
 }
 
 export function useMoveClass() {
-    const isShow = ref(false)
+    const isShow = ref(false);
-    const className = ref('slide-bottom')
+    const className = ref('slide-bottom');
 
     function setIsShow(type: boolean) {
-        isShow.value = type
+        isShow.value = type;
-        className.value = type ? 'slide-top' : 'slide-bottom'
+        className.value = type ? 'slide-top' : 'slide-bottom';
     }
 
     return {
         isShow,
         className,
-        setIsShow
+        setIsShow,
-    }
+    };
-
 }
 
 export function useTree() {
@@ -172,10 +223,79 @@ export function useTree() {
                 },
             ],
         },
-    ]
+    ];
-    const orgCode = ref([])
+    const orgCode = ref([]);
     return {
         orgCode,
-        treeOption
+        treeOption,
-    }
+    };
-}
+}
+
+export const columns = [
+    {
+        title: '员工名称',
+        dataIndex: 'realName',
+        align: 'center',
+        key: 'realName',
+    },
+    {
+        title: '单位名称',
+        dataIndex: 'orgName',
+        align: 'center',
+        key: 'orgName',
+    },
+    {
+        title: '部门名称',
+        dataIndex: 'orgName1',
+        align: 'center',
+        key: 'orgName1',
+    },
+    {
+        title: '工具编码',
+        dataIndex: 'watchNo',
+        align: 'center',
+        key: 'watchNo',
+    },
+    {
+        title: '心率（次/分）',
+        dataIndex: 'heartRate',
+        align: 'center',
+        key: 'heartRate',
+    },
+    {
+        title: '血氧（%）',
+        dataIndex: 'spo2',
+        align: 'center',
+        key: 'spo2',
+    },
+    {
+        title: '压力',
+        dataIndex: 'stress',
+        align: 'center',
+        key: 'stress',
+    },
+    {
+        title: '睡眠',
+        dataIndex: 'sleep',
+        align: 'center',
+        key: 'sleep',
+    },
+    {
+        title: '体温（℃）',
+        dataIndex: 'temp',
+        align: 'center',
+        key: 'temp',
+    },
+    {
+        title: '锻炼（千卡）',
+        dataIndex: 'exercise',
+        align: 'center',
+        key: 'exercise',
+    },
+    {
+        title: '步数（米）',
+        dataIndex: 'workout',
+        align: 'center',
+        key: 'workout',
+    },
+];

src/utils/env.ts

@@ -1,7 +1,9 @@
 export function getAppEnvConfig() {
     const ENV = import.meta.env;
-    const { VITE_GLOB_API_URL } = ENV;
+    const { VITE_GLOB_API_URL, VITE_GLOB_API_YIN_JI, VITE_GLOB_API_JIAN_CE } = ENV;
     return {
         VITE_GLOB_API_URL,
+        VITE_GLOB_API_YIN_JI,
+        VITE_GLOB_API_JIAN_CE,
     };
 }

src/utils/socket.ts

@@ -1,10 +1,13 @@
 import { onMounted, onUnmounted, ref } from 'vue';
+import { getAppEnvConfig } from '/@/utils/env.ts';
+
+const { VITE_GLOB_API_YIN_JI, VITE_GLOB_API_JIAN_CE } = getAppEnvConfig();
 //健康监测工具报警
-export const basicPath = 'ws://192.168.1.16:7098/websocket/watchMonitor';
+export const basicPath = VITE_GLOB_API_YIN_JI;
 //应急求助
-export const emergencyPath = 'ws://192.168.1.16:7011/websocket/emergency';
+export const emergencyPath = VITE_GLOB_API_JIAN_CE;
 const token =
-    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6ImFkbWluIiwiaWRlbnRpZmllciI6ImU5Y2EyM2Q2OGQ4ODRkNGViYjE5ZDA3ODg5NzI3ZGFlIiwiZXhwIjoxNzAyNjA0MDI3fQ.MYf9yUnXO0RTFL4u96pN1Z2mBwtXU5W-QlxDgoAsoOw';
+    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6ImFkbWluIiwiaWRlbnRpZmllciI6ImU5Y2EyM2Q2OGQ4ODRkNGViYjE5ZDA3ODg5NzI3ZGFlIiwiZXhwIjoxNzAzMjExNzQ1fQ.dadvKgAgzfK6DUd8xtrgadxPbPXUsayNNSrt3mNxKC8';
 
 export function useSocket(path = basicPath) {
     const socket = ref();

src/views/indexSon.vue

@@ -25,6 +25,7 @@
                             class="type-select"
                             :options="option"
                             :field-names="fieldNames"
+                            @change="orgChange"
                         ></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>
@@ -72,11 +73,13 @@
         router.go(-1);
     }
 
-    const { orgCode: treeValue, treeOption } = useTree();
-    watch(treeValue, (n) => {
-        console.log('n', n);
-    });
     const { orgCode, option, fieldNames } = useDepart({});
+
+    function orgChange(val, option) {
+        console.log('val', val);
+        console.log('option', option);
+    }
+
     const { type, timeRangeOption } = useTimeType('week');
 </script>
 <style lang="less" scoped>