zc

src/router/index.js

@@ -44,10 +44,10 @@ export const constantRoutes = [
       /*
       前端测试用
       */
-      // {
-      //   path: '/demo',
-      //   component: (resolve) => require(['@/views/studentViews/chemicalManagement/studentUsageRecord/index'], resolve),
-      // },
+      {
+        path: '/demo',
+        component: (resolve) => require(['@/views/emergencyManagement/evacuation/emergencyEvacuation/indexOne'], resolve),
+      },
     ]
   },
   {
@@ -71,26 +71,6 @@ export const constantRoutes = [
     hidden: true
   },
   {
-    path: '/tableDemo',
-    component: (resolve) => require(['@/views/tableDemo'], resolve),
-    hidden: true
-  },
-  // {
-  //   path: '/bigData',
-  //   component: (resolve) => require(['@/views/bigData/home'], resolve),
-  //   hidden: true
-  // },
-  // {
-  //   path: '/demoList',
-  //   component: (resolve) => require(['@/views/laboratory/labNotify/index'], resolve),
-  //   hidden: true
-  // },
-  // {
-  //   path: '/demoAdd',
-  //   component: (resolve) => require(['@/views/laboratory/labNotify/addPage'], resolve),
-  //   hidden: true
-  // },
-  {
     path: '/emergencyEvacuationBig',
     component: (resolve) => require(['@/views/emergencyEvacuationBig'], resolve),
     hidden: true

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

@@ -0,0 +1,484 @@
+<!--添加线路(针对矿大增加了楼栋与楼层的选择)-->
+<template>
+  <div class="emergencyEvacuationAddPage scrollbar-box">
+    <el-form :model="form" ref="form" :rules="rules" >
+      <div class="top-title-box">
+        <p>基础信息</p>
+        <p class="inquire-button-one" @click="upButton">提交</p>
+        <p class="reset-button-one" @click="backPage">返回</p>
+      </div>
+      <div class="info-max-box">
+        <el-row>
+          <el-col :span="5">
+            <el-form-item label="楼栋">
+              <el-select v-model="propsList.buildingId" disabled placeholder="">
+                <el-option
+                  v-for="item in propsList.buildingList"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="5">
+            <el-form-item label="楼层">
+              <el-select v-model="propsList.buttonId" disabled placeholder="">
+                <el-option
+                  v-for="item in propsList.floorList"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="5">
+            <el-form-item label="路径类别" prop="lightDirection">
+              <template>
+                <el-radio v-model="form.lightDirection" :label="1">向左疏散</el-radio>
+                <el-radio v-model="form.lightDirection" :label="2">向右疏散</el-radio>
+              </template>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </div>
+      <div class="top-title-box">
+        <p>路线规划</p>
+      </div>
+      <div class="map-big-box">
+        <div class="map-min-box">
+          <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>
+            <p>{{item.room}}</p>
+          </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="top-title-box" style="margin-bottom:30px;">
+        <p>疏散指示灯</p>
+      </div>
+      <p v-if="!form.labExitLineJoinList[0]" style="text-align: center;line-height:100px;color:#999;font-size:16px;">请添加实验室</p>
+      <el-row class="for-box" v-for="(item,index) in form.labExitLineJoinList" :key="index" :gutter="24">
+        <el-col :span="5">
+          <el-form-item :label="'实验室'+(index+1)" label-width="90px">
+            <el-input
+              v-model="item.room"
+              disabled
+              placeholder="请选择实验室"
+              clearable
+              size="small"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="5">
+          <el-form-item label="绑定继电器" :prop="'labExitLineJoinList.'+ index +'.relayCode'" :rules="rules.relayCode" label-width="110px">
+            <el-input
+              v-model="item.relayCode"
+              placeholder="请输入继电器"
+              clearable
+              size="small"
+              maxlength="20"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="5">
+          <el-form-item label="继电器位置" :prop="'labExitLineJoinList.'+ index +'.relayBit'" :rules="rules.relayBit" label-width="110px">
+            <el-select v-model="item.relayBit" placeholder="请选择继电器位置">
+              <el-option
+                v-for="item in relayList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="5">
+          <el-form-item label="序号" :prop="'labExitLineJoinList.'+ index +'.lightOrder'" :rules="rules.lightOrder">
+            <el-input-number
+              v-model="item.lightOrder"
+              placeholder="请输入序号"
+              clearable
+              :min="0"
+              :max="100"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="2">
+          <p class="reset-button-one" @click="delItem(item,index)">删除</p>
+        </el-col>
+      </el-row>
+    </el-form>
+  </div>
+</template>
+
+<script>
+  import { lablayout,addExitJoin } from "@/api/laboratory/emergencyEvacuation";
+  export default {
+    name: 'emergencyEvacuationAddPage',
+    props: {
+      propsData:{},
+      propsList:{},
+    },
+    data() {
+      return {
+        lou:"环境学院-祈福楼",
+        cen:"环境与气象研究所",
+        //下啦选项
+        options:[],
+        //继电器路数数据
+        relayList:[
+          {label:"1",value:"1"},{label:"2",value:"2"},{label:"3",value:"3"},{label:"4",value:"4"},{label:"5",value:"5"},
+          {label:"6",value:"6"},{label:"7",value:"77"},{label:"8",value:"8"},{label:"9",value:"9"},{label:"10",value:"10"},
+        ],
+        form:{
+          lightDirection:1,
+          labExitLineJoinList:[],
+        },
+        // 表单校验
+        rules: {
+          lightDirection: [
+            { required: true, message: "请选择路径类别", trigger: "blur" }
+          ],
+          // room: [
+          //   { required: true, message: "请选择实验室", trigger: "blur" }
+          // ],
+          relayCode: [
+            { required: true, message: "请输入继电器", trigger: "blur" },
+            { required: true, message: "请输入继电器", validator: this.spaceJudgment, trigger: "blur" }
+          ],
+          relayBit: [
+            { required: true, message: "请选择继电器位置", trigger: "blur" }
+          ],
+          lightOrder: [
+            { required: true, message: "请输入序号", trigger: "blur" },
+            { required: true, message: "请输入序号", validator: this.spaceJudgment, trigger: "blur" }
+          ],
+        },
+        fjList:[],
+      }
+    },
+    created() {
+      this.lablayout();
+    },
+    mounted(){
+    },
+    methods: {
+      upButton(){
+        let self = this;
+        this.$confirm('是否确认提交?', "", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }).then(function() {
+          self.upData();
+        }).then(() => {}).catch(() => {});
+      },
+      //提交
+      upData(){
+        let self = this;
+        if(!self.form.labExitLineJoinList[0]){
+          this.msgError("请添加实验室")
+          return
+        }
+        this.$refs["form"].validate(valid => {
+          if (valid) {
+            let list = [];
+            for(let i=0;i<self.form.labExitLineJoinList.length;i++){
+              let minObj = {
+                subjectId:self.form.labExitLineJoinList[i].subjectId,
+                relayCode:self.form.labExitLineJoinList[i].relayCode,
+                relayBit:self.form.labExitLineJoinList[i].relayBit,
+                lightOrder:self.form.labExitLineJoinList[i].lightOrder,
+              }
+              list.push(minObj);
+            }
+            let obj = {
+              lineDeptId:"137",
+              buildId:"5",
+              lightDirection:this.form.lightDirection,
+              lineJoinList:list
+            };
+            addExitJoin(obj).then(response => {
+              this.msgSuccess("操作成功")
+              this.backPage();
+            });
+          }
+        })
+      },
+      //返回
+      backPage(){
+        this.$parent.pageTypeClick(1);
+      },
+      addItem(item){
+        let self = this;
+        let num = 0;
+        for(let i=0;i<self.form.labExitLineJoinList.length;i++){
+          if(self.form.labExitLineJoinList.subjectId == item.subjectId){
+            num++
+          }
+        }
+        if(num>0){
+          this.msgError("该实验室已添加");
+          return
+        }
+        let obj = {
+          room:item.room,
+          subjectId:item.subjectId,
+          relayCode:"",
+          relayBit:"",
+          lightOrder:"",
+        }
+        this.form.labExitLineJoinList.push(obj);
+        item.checkType = true;
+        this.$forceUpdate();
+      },
+      delItem(item,index){
+        console.log("index",index);
+        let self = this;
+        for(let i=0;i<self.fjList.length;i++){
+          if(self.fjList[i].subjectId == item.subjectId){
+            self.fjList[i].checkType = false;
+          }
+        }
+        this.form.labExitLineJoinList.splice(index,1);
+        this.$forceUpdate();
+      },
+      //获取层实验室数据
+      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){
+              for(let o=0;o<response.data[i].list.length;o++){
+                response.data[i].list[o].checkType = false;
+              }
+              self.fjList = response.data[i].list;
+            }
+          }
+          if(self.propsData.id){
+            for(let o=0;o<self.propsData.labExitLineJoinList.length;o++){
+              for(let i=0;i<self.fjList.length;i++){
+                if(self.propsData.labExitLineJoinList[o].subjectId == self.fjList[i].subjectId){
+                  self.fjList[i].checkType = true;
+                }
+              }
+            }
+            this.$set(this,'form',this.propsData);
+          }
+        });
+      },
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .emergencyEvacuationAddPage{
+    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;
+    padding:20px;
+    p{
+      margin:0;
+    }
+    .top-title-box{
+      display: flex;
+      border-bottom:1px solid #e0e0e0;
+      p:nth-child(1){
+        flex:1;
+        line-height:20px;
+        font-size:18px;
+        padding:10px 0 30px;
+        color:#0045AF;
+      }
+      p:nth-child(2){
+        margin-right:20px;;
+        font-size:14px;
+      }
+    }
+    .info-max-box{
+      margin:30px 0 0 30px;
+    }
+    .map-big-box{
+      width:1410px;
+      height:545px;
+      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;
+          background: rgba(0,189,255,0.3);
+          p:nth-child(1){
+            text-align: center;
+            height:80px;
+            i{
+              cursor: pointer;
+              font-size:26px;
+              line-height:80px;
+              color: rgb(0,189,255);
+              margin:0 auto;
+            }
+          }
+          p:nth-child(2){
+            text-align: center;
+            line-height:20px;
+            font-size:16px;
+            color:#333;
+          }
+        }
+        .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{
+      margin:0 ;
+    }
+  }
+</style>

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

@@ -0,0 +1,450 @@
+<!--疏散路线(针对矿大增加了楼栋与楼层的选择)-->
+<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:36px 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>

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

@@ -0,0 +1,393 @@
+<!--应急疏散(针对矿大增加了楼栋与楼层的选择)-->
+<template>
+  <div class="app-container performEvacuation">
+    <div class="performEvacuation-page scrollbar-box" v-if="pageType == 1">
+      <div class="top-title-box">
+        环境学院-祈福楼
+        <!--<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-null-box">疏散路径:</div>-->
+        <!--<el-select v-model="form.lightDirection" clearable-->
+        <!--@change="selectChange" placeholder="请选择疏散路径">-->
+        <!--<el-option-->
+        <!--v-for="item in routeList"-->
+        <!--:key="item.id"-->
+        <!--:label="item.name"-->
+        <!--:value="item.id">-->
+        <!--</el-option>-->
+        <!--</el-select>-->
+      </div>
+      <div class="map-big-box">
+        <div class="map-min-box">
+          <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 "../../../emergencyEvacuationBig.vue"
+  import { buildIdList ,lablayout } from "@/api/laboratory/emergencyEvacuation";
+  import { getRedis } from '@/api/executeThePlan'
+  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:"",
+        },
+      }
+    },
+    created() {
+      if(this.$route.query.subId){
+        this.subId = this.$route.query.subId;
+        this.title = this.$route.query.text;
+        this.pageType = 2;
+      }else{
+        this.getRedis();
+      }
+      // if(localStorage.getItem("evacuation") == 1){
+      //   this.pageType = 2;
+      // }else{
+      //   this.pageType = 1;
+      // }
+    },
+    mounted(){
+      this.lablayout();
+    },
+    methods:{
+      goPage(type){
+        if(this.pageType != type){
+          this.pageType = type;
+        }
+      },
+      //获取当前疏散页面
+      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;
+        }
+      },
+      //获取实验室列表布局
+      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){
+          this.msgError("请选择需要查看的实验室");
+          return
+        }
+        localStorage.setItem('evacuationSubId',this.subId)
+        localStorage.setItem('evacuationTitel',this.title)
+        this.pageType = 2;
+      },
+      //选择疏散方向
+      selectChange(e){
+        console.log("e",e)
+        this.form.lightDirection = e;
+      },
+    }
+  }
+</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:36px 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-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{
+      margin: 20px auto 40px;
+      width:160px;
+    }
+  }
+</style>

src/views/tableDemo.vue

@@ -1,327 +0,0 @@
-<template>
-  <div class="tableDemo">
-    <div class="table-for-max-box">
-      <div class="table-title-box">
-        <p>模块菜单</p>
-        <p>权限</p>
-      </div>
-      <div class="table-for-big-box" v-for="(maxItem,maxIndex) in menuList" :key="maxIndex">
-        <div class="max-title-box" :class="!maxItem.children?'max-title-box-null':''">
-          <p><el-checkbox v-model="maxItem.checkType">{{maxItem.menuName}}</el-checkbox></p>
-        </div>
-        <div class="max-right-box">
-          <div class="big-box" v-for="(bigItem,bigIndex) in maxItem.children" :key="bigIndex">
-            <div class="big-title-box" :class="!bigItem.children?'big-title-box-null':''">
-              <p><el-checkbox v-model="bigItem.checkType">{{bigItem.menuName}}</el-checkbox></p>
-            </div>
-            <div class="big-right-box" v-if="bigItem.children">
-              <div class="min-box" v-for="(minItem,minIndex) in bigItem.children" :key="minIndex">
-                <div class="min-title-box">
-                  <p><el-checkbox v-model="minItem.checkType">{{minItem.menuName}}</el-checkbox></p>
-                </div>
-                <div class="min-right-box" v-if="minItem.checkType">
-                  <div class="scope-box">
-                    <p>
-                      <el-checkbox v-model="minItem.scopeCheckType" style="margin-right:40px;">数据范围</el-checkbox>
-                      <el-select v-model="minItem.value" :disabled="!minItem.scopeCheckType" placeholder="请选择">
-                        <el-option :key="0" label="所有数据" :value="0"></el-option>
-                        <el-option :key="1" label="本部门及下级部门数据" :value="1"></el-option>
-                        <el-option :key="2" label="本部门及指定部门数据" :value="2"></el-option>
-                        <el-option :key="3" label="当前账号数据" :value="3"></el-option>
-                      </el-select>
-                    </p>
-                  </div>
-                  <div class="permission-box">
-                    <p class="check-left-p"><el-checkbox v-model="minItem.permissionCheckType">管理权限</el-checkbox></p>
-                    <div class="check-button-box" :class="minItem.permissionCheckType?'check-button-box-colorA':'check-button-box-colorB'">
-                      <img v-if="!minItem.permissionCheckType" src="@/assets/ZDimages/icon_11.png">
-                      <img v-if="minItem.permissionCheckType" src="@/assets/ZDimages/icon_13.png">
-                      <p>详细配置</p>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="big-right-box-null" v-if="!bigItem.children&&bigItem.checkType">
-              <div class="scope-box">
-                <p>
-                  <el-checkbox v-model="bigItem.scopeCheckType" style="margin-right:40px;">数据范围</el-checkbox>
-                  <el-select v-model="bigItem.value" :disabled="!bigItem.scopeCheckType" placeholder="请选择">
-                    <el-option :key="0" label="所有数据" :value="0"></el-option>
-                    <el-option :key="1" label="本部门及下级部门数据" :value="1"></el-option>
-                    <el-option :key="2" label="本部门及指定部门数据" :value="2"></el-option>
-                    <el-option :key="3" label="当前账号数据" :value="3"></el-option>
-                  </el-select>
-                </p>
-              </div>
-              <div class="permission-box">
-                <p class="check-left-p"><el-checkbox v-model="bigItem.permissionCheckType">管理权限</el-checkbox></p>
-                <div class="check-button-box" :class="bigItem.permissionCheckType?'check-button-box-colorA':'check-button-box-colorB'">
-                  <img v-if="!bigItem.permissionCheckType" src="@/assets/ZDimages/icon_11.png">
-                  <img v-if="bigItem.permissionCheckType" src="@/assets/ZDimages/icon_13.png">
-                  <p>详细配置</p>
-                </div>
-              </div>
-            </div>
-          </div>
-          <p class="big-box-null" v-if="!maxItem.children&&maxItem.menuName == '数据可视化'">数据可视化大屏查看权限</p>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-  import { listMenu} from "@/api/system/menu";
-  export default {
-    name: "tableDemo",
-    data() {
-      return {
-        menuList:[],
-      }
-    },
-    created() {
-      this.getList();
-    },
-    mounted(){
-
-    },
-    methods: {
-      /** 查询菜单列表 */
-      getList() {
-        this.loading = true;
-        listMenu(this.queryParams).then(response => {
-          this.menuList = this.handleTree(response.data, "menuId");
-          this.loading = false;
-        });
-      },
-    }
-  }
-</script>
-
-<style lang="scss" scoped>
-  .tableDemo{
-    height:100%;
-    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    padding:20px!important;
-    overflow: hidden!important;
-    .table-for-max-box{
-      border:1px solid #D7D7D7;
-      overflow-y: scroll;
-      *{
-        margin:0;
-        padding:0;
-      }
-      .table-title-box{
-        background: rgba(1,131,250,0.1);
-        display: flex;
-        p{
-          font-size:14px;
-          font-weight:700;
-          color:#333;
-          line-height:48px;
-          padding-left:20px;
-        }
-        p:nth-child(1){
-          width:615px;
-          border-right:1px solid #D7D7D7;
-        }
-      }
-      .table-for-big-box{
-        border-top:1px solid #D7D7D7;
-        display: flex;
-        font-size:14px;
-        .max-title-box-null{
-          width:615px!important;
-        }
-        .max-title-box{
-          width:230px;
-          border-right:1px solid #D7D7D7;
-          min-height:48px;
-          position: relative;
-          p{
-            position: absolute;
-            top:50%;
-            left:20px;
-            height:18px;
-            line-height:18px;
-            margin-top:-9px;
-          }
-        }
-        .max-right-box{
-          flex:5;
-          min-height:48px;
-          .big-box:nth-child(1){
-            border:none!important;
-          }
-          .big-box-null{
-            line-height:48px;
-            margin-left:20px;
-            color:#606266;
-          }
-          .big-box{
-            display: flex;
-            border-top:1px solid #D7D7D7;
-            .big-title-box-null{
-              width:385px!important;
-            }
-            .big-title-box{
-              width:180px;
-              border-right:1px solid #D7D7D7;
-              min-height:48px;
-              position: relative;
-              overflow: hidden;
-              p{
-                position: absolute;
-                top:50%;
-                left:20px;
-                height:48px;
-                line-height:48px;
-                margin-top:-24px;
-              }
-            }
-            .big-right-box-null{
-              display: flex;
-              .scope-box{
-                width:430px;
-                position: relative;
-                overflow: hidden;
-                border-right:1px solid #D7D7D7;
-                p{
-                  position: absolute;
-                  top:50%;
-                  left:20px;
-                  height:48px;
-                  line-height:48px;
-                  margin-top:-24px;
-                }
-              }
-              .permission-box{
-                flex:1;
-                position: relative;
-                overflow: hidden;
-                display: flex;
-                .check-left-p{
-                  margin-left:20px;
-                  height:48px;
-                  line-height:48px;
-                }
-                .check-button-box{
-                  width:130px;
-                  height:36px;
-                  margin:6px 0 0 36px;
-                  line-height:36px;
-                  display: flex;
-                  color:#333;
-                  cursor: pointer;
-                  img{
-                    width:16px;
-                    height:16px;
-                    margin:10px 14px 0 19px;
-                  }
-                }
-                .check-button-box-colorA{
-                  background: #CCE6FE;
-                  color:#0183FA;
-                }
-                .check-button-box-colorB{
-                  background: #E0E0E0;
-                  color:#333;
-                }
-              }
-            }
-            .big-right-box{
-              flex:5;
-              min-height:48px;
-              .min-box:nth-child(1){
-                border:none!important;
-              }
-              .min-box{
-                display: flex;
-                border-top:1px solid #D7D7D7;
-                .min-title-box{
-                  width:205px;
-                  border-right:1px solid #D7D7D7;
-                  min-height:48px;
-                  position: relative;
-                  overflow: hidden;
-                  p{
-                    position: absolute;
-                    top:50%;
-                    left:20px;
-                    height:48px;
-                    line-height:48px;
-                    margin-top:-24px;
-                  }
-                }
-                .min-right-box{
-                  flex:5;
-                  min-height:48px;
-                  display: flex;
-                  .scope-box{
-                    width:430px;
-                    position: relative;
-                    overflow: hidden;
-                    border-right:1px solid #D7D7D7;
-                    p{
-                      position: absolute;
-                      top:50%;
-                      left:20px;
-                      height:48px;
-                      line-height:48px;
-                      margin-top:-24px;
-                    }
-                  }
-                  .permission-box{
-                    flex:1;
-                    position: relative;
-                    overflow: hidden;
-                    display: flex;
-                    .check-left-p{
-                      margin-left:20px;
-                      height:48px;
-                      line-height:48px;
-                    }
-                    .check-button-box{
-                      width:130px;
-                      height:36px;
-                      margin:6px 0 0 36px;
-                      line-height:36px;
-                      display: flex;
-                      color:#333;
-                      cursor: pointer;
-                      img{
-                        width:16px;
-                        height:16px;
-                        margin:10px 14px 0 19px;
-                      }
-                    }
-                    .check-button-box-colorA{
-                      background: #CCE6FE;
-                      color:#0183FA;
-                    }
-                    .check-button-box-colorB{
-                      background: #E0E0E0;
-                      color:#333;
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-</style>
-<style>
-  .scope-box .el-input--medium .el-input__inner{
-    height:36px!important;
-  }
-  .scope-box .el-input--medium .el-input__icon {
-    line-height: 46px;
-  }
-</style>