index.vue

<template>
    <div class="clerk-wrapper queueManagementContainer">
        <div class="header manage-head-wrapper">
            <el-form ref="form" class="boxShadow searchFormSocial" label-width="100px" inline>
                <el-form-item :label="$t('table.mall')">
                    <el-select v-model="searchForm.mallId" filterable :placeholder="$t('pholder.select')" @change="mallChange">
                        <el-option v-for="item in mallListForTerm" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('table.date')">
                    <el-date-picker type="date" :placeholder="$t('pholder.date')" v-model="searchForm.countDate" style="width: 100%;"></el-date-picker>
                </el-form-item>
                <el-form-item :label="$t('table.type')">
                    <el-select v-model="searchForm.chartDataType" filterable :placeholder="$t('pholder.select')">
                        <el-option  label='summary' value="summary"></el-option>
                        <el-option  label='detail' value="detail"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('table.granularity')">
                    <el-select v-model="searchForm.minuteGranularity" filterable :placeholder="$t('pholder.select')">
                        <el-option v-for="item in granularityListData" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" class="search-btn" size="mini" plain @click="searchFun">{{$t('button.search')}}</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="manage-content boxShadow contentSocial">
            <h3 class="asis-table-header single-report-header tf-table-header socialHeader">
                <span class="asis-table-download" @click="downloadData(i18nFormatter(trafficFlow_title) + '-' + Time())">{{$t('allPages.load')}}</span>
                <span class="report-type-box">
                    <span :class="isTabChart ? 'report-item line-report' : 'report-item line-report report-item-line'" @click="selReport('line')"></span>
                    <span :class="isTabChart ? 'report-item report-item-tab' : 'report-item'" @click="selReport('table')"></span>
                </span>
            </h3>
            <div class="asis-table-content" v-loading="loading">
                <el-table show-summary v-show="isTabChart" class="asis-table baseasis-table" id="domBaseTrafficFlow" :data="tabOps" header-row-class-name="asis-table-head" style="width: 100%" :max-height="tableHeight">
                    <el-table-column v-if="tabOps.length" type="index" :label="$t('table.order')" align="center" width="80">
                        <template slot-scope="scope">
                            <span>{{ indexFormatter(scope) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column :prop="item.prop" :label="item.label" align="center" v-for="(item,index) in tabHeadData" :key="index" min-width="100">
                    </el-table-column>
                </el-table>
                <div v-show="!isTabChart">
                    <div id="bdBarChart" class="area-line-chart" :style="{ height: tableHeight + 'px' }"></div>
                </div>
            </div>
        </div>
        <export-data-dialog ref="exportDialog"></export-data-dialog>
    </div>
</template>

<script>
    import moment from 'moment'
    import echarts from "echarts";
    import exportData from "../../public/exportData";
    import {
        columnComputed,
        rowComputed,
        curryAvgAndSum,
        combineHeadAndBody
    } from '@/utils'
    export default {
        data() {
            return {
                granularityListData:[
                    {
                        value: 1,
                        label: '1min'
                    }, {
                      value: 5,
                      label: '5min'
                    }, {
                      value: 10,
                      label: '10min'
                    },{
                      value: 15,
                      label: '15min'
                    },{
                      value: 30,
                      label: '30min'
                    },{
                      value: 60,
                      label: '1h'
                    }
                ],
                mallListForTerm: [],
                trafficFlow_title: "BasicReportdetailData", //报表
                loading: false,
                searchForm: {
                    mallId: '',
                    countDate: new Date(),
                    chartDataType:'summary',
                    minuteGranularity:10
                },
                isTabChart: false,
                tabHeadData: [],
                tabOps: [],
                chart: '',
                option: {
                    tooltip: {
                        trigger: 'axis',
                        backgroundColor: "rgba(255,255,255,0.8)",
                        borderWidth: "2", //边框宽度设置1
                        borderColor: "gray", //设置边框颜色
                        textStyle: {
                            color: "#333" //设置文字颜色
                        },
                        formatter:this.tooltipFormat
                    },
                    legend: {
                        data: [],
                        padding:[15,0,0,0]
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                     color: ['#3BB8FF', '#FFC62E', '#97c05c','#d83965','#9036aa'],
                    xAxis: [{
                        type: 'category',
                        data: [],
                        axisPointer: {
                            type: 'shadow'
                        }
                    }],
                    yAxis: [
                        {
                          type: 'value',
                          name: 'Customers'
                        }
                      ],
                    series: []
                }
            }
        },
        components: {
            "export-data-dialog": exportData,
        },
        mounted() {
            this.chart = echarts.init(document.getElementById('bdBarChart'));
            this.getMallListForTerm();
        },
        computed: {
            tableHeight() {
                const windowInnerHeight = window.innerHeight;
                return windowInnerHeight - windowInnerHeight * 0.24;
            },
            barLineIcon() {
                if (this.isTabChart) {
                    return "report-item line-report";
                } else {
                    return "report-item line-report report-item-line";
                }
            },
        },
        methods: {
            tooltipFormat(parmas){
                let htmls = "";
                htmls = `<div><div style="font-size:14px;height:31px;line-height:31px;padding-left:15px;padding-right:15px;">${parmas[0].name}</div>`;
                parmas.forEach((item,index) => {
                    htmls += `<p style="font-size:13px;padding:4px 15px;">${item.marker} ${item.seriesName}: ${item.data }${this.$t('format.perNum')}</p>`;
                });
                htmls += "</div>";
                return htmls;
            },
            indexFormatter({ $index, row }) {
              const { createRow, tabOps } = this
              const realDataLen = tabOps.length
              return $index + 1
            },
            // 广场
            getMallListForTerm() {
                this.mallListForTerm = [];
                this.searchForm.mallId = "";
                this.$api.base.mall({
                    accountId: this.$cookie.get('accountId'),
                    status_arr: "1,3"
                }).then(data => {
                    let result = data.data;
                    if (result.data.length) {
                        if (this.getSessionLocal("mallId")) {
                            this.searchForm.mallId = Number(this.getSessionLocal("mallId"));
                        } else {
                            this.searchForm.mallId = result.data[0].id;
                            this.setSessionLocal("mallId", this.searchForm.mallId);
                        }
                        this.mallListForTerm = result.data;
                        this.getData()
                    }
                })
            },
            mallChange(val) {
                this.setSessionLocal("mallId", val);
            },
            searchFun() {
                this.getData()
            },
            getData() {
                this.tabHeadData = [];
                this.tabOps = [];
                this.loading = true;
                this.searchForm.countDate = moment(this.searchForm.countDate).format('YYYY-MM-DD')
                this.searchForm.chartType = this.isTabChart ? "table" : "line"
                this.$api.queueManagementApi.getCustomersOverview(this.searchForm).then(res => {
                    this.loading = false;
                    if(res.data.code==200){
                        let resData = res.data.data;
                        if (this.isTabChart) { // 表格
                            this.getTableData(resData)
                        } else { // 图
                            this.getEcartsData(resData)
                        }
                    }
                })
            },
            getEcartsData(resData) {
                this.option.xAxis[0].data = resData.xaxis.data;
                this.option.series = resData.series;
                this.option.legend.data = []
                resData.series.forEach((item,index)=>{
                    this.option.legend.data.push(item.name)
                })
                this.chart.setOption(this.option, true)
            },
            getTableData(resData){
                let originData = JSON.parse(JSON.stringify(resData.series))
                let flowHeadData = JSON.parse(JSON.stringify(resData.xaxis && resData.xaxis.data || []));
                this.tabHeadData = flowHeadData.reduce((arr, curr, index) => {
                    arr.push({
                      prop: `defaultOrg${index}`,
                      label: curr
                    })
                    return arr
                }, [])
                const tbodyData = originData.reduce((arr, curr) => {
                      arr.push(curr.data)
                      return arr
                }, [])
                this.tabOps = combineHeadAndBody(this.tabHeadData, tbodyData)
            },
            selReport(iconType) {
                if (iconType === "line") {
                    this.isTabChart = false;
                    this.getData();
                } else {
                    this.isTabChart = true;
                    this.getData();
                }
            },
            downloadData(title) {
                if (this.isTabChart) {
                    this.dealExport("domBaseTrafficFlow", title);
                } else {
                    this.exportDataHandle(title);
                }
            },
            exportDataHandle(title) {
                const { queuingUrl } = window._vionConfig;
                let params =`countDate=${moment(this.searchForm.countDate).format('YYYY-MM-DD')}&chartType=${this.searchForm.chartType}&mallId=${this.searchForm.mallId}`
                const downloadUrl = `${queuingUrl}/queuing/customers-overview/chart/export?${params}&localLanguage=${localStorage.getItem("lang")}&authorization=${this.$cookie.get("atoken")}&title=${encodeURI(title)}`;
                window.open(downloadUrl)
            }
        }
    }
</script>

<style scoped="scoped" lang="less">

</style>