增加 周报列表

src/components/EchartBox.vue

@@ -15,13 +15,10 @@
           <div class="right">
             <div class="list">
               <div class="item" v-for="(item, index) in legend.list" :key="index">
-                <div
-                  class="shape"
-                  :style="{
-                    backgroundColor: item.color,
-                    borderRadius: '50%'
-                  }"
-                ></div>
+                <div class="shape" :style="{
+                  backgroundColor: item.color,
+                  borderRadius: '50%'
+                }"></div>
                 <div class="text">
                   <span>{{ item.name }}</span>
                 </div>
@@ -70,7 +67,7 @@ export default {
     },
     options: {
       type: Object,
-      default: () => {}
+      default: () => { }
     },
     border: {
       type: Boolean,
@@ -90,7 +87,7 @@ export default {
     }
   },
   computed: {},
-  created() {},
+  created() { },
   mounted() {
     this.initEchart();
   },
@@ -125,9 +122,11 @@ export default {
   height: 100%;
   width: 100%;
   margin: 20px 0;
+
   .echart-con {
     position: relative;
     padding: 20px 0;
+
     .title-out {
       font-size: 36px;
       font-weight: bold;
@@ -140,31 +139,38 @@ export default {
       border-radius: 30px;
       padding: 20px;
       overflow: hidden;
+
       .legend {
         flex: 1;
         display: flex;
         justify-content: space-between;
         align-items: flex-start;
         padding: 16px 0;
+
         .left {
           font-weight: bold;
         }
+
         .right {
           .list {
             display: grid;
             grid-template-columns: repeat(2, auto);
-            grid-auto-flow: dense; /* 允许元素在网格中填充空隙 */
+            grid-auto-flow: dense;
+            /* 允许元素在网格中填充空隙 */
             grid-gap: 5px;
             white-space: wrap;
+
             .item {
               display: flex;
               justify-content: flex-start;
               align-items: center;
+
               .shape {
                 height: 14px;
                 width: 14px;
                 margin-right: 10px;
               }
+
               .text {
                 font-size: 20px;
               }
@@ -172,11 +178,11 @@ export default {
           }
         }
       }
+
       .echart {
         height: 100%;
         width: 100%;
       }
     }
   }
-}
-</style>
+}</style>

src/components/TopNavBar.vue

@@ -42,7 +42,10 @@ export default {
     }
   },
   mounted() {
-    this.getPersonInfo();
+    this.$nextTick(() => {
+      this.getPersonInfo();
+    })
+
   },
   methods: {
     onClickLeft(value) {
@@ -60,7 +63,7 @@ export default {
         const data = res.data.data;
         if (data) {
           this.currentPerson = { ...data };
-          console.log('this.currentPerson', this.currentPerson);
+          this.$store.commit('uid', data.physicUid)
         }
       });
     }
@@ -75,6 +78,7 @@ export default {
   height: 100px;
   width: 100%;
 }
+
 .left-img {
   height: 70px;
   width: 70px;

src/router/router.config.js

@@ -325,6 +325,12 @@ export const constantRouterMap = [
         name: 'personList',
         component: () => import('@/views/myself/personList'),
         meta: { title: '用户列表', keepAlive: false }
+      },
+      {
+        path: '/reportList',
+        name: 'reportList',
+        component: () => import('@/views/insight/reportList'),
+        meta: { title: '周报列表', keepAlive: false }
       }
     ]
   }

src/store/index.js

@@ -51,7 +51,8 @@ export default new Vuex.Store({
     deviceVersion: '', //设备版本号
     ssjlToken: '', //b端接口token
     tabClick: '', //心理监测点击tab
-    personId: '' //设备列表的personId
+    personId: '', //设备列表的personId
+    uid: '' //心理相关用户的uid
   },
   mutations: {
     authToken(state, token) {
@@ -183,6 +184,10 @@ export default new Vuex.Store({
     personId(state, personId) {
       state.personId = personId;
       window.localStorage[prefix + 'personId'] = personId;
+    },
+    uid(state, uid) {
+      state.uid = uid;
+      window.localStorage[prefix + 'uid'] = uid;
     }
   },
   getters: {
@@ -330,6 +335,10 @@ export default new Vuex.Store({
     personId: state => {
       if (state.personId != '') return state.personId;
       return window.localStorage[prefix + 'personId'] == null ? '' : window.localStorage[prefix + 'personId'];
+    },
+    uid: state => {
+      if (state.uid != '') return state.uid;
+      return window.localStorage[prefix + 'uid'] == null ? '' : window.localStorage[prefix + 'uid'];
     }
   },
   actions: {},

src/views/insight/index.vue

@@ -22,26 +22,15 @@
       </div>
     </div>
     <div class="periodNav">
-      <div
-        class="periodItem minPeriodItem"
-        :class="{ active: emotionActive == index }"
-        v-for="(item, index) in psyList"
-        :key="index"
-        @click="onEmotionClick(item, index)"
-      >
+      <div class="periodItem minPeriodItem" :class="{ active: emotionActive == index }" v-for="(item, index) in psyList"
+        :key="index" @click="onEmotionClick(item, index)">
         <span>{{ item.name }}</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>
+        <EchartBox echartId="emotionChart" :outTitle="emoLegend.outTitle" height="200" width="200" :legend="emoLegend"
+          :options="defaultOptions"></EchartBox>
       </div>
     </div>
     <div class="grid">
@@ -61,23 +50,21 @@
     </div>
 
     <div class="periodNav">
-      <div
-        class="periodItem minPeriodItem"
-        :class="{ active: signActive == index }"
-        v-for="(item, index) in signList"
-        :key="index"
-        @click="onSignClick(index)"
-      >
+      <div class="periodItem minPeriodItem" :class="{ active: signActive == index }" v-for="(item, index) in signList"
+        :key="index" @click="onSignClick(index)">
         <span>{{ item.name }}</span>
       </div>
     </div>
-    <!-- bmi显示/输入 -->
-    <div class="bmi" v-show="signActive == 2">
+    <!-- bmi显示/输入 TODO待接口-->
+    <!-- <div class="bmi" v-show="signActive == 2">
       <p>身高:<span>170</span>cm</p>
       <p>体重:<span>60</span>kg</p>
       <p>BMI:<span>24.5</span></p>
       <p>{{ bmi.result }}</p>
       <van-button size="mini">更新</van-button>
+    </div> -->
+    <div class="title-out">
+      <span>{{ signsChartTitle }}</span>
     </div>
     <div class="ChatBox" :class="{ hiddenChart: signActive == 2 }">
       <div class="legendBox minLegendBox">
@@ -87,16 +74,12 @@
           </div>
         </div>
       </div>
+
       <div class="Chat signChart" id="signChart"></div>
     </div>
     <div class="grid">
-      <div
-        class="gridItem"
-        v-show="signActive != 2"
-        :style="`background:${item.color};`"
-        v-for="(item, index) in signDaysList"
-        :key="index"
-      >
+      <div class="gridItem" v-show="signActive != 2" :style="`background:${item.color};`"
+        v-for="(item, index) in signDaysList" :key="index">
         <div class="time">
           <span class="number">{{ item.day }}</span>
           <span>天</span>
@@ -167,6 +150,7 @@ import { /* EmotionModel, */ PsyBaseUrl } from '@/config/models';
 import axios from 'axios';
 import EchartBox from '@/components/EchartBox';
 import APIHealthUser from '@/api/health-user';
+import APIAlarm from '@/api/core';
 export default {
   components: {
     DateSwitch,
@@ -283,7 +267,7 @@ export default {
       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: [],
@@ -300,8 +284,10 @@ export default {
     };
   },
   created() {
+    this.getAuth();
     this.emoName = this.psyList[this.emotionActive].name;
     this.initEchartText();
+
     /* this.getPsychologiclData('', '2023-11-21', '2023-12-21'); */
   },
   mounted() {
@@ -318,8 +304,10 @@ export default {
         start: this.$dayjs(startAndEndDate.start).format('YYYY-MM-DD'),
         end: this.$dayjs(startAndEndDate.end).format('YYYY-MM-DD')
       };
+      this.$nextTick(() => {
+        this.updateDate(date);
+      });
 
-      this.updateDate(date);
     },
     emotionActive(val) {
       console.log(val);
@@ -336,6 +324,12 @@ export default {
     }
   },
   computed: {
+    uid() {
+      return this.$store.getters.uid
+    },
+    signsChartTitle() {
+      return `${this.signList[this.signActive].name}数据图`
+    },
     degreeMap() {
       let map = new Map();
       this.degreeList.forEach(item => {
@@ -517,6 +511,23 @@ export default {
     }
   },
   methods: {
+    //   获取b端token
+    getAuth() {
+      let manufactorId = '5bf13062-a41e-4d00-ba14-1101aad12650';
+      return new Promise((resove, reject) => {
+        APIAlarm.getAuth({ manufactorId: manufactorId })
+          .then(res => {
+            let data = res.data;
+            if (data.code === 0) {
+              this.$store.commit('ssjlToken', res.data.data);
+              resove(true);
+            }
+          })
+          .catch(() => {
+            reject(false);
+          });
+      });
+    },
     initEchartText() {
       this.result = `无${this.emoName}倾向`;
       this.defaultSeries = [
@@ -850,7 +861,8 @@ export default {
       this.date = value;
       console.log('this.date', this.date);
       this.getPsychologiclData('', value.start, value.end);
-      this.getReportData('', value.start, value.end);
+      this.initData();
+      //this.getReportData('', value.start, value.end);
     },
     formateDate(time) {
       let year = time.getFullYear();
@@ -899,8 +911,11 @@ export default {
     },
     getMonthStaEnd(value) {
       const dateObj = {};
+      console.log("时间值", value);
       const start = startOfMonth(value);
       const end = endOfMonth(value);
+      console.log("时间值start", start);
+      console.log("时间值end", end);
       dateObj.start = format(start, 'yyyy-MM-dd');
       dateObj.end = format(end, 'yyyy-MM-dd');
       this.monthDate = { ...dateObj };
@@ -1002,7 +1017,7 @@ export default {
       data.forEach(item => {
         xdata.push(item.time);
         fill.push({
-          value: max - item.value,
+          value: max - item.value || '--',
           label: {
             show: false
           },
@@ -1011,7 +1026,7 @@ export default {
           }
         });
         ydata.push({
-          value: item.value,
+          value: item.value || '--',
           label: {
             show: true
           },
@@ -1022,7 +1037,7 @@ export default {
       });
       option.xAxis.data = xdata;
       option.series[0].data = ydata;
-      option.series[1].data = fill;
+      /* option.series[1].data = fill; */
     },
     formateEmotionColor(value) {
       if (value > 75) {
@@ -1048,7 +1063,7 @@ export default {
       data.forEach(item => {
         xdata.push(item.date);
         fill.push({
-          value: max - item.value,
+          value: max - item.value || '--',
           label: {
             show: false
           },
@@ -1058,7 +1073,7 @@ export default {
           }
         });
         ydata.push({
-          value: item.value,
+          value: item.value || '--',
           label: {
             show: false
           },
@@ -1070,13 +1085,13 @@ export default {
       });
       option.xAxis.data = xdata;
       option.series[0].data = ydata;
-      option.series[1].data = fill;
+      /* option.series[1].data = fill; */
       // 规定最小值
       option.yAxis.min = 40;
       // 规定最大值
       option.yAxis.max = 150;
       //设置高压标线
-      option.series[1].markLine = {
+      option.series[0].markLine = {
         data: [
           {
             symbol: 'pin',
@@ -1108,13 +1123,13 @@ export default {
       let max = 0;
       data.forEach(item => {
         if (item.value > max) {
-          max = item.value;
+          max = item.value || '--';
         }
       });
       data.forEach(item => {
         xdata.push(item.date);
         fill.push({
-          value: max - item.value,
+          value: max - item.value || '--',
           label: {
             show: false
           },
@@ -1136,11 +1151,29 @@ export default {
       });
       option.xAxis.data = xdata;
       option.series[0].data = ydata;
-      option.series[1].data = fill;
+      option.series[0].markLine = {
+        data: [
+          {
+            type: "average",
+            name: "体温",
+            yAxis: 37.2,
+            label: {
+              fontSize: 14,
+              position: "end",
+            },
+            lineStyle: {
+              type: "dashed",
+              width: 2,
+              color: "red",
+            },
+          },
+        ],
+      }
+      /* option.series[1].data = fill; */
       // 规定最小值
-      option.yAxis.min = 35;
+      option.yAxis.min = 34.5;
       // 规定最大值
-      option.yAxis.max = max;
+      option.yAxis.max = 42.5;
     },
     formateTemperatureColor(value) {
       if (value > 38) {
@@ -1197,7 +1230,7 @@ export default {
           show: true,
           borderWidth: 0,
           top: '10%',
-          left: '10%',
+          left: '15%',
           right: '10%',
           bottom: '20%'
         },
@@ -1290,7 +1323,7 @@ export default {
               color: '#189b3b'
             }
           },
-          {
+          /* {
             type: 'bar',
             barMaxWidth: 15,
             stack: 'value',
@@ -1300,7 +1333,7 @@ export default {
               borderRadius: [12, 12, 0, 0],
               show: false
             }
-          }
+          } */
         ]
       };
 
@@ -1328,7 +1361,7 @@ export default {
       this.emoName = item.name;
       this.emoType = item.type;
       if (this.active == 1) {
-        this.getMonthStaEnd(this.date);
+        /* this.getMonthStaEnd(this.date); */
         this.getPsychologiclData('', this.monthDate.start, this.monthDate.end);
       } else {
         this.getPsychologiclData('', this.date.start, this.date.end);
@@ -1341,9 +1374,9 @@ export default {
     },
     onRouterTo(name) {
       this.$router.push({
-        name: name === 'emo' ? 'report' : 'monthReport',
+        name: name === 'emo' ? 'reportList' : 'monthReport',
         query: {
-          name: name
+          type: this.emoType
         }
       });
     },
@@ -1420,6 +1453,7 @@ export default {
     display: flex;
     justify-content: space-around;
     align-items: center;
+
     .periodItem {
       width: 48%;
       font-size: 28px;
@@ -1428,16 +1462,19 @@ export default {
       padding: 12px;
       border-radius: 30px;
       background: #e6e6e6;
+
       &.active {
         color: white;
         background: #179b3b;
       }
     }
+
     .minPeriodItem {
       width: 32%;
       padding: 8px;
     }
   }
+
   .periodSwitch {
     display: flex;
     width: 100%;
@@ -1451,10 +1488,12 @@ export default {
       justify-self: center;
       color: gray;
     }
+
     .arrow {
       font-size: 45px;
     }
   }
+
   .bmi {
     display: flex;
     justify-content: flex-start;
@@ -1467,6 +1506,7 @@ export default {
       padding: 0 5px;
       font-size: 28px;
     }
+
     .van-button {
       padding: 5px 10px;
       margin-left: 50px;
@@ -1476,6 +1516,7 @@ export default {
       background-color: $green;
     }
   }
+
   .label {
     font-size: 36px;
     font-weight: bold;
@@ -1483,27 +1524,38 @@ export default {
     display: flex;
     justify-content: space-between;
     align-items: center;
+
     .right {
       font-size: 30px;
     }
   }
+
+  .title-out {
+    font-size: 36px;
+    font-weight: bold;
+    padding: 60px 20px 20px 20px;
+  }
+
   .echart-container {
     flex: 1;
     position: relative;
     min-height: 600px;
     background-color: #fff;
-    padding: 0 20px;
+    padding: 0 10px;
   }
+
   .ChatBox {
     overflow: hidden;
     width: calc(100vw - 60px);
     height: 650px;
     border: 2px solid #cdf348;
-    border-radius: 70px;
-    margin-top: 30px;
+    border-radius: 30px;
+    /* margin-top: 30px; */
+
     h4 {
       padding: 40px 0 10px 60px;
     }
+
     .legendBox {
       width: 100%;
       height: 100px;
@@ -1529,10 +1581,12 @@ export default {
             margin-right: 0;
           }
         }
+
         .not {
           .number {
             color: #179b3b;
           }
+
           &::before {
             content: '';
             position: absolute;
@@ -1546,10 +1600,12 @@ export default {
             margin: auto;
           }
         }
+
         .mild {
           .number {
             color: #2ea7e0;
           }
+
           &::before {
             content: '';
             position: absolute;
@@ -1563,10 +1619,12 @@ export default {
             margin: auto;
           }
         }
+
         .moderate {
           .number {
             color: #8dc21f;
           }
+
           &::before {
             content: '';
             position: absolute;
@@ -1580,10 +1638,12 @@ export default {
             margin: auto;
           }
         }
+
         .severe {
           .number {
             color: #ff5f8b;
           }
+
           &::before {
             content: '';
             position: absolute;
@@ -1599,6 +1659,7 @@ export default {
         }
       }
     }
+
     .minLegendBox {
       .legend {
         .legendItem {
@@ -1608,16 +1669,19 @@ export default {
           &:nth-child(2n) {
             margin-right: 50px;
           }
+
           &:last-child {
             margin-right: 0;
           }
         }
       }
     }
+
     .Chat {
       width: calc(100vw - 60px);
       height: 500px;
     }
+
     .result {
       height: 140px;
       padding: 0 30px;
@@ -1626,18 +1690,24 @@ export default {
       justify-content: center;
       align-items: flex-start;
       flex-direction: column;
+
       .wrapBox {
-        padding: 10px 180px 10px 60px;
+        padding: 10px 120px 10px 60px;
         width: 100%;
         background-color: #e6e6e6;
-        border-radius: 70px;
+        border-radius: 30px;
       }
+
       .text {
         display: flex;
-        justify-content: space-between;
+        justify-content: flex-start;
         align-items: center;
+
         .right {
+
           @include center();
+          padding-left: px2rem(20);
+
           img {
             height: 30px;
             width: 30px;
@@ -1648,9 +1718,11 @@ export default {
       }
     }
   }
+
   .minChartBox {
     height: 760px;
   }
+
   .hiddenChart {
     width: 0;
     height: 0;
@@ -1680,6 +1752,7 @@ export default {
         }
       }
     }
+
     .minItem {
       width: calc((100vw - 60px) * 0.32);
       height: calc((100vw - 60px) * 0.32);

src/views/insight/reportList.vue

@@ -0,0 +1,282 @@
+<!--  -->
+<template>
+    <div class="report-con">
+        <van-nav-bar title="周报列表" @click-left="onNavBack" left-text="返回" left-arrow>
+        </van-nav-bar>
+        <div class="main">
+            <div class="report">
+                <div class="content">
+                    <div class="list" v-if="weekList.length > 0">
+                        <div class="item" v-for="(item, index) in weekList" :key="index"
+                            @click="onClickItem(item.recordId)">
+                            <div class="left">
+                                <img :src="weekImg" alt />
+                                <div class="middle">
+                                    <div class="title">
+                                        <span>周报</span>
+                                        <p>{{ item.name }}</p>
+                                    </div>
+                                    <div class="overall">
+                                        <div class="left">
+                                            <span>总评</span>
+                                            <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>-->
+                                </div>
+                            </div>
+
+                            <div class="right">
+                                <img :src="moreImg" alt />
+                            </div>
+                        </div>
+                    </div>
+                    <div class="list no-data" v-else>
+                        <img :src="noDataImg" alt />
+                        <p>连续佩戴两周产生对比数据</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import axios from 'axios';
+import ToastService from '@/services/toast-service';
+export default {
+    data() {
+        return {
+            weekImg: require('@/assets/today/icons/week_report.png'),
+            moreImg: require('@/assets/today/icons/more.png'),
+            noDataImg: require('@/assets/today/images/no_data_01.png'),
+            weekList: []
+        }
+    },
+    computed: {
+        uid() {
+            return this.$store.getters.uid
+        }
+    },
+    created() {
+
+    },
+    mounted() {
+        this.$nextTick(() => {
+            this.getWeekResult();
+        })
+    },
+    methods: {
+        getWeekResult() {
+            ToastService.loading({
+                message: '数据加载中'
+            });
+            let baseUrl =
+                process.env.NODE_ENV === 'production' ? 'https://dbmq.rzliot.com/auth_heart' : 'https://dbmq.rzliot.com/heart';
+            let reqUrl = `${baseUrl}/api/Data/GetWeekResult`;
+            let reqParams = {
+                uid: this.uid,
+                type: this.$route.query.type
+            };
+            axios
+                .get(reqUrl, {
+                    params: { ...reqParams }
+                    /*  headers: { 'AccessToken': this.$store.getters.ssjlToken } */
+                })
+                .then(res => {
+                    console.log('res', res);
+                    const data = res.data.response;
+                    this.weekList = data
+                        .map(item => {
+                            return {
+                                name: item.Name.replace('周报', '').replace(/-/g, '.').replace(/~/g, '-'),
+                                recordId: item.RecordId,
+                                summary: item.Summary,
+                                summaryLevel: item.SummaryLevel,
+                                type: this.emoType
+                            };
+                        })
+                        .reverse();
+                    ToastService.success({
+                        message: '数据加载完成'
+                    });
+                });
+        },
+        onNavBack() {
+            this.$router.push({
+                name: 'Insight'
+            })
+        },
+        onClickItem(recordId) {
+            this.$router.push({
+                name: 'report',
+                query: {
+                    recordId: recordId,
+                    name: this.currentEmoName,
+                    isShowLeft: true,
+                    uid: this.uid,
+                    type: this.$route.query.type
+                }
+            });
+        },
+        // 计算结果采用哪种颜色
+        calcResultColor(value, isCallBackClass) {
+            let color = '';
+            let className = '';
+            switch (Number(value)) {
+                case 0:
+                    color = '#179b3b';
+                    className = 'none';
+                    break;
+                case 1:
+                    color = '#8dc21f';
+                    className = 'mid';
+                    break;
+                case 2:
+                    color = '#2ea7e0';
+                    className = 'severe';
+                    break;
+                case 3:
+                    color = '#ff5f8b';
+                    className = 'severe';
+                    break;
+            }
+            return isCallBackClass ? className : color;
+        },
+    },
+}
+</script>
+<style scoped lang="scss">
+/* @import url(); 引入css类 */
+.report-con {
+    height: 100vh;
+    overflow: hidden;
+
+    .main {
+        position: relative;
+        height: calc(100vh - 100px);
+        overflow: scroll;
+
+        .report {
+            position: relative;
+            height: 100%;
+            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;
+
+                                    .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;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+</style>

src/views/today/index.vue

@@ -3,16 +3,12 @@
   <div class="today">
     <div class="devicesSwitch" v-if="false">
       <!-- <i :class="[{on: isClear},'news']" @click="newsClick" v-show="true"></i> -->
-      <div
-        :class="[
-          'imgArea',
-          {
-            cut: currentPerson.deviceStatus ? currentPerson.deviceStatus.online != 0 : false
-          }
-        ]"
-        @click="imgAreaClick"
-        v-show="personList !== null && personList.length"
-      >
+      <div :class="[
+        'imgArea',
+        {
+          cut: currentPerson.deviceStatus ? currentPerson.deviceStatus.online != 0 : false
+        }
+      ]" @click="imgAreaClick" v-show="personList !== null && personList.length">
         <img :src="currentPerson.avatar" />
         <span style="font-weight: bolder" v-show="currentPerson && currentPerson.nickName">{{
           currentPerson.nickName
@@ -21,23 +17,17 @@
       </div>
       <!-- 点击宝贝切换出现 -->
       <div :class="[{ active: conAreaShow }, 'conArea']" v-if="personList !== null">
-        <div
-          class="list"
-          v-for="(item, index) in personList"
-          :key="`list_index_${index}`"
-          @click="imageListClick(item, index)"
-        >
-          <div
-            :class="[
-              { active: item.id == $store.getters.personId },
-              'imgA',
-              {
-                online: {
-                  online: item.deviceStatus ? item.deviceStatus.online && item.deviceStatus.online == 1 : 'false'
-                }
+        <div class="list" v-for="(item, index) in personList" :key="`list_index_${index}`"
+          @click="imageListClick(item, index)">
+          <div :class="[
+            { active: item.id == $store.getters.personId },
+            'imgA',
+            {
+              online: {
+                online: item.deviceStatus ? item.deviceStatus.online && item.deviceStatus.online == 1 : 'false'
               }
-            ]"
-          >
+            }
+          ]">
             <img :src="item.avatar" />
           </div>
           <div :class="['Myname', { active: item.id == $store.getters.personId }]">
@@ -53,12 +43,9 @@
         <p>暂无设备信息</p>
       </div> -->
       <!-- 今日状态 -->
-      <div
-        @click="conAreaShow = false"
-        :style="{
-          paddingBottom: isShowBind ? '40px' : 0
-        }"
-      >
+      <div @click="conAreaShow = false" :style="{
+        paddingBottom: isShowBind ? '40px' : 0
+      }">
         <div class="today-status">
           <img class="img" :src="calcTodayStatus(todayLevel, 'img')" />
           <!-- <img
@@ -69,11 +56,8 @@
           <div class="status">
             <p>状态{{ calcTodayStatus(todayLevel, 'text') }}</p>
             <ul>
-              <li
-                v-for="(item, index) in statusList"
-                :key="index"
-                :class="[item.className, { active: item.active }]"
-              ></li>
+              <li v-for="(item, index) in statusList" :key="index" :class="[item.className, { active: item.active }]">
+              </li>
               <!-- <li :class="['toobad', { active: false }]"></li>
               <li :class="['ordinary', { active: todayStatus }]"></li>
               <li :class="['sameas', { active: false }]"></li>
@@ -118,12 +102,8 @@
             </div>
           </div>
           <ul>
-            <li
-              v-for="(item, index) in psyDataList.length > 0 ? psyDataList : 3"
-              :key="index"
-              :style="{ backgroundColor: item.bgColor }"
-              @click="onRouterTo('emotionDetails', item.class)"
-            >
+            <li v-for="(item, index) in psyDataList.length > 0 ? psyDataList : 3" :key="index"
+              :style="{ backgroundColor: item.bgColor }" @click="onRouterTo('emotionDetails', item.class)">
               <h4>{{ item.value || '--' }}</h4>
               <p>{{ item.name || '--' }}</p>
               <span>{{ item.result || '暂无数据' }}</span>
@@ -133,30 +113,13 @@
         </div>
         <!-- 日历 -->
 
-        <van-dialog
-          class="calenddar-dialog"
-          v-model="calendarDialogShow"
-          :show-confirm-button="false"
-          :show-cancle-button="false"
-          :close-on-click-overlay="true"
-          ref="calenddarDialog"
-        >
+        <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="calendar" ref="calendarCon">
-              <van-calendar
-                v-model="calendarDialogShow"
-                :min-date="minDate"
-                :max-date="maxDate"
-                :default-date="defaultDate"
-                :round="false"
-                :poppable="false"
-                color="#179b3b"
-                :show-confirm="false"
-                :show-title="true"
-                :show-subtitle="false"
-                :formatter="formatterDay"
-                @select="onSelect"
-              />
+              <van-calendar v-model="calendarDialogShow" :min-date="minDate" :max-date="maxDate"
+                :default-date="defaultDate" :round="false" :poppable="false" color="#179b3b" :show-confirm="false"
+                :show-title="true" :show-subtitle="false" :formatter="formatterDay" @select="onSelect" />
             </div>
           </template>
         </van-dialog>
@@ -170,12 +133,8 @@
             </div>
           </div>
           <ul>
-            <li
-              v-for="(item, index) in signDataList.length > 0 ? signDataList : 3"
-              :key="index"
-              :style="{ backgroundColor: item.bgColor }"
-              @click="onRouterTo('signsDetails', item.class)"
-            >
+            <li v-for="(item, index) in signDataList.length > 0 ? signDataList : 3" :key="index"
+              :style="{ backgroundColor: item.bgColor }" @click="onRouterTo('signsDetails', item.class)">
               <h4>{{ item.value || '--' }}</h4>
               <p>{{ item.name || '暂无数据' }}</p>
               <time>{{ item.time || '--' }}</time>
@@ -184,8 +143,7 @@
           <div class="tip">
             <img class="img" src="@/assets/today/icons/2_25.png" />
             <p>
-              <span>温馨提示：</span
-              >检测数据仅供参考，<span>不可做医疗诊断和治疗依据</span>，在运动、工作等场景会影响健康检测。
+              <span>温馨提示：</span>检测数据仅供参考，<span>不可做医疗诊断和治疗依据</span>，在运动、工作等场景会影响健康检测。
             </p>
           </div>
         </div>
@@ -255,7 +213,7 @@
   </div>
 </template>
   
-  <script>
+<script>
 import APIAlarm from '@/api/core';
 import APIPsy from '@/api/psychological';
 import APIHealthUser from '@/api/health-user';
@@ -360,10 +318,14 @@ export default {
       return this.$route.query.isBinding || false;
     }
   },
-  created() {},
-  async mounted() {
-    this.getPersonList();
-    this.getAuth();
+  created() {
+    this.$nextTick(() => {
+      this.getPersonList();
+      this.getAuth();
+    })
+  },
+  mounted() {
+
   },
   methods: {
     getPersonList() {

src/views/today/report.vue

@@ -2,20 +2,24 @@
   <!-- 周/月报 -->
   <div class="report">
     <NavBar title="周报" @on-click-left="onNavBack" right-text="历史"> </NavBar>
-
+    <div class="periodSwitch">
+      <div class="arrow arrowLeft">
+        <van-icon name="arrow-left" :color="isPreClick ? '' : '#e6e6e6'" @click="dateClick"></van-icon>
+      </div>
+      <div class="timearea">{{ currentRecord.name }}</div>
+      <div class="arrow arrowRight">
+        <van-icon name="arrow" :color="isAddClick ? '' : '#e6e6e6'" @click="dateClick('add')"></van-icon>
+      </div>
+    </div>
     <div class="main">
-      <div class="periodNav">
-        <div
-          class="periodItem minPeriodItem"
-          :class="{ active: signActive == index }"
-          v-for="(item, index) in signList"
-          :key="index"
-          @click="onSignClick(index)"
-        >
+      <!-- <div class="periodNav">
+        <div class="periodItem minPeriodItem" :class="{ active: signActive == index }" v-for="(item, index) in signList"
+          :key="index" @click="onSignClick(index)">
           <span>{{ item.name }}</span>
         </div>
-      </div>
+      </div> -->
       <!-- 总评 -->
+
       <div class="overall-rating">
         <div class="con">
           <p class="space-between">
@@ -62,8 +66,8 @@
                 <img :src="calcImg(item.percentage, item.lastPercentage)" alt="" />
                 <span :style="{ color: calcImg(item.percentage, item.lastPercentage, true) != 0 ? item.color : '' }">{{
                   calcImg(item.percentage, item.lastPercentage, true)
-                    ? Math.abs(calcImg(item.percentage, item.lastPercentage, true)) + '%'
-                    : '持平'
+                  ? Math.abs(calcImg(item.percentage, item.lastPercentage, true)) + '%'
+                  : '持平'
                 }}</span>
               </div>
             </div>
@@ -72,12 +76,8 @@
       </div>
       <div class="statistics">
         <div class="list">
-          <div
-            class="item"
-            v-for="(item, index) in statisticsList"
-            :key="index"
-            :style="{ backgroundColor: item.bgColor }"
-          >
+          <div class="item" v-for="(item, index) in statisticsList" :key="index"
+            :style="{ backgroundColor: item.bgColor }">
             <div class="top">
               <span>{{ item.label || '--' }}</span>
             </div>
@@ -97,15 +97,9 @@
       <!-- <div class="chart-title">
         <p>24小时{{ emoName }}时间分布图</p>
       </div> -->
-      <div class="scatter">
-        <EchartBox
-          echartId="scatterCharts"
-          outTitle="24小时抑郁时间分布图"
-          :border="false"
-          height="200"
-          width="200"
-          :options="scatterOptions"
-        >
+      <div class="scatter" v-show="false">
+        <EchartBox echartId="scatterCharts" outTitle="24小时抑郁时间分布图" :border="false" height="200" width="200"
+          :options="scatterOptions">
           <template #custom-bot>
             <div class="custom-bot">
               <div class="list">
@@ -124,7 +118,7 @@
       <!-- 数据图-柱形图 -->
       <div class="bar-chart">
         <div class="echart">
-          <EchartBox echartId="charts" height="200" width="200" :legend="emoLegend" :options="emoOptions"></EchartBox>
+          <EchartBox echartId="charts" height="200" width="200" :legend="emoLegend" :options="defaultOptions"></EchartBox>
         </div>
       </div>
       <div class="line"></div>
@@ -132,13 +126,7 @@
       <div class="advice">
         <div class="content">
           <p class="title">健康建议</p>
-          <!-- <p>{{ weekResult.Advice || '--' }}</p> -->
-          <p>
-            健康建议抑郁是一种负性情绪，是人们遇到具体生活事件后，出现
-            的一种不愉快、烦闷压抑的内心体验。情绪受挫折的影响是很正常
-            的反应，不要任由情绪跟着负面想法走，让自己陷入抑郁之中。与
-            人沟通，有助于排解不良情绪；把注意力放到当下真正需要关注的 事情中来，积极应对困难，有助于改善现状。
-          </p>
+          <p>{{ weekResult.Advice || '--' }}</p>
         </div>
       </div>
       <!-- 概览 -->
@@ -147,12 +135,8 @@
           <div class="title">
             <span class="title-text">{{ surveyTitle }}</span>
             <div class="mood-list">
-              <div
-                class="item"
-                v-for="(item, index) in emotionList"
-                :key="index"
-                :style="{ backgroundColor: item.color }"
-              >
+              <div class="item" v-for="(item, index) in emotionList" :key="index"
+                :style="{ backgroundColor: item.color }">
                 <p>
                   <span class="day">{{ item.days }}</span>
                   <span class="day-text">天</span>
@@ -310,16 +294,28 @@ export default {
       signGrid: [],
       chartsScatter: null,
       timeList: ['0', '6', '12', '18', '24'],
-      emotionDataNew: []
+      emotionDataNew: [],
+      count: 0,
+      isPreClick: true,
+      isAddClick: true,
+      clickFlag: true, //左右日期按钮是否给予点击
+      weekList: [],
+      currentRecord: {},
+      maxCount: ''
     };
   },
   created() {
     this.initEchartText();
-    this.createList();
+    this.loadParams();
+    //this.createList();
   },
   mounted() {
-    this.loadParams();
-    this.initEchart();
+    this.$nextTick(() => {
+      this.initEchart();
+      this.getWeekResult();
+    })
+
+
   },
   watch: {
     // 监听数据发生变化 初始化各项图表
@@ -343,6 +339,9 @@ export default {
     }
   },
   computed: {
+    uid() {
+      return this.$store.getters.uid
+    },
     emoOptions() {
       return {
         grid: {
@@ -405,86 +404,13 @@ export default {
         time: {
           useUTC: false
         },
-        title: {
-          /* text: this.echartsTitle, */
-          left: 1,
-          right: 25,
-          bottom: 20,
-          top: '3%',
-          textStyle: {
-            fontSize: 18,
-            fontWeight: 'bold'
-          }
-        },
-        legend: {
-          width: '65%',
-          orient: 'horizontal',
-          right: 'right',
-          top: '3%',
-          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: '5%',
+          right: '3%',
+          bottom: '15%',
           containLabel: true
         },
         xAxis: {
@@ -515,11 +441,11 @@ export default {
           data: this.xAxisData
         },
         dataZoom: [
-          {
-            type: 'inside',
-            start: 0,
-            end: 100
-          },
+          /*  {
+                        type: "inside",
+                        start: 0,
+                        end: 100,
+                    }, */
           {
             start: 0,
             end: 100,
@@ -527,9 +453,9 @@ export default {
               color: '#FFF',
               fontSize: 14
             },
-            show: false,
-            height: 25,
-            bottom: '3%',
+            show: true,
+            height: 20,
+            bottom: 4,
             handleStyle: {
               borderWidth: 1,
               borderCap: 'square'
@@ -543,7 +469,7 @@ export default {
             align: 'center'
           },
           formatter: function (params) {
-            return params[0].marker + params[0].name + '--' + params[0].value + '</br>';
+            return params[0].marker + params[0].name + '</br>' + params[0].value;
           }
         },
         yAxis: {
@@ -556,16 +482,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
@@ -577,9 +503,19 @@ export default {
             name: `无${this.emoName}倾向`,
             type: 'line',
             padding: 5,
+            smooth: true,
             data: this.emotionData,
             symbol: 'circle',
-            symbolSize: 8
+            symbolSize: 10,
+            itemStyle: {
+              color: '#fff',
+              borderWidth: 2
+            },
+            lineStyle: {
+              width: 6,
+              type: 'solid',
+              color: '#189b3b'
+            }
           },
           {
             name: `轻度${this.emoName}倾向`,
@@ -881,13 +817,13 @@ export default {
       }
       return title;
     },
-    getWeekResultDetail() {
+    getWeekResultDetail(recordId) {
       this.$toast.loading('数据加载中');
       let baseUrl =
         process.env.NODE_ENV === 'production' ? 'https://dbmq.rzliot.com/auth_heart' : 'https://dbmq.rzliot.com/heart';
       let reqUrl = `${baseUrl}/api/Data/GetWeekResultDetail`;
       let reqParams = {
-        recordId: /* this.params.recordId */ '1728096156447281486'
+        recordId: recordId || this.params.recordId
       };
       axios
         .get(reqUrl, {
@@ -898,8 +834,8 @@ export default {
           const data = res.data.response;
           let chartData = data.ChartData
             ? JSON.parse(data.ChartData).filter(item => {
-                return item.Key;
-              })
+              return item.Key;
+            })
             : [];
           if (data) {
             this.monitoringCount = data.Total;
@@ -1051,7 +987,7 @@ export default {
             {
               name: '平均值',
               type: 'scatter',
-              symbolSize: 8,
+              symbolSize: 14,
               data: this.emotionData
             },
             {
@@ -1059,15 +995,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]
                   },
                   {
@@ -1099,25 +1035,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: ''
             }
           ];
@@ -1125,27 +1061,25 @@ export default {
           this.defaultOptions.tooltip = {
             trigger: 'axis',
             formatter: function (params) {
-              if (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]
-                );
-              }
+              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;
@@ -1174,7 +1108,10 @@ export default {
     },
     onNavBack() {
       this.$router.push({
-        name: 'Insight'
+        name: 'reportList',
+        query: {
+          type: this.$route.query.type
+        }
       });
     },
     // 计算字体显示的颜色
@@ -1236,7 +1173,85 @@ export default {
     },
     onSignClick(index) {
       this.signActive = index;
-    }
+    },
+    dateClick(type) {
+      if (type == 'add') {
+        if (this.count <= 0) {
+          return;
+        }
+        this.count--;
+        this.isPreClick = true;
+        let recordId = this.weekList.filter(item => {
+          return item.count === this.count;
+        })[0].recordId;
+        this.currentRecord = this.weekList.filter(item => {
+          return item.count === this.count;
+        })[0]
+        this.getWeekResultDetail(recordId);
+        if (this.count <= 0) {
+          this.isAddClick = false;
+        }
+        console.log("右，当前的count", this.count);
+      } else {
+        // 上一个
+        if (this.count >= this.maxCount) {
+          return;
+        }
+        this.count++;
+        this.isAddClick = true;
+        let recordId = this.weekList.filter(item => {
+          return item.count === this.count;
+        })[0].recordId;
+        this.currentRecord = this.weekList.filter(item => {
+          return item.count === this.count;
+        })[0]
+        this.getWeekResultDetail(recordId);
+        console.log("recordId", recordId);
+        if (this.count >= this.maxCount) {
+          this.isPreClick = false;
+        }
+        console.log("左，当前的count", this.count);
+      }
+    },
+    getWeekResult() {
+      let baseUrl =
+        process.env.NODE_ENV === 'production' ? 'https://dbmq.rzliot.com/auth_heart' : 'https://dbmq.rzliot.com/heart';
+      let reqUrl = `${baseUrl}/api/Data/GetWeekResult`;
+      let reqParams = {
+        uid: this.uid,
+        type: this.$route.query.type
+      };
+      axios
+        .get(reqUrl, {
+          params: { ...reqParams }
+          /*  headers: { 'AccessToken': this.$store.getters.ssjlToken } */
+        })
+        .then(res => {
+          console.log('res', res);
+          const data = res.data.response;
+          this.weekList = data.reverse()
+            .map((item, index) => {
+              return {
+                name: item.Name.replace('周报', '').replace(/-/g, '.').replace(/~/g, '-'),
+                recordId: item.RecordId,
+                summary: item.Summary,
+                summaryLevel: item.SummaryLevel,
+                count: index
+              };
+            })
+
+          this.currentRecord = this.weekList.filter(item => {
+            return item.recordId == this.$route.query.recordId
+          })[0];
+          this.count = this.weekList.filter(item => {
+            return item.recordId == this.$route.query.recordId
+          })[0].count;
+          this.maxCount = data.length - 1;
+          this.isAddClick = this.maxCount - this.count < this.maxCount;
+          this.isPreClick = this.maxCount - this.count > 0;
+          console.log("weekList", this.weekList, this.count);
+        });
+    },
   }
 };
 </script>

src/views/today/scss/report.scss

@@ -5,16 +5,40 @@
   background-color: #f5f5f5;
   font-family: Source Han Sans CN;
 
+  .periodSwitch {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px 40px;
+    padding-bottom: 10px;
+    padding-top: 100px;
+    left: 0;
+
+    .timearea {
+      font-size: 28px;
+      justify-self: center;
+      color: gray;
+    }
+
+    .arrow {
+      font-size: 45px;
+    }
+  }
+
   .main {
-    height: calc(100vh - 200px);
+    height: calc(100vh - 150px);
     overflow: scroll;
     background-color: #fff;
     padding: 0 20px;
-    padding-top: 100px;
+    /* padding-top: 100px; */
+
+
+
     .periodNav {
       display: flex;
       justify-content: space-around;
       align-items: center;
+
       .periodItem {
         width: 48%;
         font-size: 28px;
@@ -23,16 +47,19 @@
         padding: 12px;
         border-radius: 30px;
         background: #e6e6e6;
+
         &.active {
           color: white;
           background: #179b3b;
         }
       }
+
       .minPeriodItem {
         width: 32%;
         padding: 8px;
       }
     }
+
     .line {
       height: 22px;
       background-color: $lineGray;
@@ -41,6 +68,7 @@
     .overall-rating {
       padding: 46px 15px;
       margin-bottom: 18px;
+
       .con {
         padding: 34px 20px;
         display: flex;
@@ -153,6 +181,7 @@
           display: flex;
           justify-content: center;
           flex-direction: column;
+
           .item {
             width: 100%;
             display: flex;
@@ -160,6 +189,7 @@
             align-items: center;
             font-size: 24px;
             padding: 18px 0;
+
             .item-left {
               display: flex;
               justify-content: flex-start;
@@ -184,13 +214,16 @@
 
             .item-right {
               @include center();
+
               span {
                 font-size: 24px;
               }
             }
+
             .status {
               padding: 0 10px;
               @include center();
+
               img {
                 height: 30px;
                 width: 18px;
@@ -205,6 +238,7 @@
     .statistics {
       position: relative;
       padding: 10px 28px 10px 28px;
+
       .list {
         flex: 1;
         width: 100%;
@@ -224,6 +258,7 @@
           border: 1px solid $border_color;
           border-radius: 30px;
           color: #fff;
+
           .top {
             font-size: 24px;
           }
@@ -238,25 +273,30 @@
         }
       }
     }
+
     .chart-title {
       padding: 30px;
       font-size: 36px;
       font-weight: bold;
       color: #282828;
     }
+
     .bar-chart {
       position: relative;
       height: 600px;
       background-color: #fff;
       padding: 0 10px;
+
       .echart {
         height: 600px;
         padding: 0 10px;
       }
     }
+
     .scatter {
       border: none;
       height: 600px;
+
       .custom-bot {
         .list {
           height: 40px;
@@ -268,8 +308,10 @@
         }
       }
     }
+
     .advice {
       padding: 52px 20px 60px 20px;
+
       .content {
         background: #f2f6ff;
         border-radius: 20px;
@@ -281,6 +323,7 @@
           color: #707070;
           line-height: 46px;
         }
+
         .title {
           font-size: 26px;
           font-weight: bold;
@@ -322,10 +365,12 @@
               color: #fff;
               border: 1px solid #cdf348;
               border-radius: 40px;
+
               p {
                 font-size: 28px;
                 padding: 0;
                 @include center();
+
                 .day {
                   /* padding: 5px; */
                   font-size: 56px;
@@ -335,6 +380,7 @@
                   font-size: 24px;
                   padding: 0 10px;
                 }
+
                 img {
                   height: 30px;
                   width: 18px;
@@ -345,12 +391,14 @@
         }
       }
     }
+
     &.no-data {
       @include center();
       flex-direction: column;
+
       p {
         font-size: 32px;
       }
     }
   }
-}
+}