|
|
@@ -0,0 +1,916 @@
|
|
|
+<template>
|
|
|
+ <div class="buildingManagement">
|
|
|
+ <div class="max-left-box">
|
|
|
+ <div class="tree-box scrollbar-box">
|
|
|
+ <div class="terr-max-box" v-for="(item,index) in treeList" :key="index">
|
|
|
+ <div class="max-name-box">
|
|
|
+ <p class="max-name" :class="checkTreeId==item.id?'check-color':''" @click="clickCheckTree(item.id,1)">{{item.name}}</p>
|
|
|
+ <el-dropdown @command="(command)=>handleCommand(command,item)">
|
|
|
+ <img src="@/assets/ZDimages/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">设置布局</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="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="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="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="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>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ name: "buildingManagement",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ //拖拽起始Y点(用于计算朝向)
|
|
|
+ clientY:null,
|
|
|
+ clientId:null,
|
|
|
+ treeList:[
|
|
|
+ {
|
|
|
+ id:'1',
|
|
|
+ name:'西安电子科技大学东校区',
|
|
|
+ childList:[
|
|
|
+ {
|
|
|
+ id:'2',
|
|
|
+ name:'一号实验楼',
|
|
|
+ type:false,
|
|
|
+ childList:[
|
|
|
+ {
|
|
|
+ id:'3',
|
|
|
+ name:'二层',
|
|
|
+ childList:[]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id:'4',
|
|
|
+ name:'一号实验楼',
|
|
|
+ type:false,
|
|
|
+ childList:[
|
|
|
+ {
|
|
|
+ id:'5',
|
|
|
+ name:'二层',
|
|
|
+ childList:[]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ //选中状态
|
|
|
+ checkTreeId:1,
|
|
|
+ checkTreeType:1,
|
|
|
+ buildingList:[
|
|
|
+ {id:1,name:"名称1",type:false},{id:2,name:"名称2",type:true},{id:3,name:"名称3",type:false},{id:4,name:"名称1",type:false},{id:5,name:"名称2",type:true},{id:6,name:"名称3",type:false},{id:7,name:"名称1",type:false},{id:8,name:"名称2",type:true},{id:9,name:"名称3",type:false},
|
|
|
+ ],
|
|
|
+ //楼层展开/关闭状态
|
|
|
+ floorZkType:null, //1.全部展开 2.全部关闭 3.有关有开
|
|
|
+ //编辑弹窗开关
|
|
|
+ dialogOpen:false,
|
|
|
+ dialogType:null,
|
|
|
+ dialogTitle:'',
|
|
|
+ // 表单参数
|
|
|
+ dialogForm: {},
|
|
|
+ // 表单校验
|
|
|
+ rules: {
|
|
|
+ nameOne: [
|
|
|
+ { required: true, message: "请输入院校名称", trigger: "blur" },
|
|
|
+ { required: true, message: "请输入院校名称", validator: this.spaceJudgment, trigger: "blur" }
|
|
|
+ ],
|
|
|
+ nameTwo: [
|
|
|
+ { required: true, message: "请输入楼栋名称", trigger: "blur" },
|
|
|
+ { required: true, message: "请输入楼栋名称", validator: this.spaceJudgment, trigger: "blur" }
|
|
|
+ ],
|
|
|
+ nameThree: [
|
|
|
+ { required: true, message: "请输入楼层名称", trigger: "blur" },
|
|
|
+ { required: true, message: "请输入楼层名称", validator: this.spaceJudgment, trigger: "blur" }
|
|
|
+ ],
|
|
|
+ key: [
|
|
|
+ { required: true, message: "请输入排序序号", trigger: "blur" },
|
|
|
+ { required: true, message: "请输入排序序号", validator: this.spaceJudgment, trigger: "blur" }
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ // 显示搜索条件
|
|
|
+ showSearch: true,
|
|
|
+ loading:false,
|
|
|
+ //楼层查询数据
|
|
|
+ queryParams:{},
|
|
|
+ //楼层表单数据
|
|
|
+ dataList:[],
|
|
|
+ total:10,
|
|
|
+ //房间配置相关
|
|
|
+ dialogOpenRoom:false,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+
|
|
|
+ },
|
|
|
+ mounted(){
|
|
|
+ this.floorZkFor();
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ //房间操作按钮
|
|
|
+ roomClick(type){
|
|
|
+ if(type == 1){
|
|
|
+ this.dialogOpenRoom = true;
|
|
|
+ }else if(type == 2){
|
|
|
+ this.$confirm('确定要删除该房间吗?', "警告", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning"
|
|
|
+ }).then(function() {
|
|
|
+ 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>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+ .buildingManagement{
|
|
|
+ flex:1;
|
|
|
+ display: flex!important;
|
|
|
+ overflow: hidden;
|
|
|
+ padding:22px 28px 22px 32px;
|
|
|
+ *{
|
|
|
+ margin:0;
|
|
|
+ font-weight:100;
|
|
|
+ }
|
|
|
+ .max-left-box{
|
|
|
+ width:281px;
|
|
|
+ border-right:1px dashed #A2A2A2;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .tree-box{
|
|
|
+ flex:1;
|
|
|
+ .terr-max-box{
|
|
|
+ .max-name-box{
|
|
|
+ display: flex;
|
|
|
+ margin-right:20px;
|
|
|
+ margin-bottom:10px;
|
|
|
+ color:#D8D8D8;
|
|
|
+ font-size:20px;
|
|
|
+ .max-name{
|
|
|
+ flex:1;
|
|
|
+ margin-right:19px;
|
|
|
+ color:#333;
|
|
|
+ font-size:16px;
|
|
|
+ line-height:16px;
|
|
|
+ margin-top:3px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .terr-big-box{
|
|
|
+ margin-left:30px;
|
|
|
+ .big-name-box{
|
|
|
+ cursor: pointer;
|
|
|
+ height:40px;
|
|
|
+ line-height:40px;
|
|
|
+ display: flex;
|
|
|
+ font-size:16px;
|
|
|
+ color:#333;
|
|
|
+ img{
|
|
|
+ width:16px;
|
|
|
+ height:16px;
|
|
|
+ margin-top:12px;
|
|
|
+ margin-right:4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .terr-min-box{
|
|
|
+ margin-left:30px;
|
|
|
+ .min-name{
|
|
|
+ cursor: pointer;
|
|
|
+ height:40px;
|
|
|
+ line-height:40px;
|
|
|
+ display: flex;
|
|
|
+ font-size:16px;
|
|
|
+ color:#333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .check-color{
|
|
|
+ color:#0183FA!important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .max-left-big-button{
|
|
|
+ color:#0183FA;
|
|
|
+ border:1px dashed #0183FA;
|
|
|
+ -webkit-border-radius: 6px;
|
|
|
+ -moz-border-radius: 6px;
|
|
|
+ border-radius: 6px;
|
|
|
+ width:180px;
|
|
|
+ line-height:40px;
|
|
|
+ margin: 20px 0 20px 40px;
|
|
|
+ text-align: center;
|
|
|
+ font-size:14px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .max-left-big-button:hover{
|
|
|
+ color:#fff;
|
|
|
+ background: #0183FA;
|
|
|
+ border:1px solid #0183FA;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .max-right-box{
|
|
|
+ flex:1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ overflow: hidden;
|
|
|
+ .school-box{
|
|
|
+ flex:1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ overflow: hidden;
|
|
|
+ .max-right-button-box{
|
|
|
+ height:40px;
|
|
|
+ display: flex;
|
|
|
+ margin-bottom:22px;
|
|
|
+ .null-p{
|
|
|
+ flex:1;
|
|
|
+ }
|
|
|
+ .max-right-big-button{
|
|
|
+ color:#fff;
|
|
|
+ background: #0045AF;
|
|
|
+ -webkit-border-radius: 6px;
|
|
|
+ -moz-border-radius: 6px;
|
|
|
+ border-radius: 6px;
|
|
|
+ width:130px;
|
|
|
+ line-height:40px;
|
|
|
+ text-align: center;
|
|
|
+ font-size:14px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .max-right-big-button:hover{
|
|
|
+ color:#fff;
|
|
|
+ background: #0183FA;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right-big-list-box{
|
|
|
+ flex:1;
|
|
|
+ .for-max-box{
|
|
|
+ .for-big-box{
|
|
|
+ display: flex;
|
|
|
+ border:1px solid #dedede;
|
|
|
+ height:100px;
|
|
|
+ box-shadow: 0px 3px 8px 0px rgba(0,0,0,0.16);
|
|
|
+ margin-bottom:30px;
|
|
|
+ margin-left:36px;
|
|
|
+ border-radius:6px;
|
|
|
+ .for-big-box-left{
|
|
|
+ flex:1;
|
|
|
+ display: flex;
|
|
|
+ .for-img-one{
|
|
|
+ cursor: pointer;
|
|
|
+ height:30px;
|
|
|
+ width:30px;
|
|
|
+ margin:35px 0 0 30px;
|
|
|
+ }
|
|
|
+ .for-text-one{
|
|
|
+ font-size:16px;
|
|
|
+ line-height:100px;
|
|
|
+ margin-left:95px;
|
|
|
+ width:230px;
|
|
|
+ font-weight:500;
|
|
|
+ }
|
|
|
+ .for-img-two{
|
|
|
+ height:48px;
|
|
|
+ width:48px;
|
|
|
+ margin:26px 23px 0 30px;
|
|
|
+ }
|
|
|
+ .for-text-box-one{
|
|
|
+ width:88px;
|
|
|
+ margin-right:73px;
|
|
|
+ p{
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ p:nth-child(1){
|
|
|
+ margin-top:20px;
|
|
|
+ font-size:24px;
|
|
|
+ line-height:30px;
|
|
|
+ color:#0183FA;
|
|
|
+ }
|
|
|
+ p:nth-child(2){
|
|
|
+ margin-top:10px;
|
|
|
+ font-size:16px;
|
|
|
+ line-height:16px;
|
|
|
+ color:#333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .for-img-three{
|
|
|
+ height:48px;
|
|
|
+ width:48px;
|
|
|
+ margin:26px 23px 0 0;
|
|
|
+ }
|
|
|
+ .for-text-box-two{
|
|
|
+ width:88px;
|
|
|
+ p{
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ p:nth-child(1){
|
|
|
+ margin-top:20px;
|
|
|
+ font-size:24px;
|
|
|
+ line-height:30px;
|
|
|
+ color:#0183FA;
|
|
|
+ }
|
|
|
+ p:nth-child(2){
|
|
|
+ margin-top:10px;
|
|
|
+ font-size:16px;
|
|
|
+ line-height:16px;
|
|
|
+ color:#333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .for-button-min-box{
|
|
|
+ width:220px;
|
|
|
+ margin-top:9px;
|
|
|
+ height:82px;
|
|
|
+ border-left:1px dashed rgba(0,0,0,0.3);
|
|
|
+ display: flex;
|
|
|
+ line-height:82px;
|
|
|
+ div{
|
|
|
+ margin-left: 34px;
|
|
|
+ display: flex;
|
|
|
+ width: 60px;
|
|
|
+ cursor: pointer;
|
|
|
+ img{
|
|
|
+ width:16px;
|
|
|
+ height:16px;
|
|
|
+ margin-right:8px;
|
|
|
+ margin-top:33px;
|
|
|
+ }
|
|
|
+ p{
|
|
|
+ font-size:14px;
|
|
|
+ color:#333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .building-box{
|
|
|
+ flex:1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ overflow: hidden;
|
|
|
+ .max-right-button-box{
|
|
|
+ height:40px;
|
|
|
+ display: flex;
|
|
|
+ margin-bottom:22px;
|
|
|
+ .null-p{
|
|
|
+ flex:1;
|
|
|
+ }
|
|
|
+ .max-right-big-button{
|
|
|
+ color:#fff;
|
|
|
+ background: #0045AF;
|
|
|
+ -webkit-border-radius: 6px;
|
|
|
+ -moz-border-radius: 6px;
|
|
|
+ border-radius: 6px;
|
|
|
+ width:130px;
|
|
|
+ line-height:40px;
|
|
|
+ text-align: center;
|
|
|
+ font-size:14px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .max-right-big-button:hover{
|
|
|
+ color:#fff;
|
|
|
+ background: #0183FA;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right-big-list-box{
|
|
|
+ flex:1;
|
|
|
+ .for-max-box{
|
|
|
+ margin-bottom:30px;
|
|
|
+ .for-big-box{
|
|
|
+ display: flex;
|
|
|
+ border:1px solid #dedede;
|
|
|
+ height:100px;
|
|
|
+ box-shadow: 0px 3px 8px 0px rgba(0,0,0,0.16);
|
|
|
+ margin-left:36px;
|
|
|
+ border-radius:6px;
|
|
|
+ .for-big-box-left{
|
|
|
+ flex:1;
|
|
|
+ display: flex;
|
|
|
+ .for-img-one{
|
|
|
+ cursor: pointer;
|
|
|
+ height:30px;
|
|
|
+ width:30px;
|
|
|
+ margin:35px 0 0 30px;
|
|
|
+ }
|
|
|
+ .for-text-one{
|
|
|
+ font-size:16px;
|
|
|
+ line-height:100px;
|
|
|
+ margin-left:95px;
|
|
|
+ width:230px;
|
|
|
+ font-weight:500;
|
|
|
+ }
|
|
|
+ .for-img-two{
|
|
|
+ height:48px;
|
|
|
+ width:48px;
|
|
|
+ margin:26px 23px 0 30px;
|
|
|
+ }
|
|
|
+ .for-text-box-one{
|
|
|
+ width:88px;
|
|
|
+ margin-right:73px;
|
|
|
+ p{
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ p:nth-child(1){
|
|
|
+ margin-top:20px;
|
|
|
+ font-size:24px;
|
|
|
+ line-height:30px;
|
|
|
+ color:#0183FA;
|
|
|
+ }
|
|
|
+ p:nth-child(2){
|
|
|
+ margin-top:10px;
|
|
|
+ font-size:16px;
|
|
|
+ line-height:16px;
|
|
|
+ color:#333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .for-img-three{
|
|
|
+ height:48px;
|
|
|
+ width:48px;
|
|
|
+ margin:26px 23px 0 0;
|
|
|
+ }
|
|
|
+ .for-text-box-two{
|
|
|
+ width:88px;
|
|
|
+ p{
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ p:nth-child(1){
|
|
|
+ margin-top:20px;
|
|
|
+ font-size:24px;
|
|
|
+ line-height:30px;
|
|
|
+ color:#0183FA;
|
|
|
+ }
|
|
|
+ p:nth-child(2){
|
|
|
+ margin-top:10px;
|
|
|
+ font-size:16px;
|
|
|
+ line-height:16px;
|
|
|
+ color:#333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .for-button-min-box{
|
|
|
+ width:330px;
|
|
|
+ margin-top:9px;
|
|
|
+ height:82px;
|
|
|
+ border-left:1px dashed rgba(0,0,0,0.3);
|
|
|
+ display: flex;
|
|
|
+ line-height:82px;
|
|
|
+ div{
|
|
|
+ margin-left: 34px;
|
|
|
+ display: flex;
|
|
|
+ width: 60px;
|
|
|
+ cursor: pointer;
|
|
|
+ img{
|
|
|
+ width:16px;
|
|
|
+ height:16px;
|
|
|
+ margin-right:8px;
|
|
|
+ margin-top:33px;
|
|
|
+ }
|
|
|
+ p{
|
|
|
+ font-size:14px;
|
|
|
+ color:#333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .floor-box{
|
|
|
+ flex:1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ overflow: hidden;
|
|
|
+ .map-max-big-box{
|
|
|
+ height:400px;
|
|
|
+ position:relative;
|
|
|
+ border:1px solid #E0E0E0;
|
|
|
+ margin-bottom:20px;
|
|
|
+ margin-left:36px;
|
|
|
+ .position-button-p{
|
|
|
+ position:absolute;
|
|
|
+ right:12px;
|
|
|
+ top:13px;
|
|
|
+ width:100px;
|
|
|
+ line-height:40px;
|
|
|
+ font-size:14px;
|
|
|
+ color:#fff;
|
|
|
+ background: #0045AF;
|
|
|
+ border-radius:6px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .table-box{
|
|
|
+ margin-left:36px;
|
|
|
+ flex:1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
zhouchong
