src/views/index.vue

@@ -32,7 +32,7 @@
             <div class="left collapse" v-if="manageList.indexOf(routerNow)==-1">
                 <el-collapse v-model="activeNames">
                     <template v-for="item, index in leftList">
-                        <el-collapse-item :name="index + 1" :key="index" v-if="!item.isRouter">
+                        <el-collapse-item :name="index + 1" :key="index" v-if="!item.isRouter&&item.list.length">
                             <template slot="title" class="collapse-title">
                                 <div class="img"><img style="width: 16px;":src="item.img" alt=""></div> {{ item.name }}
                             </template>
@@ -47,7 +47,7 @@
                             </ul>
                         </el-collapse-item>
                         <div @click="toRouter1(item)" :class="routerNow == item.router ? 'active' : ''" class="no-list"
-                            v-else>
+                            v-else-if="item.isRouter">
                             <div class="img"><img :src="item.img" alt=""></div>{{ item.name }}
                         </div>
                     </template>
@@ -475,7 +475,8 @@ export default {
                     // item.id == 2 东北;
                     // 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);
+                    // 进入大屏的权限目前是写死的 等于几能进 反之显示没权限
+                    const foundObject = this.limitUserId.find(item => item.id == 2 || item.id == 1 || item.id == 5|| item.id == 7|| item.id == 8|| item.id == 9);
                     if (!foundObject) {
                         this.$message('您当前没有权限查看!')
                         return

src/views/page/largeScreen.vue

@@ -3,7 +3,7 @@
     <div class="park" v-if="limitUserId == 2" @click="handlerOther">{{ other_show ? '后退' : '园区简介' }}</div>
     <div class="other" v-show="other_show"></div>
     <div class="kuang">
-      <div class="title">温室智慧云数据统计</div>
+      <div class="title"> {{limitUserId == 9 ?'甘井设施农业大数据云平台':'温室智慧云数据统计'}}</div>
       <!-- <div class="auto_play">
         <span :class="autoPlay ? '' : 'act'" @click="autoPlay1">手动播放</span>
         <span :class="autoPlay ? 'act' : ''" @click="autoPlay2">自动播放</span>
@@ -166,7 +166,22 @@
                 <img class="axis_shimen5" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_5" />
                 <img class="axis_shimen6" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_5" />
                 <img class="axis_shimen7" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_5" />
+                 </div>
+                  <!-- 甘井设施农业 -->
+                <div class="drag_box9" ref="drag_box9" v-show="limitUserId == 9">
+                <img class="drag_img" src="../../assets/img/map5.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" />
+                <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" />
+                <img class="axis_shimen5" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_5" />
+                <img class="axis_shimen6" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_5" />
+                <img class="axis_shimen7" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_5" />
+                <img class="axis_shimen8" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_5" />
+                <img class="axis_shimen9" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_5" />
               </div>
+
             </div>
           </div>
         </div>
@@ -953,7 +968,7 @@ export default {
             this.get_environmentData(2023120613270120);
             this.get_readControl_getState(2023120613270120);
             this.getWeatherData(2023120613270120);
-          } else if (limitUserId == 8) {
+          } else if (limitUserId == 8||limitUserId == 9) {
             // 获取控制器第一个Id
             const list = []
             this.$store.state.equipmentList.forEach((el, index) => {
@@ -1226,7 +1241,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))[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))[0].id;
           if (this.limitUserId == 1) {
             this.drag_boxHandler();
             this.dataInit(userId, this.limitUserId);
@@ -1242,6 +1257,9 @@ export default {
           } else if (this.limitUserId == 8) {
             this.drag_boxHandler8();
             this.dataInit(userId, this.limitUserId);
+          } else if (this.limitUserId == 9) {
+            this.drag_boxHandler9();
+            this.dataInit(userId, this.limitUserId);
           }
         }
       });
@@ -1478,6 +1496,63 @@ export default {
           // console.log(scale);
         }
       };
+    },
+       drag_boxHandler9() {
+      let demo = this.$refs.drag_box9;
+      demo = document.querySelector(".drag_box9"); //待拖拽元素
+      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_boxHandler8() {
       let demo = this.$refs.drag_box8;
@@ -2298,6 +2373,121 @@ export default {
                 z-index: 99;
                 cursor: pointer;
               }
+            }
+               .drag_box9 {
+              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: 24%;
+    left: 11%;
+                z-index: 99;
+                cursor: pointer;
+              }
+              .axis_shimen1 {
+                 width: 0.3rem;
+                height: auto;
+                position: absolute;
+                    top: 76%;
+    left: 13%;
+                z-index: 99;
+                cursor: pointer;
+              }
+              .axis_shimen2 {
+                 width: 0.3rem;
+                height: auto;
+                position: absolute;
+                      top: 36%;
+    left: 56%;
+                z-index: 99;
+                cursor: pointer;
+              }
+              .axis_shimen3 {
+                 width: 0.3rem;
+                height: auto;
+                position: absolute;
+                top: 38%;
+    left: 57%;
+                z-index: 99;
+                cursor: pointer;
+              }
+              .axis_shimen4 {
+                 width: 0.3rem;
+                height: auto;
+                position: absolute;
+                       top: 25%;
+    left: 66%;
+                z-index: 99;
+                cursor: pointer;
+              }
+              .axis_shimen5 {
+                 width: 0.3rem;
+                height: auto;
+                position: absolute;
+                  top: 28%;
+    left: 67%;
+                z-index: 99;
+                cursor: pointer;
+              }
+              .axis_shimen6 {
+                 width: 0.3rem;
+                height: auto;
+                position: absolute;
+                  top: 21%;
+    left: 70%;
+                z-index: 99;
+                cursor: pointer;
+              }
+              .axis_shimen7 {
+                 width: 0.3rem;
+                height: auto;
+                position: absolute;
+                top: 24%;
+    left: 71%;
+                z-index: 99;
+                cursor: pointer;
+              }
+                .axis_shimen8 {
+                 width: 0.3rem;
+                height: auto;
+                position: absolute;
+                top: 18.5%;
+    left: 74%;
+                z-index: 99;
+                cursor: pointer;
+              }
+
+              .axis_shimen9 {
+                 width: 0.3rem;
+                height: auto;
+                position: absolute;
+                top: 21.5%;
+    left: 75%;
+                z-index: 99;
+                cursor: pointer;
+              }
             }
             .drag_box8 {
               width: 100%;
@@ -2394,6 +2584,7 @@ export default {
                 z-index: 99;
                 cursor: pointer;
               }
+            
             }
             .drag_box {
               width: 100%;

src/views/page/largeScreen1.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="about">
     <div class="kuang">
-      <div class="title">温室智慧云数据统计</div>
+     <div class="title"> {{limitUserId == 9 ?'甘井设施农业大数据云平台':'温室智慧云数据统计'}}</div>
 
       <div class="yuan" @click="toBack">
         <img src="../../assets/img/small.png" alt="" />
@@ -477,7 +477,7 @@
           <div class="map1">
             <div class="drag_box8" ref="drag_box8">
               <img class="drag_img" src="../../assets/img/map4.jpg" alt="" />
-              <div class="popBox" :key="index">
+              <div class="popBox" >
                 <template>
                   <div class="pole_item" :style="getTopOrLeft8(8)">
                     <div class="p_title">
@@ -570,6 +570,105 @@
           </div>
         </div>
       </div>
+      <!-- 甘井设施农业 -->
+      <div class="content" v-show="limitUserId == 9">
+        <div class="map">
+          <div class="map1">
+            <div class="drag_box9" ref="drag_box9">
+              <img class="drag_img" src="../../assets/img/map5.png" alt="" />
+              <!-- <div class="popBox" v-for="(item, index) in popContentList" :key="index">
+                <template>
+                  <div class="pole_item" :style="getTopOrLeft9(9)">
+                    <div class="p_title">
+                      <img src="../../assets/img/wenshi.png" alt="" />
+                      <span>泵房</span>
+                    </div>
+                    <img
+                      class="pole1"
+                      src="../../assets/img/pole1.png"
+                      alt=""
+                    />
+                  </div>
+                </template>
+              </div> -->
+              <div class="popBox" v-for="(item, index) in popContentList" :key="index">
+                <template>
+                  <div class="pole_item" :style="getTopOrLeft9(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="getTopOrLeft9_9(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>
@@ -1168,6 +1267,52 @@ export default {
       }else if(id == 7){
         return 'top:0%;left:48%;transform: translate(54%,0%);'
       }
+    },
+       getTopOrLeft9(id){
+      if(id == 1){
+        return 'top:20.5%;left:10%;z-index:10;'
+      }else if(id == 2){
+        return 'top:72%;left:12%;z-index:9;'
+      }else if(id == 3){
+        return 'top:32%;left:56%;z-index:8;'
+      }else if(id == 4){
+        return 'top:34%;left:57%;z-index:7;'
+      }else if(id == 5){
+        return 'top:20.5%;left:66.5%;z-index:6;'
+      }else if(id == 6){
+        return 'top:22.5%;left:68%;z-index:5;'
+      }else if(id == 7){
+        return 'top:17%;left:70.6%;z-index:4;'
+      }else if(id == 8){
+        return 'top:19.5%;left:71.5%;z-index:3;'
+      }else if(id == 9){
+        return 'top:14%;left:75%;z-index:2;'
+      }else if(id == 10){
+        return 'top:16.5%;left:75.5%;z-index:1;'
+      }
+    },
+    getTopOrLeft9_9(id){
+       if(id == 1){
+        return 'top:20.5%;left:10%;transform: translate(54%,0);'
+      }else if(id == 2){
+        return 'top:72%;left:12%;transform: translate(54%,0);'
+      }else if(id == 3){
+        return 'top:32%;left:56%;transform: translate(54%,0);'
+      }else if(id == 4){
+        return 'top:16%;left:57%;transform: translate(54%,0%);'
+      }else if(id == 5){
+        return 'top:20.5%;left:66.5%;transform: translate(54%,0%);'
+      }else if(id == 6){
+        return 'top:22.5%;left:68%;transform: translate(54%,0%);'
+      }else if(id == 7){
+        return 'top:17%;left:70.6%;transform: translate(54%,0%);'
+      }else if(id == 8){
+        return 'top:19.5%;left:71.5%;transform: translate(54%,0);'
+      }else if(id == 9){
+        return 'top:14%;left:75%;transform: translate(54%,0);'
+      }else if(id == 10){
+        return 'top:16.5%;left:75.5%;transform: translate(54%,0);'
+      }
     },
     getNamePosition(id) {
       if (id == 1) {
@@ -1288,7 +1433,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))[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))[0].id;
           if (this.limitUserId == 1) {
             this.drag_boxHandler();
           } else if (this.limitUserId == 2) {
@@ -1299,6 +1444,8 @@ export default {
             this.drag_boxHandler7();
           } else if (this.limitUserId == 8) {
             this.drag_boxHandler8();
+          } else if (this.limitUserId == 9) {
+            this.drag_boxHandler9();
           }
         }
       });
@@ -1480,6 +1627,73 @@ export default {
         }
       };
     },
+     drag_boxHandler9() {
+      let demo = this.$refs.drag_box9;
+      demo = document.querySelector(".drag_box9"); //待拖拽元素
+      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_boxHandler8() {
       let demo = this.$refs.drag_box8;
       demo = document.querySelector(".drag_box8"); //待拖拽元素
@@ -2350,7 +2564,7 @@ export default {
             }
           }
           
-          .drag_box7,.drag_box8{
+          .drag_box7,.drag_box8,.drag_box9{
             width: 100%;
             height: auto;
             position: absolute;