src/views/index.vue

@@ -284,9 +284,11 @@ export default {
                     return
 
                 } else if (item.router == 'largeScreen') {
-                    const foundObject = this.limitUserId.find(item => item.id == 2);
+                    // item.id == 2 东北;
-                    const foundObject1 = this.limitUserId.find(item => item.id == 1);
+                    // item.id == 1 丽水;
-                    if (!foundObject || !foundObject1) {
+                    // item.id == 5 石门;
+                    const foundObject = this.limitUserId.find(item => item.id == 2 || item.id == 1 || item.id == 5);
+                    if (!foundObject) {
                         this.$message('您当前没有权限查看!')
                         return
                     } else {

src/views/page/largeScreen.vue

@@ -107,6 +107,7 @@
         <div class="middle">
           <div class="map">
             <div class="map1">
+              <!-- 丽水 -->
               <div class="drag_box" ref="drag_box" v-show="limitUserId == 1">
                 <img class="drag_img" src="../../assets/img/map.png" alt="" />
                 <img
@@ -152,6 +153,7 @@
                   @click="handlerAxis_1"
                 />
               </div>
+              <!-- 东北 -->
               <div class="drag_box1" ref="drag_box1" v-show="limitUserId == 2">
                 <img class="drag_img" src="../../assets/img/map1.png" alt="" />
                 <img
@@ -185,6 +187,40 @@
                   :key="index1 + '_2'"
                 />
               </div>
+              <!-- 石门 -->
+              <div class="drag_box5" ref="drag_box5" v-show="limitUserId == 5">
+                <img class="drag_img" src="../../assets/img/map2.png" alt="" />
+                <img
+                  class="axis_shimen"
+                  src="../../assets/img/axis2.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"
+                />
+                <img
+                  class="axis_shimen3"
+                  src="../../assets/img/axis1.png"
+                  alt=""
+                  @click="handlerAxis_5"
+                />
+                <img
+                  class="axis_shimen4"
+                  src="../../assets/img/axis1.png"
+                  alt=""
+                  @click="handlerAxis_5"
+                />
+              </div>
             </div>
           </div>
         </div>
@@ -240,7 +276,7 @@
                       @click="getCurrent(index, item)"
                     >
                       {{
-                        item.greenhouseName + (limitUserId == 1 ? "温室" : "")
+                        item.greenhouseName
                       }}
                     </div>
                   </div>
@@ -340,16 +376,35 @@
             </div>
 
             <!-- 东北 -->
-            <div
+            <div class="content_item" v-if="limitUserId == 2" style="margin-top: 0.05rem">
-              class="content_item"
+              <div v-for="(item, index) in fiveControlList" :key="index" style="margin-bottom: 0.15rem">
-              v-if="limitUserId == 2"
+                <div class="i_title" v-if="item.controlState != 0">
-              style="margin-top: 0.05rem"
+                  <img src="../../assets/img/i_title_img.png" alt="" />
-            >
+                  <span>{{ item.title }}</span>
-              <div
+                  <span class="line"></span>
-                v-for="(item, index) in fiveControlList"
+                  <span>{{
-                :key="index"
+                    item.controlState == 1 ? "自动控制" : "手机控制"
-                style="margin-bottom: 0.15rem"
+                  }}</span>
+                  <span class="line"></span>
+                  <i class="progress" v-if="Number(item.progress) == ''"
+                    >进度{{ item.progress }}%</i
                   >
+                  <span>菜单</span>
+                </div>
+                <div class="i_title" v-else>
+                  <img src="../../assets/img/i_title_img.png" alt="" />
+                  <span>{{ item.title }}</span>
+                  <span class="line"></span>
+                  <span>无效</span>
+                  <span class="line"></span>
+                  <span>菜单</span>
+                </div>
+              </div>
+            </div>
+
+            <!-- 石门 -->
+            <div class="content_item" v-if="limitUserId == 5">
+              <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="" />
                   <span>{{ item.title }}</span>
@@ -932,6 +987,13 @@ export default {
             this.get_environmentData(2023112911050004);
             this.get_readControl_getState(2023112911050004);
             this.getWeatherData(2023112911050004);
+          }else if (limitUserId == 5) {
+            // 石门
+            this.get_weather_echart_data(2023042214250070);
+            this.get_thisWeekTemperature_echart_data(2023042214250070);
+            this.get_environmentData(2023042214250070);
+            this.get_readControl_getState(2023042214250070);
+            this.getWeatherData(2023042214250070);
           }
         }
       });
@@ -1184,13 +1246,20 @@ 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;
+          // id == 2 东北;
+          // id == 1 丽水;
+          // id == 5 石门;
+          this.limitUserId = (res.data.data.filter(el=>el.id == 2 || el.id == 1 || el.id == 5))[0].id;
+          
           if (this.limitUserId == 1) {
             this.drag_boxHandler();
             this.dataInit(userId, this.limitUserId);
           } else if (this.limitUserId == 2) {
             this.drag_boxHandler1();
             this.dataInit(userId, this.limitUserId);
+          }else if (this.limitUserId == 5) {
+            this.drag_boxHandler5();
+            this.dataInit(userId, this.limitUserId);
           }
         }
       });
@@ -1258,6 +1327,10 @@ export default {
       this.$router.push({ path: "/largeScreen1" });
     },
 
+    handlerAxis_5() {
+      this.$router.push({ path: "/largeScreen1" });
+    },
+
     toBackPage() {
       this.$router.push({ path: "/realTime" });
     },
@@ -1405,6 +1478,64 @@ 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;
+
+          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>
@@ -1898,6 +2029,76 @@ export default {
               }
             }
 
+            .drag_box5{
+              width: 100%;
+              height: 100%;
+              position: absolute;
+              // top: 0.3rem;
+              // left: 0.5rem;
+              z-index: 10;
+              -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%
+                );
+              }
+
+              .axis_shimen{
+                width: 0.4rem;
+                height: 0.5rem;
+                position: absolute;
+                top: 49%;
+                left: 9%;
+                z-index: 99;
+              }
+
+              .axis_shimen1{
+                width: 0.3rem;
+                height: 0.4rem;
+                position: absolute;
+                top: 52%;
+                left: 16%;
+                z-index: 99;
+              }
+
+              .axis_shimen2{
+                width: 0.3rem;
+                height: 0.4rem;
+                position: absolute;
+                top: 50.3%;
+                left: 18%;
+                z-index: 99;
+              }
+              .axis_shimen3{
+                width: 0.3rem;
+                height: 0.4rem;
+                position: absolute;
+                top: 48.3%;
+                left: 20%;
+                z-index: 99;
+              }
+              .axis_shimen4{
+                width: 0.3rem;
+                height: 0.4rem;
+                position: absolute;
+                top: 46.3%;
+                left: 22%;
+                z-index: 99;
+              }
+            }
+
             .drag_box {
               width: 100%;
               height: 100%;