Skip to content

C
csdn-datav

CSDN 技术社区 / csdn-datav

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

Merge branch 'datav-map' into 'master' 

优化地图

See merge request csdn/csdn-datav!11
上级 190d94b6 cdc9ac9d
流水线 #6236 已通过 ，包含阶段
    in 3 分4 秒
    隐藏空白更改
    内联 并排
    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>
    <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.
    先完成此消息的编辑！
    想要评论请 注册 或