zc

src/README.md

@@ -0,0 +1,30 @@
+## 开发 使用多页面 后端路由设置方法 适配不同学院不同需求
+
+# 针对矿大项目修改      针对布局与疏散图 适配多楼栋 多楼层
+views
+  comprehensive
+    laboratoryManagement
+      subject
+        indexOne.vue
+        infoPageOne.vue
+      building
+        indexOne.vue
+  emergencyManagement
+    evacuation
+      emergencyEvacuation
+        indexOne.vue
+        addPageOne.vue
+        performEvacuationOne.vue
+  emergencyEvacuationBigOne.vue(本地静态路由需要同步修改)
+        
+        
+        
+        
+# 针对空军四医大项目   实验室-物联设备配置只有传感器与智能门禁
+views
+  comprehensive
+    laboratoryManagement
+      subject
+        deviceListOne.vue
+
+# 部分牵扯前端页面跳转写死部分

src/api/system/dept.js

@@ -109,3 +109,12 @@ export function deptSign(data) {
     data: data
   })
 }
+
+//根据账户查询学院与楼栋
+export function treeselectByUser(data) {
+  return request({
+    url: '/system/dept/treeselectByUser',
+    method: 'get',
+    data: data
+  })
+}

src/assets/styles/ZDindex.sass

@@ -3,5 +3,6 @@
 @import 'ZDelement'
 @import 'ZDpageCss'
 @import 'ZDvideo'
-@import 'ZDmap'
 @import 'ZDbigData'
+@import 'ZDmap'
+@import 'kuangdaMap'

src/assets/styles/kuangdaMap.scss

@@ -0,0 +1,660 @@
+//预警布局
+.map-big-box{
+  width:1410px;
+  height:545px;
+  margin:0 auto;
+  border:1px solid #E0E0E0;
+  margin-bottom:20px;
+  //一层
+  .map-min-box-1{
+    height:506px;
+    width:1109px;
+    margin:20px auto;
+    background :url("../ZDimages/kuangdaMap/map1.png");
+    background-size: 100%;
+    position: relative;
+    overflow: hidden;
+    .map-min-for-box{
+      overflow: hidden;
+      display: inline-block;
+      line-height:177px;
+      text-align: center;
+    }
+    .map-min-for-box:nth-child(1){
+      margin:4px 0 0 0;
+      width:91px;
+      height:177px;
+    }
+    .map-min-for-box:nth-child(2){
+      margin:4px 90px 0 0;
+      width:91px;
+      height:177px;
+    }
+    .map-min-for-box:nth-child(3){
+      margin:4px 90px 0 0;
+      width:172px;
+      height:177px;
+    }
+    .map-min-for-box:nth-child(4){
+      margin:4px 0 0 0;
+      width:232px;
+      height:177px;
+    }
+    .map-min-for-box:nth-child(5){
+      margin:4px 0 0 0;
+      width:162px;
+      height:177px;
+    }
+    .map-min-for-box:nth-child(6){
+      margin:4px 0 0 0;
+      width:91px;
+      height:177px;
+    }
+    .map-min-for-box:nth-child(7){
+      margin:140px 0 0 0;
+      width:222px;
+      height:177px;
+    }
+    .map-min-for-box:nth-child(8){
+      margin:140px 0 0 0;
+      width:257px;
+      height:177px;
+    }
+    .map-min-for-box:nth-child(9){
+      margin:140px 0 0 0;
+      width:140px;
+      height:177px;
+    }
+    .map-min-for-box:nth-child(10){
+      margin:140px 0 0 0;
+      width:148px;
+      height:177px;
+    }
+    .map-min-for-box:nth-child(11){
+      margin:140px 0 0 0;
+      width:161px;
+      height:177px;
+    }
+    .map-min-for-box:nth-child(12){
+      margin:140px 0 0 0;
+      width:70px;
+      height:177px;
+    }
+    .map-min-for-box:nth-child(13){
+      margin:140px 0 0 0;
+      width:110px;
+      height:177px;
+    }
+    .map-min-img{
+      position: absolute;
+      width:40px;
+      height:28px;
+    }
+    .map-min-img:nth-child(14){
+      top:240px;
+      left:126px;
+    }
+    .map-min-img:nth-child(15){
+      top:240px;
+      left:190px;
+    }
+    .map-min-img:nth-child(16){
+      top:240px;
+      left:474px;
+    }
+    .map-min-img:nth-child(17){
+      top:240px;
+      left:540px;
+    }
+    .map-min-img:nth-child(18){
+      top:240px;
+      left:848px;
+    }
+    .map-min-img:nth-child(19){
+      top:240px;
+      left:916px;
+    }
+  }
+  //二层
+  .map-min-box-2{
+    height:506px;
+    width:1109px;
+    margin:20px auto;
+    background :url("../ZDimages/kuangdaMap/map2.png");
+    background-size: 100%;
+    position: relative;
+    overflow: hidden;
+    .map-min-for-box{
+      overflow: hidden;
+      display: inline-block;
+      line-height:177px;
+      text-align: center;
+    }
+    .map-min-for-box:nth-child(1){
+      margin:4px 0 0 0;
+      width:91px;
+      height:177px;
+    }
+    .map-min-for-box:nth-child(2){
+      margin:4px 90px 0 0;
+      width:91px;
+      height:177px;
+    }
+    .map-min-for-box:nth-child(3){
+      margin:4px 90px 0 0;
+      width:172px;
+      height:177px;
+    }
+    .map-min-for-box:nth-child(4){
+      margin:4px 0 0 0;
+      width:232px;
+      height:177px;
+    }
+    .map-min-for-box:nth-child(5){
+      margin:4px 0 0 0;
+      width:253px;
+      height:177px;
+    }
+    .map-min-for-box:nth-child(6){
+      margin:140px 0 0 0;
+      width:183px;
+      height:177px;
+    }
+    .map-min-for-box:nth-child(7){
+      margin:140px 0 0 0;
+      width:181px;
+      height:177px;
+    }
+    .map-min-for-box:nth-child(8){
+      margin:140px 0 0 0;
+      width:172px;
+      height:177px;
+    }
+    .map-min-for-box:nth-child(9){
+      margin:140px 0 0 0;
+      width:171px;
+      height:177px;
+    }
+    .map-min-for-box:nth-child(10){
+      margin:140px 0 0 0;
+      width:156px;
+      height:177px;
+    }
+    .map-min-for-box:nth-child(11){
+      margin:140px 0 0 0;
+      width:156px;
+      height:177px;
+    }
+    .map-min-for-box:nth-child(12){
+      margin:140px 0 0 0;
+      width:89px;
+      height:177px;
+    }
+    .map-min-img{
+      position: absolute;
+      width:40px;
+      height:28px;
+    }
+    .map-min-img:nth-child(13){
+      top:240px;
+      left:126px;
+    }
+    .map-min-img:nth-child(14){
+      top:240px;
+      left:190px;
+    }
+    .map-min-img:nth-child(15){
+      top:240px;
+      left:474px;
+    }
+    .map-min-img:nth-child(16){
+      top:240px;
+      left:540px;
+    }
+    .map-min-img:nth-child(17){
+      top:240px;
+      left:848px;
+    }
+    .map-min-img:nth-child(18){
+      top:240px;
+      left:916px;
+    }
+  }
+  //三层
+  .map-min-box-3{
+    height:506px;
+    width:1109px;
+    margin:20px auto;
+    background :url("../ZDimages/kuangdaMap/map3.png");
+    background-size: 100%;
+    position: relative;
+    overflow: hidden;
+    .map-min-for-box{
+      overflow: hidden;
+      display: inline-block;
+      line-height:177px;
+      text-align: center;
+    }
+    .map-min-for-box:nth-child(1){
+      margin:4px 0 0 0;
+      width:91px;
+      height:177px;
+    }
+    .map-min-for-box:nth-child(2){
+      margin:4px 90px 0 0;
+      width:91px;
+      height:177px;
+    }
+    .map-min-for-box:nth-child(3){
+      margin:4px 90px 0 0;
+      width:172px;
+      height:177px;
+    }
+    .map-min-for-box:nth-child(4){
+      margin:4px 0 0 0;
+      width:232px;
+      height:177px;
+    }
+    .map-min-for-box:nth-child(5){
+      margin:4px 0 0 0;
+      width:253px;
+      height:177px;
+    }
+    .map-min-for-box:nth-child(6){
+      margin:140px 0 0 0;
+      width:111px;
+      height:177px;
+    }
+    .map-min-for-box:nth-child(7){
+      margin:140px 0 0 0;
+      width:112px;
+      height:177px;
+    }
+    .map-min-for-box:nth-child(8){
+      margin:140px 0 0 0;
+      width:110px;
+      height:177px;
+    }
+    .map-min-for-box:nth-child(9){
+      margin:140px 0 0 0;
+      width:110px;
+      height:177px;
+    }
+    .map-min-for-box:nth-child(10){
+      margin:140px 0 0 0;
+      width:110px;
+      height:177px;
+    }
+    .map-min-for-box:nth-child(11){
+      margin:140px 0 0 0;
+      width:110px;
+      height:177px;
+    }
+    .map-min-for-box:nth-child(12){
+      margin:140px 0 0 0;
+      width:110px;
+      height:177px;
+    }
+    .map-min-for-box:nth-child(13){
+      margin:140px 0 0 0;
+      width:110px;
+      height:177px;
+    }
+    .map-min-for-box:nth-child(14){
+      margin:140px 0 0 0;
+      width:135px;
+      height:177px;
+    }
+    .map-min-for-box:nth-child(15){
+      margin:140px 0 0 0;
+      width:90px;
+      height:177px;
+    }
+    .map-min-img{
+      position: absolute;
+      width:40px;
+      height:28px;
+    }
+    .map-min-img:nth-child(14){
+      top:240px;
+      left:126px;
+    }
+    .map-min-img:nth-child(15){
+      top:240px;
+      left:190px;
+    }
+    .map-min-img:nth-child(16){
+      top:240px;
+      left:474px;
+    }
+    .map-min-img:nth-child(17){
+      top:240px;
+      left:540px;
+    }
+    .map-min-img:nth-child(18){
+      top:240px;
+      left:848px;
+    }
+    .map-min-img:nth-child(19){
+      top:240px;
+      left:916px;
+    }
+  }
+}
+//实验室布局
+.map-img-box{
+  .map-max-box-1{
+    background :url("../ZDimages/kuangdaMap/map1.png");
+    background-size:100%;
+    overflow :hidden;
+    position:relative;
+    p{
+      margin:0;
+    }
+    .map-min-box{
+      overflow:hidden;
+      cursor:pointer;
+      display :inline-block;
+      position :relative;
+      p:nth-child(1){
+        margin-top:40px;
+        padding:0 4px;
+        color:#333;
+        font-size:13px;
+        text-align :center;
+      }
+      p:nth-child(2){
+        opacity: 0;
+        background: rgba(0,0,0,0.7);
+        color:#fff;
+        position: absolute;
+        top:0;
+        left:0;
+        height:100%;
+        width:100%;
+        line-height:123px;
+        font-size:12px;
+        text-align:center;
+      }
+      p:nth-child(2):hover{
+        opacity: 1;
+      }
+    }
+    .map-min-box:nth-child(1){
+      margin:4px 0 0 0;
+      height:125px;
+      width:65px;
+    }
+    .map-min-box:nth-child(2){
+      margin: 4px 66px 0 0;
+      height:125px;
+      width:64px;
+    }
+    .map-min-box:nth-child(3){
+      margin: 4px 66px 0 0;
+      height:125px;
+      width:120px;
+    }
+    .map-min-box:nth-child(4){
+      margin: 4px 0 0 0;
+      height:125px;
+      width:164px;
+    }
+    .map-min-box:nth-child(5){
+      margin: 4px 0 0 0;
+      height:125px;
+      width:116px;
+    }
+    .map-min-box:nth-child(6){
+      margin: 4px 0 0 0;
+      height:125px;
+      width:64px;
+    }
+    .map-min-box:nth-child(7){
+      margin: 99px 0 0 0;
+      height:125px;
+      width:158px;
+    }
+    .map-min-box:nth-child(8){
+      margin: 99px 0 0 0;
+      height:125px;
+      width:183px;
+    }
+    .map-min-box:nth-child(9){
+      margin: 99px 0 0 0;
+      height:125px;
+      width:100px;
+    }
+    .map-min-box:nth-child(10){
+      margin: 99px 0 0 0;
+      height:125px;
+      width:105px;
+    }
+    .map-min-box:nth-child(11){
+      margin: 99px 0 0 0;
+      height:125px;
+      width:115px;
+    }
+    .map-min-box:nth-child(12){
+      margin: 99px 0 0 0;
+      height:125px;
+      width:50px;
+    }
+    .map-min-box:nth-child(13){
+      margin: 99px 0 0 0;
+      height:125px;
+      width:78px;
+    }
+  }
+  .map-max-box-2{
+    background :url("../ZDimages/kuangdaMap/map2.png");
+    background-size:100%;
+    overflow :hidden;
+    position:relative;
+    p{
+      margin:0;
+    }
+    .map-min-box{
+      overflow:hidden;
+      cursor:pointer;
+      display :inline-block;
+      position :relative;
+      p:nth-child(1){
+        margin-top:40px;
+        padding:0 4px;
+        color:#333;
+        font-size:13px;
+        text-align :center;
+      }
+      p:nth-child(2){
+        opacity: 0;
+        background: rgba(0,0,0,0.7);
+        color:#fff;
+        position: absolute;
+        top:0;
+        left:0;
+        height:100%;
+        width:100%;
+        line-height:123px;
+        font-size:12px;
+        text-align:center;
+      }
+      p:nth-child(2):hover{
+        opacity: 1;
+      }
+    }
+    .map-min-box:nth-child(1){
+      margin:4px 0 0 0;
+      height:125px;
+      width:65px;
+    }
+    .map-min-box:nth-child(2){
+      margin: 4px 66px 0 0;
+      height:125px;
+      width:64px;
+    }
+    .map-min-box:nth-child(3){
+      margin: 4px 66px 0 0;
+      height:125px;
+      width:120px;
+    }
+    .map-min-box:nth-child(4){
+      margin: 4px 0 0 0;
+      height:125px;
+      width:164px;
+    }
+    .map-min-box:nth-child(5){
+      margin: 4px 0 0 0;
+      height:125px;
+      width:180px;
+    }
+    .map-min-box:nth-child(6){
+      margin: 4px 0 0 0;
+      height:125px;
+      width:130px;
+    }
+    .map-min-box:nth-child(7){
+      margin: 99px 0 0 0;
+      height:125px;
+      width:128px;
+    }
+    .map-min-box:nth-child(8){
+      margin: 99px 0 0 0;
+      height:125px;
+      width:123px;
+    }
+    .map-min-box:nth-child(9){
+      margin: 99px 0 0 0;
+      height:125px;
+      width:123px;
+    }
+    .map-min-box:nth-child(10){
+      margin: 99px 0 0 0;
+      height:125px;
+      width:110px;
+    }
+    .map-min-box:nth-child(11){
+      margin: 99px 0 0 0;
+      height:125px;
+      width:111px;
+    }
+    .map-min-box:nth-child(12){
+      margin: 99px 0 0 0;
+      height:125px;
+      width:64px;
+    }
+  }
+  .map-max-box-3{
+    background :url("../ZDimages/kuangdaMap/map3.png");
+    background-size:100%;
+    overflow :hidden;
+    position:relative;
+    p{
+      margin:0;
+    }
+    .map-min-box{
+      overflow:hidden;
+      cursor:pointer;
+      display :inline-block;
+      position :relative;
+      p:nth-child(1){
+        margin-top:40px;
+        padding:0 4px;
+        color:#333;
+        font-size:13px;
+        text-align :center;
+      }
+      p:nth-child(2){
+        opacity: 0;
+        background: rgba(0,0,0,0.7);
+        color:#fff;
+        position: absolute;
+        top:0;
+        left:0;
+        height:100%;
+        width:100%;
+        line-height:123px;
+        font-size:12px;
+        text-align:center;
+      }
+      p:nth-child(2):hover{
+        opacity: 1;
+      }
+    }
+    .map-min-box:nth-child(1){
+      margin:4px 0 0 0;
+      height:125px;
+      width:65px;
+    }
+    .map-min-box:nth-child(2){
+      margin: 4px 66px 0 0;
+      height:125px;
+      width:64px;
+    }
+    .map-min-box:nth-child(3){
+      margin: 4px 66px 0 0;
+      height:125px;
+      width:120px;
+    }
+    .map-min-box:nth-child(4){
+      margin: 4px 0 0 0;
+      height:125px;
+      width:164px;
+    }
+    .map-min-box:nth-child(5){
+      margin: 4px 0 0 0;
+      height:125px;
+      width:180px;
+    }
+    .map-min-box:nth-child(6){
+      margin: 4px 0 0 0;
+      height:125px;
+      width:79px;
+    }
+    .map-min-box:nth-child(7){
+      margin: 99px 0 0 0;
+      height:125px;
+      width:80px;
+    }
+    .map-min-box:nth-child(8){
+      margin: 99px 0 0 0;
+      height:125px;
+      width:78px;
+    }
+    .map-min-box:nth-child(9){
+      margin: 99px 0 0 0;
+      height:125px;
+      width:79px;
+    }
+    .map-min-box:nth-child(10){
+      margin: 99px 0 0 0;
+      height:125px;
+      width:78px;
+    }
+    .map-min-box:nth-child(11){
+      margin: 99px 0 0 0;
+      height:125px;
+      width:79px;
+    }
+    .map-min-box:nth-child(12){
+      margin: 99px 0 0 0;
+      height:125px;
+      width:78px;
+    }
+    .map-min-box:nth-child(13){
+      margin: 99px 0 0 0;
+      height:125px;
+      width:79px;
+    }
+    .map-min-box:nth-child(14){
+      margin: 99px 0 0 0;
+      height:125px;
+      width:95px;
+    }
+    .map-min-box:nth-child(15){
+      margin: 99px 0 0 0;
+      height:125px;
+      width:64px;
+    }
+  }
+}

src/router/index.js

@@ -72,7 +72,7 @@ export const constantRoutes = [
   },
   {
     path: '/emergencyEvacuationBig',
-    component: (resolve) => require(['@/views/emergencyEvacuationBig'], resolve),
+    component: (resolve) => require(['@/views/emergencyEvacuationBigOne'], resolve),
     hidden: true
   },
   {

src/views/comprehensive/laboratoryManagement/building/indexOne.vue

@@ -0,0 +1,343 @@
+<!--布局管理(针对矿大增加了楼栋与楼层的选择)-->
+<template>
+  <div class="app-container building">
+    <div class="left-max-box">
+      <el-tree :data="deptOptions" :props="defaultProps"
+               accordion @node-click="handleNodeClick">
+      </el-tree>
+    </div>
+    <div class="right-max-box">
+      <p class="right-top-title color_33" v-if="rightDataList[0]">{{rightTitle}}</p>
+      <div class="map-img-box border-solid-color-99" v-if="rightDataList[0]">
+        <div class="map-max-box" :class="buttonId == 5?'map-max-box-1':(buttonId==6?'map-max-box-2':(buttonId==7?'map-max-box-3':''))" v-for="(item,index) in rightDataList" :key="index" v-if="index == fatherIndex">
+          <!--<div class="map-max-box map-seven-max-box" v-for="(item,index) in rightDataList" :key="index" v-if="index == fatherIndex">-->
+          <div class="map-min-box for-box" v-for="(minItem,minIndex) in item.list" :key="minIndex">
+            <p>{{minItem.isSubject == 1?minItem.room:minItem.room}}</p>
+            <p @click.stop="shadeClick(minItem)">点击编辑</p>
+          </div>
+        </div>
+      </div>
+      <div class="carousel" v-if="rightDataList[0]">
+        <p class="button-box el-icon-arrow-left cursor_hover" @click="minMapButton('left')"></p>
+        <div class="for-max-box">
+          <div class="for-min-box"  v-for="(item,index) in rightDataList" :key="index">
+            <div class="img-box" :class="fatherIndex==index?'border-solid-color-one':'border-solid-color-99'" @click="minMapClick(index)">
+              <img src="@/assets/ZDimages/kuangdaMap/map1.png" v-if="item.id==5">
+              <img src="@/assets/ZDimages/kuangdaMap/map2.png" v-if="item.id==6">
+              <img src="@/assets/ZDimages/kuangdaMap/map3.png" v-if="item.id==7">
+            </div>
+            <p>{{item.name}}</p>
+          </div>
+        </div>
+        <p class="button-box el-icon-arrow-right cursor_hover" @click="minMapButton('right')"></p>
+      </div>
+      <img class="null-p-img" src="@/assets/ZDimages/null-data.png" v-if="!rightDataList[0]">
+      <p class="null-p-text" v-if="!rightDataList[0]">暂无数据</p>
+    </div>
+    <el-dialog title="修改房间信息" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="房间编号" prop="joinUserId">
+          <el-input v-model="form.room" placeholder="请输入房间编号" />
+        </el-form-item>
+        <el-form-item label="房间类型">
+          <el-radio-group v-model="form.isSubject">
+            <el-radio label="0">非实验室</el-radio>
+            <el-radio label="1">实验室</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="cancel">取 消</el-button>
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+  import { getBuilding,listBuilding, updateSubject } from "@/api/laboratory/building";
+  import { treeselect } from "@/api/system/dept";
+
+  export default {
+    name: "Building",
+    data() {
+      return {
+        // 遮罩层
+        loading: true,
+        // 选中数组
+        ids: [],
+        // 非单个禁用
+        single: true,
+        // 非多个禁用
+        multiple: true,
+        // 显示搜索条件
+        showSearch: true,
+        // 总条数
+        total: 0,
+        // 楼栋表格数据
+        buildingList: [],
+        // 弹出层标题
+        title: "",
+        // 是否显示弹出层
+        open: false,
+        // 查询参数
+        queryParams: {
+          pageNum: 1,
+          pageSize:20,
+          name: null,
+          type: null,
+          parentId: null,
+          deptId: null,
+          deptName: null,
+          userId: null,
+        },
+        // 表单参数
+        form: {
+          room:"",
+          isSubject:"",
+        },
+        // 表单校验
+        rules: {
+          room:[
+            {required: true, message: '请输入房间编号', trigger: 'blur'},
+            { required: true, message: "请输入房间编号", validator: this.spaceJudgment, trigger: "blur" }
+          ],
+          isSubject:[
+            {required: true, message: '请选择实验室类型', trigger: 'blur'}
+          ],
+        },
+        //左侧列表数据
+        deptOptions:[],
+        defaultProps:{
+          children: 'children',
+          label: 'label'
+        },
+        //右侧数据
+        rightDataList:[],
+        //左侧列表选装状态
+        fatherIndex:0,
+        // 楼宇id
+        buildingId:"",
+        //楼层id
+        buttonId:null,
+        //名称
+        rightTitle:"",
+      };
+    },
+    created() {
+      this.getList();
+      this.getTreeselect();
+    },
+    methods: {
+      //点击修改
+      shadeClick(item){
+        if(item){
+          this.form = {...item};
+          this.form.isSubject = ''+item.isSubject;
+          this.$forceUpdate();
+          this.open = true;
+          console.log("item",item)
+        }
+      },
+      /** 查询部门下拉树结构 */
+      getTreeselect() {
+        this.loading = true;
+        treeselect().then(response => {
+          this.deptOptions = response.data;
+          if(this.deptOptions[0].children){
+            if(this.deptOptions[0].children[0].children){
+              this.buildingId = this.deptOptions[0].children[0].children[0].id;
+            }else{
+              this.buildingId = this.deptOptions[0].children[0].id;
+            }
+          }else{
+            this.buildingId = this.deptOptions[0].id;
+          }
+
+          this.getBuilding();
+          this.loading = false;
+        });
+      },
+      //树结构选中
+      handleNodeClick(data) {
+        if(!data.children){
+          console.log(data);
+          this.buildingId = data.id;
+          this.getBuilding();
+        }
+      },
+      //获取楼宇数据
+      getBuilding(){
+        this.loading = true;
+        getBuilding(this.buildingId).then(response => {
+          this.rightDataList = response.data;
+          this.rightTitle = this.rightDataList[this.fatherIndex].remark +'    '+ this.rightDataList[this.fatherIndex].name;
+          this.buttonId = this.rightDataList[this.fatherIndex].id;
+          this.loading = false;
+        });
+      },
+      minMapClick(index){
+        if (this.fatherIndex!=index){
+          this.fatherIndex = index;
+          this.rightTitle = this.rightDataList[index].remark +'    '+ this.rightDataList[index].name;
+          this.buttonId = this.rightDataList[index].id;
+        }
+      },
+      minMapButton(type){
+        if(type=='left'){
+          if (this.fatherIndex>0){
+            this.fatherIndex--
+          }
+        }else if(type=='right'){
+          if (this.fatherIndex<this.rightDataList.length-1){
+            this.fatherIndex++
+          }
+        }
+        this.rightTitle = this.rightDataList[this.fatherIndex].remark +'    '+ this.rightDataList[this.fatherIndex].name;
+        this.$forceUpdate();
+      },
+      /** 查询楼栋列表 */
+      getList() {
+        this.loading = true;
+        listBuilding(this.queryParams).then(response => {
+          this.buildingList = response.rows;
+          this.total = response.total;
+          this.loading = false;
+        });
+      },
+      // 取消按钮
+      cancel() {
+        this.open = false;
+        this.reset();
+      },
+      // 表单重置
+      reset() {
+        this.form = {
+          room: null,
+          isSubject: null,
+          id: null,
+        };
+        this.resetForm("form");
+      },
+      /** 提交按钮 */
+      submitForm() {
+        this.$refs["form"].validate(valid => {
+          if (valid) {
+            if (this.form.id != null) {
+              let obj = {
+                id:this.form.id,
+                room: this.form.room,
+                isSubject: this.form.isSubject,
+              };
+              updateSubject(obj).then(response => {
+                this.msgSuccess("修改成功");
+                this.open = false;
+                this.reset();
+                this.getBuilding();
+              });
+            }
+          }
+        });
+      },
+    }
+  };
+</script>
+
+<style scoped lang="scss">
+  .building {
+    display: flex!important;
+    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
+    padding:11px 20px!important;
+    .el-row{
+      margin-bottom:20px;
+    }
+    .left-max-box{
+      width:245px;
+    }
+    .right-max-box{
+      flex:1;
+      display: flex;
+      flex-direction: column;
+      .right-top-title{
+        text-align: center;
+        font-size:18px;
+        margin:17px 0 0 0;
+        line-height:109px;
+      }
+      .map-img-box{
+        flex:1;
+        margin:0 30px;
+        position: relative;
+        .map-max-box{
+          position: absolute;
+          top:50%;
+          left:50%;
+          display: block;
+          width:790px;
+          height:360px;
+          margin-left:-395px;
+          margin-top:-180px;
+        }
+      }
+      .carousel{
+        height:184px;
+        display: flex;
+        /*width: 1030px;*/
+        margin: 0 auto;
+        .button-box{
+          width:40px;
+          height:40px;
+          margin:66px 50px 0;
+          background: #cce6fd;
+          color: #fff;
+          text-align: center;
+          line-height:40px;
+          font-size:14px;
+          -webkit-border-radius: 50%;
+          -moz-border-radius: 50%;
+          border-radius: 50%;
+        }
+        .button-box:hover{
+          background: #0183FA;
+          color: #fff;
+        }
+        .for-max-box{
+          display: flex;
+          flex:1;
+          cursor:pointer;
+          .for-min-box{
+            margin:0 20px;
+            div{
+              padding:10px;
+              width:210px;
+              height:109px;
+              margin-top:29px;
+              img{
+                width:190px;
+                height:89px;
+              }
+            }
+            p{
+              line-height:45px;
+              font-size:16px;
+              text-align: center;
+              margin:0;
+            }
+          }
+        }
+      }
+      .null-p-img{
+        width:276px;
+        height:274px;
+        margin:200px auto 0;
+      }
+      .null-p-text{
+        text-align:center;
+        font-size:16px;
+        color:#999;
+        line-height:40px;
+        margin-right:70px;
+      }
+    }
+  }
+</style>

src/views/comprehensive/laboratoryManagement/subject/deviceListOne.vue

@@ -49,8 +49,6 @@
     roomName房间名称
 
     -->
-
-
       <!--<div class="title-box">-->
         <!--<p class="left-title">一体机</p>-->
       <!--</div>-->

src/views/comprehensive/laboratoryManagement/subject/indexOne.vue

@@ -278,7 +278,7 @@
 import mqtt from 'mqtt'
 import flvjs from 'flv.js'
 import { hardWareControl,alarmControl } from "@/api/laboratory/hardware";
-import { authListSubject,subjectInfo,updateSubject,mangerVoice,startUrl,startUrlJiNanDaXue,getDetalis } from "@/api/laboratory/subject";
+import { authListSubject,subjectInfo,updateSubject,mangerVoice,startUrl,startUrlWC,getDetalis } from "@/api/laboratory/subject";
 import { listDepartments } from "@/api/system/dept";
 import addSubject from "./addSubject.vue";
 import deviceList from "./deviceListOne.vue";
@@ -573,7 +573,7 @@ export default {
         //     }
         //   });
         // }else{
-        //   startUrlJiNanDaXue(obj).then(res => {
+        //   startUrlWC(obj).then(res => {
         //     if(res.code == 200){
         //       if(!res.data[0]){
         //         this.msgError("视频配置异常请联系管理员")
@@ -682,7 +682,7 @@ export default {
                   }
                 });
               }else{
-                startUrlJiNanDaXue(obj).then(res => {
+                startUrlWC(obj).then(res => {
                   if(res.code == 200){
                     if(!res.data[0]){
                       this.msgError("视频配置异常请联系管理员")

src/views/emergencyEvacuationBigOne.vue

@@ -46,7 +46,7 @@
         <!--</el-select>-->
         <!--</div>-->
         <div class="map-big-box">
-          <div class="map-min-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">
               {{item.room}}
@@ -115,7 +115,7 @@
   import { lablayout, lineEvacuateTow } from "@/api/laboratory/emergencyEvacuation";
   import { getListStatus } from '@/api/bigData/index.js'
   import flvjs from 'flv.js'
-  import { evacuate, closure, lineEvacuate, IntelligentGuidance,getRedis,getDeviceList,textParseUrlIps,getCameraByFloor,startUrlJiNanDaXue,startUrl } from '@/api/executeThePlan.js'
+  import { evacuate, closure, lineEvacuate, IntelligentGuidance,getRedis,getDeviceList,textParseUrlIps,getCameraByFloor,startUrlWC,startUrl } from '@/api/executeThePlan.js'
   import mqtt from 'mqtt'
   export default {
     name: 'emergencyEvacuationBig',
@@ -190,6 +190,7 @@
         videoPage:1,
         videoPageSize:4,
         videoPageList:[],
+        buttonId:null
       }
     },
     created(){
@@ -332,11 +333,14 @@
             if(localStorage.getItem('evacuationSubId')){
               this.subId = localStorage.getItem('evacuationSubId');
               this.title = localStorage.getItem('evacuationTitel');
+              this.buttonId = localStorage.getItem('evacuationButtonId');
               localStorage.removeItem('evacuationSubId')
               localStorage.removeItem('evacuationTitel')
+              localStorage.removeItem('evacuationButtonId')
             }else{
               this.subId = this.$route.query.subId;
               this.title = this.$route.query.text;
+              this.buttonId = this.$route.query.buttonId;
             }
             this.evacuationType = true;
             this.lineEvacuateTow(this.subId,0);
@@ -524,7 +528,7 @@
             this.videoPageNumButton({page:1,limit:4});
           }
         } else {
-          const { data } = await startUrlJiNanDaXue(obj);
+          const { data } = await startUrlWC(obj);
           if(data){
             self.videoPageList = [];
             for(let i=0;i<data.length;i++){
@@ -791,11 +795,11 @@
           margin-bottom:20px;
           overflow: hidden;
           .map-min-box{
-            height:505px;
-            width:1133px;
-            margin:50px auto;
-            background: url("../assets/ZDimages/icon_bj_syspmtcy_jinan.png");
-            position: relative;
+            /*height:505px;*/
+            /*width:1133px;*/
+            /*margin:50px auto;*/
+            /*background: url("../assets/ZDimages/icon_bj_syspmtcy_jinan.png");*/
+            /*position: relative;*/
             .map-min-for-box{
               overflow: hidden;
               display: inline-block;
@@ -805,135 +809,11 @@
             .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;
-            }
           }
         }
       }

src/views/emergencyManagement/evacuation/emergencyEvacuation/addPageOne.vue

@@ -47,7 +47,7 @@
         <p>路线规划</p>
       </div>
       <div class="map-big-box">
-        <div class="map-min-box">
+        <div class="map-min-box" :class="propsList.buttonId == '5'?'map-min-box-1':(propsList.buttonId == '6'?'map-min-box-2':(propsList.buttonId == '7'?'map-min-box-3':''))">
           <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>
@@ -201,8 +201,8 @@
               list.push(minObj);
             }
             let obj = {
-              lineDeptId:"137",
-              buildId:"5",
+              lineDeptId:self.propsList.buildingId,
+              buildId:self.propsList.buttonId,
               lightDirection:this.form.lightDirection,
               lineJoinList:list
             };
@@ -254,10 +254,10 @@
       //获取层实验室数据
       lablayout(){
         let self = this;
-        let id = 137;
+        let id = self.propsList.buildingId;
         lablayout(id).then(response => {
           for(let i=0;i<response.data.length;i++){
-            if(response.data[i].id == 5){
+            if(response.data[i].id == self.propsList.buttonId){
               for(let o=0;o<response.data[i].list.length;o++){
                 response.data[i].list[o].checkType = false;
               }
@@ -316,14 +316,12 @@
       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;
+          line-height: 0!important;
           background: rgba(0,189,255,0.3);
           p:nth-child(1){
             text-align: center;
@@ -346,135 +344,6 @@
         .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{

src/views/emergencyManagement/evacuation/emergencyEvacuation/indexOne.vue

@@ -11,23 +11,25 @@
             :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>
+               @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">
-        <div class="map-min-box">
-          <div class="map-min-for-box" v-for="(item,index) in fjList" :key="index">
+        <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_sjt.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">
@@ -76,6 +78,8 @@
 
 <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:{
@@ -86,7 +90,6 @@
       return {
         tableButtonType:this.hasPermiDom(['laboratory:line:query','laboratory:line:edit','laboratory:line:remove']),
         pageType:1,
-        fjList:[],
         queryParams:{
           pageNum:1,
           pageSize:20,
@@ -98,34 +101,54 @@
         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',
+        buildingList:[],
+        buildingId:null,
+        floorList:[],
+        buttonId:null,
+        fjList:[],
       }
     },
     created() {
     },
     mounted(){
-      this.getList();
-      this.lablayout();
+      this.treeselectByUser();
     },
     methods: {
+      getBuilding(id){
+        getBuilding(id).then(response => {
+          this.$set(this,'floorList',response.data);
+          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++){
+            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){
+      buttonListClick(id,index){
         this.$set(this,'buttonId',id);
+        this.$set(this,'fjList',this.floorList[index].list);
+        this.getList();
       },
       //删除按钮
       delButton(item){
@@ -145,21 +168,9 @@
           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;
+        let id = this.buttonId;
         buildIdList(id).then(response => {
           this.routeList = response.rows;
           this.total = response.total;
@@ -269,155 +280,6 @@
           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;
@@ -445,6 +307,9 @@
       .el-select .el-input .el-select__caret{
         font-size:20px;
       }
+      .el-select{
+        display: flex;
+      }
     }
   }
 </style>

src/views/emergencyManagement/evacuation/emergencyEvacuation/performEvacuationOne.vue

@@ -15,7 +15,7 @@
       </div>
       <div class="for-button-box">
         <div class="for-button-min-box" :class="buttonId == item.id ?'button-one':'button-two'"
-             @click="buttonListClick(item.id)"
+             @click="buttonListClick(item.id,index)"
              v-for="(item,index) in floorList" :key="index">{{item.name}}</div>
         <!--<div class="for-button-null-box">疏散路径:</div>-->
         <!--<el-select v-model="form.lightDirection" clearable-->
@@ -29,7 +29,7 @@
         <!--</el-select>-->
       </div>
       <div class="map-big-box">
-        <div class="map-min-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}}
@@ -49,9 +49,10 @@
 </template>
 
 <script>
-  import emergencyEvacuationBig from "../../../emergencyEvacuationBig.vue"
-  import { buildIdList ,lablayout } from "@/api/laboratory/emergencyEvacuation";
+  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: {
@@ -85,22 +86,10 @@
           lightDirection:"",
         },
         //楼栋选择数据
-        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',
+        buildingList:[],
+        floorList:[],
+        buildingId:null,
+        buttonId:null,
       }
     },
     created() {
@@ -111,19 +100,44 @@
       }else{
         this.getRedis();
       }
-      // if(localStorage.getItem("evacuation") == 1){
-      //   this.pageType = 2;
-      // }else{
-      //   this.pageType = 1;
-      // }
     },
     mounted(){
-      this.lablayout();
+      this.treeselectByUser();
     },
     methods:{
+      getBuilding(id){
+        getBuilding(id).then(response => {
+          this.$set(this,'floorList',response.data);
+          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){
+      buttonListClick(id,index){
         this.$set(this,'buttonId',id);
+        this.$set(this,'fjList',this.floorList[index].list);
       },
       goPage(type){
         if(this.pageType != type){
@@ -158,18 +172,6 @@
           this.title = item.subjectName;
         }
       },
-      //获取实验室列表布局
-      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;
-            }
-          }
-        });
-      },
       //确认疏散
       goEvacuation(){
         if(!this.subId){
@@ -178,6 +180,7 @@
         }
         localStorage.setItem('evacuationSubId',this.subId)
         localStorage.setItem('evacuationTitel',this.title)
+        localStorage.setItem('evacuationButtonId',this.buttonId)
         this.pageType = 2;
       },
       //选择疏散方向
@@ -266,11 +269,11 @@
       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;
+        /*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;
@@ -284,135 +287,11 @@
         .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;
-        }
       }
     }
     .bottom-button-p{
@@ -433,6 +312,9 @@
       .el-select .el-input .el-select__caret{
         font-size:20px;
       }
+      .el-select{
+        display: flex;
+      }
     }
   }
 </style>