处理一些问题

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-18 16:28:38
+ * @LastEditTime: 2024-04-19 17:30:17
 -->
 <template>
   <div class="scrollInfoContent">
-    <div :class="`scrollItem ${index == 0 ? 'animate__animated animate__slideOutUp heightOut' : ''}`" v-for="(info, index) in newData" :key="`time${info.addtime_format}`">
+    <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}`">
       <template>
         <div>{{ info.pest_name }}</div>
         <div class="timeBox">{{ info.addtime_format }}</div>
@@ -19,7 +19,7 @@
 
 <script>
 export default {
-  props: ['data'],
+  props: ['data', 'idData'],
   data() {
     return {
       newData: [],

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-19 16:35:19
+ * @LastEditTime: 2024-04-19 17:27:41
 -->
 <template>
   <div class="bigBg">
@@ -92,7 +92,8 @@
           <div class="rowFlex">
             <div class="card">
               <Title text="设备图片"></Title>
-              <el-carousel indicator-position="none" class="charBox" :autoplay="false" :interval="1000">
+              <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>
@@ -107,7 +108,8 @@
                   <div class="timeBox">上报时间</div>
                   <div>数量</div>
                 </div>
-                <PestInfo v-if="pestNowList[index] && pestNowList[index].length > 0" :data="pestNowList[index]">
+                <PestInfo :idData="item.id" v-if="pestNowList[index] && pestNowList[index].length > 0"
+                  :data="pestNowList[index]">
                 </PestInfo>
               </div>
             </div>
@@ -132,13 +134,21 @@
             <div class="titleBox">
               <Title text="虫害折线图"></Title>
               <div class="rightBox" v-if="pestLineDate.length > 0">
-                <el-select size="mini"  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 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="`${(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>
@@ -167,7 +177,7 @@ export default {
       pestNowList: [], // 实时数据
       pestImgList: [], //设备图片
       videoList: [], //监控列表 跳出页面要停止
-      pestLineCheck:[]
+      pestLineCheck: []
     };
   },
   computed: {
@@ -241,27 +251,27 @@ export default {
         }
         // console.log(res.data.data);
         this.deviceList = res.data.data;
-        this.deviceList.length = 1;
+        // this.deviceList.length = 1;
         this.pestTypeList = [];
-        this.$nextTick(() => {
-          this.deviceList.forEach((item, index) => {
-            this.getTypeList(item.id);
-            this.getPhotoList(item.id);
-            this.getNowList(item.id);
-            this.getLineDate(item.id);
-            item.jk_addr = eval('(' + item.jk_addr + ')');
-            // 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
-            // ).innerHTML = playHtml;
-            // // // 视频
-            // this.$nextTick(() => {
-            //   let playerObj = new EZUIKit.EZUIPlayer({
-            //     id: `play${item.id}`
-            //   });
-            //   console.log(playerObj, 'playerObj')
-            //   this.videoList.push(playerObj)
-            // })
+        this.deviceList.forEach((item, index) => {
+          this.getTypeList(item.id);
+          this.getPhotoList(item.id);
+          this.getNowList(item.id);
+          this.getLineDate(item.id);
+          item.jk_addr = eval('(' + item.jk_addr + ')');
+          // 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
+          // ).innerHTML = playHtml;
+          // // // 视频
+          // this.$nextTick(() => {
+          //   let playerObj = new EZUIKit.EZUIPlayer({
+          //     id: `play${item.id}`
+          //   });
+          //   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'])
           })
@@ -270,7 +280,7 @@ export default {
       })
     },
     // 折线图带渐变配置
-    setLineOption(char, name, xData, yData, color, lineColor, showAxisLabel=false) {
+    setLineOption(char, name, xData, yData, color, lineColor, showAxisLabel = false) {
       let series = [];
       yData.forEach((item, index) => {
         let pre = {
@@ -491,7 +501,7 @@ export default {
         this.pestLineDate.push(res.data.data);
         this.pestLineCheck.push({
           type: 'day',
-          value:res.data.data.day.pestName[0]
+          value: res.data.data.day.pestName[0]
         });
         let xData = [];
         let yData = [];
@@ -523,6 +533,7 @@ export default {
   height: 100%;
   box-sizing: border-box;
   padding: 11.7vh 5.52vw;
+
   /deep/ .el-select,
   /deep/ .el-date-editor {
     width: 8.8vw;
@@ -550,21 +561,25 @@ export default {
     color: #ffffffcc;
     font-size: 2rem;
   }
-  .rightBox{
+
+  .rightBox {
     display: flex;
     align-items: center;
     max-width: 60%;
-    .rightType{
+
+    .rightType {
       display: flex;
       color: #ffffff80;
       font-size: 1.6rem;
       margin-left: .5rem;
-      div{
+
+      div {
         width: 2.4rem;
         text-align: center;
         cursor: pointer;
       }
-      .active{
+
+      .active {
         color: #ffffff;
         text-shadow: 0 0 2.5px #FFF;
       }
@@ -625,7 +640,8 @@ export default {
         width: 25%;
         text-align: center;
       }
-      .timeBox{
+
+      .timeBox {
         width: 40%;
       }
     }