diff --git a/package.json b/package.json
index 7e496b1..6f9fb9f 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "js-base64": "^2.5.2",
     "regenerator-runtime": "^0.13.5",
     "vant": "^2.12.48",
+    "vconsole": "^3.15.1",
     "vue": "^2.7.8",
     "vue-router": "^3.5.4",
     "vuex": "^3.6.2",
diff --git a/src/api/psychological.js b/src/api/psychological.js
new file mode 100644
index 0000000..8256153
--- /dev/null
+++ b/src/api/psychological.js
@@ -0,0 +1,23 @@
+import axios from 'axios';
+import prefix from '@/store/prefix';
+import { PsyBaseUrl } from '@/config/models';
+const service = axios.create({
+  baseURL: PsyBaseUrl
+});
+service.interceptors.request.use(request => {
+  if (localStorage.getItem(prefix + 'ssjlToken')) {
+    request.headers.AccessToken = localStorage.getItem(prefix + 'ssjlToken');
+  }
+  return request;
+});
+export const APIPsy = {
+  getHomeData
+};
+export default APIPsy;
+function getHomeData(data) {
+  return service({
+    url: `/api/Data/GetHomeData`,
+    method: 'get',
+    params: data
+  });
+}
diff --git a/src/main.js b/src/main.js
index 4dceb70..43a7303 100644
--- a/src/main.js
+++ b/src/main.js
@@ -18,13 +18,31 @@ import '@/plugins/vant';
 import '@/assets/css/index.scss';
 // 移动端适配
 import 'amfe-flexible';
+import VConsole from 'vconsole';
 Vue.prototype.$dayjs = dayjs;
 Vue.prototype.$echarts = echarts;
 Vue.prototype.$store = store;
 Vue.prototype.$own = own;
 Vue.prototype.$axios = request;
 Vue.prototype.$green = '#189b3b';
-
+// 判断是否是pc设备
+const isPc = () => {
+  const userAgentInfo = navigator.userAgent;
+  const Agents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod'];
+  let flag = true;
+  for (let v = 0; v < Agents.length; v++) {
+    if (userAgentInfo.indexOf(Agents[v]) > 0) {
+      flag = false;
+      break;
+    }
+  }
+  return flag;
+};
+//如果不是生产环境并且不是pc设备那么就显示调试
+if (process.env.NODE_ENV == 'test' && !isPc()) {
+  // eslint-disable-next-line no-unused-vars
+  const vConsole = new VConsole();
+}
 // filters
 import './filters';
 Vue.config.productionTip = false;
diff --git a/src/views/insight/index.vue b/src/views/insight/index.vue
index f124b9f..bd84124 100644
--- a/src/views/insight/index.vue
+++ b/src/views/insight/index.vue
@@ -152,6 +152,7 @@
 
 <script>
 import DateSwitch from '@/components/DateSwitch.vue';
+import { format, startOfMonth, endOfMonth } from 'date-fns';
 export default {
   components: {
     DateSwitch
@@ -249,7 +250,8 @@ export default {
       },
       upImg: require('@/assets/today/icons/up.png'),
       downImg: require('@/assets/today/icons/down.png'),
-      date: ''
+      date: '',
+      monthDate: {}
     };
   },
   created() {},
@@ -259,8 +261,6 @@ export default {
   watch: {
     active(val) {
       console.log(val);
-      /* this.emotionActive = 0;
-      this.signActive = 0; */
       this.$nextTick(() => {
         this.initData();
         this.initEmotionChart();
@@ -317,7 +317,19 @@ export default {
     updateDate(value) {
       console.log('组件原始值', value);
       this.date = this.active == 0 ? value.replace('~', '-') : value;
-      console.log('接口所需要的值', this.date);
+      if (this.active == 1) {
+        this.getMonthStaEnd(this.date);
+      }
+
+      console.log('接口所需要的值', this.date, '如果是月', this.monthDate);
+    },
+    getMonthStaEnd(value) {
+      const dateObj = {};
+      const start = startOfMonth(value);
+      const end = endOfMonth(value);
+      dateObj.start = format(start, 'yyyy-MM-dd');
+      dateObj.end = format(end, 'yyyy-MM-dd');
+      this.monthDate = { ...dateObj };
     },
     initData() {
       //初始化图表
diff --git a/src/views/login/login.vue b/src/views/login/login.vue
index 27cd0c5..6323b85 100644
--- a/src/views/login/login.vue
+++ b/src/views/login/login.vue
@@ -68,13 +68,14 @@ export default {
   created() {},
   mounted() {
     // TODO 获取code再拿code获取openId
-    // this.getCode();
+    this.getCode();
   },
   methods: {
     getCode() {
       let url = window.location.href;
       if (url.indexOf('code') > -1) {
         let codeUrl = window.location.href.split('?code=');
+        console.log('获取code的url', codeUrl);
         if (codeUrl) {
           let timeStamp = new Date().getTime();
           let code = codeUrl[1].split('&')[0];
@@ -129,7 +130,7 @@ export default {
             this.countDown();
           }
           if (item.stateCode === 0 && item.code === null) {
-            //                          this.notify('请勿频繁获取，验证码5分钟内有效');
+            //this.notify('请勿频繁获取，验证码5分钟内有效');
             NotifyService.notify({ message: item.message });
           }
         })
diff --git a/src/views/today/emotionDetails.vue b/src/views/today/emotionDetails.vue
index a5a2502..42c6c81 100644
--- a/src/views/today/emotionDetails.vue
+++ b/src/views/today/emotionDetails.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="psychological-container">
-    <NavBar title="月报" @on-click-left="onNavBack" right-text="历史" @on-click-right="onHistory"> </NavBar>
+    <NavBar title="心理监测" @on-click-left="onNavBack" right-text="历史" @on-click-right="onHistory"> </NavBar>
     <div class="tab-bar">
       <div class="date-tab-con">
         <div class="date-tab-list">
@@ -19,6 +19,22 @@
     </div>
 
     <div class="main" v-show="current !== 3">
+      <div class="tab-bar">
+        <div class="date-tab-con">
+          <div class="date-tab-list">
+            <div
+              :class="['date-tab-item', { active: current === index, notClick: false }]"
+              @click="onTabClick(item.value, index)"
+              v-for="(item, index) in dateList"
+              :key="index"
+            >
+              <img :src="tabImgUrl" alt v-if="index == 3" />
+              <span>{{ item.text }}</span>
+              <img class="more" :src="selectDownImg" alt v-if="index == 3" />
+            </div>
+          </div>
+        </div>
+      </div>
       <div class="top">
         <!-- 日期选择 -->
         <!-- 标题 -->
@@ -138,20 +154,13 @@
           <div class="echart">
             <EchartBox
               echartId="charts"
-              outTitle="压力数据图"
+              :outTitle="emoLegend.outTitle"
               height="200"
               width="200"
               :legend="emoLegend"
-              :options="emoOptions"
+              :options="defaultOptions"
             ></EchartBox>
           </div>
-          <!--  <EchartBox
-            echartId="charts"
-            outTitle="压力数据图"
-            height="300"
-            :legend="emoLegend"
-            :options="emoOptions"
-          ></EchartBox> -->
         </div>
 
         <div class="line-gray"></div>
@@ -197,9 +206,14 @@
             <div class="title">
               <span class="title-text">{{ surveyTitle }}</span>
               <div class="mood-list" v-if="emotionList.length > 0">
-                <div class="item" v-for="(item, index) in emotionList" :key="index">
+                <div
+                  class="item"
+                  v-for="(item, index) in emotionList"
+                  :key="index"
+                  :style="{ backgroundColor: item.color }"
+                >
                   <p>
-                    <span :style="{ color: item.color }" class="day">{{ item.days }}</span>
+                    <span class="day">{{ item.days }}</span>
                     <span class="day-text">天</span>
                   </p>
 
@@ -282,6 +296,7 @@ import { EmotionModel, PsyBaseUrl } from '@/config/models';
 import EchartBox from '@/components/EchartBox';
 import NavBar from '@/components/NavBar';
 import axios from 'axios';
+import ToastService from '@/services/toast-service';
 export default {
   name: 'psychological-monitor',
   components: {
@@ -290,16 +305,6 @@ export default {
   },
   data() {
     return {
-      emoLegend: {
-        title: '',
-        list: [
-          { name: '无压力倾向', color: '#179b3b' },
-          { name: '轻度压力倾向', color: '#8dc21f' },
-          { name: '中度压力倾向', color: '#2ea7e0' },
-          { name: '重度压力倾向', color: '#ff5f8b' }
-        ]
-      },
-
       // 日期选择标签
       dateList: [
         { name: 'today', text: '今天', value: 0 },
@@ -429,145 +434,31 @@ export default {
     };
   },
   computed: {
-    // 默认折线图配置，echarts 具体配置 见 https://echarts.apache.org/zh/option.html#title
-    emoOptions() {
+    emoLegend() {
       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'
-                }
-              }
-            }
-          }
+        title: '',
+        outTitle: `${this.emoName}数据图`,
+        list: [
+          { name: `无${this.emoName}倾向`, color: '#179b3b' },
+          { name: `轻度${this.emoName}倾向`, color: '#8dc21f' },
+          { name: `中度${this.emoName}倾向`, color: '#2ea7e0' },
+          { name: `重度${this.emoName}倾向`, color: '#ff5f8b' }
         ]
       };
     },
+    // 默认折线图配置，echarts 具体配置 见 https://echarts.apache.org/zh/option.html#title
     defaultOptions() {
       return {
         time: {
           useUTC: false
         },
-        title: {
-          text: this.echartsTitle,
-          left: 1,
-          right: 25,
-          bottom: 20,
-          top: '3%',
-          textStyle: {
-            fontSize: 16,
-            fontWeight: 'bold'
-          }
-        },
-        legend: {
-          width: '65%',
-          orient: 'horizontal',
-          right: 'right',
-          top: 1,
-          bottom: '1%',
-          itemHeight: 12,
-          itemWidth: 12,
-          itemGap: 10,
-          align: 'left',
-          selectedMode: false,
-          data: [
-            {
-              name: `轻度${this.emoName}倾向`,
-              icon: 'rect',
-              itemStyle: {
-                color: '#8dc21f'
-              },
-              textStyle: {
-                fontSize: 12
-              }
-            },
-            {
-              name: `中度${this.emoName}倾向`,
-              itemStyle: {
-                color: '#2ea7e0'
-              },
-              icon: 'rect',
-              textStyle: {
-                fontSize: 12
-              }
-            },
-            {
-              name: `重度${this.emoName}倾向`,
-              itemStyle: {
-                color: '#ff5f8b'
-              },
-              icon: 'rect',
-              textStyle: {
-                fontSize: 12
-              }
-            },
-            {
-              name: `无${this.emoName}倾向`,
-              icon: 'rect',
-              itemStyle: {
-                color: '#179b3b'
-              },
-              textStyle: {
-                fontSize: 12
-              }
-            }
-          ],
-          formatter: function (name) {
-            // 自定义显示内容
-            if (name.length > 6) {
-              return name.substring(0, 6) + '\n' + name.substring(6);
-            } else {
-              return name;
-            }
-          }
-        },
         grid: {
           show: true,
-          borderWidth: 1,
-          top: '20%',
+          borderWidth: 0,
+          top: '3%',
           left: '1%',
-          right: '5%',
-          bottom: '10%',
+          right: '3%',
+          bottom: '15%',
           containLabel: true
         },
         xAxis: {
@@ -611,8 +502,8 @@ export default {
               fontSize: 14
             },
             show: true,
-            height: 15,
-            bottom: 5,
+            height: 20,
+            bottom: 4,
             handleStyle: {
               borderWidth: 1,
               borderCap: 'square'
@@ -639,16 +530,16 @@ export default {
           nameTextStyle: {
             fontSize: 13
           },
-          alignTicks: true,
+          alignTicks: false,
           axisTick: {
-            show: true
+            show: false
           },
           axisLabel: {
             show: true,
             fontSize: 13
           },
           splitLine: {
-            show: true,
+            show: false,
             lineStyle: {
               color: '#ddd',
               width: 1
@@ -713,7 +604,7 @@ export default {
         series: [
           {
             type: 'pie',
-            radius: ['40%', '80%'],
+            radius: ['40%', '90%'],
             avoidLabelOverlap: false,
             startAngle: 270, // 设置逆时针渲染
             itemStyle: {
@@ -816,9 +707,8 @@ export default {
     // 读取路由传过来的参数，根据路由传过来的参数判断是哪种情绪
     this.loadParams();
     this.initEchartText();
-    this.getPieData();
     this.getCalendarData();
-    this.getPsychologiclData('2023-11-21');
+    this.getPsychologiclData();
     this.createList();
     //this.getWeekResult();
   },
@@ -951,7 +841,7 @@ export default {
     },
     // 获取情绪数据
     getPsychologiclData(date, startDate, endDate) {
-      this.$toast.loading({
+      ToastService.loading({
         message: '数据加载中'
       });
       let reqDate = date
@@ -1114,7 +1004,7 @@ export default {
                 {
                   name: '平均值',
                   type: 'scatter',
-                  symbolSize: 8,
+                  symbolSize: 14,
                   data: this.emotionData
                 },
                 {
@@ -1122,15 +1012,15 @@ export default {
                   type: 'custom',
                   data: this.weekAndMonData,
                   renderItem: function (params, api) {
-                    var categoryIndex = api.value(0);
-                    var end = api.coord([categoryIndex, api.value(1)]);
-                    var start = api.coord([categoryIndex, api.value(2)]);
-                    var width = 8;
-                    var rectShape = that.$echarts.graphic.clipRectByRect(
+                    let categoryIndex = api.value(0);
+                    let end = api.coord([categoryIndex, api.value(1)]);
+                    let start = api.coord([categoryIndex, api.value(2)]);
+                    let width = 16;
+                    let rectShape = that.$echarts.graphic.clipRectByRect(
                       {
                         x: start[0] - width / 2,
                         y: start[1],
-                        width: 8,
+                        width: 16,
                         height: end[1] - start[1]
                       },
                       {
@@ -1162,25 +1052,25 @@ export default {
                 {
                   name: `轻度${this.emoName}倾向`,
                   type: 'scatter',
-                  symbolSize: 8,
+                  symbolSize: 12,
                   data: ''
                 },
                 {
                   name: `中度${this.emoName}倾向`,
                   type: 'scatter',
-                  symbolSize: 8,
+                  symbolSize: 12,
                   data: ''
                 },
                 {
                   name: `重度${this.emoName}倾向`,
                   type: 'scatter',
-                  symbolSize: 8,
+                  symbolSize: 12,
                   data: ''
                 },
                 {
                   name: `无${this.emoName}倾向`,
                   type: 'scatter',
-                  symbolSize: 8,
+                  symbolSize: 12,
                   data: ''
                 }
               ];
@@ -1215,17 +1105,14 @@ export default {
             this.result = data.Result;
             this.resultLevel = data.ResultLevel;
             this.advice = data.Advice;
-            this.$toast.success({
+            ToastService.success({
               message: '数据加载完成'
             });
           }
         })
-        .catch(() => {
-          this.$dialog({
-            message: '登录过期，请重新进入'
-          });
-        })
-        .finally(() => {});
+        .catch(error => {
+          console.log(error);
+        });
     },
     // 计算百分比
     calcPercentage(value, total) {
@@ -1306,32 +1193,32 @@ export default {
       this.current = index;
       this.currentDays = value;
       this.$store.commit('tabClick', index);
-      /* let currentDate = new Date(); */
+      let currentDate = new Date();
       this.surveyTitle = value === 7 ? '7天概览' : '30天概览';
       if (value === 7) {
-        /* let dateList = this.getPostDate(currentDate, 6, true); */
-        this.getPsychologiclData('', /* dateList[0] */ '2023-11-15', /* dateList[1] */ '2023-11-21');
-        this.startDate = /* dateList[0] */ '2023-11-15';
-        this.endDate = /* dateList[1] */ '2023-11-21';
+        let dateList = this.getPostDate(currentDate, 6, true);
+        this.getPsychologiclData('', dateList[0] /* '2023-11-15' */ /* dateList[1] */ /* '2023-11-21' */);
+        this.startDate = dateList[0] /* '2023-11-15' */;
+        this.endDate = dateList[1] /* '2023-11-21' */;
       } else if (value === 0) {
         // 今天
         this.defaultOptions.xAxis.data = this.xAxisData;
         this.defaultOptions.series = this.defaultSeries;
         this.defaultOptions.series[0].data = this.emotionData;
         this.getPsychologiclData(
-          this.selectDate ? this.selectDate : /* this.$dayjs(currentDate).format('YYYY-MM-DD') */ '2023-11-21'
+          this.selectDate ? this.selectDate : this.$dayjs(currentDate).format('YYYY-MM-DD') /* '2023-11-21' */
         );
-        this.startDate = /* this.$dayjs(currentDate).format('YYYY-MM-DD') */ '2023-11-21';
-        this.endDate = /* this.$dayjs(currentDate).format('YYYY-MM-DD') */ '2023-11-21';
+        this.startDate = this.$dayjs(currentDate).format('YYYY-MM-DD') /* '2023-11-21' */;
+        this.endDate = this.$dayjs(currentDate).format('YYYY-MM-DD') /* '2023-11-21' */;
       } else if (value === 30) {
         // 30天
         this.defaultOptions.xAxis.data = this.xAxisData;
         this.defaultOptions.series = this.defaultSeries;
         this.defaultOptions.series[0].data = this.emotionData;
-        /*  let dateList = this.getPostDate(currentDate, 30, true); */
-        this.getPsychologiclData('', /* dateList[0] */ '2023-11-21', /* dateList[1] */ '2023-12-21');
-        this.startDate = /* dateList[0] */ '2023-11-21';
-        this.endDate = /* dateList[1] */ '2023-12-21';
+        let dateList = this.getPostDate(currentDate, 30, true);
+        this.getPsychologiclData('', dateList[0] /* '2023-11-21' */, dateList[1] /* '2023-12-21' */);
+        this.startDate = dateList[0] /* '2023-11-21' */;
+        this.endDate = dateList[1] /* '2023-12-21' */;
       } else {
         // 周报菜单
         this.getWeekResult();
@@ -1473,7 +1360,7 @@ export default {
       this.isPopup = false;
     },
     getWeekResult() {
-      this.$toast.loading('数据加载中');
+      ToastService.loading('数据加载中');
       let baseUrl =
         process.env.NODE_ENV === 'production' ? 'https://dbmq.rzliot.com/auth_heart' : 'https://dbmq.rzliot.com/heart';
       let reqUrl = `${baseUrl}/api/Data/GetWeekResult`;
@@ -1500,7 +1387,7 @@ export default {
               };
             })
             .reverse();
-          this.$toast.success('数据加载完成');
+          ToastService.success('数据加载完成');
         });
     },
     onClickItem(recordId) {
diff --git a/src/views/today/index.vue b/src/views/today/index.vue
index f47a5b7..20e6c44 100644
--- a/src/views/today/index.vue
+++ b/src/views/today/index.vue
@@ -35,12 +35,12 @@
       <div class="title" @click="onRouterTo('emotionDetails')">
         <p>今日情绪感知</p>
         <div>
-          <p>4.28</p>
+          <p>{{ now }}</p>
           <van-icon name="arrow" size="18" />
         </div>
       </div>
       <ul>
-        <li>
+        <!-- <li>
           <h4>40</h4>
           <p>疲劳倾向</p>
           <span>无疲劳倾向</span>
@@ -57,6 +57,12 @@
           <p>焦虑倾向</p>
           <span>无焦虑倾向</span>
           <time>12:30</time>
+        </li> -->
+        <li v-for="(item, index) in psyDataList" :key="index">
+          <h4>{{ item.value || '--' }}</h4>
+          <p>{{ item.name || '--' }}</p>
+          <span>{{ item.result || '--' }}</span>
+          <time>{{ item.time || '--' }}</time>
         </li>
       </ul>
     </div>
@@ -65,7 +71,7 @@
       <div class="title" @click="onRouterTo('signsDetails')">
         <p>今体征感知</p>
         <div>
-          <p>4.28</p>
+          <p>{{ now }}</p>
           <van-icon name="arrow" size="18" />
         </div>
       </div>
@@ -200,6 +206,7 @@
 import TabBar from '@/components/TabBar';
 import { Calendar, Circle, Checkbox, CheckboxGroup } from 'vant';
 import APICore from '@/api/core';
+import APIPsy from '@/api/psychological';
 export default {
   components: {
     TabBar,
@@ -216,14 +223,66 @@ export default {
       maxDate: new Date(2023, 12, 18),
       currentRate1: 0,
       currentRate2: 0,
-      result: []
+      result: [],
+      uid: '2023101521270090082',
+      psyDataList: []
     };
   },
+  computed: {
+    now() {
+      return this.$dayjs(new Date()).format('MM.DD');
+    }
+  },
   created() {
     this.getAuth();
   },
-  mounted() {},
+  mounted() {
+    this.getHomeData();
+  },
   methods: {
+    // 获取首页情绪数据
+    getHomeData() {
+      let reqParams = {
+        uid: this.uid,
+        date: this.$dayjs(new Date()).format('YYYY-MM-DD') /* '2023-11-21' */
+      };
+      APIPsy.getHomeData(reqParams).then(res => {
+        const data = res.data.response;
+        if (!data) {
+          return this.$toast.fail(res.data.msg);
+        }
+        this.psyDataList = [
+          // 2023.12.5 修改菜单顺序
+          // 疲劳指数
+          {
+            value: data.TirScore,
+            name: '疲劳指数',
+            class: 'tiredness',
+            result: data.TirDesc,
+            time: data.TirMeasureUpdateTime ? this.$dayjs(data.TirMeasureUpdateTime).format('HH:mm') : '',
+            level: data.TirLevel
+          },
+          // 压力指数
+          {
+            value: data.StressScore,
+            name: '压力指数',
+            class: 'stress',
+            result: data.StressDesc,
+            time: data.StressMeasureUpdateTime ? this.$dayjs(data.StressMeasureUpdateTime).format('HH:mm') : '',
+            level: data.StressLevel
+          },
+          // 抑郁
+          {
+            value: data.DepScore,
+            name: '抑郁指数',
+            class: 'depression',
+            result: data.DepDesc,
+            time: data.DepMeasureUpdateTime ? this.$dayjs(data.DepMeasureUpdateTime).format('HH:mm') : '',
+            level: data.DepLevel
+          }
+        ];
+      });
+    },
     formatDate(date) {
       return `${date.getMonth() + 1}/${date.getDate()}`;
     },
diff --git a/src/views/today/scss/emotion-details.scss b/src/views/today/scss/emotion-details.scss
index 47162f7..e5a62f1 100644
--- a/src/views/today/scss/emotion-details.scss
+++ b/src/views/today/scss/emotion-details.scss
@@ -1,539 +1,520 @@
-.psychological-container{
-    min-height: 100vh;
-    width: 100%;
-    overflow: hidden;
-    background-color: #fff;
-    .tab-bar{
-        padding: 20px;
-        position: relative;
-        .date-tab-con {
+.psychological-container {
+  min-height: 100vh;
+  overflow: hidden;
+  background-color: #fff;
+  .tab-bar {
+    padding: 20px;
+    position: relative;
+    .date-tab-con {
+      height: 50px;
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      background: #eeeeee;
+      border-top-left-radius: 40px;
+      border-top-right-radius: 40px;
+      border-bottom-left-radius: 40px;
+      border-bottom-right-radius: 40px;
+      .date-tab-list {
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        flex: 1;
+        height: 50px;
+        .date-tab-item {
+          position: relative;
+          padding: 0 20px;
+          height: 100%;
+          width: 100%;
+          border-radius: 40px;
+          color: #6d6d6d;
+          font-size: 28px;
+          font-weight: bold;
+          @include center();
+
+          img {
             height: 50px;
-            display: flex;
-            justify-content: flex-start;
-            align-items: center;
-            background: #EEEEEE;
-            border-top-left-radius: 40px;
-            border-top-right-radius: 40px;
-            border-bottom-left-radius: 40px;
-            border-bottom-right-radius: 40px;
-            .date-tab-list {
+            width: 50px;
+            padding: 0 16px;
+          }
+          .more {
+            width: 20px;
+            height: 12px;
+          }
+          &.active {
+            color: #fff;
+            background-color: $green;
+          }
+          &.notClick {
+            background-color: $border_color;
+            color: #fff;
+            border: 1px solid #fff;
+          }
+        }
+        .date-tab-item:nth-child(3) {
+          border-right: 1px solid #e0e0e0;
+        }
+      }
+    }
+  }
+  .psy-tab-bar {
+    height: 50px;
+    position: relative;
+    margin: 20px 0 0 0;
+    padding: 0 20px;
+    .psy-tab-con {
+      background-color: #eeeeee;
+      border-top-left-radius: 40px;
+      border-top-right-radius: 40px;
+      border-bottom-left-radius: 40px;
+      border-bottom-right-radius: 40px;
+      .psy-tab-list {
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        height: 50px;
+        width: 100%;
+        /* background-color: red; */
+        .psy-tab-item {
+          position: relative;
+          padding: 0 20px;
+          color: #6d6d6d;
+          height: 100%;
+          width: 100%;
+          font-size: 28px;
+          border-radius: 40px;
+          font-weight: bold;
+          @include center();
+          &.active {
+            color: #fff;
+            background-color: $green;
+          }
+        }
+      }
+    }
+  }
+  .main {
+    position: relative;
+    height: calc(100vh - 100px);
+    overflow: scroll;
+    .top {
+      flex: 1;
+      .title {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0px 32px 20px 26px;
+        font-size: 36px;
+        .title-left {
+          font-weight: bold;
+          .van-icon {
+            margin-left: 5px;
+            font-size: 18px;
+          }
+        }
+      }
+      .monitoring-count {
+        text-align: left;
+        padding: 6px 28px;
+        line-height: 40px;
+        p {
+          font-size: 24px;
+          color: #8b8b8b;
+        }
+      }
+      .pie-chart-con {
+        flex: 1;
+        padding: 10px 0 20px 0;
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+        .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%;
+          padding-right: 40px;
+          @include center();
+          .list {
+            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: space-around;
+                justify-content: flex-start;
                 align-items: center;
-                color: #fff;
-                flex: 1;
-                height: 50px;
-                .date-tab-item {
-                    position: relative;
-                    padding: 0 20px;
-                    height: 100%;
-                    width: 100%;
-                    border-radius: 40px;
-                    color: #6D6D6D;
-                    font-size: 28px;
-                    font-weight: bold;
-                    @include center();
-                    
-                    img {
-                        height: 50px;
-                        width: 50px;
-                        padding: 0 16px;
-                    }
-                    .more {
-                        width: 20px;
-                        height: 12px;
-                    }
-                    /* &.active::after {
-                        content: '';
-                        width: 88px;
-                        position: absolute;
-                        right: 25%;
-                        bottom:  -20px;
-                        box-sizing: border-box;
-                        border-bottom: 8px solid $green;
-                    } */
-                    &.active {
-                        color: #333;
-                        background-color:  $green;
-                    }
-                    &.notClick {
-                        background-color: $border_color;
-                        color: #fff;
-                        border: 1px solid #fff;
-                    }
+                padding-right: 20px;
+                .circle {
+                  height: 24px;
+                  width: 24px;
+                  margin: 0 8px;
                 }
-                .date-tab-item:nth-child(3) {
-                    border-right: 1px solid #E0E0E0;
+                span {
+                  font-size: 24px;
                 }
-                /* .date-tab-item:first-child {
-                    border-top-left-radius: 15px;
-                    border-bottom-left-radius: 15px;
+                .text {
+                  color: #000;
+                  font-size: 24px;
                 }
-                .date-tab-item:last-child {
-                    border-top-right-radius: 15px;
-                    border-bottom-right-radius: 15px;
-                } */
+              }
+              .item-right {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+              }
             }
+          }
         }
+      }
+      .statistics {
+        height: 100%;
+        padding: 10px 40px;
+        .list {
+          display: grid;
+          grid-template-columns: repeat(3, 1fr); //定义了一个 3x3 的网格布
+          /* grid-template-rows: repeat(3, 1fr); */
+          gap: 40px;
+          font-size: 32px;
+          .item {
+            display: flex;
+            justify-content: flex-start;
+            align-items: flex-start;
+            padding: 30px;
+            /* height: px2rem(136); */
+            flex-direction: column;
+            border: 1px solid $border_color;
+            border-radius: 40px;
+            color: #fff;
+            .top {
+              font-size: 24px;
+            }
+
+            .middle {
+              font-size: 48px;
+            }
+
+            .bottom {
+              font-size: 18px;
+            }
+          }
+        }
+      }
     }
-    .psy-tab-bar {
-        height: 50px;
+    .line {
+      position: relative;
+      height: 22px;
+      background-color: $lineGray;
+    }
+    .bottom {
+      flex: 1;
+      overflow: scroll;
+      .echart-container {
         position: relative;
-        margin: 20px 0 0 0;
-        padding: 0 20px;
-        .psy-tab-con {
-            background-color: #EEEEEE;
-            border-top-left-radius: 40px;
-            border-top-right-radius: 40px;
-            border-bottom-left-radius: 40px;
-            border-bottom-right-radius: 40px;
-            .psy-tab-list {
-                display: flex;
-                justify-content: space-around;
-                align-items: center;
+        min-height: 600px;
+        background-color: #fff;
+        padding: 0 10px;
+        .echart {
+          height: 200px;
+          padding: 0 10px;
+        }
+      }
+      .line-gray {
+        height: 22px;
+        width: 100%;
+        background-color: $lineGray;
+        margin-top: 20px;
+      }
+      .result {
+        .result-con {
+          height: 100%;
+          background-color: #fff;
+          border-radius: 40px;
+          overflow: hidden;
+          &.reminder {
+            padding: 0 32px 40px 32px;
+          }
+          .title {
+            display: flex;
+            justify-content: flex-start;
+            align-items: flex-start;
+            flex-direction: column;
+            margin-bottom: 20px;
+            span {
+              font-size: 36px;
+              font-weight: bold;
+            }
+            .font-28 {
+              font-weight: 400;
+              font-size: 26px;
+              color: #8b8b8b;
+              text-align: left;
+            }
+            .title-no-data {
+              padding: 68px 0 26px 30px;
+            }
+            p {
+              font-size: 24px;
+              color: $green;
+            }
+            .title-emo {
+              font-size: 48px;
+              padding: 28px 0 42px 0;
+              text-align: left;
+            }
+            .no-data {
+              height: 500px;
+              width: 100%;
+              @include center();
+              flex-direction: column;
+              img {
+                height: 220px;
+                width: 350px;
+              }
+              p {
+                color: #999;
+                font-size: 24px;
+                padding: 40px 0 130px 0;
+              }
+            }
+          }
+          .title-text {
+            padding: 68px 0 26px 30px;
+          }
+          .title-reminder {
+            padding: 68px 0 0 0;
+          }
+          .friendly-reminder,
+          .warm-reminder {
+            display: flex;
+            justify-content: flex-start;
+            align-items: flex-start;
+            flex-direction: column;
+            margin-bottom: 20px;
+            background-color: #f2f2f2;
+            padding: 40px 38px 38px 28px;
+            p {
+              font-weight: bold;
+              text-align: left;
+              padding-bottom: 22px;
+              font-size: 30px;
+            }
+            span {
+              text-align: left;
+              font-size: 24px;
+            }
+          }
+          .mood-list {
+            display: grid;
+            grid-template-columns: repeat(2, auto); //定义了一个 2x2 的网格布
+            grid-template-rows: repeat(2, 1fr);
+            gap: 42px;
+            padding: 0 88px 40px 74px;
+            .item {
+              width: 274px;
+              height: 220px;
+              @include center();
+              flex-direction: column;
+              border-radius: 40px;
+              p {
+                font-size: 24px;
+                padding: 0;
                 color: #fff;
-                height: 50px;
-                width: 100%;
-                /* background-color: red; */
-                .psy-tab-item {
-                    position: relative;
-                    padding: 0 20px;
-                    color: #6D6D6D;
-                    height: 100%;
-                    width: 100%;
-                    font-size: 28px;
-                    border-radius: 40px;
-                    font-weight: bold;
-                    @include center();
-                    &.active {
-                        color: #fff;
-                        background-color: $green;
-                    }
+                .day {
+                  padding: 10px;
+                  font-size: 56px;
+                }
+                .day-text {
+                  font-size: 24px;
                 }
+              }
             }
+          }
+          .mood-list-no-data {
+            height: 500px;
+            width: 100%;
+            .no-data {
+              @include center();
+              flex-direction: column;
+              img {
+                height: 220px;
+                width: 350px;
+              }
+              p {
+                color: #999;
+                font-size: 24px;
+                padding: 40px 0 130px 0;
+              }
+            }
+          }
         }
+      }
     }
-    .main {
+    &.report {
+      position: relative;
+      height: calc(100vh - 300px);
+      overflow: scroll;
+      background-color: #f5f5f5;
+      .content {
         position: relative;
-        height: calc(100vh - 200px);
-        overflow: scroll;
-        .top {
-            flex: 1;
-            .title {
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-                padding: 0px 32px 20px 26px;
-                font-size: 36px;
-                .title-left {
-                    font-weight: bold;
-                    .van-icon {
-                        margin-left: 5px;
-                        font-size: 18px;
-                    }
-                }
-            }
-            .monitoring-count {
-                text-align: left;
-                padding: 6px 28px;
-                line-height: 40px;
-                p {
-                    font-size: 24px;
-                    color: #8B8B8B;
-                }
-            }
-            .pie-chart-con {
-                flex: 1;
-                padding: 10px 0 20px 0;
-                display: flex;
-                justify-content: space-between;
-                align-items: flex-start;
-                .pie-chart-left {
-                    position: relative;
-                    height: 300px;
-                    padding-left: 30px;
-                    width: 35%;
-                    @include center();
-                    #pieChart {
-                        height: 212px;
-                        width: 212px;
-                    }
+        .list {
+          position: relative;
+
+          .item {
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-end;
+            padding: 68px 30px;
+            background-color: #fff;
+            margin-bottom: 22px;
+            .left {
+              display: flex;
+              justify-content: flex-start;
+              align-items: flex-start;
+              img {
+                height: 50px;
+                width: 50px;
+              }
+              .middle {
+                .title,
+                .overall,
+                .trend {
+                  display: flex;
+                  justify-content: flex-start;
+                  align-items: center;
+                  /* padding-left: 26px; */
+                  span,
+                  p {
+                    font-size: 36px;
+                    font-family: Source Han Sans CN;
+                    font-weight: 400;
+                    color: #8d8d8d;
+                    line-height: 60px;
+                  }
                 }
-                .pie-chart-right {
-                    height: 300px;
-                    width: 65%;
+                .title {
+                  span {
                     padding-right: 40px;
-                    @include center();
-                    .list {
-                        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 {
-                                display: flex;
-                                justify-content: center;
-                                align-items: center;
-                            }
-                        }
-                    }
+                  }
+                  p {
+                    color: #282828;
+                  }
                 }
-            }
-            .statistics {
-                height: 100%;
-                padding: 10px 40px;
-                .list {
-                  display: grid;
-                  grid-template-columns: repeat(3, 1fr); //定义了一个 3x3 的网格布
-                  /* grid-template-rows: repeat(3, 1fr); */
-                  gap: 40px;
-                  font-size: 32px;
-                  .item {
-                    display: flex;
-                    justify-content: flex-start;
-                    align-items: flex-start;
-                    padding: 30px;
-                    /* height: px2rem(136); */
-                    flex-direction: column;
-                    border: 1px solid $border_color;
-                    border-radius: 30px;
-                    color: #fff;
-                    .top {
-                      font-size: 24px;
+                .overall {
+                  display: flex;
+                  justify-content: space-between;
+                  align-items: center;
+                  .left {
+                    p {
+                      padding-left: 40px;
+                      font-weight: bold;
                     }
-            
-                    .middle {
-                      font-size: 48px;
-                    }
-            
-                    .bottom {
-                      font-size: 18px;
+                  }
+                  .right {
+                    img {
+                      height: 30px;
+                      width: 18px;
                     }
                   }
                 }
-              }
-        }
-        .line {
-            position: relative;
-            height: 22px;
-            background-color: $lineGray;
-        }
-        .bottom {
-           flex: 1;
-           overflow: scroll;
-            .echart-container {
-                position: relative;
-                min-height: 600px;
-                background-color:#fff;
-                padding: 0 10px;
-                .echart {
-                    height: 200px;
-                    padding: 0 10px;
+                .trend {
+                  align-items: flex-start;
+                  text-align: left;
                 }
+              }
             }
-            .line-gray {
-                height: 22px;
-                width: 100%;
-                background-color: $lineGray;
-                margin-top: 20px;
+            .right {
+              img {
+                width: 18px;
+                height: 30px;
+              }
             }
-            .result {
-                .result-con {
-                    height: 100%;
-                    background-color: #fff;
-                    border-radius: 20px;
-                    &.reminder {
-                        padding: 0 32px 40px 32px;
-                    }
-                    .title {
-                        display: flex;
-                        justify-content: flex-start;
-                        align-items: flex-start;
-                        flex-direction: column;
-                        margin-bottom: 20px;
-                        span {
-                            font-size: 36px;
-                            font-weight: bold;
-                        }
-                        .font-28 {
-                            font-weight: 400;
-                            font-size: 26px;
-                            color: #8B8B8B;
-                            text-align: left;
-                        }
-                        .title-no-data {
-                            padding: 68px 0 26px 30px;
-                        }
-                        p {
-                            font-size: 24px;
-                            color: $green;
-                        }
-                        .title-emo {
-                            font-size: 48px;
-                            padding: 28px 0 42px 0;
-                            text-align: left;
-                        }
-                        .no-data {
-                            height: 500px;
-                            width: 100%;
-                            @include center();
-                            flex-direction: column;
-                            img {
-                                height: 220px;
-                                width: 350px;
-                            }
-                            p {
-                                color: #999;
-                                font-size: 24px;
-                                padding: 40px 0 130px 0;
-                            }
-                        }
-                    }
-                    .title-text {
-                        padding: 68px 0 26px 30px;
-                    }
-                    .title-reminder {
-                        padding: 68px 0 0 0;
-                    }
-                    .friendly-reminder, .warm-reminder {
-                        display: flex;
-                        justify-content: flex-start;
-                        align-items: flex-start;
-                        flex-direction: column;
-                        margin-bottom: 20px;
-                        background-color: #F2F2F2;
-                        padding: 40px 38px 38px 28px;
-                        p {
-                            font-weight: bold;
-                            text-align: left;
-                            padding-bottom: 22px;
-                            font-size: 30px;
-                        }
-                        span {
-                            text-align: left;
-                            font-size: 24px;
-                        }
-                    }
-                    .mood-list {
-                        display: grid;
-                        grid-template-columns: repeat(2, 1fr); //定义了一个 2x2 的网格布
-                        grid-template-rows: repeat(2, 1fr);
-                        gap: 42px;
-                        //width: 100%;
-                        padding: 0 88px 40px 74px;
-                        .item {
-                            width: 274px;
-                            height: 188px;
-                            /* padding: px2rem(47) px2rem(57) px2rem(49) px2rem(57); */
-                            background-color: #F2F6FF;
-                            @include center();
-                            flex-direction: column;
-                            p {
-                                font-size: 24px;
-                                padding: 0;
-                                color: #666666;
-                                .day {
-                                    padding: 10px;
-                                    font-size: 56px;
-                                }
-                                .day-text {
-                                    font-size: 24px
-                                }
-                            }
-                        }
-                    }
-                    .mood-list-no-data {
-                        height: 500px;
-                        width: 100%;
-                        .no-data {
-                            @include center();
-                            flex-direction: column;
-                            img {
-                                height: 220px;
-                                width: 350px;
-                            }
-                            p {
-                                color: #999;
-                                font-size: 24px;
-                                padding: 40px 0 130px 0;
-                            }
-                        }
-                    }
-                }
+          }
+          &.no-data {
+            height: calc(100vh - 200px);
+            width: 100%;
+            @include center();
+            flex-direction: column;
+            img {
+              height: 220px;
+              width: 350px;
             }
-        }
-        &.report {
-            position: relative;
-            height: calc(100vh - 300px);
-            overflow: scroll;
-            background-color: #f5f5f5;
-            .content {
-                position: relative;
-                .list {
-                    position: relative;
-
-                    .item {
-                        display: flex;
-                        justify-content: space-between;
-                        align-items: flex-end;
-                        padding: 68px 30px;
-                        background-color: #fff;
-                        margin-bottom: 22px;
-                        .left {
-                            display: flex;
-                            justify-content: flex-start;
-                            align-items: flex-start;
-                            img {
-                                height: 50px;
-                                width: 50px;
-                            }
-                            .middle {
-                                .title,
-                                .overall,
-                                .trend {
-                                    display: flex;
-                                    justify-content: flex-start;
-                                    align-items: center;
-                                    padding-left: 26px;
-                                    span,
-                                    p {
-                                        font-size: 36px;
-                                        font-family: Source Han Sans CN;
-                                        font-weight: 400;
-                                        color: #8d8d8d;
-                                        line-height: 60px;
-                                    }
-                                }
-                                .title {
-                                    span {
-                                        padding-right: 40px;
-                                    }
-                                    p {
-                                        color: #282828;
-                                    }
-                                }
-                                .overall {
-                                    display: flex;
-                                    justify-content: space-between;
-                                    align-items: center;
-                                    width: 100%;
-                                    .left {
-                                        p {
-                                            padding-left: 40px;
-                                            font-weight: bold;
-                                        }
-                                    }
-                                    .right {
-                                        img {
-                                            height: 30px;
-                                            width: 18px;
-                                        }
-                                    }
-                                }
-                                .trend {
-                                    align-items: flex-start;
-                                    text-align: left;
-                                }
-                            }
-                        }
-                        .right {
-                            img {
-                                width: 18px;
-                                height: 30px;
-                            }
-                        }
-                    }
-                    &.no-data {
-                        height: calc(100vh - 200px);
-                        width: 100%;
-                        @include center();
-                        flex-direction: column;
-                        img {
-                            height: 220px;
-                            width: 350px;
-                        }
-                        p {
-                            color: #999;
-                            font-size: 32px;
-                            padding: 40px 0 130px 0;
-                        }
-                    }
-                }
+            p {
+              color: #999;
+              font-size: 32px;
+              padding: 40px 0 130px 0;
             }
+          }
         }
+      }
     }
+  }
 
-    .title {
-        font-size: 32px;
-    }
-    .van-popup {
-        flex: 1;
-        max-height: 600px;
-        width: 100%;
-        background-color: $background;
-    }
-    .popup {
-       /*  height: 100%;
+  .title {
+    font-size: 32px;
+  }
+  .van-popup {
+    flex: 1;
+    max-height: 600px;
+    width: 100%;
+    background-color: $background;
+  }
+  .popup {
+    /*  height: 100%;
         width: 100%; */
-        background-color: $background;
-        padding: 40px;
-        .item {
-            flex: 1;
-            padding: 20px;
-            margin: 30px 0;
-            text-align: left;
-            font-size: 28px;
-            background-color: #fff;
-            border-radius: 20px;
-            p {
-                margin: 10px 0;
-            }
-            h5 {
-               margin: 10px 0;
-               font-size: 32px;
-            }
-            &.first {
-                padding-top: 0;
-            }
-            &.science-tips {
-                .tips {
-                    width: 120px;
-                    height: 40px;
-                    color: #fff;
-                    @include center();
-                    background-color: red;
-                    border-top-left-radius: 40px;
-                    border-top-right-radius: 30px;
-                    border-bottom-right-radius: 30px;
-                }
-            }
-        }
-        .van-button {
-            height: 40px;
-            background-color: $green;
-            color: #fff;
-            border-radius: 20px;
+    background-color: $background;
+    padding: 40px;
+    .item {
+      flex: 1;
+      padding: 20px;
+      margin: 30px 0;
+      text-align: left;
+      font-size: 28px;
+      background-color: #fff;
+      border-radius: 20px;
+      p {
+        margin: 10px 0;
+      }
+      h5 {
+        margin: 10px 0;
+        font-size: 32px;
+      }
+      &.first {
+        padding-top: 0;
+      }
+      &.science-tips {
+        .tips {
+          width: 120px;
+          height: 40px;
+          color: #fff;
+          @include center();
+          background-color: red;
+          border-top-left-radius: 40px;
+          border-top-right-radius: 30px;
+          border-bottom-right-radius: 30px;
         }
+      }
+    }
+    .van-button {
+      height: 40px;
+      background-color: $green;
+      color: #fff;
+      border-radius: 20px;
     }
-}
\ No newline at end of file
+  }
+}
diff --git a/src/views/today/scss/signs-details.scss b/src/views/today/scss/signs-details.scss
index 5936ba7..babb821 100644
--- a/src/views/today/scss/signs-details.scss
+++ b/src/views/today/scss/signs-details.scss
@@ -1,224 +1,225 @@
 .signs {
-    min-height: 100vh;
-    width: 100%;
-    overflow: hidden;
-    background-color: #fff;
-    .main {
+  min-height: 100vh;
+  width: 100%;
+  overflow: hidden;
+  background-color: #fff;
+  .main {
+    position: relative;
+    height: calc(100vh - 100px);
+    overflow: scroll;
+    padding-top: 100px;
+    .date {
+      padding: 20px 40px;
+      color: #8b8b8b;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      /* justify-content: space-around; */
+      .left {
+        font-size: 28px;
+      }
+      .right {
+        font-size: 32px;
+      }
+    }
+    .circle {
+      position: relative;
+      padding: 80px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .van-circle {
+        height: 200px !important;
+        width: 200px !important;
         position: relative;
-        height: calc(100vh - 100px);
-        overflow: scroll;
-        .date {
-            padding: 20px 40px;
-            color: #8B8B8B;
+        .circle-text {
+          height: 100%;
+          padding: 0 20px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          .left {
+            @include center();
+            font-size: 62px;
+            color: #333;
+          }
+          .right {
             display: flex;
-            justify-content: space-between;
-            align-items: center;
-            /* justify-content: space-around; */
-            .left{
-                font-size: 28px;
+            justify-content: flex-start;
+            align-self: center;
+            flex-direction: column;
+            img {
+              height: 50px;
+              width: 50px;
+              margin: 0 10px;
+              object-fit: contain;
             }
-            .right {
-                font-size: 32px;
+            span {
+              font-size: 18px;
             }
+          }
+          /*  flex-direction: column; */
         }
-        .circle {
-            position: relative;
-            padding: 80px;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            .van-circle  {
-                height: 200px !important;
-                width: 200px !important;
-                position: relative;
-                .circle-text {
-                   height: 100%;
-                   padding: 0 20px;
-                    display: flex;
-                    justify-content: center;
-                    align-items: center;
-                    .left {
-                        @include center();
-                        font-size: 62px;
-                        color: #333;
-                    }
-                    .right {
-                        display: flex;
-                        justify-content: flex-start;
-                        align-self: center;
-                        flex-direction: column;
-                        img {
-                            height: 50px;
-                            width: 50px;
-                            margin: 0 10px;
-                            object-fit: contain;
-                        }
-                        span {
-                            font-size: 18px;
-                        }
-                    }
-                   /*  flex-direction: column; */
-                }
-            }
-            .circle-white {
-                position:absolute;
-                bottom: 78px;
-                right: 45%;
-                height: 50px;
-                width: 50px;
-                border: 2px solid;
-                border-radius: 50%;
-                background: #fff;
-            }
+      }
+      .circle-white {
+        position: absolute;
+        bottom: 78px;
+        right: 45%;
+        height: 50px;
+        width: 50px;
+        border: 2px solid;
+        border-radius: 50%;
+        background: #fff;
+      }
+    }
+    .progress {
+      position: relative;
+      flex: 1;
+      font-size: 30px;
+      padding: 0 40px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .progress-circle {
+        position: absolute;
+        top: -12px;
+        left: 0;
+        height: 35px;
+        width: 35px;
+        background-color: #fff;
+        border-radius: 50%;
+        border: 12px solid;
+        z-index: 99;
+      }
+      .state-item {
+        width: 100%;
+        .state-line {
+          position: relative;
+          height: 30px;
+          font-size: 32px;
+          &.low {
+            border-top-left-radius: 20px;
+            border-bottom-left-radius: 20px;
+          }
+          &.blue {
+            background-color: $green;
+          }
+          &.hight {
+            background-color: $com_red;
+            border-top-right-radius: 20px;
+            border-bottom-right-radius: 20px;
+          }
         }
-        .progress {
-            position: relative;
-            flex: 1;
-            font-size: 30px;
-            padding: 0 40px;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            .progress-circle {
-                position: absolute;
-                top: -12px;
-                left: 0;
-                height: 35px;
-                width: 35px;
-                background-color: #fff;
-                border-radius: 50%;
-                border: 12px solid;
-                z-index: 99;
-            }
-            .state-item {
-                width: 100%;
-                .state-line {
-                    position: relative;
-                    height: 30px;
-                    font-size: 32px;
-                    &.low {
-                        border-top-left-radius: 20px;
-                        border-bottom-left-radius: 20px;
-                    }
-                    &.blue {
-                        background-color: $green;
-                    }
-                    &.hight {
-                        background-color: $com_red;
-                        border-top-right-radius: 20px;
-                        border-bottom-right-radius: 20px;
-                    }
-                }
-                .state-text {
-                    padding: 40px 0 40px 0;
-                    @include center();
-                    color: #333;
-                    font-weight: bold;
-                }
-            }
+        .state-text {
+          padding: 40px 0 40px 0;
+          @include center();
+          color: #333;
+          font-weight: bold;
         }
-        .statistics {
-            position: relative;
-            padding: 0px 28px 10px 28px;
-            .list {
-                flex: 1;
-                width: 100%;
-                display: flex;
-                justify-content: space-around;
-                align-items: center;
-                font-size: 32px;
-                .item {
-                    display: flex;
-                    justify-content: flex-start;
-                    align-items: flex-start;
-                    width: 126px;
-                    padding: 30px 60px 30px 20px;
-                    /* height: px2rem(136); */
-                    flex-direction: column;
-                    border: 1px solid $border_color;
-                    border-radius: 30px;
-                    color: #fff;
-                    .top {
-                        font-size: 24px;
-                    }
-                    .middle {
-                        font-size: 48px;
-                        /* padding: 10px; */
-                    }
-                    .bottom {
-                        font-size: 24px
-                    }
-                    .line {
-                        height: 3px;
-                        width: 100%;
-                        margin: 5px 0;
-                        background-color: #fff;
-                        @include center();
-                    }
-                }
-            }
+      }
+    }
+    .statistics {
+      position: relative;
+      padding: 0px 28px 10px 28px;
+      .list {
+        flex: 1;
+        width: 100%;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        font-size: 32px;
+        .item {
+          display: flex;
+          justify-content: flex-start;
+          align-items: flex-start;
+          width: 126px;
+          padding: 30px 60px 30px 20px;
+          /* height: px2rem(136); */
+          flex-direction: column;
+          border: 1px solid $border_color;
+          border-radius: 30px;
+          color: #fff;
+          .top {
+            font-size: 24px;
+          }
+          .middle {
+            font-size: 48px;
+            /* padding: 10px; */
+          }
+          .bottom {
+            font-size: 24px;
+          }
+          .line {
+            height: 3px;
+            width: 100%;
+            margin: 5px 0;
+            background-color: #fff;
+            @include center();
+          }
         }
-        .warn-tips {
-            padding: 40px 40px;
-            display: flex;
-            justify-content: flex-start;
-            align-items: center;
-            .left {
-                img {
-                    height: 60px;
-                    width: 60px;
-                    object-fit: contain;
-                    margin-right: 30px;
-                }
-            }
-            .right {
-                font-size: 28px;
-                .orange {
-                    color: #edb21d;
-                }
-            }
+      }
+    }
+    .warn-tips {
+      padding: 40px 40px;
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      .left {
+        img {
+          height: 60px;
+          width: 60px;
+          object-fit: contain;
+          margin-right: 30px;
         }
-        .tab-bar{
-            padding: 20px 40px;
+      }
+      .right {
+        font-size: 28px;
+        .orange {
+          color: #edb21d;
+        }
+      }
+    }
+    .tab-bar {
+      padding: 20px;
+      position: relative;
+      .date-tab-con {
+        height: 50px;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        background: #fff;
+        border-top-left-radius: 40px;
+        border-top-right-radius: 40px;
+        border-bottom-left-radius: 40px;
+        border-bottom-right-radius: 40px;
+        .date-tab-list {
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+          color: #fff;
+          flex: 1;
+          height: 50px;
+          .date-tab-item {
             position: relative;
-            .date-tab-con {
-                height: 50px;
-                display: flex;
-                justify-content: flex-start;
-                align-items: center;
-                background: #fff;
-                border-top-left-radius: 40px;
-                border-top-right-radius: 40px;
-                border-bottom-left-radius: 40px;
-                border-bottom-right-radius: 40px;
-                .date-tab-list {
-                    display: flex;
-                    justify-content: space-around;
-                    align-items: center;
-                    color: #fff;
-                    flex: 1;
-                    height: 50px;
-                    .date-tab-item {
-                        position: relative;
-                        margin: 0 8px;
-                        height: 100%;
-                        width: 100%;
-                        border-radius: 40px;
-                        color: #6D6D6D;
-                        font-size: 28px;
-                        font-weight: bold;
-                        @include center();
-                        background-color: #e6e6e6;
-                        img {
-                            height: 50px;
-                            width: 50px;
-                            padding: 0 16px;
-                        }
-                        .more {
-                            width: 20px;
-                            height: 12px;
-                        }
-                        /* &.active::after {
+            margin: 0 8px;
+            height: 100%;
+            width: 100%;
+            border-radius: 40px;
+            color: #6d6d6d;
+            font-size: 28px;
+            font-weight: bold;
+            @include center();
+            background-color: #e6e6e6;
+            img {
+              height: 50px;
+              width: 50px;
+              padding: 0 16px;
+            }
+            .more {
+              width: 20px;
+              height: 12px;
+            }
+            /* &.active::after {
                             content: '';
                             width: 88px;
                             position: absolute;
@@ -227,20 +228,20 @@
                             box-sizing: border-box;
                             border-bottom: 8px solid $green;
                         } */
-                        &.active {
-                            color: #fff;
-                            background-color:  $green;
-                        }
-                        &.notClick {
-                            background-color: $border_color;
-                            color: #fff;
-                            border: 1px solid #fff;
-                        }
-                    }
-                    .date-tab-item:nth-child(3) {
-                        border-right: 1px solid #E0E0E0;
-                    }
-                    /* .date-tab-item:first-child {
+            &.active {
+              color: #fff;
+              background-color: $green;
+            }
+            &.notClick {
+              background-color: $border_color;
+              color: #fff;
+              border: 1px solid #fff;
+            }
+          }
+          .date-tab-item:nth-child(3) {
+            border-right: 1px solid #e0e0e0;
+          }
+          /* .date-tab-item:first-child {
                         border-top-left-radius: 15px;
                         border-bottom-left-radius: 15px;
                     }
@@ -248,139 +249,218 @@
                         border-top-right-radius: 15px;
                         border-bottom-right-radius: 15px;
                     } */
+        }
+        img {
+          height: 50xp;
+          width: 50px;
+          object-fit: contain;
+        }
+      }
+    }
+    .top {
+      flex: 1;
+      .title {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0px 32px 20px 26px;
+        font-size: 36px;
+        .title-left {
+          font-weight: bold;
+          .van-icon {
+            margin-left: 5px;
+            font-size: 18px;
+          }
+        }
+      }
+      .monitoring-count {
+        text-align: left;
+        padding: 6px 28px;
+        line-height: 40px;
+        p {
+          font-size: 24px;
+          color: #8b8b8b;
+        }
+      }
+      .pie-chart-con {
+        flex: 1;
+        padding: 10px 0 20px 0;
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+        .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%;
+          padding-right: 40px;
+          @include center();
+          .list {
+            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;
+                .item-circle {
+                  height: 24px;
+                  width: 24px;
+                  margin: 0 8px;
+                }
+                span {
+                  font-size: 24px;
                 }
-                img {
-                    height: 50xp;
-                    width: 50px;
-                    object-fit: contain;
+                .text {
+                  color: #000;
+                  font-size: 24px;
                 }
+              }
+              .item-right {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+              }
             }
+          }
         }
-        .line-chart-con {
-            height: 600px;
-            padding: 20px;
-            .line-chart {
-                height: 580px;
-                padding: 20px;
-                background-color:#fff;
-                border: 1px solid $com_light_green;
-                border-radius: 40px;
+      }
+    }
+    .echart-container {
+      flex: 1;
+      position: relative;
+      min-height: 600px;
+      background-color: #fff;
+      padding: 0 20px;
+    }
+    .bottom {
+      flex: 1;
+      .result {
+        padding: 20px 40px;
+        .result-con {
+          .title {
+            span {
+              font-size: 46px;
+              font-weight: bold;
             }
-        }
-        .bottom {
-            flex: 1;
-            .result {
-                padding: 20px 40px;
-                .result-con {
-                    .title {
-                        span {
-                            font-size: 46px;
-                            font-weight: bold;
-                        }
-                        
-                    }
-                    .status {
-                        display: flex;
-                        flex-wrap: wrap;
-                        align-items: center;
-                        align-content: space-between;
-                        justify-content: space-between;
-                        width: 100%;
-                        margin: 20px 0;
-                        p {
-                            font-size: 52px;
-                            color: $green;
-                            font-weight: bold;
-                        }
-                        ul {
-                            display: flex;
-                            flex-wrap: wrap;
-                            align-items: center;
-                            justify-content: flex-start;
-                            li {
-                                width: 40px;
-                                height: 30px;
-                                border-radius: 20px;
-                                position: relative;
-                                & + li {
-                                    margin-left: 10px;
-                                }
-                                &.toobad {
-                                    background-color: #ff5f8b;
-                                    &:after{
-                                        background-color: #ff5f8b;
-                                    }
-                                }
-                                &.ordinary {
-                                    background-color: #2ea7e0;
-                                    &:after{
-                                        background-color: #2ea7e0;
-                                    }
-                                }
-                                &.sameas {
-                                    background-color: #8dc21f;
-                                    &:after{
-                                        background-color: #8dc21f;
-                                    }
-                                }
-                                &.excellent {
-                                    background-color: #179b3b;
-                                    &:after{
-                                        background-color: #179b3b;
-                                    }
-                                }
-                                &.active {
-                                    width: 240px;
-                                    &:after {
-                                        opacity: 1;
-                                    }
-                                    &:before {
-                                        opacity: 1;
-                                    }
-                                }
-                                &:after {
-                                    content: '';
-                                    display: block;
-                                    position: absolute;
-                                    top: 50%;
-                                    left: 50%;
-                                    transform: translateX(-50%) translateY(-50%);
-                                    width: 60px;
-                                    height: 60px;
-                                    opacity: 0;
-                                    border-radius: 50%;
-                                }
-                                &:before {
-                                    content: '';
-                                    display: block;
-                                    position: absolute;
-                                    top: 50%;
-                                    left: 50%;
-                                    transform: translateX(-50%) translateY(-50%);
-                                    width: 35px;
-                                    height: 35px;
-                                    opacity: 0;
-                                    border-radius: 50%;
-                                    background-color:#fff;
-                                    z-index: 2;
-                                }
-                            }
-                        }
-                    }
-                    .tips {
-                        font-size: 24px;
-                    }
-                }
+          }
+          .status {
+            display: flex;
+            flex-wrap: wrap;
+            align-items: center;
+            align-content: space-between;
+            justify-content: space-between;
+            width: 100%;
+            margin: 20px 0;
+            p {
+              font-size: 52px;
+              color: $green;
+              font-weight: bold;
             }
-            .wran-tips {
-                padding: 20px 40px 50px 40px;
-                font-size: 24px;
-                .tips-title {
-                    font-weight: bold;
-                    padding: 20px 0;
-                    color: #333;
+            ul {
+              display: flex;
+              flex-wrap: wrap;
+              align-items: center;
+              justify-content: flex-start;
+              li {
+                width: 40px;
+                height: 30px;
+                border-radius: 20px;
+                position: relative;
+                & + li {
+                  margin-left: 10px;
+                }
+                &.toobad {
+                  background-color: #ff5f8b;
+                  &:after {
+                    background-color: #ff5f8b;
+                  }
+                }
+                &.ordinary {
+                  background-color: #2ea7e0;
+                  &:after {
+                    background-color: #2ea7e0;
+                  }
+                }
+                &.sameas {
+                  background-color: #8dc21f;
+                  &:after {
+                    background-color: #8dc21f;
+                  }
                 }
+                &.excellent {
+                  background-color: #179b3b;
+                  &:after {
+                    background-color: #179b3b;
+                  }
+                }
+                &.active {
+                  width: 240px;
+                  &:after {
+                    opacity: 1;
+                  }
+                  &:before {
+                    opacity: 1;
+                  }
+                }
+                &:after {
+                  content: '';
+                  display: block;
+                  position: absolute;
+                  top: 50%;
+                  left: 50%;
+                  transform: translateX(-50%) translateY(-50%);
+                  width: 60px;
+                  height: 60px;
+                  opacity: 0;
+                  border-radius: 50%;
+                }
+                &:before {
+                  content: '';
+                  display: block;
+                  position: absolute;
+                  top: 50%;
+                  left: 50%;
+                  transform: translateX(-50%) translateY(-50%);
+                  width: 35px;
+                  height: 35px;
+                  opacity: 0;
+                  border-radius: 50%;
+                  background-color: #fff;
+                  z-index: 2;
+                }
+              }
             }
+          }
+          .tips {
+            font-size: 24px;
+          }
+        }
+      }
+      .wran-tips {
+        padding: 20px 40px 50px 40px;
+        font-size: 24px;
+        .tips-title {
+          font-weight: bold;
+          padding: 20px 0;
+          color: #333;
         }
+      }
     }
-}
\ No newline at end of file
+  }
+}
diff --git a/src/views/today/signsDetails.vue b/src/views/today/signsDetails.vue
index c2aa99e..d4998f5 100644
--- a/src/views/today/signsDetails.vue
+++ b/src/views/today/signsDetails.vue
@@ -3,48 +3,97 @@
   <div class="signs">
     <NavBar title="心率监测" @on-click-left="onNavBack" right-text="历史"> </NavBar>
     <div class="main">
-      <div class="date">
-        <div class="left">
-          <span>2023-04-29 18:08</span>
-        </div>
-        <div class="right">
-          <span>历史监测</span>
+      <div class="tab-bar">
+        <div class="date-tab-con">
+          <div class="date-tab-list">
+            <div
+              :class="['date-tab-item', { active: current === index, notClick: false }]"
+              @click="onTabClick(item.value, index)"
+              v-for="(item, index) in timeList"
+              :key="index"
+            >
+              <img :src="tabImgUrl" alt v-if="index == 3" />
+              <span>{{ item.text }}</span>
+              <img class="more" :src="selectDownImg" alt v-if="index == 3" />
+            </div>
+            <!-- <img :src="dateImg" alt="" /> -->
+          </div>
         </div>
       </div>
-      <div class="circle">
-        <van-circle
-          v-model="currentRateOut"
-          layer-color="#f0f0f0"
-          :color="$green"
-          :rate="systolicRate"
-          :speed="100"
-          stroke-linecap="butt"
-          size="210"
-          stroke-width="120"
+      <div class="top">
+        <!-- 日期选择 -->
+        <!-- 标题 -->
+        <div class="title">
+          <div class="title-left">
+            {{ titleLeft }}
+          </div>
+          <!-- <div class="title-right" v-show="currentDays === 0">
+            <p @click="onHistory">历史监测</p>
+          </div> -->
+        </div>
+        <!-- 日历 -->
+
+        <van-dialog
+          class="calenddar-dialog"
+          v-model="calendarDialogShow"
+          :show-confirm-button="false"
+          :show-cancle-button="false"
+          :close-on-click-overlay="true"
+          ref="calenddarDialog"
         >
           <template #default>
-            <div class="circle-text">
-              <div class="left">
-                <span>92</span>
-              </div>
-              <div class="right">
-                <img :src="circleBpm" alt="" />
-                <span>bpm</span>
+            <div class="calendar" ref="calendarCon">
+              <van-calendar
+                v-model="calendarShow"
+                :min-date="minDate"
+                :max-date="maxDate"
+                :default-date="defaultDate"
+                :round="false"
+                :poppable="false"
+                color="#179b3b"
+                :show-confirm="false"
+                :show-title="false"
+                :show-subtitle="false"
+                :formatter="formatter"
+                @select="onSelect"
+              />
+            </div>
+          </template>
+        </van-dialog>
+
+        <!-- 监测次数 -->
+        <div class="monitoring-count">
+          <p>监测次数：{{ monitoringCount || '0' }}次</p>
+        </div>
+
+        <!-- 折线图-非日报 -->
+
+        <div class="pie-chart-con">
+          <div class="pie-chart-left">
+            <div id="pieChart" ref="pieChart"></div>
+          </div>
+
+          <div class="pie-chart-right">
+            <div class="list">
+              <div class="item" v-for="(item, index) in pieRightList" :key="index">
+                <div class="item-left">
+                  <div class="item-circle" :style="{ backgroundColor: item.color }"></div>
+
+                  <span class="text">{{ item.text || '--' }}</span>
+                </div>
+
+                <div class="item-right">
+                  <span :style="{ color: item.color }">{{ item.count ? item.count + '次' : '0次' }}</span>
+                  <label :style="{ color: item.color }">{{
+                    item.percentage ? '(' + item.percentage + '%' + ')' : '(0%)'
+                  }}</label>
+                </div>
               </div>
             </div>
-          </template></van-circle
-        >
-        <div class="circle-white" :style="{ borderColor: this.$green }"></div>
-      </div>
-      <div class="progress">
-        <div class="progress-circle" :style="{ borderColor: this.$green, left: '45%' }"></div>
-        <div class="state-item" v-for="(item, index) in statesList" :key="index">
-          <div :class="['state-line', item.state]" :style="{ backgroundColor: item.color }"></div>
-          <div class="state-text">
-            <span :style="{}"> {{ item.text }} </span>
           </div>
         </div>
       </div>
+      <div class="week-month" v-show="true"></div>
       <div class="statistics">
         <div class="list">
           <div
@@ -78,25 +127,33 @@
           </p>
         </div>
       </div>
+
       <div class="tab-bar">
         <div class="date-tab-con">
           <div class="date-tab-list">
             <div
-              :class="['date-tab-item', { active: current === index, notClick: false }]"
-              @click="onTabClick(item.value, index)"
-              v-for="(item, index) in dateList"
+              :class="['date-tab-item', { active: signCurrent === index, notClick: false }]"
+              @click="onTabClickSign(index)"
+              v-for="(item, index) in signList"
               :key="index"
             >
-              <img :src="tabImgUrl" alt v-if="index == 3" />
               <span>{{ item.text }}</span>
-              <img class="more" :src="selectDownImg" alt v-if="index == 3" />
             </div>
-            <img :src="dateImg" alt="" />
+            <!-- <img :src="dateImg" alt="" /> -->
           </div>
         </div>
       </div>
-      <div class="line-chart-con">
-        <div class="line-chart" ref="lineChart"></div>
+      <div class="echart-container">
+        <div class="echart">
+          <EchartBox
+            echartId="lineChart"
+            :outTitle="emoLegend.outTitle"
+            height="200"
+            width="200"
+            :legend="emoLegend"
+            :options="defaultOptions"
+          ></EchartBox>
+        </div>
       </div>
       <div class="bottom">
         <div class="result">
@@ -128,9 +185,14 @@
 
 <script>
 import NavBar from '@/components/NavBar';
+import { EmotionModel, PsyBaseUrl } from '@/config/models';
+import axios from 'axios';
+import EchartBox from '@/components/EchartBox';
+import ToastService from '@/services/toast-service';
 export default {
   components: {
-    NavBar
+    NavBar,
+    EchartBox
   },
   data() {
     return {
@@ -146,115 +208,210 @@ export default {
       ],
       // 情绪状态列表
       statisticsList: [
-        { label: '最低心率', value: '75', time: '08:15', bgColor: '#2ea7e0' },
+        /* { label: '最低心率', value: '75', time: '08:15', bgColor: '#2ea7e0' },
         { label: '最高心率', value: '148', time: '10:15', bgColor: '#189b3b' },
-        { label: '平均心率', value: '50', time: '18:15', bgColor: '#ff5f8b' }
+        { label: '平均心率', value: '50', time: '18:15', bgColor: '#ff5f8b' } */
       ],
       warnImg: require('@/assets/today/icons/2_25.png'),
-      // 日期选择标签
-      dateList: [
+      timeList: [
         { name: 'today', text: '今天', value: 0 },
         { name: 'week', text: '7天', value: 7 },
         { name: 'month', text: '30天', value: 30 }
-        /* { name: 'weekReport', text: '周报', value: 49 } */
       ],
+      // 日期选择标签
+      dateList: [],
       tabImgUrl: require('@/assets/today/icons/statistical_form.png'),
       selectDownImg: require('@/assets/today/icons/select_down.png'),
       dateImg: require('@/assets/today/icons/2_12.png'),
       current: 0, // 日期选择标签-当前选中的标签
       currentDays: 0, //日期选择标签-日期参数
       emotionData: [],
-      xAxisData: ['6:00', '8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00'], //图表x轴展示的数据
-      echarts: null
+      xAxisData: [], //图表x轴展示的数据
+      echarts: null,
+      signCurrent: 0,
+      calendarDialogShow: false,
+      //饼状图右边数据,TODO 根据接口数据和 模块 重新封装数组
+      pieRightList: [
+        /* {
+          text: '无情绪倾向',
+          count: 12,
+          percentage: '80',
+          color: '#179b3b'
+        },
+        {
+          text: '轻度情绪倾向',
+          count: 2,
+          percentage: '80',
+          color: '#8dc21f'
+        },
+        {
+          text: '中度情绪倾向',
+          count: 1,
+          percentage: '80',
+          color: '#2ea7e0'
+        },
+        {
+          text: '重度情绪倾向',
+          count: 1,
+          percentage: '80',
+          color: '#ff5f8b'
+        } */
+      ],
+      params: {},
+      emoName: '',
+      result: '',
+      // 需要高亮的日期数组
+      highlightDates: [],
+      // 日历 默认最小可选择日期，默认为当前时间
+      maxDate: new Date(this.$dayjs().hour(0).minute(0).second(0).format()),
+      // 默认日历日期时间
+      defaultDate: new Date(this.$dayjs().hour(0).minute(0).second(0).format()),
+      // 选中的日历日期
+      selectDate: '',
+      uid: '',
+      // 建议
+      advice: '',
+      // 底部天数标题
+      surveyTitle: '' || '7天概览',
+      // 路由中的日期
+      routeDate: '',
+      // 路由参数
+      // 是否显示帮助
+      isPopup: false,
+      // 结果等级
+      resultLevel: '',
+      // 轻度级别颜色
+      mildColor: '#8dc21f',
+      // 中度级别颜色
+      severeColor: '#2ea7e0',
+      // 重度级别颜色
+      moderateColor: '#ff5f8b',
+      // 7天和30天最大数据列表
+      weekAndMonData: [],
+      noDataImg: require('@/assets/today/images/no_data_01.png'),
+      weekList: [],
+      startDate: '', //接口需要的开始时间
+      endDate: '', //接口需要的结束时间
+      currentEmoName: '', //当前情绪名称
+      pieEcharts: null,
+      emotionList: [],
+      weekAndMonthSeries: null,
+      emoType: '',
+      pieData: []
     };
   },
   watch: {
-    emotionData: {
+    /* emotionData: {
       handler() {
         this.initEchart();
       },
       deep: true
+    }, */
+    pieData: {
+      handler() {
+        this.initPieEchart();
+      },
+      deep: true
     }
   },
   computed: {
-    echartsTitle() {
-      return '心率数据图';
+    emoLegend() {
+      return {
+        title: '',
+        outTitle: `${this.emoName}数据图`,
+        list: [
+          { name: `无${this.emoName}倾向`, color: '#179b3b' },
+          { name: `轻度${this.emoName}倾向`, color: '#8dc21f' },
+          { name: `中度${this.emoName}倾向`, color: '#2ea7e0' },
+          { name: `重度${this.emoName}倾向`, color: '#ff5f8b' }
+        ]
+      };
     },
-    defaultOptions() {
+    // 饼状图配置
+    pieOption() {
       return {
-        time: {
-          useUTC: false
-        },
-        title: {
-          text: this.echartsTitle,
-          left: 10,
-          right: 25,
-          bottom: 20,
-          top: '3%',
+        tooltip: {
+          trigger: 'item',
           textStyle: {
-            fontSize: 22,
-            fontWeight: 'bold'
-          }
+            fontSize: 14
+          },
+          position: 'right'
         },
         legend: {
-          width: '60%',
-          orient: 'horizontal',
-          right: 'right',
           top: '5%',
-          bottom: '1%',
-          itemHeight: 5,
-          itemWidth: 5,
-          itemGap: 5,
-          align: 'left',
-          selectedMode: false,
-          data: [
-            {
-              name: `心率偏低`,
-              icon: 'rect',
-              itemStyle: {
-                color: '#2ea7e0'
-              },
-              textStyle: {
-                fontSize: 12
-              }
+          left: 'center',
+          show: false
+        },
+        series: [
+          {
+            type: 'pie',
+            radius: ['40%', '90%'],
+            avoidLabelOverlap: false,
+            startAngle: 270, // 设置逆时针渲染
+            itemStyle: {
+              borderRadius: 5,
+              borderColor: '#fff',
+              borderWidth: 2,
+              fontSize: 16
             },
-            {
-              name: `心率正常`,
-              itemStyle: {
-                color: '#189b3b'
-              },
-              icon: 'rect',
-              textStyle: {
-                fontSize: 12
-              }
+            label: {
+              show: false,
+              position: 'center',
+              fontSize: 16
             },
-            {
-              name: `心率偏高`,
-              itemStyle: {
-                color: '#ff5f8b'
-              },
-              icon: 'rect',
-              textStyle: {
-                fontSize: 12
+            emphasis: {
+              label: {
+                show: false,
+                fontSize: 16,
+                fontWeight: 'bold'
               }
-            }
-          ],
-          formatter: function (name) {
-            // 自定义显示内容
-            if (name.length > 6) {
-              return name.substring(0, 6) + '\n' + name.substring(6);
-            } else {
-              return name;
-            }
+            },
+            labelLine: {
+              show: false
+            },
+            data: this.pieData
           }
+        ]
+      };
+    },
+    titleLeft() {
+      //let text = this.emoName === 'depression' ? '趋势' : '';
+      let today = '';
+      if (this.currentDays !== 0) {
+        today = '';
+      } else {
+        today =
+          this.$dayjs(this.selectDate || this.defaultDate).format('YYYY-MM-DD') ===
+          this.$dayjs(new Date()).format('YYYY-MM-DD')
+            ? '今天'
+            : '';
+      }
+      /*  return `${today}${this.emoName}倾向${text}`; */
+      return `${today}心率趋势`;
+    },
+    signList() {
+      return [
+        { name: 'heartRate', text: '心率' /* value: 0 */ },
+        { name: 'temperature', text: '体温' /* value: 7  */ },
+        { name: 'step', text: '运动' /* value: 30 */ }
+      ];
+    },
+
+    echartsTitle() {
+      return '心率数据图';
+    },
+    defaultOptions() {
+      return {
+        time: {
+          useUTC: false
         },
         grid: {
           show: true,
-          borderWidth: 1,
-          top: '20%',
+          borderWidth: 0,
+          top: '3%',
           left: '1%',
-          right: '2%',
-          bottom: '10%',
+          right: '3%',
+          bottom: '15%',
           containLabel: true
         },
         xAxis: {
@@ -275,7 +432,7 @@ export default {
               width: 2
             }
           },
-          nameLocation: 'left',
+          nameLocation: 'center',
           axisLabel: {
             show: true,
             fontSize: 12,
@@ -285,6 +442,11 @@ export default {
           data: this.xAxisData
         },
         dataZoom: [
+          /*  {
+                        type: "inside",
+                        start: 0,
+                        end: 100,
+                    }, */
           {
             start: 0,
             end: 100,
@@ -292,9 +454,9 @@ export default {
               color: '#FFF',
               fontSize: 14
             },
-            show: false,
-            height: 15,
-            bottom: 5,
+            show: true,
+            height: 20,
+            bottom: 4,
             handleStyle: {
               borderWidth: 1,
               borderCap: 'square'
@@ -308,20 +470,20 @@ export default {
             align: 'center'
           },
           formatter: function (params) {
-            return params[0].name + '</br>' + params[0].value;
+            return params[0].marker + params[0].name + '</br>' + params[0].value;
           }
         },
         yAxis: {
           type: 'value',
-          max: 150,
-          min: 50,
+          max: 100,
+          min: 0,
           interval: 20,
           splitNumber: 1,
           boundaryGap: ['5%', '5%'],
           nameTextStyle: {
             fontSize: 13
           },
-          alignTicks: true,
+          alignTicks: false,
           axisTick: {
             show: false
           },
@@ -339,32 +501,35 @@ export default {
         },
         series: [
           {
-            name: `心率偏低`,
+            name: `无${this.emoName}倾向`,
             type: 'line',
             padding: 5,
+            smooth: true,
             data: this.emotionData,
             symbol: 'circle',
-            symbolSize: 12,
-            smooth: true,
+            symbolSize: 10,
             itemStyle: {
-              normal: {
-                color: '#fff',
-                borderWidth: 2,
-                lineStyle: {
-                  width: 6,
-                  type: 'solid',
-                  color: '#189b3b'
-                }
-              }
+              color: '#fff',
+              borderWidth: 2
+            },
+            lineStyle: {
+              width: 6,
+              type: 'solid',
+              color: '#189b3b'
             }
           },
           {
-            name: `心率正常`,
+            name: `轻度${this.emoName}倾向`,
+            type: 'line',
+            data: ''
+          },
+          {
+            name: `中度${this.emoName}倾向`,
             type: 'line',
             data: ''
           },
           {
-            name: `心率偏高`,
+            name: `重度${this.emoName}倾向`,
             type: 'line',
             data: ''
           }
@@ -373,12 +538,397 @@ export default {
     }
   },
   created() {
-    this.createList();
+    this.loadParams();
+    this.initEchartText();
+    this.getPsychologiclData();
+    /* this.createList(); */
+    /* this.getPieData(); */
   },
   mounted() {
-    this.initEchart();
+    /*  this.initEchart(); */
+    this.initPieEchart();
   },
   methods: {
+    loadParams() {
+      let params = this.$route.query;
+      if (params) {
+        this.emoName = EmotionModel[params.name].name;
+        this.emoType = EmotionModel[params.name].type;
+        this.uid = params.uid;
+        this.params = params;
+        this.currentEmoName = params.name;
+        if (params.date) {
+          this.dateList[0].text =
+            this.$dayjs(params.date).format('YYYY-MM-DD') === this.$dayjs(new Date()).format('YYYY-MM-DD')
+              ? '今天'
+              : this.$dayjs(params.date).format('MM-DD');
+          this.defaultDate = new Date(this.$dayjs(params.date).hour(0).minute(0).second(0).format());
+        }
+      }
+    },
+    // 初始化饼状图
+    initPieEchart() {
+      if (this.pieEcharts != null && this.pieEcharts != '' && this.pieEcharts != undefined) {
+        this.pieEcharts.dispose();
+      }
+      this.pieEcharts = this.$echarts.init(this.$refs.pieChart);
+      this.pieEcharts.setOption(this.pieOption);
+    },
+    // 初始化图表的文字内容
+    initEchartText() {
+      this.result = `无${this.emoName}倾向`;
+      this.defaultSeries = [
+        {
+          name: ``,
+          type: 'line',
+          padding: 5,
+          data: this.emotionData,
+          symbol: 'circle',
+          symbolSize: 12, // 拐点圆的大小
+          areaStyle: {}
+        },
+        {
+          name: `轻度${this.emoName}倾向`,
+          type: 'line',
+          padding: 10,
+          data: '',
+          symbol: 'circle',
+          symbolSize: 12 // 拐点圆的大小
+        },
+        {
+          name: `中度${this.emoName}倾向`,
+          type: 'line',
+          data: ''
+        },
+        {
+          name: `重度${this.emoName}倾向`,
+          type: 'line',
+          data: ''
+        }
+      ];
+      this.pieRightList = this.pieRightList.map(item => {
+        item.text = item.text.replace('情绪', this.emoName);
+        return item;
+      });
+    },
+    // 获取饼状图数据，TODO 对接接口数据
+    getPieData() {
+      this.pieData = [
+        { value: 12, name: '', itemStyle: { color: '#179b3b' } },
+        { value: 2, name: '', itemStyle: { color: '#8dc21f' } },
+        { value: 1, name: '', itemStyle: { color: '#2ea7e0' } },
+        { value: 1, name: '', itemStyle: { color: '#ff5f8b' } }
+      ];
+    },
+    // 获取情绪数据
+    getPsychologiclData(date, startDate, endDate) {
+      ToastService.loading({
+        message: '数据加载中'
+      });
+      let reqDate = date
+        ? this.$dayjs(date).format('YYYY-MM-DD')
+        : this.routeDate || this.$dayjs(this.defaultDate).format('YYYY-MM-DD'); /* "2023-05-23" */
+      let reqParams = {
+        uid: this.uid,
+        startDate: startDate || reqDate,
+        endDate: endDate || reqDate,
+        type: this.emoType
+      };
+      console.log('请求参数', reqParams);
+      let reqUrl = `${PsyBaseUrl}/api/Data/GetHisData`;
+      axios
+        .get(reqUrl, {
+          params: { ...reqParams },
+          headers: { AccessToken: this.$store.getters.ssjlToken }
+        })
+        .then(res => {
+          if (res.data) {
+            let data = res.data.response;
+            // 监测次数
+            this.monitoringCount = data.Count;
+            this.pieRightList = [];
+            this.statisticsList = [];
+            this.emotionList = [];
+            let None = {
+              count: data.None,
+              percentage: this.calcPercentage(data.None, data.Count),
+              text: `无${this.emoName}倾向`,
+              color: '#179b3b'
+            };
+            let Mild = {
+              count: data.Mild,
+              percentage: this.calcPercentage(data.Mild, data.Count),
+              text: `轻度${this.emoName}倾向`,
+              color: '#8dc21f'
+            };
+            let Moderate = {
+              count: data.Moderate,
+              percentage: this.calcPercentage(data.Moderate, data.Count),
+              text: `中度${this.emoName}倾向`,
+              color: '#2ea7e0'
+            };
+            let Severe = {
+              count: data.Severe,
+              percentage: this.calcPercentage(data.Severe, data.Count),
+              text: `重度${this.emoName}倾向`,
+              color: '#ff5f8b'
+            };
+            // 饼状图右边数据
+            this.pieRightList.push(None);
+            this.pieRightList.push(Mild);
+            this.pieRightList.push(Moderate);
+            this.pieRightList.push(Severe);
+            this.pieData = this.pieRightList.map(item => {
+              item.value = item.count;
+              item.itemStyle = {
+                color: item.color
+              };
+              return item;
+            });
+            // 最大，最小和最近值
+            let Max = {
+              label: '最大值',
+              value: data.Max,
+              time: data.MaxDesc
+                ? this.currentDays === 0
+                  ? this.$dayjs(data.MaxDesc).format('HH:mm')
+                  : this.$dayjs(data.MaxDesc).format('MM/DD HH:mm')
+                : '',
+              bgColor: '#ff5f8b'
+            };
+            let Min = {
+              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: '#189b3b'
+            };
+            /* let Avg = {
+              label: '平均值',
+              value: data.Avg,
+              time: data.AvgDesc
+                ? this.currentDays === 0
+                  ? this.$dayjs(data.AvgDesc).format('HH:mm')
+                  : this.$dayjs(data.AvgDesc).format('MM/DD HH:mm')
+                : ''
+            }; */
+            let Current = {
+              label: '最近值',
+              value: data.Current,
+              time: data.CurrentDesc
+                ? this.currentDays === 0
+                  ? this.$dayjs(data.CurrentDesc).format('HH:mm')
+                  : this.$dayjs(data.CurrentDesc).format('MM/DD HH:mm')
+                : '',
+              bgColor: '#2ea7e0'
+            };
+            this.statisticsList.push(Max);
+            this.statisticsList.push(Min);
+            /* this.statisticsList.push(Avg); */
+            this.statisticsList.push(Current);
+            // 周报月报底部显示数据
+            let NoneDay = {
+              days: data.NoneDay,
+              text: `无${this.emoName}倾向`,
+              color: '#179b3b'
+            };
+            let MildDay = {
+              days: data.MildDay,
+              text: `轻度${this.emoName}倾向`,
+              color: '#8dc21f'
+            };
+            let ModerateDay = {
+              days: data.ModerateDay,
+              text: `中度${this.emoName}倾向`,
+              color: '#2ea7e0'
+            };
+            let SevereDay = {
+              days: data.SevereDay,
+              text: `重度${this.emoName}倾向`,
+              color: '#ff5f8b'
+            };
+            this.emotionList.push(NoneDay);
+            this.emotionList.push(MildDay);
+            this.emotionList.push(ModerateDay);
+            this.emotionList.push(SevereDay);
+            // 图表数据
+            this.emotionData = data.ChartDatas.map(item => {
+              return {
+                value: item.Value,
+                itemStyle: {
+                  borderColor: this.calcResultColor(item.Level)
+                }
+              };
+            });
+            // 7天 和 30天柱形图显示
+            this.weekAndMonData = data.ChartDatas.map((item, index) => {
+              return {
+                value: [index, item.MinValue, item.MaxValue]
+              };
+            });
+            // x轴显示数据
+            if (this.currentDays === 0) {
+              // 显示今天数据
+              this.xAxisData = data.ChartDatas.map(item => {
+                return this.$dayjs(item.Key.replace(/-/g, '/')).format('HH:mm');
+              });
+            } else {
+              this.xAxisData = data.ChartDatas.map(item => {
+                return this.$dayjs(item.Key.replace(/-/g, '/')).format('MM/DD');
+              });
+              let that = this;
+              // 7天和30天变成柱状图
+              this.weekAndMonthSeries = [
+                {
+                  name: '平均值',
+                  type: 'scatter',
+                  symbolSize: 14,
+                  data: this.emotionData
+                },
+                {
+                  name: '',
+                  type: 'custom',
+                  data: this.weekAndMonData,
+                  renderItem: function (params, api) {
+                    let categoryIndex = api.value(0);
+                    let end = api.coord([categoryIndex, api.value(1)]);
+                    let start = api.coord([categoryIndex, api.value(2)]);
+                    let width = 16;
+                    let rectShape = that.$echarts.graphic.clipRectByRect(
+                      {
+                        x: start[0] - width / 2,
+                        y: start[1],
+                        width: 16,
+                        height: end[1] - start[1]
+                      },
+                      {
+                        x: params.coordSys.x,
+                        y: params.coordSys.y,
+                        width: params.coordSys.width,
+                        height: params.coordSys.height
+                      }
+                    );
+                    if (rectShape) {
+                      rectShape.r = [10];
+                    }
+                    return (
+                      rectShape && {
+                        type: 'rect',
+                        shape: rectShape,
+                        style: api.style()
+                      }
+                    );
+                  },
+                  itemStyle: {
+                    opacity: 0.8
+                  },
+                  encode: {
+                    y: [1, 2],
+                    x: 0
+                  }
+                },
+                {
+                  name: `轻度${this.emoName}倾向`,
+                  type: 'scatter',
+                  symbolSize: 12,
+                  data: ''
+                },
+                {
+                  name: `中度${this.emoName}倾向`,
+                  type: 'scatter',
+                  symbolSize: 12,
+                  data: ''
+                },
+                {
+                  name: `重度${this.emoName}倾向`,
+                  type: 'scatter',
+                  symbolSize: 12,
+                  data: ''
+                },
+                {
+                  name: `无${this.emoName}倾向`,
+                  type: 'scatter',
+                  symbolSize: 12,
+                  data: ''
+                }
+              ];
+              // 点击提示此时为空
+              this.defaultOptions.tooltip = {
+                trigger: 'axis',
+                formatter: function (params) {
+                  return (
+                    params[0].marker +
+                    '平均值:' +
+                    params[0].name +
+                    '--' +
+                    params[0].value +
+                    '</br>' +
+                    params[1].marker +
+                    '最大值:' +
+                    params[1].name +
+                    '--' +
+                    params[1].value[2] +
+                    '</br>' +
+                    params[1].marker +
+                    '最小值:' +
+                    params[1].name +
+                    '--' +
+                    params[1].value[1]
+                  );
+                }
+              };
+              this.defaultOptions.series = this.weekAndMonthSeries;
+            }
+            // 结果解读
+            this.result = data.Result;
+            this.resultLevel = data.ResultLevel;
+            this.advice = data.Advice;
+            ToastService.success({
+              message: '数据加载完成'
+            });
+          }
+        })
+        .catch(error => {
+          console.log(error);
+        })
+        .finally(() => {});
+    },
+    // 计算结果采用哪种颜色
+    calcResultColor(value, isCallBackClass) {
+      let color = '';
+      let className = '';
+      switch (Number(value)) {
+        case 0:
+          color = '#179b3b';
+          className = 'none';
+          break;
+        case 1:
+          color = '#8dc21f';
+          className = 'mild';
+          break;
+        case 2:
+          color = '#2ea7e0';
+          className = 'moderate';
+          break;
+        case 3:
+          color = '#ff5f8b';
+          className = 'severe';
+          break;
+      }
+      return isCallBackClass ? className : color;
+    },
+    // 计算百分比
+    calcPercentage(value, total) {
+      if (typeof value !== 'number' || typeof total !== 'number' || total === 0) {
+        return 0;
+      }
+      let milValue = value * 1000;
+      let milTotal = total * 1000;
+      return Math.round((milValue / milTotal) * 100);
+    },
     onNavBack() {
       this.$router.push({
         name: 'Today'
@@ -387,7 +937,37 @@ export default {
     onTabClick(value, index) {
       this.current = index;
       this.currentDays = value;
-      this.createList();
+      this.$store.commit('tabClick', index);
+      let currentDate = new Date();
+      this.surveyTitle = value === 7 ? '7天概览' : '30天概览';
+      if (value === 7) {
+        let dateList = this.getPostDate(currentDate, 6, true);
+        this.getPsychologiclData('', dateList[0] /* '2023-11-15' */, dateList[1] /* '2023-11-21' */);
+        this.startDate = dateList[0] /* '2023-11-15' */;
+        this.endDate = dateList[1] /* '2023-11-21' */;
+      } else if (value === 0) {
+        // 今天
+        this.defaultOptions.xAxis.data = this.xAxisData;
+        this.defaultOptions.series = this.defaultSeries;
+        this.defaultOptions.series[0].data = this.emotionData;
+        this.getPsychologiclData(
+          this.selectDate ? this.selectDate : this.$dayjs(currentDate).format('YYYY-MM-DD') /* '2023-11-21' */
+        );
+        this.startDate = this.$dayjs(currentDate).format('YYYY-MM-DD') /* '2023-11-21' */;
+        this.endDate = this.$dayjs(currentDate).format('YYYY-MM-DD') /* '2023-11-21' */;
+      } else if (value === 30) {
+        // 30天
+        this.defaultOptions.xAxis.data = this.xAxisData;
+        this.defaultOptions.series = this.defaultSeries;
+        this.defaultOptions.series[0].data = this.emotionData;
+        let dateList = this.getPostDate(currentDate, 30, true);
+        this.getPsychologiclData('', dateList[0] /* '2023-11-21' */, dateList[1] /* '2023-12-21' */);
+        this.startDate = dateList[0] /* '2023-11-21' */;
+        this.endDate = dateList[1] /* '2023-12-21' */;
+      }
+    },
+    onTabClickSign(index) {
+      this.signCurrent = index;
     },
     createList() {
       // 模拟数据