修改折线图

zxl

2026-03-25 d29d77e91951e30abba6596359b138bc4c6ac108

 src/views/dataAnalysis/components/ActiveCom.vue

@@ -27,6 +27,8 @@
          <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>
@@ -43,6 +45,7 @@
<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',
@@ -113,11 +116,88 @@
        delete: '/jyz/activity/delete',
        deleteBatch: '/jyz/activity/deleteBatch',
        exportXlsUrl: '/jyz/activity/exportXls',
        getVehicleFrequency: '/jyz/activity/getVehicleFrequency',
      },
    }
  },

  methods: {},
  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() {},
}