yearly.vue

<template>
  <div class="yearly">
    <div class="asis-table-wrapper weather-echart-wrapper download-parent">
      <!-- 天气分析图 -->
      <!-- <scatter-chart id="yearScatterChart" class="year-scatter-block" :options="WeatherAnalyze_ops" chartType="YearScatter"></scatter-chart>   -->
      <mix-charts chartId="yearScatterChart" class="year-scatter-block" :chartData="WeatherAnalyze_ops" chartType="Scatter" />
      <span class="ehcarts-title">{{ i18nFormatter(WeatherAnalyze_title) }}</span>
      <!-- <span class="download-text">{{$t('allPages.load')}}</span> -->
      <!-- <span class="download-text" @click="getechartsId('yearScatterChart','YearScatter','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>
        <div class="date-radio-wrapper quarter-sel-wrapper">
          <el-radio-group v-model="quarterVal" size="mini" fill="#0069FF" @change="getQuarterData('domDetail', quarterVal, 'WeatherDetail')">
            <!-- <el-tooltip content="1-3月" placement="top-start" popper-class="quarter-tooltip"> -->
            <el-radio-button label="Q1th" border title="1-3月">{{ $t('format.quarter1th') }}</el-radio-button>
            <!-- </el-tooltip> -->
            <!-- <el-tooltip content="4-6月" placement="top-start" popper-class="quarter-tooltip"> -->
            <el-radio-button label="Q2nd" border title="4-6月">{{ $t('format.quarter2nd') }}</el-radio-button>
            <!-- </el-tooltip> -->
            <!-- <el-tooltip content="7-9月" placement="top-start" popper-class="quarter-tooltip"> -->
            <el-radio-button label="Q3rd" border title="7-9月">{{ $t('format.quarter3rd') }}</el-radio-button>
            <!-- </el-tooltip> -->
            <!-- <el-tooltip content="10-12月" placement="top-start" popper-class="quarter-tooltip"> -->
            <el-radio-button label="Q4th" border title="10-12月">{{ $t('format.quarter4th') }}</el-radio-button>
            <!-- </el-tooltip> -->
          </el-radio-group>
        </div>
        <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: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      startDate: '',
      endDate: '',
      loading: true,
      detailLoading: true,
      yearScatter_ops: {},
      quarterVal: 'Q1th',
      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/yearly') return;
      this.emitData = param.data;
      this.loading = true;
      this.detailLoading = true;
      this.quarterVal = 'Q1th'
      if (this.tableIds && JSON.stringify(this.tableKeyToId) !== '{}') {
        this.getChartData(this.tableIds);
        this.quarterChart(this.tableKeyToId['WeatherDetail'])
      } 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;
            // WeatherDetail
            if (item.key === 'WeatherAnalyze' || item.key === 'WeatherSynthetical') {
              if (index == tableItem.length - 1) {
                this.tableIds += item.id;
              } else {
                this.tableIds += item.id + ',';
              }
            }
          });
          this.getChartData(this.tableIds)
          this.quarterChart(this.tableKeyToId['WeatherDetail'])
        })
    },
    chartDataFetch(tableIds, startDate, endDate) {
      const { emitData } = this
      const {
        asis_level, asis_org, asis_time, asis_kpi, asis_format
      } = emitData
      const { startTime, endTime } = this.newDateFormat('year', asis_time)
      const param = {
        orgIds: asis_org,
        startDate: startDate || startTime,
        endDate: endDate || endTime,
        chartIds: tableIds,
        kpiType: asis_kpi
      }
      asis_level === 'format' && (param.formatIds = asis_format)
      const { params, asisLevel } = this.dealFormat(param, emitData)
      return new Promise(resolve => {
        this.$api.analysisReport.weatherAnalysis(asisLevel === 'format' ? 'mall' : asisLevel, params)
          .then(res => {
            resolve(res)
          })
          .catch(err => {
            this.catchErrorHandle(err)
          })
      })
    },
    async getChartData(tableIds) {
      if (!tableIds) return
      this.WeatherAnalyze_ops = {}
      this.WeatherSynthetical_ops = []

      let chartTitlePrefix = 'WeatherReport'
      this.WeatherAnalyze_title = chartTitlePrefix + 'WeatherAnalyze'
      this.WeatherSynthetical_title = chartTitlePrefix + 'WeatherSynthetical'
      this.WeatherDetail_title = chartTitlePrefix + 'WeatherDetail'

      const { data } = await this.chartDataFetch(tableIds)
      const {
        WeatherAnalyze = {},
        WeatherSynthetical = {},
        // WeatherDetail = {}
      } = 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],
        isYear: true
      }
      WeatherAnalyze.kpiName = this.kpiArr[this.emitData.asis_kpi]
      this.WeatherAnalyze_ops = WeatherAnalyze

      let WeatherSynthetical_series = this.dealColWeatherCode(WeatherSynthetical.series, 0)
      this.WeatherSynthetical_head = this.dealHead(WeatherSynthetical.xaxis.data);
      this.WeatherSynthetical_ops = this.dealData(WeatherSynthetical_series, this.WeatherSynthetical_head);

      // let WeatherDetail_series = this.dealColWeatherCode(WeatherDetail.series, 2);
      // this.WeatherDetail_head = this.dealHead(WeatherDetail.xaxis.data);
      // this.WeatherDetail_ops = this.dealData(WeatherDetail_series, this.WeatherDetail_head);
      this.loading = false
      // this.detailLoading = false
    },
    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
      })
    },
    quarterToDate() {
      const quarterDate = {}
      switch (this.quarterVal) {
        case 'Q1th':
          quarterDate.start_date = '01-01'
          quarterDate.end_date = '03'
          break;
        case 'Q2nd':
          quarterDate.start_date = '04-01'
          quarterDate.end_date = '06'
          break;
        case 'Q3rd':
          quarterDate.start_date = '07-01'
          quarterDate.end_date = '09'
          break;
        case 'Q4th':
          quarterDate.start_date = '10-01'
          quarterDate.end_date = '12'
          break;
        default:
          break;
      }
      return quarterDate
    },
    // 单独处理每日详情 展示每个季度的数据
    async quarterChart(chartId) {
      if (!chartId) return
      this.detailLoading = true
      this.WeatherDetail_ops = []
      const chartTitlePrefix = 'WeatherReport'
      this.WeatherDetail_title = chartTitlePrefix + 'WeatherDetail'
      const { asis_time } = this.emitData
      const _year = asis_time ? asis_time.getFullYear() : new Date().getFullYear()
      const { start_date, end_date } = this.quarterToDate()
      const monthLastDay = this.getMonthLastDay(new Date(_year, end_date, 0))
      const startDate = _year + '-' + start_date
      const endDate = _year + '-' + end_date + '-' + monthLastDay
      // 获取报表数据
      const { data } = await this.chartDataFetch(chartId, startDate, endDate)
      const {
        WeatherDetail = {}
      } = data.data.body
      let WeatherDetail_series = this.dealColWeatherCode(WeatherDetail.series, 2)
      this.WeatherDetail_head = this.dealHead(WeatherDetail.xaxis.data);
      this.WeatherDetail_ops = this.dealData(WeatherDetail_series, this.WeatherDetail_head)
      this.detailLoading = false
    },
    getQuarterData(dom, value, reportType) {
      this.detailLoading = true;
      const chartId = this.tableKeyToId[reportType]
      this.quarterChart(chartId)
    },
    getMonthLastDay(date) {
      return new Date(date.getFullYear(), (date.getMonth() + 1), 0).getDate();
    },
  }
}
</script>

<style scoped>
/* @import url(./public/css/common.css); */

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

.quarter-sel-wrapper label {
  margin-right: 10px;
}

.weatherasis-title {
  position: absolute;
  /*  */
  top: 26px;
  left: 26px;
  color: #444;
  font-size: 18px;
}


/* #yearScatterChart, */

.year-scatter-block {
  height: 731px;
}

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

@media only screen and (max-width: 1366px) {
  .year-scatter-block {
    height: 500px;
  }
}

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