uoyiz

doc/develop.md

-# 开发文档
+npm instasll# 开发文档
 
 ## 环境准备
 ### 云IDE

src/router.js

@@ -43,6 +43,16 @@ const routes = [
             pageSpm: '1011.2266'
           }
         },
+        {
+          path: 'similar',
+          component: () => import('./view/pc/similar.vue'),
+          meta: {
+            title: '与我相似的用户 - 开源实验室',
+            navTitle:'相似用户',
+            name:'全网博主原力月度排名',
+            pageSpm: '1011.2266'
+          }
+        },
       ]
     },
     {

src/view/pc/similar.vue

+<template>
+  <!--  -->
+  <div class="force">
+    <div class="map">
+      <ForceMap :optionList="optionList" :mapStyle="mapStyle" title="原力值" @setrankList="setrankList"/>
+    </div>
+    <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
+  },
+  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>
\ No newline at end of file