storerelations.vue

<!--店鋪关联-->
<template>
  <div class="customgroup-wrapper">
    <el-header>
      <span class="asis-title"
        >{{ asisName }}&nbsp;{{ $t("asis.Storerelations") }}</span
      >
    </el-header>
    <storerelations-option
      ref="relationsinit"
      @reportTime="reportHandler"
      @initData="initTab"
      @childByValue="childByValue"
      @tabclick="tabclick"
    ></storerelations-option>
    <div class="element-main sr-main">
      <div v-show="level=='mall'" class="store-relations">
        <el-col :span="12">
          <div class="asis-table-wrapper dt-content-wrapper">
            <h3 class="asis-table-header relations-header-op">
              <span class="asis-table-title">{{
                i18nFormatter("storeflowsort")
              }}</span>
              <span
                class="asis-table-download"
                @click="
                  exportDataHandle(
                    isTabChart
                      ? 'trafficRank'
                      : 'trafficRankIo',
                    i18nFormatter('storeflowsort'),
                    'trafficRank'
                  )
                "
                >{{ $t("allPages.load") }}</span
              >
              <span class="report-type-box">
                <span
                  :class="[
                    'report-item',
                    'line-report',
                    { 'report-item-line': !isTabChart },
                  ]"
                  @click="selReport('bar')"
                ></span>
                <span
                  :class="['report-item', { 'report-item-tab': isTabChart }]"
                  @click="selReport('table')"
                ></span>
              </span>
            </h3>
            <div class="asis-table-content" v-loading="loading">
              <!-- 店铺客流排行Table -->
              <sort-table
                :tableData="tableData"
                v-if="isTabChart"
                class="sort-box"
                :style="
                   {
                    height: tableHeight + 'px'
                  }
                "
              ></sort-table>
              <div  v-if="!isTabChart" :style="
                   {
                    height: tableHeight + 'px'
                  }
                "
                class="sort-box">
                <mix-charts chartId="trafficRankIo" class="small-rank-chart-box " :chartData="trafficRankingChartData" chartType="Rank" /> 
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="asis-table-wrapper dt-content-wrapper">
            <h3 class="asis-table-header relations-header-op">
              <span class="asis-table-title">{{
                i18nFormatter("storeAbout")
              }}</span>
              <span
                class="asis-table-download"
                @click="exportDataHandle('entermonthHeatmap3','店铺关联情况','associationDetail')"
                >{{ $t("allPages.load") }}</span
              >
            </h3>
            <div class="asis-table-content" v-loading="loading">
              <!-- 店铺关联情况Chart -->
              <enter-chart
                chartId="entermonthHeatmap3"
                ref="enterchart"
                :chartgridop="gridop"
                :style="{ height: tableHeight + 'px' }"
                :chartData="mallHeatmap_ops"
                chartType="Heatmap"
              />
            </div>
          </div>
        </el-col>
      </div>
    </div>
    <export-data-dialog ref="exportDialog"></export-data-dialog>
  </div>
</template>

<script>
import storerelations from "../common/option/relationsOption";
import enterChart from "../../Mall/common/enterChart";
import sorttable from "../../Mall/common/pflowsort.vue";
import exportData from '../../public/exportData'
import Cookies from 'js-cookie'
export default {
  data() {
    return {
      asisName: "",
      propParams: {},
      chartIds: {},
      chartData:null,
      tableData: [],
      level: "mall",
      isTabChart: "TAB_TABLE",
      loading: false,
      trafficRankingChart:{},
      trafficRankingChartData:{},
      gridop: {
        left: 100,
        right: 0,
        top: 0,
        bottom: 80,
      },
      mallHeatmap_ops: {},
    };
  },
  components: {
    "storerelations-option": storerelations,
    "enter-chart": enterChart,
    "sort-table": sorttable,
    "export-data-dialog":exportData
  },
  created() {
    this.mallHeatmap_ops = {}
    window.addEventListener("resize", () => {
      try {
        let timeHeatEChartsUtil = {
          chart1: $("#storeRatio")[0],
        };
        for (let k in timeHeatEChartsUtil) {
          if (
            timeHeatEChartsUtil.hasOwnProperty(k) &&
            timeHeatEChartsUtil[k] != undefined
          ) {
            timeHeatEChartsUtil[k] = this.$echarts.init(timeHeatEChartsUtil[k]);
            var element = timeHeatEChartsUtil[k];
            element.resize();
          }
        }
      } catch (err) {}
    });
  },
  mounted() {
    this.getMallOpt();
  },
  computed: {
    tableHeight() {
      const windowHeight = window.innerHeight;
      const scale =
        windowHeight <= 720
          ? 0.35
          : windowHeight <= 768
          ? 0.33
          : windowHeight <= 900
          ? 0.28
          : windowHeight <= 1080
          ? 0.31
          : 0.1;
      return windowHeight - windowHeight * scale;
    },
  },
  methods: {
    childByValue(childValue) {
      this.animate(".sr-main");
    },
    getGatesFilterMall(mallStatus) {
      let params = {
        accountId: this.$cookie.get("accountId"),
        status: 1,
        type: 2,
      };
      this.gateFilterMall(mallStatus, params).then((resolveData) => {
        let { mallData, localMallId, titleName, multiMallId } = resolveData;
        let refMallId = {
          mallId: localMallId,
          multiMallId: multiMallId,
        };
        this.$refs.init.initAsis(refMallId, mallData);
      });
    },
    getMallOpt() {
      this.getCommonMalls().then(
        (resolveData) => {
          let { mallData, localMallId, titleName, multiMallId } = resolveData;
          this.$refs.relationsinit.initAsis(localMallId, mallData);
        },
        (rejectData) => {}
      );
    },
    getChartKey() {
      this.$api.baseReport
        .reportChart({
          report: "ZoneAssociation",
        })
        .then((res) => {
          let tableItem = res.data.data;
          let chartArr = [];
          tableItem.forEach((item, index) => {
            this.tableKeyToId[item.key] = item.id;
            chartArr.push(item.id)
          });
          this.chartIds = chartArr.join(",");
          this.getData();
        })
        .catch((err) => {
          this.$throw(err);
        });
    },
    initTab(data) {
      this.loading = true;
      this.asisName = data.asis_tit;
      this.level = data.asis_level;
      this.emitData = data;
      this.tableKeyToId = {};
      this.tableIds = "";
      this.getChartKey();
    },
    tabclick(val){
      this.level = val;
    },
    //数据导出
    exportDataHandle(domId, title, chartKey) {
      let chartId = this.tableKeyToId[chartKey];
       let {
            chartIds,
            isTabChart,
            emitData: { asis_org, asis_level, asis_date, asis_time ,asis_floorIds,asis_format,asis_zoneAssociationType},
          } = this,
          { startTime, endTime } = this.newDateFormat(asis_date, asis_time);
      let exportNeed = {
        domId: domId,
        title: title,
        data: {
          url: "/report/zoneAssociation/mall/" + chartId + "/excel",
          params:`orgIds=${ this.$cookie.get("orgId")}&startDate=${startTime}&endDate=${endTime}&floorIds=${asis_floorIds || ''}&zoneAssociationType=${asis_zoneAssociationType}&option=${isTabChart ? "TAB_TABLE" : "TAB_CHART"}&formats=${asis_format || ''}&localLanguage=zh_CN`
        },
      };
      this.$refs.exportDialog.dialogInit(exportNeed);
    },
    selReport(reportChart){
       if (reportChart === "table") {
        if (this.isTabChart) return;
        this.isTabChart = true;
      } else {
        if (!this.isTabChart) return;
        this.isTabChart = false;
        this.rankChartOption();
      }
     
    },
    dataFetch() {
      return new Promise((resolve, reject) => {
        let {
            chartIds,
            isTabChart,
            emitData: { asis_org, asis_level, asis_date, asis_time ,asis_floorIds,asis_format,asis_zoneAssociationType},
          } = this,
          { startTime, endTime } = this.newDateFormat(asis_date, asis_time);

        let parameter = {
          orgIds: asis_org,
          startDate: startTime,
          endDate: endTime,
          chartIds: chartIds,
          floorIds:asis_floorIds,
          zoneAssociationType:asis_zoneAssociationType,
          option: isTabChart ? "TAB_TABLE" : "TAB_CHART",
          formats:asis_format
        };

        this.$api.analysisReport
          .getzoneAssociation(parameter)
          .then((res) => {
            let { data } = res.data;
            resolve(data);
          })
          .catch((err) => {
            this.catchErrorHandle(err);
          });
    
      });
    },
    async getData() {
      if (!this.chartIds) return;
      let result = await this.dataFetch();
        this.loading = false;
      let {
          isTabChart,
          emitData: { asis_date },
        } = this,
        { trafficRank,associationDetail } = result.body;

      this.columnData = [];
      this.tableData = [];
      this.chartData = {};
      if (trafficRank) {
          this.tableData = trafficRank.series[0].data;
          this.rankChartOption()
          this.mallHeatmap_ops = associationDetail;
          this.trafficRankingChart = trafficRank;
      }
      this.loading = false;
    },
    rankChartOption(){
      let {trafficRankingChart} = this;
        let yaxis = {
            data:[]
          };
          let data = [];
         this.tableData.map(ele=> {
            yaxis.data.push(ele.storeName);
            data.push(ele.trafficNum)
          })
          this.trafficRankingChartData = {
            otherConf:{
              grid:{
                top:-2,
              }
            },
            series:[{
              name:'',
              type:'bar',
              data:data,
            }],
            yaxis:yaxis,
            title:'店铺客流排行'
          }
    },
    reportHandler(emitData) {
      // this.loading = true
      this.emitData = emitData;
      this.asisName = emitData.asis_tit;

      if (this.chartIds) {
        this.getData();
      } else {
        this.getChartKey();
      }
    },
  },
};
</script>

<style scoped>
.seq-analysis {
  width: 100%;
  height: 100%;
}
.store-relations{
  background: #fff;
}
.sort-box{
  overflow: hidden;
}
</style>