张雄 3 years ago
parent 04ce1008eb
commit e5f700514c

@ -120,7 +120,6 @@ export default {
},
//
roundDefaultSelect(myChart) {
console.log(myChart)
if (!myChart.getOption().series[0] || myChart.getOption().series[0].type != "pie") {
return;
}

@ -21,7 +21,9 @@ const getters = {
},
getAccount(state) {
//这里写解密算法
state.account.sPwd = window.atob(state.account.sPwd);
if(state.account.sPwd) {
state.account.sPwd = window.atob(state.account.sPwd);
}
return state.account
},
getCommTime(state) {

@ -27,7 +27,9 @@ const mutations = {
},
setAccount: (state, log) => {
state.account = log;
state.account.sPwd = window.btoa(state.account.sPwd);
if(state.account.sPwd) {
state.account.sPwd = window.btoa(state.account.sPwd);
}
let str = JSON.stringify(log);
localStorage.setItem('account', str);
},

@ -66,26 +66,28 @@
</div>
</div>
</div>
<div class="wd-d2" v-if="form.sSource == '新浪微博' || (form.sSource == '汽车之家' && this.getCarCircle == 1) || (form.sSource == '懂车帝' && getCarCircle == 1)">
<div class="wd-d2" v-if="form.sSource == '新浪微博' || (form.sSource == '汽车之家') || (form.sSource == '懂车帝' && getCarCircle == 1)">
<vue-lazy-component>
<weibo-communication-trend-long></weibo-communication-trend-long>
<weiboCommunicationTrendLongStoken slot="skeleton"></weiboCommunicationTrendLongStoken>
<weibo-communication-trend></weibo-communication-trend>
<weiboCommunicationTrendStoken slot="skeleton"></weiboCommunicationTrendStoken>
</vue-lazy-component>
<spreadTOPmodels></spreadTOPmodels>
</div>
<div class="wd-d2" v-else>
<vue-lazy-component>
<weibo-communication-trend></weibo-communication-trend>
<weiboCommunicationTrendStoken slot="skeleton"></weiboCommunicationTrendStoken>
<weibo-communication-trend-long></weibo-communication-trend-long>
<weiboCommunicationTrendLongStoken slot="skeleton"></weiboCommunicationTrendLongStoken>
</vue-lazy-component>
</div>
<div class="wd-d3" v-if="form.sSource == '新浪微博' || (form.sSource == '汽车之家') || (form.sSource == '懂车帝' && getCarCircle == 1)"></div>
<div class="wd-d3" v-else>
<!-- <subscribeSeries></subscribeSeries> -->
<spreadTOPmodels></spreadTOPmodels>
<vue-lazy-component>
<weiboContentTOPVolume></weiboContentTOPVolume>
<weiboContentTOPVolumeStoken slot="skeleton"></weiboContentTOPVolumeStoken>
</vue-lazy-component>
</div>
<div class="wd-d3">
<subscribeSeries></subscribeSeries>
<spreadTOPmodels></spreadTOPmodels>
</div>
<div class="wd-d4">
<vue-lazy-component>
<weiboContentType></weiboContentType>
@ -100,8 +102,8 @@
<weiboWordCloudStoken slot="skeleton"></weiboWordCloudStoken>
</vue-lazy-component>
</div>
<div class="wd-d3" v-if="form.sSource == '新浪微博' || (form.sSource == '汽车之家' && this.getCarCircle == 1) || (form.sSource == '懂车帝' && getCarCircle == 1)">
<vue-lazy-component v-if="form.sSource == '新浪微博' || (form.sSource == '汽车之家' && this.getCarCircle == 1)">
<div class="wd-d3" v-if="form.sSource == '新浪微博' || form.sSource == '汽车之家' || (form.sSource == '懂车帝' && getCarCircle == 1)">
<vue-lazy-component v-if="form.sSource == '新浪微博' || form.sSource == '汽车之家'">
<weiboUserActiveArea></weiboUserActiveArea>
<weiboUserActiveAreaStoken slot="skeleton"></weiboUserActiveAreaStoken>
</vue-lazy-component>

@ -8,7 +8,7 @@
-->
<template>
<div class="stm-outter" v-loading="load">
<v-label-div title="传播声量TOP车型" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div>
<v-label-div title="传播声量TOP车型" :eStyle="{'border-style': 'none'}"></v-label-div>
<div class="stm-inner">
<v-echarts :opt="opt" @getData="clickEchars"></v-echarts>
</div>
@ -71,7 +71,7 @@ export default {
<style lang="less" scoped>
.stm-outter {
width: 936px;
height: 412px;
height: 460px;
border: 2px solid #0f2a4d;
margin-left: 16px;
.stm-inner {

@ -7,14 +7,45 @@
* @FilePath: /data-show/src/views/WeiboDetails/weiboContentTOPVolume/index.vue
-->
<template>
<div class="wct-outter" v-loading="load">
<v-label-div title="内容TOP声量"> </v-label-div>
<div class="wct-inner">
<div class="wct-d1" v-for="(item,index) in list" :key="index">
<v-echarts :opt="item.opt"></v-echarts>
<div class="wct-d1-dd1">
<span>排名<span class="ss1">0{{index+1}}</span></span>
<span>声量<span class="ss1">{{item.value}}</span></span>
<div>
<div class="d22" v-if="(form.sSource == '汽车之家') || (form.sSource == '懂车帝')">
<div class="wct-small-outter">
<v-label-div title="内容TOP声量"> </v-label-div>
<div class="wct-inner">
<vue-scroll>
<div class="d-rank" style="margin-left: 16px">
<div class="rank1">
<v-ranking-kmd v-for="(item,index) in d4" :key="index" :lineShow="index === 0 ? false : true" :num="index + 1" :label="item.label|doStr(8)" :val="item.val" @toMedia="toKeyMedia(item)"></v-ranking-kmd>
</div>
</div>
</vue-scroll>
</div>
</div>
<div class="wct-small-outter">
<v-label-div title="关注TOP车型"> </v-label-div>
<div class="wct-inner">
<vue-scroll>
<div class="d-rank" style="margin-left: 16px">
<div class="rank1">
<v-ranking-kmd v-for="(item,index) in d3" :key="index" :lineShow="index === 0 ? false : true" :num="index + 1" :label="item.label|doStr(8)" :val="item.val" @toMedia="toKeyMedia(item)"></v-ranking-kmd>
</div>
</div>
</vue-scroll>
</div>
</div>
</div>
<div class="wct-outter" v-loading="load" v-else>
<v-label-div title="内容TOP声量"> </v-label-div>
<div class="wct-inner">
<div class="dd2">
<div class="d-rank" style="margin-left: 16px">
<div class="rank1">
<v-ranking-kmd v-for="(item,index) in d1" :key="index" :lineShow="index === 0 ? false : true" :num="index + 1" :label="item.label|doStr(8)" :val="item.val" @toMedia="toKeyMedia(item)"></v-ranking-kmd>
</div>
<div class="rank1" style="margin-left: 14px">
<v-ranking-kmd v-for="(item,index) in d2" :key="index" :lineShow="index === 0 ? false : true" :num="index + 6" :label="item.label|doStr(8)" :val="item.val" @toMedia="toKeyMedia(item)"></v-ranking-kmd>
</div>
</div>
</div>
</div>
</div>
@ -23,10 +54,14 @@
<script>
import {comparePig} from "@/utils/gol/dataTool"
import createOpt from "./opt"
import {getGuanZhuSeriesname} from "@/api/KeyMediaBrand/index.js"
import vRankingKmd from "./v-ranking-kmd"
import {getDirectWeiBo0528} from "@/api/KeyMediaBrand/index.js"
export default {
name: "weiboContentTOPVolume",
components: {
vRankingKmd
},
data() {
return {
load: false,
@ -36,6 +71,10 @@ export default {
sSource: '',
ilimitType: 0,
},
d1: [],
d2: [],
d3: [],
d4: [],
list: [],
colors: ['#3373CC', '#63AECC', '#54BF93', '#CC9D12', '#3373CC', '#63AECC', '#54BF93', '#CC9D12']
};
@ -57,31 +96,63 @@ export default {
let obj = Object.assign({}, this.getCtime2, this.form);
getDirectWeiBo0528(obj).then(res => {
let data = res.data || [];
let arr = [];
data.sort(comparePig('value'));
let maxVal = data[0].value
data.forEach((ele,index) => {
let obj = {
value: ele.value,
opt: createOpt(ele.key,this.colors[index],ele.value, maxVal)
}
arr.push(obj)
let mediaList = [];
data.forEach(ele => {
let obj = { label: ele.key, val: ele.value};
mediaList.push(obj);
})
this.list = arr;
this.d1 = mediaList.slice(0, 5);
this.d2 = mediaList.slice(5, 10);
this.d4 = mediaList;
// let arr = [];
// data.sort(comparePig('value'));
// let maxVal = data[0].value
// data.forEach((ele,index) => {
// let obj = {
// value: ele.value,
// opt: createOpt(ele.key,this.colors[index],ele.value, maxVal)
// }
// arr.push(obj)
// })
// this.list = arr;
this.load = false;
});
getGuanZhuSeriesname(obj).then(res => {
let data = res.data || [];
let arr = [];
for(let key in data) {
let obj = {label: key, val: data[key]};
arr.push(obj)
}
this.d3 = arr
})
}
}
}
</script>
<style lang="less" scoped>
.d22 {
width: 100%;
height: auto;
display: flex;
justify-content: flex-start;
}
.wct-outter {
width: 936px;
height: 412px;
height: 460px;
border: 2px solid #0f2a4d;
margin-left: 16px;
overflow: hidden;
}
.wct-small-outter {
width: 460px;
height: 460px;
border: 2px solid #0f2a4d;
margin-left: 16px;
overflow: hidden;
padding-bottom: 24px;
}
.wct-inner {
width: 100%;

@ -1,81 +0,0 @@
/*
* @Author: your name
* @Date: 2021-10-14 16:05:12
* @LastEditTime: 2021-11-04 17:05:41
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/WeiboDetails/weiboContentTOPVolume/opt.js
* startAngle: 180,
*/
import * as echarts from "echarts";
export default function createOpt(name, color, num, maxVal) {
return {
tooltip: {
backgroundColor: "#08182F",
color: "#fff",
borderColor: "#3373CC",
textStyle: {
color: "#fff", //设置文字颜色
},
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
formatter: function(param) {
let value = param.data.value;
let name = param.data.name;
return `<span>${name}</span><br><span>声量:${value}</span>`
}
},
series: [
{
name: name,
type: 'gauge',
startAngle: 180,
endAngle: 0,
min: 0,
max: maxVal * 5,
splitNumber: 5,
detail: { show: false, formatter: '{value}%' },
axisLine: {
show: true,
lineStyle: {
width: 7,
color: [
[1, new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#020f1f"
},
{
offset: 1,
color: color
}
])
]
]
}
},
axisLabel: {
distance: -30,
color: "#d8d8d8",
},
splitLine: {
distance: -6,
length: 12,
lineStyle: {
color: '#d8d8d8',
width: 2
}
},
// 刻度线
axisTick: {
show: true,
length: 15,
lineStyle: {
color: "auto",
width: 5
}
},
data: [{ value: num, name: name, title: {show: true, color: color,fontWeight: 'bold'},itemStyle:{color: color}}],
}
]
};
}

@ -0,0 +1,236 @@
<!--
* @Author: your name
* @Date: 2021-10-08 16:44:08
* @LastEditTime: 2021-11-18 11:57:14
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/components/v-ranking/index.vue
-->
<template>
<div class="v-r-container">
<div class="v-r-line" v-if="lineShow"></div>
<div class="v-r-inner">
<div :class="ls">
<span class="s1">{{ num|numStr }}</span>
</div>
<div :class="rs">
<span @click="goKeyMedia(label)" class="v-r-label">{{label}}</span>
<div class="v-r-res">
<span class="s1">传播量</span>
<span class="s2">{{val}}</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "v-ranking-kmd",
props: {
num: {
type: [String, Number],
default: 1,
},
val: {
type: [String, Number],
default: 0
},
label: {
type: String,
default: ""
},
lineShow: {
type: Boolean,
default: true
},
},
watch: {
num: {
handler(val) {
if(val == 1) {
this.ls = "v-r-left-1"
this.rs = "v-r-right-1"
} else if(val == 2) {
this.ls = "v-r-left-2"
this.rs = "v-r-right-2"
} else if(val == 3) {
this.ls = "v-r-left-3"
this.rs = "v-r-right-3"
} else {
this.ls = "v-r-left"
this.rs = "v-r-right"
}
},
immediate: true
}
},
data() {
return {
ls: "v-r-left",
rs: "v-r-right"
}
},
filters: {
numStr(val) {
let str = ""
if(0<val && val<10) {
str = '0' + val
} else {
str = val + ''
}
return str
}
},
methods: {
goKeyMedia(obj) {
this.$emit('toMedia', obj)
}
}
};
</script>
<style lang="less" scoped>
.v-r-container {
width: 430px;
height: auto;
.v-r-line {
width: 100%;
height: 1px;
background:#0a1d3b;
margin-top: 13px;
margin-bottom: 13px;
}
.v-r-inner {
position: relative;
width: 100%;
height: 48px;
margin-top: 6px;
color: #fff;
background: #0a1d3b;
border-radius: 2px;
}
.v-r-label {
display: block;
font-size: 14px;
color: #FFFFFF;
margin-left: 40px;
font-weight: bold;
cursor: pointer;
}
.v-r-res {
margin-right: 16px;
span {
display: block;
text-align: right;
font-size: 12px;
}
.s1 {
color: #9ba4af;
}
.s2 {
color: #fff;
font-family: Bebas;
}
}
.v-r-left {
width: 48px;
height: 48px;
text-align: center;
line-height: 48px;
.s1 {
color: #9099a6;
font-size: 16px;
line-height: 48px;
font-family: Bebas;
}
}
.v-r-right {
position: absolute;
width: 404px;
height: 48px;
border-top: 2px solid transparent;
top: 0px;
left: 24px;
display: flex;
justify-content: space-between;
align-items: center;
}
.v-r-left-1 {
width: 48px;
height: 48px;
text-align: center;
border: 2px solid #cc9d12;
border-radius: 48px;
.s1 {
color: #ffffff;
font-size: 16px;
line-height: 42px;
text-shadow: 0px 0px 8px #cc9d12;
font-family: Bebas;
}
}
.v-r-right-1 {
position: absolute;
width: 404px;
height: 48px;
border-top: 2px solid #CC9D12;
top: 0px;
left: 24px;
display: flex;
justify-content: space-between;
align-items: center;
}
.v-r-left-2 {
width: 48px;
height: 48px;
text-align: center;
border: 2px solid #3373CC;
border-radius: 48px;
.s1 {
color: #ffffff;
font-size: 16px;
line-height: 42px;
text-shadow: 0px 0px 8px #3373CC;
font-family: Bebas;
}
}
.v-r-right-2 {
position: absolute;
width: 404px;
height: 48px;
border-top: 2px solid #3373CC;
top: 0px;
left: 24px;
display: flex;
justify-content: space-between;
align-items: center;
}
.v-r-left-3 {
width: 48px;
height: 48px;
text-align: center;
border: 2px solid #54BF93;
border-radius: 48px;
.s1 {
color: #ffffff;
font-size: 16px;
line-height: 42px;
text-shadow: 0px 0px 8px #54BF93;
font-family: Bebas;
}
}
.v-r-right-3 {
position: absolute;
width: 404px;
height: 48px;
border-top: 2px solid #54BF93;
top: 0px;
left: 24px;
display: flex;
justify-content: space-between;
align-items: center;
}
}
</style>

@ -66,7 +66,7 @@
</div>
</div>
</div>
<div class="wd-d2" v-if="form.sSource == '新浪微博' || (form.sSource == '汽车之家' && this.getCarCircle == 1) || (form.sSource == '懂车帝' && getCarCircle == 1)">
<div class="wd-d2" v-if="form.sSource == '新浪微博' || (form.sSource == '汽车之家') || (form.sSource == '懂车帝' && getCarCircle == 1)">
<vue-lazy-component>
<weibo-communication-trend-long></weibo-communication-trend-long>
<weiboCommunicationTrendLongStoken slot="skeleton"></weiboCommunicationTrendLongStoken>
@ -96,8 +96,8 @@
<weiboWordCloudStoken slot="skeleton"></weiboWordCloudStoken>
</vue-lazy-component>
</div>
<div class="wd-d3" v-if="form.sSource == '新浪微博' || (form.sSource == '汽车之家' && this.getCarCircle == 1) || (form.sSource == '懂车帝' && getCarCircle == 1)">
<vue-lazy-component v-if="form.sSource == '新浪微博' || (form.sSource == '汽车之家' && this.getCarCircle == 1)">
<div class="wd-d3" v-if="form.sSource == '新浪微博' || (form.sSource == '汽车之家') || (form.sSource == '懂车帝' && getCarCircle == 1)">
<vue-lazy-component v-if="form.sSource == '新浪微博' || (form.sSource == '汽车之家')">
<weiboUserActiveArea></weiboUserActiveArea>
<weiboUserActiveAreaStoken slot="skeleton"></weiboUserActiveAreaStoken>
</vue-lazy-component>

@ -66,7 +66,7 @@
</div>
</div>
</div>
<div class="wd-d2" v-if="form.sSource == '新浪微博' || (form.sSource == '汽车之家' && this.getCarCircle == 1) || (form.sSource == '懂车帝' && getCarCircle == 1)">
<div class="wd-d2" v-if="form.sSource == '新浪微博' || (form.sSource == '汽车之家') || (form.sSource == '懂车帝' && getCarCircle == 1)">
<vue-lazy-component>
<weibo-communication-trend-long></weibo-communication-trend-long>
<weiboCommunicationTrendLongStoken slot="skeleton"></weiboCommunicationTrendLongStoken>
@ -101,8 +101,8 @@
<weiboWordCloudStoken slot="skeleton"></weiboWordCloudStoken>
</vue-lazy-component>
</div>
<div class="wd-d3" v-if="form.sSource == '新浪微博' || (form.sSource == '汽车之家' && this.getCarCircle == 1) || (form.sSource == '懂车帝' && getCarCircle == 1)">
<vue-lazy-component v-if="form.sSource == '新浪微博' || (form.sSource == '汽车之家' && this.getCarCircle == 1)">
<div class="wd-d3" v-if="form.sSource == '新浪微博' || (form.sSource == '汽车之家') || (form.sSource == '懂车帝' && getCarCircle == 1)">
<vue-lazy-component v-if="form.sSource == '新浪微博' || (form.sSource == '汽车之家')">
<weiboUserActiveArea></weiboUserActiveArea>
<weiboUserActiveAreaStoken slot="skeleton"></weiboUserActiveAreaStoken>
</vue-lazy-component>

@ -7,14 +7,45 @@
* @FilePath: /data-show/src/views/WeiboDetails/weiboContentTOPVolume/index.vue
-->
<template>
<div class="wct-outter" v-loading="load">
<v-label-div title="内容TOP声量"> </v-label-div>
<div class="wct-inner">
<div class="wct-d1" v-for="(item, index) in list" :key="index">
<v-echarts :opt="item.opt"></v-echarts>
<div class="wct-d1-dd1">
<span>排名<span class="ss1">0{{ index + 1 }}</span></span>
<span>声量<span class="ss1">{{ item.value }}</span></span>
<div>
<div class="d22" v-if="(form.sSource == '汽车之家') || (form.sSource == '懂车帝')">
<div class="wct-small-outter">
<v-label-div title="内容TOP声量"> </v-label-div>
<div class="wct-inner">
<vue-scroll>
<div class="d-rank" style="margin-left: 16px">
<div class="rank1">
<v-ranking-kmd v-for="(item,index) in d4" :key="index" :lineShow="index === 0 ? false : true" :num="index + 1" :label="item.label|doStr(8)" :val="item.val" @toMedia="toKeyMedia(item)"></v-ranking-kmd>
</div>
</div>
</vue-scroll>
</div>
</div>
<div class="wct-small-outter">
<v-label-div title="关注TOP车型"> </v-label-div>
<div class="wct-inner">
<vue-scroll>
<div class="d-rank" style="margin-left: 16px">
<div class="rank1">
<v-ranking-kmd v-for="(item,index) in d3" :key="index" :lineShow="index === 0 ? false : true" :num="index + 1" :label="item.label|doStr(8)" :val="item.val" @toMedia="toKeyMedia(item)"></v-ranking-kmd>
</div>
</div>
</vue-scroll>
</div>
</div>
</div>
<div class="wct-outter" v-loading="load" v-else>
<v-label-div title="内容TOP声量"> </v-label-div>
<div class="wct-inner">
<div class="dd2">
<div class="d-rank" style="margin-left: 16px">
<div class="rank1">
<v-ranking-kmd v-for="(item,index) in d1" :key="index" :lineShow="index === 0 ? false : true" :num="index + 1" :label="item.label|doStr(8)" :val="item.val" @toMedia="toKeyMedia(item)"></v-ranking-kmd>
</div>
<div class="rank1" style="margin-left: 14px">
<v-ranking-kmd v-for="(item,index) in d2" :key="index" :lineShow="index === 0 ? false : true" :num="index + 6" :label="item.label|doStr(8)" :val="item.val" @toMedia="toKeyMedia(item)"></v-ranking-kmd>
</div>
</div>
</div>
</div>
</div>
@ -23,10 +54,14 @@
<script>
import { comparePig } from "@/utils/gol/dataTool"
import createOpt from "./opt"
import vRankingKmd from "./v-ranking-kmd"
import { getHomeDirectWeiBo0528 } from "@/api/KeyMediaHome/index.js"
import {getHomeGuanZhuSeriesname} from "@/api/KeyMediaHome/index.js"
export default {
name: "weiboContentTOPVolume",
components: {
vRankingKmd
},
data() {
return {
load: false,
@ -34,6 +69,10 @@ export default {
sSource: '',
ilimitType: 0,
},
d1: [],
d2: [],
d3: [],
d4: [],
list: [],
colors: ['#3373CC', '#63AECC', '#54BF93', '#CC9D12', '#3373CC', '#63AECC', '#54BF93', '#CC9D12']
};
@ -53,25 +92,38 @@ export default {
let obj = Object.assign({}, this.getCtime2, this.form);
getHomeDirectWeiBo0528(obj).then(res => {
let data = res.data || [];
let arr = [];
data.sort(comparePig('value'));
let maxVal = data[0].value
data.forEach((ele, index) => {
let obj = {
value: ele.value,
opt: createOpt(ele.key, this.colors[index], ele.value, maxVal)
}
arr.push(obj)
let mediaList = [];
data.forEach(ele => {
let obj = { label: ele.key, val: ele.value};
mediaList.push(obj);
})
this.list = arr;
this.d1 = mediaList.slice(0, 5);
this.d2 = mediaList.slice(5, 10);
this.d4 = mediaList;
this.load = false;
});
getHomeGuanZhuSeriesname(obj).then(res => {
let data = res.data || [];
let arr = [];
for(let key in data) {
let obj = {label: key, val: data[key]};
arr.push(obj)
}
this.d3 = arr
})
}
}
}
</script>
<style lang="less" scoped>
.d22 {
width: 100%;
height: auto;
display: flex;
justify-content: flex-start;
}
.wct-outter {
width: 936px;
height: 460px;
@ -79,7 +131,14 @@ export default {
margin-left: 16px;
overflow: hidden;
}
.wct-small-outter {
width: 460px;
height: 460px;
border: 2px solid #0f2a4d;
margin-left: 16px;
overflow: hidden;
padding-bottom: 24px;
}
.wct-inner {
width: 100%;
margin-top: 16px;

@ -0,0 +1,236 @@
<!--
* @Author: your name
* @Date: 2021-10-08 16:44:08
* @LastEditTime: 2021-11-18 11:57:14
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/components/v-ranking/index.vue
-->
<template>
<div class="v-r-container">
<div class="v-r-line" v-if="lineShow"></div>
<div class="v-r-inner">
<div :class="ls">
<span class="s1">{{ num|numStr }}</span>
</div>
<div :class="rs">
<span @click="goKeyMedia(label)" class="v-r-label">{{label}}</span>
<div class="v-r-res">
<span class="s1">传播量</span>
<span class="s2">{{val}}</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "v-ranking-kmd",
props: {
num: {
type: [String, Number],
default: 1,
},
val: {
type: [String, Number],
default: 0
},
label: {
type: String,
default: ""
},
lineShow: {
type: Boolean,
default: true
},
},
watch: {
num: {
handler(val) {
if(val == 1) {
this.ls = "v-r-left-1"
this.rs = "v-r-right-1"
} else if(val == 2) {
this.ls = "v-r-left-2"
this.rs = "v-r-right-2"
} else if(val == 3) {
this.ls = "v-r-left-3"
this.rs = "v-r-right-3"
} else {
this.ls = "v-r-left"
this.rs = "v-r-right"
}
},
immediate: true
}
},
data() {
return {
ls: "v-r-left",
rs: "v-r-right"
}
},
filters: {
numStr(val) {
let str = ""
if(0<val && val<10) {
str = '0' + val
} else {
str = val + ''
}
return str
}
},
methods: {
goKeyMedia(obj) {
this.$emit('toMedia', obj)
}
}
};
</script>
<style lang="less" scoped>
.v-r-container {
width: 430px;
height: auto;
.v-r-line {
width: 100%;
height: 1px;
background:#0a1d3b;
margin-top: 13px;
margin-bottom: 13px;
}
.v-r-inner {
position: relative;
width: 100%;
height: 48px;
margin-top: 6px;
color: #fff;
background: #0a1d3b;
border-radius: 2px;
}
.v-r-label {
display: block;
font-size: 14px;
color: #FFFFFF;
margin-left: 40px;
font-weight: bold;
cursor: pointer;
}
.v-r-res {
margin-right: 16px;
span {
display: block;
text-align: right;
font-size: 12px;
}
.s1 {
color: #9ba4af;
}
.s2 {
color: #fff;
font-family: Bebas;
}
}
.v-r-left {
width: 48px;
height: 48px;
text-align: center;
line-height: 48px;
.s1 {
color: #9099a6;
font-size: 16px;
line-height: 48px;
font-family: Bebas;
}
}
.v-r-right {
position: absolute;
width: 404px;
height: 48px;
border-top: 2px solid transparent;
top: 0px;
left: 24px;
display: flex;
justify-content: space-between;
align-items: center;
}
.v-r-left-1 {
width: 48px;
height: 48px;
text-align: center;
border: 2px solid #cc9d12;
border-radius: 48px;
.s1 {
color: #ffffff;
font-size: 16px;
line-height: 42px;
text-shadow: 0px 0px 8px #cc9d12;
font-family: Bebas;
}
}
.v-r-right-1 {
position: absolute;
width: 404px;
height: 48px;
border-top: 2px solid #CC9D12;
top: 0px;
left: 24px;
display: flex;
justify-content: space-between;
align-items: center;
}
.v-r-left-2 {
width: 48px;
height: 48px;
text-align: center;
border: 2px solid #3373CC;
border-radius: 48px;
.s1 {
color: #ffffff;
font-size: 16px;
line-height: 42px;
text-shadow: 0px 0px 8px #3373CC;
font-family: Bebas;
}
}
.v-r-right-2 {
position: absolute;
width: 404px;
height: 48px;
border-top: 2px solid #3373CC;
top: 0px;
left: 24px;
display: flex;
justify-content: space-between;
align-items: center;
}
.v-r-left-3 {
width: 48px;
height: 48px;
text-align: center;
border: 2px solid #54BF93;
border-radius: 48px;
.s1 {
color: #ffffff;
font-size: 16px;
line-height: 42px;
text-shadow: 0px 0px 8px #54BF93;
font-family: Bebas;
}
}
.v-r-right-3 {
position: absolute;
width: 404px;
height: 48px;
border-top: 2px solid #54BF93;
top: 0px;
left: 24px;
display: flex;
justify-content: space-between;
align-items: center;
}
}
</style>

@ -66,7 +66,7 @@
</div>
</div>
</div>
<div class="wd-d2" v-if="form.sSource == '新浪微博' || (form.sSource == '汽车之家' && this.getCarCircle == 1) || (form.sSource == '懂车帝' && getCarCircle == 1)">
<div class="wd-d2" v-if="form.sSource == '新浪微博' || (form.sSource == '汽车之家') || (form.sSource == '懂车帝' && getCarCircle == 1)">
<vue-lazy-component>
<weibo-communication-trend-long></weibo-communication-trend-long>
<weiboCommunicationTrendLongStoken slot="skeleton"></weiboCommunicationTrendLongStoken>
@ -96,8 +96,8 @@
<weiboWordCloudStoken slot="skeleton"></weiboWordCloudStoken>
</vue-lazy-component>
</div>
<div class="wd-d3" v-if="form.sSource == '新浪微博' || (form.sSource == '汽车之家' && this.getCarCircle == 1) || (form.sSource == '懂车帝' && getCarCircle == 1)">
<vue-lazy-component v-if="form.sSource == '新浪微博' || (form.sSource == '汽车之家' && this.getCarCircle == 1)">
<div class="wd-d3" v-if="form.sSource == '新浪微博' || (form.sSource == '汽车之家') || (form.sSource == '懂车帝' && getCarCircle == 1)">
<vue-lazy-component v-if="form.sSource == '新浪微博' || (form.sSource == '汽车之家')">
<weiboUserActiveArea></weiboUserActiveArea>
<weiboUserActiveAreaStoken slot="skeleton"></weiboUserActiveAreaStoken>
</vue-lazy-component>

Loading…
Cancel
Save