<template>
|
<div class="JobRelatedEvents">
|
<div class="machineTableDetailsTitle">
|
<img src="/src/assets/images/task/sign.svg" alt="">
|
<div class="title">
|
关联事件<span>{{ total }}</span>件
|
</div>
|
<div class="exportBtn" v-if="total > 0 ">
|
<el-button
|
:loading="isShowExportTextLoading"
|
:disabled="isShowExportTextLoading"
|
class="playback-video-btn" type="primary" @click="exportTheTask" size="small">
|
{{ isShowExportTextLoading ? '导出中' : '导出报告' }}
|
</el-button>
|
</div>
|
</div>
|
<div class="search">
|
<div class="searchBox">
|
<div class="item">
|
<div class="itemchild">模糊查询：</div>
|
<el-input v-model="params.event_name" placeholder="请输入事件名称" clearable></el-input>
|
</div>
|
<!-- <div class="item">
|
<div class="itemchild">任务执行日期：</div>
|
<el-date-picker
|
popper-class="custom-date-picker"
|
class="tasktimer"
|
v-model="taskData"
|
type="date"
|
placeholder="请选择日期"
|
value-format="YYYY-MM-DD"
|
:disabled-date="disabledDate"
|
@change="changeselect"
|
/>
|
</div> -->
|
<div class="item">
|
<div class="itemchild">关联算法：</div>
|
<TaskAlgorithmBusiness ref="algorithmRef" :setWidth="186" :showAlgorithm="true" @algorithmChange="algorithmChange" />
|
</div>
|
</div>
|
<div class="search-btn">
|
<el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
|
<el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
|
</div>
|
</div>
|
|
<div class="ztzf-table">
|
<el-table
|
v-loading="loading"
|
:row-class-name="tableRowClassName"
|
:data="list"
|
style="width: 100%"
|
:row-style="{ height: pxToRem(48), fontSize: pxToRem(14), 'text-align': 'center' }"
|
:header-cell-style="{ 'text-align': 'center', height: pxToRem(36), fontSize: pxToRem(14) }"
|
>
|
<el-table-column label="序号" type="index" :width="pxToRemNum(60)">
|
<template #default="{ $index }">
|
{{ ($index + 1 + (sizeParams.current - 1) * sizeParams.size).toString().padStart(2, '0') }}
|
</template>
|
</el-table-column>
|
<el-table-column show-overflow-tooltip prop="event_num" label="事件编号" :width="pxToRemNum(160)">
|
<template #default="scope">
|
<el-tooltip-copy :content="scope.row.event_num" :showCopyText="true">
|
{{ scope.row.event_num }}
|
</el-tooltip-copy>
|
</template>
|
</el-table-column>
|
<el-table-column show-overflow-tooltip prop="event_name" label="事件名称" align="center"/>
|
<el-table-column show-overflow-tooltip prop="remark" label="事件地址" align="center"/>
|
<el-table-column show-overflow-tooltip prop="ai_types" label="关联算法" align="center"/>
|
<el-table-column show-overflow-tooltip prop="work_type" label="事件来源" align="center">
|
<template #default="scope">
|
{{scope.row.work_type === '0' ? '巡检任务' :
|
scope.row.work_type === '1' ? '人工上报' :
|
scope.row.work_type === '2' ? '识别分析' : '' }}
|
</template>
|
</el-table-column>
|
<el-table-column show-overflow-tooltip prop="create_time" label="事件时间" align="center"/>
|
<el-table-column prop="status" label="事件状态" align="center">
|
<template #default="scope">
|
<div class="pending" v-if="scope.row.status === 0">待处理</div>
|
<div class="reviewed" v-if="scope.row.status === 2">待审核</div>
|
<div class="processing" v-if="scope.row.status === 3">处理中</div>
|
<div class="done" v-if="scope.row.status === 4">已完成</div>
|
<div class="ended" v-if="scope.row.status === 5">已完结</div>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" :width="pxToRemNum(150)">
|
<template #default="scope">
|
<div class="btnGroups">
|
<el-popover
|
v-if="scope.row.status === 3 || scope.row.status === 0"
|
popper-class="ztzf-custom-qrcode-popover"
|
:width="pxToRem(119)"
|
:visible="scope.row.showQR"
|
placement="top"
|
title=""
|
trigger="click"
|
>
|
<template #reference>
|
<el-button type="text" @click="QRCode(scope.row)">事件导航</el-button>
|
</template>
|
<div class="qrcode-content">
|
<div class="close-btn" @click.stop="scope.row.showQR = false">×</div>
|
<CreateQRcode v-if="scope.row.showQR" :latAndLon="latAndLon"></CreateQRcode>
|
</div>
|
</el-popover>
|
<el-button icon="el-icon-view" type="text" @click="examine(scope.row)">查看</el-button>
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<el-pagination v-if="list.length > 0"
|
class="ztzf-pagination"
|
popper-class="custom-pagination-dropdown"
|
background
|
:page-sizes="[10, 20, 30, 50]"
|
v-model:current-page="sizeParams.current"
|
v-model:page-size="sizeParams.size"
|
layout=" prev, pager, next,sizes, jumper"
|
:total="total"
|
@change="pageChange"
|
/>
|
</div>
|
</template>
|
<script setup>
|
import { useStore } from 'vuex'
|
import { wgs84ToGcj02 } from '@/utils/coordinateTransformation'
|
import CreateQRcode from '@/components/CreateQRcode/CreateQRcode.vue'
|
import { getDeviceEventList } from '@/api/job/task'
|
import { dayjs, ElMessage } from 'element-plus'
|
import { useRouter } from 'vue-router';
|
import { NestDetailApi, exportTaskReports } from '@/api/home'
|
import { pxToRem, pxToRemNum } from '@/utils/rem'
|
import TaskAlgorithmBusiness from './TaskAlgorithmBusiness.vue'
|
const router = useRouter();
|
const emit = defineEmits(['refresh'])
|
const props = defineProps(['jobTimes', 'batchNo', 'waylineJobId','detailName'])
|
const taskData = ref('')
|
const algorithmRef = ref()
|
|
const algorithmChange = val => {
|
params.value.ai_types = val
|
handleSearch()
|
}
|
const loading = ref(false)
|
const list = ref()
|
const params = ref({
|
way_line_job_info_id: null,
|
event_name: '',
|
ai_types: [], // 算法类型
|
start_date: null,
|
end_date: null,
|
})
|
const sizeParams = ref({
|
current: 1,
|
size: 5,
|
})
|
// 日期选择
|
const changeselect = () => {
|
params.value.start_date = taskData.value.length ? `${taskData.value} 00:00:00` : null
|
params.value.end_date = taskData.value.length ? `${taskData.value} 23:59:59` : null
|
}
|
const store = useStore()
|
const child_sn = computed(() => store.state.home.singleUavHome.child_sn)
|
const total = ref(0)
|
const examine = row => {
|
const orderNumber = row.event_num
|
router.push({
|
path: `/tickets/ticket`,
|
query: {
|
orderNumber,
|
},
|
});
|
}
|
const wayLineJobInfoId = inject('wayLineJobInfoId')
|
|
const getList = () => {
|
if (!wayLineJobInfoId.value) return
|
params.value.way_line_job_info_id = wayLineJobInfoId.value
|
params.value.batch_no = props.batchNo
|
loading.value = true
|
getDeviceEventList(
|
{
|
...params.value,
|
}, sizeParams.value
|
).then(res => {
|
const resData = res?.data?.data || {}
|
list.value = resData.records.map(item => ({
|
...item,
|
showQR: false, // 为每条数据添加showQR状态
|
}))
|
total.value = resData.total
|
loading.value = false
|
// store.commit('setJobEventList', list.value)
|
})
|
}
|
|
const pageChange = val => {
|
sizeParams.value.current = val
|
getList()
|
}
|
// 表格隔行变色
|
const tableRowClassName = ({ row, rowIndex }) => {
|
if (rowIndex % 2 === 1) {
|
return 'warning-row'
|
} else {
|
return 'success-row'
|
}
|
}
|
// 禁用当天之前的日期
|
const disabledDate = time => {
|
const curTime = dayjs(time).format('YYYY-MM-DD')
|
// console.log(curTime)
|
return !(props.jobTimes || []).includes(curTime)
|
}
|
const handleReset = () => {
|
params.value.ai_types = []
|
params.value.event_name = ''
|
params.value.end_date = null
|
params.value.start_date = null
|
taskData.value = ''
|
algorithmRef.value?.handleClear()
|
algorithmChange([])
|
getList()
|
}
|
const handleSearch = () => {
|
getList()
|
}
|
// 二维码
|
const latAndLon = ref(null)
|
const QRCode = item => {
|
const [gcjLng, gcjLat] = wgs84ToGcj02(Number(item.longitude), Number(item.latitude))
|
latAndLon.value = `${gcjLng},${gcjLat}`
|
list.value.forEach(i => {
|
i.showQR = i.id === item.id ? !i.showQR : false
|
})
|
}
|
// 导出任务报表
|
const isShowExportTextLoading = ref(false)
|
const exportTheTask = () => {
|
isShowExportTextLoading.value = true
|
const params = {
|
wayLineJobInfoId: wayLineJobInfoId.value,
|
waylineJobId: props.waylineJobId,
|
batchNo: props.batchNo,
|
}
|
exportTaskReports(params).then(res => {
|
const elink = document.createElement('a')
|
elink.download = props.detailName + '.docx'
|
elink.style.display = 'none'
|
const blob = new Blob([res.data])
|
elink.href = URL.createObjectURL(blob)
|
document.body.appendChild(elink)
|
elink.click()
|
document.body.removeChild(elink)
|
isShowExportTextLoading.value = false
|
})
|
}
|
onMounted(() => {
|
getList()
|
})
|
</script>
|
<style scoped lang="scss">
|
.JobRelatedEvents {
|
.machineTableDetailsTitle {
|
display: flex;
|
border-bottom: 2px solid #e4e7ed;
|
margin-bottom: 16px;
|
align-content: center;
|
.exportBtn {
|
margin-left: 16px;
|
}
|
img {
|
width: 15px;
|
height: 15px;
|
}
|
.title {
|
margin-left: 10px;
|
font-size: 16px;
|
color: #363636;
|
|
span {
|
font-size: 26px;
|
color: #0282ff;
|
font-weight: bold;
|
margin: 0 4px
|
}
|
}
|
}
|
|
// 待处理
|
.pending {
|
color: #ff7411;
|
}
|
// 待审核
|
.reviewed {
|
color: #ff472f;
|
}
|
// 处理中
|
.processing {
|
color: #FFC300;
|
}
|
// 已完成
|
.done {
|
color: #06d957;
|
}
|
// 已完结
|
.ended {
|
color: #06d957;
|
}
|
.search {
|
display: flex;
|
justify-content: space-between;
|
margin-bottom: 19px; // 添加底部间距
|
.item {
|
position: relative;
|
display: flex;
|
align-items: center;
|
font-size: 14px;
|
color: #363636;
|
margin-right: 20px;
|
.itemchild {
|
white-space: nowrap;
|
margin-right: 5px;
|
}
|
:deep(.el-date-editor.el-input__wrapper) {
|
width: 200px; // 调整日期选择器宽度
|
}
|
}
|
.item:nth-last-child {
|
margin-right: 113px;
|
}
|
}
|
.searchBox {
|
display: flex;
|
}
|
|
.search-btn {
|
display: flex;
|
justify-content: space-between;
|
font-size: 14px;
|
|
.btn {
|
width: 80px;
|
height: 32px;
|
border-radius: 4px 4px 4px 4px;
|
line-height: 32px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
img {
|
width: 14px;
|
height: 14px;
|
}
|
}
|
.search {
|
background: #409EFF;
|
color: #fff;
|
margin-right: 10px;
|
cursor: pointer;
|
}
|
.clear {
|
border: 1px solid #D2D1D1;
|
color: #676767;
|
margin-right: 10px;
|
cursor: pointer;
|
}
|
.add {
|
background: #FF9243;
|
color: #fff;
|
}
|
}
|
.btnItem {
|
height: 27px;
|
line-height: 27px;
|
border-radius: 0px 0px 0px 0px;
|
border: 1px solid #51a8ff;
|
font-family: Segoe UI, Segoe UI;
|
font-weight: 400;
|
font-size: 14px;
|
color: #1C5CFF;
|
padding: 0 10px;
|
display: inline-block;
|
margin-right: 10px;
|
cursor: pointer;
|
}
|
}
|
|
</style>
|
