图片滚动 ✔

src/views/SentryEmergencyCenter.vue

@@ -229,9 +229,9 @@
                     <div class="transferBg pics">
                         <h3>其他画面</h3>
 						<div class="otherPics">
-							<router-link to="#" v-for="item in emergencyEventDetails.attachPath">
+							<router-link to="#" v-for="item, index in emergencyEventDetails.attachPath">
 								<el-image :src="item"
-										:preview-src-list="assetTypeAnImage(item)"
+										:preview-src-list="assetTypeAnImage(emergencyEventDetails.attachPath, index)"
 										style="width:8rem; height:8rem;margin: 5px;">
 								</el-image>
 							</router-link>
@@ -253,8 +253,8 @@
 														<p>{{activity.createName}} 提交于 {{activity.createTime}}</p>
 														<!--<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 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(item.attachPath)"></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>
@@ -700,15 +700,45 @@
           this.deptOptionsLiandong = response.data;
         });
       },
-      assetTypeAnImage(filePath) {
-        let imageList = []
-        if (filePath != null && filePath.length > 0) {
-          for (let i = 0; i < filePath.length; i++) {
-            imageList.push(filePath)
-          }
-        }
-        return imageList
+      assetTypeAnImage(attachList, index) {
+				// 过滤出图片文件
+				const imageList = attachList.filter(file =>
+						file.toLowerCase().endsWith('.jpg') ||
+						file.toLowerCase().endsWith('.png')
+				);
+
+				// 确保索引有效
+				const validIndex = index % imageList.length;
+
+				// 使用 slice 和 concat 重新排序
+				return [
+					...imageList.slice(validIndex),
+					...imageList.slice(0, validIndex)
+				];
+        // let imageList = []
+				// if (filePath != null && filePath.length > 0) {
+				//   for (let i = 0; i < filePath.length; i++) {
+				//     imageList.push(filePath)
+				//   }
+				// }
+				// return imageList
       },
+			assetTypeAnImage_NEW(attachList, index) {
+				// 过滤出图片文件
+				const imageList = attachList.filter(file =>
+						file.fileName.toLowerCase().endsWith('.jpg') ||
+						file.fileName.toLowerCase().endsWith('.png')
+				).map(item => item.attachPath);
+
+				// 确保索引有效
+				const validIndex = index % imageList.length;
+
+				// 使用 slice 和 concat 重新排序
+				return [
+					...imageList.slice(validIndex),
+					...imageList.slice(0, validIndex)
+				];
+			},
 			handleInput(val){
 				this.ruleForm.contingencyDetail.eventEarlyWarning = val.replace(/[^0-9]/g, '')
 			},

src/views/SentryPage.vue

@@ -154,8 +154,8 @@
                   <p>{{activity.createName}} 提交于 {{activity.createTime}}</p>
                   <!--<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 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"></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>
@@ -367,6 +367,22 @@
         }
         return imageList
       },
+      assetTypeAnImage_NEW(attachList, index) {
+        // 过滤出图片文件
+        const imageList = attachList.filter(file =>
+          file.fileName.toLowerCase().endsWith('.jpg') ||
+          file.fileName.toLowerCase().endsWith('.png')
+        ).map(item => item.attachPath);
+
+        // 确保索引有效
+        const validIndex = index % imageList.length;
+
+        // 使用 slice 和 concat 重新排序
+        return [
+          ...imageList.slice(validIndex),
+          ...imageList.slice(0, validIndex)
+        ];
+      },
       openAreaDetails(param){
         this.isAreaDetailVisible = true;
         this.areaDetailInfo = param;