From 7d59b5698b69058eca6fe76a38a0c3db37569d08 Mon Sep 17 00:00:00 2001
From: chenJinxu <2183691628@qq.com>
Date: Sat, 2 Mar 2024 18:21:00 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=20=E6=83=85=E7=BB=AA?=
 =?UTF-8?q?=E5=91=A8/=E6=9C=88=E8=AF=A6=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/router.config.js       |    8 +-
 src/views/insight/index.vue       |   19 +-
 src/views/insight/monthReport.vue | 1398 -----------------------------
 src/views/insight/signsReport.vue |  914 +++++++++++++++++++
 4 files changed, 931 insertions(+), 1408 deletions(-)
 delete mode 100644 src/views/insight/monthReport.vue
 create mode 100644 src/views/insight/signsReport.vue

diff --git a/src/router/router.config.js b/src/router/router.config.js
index 5510e44..c14f1c5 100644
--- a/src/router/router.config.js
+++ b/src/router/router.config.js
@@ -303,10 +303,10 @@ export const constantRouterMap = [
         meta: { title: '心理监测周报', keepAlive: false }
       },
       {
-        path: '/monthReport',
-        name: 'monthReport',
-        component: () => import('@/views/insight/monthReport'),
-        meta: { title: '心理监测月报', keepAlive: false }
+        path: '/signsReport',
+        name: 'signsReport',
+        component: () => import('@/views/insight/signsReport'),
+        meta: { title: '情绪报告', keepAlive: false }
       },
       {
         path: '/experts',
diff --git a/src/views/insight/index.vue b/src/views/insight/index.vue
index ba58c39..a7401e4 100644
--- a/src/views/insight/index.vue
+++ b/src/views/insight/index.vue
@@ -1,4 +1,5 @@
 <!--  -->
+
 <template>
   <div class="pageContent insight">
     <div class="periodNav">
@@ -51,7 +52,7 @@
 
     <div class="periodNav">
       <div class="periodItem minPeriodItem" :class="{ active: signActive == index }" v-for="(item, index) in signList"
-        :key="index" @click="onSignClick(index)">
+        :key="index" @click="onSignClick(index, item)">
         <span>{{ item.name }}</span>
       </div>
     </div>
@@ -204,15 +205,18 @@ export default {
       signList: [
         {
           grid: 'heartRateList',
-          name: '心率'
+          name: '心率',
+          label: 'heartrate'
         },
         {
           grid: 'temperatureList',
-          name: '体温'
+          name: '体温',
+          label: 'temperature'
         },
         {
           grid: null,
-          name: '运动'
+          name: '运动',
+          label: 'step'
         }
       ],
       heartRateList: [
@@ -1376,9 +1380,11 @@ export default {
     },
     onRouterTo(name) {
       this.$router.push({
-        name: name === 'emo' ? 'reportList' : 'monthReport',
+        name: name === 'emo' ? 'reportList' : 'signsReport',
         query: {
-          type: this.emoType
+          type: name === 'emo' ? this.emoType : this.signActive,
+          dateType: this.active, //日期类型
+          name: this.signList[this.signActive].label
         }
       });
     },
@@ -1445,6 +1451,7 @@ export default {
   }
 };
 </script>
+
 <style scoped lang="scss">
 @import './include.scss';
 
diff --git a/src/views/insight/monthReport.vue b/src/views/insight/monthReport.vue
deleted file mode 100644
index da59364..0000000
--- a/src/views/insight/monthReport.vue
+++ /dev/null
@@ -1,1398 +0,0 @@
-<!--  -->
-<template>
-  <div class="pageContent monthReport">
-    <NavBar title="月报" @on-click-left="onNavBack" right-text="历史"> </NavBar>
-    <!-- <div class="periodSwitch">
-      <div class="arrow arrowLeft">
-        <van-icon name="arrow-left"></van-icon>
-      </div>
-      <div class="timearea">2023-11-15~2023-11-22</div>
-      <div class="arrow arrowRight">
-        <van-icon name="arrow"></van-icon>
-      </div>
-    </div> -->
-
-    <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 class="pieMain" v-show="signActive !== 2">
-      <div class="label">
-        <div class="left">今日{{ pieTitle }}趋势</div>
-        <div class="right">
-          <span>检测次数：15次</span>
-        </div>
-      </div>
-      <!-- <div class="label history">
-        <div class="left"></div>
-        <div class="right">
-          <span>历史监测</span>
-        </div>
-      </div> -->
-      <div class="pie-chart-con">
-        <div class="pie-chart-left">
-          <div id="pieChart" ref="pieChart"></div>
-        </div>
-
-        <div class="pie-chart-right">
-          <div class="list">
-            <div class="item" v-for="(item, index) in pieRightList" :key="index">
-              <div class="item-left">
-                <div class="circle" :style="{ backgroundColor: item.color }"></div>
-                <span class="text">{{ item.text || '--' }}</span>
-              </div>
-
-              <div class="item-right">
-                <span :style="{ color: item.color }">{{ item.count ? item.count + '次' : '0次' }}</span>
-                <label :style="{ color: item.color }">{{
-                  item.percentage ? '(' + item.percentage + '%' + ')' : '(0%)'
-                }}</label>
-              </div>
-
-              <div class="status">
-                <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)) + '%'
-                    : '持平'
-                }}</span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="statistics">
-        <div class="list">
-          <div
-            class="item"
-            v-for="(item, index) in statisticsList"
-            :key="index"
-            :style="{ backgroundColor: item.bgColor }"
-          >
-            <div class="top">
-              <span>{{ item.label || '--' }}</span>
-            </div>
-
-            <div class="middle">
-              <span>{{ item.value || '--' }}</span>
-            </div>
-
-            <div class="bottom">
-              <span>{{ item.time || '--' }}</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="scatter">
-      <EchartBox
-        echartId="scatterCharts"
-        outTitle="24小时心率时间分布图"
-        :border="false"
-        height="200"
-        width="200"
-        :options="scatterOptions"
-      >
-        <template #custom-bot>
-          <div class="custom-bot">
-            <div class="list">
-              <div class="item" v-for="(item, index) in timeList" :key="index">
-                <span>{{ item }}</span>
-              </div>
-            </div>
-          </div>
-        </template>
-      </EchartBox>
-    </div>
-    <!-- todo 柱形图 -->
-    <!-- <div class="bar-chart-con" v-show="signActive !== 2"></div> -->
-    <div class="chart-title" v-show="signActive !== 2">
-      <p>{{ pieTitle }}数据图</p>
-    </div>
-    <div class="ChatBox" :class="{ hiddenChart: signActive == 2 }">
-      <div class="legendBox minLegendBox">
-        <div class="legend">
-          <div class="legendItem" :class="item.type" v-for="(item, index) in signGrid" :key="index">
-            <span>{{ item.name }}</span>
-          </div>
-        </div>
-      </div>
-      <div class="Chat signChart" id="signChart"></div>
-    </div>
-    <div class="ChatBox minChartBox" :class="{ hiddenChart: signActive != 2 }">
-      <h4>运动步数</h4>
-      <div class="Chat stepChart" id="stepChart"></div>
-      <div class="result">
-        <div class="wrapBox">
-          <div class="text">
-            <div class="left"><p>总步数：285</p></div>
-            <div class="right">
-              <img :src="upImg" alt="" />
-              <span>923</span>
-            </div>
-          </div>
-          <div class="text">
-            <div class="left"><p>平均步数：285</p></div>
-            <div class="right">
-              <img :src="downImg" alt="" />
-              <span>923</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="advice">
-      <div class="content">
-        <p class="title">健康建议</p>
-        <!-- <p>{{ weekResult.Advice || '--' }}</p> -->
-        <p>若要健，天天练，运动是健康的源泉</p>
-      </div>
-    </div>
-    <div class="grid">
-      <div
-        class="gridItem"
-        :class="{ minItem: signGrid.length % 3 == 0 }"
-        :style="`background:${item.color};`"
-        v-for="(item, index) in signGrid"
-        :key="index"
-      >
-        <div class="time">
-          <span class="number">5</span>
-          <span>天</span>
-        </div>
-        <div class="title">{{ item.name }}</div>
-      </div>
-    </div>
-    <div class="ChatBox minChartBox" :class="{ hiddenChart: signActive != 2 }">
-      <h4>热量消耗</h4>
-      <div class="Chat calorieChart" id="calorieChart"></div>
-      <div class="result">
-        <div class="wrapBox">
-          <div class="text">
-            <div class="left"><p>总消耗：285</p></div>
-            <div class="right">
-              <img :src="upImg" alt="" />
-              <span>923</span>
-            </div>
-          </div>
-          <div class="text">
-            <div class="left"><p>平均消耗：285</p></div>
-            <div class="right">
-              <img :src="downImg" alt="" />
-              <span>923</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { isNotNull } from '@/services/utils-service';
-import NavBar from '@/components/NavBar';
-import EchartBox from '@/components/EchartBox';
-export default {
-  components: {
-    NavBar,
-    EchartBox
-  },
-  data() {
-    return {
-      signActive: 0,
-      emotionActive: 0,
-      emotionList: [
-        {
-          name: '疲劳'
-        },
-        {
-          name: '压力'
-        },
-        {
-          name: '焦虑'
-        }
-      ],
-      pieData: [],
-      pieEcharts: null,
-      emotionChart: null,
-      signChart: null,
-      stepChart: null,
-      calorieChart: null,
-      pieRightList: [
-        {
-          text: '心率偏低',
-          count: 2,
-          percentage: '80',
-          color: '#8dc21f'
-        },
-        {
-          text: '心率偏高',
-          count: 1,
-          percentage: '80',
-          color: '#ff5f8b'
-        },
-        {
-          text: '心率正常',
-          count: 12,
-          percentage: '80',
-          color: '#179b3b'
-        }
-      ],
-      upImg: require('@/assets/today/icons/up.png'),
-      downImg: require('@/assets/today/icons/down.png'),
-      statisticsList: [
-        { label: '最大值', value: '75', time: '08:15', bgColor: '#ff5f8b' },
-        { label: '最小值', value: '40', time: '10:15', bgColor: '#189b3b' },
-        { label: '最近值', value: '50', time: '18:15', bgColor: '#2ea7e0' }
-      ],
-      signList: [
-        {
-          grid: 'heartRateList',
-          name: '心率'
-        },
-        {
-          grid: 'temperatureList',
-          name: '体温'
-        },
-        {
-          grid: 'stepList',
-          name: '运动'
-        }
-      ],
-      heartRateList: [
-        {
-          name: '正常',
-          type: 'moderate',
-          color: '#179B3B'
-        },
-        {
-          name: '偏高',
-          type: 'severe',
-          color: '#FF5F8B'
-        },
-        {
-          name: '偏低',
-          type: 'mild',
-          color: '#2EA7E0'
-        }
-      ],
-      temperatureList: [
-        {
-          name: '正常',
-          type: 'moderate',
-          color: '#179B3B'
-        },
-        {
-          name: '发烧',
-          type: 'severe',
-          color: '#FF5F8B'
-        }
-      ],
-      stepList: [
-        {
-          name: '>=3000',
-          type: 'moderate',
-          color: '#179B3B'
-        },
-        {
-          name: '<=3000',
-          type: 'severe',
-          color: '#FF5F8B'
-        }
-      ],
-      timeList: ['0', '6', '12', '18', '24']
-    };
-  },
-  computed: {
-    scatterOptions() {
-      return {
-        backgroundColor: 'rgba(255, 255, 255, 1)',
-        grid: {
-          top: '1%',
-          left: '10%',
-          right: '10%',
-          bottom: '1%'
-        },
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            // 坐标轴指示器，坐标轴触发有效
-            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
-          }
-        },
-        xAxis: {
-          type: 'value',
-          axisLine: {
-            show: false
-          },
-          axisTick: {
-            show: false
-          },
-          axisLabel: {
-            margin: 15
-          },
-          show: false
-        },
-        yAxis: {
-          type: 'category',
-          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'].reverse(),
-          show: true
-        },
-        series: [
-          {
-            data: [120, 200, 150, 80, 70, 110, 130],
-            type: 'bar',
-            stack: 'one',
-            barWidth: 20,
-            itemStyle: {
-              borderWidth: 3,
-              borderColor: 'rgba(255, 255, 255, 1)', //同背景色一样
-              barBorderRadius: 120
-            },
-
-            emphasis: {
-              itemStyle: {
-                borderColor: 'rgba(255, 255, 255, 1)'
-              }
-            }
-          },
-          {
-            data: [120, 30, 150, 80, 70, 110, 130],
-            type: 'bar',
-            stack: 'one', //堆叠
-            barWidth: 20,
-            itemStyle: {
-              borderWidth: 3, //用border设置两个柱形图之间的间距
-              borderColor: 'rgba(255, 255, 255, 1)', //同背景色一样
-              barBorderRadius: 120
-            },
-            emphasis: {
-              itemStyle: {
-                borderColor: 'rgba(255, 255, 255, 1)'
-              }
-            }
-          },
-          {
-            data: [120, 30, 150, 80, 70, 110, 130],
-            type: 'bar',
-            stack: 'one', //堆叠
-            barWidth: 20,
-            itemStyle: {
-              borderWidth: 3, //用border设置两个柱形图之间的间距
-              borderColor: 'rgba(255, 255, 255, 1)', //同背景色一样
-              barBorderRadius: 120
-            },
-            emphasis: {
-              itemStyle: {
-                borderColor: 'rgba(255, 255, 255, 1)'
-              }
-            }
-          },
-          {
-            data: [120, 30, 150, 80, 70, 110, 130],
-            type: 'bar',
-            stack: 'one', //堆叠
-            barWidth: 20,
-            itemStyle: {
-              borderWidth: 3, //用border设置两个柱形图之间的间距
-              borderColor: 'rgba(255, 255, 255, 1)', //同背景色一样
-              barBorderRadius: 120
-            },
-            emphasis: {
-              itemStyle: {
-                borderColor: 'rgba(255, 255, 255, 1)'
-              }
-            }
-          }
-        ]
-      };
-    },
-    pieOption() {
-      return {
-        tooltip: {
-          trigger: 'item',
-          textStyle: {
-            fontSize: 14
-          },
-          position: 'right'
-        },
-        legend: {
-          top: '5%',
-          left: 'center',
-          show: false
-        },
-        series: [
-          {
-            type: 'pie',
-            radius: ['50%', '90%'],
-            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.pieData
-          }
-        ]
-      };
-    },
-    signGrid() {
-      let list = [];
-      if (this.signList[this.signActive].grid) {
-        let temp = this[`${this.signList[this.signActive].grid}`];
-        if (temp) {
-          list = temp;
-        }
-      }
-      return list;
-    },
-    heartRateMap() {
-      let map = new Map();
-      this.heartRateList.forEach(item => {
-        map.set(item.name, item.color);
-      });
-      return map;
-    },
-    temperatureMap() {
-      let map = new Map();
-      this.temperatureList.forEach(item => {
-        map.set(item.name, item.color);
-      });
-      return map;
-    },
-    stepMap() {
-      let map = new Map();
-      this.stepList.forEach(item => {
-        map.set(item.name, item.color);
-      });
-      return map;
-    },
-    pieTitle() {
-      return this.signList[this.signActive].name;
-    }
-  },
-  watch: {
-    active(val) {
-      console.log(val);
-      this.emotionActive = 0;
-      this.signActive = 0;
-      this.$nextTick(() => {
-        this.initData();
-      });
-    },
-    /* emotionActive(val) {
-      console.log(val);
-      this.$nextTick(() => {
-        this.initEmotionChart();
-      });
-    }, */
-    signActive(val) {
-      console.log(val);
-      this.$nextTick(() => {
-        this.initSignChart();
-      });
-    }
-  },
-  created() {
-    this.pieData = this.pieRightList.map(item => {
-      item.value = item.count;
-      item.itemStyle = {
-        color: item.color
-      };
-      return item;
-    });
-  },
-  mounted() {
-    this.initPieEchart();
-    this.initData();
-  },
-  methods: {
-    onNavBack() {
-      this.$router.push({
-        name: 'Insight'
-      });
-    },
-    onEmotionClick(index) {
-      this.emotionActive = index;
-    },
-    onSignClick(index) {
-      this.signActive = index;
-    },
-    initData() {
-      if (!this.signChart) {
-        this.signChart = this.$echarts.init(document.getElementById('signChart'));
-      }
-      if (!this.stepChart) {
-        this.stepChart = this.$echarts.init(document.getElementById('stepChart'));
-      }
-      if (!this.calorieChart) {
-        this.calorieChart = this.$echarts.init(document.getElementById('calorieChart'));
-      }
-      this.initSignChart();
-    },
-    initSignChart() {
-      let option = this.getOption();
-
-      if (this.signActive == 0) {
-        //测试
-        let data = [
-          {
-            time: '5.11',
-            value: 50
-          },
-          {
-            time: '5.12',
-            value: 60
-          },
-          {
-            time: '5.13',
-            value: 70
-          },
-          {
-            time: '5.14',
-            value: 80
-          },
-          {
-            time: '5.15',
-            value: 120
-          },
-          {
-            time: '5.16',
-            value: 130
-          },
-          {
-            time: '5.17',
-            value: 150
-          }
-        ];
-
-        this.formateHeartRateData(option, data);
-        this.signChart.setOption(option);
-      } else if (this.signActive == 1) {
-        //测试
-        let data = [
-          {
-            time: '5.11',
-            value: 36
-          },
-          {
-            time: '5.12',
-            value: 38
-          },
-          {
-            time: '5.13',
-            value: 37
-          },
-          {
-            time: '5.14',
-            value: 36
-          },
-          {
-            time: '5.15',
-            value: 38
-          },
-          {
-            time: '5.16',
-            value: 37
-          },
-          {
-            time: '5.17',
-            value: 39
-          }
-        ];
-        this.formateTemperatureData(option, data);
-        this.signChart.setOption(option);
-      } else if (this.signActive == 2) {
-        option = this.getOption(false);
-        let option2 = this.getOption(false);
-
-        //测试
-        let data = [
-          {
-            time: '5.11',
-            value: 36
-          },
-          {
-            time: '5.12',
-            value: 38
-          },
-          {
-            time: '5.13',
-            value: 37
-          },
-          {
-            time: '5.14',
-            value: 36
-          },
-          {
-            time: '5.15',
-            value: 38
-          },
-          {
-            time: '5.16',
-            value: 37
-          },
-          {
-            time: '5.17',
-            value: 39
-          }
-        ];
-        //测试
-        let data2 = [
-          {
-            time: '5.11',
-            value: 36
-          },
-          {
-            time: '5.12',
-            value: 38
-          },
-          {
-            time: '5.13',
-            value: 37
-          },
-          {
-            time: '5.14',
-            value: 36
-          },
-          {
-            time: '5.15',
-            value: 38
-          },
-          {
-            time: '5.16',
-            value: 37
-          },
-          {
-            time: '5.17',
-            value: 39
-          }
-        ];
-
-        this.formateStepData(option, data);
-        this.formateCalorieData(option2, data2);
-
-        this.stepChart.setOption(option);
-        this.calorieChart.setOption(option2);
-      }
-    },
-    formateStepData(option, data) {
-      let xdata = [];
-      let ydata = [];
-      data.forEach(item => {
-        xdata.push(item.time);
-        ydata.push({
-          value: item.value,
-          label: {
-            show: true
-          },
-          itemStyle: {
-            color: this.formateTemperatureColor(item.value)
-          }
-        });
-      });
-      option.xAxis.data = xdata;
-      option.series[0].data = ydata;
-      // 隐藏y轴
-      option.yAxis.show = false;
-    },
-    formateTemperatureData(option, data) {
-      let xdata = [];
-      let ydata = [];
-      let fill = [];
-      let max = 0;
-      data.forEach(item => {
-        if (item.value > max) {
-          max = item.value;
-        }
-      });
-      data.forEach(item => {
-        xdata.push(item.time);
-        fill.push({
-          value: max - item.value,
-          label: {
-            show: false
-          },
-          itemStyle: {
-            color: this.formateTemperatureColor(item.value)
-          }
-        });
-        ydata.push({
-          value: item.value,
-          label: {
-            show: true
-          },
-          itemStyle: {
-            color: this.formateTemperatureColor(item.value)
-          }
-        });
-      });
-      option.xAxis.data = xdata;
-      option.series[0].data = ydata;
-      option.series[1].data = fill;
-      // 规定最小值
-      option.yAxis.min = 35;
-      // 规定最大值
-      option.yAxis.max = max;
-    },
-    formateTemperatureColor(value) {
-      if (value > 38) {
-        return this.temperatureMap.get('发烧');
-      } else {
-        return this.temperatureMap.get('正常');
-      }
-    },
-    formateCalorieData(option, data) {
-      let xdata = [];
-      let ydata = [];
-      data.forEach(item => {
-        xdata.push(item.time);
-        ydata.push({
-          value: item.value,
-          label: {
-            show: true
-          },
-          itemStyle: {
-            color: this.formateTemperatureColor(item.value)
-          }
-        });
-      });
-      option.xAxis.data = xdata;
-      option.series[0].data = ydata;
-      // 隐藏y轴
-      option.yAxis.show = false;
-    },
-    formateHeartRateData(option, data) {
-      let xdata = [];
-      let ydata = [];
-      let fill = [];
-      let max = 0;
-      data.forEach(item => {
-        if (item.value > max) {
-          max = item.value;
-        }
-      });
-      data.forEach(item => {
-        xdata.push(item.time);
-        fill.push({
-          value: max - item.value,
-          label: {
-            show: false
-          },
-          itemStyle: {
-            color: this.formateHeartRateColor(item.value)
-          }
-        });
-        ydata.push({
-          value: item.value,
-          label: {
-            show: true
-          },
-          itemStyle: {
-            color: this.formateHeartRateColor(item.value)
-          }
-        });
-      });
-      option.xAxis.data = xdata;
-      option.series[0].data = ydata;
-      option.series[1].data = fill;
-      // 规定最小值
-      option.yAxis.min = 40;
-      // 规定最大值
-      option.yAxis.max = 150;
-      //设置高压标线
-      option.series[1].markLine = {
-        data: [
-          {
-            symbol: 'pin',
-            silent: true,
-            yAxis: 120,
-            lineStyle: {
-              color: '#C1272D'
-            },
-            label: {
-              color: '#C1272D'
-            }
-          }
-        ]
-      };
-    },
-    formateHeartRateColor(value) {
-      if (value > 120) {
-        return this.heartRateMap.get('偏高');
-      } else if (value >= 60) {
-        return this.heartRateMap.get('正常');
-      } else {
-        return this.heartRateMap.get('偏低');
-      }
-    },
-    getOption(point = true) {
-      let option = {
-        grid: {
-          top: '10%',
-          left: '10%',
-          right: '10%',
-          bottom: '20%'
-        },
-        xAxis: {
-          type: 'category',
-          axisLine: {
-            show: false
-          },
-          axisTick: {
-            show: false
-          }
-        },
-        yAxis: {
-          type: 'value'
-        },
-        series: [
-          {
-            type: 'bar',
-            barMaxWidth: 15,
-            stack: 'value',
-            stackStrategy: 'all',
-            animation: false,
-            label: {
-              show: true,
-              width: 15,
-              height: 15,
-              backgroundColor: '#fff',
-              borderRadius: 50,
-              borderWidth: 3,
-              borderColor: 'inherit',
-              verticalAlign: 'middle',
-              position: 'insideTop',
-              formatter: function () {
-                return '';
-              }
-            },
-            itemStyle: {
-              borderRadius: [0, 0, 12, 12]
-            }
-          },
-          {
-            type: 'bar',
-            barMaxWidth: 15,
-            stack: 'value',
-            stackStrategy: 'all',
-            animation: false,
-            itemStyle: {
-              borderRadius: [12, 12, 0, 0]
-            }
-          }
-        ]
-      };
-
-      if (!point) {
-        option.series = [
-          {
-            type: 'bar',
-            barMaxWidth: 15,
-            label: {
-              show: true,
-              color: '#000',
-              position: 'outside'
-            },
-            itemStyle: {
-              borderRadius: 12
-            }
-          }
-        ];
-      }
-
-      return option;
-    },
-    initPieEchart() {
-      if (this.pieEcharts != null && this.pieEcharts != '' && this.pieEcharts != undefined) {
-        this.pieEcharts.dispose();
-      }
-      this.pieEcharts = this.$echarts.init(this.$refs.pieChart);
-      this.pieEcharts.setOption(this.pieOption);
-    },
-    /**
-     *
-     * @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;
-      }
-    }
-  }
-};
-</script>
-<style scoped lang="scss">
-@import './include.scss';
-.monthReport {
-  padding-top: 100px;
-
-  .periodNav {
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-    .periodItem {
-      width: 48%;
-      font-size: 28px;
-      color: black;
-      text-align: center;
-      padding: 12px;
-      border-radius: 30px;
-      background: #e6e6e6;
-      &.active {
-        color: white;
-        background: #179b3b;
-      }
-    }
-    .minPeriodItem {
-      width: 32%;
-      padding: 8px;
-    }
-  }
-
-  .pie-chart-con {
-    flex: 1;
-    padding: 10px 0 20px 0;
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    background-color: #fff;
-
-    .pie-chart-left {
-      position: relative;
-      height: 350px;
-      width: 300px;
-      padding-left: 30px;
-      @include center();
-      #pieChart {
-        height: 350px;
-        width: 350px;
-      }
-    }
-
-    .pie-chart-right {
-      height: 280px;
-      width: 65%;
-      display: flex;
-      justify-content: flex-end;
-      align-items: flex-end;
-
-      .list {
-        display: flex;
-        justify-content: center;
-        flex-direction: column;
-        .item {
-          width: 100%;
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          font-size: 24px;
-          padding: 18px 0;
-          .item-left {
-            display: flex;
-            justify-content: flex-start;
-            align-items: center;
-            padding-right: 20px;
-
-            .circle {
-              height: 24px;
-              width: 24px;
-              margin: 0 8px;
-            }
-
-            span {
-              font-size: 24px;
-            }
-
-            .text {
-              color: #000;
-              font-size: 24px;
-            }
-          }
-
-          .item-right {
-            @include center();
-            span {
-              font-size: 24px;
-            }
-          }
-          .status {
-            padding: 0 10px;
-            @include center();
-            img {
-              height: 30px;
-              width: 18px;
-              padding: 0 6px;
-            }
-          }
-        }
-      }
-    }
-  }
-  .periodSwitch {
-    display: flex;
-    width: 100%;
-    justify-content: space-between;
-    align-items: center;
-    /* padding: 50px 0px; */
-    padding-bottom: 30px;
-
-    .timearea {
-      font-size: 28px;
-      justify-self: center;
-      color: gray;
-    }
-    .arrow {
-      font-size: 45px;
-    }
-  }
-  .bmi {
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    white-space: nowrap;
-    padding: 40px 8px 0 8px;
-    font-weight: bold;
-
-    p {
-      padding: 0 5px;
-      font-size: 28px;
-    }
-    .van-button {
-      padding: 5px 10px;
-      margin-left: 50px;
-      font-size: 14px;
-      color: #333;
-      border-radius: 30px;
-    }
-  }
-  .label {
-    position: relative;
-    font-size: 40px;
-    font-weight: bold;
-    padding: 30px 10px 10px 0;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    .right {
-      position: relative;
-      font-size: 30px;
-      color: $border_color;
-    }
-    &.history {
-      padding: 0 20px;
-      font-size: 36px;
-      font-weight: 400;
-      color: $border_color;
-    }
-  }
-  .statistics {
-    height: 100%;
-    padding: 10px 20px;
-    .list {
-      display: grid;
-      grid-template-columns: repeat(3, 1fr); //定义了一个 3x3 的网格布
-      /* grid-template-rows: repeat(3, 1fr); */
-      gap: 40px;
-      font-size: 32px;
-      .item {
-        display: flex;
-        justify-content: flex-start;
-        align-items: flex-start;
-        padding: 30px;
-        /* height: px2rem(136); */
-        flex-direction: column;
-        border: 1px solid $border_color;
-        border-radius: 30px;
-        color: #fff;
-        .top {
-          font-size: 24px;
-        }
-
-        .middle {
-          font-size: 48px;
-        }
-
-        .bottom {
-          font-size: 18px;
-        }
-      }
-    }
-  }
-  .scatter {
-    border: none;
-    height: 600px;
-    .custom-bot {
-      .list {
-        height: 40px;
-        padding: 0 20px;
-        display: flex;
-        justify-content: space-around;
-        align-items: flex-start;
-        font-size: 28px;
-      }
-    }
-  }
-  .chart-title {
-    padding: 30px 30px 0 30px;
-    font-size: 36px;
-    font-weight: bold;
-    color: #282828;
-  }
-  .ChatBox {
-    overflow: hidden;
-    width: calc(100vw - 60px);
-    height: 600px;
-    border: 2px solid #cdf348;
-    border-radius: 70px;
-    margin-top: 30px;
-    h4 {
-      padding: 40px 0 10px 60px;
-    }
-    .legendBox {
-      width: 100%;
-      height: 150px;
-      display: flex;
-      justify-content: flex-end;
-      align-items: center;
-      padding: 0 30px;
-
-      .legend {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: flex-end;
-        align-items: center;
-        font-size: 20px;
-
-        .legendItem {
-          position: relative;
-          width: 205px;
-          margin-top: 10px;
-          margin-right: 20px;
-
-          &:nth-child(2n) {
-            margin-right: 0;
-          }
-        }
-        .not {
-          .number {
-            color: #179b3b;
-          }
-          &::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            bottom: 0;
-            left: -20px;
-            width: 15px;
-            height: 15px;
-            background: #179b3b;
-            border-radius: 50%;
-            margin: auto;
-          }
-        }
-        .mild {
-          .number {
-            color: #2ea7e0;
-          }
-          &::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            bottom: 0;
-            left: -20px;
-            width: 15px;
-            height: 15px;
-            background: #2ea7e0;
-            border-radius: 50%;
-            margin: auto;
-          }
-        }
-        .moderate {
-          .number {
-            color: #8dc21f;
-          }
-          &::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            bottom: 0;
-            left: -20px;
-            width: 15px;
-            height: 15px;
-            background: #8dc21f;
-            border-radius: 50%;
-            margin: auto;
-          }
-        }
-        .severe {
-          .number {
-            color: #ff5f8b;
-          }
-          &::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            bottom: 0;
-            left: -20px;
-            width: 15px;
-            height: 15px;
-            background: #ff5f8b;
-            border-radius: 50%;
-            margin: auto;
-          }
-        }
-      }
-    }
-    .minLegendBox {
-      .legend {
-        .legendItem {
-          width: auto;
-          margin-right: 50px;
-
-          &:nth-child(2n) {
-            margin-right: 50px;
-          }
-          &:last-child {
-            margin-right: 0;
-          }
-        }
-      }
-    }
-    .Chat {
-      width: calc(100vw - 60px);
-      height: 500px;
-    }
-    .result {
-      height: 140px;
-      padding: 0 30px;
-      border-radius: 70px;
-      display: flex;
-      justify-content: center;
-      align-items: flex-start;
-      flex-direction: column;
-      .wrapBox {
-        padding: 10px 180px 10px 60px;
-        width: 100%;
-        background-color: #e6e6e6;
-        border-radius: 70px;
-      }
-      .text {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        .right {
-          @include center();
-          img {
-            height: 30px;
-            width: 30px;
-            object-fit: contain;
-            margin: 0 5px;
-          }
-        }
-      }
-    }
-  }
-  .minChartBox {
-    height: 760px;
-  }
-  .hiddenChart {
-    width: 0;
-    height: 0;
-  }
-
-  .grid {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    color: white;
-    font-size: 30px;
-
-    .gridItem {
-      width: calc((100vw - 60px) * 0.48);
-      height: calc((100vw - 60px) * 0.48);
-      border-radius: 60px;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      margin-top: 30px;
-
-      .time {
-        .number {
-          font-size: 90px;
-          font-weight: bold;
-        }
-      }
-    }
-    .minItem {
-      width: calc((100vw - 60px) * 0.32);
-      height: calc((100vw - 60px) * 0.32);
-      font-size: 28px;
-
-      .time {
-        .number {
-          font-size: 70px;
-          font-weight: bold;
-        }
-      }
-    }
-  }
-  .advice {
-    padding: 52px 20px 60px 20px;
-    .content {
-      background: #f2f6ff;
-      border-radius: 20px;
-      padding: 0px 10px;
-      text-align: left;
-
-      p {
-        font-size: 24px;
-        color: #707070;
-        line-height: 46px;
-      }
-      .title {
-        font-size: 26px;
-        font-weight: bold;
-        /* color: $green; */
-        line-height: 36px;
-      }
-    }
-  }
-}
-</style>
diff --git a/src/views/insight/signsReport.vue b/src/views/insight/signsReport.vue
new file mode 100644
index 0000000..48c8162
--- /dev/null
+++ b/src/views/insight/signsReport.vue
@@ -0,0 +1,914 @@
+<!--  -->
+
+<template>
+  <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="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, index)" v-for="(item, index) in psyList" :key="index">
+            <span>{{ item.text }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="main">
+      <div class="pie-chart-con">
+        <div class="pie-chart-left">
+          <div id="pieChart" ref="pieChart"></div>
+        </div>
+
+        <div class="pie-chart-right">
+          <div class="list">
+            <div class="item" v-for="(item, index) in pieRightList" :key="index">
+              <div class="item-left">
+                <div class="circle" :style="{ backgroundColor: item.color }"></div>
+
+                <span class="text">{{ item.text || '--' }}</span>
+              </div>
+
+              <div class="item-right">
+                <span :style="{ color: item.color }">{{ item.count ? item.count + '天' : `0天` }}</span>
+                <label :style="{ color: item.color }">{{ '(' + item.percentage + ')' }}%</label>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="statistics">
+        <div class="list">
+          <div class="item" v-for="(item, index) in statisticsList" :key="index"
+            :style="{ backgroundColor: item.bgColor }">
+            <div class="top">
+              <span>{{ item.label || '--' }}</span>
+            </div>
+
+            <div class="middle">
+              <span>{{ item.value || '--' }}</span>
+            </div>
+
+            <div class="bottom">
+              <span>{{ item.time || '--' }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="bottom">
+
+        <div class="echart-container">
+          <div class="echart">
+            <EchartBox echartId="charts" :outTitle="emoLegend.outTitle" rightRowType="in-line-block" height="200"
+              width="200" :legend="emoLegend" :options="defaultOptions"></EchartBox>
+          </div>
+        </div>
+        <div class="result">
+          <div class="result-con">
+            <div class="title">
+              <span class="title-text">{{ surveyTitle }}</span>
+              <div class="mood-list" v-if="emotionList.length > 0">
+                <div class="item" v-for="(item, index) in emotionList" :key="index"
+                  :style="{ backgroundColor: item.color }">
+                  <p>
+                    <span class="day">{{ item.days }}</span>
+                    <span class="day-text">天</span>
+                  </p>
+
+                  <p>{{ item.text }}</p>
+                </div>
+              </div>
+              <div class="mood-list-no-data" v-else>
+                <div class="no-data">
+                  <img :src="noDataImg" alt />
+                  <p>暂无数据</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios';
+import NavBar from '@/components/NavBar';
+import { Signsmodel } from '@/config/models';
+import EchartBox from '@/components/EchartBox';
+export default {
+  components: {
+    NavBar, EchartBox
+  },
+  data() {
+    return {
+      count: 0,
+      isPreClick: true,
+      isAddClick: true,
+      clickFlag: true, //左右日期按钮是否给予点击
+      weekList: [],
+      maxCount: '',
+      currentRecord: {},
+      psyCurrent: 0,
+      psyList: [
+        { name: 'temperature', text: '体温', value: 1 },
+        { name: 'heartrate', text: '心率', value: 0 },
+        { name: 'step', text: '步数', value: 2 }
+      ],
+      healthyType: '',
+      emoName: '',
+      currentEmoName: '',
+      pieRightList: [
+        {
+          text: "无情绪倾向",
+          count: 12,
+          percentage: "80",
+          color: "#179b3b"
+        },
+        {
+          text: "轻度情绪倾向",
+          count: 2,
+          percentage: "80",
+          color: "#8dc21f"
+        },
+        {
+          text: "中度情绪倾向",
+          count: 1,
+          percentage: "80",
+          color: "#2ea7e0"
+        },
+        {
+          text: "重度情绪倾向",
+          count: 1,
+          percentage: "80",
+          color: "#ff5f8b"
+        }
+      ],
+      pieEcharts: null,
+      pieData: [], //饼状图数据
+      statisticsList: [
+        { label: '最大值', value: '75', time: '08:15', bgColor: '#ff5f8b' },
+        { label: '最小值', value: '40', time: '10:15', bgColor: '#189b3b' },
+        { label: '最近值', value: '50', time: '18:15', bgColor: '#2ea7e0' }
+      ],
+      emotionList: [
+        { days: "5", text: "无情绪倾向", color: "#179b3b" },
+        { days: "4", text: "轻度情绪倾向", color: "#8dc21f" },
+        { days: "3", text: "中度情绪倾向", color: "#2ea7e0" },
+        { days: "2", text: "重度情绪倾向", color: "#ff5f8b" }
+      ],
+    }
+  },
+  computed: {
+
+    pieOption() {
+      return {
+        tooltip: {
+          trigger: 'item',
+          textStyle: {
+            fontSize: 16
+          },
+          position: 'right'
+        },
+        legend: {
+          top: '5%',
+          left: 'center',
+          show: false
+        },
+        series: [
+          {
+            type: 'pie',
+            radius: ['40%', '90%'],
+            avoidLabelOverlap: false,
+            startAngle: 270, // 设置逆时针渲染
+            itemStyle: {
+              borderRadius: 10,
+              borderColor: '#fff',
+              borderWidth: 4,
+              fontSize: 16
+            },
+            label: {
+              show: false,
+              position: 'center',
+              fontSize: 16
+            },
+            emphasis: {
+              label: {
+                show: false,
+                fontSize: 16,
+                fontWeight: 'bold'
+              }
+            },
+            labelLine: {
+              show: false
+            },
+            data: this.pieData
+          }
+        ]
+      };
+    },
+    emoLegend() {
+      if (this.healthyType === 0) {
+        return {
+          title: '',
+          outTitle: `${this.emoName}数据图`,
+          list: [
+            { name: `${this.emoName}偏低`, color: '#2ea7e0' },
+            { name: `${this.emoName}正常`, color: '#179b3b' },
+            { name: `${this.emoName}偏高`, color: '#ff5f8b' }
+          ]
+        };
+      } else if (this.healthyType === 1) {
+        return {
+          title: '',
+          outTitle: `${this.emoName}数据图`,
+          list: [
+            { name: `${this.emoName}正常`, color: '#179b3b' },
+            { name: `${this.emoName}偏高`, color: '#ff5f8b' }
+          ]
+        };
+      } else {
+        return {
+          title: '',
+          outTitle: `${this.emoName}数据图`,
+          list: [
+            { name: `${this.emoName}偏低`, color: '#2ea7e0' },
+            { name: `${this.emoName}正常`, color: '#179b3b' },
+            { name: `${this.emoName}偏高`, color: '#ff5f8b' }
+          ]
+        };
+      }
+    },
+    // 默认折线图配置，echarts 具体配置 见 https://echarts.apache.org/zh/option.html#title
+    defaultOptions() {
+      return {
+        time: {
+          useUTC: false
+        },
+        grid: {
+          show: true,
+          borderWidth: 0,
+          top: '10%',
+          left: '5%',
+          right: '10%',
+          bottom: '20%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            show: false
+          },
+          textStyle: {
+            fontSize: 10
+          },
+          axisTick: {
+            show: false
+          },
+          splitLine: {
+            show: false,
+            lineStyle: {
+              color: '#ddd',
+              width: 4
+            }
+          },
+          nameLocation: 'center',
+          axisLabel: {
+            show: true,
+            fontSize: 12,
+            showMinLabel: true, //显示最小值
+            showMaxLabel: true, //显示最大值
+            marginBottom: 10 // 调整标签与轴线的距离
+          },
+          data: this.xAxisData
+        },
+        dataZoom: [
+          {
+            start: 0,
+            end: 100,
+            textStyle: {
+              color: '#FFF',
+              fontSize: 14
+            },
+            show: true,
+            height: 20,
+            bottom: 8,
+            handleStyle: {
+              borderWidth: 4,
+              borderCap: 'square'
+            }
+          }
+        ],
+        tooltip: {
+          trigger: 'axis',
+          textStyle: {
+            fontSize: 16,
+            align: 'center'
+          },
+          formatter: function (params) {
+            return params[0].marker + params[0].name + '</br>' + params[0].value;
+          }
+        },
+        yAxis: {
+          type: 'value',
+          /*  max: 100,
+          min: 0,
+          interval: 20, */
+          splitNumber: 1,
+          boundaryGap: ['5%', '5%'],
+          nameTextStyle: {
+            fontSize: 13
+          },
+          alignTicks: false,
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            show: true,
+            fontSize: 13
+          },
+          splitLine: {
+            show: false,
+            lineStyle: {
+              color: '#ddd',
+              width: 1
+            }
+          }
+        },
+        series: [
+          {
+            name: `无${this.emoName}倾向`,
+            type: 'line',
+            padding: 10,
+            smooth: true,
+            data: this.emotionData,
+            symbol: 'circle',
+            symbolSize: 10,
+            itemStyle: {
+              color: '#fff',
+              borderWidth: 4
+            },
+            lineStyle: {
+              width: 6,
+              type: 'solid',
+              color: '#189b3b'
+            }
+          },
+          {
+            name: `轻度${this.emoName}倾向`,
+            type: 'line',
+            data: ''
+          },
+          {
+            name: `中度${this.emoName}倾向`,
+            type: 'line',
+            data: ''
+          },
+          {
+            name: `重度${this.emoName}倾向`,
+            type: 'line',
+            data: ''
+          }
+        ]
+      };
+    },
+    surveyTitle() {
+      return this.params.dateType == 0 ? '本周概览' : '本月概览'
+    }
+
+  },
+  created() {
+    this.loadParams();
+    this.initEchartText();
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.getWeekResult()
+    })
+  },
+  methods: {
+    loadParams() {
+      let params = this.$route.query;
+      if (params) {
+        this.params = params;
+        this.emoName = Signsmodel[params.name].name;
+        this.currentEmoName = params.name;
+      }
+    },
+    // 初始化图表的文字内容
+    initEchartText() {
+      this.defaultSeries = [
+        {
+          name: ``,
+          type: 'line',
+          padding: 10,
+          data: this.emotionData,
+          symbol: 'circle',
+          symbolSize: 12, // 拐点圆的大小
+          areaStyle: {}
+        },
+        {
+          name: `轻度${this.emoName}倾向`,
+          type: 'line',
+          padding: 10,
+          data: '',
+          symbol: 'circle',
+          symbolSize: 12 // 拐点圆的大小
+        },
+        {
+          name: `中度${this.emoName}倾向`,
+          type: 'line',
+          data: ''
+        },
+        {
+          name: `重度${this.emoName}倾向`,
+          type: 'line',
+          data: ''
+        }
+      ];
+      /*  this.pieRightList = this.pieRightList.map((item) => {
+        item.text = item.text.replace("情绪", this.emoName);
+        return item;
+      }); */
+    },
+    onNavBack() {
+      this.$router.back();
+    },
+    dateClick(type) {
+      if (type == 'add') {
+        if (this.count <= 0) {
+          return;
+        }
+        this.count--;
+        this.isPreClick = true;
+        this.currentRecord = this.weekList.filter(item => {
+          return item.count === this.count;
+        })[0];
+        let date = this.weekList.filter(item => {
+          return item.count === this.count;
+        })[0].name;
+        if (this.count <= 0) {
+          this.isAddClick = false;
+        }
+        console.log("当前切换的日期", date);
+      } else {
+        // 上一个
+        if (this.count >= this.maxCount) {
+          return;
+        }
+        this.count++;
+        this.isAddClick = true;
+        // 当前切换的日期
+        let date = this.weekList.filter(item => {
+          return item.count === this.count;
+        })[0].name;
+        this.currentRecord = this.weekList.filter(item => {
+          return item.count === this.count;
+        })[0]
+        console.log("当前切换的日期", date);
+        if (this.count >= this.maxCount) {
+          this.isPreClick = false;
+        }
+      }
+    },
+    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.$store.getters.uid,
+        type: 1
+      };
+      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[0];
+          this.count = 0;
+          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);
+        });
+    },
+    onPsyTabClick(item) {
+      this.healthyType = item.value;
+      this.psyCurrent = this.calcPsyTabindex(Signsmodel[item.name].type);
+      this.emoName = Signsmodel[item.name].name;
+      this.currentEmoName = item.name;
+    },
+    calcPsyTabindex(type) {
+      let psyIndex = '';
+      switch (type) {
+        case 0:
+          psyIndex = 1;
+          break;
+        case 1:
+          psyIndex = 0;
+          break;
+        case 2:
+          psyIndex = 2;
+          break;
+        default:
+          break;
+      }
+      return psyIndex;
+    },
+    initPieEchart() {
+      if (this.pieEcharts != null && this.pieEcharts != '' && this.pieEcharts != undefined) {
+        this.pieEcharts.dispose();
+      }
+      this.pieEcharts = this.$echarts.init(this.$refs.pieChart);
+      this.pieEcharts.setOption(this.pieOption);
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.report {
+  height: 100vh;
+  width: 100%;
+  overflow: hidden;
+  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;
+    }
+  }
+
+  .psy-tab-bar {
+    height: 60px;
+    position: relative;
+    margin: 20px 0 0 0;
+    padding: 0 20px;
+
+    .psy-tab-con {
+      background-color: #eeeeee;
+      border-top-left-radius: 40px;
+      border-top-right-radius: 40px;
+      border-bottom-left-radius: 40px;
+      border-bottom-right-radius: 40px;
+
+      .psy-tab-list {
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        height: 50px;
+        width: 100%;
+
+        .psy-tab-item {
+          position: relative;
+          padding: 0 20px;
+          color: #6d6d6d;
+          height: 100%;
+          width: 100%;
+          font-size: 28px;
+          border-radius: 40px;
+          font-weight: bold;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+
+          &.active {
+            color: #fff;
+            background-color: $green;
+          }
+        }
+      }
+    }
+  }
+
+  .main {
+    height: calc(100vh - 150px);
+    overflow: scroll;
+    background-color: #fff;
+    padding: 0 20px;
+
+    .pie-chart-con {
+      flex: 1;
+      padding: 10px 0 20px 0;
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+
+      .pie-chart-left {
+        position: relative;
+        height: 300px;
+        padding-left: 30px;
+        width: 35%;
+        @include center();
+
+        #pieChart {
+          height: 212px;
+          width: 212px;
+        }
+      }
+
+      .pie-chart-right {
+        height: 300px;
+        width: 65%;
+        padding-right: 40px;
+        @include center();
+
+        .list {
+          flex-direction: column;
+
+          .item {
+            width: 100%;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 24px;
+            padding: 18px 0;
+
+            .item-left {
+              display: flex;
+              justify-content: flex-start;
+              align-items: center;
+              padding-right: 20px;
+
+              .circle {
+                height: 24px;
+                width: 24px;
+                margin: 0 8px;
+              }
+
+              span {
+                font-size: 24px;
+              }
+
+              .text {
+                color: #000;
+                font-size: 24px;
+              }
+            }
+
+            .item-right {
+              display: flex;
+              justify-content: center;
+              align-items: center;
+            }
+          }
+        }
+      }
+    }
+
+    .statistics {
+
+      /* padding: 40px 40px; */
+      .list {
+        padding: 40px 40px;
+        display: grid;
+        grid-template-columns: repeat(3, 1fr); //定义了一个 3x3 的网格布
+        /* grid-template-rows: repeat(3, 1fr); */
+        gap: 40px;
+        font-size: 32px;
+
+        .item {
+          display: flex;
+          justify-content: flex-start;
+          align-items: flex-start;
+          padding: 30px;
+          /* height: px2rem(136); */
+          flex-direction: column;
+          border: 1px solid $border_color;
+          border-radius: 40px;
+          color: #fff;
+
+          .top {
+            font-size: 24px;
+          }
+
+          .middle {
+            font-size: 48px;
+          }
+
+          .bottom {
+            font-size: 18px;
+          }
+        }
+      }
+    }
+
+    .bottom {
+      flex: 1;
+      overflow: scroll;
+
+      .echart-container {
+        position: relative;
+        min-height: 600px;
+        background-color: #fff;
+        padding: 0 10px;
+
+        .echart {
+          height: 200px;
+          padding: 0 10px;
+        }
+      }
+
+      .result {
+        padding-bottom: 40px;
+
+        .result-con {
+          height: 100%;
+          background-color: #fff;
+          border-radius: 40px;
+          overflow: hidden;
+
+          &.reminder {
+            padding: 0 32px 40px 32px;
+          }
+
+          .title {
+            display: flex;
+            justify-content: flex-start;
+            align-items: flex-start;
+            flex-direction: column;
+            margin-bottom: 60px;
+
+            span {
+              font-size: 36px;
+              font-weight: bold;
+            }
+
+            .font-28 {
+              font-weight: 400;
+              font-size: 24px;
+              color: #8b8b8b;
+              text-align: left;
+            }
+
+            .title-no-data {
+              padding: 68px 0 26px 30px;
+            }
+
+            p {
+              font-size: 24px;
+              color: $green;
+            }
+
+            .title-emo {
+              font-size: 48px;
+              padding: 28px 0 42px 0;
+              text-align: left;
+            }
+
+            .no-data {
+              height: 500px;
+              width: 100%;
+              @include center();
+              flex-direction: column;
+
+              img {
+                height: 220px;
+                width: 350px;
+              }
+
+              p {
+                color: #999;
+                font-size: 24px;
+                padding: 40px 0 130px 0;
+              }
+            }
+          }
+
+          .title-text {
+            padding: 68px 0 26px 30px;
+          }
+
+          .title-reminder {
+            padding: 68px 0 0 0;
+          }
+
+          .friendly-reminder,
+          .warm-reminder {
+            display: flex;
+            justify-content: flex-start;
+            align-items: flex-start;
+            flex-direction: column;
+            margin-bottom: 20px;
+            background-color: #f2f2f2;
+            padding: 40px 38px 38px 28px;
+
+            p {
+              font-weight: bold;
+              text-align: left;
+              padding-bottom: 22px;
+              font-size: 30px;
+            }
+
+            span {
+              text-align: left;
+              font-size: 24px;
+            }
+          }
+
+          .mood-list {
+            display: grid;
+            grid-template-columns: repeat(2, auto); //定义了一个 2x2 的网格布
+            grid-template-rows: repeat(2, 1fr);
+            gap: 42px;
+            padding: 0 88px 40px 74px;
+
+            .item {
+              width: 274px;
+              height: 220px;
+              @include center();
+              flex-direction: column;
+              border-radius: 40px;
+
+              p {
+                font-size: 24px;
+                padding: 0;
+                color: #fff;
+
+                .day {
+                  padding: 10px;
+                  font-size: 56px;
+                }
+
+                .day-text {
+                  font-size: 24px;
+                }
+              }
+            }
+          }
+
+          .mood-list-no-data {
+            height: 500px;
+            width: 100%;
+
+            .no-data {
+              @include center();
+              flex-direction: column;
+
+              img {
+                height: 220px;
+                width: 350px;
+              }
+
+              p {
+                color: #999;
+                font-size: 24px;
+                padding: 40px 0 130px 0;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+
+}
+
+/* @import url(); 引入css类 */
+</style>
\ No newline at end of file