zc

src/router/index.js

@@ -46,7 +46,7 @@ export const constantRoutes = [
       */
       {
         path: '/demo',
-        component: (resolve) => require(['@/views/emergencyManagement/evacuation/emergencyEvacuation/indexOne'], resolve),
+        component: (resolve) => require(['@/views/emergencyManagement/evacuation/emergencyEvacuation/performEvacuationOne'], resolve),
       },
     ]
   },

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

@@ -225,7 +225,7 @@
         }
       }
       .for-button-box{
-        margin:36px 86px 26px;
+        margin:26px 86px 26px;
         display: flex;
         .for-button-min-box{
           flex:1;

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

@@ -2,12 +2,21 @@
 <template>
   <div class="app-container performEvacuation">
     <div class="performEvacuation-page scrollbar-box" v-if="pageType == 1">
-      <div class="top-title-box">
-        环境学院-祈福楼
+      <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" :class="buttonIndex == index ?'button-one':'button-two'" v-for="(item,index) in buttonList" :key="index">{{item.name}}</div>
+        <div class="for-button-min-box" :class="buttonId == item.id ?'button-one':'button-two'"
+             @click="buttonListClick(item.id)"
+             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-->
         <!--@change="selectChange" placeholder="请选择疏散路径">-->
@@ -75,6 +84,23 @@
         form:{
           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',
       }
     },
     created() {
@@ -95,6 +121,10 @@
       this.lablayout();
     },
     methods:{
+      // 楼层点击
+      buttonListClick(id){
+        this.$set(this,'buttonId',id);
+      },
       goPage(type){
         if(this.pageType != type){
           this.pageType = type;
@@ -184,7 +214,7 @@
       }
     }
     .for-button-box{
-      margin:36px 86px 26px;
+      margin:26px 86px 26px;
       display: flex;
       .for-button-min-box{
         margin-right:20px!important;
@@ -391,3 +421,18 @@
     }
   }
 </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;
+      }
+    }
+  }
+</style>