From b51a317c7c3db9757317f34902fe869caae130b9 Mon Sep 17 00:00:00 2001
From: chenyao <1219716595@qq.com>
Date: Tue, 09 Dec 2025 17:54:40 +0800
Subject: [PATCH] feat:更新任务管理详情任务
---
src/views/job/components/JobRelatedEvents.vue | 192 +++++++++++++++++++++++++++++++----------------
1 files changed, 125 insertions(+), 67 deletions(-)
diff --git a/src/views/job/components/JobRelatedEvents.vue b/src/views/job/components/JobRelatedEvents.vue
index 6f977ca..2606db1 100644
--- a/src/views/job/components/JobRelatedEvents.vue
+++ b/src/views/job/components/JobRelatedEvents.vue
@@ -2,12 +2,13 @@
<div class="JobRelatedEvents">
<div class="machineTableDetailsTitle">
<img src="/src/assets/images/task/sign.svg" alt="">
- <p>
- 关联事件
- <span>{{ total }}</span>
- 件
- </p>
- </div>
+ <div class="title">
+ 关联事件<span>{{ total }}</span>件
+ </div>
+ <div class="exportBtn" v-if="props.isShowExportTheTask">
+ <el-button class="playback-video-btn" type="primary" @click="exportTheTask" size="small">导出报表</el-button>
+ </div>
+ </div>
<div class="search">
<div class="searchBox">
<div class="item">
@@ -44,15 +45,21 @@
:row-class-name="tableRowClassName"
:data="list"
style="width: 100%"
- :row-style="{ height: '38px', fontSize: '14px', 'text-align': 'center' }"
- :header-cell-style="{ 'text-align': 'center', height: '36px', fontSize: '14px' }"
- >
- <el-table-column label="序号" type="index" width="60" align="center">
- <template #default="{ $index }">
- {{ ($index + 1 + (sizeParams.current - 1) * sizeParams.size).toString().padStart(2, '0') }}
- </template>
- </el-table-column>
- <el-table-column prop="event_num" label="事件编号" align="center"/>
+ :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"/>
@@ -66,11 +73,30 @@
<div class="ended" v-if="scope.row.status === 5">已完结</div>
</template>
</el-table-column>
- <el-table-column label="操作" width="90" align="center">
- <template #default="scope">
- <div class="ztzf-view btnItem" @click="examine(scope.row)">查看</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
@@ -88,20 +114,21 @@
</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 { pxToRem } from '@/utils/rem'
+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: Array,
- batchNo: Number,
-})
+const props = defineProps(['jobTimes', 'batchNo', 'waylineJobId','detailName','isShowExportTheTask'])
const taskData = ref('')
const algorithmChange = val => {
params.value.ai_types = val
+ handleSearch()
}
const loading = ref(false)
const list = ref()
@@ -114,7 +141,7 @@
})
const sizeParams = ref({
current: 1,
- size: 10,
+ size: 5,
})
// 日期选择
const changeselect = () => {
@@ -136,16 +163,20 @@
const wayLineJobInfoId = inject('wayLineJobInfoId')
const getList = () => {
- if (!wayLineJobInfoId.value) return
- params.value.way_line_job_info_id = wayLineJobInfoId.value
- params.value.batchNo = props.batchNo
- loading.value = true
- getDeviceEventList(params.value, sizeParams.value).then(res => {
- const resData = res?.data?.data || {}
- list.value = resData.records
- total.value = resData.total
- loading.value = false
- })
+ 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 => {
@@ -176,46 +207,73 @@
getList()
}
const handleSearch = () => {
- // console.log('sousuo', params.value)
-
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 exportTheTask = () => {
+ 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)
+ })
}
onMounted(() => {
getList()
})
</script>
-<style lang="scss">
-// .custom-date-picker .el-picker-panel__content .el-date-table td.disabled div {
-// background-color: #00193b !important;
-// color: #505050 !important;
-// cursor: not-allowed;
-// }
-</style>
<style scoped lang="scss">
.JobRelatedEvents {
.machineTableDetailsTitle {
- margin-bottom: 16px;
- // background: url('/src/assets/images/task/detailtitle.png') no-repeat center;
- border-bottom: 2px solid #e4e7ed;
- background-size: 100% 100%;
- img{
- width: 15px;
- height: 15px;}
- p {
- display: inline-block;
- margin-left: 10px;
- font-size: 16px;
- color: #363636;
- line-height: 20px;
- text-align: left;
- margin-bottom: 8px;
- span {
- font-size: 26px;
- color: #0282ff;
- font-weight: bold;
- }
- }
-}
+ display: flex;
+ border-bottom: 2px solid #e4e7ed;
+ margin-bottom: 16px;
+ //justify-content: space-between;
+ align-content: center;
+ .exportBtn {
+ margin-left: 16px;
+ //margin-bottom: 8px;
+ //line-height: 20px;
+ }
+ img {
+ margin-top: 6px;
+ width: 15px;
+ height: 15px;
+ }
+ .title {
+ display: inline-block;
+ margin-left: 10px;
+ font-size: 16px;
+ color: #363636;
+ line-height: 20px;
+ text-align: left;
+ margin-bottom: 8px;
+
+ span {
+ font-size: 26px;
+ color: #0282ff;
+ font-weight: bold;
+ }
+ }
+ }
// 待处理
.pending {
--
Gitblit v1.9.3