fheat.vue

<!-- 楼层热力 -->
<template>
    <div>
        <!-- 顶部区域 S-->
        <div class="ipage_top">
            <div class="tit"><img :src="bindIcon('zhuancang')"/>{{title||chartData.title}}</div>
            <div class="acts"></div>
        </div>
        <div class="ichart">
            <el-row class="ipart h425">
                <el-col v-loading="loading">
                    <div class="legend-box">
                        <div class="color-legend">
                            <div v-for="(item,index) in changeLegend" :key="index" class="color-box">
                                <p class="color-text" :style="{ 'top': (index + 1) % 2 == 0 ? '19px' : '-21px' }">{{ item.text }}</p>
                                <span class="color-block" :style="{'background-color': item.color}"></span>
                                <span class="border-span" :style="{ 'top': (index + 1) % 2 == 0 ? '14px' : '-5px' }"></span>
                            </div>
                        </div>
                    </div>
                    <div class="ipage_heat">
                        <img class="area_img" id="heatImg" @load="imgonload" :src="imgpath" style="width:100%;min-height:180px"/>
                        <ul class="zone_list">
                            <li v-for="(item, index) in zoneList" :key="index" :style="{ top: item.y + '%', left: item.x + '%' }" class="zonepoint" @mousemove="getZoneInfo(item.zoneId)">
                                <el-tooltip placement="left" effect="light">
                                  <div slot="content" class="tipinfo">
                                    <div class="title">{{zoneInfo.zoneName}}</div>
                                    <div class="tipitem">
                                      <span class="label">业态:</span
                                      ><span class="info">{{zoneInfo.zoneFormatName}}</span>
                                    </div>
                                    <div class="tipitem">
                                      <span class="label">客流:</span
                                      ><span class="info">{{zoneInfo.zoneTrafficNum}}人</span>
                                    </div>
                                    <div class="tipitem">
                                      <span class="label">面积:</span
                                      ><span class="info">{{zoneInfo.zoneArea}}㎡</span>
                                    </div>
                                    <div class="tipitem">
                                      <span class="label">坪效:</span
                                      ><span class="info">{{zoneInfo.zoneGroundEffect}}/㎡</span>
                                    </div>
                                    <div class="tipitem">
                                      <span class="label">进店率:</span
                                      ><span class="info">{{zoneInfo.zoneEntryRate}}%</span>
                                    </div>
                                  </div>
                                  <div class="point" :style="{ background:setPointColor(item)}"></div>
                                </el-tooltip>
                            </li>
                        </ul>
                    </div>
                </el-col>
            </el-row>
            
        </div>
    </div>
</template>

<script>
import mixin from './mixin';
import mallData from '@/components/Echarts/data';
/**********************************************************/
/*******************************************************/
export default {
    mixins: [mixin],
    data() {
        return {
            floorPlanUrl: window._vionConfig.picUrl,
            curfloor:'',
            imgpath:'',
            curImg:{},
            zoneList:[],
            curZoneid:'',
            zoneInfo:{},
            showimg:false,
            loading:true,
            changeLegend:[
                {color: '#028108',text:0,day:0},
                {color: '#85c403',text:100,day:100},
                {color: '#f9ff02',text:200,day:200},
                {color: '#ffbdbd',text:300,day:300},
                {color: '#f48111',text:400,day:400},
                {color: '#ff0000',text:500,day:500},
                {text:'500+',day:'500'}
            ],
        }
    },
    created() {
        
    },
    methods: {
        setPointColor(item){
          if(item.zoneTrafficNum <= this.changeLegend[1].text) {
            return this.changeLegend[0].color;
          } else if(item.zoneTrafficNum <= this.changeLegend[2].text) {
             return this.changeLegend[1].color;
          } else if(item.zoneTrafficNum <= this.changeLegend[3].text) {
             return this.changeLegend[2].color;
          } else if(item.zoneTrafficNum <= this.changeLegend[4].text) {
             return this.changeLegend[3].color;
          } else if(item.zoneTrafficNum <= this.changeLegend[5].text) {
             return this.changeLegend[4].color;
          }else{
             return this.changeLegend[5].color;
          }
        },
        //获取店铺信息
        getZoneInfo(zoneid){
          if(this.curZoneid != zoneid){
             this.zoneInfo = {};
             this.$api.base
            .getZoneInfo(zoneid,{
              startDate:this.params.startDate,
              endDate:this.params.endDate 
            }).then(res =>{
              this.zoneInfo = res.data;
            })
          }
          this.curZoneid = zoneid
        },
        //获取楼层店铺
        getZone(floorId){
          return new Promise((resolve,reject) => {
            this.getFloorZone(floorId,{
               startDate:this.params.startDate,
               endDate:this.params.endDate 
            }).then(res =>{
              resolve(res.data)
            });
          });
        },
        async loadFloorData(floorId) {
            this.curImgId = floorId;
            let that = this;
            let floorData = await that.getZone(floorId);
            this.curfloor = floorId;
            this.zoneList = floorData.zoneOverviewVos;
            this.imgpath = this.floorPlanUrl + floorData.floorPic;
            this.loading = false;
        },
        imgonload(){
           
        },
        resetLegend(endDate,startDate){
            let days = this.getDateRegion(endDate,startDate);
            this.changeLegend.forEach(item=>{
                item.text = item.day*days;
                if(!item.color)item.text+='+';
            });
            console.info(this.changeLegend,32)
        },
        loadChartData(params){
            this.loading = true;
            this.resetLegend(params.endDate,params.startDate);
            this.loadFloorData(params.floorIds||params.orgIds);
        //     this.setChartData();
        },
        setChartData(data){
            
        }
    }
}
</script>

<style  lang="less">
.legend-box{
    width: 100%;
    padding: 18px 0px 18px 0;
    background-color: #fff;
    box-sizing: border-box;
}

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

.legend-box:after {
    clear: both;
}
.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;
}
.color-legend {
    width: auto;
    height: auto;
    font-size: 13px;
    float: right;
}
.color-box {
    float: left;
    position: relative;
}
.color-block {
    float: left;
    width: 30px;
    height: 14px;
}

.color-text{
    width: 100%;
    text-align: center;
    font-size: 12px;
    left: -15px;
    position: absolute;
}

.border-span {
    display: block;
    width: 1px;
    height: 5px;
    left: 0;
    background-color: #000;
    position: absolute;
    right: 0;
}

.border-span:nth-child(2n) {
    /* top: 5px; */
}

.track-list {
  background-color: #fff;
  padding-bottom: 20px;
}
#areaHeatmap {
  /* height: 800px; */
  min-height: 300px;
  margin: 0 auto;
}

.heat-silder {
  position: absolute !important;
  left: 15px;
  top: 20px;
  z-index: 2;
}
.radio-group-box {
  font-size: 13px;
  z-index: 99;
  text-align: left;
  margin-top: -10px;
  padding-bottom: 5px;
}

.enlarge-img {
  text-align: center;
  /* margin: 15vh auto 0; */
}
.img-container {
  display: inline-block;
  position: relative;
  width: 100%;
}
.floor-img {
  width: 100%;
}
.close-img__headerbtn {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 0;
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 20px;
  z-index: 9999;
}
.close-img__headerbtn .img__close {
  color: #909399;
}
[class*=" el-icon-"],
[class^="el-icon-"] {
  font-family: element-icons !important;
  speak: none;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: baseline;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.el-icon-close:before {
  content: "\e6db";
}
.handlepoint {
  position: absolute;
  top: 0;
  left: 0;
}
.zonepoint {
  position: absolute;
  cursor: pointer;
}
.zonepoint .point {
  height: 15px;
  width: 15px;
  border-radius: 15px;
  background: rgba(93, 224, 111, 0.4);
}
.zonepoint:hover .point {
  height: 15px;
  width: 15px;
  border-radius: 15px;
  background: rgba(238, 59, 59, 0.6);
}
.zonepoint:hover .point:after {
  animation: ripple 2s 1s ease-out infinite;
  border: solid 2px rgb(238, 59, 59, 0.7);
  border-radius: 1em;
  bottom: 0;
  box-sizing: border-box;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
.zonepoint:hover .point::before {
  animation: ripple 2s ease-out infinite;
  border: solid 2px rgba(220, 141, 141, 0.7);
  border-radius: 1em;
  bottom: 0;
  box-sizing: border-box;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
@keyframes ripple {
  0% {
    opacity: 0.35;
  }
  100% {
    border-radius: 2em;
    opacity: 0;
    transform: scale(3);
  }
}
.tipinfo .title{
  font-size: 16px;
  width: 140px;
}
.tipinfo .label {
  padding: 0 10px 0 0;
  color: #666;
}
.tipinfo .info {
  color: #666;
}
.tipinfo .tipitem {
  margin-bottom: 10px;
}
</style>