feat: 电子地图页面表格布局完成

src/views/runManage/engineering/patrolRouteSettings/components/Drawer.vue

@@ -2,12 +2,17 @@
 <script>
 export default {
   name: '',
+  props: {
+    drawerVisible: {
+      type: Boolean,
+      default: false
+    }
+  },
   data() {
     return {
-      drawerVisible: false,
       tableData: [
         { content: '张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三', photos: '编辑', delete: '删除' },
-        { content: '张三', photos: '编辑', delete: '删除' },
+        { content: '张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三', photos: '编辑', delete: '删除' },
         { content: '张三', photos: '编辑', delete: '删除' },
         { content: '张三', photos: '编辑', delete: '删除' },
         { content: '张三', photos: '编辑', delete: '删除' },
@@ -54,7 +59,8 @@ export default {
 <template>
   <div>
     <div class="masking" :class="drawerVisible ? 'masking-in' : ''">
-      <div class="close-btn" @click="drawerVisible = false">
+      <div class="close-btn" @click="$emit('close-drawer');
+      ">
         <i class="el-icon-arrow-right"></i>
       </div>
       <div class="drawer-title">
@@ -62,7 +68,7 @@ export default {
       </div>
       <div class="center-table">
         <el-table :data="tableData" height="636" border style="width: 100%" :span-method="handleSpanMethod">
-          <el-table-column align="center" class="first-column" label="工程部位" width="210">
+          <el-table-column align="center" class="first-column" label="工程部位" width="264">
             <template slot-scope="scope">
               <div v-if="scope.$index == 0">
                 <div class="box1">
@@ -75,20 +81,50 @@ export default {
                   <div class="item7">堤脚</div>
                 </div>
               </div>
-              <div v-if="scope.$index == 4" style="height: 88px;">二、护坡地和堤防工程保护范围</div>
+              <div v-if="scope.$index == 4">二、护坡地和堤防工程保护范围</div>
-              <div v-if="scope.$index == 5">三、堤岸防护工程</div>
+              <div v-if="scope.$index == 5">
-              <div v-if="scope.$index == 9">四、防渗排水设施</div>
+                <div class="box2">
-              <div v-if="scope.$index == 11">五、交叉建筑物及接连段</div>
+                  <div class="item1">三、堤岸防护工程</div>
-              <div v-if="scope.$index == 13">六、管理设施</div>
+                  <div class="item2">坡式</div>
+                  <div class="item3">墙式</div>
+                  <div class="item4">护脚</div>
+                  <div class="item5">滩岸</div>
+                </div>
+              </div>
+              <div v-if="scope.$index == 9">
+                <div class="box3">
+                  <div class="item1">四、防渗排水设施</div>
+                  <div class="item2">防渗设施</div>
+                  <div class="item3">排水设施</div>
+                </div>
+              </div>
+              <div v-if="scope.$index == 11">
+                <div class="box3">
+                  <div class="item1">五、交叉建筑物及接连段</div>
+                  <div class="item2">连接段</div>
+                  <div class="item3">交叉建筑物</div>
+                </div>
+              </div>
+              <div v-if="scope.$index == 13">
+                <div class="box4">
+                  <div class="item1">六、管理设施</div>
+                  <div class="item2">观测设施</div>
+                  <div class="item3">交通通信设施</div>
+                  <div class="item4">信息化设施</div>
+                  <div class="item5">标识标牌</div>
+                  <div class="item6">管理房</div>
+                </div>
+              </div>
               <div v-if="scope.$index == 18">七、生物防护工程</div>
               <div v-if="scope.$index == 19">八、其他</div>
             </template>
           </el-table-column>
-          <el-table-column prop="content" align="center" class-name="aaaaa" label="检查内容" width="200" />
+          <el-table-column prop="content" align="center" class-name="column-item" label="检查内容" min-width="200" />
-          <el-table-column prop="photos" align="center" label="打卡图片" width="150" />
+          <el-table-column v-if="!this.$route.query.editor" prop="photos" align="center" class-name="column-item"
-          <el-table-column align="center" label="检查记录">
+            label="打卡图片" width="150" />
-            <el-table-column prop="isNormal" align="center" label="是否正常" width="150" />
+          <el-table-column v-if="!this.$route.query.editor" align="center" class-name="column-item" label="检查记录">
-            <el-table-column prop="problems" align="center" label="存在问题" width="150" />
+            <el-table-column prop="isNormal" align="center" class-name="column-item" label="是否正常" width="150" />
+            <el-table-column prop="problems" align="center" class-name="column-item" label="存在问题" width="150" />
           </el-table-column>
         </el-table>
       </div>
@@ -138,71 +174,212 @@ export default {
   .center-table {
     padding: 16px;
 
+
     .box1 {
       height: 352x;
       display: grid;
-      grid-template-columns: repeat(3, 70px);
+      grid-template-columns: repeat(3, 88px);
       grid-template-rows: repeat(8, 44px);
-    }
 
+      .item1 {
+        grid-row: 1 / 9;
+        grid-column: 1;
+        line-height: 352px;
+        justify-content: center;
+        align-content: center;
+        border-right: 1px solid #f4f9f7;
+      }
 
-    .item1 {
+      .item2 {
-      grid-row: 1 / 9;
+        grid-row: 1/3;
-      grid-column: 1;
+        grid-column: 2/ 4;
-      line-height: 352px;
+        line-height: 88px;
-      justify-content: center;
+        justify-content: center;
-      align-content: center;
+        align-content: center;
-      border-right: 1px solid #f4f9f7;
+        border-bottom: 1px solid #f4f9f7;
-    }
+      }
 
-    .item2 {
+      .item3 {
-      grid-row: 1/3;
+        grid-row: 3/7;
-      grid-column: 2/ 4;
+        grid-column: 2;
-      line-height: 88px;
+        line-height: 176px;
-      justify-content: center;
+        justify-content: center;
-      align-content: center;
+        align-content: center;
-      border-bottom: 1px solid #f4f9f7;
+        border-right: 1px solid #f4f9f7;
-    }
+      }
 
-    .item3 {
+      .item4 {
-      grid-row: 3/7;
+        line-height: 44px;
-      grid-column: 2;
+        justify-content: center;
-      line-height: 176px;
+        align-content: center;
-      justify-content: center;
+        border-bottom: 1px solid #f4f9f7;
-      align-content: center;
+      }
-      border-right: 1px solid #f4f9f7;
+
-    }
+      .item5 {
+        line-height: 44px;
+        justify-content: center;
+        align-content: center;
+        border-bottom: 1px solid #f4f9f7;
+      }
+
+      .item6 {
+        grid-row: 7/5;
+        grid-column: 3;
+        line-height: 88px;
+        justify-content: center;
+        align-content: center;
+      }
 
-    .item4 {
+
-      line-height: 44px;
+      .item7 {
-      justify-content: center;
+        grid-row: 9/7;
-      align-content: center;
+        grid-column: 2/4;
-      border-bottom: 1px solid #f4f9f7;
+        line-height: 88px;
+        justify-content: center;
+        align-content: center;
+        border-top: 1px solid #f4f9f7;
+      }
     }
 
-    .item5 {
+    .box2 {
-      line-height: 44px;
+      height: 352px;
-      justify-content: center;
+      display: grid;
-      align-content: center;
+      grid-template-columns: repeat(3, 88px);
-      border-bottom: 1px solid #f4f9f7;
+      grid-template-rows: repeat(8, 44px);
+
+      .item1 {
+        grid-row: 1 / 9;
+        grid-column: 1/3;
+        line-height: 352px;
+        justify-content: center;
+        align-content: center;
+        border-right: 1px solid #f4f9f7;
+      }
+
+      .item2 {
+        grid-row: 1/3;
+        grid-column: 3;
+        line-height: 88px;
+        justify-content: center;
+        align-content: center;
+        border-bottom: 1px solid #f4f9f7;
+      }
+
+      .item3 {
+        grid-row: 3/5;
+        grid-column: 3;
+        line-height: 88px;
+        justify-content: center;
+        align-content: center;
+        border-bottom: 1px solid #f4f9f7;
+      }
+
+      .item4 {
+        grid-row: 5/7;
+        grid-column: 3;
+        line-height: 88px;
+        justify-content: center;
+        align-content: center;
+        border-bottom: 1px solid #f4f9f7;
+      }
+
+      .item5 {
+        grid-row: 7/9;
+        grid-column: 3;
+        line-height: 88px;
+        justify-content: center;
+        align-content: center;
+      }
     }
 
-    .item6 {
+    .box3 {
-      grid-row: 7/5;
+      height: 176px;
-      grid-column: 3;
+      display: grid;
-      line-height: 88px;
+      grid-template-columns: repeat(3, 88px);
-      justify-content: center;
+      grid-template-rows: repeat(8, 44px);
-      align-content: center;
+
+      .item1 {
+        grid-row: 1 / 5;
+        grid-column: 1/3;
+        line-height: 176px;
+        justify-content: center;
+        align-content: center;
+        border-right: 1px solid #f4f9f7;
+      }
+
+      .item2 {
+        grid-row: 1/3;
+        grid-column: 3;
+        line-height: 88px;
+        justify-content: center;
+        align-content: center;
+        border-bottom: 1px solid #f4f9f7;
+      }
+
+      .item3 {
+        grid-row: 3/5;
+        grid-column: 3;
+        line-height: 88px;
+        justify-content: center;
+        align-content: center;
+      }
     }
 
+    .box4 {
+      height: 440px;
+      display: grid;
+      grid-template-columns: repeat(3, 88px);
+      grid-template-rows: repeat(8, 44px);
 
-    .item7 {
+      .item1 {
-      grid-row: 9/7;
+        grid-row: 1 / 10;
-      grid-column: 2/4;
+        grid-column: 1/3;
-      line-height: 88px;
+        line-height: 440px;
-      justify-content: center;
+        justify-content: center;
-      align-content: center;
+        align-content: center;
-      border-top: 1px solid #f4f9f7;
+        border-right: 1px solid #f4f9f7;
+      }
+
+      .item2 {
+        grid-row: 1/3;
+        grid-column: 3;
+        line-height: 88px;
+        justify-content: center;
+        align-content: center;
+        border-bottom: 1px solid #f4f9f7;
+      }
+
+      .item3 {
+        grid-row: 3/5;
+        grid-column: 3;
+        line-height: 88px;
+        justify-content: center;
+        align-content: center;
+      }
+
+      .item4 {
+        grid-row: 5/7;
+        grid-column: 3;
+        line-height: 88px;
+        justify-content: center;
+        align-content: center;
+      }
+
+      .item5 {
+        grid-row: 7/9;
+        grid-column: 3;
+        line-height: 88px;
+        justify-content: center;
+        align-content: center;
+      }
+
+      .item6 {
+        grid-row: 9/11;
+        grid-column: 3;
+        line-height: 88px;
+        justify-content: center;
+        align-content: center;
+      }
     }
   }
 }
@@ -211,14 +388,22 @@ export default {
   left: 50%;
 }
 
-/deep/.el-table__body td {
+/deep/.el-table__body tr td {
   padding: 0;
   height: 88px !important;
-  /* 设置单元格的固定高度 */
-  overflow: hidden;
 }
 
-/deep/.el-table__body td .cell {
+/deep/ .cell {
   padding: 0 !important;
 }
+
+/deep/.column-item {
+  padding-left: 10px !important;
+}
+
+/deep/.column-item .cell {
+  padding: 18;
+  max-height: 70px !important;
+  overflow: auto;
+}
 </style>

src/views/runManage/engineering/patrolRouteSettings/components/GaoDeMap.vue

@@ -6,15 +6,19 @@
         checkpoint.name }}</span>
     </div> -->
     <el-button class="open-drawer-btn" size="mini" @click="drawerVisible = true">展开抽屉</el-button>
+    <Drawer :drawer-visible="drawerVisible" @close-drawer="drawerVisible = false"></Drawer>
   </div>
 </template>
 <script>
 import AMapLoader from "@amap/amap-jsapi-loader";
 import { postInspectionRoute, getInspectionRoute, postInspectionRecordsTrajectoryList } from '@/api/management'
+import Drawer from './Drawer.vue'
 export default {
   name: "map-view",
+  components: { Drawer },
   data() {
     return {
+      drawerVisible: false,
       checkpoints: [
         // {
         //   name: '检查点1',