prod
parent
55a881b558
commit
5649e954e6
@ -0,0 +1,118 @@
|
|||||||
|
import httpService from "@/request"
|
||||||
|
|
||||||
|
// 首页-中国汽车销量趋势图
|
||||||
|
export function getCheZhuCountTime(params) {
|
||||||
|
let obj = Object.assign({action: 'getCheZhuCountTime', sType: 'Marketing'}, params)
|
||||||
|
return httpService({
|
||||||
|
url: `/api/v6.ashx`,
|
||||||
|
method: 'post',
|
||||||
|
data: obj,
|
||||||
|
headers: {
|
||||||
|
'content-type': 'application/x-www-form-urlencoded'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 首页-汽车品牌销量排行榜
|
||||||
|
export function getCheZhuBrandCount(params) {
|
||||||
|
let obj = Object.assign({action: 'getCheZhuBrandCount', sType: 'Marketing'}, params)
|
||||||
|
return httpService({
|
||||||
|
url: `/api/v6.ashx`,
|
||||||
|
method: 'post',
|
||||||
|
data: obj,
|
||||||
|
headers: {
|
||||||
|
'content-type': 'application/x-www-form-urlencoded'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 首页-各级别车型销量
|
||||||
|
export function getCheZhuSpecCount(params) {
|
||||||
|
let obj = Object.assign({action: 'getCheZhuSpecCount', sType: 'Marketing'}, params)
|
||||||
|
return httpService({
|
||||||
|
url: `/api/v6.ashx`,
|
||||||
|
method: 'post',
|
||||||
|
data: obj,
|
||||||
|
headers: {
|
||||||
|
'content-type': 'application/x-www-form-urlencoded'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 首页-车型销量排行榜
|
||||||
|
export function getCheZhuCarSeriesCount(params) {
|
||||||
|
let obj = Object.assign({action: 'getCheZhuCarSeriesCount', sType: 'Marketing'}, params)
|
||||||
|
return httpService({
|
||||||
|
url: `/api/v6.ashx`,
|
||||||
|
method: 'post',
|
||||||
|
data: obj,
|
||||||
|
headers: {
|
||||||
|
'content-type': 'application/x-www-form-urlencoded'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 历史-历史销量
|
||||||
|
export function getCheZhuCarSalesCompared(params) {
|
||||||
|
let obj = Object.assign({action: 'getCheZhuCarSalesCompared', sType: 'Marketing'}, params)
|
||||||
|
return httpService({
|
||||||
|
url: `/api/v6.ashx`,
|
||||||
|
method: 'post',
|
||||||
|
data: obj,
|
||||||
|
headers: {
|
||||||
|
'content-type': 'application/x-www-form-urlencoded'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 按级别-汽车级别销售排行榜
|
||||||
|
export function getCheZhuCarSpecidRankingAll(params) {
|
||||||
|
let obj = Object.assign({action: 'getCheZhuCarSpecidRankingAll', sType: 'Marketing'}, params)
|
||||||
|
return httpService({
|
||||||
|
url: `/api/v6.ashx`,
|
||||||
|
method: 'post',
|
||||||
|
data: obj,
|
||||||
|
headers: {
|
||||||
|
'content-type': 'application/x-www-form-urlencoded'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 按价格-汽车价格销售排行榜
|
||||||
|
export function getCheZhuCarPriceRankingAll(params) {
|
||||||
|
let obj = Object.assign({action: 'getCheZhuCarPriceRankingAll', sType: 'Marketing'}, params)
|
||||||
|
return httpService({
|
||||||
|
url: `/api/v6.ashx`,
|
||||||
|
method: 'post',
|
||||||
|
data: obj,
|
||||||
|
headers: {
|
||||||
|
'content-type': 'application/x-www-form-urlencoded'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 按能源-各汽车能源类型销售排行榜
|
||||||
|
export function getCheZhuCarEnergyRankingAll(params) {
|
||||||
|
let obj = Object.assign({action: 'getCheZhuCarEnergyRankingAll', sType: 'Marketing'}, params)
|
||||||
|
return httpService({
|
||||||
|
url: `/api/v6.ashx`,
|
||||||
|
method: 'post',
|
||||||
|
data: obj,
|
||||||
|
headers: {
|
||||||
|
'content-type': 'application/x-www-form-urlencoded'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 汽车品牌销量-汽车品牌销量排行榜列表
|
||||||
|
export function getCheZhuCarBrandRanking(params) {
|
||||||
|
let obj = Object.assign({action: 'getCheZhuCarBrandRanking', sType: 'Marketing'}, params)
|
||||||
|
return httpService({
|
||||||
|
url: `/api/v6.ashx`,
|
||||||
|
method: 'post',
|
||||||
|
data: obj,
|
||||||
|
headers: {
|
||||||
|
'content-type': 'application/x-www-form-urlencoded'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
@ -0,0 +1,112 @@
|
|||||||
|
<template>
|
||||||
|
<div class="ae-outter" v-loading="load">
|
||||||
|
<v-label-div :title="time">
|
||||||
|
<a-button @click="onTable" style="margin-right: 16px">查看图表</a-button>
|
||||||
|
<a-button @click="goBack">返回</a-button>
|
||||||
|
</v-label-div>
|
||||||
|
<div class="rank-container">
|
||||||
|
<div class="rank-item" v-for="(item, index) in lvList" :key="item.key">
|
||||||
|
<v-label-div :title="item.key + '销量排行TOP10'" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div>
|
||||||
|
<div class="d1">
|
||||||
|
<vRankingKmd v-for="(it,index) in item.value" :key="index" :lineShow="index === 0 ? false : true" :num="index + 1" :label="it.seriesname" :val="it.salescount"></vRankingKmd>
|
||||||
|
</div>
|
||||||
|
<div class="d1-link">
|
||||||
|
<div style="padding: 14px 14px 14px 80px">
|
||||||
|
<a @click="goInfo(index)">更多{{item.key}}详细排行榜>>></a></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import vRankingKmd from "./v-ranking-kmd"
|
||||||
|
import {getCheZhuCarEnergyRankingAll} from "@/api/SaleRank"
|
||||||
|
import {getCheZhuCountTime} from "@/api/SaleRank"
|
||||||
|
export default {
|
||||||
|
name: "AllLevel",
|
||||||
|
components: {
|
||||||
|
vRankingKmd
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
load: false,
|
||||||
|
time: '各汽车能源类型销售排行榜',
|
||||||
|
form: {
|
||||||
|
token: '',
|
||||||
|
sTimeType: 4,
|
||||||
|
sStartTime: '',
|
||||||
|
sEndTime: '',
|
||||||
|
},
|
||||||
|
lvList: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.form.token = this.getToken;
|
||||||
|
this.getData();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getData() {
|
||||||
|
this.load = true;
|
||||||
|
getCheZhuCountTime({token: this.getToken}).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
this.form.sStartTime = data.Data[0].Time;
|
||||||
|
this.form.sEndTime = data.Data[data.Data.length-1].Time;
|
||||||
|
let obj = {
|
||||||
|
token: this.getToken,
|
||||||
|
sTimeType: 4,
|
||||||
|
sStartTime: this.form.sStartTime + '-01',
|
||||||
|
sEndTime: this.form.sEndTime + '-01',
|
||||||
|
}
|
||||||
|
getCheZhuCarEnergyRankingAll(obj).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
this.lvList = data;
|
||||||
|
});
|
||||||
|
this.load = false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
//查看图表
|
||||||
|
onTable() {
|
||||||
|
|
||||||
|
},
|
||||||
|
//返回
|
||||||
|
goBack() {
|
||||||
|
this.$router.go(-1);
|
||||||
|
},
|
||||||
|
//前往详细
|
||||||
|
goInfo(index) {
|
||||||
|
let url = '/saleRank/energy'+(index+1);
|
||||||
|
this.$router.push(url)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.ae-outter {
|
||||||
|
width: 1552px;
|
||||||
|
// height: 460px;
|
||||||
|
border: 2px solid #0f2a4d;
|
||||||
|
.rank-container {
|
||||||
|
padding-left: 17px;
|
||||||
|
padding-top: 17px;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap:wrap;
|
||||||
|
justify-content: flex-start;
|
||||||
|
.rank-item {
|
||||||
|
width: 340px;
|
||||||
|
margin-right: 32px;
|
||||||
|
.d1-link {
|
||||||
|
position: relative;
|
||||||
|
width: 344px;
|
||||||
|
height: 48px;
|
||||||
|
margin-top: 26px;
|
||||||
|
margin-left: 16px;
|
||||||
|
color: #fff;
|
||||||
|
background: #0a1d3b;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,231 @@
|
|||||||
|
<!--
|
||||||
|
* @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 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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.v-r-container {
|
||||||
|
width: 344px;
|
||||||
|
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;
|
||||||
|
margin-left: 16px;
|
||||||
|
color: #fff;
|
||||||
|
background: #0a1d3b;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
.v-r-label {
|
||||||
|
display: block;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
margin-left: 40px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.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: 320px;
|
||||||
|
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: 320px;
|
||||||
|
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: 320px;
|
||||||
|
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: 320px;
|
||||||
|
height: 48px;
|
||||||
|
border-top: 2px solid #54BF93;
|
||||||
|
top: 0px;
|
||||||
|
left: 24px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,112 @@
|
|||||||
|
<template>
|
||||||
|
<div class="alvl-outter" v-loading="load">
|
||||||
|
<v-label-div :title="time">
|
||||||
|
<a-button @click="onTable" style="margin-right: 16px">查看图表</a-button>
|
||||||
|
<a-button @click="goBack">返回</a-button>
|
||||||
|
</v-label-div>
|
||||||
|
<div class="rank-container">
|
||||||
|
<div class="rank-item" v-for="(item, index) in lvList" :key="item.key">
|
||||||
|
<v-label-div :title="item.key + '销量排行TOP10'" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div>
|
||||||
|
<div class="d1">
|
||||||
|
<vRankingKmd v-for="(it,index) in item.value" :key="index" :lineShow="index === 0 ? false : true" :num="index + 1" :label="it.seriesname" :val="it.salescount"></vRankingKmd>
|
||||||
|
</div>
|
||||||
|
<div class="d1-link">
|
||||||
|
<div style="padding: 14px 14px 14px 80px">
|
||||||
|
<a @click="goInfo(index)">更多{{item.key}}详细排行榜>>></a></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import vRankingKmd from "./v-ranking-kmd"
|
||||||
|
import {getCheZhuCarSpecidRankingAll} from "@/api/SaleRank"
|
||||||
|
import {getCheZhuCountTime} from "@/api/SaleRank"
|
||||||
|
export default {
|
||||||
|
name: "AllLevel",
|
||||||
|
components: {
|
||||||
|
vRankingKmd
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
load: false,
|
||||||
|
time: '汽车级别销售排行榜',
|
||||||
|
form: {
|
||||||
|
token: '',
|
||||||
|
sTimeType: 4,
|
||||||
|
sStartTime: '',
|
||||||
|
sEndTime: '',
|
||||||
|
},
|
||||||
|
lvList: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.form.token = this.getToken;
|
||||||
|
this.getData();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getData() {
|
||||||
|
this.load = true;
|
||||||
|
getCheZhuCountTime({token: this.getToken}).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
this.form.sStartTime = data.Data[0].Time;
|
||||||
|
this.form.sEndTime = data.Data[data.Data.length-1].Time;
|
||||||
|
let obj = {
|
||||||
|
token: this.getToken,
|
||||||
|
sTimeType: 4,
|
||||||
|
sStartTime: this.form.sStartTime + '-01',
|
||||||
|
sEndTime: this.form.sEndTime + '-01',
|
||||||
|
}
|
||||||
|
getCheZhuCarSpecidRankingAll(obj).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
this.lvList = data;
|
||||||
|
});
|
||||||
|
this.load = false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
//查看图表
|
||||||
|
onTable() {
|
||||||
|
|
||||||
|
},
|
||||||
|
//返回
|
||||||
|
goBack() {
|
||||||
|
this.$router.go(-1);
|
||||||
|
},
|
||||||
|
//前往详细
|
||||||
|
goInfo(index) {
|
||||||
|
let url = '/saleRank/level'+(index+1);
|
||||||
|
this.$router.push(url)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.alvl-outter {
|
||||||
|
width: 1552px;
|
||||||
|
// height: 460px;
|
||||||
|
border: 2px solid #0f2a4d;
|
||||||
|
.rank-container {
|
||||||
|
padding-left: 17px;
|
||||||
|
padding-top: 17px;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap:wrap;
|
||||||
|
justify-content: flex-start;
|
||||||
|
.rank-item {
|
||||||
|
width: 340px;
|
||||||
|
margin-right: 32px;
|
||||||
|
.d1-link {
|
||||||
|
position: relative;
|
||||||
|
width: 344px;
|
||||||
|
height: 48px;
|
||||||
|
margin-top: 26px;
|
||||||
|
margin-left: 16px;
|
||||||
|
color: #fff;
|
||||||
|
background: #0a1d3b;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,231 @@
|
|||||||
|
<!--
|
||||||
|
* @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 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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.v-r-container {
|
||||||
|
width: 344px;
|
||||||
|
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;
|
||||||
|
margin-left: 16px;
|
||||||
|
color: #fff;
|
||||||
|
background: #0a1d3b;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
.v-r-label {
|
||||||
|
display: block;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
margin-left: 40px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.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: 320px;
|
||||||
|
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: 320px;
|
||||||
|
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: 320px;
|
||||||
|
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: 320px;
|
||||||
|
height: 48px;
|
||||||
|
border-top: 2px solid #54BF93;
|
||||||
|
top: 0px;
|
||||||
|
left: 24px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,112 @@
|
|||||||
|
<template>
|
||||||
|
<div class="aprice-outter" v-loading="load">
|
||||||
|
<v-label-div :title="time">
|
||||||
|
<a-button @click="onTable" style="margin-right: 16px">查看图表</a-button>
|
||||||
|
<a-button @click="goBack">返回</a-button>
|
||||||
|
</v-label-div>
|
||||||
|
<div class="rank-container">
|
||||||
|
<div class="rank-item" v-for="(item, index) in lvList" :key="item.key">
|
||||||
|
<v-label-div :title="item.key + '销量排行TOP10'" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div>
|
||||||
|
<div class="d1">
|
||||||
|
<vRankingKmd v-for="(it,index) in item.value" :key="index" :lineShow="index === 0 ? false : true" :num="index + 1" :label="it.seriesname" :val="it.salescount"></vRankingKmd>
|
||||||
|
</div>
|
||||||
|
<div class="d1-link">
|
||||||
|
<div style="padding: 14px 14px 14px 80px">
|
||||||
|
<a @click="goInfo(index)">更多{{item.key}}详细排行榜>>></a></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import vRankingKmd from "./v-ranking-kmd"
|
||||||
|
import {getCheZhuCarPriceRankingAll} from "@/api/SaleRank"
|
||||||
|
import {getCheZhuCountTime} from "@/api/SaleRank"
|
||||||
|
export default {
|
||||||
|
name: "AllLevel",
|
||||||
|
components: {
|
||||||
|
vRankingKmd
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
load: false,
|
||||||
|
time: '各汽车价格区间销售排行榜',
|
||||||
|
form: {
|
||||||
|
token: '',
|
||||||
|
sTimeType: 4,
|
||||||
|
sStartTime: '',
|
||||||
|
sEndTime: '',
|
||||||
|
},
|
||||||
|
lvList: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.form.token = this.getToken;
|
||||||
|
this.getData();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getData() {
|
||||||
|
this.load = true;
|
||||||
|
getCheZhuCountTime({token: this.getToken}).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
this.form.sStartTime = data.Data[0].Time;
|
||||||
|
this.form.sEndTime = data.Data[data.Data.length-1].Time;
|
||||||
|
let obj = {
|
||||||
|
token: this.getToken,
|
||||||
|
sTimeType: 4,
|
||||||
|
sStartTime: this.form.sStartTime + '-01',
|
||||||
|
sEndTime: this.form.sEndTime + '-01',
|
||||||
|
}
|
||||||
|
getCheZhuCarPriceRankingAll(obj).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
this.lvList = data;
|
||||||
|
});
|
||||||
|
this.load = false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
//查看图表
|
||||||
|
onTable() {
|
||||||
|
|
||||||
|
},
|
||||||
|
//返回
|
||||||
|
goBack() {
|
||||||
|
this.$router.go(-1);
|
||||||
|
},
|
||||||
|
//前往详细
|
||||||
|
goInfo(index) {
|
||||||
|
let url = '/saleRank/price'+(index+1);
|
||||||
|
this.$router.push(url)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.aprice-outter {
|
||||||
|
width: 1552px;
|
||||||
|
// height: 460px;
|
||||||
|
border: 2px solid #0f2a4d;
|
||||||
|
.rank-container {
|
||||||
|
padding-left: 17px;
|
||||||
|
padding-top: 17px;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap:wrap;
|
||||||
|
justify-content: flex-start;
|
||||||
|
.rank-item {
|
||||||
|
width: 340px;
|
||||||
|
margin-right: 32px;
|
||||||
|
.d1-link {
|
||||||
|
position: relative;
|
||||||
|
width: 344px;
|
||||||
|
height: 48px;
|
||||||
|
margin-top: 26px;
|
||||||
|
margin-left: 16px;
|
||||||
|
color: #fff;
|
||||||
|
background: #0a1d3b;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,231 @@
|
|||||||
|
<!--
|
||||||
|
* @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 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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.v-r-container {
|
||||||
|
width: 344px;
|
||||||
|
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;
|
||||||
|
margin-left: 16px;
|
||||||
|
color: #fff;
|
||||||
|
background: #0a1d3b;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
.v-r-label {
|
||||||
|
display: block;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
margin-left: 40px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.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: 320px;
|
||||||
|
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: 320px;
|
||||||
|
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: 320px;
|
||||||
|
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: 320px;
|
||||||
|
height: 48px;
|
||||||
|
border-top: 2px solid #54BF93;
|
||||||
|
top: 0px;
|
||||||
|
left: 24px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,52 @@
|
|||||||
|
<template>
|
||||||
|
<div class="bs-outter">
|
||||||
|
<v-label-div :title="time">
|
||||||
|
<a-button @click="goBack">返回</a-button>
|
||||||
|
</v-label-div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {getCheZhuCarBrandRanking} from "@/api/SaleRank"
|
||||||
|
export default {
|
||||||
|
name: 'BrandSale',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
form: {
|
||||||
|
token: '',
|
||||||
|
sTimeType: 4,
|
||||||
|
sStartTime: '2021-01',
|
||||||
|
sEndTime: '2021-12',
|
||||||
|
iPageIndex: 1,
|
||||||
|
iPageSize: 20,
|
||||||
|
},
|
||||||
|
time: '汽车品牌销量排行榜'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.form.token = this.getToken;
|
||||||
|
this.getData()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getData() {
|
||||||
|
let obj = Object.assign({},this.form)
|
||||||
|
getCheZhuCarBrandRanking(obj).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
console.log(data)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
//返回
|
||||||
|
goBack() {
|
||||||
|
this.$router.go(-1);
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.bs-outter {
|
||||||
|
width: 1552px;
|
||||||
|
// height: 460px;
|
||||||
|
border: 2px solid #0f2a4d;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,66 @@
|
|||||||
|
<template>
|
||||||
|
<div class="cbs-outter" v-loading="load">
|
||||||
|
<v-label-div :title="time">
|
||||||
|
<v-btn @click="moreBrand">更多品牌</v-btn>
|
||||||
|
</v-label-div>
|
||||||
|
<div class="cbs-inner">
|
||||||
|
<v-echarts :opt="opt"></v-echarts>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {getCheZhuBrandCount} from "@/api/SaleRank"
|
||||||
|
import createOpt from "./opt"
|
||||||
|
export default {
|
||||||
|
name: 'carBrandSale',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
form: {
|
||||||
|
token: ''
|
||||||
|
},
|
||||||
|
time: '汽车品牌销量排行榜',
|
||||||
|
load: false,
|
||||||
|
opt: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.form.token = this.getToken;
|
||||||
|
this.getData()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getData() {
|
||||||
|
this.load = true;
|
||||||
|
let obj = Object.assign({},this.form);
|
||||||
|
getCheZhuBrandCount(obj).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
this.time = "汽车品牌销量排行榜(" + data.Time + ')';
|
||||||
|
let dx = [];
|
||||||
|
let ds = [];
|
||||||
|
data.Data.forEach(ele => {
|
||||||
|
dx.push(ele.key);
|
||||||
|
ds.push(ele.value)
|
||||||
|
})
|
||||||
|
this.opt = createOpt(dx,ds);
|
||||||
|
this.load = false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
moreBrand() {
|
||||||
|
this.$router.push("/saleRank/brandSale");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.cbs-outter {
|
||||||
|
width: 1552px;
|
||||||
|
height: 460px;
|
||||||
|
border: 2px solid #0f2a4d;
|
||||||
|
margin-top: 16px;
|
||||||
|
.cbs-inner {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - 48px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,111 @@
|
|||||||
|
/*
|
||||||
|
* @Author: your name
|
||||||
|
* @Date: 2021-10-12 09:12:13
|
||||||
|
* @LastEditTime: 2021-11-02 18:03:08
|
||||||
|
* @LastEditors: Please set LastEditors
|
||||||
|
* @Description: In User Settings Edit
|
||||||
|
* @FilePath: /data-show/src/views/BrandInsight/brandTop/opt.js
|
||||||
|
*/
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
import { bigNumberTransform } from "@/utils/gol/dataTool"
|
||||||
|
export default function createOpt(dx,ds) {
|
||||||
|
return {
|
||||||
|
grid: {
|
||||||
|
top: "16px",
|
||||||
|
left: "16px",
|
||||||
|
right: "28px",
|
||||||
|
bottom: "16px",
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
backgroundColor: "#08182F",
|
||||||
|
color: "#fff",
|
||||||
|
borderColor: "#3373CC",
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff", //设置文字颜色
|
||||||
|
},
|
||||||
|
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
|
||||||
|
formatter: function (params) {
|
||||||
|
var result = "";
|
||||||
|
var dotHtml =
|
||||||
|
'<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#1197b8"></span>';
|
||||||
|
params.forEach(function (item) {
|
||||||
|
result += item.axisValue + "</br>" + dotHtml + item.data;
|
||||||
|
});
|
||||||
|
return result;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: "category",
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
lineStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: dx,
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: "value",
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
lineStyle: {
|
||||||
|
color: "#FFF",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
formatter: (value) => {
|
||||||
|
let str = bigNumberTransform(value);
|
||||||
|
return str;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
type: "dashed", // y轴分割线类型
|
||||||
|
color: "#012b4b",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "2001",
|
||||||
|
data: ds,
|
||||||
|
type: "bar",
|
||||||
|
barWidth: 24,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
label: {
|
||||||
|
show: true, //开启显示
|
||||||
|
position: 'top', //在上方显示
|
||||||
|
textStyle: { //数值样式
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 14
|
||||||
|
}
|
||||||
|
},
|
||||||
|
color: new echarts.graphic.LinearGradient(
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
[
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "#111", // 0% 处的颜色
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: "#78D3F8", // 100% 处的颜色#3373CC
|
||||||
|
},
|
||||||
|
],
|
||||||
|
false
|
||||||
|
),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,66 @@
|
|||||||
|
<template>
|
||||||
|
<div class="cls-outter" v-loading="load">
|
||||||
|
<v-label-div :title="time">
|
||||||
|
<v-btn @click="moreInfo">更多信息</v-btn>
|
||||||
|
</v-label-div>
|
||||||
|
<div class="cls-inner">
|
||||||
|
<v-echarts :opt="opt"></v-echarts>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {getCheZhuSpecCount} from "@/api/SaleRank"
|
||||||
|
import createOpt from "./opt"
|
||||||
|
export default {
|
||||||
|
name: 'carLevelSale',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
form: {
|
||||||
|
token: ''
|
||||||
|
},
|
||||||
|
load: false,
|
||||||
|
opt: {},
|
||||||
|
time: '各级别车型销量'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.form.token = this.getToken;
|
||||||
|
this.getData()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getData() {
|
||||||
|
this.load = true;
|
||||||
|
let obj = Object.assign({},this.form);
|
||||||
|
getCheZhuSpecCount(obj).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
this.time = "各级别车型销量(" + data.Time + ')';
|
||||||
|
let dx = [];
|
||||||
|
let ds = [];
|
||||||
|
data.Data.forEach(ele => {
|
||||||
|
dx.push(ele.key);
|
||||||
|
ds.push(ele.value)
|
||||||
|
})
|
||||||
|
this.opt = createOpt(dx,ds);
|
||||||
|
this.load = false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
moreInfo() {
|
||||||
|
this.$router.push("/saleRank/aLevel");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.cls-outter {
|
||||||
|
width: 1552px;
|
||||||
|
height: 460px;
|
||||||
|
border: 2px solid #0f2a4d;
|
||||||
|
margin-top: 16px;
|
||||||
|
.cls-inner {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - 48px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,111 @@
|
|||||||
|
/*
|
||||||
|
* @Author: your name
|
||||||
|
* @Date: 2021-10-12 09:12:13
|
||||||
|
* @LastEditTime: 2021-11-02 18:03:08
|
||||||
|
* @LastEditors: Please set LastEditors
|
||||||
|
* @Description: In User Settings Edit
|
||||||
|
* @FilePath: /data-show/src/views/BrandInsight/brandTop/opt.js
|
||||||
|
*/
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
import { bigNumberTransform } from "@/utils/gol/dataTool"
|
||||||
|
export default function createOpt(dx,ds) {
|
||||||
|
return {
|
||||||
|
grid: {
|
||||||
|
top: "16px",
|
||||||
|
left: "16px",
|
||||||
|
right: "28px",
|
||||||
|
bottom: "16px",
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
backgroundColor: "#08182F",
|
||||||
|
color: "#fff",
|
||||||
|
borderColor: "#3373CC",
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff", //设置文字颜色
|
||||||
|
},
|
||||||
|
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
|
||||||
|
formatter: function (params) {
|
||||||
|
var result = "";
|
||||||
|
var dotHtml =
|
||||||
|
'<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#1197b8"></span>';
|
||||||
|
params.forEach(function (item) {
|
||||||
|
result += item.axisValue + "</br>" + dotHtml + item.data;
|
||||||
|
});
|
||||||
|
return result;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: "category",
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
lineStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: dx,
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: "value",
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
lineStyle: {
|
||||||
|
color: "#FFF",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
formatter: (value) => {
|
||||||
|
let str = bigNumberTransform(value);
|
||||||
|
return str;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
type: "dashed", // y轴分割线类型
|
||||||
|
color: "#012b4b",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "2001",
|
||||||
|
data: ds,
|
||||||
|
type: "bar",
|
||||||
|
barWidth: 24,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
label: {
|
||||||
|
show: true, //开启显示
|
||||||
|
position: 'top', //在上方显示
|
||||||
|
textStyle: { //数值样式
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 14
|
||||||
|
}
|
||||||
|
},
|
||||||
|
color: new echarts.graphic.LinearGradient(
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
[
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "#111", // 0% 处的颜色
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: "#54BF93", // 100% 处的颜色#3373CC
|
||||||
|
},
|
||||||
|
],
|
||||||
|
false
|
||||||
|
),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,66 @@
|
|||||||
|
<template>
|
||||||
|
<div class="css-outter">
|
||||||
|
<v-label-div title="车型销量排行榜">
|
||||||
|
<v-btn @click="moreSeries">更多车型</v-btn>
|
||||||
|
</v-label-div>
|
||||||
|
<div class="css-inner">
|
||||||
|
<v-echarts :opt="opt"></v-echarts>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {getCheZhuCarSeriesCount} from "@/api/SaleRank"
|
||||||
|
import createOpt from "./opt"
|
||||||
|
export default {
|
||||||
|
name: 'carSeriesSale',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
form: {
|
||||||
|
token: ''
|
||||||
|
},
|
||||||
|
load: false,
|
||||||
|
opt: {},
|
||||||
|
time: '车型销量排行榜'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.form.token = this.getToken;
|
||||||
|
this.getData()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getData() {
|
||||||
|
this.load = true;
|
||||||
|
let obj = Object.assign({},this.form);
|
||||||
|
getCheZhuCarSeriesCount(obj).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
this.time = "车型销量排行榜(" + data.Time + ')';
|
||||||
|
let dx = [];
|
||||||
|
let ds = [];
|
||||||
|
data.Data.forEach(ele => {
|
||||||
|
dx.push(ele.key);
|
||||||
|
ds.push(ele.value)
|
||||||
|
})
|
||||||
|
this.opt = createOpt(dx,ds);
|
||||||
|
this.load = false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
moreSeries() {
|
||||||
|
this.$router.push("/saleRank/seriesSale");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.css-outter {
|
||||||
|
width: 1552px;
|
||||||
|
height: 460px;
|
||||||
|
border: 2px solid #0f2a4d;
|
||||||
|
margin-top: 16px;
|
||||||
|
.css-inner {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - 48px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,111 @@
|
|||||||
|
/*
|
||||||
|
* @Author: your name
|
||||||
|
* @Date: 2021-10-12 09:12:13
|
||||||
|
* @LastEditTime: 2021-11-02 18:03:08
|
||||||
|
* @LastEditors: Please set LastEditors
|
||||||
|
* @Description: In User Settings Edit
|
||||||
|
* @FilePath: /data-show/src/views/BrandInsight/brandTop/opt.js
|
||||||
|
*/
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
import { bigNumberTransform } from "@/utils/gol/dataTool"
|
||||||
|
export default function createOpt(dx,ds) {
|
||||||
|
return {
|
||||||
|
grid: {
|
||||||
|
top: "16px",
|
||||||
|
left: "16px",
|
||||||
|
right: "28px",
|
||||||
|
bottom: "16px",
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
backgroundColor: "#08182F",
|
||||||
|
color: "#fff",
|
||||||
|
borderColor: "#3373CC",
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff", //设置文字颜色
|
||||||
|
},
|
||||||
|
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
|
||||||
|
formatter: function (params) {
|
||||||
|
var result = "";
|
||||||
|
var dotHtml =
|
||||||
|
'<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#1197b8"></span>';
|
||||||
|
params.forEach(function (item) {
|
||||||
|
result += item.axisValue + "</br>" + dotHtml + item.data;
|
||||||
|
});
|
||||||
|
return result;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: "category",
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
lineStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: dx,
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: "value",
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
lineStyle: {
|
||||||
|
color: "#FFF",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
formatter: (value) => {
|
||||||
|
let str = bigNumberTransform(value);
|
||||||
|
return str;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
type: "dashed", // y轴分割线类型
|
||||||
|
color: "#012b4b",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "2001",
|
||||||
|
data: ds,
|
||||||
|
type: "bar",
|
||||||
|
barWidth: 24,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
label: {
|
||||||
|
show: true, //开启显示
|
||||||
|
position: 'top', //在上方显示
|
||||||
|
textStyle: { //数值样式
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 14
|
||||||
|
}
|
||||||
|
},
|
||||||
|
color: new echarts.graphic.LinearGradient(
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
[
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "#111", // 0% 处的颜色
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: "#CC9D12", // 100% 处的颜色#3373CC
|
||||||
|
},
|
||||||
|
],
|
||||||
|
false
|
||||||
|
),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,39 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<zgCarSale></zgCarSale>
|
||||||
|
<carBrandSale></carBrandSale>
|
||||||
|
<carLevelSale></carLevelSale>
|
||||||
|
<carSeriesSale></carSeriesSale>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import zgCarSale from "./zgCarSale"
|
||||||
|
import carBrandSale from "./carBrandSale"
|
||||||
|
import carLevelSale from "./carLevelSale"
|
||||||
|
import carSeriesSale from "./carSeriesSale"
|
||||||
|
export default {
|
||||||
|
name: 'ChineseCarSale',
|
||||||
|
components: {
|
||||||
|
zgCarSale,
|
||||||
|
carBrandSale,
|
||||||
|
carLevelSale,
|
||||||
|
carSeriesSale
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getData()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getData() {},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -0,0 +1,65 @@
|
|||||||
|
<template>
|
||||||
|
<div class="zg-outter" v-loading="load">
|
||||||
|
<v-label-div :title="time">
|
||||||
|
<v-btn @click="historySale">查看历史销量</v-btn>
|
||||||
|
</v-label-div>
|
||||||
|
<div class="zg-inner">
|
||||||
|
<v-echarts :opt="opt"></v-echarts>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {getCheZhuCountTime} from "@/api/SaleRank"
|
||||||
|
import createOpt from "./opt"
|
||||||
|
export default {
|
||||||
|
name: 'zgCarSale',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
form: {
|
||||||
|
token: ''
|
||||||
|
},
|
||||||
|
time: '',
|
||||||
|
opt: {},
|
||||||
|
load: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.form.token = this.getToken;
|
||||||
|
this.getData()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getData() {
|
||||||
|
this.load = true
|
||||||
|
let obj = Object.assign({},this.form)
|
||||||
|
getCheZhuCountTime(obj).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
this.time = "中国汽车销量趋势图 "+data.Time;
|
||||||
|
let dx = [];
|
||||||
|
let ds = [];
|
||||||
|
data.Data.forEach(ele => {
|
||||||
|
dx.push(ele.Time);
|
||||||
|
ds.push(ele.value)
|
||||||
|
})
|
||||||
|
this.opt = createOpt(dx,ds);
|
||||||
|
this.load = false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
historySale() {
|
||||||
|
this.$router.push("/saleRank/history");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.zg-outter {
|
||||||
|
width: 1552px;
|
||||||
|
height: 460px;
|
||||||
|
border: 2px solid #0f2a4d;
|
||||||
|
.zg-inner {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - 48px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,111 @@
|
|||||||
|
/*
|
||||||
|
* @Author: your name
|
||||||
|
* @Date: 2021-10-12 09:12:13
|
||||||
|
* @LastEditTime: 2021-11-02 18:03:08
|
||||||
|
* @LastEditors: Please set LastEditors
|
||||||
|
* @Description: In User Settings Edit
|
||||||
|
* @FilePath: /data-show/src/views/BrandInsight/brandTop/opt.js
|
||||||
|
*/
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
import { bigNumberTransform } from "@/utils/gol/dataTool"
|
||||||
|
export default function createOpt(dx,ds) {
|
||||||
|
return {
|
||||||
|
grid: {
|
||||||
|
top: "16px",
|
||||||
|
left: "16px",
|
||||||
|
right: "28px",
|
||||||
|
bottom: "16px",
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
backgroundColor: "#08182F",
|
||||||
|
color: "#fff",
|
||||||
|
borderColor: "#3373CC",
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff", //设置文字颜色
|
||||||
|
},
|
||||||
|
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
|
||||||
|
formatter: function (params) {
|
||||||
|
var result = "";
|
||||||
|
var dotHtml =
|
||||||
|
'<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#1197b8"></span>';
|
||||||
|
params.forEach(function (item) {
|
||||||
|
result += item.axisValue + "</br>" + dotHtml + item.data;
|
||||||
|
});
|
||||||
|
return result;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: "category",
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
lineStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: dx,
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: "value",
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
lineStyle: {
|
||||||
|
color: "#FFF",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
formatter: (value) => {
|
||||||
|
let str = bigNumberTransform(value);
|
||||||
|
return str;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
type: "dashed", // y轴分割线类型
|
||||||
|
color: "#012b4b",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "2001",
|
||||||
|
data: ds,
|
||||||
|
type: "bar",
|
||||||
|
barWidth: 24,
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
label: {
|
||||||
|
show: true, //开启显示
|
||||||
|
position: 'top', //在上方显示
|
||||||
|
textStyle: { //数值样式
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 14
|
||||||
|
}
|
||||||
|
},
|
||||||
|
color: new echarts.graphic.LinearGradient(
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
[
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "rgba(91, 157, 249, 0)", // 0% 处的颜色
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: "#3373CC", // 100% 处的颜色#3373CC
|
||||||
|
},
|
||||||
|
],
|
||||||
|
false
|
||||||
|
),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,30 @@
|
|||||||
|
<template>
|
||||||
|
<div class="citys-outter">
|
||||||
|
CitySale
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'CitySale',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getData()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getData() {},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.citys-outter {
|
||||||
|
width: 1552px;
|
||||||
|
// height: 460px;
|
||||||
|
border: 2px solid #0f2a4d;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,30 @@
|
|||||||
|
<template>
|
||||||
|
<div class="ses-outter">
|
||||||
|
SeriesSale
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'SeriesSale',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getData()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getData() {},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.ses-outter {
|
||||||
|
width: 1552px;
|
||||||
|
// height: 460px;
|
||||||
|
border: 2px solid #0f2a4d;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,174 @@
|
|||||||
|
<template>
|
||||||
|
<div class="d-container">
|
||||||
|
<div class="sr-outter">
|
||||||
|
<div class="sr-top">
|
||||||
|
<a-select class="choose-brand" v-model="chosenBrand" placeholder="请选择品牌">
|
||||||
|
<div slot="dropdownRender" class="brand-list">
|
||||||
|
<vue-scroll>
|
||||||
|
<div class="brand-items">
|
||||||
|
<div class="left-letter">A</div>
|
||||||
|
<div class="right-letter">
|
||||||
|
<template v-for="(item, index) in brandList">
|
||||||
|
<span class="right" :key="index">
|
||||||
|
<a-button type="primary" @click="onBrand(item.brandname)" v-if="item.firstword=='A'">{{item.brandname}}</a-button>
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="brand-items">
|
||||||
|
<div class="left-letter">B</div>
|
||||||
|
<div class="right-letter">
|
||||||
|
<template v-for="(item, index) in brandList">
|
||||||
|
<span class="right" :key="index">
|
||||||
|
<a-button type="primary" @click="onBrand(item.brandname)" v-if="item.firstword=='B'">{{item.brandname}}</a-button>
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</vue-scroll>
|
||||||
|
</div>
|
||||||
|
</a-select>
|
||||||
|
<a-select class="choose-series" v-model="chosenSeries" placeholder="请选择车型" @change="onSeries">
|
||||||
|
<a-select-option v-for="(item,index) in seriesList" :value="item.name" :key="index">
|
||||||
|
{{item.name}}
|
||||||
|
</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
<a-button type="primary" @click="onSearch">查销量</a-button>
|
||||||
|
</div>
|
||||||
|
<div class="sr-content">
|
||||||
|
<div class="left-menu">
|
||||||
|
<a-menu mode="inline" @click="handlerMenu" theme="dark">
|
||||||
|
<a-menu-item key="main">
|
||||||
|
<router-link to="/saleRank/main">汽车销量排行榜</router-link>
|
||||||
|
</a-menu-item>
|
||||||
|
<a-sub-menu title="按级别">
|
||||||
|
<a-menu-item key="aLevel">
|
||||||
|
<router-link to="/saleRank/aLevel">所有级别</router-link>
|
||||||
|
</a-menu-item>
|
||||||
|
<!-- <a-menu-item v-for="(item) in specList" :key="item.key">
|
||||||
|
<router-link :to="'/saleRank/'+item.key">{{item.value}}</router-link>
|
||||||
|
</a-menu-item> -->
|
||||||
|
<a-menu-item v-for="(item, index) in specList" :key="item.key">
|
||||||
|
<router-link :to="'/saleRank/level'+(index+1)">{{item.value}}</router-link>
|
||||||
|
</a-menu-item>
|
||||||
|
</a-sub-menu>
|
||||||
|
<a-sub-menu title="按价格">
|
||||||
|
<a-menu-item key="aPrice">
|
||||||
|
<router-link to="/saleRank/aPrice">所有价格</router-link>
|
||||||
|
</a-menu-item>
|
||||||
|
<a-menu-item v-for="(item) in priceList" :key="item.key">
|
||||||
|
<router-link :to="'/saleRank/price'+item.key">{{item.value}}</router-link>
|
||||||
|
</a-menu-item>
|
||||||
|
</a-sub-menu>
|
||||||
|
<a-sub-menu title="按能源">
|
||||||
|
<a-menu-item key="aEnergy">
|
||||||
|
<router-link to="/saleRank/aEnergy">所有能源</router-link>
|
||||||
|
</a-menu-item>
|
||||||
|
<a-menu-item v-for="(item) in energyList" :key="item.key * 10">
|
||||||
|
<router-link :to="'/saleRank/energy'+item.key">{{item.value}}</router-link>
|
||||||
|
</a-menu-item>
|
||||||
|
</a-sub-menu>
|
||||||
|
<a-menu-item key="brandSale">
|
||||||
|
<router-link to="/saleRank/brandSale">汽车品牌销量</router-link>
|
||||||
|
</a-menu-item>
|
||||||
|
<a-menu-item key="seriesSale">
|
||||||
|
<router-link to="/saleRank/seriesSale">车型销量</router-link>
|
||||||
|
</a-menu-item>
|
||||||
|
<a-menu-item key="citySale">
|
||||||
|
<router-link to="/saleRank/citySale">城市销量</router-link>
|
||||||
|
</a-menu-item>
|
||||||
|
</a-menu>
|
||||||
|
</div>
|
||||||
|
<div class="sr-view">
|
||||||
|
<router-view></router-view>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import chineseCarSale from "./ChineseCarSale"
|
||||||
|
import tableEvent from "./tableEvent"
|
||||||
|
export default {
|
||||||
|
name: "saleRank",
|
||||||
|
inject: ['reload'],
|
||||||
|
components: {
|
||||||
|
chineseCarSale
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
form: {
|
||||||
|
token: ''
|
||||||
|
},
|
||||||
|
brandList: [], //品牌列表
|
||||||
|
seriesList: [], //车型列表
|
||||||
|
specList: [], //级别列表
|
||||||
|
priceList: [], //价格列表
|
||||||
|
energyList: [], //能源列表
|
||||||
|
chosenBrand: undefined,
|
||||||
|
chosenSeries: undefined,
|
||||||
|
//当前窗口//
|
||||||
|
window: ''
|
||||||
|
////
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.setHeaderType(4);
|
||||||
|
this.initData();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
...tableEvent
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.sr-outter {
|
||||||
|
position: relative;
|
||||||
|
padding: 0px 16px 16px 16px;
|
||||||
|
.sr-top {
|
||||||
|
float: right;
|
||||||
|
margin-right: 16px;
|
||||||
|
}
|
||||||
|
.sr-content {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
margin-top: 8px;
|
||||||
|
.left-menu {
|
||||||
|
width: 320px;
|
||||||
|
padding: 16px;
|
||||||
|
};
|
||||||
|
.sr-view {
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.choose-brand {
|
||||||
|
width: 400px;
|
||||||
|
}
|
||||||
|
.choose-series {
|
||||||
|
width: 200px;
|
||||||
|
margin-right: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand-list {
|
||||||
|
color: white;
|
||||||
|
width: 400px;
|
||||||
|
height: 320px;
|
||||||
|
background: rgb(11, 25, 47);
|
||||||
|
.brand-items {
|
||||||
|
display: flex;
|
||||||
|
.left-letter {
|
||||||
|
font-size: 32px;
|
||||||
|
margin-left: 12px;
|
||||||
|
}
|
||||||
|
.right-letter{
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,47 @@
|
|||||||
|
import { getUserBrand} from "@/api/comm";
|
||||||
|
import {getUserSeriesName} from "@/api/comm";
|
||||||
|
import {getSpec,getPrice,getEnergy} from "@/api/comm";
|
||||||
|
export default {
|
||||||
|
initData() {
|
||||||
|
this.form.token = this.getToken;
|
||||||
|
let obj = Object.assign({},this.form)
|
||||||
|
getUserBrand(obj).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
this.brandList = data;
|
||||||
|
})
|
||||||
|
getSpec(obj).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
this.specList = data
|
||||||
|
})
|
||||||
|
getPrice(obj).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
this.priceList = data
|
||||||
|
})
|
||||||
|
getEnergy(obj).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
this.energyList = data
|
||||||
|
})
|
||||||
|
},
|
||||||
|
//选择品牌
|
||||||
|
onBrand(val) {
|
||||||
|
this.chosenBrand = val;
|
||||||
|
let o = {token: this.getToken, sBrandName: this.chosenBrand};
|
||||||
|
getUserSeriesName(o).then(res => {
|
||||||
|
let data = res.data;
|
||||||
|
this.seriesList = data;
|
||||||
|
this.chosenSeries = undefined
|
||||||
|
})
|
||||||
|
},
|
||||||
|
//选择车型
|
||||||
|
onSeries(val) {
|
||||||
|
this.chosenSeries = val
|
||||||
|
},
|
||||||
|
//查询销量
|
||||||
|
onSearch() {
|
||||||
|
|
||||||
|
},
|
||||||
|
//左侧菜单栏
|
||||||
|
handlerMenu(val) {
|
||||||
|
this.window = val.key
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in new issue