update

.env.development

@@ -1,4 +1,4 @@
 # 王昊地址
-#VITE_GLOB_API_URL=http://192.168.1.6
+VITE_GLOB_API_URL=http://192.168.1.6
 #开发环境
-VITE_GLOB_API_URL=http://cqyt.dev.yg.dt.io
+#VITE_GLOB_API_URL=http://cqyt.dev.yg.dt.io

src/App.vue

@@ -1,6 +1,15 @@
 <template>
-    <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/assets/less/amap-item.less

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

src/assets/less/index.less

@@ -63,6 +63,11 @@
   white-space: nowrap;
 }
 
+.ant-modal-mask {
+  background-color: rgba(0, 0, 0, 0.65) !important;
+}
+
+// 下拉框样式-start
 .ant-select-dropdown {
   background-color: #00152b !important;
   border-right: 1px solid #1b7ef2;
@@ -108,6 +113,28 @@
   background-color: #002e64 !important;
 }
 
+// 下拉框样式-end
+
+// 级联选择器样式-start
+.ant-cascader-menu-item {
+  color: #1b7ef2 !important;
+}
+
+.ant-cascader-menu-item:hover {
+  background-color: #002e64 !important;
+}
+
+.ant-cascader-menu-item-active {
+  color: #fff !important;
+  background-color: #002e64 !important;
+}
+
+.ant-cascader-menu-item-expand .ant-cascader-menu-item-expand-icon, .ant-cascader-menu-item-loading-icon {
+  color: #1b7ef2 !important;
+}
+
+// 级联选择器样式-end
+
 //直升机
 .helicopter {
   width: 60px;

src/assets/mapUtils/map.ts

@@ -41,11 +41,11 @@ export const Map = {
      * @desc 中国外层边界线
      */,
     drawOutLine() {
-        let geojson = new AMap.GeoJSON({
+        let geoJson = new AMap.GeoJSON({
             geoJSON: china,
-            getPolygon: function (geojson, lnglats) {
+            getPolygon: function (geoJson, lngLats) {
                 return new AMap.Polyline({
-                    path: lnglats[0],
+                    path: lngLats[0],
                     strokeColor: '#6ccffe',
                     strokeWeight: 3,
                     lineJoin: 'round', //折线拐点的绘制样式
@@ -55,22 +55,22 @@ export const Map = {
                 });
             },
         });
-        this.map.add(geojson);
+        this.map.add(geoJson);
     } /**
      * @desc 中国内层边界线
      */,
     drawInnerLine() {
-        let geojson = new AMap.GeoJSON({
+        let geoJson = new AMap.GeoJSON({
             geoJSON: chinaInner,
-            getPolygon: function (geojson, lnglats) {
+            getPolygon: function (geoJson, lngLats) {
                 return new AMap.Polyline({
-                    path: lnglats[0],
+                    path: lngLats[0],
                     strokeColor: '#359de5',
                     strokeWeight: 1,
                 });
             },
         });
-        this.map.add(geojson);
+        this.map.add(geoJson);
     }, // 清空当前地图上除了边界线的覆盖物
     removeOverlayGroup() {
         this.clearAircraft();
@@ -92,7 +92,10 @@ export const Map = {
         this.removeOverlayGroup();
         this.overlayGroup = new AMap.OverlayGroup();
         for (let i = 0; i < result.length; i++) {
-            let { type, lon, lat } = result[i];
+            let { type, lon, lat, lng } = result[i];
+            if (lng) {
+                lon = lng;
+            }
             if (!lon || !lat || !type) {
                 continue;
             }
@@ -231,7 +234,7 @@ export const Map = {
             label: {
                 content: `<div class="alarm-content" > 
                                 <div>${option?.realName},${option?.eventType_dictText}</div>
-                           </div>`,
+                          </div>`,
                 offset: new AMap.Pixel(0, -9),
                 direction: 'top',
             },

src/assets/ts/antd.ts

@@ -1,6 +1,6 @@
 import type { App } from 'vue';
-import { Form, Input, Button, Radio, Modal, Table, Select, Spin } from 'ant-design-vue';
+import { Form, Input, Button, Radio, Modal, Table, Select, Cascader, Spin, ConfigProvider } from 'ant-design-vue';
 
 export default function registerGlobComp(app: App) {
-    app.use(Button).use(Form).use(Input).use(Radio).use(Modal).use(Table).use(Select).use(Spin);
+    app.use(Button).use(Form).use(Input).use(Radio).use(Modal).use(Table).use(Select).use(Cascader).use(Spin).use(ConfigProvider);
 }

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

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

src/components/dialog/Dialog.vue

@@ -35,7 +35,6 @@
             width: 100%;
             height: 40px;
             background: url('../../assets/images/dialog.png') no-repeat;
-            background: rgba(0, 0, 0, 0.6);
             background-size: 100% 100%;
             color: #ffffff !important;
             padding-left: 2%;
@@ -59,6 +58,8 @@
         .ant-modal-close-x,
         .anticon {
             color: #999999 !important;
+            height: 40px;
+            line-height: 40px;
         }
 
         .ant-modal-footer {

src/components/item-d/pieCharts.ts

@@ -2,20 +2,36 @@ export function screenPie(chartData, total, color, formatter) {
     return {
         title: {
             text: '总人数',
-            subtext: total + '',
-            x: '38%',
-            y: '42%',
             textStyle: {
                 fontSize: 14,
                 color: '#ffffff',
                 fontWeight: 'normal',
+                align: 'center',
             },
+            subtext: total + '',
+            x: '38%',
+            y: '42%',
             subtextStyle: {
                 color: '#ffffff',
                 fontSize: 24,
                 fontWeight: 'bold',
             },
         },
+        // graphic: [
+        //     {
+        //         //环形图中间添加文字
+        //         type: 'text', //通过不同top值可以设置上下显示
+        //         left: 'center',
+        //         top: 'center',
+        //         style: {
+        //             text: 45465456,
+        //             textAlign: 'center',
+        //             fill: '#1E7CE8', //文字的颜色
+        //             fontSize: 20,
+        //             lineHeight: 20,
+        //         },
+        //     },
+        // ],
         color: color,
         tooltip: {
             trigger: 'item',

src/components/secondaryScreen/commonApi.ts

@@ -1,7 +1,22 @@
-import { get } from '/@/api/request.ts';
+import { get, post } from '/@/api/request.ts';
 
 export enum Api {
     depart = 'sys/sysDepart/allSecondaryDeparts',
+    getWatchDataByOrgCode = '/health-watch/watch/watchData/getWatchDataByOrgCode',
+    getMonitorList = '/health-watch/watch/watchMonitorData/getMonitorList',
+    sleepApi = '/health-watch/watch/watchData/getSleep',
+    stepApi = '/health-watch/watch/watchData/getSdc',
 }
 
-export const allSecondaryDeparts = () => get(Api.depart);
+// 单位-
+export const 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

@@ -1,58 +1,75 @@
 <template>
-  <template v-for="(item, index) in dataList" :key="`list${index}`">
+    <template v-for="(item, index) in dataList" :key="`list${index}`">
-    <item-d :title="item.title" :data="item.data" :tips="item.tips" :color="item.color"/>
+        <item-d :title="item.title" :data="item.data" :tips="item.tips" :color="item.color" />
-  </template>
+    </template>
 </template>
 
 <script setup lang="ts">
-import {ref} from 'vue';
+    import { onMounted, ref, watch } from 'vue';
-import ItemD from '/@/components/item-d/item-d.vue';
+    import ItemD from '/@/components/item-d/item-d.vue';
+    import { getWatchDataByOrgCode } from '/@/components/secondaryScreen/commonApi.ts';
 
-const dataList = ref([
+    const dataList = ref([
-  {
+        {
-    title: '心率',
+            title: '心率',
-    data: [
+            data: [
-      {name: '正常', value: 234},
+                { name: '正常', value: 234 },
-      {name: '警戒', value: 204},
+                { name: '警戒', value: 204 },
-      {name: '危险', value: 34},
+                { name: '危险', value: 34 },
-    ],
+            ],
-    color: ['#0098FA', '#FF6648', '#FB466C'],
+            color: ['#0098FA', '#FF6648', '#FB466C'],
-    tips: '正常范围60~100次/分',
+            tips: '正常范围60~100次/分',
-  },
+        },
-  {
+        {
-    title: '血氧',
+            title: '血氧',
-    data: [
+            data: [
-      {name: '正常', value: 234},
+                { name: '正常', value: 234 },
-      {name: '警戒', value: 204},
+                { name: '警戒', value: 204 },
-      {name: '危险', value: 34},
+                { name: '危险', value: 34 },
-    ],
+            ],
-    color: ['#0098FA', '#FF6648', '#FB466C'],
+            color: ['#0098FA', '#FF6648', '#FB466C'],
-    tips: '血氧饱和度范围95%~100%',
+            tips: '血氧饱和度范围95%~100%',
-  },
+        },
-  {
+        {
-    title: '压力',
+            title: '压力',
-    data: [
+            data: [
-      {name: '正常', value: 234},
+                { name: '正常', value: 234 },
-      {name: '放松', value: 204},
+                { name: '放松', value: 204 },
-      {name: '中等', value: 34},
+                { name: '中等', value: 34 },
-      {name: '偏高', value: 78},
+                { name: '偏高', value: 78 },
-    ],
+            ],
-    color: ['#1DCC79', '#0098FA', '#0CD9B5', '#6C63F0'],
+            color: ['#1DCC79', '#0098FA', '#0CD9B5', '#6C63F0'],
-    tips: '',
+            tips: '',
-  },
+        },
-  {
+        {
-    title: '体温',
+            title: '体温',
-    data: [
+            data: [
-      {name: '37.2', value: 234},
+                { name: '37.2', value: 234 },
-      {name: '37.2-38', value: 204},
+                { name: '37.2-38', value: 204 },
-      {name: '>38', value: 34},
+                { name: '>38', value: 34 },
-    ],
+            ],
-    color: ['#0098FA', '#0CD9B5', '#3B72AD'],
+            color: ['#0098FA', '#0CD9B5', '#3B72AD'],
-    tips: '',
+            tips: '',
-  },
+        },
-]);
+    ]);
+
+    const props = defineProps({
+        orgCode: String,
+        type: String,
+    });
+    onMounted(() => {});
+    watch(props, () => {
+        init();
+    });
+
+    async function init() {
+        const data = await getWatchDataByOrgCode(props);
+        console.log('data', data);
+    }
+
+    defineExpose({
+        init,
+    });
 </script>
 
-<style scoped>
+<style scoped></style>
-
-</style>

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

@@ -1,12 +1,9 @@
 <template>
     <div class="terminal-container">
-        <public-title title="睡眠">
+        <public-title title="睡眠" />
-            <template #right>平均睡眠时长：6小时30分</template>
-        </public-title>
         <div class="inner">
             <div class="title">
-                <span class="count">6.5h</span>
+                <span class="lightSleep">平均睡眠 {{ nums.avg }} 深睡 {{ nums.avgLong }} 浅睡 {{ nums.avgShort }}</span>
-                <span class="lightSleep">深睡2.4小时 浅睡4.1小时</span>
             </div>
             <div class="sleepChart" ref="sleepChart"></div>
         </div>
@@ -15,23 +12,55 @@
 <script setup lang="ts">
     import PublicTitle from '/@/components/publicTitle.vue';
     import * as echarts from 'echarts';
-    import { ringOption, useHealth } from '/@/components/body-d-right/bodyRightHooks';
+    import { ref, onMounted, watch } from 'vue';
-    import { ref, onMounted, unref } from 'vue';
+    import { formatStr, sleepCharts } from '/@/components/secondaryScreen/screen-right/screenRightHooks';
-    import { sleepCharts } from '/@/components/secondaryScreen/screen-right/screenRightHooks';
+    import { getSleep } from '/@/components/secondaryScreen/commonApi.ts';
 
+    const props = defineProps({
+        orgCode: String,
+        type: String,
+    });
     const sleepChart = ref<HTMLElement>();
     onMounted(() => {
         init();
     });
-    const { healthData, getValue, setHealth } = useHealth();
+    watch(props, () => {
+        init();
+    });
+    const nums = ref({
+        avgShort: '',
+        avgLong: '',
+        avg: '',
+    });
 
-    function init() {
+    async function init() {
-        initChart();
+        const params = {
+            orgCode: props.orgCode,
+            type: props.type,
+        };
+        const { code, result } = await getSleep(params);
+        if (code == 200 && result.length > 0) {
+            let time = result?.map((item) => item.dataDate);
+            let short = result?.map((item) => item.avgShortDuration);
+            let long = result?.map((item) => item.avgLongDuration);
+            let awake = result?.map((item) => item.awakeDuration);
+            let avg = result?.map((item) => item.averageDuration);
+            initChart({ time, short, long, awake, type: props.type });
+            const len = time.length;
+            if (!len > 0) {
+                return;
+            }
+            nums.value = {
+                avgShort: formatStr({ list: short, len }),
+                avgLong: formatStr({ list: long, len }),
+                avg: formatStr({ list: avg, len }), //平均
+            };
+        }
     }
 
-    function initChart() {
+    function initChart({ time, short, long, awake, type }) {
         let myChart = echarts.init(sleepChart.value);
-        let options = sleepCharts();
+        let options = sleepCharts({ time, short, long, awake, type });
         myChart.setOption(options);
         window.addEventListener('resize', () => {
             myChart.resize();
@@ -61,4 +90,4 @@
             height: 80%;
         }
     }
-</style>
+</style>

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

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

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

@@ -1,178 +1,188 @@
 <template>
-  <div>
+    <div>
-    <public-title title="预警"/>
+        <public-title title="预警" />
-    <div class="inner-screen">
+        <div class="inner-screen">
-      <a-table
+            <a-table
-          class="ant-table-striped"
+                :scroll="{
-          :dataSource="tableInfo.dataSource"
+                    y: tableHeight,
-          :columns="tableInfo.columns"
+                }"
-          :pagination="tableInfo.pagination"
+                style="overflow-y: auto"
-          :rowClassName="(record, index) => (index % 2 === 1 ? 'table-default' : 'table-striped')"
+                :columns="monitorColumns"
-      >
+                :dataSource="dataSource"
-        <template #address="{text,record}">
+                :pagination="pagination"
-          <div class="police-times">
+                :rowClassName="(record, index) => (index % 2 === 1 ? 'table-default' : 'table-striped')"
-            <span class="police-text">{{ record.address }}</span>
+                class="ant-table-striped"
-            <span class="police-icon" @click="handlePoliceDetail(record)"></span>
+            >
-          </div>
+                <template #address="{ text, record }">
-        </template>
+                    <div class="police-times" @click="handlePoliceDetail(record)">
-      </a-table>
+                        <span class="position"></span>
+                    </div>
+                </template>
+            </a-table>
+        </div>
     </div>
-  </div>
 </template>
-<script setup lang="ts">
+<script lang="ts" setup>
-import {ref} from 'vue';
+    import { onMounted, onUnmounted, ref } from 'vue';
-import PublicTitle from '/@/components/publicTitle.vue';
+    import PublicTitle from '/@/components/publicTitle.vue';
+    import { getMonitorList } from '/@/components/secondaryScreen/commonApi.ts';
+    import { monitorColumns } from '/@/components/secondaryScreen/screen-right/screenRightHooks.ts';
+    import $bus from '/@/utils/bus.ts';
+    import { earlyWarning } from '/@/utils/busConstant.ts';
 
-const tableInfo = ref({
+    const tableHeight = ref(0);
-  dataSource: [
+    const dataSource = ref([]);
-    {
+    const pagination = ref({
-      key: '1',
+        current: 1,
-      name: '胡彦斌',
+        pageSize: 10,
-      age: 32,
+        total: 0,
-      address: '西湖区湖底公园1号',
+        onChange: pageChange,
-    },
+    });
-    {
-      key: '2',
-      name: '胡彦祖',
-      age: 42,
-      address: '西湖区湖底公园1号',
-    },
-    {
-      key: '3',
-      name: '胡彦祖',
-      age: 42,
-      address: '西湖区湖底公园1号',
-    },
-  ],
-  columns: [
-    {
-      title: '姓名',
-      dataIndex: 'name',
-      key: 'name',
-      align: 'center',
-    },
-    {
-      title: '年龄',
-      dataIndex: 'age',
-      key: 'age',
-      align: 'right',
-    },
-    {
-      title: '住址',
-      key: 'address',
-      align: 'center',
-      slots: {customRender: 'address'}
-    },
-  ],
-  pagination: {
-    current: 1,
-    pageSize: 2,
-    total: 10,
-  },
-});
 
-function handlePoliceDetail(record) {
+    function handlePoliceDetail(record) {
-  console.log(record)
+        $bus.emit(earlyWarning, record);
-}
+    }
+
+    onMounted(() => {
+        init();
+        setHeight();
+        window.addEventListener('resize', setHeight);
+    });
+    onUnmounted(() => {
+        window.removeEventListener('resize', setHeight);
+    });
+
+    function setHeight() {
+        tableHeight.value = document.querySelector('.inner-screen').getBoundingClientRect().height - 60;
+    }
+
+    async function init() {
+        const { pageSize, current } = pagination.value;
+        const { code, result } = await getMonitorList({ pageSize, pageNo: current });
+        if (code == 200) {
+            dataSource.value = [...result.records, ...result.records.map((item, i) => ({ ...item, id: item.id + i }))];
+            pagination.value.total = result.total * 2;
+        }
+    }
+
+    function pageChange(page, pageS) {
+        pagination.value.current = page;
+        pagination.value.pageSize = pageS;
+        init();
+    }
 </script>
-<style scoped lang="less">
+<style lang="less" scoped>
-.inner-screen {
+    .inner-screen {
-  width: 100%;
+        width: 100%;
-  height: calc(100% - 40px);
+        height: calc(100% - 40px);
-  margin: 20px 0;
+        margin: 20px 0;
 
-  .police-times {
+        .police-times {
-    display: flex;
+            display: flex;
-    align-items: center;
+            align-items: center;
-    justify-content: center;
+            justify-content: center;
+            cursor: pointer !important;
 
-    .police-text {
+            .position {
-      padding-right: 20px;
+                margin-left: 5px;
+                display: inline-block;
+                width: 18px;
+                height: 18px;
+                background: url('/@/assets/img/position.png') no-repeat;
+                background-size: 100% 100%;
+                cursor: pointer;
+            }
+        }
+
+        :deep(.ant-table-thead) {
+            display: none !important;
+        }
+
+        :deep(.ant-table) {
+            background-color: transparent;
+            //pointer-events: none;
+        }
+
+        :deep(.ant-table-tbody > tr > td) {
+            border-bottom: none;
+            padding: 6px 4px;
+        }
+
+        :deep(.ant-table-row:hover) {
+            background-color: transparent;
+            color: #ffffff;
+        }
     }
 
-    .police-icon {
+    //奇行
-      display: inline-block;
+    .ant-table-striped :deep(.table-striped) td {
-      width: 18px;
+        background-color: #0a0a0c;
-      height: 18px;
+        color: #ffffff;
-      background: url('/@/assets/images/terminal.png') no-repeat;
-      background-size: 100% 100%;
-      cursor: pointer;
     }
-  }
 
-  :deep(.ant-table-thead) {
+    //偶行
-    display: none !important;
+    .ant-table-striped :deep(.table-default) td {
-  }
+        color: #ffffff;
+        background: none !important;
+    }
 
-  :deep(.ant-table) {
+    //奇行-hover
-    background-color: transparent;
+    :deep(.ant-table-tbody > tr.ant-table-row.table-striped:hover > td, .ant-table-tbody > tr > td.table-striped) {
-    pointer-events: none;
+        background-color: #0a0a0c !important;
-  }
+        color: #ffffff;
+    }
 
-  :deep(.ant-table-tbody > tr > td) {
+    //偶行-hover
-    border-bottom: none;
+    :deep(.ant-table-tbody > tr.ant-table-row.table-default:hover > td, .ant-table-tbody > tr > td.table-default) {
-  }
+        color: #ffffff;
+        background: none !important;
+    }
 
-  :deep(.ant-table-row:hover) {
+    // 分页
-    background-color: transparent;
+    :deep(.ant-pagination-prev .ant-pagination-item-link, .ant-pagination-next .ant-pagination-item-link) {
-    color: #ffffff;
+        background-color: #1f2935;
-  }
+        color: #8291a9;
-}
+        border: none;
+    }
 
-.ant-table-striped :deep(.table-striped) td {
+    :deep(.ant-pagination-item) {
-  background-color: #0a0a0c;
+        background-color: #1f2935;
-  color: #ffffff;
+        color: #ffffff;
-}
+        border: none;
+    }
 
-.ant-table-striped :deep(.table-default) td {
+    // 当前页选中的样式
-  color: #ffffff;
+    :deep(.ant-pagination-item-active) {
-}
+        background-color: #0081ff;
+    }
 
-// 分页
+    :deep(.ant-pagination-item-active a) {
-:deep(.ant-pagination-prev .ant-pagination-item-link, .ant-pagination-next .ant-pagination-item-link) {
+        color: #ffffff;
-  background-color: #1f2935;
+    }
-  color: #8291a9;
-  border: none;
-}
 
-:deep(.ant-pagination-item) {
+    :deep(.ant-pagination-item a) {
-  background-color: #1f2935;
+        color: #ffffff;
-  color: #ffffff;
+    }
-  border: none;
-}
 
-// 当前页选中的样式
+    :deep(.ant-pagination-prev .ant-pagination-item-link, .ant-pagination-next .ant-pagination-item-link) {
-:deep(.ant-pagination-item-active) {
+        color: #ffffff;
-  background-color: #0081ff;
+        background-color: #1f2935;
-}
+    }
 
-:deep(.ant-pagination-item-active a) {
+    // 省略样式
-  color: #ffffff;
+    :deep(.ant-pagination-jump-next .ant-pagination-item-container .ant-pagination-item-ellipsis) {
-}
+        color: #ffffff;
+    }
 
-:deep(.ant-pagination-item a) {
+    // 省略鼠标移入样式
-  color: #ffffff;
+    :deep(.ant-pagination-jump-next .ant-pagination-item-container .ant-pagination-item-link-icon) {
-}
+        color: rgba(255, 255, 255, 0.4);
+    }
 
-:deep(.ant-pagination-prev .ant-pagination-item-link, .ant-pagination-next .ant-pagination-item-link) {
+    // 下一页
-  color: #ffffff;
+    :deep(.ant-pagination-next .ant-pagination-item-link) {
-  background-color: #1f2935;
+        background-color: #1f2935;
-}
+        color: #8291a9;
-
+        border: none;
-// 省略样式
+    }
-:deep(.ant-pagination-jump-next .ant-pagination-item-container .ant-pagination-item-ellipsis) {
+</style>
-  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,56 +1,62 @@
 <template>
-  <div>
+    <div>
-    <public-title title="步数"/>
+        <public-title title="步数" />
-    <div class="inner" ref="healthChart"></div>
+        <div class="inner" ref="healthChart"></div>
-  </div>
+    </div>
 </template>
 <script setup lang="ts">
-import {ref, unref, onMounted} from 'vue';
+    import { ref, unref, onMounted } from 'vue';
-import * as echarts from 'echarts';
+    import * as echarts from 'echarts';
-import PublicTitle from '/@/components/publicTitle.vue';
+    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 {useSpin} from '/@/components/body-d-left/bodyLeftHooks.ts';
+    import { useStep } from '/@/components/secondaryScreen/screen-right/screenRightHooks.ts';
-import {useHealth} from '/@/components/secondaryScreen/screen-right/screenRightHooks.ts';
+    import { screenPie } from '/@/components/item-d/pieCharts.ts';
-import {screenPie} from '/@/components/item-d/pieCharts.ts';
+    import { getStep } from '/@/components/secondaryScreen/commonApi.ts';
 
-const {setSpin, spinning} = useSpin();
+    const props = defineProps({
-const healthChart = ref<HTMLElement>();
+        orgCode: String,
+        type: String,
+    });
+    const { setSpin, spinning } = useSpin();
+    const healthChart = ref<HTMLElement>();
 
-const color = ref(['#B750BE', '#6C63F0', '#3AACFF', '#ED589D', '#FB466C']);
+    const color = ref(['#B750BE', '#6C63F0', '#3AACFF', '#ED589D', '#FB466C']);
-onMounted(() => {
+    onMounted(() => {
-  init();
+        init();
-});
+    });
-const {healthData, getValue, setHealth} = useHealth();
+    const { stepData, getValue, setStep } = useStep();
 
-async function init() {
+    async function init() {
-  try {
+        try {
-    const {code, result} = await getHealthDataList({});
+            const params = {
-    setSpin(true);
+                orgCode: props.orgCode,
-    if (code != 200) {
+                type: props.type,
-      return;
+            };
+            const { code, result } = await getStep(params);
+            setSpin(true);
+            if (code != 200) {
+                return;
+            }
+            setStep(result);
+            initChart(unref(stepData), '15000');
+        } catch {
+            initChart(unref(stepData), 0);
+        }
     }
-    setHealth(result);
-    const yData = unref(getValue);
-    let total = yData.reduce((accumulator, currentValue) => Number(accumulator) + Number(currentValue), 0);
-    initChart(unref(healthData), '89');
-  } catch {
-    initChart(unref(healthData), 0);
-  }
-}
 
-function initChart(chartData, total) {
+    function initChart(chartData, total) {
-  let myChart = echarts.init(healthChart.value);
+        let myChart = echarts.init(healthChart.value);
-  let options = screenPie(chartData, total, color.value, '{c}');
+        let options = screenPie(chartData, total, color.value, '{c}');
-  myChart.setOption(options);
+        myChart.setOption(options);
-  window.addEventListener('resize', () => {
+        window.addEventListener('resize', () => {
-    myChart.resize();
+            myChart.resize();
-  });
+        });
-}
+    }
 </script>
 <style scoped lang="less">
-.inner {
+    .inner {
-  width: 100%;
+        width: 100%;
-  margin: 0 auto;
+        margin: 0 auto;
-  height: calc(100% - 40px);
+        height: calc(100% - 40px);
-}
+    }
-</style>
+</style>

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

@@ -33,7 +33,6 @@
     });
 
     function pageChange(page, pageS) {
-        // debugger;
         current.value = page;
         pageSize.value = pageS;
     }
@@ -169,7 +168,7 @@
             key: 'address2',
         },
     ]);
-    const visible = ref(true);
+    const visible = ref(false);
 
     function openModal() {
         console.log('1');
@@ -226,6 +225,10 @@
         border-bottom: 1px solid #2384dd;
     }
 
+    :deep(.ant-table-tbody > tr.ant-table-row:hover > td, .ant-table-tbody > tr > td.ant-table-cell-row-hover) {
+        background: transparent;
+    }
+
     //#00152b
     // 分页
     :deep(.ant-pagination-prev .ant-pagination-item-link, .ant-pagination-next .ant-pagination-item-link) {

src/components/secondaryScreen/secondMap/secondMap.vue

@@ -22,7 +22,12 @@
                     <div class="col-value nowrap" :title="item.value">{{ item?.value }}</div>
                 </div>
             </div>
-            <div class="footer-dialog-con" style="--moveUp: 50px; --moveDown: -50px" :class="show ? 'slide-top' : 'slide-bottom'" v-show="false">
+            <div
+                class="footer-dialog-con"
+                style="--moveUp: 110px; --moveDown: -50px"
+                :class="show ? 'slide-top' : 'slide-bottom'"
+                v-show="isShowAlarm"
+            >
                 <FooterDialog></FooterDialog>
             </div>
         </div>
@@ -31,12 +36,14 @@
 </template>
 <script lang="ts" setup>
     import { onMounted, ref, watch } from 'vue';
-    import { message } from 'ant-design-vue';
     import { Map } from '/@/assets/mapUtils/map';
+    import $bus from '/@/utils/bus.ts';
     import FooterDialog from '/@/components/secondaryScreen/secondMap/components/footerDialog.vue';
     import WatchListDialog from '/@/components/secondaryScreen/secondMap/components/watchListDialog.vue';
     import { useFooterTable, useMoveClass } from '/@/components/secondaryScreen/secondMap/secondMapHooks.ts';
-    import { footerApi } from '/@/components/secondaryScreen/secondMap/secondMapApi.ts';
+    import { footerApi, mapListApi } from '/@/components/secondaryScreen/secondMap/secondMapApi.ts';
+    import { earlyWarning } from '/@/utils/busConstant.ts';
+    import { getToday } from '/@/utils/utils.ts';
 
     const show = ref(false);
 
@@ -72,52 +79,13 @@
             count: 60,
         },
     ];
-    onMounted(() => {
-        init();
-        getFooterTable();
-    });
 
     // 底部表格
     const { isShow, className, setIsShow } = useMoveClass();
 
     function init() {
         Map.initMap({ el: 'mapContainer' });
-        Map.createOverlay(
+        getMapList();
-            markerList,
-            {
-                content: function (val) {
-                    return `<div style="color: red;
-                                width: 21px;
-                                height: 44px;
-                                position: absolute;
-                                left: -20px;
-                                top: -20px;" title="${val.name}">
-                            </div>`;
-                },
-            },
-            (val) => {
-                console.log('info', val);
-                const obj = {
-                    id: '1731587716383043586',
-                    orgCode: 'A01A01',
-                    orgCodeLeaf: 'A01A01A01',
-                    userCount: 4 + Math.random() * 4,
-                    deviceNum: 0,
-                    allotDeviceNum: Math.random() * 4,
-                    sevenDayNum: 1 + Math.random() * 4,
-                    fourteenDayNum: 1 + Math.random() * 4,
-                    heartRateErrorNum: Math.random() * 4,
-                    spoErrorNum: Math.random() * 4,
-                    stressErrorNum: Math.random() * 4,
-                    tempErrorNum: Math.random() * 4,
-                    dataDate: '2023-12-04 00:00:00',
-                    orgName: '安全环保监督部',
-                    deptName: '定边监督站',
-                };
-                setIsShow(true);
-                setFooterList(obj);
-            }
-        );
     }
 
     const watchDialogRef = ref();
@@ -128,25 +96,70 @@
         }
     }
 
-    const { footerList, setFooterList } = useFooterTable();
+    const { footerList, setFooterList, setIsShowAlarm, isShowAlarm } = useFooterTable();
     watch(
         () => props.orgCode,
         () => {
             setIsShow(false);
-            // getFooterTable();
         }
     );
 
-    async function getFooterTable() {
+    async function getFooterTable(orgCode) {
         const params = {
-            orgCode: 'A01A01' || props.orgCode,
+            orgCode: orgCode || props.orgCode,
-            // dataDate: getToday(),
+            dataDate: getToday(),
         };
         const { code, result } = await footerApi(params);
         if (code == 200) {
             setFooterList(result.records[0]);
         }
     }
+
+    const mapList = ref([]);
+
+    async function getMapList() {
+        const { code, result } = await mapListApi();
+        if (code == 200 && result.length > 0) {
+            const newArr = result.map((item) => ({ ...item, type: '6' }));
+            mapList.value = newArr;
+            Map.createOverlay(
+                newArr,
+                {
+                    content: function (val) {
+                        return `<div style="color: red;
+                                width: 21px;
+                                height: 44px;
+                                position: absolute;
+                                left: -20px;
+                                top: -20px;" title="${val.departName}">
+                            </div>`;
+                    },
+                },
+                (val) => {
+                    console.log('val', val);
+                    getFooterTable(val.orgCode);
+                    setIsShow(true);
+                }
+            );
+        }
+    }
+
+    onMounted(() => {
+        init();
+
+        $bus.on(earlyWarning, (params) => {
+            console.log('params', params);
+            drawMarker(params);
+            isShow.value ? setIsShow(true) : setIsShow(false);
+            isShowAlarm.value ? setIsShowAlarm(true) : setIsShowAlarm(false);
+        });
+    });
+
+    function drawMarker(data) {
+        const { lon, lat } = data;
+        if (!lon || !lat) return;
+        Map.createMarker(data);
+    }
 </script>
 <style lang="less" scoped>
     .center-map {

src/components/secondaryScreen/secondMap/secondMapApi.ts

@@ -2,6 +2,8 @@ import { get } from '/@/api/request.ts';
 
 export enum Api {
     footerStatistic = '/health-watch/watch/deptStatisticData/list',
+    mapListApi = '/health-watch/watch/watchDevice/getMapList',
 }
 
-export const footerApi = (params) => get(Api.footerStatistic, params);
+export const footerApi = (params) => get(Api.footerStatistic, params);
+export const mapListApi = (params) => get(Api.mapListApi, params);

src/components/secondaryScreen/secondMap/secondMapHooks.ts

@@ -69,6 +69,12 @@ export function useTimeType(t) {
 }
 
 export function useFooterTable() {
+    const isShowAlarm = ref(false)
+
+    function setIsShowAlarm(type: boolean) {
+        isShowAlarm.value = type
+    }
+
     const footerList = ref([
         {
             name: '单位名称',
@@ -121,7 +127,9 @@ export function useFooterTable() {
 
     return {
         footerList,
-        setFooterList
+        setFooterList,
+        setIsShowAlarm,
+        isShowAlarm
     }
 }
 
@@ -140,4 +148,34 @@ export function useMoveClass() {
         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
+    }
 }

src/utils/busConstant.ts

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

src/utils/utils.ts

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

src/views/index.api.ts

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

src/views/indexSon.vue

@@ -1,191 +1,195 @@
 <template>
-  <div class="outer">
+    <div class="outer">
-    <div class="title-d">
+        <div class="title-d">
-      <div class="title-d-left">
+            <div class="title-d-left">
                 <span style="cursor: pointer" @click="clickBack">
                     <a-space>
-                        <rollback-outlined/>
+                        <rollback-outlined />
                     </a-space>
                     返回
                 </span>
-      </div>
+            </div>
-      <div class="title-d-middle"> 应急就医服务中心</div>
+            <div class="title-d-middle"> 应急就医服务中心</div>
-      <div class="title-d-right"> 累计运行时间：{{ dayTimeT }}</div>
+            <div class="title-d-right"> 累计运行时间：{{ dayTimeT }}</div>
+        </div>
+        <div class="body-d">
+            <div class="body-d-left">
+                <screen-left :orgCode="orgCode" :type="type" />
+            </div>
+            <div class="body-d-middle">
+                <SecondMap :orgCode="orgCode" :type="type">
+                    <template #rightForm>
+                        <a-select
+                            placeholder="选择单位"
+                            v-model:value="orgCode"
+                            class="type-select"
+                            :options="option"
+                            :field-names="fieldNames"
+                        ></a-select>
+                        <!--                        <a-cascader v-model:value="treeValue" :options="treeOption" placeholder="选择单位" :open="true" :changeOnSelect="true" />-->
+                        <a-select placeholder="选择时间范围" v-model:value="type" class="type-select" :options="timeRangeOption"></a-select>
+                    </template>
+                </SecondMap>
+            </div>
+            <div class="body-d-right">
+                <one-r :orgCode="orgCode" :type="type" />
+                <two-r :orgCode="orgCode" :type="type" />
+                <three-r :orgCode="orgCode" :type="type" />
+            </div>
+        </div>
+        <div class="bottom-d"></div>
     </div>
-    <div class="body-d">
-      <div class="body-d-left">
-        <screen-left/>
-      </div>
-      <div class="body-d-middle">
-        <SecondMap :orgCode="orgCode" :type="type">
-          <template #rightForm>
-            <a-select
-                placeholder="选择单位"
-                v-model:value="orgCode"
-                class="type-select"
-                :options="option"
-                :field-names="fieldNames"
-            ></a-select>
-            <a-select placeholder="选择时间范围" v-model:value="type" class="type-select"
-                      :options="timeRangeOption"></a-select>
-          </template>
-        </SecondMap>
-      </div>
-      <div class="body-d-right">
-        <one-r/>
-        <two-r/>
-        <three-r/>
-      </div>
-    </div>
-    <div class="bottom-d"></div>
-  </div>
 </template>
 <script setup lang="ts">
-import {RollbackOutlined} from '@ant-design/icons-vue';
+    import { RollbackOutlined } from '@ant-design/icons-vue';
-import {ref} from 'vue';
+    import { ref, watch } from 'vue';
-import OneR from '/@/components/secondaryScreen/screen-right/oneR.vue';
+    import OneR from '/@/components/secondaryScreen/screen-right/oneR.vue';
-import TwoR from '/@/components/secondaryScreen/screen-right/twoR.vue';
+    import TwoR from '/@/components/secondaryScreen/screen-right/twoR.vue';
-import ThreeR from '/@/components/secondaryScreen/screen-right/threeR.vue';
+    import ThreeR from '/@/components/secondaryScreen/screen-right/threeR.vue';
-import SecondMap from '/@/components/secondaryScreen/secondMap/secondMap';
+    import SecondMap from '/@/components/secondaryScreen/secondMap/secondMap';
-import screenLeft from '/@/components/secondaryScreen/screen-left/screenLeft.vue';
+    import screenLeft from '/@/components/secondaryScreen/screen-left/screenLeft.vue';
-import router from '/@/router';
+    import router from '/@/router';
-import {useDepart, useTimeType} from '/@/components/secondaryScreen/secondMap/secondMapHooks.ts';
+    import { useDepart, useTimeType, useTree } from '/@/components/secondaryScreen/secondMap/secondMapHooks.ts';
-import {useTopTime} from '/@/utils/utils.ts';
+    import { useTopTime } from '/@/utils/utils.ts';
 
-const dayTimeT = ref();
+    const dayTimeT = ref();
 
-function init() {
+    function init() {
-  getTime();
+        getTime();
-  setInterval(() => {
+        setInterval(() => {
-    getTime();
+            getTime();
-  }, 1000);
+        }, 1000);
-}
+    }
 
-init();
+    init();
 
-function getTime() {
+    function getTime() {
-  const {timeRight} = useTopTime();
+        const { timeRight } = useTopTime();
-  dayTimeT.value = timeRight;
+        dayTimeT.value = timeRight;
-}
+    }
 
-function clickBack() {
+    function clickBack() {
-  router.go(-1);
+        router.go(-1);
-}
+    }
 
-const {orgCode, option, fieldNames} = useDepart({});
+    const { orgCode: treeValue, treeOption } = useTree();
-const {type, timeRangeOption} = useTimeType('week');
+    watch(treeValue, (n) => {
+        console.log('n', n);
+    });
+    const { orgCode, option, fieldNames } = useDepart({});
+    const { type, timeRangeOption } = useTimeType('week');
 </script>
 <style lang="less" scoped>
-.outer {
+    .outer {
-  height: 100%;
+        height: 100%;
-  box-sizing: border-box;
+        box-sizing: border-box;
-  background: url('../assets/images/bg.png') no-repeat;
+        background: url('../assets/images/bg.png') no-repeat;
-  background-size: 100% 100%;
+        background-size: 100% 100%;
-}
-
-.title-d {
-  height: 80px;
-  line-height: 80px;
-  display: flex;
-  padding-bottom: 9px;
-  background: url('../assets/images/top-title.png') no-repeat;
-  background-size: 100% 100%;
-
-  .title-d-left,
-  .title-d-middle,
-  .title-d-right {
-    font-size: 27px;
-    color: #ffffff;
-    line-height: 60px;
-    text-align: center;
-  }
-
-  .title-d-left {
-    text-align: left !important;
-    padding-left: 80px;
-  }
-
-  > :nth-child(1) {
-    width: 29%;
-  }
-
-  > :nth-child(2) {
-    width: 42%;
-    font-size: 40px;
-    font-weight: bold;
-  }
-
-  > :nth-child(3) {
-    width: 29%;
-  }
-}
-
-.body-d {
-  display: flex;
-  height: calc(100% - 120px);
-  //padding-top: 10px;
-
-  > :nth-child(1) {
-    width: 25%;
-  }
-
-  > :nth-child(2) {
-    width: 50%;
-  }
-
-  > :nth-child(3) {
-    width: 25%;
-  }
-
-  .body-d-left,
-  .body-d-right {
-    text-align: center;
-  }
-
-  .body-d-right {
-    > :nth-child(1) {
-      width: 100%;
-      height: calc(100% / 4);
-      max-height: calc(100% / 4);
-      padding: 10px;
     }
 
-    > :nth-child(2) {
+    .title-d {
-      width: 100%;
+        height: 80px;
-      height: calc(100% / 4);
+        line-height: 80px;
-      max-height: calc(100% / 4);
+        display: flex;
-      padding: 10px;
+        padding-bottom: 9px;
+        background: url('../assets/images/top-title.png') no-repeat;
+        background-size: 100% 100%;
+
+        .title-d-left,
+        .title-d-middle,
+        .title-d-right {
+            font-size: 27px;
+            color: #ffffff;
+            line-height: 60px;
+            text-align: center;
+        }
+
+        .title-d-left {
+            text-align: left !important;
+            padding-left: 80px;
+        }
+
+        > :nth-child(1) {
+            width: 29%;
+        }
+
+        > :nth-child(2) {
+            width: 42%;
+            font-size: 40px;
+            font-weight: bold;
+        }
+
+        > :nth-child(3) {
+            width: 29%;
+        }
     }
 
-    > :nth-child(3) {
+    .body-d {
-      width: 100%;
+        display: flex;
-      height: calc(100% / 2);
+        height: calc(100% - 120px);
-      padding: 10px;
+        //padding-top: 10px;
+
+        > :nth-child(1) {
+            width: 25%;
+        }
+
+        > :nth-child(2) {
+            width: 50%;
+        }
+
+        > :nth-child(3) {
+            width: 25%;
+        }
+
+        .body-d-left,
+        .body-d-right {
+            text-align: center;
+        }
+
+        .body-d-right {
+            > :nth-child(1) {
+                width: 100%;
+                height: calc(100% / 4);
+                max-height: calc(100% / 4);
+                padding: 10px;
+            }
+
+            > :nth-child(2) {
+                width: 100%;
+                height: calc(100% / 4);
+                max-height: calc(100% / 4);
+                padding: 10px;
+            }
+
+            > :nth-child(3) {
+                width: 100%;
+                height: calc(100% / 2);
+                padding: 10px;
+            }
+        }
+
+        .body-d-left {
+            > :nth-child(n) {
+                width: 100%;
+                height: calc(100% / 4);
+                padding: 10px;
+            }
+        }
+
+        .body-d-middle {
+            display: flex;
+            flex-direction: column;
+        }
+
+        .type-select {
+            width: 140px;
+            margin-right: 10px;
+        }
     }
-  }
 
-  .body-d-left {
+    .bottom-d {
-    > :nth-child(n) {
+        height: 40px;
-      width: 100%;
+        background: url('../assets/images/bottom-b.png') no-repeat;
-      height: calc(100% / 4);
+        background-size: 100% 100%;
-      padding: 10px;
     }
-  }
-
-  .body-d-middle {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .type-select {
-    width: 140px;
-    margin-right: 10px;
-  }
-}
-
-.bottom-d {
-  height: 40px;
-  background: url('../assets/images/bottom-b.png') no-repeat;
-  background-size: 100% 100%;
-}
 </style>

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