From f3fda19c64af77d747740dfa55393ab103103879 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=99=BD=E8=8F=9C?=
 <43331987+JiaLiBai@users.noreply.github.com>
Date: Fri, 19 Dec 2025 21:49:19 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=9D=E6=8A=A4=E6=96=B9=E6=A1=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/ems/site/sbbh/AddDevice.vue | 575 ++++++++++++++------------
 1 file changed, 312 insertions(+), 263 deletions(-)

diff --git a/src/views/ems/site/sbbh/AddDevice.vue b/src/views/ems/site/sbbh/AddDevice.vue
index ff48ccc..15e9453 100644
--- a/src/views/ems/site/sbbh/AddDevice.vue
+++ b/src/views/ems/site/sbbh/AddDevice.vue
@@ -1,42 +1,42 @@
 <template>
   <el-dialog
-    v-loading="loading"
-    width="90%"
-    :visible.sync="dialogTableVisible"
-    class="ems-dialog"
-    title="保护方案"
-    :close-on-click-modal="false"
-    :show-close="false"
+      v-loading="loading"
+      width="90%"
+      :visible.sync="dialogTableVisible"
+      class="ems-dialog"
+      title="保护方案"
+      :close-on-click-modal="false"
+      :show-close="false"
   >
     <el-form
-      v-loading="loading > 0"
-      ref="addTempForm"
-      :model="formData"
-      :rules="rules"
-      size="medium"
-      label-width="140px"
+        v-loading="loading > 0"
+        ref="addTempForm"
+        :model="formData"
+        :rules="rules"
+        size="medium"
+        label-width="140px"
     >
       <el-form-item label="站点" prop="siteId">
         <el-select
-          v-model="formData.siteId"
-          placeholder="请选择"
-          :style="{ width: '50%' }"
-          @change="changeType"
+            v-model="formData.siteId"
+            placeholder="请选择"
+            :style="{ width: '50%' }"
+            @change="changeType"
         >
           <el-option
-            :label="item.siteName"
-            :value="item.siteId"
-            v-for="(item, index) in siteList"
-            :key="index + 'siteOptions'"
+              :label="item.siteName"
+              :value="item.siteId"
+              v-for="(item, index) in siteList"
+              :key="index + 'siteOptions'"
           ></el-option>
         </el-select>
       </el-form-item>
       <el-form-item label="设备保护名称" prop="faultName">
         <el-input
-          v-model="formData.faultName"
-          placeholder="请输入"
-          clearable
-          :style="{ width: '50%' }"
+            v-model="formData.faultName"
+            placeholder="请输入"
+            clearable
+            :style="{ width: '50%' }"
         >
         </el-input>
       </el-form-item>
@@ -53,9 +53,9 @@
       </el-form-item>
       <el-form-item label="是否告警" prop="isAlert">
         <el-checkbox
-          v-model="formData.isAlert"
-          :true-label="1"
-          :false-label="0"
+            v-model="formData.isAlert"
+            :true-label="1"
+            :false-label="0"
         ></el-checkbox>
       </el-form-item>
       <el-form-item label="告警等级" prop="faultLevel">
@@ -81,11 +81,11 @@
         </div>
         <div>
           <el-button
-            @click.native.prevent="addRow('protectionSettings')"
-            block
-            type="primary"
-            size="mini"
-            style="margin-bottom: 20px"
+              @click.native.prevent="addRow('protectionSettings')"
+              block
+              type="primary"
+              size="mini"
+              style="margin-bottom: 20px"
           >
             新增保护前提
           </el-button>
@@ -103,38 +103,40 @@
               <div>操作</div>
             </div>
             <div
-              class="time-lists"
-              v-for="(item, index) in protectionSettings"
-              :key="'protectionSettings' + index"
+                class="time-lists"
+                v-for="(item, index) in protectionSettings"
+                :key="'protectionSettings' + index"
             >
               <div>
                 <el-cascader
                     v-model="item.deviceId"
                     :options="childOptions"
+                    :props="props"
                     :show-all-levels="false"
+                    :ref="'protectionSettings'+index"
                     @change="(v)=>handleChange(v,'protectionSettings',index)"
                 ></el-cascader>
               </div>
               <div>
                 <el-autocomplete
-                  v-model="item.point"
-                  placeholder="请输入点位"
-                  clearable
-                  :fetch-suggestions="
+                    v-model="item.point"
+                    placeholder="请输入点位"
+                    clearable
+                    :fetch-suggestions="
                     (q, c) =>
                       querySearchAsync(q, c, index, 'protectionSettings')
                   "
-                  @select="(v) => handleSelect(v, index, 'protectionSettings')"
+                    @select="(v) => handleSelect(v, index, 'protectionSettings')"
                 ></el-autocomplete>
               </div>
 
               <div>
                 <el-select v-model="item.faultOperator" placeholder="请选择">
                   <el-option
-                    v-for="(value, key) in comparisonOperatorOptions"
-                    :key="key + 'faultOperator'"
-                    :label="key"
-                    :value="value"
+                      v-for="(value, key) in comparisonOperatorOptions"
+                      :key="key + 'faultOperator'"
+                      :label="key"
+                      :value="value"
                   ></el-option>
                 </el-select>
               </div>
@@ -145,35 +147,35 @@
               <div>
                 <el-select v-model="item.releaseOperator" placeholder="请选择">
                   <el-option
-                    v-for="(value, key) in comparisonOperatorOptions"
-                    :key="key + 'releaseOperator'"
-                    :label="key"
-                    :value="value"
+                      v-for="(value, key) in comparisonOperatorOptions"
+                      :key="key + 'releaseOperator'"
+                      :label="key"
+                      :value="value"
                   ></el-option>
                 </el-select>
               </div>
               <div>
                 <el-input
-                  placeholder="请输入释放值"
-                  v-model="item.releaseValue"
+                    placeholder="请输入释放值"
+                    v-model="item.releaseValue"
                 >
                 </el-input>
               </div>
               <div>
                 <el-select v-model="item.relationNext" placeholder="请选择">
                   <el-option
-                    v-for="(value, key) in relationWithPoint"
-                    :key="key + 'relation'"
-                    :label="key"
-                    :value="value"
+                      v-for="(value, key) in relationWithPoint"
+                      :key="key + 'relation'"
+                      :label="key"
+                      :value="value"
                   ></el-option>
                 </el-select>
               </div>
               <div>
                 <el-button
-                  @click.native.prevent="deleteRow(index,'protectionSettings')"
-                  type="warning"
-                  size="mini"
+                    @click.native.prevent="deleteRow(index,'protectionSettings')"
+                    type="warning"
+                    size="mini"
                 >
                   删除
                 </el-button>
@@ -198,11 +200,11 @@
         </div>
         <div>
           <el-button
-            @click.native.prevent="addRow('protectionPlan')"
-            block
-            type="primary"
-            size="mini"
-            style="margin-bottom: 20px"
+              @click.native.prevent="addRow('protectionPlan')"
+              block
+              type="primary"
+              size="mini"
+              style="margin-bottom: 20px"
           >
             新增保护方案
           </el-button>
@@ -217,27 +219,29 @@
               <div>操作</div>
             </div>
             <div
-              class="time-lists"
-              v-for="(item, index) in protectionPlan"
-              :key="'protectionPlan' + index"
+                class="time-lists"
+                v-for="(item, index) in protectionPlan"
+                :key="'protectionPlan' + index"
             >
               <div>
                 <el-cascader
                     v-model="item.deviceId"
                     :show-all-levels="false"
                     :options="childOptions"
+                    :props="props"
+                    :ref="'protectionPlan'+index"
                     @change="(v)=>handleChange(v,'protectionPlan',index)"
                 ></el-cascader>
               </div>
               <div>
                 <el-autocomplete
-                  v-model="item.point"
-                  placeholder="请输入点位"
-                  clearable
-                  :fetch-suggestions="
+                    v-model="item.point"
+                    placeholder="请输入点位"
+                    clearable
+                    :fetch-suggestions="
                     (q, c) => querySearchAsync(q, c, index, 'protectionPlan')
                   "
-                  @select="(v) => handleSelect(v, index, 'protectionPlan')"
+                    @select="(v) => handleSelect(v, index, 'protectionPlan')"
                 ></el-autocomplete>
               </div>
 
@@ -248,9 +252,9 @@
               </div>
               <div>
                 <el-button
-                  @click.native.prevent="deleteRow(index,'protectionPlan')"
-                  type="warning"
-                  size="mini"
+                    @click.native.prevent="deleteRow(index,'protectionPlan')"
+                    type="warning"
+                    size="mini"
                 >
                   删除
                 </el-button>
@@ -267,16 +271,12 @@
   </el-dialog>
 </template>
 <script>
-import { mapState } from "vuex";
-import { getAllSites } from "@/api/ems/zddt";
-import { validText } from "@/utils/validate";
-import {
-  updateProtectPlan,
-  addProtectPlan,
-  getProtectPlan,
-  getDeviceListBySiteAndCategory
-} from "@/api/ems/site";
-import { getAllDeviceCategory, pointFuzzyQuery } from "@/api/ems/search";
+import {mapState} from "vuex";
+import {getAllSites} from "@/api/ems/zddt";
+import {validText} from "@/utils/validate";
+import {addProtectPlan, getDeviceListBySiteAndCategory, getProtectPlan, updateProtectPlan} from "@/api/ems/site";
+import {getAllDeviceCategory, pointFuzzyQuery} from "@/api/ems/search";
+
 export default {
   data() {
     const validateText = (rule, value, callback) => {
@@ -287,9 +287,17 @@ export default {
       }
     };
     return {
-      mode:'',
+      props: {
+        // emitPath: false,//在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值
+        lazy: true,
+        lazyLoad: (node, resolve) => {
+          console.log('---------node', node)
+          this.getDeviceList(node, resolve)
+        }
+      },
+      mode: '',
       loading: 0,
-      childOptions:[],
+      childOptions: [],
       protectionSettings: [],
       protectionPlan: [],
       dialogTableVisible: false,
@@ -302,7 +310,7 @@ export default {
         faultLevel: 1, //告警等级
         faultDelaySeconds: "", //故障延时
         releaseDelaySeconds: "", //释放延时
-        description:'',//方案描述
+        description: '',//方案描述
       },
       rules: {
         siteId: [
@@ -313,22 +321,22 @@ export default {
           },
         ],
         faultName: [
-          { required: true, message: "请输入设备保护名称", trigger: "blur" },
+          {required: true, message: "请输入设备保护名称", trigger: "blur"},
         ],
         isAlert: [
-          { required: true, message: "请选择是否告警", trigger: "blur" },
+          {required: true, message: "请选择是否告警", trigger: "blur"},
         ],
         description: [
-          { required: true, message: "请输入设备描述", trigger: "blur" },
-          { validator: validateText, trigger: "blur" },
+          {required: true, message: "请输入设备描述", trigger: "blur"},
+          {validator: validateText, trigger: "blur"},
         ],
         faultDelaySeconds: [
-          { required: true, message: "请输入保护前提延时", trigger: "blur" },
-          { validator: validateText, trigger: "blur" },
+          {required: true, message: "请输入保护前提延时", trigger: "blur"},
+          {validator: validateText, trigger: "blur"},
         ],
         releaseDelaySeconds: [
-          { required: true, message: "请输入保护方案延时", trigger: "blur" },
-          { validator: validateText, trigger: "blur" },
+          {required: true, message: "请输入保护方案延时", trigger: "blur"},
+          {validator: validateText, trigger: "blur"},
         ],
       },
     };
@@ -336,24 +344,24 @@ export default {
   computed: {
     ...mapState({
       communicationStatusOptions: (state) =>
-        state?.ems?.communicationStatusOptions || {},
+          state?.ems?.communicationStatusOptions || {},
       deviceTypeOptions: (state) => state?.ems?.deviceTypeOptions || {},
       comparisonOperatorOptions: (state) =>
-        state?.ems?.comparisonOperatorOptions || {},
+          state?.ems?.comparisonOperatorOptions || {},
       relationWithPoint: (state) => state?.ems?.relationWithPoint || {},
     }),
   },
   methods: {
-    open(id,siteId){
-      this.dialogTableVisible=true
+    open(id, siteId) {
+      this.dialogTableVisible = true
       this.getZdList();
-      this.getDeviceCategoryList().then(()=>{
-        if(id && siteId) {
-          this.getDeviceList('PCS',siteId)
-          this.getDeviceList('STACK',siteId)
+      this.getDeviceCategoryList().then(() => {
+        if (id && siteId) {
+          // this.getDeviceList('PCS', siteId)
+          // this.getDeviceList('STACK', siteId)
         }
       });
-      if(id){
+      if (id) {
         this.formData.id = id
         this.mode = 'edit'
         getProtectPlan(id).then(response => {
@@ -365,53 +373,74 @@ export default {
             isAlert: data?.isAlert || 0, //是否告警
             faultLevel: data?.faultLevel || 1, //告警等级
             faultDelaySeconds: data?.faultDelaySeconds || "", //故障延时
-            releaseDelaySeconds: data?.releaseDelaySeconds ||"", //释放延时
-            description: data?.description ||'',//方案描述
+            releaseDelaySeconds: data?.releaseDelaySeconds || "", //释放延时
+            description: data?.description || '',//方案描述
           }
-          const plan =(JSON.parse(data?.protectionPlan || [])).map(item=>{
-            return Object.assign({},item,{
-              deviceId:[item.deviceCategory || '',item.deviceId || ''],
+          const plan = (JSON.parse(data?.protectionPlan || [])).map(item => {
+            const index = this.childOptions.findIndex(i => i.value === item.deviceCategory)
+            if (index > -1) {
+              !this.childOptions[index].children.find(i => i.value === item.deviceId) && this.childOptions[index].children.push({
+                value: item.deviceId,
+                label: item.deviceName,
+                leaf: true
+              })
+            }
+            return Object.assign({}, item, {
+              deviceId: [item.deviceCategory || '', item.deviceId || ''],
+              deviceName: [item.categoryName || '', item.deviceName || ''],
             })
           })
-          const settings =(JSON.parse(data?.protectionSettings || [])).map(item=>{
-            return Object.assign({},item,{
-              deviceId:[item.deviceCategory || '',item.deviceId || ''],
+          const settings = (JSON.parse(data?.protectionSettings || [])).map(item => {
+            const index = this.childOptions.findIndex(i => i.value === item.deviceCategory)
+            if (index > -1) {
+              !this.childOptions[index].children.find(i => i.value === item.deviceId) && this.childOptions[index].children.push({
+                value: item.deviceId,
+                label: item.deviceName,
+                leaf: true
+              })
+            }
+            return Object.assign({}, item, {
+              deviceId: [item.deviceCategory || '', item.deviceId || ''],
+              deviceName: [item.categoryName || '', item.deviceName || ''],
             })
           })
-          this.$nextTick(()=>{
-            this.protectionPlan.splice(0,0,...plan)
-            this.protectionSettings.splice(0,0,...settings)
+          this.$nextTick(() => {
+            this.protectionPlan.splice(0, 0, ...plan)
+            this.protectionSettings.splice(0, 0, ...settings)
           })
-          console.log('获取设备保护详情并初始化',this.formData,this.protectionPlan,this.protectionSettings)
+          console.log('获取设备保护详情并初始化', this.formData, this.protectionPlan, this.protectionSettings, this.childOptions)
+
         })
-      }else{
+      } else {
         this.mode = 'add'
       }
     },
     // 新增设备保护前提、设备保护方案
     addRow(type) {
       const item = type === 'protectionSettings' ? {
-        deviceId:[],//设备ID
+        deviceId: [],//设备ID
+        deviceName: [],
         deviceCategory: "",//设备类型 英文
-        categoryName:'',//设备类型名称 中文
+        categoryName: '',//设备类型名称 中文
         point: "",//点位 英文
-        pointName:"",//点位 中文
+        pointName: "",//点位 中文
         faultValue: "",//故障值
         releaseValue: "",//释放值
         faultOperator: "",//故障值比较关系
         releaseOperator: "",//释放值比较关系
         relationNext: "",//与下一个点位的关系
       } : {
-        deviceId:[],
+        deviceId: [],
+        deviceName: [],
         deviceCategory: "",//设备类型 英文
-        categoryName:'',//设备类型名称 中文
+        categoryName: '',//设备类型名称 中文
         point: "",
-        pointName:"",
+        pointName: "",
         value: "",//设置值
       }
       // this.$set(this[type], this[type].length, item);
-      this[type].splice(this[type].length,0,item)
-      console.log('新增设备保护前提、方案',type,this[type])
+      this[type].splice(this[type].length, 0, item)
+      console.log('新增设备保护前提、方案', type, this[type])
     },
     // 删除设备保护前提、设备保护方案
     deleteRow(index, type) {
@@ -435,25 +464,25 @@ export default {
       }).then((response) => {
         const data = response?.data || [];
         cb(
-          data.map((item) => {
-            return { name: item, value: item };
-          })
+            data.map((item) => {
+              return {name: item, value: item};
+            })
         );
       });
     },
     // 点位选择
     handleSelect(data, index, type) {
-      console.log('选择点位',data,index,type)
+      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,
+      let line = Object.assign({}, this[type][index], {
+        point: data.value,
+        pointName: data.value,
       })
-      this[type].splice(index,1,line);
-      console.log('选择点位配置完成',this[type][index])
+      this[type].splice(index, 1, line);
+      console.log('选择点位配置完成', this[type][index])
     },
 
     // 获取设备类别-不区分站点
@@ -461,79 +490,86 @@ export default {
       this.loading += 1;
       return getAllDeviceCategory()
           .then((response) => {
-            const data = (response?.data || []).filter(item => ['PCS','STACK'].includes(item.code));
-            // this.childOptions=[]
-            this.$set(this,'childOptions',[])
-            let arr =[]
+            const data = (response?.data || []);
+            this.$set(this, 'childOptions', [])
+            let arr = []
             data.forEach((item) => {
               arr.push({
                 value: item.code,
                 label: item.name,
-                children:[]
+                leaf: false,
+                children: []
               })
             })
-            this.childOptions.splice(0,0,...arr)
-            console.log('获取设备类型',data,this.childOptions)
+            this.childOptions.splice(0, 0, ...arr)
+            console.log('获取设备类型', data, this.childOptions)
           })
           .finally(() => {
             this.loading -= 1;
           });
     },
     //获取设备列表-区分站点
-    getDeviceList(deviceCategory,siteId){
-      this.$nextTick(()=>{
-        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)
+    getDeviceList(node, resolve) {
+      if (!this.formData.siteId) {
+        this.$message({
+          type: "warning",
+          message: "请先选择站点",
+        });
+        return resolve([])
+      }
+      getDeviceListBySiteAndCategory({
+        siteId: this.formData.siteId,
+        deviceCategory: node.value
+      }).then((response) => {
+        const data = (response?.data || []).map(item => {
+          return {
+            label: item.deviceName,
+            value: item.id,
+            leaf: true
           }
         })
+        resolve(data)
+      }).catch(() => {
+        resolve([])
       })
     },
     //更新站点下面的设备列表
-    updateSiteDeviceList(){
+    updateSiteDeviceList() {
       this.childOptions.forEach(item => {
         const length = item.children.length
-        item.children.splice(0,length)
+        item.children.splice(0, length)
       })
-      this.getDeviceList('PCS')
-      this.getDeviceList('STACK')
     },
     //选中设备类型、设备
-    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:''
+    handleChange(data, type, index) {
+      console.log('设置选中设备类型、设备', data, type, index)
+      const {label = '', parent = {}} = this.$refs[type + index][0].getCheckedNodes()[0]
+      console.log('选中设备的名称', parent.label, label)
+      const item = Object.assign({}, this[type][index], {
+        deviceId: data,
+        deviceName: [parent.label, label],
+        deviceCategory: data[0],
+        categoryName: parent.label,
+        pointName: '',
+        point: ''
       })
-      this.$nextTick(()=>{
+      this.$nextTick(() => {
         // this.$set(this[type], index, item);
-        this[type].splice(index,1,item);
+        this[type].splice(index, 1, item);
       })
-      console.log('设置选中设备类型、设备配置完成',this[type][index])
+      console.log('设置选中设备类型、设备配置完成', this[type][index])
     },
 
     //获取站点列表
     getZdList() {
       this.loading += 1;
       getAllSites()
-        .then((response) => {
-          this.siteList = response?.data || [];
-        })
-        .finally(() => {
-          this.loading -= 1;
-        });
+          .then((response) => {
+            this.siteList = response?.data || [];
+          })
+          .finally(() => {
+            this.loading -= 1;
+          });
     },
     // 切换站点
     // 重新获取设备列表
@@ -541,62 +577,65 @@ export default {
     changeType() {
       //获取当前站点下的pcs和bms
       this.updateSiteDeviceList()
-      if(this.protectionSettings.length>0){
-        const list =this.protectionSettings
+      if (this.protectionSettings.length > 0) {
+        const list = this.protectionSettings
         list.forEach((item) => {
           item.point = ""
           item.pointName = ""
-          item.deviceId=[]
-          item.categoryName=''
-          item.deviceCategory=''
+          item.deviceId = []
+          item.deviceName = []
+          item.categoryName = ''
+          item.deviceCategory = ''
         });
         // this.$set(this,'protectionSettings',list)
-        this.$nextTick(()=>{
-          this.protectionSettings.splice(0,this.protectionSettings.length,...list)
+        this.$nextTick(() => {
+          this.protectionSettings.splice(0, this.protectionSettings.length, ...list)
         })
       }
-      if(this.protectionPlan.length>0){
-        const list =this.protectionPlan
+      if (this.protectionPlan.length > 0) {
+        const list = this.protectionPlan
         list.forEach((item) => {
           item.point = ""
           item.pointName = ""
-          item.deviceId=[]
-          item.categoryName=''
-          item.deviceCategory=''
+          item.deviceId = []
+          item.deviceName = []
+          item.categoryName = ''
+          item.deviceCategory = ''
         });
         // this.$set(this,'protectionPlan',list)
-        this.$nextTick(()=>{
-          this.protectionPlan.splice(0,this.protectionPlan.length,...list)
+        this.$nextTick(() => {
+          this.protectionPlan.splice(0, this.protectionPlan.length, ...list)
         })
       }
     },
 
 
     saveDialog() {
-      function getToastMsg(name,type,index){
+      function getToastMsg(name, type, index) {
         return {
-          protectionSettings:{
-            deviceId:`请选择保护前提第${index}行的设备`,//设备ID
+          protectionSettings: {
+            deviceId: `请选择保护前提第${index}行的设备`,//设备ID
             deviceCategory: `请选择保护前提第${index}行的设备类型`,//设备类型 英文
-            categoryName:`请选择保护前提第${index}行的设备类型`,//设备类型名称 中文
+            categoryName: `请选择保护前提第${index}行的设备类型`,//设备类型名称 中文
             point: `请选择保护前提第${index}行的点位`,//点位 英文
-            pointName:`请选择保护前提第${index}行的点位`,//点位 中文
+            pointName: `请选择保护前提第${index}行的点位`,//点位 中文
             faultValue: `请输入保护前提第${index}行的故障值`,//故障值
             releaseValue: `请输入保护前提第${index}行的释放值`,//释放值
             faultOperator: `请选择保护前提第${index}行的故障值比较关系`,//故障值比较关系
             releaseOperator: `请选择保护前提第${index}行的释放值比较关系`,//释放值比较关系
             relationNext: `请选择保护前提第${index}行与下一个点位的关系`,//与下一个点位的关系
           },
-          protectionPlan :{
-            deviceId:`请选择保护方案第${index}行的设备`,
+          protectionPlan: {
+            deviceId: `请选择保护方案第${index}行的设备`,
             deviceCategory: `请选择保护方案第${index}行的设备类型`,//设备类型 英文
-            categoryName:`请选择保护方案第${index}行的设备类型`,//设备类型名称 中文
+            categoryName: `请选择保护方案第${index}行的设备类型`,//设备类型名称 中文
             point: `请选择保护方案第${index}行的点位`,
-            pointName:`请选择保护方案第${index}行的点位`,
+            pointName: `请选择保护方案第${index}行的点位`,
             value: `请输入保护方案第${index}行的故障值`,//设置值
           }
         }[type][name]
       }
+
       this.$refs.addTempForm.validate((valid) => {
         if (!valid) return;
         const {
@@ -607,67 +646,69 @@ export default {
           faultLevel = 1, //告警等级
           faultDelaySeconds = "", //故障延时
           releaseDelaySeconds = "", //释放延时
-          description="",//方案描述
+          description = "",//方案描述
         } = this.formData;
-        const {protectionSettings,protectionPlan} = this
-        let protectionSettingsValidateStatus= true , protectionPlanValidateStatus= true
-        for(let i = 0;i<protectionSettings.length;i++){
+        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
+          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
+            } else {
+              if (![0, '0'].includes(value) && !value) {
+                this.$message.error(getToastMsg(key, 'protectionSettings', i + 1))
+                protectionSettingsValidateStatus = false
                 break
               }
             }
           }
-          if(!protectionSettingsValidateStatus) break
+          if (!protectionSettingsValidateStatus) break
         }
 
-        for(let i = 0;i<protectionPlan.length;i++){
+        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
+          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{
+              } else {
                 // protectionPlan[i][key] = ''//清空选择的关系
               }
-            }else{
-              if(![0,'0'].includes(value) && !value){
-                this.$message.error(getToastMsg(key,'protectionPlan',i+1))
-                protectionPlanValidateStatus=false
+            } else {
+              if (![0, '0'].includes(value) && !value) {
+                this.$message.error(getToastMsg(key, 'protectionPlan', i + 1))
+                protectionPlanValidateStatus = false
                 break
               }
             }
           }
-          if(!protectionPlanValidateStatus) break
+          if (!protectionPlanValidateStatus) break
         }
 
-        if(!protectionSettingsValidateStatus || !protectionPlanValidateStatus) return
-        const settings = protectionSettings.map(item=>{
-          return Object.assign({},item,{
-            deviceId:item.deviceId[1],
+        if (!protectionSettingsValidateStatus || !protectionPlanValidateStatus) return
+        const settings = protectionSettings.map(item => {
+          return Object.assign({}, item, {
+            deviceId: item.deviceId[1],
+            deviceName: item.deviceName[1],
           })
         })
-        const plan = protectionPlan.map(item=>{
-          return Object.assign({},item,{
-            deviceId:item.deviceId[1],
+        const plan = protectionPlan.map(item => {
+          return Object.assign({}, item, {
+            deviceId: item.deviceId[1],
+            deviceName: item.deviceName[1],
           })
         })
         this.loading += 1;
-        const params= {
+        const params = {
           siteId,
           faultName,
           isAlert,
@@ -675,49 +716,49 @@ export default {
           faultDelaySeconds,
           releaseDelaySeconds,
           description,
-          protectionSettings:JSON.stringify(settings),
-          protectionPlan:JSON.stringify(plan),
+          protectionSettings: JSON.stringify(settings),
+          protectionPlan: JSON.stringify(plan),
         }
         if (this.mode === "add") {
           addProtectPlan(params)
-            .then((response) => {
-              if (response.code === 200) {
-                //新增成功
-                // 关闭弹窗 更新表格
-                this.$emit("update");
-                this.closeDialog();
-              }
-            })
-            .finally(() => {
-              this.loading -= 1;
-            });
+              .then((response) => {
+                if (response.code === 200) {
+                  //新增成功
+                  // 关闭弹窗 更新表格
+                  this.$emit("update");
+                  this.closeDialog();
+                }
+              })
+              .finally(() => {
+                this.loading -= 1;
+              });
         } else {
           params.id = id
           updateProtectPlan(params)
-            .then((response) => {
-              if (response.code === 200) {
-                //新增成功
-                // 关闭弹窗 更新表格
-                this.$emit("update");
-                this.closeDialog();
-              }
-            })
-            .finally(() => {
-              this.loading -= 1;
-            });
+              .then((response) => {
+                if (response.code === 200) {
+                  //新增成功
+                  // 关闭弹窗 更新表格
+                  this.$emit("update");
+                  this.closeDialog();
+                }
+              })
+              .finally(() => {
+                this.loading -= 1;
+              });
         }
       });
     },
     closeDialog() {
       this.$emit("clear");
       // 清空所有数据
-      for(let key in this.formData) {
+      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.$set(this, 'protectionSettings', [])
+      this.$set(this, 'protectionPlan', [])
+      this.$set(this, 'childOptions', [])
       this.dialogTableVisible = false;
     },
   },
@@ -727,35 +768,43 @@ export default {
 .items-container {
   margin-top: 40px;
   margin-bottom: 20px;
+
   .item-title {
     line-height: 16px;
     padding: 10px 0;
     color: #000;
   }
 }
+
 .time-lists-container {
   width: 100%;
   border: 1px solid #eee;
+
   .time-lists {
     &:not(:last-child) {
       border-bottom: 1px solid #eee;
     }
+
     display: flex;
+
     & > div {
       width: 16%;
       box-sizing: border-box;
       text-align: center;
       padding: 10px 15px;
+
       &:not(:last-child) {
         width: 28%;
         border-right: 1px solid #eee;
       }
+
       .el-date-editor.el-input,
       .el-date-editor.el-input__inner {
         width: 100%;
       }
     }
   }
+
   .time-lists-title {
     color: #000;
     font-size: 12px;