大屏数据问题

minggao/config/index.js

@@ -2,7 +2,7 @@
  * @Author: zhangsijie 1935241421@qq.com
  * @Date: 2023-06-05 08:51:07
  * @LastEditors: lin
- * @LastEditTime: 2024-04-22 14:37:25
+ * @LastEditTime: 2024-06-13 09:56:19
  * @FilePath: \project\minggao_vue\MingGao_vue\minggao\config\index.js
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -21,10 +21,10 @@ module.exports = {
       '/api': {
         ws: false,
         // target: 'http://192.168.1.52:12345', //翟毅飞
-        //  target: 'https://www.yhswjc.com', //线上
+         target: 'https://www.yhswjc.com', //线上
         // target: 'http://192.168.1.77:12345', //曹世祥
         // target: 'http://114.115.147.140:12345',
-         target: 'http://192.168.0.117:8001', //闫自林本地服务
+        //  target: 'http://192.168.0.117:8001', //闫自林本地服务
         //  target: 'http://192.168.0.120:8001', //孙夹克本地服务
         changeOrigin: true,
         pathRewrite: {

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-20 09:06:54
+ * @LastEditTime: 2024-06-13 10:54:12
 -->
 <template>
   <div class="scrollInfoContent">
-    <div :class="`scrollItem ${index == 0 ? 'animate__animated animate__slideOutUp heightOut' : ''}`" v-for="(info, index) in newData" :key="`time${idData}${info.addtime_format}`">
+    <div :class="`scrollItem ${index == 0 ? 'animate__animated animate__slideOutUp heightOut' : ''}`" v-for="(info, index) in newData" :key="`${idData}${info.pest_name}${info.addtime_format}`">
       <template>
         <div>{{ info.pest_name }}</div>
         <div class="timeBox">{{ info.addtime_format }}</div>

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

@@ -3,7 +3,7 @@
  * @Autor: lin
  * @Date: 2024-04-09 14:26:43
  * @LastEditors: lin
- * @LastEditTime: 2024-04-28 15:31:39
+ * @LastEditTime: 2024-06-13 11:19:29
 -->
 <template>
   <div class="bigBg" v-loading="loading">
@@ -92,7 +92,7 @@
               <Title text="实时监控"></Title>
               <div class="nameContent">{{ item.jk_device_name }}</div>
             </div>
-            <div class="charBox" >
+            <div class="charBox">
               <img
                 src="../../../assets/images/newHome/videoDefault.png"
                 v-if="!showVideo"
@@ -161,7 +161,7 @@
           <div class="card">
             <div class="titleBox">
               <Title text="虫害折线图"></Title>
-              <div class="rightBox" v-if="pestLineDate.length > 0">
+              <div class="rightBox" v-if="pestLineDate[index] && pestLineDate.length > 0">
                 <el-select
                   size="mini"
                   filterable
@@ -219,7 +219,7 @@ export default {
       pestLineCheck: [],
       activeIndex: 0,
       timmer: null,
-      showVideo: false
+      showVideo: false,
     };
   },
   computed: {},
@@ -257,7 +257,7 @@ export default {
           id: `play${data.id}`,
         });
         this.videoList.push(playerObj);
-      })
+      });
     },
     changeSlider(index) {
       this.activeIndex = index;
@@ -397,15 +397,20 @@ export default {
         // console.log(res.data.data);
         this.deviceList = res.data.data;
         // this.deviceList.length = 1;
-        this.pestTypeList = [];
+        this.pestTypeList = Array(this.deviceList.length).fill(''); // 害虫类别数组 3D 用
+        this.pestTypeBar = Array(this.deviceList.length).fill(''); // 害虫类别数组 柱状图用
+        this.pestLineDate = Array(this.deviceList.length).fill(''); // 害虫周 月 年 折线图
+        this.pestNowList = Array(this.deviceList.length).fill(''); // 实时数据
+        this.pestImgList = Array(this.deviceList.length).fill(''); //设备图片
+        this.pestLineCheck = Array(this.deviceList.length).fill('');
         this.deviceList.forEach((item, index) => {
           if (this.$route.query.id && item.device_id == this.$route.query.id) {
             this.activeIndex = index;
           }
           this.getTypeList(item.id, index);
-          this.getPhotoList(item.id);
-          this.getNowList(item.id);
-          this.getLineDate(item.id, index);
+          this.getPhotoList(item.id, index);
+          this.getNowList(item.id, index);
+          // this.getLineDate(item.id, index);
           item.jk_addr = item.jk_addr ? eval('(' + item.jk_addr + ')') : {};
           // if (item.jk_addr == '') return;
           // this.$nextTick(() => {
@@ -414,13 +419,13 @@ export default {
           // })
           // console.log(this.pestTypeList, 'pestTypeList');
         });
-        this.$nextTick(() => {
-          // 默认渲染第一页
-          this.initCharByIndex(this.activeIndex, 'tem');
-        });
+        // this.$nextTick(() => {
+        //   // 默认渲染第一页
+        //   this.initCharByIndex(this.activeIndex, 'tem');
+        // });
         this.timmer = setInterval(() => {
           this.$router.push('/newHome/home');
-        }, this.deviceList.length * 1200000)
+        }, this.deviceList.length * 1200000);
       });
     },
     // 折线图带渐变配置
@@ -594,28 +599,32 @@ export default {
           this.$message.error('网络连接出错或服务报错，请刷新页面重试');
           return;
         }
+        // console.log(index);
         let newArray = [];
-        res.data.data.name.forEach((item, index) => {
+        res.data.data.name.forEach((item, indexNew) => {
           let preObj = {
             name: item,
-            num: res.data.data.count[index],
-            value: res.data.data.count[index],
+            num: res.data.data.count[indexNew],
+            value: res.data.data.count[indexNew],
           };
           newArray.push(preObj);
         });
-        console.log(id);
+        // 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);
-        this.pestTypeBar.push(res.data.data);
-        if (index != this.activeIndex) return;
-        if (this.pestTypeBar.length > this.activeIndex) {
-          this.initCharByIndex(this.activeIndex, 'count');
-        }
+        // Vue.set(this.pestTypeList, index, newArray);
+        // Vue.set(this.pestTypeBar, index, res.data.data);
+        this.pestTypeList[index] = newArray;
+        this.pestTypeBar[index] = res.data.data;
+        this.getLineDate(id, index)
+        // if (index != this.activeIndex) return;
+        // if (index == this.activeIndex) {
+        //   this.initCharByIndex(this.activeIndex, 'count');
+        // }
       });
     },
     // 获取虫害图片数据
-    getPhotoList(id) {
+    getPhotoList(id, index) {
       this.$axios({
         method: 'POST',
         url: '/api/api_gateway?method=data_report.cbd_screen.recent_photo_count',
@@ -627,11 +636,12 @@ export default {
           this.$message.error('网络连接出错或服务报错，请刷新页面重试');
           return;
         }
-        this.pestImgList.push(res.data.data);
+        this.pestImgList[index] = (res.data.data);
+        // Vue.set(this.pestImgList, index, res.data.data);
       });
     },
     // 获取虫害实时数据
-    getNowList(id) {
+    getNowList(id, index) {
       this.$axios({
         method: 'POST',
         url: '/api/api_gateway?method=data_report.cbd_screen.recent_pest_count',
@@ -643,7 +653,8 @@ export default {
           this.$message.error('网络连接出错或服务报错，请刷新页面重试');
           return;
         }
-        this.pestNowList.push(res.data.data);
+        this.pestNowList[index] = (res.data.data);
+        // Vue.set(this.pestNowList, index, res.data.data);
       });
     },
     getLineDate(id, index) {
@@ -658,16 +669,24 @@ export default {
           this.$message.error('网络连接出错或服务报错，请刷新页面重试');
           return;
         }
-        this.pestLineDate.push(res.data.data);
-        this.pestLineCheck.push({
+        this.pestLineDate[index] = res.data.data;
+        // Vue.set(this.pestLineDate, index, res.data.data);
+        // this.pestLineCheck[index] = {
+        //   type: 'day',
+        //   value: res.data.data.day.pestName[0],
+        // };
+        this.$set(this.pestLineCheck, index, {
           type: 'day',
           value: res.data.data.day.pestName[0],
         });
         if (index != this.activeIndex) return;
-
-        if (this.pestLineDate.length > this.activeIndex) {
-          this.initCharByIndex(this.activeIndex, 'pestDate');
-        }
+        this.$nextTick(() => {
+          if (index == this.activeIndex) {
+            this.initCharByIndex(this.activeIndex, 'pestDate');
+            this.initCharByIndex(this.activeIndex, 'count');
+            this.initCharByIndex(this.activeIndex, 'tem');
+          }
+        })
         // let xData = [];
         // let yData = [];
         // res.data.data.day.countInfo.forEach(pest => {