设备保护

src/views/ems/site/sbbh/AddDevice.vue

@@ -59,7 +59,7 @@
         ></el-checkbox>
       </el-form-item>
       <el-form-item label="告警等级" prop="faultLevel">
-        <el-radio-group v-model="formData.faultLevel" :style="{ width: '50%' }">
+        <el-radio-group v-model="formData.faultLevel" :style="{ width: '50%' }" :disabled="mode === 'edit'">
           <el-radio :label="1">等级1</el-radio>
           <el-radio :label="2">等级2</el-radio>
           <el-radio :label="3">等级3</el-radio>
@@ -69,13 +69,14 @@
         <div class="item-title">
           保护前提:
           <div style="display: inline-block; margin-left: 20px">
-            延时：<el-input
-              v-model="formData.faultDelaySeconds"
-              placeholder="请输入"
-              clearable
-              :style="{ width: '200px', display: 'inline-block' }"
-            >
-            </el-input>
+            <el-form-item label="延时" prop="faultDelaySeconds">
+              <el-input
+                  v-model="formData.faultDelaySeconds"
+                  placeholder="请输入"
+                  clearable
+                  :style="{ width: '200px', display: 'inline-block' }"
+              ></el-input>
+            </el-form-item>
           </div>
         </div>
         <div>
@@ -109,8 +110,8 @@
               <div>
                 <el-cascader
                     v-model="item.deviceId"
-                    :show-all-levels="false"
                     :options="childOptions"
+                    :show-all-levels="false"
                     @change="(v)=>handleChange(v,'protectionSettings',index)"
                 ></el-cascader>
               </div>
@@ -159,7 +160,7 @@
                 </el-input>
               </div>
               <div>
-                <el-select v-model="item.relation" placeholder="请选择">
+                <el-select v-model="item.relationNext" placeholder="请选择">
                   <el-option
                     v-for="(value, key) in relationWithPoint"
                     :key="key + 'relation'"
@@ -170,7 +171,7 @@
               </div>
               <div>
                 <el-button
-                  @click.native.prevent="deleteRow(index)"
+                  @click.native.prevent="deleteRow(index,'protectionSettings')"
                   type="warning"
                   size="mini"
                 >
@@ -185,13 +186,14 @@
         <div class="item-title">
           保护方案:
           <div style="display: inline-block; margin-left: 20px">
-            延时：<el-input
-              v-model="formData.faultDelaySeconds"
-              placeholder="请输入"
-              clearable
-              :style="{ width: '200px', display: 'inline-block' }"
-            >
-            </el-input>
+            <el-form-item label="延时" prop="releaseDelaySeconds">
+              <el-input
+                  v-model="formData.releaseDelaySeconds"
+                  placeholder="请输入"
+                  clearable
+                  :style="{ width: '200px', display: 'inline-block' }"
+              ></el-input>
+            </el-form-item>
           </div>
         </div>
         <div>
@@ -246,7 +248,7 @@
               </div>
               <div>
                 <el-button
-                  @click.native.prevent="deleteRow(index)"
+                  @click.native.prevent="deleteRow(index,'protectionPlan')"
                   type="warning"
                   size="mini"
                 >
@@ -269,24 +271,13 @@ import { mapState } from "vuex";
 import { getAllSites } from "@/api/ems/zddt";
 import { validText } from "@/utils/validate";
 import {
-  getDeviceDetailInfo,
-  updateDevice,
-  addDevice,
-  getParentDeviceId,
+  updateProtectPlan,
+  addProtectPlan,
+  getProtectPlan,
   getDeviceListBySiteAndCategory
 } from "@/api/ems/site";
 import { getAllDeviceCategory, pointFuzzyQuery } from "@/api/ems/search";
 export default {
-  props: {
-    mode: {
-      type: String,
-      default: "add",
-    },
-    id: {
-      type: String | Number,
-      required: false,
-    },
-  },
   data() {
     const validateText = (rule, value, callback) => {
       if (value !== "" && !validText(value)) {
@@ -295,14 +286,8 @@ export default {
         callback();
       }
     };
-    const validateDeviceId = (rule, value, callback) => {
-      if (value !== "" && !/^[a-zA-Z0-9]+$/.test(value)) {
-        callback(new Error("只能输入英文和数字!"));
-      } else {
-        callback();
-      }
-    };
     return {
+      mode:'',
       loading: 0,
       childOptions:[],
       protectionSettings: [],
@@ -337,6 +322,14 @@ export default {
           { required: true, message: "请输入设备描述", trigger: "blur" },
           { validator: validateText, trigger: "blur" },
         ],
+        faultDelaySeconds: [
+          { required: true, message: "请输入保护前提延时", trigger: "blur" },
+          { validator: validateText, trigger: "blur" },
+        ],
+        releaseDelaySeconds: [
+          { required: true, message: "请输入保护方案延时", trigger: "blur" },
+          { validator: validateText, trigger: "blur" },
+        ],
       },
     };
   },
@@ -350,73 +343,81 @@ export default {
       relationWithPoint: (state) => state?.ems?.relationWithPoint || {},
     }),
   },
-  watch: {
-    dialogTableVisible: {
-      handler(newVal) {
-        //打开弹窗
-        if (newVal) {
-          this.getDeviceCategoryList();
-          this.getZdList();
-        }
-      },
-      immediate: true,
-    },
-    id: {
-      handler(newVal) {
-        if ((newVal || newVal === 0) && this.mode !== "add") {
-          this.loading += 1;
-          // getDeviceDetailInfo(newVal)
-          //   .then((response) => {
-          //     this.formData = JSON.parse(JSON.stringify(response?.data || {}));
-          //     if (
-          //       this.dccDeviceCategoryList.includes(
-          //         this.formData.deviceCategory
-          //       )
-          //     ) {
-          //       this.getParentDeviceList(true);
-          //     }
-          //   })
-          //   .finally(() => {
-          //     this.loading -= 1;
-          //   });
-        }
-      },
-      immediate: true,
-    },
-  },
   methods: {
+    open(id,siteId){
+      this.dialogTableVisible=true
+      this.getZdList();
+      this.getDeviceCategoryList().then(()=>{
+        if(id && siteId) {
+          this.getDeviceList('PCS',siteId)
+          this.getDeviceList('STACK',siteId)
+        }
+      });
+      if(id){
+        this.formData.id = id
+        this.mode = 'edit'
+        getProtectPlan(id).then(response => {
+          const data = response?.data || {}
+          this.formData = {
+            id,
+            siteId: data?.siteId || '', //站点ID
+            faultName: data?.faultName || '', //设备保护名称
+            isAlert: data?.isAlert || 0, //是否告警
+            faultLevel: data?.faultLevel || 1, //告警等级
+            faultDelaySeconds: data?.faultDelaySeconds || "", //故障延时
+            releaseDelaySeconds: data?.releaseDelaySeconds ||"", //释放延时
+            description: data?.description ||'',//方案描述
+          }
+          const plan =(JSON.parse(data?.protectionPlan || [])).map(item=>{
+            return Object.assign({},item,{
+              deviceId:[item.deviceCategory || '',item.deviceId || ''],
+            })
+          })
+          const settings =(JSON.parse(data?.protectionSettings || [])).map(item=>{
+            return Object.assign({},item,{
+              deviceId:[item.deviceCategory || '',item.deviceId || ''],
+            })
+          })
+          this.$nextTick(()=>{
+            this.protectionPlan.splice(0,0,...plan)
+            this.protectionSettings.splice(0,0,...settings)
+          })
+          console.log('获取设备保护详情并初始化',this.formData,this.protectionPlan,this.protectionSettings)
+        })
+      }else{
+        this.mode = 'add'
+      }
+    },
     // 新增设备保护前提、设备保护方案
     addRow(type) {
-      if (type === "protectionSettings") {
-        this.protectionSettings.push({
-          deviceId:'',//设备ID
-          deviceCategory: "",//设备类型 英文
-          categoryName:'',//设备类型名称 中文
-          point: "",//点位 英文
-          pointName:"",//点位 中文
-          faultValue: "",//故障值
-          releaseValue: "",//释放值
-          faultOperator: "",//故障值比较关系
-          releaseOperator: "",//释放值比较关系
-          relationNext: "",//与下一个点位的关系
-        });
-      } else {
-        this.protectionPlan.push({
-          deviceId:"",
-          deviceCategory: "",//设备类型 英文
-          categoryName:'',//设备类型名称 中文
-          point: "",
-          pointName:"",
-          value: "",//设置值
-        });
+      const item = type === 'protectionSettings' ? {
+        deviceId:[],//设备ID
+        deviceCategory: "",//设备类型 英文
+        categoryName:'',//设备类型名称 中文
+        point: "",//点位 英文
+        pointName:"",//点位 中文
+        faultValue: "",//故障值
+        releaseValue: "",//释放值
+        faultOperator: "",//故障值比较关系
+        releaseOperator: "",//释放值比较关系
+        relationNext: "",//与下一个点位的关系
+      } : {
+        deviceId:[],
+        deviceCategory: "",//设备类型 英文
+        categoryName:'',//设备类型名称 中文
+        point: "",
+        pointName:"",
+        value: "",//设置值
       }
+      // this.$set(this[type], this[type].length, item);
+      this[type].splice(this[type].length,0,item)
+      console.log('新增设备保护前提、方案',type,this[type])
     },
     // 删除设备保护前提、设备保护方案
     deleteRow(index, type) {
       this[type].splice(index, 1);
     },
 
-
     // 设备保护前提、设备保护方案点位选择
     querySearchAsync(query, cb, index, type) {
       console.log("查询数据", query, index);
@@ -442,24 +443,36 @@ export default {
     },
     // 点位选择
     handleSelect(data, index, type) {
-      this[type][index].point = data.value;
-      this[type][index].pointName = data.value;
+      console.log('选择点位',data,index,type)
+      // this.$set(this[type], index, Object.assign({},this[type][index],{
+      //   point:data.value,
+      //   pointName:data.value,
+      // }));
+      let line = Object.assign({},this[type][index],{
+        point:data.value,
+        pointName:data.value,
+      })
+      this[type].splice(index,1,line);
+      console.log('选择点位配置完成',this[type][index])
     },
 
     // 获取设备类别-不区分站点
     getDeviceCategoryList() {
       this.loading += 1;
-      getAllDeviceCategory()
+      return getAllDeviceCategory()
           .then((response) => {
             const data = (response?.data || []).filter(item => ['PCS','STACK'].includes(item.code));
-            this.childOptions=[]
+            // this.childOptions=[]
+            this.$set(this,'childOptions',[])
+            let arr =[]
             data.forEach((item) => {
-              this.childOptions.push({
+              arr.push({
                 value: item.code,
                 label: item.name,
                 children:[]
               })
             })
+            this.childOptions.splice(0,0,...arr)
             console.log('获取设备类型',data,this.childOptions)
           })
           .finally(() => {
@@ -467,34 +480,48 @@ export default {
           });
     },
     //获取设备列表-区分站点
-    getDeviceList(deviceCategory){
+    getDeviceList(deviceCategory,siteId){
       this.$nextTick(()=>{
-        getDeviceListBySiteAndCategory({siteId:this.formData.siteId,deviceCategory}).then((response) => {
-          const data = response?.data || []
-          console.log('设置设备列表',this.childOptions)
-          this.childOptions.find(item=>item.value === deviceCategory).children=data.map(item => {
+        getDeviceListBySiteAndCategory({siteId:siteId || this.formData.siteId,deviceCategory}).then((response) => {
+          const data = (response?.data || []).map(item => {
             return {
               label: item.deviceName,
               value: item.id,
             }
           })
+          const index = this.childOptions.findIndex(item=>item.value === deviceCategory)
+          if(index>-1){
+            const length = this.childOptions[index].children.length
+            this.childOptions[index].children.splice(0,length,...data)
+          }
         })
       })
     },
     //更新站点下面的设备列表
     updateSiteDeviceList(){
       this.childOptions.forEach(item => {
-        item.children = []
+        const length = item.children.length
+        item.children.splice(0,length)
       })
       this.getDeviceList('PCS')
       this.getDeviceList('STACK')
     },
     //选中设备类型、设备
-    handleChange([deviceCategory,deviceId],type,index){
-      this[type][index].deviceId = deviceId;
-      this[type][index].deviceCategory = deviceCategory;
-      this[type][index].categoryName = this.childOptions.find(i=>i.value === deviceCategory).label;
-      console.log('设置选中设备类型、设备',this[type][index])
+    handleChange(data,type,index){
+      const deviceCategory = data[0],deviceId=data[1]
+      console.log('设置选中设备类型、设备',deviceCategory,deviceId,type,index)
+      const item = Object.assign({},this[type][index],{
+        deviceId:data,
+        deviceCategory,
+        categoryName : this.childOptions.find(i=>i.value === deviceCategory).label,
+        pointName:'',
+        point:''
+      })
+      this.$nextTick(()=>{
+        // this.$set(this[type], index, item);
+        this[type].splice(index,1,item);
+      })
+      console.log('设置选中设备类型、设备配置完成',this[type][index])
     },
 
     //获取站点列表
@@ -514,27 +541,64 @@ export default {
     changeType() {
       //获取当前站点下的pcs和bms
       this.updateSiteDeviceList()
-      this.protectionSettings.forEach((item) => {
-        item.point = ""
-        item.pointName = ""
-        item.deviceId=''
-        item.categoryName=''
-        item.deviceCategory=''
-      });
-      this.protectionPlan.forEach((item) => {
-        item.point = ""
-        item.pointName = ""
-        item.deviceId=''
-        item.categoryName=''
-        item.deviceCategory=''
-      });
+      if(this.protectionSettings.length>0){
+        const list =this.protectionSettings
+        list.forEach((item) => {
+          item.point = ""
+          item.pointName = ""
+          item.deviceId=[]
+          item.categoryName=''
+          item.deviceCategory=''
+        });
+        // this.$set(this,'protectionSettings',list)
+        this.$nextTick(()=>{
+          this.protectionSettings.splice(0,this.protectionSettings.length,...list)
+        })
+      }
+      if(this.protectionPlan.length>0){
+        const list =this.protectionPlan
+        list.forEach((item) => {
+          item.point = ""
+          item.pointName = ""
+          item.deviceId=[]
+          item.categoryName=''
+          item.deviceCategory=''
+        });
+        // this.$set(this,'protectionPlan',list)
+        this.$nextTick(()=>{
+          this.protectionPlan.splice(0,this.protectionPlan.length,...list)
+        })
+      }
     },
 
 
     saveDialog() {
+      function getToastMsg(name,type,index){
+        return {
+          protectionSettings:{
+            deviceId:`请选择保护前提第${index}行的设备`,//设备ID
+            deviceCategory: `请选择保护前提第${index}行的设备类型`,//设备类型 英文
+            categoryName:`请选择保护前提第${index}行的设备类型`,//设备类型名称 中文
+            point: `请选择保护前提第${index}行的点位`,//点位 英文
+            pointName:`请选择保护前提第${index}行的点位`,//点位 中文
+            faultValue: `请输入保护前提第${index}行的故障值`,//故障值
+            releaseValue: `请输入保护前提第${index}行的释放值`,//释放值
+            faultOperator: `请选择保护前提第${index}行的故障值比较关系`,//故障值比较关系
+            releaseOperator: `请选择保护前提第${index}行的释放值比较关系`,//释放值比较关系
+            relationNext: `请选择保护前提第${index}行与下一个点位的关系`,//与下一个点位的关系
+          },
+          protectionPlan :{
+            deviceId:`请选择保护方案第${index}行的设备`,
+            deviceCategory: `请选择保护方案第${index}行的设备类型`,//设备类型 英文
+            categoryName:`请选择保护方案第${index}行的设备类型`,//设备类型名称 中文
+            point: `请选择保护方案第${index}行的点位`,
+            pointName:`请选择保护方案第${index}行的点位`,
+            value: `请输入保护方案第${index}行的故障值`,//设置值
+          }
+        }[type][name]
+      }
       this.$refs.addTempForm.validate((valid) => {
         if (!valid) return;
-        this.loading += 1;
         const {
           id = "", //设备唯一标识
           siteId = "", //站点ID
@@ -543,18 +607,79 @@ export default {
           faultLevel = 1, //告警等级
           faultDelaySeconds = "", //故障延时
           releaseDelaySeconds = "", //释放延时
+          description="",//方案描述
         } = this.formData;
-        if (this.mode === "add") {
-          addDevice({
-            siteId,
-            faultName,
-            isAlert,
-            faultLevel,
-            faultDelaySeconds,
-            releaseDelaySeconds,
-            protectionSettings,
-            protectionPlan,
+        const {protectionSettings,protectionPlan} = this
+        let protectionSettingsValidateStatus= true , protectionPlanValidateStatus= true
+        for(let i = 0;i<protectionSettings.length;i++){
+          let valueMap = Object.entries(protectionSettings[i]);
+          for(let inner = 0;inner < valueMap.length;inner++){
+            const key =valueMap[inner][0],value =valueMap[inner][1]
+            if(key === 'relationNext'){
+              if(protectionSettings[i+1] && !value){//有下一个点位
+                this.$message.error(getToastMsg(key,'protectionSettings',i+1))
+                protectionSettingsValidateStatus=false
+                break
+              }
+            }else{
+              if(![0,'0'].includes(value) && !value){
+                this.$message.error(getToastMsg(key,'protectionSettings',i+1))
+                protectionSettingsValidateStatus=false
+                break
+              }
+            }
+          }
+          if(!protectionSettingsValidateStatus) break
+        }
+
+        for(let i = 0;i<protectionPlan.length;i++){
+          let valueMap = Object.entries(protectionPlan[i]);
+          for(let inner = 0;inner < valueMap.length;inner++){
+            const key =valueMap[inner][0],value =valueMap[inner][1]
+            if(key === 'relationNext'){
+              if(protectionPlan[i+1] && !value){//有下一个点位
+                this.$message.error(getToastMsg(key,'protectionPlan',i+1))
+                protectionPlanValidateStatus=false
+                break
+              }else{
+                // protectionPlan[i][key] = ''//清空选择的关系
+              }
+            }else{
+              if(![0,'0'].includes(value) && !value){
+                this.$message.error(getToastMsg(key,'protectionPlan',i+1))
+                protectionPlanValidateStatus=false
+                break
+              }
+            }
+          }
+          if(!protectionPlanValidateStatus) break
+        }
+
+        if(!protectionSettingsValidateStatus || !protectionPlanValidateStatus) return
+        const settings = protectionSettings.map(item=>{
+          return Object.assign({},item,{
+            deviceId:item.deviceId[1],
           })
+        })
+        const plan = protectionPlan.map(item=>{
+          return Object.assign({},item,{
+            deviceId:item.deviceId[1],
+          })
+        })
+        this.loading += 1;
+        const params= {
+          siteId,
+          faultName,
+          isAlert,
+          faultLevel,
+          faultDelaySeconds,
+          releaseDelaySeconds,
+          description,
+          protectionSettings:JSON.stringify(settings),
+          protectionPlan:JSON.stringify(plan),
+        }
+        if (this.mode === "add") {
+          addProtectPlan(params)
             .then((response) => {
               if (response.code === 200) {
                 //新增成功
@@ -567,17 +692,8 @@ export default {
               this.loading -= 1;
             });
         } else {
-          updateDevice({
-            id,
-            siteId,
-            faultName,
-            isAlert,
-            faultLevel,
-            faultDelaySeconds,
-            releaseDelaySeconds,
-            protectionSettings,
-            protectionPlan,
-          })
+          params.id = id
+          updateProtectPlan(params)
             .then((response) => {
               if (response.code === 200) {
                 //新增成功
@@ -595,19 +711,13 @@ export default {
     closeDialog() {
       this.$emit("clear");
       // 清空所有数据
-      this.formData = {
-        id: "", //设备唯一标识
-        siteId: "", //站点ID
-        faultName: "", //设备保护名称
-        isAlert: 0, //是否告警
-        faultLevel: 1, //告警等级
-        faultDelaySeconds: "", //故障延时
-        releaseDelaySeconds: "", //释放延时
-      };
       for(let key in this.formData) {
         this.formData[key] = key === 'isAlert' ? 0 : key === 'faultLevel' ? 1 : ''
       }
       this.$refs.addTempForm.resetFields();
+      this.$set(this,'protectionSettings',[])
+      this.$set(this,'protectionPlan',[])
+      this.$set(this,'childOptions',[])
       this.dialogTableVisible = false;
     },
   },