update 更换背景图 看板接口对接

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

@@ -0,0 +1,96 @@
+import { computed, ref } from 'vue';
+// 列表字段
+export const columns = [
+    {
+        title: '姓名',
+        dataIndex: 'name',
+        align: 'center',
+        key: 'name',
+    },
+    {
+        title: '单位信息',
+        dataIndex: 'age',
+        align: 'center',
+        key: 'age',
+    },
+    {
+        title: '联系电话',
+        dataIndex: 'address',
+        align: 'center',
+        key: 'address',
+    },
+    {
+        title: '联系电话',
+        dataIndex: 'address1',
+        align: 'center',
+        key: 'address1',
+    },
+    {
+        title: '异常事件',
+        dataIndex: 'address2',
+        align: 'center',
+        key: 'address2',
+    },
+    {
+        title: '异常值',
+        dataIndex: 'address2',
+        align: 'center',
+        key: 'address2',
+    },
+    {
+        title: '发生时间',
+        dataIndex: 'address2',
+        align: 'center',
+        key: 'address2',
+    },
+    {
+        title: '发生地点',
+        dataIndex: 'address2',
+        align: 'center',
+        key: 'address2',
+    },
+];
+
+//大病人数
+export function useHealth() {
+    const healthData = ref([
+        {
+            name: '高危人数',
+            value: '0',
+            type: '1',
+            type_dictText: '恶性肿瘤',
+        },
+        {
+            name: '中危人数',
+            value: '0',
+            type: '2',
+            type_dictText: '其他',
+        },
+        {
+            name: '可控人数',
+            value: '0',
+            type: '3',
+            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;
+                }
+            });
+        });
+    }
+
+    return {
+        healthData,
+        getValue,
+        getName,
+        setHealth,
+    };
+}
+

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

@@ -2,13 +2,13 @@
     <div class="terminal-container">
         <public-title title="健康终端报警" :isShowMore="true" @clickMore="handleDialog" />
         <div class="inner">
-            <vue3-seamless-scroll :list="policeLists" class="scroll" :hover="true" :limitScrollNum="7">
-                <div class="item" v-for="(item, index) in policeLists" :key="index">
-                    <span>{{ item.name }}</span>
-                    <span>{{ item.abnormal }}</span>
+            <vue3-seamless-scroll :list="scrollList" class="scroll" :hover="true" :limitScrollNum="4" v-bind="classOption">
+                <div class="item" v-for="item in scrollList" :key="item.id">
+                    <span>{{ item?.realName }}</span>
+                    <span>{{ item?.eventType_dictText }}</span>
                     <div class="time-icon">
-                        <span>{{ item.time }}</span>
-                        <span class="terminal-icon" @click="handlePolice"></span>
+                        <span>{{ item?.warnTime }}</span>
+                        <span class="terminal-icon" @click="handlePolice(item)"></span>
                     </div>
                 </div>
             </vue3-seamless-scroll>
@@ -53,42 +53,16 @@
     </div>
 </template>
 <script setup lang="ts">
-    import { ref } from 'vue';
-    import PublicTitle from '../publicTitle.vue';
-    import Dialog from '../dialog/Dialog.vue';
+    import { onMounted, ref } from 'vue';
+    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';
-    const policeLists = ref([
-        {
-            name: '陈天宇',
-            abnormal: '压力异常(82)',
-            time: '2023-8-25',
-        },
-        {
-            name: '陈天宇',
-            abnormal: '压力异常(82)',
-            time: '2023-8-25',
-        },
-        {
-            name: '陈天宇',
-            abnormal: '压力异常(82)',
-            time: '2023-8-25',
-        },
-        {
-            name: '陈天宇',
-            abnormal: '压力异常(82)',
-            time: '2023-8-25',
-        },
-        {
-            name: '陈天宇',
-            abnormal: '压力异常(82)',
-            time: '2023-8-25',
-        },
-        {
-            name: '陈天宇',
-            abnormal: '压力异常(82)',
-            time: '2023-8-25',
-        },
-    ]);
+    import { getMonitorList } from '/@/components/body-d-right/right.api.ts';
+
+    const classOption = {
+        step: 0.3, // 速度
+    };
     const open = ref<boolean>(false);
     const openInfor = ref<boolean>(false);
     const userInfo = ref({
@@ -107,160 +81,41 @@
             age: 32,
             address: '西湖区湖底公园1号',
         },
-        {
-            key: '2',
-            name: '胡彦祖',
-            age: 42,
-            address: '西湖区湖底公园1号',
-        },
-        {
-            key: '2',
-            name: '胡彦祖',
-            age: 42,
-            address: '西湖区湖底公园1号',
-        },
-        {
-            key: '2',
-            name: '胡彦祖',
-            age: 42,
-            address: '西湖区湖底公园1号',
-        },
-        {
-            key: '2',
-            name: '胡彦祖',
-            age: 42,
-            address: '西湖区湖底公园1号',
-        },
-        {
-            key: '2',
-            name: '胡彦祖',
-            age: 42,
-            address: '西湖区湖底公园1号',
-        },
-        {
-            key: '2',
-            name: '胡彦祖',
-            age: 42,
-            address: '西湖区湖底公园1号',
-        },
-        {
-            key: '2',
-            name: '胡彦祖',
-            age: 42,
-            address: '西湖区湖底公园1号',
-        },
-        {
-            key: '2',
-            name: '胡彦祖',
-            age: 42,
-            address: '西湖区湖底公园1号',
-        },
-        {
-            key: '2',
-            name: '胡彦祖',
-            age: 42,
-            address: '西湖区湖底公园1号',
-        },
-        {
-            key: '2',
-            name: '胡彦祖',
-            age: 42,
-            address: '西湖区湖底公园1号',
-        },
-        {
-            key: '2',
-            name: '胡彦祖',
-            age: 42,
-            address: '西湖区湖底公园1号',
-        },
-        {
-            key: '2',
-            name: '胡彦祖',
-            age: 42,
-            address: '西湖区湖底公园1号',
-        },
-        {
-            key: '2',
-            name: '胡彦祖',
-            age: 42,
-            address: '西湖区湖底公园1号',
-        },
-        {
-            key: '2',
-            name: '胡彦祖',
-            age: 42,
-            address: '西湖区湖底公园1号',
-        },
-        {
-            key: '2',
-            name: '胡彦祖',
-            age: 42,
-            address: '西湖区湖底公园1号',
-        },
     ]);
 
-    const columns = ref([
-        {
-            title: '姓名',
-            dataIndex: 'name',
-            align: 'center',
-            key: 'name',
-        },
-        {
-            title: '单位信息',
-            dataIndex: 'age',
-            align: 'center',
-            key: 'age',
-        },
-        {
-            title: '联系电话',
-            dataIndex: 'address',
-            align: 'center',
-            key: 'address',
-        },
-        {
-            title: '联系电话',
-            dataIndex: 'address1',
-            align: 'center',
-            key: 'address1',
-        },
-        {
-            title: '异常事件',
-            dataIndex: 'address2',
-            align: 'center',
-            key: 'address2',
-        },
-        {
-            title: '异常值',
-            dataIndex: 'address2',
-            align: 'center',
-            key: 'address2',
-        },
-        {
-            title: '发生时间',
-            dataIndex: 'address2',
-            align: 'center',
-            key: 'address2',
-        },
-        {
-            title: '发生地点',
-            dataIndex: 'address2',
-            align: 'center',
-            key: 'address2',
-        },
-    ]);
     function handleDialog() {
         open.value = true;
     }
+
     function handleClose() {
         open.value = false;
     }
+
     function handlePolice() {
         openInfor.value = true;
     }
+
     function handlePoliceClose() {
         openInfor.value = false;
     }
+
+    onMounted(() => {
+        getScrollList();
+    });
+
+    /**
+     * @desc 终端报警
+     * */
+    const scrollList = ref([]);
+
+    async function getScrollList() {
+        const { code, result } = await getMonitorList({});
+        if (code == 200) {
+            scrollList.value = result;
+        }
+
+        console.log('dd', result);
+    }
 </script>
 <style scoped lang="less">
     .inner {
@@ -268,23 +123,28 @@
         display: flex;
         align-items: center;
         justify-content: center;
+
         .scroll {
             width: 90%;
             height: 88%;
             overflow: hidden;
+
             .item {
                 display: flex;
                 align-items: center;
                 justify-content: space-between;
                 padding: 3% 0;
+
                 span {
                     color: #ffffff;
                     font-size: 16px;
                 }
+
                 .time-icon {
                     display: flex;
                     align-items: center;
                 }
+
                 .terminal-icon {
                     margin-left: 20px;
                     display: inline-block;
@@ -297,26 +157,31 @@
             }
         }
     }
+
     .dialog-con {
         background-color: #00152b;
         border: 1px solid #129bff;
     }
+
     .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>

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

@@ -0,0 +1,12 @@
+import { get } from '/src/api/request';
+
+export enum Api {
+    getMonitorList = '/health-watch/watch/watchMonitorData/getMonitorList',
+    getHealthDataList = '/health-emergency/emergency/tblHealthData/getHealthDataList',
+}
+
+//健康终端报警
+
+export const getMonitorList = (params: any) => get(Api.getMonitorList, params);
+//长庆油田大病人数
+export const getHealthDataList = (params: any) => get(Api.getHealthDataList, params);

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

@@ -5,36 +5,64 @@
     </div>
 </template>
 <script setup lang="ts">
-    import { ref, onMounted } from 'vue';
+    import { ref, unref, onMounted } from 'vue';
     import * as echarts from 'echarts';
     import PublicTitle from '../publicTitle.vue';
+    import { getHealthDataList } from '/@/components/body-d-right/right.api';
+    import { useSpin } from '/@/components/body-d-left/bodyLeftHooks.ts';
+    import { useHealth } from '/@/components/body-d-right/bodyRightHooks.ts';
 
+    const { setSpin, spinning } = useSpin();
     const healthChart = ref<HTMLElement>();
     onMounted(() => {
-        let xdata = ['创伤类', '心血管', '心神类', '呼吸类', '消化类', '肿瘤类', '其他'];
-        let ydata = [120, 200, 150, 80, 70, 110, 130];
-        initChart(xdata, ydata);
+        // let xdata = ['创伤类', '心血管', '心神类', '呼吸类', '消化类', '肿瘤类', '其他'];
+        // let ydata = [120, 200, 150, 80, 70, 110, 130];
+        // initChart(xdata, ydata);
+        init();
     });
-    function initChart(xData, ydata) {
+    const { healthData, getValue, getName, setHealth } = useHealth();
+
+    async function init() {
+        try {
+            const { code, result } = await getHealthDataList();
+            setSpin(true);
+            if (code != 200) {
+                return;
+            }
+            setHealth(result);
+            const yData = unref(getValue);
+            let total = yData.reduce((accumulator, currentValue) => Number(accumulator) + Number(currentValue), 0);
+            console.log('yData', yData);
+            initChart(unref(healthData), total);
+        } catch {}
+    }
+
+    function initChart(chartData, total = 0) {
         let myChart = echarts.init(healthChart.value);
         let options = {
             title: {
                 text: '总人数\n',
-                subtext: '1980',
+                subtext: total,
                 x: 'center',
                 y: 'center',
                 textStyle: {
-                    fontSize: 18,
+                    fontSize: 16,
                     color: '#ffffff',
                 },
                 subtextStyle: {
                     color: '#ffffff',
-                    fontSize: 28,
+                    fontSize: 22,
                 },
             },
             color: ['#0098FA', '#0CD9B5', '#3B72AD'],
             tooltip: {
                 trigger: 'item',
+                show: true,
+                textStyle: {
+                    color: '#fff',
+                },
+                backgroundColor: 'rgba(50,50,50,0.7)',
+                borderColor: '#1b7ef2',
             },
             legend: {
                 bottom: '0',
@@ -60,11 +88,7 @@
                     labelLine: {
                         show: false,
                     },
-                    data: [
-                        { value: 1048, name: '高危人数' },
-                        { value: 735, name: '中危人数' },
-                        { value: 580, name: '可控人数' },
-                    ],
+                    data: chartData,
                 },
             ],
         };
@@ -80,4 +104,4 @@
         margin: 0 auto;
         height: calc(100% - 40px);
     }
-</style>
+</style>