src/views/index.vue

@@ -468,7 +468,7 @@ 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);
+                    const foundObject = this.limitUserId.find(item => item.id == 2 || item.id == 1 || item.id == 5|| item.id == 7);
                     if (!foundObject) {
                         this.$message('您当前没有权限查看!')
                         return

src/views/page/largeScreen.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="home">
-    <div class="park" @click="handlerOther">{{other_show ? '后退':'园区简介'}}</div>
+    <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>
@@ -241,6 +241,46 @@
                   @click="handlerAxis_5"
                 />
               </div>
+              <!-- 大冶鑫 -->
+              <div class="drag_box7" ref="drag_box7" v-show="limitUserId == 7">
+                <img class="drag_img" src="../../assets/img/map3.jpg" 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"
+                />
+              </div>
             </div>
           </div>
         </div>
@@ -448,6 +488,32 @@
                 </div>
               </div>
             </div>
+             <!-- 大冶鑫 -->
+             <div class="content_item" v-if="limitUserId == 7">
+              <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>
+                  <span class="line"></span>
+                  <span>{{
+                    item.controlState == 1 ? "自动控制" : "手机控制"
+                  }}</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>
         </div>
       </div>
@@ -1017,6 +1083,13 @@ export default {
             this.get_environmentData(2023042214250070);
             this.get_readControl_getState(2023042214250070);
             // this.getWeatherData(2023042214250070);
+          }else if (limitUserId == 7) {
+            // 大冶鑫
+            this.get_weather_echart_data(2023120613270120);
+            this.get_thisWeekTemperature_echart_data(2023120613270120);
+            this.get_environmentData(2023120613270120);
+            this.get_readControl_getState(2023120613270120);
+            this.getWeatherData(2023120613270120);
           }
         }
       });
@@ -1123,7 +1196,8 @@ export default {
         res.data.data.forEach((item, index) => {
           if (
             item.cameraSerialNumber != null &&
-            item.deviceId == 2023042214250027
+            (item.deviceId == 2023042214250027||
+            item.deviceId == 2023120613270115)
           ) {
             this.get_sel_eqbyid_list.push({ ...item, number: index });
 
@@ -1272,7 +1346,8 @@ export default {
           // id == 2 东北;
           // id == 1 丽水;
           // id == 5 石门;
-          this.limitUserId = (res.data.data.filter(el=>el.id == 2 || el.id == 1 || el.id == 5))[0].id;
+          // id == 5 大冶鑫;
+          this.limitUserId = (res.data.data.filter(el=>el.id == 2 || el.id == 1 || el.id == 5 ||el.id == 7))[0].id;
           if (this.limitUserId == 1) {
             this.drag_boxHandler();
             this.dataInit(userId, this.limitUserId);
@@ -1282,6 +1357,9 @@ export default {
           }else if (this.limitUserId == 5) {
             this.drag_boxHandler5();
             this.dataInit(userId, this.limitUserId);
+          } else if (this.limitUserId == 7) {
+            this.drag_boxHandler7();
+            this.dataInit(userId, this.limitUserId);
           }
         }
       });
@@ -1352,7 +1430,6 @@ export default {
     handlerAxis_5() {
       this.$router.push({ path: "/largeScreen1" });
     },
-
     toBackPage() {
       this.$router.push({ path: "/realTime" });
     },
@@ -1368,6 +1445,8 @@ export default {
         this.get_readControl_getState(2023112911050004);
       }else if(this.limitUserId == 5){
         this.get_readControl_getState(2023042214250070);
+      }else if(this.limitUserId == 7){
+        this.get_readControl_getState(2023120613270120);
       }
       
     },
@@ -1507,7 +1586,63 @@ export default {
         }
       };
     },
+    drag_boxHandler7() {
+      let demo = this.$refs.drag_box7;
+      demo = document.querySelector(".drag_box7"); //待拖拽元素
+      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_boxHandler5() {
       let demo = this.$refs.drag_box5;
       demo = document.querySelector(".drag_box5"); //待拖拽元素
@@ -2145,7 +2280,90 @@ export default {
                 z-index: 99;
               }
             }
+            .drag_box7{
+              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 5%,
+                blue 93%,
+                transparent 99%
+              );
 
+              .drag_img {
+                width: 100%;
+                height: auto;
+                -webkit-mask-image: linear-gradient(
+                  transparent 0%,
+                  blue 13%,
+                  blue 73%,
+                  transparent 97%
+                );
+              }
+
+              .axis_shimen{
+                width: 0.4rem;
+                height: auto;
+                position: absolute;
+                top: 38%;
+                left: 28%;
+                z-index: 99;
+                cursor: pointer;
+              }
+
+              .axis_shimen1{
+                width: 0.4rem;
+                height: auto;
+                position: absolute;
+                top: 56%;
+                left: 26%;
+                z-index: 99;
+                cursor: pointer;
+              }
+
+              .axis_shimen2{
+                width: 0.4rem;
+                height: auto;
+                position: absolute;
+                top: 38%;
+                left: 66%;
+                cursor: pointer;
+                z-index: 99;
+              }
+              .axis_shimen3{
+                width: 0.4rem;
+                height: auto;
+                position: absolute;
+                top: 56%;
+                left: 67%;
+                z-index: 99;
+                cursor: pointer;
+              }
+              .axis_shimen4{
+                width: 0.4rem;
+                height: auto;
+                position: absolute;
+                top: 22%;
+                left: 53%;
+                z-index: 99;
+                cursor: pointer;
+              }
+              .axis_shimen5{
+                width: 0.4rem;
+                height: auto;
+                position: absolute;
+                top: 22%;
+                left: 67%;
+                z-index: 99;
+                cursor: pointer;
+              }
+            }
             .drag_box {
               width: 100%;
               height: 100%;
@@ -2358,7 +2576,7 @@ export default {
               }
 
               ::v-deep .swiper-slide {
-                width: 0.74rem !important;
+                width: 0.84rem !important;
               }
 
               .swiper-slide1 {

src/views/page/largeScreen1.vue

@@ -387,6 +387,90 @@
           </div>
         </div>
       </div>
+       <!-- 大冶鑫 -->
+       <div class="content" v-show="limitUserId == 7">
+        <div class="map">
+          <div class="map1">
+            <div class="drag_box7" ref="drag_box7">
+              <img class="drag_img" src="../../assets/img/map3.jpg" alt="" />
+              <div class="popBox" v-for="(item, index) in popContentList" :key="index">
+                <template>
+                  <div class="pole_item" :style="getTopOrLeft7(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="getTopOrLeft77(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>
@@ -916,7 +1000,37 @@ export default {
         }
       }
     },
-
+    getTopOrLeft7(id){
+      if(id == 1){
+        return 'top:34%;left:62%'
+      }else if(id == 2){
+        return 'top:19%;left:64%'
+      }else if(id == 3){
+        return 'top:19%;left:50%'
+      }else if(id == 4){
+        return 'top:52%;left:22%'
+      }else if(id == 5){
+        return 'top:34%;left:25%'
+      }else if(id == 6){
+        return 'top:52%;left:64%'
+      }
+    },
+    getTopOrLeft77(id){
+      
+      if(id == 1){
+        return 'top:34%;left:62%;transform: translate(54%,-50%);'
+      }else if(id == 2){
+        return 'top:19%;left:64%;transform: translate(54%,0%);'
+      }else if(id == 3){
+        return 'top:19%;left:50%;transform: translate(54%,0%);'
+      }else if(id == 4){
+        return 'top:52%;left:22%;transform: translate(54%,-50%);'
+      }else if(id == 5){
+        return 'top:34%;left:25%;transform: translate(54%,-50%);'
+      }else if(id == 6){
+        return 'top:52%;left:64%;transform: translate(54%,-50%);'
+      }
+    },
     getNamePosition(id) {
       if (id == 1) {
         return "position: absolute;top: 41%;left: 13%;";
@@ -959,6 +1073,11 @@ export default {
           if(that.popContentCurrent > 4){
             that.popContentCurrent = 1;
           }
+        } else if(that.limitUserId == 7){
+          that.popContentCurrent++;
+          if(that.popContentCurrent > 6){
+            that.popContentCurrent = 1;
+          }
         }
       }, 3000);
     },
@@ -1017,6 +1136,11 @@ export default {
             if(that.popContentCurrent > 4){
               that.popContentCurrent = 1;
             }
+          }else if(that.limitUserId == 7){
+            that.popContentCurrent++;
+            if(that.popContentCurrent > 6){
+              that.popContentCurrent = 1;
+            }
           }
         }, 3000);
       }
@@ -1026,13 +1150,15 @@ 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))[0].id;
+          this.limitUserId = (res.data.data.filter(el=>el.id == 1 || el.id == 2 || el.id == 5|| el.id == 7))[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();
+          } else if (this.limitUserId == 7) {
+            this.drag_boxHandler7();
           }
         }
       });
@@ -1065,7 +1191,7 @@ export default {
     cancelHandler1() {
       this.popContentCurrent1 = -1;
     },
-
+ 
     handlerPop(id) {
       // console.log(id);
       this.popContentCurrent = id;
@@ -1074,7 +1200,7 @@ export default {
     handlerPop1(id) {
       this.popContentCurrent1 = id;
     },
-
+    
     toBack() {
       this.$router.push({ path: "/largeScreen" });
     },
@@ -1214,7 +1340,73 @@ export default {
         }
       };
     },
+    drag_boxHandler7() {
+      let demo = this.$refs.drag_box7;
+      demo = document.querySelector(".drag_box7"); //待拖拽元素
+      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_boxHandler5() {
       let demo = this.$refs.drag_box5;
       demo = document.querySelector(".drag_box5"); //待拖拽元素
@@ -1950,7 +2142,234 @@ export default {
               }
             }
           }
+          .drag_box7{
+            width: 100%;
+            height: auto;
+            position: absolute;
+            top:-95px;
+            -webkit-mask-image: linear-gradient(
+              90deg,
+              transparent 0%,
+              blue 5%,
+              blue 93%,
+              transparent 99%
+            );
 
+            .drag_img {
+              width: 100%;
+              height: auto;
+              -webkit-mask-image: linear-gradient(
+                transparent 0%,
+                blue 13%,
+                blue 73%,
+                transparent 97%
+              );
+            }
+
+            .pole_item{
+              // width: 0.5rem;
+              height: 0.34rem;
+              position: absolute;
+              top: 21%;
+              left: 5%;
+              cursor: pointer;
+              .p_title {
+                // width: 0.5rem;
+                // height: 0.22rem;
+                background: rgba(1, 12, 28, 0.7);
+                border-radius:40px;
+                display: flex;
+                align-items: center;
+                box-sizing: border-box;
+                padding: 0.04rem;
+                // position: absolute;
+                overflow: hidden;
+                white-space: nowrap;
+
+                > img {
+                  width: 0.2rem;
+                  height: 0.2rem;
+                  margin-right: 0.05rem;
+                }
+
+                > span {
+                  font-size: 0.2rem;
+                  font-family: MicrosoftYaHei;
+                  font-weight: 400;
+                  color: #ffffff;
+                  flex: 1;
+                }
+              }
+
+              .pole1 {
+                width: 0.5rem;
+                height:auto;
+                position: absolute;
+                left: 50%;
+                top: .2rem;
+                transform: translateX(-50%)
+              }
+            }
+
+            .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;
+                    }
+                  }
+                }
+              }
+            }
+          }
           .drag_box5{
             width: 100%;
             height: 100%;