update

src/components/secondaryScreen/screen-right/oneR.vue

@@ -1,12 +1,9 @@
 <template>
     <div class="terminal-container">
-        <public-title title="睡眠">
-            <template #right>平均睡眠时长：6小时30分</template>
-        </public-title>
+        <public-title title="睡眠" />
         <div class="inner">
             <div class="title">
-                <span class="count">6.5h</span>
-                <span class="lightSleep">深睡2.4小时 浅睡4.1小时</span>
+                <span class="lightSleep">平均睡眠 {{ nums.avg }} 深睡 {{ nums.avgLong }} 浅睡 {{ nums.avgShort }}</span>
             </div>
             <div class="sleepChart" ref="sleepChart"></div>
         </div>
@@ -15,23 +12,55 @@
 <script setup lang="ts">
     import PublicTitle from '/@/components/publicTitle.vue';
     import * as echarts from 'echarts';
-    import { ringOption, useHealth } from '/@/components/body-d-right/bodyRightHooks';
-    import { ref, onMounted, unref } from 'vue';
-    import { sleepCharts } from '/@/components/secondaryScreen/screen-right/screenRightHooks';
+    import { ref, onMounted, watch } from 'vue';
+    import { formatStr, sleepCharts } from '/@/components/secondaryScreen/screen-right/screenRightHooks';
+    import { getSleep } from '/@/components/secondaryScreen/commonApi.ts';
 
+    const props = defineProps({
+        orgCode: String,
+        type: String,
+    });
     const sleepChart = ref<HTMLElement>();
     onMounted(() => {
         init();
     });
-    const { healthData, getValue, setHealth } = useHealth();
+    watch(props, () => {
+        init();
+    });
+    const nums = ref({
+        avgShort: '',
+        avgLong: '',
+        avg: '',
+    });
 
-    function init() {
-        initChart();
+    async function init() {
+        const params = {
+            orgCode: props.orgCode,
+            type: props.type,
+        };
+        const { code, result } = await getSleep(params);
+        if (code == 200 && result.length > 0) {
+            let time = result?.map((item) => item.dataDate);
+            let short = result?.map((item) => item.avgShortDuration);
+            let long = result?.map((item) => item.avgLongDuration);
+            let awake = result?.map((item) => item.awakeDuration);
+            let avg = result?.map((item) => item.averageDuration);
+            initChart({ time, short, long, awake, type: props.type });
+            const len = time.length;
+            if (!len > 0) {
+                return;
+            }
+            nums.value = {
+                avgShort: formatStr({ list: short, len }),
+                avgLong: formatStr({ list: long, len }),
+                avg: formatStr({ list: avg, len }), //平均
+            };
+        }
     }
 
-    function initChart() {
+    function initChart({ time, short, long, awake, type }) {
         let myChart = echarts.init(sleepChart.value);
-        let options = sleepCharts();
+        let options = sleepCharts({ time, short, long, awake, type });
         myChart.setOption(options);
         window.addEventListener('resize', () => {
             myChart.resize();
@@ -61,4 +90,4 @@
             height: 80%;
         }
     }
-</style>
+</style>