src/assets/css/main.css

@@ -3143,8 +3143,10 @@
 
 .vrcode-model.manage-model .el-dialog__body .vrcode-content {
   padding: 10px 22px 0 !important;
-  display: flex;
+  display: grid;
-  justify-content: space-between;
+  grid-template-columns: repeat(2, 1fr);
+  grid-row-gap: 0px;
+  grid-column-gap: 20px;
 }
 
 .vrcode-model.manage-model .el-dialog__footer {

src/assets/css/main.scss

@@ -303,6 +303,7 @@
     font-weight: bold;
     color: #FFFFFF;
     margin: 0 !important;
+
     >img {
         width: 60px;
         height: 60px;
@@ -768,6 +769,7 @@
         }
     }
 }
+
 .input-main-one {
     width: 100%;
     flex-wrap: wrap;
@@ -804,6 +806,7 @@
         }
     }
 }
+
 .outline {
     color: red;
     font-weight: bold;
@@ -1669,6 +1672,7 @@
                     align-items: flex-start;
                     padding: 20px 0 0;
                     justify-content: flex-start;
+
                     .btn {
                         padding: 0 10px;
 
@@ -1677,6 +1681,7 @@
                             height: 24px;
                         }
                     }
+
                     .model-left {
                         display: flex;
                         align-items: center;
@@ -2233,11 +2238,13 @@
                         width: calc(100% - 400px);
                         height: 100%;
                     }
+
                     #video-js {
                         position: absolute;
                         left: 0;
                         top: 0;
                     }
+
                     .video-control {
                         width: 400px;
                         display: flex;
@@ -3257,9 +3264,11 @@
     }
 
     border-radius: 3px;
+
     &.w-100 {
         width: 100px;
     }
+
     &.blue-btn {
         background: #00A6FF;
 
@@ -3302,32 +3311,39 @@
         }
     }
 }
+
 .manage-input {
     margin-bottom: 15px;
+
     &.w-400 {
         input {
             width: 400px;
         }
     }
+
     &.w-350 {
         input {
             width: 350px;
         }
     }
+
     &.w-160 {
         input {
             width: 160px;
         }
     }
+
     &.w-180 {
         input {
             width: 180px;
         }
     }
+
     .search-input {
         margin: 0 10px;
         height: 40px;
     }
+
     .input-title {
         font-family: Microsoft YaHei;
         font-weight: 400;
@@ -3335,6 +3351,7 @@
         color: #FFFFFF;
         margin-bottom: 10px;
     }
+
     input {
         width: 240px;
         height: 44px;
@@ -3350,27 +3367,33 @@ color: #92B1D0;
         }
     }
 }
+
 .vrcode-model {
     &.manage-model {
         .el-dialog {
             background: rgba(0, 59, 114, 0.8);
             border: 2px solid rgba(0, 186, 255, 0.35);
         }
+
         .el-dialog__body {
             .vrcode-content {
                 padding: 10px 22px 0 !important;
-                display: flex;
+                display: grid;
-                // align-items: center;
+                grid-template-columns: repeat(2, 1fr);
-                justify-content: space-between;
+                grid-row-gap: 0px; //纵向间隔
+                grid-column-gap: 20px; //横向间隔
             }
         }
+
         .el-dialog__footer {
             padding: 15px 22px;
             border-top: 1px solid rgba(0, 180, 255, 0.35);
         }
+
         .dialog-footer {
             justify-content: flex-start;
         }
+
         .manage-right {
             .manage-img {
                 width: 380px;
@@ -3378,12 +3401,15 @@ color: #92B1D0;
                 // height: 290px;
                 background: rgba(0, 132, 255, 0.15);
                 border: 2px solid rgba(0, 132, 255, 0.35);
+
                 img {
                     width: 360px;
                     height: auto;
                     min-height: 200px;
                 }
+
                 padding: 10px;
+
                 #sel-img {
                     width: 0;
                     height: 0;
@@ -3393,6 +3419,7 @@ top: 0;
                 }
             }
         }
+
         .manage-text {
             width: 240px;
             height: 160px;
@@ -3407,6 +3434,7 @@ font-weight: 400;
             font-size: 14px;
             color: #00C0F7;
         }
+
         .manage-img-small {
             width: 240px;
             height: 160px;
@@ -3415,6 +3443,7 @@ border: 2px solid rgba(0,132,255,0.35);
             padding: 10px;
             margin-top: 25px;
             position: relative;
+
             #sel-img {
                 width: 0;
                 height: 0;
@@ -3422,6 +3451,7 @@ position: relative;
                 left: 0;
                 top: 0;
             }
+
             img {
                 width: 100%;
                 height: 100%;
@@ -3429,6 +3459,7 @@ img{
         }
 
     }
+
     .model-return-btn {
         position: absolute;
         right: 30px;
@@ -4255,6 +4286,7 @@ img{
     background: rgba(0, 92, 178, 0.15);
     padding: 20px 30px;
     border: 2px solid rgba(0, 186, 255, 0.2);
+
     .scroll {
         flex-wrap: nowrap !important;
     }
@@ -4310,10 +4342,12 @@ img{
 .el-table {
     .el-table__body-wrapper {
         @extend .scroll;
+
         &::-webkit-scrollbar {
             /*滚动条整体*/
             width: 17px;
         }
+
         &::-webkit-scrollbar-thumb {
             /*滚动条里面的滑块*/
             width: 4px;
@@ -4328,11 +4362,14 @@ img{
         display: none;
     }
 }
+
 .manage-dropdown {
     width: 240px !important;
+
     &.w-400 {
         width: 400px !important;
     }
+
     &.w-350 {
         width: 350px !important;
     }
@@ -4349,16 +4386,19 @@ img{
         color: #FFFFFF;
         margin-bottom: 10px;
     }
+
     &.w-400 {
         .el-dropdown-link {
             width: 400px;
         }
     }
+
     &.w-350 {
         .el-dropdown-link {
             width: 350px;
         }
     }
+
     .el-dropdown-link {
         width: 240px;
         height: 44px;

src/components/setParamsControl.vue

@@ -80,7 +80,16 @@ export default {
         return 0
       }
     },
+    toNewList(list, list2) {
+      let newList = list.map((item, index) => {
+        // 从第二个数组中获取对应的 nickName 并赋值给 name
+        const match = list2[index];
+        return match ? { ...item, name: match.nickName ? match.nickName : item.name } : item;
+      });
+      return newList
+    },
     dataInit() {
+      const that = this
       this.loading = this.$loading({
         lock: true,
         text: '加载中',
@@ -95,16 +104,23 @@ export default {
         this.purview = res.data.data;
         this.purview.forEach((el, index) => {
           if (el.id == 1) {
+            var list = [
+              { name: "目标温度", list: [], router: "targetTemperature", isRouter: true, index: 1 },
+              { name: "目标湿度", list: [], router: "targetHumidity", isRouter: true, index: 2 },
+              { name: "目标CO3", list: [], router: "targetCo2", isRouter: true, index: 3 }
+            ]
+            let newList
+            if (el.child.length) {
+              newList = that.toNewList(list, el.child)
+            } else {
+              newList = list
+            }
             this.routerList.push(
               {
                 id: el.id, sort: el.sort,
                 name: el.nickName,
                 router: "targetTemperature",
-                list: [
+                list: newList,
-                  { name: "目标温度", list: [], router: "targetTemperature", isRouter: true, index: 1 },
-                  { name: "目标湿度", list: [], router: "targetHumidity", isRouter: true, index: 2 },
-                  { name: "目标CO2", list: [], router: "targetCo2", isRouter: true, index: 3 }
-                ],
               },
             );
           } else if (el.id == 3) {
@@ -118,80 +134,139 @@ export default {
               },
             );
           } else if (el.id == 19) {
-            this.routerList.push({
+            var list = [
-              id: el.id, sort: el.sort,
-              name: el.nickName, list: [
               { name: '通风窗1', status: -1, router: 'sunroofControl', index: 1 },
               { name: '通风窗2', status: -1, router: 'sunroofControl', index: 2 },
               { name: '通风窗3', status: -1, router: 'sunroofControl', index: 3 },
               { name: '通风窗4', status: -1, router: 'sunroofControl', index: 4 },
               { name: '通风窗5', status: -1, router: 'sunroofControl', index: 5 },
               { name: '通风窗6', status: -1, router: 'sunroofControl', index: 6 },
-              ], router: "sunroofControl",
+            ]
+            let newList
+            if (el.child.length) {
+              newList = that.toNewList(list, el.child)
+            } else {
+              newList = list
+            }
+            this.routerList.push({
+              id: el.id, sort: el.sort,
+              name: el.nickName, list: newList, router: "sunroofControl",
             });
           } else if (el.id == 25) {
-            this.routerList.push({
+            var list = [
-              id: el.id, sort: el.sort,
-              name: el.nickName, list: [
               { name: '外遮阳1', status: -1, router: 'outsizeSunshade', index: 1 },
               { name: '外遮阳2', status: -1, router: 'outsizeSunshade', index: 2 },
-              ], router: "outsizeSunshade",
+            ]
+            let newList
+            if (el.child.length) {
+              newList = that.toNewList(list, el.child)
+            } else {
+              newList = list
+            }
+            this.routerList.push({
+              id: el.id, sort: el.sort,
+              name: el.nickName, list: newList, router: "outsizeSunshade",
             });
           } else if (el.id == 24) {
-            this.routerList.push({
+            var list = [
-              id: el.id, sort: el.sort,
-              name: el.nickName, list: [
               { name: '内遮阳1', status: -1, router: 'insizeSunshade', index: 1 },
               { name: '内遮阳2', status: -1, router: 'insizeSunshade', index: 2 },
-              ], router: "insizeSunshade",
+            ]
+            let newList
+            if (el.child.length) {
+              newList = that.toNewList(list, el.child)
+            } else {
+              newList = list
+            }
+            this.routerList.push({
+              id: el.id, sort: el.sort,
+              name: el.nickName, list: newList, router: "insizeSunshade",
             });
           } else if (el.id == 27) {
-            this.routerList.push({
+            var list = [
-              id: el.id, sort: el.sort,
-              name: el.nickName, list: [
               { name: '内保温1', status: -1, router: 'internalInsulation', index: 1 },
               { name: '内保温2', status: -1, router: 'internalInsulation', index: 2 },
-              ], router: "internalInsulation",
+            ]
-            });
+            let newList
-          } else if (el.id == 29) {
+            if (el.child.length) {
+              newList = that.toNewList(list, el.child)
+            } else {
+              newList = list
+            }
             this.routerList.push({
               id: el.id, sort: el.sort,
-              name: el.nickName, list: [
+              name: el.nickName, list: newList, router: "internalInsulation",
+            });
+          } else if (el.id == 29) {
+            var list = [
               { name: '立面保温1', status: -1, router: 'facadeInsulation', index: 1 },
               { name: '立面保温2', status: -1, router: 'facadeInsulation', index: 2 },
               { name: '立面保温3', status: -1, router: 'facadeInsulation', index: 3 },
               { name: '立面保温4', status: -1, router: 'facadeInsulation', index: 4 },
-              ], router: "facadeInsulation",
+            ]
+            let newList
+            if (el.child.length) {
+              newList = that.toNewList(list, el.child)
+            } else {
+              newList = list
+            }
+            this.routerList.push({
+              id: el.id, sort: el.sort,
+              name: el.nickName, list: newList, router: "facadeInsulation",
             });
           } else if (el.id == 26) {
-            this.routerList.push({
+            var list = [
-              id: el.id, sort: el.sort, name: el.nickName, list: [
                 { name: '风机', status: -1, router: 'wetFan', index: 1 },
                 { name: '湿帘泵', status: -1, router: 'wetFan', index: 2 },
                 { name: '湿帘外翻窗', status: -1, router: 'wetFan', index: 3 },
-              ], router: "wetFan"
+              ]
+let newList
+if (el.child.length) {
+  newList=that.toNewList(list,el.child)
+} else {
+  newList = list
+}
+            this.routerList.push({
+              id: el.id, sort: el.sort, name: el.nickName, list: newList, router: "wetFan"
             });
           } else if (el.id == 21) {
-            this.routerList.push({
+            var list = [
-              id: el.id, sort: el.sort,
-              name: el.nickName, list: [
                 { name: '环流风扇1', status: -1, router: 'circulationCan', index: 1 },
                 { name: '环流风扇2', status: -1, router: 'circulationCan', index: 2 },
-              ], router: "circulationCan",
+              ]
+let newList
+if (el.child.length) {
+  newList=that.toNewList(list,el.child)
+} else {
+  newList = list
+}
+
+            this.routerList.push({
+              id: el.id, sort: el.sort,
+              name: el.nickName, list: newList, router: "circulationCan",
             });
           } else if (el.id == 20) {
+            
             this.routerList.push({
               id: el.id, sort: el.sort,
               name: el.nickName, list: [], router: "LED",
               isRouter: true,
             });
           } else if (el.id == 23) {
-            this.routerList.push({
+            var list = [
-              id: el.id, sort: el.sort,
-              name: el.nickName, list: [
                 { name: '高压微雾1', status: -1, router: 'coercionMist', index: 1 },
                 { name: '高压微雾2', status: -1, router: 'coercionMist', index: 2 },
-              ], router: "coercionMist"
+              ]
+let newList
+if (el.child.length) {
+  newList=that.toNewList(list,el.child)
+} else {
+  newList = list
+}
+
+            this.routerList.push({
+              id: el.id, sort: el.sort,
+              name: el.nickName, list: newList, router: "coercionMist"
             });
           } else if (el.id == 11 || el.id == 12 || el.id == 13 || el.id == 14 || el.id == 15 || el.id == 16 || el.id == 17 || el.id == 18) {
             if (!this.routerList.some(item => item.router === "electromagneticControl")) {
@@ -251,6 +326,7 @@ export default {
           } else if (el.id == 22) {
             this.routerList.push({ name: el.nickName, list: [], router: "parameterSet", isRouter: true });
           } else if (el.id == 8) {
+            
             this.routerList.push(
               { id: el.id, sort: el.sort, name: "加热水泵", list: [], router: "waterPump", isRouter: true },
               {

src/views/manage/deviceSet.vue

@@ -4,14 +4,15 @@
       <img src="../../assets/manageImg/deviceSet.png" alt="">设备状态设备
     </div>
     <div class="flex-view scroll">
-      <div class="manage-btn" v-for="item,index in topList" :key="index" @click="topChange(item,index)" :class="active == index ? 'active' : ''">
+      <div class="manage-btn" v-for="item, index in topList" :key="index" @click="topChange(item, index)"
+        :class="active == index ? 'active' : ''">
 
         {{ item.deviceTypeName }}
       </div>
     </div>
     <div class="table-view">
-      <el-table :data="tableData" :row-class-name="tableRowClassName" height="580" style="width: 100%">
+      <el-table :data="tableData" :row-class-name="tableRowClassName" height="580" style="width: 100%"
-  
+        :tree-props="{ children: 'child' }">
         <el-table-column label="序号" width="120px">
           <template slot-scope="scope">
             <div>{{ scope.$index + 1 }}
@@ -19,7 +20,7 @@
           </template>
         </el-table-column>
 
-        <el-table-column prop="permissionName" label="设备名称">
+        <el-table-column prop="name" label="设备名称">
         </el-table-column>
         <el-table-column prop="nickName" label="设备别名">
         </el-table-column>
@@ -36,23 +37,33 @@
         </el-table-column>
       </el-table>
     </div>
-    <el-dialog title="提示" top="15vh" :visible.sync="addModel" width="564px" class="vrcode-model manage-model" :append-to-body="true">
+    <el-dialog title="提示" top="15vh" :visible.sync="addModel" width="564px" class="vrcode-model manage-model"
+      :append-to-body="true">
       <div class="vrcode-model-title">
         编辑
       </div>
       <div class="vrcode-content" v-if="changeData">
-              <div class="manage-left">
+        <div class="">
           <div class="manage-input">
             <div class="input-title">设备别名</div>
             <input type="text" v-model="changeData.nickName" placeholder="请输入设备别名">
           </div>
         </div>
-              <div class="manage-right">
+        <div class="">
           <div class="manage-input">
             <div class="input-title">排序</div>
             <input type="number" v-model="changeData.sort" placeholder="请输入新排序">
           </div>
         </div>
+        <template v-for="item,index in changeData.child" >
+          <div class="" >
+          <div class="manage-input">
+            <div class="input-title">{{ index==0?'子设备名称':`&nbsp;` }}</div>
+            <input type="text" v-model="item.nickName" placeholder="请输入设备别名">
+          </div>
+        </div>
+        </template>
+       
       </div>
       <span slot="footer" class="dialog-footer">
         <div class="vrcode-btn blue-btn w-100" @click="confirmModel">确定</div>
@@ -121,8 +132,8 @@ export default {
       })
     },
     getData(item) {
-      var data={deviceId:item.deviceId}
+      // var data={deviceId:item.deviceId}
-      this.api.selpermission(data).then(res=>{
+      this.api.getcontrol_cpermission(item.deviceId).then(res => {
         if (res.data.code == 200) {
           this.tableData = res.data.data
         }