文档图标 ✔

src/views/SentryEmergencyCenter.vue

@@ -222,7 +222,7 @@
 										<div v-for="(e,idx) in emergencyEventDetails.deptList ? emergencyEventDetails.deptList : [] " :key="idx" class="planItem"
 												 style="display: flex;border: 1px solid #50A09E;width: 96%;height: 40px !important;">
 											<img src="@/assets/images/planIcon.png"
-													 style="width: 36px; height:36px; position: relative;top: -32%;left: -5%;">
+													 style="width: 30px; height:30px; position: relative;top: -22%;left: -5%;">
 											<div style="position: relative;left: -5%; bottom: 7%;">{{ e.mapDeptName || '' }}</div>
 										</div>
 									</div>
@@ -254,20 +254,42 @@
 														<!--<el-image v-if="activity.attachList.length>0" v-for="item in activity.attachList" :src="item.attachPath" style="width: 150px;"></el-image>-->
 														<!-- 图片、视频、文件 组件 -->
 														<template v-if="activity.attachList.length>0" v-for="item, index in activity.attachList">
-															<el-image v-if="item.attachPath.endsWith('.jpg') || item.attachPath.endsWith('.png')" style="width: 208px; height: 150px; margin-right: 9px; cursor: pointer;" :src="item.attachPath" :preview-src-list="assetTypeAnImage_NEW(activity.attachList, index)"></el-image>
-															<video controls v-else-if="item.attachPath.endsWith('.mp4')" style="width: 208px; height: 150px; margin-right: 9px;" :src="item.attachPath"></video>
-															<a v-else-if="item.attachPath.endsWith('.pdf')" :href="item.attachPath" style="width: 800px; height: 20px; display: block; color: #fff!important;">📄 {{ item.fileName }}</a>
-															<a v-else-if="item.attachPath.endsWith('.doc')" :href="item.attachPath" style="width: 800px; height: 20px; display: block; color: #fff!important;">📝 {{ item.fileName }}</a>
-															<a v-else-if="item.attachPath.endsWith('.docx')" :href="item.attachPath" style="width: 800px; height: 20px; display: block; color: #fff!important;">📝 {{ item.fileName }}</a>
-															<a v-else-if="item.attachPath.endsWith('.xls')" :href="item.attachPath" style="width: 800px; height: 20px; display: block; color: #fff!important;">📊 {{ item.fileName }}</a>
-															<a v-else-if="item.attachPath.endsWith('.xlsx')" :href="item.attachPath" style="width: 800px; height: 20px; display: block; color: #fff!important;">📊 {{ item.fileName }}</a>
-															<a v-else-if="item.attachPath.endsWith('.ppt')" :href="item.attachPath" style="width: 800px; height: 20px; display: block; color: #fff!important;">📑 {{ item.fileName }}</a>
-															<a v-else-if="item.attachPath.endsWith('.pptx')" :href="item.attachPath" style="width: 800px; height: 20px; display: block; color: #fff!important;">📑 {{ item.fileName }}</a>
-															<a v-else-if="item.attachPath.endsWith('.zip')" :href="item.attachPath" style="width: 800px; height: 20px; display: block; color: #fff!important;">📦 {{ item.fileName }}</a>
-															<a v-else-if="item.attachPath.endsWith('.rar')" :href="item.attachPath" style="width: 800px; height: 20px; display: block; color: #fff!important;">📦 {{ item.fileName }}</a>
-															<a v-else-if="item.attachPath.endsWith('.txt')" :href="item.attachPath" style="width: 800px; height: 20px; display: block; color: #fff!important;">📃 {{ item.fileName }}</a>
-															<a v-else :href="item.attachPath" style="width: 800px; height: 20px; display: block; color: #fff!important;">{{ item.fileName }}</a>
-
+															<span class="documents_em" v-if="item.attachPath.endsWith('.jpg') || item.attachPath.endsWith('.png')">
+																<el-image class="image_em" :src="item.attachPath" :preview-src-list="assetTypeAnImage_NEW(activity.attachList, index)"></el-image>
+																<div class="fileName" :title="item.fileName">{{ truncateFilename(item.fileName) }}</div>
+															</span>
+															<span class="documents_em" v-else-if="item.attachPath.endsWith('.mp4')">
+																<video controls class="image_em" :src="item.attachPath"></video>
+																<div class="fileName" :title="item.fileName">{{ truncateFilename(item.fileName) }}</div>
+															</span>
+															<a class="documents_em" v-else-if="item.attachPath.endsWith('.pdf')" :href="item.attachPath">
+																<img class="image_em" src="@/assets/icons/documents/pdf.png">
+																<div class="fileName" :title="item.fileName">{{ truncateFilename(item.fileName) }}</div>
+															</a>
+															<a class="documents_em" v-else-if="item.attachPath.endsWith('.doc') || item.attachPath.endsWith('.docx')" :href="item.attachPath">
+																<img class="image_em" src="@/assets/icons/documents/word.png">
+																<div class="fileName" :title="item.fileName">{{ truncateFilename(item.fileName) }}</div>
+															</a>
+															<a class="documents_em" v-else-if="item.attachPath.endsWith('.xls') || item.attachPath.endsWith('.xlsx')" :href="item.attachPath">
+																<img class="image_em" src="@/assets/icons/documents/excel.png">
+																<div class="fileName" :title="item.fileName">{{ truncateFilename(item.fileName) }}</div>
+															</a>
+															<a class="documents_em" v-else-if="item.attachPath.endsWith('.ppt') || item.attachPath.endsWith('.pptx')" :href="item.attachPath">
+																<img class="image_em" src="@/assets/icons/documents/ppt.png">
+																<div class="fileName" :title="item.fileName">{{ truncateFilename(item.fileName) }}</div>
+															</a>
+															<a class="documents_em" v-else-if="item.attachPath.endsWith('.zip') || item.attachPath.endsWith('.rar')" :href="item.attachPath">
+																<img class="image_em" src="@/assets/icons/documents/zip.png">
+																<div class="fileName" :title="item.fileName">{{ truncateFilename(item.fileName) }}</div>
+															</a>
+															<a class="documents_em" v-else-if="item.attachPath.endsWith('.txt')" :href="item.attachPath">
+																<img class="image_em" src="@/assets/icons/documents/txt.png">
+																<div class="fileName" :title="item.fileName">{{ truncateFilename(item.fileName) }}</div>
+															</a>
+															<a class="documents_em" v-else :href="item.attachPath">
+																<img class="image_em" src="@/assets/icons/documents/file.png">
+																<div class="fileName" :title="item.fileName">{{ truncateFilename(item.fileName) }}</div>
+															</a>
 															<!--https://chat.deepseek.com/a/chat/s/8d9fb914-9500-442e-bc30-6d6cad5ba7e0-->
 															<!--pdf: '📄',-->
 															<!--doc: '📝',-->
@@ -683,6 +705,19 @@
 					}
 				})
 			},
+			truncateFilename(filename, maxLength = 4) {
+				const lastDotIndex = filename.lastIndexOf('.');
+
+				if (lastDotIndex === -1) {
+					return filename.length > maxLength ? filename.slice(0, maxLength) + '..' : filename;
+				}
+
+				const name = filename.slice(0, lastDotIndex);
+				const ext = filename.slice(lastDotIndex);
+				const truncatedName = name.length > maxLength ? name.slice(0, maxLength) + '..' : name;
+
+				return truncatedName + ext;
+			},
 			// 事件日志 结束
 
       setPositioning(longitude, latitude) {
@@ -1878,9 +1913,27 @@
 		margin-left: 480px!important;
 		margin-top: 210px!important;
 	}
-.el-image-viewer__wrapper{
-	z-index: 99999!important;
-}
+	.el-image-viewer__wrapper{
+		z-index: 99999!important;
+	}
+	.documents_em, .documents_em .image_em{
+		width: 102px;
+	}
+
+	.documents_em{
+		height: 99px;
+		margin-right: 5px!important;
+		float: left;
+		/*background: red;*/
+		.image_em{
+			height: 77px;
+			position: relative;
+		}
+		.fileName{
+			line-height: 1px;
+			text-indent: 0.2rem;
+		}
+	}
 	.el-button{
 		background: #015050;
 		border: 1px solid #00706d;

src/views/SentryPage.vue

@@ -155,20 +155,42 @@
                   <!--<el-image v-if="activity.attachList.length>0" v-for="item in activity.attachList" :src="item.attachPath" style="width: 150px;"></el-image>-->
                   <!-- 图片、视频、文件 组件 -->
                   <template v-if="activity.attachList.length>0" v-for="item, index in activity.attachList">
-                    <el-image v-if="item.attachPath.endsWith('.jpg') || item.attachPath.endsWith('.png')" style="width: 270px; height: 180px; margin-right: 9px;" :src="item.attachPath" :preview-src-list="assetTypeAnImage_NEW(activity.attachList, index)"></el-image>
-                    <video controls v-else-if="item.attachPath.endsWith('.mp4')" style="width: 270px; height: 180px; margin-right: 9px;" :src="item.attachPath"></video>
-                    <a v-else-if="item.attachPath.endsWith('.pdf')" :href="item.attachPath" style="width: 800px; height: 20px; display: block; color: #fff!important;">📄 {{ item.fileName }}</a>
-                    <a v-else-if="item.attachPath.endsWith('.doc')" :href="item.attachPath" style="width: 800px; height: 20px; display: block; color: #fff!important;">📝 {{ item.fileName }}</a>
-                    <a v-else-if="item.attachPath.endsWith('.docx')" :href="item.attachPath" style="width: 800px; height: 20px; display: block; color: #fff!important;">📝 {{ item.fileName }}</a>
-                    <a v-else-if="item.attachPath.endsWith('.xls')" :href="item.attachPath" style="width: 800px; height: 20px; display: block; color: #fff!important;">📊 {{ item.fileName }}</a>
-                    <a v-else-if="item.attachPath.endsWith('.xlsx')" :href="item.attachPath" style="width: 800px; height: 20px; display: block; color: #fff!important;">📊 {{ item.fileName }}</a>
-                    <a v-else-if="item.attachPath.endsWith('.ppt')" :href="item.attachPath" style="width: 800px; height: 20px; display: block; color: #fff!important;">📑 {{ item.fileName }}</a>
-                    <a v-else-if="item.attachPath.endsWith('.pptx')" :href="item.attachPath" style="width: 800px; height: 20px; display: block; color: #fff!important;">📑 {{ item.fileName }}</a>
-                    <a v-else-if="item.attachPath.endsWith('.zip')" :href="item.attachPath" style="width: 800px; height: 20px; display: block; color: #fff!important;">📦 {{ item.fileName }}</a>
-                    <a v-else-if="item.attachPath.endsWith('.rar')" :href="item.attachPath" style="width: 800px; height: 20px; display: block; color: #fff!important;">📦 {{ item.fileName }}</a>
-                    <a v-else-if="item.attachPath.endsWith('.txt')" :href="item.attachPath" style="width: 800px; height: 20px; display: block; color: #fff!important;">📃 {{ item.fileName }}</a>
-                    <a v-else :href="item.attachPath" style="width: 800px; height: 20px; display: block; color: #fff!important;">{{ item.fileName }}</a>
-
+                    <span class="documents" v-if="item.attachPath.endsWith('.jpg') || item.attachPath.endsWith('.png')">
+                      <el-image class="image" :src="item.attachPath" :preview-src-list="assetTypeAnImage_NEW(activity.attachList, index)"></el-image>
+                      <div class="fileName" :title="item.fileName">{{ truncateFilename(item.fileName) }}</div>
+                    </span>
+                    <span class="documents" v-else-if="item.attachPath.endsWith('.mp4')">
+                      <video controls class="image" :src="item.attachPath"></video>
+                      <div class="fileName" :title="item.fileName">{{ truncateFilename(item.fileName) }}</div>
+                    </span>
+                    <a class="documents" v-else-if="item.attachPath.endsWith('.pdf')" :href="item.attachPath">
+                      <img class="image" src="@/assets/icons/documents/pdf.png">
+                      <div class="fileName" :title="item.fileName">{{ truncateFilename(item.fileName) }}</div>
+                    </a>
+                    <a class="documents" v-else-if="item.attachPath.endsWith('.doc') || item.attachPath.endsWith('.docx')" :href="item.attachPath">
+                      <img class="image" src="@/assets/icons/documents/word.png">
+                      <div class="fileName" :title="item.fileName">{{ truncateFilename(item.fileName) }}</div>
+                    </a>
+                    <a class="documents" v-else-if="item.attachPath.endsWith('.xls') || item.attachPath.endsWith('.xlsx')" :href="item.attachPath">
+                      <img class="image" src="@/assets/icons/documents/excel.png">
+                      <div class="fileName" :title="item.fileName">{{ truncateFilename(item.fileName) }}</div>
+                    </a>
+                    <a class="documents" v-else-if="item.attachPath.endsWith('.ppt') || item.attachPath.endsWith('.pptx')" :href="item.attachPath">
+                      <img class="image" src="@/assets/icons/documents/ppt.png">
+                      <div class="fileName" :title="item.fileName">{{ truncateFilename(item.fileName) }}</div>
+                    </a>
+                    <a class="documents" v-else-if="item.attachPath.endsWith('.zip') || item.attachPath.endsWith('.rar')" :href="item.attachPath">
+                      <img class="image" src="@/assets/icons/documents/zip.png">
+                      <div class="fileName" :title="item.fileName">{{ truncateFilename(item.fileName) }}</div>
+                    </a>
+                    <a class="documents" v-else-if="item.attachPath.endsWith('.txt')" :href="item.attachPath">
+                      <img class="image" src="@/assets/icons/documents/txt.png">
+                      <div class="fileName" :title="item.fileName">{{ truncateFilename(item.fileName) }}</div>
+                    </a>
+                    <a class="documents" v-else :href="item.attachPath">
+                      <img class="image" src="@/assets/icons/documents/file.png">
+                      <div class="fileName" :title="item.fileName">{{ truncateFilename(item.fileName) }}</div>
+                    </a>
                     <!--https://chat.deepseek.com/a/chat/s/8d9fb914-9500-442e-bc30-6d6cad5ba7e0-->
                     <!--pdf: '📄',-->
                     <!--doc: '📝',-->
@@ -660,6 +682,19 @@
           }
         })
       },
+      truncateFilename(filename, maxLength = 7) {
+        const lastDotIndex = filename.lastIndexOf('.');
+
+        if (lastDotIndex === -1) {
+          return filename.length > maxLength ? filename.slice(0, maxLength) + '...' : filename;
+        }
+
+        const name = filename.slice(0, lastDotIndex);
+        const ext = filename.slice(lastDotIndex);
+        const truncatedName = name.length > maxLength ? name.slice(0, maxLength) + '...' : name;
+
+        return truncatedName + ext;
+      },
       // 弹框开启
       handleClose(done) {
         done();
@@ -1427,6 +1462,29 @@
   .el-dialog{
     background: rgba(34, 42, 48,0.9)!important;
   }
+
+  .el-image-viewer__wrapper{
+    z-index: 99999!important;
+  }
+
+  .documents, .documents .image{
+    width: 159px;
+  }
+
+  .documents{
+    height: 182px;
+    margin-right: 8px!important;
+    float: left;
+    /*background: red;*/
+    .image{
+      height: 159px;
+      position: relative;
+    }
+    .fileName{
+      line-height: 5px;
+      text-indent: 0.5rem;
+    }
+  }
 </style>
 <style rel="stylesheet/scss" lang="scss" scoped>
 	@import '@/assets/styles/base.scss';

src/views/eventLogUpload.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="upload-file">
     <el-dialog title="文件上传" :visible.sync="showEventLogUpload" v-if="showEventLogUpload" width="525px"
-               style="height: 700px; margin-top: 401px; margin-left: 0px">
+               style="height: 700px; margin-top: 270px; margin-left: 0px">
       <el-upload
         multiple
         :action="uploadFileUrl"
@@ -60,7 +60,7 @@ export default {
     // 数量限制
     limit: {
       type: Number,
-      default: 15
+      default: 10
     },
     // 大小限制(MB)
     fileSize: {