zc

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

@@ -1,18 +1,32 @@
 <template>
   <div class="buildingDetails">
     <div class="buildingDetails-page">
-      <div class="max-left-box-one" v-if="!mapSrc">
-
-      </div>
-      <div class="max-left-box" v-show="mapSrc">
-        <div class="max-left-button-box">
+      <div class="max-left-box">
+        <div class="max-left-box-one" v-if="!mapSrc">
+          <div class="max-button-big-position-box">
+            <img src="@/assets/ZDimages/evacuation3_2/img_xgbj_syl.png">
+            <el-upload
+              class="up-img-button-box"
+              style="height:40px;width:300px;"
+              :action="uploadImgUrl"
+              :show-file-list="false"
+              accept="image/png"
+              :on-success="(res, file)=>handleAvatarSuccess(res, file,1)"
+              :headers="headers"
+              :before-upload="beforeAvatarUpload">
+              <p class="up-img-button">+  上传图片</p>
+            </el-upload>
+            <p class="up-img-text">请点击上传图片按钮上传实验室楼层布局参考图</p>
+          </div>
+        </div>
+        <div class="max-left-button-box" v-show="mapSrc">
           <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)"
+            :on-success="(res, file)=>handleAvatarSuccess(res, file,2)"
             :headers="headers"
             :before-upload="beforeAvatarUpload">
             <p style="margin:0;">更换图纸</p>
@@ -23,7 +37,7 @@
             <p @click="opacityClick(2)">+</p>
           </div>
         </div>
-        <div class="max-left-map-big-box scrollbar-box" ref="maxBigBox">
+        <div class="max-left-map-big-box scrollbar-box" ref="maxBigBox" v-show="mapSrc">
           <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"
@@ -42,7 +56,7 @@
                    @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)"
+                     @contextmenu="(contextmenu)=>boxRightClick(contextmenu,item,index)"
                      @mousedown.stop="(MouseEvent)=>dragDown(MouseEvent,index)">
                   {{item.type == 1?'实验室':(item.type == 2?'':'')}}
                 </div>
@@ -60,6 +74,7 @@
               <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"
+                 @contextmenu.stop="(contextmenu)=>boxRightClick(contextmenu,minItem,index,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>
@@ -114,6 +129,78 @@
         </div>
       </div>
     </div>
+    <!--右键-->
+    <div class="map-shade-max-big-box" v-if="mouseType != 0" @click="offMapShade">
+      <div class="map-shade-big-box" :style="'top:'+mouseY+'px;left:'+mouseX+'px;'">
+        <p class="shade-button-p" v-if="mouseType == 1 || mouseType == 6" @click="clickShadeButton(1)">编辑</p>
+        <p class="shade-border-p" v-if="mouseType == 1 || mouseType == 6"></p>
+        <p class="shade-button-p" @click="clickShadeButton(2)">删除</p>
+      </div>
+    </div>
+    <!--房间/灯设置-->
+    <el-dialog :title="dialogOpenType==1?'新增房间':(dialogOpenType==6?'新增指示灯':'')" :visible.sync="dialogOpen" v-if="dialogOpen" width="600px" append-to-body>
+      <el-form ref="dialogForm" :model="dialogForm" :rules="rules" label-width="120px">
+        <div v-if="dialogOpenType == 1">
+          <el-form-item label="房间类型：" prop="name" style="width:398px;">
+            <el-select v-model="dialogData.state" placeholder="请选择房间类型">
+              <el-option
+                v-for="item in roomOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="房间选择：" prop="name" style="width:398px;">
+            <el-select v-model="dialogData.state" placeholder="请选择实验室">
+              <el-option
+                v-for="item in roomOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="房间编号：" prop="name" style="width:398px;">
+            <el-input v-model="dialogForm.name" placeholder="请输入传感器名称" maxlength="20" />
+          </el-form-item>
+          <el-form-item label="房间名称：" prop="name" style="width:398px;">
+            <el-input v-model="dialogForm.name" placeholder="请输入房间名称" maxlength="20" />
+          </el-form-item>
+        </div>
+        <div v-if="dialogOpenType == 6">
+          <el-form-item label="继电器类型：" prop="name">
+            <el-radio-group v-model="dialogForm.state" style="margin-top:4px;">
+              <el-radio :label="1">新版继电器</el-radio>
+              <el-radio :label="2">老版继电器</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="继电器参数：" prop="name" style="width:398px;">
+            <el-input v-model="dialogForm.name" placeholder="请输入继电器参数" maxlength="20" />
+          </el-form-item>
+          <el-form-item label="状态参数：" prop="name" style="width:398px;">
+            <el-input v-model="dialogForm.name" placeholder="请输入状态参数" maxlength="20" />
+          </el-form-item>
+          <el-form-item label="指示灯类型：" prop="name">
+            <el-radio-group v-model="dialogForm.state" style="margin-top:4px;">
+              <el-radio :label="1">左指示灯</el-radio>
+              <el-radio :label="2">右指示灯</el-radio>
+              <el-radio :label="3">上指示灯</el-radio>
+              <el-radio :label="4">下指示灯</el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </div>
+      </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="buttonSetButton">取消</p>
+          <p style="cursor:pointer;border-radius:6px;width:70px;line-height:30px;font-size:12px;text-align:center;color:#fff;background:#0045AF;" @click="buttonSetButton">确定</p>
+          <p style="flex:1;"></p>
+        </div>
+      </div>
+    </el-dialog>
+    <!--引导遮罩层-->
     <div class="shade-max-big-box"
          v-if="shadeBoxType != 0">
       <div v-if="shadeBoxType == 1" class="shade-max-box-1">
@@ -204,11 +291,11 @@
         minWidth:100,
         maxWidth:800,
         //门尺寸数据
-        minDoorNum:25,
-        maxDoorNum:25,
+        minDoorNum:34,
+        maxDoorNum:34,
         //灯尺寸数据
-        minLightNum:20,
-        maxLightNum:20,
+        minLightNum:40,
+        maxLightNum:40,
         //交通点检测时触手范围
         tentaclesLength:10,
         //房间数据
@@ -257,9 +344,10 @@
           },
         ],
         //************************弹层开关*******************************//
-        shadeBoxType:1,
+        shadeBoxType:0,
         //************************灯设置数据*******************************//
-        dialogOpen:false,
+        dialogOpen:0,
+        dialogOpenType:0,
         dialogIndex:null,
         dialogMinIndex:null,
         dialogData:{},
@@ -290,7 +378,65 @@
         //鼠标右键抓取坐标
         mouseX:null,
         mouseY:null,
-        mouseType:false,
+        mouseType:0,
+        //房间类型列表
+        roomOptions:[
+          {
+            value: '1',
+            label: '实验室'
+          },
+          {
+            value: '2',
+            label: '气瓶间'
+          },
+          {
+            value: '3',
+            label: '试剂仓库'
+          },
+          {
+            value: '4',
+            label: '机房'
+          },
+          {
+            value: '0',
+            label: '其他'
+          },
+        ],
+        rules:{
+          txt:[
+            {required: true, message: '请选择房间类型', trigger: 'blur'},
+            { required: true, message: "请选择房间类型", validator: this.spaceJudgment, trigger: "blur" }
+          ],
+          txt2:[
+            {required: true, message: '请选择实验室', trigger: 'blur'},
+            { required: true, message: "请选择实验室", validator: this.spaceJudgment, trigger: "blur" }
+          ],
+          txt3:[
+            {required: true, message: '请输入传感器名称', trigger: 'blur'},
+            { required: true, message: "请输入传感器名称", validator: this.spaceJudgment, trigger: "blur" }
+          ],
+          txt4:[
+            {required: true, message: '请输入房间名称', trigger: 'blur'},
+            { required: true, message: "请输入房间名称", validator: this.spaceJudgment, trigger: "blur" }
+          ],
+          txt5:[
+            {required: true, message: '请选择继电器类型', trigger: 'blur'},
+            { required: true, message: "请选择继电器类型", validator: this.spaceJudgment, trigger: "blur" }
+          ],
+          txt6:[
+            {required: true, message: '请输入继电器参数', trigger: 'blur'},
+            { required: true, message: "请输入继电器参数", validator: this.spaceJudgment, trigger: "blur" }
+          ],
+          txt7:[
+            {required: true, message: '请输入状态参数', trigger: 'blur'},
+            { required: true, message: "请输入状态参数", validator: this.spaceJudgment, trigger: "blur" }
+          ],
+          txt8:[
+            {required: true, message: '请选择指示灯类型', trigger: 'blur'},
+            { required: true, message: "请选择指示灯类型", validator: this.spaceJudgment, trigger: "blur" }
+          ],
+        },
+        dialogForm:{},
       }
     },
     created() {
@@ -303,33 +449,67 @@
       /*********************************右键操作事件*********************************/
       //右键事件
       boxRightClick(event,item,index,minIndex){
+        console.log(item.type)
         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,'mouseX',event.clientX)
+          this.$set(this,'mouseY',event.clientY )
+          this.$set(this,'mouseType',6)
+          this.$set(this,'dialogOpenType',6)
+          this.$set(this,'dialogIndex',index)
+          this.$set(this,'dialogMinIndex',minIndex)
+          this.$set(this,'dialogData',JSON.parse(JSON.stringify(item)))
+        }else if(item.type == 'door'){
+          this.$set(this,'mouseX',event.clientX )
+          this.$set(this,'mouseY',event.clientY)
+          this.$set(this,'mouseType',4)
+          this.$set(this,'dialogOpenType',4)
           this.$set(this,'dialogIndex',index)
           this.$set(this,'dialogMinIndex',minIndex)
           this.$set(this,'dialogData',JSON.parse(JSON.stringify(item)))
+        }else if(item.type == '1'){
+          this.$set(this,'mouseX',event.clientX )
+          this.$set(this,'mouseY',event.clientY)
+          this.$set(this,'mouseType',1)
+          this.$set(this,'dialogOpenType',1)
+          this.$set(this,'dialogIndex',index)
+        }else if(item.type == '2'){
+          this.$set(this,'mouseX',event.clientX )
+          this.$set(this,'mouseY',event.clientY)
+          this.$set(this,'mouseType',2)
+          this.$set(this,'dialogOpenType',2)
+          this.$set(this,'dialogIndex',index)
+        }else if(item.type == '3'){
+          this.$set(this,'mouseX',event.clientX )
+          this.$set(this,'mouseY',event.clientY)
+          this.$set(this,'mouseType',3)
+          this.$set(this,'dialogOpenType',3)
+          this.$set(this,'dialogIndex',index)
         }
       },
+      //弹窗确定
+      buttonSetButton(){
+        this.$set(this.mapList[this.dialogIndex].lightList[this.dialogMinIndex],'state',this.dialogData.state);
+        this.dialogOpen = false;
+      },
       //遮罩菜单选中事件
       clickShadeButton(type){
         if(type == 1){
           this.$set(this,'dialogOpen',true)
+        }else if (type == 2){
+          if(this.dialogOpenType == 1 || this.dialogOpenType == 2 || this.dialogOpenType == 3){
+            this.mapList.splice(this.dialogIndex,1)
+          }else if(this.dialogOpenType == 4){
+            this.mapList[this.dialogIndex].doorList.splice(this.dialogMinIndex,1)
+          }else if(this.dialogOpenType == 6){
+            this.mapList[this.dialogIndex].lightList.splice(this.dialogMinIndex,1)
+          }
+          this.$forceUpdate();
         }
-        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;
+        this.$set(this,'mouseType',0)
       },
       /*********************************房间内部移动事件*********************************/
       //门按下时绑定事件
@@ -573,8 +753,8 @@
       },
       internalAddDragStart(e,type){
         e.dataTransfer.setDragImage(type == 4?this.doorImg:(type == 6?this.lightImg:''),
-          type == 4?12:(type == 6?10:''),
-          type == 4?12:(type == 6?10:''));
+          type == 4?17:(type == 6?20:''),
+          type == 4?17:(type == 6?20:''));
         this.$set(this,'grab',type);
       },
       //添加门/灯
@@ -659,6 +839,9 @@
           if(res.data){
             if(res.data.url){
               this.$set(this,'mapSrc',res.data.url)
+              if (type == 1){
+                this.$set(this, 'shadeBoxType', 1);
+              }
             }
           }
         }
@@ -719,19 +902,55 @@
       flex:1;
       display: flex;
       overflow: hidden;
-      .max-left-box-one{
-        flex:1;
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
-        border:1px solid #e0e0e0;
-        margin:22px 0 24px 28px;
-      }
       .max-left-box{
         flex:1;
         display: flex;
         flex-direction: column;
         overflow: hidden;
+        .max-left-box-one{
+          top:0;
+          left:0;
+          flex:1;
+          display: flex;
+          flex-direction: column;
+          overflow: hidden;
+          border:1px solid #e0e0e0;
+          margin:22px 0 24px 28px;
+          position: relative;
+          .max-button-big-position-box{
+            position: absolute;
+            top:50%;
+            left:50%;
+            width:332px;
+            height:370px;
+            margin-left:-166px;
+            margin-top:-185px;
+            img{
+              width:332px;
+              height:248px;
+              -webkit-user-drag:none
+            }
+            .up-img-button-box{
+              height:40px;
+              padding:0;
+              margin:34px 16px 19px 16px;
+              .up-img-button{
+                width:300px;
+                line-height:40px;
+                color:#0183FA;
+                text-align: center;
+                border:1px dashed #0183FA;
+                border-radius:6px;
+              }
+            }
+            .up-img-text{
+              line-height:24px;
+              font-size:15px;
+              color:#333;
+              text-align: center;
+            }
+          }
+        }
         .max-left-button-box{
           display: flex;
           .null-p{
@@ -1219,6 +1438,39 @@
         }
       }
     }
+    .map-shade-max-big-box{
+      z-index:10000;
+      position: fixed;
+      top: 0;
+      left: 0;
+      height:100%;
+      width:100%;
+      .map-shade-big-box{
+        width:80px;
+        position: absolute;
+        border-radius:8px;
+        background: #fff;
+        font-size:12px;
+        font-weight:500;
+        box-shadow: 0 4px 10px 0 rgba(0,0,0,0.302);
+        overflow: hidden;
+        .shade-button-p{
+          height:30px;
+          line-height:30px;
+          text-align: center;
+        }
+        .shade-button-p:hover{
+          color: #fff;
+          background: #00a0e9;
+          cursor: pointer;
+        }
+        .shade-border-p{
+          height:1px;
+          margin:0 10px;
+          background:#E0E0E0;
+        }
+      }
+    }
     .shade-max-big-box{
       z-index:10000;
       width:100%;