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>
      </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>
      <ul class="legend">
          <li v-for="(item,index) in mallNameList" :key="index">
              <span :style="{'background-color': colorArr[index]}"></span><span>{{item}}</span>
          </li>
      </ul>
      <div class="asis-table-content" v-loading="loading">
        <el-table
          v-if="isYTabChart"
          ref="tableContainer"
          id="domByTrafficFlow"
          class="asis-table"
          :data="tabOps"
          header-row-class-name="asis-table-head"
          style="width: 100%"
          :max-height="tableHeight"
        >
          <comp-column v-for="(item, index) in tabHeadData" :key="index" :col="item" />
        </el-table>
        <div v-else>
            <el-row>
                <el-col :span="8" v-for="(item,index) in chartData.length" :key="item">
                    <p>{{chartData[index].title}}</p>
                   <mix-charts
                     :chartId="'bmlineChart'+item"
                     class="area-line-chart"
                     :style="{ height: 300 + 'px' }"
                     :chartData="chartData[index]"
                     chartType="AreaLineNew"
                   /> 
                </el-col>
            </el-row>
        </div>
      </div>
    </div>
    <export-data-dialog ref="exportDialog"></export-data-dialog>
  </div>
</template>

<script>
import { debounce } from "@/utils";
import exportData from "../../public/exportData";
import CompCol from "../../public/myColum";
export default {
  props: {
    propparam: {
      type: Object,
      default: () => {}
    }
  },
  components: {
    "export-data-dialog": exportData,
    "comp-column": CompCol
  },
  data() {
    return {
      loading: true,
      detailData_title: "comprehensiveIndicators", //本年每日报表
      emitData: {},
      tableHeight: 0,
      isYTabChart: false,
      tabHeadData: [],
      tabOps: [],
      chartData: [],
      radioDate: "month",
      asisLevel: 'mall',
      configHeadData:[],
      colorArr:["#3BB8FF", "#FFC62E", "#97c05c", "#154bee", "#d83965",
                "#9036aa", "#e35241", "#4fb9d1", "#3f9488", "#97c05c",
                "#154bee", "#FF9631", "#f39c38", "#e35241"],
      mallNameList:[]
    };
  },
  computed: {
    barLineIcon() {
      if (this.isYTabChart) {
        return "report-item line-report";
      } else {
        return "report-item line-report report-item-line";
      }
    }
  },
  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;
  },
  methods: {
      i18n(title) {
        let languageTitle = "format." + title;
        return this.$t(languageTitle);
      },
    refreshHandle(param) {
      if(param.data){
        this.emitData = param.data;
        this.mallNameList = param.data.asis_nameList
        this.configHeadData = param.data.indicatorVal
        this.getData();
      }
    },
    changeTabSelect(val) {
      this.getData();
    },
    getData() {
      this.loading = true;
      this.tabHeadData = [];
      this.chartData = [];
      this.tabOps = [];
      let param = {
        orgIds: this.emitData.asis_org,
        startDate: this.emitData.startDate,
        endDate: this.emitData.endDate,
        type: this.isYTabChart ? "table" : 'line',
        option: this.radioDate
      }
      this.$api.analysisReport.getPassengerFlowMultiMallStatistics(param).then(res => {
          let resData = res.data.data.body;
          this.loading = false;
          if (resData) {
            // 判断是否是表格还是图
            if (this.isYTabChart) {
              // 表格
              this.getTableData(resData)
            } else {
                Object.keys(resData).forEach((key) => {
                    resData[key].key = key
                    this.chartData.push(resData[key])
                })
                this.chartData.forEach((item,index)=>{
                    this.getEcartsData(item,index)
                })
            }
          }
        })
    },
    getEcartsData(resData,index) {
      let chartOption = resData;
      chartOption["otherConf"] = {
        _color:this.colorArr ,
        hasYaxisName: false,
        chartKey: this.radioDate,
        yAxisName:(resData.key=="deepShoppingRateChart" || resData.key=="enterRateChart")?'%':((resData.key=="humanEffectChart"||resData.key=="perAreaValueChart")?'':this.i18n("perTime"))
      };
      if (/\,/.test(this.emitData.asis_org)) {
        chartOption["otherConf"][
          "selectedLen"
        ] = this.emitData.asis_org.split(",").length;
      }
      this.chartData[index] = chartOption;
    },
    getTableData(resData) {
        if(resData['multiMallPassengerFlowTable']){
            let originData = JSON.parse(JSON.stringify(resData['multiMallPassengerFlowTable'].series))
            let flowHeadData = JSON.parse(JSON.stringify(resData.multiMallPassengerFlowTable.xaxis.data));
            this.tabHeadData = this.dealThead(flowHeadData);
            if(this.configHeadData && this.configHeadData.length>0){
                this.tabHeadData.forEach((item,index)=>{
                    if(index>0){
                        if(this.configHeadData.includes(item.label)){
                            item.isShow = 1
                        }else{
                            item.isShow = 2
                        }
                    }
                })
            }
            resData['multiMallPassengerFlowTable'].series.forEach((item,index)=>{
                let temp = {};
                item.data.forEach((dataItem, dataIndex)=>{
                    temp["defaultOrg" + dataIndex] = dataItem != null ? dataItem : "--";
                })
                this.tabOps.push(temp);
            })
        }
    },
    dealThead(theadData) {
      let cols = [],
        $index = 0;
      cols = theadData.map((item, index) => {
        if (/^\[.+\]$/.test(item)) {
          let formatItem = eval(item);
          return {
            label: formatItem[0],
            children: formatItem
              .map((childItem, childIndex) => {
                if (childIndex > 0) {
                  return {
                    prop: "defaultOrg" + $index++,
                    label: childItem,
                    width: 150
                  };
                } else {
                  return false;
                }
              })
              .filter(Boolean)
          };
        } else {
          return {
            prop: "defaultOrg" + $index++,
            label: item,
            fixed: true,
            width: 120
          };
        }
      });
      return cols;
    },
    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 {
          let language = localStorage.getItem('lang');
          if(language){
              var languageObj = {
                  zh_CN: 'zh_CN',
                  en_US: 'en_US',
                  zh_TW: 'zh_TW',
              }
              language = '&localLanguage=' + languageObj[language];
          }
          let Url = window._vionConfig.apiUrl + '/multiMall/passengerFlow/export?'
          let dowloadUrl = Url + language + `&orgIds=${this.emitData.asis_org}&startDate=${this.emitData.startDate}&endDate=${this.emitData.endDate}&type=${this.isDTabChart ? "table" : "line"}&option=${this.radioDate}&authorization=${this.$cookie.get("atoken")}`;
          window.open(dowloadUrl)
      }
    },
  }
};
</script>

<style scoped lang="less">
  .legend{
      li{
          display: inline-block;
          margin-right: 15px;
          margin-bottom: 10px;
          span{
              display: inline-block;
              border-radius: 50%;
              &:first-child{
                  width: 15px;
                  height: 15px;
                  margin-right: 5px;
              }
          }
      }
  }
</style>