<template>
|
<div style="margin-right: 30px">
|
<!-- 操作按钮区域 -->
|
<div class="table-operator">
|
<a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
|
<a-divider type="vertical" />
|
<a-button @click="loadData()" type="primary" icon="search">刷新</a-button>
|
<!--<a-button type="primary" icon="download" @click="handleExportXls('Activity')">导出</a-button>-->
|
</div>
|
|
<!-- table区域-begin -->
|
<div>
|
<a-table
|
ref="table"
|
size="middle"
|
bordered
|
rowKey="id"
|
class="infoTable"
|
:scroll="{ x: true }"
|
:columns="defaultColumns"
|
:dataSource="dataSource"
|
:pagination="ipagination"
|
:loading="loading"
|
@change="handleTableChange"
|
>
|
<span slot="action" slot-scope="text, record">
|
<a v-if="new Date().getTime() < Date.parse(record.startTime)" @click="handleEdit(record)">编辑</a>
|
<a v-else disabled>编辑</a>
|
<a-divider type="vertical" />
|
<a @click="viewVehicleFrequency(record)">查看车辆加油频次</a>
|
<a-divider type="vertical" />
|
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
|
<a>删除</a>
|
</a-popconfirm>
|
</span>
|
</a-table>
|
</div>
|
<!-- table区域-end -->
|
|
<!-- 表单区域 -->
|
<activity-modal ref="modalForm" @ok="modalFormOk"></activity-modal>
|
</div>
|
</template>
|
|
<script>
|
import ActivityModal from './ActivityModal'
|
import { JeecgListMixin } from '@tievd/cube-block/lib/mixins/JeecgListMixin'
|
import { getAction } from '@tievd/cube-block/lib/api/manage'
|
|
export default {
|
name: 'ActivityList',
|
|
mixins: [JeecgListMixin],
|
|
components: {
|
ActivityModal,
|
},
|
|
data() {
|
return {
|
description: 'Activity列表',
|
// 表头
|
columns: [],
|
// 列定义
|
defaultColumns: [
|
{
|
title: '序号',
|
dataIndex: '',
|
key: 'rowIndex',
|
width: 60,
|
align: 'center',
|
customRender: function (t, r, index) {
|
return parseInt(index) + 1
|
},
|
},
|
{
|
title: '活动名称',
|
align: 'center',
|
dataIndex: 'name',
|
},
|
{
|
title: '开始时间',
|
align: 'center',
|
dataIndex: 'startTime',
|
},
|
{
|
title: '结束时间',
|
align: 'center',
|
dataIndex: 'endTime',
|
},
|
{
|
title: '状态',
|
align: 'center',
|
dataIndex: '',
|
customRender: function (t, r) {
|
let date = new Date().getTime()
|
if (date < Date.parse(r.startTime)) {
|
return '未开始'
|
} else if (date > Date.parse(r.endTime)) {
|
return '已结束'
|
} else {
|
return '进行中'
|
}
|
},
|
},
|
{
|
title: '操作',
|
dataIndex: 'action',
|
width: 150,
|
align: 'center',
|
scopedSlots: { customRender: 'action' },
|
},
|
],
|
url: {
|
list: '/jyz/activity/list',
|
delete: '/jyz/activity/delete',
|
deleteBatch: '/jyz/activity/deleteBatch',
|
exportXlsUrl: '/jyz/activity/exportXls',
|
getVehicleFrequency: '/jyz/activity/getVehicleFrequency',
|
},
|
}
|
},
|
|
methods: {
|
viewVehicleFrequency(record) {
|
console.log('查看车辆加油频次', record)
|
getAction(this.url.getVehicleFrequency, { actId: record.id }).then((res) => {
|
if (res.code === 200) {
|
const result = res.result
|
const activity = result.activity || {}
|
const beforeData = result.beforeActivity || {}
|
const duringData = result.duringActivity || {}
|
const afterData = result.afterActivity || {}
|
|
const formatNumber = (num) => num ? Number(num).toFixed(2) : '0.00'
|
|
const content = `
|
<div style="padding: 10px;">
|
<h3 style="text-align: center; margin-bottom: 15px;">${activity.name || '活动'}</h3>
|
<p style="text-align: center; color: #666; margin-bottom: 20px;">
|
活动时间：${activity.startTime} ~ ${activity.endTime}
|
</p>
|
|
<table style="width: 100%; border-collapse: collapse; margin-bottom: 20px;">
|
<thead>
|
<tr style="background-color: #f5f5f5;">
|
<th style="border: 1px solid #ddd; padding: 8px; text-align: center;">统计项</th>
|
<th style="border: 1px solid #ddd; padding: 8px; text-align: center;">活动前</th>
|
<th style="border: 1px solid #ddd; padding: 8px; text-align: center;">活动中</th>
|
<th style="border: 1px solid #ddd; padding: 8px; text-align: center;">活动后</th>
|
</tr>
|
</thead>
|
<tbody>
|
<tr>
|
<td style="border: 1px solid #ddd; padding: 8px; text-align: center; font-weight: bold;">加油车辆数</td>
|
<td style="border: 1px solid #ddd; padding: 8px; text-align: center;">${beforeData.totalVehicles || 0} 辆</td>
|
<td style="border: 1px solid #ddd; padding: 8px; text-align: center; color: #1890ff;">${duringData.totalVehicles || 0} 辆</td>
|
<td style="border: 1px solid #ddd; padding: 8px; text-align: center;">${afterData.totalVehicles || 0} 辆</td>
|
</tr>
|
<tr>
|
<td style="border: 1px solid #ddd; padding: 8px; text-align: center; font-weight: bold;">加油记录数</td>
|
<td style="border: 1px solid #ddd; padding: 8px; text-align: center;">${beforeData.totalOilRecords || 0} 笔</td>
|
<td style="border: 1px solid #ddd; padding: 8px; text-align: center; color: #1890ff;">${duringData.totalOilRecords || 0} 笔</td>
|
<td style="border: 1px solid #ddd; padding: 8px; text-align: center;">${afterData.totalOilRecords || 0} 笔</td>
|
</tr>
|
<tr>
|
<td style="border: 1px solid #ddd; padding: 8px; text-align: center; font-weight: bold;">平均加油量</td>
|
<td style="border: 1px solid #ddd; padding: 8px; text-align: center;">${formatNumber(beforeData.avgOilVolume)} 升</td>
|
<td style="border: 1px solid #ddd; padding: 8px; text-align: center; color: #1890ff;">${formatNumber(duringData.avgOilVolume)} 升</td>
|
<td style="border: 1px solid #ddd; padding: 8px; text-align: center;">${formatNumber(afterData.avgOilVolume)} 升</td>
|
</tr>
|
<tr>
|
<td style="border: 1px solid #ddd; padding: 8px; text-align: center; font-weight: bold;">总加油量</td>
|
<td style="border: 1px solid #ddd; padding: 8px; text-align: center;">${beforeData.totalOilVolume || 0} 升</td>
|
<td style="border: 1px solid #ddd; padding: 8px; text-align: center; color: #1890ff;">${duringData.totalOilVolume || 0} 升</td>
|
<td style="border: 1px solid #ddd; padding: 8px; text-align: center;">${afterData.totalOilVolume || 0} 升</td>
|
</tr>
|
</tbody>
|
</table>
|
|
<p style="text-align: center; color: #999; font-size: 12px; margin-top: 10px;">
|
注：活动期间数据以蓝色高亮显示
|
</p>
|
</div>
|
`
|
this.$info({
|
title: '活动加油频次对比统计',
|
content: this.$createElement('div', { domProps: { innerHTML: content } }),
|
width: 700,
|
okText: '确定',
|
})
|
} else {
|
this.$message.error(res.message || '查询失败')
|
}
|
}).catch((err) => {
|
console.error(err)
|
this.$message.error('查询失败')
|
})
|
},
|
},
|
|
created() {},
|
}
|
</script>
|
<style scoped lang="less">
|
@import '~@assets/less/common.less';
|
/deep/ .ant-table-body {
|
height: 500px;
|
}
|
</style>
|
