update 看板接口对接 增加路由依赖

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

@@ -94,3 +94,61 @@ export function useHealth() {
     };
 }
 
+export function ringOption(chartData, total) {
+    return {
+        title: {
+            text: '总人数',
+            subtext: total + '',
+            x: 'center',
+            y: '35%',
+            textStyle: {
+                fontSize: 14,
+                color: '#ffffff',
+                fontWeight: 'normal',
+            },
+            subtextStyle: {
+                color: '#ffffff',
+                fontSize: 24,
+                fontWeight: 'bold',
+            },
+        },
+        color: ['#0098FA', '#0CD9B5', '#3B72AD'],
+        tooltip: {
+            trigger: 'item',
+            show: true,
+            textStyle: {
+                color: '#fff',
+            },
+            backgroundColor: 'rgba(50,50,50,0.7)',
+            borderColor: '#1b7ef2',
+        },
+        legend: {
+            bottom: '0',
+            left: 'center',
+            icon: 'circle',
+            textStyle: {
+                color: '#ffffff',
+                fontSize: 16,
+            },
+        },
+        series: [
+            {
+                type: 'pie',
+                radius: ['50%', '80%'],
+                avoidLabelOverlap: false,
+                label: {
+                    show: true,
+                    position: 'inner',
+                    formatter: '{d}%',
+                    color: '#ffffff',
+                    fontSize: 14,
+                },
+                labelLine: {
+                    show: false,
+                },
+                data: chartData,
+            },
+        ],
+    };
+}
+

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

@@ -3,7 +3,7 @@
         <public-title title="健康终端报警" :isShowMore="true" @clickMore="handleDialog" />
         <div class="inner">
             <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">
+                <div class="item" v-for="(item, i) in scrollList" :key="i">
                     <span>{{ item?.realName }}</span>
                     <span>{{ item?.eventType_dictText }}</span>
                     <div class="time-icon">

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

@@ -10,21 +10,18 @@
     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';
+    import { ringOption, 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);
         init();
     });
-    const { healthData, getValue, getName, setHealth } = useHealth();
+    const { healthData, getValue, setHealth } = useHealth();
 
     async function init() {
         try {
-            const { code, result } = await getHealthDataList();
+            const { code, result } = await getHealthDataList({});
             setSpin(true);
             if (code != 200) {
                 return;
@@ -32,66 +29,15 @@
             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 {}
+        } catch {
+            initChart(unref(healthData), 0);
+        }
     }
 
-    function initChart(chartData, total = 0) {
+    function initChart(chartData, total) {
         let myChart = echarts.init(healthChart.value);
-        let options = {
-            title: {
-                text: '总人数\n',
-                subtext: total,
-                x: 'center',
-                y: 'center',
-                textStyle: {
-                    fontSize: 16,
-                    color: '#ffffff',
-                },
-                subtextStyle: {
-                    color: '#ffffff',
-                    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',
-                left: 'center',
-                icon: 'circle',
-                textStyle: {
-                    color: '#ffffff',
-                    fontSize: 16,
-                },
-            },
-            series: [
-                {
-                    type: 'pie',
-                    radius: ['50%', '80%'],
-                    avoidLabelOverlap: false,
-                    label: {
-                        show: true,
-                        position: 'inner',
-                        formatter: '{d}%',
-                        color: '#ffffff',
-                        fontSize: 16,
-                    },
-                    labelLine: {
-                        show: false,
-                    },
-                    data: chartData,
-                },
-            ],
-        };
+        let options = ringOption(chartData, total);
         myChart.setOption(options);
         window.addEventListener('resize', () => {
             myChart.resize();