customly.vue

<template>
  <div class="customly">
    <!-- 每日报表 -->
    <div class="asis-table-wrapper single-report-wrapper">
      <h3 class="asis-table-header single-report-header">
        <span
          class="asis-table-download"
          @click="downloadData(i18nFormatter(detailData_title) + '-' + Time(),radioDate)"
        >{{$t('allPages.load')}}</span>
        <span class="report-type-box">
          <span :class="barLineIcon" @click="selReport('line')"></span>
          <span :class="isCTabChart ? 'report-item report-item-tab' : 'report-item'" @click="selReport('table')"></span>
        </span>
        <span class="asis-table-alldownload">
          <el-button type="primary" class="primary-btn analysis-collapse-btn" size="samll" @click="allStoreDownload(i18nFormatter(detailData_title) + '-' + Time())">{{$t('button.allStoreDownload')}}</el-button>
        </span>
      </h3>
      <div class="date-radio-wrapper tf-ratio-group single-ratio-group">
        <el-radio-group v-model="radioDate" size="mini" fill="#0069FF" @change="changeTabSelect(radioDate)">
          <el-radio-button label="day" border>{{$t('button.day')}}</el-radio-button>
          <el-radio-button label="hour" border>{{$t('button.hour')}}</el-radio-button>
        </el-radio-group>
      </div>
      <div class="asis-table-content" v-loading="loading">
        <el-table v-if="isCTabChart" id="domBcTrafficFlow" class="asis-table" :data="tabData"
          header-row-class-name="asis-table-head" style="width: 100%" :max-height="tableHeight">
          <el-table-column :prop="item.prop" :label="item.label" align="center" v-for="(item,index) in tabHeadData"
            :key="index" min-width="110" :fixed="index == 0">
          </el-table-column>
        </el-table>
        <mix-charts v-else chartId="bdlineChart" class="basic-line-chart" :style="{ height: tableHeight + 'px' }"
          :chartData="chartData" chartType="AreaLine" />
      </div>
    </div>
    <export-data-dialog ref="exportDialog"></export-data-dialog>
  </div>
</template>

<script>
  import exportData from '../../public/exportData'
  export default {
    props: {
      propparam: Object
    },
    components: {
      'export-data-dialog': exportData,
    },
    data() {
      return {
        loading: true,
        detailData_title: '', //本年每日报表
        tableKeyToId: {},
        tableIds: '',
        emitData: {},
        tableHeight: 0,
        isCTabChart: false,
        tabHeadData: [],
        tabOps: [],
        chartData: {},
        radioDate: 'day',
        asisLevel: 'mall'
      }
    },
    computed: {
      barLineIcon() {
        if (this.isCTabChart) {
          return 'report-item line-report'
        } else {
          return 'report-item line-report report-item-line'
        }
      },
      tabData() {
        return this.tabOps
      },
    },
    watch: {
      propparam: {
        handler: 'refreshHandle',
        immediate: true
      },
    },
    created() {
      let winH = $(window).height(),
        scale = 0.34;
      if (winH <= 720) {
        scale = 0.4
      } else if (winH <= 768) {
        scale = 0.38
      } else if (winH <= 900) {
        scale = 0.36
      } else if (winH <= 1080) {
        scale = 0.34
      }
      this.tableHeight = winH - winH * scale
      this.isCTabChart = window._vionConfig.reportType && window._vionConfig.reportType === 'table' ?
        true : false;
    },
    methods: {
      i18n(title) {
        let languageTitle = 'format.' + title;
        return this.$t(languageTitle)
      },
      refreshHandle(param) {
        if(param.data){
          this.emitData = param.data;
          this.getData();
        }
      },
      changeTabSelect(val) {
        this.getData();
      },
      getData() {
        this.loading = true;
        this.tabHeadData = [];
        this.tabOps = [];
        this.chartData = {};
        let param = {
          orgId: this.emitData.orgId,
          startDate: this.emitData.startDate,
          endDate: this.emitData.endDate,
          type: this.isCTabChart ? "table" : 'line',
          option: this.radioDate
        }
        this.$api.analysisReport.getPassengerFlowStatistics(param).then(res => {
            let resData = res.data.data.body.BasePassengerFlowReport;
            this.detailData_title = "BasicReportdetailData";
            this.chartData = resData;
            this.loading = false;
            if (resData) {
              // 判断是否是表格还是图
              if (this.isCTabChart) { // 表格
                let flowBodyData = resData.series;
                let flowHeadData = resData.xaxis.data;
                this.tabHeadData = this.autoComplateHead('detail', flowHeadData);
                this.tabOps = this.dealData(flowBodyData, this.tabHeadData, false, flowHeadData.length);
              } else { // 图
                let chartOption = resData;
                chartOption['otherConf'] = {
                  _color: ["#3BB8FF", "#FFC62E", "#97c05c", "#154bee", "#d83965",
                "#9036aa", "#e35241", "#4fb9d1", "#3f9488", "#97c05c",
                "#154bee", "#FF9631", "#f39c38", "#e35241"] ,
                  hasYaxisName: false,
                  chartKey: true,
                  isRadioObject: true,
                  grid: { top: 68, right: 100, bottom: 66, left: 60 },
                  yAxisName: [this.$t('format.perTime'), '%'],
                  isTwoYaxis:true,
                }
                if (/\,/.test(this.emitData.asis_org)) {
                  chartOption['otherConf']['selectedLen'] = this.emitData.asis_org.split(',').length
                }
                this.chartData = chartOption;
              }
            }
          })
          .catch(err => {
            this.catchErrorHandle(err)
            setTimeout(() => {
              this.loading = false
            }, 500)
          })
      },
      selReport(iconType) {
        if (iconType === 'line') {
          if (this.isCTabChart) {
            this.isCTabChart = false;
            this.getData();
          }
        } else {
          if (!this.isCTabChart) {
            this.isCTabChart = true;
            this.getData();
          }
        }
      },
      downloadData(title) {
        if (this.isCTabChart) {
          this.dealExport('domBcTrafficFlow', title)
        } else {
          this.exportDataHandle(title, this.radioDate)
        }
      },
      exportDataHandle(title, chartKey) {
        let exportNeed = {
          domId: "bdlineChart",
          title: title,
          data: {
            url: `/basePassengerFlow/passengerFlow/export`,
            params: `orgId=${this.emitData.orgId}&startDate=${this.emitData.startDate}&endDate=${this.emitData.endDate}&option=${this.radioDate}`
          }
        };
        this.$refs.exportDialog.dialogInit(exportNeed);
      },
      allStoreDownload(title){
          const { apiUrl } = window._vionConfig;
          let url = `/basePassengerFlow/passengerFlow/export`;
          let language = localStorage.getItem("lang");
          if (language) {
            const languageObj = {
              mall_CN: "zh_CN",
              zh_CN: "zh_CN",
              en_US: "en_US",
              zh_TW: "zh_TW"
            };
            language = languageObj[language] || window.navigator.language;
          }
          const downloadUrl = `${apiUrl}${url}?accountId=${this.$cookie.get("accountId")}&startDate=${this.emitData.startDate}&endDate=${this.emitData.endDate}&option=${this.radioDate}&localLanguage=${language}&authorization=${this.$cookie.get(
            "atoken"
          )}&title=${encodeURI(title)}`;
          window.open(downloadUrl);
      }
    }
  }
</script>

<style scoped>
    .asis-table-alldownload{
        font-size: 14px;
        color: #666;
        float: right;
        cursor: pointer;
        position: relative;
        padding-right: 20px;
    }
</style>