1

src/api/index.js

@@ -224,8 +224,18 @@ export default {
   getStatePermissionStatus(data){
       return sendGetRequest(`/getcontrol/getStatePermissionStatus`, data)
     },
+    //获取当前权限能看到的设备
     getPermissionStatus(data){
       return sendGetRequest(`/getcontrol/getPermissionStatus`, data)
+    },
+    //根据id删除status设备
+    delPermissionStatus(id1,id2){
+      return sendPostRequest(`/getcontrol/delPermissionStatus?deviceId=${id1}&permissionid=${id2}`, '')
+    },
+     //根据id添加status设备
+     addPermissionStatus(id1,id2){
+      return sendPostRequest(`/getcontrol/addStatepermission?deviceId=${id1}&Permissionid=${id2}`, '')
     }
     
+    
 };

src/assets/css/main.css

@@ -1016,7 +1016,7 @@
   max-height: 50px;
 }
 
-.upload .upload-content > div > .no-sel {
+.upload .upload-content > div .no-sel {
   margin-right: 10px;
   width: 35px;
   height: 35px;
@@ -1858,6 +1858,15 @@
   flex-direction: column;
 }
 
+.realTime .page-content .status-view .status-view-content .status-noTrue.status-add {
+  cursor: pointer;
+}
+
+.realTime .page-content .status-view .status-view-content .status-noTrue.status-add > img {
+  width: 40px;
+  height: 40px;
+}
+
 .realTime .page-content .status-view .status-view-content .status-noTrue > img {
   width: 40px;
   height: 35px;
@@ -2949,3 +2958,48 @@
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }
+
+.model-title {
+  width: 100%;
+  text-align: center;
+  font-size: 20px;
+  font-weight: bold;
+  padding: 15px 0;
+}
+
+.model-sel {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  min-height: 200px;
+  max-height: 700px;
+  overflow: auto;
+  padding: 0 30px;
+}
+
+.model-sel > div {
+  width: 33%;
+  white-space: nowrap;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+}
+
+.model-sel .no-sel {
+  margin-right: 10px;
+  width: 35px;
+  height: 35px;
+  box-shadow: 0 0 15px rgba(53, 187, 247, 0.5) inset;
+  border: 1px solid rgba(0, 204, 255, 0.7);
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+.model-sel .sel {
+  margin-right: 10px;
+  width: 35px;
+  height: 35px;
+  background: url(../image/radio.png) no-repeat center;
+  background-size: 100% 100%;
+  cursor: pointer;
+}

src/assets/css/main.scss

@@ -1061,7 +1061,7 @@ margin-top: 20px;
             white-space: nowrap;
             max-height: 50px;
 
-            >.no-sel {
+            .no-sel {
                 margin-right: 10px;
                 width: 35px;
                 height: 35px;
@@ -1956,7 +1956,13 @@ margin-top: 20px;
                     align-items: center;
                     justify-content: center;
                     flex-direction: column;
-
+                    &.status-add{
+                        cursor: pointer;
+                        >img{
+                            width: 40px;
+                            height: 40px;
+                        }
+                    }
                     >img {
                         width: 40px;
                         height: 35px;
@@ -3077,3 +3083,46 @@ color: #FFFFFF;
        }
     }
 } 
+
+.model-title{
+    width: 100%;
+    text-align: center;
+    font-size: 20px;
+    font-weight: bold;
+    padding: 15px 0;
+}
+.model-sel{
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    min-height:200px ;
+    max-height: 700px;
+    overflow: auto;
+    padding: 0 30px;
+    >div{
+        width: 33%;
+        white-space: nowrap;
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+    }
+    
+    .no-sel {
+        margin-right: 10px;
+        width: 35px;
+        height: 35px;
+        box-shadow: 0 0 15px rgba(53, 187, 247, 0.50) inset;
+        border: 1px solid rgba(0, 204, 255, 0.70);
+        border-radius: 50%;
+        cursor: pointer;
+    }
+
+    .sel {
+        margin-right: 10px;
+        width: 35px;
+        height: 35px;
+        background: url(../image/radio.png) no-repeat center;
+        background-size: 100% 100%;
+        cursor: pointer;
+    }
+}

src/assets/js/charts.js

@@ -316,7 +316,6 @@ export function realTimeLine(id, data) {
     });
 }
 export function statusCharts(id, data) {
-    console.log(id,11);
     var chartDom = document.getElementById(id);
     var myChart = echarts.init(chartDom);
     var option;

src/views/page/realTime.vue

@@ -69,17 +69,9 @@
                 <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" v-model="item.deltrue">
-                            <!-- <div class="set-status-blue">进入修改设定值</div> -->
+                            <div class="set-status-red" @click="delStatus(item, index)">删除</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>
                             <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=""> -->
@@ -157,8 +149,9 @@
                             </div>
                             <div class="status-true-text">
                                 <div class="status-true-text-left">{{ getNumberStatus(item) }}</div>
-                                <div class="status-true-text-right" v-if="item.type == 6 || item.type == 5 || item.type == 2">{{
+                                <div class="status-true-text-right"
-                                    item.progress }}%</div>
+                                    v-if="item.type == 6 || item.type == 5 || item.type == 2">{{
+                                        item.progress }}%</div>
                             </div>
                         </div>
                         <div v-else class="status-noTrue">
@@ -167,8 +160,32 @@
                         </div>
                     </div>
                 </div>
+
+                <div class="status-view">
+                    <div class="status-view-top">
+                        <div class="status-view-top-left">添加设备</div>
+                    </div>
+                    <div class="status-view-content">
+                        <div class="status-noTrue status-add" @click="addModel = true">
+                            <img src="../../assets/img/status-add.png" alt="">
+                            <div>点击添加设备</div>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
+        <el-dialog title="请选择要显示的设备" :append-to-body="true" :visible.sync="addModel" width="70%">
+            <div class="model-title">请选择要显示的设备</div>
+            <div class="model-sel scroll">
+                <div v-for="item, index in selDevicestatus" :key="index">
+                    <div @click="selClick(item)" :class="item.select ? 'sel' : 'no-sel'"></div>
+                    {{ item.statePermissions }}
+                </div>
+            </div>
+            <span slot="footer" class="dialog-footer">
+                <el-button type="primary" @click="addModel = false">确 认</el-button>
+            </span>
+        </el-dialog>
     </div>
 </template>
 <script>
@@ -225,6 +242,8 @@ export default {
 
             allDevicestatus: [],//所有权限
             nowDevicestatus: [],//当前设备权限
+            selDevicestatus: [],//重叠上面数组 判断选择弹窗是否打勾
+            addModel: false,//添加弹窗
         }
     },
     watch: {
@@ -296,11 +315,10 @@ export default {
                 width: divW,  // 播放容器宽高 也可以直接设置成数字 如 1920 单位是px
                 height: divH, // 播放容器宽高 也可以直接设置成数字 如 1080 单位是px
             })
-            console.log(this.player);
         },
         getNumberStatus(item) {
             var index = item.index
-            if (item.type == 2||item.type == 5||item.type == 6) {
+            if (item.type == 2 || item.type == 5 || item.type == 6) {
                 //顶卷膜
                 if (index == 0) {
                     return '静止状态'
@@ -575,7 +593,7 @@ export default {
                     }
                     // console.log(this.controlList);
                 })
-                this.getPermissionStatus()
+
                 this.getStatus()
                 this.getStatePermissionStatus()
                 clearInterval(this.statusInterval) && this.statusInterval
@@ -657,6 +675,7 @@ export default {
             this.api.getStatePermissionStatus().then(res => {
                 if (res.data.code == 200) {
                     this.allDevicestatus = res.data.data
+                    this.getPermissionStatus()
                 }
             })
         },
@@ -669,9 +688,72 @@ export default {
             this.api.getPermissionStatus(TargetValue).then(res => {
                 if (res.data.code == 200) {
                     this.nowDevicestatus = res.data.data
+                    var list1 = this.allDevicestatus
+                    var list2 = this.nowDevicestatus
+                    var resultArray = []
+                    // 遍历 list1
+                    for (const item1 of list1) {
+                        // 查找在 list2 中是否有相同 id 的对象
+                        const matchingItem = list2.find(item2 => item2.id === item1.id);
+
+                        // 如果找到匹配的对象，则在 list1 对应的对象中添加 select 属性
+                        if (matchingItem) {
+                            item1.select = true;
+                        } else {
+                            // 如果没找到匹配的对象，则添加 select 属性并设置为 false
+                            item1.select = false;
+                        }
+
+                        // 将处理后的对象添加到结果数组中
+                        resultArray.push(item1);
+                    }
+                    this.selDevicestatus = resultArray
                 }
             })
         },
+        selClick(item) {
+            var store = this.$store.state
+            var deviceId = store.equipmentList[this.indexs - 1].deviceId
+            var statusId = item.id
+            if (item.select) {
+                item.select = false
+                this.$forceUpdate();
+                this.api.delPermissionStatus(deviceId, statusId).then((res => {
+                    if (res.data.code == 200) {
+                        this.$message({
+                            message: '修改成功',
+                            type: "success",
+                        });
+                        this.getPermissionStatus()
+                    }
+                }))
+            } else {
+                item.select = true
+                this.$forceUpdate();
+                this.api.addPermissionStatus(deviceId, statusId).then((res => {
+                    if (res.data.code == 200) {
+                            this.$message({
+                                message: '修改成功',
+                                type: "success",
+                            });
+                            this.getPermissionStatus()
+                        }
+                    }))
+            }
+        },
+        //删除设备
+        delStatus(item, index) {
+            this.statusList[index].deltrue = false
+            var store = this.$store.state
+            var deviceId = store.equipmentList[this.indexs - 1].deviceId
+            var statusId = item.id
+            this.api.delPermissionStatus(deviceId, statusId).then((res => {
+                if (res.data.code == 200) {
+                    this.getPermissionStatus()
+                }
+            }))
+        },
+        //获取当前权限能看到的
         getStatus() {
             var store = this.$store.state
             var TargetValue = {
@@ -679,7 +761,7 @@ export default {
             }
             this.api.getControlGetState(TargetValue).then(res => {
                 if (res.data.code == 200) {
-                    this.statusList = []
+                    const statusList = []
                     this.nowDevicestatus.forEach((el, index) => {
                         if (el.id == 1) {
                             //风机
@@ -694,38 +776,38 @@ export default {
                             var openListNew = []
                             openListNew = num1.split("")
                             fandata.status = openListNew.reverse()
-                            this.statusList.push(fandata)
+                            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)
+                            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)
+                            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)
+                            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)
+                            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)
+                            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)
+                            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)
+                            statusList.push(statusData)
                         }
                     })
-
+                    this.statusList = statusList
                     this.$forceUpdate();
                     setTimeout(() => {
                         this.statusList.forEach((el, index) => {

src/views/page/upload.vue

@@ -120,7 +120,6 @@ export default {
                     this.actList2.push(this.actList2New.length-index-1)
                 }
             })
-            console.log(this.actList2);
         },
         dataInit() {
             this.actList1New = []