trackDialog.vue

<template>
  <el-dialog :visible.sync="isShow" class="manage-dialog xy-dialog track-dialog" :close-on-click-modal="false" :before-close="closeDialog">
    <div slot="title">
      <span class="dialog-title">{{ $t('button.showTrack') }}</span>
      <div class="replay" @click="rePlay">
        <i class="icon font_family icon-reload" title="重新播放"></i>
      </div>
    </div>
    <!-- <div class="total-box">
              游逛区域: {{ zoneNum }} 个, 共停留 {{ totalZL }} 秒
          </div> -->
    <!-- 动线图 -->
    <div class="track-box" v-loading="loading">
      <div ref="graphContainer" class="graph-container">
        <!-- <img :src="floorSrc" class="background-img" alt="" /> -->
        <template v-for="(item, index) in graphBgList">
          <img :id="item.id" :key="item.onlyId" :src="item.src" :data-index="index" @load="imgLoaded(item.id)" :style="{ height: item.height + 'px' }" class="background-img" />
        </template>
        <div class="graph-chart-container">
          <!-- <div id="graphChart" class="graph-box"></div> -->
          <div id="graphChart" class="graph-box" v-if="imgWidth && graphBgList.length > 0 && loadedImgList.length === graphBgList.length"></div>
        </div>
      </div>
      <div class="track-list-right">
        <el-scrollbar class="track-list-scrollbar" wrap-class="list-scrollbar" :native="false">
          <ul class="catch-pic-list">
            <li v-for="(picItem, index) in picList" :key="index" class="catch-pic-item">
              <el-popover placement="right" title="" trigger="hover">
                <img :src="picItem" class="catch-pic" @error="dealErrImg($event)" slot="reference" />
                <img :src="picItem" class="zoomin-catch-pic" @error="dealErrImg($event)" />
              </el-popover>
            </li>
          </ul>
        </el-scrollbar>
      </div>
    </div>
  </el-dialog>
</template>

<script>
// import defaultImg from './hwArea.jpg'
import defaultFace from '@/assets/img/behavior/default.png'
import defaultHwImg from '@/assets/img/customer/hwshg.jpg'
import defaultBlImg from '@/assets/img/customer/bailian.svg'

export default {
  data() {
    return {
      isShow: false,
      loading: true,
      personUnid: '',
      parameter: null,
      // floorSrc: '',
      graphBgList: [],
      loadedImgList: [],
      imgWidth: 0,
      // firstFlag: true,
      // naturalWidth: '',
      // naturalHeight: '',
      nodeDic: {},
      graphData: [],
      linkData: [],
      myEchart: null,
      picList: [],
      dataLen: null,
      timerObj: {},
      linkTimer: {},
      trafficData: [],
      durationData: [],
      idArr: [],
      nodeInstance: {},
      timeInstance: {},
      totalKL: null,
      totalZL: null,
      // zoneNum: null,
      // defaultImg: ''
    }
  },
  watch: {
    loadedImgList: {
      handler(val) {
        if (this.graphBgList.length && val.length === this.graphBgList.length) {
          this.getChartData()
        }
      },
      deep: true
    }
  },
  methods: {
    dialogInit(personUnid, _param) {
      this.loading = true
      this.personUnid = personUnid
      this.parameter = _param
      this.isShow = true
      this.timerObj = {}
      this.graphBgList = []
      this.loadedImgList = []
      this.$nextTick(() => {
        const imageHeight = Math.floor(this.$refs.graphContainer.offsetHeight / _param.asis_bg.length)
        this.graphBgList = _param.asis_bg.reduce((prev, cur) => {
          cur.height = imageHeight
          prev.push(cur)
          return prev
        }, [])
      })
    },
    rePlay() {
      if(!this.myEchart) return
      for (let i = 0; i < this.dataLen; i++) {
        clearTimeout(this.timerObj[i])
        clearTimeout(this.linkTimer[i])
      }
      this.loading = true
      this.myEchart.clear()
      this.graphData = []
      this.linkData = []
      this.picList = []
      this.trafficData = []
      this.durationData = []
      this.idArr = []
      this.getChartData()
    },
    imgLoaded(domId) {
      const { offsetWidth } = this.queryIdDom(domId)
      this.imgWidth = offsetWidth > this.imgWidth ? offsetWidth : this.imgWidth
      this.loadedImgList.push(offsetWidth)
    },
    dealErrImg(e) {
      let ev = e || window.event;
      ev.target.src = defaultFace;
    },
    getDomAttrs(nodeId) {
      const { queryIdDom, gateFloorMap } = this
      try {
        const { dataset, offsetHeight, offsetWidth } = queryIdDom(nodeId)
        const index = dataset.index
        return {
          width: offsetWidth,
          height: offsetHeight,
          index: index
        }
      } catch(err) {
        console.log(err)
        return {
          width: 0,
          height: 0,
          index: 0
        }
      }
    },
    queryIdDom(id) {
      return document.getElementById(id)
    },
    fetchTrack() {
      const { asis_org, asis_time } = this.parameter
      return new Promise(resolve => {
        this.$api.customerReport.movingLineReport(this.personUnid, {
          orgIds: asis_org,
          orgType: 'mall',
          startDate: asis_time,
          endDate: asis_time,
        })
          .then(res => {
            resolve(res)
          })
          .catch(err => {
            console.error(err)
            this.catchErrorHandle(err)
          })
      })
    },
    // 并发渲染
    async getChartData() {
      this.totalKL = null
      this.totalZL = null
      this.nodeInstance = {}
      this.timeInstance = {}
      this.nodeDic = {}
      // this.zoneNum = null
      const { data } = await this.fetchTrack()
      // 初始化画布
      this.initCanvas()
      this.loading = false
      // 处理node link pie
      this.loadInOrder(data.data)
    },
    async loadInOrder(data) {
      this.dataLen = data.length
      // 布局定点
      const containerFixedNode = [
        {
          id: -1, name: 'startPoint', value: -1, x: '0', y: '0', symbolSize: 0, label: { show: false }
        },
        {
          id: -2, name: 'endPoint', value: -1, x: Math.max(...this.loadedImgList), y: this.$refs.graphContainer.offsetHeight, symbolSize: 0, label: { show: false }
        }
      ]
      this.graphData = [...containerFixedNode]
      // 并发处理 node 和 links
      const graphDataPromises = this.dealGraph(data)
      // Graph Pie 按次序渲染
      for (let i = 0, len = graphDataPromises.length; i < len; i++) {
        await this.sleep(i, graphDataPromises[i], 1000)
      }
    },
    // 按次序输出
    sleep(index, data, time) {
      return new Promise(resolve => {
        this.timerObj[index] = setTimeout(() => {
          this.drawChart(index, data)
          resolve()
        }, time)
      })
    },
    dealGraph(data) {
      data.forEach(item => {
        // source
        item.source = String(item.source)
        if (item.source_floor) {
          let sourceXY = this.dealXY(item.source_floor, item.sourceX, item.sourceY)
          item.sourceX = String(sourceXY.x)
          item.sourceY = String(sourceXY.y)
        }
        item.target = item.target ? String(item.target) : null
        if (item.target_floor) {
          let targetXY = this.dealXY(item.target_floor, item.targetX, item.targetY)
          item.targetX = String(targetXY.x)
          item.targetY = String(targetXY.y)
        }
        // nodeDic
        if (!this.nodeDic[item.source]) {
          this.nodeDic[item.source] = {
            id: item.source,
            name: item.sourceName,
            x: item.sourceX,
            y: item.sourceY
          }
        }
        // nodeInstance
        if (typeof this.nodeInstance[item.source] === 'undefined') {
          this.nodeInstance[item.source] = 1
        } else {
          this.nodeInstance[item.source] += 1
        }
        // timeInstance
        if (typeof this.timeInstance[item.source] === 'undefined') {
          this.timeInstance[item.source] = item.sourceTrackTime
        } else {
          this.timeInstance[item.source] += item.sourceTrackTime
        }
      })
      return data
    },
    addPics({ sourceCountdate, sourceChannelSeries, sourcePic }) {
      const dateS = sourceCountdate.replace(/^(\d{4})-(\d{2})-(\d{2}).*$/, '$1$2$3')
      const fullPicPath = `${window._vionConfig.picUrl}/picture/face/${dateS}/${sourceChannelSeries}/${sourcePic}`
      this.picList.unshift(fullPicPath)
    },
    /**
     * 处理 相对点位
     * source_floor | target_floor
     * sourceX | targetX
     * sourceY | targetY
     */
    dealXY(...args) {
      if (!args[0]) return
      const { getDomAttrs, normalWidth, normalHeight } = this
      const { width, height, index } = getDomAttrs(args[0])
      return {
        x: args[1] ? (args[1] / normalWidth * width).toFixed(2) : 0,
        y: args[2] ? ((args[2] / normalHeight * height) + height * (index - 0)).toFixed(2) : 0
      }
    },
    initCanvas() {
      // if (this.myEchart) return
      let chartDom = document.getElementById('graphChart')
      chartDom.style.width = this.imgWidth + 'px'
      chartDom.style.height = this.$refs.graphContainer.offsetHeight + 'px'
      if (this.$echarts.getInstanceByDom(chartDom)) {
        this.$echarts.init(chartDom).dispose()
        this.myEchart = this.$echarts.init(chartDom)
      } else {
        this.myEchart = this.$echarts.init(chartDom)
      }
      const option = {
        tooltip: {},
        color: '#4054af',
        series: [
          {
            top: 0,
            left: 0,
            right: 0,
            bottom: 1,
            edgeSymbol: ['none', 'arrow'],
            categories: [],
            type: 'graph',
            layout: 'none',
            data: [],
            links: [],
            z: 3,
            label: {
              normal: {
                show: true,
                position: 'right',
                formatter: '{b}'
              }
            },
            lineStyle: {
              normal: {
                color: 'source',
                curveness: 0.3
              }
            }
          }
        ]
      }
      // this.myEchart.clear()
      this.myEchart.setOption(option)
    },
    drawChart(index, data) {
      this.dealNodeData(data)
      // 抓拍图片
      this.addPics(data)
      this.dealPieData(data.sourceName)
      const centerData = [data.sourceX, data.sourceY]
      let option = this.myEchart.getOption()
      if (option.series.length > 0) {
        option.series[0].data = this.graphData
      }
      if(this.idArr.indexOf(data.source) > -1) {
        option.series.forEach(item => {
          if('kl' + item.id === 'kl' + data.source) {
            item.data = this.trafficData
          } else if('zl' + item.id === 'zl' + data.source) {
            item.data = this.durationData
          }
        })
      } else {
        this.idArr.push(data.source)
        option.series.push(...this.drawNodePie(data.source, centerData))
      }
      this.myEchart.setOption(option)
      // 绘制 link
      this.linkTimer[index] = setTimeout(() => {
        this.dealLinkData(data)
        option.series[0].links = this.linkData
        this.myEchart.setOption(option)
      }, 1000)
    },
    // 关系图 点位 node
    dealNodeData({ source, sourceName, sourceX, sourceY }) {
      if (source) {
        const isExist = this.graphData.some(item => item.id === source)
        if (isExist) {
          this.graphData.forEach((item, index) => {
            if (item.id === source) {
              item.value += 1
              item.symbolSize = 5
            }
          })
        } else {
          this.graphData.push({
            id: source,
            name: sourceName,
            x: sourceX,
            y: sourceY,
            value: 1,
            symbolSize: 5
          })
        }
      }
    },
    // 关系图 线
    dealLinkData({ source, target }) {
      // if (this.linkData.length > 0) {
      if (target) {
        const isExist = this.linkData.some(item => {
          return item.source === source && item.target === target
        })
        if (isExist) {
          this.linkData.forEach((item, linkIndex) => {
            if (item.source === source && item.target === target) {
              item.value += 1;
              item.lineStyle = {
                normal: {
                  width: item.value
                }
              }
            }
          })
        } else {
          this.linkData.push({
            source: source,
            target: target,
            value: 1
          })
        }
      }
      // } else {
      //   this.linkData.push({
      //     source: source,
      //     target: target,
      //     value: 1
      //   })
      // }
    },
    // 饼图 匹配当前节点
    dealPieData(sourceName) {
      this.trafficData = []
      this.durationData = []
      this.trafficData = Object.keys(this.nodeInstance).reduce((prev, i) => {
        // this.zoneNum++
        this.totalKL += this.nodeInstance[i]
        prev.push({
          name: this.nodeDic[i].name,
          value: this.nodeInstance[i]
        })
        return prev
      }, [])
      this.durationData = Object.keys(this.timeInstance).reduce((prev, i) => {
        this.totalZL += this.timeInstance[i]
        prev.push({
          name: this.nodeDic[i].name,
          value: this.timeInstance[i]
        })
        return prev
      }, [])
      this.trafficData.forEach((item,index) => {
        if (item.name === sourceName) {
          item.tooltip = {
            show: true,
            backgroundColor: 'rgba(0, 0, 0, .5)',
            formatter: (params) => {
              const { value } = params.data
              let htmls = '', ratio = ''
                htmls += `
                  <div style="font-size:14px;height:31px;color:#fff;border-radius:4px;line-height:31px;padding-left:15px;padding-right:15px; text-align: left;">
                    遊逛次数: ${value}
                  </div><div>
                `
                ratio = ((value / this.totalKL) * 100).toFixed(2) + '%'
                htmls += `
                  <p style="font-size:13px; padding:4px 15px; color:#fff; text-align: left;">占比: ${ratio}</p>
                  </div>
                `
              return htmls
            }
          }
          item.itemStyle = {
            normal: {
              color: '#5FC5F5'
            },
            emphasis: {
              color: '#5FC5F5'
            }
          }
        }
      })
      this.durationData.forEach((item,index) =>{
        if (item.name === sourceName) {
          item.tooltip = {
            show: true,
            backgroundColor: 'rgba(0, 0, 0, .5)',
            formatter: (params) => {
              const { value } = params.data
              let htmls = ''
              let ratio = ''
                htmls += `
                  <div style="font-size:14px;height:31px;color:#fff;border-radius:4px;line-height:31px;padding-left:15px;padding-right:15px; text-align: left;">
                    滞留时间: ${value}
                  </div><div>
                `
                ratio = ((value / this.totalZL) * 100).toFixed(2) + '%'
                htmls += `
                  <p style="font-size:13px; padding:4px 15px; color:#fff; text-align: left;">占比: ${ratio}</p>
                  </div>
                `
              return htmls
            }
          }
          item.itemStyle = {
            normal: {
              color: '#8F99F0'
            },
            emphasis: {
              color: '#8F99F0'
            }
          }
        }
      })
    },
    // 客流量 滞留时间 饼图
    drawNodePie(source, centerData) {
      const pieBaseOption = {
        type: 'pie',  // 客流量
        center: centerData,
        hoverAnimation: false,
        label: {
          show: false
        },
        labelLine: {
          show: false
        },
        tooltip: {
          show: false
        },
        itemStyle: {
          normal: {
            label: {
              show: false
            },
            labelLine: {
              show: false
            }
          },
          emphasis: {
            label: {
              show: false
            },
            labelLine: {
              show: false
            }
          }
        }
      }
      return [
        Object.assign({}, pieBaseOption, {
          id: 'kl' + source,
          radius: [20, 0],
          data: this.trafficData,
          color: '#e0f5ff'
        }),
        Object.assign({}, pieBaseOption, {
          id: 'zl' + source,
          radius: [30, 24],
          data: this.durationData,
          color: '#dbdffd'
        })]
    },
    // 渲染图表
    closeDialog() {
      this.isShow = false;
      for (let i = 0; i < this.dataLen; i++) {
        clearTimeout(this.timerObj[i])
        clearTimeout(this.linkTimer[i])
      }
      this.graphData = [];
      this.linkData = [];
      this.picList = [];
      this.idArr = [];
      this.nodeDic = {}
      this.trafficData = [];
      this.durationData = [];
      this.myEchart && this.myEchart.clear();
    },
  }
}
</script>

<style scoped>
.track-box:after,
.track-box:before {
  content: '';
  display: table;
}

.track-box:after {
  clear: both;
}

.graph-container {
  /* display: inline-block; */
  position: relative;
  height: 700px;
  width: 92%;
  float: left;
  text-align: center;
  overflow-x: auto;
  overflow-y: hidden;
}

.background-img {
  /* width: auto;
        height: 100%;
        position: absolute;
        top: 0;
        left: auto; */
  /* height: 100%; */
  max-width: 100%;
  max-height: 100%;
  display: block;
  margin: 0 auto;
}

.graph-chart-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.graph-box {
  margin: 0 auto;
}

.dialog-title {
  color: #fff;
  font-size: 16px;
}

.replay {
  display: inline-block;
  padding-left: 10px;
  color: #fff;
  cursor: pointer;
  position: relative;
}

.replay:hover {
  color: #164bee;
}

.icon-reload {
  font-size: 14px;
}

.track-list-right {
  float: right;
  /* background-color: #e4e4e4; */
  padding-left: 6px;
  padding-right: 6px;
  height: 700px; 
  box-sizing: border-box;
}

.catch-pic-list {
  padding-right: 10px;
}

.catch-pic-item:not(:first-child) {
  padding-top: 6px;
  background-color: #e4e4e4;
}

.zoomin-catch-pic {
  height: 200px;
}

.catch-pic {
  height: 50px;
  width: 50px;
  vertical-align: middle;
}

.track-list-scrollbar {
  height: 100% !important;
  max-height: 700px !important;
}

.total-box {
  text-align: center;
  padding-bottom: 10px;
}

@media only screen and (max-width: 1680px) {
  .graph-container {
    height: 700px;
  }
}

@media only screen and (max-width: 1440px) {
  .graph-container {
    /* 600 */
    height: 700px;
  }
}

@media only screen and (max-width: 1366px) {
  .graph-container {
    /* 600 */
    height: 700px;
  }
}

@media only screen and (max-width: 1280px) {
  .graph-container {
    /* 600 */
    height: 700px;
  }
}
</style>