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" :dropdownList="dropdownList" @dropdownFn="dropdownFn" listTitle="铁粉数" :city="city" :rankData="rankData" @rankFans="rankFans"/>
    </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:[],
      dropdownList:[],
      rankList:[],
      city:'全国',
      mapStyle:{
        width:'1000',
        height:'900',
        tooltip:true,
        zoom:1.5
      },
    }
  },
  methods: {
    dropdownFn (val){
      this.city = val
      this.rankData = this.optionList.find(it=>it.city == val).list
    },
    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
          this.rankList = res.data.data.countryTop
          this.dropdownList = res.data.data.cityInfoList.map(it=>it.city)
        }
        
      }).catch(() => {
      })
    },
    clear() {
      this.cityObj = null
      this.optionList = this.dataList
      this.rankData = this.rankList
      this.city = '全国'
    },
    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;
  }
}
</style>