update

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

@@ -1,4 +1,4 @@
-import { computed, ref } from 'vue';
+import { ref } from 'vue';
 import dayjs from 'dayjs';
 import { minuteToStr } from '/@/utils/utils.ts';
 
@@ -6,7 +6,7 @@ function timeFormat(type, list) {
     const o = {
         week: 'MM-DD',
         month: 'MM-DD',
-        year: 'MM',
+        year: 'YYYY-MM',
     };
     if (list) {
         return list.map((item) => dayjs(item).format(o[type]));
@@ -24,28 +24,51 @@ export function formatStr({ list, len }) {
     return minuteToStr(sum);
 }
 
+function createWeek() {
+    let arr = [];
+    for (let i = 0; i < 7; i++) {}
+}
+
+const defaultVal = (type) => {
+    if (type == 'week') {
+        return {
+            defaultTime: [],
+        };
+    }
+    if (type == 'month') {
+    }
+    if (type == 'year') {
+    }
+};
+
 export function sleepCharts({ time, short, long, awake, type }) {
+    let middleIndex = Math.floor(time.length / 2);
     return {
         grid: {
             top: '15%',
-            left: '0%',
-            right: '0%',
-            bottom: '0%',
-            containLabel: true,
+            left: '5%',
+            right: '5%',
+            bottom: 30,
         },
         tooltip: {
             show: true,
             trigger: 'axis',
             textStyle: {
                 align: 'left', // 使用左对齐样式显示tooltip文本
+                color: '#fff',
             },
+            backgroundColor: 'rgba(50,50,50,0.7)',
+            borderColor: '#1b7ef2',
         },
         legend: {
             data: ['清醒', '浅睡', '深睡'],
             textStyle: {
                 color: '#ffffff',
             },
-            top: 0,
+            icon: 'roundRect',
+            height: 40,
+            itemHeight: 14,
+            top: -5,
             left: '55%',
         },
         color: ['#14B3F8', '#6D7BEB', '#5451DC'],
@@ -57,8 +80,13 @@ export function sleepCharts({ time, short, long, awake, type }) {
             axisLabel: {
                 color: '#ffffff',
                 formatter: (item, i) => {
-                    if (i == 0 || i == time.length - 1 || i == Math.floor(time.length / 2)) return item;
+                    let mid = time.length == 30 ? 16 : middleIndex;
+                    if (i == 0 || i == mid || i == time.length - 1) {
+                        return item;
+                    }
                 },
+                showMinLabel: true,
+                showMaxLabel: true,
             },
             data: timeFormat(type, time),
         },
@@ -99,34 +127,35 @@ export function sleepCharts({ time, short, long, awake, type }) {
 
 //步数
 export function useStep() {
+    const total = ref();
     const stepData = ref([
         {
             name: '5000以下',
-            value: '23',
+            value: '0',
             type: 'lessThanFiveThousand',
             type_dictText: '恶性肿瘤',
         },
         {
             name: '5000~1w',
-            value: '2',
+            value: '0',
             type: 'fiveThousandToTenThousand',
             type_dictText: '其他',
         },
         {
             name: '1~1.5w',
-            value: '34',
+            value: '0',
             type: 'TenThousandToFifteenThousand',
             type_dictText: '其他',
         },
         {
             name: '1.5w~2w',
-            value: '43',
+            value: '0',
             type: 'FifteenToTwentyThousand',
             type_dictText: '其他',
         },
         {
             name: '2以上',
-            value: '43',
+            value: '0',
             type: 'TwentyThousandOrMore',
             type_dictText: '其他',
         },
@@ -136,9 +165,11 @@ export function useStep() {
         stepData.value.map((item) => {
             item.value = data[item.type] || 0;
         });
+        total.value = data?.userCount;
     }
 
     return {
+        total,
         stepData,
         setStep,
     };