石门

src/views/page/largeScreen.vue

@@ -1340,7 +1340,14 @@ export default {
       this.current1 = index;
       // console.log(item,'00000000000000');
       // this.get_readControl_getState(item.deviceId);
-      this.get_readControl_getState(2023112911050004);
+      if(this.limitUserId == 1){
+        this.get_readControl_getState(2023042214250027);
+      }else if(this.limitUserId == 2){
+        this.get_readControl_getState(2023112911050004);
+      }else if(this.limitUserId == 5){
+        this.get_readControl_getState(2023042214250070);
+      }
+      
     },
 
     drag_boxHandler() {

src/views/page/largeScreen1.vue

@@ -18,7 +18,7 @@
         <span class="line"></span>
         <span>{{ time.time }}</span>
       </div>
-
+      <!-- 丽水 -->
       <div class="content" v-show="limitUserId == 1">
         <div class="map">
           <div class="map1">
@@ -31,11 +31,7 @@
                 </div>
                 <img class="pole1" src="../../assets/img/pole1.png" alt="" />
               </div>
-              <div
+              <div class="popBox" v-for="(item, index) in popContentList" :key="index">
-                class="popBox"
-                v-for="(item, index) in popContentList"
-                :key="index"
-              >
                 <template>
                   <div
                     class="pole_item"
@@ -122,17 +118,13 @@
           </div>
         </div>
       </div>
-
+      <!-- 东北 -->
       <div class="content" v-show="limitUserId == 2">
         <div class="map">
           <div class="map1">
             <div class="drag_box1" ref="drag_box1">
               <img class="drag_img" src="../../assets/img/map1.png" alt="" />
-              <div
+              <div class="popBox" v-for="(item, index) in popContentList1" :key="index + '_1'">
-                class="popBox"
-                v-for="(item, index) in popContentList1"
-                :key="index + '_1'"
-              >
                 <template>
                   <div
                     class="pole_item"
@@ -220,11 +212,7 @@
                 </template>
               </div>
 
-              <div
+              <div class="popBox" v-for="(item, index) in popContentList2" :key="index + '_2'">
-                class="popBox"
-                v-for="(item, index) in popContentList2"
-                :key="index + '_2'"
-              >
                 <template>
                   <div
                     class="pole_item_1"
@@ -315,6 +303,90 @@
           </div>
         </div>
       </div>
+      <!-- 石门 -->
+      <div class="content" v-show="limitUserId == 5">
+        <div class="map">
+          <div class="map1">
+            <div class="drag_box5" ref="drag_box5">
+              <img class="drag_img" src="../../assets/img/map2.png" alt="" />
+              <div class="popBox" v-for="(item, index) in popContentList" :key="index">
+                <template>
+                  <div class="pole_item" :style="getTopOrLeft5(item.id)" @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>
+                </template>
+
+                <!-- 弹框 -->
+                <template>
+                  <div
+                    class="pop_content1"
+                    v-show="popContentCurrent == item.id ? true : false"
+                    :style="getTopOrLeft55(item.id)"
+                  >
+                    <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.greenhouseVariety }}</span>
+                      </div>
+                      <div class="d_item">
+                        <img src="../../assets/img/detail_img.png" alt="" />
+                        <span>数量：{{ item.greenhouseNums }}株</span>
+                      </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.06rem"></div>
+                    <div class="icon_item scroll">
+                      <div
+                        class="icon_item_child"
+                        v-for="(item1, index1) in item.childList"
+                        :key="index1"
+                      >
+                        <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>
+                </template>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -811,13 +883,6 @@ export default {
           }
         }
       }
-      // if (id == 1) {
-      //   return "top:34%;left:74%;transform: translate(-50%,-50%);";
-      // } else if (id == 2) {
-      //   return "top:34%;left:70%;transform: translate(-50%,-50%);";
-      // }else if(id == 3){
-      //   return "top:34%;left:68%;transform: translate(-50%,-50%);";
-      // }
     },
 
     getTopOrLeft11(id) {
@@ -825,11 +890,31 @@ export default {
         if (id == i + 25)
           return `top:65%;left:${71 - i * 4}%;transform: translate(-50%,-50%);`;
       }
-      // if (id == 10) {
+    },
-      //   return "top:65%;left:57%;transform: translate(-50%,-50%);";
+
-      // } else if (id == 11) {
+    getTopOrLeft5(id){
-      //   return "top:65%;left:61%;transform: translate(-50%,-50%);";
+      if(id == 1){
-      // }
+        return 'top:50%;left:9%'
+      }else if(id == 2){
+        return 'top:47%;left:16%'
+      }else if(id == 3){
+        return 'top:49%;left:18%'
+      }else if(id == 4){
+        return 'top:51%;left:20%'
+      }else if(id == 5){
+        return 'top:53%;left:22%'
+      }
+    },
+
+    getTopOrLeft55(id){
+      if(id == 1){
+        return `top:53%;left:21%;transform: translate(-50%,-50%);`;
+      }
+      for (let i = 0; i < 4; i++) {
+        if(id == i + 1) {
+          return `top:${46 + (i - 1) * 2}%;left:${28 + (i - 1) * 2}%;transform: translate(-50%,-50%);`;
+        }
+      }
     },
 
     getNamePosition(id) {
@@ -869,6 +954,11 @@ export default {
           if (that.popContentCurrent1 > 34) {
             that.popContentCurrent1 = 1;
           }
+        } else if(that.limitUserId == 5){
+          that.popContentCurrent++;
+          if(that.popContentCurrent > 4){
+            that.popContentCurrent = 1;
+          }
         }
       }, 3000);
     },
@@ -922,6 +1012,11 @@ export default {
             if (that.popContentCurrent1 > 35) {
               that.popContentCurrent1 = 1;
             }
+          }else if(that.limitUserId == 5){
+            that.popContentCurrent++;
+            if(that.popContentCurrent > 4){
+              that.popContentCurrent = 1;
+            }
           }
         }, 3000);
       }
@@ -931,11 +1026,13 @@ export default {
     get_user_getjurisdiction(userId) {
       this.api.user_getjurisdiction(userId).then((res) => {
         if (res.data.code == 200) {
-          this.limitUserId = res.data.data[0].id;
+          this.limitUserId = (res.data.data.filter(el=>el.id == 1 || el.id == 2 || el.id == 5))[0].id;
           if (this.limitUserId == 1) {
             this.drag_boxHandler();
           } else if (this.limitUserId == 2) {
             this.drag_boxHandler1();
+          } else if (this.limitUserId == 5) {
+            this.drag_boxHandler5();
           }
         }
       });
@@ -970,7 +1067,7 @@ export default {
     },
 
     handlerPop(id) {
-      console.log(id);
+      // console.log(id);
       this.popContentCurrent = id;
     },
 
@@ -1117,6 +1214,74 @@ export default {
         }
       };
     },
+
+    drag_boxHandler5() {
+      let demo = this.$refs.drag_box5;
+      demo = document.querySelector(".drag_box5"); //待拖拽元素
+      let canMove = false; //拖拽状态
+      let x = 0,
+        y = 0; //鼠标位置
+      //监听按下鼠标事件
+      demo.onmousedown = function (e) {
+        x = e.pageX - demo.offsetLeft;
+        y = e.pageY - demo.offsetTop;
+        canMove = true; //激活拖拽状态
+      };
+      //监听右击鼠标事件
+      demo.oncontextmenu = function (e) {
+        e.preventDefault(); //阻止默认行为
+      };
+      //监听鼠标抬起事件
+      window.onmouseup = function () {
+        canMove = false; //关闭拖拽状态
+      };
+
+      window.onblur = function () {
+        //窗口失去焦点事件
+        canMove = false; //关闭拖拽状态
+      };
+
+      //监听鼠标移动事件
+      window.onmousemove = function (e) {
+        e.preventDefault(); //阻止默认行为(字不能拖走)
+        if (canMove) {
+          //对范围判断
+          let left = e.pageX - x;
+          let top = e.pageY - y;
+
+          //if (left > 0) left = 0 //当距离左边小于0时 让它为0
+          //if (top > 0) top = 0 //当距离上边小于0时 让它为0
+          // //右边距离为 标签距离左边最大距离(页面宽度减去div宽度得到)
+          // let maxLeft = window.innerWidth - demo.offsetWidth
+          // //下边距离为 标签距离上边最大距离(页面高度减去div高度度得到)
+          // let maxTop = window.innerHeight - demo.offsetHeight
+
+          // if (left > maxLeft) left = maxLeft
+          // if (top > maxTop) top = maxTop
+
+          demo.style.left = left + "px";
+          demo.style.top = top + "px";
+        }
+      };
+      let scale = 1;
+      demo.onwheel = function (e) {
+        if (e.wheelDelta > 0) {
+          scale += 0.05;
+          if (scale > 4) {
+            scale = 4;
+          }
+          demo.style.transform = `scale(${scale})`;
+          // console.log(scale);
+        } else {
+          scale -= 0.05;
+          if (scale < 1) {
+            scale = 1;
+          }
+          demo.style.transform = `scale(${scale})`;
+          // console.log(scale);
+        }
+      };
+    },
   },
 };
 </script>
@@ -1785,6 +1950,232 @@ export default {
               }
             }
           }
+
+          .drag_box5{
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            -webkit-mask-image: linear-gradient(
+              90deg,
+              transparent 0%,
+              blue 5%,
+              blue 93%,
+              transparent 99%
+            );
+
+            .drag_img {
+              width: 100%;
+              height: 100%;
+              -webkit-mask-image: linear-gradient(
+                transparent 0%,
+                blue 13%,
+                blue 73%,
+                transparent 97%
+              );
+            }
+
+            .pole_item{
+              width: 0.5rem;
+              height: 0.22rem;
+              position: absolute;
+              top: 21%;
+              left: 5%;
+
+              .p_title {
+                width: 0.5rem;
+                height: 0.22rem;
+                background: rgba(1, 12, 28, 0.7);
+                border-radius: 12px;
+                display: flex;
+                align-items: center;
+                box-sizing: border-box;
+                padding: 0.04rem;
+                position: absolute;
+                overflow: hidden;
+                white-space: nowrap;
+
+                > img {
+                  width: 0.1rem;
+                  height: 0.1rem;
+                  margin-right: 0.05rem;
+                }
+
+                > span {
+                  font-size: 0.1rem;
+                  font-family: MicrosoftYaHei;
+                  font-weight: 400;
+                  color: #ffffff;
+                  flex: 1;
+                }
+              }
+
+              .pole1 {
+                width: 0.3rem;
+                height: 0.7rem;
+                position: absolute;
+                right: 0;
+              }
+            }
+
+            .pop_content1 {
+              width: 3.5rem;
+              height: 4.55rem;
+              background: url("../../assets/img/pop_bg.png") center no-repeat;
+              background-size: 100% 100%;
+              overflow: hidden;
+              position: absolute;
+              // top: 17%;
+              // left: 23%;
+              z-index: 999999;
+
+              .close_img {
+                width: 0.2rem;
+                height: 0.2rem;
+                position: absolute;
+                top: 0;
+                right: 0;
+              }
+
+              .p_video {
+                width: 90%;
+                height: 1.82rem;
+                margin: 0.1rem auto 0;
+
+                > img {
+                  width: 100%;
+                  height: 100%;
+                }
+              }
+
+              .text {
+                width: 100%;
+                height: 0.4rem;
+                font-size: 0.2rem;
+                font-family: AlimamaShuHeiTi-Bold;
+                font-weight: bold;
+                color: #f3fdff;
+                line-height: 0.4rem;
+                box-sizing: border-box;
+                padding-left: 0.2rem;
+              }
+
+              .line {
+                width: 90%;
+                height: 0.01rem;
+                background: #51d4fa;
+                opacity: 0.5;
+                margin: 0 auto;
+              }
+
+              .detail {
+                width: 100%;
+                height: 0.45rem;
+                display: flex;
+                align-items: center;
+                justify-content: space-evenly;
+                padding: 0 0.15rem;
+
+                .d_item {
+                  height: 0.3rem;
+                  background: rgba(81, 212, 250, 0.15);
+                  border: 0.01rem solid rgba(106, 222, 255, 0.4);
+                  border-radius: 0.02rem;
+                  display: flex;
+                  justify-content: center;
+                  // align-items: center;
+                  box-sizing: border-box;
+                  padding: 0.05rem 0.05rem;
+
+                  > img {
+                    width: 0.2rem;
+                    height: 0.2rem;
+                    margin-right: 0.05rem;
+                  }
+
+                  > span {
+                    font-size: 0.13rem;
+                    font-family: MicrosoftYaHei;
+                    font-weight: 400;
+                    color: #d9effd;
+                  }
+                }
+              }
+
+              .grow {
+                width: 2.5rem;
+                height: 0.3rem;
+                background: url("../../assets/img/grow_bg.png") center no-repeat;
+                background-size: 100% 100%;
+                margin: 0 auto;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+
+                > img {
+                  width: 0.18rem;
+                  height: 0.18rem;
+                  margin-right: 0.05rem;
+                }
+
+                > span:nth-child(2) {
+                  font-size: 0.13rem;
+                  font-family: MicrosoftYaHei;
+                  font-weight: 400;
+                  color: #ffffff;
+                }
+
+                > span:nth-child(3) {
+                  font-size: 0.13rem;
+                  font-family: MicrosoftYaHei;
+                  font-weight: 400;
+                  color: #36ffd2;
+                }
+              }
+
+              .icon_item {
+                width: 100%;
+                height: calc(100% - 3.22rem);
+                box-sizing: border-box;
+                padding: 0.1rem 0.15rem;
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: space-between;
+                overflow: auto;
+
+                .icon_item_child {
+                  width: 33.33%;
+                  height: 33.33%;
+                  display: flex;
+                  margin-bottom: 0.05rem;
+
+                  > img {
+                    width: 0.4rem;
+                    height: 0.4rem;
+                    margin-right: 0.05rem;
+                  }
+
+                  > div {
+                    display: flex;
+                    flex-direction: column;
+
+                    > span:nth-child(1) {
+                      font-size: 0.12rem;
+                      font-family: MicrosoftYaHei;
+                      font-weight: bold;
+                      color: #86d9ff;
+                    }
+
+                    > span:nth-child(2) {
+                      font-size: 0.15rem;
+                      font-family: AlibabaPuHuiTiB;
+                      font-weight: bold;
+                      color: #ffffff;
+                    }
+                  }
+                }
+              }
+            }
+          }
         }
       }
     }