update: 初始化

update
1.青海大屏
2025-06-30 11:09:27 +08:00 · 2025-06-19 16:15:43 +08:00 · 2025-05-23 14:16:01 +08:00 · 2025-05-08 09:46:48 +08:00 · 2025-04-27 15:24:55 +08:00 · 2025-04-27 09:37:20 +08:00
37 changed files with 5155 additions and 60 deletions
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="zh">
 <head>
    <meta charset="UTF-8"/>
    <link rel="icon" type="image/svg+xml" href="/screen.svg"/>
@@ -19,6 +19,8 @@
    "autoprefixer": "^10.4.16",
    "axios": "^1.6.2",
    "dayjs": "^1.11.10",
+    "echarts": "5.4.3",
+    "echarts-gl": "^2.0.9",
    "jsencrypt": "^3.3.2",
    "lodash-es": "^4.17.21",
    "mitt": "^3.0.1",
@@ -42,7 +44,6 @@
    "@vitejs/plugin-vue": "^4.2.3",
    "@vitejs/plugin-vue-jsx": "^4.0.1",
    "ant-design-vue": "^3.2.20",
-    "echarts": "^5.4.3",
    "eslint": "^8.51.0",
    "eslint-config-prettier": "^8.10.0",
    "eslint-define-config": "^1.24.1",
@@ -1,4 +1,5 @@
 <template>
+    <template v-if="props.title">
        <a-modal
            :class="['dialog', themeType]"
            v-model:visible="props.openVis"
@@ -8,10 +9,30 @@
            @cancel="handleCancel"
            destroy-on-close
        >
+            <template #title>
+                <slot name="modalTitle"></slot>
+            </template>
            <slot name="container"></slot>
            <template #footer></template>
        </a-modal>
    </template>
+    <template v-else>
+        <a-modal
+            :class="['dialog', themeType]"
+            v-model:visible="props.openVis"
+            :width="props.width"
+            :maskClosable="true"
+            @cancel="handleCancel"
+            destroy-on-close
+        >
+            <template #title>
+                <slot name="modalTitle"></slot>
+            </template>
+            <slot name="container"></slot>
+            <template #footer></template>
+        </a-modal>
+    </template>
+</template>

 <script setup lang="ts">
    import { useTheme } from '/@/hooks/theme/useTheme.ts';
@@ -26,6 +47,7 @@
        },
        title: {
            type: String,
+            default: () => '',
        },
    });
    const { themeType } = useTheme();
@@ -95,14 +95,12 @@

    watch(
        props,
-        (v, o) => {
-            if (JSON.stringify(v) !== JSON.stringify(o)) {
+        () => {
            nextTick(() => {
                pageSize.value = 10;
                current.value = 1;
                getRecords();
            });
-            }
        },
        {
            immediate: true,
@@ -6,8 +6,10 @@ export enum PageEnum {
    BASE_LOGIN_YINCHUAN = '/screenLogin',
    // centralScreenLogin
    CENTRAL_SCREEN_LOGIN = '/centralScreenLogin',
+    Q_SCREEN_LOGIN = '/qLogin',
    YINCHUAN_HOME = '/yinChuanHome',
    CENTRAL_SCREEN = '/centralScreen',
+    Q_SCREEN = '/qScreen',
 }

 export function setBaseLogin(baseLogin) {
@@ -99,6 +99,24 @@ const routes: Array<RouteRecordRaw> = [
        },
        component: () => import('/@/views/centralScreen/centralScreenD.vue'),
    },
+    {
+        path: '/qLogin',
+        name: 'qLogin',
+        meta: {
+            //青海大屏登录
+            title: '登录',
+        },
+        component: () => import('/@/views/sys/login.vue'),
+    },
+    {
+        path: '/qScreen',
+        name: 'qScreen',
+        meta: {
+            //青海大屏登录
+            title: '数据看板',
+        },
+        component: () => import('/src/views/qh/qScreen.vue'),
+    },
 ];

 const router: Router = createRouter({
@@ -0,0 +1,115 @@
+import proj4 from 'proj4';
+//北京54--3度带--zone
+proj4.defs("EPSG:2401", "+proj=tmerc +lat_0=0 +lon_0=75 +k=1 +x_0=25500000 +y_0=0 +ellps=krass +units=m +no_defs ");  //北京1954-3度分带-高斯克吕格投影-zone-25----73.5°E to 76.5°E
+proj4.defs("EPSG:2402", "+proj=tmerc +lat_0=0 +lon_0=78 +k=1 +x_0=26500000 +y_0=0 +ellps=krass +units=m +no_defs ");  //北京1954-3度分带-高斯克吕格投影-zone-26----76.5°E to 79.5°E
+proj4.defs("EPSG:2403", "+proj=tmerc +lat_0=0 +lon_0=81 +k=1 +x_0=27500000 +y_0=0 +ellps=krass +units=m +no_defs ");  //北京1954-3度分带-高斯克吕格投影-zone-27----79.5°E to 82.5°E
+proj4.defs("EPSG:2404", "+proj=tmerc +lat_0=0 +lon_0=84 +k=1 +x_0=28500000 +y_0=0 +ellps=krass +units=m +no_defs ");  //北京1954-3度分带-高斯克吕格投影-zone-28----82.5°E to 85.5°E
+proj4.defs("EPSG:2405", "+proj=tmerc +lat_0=0 +lon_0=87 +k=1 +x_0=29500000 +y_0=0 +ellps=krass +units=m +no_defs ");  //北京1954-3度分带-高斯克吕格投影-zone-29----85.5°E to 88.5°E
+proj4.defs("EPSG:2406", "+proj=tmerc +lat_0=0 +lon_0=90 +k=1 +x_0=30500000 +y_0=0 +ellps=krass +units=m +no_defs ");  //北京1954-3度分带-高斯克吕格投影-zone-30----88.5°E to 91.5°E
+proj4.defs("EPSG:2407", "+proj=tmerc +lat_0=0 +lon_0=93 +k=1 +x_0=31500000 +y_0=0 +ellps=krass +units=m +no_defs ");  //北京1954-3度分带-高斯克吕格投影-zone-31----91.5°E to 94.5°E
+proj4.defs("EPSG:2408", "+proj=tmerc +lat_0=0 +lon_0=96 +k=1 +x_0=32500000 +y_0=0 +ellps=krass +units=m +no_defs ");  //北京1954-3度分带-高斯克吕格投影-zone-32----94.5°E to 97.5°E
+proj4.defs("EPSG:2409", "+proj=tmerc +lat_0=0 +lon_0=99 +k=1 +x_0=33500000 +y_0=0 +ellps=krass +units=m +no_defs ");  //北京1954-3度分带-高斯克吕格投影-zone-33----97.5°E to 100.5°E
+proj4.defs("EPSG:2410", "+proj=tmerc +lat_0=0 +lon_0=102 +k=1 +x_0=34500000 +y_0=0 +ellps=krass +units=m +no_defs ");  //北京1954-3度分带-高斯克吕格投影-zone-34----100.5°E to 103.5°E
+proj4.defs("EPSG:2411", "+proj=tmerc +lat_0=0 +lon_0=105 +k=1 +x_0=35500000 +y_0=0 +ellps=krass +units=m +no_defs ");  //北京1954-3度分带-高斯克吕格投影-zone-35----103.5°E to 106.5°E
+proj4.defs("EPSG:2412", "+proj=tmerc +lat_0=0 +lon_0=108 +k=1 +x_0=36500000 +y_0=0 +ellps=krass +units=m +no_defs ");  //北京1954-3度分带-高斯克吕格投影-zone-36----106.5°E to 109.5°E
+proj4.defs("EPSG:2413", "+proj=tmerc +lat_0=0 +lon_0=111 +k=1 +x_0=37500000 +y_0=0 +ellps=krass +units=m +no_defs ");  //北京1954-3度分带-高斯克吕格投影-zone-37----109.5°E to 112.5°E
+proj4.defs("EPSG:2414", "+proj=tmerc +lat_0=0 +lon_0=114 +k=1 +x_0=38500000 +y_0=0 +ellps=krass +units=m +no_defs ");  //北京1954-3度分带-高斯克吕格投影-zone-38----112.5°E to 115.5°E
+proj4.defs("EPSG:2415", "+proj=tmerc +lat_0=0 +lon_0=117 +k=1 +x_0=39500000 +y_0=0 +ellps=krass +units=m +no_defs ");  //北京1954-3度分带-高斯克吕格投影-zone-39----115.5°E to 118.5°E
+proj4.defs("EPSG:2416", "+proj=tmerc +lat_0=0 +lon_0=120 +k=1 +x_0=40500000 +y_0=0 +ellps=krass +units=m +no_defs ");  //北京1954-3度分带-高斯克吕格投影-zone-40----118.5°E to 121.5°E
+proj4.defs("EPSG:2417", "+proj=tmerc +lat_0=0 +lon_0=123 +k=1 +x_0=41500000 +y_0=0 +ellps=krass +units=m +no_defs ");  //北京1954-3度分带-高斯克吕格投影-zone-41----121.5°E to 124.5°E
+proj4.defs("EPSG:2418", "+proj=tmerc +lat_0=0 +lon_0=126 +k=1 +x_0=42500000 +y_0=0 +ellps=krass +units=m +no_defs ");  //北京1954-3度分带-高斯克吕格投影-zone-42----124.5°E to 127.5°E
+proj4.defs("EPSG:2419", "+proj=tmerc +lat_0=0 +lon_0=129 +k=1 +x_0=43500000 +y_0=0 +ellps=krass +units=m +no_defs ");  //北京1954-3度分带-高斯克吕格投影-zone-43----127.5°E to 130.5°E
+proj4.defs("EPSG:2420", "+proj=tmerc +lat_0=0 +lon_0=132 +k=1 +x_0=44500000 +y_0=0 +ellps=krass +units=m +no_defs ");  //北京1954-3度分带-高斯克吕格投影-zone-44----130.5°E to 133.5°E
+proj4.defs("EPSG:2421", "+proj=tmerc +lat_0=0 +lon_0=135 +k=1 +x_0=45500000 +y_0=0 +ellps=krass +units=m +no_defs ");  //北京1954-3度分带-高斯克吕格投影-zone-45----133.5°E to 136.5°E
+//北京54--3度带--CM
+proj4.defs("EPSG:2422", "+proj=tmerc +lat_0=0 +lon_0=75 +k=1 +x_0=500000 +y_0=0 +ellps=krass +units=m +no_defs ");  //北京1954-3度分带-高斯克吕格投影-CM-75E----73.5°E to 76.5°E
+proj4.defs("EPSG:2423", "+proj=tmerc +lat_0=0 +lon_0=78 +k=1 +x_0=500000 +y_0=0 +ellps=krass +units=m +no_defs ");  //北京1954-3度分带-高斯克吕格投影-CM-78E----76.5°E to 79.5°E
+proj4.defs("EPSG:2424", "+proj=tmerc +lat_0=0 +lon_0=81 +k=1 +x_0=500000 +y_0=0 +ellps=krass +units=m +no_defs ");  //北京1954-3度分带-高斯克吕格投影-CM-81E----79.5°E to 82.5°E
+proj4.defs("EPSG:2425", "+proj=tmerc +lat_0=0 +lon_0=84 +k=1 +x_0=500000 +y_0=0 +ellps=krass +units=m +no_defs ");  //北京1954-3度分带-高斯克吕格投影-CM-84E----82.5°E to 85.5°E
+proj4.defs("EPSG:2426", "+proj=tmerc +lat_0=0 +lon_0=87 +k=1 +x_0=500000 +y_0=0 +ellps=krass +units=m +no_defs ");  //北京1954-3度分带-高斯克吕格投影-CM-87E----85.5°E to 88.5°E
+proj4.defs("EPSG:2427", "+proj=tmerc +lat_0=0 +lon_0=90 +k=1 +x_0=500000 +y_0=0 +ellps=krass +units=m +no_defs ");  //北京1954-3度分带-高斯克吕格投影-CM-90E----88.5°E to 91.5°E
+proj4.defs("EPSG:2428", "+proj=tmerc +lat_0=0 +lon_0=93 +k=1 +x_0=500000 +y_0=0 +ellps=krass +units=m +no_defs ");  //北京1954-3度分带-高斯克吕格投影-CM-93E----91.5°E to 94.5°E
+proj4.defs("EPSG:2429", "+proj=tmerc +lat_0=0 +lon_0=96 +k=1 +x_0=500000 +y_0=0 +ellps=krass +units=m +no_defs ");  //北京1954-3度分带-高斯克吕格投影-CM-96E----94.5°E to 97.5°E
+proj4.defs("EPSG:2430", "+proj=tmerc +lat_0=0 +lon_0=99 +k=1 +x_0=500000 +y_0=0 +ellps=krass +units=m +no_defs ");  //北京1954-3度分带-高斯克吕格投影-CM-99E----97.5°E to 100.5°E
+proj4.defs("EPSG:2431", "+proj=tmerc +lat_0=0 +lon_0=102 +k=1 +x_0=500000 +y_0=0 +ellps=krass +units=m +no_defs ");  //北京1954-3度分带-高斯克吕格投影-CM-102E----100.5°E to 103.5°E
+proj4.defs("EPSG:2432", "+proj=tmerc +lat_0=0 +lon_0=105 +k=1 +x_0=500000 +y_0=0 +ellps=krass +units=m +no_defs ");  //北京1954-3度分带-高斯克吕格投影-CM-105E----103.5°E to 106.5°E
+proj4.defs("EPSG:2433", "+proj=tmerc +lat_0=0 +lon_0=108 +k=1 +x_0=500000 +y_0=0 +ellps=krass +units=m +no_defs ");  //北京1954-3度分带-高斯克吕格投影-CM-108E----106.5°E to 109.5°E
+proj4.defs("EPSG:2434", "+proj=tmerc +lat_0=0 +lon_0=111 +k=1 +x_0=500000 +y_0=0 +ellps=krass +units=m +no_defs ");  //北京1954-3度分带-高斯克吕格投影-CM-111E----109.5°E to 112.5°E
+proj4.defs("EPSG:2435", "+proj=tmerc +lat_0=0 +lon_0=114 +k=1 +x_0=500000 +y_0=0 +ellps=krass +units=m +no_defs ");  //北京1954-3度分带-高斯克吕格投影-CM-114E----112.5°E to 115.5°E
+proj4.defs("EPSG:2436", "+proj=tmerc +lat_0=0 +lon_0=117 +k=1 +x_0=500000 +y_0=0 +ellps=krass +units=m +no_defs ");  //北京1954-3度分带-高斯克吕格投影-CM-117E----115.5°E to 118.5°E
+proj4.defs("EPSG:2437", "+proj=tmerc +lat_0=0 +lon_0=120 +k=1 +x_0=500000 +y_0=0 +ellps=krass +units=m +no_defs ");  //北京1954-3度分带-高斯克吕格投影-CM-120E----118.5°E to 121.5°E
+proj4.defs("EPSG:2438", "+proj=tmerc +lat_0=0 +lon_0=123 +k=1 +x_0=500000 +y_0=0 +ellps=krass +units=m +no_defs ");  //北京1954-3度分带-高斯克吕格投影-CM-123E----121.5°E to 124.5°E
+proj4.defs("EPSG:2439", "+proj=tmerc +lat_0=0 +lon_0=126 +k=1 +x_0=500000 +y_0=0 +ellps=krass +units=m +no_defs ");  //北京1954-3度分带-高斯克吕格投影-CM-126E----124.5°E to 127.5°E
+proj4.defs("EPSG:2440", "+proj=tmerc +lat_0=0 +lon_0=129 +k=1 +x_0=500000 +y_0=0 +ellps=krass +units=m +no_defs ");  //北京1954-3度分带-高斯克吕格投影-CM-129E----127.5°E to 130.5°E
+proj4.defs("EPSG:2441", "+proj=tmerc +lat_0=0 +lon_0=132 +k=1 +x_0=500000 +y_0=0 +ellps=krass +units=m +no_defs ");  //北京1954-3度分带-高斯克吕格投影-CM-132E----130.5°E to 133.5°E
+proj4.defs("EPSG:2442", "+proj=tmerc +lat_0=0 +lon_0=135 +k=1 +x_0=500000 +y_0=0 +ellps=krass +units=m +no_defs ");  //北京1954-3度分带-高斯克吕格投影-CM-135E----133.5°E to 136.5°E
+
+//4525
+proj4.defs("EPSG:4525", "+proj=tmerc +lat_0=0 +lon_0=111 +k=1 +x_0=37500000 +y_0=0 +ellps=GRS80 +units=m +no_defs +type=crs");
+
+/**
+ * 投影坐标54到经纬度（WGS48 epsg:4326）转换方法
+ * @param epsgId  epsg的id值。目前使用的是"EPSG:2412"
+ * @param bj54Coordinate  54坐标值 类型为Object类，包含x y 属性。 {x:number,y:number}
+ * @returns result  输出结果，类型为object类，里面包含 longitude，latitude 属性
+ */
+
+export default {
+  bj54CoordinateTransfer(epsgId, bj54Coordinate) {
+
+    let bj54Projection = new proj4.Proj(epsgId);
+    let wgs84Projection = new proj4.Proj('EPSG:4326');
+    let transformedPoint = proj4.transform(bj54Projection, wgs84Projection, [bj54Coordinate.x, bj54Coordinate.y]);
+    return {
+      longitude: transformedPoint.x,
+      latitude: transformedPoint.y
+    }
+  },
+  // 经纬度坐标转2000坐标系
+  bj2000CoordinateTransfer(epsgId, bj54Coordinate) {
+    let bj54Projection = new proj4.Proj('EPSG:4326');
+    let wgs84Projection = new proj4.Proj(epsgId);
+    let transformedPoint = proj4.transform(bj54Projection, wgs84Projection, [bj54Coordinate.longitude, bj54Coordinate.latitude]);
+    return {
+      x: transformedPoint.x,
+      y: transformedPoint.y,
+    }
+  },
+  // 2000转wgs84
+  wgs84CoordinateTransfer(epsgId, bj54Coordinate) {
+    let bj54Projection = new proj4.Proj(epsgId);
+    let wgs84Projection = new proj4.Proj('EPSG:4326');
+    let transformedPoint = proj4.transform(bj54Projection, wgs84Projection, [bj54Coordinate.x, bj54Coordinate.y, bj54Coordinate.z]);
+    return {
+      x: transformedPoint.x,
+      y: transformedPoint.y,
+      z: transformedPoint.z
+    }
+  },
+  wgs84CoordinateTransfer1(epsgId, bj54Coordinate) {
+    let bj54Projection = new proj4.Proj(epsgId);
+    let wgs84Projection = new proj4.Proj('EPSG:4326');
+    let transformedPoint = proj4.transform(bj54Projection, wgs84Projection, [bj54Coordinate.x, bj54Coordinate.y]);
+    return {
+      x: transformedPoint.x,
+      y: transformedPoint.y,
+    }
+  },
+  bj54TransformArry(bj54Coord1, bj54Coord2) {
+
+  },
+  bj54TransformPoint(bj54Coord) {
+    let bj54Coordinate = {
+      x: parseFloat(bj54Coord.longitude),
+      y: parseFloat(bj54Coord.latitude)
+    }
+    let transformedCoord = this.bj54CoordinateTransfer("EPSG:2412", bj54Coordinate);
+
+    let wgs84Coordinate = {
+      longitude: transformedCoord.longitude,
+      latitude: transformedCoord.latitude,
+      height: parseFloat(bj54Coord.height)
+    }
+    return wgs84Coordinate
+  }
+}
@@ -19,6 +19,7 @@ export const useUserStore = defineStore({
        flag1: '', //银川权限标识
        flag2: '', //西安权限标识
        flag3: '', //新版大屏标识
+        flag4: '', //青海大屏标识
        centerId: '', //中心点id
        centerInfo: null, //应急中心信息
        count: 0,
@@ -45,6 +46,9 @@ export const useUserStore = defineStore({
        getFlag3(): string {
            return this.flag3 || getAuthCache('flag3');
        },
+        getFlag4(): string {
+            return this.flag4 || getAuthCache('flag4');
+        },
        getCenterId(): string {
            return this.centerId || getAuthCache('centerId');
        },
@@ -83,6 +87,10 @@ export const useUserStore = defineStore({
            this.flag3 = info ? info : '';
            setAuthCache('flag3', info);
        },
+        setFlag4(info: string | undefined) {
+            this.flag4 = info ? info : '';
+            setAuthCache('flag4', info);
+        },
        setCenterId(info: string | undefined) {
            this.centerId = info ? info : '';
            setAuthCache('centerId', info);
@@ -57,7 +57,7 @@ export function useSocket(p = basicPath, hasTimestamp: boolean = true) {
                //onmessage拿到返回的心跳就说明连接正常
                if (socket.value.readyState === WebSocket.OPEN) {
                    //console.log('连接正常' + new Date().toLocaleString());
-                    socket.value.send('ping');
+                    socket.value.send(`ping/${path.value.substring(path.value.lastIndexOf('/') + 1)}${socket.value.time}`);
                } else {
                    //console.log('连接断开');
                    init();
@@ -72,6 +72,7 @@ export function useSocket(p = basicPath, hasTimestamp: boolean = true) {
    };

    function init() {
+        const date = new Date().getTime();
        if (!t) {
            return router?.replace('/login');
        }
@@ -82,11 +83,12 @@ export function useSocket(p = basicPath, hasTimestamp: boolean = true) {
            // 实例化socket
            //判断是否需要时间戳
            if (hasTimestamp) {
-                socket.value = new WebSocket(path.value + Date.now(), [t]);
+                socket.value = new WebSocket(path.value + date, [t]);
            } else {
-                socket.value = new WebSocket(path.value, [t]);
+                socket.value = new WebSocket(path.value + date, [t]);
            }

+            socket.value['time'] = date;
            socket.value.onclose = function () {
                reconnect(path.value);
                // //console.log('连接关闭', new Date().toLocaleString());
@@ -9,6 +9,8 @@ enum Api {
    medicalCenterNew = '/health-emergency/emergency/LargeScreenNew/medicalCenterNew',
    userHealthCenterNew = '/health-emergency/emergency/LargeScreenNew/userHealthCenterNew',
    getAllList = '/health-emergency/emergency/LargeScreenNew/getAllListNew',
+    monitorTotal = '/health-watch/api/watch/screen/monitor/stats/total',
+    monitorMonth = '/health-watch/api/watch/screen/monitor/stats/month',
 }

 /**
@@ -58,3 +60,13 @@ export const getMonitorList = (params: any) => {
 * @param params
 */
 export const getMapListApi = (params: any) => post(Api.getAllList, params);
+/**
+ * @description 获取健康终端日周月统计数据
+ * @param params
+ */
+export const monitorTotalApi = (params: any) => get(Api.monitorTotal, params);
+/**
+ * @description 获取健康终端echart数据
+ * @param params
+ */
+export const monitorMonthApi = (params: any) => get(Api.monitorMonth, params);
@@ -40,7 +40,9 @@
                    <TerminalAlarm
                        :refreshState="refreshState"
                        :setting="setting"
+                        :socketData="socketData"
                        :set-inter="true"
+                        :show-statistics="true"
                        :time-interval="getTimeInterval()"
                        @emit-view-detail="handleEmployeeDialog"
                    />
@@ -62,6 +64,7 @@
        <TerminalAlarmDialog
            ref="terminalAlarmDialogRef"
            :setting="setting"
+            title=""
            :time-interval="{ startDate: dayjs().format('YYYY-MM-DD'), endDate: dayjs().format('YYYY-MM-DD') }"
        />
    </div>
@@ -19,6 +19,7 @@
                        theme="dark"
                        :refreshState="refreshState"
                        :setting="setting"
+                        :is-show="false"
                        class="service-details"
                        @handleClick="handlePhoneDialog"
                    />
@@ -0,0 +1,67 @@
+let dataX: any[] = [];
+let dataY: any[] = [];
+
+function setData(dX, dY) {
+    dataX = dX;
+    dataY = dY;
+}
+
+function getOption() {
+    return {
+        tooltip: {
+            trigger: 'axis',
+            formatter: (params: any) => {
+                console.log(params);
+                let p = params[0];
+                return `${p?.name}日: ${p?.value}次`;
+            },
+        },
+        xAxis: {
+            type: 'category',
+            data: dataX,
+            axisLine: {
+                lineStyle: {
+                    color: '#0d2137',
+                },
+            },
+            axisTick: {
+                lineStyle: {
+                    color: 'transparent', // X轴刻度线的颜色
+                },
+            },
+            axisLabel: {
+                color: '#ffffff', // X轴标签文字的颜色
+            },
+        },
+        yAxis: {
+            type: 'value',
+            axisLine: {
+                lineStyle: {
+                    color: '#ffffff',
+                },
+            },
+            splitLine: {
+                lineStyle: {
+                    color: '#0d2137', // 设置Y轴分割线的颜色为红色
+                },
+            },
+        },
+        series: [
+            {
+                data: dataY,
+                type: 'bar',
+                barWidth: 10,
+                color: '#0a50a0',
+                splitLine: {
+                    lineStyle: {
+                        color: '#0d2137', // 设置Y轴分割线的颜色为红色
+                    },
+                },
+            },
+        ],
+    };
+}
+
+export function useE() {
+    return { setData, getOption };
+}
@@ -49,6 +49,10 @@
        theme: {
            type: String,
        },
+        isShow: {
+            type: Boolean,
+            default: () => true,
+        },
    });
    const emit = defineEmits(['handleClick']);
    const typeTime = ref(timeTab);
@@ -99,6 +103,8 @@
    }

    function handleClick(item) {
+        // 下面这行是为了检查的时候，不让点击查看最新受理电话功能，只针对银川大屏
+        // if (!props.isShow && item.key === 'alerdyreceive') return;
        emit('handleClick', item);
    }

@@ -24,6 +24,29 @@
                </div>
            </vue3-seamless-scroll>
        </div>
+        <div class="bottom-d" v-if="showStatistics">
+            <div>
+                <div>
+                    日累计
+                    <span>{{ dayInfo?.dayCount || 0 }}</span>
+                    次
+                </div>
+            </div>
+            <div>
+                <div>
+                    周累计
+                    <span>{{ dayInfo?.weekCount || 0 }}</span>
+                    次
+                </div>
+            </div>
+            <div>
+                <div>
+                    月累计
+                    <span>{{ dayInfo?.monthCount || 0 }}</span>
+                    次
+                </div>
+            </div>
+        </div>
        <Dialog :openVis="openInfor" width="30%" title="健康报警员工信息" @close="handlePoliceClose">
            <template #container>
                <div class="police-con" :class="[themeType]">
@@ -90,7 +113,7 @@
    import PublicTitle from '/@/components/publicTitle.vue';
    import Dialog from '/@/components/dialog/Dialog.vue';
    import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
-    import { getMonitorList } from '/@/views/centralScreen/centralScreen.api.ts';
+    import { getMonitorList, monitorTotalApi } from '/@/views/centralScreen/centralScreen.api.ts';
    import { Map } from '/@/assets/mapUtils/map.ts';
    import { caching, useSession } from '/@/hooks/autoRefresh/caching.ts';
    import { DataType } from '/@/utils/settings.ts';
@@ -109,6 +132,14 @@
            type: Object,
            default: () => {},
        },
+        showStatistics: {
+            type: Boolean,
+            default: () => false,
+        },
+        socketData: {
+            type: Object,
+            default: () => {},
+        },
    });
    const { themeType } = useTheme();
    const emit = defineEmits(['emit-view-detail']);
@@ -129,10 +160,30 @@
        address: '',
        dataValue: '',
    });
+    const dayInfo = ref<any>({});
    onMounted(() => {
        getScrollList();
+        // 如果为庆阳应急中心，需调用统计接口
+        if (props.setInter) {
+            interval.value = setInterval(() => {
+                getScrollList();
+            }, 30000);
+            getStatic();
+        }
    });

+    function getStatic() {
+        monitorTotalApi({ orgCodeList: userStore.getCenterInfo?.serviceScope })
+            .then((res: any) => {
+                if (res.code === 200) {
+                    dayInfo.value = res?.result;
+                }
+            })
+            .catch((e) => {
+                console.log(e);
+            });
+    }
+
    /**
     * @desc open员工信息
     */
@@ -157,18 +208,21 @@

    const interval = ref<any>(null);
    const nowDate = ref(dayjs());
-    onMounted(() => {
-        if (props.setInter) {
-            interval.value = setInterval(() => {
-                getScrollList();
-            }, 30000);
-        }
-    });

    onUnmounted(() => {
        interval.value && clearInterval(interval.value);
    });

+    watch(
+        () => props.socketData,
+        (v) => {
+            console.log(v);
+            if (props.setInter) {
+                getStatic();
+            }
+            getScrollList();
+        }
+    );
    async function getScrollList() {
        try {
            let orgCodeList = userStore.getCenterInfo?.serviceScope;
@@ -210,6 +264,10 @@
    }
 </script>
 <style scoped lang="less">
+    .terminal-container {
+        display: flex;
+        flex-direction: column;
+    }
    .right-text {
        font-weight: 100;
        cursor: pointer;
@@ -226,14 +284,17 @@
    }

    .inner {
-        height: calc(100% - 40px);
+        flex: 1;
+        overflow: hidden;
+        //height: calc(100% - 40px);
        display: flex;
        align-items: center;
        justify-content: center;
+        padding: 20px 0;

        .scroll {
            width: 98%;
-            height: 88%;
+            height: 100%;
            overflow: hidden;

            .item {
@@ -289,6 +350,23 @@
    .ant-row {
        margin-bottom: 10px;
    }
+
+    .bottom-d {
+        display: flex;
+        background: rgba(255, 255, 255, 0.1);
+        border: 1px solid rgba(255, 255, 255, 0.4);
+        justify-content: space-around;
+        color: #ffffff;
+        padding: 5px 0;
+        border-radius: 5px;
+        font-weight: bold;
+        font-size: 18px;
+
+        span {
+            font-size: 28px !important;
+            padding: 0 3px;
+        }
+    }
 </style>
 <!--<style lang="less">-->
 <!--    .dialog-con {-->
@@ -1,6 +1,20 @@
 <template>
-    <Dialog :openVis="visible" width="50%" title="健康终端报警列表" @close="closeDialog" :maskClosable="false">
+    <Dialog :openVis="visible" width="50%" :title="props.title" @close="closeDialog" :maskClosable="false">
+        <template #modalTitle>
+            <div class="modal-title-d">
+                健康终端报警列表
+                <div>
+                    <div @click="changeChoose(0)" :class="[chooseType === 0 ? 'select-d' : 'no-select-d']">
+                        <img :src="chooseType === 0 ? listSPng : listPng" alt="" /> 列表
+                    </div>
+                    <div @click="changeChoose(1)" :class="[chooseType === 1 ? 'select-d' : 'no-select-d']">
+                        <img :src="chooseType === 1 ? chartSPng : chartPng" alt="" /> 图表
+                    </div>
+                </div>
+            </div>
+        </template>
        <template #container>
+            <template v-if="chooseType === 0">
                <BasicTable ref="registerTable" class="table-container" :columns="columns" :api="getMonitorList" :apiParams="formState">
                    <template #address="{ record, column, index }">
                        <span v-if="record['address']">{{ record?.address }}</span>
@@ -8,19 +22,57 @@
                    </template>
                </BasicTable>
            </template>
+            <template v-else>
+                <div style="padding: 0 10px">
+                    <div class="chart-top">
+                        <div>
+                            <div>{{ dayInfo?.dayCount || 0 }}次</div>
+                            <div>日累计</div>
+                        </div>
+                        <div>
+                            <div>{{ dayInfo?.weekCount || 0 }}次</div>
+                            <div>周累计</div>
+                        </div>
+                        <div>
+                            <div>{{ dayInfo?.monthCount || 0 }}次</div>
+                            <div>月累计</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="time-d">
+                    <left-outlined @click="changeMonth(0)" class="left-or-right" />
+                    <span style="user-select: none; margin: 0 10px">{{ dayjs(nowTime).format('YYYY年M月') }}</span>
+                    <right-outlined @click="changeMonth(1)" class="left-or-right" />
+                </div>
+                <div ref="chartRef" style="height: 50vh"></div>
+            </template>
+        </template>
    </Dialog>
 </template>
 <script setup lang="ts">
-    import { computed, ref, watch, h } from 'vue';
+    import { computed, ref, watch, h, nextTick } from 'vue';
+    import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue';
    import Dialog from '/@/components/dialog/Dialog.vue';
    import { useDialog } from '/@/views/components/dialogHooks.ts';
    import BasicTable from '/@/components/secondaryScreen/secondMap/components/basicTable/BasicTable.vue';
-    import { getMonitorList } from '/@/views/centralScreen/centralScreen.api.ts';
+    import { getMonitorList, monitorMonthApi, monitorTotalApi } from '/@/views/centralScreen/centralScreen.api.ts';
    import { useUserStore } from '/@/store/modules/user.ts';
+    import listSPng from '/@/assets/images/list-icon-active.png';
+    import listPng from '/@/assets/images/list-icon.png';
+    import chartSPng from '/@/assets/images/chart-icon-active.png';
+    import chartPng from '/@/assets/images/chart-icon.png';
+    import * as echarts from 'echarts';
+    import { useE } from '/@/views/centralScreen/components/centralScreenDHook.ts';
+    import dayjs from 'dayjs';
+
+    const { setData, getOption } = useE();

    const props = defineProps({
        record: Object,
-        title: String,
+        title: {
+            type: String,
+            default: () => '健康终端报警列表',
+        },
        useForm: Boolean,
        labelCol: Object,
        wrapperCol: Object,
@@ -32,6 +84,13 @@
        },
    });

+    const dayInfo = ref<any>({});
+    const dataX = ref<any[]>([]);
+    const dataY = ref<any[]>([]);
+
+    const chooseType = ref(0);
+    const nowTime = ref<any>(dayjs().format('YYYY-M'));
+
    const columns = [
        {
            title: '姓名',
@@ -63,6 +122,11 @@
            dataIndex: 'warnTime',
            key: 'warnTime',
        },
+        {
+            title: '上报时间',
+            dataIndex: 'createTime',
+            key: 'createTime',
+        },
        {
            title: '发生地点',
            dataIndex: 'address',
@@ -78,27 +142,174 @@
        },
    ];
    const userStore = useUserStore();
+    const chartRef = ref();

-    console.log(props.timeInterval);
    const formState = computed(() => ({
        dataType: props.setting.dataType,
        // orgCode: props.setting?.orgCode,
        orgCodeList: userStore.getCenterInfo?.serviceScope,
-        ...props.timeInterval,
    }));
+
+    // const formState = ref({
+    //     dataType: props.setting?.dataType,
+    //     // orgCode: props.setting?.orgCode,
+    //     orgCodeList: userStore.getCenterInfo?.serviceScope,
+    //     ...props.timeInterval,
+    // });
    const { visible, closeDialog, openDialog } = useDialog({ title: props.title });
    const registerTable = ref();
-    watch(props, (v, o) => {
-        if (JSON.stringify(v) !== JSON.stringify(o)) {
-            registerTable.value?.getRecords();
+    // watch(props, (v, o) => {
+    //     registerTable.value?.getRecords();
+    // });
+
+    function changeChoose(type: any) {
+        if (type === chooseType.value) return;
+        chooseType.value = type;
+        if (chooseType.value === 1) {
+            nowTime.value = dayjs().format('YYYY-M');
+            // nextTick(() => {
+            //     getEcharts();
+            // });
+            getDayAndMonthAndYear();
+            getEchart();
        }
+    }
+
+    function getDayAndMonthAndYear() {
+        monitorTotalApi({ orgCodeList: userStore.getCenterInfo?.serviceScope })
+            .then((res: any) => {
+                if (res.code === 200) {
+                    dayInfo.value = res?.result;
+                }
+            })
+            .catch((e) => {
+                console.log(e);
            });
+    }
+    function getEchart() {
+        const y = dayjs(nowTime.value).format('YYYY');
+        const m = dayjs(nowTime.value).format('M');
+        monitorMonthApi({ orgCodeList: userStore.getCenterInfo?.serviceScope, year: y, month: m })
+            .then((res: any) => {
+                if (res.code === 200) {
+                    let d1: any[] = [];
+                    let d2: any[] = [];
+                    res?.result &&
+                        res?.result.map((item: any) => {
+                            d1.push(item?.day);
+                            d2.push(parseInt(item?.count || 0));
+                        });
+                    dataX.value = d1;
+                    dataY.value = d2;
+                }
+            })
+            .catch((e) => {
+                console.log(e);
+            })
+            .finally(() => {
+                getEcharts();
+            });
+    }
+
+    function changeMonth(type: any) {
+        if (type === 0) {
+            nowTime.value = dayjs(nowTime.value).subtract(1, 'month');
+        } else {
+            if (dayjs().diff(nowTime.value, 'month') !== 0) {
+                nowTime.value = dayjs(nowTime.value).add(1, 'month');
+            } else {
+                return;
+            }
+        }
+        getEchart();
+    }
+
+    function getEcharts() {
+        const c = echarts.init(chartRef.value);
+        setData(dataX.value, dataY.value);
+        c.setOption(getOption());
+        window.addEventListener('resize', () => {
+            c.resize();
+        });
+    }
+
+    function openDialogBefore() {
+        chooseType.value = 0;
+        nowTime.value = dayjs().format('YYYY-M');
+        openDialog();
+    }
+
    defineExpose({
-        openDialog,
+        openDialog: openDialogBefore,
    });
 </script>
 <style scoped lang="less">
    .table-container {
        margin: 0 10px;
    }
+
+    .modal-title-d {
+        width: calc(100% - 52px);
+        display: flex;
+        justify-content: space-between;
+
+        > div {
+            display: flex;
+
+            > div {
+                display: flex;
+                align-items: center;
+                cursor: pointer;
+                font-weight: normal;
+                font-size: 14px;
+
+                &:nth-child(1) {
+                    margin-right: 30px;
+                }
+            }
+        }
+
+        img {
+            height: 80%;
+            margin-right: 8px;
+        }
+
+        .no-select-d {
+            color: #576371;
+        }
+
+        .select-d {
+            color: #ffffff;
+        }
+    }
+
+    .chart-top {
+        display: flex;
+        justify-content: space-around;
+        padding: 30px 0;
+        border-bottom: 1px solid #0d2238;
+        text-align: center;
+
+        > div {
+            > div {
+                &:nth-child(1) {
+                    font-size: 32px;
+                    font-weight: bold;
+                }
+                &:nth-child(2) {
+                    font-size: 16px;
+                }
+            }
+        }
+    }
+
+    .time-d {
+        padding: 30px 0 0;
+        text-align: center;
+        font-size: 16px;
+    }
+
+    .left-or-right {
+        cursor: pointer;
+    }
 </style>
@@ -24,6 +24,10 @@
                    <span>发生时间：</span>
                    <span>{{ userInfo?.warnTime }}</span>
                </div>
+                <div class="con-item">
+                    <span>上报时间：</span>
+                    <span>{{ userInfo?.createDate }}</span>
+                </div>
                <div class="con-item">
                    <span>发生地点：</span>
                    <span>{{ userInfo?.address || userInfo?.gpsErrorMsg }}</span>
@@ -46,6 +50,7 @@
    watch(
        () => props.record,
        (nVal) => {
+            console.log('健康报警');
            userInfo.value = nVal;
        }
    );
@@ -9,7 +9,7 @@
                    返回
                </span>
            </div>
-            <div class="title-d-middle"> 心血管监测</div>
+            <div class="title-d-middle"> 心血管监测 112</div>
            <div class="title-d-right"> 累计监测时间：{{ dayTimeT }}</div>
        </div>
        <div class="body-d">
@@ -0,0 +1,27 @@
+<template>
+    <div style="width: 100%; height: 100%" ref="middleRef"> </div>
+</template>
+<script setup lang="ts">
+    import { onMounted, ref } from 'vue';
+    import * as echarts from 'echarts';
+    import { getOption } from '/@/views/qh/hooks/middle.ts';
+
+    const middleRef = ref();
+
+    onMounted(() => {
+        initE();
+    });
+
+    function initE() {
+        try {
+            let myChart = echarts.init(middleRef.value);
+            myChart.setOption(getOption());
+            window.addEventListener('resize', () => {
+                myChart.resize();
+            });
+        } catch (e) {
+            console.log(e);
+        }
+    }
+</script>
+<style scoped lang="less"></style>
@@ -0,0 +1,19 @@
+<template>
+    <div class="qh-item-d">
+        <div class="qh-son-title">
+            {{ props.title }}
+        </div>
+        <div></div>
+    </div>
+</template>
+<script setup lang="ts">
+    const props = defineProps({
+        title: {
+            type: String,
+            default: () => '',
+        },
+    });
+</script>
+<style scoped lang="less">
+    @import '/@/views/qh/style/index.less';
+</style>
@@ -0,0 +1,19 @@
+<template>
+    <div class="qh-item-d">
+        <div class="qh-son-title">
+            {{ props.title }}
+        </div>
+        <div></div>
+    </div>
+</template>
+<script setup lang="ts">
+    const props = defineProps({
+        title: {
+            type: String,
+            default: () => '',
+        },
+    });
+</script>
+<style scoped lang="less">
+    @import '/@/views/qh/style/index.less';
+</style>
@@ -0,0 +1,19 @@
+<template>
+    <div class="qh-item-d">
+        <div class="qh-son-title">
+            {{ props.title }}
+        </div>
+        <div></div>
+    </div>
+</template>
+<script setup lang="ts">
+    const props = defineProps({
+        title: {
+            type: String,
+            default: () => '',
+        },
+    });
+</script>
+<style scoped lang="less">
+    @import '/@/views/qh/style/index.less';
+</style>
@@ -0,0 +1,19 @@
+<template>
+    <div class="qh-item-d">
+        <div class="qh-son-title">
+            {{ props.title }}
+        </div>
+        <div></div>
+    </div>
+</template>
+<script setup lang="ts">
+    const props = defineProps({
+        title: {
+            type: String,
+            default: () => '',
+        },
+    });
+</script>
+<style scoped lang="less">
+    @import '/@/views/qh/style/index.less';
+</style>
@@ -0,0 +1,101 @@
+<template>
+    <div class="qh-item-d">
+        <div class="qh-son-title">
+            {{ props.title }}
+        </div>
+        <div ref="chartRef"></div>
+    </div>
+</template>
+<script setup lang="ts">
+    import * as echarts from 'echarts';
+    import { nextTick, onMounted, ref } from 'vue';
+    import { bindListen, getPie3D } from '/@/views/qh/hooks/twoLeft';
+
+    const chartRef = ref();
+    const optionData = ref([
+        {
+            name: '骨科',
+            value: 30,
+            itemStyle: {
+                color: '#e27c3d',
+            },
+        },
+        {
+            name: '外科',
+            value: 40,
+            itemStyle: {
+                color: '#eca298',
+            },
+        },
+        {
+            name: '内科',
+            value: 70,
+            itemStyle: {
+                color: 'red',
+            },
+        },
+    ]);
+    const option = ref({});
+
+    const props = defineProps({
+        title: {
+            type: String,
+            default: () => '',
+        },
+    });
+
+    onMounted(() => {
+        nextTick(() => {
+            initE();
+        });
+    });
+
+    function initE() {
+        //构建3d饼状图
+        let myChart = echarts.init(chartRef.value);
+        // 传入数据生成 option
+        option.value = getPie3D(optionData.value, 0.5);
+        myChart.setOption(option.value);
+        //是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
+        option.value.series.push({
+            name: 'pie2d',
+            type: 'pie',
+            labelLine: {
+                length: 10,
+                length2: 10,
+            },
+            label: {
+                show: true,
+                position: 'inner',
+                rich: {
+                    a: {
+                        color: 'red',
+                        fontSize: 12,
+                        lineHeight: 20,
+                    },
+                    c: {
+                        fontSize: 16,
+                    },
+                },
+                formatter: '{b|{b} \n}{c|{c}}{b|  亩}',
+            },
+            startAngle: -20, //起始角度，支持范围[0, 360]。
+            clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+            radius: ['20%', '50%'],
+            center: ['50%', '50%'],
+            data: optionData.value,
+            itemStyle: {
+                opacity: 0,
+            },
+        });
+        myChart.setOption(option.value);
+
+        window.addEventListener('resize', () => {
+            myChart.resize();
+        });
+        bindListen(myChart, option.value);
+    }
+</script>
+<style scoped lang="less">
+    @import '/@/views/qh/style/index.less';
+</style>
@@ -0,0 +1,36 @@
+<template>
+    <div class="qh-item-d">
+        <div class="qh-son-title">
+            {{ props.title }}
+        </div>
+        <div ref="chartRef"></div>
+    </div>
+</template>
+<script setup lang="ts">
+    import * as echarts from 'echarts';
+    import { onMounted, ref } from 'vue';
+    import { getOption } from '/@/views/qh/hooks/twoRight.ts';
+
+    const chartRef = ref();
+    const props = defineProps({
+        title: {
+            type: String,
+            default: () => '',
+        },
+    });
+
+    onMounted(() => {
+        initE();
+    });
+
+    function initE() {
+        let myChart = echarts.init(chartRef.value);
+        myChart.setOption(getOption(['消化道', '消化道', '消化道', '消化道'], [23, 51, 23, 63]));
+        window.addEventListener('resize', () => {
+            myChart.resize();
+        });
+    }
+</script>
+<style scoped lang="less">
+    @import '/@/views/qh/style/index.less';
+</style>
@@ -0,0 +1,447 @@
+import * as echarts from 'echarts';
+import chinaJson from './china.json';
+echarts.registerMap('china', chinaJson);
+let outname = [
+    '南海诸岛',
+    '天津',
+    '上海',
+    '重庆',
+    '河北',
+    '河南',
+    '云南',
+    '辽宁',
+    '黑龙江',
+    '湖南',
+    '安徽',
+    '山东',
+    '新疆',
+    '江苏',
+    '浙江',
+    '江西',
+    '湖北',
+    '广西',
+    '甘肃',
+    '山西',
+    '内蒙古',
+    '陕西',
+    '吉林',
+    '福建',
+    '贵州',
+    '广东',
+    '青海',
+    '西藏',
+    '四川',
+    '宁夏',
+    '海南',
+    '台湾',
+    '香港',
+    '澳门',
+];
+let outvalue = [
+    0, 13, 140, 75, 13, 83, 11, 19, 15, 69, 260, 39, 4, 31, 104, 36, 1052, 33, 347, 9, 157, 22, 4, 18, 5, 2398, 41, 0, 484, 404, 22, 3, 5, 225,
+];
+let outdata: any[] = [];
+let bjname: any[] = ['北京'];
+let bjvalue: any[] = [300];
+let beijing: any[] = [];
+
+for (let i = 0; i < outname.length; i++) {
+    outdata.push({
+        name: outname[i],
+        value: outvalue[i],
+    });
+}
+
+for (let i = 0; i < bjname.length; i++) {
+    beijing.push({
+        name: bjname[i],
+        value: bjvalue[i],
+    });
+}
+
+let geoCoordMap = {};
+/*获取地图数据*/
+let mapFeatures = chinaJson.features;
+mapFeatures.forEach(function (v) {
+    // 地区名称
+    let name = v.properties.name;
+    // 地区经纬度
+    geoCoordMap[name] = v.properties.cp;
+});
+let convertData = function (data) {
+    let res = [];
+    for (let i = 0; i < data.length; i++) {
+        let geoCoord = geoCoordMap[data[i].name];
+        if (geoCoord) {
+            res.push({
+                name: data[i].name,
+                value: geoCoord.concat(data[i].value),
+            });
+        }
+    }
+    return res;
+};
+let points = [
+    {
+        name: 'aa',
+        value: [117.4219, 39.4189],
+        itemStyle: {
+            color: 'red',
+        },
+    },
+    {
+        value: [103.5901, 36.3043],
+        itemStyle: {
+            color: 'red',
+        },
+    },
+    {
+        value: [112.3352, 37.9413],
+        itemStyle: {
+            color: 'red',
+        },
+    },
+    {
+        value: [113.62, 34.75],
+        itemStyle: {
+            color: 'red',
+        },
+    },
+    {
+        value: [109.48, 36.6],
+        itemStyle: {
+            color: 'red',
+        },
+    },
+    {
+        value: [107.13, 34.37],
+        itemStyle: {
+            color: 'red',
+        },
+    },
+    {
+        value: [113.23, 23.16],
+        itemStyle: {
+            color: 'red',
+        },
+    },
+    {
+        value: [117.4219, 39.4189],
+        itemStyle: {
+            color: 'red',
+        },
+    },
+    {
+        value: [108.37, 22.82],
+        itemStyle: {
+            color: 'red',
+        },
+    },
+    {
+        value: [109.1162, 34.2004],
+        itemStyle: {
+            color: 'red',
+        },
+    },
+    {
+        value: [103.5901, 36.3043],
+        itemStyle: {
+            color: 'red',
+        },
+    },
+    {
+        value: [106.3586, 38.1775],
+        itemStyle: {
+            color: 'red',
+        },
+    },
+    {
+        value: [103.9526, 30.7617],
+        itemStyle: {
+            color: 'red',
+        },
+    },
+];
+let option = {
+    backgroundColor: 'transparent',
+    geo: {
+        map: 'china',
+        aspectScale: 0.75, //长宽比
+        zoom: 1.1,
+        // scaleLimit: {
+        //     min: 1,
+        //     max: 4,
+        // },
+        roam: false,
+        itemStyle: {
+            normal: {
+                areaColor: {
+                    type: 'radial',
+                    x: 0.5,
+                    y: 0.5,
+                    r: 0.8,
+                    colorStops: [
+                        {
+                            offset: 0,
+                            color: '#09132c', // 0% 处的颜色
+                        },
+                        {
+                            offset: 1,
+                            color: '#274d68', // 100% 处的颜色
+                        },
+                    ],
+                    globalCoord: true, // 缺省为 false
+                },
+                shadowColor: 'rgb(58,115,192)',
+                shadowOffsetX: 3,
+                shadowOffsetY: 4,
+            },
+            emphasis: {
+                areaColor: '#2AB8FF',
+                borderWidth: 0,
+                color: 'green',
+                label: {
+                    show: false,
+                },
+            },
+        },
+        regions: [
+            {
+                name: '南海诸岛',
+                itemStyle: {
+                    areaColor: 'rgba(0, 10, 52, 1)',
+                    borderColor: 'rgba(0, 10, 52, 1)',
+                    normal: {
+                        opacity: 0,
+                        label: {
+                            show: false,
+                            color: '#009cc9',
+                        },
+                    },
+                },
+            },
+        ],
+    },
+    series: [
+        {
+            type: 'map',
+            roam: false,
+            label: {
+                normal: {
+                    show: true,
+                    textStyle: {
+                        color: '#1DE9B6',
+                    },
+                },
+                emphasis: {
+                    textStyle: {
+                        color: 'rgb(183,185,14)',
+                    },
+                },
+            },
+
+            itemStyle: {
+                normal: {
+                    borderColor: 'rgb(147, 235, 248)',
+                    borderWidth: 1,
+                    areaColor: {
+                        type: 'radial',
+                        x: 0.5,
+                        y: 0.5,
+                        r: 0.8,
+                        colorStops: [
+                            {
+                                offset: 0,
+                                color: '#09132c', // 0% 处的颜色
+                            },
+                            {
+                                offset: 1,
+                                color: '#274d68', // 100% 处的颜色
+                            },
+                        ],
+                        globalCoord: true, // 缺省为 false
+                    },
+                },
+                emphasis: {
+                    areaColor: 'rgb(46,229,206)',
+                    //    shadowColor: 'rgb(12,25,50)',
+                    borderWidth: 0.1,
+                },
+            },
+            zoom: 1.1,
+            //     roam: false,
+            map: 'china', //使用
+
+            // data: this.difficultData //热力图数据   不同区域 不同的底色
+        },
+        {
+            type: 'effectScatter',
+            coordinateSystem: 'geo',
+            showEffectOn: 'render',
+            zlevel: 1,
+            rippleEffect: {
+                period: 15,
+                scale: 4,
+                brushType: 'fill',
+            },
+            hoverAnimation: true,
+            label: {
+                normal: {
+                    formatter: '{b}',
+                    position: 'bottom',
+                    offset: [0, 15],
+                    color: 'red',
+                    show: true,
+                    fontSize: 15,
+                },
+            },
+            itemStyle: {
+                normal: {
+                    color: '#1DE9B6',
+                    // function(value) {
+                    //     //随机颜色
+                    //     return '#' + ('00000' + ((Math.random() * 16777215 + 0.5) >> 0).toString(16)).slice(-6);
+                    // },
+                    shadowBlur: 10,
+                    shadowColor: '#333',
+                },
+            },
+            symbolSize: 12,
+            data: points,
+        }, //地图线的动画效果 后面的注释掉，防止后期要线
+        //         {
+        //             type: 'lines',
+        //             zlevel: 2,
+        //             effect: {
+        //                 show: true,
+        //                 period: 4, //箭头指向速度，值越小速度越快
+        //                 trailLength: 0.4, //特效尾迹长度[0,1]值越大，尾迹越长重
+        //                 symbol: 'arrow', //箭头图标
+        //                 symbolSize: 5, //图标大小
+        //             },
+        //             lineStyle: {
+        //                 normal: {
+        //                     color: '#1DE9B6',
+        //                     /* function (value){ //随机颜色
+        //
+        //                     ['#f21347','#f3243e','#f33736','#f34131','#f34e2b',
+        //                     '#f56321','#f56f1c','#f58414','#f58f0e','#f5a305',
+        //                     '#e7ab0b','#dfae10','#d5b314','#c1bb1f','#b9be23',
+        //                     '#a6c62c','#96cc34','#89d23b','#7ed741','#77d64c',
+        //                     '#71d162','#6bcc75','#65c78b','#5fc2a0','#5abead',
+        //                     '#52b9c7','#4fb6d2','#4ab2e5']
+        // return "#"+("00000"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6);
+        // }*/
+        //                     width: 1, //线条宽度
+        //                     opacity: 0.1, //尾迹线条透明度
+        //                     curveness: 0.3, //尾迹线条曲直度
+        //                 },
+        //             },
+        //             data: [
+        //                 {
+        //                     coords: [
+        //                         [117.4219, 39.4189],
+        //                         [109.1162, 34.2004],
+        //                     ],
+        //                     lineStyle: {
+        //                         color: '#f58414',
+        //                     },
+        //                 },
+        //                 {
+        //                     coords: [
+        //                         [112.3352, 37.9413],
+        //                         [109.1162, 34.2004],
+        //                     ],
+        //                     lineStyle: {
+        //                         color: '#f58f0e',
+        //                     },
+        //                 },
+        //                 {
+        //                     coords: [
+        //                         [103.5901, 36.3043],
+        //                         [109.1162, 34.2004],
+        //                     ],
+        //                     lineStyle: {
+        //                         color: '#e7ab0b',
+        //                     },
+        //                 },
+        //                 {
+        //                     coords: [
+        //                         [106.3586, 38.1775],
+        //                         [109.1162, 34.2004],
+        //                     ],
+        //                     lineStyle: {
+        //                         color: '#dfae10',
+        //                     },
+        //                 },
+        //                 {
+        //                     coords: [
+        //                         [103.9526, 30.7617],
+        //                         [109.1162, 34.2004],
+        //                     ],
+        //                     lineStyle: {
+        //                         color: '#c1bb1f',
+        //                     },
+        //                 },
+        //                 {
+        //                     coords: [
+        //                         [108.37, 22.82],
+        //                         [109.1162, 34.2004],
+        //                     ],
+        //                     lineStyle: {
+        //                         color: '#c1bb1f',
+        //                     },
+        //                 },
+        //                 {
+        //                     coords: [
+        //                         [113.23, 23.16],
+        //                         [109.1162, 34.2004],
+        //                     ],
+        //                     lineStyle: {
+        //                         color: '#c1bb1f',
+        //                     },
+        //                 },
+        //                 {
+        //                     coords: [
+        //                         [107.13, 34.37],
+        //                         [109.1162, 34.2004],
+        //                     ],
+        //                     lineStyle: {
+        //                         color: '#c1bb1f',
+        //                     },
+        //                 },
+        //                 {
+        //                     coords: [
+        //                         [109.48, 36.6],
+        //                         [109.1162, 34.2004],
+        //                     ],
+        //                     lineStyle: {
+        //                         color: '#c1bb1f',
+        //                     },
+        //                 },
+        //                 {
+        //                     coords: [
+        //                         [113.62, 34.75],
+        //                         [109.1162, 34.2004],
+        //                     ],
+        //                     lineStyle: {
+        //                         color: '#c1bb1f',
+        //                     },
+        //                 },
+        //                 {
+        //                     coords: [
+        //                         [105.7314, 34.5874],
+        //                         [109.1162, 34.2004],
+        //                     ],
+        //                     lineStyle: {
+        //                         color: '#c1bb1f',
+        //                     },
+        //                 },
+        //             ],
+        //         },
+    ],
+};
+
+export const getOption = () => {
+    return option;
+};
@@ -0,0 +1,371 @@
+import 'echarts-gl';
+
+export function getPie3D(pieData, internalDiameterRatio) {
+    //internalDiameterRatio:透明的空心占比
+    let series = [];
+    let sumValue = 0;
+    let startValue = -5;
+    let endValue = 0;
+    let legendData = [];
+    let legendBfb = [];
+    let k = 1 - internalDiameterRatio;
+    pieData.sort((a, b) => {
+        return a.value - b.value;
+    });
+    // 为每一个饼图数据，生成一个 series-surface 配置
+    for (let i = 0; i < pieData.length; i++) {
+        sumValue += pieData[i].value;
+        let seriesItem = {
+            name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
+            type: 'surface',
+            parametric: true,
+            wireframe: {
+                show: false,
+            },
+            pieData: pieData[i],
+            pieStatus: {
+                selected: false,
+                hovered: false,
+                k: k,
+            },
+            center: ['10%', '50%'],
+        };
+
+        if (typeof pieData[i].itemStyle != 'undefined') {
+            let itemStyle = {};
+            typeof pieData[i].itemStyle.color != 'undefined' ? (itemStyle.color = pieData[i].itemStyle.color) : null;
+            typeof pieData[i].itemStyle.opacity != 'undefined' ? (itemStyle.opacity = pieData[i].itemStyle.opacity) : null;
+            seriesItem.itemStyle = itemStyle;
+        }
+        series.push(seriesItem);
+    }
+
+    // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
+    // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
+    legendData = [];
+    legendBfb = [];
+    for (let i = 0; i < series.length; i++) {
+        endValue = startValue + series[i].pieData.value;
+        series[i].pieData.startRatio = startValue / sumValue;
+        series[i].pieData.endRatio = endValue / sumValue;
+        series[i].parametricEquation = getParametricEquation(
+            series[i].pieData.startRatio,
+            series[i].pieData.endRatio,
+            false,
+            false,
+            k,
+            series[i].pieData.value
+        );
+        startValue = endValue;
+        let bfb = formatFloat(series[i].pieData.value / sumValue, 4);
+        legendData.push({
+            name: series[i].name,
+            value: bfb,
+        });
+        legendBfb.push({
+            name: series[i].name,
+            value: bfb,
+        });
+    }
+    let boxHeight = getHeight3D(series, 30); //通过传参设定3d饼/环的高度，26代表26px
+    // 准备待返回的配置项，把准备好的 legendData、series 传入。
+    let option = {
+        legend: {
+            data: legendData,
+            orient: 'vertical',
+            right: '12%',
+            top: '42%',
+            itemGap: 10,
+            textStyle: {
+                color: '#A1E2FF',
+            },
+            show: true,
+            formatter: function (param) {
+                let item = legendBfb.filter((item) => item.name == param)[0];
+                let bfs = formatFloat(item.value * 100, 2) + '%';
+                return `${item.name}  ${bfs}`;
+            },
+        },
+        labelLine: {
+            show: true,
+            lineStyle: {
+                color: '#7BC0CB',
+            },
+        },
+        // label: {
+        //     show: true,
+        //     position: 'inner',
+        //     rich: {
+        //         a: {
+        //             color: 'red',
+        //             fontSize: 12,
+        //             lineHeight: 20,
+        //         },
+        //         c: {
+        //             fontSize: 16,
+        //         },
+        //     },
+        //     formatter: '{b|{b} \n}{c|{c}}{b|  亩}',
+        // },
+        tooltip: {
+            formatter: (params) => {
+                if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
+                    let bfb = (
+                        (option.series[params.seriesIndex].pieData.endRatio - option.series[params.seriesIndex].pieData.startRatio) *
+                        100
+                    ).toFixed(2);
+                    return (
+                        `${params.seriesName}<br/>` +
+                        `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+                        `${bfb}%`
+                    );
+                }
+            },
+        },
+        xAxis3D: {
+            min: -1,
+            max: 1,
+        },
+        yAxis3D: {
+            min: -1,
+            max: 1,
+        },
+        zAxis3D: {
+            min: -1,
+            max: 3.5,
+        },
+        grid3D: {
+            show: false,
+            boxHeight: boxHeight, //圆环的高度
+            viewControl: {
+                //3d效果可以放大、旋转等，请自己去查看官方配置
+                alpha: 40, //角度
+                distance: 270, //调整视角到主体的距离，类似调整zoom
+                rotateSensitivity: 0, //设置为0无法旋转
+                zoomSensitivity: 0, //设置为0无法缩放
+                panSensitivity: 0, //设置为0无法平移
+                autoRotate: false, //自动旋转
+            },
+        },
+        series: series,
+    };
+    return option;
+}
+
+//获取3d丙图的最高扇区的高度
+function getHeight3D(series, height) {
+    series.sort((a, b) => {
+        return b.pieData.value - a.pieData.value;
+    });
+    return (height * 25) / series[0].pieData.value;
+}
+
+// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
+function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
+    // 计算
+    let midRatio = (startRatio + endRatio) / 2;
+    let startRadian = startRatio * Math.PI * 2;
+    let endRadian = endRatio * Math.PI * 2;
+    let midRadian = midRatio * Math.PI * 2;
+    // 如果只有一个扇形，则不实现选中效果。
+    if (startRatio === 0 && endRatio === 1) {
+        isSelected = false;
+    }
+    // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+    k = typeof k !== 'undefined' ? k : 1 / 3;
+    // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+    let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+    let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+    // 计算高亮效果的放大比例（未高亮，则比例为 1）
+    let hoverRate = isHovered ? 1.03 : 1;
+    // 返回曲面参数方程
+    return {
+        u: {
+            min: -Math.PI,
+            max: Math.PI * 3,
+            step: Math.PI / 32,
+        },
+        v: {
+            min: 0,
+            max: Math.PI * 2,
+            step: Math.PI / 20,
+        },
+        x: function (u, v) {
+            if (u < startRadian) {
+                return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
+            }
+            if (u > endRadian) {
+                return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
+            }
+            return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        y: function (u, v) {
+            if (u < startRadian) {
+                return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
+            }
+            if (u > endRadian) {
+                return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
+            }
+            return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+        },
+        z: function (u, v) {
+            if (u < -Math.PI * 0.5) {
+                return Math.sin(u);
+            }
+            if (u > Math.PI * 2.5) {
+                return Math.sin(u) * h * 0.1;
+            }
+            return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
+        },
+    };
+}
+
+function formatFloat(num, n) {
+    let f = parseFloat(num);
+    if (isNaN(f)) {
+        return false;
+    }
+    f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n); // n 幂
+    let s = f.toString();
+    let rs = s.indexOf('.');
+    //判定如果是整数，增加小数点再补0
+    if (rs < 0) {
+        rs = s.length;
+        s += '.';
+    }
+    while (s.length <= rs + n) {
+        s += '0';
+    }
+    return s;
+}
+
+export function bindListen(myChart, option) {
+    // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
+    let selectedIndex = '';
+    let hoveredIndex = '';
+    // 监听点击事件，实现选中效果（单选）
+    // myChart.on('click', function (params) {
+    //     // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
+    //     let isSelected = !option.series[params.seriesIndex].pieStatus.selected;
+    //     let isHovered = option.series[params.seriesIndex].pieStatus.hovered;
+    //     let k = option.series[params.seriesIndex].pieStatus.k;
+    //     let startRatio = option.series[params.seriesIndex].pieData.startRatio;
+    //     let endRatio = option.series[params.seriesIndex].pieData.endRatio;
+    //     // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
+    //     if (selectedIndex !== '' && selectedIndex !== params.seriesIndex) {
+    //         option.series[selectedIndex].parametricEquation = getParametricEquation(
+    //             option.series[selectedIndex].pieData.startRatio,
+    //             option.series[selectedIndex].pieData.endRatio,
+    //             false,
+    //             false,
+    //             k,
+    //             option.series[selectedIndex].pieData.value
+    //         );
+    //         option.series[selectedIndex].pieStatus.selected = false;
+    //     }
+    //     // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
+    //     option.series[params.seriesIndex].parametricEquation = getParametricEquation(
+    //         startRatio,
+    //         endRatio,
+    //         isSelected,
+    //         isHovered,
+    //         k,
+    //         option.series[params.seriesIndex].pieData.value
+    //     );
+    //     option.series[params.seriesIndex].pieStatus.selected = isSelected;
+    //     // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
+    //     isSelected ? (selectedIndex = params.seriesIndex) : null;
+    //     // 使用更新后的 option，渲染图表
+    //     myChart.setOption(option);
+    // });
+    // 监听 mouseover，近似实现高亮（放大）效果
+    myChart.on('mouseover', function (params) {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
+        if (hoveredIndex === params.seriesIndex) {
+            return;
+            // 否则进行高亮及必要的取消高亮操作
+        } else {
+            // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
+            if (hoveredIndex !== '') {
+                // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
+                isSelected = option.series[hoveredIndex].pieStatus.selected;
+                isHovered = false;
+                startRatio = option.series[hoveredIndex].pieData.startRatio;
+                endRatio = option.series[hoveredIndex].pieData.endRatio;
+                k = option.series[hoveredIndex].pieStatus.k;
+                // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+                option.series[hoveredIndex].parametricEquation = getParametricEquation(
+                    startRatio,
+                    endRatio,
+                    isSelected,
+                    isHovered,
+                    k,
+                    option.series[hoveredIndex].pieData.value
+                );
+                option.series[hoveredIndex].pieStatus.hovered = isHovered;
+                // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+                hoveredIndex = '';
+            }
+            // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
+            if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
+                // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+                isSelected = option.series[params.seriesIndex].pieStatus.selected;
+                isHovered = true;
+                startRatio = option.series[params.seriesIndex].pieData.startRatio;
+                endRatio = option.series[params.seriesIndex].pieData.endRatio;
+                k = option.series[params.seriesIndex].pieStatus.k;
+                // 对当前点击的扇形，执行高亮操作（对 option 更新）
+                option.series[params.seriesIndex].parametricEquation = getParametricEquation(
+                    startRatio,
+                    endRatio,
+                    isSelected,
+                    isHovered,
+                    k,
+                    option.series[params.seriesIndex].pieData.value + 5
+                );
+                option.series[params.seriesIndex].pieStatus.hovered = isHovered;
+                // 记录上次高亮的扇形对应的系列号 seriesIndex
+                hoveredIndex = params.seriesIndex;
+            }
+            // 使用更新后的 option，渲染图表
+            myChart.setOption(option);
+        }
+    });
+    // 修正取消高亮失败的 bug
+    myChart.on('globalout', function () {
+        // 准备重新渲染扇形所需的参数
+        let isSelected;
+        let isHovered;
+        let startRatio;
+        let endRatio;
+        let k;
+        if (hoveredIndex !== '') {
+            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
+            isSelected = option.series[hoveredIndex].pieStatus.selected;
+            isHovered = false;
+            k = option.series[hoveredIndex].pieStatus.k;
+            startRatio = option.series[hoveredIndex].pieData.startRatio;
+            endRatio = option.series[hoveredIndex].pieData.endRatio;
+            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
+            option.series[hoveredIndex].parametricEquation = getParametricEquation(
+                startRatio,
+                endRatio,
+                isSelected,
+                isHovered,
+                k,
+                option.series[hoveredIndex].pieData.value
+            );
+            option.series[hoveredIndex].pieStatus.hovered = isHovered;
+            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
+            hoveredIndex = '';
+        }
+        // 使用更新后的 option，渲染图表
+        myChart.setOption(option);
+    });
+}
@@ -0,0 +1,44 @@
+export const getOption = (dx: any, dy: any) => {
+    return {
+        grid: {
+            left: '60',
+        },
+        xAxis: {
+            axisTick: {
+                show: false,
+                lineStyle: {
+                    color: '#000000',
+                },
+            },
+            type: 'category',
+            data: dx,
+        },
+        yAxis: {
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    color: 'red',
+                    width: 1,
+                    type: 'soild',
+                },
+            },
+            interval: 25, // 步长
+            min: 0, // 起始 - 设置y轴刻度的最小值
+            max: 100, // 终止 - 设置y轴刻度的最大值
+            type: 'value',
+            axisLabel: {
+                color: '#ffffff',
+                formatter: function (value, index) {
+                    return value + (index === 0 ? '' : '%');
+                },
+            },
+        },
+        series: [
+            {
+                data: dy,
+                type: 'bar',
+                barWidth: 10,
+            },
+        ],
+    };
+};
@@ -0,0 +1,238 @@
+<template>
+    <div class="qh-outer-d">
+        <div class="qh-title-d">
+            <div>
+                <div>
+                    {{ dateInfo?.day }}
+                </div>
+                <div>
+                    {{ dateInfo?.times }}
+                </div>
+            </div>
+            <div> 青海油田员工健康服务数据看板 </div>
+            <div>
+                {{ rightDate }}
+            </div>
+        </div>
+        <div class="qh-body-d">
+            <div class="qh-body-d-left">
+                <one-left :title="titleInfo?.oneLeft" />
+                <two-left :title="titleInfo?.twoLeft" />
+                <three-left :title="titleInfo?.threeLeft" />
+            </div>
+            <div class="qh-body-d-middle">
+                <div>
+                    <div>
+                        <div class="people-num">930</div>
+                        <div class="people-num-des">累计咨询总人数（人）</div>
+                    </div>
+                    <div>
+                        <div class="people-num">265</div>
+                        <div class="people-num-des">累计应急总人数（人）</div>
+                    </div>
+                </div>
+                <middle-d />
+            </div>
+            <div class="qh-body-d-right">
+                <one-right :title="titleInfo?.oneRight" />
+                <two-right :title="titleInfo?.twoRight" />
+                <three-right :title="titleInfo?.threeRight" />
+            </div>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+    import dayjs from 'dayjs';
+    import { onMounted, ref, watch, onBeforeUnmount } from 'vue';
+    import OneLeft from '/@/views/qh/components/oneLeft.vue';
+    import TwoLeft from '/@/views/qh/components/twoLeft.vue';
+    import ThreeLeft from '/@/views/qh/components/threeLeft.vue';
+    import OneRight from '/@/views/qh/components/oneRight.vue';
+    import TwoRight from '/@/views/qh/components/twoRight.vue';
+    import ThreeRight from '/@/views/qh/components/threeRight.vue';
+    import MiddleD from '/@/views/qh/components/middleD.vue';
+
+    const titleInfo = ref({
+        oneLeft: '最新咨询记录',
+        twoLeft: '就医科室占比',
+        threeLeft: '最新咨询记录',
+        oneRight: '最新咨询记录',
+        twoRight: '最新咨询记录',
+        threeRight: '最新咨询记录',
+    });
+    const dateInfo = ref<object>({});
+    const rightDate = ref<string>('');
+    const qhInterval = ref<any>();
+
+    onMounted(() => {
+        getTime();
+        qhInterval.value = setInterval(() => {
+            getTime();
+        }, 1000);
+        rightDate.value = '累计运行时间：' + dayjs().diff(dayjs('2000-01-01'), 'days') + ' 天';
+    });
+    onBeforeUnmount(() => {
+        if (qhInterval.value) clearInterval(qhInterval.value);
+    });
+
+    const getTime = () => {
+        dateInfo.value = {
+            day: dayjs().format('YYYY年MM月DD日'),
+            times: dayjs().format('HH:mm:ss'),
+        };
+    };
+
+    watch(
+        () => dateInfo.value.day,
+        () => {
+            rightDate.value = '累计运行时间：' + dayjs().diff(dayjs('2000-01-01'), 'days') + ' 天';
+        }
+    );
+</script>
+<style scoped lang="less">
+    @import './style/index.less';
+    .qh-outer-d {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        padding: 0 20px;
+        background: #010b15;
+
+        .qh-title-d {
+            color: #ffffff;
+            height: 80px;
+            display: flex;
+            align-items: center;
+            padding: 0 30px;
+
+            > div {
+                flex: 1;
+
+                &:nth-child(1),
+                &:nth-child(3) {
+                    font-size: 27px;
+                }
+
+                &:nth-child(2) {
+                    font-size: 40px;
+                    text-align: center;
+                }
+
+                &:nth-child(1) {
+                    display: flex;
+                    justify-content: flex-start;
+
+                    > div {
+                        &:nth-child(1) {
+                            margin-right: 10px;
+                        }
+                        &:nth-child(2) {
+                            padding: 0 15px;
+                            position: relative;
+                            &:before {
+                                position: absolute;
+                                height: 60%;
+                                top: 20%;
+                                left: 0;
+                                width: 1px;
+                                background: #000000;
+                                content: '';
+                            }
+                            &:after {
+                                position: absolute;
+                                height: 60%;
+                                top: 20%;
+                                right: 0;
+                                width: 1px;
+                                background: #000000;
+                                content: '';
+                            }
+                        }
+                    }
+                }
+
+                &:nth-child(3) {
+                    text-align: right;
+                }
+            }
+        }
+
+        .qh-body-d {
+            flex: 1;
+            display: flex;
+            padding-bottom: 10px;
+
+            > div {
+                &:nth-child(1),
+                &:nth-child(3) {
+                    width: 25%;
+                }
+                &:nth-child(2) {
+                    width: 50%;
+                }
+            }
+        }
+
+        .qh-body-d-left,
+        .qh-body-d-right {
+            display: flex;
+            flex-direction: column;
+            > div {
+                flex: 1;
+                padding: 0 0 0;
+            }
+        }
+
+        .qh-body-d-left,
+        .qh-body-d-right {
+            > div {
+                padding-bottom: 25px !important;
+            }
+        }
+
+        .qh-body-d-middle {
+            padding: 0 20px;
+            display: flex;
+            flex-direction: column;
+            position: relative;
+
+            .people-num {
+                font-size: 30px;
+                font-weight: bold;
+            }
+            .people-num-des {
+                padding-top: 5px;
+                font-size: 20px;
+            }
+
+            > div {
+                &:nth-child(1) {
+                    position: absolute;
+                    width: 100%;
+                    left: 0;
+                    top: 100px;
+                    display: flex;
+                    justify-content: center;
+                    > div {
+                        color: #ffffff;
+                        font-size: 18px;
+                        text-align: center;
+                        padding: 20px 30px;
+                        background: red;
+
+                        &:nth-child(1) {
+                            margin: 50px 100px 0 0;
+                        }
+                        &:nth-child(2) {
+                            margin: 50px 0 0 100px;
+                        }
+                    }
+                }
+                &:nth-child(2) {
+                    flex: 1;
+                }
+            }
+        }
+    }
+</style>
@@ -0,0 +1,21 @@
+.qh-item-d {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    .qh-son-title {
+        font-size: 30px;
+        padding: 10px;
+        color: #ffffff;
+    }
+
+    > div {
+        &:nth-child(1) {
+            background: linear-gradient(to right, #0b3d50 0% , #021a24 100% );
+        }
+        &:nth-child(2) {
+            background: #071d34;
+            flex: 1
+        }
+    }
+}
@@ -191,11 +191,13 @@
                try {
                    let { code, result, message: msg } = await getAuth();
                    let centerInfo = {};
+                    if(route.path !== PageEnum.Q_SCREEN_LOGIN) {
                        try {
                            let { result } = await getEmergencyCenterApi();
                            centerInfo = result;
                            userStore.setCenterInfo(centerInfo);
                        } catch (e) {}
+                    }

                    let goPath = PageEnum.BASE_HOME;
                    if (code == 200) {
@@ -204,19 +206,23 @@
                        let flag3 =
                            result?.codeList?.find((item: any) => ['emergency:screen:show:centralScreen'].includes(item)) ||
                            userInfo?.roleCodes.split(',').findIndex((item: any) => item === 'large_screen' || item === 'large_screen_admin') > -1;
+                        let flag4 = result?.codeList?.find((item: any) => ['emergency:screen:show:qinghai'].includes(item));
                        userStore.setFlag1(flag1 || '');
                        userStore.setFlag2(flag2 || '');
                        userStore.setFlag3(flag3 || '');
+                        userStore.setFlag4(flag4 || '');
                        if (!flag1 && !flag2 && !flag3) {
                            userStore.setToken('');
                            userStore.setUserInfo({});
                            userStore.setCenterInfo({});
                            return message.warn('您没有权限访问大屏，请联系管理员！');
                        }
-                        //1如果有权限
+                        //1如果有权限   2025-06-16补充判断，如果登陆路由为qLogin 青海登陆，则不走原有逻辑
                        //1.2若果是有两种权限
                        // debugger;
-                        if (flag1 && flag2) {
+                        if(route.path === PageEnum.Q_SCREEN_LOGIN && flag4) {
+                            goPath = PageEnum.Q_SCREEN;
+                        } else if (flag1 && flag2) {
                            // 1.2.1 如果是登录地址是西安
                            // 1.2.2 如果是登录地址是银川
                            if (route.path == PageEnum.BASE_LOGIN_YINCHUAN) {
Author	SHA1	Message	Date
xf	8b9c3abf77	update: 初始化	2025-06-30 11:09:27 +08:00
weixin	2db1e6d33c	update 1.青海大屏	2025-06-19 16:15:43 +08:00
weixin	25b8acdda6	update 1.修改websocket，多窗口可以同时弹窗	2025-05-23 14:16:01 +08:00
weixin	736ee91e93	update 1.手表监测弹窗上报时间/发生时间修改	2025-05-08 09:46:48 +08:00
weixin	fd02cf131a	update 1.修改手表监测来通知，更新页面数据	2025-04-27 15:24:55 +08:00
weixin	48a137133d	update 1.右上角手表应急添加日月周累计（庆阳大屏）	2025-04-27 09:37:20 +08:00
weixin	5c3bf4a7ed	update	2025-04-21 10:41:59 +08:00
weixin	35c5625e1b	update 1.添加庆阳大屏柱状图	2025-04-21 10:24:47 +08:00
weixin	8dc44b465b	update 1.修改查看健康终端报警，不需要时间筛选	2025-04-03 12:36:29 +08:00
weixin	58d3b5a933	update 1.修改table模块，改回原有逻辑	2025-03-25 15:34:10 +08:00