kpiRank.vue

<template>
  <div>
    <div class="asis-table-wrapper" v-if="isKpiTabChart">
        <h3 class="asis-table-header">
          <span class="asis-table-title">{{ i18nFormatter('rankKpi_title') }}</span>
          <span class="asis-table-download" @click="dealExport('domTrafficFlow', i18nFormatter('rankKpi_title'))">{{$t('allPages.load')}}</span>
          <span class="report-type-box">
            <span :class="isKpiTabChart ? 'report-item bar-report' : 'report-item bar-report report-item-bar'" @click="selKpiReport('bar')"></span>
            <span :class="isKpiTabChart ? 'report-item report-item-tab' : 'report-item'" @click="selKpiReport('table')"></span>
          </span>
        </h3>
        <div class="asis-table-content">
          <el-table class="asis-table" id="domTrafficFlow" :data="kpiTableData" header-row-class-name="asis-table-head" v-loading="rankLoading" style="width: 100%" :max-height="tableHeight">
            <el-table-column type="index" align="center" :label="$t('table.order')" v-if="rankingList_head.length > 0" width="100">
            </el-table-column>
            <el-table-column :prop="item.prop" :label="item.label" align="center" v-for="item in rankingList_head" :formatter="summation" :key="item.prop" min-width="100">
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- 坪效柱状图 -->
      <div class="asis-table-wrapper rank-table-wrapper" v-if="!isKpiTabChart">
        <!-- <rank-chart :id="'rankChart' + index" class="rank-chart-box" :options="item" chartType="RankBar"></rank-chart> -->
        <mix-charts chartId="rankChartKpi" class="rank-chart-box" :chartData="kpiChartData" chartType="Bar" />
        <span class="ehcarts-title">{{i18nFormatter('rankKpi_title')}}</span>
        <span class="report-type-box bar-type-box" v-if="!isKpiTabChart">
          <span :class="isKpiTabChart ? 'report-item bar-report' : 'report-item bar-report report-item-bar'" @click="selKpiReport('bar')"></span>
          <span :class="isKpiTabChart ? 'report-item report-item-tab' : 'report-item'" @click="selKpiReport('table')"></span>
        </span>
        <span class="download-text" v-if="!isKpiTabChart" @click="exportDataHandle('rankChartKpi', i18nFormatter('rankKpi_title'),'rankingList')">{{$t('allPages.load')}}</span>
      </div>
      <export-data-dialog ref="exportDialog" @downloadChange="downloadChange"></export-data-dialog>
  </div>
</template>

<script>
import exportData from '../../public/exportData'
import kpidata from './kpidata'
import Cookies from 'js-cookie'
export default {
  components:{
    'export-data-dialog':exportData
  },
  data() {
    return {
      isKpiTabChart:false,
      kpiChartData:{},
      rankLoading:false,
      rankDownloadData:{},
      rankingList_head:[{
        prop:'name',
        label:'店铺名称'
      },{
        prop:'data',
        label:'坪效（人/㎡）'
      }],
      kpiTableData:[],
      emitData:{},
       kpiKey: {
        mall: ['TRAFFIC'],
        floor: ['TRAFFIC'],
        gate: ['INNUM', 'OUTNUM'],
        zone: ['TRAFFIC'],
        format: ['TRAFFIC'],
        subFormat: ['TRAFFIC']
      },
    }
  },
  props:{
    params:Object,
    chartid:String
  },
  watch:{
    params(val){
      this.getKpiCHart()
    }
  },
  methods:{
    /**
     * 获取坪效
     * 目前只针对店铺及坪效
     * */ 

    getKpiCHart(){
      this.emitData = this.params;
       // 时间处理
      let formatTime = this.newDateFormat(this.params.asis_date, this.params.asis_time);
      this.startDate = formatTime.startTime;
      this.endDate = formatTime.endTime;
      let kpiVal = this.dealKey(this.params.asis_level);
      let param = {
        orgIds: this.params.asis_org,
        startDate: this.startDate,
        endDate: this.endDate,
        chartIds: this.chartid,
        kpiTypes: kpiVal.join(','),
      }
      let { params, asisLevel } = this.dealFormat(param, this.params);
       this.getKpiChartData(asisLevel, params, kpiVal);

    },
    getKpiChartData(level,params,val){
      this.$api.analysisReport.kpiRankingAnalysis('zone',params).then(res => {
        let result = res.data
        this.kpiChartData = this.formatSeries(result.data.body.rankingList);
        this.dealDownloadData(this.formatSeries(result.data.body.rankingList))
      });
        // let url ="http://192.168.9.113:17070/report/ranking/areaEffect/zone"
        //   window.axios.get(url,{
        //     params:params,
        //     heasers:{Authorization:Cookies.get('atoken')}
        //   }).then(res => {
        //     console.log("=====",res)
        //     let { data } = res.data;
        //     let result = res.data
        //   this.kpiChartData = this.formatSeries(result.data.body.rankingList);
        //   this.dealDownloadData(this.formatSeries(result.data.body.rankingList))
        //   })
    },
    dealDownloadData({ xaxis, series }) {
      this.rankDownloadData = {}
      xaxis.data.unshift(this.$t('dialog.name'))
      debugger
      const header = xaxis.data
      
      const data = series.map(item => {
        item.data.unshift(item.name)
        return item.data
      })
      this.rankDownloadData = {
        header: header,
        data: data
      }
    },
    dealKey(level) {
      return this.kpiKey[level];
    },
    formatSeries(rankSeries, kpiName, top) {
      if (top) {
        rankSeries.children = [];
      }
      rankSeries['nameType'] = '㎡';
      rankSeries['title'] = 'TRAFFIC' + rankSeries['title'];
      rankSeries['otherConf'] = {
        hideDataZoom: top ? true : false,
        barMaxWidth: 40,
        xAxisfontSize: 10,
        _color: ['#38BAFE', '#fec62b', '#ff9c01', '#38d4be', '#79ce4c'],
        kpiType: 'KPITRAFFIC',
        chartKey: 'rankReport',
        legend: false,
        grid: {
          top: 70,
          right: 40,
          left: 60,
          bottom: 84
        },
        dataZoom:[
          {
            type: 'slider',
            show: true,
            start: 0,
            end: 30,
            xAxisIndex: [0],
          },
        ],
      }
      return rankSeries
    },
    selKpiReport(type){
      if(type == 'table'){
        this.isKpiTabChart = true
        this.kpiTableData = this.kpiChartData.series
      } else {
        this.isKpiTabChart = false
      }
    },
    exportDataHandle(domId, title) {
     let
        {
          chartid,
          isKpiTabChart,
          emitData: {
            asis_org, asis_level, asis_date, asis_time
          },
          dealExport,
        } = this,
        {
          startTime, endTime
        } = this.newDateFormat(asis_date, asis_time)
 
      let exportNeed = {
          domId: domId,
          title: title,
         
        }

      if (isKpiTabChart) {
        dealExport(domId, title)
      }
      else {
        this.$refs.exportDialog.dialogInit(exportNeed, true)
      }
    },
    downloadChange(type) {
      if (type === 'Excel') {
        const { rankDownloadData, i18nFormatter, ranking_title } = this
        const { data } = rankDownloadData
        const header = ['名称','人/㎡']
        debugger
        import('@/utils/Export2Excel').then(excel => {
          excel.export_json_to_excel({
            header,
            data,
            filename: i18nFormatter('rankKpi_title'),
            autoWidth: true,
            bookType: 'xlsx'
          })
        })
      }
    },
  },
  mounted(){
    this.getKpiCHart()
  }
}
</script>

<style scoped>
.rank-table-wrapper {
  position: relative;
  padding: 0;
}

.report-type-box {
  font-size: 14px;
  float: right;
  color: #666;
  cursor: pointer;
  position: relative;
  padding-right: 20px;
}

.bar-type-box {
  position: absolute;
  right: 102px;
  top: 16px;
}

.report-item {
  display: inline-block;
  width: 20px;
  height: 18px;
  background: url('~@/assets/img/asis/tab_icon.svg') no-repeat;
  background-size: 100% 100%;
}

.report-item+.report-item {
  margin-left: 5px;
}

.bar-report {
  background: url('~@/assets/img/asis/bar_icon.svg') no-repeat;
  background-size: 100% 100%;
}

.report-item-tab {
  background: url('~@/assets/img/asis/active_tab_icon.svg') no-repeat;
  background-size: 100% 100%;
}

.report-item-bar {
  background: url('~@/assets/img/asis/active_bar_icon.svg') no-repeat;
  background-size: 100% 100%;
}

.top-switch {
  position: absolute;
  left: 160px;
  top: 18px;
}

.top-bottom-box {
  color: #409EFF
}

.top-bottom-box:hover {
  color: #0069ff;
  cursor: pointer;
}


/* .report-item:hover {
        color: #0069ff;
    } */

@media only screen and (max-width: 1680px) {
  .download-text,
  .ehcarts-title,
  .bar-type-box {
    top: 16px;
  }
  .report-item {
    display: inline-block;
    width: 20px;
    height: 18px;
  }
}

@media only screen and (max-width: 1440px) {
  .download-text,
  .ehcarts-title,
  .bar-type-box {
    top: 16px;
  }
  .report-item {
    display: inline-block;
    width: 18px;
    height: 16px;
  }
  .time-wrapper {
    width: 360px;
  }
}

@media only screen and (max-width: 1366px) {
  .download-text,
  .ehcarts-title,
  .bar-type-box {
    top: 16px;
  }
  .report-item {
    display: inline-block;
    width: 16px;
    height: 14px;
  }
}

@media only screen and (max-width: 1280px) {
  .download-text,
  .ehcarts-title,
  .bar-type-box {
    top: 16px;
  }
  .report-item {
    display: inline-block;
    width: 16px;
    height: 14px;
  }
}
</style>