迭代八巡查任务和风险防控下的巡查结果的图片显示功能

src/views/inspectionWork/patrolSubResult.vue

@@ -56,11 +56,14 @@
             </template>
           </el-table-column>
           <el-table-column label="现场照片" align="center" prop="fileList">
-            <template #default="{ row }">
-              <div v-if="row.fileList && row.fileList.length > 0">
-                <img v-for="file in row.fileList" :key="file.uid" :src="file.previewUrl" alt="" style="max-width: 100px" />
-              </div>
-              <div v-else>无图片</div>
+            <template #default="scope">
+              <el-image
+                style="width: 100px; height: 100px"
+                :src="scope.row.url"
+                :preview-src-list="scope.row.urlList"
+                :preview-teleported="true"
+                fit="cover"
+              />
             </template>
           </el-table-column>
           <el-table-column label="备注" align="center" prop="remark" />
@@ -72,8 +75,10 @@
 </template>
 <script setup lang="ts">
 import { onMounted, reactive, ref } from 'vue';
-import { inspectorDivision, resultList, fileDownload } from '@/api/inspectionWork/inspector';
+import { inspectorDivision, resultList, } from '@/api/inspectionWork/inspector';
 import { ElMessage } from 'element-plus';
+const baseUrl = import.meta.env.VITE_APP_BASE_API;
+const downLoadApi = import.meta.env.VITE_APP_BASE_DOWNLOAD_API;
 const loading = ref(true);
 const showSearch = ref(true);
 const multiple = ref(true);
@@ -97,7 +102,7 @@ const initFormData = reactive({
   nick_name: '',
   inspection_result: '',
   remark: '',
-  fileList: []
+  fileList: ''
 });
 const data = reactive({
   form: { ...initFormData },
@@ -130,13 +135,19 @@ const fetchResulData = () => {
   loading.value = true; // 开始加载
   return resultList(props.eventId, queryParams.value)
     .then((res) => {
-      if (res.code === 200) {
-        tableData.value = res.data || []; // 确保tableData是一个数组
-        total.value = res.total || 0; // 确保total是一个数字
-        console.log('Fetched subtasks data:', tableData.value);
-      } else {
-        console.error(res.msg);
-      }
+      res.data.forEach((item) => {
+        if (item.fileList && item.fileList.length > 0) {
+          let urlList = [];
+          item.fileList.forEach((item2) => {
+            urlList.push(baseUrl + downLoadApi + item2.url);
+          });
+          item.urlList = urlList;
+          item.url = urlList[0];
+        }
+      });
+      tableData.value = res.data || []; // 确保tableData是一个数组
+      total.value = res.total || 0; // 确保total是一个数字
+      console.log('Fetched subtasks data:', tableData.value);
       loading.value = false; // 结束加载
     })
     .catch((error) => {
@@ -144,36 +155,12 @@ const fetchResulData = () => {
       loading.value = false; // 结束加载
     });
 };
-const loadFilePreviews = (rowData) => {
-  if (rowData.fileList && rowData.fileList.length > 0) {
-    for (const file of rowData.fileList) {
-      try {
-        fileDownload(file.url)
-          .then((response) => {
-            if (response && response.data) {
-              file.previewUrl = URL.createObjectURL(new Blob([response.data]));
-            }
-          })
-          .catch((error) => {
-            console.error(`Failed to load image at ${file.url}:`, error);
-          });
-      } catch (error) {
-        console.error(`Failed to start download for ${file.url}:`, error);
-      }
-    }
-  }
-};
-const fetchAndLoadPreviews = () => {
-  fetchResulData().then(() => {
-    tableData.value.forEach(loadFilePreviews);
-  });
-};
 const handleQuery = () => {
   queryParams.value.page = 1;
   fetchResulData();
 };
 const handleExport = () => {
-  ElMessage.info("导出成功");
+  ElMessage.info('导出成功');
 };
 // 重置查询条件
 const resetQuery = () => {

src/views/inspectionWork/riskResult.vue

@@ -56,11 +56,14 @@
             </template>
           </el-table-column>
           <el-table-column label="现场照片" align="center" prop="fileList">
-            <template #default="{ row }">
-              <div v-if="row.fileList && row.fileList.length > 0">
-                <img v-for="file in row.fileList" :key="file.uid" :src="file.previewUrl" alt="" style="max-width: 100px" />
-              </div>
-              <div v-else>无图片</div>
+            <template #default="scope">
+              <el-image
+                style="width: 100px; height: 100px"
+                :src="scope.row.url"
+                :preview-src-list="scope.row.urlList"
+                :preview-teleported="true"
+                fit="cover"
+              />
             </template>
           </el-table-column>
           <el-table-column label="备注" align="center" prop="remark" />
@@ -72,8 +75,10 @@
 </template>
 <script setup lang="ts">
 import { onMounted, reactive, ref } from 'vue';
-import { inspectorDivision, resultList, fileDownload } from '@/api/inspectionWork/riskManagement';
+import { inspectorDivision, resultList } from '@/api/inspectionWork/riskManagement';
 import { ElMessage } from 'element-plus';
+const baseUrl = import.meta.env.VITE_APP_BASE_API;
+const downLoadApi = import.meta.env.VITE_APP_BASE_DOWNLOAD_API;
 const loading = ref(true);
 const showSearch = ref(true);
 const multiple = ref(true);
@@ -97,7 +102,7 @@ const initFormData = reactive({
   nick_name: '',
   inspection_result: '',
   remark: '',
-  fileList: []
+  fileList: ''
 });
 const data = reactive({
   form: { ...initFormData },
@@ -130,13 +135,19 @@ const fetchResulData = () => {
   loading.value = true; // 开始加载
   return resultList(props.eventId, queryParams.value)
     .then((res) => {
-      if (res.code === 200) {
-        tableData.value = res.data || []; // 确保tableData是一个数组
-        total.value = res.total || 0; // 确保total是一个数字
-        console.log('Fetched subtasks data:', tableData.value);
-      } else {
-        console.error(res.msg);
-      }
+      res.data.forEach((item) => {
+        if (item.fileList && item.fileList.length > 0) {
+          let urlList = [];
+          item.fileList.forEach((item2) => {
+            urlList.push(baseUrl + downLoadApi + item2.url);
+          });
+          item.urlList = urlList;
+          item.url = urlList[0];
+        }
+      });
+      tableData.value = res.data || []; // 确保tableData是一个数组
+      total.value = res.total || 0; // 确保total是一个数字
+      console.log('Fetched subtasks data:', tableData.value);
       loading.value = false; // 结束加载
     })
     .catch((error) => {
@@ -144,36 +155,12 @@ const fetchResulData = () => {
       loading.value = false; // 结束加载
     });
 };
-const loadFilePreviews = (rowData) => {
-  if (rowData.fileList && rowData.fileList.length > 0) {
-    for (const file of rowData.fileList) {
-      try {
-        fileDownload(file.url)
-          .then((response) => {
-            if (response && response.data) {
-              file.previewUrl = URL.createObjectURL(new Blob([response.data]));
-            }
-          })
-          .catch((error) => {
-            console.error(`Failed to load image at ${file.url}:`, error);
-          });
-      } catch (error) {
-        console.error(`Failed to start download for ${file.url}:`, error);
-      }
-    }
-  }
-};
-const fetchAndLoadPreviews = () => {
-  fetchResulData().then(() => {
-    tableData.value.forEach(loadFilePreviews);
-  });
-};
 const handleQuery = () => {
   queryParams.value.page = 1;
   fetchResulData();
 };
 const handleExport = () => {
-  ElMessage.info("导出成功");
+  ElMessage.info('导出成功');
 };
 // 重置查询条件
 const resetQuery = () => {