巡查模块

src/views/risk/drawCanvas/index.vue

@@ -8,7 +8,16 @@
         <el-button @click="addBase" type="default">添加基础设施</el-button>
         <!-- <el-button @click="toCopyRoom" type="default">复制房间</el-button> -->
       </div>
-
+      <el-row v-if="isViews && componentBtn" style="margin-top: 20px; margin-left: 20px;font-size: 18px;">
+        <el-row type="flex" justify="space-around" align="middle">
+          <el-col> 风险等级图例:
+            <span class="riskTab type1"></span>重大风险
+            <span class="riskTab type2"></span>较大风险
+            <span class="riskTab type3"></span>一般风险
+            <span class="riskTab type4"></span>低风险</el-col>
+        </el-row>
+        <el-button style="margin: 10px 0;" type="primary" @click="getPdf">导 出</el-button>
+      </el-row>
       <!-- <el-button @click="editItem" type="default"  v-if="!isViews">修改</el-button> -->
 
       <div id="printDiv" :style="{ minHeight: layoutHeight + 'px', padding: '20px' }" class="vue-grid-layout">
@@ -104,17 +113,7 @@
         <el-button type="primary" @click="saveRoomName">确 定</el-button>
       </div>
     </el-dialog>
-    <el-row v-if="isViews && componentBtn" style="margin-top: 20px; margin-left: 20px">
-      <el-row :gutter="5" style="margin-top: 20px; margin-left: 20px">
-        <el-col :span="2"> 风险等级图例:</el-col>
-        <el-col :span="3"> <span class="riskTab type1"></span>重大风险</el-col>
-        <el-col :span="3"> <span class="riskTab type2"></span>较大风险</el-col>
-        <el-col :span="3"> <span class="riskTab type3"></span>一般风险</el-col>
-        <el-col :span="3"> <span class="riskTab type4"></span>低风险</el-col>
-      </el-row>
-      <el-button type="primary" @click="getPdf">导 出</el-button>
-      <el-button @click="cancelDraw">取 消</el-button>
-    </el-row>
+
   </div>
 </template>
 
@@ -201,8 +200,7 @@ export default {
       this.isViews = this.componentIsViews;
       this.selectType();
       this.getFloor();
-      this.W = document.documentElement.clientWidth;
-      this.H = document.documentElement.clientHeight - 180;
+      this.setWH()
     },
     componentFloorId(val) {
       this.getRoomInfo();
@@ -219,10 +217,15 @@ export default {
     this.getRoomInfo();
     this.selectType();
     this.getFloor();
-    this.W = document.documentElement.clientWidth;
-    this.H = document.documentElement.clientHeight - 180;
+    this.setWH()
   },
   methods: {
+    setWH() {
+      setTimeout(() => {
+        this.W = document.documentElement.clientWidth - document.querySelector('.has-logo').clientWidth;
+        this.H = document.documentElement.clientHeight - 180;
+      })
+    },
     handleChange(e) {
       this.copyRoom.floor.id = e[1];
     },
@@ -552,7 +555,7 @@ export default {
       );
       // 设置layout高度,使页面可以滚动
       const maxTop = max * 30;
-      this.layoutHeight = maxTop > this.H ? maxTop : this.H;
+      this.layoutHeight = (maxTop > this.H ? maxTop : this.H) + 30;
       console.log(this.layoutHeight);
     },
     // 移动后的事件
@@ -854,6 +857,7 @@ export default {
   height: 20px;
   margin: 0 10px 0px 15px;
   border-radius: 5px;
+  vertical-align: middle;
 }
 
 .type1 {
@@ -925,6 +929,7 @@ export default {
 
 .vue-grid-layout {
   background: #f0f1f5;
+  box-sizing: border-box;
 }
 
 .vue-grid-item:not(.vue-grid-placeholder) {