src/api/index.js

@@ -160,6 +160,10 @@ export default {
   getControlGetState(data) {
     return sendGetRequest('/readControl/getState', data)
   },
+  //控制器  气象站实时数据折线图
+  getControlChartdata(data) {
+    return sendPostRequest('/equip/chartdata?equipmentId='+data, '')
+  },
 
 
 
@@ -210,4 +214,18 @@ export default {
     return sendGetRequest(`/readControl/fiveControl`, data);
   },
 
+  // 查看用户额外权限
+  user_getjurisdiction(userId,data){
+    return sendGetRequest(`/user/getjurisdiction?userId=${userId}`, data)
+  },
+
+
+  //实时数据页面状态值(查看全部设备)
+  getStatePermissionStatus(data){
+      return sendGetRequest(`/getcontrol/getStatePermissionStatus`, data)
+    },
+    getPermissionStatus(data){
+      return sendGetRequest(`/getcontrol/getPermissionStatus`, data)
+    }
+    
 };

src/assets/css/main.css

@@ -225,6 +225,11 @@
   color: #00FFBA;
 }
 
+.table-title .title-text {
+  font-size: 16px;
+  margin-left: 15px;
+}
+
 .index {
   width: 100%;
   height: 100%;
@@ -1694,7 +1699,7 @@
 }
 
 .realTime .page-content .status-view .status-view-top {
-  padding: 0 10px 0 20px;
+  padding: 0 10px 0 10px;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -1707,6 +1712,7 @@
   font-family: Microsoft YaHei;
   font-weight: bold;
   color: #FFFFFF;
+  white-space: nowrap;
 }
 
 .realTime .page-content .status-view .status-view-top .status-view-top-right {

src/assets/css/main.scss

@@ -245,6 +245,10 @@
         font-weight: 400;
         color: #00FFBA;
     }
+    .title-text{
+        font-size: 16px;
+        margin-left: 15px;
+    }
 }
 
 .index {
@@ -1791,7 +1795,7 @@ margin-top: 20px;
             margin: 7.5px;
 
             .status-view-top {
-                padding: 0 10px 0 20px;
+                padding: 0 10px 0 10px;
                 display: flex;
                 align-items: center;
                 justify-content: space-between;
@@ -1803,6 +1807,7 @@ margin-top: 20px;
                     font-family: Microsoft YaHei;
                     font-weight: bold;
                     color: #FFFFFF;
+                    white-space: nowrap;
                 }
 
                 .status-view-top-right {

src/views/index.vue

@@ -89,6 +89,7 @@ export default {
             loading: true,//页面加载
             IDTimer: null,
             deviceId:'',
+            limitUserId:''
         }
     },
     watch: {
@@ -125,11 +126,25 @@ export default {
             that.getEqbyid()
         }, 120000);
 
+        // 获取用户id权限
+        this.get_user_getjurisdiction()
     },
     beforeDestroy() {
         this.IDTimer && clearInterval(this.IDTimer)
     },
     methods: {
+        // 获取用户id权限
+        get_user_getjurisdiction() {
+            let userInfo = JSON.parse(localStorage.getItem("userInfo"));
+            let userId  = userInfo.userid
+            this.api.user_getjurisdiction(userId).then(res => {
+                if (res.data.code == 200) {
+                    this.limitUserId = res.data.data[0].id;
+                }
+            })
+        },
+
+
         //获取设备名称/配方名称
         getByid() {
             var store = this.$store.state
@@ -255,6 +270,7 @@ export default {
                   return
 
               } else if (item.router != this.routerNow && !item.http) {
+                    if(this.limitUserId == 0) return this.$message('您当前没有权限查看!')
                     this.$router.push({ name: item.router })
                 }
             } else {

src/views/page/largeScreen.vue

@@ -90,7 +90,7 @@
         <div class="middle">
           <div class="map">
             <div class="map1">
-              <div class="drag_box" ref="drag_box">
+              <div class="drag_box" ref="drag_box" v-show="limitUserId == 1">
                 <img class="drag_img" src="../../assets/img/map.png" alt="" />
                 <img class="axis_1" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_1" />
                 <img class="axis_2" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_1" />
@@ -100,6 +100,12 @@
                 <img class="axis_6" src="../../assets/img/axis1.png" alt="" @click="handlerAxis_1" />
                 <img class="axis_7" src="../../assets/img/axis2.png" alt="" @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 class="axis_init" :class="'axis_' + (index + 8)" src="../../assets/img/axis1.png" :style="'left:' + (48.5 + index * 4.1) + '%'" alt="" @click="handlerAxis_2" v-for="(i,index) in 10" :key="index + '_1'"/>
+
+                <img class="axis_init1" :class="'axis_' + (index1 + 17)" src="../../assets/img/axis1.png" :style="'top:' + (22 + index1 * 0.105) + '%' + ';' + 'left:' + (5 + index1 * 3.3) + '%' + ';'" alt="" @click="handlerAxis_2" v-for="(i,index1) in 25" :key="index1 + '_2'"/>
+              </div>
             </div>
           </div>
         </div>
@@ -673,10 +679,13 @@ export default {
           unit: "dB",
         },
       ],
+
+      limitUserId:''
     };
   },
   mounted() {
-    this.drag_boxHandler();
+    
+    
 
     this.login();
 
@@ -943,6 +952,9 @@ export default {
       this.dataInit(userInfo.userid);
       this.get_sel_eqbyid(userInfo.userid);
 
+      // 获取用户id权限
+      this.get_user_getjurisdiction(userInfo.userid)
+
       // this.autoPlay = JSON.parse(localStorage.getItem("autoPlay"));
       // console.log(this.autoPlay);
       // if (this.autoPlay == false) {
@@ -954,6 +966,20 @@ export default {
       // }
     },
 
+    // 获取用户id权限
+    get_user_getjurisdiction(userId){
+      this.api.user_getjurisdiction(userId).then(res=>{
+        if(res.data.code == 200){
+          this.limitUserId = res.data.data[0].id;
+          if(this.limitUserId == 1){
+            this.drag_boxHandler();
+          }else if(this.limitUserId == 2){
+            this.drag_boxHandler1();
+          }
+        }
+      })
+    },
+
     // autoPlay1() {
     //   this.autoPlay = false;
     //   clearInterval(this.timer_) && this.timer_;
@@ -1012,6 +1038,10 @@ export default {
       this.$router.push({ path: "/largeScreen1" });
     },
 
+    handlerAxis_2() {
+      this.$router.push({ path: "/largeScreen1" });
+    },
+
     toBackPage() {
       this.$router.push({ path: "/realTime" });
     },
@@ -1089,6 +1119,74 @@ export default {
         }
       };
     },
+
+    drag_boxHandler1() {
+      let demo = this.$refs.drag_box1;
+      demo = document.querySelector(".drag_box1"); //待拖拽元素
+      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>
@@ -1506,6 +1604,43 @@ export default {
             transform: translate(-50%, -50%);
             overflow: hidden;
 
+            .drag_box1{
+              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_init{
+                width: 0.4rem;
+                height: 0.5rem;
+                position: absolute;
+                top: 54%;
+                z-index: 99;
+              }
+
+              .axis_init1{
+                width: 0.4rem;
+                height: 0.5rem;
+                position: absolute;
+                z-index: 99;
+              }
+            }
             .drag_box {
               width: 100%;
               height: 100%;

src/views/page/largeScreen1.vue

@@ -19,7 +19,7 @@
         <span>{{ time.time }}</span>
       </div>
 
-      <div class="content">
+      <div class="content" v-show="limitUserId == 1">
         <div class="map">
           <div class="map1">
             <div class="drag_box" ref="drag_box">
@@ -40,48 +40,10 @@
                     </div>
                     <img class="pole1" src="../../assets/img/pole1.png" alt="" />
                   </div>
-                  <!-- <div class="pole_item pole_item2" @click="handlerPop(3)">
-                    <div class="p_title">
-                      <img src="../../assets/img/wenshi.png" alt="" />
-                      <span>1#温室</span>
-                    </div>
-                    <img class="pole1" src="../../assets/img/pole1.png" alt="" />
-                  </div>
-                  <div class="pole_item pole_item3" @click="handlerPop(4)">
-                    <div class="p_title">
-                      <img src="../../assets/img/wenshi1.png" alt="" />
-                      <span>3#温室</span>
-                    </div>
-                    <img class="pole1" src="../../assets/img/pole.png" alt="" />
-                  </div> -->
-
-                  <!-- <div class="pole_item pole_item5" @click="handlerPop(5)">
-                    <div class="p_title">
-                      <img src="../../assets/img/wenshi.png" alt="" />
-                      <span>4#温室</span>
-                    </div>
-                    <img class="pole1" src="../../assets/img/pole1.png" alt="" />
-                  </div>
-                  <div class="pole_item pole_item6" @click="handlerPop(6)">
-                    <div class="p_title">
-                      <img src="../../assets/img/wenshi.png" alt="" />
-                      <span>5#温室</span>
-                    </div>
-                    <img class="pole1" src="../../assets/img/pole1.png" alt="" />
-                  </div>
-                  <div class="pole_item pole_item7" @click="handlerPop(7)">
-                    <div class="p_title">
-                      <img src="../../assets/img/wenshi.png" alt="" />
-                      <span>6#温室</span>
-                    </div>
-                    <img class="pole1" src="../../assets/img/pole1.png" alt="" />
-                  </div> -->
                 </template>
 
                 <!-- 弹框 -->
                 <template>
-                  <!-- <div class="pop_content" :style="getTopOrLeft(item.greenhouseName)" :key="index"
-                    v-if="popContentCurrent == index ? true : false"> -->
                   <div class="pop_content" :style="getTopOrLeft(item.id)"
                     v-show="popContentCurrent == item.id ? true : false">
                     <img class="close_img" src="../../assets/img/close.png" alt="" @click="cancelHandler" />
@@ -132,44 +94,126 @@
           </div>
         </div>
       </div>
-      <!-- <el-dialog title="" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
+
-        <div class="pop_content">
+      <div class="content" v-show="limitUserId == 2">
-          <div class="p_video">
+        <div class="map">
-            <img src="../assets/img/c_top.png" alt="">
+          <div class="map1">
-          </div>
+            <div class="drag_box1" ref="drag_box1">
-          <div class="text">某某项目温室一号</div>
+              <img class="drag_img" src="../../assets/img/map1.png" alt="" />
-          <div class="line"></div>
+              <div class="popBox" v-for="(item, index) in popContentList1" :key="index + '_1'">
-          <div class="detail">
+                <template>
-            <div class="d_item">
+                  <div class="pole_item" 
-              <img src="../assets/img/detail_img.png" alt="">
+                    :style="'top:' + (21 + index * .1) + '%' + ';' + 'left:' + (83 - index * 3.24) + '%' + ';'" @click="handlerPop1(item.id)">
-              <span>面积：6652㎡</span>
+                    <div class="p_title">
-            </div>
+                      <img src="../../assets/img/wenshi.png" alt="" />
-            <div class="d_item">
+                      <span>{{ item.greenhouseName }}#温室</span>
-              <img src="../assets/img/detail_img.png" alt="">
+                    </div>
-              <span>品种：番茄</span>
+                    <img class="pole1" src="../../assets/img/pole1.png" alt="" />
-            </div>
+                  </div>
-            <div class="d_item">
+                </template>
-              <img src="../assets/img/detail_img.png" alt="">
+
-              <span>数量：80000株</span>
+                <!-- 弹框 -->
-            </div>
+                <template>
-          </div>
+                  <div class="pop_content1" v-show="popContentCurrent1 == item.id ? true : false"  :style="getTopOrLeft1(item.id)">
-          <div class="grow">
+                    <img class="close_img" src="../../assets/img/close.png" alt="" @click="cancelHandler1"/>
-            <img src="../assets/img/grow_img.png" alt="">
+                    <div class="p_video">
-            <span>生长阶段：</span>
+                      <img :src="item.greenhouseImage" alt="" />
-            <span>幼苗期</span>
+                    </div>
-          </div>
+                    <div class="text">温室{{ item.greenhouseName }}#</div>
-          <div class="line" style="margin-top: 0.2rem;"></div>
+                    <div class="line"></div>
-          <div class="icon_item">
+                    <div class="detail">
-            <div class="icon_item_child" v-for="(item, index) in list" :key="index">
+                      <div class="d_item">
-              <img :src="item.img" alt="">
+                        <img src="../../assets/img/detail_img.png" alt="" />
-              <div>
+                        <span>品种：{{ item.greenhouseVariety }}</span>
-                <span>{{ item.name }}</span>
+                      </div>
-                <span>{{ item.data }}</span>
+                      <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 class="popBox" v-for="(item, index) in popContentList2" :key="index + '_2'">
+                <template >
+                  <div class="pole_item_1" 
+                    :style="'top:' + (51 + index * .2) + '%' + ';' + 'left:' + (84 - index * 4.05) + '%' + ';'" @click="handlerPop1(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="popContentCurrent1 == item.id ? true : false"  :style="getTopOrLeft11(item.id)">
+                    <img class="close_img" src="../../assets/img/close.png" alt="" @click="cancelHandler1"/>
+                    <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>
-      </el-dialog> -->
+      </div>
     </div>
   </div>
 </template>
@@ -221,6 +265,7 @@ export default {
 
       popContentList: [],
       popContentCurrent: 1,
+      popContentCurrent1: 1,
 
       // 自动跳转和手动跳转切换
       autoPlay: false, //false 手动切换   true 自动切换
@@ -582,10 +627,14 @@ export default {
           unit: "dB",
         },
       ],
+
+      limitUserId: '',
+      popContentList1: [],
+      popContentList2: [],
     };
   },
   mounted() {
-    this.drag_boxHandler();
+
 
     this.login();
 
@@ -602,7 +651,7 @@ export default {
     // 根据用户id查询对应的设备大数据信息
     dataInit(userid) {
       this.api.Bigdata_getAllControl(userid).then((res) => {
-        console.log("根据用户id查询对应的设备大数据信息", res);
+        // console.log("根据用户id查询对应的设备大数据信息", res);
         this.popContentList = res.data.data;
         this.popContentList = this.popContentList.map((item) => {
           return {
@@ -620,6 +669,14 @@ export default {
           });
         });
         // console.log(this.popContentList,'12121212');
+        if (this.limitUserId == 2) {
+          this.popContentList1 = (this.popContentList.slice(0, 25))
+          // this.popContentList2 = this.popContentList.slice(-10)
+          if(this.popContentList.length > 25){
+            this.popContentList2 = (this.popContentList.slice(-(this.popContentList.length - 25)))
+          }
+          console.log(this.popContentList1);
+        }
       });
     },
 
@@ -639,6 +696,33 @@ export default {
       }
     },
 
+    getTopOrLeft1(id) {
+      for(let i = 0; i < 26;i++){
+        if(id == (i + 1)){
+          return `top:34%;left:${(74 - i * 3) < 15 ? 15 : (74 - i * 3)}%;transform: translate(-50%,-50%);`;
+        }
+      }
+      // 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) {
+      for(let i=0;i<10;i++){
+        if(id == (i + 26))
+        return `top:65%;left:${77 - i *4}%;transform: translate(-50%,-50%);`
+      }
+      // if (id == 10) {
+      //   return "top:65%;left:57%;transform: translate(-50%,-50%);";
+      // } else if (id == 11) {
+      //   return "top:65%;left:61%;transform: translate(-50%,-50%);";
+      // }
+    },
+
     getNamePosition(id) {
       if (id == 1) {
         return "position: absolute;top: 41%;left: 13%;"
@@ -662,14 +746,22 @@ export default {
       localStorage.setItem("autoPlay", JSON.stringify(this.autoPlay));
     },
     autoPlay2() {
+      let that = this
       this.autoPlay = true;
       localStorage.setItem("autoPlay", JSON.stringify(this.autoPlay));
       this.timer2 = setInterval(() => {
-        this.popContentCurrent++;
+        if(that.limitUserId == 1){
-        if (this.popContentCurrent > 6) {
+          that.popContentCurrent++;
-          this.popContentCurrent = 1;
+          if (that.popContentCurrent > 6) {
-          // this.$router.push({ path: "/largeScreen" });
+            that.popContentCurrent = 1;
+          }
+        }else if(that.limitUserId == 2){
+          that.popContentCurrent1++;
+          if (that.popContentCurrent1 > 35) {
+            that.popContentCurrent1 = 1;
+          }
         }
+        
       }, 3000);
     },
 
@@ -702,23 +794,44 @@ export default {
       let userInfo = JSON.parse(localStorage.getItem("userInfo"));
       this.dataInit(userInfo.userid);
 
+      // 获取用户id权限
+      this.get_user_getjurisdiction(userInfo.userid)
+
       let that = this;
       this.autoPlay = JSON.parse(localStorage.getItem("autoPlay"));
-      // this.popContentCurrent = 0;
       if (this.autoPlay == false) {
         clearInterval(that.timer2) && this.timer2;
       } else {
         this.timer2 = setInterval(() => {
-          this.popContentCurrent++;
+          if(that.limitUserId == 1){
-          console.log('this.popContentCurrent', this.popContentCurrent);
+            that.popContentCurrent++;
-          if (this.popContentCurrent > 6) {
+            if (that.popContentCurrent > 6) {
-            this.popContentCurrent = 1;
+              that.popContentCurrent = 1;
-            // this.$router.push({ path: "/largeScreen" });
+            }
+          }else if(that.limitUserId == 2){
+            that.popContentCurrent1++;
+            if (that.popContentCurrent1 > 35) {
+              that.popContentCurrent1 = 1;
+            }
           }
         }, 3000);
       }
     },
 
+    // 获取用户id权限
+    get_user_getjurisdiction(userId) {
+      this.api.user_getjurisdiction(userId).then(res => {
+        if (res.data.code == 200) {
+          this.limitUserId = res.data.data[0].id;
+          if (this.limitUserId == 1) {
+            this.drag_boxHandler();
+          } else if (this.limitUserId == 2) {
+            this.drag_boxHandler1();
+          }
+        }
+      })
+    },
+
     getTime() {
       this.time = getnowtime();
       // console.log(this.time);
@@ -743,15 +856,19 @@ export default {
       clearInterval(that.timer2) && this.timer2;
     },
 
-    // handleClose(done) {
+    cancelHandler1(){
-    //   done();
+      this.popContentCurrent1 = -1;
-    // },
+    },
 
     handlerPop(id) {
       console.log(id);
       this.popContentCurrent = id;
     },
 
+    handlerPop1(id){
+      this.popContentCurrent1 = id;
+    },
+
     toBack() {
       this.$router.push({ path: "/largeScreen" });
     },
@@ -823,6 +940,74 @@ export default {
         }
       };
     },
+
+    drag_boxHandler1() {
+      let demo = this.$refs.drag_box1;
+      demo = document.querySelector(".drag_box1"); //待拖拽元素
+      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>
@@ -993,6 +1178,231 @@ export default {
           overflow: hidden;
           position: absolute;
 
+          .drag_box1 {
+            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,
+            .pole_item_1 {
+              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: 2.5rem;
+              height: 3rem;
+              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: .2rem;
+                height: .2rem;
+                position: absolute;
+                top: 0;
+                right: 0;
+              }
+
+              .p_video {
+                width: 90%;
+                height: 1.2rem;
+                margin: 0.1rem auto 0;
+
+                >img {
+                  width: 100%;
+                  height: 100%;
+                }
+              }
+
+              .text {
+                width: 100%;
+                height: 0.3rem;
+                font-size: 0.15rem;
+                font-family: AlimamaShuHeiTi-Bold;
+                font-weight: bold;
+                color: #f3fdff;
+                line-height: 0.3rem;
+                box-sizing: border-box;
+                padding-left: 0.15rem;
+              }
+
+              .line {
+                width: 2.2rem;
+                height: 0.01rem;
+                background: #51d4fa;
+                opacity: 0.5;
+                margin: 0 auto;
+              }
+
+              .detail {
+                width: 100%;
+                height: 0.3rem;
+                display: flex;
+                align-items: center;
+                justify-content: space-evenly;
+                padding: 0 0.15rem;
+
+                .d_item {
+                  height: 0.2rem;
+                  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 0.05rem;
+
+                  >img {
+                    width: 0.1rem;
+                    height: 0.1rem;
+                    margin-right: 0.05rem;
+                  }
+
+                  >span {
+                    font-size: 0.12rem;
+                    font-family: MicrosoftYaHei;
+                    font-weight: 400;
+                    color: #d9effd;
+                  }
+                }
+              }
+
+              .grow {
+                width: 2.5rem;
+                height: 0.2rem;
+                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.15rem;
+                  height: 0.15rem;
+                  margin-right: 0.05rem;
+                }
+
+                >span:nth-child(2) {
+                  font-size: 0.12rem;
+                  font-family: MicrosoftYaHei;
+                  font-weight: 400;
+                  color: #ffffff;
+                }
+
+                >span:nth-child(3) {
+                  font-size: 0.12rem;
+                  font-family: MicrosoftYaHei;
+                  font-weight: 400;
+                  color: #36ffd2;
+                }
+              }
+
+              .icon_item {
+                width: 95%;
+                height: calc(100% - 2.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: 50%;
+                  height: 45%;
+                  display: flex;
+                  margin-bottom: 0.05rem;
+
+                  > img {
+                    width: 0.28rem;
+                    height: 0.28rem;
+                    margin-right: 0.05rem;
+                  }
+
+                  > div {
+                    display: flex;
+                    flex-direction: column;
+
+                    > span:nth-child(1) {
+                      font-size: 0.1rem;
+                      font-family: MicrosoftYaHei;
+                      font-weight: bold;
+                      color: #86d9ff;
+                    }
+
+                    > span:nth-child(2) {
+                      font-size: 0.11rem;
+                      font-family: AlibabaPuHuiTiB;
+                      font-weight: bold;
+                      color: #ffffff;
+                    }
+                  }
+                }
+              }
+            }
+          }
+
           .drag_box {
             width: 100%;
             height: 100%;
@@ -1251,25 +1661,15 @@ export default {
                 }
               }
             }
+
+
           }
         }
       }
     }
-
-    // ::v-deep .el-dialog {
-    //   background: unset !important;
-
-    //   .el-icon-close:before {
-    //     contain: " ";
-    //     width: .44rem;
-    //     height: .44rem;
-    //     background: url('../assets/img/close.png') center no-repeat;
-    //     background-size: 100% 100%;
-    //     position: absolute;
-    //     top: 0.3rem;
-    //     left: -0.1rem;
-    //   }
-    // }
   }
 }
-</style>
+
+::-webkit-scrollbar {
+  display: none;
+}</style>

src/views/page/realTime.vue

@@ -1,8 +1,8 @@
 <template>
     <div class="formula realTime">
-        <div class="page-content new-data" :class="deviceName == 10 ? 'control-page' : ''">
+        <div class="page-content new-data" :class="deviceName == 10 || deviceName == 30 ? 'control-page' : ''">
 
-            <div class="control-view" v-if="deviceName == 10">
+            <div class="control-view" v-if="deviceName == 10 || deviceName == 30">
                 <div class="title">气象站:</div>
                 <vue-seamless class="control-list" :data="controlList" :class-option="defaultOption1">
                     <div class="list-view" v-for="item, index in controlList " :key="index">
@@ -22,8 +22,6 @@
             <div class="table-title">
                 <img src="../../assets/image/real-time.png" alt="" />
                 实时数据
-                <!-- <div class="tips">种植作物1</div> -->
-
             </div>
             <div class="timeNow" v-if="list.length">
                 <!-- {{ time.year.year }}-{{ time.year.month }}-{{ time.year.date }}<span> {{ time.time }}:{{ time.timeS
@@ -53,7 +51,7 @@
 
             </div>
             <div class="flex-list realTime-bottom">
-                <div class="left-view">
+                <div class="left-view" v-if="deviceName != 30">
                     <div ref="monitor" class="monitor" id="monitor">
                         <!-- <video ref="videoPlayer" class="video-js" id="video-js"></video> -->
                         <div ref="videoPlayer" class="video-js" id="video-js"></div>
@@ -68,83 +66,11 @@
                 设备运行状态
             </div>
             <div class="flex-view border-none">
-                <div class="status-view">
-                    <div class="status-view-top">
-                        <div class="status-view-top-left">{{ fanStatus.name }}</div>
-                        <!-- <el-popover placement="top" width="140">
-                            <div class="set-status-blue">进入修改设定值</div>
-                            <el-popover placement="top" width="160">
-                                <p class="del-text"><i style="color:red" class="el-popconfirm__icon el-icon-info"></i>确认删除?
-                                </p>
-                                <div style="text-align: right; margin: 0">
-                                    <el-button class="el-button el-button--text el-button--mini color-blue">取消</el-button>
-                                    <el-button class="el-button el-button--text el-button--mini color-blue">确定</el-button>
-                                </div>
-                                <div class="set-status-red" slot="reference">删除</div>
-                            </el-popover>
-                            <el-popover placement="right" width="100">
-                                <input v-model="item.index" type="text" class="status-save">
-                                <el-button class="el-button el-button--text el-button--mini color-blue">保存</el-button>
-                                <div class="set-status-blue" slot="reference">排序</div>
-                            </el-popover>
-                            <img class="status-view-top-right" slot="reference" src="../../assets/img/more.png" alt="">
-                        </el-popover> -->
-                        <img class="status-view-top-right" slot="reference" src="../../assets/img/more.png" alt="">
-                    </div>
-                    <div class="status-view-content">
-                        <div v-if="fanStatus.open != 0" class="status-true">
-                            <div class="status-true-sel">
-                                <div class="sel">
-                                    <img v-if="fanStatus.open == 1" src="../../assets/img/status-true-sel.png" alt="">
-                                    <img v-else src="../../assets/img/status-true-nosel.png" alt="">
-                                    自动控制
-                                </div>
-                                <div class="sel-phone">
-                                    <img v-if="fanStatus.open != 1" src="../../assets/img/status-true-sel.png" alt="">
-                                    <img v-else src="../../assets/img/status-true-nosel.png" alt="">
-                                    手机控制
-                                </div>
-                            </div>
-                            <div class="status-fan">
-                                <div class="btn" :class="fanStatus.status[0] == 1 ? 'blue' : 'off'">
-                                    <img class="fan-img" v-if="fanStatus.status[0] == 1" src="../../assets/img/fan-on.png"
-                                        alt="">
-                                    <img v-else src="../../assets/img/fan-off.png" alt="">
-                                    <span>1#风机</span>
-                                </div>
-                                <div class="btn" :class="fanStatus.status[1] == 1 ? 'blue' : 'off'">
-                                    <img class="fan-img" v-if="fanStatus.status[1] == 1" src="../../assets/img/fan-on.png"
-                                        alt="">
-                                    <img v-else src="../../assets/img/fan-off.png" alt=""> <span>2#风机</span>
-                                </div>
-                                <div class="btn" :class="fanStatus.status[2] == 1 ? 'blue' : 'off'">
-                                    <img class="fan-img" v-if="fanStatus.status[2] == 1" src="../../assets/img/fan-on.png"
-                                        alt="">
-                                    <img v-else src="../../assets/img/fan-off.png" alt=""> <span>3#风机</span>
-                                </div>
-                                <div class="btn" :class="fanStatus.status[3] == 1 ? 'blue' : 'off'">
-                                    <img class="fan-img" v-if="fanStatus.status[3] == 1" src="../../assets/img/fan-on.png"
-                                        alt="">
-                                    <img v-else src="../../assets/img/fan-off.png" alt=""> <span>4#风机</span>
-                                </div>
-                                <div class="btn" :class="fanStatus.status[4] == 1 ? 'blue' : 'off'">
-                                    <img class="fan-img" v-if="fanStatus.status[4] == 1" src="../../assets/img/fan-on.png"
-                                        alt="">
-                                    <img v-else src="../../assets/img/fan-off.png" alt=""> <span>5#风机</span>
-                                </div>
-                            </div>
-                        </div>
-                        <div v-else class="status-noTrue">
-                            <img src="../../assets/img/status-no.png" alt="">
-                            <div>当前设备无效</div>
-                        </div>
-                    </div>
-                </div>
                 <div class="status-view" v-for="item, index in statusList" :key="index">
                     <div class="status-view-top">
                         <div class="status-view-top-left">{{ item.name }}</div>
-                        <!-- <el-popover placement="top" width="140">
+                        <el-popover placement="top" width="140">
-                            <div class="set-status-blue">进入修改设定值</div>
+                            <!-- <div class="set-status-blue">进入修改设定值</div> -->
                             <el-popover placement="top" width="160">
                                 <p class="del-text"><i style="color:red" class="el-popconfirm__icon el-icon-info"></i>确认删除?
                                 </p>
@@ -154,16 +80,12 @@
                                 </div>
                                 <div class="set-status-red" slot="reference">删除</div>
                             </el-popover>
-                            <el-popover placement="right" width="100">
-                                <input v-model="item.index" type="text" class="status-save">
-                                <el-button class="el-button el-button--text el-button--mini color-blue">保存</el-button>
-                                <div class="set-status-blue" slot="reference">排序</div>
-                            </el-popover>
                             <img class="status-view-top-right" slot="reference" src="../../assets/img/more.png" alt="">
-                        </el-popover> -->
+                        </el-popover>
-                        <img class="status-view-top-right" slot="reference" src="../../assets/img/more.png" alt="">
+                        <!-- <img class="status-view-top-right" slot="reference" src="../../assets/img/more.png" alt=""> -->
                     </div>
-                    <div class="status-view-content">
+                    <!-- 风机 -->
+                    <div class="status-view-content" v-if="item.type == 1">
                         <div v-if="item.open != 0" class="status-true">
                             <div class="status-true-sel">
                                 <div class="sel">
@@ -177,13 +99,66 @@
                                     手机控制
                                 </div>
                             </div>
-                            <div class="status-true-charts">
+                            <div class="status-fan">
+                                <div class="btn" :class="item.status[0] == 1 ? 'blue' : 'off'">
+                                    <img class="fan-img" v-if="item.status[0] == 1" src="../../assets/img/fan-on.png"
+                                        alt="">
+                                    <img v-else src="../../assets/img/fan-off.png" alt="">
+                                    <span>1#风机</span>
+                                </div>
+                                <div class="btn" :class="item.status[1] == 1 ? 'blue' : 'off'">
+                                    <img class="fan-img" v-if="item.status[1] == 1" src="../../assets/img/fan-on.png"
+                                        alt="">
+                                    <img v-else src="../../assets/img/fan-off.png" alt=""> <span>2#风机</span>
+                                </div>
+                                <div class="btn" :class="item.status[2] == 1 ? 'blue' : 'off'">
+                                    <img class="fan-img" v-if="item.status[2] == 1" src="../../assets/img/fan-on.png"
+                                        alt="">
+                                    <img v-else src="../../assets/img/fan-off.png" alt=""> <span>3#风机</span>
+                                </div>
+                                <div class="btn" :class="item.status[3] == 1 ? 'blue' : 'off'">
+                                    <img class="fan-img" v-if="item.status[3] == 1" src="../../assets/img/fan-on.png"
+                                        alt="">
+                                    <img v-else src="../../assets/img/fan-off.png" alt=""> <span>4#风机</span>
+                                </div>
+                                <div class="btn" :class="item.status[4] == 1 ? 'blue' : 'off'">
+                                    <img class="fan-img" v-if="item.status[4] == 1" src="../../assets/img/fan-on.png"
+                                        alt="">
+                                    <img v-else src="../../assets/img/fan-off.png" alt=""> <span>5#风机</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div v-else class="status-noTrue">
+                            <img src="../../assets/img/status-no.png" alt="">
+                            <div>当前设备无效</div>
+                        </div>
+                    </div>
+                    <!-- 顶卷膜及其他 -->
+                    <div class="status-view-content" v-if="item.type != 1">
+                        <div v-if="item.open != 0" class="status-true">
+                            <div class="status-true-sel">
+                                <div class="sel">
+                                    <img v-if="item.open == 1" src="../../assets/img/status-true-sel.png" alt="">
+                                    <img v-else src="../../assets/img/status-true-nosel.png" alt="">
+                                    自动控制
+                                </div>
+                                <div class="sel-phone">
+                                    <img v-if="item.open != 1" src="../../assets/img/status-true-sel.png" alt="">
+                                    <img v-else src="../../assets/img/status-true-nosel.png" alt="">
+                                    手机控制
+                                </div>
+                            </div>
+                            <div class="status-true-charts" v-if="item.type == 6 || item.type == 5 || item.type == 2">
                                 <img src="../../assets/img/status-true-charts-icon.png" alt="">
                                 <div :id="'statusCharts' + index"></div>
+                            </div>
+                            <div class="status-true-charts" style="background: unset;height: 50px;" v-else>
+
                             </div>
                             <div class="status-true-text">
-                                <div class="status-true-text-left">{{ getNumberStatus(item.index) }}</div>
+                                <div class="status-true-text-left">{{ getNumberStatus(item) }}</div>
-                                <div class="status-true-text-right">{{ item.progress }}%</div>
+                                <div class="status-true-text-right" v-if="item.type == 6 || item.type == 5 || item.type == 2">{{
+                                    item.progress }}%</div>
                             </div>
                         </div>
                         <div v-else class="status-noTrue">
@@ -236,9 +211,6 @@ export default {
         return {
             statusList: [],
 
-            fanStatus: {
-                name: '风机', open: 0, status: []
-            },
             time: null,//右上角时间
             list: [],
             inputData: [],
@@ -250,6 +222,9 @@ export default {
             controlList: [],
             statusInterval: null,//status状态的Interval
             statusTime: 2,//status状态的秒数
+
+            allDevicestatus: [],//所有权限
+            nowDevicestatus: [],//当前设备权限
         }
     },
     watch: {
@@ -323,16 +298,48 @@ export default {
             })
             console.log(this.player);
         },
-        getNumberStatus(index) {
+        getNumberStatus(item) {
-            if (index == 0) {
+            var index = item.index
-                return '静止状态'
+            if (item.type == 2||item.type == 5||item.type == 6) {
-            } else if (index == 1) {
+                //顶卷膜
-                return '正向打开中'
+                if (index == 0) {
-            } else if (index == 2) {
+                    return '静止状态'
-                return '反向关闭中'
+                } else if (index == 1) {
-            } else {
+                    return '正向打开中'
-                return ''
+                } else if (index == 2) {
-            }
+                    return '反向关闭中'
+                } else {
+                    return ''
+                }
+            } else if (item.type == 3) {
+                //加温水泵
+                if (index == 0) {
+                    return '加温水泵关闭'
+                } else if (index == 1) {
+                    return '加温水泵打开'
+                } else {
+                    return ''
+                }
+            } else if (item.type == 4) {
+                //地热风机
+                if (index == 0) {
+                    return '地热风机关闭'
+                } else if (index == 1) {
+                    return '地热风机打开'
+                } else {
+                    return ''
+                }
+            } else if (item.type == 7) {
+                //地热风机
+                if (index == 0) {
+                    return '除雪关闭'
+                } else if (index == 1) {
+                    return '除雪打开'
+                } else {
+                    return ''
+                }
+            } 
+
         },
         createVideo() {
 
@@ -568,8 +575,9 @@ export default {
                     }
                     // console.log(this.controlList);
                 })
-
+                this.getPermissionStatus()
                 this.getStatus()
+                this.getStatePermissionStatus()
                 clearInterval(this.statusInterval) && this.statusInterval
                 this.statusInterval = setInterval(() => {
                     if (this.deviceName == 10) {
@@ -606,9 +614,64 @@ export default {
                         }
                     })
                 }
+            } else if (this.deviceName == 30) {
+                this.api.getControlRtDatastation(formData).then(res => {
+                    this.controlList = []
+                    if (res.data.code == 200) {
+                        res.data.data.forEach((el, index) => {
+                            list.forEach((el1, index1) => {
+                                if (el.formula == el1.value) {
+                                    // console.log(el1);
+                                    var num = el.environmentData + el1.unit
+                                    this.list.push({
+                                        ...el,
+                                        name: el.environmentDataId,
+                                        num: num,
+                                        img: require(`../../assets/image/real-time-${el.formula}.png`)
+                                    })
+                                    this.controlList.push({
+                                        ...el,
+                                        num: num,
+                                        img: require(`../../assets/image/real-time-${el.formula}.png`)
+                                    })
+                                }
+                            })
+                        })
+                    }
+                    // console.log(this.controlList);
+                })
+                this.api.getControlChartdata(equipmentId).then(res => {
+                    if (res.data.code == 200) {
+                        res.data.data.forEach((el, index) => {
+                            var chartsData = res.data.data
+                            realTimeLine('realTime-line', chartsData)
+                        })
+                    }
+                })
+
             }
 
         },
+        //获取全部status数据
+        getStatePermissionStatus() {
+            this.api.getStatePermissionStatus().then(res => {
+                if (res.data.code == 200) {
+                    this.allDevicestatus = res.data.data
+                }
+            })
+        },
+        //获取当前设备的权限
+        getPermissionStatus() {
+            var store = this.$store.state
+            var TargetValue = {
+                deviceId: store.equipmentList[this.indexs - 1].deviceId
+            }
+            this.api.getPermissionStatus(TargetValue).then(res => {
+                if (res.data.code == 200) {
+                    this.nowDevicestatus = res.data.data
+                }
+            })
+        },
         getStatus() {
             var store = this.$store.state
             var TargetValue = {
@@ -616,24 +679,57 @@ export default {
             }
             this.api.getControlGetState(TargetValue).then(res => {
                 if (res.data.code == 200) {
-                    this.fanStatus.open = res.data.data['1023']
-                    this.fanStatus.status = []
-                    var num = res.data.data['1024']
-                    var num1 = this.padString(num.toString(2), 5)
-                    var openListNew = []
-                    openListNew = num1.split("")
-                    this.fanStatus.status = openListNew.reverse()
                     this.statusList = []
-                    for (var i = 0; i < 4; i++) {
+                    this.nowDevicestatus.forEach((el, index) => {
-                        var statusData = { name: `顶卷膜${i + 1}`, open: res.data.data[(1025 + (i * 3))], progress: res.data.data[(1027 + (i * 3))], index: res.data.data[(1026 + (i * 3))] }
+                        if (el.id == 1) {
-                        this.statusList.push(statusData)
+                            //风机
+                            var fandata = {}
+                            fandata.open = res.data.data['1023']
+                            fandata.id = el.id
+                            fandata.type = 1
+                            fandata.name = el.name
+                            fandata.status = []
+                            var num = res.data.data['1024']
+                            var num1 = this.padString(num.toString(2), 5)
+                            var openListNew = []
+                            openListNew = num1.split("")
+                            fandata.status = openListNew.reverse()
+                            this.statusList.push(fandata)
+                        } else if (el.id == 2 || el.id == 3 || el.id == 4 || el.id == 5) {
+                            //顶卷膜
+                            var statusData = { name: el.name, type: 2, id: el.id, open: res.data.data[(1025 + ((el.id - 2) * 3))], progress: res.data.data[(1027 + ((el.id - 2) * 3))], index: res.data.data[(1026 + ((el.id - 2) * 3))] }
+                            this.statusList.push(statusData)
+                        } else if (el.id == 6) {
+                            //加温水泵
+                            var statusData = { name: el.name, type: 3, id: el.id, open: res.data.data['1000'], progress: 0, index: res.data.data['1001'] }
+                            this.statusList.push(statusData)
+                        } else if (el.id == 7) {
+                            //地热风机
+                            var statusData = { name: el.name, type: 4, id: el.id, open: res.data.data['1002'], progress: 0, index: res.data.data['1003'] }
+                            this.statusList.push(statusData)
+                        } else if (el.id == 8) {
+                            //上风口
+                            var statusData = { name: el.name, type: 5, id: el.id, open: res.data.data['1004'], progress: res.data.data['1006'], index: res.data.data['1005'] }
+                            this.statusList.push(statusData)
+                        } else if (el.id == 9) {
+                            //下风口
+                            var statusData = { name: el.name, type: 5, id: el.id, open: res.data.data['1007'], progress: res.data.data['1009'], index: res.data.data['1008'] }
+                            this.statusList.push(statusData)
+                        } else if (el.id == 10) {
+                            //卷被
+                            var statusData = { name: el.name, type: 6, id: el.id, open: res.data.data['1010'], progress: res.data.data['1012'], index: res.data.data['1011'] }
+                            this.statusList.push(statusData)
+                        } else if (el.id == 11) {
+                            //除雪
+                            var statusData = { name: el.name, type: 7, id: el.id, open: res.data.data['1013'], progress: 0, index: res.data.data['1014'] }
+                            this.statusList.push(statusData)
+                        }
+                    })
 
-
-                    }
                     this.$forceUpdate();
                     setTimeout(() => {
                         this.statusList.forEach((el, index) => {
-                            if (el.open != 0) {
+                            if (el.open != 0 && (el.type == 6 || el.type == 5 || el.type == 2)) {
                                 statusCharts(`statusCharts${index}`, el.progress)
                             }
                         })
@@ -641,9 +737,7 @@ export default {
 
                 } else {
                     this.statusList = []
-                    this.fanStatus = {
+
-                        name: '风机', open: 0, status: []
-                    }
                     this.$forceUpdate();
                     // this.$message.error(res.data.msg);
                 }

src/views/wufang/rollByRoll.vue

@@ -2,6 +2,9 @@
     <div class="waterPump wufang">
         <div class="table-title">
             <img src="../../assets/img/rollByRoll.png" alt=""> 卷被
+
+            <div class="title-text">日出:{{ sunrise }}</div>
+            <div class="title-text">日落:{{ sunset }}</div>
         </div>
         <div class="title-tips">卷被有效性设置</div>
         <div class="flex-view">
@@ -24,56 +27,48 @@
 
         <div class="flex-view">
             <div class="flex-sel padding-none" v-if="openTrue.length" @click="changeOpenTrue(0)">
-                <div v-if="openTrue[0]==0" class="no-sel margin-none"></div>
+                <div v-if="openTrue[0] == 0" class="no-sel margin-none"></div>
                 <div v-else class="sel margin-none"></div>
             </div>
             <div class="input-main">
                 <span>①室外光照大于</span>
-                <input @blur="blurChange10('21550', $event)" 
+                <input @blur="blurChange10('21550', $event)" v-model="inputData['21550']"
-                v-model="inputData['21550']" 
+                    @input="changeCount10('21550', $event)" type="text" value="60" placeholder="60" />
-                @input="changeCount10('21550', $event)"
-                    type="text" value="60" placeholder="60" />
                 <span>klx，收拢卷被</span>
             </div>
         </div>
         <div class="flex-view">
             <div class="flex-sel padding-none" v-if="openTrue.length" @click="changeOpenTrue(1)">
-                <div v-if="openTrue[1]==0" class="no-sel margin-none"></div>
+                <div v-if="openTrue[1] == 0" class="no-sel margin-none"></div>
                 <div v-else class="sel margin-none"></div>
             </div>
             <div class="input-main">
                 <span>②日出</span>
-                <input @blur="blurChange('21551', $event)" 
+                <input @blur="blurChange('21551', $event)" v-model="inputData['21551']" @input="change('21551', $event)"
-                v-model="inputData['21551']" 
-                @input="change('21551', $event)"
                     type="text" value="60" placeholder="60" />
                 <span>分钟，收拢卷被</span>
             </div>
         </div>
         <div class="flex-view">
             <div class="flex-sel padding-none" v-if="openTrue.length" @click="changeOpenTrue(2)">
-                <div v-if="openTrue[2]==0" class="no-sel margin-none"></div>
+                <div v-if="openTrue[2] == 0" class="no-sel margin-none"></div>
                 <div v-else class="sel margin-none"></div>
             </div>
             <div class="input-main">
                 <span>③室内1#平均温度低于</span>
-                <input @blur="blurChangeCount('21552', $event)" 
+                <input @blur="blurChangeCount('21552', $event)" v-model="inputData['21552']"
-                v-model="inputData['21552']" 
+                    @input="changeCountData('21552', $event)" type="text" value="60" placeholder="60" />
-                @input="changeCountData('21552', $event)"
-                    type="text" value="60" placeholder="60" />
                 <span>℃时，展开卷被</span>
             </div>
         </div>
         <div class="flex-view">
             <div class="flex-sel padding-none" v-if="openTrue.length" @click="changeOpenTrue(3)">
-                <div v-if="openTrue[3]==0" class="no-sel margin-none"></div>
+                <div v-if="openTrue[3] == 0" class="no-sel margin-none"></div>
                 <div v-else class="sel margin-none"></div>
             </div>
             <div class="input-main">
                 <span>④日落前</span>
-                <input @blur="blurChange('21553', $event)" 
+                <input @blur="blurChange('21553', $event)" v-model="inputData['21553']" @input="change('21553', $event)"
-                v-model="inputData['21553']" 
-                @input="change('21553', $event)"
                     type="text" value="60" placeholder="60" />
                 <span>分钟，展开卷被</span>
             </div>
@@ -81,25 +76,19 @@
         <div class="flex-view border-none">
             <div class="input-main">
                 <div>卷被的行程时间</div>
-                <input @blur="blurChange('21554', $event)" 
+                <input @blur="blurChange('21554', $event)" v-model="inputData['21554']" @input="change('21554', $event)"
-                v-model="inputData['21554']" 
-                @input="change('21554', $event)"
                     type="text" value="60" placeholder="60" />
                 <span>秒</span>
             </div>
             <div class="input-main">
                 <div>卷被开窗的行程时间</div>
-                <input @blur="blurChange('21555', $event)" 
+                <input @blur="blurChange('21555', $event)" v-model="inputData['21555']" @input="change('21555', $event)"
-                v-model="inputData['21555']" 
-                @input="change('21555', $event)"
                     type="text" value="60" placeholder="60" />
                 <span>秒</span>
             </div>
             <div class="input-main">
                 <div>展开的输出通道</div>
-                <input @blur="blurChange('21556', $event)" 
+                <input @blur="blurChange('21556', $event)" v-model="inputData['21556']" @input="change('21556', $event)"
-                v-model="inputData['21556']" 
-                @input="change('21556', $event)"
                     type="text" value="60" placeholder="60" />
                 <span></span>
             </div>
@@ -119,6 +108,8 @@ export default {
             openIndex: 1,
             inputData: {},
             openTrue: [],
+            sunrise: '00:00',
+            sunset: '00:00'
         }
     },
     mounted() {
@@ -130,21 +121,21 @@ export default {
         }
     },
     methods: {
-                //反转数组 不影响原数组
+        //反转数组 不影响原数组
-                myReverse(arr) {
+        myReverse(arr) {
             return [...arr].reverse()
         },
         padString(str, length) {
             return str.padStart(length, '0');
         },
         changeOpenTrue(index) {
-          if(  this.openTrue[index]==0){
+            if (this.openTrue[index] == 0) {
-            this.openTrue[index]=1
+                this.openTrue[index] = 1
-          }else{
+            } else {
-            this.openTrue[index]=0
+                this.openTrue[index] = 0
-          }
+            }
-          this.$forceUpdate();
+            this.$forceUpdate();
-          var num=this.myReverse(this.openTrue).join("")
+            var num = this.myReverse(this.openTrue).join("")
 
             var dataNum = {
                 target: {
@@ -227,12 +218,34 @@ export default {
                 return 0
             }
         },
-        get21549(){
+        get21549() {
             var num1 = this.inputData['21549']
             var num11 = this.padString(num1.toString(2), 4)
             var openList1New
             openList1New = num11.split("")
-            this.openTrue=  openList1New.reverse()
+            this.openTrue = openList1New.reverse()
+        },
+        getStatus(data) {
+            this.api.getControlGetState(data).then(res => {
+                if (res.data.code == 200) {
+                    this.sunrise = this.convertToTimeMinutes(res.data.data['1021'])
+                    this.sunset = this.convertToTimeMinutes(res.data.data['1022'])
+                }
+            })
+        },
+        //16进制转为时间 16位无符号高字节是时，低字节是分
+        convertToTimeMinutes(hexValue) {
+            // 将 16 进制字符串转换为 16 进制数值
+            const intValue = hexValue
+
+            // 提取高字节（小时）和低字节（分钟）
+            const hours = (intValue >> 8) & 0xFF;
+            const minutes = intValue & 0xFF;
+
+            // 格式化为时:分的字符串
+            const formattedTime = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`;
+
+            return formattedTime;
         },
         dataInit() {
             var store = this.$store.state
@@ -242,17 +255,18 @@ export default {
             };
             this.api.readControl_fiveControl(data).then(res => {
                 console.log(res, 111);
-                if(res.data.code==200){
+                if (res.data.code == 200) {
                     this.inputData = res.data.data
-                this.openIndex = this.inputData['21548']
+                    this.openIndex = this.inputData['21548']
                     this.get21549()
-                this.inputData['21552'] = this.countData(this.inputData['21552'])
+                    this.inputData['21552'] = this.countData(this.inputData['21552'])
-                this.inputData['21550'] = this.countData10(this.inputData['21550'])
+                    this.inputData['21550'] = this.countData10(this.inputData['21550'])
                 }
-               
+
-              
+
 
             })
+            this.getStatus(data)
         },
         //全选文本
         selectValue(e) {

src/views/wufang/uptake.vue

@@ -55,7 +55,7 @@
             </div>
             <div class="input-main  border-right">
                 <span>最大开度</span>
-                <span>{{ inputData['21535'] }}</span>
+                <span>{{ statusNum }}</span>
                 <span>%</span>
             </div>
             <div class="input-main">
@@ -93,8 +93,13 @@ export default {
             openIndex: 1,
             inputData: {},
             openTrue: false,
+            statusNum:0,
+            statusInterval:null,
         }
     },
+    beforeDestroy(){
+        clearInterval(this.statusInterval)&&this.statusInterval
+    },
     mounted() {
         this.dataInit();
         //input获取焦点后全选
@@ -203,6 +208,18 @@ export default {
               }
 
             })
+            this.getStatus(data)
+            clearInterval(this.statusInterval)&&this.statusInterval
+            this.statusInterval=setInterval(() => {
+                this.getStatus(data)
+            }, 3000);
+        },
+        getStatus(data){
+            this.api.getControlGetState(data).then(res=>{
+                if(res.data.code==200){
+                    this.statusNum=res.data.data['1015']
+                }
+            })
         },
         //全选文本
         selectValue(e) {

文档.txt

@@ -2,4 +2,6 @@ vscode打开
 
 先npm install 下载依赖
 
-依赖下载完成后 npm run serve 进行运行
+依赖下载完成后 npm run serve 进行运行
+
+该项目很多数据是无法循环的 故许多参数数据是写死的 如果需要添加新数据需要手动添加.