zc

src/views/comprehensive/laboratoryManagement/building/buildingDetails.vue

@@ -1,15 +1,168 @@
 <template>
   <div class="buildingDetails">
+    <div class="buildingDetails-page">
+      <div class="max-left-box">
+        <div class="max-left-button-box">
+          <p class="null-p"></p>
+          <el-upload
+            class="up-img-p"
+            :action="uploadImgUrl"
+            :show-file-list="false"
+            accept="image/png"
+            :on-success="(res, file)=>handleAvatarSuccess(res, file,1)"
+            :headers="headers"
+            :before-upload="beforeAvatarUpload">
+            <p style="margin:0;">更换图纸</p>
+          </el-upload>
+          <div class="opacity-button-box">
+            <p @click="opacityClick(1)">-</p>
+            <p>透明度：{{mapOpacityText}}%</p>
+            <p @click="opacityClick(2)">+</p>
+          </div>
+        </div>
+        <div class="max-left-map-big-box scrollbar-box">
+          <div class="left-map-box" ref="maxBox" :style="'width:'+layerWidth+'px;height:'+layerHeight+'px;'">
 
+          </div>
+          <img class="left-map-img" :src="mapSrc" :style="'opacity:'+mapOpacity+';width:'+layerWidth+'px;height:'+layerHeight+'px;'">
+        </div>
+      </div>
+      <div class="max-right-box">
+        <div class="right-title-box">
+          <p class="right-title-p">xxxxxx楼xxxx层</p>
+          <div>
+            <p class="el-icon-question"></p>
+            <p>使用帮助</p>
+          </div>
+        </div>
+        <div class="right-bottom-max-box scrollbar-box">
+          <div class="right-for-max-box">
+            <p class="right-for-title">结构</p>
+            <div class="right-for-box" v-for="(item,index) in roomList" :key="index">
+              <img v-if="item.type == 1" src="@/assets/ZDimages/evacuation3_2/img_xgbj_fj.png">
+              <img v-if="item.type == 2" src="@/assets/ZDimages/evacuation3_2/img_xgbj_gd.png">
+              <img v-if="item.type == 3" src="@/assets/ZDimages/evacuation3_2/img_xgbj_yjck.png">
+              <p>{{item.name}}</p>
+            </div>
+          </div>
+          <div class="right-for-max-box">
+            <p class="right-for-title">房间</p>
+            <div class="right-for-box" v-for="(item,index) in accessoriesList" :key="index">
+              <img v-if="item.type == 4" src="@/assets/ZDimages/evacuation3_2/img_xgbj_fjm.png">
+              <img v-if="item.type == 6" src="@/assets/ZDimages/evacuation3_2/icon_bjt_ssd.png">
+              <p>{{item.name}}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+  import { getToken } from "@/utils/auth";
   export default {
     name: "builDingDetails",
     data() {
       return {
-
+        uploadImgUrl: this.uploadUrl(), // 上传的图片服务器地址
+        headers: {
+          Authorization: "Bearer " + getToken(),
+        },
+        //背景图透明度
+        mapOpacity:0.5,
+        mapOpacityText:50,
+        //背景图地址
+        mapSrc:'https://img0.baidu.com/it/u=3368678403,249914024&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
+        /*********************布局设置参数*********************/
+        //边界位置
+        borderLeft:null,
+        borderTop:null,
+        //画布/楼层尺寸
+        layerWidth:1500,
+        layerHeight:1000,
+        //房间尺寸限制
+        minHeight:100,
+        maxHeight:600,
+        minWidth:100,
+        maxWidth:800,
+        //门尺寸数据
+        minDoorNum:25,
+        maxDoorNum:25,
+        //灯尺寸数据
+        minLightNum:20,
+        maxLightNum:20,
+        //交通点检测时触手范围
+        tentaclesLength:10,
+        //房间数据
+        newMapList:[],
+        mapList: [],
+        //当前坐标
+        clientX: "",
+        clientY: "",
+        boxIndex: "",
+        //房间边框/角方向状态  1.上/右上 2.右/右下 3.下/左下 4.左/左上
+        moveType:null,
+        //抓取类型 1.房间 2.过道 3.应急出口 4.房门 6.疏散灯
+        grab:null,
+        //子类抓取下标
+        minIndex:null,
+        //***********************模拟数据列表*************************//
+        // 可选房间列表 //1.房间 2.过道 3.应急出口
+        roomList:[
+          {
+            name:"过道",
+            type: '2',
+          },
+          {
+            name:"应急出口",
+            type: '3',
+          },
+          {
+            name:"房间",
+            type: '1',
+          },
+        ],
+        // 房间内配件列表 //4.房间 6.疏散灯
+        accessoriesList:[
+          {
+            name:"房门",
+            type: '4',
+          },
+          {
+            name:"疏散灯",
+            type: '6',
+          },
+        ],
+        //************************弹层开关*******************************//
+        shadeBoxType:true,
+        //************************灯设置数据*******************************//
+        dialogOpen:false,
+        dialogIndex:null,
+        dialogMinIndex:null,
+        dialogData:{},
+        dialogOptions: [
+          {
+            value: '1',
+            label: '上'
+          }, {
+            value: '2',
+            label: '下'
+          }, {
+            value: '3',
+            label: '左'
+          }, {
+            value: '4',
+            label: '右'
+          },
+        ],
+        //选择实验室 下拉列表
+        roomSelectList:[],
+        roomSelectValue:'',
+        //鼠标右键抓取坐标
+        mouseX:null,
+        mouseY:null,
+        mouseType:false,
       }
     },
     created() {
@@ -19,7 +172,67 @@
 
     },
     methods:{
-
+      //透明度调整
+      opacityClick(type){
+        if(type == 1){
+          if(this.mapOpacityText>10){
+            this.$set(this,'mapOpacityText',this.mapOpacityText - 10);
+            this.$set(this,'mapOpacity',this.mapOpacityText/100);
+          }
+        }else if (type == 2){
+          if(this.mapOpacityText<100){
+            this.$set(this,'mapOpacityText',this.mapOpacityText + 10);
+            this.$set(this,'mapOpacity',this.mapOpacityText/100);
+          }
+        }
+      },
+      //上传
+      handleAvatarSuccess(res, file, type) {
+        if(res){
+          if(res.data){
+            if(res.data.url){
+              this.$set(this,'mapSrc',res.data.url)
+            }
+          }
+        }
+      },
+      beforeAvatarUpload(file) {
+        if (file.type == 'image/png' || file.type == 'image/jpeg' || file.type == 'image/gif') {
+          this.asyncImgChecked(file).then(data => {
+            if (data) {
+              console.log('data',data);
+              return true;
+            } else {
+              this.$message.error('图片尺寸不能大于于1500 X 1000')
+              return false;
+            }
+          })
+        }else{
+          this.$message.error('只能上传png/gif/jpg格式');
+          return false;
+        }
+      },
+      // 计算图片尺寸
+      asyncImgChecked (file) {
+        return new Promise((resolve) => {
+          let reader = new FileReader()
+          reader.readAsDataURL(file) // 必须用file.raw
+          reader.onload = e => { // 让页面中的img标签的src指向读取的路径
+            let img = e.target.result;
+            const image = new Image()
+            image.src=img
+            image.onload = _=>{
+              let width = image.width
+              let height= image.height
+              if(width >1500 || height > 1000){
+                resolve(false)
+              }else{
+                resolve(true)
+              }
+            }
+          }
+        })
+      }
     }
   }
 </script>
@@ -34,5 +247,139 @@
       margin:0;
       font-weight:500;
     }
+    .buildingDetails-page{
+      flex:1;
+      display: flex;
+      overflow: hidden;
+      .max-left-box{
+        flex:1;
+        display: flex;
+        flex-direction: column;
+        .max-left-button-box{
+          display: flex;
+          .null-p{
+            flex:1;
+          }
+          .up-img-p{
+            width:120px;
+            line-height:40px;
+            text-align: center;
+            font-size:16px;
+            color:#333;
+            border-radius:6px;
+            border: 1px solid #E0E0E0;
+            margin:22px 0 0 0;
+          }
+          .opacity-button-box{
+            display: flex;
+            border: 1px solid #E0E0E0;
+            border-radius:6px;
+            width:210px;
+            margin:22px 20px 0 26px;
+            p{
+              font-size:16px;
+              text-align: center;
+              line-height:40px;
+            }
+            p:nth-child(1){
+              width:40px;
+              cursor: pointer;
+            }
+            p:nth-child(2){
+              width:130px;
+              border-left:1px solid #e0e0e0;
+              border-right:1px solid #e0e0e0;
+            }
+            p:nth-child(3){
+              width:40px;
+              cursor: pointer;
+            }
+          }
+        }
+        .max-left-map-big-box{
+          flex:1;
+          margin:22px 0 24px 28px;
+          border:1px solid #e0e0e0;
+          position: relative;
+          .left-map-box{
+            position: absolute;
+            left:0;
+            top:0;
+            z-index:10;
+            color:#fff;
+          }
+          .left-map-img{
+            position: absolute;
+            left:0;
+            top:0;
+            z-index:5;
+            -webkit-user-drag: none;
+          }
+        }
+      }
+      .max-right-box{
+        width:376px;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        .right-title-box{
+          margin:0 28px;
+          display: flex;
+          line-height:70px;
+          border-bottom:1px solid #D8D8D8;
+          .right-title-p{
+            flex:1;
+            font-size:16px;
+            color:#333;
+          }
+          div{
+            cursor: pointer;
+            display: flex;
+            font-size:16px;
+            color:#333;
+            p:nth-child(1){
+              color:rgb(234,149,24);
+              line-height: 70px;
+              margin-right:4px;
+            }
+            p:nth-child(2){
+              font-size:16px;
+              color:#333;
+            }
+          }
+        }
+        .right-bottom-max-box{
+          .right-for-max-box{
+            margin-left:28px;
+            .right-for-title{
+              line-height:60px;
+              font-size:16px;
+            }
+            .right-for-box{
+              display: inline-block;
+              width:150px;
+              height:160px;
+              margin-right:20px;
+              margin-bottom:20px;
+              border:1px solid #e0e0e0;
+              border-radius:6px;
+              overflow: hidden;
+              img{
+                display: block;
+                width:150px;
+                height:120px;
+                cursor: pointer;
+              }
+              p{
+                line-height:40px;
+                border-top:1px solid #e0e0e0;
+                text-align: center;
+                font-size:14px;
+              }
+            }
+          }
+        }
+      }
+    }
   }
 </style>

src/views/comprehensive/laboratoryManagement/building/buildingManagement.vue

@@ -901,6 +901,7 @@
             background: #0045AF;
             border-radius:6px;
             text-align: center;
+            cursor: pointer;
           }
         }
         .table-box{

src/views/comprehensive/laboratoryManagement/building/newIndex.vue

@@ -1,7 +1,223 @@
 <!--新版布局管理-->
 <template>
   <div class="app-container building">
-    <building-management v-if="pageType == 1"></building-management>
+    <div class="buildingManagement" v-if="pageType == 1">
+      <div class="max-left-box">
+        <div class="tree-box scrollbar-box">
+          <div class="terr-max-box" v-for="(item,index) in treeList" :key="index">
+            <div class="max-name-box">
+              <p class="max-name" :class="checkTreeId==item.id?'check-color':''" @click="clickCheckTree(item.id,1)">{{item.name}}</p>
+              <el-dropdown @command="(command)=>handleCommand(command,item)">
+                <img src="@/assets/ZDimages/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.childList" :key="indexOne">
+              <div class="big-name-box">
+                <img v-if="!itemOne.type" src="@/assets/ZDimages/evacuation3_2/icon_bjgl_jt.png" @click="terrClick(itemOne)">
+                <img v-if="itemOne.type" src="@/assets/ZDimages/evacuation3_2/icon_bjgl_xjt.png" @click="terrClick(itemOne)">
+                <p :class="checkTreeId==itemOne.id?'check-color':''" @click="clickCheckTree(itemOne.id,2)">{{itemOne.name}}</p>
+              </div>
+              <div v-if="itemOne.type" class="terr-min-box" v-for="(itemTwo,indexTwo) in itemOne.childList" :key="indexTwo">
+                <p class="min-name" :class="checkTreeId==itemTwo.id?'check-color':''" @click="clickCheckTree(itemTwo.id,3)">{{itemTwo.name}}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <p class="max-left-big-button" @click="handleCommand(3)">+ 新增校院</p>
+      </div>
+      <div class="max-right-box">
+        <div class="school-box" v-if="checkTreeType == 1">
+          <div class="max-right-button-box">
+            <p class="null-p"></p>
+            <p class="max-right-big-button" @click="handleCommand(4)">+ 新增楼栋</p>
+          </div>
+          <div class="right-big-list-box scrollbar-box">
+            <div class="for-max-box" v-for="(item,index) in buildingList" :key="index"
+                 @dragover.prevent="dragoverPrevent(item)">
+              <div class="for-big-box">
+                <div class="for-big-box-left">
+                  <img src="@/assets/ZDimages/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>6</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>160</p>
+                    <p>房间数</p>
+                  </div>
+                </div>
+                <div class="for-button-min-box">
+                  <div>
+                    <img src="@/assets/ZDimages/evacuation3_2/icon_znwl_bj.png">
+                    <p @click="handleCommand(8)">编辑</p>
+                  </div>
+                  <div>
+                    <img src="@/assets/ZDimages/evacuation3_2/icon_znwl_sc.png">
+                    <p @click="handleCommand(9)">删除</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="building-box" v-if="checkTreeType == 2">
+          <div class="max-right-button-box">
+            <p class="null-p"></p>
+            <p class="max-right-big-button" style="margin-right:20px;" @click="handleCommand(7)">+ 新增楼层</p>
+            <p class="max-right-big-button" @click="floorZK(1)">{{floorZkType==1?'一键收起':'一键展开'}}</p>
+          </div>
+          <div class="right-big-list-box scrollbar-box">
+            <div class="for-max-box" v-for="(item,index) in buildingList" :key="index"
+                 @dragover.prevent="dragoverPrevent(item)">
+              <div class="for-big-box">
+                <div class="for-big-box-left">
+                  <img src="@/assets/ZDimages/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>
+                    <img src="@/assets/ZDimages/evacuation3_2/icon_znwl_bj.png">
+                    <p @click="handleCommand(8)">编辑</p>
+                  </div>
+                  <div>
+                    <img src="@/assets/ZDimages/evacuation3_2/icon_znwl_sc.png">
+                    <p @click="handleCommand(9)">删除</p>
+                  </div>
+                  <div>
+                    <img src="@/assets/ZDimages/evacuation3_2/icon_bjgl_zk.png">
+                    <p @click="floorZK(2,index)">{{item.type?'收起':'展开'}}</p>
+                  </div>
+                </div>
+              </div>
+              <p v-if="item.type" style="border:1px solid #000;text-align: center;margin-left:36px;">暂无数据</p>
+            </div>
+          </div>
+        </div>
+        <div class="floor-box" v-if="checkTreeType == 3">
+          <div class="map-max-big-box">
+            <p class="position-button-p" @click="clickPage(2)">设置布局</p>
+          </div>
+          <div class="table-box">
+            <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
+              <el-form-item label="关键字" prop="searchValue" style="margin-right:20px;margin-bottom:20px;">
+                <el-input
+                  v-model="queryParams.searchValue"
+                  placeholder="请输入关键字"
+                  clearable
+                  size="small"
+                />
+              </el-form-item>
+              <el-form-item label="房间类型" prop="searchValue" style="margin-right:20px;margin-bottom:20px;">
+                <el-input
+                  v-model="queryParams.searchValue"
+                  placeholder="请选择关键字"
+                  clearable
+                  size="small"
+                />
+              </el-form-item>
+              <el-form-item>
+                <p class="inquire-button-one" @click="handleQuery" style="margin-right:20px;margin-bottom:20px;">查询</p>
+                <p class="reset-button-one" @click="resetQuery">重置</p>
+              </el-form-item>
+            </el-form>
+            <el-table v-loading="loading" border :data="dataList">
+              <el-table-column label="房间号" align="left" prop="moldName" width="100"/>
+              <el-table-column label="房间名称" align="left" prop="createBy"/>
+              <el-table-column label="房间类型" align="left" prop="createBy" width="200"/>
+              <el-table-column label="创建人" align="left" prop="createBy" width="200"/>
+              <el-table-column label="创建时间" align="left" prop="createTime" width="200"/>
+              <el-table-column label="操作" align="left" class-name="small-padding fixed-width" width="200">
+                <template slot-scope="scope">
+                  <div class="button-box">
+                    <p class="table-min-button" @click="roomClick(1,item)">编辑</p>
+                    <p class="table-min-button" @click="roomClick(3)">删除</p>
+                  </div>
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              style="margin-top:20px;"
+              v-show="total>0"
+              :total="total"
+              :page.sync="queryParams.pageNum"
+              :limit.sync="queryParams.pageSize"
+              @pagination="getList"
+            />
+          </div>
+        </div>
+      </div>
+      <!-- 新增/编辑院校 -->
+      <el-dialog :title="dialogTitle" v-if="dialogOpen" :visible.sync="dialogOpen" width="600px" append-to-body>
+        <el-form ref="dialogForm" :model="dialogForm" :rules="rules" label-width="110px">
+          <el-form-item label="院校名称：" prop="nameOne">
+            <el-input v-model="dialogForm.nameOne" maxlength="10" placeholder="请输入院校名称" :disabled="dialogType==2 || dialogType==3"/>
+          </el-form-item>
+          <el-form-item label="楼栋名称：" prop="nameTwo" v-if="dialogType==2 || dialogType==3">
+            <el-input v-model="dialogForm.nameTwo" maxlength="10" placeholder="请输入楼栋名称" :disabled="dialogType==3"/>
+          </el-form-item>
+          <el-form-item label="楼层名称：" prop="nameThree" v-if="dialogType==3">
+            <el-input v-model="dialogForm.nameThree" maxlength="10" placeholder="请输入楼层名称" />
+          </el-form-item>
+          <el-form-item label="排序序号：" prop="key">
+            <el-input v-model="dialogForm.key" maxlength="10" placeholder="请输入排序序号" />
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <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="600px" append-to-body>
+        <el-form ref="dialogForm" :model="dialogForm" :rules="rules" label-width="110px">
+          <el-form-item label="楼栋名称：" prop="nameTwo">
+            <el-input v-model="dialogForm.nameTwo" maxlength="10" placeholder="请输入楼栋名称" disabled/>
+          </el-form-item>
+          <el-form-item label="楼层名称：" prop="nameThree">
+            <el-input v-model="dialogForm.nameThree" maxlength="10" placeholder="请输入楼层名称" />
+          </el-form-item>
+          <el-form-item label="房间类型：" prop="key">
+            <el-input v-model="dialogForm.key" maxlength="10" placeholder="请输入排序序号" />
+          </el-form-item>
+          <el-form-item label="房间号：" prop="key">
+            <el-input v-model="dialogForm.key" maxlength="10" placeholder="请输入排序序号" />
+          </el-form-item>
+          <el-form-item label="房间名称：" prop="key">
+            <el-input v-model="dialogForm.key" maxlength="10" placeholder="请输入排序序号" />
+          </el-form-item>
+          <el-form-item label="房间选择：" prop="key">
+            <el-input v-model="dialogForm.key" maxlength="10" placeholder="请输入排序序号" />
+          </el-form-item>
+          <el-form-item label="房间位置：" prop="key">
+            <el-input v-model="dialogForm.key" maxlength="10" placeholder="请输入排序序号" />
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <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>
+    </div>
     <building-details v-if="pageType == 2"></building-details>
   </div>
 </template>
@@ -17,17 +233,312 @@
     },
     data() {
       return {
-        pageType: 1,
+        pageType: 2,
+        //拖拽起始Y点(用于计算朝向)
+        clientY:null,
+        clientId:null,
+        treeList:[
+          {
+            id:'1',
+            name:'西安电子科技大学东校区',
+            childList:[
+              {
+                id:'2',
+                name:'一号实验楼',
+                type:false,
+                childList:[
+                  {
+                    id:'3',
+                    name:'二层',
+                    childList:[]
+                  }
+                ]
+              },
+              {
+                id:'4',
+                name:'一号实验楼',
+                type:false,
+                childList:[
+                  {
+                    id:'5',
+                    name:'二层',
+                    childList:[]
+                  }
+                ]
+              },
+            ]
+          }
+        ],
+        //选中状态
+        checkTreeId:1,
+        checkTreeType:1,
+        buildingList:[
+          {id:1,name:"名称1",type:false},{id:2,name:"名称2",type:true},{id:3,name:"名称3",type:false},{id:4,name:"名称1",type:false},{id:5,name:"名称2",type:true},{id:6,name:"名称3",type:false},{id:7,name:"名称1",type:false},{id:8,name:"名称2",type:true},{id:9,name:"名称3",type:false},
+        ],
+        //楼层展开/关闭状态
+        floorZkType:null, //1.全部展开 2.全部关闭 3.有关有开
+        //编辑弹窗开关
+        dialogOpen:false,
+        dialogType:null,
+        dialogTitle:'',
+        // 表单参数
+        dialogForm: {},
+        // 表单校验
+        rules: {
+          nameOne: [
+            { required: true, message: "请输入院校名称", trigger: "blur" },
+            { required: true, message: "请输入院校名称", validator: this.spaceJudgment, trigger: "blur" }
+          ],
+          nameTwo: [
+            { required: true, message: "请输入楼栋名称", trigger: "blur" },
+            { required: true, message: "请输入楼栋名称", validator: this.spaceJudgment, trigger: "blur" }
+          ],
+          nameThree: [
+            { required: true, message: "请输入楼层名称", trigger: "blur" },
+            { required: true, message: "请输入楼层名称", validator: this.spaceJudgment, trigger: "blur" }
+          ],
+          key: [
+            { required: true, message: "请输入排序序号", trigger: "blur" },
+            { required: true, message: "请输入排序序号", validator: this.spaceJudgment, trigger: "blur" }
+          ],
+        },
+        // 显示搜索条件
+        showSearch: true,
+        loading:false,
+        //楼层查询数据
+        queryParams:{},
+        //楼层表单数据
+        dataList:[],
+        total:10,
+        //房间配置相关
+        dialogOpenRoom:false,
       }
     },
     created() {
 
     },
     mounted(){
-
+      this.floorZkFor();
     },
     methods:{
+      //页面切换
+      clickPage(type){
+        if(type == 1){
+          this.$set(this,'pageType',type);
+        }else if(type == 2){
+          this.$set(this,'pageType',type);
+        }
+      },
+      //房间操作按钮
+      roomClick(type){
+        if(type == 1){
+          this.dialogOpenRoom = true;
+        }else if(type == 2){
+          this.$confirm('确定要删除该房间吗?', "警告", {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "warning"
+          }).then(function() {
+            console.log('删除院校',item)
+          }).then(() => {
+          }).catch(() => {});
+        }else if(type == 3){
+          this.dialogOpenRoom = true;
+        }
+      },
+      //楼栋弹出下啦列表选中事件
+      handleCommand(command,item){
+        if (command == 1){
+          //编辑院校
+          this.$set(this,'dialogTitle','编辑院校');
+          this.$set(this,'dialogType',1);
+          this.$set(this,'dialogOpen',true);
+        }else if(command == 2){
+          //删除院校
+          this.$confirm('确定要删除该院校吗?', "警告", {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "warning"
+          }).then(function() {
+            console.log('删除院校',item)
+          }).then(() => {
+          }).catch(() => {});
+        }else if(command == 3){
+          //新增院校
+          this.$set(this,'dialogTitle','新增院校');
+          this.$set(this,'dialogType',1);
+          this.$set(this,'dialogOpen',true);
+        }else if(command == 4){
+          //新增楼栋
+          this.$set(this,'dialogTitle','新增楼栋');
+          this.$set(this,'dialogType',2);
+          this.$set(this,'dialogOpen',true);
+        }else if(command == 5){
+          //编辑楼栋
+          this.$set(this,'dialogTitle','编辑楼栋');
+          this.$set(this,'dialogType',2);
+          this.$set(this,'dialogOpen',true);
+        }else if(command == 6){
+          //删除楼栋
+          this.$confirm('确定要删除该楼栋吗?', "警告", {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "warning"
+          }).then(function() {
+            console.log('删除楼栋',item)
+          }).then(() => {
+          }).catch(() => {});
+        }else if(command == 7){
+          //新增楼层
+          this.$set(this,'dialogTitle','新增楼层');
+          this.$set(this,'dialogType',3);
+          this.$set(this,'dialogOpen',true);
+        }else if(command == 8){
+          //编辑楼层
+          this.$set(this,'dialogTitle','编辑楼层');
+          this.$set(this,'dialogType',3);
+          this.$set(this,'dialogOpen',true);
+        }else if(command == 9){
+          //删除楼层
+          this.$confirm('确定要删除该楼层吗?', "警告", {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "warning"
+          }).then(function() {
+            console.log('删除楼层',item)
+          }).then(() => {
+          }).catch(() => {});
+        }
+      },
+      //树状结构选中
+      clickCheckTree(id,type){
+        this.$set(this,'checkTreeId',id)
+        this.$set(this,'checkTreeType',type)
+      },
+      // 取消按钮
+      cancel() {
+        this.$set(this,'dialogOpen',false);
+        this.$set(this,'dialogForm',{});
+        this.$set(this,'dialogType',null);
+      },
+      //确定按钮
+      submitForm(){
+
+      },
+      //树状结构展开收回
+      terrClick(itemOne){
+        itemOne.type = !itemOne.type;
+      },
+      //展开/收起开关
+      floorZK(type,index){
+        let self = this;
+        //type等于1时全部开关功能 等于2时单个开关
+        if(type == 1){
+          let list = JSON.parse(JSON.stringify(self.buildingList))
+          for(let i=0;i<list.length;i++){
+            if(self.floorZkType == 1){
+              list[i].type = false;
+              console.log('self.floorZkType == 1',list[i].type)
+            }else if(self.floorZkType == 2){
+              list[i].type = true;
+              console.log('self.floorZkType == 2',list[i].type)
+            }else if(self.floorZkType == 3){
+              list[i].type = true;
+              console.log('self.floorZkType == 3',list[i].type)
+            }
+          }
+          this.$set(this,'buildingList',list);
+          this.floorZkFor();
+        }else if(type == 2){
+          this.$set(this.buildingList[index],'type',this.buildingList[index].type?false:true)
+          this.floorZkFor();
+        }
+      },
+      //层展开关闭判断
+      floorZkFor(){
+        let self = this;
+        let numOne = 0;
+        let numTwo = 0;
+        for(let i=0;i<self.buildingList.length;i++){
+          if(self.buildingList[i].type){
+            numOne++
+          }else{
+            numTwo++
+          }
+        }
+        console.log('numOne',numOne)
+        console.log('numTwo',numTwo)
+        console.log('self.buildingList.length',self.buildingList.length)
+        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('floorZkType',self.floorZkType)
+      },
+      //拖拽抓取时触发
+      dragstartPlay(event) {
+        this.$set(this,'clientY',event.clientY)
+      },
+      //拖拽途径触发
+      dragoverPrevent(item){
+        this.$set(this,'clientId',item.id)
+      },
+      //拖拽释放触发
+      dragEnterOver(event,item) {
+        let self = this;
+        if(this.clientId && item.id != this.clientId){
+          let list = [];
+          let obj = null;
+          for(let i=0;i<self.buildingList.length;i++){
+            if(self.buildingList[i].id == item.id){
+              obj = JSON.parse(JSON.stringify(self.buildingList[i]))
+            }
+          }
+          if(event.clientY>this.clientY){
+            for(let i=0;i<self.buildingList.length;i++){
+              if(self.buildingList[i].id != item.id && self.buildingList[i].id != this.clientId){
+                list.push(self.buildingList[i]);
+              }else if(self.buildingList[i].id == this.clientId){
+                list.push(self.buildingList[i]);
+                list.push(obj);
+              }
+            }
+          }else if(event.clientY<this.clientY){
+            for(let i=0;i<self.buildingList.length;i++){
+              if(self.buildingList[i].id == this.clientId){
+                list.push(obj);
+                list.push(self.buildingList[i]);
+              }else if(self.buildingList[i].id != item.id && self.buildingList[i].id != this.clientId){
+                list.push(self.buildingList[i]);
+              }
+            }
+          }
+          this.$set(this,'buildingList',list);
+          this.$set(this,'clientId',null);
+        }
+      },
+      getList(){
 
+      },
+      /** 搜索按钮操作 */
+      handleQuery() {
+        this.queryParams.pageNum = 1;
+        this.getList();
+      },
+      /** 重置按钮操作 */
+      resetQuery() {
+        // this.resetForm("queryForm");
+        this.$set(this,'queryParams',{
+          pageNum: 1,
+          pageSize:20,
+          typeName:"",
+          title: '',
+        });
+        this.handleQuery();
+      },
     }
   }
 </script>
@@ -42,5 +553,390 @@
       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-box{
+          flex:1;
+          .terr-max-box{
+            .max-name-box{
+              display: flex;
+              margin-right:20px;
+              margin-bottom:10px;
+              color:#D8D8D8;
+              font-size:20px;
+              .max-name{
+                flex:1;
+                margin-right:19px;
+                color:#333;
+                font-size:16px;
+                line-height:16px;
+                margin-top:3px;
+                cursor: pointer;
+              }
+            }
+            .terr-big-box{
+              margin-left:30px;
+              .big-name-box{
+                cursor: pointer;
+                height:40px;
+                line-height:40px;
+                display: flex;
+                font-size:16px;
+                color:#333;
+                img{
+                  width:16px;
+                  height:16px;
+                  margin-top:12px;
+                  margin-right:4px;
+                }
+              }
+              .terr-min-box{
+                margin-left:30px;
+                .min-name{
+                  cursor: pointer;
+                  height:40px;
+                  line-height:40px;
+                  display: flex;
+                  font-size:16px;
+                  color:#333;
+                }
+              }
+            }
+            .check-color{
+              color:#0183FA!important;
+            }
+          }
+        }
+        .max-left-big-button{
+          color:#0183FA;
+          border:1px dashed #0183FA;
+          -webkit-border-radius: 6px;
+          -moz-border-radius: 6px;
+          border-radius: 6px;
+          width:180px;
+          line-height:40px;
+          margin: 20px 0 20px 40px;
+          text-align: center;
+          font-size:14px;
+          cursor: pointer;
+        }
+        .max-left-big-button:hover{
+          color:#fff;
+          background: #0183FA;
+          border:1px solid #0183FA;
+        }
+      }
+      .max-right-box{
+        flex:1;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        .school-box{
+          flex:1;
+          display: flex;
+          flex-direction: column;
+          overflow: hidden;
+          .max-right-button-box{
+            height:40px;
+            display: flex;
+            margin-bottom:22px;
+            .null-p{
+              flex:1;
+            }
+            .max-right-big-button{
+              color:#fff;
+              background: #0045AF;
+              -webkit-border-radius: 6px;
+              -moz-border-radius: 6px;
+              border-radius: 6px;
+              width:130px;
+              line-height:40px;
+              text-align: center;
+              font-size:14px;
+              cursor: pointer;
+            }
+            .max-right-big-button:hover{
+              color:#fff;
+              background: #0183FA;
+            }
+          }
+          .right-big-list-box{
+            flex:1;
+            .for-max-box{
+              .for-big-box{
+                display: flex;
+                border:1px solid #dedede;
+                height:100px;
+                box-shadow: 0px 3px 8px 0px rgba(0,0,0,0.16);
+                margin-bottom:30px;
+                margin-left:36px;
+                border-radius:6px;
+                .for-big-box-left{
+                  flex:1;
+                  display: flex;
+                  .for-img-one{
+                    cursor: pointer;
+                    height:30px;
+                    width:30px;
+                    margin:35px 0 0 30px;
+                  }
+                  .for-text-one{
+                    font-size:16px;
+                    line-height:100px;
+                    margin-left:95px;
+                    width:230px;
+                    font-weight:500;
+                  }
+                  .for-img-two{
+                    height:48px;
+                    width:48px;
+                    margin:26px 23px 0 30px;
+                  }
+                  .for-text-box-one{
+                    width:88px;
+                    margin-right:73px;
+                    p{
+                      text-align: center;
+                    }
+                    p:nth-child(1){
+                      margin-top:20px;
+                      font-size:24px;
+                      line-height:30px;
+                      color:#0183FA;
+                    }
+                    p:nth-child(2){
+                      margin-top:10px;
+                      font-size:16px;
+                      line-height:16px;
+                      color:#333;
+                    }
+                  }
+                  .for-img-three{
+                    height:48px;
+                    width:48px;
+                    margin:26px 23px 0 0;
+                  }
+                  .for-text-box-two{
+                    width:88px;
+                    p{
+                      text-align: center;
+                    }
+                    p:nth-child(1){
+                      margin-top:20px;
+                      font-size:24px;
+                      line-height:30px;
+                      color:#0183FA;
+                    }
+                    p:nth-child(2){
+                      margin-top:10px;
+                      font-size:16px;
+                      line-height:16px;
+                      color:#333;
+                    }
+                  }
+                }
+                .for-button-min-box{
+                  width:220px;
+                  margin-top:9px;
+                  height:82px;
+                  border-left:1px dashed rgba(0,0,0,0.3);
+                  display: flex;
+                  line-height:82px;
+                  div{
+                    margin-left: 34px;
+                    display: flex;
+                    width: 60px;
+                    cursor: pointer;
+                    img{
+                      width:16px;
+                      height:16px;
+                      margin-right:8px;
+                      margin-top:33px;
+                    }
+                    p{
+                      font-size:14px;
+                      color:#333;
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+        .building-box{
+          flex:1;
+          display: flex;
+          flex-direction: column;
+          overflow: hidden;
+          .max-right-button-box{
+            height:40px;
+            display: flex;
+            margin-bottom:22px;
+            .null-p{
+              flex:1;
+            }
+            .max-right-big-button{
+              color:#fff;
+              background: #0045AF;
+              -webkit-border-radius: 6px;
+              -moz-border-radius: 6px;
+              border-radius: 6px;
+              width:130px;
+              line-height:40px;
+              text-align: center;
+              font-size:14px;
+              cursor: pointer;
+            }
+            .max-right-big-button:hover{
+              color:#fff;
+              background: #0183FA;
+            }
+          }
+          .right-big-list-box{
+            flex:1;
+            .for-max-box{
+              margin-bottom:30px;
+              .for-big-box{
+                display: flex;
+                border:1px solid #dedede;
+                height:100px;
+                box-shadow: 0px 3px 8px 0px rgba(0,0,0,0.16);
+                margin-left:36px;
+                border-radius:6px;
+                .for-big-box-left{
+                  flex:1;
+                  display: flex;
+                  .for-img-one{
+                    cursor: pointer;
+                    height:30px;
+                    width:30px;
+                    margin:35px 0 0 30px;
+                  }
+                  .for-text-one{
+                    font-size:16px;
+                    line-height:100px;
+                    margin-left:95px;
+                    width:230px;
+                    font-weight:500;
+                  }
+                  .for-img-two{
+                    height:48px;
+                    width:48px;
+                    margin:26px 23px 0 30px;
+                  }
+                  .for-text-box-one{
+                    width:88px;
+                    margin-right:73px;
+                    p{
+                      text-align: center;
+                    }
+                    p:nth-child(1){
+                      margin-top:20px;
+                      font-size:24px;
+                      line-height:30px;
+                      color:#0183FA;
+                    }
+                    p:nth-child(2){
+                      margin-top:10px;
+                      font-size:16px;
+                      line-height:16px;
+                      color:#333;
+                    }
+                  }
+                  .for-img-three{
+                    height:48px;
+                    width:48px;
+                    margin:26px 23px 0 0;
+                  }
+                  .for-text-box-two{
+                    width:88px;
+                    p{
+                      text-align: center;
+                    }
+                    p:nth-child(1){
+                      margin-top:20px;
+                      font-size:24px;
+                      line-height:30px;
+                      color:#0183FA;
+                    }
+                    p:nth-child(2){
+                      margin-top:10px;
+                      font-size:16px;
+                      line-height:16px;
+                      color:#333;
+                    }
+                  }
+                }
+                .for-button-min-box{
+                  width:330px;
+                  margin-top:9px;
+                  height:82px;
+                  border-left:1px dashed rgba(0,0,0,0.3);
+                  display: flex;
+                  line-height:82px;
+                  div{
+                    margin-left: 34px;
+                    display: flex;
+                    width: 60px;
+                    cursor: pointer;
+                    img{
+                      width:16px;
+                      height:16px;
+                      margin-right:8px;
+                      margin-top:33px;
+                    }
+                    p{
+                      font-size:14px;
+                      color:#333;
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+        .floor-box{
+          flex:1;
+          display: flex;
+          flex-direction: column;
+          overflow: hidden;
+          .map-max-big-box{
+            height:400px;
+            position:relative;
+            border:1px solid #E0E0E0;
+            margin-bottom:20px;
+            margin-left:36px;
+            .position-button-p{
+              position:absolute;
+              right:12px;
+              top:13px;
+              width:100px;
+              line-height:40px;
+              font-size:14px;
+              color:#fff;
+              background: #0045AF;
+              border-radius:6px;
+              text-align: center;
+              cursor: pointer;
+            }
+          }
+          .table-box{
+            margin-left:36px;
+            flex:1;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+          }
+        }
+      }
+    }
   }
 </style>