feat: 设备告警配置 开放表格编辑 操作

.env.development

@@ -14,11 +14,11 @@ port= 9988
 // 陈志荣 本地
  //target = http://192.168.18.140:8899
 // 黄明 本地
-  target = http://192.168.18.134:8899
+// target = http://192.168.18.134:8899
 //target = http://192.168.18.139:8899
 // target = http://192.168.18.136:8899
 
 // 测试端
 //  target = http://192.168.10.241:32024
 // 开发端
-// target = http://192.168.10.241:30646
+ target = http://192.168.10.241:30646

src/components/EUpdateTable/EFailMessage.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="e-fail-message">
+    <span v-if="message" class="form-item__error">* {{ message }}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "EFailMessage",
+  props: {
+    form: {
+      type: Object,
+      require: true,
+    },
+    val: {
+      type: [String, Number],
+    },
+  },
+  data() {
+    return {
+      message: "",
+    };
+  },
+  watch: {
+    val() {
+      //this.handleVerification();
+    },
+  },
+  methods: {
+    handleVerification() {
+      this.$emit("verification", this.form, (msg) => {
+        this.message = msg;
+        return;
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.e-fail-message {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+  .form-item__error {
+    color: #ff4949;
+    font-size: 12px;
+    line-height: 1;
+    padding-top: 4px;
+  }
+}
+</style>

src/components/EUpdateTable/ETableInput.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="e-table-input">
+    <el-input v-model="form[pops]" @input="handleInput" :disabled="disabled"/>
+    <e-fail-message
+      :val="form[pops]"
+      :form="form"
+      ref="eFailMessage"
+      @verification="handleVerification"
+    ></e-fail-message>
+  </div>
+</template>
+
+<script>
+import EFailMessage from './EFailMessage'
+export default {
+  name: "ETableInput",
+  components: {EFailMessage},
+  props: {
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    form: { 
+        type: Object,
+        require: true
+    },
+    pops: {
+      type: String,
+      require: true,
+    },
+  },
+  watch: {
+    form: {
+        deep: true,
+        handler: function () {
+            this.verificationEvent();
+        }
+    }
+  },
+  methods: {
+    verificationEvent() {
+        this.$refs.eFailMessage?.handleVerification()
+    },
+    handleInput(e) {
+        this.$forceUpdate()
+    },
+    handleVerification(e, callback) {
+        this.$emit('handleVerification', e, callback);
+    }
+  }
+};
+</script>
+
+<style></style>

src/views/profile/DeviceAlarmConfig/DeviceAlarmConfig.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="device-alarm-config">
-    <!-- <el-row style="margin-bottom: 10px">
+    <el-row style="margin-bottom: 10px">
       <el-col :span="1.5">
         <el-button
           type="success"
@@ -8,16 +8,31 @@
           size="mini"
           :disabled="disabledAck"
           @click="handleSendAck"
-          >同步</el-button
+          >同步下发</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-col>
-    </el-row> -->
+    </el-row>
     <el-table
       border
       :loading="loading"
       :data="list"
       class="alarm-table"
-      :height="list.length >= 3 ? '202' : ''"
+      :height="monthTradingTableHeight"
       :highlight-pageNum-row="true"
     >
       <el-table-column
@@ -51,6 +66,7 @@
             active-color="#13ce66"
             inactive-color="#dcdfe6"
             class="switch-wrap"
+            @change="handleAlarmSta(scope.row.alarmSta)"
           />
         </template>
       </el-table-column>
@@ -75,18 +91,31 @@
         prop="alarmValue"
         label="告警值"
         align="center"
-      ></el-table-column>
+      >
+      <template slot-scope="scope">
+        <e-table-input  @handleVerification="alarmValueTableCallback" :disabled="!scope.row.alarmSta" :form="scope.row" pops="alarmValue" />
+      </template>
+    
+    </el-table-column>
 
       <el-table-column
         prop="warnValueMin"
-        label="最小告警值"
+        label="最小预警值"
         align="center"
-      ></el-table-column>
+      >
+      <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="最大告警值"
+        label="最大预警值"
         align="center"
-      ></el-table-column>
+      >
+      <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
         label="操作"
         align="center"
@@ -198,6 +227,7 @@ import {
   deviceSendAlarmConfig,
 } from "@/api/iot/device";
 import DialogTemplate from "@/components/DialogTemplate";
+import ETableInput from '@/components/EUpdateTable/ETableInput'
 export default {
   name: "DeviceAlarmConfig",
   props: {
@@ -212,13 +242,14 @@ export default {
   },
   components: {
     DialogTemplate,
+    ETableInput
   },
   data() {
     return {
       list: [],
       alarmParamOption: [],
       loading: false,
-      updateGenTable: false,
+      updateGenTable: true,
       title: "修改",
       open: false,
       form: {},
@@ -226,6 +257,7 @@ export default {
       isAck: false,
       disabledAck: false,
       uvpList: ["ul_cfg"],
+      monthTradingTableHeight: 'auto',
       rules: {
         warnValueMin: [
           {
@@ -263,6 +295,113 @@ export default {
     },
   },
   methods: {
+    handleAlarmSta(v) {
+      console.log(v)
+    },
+
+    alarmValueTableCallback(row, callback) {
+      console.log(row)
+      if (!row.alarmSta) {
+        callback();
+        return
+      }
+
+      if(!row.alarmValue && row.alarmValue !== 0) {
+        callback('告警值不能为空！')
+        return
+      }
+
+      const isExp =
+        /^((\-)*([1-9][0-9]*)|(\-)*(([0]\.\d{1,}|[1-9][0-9]*\.\d{1,})))$/;
+
+      if (row.alarmValue && !isExp.test(row.alarmValue)) {
+        callback("只可以输入数字类型！");
+        return
+      }
+
+      if (!row.warnSta) {
+        callback();
+        return
+      }
+
+      if (this.uvpList.indexOf(row.type) >= 0) {
+        if (
+          (row.warnValueMin || row.warnValueMin === 0) &&
+          +row.warnValueMin < +row.alarmValue
+        ) {
+          callback("需要小于最小预警值！");
+          return
+        }
+      } else {
+        if (
+          (row.warnValueMax || row.warnValueMax === 0) &&
+          +row.warnValueMax > +row.alarmValue
+        ) {
+          callback("需要大于最大预警值！");
+          return
+        }
+      }
+      callback();
+    },
+
+    warnValueMaxTableCallback(row, callback) {
+      if (!row.warnSta) {
+        callback();
+        return
+      }
+      
+      if (!row.warnValueMax && row.warnValueMax !== 0) {
+        callback();
+        return
+      }
+
+      const isExp =
+        /^((\-)*([1-9][0-9]*)|(\-)*(([0]\.\d{1,}|[1-9][0-9]*\.\d{1,})))$/;
+
+      if (row.warnValueMax && !isExp.test(row.warnValueMax)) {
+        callback("只可以输入数字类型！");
+        return
+      }
+
+      if (
+        (row.warnValueMin || row.warnValueMin === 0) &&
+        +row.warnValueMax < +row.warnValueMin
+      ) {
+        callback("需要大于最小预警值！");
+        return
+      }
+      callback();
+    },
+
+    warnValueMinTableCallback(row, callback) {
+      if (!row.warnSta) {
+        callback();
+        return 
+      }
+
+      if (!row.warnValueMin && row.warnValueMin !== 0) {
+        callback();
+        return
+      }
+
+      const isExp =
+        /^((\-)*([1-9][0-9]*)|(\-)*(([0]\.\d{1,}|[1-9][0-9]*\.\d{1,})))$/;
+      if (row.warnValueMin && !isExp.test(row.warnValueMin)) {
+        callback("只可以输入数字类型！");
+        return 
+      }
+
+      if (
+        (row.warnValueMax || row.warnValueMax === 0) &&
+        +row.warnValueMin > +row.warnValueMax
+      ) {
+        callback("需要小于最大预警值！");
+        return
+      }
+
+      callback();
+    },
+
     alarmValue(rule, value, callback) {
       if (!this.form.alarmSta) {
         callback();
@@ -341,6 +480,7 @@ export default {
     },
     handleSendAck() {
 			var deviceId = this.deviceId;
+      var list = [...this.list];
       this.$prompt("请输入登录密码", "提示", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
@@ -349,7 +489,9 @@ export default {
         inputErrorMessage: "登录密码不能为空",
       }).then(({ value }) => {
         let params = {
-          data: {},
+          data: {
+            params: list,
+          },
           deviceId: deviceId,
           verifyKey: value,
         };
@@ -374,15 +516,17 @@ export default {
           const list = this.list.map((v) => {
             return v.type === this.form.type ? Object.assign(v, this.form) : v;
           });
-          updateDeviceAlarmConfig({
-            devKey: this.deviceKey,
-            params: [...list],
-          }).then((res) => {
-            this.getList();
-            // this.disabledAck = true;
           this.open = false;
           this.$forceUpdate();
-          });
+          // 暂时不保存-- 使用统一保存下发方式
+          // updateDeviceAlarmConfig({
+          //   devKey: this.deviceKey,
+          //   params: [...list],
+          // }).then((res) => {
+          //   this.getList();
+          //   this.open = false;
+          //   this.$forceUpdate();
+          // });
         }
       });
     },
@@ -397,7 +541,6 @@ export default {
       return this.selectDictLabel(this.alarmParamOption, row.type);
     },
     getList() {
-      console.log(this.deviceKey);
       if (!this.deviceKey && this.deviceKey !== "0") {
         return;
       }
@@ -405,6 +548,7 @@ export default {
       getDeviceAlarmConfig(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;
           this.loading = false;
         })

src/views/profile/DeviceDetailsView/info.vue

@@ -63,7 +63,11 @@
             <span class="centent secret" :title="infoData.devicePassword">{{
               infoData.devicePassword
             }}</span>
-            <el-button type="text" size="small" v-if="isTenant === false" @click.stop="upldatePassword"
+            <el-button
+              type="text"
+              size="small"
+              v-if="isTenant === false"
+              @click.stop="upldatePassword"
               >修改密码</el-button
             >
             <div v-else>
@@ -195,6 +199,61 @@
         </div>
       </div>
     </div>
+
+    <div
+      class="group-list-info"
+      style="margin-top: 15px"
+      v-if="infoData.deviceType === 'MINIATURE_BREAKER'"
+    >
+      <div class="top">
+        <div class="top-label">
+          <svg-icon
+            icon-class="A_product1"
+            style="margin-right: 2px; height: 20px; width: 20px"
+          />告警配置
+        </div>
+      </div>
+    </div>
+
+    <div
+      class="group-list-table"
+      style="border: 0"
+      v-if="infoData.deviceType === 'MINIATURE_BREAKER'"
+    >
+      <device-alarm-config
+        v-if="infoData.deviceType === 'MINIATURE_BREAKER'"
+        :deviceId="infoData.deviceId"
+        :deviceKey="infoData.deviceKey"
+      />
+    </div>
+
+    <div
+      class="group-list-info"
+      style="margin-top: 15px"
+      v-if="infoData.deviceType === 'MINIATURE_BREAKER'"
+    >
+      <div class="top">
+        <div class="top-label">
+          <svg-icon
+            icon-class="A_product1"
+            style="margin-right: 2px; height: 20px; width: 20px"
+          />定时器
+        </div>
+      </div>
+    </div>
+
+    <div
+      class="group-list-table"
+      style="border: 0"
+      v-if="infoData.deviceType === 'MINIATURE_BREAKER'"
+    >
+      <device-timing-config
+        v-if="infoData.deviceType === 'MINIATURE_BREAKER'"
+        :deviceId="infoData.deviceId"
+        :deviceKey="infoData.deviceKey"
+      />
+    </div>
+
     <!-- 添加或修改设备对话框 -->
     <el-dialog
       class="eldialog-wrap"
@@ -224,9 +283,12 @@
 </template>
 <script>
 import { updateDevice, resetPssword } from "@/api/iot/device";
+import DeviceTimingConfig from "@/views/profile/DeviceTimingConfig/DeviceTimingConfig";
+import DeviceAlarmConfig from "@/views/profile/DeviceAlarmConfig/DeviceAlarmConfig";
 export default {
   name: "DeviceInfo",
   props: ["infoData", "isTenant"],
+  components: { DeviceTimingConfig, DeviceAlarmConfig },
   data() {
     const validatorNull = (rule, value, callback) => {
       callback();

src/views/profile/DeviceTimingConfig/DeviceTimingConfig.vue

@@ -9,13 +9,23 @@
           @click="handleAdd"
           >新增</el-button
         >
-        <!-- <el-button
+        <el-button
           type="success"
           icon="el-icon-refresh"
           size="mini"
           @click="handleSendAck"
-          >同步</el-button
+          >同步下发</el-button
-        > -->
+        >
+        <el-popover
+          placement="top-start"
+          title="同步下发"
+          width="350"
+          trigger="hover">
+          <div>
+            <p>设备定时需要先下发到指定设备，设备配置完成后同步到云端平台</p>
+          </div>
+          <i class="el-icon-question" slot="reference" style="margin-left: 10px; font-size: 20px;"></i>
+        </el-popover>
       </el-col>
     </el-row>
     <el-table
@@ -23,7 +33,7 @@
       :loading="loading"
       :data="list"
       class="alarm-table"
-      :height="list.length >= 3 ? '202' : ''"
+      :height="monthTradingTableHeight"
       :highlight-pageNum-row="true"
     >
       <el-table-column
@@ -54,8 +64,8 @@
           <el-switch
             size="mini"
             v-model="scope.row.sw"
-            active-text="开启"
+            active-text="开闸"
-            inactive-text="关闭"
+            inactive-text="合闸"
             :disabled="!updateGenTable"
             :active-value="1"
             :inactive-value="0"
@@ -153,6 +163,8 @@
             type="datetime"
             placeholder="选择日期时间"
             default-time="12:00:00"
+            :clearable="false"
+            size="small"
           >
           </el-date-picker>
         </el-form-item>
@@ -161,7 +173,7 @@
           <el-select
             v-model="form.mode"
             placeholder="请选择周期"
-            clearable
+            :clearable="false"
             size="small"
           >
             <el-option
@@ -210,37 +222,24 @@ export default {
       list: [],
       alarmParamOption: [],
       loading: false,
-      updateGenTable: false,
+      updateGenTable: true,
       title: "修改",
       open: false,
       form: {},
       pointTime: "",
       updateIndex: null,
+      monthTradingTableHeight: 'auto',
       isAck: false,
       disabledAck: false,
       uvpList: ["ul_cfg"],
       rules: {
-        warnValueMin: [
+        point: [
           {
             required: true,
             validator: this.warnValueMin,
             trigger: "blur",
           },
         ],
-        alarmValue: [
-          {
-            required: true,
-            validator: this.alarmValue,
-            trigger: "blur",
-          },
-        ],
-        warnValueMax: [
-          {
-            required: true,
-            validator: this.warnValueMax,
-            trigger: "blur",
-          },
-        ],
       },
     };
   },
@@ -256,6 +255,12 @@ export default {
     this.getList();
   },
   methods: {
+    warnValueMin(rule, value, callback) {
+      if (!this.pointTime) {
+        callback(new Error("开始时间不能为空！"));
+      }
+      callback();
+    },
     /** 删除按钮操作 */
     handleDelete(row, index) {
       this.$confirm("是否删除该数据", "警告", {
@@ -267,12 +272,14 @@ export default {
         list = list.map((v, idx) => {
             return Object.assign(v, {num: ++idx})
         })
-        this.sendSumbit(list);
+        // this.sendSumbit(list);
+        this.list = list;
         this.msgSuccess("删除成功");
       });
     },
     handleSendAck() {
       var deviceId = this.deviceId;
+      var list = [...this.list];
       this.$prompt("请输入登录密码", "提示", {
         confirmButtonText: "确定",
         cancelButtonText: "取消",
@@ -281,7 +288,9 @@ export default {
         inputErrorMessage: "登录密码不能为空",
       }).then(({ value }) => {
         let params = {
-          data: {},
+          data: {
+            params: list
+          },
           deviceId: deviceId,
           verifyKey: value,
         };
@@ -328,7 +337,8 @@ export default {
             list = list.concat([this.form]);
           }
 
-          this.sendSumbit(list);
+          this.open = false;
+          this.$forceUpdate();
         }
       });
     },
@@ -368,6 +378,7 @@ export default {
       getDeviceTimingConfig(this.deviceKey)
         .then((response) => {
           this.list = response.data;
+          this.monthTradingTableHeight = this.list.length >= 5 ? '290px' : 'auto'  
           this.loading = false;
         })
         .catch((e) => {