副屏

2023-12-08 18:23:08 +08:00
parent 123b681dc3
commit 7bcc265bd7
18 changed files with 1088 additions and 115 deletions
@@ -0,0 +1,56 @@
+<template>
+    <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';
+
+    const { setSpin, spinning } = useSpin();
+    const healthChart = ref<HTMLElement>();
+
+    const color = ref(['#B750BE', '#6C63F0', '#3AACFF', '#ED589D', '#FB466C']);
+    onMounted(() => {
+        init();
+    });
+    const { healthData, getValue, 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);
+            initChart(unref(healthData), total);
+        } catch {
+            initChart(unref(healthData), 0);
+        }
+    }
+
+    function initChart(chartData, total) {
+        let myChart = echarts.init(healthChart.value);
+        let options = screenPie(chartData, total, color.value);
+        myChart.setOption(options);
+        window.addEventListener('resize', () => {
+            myChart.resize();
+        });
+    }
+</script>
+<style scoped lang="less">
+    .inner {
+        width: 90%;
+        margin: 0 auto;
+        height: calc(100% - 40px);
+    }
+</style>