<template>
<div class="taskDetail" v-show="visible">
<editAndAddPage :router="'/basicConfiguration'" eyeType :title="titles" @cancel="cancel" @submit="submit">
<template v-slot:topTitle>
<span class="top_title base-flex-align">
<span class="icon_info"></span>
<span class="title_info">{{ jobName }}</span>
<span class="status_info base-flex-align" :class="{ green_color: taskStatus == 1, blue_color: taskStatus == 2, red_color: taskStatus == 3 }">
{{ taskStatusName[taskStatus].title }}
</span>
</span>
</template>
<template v-slot:pageBody>
<div class="mian-content">
<div class="table-box">
<div class="title-info"><i></i>{{ $t('下发列表') }}</div>
<a-table :columns="columns" :data-source="tableData" row-key="id" :scroll="{ x: '100%', y: 220 }" :pagination="false">
<template slot="operation" slot-scope="text, record">
<span :class="taskStatusName[record.detectorSendStatus].icon || ''" />
<a-tooltip placement="top">
<template slot="title">
<span>{{ record.weekInfo }}</span>
</template>
{{ taskStatusName[record.detectorSendStatus].title || "--" }}
</a-tooltip>
<hd-icon type="files" />
</template>
</a-table>
</div>
<div class="pagination_box" v-show="tableData.length">
<my-pagination style="padding: 0 20px" :pageIndex.sync="pagination.currentPage" @changePage="changePage" :pageSize="pagination.pageSize" :total="pagination.totalRows" @onShowSizeChange="onShowSizeChange"></my-pagination>
</div>
<div class="config-box">
<div class="title-info"><i></i>{{ $t('空开配置') }}</div>
<div class="config-list">
<div class="config-item" v-for="(item, index) in configDetail" :key="index">
<div class="config-title">{{ item.configTypeName }}</div>
<div class="config-content">
<div>
<span>{{ $t('配置内容:') }}</span>
<span class="icon-item" :class="{ icon_gray: item.cmd == 0 }"></span>
<span>{{ item.cmd == 0 ? $t('分闸') : $t('合闸') }}</span>
</div>
<div>
<span>{{ $t('时间范围:') }}</span>
<span>{{ item.executeTime }}</span>
</div>
<div class="week-item">
<span>{{ $t('运行周期:') }}</span>
<span v-for="(el, indx) in item.weekList" :key="indx">{{ el }} </span>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
</editAndAddPage>
</div>
</template>
<script>
import factory from '../factory'
import myPagination from '@/components/scfComponents/paginationFormwork/myPagination.vue'
import editAndAddPage from '@/components/scfComponents/editAndAddPage/editAndAddPage.vue'
export default {
components: { editAndAddPage, myPagination },
data() {
return {
titles: '空开定时任务详情',
visible: false,
columns: [
{
title: '设备名称',
dataIndex: 'deviceName',
key: 'deviceName',
ellipsis: true,
},
{
title: '操作结果',
dataIndex: 'operation',
key: 'operation',
ellipsis: true,
scopedSlots: { customRender: 'operation' },
},
{
title: '探测器名称',
dataIndex: 'detectorName',
key: 'detectorName',
ellipsis: true,
},
{
title: '探测器型号',
dataIndex: 'productModel',
key: 'productModel',
ellipsis: true,
},
{
title: '探测器编号',
dataIndex: 'detectorUniqueCode',
key: 'detectorUniqueCode',
ellipsis: true,
},
{
title: '所属组织',
dataIndex: 'detectorOwnerName',
key: 'detectorOwnerName',
ellipsis: true,
},
],
tableData: [],
jobName: '',
jobId: '',
taskStatus: '', // 任务状态
taskStatusName: {
1: { title: this.$t('下发成功'), icon: 'hd-status-success' },
2: { title: this.$t('下发中'), icon: 'hd-status-running' },
3: { title: this.$t('下发失败'), icon: 'hd-status-error' },
4: { title: this.$t('已清除'), icon: 'hd-status-error' },
},
configDetail: [],
// 分页
pagination: {
pageSize: 10,
currentPage: 1,
totalRows: 0,
},
}
},
methods: {
// 打开弹窗
showModal(record) {
this.visible = true
this.jobName = record.jobName
this.taskStatus = record.status
this.jobId = record.jobId
this.getDetailList()
this.getDetectorJob()
},
// 获取详情列表
getDetailList() {
let params = {
jobId: this.jobId,
page: this.pagination.currentPage,
pageSize: this.pagination.pageSize,
}
factory.getBatchjobDetailList(params).then(res => {
if (res.success) {
this.tableData = (res.data.pageData || []).map(item => ({
...item,
weekInfo: (item.configList || [])
.filter(Boolean)
.map(el => el.configTypeName || '')
.join(','),
}))
console.log(this.tableData, 'this.tableData')
this.pagination.totalRows = res.data.totalCount || 0
}
})
},
// 查询已存在空开定时任务
getDetectorJob() {
factory.getDetectorJob(this.jobId).then(res => {
if (res.success) {
this.configDetail =
(res.data || []).map(item => {
item.weekList = this.getActiveDays(item.rept)
return item
}) || []
}
})
},
getActiveDays(rept) {
const daysStr = rept.slice(0, 7).padEnd(7, '0')
const activeDays = []
const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
for (let i = 0; i < daysStr.length; i++) {
if (daysStr[i] == '1') {
activeDays.push(weekdays[i])
}
}
return activeDays
},
// 失败重发
resendBatchjob() {
factory.resendBatchjob(this.jobId).then(res => {
if (res.success) {
}
})
},
// 取消
cancel() {
this.visible = false
},
},
}
</script>
<style lang="less" scoped>
.taskDetail {
.top_title {
.icon_info {
width: 1px;
height: 16px;
margin: 0 12px;
display: inline-block;
background: rgb(105, 118, 136);
}
.title_info {
color: rgb(66, 75, 86);
font-family: '微软雅黑';
font-size: 18px;
font-weight: 400;
}
.status_info {
margin-left: 12px;
color: rgb(255, 255, 255);
font-family: '阿里巴巴普惠体';
font-size: 14px;
height: 24px;
font-weight: 400;
padding: 1px 12px;
border-radius: 3px;
&.green_color {
background: rgb(39, 208, 90);
}
&.blue_color {
background: rgb(41, 141, 255);
}
&.red_color {
background: rgb(233, 70, 58);
}
}
}
.mian-content {
width: 100%;
height: 100%;
position: relative;
box-sizing: border-box;
text-align: left;
background-color: #eceef1;
.title-info {
display: flex;
align-items: center;
color: rgb(21, 23, 26);
font-family: '阿里巴巴普惠体';
font-size: 16px;
font-weight: 700;
margin-bottom: 16px;
i {
width: 4px;
height: 16px;
display: inline-block;
background: rgb(41, 141, 255);
margin-right: 12px;
}
}
.table-box,
.config-box {
width: 100%;
padding: 20px;
border-radius: 8px;
box-sizing: border-box;
background: rgb(255, 255, 255);
}
.config-box {
margin-top: 16px;
}
.pagination_box {
width: 100%;
height: 64px;
position: relative;
background: #ffffff;
}
.config-list {
.config-item {
width: 33%;
border: 1px solid #f2f3f4;
.config-title {
height: 46px;
color: rgb(66, 75, 86);
font-family: '阿里巴巴普惠体';
font-size: 14px;
font-weight: 400;
padding: 12px 16px 12px 16px;
background: rgb(242, 243, 244);
border-bottom: 1px solid rgb(229, 231, 234);
}
.config-content {
height: 114px;
padding: 16px;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: flex-start;
> div > span:first-child {
margin-right: 8px;
}
.icon-item {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
background: rgb(39, 208, 90);
}
.icon_gray {
background: rgb(157, 166, 177);
}
}
}
}
}
}
</style> 代码评审
最新发布
本文介绍了一个使用Ant构建工具处理变量bChange的例子。初始时变量被设置为'before'，但尝试通过<property>标签修改其值时失败。而使用<var>标签则成功将变量值更改为'after'。
扫一扫
1887
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
