v3-lab-web/src/views/integratedManagement/laboratoryManagement/layoutManagement/index.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>
            </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/integratedManagement/icon_bjgl_jt.png" @click="terrClick(itemOne)">
                <img v-if="itemOne.onType&&itemOne.buildFloorVoList[0]"
                     src="@/assets/ZDimages/integratedManagement/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,itemOne)">{{itemTwo.name}}</p>
              </div>
            </div>
          </div>
        </div>
        <p class="tree-null-p" v-if="!treeList[0]">暂无数据</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>
          </div>
          <div class="right-big-list-box scrollbar-box">
            <div class="for-max-box" v-for="(item,index) in buildingList" :key="index">
              <div class="for-big-box">
                <div class="for-big-box-left">
                  <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>{{item.floorNum}}</p>
                    <p>楼层数</p>
                  </div>
                  <img src="@/assets/ZDimages/integratedManagement/icon_bjgl_fj.png" class="for-img-three">
                  <div class="for-text-box-two">
                    <p>{{item.roomNum}}</p>
                    <p>房间数</p>
                  </div>
                </div>
              </div>
            </div>
            <img class="null-img" v-if="!buildingList[0]" src="@/assets/ZDimages/basicsModules/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" @click="floorZK(1)" v-if="buildingList[0]">{{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">
              <div class="for-big-box">
                <div class="for-big-box-left">
                  <p class="for-text-one">{{item.name}}</p>
                </div>
                <img src="@/assets/ZDimages/integratedManagement/icon_bjgl_fj.png" class="for-img-three">
                <div class="for-text-box-two" style="margin-right:40px;">
                  <p>{{item.roomNum}}</p>
                  <p>房间数</p>
                </div>
                <div class="for-button-min-box">
                  <div @click="floorZK(2,index)">
                    <img src="@/assets/ZDimages/integratedManagement/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"
                                 :style="'line-height:'+(bigItem.h-4)+'px;height:'+(bigItem.h-4)+'px;'"
                                 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/integratedManagement/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/basicsModules/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"
                             :style="'line-height:'+(item.h-4)+'px;height:'+(item.h-4)+'px;'"
                             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/integratedManagement/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-list-box">
            <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
              <el-form-item label="关键字" prop="searchValue" style="margin:10px 20px 10px 0;">
                <el-input
                  v-model="queryParams.searchValue"
                  placeholder="房间号/房间名称"
                  clearable
                  size="small"
                />
              </el-form-item>
              <el-form-item label="房间类型" prop="roomType" style="margin:10px 20px 0 0;">
                <el-select v-model="queryParams.roomType" placeholder="请选择房间类型">
                  <el-option
                    v-for="dict in roomTypeOptions"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item style="margin:10px 0 0 0;">
                <p class="page-inquire-common-style-button" @click="handleQuery" style="margin-right:20px;">查询</p>
                <p class="page-reset-common-style-button" @click="resetQuery">重置</p>
              </el-form-item>
            </el-form>
            <el-table class="table-box" border :data="dataList">
              <el-table-column label="房间号" align="left" prop="roomNum" width="200" show-overflow-tooltip/>
              <el-table-column label="房间名称" align="left" prop="roomName" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{scope.row.roomName}}</span>
                  <!--<span>{{scope.row.roomType}}</span>-->
                </template>
              </el-table-column>
              <el-table-column label="房间类型" align="left" prop="roomType" width="100" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span v-for="(item,index) in roomTypeOptions" :key="index" v-if="item.value == scope.row.roomType">{{item.label}}</span>
                </template>
              </el-table-column>
              <el-table-column label="绑定实验室" align="left" prop="roomType" width="200" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{scope.row.binding?scope.row.subName:'未绑定'}}</span>
                </template>
              </el-table-column>
              <el-table-column label="创建人" align="left" prop="createName" width="200" show-overflow-tooltip/>
              <el-table-column label="创建时间" align="left" prop="createTime" width="200" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.createTime,"{y}-{m}-{d} {h}:{i}") }}</span>
                </template>
              </el-table-column>
            </el-table>
            <pagination
              style="padding-top:10px!important;"
              v-show="total>0"
              :total="total"
              :page.sync="queryParams.page"
              :limit.sync="queryParams.pageSize"
              @pagination="laboratoryBuildLayoutList"
            />
          </div>
        </div>
      </div>
      <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"
                               :style="'line-height:'+(item.h-4)+'px;height:'+(item.h-4)+'px;'"
                               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 dialog-footer-box">
          <p class="dialog-footer-button-null"></p>
          <p class="dialog-footer-button-info" @click="roomCancel">取消</p>
          <p class="dialog-footer-button-primary" @click="roomSubmitForm">提交</p>
          <p class="dialog-footer-button-null"></p>
        </div>
      </el-dialog>
    </div>
    <building-details :propsData="propsData" v-if="pageType == 2"></building-details>
  </div>
</template>

<script>
  import { getBuildFloorLayout, putBuildFloorLayout, subjectList
  } from '@/apiDemo/evacuation3_2/index'
  import buildingManagement from './buildingManagement.vue'
  import buildingDetails from './buildingDetails.vue'
  //v3
  import { getDicts,} from "@/api/commonality/noPermission";
  import { systemBuildingGetTreeList,} from "@/api/commonality/permission";
  import { laboratoryBuildLayoutGetTreeSonList,laboratoryBuildLayoutList } from "@/api/integratedManagement/index";
  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: {
          floorId:'',
          page:1,
          pageSize:10,
          roomType:"",
          searchValue:"",
        },
        //楼层表单数据
        dataList: [],
        total: 10,
        //房间配置相关
        dialogOpenRoom: false,
        //房间类型列表
        roomTypeOptions: [],
        //实验室选择列表
        subjectOptions: [],
        //传参数据
        propsData: {},
        //缩放比例
        zoomData: null,
        minZoomData: null,
        dialogBuildingData:[],
      }
    },
    created() {

    },
    mounted() {
      this.systemBuildingGetTreeList()
      this.getDicts('layout_room_type').then(response => {
        this.roomTypeOptions = response.data
        this.roomTypeOptions.push({ label: '其他', value: '-99' })
      })
    },
    methods: {
      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.laboratoryBuildLayoutGetTreeSonList(obj)
            })
          }
        })
      },
      // 取消按钮
      cancel() {
        this.$set(this, 'dialogOpen', false)
        this.$set(this, 'dialogForm', {})
        this.$set(this, 'dialogType', null)
      },
      //获取学校/楼栋/楼层数据
      systemBuildingGetTreeList() {
        systemBuildingGetTreeList({}).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 ,
              type: this.checkTreeType,
              parentId: this.parentId
            }
            this.laboratoryBuildLayoutGetTreeSonList(obj)
          }
        })
      },
      //获取校区/楼栋/楼层详情数据
      laboratoryBuildLayoutGetTreeSonList(data) {
        laboratoryBuildLayoutGetTreeSonList(data).then(response => {
          if (this.checkTreeType == 1) {
            this.$set(this, 'buildingList', response.data.labBuildList)
          } else if (this.checkTreeType == 2) {
            for (let i = 0; i < response.data.labBuildList.length; i++) {
              response.data.labBuildList[i].onType = false
              if (response.data.labBuildList[i].layoutData) {
                response.data.labBuildList[i].mapList = JSON.parse(response.data.labBuildList[i].layoutData)
                let obj = this.calculateMapMax(response.data.labBuildList[i].mapList,380,1180)
                response.data.labBuildList[i].width = obj.maxWidth
                response.data.labBuildList[i].height = obj.maxHeight
                response.data.labBuildList[i].zoomData = obj.zoomData
              }
            }
            this.$set(this, 'buildingList', response.data.labBuildList)
            this.floorZkFor()
          } else if (this.checkTreeType == 3) {
            if (response.data.labBuildList[0].layoutData) {
              response.data.labBuildList[0].mapList = JSON.parse(response.data.labBuildList[0].layoutData)
              let obj = this.calculateMapMax(response.data.labBuildList[0].mapList,380,1180)
              response.data.labBuildList[0].width = obj.maxWidth
              response.data.labBuildList[0].height = obj.maxHeight
              response.data.labBuildList[0].zoomData = obj.zoomData
            }
            this.$set(this, 'buildingList', response.data.labBuildList[0])
          }
        })
      },
      //获取楼层房间数据
      laboratoryBuildLayoutList(){
        laboratoryBuildLayoutList(this.queryParams).then(response => {
          this.$set(this,'dataList',response.data.records);
          this.$set(this,'total',response.data.total);
        })
      },
      //页面切换
      clickPage(type, item) {
        if (type == 1) {
          this.$set(this, 'pageType', type)
        } else if (type == 2) {
          this.$set(this, 'propsData', item)
          if(item.name){
            this.$set(this.propsData, 'buildId', item.parentId)
            this.$set(this.propsData, 'floorId', item.id)
            this.$set(this.propsData, 'buildName', item.buildName)
            this.$set(this.propsData, 'floorName', item.name)
          }else if(item.floorName){
            this.$set(this.propsData, 'buildId', item.buildId)
            this.$set(this.propsData, 'floorId', item.floorId)
            this.$set(this.propsData, 'buildName', item.buildName)
            this.$set(this.propsData, 'floorName', item.floorName)
          }
          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.laboratoryBuildLayoutGetTreeSonList(obj)
        }
      },
      //懒加载实验室
      userSelectList(e) {
        subjectList({ name: e }).then(response => {
          this.subjectOptions = response.data
          this.subjectOptions.push({ id: this.roomDialogForm.subId, name: this.roomDialogForm.subName })
        })
      },
      selectFocus() {
      },
      //树状结构选中
      clickCheckTree(item, type, itemOne) {
        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, 'buildingList', {})
            this.$set(this,'queryParams', {
              floorId:item.id,
              page:1,
              pageSize:10,
              roomType:"",
              searchValue:"",
            })
            this.laboratoryBuildLayoutList();
          }
          let obj = {
            id: item.id,
            type: type,
            parentId: item.parentId
          }
          this.$set(this,'parentId',item.parentId);
          this.laboratoryBuildLayoutGetTreeSonList(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)
        }
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.$set(this.queryParams, 'page', 1)
        this.laboratoryBuildLayoutList()
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.$set(this.queryParams, 'page', 1)
        this.$set(this.queryParams, 'roomType', "")
        this.$set(this.queryParams, 'searchValue', "")
        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++
        }
        //缩放判断
        let zoomNumOne = height / maxHeight;
        if(parseInt(this.accMul(zoomNumOne,maxHeight)) <= height && parseInt(this.accMul(zoomNumOne,maxWidth)) <= width){
          zoomData = zoomNumOne;
          this.$set(this,'zoomData',zoomNumOne);
          this.$set(this,'minZoomData',zoomNumOne);
        }
        let zoomNumTwo = width / maxWidth;
        if(parseInt(this.accMul(zoomNumTwo,maxHeight)) <= height && parseInt(this.accMul(zoomNumTwo,maxWidth)) <= width){
          zoomData = zoomNumTwo;
          this.$set(this,'zoomData',zoomNumTwo);
          this.$set(this,'minZoomData',zoomNumTwo);
        }
        return { maxWidth: maxWidth, maxHeight: maxHeight,zoomData:zoomData }
      },
      accMul(arg1,arg2){
        var m=0,s1=arg1.toString(),s2=arg2.toString();
        try{m+=s1.split(".")[1].length}catch(e){}
        try{m+=s2.split(".")[1].length}catch(e){}
        return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m)
      },
    }
  }
</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-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: 130px;
                  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;
                            font-size:14px;
                            line-height:20px;
                          }
                          div {
                            position: absolute
                          }
                          .center-move-door-p-t {
                            background: url("../../../../assets/ZDimages/integratedManagement/icon_sysbjt_m.png") !important;
                            background-size: 100% !important;
                            transform: rotate(180deg);
                          }
                          .center-move-door-p-b {
                            background: url("../../../../assets/ZDimages/integratedManagement/icon_sysbjt_m.png") !important;
                            background-size: 100% !important;
                          }
                          .center-move-door-p-l {
                            background: url("../../../../assets/ZDimages/integratedManagement/icon_sysbjt_m.png") !important;
                            background-size: 100% !important;
                            transform: rotate(90deg);
                          }
                          .center-move-door-p-r {
                            background: url("../../../../assets/ZDimages/integratedManagement/icon_sysbjt_m.png") !important;
                            background-size: 100% !important;
                            transform: rotateZ(270deg);
                          }
                          .center-move-door-p-t-ss {
                            background: url("../../../../assets/ZDimages/integratedManagement/icon_aqtd_m.png") !important;
                            background-size: 100% !important;
                            transform: rotate(180deg);
                          }
                          .center-move-door-p-b-ss {
                            background: url("../../../../assets/ZDimages/integratedManagement/icon_aqtd_m.png") !important;
                            background-size: 100% !important;
                          }
                          .center-move-door-p-l-ss {
                            background: url("../../../../assets/ZDimages/integratedManagement/icon_aqtd_m.png") !important;
                            background-size: 100% !important;
                            transform: rotate(90deg);
                          }
                          .center-move-door-p-r-ss {
                            background: url("../../../../assets/ZDimages/integratedManagement/icon_aqtd_m.png") !important;
                            background-size: 100% !important;
                            transform: rotateZ(270deg);
                          }
                          .lightTop {
                            background: url("../../../../assets/ZDimages/integratedManagement/icon_sjt.png");
                            background-size: 100%;
                          }
                          .lightBottom {
                            background: url("../../../../assets/ZDimages/integratedManagement/icon_xjt.png");
                            background-size: 100%;
                          }
                          .lightLeft {
                            background: url("../../../../assets/ZDimages/integratedManagement/icon_zuo.png");
                            background-size: 100%;
                          }
                          .lightRight {
                            background: url("../../../../assets/ZDimages/integratedManagement/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/integratedManagement/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;
                          font-size:14px;
                          line-height:20px;
                        }
                        div {
                          position: absolute
                        }
                        .center-move-door-p-t {
                          background: url("../../../../assets/ZDimages/integratedManagement/icon_sysbjt_m.png") !important;
                          background-size: 100% !important;
                          transform: rotate(180deg);
                        }
                        .center-move-door-p-b {
                          background: url("../../../../assets/ZDimages/integratedManagement/icon_sysbjt_m.png") !important;
                          background-size: 100% !important;
                        }
                        .center-move-door-p-l {
                          background: url("../../../../assets/ZDimages/integratedManagement/icon_sysbjt_m.png") !important;
                          background-size: 100% !important;
                          transform: rotate(90deg);
                        }
                        .center-move-door-p-r {
                          background: url("../../../../assets/ZDimages/integratedManagement/icon_sysbjt_m.png") !important;
                          background-size: 100% !important;
                          transform: rotateZ(270deg);
                        }
                        .center-move-door-p-t-ss {
                          background: url("../../../../assets/ZDimages/integratedManagement/icon_aqtd_m.png") !important;
                          background-size: 100% !important;
                          transform: rotate(180deg);
                        }
                        .center-move-door-p-b-ss {
                          background: url("../../../../assets/ZDimages/integratedManagement/icon_aqtd_m.png") !important;
                          background-size: 100% !important;
                        }
                        .center-move-door-p-l-ss {
                          background: url("../../../../assets/ZDimages/integratedManagement/icon_aqtd_m.png") !important;
                          background-size: 100% !important;
                          transform: rotate(90deg);
                        }
                        .center-move-door-p-r-ss {
                          background: url("../../../../assets/ZDimages/integratedManagement/icon_aqtd_m.png") !important;
                          background-size: 100% !important;
                          transform: rotateZ(270deg);
                        }
                        .lightTop {
                          background: url("../../../../assets/ZDimages/integratedManagement/icon_sjt.png");
                          background-size: 100%;
                        }
                        .lightBottom {
                          background: url("../../../../assets/ZDimages/integratedManagement/icon_xjt.png");
                          background-size: 100%;
                        }
                        .lightLeft {
                          background: url("../../../../assets/ZDimages/integratedManagement/icon_zuo.png");
                          background-size: 100%;
                        }
                        .lightRight {
                          background: url("../../../../assets/ZDimages/integratedManagement/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/integratedManagement/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-list-box {
            padding-bottom:10px;
            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;
                    font-size:14px;
                    line-height:20px;
                  }
                  div {
                    position: absolute
                  }
                  .center-move-door-p-t {
                    background: url("../../../../assets/ZDimages/integratedManagement/icon_sysbjt_m.png") !important;
                    background-size: 100% !important;
                    transform: rotate(180deg);
                  }
                  .center-move-door-p-b {
                    background: url("../../../../assets/ZDimages/integratedManagement/icon_sysbjt_m.png") !important;
                    background-size: 100% !important;
                  }
                  .center-move-door-p-l {
                    background: url("../../../../assets/ZDimages/integratedManagement/icon_sysbjt_m.png") !important;
                    background-size: 100% !important;
                    transform: rotate(90deg);
                  }
                  .center-move-door-p-r {
                    background: url("../../../../assets/ZDimages/integratedManagement/icon_sysbjt_m.png") !important;
                    background-size: 100% !important;
                    transform: rotateZ(270deg);
                  }
                  .center-move-door-p-t-ss {
                    background: url("../../../../assets/ZDimages/integratedManagement/icon_aqtd_m.png") !important;
                    background-size: 100% !important;
                    transform: rotate(180deg);
                  }
                  .center-move-door-p-b-ss {
                    background: url("../../../../assets/ZDimages/integratedManagement/icon_aqtd_m.png") !important;
                    background-size: 100% !important;
                  }
                  .center-move-door-p-l-ss {
                    background: url("../../../../assets/ZDimages/integratedManagement/icon_aqtd_m.png") !important;
                    background-size: 100% !important;
                    transform: rotate(90deg);
                  }
                  .center-move-door-p-r-ss {
                    background: url("../../../../assets/ZDimages/integratedManagement/icon_aqtd_m.png") !important;
                    background-size: 100% !important;
                    transform: rotateZ(270deg);
                  }
                  .lightTop {
                    background: url("../../../../assets/ZDimages/integratedManagement/icon_sjt.png");
                    background-size: 100%;
                  }
                  .lightBottom {
                    background: url("../../../../assets/ZDimages/integratedManagement/icon_xjt.png");
                    background-size: 100%;
                  }
                  .lightLeft {
                    background: url("../../../../assets/ZDimages/integratedManagement/icon_zuo.png");
                    background-size: 100%;
                  }
                  .lightRight {
                    background: url("../../../../assets/ZDimages/integratedManagement/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/integratedManagement/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>