diff --git a/src/assets/images/allStep.png b/src/assets/images/allStep.png
new file mode 100644
index 0000000..b6b4db6
Binary files /dev/null and b/src/assets/images/allStep.png differ
diff --git a/src/components/secondaryScreen/secondMap/components/userInfoModal/allLook.vue b/src/components/secondaryScreen/secondMap/components/userInfoModal/allLook.vue
index f48d504..30f4527 100644
--- a/src/components/secondaryScreen/secondMap/components/userInfoModal/allLook.vue
+++ b/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">
@@ -29,4 +29,4 @@
         emit('changeParamsDate', v.target.value);
     }
 </script>
-<style scoped lang="less"></style>
\ No newline at end of file
+<style scoped lang="less"></style>
diff --git a/src/components/secondaryScreen/secondMap/components/userInfoModal/allLookItem.vue b/src/components/secondaryScreen/secondMap/components/userInfoModal/allLookItem.vue
index 53f6b62..d7bf3d6 100644
--- a/src/components/secondaryScreen/secondMap/components/userInfoModal/allLookItem.vue
+++ b/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) {
@@ -316,4 +340,4 @@
             padding: 5px 0;
         }
     }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/secondaryScreen/secondMap/components/userInfoModal/sleep.vue b/src/components/secondaryScreen/secondMap/components/userInfoModal/sleep.vue
index 951332f..6307fc3 100644
--- a/src/components/secondaryScreen/secondMap/components/userInfoModal/sleep.vue
+++ b/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,58 +120,153 @@
     /**
      *  @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;
-                let xArr = [];
-                let yArr = [];
-                let yArr1 = [];
-                maxInfo.value = result.maxValue ? result.maxValue : '/';
-                middleInfo.value = result.avgValue ? result.avgValue : '/';
-                minInfo.value = result.minValue ? result.minValue : '/';
-                if (t === '1') return;
-                type.value === 1 &&
-                    result.viewDataList.map((item) => {
-                        xArr.push(item.date);
-                        yArr.push(item.value === 1 ? 1 : 0);
-                        yArr1.push(item.value === 2 ? 1 : 0);
-                    });
+                isEmpty.value = type.value === 1 ? result.timePeriods.length === 0 : result.viewDataList.length === 0;
+                let xArr: any[] = [];
+                let yArr: any[] = [];
+                let yArr1: any[] = [];
+                maxInfo.value = type.value === 1 ? result.maxValue : result.deepSleepTimes ? result.deepSleepTimes : '';
+                middleInfo.value = type.value === 1 ? result.total1 : result.deepLightTimes ? result.deepLightTimes : '';
+                minInfo.value = type.value === 1 ? result.minValue : result.lightSleepTimes ? result.lightSleepTimes : '';
+                // debugger;
+                // type.value === 1 &&
+                //     result.viewDataList.map((item) => {
+                //         xArr.push(item.date);
+                //         yArr.push(item.value === 1 ? 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);
-                        yArr1.push(item.value1);
+                        // let p1 = parseInt(((item.value ? item.value : 0) / total) * 100);
+                        // let p2 = parseInt(((item.value1 ? item.value1 : 0) / total) * 100);
+                        yArr.push(item.value ? item.value : 0);
+                        yArr1.push(item.value1 ? item.value1 : 0);
                     });
-                echart = echarts.init(chartRef.value);
-                const option = {
-                    title: {},
-                    legend: {
-                        textStyle: {
-                            color: '#fff',
-                        },
-                    },
-                    tooltip: {
-                        trigger: 'axis',
-                        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 str = '';
-                            if (type.value === 1) {
-                                str = xArr[tar.dataIndex] + '<br/>' + (tar1.value > 0 ? '浅睡' : '深睡');
-                            } else {
-                                str =
-                                    xArr[tar.dataIndex] +
-                                    `<div>
+                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: '#ffffff',
+                },
+            },
+            tooltip: {
+                trigger: 'axis',
+                axisPointer: {
+                    type: 'shadow',
+                },
+                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 ? '浅睡' : '深睡');
+                    } else {
+                        str =
+                            xArr[tar.dataIndex] +
+                            `<div>
                                             <div style="display: flex;justify-content: space-between">
                                                 <div>
                                                     深睡：${tar.value ? tar.value : 0}
@@ -178,62 +284,71 @@
                                                 </div>
                                             </div>
                                     </div>`;
-                            }
-                            return str;
-                        },
+                    }
+                    return str;
+                },
+            },
+            grid: {
+                left: '3%',
+                right: '4%',
+                bottom: '3%',
+                containLabel: true,
+            },
+            xAxis: {
+                type: 'category',
+                splitLine: { show: false },
+                data: xArr,
+                axisLabel: {
+                    color: '#fff',
+                },
+            },
+            yAxis: {
+                show: false,
+            },
+            series: [
+                {
+                    name: '深睡',
+                    type: 'bar',
+                    barMaxWidth: '20px',
+                    stack: 'a',
+                    itemStyle: {
+                        borderColor: '#5087ec',
+                        borderWidth: 0,
+                        color: '#5087ec',
                     },
-                    grid: {
-                        left: '3%',
-                        right: '4%',
-                        bottom: '3%',
-                        containLabel: true,
+                    // emphasis: {
+                    //     itemStyle: {
+                    //         borderColor: '#68bbc4',
+                    //         color: '#68bbc4',
+                    //     },
+                    // },
+                    axisLabel: {
+                        color: '#fff',
                     },
-                    xAxis: {
-                        type: 'category',
-                        splitLine: { show: false },
-                        data: xArr,
-                        axisLabel: {
-                            color: '#fff',
-                        },
+                    data: yArr,
+                },
+                {
+                    name: '浅睡',
+                    barMaxWidth: '20px',
+                    stack: 'a',
+                    itemStyle: {
+                        borderColor: '#85d0dc',
+                        borderWidth: 0,
+                        color: '#85d0dc',
                     },
-                    yAxis: {
-                        show: false,
+                    axisLabel: {
+                        color: '#fff',
                     },
-                    series: [
-                        {
-                            name: '深睡',
-                            type: 'bar',
-                            barMaxWidth: '20px',
-                            itemStyle: {
-                                borderColor: '#5087ec',
-                                borderWidth: 0,
-                                color: '#5087ec',
-                            },
-                            data: yArr,
-                        },
-                        {
-                            name: '浅睡',
-                            barMaxWidth: '20px',
-                            itemStyle: {
-                                borderColor: '#85d0dc',
-                                borderWidth: 0,
-                                color: '#85d0dc',
-                            },
-                            type: 'bar',
-                            data: yArr1,
-                        },
-                    ],
-                };
+                    type: 'bar',
+                    data: yArr1,
+                },
+            ],
+        };
 
-                echart.setOption(option);
-                window.addEventListener('resize', () => {
-                    echart.resize();
-                });
-            } else {
-                isEmpty.value = true;
-                message.warn(msg);
-            }
-        } catch {}
+        echart.setOption(option);
+        window.addEventListener('resize', () => {
+            echart.resize();
+        });
     }
 
     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>
\ No newline at end of file
+<style scoped lang="less"></style>
diff --git a/src/components/secondaryScreen/secondMap/components/userInfoModal/userInfoModal.vue b/src/components/secondaryScreen/secondMap/components/userInfoModal/userInfoModal.vue
index 1e79072..c39fabe 100644
--- a/src/components/secondaryScreen/secondMap/components/userInfoModal/userInfoModal.vue
+++ b/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