update

1.修改睡眠模块，总览添加步数模块

src/components/secondaryScreen/secondMap/components/userInfoModal/allLook.vue

@@ -8,7 +8,7 @@
             </a-radio-group>
         </div>
 
-        <all-look-item :info-data="props.infoData" />
+        <all-look-item :info-data="props.infoData" :paramsDate="paramsDate" />
     </div>
 </template>
 <script setup lang="ts">

src/components/secondaryScreen/secondMap/components/userInfoModal/allLookItem.vue

@@ -207,6 +207,28 @@
                 </div>
             </div>
         </div>
+
+        <div class="box-con-small">
+            <div style="display: flex; align-items: center; padding: 10px 0; justify-content: flex-start">
+                <img :src="allStep" alt="" />
+                步数
+            </div>
+
+            <div style="display: flex">
+                <div style="display: flex; width: 100%">
+                    <div class="label-d">
+                        <div>{{ paramsDate === '0' ? '总步数值' : '最大步数值' }}</div>
+                        <div :style="{ opacity: props.paramsDate === '0' ? 0 : 1 }">最小步数值</div>
+                        <div :style="{ opacity: props.paramsDate === '0' ? 0 : 1 }">平均步数值</div>
+                    </div>
+                    <div class="value-d">
+                        <div>{{ getNum(props.infoData?.sdcStat?.max) }}</div>
+                        <div :style="{ opacity: props.paramsDate === '0' ? 0 : 1 }">{{ getNum(props.infoData?.sdcStat?.min) }}</div>
+                        <div :style="{ opacity: props.paramsDate === '0' ? 0 : 1 }">{{ getNum(props.infoData?.sdcStat?.avg) }}</div>
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
 </template>
 <script setup lang="ts">
@@ -215,10 +237,12 @@
     const blood = new URL('/@/assets/images/blood_oxygen.png', import.meta.url).href;
     const heart_rate = new URL('/@/assets/images/heart_rate.png', import.meta.url).href;
     const temperature = new URL('/@/assets/images/temperature.png', import.meta.url).href;
+    const allStep = new URL('/@/assets/images/allStep.png', import.meta.url).href;
     const pressure = new URL('/@/assets/images/pressure.png', import.meta.url).href;
     const sleep = new URL('/@/assets/images/sleep.png', import.meta.url).href;
     const props = defineProps({
         infoData: propTypes.object.def({}),
+        paramsDate: propTypes.string.def('0'),
     });
 
     function getTime(time) {

src/components/secondaryScreen/secondMap/components/userInfoModal/sleep.vue

@@ -3,27 +3,38 @@
     <div class="item-three" style="display: flex; justify-content: center" v-if="status">
         <div style="width: 15%; text-align: center">
             <div>
-                <span style="font-size: 25px"> {{ maxInfo }}</span>
+                <template v-if="getTime(maxInfo)?.h > 0">
+                    <span style="font-size: 25px"> {{ getTime(maxInfo)?.h }}</span>
+                    <span style="color: #aa9db6">小时</span>
+                </template>
+                <span style="font-size: 25px"> {{ getTime(maxInfo)?.m }}</span>
                 <span style="color: #aa9db6">分钟</span>
             </div>
-            <div style="color: #aa9db6">最高睡眠时长</div>
+            <div style="color: #aa9db6">{{ type == 1 ? '深睡睡眠时长' : '日均深睡时长' }}</div>
         </div>
         <div style="width: 15%; text-align: center">
             <div>
-                <span style="font-size: 25px"> {{ minInfo }}</span>
+                <template v-if="getTime(minInfo)?.h > 0">
+                    <span style="font-size: 25px"> {{ getTime(minInfo)?.h }}</span>
+                    <span style="color: #aa9db6">小时</span>
+                </template>
+                <span style="font-size: 25px"> {{ getTime(minInfo)?.m }}</span>
                 <span style="color: #aa9db6">分钟</span>
             </div>
-            <div style="color: #aa9db6">最低睡眠时长</div>
+            <div style="color: #aa9db6">{{ type == 1 ? '浅睡睡眠时长' : '日均浅睡时长' }}</div>
         </div>
         <div style="width: 15%; text-align: center">
             <div>
-                <span style="font-size: 25px">{{ middleInfo }}</span>
+                <template v-if="getTime(middleInfo)?.h > 0">
+                    <span style="font-size: 25px">{{ getTime(middleInfo)?.h }}</span>
+                    <span style="color: #aa9db6">小时</span>
+                </template>
+                <span style="font-size: 25px">{{ getTime(middleInfo)?.m }}</span>
                 <span style="color: #aa9db6">分钟</span>
             </div>
-            <div style="color: #aa9db6">平均睡眠时长</div>
+            <div style="color: #aa9db6">{{ type == 1 ? '睡眠总时长' : '日均睡眠总时长' }}</div>
         </div>
     </div>
-
     <div v-if="status && !isEmpty" ref="chartRef" style="min-height: 300px; width: 100%"></div>
     <template v-if="status && isEmpty">
         <div style="min-height: 300px; width: 100%; display: flex; align-items: center; justify-content: center">
@@ -89,7 +100,7 @@
     function initF() {
         if (status.value) {
             echart && echart.clear();
-            initEchart('0');
+            initEchart();
         } else {
             tableReload();
         }
@@ -99,7 +110,7 @@
         status.value = s;
         if (s) {
             nextTick(() => {
-                initEchart('0');
+                initEchart();
             });
         }
     }
@@ -109,36 +120,134 @@
     /**
      *  @type 传入 type = '1' 则不需要要渲染图表
      * */
-    async function initEchart(t) {
+    async function initEchart() {
         try {
             const { code, result, message: msg } = await querySleepStatisticsApi(getParams());
+            maxInfo.value = '';
+            middleInfo.value = '';
+            minInfo.value = '';
             if (code === 200) {
-                isEmpty.value = result.viewDataList.length === 0;
+                isEmpty.value = type.value === 1 ? result.timePeriods.length === 0 : result.viewDataList.length === 0;
-                let xArr = [];
+                let xArr: any[] = [];
-                let yArr = [];
+                let yArr: any[] = [];
-                let yArr1 = [];
+                let yArr1: any[] = [];
-                maxInfo.value = result.maxValue ? result.maxValue : '/';
+                maxInfo.value = type.value === 1 ? result.maxValue : result.deepSleepTimes ? result.deepSleepTimes : '';
-                middleInfo.value = result.avgValue ? result.avgValue : '/';
+                middleInfo.value = type.value === 1 ? result.total1 : result.deepLightTimes ? result.deepLightTimes : '';
-                minInfo.value = result.minValue ? result.minValue : '/';
+                minInfo.value = type.value === 1 ? result.minValue : result.lightSleepTimes ? result.lightSleepTimes : '';
-                if (t === '1') return;
+                // debugger;
-                type.value === 1 &&
+                // type.value === 1 &&
-                    result.viewDataList.map((item) => {
+                //     result.viewDataList.map((item) => {
-                        xArr.push(item.date);
+                //         xArr.push(item.date);
-                        yArr.push(item.value === 1 ? 1 : 0);
+                //         yArr.push(item.value === 1 ? 1 : 0);
-                        yArr1.push(item.value === 2 ? 1 : 0);
+                //         yArr1.push(item.value === 2 ? 1 : 0);
-                    });
+                //     });
                 type.value !== 1 &&
                     result.viewDataList.map((item) => {
+                        const total = (item.value ? item.value : 0) + (item.value1 ? item.value1 : 0);
                         xArr.push(item.date);
-                        yArr.push(item.value);
+                        // let p1 = parseInt(((item.value ? item.value : 0) / total) * 100);
-                        yArr1.push(item.value1);
+                        // let p2 = parseInt(((item.value1 ? item.value1 : 0) / total) * 100);
+                        yArr.push(item.value ? item.value : 0);
+                        yArr1.push(item.value1 ? item.value1 : 0);
                     });
+                if (type.value === 1) {
+                    getZXEchart(result);
+                } else {
+                    getZEcahrt(xArr, yArr, yArr1);
+                }
+            } else {
+                isEmpty.value = true;
+                message.warn(msg);
+            }
+        } catch {}
+    }
+
+    function getZXEchart(res) {
+        echart = echarts.init(chartRef.value);
+        let xArr: any[] = [];
+        let yArr: any[] = [];
+        res.timePeriods &&
+            res.timePeriods.map((item) => {
+                switch (item.flag) {
+                    case 1:
+                        // 浅睡
+                        yArr.push(1);
+                        yArr.push(1);
+                        break;
+                    case 3:
+                        // 深睡
+                        yArr.push(0);
+                        yArr.push(0);
+                        break;
+                    case 4:
+                        // 清醒
+                        yArr.push(3);
+                        yArr.push(3);
+                        break;
+                    case 5:
+                        // 零星小睡
+                        yArr.push(2);
+                        yArr.push(2);
+                        break;
+                }
+                xArr.push(dayjs(item.start).format('HH:mm'));
+                xArr.push(dayjs(item.end).format('HH:mm'));
+            });
+        const option = {
+            xAxis: {
+                type: 'category',
+                data: xArr,
+            },
+            tooltip: {
+                trigger: 'axis',
+                axisPointer: {
+                    type: 'shadow',
+                },
+                formatter: function (params) {
+                    console.log(params);
+                    let tar = params[0];
+                    let name = '';
+                    switch (tar.value) {
+                        case 3:
+                            name = '清醒';
+                            break;
+                        case 2:
+                            name = '零星小睡';
+                            break;
+                        case 1:
+                            name = '浅睡';
+                            break;
+                        case 0:
+                            name = '深睡';
+                            break;
+                    }
+                    return xArr[tar.dataIndex] + '<br/>' + name;
+                },
+            },
+            yAxis: {
+                show: false,
+            },
+            series: [
+                {
+                    data: yArr,
+                    type: 'line',
+                },
+            ],
+        };
+
+        echart.setOption(option);
+        window.addEventListener('resize', () => {
+            echart.resize();
+        });
+    }
+
+    function getZEcahrt(xArr, yArr, yArr1) {
         echart = echarts.init(chartRef.value);
         const option = {
             title: {},
             legend: {
                 textStyle: {
-                            color: '#fff',
+                    color: '#ffffff',
                 },
             },
             tooltip: {
@@ -146,14 +255,11 @@
                 axisPointer: {
                     type: 'shadow',
                 },
-                        textStyle: {
-                            color: '#fff',
-                        },
-                        backgroundColor: 'rgba(50,50,50,0.7)',
-                        borderColor: '#1b7ef2',
                 formatter: function (params) {
                     let tar1 = params[1];
                     let tar = params[0];
+                    // let tar = params[1];
+                    // return (tar1.value > 0 ? '短睡' : '长睡') + '<br/>' + tar.seriesName + ' : ' + tar.value;
                     let str = '';
                     if (type.value === 1) {
                         str = xArr[tar.dataIndex] + '<br/>' + (tar1.value > 0 ? '浅睡' : '深睡');
@@ -204,21 +310,35 @@
                     name: '深睡',
                     type: 'bar',
                     barMaxWidth: '20px',
+                    stack: 'a',
                     itemStyle: {
                         borderColor: '#5087ec',
                         borderWidth: 0,
                         color: '#5087ec',
                     },
+                    // emphasis: {
+                    //     itemStyle: {
+                    //         borderColor: '#68bbc4',
+                    //         color: '#68bbc4',
+                    //     },
+                    // },
+                    axisLabel: {
+                        color: '#fff',
+                    },
                     data: yArr,
                 },
                 {
                     name: '浅睡',
                     barMaxWidth: '20px',
+                    stack: 'a',
                     itemStyle: {
                         borderColor: '#85d0dc',
                         borderWidth: 0,
                         color: '#85d0dc',
                     },
+                    axisLabel: {
+                        color: '#fff',
+                    },
                     type: 'bar',
                     data: yArr1,
                 },
@@ -229,11 +349,6 @@
         window.addEventListener('resize', () => {
             echart.resize();
         });
-            } else {
-                isEmpty.value = true;
-                message.warn(msg);
-            }
-        } catch {}
     }
 
     function getParams() {
@@ -259,8 +374,14 @@
         return params;
     }
 
+    function getTime(time) {
+        if (!time) return { h: 0, m: 0 };
+        if (time < 60) return { h: 0, m: time };
+
+        return { h: (time - (time % 60)) / 60, m: time % 60 };
+    }
     onMounted(() => {
-        initEchart('0');
+        initEchart();
     });
 </script>
 <style scoped lang="less"></style>

src/components/secondaryScreen/secondMap/components/userInfoModal/userInfoModal.vue

@@ -18,11 +18,11 @@
                         <a-tab-pane key="0" tab="总览" />
                         <a-tab-pane key="1" tab="心率" />
                         <a-tab-pane key="2" tab="血氧" />
-                        <a-tab-pane key="4" tab="睡眠" />
                         <a-tab-pane key="3" tab="压力" />
+                        <a-tab-pane key="4" tab="睡眠" />
+                        <a-tab-pane key="5" tab="体温" />
                         <a-tab-pane key="6" tab="锻炼" />
                         <a-tab-pane key="7" tab="步数" />
-                        <a-tab-pane key="5" tab="体温" />
                     </a-tabs>
                     <div style="height: 60vh; overflow: auto">
                         <all-look