feat: 交通安全-总览补充完成本月车辆违规记录图片显示

src/views/traffic/overview/components/AccidentRecords.vue

@@ -8,7 +8,7 @@
       ></span>
     </div>
     <div class="table-container">
-      <el-table :data="accidentRecords" style="width: 100%">
+      <el-table :data="accidentRecords" style="width: 100%; height: 100%">
         <el-table-column prop="accidentLocation" label="事故地点" />
         <el-table-column prop="accidentTime" label="事故时间" />
         <el-table-column prop="accidentDescription" label="事故描述" />

src/views/traffic/overview/components/ViolationRecords.vue

@@ -8,18 +8,34 @@
       ></span>
     </div>
     <div class="table-container">
-      <el-table :data="violationRecords" style="width: 100%">
+      <el-table :data="violationRecords" style="width: 100%; height: 100%">
         <el-table-column prop="carNumber" label="车牌号" />
-        <el-table-column prop="violateBy" label="车主" />
-        <el-table-column prop="deptName" label="所属部门" />
+        <el-table-column prop="violateBy" label="车主">
+          <template #default="scope">
+            {{ scope.row.violateName || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="deptName" label="所属部门">
+          <template #default="scope">
+            {{ scope.row.deptName || '-' }}
+          </template>
+        </el-table-column>
         <el-table-column prop="violateType" label="违规类型">
           <template #default="scope">
             {{ getVehicleViolationTypeMap(scope.row.violateType) }}
           </template>
         </el-table-column>
-        <el-table-column prop="violateLocation" label="违规地点" />
+        <el-table-column prop="violateLocation" label="违规地点">
+          <template #default="scope">
+            {{ scope.row.violateLocation || '-' }}
+          </template>
+        </el-table-column>
         <el-table-column prop="captureTime" label="违规时间" />
-        <el-table-column prop="capturePhotos" label="抓拍照片" />
+        <el-table-column prop="capturePhotos" label="抓拍照片">
+          <template #default="scope">
+            <ImageViewer :file-list="scope.row.capturePhotos" />
+          </template>
+        </el-table-column>
       </el-table>
     </div>
   </div>
@@ -31,6 +47,7 @@
   import { ElIcon } from 'element-plus';
   import { ArrowRight } from '@element-plus/icons-vue';
   import { getVehicleViolationTypeMap } from '@/views/traffic/overview/constant';
+  import ImageViewer from '@/views/traffic/violation/act/components/ImageViewer.vue';
   import {
     QueryPageParams,
     QueryTrafficViolationOverviewPageRes,

src/views/traffic/violation/act/components/ImageViewer.vue

@@ -7,7 +7,7 @@
         :preview-src-list="images"
         class="image-viewer__image"
         :preview-teleported="true"
-      ></el-image>
+      />
       <div class="image-viewer__text">共{{ images.length }}张</div>
     </div>
     <div v-else> - </div>
@@ -23,15 +23,15 @@
   }>();
 
   const images = computed(() => {
-    return unformatImage(props.fileList)?.map((x) => {
-      return x.url;
-    });
+    return unformatImage(props.fileList);
   });
 </script>
 
 <style scoped>
   .image-viewer {
-    width: 136px;
+    width: 120px;
+    height: 90px;
+    position: relative;
   }
   .image-viewer__image {
     width: 120px;
@@ -40,8 +40,8 @@
   }
   .image-viewer__text {
     position: absolute;
-    bottom: 17px;
-    right: 27px;
+    bottom: 0px;
+    right: 0px;
     background-color: rgba(0, 0, 0, 0.6);
     padding: 3px;
     color: rgba(255, 255, 255, 0.7);