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>
      </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>
      <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="isCTabChart" id="domBcTrafficFlow" class="asis-table" :data="tabData"
          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 exportData from '../../public/exportData'
  import CompCol from "../../public/myColum";
  export default {
    props: {
      propparam: Object
    },
    components: {
      'export-data-dialog': exportData,
      "comp-column": CompCol
    },
    data() {
      return {
        loading: true,
        detailData_title: 'comprehensiveIndicators', //本年每日报表
        tableKeyToId: {},
        tableIds: '',
        emitData: {},
        tableHeight: 0,
        isCTabChart: false,
        tabHeadData: [],
        tabOps: [],
        chartData: [],
        radioDate: 'day',
        asisLevel: 'mall',
        configHeadData:[],
        colorArr:["#3BB8FF", "#FFC62E", "#97c05c", "#154bee", "#d83965",
                  "#9036aa", "#e35241", "#4fb9d1", "#3f9488", "#97c05c",
                  "#154bee", "#FF9631", "#f39c38", "#e35241"],
        mallNameList:[]
      }
    },
    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
    },
    methods: {
        i18n(title) {
          let languageTitle = "format." + title;
          return this.$t(languageTitle);
        },
      refreshHandle(param) {
        if(param.data){
          this.emitData = param.data;
          this.configHeadData = param.data.indicatorVal;
          this.mallNameList = param.data.asis_nameList
          this.getData();
        }
      },
      changeTabSelect(val) {
        this.getData();
      },
      getData() {
        this.loading = true;
        this.tabHeadData = [];
        this.tabOps = [];
        this.chartData = [];
        let params = {
          orgIds: this.emitData.asis_org,
          startDate: this.emitData.startDate,
          endDate: this.emitData.endDate,
          type: this.isCTabChart ? "table" : "line",
          option: this.radioDate
        };
        this.$api.analysisReport.getPassengerFlowMultiMallStatistics(params).then(res => {
            let resData = res.data.data.body;
            this.loading = false;
            if (resData) {
              // 判断是否是表格还是图
              if (this.isCTabChart) { // 表格
                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)
                })
              }
            }
          })
          .catch(err => {
            this.catchErrorHandle(err)
            setTimeout(() => {
              this.loading = false
            }, 500)
          })
      },
      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.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 {
            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>