faceheat.vue

<template>
  <div class="base-analysis">
    <el-header height="70px">
      <span class="asis-title">{{ asisName }}&nbsp;{{$t('asis.HeatMap')}}</span>
      <span class="more-option-wrapper" @click="showCollapse">
        <span class="more-option-text">{{$t('asis.moreOp')}}</span>
        <i :class="['el-icon-arrow-down', 'more-option-arrow', { 'more-option-up': !moreOptVisible }]"></i>
      </span>
    </el-header>
    <in-heat-option v-show="moreOptVisible" ref="init" @reportTime="reportHandler" @initData="initTab"></in-heat-option>
    <div class="element-main area-heat-main">
      <div class="area-heat-container">
        <div id="areaHeatmap" v-loading="loading">
          <div class="heat-silder">
            <el-slider v-model="sliderVal" :max="sliderMax" :min="1" vertical @change="slideHandle(sliderVal)" :disabled="sliderDisabled" height="200px">
            </el-slider>
          </div>
          <ul class="inside-bg-box" v-for="(item,index) in newImgList" :key="index">
            <li class="inside-bg-item" v-for="(item1,index1) in item" :key="item1.id" :style="{ width: imgContainerW }">
              <!-- <div class="img-box" v-lazy-container="{ selector: 'img' }"> -->
              <!-- <img class="area-img" :data-src="item1.shotpic" :data-error="defaultDevimg"> -->
              <img :id="imagePrefix + item1.id" class="area-img" @load="imgLoadedSuccess()" :src="item1.shotpic" @error="dealErrImg($event)">
              <template v-if="item1.isRender">
                <div class="heatmap-div" v-loading="item1.loading">
                  <div :id="item1.id"></div>
                </div>
              </template>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import inHeatOption from '../common/option/posHeatmapMoreOption'
import defaultDevimg from "@/assets/img/manage/screenshot.png"

export default {
  data() {
    return {
      moreOptVisible: false,
      asisName: '',
      emitData: {},
      loading: true,
      heatmapInstance: {},
      // heatmapImg: '',
      sliderVal: null,
      sliderDisabled: true,
      imgList: [],
      heatInstance: {},
      heatDataObj: {},
      sliderMax: 300,
      defaultDevimg,
      newImgList: [],
      radioDate: 'heatmap',
      loadedLen: 0,
      imagePrefix: 'images',
      performanceCount: 0,
      heatStore: []
    }
  },
  components: {
    'in-heat-option': inHeatOption
  },
  watch: {
    // 图片加载完成
    loadedLen(len) {
      if (len === this.imgList.length) {
        // 并发执行获取数据
        this.heatInOrder()
      }
    },
    // 累计渲染次数
    performanceCount(val) {
      if (val === this.imgList.length) {
        const { heatStore } = this
        const dataMax = Math.max(...heatStore)
        for (let heatKey in this.heatInstance) {
          if (Object.keys(this.heatInstance[heatKey]).length > 0) {
            this.heatInstance[heatKey].setDataMax(dataMax)
          }
        }
        this.sliderMax = isNaN(dataMax) ? 1 : Math.ceil(dataMax * 2)
        this.sliderVal = isNaN(dataMax) ? 1 : Math.ceil(dataMax)
        this.sliderDisabled = false
      }
    }
  },
  computed: {
    imgContainerW() {
      const imgLen = this.imgList.length
      return imgLen === 1
        ? '100%'
        : imgLen > 1 && imgLen < 5
          ? '48.5%'
          : '32.5%'
    }
  },
  mounted() {
    this.getMallOpt();
    this.showCollapse();
  },
  updated() {
    //
  },
  methods: {
    imgLoadedSuccess() {
      this.loadedLen += 1
    },
    dealErrImg(e) {
      let ev = e || window.event;
      ev.target.src = defaultDevimg;
    },
    showCollapse() {
      // 获取上面元素的高度
      let headerH = '', titleH = '', collapseH = '', mt = '';
      headerH = this.getStyleFn('.el-header', 'height');
      titleH = this.getStyleFn('.analysis-wrapper .el-header', 'height');
      if (this.moreOptVisible) {
        this.moreOptVisible = false;
        mt = headerH + titleH + 8 + 'px';
        $('.area-heat-main').animate({ marginTop: mt })
      } else {
        this.moreOptVisible = true;
        setTimeout(() => {
          collapseH = this.getStyleFn('.analysis-option-wrapper', 'height');
          mt = headerH + titleH + collapseH + 8 + 'px';
          $('.area-heat-main').animate({ marginTop: mt });
        }, 100);
      }
    },
    getMallOpt() {
      const param = {
        accountId: this.$cookie.get('accountId'),
        status: 1,
      }
      this.zoneFilterMall(param, 4)
        .then((resolveData) => {
          let { mallData,localMallId,titleName } = resolveData
          this.asisName = titleName
          this.$refs.init.initAsis(localMallId === '' ? null : Number(localMallId), mallData)
        }, rejectData => {
            console.log(rejectData)
        })
    },
    getWindowHost() {
      const confUrl = window._vionConfig.apiUrl
      return confUrl.indexOf('http') !== -1
        ? confUrl.match(/^http(s)?:\/\/\w+(\.\w+)*/)[0]
        : ''
    },
    fetchImages() {
      const { emitData } = this
      const { asis_org } = emitData
      if (!asis_org) return
      return new Promise(resolve => {
        this.$api.base.channel({
          mallId: asis_org,
            isMallGate: 0,
        })
          .then(res => {
            resolve(res)
          })
          .catch(err => {
            this.catchErrorHandle(err)
          })
      })
    },
    async getData() {
      this.loading = true
      // 还原初始值
      this.imgList = []
      this.newImgList = []
      this.heatInstance = {}
      const host = this.getWindowHost()
      try {
        const imgagesResult = await this.fetchImages()
        if (imgagesResult) {
          this.imgList = imgagesResult.data.data.reduce((prevVal, curVal, index) => {
            prevVal.push({
              id: curVal.id,
              channelnum: curVal.serialnum,
              shotpic: `${host}/snapshot/real/${curVal.serialnum}.jpg`,
              loading: true,
              isRender: true
            })
            // this.heatInstance[curVal.serialnum] = {}
            return prevVal
          }, [])
          this.imgLayout()
          this.loading = false
        }
      } catch(err) {
        console.error(err)
      }
    },
    imgLayout() {
      if (this.imgList.length > 2 && this.imgList.length <= 4) {
        var len = Math.ceil(this.imgList.length / 2);
        for (var i = 0; i < len; i++) {
          var list = []
          if (i === 0) {
            for (var j = 0; j < 2; j++) {
              if (this.imgList[j]) {
                list.push(this.imgList[j])
              }
            }
          } else {
            for (var k = i * 2; k <= (i * 2 + 2); k++) {
              if (this.imgList[k]) {
                list.push(this.imgList[k])
              }
            }
          }
          this.newImgList[i] = list
        }
      } else {
        var len = Math.ceil(this.imgList.length / 3);
        for (var i = 0; i < len; i++) {
          var list = []
          if (i === 0) {
            for (var j = 0; j <= 2; j++) {
              if (this.imgList[j]) {
                list.push(this.imgList[j])
              }
            }
          } else {
            for (var k = i * 3; k <= (i * 3 + 2); k++) {
              if (this.imgList[k]) {
                list.push(this.imgList[k])
              }
            }
          }
          this.newImgList[i] = list
        }
      }
    },
    /**
     * 并发请求热力数据
     */
    heatInOrder() {
      this.loadedLen = 0
      this.performanceCount = 0
      this.sliderDisabled = true
      const { imgList, emitData, fetchHeatData } = this
      const { asis_org, asis_time } = emitData
      imgList.forEach((item, index) => {
        // item.isRender = false
        // repaint 不生效采用 v-if
        // this.$nextTick(() => {
        //   item.isRender = true
          if (this.heatInstance[item.channelnum]) {
            this.heatInstance[item.channelnum].repaint && this.heatInstance[item.channelnum].repaint()
          } else {
            this.heatInstance[item.channelnum] = {}
          }
        // })
        item.loading = item.loading || true
        this.$api.customerReport.trackHeatmapReport(item.id, {
            orgIds: asis_org,
            startDate: asis_time,
            endDate: asis_time
        })
          .then(res => {
            const { data } = res
            if (data.data[item.channelnum]) {
              // 渲染 heatmap
              this.heatDataObj[item.id] = data.data[item.channelnum]
              fetchHeatData(item, index)
            } else {
              this.$nextTick(() => {
                item.loading = false
                // this.imgList[index].loading = false
              })
            }
          })
          .catch(err => {
            console.log(err)
            this.catchErrorHandle(err)
            this.$nextTick(() => {
              item.loading = false
              // this.imgList[index].loading = false
            })
          })
      })
    },
    /**
     * 渲染 热力图
     * @param {object} 图片信息
     * @param {number} index
     */
    fetchHeatData({ id, channelnum }, index) {
      const { imagePrefix, heatInstance, heatDataObj } = this
      const { width, height, naturalWidth, naturalHeight } = document.getElementById(imagePrefix + id)
      // 存在实例
      let heatDom = document.getElementById(id)
        heatDom.style.width = width + 'px'
        heatDom.style.height = height + 'px'
      if (!heatInstance[channelnum]['_renderer']) {
      //   // 清空画布
      //   if (!heatDom.getContext) return
      //   let ctx = heatDom.getContext("2d")
      //     ctx.clearRect(0, 0, heatDom.width, heatDom.height)
      // } else {
        this.heatInstance[channelnum] = this.$heatmapjs.create({
          container: heatDom
        })
      }
      let points = []
      if (heatDataObj[id]) {
        points = heatDataObj[id].reduce((prevVal, curVal) => {
          const x = curVal.x * width / naturalWidth
          const y = curVal.y * height / naturalHeight
          prevVal.push({
            x: this.combinePoint(x),
            y: this.combinePoint(y),
            value: 1
          })
          return prevVal
        }, [])
      }
      this.heatInstance[channelnum].setData({
        data: points
      })
      // 取聚合数据集长度
      const storeLen = this.heatInstance[channelnum]._store._data.length
      this.heatStore.push(storeLen)
      this.heatInstance[channelnum].setDataMax(storeLen)
      this.performanceCount += 1
      this.imgList[index].loading = false
    },
    /**
     * 点位容差值
     * @param {number} pointToler
     * @returns {number}
     */
    combinePoint(point, pointToler = 8) {
      return parseInt(point - point % pointToler)
    },
    slideHandle(sliderVal) {
      for (let i in this.heatInstance) {
        if (Object.keys(this.heatInstance[i]).length) {
          this.heatInstance[i].setDataMax(sliderVal)
        }
      }
    },
    initTab(data) {
      this.asisName = data.asis_tit;
      this.emitData = data;
      this.getData()
    },
    reportHandler(parameter) {
      this.asisName = parameter.asis_tit;
      // 同一商场不需要重新获取图片地址
      if (this.emitData.asis_org === parameter.asis_org && this.emitData.asis_time !== parameter.asis_time) {
        this.emitData.asis_time = parameter.asis_time
        this.heatInOrder()
      } else {
        this.emitData = parameter
        // if (this.radioDate === 'table') {
        //   if (this.tableIds) {
        //     this.getChartData(this.tableIds)
        //   } else {
        //     this.getTableId()
        //   }
        // } else {
          // this.getChannel()
        this.getData()
        // }
      }
    }
  }
}
</script>

<style scoped>
.track-list {
  background-color: #fff;
  padding-bottom: 20px;
}

.area-heat-container {
  position: relative;
  background-color: #fff;
  border: 1px solid transparent;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  padding: 15px;
  /* margin-bottom: 12px; */
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
}

#areaHeatmap {
  /* height: 800px; */
  min-height: 300px;
  margin: 0 auto;
}

.asis-table-wrapper {
  padding: 0px !important;
}

.heat-silder {
  position: absolute !important;
  left: 15px;
  top: 50px;
  z-index: 2;
}


/* 生成图片栏 */

.inside-bg-box {
  margin: 0 auto;
}

.inside-bg-box:after,
.inside-bg-box:before {
  content: '';
  display: table;
}

.inside-bg-box:after {
  clear: both;
}

.inside-bg-item {
  float: left;
  position: relative;
  overflow: hidden;
  margin-bottom: 10px;
  /* height: 250px; */
}

.inside-bg-item+.inside-bg-item {
  margin-left: 1%;
}

.inside-bg-item:nth-child(3n-2) {
  margin-left: 0;
}



/* .inside-bg-item:nth-child(2n) {
        margin-left: 10px;
        margin-right: 10px;
    } */

.img-box {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.area-img {
  width: 100%;
  vertical-align: top;
  /* height: 786px; */
}

.heatmap-div {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.radio-group-box {
  font-size: 13px;
  z-index: 99;
  text-align: left;
  margin-top: -10px;
  padding-bottom: 5px;
}
</style>