monthly.vue

<template>
  <div class="monthly">
    <!-- 本月每日报表 -->
    <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('bar')"></span>
          <span
            :class="isMTabChart ? '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-button label="minute" border>{{$t('button.min')}}</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="isMTabChart"
          id="domBmTrafficFlow"
          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 publicChart from "../common/publicChart";
import exportData from "../../public/exportData";
import CompCol from "../../public/myColum";
export default {
  props: {
    propparam: Object
  },
  components: {
    "export-data-dialog": exportData,
    "basic-chart": publicChart,
     "comp-column": CompCol
  },
  data() {
    return {
      loading: true,
      detailData_title: "comprehensiveIndicators", //本月每日报表
      tableIds: "",
      emitData: {},
      tableHeight: 0,
      isMTabChart: false,
      tabHeadData: [],
      tabOps: [],
      chartData: [],
      startDate: "",
      endDate: "",
      radioDate: "day",
      configHeadData:[],
      colorArr:["#3BB8FF", "#FFC62E", "#97c05c", "#154bee", "#d83965",
                "#9036aa", "#e35241", "#4fb9d1", "#3f9488", "#97c05c",
                "#154bee", "#FF9631", "#f39c38", "#e35241"],
      mallNameList:[]
    };
  },
  computed: {
    barLineIcon() {
        if (this.isMTabChart) {
            return "report-item bar-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(chartIds, keyVal) {
      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.isMTabChart ? "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.isMTabChart) {
              // 表格
              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.isMTabChart) {
          this.isMTabChart = false;
          this.getData();
        }
      } else {
        if (!this.isMTabChart) {
          this.isMTabChart = true;
          this.getData();
        }
      }
    },
    downloadData(title) {
      if (this.isMTabChart) {
        this.dealExport("domBmTrafficFlow", 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>