zc

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

@@ -20,9 +20,59 @@
             <p @click="opacityClick(2)">+</p>
           </div>
         </div>
-        <div class="max-left-map-big-box scrollbar-box">
+        <div class="max-left-map-big-box scrollbar-box" ref="maxBigBox">
           <div class="left-map-box" ref="maxBox" :style="'width:'+layerWidth+'px;height:'+layerHeight+'px;'">
-
+            <!--循环房间数据-->
+            <div :class="item.type == 2?'for-map-box-one':(item.type == 1?'for-map-box':(item.type == 3?'for-map-box-two':''))" v-for="(item,index) in mapList" :key="index"
+                 ref="moveBox"
+                 :style="'top:'+item.y+'px;left:'+item.x+'px;width:'+item.w+'px;height:'+item.h+'px;'">
+              <div class="top-big-box">
+                <p class="top-left-p"
+                   @mousedown.stop="(MouseEvent)=>zoomDownXY(MouseEvent,index,4)"></p>
+                <p class="top-center-p"
+                   @mousedown.stop="(MouseEvent)=>zoomDownY(MouseEvent,index,1)"></p>
+                <p class="top-right-p"
+                   @mousedown.stop="(MouseEvent)=>zoomDownXY(MouseEvent,index,1)"></p>
+              </div>
+              <div class="center-big-box">
+                <p class="center-left-p"
+                   @mousedown.stop="(MouseEvent)=>zoomDownX(MouseEvent,index,4)"></p>
+                <div class="center-move-box"
+                     :style="'line-height:'+(item.w>item.h?item.h-4:item.w-4)+'px;'"
+                     @contextmenu="(contextmenu)=>boxRightClick(contextmenu,item)"
+                     @mousedown.stop="(MouseEvent)=>dragDown(MouseEvent,index)">
+                  {{item.type == 1?'实验室':(item.type == 2?'':'')}}
+                </div>
+                <p class="center-right-p"
+                   @mousedown.stop="(MouseEvent)=>zoomDownX(MouseEvent,index,2)"></p>
+              </div>
+              <div class="bottom-big-box">
+                <p class="bottom-left-p"
+                   @mousedown.stop="(MouseEvent)=>zoomDownXY(MouseEvent,index,3)"></p>
+                <p class="bottom-center-p"
+                   @mousedown.stop="(MouseEvent)=>zoomDownY(MouseEvent,index,3)"></p>
+                <p class="bottom-right-p"
+                   @mousedown.stop="(MouseEvent)=>zoomDownXY(MouseEvent,index,2)"></p>
+              </div>
+              <p class="center-move-door-p"
+                 :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;'"
+                 @mousedown.stop="(MouseEvent)=>doorDragDown(MouseEvent,index,minIndex)"
+              ></p>
+              <p class="center-move-light-p" v-if="minItem.type != 'light'&&!minItem.openType"
+                 v-for="(minItem,minIndex) in item.lightList" :key="minIndex"
+                 :class="minItem.type == 'lab'?'colorDoor':(minItem.type == 'traffic'?'colorTraffic':(minItem.type == 'connect'?'colorConnect':''))"
+                 :style="'top:'+minItem.y+'px;left:'+minItem.x+'px;width:'+minItem.w+'px;height:'+minItem.h+'px;'"
+              ><span v-for="(optionsItem,optionsIndex) in dialogOptions" v-if="minItem.state == optionsItem.value">{{optionsItem.label}}</span>{{minItem.name}}</p>
+              <p class="center-move-light-p" v-if="minItem.type == 'light'&&!minItem.openType"
+                 v-for="(minItem,minIndex) in item.lightList" :key="minIndex"
+                 @contextmenu.stop="(contextmenu)=>boxRightClick(contextmenu,minItem,index,minIndex)"
+                 :class="minItem.state=='1'?'lightTop':(minItem.state=='2'?'lightBottom':(minItem.state=='3'?'lightLeft':(minItem.state=='4'?'lightRight':'lightNone')))"
+                 :style="'top:'+minItem.y+'px;left:'+minItem.x+'px;width:'+minItem.w+'px;height:'+minItem.h+'px;'"
+                 @mousedown.stop="(MouseEvent)=>lightDragDown(MouseEvent,index,minIndex)"
+              ></p>
+            </div>
           </div>
           <img class="left-map-img" :src="mapSrc" :style="'opacity:'+mapOpacity+';width:'+layerWidth+'px;height:'+layerHeight+'px;'">
         </div>
@@ -39,28 +89,39 @@
           <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">
+              <img
+                draggable="true"
+                @dragstart="(DragEvent)=>externalAddDragStart(DragEvent,item.type)"
+                @dragend="(DragEvent)=>externalAddDragEnd(DragEvent,'2')"
+                :src="item.url">
               <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">
+              <img
+                draggable="true"
+                @dragstart="(DragEvent)=>internalAddDragStart(DragEvent,item.type)"
+                @dragend="(DragEvent)=>internalAddDragEnd(DragEvent,'2')"
+                :src="item.url">
               <p>{{item.name}}</p>
             </div>
           </div>
         </div>
       </div>
     </div>
+    <div class="shade-max-big-box"
+         v-if="shadeBoxType" @click="shadeClick">
+    </div>
   </div>
 </template>
 
 <script>
   import { getToken } from "@/utils/auth";
+  import { checkDoorTo,checkLightDirection,checkRoom,calculateTrafficPoint,addDoorPoint,
+    doorMoveJudge,lightMoveJudge,roomMove,roomAdd,lightAdd,addDoor,fourCornersZoom,
+    fourEdgeZoom,setJsData} from "@/utils/evacuationLayout";
   export default {
     name: "builDingDetails",
     data() {
@@ -113,15 +174,17 @@
           {
             name:"过道",
             type: '2',
-            // url:require('@/assets/login-bg.png'),
+            url:require('@/assets/ZDimages/evacuation3_2/img_xgbj_gd.png'),
           },
           {
             name:"应急出口",
             type: '3',
+            url:require('@/assets/ZDimages/evacuation3_2/img_xgbj_yjck.png'),
           },
           {
             name:"房间",
             type: '1',
+            url:require('@/assets/ZDimages/evacuation3_2/img_xgbj_fj.png'),
           },
         ],
         // 房间内配件列表 //4.房间 6.疏散灯
@@ -129,10 +192,12 @@
           {
             name:"房门",
             type: '4',
+            url:require('@/assets/ZDimages/evacuation3_2/img_xgbj_fjm.png'),
           },
           {
             name:"疏散灯",
             type: '6',
+            url:require('@/assets/ZDimages/evacuation3_2/icon_bjt_ssd.png'),
           },
         ],
         //************************弹层开关*******************************//
@@ -157,6 +222,11 @@
             label: '右'
           },
         ],
+        //拖拽时显示的图片
+        roomImg_1:null,
+        roomImg_2:null,
+        roomImg_3:null,
+
         //选择实验室 下拉列表
         roomSelectList:[],
         roomSelectValue:'',
@@ -173,6 +243,335 @@
 
     },
     methods:{
+      /*********************************右键操作事件*********************************/
+      //右键事件
+      boxRightClick(event,item,index,minIndex){
+        event.returnValue = false;
+        console.log('event',event.clientX);
+        console.log('event',event.clientY);
+        if(item.type == 'light'){
+          this.$set(this,'mouseX',event.clientX - this.borderLeft - this.$refs.maxBigBox.scrollLeft)
+          this.$set(this,'mouseY',event.clientY - this.borderTop - this.$refs.maxBigBox.scrollTop)
+          this.$set(this,'mouseType',true)
+          this.$set(this,'dialogIndex',index)
+          this.$set(this,'dialogMinIndex',minIndex)
+          this.$set(this,'dialogData',JSON.parse(JSON.stringify(item)))
+        }
+      },
+      //遮罩菜单选中事件
+      clickShadeButton(type){
+        if(type == 1){
+          this.$set(this,'dialogOpen',true)
+        }
+        console.log(type)
+      },
+      //关闭下啦遮罩层
+      offMapShade(){
+        this.$set(this,'mouseType',false)
+      },
+      //弹窗确定
+      buttonSetButton(){
+        this.$set(this.mapList[this.dialogIndex].lightList[this.dialogMinIndex],'state',this.dialogData.state);
+        this.dialogOpen = false;
+      },
+      /*********************************房间内部移动事件*********************************/
+      //门按下时绑定事件
+      doorDragDown(e, index, minIndex){
+        if (e.button === 0) {  //0鼠标左键 1中键 2右键
+          this.$set(this, 'clientX', e.clientX);
+          this.$set(this, 'clientY', e.clientY);
+          this.$set(this, 'boxIndex', index);
+          this.$set(this, 'minIndex', minIndex);
+          this.$refs.maxBox.addEventListener('mousemove', this.doorDragMove, false)
+          this.$refs.maxBox.addEventListener('mouseup', this.doorDragUp, false)
+        }
+      },
+      //门弹起时绑定事件
+      doorDragUp(e){
+        if (e.button === 0) {  //0鼠标左键 1中键 2右键
+          this.$refs.maxBox.removeEventListener('mousemove', this.doorDragMove, false)
+          this.$refs.maxBox.removeEventListener('mouseup', this.doorDragUp, false)
+        }
+      },
+      //门移动事件
+      doorDragMove(event){
+        let obj = doorMoveJudge(this.mapList,this.boxIndex,this.minIndex,event,this.$refs.maxBigBox.scrollLeft,this.$refs.maxBigBox.scrollTop);
+        if(obj){
+          let newObj = JSON.parse(JSON.stringify(this.mapList[this.boxIndex].doorList));
+          newObj[this.minIndex] = { type:'door', toward:obj.toward, w:this.maxDoorNum, h:this.minDoorNum, x:obj.x, y:obj.y, }
+          this.$set(this.mapList[this.boxIndex],'doorList',newObj);
+        }
+        //到达边界删除事件
+        if(event.clientX<=(this.borderLeft)||event.clientX>=(this.borderLeft+this.layerWidth-1)||event.clientY<=(this.borderTop)||event.clientY>=(this.borderTop+this.layerHeight-1)){
+          this.$refs.maxBox.removeEventListener('mousemove', this.doorDragMove, false)
+          this.$refs.maxBox.removeEventListener('mouseup', this.doorDragUp, false)
+        }
+      },
+      //灯按下时绑定事件
+      lightDragDown(e, index,minIndex){
+        if (e.button === 0) {  //0鼠标左键 1中键 2右键
+          this.$set(this, 'clientX', e.clientX);
+          this.$set(this, 'clientY', e.clientY);
+          this.$set(this, 'boxIndex', index);
+          this.$set(this, 'minIndex', minIndex);
+          this.$refs.maxBox.addEventListener('mousemove', this.lightDragMove, false)
+          this.$refs.maxBox.addEventListener('mouseup', this.lightDragUp, false)
+        }
+      },
+      //灯弹起时绑定事件
+      lightDragUp(e){
+        if (e.button === 0) {  //0鼠标左键 1中键 2右键
+          this.$refs.maxBox.removeEventListener('mousemove', this.lightDragMove, false)
+          this.$refs.maxBox.removeEventListener('mouseup', this.lightDragUp, false)
+        }
+      },
+      //灯移动事件
+      lightDragMove(event){
+        let obj = lightMoveJudge(this.mapList,this.boxIndex,this.minIndex,event,this.$refs.maxBigBox.scrollLeft,this.$refs.maxBigBox.scrollTop);
+        if(obj){
+          this.$set(this.mapList[this.boxIndex].lightList[this.minIndex],'x',obj.x?obj.x:this.mapList[this.boxIndex].lightList[this.minIndex].x);
+          this.$set(this.mapList[this.boxIndex].lightList[this.minIndex],'y',obj.y?obj.y:this.mapList[this.boxIndex].lightList[this.minIndex].y);
+        }
+        //到达边界删除事件
+        if(event.clientX<=(this.borderLeft)||event.clientX>=(this.borderLeft+this.layerWidth-1)||event.clientY<=(this.borderTop)||event.clientY>=(this.borderTop+this.layerHeight-1)){
+          this.$refs.maxBox.removeEventListener('mousemove', this.lightDragMove, false)
+          this.$refs.maxBox.removeEventListener('mouseup', this.lightDragUp, false)
+        }
+      },
+      /*********************************房间移动事件*********************************/
+      //按下时绑定事件
+      dragDown(e, index) {
+        if (e.button === 0) {  //0鼠标左键 1中键 2右键
+          this.$set(this, 'clientX', e.clientX);
+          this.$set(this, 'clientY', e.clientY);
+          this.$set(this, 'boxIndex', index);
+          this.$refs.maxBox.addEventListener('mousemove', this.dragMove, false)
+          this.$refs.maxBox.addEventListener('mouseup', this.dragUp, false)
+        }
+      },
+      //弹起时删除事件
+      dragUp(e) {
+        if (e.button === 0) {  //0鼠标左键 1中键 2右键
+          this.$refs.maxBox.removeEventListener('mousemove', this.dragMove, false)
+          this.$refs.maxBox.removeEventListener('mouseup', this.dragUp, false)
+        }
+      },
+      //移动事件
+      dragMove(event) {
+        if (event.button === 0) {  //0鼠标左键 1中键 2右键
+          let obj = roomMove(this.mapList,this.boxIndex,this.clientX,this.clientY,event)
+          if(obj.x){
+            this.$set(this.mapList[this.boxIndex], 'x', obj.x)
+          }
+          if (obj.y){
+            this.$set(this.mapList[this.boxIndex], 'y', obj.y)
+          }
+          if(event.clientX<=(this.borderLeft+10)||event.clientX>=(this.borderLeft+this.layerWidth-10)||event.clientY<=(this.borderTop+10)||event.clientY>=(this.borderTop+this.layerHeight-10)){
+            this.$refs.maxBox.removeEventListener('mousemove', this.dragMove, false)
+            this.$refs.maxBox.removeEventListener('mouseup', this.dragUp, false)
+          }
+          this.$set(this, 'clientX', event.clientX);
+          this.$set(this, 'clientY', event.clientY);
+        }
+      },
+      /*********************************尺寸调整事件X,Y*********************************/
+      //四角-按下时绑定事件
+      zoomDownXY(e, index, type){
+        if (e.button === 0) {  //0鼠标左键 1中键 2右键
+          this.$set(this, 'clientX', e.clientX);
+          this.$set(this, 'clientY', e.clientY);
+          this.$set(this, 'boxIndex', index);
+          this.$set(this, 'moveType', type);
+          this.$refs.maxBox.addEventListener('mousemove', this.zoomMoverXY, false)
+          this.$refs.maxBox.addEventListener('mouseup', this.zoomUpXY, false)
+        }
+      },
+      //四角-弹起时删除事件
+      zoomUpXY(e){
+        if (e.button === 0) {  //0鼠标左键 1中键 2右键
+          this.$refs.maxBox.removeEventListener('mousemove', this.zoomMoverXY, false)
+          this.$refs.maxBox.removeEventListener('mouseup', this.zoomMoverXY, false)
+        }
+      },
+      //四角-拖拽事件
+      zoomMoverXY(event){
+        // moveType 1.上/右上 2.右/右下 3.下/左下 4.左/左上
+        if(event.button === 0){
+          let obj = fourCornersZoom(this.mapList,this.boxIndex,event,this.clientX,this.clientY,this.moveType);
+          if(obj){
+            this.$set(this.mapList[this.boxIndex],'x',obj.x?obj.x:this.mapList[this.boxIndex].x);
+            this.$set(this.mapList[this.boxIndex],'y',obj.y?obj.y:this.mapList[this.boxIndex].y);
+            this.$set(this.mapList[this.boxIndex],'w',obj.w?obj.w:this.mapList[this.boxIndex].w);
+            this.$set(this.mapList[this.boxIndex],'h',obj.h?obj.h:this.mapList[this.boxIndex].h);
+            if(this.mapList[this.boxIndex].type == '1' || this.mapList[this.boxIndex].type == '3'){
+              this.$set(this.mapList[this.boxIndex],'doorList',obj.doorList?obj.doorList:this.mapList[this.boxIndex].doorList);
+            }if(this.mapList[this.boxIndex].type == '2'){
+              this.$set(this.mapList[this.boxIndex],'lightList',obj.lightList?obj.lightList:this.mapList[this.boxIndex].lightList);
+            }
+            //到达边界删除事件
+            if(event.clientX<=(this.borderLeft)||event.clientX>=(this.borderLeft+this.layerWidth-1)||event.clientY<=(this.borderTop)||event.clientY>=(this.borderTop+this.layerHeight-1)){
+              this.$refs.maxBox.removeEventListener('mousemove', this.zoomMoverXY, false)
+              this.$refs.maxBox.removeEventListener('mouseup', this.zoomMoverXY, false)
+            }
+            this.$set(this, 'clientX', event.clientX);
+            this.$set(this, 'clientY', event.clientY);
+          }
+        }
+      },
+      /*********************************尺寸调整事件X*********************************/
+      //左右边框-按下时绑定事件
+      zoomDownX(e, index, type){
+        if (e.button === 0) {  //0鼠标左键 1中键 2右键
+          this.$set(this, 'clientX', e.clientX);
+          this.$set(this, 'clientY', e.clientY);
+          this.$set(this, 'boxIndex', index);
+          this.$set(this, 'moveType', type);
+          this.$refs.maxBox.addEventListener('mousemove', this.zoomMoverX, false)
+          this.$refs.maxBox.addEventListener('mouseup', this.zoomUpX, false)
+        }
+      },
+      //左右边框-弹起时删除事件
+      zoomUpX(e){
+        if (e.button === 0) {  //0鼠标左键 1中键 2右键
+          this.$refs.maxBox.removeEventListener('mousemove', this.zoomMoverX, false)
+          this.$refs.maxBox.removeEventListener('mouseup', this.zoomMoverX, false)
+        }
+      },
+      //左右边框-拖拽事件
+      zoomMoverX(e){
+        if (e.button === 0) {  //0鼠标左键 1中键 2右键
+          let obj = fourEdgeZoom(this.mapList,this.boxIndex,e,this.clientX,this.clientY,this.moveType);
+          if(obj){
+            this.$set(this.mapList[this.boxIndex],'x',obj.x?obj.x:this.mapList[this.boxIndex].x);
+            this.$set(this.mapList[this.boxIndex],'w',obj.w?obj.w:this.mapList[this.boxIndex].w);
+            if(this.mapList[this.boxIndex].type == '1' || this.mapList[this.boxIndex].type == '3'){
+              this.$set(this.mapList[this.boxIndex],'doorList',obj.doorList?obj.doorList:this.mapList[this.boxIndex].doorList);
+            }if(this.mapList[this.boxIndex].type == '2'){
+              this.$set(this.mapList[this.boxIndex],'lightList',obj.lightList?obj.lightList:this.mapList[this.boxIndex].lightList);
+            }
+            //到达边界删除事件
+            if(e.clientX<=(this.borderLeft)||e.clientX>=(this.borderLeft+this.layerWidth-1)||e.clientY<=(this.borderTop)||e.clientY>=(this.borderTop+this.layerHeight-1)){
+              this.$refs.maxBox.removeEventListener('mousemove', this.zoomMoverX, false)
+              this.$refs.maxBox.removeEventListener('mouseup', this.zoomMoverX, false)
+            }
+            this.$set(this, 'clientX', e.clientX);
+          }
+        }
+      },
+      /*********************************尺寸调整事件Y*********************************/
+      //上下边框-按下时绑定事件
+      zoomDownY(e, index, type){
+        if (e.button === 0) {  //0鼠标左键 1中键 2右键
+          this.$set(this, 'clientX', e.clientX);
+          this.$set(this, 'clientY', e.clientY);
+          this.$set(this, 'boxIndex', index);
+          this.$set(this, 'moveType', type);
+          this.$refs.maxBox.addEventListener('mousemove', this.zoomMoverY, false)
+          this.$refs.maxBox.addEventListener('mouseup', this.zoomUpY, false)
+        }
+      },
+      //上下边框-弹起时删除事件
+      zoomUpY(e){
+        if (e.button === 0) {  //0鼠标左键 1中键 2右键
+          this.$refs.maxBox.removeEventListener('mousemove', this.zoomMoverY, false)
+          this.$refs.maxBox.removeEventListener('mouseup', this.zoomMoverY, false)
+        }
+      },
+      //上下边框-拖拽事件
+      zoomMoverY(e){
+        if (e.button === 0) {  //0鼠标左键 1中键 2右键
+          let obj = fourEdgeZoom(this.mapList,this.boxIndex,e,this.clientX,this.clientY,this.moveType);
+          if(obj){
+            this.$set(this.mapList[this.boxIndex],'y',obj.y?obj.y:this.mapList[this.boxIndex].y);
+            this.$set(this.mapList[this.boxIndex],'h',obj.h?obj.h:this.mapList[this.boxIndex].h);
+            if(this.mapList[this.boxIndex].type == '1' || this.mapList[this.boxIndex].type == '3'){
+              this.$set(this.mapList[this.boxIndex],'doorList',obj.doorList?obj.doorList:this.mapList[this.boxIndex].doorList);
+            }if(this.mapList[this.boxIndex].type == '2'){
+              this.$set(this.mapList[this.boxIndex],'lightList',obj.lightList?obj.lightList:this.mapList[this.boxIndex].lightList);
+            }
+            //到达边界删除事件
+            if(e.clientX<=(this.borderLeft)||e.clientX>=(this.borderLeft+this.layerWidth-1)||e.clientY<=(this.borderTop)||e.clientY>=(this.borderTop+this.layerHeight-1)){
+              this.$refs.maxBox.removeEventListener('mousemove', this.zoomMoverY, false)
+              this.$refs.maxBox.removeEventListener('mouseup', this.zoomMoverY, false)
+            }
+            this.$set(this, 'clientY', e.clientY);
+          }
+        }
+      },
+      /*********************************添加拖拽逻辑*********************************/
+      externalAddDragStart(e,type){
+        e.dataTransfer.setDragImage(type == 1?this.roomImg_1:(type == 2?this.roomImg_2:(type == 3?this.roomImg_3:'')), 48, 48);
+        this.$set(this,'grab',type);
+      },
+      //添加房间
+      externalAddDragEnd(e){
+        let obj = roomAdd(e,this.mapList,this.grab,this.$refs.maxBigBox.scrollLeft,this.$refs.maxBigBox.scrollTop);
+        if(obj){
+          this.mapList.push(obj);
+        }
+      },
+      internalAddDragStart(e,type){
+        this.$set(this,'grab',type);
+      },
+      //添加门/灯
+      internalAddDragEnd(event){
+        if(this.grab == 4){
+          let obj = addDoor(event,this.mapList,this.$refs.maxBigBox.scrollLeft,this.$refs.maxBigBox.scrollTop,this.grab);
+          if (obj){
+            this.mapList[obj.index].doorList.push({
+              type:obj.type,
+              toward:obj.toward,
+              w:obj.w,
+              h:obj.h,
+              x:obj.x,
+              y:obj.y,
+            });
+          }
+        }else if(this.grab == 6){
+          let obj = lightAdd(event,this.$refs.maxBigBox.scrollLeft,this.$refs.maxBigBox.scrollTop,this.mapList,this.grab);
+          if (obj){
+            this.mapList[obj.index].lightList.push({
+              type:obj.type,
+              state:obj.state,
+              w:obj.w,
+              h:obj.h,
+              x:obj.x,
+              y:obj.y,
+            });
+          }
+        }
+      },
+      /*********************************画布坐标矫正相关******************************/
+      //矫正边界坐标
+      shadeClick(e){
+        //初始化抓取图样
+        this.roomImg_1 = new Image();
+        this.roomImg_1.src = require('@/assets/ZDimages/evacuation3_2/romm_1.png');
+        this.roomImg_2 = new Image();
+        this.roomImg_2.src = require('@/assets/ZDimages/evacuation3_2/romm_2.png');
+        this.roomImg_3 = new Image();
+        this.roomImg_3.src = require('@/assets/ZDimages/evacuation3_2/romm_3.png');
+
+        this.$set(this,'borderLeft', Math.round(this.$refs.maxBigBox.getBoundingClientRect().left));
+        this.$set(this,'borderTop', Math.round(this.$refs.maxBigBox.getBoundingClientRect().top));
+        this.$set(this, 'shadeBoxType', false);
+        let data = {
+          borderLeft : this.borderLeft,
+          borderTop : this.borderTop,
+          layerWidth : this.layerWidth,
+          layerHeight : this.layerHeight,
+          minHeight : this.minHeight,
+          maxHeight : this.maxHeight,
+          minWidth : this.minWidth,
+          maxWidth : this.maxWidth,
+          minDoorNum : this.minDoorNum,
+          maxDoorNum : this.maxDoorNum,
+          minLightNum : this.minLightNum,
+          maxLightNum : this.maxLightNum,
+          tentaclesLength : this.tentaclesLength,
+        }
+        setJsData(data);
+      },
       //透明度调整
       opacityClick(type){
         if(type == 1){
@@ -244,6 +643,7 @@
     display: flex!important;
     flex-direction: column;
     overflow: hidden;
+    position: relative;
     *{
       margin:0;
       font-weight:500;
@@ -256,6 +656,7 @@
         flex:1;
         display: flex;
         flex-direction: column;
+        overflow: hidden;
         .max-left-button-box{
           display: flex;
           .null-p{
@@ -303,11 +704,372 @@
           border:1px solid #e0e0e0;
           position: relative;
           .left-map-box{
-            position: absolute;
-            left:0;
-            top:0;
             z-index:10;
             color:#fff;
+            border: 1px solid #dedede;
+            position: relative;
+            .for-map-box:hover{
+              .top-big-box{
+                background: #CEF2FD!important;
+              }
+              .center-left-p{
+                background: #CEF2FD!important;
+              }
+              .center-right-p{
+                background: #CEF2FD!important;
+              }
+              .bottom-big-box{
+                background: #CEF2FD!important;
+              }
+            }
+            .for-map-box {
+              user-select: none;//解决偶发性拖拽时鼠标变成禁止符号导致拖拽回弹失效
+              position: absolute;
+              display: flex;
+              flex-direction: column;
+              background: #CEF2FD;
+              .top-big-box{
+                display: flex;
+                height:2px;
+                background: #fff;
+                .top-left-p{
+                  width:2px;
+                  cursor: se-resize;
+                }
+                .top-center-p{
+                  flex:1;
+                  cursor: n-resize;
+                }
+                .top-right-p{
+                  width:2px;
+                  cursor: ne-resize;
+                }
+              }
+              .center-big-box{
+                flex:1;
+                display: flex;
+                .center-left-p{
+                  width:2px;
+                  background: #fff;
+                  cursor: w-resize;
+                }
+                .center-move-box{
+                  flex:1;
+                  /*cursor: move;*/
+                  cursor: pointer;
+                  text-align: center;
+                }
+                .center-right-p{
+                  width:2px;
+                  background: #fff;
+                  cursor: w-resize;
+                }
+              }
+              .bottom-big-box{
+                display: flex;
+                height:2px;
+                background: #fff;
+                .bottom-left-p{
+                  width:2px;
+                  cursor: ne-resize;
+                }
+                .bottom-center-p{
+                  flex:1;
+                  cursor: n-resize;
+                }
+                .bottom-right-p{
+                  width:2px;
+                  cursor: se-resize;
+                }
+              }
+              .center-move-door-p{
+                position: absolute;
+                background: #0183fa;
+              }
+              .center-move-light-p{
+                position: absolute;
+                background: #00ff00;
+                font-size:12px;
+                font-weight:500;
+              }
+              .lightNone{
+                background: url("../../../../assets/ZDimages/evacuation3_2/icon_fxyj_wszys.png");
+                background-size: 100%;
+              }
+              .lightTop{
+                background: url("../../../../assets/ZDimages/evacuation3_2/icon_sjt.png");
+                background-size: 100%;
+              }
+              .lightBottom{
+                background: url("../../../../assets/ZDimages/evacuation3_2/icon_xjt.png");
+                background-size: 100%;
+              }
+              .lightLeft{
+                background: url("../../../../assets/ZDimages/evacuation3_2/icon_zuo.png");
+                background-size: 100%;
+              }
+              .lightRight{
+                background: url("../../../../assets/ZDimages/evacuation3_2/icon_yuo.png");
+                background-size: 100%;
+              }
+              .colorDoor{
+                background: red!important;
+              }
+              .colorTraffic{
+                background: #0183fa!important;
+              }
+              .colorConnect{
+                background: #A11DDF!important;
+              }
+            }
+            .for-map-box-one {
+              user-select: none;//解决偶发性拖拽时鼠标变成禁止符号导致拖拽回弹失效
+              position: absolute;
+              display: flex;
+              flex-direction: column;
+              background: #CEFDD5;
+              .top-big-box{
+                display: flex;
+                height:2px;
+                /*background: #0183fa;*/
+                .top-left-p{
+                  width:2px;
+                  cursor: se-resize;
+                }
+                .top-center-p{
+                  flex:1;
+                  cursor: n-resize;
+                }
+                .top-right-p{
+                  width:2px;
+                  cursor: ne-resize;
+                }
+              }
+              .center-big-box{
+                flex:1;
+                display: flex;
+                .center-left-p{
+                  width:2px;
+                  /*background: #0183fa;*/
+                  cursor: w-resize;
+                }
+                .center-move-box{
+                  flex:1;
+                  /*cursor: move;*/
+                  cursor: pointer;
+                  text-align: center;
+                }
+                .center-right-p{
+                  width:2px;
+                  /*background: #0183fa;*/
+                  cursor: w-resize;
+                }
+              }
+              .bottom-big-box{
+                display: flex;
+                height:2px;
+                /*background: #0183fa;*/
+                .bottom-left-p{
+                  width:2px;
+                  cursor: ne-resize;
+                }
+                .bottom-center-p{
+                  flex:1;
+                  cursor: n-resize;
+                }
+                .bottom-right-p{
+                  width:2px;
+                  cursor: se-resize;
+                }
+              }
+              .center-move-door-p{
+                position: absolute;
+                background: #0183fa;
+              }
+              .center-move-light-p{
+                position: absolute;
+                background: #00ff00;
+                font-size:12px;
+                font-weight:500;
+              }
+              .lightNone{
+                background: url("../../../../assets/ZDimages/evacuation3_2/icon_fxyj_wszys.png");
+                background-size: 100%;
+              }
+              .lightTop{
+                background: url("../../../../assets/ZDimages/evacuation3_2/icon_sjt.png");
+                background-size: 100%;
+              }
+              .lightBottom{
+                background: url("../../../../assets/ZDimages/evacuation3_2/icon_xjt.png");
+                background-size: 100%;
+              }
+              .lightLeft{
+                background: url("../../../../assets/ZDimages/evacuation3_2/icon_zuo.png");
+                background-size: 100%;
+              }
+              .lightRight{
+                background: url("../../../../assets/ZDimages/evacuation3_2/icon_yuo.png");
+                background-size: 100%;
+              }
+              .colorDoor{
+                background: red!important;
+              }
+              .colorTraffic{
+                background: #0183fa!important;
+              }
+              .colorConnect{
+                background: #A11DDF!important;
+              }
+            }
+            .for-map-box-two {
+              user-select: none;//解决偶发性拖拽时鼠标变成禁止符号导致拖拽回弹失效
+              position: absolute;
+              display: flex;
+              flex-direction: column;
+              background:url("../../../../assets/ZDimages/evacuation3_2/icon_yjtd.png") center center no-repeat #39AE36;
+              background-size: 60px 60px;
+              .top-big-box{
+                display: flex;
+                height:2px;
+                /*background: #0183fa;*/
+                background: #fff;
+                .top-left-p{
+                  width:2px;
+                  cursor: se-resize;
+                }
+                .top-center-p{
+                  flex:1;
+                  cursor: n-resize;
+                }
+                .top-right-p{
+                  width:2px;
+                  cursor: ne-resize;
+                }
+              }
+              .center-big-box{
+                flex:1;
+                display: flex;
+                .center-left-p{
+                  width:2px;
+                  /*background: #0183fa;*/
+                  background: #fff;
+                  cursor: w-resize;
+                }
+                .center-move-box{
+                  flex:1;
+                  /*cursor: move;*/
+                  cursor: pointer;
+                  text-align: center;
+                }
+                .center-right-p{
+                  width:2px;
+                  /*background: #0183fa;*/
+                  background: #fff;
+                  cursor: w-resize;
+                }
+              }
+              .bottom-big-box{
+                display: flex;
+                height:2px;
+                /*background: #0183fa;*/
+                background: #fff;
+                .bottom-left-p{
+                  width:2px;
+                  cursor: ne-resize;
+                }
+                .bottom-center-p{
+                  flex:1;
+                  cursor: n-resize;
+                }
+                .bottom-right-p{
+                  width:2px;
+                  cursor: se-resize;
+                }
+              }
+              .center-move-door-p{
+                position: absolute;
+                background: #0183fa;
+              }
+              .center-move-light-p{
+                position: absolute;
+                background: #00ff00;
+                font-size:12px;
+                font-weight:500;
+              }
+              .lightNone{
+                background: url("../../../../assets/ZDimages/evacuation3_2/icon_fxyj_wszys.png");
+                background-size: 100%;
+              }
+              .lightTop{
+                background: url("../../../../assets/ZDimages/evacuation3_2/icon_sjt.png");
+                background-size: 100%;
+              }
+              .lightBottom{
+                background: url("../../../../assets/ZDimages/evacuation3_2/icon_xjt.png");
+                background-size: 100%;
+              }
+              .lightLeft{
+                background: url("../../../../assets/ZDimages/evacuation3_2/icon_zuo.png");
+                background-size: 100%;
+              }
+              .lightRight{
+                background: url("../../../../assets/ZDimages/evacuation3_2/icon_yuo.png");
+                background-size: 100%;
+              }
+              .colorDoor{
+                background: red!important;
+              }
+              .colorTraffic{
+                background: #0183fa!important;
+              }
+              .colorConnect{
+                background: #A11DDF!important;
+              }
+              .for-map-box-two-img{
+                position: absolute;
+                top:50%;
+                left:50%;
+                margin-left:-30px;
+                margin-top:-30px;
+                width:60px;
+                height:60px;
+
+              }
+            }
+            .for-map-box-two:hover{
+              .top-big-box{
+                background: #39AE36!important;
+              }
+              .center-left-p{
+                background: #39AE36!important;
+              }
+              .center-right-p{
+                background: #39AE36!important;
+              }
+              .bottom-big-box{
+                background: #39AE36!important;
+              }
+            }
+            .center-move-door-p-t{
+              background: url("../../../../assets/ZDimages/evacuation3_2/icon_sysbjt_m.png")!important;
+              background-size: 100%!important;
+              transform: rotate(180deg);
+            }
+            .center-move-door-p-b{
+              background: url("../../../../assets/ZDimages/evacuation3_2/icon_sysbjt_m.png")!important;
+              background-size: 100%!important;
+            }
+            .center-move-door-p-l{
+              background: url("../../../../assets/ZDimages/evacuation3_2/icon_sysbjt_m.png")!important;
+              background-size: 100%!important;
+              transform: rotate(90deg);
+            }
+            .center-move-door-p-r{
+              background: url("../../../../assets/ZDimages/evacuation3_2/icon_sysbjt_m.png")!important;
+              background-size: 100%!important;
+              transform: rotateZ(270deg);
+            }
           }
           .left-map-img{
             position: absolute;
@@ -382,5 +1144,14 @@
         }
       }
     }
+    .shade-max-big-box{
+      z-index:10000;
+      width:100%;
+      height:100%;
+      position: fixed;
+      top:0;
+      left:0;
+      background: rgba(0,0,0,0.3);
+    }
   }
 </style>