zc

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

@@ -1,7 +1,10 @@
 <template>
   <div class="buildingDetails">
     <div class="buildingDetails-page">
-      <div class="max-left-box">
+      <div class="max-left-box-one" v-if="!mapSrc">
+
+      </div>
+      <div class="max-left-box" v-show="mapSrc">
         <div class="max-left-button-box">
           <p class="null-p"></p>
           <el-upload
@@ -112,7 +115,59 @@
       </div>
     </div>
     <div class="shade-max-big-box"
-         v-if="shadeBoxType" @click="shadeClick">
+         v-if="shadeBoxType != 0">
+      <div v-if="shadeBoxType == 1" class="shade-max-box-1">
+        <img class="shade-big-img" src="@/assets/ZDimages/evacuation3_2/img_znwl_jt.png">
+        <p class="shade-big-1-text-1">更换图纸</p>
+        <div class="shade-big-1-text-2">
+          <p>-</p>
+          <p>透明度：50%</p>
+          <p>+</p>
+        </div>
+        <p class="shade-big-1-text-3">请先行上传图纸，根据图纸进行楼层布局的临摹，能够让绘制的图形更加精准</p>
+        <p class="shade-big-1-text-4">上传图纸的可以修改透明度，如图纸会对绘制产生干扰，则能够将透明度降低方便绘制和临摹。</p>
+        <p class="shade-big-1-text-5" @click="shadeClick(2)">下一步</p>
+      </div>
+      <div v-if="shadeBoxType == 2" class="shade-max-box-2">
+        <img class="shade-big-img" src="@/assets/ZDimages/evacuation3_2/img_znwl_jt.png">
+        <div class="shade-big-1-text-1">
+          <img src="@/assets/ZDimages/evacuation3_2/img_xgbj_gd.png">
+          <p>过道</p>
+        </div>
+        <div class="shade-big-1-text-2">
+          <img src="@/assets/ZDimages/evacuation3_2/img_xgbj_yjck.png">
+          <p>应急出口</p>
+        </div>
+        <div class="shade-big-1-text-3">
+          <img src="@/assets/ZDimages/evacuation3_2/img_xgbj_fj.png">
+          <p>房间</p>
+        </div>
+        <p class="shade-big-1-text-4">过道绘制方法为点击拖拽至绘制区域，鼠标左键选中楼道可以调整过道的位置和尺寸。过道支持与其他过道衔接，衔接办法为选择矩形过道中线上的点位与另外一个矩形过的中线进行结合即可。</p>
+        <p class="shade-big-1-text-5">应急出口为固定尺寸，点击拖拽至绘制区域即可。</p>
+        <p class="shade-big-1-text-6">房间可直接拖拽至绘制区域，鼠标左键选中房间可以调整过道的位置和尺寸。</p>
+        <p class="shade-big-1-text-7" @click="shadeClick(3)">下一步</p>
+      </div>
+      <div v-if="shadeBoxType == 3" class="shade-max-box-3">
+        <img class="shade-big-img" src="@/assets/ZDimages/evacuation3_2/img_znwl_jtt.png">
+        <p class="shade-big-1-text-1">房门为固定尺寸，点击拖拽至绘制区域的房间内即可。</p>
+        <p class="shade-big-1-text-2">疏散灯需要拖拽至绘制区域的走道中，请您确认疏散灯位置尽可能与实际安装位置一致。</p>
+        <p class="shade-big-1-text-3" @click="shadeClick(4)">下一步</p>
+        <div class="shade-big-1-text-4">
+          <img src="@/assets/ZDimages/evacuation3_2/img_xgbj_fj.png">
+          <p>房间</p>
+        </div>
+        <div class="shade-big-1-text-5">
+          <img src="@/assets/ZDimages/evacuation3_2/img_xgbj_fj.png">
+          <p>房间</p>
+        </div>
+      </div>
+      <div v-if="shadeBoxType == 4" class="shade-max-box-4">
+        <div>
+          <p>最后提示：</p>
+          <p>左键选中组件可以调整大小和位置，右键选中组件可以删除组件或编辑组件属性，马上开始绘制布局吧。</p>
+          <p @click="shadeClick(0)">开始绘制</p>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -134,7 +189,8 @@
         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',
+        // mapSrc:'https://img0.baidu.com/it/u=3368678403,249914024&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
+        mapSrc:'',
         /*********************布局设置参数*********************/
         //边界位置
         borderLeft:null,
@@ -201,7 +257,7 @@
           },
         ],
         //************************弹层开关*******************************//
-        shadeBoxType:true,
+        shadeBoxType:1,
         //************************灯设置数据*******************************//
         dialogOpen:false,
         dialogIndex:null,
@@ -226,7 +282,8 @@
         roomImg_1:null,
         roomImg_2:null,
         roomImg_3:null,
-
+        doorImg:null,
+        lightImg:null,
         //选择实验室 下拉列表
         roomSelectList:[],
         roomSelectValue:'',
@@ -500,17 +557,24 @@
       },
       /*********************************添加拖拽逻辑*********************************/
       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);
+        if(this.mapSrc){
+          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);
+        if(this.mapSrc){
+          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){
+        e.dataTransfer.setDragImage(type == 4?this.doorImg:(type == 6?this.lightImg:''),
+          type == 4?12:(type == 6?10:''),
+          type == 4?12:(type == 6?10:''));
         this.$set(this,'grab',type);
       },
       //添加门/灯
@@ -543,7 +607,7 @@
       },
       /*********************************画布坐标矫正相关******************************/
       //矫正边界坐标
-      shadeClick(e){
+      shadeClick(type){
         //初始化抓取图样
         this.roomImg_1 = new Image();
         this.roomImg_1.src = require('@/assets/ZDimages/evacuation3_2/romm_1.png');
@@ -551,10 +615,12 @@
         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.doorImg = new Image();
+        this.doorImg.src = require('@/assets/ZDimages/evacuation3_2/icon_sysbjt_m.png');
+        this.lightImg = new Image();
+        this.lightImg.src = require('@/assets/ZDimages/evacuation3_2/icon_fxyj_wszys.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,
@@ -571,6 +637,7 @@
           tentaclesLength : this.tentaclesLength,
         }
         setJsData(data);
+        this.$set(this, 'shadeBoxType', type);
       },
       //透明度调整
       opacityClick(type){
@@ -652,6 +719,14 @@
       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;
@@ -1151,7 +1226,332 @@
       position: fixed;
       top:0;
       left:0;
-      background: rgba(0,0,0,0.3);
+      background: rgba(0,0,0,0.6);
+      .shade-max-box-1{
+        width:100%;
+        height:100%;
+        position: relative;
+        .shade-big-img{
+          width:126px;
+          height:124px;
+          position: absolute;
+          top:120px;
+          left:1010px;
+        }
+        .shade-big-1-text-1{
+          position: absolute;
+          top:177px;
+          left:1144px;
+          background:#fff;
+          width:120px;
+          line-height:40px;
+          text-align: center;
+          border:1px solid #e0e0e0;
+          border-radius:6px;
+          color:#333;
+          font-size:16px;
+        }
+        .shade-big-1-text-2{
+          display: flex;
+          position: absolute;
+          top:177px;
+          left:1290px;
+          background:#fff;
+          width:210px;
+          line-height:40px;
+          text-align: center;
+          border:1px solid #e0e0e0;
+          border-radius:6px;
+          color:#333;
+          font-size:16px;
+          p:nth-child(1){
+            width:40px;
+          }
+          p:nth-child(2){
+            flex:1;
+            border-left:1px solid #e0e0e0;
+            border-right:1px solid #e0e0e0;
+          }
+          p:nth-child(3){
+            width:40px;
+          }
+        }
+        .shade-big-1-text-3{
+          position: absolute;
+          top:230px;
+          left:780px;
+          color:#fff;
+          width:298px;
+        }
+        .shade-big-1-text-4{
+          position: absolute;
+          top:300px;
+          left:780px;
+          color:#fff;
+          width:298px;
+        }
+        .shade-big-1-text-5{
+          position: absolute;
+          top:395px;
+          left:835px;
+          background:#fff;
+          width:182px;
+          line-height:40px;
+          text-align: center;
+          border:1px solid #e0e0e0;
+          border-radius:6px;
+          color:#333;
+          font-size:16px;
+          cursor: pointer;
+        }
+      }
+      .shade-max-box-2{
+        width:100%;
+        height:100%;
+        position: relative;
+        .shade-big-img{
+          width:126px;
+          height:124px;
+          position: absolute;
+          top:220px;
+          right:370px;
+        }
+        .shade-big-1-text-1{
+          background:#fff;
+          position: absolute;
+          top:286px;
+          right:222px;
+          width:150px;
+          height:160px;
+          border:1px solid #e0e0e0;
+          border-radius:6px;
+          overflow: hidden;
+          img{
+            display: block;
+            width:150px;
+            height:120px;
+          }
+          p{
+            line-height:40px;
+            border-top:1px solid #e0e0e0;
+            text-align: center;
+            font-size:14px;
+          }
+        }
+        .shade-big-1-text-1{
+          background:#fff;
+          position: absolute;
+          top:286px;
+          right:222px;
+          width:150px;
+          height:160px;
+          border:1px solid #e0e0e0;
+          border-radius:6px;
+          overflow: hidden;
+          img{
+            display: block;
+            width:150px;
+            height:120px;
+          }
+          p{
+            line-height:40px;
+            border-top:1px solid #e0e0e0;
+            text-align: center;
+            font-size:14px;
+          }
+        }
+        .shade-big-1-text-2{
+          background:#fff;
+          position: absolute;
+          top:286px;
+          right:52px;
+          width:150px;
+          height:160px;
+          border:1px solid #e0e0e0;
+          border-radius:6px;
+          overflow: hidden;
+          img{
+            display: block;
+            width:150px;
+            height:120px;
+          }
+          p{
+            line-height:40px;
+            border-top:1px solid #e0e0e0;
+            text-align: center;
+            font-size:14px;
+          }
+        }
+        .shade-big-1-text-3{
+          background:#fff;
+          position: absolute;
+          top:470px;
+          right:222px;
+          width:150px;
+          height:160px;
+          border:1px solid #e0e0e0;
+          border-radius:6px;
+          overflow: hidden;
+          img{
+            display: block;
+            width:150px;
+            height:120px;
+          }
+          p{
+            line-height:40px;
+            border-top:1px solid #e0e0e0;
+            text-align: center;
+            font-size:14px;
+          }
+        }
+        .shade-big-1-text-4{
+          position: absolute;
+          top:330px;
+          right:440px;
+          color:#fff;
+          width:298px;
+        }
+        .shade-big-1-text-5{
+          position: absolute;
+          top:460px;
+          right:440px;
+          color:#fff;
+          width:298px;
+        }
+        .shade-big-1-text-6{
+          position: absolute;
+          top:530px;
+          right:440px;
+          color:#fff;
+          width:298px;
+        }
+        .shade-big-1-text-7{
+          position: absolute;
+          top:610px;
+          right:500px;
+          background:#fff;
+          width:182px;
+          line-height:40px;
+          text-align: center;
+          border:1px solid #e0e0e0;
+          border-radius:6px;
+          color:#333;
+          font-size:16px;
+          cursor: pointer;
+        }
+      }
+      .shade-max-box-3{
+        .shade-big-img{
+          width:126px;
+          height:124px;
+          position: absolute;
+          top:670px;
+          right:390px;
+        }
+        .shade-big-1-text-1{
+          position: absolute;
+          top:460px;
+          right:420px;
+          color:#fff;
+          width:298px;
+        }
+        .shade-big-1-text-2{
+          position: absolute;
+          top:540px;
+          right:420px;
+          color:#fff;
+          width:298px;
+        }
+        .shade-big-1-text-3{
+          position: absolute;
+          top:630px;
+          right:480px;
+          background:#fff;
+          width:182px;
+          line-height:40px;
+          text-align: center;
+          border:1px solid #e0e0e0;
+          border-radius:6px;
+          color:#333;
+          font-size:16px;
+          cursor: pointer;
+        }
+        .shade-big-1-text-4{
+          background:#fff;
+          position: absolute;
+          top:286px;
+          right:222px;
+          width:150px;
+          height:160px;
+          border:1px solid #e0e0e0;
+          border-radius:6px;
+          overflow: hidden;
+          img{
+            display: block;
+            width:150px;
+            height:120px;
+          }
+          p{
+            line-height:40px;
+            border-top:1px solid #e0e0e0;
+            text-align: center;
+            font-size:14px;
+          }
+        }
+        .shade-big-1-text-5{
+          background:#fff;
+          position: absolute;
+          top:286px;
+          right:222px;
+          width:150px;
+          height:160px;
+          border:1px solid #e0e0e0;
+          border-radius:6px;
+          overflow: hidden;
+          img{
+            display: block;
+            width:150px;
+            height:120px;
+          }
+          p{
+            line-height:40px;
+            border-top:1px solid #e0e0e0;
+            text-align: center;
+            font-size:14px;
+          }
+        }
+      }
+      .shade-max-box-4{
+        div{
+          position: absolute;
+          top:50%;
+          left:50%;
+          width:460px;
+          height:200px;
+          margin-top:-100px;
+          margin-left:-230px;
+          background: #fff;
+          padding:18px 30px 0 30px;
+          border-radius:6px;
+          p:nth-child(1){
+            font-size:16px;
+            line-height:20px;
+            margin-bottom:20px;
+          }
+          p:nth-child(2){
+            font-size:16px;
+            line-height:20px;
+          }
+          p:nth-child(3){
+            font-size:16px;
+            line-height:20px;
+            color:#0183FA;
+            margin-left:320px;
+            margin-top:50px;
+            cursor: pointer;
+          }
+        }
+      }
     }
   }
 </style>