zoneTraffic.vue

<template>
  <div class="sankey-container" v-loading="loading">
    <ul class="legend-container">
      <li
        class="legend-item"
        v-for="(legendItem, legendIndex) in legendAside"
        :key="legendItem.id"
        @click="checkLegend(legendItem.selected, legendIndex)">
        <span class="el-icon-circle-check legend-circle" :style="{ color: legendItem.selected ? '#409EFF' : '#e5e5e5' }">
        </span>
        <span class="legend-text">{{ legendItem.name }}</span>
      </li>
    </ul>
    <mix-charts chartId="zoneTraffic" class="zone-traffic-container" :chartData="zoneTrafficData" chartType="Sankey" />
  </div>
</template>

<script>
export default {
  name: 'zoneTraffic',
  props: {
    propparam: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      loading: true,
      zoneTrafficData: {},
      legendAside: [],
      colors: ['#4fb9d1', '#d83965', '#f39c38', '#9036aa', '#4054af', '#e35241', '#3f9488',
			 '#97c05c', '#154bee', '#33e6cc', '#123997', '#faa200', '#ffff00', '#b0e0e6', '#470024', '#bce700', '#4396ec'],
    }
  },
  watch: {
    propparam: {
      handler: 'refreshHandle',
      immediate: true
    }
  },
  methods: {
    refreshHandle(param) {
      if (param.dateType !== '/zonedirection/zonegraph') return
      this.loading = true
      this.emitData = param.data
      this.getZones()
    },
    getZones() {
      this.firstZoneName = ''
      this.legendAside = []
      if (!this.emitData.asis_org) return
      this.$api.base.zone({
        mallId: this.emitData.asis_org,
        type: 4,
        status: 1,
        sortName: '"floor".name, "zone".name',
      })
      .then(res => {
        let result = res.data
          , firstZoneId = null
        result.data.forEach((item, index) => {
          this.legendAside.push({
            legendColor: this.colors[index],
            selected: index === 0 ? true : false,
            name: item.name,
            id: item.id
          })
          if (index === 0) {
            firstZoneId = item.id
            this.firstZoneName = item.name
          }
        })
        this.getData(firstZoneId)
      })
    },
    checkLegend(isSeled, legendIndex) {
      if (this.legendAside[legendIndex].selected) return
			this.legendAside.forEach(item => {
				item.selected = false
      })
      this.legendAside[legendIndex].selected = true
      this.getData(this.legendAside[legendIndex].id)
    },
    getData(zoneId) {
      if(!this.loading) {
        this.loading = true
      }
      this.zoneTrafficData = {}
      if(!zoneId) {
        this.$message({
          message: this.$t('message.emptyShop'),
          type: 'warning'
        })
        return
      }
      if (!this.emitData.asis_org) return
      this.$api.customerReport.analysisSankey({
        orgIds: this.emitData.asis_org,
        startDate: this.emitData.asis_time,
        endDate: this.emitData.asis_time,
        orgType: this.emitData.asis_level,
        ageStage: this.emitData.asis_age,
        gender: this.emitData.asis_gender,
        zoneIds: zoneId,
        xLevel: this.emitData.asis_xLevel,
        yLevel: this.emitData.asis_yLevel
      })
      .then(res => {
        let result = res.data
        if(result.code === 200) {
          if (result.data) {
            let nodeInfo = {}
              , sankeyData = {
                node: [],
                link: []
              }
            result.data.node.forEach(item => {
              nodeInfo[item.zoneId] = item.zoneName
            })
            if(result.data.node.length > 0) {
              sankeyData.node = result.data.node.map(item => {
                return {
                  name: item.zoneName
                }
              })
            }
            if(result.data.node.length > 0) {
              sankeyData.link = result.data.link.map(item => {
                return {
                  source: nodeInfo[item.source],
                  target: nodeInfo[item.target],
                  value: item.value
                }
              })
            }
            sankeyData['color'] = this.colors
            this.zoneTrafficData = sankeyData
            this.loading = false
          }
        } else {
          console.error(result.msg)
        }
      })
      .catch(err => {
        this.catchErrorHandle(err)
      })
    },
  }
}
</script>

<style scoped>
.sankey-container {
  width: 100%;
  background: #fff;
}
#zoneTraffic {
  height: 660px;
}

.legend-container:after,
.legend-container:before {
  content: '';
  display: table;
}

.legend-container:after {
  clear: both;
}

.legend-container {
  padding-left: 15px;
  padding-top: 20px;
}

.legend-item {
  float: left;
  text-align: left;
  cursor: pointer;
  margin-right: 10px;
}

.legend-circle {
	margin-right: 5px;
  font-size: 18px;
}

.legend-text {
	position: relative;
	font-size: 14px;
	top: -2px;
}
@media (max-width: 1440px) {
  #zoneTraffic {
    height: 480px;
  }
}
@media (max-width: 1366px) {
  #zoneTraffic {
    height: 400px;
  }
}
</style>