首页测报灯设备详情跳转

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

@@ -3,11 +3,11 @@
  * @Autor: lin
  * @Date: 2024-04-09 14:26:43
  * @LastEditors: lin
- * @LastEditTime: 2024-04-20 09:45:41
+ * @LastEditTime: 2024-04-20 11:34:23
 -->
 <template>
   <div class="bigBg" v-loading="loading">
-    <el-carousel indicator-position="outside" trigger="click" class="deviceBox" :interval="10000"
+    <el-carousel indicator-position="outside" trigger="click" :initial-index="activeIndex" class="deviceBox" :interval="10000"
       @change="changeSlider">
       <el-carousel-item v-for="(item, index) in deviceList" :key="item.id">
           <div class="flexBox topBox">
@@ -306,6 +306,9 @@ export default {
         // this.deviceList.length = 1;
         this.pestTypeList = [];
         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);
@@ -332,7 +335,7 @@ export default {
         })
         this.$nextTick(() => {
           // 默认渲染第一页
-          this.initCharByIndex(0, 'tem');
+          this.initCharByIndex(this.activeIndex, 'tem');
         })
         this.timmer = setInterval(() => {
           this.$router.push('/newHome/home');
@@ -513,8 +516,8 @@ export default {
         // 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');
+        if (index != this.activeIndex) return
+        this.initCharByIndex(this.activeIndex, 'count');
       })
     },
     // 获取虫害图片数据
@@ -566,8 +569,8 @@ export default {
           type: 'day',
           value: res.data.data.day.pestName[0]
         });
-        if (index != 0) return
-        this.initCharByIndex(0, 'pestDate');
+        if (index != this.activeIndex) return
+        this.initCharByIndex(this.activeIndex, 'pestDate');
         // let xData = [];
         // let yData = [];
         // res.data.data.day.countInfo.forEach(pest => {

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-20 10:28:00
+ * @LastEditTime: 2024-04-20 11:28:44
 -->
 <template>
   <div class="box">
@@ -156,6 +156,7 @@
             </div>
           </div>
           <div class="contentInfo" v-else-if="checkType == 'device'">
+            <div class="viewDetailBtn newHomeBtn" v-if="deviceDialogInfo.device_type_id == 3" @click="goDeviceLink(deviceDialogInfo.device_id)">查看详情</div>
             <div class="deviceInfo">
               <div class="leftInfo">
                 <img src="../../../assets/images/newHome/id.png" />
@@ -401,6 +402,15 @@ export default {
 
   },
   methods: {
+    // 测报灯设备详情跳转到对应测报灯轮播页面
+    goDeviceLink(id) {
+      this.$router.push({
+        path: '/newHome/device',
+        query: {
+          id
+        }
+      })
+    },
     // 清除指定覆盖物
     clearOverlayByType(type) {
       var overlays = this.map.getAllOverlays(type);
@@ -1188,6 +1198,7 @@ export default {
       padding-top: 3.7vh;
 
       .contentInfo {
+        position: relative;
         width: 90%;
         height: 100%;
         margin: 0 auto;
@@ -1203,6 +1214,11 @@ export default {
           font-size: 1.2rem;
           margin-top: 0.8%;
         }
+        .viewDetailBtn{
+          position: absolute;
+          right: 2rem;
+          bottom: 2rem;
+        }
 
         .infoDesc {
           width: 100%;