Merge branch 'mer-test' into test

src/api/health-user.js

@@ -1,6 +1,13 @@
 import request from '@/config/request';
 export const APIHealthUser = {
-  addPerson //添加人员
+  addPerson, //添加人员
+  personList, //人员列表
+  personInfo, //详情人员信息
+  updatePerson, //修改人员信息
+  deletePerson, // 删除人员信息
+  getHomeData, //今日体征感知
+  getHisData, //体征历史数据
+  getCalendar //体征历史数据日历
 };
 export default APIHealthUser;
 function addPerson(params) {
@@ -10,3 +17,54 @@ function addPerson(params) {
     data: params
   });
 }
+function personList(data) {
+  return request({
+    url: `/api/HealthyUser/PersonList`,
+    method: 'get',
+    params: data
+  });
+}
+function personInfo(data) {
+  return request({
+    url: `/api/HealthyUser/PersonInfo`,
+    method: 'get',
+    params: data
+  });
+}
+function updatePerson(params) {
+  return request({
+    url: `/api/HealthyUser/UpdatePerson`,
+    method: 'post',
+    data: params
+  });
+}
+function deletePerson(data) {
+  return request({
+    url: `/api/HealthyUser/DeletePerson`,
+    method: 'post',
+    params: data
+  });
+}
+
+function getHomeData(data) {
+  return request({
+    url: `/api/HealthyData/GetHomeData`,
+    method: 'post',
+    params: data
+  });
+}
+
+function getHisData(params) {
+  return request({
+    url: `/api/HealthyData/GetHisData`,
+    method: 'post',
+    data: params
+  });
+}
+function getCalendar(data) {
+  return request({
+    url: `/api/HealthyData/GetCalendar`,
+    method: 'post',
+    params: data
+  });
+}

src/api/psychological.js

@@ -11,7 +11,10 @@ service.interceptors.request.use(request => {
   return request;
 });
 export const APIPsy = {
-  getHomeData
+  getHomeData,
+  getCalendarData,
+  getProgress,
+  getComprehensiveEvaluation //当天三大指标综合总评
 };
 export default APIPsy;
 function getHomeData(data) {
@@ -21,3 +24,24 @@ function getHomeData(data) {
     params: data
   });
 }
+function getCalendarData(data) {
+  return service({
+    url: `/api/Data/GetCalendarData`,
+    method: 'get',
+    params: data
+  });
+}
+function getProgress(data) {
+  return service({
+    url: `/api/Question/Progress`,
+    method: 'get',
+    params: data
+  });
+}
+function getComprehensiveEvaluation(data) {
+  return service({
+    url: `/api/Data/GetComprehensiveEvaluation`,
+    method: 'get',
+    params: data
+  });
+}

src/components/DateSwitch.vue

@@ -34,7 +34,8 @@ export default {
       // 当前月份，从 0（一月）开始
       currentMonth: new Date().getMonth(),
       // 当前年份
-      currentYear: new Date().getFullYear()
+      currentYear: new Date().getFullYear(),
+      weekObj: {}
     };
   },
   watch: {
@@ -70,12 +71,13 @@ export default {
           break;
         case 'week':
           this.checkDate(dateType, this.$own.getNowFormatDate(this.count));
+          this.$emit('updateDate', this.weekObj);
           break;
         case 'month':
           this.date = this.checkDate(dateType, this.date);
+          this.$emit('updateDate', this.formatDate(this.date));
           break;
       }
-      this.$emit('updateDate', this.formatDate(this.date));
     },
     onPrevious() {},
     onNext() {},
@@ -182,18 +184,30 @@ export default {
       this.setDate(this.addDate(this.currentFirstDate, -7));
       this.date = this.timeStamp[0] + '~' + this.timeStamp[6];
       this.weekDate = this.timeStamp[0];
+      this.weekObj = {
+        start: this.timeStamp[0],
+        end: this.timeStamp[6]
+      };
     },
     // 下一周
     nextWeek() {
       this.setDate(this.addDate(this.currentFirstDate, 7));
       this.date = this.timeStamp[0] + '~' + this.timeStamp[6];
       this.weekDate = this.timeStamp[0];
+      this.weekObj = {
+        start: this.timeStamp[0],
+        end: this.timeStamp[6]
+      };
     },
     // 这周
     currentWeek(date) {
       this.setDate(this.addDate(new Date(), -1));
       this.date = this.timeStamp[0] + '~' + this.timeStamp[6];
       this.weekDate = new Date(date).Format('yyyy-MM-dd');
+      this.weekObj = {
+        start: this.timeStamp[0],
+        end: this.timeStamp[6]
+      };
     },
     // 上一月
     preMonth() {
@@ -274,12 +288,13 @@ export default {
         if (this.dateType === 'week') {
           // 如果是周报，则不用返回
           this.checkDate(this.dateType, this.$own.getNowFormatDate(this.count), 'add');
+          this.$emit('updateDate', this.weekObj);
         } else {
           this.nextMonth();
+          this.$emit('updateDate', this.formatDate(this.date));
           /* this.date = this.checkDate(this.dateType, this.$own.getNowFormatDate(this.count)); */
         }
         this.isPreClick = true;
-        this.$emit('updateDate', this.formatDate(this.date));
       } else {
         // 上一个
         if (this.clickFlag && this.isPreClick) {
@@ -287,7 +302,7 @@ export default {
           if (this.dateType === 'week') {
             // 如果是周报，则不用返回
             this.checkDate(this.dateType, this.$own.getNowFormatDate(this.count), 'pre');
-            this.$emit('updateDate', this.formatDate(this.date));
+            this.$emit('updateDate', this.weekObj);
           } else if (this.dateType === 'month') {
             this.preMonth();
             if (this.count <= -12) {

src/components/SubmenuList.vue

@@ -11,7 +11,7 @@
       <div class="list">
         <div class="item" v-for="(item, index) in list" :key="index" @click="onItemClick(item)">
           <div class="img-icon-con" :style="{ borderRadius: rounded ? '50%' : '', backgroundColor: '#fff' }">
-            <img :src="item.imgPath" alt="" />
+            <img :src="item.imgPath" alt="" :style="{ borderRadius: rounded ? '50%' : '', backgroundColor: '#fff' }" />
           </div>
           <div class="text">
             <span>{{ item.text }}</span>
@@ -107,13 +107,13 @@ export default {
               break;
           }
         }
-      } else {
+      } /* else {
         this.$dialog.confirm({
           title: '提示',
           message: `功能开发中`,
           showCancelButton: false
         });
-      }
+      } */
     },
     onClick(model) {
       let val = null;
@@ -180,7 +180,7 @@ export default {
       padding-left: 20px;
       display: grid;
       grid-template-columns: repeat(4, auto);
-      grid-gap: 20px;
+      grid-gap: 50px;
       .item {
         position: relative;
         /* height: 140px; */

src/components/TopNavBar.vue

@@ -1,9 +1,15 @@
 <!--  -->
 <template>
   <div class="nav-bar">
-    <van-nav-bar :title="title" :fixed="true" z-index="998" @click-left="onClickLeft" @click-right="onClickRight">
+    <van-nav-bar
+      :title="currentPerson ? currentPerson.nickName || '' + 'LV' + currentPerson.level || '' : ''"
+      :fixed="true"
+      z-index="998"
+      @click-left="onClickLeft"
+      @click-right="onClickRight"
+    >
       <template #left>
-        <van-icon :name="LeftIcon" size="36" />
+        <img class="left-img" :src="currentPerson ? currentPerson.avatar : LeftIcon" alt="" />
       </template>
       <template #right>
         <van-icon :name="RightIcon" dot size="28" />
@@ -15,6 +21,7 @@
 <script>
 import LeftIcon from '@/assets/icons/1_75.png';
 import RightIcon from '@/assets/icons/1_30.png';
+import APIHealthUser from '@/api/health-user';
 export default {
   components: {},
   name: 'NavBar',
@@ -27,17 +34,33 @@ export default {
   data() {
     return {
       LeftIcon,
-      RightIcon
+      RightIcon,
+      currentPerson: {}
     };
   },
   created() {},
-  mounted() {},
+  mounted() {
+    this.getPersonInfo();
+  },
   methods: {
     onClickLeft(value) {
       this.$emit('on-click-left', value);
     },
     onClickRight(value) {
       this.$emit('on-click-right', value);
+    },
+    // 根据用户id获取用户信息
+    getPersonInfo() {
+      let reqParams = {
+        personId: this.$store.getters.personId
+      };
+      APIHealthUser.personInfo(reqParams).then(res => {
+        const data = res.data.data;
+        if (data) {
+          this.currentPerson = { ...data };
+          console.log('this.currentPerson', this.currentPerson);
+        }
+      });
     }
   }
 };
@@ -50,6 +73,11 @@ export default {
   height: 100px;
   width: 100%;
 }
+.left-img {
+  height: 70px;
+  width: 70px;
+  border-radius: 50%;
+}
 
 /* @import url(); 引入css类 */
 </style>

src/config/appId.js

@@ -1,3 +1,3 @@
 // 微信公众号AppId
-const AppId = process.env.NODE_ENV === 'production' ? 'wx23f697736154110b' : 'wx5e26f0813859e5f6';
+const AppId = process.env.NODE_ENV === 'production' ? 'wx96730d5b434f80d9' : 'wxab7b8b9509e1d137';
 export default AppId;

src/config/models.js

@@ -125,7 +125,42 @@ export const EmotionModel = {
     article2: `<p>设备的疲劳值是生理疲劳和心理疲劳的综合值，主要通过个体日常生活中的心率，心率变异性的变化及运动体力的变化情况来进行科学计算而来。</p>`
   }
 };
-
+// 体征模型
+export const Signsmodel = {
+  // 体温
+  temperature: {
+    name: '体温',
+    type: 1,
+    unit: '℃',
+    progressTextList: [
+      /*  { color: "#2ea7e0", text: "偏低", state: "low" }, */
+      { color: '#189b3b', text: '正常', state: 'normal' },
+      { color: '#ff5f8b', text: '偏高', state: 'hight' }
+    ]
+  },
+  // 心率
+  heartrate: {
+    name: '心率',
+    type: 0,
+    unit: 'bmp',
+    progressTextList: [
+      { color: '#2ea7e0', text: '偏低', state: 'low' },
+      { color: '#189b3b', text: '正常', state: 'normal' },
+      { color: '#ff5f8b', text: '偏高', state: 'hight' }
+    ]
+  },
+  // 步数,少于3000偏少，3000~10000正常，10000以上偏高
+  step: {
+    name: '步数',
+    type: 2,
+    unit: '步',
+    progressTextList: [
+      { color: '#2ea7e0', text: '偏低', state: 'low' },
+      { color: '#189b3b', text: '正常', state: 'normal' },
+      { color: '#ff5f8b', text: '偏高', state: 'hight' }
+    ]
+  }
+};
 //心理健康相关接口地址
 export const PsyBaseUrl =
   process.env.NODE_ENV === 'production' ? 'https://dbmq.rzliot.com/auth_heart' : 'https://dbmq.rzliot.com/heart';

src/config/request.js

@@ -8,6 +8,7 @@
  */
 import axios from 'axios';
 import router from '@/router';
+import store from '@/store';
 import { baseApi } from '@/config';
 import prefix from '@/store/prefix';
 const httpProxyPrefix = baseApi;
@@ -80,15 +81,18 @@ service.interceptors.request.use(request => {
     return request;
   }
   // 全局请求统一增加一个 sourcetype: 1的参数跟区分新旧接口
+  // 全局请求统一增加一个 sourcetype: 1的参 数跟区分新旧接口
   if (request.method == 'get') {
     request.params = {
       ...request.params,
-      sourcetype: 1
+      sourcetype: 1,
+      personId: Number(store.getters.personId) || 26
     };
   } else if (request.method == 'post') {
     request.data = {
       ...request.data,
-      sourcetype: 1
+      sourcetype: 1,
+      personId: Number(store.getters.personId) || 26
     };
   }
 

src/router/index.js

@@ -1,7 +1,7 @@
 import Vue from 'vue';
 import Router from 'vue-router';
-import store from '@/store/index';
-import prefix from '@/store/prefix';
+/* import store from '@/store/index';
+import prefix from '@/store/prefix'; */
 import { constantRouterMap } from './router.config.js';
 
 // hack router push callback
@@ -29,7 +29,7 @@ export function resetRouter() {
   router.matcher = newRouter.matcher; // reset router
 }
 // TODO 增加路由拦截
-router.beforeEach((to, from, next) => {
+/* router.beforeEach((to, from, next) => {
   store.commit('fromRuoter', from.name);
   if (to.path == '/login') {
     next();
@@ -41,5 +41,5 @@ router.beforeEach((to, from, next) => {
       next();
     }
   }
-});
+}); */
 export default router;

src/store/index.js

@@ -50,7 +50,8 @@ export default new Vuex.Store({
     fromRuoter: null,
     deviceVersion: '', //设备版本号
     ssjlToken: '', //b端接口token
-    tabClick: '' //心理监测点击tab
+    tabClick: '', //心理监测点击tab
+    personId: '' //设备列表的personId
   },
   mutations: {
     authToken(state, token) {
@@ -178,6 +179,10 @@ export default new Vuex.Store({
     tabClick(state, tabClick) {
       state.tabClick = tabClick;
       window.localStorage[prefix + 'tabClick'] = tabClick;
+    },
+    personId(state, personId) {
+      state.personId = personId;
+      window.localStorage[prefix + 'personId'] = personId;
     }
   },
   getters: {
@@ -321,6 +326,10 @@ export default new Vuex.Store({
     tabClick: state => {
       if (state.tabClick != '') return state.tabClick;
       return window.localStorage[prefix + 'tabClick'] == null ? '' : window.localStorage[prefix + 'tabClick'];
+    },
+    personId: state => {
+      if (state.personId != '') return state.personId;
+      return window.localStorage[prefix + 'personId'] == null ? '' : window.localStorage[prefix + 'personId'];
     }
   },
   actions: {},

src/views/development/index.vue

@@ -112,7 +112,15 @@ export default {
       levels: []
     };
   },
-  created() {},
+  created() {
+    // 写死一个用户Id
+    this.$store.commit(
+      'authToken',
+      'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJVc2VySW5mbyI6eyJJZCI6NCwiU291cmNlVHlwZSI6MSwiVXNlcklkIjoiNWE2OThlOTQtOGM0MS00ZWM1LWJiM2MtNGFiYWIyZjM3Y2QxIiwiTG9naW5OYW1lIjoiMTg2NjQyNzI3NDMiLCJMb2dpblR5cGUiOjF9LCJFeHAiOjE3MTQ0NjAxNDY5NTkuMH0.KV1AQ1fDcbds9QvqxyMe3gRzEN83eMJKd9YF_jPnY8w'
+    );
+    this.$store.commit('userId', '5a698e94-8c41-4ec5-bb3c-4abab2f37cd1');
+    this.$store.commit('personId', 26);
+  },
   mounted() {
     this.initData();
   },

src/views/insight/index.vue

@@ -25,31 +25,32 @@
       <div
         class="periodItem minPeriodItem"
         :class="{ active: emotionActive == index }"
-        v-for="(item, index) in emotionList"
+        v-for="(item, index) in psyList"
         :key="index"
-        @click="onEmotionClick(index)"
+        @click="onEmotionClick(item, index)"
       >
         <span>{{ item.name }}</span>
       </div>
     </div>
-    <div class="ChatBox">
-      <div class="legendBox">
-        <div class="legend">
-          <div class="legendItem" :class="item.type" v-for="(item, index) in degreeList" :key="index">
-            <span>{{ item.name }}{{ emotionList[emotionActive].name }}倾向</span>
-            <span class="number">{{ 8 }}次({{ 1 }}%)</span>
-          </div>
-        </div>
+    <div class="echart-container">
+      <div class="echart">
+        <EchartBox
+          echartId="emotionChart"
+          :outTitle="emoLegend.outTitle"
+          height="200"
+          width="200"
+          :legend="emoLegend"
+          :options="defaultOptions"
+        ></EchartBox>
       </div>
-      <div class="Chat emotionChat" id="emotionChart"></div>
     </div>
     <div class="grid">
-      <div class="gridItem" :style="`background:${item.color};`" v-for="(item, index) in degreeList" :key="index">
+      <div class="gridItem" :style="`background:${item.color};`" v-for="(item, index) in emotionList" :key="index">
         <div class="time">
-          <span class="number">5</span>
+          <span class="number">{{ item.days }}</span>
           <span>天</span>
         </div>
-        <div class="title">{{ item.name }}{{ emotionList[emotionActive].name }}倾向</div>
+        <div class="title">{{ item.text }}</div>
       </div>
     </div>
     <div class="label">
@@ -153,9 +154,14 @@
 <script>
 import DateSwitch from '@/components/DateSwitch.vue';
 import { format, startOfMonth, endOfMonth } from 'date-fns';
+import ToastService from '@/services/toast-service';
+import { /* EmotionModel, */ PsyBaseUrl } from '@/config/models';
+import axios from 'axios';
+import EchartBox from '@/components/EchartBox';
 export default {
   components: {
-    DateSwitch
+    DateSwitch,
+    EchartBox
   },
   data() {
     return {
@@ -166,15 +172,18 @@ export default {
       signChart: null,
       stepChart: null,
       calorieChart: null,
-      emotionList: [
+      psyList: [
         {
-          name: '疲劳'
+          name: '疲劳',
+          type: 3
         },
         {
-          name: '压力'
+          name: '压力',
+          type: 1
         },
         {
-          name: '焦虑'
+          name: '抑郁',
+          type: 2
         }
       ],
       degreeList: [
@@ -251,33 +260,56 @@ export default {
       upImg: require('@/assets/today/icons/up.png'),
       downImg: require('@/assets/today/icons/down.png'),
       date: '',
-      monthDate: {}
+      monthDate: {},
+      dateList: [],
+      emotionData: [],
+      xAxisData: [], //图表x轴展示的数据
+      echarts: null,
+      signCurrent: 0,
+      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()),
+      uid: '2024010809384143241',
+      // 7天和30天最大数据列表
+      weekAndMonData: [],
+      weekList: [],
+      startDate: '', //接口需要的开始时间
+      endDate: '', //接口需要的结束时间
+      currentEmoName: '', //当前情绪名称
+      emotionList: [],
+      weekAndMonthSeries: null,
+      emoType: '1'
     };
   },
-  created() {},
+  created() {
+    this.emoName = this.psyList[this.emotionActive].name;
+    this.initEchartText();
+    /* this.getPsychologiclData('', '2023-11-21', '2023-12-21'); */
+  },
   mounted() {
     this.initData();
   },
   watch: {
-    active(val) {
+    /*  active(val) {
       console.log(val);
-      this.$nextTick(() => {
-        this.initData();
-        this.initEmotionChart();
-        this.initSignChart();
-      });
-    },
+      let currentDate = new Date();
+    }, */
     emotionActive(val) {
       console.log(val);
-      this.$nextTick(() => {
+      /* this.$nextTick(() => {
         this.initEmotionChart();
-      });
+      }); */
     },
     signActive(val) {
       console.log(val);
-      this.$nextTick(() => {
+      /*  this.$nextTick(() => {
         this.initSignChart();
-      });
+      }); */
     }
   },
   computed: {
@@ -311,18 +343,540 @@ export default {
         }
       }
       return list;
+    },
+    defaultOptions() {
+      return {
+        time: {
+          useUTC: false
+        },
+        grid: {
+          show: true,
+          borderWidth: 0,
+          top: '3%',
+          left: '1%',
+          right: '3%',
+          bottom: '15%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            show: false
+          },
+          textStyle: {
+            fontSize: 10
+          },
+          axisTick: {
+            show: false
+          },
+          splitLine: {
+            show: false,
+            lineStyle: {
+              color: '#ddd',
+              width: 2
+            }
+          },
+          nameLocation: 'center',
+          axisLabel: {
+            show: true,
+            fontSize: 12,
+            showMinLabel: true, //显示最小值
+            showMaxLabel: true //显示最大值
+          },
+          data: this.xAxisData
+        },
+        dataZoom: [
+          /*  {
+                        type: "inside",
+                        start: 0,
+                        end: 100,
+                    }, */
+          {
+            start: 0,
+            end: 100,
+            textStyle: {
+              color: '#FFF',
+              fontSize: 14
+            },
+            show: true,
+            height: 20,
+            bottom: 4,
+            handleStyle: {
+              borderWidth: 1,
+              borderCap: 'square'
+            }
+          }
+        ],
+        tooltip: {
+          trigger: 'axis',
+          textStyle: {
+            fontSize: 14,
+            align: 'center'
+          },
+          formatter: function (params) {
+            return params[0].marker + params[0].name + '</br>' + params[0].value;
+          }
+        },
+        yAxis: {
+          type: 'value',
+          max: 100,
+          min: 0,
+          interval: 20,
+          splitNumber: 1,
+          boundaryGap: ['5%', '5%'],
+          nameTextStyle: {
+            fontSize: 13
+          },
+          alignTicks: false,
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            show: true,
+            fontSize: 13
+          },
+          splitLine: {
+            show: false,
+            lineStyle: {
+              color: '#ddd',
+              width: 1
+            }
+          }
+        },
+        series: [
+          {
+            name: `无${this.emoName}倾向`,
+            type: 'line',
+            padding: 5,
+            smooth: true,
+            data: this.emotionData,
+            symbol: 'circle',
+            symbolSize: 10,
+            itemStyle: {
+              color: '#fff',
+              borderWidth: 2
+            },
+            lineStyle: {
+              width: 6,
+              type: 'solid',
+              color: '#189b3b'
+            }
+          },
+          {
+            name: `轻度${this.emoName}倾向`,
+            type: 'line',
+            data: ''
+          },
+          {
+            name: `中度${this.emoName}倾向`,
+            type: 'line',
+            data: ''
+          },
+          {
+            name: `重度${this.emoName}倾向`,
+            type: 'line',
+            data: ''
+          }
+        ]
+      };
+    },
+    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' }
+        ]
+      };
     }
   },
   methods: {
+    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: ''
+        }
+      ];
+    },
+    // 获取情绪数据
+    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(() => {
+          ToastService.clear();
+        });
+    },
+    getPostDate(dateNow, intervalDays, bolPastTime) {
+      let oneDayTime = 24 * 60 * 60 * 1000;
+      let list = [];
+      let lastDay;
+
+      if (bolPastTime == true) {
+        lastDay = new Date(dateNow.getTime() - intervalDays * oneDayTime);
+        list.push(this.formateDate(lastDay));
+        list.push(this.formateDate(dateNow));
+      } else {
+        lastDay = new Date(dateNow.getTime() + intervalDays * oneDayTime);
+        list.push(this.formateDate(dateNow));
+        list.push(this.formateDate(lastDay));
+      }
+      return list;
+    },
     updateDate(value) {
       console.log('组件原始值', value);
-      this.date = this.active == 0 ? value.replace('~', '-') : value;
+      this.date = value;
+      console.log('this.date', this.date);
       if (this.active == 1) {
         this.getMonthStaEnd(this.date);
+        this.getPsychologiclData('', this.monthDate.start, this.monthDate.end);
+      } else {
+        this.getPsychologiclData('', value.start, value.end);
       }
-
       console.log('接口所需要的值', this.date, '如果是月', this.monthDate);
     },
+    formateDate(time) {
+      let year = time.getFullYear();
+      let month = time.getMonth() + 1;
+      let day = time.getDate();
+      if (month < 10) {
+        month = '0' + month;
+      }
+      if (day < 10) {
+        day = '0' + day;
+      }
+      return year + '-' + month + '-' + day + '';
+    },
+    // 计算结果采用哪种颜色
+    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);
+    },
     getMonthStaEnd(value) {
       const dateObj = {};
       const start = startOfMonth(value);
@@ -333,9 +887,9 @@ export default {
     },
     initData() {
       //初始化图表
-      if (!this.emotionChart) {
+      /* if (!this.emotionChart) {
         this.emotionChart = this.$echarts.init(document.getElementById('emotionChart'));
-      }
+      } */
       if (!this.signChart) {
         this.signChart = this.$echarts.init(document.getElementById('signChart'));
       }
@@ -345,9 +899,8 @@ export default {
       if (!this.calorieChart) {
         this.calorieChart = this.$echarts.init(document.getElementById('calorieChart'));
       }
-
       //渲染图表
-      this.initEmotionChart();
+      /* this.initEmotionChart(); */
       this.initSignChart();
     },
     initEmotionChart() {
@@ -808,8 +1361,16 @@ export default {
 
       return option;
     },
-    onEmotionClick(index) {
+    onEmotionClick(item, index) {
       this.emotionActive = index;
+      this.emoName = item.name;
+      this.emoType = item.type;
+      if (this.active == 1) {
+        this.getMonthStaEnd(this.date);
+        this.getPsychologiclData('', this.monthDate.start, this.monthDate.end);
+      } else {
+        this.getPsychologiclData('', this.date.start, this.date.end);
+      }
       // 情绪选项变化重新渲染图表
     },
     onSignClick(index) {
@@ -904,6 +1465,13 @@ export default {
       font-size: 30px;
     }
   }
+  .echart-container {
+    flex: 1;
+    position: relative;
+    min-height: 600px;
+    background-color: #fff;
+    padding: 0 20px;
+  }
   .ChatBox {
     overflow: hidden;
     width: calc(100vw - 60px);

src/views/insight/monthReport.vue

@@ -2,7 +2,7 @@
 <template>
   <div class="pageContent monthReport">
     <NavBar title="月报" @on-click-left="onNavBack" right-text="历史"> </NavBar>
-    <div class="periodSwitch">
+    <!-- <div class="periodSwitch">
       <div class="arrow arrowLeft">
         <van-icon name="arrow-left"></van-icon>
       </div>
@@ -10,7 +10,7 @@
       <div class="arrow arrowRight">
         <van-icon name="arrow"></van-icon>
       </div>
-    </div>
+    </div> -->
 
     <div class="periodNav">
       <div
@@ -30,12 +30,12 @@
           <span>检测次数：15次</span>
         </div>
       </div>
-      <div class="label history">
+      <!-- <div class="label history">
         <div class="left"></div>
         <div class="right">
           <span>历史监测</span>
         </div>
-      </div>
+      </div> -->
       <div class="pie-chart-con">
         <div class="pie-chart-left">
           <div id="pieChart" ref="pieChart"></div>
@@ -960,7 +960,7 @@ export default {
 <style scoped lang="scss">
 @import './include.scss';
 .monthReport {
-  padding-top: 50px;
+  padding-top: 100px;
 
   .periodNav {
     display: flex;
@@ -1069,7 +1069,7 @@ export default {
     width: 100%;
     justify-content: space-between;
     align-items: center;
-    padding: 40px 0px;
+    /* padding: 50px 0px; */
     padding-bottom: 30px;
 
     .timearea {

src/views/login/login.vue

@@ -166,7 +166,7 @@ export default {
     onWxAutoLogin() {
       let reqBody = {
         appId: AppId,
-        openId: /* this.$store.getters.openId || */ 'odcaWxCyeDHFpa3xpnQukqIcWvg0'
+        openId: /* this.$store.getters.openId || */ 'o7Z9t0zyOyZxojWy0VwsLNChddzs'
       };
       APIUser.wxAutoLogin(reqBody)
         .then(res => {
@@ -176,7 +176,7 @@ export default {
               this.$store.commit('authToken', item.authToken);
               this.$store.commit('userId', item.userId);
               this.$store.commit('code', '');
-              /* this.$store.commit('openId', item.wxOpenId || ''); */
+              this.$store.commit('openId', item.wxOpenId || '');
               NotifyService.notify({ message: '登录成功！正在为您跳转...', type: 'success' });
               this.$store.commit('isLogin', 'true');
               setTimeout(() => {
@@ -203,7 +203,7 @@ export default {
       let reqBody = {
         loginName: /* this.phone */ '18664272743',
         password: /* this.password */ '123456',
-        loginCode: /* this.$store.getters.openId */ 'odcaWxCyeDHFpa3xpnQukqIcWvg0',
+        loginCode: /* this.$store.getters.openId */ 'ofTDa6FWgxD-HKoeYtJcrr_9StlE',
         appId: AppId
       };
       APIUser.wxLogin(reqBody)

src/views/myself/index.vue

@@ -6,15 +6,15 @@
       <div class="banner">
         <div class="top">
           <div class="avatar">
-            <img src="../../assets/myself/4_62.png" alt="" />
+            <img :src="userInfos.imagePath" alt="" />
           </div>
           <div class="nick-name">
             <span>{{ userInfos.username }}</span>
           </div>
         </div>
-        <div class="bottom">
+        <!-- <div class="bottom">
           <span>已绑定{{ userInfos.deviceNumber }}台设备</span>
-        </div>
+        </div> -->
       </div>
       <div class="submenu device-manage">
         <SubmenuList :title="device.title" :list="device.list" rounded>
@@ -63,12 +63,14 @@ import APIUser from '@/api/user';
 import APIDevice from '@/api/device';
 import ToastService from '@/services/toast-service';
 import { isNotNull } from '@/services/utils-service';
+import APIHealthUser from '@/api/health-user';
 export default {
   components: { /* NavBar,  */ SubmenuList },
   data() {
     return {
       userInfos: {},
       listData: [],
+      personList: [],
       family: {
         title: '亲情沟通',
         list: [
@@ -98,9 +100,9 @@ export default {
       device: {
         title: '孩子管理',
         list: [
-          { imgPath: require('../../assets/myself/4_62.png'), text: '孩子1', bgColor: 'green' },
+          /* { imgPath: require('../../assets/myself/4_62.png'), text: '孩子1', bgColor: 'green' },
           { imgPath: require('../../assets/myself/4_62.png'), text: '孩子2', bgColor: 'green' },
-          { imgPath: require('../../assets/myself/4_62.png'), text: '孩子3', bgColor: 'green' }
+          { imgPath: require('../../assets/myself/4_62.png'), text: '孩子3', bgColor: 'green' } */
         ]
       },
       studyHelper: {
@@ -128,7 +130,7 @@ export default {
           },
           {
             imgPath: require('../../assets/myself/4_107.png'),
-            text: '支付密码修改',
+            text: '支付密码',
             bgColor: this.$green,
             showType: 'newPage',
             routerName: 'changePayPassword'
@@ -222,6 +224,7 @@ export default {
   mounted() {
     this.getUserInfos();
     this.getDeviceList();
+    this.getPersonList();
   },
   methods: {
     getUserInfos() {
@@ -289,6 +292,35 @@ export default {
           ToastService.clear();
         });
     },
+    getPersonList() {
+      APIHealthUser.personList()
+        .then(res => {
+          console.log('人员列表', res);
+          const list = res.data.data;
+          if (list) {
+            // { imgPath: require('../../assets/myself/4_62.png'), text: '孩子1', bgColor: 'green' }
+            this.device.list = list.map(item => {
+              return {
+                imgPath: item.avatar,
+                text: item.nickName,
+                bgColor: 'green',
+                ...item
+              };
+            });
+            let personIdIndex = list.findIndex(item => {
+              return item.id == this.$store.getters.personId;
+            });
+            if (personIdIndex < 0) {
+              this.$store.commit('personId', list[0].id);
+            }
+          }
+          this.getPersonInfo();
+        })
+        .catch(() => {
+          this.showOverlay = false;
+          this.isPageShow = true;
+        });
+    },
     goMap() {
       this.$router.push({
         name: 'location'

src/views/optimize/index.vue

@@ -4,12 +4,8 @@
     <!-- 专家介绍 -->
     <div class="expert-box">
       <van-swipe indicator-color="white">
-        <van-swipe-item v-for="(item, index) in expertList" :key="index" @click="goExperts(item.id)">
-          <img src="@/assets/optimize/images/3_08_2.png" />
-          <div class="summary">
-            <h4>{{ item.name }}</h4>
-            <p>{{ item.title }}</p>
-          </div>
+        <van-swipe-item v-for="(item, index) in expertImages" :key="index" @click="goExperts(item.id)">
+          <img v-lazy="item.image" />
           <!-- <p>了解详情</p> -->
         </van-swipe-item>
       </van-swipe>
@@ -18,13 +14,23 @@
     <div class="parenting">
       <div class="title">
         <p>养育话题</p>
-        <a href="/">查看更多</a>
+        <a>查看更多</a>
       </div>
       <ul>
-        <li v-for="(item, index) in talkList" :key="index" @click="goTalk(item.id)">
-          <img :src="item.image" :alt="item.name" />
-          <p>{{item.name}}</p>
-          <span>{{item.summary}}</span>
+        <li>
+          <img src="@/assets/optimize/images/3_20.png" alt="拖延症" />
+          <p>拖延症</p>
+          <span>L1入门 12分钟</span>
+        </li>
+        <li>
+          <img src="@/assets/optimize/images/3_22.png" alt="沉迷网络" />
+          <p>沉迷网络</p>
+          <span>L1入门 40分钟</span>
+        </li>
+        <li>
+          <img src="@/assets/optimize/images/3_24.png" alt="不自信" />
+          <p>不自信</p>
+          <span>L1入门 25分钟</span>
         </li>
       </ul>
     </div>
@@ -35,16 +41,27 @@
       </div>
       <div class="main">
         <ul>
-          <li v-for="(item, index) in campList" :key="index" @click="goTrainingcamp(item.id)">
+          <li @click="goTrainingcamp(1)">
             <div class="left">
-              <p>{{item.name}}</p>
-              <span>{{item.summary}}</span>
+              <p>情绪管理控制</p>
+              <span>入门易学</span>
               <div>
-                <h5>会员价 ¥{{item.vipPrice}}</h5>
-                <s>¥{{item.price}}</s>
+                <h5>会员价 ¥998</h5>
+                <s>¥1288</s>
               </div>
             </div>
-            <img :src="item.cover" />
+            <img src="@/assets/today/images/2_42.png" />
+          </li>
+          <li @click="goTrainingcamp(2)">
+            <div class="left">
+              <p>情绪管理控制</p>
+              <span>入门易学</span>
+              <div>
+                <h5>会员价 ¥998</h5>
+                <s>¥1288</s>
+              </div>
+            </div>
+            <img src="@/assets/today/images/2_42.png" />
           </li>
         </ul>
       </div>
@@ -56,29 +73,55 @@
       </div>
       <div class="select">
         <ul>
-          <li v-for="(item, index) in expertList" :key="index" @click="switchPsychology(item.id)">
+          <li>
+            <img src="@/assets/optimize/icons/3_55.png" alt="" />
+          </li>
+          <li>
+            <img src="@/assets/optimize/icons/3_58.png" alt="" />
+          </li>
+          <li>
+            <img src="@/assets/optimize/icons/3_62.png" alt="" />
+          </li>
+          <li>
+            <img src="@/assets/optimize/icons/3_66.png" alt="" />
+          </li>
+          <li>
             <img src="@/assets/optimize/icons/3_55.png" alt="" />
           </li>
+          <li>
+            <img src="@/assets/optimize/icons/3_58.png" alt="" />
+          </li>
+          <li>
+            <img src="@/assets/optimize/icons/3_62.png" alt="" />
+          </li>
+          <li>
+            <img src="@/assets/optimize/icons/3_66.png" alt="" />
+          </li>
         </ul>
       </div>
       <div class="main">
         <div class="top">
-          <p>{{psychologyInfo.name}}</p>
-          <span>{{psychologyInfo.title}}</span>
+          <p>黛建松</p>
+          <span>清华大学心理学教授</span>
           <img src="@/assets/optimize/images/3_48.png" alt="" />
         </div>
         <div class="bottom">
-          <!-- <h4>700人次<span>咨询</span>，<span>从业</span>8年</h4> -->
-          <h4>{{psychologyInfo.seek}}</h4>
+          <h4>700人次<span>咨询</span>，<span>从业</span>8年</h4>
           <ul>
-            <li v-for="(item, index) in psychologyInfo.labels" :key="index">{{item}}</li>
+            <li>焦虑</li>
+            <li>抑郁</li>
+            <li>儿童心理</li>
+            <li>亲子关系</li>
+            <li>青春期心理</li>
+            <li>家庭关系</li>
+            <li>压力管理</li>
           </ul>
           <div>
             <h5>
               <img src="@/assets/optimize/icons/location.png" alt="" />
-              <span>{{psychologyInfo.address}}</span>
+              <span>郴州市苏仙区</span>
             </h5>
-            <p>¥{{psychologyInfo.price}}</p>
+            <p>¥2480</p>
           </div>
         </div>
       </div>
@@ -90,8 +133,8 @@
 
 <script>
 import Vue from 'vue';
-import APIOptimize from '@/api/optimize';
 import TabBar from '@/components/TabBar';
+import expertImage from '@/assets/optimize/images/3_08.png';
 import { Swipe, SwipeItem, Lazyload } from 'vant';
 Vue.use(Lazyload);
 Vue.use(Lazyload, {
@@ -106,45 +149,21 @@ export default {
   },
   data() {
     return {
-      expertList: [],
-      talkList: [],
-      campList: [],
-      psychologyInfo: {}
+      expertImages: [
+        {
+          id: 1,
+          image: expertImage
+        },
+        {
+          id: 2,
+          image: expertImage
+        }
+      ]
     };
   },
-  created() {
-    this.init();
-  },
+  created() {},
   mounted() {},
   methods: {
-    init() {
-      // 专家列表
-      APIOptimize.getExpertList(0)
-        .then(res => {
-          this.expertList = res.data.data
-          this.psychologyInfo = this.expertList[0]
-          this.psychologyInfo.labels = this.psychologyInfo.labels.split('|');
-        })
-        .catch(e => {
-          console.log(e);
-        })
-      // 专家详情
-      APIOptimize.getTalkList(0)
-        .then(res => {
-          this.talkList = res.data.data
-        })
-        .catch(e => {
-          console.log(e);
-        })
-      // 训练营列表
-      APIOptimize.getCampList(0)
-        .then(res => {
-          this.campList = res.data.data
-        })
-        .catch(e => {
-          console.log(e);
-        })
-    },
     goExperts(id) {
       this.$router.push({
         name: 'experts',
@@ -153,14 +172,6 @@ export default {
         }
       });
     },
-    goTalk(id) {
-      this.$router.push({
-        name: 'talk',
-        query: {
-          id: id
-        }
-      });
-    },
     goTrainingcamp(id) {
       this.$router.push({
         name: 'trainingcamp',
@@ -168,12 +179,6 @@ export default {
           id: id
         }
       });
-    },
-    switchPsychology(id) {
-      this.psychologyInfo = this.expertList.find(item => item.id == id);
-      if ( typeof this.psychologyInfo.labels == 'string' ) {
-        this.psychologyInfo.labels = this.psychologyInfo.labels.split('|');
-      }
     }
   }
 };

src/views/today/emotionDetails.vue

@@ -1,6 +1,34 @@
 <template>
   <div class="psychological-container">
-    <NavBar title="心理监测" @on-click-left="onNavBack" right-text="历史" @on-click-right="onHistory"> </NavBar>
+    <van-nav-bar
+      title="心理呵护"
+      @click-left="onNavBack"
+      right-text="历史"
+      @click-right="onHistory"
+      left-text="返回"
+      left-arrow
+    >
+    </van-nav-bar>
+    <!-- 建模进度 -->
+    <div class="modeling" v-if="isShowProgress">
+      <div class="modeling-main" @click="onNavModel">
+        <div class="top">
+          <div class="left">
+            <img class="img" src="@/assets/today/icons/2_25.png" />
+          </div>
+          <div class="right">
+            <p><span class="tips">提示：</span>建模中，请保持佩戴，进入查看</p>
+          </div>
+        </div>
+        <div class="bottom">
+          <span class="font-26">建模进度</span>
+          <div class="progress-bar">
+            <div class="progress" :style="{ width: progress * 100 + '%' }"></div>
+          </div>
+          <span class="progress-text">{{ progress * 100 }}%</span>
+        </div>
+      </div>
+    </div>
     <div class="tab-bar">
       <div class="date-tab-con">
         <div class="date-tab-list">
@@ -19,11 +47,14 @@
     </div>
 
     <div class="main" v-show="current !== 3">
-      <div class="tab-bar">
+      <!-- <div class="tab-bar">
         <div class="date-tab-con">
           <div class="date-tab-list">
             <div
-              :class="['date-tab-item', { active: current === index, notClick: false }]"
+              :class="[
+                'date-tab-item',
+                { active: current === index, notClick: false },
+              ]"
               @click="onTabClick(item.value, index)"
               v-for="(item, index) in dateList"
               :key="index"
@@ -34,15 +65,15 @@
             </div>
           </div>
         </div>
-      </div>
+      </div> -->
       <div class="top">
         <!-- 日期选择 -->
         <!-- 标题 -->
         <div class="title">
           <div class="title-left">{{ titleLeft }}<van-icon name="question-o" @click="onHelp" /></div>
           <!-- <div class="title-right" v-show="currentDays === 0">
-            <p @click="onHistory">历史监测</p>
-          </div> -->
+              <p @click="onHistory">历史监测</p>
+            </div> -->
         </div>
         <!-- 日历 -->
 
@@ -147,7 +178,7 @@
           </div>
         </div>
       </div>
-      <div class="line"></div>
+      <!-- <div class="line"></div> -->
       <!-- 底部 -->
       <div class="bottom">
         <div class="echart-container">
@@ -182,7 +213,9 @@
             <div class="title">
               <span class="title-reminder">结果解读</span>
 
-              <p class="title-emo" :style="{ color: currentColor }">{{ result }}</p>
+              <p class="title-emo" :style="{ color: currentColor }">
+                {{ result }}
+              </p>
 
               <span class="font-28"
                 ><!-- 继续保持积极乐观，培养健康的生活习惯，预防消极事件对情绪带来的不良影响。 -->{{ advice }}</span
@@ -248,12 +281,14 @@
                 <div class="overall">
                   <div class="left">
                     <span>总评</span>
-                    <p :style="{ color: calcResultColor(item.summaryLevel) }">{{ item.summary }}</p>
+                    <p :style="{ color: calcResultColor(item.summaryLevel) }">
+                      {{ item.summary }}
+                    </p>
                   </div>
                 </div>
                 <!-- <div class="trend">
-                                    <p>( <span>无抑郁倾向</span><span>5%</span>，<span>轻度抑郁倾向</span> <span>5%</span> )</p>
-                                </div>-->
+                                      <p>( <span>无抑郁倾向</span><span>5%</span>，<span>轻度抑郁倾向</span> <span>5%</span> )</p>
+                                  </div>-->
               </div>
             </div>
 
@@ -274,7 +309,7 @@
         <div class="item science-tips first" v-if="emoType === 2">
           <div class="tips"><h5>小科普</h5></div>
           <p>
-            症是一抑郁种心理疾病，严重时可发展为精神障碍。然而当我们体会到了痛苦、悲伤、和郁闷等负面情绪，并不意味着我们就是抑郁症。日常的短时的喜、怒、哀、乐，都是正常的情绪变化，然而长期的低落情绪、兴趣缺失等可能会让我们有抑郁的风险。
+            抑郁症是一抑郁种心理疾病，严重时可发展为精神障碍。然而当我们体会到了痛苦、悲伤、和郁闷等负面情绪，并不意味着我们就是抑郁症。日常的短时的喜、怒、哀、乐，都是正常的情绪变化，然而长期的低落情绪、兴趣缺失等可能会让我们有抑郁的风险。
           </p>
         </div>
         <div class="item">
@@ -290,21 +325,23 @@
     </van-popup>
   </div>
 </template>
-
-<script>
+  
+  <script>
 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';
+import APIPsy from '@/api/psychological';
 export default {
   name: 'psychological-monitor',
   components: {
-    NavBar,
     EchartBox
   },
   data() {
     return {
+      // 进度条
+      progress: 0,
+      isShowProgress: false,
       // 日期选择标签
       dateList: [
         { name: 'today', text: '今天', value: 0 },
@@ -332,42 +369,42 @@ export default {
       //饼状图右边数据,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"
-                } */
+                      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"
+                  } */
       ],
       // 情绪状态列表
       statisticsList: [
         /*  { label: "最大值", value: "75", time: "08:15" },
-                { label: "最小值", value: "40", time: "10:15" },
-                { label: "最近值", value: "50", time: "18:15" } */
+                  { label: "最小值", value: "40", time: "10:15" },
+                  { label: "最近值", value: "50", time: "18:15" } */
       ],
       // 周报-情绪计算
       emotionList: [
         /*  { days: "5", text: "无情绪倾向", color: "#179b3b" },
-                { days: "4", text: "轻度情绪倾向", color: "#8dc21f" },
-                { days: "3", text: "中度情绪倾向", color: "#2ea7e0" },
-                { days: "2", text: "重度情绪倾向", color: "#ACACAC" } */
+                  { days: "4", text: "轻度情绪倾向", color: "#8dc21f" },
+                  { days: "3", text: "中度情绪倾向", color: "#2ea7e0" },
+                  { days: "2", text: "重度情绪倾向", color: "#ACACAC" } */
       ],
       // 弹窗-日历是否显示
       calendarDialogShow: false,
@@ -455,10 +492,10 @@ export default {
         grid: {
           show: true,
           borderWidth: 0,
-          top: '3%',
-          left: '1%',
-          right: '3%',
-          bottom: '15%',
+          top: '10%',
+          left: '2%',
+          right: '6%',
+          bottom: '20%',
           containLabel: true
         },
         xAxis: {
@@ -476,7 +513,7 @@ export default {
             show: false,
             lineStyle: {
               color: '#ddd',
-              width: 2
+              width: 4
             }
           },
           nameLocation: 'center',
@@ -490,10 +527,10 @@ export default {
         },
         dataZoom: [
           /*  {
-                        type: "inside",
-                        start: 0,
-                        end: 100,
-                    }, */
+                          type: "inside",
+                          start: 0,
+                          end: 100,
+                      }, */
           {
             start: 0,
             end: 100,
@@ -503,9 +540,9 @@ export default {
             },
             show: true,
             height: 20,
-            bottom: 4,
+            bottom: 8,
             handleStyle: {
-              borderWidth: 1,
+              borderWidth: 4,
               borderCap: 'square'
             }
           }
@@ -513,7 +550,7 @@ export default {
         tooltip: {
           trigger: 'axis',
           textStyle: {
-            fontSize: 14,
+            fontSize: 16,
             align: 'center'
           },
           formatter: function (params) {
@@ -550,14 +587,14 @@ export default {
           {
             name: `无${this.emoName}倾向`,
             type: 'line',
-            padding: 5,
+            padding: 10,
             smooth: true,
             data: this.emotionData,
             symbol: 'circle',
             symbolSize: 10,
             itemStyle: {
               color: '#fff',
-              borderWidth: 2
+              borderWidth: 4
             },
             lineStyle: {
               width: 6,
@@ -592,7 +629,7 @@ export default {
         tooltip: {
           trigger: 'item',
           textStyle: {
-            fontSize: 14
+            fontSize: 16
           },
           position: 'right'
         },
@@ -608,9 +645,9 @@ export default {
             avoidLabelOverlap: false,
             startAngle: 270, // 设置逆时针渲染
             itemStyle: {
-              borderRadius: 5,
+              borderRadius: 10,
               borderColor: '#fff',
-              borderWidth: 2,
+              borderWidth: 4,
               fontSize: 16
             },
             label: {
@@ -666,16 +703,16 @@ export default {
       /* return `正常连续佩戴手表，每半小时计算一个${this.emoName}分值，睡眠期间不进行计算。` */
     },
     title1() {
-      return EmotionModel[this.params.name].title1;
+      return EmotionModel[this.currentEmoName].title1;
     },
     article1() {
-      return EmotionModel[this.params.name].article1;
+      return EmotionModel[this.currentEmoName].article1;
     },
     title2() {
-      return EmotionModel[this.params.name].title2;
+      return EmotionModel[this.currentEmoName].title2;
     },
     article2() {
-      return EmotionModel[this.params.name].article2;
+      return EmotionModel[this.currentEmoName].article2;
     },
     // 当前情绪颜色
     currentColor() {
@@ -709,16 +746,51 @@ export default {
     this.initEchartText();
     this.getCalendarData();
     this.getPsychologiclData();
-    this.createList();
+    this.getProgress();
     //this.getWeekResult();
   },
   mounted() {
     this.initEchart();
     /* this.current = Number(this.$store.getters.tabClick) || 0; */
     /* this.currentDays = this.calcDaysByTabClick(Number(this.$store.getters.tabClick)); */
-    /* this.psyCurrent = this.calcPsyTabindex(EmotionModel[this.params.name].type); */
+    this.psyCurrent = this.calcPsyTabindex(EmotionModel[this.params.name].type);
   },
   methods: {
+    onNavModel() {
+      this.$router.push({
+        name: 'psychologicalModeling',
+        query: {
+          uid: this.uid
+        }
+      });
+    },
+    getProgress() {
+      let reqParams = {
+        uid: this.uid
+      };
+      APIPsy.getProgress(reqParams)
+        .then(res => {
+          const re = res.data;
+          if (re.success) {
+            if (re.response && re.response.state === -1) {
+              // 异常
+              this.isShowProgress = false;
+            } else if (re.response && re.response.initScaleState === 1 && re.response.progress === 1) {
+              // 已完成
+              this.isShowProgress = false;
+            } else {
+              // 未完成
+              this.isShowProgress = true;
+            }
+            this.progress = re.response.progress;
+          } else {
+            this.isShowProgress = false;
+          }
+        })
+        .catch(() => {
+          this.isShowProgress = false;
+        });
+    },
     createList() {
       // 模拟数据
       this.emotionDataNew = [];
@@ -813,11 +885,12 @@ export default {
             let data = res.data.response;
             // const mergedArr = [...new Set([...arr1, ...arr2, ...arr3])];
             /* let name = this.params.name.charAt(0).toUpperCase()+ this.params.name.slice(1); */
-            let currentName = this.params.name;
+            let currentName = this.emoType;
+            console.log('currentName', currentName);
             let list = [];
-            if (currentName === 'stress') {
+            if (currentName === 1) {
               list = data.Stress;
-            } else if (currentName === 'depression') {
+            } else if (currentName === 2) {
               list = data.Depression;
             } else {
               list = data.Tiredness;
@@ -913,7 +986,7 @@ export default {
                   ? this.$dayjs(data.MaxDesc).format('HH:mm')
                   : this.$dayjs(data.MaxDesc).format('MM/DD HH:mm')
                 : '',
-              bgColor: '#ff5f8b'
+              bgColor: this.calcResultColor(data.MaxLevel)
             };
             let Min = {
               label: '最小值',
@@ -923,17 +996,17 @@ export default {
                   ? this.$dayjs(data.MinDesc).format('HH:mm')
                   : this.$dayjs(data.MinDesc).format('MM/DD HH:mm')
                 : '',
-              bgColor: '#189b3b'
+              bgColor: this.calcResultColor(data.MinLevel)
             };
             /* 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')
-                : ''
-            }; */
+                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,
@@ -942,7 +1015,7 @@ export default {
                   ? this.$dayjs(data.CurrentDesc).format('HH:mm')
                   : this.$dayjs(data.CurrentDesc).format('MM/DD HH:mm')
                 : '',
-              bgColor: '#2ea7e0'
+              bgColor: this.calcResultColor(data.CurrentLevel)
             };
             this.statisticsList.push(Max);
             this.statisticsList.push(Min);
@@ -978,7 +1051,9 @@ export default {
               return {
                 value: item.Value,
                 itemStyle: {
-                  borderColor: this.calcResultColor(item.Level)
+                  color: this.calcResultColor(item.Level),
+                  borderColor: this.calcResultColor(item.Level),
+                  borderWidth: 3
                 }
               };
             });
@@ -1031,7 +1106,7 @@ export default {
                       }
                     );
                     if (rectShape) {
-                      rectShape.r = [10];
+                      rectShape.r = [20];
                     }
                     return (
                       rectShape && {
@@ -1077,6 +1152,9 @@ export default {
               // 点击提示此时为空
               this.defaultOptions.tooltip = {
                 trigger: 'axis',
+                textStyle: {
+                  fontSize: 16
+                },
                 formatter: function (params) {
                   return (
                     params[0].marker +
@@ -1130,7 +1208,7 @@ export default {
         {
           name: ``,
           type: 'line',
-          padding: 5,
+          padding: 10,
           data: this.emotionData,
           symbol: 'circle',
           symbolSize: 12, // 拐点圆的大小
@@ -1174,9 +1252,9 @@ export default {
       const currentDate = this.$dayjs(new Date()).format('YYYY/MM/DD');
       day.className = 'custom-calendar';
       for (let h = 0; h < this.highlightDates.length; h++) {
-        if (this.highlightDates[h].Date === formatDate) {
+        if (this.highlightDates[h].Date == formatDate) {
           day.className = `highlight-border ${this.calcResultColor(this.highlightDates[h].SummaryLevel, true)}`;
-        } else if (formatDate === currentDate) {
+        } else if (formatDate == currentDate) {
           day.text = '今天';
         }
       }
@@ -1192,12 +1270,12 @@ export default {
     onTabClick(value, index) {
       this.current = index;
       this.currentDays = value;
-      this.$store.commit('tabClick', index);
+      /* 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.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) {
@@ -1208,8 +1286,8 @@ export default {
         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' */;
+        this.startDate = this.selectDate || this.$dayjs(currentDate).format('YYYY-MM-DD') /* '2023-11-21' */;
+        this.endDate = this.selectDate || this.$dayjs(currentDate).format('YYYY-MM-DD') /* '2023-11-21' */;
       } else if (value === 30) {
         // 30天
         this.defaultOptions.xAxis.data = this.xAxisData;
@@ -1230,13 +1308,13 @@ export default {
       this.emoName = EmotionModel[name].name;
       this.currentEmoName = name;
       this.emoType = EmotionModel[name].type;
-      console.log('this.currentDays', this.currentDays);
       if (this.currentDays === 49) {
         // 即点击了周报,此时调用获取周报接口
         this.getWeekResult();
       } else {
-        this.getPsychologiclData(this.startDate, this.endDate);
+        this.getPsychologiclData(this.selectDate, this.startDate, this.endDate);
       }
+      this.getCalendarData();
     },
     getCurrentMonthStaAndEnd(currentDate) {
       let list = [];
@@ -1291,10 +1369,10 @@ export default {
     // 初始化折线图表
     initEchart() {
       /*  if (this.echarts != null && this.echarts != '' && this.echarts != undefined) {
-        this.echarts.dispose();
-      }
-      this.echarts = this.$echarts.init(this.$refs.charts);
-      this.echarts.setOption(this.defaultOptions); */
+          this.echarts.dispose();
+        }
+        this.echarts = this.$echarts.init(this.$refs.charts);
+        this.echarts.setOption(this.defaultOptions); */
     },
     // 点击历史监测，打开日历
     onHistory() {
@@ -1309,6 +1387,9 @@ export default {
           : this.$dayjs(value).format('MM-DD');
       this.calendarDialogShow = false;
       this.selectDate = selectDate;
+      this.startDate = selectDate;
+      this.endDate = selectDate;
+      this.current = 0;
       this.getPsychologiclData(selectDate);
     },
     // 计算字体显示的颜色
@@ -1338,11 +1419,11 @@ export default {
           break;
         case 1:
           color = '#8dc21f';
-          className = 'mild';
+          className = 'mid';
           break;
         case 2:
           color = '#2ea7e0';
-          className = 'moderate';
+          className = 'severe';
           break;
         case 3:
           color = '#ff5f8b';
@@ -1404,22 +1485,23 @@ export default {
   }
 };
 </script>
-
+  
 <style lang="scss">
-.van-nav-bar .van-icon {
-  padding-left: 10px;
-}
-
-.calenddar-dialog {
-  overflow: scroll;
-}
 .calendar {
-  overflow: scroll;
+  height: 800px;
+
   .van-calendar {
-    height: 350px;
+    height: 400px;
+    overflow: scroll;
+
     .van-calendar__header {
       display: none;
     }
+    .van-calendar__days {
+      display: grid;
+      grid-template-columns: repeat(7, 1fr);
+    }
+
     .van-calendar__days .van-calendar__day {
       width: 27px;
       height: 27px;
@@ -1428,26 +1510,33 @@ export default {
       &.custom-calendar {
         width: 27px;
         height: 27px;
+        margin-left: 0 !important;
       }
+
       &.highlight-border {
         border: 1px solid #62bd48;
         width: 27px;
         height: 27px;
         border-radius: 50%;
+
         &.none {
           border: 1px solid #62bd48;
         }
+
         &.mild {
           border: 1px solid #8dc21f;
         }
+
         &.moderate {
           border: 1px solid #2ea7e0;
         }
+
         &.severe {
           border: 1px solid #ff5f8b;
         }
       }
     }
+
     .van-calendar__selected-day {
       width: 27px;
       height: 27px;
@@ -1457,6 +1546,7 @@ export default {
   }
 }
 </style>
-<style scoped lang="scss">
+  <style scoped lang="scss">
 @import './scss/emotion-details.scss';
 </style>
+  

src/views/today/scss/emotion-details.scss

@@ -1,12 +1,89 @@
 .psychological-container {
-  min-height: 100vh;
+  height: 100vh;
   overflow: hidden;
   background-color: #fff;
+
+
+  .calenddar-dialog {
+    overflow: scroll;
+  }
+
+
+  .modeling {
+    padding: 20px;
+    position: relative;
+
+    .modeling-main {
+      font-size: 32px;
+
+      .top {
+        display: flex;
+        justify-content: flex-start;
+        align-items: flex-start;
+        padding: 0 20px;
+
+        .left {
+          padding-right: 30px;
+        }
+
+        .right {
+          p {
+            font-size: 32px;
+            font-weight: 450;
+          }
+
+          .tips {
+            color: #edb21d;
+          }
+        }
+
+
+      }
+
+      .bottom {
+        padding: 20px 0;
+        padding-left: 80px;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+
+        .font-26 {
+          font-size: 28px;
+          color: #8b8b8b;
+        }
+
+        .progress-bar {
+          width: 370px;
+          height: 30px;
+          background-color: #eeeeee;
+          margin: 0 20px;
+          border-radius: 20px;
+
+          .progress {
+            height: 35px;
+            background-color: #638ee4;
+            border-radius: 20px;
+          }
+
+
+
+
+        }
+
+        .progress-text {
+          color: #638ee4;
+        }
+      }
+
+    }
+  }
+
   .tab-bar {
     padding: 20px;
     position: relative;
+
     .date-tab-con {
-      height: 50px;
+      height: 60px;
       display: flex;
       justify-content: flex-start;
       align-items: center;
@@ -15,6 +92,7 @@
       border-top-right-radius: 40px;
       border-bottom-left-radius: 40px;
       border-bottom-right-radius: 40px;
+
       .date-tab-list {
         display: flex;
         justify-content: space-around;
@@ -22,6 +100,7 @@
         color: #fff;
         flex: 1;
         height: 50px;
+
         .date-tab-item {
           position: relative;
           padding: 0 20px;
@@ -36,39 +115,46 @@
           img {
             height: 50px;
             width: 50px;
-            padding: 0 16px;
+            padding: 0 px2rem(16);
           }
+
           .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;
+    height: 60px;
     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;
@@ -76,6 +162,7 @@
         color: #fff;
         height: 50px;
         width: 100%;
+
         /* background-color: red; */
         .psy-tab-item {
           position: relative;
@@ -87,6 +174,7 @@
           border-radius: 40px;
           font-weight: bold;
           @include center();
+
           &.active {
             color: #fff;
             background-color: $green;
@@ -95,59 +183,75 @@
       }
     }
   }
+
   .main {
     position: relative;
-    height: calc(100vh - 100px);
+    height: calc(100vh - 150px);
     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;
+          @include center();
+
           .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;
@@ -155,24 +259,29 @@
               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;
@@ -182,15 +291,118 @@
           }
         }
       }
+
+      .circle-con {
+        flex: 1;
+        padding: 20px 30px 20px 30px;
+        @include center();
+        flex-direction: column;
+
+        .out-circle {
+          position: relative;
+          z-index: 99;
+
+          .van-circle {
+            height: 200px !important;
+            width: 200px !important;
+          }
+
+          .circle-text {
+            height: 100%;
+            @include center();
+            font-size: 48px;
+            color: #333;
+
+            .left {
+              font-size: 76px;
+              padding: 0 10px;
+              font-weight: bold;
+            }
+
+            .right {
+              font-size: 23px;
+            }
+          }
+
+          .circle-white {
+            position: absolute;
+            top: -1.5px;
+            right: 41%;
+            height: 42px;
+            width: 42px;
+            border: 4px solid;
+            border-radius: 50%;
+            background: #fff;
+          }
+        }
+
+        .progress {
+          position: relative;
+          margin-top: 60px;
+          /*  height: px2rem(90); */
+          flex: 1;
+          width: 100%;
+          font-size: 30px;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+
+          .progress-circle {
+            position: absolute;
+            top: -10px;
+            left: 0;
+            height: 35px;
+            width: 35px;
+            background-color: #fff;
+            border-radius: 50%;
+            border: 10px solid;
+            z-index: 99;
+          }
+
+          .state-item {
+            width: 100%;
+
+            .state-line {
+              position: relative;
+              height: 30px;
+              font-size: 32px;
+
+              &.low {
+                border-top-left-radius: 10px;
+                border-bottom-left-radius: 10px;
+              }
+
+              &.blue {
+                background-color: $com_blue;
+              }
+
+              &.hight {
+                background-color: $com_red;
+                border-top-right-radius: 10px;
+                border-bottom-right-radius: 10px;
+              }
+            }
+
+            .state-text {
+              padding-top: 21px;
+              @include center();
+            }
+          }
+        }
+
+      }
+
       .statistics {
-        height: 100%;
-        padding: 10px 40px;
+
+        /* padding: 40px 40px; */
         .list {
+          padding: 40px 40px;
           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;
@@ -201,6 +413,7 @@
             border: 1px solid $border_color;
             border-radius: 40px;
             color: #fff;
+
             .top {
               font-size: 24px;
             }
@@ -215,77 +428,118 @@
           }
         }
       }
+
+      .tip {
+        display: flex;
+        justify-content: flex-start;
+        padding: 20px 40px;
+
+        img {
+          width: 29px;
+          height: 47px;
+          object-fit: contain;
+          margin-right: 30px;
+        }
+
+        p {
+          font-size: 24px;
+          color: #434144;
+          line-height: 1.5em;
+
+          span {
+            color: #edb21d;
+          }
+        }
+      }
     }
+
     .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;
         }
       }
+
       .line-gray {
         height: 22px;
         width: 100%;
         background-color: $lineGray;
         margin-top: 20px;
       }
+
       .result {
+        padding-bottom: 40px;
+
         .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;
+            margin-bottom: 60px;
+
             span {
               font-size: 36px;
               font-weight: bold;
             }
+
             .font-28 {
               font-weight: 400;
-              font-size: 26px;
+              font-size: 24px;
               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;
@@ -293,12 +547,15 @@
               }
             }
           }
+
           .title-text {
             padding: 68px 0 26px 30px;
           }
+
           .title-reminder {
             padding: 68px 0 0 0;
           }
+
           .friendly-reminder,
           .warm-reminder {
             display: flex;
@@ -308,53 +565,64 @@
             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;
+
                 .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;
@@ -365,13 +633,16 @@
         }
       }
     }
+
     &.report {
       position: relative;
       height: calc(100vh - 300px);
       overflow: scroll;
       background-color: #f5f5f5;
+
       .content {
         position: relative;
+
         .list {
           position: relative;
 
@@ -382,21 +653,26 @@
             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 {
@@ -407,24 +683,29 @@
                     line-height: 60px;
                   }
                 }
+
                 .title {
                   span {
                     padding-right: 40px;
                   }
+
                   p {
                     color: #282828;
                   }
                 }
+
                 .overall {
                   display: flex;
                   justify-content: space-between;
                   align-items: center;
+
                   .left {
                     p {
                       padding-left: 40px;
                       font-weight: bold;
                     }
                   }
+
                   .right {
                     img {
                       height: 30px;
@@ -432,12 +713,14 @@
                     }
                   }
                 }
+
                 .trend {
                   align-items: flex-start;
                   text-align: left;
                 }
               }
             }
+
             .right {
               img {
                 width: 18px;
@@ -445,15 +728,18 @@
               }
             }
           }
+
           &.no-data {
             height: calc(100vh - 200px);
             width: 100%;
             @include center();
             flex-direction: column;
+
             img {
               height: 220px;
               width: 350px;
             }
+
             p {
               color: #999;
               font-size: 32px;
@@ -468,17 +754,20 @@
   .title {
     font-size: 32px;
   }
+
   .van-popup {
     flex: 1;
-    max-height: 600px;
+    min-height: 600px;
     width: 100%;
     background-color: $background;
   }
+
   .popup {
     /*  height: 100%;
         width: 100%; */
     background-color: $background;
     padding: 40px;
+
     .item {
       flex: 1;
       padding: 20px;
@@ -487,16 +776,20 @@
       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;
@@ -510,11 +803,13 @@
         }
       }
     }
+
     .van-button {
-      height: 40px;
+      height: 80px;
       background-color: $green;
       color: #fff;
-      border-radius: 20px;
+      border-radius: 40px;
+      font-size: 32px;
     }
   }
-}
+}