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" @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">
          <!--楼层选择器-->
          <div :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="for-button-right-box button-one" @click="pageTypeClick(2)" v-hasPermi="['laboratory:line:add']">新增疏散路线</div>
      </div>
      <div class="map-big-box" v-if="buttonId == '5'||buttonId == '6'||buttonId == '7'">
        <div :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"
               v-for="(item,index) in fjList" :key="index">
            {{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 v-if="buttonId != '5'&& buttonId != '6'&& buttonId != '7'" style="text-align: center;color:#999;">缺少对应场景地图</p>
      <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="table-button-box">
                <p class="table-button-null"></p>
                <p class="table-button-p"
                   v-hasPermiAnd="['laboratory:line:query','laboratory:line:edit']"
                   @click="laboratoryLine(scope.row)"
                >编辑</p>
                <p class="table-button-p"
                   v-hasPermi="['laboratory:line:remove']"
                   @click="delButton(scope.row)"
                >移除</p>
                <p class="table-button-null"></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 { getBuilding } from "@/api/laboratory/building";
  import { treeselectByUser } from "@/api/system/dept";
  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,
        queryParams:{
          pageNum:1,
          pageSize:20,
        },
        routeList:[],
        loading:false,
        total:0,
        //组件传参数据
        propsData:{},
        propsList:{},
        //楼栋选择数据
        buildingList:[],
        buildingId:null,
        floorList:[],
        buttonId:null,
        fjList:[],
      }
    },
    created() {
    },
    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);
            this.getList();
          }
        })
      },
      //获取院系/楼层
      treeselectByUser(){
        treeselectByUser().then(response => {
          let list = [];
          for(let i=0;i<response.data.length;i++){
            if(response.data[i].children){
              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.getList();
      },
      //删除按钮
      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();
        });
      },
      //获取层线路
      getList(){
        let id = this.buttonId;
        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;
        }
      },
      //选择疏散方向
      selectChange(e){
        this.$set(this,'buildingId',e);
        this.getBuilding(this.buildingId);
      },
    }
  };
</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;
        }
      }
      .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;
      }
      .el-select{
        display: flex;
      }
    }
  }
</style>