<template>
|
<el-dialog class="gd-dialog" v-model="visible" title="查看" @closed="visible = false" width="1000px" destroy-on-close>
|
<div v-loading="loading">
|
<el-table :data="list" class="gd-dialog-table">
|
<el-table-column label="线索缩略图" width="120">
|
<template v-slot="{ row }">
|
<el-image
|
v-if="row.aiImg || row.resultUrl"
|
:src="row.aiImg || row.resultUrl"
|
:preview-src-list="[row.aiImg || row.resultUrl]"
|
fit="cover"
|
style="width: 80px; height: 60px"
|
preview-teleported
|
/>
|
<span v-else>-</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="resultCode" show-overflow-tooltip label="线索编号" />
|
<el-table-column prop="shootTime" show-overflow-tooltip label="拍摄时间" />
|
<el-table-column label="线索位置" show-overflow-tooltip>
|
<template v-slot="{ row }">
|
{{ formatLocation(row) }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="distributeStatus" show-overflow-tooltip label="线索状态">
|
<template v-slot="{ row }">
|
{{ getDistributeStatusLabel(row.distributeStatus) }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="distributeDeptName" show-overflow-tooltip label="分发部门" />
|
<el-table-column prop="distributeUserName" show-overflow-tooltip label="分发人员" />
|
<el-table-column label="操作" class-name="operation-btns" width="140">
|
<template v-slot="{ row }">
|
<el-link type="primary" @click="openDistributeDialog(row)" v-if="permission.clueEvents_distribute && (row.distributeStatus === 0 || row.distributeStatus === 2)">
|
{{ row.distributeStatus === 2 ? '再次分发':'转为事件并分发' }}
|
</el-link>
|
<el-button disabled type="text" v-else>转为事件并分发</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
|
<!-- <template #footer>
|
<el-button color="#F2F3F5" @click="visible = false">关闭</el-button>
|
</template> -->
|
|
<DistributeDiaLog
|
ref="distributeDialogRef"
|
v-if="distributeDialogVisible"
|
v-model="distributeDialogVisible"
|
@success="getList"
|
/>
|
</el-dialog>
|
</template>
|
|
<script setup>
|
import { ref } from 'vue'
|
import { gdTaskResultListApi } from './achievementApi'
|
import DistributeDiaLog from './DistributeDiaLog.vue'
|
|
const store = useStore()
|
const requester = computed(() => store.state.user.userInfo?.role_id === '2014158512610869250')
|
const activeName = ref('all')
|
|
const permission = computed(() => store.state.user.permission)
|
console.log(permission.value.clueEvents_distribute, 'permission')
|
|
const visible = defineModel()
|
const loading = ref(false)
|
const list = ref([])
|
const currentRow = ref(null) // 当前行数据
|
const distributeDialogRef = ref(null)
|
const distributeDialogVisible = ref(false)
|
|
// 分发状态选项
|
const distributeStatusOptions = [
|
{ label: '未分发', value: 0 },
|
{ label: '已分发', value: 1 },
|
{ label: '被退回', value: 2 },
|
{ label: '已确认', value: 3 },
|
]
|
|
// 获取分发状态标签
|
function getDistributeStatusLabel(value) {
|
const item = distributeStatusOptions.find(item => item.value === value)
|
return item ? item.label : value
|
}
|
|
// 格式化位置信息
|
function formatLocation(row) {
|
if (row.longitude && row.latitude) {
|
return `${row.longitude}, ${row.latitude}`
|
}
|
return row.areaCode || '-'
|
}
|
|
// 获取成果列表
|
async function getList() {
|
if (!currentRow.value?.id) return
|
loading.value = true
|
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
|
})
|
}
|
|
|
// 打开分发弹框
|
function openDistributeDialog(row) {
|
distributeDialogVisible.value = true
|
nextTick(() => {
|
distributeDialogRef.value?.open({
|
row,
|
workOrderId: currentRow.value.workOrderId,
|
})
|
})
|
}
|
|
// 打开弹框
|
async function open({ row } = {}) {
|
currentRow.value = row
|
await getList()
|
}
|
|
defineExpose({ open })
|
</script>
|
|
<style lang="scss" scoped>
|
.disabled-text {
|
color: #C0C4CC;
|
cursor: not-allowed;
|
}
|
</style>
|
