Vue中实现表格统计

实现目标

statistic.js

const template = require('./content.html');
const commonTable = require('./commonTable')
module.exports = Vue.extend({
    name: 'statistic',
    template: template,
    components: {
        commonTable
    },
    data() {
        visitationAttendanceStatisticsData: {
            title: "巡视出勤统计",
            showSummary: true,
            labelData: [],
            propData: []
        },
        visitationFoundProblemStatisticsData: {
            title: "巡视发现问题统计",
            showSummary: true,
            labelData: [],
            propData: []
        },
    },
    methods: {
        getStatistics() {
            // 巡视出勤统计数据(接口获取)
            const visitationAttendanceStatisticsResData = [
                {
                    region: '中区分公司',
                    patrolTrackLength: '1',
                    dispatchedTrains: '2',
                    attendance: '3',
                    attendanceShiftsCount: '4',
                    patrolTeamsCount: '5',
                    humanPatrolTeamsCount: '6',
                },
                {
                    region: '西区分公司',
                    patrolTrackLength: '2',
                    dispatchedTrains: '3',
                    attendance: '4',
                    attendanceShiftsCount: '5',
                    patrolTeamsCount: '6',
                    humanPatrolTeamsCount: '7',
                }
            ]
            // 统计配置(不存在子节点情况)
            const visitationAttendanceStatisticsCountConfig = {
                countLabel: '类型',
                key: 'type',
                countLabelData: [
                    {
                        label: '巡视轨迹长度',
                        key: 'patrolTrackLength'
                    },
                    {
                        label: '出动车次',
                        key: 'dispatchedTrains'
                    },
                    {
                        label: '出动人次',
                        key: 'attendance'
                    },
                    {
                        label: '出勤班组次数',
                        key: 'attendanceShiftsCount'
                    },
                    {
                        label: '车巡出勤班组次数',
                        key: 'patrolTeamsCount'
                    },
                    {
                        label: '人巡出勤班组次数',
                        key: 'humanPatrolTeamsCount'
                    },
                ],
                countKey: 'region'
            }
            this.setTabelData(this.visitationAttendanceStatisticsData, visitationAttendanceStatisticsResData, visitationAttendanceStatisticsCountConfig) // 巡视出勤统计
            // 巡视发现问题统计数据(接口获取)
            const visitationFoundProblemStatisticsResData = [
                {
                    region: '中区分公司',
                    wellRepair: '2',
                    wellRepairProcessed: '1',
                    wellRepairUnProcessed: '1',
                    pipeSiltation: '4',
                    pipeSiltationProcessed: '2',
                    pipeSiltationUnProcessed: '2',
                    structuralDefect: '6',
                    structuralDefectProcessed: '3',
                    structuralDefectUnProcessed: '3',
                    illegalCandidPhotography: '8',
                    illegalCandidPhotographyProcessed: '4',
                    illegalCandidPhotographyUnProcessed: '4',
                    mismixing: '10',
                    mismixingProcessed: '5',
                    mismixingUnProcessed: '5',
                    landSubsidence: '12',
                    landSubsidenceProcessed: '6',
                    landSubsidenceUnProcessed: '6',
                    repairSurvey: '14',
                    repairSurveyProcessed: '7',
                    repairSurveyUnProcessed: '7',
                },
                {
                    region: '西区分公司',
                    wellRepair: '2',
                    wellRepairProcessed: '1',
                    wellRepairUnProcessed: '1',
                    pipeSiltation: '4',
                    pipeSiltationProcessed: '2',
                    pipeSiltationUnProcessed: '2',
                    structuralDefect: '6',
                    structuralDefectProcessed: '3',
                    structuralDefectUnProcessed: '3',
                    illegalCandidPhotography: '8',
                    illegalCandidPhotographyProcessed: '4',
                    illegalCandidPhotographyUnProcessed: '4',
                    mismixing: '10',
                    mismixingProcessed: '5',
                    mismixingUnProcessed: '5',
                    landSubsidence: '12',
                    landSubsidenceProcessed: '6',
                    landSubsidenceUnProcessed: '6',
                    repairSurvey: '14',
                    repairSurveyProcessed: '7',
                    repairSurveyUnProcessed: '7',
                },
            ]
            // 统计配置(存在子节点情况)
            const visitationFoundProblemStatisticsCountConfig = {
                countLabel: '类型',
                key: 'type',
                countLabelData: [
                    {
                        label: '井盖维修',
                        key: 'wellRepair'
                    },
                    {
                        label: '管内淤积',
                        key: 'pipeSiltation'
                    },
                    {
                        label: '结构性缺陷',
                        key: 'structuralDefect'
                    },
                    {
                        label: '违规偷拍',
                        key: 'illegalCandidPhotography'
                    },
                    {
                        label: '错混接',
                        key: 'mismixing'
                    },
                    {
                        label: '地陷',
                        key: 'landSubsidence'
                    },
                    {
                        label: '修补测',
                        key: 'repairSurvey'
                    },
                ],
                countKey: 'region',
                childCountKey: [
                    {
                        label: '已处理',
                        key: 'Processed'
                    },
                    {
                        label: '未处理',
                        key: 'UnProcessed'
                    },
                    {
                        label: '全部',
                        key: ''
                    },
                ]
            }
            this.setTabelData(this.visitationFoundProblemStatisticsData, visitationFoundProblemStatisticsResData, visitationFoundProblemStatisticsCountConfig) // 巡视发现问题统计
        },
        /**
         * setTabelData
         * @param {Object} target { "title": "", // 表格标题 "showSummary": true, "labelData": [], propData: [] }
         * @param {Array} list [{}]
         * @param {Object} countConfig [{}]
         */
        // 处理表格数据
        setTabelData (target, list, countConfig) {
            if (!Array.isArray(list) || !list.length) {
                target.labelData = []
                target.propData = []
                return
            }
            let labelData = []
            let propData = []
            // 构建统计列(首行)
            labelData.push({
                label: countConfig.countLabel,
                prop: countConfig.key,
            })
            // 没有子节点
            if(!countConfig.childCountKey) {
                // 统计条件列
                list.forEach((listItem, listIndex) => {
                    labelData.push({
                        label: listItem[countConfig.countKey],
                        prop: `prop${listIndex}`
                    })
                })
                // 根据配置项生成统计列、条件列内容值
                countConfig.countLabelData.forEach(item => {
                    const obj = {
                        [countConfig.key]: item.label,
                    }
                    list.forEach((listItem, listIndex) => {
                        obj[`prop${listIndex}`] = listItem[item.key]
                    })
                    propData.push(obj)
                })
            }else {
                list.forEach((listItem, listIndex) => {
                    labelData.push({
                        label: listItem[countConfig.countKey],
                        child: countConfig.childCountKey.map((childItem, childIndex) => ({
                            label: childItem.label,
                            prop: `prop${listIndex}${childIndex}`
                        }))
                    })
                })
                countConfig.countLabelData.forEach(item => {
                    const obj = {
                        [countConfig.key]: item.label,
                    }
                    list.forEach((listItem, listIndex) => {
                        countConfig.childCountKey.forEach((childItem, childIndex) => {
                            obj[`prop${listIndex}${childIndex}`] = listItem[`${item.key}${childItem.key}`]
                        })
                    })
                    propData.push(obj)
                })
            }
            target.labelData = labelData
            target.propData = propData
        },
    },
    created() {
        this.getStatistics()
    }
})

statistic.html

<div class="statistic">
    <!-- 巡视发现问题统计 -->
    <common-table :tableData="visitationFoundProblemStatisticsData"></common-table>
    <!-- 巡视出勤统计 -->
    <common-table :tableData="visitationAttendanceStatisticsData"></common-table>
</div>

commonTable.js

const template = require('./content.html');
// 定义组件
module.exports = Vue.extend({
    name: 'commonTable',
    template: template,
    props: {
        tableData: {
            type: Object,
            default: () => {
                return {}
            }
        }
    },
});

commonTable.html

<div class="in-commonTable">
    <p class="title">{{ tableData.title ? tableData.title : '' }}</p>
    <el-table 
        :data="tableData.propData" 
        :header-cell-style="{background: '#F2F2F2'}"
        :cell-style="{textAlight:'center'}"
        style="width: 100%;"
        border
        :show-summary="tableData.showSummary">
        <el-table-column 
            v-for="(item,index) in tableData.labelData" 
            :key="index"
            :prop="item.prop" 
            :label="item.label" 
            align="center">
            <el-table-column 
                v-for="(childItem,childIndex) in item.child" 
                :prop="childItem.prop" 
                :label="childItem.label" 
                align="center">
            </el-table-column>
        </el-table-column>
    </el-table>
</div>