<template>
|
<div class="devicejob-container">
|
<div class="machineTableDetailsTitle">
|
<p>
|
相关任务 <span>{{ total }}</span
|
>次
|
</p>
|
</div>
|
<div class="devicelob-table">
|
<el-table
|
:data="list"
|
:row-class-name="tableRowClassName"
|
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">
|
<template #default="{ $index }">
|
{{ ($index + 1).toString().padStart(2, '0') }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="id" label="任务编号" />
|
<el-table-column prop="name" label="任务名称" />
|
<el-table-column prop="industry_type_str" label="任务类型" />
|
<el-table-column prop="ai_type_str" label="关联算法" />
|
<el-table-column prop="event_number" label="事件工单" />
|
|
<el-table-column label="操作" width="80">
|
|
<template #default="scope">
|
<el-button type="warning" link @click="viewJob(scope.row)">查看</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<el-pagination
|
background
|
:page-sizes="[10, 20, 30, 50]"
|
v-model:current-page="sizeParams.current"
|
v-model:page-size="sizeParams.size"
|
layout=" prev, pager, next, jumper"
|
:total="total"
|
@change="pageChange"
|
/>
|
</div>
|
|
<DeviceJobDetails v-model:show="deviceJobDetailsShow" />
|
</template>
|
<script setup>
|
import { useStore } from 'vuex'
|
import DeviceJobDetails from './DeviceJobDetails/DeviceJobDetails.vue'
|
import { getDeviceJobList } from '@/api/home/task'
|
|
const list = ref([])
|
const params = ref({
|
device_sn: null,
|
})
|
const sizeParams = ref({
|
current: 1,
|
size: 5,
|
})
|
const store = useStore()
|
const device_sn = computed(() => store.state.home.singleUavHome.device_sn)
|
const total = ref(0)
|
const deviceJobDetailsShow = ref(false)
|
const wayLineJodInfoId = ref(null)
|
provide('wayLineJodInfoId', wayLineJodInfoId)
|
const viewJob = row => {
|
wayLineJodInfoId.value = row.id
|
deviceJobDetailsShow.value = true
|
}
|
|
const getList = () => {
|
params.value.device_sn = device_sn.value
|
getDeviceJobList(params.value, sizeParams.value).then(res => {
|
const resData = res?.data?.data || {}
|
list.value = resData.records
|
total.value = resData.total
|
})
|
}
|
|
const pageChange = val => {
|
sizeParams.value.current = val
|
getList()
|
}
|
// 表格隔行变色
|
const tableRowClassName = ({ row, rowIndex }) => {
|
if (rowIndex % 2 === 1) {
|
return 'warning-row'
|
} else {
|
return 'success-row'
|
}
|
}
|
onMounted(() => {
|
getList()
|
})
|
</script>
|
<style lang="scss">
|
.devicejob-container {
|
// 表格
|
.el-table__inner-wrapper:before {
|
height: 0 !important;
|
}
|
.el-table .warning-row {
|
--el-table-tr-bg-color: rgba(22, 43, 74, 0.79);
|
}
|
.el-table .warning-row::after {
|
position: absolute;
|
content: '';
|
left: 0;
|
width: 100%;
|
border-bottom: 1px solid;
|
|
border-image: linear-gradient(
|
90deg,
|
rgba(25, 162, 255, 0) 10%,
|
rgba(20, 125, 202, 1) 50%,
|
rgba(25, 162, 255, 0) 90%
|
)
|
2 2 2 2;
|
}
|
.el-table .success-row {
|
--el-table-tr-bg-color: #0b1d38;
|
}
|
.el-table .success-row::after {
|
position: absolute;
|
content: '';
|
left: 0;
|
width: 100%;
|
border-bottom: 1px solid;
|
|
border-image: linear-gradient(
|
90deg,
|
rgba(25, 162, 255, 0) 10%,
|
rgba(20, 125, 202, 1) 79%,
|
rgba(25, 162, 255, 0) 90%
|
)
|
2 2 2 2;
|
}
|
}
|
</style>
|
<style scoped lang="scss">
|
// 标题
|
.machineTableDetailsTitle {
|
margin: 0 24px;
|
// margin-bottom: 16px;
|
background: url('/src/assets/images/signMachineNest/machineRight/detailtitle.png') no-repeat center;
|
background-size: 100% 100%;
|
p {
|
display: inline-block;
|
margin-left: 30px;
|
font-size: 16px;
|
color: #ddf0ff;
|
line-height: 20px;
|
text-align: left;
|
margin-bottom: 8px;
|
span {
|
font-size: 26px;
|
color: #0282ff;
|
font-weight: bold;
|
}
|
}
|
}
|
// 表格
|
.devicelob-table {
|
padding: 0 17px;
|
}
|
.el-table {
|
color: #fff;
|
--el-table-border-color: var(--el-border-color-lighter);
|
--el-table-border: none !important;
|
--el-table-text-color: #fff !important;
|
--el-table-header-text-color: #fff !important;
|
--el-table-row-hover-bg-color: none !important;
|
--el-table-current-row-bg-color: none !important;
|
--el-table-header-bg-color: none !important;
|
--el-table-fixed-box-shadow: none !important;
|
--el-table-bg-color: none !important;
|
--el-table-tr-bg-color: none !important;
|
--el-table-expanded-cell-bg-color: none !important;
|
--el-table-fixed-left-column: inset 10px 0 10px -10px rgba(0, 0, 0, 0.15);
|
--el-table-fixed-right-column: inset -10px 0 10px -10px rgba(0, 0, 0, 0.15);
|
}
|
.el-table__header {
|
width: 0 !important;
|
}
|
.el-table__body {
|
border-collapse: collapse;
|
}
|
:deep(.el-table .el-table__cell) {
|
padding: 0 !important;
|
text-align: center !important;
|
}
|
:deep(.el-table .el-table__cell) {
|
padding: 0 !important;
|
}
|
:deep(.el-table thead) {
|
border-bottom: 1px solid;
|
border: 1px solid;
|
border-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 1 1;
|
color: var(--el-table-header-text-color);
|
background: #102441;
|
}
|
// 分页
|
:deep(.el-pagination) {
|
display: flex;
|
justify-content: center;
|
|
}
|
:deep(.el-pagination button) {
|
background: center center no-repeat none !important;
|
color: #8eb8ea !important;
|
}
|
:deep(.el-pager li) {
|
background: none !important;
|
color: #8eb8ea !important;
|
}
|
:deep(.el-pager li.is-active) {
|
background: #021022 !important;
|
border-radius: 0px 0px 0px 0px;
|
border: 1px solid #1479ef;
|
color: #c7e1ff !important;
|
}
|
:deep(.el-pagination__goto) {
|
color: #c7e1ff !important;
|
}
|
:deep(.el-pagination__classifier) {
|
color: #c7e1ff !important;
|
}
|
:deep(.el-pager .el-input__wrapper) {
|
background: #021022 !important;
|
color: #c7e1ff !important;
|
border: 1px solid #1479ef !important;
|
z-index: 1;
|
}
|
:deep(.el-input__wrapper) {
|
background: #021022 !important;
|
box-shadow: none !important;
|
border: 1px solid #178bff;
|
color: #fff !important;
|
}
|
:deep(.el-input__inner) {
|
color: #fff !important;
|
}
|
</style>
|
