boss/pages/main/index/data.vue

<template>
<div v-loading="loading" style="padding: 20px">
    <div style="padding-bottom: 20px">
        <el-tag style="margin-right: 10px" v-for="v in menu" :type="v.name==title?'success':'info'" @click="getData_(v.url,v.name)">{{v.name}}</el-tag>
    </div>

    <div style="padding-bottom: 20px">
        <el-select v-model="time_type" placeholder="请选择">
            <el-option v-for="item in time_type_data" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
        </el-select>
        <el-date-picker v-if="time_type == 1" v-model="date" type="daterange" style="width: 400px" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>

        <el-date-picker v-if="time_type == 2" v-model="month" style="width: 400px" type="monthrange" range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份">
        </el-date-picker>

        <el-button @click="search" type="primary">查询</el-button>
        <el-button @click="exportExcel" type="primary">导出表格</el-button>
    </div>

    <el-row>
        <el-col :span="24">
            <div class="grid-content bg-purple">
                <Line-Chart :source="source" :title="title" :width="1200" :height="400"></Line-Chart>
            </div>
        </el-col>
    </el-row>

    <el-table :data="table.tableData" style="width: 100%;">
        <el-table-column v-for="(value, index) in table.tableHeader" :key="index" :label="value.title">
            <template slot-scope="scope">
              {{scope.row[index]}}
            </template>
        </el-table-column>
    </el-table>



</div>
</template>

<script>
import LineChart from "@/components/Echart/line";
import {
    exportExcelFile
} from "@/utils/excel";
let firstDayOfThisMonth = new Date();
firstDayOfThisMonth.setDate(1);
firstDayOfThisMonth.setHours(0);
firstDayOfThisMonth.setMinutes(0);
firstDayOfThisMonth.setSeconds(0);
const startMonth = new Date();
startMonth.setMonth(startMonth.getMonth() - 12);
export default {
    inheritAttrs: false,
    components: {
        LineChart
    },
    props: [],
    data() {
        return {
            title: "实名认证数据面板",
            loading: true,
            source: {
                rows: [],
                data: [],
                day_data: []
            },
            time_type_data: [{
                    value: "1",
                    label: "按日"
                },
                {
                    value: "2",
                    label: "按月"
                }
            ],
            time_type: "1",
            date: [firstDayOfThisMonth, new Date()],
            month: [startMonth, firstDayOfThisMonth],
            type: "0",
            menu: [],
            url: "",
        };
    },
    computed: {
        'table': function () {
            let data = this.source
            if(data.day_data.length == 0){
                return {
                    tableData: [],
                    tableHeader: []
                }
            }

            let tableHeader = data.day_data.map((item) => {
                return {
                    title: item.title,
                }
            })
            // 日期
            let date = data.day_data[0].data
            // 日期遍历
            let tableData = []
            date.forEach((item, index) => {
                let row = []
                // 表头遍历
                tableHeader.forEach((item2, index2) => {
                    let val = data.day_data[index2].data[index]
                    row.push(val)
                })
                tableData.push(row)
            })

            // 添加汇总
            let sumRow = data.day_data.map((item,index) => {
                if(index == 0){
                    return "汇总"
                }else{
                    let sum = 0
                    item.data.forEach((item2) => {
                        sum += item2
                    })
                    return sum
                }
            })
            tableData.unshift(sumRow)

            return {
                tableHeader,
                tableData
            }
        }
    },
    watch: {},
    created() {},
    mounted() {
        this.getMenu();
    },
    methods: {
        async search() {
            this.getData_(this.url, this.title);
        },
        async getData_(url, title) {
            this.loading = true;
            this.title = title;
            this.url = url;
            let stime = "";
            let etime = "";
            if (this.time_type == 1) {
                stime = this.formatDate(this.date[0] / 1000);
                etime = this.formatDate(this.date[1] / 1000);
            } else {
                stime = this.formatDate(this.month[0] / 1000);
                etime = this.formatDate(this.month[1] / 1000);
            }
            let res = await this.$post(url, {
                time_type: this.time_type,
                stime: stime,
                etime: etime
            });
            this.loading = false;
            if (res.status == 1) {
                this.source = {
                    rows: res.data.day,
                    data: res.data.data,
                    day_data: res.data.day_data
                };
            }
        },
        async getMenu() {
            let url = "/uapi/data/day/menu";
            let res = await this.$post(url, {});
            if (res.status == 1) {
                this.menu = res.data;
                this.getData_("/uapi/data/day/project_all", "项目数据");
            }
        },
        formatDate(time) {
            if (time === "0") {
                return "--";
            }
            let now = new Date(time * 1000);
            let year = now.getFullYear();
            let month = now.getMonth() + 1;
            let date = now.getDate();
            let hour = now.getHours();
            let minute = now.getMinutes();
            let second = now.getSeconds();

            if (date < 10) {
                date = "0" + date;
            }

            if (month < 10) {
                month = "0" + month;
            }

            if (hour < 10) {
                hour = "0" + hour;
            }
            if (minute < 10) {
                minute = "0" + minute;
            }
            if (second < 10) {
                second = "0" + second;
            }
            return (
                year +
                "-" +
                month +
                "-" +
                date +
                " " +
                hour +
                ":" +
                minute +
                ":" +
                second
            );
        },
        exportExcel() {
            let colArr = [];

            let header = this.table.tableHeader.map(item => {
                return item.title;
            })

            // 去除汇总项
            let t_data = [...this.table.tableData]
            t_data.shift()

            colArr = [[...header],...t_data]

            let wscols = colArr.map((item) => {
                return {
                    wch: 10
                }
            });

            let stime = "";
            let etime = "";
            if (this.time_type == 1) {
                stime = this.formatDate(this.date[0] / 1000);
                etime = this.formatDate(this.date[1] / 1000);
            } else {
                stime = this.formatDate(this.month[0] / 1000);
                etime = this.formatDate(this.month[1] / 1000);
            }

            exportExcelFile(colArr, wscols, `${stime} - ${etime}数据看版`);
        }
    }
};
</script>

<style scoped>
.el-tag {
    cursor: pointer;
}
</style>