monthly.vue

<template>
    <div class="monthly">
        <div class="asis-table-wrapper weather-echart-wrapper download-parent">
            <!-- 天气分析图 -->
            <!-- <scatter-chart id="monthScatterChart" class="month-scatter-block" :options="WeatherAnalyze_ops" chartType="Scatter"></scatter-chart>  -->
            <mix-charts chartId="monthScatterChart" class="month-scatter-block" :chartData="WeatherAnalyze_ops" chartType="Scatter" />
            <span class="ehcarts-title">{{ i18nFormatter(WeatherAnalyze_title) }}</span>
            <!-- <span class="download-text">导出数据</span> -->
            <!-- <span class="download-text" @click="getechartsId('monthScatterChart','Scatter','WeatherAnalyze',WeatherAnalyze_ops)">导出数据</span> -->
        </div>
        <div class="asis-table-wrapper">
             <h3 class="asis-table-header">
                <span class="asis-table-title">{{ i18nFormatter(WeatherSynthetical_title) }}</span>
                <span class="asis-table-download" @click="dealExport('domAsis', i18nFormatter(WeatherSynthetical_title))">{{$t('allPages.load')}}</span>
            </h3> 
            <div class="asis-table-content">
                <common-tab v-loading="loading" :tableData="WeatherSynthetical_ops" id="domAsis" :headData="WeatherSynthetical_head" :tabHeight="''"></common-tab>
            </div>
        </div>
        <div class="asis-table-wrapper">
            <h3 class="asis-table-header">
                <span class="asis-table-title">{{ i18nFormatter(WeatherDetail_title) }}</span>
                <span class="asis-table-download" @click="dealExport('domDetail', i18nFormatter(WeatherDetail_title))">{{$t('allPages.load')}}</span>
            </h3>
            <div class="asis-table-content">
                <common-tab v-loading="loading" :tableData="WeatherDetail_ops" id="domDetail" :headData="WeatherDetail_head" :tabHeight="''"></common-tab>
            </div>
        </div>
    </div>
</template>

<script>
import publicChart from '../common/publicChart'
import commonTable from '../../public/tableCommon'
export default {
    props: {
        propparam: Object
    },
    data() {
        return {
            startDate:'',
            endDate:'',
            loading: true,
            // monthScatter_ops: {},
            quarterVal: '第一季度',
            WeatherSynthetical_head: [],
            WeatherDetail_head: [],
            WeatherAnalyze_title: '',
            WeatherSynthetical_title: '',
            WeatherDetail_title: '',
            WeatherAnalyze_ops: {}, // 天气分析
            WeatherSynthetical_ops: [], // 天气综合列表
            WeatherDetail_ops: [],  // 每日详情
            tableKeyToId: {},
            tableIds: '',
            emitData: {},
            kpiArr: {
                'TRAFFIC': '客流量',
                'SALES': '销售额',
                'ENTERINGRATE': '进店率',
                'PREPRICE': '客单价',
                'PERAREAVALUE': '坪效',
                'ORDER': '成交量',
                'HANDBAGRATE': '提袋率',
                'DURATIONTIME': '滞留时间',
            }
        }
    },
    components: {
        'scatter-chart': publicChart,
        'common-tab': commonTable,
    },
    watch: {
        propparam: {
            handler: 'refreshHandle',
            immediate: true
        }
    },
    mounted() {
        // this.getMonthScatter();
    },
    methods: {
        refreshHandle(param) {
            if(param.dateType !== '/weatherasis/monthly') return;
            this.emitData = param.data;
            this.loading = true;
            if(this.tableIds && JSON.stringify(this.tableKeyToId) !== '{}') {
				this.getChartData(this.tableIds);
			} else {
				this.getChartId();
			}
        },
        getChartId() {
            this.tableKeyToId = {};
            this.tableIds = '';
            this.$api.baseReport.reportChart({
                report: 'WeatherReport',
                // _t: Date.parse(new Date()) / 1000
            })
            .then(res => {
                let tableItem = res.data.data;
                tableItem.forEach((item, index) => {
                    this.tableKeyToId[item.key] = item.id;
                    if(item.key === 'WeatherAnalyze' || item.key === 'WeatherSynthetical' || item.key === 'WeatherDetail') {
                        if(index == tableItem.length - 1) {
                            this.tableIds += item.id;
                        } else {
                            this.tableIds += item.id + ',';
                        }
                    }
                });
                this.getChartData(this.tableIds);
            })
        },
        getChartData(tableIds) {
            if(!tableIds) return;
            this.WeatherAnalyze_ops = {};
            this.WeatherSynthetical_ops = [];
            this.WeatherDetail_ops = [];
            let apiUrl = '', param = {};
            let formatTime = this.newDateFormat('month',this.emitData.asis_time);
            this.startDate = formatTime.startTime;
            this.endDate = formatTime.endTime;
            param = {
                orgIds: this.emitData.asis_org,
                startDate: this.startDate,
                endDate: this.endDate,
                chartIds: tableIds,
                kpiType: this.emitData.asis_kpi,
            }
            let {params,asisLevel} = this.dealFormat(param,this.emitData);
            this.$api.analysisReport.weatherAnalysis(asisLevel, params)
            .then(res => {
                setTimeout(() => {
                    this.loading = false;
                }, 500);
                let report = 'WeatherReport'
                // this.WeatherAnalyze_title = res.data.data.body['WeatherAnalyze'].title;
                // this.WeatherSynthetical_title = res.data.data.body['WeatherSynthetical'].title;
                // this.WeatherDetail_title = res.data.data.body['WeatherDetail'].title;
                this.WeatherAnalyze_title = report + 'WeatherAnalyze';
                this.WeatherSynthetical_title = report + 'WeatherSynthetical';
                this.WeatherDetail_title = report+ 'WeatherDetail';
                let  {
                    WeatherAnalyze
                    , WeatherSynthetical
                    , WeatherDetail
                } = res.data.data.body

                WeatherAnalyze['otherConf'] = {
                    _color: ['#3BB8FF', '#3D97CB', '#87D14B', '#0069FF', '#FF9631', '#FFC62E', '#6784E3', '#3BB8FF', '#3D97CB', '#87D14B', '#0069FF', '#FF9631', '#FFC62E', '#6784E3', '#3BB8FF', '#3D97CB', '#87D14B', '#0069FF', '#FF9631', '#FFC62E'],
                    kpiName: this.kpiArr[this.emitData.asis_kpi]
                }
                this.WeatherAnalyze_ops = WeatherAnalyze
                let WeatherSynthetical_series = this.dealColWeatherCode(WeatherSynthetical.series, 0)
                let WeatherDetail_series = this.dealColWeatherCode(WeatherDetail.series, 2)
                this.WeatherSynthetical_head = this.dealHead(WeatherSynthetical.xaxis.data);
                this.WeatherDetail_head = this.dealHead(WeatherDetail.xaxis.data);
                this.WeatherSynthetical_ops = this.dealData(WeatherSynthetical_series, this.WeatherSynthetical_head);
                this.WeatherDetail_ops = this.dealData(WeatherDetail_series, this.WeatherDetail_head);
            })
            .catch(err => {
                this.catchErrorHandle(err)
            })
        },
        dealHead(headData) {
            let resultHead = [];
            headData.forEach((item, index) => {
                resultHead.push({
                    prop: 'defaultOrg' + index,
                    label: item
                })
            })
            return resultHead;
        },
        weatherFormat(row, column, cellValue) {
            let dicWeather = this.getSessionLocal('weather', cellValue)
            return dicWeather ? this.$t('dictionary.' + dicWeather) : this.$t('dictionary.unknow');
        },
        dealColWeatherCode(data, colNum) {
            if (!data.length) return data
            return data.map(item => {
                item.data = item.data.map((dataItem, dataIndex) => {
                    dataItem = dataIndex === colNum ? this.weatherFormat(0, 0, dataItem) : dataItem
                    return dataItem
                })
                return item
            })
        },
    }
}
</script>

<style scoped>
    /* @import url(./public/css/common.css); */
    .weather-table-wrapper {
        padding: 26px;
        box-sizing: border-box;
    }

    .quarter-sel-wrapper {
        float: left;
        font-size: 13px !important;
        color: #444;
        padding-left: 137px;
    }

    .quarter-sel-wrapper label {
        margin-right: 10px;
    }
    
    .weather-echart-wrapper {
        padding: 0;
    }

    /* #monthScatterChart, */
    .month-scatter-block {
        height: 731px;
        background: #fff;
    }

    .week-heatmap-chart 
     {
        height: 722px;
    }

    .chart-title {
        left: 26px;
        top: 26px;
    }

    @media only screen and (max-width: 1366px) {
        .month-scatter-block {
            height: 500px;
        }
    }
    @media only screen and (max-width: 1280px) {
        .month-scatter-block {
            height: 500px;
        }
    }
</style>