From 998201f574e3886824e5bb523a603e0dbcbeeb89 Mon Sep 17 00:00:00 2001
From: chenJinxu <2183691628@qq.com>
Date: Tue, 26 Dec 2023 19:52:13 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=20=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/EchartBox.vue              |  14 +-
 src/components/TopNavBar.vue              |  90 ++--
 src/views/insight/index.vue               |   4 +-
 src/views/insight/monthReport.vue         | 146 ++++-
 src/views/today/emotionDetails.vue        | 108 +++-
 src/views/today/index.vue                 |  26 +-
 src/views/today/report.vue                | 283 +++++++++-
 src/views/today/scss/emotion-details.scss |   8 +-
 src/views/today/scss/index.scss           |   5 +
 src/views/today/scss/report.scss          | 616 ++++++++++++----------
 10 files changed, 925 insertions(+), 375 deletions(-)

diff --git a/src/components/EchartBox.vue b/src/components/EchartBox.vue
index 5d351f9..34ef86c 100644
--- a/src/components/EchartBox.vue
+++ b/src/components/EchartBox.vue
@@ -6,7 +6,7 @@
       <div class="title-out" v-if="outTitle !== ''">
         <span>{{ outTitle }}</span>
       </div>
-      <div class="echart-main">
+      <div class="echart-main" :style="{ border: border ? `1px solid ${$com_light_green}` : 'none' }">
         <!-- legend -->
         <div class="legend">
           <div class="left">
@@ -32,9 +32,9 @@
         <!-- echart盒子内容 -->
         <div class="echart">
           <div :id="echartId" :style="{ height: height + 'px', minHeight: '200px' }"></div>
+          <!--echart自定义底部  -->
+          <slot name="custom-bot"></slot>
         </div>
-        <!--echart自定义底部  -->
-        <slot name="custom-bot"></slot>
       </div>
     </div>
   </div>
@@ -71,6 +71,10 @@ export default {
     options: {
       type: Object,
       default: () => {}
+    },
+    border: {
+      type: Boolean,
+      default: true
     }
   },
   data() {
@@ -122,6 +126,7 @@ export default {
   width: 100%;
   margin: 20px 0;
   .echart-con {
+    position: relative;
     padding: 20px 0;
     .title-out {
       font-size: 36px;
@@ -131,9 +136,10 @@ export default {
 
     .echart-main {
       position: relative;
-      border: 1px solid $com_light_green;
+      /* border: 1px solid $com_light_green; */
       border-radius: 30px;
       padding: 20px;
+      overflow: hidden;
       .legend {
         flex: 1;
         display: flex;
diff --git a/src/components/TopNavBar.vue b/src/components/TopNavBar.vue
index 7f5cb92..0c861a6 100644
--- a/src/components/TopNavBar.vue
+++ b/src/components/TopNavBar.vue
@@ -1,61 +1,55 @@
 <!--  -->
 <template>
   <div class="nav-bar">
-    <van-nav-bar
-        :title="title"
-        :fixed="true"
-        z-index="998"
-        @click-left="onClickLeft"
-        @click-right="onClickRight"
-    >
-        <template #left>
-            <van-icon :name="LeftIcon" size="32" />
-        </template>
-        <template #right>
-            <van-icon :name="RightIcon" dot size="18" />
-        </template>
+    <van-nav-bar :title="title" :fixed="true" z-index="998" @click-left="onClickLeft" @click-right="onClickRight">
+      <template #left>
+        <van-icon :name="LeftIcon" size="46" />
+      </template>
+      <template #right>
+        <van-icon :name="RightIcon" dot size="32" />
+      </template>
     </van-nav-bar>
   </div>
 </template>
 
 <script>
-    import LeftIcon from "@/assets/icons/1_75.png";
-    import RightIcon from "@/assets/icons/1_30.png";
-    export default {
-        components: {},
-        name: 'NavBar',
-        props: {
-            title: {
-                type: String,
-                default: '吕子宣 LV 10'
-            }
-        },
-        data() {
-            return {
-                LeftIcon,
-                RightIcon
-            };
-        },
-        created() {},
-        mounted() {},
-        methods: {
-            onClickLeft(value) {
-                this.$emit('on-click-left', value);
-            },
-            onClickRight(value) {
-                this.$emit('on-click-right', value);
-            }
-        }
+import LeftIcon from '@/assets/icons/1_75.png';
+import RightIcon from '@/assets/icons/1_30.png';
+export default {
+  components: {},
+  name: 'NavBar',
+  props: {
+    title: {
+      type: String,
+      default: '吕子宣 LV 10'
+    }
+  },
+  data() {
+    return {
+      LeftIcon,
+      RightIcon
     };
+  },
+  created() {},
+  mounted() {},
+  methods: {
+    onClickLeft(value) {
+      this.$emit('on-click-left', value);
+    },
+    onClickRight(value) {
+      this.$emit('on-click-right', value);
+    }
+  }
+};
 </script>
 <style scoped lang="scss">
-    .nav-bar {
-        position: absolute !important;
-        left: 0;
-        top: 0;
-        height: 100px;
-        width: 100%;
-    }
+.nav-bar {
+  position: absolute !important;
+  left: 0;
+  top: 0;
+  height: 100px;
+  width: 100%;
+}
 
-    /* @import url(); 引入css类 */
+/* @import url(); 引入css类 */
 </style>
diff --git a/src/views/insight/index.vue b/src/views/insight/index.vue
index 98efa3c..13e5c75 100644
--- a/src/views/insight/index.vue
+++ b/src/views/insight/index.vue
@@ -35,8 +35,8 @@
       <div class="legendBox">
         <div class="legend">
           <div class="legendItem" :class="item.type" v-for="(item, index) in degreeList" :key="index">
-            <span>{{ item.name }}{{ emotionList[emotionActive].name }}</span>
-            <span class="number">{{ 120 }}次({{ 120 }}%)</span>
+            <span>{{ item.name }}{{ emotionList[emotionActive].name }}倾向</span>
+            <span class="number">{{ 8 }}次({{ 1 }}%)</span>
           </div>
         </div>
       </div>
diff --git a/src/views/insight/monthReport.vue b/src/views/insight/monthReport.vue
index 204c36d..fd120ce 100644
--- a/src/views/insight/monthReport.vue
+++ b/src/views/insight/monthReport.vue
@@ -91,8 +91,28 @@
         </div>
       </div>
     </div>
+    <div class="scatter">
+      <EchartBox
+        echartId="scatterCharts"
+        outTitle="24小时心率时间分布图"
+        :border="false"
+        height="200"
+        width="200"
+        :options="scatterOptions"
+      >
+        <template #custom-bot>
+          <div class="custom-bot">
+            <div class="list">
+              <div class="item" v-for="(item, index) in timeList" :key="index">
+                <span>{{ item }}</span>
+              </div>
+            </div>
+          </div>
+        </template>
+      </EchartBox>
+    </div>
     <!-- todo 柱形图 -->
-    <div class="bar-chart-con" v-show="signActive !== 2"></div>
+    <!-- <div class="bar-chart-con" v-show="signActive !== 2"></div> -->
     <div class="chart-title" v-show="signActive !== 2">
       <p>{{ pieTitle }}数据图</p>
     </div>
@@ -179,9 +199,11 @@
 <script>
 import { isNotNull } from '@/services/utils-service';
 import NavBar from '@/components/NavBar';
+import EchartBox from '@/components/EchartBox';
 export default {
   components: {
-    NavBar
+    NavBar,
+    EchartBox
   },
   data() {
     return {
@@ -285,10 +307,114 @@ export default {
           type: 'severe',
           color: '#FF5F8B'
         }
-      ]
+      ],
+      timeList: ['0', '6', '12', '18', '24']
     };
   },
   computed: {
+    scatterOptions() {
+      return {
+        backgroundColor: 'rgba(255, 255, 255, 1)',
+        grid: {
+          top: '1%',
+          left: '10%',
+          right: '10%',
+          bottom: '1%'
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        xAxis: {
+          type: 'value',
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            margin: 15
+          },
+          show: false
+        },
+        yAxis: {
+          type: 'category',
+          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'].reverse(),
+          show: true
+        },
+        series: [
+          {
+            data: [120, 200, 150, 80, 70, 110, 130],
+            type: 'bar',
+            stack: 'one',
+            barWidth: 20,
+            itemStyle: {
+              borderWidth: 3,
+              borderColor: 'rgba(255, 255, 255, 1)', //同背景色一样
+              barBorderRadius: 120
+            },
+
+            emphasis: {
+              itemStyle: {
+                borderColor: 'rgba(255, 255, 255, 1)'
+              }
+            }
+          },
+          {
+            data: [120, 30, 150, 80, 70, 110, 130],
+            type: 'bar',
+            stack: 'one', //堆叠
+            barWidth: 20,
+            itemStyle: {
+              borderWidth: 3, //用border设置两个柱形图之间的间距
+              borderColor: 'rgba(255, 255, 255, 1)', //同背景色一样
+              barBorderRadius: 120
+            },
+            emphasis: {
+              itemStyle: {
+                borderColor: 'rgba(255, 255, 255, 1)'
+              }
+            }
+          },
+          {
+            data: [120, 30, 150, 80, 70, 110, 130],
+            type: 'bar',
+            stack: 'one', //堆叠
+            barWidth: 20,
+            itemStyle: {
+              borderWidth: 3, //用border设置两个柱形图之间的间距
+              borderColor: 'rgba(255, 255, 255, 1)', //同背景色一样
+              barBorderRadius: 120
+            },
+            emphasis: {
+              itemStyle: {
+                borderColor: 'rgba(255, 255, 255, 1)'
+              }
+            }
+          },
+          {
+            data: [120, 30, 150, 80, 70, 110, 130],
+            type: 'bar',
+            stack: 'one', //堆叠
+            barWidth: 20,
+            itemStyle: {
+              borderWidth: 3, //用border设置两个柱形图之间的间距
+              borderColor: 'rgba(255, 255, 255, 1)', //同背景色一样
+              barBorderRadius: 120
+            },
+            emphasis: {
+              itemStyle: {
+                borderColor: 'rgba(255, 255, 255, 1)'
+              }
+            }
+          }
+        ]
+      };
+    },
     pieOption() {
       return {
         tooltip: {
@@ -1028,6 +1154,20 @@ export default {
       }
     }
   }
+  .scatter {
+    border: none;
+    height: 600px;
+    .custom-bot {
+      .list {
+        height: 40px;
+        padding: 0 20px;
+        display: flex;
+        justify-content: space-around;
+        align-items: flex-start;
+        font-size: 28px;
+      }
+    }
+  }
   .chart-title {
     padding: 30px 30px 0 30px;
     font-size: 36px;
diff --git a/src/views/today/emotionDetails.vue b/src/views/today/emotionDetails.vue
index e6f19bc..a5a2502 100644
--- a/src/views/today/emotionDetails.vue
+++ b/src/views/today/emotionDetails.vue
@@ -135,7 +135,23 @@
       <!-- 底部 -->
       <div class="bottom">
         <div class="echart-container">
-          <div class="echart" ref="charts"></div>
+          <div class="echart">
+            <EchartBox
+              echartId="charts"
+              outTitle="压力数据图"
+              height="200"
+              width="200"
+              :legend="emoLegend"
+              :options="emoOptions"
+            ></EchartBox>
+          </div>
+          <!--  <EchartBox
+            echartId="charts"
+            outTitle="压力数据图"
+            height="300"
+            :legend="emoLegend"
+            :options="emoOptions"
+          ></EchartBox> -->
         </div>
 
         <div class="line-gray"></div>
@@ -263,15 +279,27 @@
 
 <script>
 import { EmotionModel, PsyBaseUrl } from '@/config/models';
+import EchartBox from '@/components/EchartBox';
 import NavBar from '@/components/NavBar';
 import axios from 'axios';
 export default {
   name: 'psychological-monitor',
   components: {
-    NavBar
+    NavBar,
+    EchartBox
   },
   data() {
     return {
+      emoLegend: {
+        title: '',
+        list: [
+          { name: '无压力倾向', color: '#179b3b' },
+          { name: '轻度压力倾向', color: '#8dc21f' },
+          { name: '中度压力倾向', color: '#2ea7e0' },
+          { name: '重度压力倾向', color: '#ff5f8b' }
+        ]
+      },
+
       // 日期选择标签
       dateList: [
         { name: 'today', text: '今天', value: 0 },
@@ -396,11 +424,65 @@ export default {
       weekList: [],
       startDate: '', //接口需要的开始时间
       endDate: '', //接口需要的结束时间
-      currentEmoName: '' //当前情绪名称
+      currentEmoName: '', //当前情绪名称
+      emotionDataNew: []
     };
   },
   computed: {
     // 默认折线图配置，echarts 具体配置 见 https://echarts.apache.org/zh/option.html#title
+    emoOptions() {
+      return {
+        grid: {
+          top: '10%',
+          left: '10%',
+          right: '10%',
+          bottom: '20%'
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            show: false
+          },
+          textStyle: {
+            fontSize: 10
+          },
+          axisTick: {
+            show: false
+          },
+          nameLocation: 'left',
+          axisLabel: {
+            show: true,
+            fontSize: 12,
+            showMinLabel: true, //显示最小值
+            showMaxLabel: true //显示最大值
+          },
+          data: ['6:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00']
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            type: 'line',
+            data: this.emotionDataNew,
+            symbol: 'circle',
+            symbolSize: 12,
+            smooth: true,
+            itemStyle: {
+              normal: {
+                color: '#fff',
+                borderWidth: 2,
+                lineStyle: {
+                  width: 6,
+                  type: 'solid',
+                  color: '#189b3b'
+                }
+              }
+            }
+          }
+        ]
+      };
+    },
     defaultOptions() {
       return {
         time: {
@@ -737,6 +819,7 @@ export default {
     this.getPieData();
     this.getCalendarData();
     this.getPsychologiclData('2023-11-21');
+    this.createList();
     //this.getWeekResult();
   },
   mounted() {
@@ -746,6 +829,21 @@ export default {
     /* this.psyCurrent = this.calcPsyTabindex(EmotionModel[this.params.name].type); */
   },
   methods: {
+    createList() {
+      // 模拟数据
+      this.emotionDataNew = [];
+      const colors = ['#189b3b', '#2ea7e0', '#ff5f8b'];
+      for (let i = 0; i < 7; i++) {
+        let value = Math.floor(Math.random() * 60) + 80;
+        let color = colors[Math.floor(Math.random() * colors.length)];
+        this.emotionDataNew.push({
+          value,
+          itemStyle: {
+            borderColor: color
+          }
+        });
+      }
+    },
     loadParams() {
       let params = this.$route.query;
       if (params) {
@@ -1305,11 +1403,11 @@ export default {
     },
     // 初始化折线图表
     initEchart() {
-      if (this.echarts != null && this.echarts != '' && this.echarts != undefined) {
+      /*  if (this.echarts != null && this.echarts != '' && this.echarts != undefined) {
         this.echarts.dispose();
       }
       this.echarts = this.$echarts.init(this.$refs.charts);
-      this.echarts.setOption(this.defaultOptions);
+      this.echarts.setOption(this.defaultOptions); */
     },
     // 点击历史监测，打开日历
     onHistory() {
diff --git a/src/views/today/index.vue b/src/views/today/index.vue
index f06dfee..f47a5b7 100644
--- a/src/views/today/index.vue
+++ b/src/views/today/index.vue
@@ -23,7 +23,7 @@
         <hr />
         <div class="bottom">
           <p>详细解读</p>
-          <div>
+          <div @click="onScroll">
             <span>日记</span>
             <img src="@/assets/today/icons/2_22.png" />
           </div>
@@ -42,20 +42,20 @@
       <ul>
         <li>
           <h4>40</h4>
-          <p>抑郁倾向</p>
-          <span>无抑郁倾向</span>
+          <p>疲劳倾向</p>
+          <span>无疲劳倾向</span>
           <time>12:30</time>
         </li>
         <li>
           <h4>55</h4>
-          <p>抑郁倾向</p>
-          <span>无抑郁倾向</span>
+          <p>压力倾向</p>
+          <span>无压力倾向</span>
           <time>12:30</time>
         </li>
         <li>
           <h4>75</h4>
-          <p>抑郁倾向</p>
-          <span>无抑郁倾向</span>
+          <p>焦虑倾向</p>
+          <span>无焦虑倾向</span>
           <time>12:30</time>
         </li>
       </ul>
@@ -73,14 +73,17 @@
         <li>
           <h4>36.8</h4>
           <p>体温</p>
+          <time>12:30</time>
         </li>
         <li>
           <h4>92</h4>
           <p>心率</p>
+          <time>12:30</time>
         </li>
         <li>
           <h4>6000</h4>
           <p>步数</p>
+          <time>12:30</time>
         </li>
       </ul>
       <div class="tip">
@@ -92,7 +95,7 @@
       </div>
     </div>
     <!-- 步数 -->
-    <div class="step">
+    <div class="step" v-if="false">
       <div class="main">
         <ul>
           <li>
@@ -250,6 +253,13 @@ export default {
           this.$store.commit('ssjlToken', res.data.data);
         }
       });
+    },
+    onScroll() {
+      window.scrollTo({
+        top: document.body.scrollHeight,
+        left: 0,
+        behavior: 'smooth'
+      });
     }
   }
 };
diff --git a/src/views/today/report.vue b/src/views/today/report.vue
index fb82907..0baaf22 100644
--- a/src/views/today/report.vue
+++ b/src/views/today/report.vue
@@ -1,13 +1,20 @@
 <template>
   <!-- 周/月报 -->
   <div class="report">
-    <van-nav-bar title="周报" :border="true" @click-left="onNavBack">
-      <template #left>
-        <van-icon name="arrow-left" size="24" style="padding: 0" />
-        <span>返回</span>
-      </template>
-    </van-nav-bar>
+    <NavBar title="周报" @on-click-left="onNavBack" right-text="历史"> </NavBar>
+
     <div class="main">
+      <div class="periodNav">
+        <div
+          class="periodItem minPeriodItem"
+          :class="{ active: signActive == index }"
+          v-for="(item, index) in signList"
+          :key="index"
+          @click="onSignClick(index)"
+        >
+          <span>{{ item.name }}</span>
+        </div>
+      </div>
       <!-- 总评 -->
       <div class="overall-rating">
         <div class="con">
@@ -86,12 +93,39 @@
         </div>
       </div>
       <div class="line"></div>
+      <!-- 24小时 -->
+      <!-- <div class="chart-title">
+        <p>24小时{{ emoName }}时间分布图</p>
+      </div> -->
+      <div class="scatter">
+        <EchartBox
+          echartId="scatterCharts"
+          outTitle="24小时抑郁时间分布图"
+          :border="false"
+          height="200"
+          width="200"
+          :options="scatterOptions"
+        >
+          <template #custom-bot>
+            <div class="custom-bot">
+              <div class="list">
+                <div class="item" v-for="(item, index) in timeList" :key="index">
+                  <span>{{ item }}</span>
+                </div>
+              </div>
+            </div>
+          </template>
+        </EchartBox>
+      </div>
+
       <div class="chart-title">
         <p>{{ echartsTitle }}</p>
       </div>
       <!-- 数据图-柱形图 -->
       <div class="bar-chart">
-        <div class="echart" ref="charts"></div>
+        <div class="echart">
+          <EchartBox echartId="charts" height="200" width="200" :legend="emoLegend" :options="emoOptions"></EchartBox>
+        </div>
       </div>
       <div class="line"></div>
       <!-- 建议 -->
@@ -149,10 +183,40 @@
 import { isNotNull } from '@/services/utils-service';
 import axios from 'axios';
 import APICore from '@/api/core';
+import NavBar from '@/components/NavBar';
+import EchartBox from '@/components/EchartBox';
 export default {
   name: '',
+  components: {
+    NavBar,
+    EchartBox
+  },
   data() {
     return {
+      signActive: 0,
+      emoLegend: {
+        title: '',
+        list: [
+          { name: '无抑郁倾向', color: '#179b3b' },
+          { name: '轻度抑郁倾向', color: '#8dc21f' },
+          { name: '中度抑郁倾向', color: '#2ea7e0' },
+          { name: '重度抑郁倾向', color: '#ff5f8b' }
+        ]
+      },
+      signList: [
+        {
+          grid: 'heartRateList',
+          name: '疲劳'
+        },
+        {
+          grid: 'temperatureList',
+          name: '压力'
+        },
+        {
+          grid: 'stepList',
+          name: '焦虑'
+        }
+      ],
       pieRightList: [
         /*  {
                     text: "无情绪倾向",
@@ -243,11 +307,15 @@ export default {
       weekResult: {},
       upImg: require('@/assets/today/icons/up.png'),
       downImg: require('@/assets/today/icons/down.png'),
-      signGrid: []
+      signGrid: [],
+      chartsScatter: null,
+      timeList: ['0', '6', '12', '18', '24'],
+      emotionDataNew: []
     };
   },
   created() {
     this.initEchartText();
+    this.createList();
   },
   mounted() {
     this.loadParams();
@@ -275,6 +343,59 @@ export default {
     }
   },
   computed: {
+    emoOptions() {
+      return {
+        grid: {
+          top: '10%',
+          left: '10%',
+          right: '10%',
+          bottom: '20%'
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            show: false
+          },
+          textStyle: {
+            fontSize: 10
+          },
+          axisTick: {
+            show: false
+          },
+          nameLocation: 'left',
+          axisLabel: {
+            show: true,
+            fontSize: 12,
+            showMinLabel: true, //显示最小值
+            showMaxLabel: true //显示最大值
+          },
+          data: ['6:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00']
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            type: 'line',
+            data: this.emotionDataNew,
+            symbol: 'circle',
+            symbolSize: 12,
+            smooth: true,
+            itemStyle: {
+              normal: {
+                color: '#fff',
+                borderWidth: 2,
+                lineStyle: {
+                  width: 6,
+                  type: 'solid',
+                  color: '#189b3b'
+                }
+              }
+            }
+          }
+        ]
+      };
+    },
     // 折线图标题
     echartsTitle() {
       return `${this.emoName}数据图`;
@@ -524,9 +645,127 @@ export default {
           }
         ]
       };
+    },
+    scatterOptions() {
+      return {
+        backgroundColor: 'rgba(255, 255, 255, 1)',
+        grid: {
+          top: '1%',
+          left: '10%',
+          right: '10%',
+          bottom: '1%'
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        xAxis: {
+          type: 'value',
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            margin: 15
+          },
+          show: false
+        },
+        yAxis: {
+          type: 'category',
+          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'].reverse(),
+          show: true
+        },
+        series: [
+          {
+            data: [120, 200, 150, 80, 70, 110, 130],
+            type: 'bar',
+            stack: 'one',
+            barWidth: 20,
+            itemStyle: {
+              borderWidth: 3,
+              borderColor: 'rgba(255, 255, 255, 1)', //同背景色一样
+              barBorderRadius: 120
+            },
+
+            emphasis: {
+              itemStyle: {
+                borderColor: 'rgba(255, 255, 255, 1)'
+              }
+            }
+          },
+          {
+            data: [120, 30, 150, 80, 70, 110, 130],
+            type: 'bar',
+            stack: 'one', //堆叠
+            barWidth: 20,
+            itemStyle: {
+              borderWidth: 3, //用border设置两个柱形图之间的间距
+              borderColor: 'rgba(255, 255, 255, 1)', //同背景色一样
+              barBorderRadius: 120
+            },
+            emphasis: {
+              itemStyle: {
+                borderColor: 'rgba(255, 255, 255, 1)'
+              }
+            }
+          },
+          {
+            data: [120, 30, 150, 80, 70, 110, 130],
+            type: 'bar',
+            stack: 'one', //堆叠
+            barWidth: 20,
+            itemStyle: {
+              borderWidth: 3, //用border设置两个柱形图之间的间距
+              borderColor: 'rgba(255, 255, 255, 1)', //同背景色一样
+              barBorderRadius: 120
+            },
+            emphasis: {
+              itemStyle: {
+                borderColor: 'rgba(255, 255, 255, 1)'
+              }
+            }
+          },
+          {
+            data: [120, 30, 150, 80, 70, 110, 130],
+            type: 'bar',
+            stack: 'one', //堆叠
+            barWidth: 20,
+            itemStyle: {
+              borderWidth: 3, //用border设置两个柱形图之间的间距
+              borderColor: 'rgba(255, 255, 255, 1)', //同背景色一样
+              barBorderRadius: 120
+            },
+            emphasis: {
+              itemStyle: {
+                borderColor: 'rgba(255, 255, 255, 1)'
+              }
+            }
+          }
+        ]
+      };
     }
   },
   methods: {
+    createList() {
+      // 模拟数据
+      this.emotionDataNew = [];
+      const colors = ['#189b3b', '#2ea7e0', '#ff5f8b'];
+      for (let i = 0; i < 7; i++) {
+        let value = Math.floor(Math.random() * 60) + 80;
+        let color = colors[Math.floor(Math.random() * colors.length)];
+        this.emotionDataNew.push({
+          value,
+          itemStyle: {
+            borderColor: color
+          }
+        });
+      }
+    },
     calcWeekImg(cur, last, callBackText) {
       let imgurl = '';
       let text = '';
@@ -736,6 +975,16 @@ export default {
           };
           let Avg = {
             label: '平均值',
+            value: data.Min,
+            time: data.MinDesc
+              ? this.currentDays === 0
+                ? this.$dayjs(data.MinDesc).format('HH:mm')
+                : this.$dayjs(data.MinDesc).format('MM/DD HH:mm')
+              : '',
+            bgColor: '#2ea7e0'
+          };
+          /* let Avg = {
+            label: '最近值',
             value: data.Avg,
             time: data.AvgDesc
               ? this.currentDays === 0
@@ -743,7 +992,7 @@ export default {
                 : this.$dayjs(data.AvgDesc).format('MM/DD HH:mm')
               : '',
             bgColor: '#2ea7e0'
-          };
+          }; */
           this.statisticsList.push(Max);
           this.statisticsList.push(Min);
           this.statisticsList.push(Avg);
@@ -904,11 +1153,16 @@ export default {
         });
     },
     initEchart() {
-      if (this.echarts != null && this.echarts != '' && this.echarts != undefined) {
+      /* if (this.echarts != null && this.echarts != '' && this.echarts != undefined) {
         this.echarts.dispose();
-      }
-      this.echarts = this.$echarts.init(this.$refs.charts);
-      this.echarts.setOption(this.defaultOptions);
+      } */
+      /* if (this.chartsScatter != null && this.chartsScatter != '' && this.chartsScatter != undefined) {
+        this.chartsScatter.dispose();
+      } */
+      /* this.echarts = this.$echarts.init(this.$refs.charts);
+      this.echarts.setOption(this.defaultOptions); */
+      /*  this.chartsScatter = this.$echarts.init(this.$refs.chartsScatter);
+      this.chartsScatter.setOption(this.scatterOptions); */
     },
     // 初始化饼状图
     initPieEchart() {
@@ -979,6 +1233,9 @@ export default {
         callBackDate = startDate.replace(/-/g, '.') + '-' + endDate.slice(5, endDate.length).replace(/-/g, '.');
       }
       return callBackDate;
+    },
+    onSignClick(index) {
+      this.signActive = index;
     }
   }
 };
diff --git a/src/views/today/scss/emotion-details.scss b/src/views/today/scss/emotion-details.scss
index e63e6bc..47162f7 100644
--- a/src/views/today/scss/emotion-details.scss
+++ b/src/views/today/scss/emotion-details.scss
@@ -79,7 +79,7 @@
     .psy-tab-bar {
         height: 50px;
         position: relative;
-        margin: 20px 0 40px 0;
+        margin: 20px 0 0 0;
         padding: 0 20px;
         .psy-tab-con {
             background-color: #EEEEEE;
@@ -241,12 +241,14 @@
         }
         .bottom {
            flex: 1;
+           overflow: scroll;
             .echart-container {
-                height: 500px;
+                position: relative;
+                min-height: 600px;
                 background-color:#fff;
                 padding: 0 10px;
                 .echart {
-                    height: 500px;
+                    height: 200px;
                     padding: 0 10px;
                 }
             }
diff --git a/src/views/today/scss/index.scss b/src/views/today/scss/index.scss
index b4a2ce9..2ef94ed 100644
--- a/src/views/today/scss/index.scss
+++ b/src/views/today/scss/index.scss
@@ -265,6 +265,11 @@
                     font-size: 30px;
                     margin-top: 0px;
                 }
+                time {
+                    color: #fff;
+                    font-size: 24px;
+                    display: block;
+                }
             }
         }
         .tip {
diff --git a/src/views/today/scss/report.scss b/src/views/today/scss/report.scss
index e402787..80e0075 100644
--- a/src/views/today/scss/report.scss
+++ b/src/views/today/scss/report.scss
@@ -1,320 +1,358 @@
 .report {
-    height: 100vh;
-    width: 100%;
-    overflow: hidden;
-    background-color: #F5F5F5;
-    font-family: Source Han Sans CN;
-
-    .main {
-        height: calc(100vh - 90px);
-        overflow: scroll;
-        background-color: #fff;
-        padding: 0 20px;
-        .line {
-            height: 22px;
-            background-color: $lineGray;
+  height: 100vh;
+  width: 100%;
+  overflow: hidden;
+  background-color: #f5f5f5;
+  font-family: Source Han Sans CN;
+
+  .main {
+    height: calc(100vh - 200px);
+    overflow: scroll;
+    background-color: #fff;
+    padding: 0 20px;
+    padding-top: 100px;
+    .periodNav {
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      .periodItem {
+        width: 48%;
+        font-size: 28px;
+        color: black;
+        text-align: center;
+        padding: 12px;
+        border-radius: 30px;
+        background: #e6e6e6;
+        &.active {
+          color: white;
+          background: #179b3b;
         }
+      }
+      .minPeriodItem {
+        width: 32%;
+        padding: 8px;
+      }
+    }
+    .line {
+      height: 22px;
+      background-color: $lineGray;
+    }
 
-        .overall-rating {
-            padding: 46px 15px;
-            margin-bottom: 18px;
-            .con {
-                padding: 34px 20px;
-                display: flex;
-                justify-content: flex-start;
-                align-items: flex-start;
-                flex-direction: column;
-                font-size: 28px;
-                background: #FFFFFF;
-                border: 1px solid #cdf348;
-                border-radius: 40px;
-
-                p {
-                    font-size: 36px;
-                    font-family: Source Han Sans CN;
-                    color: #666666;
-
-                    .bold {
-                        color: #282828;
-                        font-weight: bold;
-                    }
-                }
+    .overall-rating {
+      padding: 46px 15px;
+      margin-bottom: 18px;
+      .con {
+        padding: 34px 20px;
+        display: flex;
+        justify-content: flex-start;
+        align-items: flex-start;
+        flex-direction: column;
+        font-size: 28px;
+        background: #ffffff;
+        border: 1px solid #cdf348;
+        border-radius: 40px;
+
+        p {
+          font-size: 36px;
+          font-family: Source Han Sans CN;
+          color: #666666;
+
+          .bold {
+            color: #282828;
+            font-weight: bold;
+          }
+        }
 
-                .space-between {
-                    width: 100%;
-                    display: flex;
-                    justify-content: space-between;
-                    align-items: center;
+        .space-between {
+          width: 100%;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
 
-                    .time {
-                        font-size: 24px;
-                    }
-                }
+          .time {
+            font-size: 24px;
+          }
+        }
 
-                .normal {
-                    font-size: 26px;
-                    line-height: 42px;
-                    text-align: left;
-                    color: #666666;
-                }
+        .normal {
+          font-size: 26px;
+          line-height: 42px;
+          text-align: left;
+          color: #666666;
+        }
 
-                .bold-pro {
-                    color: #282828;
-                    font-size: 48px;
-                    font-weight: bold;
-                    padding: 24px 0;
-                }
-            }
+        .bold-pro {
+          color: #282828;
+          font-size: 48px;
+          font-weight: bold;
+          padding: 24px 0;
         }
+      }
+    }
+
+    .pie-chart-top {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      padding: 46px 30px 32px 30px;
+
+      p {
+        font-size: 24px;
+        font-family: Source Han Sans CN;
+        line-height: 42px;
+      }
+
+      .bold {
+        font-size: 36px;
+        font-weight: bold;
+        color: #282828;
+        line-height: 36px;
+      }
+    }
+
+    .count {
+      padding: 0 30px 10px 30px;
+      text-align: left;
+
+      p {
+        font-size: 24px;
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        color: #8b8b8b;
+        line-height: 36px;
+      }
+    }
 
-        .pie-chart-top {
+    .pie-chart-con {
+      flex: 1;
+      padding: 10px 0 20px 0;
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      background-color: #fff;
+
+      .pie-chart-left {
+        position: relative;
+        height: 300px;
+        padding-left: 30px;
+        width: 35%;
+        @include center();
+
+        #pieChart {
+          height: 212px;
+          width: 212px;
+        }
+      }
+
+      .pie-chart-right {
+        height: 300px;
+        width: 65%;
+        @include center();
+
+        .list {
+          display: flex;
+          justify-content: center;
+          flex-direction: column;
+          .item {
+            width: 100%;
             display: flex;
             justify-content: space-between;
-            align-items: flex-start;
-            padding: 46px 30px 32px 30px;
-
-            p {
+            align-items: center;
+            font-size: 24px;
+            padding: 18px 0;
+            .item-left {
+              display: flex;
+              justify-content: flex-start;
+              align-items: center;
+              padding-right: 20px;
+
+              .circle {
+                height: 24px;
+                width: 24px;
+                margin: 0 8px;
+              }
+
+              span {
                 font-size: 24px;
-                font-family: Source Han Sans CN;
-                line-height: 42px;
-            }
+              }
 
-            .bold {
-                font-size: 36px;
-                font-weight: bold;
-                color: #282828;
-                line-height: 36px;
+              .text {
+                color: #000;
+                font-size: 24px;
+              }
             }
-        }
 
-        .count {
-            padding: 0 30px 10px 30px;
-            text-align: left;
-
-            p {
+            .item-right {
+              @include center();
+              span {
                 font-size: 24px;
-                font-family: Source Han Sans CN;
-                font-weight: 400;
-                color: #8B8B8B;
-                line-height: 36px;
+              }
+            }
+            .status {
+              padding: 0 10px;
+              @include center();
+              img {
+                height: 30px;
+                width: 18px;
+                padding: 0 6px;
+              }
             }
+          }
         }
+      }
+    }
 
-        .pie-chart-con {
-            flex: 1;
-            padding: 10px 0 20px 0;
-            display: flex;
-            justify-content: space-between;
-            align-items: flex-start;
-            background-color: #fff;
-
-            .pie-chart-left {
-                position: relative;
-                height: 300px;
-                padding-left: 30px;
-                width: 35%;
-                @include center();
-
-                #pieChart {
-                    height: 212px;
-                    width: 212px;
-                }
-            }
+    .statistics {
+      position: relative;
+      padding: 10px 28px 10px 28px;
+      .list {
+        flex: 1;
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-size: 32px;
+
+        .item {
+          display: flex;
+          justify-content: flex-start;
+          align-items: flex-start;
+          width: 136px;
+          padding: 30px;
+          /* height: px2rem(136); */
+          flex-direction: column;
+          border: 1px solid $border_color;
+          border-radius: 30px;
+          color: #fff;
+          .top {
+            font-size: 24px;
+          }
+
+          .middle {
+            font-size: 48px;
+          }
+
+          .bottom {
+            font-size: 18px;
+          }
+        }
+      }
+    }
+    .chart-title {
+      padding: 30px;
+      font-size: 36px;
+      font-weight: bold;
+      color: #282828;
+    }
+    .bar-chart {
+      position: relative;
+      height: 600px;
+      background-color: #fff;
+      padding: 0 10px;
+      border: 1px solid #cdf348;
+      border-radius: 70px;
+      .echart {
+        height: 600px;
+        padding: 0 10px;
+      }
+    }
+    .scatter {
+      border: none;
+      height: 600px;
+      .custom-bot {
+        .list {
+          height: 40px;
+          padding: 0 20px;
+          display: flex;
+          justify-content: space-around;
+          align-items: flex-start;
+          font-size: 28px;
+        }
+      }
+    }
+    .advice {
+      padding: 52px 20px 60px 20px;
+      .content {
+        background: #f2f6ff;
+        border-radius: 20px;
+        padding: 0px 10px;
+        text-align: left;
+
+        p {
+          font-size: 24px;
+          color: #707070;
+          line-height: 46px;
+        }
+        .title {
+          font-size: 26px;
+          font-weight: bold;
+          /* color: $green; */
+          line-height: 36px;
+        }
+      }
+    }
 
-            .pie-chart-right {
-                height: 300px;
-                width: 65%;
-                @include center();
+    .overview {
+      padding: 0 30px 32px 30px;
 
-                .list {
-                    display: flex;
-                    justify-content: center;
-                    flex-direction: column;
-                    .item {
-                        width: 100%;
-                        display: flex;
-                        justify-content: space-between;
-                        align-items: center;
-                        font-size: 24px;
-                        padding: 18px 0;
-                        .item-left {
-                            display: flex;
-                            justify-content: flex-start;
-                            align-items: center;
-                            padding-right: 20px;
-
-                            .circle {
-                                height: 24px;
-                                width: 24px;
-                                margin: 0 8px;
-                            }
-
-                            span {
-                                font-size: 24px;
-                            }
-
-                            .text {
-                                color: #000;
-                                font-size: 24px;
-                            }
-                        }
-
-                        .item-right {
-                            @include center();
-                            span {
-                                font-size: 24px;
-                            }
-                        }
-                        .status {
-                            padding: 0 10px;
-                            @include center();
-                            img {
-                                height: 30px;
-                                width: 18px;
-                                padding: 0 6px ;
-                            }
-                        }
-                    }
-                }
-            }
-        }
+      .content {
+        .title {
+          text-align: left;
 
-        .statistics {
-            position: relative;
-            padding: 10px 28px 10px 28px;
-            .list {
-                flex: 1;
-                width: 100%;
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-                font-size: 32px;
-
-                .item {
-                   display: flex;
-                   justify-content: flex-start;
-                   align-items: flex-start;
-                    width: 136px;
-                    padding: 30px;
-                    /* height: px2rem(136); */
-                    flex-direction: column;
-                    border: 1px solid $border_color;
-                    border-radius: 30px;
-                    color: #fff;
-                    .top {
-                        font-size: 24px;
-                    }
-
-                    .middle {
-                        font-size: 48px;
-                    }
-
-                    .bottom {
-                        font-size: 18px
-                    }
-                }
-            }
-        }
-        .chart-title {
-            padding: 30px;
+          .title-text {
             font-size: 36px;
             font-weight: bold;
             color: #282828;
-        }
-        .bar-chart {
-            height: 500px;
-            background-color: #fff;
-            padding: 0 10px;
-            border: 1px solid #cdf348;
-            border-radius: 70px;
-            .echart {
-                height: 500px;
-                padding: 0 10px;
-            }
-        }
-        .advice {
-            padding: 52px 20px 60px 20px;
-            .content {
-                background: #F2F6FF;
-                border-radius: 20px;
-                padding: 0px 10px;
-                text-align: left;
-
-                p {
-                    font-size: 24px;
-                    color: #707070;
-                    line-height: 46px;
-                }
-                .title {
-                    font-size: 26px;
-                    font-weight: bold;
-                    /* color: $green; */
-                    line-height: 36px;
+            line-height: 36px;
+          }
+
+          .mood-list {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr); //定义了一个 2x2 的网格布
+            grid-template-rows: repeat(2, 1fr);
+            gap: 42px;
+            padding: 42px 42px 44px 40px;
+
+            .item {
+              width: 214px;
+              height: 250px;
+              display: flex;
+              justify-content: center;
+              align-items: flex-start;
+              flex-direction: column;
+              padding-left: 60px;
+              color: #fff;
+              border: 1px solid #cdf348;
+              border-radius: 40px;
+              p {
+                font-size: 28px;
+                padding: 0;
+                @include center();
+                .day {
+                  /* padding: 5px; */
+                  font-size: 56px;
                 }
-            }
-        }
 
-        .overview {
-            padding: 0 30px 32px 30px;
-
-            .content {
-                .title {
-                    text-align: left;
-
-                    .title-text {
-                        font-size: 36px;
-                        font-weight: bold;
-                        color: #282828;
-                        line-height: 36px;
-                    }
-
-                    .mood-list {
-                        display: grid;
-                        grid-template-columns: repeat(2, 1fr); //定义了一个 2x2 的网格布
-                        grid-template-rows: repeat(2, 1fr);
-                        gap: 42px;
-                        padding: 42px 42px 44px 40px;
-
-                        .item {
-                            width: 214px;
-                            height: 250px;
-                            display: flex;
-                            justify-content: center;
-                            align-items: flex-start;
-                            flex-direction: column;
-                            padding-left: 60px;
-                            color: #fff;
-                            border: 1px solid #cdf348;
-                            border-radius: 40px;
-                            p {
-                                font-size: 28px;
-                                padding: 0;
-                                @include center();
-                                .day {
-                                    /* padding: 5px; */
-                                    font-size: 56px;
-                                }
-
-                                .day-text {
-                                    font-size: 24px;
-                                    padding: 0 10px;
-                                }
-                                img {
-                                    height: 30px;
-                                    width: 18px;
-                                }
-                            }
-                        }
-                    }
+                .day-text {
+                  font-size: 24px;
+                  padding: 0 10px;
                 }
+                img {
+                  height: 30px;
+                  width: 18px;
+                }
+              }
             }
+          }
         }
-        &.no-data {
-            @include center();
-            flex-direction: column;
-            p {
-                font-size: 32px;
-            }
-        }
+      }
+    }
+    &.no-data {
+      @include center();
+      flex-direction: column;
+      p {
+        font-size: 32px;
+      }
     }
-}
\ No newline at end of file
+  }
+}