优化一些卡顿问题

minggao/src/page/home/newHome/components/pie3D.vue

@@ -46,7 +46,7 @@ export default {
     this.timmer = null;
   },
   mounted() {
-    this.optionData = this.dataList;
+    this.optionData = JSON.parse(JSON.stringify(this.dataList));
     this.total = 0;
     this.optionData.forEach(item => {
       this.total = this.total + item.value;

minggao/src/page/home/newHome/components/scrollInfo.vue

@@ -3,11 +3,11 @@
  * @Autor: lin
  * @Date: 2024-04-18 11:18:19
  * @LastEditors: lin
- * @LastEditTime: 2024-04-19 17:30:17
+ * @LastEditTime: 2024-04-20 09:06:54
 -->
 <template>
   <div class="scrollInfoContent">
-    <div :class="`scrollItem ${index == 0 ? 'animate__animated animate__slideOutUp heightOut' : ''}`" v-for="(info, index) in newData" :key="`time${idData}index${Math.random()}${info.addtime_format}`">
+    <div :class="`scrollItem ${index == 0 ? 'animate__animated animate__slideOutUp heightOut' : ''}`" v-for="(info, index) in newData" :key="`time${idData}${info.addtime_format}`">
       <template>
         <div>{{ info.pest_name }}</div>
         <div class="timeBox">{{ info.addtime_format }}</div>

minggao/src/page/home/newHome/deviceHome.vue

@@ -3,158 +3,166 @@
  * @Autor: lin
  * @Date: 2024-04-09 14:26:43
  * @LastEditors: lin
- * @LastEditTime: 2024-04-19 17:27:41
+ * @LastEditTime: 2024-04-20 09:24:07
 -->
 <template>
   <div class="bigBg">
-    <el-carousel indicator-position="outside" class="deviceBox" :autoplay="false" :interval="10000">
+    <el-carousel indicator-position="outside" class="deviceBox" :autoplay="false" :interval="10000"
+      @change="changeSlider">
       <el-carousel-item v-for="(item, index) in deviceList" :key="item.id">
-        <div class="flexBox topBox">
-          <div class="rowFlex">
-            <div class="card">
-              <Title text="设备信息"></Title>
-              <div class="deviceInfo">
-                <div class="leftInfo">
-                  <img src="../../../assets/images/newHome/id.png" />
-                  <div>设备ID</div>
+        <transition leave-active-class='animate__animated animate__fast animate__fadeOutRight'
+          enter-active-class="animate__animated animate__fast animate__fadeInRight">
+          <div class="flexBox topBox" v-if="index == activeIndex">
+            <div class="rowFlex">
+              <div class="card">
+                <Title text="设备信息"></Title>
+                <div class="deviceInfo">
+                  <div class="leftInfo">
+                    <img src="../../../assets/images/newHome/id.png" />
+                    <div>设备ID</div>
+                  </div>
+                  <div class="rightInfo">{{ item.device_id }}</div>
                 </div>
-                <div class="rightInfo">{{ item.device_id }}</div>
-              </div>
-              <div class="deviceInfo">
-                <div class="leftInfo">
-                  <img src="../../../assets/images/newHome/name.png" />
-                  <div>设备名称</div>
+                <div class="deviceInfo">
+                  <div class="leftInfo">
+                    <img src="../../../assets/images/newHome/name.png" />
+                    <div>设备名称</div>
+                  </div>
+                  <div class="rightInfo">{{ item.device_name }}</div>
                 </div>
-                <div class="rightInfo">{{ item.device_name }}</div>
-              </div>
-              <div class="deviceInfo">
-                <div class="leftInfo">
-                  <img src="../../../assets/images/newHome/point.png" />
-                  <div>设备定位</div>
+                <div class="deviceInfo">
+                  <div class="leftInfo">
+                    <img src="../../../assets/images/newHome/point.png" />
+                    <div>设备定位</div>
+                  </div>
+                  <div class="rightInfo">{{ item.address }}</div>
+                </div>
+                <div class="deviceInfo">
+                  <div class="leftInfo">
+                    <img src="../../../assets/images/newHome/time.png" />
+                    <div>最新上报时间</div>
+                  </div>
+                  <div class="rightInfo">{{ item.uptime_format }}</div>
                 </div>
-                <div class="rightInfo">{{ item.address }}</div>
               </div>
-              <div class="deviceInfo">
-                <div class="leftInfo">
-                  <img src="../../../assets/images/newHome/time.png" />
-                  <div>最新上报时间</div>
+              <div class="card">
+                <Title text="设备参数"></Title>
+                <div class="flexBox">
+                  <div class="itemInfo">
+                    <span class="status">{{ item.device_status ? '在线' : '离线' }}</span>
+                    <span>在线状态</span>
+                  </div>
+                  <div class="itemInfo">
+                    <span class="status">≤5w</span>
+                    <span>待机功率</span>
+                  </div>
+                  <div class="itemInfo">
+                    <span class="status">雨控</span>
+                    <span>自动触发</span>
+                  </div>
+                  <div class="itemInfo">
+                    <span class="status">1200w</span>
+                    <span>超清像素</span>
+                  </div>
+                  <div class="itemInfo">
+                    <span class="status">开启</span>
+                    <span>光诱状态</span>
+                  </div>
+                  <div class="itemInfo">
+                    <span class="status">3</span>
+                    <span>灯管数量</span>
+                  </div>
+                  <div class="itemInfo">
+                    <span class="status">365nm</span>
+                    <span>主波长</span>
+                  </div>
+                  <div class="itemInfo">
+                    <span class="status">开启</span>
+                    <span>性诱状态</span>
+                  </div>
                 </div>
-                <div class="rightInfo">{{ item.uptime_format }}</div>
               </div>
             </div>
-            <div class="card">
-              <Title text="设备参数"></Title>
-              <div class="flexBox">
-                <div class="itemInfo">
-                  <span class="status">{{ item.device_status ? '在线' : '离线' }}</span>
-                  <span>在线状态</span>
-                </div>
-                <div class="itemInfo">
-                  <span class="status">≤5w</span>
-                  <span>待机功率</span>
-                </div>
-                <div class="itemInfo">
-                  <span class="status">雨控</span>
-                  <span>自动触发</span>
-                </div>
-                <div class="itemInfo">
-                  <span class="status">1200w</span>
-                  <span>超清像素</span>
-                </div>
-                <div class="itemInfo">
-                  <span class="status">开启</span>
-                  <span>光诱状态</span>
-                </div>
-                <div class="itemInfo">
-                  <span class="status">3</span>
-                  <span>灯管数量</span>
-                </div>
-                <div class="itemInfo">
-                  <span class="status">365nm</span>
-                  <span>主波长</span>
-                </div>
-                <div class="itemInfo">
-                  <span class="status">开启</span>
-                  <span>性诱状态</span>
+            <div class="bigCard">
+              <div class="titleBox">
+                <Title text="实时监控"></Title>
+                <div class="nameContent">{{ item.jk_device_name }}</div>
+              </div>
+              <div class="charBox" :id="`playBox${item.id}`">
+              </div>
+              <!-- <video class="charBox" :id="`play${item.id}`" :src="item.jk_addr.hlsHd" muted autoplay  poster='' controls playsInline  webkit-playsinline></video> -->
+            </div>
+            <div class="rowFlex">
+              <div class="card">
+                <Title text="设备图片"></Title>
+                <el-carousel v-if="pestImgList[index]" indicator-position="none" class="charBox" :autoplay="false"
+                  :interval="1000">
+                  <el-carousel-item v-for="(img) in pestImgList[index]" :key="img">
+                    <el-image :src="`https://www.yhswjc.com${img}`" fit="contain"
+                      :preview-src-list="pestImgList[index]">
+                    </el-image>
+                  </el-carousel-item>
+                </el-carousel>
+              </div>
+              <div class="card">
+                <Title text="实时数据"></Title>
+                <div class="charBox">
+                  <div class="scrollItem scrollHeader">
+                    <div>害虫名称</div>
+                    <div class="timeBox">上报时间</div>
+                    <div>数量</div>
+                  </div>
+                  <PestInfo :idData="item.id" v-if="pestNowList[index] && pestNowList[index].length > 0"
+                    :data="pestNowList[index]">
+                  </PestInfo>
                 </div>
               </div>
             </div>
           </div>
-          <div class="bigCard">
-            <div class="titleBox">
-              <Title text="实时监控"></Title>
-              <div class="nameContent">{{ item.jk_device_name }}</div>
-            </div>
-            <div class="charBox" :id="`playBox${item.id}`">
+        </transition>
+        <transition leave-active-class='animate__animated animate__fast animate__fadeOutRight'
+          enter-active-class="animate__animated animate__fast animate__fadeInRight">
+          <div class="flexBox bottomBox" v-if="index == activeIndex">
+            <div class="card">
+              <Title text="环境温湿度"></Title>
+              <div class="charBox" :id="`temChar${item.id}`"></div>
             </div>
-            <!-- <video class="charBox" :id="`play${item.id}`" :src="item.jk_addr.hlsHd" muted autoplay  poster='' controls playsInline  webkit-playsinline></video> -->
-          </div>
-          <div class="rowFlex">
             <div class="card">
-              <Title text="设备图片"></Title>
-              <el-carousel v-if="pestImgList[index]" indicator-position="none" class="charBox" :autoplay="false"
-                :interval="1000">
-                <el-carousel-item v-for="(img) in pestImgList[index]" :key="img">
-                  <el-image :src="`https://www.yhswjc.com${img}`" fit="contain" :preview-src-list="pestImgList[index]">
-                  </el-image>
-                </el-carousel-item>
-              </el-carousel>
+              <Title text="虫情类别"></Title>
+              <PestType class="charBox" v-if="pestTypeList[index] && pestTypeList[index].length > 0"
+                :dataList="pestTypeList[index]" :chartId="`type${item.id}`"></PestType>
             </div>
             <div class="card">
-              <Title text="实时数据"></Title>
-              <div class="charBox">
-                <div class="scrollItem scrollHeader">
-                  <div>害虫名称</div>
-                  <div class="timeBox">上报时间</div>
-                  <div>数量</div>
-                </div>
-                <PestInfo :idData="item.id" v-if="pestNowList[index] && pestNowList[index].length > 0"
-                  :data="pestNowList[index]">
-                </PestInfo>
-              </div>
+              <Title text="害虫总数量">
+              </Title>
+              <div class="charBox" :id="`countChar${item.id}`"></div>
             </div>
-          </div>
-        </div>
-        <div class="flexBox bottomBox">
-          <div class="card">
-            <Title text="环境温湿度"></Title>
-            <div class="charBox" :id="`temChar${item.id}`"></div>
-          </div>
-          <div class="card">
-            <Title text="虫情类别"></Title>
-            <PestType class="charBox" v-if="pestTypeList[index] && pestTypeList[index].length > 0"
-              :dataList="pestTypeList[index]" :chartId="`type${item.id}`"></PestType>
-          </div>
-          <div class="card">
-            <Title text="害虫总数量">
-            </Title>
-            <div class="charBox" :id="`countChar${item.id}`"></div>
-          </div>
-          <div class="card">
-            <div class="titleBox">
-              <Title text="虫害折线图"></Title>
-              <div class="rightBox" v-if="pestLineDate.length > 0">
-                <el-select size="mini" filterable v-model="pestLineCheck[index].value"
-                  @change="e => changePestSelect(e, pestLineCheck[index], pestLineDate[index], `pestDateChar${item.id}`)">
-                  <el-option v-for="(pest, pestIndex) in (pestLineDate[index])[(pestLineCheck[index].type)].pestName"
-                    :key="`${index}${pest}${pestIndex}`" :value="pest" :label="pest"></el-option>
-                </el-select>
-                <div class="rightType">
-                  <div :class="`${(pestLineCheck[index]).type == 'day' ? 'active' : ''}`"
-                    @click="changePestType(`pestDateChar${item.id}`, 'day', pestLineCheck[index], pestLineDate[index])">
-                    日</div>
-                  <div :class="`${(pestLineCheck[index]).type == 'months' ? 'active' : ''}`"
-                    @click="changePestType(`pestDateChar${item.id}`, 'months', pestLineCheck[index], pestLineDate[index])">
-                    月</div>
-                  <div :class="`${(pestLineCheck[index]).type == 'year' ? 'active' : ''}`"
-                    @click="changePestType(`pestDateChar${item.id}`, 'year', pestLineCheck[index], pestLineDate[index])">
-                    年</div>
+            <div class="card">
+              <div class="titleBox">
+                <Title text="虫害折线图"></Title>
+                <div class="rightBox" v-if="pestLineDate.length > 0">
+                  <el-select size="mini" filterable v-model="pestLineCheck[index].value"
+                    @change="e => changePestSelect(e, pestLineCheck[index], pestLineDate[index], `pestDateChar${item.id}`)">
+                    <el-option v-for="(pest, pestIndex) in (pestLineDate[index])[(pestLineCheck[index].type)].pestName"
+                      :key="`${index}${pest}${pestIndex}`" :value="pest" :label="pest"></el-option>
+                  </el-select>
+                  <div class="rightType">
+                    <div :class="`${(pestLineCheck[index]).type == 'day' ? 'active' : ''}`"
+                      @click="changePestType(`pestDateChar${item.id}`, 'day', pestLineCheck[index], pestLineDate[index])">
+                      日</div>
+                    <div :class="`${(pestLineCheck[index]).type == 'months' ? 'active' : ''}`"
+                      @click="changePestType(`pestDateChar${item.id}`, 'months', pestLineCheck[index], pestLineDate[index])">
+                      月</div>
+                    <div :class="`${(pestLineCheck[index]).type == 'year' ? 'active' : ''}`"
+                      @click="changePestType(`pestDateChar${item.id}`, 'year', pestLineCheck[index], pestLineDate[index])">
+                      年</div>
+                  </div>
                 </div>
               </div>
+              <div class="charBox" :id="`pestDateChar${item.id}`"></div>
             </div>
-            <div class="charBox" :id="`pestDateChar${item.id}`"></div>
           </div>
-        </div>
+        </transition>
       </el-carousel-item>
     </el-carousel>
   </div>
@@ -172,12 +180,14 @@ export default {
   data() {
     return {
       deviceList: [],
-      pestTypeList: [], // 害虫类别数组
+      pestTypeList: [], // 害虫类别数组 3D 用
+      pestTypeBar: [], // 害虫类别数组 柱状图用
       pestLineDate: [], // 害虫周 月 年 折线图
       pestNowList: [], // 实时数据
       pestImgList: [], //设备图片
       videoList: [], //监控列表 跳出页面要停止
-      pestLineCheck: []
+      pestLineCheck: [],
+      activeIndex: 0
     };
   },
   computed: {
@@ -195,6 +205,43 @@ export default {
     })
   },
   methods: {
+    changeSlider(index) {
+      this.activeIndex = index;
+      this.$nextTick(() => {
+        this.initCharByIndex(index);
+      })
+    },
+    /**
+     * @description: 根据当前索引值 渲染对应页面echarts（一次渲染页面太卡）
+     * @param {*} index
+     * @param {*} type 'tem' 温湿度 'count' 害虫类型 'pestDate' 根据日期统计害虫个数 undefined 渲染所有
+     * @return {*}
+     */
+    initCharByIndex(index, type) {
+      let deviceItem = this.deviceList[index]; // 当前设备信息
+      let indexId = deviceItem.id;
+      let countCharInfo = this.pestTypeBar[index]; // 当前害虫类型的信息
+      let pestDateCharInfo = this.pestLineDate[index]; // 当前害虫数量的信息
+      if (type == 'tem' || !type) {
+        let temChar = echarts.init(document.getElementById(`temChar${indexId}`)); // 温湿度的charts
+        this.setLineOption(temChar, ['温度（℃）', '湿度（%）'], deviceItem.ath.addtime, [deviceItem.ath.tem, deviceItem.ath.hum], [['#90ff0366', '#8fff0010'], ['#0066ff59', '#0066ff00']], ['#19E4A6', '#1588F2'])
+      }
+      if (type == 'count' || !type) {
+        // console.log(countCharInfo, 'countCharInfo');
+        let countChar = echarts.init(document.getElementById(`countChar${indexId}`)); // 害虫类型
+        this.setBarOption(countChar, countCharInfo.name, countCharInfo.count);
+      }
+      if (type == 'pestDate' || !type) {
+        let pestDateChar = echarts.init(document.getElementById(`pestDateChar${indexId}`)); // 害虫个数
+        let xData = [];
+        let yData = [];
+        pestDateCharInfo.day.countInfo.forEach(pest => {
+          xData.push(pest.date);
+          yData.push(pest.data[0])
+        })
+        this.setLineOption(pestDateChar, [pestDateCharInfo.day.pestName[0]], xData, [yData], [['#0066ff59', '#0066ff00']], ['#1588F2'], true)
+      }
+    },
     /**
      * @description: 虫害折线图 切换年月日 由于虫子不一样 所以会默认展示第一种
      * @param {*} char 需要渲染的echars dom id
@@ -254,11 +301,12 @@ export default {
         // this.deviceList.length = 1;
         this.pestTypeList = [];
         this.deviceList.forEach((item, index) => {
-          this.getTypeList(item.id);
+          this.getTypeList(item.id, index);
           this.getPhotoList(item.id);
           this.getNowList(item.id);
-          this.getLineDate(item.id);
-          item.jk_addr = eval('(' + item.jk_addr + ')');
+          this.getLineDate(item.id, index);
+          item.jk_addr = item.jk_addr ? eval('(' + item.jk_addr + ')') : {};
+          if (item.jk_addr == '') return
           // let playHtml = `<video id="play${item.id}" autoplay  muted poster='' controls playsInline  webkit-playsinline src="${item.jk_addr.hlsHd}"  style="width:100%; height:100%;"></video>`;
           // document.getElementById(
           //   'playBox' + item.id
@@ -271,12 +319,16 @@ export default {
           //   console.log(playerObj, 'playerObj')
           //   this.videoList.push(playerObj)
           // })
-          this.$nextTick(() => {
-            let char = echarts.init(document.getElementById(`temChar${item.id}`));
-            this.setLineOption(char, ['温度（℃）', '湿度（%）'], item.ath.addtime, [item.ath.tem, item.ath.hum], [['#90ff0366', '#8fff0010'], ['#0066ff59', '#0066ff00']], ['#19E4A6', '#1588F2'])
-          })
+          // this.$nextTick(() => {
+          //   let char = echarts.init(document.getElementById(`temChar${item.id}`));
+          //   this.setLineOption(char, ['温度（℃）', '湿度（%）'], item.ath.addtime, [item.ath.tem, item.ath.hum], [['#90ff0366', '#8fff0010'], ['#0066ff59', '#0066ff00']], ['#19E4A6', '#1588F2'])
+          // })
           // console.log(this.pestTypeList, 'pestTypeList');
         })
+        this.$nextTick(() => {
+          // 默认渲染第一页
+          this.initCharByIndex(0, 'tem');
+        })
       })
     },
     // 折线图带渐变配置
@@ -427,7 +479,7 @@ export default {
       char.setOption(optionsPestLine)
     },
     // 获取虫害分类数据
-    getTypeList(id) {
+    getTypeList(id, index) {
       this.$axios({
         method: 'POST',
         url: '/api/api_gateway?method=data_report.cbd_screen.cbd_pest_info',
@@ -449,9 +501,12 @@ export default {
           newArray.push(preObj)
         });
         console.log(id)
-        let char = echarts.init(document.getElementById(`countChar${id}`));
-        this.setBarOption(char, res.data.data.name, res.data.data.count);
-        this.pestTypeList.push(newArray)
+        // let char = echarts.init(document.getElementById(`countChar${id}`));
+        // this.setBarOption(char, res.data.data.name, res.data.data.count);
+        this.pestTypeList.push(newArray);
+        this.pestTypeBar.push(res.data.data);
+        if (index != 0) return
+        this.initCharByIndex(0, 'count');
       })
     },
     // 获取虫害图片数据
@@ -486,7 +541,7 @@ export default {
         this.pestNowList.push(res.data.data)
       })
     },
-    getLineDate(id) {
+    getLineDate(id, index) {
       this.$axios({
         method: 'POST',
         url: '/api/api_gateway?method=data_report.cbd_screen.cbd_pest_count',
@@ -503,15 +558,17 @@ export default {
           type: 'day',
           value: res.data.data.day.pestName[0]
         });
-        let xData = [];
-        let yData = [];
-        res.data.data.day.countInfo.forEach(pest => {
-          xData.push(pest.date);
-          yData.push(pest.data[0])
-        })
-        let char = echarts.init(document.getElementById(`pestDateChar${id}`));
-        this.setLineOption(char, [res.data.data.day.pestName[0]], xData, [yData], [['#0066ff59', '#0066ff00']], ['#1588F2'], true)
-        console.log(this.pestLineDate)
+        if (index != 0) return
+        this.initCharByIndex(0, 'pestDate');
+        // let xData = [];
+        // let yData = [];
+        // res.data.data.day.countInfo.forEach(pest => {
+        //   xData.push(pest.date);
+        //   yData.push(pest.data[0])
+        // })
+        // let char = echarts.init(document.getElementById(`pestDateChar${id}`));
+        // this.setLineOption(char, [res.data.data.day.pestName[0]], xData, [yData], [['#0066ff59', '#0066ff00']], ['#1588F2'], true)
+        // console.log(this.pestLineDate)
       })
     },
   },