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