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.areaName')">
                    <el-select v-model="searchForm.cashierAreaId" :placeholder="$t('pholder.areaSelect')" @change="areaChange">
                        <el-option v-for="item in areaListData" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('Lane Type')">
                    <el-select v-model="searchForm.counterType" class="laneType" clearable :placeholder="$t('pholder.selectLane')" @change="counterTypeChange">
                        <el-option :label="$t('pholder.all')" value="" />
                        <el-option v-for="item in counterTypeData" :key="item.key" :label="item.value" :value="item.key" />
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('table.laneName')">
                    <ul class="condition-box">
                        <li class="condition-item">
                            <div class="condition-item-option">
                                <el-select v-model="searchForm.cashierChannelId" clearable :placeholder="$t('pholder.selectLane')">
                                    <el-option :label="$t('pholder.all')" value="" />
                                    <el-option v-for="item in channelListData" :key="item.id" :label="item.name" :value="item.id" />
                                </el-select>
                                <!-- <el-select v-model="searchForm.cashierChannelIds" filterable :placeholder="$t('pholder.select')" class="mall-sel-box" multiple :reserve-keyword="true" collapse-tags @change="channelChangeHandle">
                                    <div :class="isMallSelAll ? 'sel-all-box selected' : 'sel-all-box'" @click="selAllHandle('Mall', channelListData)">
                                        <span class="custom-checkbox__input">
                                            <span class="custom-checkbox__inner"></span>
                                        </span>
                                        <span style="padding-left: 5px;">{{$t('allPages.all')}}</span>
                                    </div>
                                    <el-option v-for="item in channelListData" :key="item.id" :label="item.name" :value="item.id">
                                        <span class="custom-checkbox__input">
                                            <span class="custom-checkbox__inner"></span>
                                        </span>
                                        <span style="padding-left: 5px;">{{ item.name }}</span>
                                    </el-option>
                                </el-select> -->
                            </div>
                        </li>
                    </ul>
                </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>
                    <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 contentSocial boxShadow">
            <h3 class="asis-table-header single-report-header tf-table-header socialHeader">
                <span class="asis-table-download" @click="downloadData('Waiting Time Statistics' + '-' + 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('bar')"></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 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 {
                counterTypeData: [],
                mallListForTerm: [],
                areaListData: [],
                channelListData: [],
                trafficFlow_title: "regionalStatistics", //报表
                loading: false,
                searchForm: {
                    mallId: '',
                    cashierAreaId: '',
                    counterType: '',
                    cashierChannelId: '',
                    countDate: new Date()
                },
                isMallSelAll: false,
                isTabChart: false,
                tabHeadData: [],
                tabOps: [],
                chart: '',
                option: {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                        formatter: '{b}:{c}%'
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        name:'%',
                        type: 'value',
                        show:false
                    },
                    yAxis: {
                        name: 'Wating Time',
                        type: 'category',
                        // axisLine:{
                        //   show:false
                        // },
                        axisTick:{
                              show:false // 不显示坐标轴刻度线
                        },
                        data: []
                    },
                    series: [{
                        type: 'bar',
                        label: {
                            show: true,
                            formatter: function(params) {
                                return params.value + '%'
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    let colorList = ['#3BB8FF', '#FFC62E', '#97c05c', '#d83965', '#9036aa'];
                                    return colorList[params.dataIndex]
                                }
                            }
                        },
                        data: []
                    }]
                }
            }
        },
        components: {
            "export-data-dialog": exportData,
        },
        mounted() {
            this.getCounterType()
            this.chart = echarts.init(document.getElementById('bdBarChart'));
            this.getMallListForTerm();
        },
        computed: {
            tableHeight() {
                const windowInnerHeight = window.innerHeight;
                return windowInnerHeight - windowInnerHeight * 0.24;
            },
        },
        methods: {
            // 通道类型
            getCounterType() {
                this.$api.base.dataDic({
                    type: 'counterType'
                }).then(res => {
                    this.counterTypeData = res.data.data.map(item => {
                        if (localStorage.getItem('lang') == 'en_US') {
                            item.value = item.valueEn;
                        }
                        item.text = item.value
                        return item;
                    });
                })
            },
            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.getAreaList(this.searchForm.mallId);
                })
            },
            mallChange(val) {
                this.setSessionLocal("mallId", val);
                this.searchForm.cashierAreaId = ''
                this.searchForm.cashierChannelId = ''
                this.areaListData = [];
                this.channelListData = [];
                this.getAreaList(val)
            },
            // 区域
            getAreaList(val) {
                this.areaListData = [];
                this.$api.queueManagementApi.getAreaList({
                    mallId: val,
                    pageNum: 1,
                    pageSize: 999999
                }).then(res => {
                    let result = res.data;
                    if (result.code == 200) {
                        if (result.data.list && result.data.list.length > 0) {
                            this.searchForm.cashierAreaId = result.data.list[0].id
                            this.areaListData = result.data.list;
                            this.getData()
                            this.getChannelList()
                        }
                    }
                })
            },
            areaChange() {
                this.searchForm.cashierChannelId = ''
                this.getChannelList()
            },
            counterTypeChange() {
                this.isMallSelAll = false
                this.searchForm.cashierChannelId = ''
                this.getChannelList()
            },
            // 通道
            getChannelList() {
                this.channelListData = [];
                this.$api.queueManagementApi.getChannelList({
                    areaId: this.searchForm.cashierAreaId,
                    counterType: this.searchForm.counterType,
                    pageNum: 1,
                    pageSize: 999999
                }).then(res => {
                    let result = res.data;
                    if (result.code == 200) {
                        if (result.data.list && result.data.list.length > 0) {
                            this.channelListData = result.data.list;
                        }
                    }
                })
            },
            channelChangeHandle() {
                this.isMallSelAll = this.changeHandle(this.searchForm.cashierChannelIds, this.channelListData)
            },
            selAllHandle(selType, option) {
                let selectAll = 'is' + selType + 'SelAll';
                let selectVal = 'cashierChannelIds';
                if (this[selectAll]) {
                    this[selectAll] = false;
                    this.searchForm.cashierChannelIds = [];
                } else {
                    this[selectAll] = true;
                    this.searchForm.cashierChannelIds = [];
                    option.forEach(item => {
                        this.searchForm.cashierChannelIds.push(item.id);
                    })
                }
            },
            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" : "bar"
                let parmas = {
                    mallId: this.searchForm.mallId,
                    areaId: this.searchForm.cashierAreaId,
                    countDate: moment(this.searchForm.countDate).format('YYYY-MM-DD'),
                    chartType: this.isTabChart ? "table" : "bar",
                    counterId: this.searchForm.cashierChannelId
                }
                this.$api.queueManagementApi.getDistributeList(parmas).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.yAxis.data = resData.xaxis.data;
                this.option.series[0].data = resData.series[0].data;
                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 === "bar") {
                    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 =
                    `areaId=${this.searchForm.cashierAreaId}&counterId=${this.searchForm.cashierChannelId}&countDate=${moment(this.searchForm.countDate).format('YYYY-MM-DD')}&chartType=${this.searchForm.chartType}&mallId=${this.searchForm.mallId}`
                const downloadUrl = `${queuingUrl}/queuing/waitTime/distribute/export?${params}&localLanguage=${localStorage.getItem("lang")}&authorization=${this.$cookie.get("atoken")}&title=${encodeURI(title)}`;
                window.open(downloadUrl)
            }
        }
    }
</script>

<style scoped="scoped" lang="less">
    /deep/.el-select {
        width: 170px !important;
    }

    /deep/.el-date-editor {
        width: 170px !important;
    }

    /deep/.granularity.el-select {
        width: 120px !important;
    }

    /deep/.el-form-item__label {
        width: auto !important;
        min-width: 60px;
    }
</style>