parent
219fe5b410
commit
bead5ba6a6
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 2.2 MiB |
|
After Width: | Height: | Size: 42 KiB |
|
After Width: | Height: | Size: 4.0 MiB |
@ -0,0 +1,176 @@
|
|||||||
|
<template>
|
||||||
|
<div class="box" @mouseover="handleMouseEnter" @mouseleave='handleMouseLeave'>
|
||||||
|
<slot></slot>
|
||||||
|
<div class="popover" >
|
||||||
|
<div class="popover-left">
|
||||||
|
<div class="title" v-if="title">{{title}}汽车品牌排名</div>
|
||||||
|
<div>
|
||||||
|
<vue-scroll>
|
||||||
|
<div class="table">
|
||||||
|
<div>
|
||||||
|
<div class="table-row">排名</div>
|
||||||
|
<div class="table-row" v-for="(el,ind) in brand.sort" :key="ind"
|
||||||
|
:style="{color:el ==1?'#CC5B41':el ==2?'#CC7733':el == 3?'#CC9D12':''}">
|
||||||
|
{{formatNum(el)}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="table-row">品牌</div>
|
||||||
|
<div class="table-row" v-for="(el,ind) in brand.name" :key="ind">
|
||||||
|
{{el}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="table-row">传播量</div>
|
||||||
|
<div class="table-row" style="color:#0799FF;font-weight: 600;" v-for="(el,ind) in brand.num" :key="ind">
|
||||||
|
{{el}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</vue-scroll>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="popover-right">
|
||||||
|
<div class="title" v-if="title">{{title}}汽车车型传播排名</div>
|
||||||
|
<div>
|
||||||
|
<vue-scroll>
|
||||||
|
<div class="table">
|
||||||
|
<div>
|
||||||
|
<div class="table-row">排名</div>
|
||||||
|
<div class="table-row" v-for="(el,ind) in carseries.sort" :key="ind"
|
||||||
|
:style="{color:el ==1?'#CC5B41':el ==2?'#CC7733':el == 3?'#CC9D12':''}">
|
||||||
|
{{formatNum(el)}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="table-row">车型</div>
|
||||||
|
<div class="table-row" v-for="(el,ind) in carseries.name" :key="ind">
|
||||||
|
{{el}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="table-row">传播量</div>
|
||||||
|
<div class="table-row" style="color:#0799FF;font-weight: 600;" v-for="(el,ind) in carseries.num" :key="ind">
|
||||||
|
{{el}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</vue-scroll>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { getChesQuDao } from "@/api/home";
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
title: String,
|
||||||
|
sQuDao: Number
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
show: false,
|
||||||
|
brand: {
|
||||||
|
sort: [],
|
||||||
|
name: [],
|
||||||
|
num: [],
|
||||||
|
},
|
||||||
|
carseries: {
|
||||||
|
sort: [],
|
||||||
|
name: [],
|
||||||
|
num: [],
|
||||||
|
},
|
||||||
|
isBegin: false //处理防抖
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
//匹配两位数自动向前补零
|
||||||
|
formatNum(num) {
|
||||||
|
return num < 10 ? "0" + num : num
|
||||||
|
},
|
||||||
|
handleMouseEnter(e) {
|
||||||
|
if (!this.show && !this.isBegin) {
|
||||||
|
this.isBegin = true
|
||||||
|
getChesQuDao({ sQuDao: this.sQuDao, ...this.getCommTime }).then(res => {
|
||||||
|
if (res.data.length > 0) {
|
||||||
|
let info = res.data[0]
|
||||||
|
for (let e in info) {
|
||||||
|
if (e != 'key') {
|
||||||
|
info[e].forEach((el, index) => {
|
||||||
|
this[e].sort.push(index + 1);
|
||||||
|
this[e].name.push(el.key);
|
||||||
|
this[e].num.push(el.value);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.show = true
|
||||||
|
this.isBegin = false
|
||||||
|
// console.log(JSON.stringify(this.brand))
|
||||||
|
// console.log(JSON.stringify(this.carseries), 'carseries')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleMouseLeave() {
|
||||||
|
let clearArr = ['brand', 'carseries']
|
||||||
|
for (let e in clearArr) {
|
||||||
|
for (let i in this[clearArr[e]]) {
|
||||||
|
this.$set(this[clearArr[e]], i, [])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.show = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.box{
|
||||||
|
&:hover{
|
||||||
|
.popover{
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.popover {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
width: 490px;
|
||||||
|
background: rgba(15, 42, 77, 0.7);
|
||||||
|
box-shadow: 0px 0px 10px 1px rgba(51, 115, 204, 0.5);
|
||||||
|
border-radius: 2px;
|
||||||
|
backdrop-filter: blur(5px);
|
||||||
|
z-index: 99;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 10px 0 0;
|
||||||
|
display: flex;
|
||||||
|
color: #fff;
|
||||||
|
display: none;
|
||||||
|
.title {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
.table {
|
||||||
|
margin-top: 10px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
&-row {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-left {
|
||||||
|
padding: 0 10px;
|
||||||
|
border-right: #3373cc 1px solid;
|
||||||
|
height: 100%;
|
||||||
|
width: 45%;
|
||||||
|
}
|
||||||
|
&-right {
|
||||||
|
padding: 0 10px;
|
||||||
|
height: 100%;
|
||||||
|
width: 55%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,203 @@
|
|||||||
|
<template>
|
||||||
|
<div ref="table">
|
||||||
|
<vue-scroll>
|
||||||
|
<div class="table-common">
|
||||||
|
<div v-for="(el,ind) in (type==0?tbData1:tbData2)" :key="ind" style="width:100%;padding-right:10px;">
|
||||||
|
<div class="table-common-row" style="font-size:16px;justify-content: center;border:none;aspect-ratio:0;">{{el.title}}</div>
|
||||||
|
<div class="table-common-row" v-for="(i,n) in el.list" :key="n" @click="pageHandle(i)" :class="[i.sort ==1?'first':i.sort ==2?'second':i.sort == 3?'third':'','default']">
|
||||||
|
<div class="flex">
|
||||||
|
<div class="round">{{formatNum(i.sort)}}</div>
|
||||||
|
{{i.key}}
|
||||||
|
</div>
|
||||||
|
<div class="right-text">{{i.value}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</vue-scroll>
|
||||||
|
<a-modal title="提示" :getContainer="()=>$refs.table" :visible="visible" @ok="handleOk" @cancel="handleCancel">
|
||||||
|
<p>{{ ModalText }}</p>
|
||||||
|
</a-modal>
|
||||||
|
<!-- <div>
|
||||||
|
<div class="table-row">品牌</div>
|
||||||
|
<div class="table-row" v-for="(el,ind) in brand.name" :key="ind">
|
||||||
|
{{el}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="table-row">传播量</div>
|
||||||
|
<div class="table-row" style="color:#0799FF;font-weight: 600;" v-for="(el,ind) in brand.num" :key="ind">
|
||||||
|
{{el}}
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {
|
||||||
|
getBrandName,
|
||||||
|
getUserSeriesName,
|
||||||
|
getBrandOrSeriesLevel,
|
||||||
|
} from "@/api/comm";
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
tbData1: {
|
||||||
|
type: Array,
|
||||||
|
default() {
|
||||||
|
return [
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
tbData2: {
|
||||||
|
type: Array,
|
||||||
|
default() {
|
||||||
|
return [
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
type: Number
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
form: {
|
||||||
|
sQueryType: 1,
|
||||||
|
},
|
||||||
|
visible: false,
|
||||||
|
ModalText: "",
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleCancel() {
|
||||||
|
this.visible = false;
|
||||||
|
},
|
||||||
|
handleOk() {
|
||||||
|
this.$router.push("/login");
|
||||||
|
},
|
||||||
|
//匹配两位数自动向前补零
|
||||||
|
formatNum(num) {
|
||||||
|
return num < 10 ? "0" + num : num
|
||||||
|
},
|
||||||
|
pageHandle(data) {
|
||||||
|
if (!this.getToken) {
|
||||||
|
this.visible = true;
|
||||||
|
this.ModalText = "您还未登录，是否前往登录";
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// if (this.getUser.Brand.indexOf(data[0].axisValueLabel) == -1) {
|
||||||
|
// this.visible = true;
|
||||||
|
// this.ModalText = "账号权限不足";
|
||||||
|
// return;
|
||||||
|
// }
|
||||||
|
let ele = data;
|
||||||
|
if (this.type === 1) {
|
||||||
|
let model = ele.key;
|
||||||
|
let obj = {
|
||||||
|
token: this.getToken,
|
||||||
|
sSeriesName: model,
|
||||||
|
};
|
||||||
|
getBrandOrSeriesLevel(obj).then(() => {
|
||||||
|
getBrandName(obj).then((res) => {
|
||||||
|
this.setModel({ name: model });
|
||||||
|
this.setHeaderType(3);
|
||||||
|
this.setBrand({ brandname: res.data });
|
||||||
|
this.$router.push("/modelInsight");
|
||||||
|
});
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
let brand = ele.key;
|
||||||
|
getBrandOrSeriesLevel({
|
||||||
|
token: this.getToken,
|
||||||
|
sBrand: brand,
|
||||||
|
}).then(() => {
|
||||||
|
this.getUserSeriesName(brand); //同步车型
|
||||||
|
this.setBrand({ brandname: brand });
|
||||||
|
this.setHeaderType(3);
|
||||||
|
this.$router.push("/brandInsight");
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 获取车型
|
||||||
|
getUserSeriesName(brandName) {
|
||||||
|
this.form.token = this.getToken;
|
||||||
|
this.form.sBrandName = brandName;
|
||||||
|
getUserSeriesName(this.form).then((res) => {
|
||||||
|
let data = res.data || [];
|
||||||
|
this.models = data;
|
||||||
|
this.chooseModel = this.models[0];
|
||||||
|
this.setModel(this.chooseModel);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.table-common {
|
||||||
|
margin-top: 5px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
color: #fff;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
.default{
|
||||||
|
background: rgba(255,255,255,0.1);
|
||||||
|
}
|
||||||
|
&-row {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
aspect-ratio: 175/49;
|
||||||
|
font-size: 14px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding-right: 10px;
|
||||||
|
border-left: 4px solid #fff;
|
||||||
|
cursor: pointer;
|
||||||
|
.round {
|
||||||
|
width: 20%;
|
||||||
|
aspect-ratio: 1/1;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
background: rgba(243, 182, 0, 0.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.first {
|
||||||
|
background: rgba(255, 113, 0, 0.2);
|
||||||
|
border-left: 4px solid #ff4c23;
|
||||||
|
.round {
|
||||||
|
background-color: #ff4c23;
|
||||||
|
}
|
||||||
|
.right-text{
|
||||||
|
color: #ff4c23;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.second {
|
||||||
|
background: rgba(255, 113, 0, 0.2);
|
||||||
|
border-left: 4px solid #ff7100;
|
||||||
|
.round {
|
||||||
|
background-color: #ff7100;
|
||||||
|
}
|
||||||
|
.right-text{
|
||||||
|
color: #ff7100;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.third {
|
||||||
|
background: rgba(255, 113, 0, 0.2);
|
||||||
|
border-left: 4px solid #f3b600;
|
||||||
|
.round {
|
||||||
|
background-color: #f3b600;
|
||||||
|
}
|
||||||
|
.right-text{
|
||||||
|
color: #f3b600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.flex {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,64 @@
|
|||||||
|
<template>
|
||||||
|
<div class="my-tabs">
|
||||||
|
<a-tabs :default-active-key="defaultKey" :activeKey="value" @change="callback" :tabBarStyle="{color:'#1BB6EC'}" size="small">
|
||||||
|
<a-tab-pane :tab="el" v-for="(el,ind) in tabTitles" :key="ind+1">
|
||||||
|
<slot></slot>
|
||||||
|
</a-tab-pane>
|
||||||
|
</a-tabs>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
tabTitles: {
|
||||||
|
type: Array,
|
||||||
|
default() {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
defaultKey: {
|
||||||
|
type: Number,
|
||||||
|
default: 1
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
type: Number,
|
||||||
|
default: 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
callback(e) {
|
||||||
|
this.$emit('input', e)
|
||||||
|
this.$emit('callback', e)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.ant-tabs-nav-scroll {
|
||||||
|
height: 40px !important;
|
||||||
|
background: transparent !important;
|
||||||
|
}
|
||||||
|
.ant-tabs-bar {
|
||||||
|
border: none !important;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
.ant-tabs-nav {
|
||||||
|
.ant-tabs-tab-active {
|
||||||
|
color: #1bb6ec;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.ant-tabs-tab {
|
||||||
|
padding: 0 0px 5px 0 !important;
|
||||||
|
margin-right: 10px !important;
|
||||||
|
padding-bottom: 5px;
|
||||||
|
}
|
||||||
|
.ant-tabs {
|
||||||
|
padding: 10px;
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,74 @@
|
|||||||
|
<template>
|
||||||
|
<div class="level-row" @click="handle">
|
||||||
|
<div class="left">
|
||||||
|
<div class="num" :class="[data.num==1?'red':data.num==2?'yellow':data.num ==3?'green':'']">
|
||||||
|
{{formatNum(data.num)}}
|
||||||
|
</div>
|
||||||
|
<span>{{data.key}}</span>
|
||||||
|
</div>
|
||||||
|
<div class="right">{{data.value}}</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
default() {
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handle(){
|
||||||
|
this.$emit('getData',this.data)
|
||||||
|
},
|
||||||
|
//匹配两位数自动向前补零
|
||||||
|
formatNum(num) {
|
||||||
|
return num < 10 ? "0" + num : num
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.level-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #fff;
|
||||||
|
width: 100%;
|
||||||
|
.right{
|
||||||
|
color: #0799FF;
|
||||||
|
}
|
||||||
|
.left {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
.num {
|
||||||
|
border-radius: 50%;
|
||||||
|
background: rgba(255, 255, 255, 0.2);
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
margin-right: 10px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.red{
|
||||||
|
background:#CC5B41;
|
||||||
|
}
|
||||||
|
.yellow{
|
||||||
|
background: #CC9D12;
|
||||||
|
}
|
||||||
|
.green{
|
||||||
|
background:#54BF93;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,81 @@
|
|||||||
|
<template>
|
||||||
|
<div class="level-row-hot">
|
||||||
|
<div>
|
||||||
|
<div class="left">
|
||||||
|
{{formatNum(data.num)}}
|
||||||
|
<span>{{data.brand}}</span>
|
||||||
|
</div>
|
||||||
|
<div class="right">{{data.salescount}}</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<a-progress :showInfo="false" :stroke-color="{
|
||||||
|
'0%': '#2B9BFF',
|
||||||
|
'100%': '#FFC600',
|
||||||
|
}" :percent="Number(data.percentage)" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
default() {
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
//匹配两位数自动向前补零
|
||||||
|
formatNum(num) {
|
||||||
|
return num < 10 ? "0" + num : num
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.level-row-hot {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #fff;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-top: 12px;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
& > div {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.left {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
span {
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.right{
|
||||||
|
color: #63AECC;
|
||||||
|
}
|
||||||
|
.ant-progress{
|
||||||
|
line-height: 0.5;
|
||||||
|
}
|
||||||
|
.ant-progress-inner{
|
||||||
|
background-color: rgba(255,255,255,0.2);
|
||||||
|
}
|
||||||
|
.ant-progress-bg{
|
||||||
|
height: 3px !important;
|
||||||
|
}
|
||||||
|
.ant-progress-show-info .ant-progress-outer{
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue