<template>
|
<div class="execution-container">
|
<!-- 固定头部 tabs -->
|
<div class="fixed-tabs">
|
<van-tabs
|
v-model:active="active"
|
title-active-color="#1989fa"
|
title-inactive-color="#646566"
|
sticky
|
@click-tab="tabClick"
|
>
|
<van-tab title="任务情况" name="任务情况"/>
|
<van-tab title="关联事件" name="关联事件" :badge="eventTotal" />
|
<van-tab title="成果数据" name="成果数据" :badge="resultTotal" />
|
</van-tabs>
|
</div>
|
|
<!-- 可滚动的内容区域 -->
|
<div class="scroll-content">
|
<div v-show="active === '任务情况'" class="tab-content">
|
<ex-details :wayLineJobInfoId="route.query.wayLineJobInfoId" />
|
</div>
|
|
<div v-show="active === '关联事件'" class="tab-content">
|
<ex-events :wayLineJobInfoId="route.query.wayLineJobInfoId" />
|
</div>
|
|
<div v-show="active === '成果数据'" class="tab-content tab-content-cg">
|
<achievementData :wayLineJobInfoId="route.query.wayLineJobInfoId" />
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { getDeviceEventList } from '@/api/home/machineNest'
|
import { aiImagesPage } from '@/api/dataCenter'
|
import {getJobWayLineDetails} from '@ztzf/apis'
|
|
import { getJobDetails } from '@/api/home/task'
|
import { useRoute } from 'vue-router'
|
import exDetails from './compoment/details.vue'
|
import exEvents from './compoment/events.vue'
|
import achievementData from './compoment/achievementData.vue'
|
import { setStore } from '@/utils/store'
|
const active = ref('任务情况')
|
provide('activeTab', active)
|
const route = useRoute()
|
|
const eventTotal = ref(0)
|
function returnNumEx(value) {
|
eventTotal.value = value
|
}
|
const resultTotal = ref(0)
|
function returnNumE(value) {
|
resultTotal.value = value
|
}
|
function tabClick(value) {
|
active.value = value.name
|
}
|
|
const detailsObj = ref({})
|
const taskWayLineDetails = ref([])
|
provide('detailsObj', detailsObj)
|
provide('taskWayLineDetails', taskWayLineDetails)
|
|
onMounted(() => {
|
console.log(route.query, '8888')
|
// const item = JSON.parse(decodeURIComponent(route.query.rowItem))
|
const params = {
|
way_line_job_info_id: route.query.wayLineJobInfoId,
|
batch_no: route.query.batch_no,
|
}
|
getDeviceEventList(params, { current: 1, size: 1999 }).then(res => {
|
eventTotal.value = res.data.data.total;
|
})
|
getJobDetails({ wayLineJobInfoId: route.query.wayLineJobInfoId, waylineJobId: route.query.waylineJobId, batchNo: route.query.batch_no }).then(async resDetails => {
|
detailsObj.value = resDetails.data.data
|
aiImagesPage({ wayLineJobId: detailsObj.value.job_id, resultTypes: [0, 1, 2, 4, 5],orderByCreateTime:true,current: 1,size:2000 }).then(res => {
|
resultTotal.value = res.data.data.total;
|
})
|
})
|
getJobWayLineDetails({ wayLineJobInfoId: route.query.wayLineJobInfoId, waylineJobId: route.query.waylineJobId, batchNo: route.query.batch_no }).then(async res => {
|
taskWayLineDetails.value = res.data.data
|
})
|
})
|
</script>
|
|
<style lang="scss" scoped>
|
.execution-container {
|
height: 100vh;
|
display: flex;
|
flex-direction: column;
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
:deep(.van-badge) {
|
position: initial;
|
background-color: #1D6FE9;
|
}
|
:deep(){
|
.van-tabs__nav{
|
background: transparent;
|
}
|
}
|
.van-tabs{
|
background: transparent;
|
:deep(.van-tab) {
|
font-size: 15px;
|
font-weight: 400;
|
}
|
:deep(.van-badge__wrapper) {
|
display: flex;
|
justify-items: center;
|
align-items: center;
|
}
|
:deep(.van-badge--top-right) {
|
transform: none;
|
}
|
}
|
.fixed-tabs {
|
flex-shrink: 0; /* 防止 tabs 被压缩 */
|
z-index: 1000;
|
}
|
|
.scroll-content {
|
flex: 1;
|
overflow-y: auto;
|
-webkit-overflow-scrolling: touch; /* iOS 平滑滚动 */
|
}
|
|
.tab-content {
|
height: 100%;
|
overflow-y: auto;
|
}
|
.tab-content-cg {
|
-webkit-overflow-scrolling: touch;
|
padding-bottom: 48px; /* 预留按钮高度 + 间距 */
|
}
|
|
/* 确保内容区域在 tabs 下面 */
|
:deep(.van-tabs__wrap) {
|
position: sticky;
|
top: 0;
|
z-index: 1000;
|
}
|
}
|
</style>
|
