update

- 优化 周报汇总切换

README.md

@@ -1174,3 +1174,8 @@ update
 
 - 增加 app打开充值h5跳转到话费查询页面
 - 增加 app点击订购套餐提示
+
+
+`2024.8.21`
+update
+- 优化 周报汇总切换

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 {
@@ -149,6 +150,10 @@ $newBlue: #638EE4;
                         height: 106px;
                         width: 106px;
                     }
+                    #pieChartDay {
+                        height: 106px;
+                        width: 106px;
+                    }
                 }
                 .pie-chart-right {
                     height: 150px;

src/views/health/psychological/index.vue

@@ -766,14 +766,19 @@ 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)
     );
@@ -1516,7 +1521,7 @@ export default {
           
         });
         let array = Object.entries(typeMap);
-        this.weekResultList = array;
+        this.weekResultList = array.reverse();
         console.log("weekResultLists", this.weekResultList);
         console.log("typeMap", typeMap);
       });
@@ -1529,7 +1534,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: type || this.emoType,
       };
       return new Promise(resolve => {
@@ -1562,7 +1567,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
@@ -1599,7 +1604,8 @@ export default {
             name: this.currentEmoName,
             isShowLeft: true,
             uid: this.uid,
-            time: item.name
+            time: item.name,
+            current: 3,
 
           },
         });

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

@@ -6,7 +6,7 @@
     font-family: Source Han Sans CN;
 
     .report-details {
-        height: calc(100vh - 120px);
+        height: calc(100vh - 88px);
         overflow: scroll;
         background-color: #fff;
 
@@ -121,6 +121,10 @@
                     height: 106px;
                     width: 106px;
                 }
+                #pieChartDay {
+                    height: 106px;
+                    width: 106px;
+                }
             }
 
             .pie-chart-right {

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

@@ -20,19 +20,6 @@
         </div>
       </div>
     </div>
-    <!-- 情绪切换 -->
-    <div class="psy-tab-bar">
-      <div class="psy-tab-con">
-        <div class="psy-tab-list">
-          <div :class="[
-            'psy-tab-item',
-            { active: psyCurrent === index, notClick: false },
-          ]" @click="onPsyTabClick(item.name, index)" v-for="(item, index) in psyList" :key="index">
-            <span>{{ item.text }}</span>
-          </div>
-        </div>
-      </div>
-    </div>
     <div class="main" v-show="current !== 3">
       <div class="top">
         <!-- 日期选择 -->
@@ -67,7 +54,7 @@
 
         <div class="pie-chart-con">
           <div class="pie-chart-left">
-            <div id="pieChart" ref="pieChart"></div>
+            <div id="pieChartDay" ref="pieChartDay"></div>
           </div>
 
           <div class="pie-chart-right">
@@ -117,9 +104,22 @@
       <!-- 分割线 -->
       <div class="line"></div>
       <!-- 底部 -->
+      <!-- 情绪切换 -->
+      <div class="psy-tab-bar">
+        <div class="psy-tab-con">
+          <div class="psy-tab-list">
+            <div :class="[
+              'psy-tab-item',
+              { active: psyCurrent === index, notClick: false },
+            ]" @click="onPsyTabClick(item.name, index)" v-for="(item, index) in psyList" :key="index">
+              <span>{{ item.text }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
       <div class="bottom">
         <div class="echart-container">
-          <div class="echart" ref="charts"></div>
+          <div class="echart" ref="dayCharts"></div>
         </div>
 
         <div class="line-gray"></div>
@@ -209,7 +209,20 @@
           </div>
 
         </div>
-        <div class="line"></div>
+        <!-- <div class="line"></div> -->
+        <!-- 情绪切换 -->
+        <div class="psy-tab-bar">
+          <div class="psy-tab-con">
+            <div class="psy-tab-list">
+              <div :class="[
+                'psy-tab-item',
+                { active: psyCurrent === index, notClick: false },
+              ]" @click="onPsyTabClick(item.name, index)" v-for="(item, index) in psyList" :key="index">
+                <span>{{ item.text }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
         <div class="pie-chart-top">
           <p class="bold">上周趋势对比</p>
           <p>{{ resetDate(weekResult.StartDate, weekResult.EndDate) || "--" }}</p>
@@ -481,6 +494,9 @@ export default {
       weekResultList: [], //周报新详情周报列表
       weekResult: {},
       isShowCompare: null, //是否显示周对比
+      pieDayEcharts: null, //非周报饼状图
+      pieDayData: [], //非周报饼状图
+      dayEcharts: null
     };
   },
   computed: {
@@ -749,6 +765,52 @@ export default {
         ],
       };
     },
+    pieDayOption() {
+      return {
+        tooltip: {
+          trigger: "item",
+          textStyle: {
+            fontSize: 14,
+          },
+          position: "right",
+        },
+        legend: {
+          top: "5%",
+          left: "center",
+          show: false,
+        },
+        series: [
+          {
+            type: "pie",
+            radius: ["40%", "80%"],
+            avoidLabelOverlap: false,
+            startAngle: 270, // 设置逆时针渲染
+            itemStyle: {
+              borderRadius: 5,
+              borderColor: "#fff",
+              borderWidth: 2,
+              fontSize: 16,
+            },
+            label: {
+              show: false,
+              position: "center",
+              fontSize: 16,
+            },
+            emphasis: {
+              label: {
+                show: false,
+                fontSize: 16,
+                fontWeight: "bold",
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            data: this.pieDayData,
+          },
+        ],
+      };
+    },
     titleLeft() {
       let text = this.emoName === "depression" ? "趋势" : "";
       let today = "";
@@ -821,27 +883,88 @@ export default {
       },
       deep: true,
     },
+    pieDayData: {
+      handler(n, o) {
+        this.initPieDayEchart();
+      },
+      deep: true,
+    }
   },
   created() {
     // 读取路由传过来的参数，根据路由传过来的参数判断是哪种情绪
     this.loadParams();
     this.initEchartText();
-    this.getPieData();
     this.getCalendarData();
+   
+  },
+  mounted() {
     this.getPsychologiclData();
     this.getWeekResultDetail();
     this.getWeekResult();
-  },
-  mounted() {
-    this.initEchart();
-    this.current = Number(this.$store.getters.tabClick) || 0;
+    /* this.initEchart(); */
+    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 = "心理监测";
+    /* window.addEventListener("resize", this.onResize, false); */
   },
+  destroyed(){
+    /* window.removeEventListener("resize", this.onResize, false); */
+},
   methods: {
+    /* onResize(){
+        if(this.pieEcharts){
+          this.pieEcharts.resize();
+        }
+        if(this.echarts) {
+          this.echarts.resize();
+        }
+    }, */
+    calcWeekImg(cur, last, callBackText) {
+      let imgurl = "";
+      let text = "";
+      if (isNotNull(cur) && isNotNull(last) && this.weekAndMonData.length > 0) {
+        let curNumber = Number(cur);
+        let latNumber = Number(last);
+        if (curNumber - latNumber == 0) {
+          text = "持平";
+        } else {
+          imgurl = curNumber < latNumber ? this.downImg : this.upImg;
+          text = Math.abs(curNumber - latNumber) + "天";
+        }
+        if (callBackText) {
+          return text;
+        } else {
+          return imgurl;
+        }
+      }
+    },
+    // 计算显示是上升or下降的图片
+    /**
+     *
+     * @param { 本周情绪比例} current
+     * @param { 上周情绪比例 } last
+     * @param { 是否返回对比比例 } isCallBackCompare
+     */
+     calcImg(current, last, isCallBackCompare) {
+        let imgUrl = "";
+        let compare = "";
+        if (isNotNull(current) && isNotNull(last)) {
+          compare = Number(current) - Number(last);
+          imgUrl = compare > 0 ? this.upImg : compare == 0 ? "" : this.downImg;
+        }
+        if (isCallBackCompare) {
+          return compare;
+        } else {
+          return imgUrl;
+        }
+    },
     loadParams() {
       let params = this.$route.query;
       if (params) {
@@ -1011,7 +1134,7 @@ export default {
             this.pieRightList.push(Mild);
             this.pieRightList.push(Moderate);
             this.pieRightList.push(Severe);
-            this.pieData = this.pieRightList.map((item) => {
+            this.pieDayData = this.pieRightList.map((item) => {
               item.value = item.count;
               item.itemStyle = {
                 color: item.color,
@@ -1305,6 +1428,20 @@ export default {
       }
       this.pieEcharts = this.$echarts.init(this.$refs.pieChart);
       this.pieEcharts.setOption(this.pieOption);
+
+
+     
+    },
+    initPieDayEchart() {
+      if (
+        this.pieDayEcharts != null &&
+        this.pieDayEcharts != "" &&
+        this.pieDayEcharts != undefined
+      ) {
+        this.pieDayEcharts.dispose();
+      }
+      this.pieDayEcharts = this.$echarts.init(this.$refs.pieChartDay);
+      this.pieDayEcharts.setOption(this.pieDayOption);
     },
     // 格式化日期显示参数
     formatter(day) {
@@ -1327,11 +1464,13 @@ export default {
     },
     //   返回
     onNavBack() {
-      this.params.name = "";
       this.$router.replace({
-        name: "psychologicalMain",
+        name: "psychological",
         query: {
-          ...this.params,
+          name: this.params.name,
+          uid: this.params.uid,
+          pageType: 1,
+          current: this.params.current
         },
       });
     },
@@ -1373,7 +1512,8 @@ export default {
       } else {
         // 周报菜单
         console.log("点击周报");
-        this.getWeekResultDetail()
+        this.onPsyTabClick(this.psyList[this.psyCurrent].name, this.psyCurrent);
+        /* this.getWeekResultDetail(); */
 
       }
     },
@@ -1464,15 +1604,31 @@ export default {
     },
     // 初始化折线图表
     initEchart() {
-      if (
+      if(this.current === 3) {
+        // 周报详情
+        if (
         this.echarts != null &&
         this.echarts != "" &&
         this.echarts != undefined
       ) {
+        this.echarts.resize();
         this.echarts.dispose();
       }
       this.echarts = this.$echarts.init(this.$refs.charts);
       this.echarts.setOption(this.defaultOptions);
+      } else {
+        if (
+        this.dayEcharts != null &&
+        this.dayEcharts != "" &&
+        this.dayEcharts != undefined
+      ) {
+        this.dayEcharts.resize();
+        this.dayEcharts.dispose();
+      }
+      this.dayEcharts = this.$echarts.init(this.$refs.dayCharts);
+      this.dayEcharts.setOption(this.defaultOptions);
+      }
+      
     },
     // 点击历史监测，打开日历
     onHistory() {
@@ -1588,7 +1744,7 @@ export default {
           : "https://dbmq.rzliot.com/heart";
       let reqUrl = `${baseUrl}/api/Data/GetWeekResult`;
       let reqParams = {
-        uid: /* this.uid */ '2023101521270090082',
+        uid: this.uid /* '2023101521270090082' */,
         type: type || this.emoType,
       };
       
@@ -1619,7 +1775,7 @@ export default {
           : "https://dbmq.rzliot.com/heart";
       let reqUrl = `${baseUrl}/api/Data/GetWeekResult`;
       let reqParams = {
-        uid: /* this.uid */ '2023101521270090082',
+        uid: this.uid /* '2023101521270090082' */,
         type: this.emoType,
       };
       return new Promise(resolve => {
@@ -1636,6 +1792,7 @@ export default {
                   .replace(/-/g, ".")
                   .replace(/~/g, "-") === time
           });
+          console.log("selectData", selectData);
           let recordId = selectData && selectData[0].RecordId;
           console.log("根据当前日期不同emoType得到的周报列表数据", selectData);
           this.$toast.success("数据加载完成");