fans.vue

<template>
  <!--  -->
  <div class="force">
    <div class="map">
      <FansceMap v-if="cityObj" :mapStyle="mapStyle" :optionList="optionList" :cityObj="cityObj"  />
      <ForceMap v-else :mapStyle="mapStyle" :optionList="optionList" :cityObj="cityObj" @setrankList="setrankList" title="铁粉数"/>
    </div>
    <div class="user-rank-list" ref="user-rank-list">
      <RankList title="铁粉榜" @clear="clear" :cityObj="cityObj" listTitle="铁粉数" :rankData="rankData" @rankFans="rankFans"/>
    </div>
    <div class="force-slide" :style="`right:${$refs['user-rank-list'].offsetWidth+50}px;`" v-if="cityObj" @click="clear">
      <img src="@/assets/img/fansleft.png" alt="">
       返回 
    </div>
  </div>
</template>
<script>
import ForceMap from './mapForce.vue'
import FansceMap from './mapFans.vue'
import RankList from "./rankList.vue";
import { getHardcoreFanInfo,getFanDistribution } from '@/server/screen-data'
export default {
  data() {
    return {
      optionList:[],
      rankData:[],
      rankList:[],
      cityObj:'',
      dataList:[],
      city:'全国',
      mapStyle:{
        width:'1000',
        height:'900',
        tooltip:true,
        zoom:1.5
      },
    }
  },
  methods: {
    setrankList(data){
      this.rankData = data.list
      this.city = data.city
    },
    getlist(){
       getHardcoreFanInfo().then((res) => {
        if (res.status == 200){
          this.rankData = res.data.data.countryTop
          this.rankList = res.data.data.countryTop
          this.dataList = res.data.data.cityInfoList
          this.optionList = res.data.data.cityInfoList
        }
        
      }).catch(() => {
      })
    },
    clear() {
      this.cityObj = null
      this.optionList = this.dataList
      this.rankData = this.rankList
    },
    rankFans(item) {
      getFanDistribution(item.username).then(re=>{
        if (re.status === 200){
          this.optionList = re.data.data.map(it=>{
            return {
              name:it.city,
              value:it.gps.concat(it.score),
              uv:it.score
            }
          })
          this.cityObj = item
        }
      })
    }
  },
  mounted(){
    this.getlist()
  },
  created(){
    this.mapStyle.width = document.documentElement.clientWidth
    this.mapStyle.height = document.documentElement.clientHeight-66
  },
  components: {
    ForceMap,
    RankList,
    FansceMap
  },
}
</script>
<style scoped lang="scss">
.force {
  width: 100%;
  display: flex;
  justify-content: space-between;
  position: relative;
  .user-rank-list{
    position: absolute;
    top: 40px;
    right: 40px;
  }
  .force-slide{
    // padding: 10px;
    width: 64px;
    height: 40px;
    background: #364366;
    color:#78C1FF;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50px;
    // left: 20px;
    font-size: 14px;
    border: 2px solid #5f97d5;
    cursor: pointer;
    img{
      width: 12px;
      height: 16px;
    }
  }
  // .user-rank-list {
  //   margin-top: 40px;
  //   margin-right: 72px;
  // }
}
</style>