副屏

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

@@ -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>

src/components/secondaryScreen/screen-right/screenRightHooks.ts

@@ -0,0 +1,119 @@
+import {computed, ref} from 'vue';
+
+export function sleepCharts() {
+    return {
+        grid: {
+            top: '15%',
+            left: '8%',
+            right: '3%',
+            bottom: '18%',
+        },
+        legend: {
+            data: ['清醒', '浅睡', '深睡'],
+            textStyle: {
+                color: '#ffffff'
+            },
+            left: '60%',
+        },
+        color: ['#14B3F8', '#6D7BEB', '#5451DC'],
+        xAxis: {
+            type: 'category',
+            axisLabel: {
+                color: '#ffffff'
+            },
+            data: ['0', '2', '4', '6', '8', '10', '12', '14', '16', '18', '20', '22'],
+        },
+        yAxis: {
+            type: 'value',
+            axisLabel: {
+                color: '#ffffff'
+            },
+            axisLine: {
+                show: false
+            },
+            splitLine: {
+                lineStyle: {
+                    type: 'dashed',
+                    color: '#696969'
+                }
+            }
+        },
+        series: [
+            {
+                name: '清醒',
+                type: 'bar',
+                data: [
+                    2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
+                ],
+            },
+            {
+                name: '浅睡',
+                type: 'bar',
+                data: [
+                    2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
+                ],
+            },
+            {
+                name: '深睡',
+                type: 'bar',
+                data: [
+                    2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
+                ],
+            }
+        ]
+    };
+}
+
+export function useHealth() {
+    const healthData = ref([
+        {
+            name: '5000以下',
+            value: '0',
+            type: '1',
+            type_dictText: '恶性肿瘤',
+        },
+        {
+            name: '5000~1w',
+            value: '2',
+            type: '2',
+            type_dictText: '其他',
+        },
+        {
+            name: '1~1.5w',
+            value: '34',
+            type: '3',
+            type_dictText: '其他',
+        },
+        {
+            name: '1.5w~2w',
+            value: '43',
+            type: '3',
+            type_dictText: '其他',
+        },
+        {
+            name: '2以上',
+            value: '43',
+            type: '3',
+            type_dictText: '其他',
+        },
+    ]);
+    const getValue = computed(() => healthData.value.map((item) => item.value));
+    const getName = computed(() => healthData.value.map((item) => item.name));
+
+    function setHealth(data) {
+        data?.map((item1) => {
+            healthData.value.map((item2) => {
+                if (item1.type == item2.type) {
+                    item2.value = item1.count;
+                }
+            });
+        });
+    }
+
+    return {
+        healthData,
+        getValue,
+        getName,
+        setHealth,
+    };
+}

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

@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <public-title title="预警"/>
+    <div class="inner-screen">
+      <a-table :dataSource="dataSource" :columns="columns"/>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import {ref} from 'vue';
+import PublicTitle from '/@/components/publicTitle.vue';
+
+const dataSource = ref([
+  {
+    key: '1',
+    name: '胡彦斌',
+    age: 32,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '2',
+    name: '胡彦祖',
+    age: 42,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '3',
+    name: '胡彦祖',
+    age: 42,
+    address: '西湖区湖底公园1号',
+  },
+]);
+
+const columns = ref([
+  {
+    title: '姓名',
+    dataIndex: 'name',
+    key: 'name',
+  },
+  {
+    title: '年龄',
+    dataIndex: 'age',
+    key: 'age',
+  },
+  {
+    title: '住址',
+    dataIndex: 'address',
+    key: 'address',
+  },
+]);
+</script>
+<style scoped lang="less">
+.inner-screen {
+  width: 100%;
+  height: calc(100% - 40px);
+  margin: 20px 0;
+
+  :deep(.ant-table-thead) {
+    display: none !important;
+  }
+
+  :deep(.ant-table-tbody tr:nth-child(even)) {
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+
+  :deep(.ant-table-tbody tr:nth-child(odd)) {
+    background-color: #0A0A0C;
+    color: #ffffff;
+  }
+}
+</style>

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

@@ -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>