Compare commits
No commits in common. '0d6f0d91ecdeed4506674adb96ef74cd82b036e5' and '219fe5b410eb87af8444865d93c34ebc394ff747' have entirely different histories.
0d6f0d91ec
...
219fe5b410
File diff suppressed because it is too large
Load Diff
|
Before Width: | Height: | Size: 2.2 MiB |
|
Before Width: | Height: | Size: 117 KiB After Width: | Height: | Size: 42 KiB |
|
Before Width: | Height: | Size: 42 KiB |
|
Before Width: | Height: | Size: 4.0 MiB |
|
Before Width: | Height: | Size: 77 KiB |
@ -1,176 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,203 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,64 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,74 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,81 +0,0 @@
|
|||||||
<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