<template>
|
<el-dialog class="gd-dialog" v-model="visible" title="查看" @closed="handleClose" width="1000px" destroy-on-close>
|
<div v-loading="loading">
|
<el-table :data="list" class="gd-dialog-table" max-height="60vh">
|
<el-table-column label="线索缩略图" width="120">
|
<template v-slot="{ row }">
|
<el-image
|
:key="row.thumbnail"
|
v-if="row.attachmentType === 1 || row.attachmentType === 2"
|
:src="row.thumbnail"
|
:preview-src-list="[row.resultUrl]"
|
fit="cover"
|
style="width: 80px; height: 80px"
|
preview-teleported
|
@error="handleThumbnailError(row)"
|
/>
|
<div
|
class="video-btn"
|
v-if="row.attachmentType === 3"
|
:style="row.thumbnailUrl ? { backgroundImage: `url(${row.thumbnailUrl})`, backgroundSize: 'cover', backgroundPosition: 'center' } : {}"
|
@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" fixed="right">
|
<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 { appendAiImages } 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 emit = defineEmits(['success'])
|
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 || '-'
|
}
|
|
// 缩略图加载失败时展示原图
|
function handleThumbnailError(item) {
|
if (item.thumbnail !== item.resultUrl) {
|
item.thumbnail = item.resultUrl
|
}
|
}
|
|
// 获取成果列表
|
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 ?? []).map(item => ({
|
...item,
|
thumbnail: item.resultUrl.replace(/(\.[^./?]+)(\?.*)?$/, '_thumbnail$1$2'),
|
}))
|
list.value.forEach(item => {
|
if (item.attachmentType === 2 && item.geojson !== '[]' && item.geojson?.length) {
|
appendAiImages(item)
|
}
|
})
|
} 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()
|
}
|
|
function handleClose() {
|
emit('success')
|
visible = false
|
}
|
|
defineExpose({ open })
|
</script>
|
|
<style lang="scss">
|
.event-dialog {
|
.el-dialog__body {
|
padding: 20px 20px 10px 20px !important;
|
overflow: hidden !important;
|
max-height: 70vh !important;
|
display: flex;
|
flex-direction: column;
|
}
|
}
|
|
.dialog-body-wrapper {
|
flex: 1;
|
overflow: hidden;
|
display: flex;
|
flex-direction: column;
|
}
|
|
.gd-dialog-table {
|
flex: 1;
|
}
|
</style>
|
<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>
|
