yearly.vue

<template>
  <div class="yearly">
    <!-- 本年每日报表 -->
    <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="isYTabChart ? '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="month" border>{{ $t('button.month') }}</el-radio-button>
          <el-radio-button label="week" border>{{ $t('button.week') }}</el-radio-button>
          <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="isYTabChart"
          ref="tableContainer"
          id="domByTrafficFlow"
          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="100"
            :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 { debounce } from "@/utils";
import exportData from "../../public/exportData";

export default {
  props: {
    propparam: {
      type: Object,
      default: () => {}
    }
  },
  components: {
    "export-data-dialog": exportData
  },
  data() {
    return {
      loading: true,
      detailData_title: "", //本年每日报表
      emitData: {},
      tableHeight: 0,
      isYTabChart: false,
      tabHeadData: [],
      tabOps: [],
      chartData: {},
      radioDate: "month",
      timer: null,
      _scrollHandler: null,
      asisLevel: 'mall'
    };
  },
  computed: {
    barLineIcon() {
      if (this.isYTabChart) {
        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.isYTabChart =
      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.chartData = {};
      this.tabOps = [];
      let param = {
        orgId: this.emitData.orgId,
        startDate: this.emitData.startDate,
        endDate: this.emitData.endDate,
        type: this.isYTabChart ? "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.isYTabChart) {
              // 表格
              let flowBodyData = Object.freeze(resData.series);
              let flowHeadData = resData.xaxis && Object.freeze(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: this.emitData.asis_object === 1 ? true : false,
                isYear: this.radioDate !== "month" && this.radioDate !== "week" ,
                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.isYTabChart) {
          this.isYTabChart = false;
          this.getData();
        }
      } else {
        if (!this.isYTabChart) {
          this.isYTabChart = true;
          this.getData();
        }
      }
    },
    downloadData(title, chartKey) {
      if (this.isYTabChart) {
        this.dealExport("domByTrafficFlow", title);
      } else {
        this.exportDataHandle(title, chartKey);
      }
    },
    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>
.bar-report {
  background: url("~@/assets/img/asis/bar_icon.svg") no-repeat;
  background-size: 100% 100%;
}

.report-item-bar {
  background: url("~@/assets/img/asis/active_bar_icon.svg") no-repeat;
  background-size: 100% 100%;
}
.asis-table-alldownload{
    font-size: 14px;
    color: #666;
    float: right;
    cursor: pointer;
    position: relative;
    padding-right: 20px;
}
</style>