FE-V2-PC/src/views/comprehensive/laboratoryManagement/building/newIndex.vue

<!--新版布局管理-->
<template>
  <div class="app-container building">
    <div class="buildingManagement" v-if="pageType == 1">
      <div class="max-left-box">
        <div class="tree-box scrollbar-box" v-if="treeList[0]">
          <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,1)">
                {{item.name}}</p>
              <el-dropdown @command="(command)=>handleCommand(command,item)" trigger="click">
                <img src="@/assets/ZDimages/evacuation3_2/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.buildFloorVoList" :key="indexOne">
              <div class="big-name-box">
                <p v-if="!itemOne.buildFloorVoList[0]" style="width:16px;"></p>
                <img v-if="!itemOne.onType&&itemOne.buildFloorVoList[0]"
                     src="@/assets/ZDimages/evacuation3_2/icon_bjgl_jt.png" @click="terrClick(itemOne)">
                <img v-if="itemOne.onType&&itemOne.buildFloorVoList[0]"
                     src="@/assets/ZDimages/evacuation3_2/icon_bjgl_xjt.png" @click="terrClick(itemOne)">
                <p class="name-p" :class="checkTreeId==itemOne.id?'check-color':''" @click="clickCheckTree(itemOne,2)">
                  {{itemOne.name}}</p>
              </div>
              <div v-if="itemOne.onType" class="terr-min-box" v-for="(itemTwo,indexTwo) in itemOne.buildFloorVoList"
                   :key="indexTwo">
                <p class="min-name" :class="checkTreeId==itemTwo.id?'check-color':''"
                   @click="clickCheckTree(itemTwo,3)">{{itemTwo.name}}</p>
              </div>
            </div>
          </div>
        </div>
        <p class="tree-null-p" v-if="!treeList[0]">暂无数据</p>
        <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/evacuation3_2/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/evacuation3_2/icon_bjgl_lcs.png" class="for-img-two">
                  <div class="for-text-box-one">
                    <p>{{item.floorNum}}</p>
                    <p>楼层数</p>
                  </div>
                  <img src="@/assets/ZDimages/evacuation3_2/icon_bjgl_fj.png" class="for-img-three">
                  <div class="for-text-box-two">
                    <p>{{item.roomNum}}</p>
                    <p>房间数</p>
                  </div>
                </div>
                <div class="for-button-min-box">
                  <div @click="handleCommand(5,item)">
                    <img src="@/assets/ZDimages/evacuation3_2/icon_znwl_bj.png">
                    <p>编辑</p>
                  </div>
                  <div @click="handleCommand(6,item)">
                    <img src="@/assets/ZDimages/evacuation3_2/icon_znwl_sc.png">
                    <p>删除</p>
                  </div>
                </div>
              </div>
            </div>
            <img class="null-img" v-if="!buildingList[0]" src="@/assets/ZDimages/null-data-1.png">
          </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/evacuation3_2/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 @click="handleCommand(8,item)">
                    <img src="@/assets/ZDimages/evacuation3_2/icon_znwl_bj.png">
                    <p>编辑</p>
                  </div>
                  <div @click="handleCommand(9,item)">
                    <img src="@/assets/ZDimages/evacuation3_2/icon_znwl_sc.png">
                    <p>删除</p>
                  </div>
                  <div @click="floorZK(2,index)">
                    <img src="@/assets/ZDimages/evacuation3_2/icon_bjgl_zk.png">
                    <p>{{item.onType?'收起':'展开'}}</p>
                  </div>
                </div>
              </div>
              <div v-if="item.onType">
                <div class="layout-data-max-big-box"
                     v-if="item.layoutData">
                  <div class="layout-data-max-big-min-box"
                       :style="'width:'+item.width+'px;height:'+item.height+'px;transform: scale('+item.zoomData+');margin-top:-'+item.height/2+'px;margin-left:-'+item.width/2+'px;'">
                    <div class="layout-data-max-min-box"
                         :style="'width:'+item.width+'px;height:'+item.height+'px;'">
                      <div class="map-max-for-box"
                           v-for="(bigItem,index) in item.mapList" :key="index"
                           :class="bigItem.type == 2?'for-map-box-one':''"
                           :style="'top:'+bigItem.y+'px;left:'+bigItem.x+'px;width:'+bigItem.w+'px;height:'+bigItem.h+'px;'">
                        <div class="map-max-for-left-box"></div>
                        <div class="map-max-for-center-box">
                          <div class="map-max-for-center-min-left"></div>
                          <div class="map-max-for-center-min-center"
                               :class="bigItem.type == 2?'for-map-box-one':(bigItem.type == 1?'for-map-box':(bigItem.type == 3?'for-map-box-two':''))">
                            <div class="min-text-box" v-if="bigItem.type==1">{{bigItem.roomNum}}</div>
                            <div v-if="bigItem.type == 1"
                                 :class="minItem.toward=='top'?'center-move-door-p-t':(minItem.toward=='bottom'?'center-move-door-p-b':(minItem.toward=='left'?'center-move-door-p-l':(minItem.toward=='right'?'center-move-door-p-r':'')))"
                                 v-for="(minItem,minIndex) in bigItem.doorList" :key="minIndex"
                                 :style="'top:'+minItem.y+'px;left:'+minItem.x+'px;width:'+minItem.w+'px;height:'+minItem.h+'px;'"></div>
                            <div v-if="bigItem.type == 3"
                                 :class="minItem.toward=='top'?'center-move-door-p-t-ss':(minItem.toward=='bottom'?'center-move-door-p-b-ss':(minItem.toward=='left'?'center-move-door-p-l-ss':(minItem.toward=='right'?'center-move-door-p-r-ss':'')))"
                                 v-for="(minItem,minIndex) in bigItem.doorList" :key="minIndex"
                                 :style="'top:'+minItem.y+'px;left:'+minItem.x+'px;width:'+minItem.w+'px;height:'+minItem.h+'px;'"></div>
                            <div @click="lighButton(minItem)"
                                 :class="minItem.state=='1'?'lightTop':(minItem.state=='2'?'lightBottom':(minItem.state=='3'?'lightLeft':(minItem.state=='4'?'lightRight':'')))"
                                 v-for="(minItem,minIndex) in bigItem.lightList" :key="minIndex"
                                 :style="'top:'+minItem.y+'px;left:'+minItem.x+'px;width:'+minItem.w+'px;height:'+minItem.h+'px;'"></div>
                          </div>
                          <div class="map-max-for-center-min-right"></div>
                        </div>
                        <div class="map-max-for-right-box"></div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="layout-data-max-big-null-box" v-else>
                  <img src="@/assets/ZDimages/evacuation3_2/icon_wsctp.png">
                  <div>
                    <p></p>
                    <p>暂未设置房间布局</p>
                    <p @click="clickPage(2,item)">设置布局</p>
                    <p></p>
                  </div>
                </div>
              </div>
            </div>
            <img class="null-img" v-if="!buildingList[0]" src="@/assets/ZDimages/null-data-1.png">
          </div>
        </div>
        <div class="floor-box" v-if="checkTreeType == 3">
          <div class="map-max-big-box">
            <div class="layout-data-max-big-box" v-if="buildingList.layoutData">
              <div class="layout-data-max-big-min-box"
                   :style="'width:'+buildingList.width+'px;height:'+buildingList.height+'px;transform: scale('+buildingList.zoomData+');margin-top:-'+buildingList.height/2+'px;margin-left:-'+buildingList.width/2+'px;'">
                <div class="layout-data-max-min-box"
                     :style="'width:'+buildingList.width+'px;height:'+buildingList.height+'px;'">
                  <div class="map-max-for-box"
                       v-for="(item,index) in buildingList.mapList" :key="index"
                       :class="item.type == 2?'for-map-box-one':''"
                       :style="'top:'+item.y+'px;left:'+item.x+'px;width:'+item.w+'px;height:'+item.h+'px;'">
                    <div class="map-max-for-left-box"></div>
                    <div class="map-max-for-center-box">
                      <div class="map-max-for-center-min-left"></div>
                      <div class="map-max-for-center-min-center"
                           :class="item.type == 2?'for-map-box-one':(item.type == 1?'for-map-box':(item.type == 3?'for-map-box-two':''))">
                        <div class="min-text-box" v-if="item.type==1">{{item.roomNum}}</div>
                        <div v-if="item.type == 1"
                            :class="minItem.toward=='top'?'center-move-door-p-t':(minItem.toward=='bottom'?'center-move-door-p-b':(minItem.toward=='left'?'center-move-door-p-l':(minItem.toward=='right'?'center-move-door-p-r':'')))"
                             v-for="(minItem,minIndex) in item.doorList" :key="minIndex"
                             :style="'top:'+minItem.y+'px;left:'+minItem.x+'px;width:'+minItem.w+'px;height:'+minItem.h+'px;'"></div>
                        <div v-if="item.type == 3"
                            :class="minItem.toward=='top'?'center-move-door-p-t-ss':(minItem.toward=='bottom'?'center-move-door-p-b-ss':(minItem.toward=='left'?'center-move-door-p-l-ss':(minItem.toward=='right'?'center-move-door-p-r-ss':'')))"
                             v-for="(minItem,minIndex) in item.doorList" :key="minIndex"
                             :style="'top:'+minItem.y+'px;left:'+minItem.x+'px;width:'+minItem.w+'px;height:'+minItem.h+'px;'"></div>
                        <div @click="lighButton(minItem)"
                             :class="minItem.state=='1'?'lightTop':(minItem.state=='2'?'lightBottom':(minItem.state=='3'?'lightLeft':(minItem.state=='4'?'lightRight':'')))"
                             v-for="(minItem,minIndex) in item.lightList" :key="minIndex"
                             :style="'top:'+minItem.y+'px;left:'+minItem.x+'px;width:'+minItem.w+'px;height:'+minItem.h+'px;'"></div>
                      </div>
                      <div class="map-max-for-center-min-right"></div>
                    </div>
                    <div class="map-max-for-right-box"></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="layout-data-max-big-null-box" v-else>
              <img src="@/assets/ZDimages/evacuation3_2/icon_wsctp.png">
              <div>
                <p></p>
                <p>暂未设置房间布局</p>
                <p @click="clickPage(2,buildingList)">设置布局</p>
                <p></p>
              </div>
            </div>
            <p class="position-button-p" @click="clickPage(2,buildingList)" v-if="buildingList.layoutData">设置布局</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="roomType" style="margin-right:20px;margin-bottom:20px;">
                <el-select v-model="queryParams.roomType" placeholder="请选择房间类型"
                           style="margin-right:20px;margin-bottom:20px;">
                  <el-option
                    v-for="dict in roomTypeOptions"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue">
                  </el-option>
                </el-select>
              </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 border :data="dataList">
              <el-table-column label="房间号" align="left" prop="roomNum" width="100"/>
              <el-table-column label="房间名称" align="left" prop="roomName">
                <template slot-scope="scope">
                  <span>{{scope.row.roomType!='-99'?scope.row.subName:scope.row.roomName}}</span>
                  <!--<span>{{scope.row.roomType}}</span>-->
                </template>
              </el-table-column>
              <el-table-column label="房间类型" align="left" prop="roomType" width="200">
                <template slot-scope="scope">
                  <span v-for="(item,index) in roomTypeOptions" :key="index" v-if="item.dictValue == scope.row.roomType">{{item.dictLabel}}</span>
                </template>
              </el-table-column>
              <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="100">
                <template slot-scope="scope">
                  <div class="button-box" style="display: flex">
                    <p class="table-min-button" @click="roomClick(1,scope.row)">编辑</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==22 || dialogType==3 || dialogType==33"/>
          </el-form-item>
          <el-form-item label="楼栋名称：" prop="nameTwo"
                        v-if="dialogType==2 || dialogType==22 || dialogType==3 || dialogType==33">
            <el-input v-model="dialogForm.nameTwo" maxlength="10" placeholder="请输入楼栋名称"
                      :disabled="dialogType==3 || dialogType==33"/>
          </el-form-item>
          <el-form-item label="楼层名称：" prop="nameThree" v-if="dialogType==3 || dialogType==33">
            <el-input v-model="dialogForm.nameThree" maxlength="10" placeholder="请输入楼层名称"/>
          </el-form-item>
          <el-form-item label="排序序号：" prop="sortNo" class="dialog-sort-no-form-item-box">
            <el-input-number v-model="dialogForm.sortNo" :min="0" :max="999" placeholder="请输入排序序号" :controls="false"
                             style="width:450px;"></el-input-number>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <div style="display: flex">
            <p style="flex:1;"></p>
            <p
              style="cursor:pointer;border-radius:6px;width:70px;line-height:30px;font-size:12px;text-align:center;margin-right:17px;color:#999999;background:#E0E0E0;"
              @click="cancel">取消</p>
            <p
              style="cursor:pointer;border-radius:6px;width:70px;line-height:30px;font-size:12px;text-align:center;color:#fff;background:#0045AF;"
              @click="submitForm">确定</p>
            <p style="flex:1;"></p>
          </div>
        </div>
      </el-dialog>
      <el-dialog title="房间配置" v-if="dialogOpenRoom" :visible.sync="dialogOpenRoom" width="800px" append-to-body class="building-dialog-box">
        <el-form ref="roomDialogForm" :model="roomDialogForm" :rules="rules" label-width="110px">
          <el-form-item label="楼栋名称：" prop="buildName">
            <el-input v-model="roomDialogForm.buildName" maxlength="10" placeholder="请输入楼栋名称" disabled style="width:575px;"/>
          </el-form-item>
          <el-form-item label="楼层名称：" prop="floorName">
            <el-input v-model="roomDialogForm.floorName" maxlength="10" placeholder="请输入楼层名称" disabled style="width:575px;"/>
          </el-form-item>
          <el-form-item label="房间类型：" prop="roomType">
            <el-select v-model="roomDialogForm.roomType" placeholder="请选择房间类型" style="width:575px;">
              <el-option
                v-for="dict in roomTypeOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="房间号：" prop="roomNum">
            <el-input v-model="roomDialogForm.roomNum" maxlength="10" placeholder="请输入房间号" style="width:575px;"/>
          </el-form-item>
          <el-form-item label="房间名称：" prop="roomName" v-if="roomDialogForm.roomType == '-99'">
            <el-input v-model="roomDialogForm.roomName" maxlength="10" placeholder="请输入房间名称" style="width:575px;"/>
          </el-form-item>
          <el-form-item label="房间选择：" prop="subId" v-if="roomDialogForm.roomType != '-99'">
            <el-select
              style="width:575px;"
              v-model="roomDialogForm.subId"
              filterable
              remote
              reserve-keyword
              @focus="selectFocus"
              placeholder="请选择房间"
              :remote-method="userSelectList"
              :loading="loading">
              <el-option
                v-for="item in subjectOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="房间位置：">
            <div class="map-max-big-box">
              <div class="layout-data-max-big-box">
                <div class="layout-data-max-big-min-box"
                     :style="'width:'+dialogBuildingData.width+'px;height:'+dialogBuildingData.height+'px;transform: scale('+minZoomData+');margin-top:-'+dialogBuildingData.height/2+'px;margin-left:-'+dialogBuildingData.width/2+'px;'">
                  <div class="layout-data-max-min-box"
                       :style="'width:'+dialogBuildingData.width+'px;height:'+dialogBuildingData.height+'px;'">
                    <div class="map-max-for-box"
                         v-for="(item,index) in dialogBuildingData.mapList" :key="index"
                         :class="item.type == 2?'for-map-box-one':''"
                         :style="'top:'+item.y+'px;left:'+item.x+'px;width:'+item.w+'px;height:'+item.h+'px;'">
                      <div class="map-max-for-left-box"></div>
                      <div class="map-max-for-center-box">
                        <div class="map-max-for-center-min-left"></div>
                        <div class="map-max-for-center-min-center"
                             :class="item.type == 2?'for-map-box-one':(item.type == 1 &&item.checkType?'for-map-box-three':(item.type == 3?'for-map-box-two':(item.type == 1?'for-map-box':'')))">
                          <div class="min-text-box" v-if="item.type==1">{{item.roomNum}}</div>
                          <div v-if="item.type == 1"
                               :class="minItem.toward=='top'?'center-move-door-p-t':(minItem.toward=='bottom'?'center-move-door-p-b':(minItem.toward=='left'?'center-move-door-p-l':(minItem.toward=='right'?'center-move-door-p-r':'')))"
                               v-for="(minItem,minIndex) in item.doorList" :key="minIndex"
                               :style="'top:'+minItem.y+'px;left:'+minItem.x+'px;width:'+minItem.w+'px;height:'+minItem.h+'px;'"></div>
                          <div v-if="item.type == 3"
                               :class="minItem.toward=='top'?'center-move-door-p-t-ss':(minItem.toward=='bottom'?'center-move-door-p-b-ss':(minItem.toward=='left'?'center-move-door-p-l-ss':(minItem.toward=='right'?'center-move-door-p-r-ss':'')))"
                               v-for="(minItem,minIndex) in item.doorList" :key="minIndex"
                               :style="'top:'+minItem.y+'px;left:'+minItem.x+'px;width:'+minItem.w+'px;height:'+minItem.h+'px;'"></div>
                          <div @click="lighButton(minItem)"
                               :class="minItem.state=='1'?'lightTop':(minItem.state=='2'?'lightBottom':(minItem.state=='3'?'lightLeft':(minItem.state=='4'?'lightRight':'')))"
                               v-for="(minItem,minIndex) in item.lightList" :key="minIndex"
                               :style="'top:'+minItem.y+'px;left:'+minItem.x+'px;width:'+minItem.w+'px;height:'+minItem.h+'px;'"></div>
                        </div>
                        <div class="map-max-for-center-min-right"></div>
                      </div>
                      <div class="map-max-for-right-box"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <div style="display: flex">
            <p style="flex:1;"></p>
            <p
              style="cursor:pointer;border-radius:6px;width:70px;line-height:30px;font-size:12px;text-align:center;margin-right:17px;color:#999999;background:#E0E0E0;"
              @click="roomCancel">取消</p>
            <p
              style="cursor:pointer;border-radius:6px;width:70px;line-height:30px;font-size:12px;text-align:center;color:#fff;background:#0045AF;"
              @click="roomSubmitForm">确定</p>
            <p style="flex:1;"></p>
          </div>
        </div>
      </el-dialog>
    </div>
    <building-details :propsData="propsData" v-if="pageType == 2"></building-details>
  </div>
</template>

<script>
  import {
    getTreeList, getTreeSonList, addBuildFloor, putBuildFloor, delBuildFloor, editSortNum, buildFloorLayoutList,
    getBuildFloorLayout, putBuildFloorLayout, subjectList
  } from '@/api/evacuation3_2/index'
  import buildingManagement from './buildingManagement.vue'
  import buildingDetails from './buildingDetails.vue'

  export default {
    name: 'newIndex',
    components: {
      buildingManagement,
      buildingDetails
    },
    data() {
      return {
        pageType: 1,
        //拖拽起始Y点(用于计算朝向)
        clientY: null,
        clientId: null,
        //学校/楼栋/楼层
        treeList: [],
        //选中状态
        checkTreeId: null,
        checkTreeType: 1,
        buildingList: [],
        //楼层展开/关闭状态
        floorZkType: null, //1.全部展开 2.全部关闭 3.有关有开
        //编辑弹窗开关
        dialogOpen: false,
        dialogType: null,
        dialogTitle: '',
        // 表单参数
        dialogForm: {},
        roomDialogForm: {},
        //院校名称
        yxName: null,
        ldName: null,
        lcName: null,
        parentId: null,
        // 表单校验
        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' }
          ],
          sortNo: [
            { required: true, message: '请输入排序序号', trigger: 'blur' },
            { required: true, message: '请输入排序序号', validator: this.spaceJudgment, trigger: 'blur' }
          ]
        },
        // 显示搜索条件
        showSearch: true,
        loading: false,
        //楼层查询数据
        queryParams: {},
        //楼层表单数据
        dataList: [],
        total: 10,
        //房间配置相关
        dialogOpenRoom: false,
        //房间类型列表
        roomTypeOptions: [],
        //实验室选择列表
        subjectOptions: [],
        //传参数据
        propsData: {},
        //缩放比例
        zoomData: null,
        minZoomData: null,
        dialogBuildingData:[]
      }
    },
    created() {

    },
    mounted() {
      this.getTreeList()
      this.getDicts('layout_room_type').then(response => {
        this.roomTypeOptions = response.data
        this.roomTypeOptions.push({ dictLabel: '其他', dictValue: '-99' })
      })
    },
    methods: {
      //新增学校/楼栋/楼层数据
      addBuildFloor(type) {
        this.$refs['dialogForm'].validate(valid => {
          if (valid) {
            //1.学校 2.楼栋 3.楼层
            let obj = {
              name: type == 1 ? this.dialogForm.nameOne : (type == 2 ? this.dialogForm.nameTwo : (type == 3 ? this.dialogForm.nameThree : '')),
              type: type,
              sortNo: this.dialogForm.sortNo,
              parentId: type == 1 ? 0 : this.checkTreeId
            }
            addBuildFloor(obj).then(response => {
              this.msgSuccess(response.msg)
              this.cancel()
              this.getTreeList()
            })
          }
        })
      },
      //编辑学校/楼栋/楼层数据
      putBuildFloor(type) {
        this.$refs['dialogForm'].validate(valid => {
          if (valid) {
            //1.学校 2.楼栋 3.楼层
            let obj = {
              id: this.dialogForm.id,
              name: type == 1 ? this.dialogForm.nameOne : (type == 2 ? this.dialogForm.nameTwo : (type == 3 ? this.dialogForm.nameThree : '')),
              type: type,
              sortNo: this.dialogForm.sortNo
            }
            putBuildFloor(obj).then(response => {
              this.msgSuccess(response.msg)
              this.cancel()
              this.getTreeList()
            })
          }
        })
      },
      //删除学校/楼栋/楼层数据
      delBuildFloor(id) {
        delBuildFloor(id).then(response => {
          this.msgSuccess(response.msg)
          this.getTreeList()
        })
      },
      //调整排序
      editSortNum(data) {
        editSortNum(data).then(response => {
          this.msgSuccess(response.msg)
          this.getTreeList()
        })
      },
      roomCancel() {
        this.$set(this, 'dialogOpenRoom', false)
      },
      roomSubmitForm() {
        this.$refs['roomDialogForm'].validate(valid => {
          if (valid) {
            let obj = {
              id: this.roomDialogForm.id,
              roomNum: this.roomDialogForm.roomNum,
              roomType: this.roomDialogForm.roomType
            }
            if (this.roomDialogForm.roomType == '-99') {
              obj.roomName = this.roomDialogForm.roomName
            } else {
              obj.subId = this.roomDialogForm.subId
            }
            putBuildFloorLayout(obj).then(response => {
              this.$set(this, 'dialogOpenRoom', false)
              this.msgSuccess(response.msg)
              let obj = {
                id: this.checkTreeId ,
                type: this.checkTreeType,
                parentId: this.parentId
              }
              this.getTreeSonList(obj)
              this.getList()
            })
          }
        })
      },
      // 取消按钮
      cancel() {
        this.$set(this, 'dialogOpen', false)
        this.$set(this, 'dialogForm', {})
        this.$set(this, 'dialogType', null)
      },
      //确定按钮
      submitForm() {
        if (this.dialogType == 1) {
          //新增
          this.addBuildFloor(1)
        } else if (this.dialogType == 11) {
          //编辑
          this.putBuildFloor(1)
        } else if (this.dialogType == 2) {
          //新增
          this.addBuildFloor(2)
        } else if (this.dialogType == 22) {
          //编辑
          this.putBuildFloor(2)
        } else if (this.dialogType == 3) {
          //新增
          this.addBuildFloor(3)
        } else if (this.dialogType == 33) {
          //编辑
          this.putBuildFloor(3)
        }
      },
      //楼栋弹出下啦列表选中事件
      handleCommand(command, item) {
        let self = this
        if (command == 1) {
          //编辑院校
          this.$set(this, 'dialogTitle', '编辑院校')
          this.$set(this, 'dialogForm', {
            id: item.id,
            nameOne: item.name,
            sortNo: item.sortNo
          })
          this.$set(this, 'dialogType', 11)
          this.$set(this, 'dialogOpen', true)
        } else if (command == 2) {
          //删除院校
          this.$confirm('确定要删除该院校吗?', '警告', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(function() {
            self.delBuildFloor(item.id)
          }).then(() => {
          }).catch(() => {
          })
        } else if (command == 3) {
          //新增院校
          this.$set(this, 'dialogForm', {})
          this.$set(this, 'dialogTitle', '新增院校')
          this.$set(this, 'dialogType', 1)
          this.$set(this, 'dialogOpen', true)
        } else if (command == 4) {
          //新增楼栋
          this.$set(this, 'dialogForm', {
            nameOne: this.yxName
          })
          this.$set(this, 'dialogTitle', '新增楼栋')
          this.$set(this, 'dialogType', 2)
          this.$set(this, 'dialogOpen', true)
        } else if (command == 5) {

          //编辑楼栋
          this.$set(this, 'dialogForm', {
            id: item.id,
            nameOne: this.yxName,
            nameTwo: item.name,
            sortNo: item.sortNo
          })
          this.$set(this, 'dialogTitle', '编辑楼栋')
          this.$set(this, 'dialogType', 22)
          this.$set(this, 'dialogOpen', true)
        } else if (command == 6) {
          //删除楼栋
          this.$confirm('确定要删除该楼栋吗?', '警告', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(function() {
            self.delBuildFloor(item.id)
          }).then(() => {
          }).catch(() => {
          })
        } else if (command == 7) {
          //新增楼层
          this.$set(this, 'dialogForm', {
            nameOne: this.yxName,
            nameTwo: this.ldName
          })
          this.$set(this, 'dialogTitle', '新增楼层')
          this.$set(this, 'dialogType', 3)
          this.$set(this, 'dialogOpen', true)
        } else if (command == 8) {
          //编辑楼层
          this.$set(this, 'dialogForm', {
            id: item.id,
            nameOne: this.yxName,
            nameTwo: this.ldName,
            nameThree: item.name,
            sortNo: item.sortNo
          })
          this.$set(this, 'dialogTitle', '编辑楼层')
          this.$set(this, 'dialogType', 33)
          this.$set(this, 'dialogOpen', true)
        } else if (command == 9) {
          //删除楼层
          this.$confirm('确定要删除该楼层吗?', '警告', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(function() {
            self.delBuildFloor(item.id)
          }).then(() => {
          }).catch(() => {
          })
        }
      },
      //获取学校/楼栋/楼层数据
      getTreeList() {
        getTreeList().then(response => {
          if (response.data[0]) {
            for (let i = 0; i < response.data.length; i++) {
              for (let o = 0; o < response.data[i].buildFloorVoList.length; o++) {
                response.data[i].buildFloorVoList[o].onType = true
              }
            }
            this.$set(this, 'treeList', response.data)
            if (!this.checkTreeId) {
              this.$set(this, 'checkTreeId', response.data[0].id)
              this.$set(this, 'yxName', response.data[0].name)
              this.$set(this, 'parentId', response.data[0].parentId)
            }
            let obj = {
              id: this.checkTreeId ? this.checkTreeId : response.data[0].id,
              type: 1,
              parentId: this.parentId ? this.parentId : 0
            }
            this.getTreeSonList(obj)
          }
        })
      },
      //获取校区/楼栋/楼层详情数据
      getTreeSonList(data) {
        getTreeSonList(data).then(response => {
          if (this.checkTreeType == 1) {
            this.$set(this, 'buildingList', response.rows)
          } else if (this.checkTreeType == 2) {
            for (let i = 0; i < response.rows.length; i++) {
              response.rows[i].onType = false
              if (response.rows[i].layoutData) {
                response.rows[i].mapList = JSON.parse(response.rows[i].layoutData)
                let obj = this.calculateMapMax(response.rows[i].mapList,380,1180)
                response.rows[i].width = obj.maxWidth
                response.rows[i].height = obj.maxHeight
                response.rows[i].zoomData = obj.zoomData
              }
            }
            this.$set(this, 'buildingList', response.rows)
            this.floorZkFor()
          } else if (this.checkTreeType == 3) {
            if (response.rows[0].layoutData) {
              response.rows[0].mapList = JSON.parse(response.rows[0].layoutData)
              let obj = this.calculateMapMax(response.rows[0].mapList,380,1180)
              response.rows[0].width = obj.maxWidth
              response.rows[0].height = obj.maxHeight
              response.rows[0].zoomData = obj.zoomData
            }
            this.$set(this, 'queryParams', {
              searchValue: '',
              roomType: '',
              pageNum: 1,
              pageSize: 10
            })
            this.getList()
            this.$set(this, 'buildingList', response.rows[0])
          }
        })
      },
      //获取楼层实验室数据列表
      getList() {
        this.queryParams.floorId = this.checkTreeId
        buildFloorLayoutList(this.queryParams).then(response => {
          this.dataList = response.rows
          this.total = response.total
        })
      },
      //页面切换
      clickPage(type, item) {
        if (type == 1) {
          this.$set(this, 'pageType', type)
        } else if (type == 2) {
          this.$set(this, 'propsData', item)
          this.$set(this, 'pageType', type)
        }else if(type == 3){
          this.$set(this, 'pageType', 1)
          let obj = {
            id: this.checkTreeId ,
            type: this.checkTreeType,
            parentId: this.parentId
          }
          this.getTreeSonList(obj)
        }
      },
      //懒加载实验室
      userSelectList(e) {
        subjectList({ name: e }).then(response => {
          this.subjectOptions = response.data
          this.subjectOptions.push({ id: this.roomDialogForm.subId, name: this.roomDialogForm.subName })
        })
      },
      selectFocus() {
        console.log('123')
      },
      //房间操作按钮
      roomClick(type, item) {
        //查询房间实验室详情
        getBuildFloorLayout(item.id).then(response => {
          let obj = {
            id: response.data.id,
            buildName: response.data.buildName,
            floorName: response.data.floorName,
            roomNum: response.data.roomNum,
            roomType: response.data.roomType + '',
            pointName: response.data.pointName
          }
          if (response.data.roomType == '-99') {
            obj.roomName = response.data.roomName
          } else {
            obj.subId = response.data.subId
            obj.subName = response.data.subName
          }
          //根据返回实验室名称查询实验室选择列表回填
          this.$set(this, 'roomDialogForm', obj)
          this.$set(this, 'subjectOptions', [{ id: response.data.subId, name: response.data.subName }])
          let newData = JSON.parse(JSON.stringify(this.buildingList));
          for(let i=0;i<newData.mapList.length;i++){
            console.log('response.data.subId',response.data.subId)
            console.log('newData.mapList[i].subId',newData.mapList[i].subId)
            console.log('response.data.roomName',response.data.roomName)
            console.log('newData.mapList[i].roomName',newData.mapList[i].roomName)
            if( response.data.subId == newData.mapList[i].subId || response.data.roomName == newData.mapList[i].roomName){
              newData.mapList[i].checkType = true;
            }else{
              newData.mapList[i].checkType = false;
            }
          }
          let newObj = this.calculateMapMax(newData.mapList,260,550,'min')
          newData.width = newObj.maxWidth
          newData.height = newObj.maxHeight
          newData.zoomData = newObj.zoomData
          this.$set(this,'dialogBuildingData',newData);
          this.dialogOpenRoom = true
        })
      },
      //树状结构选中
      clickCheckTree(item, type) {
        if (item.id != this.checkTreeId) {
          this.$set(this, 'checkTreeId', item.id)
          this.$set(this, 'checkTreeType', type)
          if (type == 1) {
            this.$set(this, 'yxName', item.name)
            this.$set(this, 'buildingList', [])
          } else if (type == 2) {
            this.$set(this, 'ldName', item.name)
            this.$set(this, 'buildingList', [])
          } else if (type == 3) {
            this.$set(this, 'lcName', item.name)
            this.$set(this, 'buildingList', {})
          }
          let obj = {
            id: item.id,
            type: type,
            parentId: item.parentId
          }
          this.$set(this,'parentId',item.parentId);
          this.getTreeSonList(obj)
        }
      },
      //树状结构展开收回
      terrClick(itemOne) {
        itemOne.onType = !itemOne.onType
      },
      //展开/收起开关
      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].onType = false
            } else if (self.floorZkType == 2) {
              list[i].onType = true
            } else if (self.floorZkType == 3) {
              list[i].onType = true
            }
          }
          this.$set(this, 'buildingList', list)
          this.floorZkFor()
        } else if (type == 2) {
          this.$set(this.buildingList[index], 'onType', this.buildingList[index].onType ? 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].onType) {
            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)
        }
        console.log('self.buildingList',self.buildingList)
        console.log('self.buildingList.length',self.buildingList.length)
        console.log('numOne',numOne)
        console.log('numTwo',numTwo)
        console.log('floorZkFor',this.floorZkType)
      },
      //拖拽抓取时触发
      dragstartPlay(event) {
        this.$set(this, 'clientY', event.clientY)
      },
      //拖拽途径触发
      dragoverPrevent(item) {
        this.$set(this, 'clientId', item.id)
      },
      //拖拽释放触发
      dragEnterOver(event, item) {
        let self = this
        let newList = []
        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])
              }
            }
          }
          for (let i = 0; i < list.length; i++) {
            newList.push({ id: list[i].id, sortNo: i })
          }
          // this.$set(this,'buildingList',list);
          this.$set(this, 'clientId', null)
          this.editSortNum(newList)
        }
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.$set(this.queryParams, 'pageNum', 1)
        this.getList()
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.$set(this, 'queryParams', {
          searchValue: '',
          roomType: '',
          pageNum: 1,
          pageSize: 10
        })
        this.handleQuery()
      },
      //计算布局最大尺寸
      calculateMapMax(list, height,width,type) {
        //基础参数
        let maxWidth = 0
        let maxHeight = 0
        let zoomData = 1;
        //参数处理
        for (let i = 0; i < list.length; i++) {
          if ((list[i].x + list[i].w) > maxWidth) {
            maxWidth = list[i].x + list[i].w
          }
          if ((list[i].y + list[i].h) > maxHeight) {
            maxHeight = list[i].y + list[i].h
          }
        }
        //处理等值数据
        if(maxHeight == height){
          maxHeight++
        }
        if(maxWidth == width){
          maxWidth++
        }
        //缩放判断
        if(maxHeight>height&&maxWidth>width){
          if((maxHeight-height)>(maxWidth-width)){
            zoomData = height/maxHeight;
            this.$set(this,'zoomData',height/maxHeight);
            if(type == 'min'){
              this.$set(this,'minZoomData',height/maxHeight);
            }
          }else{
            zoomData = width / maxWidth;
            this.$set(this,'zoomData',width / maxWidth);
            if(type == 'min'){
              this.$set(this,'minZoomData',width / maxWidth);
            }
          }
        }else if(maxHeight<height&&maxWidth<width){
          if((height-maxHeight)>(width-maxWidth)){
            zoomData = width / maxWidth;
            this.$set(this,'zoomData',width / maxWidth);
            if(type == 'min'){
              this.$set(this,'minZoomData',width / maxWidth);
            }
          }else{
            zoomData = height / maxHeight;
            this.$set(this,'zoomData',height / maxHeight);
            if(type == 'min'){
              this.$set(this,'minZoomData',height / maxHeight);
            }
          }
        }else if(maxHeight<height&&maxWidth>width){
          zoomData = width / maxWidth;
          this.$set(this,'zoomData',width / maxWidth);
          if(type == 'min'){
            this.$set(this,'minZoomData',width / maxWidth);
          }
        }else if(maxHeight>height&&maxWidth<width){
          zoomData = height / maxHeight;
          this.$set(this,'zoomData',height / maxHeight);
          if(type == 'min'){
            this.$set(this,'minZoomData',height / maxHeight);
          }
        }
        return { maxWidth: maxWidth, maxHeight: maxHeight,zoomData:zoomData }
      }
    }
  }
</script>

<style scoped lang="scss">
  .building {
    flex: 1;
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
    * {
      margin: 0;
      font-weight: 500;
    }
    .buildingManagement {
      flex: 1;
      display: flex !important;
      overflow: hidden;
      padding: 22px 28px 22px 32px;
      .max-left-box {
        width: 281px;
        border-right: 1px dashed #A2A2A2;
        display: flex;
        flex-direction: column;
        .tree-null-p {
          text-align: center;
          line-height: 100px;
          flex: 1;
          color: #999;
        }
        .tree-box {
          flex: 1;
          .terr-max-box {
            margin-top: 20px;
            .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;
                }
                .name-p {
                  flex: 1;
                }
              }
              .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;
            position: relative;
            .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;
                    }
                  }
                }
              }
            }
            .null-img {
              position: absolute;
              top: 40%;
              left: 50%;
              width: 276px;
              height: 321px;
              margin-top: -160px;
              margin-left: -138px;
            }
          }
        }
        .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;
            position: relative;
            .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;
                    }
                  }
                }
              }
              .layout-data-max-big-box {
                width: 1195px;
                height: 400px;
                margin-left: 36px;
                border-left: 1px solid #e0e0e0;
                border-right: 1px solid #e0e0e0;
                border-bottom: 1px solid #e0e0e0;
                position: relative;
                .layout-data-max-big-min-box {
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  .layout-data-max-min-box {
                    position: relative;
                    border:1px solid #e0e0e0;
                    .map-max-for-box {
                      position: absolute;
                      display: flex;
                      flex-direction: column;
                      .map-max-for-left-box {
                        height: 2px;
                      }
                      .map-max-for-center-box {
                        flex: 1;
                        display: flex;
                        .map-max-for-center-min-left {
                          width: 2px;
                        }
                        .map-max-for-center-min-center {
                          flex: 1;
                          position: relative;
                          .min-text-box{
                            width:100%;
                            text-align: center;
                            color:#333;
                            word-wrap:break-word;
                            word-break:break-all;
                            overflow: hidden;
                            z-index:999;
                            margin:30% 0 0 0;
                            font-size:14px;
                            line-height:20px;
                          }
                          div {
                            position: absolute
                          }
                          .center-move-door-p-t {
                            background: url("../../../../assets/ZDimages/evacuation3_2/icon_sysbjt_m.png") !important;
                            background-size: 100% !important;
                            transform: rotate(180deg);
                          }
                          .center-move-door-p-b {
                            background: url("../../../../assets/ZDimages/evacuation3_2/icon_sysbjt_m.png") !important;
                            background-size: 100% !important;
                          }
                          .center-move-door-p-l {
                            background: url("../../../../assets/ZDimages/evacuation3_2/icon_sysbjt_m.png") !important;
                            background-size: 100% !important;
                            transform: rotate(90deg);
                          }
                          .center-move-door-p-r {
                            background: url("../../../../assets/ZDimages/evacuation3_2/icon_sysbjt_m.png") !important;
                            background-size: 100% !important;
                            transform: rotateZ(270deg);
                          }
                          .center-move-door-p-t-ss {
                            background: url("../../../../assets/ZDimages/evacuation3_2/icon_aqtd_m.png") !important;
                            background-size: 100% !important;
                            transform: rotate(180deg);
                          }
                          .center-move-door-p-b-ss {
                            background: url("../../../../assets/ZDimages/evacuation3_2/icon_aqtd_m.png") !important;
                            background-size: 100% !important;
                          }
                          .center-move-door-p-l-ss {
                            background: url("../../../../assets/ZDimages/evacuation3_2/icon_aqtd_m.png") !important;
                            background-size: 100% !important;
                            transform: rotate(90deg);
                          }
                          .center-move-door-p-r-ss {
                            background: url("../../../../assets/ZDimages/evacuation3_2/icon_aqtd_m.png") !important;
                            background-size: 100% !important;
                            transform: rotateZ(270deg);
                          }
                          .lightTop {
                            background: url("../../../../assets/ZDimages/evacuation3_2/icon_sjt.png");
                            background-size: 100%;
                          }
                          .lightBottom {
                            background: url("../../../../assets/ZDimages/evacuation3_2/icon_xjt.png");
                            background-size: 100%;
                          }
                          .lightLeft {
                            background: url("../../../../assets/ZDimages/evacuation3_2/icon_zuo.png");
                            background-size: 100%;
                          }
                          .lightRight {
                            background: url("../../../../assets/ZDimages/evacuation3_2/icon_yuo.png");
                            background-size: 100%;
                          }
                        }
                        .map-max-for-center-min-right {
                          width: 2px;
                        }
                      }
                      .map-max-for-right-box {
                        height: 2px;
                      }
                      .map-max-for-min-box {
                        position: relative;
                        div {
                          position: absolute
                        }
                      }
                    }
                    .for-map-box {
                      background: #CEF2FD;
                    }
                    .for-map-box-one {
                      background: #CEFDD5;
                    }
                    .for-map-box-two {
                      background: url("../../../../assets/ZDimages/evacuation3_2/icon_yjtd.png") center center no-repeat #39AE36;
                      background-size: 60px 60px;
                    }
                  }
                }
              }
              .layout-data-max-big-null-box {
                height: 400px;
                margin-left: 36px;
                border-left: 1px solid #e0e0e0;
                border-right: 1px solid #e0e0e0;
                border-bottom: 1px solid #e0e0e0;
                position: relative;
                overflow: hidden;
                img {
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  margin-left: -71px;
                  margin-top: -71px;
                  width: 142px;
                  height: 142px;
                }
                div {
                  margin-top: 300px;
                  height: 30px;
                  display: flex;
                  p:nth-child(1) {
                    flex: 1;
                  }
                  p:nth-child(2) {
                    margin-right: 20px;
                    color: #333;
                    font-size: 14px;
                  }
                  p:nth-child(3) {
                    color: #0183FA;
                    font-size: 14px;
                    cursor: pointer;
                  }
                  p:nth-child(4) {
                    flex: 1;
                  }
                }
              }
            }
            .null-img {
              position: absolute;
              top: 40%;
              left: 50%;
              width: 276px;
              height: 321px;
              margin-top: -160px;
              margin-left: -138px;
            }
          }
        }
        .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;
            .layout-data-max-big-box {
              width: 1195px;
              height: 400px;
              position: relative;
              .layout-data-max-big-min-box {
                position: absolute;
                top: 50%;
                left: 50%;
                .layout-data-max-min-box {
                  position: relative;
                  border:1px solid #e0e0e0;
                  .map-max-for-box {
                    position: absolute;
                    display: flex;
                    flex-direction: column;
                    .map-max-for-left-box {
                      height: 2px;
                    }
                    .map-max-for-center-box {
                      flex: 1;
                      display: flex;
                      .map-max-for-center-min-left {
                        width: 2px;
                      }
                      .map-max-for-center-min-center {
                        flex: 1;
                        position: relative;
                        .min-text-box{
                          width:100%;
                          text-align: center;
                          color:#333;
                          word-wrap:break-word;
                          word-break:break-all;
                          overflow: hidden;
                          z-index:999;
                          margin:30% 0 0 0;
                          font-size:14px;
                          line-height:20px;
                        }
                        div {
                          position: absolute
                        }
                        .center-move-door-p-t {
                          background: url("../../../../assets/ZDimages/evacuation3_2/icon_sysbjt_m.png") !important;
                          background-size: 100% !important;
                          transform: rotate(180deg);
                        }
                        .center-move-door-p-b {
                          background: url("../../../../assets/ZDimages/evacuation3_2/icon_sysbjt_m.png") !important;
                          background-size: 100% !important;
                        }
                        .center-move-door-p-l {
                          background: url("../../../../assets/ZDimages/evacuation3_2/icon_sysbjt_m.png") !important;
                          background-size: 100% !important;
                          transform: rotate(90deg);
                        }
                        .center-move-door-p-r {
                          background: url("../../../../assets/ZDimages/evacuation3_2/icon_sysbjt_m.png") !important;
                          background-size: 100% !important;
                          transform: rotateZ(270deg);
                        }
                        .center-move-door-p-t-ss {
                          background: url("../../../../assets/ZDimages/evacuation3_2/icon_aqtd_m.png") !important;
                          background-size: 100% !important;
                          transform: rotate(180deg);
                        }
                        .center-move-door-p-b-ss {
                          background: url("../../../../assets/ZDimages/evacuation3_2/icon_aqtd_m.png") !important;
                          background-size: 100% !important;
                        }
                        .center-move-door-p-l-ss {
                          background: url("../../../../assets/ZDimages/evacuation3_2/icon_aqtd_m.png") !important;
                          background-size: 100% !important;
                          transform: rotate(90deg);
                        }
                        .center-move-door-p-r-ss {
                          background: url("../../../../assets/ZDimages/evacuation3_2/icon_aqtd_m.png") !important;
                          background-size: 100% !important;
                          transform: rotateZ(270deg);
                        }
                        .lightTop {
                          background: url("../../../../assets/ZDimages/evacuation3_2/icon_sjt.png");
                          background-size: 100%;
                        }
                        .lightBottom {
                          background: url("../../../../assets/ZDimages/evacuation3_2/icon_xjt.png");
                          background-size: 100%;
                        }
                        .lightLeft {
                          background: url("../../../../assets/ZDimages/evacuation3_2/icon_zuo.png");
                          background-size: 100%;
                        }
                        .lightRight {
                          background: url("../../../../assets/ZDimages/evacuation3_2/icon_yuo.png");
                          background-size: 100%;
                        }
                      }
                      .map-max-for-center-min-right {
                        width: 2px;
                      }
                    }
                    .map-max-for-right-box {
                      height: 2px;
                    }
                    .map-max-for-min-box {
                      position: relative;
                      div {
                        position: absolute
                      }
                    }
                  }
                  .for-map-box {
                    background: #CEF2FD;
                  }
                  .for-map-box-one {
                    background: #CEFDD5;
                  }
                  .for-map-box-two {
                    background: url("../../../../assets/ZDimages/evacuation3_2/icon_yjtd.png") center center no-repeat #39AE36;
                    background-size: 60px 60px;
                  }
                }
              }
            }
            .layout-data-max-big-null-box {
              height: 400px;
              position: relative;
              overflow: hidden;
              img {
                position: absolute;
                top: 50%;
                left: 50%;
                margin-left: -71px;
                margin-top: -71px;
                width: 142px;
                height: 142px;
              }
              div {
                margin-top: 300px;
                height: 30px;
                display: flex;
                p:nth-child(1) {
                  flex: 1;
                }
                p:nth-child(2) {
                  margin-right: 20px;
                  color: #333;
                  font-size: 14px;
                }
                p:nth-child(3) {
                  color: #0183FA;
                  font-size: 14px;
                  cursor: pointer;
                }
                p:nth-child(4) {
                  flex: 1;
                }
              }
            }
            .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>
<style lang="scss">
  .dialog-sort-no-form-item-box input {
    text-align: left !important;
  }
  .building-dialog-box{
    .map-max-big-box {
      width: 575px;
      height: 286px;
      position: relative;
      border: 1px solid #E0E0E0;
      overflow: hidden;
      .layout-data-max-big-box {
        width: 575px;
        height: 286px;
        position: relative;
        .layout-data-max-big-min-box {
          position: absolute;
          top: 50%;
          left: 50%;
          .layout-data-max-min-box {
            position: relative;
            .map-max-for-box {
              position: absolute;
              display: flex;
              flex-direction: column;
              .map-max-for-left-box {
                height: 2px;
              }
              .map-max-for-center-box {
                flex: 1;
                display: flex;
                .map-max-for-center-min-left {
                  width: 2px;
                }
                .map-max-for-center-min-center {
                  flex: 1;
                  position: relative;
                  .min-text-box{
                    width:100%;
                    text-align: center;
                    color:#333;
                    word-wrap:break-word;
                    word-break:break-all;
                    overflow: hidden;
                    z-index:999;
                    margin:30% 0 0 0;
                    font-size:14px;
                    line-height:20px;
                  }
                  div {
                    position: absolute
                  }
                  .center-move-door-p-t {
                    background: url("../../../../assets/ZDimages/evacuation3_2/icon_sysbjt_m.png") !important;
                    background-size: 100% !important;
                    transform: rotate(180deg);
                  }
                  .center-move-door-p-b {
                    background: url("../../../../assets/ZDimages/evacuation3_2/icon_sysbjt_m.png") !important;
                    background-size: 100% !important;
                  }
                  .center-move-door-p-l {
                    background: url("../../../../assets/ZDimages/evacuation3_2/icon_sysbjt_m.png") !important;
                    background-size: 100% !important;
                    transform: rotate(90deg);
                  }
                  .center-move-door-p-r {
                    background: url("../../../../assets/ZDimages/evacuation3_2/icon_sysbjt_m.png") !important;
                    background-size: 100% !important;
                    transform: rotateZ(270deg);
                  }
                  .center-move-door-p-t-ss {
                    background: url("../../../../assets/ZDimages/evacuation3_2/icon_aqtd_m.png") !important;
                    background-size: 100% !important;
                    transform: rotate(180deg);
                  }
                  .center-move-door-p-b-ss {
                    background: url("../../../../assets/ZDimages/evacuation3_2/icon_aqtd_m.png") !important;
                    background-size: 100% !important;
                  }
                  .center-move-door-p-l-ss {
                    background: url("../../../../assets/ZDimages/evacuation3_2/icon_aqtd_m.png") !important;
                    background-size: 100% !important;
                    transform: rotate(90deg);
                  }
                  .center-move-door-p-r-ss {
                    background: url("../../../../assets/ZDimages/evacuation3_2/icon_aqtd_m.png") !important;
                    background-size: 100% !important;
                    transform: rotateZ(270deg);
                  }
                  .lightTop {
                    background: url("../../../../assets/ZDimages/evacuation3_2/icon_sjt.png");
                    background-size: 100%;
                  }
                  .lightBottom {
                    background: url("../../../../assets/ZDimages/evacuation3_2/icon_xjt.png");
                    background-size: 100%;
                  }
                  .lightLeft {
                    background: url("../../../../assets/ZDimages/evacuation3_2/icon_zuo.png");
                    background-size: 100%;
                  }
                  .lightRight {
                    background: url("../../../../assets/ZDimages/evacuation3_2/icon_yuo.png");
                    background-size: 100%;
                  }
                }
                .map-max-for-center-min-right {
                  width: 2px;
                }
              }
              .map-max-for-right-box {
                height: 2px;
              }
              .map-max-for-min-box {
                position: relative;
                div {
                  position: absolute
                }
              }
            }
            .for-map-box {
              background: #CEF2FD;
            }
            .for-map-box-one {
              background: #CEFDD5;
            }
            .for-map-box-two {
              background: url("../../../../assets/ZDimages/evacuation3_2/icon_yjtd.png") center center no-repeat #39AE36;
              background-size: 60px 60px;
            }
            .for-map-box-three {
              background: #FFBBBB!important;
            }
          }
        }
      }
      .layout-data-max-big-null-box {
        height: 400px;
        position: relative;
        overflow: hidden;
        img {
          position: absolute;
          top: 50%;
          left: 50%;
          margin-left: -71px;
          margin-top: -71px;
          width: 142px;
          height: 142px;
        }
        div {
          margin-top: 300px;
          height: 30px;
          display: flex;
          p:nth-child(1) {
            flex: 1;
          }
          p:nth-child(2) {
            margin-right: 20px;
            color: #333;
            font-size: 14px;
          }
          p:nth-child(3) {
            color: #0183FA;
            font-size: 14px;
            cursor: pointer;
          }
          p:nth-child(4) {
            flex: 1;
          }
        }
      }
      .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;
      }
    }
  }
</style>