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

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>