Merge branch 'mer-test' into test

README.md

@@ -1195,4 +1195,7 @@ update
 `2024.8.7`
 fix
 
-- 修复 心理量表选项起始数调整为0
+- 修复 心理量表选项起始数调整为0
+`2024.8.21`
+update
+- 优化 周报汇总切换

package-lock.json

@@ -2250,87 +2250,6 @@
         "webpack-chain": "^6.4.0",
         "webpack-dev-server": "^3.11.0",
         "webpack-merge": "^4.2.2"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true,
-          "optional": true
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true,
-          "optional": true
-        },
-        "loader-utils": {
-          "version": "2.0.4",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
-          "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        },
-        "vue-loader-v16": {
-          "version": "npm:vue-loader@16.8.3",
-          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
-          "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "chalk": "^4.1.0",
-            "hash-sum": "^2.0.0",
-            "loader-utils": "^2.0.0"
-          }
-        }
       }
     },
     "@vue/cli-shared-utils": {
@@ -15020,6 +14939,87 @@
         }
       }
     },
+    "vue-loader-v16": {
+      "version": "npm:vue-loader@16.8.3",
+      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
+      "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "chalk": "^4.1.0",
+        "hash-sum": "^2.0.0",
+        "loader-utils": "^2.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true,
+          "optional": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
+        "loader-utils": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
+          "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "vue-router": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.3.tgz",

src/router/index.js

@@ -68,6 +68,8 @@ const routes = [
     { path: '/psychologicalReport', name: 'psychologicalReport', component: resolve => require(['@/views/health/psychological/report/index'], resolve) },
     // 周报/月报-入口
     { path: '/psychiclReportEntry', name: 'psychiclReportEntry', component: resolve => require(['@/views/health/psychological/report/report-entry'], resolve) },
+    // 周报/月报
+    { path: '/reportDetails', name: 'reportDetails', component: resolve => require(['@/views/health/psychological/reportDetails/index'], resolve) },
 
     // 告警详情-中间页
     { path: '/aiCallAlarm', name: 'aiCallAlarm', component: resolve => require(['@/views/ai-call-alarm'], resolve) },

src/views/health/psychological-main/index.vue

@@ -89,6 +89,7 @@ export default {
     },
     // 加载路由参数
     async loadParams() {
+      this.$toast.loading("数据加载中");
       let params = this.$route.query;
       if (params) {
         this.uid = params.uid;

src/views/health/psychological/index.scss

@@ -69,7 +69,7 @@ $newBlue: #638EE4;
         }
     }
     .psy-tab-bar {
-        height: 40px;
+        height: 30px;
         position: relative;
         margin: 5px 0;
         padding: 0 10px;
@@ -84,7 +84,7 @@ $newBlue: #638EE4;
                 justify-content: space-around;
                 align-items: center;
                 color: #fff;
-                height: 40px;
+                height: 30px;
                 width: 100%;
                 /* background-color: red; */
                 .psy-tab-item {
@@ -93,12 +93,12 @@ $newBlue: #638EE4;
                     color: #6D6D6D;
                     height: 100%;
                     width: 100%;
-                    font-size: 18px;
+                    font-size: 14px;
                     border-radius: 20px;
                     @include center();
                     &.active {
                         color: #FFFFFF;
-                        background-color: #638EE4;
+                        background-color: #189B3BFF;
                     }
                 }
             }
@@ -107,7 +107,8 @@ $newBlue: #638EE4;
     .main {
         position: relative;
         height: calc(100vh - 150px);
-        overflow: scroll;
+        overflow-y: scroll;
+        overflow-x: hidden;
         .top {
             flex: 1;
             .title {
@@ -165,6 +166,10 @@ $newBlue: #638EE4;
                         height: 106px;
                         width: 106px;
                     }
+                    #pieChartDay {
+                        height: 106px;
+                        width: 106px;
+                    }
                 }
                 .pie-chart-right {
                     height: 150px;
@@ -436,10 +441,12 @@ $newBlue: #638EE4;
                                 }
                                 .overall {
                                     display: flex;
-                                    justify-content: space-between;
-                                    align-items: center;
+                                    justify-content: flex-start;
+                                    align-items: flex-start;
                                     width: 100%;
+                                    
                                     .left {
+                                        flex-direction: column;
                                         p {
                                             padding-left: 20px;
                                             font-weight: bold;

src/views/health/psychological/index.vue

@@ -21,7 +21,7 @@
       </div>
     </div>
     <!-- 情绪切换 -->
-    <div class="psy-tab-bar">
+    <div class="psy-tab-bar" v-if="pageType !== 1">
       <div class="psy-tab-con">
         <div class="psy-tab-list">
           <div :class="[
@@ -194,8 +194,8 @@
     <!-- 周报菜单 -->
     <div class="main report" v-show="current == 3">
       <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="list" v-if="pageType === 0 && weekList.length > 0">
+          <div class="item" v-for="(item, index) in weekList" :key="index" @click="onClickItem(item)">
             <div class="left">
               <img :src="weekImg" alt />
               <div class="middle">
@@ -204,13 +204,48 @@
                   <p>{{ item.name }}</p>
                 </div>
                 <div class="overall">
+                  <span>总评</span>
                   <div class="left">
-                    <span>总评</span>
+                    
                     <p :style="{ color: calcResultColor(item.summaryLevel) }">
                       {{ item.summary }}
                     </p>
                   </div>
                 </div>
+              </div>
+            </div>
+
+            <div class="right">
+              <img :src="moreImg" alt />
+            </div>
+          </div>
+        </div>
+        <div class="list" v-if="pageType === 1 && weekResultList.length > 0">
+          <div class="item" v-for="(item, index) in weekResultList" :key="index" @click="onClickItem(item[1])">
+            <div class="left">
+              <img :src="weekImg" alt />
+              <div class="middle">
+                <div class="title">
+                  <span>周报</span>
+                  <p>{{ item[1].name }}</p>
+                </div>
+                <div class="overall">
+                  <span>总评</span>
+                  <div class="left">
+                    <p v-for="(su, index) in item[1].summaryDetails" :key="index" :style="{ color: calcResultColor(su.summaryLevel) }">
+                      {{ su.summary }}
+                    </p>
+                    <!-- <p :style="{ color: calcResultColor(item.summaryLevel) }">
+                      {{ item.summary }}
+                    </p>
+                    <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>-->
@@ -222,7 +257,7 @@
             </div>
           </div>
         </div>
-        <div class="list no-data" v-else>
+        <div class="list no-data" v-if="weekList.length < 1 && weekResultList.length < 1 ">
           <img :src="noDataImg" alt />
           <p>连续佩戴两周产生对比数据</p>
         </div>
@@ -386,9 +421,14 @@ export default {
       startDate: "", //接口需要的开始时间
       endDate: "", //接口需要的结束时间
       currentEmoName: "", //当前情绪名称
+      weekResultList: [], //周报新详情周报列表
     };
   },
   computed: {
+    // 页面类型，0 保持不动，1显示方式为新页面显示方式
+    pageType() {
+      return Number(this.$route.query.pageType) || 0
+    },
     anxietyText() {
       const appTypeList = ['1'];
       return appTypeList.indexOf(this.$store.getters.appType) > -1 ? `忧郁` : `抑郁`
@@ -727,19 +767,27 @@ export default {
     // 读取路由传过来的参数，根据路由传过来的参数判断是哪种情绪
     this.loadParams();
     this.initEchartText();
-    this.getPieData();
+    /* this.getPieData(); */
     this.getCalendarData();
     this.getPsychologiclData();
     this.getWeekResult();
   },
   mounted() {
     this.initEchart();
-    this.current = Number(this.$store.getters.tabClick) || 0;
+    if(this.params.current) {
+      this.current = Number(this.params.current);
+    } else {
+      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);
     window.document.title = "心理监测";
+    if(this.pageType === 1) {
+      this.getWeekResultAny();
+    }
   },
   methods: {
     loadParams() {
@@ -1272,7 +1320,13 @@ export default {
         this.endDate = dateList[1];
       } else {
         // 周报菜单
-        this.getWeekResult();
+        
+        if(this.pageType !== 1) {
+          this.getWeekResult();
+        } else {
+          this.getWeekResultAny();
+        }
+        
       }
     },
     // 点击情绪tab
@@ -1445,7 +1499,79 @@ export default {
     onClose() {
       this.isPopup = false;
     },
-    getWeekResult() {
+    //循环调用3次 GetWeekResult 接口
+    async getWeekResultAny() {
+     
+      Promise.all([
+        await this.getWeekResultPro(1),
+        await this.getWeekResultPro(2),
+        await this.getWeekResultPro(3),
+      ]).then(res =>{
+       let weekResultLists = res.reduce((accumulator, currentValue) => accumulator.concat(currentValue), [])
+       
+       let typeMap  = {};
+       weekResultLists.forEach(item => {
+          if (!typeMap[item.name]) {
+            typeMap[item.name] = {
+              name: item.name,
+              recordId: [],
+              summary: [],
+              summaryLevel: [],
+              summaryDetails: [],
+              type: item.type,
+              
+            };
+            weekResultLists.push(typeMap[item.name]);
+          }
+          
+          typeMap[item.name].recordId.push(item.recordId);
+          typeMap[item.name].summary.push(item.summary);
+          typeMap[item.name].summaryLevel.push(item.summaryLevel);
+          let combinedArray = typeMap[item.name].summary.map((sum, index) => ({summary: sum, summaryLevel: typeMap[item.name].summaryLevel[index]}));
+          console.log(combinedArray);
+          typeMap[item.name].summaryDetails = combinedArray
+          
+        });
+        let array = Object.entries(typeMap);
+        this.weekResultList = array.reverse();
+        console.log("weekResultLists", this.weekResultList);
+        console.log("typeMap", typeMap);
+      });
+      
+    },
+    getWeekResultPro(type) {
+      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 /* '1929285069986332672' */,
+        type: type || this.emoType,
+      };
+      return new Promise(resolve => {
+        axios
+        .get(reqUrl, {
+          params: { ...reqParams },
+          /*  headers: { 'AccessToken': this.$store.getters.ssjlToken } */
+        }).then(res => {
+          const data = res.data.response;
+          let summaryList = data.map(item => {
+            return {
+                name: item.Name.replace("周报", "")
+                  .replace(/-/g, ".")
+                  .replace(/~/g, "-"),
+                recordId: item.RecordId,
+                summary: this.$replaceAll(item.Summary, '抑郁', '忧郁'),
+                summaryLevel: item.SummaryLevel,
+                type: item.Type,
+              };
+          });
+          resolve(summaryList)
+        })
+      })
+    },
+    getWeekResult(type) {
       this.$toast.loading("数据加载中");
       let baseUrl =
         process.env.NODE_ENV === "production"
@@ -1453,7 +1579,7 @@ export default {
           : "https://dbmq.rzliot.com/heart";
       let reqUrl = `${baseUrl}/api/Data/GetWeekResult`;
       let reqParams = {
-        uid: this.uid /* '2023101521270090082 */,
+        uid: this.uid /* '1929285069986332672' */,
         type: this.emoType,
       };
       axios
@@ -1480,16 +1606,33 @@ export default {
           this.$toast.success("数据加载完成");
         });
     },
-    onClickItem(recordId) {
-      this.$router.push({
-        name: "psychologicalReport",
-        query: {
-          recordId: recordId,
-          name: this.currentEmoName,
-          isShowLeft: true,
-          uid: this.uid,
-        },
-      });
+    onClickItem(item) {
+      if(this.pageType === 1) {
+        // 跳转去新的周报详情页
+        this.$router.push({
+          name: "reportDetails",
+          query: {
+            recordId: item.recordId[Number(this.psyCurrent) - 1],
+            name: this.currentEmoName,
+            isShowLeft: true,
+            uid: this.uid,
+            time: item.name,
+            current: 3,
+
+          },
+        });
+      } else {
+        this.$router.push({
+          name: "psychologicalReport",
+          query: {
+            recordId: item.recordId,
+            name: this.currentEmoName,
+            isShowLeft: true,
+            uid: this.uid,
+          },
+        });
+      }
+      
     },
   },
 };

src/views/health/psychological/reportDetails/index.scss

@@ -0,0 +1,323 @@
+.main-details {
+    height: 100vh;
+    width: 100%;
+    overflow: hidden;
+    background-color: #F5F5F5;
+    font-family: Source Han Sans CN;
+
+    .report-details {
+        height: calc(100vh - 88px);
+        overflow: scroll;
+        background-color: #fff;
+
+        .line {
+            height: 11px;
+            background-color: $lineGray;
+        }
+
+        .overall-rating {
+            padding: 23px 15px;
+            margin-bottom: 9px;
+
+            .con {
+                padding: 17px 18px;
+                display: flex;
+                justify-content: flex-start;
+                align-items: flex-start;
+                flex-direction: column;
+                font-size: 14px;
+                background: #FFFFFF;
+                border: 1px solid #535353;
+                box-shadow: 4px 5px 0px 0px #638EE4;
+                border-radius: 5px;
+
+                p {
+                    font-size: 18px;
+                    font-family: Source Han Sans CN;
+                    color: #666666;
+
+                    .bold {
+                        color: #282828;
+                        font-weight: bold;
+                    }
+                }
+
+                .space-between {
+                    width: 100%;
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+
+                    .time {
+                        font-size: 12px;
+                    }
+                }
+
+                .normal {
+                    font-size: 13px;
+                    line-height: 21px;
+                    text-align: left;
+                    color: #666666;
+                }
+
+                .bold-pro {
+                    color: #282828;
+                    font-size: 24px;
+                    font-weight: bold;
+                    padding: 12px 0;
+                }
+            }
+        }
+
+        .pie-chart-top {
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-start;
+            padding: 23px 15px 16px 15px;
+
+            p {
+                font-size: 12px;
+                font-family: Source Han Sans CN;
+                line-height: 21px;
+            }
+
+            .bold {
+                font-size: 18px;
+                font-weight: bold;
+                color: #282828;
+                line-height: 18px;
+            }
+        }
+
+        .count {
+            padding: 0 15px 5px 15px;
+            text-align: left;
+
+            p {
+                font-size: 12px;
+                font-family: Source Han Sans CN;
+                font-weight: 400;
+                color: #8B8B8B;
+                line-height: 18px;
+            }
+        }
+
+        .pie-chart-con {
+            flex: 1;
+            padding: 5px 0 10px 0;
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-start;
+            background-color: #fff;
+
+            .pie-chart-left {
+                position: relative;
+                height: 150px;
+                padding-left: 15px;
+                width: 35%;
+                @include center();
+
+                #pieChart {
+                    height: 106px;
+                    width: 106px;
+                }
+                #pieChartDay {
+                    height: 106px;
+                    width: 106px;
+                }
+            }
+
+            .pie-chart-right {
+                height: 150px;
+                width: 65%;
+                @include center();
+
+                .list {
+                    display: flex;
+                    justify-content: center;
+                    flex-direction: column;
+                    .item {
+                        width: 100%;
+                        display: flex;
+                        justify-content: space-between;
+                        align-items: center;
+                        font-size: 12px;
+                        padding: 9px 0;
+                        .item-left {
+                            display: flex;
+                            justify-content: flex-start;
+                            align-items: center;
+                            padding-right: 10px;
+
+                            .circle {
+                                height: 12px;
+                                width: 12px;
+                                margin: 0 4px;
+                            }
+
+                            span {
+                                font-size: 12px;
+                            }
+
+                            .text {
+                                color: #000;
+                                font-size: 12px;
+                            }
+                        }
+
+                        .item-right {
+                            @include center();
+                            span {
+                                font-size: 12px;
+                            }
+                        }
+                        .status {
+                            padding: 0 5px;
+                            @include center();
+                            img {
+                                height: 15px;
+                                width: 9px;
+                                padding: 0 3px ;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        .statistics {
+            position: relative;
+            padding: 5px 14px 5px 14px;
+            .list {
+                flex: 1;
+                width: 100%;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                font-size: 16px;
+
+                .item {
+                    @include center();
+                    width: 58px;
+                    /* height: px2rem(136); */
+                    flex-direction: column;
+
+                    .top {
+                        font-size: 12px;
+                    }
+
+                    .middle {
+                        font-size: 24px;
+                        font-weight: bold;
+                        padding: 5px;
+                    }
+
+                    .bottom {
+                        font-size: 9px
+                    }
+                }
+            }
+        }
+
+        .bar-chart {
+            height: 350px;
+            background-color: #fff;
+            padding: 0 5px;
+
+            .echart {
+                height: 350px;
+                padding: 0 5px;
+            }
+        }
+
+        .advice {
+            padding: 26px 15px 30px 15px;
+
+            .content {
+                background: #F2F6FF;
+                border-radius: 10px;
+                padding: 20px 15px;
+                text-align: left;
+
+                p {
+                    font-size: 15px;
+                    font-weight: 400;
+                    color: #707070;
+                    line-height: 23px;
+                }
+
+                .title {
+                    font-size: 18px;
+                    font-weight: bold;
+                    color: #638EE4;
+                    line-height: 18px;
+                    padding-bottom: 13px;
+                }
+            }
+        }
+
+        .overview {
+            padding: 0 15px 16px 15px;
+
+            .content {
+                .title {
+                    text-align: left;
+
+                    .title-text {
+                        font-size: 18px;
+                        font-weight: bold;
+                        color: #282828;
+                        line-height: 18px;
+                    }
+
+                    .mood-list {
+                        display: grid;
+                        grid-template-columns: repeat(2, 1fr); //定义了一个 2x2 的网格布
+                        grid-template-rows: repeat(2, 1fr);
+                        gap: 21px;
+                        padding: 21px 21px 22px 20px;
+
+                        .item {
+                            width: 107px;
+                            height: 94px;
+                            background-color: #F2F6FF;
+                            display: flex;
+                            justify-content: center;
+                            align-items: flex-start;
+                            flex-direction: column;
+                            padding-left: 30px;
+
+                            p {
+                                font-size: 14px;
+                                padding: 0;
+                                color: #666666;
+                                @include center();
+                                /* align-items: flex-end; */
+                                .day {
+                                    /* padding: 5px; */
+                                    font-size: 28px;
+                                }
+
+                                .day-text {
+                                    font-size: 12px;
+                                    padding: 0 5px;
+                                }
+                                img {
+                                    height: 15px;
+                                    width: 9px;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        &.no-data {
+            @include center();
+            flex-direction: column;
+            p {
+                font-size: 16px;
+            }
+        }
+    }
+}