interest.vue 2.0 KB
Newer Older
番红炒西茄柿's avatar
asdvca  
番红炒西茄柿 已提交
1 2 3
<template>
  <!--  -->
  <div class="force">
番红炒西茄柿's avatar
番红炒西茄柿 已提交
4 5 6
    <div class="map">
      <ForceMap :optionList="optionList" :mapStyle="mapStyle" title="兴趣值" @setrankList="setrankList"/>
    </div>
番红炒西茄柿's avatar
asdvca  
番红炒西茄柿 已提交
7
    <div class="user-rank-list">
!阳仔's avatar
!阳仔 已提交
8
      <RankList title="城市技术月度兴趣榜" @clear="clear" :dropdownList="dropdownList" listTitle="兴趣值" @dropdownFn="dropdownFn" :city="city" :rankData="rankData"/>
番红炒西茄柿's avatar
asdvca  
番红炒西茄柿 已提交
9 10 11 12
    </div>
  </div>
</template>
<script>
番红炒西茄柿's avatar
番红炒西茄柿 已提交
13
import ForceMap from './mapInterest.vue'
番红炒西茄柿's avatar
番红炒西茄柿 已提交
14
import RankList from "./interestRankList.vue";
番红炒西茄柿's avatar
番红炒西茄柿 已提交
15
import { getInterestInfo } from '@/server/screen-data'
番红炒西茄柿's avatar
asdvca  
番红炒西茄柿 已提交
16 17 18 19 20
export default {
  data() {
    return {
      optionList: [],
      rankData: [],
番红炒西茄柿's avatar
番红炒西茄柿 已提交
21 22 23 24 25 26 27 28
      rankList:[],
      city:'全国',
      dropdownList:[],
      mapStyle:{
        width:'1000',
        height:'900',
        tooltip:true,
        zoom:1.5
番红炒西茄柿's avatar
asdvca  
番红炒西茄柿 已提交
29 30 31 32
      },
    }
  },
  methods: {
番红炒西茄柿's avatar
番红炒西茄柿 已提交
33
    dropdownFn (val){
番红炒西茄柿's avatar
asdvca  
番红炒西茄柿 已提交
34
      this.city = val
番红炒西茄柿's avatar
番红炒西茄柿 已提交
35
      this.rankData = this.optionList.find(it=>it.city == val).list
番红炒西茄柿's avatar
asdvca  
番红炒西茄柿 已提交
36
    },
番红炒西茄柿's avatar
番红炒西茄柿 已提交
37
    clear(){
番红炒西茄柿's avatar
asdvca  
番红炒西茄柿 已提交
38 39 40 41
      this.rankData = this.rankList
      this.city = '全国'
    },
    getlist() {
番红炒西茄柿's avatar
番红炒西茄柿 已提交
42
      getInterestInfo().then((res) => {
番红炒西茄柿's avatar
asdvca  
番红炒西茄柿 已提交
43
        if (res.status == 200) {
番红炒西茄柿's avatar
番红炒西茄柿 已提交
44
          console.log(res.data.data)
番红炒西茄柿's avatar
asdvca  
番红炒西茄柿 已提交
45 46 47
          this.optionList = res.data.data.cityInfoList
          this.rankData = res.data.data.countryTop
          this.rankList = res.data.data.countryTop
番红炒西茄柿's avatar
番红炒西茄柿 已提交
48
          this.dropdownList = res.data.data.cityInfoList.map(it=>it.city)
番红炒西茄柿's avatar
asdvca  
番红炒西茄柿 已提交
49 50 51 52 53
        }
      }).catch(() => {

      })
    },
番红炒西茄柿's avatar
番红炒西茄柿 已提交
54
    setrankList(data){
番红炒西茄柿's avatar
asdvca  
番红炒西茄柿 已提交
55 56 57 58
      this.rankData = data.list
      this.city = data.city
    }
  },
番红炒西茄柿's avatar
番红炒西茄柿 已提交
59
  created(){
番红炒西茄柿's avatar
asdvca  
番红炒西茄柿 已提交
60
    this.mapStyle.width = document.documentElement.clientWidth
番红炒西茄柿's avatar
番红炒西茄柿 已提交
61
    this.mapStyle.height = document.documentElement.clientHeight-66
番红炒西茄柿's avatar
asdvca  
番红炒西茄柿 已提交
62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84
  },
  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>