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

<!--疏散路线(针对矿大增加了楼栋与楼层的选择)-->
<template>
  <div class="app-container emergencyEvacuation">
    <div class="emergencyEvacuation-page scrollbar-box" v-if="pageType == 1">
      <div class="top-title-box building-box">
        <el-select v-model="buildingId" 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">
          <div :class="buttonId == item.id ?'button-one':'button-two'"
               @click="buttonListClick(item.id)"
               v-for="(item,index) in floorList" :key="index">{{item.name}}</div>
        </div>
        <div class="for-button-right-box button-one" @click="pageTypeClick(2)" v-hasPermi="['laboratory:line:add']">新增疏散路线</div>
      </div>
      <div class="map-big-box">
        <div class="map-min-box">
          <div class="map-min-for-box" v-for="(item,index) in fjList" :key="index">
            {{item.room}}
          </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="table-box">
        <el-table v-loading="loading" border :data="routeList">
          <el-table-column label="路径类别" align="left" prop="lightDirection" width="200">
            <template slot-scope="scope">
              {{scope.row.lightDirection == 1?'向左疏散':(scope.row.lightDirection == 2?'向右疏散':'')}}
            </template>
          </el-table-column>
          <el-table-column label="实验室" align="left" prop="subNames"/>
          <el-table-column label="指示灯数量" align="left" prop="labExitLineJoinList.length" width="200"/>
          <el-table-column label="操作" align="center" width="160" v-if="tableButtonType">
            <template slot-scope="scope">
              <div class="button-box">
                <p class="table-min-button"
                   v-hasPermiAnd="['laboratory:line:query','laboratory:line:edit']"
                   @click="laboratoryLine(scope.row)"
                >编辑</p>
                <p class="table-min-button"
                   v-hasPermi="['laboratory:line:remove']"
                   @click="delButton(scope.row)"
                >移除</p>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <pagination :page-sizes="[20, 30, 40, 50]"
                    v-show="total>0"
                    :total="total"
                    :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize"
                    @pagination="getList"
        />
      </div>
    </div>
    <add-page v-if="pageType == 2"
              :propsData="propsData"
              :propsList="propsList"></add-page>
  </div>
</template>

<script>
  import { buildIdList,lablayout,laboratoryLine,laboratoryLineDel,getRedis } from "@/api/laboratory/emergencyEvacuation";
  import addPage from './addPageOne.vue'
  export default {
    components:{
      addPage
    },
    name: "emergencyEvacuation",
    data() {
      return {
        tableButtonType:this.hasPermiDom(['laboratory:line:query','laboratory:line:edit','laboratory:line:remove']),
        pageType:1,
        fjList:[],
        queryParams:{
          pageNum:1,
          pageSize:20,
        },
        routeList:[],
        loading:false,
        total:0,
        //组件传参数据
        propsData:{},
        propsList:{},
        //楼栋选择数据
        buildingList:[
          {value:'1',label:'环境学院-祈福楼1'},
          {value:'2',label:'环境学院-祈福楼2'},
          {value:'3',label:'环境学院-祈福楼3'},
        ],
        floorList:[
          {name:"环境与气象研究所",id:'1'},
          {name:"环境与气象研究所",id:'2'},
          {name:"环境与气象研究所",id:'3'},
          {name:"环境与气象研究所",id:'4'},
          {name:"环境与气象研究所",id:'5'},
          {name:"环境与气象研究所",id:'6'},
          {name:"环境与气象研究所",id:'7'},
        ],
        buildingId:"1",
        buttonId:'1',
      }
    },
    created() {
    },
    mounted(){
      this.getList();
      this.lablayout();
    },
    methods: {
      // 楼层点击
      buttonListClick(id){
        this.$set(this,'buttonId',id);
      },
      //删除按钮
      delButton(item){
        let self = this;
        this.$confirm('是否确认删除?', "", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          self.delItem(item);
        }).then(() => {}).catch(() => {});
      },
      //删除路线
      delItem(item){
        laboratoryLineDel(item.id).then(response => {
          this.msgSuccess("操作成功");
          this.getList();
        });
      },
      //根据学院获取层数据
      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){
              self.fjList = response.data[i].list;
            }
          }
        });
      },
      //获取层线路
      getList(){
        let id = 5;
        buildIdList(id).then(response => {
          this.routeList = response.rows;
          this.total = response.total;
        });
      },
      //获取路线详情
      laboratoryLine(item){
        laboratoryLine(item.id).then(response => {
          console.log("resp",response)
          this.$set(this,'propsData',response.data)
          this.$set(this,'propsList',{
            buildingList:this.buildingList,
            floorList:this.floorList,
            buildingId:this.buildingId,
            buttonId:this.buttonId,
          })
          this.pageType = 2;
        });
      },
      //切换页面状态
      pageTypeClick(type){
        if(type == 1){
          this.pageType = 1;
          this.getList();
        }else if(type == 2){
          this.$set(this,'propsData',{});
          this.$set(this,'propsList',{
            buildingList:this.buildingList,
            floorList:this.floorList,
            buildingId:this.buildingId,
            buttonId:this.buttonId,
          })
          this.pageType = 2;
        }
      },
    }
  };
</script>


<style scoped lang="scss">
  .emergencyEvacuation{
    flex:1;
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
    .emergencyEvacuation-page{
      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;
      .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{
          flex:1;
          div{
            margin-right:20px!important;
          }
        }
        .for-button-null-box{
          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: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;
          }
        }
      }
      .table-box{
        min-height:400px;
        display: flex;
        flex:1;
        flex-direction: column;
        margin:20px 20px;
        .button-box{
          display: flex;
          p:nth-child(1){
            margin-right:20px;
          }
        }
      }
    }
  }
</style>
<style lang="scss">
  .emergencyEvacuation{
    .building-box{
      .el-input__inner{
        border:none;
        color:#0045AF;
        font-size:18px;
      }
      .el-select .el-input .el-select__caret{
        font-size:20px;
      }
    }
  }
</style>