Skip to content

C
csdn-datav

梦想橡皮擦 / csdn-datav
与 Fork 源项目一致

Fork自 CSDN 技术社区 / csdn-datav

通知 1
Star 1
Fork 0
C
csdn-datav
提交 8c918cc6 编写于 作者: ！阳仔's avatar ！阳仔
浏览文件
操作

Merge branch 'datav-map' into 'master' 

优化地图

See merge request csdn/csdn-datav!11
上级 190d94b6 cdc9ac9d
显示空白变更内容
内联 并排
Showing with 303 addition and 50 deletion
src/components/element-ui/element.js
浏览文件 @ 8c918cc6
import Vue from 'vue';
import './element-variables.scss';
import {
Popover
Popover,
Dropdown,
DropdownMenu,
DropdownItem
} from 'element-ui';
Vue.use(DropdownItem)
Vue.use(DropdownMenu)
Vue.use(Dropdown)
Vue.use(Popover)
\ No newline at end of file
src/components/vant-ui/index.js
浏览文件 @ 8c918cc6
......@@ -23,9 +23,10 @@
Empty,
Uploader,
Popup,
Rate
Rate,
Picker
} from "vant";
Vue.use(Picker)
Vue.use(Rate);
Vue.use(Popup);
Vue.use(Button);
......
src/view/pc/fans.vue
浏览文件 @ 8c918cc6
......@@ -6,7 +6,7 @@
<ForceMap v-else :mapStyle="mapStyle" :optionList="optionList" :cityObj="cityObj" @setrankList="setrankList" title="铁粉数"/>
</div>
<div class="user-rank-list" ref="user-rank-list">
<RankList title="铁粉榜" @clear="clear" :cityObj="cityObj" listTitle="铁粉数" :rankData="rankData" @rankFans="rankFans"/>
<RankList title="铁粉榜" @clear="clear" :cityObj="cityObj" :dropdownList="dropdownList" @dropdownFn="dropdownFn" listTitle="铁粉数" :city="city" :rankData="rankData" @rankFans="rankFans"/>
</div>
</div>
</template>
......@@ -23,6 +23,8 @@ export default {
rankList:[],
cityObj:'',
dataList:[],
dropdownList:[],
rankList:[],
city:'全国',
mapStyle:{
width:'1000',
......@@ -33,6 +35,10 @@ export default {
}
},
methods: {
dropdownFn (val){
this.city = val
this.rankData = this.optionList.find(it=>it.city == val).list
},
setrankList(data){
this.rankData = data.list
this.city = data.city
......@@ -44,6 +50,8 @@ export default {
this.rankList = res.data.data.countryTop
this.dataList = res.data.data.cityInfoList
this.optionList = res.data.data.cityInfoList
this.rankList = res.data.data.countryTop
this.dropdownList = res.data.data.cityInfoList.map(it=>it.city)
}
}).catch(() => {
......@@ -53,6 +61,7 @@ export default {
this.cityObj = null
this.optionList = this.dataList
this.rankData = this.rankList
this.city = '全国'
},
rankFans(item) {
getFanDistribution(item.username).then(re=>{
......
src/view/pc/force.vue
浏览文件 @ 8c918cc6
......@@ -5,7 +5,7 @@
<ForceMap :optionList="optionList" :mapStyle="mapStyle" title="原力值" @setrankList="setrankList"/>
</div>
<div class="user-rank-list">
<RankList title="用户原力榜" listTitle="原力值" :city="city" :rankData="rankData"/>
<RankList title="用户原力月榜" @clear="clear" :dropdownList="dropdownList" listTitle="原力值" @dropdownFn="dropdownFn" :city="city" :rankData="rankData"/>
</div>
</div>
</template>
......@@ -18,7 +18,9 @@ export default {
return {
optionList: [],
rankData: [],
rankList:[],
city:'全国',
dropdownList:[],
mapStyle:{
width:'1000',
height:'900',
......@@ -28,11 +30,21 @@ export default {
}
},
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(() => {
......
src/view/pc/mapFans.vue
浏览文件 @ 8c918cc6
......@@ -157,9 +157,9 @@ export default {
},
{
type: 'effectScatter',
name: 'totip',
name: 'totipgeo',
coordinateSystem: 'geo',
zlevel: 1,
zlevel: 100,
rippleEffect: {
//涟漪特效
period: 4, //动画时间，值越小速度越快
......@@ -214,7 +214,7 @@ export default {
{
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 15,
zlevel: 150,
rippleEffect: {
period: 4,
brushType: 'fill',
......@@ -296,15 +296,16 @@ export default {
formatter: function (params) {
var obj = that.optionList[params.dataIndex]
var str = ''
console.log(params,9999)
// if (params.seriesName==='totip'){
if (params.name === that.cityObj.city){
str = `<a class="popover-title" href="https://blog.csdn.net/${that.cityObj.username}" target="_blank"> <img src="${that.cityObj.avatar}" alt=""> <span>${that.cityObj.nickname||that.cityObj.username}</span></a>
<p class="popover-city"><i></i><span class="city">${that.cityObj.city}</span> <span>铁粉数</span> <span class="num">${that.cityObj.score}</span></p>
`
}else{
}else if(params.seriesName == "totipgeo"){
str = `<p class="popover-title">地区</p>
<p class="popover-city"><i></i><span class="city">${obj.name}</span> <span>铁粉数</span> <span class="num">${obj.uv}</span></p>`
}else{
return ''
}
return (
`<div class="popover-fans">
......
src/view/pc/mapForce.vue
浏览文件 @ 8c918cc6
......@@ -164,7 +164,7 @@ export default {
if (that.dataArray[params.dataIndex].list.length>0){
that.dataArray[params.dataIndex].list.forEach((item,index) => {
if (index<3){
demo += `<a href="${`https://blog.csdn.net/`+item.username}" target="_blank" class="exhibition active"><p>${index+1}</p> <p class="img"> <img src="${item.avatar}" alt=""> <span>${item.nickname || item.username}</span></p> <p class="num">${item.score}</p></a>`
demo += `<a href="${`https://blog.csdn.net/`+item.username}" target="_blank" class="exhibition active"><p class="back rank_${index+1}"></p> <p class="img"> <img src="${item.avatar}" alt=""> <span>${item.nickname || item.username}</span></p> <p class="num">${item.score}</p></a>`
}
});
}else{
......@@ -175,7 +175,7 @@ export default {
}
str = `<div class="popover">
<div class="popover-top">
<p class="popover-title">上榜用户</p>
<p class="popover-title"> <a href="${`https://blog.csdn.net/`+that.dataArray[params.dataIndex].list[0].username}" target="_blank"><img src="${that.dataArray[params.dataIndex].list[0].avatar}" alt=""> <span class="name"> ${that.dataArray[params.dataIndex].list[0].nickname || that.dataArray[params.dataIndex].list[0].username} </span></a> 成为 <span> ${params.name} </span> 领军人物之首 </p>
<p class="popover-city"><i class="force"></i><span class="city">${params.name}</span> <span>${that.title}</span> <span class="num">${that.dataArray[params.dataIndex].score}</span></p>
<div class="exhibition"><p>排名</p> <p class="img">用户</p> <p>${that.title}</p></div>
${demo}
......@@ -302,12 +302,57 @@ body {
background-size: cover;
padding-top: 10px;
.popover-title {
font-size: 16px;
font-size: 14px;
font-weight: 500;
color: #77c0ff;
color: rgba(119,192,255,0.7);
height: 36px;
line-height: 36px;
padding: 0 16px;
display: flex;
align-items: center;
width: 100%;
img{
width: 24px;
height: 24px;
border-radius: 50%;
margin-right: 8px;
}
span{
color: #77C0FF;
margin: 0 6px;
}
a{
display: flex;
align-items: center;
}
span.name{
margin-left: 0px;
max-width: 78px;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
word-break: break-all;
}
}
.back{
height: 26px;
width: 20px !important;
margin: 0 5px;
&.rank_1{
background-image: url('@/assets/img/rank_1.png');
background-size: cover;
}
&.rank_2{
background-image: url('@/assets/img/rank_2.png');
background-size: cover;
}
&.rank_3{
background-image: url('@/assets/img/rank_3.png');
background-size: cover;
}
}
.popover-empty {
height: 120px;
......
src/view/pc/rankList.vue
浏览文件 @ 8c918cc6
<template>
<div class="rank-list" ref="rank-list">
<div class="force-slide" v-if="userItem" @click="clear">
<img src="@/assets/img/fansleft.png" alt="">
返回
<div class="rank-list-box">
<div class="force-slide" :style="!slideopen?'right:-10px':''" >
<!-- <div class="force-slide" v-if="userItem || ( title !== '铁粉榜' && city !=='全国')" @click="clear"> -->
<img src="@/assets/img/go-back.png" style="margin-bottom:16px;" v-if="userItem || ( title !== '铁粉榜' && city !=='全国')" @click="clear" alt="">
<div class="force-slide-open" @click="slideopen = !slideopen">
<img src="@/assets/img/rank-open.png" alt="">
<span>{{slideopen?'折叠榜单':'展开榜单'}}</span>
</div>
</div>
<div class="rank-list" v-if="slideopen" :style="`height:${listHeight}px;`" ref="rank-list">
<div class="title">
<span>{{ title }}</span>
<!-- <span class="clear" @click="clear" v-if="cityObj">回退</span> -->
<p v-if="city&&!userItem"><img src="@/assets/img/place-pc.png" alt="" /><span style="font-size: 16px;">{{city}}</span></p>
<!-- <p v-if="city" @click="cityFlag=!cityFlag"><img src="@/assets/img/place-pc.png" alt="" /><span style="font-size: 16px;">{{city}}</span></p>
<div class="city-list" v-show="city&&cityFlag">
<p>全国</p>
</div> -->
<el-dropdown v-if="city&&!userItem" trigger="click" class="dropdown" @visible-change="(val)=>{cityFlag = val}" @command="dropdownFn" :hide-on-click="true">
<p><span>地区：</span><span style="font-size: 16px;">{{city}}</span> <i :class="!cityFlag?'el-icon-arrow-down':'el-icon-arrow-up'"></i> </p>
<el-dropdown-menu class="rank-dropdown" slot="dropdown" >
<el-dropdown-item :command="it" v-for="(it,index) in dropdownList" :key="index">{{it}}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<p v-if="userItem"><img src="@/assets/img/user.png" alt="" /><a target="_blank" :href="`https://blog.csdn.net/${userItem.username}`">{{userItem.nickname||userItem.username}}</a></p>
</div>
<div class="rank-list-nav border">
......@@ -27,22 +44,30 @@
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
data() {
return {
userItem:''
userItem:'',
listHeight:'',
cityFlag:false,
slideopen:true
}
},
methods: {
dropdownFn(val) {
this.$emit('dropdownFn',val)
},
clear () {
this.$emit('clear')
this.userItem = null
},
rankAdd(item){
if (this.title == '用户原力榜') {
if (this.title == '用户原力月榜') {
window.open(`https://blog.csdn.net/`+item.username)
}else{
this.userItem = item
......@@ -55,37 +80,99 @@ export default {
this.$refs['user-list'].scrollTop = 0
},
},
props: ['title','rankData','city','listTitle','cityObj']
props: ['title','rankData','city','listTitle','cityObj','dropdownList'],
mounted(){
this.listHeight = document.documentElement.clientHeight - 120
window.addEventListener("resize", () => {
this.listHeight = document.documentElement.clientHeight - 120
});
document.addEventListener("click",()=>{
this.cityFlag = false
})
},
beforeDestroy(){
}
}
</script>
<style lang="scss">
.rank-dropdown{
padding:4px 0;
width: 110px;
height:260px;
background: #1B2B4F;
box-shadow: 0px 2px 20px 0px rgba(17,27,51,0.7);
border: 1px solid #578AC5;
border-radius: 0px;
overflow: auto;
&::-webkit-scrollbar {
width: 4px;
}
&::-webkit-scrollbar-thumb {
background-color: #375a87;
border-radius: 3px;
transition: background-color 0.3s ease-in-out;
}
.popper__arrow{
display: none;
}
.el-dropdown-menu__item{
height: 36px;
text-align: center;
color: #77C0FF;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
word-break: break-all;
&:focus{
background: #2E4974;
}
&:hover{
background: #2E4974;
opacity: 0.9;
}
}
}
</style>
<style scoped lang="scss">
.rank-list {
width: 400px;
height: 800px;
display: flex;
flex-direction: column;
.rank-list-box{
position: relative;
.force-slide{
// padding: 10px;
width: 64px;
height: 40px;
background: #364366;
color:#78C1FF;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 10px;
right: 410px;
// left: 20px;
font-size: 14px;
border: 2px solid #5f97d5;
cursor: pointer;
img{
width: 12px;
height: 16px;
width: 28px;
height: 28px;
cursor: pointer;
}
.force-slide-open{
cursor: pointer;
font-size: 14px;
font-weight: 500;
color: #97ADC6;
display: flex;
flex-direction: column;
span{
margin-top: 8px;
}
}
}
}
.rank-list {
width: 400px;
height: 800px;
min-height: 500px;
display: flex;
flex-direction: column;
.title {
display: flex;
justify-content: space-between;
......@@ -94,6 +181,7 @@ export default {
background-image: url("@/assets/img/rank-right.png");
background-size: cover;
padding: 8px 28px 0px 24px;
span {
font-size: 20px;
font-weight: 500;
......@@ -102,10 +190,28 @@ export default {
.clear{
cursor: pointer;
}
.iconfont{
background-image: url("@/assets/img/rank-right.png");
background-size: cover;
}
p {
display: flex;
align-items: center;
max-width: 200px;
font-size: 16px;
color:#77C0FF ;
span{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
word-break: break-all;
}
&>span:nth-child(1){
width: 70px;
}
cursor: pointer;
img {
width: 18px;
height: 18px;
......
src/view/wap/fans.vue
浏览文件 @ 8c918cc6
......@@ -10,9 +10,9 @@
</div>
<div class="user-rank-list" ref="user-rank-list">
<RankList title="铁粉榜" :cityObj="cityObj" :city="city" listTitle="铁粉数" @listOpen="listOpen" :rankData="rankData" @rankFans="rankFans"/>
<RankList title="铁粉榜" :city="city" :cityObj="cityObj" listTitle="铁粉数" @onConfirm="onConfirm" :dropdownList="dropdownList" @listOpen="listOpen" :rankData="rankData" @rankFans="rankFans"/>
</div>
<van-popup v-model="Popup"
<!-- <van-popup v-model="Popup"
>
<div class="popover-fans">
<div class="popover-top">
......@@ -22,13 +22,14 @@
</div>
</div>
<div class="close" @click="Popup = false"><img src="@/assets/img/close-circle.png" alt=""></div>
</van-popup>
</van-popup> -->
</div>
</template>
<script>
import ForceMap from '../pc/mapForce.vue'
import FansceMap from '../pc/mapFans.vue'
import RankList from "./rankList.vue";
import Bus from "@/common/bus"
import { getHardcoreFanInfo,getFanDistribution } from '@/server/screen-data'
export default {
data() {
......@@ -39,6 +40,8 @@ export default {
Popup:false,
cityObj:'',
dataList:[],
rankList:[],
dropdownList:[],
show:true,
city:'全国',
listFlag:false,
......@@ -57,6 +60,10 @@ export default {
}
},
methods: {
onConfirm (val) {
this.city = val
this.rankData = this.optionList.find(it=>it.city == val).list
},
setrankList(data){
this.rankData = data.list
this.city = data.city
......@@ -81,6 +88,8 @@ export default {
this.rankList = res.data.data.countryTop
this.dataList = res.data.data.cityInfoList
this.optionList = res.data.data.cityInfoList
this.rankList = res.data.data.countryTop
this.dropdownList = res.data.data.cityInfoList.map(it=>it.city)
}
}).catch(() => {
......@@ -88,8 +97,10 @@ export default {
},
clear() {
this.cityObj = null
this.city = "全国"
this.optionList = this.dataList
this.rankData = this.rankList
Bus.$emit('clear')
},
rankFans(item) {
getFanDistribution(item.username).then(re=>{
......
src/view/wap/force.vue
浏览文件 @ 8c918cc6
<template>
<!-- -->
<div class="force ranklist">
<div class="go back" @click="clear" v-if="city !== '全国'">
<img src="@/assets/img/backoff.png" alt="">
</div>
<div class="map">
<ForceMap :optionList="optionList" type="wap" :mapStyle="mapStyle" title="原力值" @setrankList="setrankList"/>
</div>
<div class="user-rank-list" ref="user-rank-list">
<RankList title="用户原力榜" listTitle="原力值" :city="city" @listOpen="listOpen" :rankData="rankData"/>
<RankList title="用户原力月榜" listTitle="原力值" :city="city" @onConfirm="onConfirm" :dropdownList="dropdownList" @listOpen="listOpen" :rankData="rankData"/>
</div>
</div>
</template>
......@@ -20,6 +23,8 @@ export default {
rankData: [],
Popup:false,
city:'全国',
rankList:[],
dropdownList:[],
mapStyle:{
width:'',
height:'',
......@@ -29,6 +34,14 @@ export default {
}
},
methods: {
clear(){
this.city= '全国'
this.rankData = this.rankList
},
onConfirm (val) {
this.city = val
this.rankData = this.optionList.find(it=>it.city == val).list
},
listOpen (val) {
var height = -(this.$refs['user-rank-list'].offsetHeight-300)
if (val){
......@@ -41,6 +54,8 @@ export default {
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(() => {
......
src/view/wap/rankList.vue
浏览文件 @ 8c918cc6
......@@ -6,7 +6,7 @@
<div class="rank-list">
<div class="title">
<span>{{ title }}</span>
<p v-if="city&&!userItem"><img src="@/assets/img/place.png" alt="" /><span>{{city}}</span></p>
<p v-if="city&&!userItem" @click="show=true" class="text"><span>地区：</span><span style="color: #fff;">{{city}}</span><img src="@/assets/img/wap-down.png" alt="" /></p>
<p v-if="userItem"><img src="@/assets/img/user-wap.png" alt="" /><a target="_blank" :href="`https://blog.csdn.net/${userItem.username}`">{{userItem.nickname||userItem.username}}</a></p>
</div>
<div class="rank-list-nav border">
......@@ -30,19 +30,40 @@
<span>{{item.city}}</span><span>{{item.score}}</span>
</li>
</ul>
<van-popup v-model="show" position="bottom">
<van-picker
:columns="dropdownList"
:show-toolbar="true"
:default-index="0"
:visible-item-count="3"
@confirm="onConfirm"
@cancel="show = false"
/>
</van-popup>
<!-- @confirm="onConfirm"
@cancel="onCancel"
@change="onChange" -->
</div>
</div>
</template>
<script>
import Bus from "@/common/bus"
export default {
data() {
data(){
return {
listFlag:false,
userItem:''
userItem:'',
show:false,
}
},
methods: {
onConfirm (val) {
this.$emit('onConfirm',val)
this.show = false
},
onCancel (){
},
open (val) {
this.listFlag = val
this.$emit('listOpen', this.listFlag)
......@@ -51,7 +72,7 @@ export default {
this.$emit('clear')
},
rankAdd(item){
if (this.title == '用户原力榜') {
if (this.title == '用户原力月榜') {
window.open(`https://blog.csdn.net/`+item.username)
}else{
this.userItem = item
......@@ -60,9 +81,19 @@ export default {
}
}
},
props: ['title','rankData','city','listTitle','cityObj']
mounted (){
Bus.$on('clear',()=>{
this.userItem = null
})
},
props: ['title','rankData','city','listTitle','cityObj','dropdownList','defaultIndex']
}
</script>
<style >
/* .van-picker__columns{
height: 200px !important;
} */
</style>
<style scoped lang="scss">
.rank-box{
height: 100%;
......@@ -113,6 +144,8 @@ export default {
align-items: center;
padding: 0px 16px 0px 16px;
padding-right: 26px;
font-size: 14px;
color: #b2bccf;
&>span:nth-child(1){
color: #fff;
}
......@@ -120,14 +153,29 @@ export default {
font-size: 14px;
font-weight: 500;
color: #b2bccf;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
word-break: break-all;
}
.clear{
cursor: pointer;
}
p {
// flex: 1;
display: flex;
align-items: center;
max-width: 150px;
&>span:nth-child(1){
width: 50px;
}
&.text img{
width: 14px;
height: 14px;
margin-left: 3px;
}
img {
width: 18px;
height: 18px;
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或