force.vue 1.9 KB
Newer Older
!阳仔's avatar
!阳仔 已提交
1 2 3 4 5 6 7
<template>
  <!--  -->
  <div class="force">
    <div class="map">
      <ForceMap :optionList="optionList" :mapStyle="mapStyle" title="原力值" @setrankList="setrankList"/>
    </div>
    <div class="user-rank-list">
!阳仔's avatar
!阳仔 已提交
8
      <RankList title="用户原力榜" @clear="clear" :dropdownList="dropdownList" listTitle="原力值" @dropdownFn="dropdownFn" :city="city" :rankData="rankData"/>
!阳仔's avatar
!阳仔 已提交
9 10 11 12 13 14 15 16 17 18 19 20
    </div>
  </div>
</template>
<script>
import ForceMap from './mapForce.vue'
import RankList from "./rankList.vue";
import { getForceInfo } from '@/server/screen-data'
export default {
  data() {
    return {
      optionList: [],
      rankData: [],
!阳仔's avatar
!阳仔 已提交
21
      rankList:[],
!阳仔's avatar
!阳仔 已提交
22
      city:'全国',
!阳仔's avatar
!阳仔 已提交
23
      dropdownList:[],
!阳仔's avatar
!阳仔 已提交
24 25 26 27 28 29 30 31 32
      mapStyle:{
        width:'1000',
        height:'900',
        tooltip:true,
        zoom:1.5
      },
    }
  },
  methods: {
!阳仔's avatar
!阳仔 已提交
33 34 35 36 37 38 39 40
    dropdownFn (val){
      this.city = val
      this.rankData = this.optionList.find(it=>it.city == val).list
    },
    clear(){
      this.rankData = this.rankList
      this.city = '全国'
    },
!阳仔's avatar
!阳仔 已提交
41 42 43 44 45
    getlist() {
      getForceInfo().then((res) => {
        if (res.status == 200) {
          this.optionList = res.data.data.cityInfoList
          this.rankData = res.data.data.countryTop
!阳仔's avatar
!阳仔 已提交
46 47
          this.rankList = res.data.data.countryTop
          this.dropdownList = res.data.data.cityInfoList.map(it=>it.city)
!阳仔's avatar
!阳仔 已提交
48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83
        }
      }).catch(() => {

      })
    },
    setrankList(data){
      this.rankData = data.list
      this.city = data.city
    }
  },
  created(){
    this.mapStyle.width = document.documentElement.clientWidth
    this.mapStyle.height = document.documentElement.clientHeight-66
  },
  mounted() {
    this.getlist()
  },
  components: {
    ForceMap,
    RankList
  },
}
</script>
<style scoped lang="scss">
.force {
  width: 100%;
  display: flex;
  justify-content: space-between;
  position: relative;
  .user-rank-list {
    top: 40px;
    position: absolute;
    right: 40px;
  }
}
</style>