trackLineStore.vue

<template>
  <div class="tftrack-analysis">
      <el-header>
          <span class="asis-title">{{ asisName }}&nbsp;{{$t('asis.MoveLineAnalysis')}}</span>
      </el-header>
      <tftrack-option ref="init" :mallData="mallData" @reportTime="reportHandler" @initData="initTab"></tftrack-option>
      <div class="element-main tftrack-main" style="margin-top: 114px">
          <div class="condition">
            <el-radio-group v-model="type" class="selectType" @change="typeChange">
              <el-radio-button label="1">轨迹</el-radio-button>
              <el-radio-button label="2">转化率</el-radio-button>
            </el-radio-group>
          </div>
          <div class="customgroup-wrapper">
            <el-row v-loading="loading" v-show="type==1">
              <el-col :span="24">
                <div class="tab-container">
                  <el-table
                    class="track-line-table"
                    :data="tableData"
                    border
                    style="width: 100%"
                  >
                    <el-table-column prop="tabOrder" align="center" :label="$t('table.order')" width="100">
                    </el-table-column>
                    <el-table-column :label="$t('table.trackName')" align="center">
                      <template slot-scope="scope">
                          <span>{{ scope.row.trackName }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="trafficNum" :label="$t('table.trafficNum')" align="center" width="200">
                      <template slot-scope="scope">
                          <span>{{ scope.row.trafficNum }}%</span>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-col>
            </el-row>
            <el-row v-show="type==2" style="width: 100%">
              <div id="chartStore" style="width: 100%;height: 500px;"></div>
            </el-row>
          </div>
      </div>
  </div>
</template>
<script>
import noDataImg from '@/assets/img/manage/defaultFloor.svg'
import defaultHwImg from '@/assets/img/customer/hwshg.jpg'
import defaultBlImg from '@/assets/img/customer/bailian.svg'
import tftrackOption from '../common/option/trackMoreOptionStore'
import echarts from 'echarts'
export default {
  components: {
      'tftrack-option': tftrackOption,
  },
  data() {
    return {
      mallData: [],
      asisName: '',
      asisLevel: '',
      emitData: {},
      loading: false,
      tableIds: '',
      tableKeyToId: {},
      params: {},
      graphBg: '',
      graphBgList: [],
      loadedImgList: [],
      imgWidth: 0,
      myEchart: {},
      firstFlag: true,
      tableData: [],
      tableHeight: 0,
      showTable: true,
      colors: ['#e35241', '#d83965', '#f39c38', '#9036aa', '#6041b0', '#4054af', '#4396ec', '#4fb9d1', '#3f9488', '#97c05c', '#154bee'],
      bgW: '',
      bgH: '',
      type:1,
      myChart: '',
      option: {
        tooltip: {
          trigger: 'item',
          triggerOn: 'mousemove',
          formatter: '{c}%'
        },
        color: ['#e35241', '#d83965', '#f39c38', '#9036aa', '#6041b0', '#4054af', '#4396ec', '#4fb9d1', '#3f9488',
          '#97c05c', '#154bee'
        ],
        animation: false,
        series: [{
          type: 'sankey',
          focusNodeAdjacency: 'allEdges',
          nodeAlign: 'left',
          data: [],
          links: [],
          lineStyle: {
            color: 'source',
            curveness: 0.5
          }
        }]
      }
    }
  },
  created() {
    let winH = $(window).height();
    this.tableHeight = winH - winH * 0.24;
	},
  mounted() {
      this.getMallOpt();
  },
  methods: {
    reportHandler(emitData) {
      this.emitData = emitData;
      this.asisName = emitData.asis_tit;
      this.getTableData()
    },
    initTab(emitData){
      this.emitData = emitData;
      this.getTableData()
    },
    getMallOpt() {
        let tabelParams = { accountId: this.$cookie.get('accountId'), status_arr: '1,3'};
        this.$api.base.mall(tabelParams, null, true).then(data => {
            this.mallData = data.data.data;
            this.asisName = data.data.data[0].name
            this.$refs.init.initAsis(data.data.data[0].id)
        })
        .catch(error => {});
    },
    getFloorOfGates() {
      const { emitData } = this
      const { asis_org } = emitData
      if (!asis_org) return
      return new Promise(resolve => {
        this.$api.base.gate({
          accountId: this.$cookie.get('accountId'),
          mallId: asis_org,
          status: 1
        })
          .then(res => {
            resolve(res)
          })
          .catch(err => {
            this.catchErrorHandle(err)
          })
      })
    },
    fetchChartData() {
      const { emitData } = this
      const {
        asis_org,
        asis_time,
        asis_level,
        asis_age,
        asis_gender,
      } = emitData
      if (!asis_org) return
      const parameter = {
        orgIds: asis_org,
        startDate: asis_time,
        endDate: asis_time,
        orgType: asis_level,
        ageStage: asis_age,
        gender: asis_gender,
      }
      return new Promise(resolve => {
        this.$api.customerReport.movingRouteAnalysisStore(parameter)
          .then(res => {
            resolve(res)
          })
          .catch(err => {
            this.catchErrorHandle(err)
          })
      })
    },
    async getTableData() {
      this.loading = true
      const { data } = await this.fetchChartData()
      const result = data
      this.tableData = []
      if(result.code == 200){
        this.loading = false
        if (result.data) {
          result.data.ranking.forEach((item, index) => {
            this.tableData.push({
              tabOrder: index + 1,
              trackName: item.line,
              trafficNum: item.value
            })
          })
          this.initEcharts(result.data.sankey)
        }
      }else{
        this.$message({
          type: "error",
          message: result.msg
        });
        return
      }
    },
    initEcharts(data){
      let doc = document.getElementsByClassName('customgroup-wrapper')[0];
      let chartStore = document.getElementById('chartStore')
      chartStore.style.width = doc.offsetWidth + 'px'
      let links = data.links
      let nodes = data.nodes
      let nodeKeys = []
      nodes.forEach(elm=>{
        const name = elm.name.replace(/\s+/g,"");
        elm.key = name
        nodeKeys.push(name);
      })
      nodeKeys = [...new Set(nodeKeys)]  //去重
      let nodeKeyColorMap = {}
      nodeKeys.forEach((val,index)=>{
        nodeKeyColorMap[val] = this.colors[index % this.colors.length]
      })
      nodes = nodes.map(node=>({
        ...node,
        itemStyle:{
          color: nodeKeyColorMap[node.key]
        }
      }))
      this.option.series[0].data = nodes
      links = links.map(link=>{
        const ret = {
          ...link,
          lineStyle:{
            color:'source'
          }
        }
        return ret
      })
      this.option.series[0].links = links
      this.myChart = echarts.init(document.getElementById('chartStore'))
      this.myChart.setOption(this.option)
    },
    typeChange(){

    }
  }
}
</script>

<style scoped lang="less">
.customgroup-wrapper{
  width: 100%;
}
.tab-container {
    padding: 20px 20px;
    background-color: #fff;
    height: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
}
.condition{
  width: 100%;
  height: 70px;
}
.selectType{
  // float: right;
  margin: 20px;
}
</style>