From 9db095d1e177be6f90c031297e0d4ef9fc66ee40 Mon Sep 17 00:00:00 2001
From: pangdundun <664790274@qq.com>
Date: Mon, 20 Nov 2023 10:46:32 +0800
Subject: [PATCH] ~

---
 src/views/page/largeScreen1.vue | 289 ++++++++++++++++----------------
 1 file changed, 148 insertions(+), 141 deletions(-)

diff --git a/src/views/page/largeScreen1.vue b/src/views/page/largeScreen1.vue
index a7e0195..3a090fd 100644
--- a/src/views/page/largeScreen1.vue
+++ b/src/views/page/largeScreen1.vue
@@ -21,122 +21,126 @@
           <div class="map1">
             <div class="drag_box" ref="drag_box">
               <img class="drag_img" src="../../assets/img/map.png" alt="" />
-              <div class="pole_item pole_item1" @click="handlerPop(2)">
-                <div class="p_title">
-                  <img src="../../assets/img/wenshi.png" alt="" />
-                  <span>2#温室</span>
-                </div>
-                <img class="pole1" src="../../assets/img/pole1.png" alt="" />
-              </div>
-              <div class="pole_item pole_item2" @click="handlerPop(3)">
-                <div class="p_title">
-                  <img src="../../assets/img/wenshi.png" alt="" />
-                  <span>1#温室</span>
-                </div>
-                <img class="pole1" src="../../assets/img/pole1.png" alt="" />
-              </div>
-              <div class="pole_item pole_item3" @click="handlerPop(4)">
-                <div class="p_title">
-                  <img src="../../assets/img/wenshi1.png" alt="" />
-                  <span>3#温室</span>
-                </div>
-                <img class="pole1" src="../../assets/img/pole.png" alt="" />
-              </div>
-              <div class="pole_item pole_item4">
-                <div class="p_title">
-                  <img src="../../assets/img/wenshi.png" alt="" />
-                  <span>控制中心</span>
-                </div>
-                <img class="pole1" src="../../assets/img/pole1.png" alt="" />
-              </div>
-              <div class="pole_item pole_item5" @click="handlerPop(5)">
-                <div class="p_title">
-                  <img src="../../assets/img/wenshi.png" alt="" />
-                  <span>4#温室</span>
-                </div>
-                <img class="pole1" src="../../assets/img/pole1.png" alt="" />
-              </div>
-              <div class="pole_item pole_item6" @click="handlerPop(6)">
-                <div class="p_title">
-                  <img src="../../assets/img/wenshi.png" alt="" />
-                  <span>5#温室</span>
-                </div>
-                <img class="pole1" src="../../assets/img/pole1.png" alt="" />
-              </div>
-              <div class="pole_item pole_item7" @click="handlerPop(7)">
-                <div class="p_title">
-                  <img src="../../assets/img/wenshi.png" alt="" />
-                  <span>6#温室</span>
-                </div>
-                <img class="pole1" src="../../assets/img/pole1.png" alt="" />
-              </div>
+              <div class="pole_item pole_item_4">
+                    <div class="p_title">
+                      <img src="../../assets/img/wenshi.png" alt="" />
+                      <span>控制中心</span>
+                    </div>
+                    <img class="pole1" src="../../assets/img/pole1.png" alt="" />
+                  </div>
+              <div class="popBox" v-for="(item, index) in popContentList" :key="index">
+                <template>
+                  <div class="pole_item" :class="'pole_item' + (index+1)"  @click="handlerPop(item.id)">
+                    <div class="p_title">
+                      <img src="../../assets/img/wenshi.png" alt="" />
+                      <span>{{ item.greenhouseName }}#温室</span>
+                    </div>
+                    <img class="pole1" src="../../assets/img/pole1.png" alt="" />
+                  </div>
+                  <!-- <div class="pole_item pole_item2" @click="handlerPop(3)">
+                    <div class="p_title">
+                      <img src="../../assets/img/wenshi.png" alt="" />
+                      <span>1#温室</span>
+                    </div>
+                    <img class="pole1" src="../../assets/img/pole1.png" alt="" />
+                  </div>
+                  <div class="pole_item pole_item3" @click="handlerPop(4)">
+                    <div class="p_title">
+                      <img src="../../assets/img/wenshi1.png" alt="" />
+                      <span>3#温室</span>
+                    </div>
+                    <img class="pole1" src="../../assets/img/pole.png" alt="" />
+                  </div> -->
+                  
+                  <!-- <div class="pole_item pole_item5" @click="handlerPop(5)">
+                    <div class="p_title">
+                      <img src="../../assets/img/wenshi.png" alt="" />
+                      <span>4#温室</span>
+                    </div>
+                    <img class="pole1" src="../../assets/img/pole1.png" alt="" />
+                  </div>
+                  <div class="pole_item pole_item6" @click="handlerPop(6)">
+                    <div class="p_title">
+                      <img src="../../assets/img/wenshi.png" alt="" />
+                      <span>5#温室</span>
+                    </div>
+                    <img class="pole1" src="../../assets/img/pole1.png" alt="" />
+                  </div>
+                  <div class="pole_item pole_item7" @click="handlerPop(7)">
+                    <div class="p_title">
+                      <img src="../../assets/img/wenshi.png" alt="" />
+                      <span>6#温室</span>
+                    </div>
+                    <img class="pole1" src="../../assets/img/pole1.png" alt="" />
+                  </div> -->
+                </template>
 
-              <!-- 弹框 -->
-              <template v-for="(item, index) in popContentList">
-                <!-- <div class="pop_content" :style="getTopOrLeft(item.greenhouseName)" :key="index"
-                  v-if="popContentCurrent == index ? true : false"> -->
-                <div
-                  class="pop_content"
-                  :style="getTopOrLeft(item.greenhouseName)"
-                  :key="index"
-                  v-if="popContentCurrent == item.id ? true : false"
-                >
-                  <img
-                    class="close_img"
-                    src="../../assets/img/close.png"
-                    alt=""
-                    @click="cancelHandler"
-                  />
-                  <div class="p_video">
-                    <img :src="item.greenhouseImage" alt="" />
-                  </div>
-                  <div class="text">温室{{ item.greenhouseName }}#</div>
-                  <div class="line"></div>
-                  <div class="detail">
-                    <!-- <div class="d_item">
-                      <img src="../../assets/img/detail_img.png" alt="" />
-                      <span>面积：{{ item.greenhouseArea }}㎡</span>
-                    </div> -->
-                    <div class="d_item">
-                      <img src="../../assets/img/detail_img.png" alt="" />
-                      <span>品种：{{ item.greenhouseVariety }}</span>
+                <!-- 弹框 -->
+                <template>
+                  <!-- <div class="pop_content" :style="getTopOrLeft(item.greenhouseName)" :key="index"
+                    v-if="popContentCurrent == index ? true : false"> -->
+                  <div
+                    class="pop_content"
+                    :style="getTopOrLeft()"
+                    v-show="popContentCurrent == item.id ? true : false"
+                  >
+                    <img
+                      class="close_img"
+                      src="../../assets/img/close.png"
+                      alt=""
+                      @click="cancelHandler"
+                    />
+                    <div class="p_video">
+                      <img :src="item.greenhouseImage" alt="" />
                     </div>
-                    <div class="d_item">
-                      <img src="../../assets/img/detail_img.png" alt="" />
-                      <span>数量：{{ item.greenhouseNums }}株</span>
+                    <div class="text">温室{{ item.greenhouseName }}#</div>
+                    <div class="line"></div>
+                    <div class="detail">
+                      <!-- <div class="d_item">
+                        <img src="../../assets/img/detail_img.png" alt="" />
+                        <span>面积：{{ item.greenhouseArea }}㎡</span>
+                      </div> -->
+                      <div class="d_item">
+                        <img src="../../assets/img/detail_img.png" alt="" />
+                        <span>品种：{{ item.greenhouseVariety }}</span>
+                      </div>
+                      <div class="d_item">
+                        <img src="../../assets/img/detail_img.png" alt="" />
+                        <span>数量：{{ item.greenhouseNums }}株</span>
+                      </div>
                     </div>
-                  </div>
-                  <div class="grow">
-                    <img src="../../assets/img/grow_img.png" alt="" />
-                    <span>生长阶段：</span>
-                    <span>{{ item.growthStageName }}</span>
-                  </div>
-                  <div class="line" style="margin-top: 0.2rem"></div>
-                  <div class="icon_item scroll">
-                    <div
-                      class="icon_item_child"
-                      v-for="(item1, index1) in item.childList"
-                      :key="index1"
-                    >
-                      <!-- <img :src="item.formula" alt=""> -->
-                      <img
-                        :src="
-                          require('../../assets/image/real-time-' +
-                            item1.formula +
-                            '.png')
-                        "
-                        alt=""
-                      />
-                      <div>
-                        <span>{{ item1.environmentDataId }}</span>
-                        <span>{{
-                          item1.environmentData + getTypeList(item1.formula)
-                        }}</span>
+                    <div class="grow">
+                      <img src="../../assets/img/grow_img.png" alt="" />
+                      <span>生长阶段：</span>
+                      <span>{{ item.growthStageName }}</span>
+                    </div>
+                    <div class="line" style="margin-top: 0.2rem"></div>
+                    <div class="icon_item scroll">
+                      <div
+                        class="icon_item_child"
+                        v-for="(item1, index1) in item.childList"
+                        :key="index1"
+                      >
+                        <!-- <img :src="item.formula" alt=""> -->
+                        <img
+                          :src="
+                            require('../../assets/image/real-time-' +
+                              item1.formula +
+                              '.png')
+                          "
+                          alt=""
+                        />
+                        <div>
+                          <span>{{ item1.environmentDataId }}</span>
+                          <span>{{
+                            item1.environmentData + getTypeList(item1.formula)
+                          }}</span>
+                        </div>
                       </div>
                     </div>
                   </div>
-                </div>
-              </template>
+                </template>
+              </div>
             </div>
           </div>
         </div>
@@ -229,7 +233,7 @@ export default {
       left_: 2,
 
       popContentList: [],
-      popContentCurrent: -1,
+      popContentCurrent: 0,
 
       // 自动跳转和手动跳转切换
       autoPlay: false, //false 手动切换   true 自动切换
@@ -611,7 +615,7 @@ export default {
     // 根据用户id查询对应的设备大数据信息
     dataInit(userid) {
       this.api.Bigdata_getAllControl(userid).then((res) => {
-        // console.log("根据用户id查询对应的设备大数据信息", res);
+        console.log("根据用户id查询对应的设备大数据信息", res);
         this.popContentList = res.data.data;
         this.popContentList = this.popContentList.map((item) => {
           return {
@@ -632,26 +636,27 @@ export default {
       });
     },
 
-    getTopOrLeft(name) {
-      if (name == "二号") {
-        // return "top:1rem;left:6.2rem";
-        return "top:50%;left:50%;transform: translate(-50%,-50%);";
-      } else if (name == "一号") {
-        // return "top:3.5rem;left:3.8rem";
-        return "top:50%;left:50%;transform: translate(-50%,-50%);";
-      } else if (name == "3号") {
-        // return "top:2rem;left:9rem";
-        return "top:50%;left:50%;transform: translate(-50%,-50%);";
-      } else if (name == "4号") {
-        // return "top:2rem;left:9.3rem";
-        return "top:50%;left:50%;transform: translate(-50%,-50%);";
-      } else if (name == "5") {
-        // return "top:3.5rem;left:6.5rem";
-        return "top:50%;left:50%;transform: translate(-50%,-50%);";
-      } else if (name == "6") {
-        // return "top:0.8rem;left:7.2rem";
-        return "top:50%;left:50%;transform: translate(-50%,-50%);";
-      }
+    getTopOrLeft() {
+      return "top:50%;left:50%;transform: translate(-50%,-50%);";
+      // if (name == "二号") {
+      //   // return "top:1rem;left:6.2rem";
+      //   return "top:50%;left:50%;transform: translate(-50%,-50%);";
+      // } else if (name == "一号") {
+      //   // return "top:3.5rem;left:3.8rem";
+      //   return "top:50%;left:50%;transform: translate(-50%,-50%);";
+      // } else if (name == "3号") {
+      //   // return "top:2rem;left:9rem";
+      //   return "top:50%;left:50%;transform: translate(-50%,-50%);";
+      // } else if (name == "4号") {
+      //   // return "top:2rem;left:9.3rem";
+      //   return "top:50%;left:50%;transform: translate(-50%,-50%);";
+      // } else if (name == "5") {
+      //   // return "top:3.5rem;left:6.5rem";
+      //   return "top:50%;left:50%;transform: translate(-50%,-50%);";
+      // } else if (name == "6") {
+      //   // return "top:0.8rem;left:7.2rem";
+      //   return "top:50%;left:50%;transform: translate(-50%,-50%);";
+      // }
     },
 
     // 数据单位
@@ -685,12 +690,13 @@ export default {
 
       let that = this;
       this.autoPlay = JSON.parse(localStorage.getItem("autoPlay"));
-      this.popContentCurrent = 0;
+      // this.popContentCurrent = 0;
       if (this.autoPlay == false) {
         clearInterval(that.timer2) && this.timer2;
       } else {
         this.timer2 = setInterval(() => {
           this.popContentCurrent++;
+          console.log('this.popContentCurrent',this.popContentCurrent);
           if (this.popContentCurrent > 7) {
             this.popContentCurrent = 0;
             this.$router.push({ path: "/largeScreen" });
@@ -728,6 +734,7 @@ export default {
     // },
 
     handlerPop(id) {
+      console.log(id);
       this.popContentCurrent = id;
     },
 
@@ -964,6 +971,12 @@ export default {
               );
             }
 
+            .pole_item_4 {
+              position: absolute;
+              top: 43%;
+              left: 42%;
+            }
+
             .pole_item {
               width: 1.45rem;
               height: 1.8rem;
@@ -1024,24 +1037,18 @@ export default {
             }
 
             .pole_item4 {
-              position: absolute;
-              top: 43%;
-              left: 42%;
-            }
-
-            .pole_item5 {
               position: absolute;
               top: 29%;
               left: 76%;
             }
 
-            .pole_item6 {
+            .pole_item5 {
               position: absolute;
               top: 61%;
               left: 62%;
             }
 
-            .pole_item7 {
+            .pole_item6 {
               position: absolute;
               top: 1%;
               left: 62%;