增加 vconsole调试插件

增加 今日-情绪心理相关接口对接
增加 获取授权code

package.json

@@ -22,6 +22,7 @@
     "js-base64": "^2.5.2",
     "regenerator-runtime": "^0.13.5",
     "vant": "^2.12.48",
+    "vconsole": "^3.15.1",
     "vue": "^2.7.8",
     "vue-router": "^3.5.4",
     "vuex": "^3.6.2",

src/api/psychological.js

@@ -0,0 +1,23 @@
+import axios from 'axios';
+import prefix from '@/store/prefix';
+import { PsyBaseUrl } from '@/config/models';
+const service = axios.create({
+  baseURL: PsyBaseUrl
+});
+service.interceptors.request.use(request => {
+  if (localStorage.getItem(prefix + 'ssjlToken')) {
+    request.headers.AccessToken = localStorage.getItem(prefix + 'ssjlToken');
+  }
+  return request;
+});
+export const APIPsy = {
+  getHomeData
+};
+export default APIPsy;
+function getHomeData(data) {
+  return service({
+    url: `/api/Data/GetHomeData`,
+    method: 'get',
+    params: data
+  });
+}

src/main.js

@@ -18,13 +18,31 @@ import '@/plugins/vant';
 import '@/assets/css/index.scss';
 // 移动端适配
 import 'amfe-flexible';
+import VConsole from 'vconsole';
 Vue.prototype.$dayjs = dayjs;
 Vue.prototype.$echarts = echarts;
 Vue.prototype.$store = store;
 Vue.prototype.$own = own;
 Vue.prototype.$axios = request;
 Vue.prototype.$green = '#189b3b';
-
+// 判断是否是pc设备
+const isPc = () => {
+  const userAgentInfo = navigator.userAgent;
+  const Agents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod'];
+  let flag = true;
+  for (let v = 0; v < Agents.length; v++) {
+    if (userAgentInfo.indexOf(Agents[v]) > 0) {
+      flag = false;
+      break;
+    }
+  }
+  return flag;
+};
+//如果不是生产环境并且不是pc设备那么就显示调试
+if (process.env.NODE_ENV == 'test' && !isPc()) {
+  // eslint-disable-next-line no-unused-vars
+  const vConsole = new VConsole();
+}
 // filters
 import './filters';
 Vue.config.productionTip = false;

src/views/insight/index.vue

@@ -152,6 +152,7 @@
 
 <script>
 import DateSwitch from '@/components/DateSwitch.vue';
+import { format, startOfMonth, endOfMonth } from 'date-fns';
 export default {
   components: {
     DateSwitch
@@ -249,7 +250,8 @@ export default {
       },
       upImg: require('@/assets/today/icons/up.png'),
       downImg: require('@/assets/today/icons/down.png'),
-      date: ''
+      date: '',
+      monthDate: {}
     };
   },
   created() {},
@@ -259,8 +261,6 @@ export default {
   watch: {
     active(val) {
       console.log(val);
-      /* this.emotionActive = 0;
-      this.signActive = 0; */
       this.$nextTick(() => {
         this.initData();
         this.initEmotionChart();
@@ -317,7 +317,19 @@ export default {
     updateDate(value) {
       console.log('组件原始值', value);
       this.date = this.active == 0 ? value.replace('~', '-') : value;
-      console.log('接口所需要的值', this.date);
+      if (this.active == 1) {
+        this.getMonthStaEnd(this.date);
+      }
+
+      console.log('接口所需要的值', this.date, '如果是月', this.monthDate);
+    },
+    getMonthStaEnd(value) {
+      const dateObj = {};
+      const start = startOfMonth(value);
+      const end = endOfMonth(value);
+      dateObj.start = format(start, 'yyyy-MM-dd');
+      dateObj.end = format(end, 'yyyy-MM-dd');
+      this.monthDate = { ...dateObj };
     },
     initData() {
       //初始化图表

src/views/login/login.vue

@@ -68,13 +68,14 @@ export default {
   created() {},
   mounted() {
     // TODO 获取code再拿code获取openId
-    // this.getCode();
+    this.getCode();
   },
   methods: {
     getCode() {
       let url = window.location.href;
       if (url.indexOf('code') > -1) {
         let codeUrl = window.location.href.split('?code=');
+        console.log('获取code的url', codeUrl);
         if (codeUrl) {
           let timeStamp = new Date().getTime();
           let code = codeUrl[1].split('&')[0];
@@ -129,7 +130,7 @@ export default {
             this.countDown();
           }
           if (item.stateCode === 0 && item.code === null) {
-            //                          this.notify('请勿频繁获取，验证码5分钟内有效');
+            //this.notify('请勿频繁获取，验证码5分钟内有效');
             NotifyService.notify({ message: item.message });
           }
         })

src/views/today/emotionDetails.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="psychological-container">
-    <NavBar title="月报" @on-click-left="onNavBack" right-text="历史" @on-click-right="onHistory"> </NavBar>
+    <NavBar title="心理监测" @on-click-left="onNavBack" right-text="历史" @on-click-right="onHistory"> </NavBar>
     <div class="tab-bar">
       <div class="date-tab-con">
         <div class="date-tab-list">
@@ -19,6 +19,22 @@
     </div>
 
     <div class="main" v-show="current !== 3">
+      <div class="tab-bar">
+        <div class="date-tab-con">
+          <div class="date-tab-list">
+            <div
+              :class="['date-tab-item', { active: current === index, notClick: false }]"
+              @click="onTabClick(item.value, index)"
+              v-for="(item, index) in dateList"
+              :key="index"
+            >
+              <img :src="tabImgUrl" alt v-if="index == 3" />
+              <span>{{ item.text }}</span>
+              <img class="more" :src="selectDownImg" alt v-if="index == 3" />
+            </div>
+          </div>
+        </div>
+      </div>
       <div class="top">
         <!-- 日期选择 -->
         <!-- 标题 -->
@@ -138,20 +154,13 @@
           <div class="echart">
             <EchartBox
               echartId="charts"
-              outTitle="压力数据图"
+              :outTitle="emoLegend.outTitle"
               height="200"
               width="200"
               :legend="emoLegend"
-              :options="emoOptions"
+              :options="defaultOptions"
             ></EchartBox>
           </div>
-          <!--  <EchartBox
-            echartId="charts"
-            outTitle="压力数据图"
-            height="300"
-            :legend="emoLegend"
-            :options="emoOptions"
-          ></EchartBox> -->
         </div>
 
         <div class="line-gray"></div>
@@ -197,9 +206,14 @@
             <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">
+                <div
+                  class="item"
+                  v-for="(item, index) in emotionList"
+                  :key="index"
+                  :style="{ backgroundColor: item.color }"
+                >
                   <p>
-                    <span :style="{ color: item.color }" class="day">{{ item.days }}</span>
+                    <span class="day">{{ item.days }}</span>
                     <span class="day-text">天</span>
                   </p>
 
@@ -282,6 +296,7 @@ import { EmotionModel, PsyBaseUrl } from '@/config/models';
 import EchartBox from '@/components/EchartBox';
 import NavBar from '@/components/NavBar';
 import axios from 'axios';
+import ToastService from '@/services/toast-service';
 export default {
   name: 'psychological-monitor',
   components: {
@@ -290,16 +305,6 @@ export default {
   },
   data() {
     return {
-      emoLegend: {
-        title: '',
-        list: [
-          { name: '无压力倾向', color: '#179b3b' },
-          { name: '轻度压力倾向', color: '#8dc21f' },
-          { name: '中度压力倾向', color: '#2ea7e0' },
-          { name: '重度压力倾向', color: '#ff5f8b' }
-        ]
-      },
-
       // 日期选择标签
       dateList: [
         { name: 'today', text: '今天', value: 0 },
@@ -429,145 +434,31 @@ export default {
     };
   },
   computed: {
-    // 默认折线图配置，echarts 具体配置 见 https://echarts.apache.org/zh/option.html#title
-    emoOptions() {
+    emoLegend() {
       return {
-        grid: {
-          top: '10%',
-          left: '10%',
-          right: '10%',
-          bottom: '20%'
-        },
-        xAxis: {
-          type: 'category',
-          axisLine: {
-            show: false
-          },
-          textStyle: {
-            fontSize: 10
-          },
-          axisTick: {
-            show: false
-          },
-          nameLocation: 'left',
-          axisLabel: {
-            show: true,
-            fontSize: 12,
-            showMinLabel: true, //显示最小值
-            showMaxLabel: true //显示最大值
-          },
-          data: ['6:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00']
-        },
-        yAxis: {
-          type: 'value'
-        },
-        series: [
-          {
-            type: 'line',
-            data: this.emotionDataNew,
-            symbol: 'circle',
-            symbolSize: 12,
-            smooth: true,
-            itemStyle: {
-              normal: {
-                color: '#fff',
-                borderWidth: 2,
-                lineStyle: {
-                  width: 6,
-                  type: 'solid',
-                  color: '#189b3b'
-                }
-              }
-            }
-          }
+        title: '',
+        outTitle: `${this.emoName}数据图`,
+        list: [
+          { name: `无${this.emoName}倾向`, color: '#179b3b' },
+          { name: `轻度${this.emoName}倾向`, color: '#8dc21f' },
+          { name: `中度${this.emoName}倾向`, color: '#2ea7e0' },
+          { name: `重度${this.emoName}倾向`, color: '#ff5f8b' }
         ]
       };
     },
+    // 默认折线图配置，echarts 具体配置 见 https://echarts.apache.org/zh/option.html#title
     defaultOptions() {
       return {
         time: {
           useUTC: false
         },
-        title: {
-          text: this.echartsTitle,
-          left: 1,
-          right: 25,
-          bottom: 20,
-          top: '3%',
-          textStyle: {
-            fontSize: 16,
-            fontWeight: 'bold'
-          }
-        },
-        legend: {
-          width: '65%',
-          orient: 'horizontal',
-          right: 'right',
-          top: 1,
-          bottom: '1%',
-          itemHeight: 12,
-          itemWidth: 12,
-          itemGap: 10,
-          align: 'left',
-          selectedMode: false,
-          data: [
-            {
-              name: `轻度${this.emoName}倾向`,
-              icon: 'rect',
-              itemStyle: {
-                color: '#8dc21f'
-              },
-              textStyle: {
-                fontSize: 12
-              }
-            },
-            {
-              name: `中度${this.emoName}倾向`,
-              itemStyle: {
-                color: '#2ea7e0'
-              },
-              icon: 'rect',
-              textStyle: {
-                fontSize: 12
-              }
-            },
-            {
-              name: `重度${this.emoName}倾向`,
-              itemStyle: {
-                color: '#ff5f8b'
-              },
-              icon: 'rect',
-              textStyle: {
-                fontSize: 12
-              }
-            },
-            {
-              name: `无${this.emoName}倾向`,
-              icon: 'rect',
-              itemStyle: {
-                color: '#179b3b'
-              },
-              textStyle: {
-                fontSize: 12
-              }
-            }
-          ],
-          formatter: function (name) {
-            // 自定义显示内容
-            if (name.length > 6) {
-              return name.substring(0, 6) + '\n' + name.substring(6);
-            } else {
-              return name;
-            }
-          }
-        },
         grid: {
           show: true,
-          borderWidth: 1,
-          top: '20%',
+          borderWidth: 0,
+          top: '3%',
           left: '1%',
-          right: '5%',
-          bottom: '10%',
+          right: '3%',
+          bottom: '15%',
           containLabel: true
         },
         xAxis: {
@@ -611,8 +502,8 @@ export default {
               fontSize: 14
             },
             show: true,
-            height: 15,
-            bottom: 5,
+            height: 20,
+            bottom: 4,
             handleStyle: {
               borderWidth: 1,
               borderCap: 'square'
@@ -639,16 +530,16 @@ export default {
           nameTextStyle: {
             fontSize: 13
           },
-          alignTicks: true,
+          alignTicks: false,
           axisTick: {
-            show: true
+            show: false
           },
           axisLabel: {
             show: true,
             fontSize: 13
           },
           splitLine: {
-            show: true,
+            show: false,
             lineStyle: {
               color: '#ddd',
               width: 1
@@ -713,7 +604,7 @@ export default {
         series: [
           {
             type: 'pie',
-            radius: ['40%', '80%'],
+            radius: ['40%', '90%'],
             avoidLabelOverlap: false,
             startAngle: 270, // 设置逆时针渲染
             itemStyle: {
@@ -816,9 +707,8 @@ export default {
     // 读取路由传过来的参数，根据路由传过来的参数判断是哪种情绪
     this.loadParams();
     this.initEchartText();
-    this.getPieData();
     this.getCalendarData();
-    this.getPsychologiclData('2023-11-21');
+    this.getPsychologiclData();
     this.createList();
     //this.getWeekResult();
   },
@@ -951,7 +841,7 @@ export default {
     },
     // 获取情绪数据
     getPsychologiclData(date, startDate, endDate) {
-      this.$toast.loading({
+      ToastService.loading({
         message: '数据加载中'
       });
       let reqDate = date
@@ -1114,7 +1004,7 @@ export default {
                 {
                   name: '平均值',
                   type: 'scatter',
-                  symbolSize: 8,
+                  symbolSize: 14,
                   data: this.emotionData
                 },
                 {
@@ -1122,15 +1012,15 @@ export default {
                   type: 'custom',
                   data: this.weekAndMonData,
                   renderItem: function (params, api) {
-                    var categoryIndex = api.value(0);
-                    var end = api.coord([categoryIndex, api.value(1)]);
-                    var start = api.coord([categoryIndex, api.value(2)]);
-                    var width = 8;
-                    var rectShape = that.$echarts.graphic.clipRectByRect(
+                    let categoryIndex = api.value(0);
+                    let end = api.coord([categoryIndex, api.value(1)]);
+                    let start = api.coord([categoryIndex, api.value(2)]);
+                    let width = 16;
+                    let rectShape = that.$echarts.graphic.clipRectByRect(
                       {
                         x: start[0] - width / 2,
                         y: start[1],
-                        width: 8,
+                        width: 16,
                         height: end[1] - start[1]
                       },
                       {
@@ -1162,25 +1052,25 @@ export default {
                 {
                   name: `轻度${this.emoName}倾向`,
                   type: 'scatter',
-                  symbolSize: 8,
+                  symbolSize: 12,
                   data: ''
                 },
                 {
                   name: `中度${this.emoName}倾向`,
                   type: 'scatter',
-                  symbolSize: 8,
+                  symbolSize: 12,
                   data: ''
                 },
                 {
                   name: `重度${this.emoName}倾向`,
                   type: 'scatter',
-                  symbolSize: 8,
+                  symbolSize: 12,
                   data: ''
                 },
                 {
                   name: `无${this.emoName}倾向`,
                   type: 'scatter',
-                  symbolSize: 8,
+                  symbolSize: 12,
                   data: ''
                 }
               ];
@@ -1215,17 +1105,14 @@ export default {
             this.result = data.Result;
             this.resultLevel = data.ResultLevel;
             this.advice = data.Advice;
-            this.$toast.success({
+            ToastService.success({
               message: '数据加载完成'
             });
           }
         })
-        .catch(() => {
-          this.$dialog({
-            message: '登录过期，请重新进入'
-          });
-        })
-        .finally(() => {});
+        .catch(error => {
+          console.log(error);
+        });
     },
     // 计算百分比
     calcPercentage(value, total) {
@@ -1306,32 +1193,32 @@ export default {
       this.current = index;
       this.currentDays = value;
       this.$store.commit('tabClick', index);
-      /* let currentDate = new Date(); */
+      let currentDate = new Date();
       this.surveyTitle = value === 7 ? '7天概览' : '30天概览';
       if (value === 7) {
-        /* let dateList = this.getPostDate(currentDate, 6, true); */
-        this.getPsychologiclData('', /* dateList[0] */ '2023-11-15', /* dateList[1] */ '2023-11-21');
-        this.startDate = /* dateList[0] */ '2023-11-15';
-        this.endDate = /* dateList[1] */ '2023-11-21';
+        let dateList = this.getPostDate(currentDate, 6, true);
+        this.getPsychologiclData('', dateList[0] /* '2023-11-15' */ /* dateList[1] */ /* '2023-11-21' */);
+        this.startDate = dateList[0] /* '2023-11-15' */;
+        this.endDate = dateList[1] /* '2023-11-21' */;
       } else if (value === 0) {
         // 今天
         this.defaultOptions.xAxis.data = this.xAxisData;
         this.defaultOptions.series = this.defaultSeries;
         this.defaultOptions.series[0].data = this.emotionData;
         this.getPsychologiclData(
-          this.selectDate ? this.selectDate : /* this.$dayjs(currentDate).format('YYYY-MM-DD') */ '2023-11-21'
+          this.selectDate ? this.selectDate : this.$dayjs(currentDate).format('YYYY-MM-DD') /* '2023-11-21' */
         );
-        this.startDate = /* this.$dayjs(currentDate).format('YYYY-MM-DD') */ '2023-11-21';
-        this.endDate = /* this.$dayjs(currentDate).format('YYYY-MM-DD') */ '2023-11-21';
+        this.startDate = this.$dayjs(currentDate).format('YYYY-MM-DD') /* '2023-11-21' */;
+        this.endDate = this.$dayjs(currentDate).format('YYYY-MM-DD') /* '2023-11-21' */;
       } else if (value === 30) {
         // 30天
         this.defaultOptions.xAxis.data = this.xAxisData;
         this.defaultOptions.series = this.defaultSeries;
         this.defaultOptions.series[0].data = this.emotionData;
-        /*  let dateList = this.getPostDate(currentDate, 30, true); */
-        this.getPsychologiclData('', /* dateList[0] */ '2023-11-21', /* dateList[1] */ '2023-12-21');
-        this.startDate = /* dateList[0] */ '2023-11-21';
-        this.endDate = /* dateList[1] */ '2023-12-21';
+        let dateList = this.getPostDate(currentDate, 30, true);
+        this.getPsychologiclData('', dateList[0] /* '2023-11-21' */, dateList[1] /* '2023-12-21' */);
+        this.startDate = dateList[0] /* '2023-11-21' */;
+        this.endDate = dateList[1] /* '2023-12-21' */;
       } else {
         // 周报菜单
         this.getWeekResult();
@@ -1473,7 +1360,7 @@ export default {
       this.isPopup = false;
     },
     getWeekResult() {
-      this.$toast.loading('数据加载中');
+      ToastService.loading('数据加载中');
       let baseUrl =
         process.env.NODE_ENV === 'production' ? 'https://dbmq.rzliot.com/auth_heart' : 'https://dbmq.rzliot.com/heart';
       let reqUrl = `${baseUrl}/api/Data/GetWeekResult`;
@@ -1500,7 +1387,7 @@ export default {
               };
             })
             .reverse();
-          this.$toast.success('数据加载完成');
+          ToastService.success('数据加载完成');
         });
     },
     onClickItem(recordId) {

src/views/today/index.vue

@@ -35,12 +35,12 @@
       <div class="title" @click="onRouterTo('emotionDetails')">
         <p>今日情绪感知</p>
         <div>
-          <p>4.28</p>
+          <p>{{ now }}</p>
           <van-icon name="arrow" size="18" />
         </div>
       </div>
       <ul>
-        <li>
+        <!-- <li>
           <h4>40</h4>
           <p>疲劳倾向</p>
           <span>无疲劳倾向</span>
@@ -57,6 +57,12 @@
           <p>焦虑倾向</p>
           <span>无焦虑倾向</span>
           <time>12:30</time>
+        </li> -->
+        <li v-for="(item, index) in psyDataList" :key="index">
+          <h4>{{ item.value || '--' }}</h4>
+          <p>{{ item.name || '--' }}</p>
+          <span>{{ item.result || '--' }}</span>
+          <time>{{ item.time || '--' }}</time>
         </li>
       </ul>
     </div>
@@ -65,7 +71,7 @@
       <div class="title" @click="onRouterTo('signsDetails')">
         <p>今体征感知</p>
         <div>
-          <p>4.28</p>
+          <p>{{ now }}</p>
           <van-icon name="arrow" size="18" />
         </div>
       </div>
@@ -200,6 +206,7 @@
 import TabBar from '@/components/TabBar';
 import { Calendar, Circle, Checkbox, CheckboxGroup } from 'vant';
 import APICore from '@/api/core';
+import APIPsy from '@/api/psychological';
 export default {
   components: {
     TabBar,
@@ -216,14 +223,66 @@ export default {
       maxDate: new Date(2023, 12, 18),
       currentRate1: 0,
       currentRate2: 0,
-      result: []
+      result: [],
+      uid: '2023101521270090082',
+      psyDataList: []
     };
   },
+  computed: {
+    now() {
+      return this.$dayjs(new Date()).format('MM.DD');
+    }
+  },
   created() {
     this.getAuth();
   },
-  mounted() {},
+  mounted() {
+    this.getHomeData();
+  },
   methods: {
+    // 获取首页情绪数据
+    getHomeData() {
+      let reqParams = {
+        uid: this.uid,
+        date: this.$dayjs(new Date()).format('YYYY-MM-DD') /* '2023-11-21' */
+      };
+      APIPsy.getHomeData(reqParams).then(res => {
+        const data = res.data.response;
+        if (!data) {
+          return this.$toast.fail(res.data.msg);
+        }
+        this.psyDataList = [
+          // 2023.12.5 修改菜单顺序
+          // 疲劳指数
+          {
+            value: data.TirScore,
+            name: '疲劳指数',
+            class: 'tiredness',
+            result: data.TirDesc,
+            time: data.TirMeasureUpdateTime ? this.$dayjs(data.TirMeasureUpdateTime).format('HH:mm') : '',
+            level: data.TirLevel
+          },
+          // 压力指数
+          {
+            value: data.StressScore,
+            name: '压力指数',
+            class: 'stress',
+            result: data.StressDesc,
+            time: data.StressMeasureUpdateTime ? this.$dayjs(data.StressMeasureUpdateTime).format('HH:mm') : '',
+            level: data.StressLevel
+          },
+          // 抑郁
+          {
+            value: data.DepScore,
+            name: '抑郁指数',
+            class: 'depression',
+            result: data.DepDesc,
+            time: data.DepMeasureUpdateTime ? this.$dayjs(data.DepMeasureUpdateTime).format('HH:mm') : '',
+            level: data.DepLevel
+          }
+        ];
+      });
+    },
     formatDate(date) {
       return `${date.getMonth() + 1}/${date.getDate()}`;
     },

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

@@ -1,224 +1,225 @@
 .signs {
-    min-height: 100vh;
-    width: 100%;
-    overflow: hidden;
-    background-color: #fff;
-    .main {
+  min-height: 100vh;
+  width: 100%;
+  overflow: hidden;
+  background-color: #fff;
+  .main {
+    position: relative;
+    height: calc(100vh - 100px);
+    overflow: scroll;
+    padding-top: 100px;
+    .date {
+      padding: 20px 40px;
+      color: #8b8b8b;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      /* justify-content: space-around; */
+      .left {
+        font-size: 28px;
+      }
+      .right {
+        font-size: 32px;
+      }
+    }
+    .circle {
+      position: relative;
+      padding: 80px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .van-circle {
+        height: 200px !important;
+        width: 200px !important;
         position: relative;
-        height: calc(100vh - 100px);
-        overflow: scroll;
-        .date {
-            padding: 20px 40px;
-            color: #8B8B8B;
+        .circle-text {
+          height: 100%;
+          padding: 0 20px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          .left {
+            @include center();
+            font-size: 62px;
+            color: #333;
+          }
+          .right {
             display: flex;
-            justify-content: space-between;
-            align-items: center;
-            /* justify-content: space-around; */
-            .left{
-                font-size: 28px;
+            justify-content: flex-start;
+            align-self: center;
+            flex-direction: column;
+            img {
+              height: 50px;
+              width: 50px;
+              margin: 0 10px;
+              object-fit: contain;
             }
-            .right {
-                font-size: 32px;
+            span {
+              font-size: 18px;
             }
+          }
+          /*  flex-direction: column; */
         }
-        .circle {
-            position: relative;
-            padding: 80px;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            .van-circle  {
-                height: 200px !important;
-                width: 200px !important;
-                position: relative;
-                .circle-text {
-                   height: 100%;
-                   padding: 0 20px;
-                    display: flex;
-                    justify-content: center;
-                    align-items: center;
-                    .left {
-                        @include center();
-                        font-size: 62px;
-                        color: #333;
-                    }
-                    .right {
-                        display: flex;
-                        justify-content: flex-start;
-                        align-self: center;
-                        flex-direction: column;
-                        img {
-                            height: 50px;
-                            width: 50px;
-                            margin: 0 10px;
-                            object-fit: contain;
-                        }
-                        span {
-                            font-size: 18px;
-                        }
-                    }
-                   /*  flex-direction: column; */
-                }
-            }
-            .circle-white {
-                position:absolute;
-                bottom: 78px;
-                right: 45%;
-                height: 50px;
-                width: 50px;
-                border: 2px solid;
-                border-radius: 50%;
-                background: #fff;
-            }
+      }
+      .circle-white {
+        position: absolute;
+        bottom: 78px;
+        right: 45%;
+        height: 50px;
+        width: 50px;
+        border: 2px solid;
+        border-radius: 50%;
+        background: #fff;
+      }
+    }
+    .progress {
+      position: relative;
+      flex: 1;
+      font-size: 30px;
+      padding: 0 40px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .progress-circle {
+        position: absolute;
+        top: -12px;
+        left: 0;
+        height: 35px;
+        width: 35px;
+        background-color: #fff;
+        border-radius: 50%;
+        border: 12px solid;
+        z-index: 99;
+      }
+      .state-item {
+        width: 100%;
+        .state-line {
+          position: relative;
+          height: 30px;
+          font-size: 32px;
+          &.low {
+            border-top-left-radius: 20px;
+            border-bottom-left-radius: 20px;
+          }
+          &.blue {
+            background-color: $green;
+          }
+          &.hight {
+            background-color: $com_red;
+            border-top-right-radius: 20px;
+            border-bottom-right-radius: 20px;
+          }
         }
-        .progress {
-            position: relative;
-            flex: 1;
-            font-size: 30px;
-            padding: 0 40px;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            .progress-circle {
-                position: absolute;
-                top: -12px;
-                left: 0;
-                height: 35px;
-                width: 35px;
-                background-color: #fff;
-                border-radius: 50%;
-                border: 12px solid;
-                z-index: 99;
-            }
-            .state-item {
-                width: 100%;
-                .state-line {
-                    position: relative;
-                    height: 30px;
-                    font-size: 32px;
-                    &.low {
-                        border-top-left-radius: 20px;
-                        border-bottom-left-radius: 20px;
-                    }
-                    &.blue {
-                        background-color: $green;
-                    }
-                    &.hight {
-                        background-color: $com_red;
-                        border-top-right-radius: 20px;
-                        border-bottom-right-radius: 20px;
-                    }
-                }
-                .state-text {
-                    padding: 40px 0 40px 0;
-                    @include center();
-                    color: #333;
-                    font-weight: bold;
-                }
-            }
+        .state-text {
+          padding: 40px 0 40px 0;
+          @include center();
+          color: #333;
+          font-weight: bold;
         }
-        .statistics {
-            position: relative;
-            padding: 0px 28px 10px 28px;
-            .list {
-                flex: 1;
-                width: 100%;
-                display: flex;
-                justify-content: space-around;
-                align-items: center;
-                font-size: 32px;
-                .item {
-                    display: flex;
-                    justify-content: flex-start;
-                    align-items: flex-start;
-                    width: 126px;
-                    padding: 30px 60px 30px 20px;
-                    /* height: px2rem(136); */
-                    flex-direction: column;
-                    border: 1px solid $border_color;
-                    border-radius: 30px;
-                    color: #fff;
-                    .top {
-                        font-size: 24px;
-                    }
-                    .middle {
-                        font-size: 48px;
-                        /* padding: 10px; */
-                    }
-                    .bottom {
-                        font-size: 24px
-                    }
-                    .line {
-                        height: 3px;
-                        width: 100%;
-                        margin: 5px 0;
-                        background-color: #fff;
-                        @include center();
-                    }
-                }
-            }
+      }
+    }
+    .statistics {
+      position: relative;
+      padding: 0px 28px 10px 28px;
+      .list {
+        flex: 1;
+        width: 100%;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        font-size: 32px;
+        .item {
+          display: flex;
+          justify-content: flex-start;
+          align-items: flex-start;
+          width: 126px;
+          padding: 30px 60px 30px 20px;
+          /* height: px2rem(136); */
+          flex-direction: column;
+          border: 1px solid $border_color;
+          border-radius: 30px;
+          color: #fff;
+          .top {
+            font-size: 24px;
+          }
+          .middle {
+            font-size: 48px;
+            /* padding: 10px; */
+          }
+          .bottom {
+            font-size: 24px;
+          }
+          .line {
+            height: 3px;
+            width: 100%;
+            margin: 5px 0;
+            background-color: #fff;
+            @include center();
+          }
         }
-        .warn-tips {
-            padding: 40px 40px;
-            display: flex;
-            justify-content: flex-start;
-            align-items: center;
-            .left {
-                img {
-                    height: 60px;
-                    width: 60px;
-                    object-fit: contain;
-                    margin-right: 30px;
-                }
-            }
-            .right {
-                font-size: 28px;
-                .orange {
-                    color: #edb21d;
-                }
-            }
+      }
+    }
+    .warn-tips {
+      padding: 40px 40px;
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      .left {
+        img {
+          height: 60px;
+          width: 60px;
+          object-fit: contain;
+          margin-right: 30px;
         }
-        .tab-bar{
-            padding: 20px 40px;
+      }
+      .right {
+        font-size: 28px;
+        .orange {
+          color: #edb21d;
+        }
+      }
+    }
+    .tab-bar {
+      padding: 20px;
+      position: relative;
+      .date-tab-con {
+        height: 50px;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        background: #fff;
+        border-top-left-radius: 40px;
+        border-top-right-radius: 40px;
+        border-bottom-left-radius: 40px;
+        border-bottom-right-radius: 40px;
+        .date-tab-list {
+          display: flex;
+          justify-content: space-around;
+          align-items: center;
+          color: #fff;
+          flex: 1;
+          height: 50px;
+          .date-tab-item {
             position: relative;
-            .date-tab-con {
-                height: 50px;
-                display: flex;
-                justify-content: flex-start;
-                align-items: center;
-                background: #fff;
-                border-top-left-radius: 40px;
-                border-top-right-radius: 40px;
-                border-bottom-left-radius: 40px;
-                border-bottom-right-radius: 40px;
-                .date-tab-list {
-                    display: flex;
-                    justify-content: space-around;
-                    align-items: center;
-                    color: #fff;
-                    flex: 1;
-                    height: 50px;
-                    .date-tab-item {
-                        position: relative;
-                        margin: 0 8px;
-                        height: 100%;
-                        width: 100%;
-                        border-radius: 40px;
-                        color: #6D6D6D;
-                        font-size: 28px;
-                        font-weight: bold;
-                        @include center();
-                        background-color: #e6e6e6;
-                        img {
-                            height: 50px;
-                            width: 50px;
-                            padding: 0 16px;
-                        }
-                        .more {
-                            width: 20px;
-                            height: 12px;
-                        }
-                        /* &.active::after {
+            margin: 0 8px;
+            height: 100%;
+            width: 100%;
+            border-radius: 40px;
+            color: #6d6d6d;
+            font-size: 28px;
+            font-weight: bold;
+            @include center();
+            background-color: #e6e6e6;
+            img {
+              height: 50px;
+              width: 50px;
+              padding: 0 16px;
+            }
+            .more {
+              width: 20px;
+              height: 12px;
+            }
+            /* &.active::after {
                             content: '';
                             width: 88px;
                             position: absolute;
@@ -227,20 +228,20 @@
                             box-sizing: border-box;
                             border-bottom: 8px solid $green;
                         } */
-                        &.active {
-                            color: #fff;
-                            background-color:  $green;
-                        }
-                        &.notClick {
-                            background-color: $border_color;
-                            color: #fff;
-                            border: 1px solid #fff;
-                        }
-                    }
-                    .date-tab-item:nth-child(3) {
-                        border-right: 1px solid #E0E0E0;
-                    }
-                    /* .date-tab-item:first-child {
+            &.active {
+              color: #fff;
+              background-color: $green;
+            }
+            &.notClick {
+              background-color: $border_color;
+              color: #fff;
+              border: 1px solid #fff;
+            }
+          }
+          .date-tab-item:nth-child(3) {
+            border-right: 1px solid #e0e0e0;
+          }
+          /* .date-tab-item:first-child {
                         border-top-left-radius: 15px;
                         border-bottom-left-radius: 15px;
                     }
@@ -248,139 +249,218 @@
                         border-top-right-radius: 15px;
                         border-bottom-right-radius: 15px;
                     } */
+        }
+        img {
+          height: 50xp;
+          width: 50px;
+          object-fit: contain;
+        }
+      }
+    }
+    .top {
+      flex: 1;
+      .title {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0px 32px 20px 26px;
+        font-size: 36px;
+        .title-left {
+          font-weight: bold;
+          .van-icon {
+            margin-left: 5px;
+            font-size: 18px;
+          }
+        }
+      }
+      .monitoring-count {
+        text-align: left;
+        padding: 6px 28px;
+        line-height: 40px;
+        p {
+          font-size: 24px;
+          color: #8b8b8b;
+        }
+      }
+      .pie-chart-con {
+        flex: 1;
+        padding: 10px 0 20px 0;
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+        .pie-chart-left {
+          position: relative;
+          height: 300px;
+          padding-left: 30px;
+          width: 35%;
+          @include center();
+          #pieChart {
+            height: 212px;
+            width: 212px;
+          }
+        }
+        .pie-chart-right {
+          height: 300px;
+          width: 65%;
+          padding-right: 40px;
+          @include center();
+          .list {
+            flex-direction: column;
+            .item {
+              width: 100%;
+              display: flex;
+              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;
+                .item-circle {
+                  height: 24px;
+                  width: 24px;
+                  margin: 0 8px;
+                }
+                span {
+                  font-size: 24px;
                 }
-                img {
-                    height: 50xp;
-                    width: 50px;
-                    object-fit: contain;
+                .text {
+                  color: #000;
+                  font-size: 24px;
                 }
+              }
+              .item-right {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+              }
             }
+          }
         }
-        .line-chart-con {
-            height: 600px;
-            padding: 20px;
-            .line-chart {
-                height: 580px;
-                padding: 20px;
-                background-color:#fff;
-                border: 1px solid $com_light_green;
-                border-radius: 40px;
+      }
+    }
+    .echart-container {
+      flex: 1;
+      position: relative;
+      min-height: 600px;
+      background-color: #fff;
+      padding: 0 20px;
+    }
+    .bottom {
+      flex: 1;
+      .result {
+        padding: 20px 40px;
+        .result-con {
+          .title {
+            span {
+              font-size: 46px;
+              font-weight: bold;
             }
-        }
-        .bottom {
-            flex: 1;
-            .result {
-                padding: 20px 40px;
-                .result-con {
-                    .title {
-                        span {
-                            font-size: 46px;
-                            font-weight: bold;
-                        }
-                        
-                    }
-                    .status {
-                        display: flex;
-                        flex-wrap: wrap;
-                        align-items: center;
-                        align-content: space-between;
-                        justify-content: space-between;
-                        width: 100%;
-                        margin: 20px 0;
-                        p {
-                            font-size: 52px;
-                            color: $green;
-                            font-weight: bold;
-                        }
-                        ul {
-                            display: flex;
-                            flex-wrap: wrap;
-                            align-items: center;
-                            justify-content: flex-start;
-                            li {
-                                width: 40px;
-                                height: 30px;
-                                border-radius: 20px;
-                                position: relative;
-                                & + li {
-                                    margin-left: 10px;
-                                }
-                                &.toobad {
-                                    background-color: #ff5f8b;
-                                    &:after{
-                                        background-color: #ff5f8b;
-                                    }
-                                }
-                                &.ordinary {
-                                    background-color: #2ea7e0;
-                                    &:after{
-                                        background-color: #2ea7e0;
-                                    }
-                                }
-                                &.sameas {
-                                    background-color: #8dc21f;
-                                    &:after{
-                                        background-color: #8dc21f;
-                                    }
-                                }
-                                &.excellent {
-                                    background-color: #179b3b;
-                                    &:after{
-                                        background-color: #179b3b;
-                                    }
-                                }
-                                &.active {
-                                    width: 240px;
-                                    &:after {
-                                        opacity: 1;
-                                    }
-                                    &:before {
-                                        opacity: 1;
-                                    }
-                                }
-                                &:after {
-                                    content: '';
-                                    display: block;
-                                    position: absolute;
-                                    top: 50%;
-                                    left: 50%;
-                                    transform: translateX(-50%) translateY(-50%);
-                                    width: 60px;
-                                    height: 60px;
-                                    opacity: 0;
-                                    border-radius: 50%;
-                                }
-                                &:before {
-                                    content: '';
-                                    display: block;
-                                    position: absolute;
-                                    top: 50%;
-                                    left: 50%;
-                                    transform: translateX(-50%) translateY(-50%);
-                                    width: 35px;
-                                    height: 35px;
-                                    opacity: 0;
-                                    border-radius: 50%;
-                                    background-color:#fff;
-                                    z-index: 2;
-                                }
-                            }
-                        }
-                    }
-                    .tips {
-                        font-size: 24px;
-                    }
-                }
+          }
+          .status {
+            display: flex;
+            flex-wrap: wrap;
+            align-items: center;
+            align-content: space-between;
+            justify-content: space-between;
+            width: 100%;
+            margin: 20px 0;
+            p {
+              font-size: 52px;
+              color: $green;
+              font-weight: bold;
             }
-            .wran-tips {
-                padding: 20px 40px 50px 40px;
-                font-size: 24px;
-                .tips-title {
-                    font-weight: bold;
-                    padding: 20px 0;
-                    color: #333;
+            ul {
+              display: flex;
+              flex-wrap: wrap;
+              align-items: center;
+              justify-content: flex-start;
+              li {
+                width: 40px;
+                height: 30px;
+                border-radius: 20px;
+                position: relative;
+                & + li {
+                  margin-left: 10px;
+                }
+                &.toobad {
+                  background-color: #ff5f8b;
+                  &:after {
+                    background-color: #ff5f8b;
+                  }
+                }
+                &.ordinary {
+                  background-color: #2ea7e0;
+                  &:after {
+                    background-color: #2ea7e0;
+                  }
+                }
+                &.sameas {
+                  background-color: #8dc21f;
+                  &:after {
+                    background-color: #8dc21f;
+                  }
                 }
+                &.excellent {
+                  background-color: #179b3b;
+                  &:after {
+                    background-color: #179b3b;
+                  }
+                }
+                &.active {
+                  width: 240px;
+                  &:after {
+                    opacity: 1;
+                  }
+                  &:before {
+                    opacity: 1;
+                  }
+                }
+                &:after {
+                  content: '';
+                  display: block;
+                  position: absolute;
+                  top: 50%;
+                  left: 50%;
+                  transform: translateX(-50%) translateY(-50%);
+                  width: 60px;
+                  height: 60px;
+                  opacity: 0;
+                  border-radius: 50%;
+                }
+                &:before {
+                  content: '';
+                  display: block;
+                  position: absolute;
+                  top: 50%;
+                  left: 50%;
+                  transform: translateX(-50%) translateY(-50%);
+                  width: 35px;
+                  height: 35px;
+                  opacity: 0;
+                  border-radius: 50%;
+                  background-color: #fff;
+                  z-index: 2;
+                }
+              }
             }
+          }
+          .tips {
+            font-size: 24px;
+          }
+        }
+      }
+      .wran-tips {
+        padding: 20px 40px 50px 40px;
+        font-size: 24px;
+        .tips-title {
+          font-weight: bold;
+          padding: 20px 0;
+          color: #333;
         }
+      }
     }
-}
+  }
+}