From 06b384b1249f69ea2540e7c78e1ef426cd0fe34d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=98=93=E6=B5=A9=E8=BD=A9?= <[yihaoxuan@datametatech.com]>
Date: Thu, 23 Nov 2023 14:25:09 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=94=B5=E5=AD=90=E5=9C=B0=E5=9B=BE?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E8=A1=A8=E6=A0=BC=E5=B8=83=E5=B1=80=E5=AE=8C?=
 =?UTF-8?q?=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../patrolRouteSettings/components/Drawer.vue | 319 ++++++++++++++----
 .../components/GaoDeMap.vue                   |   4 +
 2 files changed, 256 insertions(+), 67 deletions(-)

diff --git a/src/views/runManage/engineering/patrolRouteSettings/components/Drawer.vue b/src/views/runManage/engineering/patrolRouteSettings/components/Drawer.vue
index a62a28e..11f0ec1 100644
--- a/src/views/runManage/engineering/patrolRouteSettings/components/Drawer.vue
+++ b/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 == 5">三、堤岸防护工程</div>
-              <div v-if="scope.$index == 9">四、防渗排水设施</div>
-              <div v-if="scope.$index == 11">五、交叉建筑物及接连段</div>
-              <div v-if="scope.$index == 13">六、管理设施</div>
+              <div v-if="scope.$index == 4">二、护坡地和堤防工程保护范围</div>
+              <div v-if="scope.$index == 5">
+                <div class="box2">
+                  <div class="item1">三、堤岸防护工程</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="photos" align="center" label="打卡图片" width="150" />
-          <el-table-column align="center" label="检查记录">
-            <el-table-column prop="isNormal" align="center" label="是否正常" width="150" />
-            <el-table-column prop="problems" align="center" label="存在问题" width="150" />
+          <el-table-column prop="content" align="center" class-name="column-item" label="检查内容" min-width="200" />
+          <el-table-column v-if="!this.$route.query.editor" prop="photos" align="center" class-name="column-item"
+            label="打卡图片" width="150" />
+          <el-table-column v-if="!this.$route.query.editor" align="center" class-name="column-item" label="检查记录">
+            <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 {
-      grid-row: 1 / 9;
-      grid-column: 1;
-      line-height: 352px;
-      justify-content: center;
-      align-content: center;
-      border-right: 1px solid #f4f9f7;
-    }
+      .item2 {
+        grid-row: 1/3;
+        grid-column: 2/ 4;
+        line-height: 88px;
+        justify-content: center;
+        align-content: center;
+        border-bottom: 1px solid #f4f9f7;
+      }
 
-    .item2 {
-      grid-row: 1/3;
-      grid-column: 2/ 4;
-      line-height: 88px;
-      justify-content: center;
-      align-content: center;
-      border-bottom: 1px solid #f4f9f7;
-    }
+      .item3 {
+        grid-row: 3/7;
+        grid-column: 2;
+        line-height: 176px;
+        justify-content: center;
+        align-content: center;
+        border-right: 1px solid #f4f9f7;
+      }
 
-    .item3 {
-      grid-row: 3/7;
-      grid-column: 2;
-      line-height: 176px;
-      justify-content: center;
-      align-content: center;
-      border-right: 1px solid #f4f9f7;
-    }
+      .item4 {
+        line-height: 44px;
+        justify-content: center;
+        align-content: center;
+        border-bottom: 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;
-      justify-content: center;
-      align-content: center;
-      border-bottom: 1px solid #f4f9f7;
+
+      .item7 {
+        grid-row: 9/7;
+        grid-column: 2/4;
+        line-height: 88px;
+        justify-content: center;
+        align-content: center;
+        border-top: 1px solid #f4f9f7;
+      }
     }
 
-    .item5 {
-      line-height: 44px;
-      justify-content: center;
-      align-content: center;
-      border-bottom: 1px solid #f4f9f7;
+    .box2 {
+      height: 352px;
+      display: grid;
+      grid-template-columns: repeat(3, 88px);
+      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 {
-      grid-row: 7/5;
-      grid-column: 3;
-      line-height: 88px;
-      justify-content: center;
-      align-content: center;
+    .box3 {
+      height: 176px;
+      display: grid;
+      grid-template-columns: repeat(3, 88px);
+      grid-template-rows: repeat(8, 44px);
+
+      .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 {
-      grid-row: 9/7;
-      grid-column: 2/4;
-      line-height: 88px;
-      justify-content: center;
-      align-content: center;
-      border-top: 1px solid #f4f9f7;
+      .item1 {
+        grid-row: 1 / 10;
+        grid-column: 1/3;
+        line-height: 440px;
+        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;
+      }
+
+      .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>
\ No newline at end of file
diff --git a/src/views/runManage/engineering/patrolRouteSettings/components/GaoDeMap.vue b/src/views/runManage/engineering/patrolRouteSettings/components/GaoDeMap.vue
index bc20746..9d92f39 100644
--- a/src/views/runManage/engineering/patrolRouteSettings/components/GaoDeMap.vue
+++ b/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',