update

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}`">
-    <item-d :title="item.title" :data="item.data" :tips="item.tips" :color="item.color"/>
-  </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" />
+    </template>
 </template>
 
 <script setup lang="ts">
-import {ref} from 'vue';
-import ItemD from '/@/components/item-d/item-d.vue';
+    import { onMounted, ref, watch } from 'vue';
+    import ItemD from '/@/components/item-d/item-d.vue';
+    import { getWatchDataByOrgCode } from '/@/components/secondaryScreen/commonApi.ts';
 
-const dataList = ref([
-  {
-    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: '',
-  },
-]);
+    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: '',
+        },
+    ]);
+
+    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>
+<style scoped></style>

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

@@ -1,12 +1,9 @@
 <template>
     <div class="terminal-container">
-        <public-title title="睡眠">
-            <template #right>平均睡眠时长：6小时30分</template>
-        </public-title>
+        <public-title title="睡眠" />
         <div class="inner">
             <div class="title">
-                <span class="count">6.5h</span>
-                <span class="lightSleep">深睡2.4小时 浅睡4.1小时</span>
+                <span class="lightSleep">平均睡眠 {{ nums.avg }} 深睡 {{ nums.avgLong }} 浅睡 {{ nums.avgShort }}</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, unref } from 'vue';
-    import { sleepCharts } from '/@/components/secondaryScreen/screen-right/screenRightHooks';
+    import { ref, onMounted, watch } from 'vue';
+    import { formatStr, 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() {
-        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() {
+    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%',
-            right: '3%',
-            bottom: '20%',
+            left: '0%',
+            right: '0%',
+            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: {
-                color: '#ffffff'
+            axisTick: {
+                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: [
-                    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 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) {
-        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;
         });
     }
 
     return {
-        healthData,
-        getValue,
-        getName,
-        setHealth,
+        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,178 +1,188 @@
 <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')"
-      >
-        <template #address="{text,record}">
-          <div class="police-times">
-            <span class="police-text">{{ record.address }}</span>
-            <span class="police-icon" @click="handlePoliceDetail(record)"></span>
-          </div>
-        </template>
-      </a-table>
+    <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 } from 'vue';
+    import PublicTitle from '/@/components/publicTitle.vue';
+    import { getMonitorList } from '/@/components/secondaryScreen/commonApi.ts';
+    import { monitorColumns } from '/@/components/secondaryScreen/screen-right/screenRightHooks.ts';
+    import $bus from '/@/utils/bus.ts';
+    import { earlyWarning } from '/@/utils/busConstant.ts';
 
-const tableInfo = ref({
-  dataSource: [
-    {
-      key: '1',
-      name: '胡彦斌',
-      age: 32,
-      address: '西湖区湖底公园1号',
-    },
-    {
-      key: '2',
-      name: '胡彦祖',
-      age: 42,
-      address: '西湖区湖底公园1号',
-    },
-    {
-      key: '3',
-      name: '胡彦祖',
-      age: 42,
-      address: '西湖区湖底公园1号',
-    },
-  ],
-  columns: [
-    {
-      title: '姓名',
-      dataIndex: 'name',
-      key: 'name',
-      align: 'center',
-    },
-    {
-      title: '年龄',
-      dataIndex: 'age',
-      key: 'age',
-      align: 'right',
-    },
-    {
-      title: '住址',
-      key: 'address',
-      align: 'center',
-      slots: {customRender: 'address'}
-    },
-  ],
-  pagination: {
-    current: 1,
-    pageSize: 2,
-    total: 10,
-  },
-});
+    const tableHeight = ref(0);
+    const dataSource = ref([]);
+    const pagination = ref({
+        current: 1,
+        pageSize: 10,
+        total: 0,
+        onChange: pageChange,
+    });
 
-function handlePoliceDetail(record) {
-  console.log(record)
-}
+    function handlePoliceDetail(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">
-.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;
 
-  .police-times {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+        .police-times {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer !important;
 
-    .police-text {
-      padding-right: 20px;
+            .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-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;
-      width: 18px;
-      height: 18px;
-      background: url('/@/assets/images/terminal.png') no-repeat;
-      background-size: 100% 100%;
-      cursor: pointer;
+    //奇行
+    .ant-table-striped :deep(.table-striped) td {
+        background-color: #0a0a0c;
+        color: #ffffff;
     }
-  }
 
-  :deep(.ant-table-thead) {
-    display: none !important;
-  }
+    //偶行
+    .ant-table-striped :deep(.table-default) td {
+        color: #ffffff;
+        background: none !important;
+    }
 
-  :deep(.ant-table) {
-    background-color: transparent;
-    pointer-events: 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-table-tbody > tr > td) {
-    border-bottom: none;
-  }
+    //偶行-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-table-row:hover) {
-    background-color: transparent;
-    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-striped) td {
-  background-color: #0a0a0c;
-  color: #ffffff;
-}
+    :deep(.ant-pagination-item) {
+        background-color: #1f2935;
+        color: #ffffff;
+        border: none;
+    }
 
-.ant-table-striped :deep(.table-default) td {
-  color: #ffffff;
-}
+    // 当前页选中的样式
+    :deep(.ant-pagination-item-active) {
+        background-color: #0081ff;
+    }
 
-// 分页
-: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-active a) {
+        color: #ffffff;
+    }
 
-:deep(.ant-pagination-item) {
-  background-color: #1f2935;
-  color: #ffffff;
-  border: none;
-}
+    :deep(.ant-pagination-item a) {
+        color: #ffffff;
+    }
 
-// 当前页选中的样式
-:deep(.ant-pagination-item-active) {
-  background-color: #0081ff;
-}
+    :deep(.ant-pagination-prev .ant-pagination-item-link, .ant-pagination-next .ant-pagination-item-link) {
+        color: #ffffff;
+        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;
-  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>
+    // 下一页
+    :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>
-    <public-title title="步数"/>
-    <div class="inner" ref="healthChart"></div>
-  </div>
+    <div>
+        <public-title title="步数" />
+        <div class="inner" ref="healthChart"></div>
+    </div>
 </template>
 <script setup lang="ts">
-import {ref, unref, onMounted} from 'vue';
-import * as echarts from 'echarts';
-import PublicTitle from '/@/components/publicTitle.vue';
-import {getHealthDataList} from '/@/components/body-d-right/right.api';
-import {useSpin} from '/@/components/body-d-left/bodyLeftHooks.ts';
-import {useHealth} from '/@/components/secondaryScreen/screen-right/screenRightHooks.ts';
-import {screenPie} from '/@/components/item-d/pieCharts.ts';
+    import { ref, unref, onMounted } from 'vue';
+    import * as echarts from 'echarts';
+    import PublicTitle from '/@/components/publicTitle.vue';
+    import { useSpin } from '/@/components/body-d-left/bodyLeftHooks.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 {setSpin, spinning} = useSpin();
-const healthChart = ref<HTMLElement>();
+    const props = defineProps({
+        orgCode: String,
+        type: String,
+    });
+    const { setSpin, spinning } = useSpin();
+    const healthChart = ref<HTMLElement>();
 
-const color = ref(['#B750BE', '#6C63F0', '#3AACFF', '#ED589D', '#FB466C']);
-onMounted(() => {
-  init();
-});
-const {healthData, getValue, setHealth} = useHealth();
+    const color = ref(['#B750BE', '#6C63F0', '#3AACFF', '#ED589D', '#FB466C']);
+    onMounted(() => {
+        init();
+    });
+    const { stepData, getValue, setStep } = useStep();
 
-async function init() {
-  try {
-    const {code, result} = await getHealthDataList({});
-    setSpin(true);
-    if (code != 200) {
-      return;
+    async function init() {
+        try {
+            const params = {
+                orgCode: props.orgCode,
+                type: props.type,
+            };
+            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) {
-  let myChart = echarts.init(healthChart.value);
-  let options = screenPie(chartData, total, color.value, '{c}');
-  myChart.setOption(options);
-  window.addEventListener('resize', () => {
-    myChart.resize();
-  });
-}
+    function initChart(chartData, total) {
+        let myChart = echarts.init(healthChart.value);
+        let options = screenPie(chartData, total, color.value, '{c}');
+        myChart.setOption(options);
+        window.addEventListener('resize', () => {
+            myChart.resize();
+        });
+    }
 </script>
 <style scoped lang="less">
-.inner {
-  width: 100%;
-  margin: 0 auto;
-  height: calc(100% - 40px);
-}
-</style>
+    .inner {
+        width: 100%;
+        margin: 0 auto;
+        height: calc(100% - 40px);
+    }
+</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(
-            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);
-            }
-        );
+        getMapList();
     }
 
     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,
-            // dataDate: getToday(),
+            orgCode: orgCode || props.orgCode,
+            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
+    }
 }