interest.vue

<template>
  <!--  -->
  <div class="force">
    <div class="user-rank-list">
      <RankList title="用户原力月榜" @clear="clear" :dropdownList="dropdownList" listTitle="原力值"
                @dropdownFn="dropdownFn" :city="city" :rankData="rankData"/>
    </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: [],
      rankList: [],
      city: '全国',
      dropdownList: [],
      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
    },
    clear() {
      this.rankData = this.rankList
      this.city = '全国'
    },
    getlist() {
      getForceInfo().then((res) => {
        if (res.status == 200) {
          this.optionList = res.data.data.cityInfoList
          this.rankData = res.data.data.countryTop
          this.rankList = res.data.data.countryTop
          this.dropdownList = res.data.data.cityInfoList.map(it => it.city)
        }
      }).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
    console.log("cnmcnmcnmcnm")
  },
  mounted() {
    this.getlist()
    console.log("mounted")
  },
  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>