src/views/index.vue

@@ -476,7 +476,7 @@ export default {
                     // item.id == 1 丽水;
                     // item.id == 5 石门;
                     // 进入大屏的权限目前是写死的 等于几能进 反之显示没权限
-                    const foundObject = this.limitUserId.find(item => item.id == 2 || item.id == 1 || item.id == 5|| item.id == 7|| item.id == 8|| item.id == 9|| item.id == 10|| item.id == 11);
+                    const foundObject = this.limitUserId.find(item => item.id == 2 || item.id == 1 || item.id == 5|| item.id == 7|| item.id == 8|| item.id == 9|| item.id == 10|| item.id == 11 || item.id == 12);
                     if (!foundObject) {
                         this.$message('您当前没有权限查看!')
                         return

src/views/page/largeScreen.vue

@@ -197,6 +197,13 @@
               <div class="drag_box11" ref="drag_box11" v-show="limitUserId == 11">
                 <img class="drag_img" src="../../assets/img/map7.png" alt="" />
                 <img class="axis_shimen" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_5" />
+              </div>
+                 <!-- 镇海欣丰农场 -->
+                 <div class="drag_box12" ref="drag_box12" v-show="limitUserId == 12">
+                <img class="drag_img" src="../../assets/img/map8.png" alt="" />
+                <img class="axis_shimen" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_5" />
+                <img class="axis_shimen1" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_5" />
+                <img class="axis_shimen2" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_5" />
               </div>
             </div>
           </div>
@@ -370,7 +377,8 @@
               </div>
             </div>
             <!-- 大冶鑫 -->
-            <div class="content_item" v-if="limitUserId == 7 || limitUserId == 9|| limitUserId == 10|| limitUserId == 11">
+            <div class="content_item"
+              v-if="limitUserId == 7 || limitUserId == 9 || limitUserId == 10 || limitUserId == 11 || limitUserId == 12">
               <div v-for="(item, index) in fiveControlList" :key="index" style="margin-bottom: 0.15rem">
                 <div class="i_title" v-if="item.controlState != 0">
                   <img src="../../assets/img/i_title_img.png" alt="" />
@@ -636,7 +644,7 @@ export default {
             this.get_environmentData(2023120613270120);
             this.get_readControl_getState(2023120613270120);
             this.getWeatherData(2023120613270120);
-          } else if (limitUserId == 8||limitUserId == 10||limitUserId == 11) {
+          } else if (limitUserId == 8 || limitUserId == 10 || limitUserId == 11|| limitUserId == 12) {
             // 获取控制器第一个Id
             const list = []
             this.$store.state.equipmentList.forEach((el, index) => {
@@ -921,7 +929,7 @@ export default {
           // id == 1 丽水;
           // id == 5 石门;
           // id == 5 大冶鑫;
-          this.limitUserId = (res.data.data.filter(el => el.id == 2 || el.id == 1 || el.id == 5 || el.id == 7 || el.id == 8 || el.id == 9|| el.id == 10|| el.id == 11))[0].id;
+          this.limitUserId = (res.data.data.filter(el => el.id == 2 || el.id == 1 || el.id == 5 || el.id == 7 || el.id == 8 || el.id == 9 || el.id == 10 || el.id == 11|| el.id == 12))[0].id;
           if (this.limitUserId == 1) {
             this.drag_boxHandler();
             this.dataInit(userId, this.limitUserId);
@@ -946,6 +954,9 @@ export default {
           } else if (this.limitUserId == 11) {
             this.drag_boxHandler11();
             this.dataInit(userId, this.limitUserId);
+          }else if (this.limitUserId == 12) {
+            this.drag_boxHandler12();
+            this.dataInit(userId, this.limitUserId);
           }
 
         }
@@ -1043,7 +1054,7 @@ export default {
         this.get_readControl_getState(2023042214250070);
       } else if (this.limitUserId == 7) {
         this.get_readControl_getState(2023120613270120);
-      } else if (this.limitUserId == 8||this.limitUserId == 9||this.limitUserId == 10||this.limitUserId == 11) {
+      } else if (this.limitUserId == 8 || this.limitUserId == 9 || this.limitUserId == 10 || this.limitUserId == 11|| this.limitUserId == 12) {
         this.get_readControl_getState(list[0].deviceId);
       }
 
@@ -1184,6 +1195,63 @@ export default {
         }
       };
     },
+    drag_boxHandler12() {
+      let demo = this.$refs.drag_box12;
+      demo = document.querySelector(".drag_box12"); //待拖拽元素
+      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;
+
+          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);
+        }
+      };
+    },
     drag_boxHandler11() {
       let demo = this.$refs.drag_box11;
       demo = document.querySelector(".drag_box11"); //待拖拽元素
@@ -2175,6 +2243,57 @@ export default {
                 cursor: pointer;
               }
             }
+            .drag_box12 {
+              width: 100%;
+              height: auto;
+              position: absolute;
+              // top: 0.3rem;
+              // left: 0.5rem;
+              z-index: 10;
+              top: -64px;
+              -webkit-mask-image: linear-gradient(90deg,
+                  transparent 0%,
+                  blue 2%,
+                  blue 97%,
+                  transparent 99%);
+
+              .drag_img {
+                width: 100%;
+                height: auto;
+                -webkit-mask-image: linear-gradient(transparent 0%,
+                    blue 2%,
+                    blue 95%,
+                    transparent 97%);
+              }
+
+              .axis_shimen {
+                width: 0.3rem;
+                height: auto;
+                position: absolute;
+                top: 44%;
+                left: 24%;
+                z-index: 99;
+                cursor: pointer;
+              }
+              .axis_shimen1 {
+                width: 0.3rem;
+                height: auto;
+                position: absolute;
+                top: 34%;
+                left: 48%;
+                z-index: 99;
+                cursor: pointer;
+              }
+              .axis_shimen2 {
+                width: 0.3rem;
+                height: auto;
+                position: absolute;
+                top: 44%;
+                left: 75%;
+                z-index: 99;
+                cursor: pointer;
+              }
+            }
             .drag_box11 {
               width: 100%;
               height: auto;
@@ -2208,6 +2327,7 @@ export default {
                 cursor: pointer;
               }
             }
+
             .drag_box10 {
               width: 100%;
               height: auto;
@@ -2291,6 +2411,7 @@ export default {
                 z-index: 99;
                 cursor: pointer;
               }
+
               .axis_shimen6 {
                 width: 0.3rem;
                 height: auto;
@@ -2300,6 +2421,7 @@ export default {
                 z-index: 99;
                 cursor: pointer;
               }
+
               .axis_shimen7 {
                 width: 0.3rem;
                 height: auto;
@@ -2310,6 +2432,7 @@ export default {
                 cursor: pointer;
               }
             }
+
             .drag_box9 {
               width: 100%;
               height: auto;

src/views/page/largeScreen1.vue

@@ -676,6 +676,43 @@
           </div>
         </div>
       </div>
+      <!-- 金山吕港草莓 -->
+      <div class="content" v-show="limitUserId == 12">
+        <div class="map">
+          <div class="map1">
+            <div class="drag_box12" ref="drag_box12">
+              <img class="drag_img" src="../../assets/img/map8.png" alt="" />
+              <div class="popBox">
+                <div class="pole_item" style="top:36.5%;left:22.5%;z-index:1;">
+                  <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>
+              <div class="popBox">
+                <div class="pole_item" style="top:26.5%;left:46.5%;z-index:1;">
+                  <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>
+              <div class="popBox">
+                <div class="pole_item" style="top:32.5%;left:75%;z-index:1;">
+                  <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>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -1478,7 +1515,7 @@ export default {
     get_user_getjurisdiction(userId) {
       this.api.user_getjurisdiction(userId).then((res) => {
         if (res.data.code == 200) {
-          this.limitUserId = (res.data.data.filter(el => el.id == 1 || el.id == 2 || el.id == 5 || el.id == 7 || el.id == 8 || el.id == 9 || el.id == 10|| el.id == 11))[0].id;
+          this.limitUserId = (res.data.data.filter(el => el.id == 1 || el.id == 2 || el.id == 5 || el.id == 7 || el.id == 8 || el.id == 9 || el.id == 10 || el.id == 11 || el.id == 12))[0].id;
           if (this.limitUserId == 1) {
             this.drag_boxHandler();
           } else if (this.limitUserId == 2) {
@@ -1495,6 +1532,8 @@ export default {
             this.drag_boxHandler10();
           } else if (this.limitUserId == 11) {
             this.drag_boxHandler11();
+          } else if (this.limitUserId == 12) {
+            this.drag_boxHandler12();
           }
         }
       });
@@ -1678,6 +1717,73 @@ export default {
         }
       };
     },
+    drag_boxHandler12() {
+      let demo = this.$refs.drag_box12;
+      demo = document.querySelector(".drag_box12"); //待拖拽元素
+      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);
+        }
+      };
+    },
     drag_boxHandler11() {
       let demo = this.$refs.drag_box11;
       demo = document.querySelector(".drag_box11"); //待拖拽元素
@@ -2737,7 +2843,8 @@ export default {
           .drag_box8,
           .drag_box9,
           .drag_box10,
-          .drag_box11 {
+          .drag_box11,
+          .drag_box12 {
             width: 100%;
             height: auto;
             position: absolute;
@@ -2749,7 +2856,9 @@ export default {
             //   blue 97%,
             //   transparent 99%
             //  );
-
+            &.drag_box12{
+              top: 13%;
+            }
             .drag_img {
               width: 100%;
               height: auto;