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