FE-V2-PC/src/views/emergencyManagement/evacuation/emergencyEvacuation/addPage.vue

<!--添加线路-->
<template>
    <div class="emergencyEvacuationAddPage scrollbar-box">
      <el-form :model="form" ref="form" :rules="rules" >
        <div class="top-title-box">
          <p>基础信息</p>
          <p class="inquire-button-one" @click="upButton">提交</p>
          <p class="reset-button-one" @click="backPage">返回</p>
        </div>
        <div class="info-max-box">
          <el-row>
            <el-col :span="5">
              <el-form-item label="楼栋">
                <el-input
                  v-model="lou"
                  placeholder="请选择楼栋"
                  disabled
                  clearable
                  size="small"/>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="楼层">
                <el-input
                  v-model="cen"
                  disabled
                  placeholder="请选择楼层"
                  clearable
                  size="small"/>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="路径类别" prop="lightDirection">
                <template>
                  <el-radio v-model="form.lightDirection" :label="1">向左疏散</el-radio>
                  <el-radio v-model="form.lightDirection" :label="2">向右疏散</el-radio>
                </template>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div class="top-title-box">
          <p>路线规划</p>
        </div>
        <div class="map-big-box">
          <div class="map-min-box">
            <div class="map-min-for-box" :class="item.checkType?'map-min-for-box-color':''"
                 v-for="(item,index) in fjList" :key="index">
              <p><i v-if="!item.checkType&&item.subjectId != -1" class="el-icon-circle-plus-outline" @click="addItem(item)"></i></p>
              <p>{{item.room}}</p>
            </div>
            <img class="map-min-img" src="@/assets/ZDimages/icon_sjt.gif">
            <img class="map-min-img" src="@/assets/ZDimages/icon_yjt.gif">
            <img class="map-min-img" src="@/assets/ZDimages/icon_zjt.gif">
            <img class="map-min-img" src="@/assets/ZDimages/icon_yjt.gif">
            <img class="map-min-img" src="@/assets/ZDimages/icon_zjt.gif">
            <img class="map-min-img" src="@/assets/ZDimages/icon_yjt.gif">
          </div>
        </div>
        <div class="top-title-box" style="margin-bottom:30px;">
          <p>疏散指示灯</p>
        </div>
        <p v-if="!form.labExitLineJoinList[0]" style="text-align: center;line-height:100px;color:#999;font-size:16px;">请添加实验室</p>
        <el-row class="for-box" v-for="(item,index) in form.labExitLineJoinList" :key="index" :gutter="24">
          <el-col :span="5">
            <el-form-item :label="'实验室'+(index+1)" label-width="90px">
              <el-input
                v-model="item.room"
                disabled
                placeholder="请选择实验室"
                clearable
                size="small"
              />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="绑定继电器" :prop="'labExitLineJoinList.'+ index +'.relayCode'" :rules="rules.relayCode" label-width="110px">
              <el-input
                v-model="item.relayCode"
                placeholder="请输入继电器"
                clearable
                size="small"
                maxlength="20"
              />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="继电器位置" :prop="'labExitLineJoinList.'+ index +'.relayBit'" :rules="rules.relayBit" label-width="110px">
              <el-select v-model="item.relayBit" placeholder="请选择继电器位置">
                <el-option
                  v-for="item in relayList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="序号" :prop="'labExitLineJoinList.'+ index +'.lightOrder'" :rules="rules.lightOrder">
              <el-input-number
                v-model="item.lightOrder"
                placeholder="请输入序号"
                clearable
                :min="0"
                :max="100"
              />
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <p class="reset-button-one" @click="delItem(item,index)">删除</p>
          </el-col>
        </el-row>
      </el-form>
    </div>
</template>

<script>
  import { lablayout,addExitJoin } from "@/api/laboratory/emergencyEvacuation";
  export default {
    name: 'emergencyEvacuationAddPage',
    props: {
      propsData:{},
    },
    data() {
      return {
        lou:"环境学院-祈福楼",
        cen:"环境与气象研究所",
        //下啦选项
        options:[],
        //继电器路数数据
        relayList:[
          {label:"1",value:"1"},{label:"2",value:"2"},{label:"3",value:"3"},{label:"4",value:"4"},{label:"5",value:"5"},
          {label:"6",value:"6"},{label:"7",value:"77"},{label:"8",value:"8"},{label:"9",value:"9"},{label:"10",value:"10"},
        ],
        form:{
          lightDirection:1,
          labExitLineJoinList:[],
        },
        // 表单校验
        rules: {
          lightDirection: [
            { required: true, message: "请选择路径类别", trigger: "blur" }
          ],
          // room: [
          //   { required: true, message: "请选择实验室", trigger: "blur" }
          // ],
          relayCode: [
            { required: true, message: "请输入继电器", trigger: "blur" },
            { required: true, message: "请输入继电器", validator: this.spaceJudgment, trigger: "blur" }
          ],
          relayBit: [
            { required: true, message: "请选择继电器位置", trigger: "blur" }
          ],
          lightOrder: [
            { required: true, message: "请输入序号", trigger: "blur" },
            { required: true, message: "请输入序号", validator: this.spaceJudgment, trigger: "blur" }
          ],
        },
        fjList:[],
      }
    },
    created() {
      this.lablayout();
    },
    mounted(){
    },
    methods: {
      upButton(){
        let self = this;
        this.$confirm('是否确认提交?', "", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          self.upData();
        }).then(() => {}).catch(() => {});
      },
      //提交
      upData(){
        let self = this;
        if(!self.form.labExitLineJoinList[0]){
          this.msgError("请添加实验室")
          return
        }
        this.$refs["form"].validate(valid => {
          if (valid) {
            let list = [];
            for(let i=0;i<self.form.labExitLineJoinList.length;i++){
              let minObj = {
                subjectId:self.form.labExitLineJoinList[i].subjectId,
                relayCode:self.form.labExitLineJoinList[i].relayCode,
                relayBit:self.form.labExitLineJoinList[i].relayBit,
                lightOrder:self.form.labExitLineJoinList[i].lightOrder,
              }
              list.push(minObj);
            }
            let obj = {
              lineDeptId:"137",
              buildId:"5",
              lightDirection:this.form.lightDirection,
              lineJoinList:list
            };
            addExitJoin(obj).then(response => {
              this.msgSuccess("操作成功")
              this.backPage();
            });
          }
        })
      },
      //返回
      backPage(){
        this.$parent.pageTypeClick(1);
      },
      addItem(item){
        let self = this;
        let num = 0;
        for(let i=0;i<self.form.labExitLineJoinList.length;i++){
          if(self.form.labExitLineJoinList.subjectId == item.subjectId){
            num++
          }
        }
        if(num>0){
          this.msgError("该实验室已添加");
          return
        }
        let obj = {
          room:item.room,
          subjectId:item.subjectId,
          relayCode:"",
          relayBit:"",
          lightOrder:"",
        }
        this.form.labExitLineJoinList.push(obj);
        item.checkType = true;
        this.$forceUpdate();
      },
      delItem(item,index){
        console.log("index",index);
        let self = this;
        for(let i=0;i<self.fjList.length;i++){
          if(self.fjList[i].subjectId == item.subjectId){
            self.fjList[i].checkType = false;
          }
        }
        this.form.labExitLineJoinList.splice(index,1);
        this.$forceUpdate();
      },
      //获取层实验室数据
      lablayout(){
        let self = this;
        let id = 137;
        lablayout(id).then(response => {
          for(let i=0;i<response.data.length;i++){
            if(response.data[i].id == 5){
              for(let o=0;o<response.data[i].list.length;o++){
                response.data[i].list[o].checkType = false;
              }
              self.fjList = response.data[i].list;
            }
          }
          if(self.propsData.id){
            for(let o=0;o<self.propsData.labExitLineJoinList.length;o++){
              for(let i=0;i<self.fjList.length;i++){
                if(self.propsData.labExitLineJoinList[o].subjectId == self.fjList[i].subjectId){
                  self.fjList[i].checkType = true;
                }
              }
            }
            this.$set(this,'form',this.propsData);
          }
        });
      },
    }
  }
</script>

<style scoped lang="scss">
  .emergencyEvacuationAddPage{
    flex:1;
    display: flex;
    flex-direction: column;
    overflow-y:scroll;
    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
    border-radius:10px;
    padding:20px;
    p{
      margin:0;
    }
    .top-title-box{
      display: flex;
      border-bottom:1px solid #e0e0e0;
      p:nth-child(1){
        flex:1;
        line-height:20px;
        font-size:18px;
        padding:10px 0 30px;
        color:#0045AF;
      }
      p:nth-child(2){
        margin-right:20px;;
        font-size:14px;
      }
    }
    .info-max-box{
      margin:30px 0 0 30px;
    }
    .map-big-box{
      width:1410px;
      height:545px;
      margin:20px auto 20px;
      border:1px solid #E0E0E0;
      .map-min-box{
        height:505px;
        width:1133px;
        margin:20px auto;
        background: url("../../../../assets/ZDimages/icon_bj_syspmtcy_jinan.png");
        position: relative;
        .map-min-for-box{
          overflow: hidden;
          display: inline-block;
          background: rgba(0,189,255,0.3);
          p:nth-child(1){
            text-align: center;
            height:80px;
            i{
              cursor: pointer;
              font-size:26px;
              line-height:80px;
              color: rgb(0,189,255);
              margin:0 auto;
            }
          }
          p:nth-child(2){
            text-align: center;
            line-height:20px;
            font-size:16px;
            color:#333;
          }
        }
        .map-min-for-box-color{
          background: rgba(0,189,255,0.3);
        }
        .map-min-for-box:nth-child(1){
          margin:4px 143px 0 0;
          width:162px;
          height:162px;
        }
        .map-min-for-box:nth-child(2){
          margin:4px 0 0 0;
          width:101px;
          height:162px;
        }
        .map-min-for-box:nth-child(3){
          margin:4px 0 0 0;
          width:101px;
          height:162px;
        }
        .map-min-for-box:nth-child(4){
          margin:4px 0 0 0;
          width:100px;
          height:162px;
        }
        .map-min-for-box:nth-child(5){
          margin:4px 0 0 0;
          width:100px;
          height:162px;
        }
        .map-min-for-box:nth-child(6){
          margin:4px 0 0 0;
          width:100px;
          height:162px;
        }
        .map-min-for-box:nth-child(7){
          margin:4px 0 0 0;
          width:100px;
          height:162px;
        }
        .map-min-for-box:nth-child(8){
          margin:4px 60px 0 0;
          width:100px;
          height:162px;
        }
        .map-min-for-box:nth-child(9){
          margin: 90px 0 0 0;
          width: 92px;
          height: 240px;
          line-height:230px;
        }
        .map-min-for-box:nth-child(10){
          margin: 90px 0 0 0;
          width: 107px;
          height: 240px;
          line-height:230px;
        }
        .map-min-for-box:nth-child(11){
          margin: 90px 0 0 0;
          width: 107px;
          height: 240px;
          line-height:230px;
        }
        .map-min-for-box:nth-child(12){
          margin: 90px 0 0 0;
          width: 100px;
          height: 240px;
          line-height:230px;
        }
        .map-min-for-box:nth-child(13){
          margin: 90px 0 0 0;
          width: 100px;
          height: 240px;
          line-height:230px;
        }
        .map-min-for-box:nth-child(14){
          margin: 90px 0 0 0;
          width: 100px;
          height: 240px;
          line-height:230px;
        }
        .map-min-for-box:nth-child(15){
          margin: 90px 0 0 0;
          width: 100px;
          height: 240px;
          line-height:230px;
        }
        .map-min-for-box:nth-child(16){
          margin: 90px 0 0 0;
          width: 100px;
          height: 240px;
          line-height:230px;
        }
        .map-min-for-box:nth-child(17){
          margin: 90px 0 0 0;
          width: 100px;
          height: 240px;
          line-height:230px;
        }
        .map-min-for-box:nth-child(18){
          margin: 90px 60px 0 0;
          width: 100px;
          height: 240px;
          line-height:230px;
        }
        .map-min-img{
          position: absolute;
          width:40px;
          height:28px;
        }
        .map-min-img:nth-child(19){
          top: 128px;
          left: 175px;
        }
        .map-min-img:nth-child(20){
          top: 194px;
          left: 231px;
        }
        .map-min-img:nth-child(21){
          top: 194px;
          left: 540px;
        }
        .map-min-img:nth-child(22){
          top: 194px;
          left: 630px;
        }
        .map-min-img:nth-child(23){
          top: 194px;
          left: 940px;
        }
        .map-min-img:nth-child(24){
          top: 194px;
          left: 1030px;
        }
      }
    }
    .for-box{
      margin:0 ;
    }
  }
</style>