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

<!--应急疏散(针对矿大增加了楼栋与楼层的选择)-->
<template>
  <div class="app-container performEvacuation">
    <div class="performEvacuation-page scrollbar-box" v-if="pageType == 1">
      <div class="top-title-box building-box">
        <el-select v-model="buildingId" @change="selectChange" placeholder="请选择">
          <el-option
            v-for="item in buildingList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <!--<i class="el-icon-arrow-down"></i>-->
      </div>
      <div class="for-button-box">
        <div class="for-button-min-box" :class="buttonId == item.id ?'button-one':'button-two'"
             @click="buttonListClick(item.id,index)"
             v-for="(item,index) in floorList" :key="index">{{item.name}}</div>
      </div>
      <div class="map-big-box">
        <div class="map-min-box" :class="buttonId == '5'?'map-min-box-1':(buttonId == '6'?'map-min-box-2':(buttonId == '7'?'map-min-box-3':''))">
          <div class="map-min-for-box" :class="item.subjectId == subId?'map-min-for-box-color':''"
               v-for="(item,index) in fjList" :key="index" @click="clickDiv(item)">
            {{item.room}}
          </div>
          <!--<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">-->
          <!--<img class="map-min-img" src="@/assets/ZDimages/icon_zjt.gif">-->
          <!--<img class="map-min-img" src="@/assets/ZDimages/icon_yjt.gif">-->
        </div>
      </div>
      <p class="bottom-button-p inquire-button-one" @click="goEvacuation">查看</p>
    </div>
    <emergency-evacuation-big v-if="pageType == 2" :routerType="true"></emergency-evacuation-big>
  </div>
</template>

<script>
  import emergencyEvacuationBig from "../../../emergencyEvacuationBigOne.vue"
  import { getRedis } from '@/api/executeThePlan'
  import { getBuilding } from "@/api/laboratory/building";
  import { treeselectByUser } from "@/api/system/dept";
  export default {
    name: 'performEvacuation',
    components: {
      emergencyEvacuationBig,
    },
    data() {
      return {
        pageType:0,
        subId:"",
        title:"",
        buttonList:[
          {name:"环境与气象研究所",}
        ],
        buttonIndex:0,
        routeList:[
          {
            id:"1",
            name:"向左疏散",
          },
          {
            id:"2",
            name:"向右疏散",
          },
          {
            id:"0",
            name:"两侧疏散",
          },
        ],
        fjList:[],
        form:{
          lightDirection:"",
        },
        //楼栋选择数据
        buildingList:[],
        floorList:[],
        buildingId:null,
        buttonId:null,
      }
    },
    created() {
      if(this.$route.query.subId){
        this.subId = this.$route.query.subId;
        this.title = this.$route.query.text;
        this.pageType = 2;
      }else{
        this.getRedis();
      }
    },
    mounted(){
      this.treeselectByUser();
    },
    methods:{
      getBuilding(id){
        getBuilding(id).then(response => {
          // this.$set(this,'floorList',response.data);
          // 过滤了三楼
          let list = [];
          for(let i=0;i<response.data.length;i++){
            if(response.data[i].id != 7){
              list.push(response.data[i]);
            }
          }
          this.$set(this,'floorList',list);
          if(response.data[0]){
            this.$set(this,'buttonId',response.data[0].id);
            this.$set(this,'fjList',response.data[0].list);
          }
        })
      },
      //获取院系/楼层
      treeselectByUser(){
        treeselectByUser().then(response => {
          let list = [];
          for(let i=0;i<response.data.length;i++){
            for(let o=0;o<response.data[i].children.length;o++){
              let obj = {
                label:response.data[i].label+'-'+response.data[i].children[o].label,
                value:response.data[i].children[o].id,
              }
              list.push(obj);
              if(i==0&&o==0){
                this.$set(this,'buildingId',response.data[i].children[o].id);
              }
            }
          }
          this.$set(this,'buildingList',list);
          this.getBuilding(this.buildingId);
        });
      },
      // 楼层点击
      buttonListClick(id,index){
        this.$set(this,'buttonId',id);
        this.$set(this,'fjList',this.floorList[index].list);
        this.$set(this,'subId',"");
        this.$set(this,'title',"");
      },
      goPage(type){
        if(type == 2){
          this.pageType = 2;
        }else if(type == 1){
          this.treeselectByUser();
          this.$set(this,'subId',"");
          this.$set(this,'title',"");
          this.pageType = 1;
        }
      },
      //获取当前疏散页面
      getRedis(){
        getRedis().then(data => {
          if(data.data){
            this.pageType = 2;
          }else{
            this.pageType = 1;
          }
        });
      },
      //页面切换
      backPage(){
        this.pageType = 1;
      },
      //点击选中实验室
      clickDiv(item){
        if(item.subjectId == -1){
          this.msgError("该房间未绑定实验室");
          return
        }
        if(item.subjectId == this.subId){
          this.subId = "";
          this.title = "";
        }else{
          this.subId = item.subjectId;
          this.title = item.subjectName;
        }
      },
      //确认疏散
      goEvacuation(){
        let self = this;
        if(!this.subId){
          this.msgError("请选择需要查看的实验室");
          return
        }
        localStorage.setItem('evacuationSubId',this.subId)
        localStorage.setItem('evacuationTitel',this.title)
        localStorage.setItem('evacuationButtonId',this.buttonId)
        localStorage.setItem('evacuationBuildingId',this.buildingId)
        let address = "";
        for(let i=0;i<self.buildingList.length;i++){
          if(self.buildingList[i].value == self.buildingId){
            address = self.buildingList[i].label
          }
        }
        for(let i=0;i<self.floorList.length;i++){
          if(self.floorList[i].id == self.buttonId){
            address = address +'-'+self.floorList[i].name;
          }
        }
        localStorage.setItem('evacuationAddress',address)
        this.pageType = 2;
      },
      //选择疏散方向
      selectChange(e){
        this.$set(this,'buildingId',e);
        this.getBuilding(this.buildingId);
      },
    }
  }
</script>

<style scoped lang="scss">
  .performEvacuation{
    flex:1;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
    border-radius:10px;
    .performEvacuation-page{
      flex:1;
      display: flex;
      flex-direction: column;
      overflow-y: scroll;
    }
    .top-title-box{
      height:80px;
      line-height:80px;
      margin:0 46px;
      border-bottom:1px solid #E0E0E0;
      color:#0045AF;
      font-size:18px;
      i{
        margin-left:18px;
      }
    }
    .for-button-box{
      margin:26px 86px 26px;
      display: flex;
      .for-button-min-box{
        margin-right:20px!important;
      }
      .for-button-null-box{
        text-align: right;
        font-size:16px;
        line-height:40px;
        margin-right:20px;
        flex:1;
      }
      .for-button-right-box{

      }
      .button-one{
        font-size:14px;
        cursor:pointer;
        display: inline-block;
        text-align: center;
        padding:0 20px;
        height: 40px;
        line-height:40px;
        border-radius: 6px;
        border: 1px solid #0045af;
        color:#ffffff;
        background:#0045af;
        margin:0;
      }
      .button-two{
        font-size:14px;
        cursor:pointer;
        display: inline-block;
        text-align: center;
        padding:0 20px;
        height: 40px;
        line-height:40px;
        border-radius: 6px;
        border: 1px solid #DCDFE6;
        color:#606266;
        font-size: 14px;
        background:#ffffff;
        margin:0;
      }
    }
    .map-big-box{
      width:1410px;
      height:545px;
      margin:0 auto;
      border:1px solid #E0E0E0;
      margin-bottom:20px;
      .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;
          line-height:150px;
          text-align: center;
        }
        .map-min-for-box:hover{
          cursor: pointer;
          background: rgba(0,189,255,0.3);
        }
        .map-min-for-box-color{
          background: rgba(0,189,255,0.3);
        }
        .map-min-img{
          position: absolute;
          width:40px;
          height:28px;
        }
      }
    }
    .bottom-button-p{
      margin: 20px auto 40px;
      width:160px;
    }
  }
</style>

<style lang="scss">
  .performEvacuation{
    .building-box{
      .el-input__inner{
        border:none;
        color:#0045AF;
        font-size:18px;
      }
      .el-select .el-input .el-select__caret{
        font-size:20px;
      }
      .el-select{
        display: flex;
      }
    }
  }
</style>