副屏

2023-12-08 18:23:08 +08:00
parent 123b681dc3
commit 7bcc265bd7
18 changed files with 1088 additions and 115 deletions
@@ -0,0 +1,64 @@
+<template>
+    <div class="terminal-container">
+        <public-title title="睡眠">
+            <template #title>平均睡眠时长：6小时30分</template>
+        </public-title>
+        <div class="inner">
+            <div class="title">
+                <span class="count">6.5h</span>
+                <span class="lightSleep">深睡2.4小时 浅睡4.1小时</span>
+            </div>
+            <div class="sleepChart" ref="sleepChart"></div>
+        </div>
+    </div>
+</template>
+<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';
+
+    const sleepChart = ref<HTMLElement>();
+    onMounted(() => {
+        init();
+    });
+    const { healthData, getValue, setHealth } = useHealth();
+
+    function init() {
+        initChart();
+    }
+
+    function initChart() {
+        let myChart = echarts.init(sleepChart.value);
+        let options = sleepCharts();
+        myChart.setOption(options);
+        window.addEventListener('resize', () => {
+            myChart.resize();
+        });
+    }
+</script>
+<style scoped lang="less">
+    .inner {
+        height: calc(100% - 40px);
+
+        .title {
+            color: #cfcfcf;
+            text-align: left;
+            padding: 1% 6%;
+
+            .count {
+                font-size: 28px;
+                font-weight: bold;
+            }
+
+            .lightSleep {
+                padding-left: 2%;
+            }
+        }
+
+        .sleepChart {
+            height: 80%;
+        }
+    }
+</style>