<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.attachmentType === 1 || row.attachmentType === 2"
|
:src="row.attachmentType === 1 ? row.resultUrl : row.aiImg"
|
:preview-src-list="[row.attachmentType === 1 ? row.resultUrl : row.aiImg]"
|
fit="cover"
|
style="width: 80px; height: 80px"
|
preview-teleported
|
/>
|
<div class="video-btn" v-if="row.attachmentType === 3" @click="videoClick(row)">
|
<el-icon :size="30" color="#fff">
|
<VideoPlay />
|
</el-icon>
|
</div>
|
</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>
|
|
<VideoPlayDialog
|
ref="videoPlayDialogRef"
|
v-if="VideoShow"
|
v-model="VideoShow"
|
:playUrl="currentVideo.resultUrl"
|
/>
|
</template>
|
|
<script setup>
|
import { ref } from 'vue'
|
import { gdTaskResultListApi } from './achievementApi'
|
import DistributeDiaLog from './DistributeDiaLog.vue'
|
import { getAiImg } from '@ztzf/utils'
|
import { VideoPlay } from '@element-plus/icons-vue'
|
import VideoPlayDialog from '@/components/VideoPlayDialog.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 VideoShow = ref(false)
|
const currentVideo = ref({})
|
|
// 分发状态选项
|
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 = await Promise.all(
|
(res?.data?.data ?? []).map(async item => {
|
if (item.attachmentType !== 2) return item
|
const aiImg = await getAiImg(item.resultUrl,item.geojson)
|
return { ...item, aiImg }
|
})
|
)
|
} finally {
|
loading.value = false
|
}
|
}
|
|
// 打开分发弹框
|
function openDistributeDialog(row) {
|
distributeDialogVisible.value = true
|
nextTick(() => {
|
distributeDialogRef.value?.open({
|
row,
|
workOrderId: currentRow.value.workOrderId,
|
})
|
})
|
}
|
|
// 点击视频
|
function videoClick(row) {
|
currentVideo.value = row
|
VideoShow.value = true
|
}
|
|
// 打开弹框
|
async function open({ row } = {}) {
|
currentRow.value = row
|
await getList()
|
}
|
|
defineExpose({ open })
|
</script>
|
|
<style lang="scss" scoped>
|
.disabled-text {
|
color: #c0c4cc;
|
cursor: not-allowed;
|
}
|
|
.video-btn {
|
width: 80px;
|
height: 80px;
|
position: relative;
|
overflow: hidden;
|
border-radius: 4px;
|
background: linear-gradient(135deg, rgba(76, 52, 255, 0.14), rgba(76, 52, 255, 0) 48%),
|
linear-gradient(180deg, #f4f5ff 0%, #e9ecff 100%);
|
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
cursor: pointer;
|
|
&::before {
|
content: '';
|
position: absolute;
|
inset: 0;
|
background-image: linear-gradient(
|
90deg,
|
rgba(76, 52, 255, 0.05) 0,
|
rgba(76, 52, 255, 0.05) 1px,
|
transparent 1px,
|
transparent 12px
|
);
|
opacity: 0.42;
|
}
|
|
.el-icon {
|
position: relative;
|
z-index: 1;
|
width: 42px;
|
height: 42px;
|
border-radius: 50%;
|
background: rgba(76, 52, 255, 0.72);
|
box-shadow: 0 4px 12px rgba(76, 52, 255, 0.2);
|
}
|
}
|
</style>
|
