FE-V2-PC/src/views/emergencyManagement/plan/newAddPlan.vue

<template>
  <div class="newAddPlan">
    <div class="newAddPlan-title-box">
      <p>定制预案</p>
      <p class="add-button-two-90" @click="backButton">返回</p>
      <!--<p class="inquire-button-one" @click="upDataButton(1)">不关联仅保存</p>-->
      <p class="inquire-button-one" @click="associatedDialogClick">关联实验室</p>
    </div>
    <div class="plan-for-max-box scrollbar-box">
        <el-form :model="form" ref="form" :rules="rules" :inline="true" label-width="90px" class="form-box">
          <div class="plan-for-max-box-name-box">
            <el-form-item label="预案名称:" prop="name" style="margin:40px 0;">
              <el-input
                v-model="form.name"
                placeholder="请输入预案名称"
                size="small"
                maxLength="15"
                :disabled="inputType"
              />
            </el-form-item>
            <p v-if="inputType" class="plan-for-max-box-name-button-one add-button-two-90" @click="setNameButton(1)">编辑</p>
            <p v-if="!inputType" class="plan-for-max-box-name-button-two reset-button-one" @click="setNameButton(2)">取消</p>
            <p v-if="!inputType" class="plan-for-max-box-name-button-three add-button-two-90" @click="setNameButton(3)">保存</p>
          </div>
          <div class="for-plan-box" v-for="(item,index) in form.labRiskPlanLevels" :key="index">
            <p class="position-title-type" :class="item.riskPlanLevel==1?'type-color-a':(item.riskPlanLevel==2?'type-color-b':(item.riskPlanLevel==3?'type-color-c':(item.riskPlanLevel==4?'type-color-d':'')))">
              {{item.riskPlanLevel==1?'低风险':(item.riskPlanLevel==2?'中风险':(item.riskPlanLevel==3?'较高风险':(item.riskPlanLevel==4?'高风险':'')))}}
            </p>
            <div class="for-plan-img-box">
              <p class="for-plan-img-null-p"></p>
              <div class="for-plan-img-box-big">
                <div class="for-plan-img-box-one" v-if="item.ifExit == 1">
                  <img src="@/assets/ZDimages/evacuation3_2/img_dzya_ldss.png">
                  <p>联动疏散</p>
                </div>
                <!--<div class="for-plan-img-box-two">-->
                <!--<img src="@/assets/ZDimages/evacuation3_2/img_dzya_hzyj.png">-->
                <!--<p>火灾预案</p>-->
                <!--</div>-->
              </div>
              <p class="for-plan-img-null-p"></p>
            </div>
            <div class="min-for-text-box">
              <div>
                <div class="min-for-text-box-one" v-for="(minItemOne,minIndexOne) in item.riskPlanSensorList" :key="minItemOne.sensorType">
                  <div>
                    <p>启动条件：<span v-for="(sensorItem,sensorIndex) in sensorList" :key="'sensor'+sensorIndex" v-if="sensorItem.hardwareTypeCode == minItemOne.sensorType">{{sensorItem.hardwareTypeName}}</span></p>
                    <p>监测区间：{{minItemOne.minMonitor}}-{{minItemOne.maxMonitor}}</p>
                  </div>
                </div>
              </div>
              <div>
                <div class="min-for-text-box-two" v-for="(minItemTwo,minIndexTwo) in item.riskPlanHardwareList" :key="minIndexTwo">
                  <div v-for="(hardwareItem,hardwareIndex) in hardwareList" :key="hardwareIndex" v-if="hardwareItem.hardwareTypeEnum.code == minItemTwo.hardwareType">
                    <p>执行动作：{{hardwareItem.hardwareTypeEnum.hardwareTypeName}}</p>
                    <p>执行办法：<span v-for="(functionItem,functionIndex) in hardwareItem.functionStatusList" :key="functionIndex" v-if="functionItem.code == minItemTwo.operate">{{functionItem.code == 0?'关闭':'开启'}}</span></p>
                    <p>结束操作：<span v-for="(functionItem,functionIndex) in hardwareItem.functionStatusList" :key="functionIndex" v-if="functionItem.code == minItemTwo.overAct">{{functionItem.code == 0?'关闭':'开启'}}</span></p>
                  </div>
                </div>
              </div>
            </div>
            <div class="for-button-max-box">
              <div @click="buttonClick(2,item,index)">
                <img src="@/assets/ZDimages/evacuation3_2/icon_znwl_bj.png">
                <p>编辑</p>
              </div>
              <div @click="buttonClick(3,item,index)">
                <img src="@/assets/ZDimages/evacuation3_2/icon_znwl_sc.png">
                <p>删除</p>
              </div>
            </div>
          </div>
        </el-form>
      <div class="plan-for-max-button-box">
        <p class="plan-for-max-button-null"></p>
        <p class="plan-for-max-button" v-if="!form.labRiskPlanLevels[3]" @click="buttonClick(1)">+ 新增预案规则</p>
        <p class="plan-for-max-button-null"></p>
      </div>
    </div>
    <el-dialog :title='dialogTitle' v-if="dialogOpen" :visible.sync="dialogOpen" width="800px" @close='closeDialog'>
      <div class="scrollbar-box" style="height:600px;">
        <el-form :model="dialogForm" ref="dialogForm" :rules="rules" label-width="100px">
          <el-form-item label="预案等级：" prop="riskPlanLevel">
            <el-radio-group  v-model="dialogForm.riskPlanLevel" style="width:500px;">
              <el-radio :label="1">低风险</el-radio>
              <el-radio :label="2">中风险</el-radio>
              <el-radio :label="3">较高风险</el-radio>
              <el-radio :label="4">高风险</el-radio>
            </el-radio-group>
          </el-form-item>
          <div style="display: flex">
            <el-form-item label="执行疏散：" prop="ifExit">
              <el-radio-group  v-model="dialogForm.ifExit" style="width:500px;">
                <el-radio :label="0">否</el-radio>
                <el-radio :label="1">是</el-radio>
              </el-radio-group>
            </el-form-item>
            <!--<el-form-item label="火灾预案：" prop="name" style="margin-left:220px;">-->
              <!--<el-radio-group v-model="dialogForm.type3">-->
                <!--<el-radio :label="1">否</el-radio>-->
                <!--<el-radio :label="2">是</el-radio>-->
              <!--</el-radio-group>-->
            <!--</el-form-item>-->
          </div>
          <el-form-item label="报警通知方式:" prop="expandType">
            <el-checkbox-group v-model="dialogForm.alarmType">
              <el-checkbox label="1">电话报警</el-checkbox>
              <el-checkbox label="2">短信报警</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <div class="autoClose">
            <p class="autoClose_l">自动关闭:</p>
            <p class="autoClose_l2">传感器监测数值恢复正常</p>
            <el-input  v-model="dialogForm.riskAutoOff" style="width:120px;" :min="1" :max="600" :controls="false" >
              <template slot="append">秒</template>
            </el-input>
            <p  class="autoClose_l5">以后预案自动关闭</p>
          </div>
          <div style="border-top:1px solid #e0e0e0;">
            <p style="line-height:60px;font-size:14px;margin-left:19px;">启动条件：</p>
            <div style="display: flex" v-for="(item,index) in dialogForm.riskPlanSensorList" :key="index">
              <div style="flex:1;">
                <el-form-item label="监测设备：" :prop="'riskPlanSensorList.'+index+'.sensorType'" :rules="rules.sensorType">
                  <el-select  v-model="item.sensorType" placeholder="请选择监测设备" @change="(val)=>sensorChange(val,index)">
                    <el-option
                      v-for="item in sensorList"
                      :key="item.hardwareTypeCode"
                      :label="item.hardwareTypeName"
                      :value="item.hardwareTypeCode">
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div style="flex:1;display: flex">
                <el-form-item label="监测区间：" :prop="'riskPlanSensorList.'+index+'.minMonitor'" :rules="rules.minMonitor">
                  <el-input-number  v-model="item.minMonitor" style="width:90px;" :disabled="item.suoType"
                                    :min="1" :max="99999" :controls="false" placeholder="监测区间"></el-input-number>
                </el-form-item>
                <p style="width:30px;text-align: center;line-height:40px;">-</p>
                <el-form-item label="" :prop="'riskPlanSensorList.'+index+'.maxMonitor'" :rules="rules.maxMonitor" label-width="0">
                  <el-input-number  v-model="item.maxMonitor" style="width:90px;" :disabled="item.suoType"
                                    :min="1" :max="99999" :controls="false" placeholder="监测区间"></el-input-number>
                </el-form-item>
                <p class="el-icon-delete"
                   @click="delMinData(1,index)"
                   style="cursor: pointer;line-height:30px;width:30px;text-align:center;margin:5px 0 0 20px;"></p>
              </div>
            </div>
            <p style="cursor: pointer;width:200px;line-height:30px;border-radius:4px;border: 1px dashed #E0E0E0;color:#333333;text-align: center;margin:20px auto;"
               @click="addMinData(1)" :class="dialogForm.riskPlanSensorList.length>8?'add-plan-max-button-color':''">+ 新增监测规则</p>
          </div>
          <div style="border-top:1px solid #e0e0e0;">
            <p style="line-height:60px;font-size:14px;margin-left:19px;">执行动作：</p>
            <div style="display: flex" v-for="(item,index) in dialogForm.riskPlanHardwareList" :key="index">
              <div style="flex:1;display: flex">
                <el-form-item label="执行设备：" :prop="'riskPlanHardwareList.'+index+'.hardwareType'" :rules="rules.hardwareType">
                  <el-select v-model="item.hardwareType" placeholder="选择执行设备" style="width:130px;" @change="(val)=>controlTypeList(val,index)">
                    <el-option
                      v-for="optionItem in hardwareList"
                      :key="optionItem.hardwareTypeEnum.code"
                      :label="optionItem.hardwareTypeEnum.hardwareTypeName"
                      :value="optionItem.hardwareTypeEnum.code">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="执行办法：" :prop="'riskPlanHardwareList.'+index+'.operate'" :rules="rules.operate">
                  <el-select  v-model="item.operate" placeholder="选择执行办法" style="width:130px;">
                    <el-option
                      v-for="optionItem in item.hardwareList"
                      :key="optionItem.code"
                      :label="optionItem.describe"
                      :value="optionItem.code">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="结束操作：" :prop="'riskPlanHardwareList.'+index+'.overAct'" :rules="rules.overAct">
                  <el-select  v-model="item.overAct" placeholder="选择结束操作" style="width:130px;">
                    <el-option
                      v-for="optionItem in item.hardwareList"
                      :key="optionItem.code"
                      :label="optionItem.describe"
                      :value="optionItem.code">
                    </el-option>
                  </el-select>
                </el-form-item>
                <p class="el-icon-delete"
                   @click="delMinData(2,index)"
                   style="cursor: pointer;line-height:30px;width:30px;text-align:center;margin:5px 0 0 20px;"></p>
              </div>
            </div>
            <p style="cursor: pointer;width:200px;line-height:30px;border-radius:4px;border: 1px dashed #E0E0E0;color:#333333;text-align: center;margin:20px auto;"
               @click="addMinData(2)" :class="dialogForm.riskPlanHardwareList.length>8?'add-plan-max-button-color':''">+ 新增执行动作</p>
          </div>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <div style="display: flex">
          <p style="flex:1;"></p>
          <p style="cursor: pointer;border-radius:6px;width:70px;line-height:30px;font-size:12px;text-align:center;margin-right:17px;color:#999999;background:#E0E0E0;" @click="cancel">取消</p>
          <p style="cursor: pointer;border-radius:6px;width:70px;line-height:30px;font-size:12px;text-align:center;color:#fff;background:#0045AF;" @click="submitForm">确定</p>
          <p style="flex:1;"></p>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { listClassifiedAll } from "@/api/laboratory/classified";
  import { listClasstypeAll } from "@/api/laboratory/classtype";
  import { optionHardware } from "@/api/laboratory/hardware";
  import { getSensorList } from "@/api/laboratory/sensor";
  import { selectRiskPlanLeveListRiskPlanId,putPlan,planLevelAdd,planLevelPut,planLevelDel,getLabRiskPlanJoinSub } from "@/api/evacuation3_2/index";
  export default {
    name: "newAddPlan",
    props:{
      addPlanData:{},
    },
    data() {
      const exportconstvalidateContacts  = (rule, value, callback) => {
        if(!/^[\u0391-\uFFE5_a-zA-Z0-9]+$/.test(value)) {
          callback(new Error("只可输入中文/英文与数字"));
        } else {
          callback()
        }
      };
      return {
        form:{
          name:"",
          labRiskPlanLevels:[],
        },
        dialogTitle:'',
        dialogIndex:null,
        dialogOpen:false,
        dialogForm:{
        },
        // 表单校验
        rules: {
          name: [
            { required: true, message: "请输入预案名称", trigger: "change" },
            { required: true, message: "请输入预案名称", validator: this.spaceJudgment, trigger: "change" },
            { required: true, validator: exportconstvalidateContacts, trigger: "blur" },
          ],
          riskPlanLevel: [
            { required: true, message: "请选择预案等级", trigger: "change" },
          ],
          ifExit: [
            { required: true, message: "请选择是否执行疏散", trigger: "change" },
          ],
          sensorType: [
            { required: true, message: "请选择监测设备", trigger: "change" },
          ],
          minMonitor: [
            { required: true, message: "请选择监测区间", trigger: "blur" },
          ],
          maxMonitor: [
            { required: true, message: "请选择监测区间", trigger: "blur" },
          ],
          hardwareType: [
            { required: true, message: "请选择执行设备", trigger: "change" },
          ],
          operate: [
            { required: true, message: "请选择执行办法", trigger: "change" },
          ],
          overAct: [
            { required: true, message: "请选择结束操作", trigger: "change" },
          ],
          riskAutoOff:[
            { required: true, message: "请选择关闭时间", trigger: "change" },
          ]
        },
        //检测设备列表
        options:[{value: '选项1', label: '黄金糕'},{value: '选项1', label: '黄金糕'},],
        //选择数据
        //传感器
        sensorList:[],
        sensorListData:[],
        //设备
        hardwareList:[],
        //分类
        typeList:[],
        //分级
        levelList:[],
        // 关联实验室本地数据
        labSensorHazardRelations:[],
        // 新增/编辑时本地数据
        labRiskPlanLevels:[],
        //名称修改状态锁
        inputType:true,
        inputName:"",
      }
    },
    created(){

    },
    mounted(){
      this.getOptionData();
    },
    methods: {
      closeDialog(){
         this.getOptionData()
      },
      //传感器选中事件
      sensorChange(val,index){
        let self = this;
        for(let i=0;i<self.sensorList.length;i++){
          if(self.sensorList[i].hardwareTypeCode == val){
            this.$set(self.dialogForm.riskPlanSensorList[index],'funNum',self.sensorList[i].hardwareTypeName);
            if(self.sensorList[i].enumName == "FLAME"){
              console.log('self.sensorList[i].enumName',self.sensorList[i].enumName)
              self.dialogForm.riskPlanSensorList[index].minMonitor = 1;
              self.dialogForm.riskPlanSensorList[index].maxMonitor = 2;
              self.$set(self.dialogForm.riskPlanSensorList[index],'minMonitor',1);
              self.$set(self.dialogForm.riskPlanSensorList[index],'maxMonitor',2);
              self.$set(self.dialogForm.riskPlanSensorList[index],'suoType',true);
              console.log('self.dialogForm.riskPlanSensorList.riskPlanSensorList',self.dialogForm.riskPlanSensorList)
            }else{
              self.$set(self.dialogForm.riskPlanSensorList[index],'suoType',false);
            }
          }
        }
      },
      //修改预案名称
      setNameButton(type){
        if(type == 1){
          this.$set(this,'inputType',false);
          this.$set(this,'inputName',this.form.name);
        }else if(type == 2){
          this.$set(this,'inputType',true);
          this.$set(this.form,'name',this.inputName);
        }else if(type == 3){
          this.$refs["form"].validate(valid => {
              if (valid) {
                putPlan({ id:this.addPlanData.id, name:this.form.name }).then((response) => {
                  this.msgSuccess(response.msg)
                  this.$set(this,'inputType',true);
                });
              }
          })
        }
      },
      //提交
      upDataButton(){
        this.$refs["form"].validate(valid => {
          if (valid) {
            if(!this.form.labRiskPlanLevels[0]){
              this.msgError('请添加至少一个预案规则')
              return
            }
            setPlanData(this.form).then(response => {
              this.msgSuccess(response.msg);
              this.$parent.tableClickButton(5);
            });
          }
        })
      },
      //查询设备功能
      controlTypeList(val,index) {
        let self = this;
        self.hardwareList.splice(index,1)
        for(let i=0;i<self.hardwareList.length;i++){
          if(self.hardwareList[i].hardwareTypeEnum.code == val){
            this.$set(self.dialogForm.riskPlanHardwareList[index],'hardwareList',self.hardwareList[i].functionStatusList);
            return
          }
        }
      },
      //查询传感器/设备下啦列表
      getOptionData(){
        getSensorList({}).then(response => {
          this.sensorList = response.data;
          this.sensorListData = JSON.parse(JSON.stringify(response.data))
        });
        optionHardware({}).then(response => {
          this.hardwareList = response.data;
        });
        listClassifiedAll().then(response=>{
          if(response.code==200){
            this.levelList=response.data
          }
        })
        listClasstypeAll().then(response=>{
          if(response.code==200){
            this.typeList=response.data;
          }
        })
        this.selectRiskPlanLeveListRiskPlanId(1);
      },
      selectRiskPlanLeveListRiskPlanId(type){
        selectRiskPlanLeveListRiskPlanId(this.addPlanData.id).then((response) => {
          if(type == 1){
            this.$set(this.form,'name',this.addPlanData.name);
            this.$set(this,'inputType',true);
          }
          this.$set(this.form,'labRiskPlanLevels',response.data);
        });
      },
      //返回
      backButton(){
        this.$parent.tableClickButton(5)
      },
      //实验室关联开关
      associatedDialogClick(type){
        this.$parent.tableClickButton(1,{id:this.addPlanData.id,type:1,})
      },
      //查询
      onSearch(){

      },
      //重置
      resetForm(){

      },
      addMinData(type){
        if(type == 1){
          if(this.dialogForm.riskPlanSensorList.length>8){
            this.msgError('新增失败，最多只能新增九条监测规则')
            return
          }
          this.dialogForm.riskPlanSensorList.push({
            sensorType:null,
          })
        }else if(type == 2){
          if(this.dialogForm.riskPlanHardwareList.length>8){
            this.msgError('新增失败，最多只能新增九条处置规则')
            return
          }
          this.dialogForm.riskPlanHardwareList.push({
            hardwareType:null,
            operate:null,
            overAct:null,
          })
        }
      },
      delMinData(type,index){
        if(type == 1){
          this.dialogForm.riskPlanSensorList.splice(index,1);
        }else if (type == 2){
          this.dialogForm.riskPlanHardwareList.splice(index,1);
        }
      },
      //提交
      submitForm(){
        let self = this;

        this.$refs["dialogForm"].validate(valid => {
          if (valid) {
        if(!this.dialogForm.riskPlanSensorList[0]){
          this.msgError('请添加至少一个启动条件')
          return
        }
        //提交数据检测条件区间是否重复(dialog本身数据查重)
        for(let i=0;i<self.dialogForm.riskPlanSensorList.length;i++){
          if(self.dialogForm.riskPlanSensorList[i].minMonitor >= self.dialogForm.riskPlanSensorList[i].maxMonitor){
            self.msgError('监测区间数值异常，请重新输入');
            return
          }
          for(let x=0;x<self.dialogForm.riskPlanSensorList.length;x++){
            if(self.dialogForm.riskPlanSensorList[i].sensorType == self.dialogForm.riskPlanSensorList[x].sensorType && i != x){
              if(self.dialogForm.riskPlanSensorList[i].minMonitor >= self.dialogForm.riskPlanSensorList[x].minMonitor &&
                 self.dialogForm.riskPlanSensorList[i].minMonitor <= self.dialogForm.riskPlanSensorList[x].maxMonitor){
                self.msgError('监测区间不能重复，请重新输入');
                return
              }
              if(self.dialogForm.riskPlanSensorList[i].maxMonitor >= self.dialogForm.riskPlanSensorList[x].minMonitor &&
                self.dialogForm.riskPlanSensorList[i].maxMonitor <= self.dialogForm.riskPlanSensorList[x].maxMonitor){
                self.msgError('监测区间不能重复，请重新输入');
                return
              }
            }
          }
        }
        //判断 当前为修改还是新增
        if(this.dialogIndex != null){
          //编辑
          //判断是否已有同等级预案
          for(let i=0;i<self.labRiskPlanLevels.length;i++){
            if(self.labRiskPlanLevels[i].riskPlanLevel == self.dialogForm.riskPlanLevel){
              this.msgError('无法添加多个相同等级的预案.')
              return
            }
          }
          for(let i=0;i<self.labRiskPlanLevels.length;i++){
            if(self.labRiskPlanLevels[i].riskPlanSensorList.length == self.dialogForm.riskPlanSensorList.length){
              let age = 0;
              for(let o=0;o<self.labRiskPlanLevels[i].riskPlanSensorList.length;o++){
                for(let x=0;x<self.dialogForm.riskPlanSensorList.length;x++){
                  if(self.dialogForm.riskPlanSensorList[x].sensorType==self.labRiskPlanLevels[i].riskPlanSensorList[o].sensorType){
                    if(self.dialogForm.riskPlanSensorList[x].minMonitor>=self.labRiskPlanLevels[i].riskPlanSensorList[o].minMonitor&&
                      self.dialogForm.riskPlanSensorList[x].minMonitor<=self.labRiskPlanLevels[i].riskPlanSensorList[o].maxMonitor){
                      age++
                    }else if(self.dialogForm.riskPlanSensorList[x].maxMonitor>=self.labRiskPlanLevels[i].riskPlanSensorList[o].minMonitor&&
                      self.dialogForm.riskPlanSensorList[x].maxMonitor<=self.labRiskPlanLevels[i].riskPlanSensorList[o].maxMonitor){
                      age++
                    }else if(self.labRiskPlanLevels[i].riskPlanSensorList[o].minMonitor>=self.dialogForm.riskPlanSensorList[x].minMonitor&&
                      self.labRiskPlanLevels[i].riskPlanSensorList[o].minMonitor<=self.dialogForm.riskPlanSensorList[x].maxMonitor){
                      age++
                    }else if(self.labRiskPlanLevels[i].riskPlanSensorList[o].maxMonitor>=self.dialogForm.riskPlanSensorList[x].minMonitor&&
                      self.labRiskPlanLevels[i].riskPlanSensorList[o].maxMonitor<=self.dialogForm.riskPlanSensorList[x].maxMonitor){
                      age++
                    }
                  }
                }
              }
              if(self.dialogForm.riskPlanSensorList.length == age){
                self.msgError('监测区间不能与其他级别检测条件完全重复，请重新输入');
                return
              }
            }
          }
        }else{
          //新增
          for(let i=0;i<self.form.labRiskPlanLevels.length;i++){
            if(self.form.labRiskPlanLevels[i].riskPlanLevel == self.dialogForm.riskPlanLevel){
              this.msgError('无法添加多个相同等级的预案.')
              return
            }
          }
          for(let i=0;i<self.form.labRiskPlanLevels.length;i++){
            if(self.form.labRiskPlanLevels[i].riskPlanSensorList.length == self.dialogForm.riskPlanSensorList.length){
              let age = 0;
              for(let o=0;o<self.form.labRiskPlanLevels[i].riskPlanSensorList.length;o++){
                for(let x=0;x<self.dialogForm.riskPlanSensorList.length;x++){
                  if(self.dialogForm.riskPlanSensorList[x].sensorType==self.form.labRiskPlanLevels[i].riskPlanSensorList[o].sensorType){
                    if(self.dialogForm.riskPlanSensorList[x].minMonitor>=self.form.labRiskPlanLevels[i].riskPlanSensorList[o].minMonitor&&
                      self.dialogForm.riskPlanSensorList[x].minMonitor<=self.form.labRiskPlanLevels[i].riskPlanSensorList[o].maxMonitor){
                      age++
                      console.log('1')
                    }else if(self.dialogForm.riskPlanSensorList[x].maxMonitor>=self.form.labRiskPlanLevels[i].riskPlanSensorList[o].minMonitor&&
                      self.dialogForm.riskPlanSensorList[x].maxMonitor<=self.form.labRiskPlanLevels[i].riskPlanSensorList[o].maxMonitor){
                      age++
                      console.log('2')
                    }else if(self.form.labRiskPlanLevels[i].riskPlanSensorList[o].minMonitor>=self.dialogForm.riskPlanSensorList[x].minMonitor&&
                      self.form.labRiskPlanLevels[i].riskPlanSensorList[o].minMonitor<=self.dialogForm.riskPlanSensorList[x].maxMonitor){
                      age++
                      console.log('3')
                    }else if(self.form.labRiskPlanLevels[i].riskPlanSensorList[o].maxMonitor>=self.dialogForm.riskPlanSensorList[x].minMonitor&&
                      self.form.labRiskPlanLevels[i].riskPlanSensorList[o].maxMonitor<=self.dialogForm.riskPlanSensorList[x].maxMonitor){
                      age++
                      console.log('4')
                    }
                  }
                }
              }
              if(self.dialogForm.riskPlanSensorList.length == age){
                self.msgError('监测区间不能与其他级别检测条件完全重复，请重新输入');
                return
              }
            }
          }
        }
        // this.$refs["dialogForm"].validate(valid => {
        //   if (valid) {
            if(this.dialogIndex != null){
              //修改预案级别数据
              let text = [];
              for(let i=0;i<self.form.labRiskPlanLevels.length;i++){
                if(this.dialogIndex != i){
                  for(let o=0;o<self.form.labRiskPlanLevels[i].riskPlanSensorList.length;o++){
                    for(let x=0;x<self.sensorList.length;x++){
                      if(self.form.labRiskPlanLevels[i].riskPlanSensorList[o].sensorType == self.sensorList[x].hardwareTypeCode){
                        text.push(self.sensorList[x].hardwareTypeName);
                      }
                    }
                  }
                }
              }
              for(let i=0;i<self.dialogForm.riskPlanSensorList.length;i++){
                for(let x=0;x<self.sensorList.length;x++){
                  if(self.dialogForm.riskPlanSensorList[i].sensorType == self.sensorList[x].hardwareTypeCode){
                    text.push(self.sensorList[x].hardwareTypeName);
                  }
                }
              }
              text = Array.from(new Set(text));
              text = text+''
              text = text.replace(",","+")
              console.log(text);
              let obj = JSON.parse(JSON.stringify(this.dialogForm))
              obj.riskAutoOff =Number(obj.riskAutoOff);
              obj.alarmType =obj.alarmType.toString();
              obj.startCondition = text+'';
              planLevelPut(obj).then((response) => {
                this.msgSuccess(response.msg)
                this.selectRiskPlanLeveListRiskPlanId();
                this.$set(this,'dialogOpen',false);
              });
            }else{
              //新增预案级别数据
              let text = [];
              for(let i=0;i<self.form.labRiskPlanLevels.length;i++){
                for(let o=0;o<self.form.labRiskPlanLevels[i].riskPlanSensorList.length;o++){
                  for(let x=0;x<self.sensorList.length;x++){
                    if(self.form.labRiskPlanLevels[i].riskPlanSensorList[o].sensorType == self.sensorList[x].hardwareTypeCode){
                      text.push(self.sensorList[x].hardwareTypeName);
                    }
                  }
                }
              }
              for(let i=0;i<self.dialogForm.riskPlanSensorList.length;i++){
                for(let x=0;x<self.sensorList.length;x++){
                  if(self.dialogForm.riskPlanSensorList[i].sensorType == self.sensorList[x].hardwareTypeCode){
                    text.push(self.sensorList[x].hardwareTypeName);
                  }
                }
              }
              text = Array.from(new Set(text));
              text = text+''
              text = text.replace(",","+")
              console.log(text);
              let obj = JSON.parse(JSON.stringify(this.dialogForm))
              obj.riskAutoOff =Number(obj.riskAutoOff);
              obj.alarmType =obj.alarmType.toString();
              obj.riskPlanId = this.addPlanData.id;
              obj.startCondition = text+'';
              planLevelAdd(obj).then((response) => {
                this.msgSuccess(response.msg)
                this.selectRiskPlanLeveListRiskPlanId();
                this.$set(this,'dialogOpen',false);
              });
            }
        //   }
        // })
          }
        })
      },
      //取消
      cancel(){
        this.$set(this,'dialogOpen',false);
      },
      //新增/编辑预案
      buttonClick(type,item,index){
        let self = this;
        if(type == 1){
          let a = 0;
          let b = 0;
          let c = 0;
          let d = 0;
          for(let i=0;i<self.form.labRiskPlanLevels.length;i++){
            if(self.form.labRiskPlanLevels[i].riskPlanLevel == 1){
              a++
            }else if(self.form.labRiskPlanLevels[i].riskPlanLevel == 2){
              b++
            }else if(self.form.labRiskPlanLevels[i].riskPlanLevel == 3){
              c++
            }else if(self.form.labRiskPlanLevels[i].riskPlanLevel == 4){
              d++
            }
          }
          this.$set(this,'dialogIndex',null);
          this.$set(this,'dialogTitle','新增预案规则');
          this.$set(this,'dialogForm',{
            riskPlanLevel:a==0?1:(b==0?2:(c==0?3:(d==0?4:''))),
            ifExit:null,
            alarmType:[],
            riskAutoOff:'60',
            riskPlanSensorList:[],
            riskPlanHardwareList:[],
          });
          this.$set(this,'dialogOpen',true);
        }else if(type == 2){
          this.$set(this,'dialogTitle','编辑预案规则');
          this.$set(this,'dialogIndex',index);
          let obj = JSON.parse(JSON.stringify(item))
          for(let i=0;i<obj.riskPlanHardwareList.length;i++){
            for(let o=0;o<self.hardwareList.length;o++){
              if(obj.riskPlanHardwareList[i].hardwareType == self.hardwareList[o].hardwareTypeEnum.code){
                obj.riskPlanHardwareList[i].hardwareList = self.hardwareList[o].functionStatusList
              }
            }
          }
          this.$set(this,'dialogForm',{
            id:obj.id,
            riskPlanId:obj.riskPlanId,
            riskPlanLevel:obj.riskPlanLevel,
            ifExit:obj.ifExit,
            alarmType:obj.alarmType.split(','),
            riskAutoOff:obj.riskAutoOff+'',
            riskPlanSensorList:obj.riskPlanSensorList,
            riskPlanHardwareList:obj.riskPlanHardwareList,
          });
          let list = [];
          for(let i=0;i<self.form.labRiskPlanLevels.length;i++){
            if(i!=index){
              list.push(self.form.labRiskPlanLevels[i]);
            }
          }
          this.$set(this,'labRiskPlanLevels',JSON.parse(JSON.stringify(list)));
          this.$set(this,'dialogOpen',true);
        }else if(type == 3){
          this.$confirm('确定要删除该预案规则吗?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
            let text = [];
            for(let i=0;i<self.form.labRiskPlanLevels.length;i++){
              if(index != i){
                for(let o=0;o<self.form.labRiskPlanLevels[i].riskPlanSensorList.length;o++){
                  for(let x=0;x<self.sensorList.length;x++){
                    if(self.form.labRiskPlanLevels[i].riskPlanSensorList[o].sensorType == self.sensorList[x].hardwareTypeCode){
                      text.push(self.sensorList[x].hardwareTypeName);
                    }
                  }
                }
              }
            }
            text = Array.from(new Set(text));
            text = text+''
            text = text.replace(",","+")
            let obj = {
              id:item.id,
              startCondition:text,
              riskPlanId:item.riskPlanId
            }
            planLevelDel(obj).then((response) => {
              self.msgSuccess(response.msg)
              self.selectRiskPlanLeveListRiskPlanId();
            });
          }).then(() => {
          }).catch(() => {});
        }
      },
    }
  }
</script>
<style lang="scss">
  .add-plan-max-button-color{
    color:#dedede!important;
  }
  //.el-form-item__content{
  //  margin-left: 0px!important;
  //  display: flex;
  //}
</style>
<style scoped lang="scss">
  .autoClose{
    display: flex;
    align-items: center;
    margin-bottom: 24px;
    .autoClose_l{
      width: 100px;
      color: #333;
      font-weight: 500;
      font-size: 14px;
      line-height: 40px !important;
      text-align: right;
      padding: 0 12px 0 0;
      box-sizing: border-box;
    }
    .autoClose_l:before{
      content: "*";
      color: #ff4949;
      margin-right: 4px;
    }

    .autoClose_l2{
      color: #333;
      font-weight: 500;
      font-size: 14px;
      line-height: 40px !important;
      margin-right: 8px;
    }
    .el-form-item{
      margin: 0px!important;
    }

    .autoClose_l3{

    }
    .autoClose_l4{
      color: #333;
      font-weight: 500;
      font-size: 14px;
      line-height: 40px;
      background: #f5f7fa;
      border: 1px solid #DCDFE6;
      border-left: none;
      width: 40px;
      height: 40px;
      text-align: center;
    }
    .autoClose_l5{
      color: #333;
      font-weight: 500;
      font-size: 14px;
      margin-left: 8px;
    }
  }
  .newAddPlan {
    flex: 1;
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
    p {
      margin: 0;
      font-weight: 500;
    }
    .newAddPlan-title-box {
      height: 80px;
      display: flex;
      border-bottom: 1px solid #E0E0E0;
      p:nth-child(1) {
        flex: 1;
        margin-left: 20px;
        font-size: 16px;
        color: #0045AF;
        line-height: 80px;
        font-weight: 700;
      }
      p:nth-child(2) {
        font-size: 14px;
        margin-top: 20px;
        margin-right: 20px;
      }
      p:nth-child(3) {
        font-size: 14px;
        width: 130px;
        margin-top: 20px;
        margin-right: 20px;
      }
      p:nth-child(4) {
        font-size: 14px;
        width: 150px;
        margin: 20px;
      }
    }
    .plan-for-max-box {
      flex: 1;
      padding:0 20px 20px 20px;
      .plan-for-max-box-name-box{
        display: flex;
        .plan-for-max-box-name-button-one{
          width:80px;
          text-align: center;
          font-size:14px;
          line-height:40px;
          margin:40px 0 0 40px;
        }
        .plan-for-max-box-name-button-two{
          width:80px;
          text-align: center;
          font-size:14px;
          line-height:40px;
          margin:40px 0 0 40px;
        }
        .plan-for-max-box-name-button-three{
          width:80px;
          text-align: center;
          font-size:14px;
          line-height:40px;
          margin:40px 0 0 20px;
        }
      }
      .for-plan-box{
        position: relative;
        border-radius:10px;
        overflow: hidden;
        box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.302);
        margin-bottom:24px;
        display: flex;
        .position-title-type{
          position:absolute;
          left:0;
          top:0;
          border-bottom-right-radius: 10px;
          width:84px;
          line-height:30px;
          font-size:14px;
          text-align: center;
        }
        .type-color-a{
          color:#0183FA;
          background: #CCE6FE;
        }
        .type-color-b{
          color:#FF9900;
          background: rgb(256,232,206);
        }
        .type-color-c{
          color:#FF4800;
          background: rgb(251,228,206);
        }
        .type-color-d{
          color:#FF0000;
          background:  rgba(248,206,205);;
        }
        .for-plan-img-box{
          width:284px;
          display: flex;
          flex-direction: column;
          .for-plan-img-null-p{
            flex:1;
          }
          .for-plan-img-box-big{
            display: flex;
            .for-plan-img-box-one{
              margin-left:81px;
              width:168px;
              display: flex;
              img{
                height:50px;
                width:50px;
              }
              p{
                margin-left:20px;
                line-height:50px;
                font-size:14px;
                color:#333;
              }
            }
            .for-plan-img-box-two{
              display: flex;
              img{
                height:50px;
                width:50px;
              }
              p{
                line-height:50px;
                font-size:14px;
                color:#333;
              }
            }
          }
        }
        .min-for-text-box{
          width:1030px;
          padding-top:21px;
          .min-for-text-box-one{
            width:460px;
            line-height:30px;
            margin-bottom:21px;
            margin-right:40px;
            border-radius:6px;
            color:#0183FA;
            background:rgb(209,229,253);
            display: inline-block;
            div{
              display: flex;
              p:nth-child(1){
                margin-right:15px;
                margin-left:9px;
              }
            }
          }
          .min-for-text-box-two{
            width:460px;
            line-height:30px;
            margin-bottom:21px;
            margin-right:40px;
            border-radius:6px;
            color:#333;
            background:rgb(253,242,227);
            display: inline-block;
            div{
              display: flex;
              p:nth-child(1){
                margin-right:15px;
                margin-left:9px;
              }
              p:nth-child(2){
                margin-right:15px;
              }
            }
          }
        }
        .for-button-max-box{
          flex:1;
          margin:19px 0;
          border-left:1px dashed #D8D8D8;
          display: flex;
          div{
            margin:auto 0 auto 34px;
            width:85px;
            display: flex;
            height:20px;
            cursor: pointer;
            img{
              height:14px;
              margin-top:3px;
            }
            p{
              font-size:14px;
              margin-left:9px;
            }
          }
        }
      }
      .plan-for-max-button-box{
        margin:30px auto;
        display: flex;
        .plan-for-max-button-null{
          flex:1;
        }
        .plan-for-max-button{
          cursor: pointer;
          color:#0183FA;
          border:1px dashed #0183FA;
          border-radius:4px;
          width:300px;
          line-height:40px;
          text-align: center;
          font-size:14px;
        }

      }
    }
  }
</style>