From 468e1ac46859078e74838ac2e4efebb879769f97 Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Sat, 06 Jun 2026 15:54:30 +0800
Subject: [PATCH] feat: ai图片预览
---
applications/task-work-order/src/views/orderView/orderManage/clueEvents/ViewDiaLog.vue | 96 ++---------------------------------------------
1 files changed, 5 insertions(+), 91 deletions(-)
diff --git a/applications/task-work-order/src/views/orderView/orderManage/clueEvents/ViewDiaLog.vue b/applications/task-work-order/src/views/orderView/orderManage/clueEvents/ViewDiaLog.vue
index fa30af0..0e9e41f 100644
--- a/applications/task-work-order/src/views/orderView/orderManage/clueEvents/ViewDiaLog.vue
+++ b/applications/task-work-order/src/views/orderView/orderManage/clueEvents/ViewDiaLog.vue
@@ -5,18 +5,11 @@
<el-table-column label="线索缩略图" width="120">
<template v-slot="{ row }">
<el-image
- v-if="row.attachmentType === 1 && row.resultUrl"
- :src="row.resultUrl"
- :preview-src-list="[row.resultUrl]"
+ v-if="row.attachmentType === 1 || row.attachmentType === 2"
+ :src="row.attachmentType === 1 ? row.resultUrl : getAiImg(row.resultUrl)"
+ :preview-src-list="[row.attachmentType === 1 ? row.resultUrl : getAiImg(row.resultUrl)]"
fit="cover"
- style="width: 80px; height: 80px; border-radius: 4px"
- preview-teleported
- />
- <el-image
- v-if="row.attachmentType === 2 && row.resultUrl"
- :src="row.resultUrl"
- :preview-src-list="[row.resultUrl]"
- fit="cover"
+ style="width: 80px; height: 80px"
preview-teleported
/>
</template>
@@ -67,6 +60,7 @@
import { ref } from 'vue'
import { gdTaskResultListApi } from './achievementApi'
import DistributeDiaLog from './DistributeDiaLog.vue'
+import { getAiImg } from '@ztzf/utils'
const store = useStore()
const requester = computed(() => store.state.user.userInfo?.role_id === '2014158512610869250')
@@ -111,89 +105,9 @@
try {
const res = await gdTaskResultListApi({ patrolTaskId: currentRow.value.id })
list.value = res?.data?.data ?? []
- list.value = await Promise.all(
- list.value.map(async i => {
- const aiImg = await getAiImg(i.resultUrl)
- return { ...i, aiImg }
- })
- )
} finally {
loading.value = false
}
-}
-
-const aiFrame = [
- '{"score":0.91357421875,"bbox":{"x_cen":1246.0,"y_cen":209.0,"width":166.0,"height":334.0},"class_name":"car","algorithmId":"e71116098eeb1d60cfebd04d30653b151"}',
- '{"score":0.89697265625,"bbox":{"x_cen":370.0,"y_cen":694.5,"width":162.0,"height":331.0},"class_name":"car","algorithmId":"e71116098eeb1d60cfebd04d30653b151"}',
- '{"score":0.89501953125,"bbox":{"x_cen":396.0,"y_cen":343.0,"width":168.0,"height":330.0},"class_name":"car","algorithmId":"e71116098eeb1d60cfebd04d30653b151"}',
- '{"score":0.79296875,"bbox":{"x_cen":409.5,"y_cen":52.5,"width":167.0,"height":105.0},"class_name":"car","algorithmId":"e71116098eeb1d60cfebd04d30653b151"}',
-]
-
-function getAiImg(url) {
- if (!url) return ''
- const img = new Image()
- img.crossOrigin = 'anonymous'
- return new Promise(resolve => {
- img.onload = () => {
- if (!img.naturalWidth || !img.naturalHeight) {
- resolve('')
- return
- }
-
- const canvas = document.createElement('canvas')
- const ctx = canvas.getContext('2d')
- if (!ctx) {
- resolve('')
- return
- }
-
- canvas.width = img.naturalWidth
- canvas.height = img.naturalHeight
- ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
-
- aiFrame.forEach(item => {
- let target = item
- try {
- target = typeof item === 'string' ? JSON.parse(item) : item
- } catch (error) {
- return
- }
-
- const { x_cen, y_cen, width, height } = target.bbox || {}
- if ([x_cen, y_cen, width, height].some(value => typeof value !== 'number')) return
-
- const x = x_cen - width / 2
- const y = y_cen - height / 2
- const label = target.class_name || ''
- const fontSize = Math.max(18, Math.round(canvas.width / 80))
- const labelHeight = fontSize + 10
- const labelY = y - labelHeight >= 0 ? y - labelHeight : y
-
- ctx.strokeStyle = '#FF3B30'
- ctx.lineWidth = Math.max(3, Math.round(canvas.width / 640))
- ctx.strokeRect(x, y, width, height)
-
- if (label) {
- ctx.font = `${fontSize}px Arial`
- const labelWidth = ctx.measureText(label).width + 16
- ctx.fillStyle = '#FF3B30'
- ctx.fillRect(x, labelY, labelWidth, labelHeight)
- ctx.fillStyle = '#FFFFFF'
- ctx.textBaseline = 'middle'
- ctx.fillText(label, x + 8, labelY + labelHeight / 2)
- }
- })
-
- try {
- resolve(canvas.toDataURL('image/jpeg', 0.92))
- } catch (error) {
- console.log(error)
- resolve('')
- }
- }
- img.onerror = () => resolve('')
- img.src = url
- })
}
// 打开分发弹框
--
Gitblit v1.9.3