v3-lab-web/src/views/integratedManagement/laboratoryManagement/layoutManagement/buildingManagement.vue

<template>
  <div class="buildingManagement">
    <div class="max-left-box">
      <div class="tree-box scrollbar-box">
        <div class="terr-max-box" v-for="(item,index) in treeList" :key="index">
          <div class="max-name-box">
            <p class="max-name" :class="checkTreeId==item.id?'check-color':''" @click="clickCheckTree(item.id,1)">{{item.name}}</p>
            <el-dropdown @command="(command)=>handleCommand(command,item)">
              <img src="@/assets/ZDimages/integratedManagement/icon_bjgl_gd.png" style="cursor:pointer;width:16px;height:4px;margin-top:7px;">
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="1">编辑</el-dropdown-item>
                <el-dropdown-item command="2">删除</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div class="terr-big-box" v-for="(itemOne,indexOne) in item.childList" :key="indexOne">
            <div class="big-name-box">
              <img v-if="!itemOne.type" src="@/assets/ZDimages/integratedManagement/icon_bjgl_jt.png" @click="terrClick(itemOne)">
              <img v-if="itemOne.type" src="@/assets/ZDimages/integratedManagement/icon_bjgl_xjt.png" @click="terrClick(itemOne)">
              <p :class="checkTreeId==itemOne.id?'check-color':''" @click="clickCheckTree(itemOne.id,2)">{{itemOne.name}}</p>
            </div>
            <div v-if="itemOne.type" class="terr-min-box" v-for="(itemTwo,indexTwo) in itemOne.childList" :key="indexTwo">
              <p class="min-name" :class="checkTreeId==itemTwo.id?'check-color':''" @click="clickCheckTree(itemTwo.id,3)">{{itemTwo.name}}</p>
            </div>
          </div>
        </div>
      </div>
      <p class="max-left-big-button" @click="handleCommand(3)">+ 新增校院</p>
    </div>
    <div class="max-right-box">
      <div class="school-box" v-if="checkTreeType == 1">
        <div class="max-right-button-box">
          <p class="null-p"></p>
          <p class="max-right-big-button" @click="handleCommand(4)">+ 新增楼栋</p>
        </div>
        <div class="right-big-list-box scrollbar-box">
          <div class="for-max-box" v-for="(item,index) in buildingList" :key="index"
               @dragover.prevent="dragoverPrevent(item)">
            <div class="for-big-box">
              <div class="for-big-box-left">
                <img src="@/assets/ZDimages/integratedManagement/icon_bjgl_td.png" class="for-img-one"
                     draggable="true"
                     @dragstart="dragstartPlay($event)"
                     @dragend="dragEnterOver($event, item)">
                <p class="for-text-one">{{item.name}}</p>
                <img src="@/assets/ZDimages/integratedManagement/icon_bjgl_lcs.png" class="for-img-two">
                <div class="for-text-box-one">
                  <p>6</p>
                  <p>楼层数</p>
                </div>
                <img src="@/assets/ZDimages/integratedManagement/icon_bjgl_fj.png" class="for-img-three">
                <div class="for-text-box-two">
                  <p>160</p>
                  <p>房间数</p>
                </div>
              </div>
              <div class="for-button-min-box">
                <div>
                  <img src="@/assets/ZDimages/basicsModules/icon_znwl_bj.png">
                  <p @click="handleCommand(8)">编辑</p>
                </div>
                <div>
                  <img src="@/assets/ZDimages/basicsModules/icon_znwl_sc.png">
                  <p @click="handleCommand(9)">删除</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="building-box" v-if="checkTreeType == 2">
        <div class="max-right-button-box">
          <p class="null-p"></p>
          <p class="max-right-big-button" style="margin-right:20px;" @click="handleCommand(7)">+ 新增楼层</p>
          <p class="max-right-big-button" @click="floorZK(1)">{{floorZkType==1?'一键收起':'一键展开'}}</p>
        </div>
        <div class="right-big-list-box scrollbar-box">
          <div class="for-max-box" v-for="(item,index) in buildingList" :key="index"
               @dragover.prevent="dragoverPrevent(item)">
            <div class="for-big-box">
              <div class="for-big-box-left">
                <img src="@/assets/ZDimages/integratedManagement/icon_bjgl_td.png" class="for-img-one"
                     draggable="true"
                     @dragstart="dragstartPlay($event)"
                     @dragend="dragEnterOver($event, item)">
                <p class="for-text-one">{{item.name}}</p>
              </div>
              <div class="for-button-min-box">
                <div>
                  <img src="@/assets/ZDimages/basicsModules/icon_znwl_bj.png">
                  <p @click="handleCommand(8)">编辑</p>
                </div>
                <div>
                  <img src="@/assets/ZDimages/basicsModules/icon_znwl_sc.png">
                  <p @click="handleCommand(9)">删除</p>
                </div>
                <div>
                  <img src="@/assets/ZDimages/integratedManagement/icon_bjgl_zk.png">
                  <p @click="floorZK(2,index)">{{item.type?'收起':'展开'}}</p>
                </div>
              </div>
            </div>
            <p v-if="item.type" style="border:1px solid #000;text-align: center;margin-left:36px;">暂无数据</p>
          </div>
        </div>
      </div>
      <div class="floor-box" v-if="checkTreeType == 3">
        <div class="map-max-big-box">
          <p class="position-button-p">设置布局</p>
        </div>
        <div class="table-box">
          <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
            <el-form-item label="关键字" prop="searchValue" style="margin-right:20px;margin-bottom:20px;">
              <el-input
                v-model="queryParams.searchValue"
                placeholder="请输入关键字"
                clearable
                size="small"
              />
            </el-form-item>
            <el-form-item label="房间类型" prop="searchValue" style="margin-right:20px;margin-bottom:20px;">
              <el-input
                v-model="queryParams.searchValue"
                placeholder="请选择关键字"
                clearable
                size="small"
              />
            </el-form-item>
            <el-form-item>
              <p class="inquire-button-one" @click="handleQuery" style="margin-right:20px;margin-bottom:20px;">查询</p>
              <p class="reset-button-one" @click="resetQuery">重置</p>
            </el-form-item>
          </el-form>
          <el-table v-loading="loading" border :data="dataList">
            <el-table-column label="房间号" align="left" prop="moldName" width="100"/>
            <el-table-column label="房间名称" align="left" prop="createBy"/>
            <el-table-column label="房间类型" align="left" prop="createBy" width="200"/>
            <el-table-column label="创建人" align="left" prop="createBy" width="200"/>
            <el-table-column label="创建时间" align="left" prop="createTime" width="200"/>
            <el-table-column label="操作" align="left" class-name="small-padding fixed-width" width="200">
              <template slot-scope="scope">
                <div class="table-button-box">
                  <p class="table-button-null"></p>
                  <p class="table-button-p" @click="roomClick(1,item)">编辑</p>
                  <p class="table-button-p" @click="roomClick(3)">删除</p>
                  <p class="table-button-null"></p>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            style="margin-top:20px;"
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </div>
      </div>
    </div>
    <!-- 新增/编辑院校 -->
    <el-dialog :title="dialogTitle" v-if="dialogOpen" :visible.sync="dialogOpen" width="600px" append-to-body>
      <el-form ref="dialogForm" :model="dialogForm" :rules="rules" label-width="110px">
        <el-form-item label="院校名称：" prop="nameOne">
          <el-input v-model="dialogForm.nameOne" maxlength="10" placeholder="请输入院校名称" :disabled="dialogType==2 || dialogType==3"/>
        </el-form-item>
        <el-form-item label="楼栋名称：" prop="nameTwo" v-if="dialogType==2 || dialogType==3">
          <el-input v-model="dialogForm.nameTwo" maxlength="10" placeholder="请输入楼栋名称" :disabled="dialogType==3"/>
        </el-form-item>
        <el-form-item label="楼层名称：" prop="nameThree" v-if="dialogType==3">
          <el-input v-model="dialogForm.nameThree" maxlength="10" placeholder="请输入楼层名称" />
        </el-form-item>
        <el-form-item label="排序序号：" prop="key">
          <el-input v-model="dialogForm.key" maxlength="10" placeholder="请输入排序序号" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer dialog-footer-box">
        <p class="dialog-footer-button-null"></p>
        <p class="dialog-footer-button-info" @click="cancel">取消</p>
        <p class="dialog-footer-button-primary" @click="submitForm">提交</p>
        <p class="dialog-footer-button-null"></p>
      </div>
    </el-dialog>
    <el-dialog title="房间配置" v-if="dialogOpenRoom" :visible.sync="dialogOpenRoom" width="600px" append-to-body>
      <el-form ref="dialogForm" :model="dialogForm" :rules="rules" label-width="110px">
        <el-form-item label="楼栋名称：" prop="nameTwo">
          <el-input v-model="dialogForm.nameTwo" maxlength="10" placeholder="请输入楼栋名称" disabled/>
        </el-form-item>
        <el-form-item label="楼层名称：" prop="nameThree">
          <el-input v-model="dialogForm.nameThree" maxlength="10" placeholder="请输入楼层名称" />
        </el-form-item>
        <el-form-item label="房间类型：" prop="key">
          <el-input v-model="dialogForm.key" maxlength="10" placeholder="请输入房间类型" />
        </el-form-item>
        <el-form-item label="房间号：" prop="key">
          <el-input v-model="dialogForm.key" maxlength="10" placeholder="请输入房间号" />
        </el-form-item>
        <el-form-item label="房间名称：" prop="key">
          <el-input v-model="dialogForm.key" maxlength="10" placeholder="请输入房间名称" />
        </el-form-item>
        <el-form-item label="房间选择：" prop="key">
          <el-input v-model="dialogForm.key" maxlength="10" placeholder="请输入房间选择" />
        </el-form-item>
        <el-form-item label="房间位置：" prop="key">
          <el-input v-model="dialogForm.key" maxlength="10" placeholder="请输入房间位置" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer dialog-footer-box">
        <p class="dialog-footer-button-null"></p>
        <p class="dialog-footer-button-info" @click="cancel">取消</p>
        <p class="dialog-footer-button-primary" @click="submitForm">提交</p>
        <p class="dialog-footer-button-null"></p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "buildingManagement",
    data() {
      return {
        //拖拽起始Y点(用于计算朝向)
        clientY:null,
        clientId:null,
        treeList:[
          {
            id:'1',
            name:'西安电子科技大学东校区',
            childList:[
              {
                id:'2',
                name:'一号实验楼',
                type:false,
                childList:[
                  {
                    id:'3',
                    name:'二层',
                    childList:[]
                  }
                ]
              },
              {
                id:'4',
                name:'一号实验楼',
                type:false,
                childList:[
                  {
                    id:'5',
                    name:'二层',
                    childList:[]
                  }
                ]
              },
            ]
          }
        ],
        //选中状态
        checkTreeId:1,
        checkTreeType:1,
        buildingList:[
          {id:1,name:"名称1",type:false},{id:2,name:"名称2",type:true},{id:3,name:"名称3",type:false},{id:4,name:"名称1",type:false},{id:5,name:"名称2",type:true},{id:6,name:"名称3",type:false},{id:7,name:"名称1",type:false},{id:8,name:"名称2",type:true},{id:9,name:"名称3",type:false},
        ],
        //楼层展开/关闭状态
        floorZkType:null, //1.全部展开 2.全部关闭 3.有关有开
        //编辑弹窗开关
        dialogOpen:false,
        dialogType:null,
        dialogTitle:'',
        // 表单参数
        dialogForm: {},
        // 表单校验
        rules: {
          nameOne: [
            { required: true, message: "请输入院校名称", trigger: "blur" },
            { required: true, message: "请输入院校名称", validator: this.spaceJudgment, trigger: "blur" }
          ],
          nameTwo: [
            { required: true, message: "请输入楼栋名称", trigger: "blur" },
            { required: true, message: "请输入楼栋名称", validator: this.spaceJudgment, trigger: "blur" }
          ],
          nameThree: [
            { required: true, message: "请输入楼层名称", trigger: "blur" },
            { required: true, message: "请输入楼层名称", validator: this.spaceJudgment, trigger: "blur" }
          ],
          key: [
            { required: true, message: "请输入排序序号", trigger: "blur" },
            { required: true, message: "请输入排序序号", validator: this.spaceJudgment, trigger: "blur" }
          ],
        },
        // 显示搜索条件
        showSearch: true,
        loading:false,
        //楼层查询数据
        queryParams:{},
        //楼层表单数据
        dataList:[],
        total:10,
        //房间配置相关
        dialogOpenRoom:false,
      }
    },
    created() {

    },
    mounted(){
      this.floorZkFor();
    },
    methods:{
      //房间操作按钮
      roomClick(type){
        if(type == 1){
          this.dialogOpenRoom = true;
        }else if(type == 2){
          this.$confirm('确定要删除该房间吗?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
          }).then(() => {
          }).catch(() => {});
        }else if(type == 3){
          this.dialogOpenRoom = true;
        }
      },
      //楼栋弹出下啦列表选中事件
      handleCommand(command,item){
        if (command == 1){
          //编辑院校
          this.$set(this,'dialogTitle','编辑院校');
          this.$set(this,'dialogType',1);
          this.$set(this,'dialogOpen',true);
        }else if(command == 2){
          //删除院校
          this.$confirm('确定要删除该院校吗?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
          }).then(() => {
          }).catch(() => {});
        }else if(command == 3){
          //新增院校
          this.$set(this,'dialogTitle','新增院校');
          this.$set(this,'dialogType',1);
          this.$set(this,'dialogOpen',true);
        }else if(command == 4){
          //新增楼栋
          this.$set(this,'dialogTitle','新增楼栋');
          this.$set(this,'dialogType',2);
          this.$set(this,'dialogOpen',true);
        }else if(command == 5){
          //编辑楼栋
          this.$set(this,'dialogTitle','编辑楼栋');
          this.$set(this,'dialogType',2);
          this.$set(this,'dialogOpen',true);
        }else if(command == 6){
          //删除楼栋
          this.$confirm('确定要删除该楼栋吗?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
          }).then(() => {
          }).catch(() => {});
        }else if(command == 7){
          //新增楼层
          this.$set(this,'dialogTitle','新增楼层');
          this.$set(this,'dialogType',3);
          this.$set(this,'dialogOpen',true);
        }else if(command == 8){
          //编辑楼层
          this.$set(this,'dialogTitle','编辑楼层');
          this.$set(this,'dialogType',3);
          this.$set(this,'dialogOpen',true);
        }else if(command == 9){
          //删除楼层
          this.$confirm('确定要删除该楼层吗?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
          }).then(() => {
          }).catch(() => {});
        }
      },
      //树状结构选中
      clickCheckTree(id,type){
        this.$set(this,'checkTreeId',id)
        this.$set(this,'checkTreeType',type)
      },
      // 取消按钮
      cancel() {
        this.$set(this,'dialogOpen',false);
        this.$set(this,'dialogForm',{});
        this.$set(this,'dialogType',null);
      },
      //确定按钮
      submitForm(){

      },
      //树状结构展开收回
      terrClick(itemOne){
        itemOne.type = !itemOne.type;
      },
      //展开/收起开关
      floorZK(type,index){
        let self = this;
        //type等于1时全部开关功能 等于2时单个开关
        if(type == 1){
          let list = JSON.parse(JSON.stringify(self.buildingList))
          for(let i=0;i<list.length;i++){
            if(self.floorZkType == 1){
              list[i].type = false;
            }else if(self.floorZkType == 2){
              list[i].type = true;
            }else if(self.floorZkType == 3){
              list[i].type = true;
            }
          }
          this.$set(this,'buildingList',list);
          this.floorZkFor();
        }else if(type == 2){
          this.$set(this.buildingList[index],'type',this.buildingList[index].type?false:true)
          this.floorZkFor();
        }
      },
      //层展开关闭判断
      floorZkFor(){
        let self = this;
        let numOne = 0;
        let numTwo = 0;
        for(let i=0;i<self.buildingList.length;i++){
          if(self.buildingList[i].type){
            numOne++
          }else{
            numTwo++
          }
        }
        if(numOne == self.buildingList.length){
          this.$set(this,'floorZkType',1);
        }else if(numTwo == self.buildingList.length){
          this.$set(this,'floorZkType',2);
        }else{
          this.$set(this,'floorZkType',3);
        }
      },
      //拖拽抓取时触发
      dragstartPlay(event) {
        this.$set(this,'clientY',event.clientY)
      },
      //拖拽途径触发
      dragoverPrevent(item){
        this.$set(this,'clientId',item.id)
      },
      //拖拽释放触发
      dragEnterOver(event,item) {
        let self = this;
        if(this.clientId && item.id != this.clientId){
          let list = [];
          let obj = null;
          for(let i=0;i<self.buildingList.length;i++){
            if(self.buildingList[i].id == item.id){
              obj = JSON.parse(JSON.stringify(self.buildingList[i]))
            }
          }
          if(event.clientY>this.clientY){
            for(let i=0;i<self.buildingList.length;i++){
              if(self.buildingList[i].id != item.id && self.buildingList[i].id != this.clientId){
                list.push(self.buildingList[i]);
              }else if(self.buildingList[i].id == this.clientId){
                list.push(self.buildingList[i]);
                list.push(obj);
              }
            }
          }else if(event.clientY<this.clientY){
            for(let i=0;i<self.buildingList.length;i++){
              if(self.buildingList[i].id == this.clientId){
                list.push(obj);
                list.push(self.buildingList[i]);
              }else if(self.buildingList[i].id != item.id && self.buildingList[i].id != this.clientId){
                list.push(self.buildingList[i]);
              }
            }
          }
          this.$set(this,'buildingList',list);
          this.$set(this,'clientId',null);
        }
      },
      getList(){

      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        // this.resetForm("queryForm");
        this.$set(this,'queryParams',{
          pageNum: 1,
          pageSize:20,
          typeName:"",
          title: '',
        });
        this.handleQuery();
      },
    }
  }
</script>

<style scoped lang="scss">
  .buildingManagement{
    flex:1;
    display: flex!important;
    overflow: hidden;
    padding:22px 28px 22px 32px;
    *{
      margin:0;
      font-weight:100;
    }
    .max-left-box{
      width:281px;
      border-right:1px dashed #A2A2A2;
      display: flex;
      flex-direction: column;
      .tree-box{
        flex:1;
        .terr-max-box{
          .max-name-box{
            display: flex;
            margin-right:20px;
            margin-bottom:10px;
            color:#D8D8D8;
            font-size:20px;
            .max-name{
              flex:1;
              margin-right:19px;
              color:#333;
              font-size:16px;
              line-height:16px;
              margin-top:3px;
              cursor: pointer;
            }
          }
          .terr-big-box{
            margin-left:30px;
            .big-name-box{
              cursor: pointer;
              height:40px;
              line-height:40px;
              display: flex;
              font-size:16px;
              color:#333;
              img{
                width:16px;
                height:16px;
                margin-top:12px;
                margin-right:4px;
              }
            }
            .terr-min-box{
              margin-left:30px;
              .min-name{
                cursor: pointer;
                height:40px;
                line-height:40px;
                display: flex;
                font-size:16px;
                color:#333;
              }
            }
          }
          .check-color{
            color:#0183FA!important;
          }
        }
      }
      .max-left-big-button{
        color:#0183FA;
        border:1px dashed #0183FA;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
        width:180px;
        line-height:40px;
        margin: 20px 0 20px 40px;
        text-align: center;
        font-size:14px;
        cursor: pointer;
      }
      .max-left-big-button:hover{
        color:#fff;
        background: #0183FA;
        border:1px solid #0183FA;
      }
    }
    .max-right-box{
      flex:1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      .school-box{
        flex:1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        .max-right-button-box{
          height:40px;
          display: flex;
          margin-bottom:22px;
          .null-p{
            flex:1;
          }
          .max-right-big-button{
            color:#fff;
            background: #0045AF;
            -webkit-border-radius: 6px;
            -moz-border-radius: 6px;
            border-radius: 6px;
            width:130px;
            line-height:40px;
            text-align: center;
            font-size:14px;
            cursor: pointer;
          }
          .max-right-big-button:hover{
            color:#fff;
            background: #0183FA;
          }
        }
        .right-big-list-box{
          flex:1;
          .for-max-box{
            .for-big-box{
              display: flex;
              border:1px solid #dedede;
              height:100px;
              box-shadow: 0px 3px 8px 0px rgba(0,0,0,0.16);
              margin-bottom:30px;
              margin-left:36px;
              border-radius:6px;
              .for-big-box-left{
                flex:1;
                display: flex;
                .for-img-one{
                  cursor: pointer;
                  height:30px;
                  width:30px;
                  margin:35px 0 0 30px;
                }
                .for-text-one{
                  font-size:16px;
                  line-height:100px;
                  margin-left:95px;
                  width:230px;
                  font-weight:500;
                }
                .for-img-two{
                  height:48px;
                  width:48px;
                  margin:26px 23px 0 30px;
                }
                .for-text-box-one{
                  width:88px;
                  margin-right:73px;
                  p{
                    text-align: center;
                  }
                  p:nth-child(1){
                    margin-top:20px;
                    font-size:24px;
                    line-height:30px;
                    color:#0183FA;
                  }
                  p:nth-child(2){
                    margin-top:10px;
                    font-size:16px;
                    line-height:16px;
                    color:#333;
                  }
                }
                .for-img-three{
                  height:48px;
                  width:48px;
                  margin:26px 23px 0 0;
                }
                .for-text-box-two{
                  width:88px;
                  p{
                    text-align: center;
                  }
                  p:nth-child(1){
                    margin-top:20px;
                    font-size:24px;
                    line-height:30px;
                    color:#0183FA;
                  }
                  p:nth-child(2){
                    margin-top:10px;
                    font-size:16px;
                    line-height:16px;
                    color:#333;
                  }
                }
              }
              .for-button-min-box{
                width:220px;
                margin-top:9px;
                height:82px;
                border-left:1px dashed rgba(0,0,0,0.3);
                display: flex;
                line-height:82px;
                div{
                  margin-left: 34px;
                  display: flex;
                  width: 60px;
                  cursor: pointer;
                  img{
                    width:16px;
                    height:16px;
                    margin-right:8px;
                    margin-top:33px;
                  }
                  p{
                    font-size:14px;
                    color:#333;
                  }
                }
              }
            }
          }
        }
      }
      .building-box{
        flex:1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        .max-right-button-box{
          height:40px;
          display: flex;
          margin-bottom:22px;
          .null-p{
            flex:1;
          }
          .max-right-big-button{
            color:#fff;
            background: #0045AF;
            -webkit-border-radius: 6px;
            -moz-border-radius: 6px;
            border-radius: 6px;
            width:130px;
            line-height:40px;
            text-align: center;
            font-size:14px;
            cursor: pointer;
          }
          .max-right-big-button:hover{
            color:#fff;
            background: #0183FA;
          }
        }
        .right-big-list-box{
          flex:1;
          .for-max-box{
            margin-bottom:30px;
            .for-big-box{
              display: flex;
              border:1px solid #dedede;
              height:100px;
              box-shadow: 0px 3px 8px 0px rgba(0,0,0,0.16);
              margin-left:36px;
              border-radius:6px;
              .for-big-box-left{
                flex:1;
                display: flex;
                .for-img-one{
                  cursor: pointer;
                  height:30px;
                  width:30px;
                  margin:35px 0 0 30px;
                }
                .for-text-one{
                  font-size:16px;
                  line-height:100px;
                  margin-left:95px;
                  width:230px;
                  font-weight:500;
                }
                .for-img-two{
                  height:48px;
                  width:48px;
                  margin:26px 23px 0 30px;
                }
                .for-text-box-one{
                  width:88px;
                  margin-right:73px;
                  p{
                    text-align: center;
                  }
                  p:nth-child(1){
                    margin-top:20px;
                    font-size:24px;
                    line-height:30px;
                    color:#0183FA;
                  }
                  p:nth-child(2){
                    margin-top:10px;
                    font-size:16px;
                    line-height:16px;
                    color:#333;
                  }
                }
                .for-img-three{
                  height:48px;
                  width:48px;
                  margin:26px 23px 0 0;
                }
                .for-text-box-two{
                  width:88px;
                  p{
                    text-align: center;
                  }
                  p:nth-child(1){
                    margin-top:20px;
                    font-size:24px;
                    line-height:30px;
                    color:#0183FA;
                  }
                  p:nth-child(2){
                    margin-top:10px;
                    font-size:16px;
                    line-height:16px;
                    color:#333;
                  }
                }
              }
              .for-button-min-box{
                width:330px;
                margin-top:9px;
                height:82px;
                border-left:1px dashed rgba(0,0,0,0.3);
                display: flex;
                line-height:82px;
                div{
                  margin-left: 34px;
                  display: flex;
                  width: 60px;
                  cursor: pointer;
                  img{
                    width:16px;
                    height:16px;
                    margin-right:8px;
                    margin-top:33px;
                  }
                  p{
                    font-size:14px;
                    color:#333;
                  }
                }
              }
            }
          }
        }
      }
      .floor-box{
        flex:1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        .map-max-big-box{
          height:400px;
          position:relative;
          border:1px solid #E0E0E0;
          margin-bottom:20px;
          margin-left:36px;
          .position-button-p{
            position:absolute;
            right:12px;
            top:13px;
            width:100px;
            line-height:40px;
            font-size:14px;
            color:#fff;
            background: #0045AF;
            border-radius:6px;
            text-align: center;
            cursor: pointer;
          }
        }
        .table-box{
          margin-left:36px;
          flex:1;
          display: flex;
          flex-direction: column;
          overflow: hidden;
        }
      }
    }
  }
</style>