fast(设备详情): 调整设备告警列表

.gitignore

@@ -22,3 +22,4 @@ selenium-debug.log
 package-lock.json
 yarn.lock
 /dist.zip
+/src/assets/download.zip

src/api/iot/device.js

@@ -205,6 +205,23 @@ export function updateDeviceAlarmConfig(data) {
   });
 }
 
+// 获取设备功能列表
+export function getDeviceAlarmConfigList(devKey) {
+  return request({
+    url: "/iot/func/" + devKey,
+    method: "get",
+  });
+}
+
+// 更新设备功能
+export function updateDeviceAlarmConfigList(data) {
+  return request({
+    url: "/iot/func",
+    method: "put",
+    data: data
+  });
+}
+
 // 同步设备告警配置
 export function deviceSendAlarmConfig(data) {
   return request({

src/views/profile/DeviceAlarmConfig/DeviceAlarmConfig.vue

@@ -3,175 +3,96 @@
     <el-row style="margin-bottom: 10px">
       <el-col :span="1.5">
         <el-button
-          type="success"
+          :disabled="disabledAck"
           icon="el-icon-refresh"
           size="mini"
-          :disabled="disabledAck"
-          @click="handleSendAck"
-          >同步下发</el-button
+          type="success"
+          @click="resetAttr"
+          >刷新告警配置</el-button
         >
-        <el-popover
-          placement="top-start"
-          title="同步下发"
-          width="350"
-          trigger="hover">
-          <div>
-            <p>设备配置需要先下发到指定设备，设备配置完成后同步到云端平台</p>
-            <span style="display: block; width: 100%; color: red;">注意*:</span>
-            <span style="color: red;">
-                欠压：报警值 < 预警值 <  正常值 </br>
-                过压：正常值 < 预警值 <  报警值
-            </span>
-          </div>
-          <i class="el-icon-question" slot="reference" style="margin-left: 10px; font-size: 20px;"></i>
-        </el-popover>
+<!--        <el-popover-->
+<!--          placement="top-start"-->
+<!--          title="同步下发"-->
+<!--          trigger="hover"-->
+<!--          width="350">-->
+<!--          <div>-->
+<!--            <p>设备配置需要先下发到指定设备，设备配置完成后同步到云端平台</p>-->
+<!--            <span style="display: block; width: 100%; color: red;">注意*:</span>-->
+<!--            <span style="color: red;">-->
+<!--                欠压：报警值 < 预警值 <  正常值 </br>-->
+<!--                过压：正常值 < 预警值 <  报警值-->
+<!--            </span>-->
+<!--          </div>-->
+<!--          <i slot="reference" class="el-icon-question" style="margin-left: 10px; font-size: 20px;"></i>-->
+<!--        </el-popover>-->
       </el-col>
     </el-row>
     <!-- <el-form class="base-form" ref="baseForm" :model="baseForm" :rules="rules" auto-complete="on"> -->
-      <el-table
-      border
-      :loading="loading"
-      :data="list"
-      class="alarm-table"
-      :height="monthTradingTableHeight"
-      :highlight-pageNum-row="true"
-    >
-      <el-table-column
-        type="index"
-        label="序号"
-        align="center"
-        width="80"
-        :index="
-          (val) => {
-            return ++val;
-          }
-        "
-      ></el-table-column>
-      <el-table-column
-        prop="type"
-        label="类型"
-        align="center"
-        width="300"
-        :formatter="alarmTypeFormatter"
-      ></el-table-column>
-      <el-table-column prop="alarmSta" label="开启告警" align="center">
-        <template slot-scope="scope">
+    <div class="alarm-list">
+      <el-tabs v-model="groupActive" v-loading="loading" type="card">
+        <el-tab-pane v-for="(group,groupIndex ) in groupList" :key="group.funcType"  :label="group.funcTypeName" :name="group.funcType">
+          <el-collapse v-model="activeName" accordion>
+            <el-collapse-item v-for="(item,index) in group.list" :key="item.funcKey" :name="item.funcKey" :title="item.funcName">
+              <el-form class="device-attr-box" label-width="140px">
+                <el-form-item v-for="val in item.confJsonObj" :key="val.key" class="device-attr-item">
+                  <template #label>
+                    <span>{{val.name}}</span>
+                    <el-tooltip v-if="val.remark" :content="val.remark" class="item" effect="dark" placement="top">
+                      <i class="el-icon-question" style="margin-left: 10px;"></i>
+                    </el-tooltip>
+                  </template>
                   <el-switch
-            size="mini"
-            v-model="scope.row.alarmSta"
-            active-text="开启"
-            inactive-text="关闭"
-            :disabled="!updateGenTable"
+                    v-if="getAttrType(val) === 'switch'"
+                    v-model="val.value"
                     :active-value="1"
+                    :disabled="item.disabled"
                     :inactive-value="0"
                     active-color="#13ce66"
                     inactive-color="#dcdfe6"
-            class="switch-wrap"
-            @change="handleAlarmSta(scope.row.alarmSta)"
                   />
-        </template>
-      </el-table-column>
-      <el-table-column prop="warnSta" label="开启预警" align="center">
-        <template slot-scope="scope">
-          <el-switch
-            size="mini"
-            v-model="scope.row.warnSta"
-            active-text="开启"
-            inactive-text="关闭"
-            :disabled="!updateGenTable"
-            :active-value="1"
-            :inactive-value="0"
-            active-color="#13ce66"
-            inactive-color="#dcdfe6"
-            class="switch-wrap"
-          >
-          </el-switch>
-        </template>
-      </el-table-column>
-      <el-table-column
-        prop="alarmValue"
-        label="告警值"
-        align="center"
-      >
-      <template slot-scope="scope">
-        <e-table-input  @handleVerification="alarmValueTableCallback" :disabled="!scope.row.alarmSta" :form="scope.row" pops="alarmValue" />
-        <!-- <el-form-item :prop="'demoList.'+scope.$index+'.alarmValue'" :rules="tableFormRules.alarmValue" class="all">
-          <el-input v-model="scope.row.alarmValue" placeholder="请输入" clearable @focus="$refs.baseForm.clearValidate(`demoList.${scope.$index}.alarmValue`)"></el-input>
-        </el-form-item> -->
-      </template>
-    
-    </el-table-column>
-
-      <!--<el-table-column
-        prop="warnValueMin"
-        label="最小预警值"
-        align="center"
-      >
-      <template slot-scope="scope">
-        <e-table-input  @handleVerification="warnValueMinTableCallback" :disabled="!scope.row.warnSta" :form="scope.row" pops="warnValueMin" />
-      </template>
-    </el-table-column>
-      <el-table-column
-        prop="warnValueMax"
-        label="最大预警值"
-        align="center"
-      >
-      <template slot-scope="scope">
-        <e-table-input  @handleVerification="warnValueMaxTableCallback" :disabled="!scope.row.warnSta" :form="scope.row" pops="warnValueMax" />
-      </template>
-    </el-table-column>-->
-      <el-table-column
-        prop="warnValue"
-        label="预警值"
-        align="center"
-      >
-        <template slot-scope="scope">
-          <e-table-input  @handleVerification="warnValueTableCallback"  :disabled="!scope.row.warnSta" :form="scope.row" pops="warnValue" />
-        </template>
-      </el-table-column>
-      <el-table-column
-        label="操作"
-        align="center"
-        width="200px"
-        class-name="small-padding fixed-width"
-      >
-        <template slot-scope="scope">
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row, scope.$index)"
-            >修改</el-button
-          >
-        </template>
-      </el-table-column>
-    </el-table>
-    <!-- </el-form> -->
+                  <el-input
+                    v-else
+                    v-model="val.value"
+                    :disabled="item.disabled"
+                    placeholder="请输入"
+                    type="number"
+                  />
+                </el-form-item>
+                <el-form-item>
+                  <el-button v-if="item.disabled" type="primary" @click="toggleState(groupIndex,index)">修改</el-button>
+                  <el-button v-else type="primary" @click="sendAttr(item,groupIndex,index)">下发</el-button>
+                </el-form-item>
+              </el-form>
+            </el-collapse-item>
+          </el-collapse>
+        </el-tab-pane>
+      </el-tabs>
 
+    </div>
 
     <dialog-template
       :title="title"
-      @close="open = false"
       :visible="open"
       width="500px"
+      @close="open = false"
     >
       <el-form
         ref="form"
+        slot="dialog-center"
         :model="form"
         :rules="rules"
         label-width="100px"
-        slot="dialog-center"
       >
         <el-row>
           <el-col :span="12">
             <el-form-item label="开启告警:" prop="alarmSta">
               <el-switch
-                size="mini"
                 v-model="form.alarmSta"
                 :active-value="1"
                 :inactive-value="0"
                 active-color="#13ce66"
                 inactive-color="#dcdfe6"
+                size="mini"
               >
               </el-switch>
             </el-form-item>
@@ -179,12 +100,12 @@
           <el-col :span="12">
             <el-form-item label="开启预警:" prop="warnSta">
               <el-switch
-                size="mini"
                 v-model="form.warnSta"
                 :active-value="1"
                 :inactive-value="0"
                 active-color="#13ce66"
                 inactive-color="#dcdfe6"
+                size="mini"
               >
               </el-switch>
             </el-form-item>
@@ -246,7 +167,7 @@
 import {
   getDeviceAlarmConfig,
   updateDeviceAlarmConfig,
-  deviceSendAlarmConfig,
+  deviceSendAlarmConfig, getDeviceAlarmConfigList, updateDeviceAlarmConfigList
 } from "@/api/iot/device";
 import DialogTemplate from "@/components/DialogTemplate";
 import ETableInput from '@/components/EUpdateTable/ETableInput'
@@ -314,6 +235,9 @@ export default {
         ],
       },
       ackList: [],
+      activeName:'',
+      groupList:[],
+      groupActive:''
     };
   },
   created() {
@@ -334,6 +258,13 @@ export default {
     }
   },
   methods: {
+    getAttrType(obj){
+      if(obj.key.endsWith('_state')){
+        return 'switch';
+      }else{
+        return 'input';
+      }
+    },
     handleAlarmSta(v) {
       console.log(v)
     },
@@ -624,16 +555,74 @@ export default {
     alarmTypeFormatter(row, column) {
       return this.selectDictLabel(this.alarmParamOption, row.type);
     },
+    //属性配置列表
+    resetAttr(){
+      this.getList();
+    },
+    //下发配置
+    sendAttr(data,index,i){
+      console.log("下发配置",data)
+      updateDeviceAlarmConfigList(data).then((res) => {
+        console.log("res",res)
+        if(res.code === 200){
+          this.msgSuccess(res.msg);
+          this.groupList[index].list[i].disabled = true;
+        }
+
+      });
+    },
+    //切换状态
+    toggleState(index,i){
+      this.groupList[index].list[i].disabled = !this.groupList[index].list[i].disabled;
+    },
     getList() {
       if (!this.deviceKey && this.deviceKey !== "0") {
         return;
       }
       this.loading = true;
-      getDeviceAlarmConfig(this.deviceKey)
+      getDeviceAlarmConfigList(this.deviceKey)
         .then((response) => {
-          this.list = response.data.alarmCfg;
-          this.monthTradingTableHeight = this.list.length >= 6 ? '387' : 'auto'  
-          this.isAck = response.data.isAck === 1 ? true : false;
+          console.log("获取设备功能列表",response)
+          let groupList = [];
+          if(response?.data.length>0){
+            response.data.forEach((item,index)=>{
+              let flag = true;
+              groupList.forEach((val,i)=>{
+                if(val.funcType === item.funcType){
+                  groupList[i].list.push({
+                    ...item,
+                    disabled: true,
+                  });
+                  flag = false;
+                }
+              })
+              if(flag){
+                groupList.push({
+                  funcType: item.funcType,
+                  funcTypeName: item.funcTypeName,
+                  list: [{
+                    ...item,
+                    disabled: true,
+                  }]
+                })
+              }
+            });
+            this.groupList = groupList;
+            this.list = groupList[0].list;
+            this.groupActive = groupList[0].funcType;
+            // this.list = response.data.map(item=>{
+            //   return {
+            //     ...item,
+            //     disabled: true,
+            //   };
+            // });
+          }else{
+            this.groupList = [];
+            this.list = [];
+          }
+
+          // this.monthTradingTableHeight = this.list.length >= 6 ? '387' : 'auto'
+          // this.isAck = response.data.isAck === 1 ? true : false;
           this.loading = false;
         })
         .catch((e) => {
@@ -679,4 +668,41 @@ export default {
     margin: 0;
   }
 }
+.device-attr-box{
+  padding: 0 20px;
+}
+.alarm-list{
+  //border-left:1px solid #666;
+  .el-collapse{
+    border-top: none;
+  }
+  .el-tabs__content{
+    height: auto !important;
+  }
+}
+
+</style>
+
+<style lang="scss" scoped>
+.alarm-list {
+  ::v-deep .el-tabs__header{
+    margin-bottom: 0;
+  }
+  ::v-deep .el-tabs__nav-wrap{
+    //margin-bottom: 0;
+  }
+  ::v-deep .el-tabs__nav-scroll {
+    height: auto !important;
+    padding: 0 !important;
+    background: #fff !important;
+    overflow: visible;
+  }
+  ::v-deep  .el-tabs__content{
+    border-left: 1px solid #dfe4ed;
+    border-right: 1px solid #dfe4ed;
+  }
+  ::v-deep  .el-collapse-item {
+    padding: 0 10px;
+  }
+}
 </style>