update

1.修改大屏副屏结构

src/components/item-d/item-d.vue

@@ -0,0 +1,62 @@
+<template>
+    <div>
+        <public-title :title="props.title" />
+        <div class="inner" ref="healthChart"></div>
+    </div>
+</template>
+<script setup lang="ts">
+    import PublicTitle from '/@/components/publicTitle.vue';
+    import { useSpin } from '/@/components/body-d-left/bodyLeftHooks.ts';
+    import { ringOption, useHealth } from '/@/components/body-d-right/bodyRightHooks.ts';
+    import { onMounted, ref, unref, watch } from 'vue';
+    import * as echarts from 'echarts';
+    const props = defineProps({
+        title: {
+            type: String,
+            default: () => '',
+        },
+        data: {
+            type: Array,
+            default: () => [],
+        },
+    });
+    const healthChart = ref<HTMLElement>();
+
+    const { setSpin, spinning } = useSpin();
+
+    onMounted(() => {
+        init();
+    });
+
+    watch(
+        () => props.data,
+        () => {
+            init();
+        }
+    );
+
+    const { healthData, getValue, setHealth } = useHealth();
+
+    async function init() {
+        setHealth(props.data);
+        const yData = unref(getValue);
+        let total = yData.reduce((accumulator, currentValue) => Number(accumulator) + Number(currentValue), 0);
+        initChart(unref(healthData), total);
+    }
+
+    function initChart(chartData, total) {
+        let myChart = echarts.init(healthChart.value);
+        let options = ringOption(chartData, total);
+        myChart.setOption(options);
+        window.addEventListener('resize', () => {
+            myChart.resize();
+        });
+    }
+</script>
+<style scoped lang="less">
+    .inner {
+        width: 90%;
+        margin: 0 auto;
+        height: calc(100% - 40px);
+    }
+</style>