优化背景图 视频播放优化

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

@@ -3,7 +3,7 @@
  * @Autor: lin
  * @Date: 2024-04-12 13:48:21
  * @LastEditors: lin
- * @LastEditTime: 2024-04-16 13:47:27
+ * @LastEditTime: 2024-04-23 14:13:23
 -->
 <template>
     <div class="titlebox">
@@ -57,7 +57,7 @@ export default {
   }
   .text{
     color: #ffffffe6;
-    font-size: 2rem;
+    font-size: 1.6rem;
     font-weight: 500;
     line-height: 2.8rem;
     letter-spacing: 1px;

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

@@ -3,160 +3,197 @@
  * @Autor: lin
  * @Date: 2024-04-09 14:26:43
  * @LastEditors: lin
- * @LastEditTime: 2024-04-22 14:22:53
+ * @LastEditTime: 2024-04-23 14:11:27
 -->
 <template>
   <div class="bigBg" v-loading="loading">
-    <el-carousel indicator-position="outside" trigger="click" :initial-index="activeIndex" class="deviceBox" :interval="10000"
-      @change="changeSlider">
+    <el-carousel
+      indicator-position="outside"
+      trigger="click"
+      :initial-index="activeIndex"
+      class="deviceBox"
+      :interval="1200000"
+      @change="changeSlider"
+    >
       <el-carousel-item v-for="(item, index) in deviceList" :key="item.id">
-          <div class="flexBox topBox">
-            <div class="rowFlex" v-show="index == activeIndex">
-              <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="deviceInfo">
-                  <div class="leftInfo">
-                    <img src="../../../assets/images/newHome/name.png" />
-                    <div>设备名称</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>
-                  <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 class="flexBox topBox">
+          <div class="rowFlex" v-show="index == activeIndex">
+            <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="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 class="deviceInfo">
+                <div class="leftInfo">
+                  <img src="../../../assets/images/newHome/name.png" />
+                  <div>设备名称</div>
                 </div>
+                <div class="rightInfo">{{ item.device_name }}</div>
               </div>
-            </div>
-            <div class="bigCard">
-              <div class="titleBox">
-                <Title text="实时监控"></Title>
-                <div class="nameContent">{{ item.jk_device_name }}</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="charBox" :id="`playBox${item.id}`">
+              <div class="deviceInfo">
+                <div class="leftInfo">
+                  <img src="../../../assets/images/newHome/time.png" />
+                  <div>最新上报时间</div>
+                </div>
+                <div class="rightInfo">{{ item.uptime_format }}</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" v-if="index == activeIndex">
-              <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 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>
           </div>
-          <div class="flexBox bottomBox" v-if="index == activeIndex">
-            <div class="card">
-              <Title text="环境温湿度"></Title>
-              <div class="charBox" :id="`temChar${item.id}`"></div>
+          <div class="bigCard">
+            <div class="titleBox">
+              <Title text="实时监控"></Title>
+              <div class="nameContent">{{ item.jk_device_name }}</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 class="charBox" >
+              <img
+                src="../../../assets/images/newHome/videoDefault.png"
+                v-if="!showVideo"
+                width="100%"
+                height="100%"
+                @click="playVideo(item)"
+              />
+              <div v-show="showVideo" :id="`playBox${item.id}`" style="height: 100%"></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" v-if="index == activeIndex">
             <div class="card">
-              <Title text="害虫总数量">
-              </Title>
-              <div class="charBox" :id="`countChar${item.id}`"></div>
+              <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">
-              <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>
+              <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 class="charBox" :id="`pestDateChar${item.id}`"></div>
             </div>
           </div>
+        </div>
+        <div class="flexBox bottomBox" v-if="index == activeIndex">
+          <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>
+              </div>
+            </div>
+            <div class="charBox" :id="`pestDateChar${item.id}`"></div>
+          </div>
+        </div>
       </el-carousel-item>
     </el-carousel>
   </div>
@@ -165,12 +202,10 @@
 <script>
 import * as echarts from 'echarts';
 import Title from './components/Title.vue';
-import PestType from "./components/pie3D.vue"; // 害虫种类3d环状图
+import PestType from './components/pie3D.vue'; // 害虫种类3d环状图
 import PestInfo from './components/scrollInfo.vue';
 export default {
-  props: {
-
-  },
+  props: {},
   data() {
     return {
       loading: true,
@@ -183,37 +218,55 @@ export default {
       videoList: [], //监控列表 跳出页面要停止
       pestLineCheck: [],
       activeIndex: 0,
-      timmer:null
+      timmer: null,
+      showVideo: false
     };
   },
-  computed: {
-
-  },
-  created() {
-
-  },
+  computed: {},
+  created() {},
   mounted() {
     this.getDeviceList();
   },
   beforeDestroy() {
-    this.videoList.forEach(item => {
-      item.stop()
-    })
+    this.clearVideo();
     clearInterval(this.timmer);
   },
   methods: {
+    clearVideo() {
+      this.videoList.forEach((item) => {
+        item.stop();
+      });
+    },
+    playVideo(data) {
+      // // 视频
+      console.log(data);
+      if (data.jk_addr == '') {
+        this.$message.error('当前视频无播放地址，请联系管理员');
+        return;
+      }
+      this.clearVideo();
+      this.videoList = [];
+      this.showVideo = true;
+      this.$nextTick(() => {
+        console.log(document.getElementById('playBox' + data.id));
+        let hlsHdSrc = data.jk_addr.hlsHd;
+        hlsHdSrc = 'https' + hlsHdSrc.toString().slice(4);
+        let playHtml = `<video id="play${data.id}" autoplay  muted poster='' controls playsInline  webkit-playsinline src="${hlsHdSrc}"  style="width:100%; height:100%;"></video>`;
+        document.getElementById('playBox' + data.id).innerHTML = playHtml;
+        let playerObj = new EZUIKit.EZUIPlayer({
+          id: `play${data.id}`,
+        });
+        this.videoList.push(playerObj);
+      })
+    },
     changeSlider(index) {
       this.activeIndex = index;
+      this.clearVideo();
+      this.showVideo = false;
+      // this.deviceList[index].showVideo = false;
       this.$nextTick(() => {
         this.initCharByIndex(index);
-        // this.videoList.forEach((item, videoIndex) => {
-        //   if (videoIndex != index) {
-        //     item.stop()
-        //   } else {
-        //     item.play()
-        //   }
-        // })
-      })
+      });
     },
     /**
      * @description: 根据当前索引值 渲染对应页面echarts（一次渲染页面太卡）
@@ -227,23 +280,47 @@ export default {
       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'])
+        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}`)); // 害虫类型
+        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 pestDateChar = echarts.init(
+          document.getElementById(`pestDateChar${indexId}`)
+        ); // 害虫个数
         let xData = [];
         let yData = [];
-        pestDateCharInfo.day.countInfo.forEach(pest => {
+        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)
+          yData.push(pest.data[0]);
+        });
+        this.setLineOption(
+          pestDateChar,
+          [pestDateCharInfo.day.pestName[0]],
+          xData,
+          [yData],
+          [['#0066ff59', '#0066ff00']],
+          ['#1588F2'],
+          true
+        );
       }
       this.loading = false;
     },
@@ -260,12 +337,20 @@ export default {
       typeObj.value = data[type].pestName[0];
       let xData = [];
       let yData = [];
-      data[type].countInfo.forEach(pest => {
+      data[type].countInfo.forEach((pest) => {
         xData.push(pest.date);
-        yData.push(pest.data[0])
-      })
+        yData.push(pest.data[0]);
+      });
       let char = echarts.init(document.getElementById(charID));
-      this.setLineOption(char, [typeObj.value], xData, [yData], [['#0066ff59', '#0066ff00']], ['#1588F2'], true)
+      this.setLineOption(
+        char,
+        [typeObj.value],
+        xData,
+        [yData],
+        [['#0066ff59', '#0066ff00']],
+        ['#1588F2'],
+        true
+      );
     },
     /**
      * @description: 虫害折线图 切换虫害下拉框
@@ -281,12 +366,20 @@ export default {
       let pestIndex = data[typeObj.type].pestName.indexOf(pest);
       let xData = [];
       let yData = [];
-      data[typeObj.type].countInfo.forEach(pest => {
+      data[typeObj.type].countInfo.forEach((pest) => {
         xData.push(pest.date);
-        yData.push(pest.data[pestIndex])
-      })
+        yData.push(pest.data[pestIndex]);
+      });
       let char = echarts.init(document.getElementById(charId));
-      this.setLineOption(char, [pest], xData, [yData], [['#0066ff59', '#0066ff00']], ['#1588F2'], true);
+      this.setLineOption(
+        char,
+        [pest],
+        xData,
+        [yData],
+        [['#0066ff59', '#0066ff00']],
+        ['#1588F2'],
+        true
+      );
     },
     // 获取有测报灯列表
     getDeviceList(date) {
@@ -294,12 +387,12 @@ export default {
         method: 'POST',
         url: '/api/api_gateway?method=data_report.cbd_screen.device_screen_info',
         data: this.qs.stringify({
-          date
-        })
-      }).then(res => {
+          date,
+        }),
+      }).then((res) => {
         if (!res.data.data) {
           this.$message.error('网络连接出错或服务报错，请刷新页面重试');
-          return
+          return;
         }
         // console.log(res.data.data);
         this.deviceList = res.data.data;
@@ -314,36 +407,32 @@ export default {
           this.getNowList(item.id);
           this.getLineDate(item.id, index);
           item.jk_addr = item.jk_addr ? eval('(' + item.jk_addr + ')') : {};
-          if (item.jk_addr == '') return
-          // // 视频
-          this.$nextTick(() => {
-            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;
-            let playerObj = new EZUIKit.EZUIPlayer({
-              id: `play${item.id}`
-            });
-            console.log(playerObj, 'playerObj')
-            this.videoList.push(playerObj)
-          })
+          // if (item.jk_addr == '') return;
           // 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(this.activeIndex, 'tem');
-        })
-        // this.timmer = setInterval(() => {
-        //   this.$router.push('/newHome/home');
-        // }, this.deviceList.length * 10000)
-      })
+        });
+        this.timmer = setInterval(() => {
+          this.$router.push('/newHome/home');
+        }, this.deviceList.length * 1200000)
+      });
     },
     // 折线图带渐变配置
-    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 = {
@@ -359,21 +448,24 @@ export default {
                 y: 0,
                 x2: 0,
                 y2: 1,
-                colorStops: [{
-                  offset: 0,
-                  color: color[index][0] // 0% 处的颜色
-                }, {
-                  offset: 0.8,
-                  color: color[index][1] // 100% 处的颜色
-                }],
-                global: false // 缺省为 false
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: color[index][0], // 0% 处的颜色
+                  },
+                  {
+                    offset: 0.8,
+                    color: color[index][1], // 100% 处的颜色
+                  },
+                ],
+                global: false, // 缺省为 false
               },
-              shadowColor: "rgba(0, 0, 0, 0.1)"
-            }
-          }
+              shadowColor: 'rgba(0, 0, 0, 0.1)',
+            },
+          },
         };
-        series.push(pre)
-      })
+        series.push(pre);
+      });
       let optionsPestLine = {
         // 设置全局文本样式
         textStyle: {
@@ -384,49 +476,49 @@ export default {
           left: '5%',
           bottom: '5%',
           right: '0%',
-          containLabel: true
+          containLabel: true,
         },
         tooltip: {
-          trigger: 'axis'
+          trigger: 'axis',
         },
         color: lineColor,
         xAxis: {
           type: 'category',
           axisLine: {
             lineStyle: {
-              color: '#ffffff'  // 设置 x 轴轴线颜色为白色
-            }
+              color: '#ffffff', // 设置 x 轴轴线颜色为白色
+            },
           },
           axisLabel: {
-            show: showAxisLabel
+            show: showAxisLabel,
           },
           splitLine: {
-            show: false  // 不显示 x 轴分隔线
+            show: false, // 不显示 x 轴分隔线
           },
-          data: xData
+          data: xData,
         },
         yAxis: {
           type: 'value',
           nameTextStyle: {
-            color: '#fff'
+            color: '#fff',
           },
           axisLine: {
-            show: false  // 不显示 y 轴轴线
+            show: false, // 不显示 y 轴轴线
           },
           axisLabel: {
-            color: '#ffffff'  // 设置 y 轴标签字体颜色为白色
+            color: '#ffffff', // 设置 y 轴标签字体颜色为白色
           },
           splitLine: {
             lineStyle: {
-              type: 'dotted',  // 设置分隔线为点线
-              color: '#ffffff88'
-            }
-          }
+              type: 'dotted', // 设置分隔线为点线
+              color: '#ffffff88',
+            },
+          },
         },
-        series: series
+        series: series,
       }; // 有害生物发生趋势 折线图
 
-      char.setOption(optionsPestLine)
+      char.setOption(optionsPestLine);
     },
     // 柱状图配置
     setBarOption(char, xData, yData) {
@@ -440,54 +532,54 @@ export default {
           left: '0',
           bottom: '5%',
           right: '0%',
-          containLabel: true
+          containLabel: true,
         },
         tooltip: {
-          trigger: 'axis'
+          trigger: 'axis',
         },
         color: ['#24D3BE'],
         xAxis: {
           type: 'category',
           axisLine: {
             lineStyle: {
-              color: '#ffffff'  // 设置 x 轴轴线颜色为白色
-            }
+              color: '#ffffff', // 设置 x 轴轴线颜色为白色
+            },
           },
           axisLabel: {
-            show: true
+            show: true,
           },
           splitLine: {
-            show: false  // 不显示 x 轴分隔线
+            show: false, // 不显示 x 轴分隔线
           },
-          data: xData
+          data: xData,
         },
         yAxis: {
           type: 'value',
           nameTextStyle: {
-            color: '#fff'
+            color: '#fff',
           },
           axisLine: {
-            show: false  // 不显示 y 轴轴线
+            show: false, // 不显示 y 轴轴线
           },
           axisLabel: {
-            color: '#ffffff'  // 设置 y 轴标签字体颜色为白色
+            color: '#ffffff', // 设置 y 轴标签字体颜色为白色
           },
           splitLine: {
             lineStyle: {
-              type: 'dotted',  // 设置分隔线为点线
-              color: '#ffffff88'
-            }
-          }
+              type: 'dotted', // 设置分隔线为点线
+              color: '#ffffff88',
+            },
+          },
         },
         series: [
           {
             data: yData,
-            type: 'bar'
+            type: 'bar',
           },
-        ]
+        ],
       }; // 有害生物发生趋势 折线图
 
-      char.setOption(optionsPestLine)
+      char.setOption(optionsPestLine);
     },
     // 获取虫害分类数据
     getTypeList(id, index) {
@@ -495,32 +587,32 @@ export default {
         method: 'POST',
         url: '/api/api_gateway?method=data_report.cbd_screen.cbd_pest_info',
         data: this.qs.stringify({
-          id
-        })
-      }).then(res => {
+          id,
+        }),
+      }).then((res) => {
         if (!res.data.data) {
           this.$message.error('网络连接出错或服务报错，请刷新页面重试');
-          return
+          return;
         }
-        let newArray = []
+        let newArray = [];
         res.data.data.name.forEach((item, index) => {
           let preObj = {
             name: item,
             num: res.data.data.count[index],
-            value: res.data.data.count[index]
-          }
-          newArray.push(preObj)
+            value: res.data.data.count[index],
+          };
+          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 (index != this.activeIndex) return;
         if (this.pestTypeBar.length > this.activeIndex) {
           this.initCharByIndex(this.activeIndex, 'count');
         }
-      })
+      });
     },
     // 获取虫害图片数据
     getPhotoList(id) {
@@ -528,15 +620,15 @@ export default {
         method: 'POST',
         url: '/api/api_gateway?method=data_report.cbd_screen.recent_photo_count',
         data: this.qs.stringify({
-          id
-        })
-      }).then(res => {
+          id,
+        }),
+      }).then((res) => {
         if (!res.data.data) {
           this.$message.error('网络连接出错或服务报错，请刷新页面重试');
-          return
+          return;
         }
-        this.pestImgList.push(res.data.data)
-      })
+        this.pestImgList.push(res.data.data);
+      });
     },
     // 获取虫害实时数据
     getNowList(id) {
@@ -544,34 +636,34 @@ export default {
         method: 'POST',
         url: '/api/api_gateway?method=data_report.cbd_screen.recent_pest_count',
         data: this.qs.stringify({
-          id
-        })
-      }).then(res => {
+          id,
+        }),
+      }).then((res) => {
         if (!res.data.data) {
           this.$message.error('网络连接出错或服务报错，请刷新页面重试');
-          return
+          return;
         }
-        this.pestNowList.push(res.data.data)
-      })
+        this.pestNowList.push(res.data.data);
+      });
     },
     getLineDate(id, index) {
       this.$axios({
         method: 'POST',
         url: '/api/api_gateway?method=data_report.cbd_screen.cbd_pest_count',
         data: this.qs.stringify({
-          id
-        })
-      }).then(res => {
+          id,
+        }),
+      }).then((res) => {
         if (!res.data.data) {
           this.$message.error('网络连接出错或服务报错，请刷新页面重试');
-          return
+          return;
         }
         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],
         });
-        if (index != this.activeIndex) return
+        if (index != this.activeIndex) return;
 
         if (this.pestLineDate.length > this.activeIndex) {
           this.initCharByIndex(this.activeIndex, 'pestDate');
@@ -585,13 +677,13 @@ export default {
         // 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)
-      })
+      });
     },
   },
   components: {
     Title,
     PestType,
-    PestInfo
+    PestInfo,
   },
 };
 </script>
@@ -601,7 +693,7 @@ export default {
   position: absolute;
   top: 0;
   left: 0;
-  background: #02112F;
+  background: #02112f;
   width: 100%;
   height: 100%;
   box-sizing: border-box;
@@ -644,7 +736,7 @@ export default {
       display: flex;
       color: #ffffff80;
       font-size: 1.6rem;
-      margin-left: .5rem;
+      margin-left: 0.5rem;
 
       div {
         width: 2.4rem;
@@ -654,7 +746,7 @@ export default {
 
       .active {
         color: #ffffff;
-        text-shadow: 0 0 2.5px #FFF;
+        text-shadow: 0 0 2.5px #fff;
       }
     }
   }
@@ -665,14 +757,14 @@ export default {
   box-sizing: border-box;
   width: 21.2vw;
   height: 23vh;
-  background: url('../../../assets/images/newHome/smallChar.png') center center no-repeat;
+  background: url('../../../assets/images/newHome/smallChar.png') center center
+    no-repeat;
   background-size: 100% 100%;
 
   .charBox {
     width: 100%;
     height: 17.3vh;
     overflow: hidden;
-
     /deep/ .el-carousel__container {
       width: 100% !important;
       height: 100% !important;
@@ -730,13 +822,18 @@ export default {
   box-sizing: border-box;
   width: 44vw;
   height: 48vh;
-  background: url('../../../assets/images/newHome/smallChar.png') center center no-repeat;
+  background: url('../../../assets/images/newHome/smallChar.png') center center
+    no-repeat;
   background-size: 100% 100%;
 
   .charBox {
     width: 100%;
     height: 38.7vh;
     overflow: hidden;
+    img {
+      margin-top: 1rem;
+      cursor: pointer;
+    }
   }
 }
 
@@ -797,7 +894,7 @@ export default {
         color: #ffffffe6;
         font-size: 2rem;
         font-weight: 600;
-        margin-bottom: .4rem;
+        margin-bottom: 0.4rem;
       }
     }
   }

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

@@ -3,7 +3,7 @@
  * @Autor: lin
  * @Date: 2024-04-09 14:26:07
  * @LastEditors: lin
- * @LastEditTime: 2024-04-22 16:49:56
+ * @LastEditTime: 2024-04-23 14:18:14
 -->
 <template>
   <div class="box">
@@ -47,11 +47,11 @@
                   <div class="small">{{ item.warning }}</div>
                   <div class="charInfo">
                     <div class="infoTitle">{{ item.category }}</div>
-                    <div class="detailInfo">
+                    <div class="detailInfo" v-if="item.category != '杂草'">
                       <div>害虫总数</div>
                       <div>{{ item.sum }}</div>
                     </div>
-                    <div class="detailInfo" v-if="item.category != '杂草'">
+                    <div class="detailInfo">
                       <div>害虫种类</div>
                       <div>{{ item.count }}</div>
                     </div>
@@ -80,7 +80,7 @@
         <div class="smallChar lineBox">
           <div class="charBox">
             <div class="charTitle">
-              <Title class="smallTitle" text="有害生物发生趋势"></Title>
+              <Title class="smallTitle" :text="`有害生物发生趋势${new Date().getFullYear() + ''}`"></Title>
               <el-select class="selectThem" v-model="rightLineCategory" size="mini" placeholder="请选择分类"
                 @change="changeCate">
                 <el-option v-for="typeItem in typeList" :label="typeItem.label" :value="typeItem.value"
@@ -292,8 +292,8 @@ export default {
       icon3: require('../../../assets/images/newHome/icon3.png'),
       eyeClose: require('../../../assets/images/newHome/eyeclose.png'),
       eyeOpen: require('../../../assets/images/newHome/eyeopen.png'),
-      marker2: require('../../../assets/images/newHome/2.png'),
-      marker3: require('../../../assets/images/newHome/3.png'),
+      marker3: require('../../../assets/images/newHome/2.png'),
+      marker2: require('../../../assets/images/newHome/3.png'),
       marker4: require('../../../assets/images/newHome/4.png'),
       marker8: require('../../../assets/images/newHome/8.png'),
       marker9: require('../../../assets/images/newHome/9.png'),
@@ -521,7 +521,7 @@ export default {
         // let pestLineObj = {};
         // 害虫个数
         let taskCountChar = echarts.init(document.getElementById('chartTaskId'));
-        this.setAddBanner(taskCountChar, charData.month, [charData.month_kong, charData.month_task], ['#60B0FA', '#BFE0FE'], ['监督任务', '监测任务']);
+        this.setAddBanner(taskCountChar, charData.month, [charData.month_kong, charData.month_task], ['#60B0FA', '#BFE0FE'], ['监测任务','监督任务' ]);
       })
     },
     // 初始化筛选框数据
@@ -815,7 +815,7 @@ export default {
           if (group.lng_lat.length == 0) return
           this.waterAmiFun(group)
         });
-        this.map.setFitView(this.overlayList)
+        // this.map.setFitView(this.overlayList)
       });
     },
     // 根据组织ID 获取组织设备告警信息
@@ -935,10 +935,10 @@ export default {
     initMap() {
       let _this = this;
       let map = new AMap.Map(document.getElementById('newHome'), {
-        center: [114.3, 22.76],
+        center: [114.2, 22.76],
         resizeEnable: true,
         // lang: 'en',
-        zoom: 11,
+        zoom: 10.5,
         mapStyle: 'amap://styles/fff0c1ac5471818a21cf82c0931f60c0',
         // mapStyle: "amap://styles/dark",
         // features: ['bg', 'road'],
@@ -1069,8 +1069,8 @@ export default {
         }
 
         .detailBanner {
-          width: 2.4rem;
-          height: 2.4rem;
+          width: 2.8rem;
+          height: 2.8rem;
           background: url('./../.././../assets/images/newHome/detailBtn.png') center center no-repeat;
           background-size: 100% 100%;
           cursor: pointer;