zonerelations.vue

<!--店鋪关联-->
<template>
  <div class="customgroup-wrapper">
    <el-header>
      <span class="asis-title"
        >{{ asisName }}&nbsp;{{ $t("asis.Zonerelations") }}</span
      >
    </el-header>
    <zonerelations-option
      ref="relationsinit"
      @reportTime="reportHandler"
    ></zonerelations-option>
    <div class="element-main sr-main">
      <div v-show="level=='zone'" class="store-relations">
        <el-col :span="24">
             <div class="asis-table-wrapper dt-content-wrapper">
              <h3 class="asis-table-header relations-header-op">
                <span class="asis-table-title">{{emitData.asis_zoneTit}}-店铺关联</span>
                
              </h3>
              <div class="asis-table-content" v-loading="loading">
                <sort-table
                  :isZone="true"
                  :showTime="true"
                  :tableData="tableData"
                  v-if="isTabChart"
                  class="sort-box"
                ></sort-table>
              </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">{{
                $t("table.Source")
              }}</span>
              <span
                class="asis-table-download"
                @click="exportDataHandle('source')"
                >{{ $t("allPages.load") }}</span
              >
            </h3>
            <div class="asis-table-content" v-loading="loading1">
              <!-- 店铺客流排行Table -->
              <sort-table
                :isSource="true"
                :tableData="tableData1"
                v-if="isTabChart"
                class="sort-box"
              ></sort-table>
              <div class="page-wrapper">
                  <el-pagination
                    background
                    :current-page="curPage1"
                    :page-sizes="pageArr"
                    :page-size="pageSize1"
                    @size-change="sizeChange(1,$event)"
                    @current-change="handleCurrentChange(1,$event)"
                    layout="prev, pager, next, slot,sizes"
                    :total="total1"
                  >
                    <span
                      class="slot-ele-total"
                    >{{$t('table.pageHead')}} {{ total1 }} {{$t('table.pageTail')}}</span>
                  </el-pagination>
                </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">{{
                  $t("table.Target")
                }}</span>
                <span
                class="asis-table-download"
                @click="exportDataHandle('target')"
                >{{ $t("allPages.load") }}</span
              >
              </h3>
              <div class="asis-table-content" v-loading="loading2">
                <sort-table
                  :isTarget="true"
                  :tableData="tableData2"
                  v-if="isTabChart"
                  class="sort-box"
                  
                ></sort-table>
                <div class="page-wrapper">
                  <el-pagination
                    background
                    :current-page="curPage2"
                    :page-sizes="pageArr"
                    :page-size="pageSize2"
                    @size-change="sizeChange(2,$event)"
                    @current-change="handleCurrentChange(2,$event)"
                    layout="prev, pager, next, slot,sizes"
                    :total="total2"
                  >
                    <span
                      class="slot-ele-total"
                    >{{$t('table.pageHead')}} {{ total2 }} {{$t('table.pageTail')}}</span>
                  </el-pagination>
                </div>
              </div>
             </div>
        </el-col>
      </div>
    </div>
    <export-data-dialog ref="exportDialog"></export-data-dialog>
  </div>
</template>

<script>
import zonerelations from "../common/option/zonerelations";
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: "",
      chartData:null,
      parameter:{},
      tableData: [],
      tableData1: [],
      tableData2: [],
      level: "zone",
      isTabChart: "TAB_TABLE",
      loading: false,
      loading1:false,
      loading2:false,
      emitData:{},
      curPage1:1,
      total1:0,
      pageSize1: 10,
      curPage2:1,
      total2:0,
      pageSize2: 10,
      pageArr: [10, 50, 100],
    };
  },
  components: {
    "zonerelations-option": zonerelations,
    "enter-chart": enterChart,
    "sort-table": sorttable,
    "export-data-dialog":exportData
  },
  created() {
    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: {
    exportDataHandle(type){
        let language = localStorage.getItem("lang");
        const { apiUrl } = window._vionConfig;
        const params = this.serializeJSON(Object.assign({},this.parameter,{
            title:this.asisName,
            type
        }));
        const downloadUrl = `${apiUrl}/report/zoneAssociation/zone/export?${params}&localLanguage=${language}&authorization=${this.$cookie.get(
              "atoken"
            )}`;
        console.info(downloadUrl)
        window.open(downloadUrl);
    },
    changeFieldName(list=[],type){
        return list.map((item,index)=>{
            item.storeName = item.zoneName;
            item.floorName = item.zoneFloorName;
            item.formatName = item.zoneFormatName
            item.trafficNum = item.zoneTrafficCount;
            if(item.startDate&&item.endDate){
              item.startDate = dateUnit.dateFormat(item.startDate, 'yyyy-MM-dd');
              item.endDate = dateUnit.dateFormat(item.endDate, 'yyyy-MM-dd');
              if(item.startDate == item.endDate){
                 item.timeDate = item.startDate
              }else{
                 item.timeDate = item.startDate+'-'+item.endDate;
              }
            }
            if(type){
               item.order = (this['curPage'+type]-1)*this['pageSize'+type]+index+1;
            }
            return item;
        })
    },
    sizeChange(type,size){
      this['curPage'+type] = 1;
      this['pageSize'+type] = size;
      this.getTableData({type,size});
    },
    handleCurrentChange(type,page) {
      if (this['curPage'+type] != page) {
         this['curPage'+type] = page;
         this.getTableData({type,page});
      }
    },
    getTableData({type,size,page}){
       this['loading'+type] = true;
       const params = Object.assign({},this.parameter,{page,pageSize:size?size:this['pageSize'+type]});
       this.$api.analysisReport[type==1?'getSourceList':'getTargetList'](params).then(res=>{
          let { data } = res.data;
          this['total'+type] = data.total;
          this['curPage'+type] = data.pageNum;
          this['pageSize'+type]= data.pageSize;
          this['tableData' + type] = this.changeFieldName(data.list,type);
          this['loading'+type] = false;
       });
    },
    getMallOpt() {
      this.getCommonMalls().then(
        (resolveData) => {
          let { mallData, localMallId, titleName, multiMallId } = resolveData;
          this.$refs.relationsinit.initAsis(localMallId, mallData);
        },
        (rejectData) => {}
      );
    },
    dataFetch() {
      return new Promise((resolve, reject) => {
        let {
            emitData: {asis_date, asis_time,asis_zoneId},
          } = this,
          { startTime, endTime } = this.newDateFormat(asis_date, asis_time);
           
        let parameter = {
          startDate: startTime,
          endDate: endTime,
          zoneId:asis_zoneId,
        };
        this.parameter = parameter;
        this.$api.analysisReport
          .getZoneInfo(parameter)
          .then((res) => {
            let { data } = res.data;
            resolve(data);
          })
          .catch((err) => {
            this.catchErrorHandle(err);
          });
    
      });
    },
    async getData() {
      this.loading = true;
      this.tableData = this.changeFieldName([await this.dataFetch()]);
      this.loading = false;
      this.curPage1 = this.curPage2 = 1;
      this.pageSize1 = this.pageSize2 = 10;
      this.getTableData({type:1,page:this.curPage1,size:this.pageSize1});
      this.getTableData({type:2,page:this.curPage2,size:this.pageSize2});
    },
    reportHandler(emitData) {
       this.emitData = emitData;
       this.asisName = emitData.asis_tit;
	   if(!this.emitData.asis_zoneId){
            this.$message({
              showClose: true,
              type: "error",
              message: "请选择店铺"
            });
			this.tableData = this.tableData1 = this.tableData2 = [];
			this.total1 = this.total2 = 0;
			return false;
	   }
       this.getData();
    },
  },
};
</script>

<style scoped>
.seq-analysis {
  width: 100%;
  height: 100%;
}
.store-relations{
  background: #fff;
}
.sort-box{
  overflow: hidden;
}
.el-pagination{
  text-align: center;
  padding: 20px 5px;
}
</style>