monthly.vue 3.96 KB
<template>
  <div class="monthly">
    <div class="asis-table-wrapper heatmap-wrapper single-report-wrapper">
      <div class="heatmap-content download-parent">
        <!-- 时间热力图 -->
         <mix-charts chartId="monthHeatmap" class="month-heatmap-chart" :chartData="monthHeatmap_ops" chartType="Heatmap" /> 
        <span class="download-text" @click="exportDataHandle(
          $t('asisTab.' + asisLevel) + '-' +
          $t('asis.TimeHeat') + '-' + Time(),
          'TimeThermodynamic'
        )">{{$t('allPages.load')}}</span>
      </div>
    </div>
    <export-data-dialog ref="exportDialog"></export-data-dialog>
  </div>
</template>

<script>
import exportData from '../../public/exportData'
import publicChart from '../common/publicChart'
export default {
  props: {
    propparam: Object
  },
  data() {
    return {
      monthHeatmap_ops: {},
      chartKeyToId: {},
      chartIds: '',
      emitData: [],
      startDate: '',
      endDate: '',
      asisLevel: 'mall'
    }
  },
  components: {
    'heatmap-chart': publicChart,
    'export-data-dialog': exportData,
  },
  watch: {
    propparam: {
      handler: 'refreshHandle',
      immediate: true
    }
  },
  mounted() {
  },
  methods: {
    refreshHandle(param) {
      if (param.dateType !== '/timeheat/monthly') return;
      this.emitData = param.data;
      if (this.chartIds && JSON.stringify(this.chartKeyToId) !== '{}') {
        this.getChartData(this.chartIds);
      } else {
        this.getChartId();
      }
    },
    getChartId() {
      this.chartKeyToId = {};
      this.chartIds = '';
      this.$api.baseReport.reportChart({
        report: 'TimeThermodynamic',
        // _t: Date.parse(new Date()) / 1000
      })
        .then(res => {
          let chartItem = res.data.data;
          chartItem.forEach((item, index) => {
            this.chartKeyToId[item.key] = item.id;
            if (item.key === 'TimeThermodynamic') {
              if (index == chartItem.length - 1) {
                this.chartIds += item.id;
              } else {
                this.chartIds += item.id + ','
              }
            }
          });
          this.getChartData(this.chartIds);
        })
    },
    getChartData(chartIds) {
      if (!chartIds) return;
      this.monthHeatmap_ops = {};
      let apiUrl = '', param = {};
      let formatTime = this.newDateFormat('month', this.emitData.asis_time);
      this.startDate = formatTime.startTime;
      this.endDate = formatTime.endTime;
      // 常规情况赋值
      // apiUrl = '/report/thermodynamic/' + this.emitData.asis_level;
      param = {
        orgIds: this.emitData.asis_org,
        chartIds: chartIds,
        startDate: this.startDate,
        endDate: this.endDate,
        // kpiType: this.emitData.asis_kpi,
        // formatIds: this.emitData.asis_format,
        // _t: Date.parse(new Date()) / 1000
      };
      let {params,asisLevel} = this.dealFormat(param,this.emitData);
      this.asisLevel = asisLevel
      this.$api.analysisReport.thermodynamicAnalysis(asisLevel, params)
        .then(res => {
          this.monthHeatmap_ops = res.data.data.body.TimeThermodynamic;
        })
        .catch(err => {
          this.catchErrorHandle(err)
        })
    },
    exportDataHandle(title, chartKey) {
      let chartId = this.chartIds;
      let exportNeed = {
        domId: 'monthHeatmap',
        title: title,
        data: {
          url: `/report/thermodynamic/${this.emitData.asis_level}/${chartId}/excel`,
          params: `orgIds=${this.emitData.asis_org}&chartIds=${chartId}&startDate=${this.startDate}&endDate=${this.endDate}`
        }
      }
      this.$refs.exportDialog.dialogInit(exportNeed);
    },
  }
}
</script>

<style scoped>

/* #weekHeatmap, */

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

.download-text {
  right: 0px;
  top: 5px;
}

@media only screen and (max-width: 1366px) {
  .month-heatmap-chart {
    height: 520px;
  }
}

@media only screen and (max-width: 1280px) {
  .month-heatmap-chart {
    height: 520px;
  }
}
</style>