asdvca

package.json

@@ -14,6 +14,7 @@
     "core-js": "^3.8.3",
     "echarts": "^5.3.3",
     "element-ui": "^2.15.9",
+    "heatmapjs": "^2.0.2",
     "node-sass": "^6.0.1",
     "sass-loader": "^10.0.1",
     "vant": "^2.12.9",

src/router.js

@@ -43,6 +43,16 @@ const routes = [
             pageSpm: '1011.2266'
           }
         },
+        {
+          path: 'interest',
+          component: () => import('./view/pc/interest.vue'),
+          meta: {
+            title: '城市技术兴趣排名 - 开源实验室',
+            name:'城市技术兴趣排名',
+            navTitle:'技术兴趣',
+            pageSpm: '1011.2266'
+          }
+        },
       ]
     },
     {
@@ -83,6 +93,16 @@ const routes = [
             pageSpm: '1011.2266'
           }
         },
+        {
+          path: 'interest',
+          component: () => import('./view/wap/interest.vue'),
+          meta: {
+            title: '城市技术兴趣排名 - 开源实验室',
+            name:'城市技术兴趣排名',
+            navTitle:'技术兴趣',
+            pageSpm: '1011.2266'
+          }
+        },
       ]
     },  
 ]

src/view/pc/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>
\ No newline at end of file