update

.env.development

@@ -1,2 +1,9 @@
-// 王昊地址
-VITE_GLOB_API_URL=http://192.168.1.16
+# 王昊地址
+#VITE_GLOB_API_URL=http://192.168.1.3
+#开发环境
+VITE_GLOB_API_URL=http://cqyt.dev.yg.dt.io
+
+#应急求助-websocket
+VITE_GLOB_API_YIN_JI=ws://cqyt.dev.yg.dt.io/health-watch/websocket/watchMonitor
+#健康监测工具报警-websocket
+VITE_GLOB_API_JIAN_CE=ws://cqyt.dev.yg.dt.io/health-emergency/websocket/emergency

.env.production

@@ -1,3 +1,7 @@
 
-
-VITE_GLOB_API_URL=http://cqyt.dev.yg.dt.io
+#后台地址
+VITE_GLOB_API_URL=https://api.cqygjk.com
+#应急求助-websocket
+VITE_GLOB_API_YIN_JI=ws://api.cqygjk.com/health-watch/websocket/watchMonitor
+#健康监测工具报警-websocket
+VITE_GLOB_API_JIAN_CE=ws://api.cqygjk.com/health-emergency/websocket/emergency

.eslintignore

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

env.test

@@ -0,0 +1,7 @@
+#测试环境
+VITE_GLOB_API_URL=http://cqyt.test.yg.dt.io
+
+#应急求助-websocket
+VITE_GLOB_API_YIN_JI=ws://192.168.1.3:7098/websocket/watchMonitor
+#健康监测工具报警-websocket
+VITE_GLOB_API_JIAN_CE=ws://cqyt.test.yg.dt.io/health-emergency/websocket/emergency

package.json

@@ -4,20 +4,23 @@
   "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",
+    "jsencrypt": "^3.3.2",
+    "lodash-es": "^4.17.21",
     "mitt": "^3.0.1",
     "path": "^0.12.7",
+    "pinia": "^2.1.7",
     "prettier": "^3.1.0",
     "qs": "^6.11.2",
-    "vue": "^3.3.4",
     "vue-router": "^4.2.5",
     "vue3-seamless-scroll": "^2.0.1"
   },

src/App.vue

@@ -1,6 +1,15 @@
 <template>
-    <router-view />
+    <a-config-provider :locale="locle">
+        <router-view />
+    </a-config-provider>
 </template>
-<script setup lang="ts"></script>
+<script setup lang="ts">
+    import zhCN from 'ant-design-vue/es/locale/zh_CN';
+    import dayjs from 'dayjs';
+    import 'dayjs/locale/zh-cn';
+
+    dayjs.locale('zh-cn');
+    const locle = zhCN;
+</script>
 <style lang="less" src="./assets/less/index.less"></style>
-<style lang="less" scoped></style>
+<style lang="less" scoped></style>

src/api/checkStatus.ts

@@ -0,0 +1,61 @@
+import { useMessage } from '/@/hooks/web/useMessage.ts';
+import { t } from '/@/hooks/locales/useLocales.ts';
+import { useUserStore } from '/@/store/modules/user.ts';
+
+const { createMessage } = useMessage();
+const error = createMessage.error!;
+const userStore = useUserStore();
+
+export function checkStatus(status: number, msg: string, errorMessageMode = 'message') {
+    let errMessage = '';
+    switch (status) {
+        case 400:
+            errMessage = `${msg}`;
+            break;
+        // 401: Not logged in
+        // Jump to the login page if not logged in, and carry the path of the current page
+        // Return to the current page after successful login. This step needs to be operated on the login page.
+        case 401:
+            userStore.setToken(undefined);
+            errMessage = msg || t('api.errMsg401');
+            userStore.logout(true);
+            break;
+        case 403:
+            errMessage = t('api.errMsg403');
+            break;
+        // 404请求不存在
+        case 404:
+            errMessage = t('api.errMsg404');
+            break;
+        case 405:
+            errMessage = t('api.errMsg405');
+            break;
+        case 408:
+            errMessage = t('api.errMsg408');
+            break;
+        case 500:
+            errMessage = t('api.errMsg500');
+            break;
+        case 501:
+            errMessage = t('api.errMsg501');
+            break;
+        case 502:
+            errMessage = t('api.errMsg502');
+            break;
+        case 503:
+            errMessage = t('api.errMsg503');
+            break;
+        case 504:
+            errMessage = t('api.errMsg504');
+            break;
+        case 505:
+            errMessage = t('api.errMsg505');
+            break;
+        default:
+    }
+    if (errMessage) {
+        if (errMessage == 'message') {
+            error({ content: errMessage, key: `global_error_message_status_${status}` });
+        }
+    }
+}

src/api/request.ts

@@ -1,24 +1,34 @@
 import axios from 'axios';
 import { getAppEnvConfig } from '../utils/env.ts';
+import { useUserStore } from '/@/store/modules/user.ts';
+import { getAuthCache } from '/@/utils/auth.ts';
+import { TOKEN_KEY } from '/@/enum/cacheEnum.ts';
 
 const { VITE_GLOB_API_URL } = getAppEnvConfig();
-let token =
-    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6ImFkbWluIiwiaWRlbnRpZmllciI6ImU5Y2EyM2Q2OGQ4ODRkNGViYjE5ZDA3ODg5NzI3ZGFlIiwiZXhwIjoxNzAyMDA1MDQ4fQ.M1Xlecj3eUOgZUSofOlyBMoxJ5F01KH-tgJxaV2Femc\n';
+const userStore = useUserStore();
+const { token } = userStore;
 const service = axios.create({
     baseURL: VITE_GLOB_API_URL,
     timeout: 50000,
     headers: {
         // 设置后端需要的传参类型
         'Content-Type': 'application/json;charset=UTF-8',
-        'X-Access-Token': token,
+        'X-Access-Token': token || getAuthCache(TOKEN_KEY),
+    },
+    /**
+     * @description: 响应错误处理
+     */
+    responseInterceptorsCatch(error: any) {
+        const { response, code, message, config } = error || {};
+        const errorMessageMode = config?.requestOptions?.errorMessageMode || 'none';
     },
 });
-export const get = (url, params) => {
+export const get = (url, params = {}) => {
     return new Promise((resolve, reject) => {
         service
             .get(url, { params: params })
             .then((res) => {
-                if (res.data.code === 200) {
+                if (res.data.code === 200 || res.data.code === 0) {
                     resolve(res.data);
                 } else {
                     reject(res.data);

src/api/url.ts

@@ -1,3 +0,0 @@
-const requestURL = "http://192.168.1.16";
-
-export default requestURL

src/api/user.ts

@@ -0,0 +1,32 @@
+import { get, post } from '/@/api/request.ts';
+
+enum Api {
+    getInputCode = '/sys/randomImage',
+    Login = '/sys/login',
+    Logout = '/sys/logout',
+    GetUserInfo = '/sys/user/getUserInfo',
+}
+
+export const getCodeInfo = (params: any) => get(Api.getInputCode + `/${params}`);
+
+export function loginApi(params: any) {
+    return post(Api.Login, params);
+}
+
+/**
+ * @description: getUserInfo
+ */
+export function getUserInfo() {
+    return get(Api.GetUserInfo, {}).catch((e) => {
+        if (e && (e.message.includes('timeout') || e.message.includes('401'))) {
+            //接口不通时跳转到登录界面
+            // const userStore = useUserStoreWithOut();
+            // userStore.setToken('');
+            // router.push(PageEnum.BASE_LOGIN);
+        }
+    });
+}
+
+export function doLogout() {
+    return get(Api.Logout);
+}

src/assets/less/amap-item.less

@@ -1,59 +1,64 @@
 //高德信息弹窗
 .amap-info-contentContainer {
-  .amap-content-body {
-    background: #00152B;
-    border: 1px solid #129BFF;
+    .amap-content-body {
+        background: #00152B;
+        border: 1px solid #129BFF;
 
-    .amap-lib-infowindow {
-      background: #00152B;
+        .amap-lib-infowindow {
+            background: #00152B;
 
-      .amap-lib-infowindow-title {
-        color: #fff;
-        border-bottom: 1px solid #129BFF;
-        padding: 4px 0;
-      }
+            .amap-lib-infowindow-title {
+                color: #fff;
+                border-bottom: 1px solid #129BFF;
+                padding: 4px 0;
+            }
 
-      .amap-lib-infowindow-content {
-        color: #fff;
-        padding: 4px 0;
-      }
+            .amap-lib-infowindow-content {
+                color: #fff;
+                padding: 4px 0;
+            }
+        }
+    }
+
+    .amap-combo-close {
+        top: 5px;
+        right: 7px;
     }
-  }
 }
 
 
 /*地图元素样式---start*/
 //marker
 .amap-marker-label {
-  padding: 0;
+    padding: 0;
 }
 
 .alarm-content {
-  background-color: #263d5e;
-  color: red;
-  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%;
+    background-color: #263d5e;
     color: #fff;
-    text-align: center;
-    line-height: 15px;
-    box-shadow: -1px 1px 1px rgba(10, 10, 10, 0.2);
-  }
+    font-size: 14px;
+    padding: 7px 10px;
+    border: 1px solid #1b7ef2;
+    position: relative;
 
-  .close-btn:hover {
-    background: #666;
-  }
+    .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;
+        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,68 +1,154 @@
 @import "./amap-item";
 
 .type-time {
-  padding-right: 4%;
-  padding-top: 3%;
-  font-size: 16px;
-  display: flex;
-  justify-content: right;
+    padding-right: 4%;
+    padding-top: 3%;
+    font-size: 16px;
+    display: flex;
+    justify-content: right;
 
-  span {
-    padding: 0 2%;
-    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%;
+    span {
+        padding: 0 2%;
+        cursor: pointer;
     }
-  }
 
-  .unSelect {
-    color: #a3a4a4;
-  }
+    .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 {
+        color: #a3a4a4;
+    }
 }
 
 *::-webkit-scrollbar {
-  width: 12px;
-  height: 12px;
+    width: 12px;
+    height: 12px;
 }
 
 *::-webkit-scrollbar-button {
-  width: 0;
-  height: 0;
-  display: none;
+    width: 0;
+    height: 0;
+    display: none;
 }
 
 *::-webkit-scrollbar-corner {
-  background-color: transparent;
+    background-color: transparent;
 }
 
 *::-webkit-scrollbar-thumb {
-  border: 4px solid rgba(0, 0, 0, 0);
-  height: 6px;
-  border-radius: 25px;
-  background-clip: padding-box;
-  background-color: rgba(0, 0, 0, 0.3);
+    border: 4px solid rgba(0, 0, 0, 0);
+    height: 6px;
+    border-radius: 25px;
+    background-clip: padding-box;
+    background-color: rgba(0, 0, 0, 0.3);
+}
+
+.nowrap {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.ant-modal-mask {
+    background-color: rgba(0, 0, 0, 0.65) !important;
+}
+
+// 下拉框样式-start
+.ant-select-dropdown {
+    background-color: #00152b !important;
+    border-right: 1px solid #1b7ef2;
+    border-left: 1px solid #1b7ef2;
+    border-bottom: 1px solid #1b7ef2;
+}
+
+.ant-select-item {
+    color: #1b7ef2 !important;
+}
+
+//框背景色
+.ant-select:not(.ant-select-customize-input) .ant-select-selector {
+    color: #1b7ef2 !important;
+    background-color: transparent !important;
+    border: 1px solid #1b7ef2 !important;
+}
+
+.ant-select-item-option-selected {
+    color: #ffffff !important;
+}
+
+// 选中字体颜色
+.ant-select-selection-item {
+    //color: #1b7ef2 !important;
+    color: #fff;
+}
+
+.ant-select-item-option-active {
+    background-color: transparent !important;
+}
+
+.ant-select-item-option-active:hover {
+    background-color: #002e64 !important;
+}
+
+// 箭头颜色
+.ant-select-arrow {
+    color: #1b7ef2 !important;
+}
+
+.ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
+    background-color: #002e64 !important;
+}
+
+// 下拉框样式-end
+
+// 级联选择器样式-start
+.ant-cascader-menu-item {
+    color: #1b7ef2 !important;
+}
+
+.ant-cascader-menu-item:hover {
+    background-color: #002e64 !important;
+}
+
+.ant-cascader-menu-item-active {
+    color: #fff !important;
+    background-color: #002e64 !important;
+}
+
+.ant-cascader-menu-item-expand .ant-cascader-menu-item-expand-icon, .ant-cascader-menu-item-loading-icon {
+    color: #1b7ef2 !important;
+}
+
+// 级联选择器样式-end
+.ant-empty-description {
+    color: #fff;
+}
+
+//表格
+.ant-table-tbody > tr.ant-table-placeholder:hover > td {
+    background: transparent;
 }
 
 //直升机
 .helicopter {
-  width: 60px;
-  height: 37px;
-  background: url("../img/helicopter.png") no-repeat;
-  background-size: 100% 100%;
-  margin-bottom: 4px;
+    width: 60px;
+    height: 37px;
+    background: url("../img/helicopter.png") no-repeat;
+    background-size: 100% 100%;
+    margin-bottom: 4px;
 }
 

src/assets/loginmini/style/base.less

@@ -0,0 +1,365 @@
+::-webkit-input-placeholder {
+    /* WebKit browsers */
+    color: #868686;
+    font-size: 15px;
+}
+
+::-moz-placeholder {
+    /* Mozilla Firefox 19+ */
+    color: #868686;
+    font-size: 15px;
+}
+
+:-ms-input-placeholder {
+    /* Internet Explorer 10+ */
+    color: #868686;
+    font-size: 15px;
+}
+
+input:-webkit-autofill {
+    transition: background-color 5000s ease-in-out 0s;
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
+html,
+body {
+    color: #333;
+    margin: 0;
+    height: 100%;
+    font-family: 'Myriad Set Pro', 'Helvetica Neue', Helvetica, Arial, Verdana, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-weight: normal;
+}
+
+* {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+a {
+    text-decoration: none;
+    color: #000;
+}
+
+a,
+label,
+button,
+input,
+select {
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+img {
+    max-width: 100%;
+    height: auto;
+    display: block;
+    border: 0;
+}
+
+body {
+    background: #e3f0ff;
+    color: #666;
+}
+
+html,
+body,
+div,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+button,
+fieldset,
+form,
+input,
+legend,
+textarea,
+th,
+td {
+    margin: 0;
+    padding: 0;
+}
+
+a {
+    text-decoration: none;
+    color: #08acee;
+}
+
+button {
+    outline: 0;
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+    margin: 0;
+    font: inherit;
+    color: inherit;
+    outline: none;
+}
+
+li {
+    list-style: none;
+}
+
+a {
+    color: #666;
+}
+
+.clearfix::after {
+    clear: both;
+    content: '.';
+    display: block;
+    height: 0;
+    visibility: hidden;
+}
+
+.clearfix {
+}
+
+.divHeight {
+    width: 100%;
+    height: 10px;
+    background: #f5f5f5;
+    position: relative;
+    overflow: hidden;
+}
+
+.r-line {
+    position: relative;
+}
+
+.r-line:after {
+    content: '';
+    position: absolute;
+    z-index: 0;
+    top: 0;
+    right: 0;
+    height: 100%;
+    border-right: 1px solid #d9d9d9;
+    -webkit-transform: scaleX(0.5);
+    transform: scaleX(0.5);
+    -webkit-transform-origin: 100% 0;
+    transform-origin: 100% 0;
+}
+
+.b-line {
+    position: relative;
+}
+
+.b-line:after {
+    content: '';
+    position: absolute;
+    z-index: 2;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 1px;
+    border-bottom: 1px solid #dedede;
+    -webkit-transform: scaleY(0.5);
+    transform: scaleY(0.5);
+    -webkit-transform-origin: 0 100%;
+    transform-origin: 0 100%;
+}
+
+.aui-arrow {
+    position: relative;
+    padding-right: 0.8rem;
+}
+
+.aui-arrow span {
+    font-size: 0.8rem;
+    color: #9b9b9b;
+}
+
+.aui-arrow:after {
+    content: ' ';
+    display: inline-block;
+    height: 6px;
+    width: 6px;
+    border-width: 2px 2px 0 0;
+    border-color: #848484;
+    border-style: solid;
+    -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
+    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
+    position: relative;
+    position: absolute;
+    top: 50%;
+    margin-top: -4px;
+    right: 2px;
+    border-radius: 1px;
+}
+
+.aui-flex {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+    align-items: center;
+    position: relative;
+}
+
+.aui-flex-box {
+    -webkit-box-flex: 1;
+    -webkit-flex: 1;
+    flex: 1;
+    min-width: 0;
+    font-size: 14px;
+    color: #333;
+}
+
+/* 必要布局样式css */
+.aui-flexView {
+    width: 100%;
+    height: 100%;
+    margin: 0 auto;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -webkit-flex-direction: column;
+    -ms-flex-direction: column;
+    flex-direction: column;
+}
+
+.aui-scrollView {
+    width: 100%;
+    height: 100%;
+    -webkit-box-flex: 1;
+    -webkit-flex: 1;
+    -ms-flex: 1;
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    -webkit-overflow-scrolling: touch;
+    position: relative;
+    padding-bottom: 53px;
+}
+
+.aui-navBar {
+    height: 44px;
+    position: relative;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    z-index: 102;
+    background-color: #5064eb;
+}
+
+.aui-navBar-item {
+    height: 44px;
+    min-width: 15%;
+    -webkit-box-flex: 0;
+    -webkit-flex: 0 0 15%;
+    -ms-flex: 0 0 15%;
+    flex: 0 0 15%;
+    padding: 0 0.9rem;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+    -ms-flex-align: center;
+    align-items: center;
+    font-size: 0.7rem;
+    white-space: nowrap;
+    overflow: hidden;
+    color: #808080;
+    position: relative;
+}
+
+.aui-navBar-item:first-child {
+    -webkit-box-ordinal-group: 2;
+    -webkit-order: 1;
+    -ms-flex-order: 1;
+    order: 1;
+    margin-right: -25%;
+    font-size: 0.9rem;
+    font-weight: bold;
+}
+
+.aui-navBar-item:last-child {
+    -webkit-box-ordinal-group: 4;
+    -webkit-order: 3;
+    -ms-flex-order: 3;
+    order: 3;
+    -webkit-box-pack: end;
+    -webkit-justify-content: flex-end;
+    -ms-flex-pack: end;
+    justify-content: flex-end;
+}
+
+.aui-center {
+    -webkit-box-ordinal-group: 3;
+    -webkit-order: 2;
+    -ms-flex-order: 2;
+    order: 2;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: center;
+    -webkit-justify-content: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+    -ms-flex-align: center;
+    align-items: center;
+    height: 44px;
+    width: 80%;
+    margin-left: 22%;
+}
+
+.aui-center-title {
+    text-align: center;
+    width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    display: block;
+    text-overflow: ellipsis;
+    font-size: 0.95rem;
+    color: #fff;
+    font-weight: 500;
+}
+
+.icon {
+    width: 20px;
+    height: 20px;
+    display: block;
+    border: none;
+    float: left;
+    background-size: 20px;
+    background-repeat: no-repeat;
+    position: relative;
+}
+
+.login-background-img {
+    //background-image: url(../icon/jeecg_bg.png);
+    //background-size: cover;
+    //background-position: top center;
+    //background-repeat: no-repeat;
+}

src/assets/loginmini/style/home.less

@@ -0,0 +1,726 @@
+.aui-content {
+    //padding: 40px 60px;
+    min-height: 100vh;
+    .aui-container {
+        max-width: 1000px;
+        margin: 0 auto;
+        box-shadow: 0 4px 8px 1px rgba(0, 0, 0, 0.2);
+        border-radius: 10px;
+        position: fixed;
+        top: 50%;
+        left: 68%;
+        width: 26%;
+        height: auto;
+        -webkit-transform: translateX(-50%) translateY(-50%);
+        -moz-transform: translateX(-50%) translateY(-50%);
+        -ms-transform: translateX(-50%) translateY(-50%);
+        transform: translateX(-50%) translateY(-50%);
+        -webkit-transform: translateX(-50%) translateY(-50%);
+
+    }
+    .aui-top {
+        width: 100%;
+        height: 55vh;
+        background-color: #2a6efe;
+        .aui-title {
+            position: fixed;
+            top: 5%;
+            left: 12%;
+            font-size: 30px;
+            font-weight: 600;
+            color: #fff;
+        }
+        .aui-title-image {
+            position: fixed;
+            top: 16%;
+            left: 18%;
+            width: 30%;
+            height: 35%;
+            background: url('/@/assets/loginmini/icon/logo_title.png') no-repeat;
+            background-size: 100% 100%;
+        }
+    }
+    .remember {
+        height: 40px;
+        margin-top: 16px;
+        .aui-check {
+            margin-left: 5px;
+            color: #999999;
+            font-size: 16px;
+        }
+    }
+    .form-title {
+        font-size: 36px;
+        color: #1a1a1a;
+        text-align: center;
+    }
+    :deep(.ant-input:focus) {
+        box-shadow: none;
+    }
+
+    .aui-get-code {
+        float: right;
+        position: relative;
+        z-index: 3;
+        background: #ffffff;
+        color: #1573e9;
+        border-radius: 100px;
+        padding: 5px 16px;
+        margin: 7px;
+        border: 1px solid #1573e9;
+        top: 12px;
+    }
+
+    .aui-get-code:hover {
+        color: #1573e9;
+    }
+
+    .code-shape {
+        border-color: #dadada !important;
+        color: #aaa !important;
+    }
+
+    :deep(.jeecg-dark-switch) {
+        position: absolute;
+        margin-right: 10px;
+    }
+
+    .aui-link-login {
+        height: 48px;
+        font-size: 20px;
+        background-color: #3a6ffe;
+    }
+
+    .aui-phone-logo {
+        position: absolute;
+        margin-left: 10px;
+        width: 60px;
+        top: 2px;
+        z-index: 4;
+    }
+
+    .top-3 {
+        top: 0.45rem;
+    }
+}
+.aui-form {
+    width: 100%;
+    //background: #eee;
+    //display: -webkit-box;
+    //display: -moz-box;
+    //display: -ms-flexbox;
+    //display: -webkit-flex;
+    //display: flex;
+}
+
+.aui-image {
+    padding: 180px 80px;
+    flex-basis: 60%;
+    -webkit-flex-basis: 60%;
+    background-color: #0198cd;
+    background-image: url(../icon/jeecg_ad.png);
+    background-size: cover;
+}
+
+.aui-image-text {
+    top: 50%;
+    left: 50%;
+    width: 100%;
+}
+
+.aui-formBox {
+    flex-basis: 40%;
+    -webkit-flex-basis: 40%;
+    box-sizing: border-box;
+    padding: 30px 20px;
+    background: #fff;
+    border-radius: 10px;
+    box-shadow: 2px 9px 49px -17px rgba(0, 0, 0, 0.1);
+}
+.aui-logo {
+    width: 180px;
+    height: 80px;
+    position: absolute;
+    top: 2%;
+    left: 8%;
+    z-index: 4;
+}
+
+.aui-account-line {
+    padding-top: 20px;
+    padding-bottom: 40px;
+}
+
+.aui-code-line {
+    position: absolute;
+    right: 0;
+    top: 0;
+    border-left: 3px solid #fff;
+    height: 42px;
+    padding: 0 15px;
+    line-height: 40px;
+    font-size: 14px;
+    cursor: pointer;
+}
+
+.aui-eye {
+    position: absolute;
+    right: 20px;
+    top: 10px;
+    width: 20px;
+    cursor: pointer;
+}
+
+.aui-input-line {
+    background: #f5f5f9;
+    border-radius: 2px;
+    position: relative;
+    margin: 12px 0;
+}
+
+.aui-input-line input {
+    width: 100%;
+    padding: 12px 10px;
+    border: none;
+    color: #333333;
+    font-size: 14px;
+    background: unset;
+    padding-left: 40px;
+}
+
+.aui-input-line .icon {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+}
+
+.icon-line-user {
+    background-image: url(../icon/icon-line-user.png);
+}
+
+.icon-line-tel {
+    background-image: url(../icon/icon-line-tel.png);
+}
+
+.icon-line-msg {
+    background-image: url(../icon/icon-line-msg.png);
+}
+
+.icon-line-pad {
+    background-image: url(../icon/icon-line-pad.png);
+}
+
+.aui-forgot .aui-input-line input {
+    padding-left: 20px;
+}
+
+.aui-forgot .aui-input-line {
+    background: none;
+    border: 1px solid #dbdbdb;
+    border-radius: 2px;
+}
+
+.aui-forgot .aui-input-line:focus {
+    border-color: #1b90ff;
+}
+
+.aui-forgot .aui-input-line:hover {
+    border-color: #1b90ff;
+}
+
+.aui-forgot .aui-input-line .aui-code-line {
+    border-left: 1px solid #dbdbdb;
+    height: 40px;
+    color: #1b90ff;
+}
+
+.aui-step-box {
+    width: 100%;
+    height: auto;
+    position: relative;
+    overflow: hidden;
+    margin-top: 50px;
+    margin-bottom: 20px;
+}
+
+.aui-step-box::after {
+    position: absolute;
+    top: 20px;
+    left: 50%;
+    width: 76%;
+    margin-left: -38%;
+    height: 1px;
+    background: #bcbcbc;
+    content: '';
+}
+
+.aui-step-item {
+    width: 33.333%;
+    float: left;
+    text-align: center;
+    position: relative;
+    z-index: 2;
+}
+
+.aui-step-tags em {
+    width: 40px;
+    height: 40px;
+    border: 8px solid #fff;
+    line-height: 1.3;
+    border-radius: 100px;
+    background: #bcbcbc;
+    display: block;
+    margin: 0 auto;
+    font-style: normal;
+    color: #fff;
+    font-size: 19px;
+    font-weight: 500;
+}
+
+.aui-step-tags p {
+    font-size: 14px;
+    color: #bcbcbc;
+}
+
+.activeStep .aui-step-tags em {
+    background: #1b90ff;
+}
+
+.activeStep .aui-step-tags p {
+    color: #1b90ff;
+}
+
+.aui-success {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    height: 80px;
+    width: 100%;
+    margin-top: -40px;
+    margin-left: -50%;
+}
+
+.aui-success-icon {
+    width: 40px;
+    margin: 0 auto;
+}
+
+.aui-success h3 {
+    width: 100%;
+    text-align: center;
+    color: #515151;
+    font-size: 18px;
+    padding-top: 20px;
+}
+
+.aui-form-nav {
+    text-align: center;
+    padding-bottom: 20px;
+}
+
+.aui-form-nav .aui-flex-box {
+    color: #040404;
+    font-size: 18px;
+    font-weight: 500;
+    cursor: pointer;
+}
+
+.aui-clear-left {
+    text-align: left;
+}
+
+.aui-clear-left .activeNav::after {
+    left: 18px;
+}
+
+.activeNav {
+    position: relative;
+}
+
+.activeNav::after {
+    content: '';
+    position: absolute;
+    z-index: 0;
+    bottom: -10px;
+    left: 50%;
+    margin-left: -15px;
+    width: 30px;
+    height: 4px;
+    background: #1b90ff;
+    border-radius: 100px;
+}
+
+.phone .aui-inputClear {
+    padding-left: 0;
+}
+
+.phone .aui-inputClear input {
+    //padding-left: 1px;
+}
+
+.phone .aui-inputClear .aui-code {
+    text-align: right;
+    width: auto;
+    bottom: 10px;
+}
+
+.phone .aui-inputClear .aui-code a {
+    color: #1b90ff;
+    font-size: 14px;
+}
+
+.phoneChina {
+    position: absolute;
+    bottom: 10px;
+    left: 0;
+    font-size: 14px;
+    color: #040404;
+}
+
+.phoneChina::after {
+    position: absolute;
+    right: -25px;
+    bottom: 0;
+    content: '';
+    background-image: url(../icon/icon_dow.png);
+    background-size: 18px;
+    width: 18px;
+    height: 18px;
+}
+
+.phoneChina:before {
+    position: absolute;
+    right: -42px;
+    bottom: -15px;
+    content: ' ';
+    background: #fff;
+    width: 18px;
+    height: 18px;
+}
+
+.aui-ewm {
+    width: 280px;
+    margin: 0 auto;
+}
+
+.aui-formEwm {
+    padding: 50px 40px 55px 40px;
+}
+
+.aui-inputClear {
+    width: 100%;
+    border-bottom: 1px solid #cccccc;
+    position: relative;
+    padding-left: 20px;
+    background: #fff;
+    margin-bottom: 8px;
+    margin-top: 20px;
+}
+
+.aui-inputClear .icon {
+    position: absolute;
+    top: 10px;
+    left: 0;
+}
+
+.aui-inputClear input {
+    width: 100%;
+    padding: 10px;
+    border: none;
+    color: #333333;
+    font-size: 14px;
+    background: none;
+}
+
+.aui-code {
+    position: absolute;
+    right: 8px;
+    bottom: 0;
+    width: 115px;
+    cursor: pointer;
+}
+
+.icon-code {
+    background-image: url(../icon/icon-user.png);
+}
+
+.icon-password {
+    background-image: url(../icon/icon-password.png);
+}
+
+.icon-code {
+    background-image: url(../icon/icon-code.png);
+}
+
+.aui-inputClear:focus {
+    border-bottom: 1px solid #1b90ff;
+}
+
+.aui-inputClear:hover {
+    border-bottom: 1px solid #1b90ff;
+}
+
+.aui-choice {
+    position: relative;
+    font-size: 12px;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+    align-items: center;
+    position: relative;
+    color: #040404;
+}
+
+.aui-choice input {
+    width: 14px;
+    height: 14px;
+    cursor: pointer;
+}
+
+.aui-forget a {
+    color: #999999;
+}
+
+.aui-forget a:hover {
+    text-decoration: underline;
+}
+
+.aui-formButton {
+    margin-top: 20%;
+    margin-bottom: 2%;
+}
+
+.aui-formButton a {
+    height: 42px;
+    padding: 10px 15px;
+    font-size: 14px;
+    border-radius: 8px;
+    border-color: #67b5ff;
+    background: #1b90ff;
+    width: 100%;
+    cursor: pointer;
+    border: none;
+    color: #fff;
+    margin: 8px 0;
+    display: block;
+    text-align: center;
+}
+
+.aui-formButton a:focus {
+    opacity: 0.9;
+}
+
+.aui-formButton a:hover {
+    opacity: 0.9;
+}
+
+.aui-formButton .aui-linek-code {
+    background: #fff;
+    color: #3c3c3c;
+    border: 1px solid #dbdbdb;
+}
+
+.aui-formButton .aui-linek-code:hover {
+    color: #1b90ff;
+    border: 1px solid #1b90ff;
+}
+
+.aui-third-text {
+    font-size: 12px;
+    color: #3c3c3c;
+    margin-top: 25px;
+    margin-bottom: 25px;
+}
+
+.aui-third-text span {
+    color: #afafaf;
+    display: block;
+    width: 38%;
+    margin: 0 auto;
+    text-align: center;
+    position: relative;
+    background: #fff;
+    z-index: 100;
+    font-size: 12px;
+}
+
+.aui-third-border {
+    position: relative;
+}
+
+.aui-third-border::after {
+    content: '';
+    position: absolute;
+    z-index: 0;
+    top: 8px;
+    left: 0;
+    width: 100%;
+    height: 1px;
+    border-top: 1px solid #d9d9d9;
+    -webkit-transform: scaleY(0.5);
+    transform: scaleY(0.5);
+    -webkit-transform-origin: 0 100%;
+    transform-origin: 0 100%;
+}
+
+.aui-third-login {
+    width: 30px;
+    height: 30px;
+    margin: 0 auto;
+    border-radius: 100px;
+}
+
+.aui-third-login a {
+    font-size: 22px;
+    margin: 0 auto;
+    border-radius: 100px;
+    display: inline-block;
+    color: #888;
+}
+
+.aui-third-login a:hover {
+    color: #1b90ff;
+    cursor: pointer;
+}
+
+.aui-third-login:hover {
+    cursor: pointer;
+}
+@media screen and (max-width : 1024px) {
+    .aui-content{
+        .aui-top{
+            height: 58vh;
+            .aui-title{
+                left: 6%;
+                font-size: 28px;
+            }
+            .aui-title-image{
+                left: 9%;
+                top:22%;
+                width: 40%;
+                height: 28%;
+            }
+        }
+        .aui-container{
+            width: 34%;
+            left:75%;
+            .form-title{
+                font-size: 22px;
+            }
+            .aui-link-login{
+                margin: 4px 0;
+                height: 40px;
+                font-size: 16px;
+            }
+        }
+    }
+}
+@media (max-width: 320px) {
+    .aui-form {
+        flex-direction: column;
+    }
+
+    .aui-image {
+        order: 2;
+        display: none;
+    }
+
+    .aui-container {
+        width: 100%;
+        max-width: 550px;
+        margin-top: 10px;
+    }
+
+    .aui-content {
+        justify-content: initial;
+        width: 100%;
+    }
+}
+
+@media (min-width: 321px) and (max-width: 375px) {
+    .aui-form {
+        flex-direction: column;
+    }
+
+    .aui-image {
+        order: 2;
+        display: none;
+    }
+
+    .aui-container {
+        width: 100%;
+        left: 50%;
+        max-width: 550px;
+    }
+
+    .aui-content {
+        justify-content: initial;
+        width: 100%;
+        //padding: 20px;
+    }
+}
+
+@media (min-width: 375px) and (max-width: 425px) {
+    .aui-form {
+        flex-direction: column;
+    }
+
+    .aui-image {
+        order: 2;
+        display: none;
+    }
+
+    .aui-container {
+        width: 90%;
+        max-width: 550px;
+    }
+
+    .aui-content {
+        justify-content: initial;
+        width: 100%;
+        //padding: 40px;
+    }
+}
+
+@media (min-width: 425px) and (max-width: 768px) {
+    .aui-form {
+        flex-direction: column;
+    }
+
+    .aui-image {
+        order: 2;
+        display: none;
+    }
+
+    .aui-container {
+        width: 90%;
+        max-width: 550px;
+    }
+    .aui-title{
+        font-size: 16px;
+    }
+    .aui-content {
+        justify-content: initial;
+        width: 100%;
+        padding: 40px;
+    }
+
+    .aui-step-box::after {
+        width: 70%;
+        margin-left: -35%;
+    }
+}
+
+@media only screen and (max-width: 767px) {
+    .aui-logo {
+        top: 3%;
+    }
+}
+
+@media screen and (max-width: 300px) {
+    .aui-logo {
+        top: 3%;
+    }
+}

src/assets/mapUtils/commonFun.ts

@@ -1,4 +1,5 @@
 import { mapIcon1, mapIcon2, mapIcon3, mapIcon4 } from '/@/components/chinaMap/chinaHooks.ts';
+import { watchIcon } from '/@/components/secondaryScreen/secondMap/secondMapHooks.ts';
 
 /**
  * @desc 创建icon
@@ -33,6 +34,9 @@ export function typeToIcon(type: string) {
     if (type == '4') {
         return createIcon({ icon: mapIcon3, iconSize, imageSize });
     }
+    if (type == '6') {
+        return createIcon({ icon: watchIcon, iconSize: [23, 51], imageSize: [23, 51] });
+    }
 }
 
 /**

src/assets/mapUtils/map.ts

@@ -2,6 +2,8 @@ import china from '/@/assets/lngLat/china.ts';
 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], //地图中心点
@@ -22,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, {
@@ -40,11 +42,11 @@ export const Map = {
      * @desc 中国外层边界线
      */,
     drawOutLine() {
-        let geojson = new AMap.GeoJSON({
+        let geoJson = new AMap.GeoJSON({
             geoJSON: china,
-            getPolygon: function (geojson, lnglats) {
+            getPolygon: function (geoJson: string, lngLats: any) {
                 return new AMap.Polyline({
-                    path: lnglats[0],
+                    path: lngLats[0],
                     strokeColor: '#6ccffe',
                     strokeWeight: 3,
                     lineJoin: 'round', //折线拐点的绘制样式
@@ -54,49 +56,64 @@ export const Map = {
                 });
             },
         });
-        this.map.add(geojson);
+        this.map.add(geoJson);
     } /**
      * @desc 中国内层边界线
      */,
     drawInnerLine() {
-        let geojson = new AMap.GeoJSON({
+        let geoJson = new AMap.GeoJSON({
             geoJSON: chinaInner,
-            getPolygon: function (geojson, lnglats) {
+            getPolygon: function (geoJson: string, lngLats: any) {
                 return new AMap.Polyline({
-                    path: lnglats[0],
+                    path: lngLats[0],
                     strokeColor: '#359de5',
                     strokeWeight: 1,
                 });
             },
         });
-        this.map.add(geojson);
-    }, // 清空当前地图上除了边界线的覆盖物
+        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) {
-            for (let i = 0; i < this.airMarkerList.length; i++) {
-                this.airMarkerList[i].setMap(null);
-            }
+        if (this.airMarkerList) {
+            this.airMarkerList = [];
         }
         // this.map.remove(this.airMarkerList);
     }, //
     /**
      * @desc 创建覆盖物组，用于批量处理点 （控制显隐，点击事件等）
      * @param result
+     * @param extData
+     * @param callback
      */
-    createOverlay(result) {
+    createOverlay(result: ResultType[], extData?: ExtDataType, callback?: Callback) {
         this.removeOverlayGroup();
         this.overlayGroup = new AMap.OverlayGroup();
         for (let i = 0; i < result.length; i++) {
-            let { type, lon, lat } = result[i];
+            let { type, lon, lat, lng } = result[i];
+            if (lng) {
+                lon = lng;
+            }
             if (!lon || !lat || !type) {
                 continue;
             }
             // 创建一个 Icon
             let startIcon = typeToIcon(type);
+            // debugger;
             // 将 icon 传入 marker
             let startMarker = new AMap.Marker({
                 // 点的坐标
@@ -104,10 +121,12 @@ export const Map = {
                 icon: startIcon, //启用点击事件 如果需要点击事件，必须开启
                 clickable: true, //点额外携带的数据，用户自定义属性，支持JavaScript API任意数据类型
                 extData: result[i],
+                label: {
+                    content: isFunction(extData?.content) && extData?.content(result[i]),
+                },
+                ...extData?.extOption,
             });
             // 可以调用setExtData（）设置自定义属性
-            //startMarker.setExtData('222')
-
             //将组 挂载到地图上
             this.overlayGroup.setMap(this.map);
             //将需要批量控制的点放到一个组中，通过控制组，就可以操作组内所有所有覆盖物
@@ -115,10 +134,10 @@ export const Map = {
         }
 
         this.overlayGroup.on('click', function (e) {
-            //e.target触发事件的点对象
-            console.log(e.target);
             //拿到点中携带的数据
-            console.log(e.target.getExtData());
+            // console.log(e.target.getExtData());
+            if (!isFunction(callback)) return;
+            callback(e.target.getExtData());
         });
     },
     clearOverlay() {
@@ -133,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;
@@ -146,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';
@@ -157,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);
-                    context.marker.on('click', () => {
-                        console.log('data', context);
-                    });
+                    // this.airMarkerList.push(context.marker);
+                    // context.marker.on('click', () => {
+                    //     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 = null;
+            this.cluster.setMap(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++) {
@@ -217,18 +240,19 @@ 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>`,
+                                <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, Spin } from 'ant-design-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(Spin);
+    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/oneR.vue

@@ -6,7 +6,8 @@
             </template>
         </public-title>
         <div class="inner">
-            <vue3-seamless-scroll :list="scrollList" class="scroll" :hover="true" :limitScrollNum="4" v-bind="classOption">
+            <vue3-seamless-scroll :list="scrollList" class="scroll" :hover="true" :limitScrollNum="4"
+                                  v-bind="classOption">
                 <div class="item" v-for="(item, i) in scrollList" :key="i">
                     <span class="fixed-width" :title="item?.realName">{{ item?.realName }}</span>
                     <span class="fixed-width" :title="item?.eventType_dictText">{{ item?.eventType_dictText }}</span>
@@ -58,221 +59,225 @@
     </div>
 </template>
 <script setup lang="ts">
-    import { onMounted, ref } from 'vue';
-    import { useRouter } from 'vue-router';
-    import $bus from '/@/utils/bus.ts';
-    import { columns } from '/@/components/body-d-right/bodyRightHooks.ts';
-    import PublicTitle from '/@/components/publicTitle.vue';
-    import Dialog from '/@/components/dialog/Dialog.vue';
-    import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
-    import { getMonitorList } from '/@/components/body-d-right/right.api.ts';
-    import { Map } from '/@/assets/mapUtils/map.ts';
+import {onMounted, ref} from 'vue';
+import {useRouter} from 'vue-router';
+import $bus from '/@/utils/bus.ts';
+import {columns} from '/@/components/body-d-right/bodyRightHooks.ts';
+import PublicTitle from '/@/components/publicTitle.vue';
+import Dialog from '/@/components/dialog/Dialog.vue';
+import {Vue3SeamlessScroll} from 'vue3-seamless-scroll';
+import {getMonitorList} from '/@/components/body-d-right/right.api.ts';
+import {Map} from '/@/assets/mapUtils/map.ts';
 
-    const router = useRouter();
-    const classOption = ref({
-        step: 0.3, // 速度
-    });
-    const open = ref<boolean>(false);
-    const openInfor = ref<boolean>(false);
-    const userInfo = ref({
-        realName: '',
-        orgName1: '',
-        phone: '',
-        eventType_dictText: '',
-        warnTime: '',
-        address: '',
-    });
+const router = useRouter();
+const classOption = ref({
+    step: 0.3, // 速度
+});
+const open = ref<boolean>(false);
+const openInfor = ref<boolean>(false);
+const userInfo = ref({
+    realName: '',
+    orgName1: '',
+    phone: '',
+    eventType_dictText: '',
+    warnTime: '',
+    address: '',
+});
 
-    const dataSource = ref([
-        {
-            key: '1',
-            name: '胡彦斌',
-            age: 32,
-            address: '西湖区湖底公园1号',
-        },
-    ]);
+const dataSource = ref([
+    {
+        key: '1',
+        name: '胡彦斌',
+        age: 32,
+        address: '西湖区湖底公园1号',
+    },
+]);
 
-    /**
-     * @desc open员工信息
-     */
-    function handlePolice(item) {
-        userInfo.value = item;
-        openInfor.value = true;
-        classOption.value.step = 0;
+/**
+ * @desc open员工信息
+ */
+function handlePolice(item) {
+    userInfo.value = item;
+    openInfor.value = true;
+    classOption.value.step = 0;
+}
+
+/**
+ * @desc close员工信息
+ */
+function handlePoliceClose() {
+    openInfor.value = false;
+    classOption.value.step = 0.3;
+}
+
+onMounted(() => {
+    getScrollList();
+});
+
+/**
+ * @desc 终端报警
+ * */
+const scrollList = ref([]);
+
+async function getScrollList() {
+    const {code, result} = await getMonitorList({pageSize: 10, pageNo: 1});
+    if (code == 200) {
+        scrollList.value = result.records;
     }
+}
 
-    /**
-     * @desc close员工信息
-     */
-    function handlePoliceClose() {
-        openInfor.value = false;
-        classOption.value.step = 0.3;
+function sendPosition(item) {
+    let {lon, lat} = item;
+    if (lon && lat) {
+        Map.createMarker(item, () => {
+            handlePolice(item);
+        });
     }
+}
 
-    onMounted(() => {
-        getScrollList();
-    });
-
-    /**
-     * @desc 终端报警
-     * */
-    const scrollList = ref([]);
-
-    async function getScrollList() {
-        const { code, result } = await getMonitorList({ pageSize: 10, pageNo: 1 });
-        if (code == 200) {
-            scrollList.value = result.records;
-        }
-    }
-
-    function sendPosition(item) {
-        let { lon, lat } = item;
-        if (lon && lat) {
-            Map.createMarker(item, () => {
-                handlePolice(item);
-            });
-        }
-    }
-
-    function viewDetail() {
-        router.push({ path: '/secondScreen' });
-    }
+function viewDetail() {
+    router.push({path: '/secondScreen'});
+}
 </script>
 <style scoped lang="less">
-    .right-text {
-        font-size: 14px;
-        font-weight: 100;
-        cursor: pointer;
-        margin-right: 3px;
-    }
+.right-text {
+    font-size: 14px;
+    font-weight: 100;
+    cursor: pointer;
+    margin-right: 3px;
+}
 
-    .inner {
-        height: calc(100% - 40px);
-        display: flex;
-        align-items: center;
-        justify-content: center;
+.right-text:hover {
+    color: #129bff;
+}
 
-        .scroll {
-            width: 98%;
-            height: 88%;
-            overflow: hidden;
+.inner {
+    height: calc(100% - 40px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
 
-            .item {
+    .scroll {
+        width: 98%;
+        height: 88%;
+        overflow: hidden;
+
+        .item {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 3% 0;
+
+            .fixed-width {
+                display: inline-flex;
+                width: 100px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+            }
+
+            span {
+                color: #ffffff;
+                font-size: 16px;
+            }
+
+            .time-icon {
                 display: flex;
                 align-items: center;
-                justify-content: space-between;
-                padding: 3% 0;
-
-                .fixed-width {
-                    display: inline-flex;
-                    width: 100px;
-                    white-space: nowrap;
-                    text-overflow: ellipsis;
-                    overflow: hidden;
-                }
-
-                span {
-                    color: #ffffff;
-                    font-size: 16px;
-                }
-
-                .time-icon {
-                    display: flex;
-                    align-items: center;
-                }
-
-                .terminal-icon {
-                    margin-left: 15px;
-                    display: inline-block;
-                    width: 18px;
-                    height: 18px;
-                    background: url('/@/assets/images/terminal.png') no-repeat;
-                    background-size: 100% 100%;
-                    cursor: pointer;
-                }
-
-                .position {
-                    margin-left: 5px;
-                    display: inline-block;
-                    width: 20px;
-                    height: 20px;
-                    background: url('/@/assets/img/position.png') no-repeat;
-                    background-size: 100% 100%;
-                    cursor: pointer;
-                }
             }
-        }
-    }
 
-    .police-con {
-        color: #ffffff;
-        background-color: #00152b;
-        border: 1px solid #129bff;
-        padding: 2% 0 2% 5%;
-
-        .con-item {
-            padding: 1.3% 0;
-
-            span:nth-child(1) {
-                font-weight: bold;
+            .terminal-icon {
+                margin-left: 15px;
                 display: inline-block;
-                width: 20%;
-                text-align: right;
+                width: 18px;
+                height: 18px;
+                background: url('/@/assets/images/terminal.png') no-repeat;
+                background-size: 100% 100%;
+                cursor: pointer;
             }
 
-            span:nth-child(2) {
-                padding-left: 2%;
+            .position {
+                margin-left: 5px;
+                display: inline-block;
+                width: 20px;
+                height: 20px;
+                background: url('/@/assets/img/position.png') no-repeat;
+                background-size: 100% 100%;
+                cursor: pointer;
             }
         }
     }
+}
+
+.police-con {
+    color: #ffffff;
+    background-color: #00152b;
+    border: 1px solid #129bff;
+    padding: 2% 0 2% 5%;
+
+    .con-item {
+        padding: 1.3% 0;
+
+        span:nth-child(1) {
+            font-weight: bold;
+            display: inline-block;
+            width: 20%;
+            text-align: right;
+        }
+
+        span:nth-child(2) {
+            padding-left: 2%;
+        }
+    }
+}
 </style>
 <style lang="less">
-    .dialog-con {
-        background-color: #00152b;
-        border: 1px solid #129bff;
-        /*
+.dialog-con {
+    background-color: #00152b;
+    border: 1px solid #129bff;
+    /*
 antd表格样式
 */
 
-        .ant-table-thead > tr > th {
-            border-bottom: 1px solid #1e73c2 !important;
-        }
+    .ant-table-thead > tr > th {
+        border-bottom: 1px solid #1e73c2 !important;
+    }
 
-        .ant-table-body {
-            background-color: #00152b !important;
-        }
+    .ant-table-body {
+        background-color: #00152b !important;
+    }
 
-        .ant-modal-header {
-            border-bottom: none !important;
-        }
+    .ant-modal-header {
+        border-bottom: none !important;
+    }
 
-        .ant-table-tbody > tr > td {
-            border-bottom: 1px solid #1e73c2 !important;
-            background-color: #00152b !important;
-            color: #ffffff !important;
-        }
+    .ant-table-tbody > tr > td {
+        border-bottom: 1px solid #1e73c2 !important;
+        background-color: #00152b !important;
+        color: #ffffff !important;
+    }
 
-        .ant-table-tbody > tr.ant-table-row:hover > td,
-        .ant-table-tbody > tr > td.ant-table-cell-row-hover,
-        .ant-table-thead > tr > th {
-            background-color: #00152b !important;
-            color: #ffffff !important;
-        }
+    .ant-table-tbody > tr.ant-table-row:hover > td,
+    .ant-table-tbody > tr > td.ant-table-cell-row-hover,
+    .ant-table-thead > tr > th {
+        background-color: #00152b !important;
+        color: #ffffff !important;
+    }
 
-        .ant-table-cell-scrollbar {
-            box-shadow: none !important;
-        }
+    .ant-table-cell-scrollbar {
+        box-shadow: none !important;
+    }
 
-        /*
+    /*
 表格滚动条
 */
 
-        .ant-table-body::-webkit-scrollbar-thumb {
-            border: 4px solid rgba(0, 0, 0, 0);
-            height: 6px;
-            border-radius: 25px;
-            background-clip: padding-box;
-            background-color: rgba(30, 115, 194, 0.3);
-        }
+    .ant-table-body::-webkit-scrollbar-thumb {
+        border: 4px solid rgba(0, 0, 0, 0);
+        height: 6px;
+        border-radius: 25px;
+        background-clip: padding-box;
+        background-color: rgba(30, 115, 194, 0.3);
     }
+}
 </style>

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

@@ -6,7 +6,6 @@ export enum Api {
 }
 
 //健康终端报警
-
 export const getMonitorList = (params: any) => get(Api.getMonitorList, params);
 //长庆油田大病人数
 export const getHealthDataList = (params: any) => get(Api.getHealthDataList, params);

src/components/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"></div>
-            <div class="inner-item"></div>
-            <div class="inner-item"></div>
+            <div class="inner-item" data-text="应急就医-服务中心"></div>
+            <div class="inner-item" data-text="采油九厂-薛岔作业区"></div>
+            <div class="inner-item" data-text="第九采油厂-五谷城作业区"></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------------------------------');
@@ -396,7 +400,6 @@
             flex: 1;
             height: calc(100% + 22px);
             margin: 10px 0;
-            //border: 1px solid red;
         }
 
         .map-legend {
@@ -404,7 +407,6 @@
             bottom: 15px;
             left: 10px;
             width: 200px;
-            //border: 1px solid red;
             display: flex;
             flex-wrap: wrap;
 
@@ -458,4 +460,4 @@
             }
         }
     }
-</style>
+</style>

src/components/dialog/Dialog.vue

@@ -43,6 +43,7 @@
         .ant-modal-header {
             padding: 0 !important;
             padding-bottom: 0;
+            border-bottom: none;
         }
 
         .ant-modal-header,
@@ -57,6 +58,8 @@
         .ant-modal-close-x,
         .anticon {
             color: #999999 !important;
+            height: 40px;
+            line-height: 40px;
         }
 
         .ant-modal-footer {

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

@@ -1,76 +1,103 @@
 <template>
-  <div>
-    <public-title :title="props.title">
-      <template #right>
-        {{ props.tips }}
-      </template>
-    </public-title>
-    <div class="inner" ref="healthChart"></div>
-  </div>
+    <div class="left-pie">
+        <public-title :title="props.title">
+            <template #right>
+                {{ props.tips }}
+            </template>
+        </public-title>
+        <div class="inner" ref="healthChart"></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 {useSpin} from '/@/components/body-d-left/bodyLeftHooks.ts';
-import {useHealth} from '/@/components/body-d-right/bodyRightHooks.ts';
-import {screenPie} from '/@/components/item-d/pieCharts.ts';
-import {onMounted, ref, unref, watch} from 'vue';
-import * as echarts from 'echarts';
+    import PublicTitle from '/@/components/publicTitle.vue';
+    import { circleRing } from '/@/components/item-d/pieCharts.ts';
+    import { onMounted, ref, watch } from 'vue';
+    import * as echarts from 'echarts';
 
-const props = defineProps({
-  title: {
-    type: String,
-    default: () => '',
-  },
-  data: {
-    type: Array,
-    default: () => [],
-  },
-  color: {
-    type: Array,
-    default: () => [],
-  },
-  tips: {
-    type: String,
-    default: () => '',
-  },
-});
-const healthChart = ref<HTMLElement>();
+    const props = defineProps({
+        title: {
+            type: String,
+            default: () => '',
+        },
+        data: {
+            type: Array,
+            default: () => [],
+        },
+        color: {
+            type: Array,
+            default: () => [],
+        },
+        tips: {
+            type: String,
+            default: () => '',
+        },
+        userCount: {
+            type: Number,
+        },
+    });
+    const healthChart = ref<HTMLElement>();
+    onMounted(() => {
+        init();
+    });
 
-const {setSpin, spinning} = useSpin();
+    watch(
+        () => props.data,
+        () => {
+            init();
+        }
+    );
 
-onMounted(() => {
-  init();
-});
-
-watch(
-    () => props.data,
-    () => {
-      init();
+    async function init() {
+        initChart(props.data, props.userCount, props.color);
     }
-);
 
-const {healthData, getValue, setHealth} = useHealth();
-
-async function init() {
-  // setHealth(props.data);
-  // const yData = unref(getValue);
-  // let total = yData.reduce((accumulator, currentValue) => Number(accumulator) + Number(currentValue), 0);
-  initChart(props.data, 78, props.color);
-}
-
-function initChart(chartData, total, color) {
-  let myChart = echarts.init(healthChart.value);
-  let options = screenPie(chartData, total, color);
-  myChart.setOption(options);
-  window.addEventListener('resize', () => {
-    myChart.resize();
-  });
-}
+    function initChart(chartData, total, color) {
+        let myChart = echarts.init(healthChart.value);
+        let options = circleRing(chartData, total, color, '{d}%');
+        myChart.setOption(options);
+        window.addEventListener('resize', () => {
+            myChart.resize();
+        });
+    }
 </script>
 <style scoped lang="less">
-.inner {
-  width: 90%;
-  margin: 0 auto;
-  height: calc(100% - 40px);
-}
-</style>
+    .inner {
+        width: 100%;
+        margin: 0 auto;
+        height: calc(100% - 40px);
+    }
+
+    .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,21 +1,5 @@
-export function screenPie(chartData, total, color) {
+export function screenPie(chartData, total, color, formatter) {
     return {
-        title: {
-            text: '总人数',
-            subtext: total + '',
-            x: 'center',
-            y: '35%',
-            textStyle: {
-                fontSize: 14,
-                color: '#ffffff',
-                fontWeight: 'normal',
-            },
-            subtextStyle: {
-                color: '#ffffff',
-                fontSize: 24,
-                fontWeight: 'bold',
-            },
-        },
         color: color,
         tooltip: {
             trigger: 'item',
@@ -27,11 +11,11 @@ export function screenPie(chartData, total, color) {
             borderColor: '#1b7ef2',
         },
         legend: {
-            left: '80%',
+            left: '74%',
             top: 'center',
             orient: 'vertical',
             icon: 'circle',
-            itemGap: 26,
+            itemGap: 8,
             textStyle: {
                 color: '#ffffff',
                 fontSize: 16,
@@ -40,12 +24,64 @@ export function screenPie(chartData, total, color) {
         series: [
             {
                 type: 'pie',
-                radius: ['50%', '90%'],
+                // radius: ['50%', '86%'],
+                // center: ['42%', '55%'],
+                radius: ['50%', '76%'],
+                center: ['42%', '49%'],
+                avoidLabelOverlap: false,
+                label: {
+                    show: true,
+                    position: 'outside',
+                    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',
+            show: true,
+            textStyle: {
+                color: '#fff',
+            },
+            backgroundColor: 'rgba(50,50,50,0.7)',
+            borderColor: '#1b7ef2',
+        },
+        legend: {
+            left: '74%',
+            top: 'center',
+            orient: 'vertical',
+            icon: 'circle',
+            itemGap: 16,
+            textStyle: {
+                color: '#ffffff',
+                fontSize: 16,
+            },
+        },
+        series: [
+            {
+                type: 'pie',
+                radius: ['50%', '82%'],
+                center: ['42%', '55%'],
                 avoidLabelOverlap: false,
                 label: {
                     show: true,
                     position: 'inner',
-                    formatter: '{d}%',
+                    formatter: formatter,
                     color: '#ffffff',
                     fontSize: 14,
                 },

src/components/secondaryScreen/commonApi.ts

@@ -0,0 +1,22 @@
+import { get, post } from '/@/api/request.ts';
+
+export enum Api {
+    depart = 'sys/sysDepart/allSecondaryDeparts',
+    getWatchDataByOrgCode = '/health-watch/watch/watchData/getWatchDataByOrgCode',
+    getMonitorList = '/health-watch/watch/watchMonitorData/getMonitorList',
+    sleepApi = '/health-watch/watch/watchData/getSleep',
+    stepApi = '/health-watch/watch/watchData/getSdc',
+}
+
+// 单位-
+export const allSecondaryDeparts = () => get(Api.depart);
+
+//左側
+export const getWatchDataByOrgCode = (params) => post(Api.getWatchDataByOrgCode, params);
+
+//右-健康终端报警
+export const getMonitorList = (params: any) => get(Api.getMonitorList, params);
+// 右-睡眠
+export const getSleep = (params: any) => post(Api.sleepApi, params);
+// 右-步数
+export const getStep = (params: any) => post(Api.stepApi, params);

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

@@ -0,0 +1,94 @@
+<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" :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';
+
+    const dataList = ref([
+        {
+            title: '心率',
+            data: [
+                { name: '正常', value: 0, key: 'normalCount' },
+                { name: '警戒', value: 0, key: 'warnCount' },
+                { name: '危险', value: 0, key: 'riskCount' },
+            ],
+            type: '1',
+            color: ['#0098FA', '#FF6648', '#FB466C'],
+            tips: '正常范围60~100次/分',
+            userCount: '',
+        },
+        {
+            title: '血氧',
+            data: [
+                { name: '正常', value: 0, key: 'normalCount' },
+                { name: '警戒', value: 0, key: 'warnCount' },
+                { name: '危险', value: 0, key: 'riskCount' },
+            ],
+            type: '2',
+            color: ['#0098FA', '#FF6648', '#FB466C'],
+            tips: '血氧饱和度范围95%~100%',
+            userCount: '',
+        },
+        {
+            title: '压力',
+            data: [
+                { name: '正常', value: 0, key: 'normalCount' },
+                { name: '放松', value: 0, key: 'unwindCount' },
+                { name: '中等', value: 0, key: 'warnCount' },
+                { name: '偏高', value: 0, key: 'riskCount' },
+            ],
+            type: '3',
+            color: ['#1DCC79', '#0098FA', '#0CD9B5', '#6C63F0'],
+            tips: '',
+            userCount: '',
+        },
+        {
+            title: '体温',
+            data: [
+                { name: '37.2', value: 0, key: 'normalCountCount' },
+                { name: '37.2-38', value: 0, key: 'warnCount' },
+                { name: '>38', value: 0, key: 'riskCount' },
+            ],
+            type: '5',
+            color: ['#0098FA', '#0CD9B5', '#3B72AD'],
+            tips: '',
+            userCount: '',
+        },
+    ]);
+
+    const props = defineProps({
+        orgCode: String,
+        type: String,
+    });
+    onMounted(() => {});
+    watch(props, () => {
+        init();
+    });
+
+    async function init() {
+        const { code, result } = await getWatchDataByOrgCode(props);
+        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({
+        init,
+    });
+</script>
+
+<style scoped></style>

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

@@ -1,64 +1,101 @@
 <template>
-  <div class="terminal-container">
-    <public-title title="睡眠">
-      <template #right>平均睡眠时长：6小时30分</template>
-    </public-title>
-    <div class="inner">
-      <div class="title">
-        <span class="count">6.5h</span>
-        <span class="lightSleep">深睡2.4小时 浅睡4.1小时</span>
-      </div>
-      <div class="sleepChart" ref="sleepChart"></div>
+    <div class="terminal-container self">
+        <public-title title="睡眠" />
+        <div class="inner">
+            <div class="title">
+                <span class="lightSleep">平均睡眠 {{ nums.avg }} 深睡 {{ nums.avgLong }} 浅睡 {{ nums.avgShort }}</span>
+            </div>
+            <div class="sleepChart" ref="sleepChart"></div>
+        </div>
     </div>
-  </div>
 </template>
 <script setup lang="ts">
-import PublicTitle from '/@/components/publicTitle.vue';
-import * as echarts from 'echarts';
-import {ringOption, useHealth} from '/@/components/body-d-right/bodyRightHooks';
-import {ref, onMounted, unref} from 'vue';
-import {sleepCharts} from '/@/components/secondaryScreen/screen-right/screenRightHooks';
+    import PublicTitle from '/@/components/publicTitle.vue';
+    import * as echarts from 'echarts';
+    import { ref, onMounted, watch } from 'vue';
+    import { formatStr, sleepCharts } from '/@/components/secondaryScreen/screen-right/screenRightHooks';
+    import { getSleep } from '/@/components/secondaryScreen/commonApi.ts';
 
-const sleepChart = ref<HTMLElement>();
-onMounted(() => {
-  init();
-});
-const {healthData, getValue, setHealth} = useHealth();
+    const props = defineProps({
+        orgCode: String,
+        type: String,
+    });
+    const sleepChart = ref<HTMLElement>();
+    watch(
+        props,
+        () => {
+            console.log(111111111111);
+            init();
+        },
+        { immediate: true }
+    );
+    const nums = ref({
+        avgShort: '',
+        avgLong: '',
+        avg: '',
+    });
 
-function init() {
-  initChart();
-}
+    async function init() {
+        const params = {
+            orgCode: props.orgCode,
+            type: props.type,
+        };
+        const { code, result } = await getSleep(params);
+        if (code == 200 && result.length > 0) {
+            let time = result?.map((item) => item.dataDate);
+            let short = result?.map((item) => item.avgShortDuration);
+            let long = result?.map((item) => item.avgLongDuration);
+            let awake = result?.map((item) => item.awakeDuration);
+            let avg = result?.map((item) => item.averageDuration);
+            initChart({ time, short, long, awake, type: props.type });
+            const len = time.length;
+            if (!len > 0) {
+                return;
+            }
+            nums.value = {
+                avgShort: formatStr({ list: short, len }),
+                avgLong: formatStr({ list: long, len }),
+                avg: formatStr({ list: avg, len }), //平均
+            };
+        }
+    }
 
-function initChart() {
-  let myChart = echarts.init(sleepChart.value);
-  let options = sleepCharts();
-  myChart.setOption(options);
-  window.addEventListener('resize', () => {
-    myChart.resize();
-  });
-}
+    function initChart({ time, short, long, awake, type }) {
+        let myChart = echarts.init(sleepChart.value);
+        let options = sleepCharts({ time, short, long, awake, type });
+        myChart.setOption(options);
+        window.addEventListener('resize', () => {
+            myChart.resize();
+        });
+    }
 </script>
 <style scoped lang="less">
-.inner {
-  height: calc(100% - 40px);
-
-  .title {
-    color: #cfcfcf;
-    text-align: left;
-    padding: 1% 6%;
-
-    .count {
-      font-size: 28px;
-      font-weight: bold;
+    .terminal-container.self {
+        position: relative;
+        padding-bottom: 0 !important;
     }
 
-    .lightSleep {
-      padding-left: 2%;
-    }
-  }
+    .inner {
+        height: calc(100% - 20px);
 
-  .sleepChart {
-    height: 80%;
-  }
-}
-</style>
+        .title {
+            color: #cfcfcf;
+            text-align: left;
+            height: 30px;
+            line-height: 30px;
+
+            .count {
+                font-size: 28px;
+                font-weight: bold;
+            }
+
+            .lightSleep {
+                padding: 3px 0 3px 2%;
+            }
+        }
+
+        .sleepChart {
+            height: 80%;
+        }
+    }
+</style>

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

@@ -1,119 +1,205 @@
-import {computed, ref} from 'vue';
+import { ref } from 'vue';
+import dayjs from 'dayjs';
+import { minuteToStr } from '/@/utils/utils.ts';
 
-export function sleepCharts() {
+function timeFormat(type, list) {
+    const o = {
+        week: 'MM-DD',
+        month: 'MM-DD',
+        year: 'YYYY-MM',
+    };
+    if (list) {
+        return list.map((item) => dayjs(item).format(o[type]));
+    }
+    return [];
+}
+
+//时间转换
+export function formatStr({ list, len }) {
+    let sum =
+        list.reduce((all, cur) => {
+            return all + cur;
+        }, 0) / len;
+
+    return minuteToStr(sum);
+}
+
+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: '8%',
-            right: '3%',
-            bottom: '18%',
+            left: '5%',
+            right: '5%',
+            bottom: 30,
+        },
+        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'
+                color: '#ffffff',
             },
-            left: '60%',
+            icon: 'roundRect',
+            height: 40,
+            itemHeight: 14,
+            top: -5,
+            left: '55%',
         },
         color: ['#14B3F8', '#6D7BEB', '#5451DC'],
         xAxis: {
             type: 'category',
-            axisLabel: {
-                color: '#ffffff'
+            axisTick: {
+                show: false,
             },
-            data: ['0', '2', '4', '6', '8', '10', '12', '14', '16', '18', '20', '22'],
+            axisLabel: {
+                color: '#ffffff',
+                formatter: (item, i) => {
+                    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),
         },
         yAxis: {
             type: 'value',
             axisLabel: {
-                color: '#ffffff'
+                show: false,
             },
             axisLine: {
-                show: false
+                show: false,
             },
             splitLine: {
                 lineStyle: {
                     type: 'dashed',
-                    color: '#696969'
-                }
-            }
+                    color: '#696969',
+                },
+            },
         },
         series: [
             {
                 name: '清醒',
                 type: 'bar',
-                data: [
-                    2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
-                ],
+                data: awake,
             },
             {
                 name: '浅睡',
                 type: 'bar',
-                data: [
-                    2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
-                ],
+                data: short,
             },
             {
                 name: '深睡',
                 type: 'bar',
-                data: [
-                    2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
-                ],
-            }
-        ]
+                data: long,
+            },
+        ],
     };
 }
 
-export function useHealth() {
-    const healthData = ref([
+//步数
+export function useStep() {
+    const total = ref();
+    const stepData = ref([
         {
             name: '5000以下',
             value: '0',
-            type: '1',
+            type: 'lessThanFiveThousand',
             type_dictText: '恶性肿瘤',
         },
         {
             name: '5000~1w',
-            value: '2',
-            type: '2',
+            value: '0',
+            type: 'fiveThousandToTenThousand',
             type_dictText: '其他',
         },
         {
             name: '1~1.5w',
-            value: '34',
-            type: '3',
+            value: '0',
+            type: 'TenThousandToFifteenThousand',
             type_dictText: '其他',
         },
         {
             name: '1.5w~2w',
-            value: '43',
-            type: '3',
+            value: '0',
+            type: 'FifteenToTwentyThousand',
             type_dictText: '其他',
         },
         {
             name: '2以上',
-            value: '43',
-            type: '3',
+            value: '0',
+            type: 'TwentyThousandOrMore',
             type_dictText: '其他',
         },
     ]);
-    const getValue = computed(() => healthData.value.map((item) => item.value));
-    const getName = computed(() => healthData.value.map((item) => item.name));
 
-    function setHealth(data) {
-        data?.map((item1) => {
-            healthData.value.map((item2) => {
-                if (item1.type == item2.type) {
-                    item2.value = item1.count;
-                }
-            });
+    function setStep(data) {
+        stepData.value.map((item) => {
+            item.value = data[item.type] || 0;
         });
+        total.value = data?.userCount;
     }
 
     return {
-        healthData,
-        getValue,
-        getName,
-        setHealth,
+        total,
+        stepData,
+        setStep,
     };
-}
+}
+
+export const monitorColumns = [
+    {
+        title: '姓名',
+        dataIndex: 'realName',
+        key: 'realName',
+        align: 'center',
+    },
+    {
+        title: '类型',
+        dataIndex: 'eventType_dictText',
+        key: 'eventType_dictText',
+        align: 'center',
+    },
+    {
+        title: '异常时间',
+        dataIndex: 'warnTime',
+        key: 'warnTime',
+        align: 'center',
+        width: 150,
+    },
+    {
+        title: '定位',
+        key: 'address',
+        align: 'center',
+        slots: { customRender: 'address' },
+        width: 40,
+    },
+];

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

@@ -1,123 +1,220 @@
 <template>
-  <div>
-    <public-title title="预警"/>
-    <div class="inner-screen">
-      <a-table class="ant-table-striped" :dataSource="tableInfo.dataSource" :columns="tableInfo.columns"
-               :pagination="tableInfo.pagination"
-               :rowClassName="(record, index) => (index % 2 === 1 ? 'table-default' : 'table-striped')"/>
+    <div>
+        <public-title title="预警" />
+        <div class="inner-screen">
+            <a-table
+                :scroll="{
+                    y: tableHeight,
+                }"
+                style="overflow-y: auto"
+                :columns="monitorColumns"
+                :dataSource="dataSource"
+                :pagination="pagination"
+                :rowClassName="(record, index) => (index % 2 === 1 ? 'table-default' : 'table-striped')"
+                class="ant-table-striped"
+            >
+                <template #address="{ text, record }">
+                    <div class="police-times" @click="handlePoliceDetail(record)">
+                        <span class="position"></span>
+                    </div>
+                </template>
+            </a-table>
+        </div>
     </div>
-  </div>
 </template>
-<script setup lang="ts">
-import {ref} from 'vue';
-import PublicTitle from '/@/components/publicTitle.vue';
+<script lang="ts" setup>
+    import { onMounted, onUnmounted, ref, watch } from 'vue';
+    import PublicTitle from '/@/components/publicTitle.vue';
+    import { getMonitorList } from '/@/components/secondaryScreen/commonApi.ts';
+    import { monitorColumns } from '/@/components/secondaryScreen/screen-right/screenRightHooks.ts';
+    import $bus from '/@/utils/bus.ts';
+    import { earlyWarning } from '/@/utils/busConstant.ts';
+    import { useRefresh } from '/@/hooks/autoRefresh';
 
-const tableInfo = ref({
-  dataSource: [],
-  columns: [],
-  pagination: {
-    current: 1,
-    pageSize: 2,
-    total: 20
-  }
-})
-const dataSource = ref([
-  {
-    key: '1',
-    name: '胡彦斌',
-    age: 32,
-    address: '西湖区湖底公园1号',
-  },
-  {
-    key: '2',
-    name: '胡彦祖',
-    age: 42,
-    address: '西湖区湖底公园1号',
-  },
-  {
-    key: '3',
-    name: '胡彦祖',
-    age: 42,
-    address: '西湖区湖底公园1号',
-  },
-]);
+    const props = defineProps({
+        orgCode: String,
+        type: String,
+    });
+    const tableHeight = ref(0);
+    const dataSource = ref([]);
+    const pagination = ref({
+        current: 1,
+        pageSize: 2,
+        total: 0,
+        onChange: pageChange,
+    });
+    const timer = ref(null);
+    const pages = ref(0); //总页数
 
-const columns = ref([
-  {
-    title: '姓名',
-    dataIndex: 'name',
-    key: 'name',
-    align: 'center',
-  },
-  {
-    title: '年龄',
-    dataIndex: 'age',
-    key: 'age',
-    align: 'right',
-  },
-  {
-    title: '住址',
-    dataIndex: 'address',
-    key: 'address',
-    align: 'center',
-  },
-]);
+    function handlePoliceDetail(record) {
+        $bus.emit(earlyWarning, record);
+    }
+
+    watch(
+        props,
+        () => {
+            init(1);
+            tableHeight.value == 0 && setHeight();
+            window.addEventListener('resize', setHeight);
+            timer.value && clearInterval(timer.value);
+            // interval();
+        },
+        { immediate: true }
+    );
+
+    onUnmounted(() => {
+        window.removeEventListener('resize', setHeight);
+    });
+
+    function setHeight() {
+        let dom = document.querySelector('.inner-screen');
+        if (!dom) return;
+        tableHeight.value = document.querySelector('.inner-screen').getBoundingClientRect().height - 60;
+    }
+
+    async function init(page) {
+        const { pageSize, current } = pagination.value;
+        const { code, result } = await getMonitorList({ pageSize, pageNo: page, orgCode: props.orgCode });
+        if (code == 200) {
+            dataSource.value = result.records;
+            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(page);
+    }
+
+    function interval() {
+        console.log(55555);
+        // timer.value = setInterval(() => {
+        let page = pagination.value.current < pages.value ? pagination.value.current + 1 : 1;
+        init(page);
+        // }, 3000);
+    }
+
+    const { refreshState } = useRefresh(3000, () => {
+        interval();
+    });
+    onUnmounted(() => {
+        clearInterval(timer.value);
+    });
 </script>
-<style scoped lang="less">
-.inner-screen {
-  width: 100%;
-  height: calc(100% - 40px);
-  margin: 20px 0;
+<style lang="less" scoped>
+    .inner-screen {
+        width: 100%;
+        height: calc(100% - 40px);
+        margin: 20px 0;
 
-  :deep(.ant-table-thead) {
-    display: none !important;
-  }
+        .police-times {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer !important;
 
-  :deep(.ant-table) {
-    background-color: transparent;
-    pointer-events: none;
-  }
+            .position {
+                margin-left: 5px;
+                display: inline-block;
+                width: 18px;
+                height: 18px;
+                background: url('/@/assets/img/position.png') no-repeat;
+                background-size: 100% 100%;
+                cursor: pointer;
+            }
+        }
 
-  :deep(.ant-table-tbody > tr > td) {
-    border-bottom: none;
-  }
+        :deep(.ant-table-thead) {
+            display: none !important;
+        }
 
-  :deep(.ant-table-row:hover) {
-    background-color: transparent !important;
-    color: #ffffff;
-  }
+        :deep(.ant-table) {
+            background-color: transparent;
+        }
 
-}
+        :deep(.ant-table-tbody > tr > td) {
+            border-bottom: none;
+            padding: 6px 4px;
+        }
 
-.ant-table-striped :deep(.table-striped) td {
-  background-color: #0A0A0C;
-  color: #ffffff;
-}
+        :deep(.ant-table-row:hover) {
+            background-color: transparent;
+            color: #ffffff;
+        }
+    }
 
-.ant-table-striped :deep(.table-default) td {
-  color: #ffffff;
-}
+    //奇行
+    .ant-table-striped :deep(.table-striped) td {
+        background-color: #0a0a0c;
+        color: #ffffff;
+    }
 
-// 分页
-:deep(.ant-pagination-prev .ant-pagination-item-link, .ant-pagination-next .ant-pagination-item-link) {
-  background-color: #1F2935;
-  color: #8291A9;
-  border: none;
-}
+    //偶行
+    .ant-table-striped :deep(.table-default) td {
+        color: #ffffff;
+        background: none !important;
+    }
 
-:deep(.ant-pagination-item) {
-  background-color: #1F2935;
-  color: #ffffff;
-  border: none;
-}
+    //奇行-hover
+    :deep(.ant-table-tbody > tr.ant-table-row.table-striped:hover > td, .ant-table-tbody > tr > td.table-striped) {
+        background-color: #0a0a0c !important;
+        color: #ffffff;
+    }
 
-// 当前页选中的样式
-:deep(.ant-pagination-item-active) {
-  background-color: #0081FF;
-}
+    //偶行-hover
+    :deep(.ant-table-tbody > tr.ant-table-row.table-default:hover > td, .ant-table-tbody > tr > td.table-default) {
+        color: #ffffff;
+        background: none !important;
+    }
 
-:deep(.ant-pagination-item-active a,.ant-pagination-item a) {
-  color: #ffffff;
-}
+    // 分页
+    :deep(.ant-pagination-prev .ant-pagination-item-link, .ant-pagination-next .ant-pagination-item-link) {
+        background-color: #1f2935;
+        color: #8291a9;
+        border: none;
+    }
 
-</style>
+    :deep(.ant-pagination-item) {
+        background-color: #1f2935;
+        color: #ffffff;
+        border: none;
+    }
+
+    // 当前页选中的样式
+    :deep(.ant-pagination-item-active) {
+        background-color: #0081ff;
+    }
+
+    :deep(.ant-pagination-item-active a) {
+        color: #ffffff;
+    }
+
+    :deep(.ant-pagination-item a) {
+        color: #ffffff;
+    }
+
+    :deep(.ant-pagination-prev .ant-pagination-item-link, .ant-pagination-next .ant-pagination-item-link) {
+        color: #ffffff;
+        background-color: #1f2935;
+    }
+
+    // 省略样式
+    :deep(.ant-pagination-jump-next .ant-pagination-item-container .ant-pagination-item-ellipsis) {
+        color: #ffffff;
+    }
+
+    // 省略鼠标移入样式
+    :deep(.ant-pagination-jump-next .ant-pagination-item-container .ant-pagination-item-link-icon) {
+        color: rgba(255, 255, 255, 0.4);
+    }
+
+    // 下一页
+    :deep(.ant-pagination-next .ant-pagination-item-link) {
+        background-color: #1f2935;
+        color: #8291a9;
+        border: none;
+    }
+</style>

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

@@ -1,46 +1,59 @@
 <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">
-    import { ref, unref, onMounted } from 'vue';
+    import { ref, unref, onMounted, watch } from 'vue';
     import * as echarts from 'echarts';
     import PublicTitle from '/@/components/publicTitle.vue';
-    import { getHealthDataList } from '/@/components/body-d-right/right.api';
     import { useSpin } from '/@/components/body-d-left/bodyLeftHooks.ts';
-    import { useHealth } from '/@/components/secondaryScreen/screen-right/screenRightHooks.ts';
+    import { useStep } from '/@/components/secondaryScreen/screen-right/screenRightHooks.ts';
     import { screenPie } from '/@/components/item-d/pieCharts.ts';
+    import { getStep } from '/@/components/secondaryScreen/commonApi.ts';
 
+    const props = defineProps({
+        orgCode: String,
+        type: String,
+    });
+    watch(
+        props,
+        () => {
+            init();
+        },
+        { immediate: true }
+    );
     const { setSpin, spinning } = useSpin();
     const healthChart = ref<HTMLElement>();
-
     const color = ref(['#B750BE', '#6C63F0', '#3AACFF', '#ED589D', '#FB466C']);
-    onMounted(() => {
-        init();
-    });
-    const { healthData, getValue, setHealth } = useHealth();
+    const { stepData, total, setStep } = useStep();
 
     async function init() {
         try {
-            const { code, result } = await getHealthDataList({});
+            const params = {
+                orgCode: props.orgCode,
+                type: props.type,
+            };
+            const { code, result } = await getStep(params);
             setSpin(true);
             if (code != 200) {
                 return;
             }
-            setHealth(result);
-            const yData = unref(getValue);
-            let total = yData.reduce((accumulator, currentValue) => Number(accumulator) + Number(currentValue), 0);
-            initChart(unref(healthData), total);
+            setStep(result);
+            initChart(unref(stepData), '15000');
         } catch {
-            initChart(unref(healthData), 0);
+            initChart(unref(stepData), 0);
         }
     }
 
     function initChart(chartData, total) {
         let myChart = echarts.init(healthChart.value);
-        let options = screenPie(chartData, total, color.value);
+        let options = screenPie(chartData, total, color.value, '{c}');
         myChart.setOption(options);
         window.addEventListener('resize', () => {
             myChart.resize();
@@ -49,8 +62,38 @@
 </script>
 <style scoped lang="less">
     .inner {
-        width: 90%;
+        width: 100%;
         margin: 0 auto;
         height: calc(100% - 40px);
     }
-</style>
+
+    .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

@@ -0,0 +1,110 @@
+<template>
+    <div class="modal-content">
+        <div class="empty-png"></div>
+        <div class="modal-header">
+            <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 v-for="item in detailLeft" :key="item.key"
+                    ><span class="info-label">{{ item.name }}：</span><span class="info-value">{{ item.value }}</span></div
+                >
+            </div>
+            <div class="info-right">
+                <div v-for="item in detailRight" :key="item.key"
+                    ><span class="info-label">{{ item.name }}：</span><span class="info-value">{{ item.value }}</span></div
+                >
+            </div>
+        </div>
+    </div>
+</template>
+<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;
+        border: 0;
+        border-radius: 2px;
+
+        .empty-png {
+            width: 100%;
+            height: 16px;
+            background: url('../../../../assets/images/bg.png') no-repeat;
+            background-position-y: -500px;
+        }
+
+        .modal-close {
+            width: 40px;
+            height: 40px;
+            position: absolute;
+            right: 0;
+            z-index: 10;
+            padding: 0;
+            color: #999999;
+            font-weight: 700;
+            background: transparent;
+            border: 0;
+            outline: 0;
+            cursor: pointer;
+            transition: color 0.3s;
+        }
+
+        .modal-header {
+            color: rgba(0, 0, 0, 0.85);
+            background: #283545;
+            border-radius: 2px 2px 0 0;
+            position: relative;
+
+            .modal-title {
+                margin: 0;
+                font-weight: 500;
+                font-size: 16px;
+                line-height: 22px;
+                word-wrap: break-word;
+                position: relative;
+                display: flex;
+                align-items: center;
+                width: 100%;
+                height: 40px;
+                background: url('../../../../assets/images/dialog.png') no-repeat;
+                background-size: 100% 100%;
+                color: #ffffff !important;
+                padding-left: 2%;
+            }
+        }
+
+        .modal-body {
+            min-height: 150px;
+            font-size: 14px;
+            line-height: 1.5715;
+            word-wrap: break-word;
+            color: #ffffff;
+            background-color: #00152b;
+            border: 1px solid #129bff;
+            border-top: none;
+            padding: 2% 0 2% 5%;
+            display: flex;
+
+            div {
+                flex: 1;
+                line-height: 28px;
+
+                .info-label {
+                    font-weight: bold;
+                }
+            }
+        }
+    }
+</style>

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

@@ -0,0 +1,170 @@
+<template>
+    <Dialog :openVis="visible" width="65%" title="健康终端报警列表" @close="closeModal">
+        <template #container>
+            <div class="dialog-con">
+                <a-table
+                    class="ant-table-striped"
+                    :dataSource="dataSource"
+                    :columns="columns"
+                    :scroll="{ y: '56vh' }"
+                    :pagination="paginationProp"
+                    :rowClassName="(record, index) => (index % 2 === 1 ? 'table-default' : 'table-striped')"
+                >
+                </a-table>
+            </div>
+        </template>
+    </Dialog>
+</template>
+<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'],
+        pageSize,
+        current,
+        total,
+        showTotal: (total) => `总 ${total} 条`,
+        onChange: pageChange,
+    });
+
+    function pageChange(page, pageS) {
+        current.value = page;
+        pageSize.value = pageS;
+        getRecords(deptId.value);
+    }
+
+    const dataSource = ref([]);
+    const visible = ref(false);
+
+    function openModal(id: string) {
+        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,
+    });
+</script>
+<style scoped lang="less">
+    .dialog-con {
+        background-color: #00152b;
+        border: 1px solid #129bff;
+        min-height: 500px;
+    }
+
+    :deep(.ant-table-thead > tr > th) {
+        color: #fff !important;
+        background: rgba(35, 132, 221, 0.5) !important;
+        border-top: 1px solid #1d4e7c !important;
+        border-bottom: none;
+        padding: 9px 9px;
+    }
+
+    :deep(.ant-table-cell-scrollbar) {
+        box-shadow: none !important;
+    }
+
+    :deep(.ant-table) {
+        color: #fff;
+        background-color: transparent;
+        pointer-events: none;
+    }
+
+    :deep(.ant-table-tbody > tr > td) {
+        border-bottom: none;
+        padding: 0 4px;
+    }
+
+    :deep(.ant-table-row:hover) {
+        background-color: transparent;
+        color: #ffffff;
+    }
+
+    .ant-table-striped :deep(.table-default) td,
+    .ant-table-striped :deep(.table-striped) td {
+        background-color: #00152b;
+        border-bottom: 1px solid #2384dd;
+    }
+
+    :deep(.ant-table-tbody > tr.ant-table-row:hover > td, .ant-table-tbody > tr > td.ant-table-cell-row-hover) {
+        background: transparent;
+    }
+
+    //#00152b
+    // 分页
+    :deep(.ant-pagination-prev .ant-pagination-item-link, .ant-pagination-next .ant-pagination-item-link) {
+        background-color: #1f2935;
+        color: #8291a9;
+        border: none;
+    }
+
+    :deep(.ant-pagination-item) {
+        background-color: #1f2935;
+        color: #ffffff;
+        border: none;
+    }
+
+    // 当前页选中的样式
+    :deep(.ant-pagination-item-active) {
+        background-color: #0081ff;
+    }
+
+    :deep(.ant-pagination-item-active a) {
+        color: #ffffff;
+    }
+
+    :deep(.ant-pagination-item a),
+    :deep(.ant-pagination-total-text) {
+        color: #ffffff;
+    }
+
+    :deep(.ant-pagination-prev .ant-pagination-item-link, .ant-pagination-next .ant-pagination-item-link) {
+        color: #ffffff;
+        background-color: #1f2935;
+    }
+
+    // 省略样式
+    :deep(.ant-pagination-jump-next .ant-pagination-item-container .ant-pagination-item-ellipsis) {
+        color: #ffffff;
+    }
+
+    // 省略鼠标移入样式
+    :deep(.ant-pagination-jump-next .ant-pagination-item-container .ant-pagination-item-link-icon) {
+        color: rgba(255, 255, 255, 0.4);
+    }
+
+    // 下一页
+    :deep(.ant-pagination-next .ant-pagination-item-link) {
+        background-color: #1f2935;
+        color: #8291a9;
+        border: none;
+    }
+
+    :deep(.ant-table-pagination-right) {
+        margin-right: 10px !important;
+    }
+</style>

src/components/secondaryScreen/secondMap/secondMap.vue

@@ -2,32 +2,134 @@
     <div class="center-map">
         <div class="china-map-box">
             <div class="form-container">
-                <!--                <a-select placeholder="选择单位" v-model:value="selectValue" class="type-select" :options="selectOptions">-->
-                <!--                    <a-select-option value="全部数据">全部数据</a-select-option>-->
-                <!--                </a-select>-->
-                <!--                <a-select v-model:value="selectValue" class="type-select" :options="selectOptions">-->
-                <!--                    <a-select-option value="全部数据">全部数据</a-select-option>-->
-                <!--                </a-select>-->
+                <slot name="rightForm"></slot>
+            </div>
+            <div style="flex: 1; overflow: hidden; margin: 0 0 10px; height: 100%">
+                <div id="mapContainer" class="mapContainer"></div>
             </div>
-            <div class="mapContainer" id="mapContainer"></div>
             <div v-show="false" id="container"></div>
             <div v-show="false" id="panel"></div>
+            <div class="footer-data" v-show="isShow" style="--moveUp: 50px; --moveDown: -90px" :class="className">
+                <div class="empty-png"></div>
+                <div
+                    class="col-item nowrap"
+                    v-for="item in footerList"
+                    :style="{ cursor: item.key == 'allotDeviceNum' ? 'pointer' : 'default' }"
+                    @click="openWatchList(item)"
+                >
+                    <div class="col-text">{{ item?.name }}</div>
+                    <div class="col-value nowrap" :title="item.value">{{ item?.value }}</div>
+                </div>
+            </div>
+            <div
+                class="footer-dialog-con"
+                style="--moveUp: 120px; --moveDown: -120px"
+                :class="isShowAlarm ? 'slide-top' : 'slide-bottom'"
+                v-show="isShowAlarm"
+            >
+                <FooterDialog :detailLeft="detailLeft" :detailRight="detailRight" @closeDialog="closeDialog"></FooterDialog>
+            </div>
         </div>
+        <WatchListDialog ref="watchDialogRef"></WatchListDialog>
     </div>
 </template>
 <script lang="ts" setup>
     import { onMounted, ref } from 'vue';
-    import { message } from 'ant-design-vue';
     import { Map } from '/@/assets/mapUtils/map';
+    import $bus from '/@/utils/bus.ts';
+    import FooterDialog from '/@/components/secondaryScreen/secondMap/components/footerDialog.vue';
+    import WatchListDialog from '/@/components/secondaryScreen/secondMap/components/watchListDialog.vue';
+    import { 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';
 
-    async function getMapData(type, params = {}) {}
+    const props = defineProps({
+        orgCode: String,
+        type: String,
+    });
+    const mapList = ref([]); //地图数据
+    // 底部表格
+    const { isShow, className, setIsShow } = useMoveClass();
 
+    function init() {
+        let mapContainer = document.querySelector('.mapContainer');
+        mapContainer && Map.initMap({ el: 'mapContainer' });
+        getMapList();
+    }
+
+    const watchDialogRef = ref();
+
+    function openWatchList(item) {
+        console.log('item', item);
+        if (item.key == 'allotDeviceNum') {
+            watchDialogRef.value.openModal(item.extData?.deptId);
+        }
+    }
+
+    const { footerList, setFooterList, setIsShowAlarm, isShowAlarm } = useFooterTable();
+
+    async function getFooterTable(orgCode) {
+        const params = {
+            orgCode: orgCode || props.orgCode,
+            dataDate: getToday(),
+        };
+        const { code, result } = await footerApi(params);
+        if (code == 200) {
+            setFooterList(result);
+        }
+    }
+
+    async function getMapList() {
+        try {
+            const { code, result } = await mapListApi({});
+            if (code == 200 && result.length > 0) {
+                const newArr = result.map((item) => ({ ...item, type: '6' }));
+                mapList.value = newArr;
+                Map.createOverlay(
+                    newArr,
+                    {
+                        content: (val) => {
+                            return `<div style="
+                                width: 21px;
+                                height: 44px;
+                                position: absolute;
+                                left: -20px;
+                                top: -20px;" title="${val?.departName}">
+                            </div>`;
+                        },
+                    },
+                    (val) => {
+                        getFooterTable(val.orgCode);
+                        setIsShow(true);
+                    }
+                );
+            }
+        } catch {}
+    }
+
+    const { detailLeft, detailRight, setDetail } = useAlarmDetail();
     onMounted(() => {
-        initMap();
+        init();
+        //点击预警定位
+        $bus.on(earlyWarning, (params) => {
+            setDetail(params);
+            drawMarker(params);
+            setIsShowAlarm(true);
+        });
     });
 
-    function initMap() {
-        Map.initMap({ el: 'mapContainer' });
+    /**
+     *@desc 预警弹窗关闭
+     */
+    function closeDialog() {
+        setIsShowAlarm(!isShowAlarm.value);
+    }
+
+    function drawMarker(data: any) {
+        const { lon, lat } = data;
+        if (!lon || !lat) return;
+        Map.createMarker(data);
     }
 </script>
 <style lang="less" scoped>
@@ -45,9 +147,87 @@
             position: relative;
         }
 
+        .form-container {
+            position: absolute;
+            right: 0;
+            top: 17px;
+            z-index: 1;
+        }
+
         .mapContainer {
-            flex: 1;
+            height: calc(100% + 20px);
             margin: 10px 0;
         }
+
+        .footer-data {
+            position: absolute;
+            left: 0;
+            right: 0;
+            bottom: var(--moveDown);
+            display: flex;
+            z-index: 999;
+
+            .empty-png {
+                position: absolute;
+                top: -16px;
+                left: 0;
+                width: 100%;
+                height: 16px;
+                background: url('../../../assets/images/bg.png') no-repeat;
+                background-position-y: -500px;
+            }
+
+            .col-item {
+                flex: 1;
+                color: #ffffff;
+                text-align: center;
+
+                .col-text {
+                    height: 40px;
+                    line-height: 40px;
+                    background: rgba(35, 132, 221);
+                }
+
+                .col-value {
+                    height: 40px;
+                    line-height: 40px;
+                    background-color: #00152b;
+                }
+            }
+        }
+
+        .footer-dialog-con {
+            position: absolute;
+            left: 0;
+            right: 0;
+            bottom: var(--moveDown);
+            z-index: 999;
+        }
+
+        .slide-top {
+            animation: slide-top 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+        }
+
+        @keyframes slide-top {
+            0% {
+                transform: translateY(0);
+            }
+            100% {
+                transform: translateY(var(--moveDown));
+            }
+        }
+
+        .slide-bottom {
+            animation: slide-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+        }
+
+        @keyframes slide-bottom {
+            0% {
+                transform: translateY(var(--moveDown));
+            }
+            100% {
+                transform: translateY(var(--moveUp));
+            }
+        }
     }
 </style>

src/components/secondaryScreen/secondMap/secondMapApi.ts

@@ -1,11 +1,15 @@
 import { get } from '/@/api/request.ts';
 
 export enum Api {
-    allList = '/health-emergency/emergency/tblAmbulanceGps/getAllList',
-    getAmbulanceList = '/health-emergency/emergency/tblAmbulanceGps/getAmbulanceList',
+    footerStatistic = '/health-watch/watch/deptStatisticData/listByorgCode',
+    mapListApi = '/health-watch/watch/watchDevice/getMapList',
+    getUserListByDeptId = '/health-watch/watch/watchDevice/getUserListByDeptId',
 }
 
-// 获取所有资源
-export const getAllList = (params) => get(Api.allList, params);
-//获取救护车GPS信息
-export const getAmbulanceList = (params) => get(Api.getAmbulanceList, params);
+/**
+ * 底部单行表格
+ * @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,15 +1,306 @@
-// export const tabList = [
-//     {
-//         name: '所有资源',
-//         type: TabType.all,
-//     },
-//     {
-//         name: '油田医院',
-//         type: TabType.youTianYiYuan,
-//     },
-//     {
-//         name: '医疗点',
-//         type: TabType.yiLiaoDian,
-//     },
-// ];
+import { cloneDeep } from 'lodash-es';
+import { 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' };
+    onMounted(() => {
+        getOptionData();
+    });
+
+    function setOrgCode(val) {
+        orgCode.value = val;
+    }
+
+    function setOption(data) {
+        option.value = data;
+        orgCode.value = data[0]?.orgCode;
+    }
+
+    async function getOptionData() {
+        const { result, code } = await allSecondaryDeparts();
+        if (code == 200) {
+            setOption(result);
+        }
+    }
+
+    return {
+        orgCode,
+        setOrgCode,
+        option,
+        setOption,
+        fieldNames,
+    };
+}
+
+export function useTimeType(t) {
+    const type = ref(t || '');
+    const timeRangeOption = [
+        {
+            label: '近一周',
+            value: 'week',
+        },
+        {
+            label: '近一月',
+            value: 'month',
+        },
+        {
+            label: '近一年',
+            value: 'year',
+        },
+    ];
+    return {
+        type,
+        timeRangeOption,
+    };
+}
+
+export function useFooterTable() {
+    const isShowAlarm = ref(false);
+
+    function setIsShowAlarm(type: boolean) {
+        isShowAlarm.value = type;
+    }
+
+    const footerList = ref([
+        {
+            name: '单位名称',
+            value: '',
+            key: 'orgName',
+            extData: {},
+        },
+        {
+            name: '单位人数',
+            value: '',
+            key: 'userCount',
+            extData: {},
+        },
+        {
+            name: '入库设备数量',
+            value: '',
+            key: 'deviceNum',
+            extData: {},
+        },
+        {
+            name: '佩戴手表人数',
+            value: '',
+            key: 'allotDeviceNum',
+            extData: {},
+        },
+        {
+            name: '近一周活跃人数',
+            value: '',
+            key: 'sevenDayNum',
+            extData: {},
+        },
+        {
+            name: '近一月活跃人数',
+            value: '',
+            key: 'thirtyDayNum',
+            extData: {},
+        },
+        {
+            name: '近一年活跃人数',
+            value: '',
+            key: 'yearDayNum',
+            extData: {},
+        },
+    ]);
+
+    function setFooterList(res: any) {
+        const arrList = cloneDeep(footerList.value);
+        if (res) {
+            console.log('resssss', res);
+            arrList.forEach((item) => {
+                item.value = res[item.key];
+                item.extData = res;
+            });
+        }
+        footerList.value = arrList;
+    }
+
+    return {
+        footerList,
+        setFooterList,
+        setIsShowAlarm,
+        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 className = ref('slide-bottom');
+
+    function setIsShow(type: boolean) {
+        isShow.value = type;
+        className.value = type ? 'slide-top' : 'slide-bottom';
+    }
+
+    return {
+        isShow,
+        className,
+        setIsShow,
+    };
+}
+
+export function useTree() {
+    const treeOption = [
+        {
+            value: 'Chinese delicious food',
+            label: '中国美食',
+            children: [
+                {
+                    value: 'key3',
+                    label: '月饼',
+                },
+            ],
+        },
+        {
+            value: 'Russia delicious food',
+            label: '俄罗斯美食',
+            children: [
+                {
+                    value: 'key6',
+                    label: '红肠',
+                },
+            ],
+        },
+    ];
+    const orgCode = ref([]);
+    return {
+        orgCode,
+        treeOption,
+    };
+}
+
+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/enum/cacheEnum.ts

@@ -0,0 +1,41 @@
+// token key
+export const TOKEN_KEY = 'TOKEN__';
+
+export const LOCALE_KEY = 'LOCALE__';
+
+// user info key
+export const USER_INFO_KEY = 'USER__INFO__';
+
+// role info key
+export const ROLES_KEY = 'ROLES__KEY__';
+
+// dict info key
+export const DB_DICT_DATA_KEY = 'UI_CACHE_DB_DICT_DATA';
+
+// project config key
+export const PROJ_CFG_KEY = 'PROJ__CFG__KEY__';
+
+// lock info
+export const LOCK_INFO_KEY = 'LOCK__INFO__KEY__';
+
+export const MULTIPLE_TABS_KEY = 'MULTIPLE_TABS__KEY__';
+
+export const APP_DARK_MODE_KEY_ = '__APP__DARK__MODE__';
+
+// base global local key
+export const APP_LOCAL_CACHE_KEY = 'COMMON__LOCAL__KEY__';
+
+// base global session key
+export const APP_SESSION_CACHE_KEY = 'COMMON__SESSION__KEY__';
+// 租户 key
+export const TENANT_ID = 'TENANT_ID';
+// login info key
+export const LOGIN_INFO_KEY = 'LOGIN__INFO__';
+
+// 聊天UID key
+export const JEECG_CHAT_UID = 'JEECG_CHAT_UID';
+
+export enum CacheTypeEnum {
+    SESSION,
+    LOCAL,
+}

src/enum/pageEnum.ts

@@ -0,0 +1,4 @@
+export enum PageEnum {
+    // basic login path
+    BASE_LOGIN = '/login',
+}

src/hooks/autoRefresh/index.ts

@@ -0,0 +1,33 @@
+import { onMounted, onUnmounted, ref } from 'vue';
+
+export function useRefresh(time = 3000, callback) {
+    const refreshState = ref(false);
+    const timer = ref(null);
+
+    function setRefreshState() {
+        timer.value = setInterval(() => {
+            refreshState.value = !refreshState.value;
+            callback();
+        }, time);
+    }
+
+    function stopRefresh() {
+        clearInterval(timer.value);
+        timer.value = null;
+    }
+
+    onMounted(() => {
+        if (timer.value != null) {
+            timer.value = null;
+        }
+        setRefreshState();
+    });
+
+    onUnmounted(() => {
+        stopRefresh();
+    });
+    return {
+        refreshState,
+        stopRefresh,
+    };
+}

src/hooks/autoRefresh/pageRefreshTime.ts

@@ -0,0 +1,3 @@
+export default {
+    //预警
+};

src/hooks/locales/useLocales.ts

@@ -0,0 +1,148 @@
+let types = {
+    api: {
+        operationFailed: '操作失败',
+        errorTip: '错误提示',
+        errorMessage: '操作失败,系统异常!',
+        timeoutMessage: '登录超时,请重新登录!',
+        apiTimeoutMessage: '接口请求超时,请刷新页面重试!',
+        apiRequestFailed: '请求出错，请稍候重试',
+        networkException: '网络异常',
+        networkExceptionMsg: '网络异常，请检查您的网络连接是否正常!',
+
+        errMsg401: '用户没有权限（令牌、用户名、密码错误）!',
+        errMsg403: '用户得到授权，但是访问是被禁止的。!',
+        errMsg404: '网络请求错误,未找到该资源!',
+        errMsg405: '网络请求错误,请求方法未允许!',
+        errMsg408: '网络请求超时!',
+        errMsg500: '服务器错误,请联系管理员!',
+        errMsg501: '网络未实现!',
+        errMsg502: '网络错误!',
+        errMsg503: '服务不可用，服务器暂时过载或维护!',
+        errMsg504: '网络超时!',
+        errMsg505: 'http版本不支持该请求!',
+
+        registerMsg: '注册成功',
+    },
+    app: { logoutTip: '温馨提醒', logoutMessage: '是否确认退出系统?', menuLoading: '菜单加载中...' },
+    errorLog: {
+        tableTitle: '错误日志列表',
+        tableColumnType: '类型',
+        tableColumnDate: '时间',
+        tableColumnFile: '文件',
+        tableColumnMsg: '错误信息',
+        tableColumnStackMsg: 'stack信息',
+
+        tableActionDesc: '详情',
+
+        modalTitle: '错误详情',
+
+        fireVueError: '点击触发vue错误',
+        fireResourceError: '点击触发资源加载错误',
+        fireAjaxError: '点击触发ajax错误',
+
+        enableMessage: '只在`/src/settings/projectSetting.ts` 内的useErrorHandle=true时生效.',
+    },
+    exception: {
+        backLogin: '返回登录',
+        backHome: '返回首页',
+        subTitle403: '抱歉，您无权访问此页面。',
+        subTitle404: '抱歉，您访问的页面不存在。',
+        subTitle500: '抱歉，服务器报告错误。',
+        noDataTitle: '当前页无数据',
+        networkErrorTitle: '网络错误',
+        networkErrorSubTitle: '抱歉，您的网络连接已断开，请检查您的网络！',
+    },
+    lock: {
+        unlock: '点击解锁',
+        alert: '锁屏密码错误',
+        backToLogin: '返回登录',
+        entry: '进入系统',
+        placeholder: '请输入锁屏密码或者用户密码',
+    },
+    login: {
+        backSignIn: '返回',
+        signInFormTitle: '登录',
+        mobileSignInFormTitle: '手机登录',
+        qrSignInFormTitle: '二维码登录',
+        signUpFormTitle: '注册',
+        forgetFormTitle: '重置密码',
+
+        signInTitle: 'Jeecg Boot',
+        signInDesc: '是中国最具影响力的 企业级低代码平台！在线开发，可视化拖拽设计，零代码实现80%的基础功能~',
+        policy: '我同意敲敲云隐私政策',
+        scanSign: `扫码后，即可完成登录`,
+        scanSuccess: `扫码成功，登录中`,
+
+        loginButton: '登录',
+        registerButton: '注册',
+        rememberMe: '记住我',
+        forgetPassword: '忘记密码?',
+        otherSignIn: '其他登录方式',
+
+        // notify
+        loginSuccessTitle: '登录成功',
+        loginSuccessDesc: '欢迎回来',
+
+        // placeholder
+        accountPlaceholder: '请输入账号',
+        passwordPlaceholder: '请输入密码',
+        inputCodePlaceholder: '请输入验证码',
+        smsPlaceholder: '请输入验证码',
+        mobilePlaceholder: '请输入手机号码',
+        policyPlaceholder: '勾选后才能注册',
+        diffPwd: '两次输入密码不一致',
+
+        loginTitle: '健康服务业务平台',
+        formTitle: '欢迎登录',
+        userName: '账号',
+        password: '密码',
+        inputCode: '验证码',
+        confirmPassword: '确认密码',
+        email: '邮箱',
+        smsCode: '短信验证码',
+        mobile: '手机号码',
+
+        subTitleText: '{0}秒后返回登录页面',
+
+        //重置密码页面中文
+        authentication: '验证身份',
+        resetLoginPassword: '重置登录密码',
+        resetSuccess: '重置成功',
+        nextStep: '下一步',
+        goToLogin: '去登录',
+    },
+    common: {
+        okText: '确认',
+        closeText: '关闭',
+        cancelText: '取消',
+        loadingText: '加载中...',
+        saveText: '保存',
+        delText: '删除',
+        resetText: '重置',
+        searchText: '搜索',
+        queryText: '查询',
+
+        inputText: '请输入',
+        chooseText: '请选择',
+
+        redo: '刷新',
+        back: '返回',
+
+        light: '亮色主题',
+        dark: '黑暗主题',
+    },
+};
+
+export function t(key) {
+    if (!key) return '';
+    if (key.includes('.')) {
+        let value = types;
+        let keys = key.split('.');
+        let obj = {};
+        for (let i = 0; i < keys.length; i++) {
+            // debugger;
+            value = value[keys[i]];
+        }
+        return value;
+    }
+}

src/hooks/web/useMessage.ts

@@ -0,0 +1,149 @@
+import type { ModalFunc, ModalFuncProps } from 'ant-design-vue/lib/modal/Modal';
+import { Modal, message as Message, notification } from 'ant-design-vue';
+import { InfoCircleFilled, CheckCircleFilled, CloseCircleFilled } from '@ant-design/icons-vue';
+import { NotificationArgsProps, ConfigProps } from 'ant-design-vue/lib/notification';
+import { isString } from '/@/utils/is';
+import { h } from 'vue';
+import { t } from '/@/hooks/locales/useLocales.ts';
+
+export interface NotifyApi {
+    info(config: NotificationArgsProps): void;
+
+    success(config: NotificationArgsProps): void;
+
+    error(config: NotificationArgsProps): void;
+
+    warn(config: NotificationArgsProps): void;
+
+    warning(config: NotificationArgsProps): void;
+
+    open(args: NotificationArgsProps): void;
+
+    close(key: String): void;
+
+    config(options: ConfigProps): void;
+
+    destroy(): void;
+}
+
+export declare type NotificationPlacement = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
+export declare type IconType = 'success' | 'info' | 'error' | 'warning';
+
+export interface ModalOptionsEx extends Omit<ModalFuncProps, 'iconType'> {
+    iconType: 'warning' | 'success' | 'error' | 'info';
+}
+
+export type ModalOptionsPartial = Partial<ModalOptionsEx> & Pick<ModalOptionsEx, 'content'>;
+
+interface ConfirmOptions {
+    info: ModalFunc;
+    success: ModalFunc;
+    error: ModalFunc;
+    warn: ModalFunc;
+    warning: ModalFunc;
+}
+
+function getIcon(iconType: string) {
+    try {
+        if (iconType === 'warning') {
+            return h(InfoCircleFilled, { class: 'modal-icon-warning' });
+        } else if (iconType === 'success') {
+            return h(CheckCircleFilled, { class: 'modal-icon-success' });
+        } else if (iconType === 'info') {
+            return h(InfoCircleFilled, { class: 'modal-icon-info' });
+        } else {
+            return h(CloseCircleFilled, { class: 'modal-icon-error' });
+        }
+    } catch (e) {
+        console.log(e);
+    }
+}
+
+function renderContent({ content }: Pick<ModalOptionsEx, 'content'>) {
+    try {
+        if (isString(content)) {
+            return h('div', h('div', { innerHTML: content as string }));
+        } else {
+            return content;
+        }
+    } catch (e) {
+        console.log(e);
+        return content;
+    }
+}
+
+/**
+ * @description: Create confirmation box
+ */
+function createConfirm(options: ModalOptionsEx): ReturnType<ModalFunc> {
+    const iconType = options.iconType || 'warning';
+    Reflect.deleteProperty(options, 'iconType');
+    const opt: ModalFuncProps = {
+        centered: true,
+        icon: getIcon(iconType),
+        ...options,
+        content: renderContent(options),
+    };
+    return Modal.confirm(opt);
+}
+
+const getBaseOptions = () => {
+    // const { t } = useI18n();
+    return {
+        okText: t('common.okText'),
+        centered: true,
+    };
+};
+
+function createModalOptions(options: ModalOptionsPartial, icon: string): ModalOptionsPartial {
+    //update-begin-author:taoyan date:2023-1-10 for: 可以自定义图标
+    let titleIcon: any = '';
+    if (options.icon) {
+        titleIcon = options.icon;
+    } else {
+        titleIcon = getIcon(icon);
+    }
+    //update-end-author:taoyan date:2023-1-10 for: 可以自定义图标
+    return {
+        ...getBaseOptions(),
+        ...options,
+        content: renderContent(options),
+        icon: titleIcon,
+    };
+}
+
+function createSuccessModal(options: ModalOptionsPartial) {
+    return Modal.success(createModalOptions(options, 'success'));
+}
+
+function createErrorModal(options: ModalOptionsPartial) {
+    return Modal.error(createModalOptions(options, 'close'));
+}
+
+function createInfoModal(options: ModalOptionsPartial) {
+    return Modal.info(createModalOptions(options, 'info'));
+}
+
+function createWarningModal(options: ModalOptionsPartial) {
+    return Modal.warning(createModalOptions(options, 'warning'));
+}
+
+notification.config({
+    placement: 'topRight',
+    duration: 3,
+});
+
+/**
+ * @description: message
+ */
+export function useMessage() {
+    return {
+        createMessage: Message,
+        notification: notification as NotifyApi,
+        createConfirm: createConfirm,
+        createSuccessModal,
+        createErrorModal,
+        createInfoModal,
+        createWarningModal,
+    };
+}

src/main.ts

@@ -2,13 +2,17 @@ import { createApp } from 'vue';
 import App from './App.vue';
 import './assets/less/index.less';
 import router from './router';
+
 import('ant-design-vue/dist/antd.less');
 import registerGlobComp from './assets/ts/antd.ts';
 import directiveMethods from './assets/ts/directive';
+import { setupStore } from './store/index.ts';
 
 const app = createApp(App);
 // 注册自定义事件
 directiveMethods(app);
 // 注册组件
 registerGlobComp(app);
+// 配置存储
+setupStore(app);
 app.use(router).mount('#app');

src/router/index.ts

@@ -3,6 +3,19 @@ import { createRouter, createWebHistory, Router, RouteRecordRaw } from 'vue-rout
 const routes: Array<RouteRecordRaw> = [
     {
         path: '/',
+        name: 'default',
+        component: () => import('/@/views/sys/login.vue'),
+    },
+    {
+        path: '/login',
+        name: 'login',
+        meta: {
+            title: '登录',
+        },
+        component: () => import('/@/views/sys/login.vue'),
+    },
+    {
+        path: '/home',
         name: 'index',
         meta: {
             title: '首页',

src/store/index.ts

@@ -0,0 +1,10 @@
+import type { App } from 'vue';
+import { createPinia } from 'pinia';
+
+const store = createPinia();
+
+export function setupStore(app: App<Element>) {
+    app.use(store);
+}
+
+export { store };

src/store/modules/user.ts

@@ -0,0 +1,99 @@
+import { defineStore } from 'pinia';
+import { loginApi, getUserInfo, doLogout } from '/@/api/user.ts';
+import { TOKEN_KEY, USER_INFO_KEY } from '/@/enum/cacheEnum.ts';
+import { PageEnum } from '/@/enum/pageEnum.ts';
+import { getAuthCache, setAuthCache } from '/@/utils/auth.ts';
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+export const useUserStore = defineStore({
+    id: 'app-user',
+    state: () => ({
+        token: '',
+        userInfo: null,
+        //登录返回信息
+        loginInfo: null,
+    }),
+    getters: {
+        getUserInfo() {
+            return (this.userInfo && Object.keys(this.userInfo).length > 0) || getAuthCache(USER_INFO_KEY) || {};
+        },
+        getLoginInfo() {
+            return this.loginInfo;
+        },
+        getToken() {
+            return this.token || getAuthCache(TOKEN_KEY);
+        },
+    },
+    actions: {
+        setToken(info) {
+            this.token = info;
+            setAuthCache(TOKEN_KEY, info);
+        },
+        setUserInfo(info) {
+            this.userInfo = info;
+            setAuthCache(USER_INFO_KEY, info);
+        },
+        setLoginInfo(info) {
+            this.loginInfo = info;
+        },
+        /**
+         * 登录事件
+         */
+        async login(params) {
+            try {
+                const { goHome = true, mode, ...loginParams } = params;
+                const data = await loginApi(loginParams, mode);
+                const { token, userInfo } = data.result;
+                // save token
+                this.setToken(token, false);
+                this.setUserInfo(userInfo);
+                return { userInfo };
+            } catch (error) {
+                return Promise.reject(error);
+            }
+        },
+        /**
+         * 登录完成处理
+         * @param goHome
+         */
+        async afterLoginAction(goHome?: boolean, data?: any): Promise<any | null> {
+            if (!this.getToken) return null;
+            //获取用户信息
+            const userInfo = await this.getUserInfoAction();
+            const { multi_depart, departs } = data;
+            await this.setLoginInfo({ multi_depart, departs, isLogin: true });
+            return data;
+        },
+        /**
+         * @desc 获取用户信息
+         */
+        async getUserInfoAction() {
+            if (!this.getToken) {
+                return null;
+            }
+            // @ts-ignore
+            const { userInfo } = await getUserInfo();
+            if (userInfo) {
+                this.setUserInfo(userInfo);
+            }
+            return userInfo;
+        },
+        /**
+         * @desc 退出登录
+         */
+        async logout(goLogin = false) {
+            if (this.getToken) {
+                try {
+                    await doLogout();
+                } catch {
+                    console.log('注销Token失败');
+                }
+            }
+            this.setToken('');
+            this.setUserInfo(null);
+            this.setLoginInfo(null);
+            goLogin && (await router.push({ path: PageEnum.BASE_LOGIN }));
+        },
+    },
+});

src/utils/auth.ts

@@ -0,0 +1,18 @@
+import { isJSON } from '/@/utils/is.ts';
+
+export function getAuthCache(key) {
+    let v = localStorage.getItem(key);
+    if (!isJSON(v)) {
+        return v;
+    } else {
+        return JSON.parse(v);
+    }
+}
+
+export function setAuthCache(key, value) {
+    if (!isJSON(value)) {
+        return localStorage.setItem(key, value);
+    } else {
+        return localStorage.setItem(key, JSON.stringify(value));
+    }
+}

src/utils/busConstant.ts

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

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/is.ts

@@ -0,0 +1,21 @@
+const objectToString = Object.prototype.toString;
+const toTypeString = (value: any) => objectToString.call(value);
+
+export const { isArray } = Array;
+export const isMap = (val: any) => toTypeString(val) === '[object Map]';
+export const isSet = (val: any) => toTypeString(val) === '[object Set]';
+export const isDate = (val: any) => val instanceof Date;
+export const isFunction = (val: any) => typeof val === 'function';
+export const isString = (val: any) => typeof val === 'string';
+export const isSymbol = (val: any) => typeof val === 'symbol';
+export const isObject = (val: null) => val !== null && typeof val === 'object';
+export const isPromise = (val: any) => isObject(val) && isFunction(val.then) && isFunction(val.catch);
+
+export function isJSON(str) {
+    try {
+        JSON.parse(str);
+        return true;
+    } catch (e) {
+        return false;
+    }
+}

src/utils/jsencrypt.ts

@@ -0,0 +1,20 @@
+import { JSEncrypt } from 'jsencrypt';
+// 公钥
+export const publicKey =
+    'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCmZfR/bA9X3vp86y1aEpvwzXJYKRRF1fLau2+05/ZtaITLpV8bhkmSf3neSy/Q9gAdvG75Fr73E+GWE+K5b0BpvIS1jDGo319+PpZR39SaZTKZ27XFXrosmJTZutN79t819HS1VseleunHAFgMVufE9U5jP6LGzl/wbkSy01GhzwIDAQAB';
+/**
+ * @Description:密码加密
+ * @date 2023/8/21
+ * @param password
+ */
+
+export function encipher(password): string | undefined {
+    if (password) {
+        // 新建JSEncrypt对象
+        const encryptor = new JSEncrypt();
+        // 设置公钥
+        encryptor.setPublicKey(publicKey);
+        // 加密数据
+        return encryptor.encrypt(password) as string;
+    }
+}

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/utils/utils.ts

@@ -22,4 +22,20 @@ export function useTopTime() {
         timeLeft,
         timeRight,
     };
+}
+
+export function getToday() {
+    return dayjs().format('YYYY-MM-DD');
+}
+
+//分钟转小时
+export function minuteToStr(minutes) {
+    // debugger;
+    if (!minutes) return '0分';
+    let h = Math.floor(minutes / 60);
+    let m = Math.floor(minutes % 60);
+    if (h) {
+        return `${h}小时${m > 0 ? `${m}分钟` : ''}`;
+    }
+    return `${m}分钟`;
 }

src/views/index.api.ts

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

src/views/indexSon.vue

@@ -14,17 +14,28 @@
         </div>
         <div class="body-d">
             <div class="body-d-left">
-                <template v-for="(item, index) in dataList" :key="`list${index}`">
-                    <item-d :title="item.title" :data="item.data" :tips="item.tips" :color="item.color" />
-                </template>
+                <screen-left :orgCode="orgCode" :type="type" />
             </div>
             <div class="body-d-middle">
-                <SecondMap />
+                <SecondMap :orgCode="orgCode" :type="type">
+                    <template #rightForm>
+                        <a-select
+                            placeholder="选择单位"
+                            v-model:value="orgCode"
+                            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>
+                    </template>
+                </SecondMap>
             </div>
             <div class="body-d-right">
-                <one-r />
-                <two-r />
-                <three-r />
+                <one-r :orgCode="orgCode" :type="type" :key="refreshState" />
+                <two-r :orgCode="orgCode" :type="type" />
+                <three-r :orgCode="orgCode" :type="type" />
             </div>
         </div>
         <div class="bottom-d"></div>
@@ -32,60 +43,22 @@
 </template>
 <script setup lang="ts">
     import { RollbackOutlined } from '@ant-design/icons-vue';
-    import { ref } from 'vue';
+    import { nextTick, onMounted, ref, watch } from 'vue';
     import OneR from '/@/components/secondaryScreen/screen-right/oneR.vue';
     import TwoR from '/@/components/secondaryScreen/screen-right/twoR.vue';
     import ThreeR from '/@/components/secondaryScreen/screen-right/threeR.vue';
-    import SecondMap from '/@/components/secondaryScreen/secondMap/secondMap.vue';
-    import * as dayjs from 'dayjs';
+    import SecondMap from '/@/components/secondaryScreen/secondMap/secondMap';
+    import screenLeft from '/@/components/secondaryScreen/screen-left/screenLeft.vue';
     import router from '/@/router';
-    import ItemD from '/@/components/item-d/item-d.vue';
+    import { useDepart, useTimeType, useTree } from '/@/components/secondaryScreen/secondMap/secondMapHooks.ts';
+    import { useTopTime } from '/@/utils/utils.ts';
+    import { useUserStore } from '/@/store/modules/user.ts';
+    import { useRefresh } from '/@/hooks/autoRefresh';
 
-    const dayTimeO = ref();
+    const { refreshState } = useRefresh(3000);
+
+    const useStore = useUserStore();
     const dayTimeT = ref();
-    const dataList = ref([
-        {
-            title: '心率',
-            data: [
-                { name: '正常', value: 234 },
-                { name: '警戒', value: 204 },
-                { name: '危险', value: 34 },
-            ],
-            color: ['#0098FA', '#FF6648', '#FB466C'],
-            tips: '正常范围60~100次/分',
-        },
-        {
-            title: '血氧',
-            data: [
-                { name: '正常', value: 234 },
-                { name: '警戒', value: 204 },
-                { name: '危险', value: 34 },
-            ],
-            color: ['#0098FA', '#FF6648', '#FB466C'],
-            tips: '血氧饱和度范围95%~100%',
-        },
-        {
-            title: '压力',
-            data: [
-                { name: '正常', value: 234 },
-                { name: '放松', value: 204 },
-                { name: '中等', value: 34 },
-                { name: '偏高', value: 78 },
-            ],
-            color: ['#1DCC79', '#0098FA', '#0CD9B5', '#6C63F0'],
-            tips: '',
-        },
-        {
-            title: '体温',
-            data: [
-                { name: '37.2', value: 234 },
-                { name: '37.2-38', value: 204 },
-                { name: '>38', value: 34 },
-            ],
-            color: ['#0098FA', '#0CD9B5', '#3B72AD'],
-            tips: '',
-        },
-    ]);
 
     function init() {
         getTime();
@@ -95,30 +68,38 @@
     }
 
     function getTime() {
-        dayTimeO.value = dayjs().format('YYYY年MM月DD日 HH时mm分ss秒');
-        dayTimeT.value =
-            dayjs().diff(dayjs('2018-10-01'), 'day') +
-            '天' +
-            getZero(dayjs().diff(dayjs(dayjs().format('YYYY-MM-DD') + ' 00:00:00'), 'hours')) +
-            '时' +
-            getZero(dayjs().diff(dayjs(dayjs().format('YYYY-MM-DD HH') + ':00:00'), 'minutes')) +
-            '分' +
-            getZero(dayjs().diff(dayjs(dayjs().format('YYYY-MM-DD HH:mm') + ':00'), 'seconds')) +
-            '秒';
-    }
-
-    function getZero(num: any) {
-        if (num < 10) {
-            return '0' + num;
-        }
-        return num;
+        const { timeRight } = useTopTime();
+        dayTimeT.value = timeRight;
     }
 
     function clickBack() {
         router.go(-1);
     }
 
-    init();
+    const { orgCode, option, fieldNames, setOrgCode } = useDepart({});
+    // const reloadPage = ref(true);
+    onMounted(() => {
+        const userInfo = useStore.getUserInfo;
+        console.log('465', userInfo);
+        let orgCode = userInfo?.secondDepart?.orgCode;
+        console.log('9999', orgCode);
+        if (orgCode) {
+            nextTick(() => {
+                setOrgCode(orgCode);
+                init();
+            });
+        }
+        // setInterval(() => {
+        //     reloadPage.value = !reloadPage.value;
+        // }, 3000);
+    });
+
+    function orgChange(val, option) {
+        console.log('val', val);
+        console.log('option', option);
+    }
+
+    const { type, timeRangeOption } = useTimeType('week');
 </script>
 <style lang="less" scoped>
     .outer {
@@ -191,12 +172,14 @@
             > :nth-child(1) {
                 width: 100%;
                 height: calc(100% / 4);
+                max-height: calc(100% / 4);
                 padding: 10px;
             }
 
             > :nth-child(2) {
                 width: 100%;
                 height: calc(100% / 4);
+                max-height: calc(100% / 4);
                 padding: 10px;
             }
 
@@ -219,6 +202,11 @@
             display: flex;
             flex-direction: column;
         }
+
+        .type-select {
+            width: 140px;
+            margin-right: 10px;
+        }
     }
 
     .bottom-d {

src/views/sys/login.vue

@@ -0,0 +1,313 @@
+<template>
+    <div class="mini-login login-background-img">
+        <div v-show="type === 'login'">
+            <div class="aui-content">
+                <div class="aui-top">
+                    <div class="aui-title">{{ t('login.loginTitle') }}</div>
+                    <div class="aui-title-image"></div>
+                </div>
+                <div class="aui-container">
+                    <div class="aui-form">
+                        <div class="aui-formBox">
+                            <div class="aui-formWell">
+                                <div class="form-title">{{ t('login.formTitle') }}</div>
+                                <div class="aui-form-box" style="height: 180px">
+                                    <a-form ref="loginRef" :model="formData" @keyup.enter.native="loginHandleClick">
+                                        <div class="aui-account">
+                                            <div class="aui-inputClear">
+                                                <i class="icon icon-code"></i>
+                                                <a-form-item>
+                                                    <a-input
+                                                        v-model:value="formData.username"
+                                                        :placeholder="t('login.userName')"
+                                                        class="fix-auto-fill"
+                                                    />
+                                                </a-form-item>
+                                            </div>
+                                            <div class="aui-inputClear">
+                                                <i class="icon icon-password"></i>
+                                                <a-form-item>
+                                                    <a-input
+                                                        v-model:value="formData.password"
+                                                        :placeholder="t('login.password')"
+                                                        class="fix-auto-fill"
+                                                        type="password"
+                                                    />
+                                                </a-form-item>
+                                            </div>
+                                            <div class="aui-inputClear">
+                                                <i class="icon icon-code"></i>
+                                                <a-form-item>
+                                                    <a-input
+                                                        v-model:value="formData.inputCode"
+                                                        :placeholder="t('login.inputCode')"
+                                                        class="fix-auto-fill"
+                                                        type="text"
+                                                    />
+                                                </a-form-item>
+                                                <div class="aui-code">
+                                                    <img
+                                                        v-if="randCodeData.requestCodeSuccess"
+                                                        :src="randCodeData.randCodeImage"
+                                                        @click="handleChangeCheckCode"
+                                                    />
+                                                    <img
+                                                        v-else
+                                                        :src="codeImg"
+                                                        style="margin-top: 2px; max-width: initial"
+                                                        @click="handleChangeCheckCode"
+                                                    />
+                                                </div>
+                                            </div>
+                                            <div class="aui-flex remember">
+                                                <div class="aui-flex-box">
+                                                    <div class="aui-choice">
+                                                        <a-input v-model:value="rememberMe" class="fix-auto-fill" type="checkbox" />
+                                                        <span class="aui-check">{{ t('login.rememberMe') }}</span>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </a-form>
+                                </div>
+                                <div class="aui-formButton">
+                                    <div class="aui-flex">
+                                        <a-button
+                                            :loading="loginLoading"
+                                            class="aui-link-login aui-flex-box"
+                                            type="primary"
+                                            @click="loginHandleClick"
+                                        >
+                                            {{ t('login.loginButton') }}
+                                        </a-button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script lang="ts" name="login-mini" setup>
+    import { getCodeInfo } from '/@/api/user';
+    import { onMounted, reactive, ref, toRaw, watch } from 'vue';
+    import codeImg from '/@/assets/images/checkcode.png';
+    import { useUserStore } from '/@/store/modules/user';
+    import { useMessage } from '/@/hooks/web/useMessage';
+    import { t } from '/@/hooks/locales/useLocales.ts';
+    import { encipher } from '/@/utils/jsencrypt';
+    import { useRouter } from 'vue-router';
+
+    const router = useRouter();
+    // console.log(t('login'));
+    const prefixCls = 'mini-login';
+    const { notification, createMessage } = useMessage();
+    const userStore = useUserStore();
+    const randCodeData = reactive<any>({
+        randCodeImage: '',
+        requestCodeSuccess: false,
+        checkKey: null,
+    });
+    const rememberMe = ref<string>('0');
+    const type = ref<string>('login');
+    //账号登录表单字段
+    const formData = reactive<any>({
+        inputCode: '',
+        username: '',
+        password: '',
+    });
+    const loginRef = ref();
+    const loginLoading = ref<boolean>(false);
+    defineProps({
+        sessionTimeout: {
+            type: Boolean,
+        },
+    });
+
+    /**
+     * 获取验证码
+     */
+    function handleChangeCheckCode() {
+        formData.inputCode = '';
+        randCodeData.checkKey = 1629428467008;
+        getCodeInfo(randCodeData.checkKey)
+            .then((res) => {
+                randCodeData.randCodeImage = res.result;
+                randCodeData.requestCodeSuccess = true;
+            })
+            .catch((e) => {});
+    }
+
+    /**
+     * 账号或者手机登录
+     */
+    async function loginHandleClick() {
+        accountLogin();
+    }
+
+    watch(
+        () => formData.password,
+        () => {
+            formData.password = formData.password.replace(/[\u4e00-\u9fa5]/g, '');
+        }
+    );
+
+    async function accountLogin() {
+        if (!formData.username) {
+            createMessage.warn(t('login.accountPlaceholder'));
+            return;
+        }
+        if (!formData.password) {
+            createMessage.warn(t('login.passwordPlaceholder'));
+            return;
+        }
+        if (!formData.inputCode) {
+            createMessage.warn(t('login.inputCodePlaceholder'));
+            return;
+        }
+        try {
+            loginLoading.value = true;
+            const { userInfo } = await userStore.login(
+                toRaw({
+                    password: encipher(formData.password) as string,
+                    // password: formData.password,
+                    username: formData.username,
+                    captcha: formData.inputCode,
+                    checkKey: randCodeData.checkKey,
+                    mode: 'none', //不要默认的错误提示
+                })
+            );
+
+            if (userInfo) {
+                notification.success({
+                    message: t('login.loginSuccessTitle'),
+                    description: `${t('login.loginSuccessDesc')}: ${userInfo.realname}`,
+                    duration: 3,
+                });
+                router.replace({ path: '/home' });
+            }
+        } catch (error) {
+            notification.error({
+                message: t('api.errorTip'),
+                description: error.message || t('login.networkExceptionMsg'),
+                duration: 3,
+            });
+            handleChangeCheckCode();
+        } finally {
+            loginLoading.value = false;
+        }
+    }
+
+    onMounted(() => {
+        //加载验证码
+        handleChangeCheckCode();
+    });
+</script>
+
+<style lang="less" scoped>
+    @import '/@/assets/loginmini/style/home.less';
+    @import '/@/assets/loginmini/style/base.less';
+</style>
+
+<style lang="less">
+    @prefix-cls: ~'mini-login';
+    @dark-bg: #293146;
+    @primary-color: #1890ff;
+    @text-color-secondary: fade(#000, 45%);
+    html[data-theme='dark'] {
+        .@{prefix-cls} {
+            background-color: @dark-bg !important;
+            background-image: none;
+
+            &::before {
+                background-image: url(/@/assets/svg/login-bg-dark.svg);
+            }
+
+            .aui-inputClear {
+                background-color: #232a3b !important;
+            }
+
+            .ant-input,
+            .ant-input-password {
+                background-color: #232a3b !important;
+            }
+
+            .ant-btn:not(.ant-btn-link):not(.ant-btn-primary) {
+                border: 1px solid #4a5569 !important;
+            }
+
+            &-form {
+                background: @dark-bg !important;
+            }
+
+            .app-iconify {
+                color: #fff !important;
+            }
+
+            .aui-inputClear input,
+            .aui-input-line input,
+            .aui-choice {
+                color: #c9d1d9 !important;
+            }
+
+            .aui-formBox {
+                background-color: @dark-bg !important;
+            }
+
+            .aui-third-text span {
+                background-color: @dark-bg !important;
+            }
+
+            .aui-form-nav .aui-flex-box {
+                color: #c9d1d9 !important;
+            }
+
+            .aui-formButton .aui-linek-code {
+                background: @dark-bg !important;
+                color: white !important;
+            }
+
+            .aui-code-line {
+                border-left: none !important;
+            }
+
+            .ant-checkbox-inner,
+            .aui-success h3 {
+                border-color: #c9d1d9;
+            }
+        }
+
+        input.fix-auto-fill,
+        .fix-auto-fill input {
+            -webkit-text-fill-color: #c9d1d9 !important;
+            box-shadow: inherit !important;
+        }
+
+        &-sign-in-way {
+            .anticon {
+                font-size: 22px !important;
+                color: #888 !important;
+                cursor: pointer !important;
+
+                &:hover {
+                    color: @primary-color !important;
+                }
+            }
+        }
+
+        .ant-divider-inner-text {
+            font-size: 12px !important;
+            color: @text-color-secondary !important;
+        }
+
+        .aui-third-login a {
+            background: transparent;
+        }
+    }
+
+    .ant-btn-primary:not(.ant-btn-background-ghost):not([disabled]) {
+        color: #fff;
+    }
+</style>

vite.config.ts

@@ -29,4 +29,11 @@ export default defineConfig({
         host: true,
         https: false,
     },
+    optimizeDeps: {
+        esbuildOptions: {
+            target: 'es2020',
+        },
+        // @iconify/iconify: The dependency is dynamically and virtually loaded by @purge-icons/generated, so it needs to be specified explicitly
+        include: ['lodash-es', 'ant-design-vue/es/locale/zh_CN', 'ant-design-vue/es/locale/en_US'],
+    },
 });