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">不关联仅保存</p>
      <p class="inquire-button-one" @click="associatedDialogClick(1)">保存并关联实验室</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">
        <el-form-item label="预案名称:" prop="name" style="margin:40px 0;">
          <el-input
            v-model="form.name"
            placeholder="请输入预案名称"
            clearable
            size="small"
            maxLength="50"
          />
        </el-form-item>
        <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">
                <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 class="min-for-text-box-one" v-for="(minItemOne,minIndexOne) in item.riskPlanSensorList" :key="minIndexOne">
              <div>
                <p>启动条件：</p>
                <p>监测区间：{{minItemOne.minMonitor}}-{{minItemOne.maxMonitor}}</p>
              </div>
            </div>
            <div class="min-for-text-box-two" v-for="(minItemTwo,minIndexTwo) in item.riskPlanHardwareList" :key="minIndexTwo">
              <div>
                <p>执行动作：</p>
                <p>执行办法：</p>
                <p>结束操作：</p>
              </div>
            </div>
          </div>
          <div class="for-button-max-box">
            <div @click="buttonClick(2)">
              <img src="@/assets/ZDimages/evacuation3_2/icon_znwl_bj.png">
              <p>编辑</p>
            </div>
            <div @click="buttonClick(3)">
              <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" @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">
      <div class="scrollbar-box" style="height:600px;">
        <el-form :model="dialogForm" ref="dialogForm" :rules="rules" label-width="100px">
          <el-form-item label="预案等级：" prop="type1">
            <el-radio-group v-model="dialogForm.type1">
              <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="name">
              <el-radio-group v-model="dialogForm.type2">
                <el-radio :label="1">否</el-radio>
                <el-radio :label="2">是</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>
          <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.list1" :key="index">
              <div style="flex:1;">
                <el-form-item label="监测设备：" prop="type4">
                  <el-select v-model="item.type4" placeholder="请选择">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div style="flex:1;display: flex">
                <el-form-item label="监测区间：" prop="name">
                  <el-input-number v-model="item.type5" style="width:90px;" :min="1" :max="999" :controls="false" label="描述文字"></el-input-number>
                </el-form-item>
                <p style="width:30px;text-align: center;line-height:40px;">-</p>
                <el-form-item label="" prop="name" label-width="0">
                  <el-input-number v-model="item.type6" style="width:90px;" :min="1" :max="999" :controls="false" label="描述文字"></el-input-number>
                </el-form-item>
                <p class="el-icon-delete" 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)">+ 新增监测规则</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.list2" :key="index">
              <div style="flex:1;display: flex">
                <el-form-item label="执行设备：" prop="type4">
                  <el-select v-model="item.type4" placeholder="请选择" style="width:130px;">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="执行办法：" prop="type4">
                  <el-select v-model="item.type4" placeholder="请选择" style="width:130px;">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="结束操作：" prop="type4">
                  <el-select v-model="item.type4" placeholder="请选择" style="width:130px;">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <p class="el-icon-delete" 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)">+ 新增执行动作</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>
    <el-dialog title='关联实验室' v-if="dialogAssociatedOpen" :visible.sync="dialogAssociatedOpen" width="1200px">
      <div style="height: 600px;overflow: hidden;display: flex;flex-direction: column;flex:1;">
        <el-form :model="param" ref="queryForm" :inline="true" label-width="80px">
          <el-form-item label="关键字" prop="name">
            <el-input
              maxlength="10"
              v-model="param.searchValue"
              placeholder="实验室/危险源"
              clearable
              size="small"
            />
          </el-form-item>
          <el-form-item label="安全分类" prop="deptId" label-width="80px">
            <el-select v-model="param.deptId" placeholder="请选择安全分类" clearable size="small">
              <el-option
                v-for="dict in options"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="安全分级" prop="deptId" label-width="80px">
            <el-select v-model="param.deptId" placeholder="请选择安全分级" clearable size="small">
              <el-option
                v-for="dict in options"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <p class="inquire-button-one" style="margin-right:10px;" @click="onSearch">查询</p>
            <p class="reset-button-one" @click="resetForm">重置</p>
          </el-form-item>
        </el-form>
        <div style="display: flex;background: rgb(202,229,253);height:40px;line-height:40px;font-size:16px;padding:0 82px;">
          <p style="margin-right:24px;">已选择 <span style="color:#0183FA;">1</span> 项</p>
          <p style="color:#0183FA;cursor: pointer;" >全选本页</p>
          <p style="color:#0183FA;margin:0 32px 0 30px;cursor: pointer;" >选择全部</p>
          <p style="color:#FF8F1F;cursor: pointer;" >清除选项</p>
        </div>
        <el-table v-loading="loading" border :data="tableData">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="实验室" width="220" align="center" prop="id" />
          <el-table-column label="安全分类" width="100" align="center" prop="id" />
          <el-table-column label="安全分级" width="100" align="center" prop="id" />
          <el-table-column label="危险源" align="left">
            <div style="margin-bottom:10px;">
              <div style="display: inline-block;padding:0 10px;border:1px solid #E0E0E0;margin:10px 10px 0 0;">
                <span style="line-height:40px;font-size:14px;">马弗炉 - 马弗炉温度传感器</span>
                <span class="el-icon-circle-close" style="cursor: pointer;width:14px;height:14px;margin-left:10px;margin-top:14px;color:#666;"></span>
              </div>
              <p style="color:#0183FA;font-size:16px;border:1px solid #0183FA;
              border-radius:4px;width:88px;height:30px;line-height:30px;
              display: inline-block;margin:5px 0 0 10px;text-align: center;cursor: pointer;">新增危险源</p>
              <div style="display: flex;margin-top:10px;">
                <el-select v-model="param.deptId" placeholder="请选择安全分类" clearable style="width:168px;">
                  <el-option
                    v-for="dict in options"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
                <p style="width:30px;text-align: center;line-height:40px;">-</p>
                <el-select v-model="param.deptId" placeholder="请选择安全分类" clearable style="width:168px;">
                  <el-option
                    v-for="dict in options"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
                <p style="color:#CCCCCC;font-size:16px;border:1px solid #E0E0E0;
                border-radius:4px;width:80px;height:30px;line-height:30px;
                display: inline-block;margin:5px 0 0 10px;text-align: center;cursor: pointer;">取消</p>
                <p style="color:#0183FA;font-size:16px;border:1px solid #0183FA;
                border-radius:4px;width:80px;height:30px;line-height:30px;
                display: inline-block;margin:5px 0 0 10px;text-align: center;cursor: pointer;">确定</p>
              </div>
            </div>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="param.pageNum"
          :limit.sync="param.pageSize"
          @pagination="getList"
        />
      </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="associatedDialogClick(2)">取消</p>
          <p style="cursor: pointer;border-radius:6px;width:70px;line-height:30px;font-size:12px;text-align:center;color:#fff;background:#0045AF;" @click="associatedDialogClick(3)">确定</p>
          <p style="flex:1;"></p>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { optionHardware } from "@/api/laboratory/hardware";
  import { optionSensor } from "@/api/laboratory/sensor";
  export default {
    name: "newAddPlan",
    props:{
      pageData:{},
    },
    data() {
      return {
        form:{
          list:[
            {type:1},{type:2},{type:3},{type:4},
          ],
        },
        dialogTitle:'',
        dialogOpen:false,
        dialogForm:{
          list1:[{}],
          list2:[{}],
        },
        // 表单校验
        rules: {
          name: [
            { required: true, message: "请输入预案名称", trigger: "blur" },
            { required: true, message: "请输入预案名称", validator: this.spaceJudgment, trigger: "blur" }
          ],
        },
        //检测设备列表
        options:[{value: '选项1', label: '黄金糕'},{value: '选项1', label: '黄金糕'},],
        /***************关联危险源开始****************/
        // 遮罩层
        loading: false,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 查询数据
        param:{},
        total:5,
        //关联实验室
        dialogAssociatedOpen:false,
        tableData:[{}],
        //选择数据
        sensorList:[],
        sensorListData:[],
        hardwareList:[],
        /***************关联危险源结束****************/
      }
    },
    created(){
      if(this.pageData){
        this.$set(this,'form',this.pageData);
      }else{
        this.$set(this,'form',{
          name:"",
          labRiskPlanLevels:[],
        });
      }
      console.log('pageData',this.pageData)
    },
    mounted(){
      this.getOptionData();
    },
    methods: {
      getOptionData(){
        optionSensor({}).then(response => {
          this.sensorList = response.data;
          this.sensorListData = JSON.parse(JSON.stringify(response.data))
        });
        optionHardware({}).then(response => {
          var allDate = new Array();
          for(let key=0 ;key<response.data.length;key++){
            allDate.push({"id":response.data[key].hardwareTypeEnum.code,"name":response.data[key].hardwareTypeEnum.name})
          }
          this.hardwareList = allDate;
        });
      },
      backButton(){
        this.$parent.tableClickButton(5)
      },
      /***************关联危险源开始****************/
      // 开关
      associatedDialogClick(type){
        if(type == 1){
          this.$set(this,'dialogAssociatedOpen',true);
        }else if (type == 2){
          this.$set(this,'dialogAssociatedOpen',false);
        }else if(type == 3){
          //提交
        }
      },
      //查询
      onSearch(){

      },
      //重置
      resetForm(){

      },
      //勾选
      handleSelectionChange(selection){
        this.ids = selection.map(item => item.id)
        this.single = selection.length!==1
        this.multiple = !selection.length
      },
      /***************关联危险源结束****************/
      addMinData(type){
        if(type == 1){
          this.dialogForm.list1.push({})
        }else if(type == 2){
          this.dialogForm.list2.push({})
        }
      },
      //提交
      submitForm(){

      },
      //取消
      cancel(){
        this.$set(this,'dialogOpen',false);
      },
      //新增/编辑预案
      buttonClick(type){
        if(type == 1){
          this.$set(this,'dialogTitle','新增预案规则');
          this.$set(this,'dialogOpen',true);
        }else if(type == 2){
          this.$set(this,'dialogTitle','编辑预案规则');
          this.$set(this,'dialogOpen',true);
        }else if(type == 3){
          this.$confirm('确定要删除该预案规则吗?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
            console.log('删除该预案规则')
          }).then(() => {
          }).catch(() => {});
        }
      },
    }
  }
</script>

<style scoped lang="scss">
  .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;
      }
      p:nth-child(4) {
        font-size: 14px;
        width: 150px;
        margin: 20px;
      }
    }
    .plan-for-max-box {
      flex: 1;
      padding:0 20px 20px 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:400px;
            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:400px;
            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>