Merge branch 'dev'

prod
校文 3 years ago
commit b0986aae91

@ -73,7 +73,7 @@ export function getSalesGrowthRatio(params) {
} }
}) })
} }
// 乘用车 - 总销量 - 新能源市场 // 乘用车 - 总销量 - 传统燃油车
export function getSalesGrowthRatioByFuel(params) { export function getSalesGrowthRatioByFuel(params) {
let obj = Object.assign({action: 'getSalesGrowthRatioByFuel', sType: 'Marketing'}, params) let obj = Object.assign({action: 'getSalesGrowthRatioByFuel', sType: 'Marketing'}, params)
return httpService({ return httpService({
@ -85,6 +85,18 @@ export function getSalesGrowthRatioByFuel(params) {
} }
}) })
} }
// 乘用车 - 总销量 - 新能源市场
export function getSalesGrowthRatioByFuelE(params) {
let obj = Object.assign({action: 'getSalesGrowthRatioByFuelE', sType: 'Marketing'}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}
// 乘用车 - 能源类型 // 乘用车 - 能源类型
export function getSalesEnergyTypes(params) { export function getSalesEnergyTypes(params) {

@ -11,6 +11,7 @@
<v-label-div title="内容分布"> <v-label-div title="内容分布">
<div> <div>
<v-tab-group <v-tab-group
v-if="form.ilimitType == 1 || form.ilimitType == 2"
:btns="['认证', '精华', '图文']" :btns="['认证', '精华', '图文']"
@change="handlerTab" @change="handlerTab"
></v-tab-group> ></v-tab-group>

@ -50,7 +50,7 @@ export default {
}, },
methods: { methods: {
getData() { getData() {
let obj = Object.assign({}, this.getCtime2, this.form); let obj = Object.assign({}, this.form);
// this.load = true; // this.load = true;
getList(obj).then(res => { getList(obj).then(res => {
let data = res.data; let data = res.data;

@ -11,6 +11,7 @@
<v-label-div title="内容分布"> <v-label-div title="内容分布">
<div> <div>
<v-tab-group <v-tab-group
v-if="form.ilimitType == 1 || form.ilimitType == 2"
:btns="['认证', '精华', '图文']" :btns="['认证', '精华', '图文']"
@change="handlerTab" @change="handlerTab"
></v-tab-group> ></v-tab-group>
@ -107,7 +108,7 @@ export default {
methods: { methods: {
// //
getData() { getData() {
let obj = Object.assign({}, this.getCtime2, this.form); let obj = Object.assign({}, this.form);
// this.load = true; // this.load = true;
getUserAttestationGroupBy(obj).then((res) => { getUserAttestationGroupBy(obj).then((res) => {
let data = res.data || {}; let data = res.data || {};
@ -141,20 +142,20 @@ export default {
handlerTab(n) { handlerTab(n) {
switch (n) { switch (n) {
case 0: case 0:
getUserAttestationGroupBy(Object.assign({}, this.getCtime2, this.form)).then((res) => { getUserAttestationGroupBy(Object.assign({}, this.form)).then((res) => {
let data = res.data || {}; let data = res.data || {};
this.doVal(data) this.doVal(data)
this.load = false; this.load = false;
}); });
case 1: case 1:
getIsjingGroupBy(Object.assign({}, this.getCtime2, this.form)).then((res) => { getIsjingGroupBy(Object.assign({}, this.form)).then((res) => {
let data = res.data || {}; let data = res.data || {};
this.doVal(data) this.doVal(data)
this.load = false; this.load = false;
}); });
break; break;
case 2: case 2:
getPicboolGroupBy(Object.assign({}, this.getCtime2, this.form)).then((res) => { getPicboolGroupBy(Object.assign({}, this.form)).then((res) => {
let data = res.data || {}; let data = res.data || {};
this.doVal(data) this.doVal(data)
this.load = false; this.load = false;

@ -54,7 +54,7 @@ export default {
methods: { methods: {
getData() { getData() {
// this.load = true; // this.load = true;
let obj = Object.assign({}, this.getCtime2, this.form); let obj = Object.assign({}, this.form);
getDirectWeiBo0528(obj).then(res => { getDirectWeiBo0528(obj).then(res => {
let data = res.data || []; let data = res.data || [];
let arr = []; let arr = [];

@ -83,7 +83,7 @@ export default {
methods: { methods: {
getData() { getData() {
this.load = true; this.load = true;
let obj = Object.assign({}, this.getCtime2, this.form); let obj = Object.assign({}, this.form);
getWtypeWeiBo0528(obj).then((res) => { getWtypeWeiBo0528(obj).then((res) => {
let data = res.data || []; let data = res.data || [];
this.doVal(data); this.doVal(data);

@ -53,7 +53,7 @@ export default {
methods: { methods: {
getData() { getData() {
this.load = true; this.load = true;
let obj = Object.assign({}, this.getCtime2, this.form); let obj = Object.assign({}, this.form);
getUserRegionGroupBy(obj).then((res) => { getUserRegionGroupBy(obj).then((res) => {
let data = res.data || {}; let data = res.data || {};
let dx = []; // let dx = []; //

@ -57,7 +57,7 @@ export default {
// //
getH() { getH() {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
let obj = Object.assign({}, this.getCtime2, this.form); let obj = Object.assign({}, this.form);
getHotWord(obj) getHotWord(obj)
.then((res) => { .then((res) => {
this.positiveData = res.data || {}; this.positiveData = res.data || {};

@ -11,6 +11,7 @@
<v-label-div title="内容分布"> <v-label-div title="内容分布">
<div> <div>
<v-tab-group <v-tab-group
v-if="form.ilimitType == 1 || form.ilimitType == 2"
:btns="['认证', '精华', '图文']" :btns="['认证', '精华', '图文']"
@change="handlerTab" @change="handlerTab"
></v-tab-group> ></v-tab-group>

@ -25,7 +25,7 @@
</template> </template>
<script> <script>
import {getTimeCount} from "@/api/KeyMediaBrand/index.js" import {getHomeTimeCount} from "@/api/KeyMediaHome/index.js"
import {doStr} from "@/utils/gol/dataTool" import {doStr} from "@/utils/gol/dataTool"
import createOpt from "./opt" import createOpt from "./opt"
export default { export default {
@ -50,7 +50,6 @@ export default {
//-*-// //-*-//
load: false, load: false,
form: { form: {
sBrand: "",
token: "", token: "",
sSource: '', sSource: '',
ilimitType: 0, ilimitType: 0,
@ -61,7 +60,6 @@ export default {
}, },
created() { created() {
this.form.token = this.getToken; this.form.token = this.getToken;
this.form.sBrand = this.getBrand.brandname || "奥迪";
this.form.sSource = this.$route.query.source || "抖音"; this.form.sSource = this.$route.query.source || "抖音";
if(this.form.sSource == '汽车之家') { if(this.form.sSource == '汽车之家') {
this.form.ilimitType = 1; this.form.ilimitType = 1;
@ -94,7 +92,7 @@ export default {
getData() { getData() {
this.load = true; this.load = true;
let obj = Object.assign({}, this.getCtime2, this.form); let obj = Object.assign({}, this.getCtime2, this.form);
getTimeCount(obj).then(res => { getHomeTimeCount(obj).then(res => {
let data = res.data || []; let data = res.data || [];
let dx = []; //time let dx = []; //time
let ds = []; //value let ds = []; //value

@ -11,6 +11,7 @@
<v-label-div title="内容分布"> <v-label-div title="内容分布">
<div> <div>
<v-tab-group <v-tab-group
v-if="form.ilimitType == 1 || form.ilimitType == 2"
:btns="['认证', '精华', '图文']" :btns="['认证', '精华', '图文']"
@change="handlerTab" @change="handlerTab"
></v-tab-group> ></v-tab-group>

@ -11,6 +11,7 @@
<v-label-div title="内容分布"> <v-label-div title="内容分布">
<div> <div>
<v-tab-group <v-tab-group
v-if="form.ilimitType == 1 || form.ilimitType == 2"
:btns="['认证', '精华', '图文']" :btns="['认证', '精华', '图文']"
@change="handlerTab" @change="handlerTab"
></v-tab-group> ></v-tab-group>

@ -26,7 +26,6 @@ export default {
token: "", token: "",
sSeriesName: "", sSeriesName: "",
}, },
opt: createOpt()
} }
}, },
} }

@ -27,7 +27,6 @@ export default {
token: "", token: "",
sSeriesName: "" sSeriesName: ""
}, },
opt: createOpt()
} }
}, },
}; };

@ -23,7 +23,6 @@ export default {
}, },
labelArr: [], labelArr: [],
total: 0, total: 0,
opt: createOpt(),
colors: [ colors: [
"#3373CC", "#3373CC",
"#54BF93", "#54BF93",

@ -37,10 +37,11 @@
<span class="s1">{{(qrCount-hyqrCount).toFixed(2)}} <span class="s1">{{(qrCount-hyqrCount).toFixed(2)}}
<a-tooltip placement="topRight"> <a-tooltip placement="topRight">
<template slot="title"> <template slot="title">
<div>千人发帖量算法</div> <div>千人发帖量算法</div>
<div>行业千人发帖量=[(行业所有车型主贴量*1000 ÷ 所有阅读量] ÷ 车型数量</div> <div>行业千人发帖量=行业所有车型主贴量×1000÷所有阅读量÷车型数量</div>
<div>千人发帖量=(车型主贴量*1000 ÷ 阅读量</div> <div>千人发帖量=车型主贴量×1000÷阅读量</div>
<div>千人发帖量量差=品牌千人发贴量-行业千人发帖量</div> <div>千人发帖量量差=品牌千人发帖量行业千人发帖量</div>
</template> </template>
<a-icon type="question-circle" style="margin-left: 0.3rem;color: #5a9ebc;" /> <a-icon type="question-circle" style="margin-left: 0.3rem;color: #5a9ebc;" />
</a-tooltip> </a-tooltip>
@ -62,10 +63,10 @@
<span class="s1">{{(replyCount-hyreplyCount).toFixed(2)}} <span class="s1">{{(replyCount-hyreplyCount).toFixed(2)}}
<a-tooltip placement="topRight"> <a-tooltip placement="topRight">
<template slot="title"> <template slot="title">
<div>千人发帖量算法</div> <div>千人评论量算法</div>
<div>行业千人评论量=[(行业所有车型评论量*1000 ÷ 所有阅读量] ÷ 车型数量</div> <div>行业千人评论量=行业所有车型评论量×1000÷所有阅读量÷车型数量</div>
<div>千人评论量=(车型主贴量*1000 ÷ 阅读量</div> <div>千人评论量=车型评论量×1000÷阅读量</div>
<div>千人评论量量差=品牌千人评论量-行业千人评论量</div> <div>千人评论量量差=品牌千人评论量行业千人评论量</div>
</template> </template>
<a-icon type="question-circle" style="margin-left: 0.3rem;color: #5a9ebc;" /> <a-icon type="question-circle" style="margin-left: 0.3rem;color: #5a9ebc;" />
</a-tooltip> </a-tooltip>

@ -1,7 +1,11 @@
<template> <template>
<div :class="getIsLight?'mcomp-light':'mcomp-outter'"> <div class="mcomp-outter" :style="getIsLight?{background: '#FFF'}:{}">
<v-label-div v-if="!getIsLight" title="中国汽车市场竞争格局图"></v-label-div> <v-label-div v-if="!getIsLight" title="中国汽车市场竞争格局图">
<v-label-div-light v-else title="中国汽车市场竞争格局图"></v-label-div-light> <a-button type="primary" @click="report"></a-button>
</v-label-div>
<v-label-div-light v-else title="中国汽车市场竞争格局图" class="lightSy">
<a-button type="primary" @click="report"></a-button>
</v-label-div-light>
<div class="d2"> <div class="d2">
<a-form-model layout="inline"> <a-form-model layout="inline">
<a-form-model-item :class="getIsLight?'lightSy':'dark'" label="数据筛选"> <a-form-model-item :class="getIsLight?'lightSy':'dark'" label="数据筛选">
@ -35,13 +39,13 @@
{{item.value}} {{item.value}}
</a-select-option> </a-select-option>
</a-select> </a-select>
<a-button :class="getIsLight?'lightSy':'dark'" type="primary" style="margin-left: 16px" @click="getData"></a-button> <a-button type="primary" style="margin-left: 16px" @click="getData"></a-button>
</a-form-model-item> </a-form-model-item>
</a-form-model> </a-form-model>
</div> </div>
<div class="d2"> <div class="d2">
<a-form-model layout="inline"> <a-form-model :class="getIsLight?'lightSy':'dark'" layout="inline">
<a-form-model-item label="选择日期" :class="getIsLight?'lightSy':'dark'"> <a-form-model-item label="选择日期">
<a-month-picker style="width: 146px" :allowClear="false" v-model="selTime[0]" valueFormat="YYYY-MM" placeholder="开始日期"></a-month-picker> <a-month-picker style="width: 146px" :allowClear="false" v-model="selTime[0]" valueFormat="YYYY-MM" placeholder="开始日期"></a-month-picker>
<a-month-picker style="width: 146px" :allowClear="false" v-model="selTime[1]" valueFormat="YYYY-MM" placeholder="结束日期"></a-month-picker> <a-month-picker style="width: 146px" :allowClear="false" v-model="selTime[1]" valueFormat="YYYY-MM" placeholder="结束日期"></a-month-picker>
</a-form-model-item> </a-form-model-item>
@ -49,12 +53,17 @@
</div> </div>
<div class="d2"> <div class="d2">
<div :class="getIsLight?'lightSy':'dark'"> <div :class="getIsLight?'lightSy':'dark'">
<span v-for="(item, index) in seriesList" :key="index"> <span v-for="(item, index) in stableList" :key="index">
<a-button style="margin-left: 12px" @click="onDelete(index)" type="primary">{{item}}<a-icon type="close" /></a-button> <a-button style="margin-left: 12px" @click="onDelete(index)" ghost type="primary" disabled>{{item}}</a-button>
</span> </span>
<a-button style="margin-left: 12px" type="primary" icon="plus" @click="hanlderAddSeries"></a-button>
</div> </div>
</div> </div>
<div class="d2" :class="getIsLight?'lightSy':'dark'">
<a-button style="margin-left: 12px" type="primary" icon="plus" @click="hanlderAddSeries"></a-button>
<span v-for="(item, index) in seriesList" :key="index">
<a-button style="margin-left: 12px" @click="onDelete(index)" type="primary">{{item}}<a-icon type="close" /></a-button>
</span>
</div>
<iSaleModelChoose :brand="brand" :model="model" :visible.sync="modelShow" @change="handlerBrand"></iSaleModelChoose> <iSaleModelChoose :brand="brand" :model="model" :visible.sync="modelShow" @change="handlerBrand"></iSaleModelChoose>
<div class="d3" v-if="getIsLight"> <div class="d3" v-if="getIsLight">
<v-echarts :opt="opt2"></v-echarts> <v-echarts :opt="opt2"></v-echarts>
@ -69,7 +78,7 @@
import {getCountryS,getPriceRangeS,getSpecName1,getSeatS,getDisplacementS,getEnergyS} from "@/api/SaleRankMarketCommon"; import {getCountryS,getPriceRangeS,getSpecName1,getSeatS,getDisplacementS,getEnergyS} from "@/api/SaleRankMarketCommon";
import {getSalesCompetitionALLList,getSalesCompetitionList,getSalesCompetitionAnalysis} from "@/api/SaleRankMarket"; import {getSalesCompetitionALLList,getSalesCompetitionList,getSalesCompetitionAnalysis} from "@/api/SaleRankMarket";
import createOpt from "./opt" import createOpt from "./opt"
import createOpt2 from "./optLight" import createOptLight from "./optLight"
import {getCheZhuLatestTime} from "@/api/SaleRank" import {getCheZhuLatestTime} from "@/api/SaleRank"
export default { export default {
name: 'CitySale', name: 'CitySale',
@ -81,7 +90,8 @@ export default {
sEnergyS: '', sEnergyS: '',
sPriceRangeS: '', sPriceRangeS: '',
sDisplacementS: '', sDisplacementS: '',
sSeatS: '', sSerieName: '', //
sSeatS: '',
sSpecName1: '', sSpecName1: '',
sTimeType: 4, sTimeType: 4,
sStartTime: '', sStartTime: '',
@ -93,10 +103,12 @@ export default {
prices: [], prices: [],
specs: [], specs: [],
specs2: [], specs2: [],
series: [], //
displacements: [], displacements: [],
seats: [], seats: [],
selTime: ['',''], selTime: ['',''],
seriesList: [], seriesList: [],
stableList: [],
// //
countryList: [], countryList: [],
energyList: [], energyList: [],
@ -152,26 +164,30 @@ export default {
sPriceRangeS: this.prices.join(','), sPriceRangeS: this.prices.join(','),
sDisplacementS: this.displacements.join(','), sDisplacementS: this.displacements.join(','),
sSeatS: this.seats.join(','), sSeatS: this.seats.join(','),
sSerieName: this.seriesList.join(','),
sSpecName1: this.specs.join(','), sSpecName1: this.specs.join(','),
sSpecName2: this.specs2.join(','), sSpecName2: this.specs2.join(','),
sTimeType: 4, sTimeType: 4,
sStartTime: this.selTime[0], sStartTime: this.selTime[0],
sEndTime: this.selTime[1], sEndTime: this.selTime[1],
} }
getSalesCompetitionALLList(obj).then(res => { getSalesCompetitionList(obj).then(res => {
let data = res.data; let data = res.data;
// [ ['total'],[] ] // [ ['total'],[] ]
let arr = []; let arr = [];
let sList = []
data.forEach(ele => { data.forEach(ele => {
if(ele.CheChang * 1 != 0) { if(ele.CheChang * 1 != 0) {
let item = [ele.CheChang * 1, ele.MainPrice, ele.Count, ele.Name, 'total']; let item = [ele.CheChang * 1, ele.MainPrice, ele.Count, ele.Name, 'total'];
// let item = [ele.Count, ele.MainPrice, ele.CheChang * 1, ele.Name, 'total']; // let item = [ele.Count, ele.MainPrice, ele.CheChang * 1, ele.Name, 'total'];
arr.push(item); arr.push(item);
} };
sList.push(ele.Name)
}); });
this.stableList = sList;
this.totalData = arr; this.totalData = arr;
this.opt = createOpt(this.totalData, this.extraData); this.opt = createOpt(this.totalData, this.extraData);
this.opt2 = createOpt2(this.totalData, this.extraData) this.opt2 = createOptLight(this.totalData, this.extraData)
}) })
}, },
// //
@ -197,7 +213,7 @@ export default {
}); });
this.extraData = extraArr; this.extraData = extraArr;
this.opt = createOpt(this.totalData, this.extraData); this.opt = createOpt(this.totalData, this.extraData);
this.opt2 = createOpt2(this.totalData, this.extraData) this.opt2 = createOptLight(this.totalData, this.extraData)
}) })
this.modelShow = false; this.modelShow = false;
}, },
@ -207,7 +223,7 @@ export default {
if(this.seriesList.length == 0) { if(this.seriesList.length == 0) {
this.extraData = []; this.extraData = [];
this.opt = createOpt(this.totalData, this.extraData); this.opt = createOpt(this.totalData, this.extraData);
this.opt2 = createOpt2(this.totalData, this.extraData) this.opt2 = createOptLight(this.totalData, this.extraData)
} else { } else {
let obj = { let obj = {
token: this.form.token, token: this.form.token,
@ -226,10 +242,31 @@ export default {
}); });
this.extraData = extraArr; this.extraData = extraArr;
this.opt = createOpt(this.totalData, this.extraData); this.opt = createOpt(this.totalData, this.extraData);
this.opt2 = createOpt2(this.totalData, this.extraData) this.opt2 = createOptLight(this.totalData, this.extraData)
}) })
} }
}, },
report() {
let obj = {
token: this.form.token,
sCountryS: this.countries.join(','),
sEnergyS: this.energies.join(','),
sPriceRangeS: this.prices.join(','),
sDisplacementS: this.displacements.join(','),
sSeatS: this.seats.join(','),
sSerieName: this.seriesList.join(','),
sSpecName1: this.specs.join(','),
sSpecName2: this.specs2.join(','),
sTimeType: 4,
sStartTime: this.selTime[0],
sEndTime: this.selTime[1],
isExcel: 1,
};
getSalesCompetitionList(obj).then(res => {
let data = res.data;
window.open(data);
})
}
} }
} }
</script> </script>
@ -250,20 +287,4 @@ export default {
height: 1060px; height: 1060px;
} }
} }
.mcomp-light {
width: 1552px;
background: #fff;
// height: 460px;
border: 2px solid #0f2a4d;
.d2 {
display: flex;
justify-content: flex-start;
padding: 8px 16px 0px 16px;
}
.d3 {
// padding: 0px 16px 16px 16px;
width: 100%;
height: 1060px;
}
}
</style> </style>

@ -1,3 +1,5 @@
import * as echarts from "echarts";
import { bigNumberTransform } from "@/utils/gol/dataTool"
export default function createOpt(data = [],extraData = []) { export default function createOpt(data = [],extraData = []) {
return { return {
grid: { grid: {
@ -64,4 +66,4 @@ export default function createOpt(data = [],extraData = []) {
}, },
] ]
} }
} }

@ -64,4 +64,4 @@ export default function createOptLight(data = [],extraData = []) {
}, },
] ]
} }
} }

@ -1,7 +1,11 @@
<template> <template>
<div class="mcomp-outter" :style="getIsLight?{background: '#FFF'}:{}"> <div :class="getIsLight?'mcomp-light':'mcomp-outter'">
<v-label-div v-if="!getIsLight" title="全车型竞争关系图谱"></v-label-div> <v-label-div v-if="!getIsLight" title="全车型竞争关系图谱">
<v-label-div-light v-else title="全车型竞争关系图谱"></v-label-div-light> <a-button type="primary" @click="report"></a-button>
</v-label-div>
<v-label-div-light v-else title="全车型竞争关系图谱" class="lightSy">
<a-button type="primary" @click="report"></a-button>
</v-label-div-light>
<div class="d2"> <div class="d2">
<a-form-model layout="inline"> <a-form-model layout="inline">
<a-form-model-item :class="getIsLight?'lightSy':'dark'" label="数据筛选"> <a-form-model-item :class="getIsLight?'lightSy':'dark'" label="数据筛选">
@ -35,13 +39,13 @@
{{item.value}} {{item.value}}
</a-select-option> </a-select-option>
</a-select> </a-select>
<a-button type="primary" style="margin-left: 16px" @click="getData"></a-button> <a-button :class="getIsLight?'lightSy':'dark'" type="primary" style="margin-left: 16px" @click="getData"></a-button>
</a-form-model-item> </a-form-model-item>
</a-form-model> </a-form-model>
</div> </div>
<div class="d2"> <div class="d2">
<a-form-model :class="getIsLight?'lightSy':'dark'" layout="inline"> <a-form-model layout="inline">
<a-form-model-item label="选择日期"> <a-form-model-item label="选择日期" :class="getIsLight?'lightSy':'dark'">
<a-month-picker style="width: 146px" :allowClear="false" v-model="selTime[0]" valueFormat="YYYY-MM" placeholder="开始日期"></a-month-picker> <a-month-picker style="width: 146px" :allowClear="false" v-model="selTime[0]" valueFormat="YYYY-MM" placeholder="开始日期"></a-month-picker>
<a-month-picker style="width: 146px" :allowClear="false" v-model="selTime[1]" valueFormat="YYYY-MM" placeholder="结束日期"></a-month-picker> <a-month-picker style="width: 146px" :allowClear="false" v-model="selTime[1]" valueFormat="YYYY-MM" placeholder="结束日期"></a-month-picker>
</a-form-model-item> </a-form-model-item>
@ -69,7 +73,7 @@
import {getCountryS,getPriceRangeS,getSpecName1,getSeatS,getDisplacementS,getEnergyS} from "@/api/SaleRankMarketCommon"; import {getCountryS,getPriceRangeS,getSpecName1,getSeatS,getDisplacementS,getEnergyS} from "@/api/SaleRankMarketCommon";
import {getSalesCompetitionALLList,getSalesCompetitionList,getSalesCompetitionAnalysis} from "@/api/SaleRankMarket"; import {getSalesCompetitionALLList,getSalesCompetitionList,getSalesCompetitionAnalysis} from "@/api/SaleRankMarket";
import createOpt from "./opt" import createOpt from "./opt"
import createOptLight from "./optLight" import createOpt2 from "./optLight"
import {getCheZhuLatestTime} from "@/api/SaleRank" import {getCheZhuLatestTime} from "@/api/SaleRank"
export default { export default {
name: 'CitySale', name: 'CitySale',
@ -81,8 +85,7 @@ export default {
sEnergyS: '', sEnergyS: '',
sPriceRangeS: '', sPriceRangeS: '',
sDisplacementS: '', sDisplacementS: '',
sSerieName: '', // sSeatS: '',
sSeatS: '',
sSpecName1: '', sSpecName1: '',
sTimeType: 4, sTimeType: 4,
sStartTime: '', sStartTime: '',
@ -94,7 +97,6 @@ export default {
prices: [], prices: [],
specs: [], specs: [],
specs2: [], specs2: [],
series: [], //
displacements: [], displacements: [],
seats: [], seats: [],
selTime: ['',''], selTime: ['',''],
@ -154,14 +156,13 @@ export default {
sPriceRangeS: this.prices.join(','), sPriceRangeS: this.prices.join(','),
sDisplacementS: this.displacements.join(','), sDisplacementS: this.displacements.join(','),
sSeatS: this.seats.join(','), sSeatS: this.seats.join(','),
sSerieName: this.seriesList.join(','),
sSpecName1: this.specs.join(','), sSpecName1: this.specs.join(','),
sSpecName2: this.specs2.join(','), sSpecName2: this.specs2.join(','),
sTimeType: 4, sTimeType: 4,
sStartTime: this.selTime[0], sStartTime: this.selTime[0],
sEndTime: this.selTime[1], sEndTime: this.selTime[1],
} }
getSalesCompetitionList(obj).then(res => { getSalesCompetitionALLList(obj).then(res => {
let data = res.data; let data = res.data;
// [ ['total'],[] ] // [ ['total'],[] ]
let arr = []; let arr = [];
@ -174,7 +175,7 @@ export default {
}); });
this.totalData = arr; this.totalData = arr;
this.opt = createOpt(this.totalData, this.extraData); this.opt = createOpt(this.totalData, this.extraData);
this.opt2 = createOptLight(this.totalData, this.extraData) this.opt2 = createOpt2(this.totalData, this.extraData)
}) })
}, },
// //
@ -200,7 +201,7 @@ export default {
}); });
this.extraData = extraArr; this.extraData = extraArr;
this.opt = createOpt(this.totalData, this.extraData); this.opt = createOpt(this.totalData, this.extraData);
this.opt2 = createOptLight(this.totalData, this.extraData) this.opt2 = createOpt2(this.totalData, this.extraData)
}) })
this.modelShow = false; this.modelShow = false;
}, },
@ -210,7 +211,7 @@ export default {
if(this.seriesList.length == 0) { if(this.seriesList.length == 0) {
this.extraData = []; this.extraData = [];
this.opt = createOpt(this.totalData, this.extraData); this.opt = createOpt(this.totalData, this.extraData);
this.opt2 = createOptLight(this.totalData, this.extraData) this.opt2 = createOpt2(this.totalData, this.extraData)
} else { } else {
let obj = { let obj = {
token: this.form.token, token: this.form.token,
@ -229,10 +230,30 @@ export default {
}); });
this.extraData = extraArr; this.extraData = extraArr;
this.opt = createOpt(this.totalData, this.extraData); this.opt = createOpt(this.totalData, this.extraData);
this.opt2 = createOptLight(this.totalData, this.extraData) this.opt2 = createOpt2(this.totalData, this.extraData)
}) })
} }
}, },
report() {
let obj = {
token: this.form.token,
sCountryS: this.countries.join(','),
sEnergyS: this.energies.join(','),
sPriceRangeS: this.prices.join(','),
sDisplacementS: this.displacements.join(','),
sSeatS: this.seats.join(','),
sSpecName1: this.specs.join(','),
sSpecName2: this.specs2.join(','),
sTimeType: 4,
sStartTime: this.selTime[0],
sEndTime: this.selTime[1],
isExcel: 1,
}
getSalesCompetitionALLList(obj).then(res => {
let data = res.data;
window.open(data);
})
}
} }
} }
</script> </script>
@ -253,4 +274,20 @@ export default {
height: 1060px; height: 1060px;
} }
} }
.mcomp-light {
width: 1552px;
background: #fff;
// height: 460px;
border: 2px solid #0f2a4d;
.d2 {
display: flex;
justify-content: flex-start;
padding: 8px 16px 0px 16px;
}
.d3 {
// padding: 0px 16px 16px 16px;
width: 100%;
height: 1060px;
}
}
</style> </style>

@ -1,5 +1,3 @@
import * as echarts from "echarts";
import { bigNumberTransform } from "@/utils/gol/dataTool"
export default function createOpt(data = [],extraData = []) { export default function createOpt(data = [],extraData = []) {
return { return {
grid: { grid: {
@ -66,4 +64,4 @@ export default function createOpt(data = [],extraData = []) {
}, },
] ]
} }
} }

@ -64,4 +64,4 @@ export default function createOptLight(data = [],extraData = []) {
}, },
] ]
} }
} }

@ -3,6 +3,7 @@
<totalTop20></totalTop20> <totalTop20></totalTop20>
<totalPassengerVehicle></totalPassengerVehicle> <totalPassengerVehicle></totalPassengerVehicle>
<totalTraditionCar></totalTraditionCar> <totalTraditionCar></totalTraditionCar>
<totalNewEnergyCar></totalNewEnergyCar>
</div> </div>
</template> </template>
@ -10,11 +11,13 @@
import totalTop20 from "./totalTop20" import totalTop20 from "./totalTop20"
import totalPassengerVehicle from "./totalPassengerVehicle" import totalPassengerVehicle from "./totalPassengerVehicle"
import totalTraditionCar from "./totalTraditionCar" import totalTraditionCar from "./totalTraditionCar"
import totalNewEnergyCar from "./totalNewEnergyCar"
export default { export default {
components: { components: {
totalTop20, totalTop20,
totalPassengerVehicle, totalPassengerVehicle,
totalTraditionCar totalTraditionCar,
totalNewEnergyCar
}, },
name: 'mscTotal', name: 'mscTotal',
data() { data() {

@ -0,0 +1,124 @@
<template>
<div class="tpsv-outter" :style="getIsLight?{background: '#FFF'}:{}">
<v-label-div v-if="!getIsLight" title="新能源车">
<a-button type="primary" @click="report"></a-button>
</v-label-div>
<v-label-div-light v-else title="新能源车" class="lightSy">
<a-button type="primary" @click="report"></a-button>
</v-label-div-light>
<div class="d2">
<a-form-model :class="getIsLight?'lightSy':'dark'" layout="inline">
<a-form-model-item label="选择年份">
<a-select style="width: 146px" v-model="yearNumber" @change="yearChange">
<a-select-option v-for="(item,index) in yearList" :key="index" :value='item'>{{item}}</a-select-option>
</a-select>
</a-form-model-item>
</a-form-model>
</div>
<div v-if="!getIsLight" class="d3">
<v-echarts :opt="opt"></v-echarts>
</div>
<div v-else class="d3">
<v-echarts :opt="opt2"></v-echarts>
</div>
</div>
</template>
<script>
import createOpt from './opt'
import createOptLight from './optLight'
import {getSalesGrowthRatioByFuel} from "@/api/SaleRankMarket";
import {getCheZhuLatestTime} from "@/api/SaleRank"
export default {
name: 'totalPassengerVehicle',
data() {
return {
form: {
token: '',
sTimeType: 4,
sStartTime: '',
sEndTime: '',
},
yearNumber: 0,
selTime: ['',''],
opt: {},
opt2: {},
yearList: []
}
},
created() {
this.form.token = this.getToken;
getCheZhuLatestTime({token: this.form.token}).then(res => {
this.form.sEndTime = res.data;
this.yearNumber = res.data.slice(0,4) * 1;
let currYear = res.data.slice(0,4) * 1;
this.yearList = [currYear, currYear-1, currYear-2 ,currYear-3 ,currYear-4]
this.form.sStartTime = (currYear-1) + '-01';
this.getData()
})
},
methods: {
getData() {
let obj = {
token: this.form.token,
sTimeType: 4,
sStartTime: this.form.sStartTime,
sEndTime: this.form.sEndTime,
}
getSalesGrowthRatioByFuel(obj).then(res => {
let data = res.data;
let firstYearData = []; //0 - 11 count
let secondYearData = []; //12+ count
let percent = []; //12+ YearOnYearGrowth
for(let i = 0;i<data.length;i++) {
if(i < 12) {
firstYearData.push(data[i].Count)
} else {
secondYearData.push(data[i].Count);
percent.push(data[i].YearOnYearGrowth)
}
};
this.opt = createOpt(firstYearData,secondYearData,percent,this.yearNumber)
this.opt2 = createOptLight(firstYearData,secondYearData,percent,this.yearNumber)
});
},
report() {
let obj = {
token: this.form.token,
sTimeType: 4,
sStartTime: this.form.sStartTime,
sEndTime: this.form.sEndTime,
isExcel: 1,
};
getSalesGrowthRatioByFuel(obj).then(res => {
let data = res.data;
window.open(data);
})
},
yearChange() {
this.form.sStartTime = (this.yearNumber-1) + '-01';
this.form.sEndTime = (this.yearNumber) + '-12';
this.getData()
}
}
}
</script>
<style lang="less">
.tpsv-outter {
width: 1552px;
height: 532px;
margin-top: 16px;
border: 2px solid #0f2a4d;
.d2 {
display: flex;
justify-content: flex-start;
padding: 8px 16px 0px 16px;
}
.d3 {
// padding: 0px 16px 16px 16px;
width: 100%;
height: calc(100% - 96px);
}
}
</style>

@ -0,0 +1,156 @@
import { bigNumberTransform } from "@/utils/gol/dataTool"
import * as echarts from "echarts";
export default function createOpt(firstData = [], secondData = [], percent = [], yearNumber) {
return {
tooltip: {
trigger: "axis",
backgroundColor: "#08182F",
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
},
borderColor: "#3373CC",
textStyle: {
color: "#fff", //设置文字颜色
},
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
},
grid: {
left: 10,
right: 10,
bottom: 10,
containLabel: true
},
legend: {
textStyle: { //图例文字的样式
color: '#fff',
fontSize: 10
},
y: 10,
x: 10,
itemWidth: 12,
itemHeight: 12,
borderRadius: 1, //圆角半径
},
xAxis: [
{
type: 'category',
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月',],
axisPointer: {
type: 'shadow'
},
axisLabel: {
color: '#FFF'
}
}
],
yAxis: [
{
type: 'value',
axisLabel: {
formatter: (value) => {
return bigNumberTransform(value);
},
color: '#FFF'
},
splitLine:{
show:false
},
},
{
type: 'value',
axisLabel: {
formatter: '{value}%',
color: '#FFF'
},
splitLine:{
show:false
},
}
],
series: [
{
name: yearNumber - 1,
type: 'bar',
barWidth: 20,
tooltip: {
valueFormatter: function (value) {
return value;
}
},
itemStyle: {
normal: {
//柱体的颜色
//右1000表示从正右开始向左渐变
color: function () {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#3373CC'
},
{
offset: 1,
color: '#3E8CF940'
}
], false);
}
}
},
label: {
show: true,
position: 'top',
color: '#FFF'
},
data: firstData
},
{
name: yearNumber,
type: 'bar',
barWidth: 20,
tooltip: {
valueFormatter: function (value) {
return value;
}
},
itemStyle: {
normal: {
//柱体的颜色
//右1000表示从正右开始向左渐变
color: function () {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#54BF93'
},
{
offset: 1,
color: '#61DDAA30'
}
], false);
}
}
},
label: {
show: true,
position: 'top',
color: '#FFF'
},
data: secondData
},
{
name: '同比',
type: 'line',
yAxisIndex: 1,
tooltip: {
valueFormatter: function (value) {
return value+'%';
}
},
data: percent
}
]
}
}

@ -0,0 +1,156 @@
import { bigNumberTransform } from "@/utils/gol/dataTool"
import * as echarts from "echarts";
export default function createOptLight(firstData = [], secondData = [], percent = [], yearNumber) {
return {
tooltip: {
trigger: "axis",
backgroundColor: "#08182F",
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
},
borderColor: "#3373CC",
textStyle: {
color: "#fff", //设置文字颜色
},
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
},
grid: {
left: 10,
right: 10,
bottom: 10,
containLabel: true
},
legend: {
textStyle: { //图例文字的样式
color: '#000',
fontSize: 10
},
y: 10,
x: 10,
itemWidth: 12,
itemHeight: 12,
borderRadius: 1, //圆角半径
},
xAxis: [
{
type: 'category',
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月',],
axisPointer: {
type: 'shadow'
},
axisLabel: {
color: '#000'
}
}
],
yAxis: [
{
type: 'value',
axisLabel: {
formatter: (value) => {
return bigNumberTransform(value);
},
color: '#000'
},
splitLine:{
show:false
},
},
{
type: 'value',
axisLabel: {
formatter: '{value}%',
color: '#000'
},
splitLine:{
show:false
},
}
],
series: [
{
name: yearNumber - 1,
type: 'bar',
barWidth: 20,
tooltip: {
valueFormatter: function (value) {
return value;
}
},
itemStyle: {
normal: {
//柱体的颜色
//右1000表示从正右开始向左渐变
color: function () {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#3373CC'
},
{
offset: 1,
color: '#3E8CF940'
}
], false);
}
}
},
label: {
show: true,
position: 'top',
color: '#000'
},
data: firstData
},
{
name: yearNumber,
type: 'bar',
barWidth: 20,
tooltip: {
valueFormatter: function (value) {
return value;
}
},
itemStyle: {
normal: {
//柱体的颜色
//右1000表示从正右开始向左渐变
color: function () {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#54BF93'
},
{
offset: 1,
color: '#61DDAA30'
}
], false);
}
}
},
label: {
show: true,
position: 'top',
color: '#000'
},
data: secondData
},
{
name: '同比',
type: 'line',
yAxisIndex: 1,
tooltip: {
valueFormatter: function (value) {
return value+'%';
}
},
data: percent
}
]
}
}

@ -1,7 +1,20 @@
<template> <template>
<div class="tpsv-outter" :style="getIsLight?{background: '#FFF'}:{}"> <div class="tpsv-outter" :style="getIsLight?{background: '#FFF'}:{}">
<v-label-div v-if="!getIsLight" title="狭义乘用车"></v-label-div> <v-label-div v-if="!getIsLight" title="狭义乘用车">
<v-label-div-light v-else title="狭义乘用车"></v-label-div-light> <a-button type="primary" @click="report"></a-button>
</v-label-div>
<v-label-div-light v-else title="狭义乘用车" class="lightSy">
<a-button type="primary" @click="report"></a-button>
</v-label-div-light>
<div class="d2">
<a-form-model :class="getIsLight?'lightSy':'dark'" layout="inline">
<a-form-model-item label="选择年份">
<a-select style="width: 146px" v-model="yearNumber" @change="yearChange">
<a-select-option v-for="(item,index) in yearList" :key="index" :value='item'>{{item}}</a-select-option>
</a-select>
</a-form-model-item>
</a-form-model>
</div>
<div v-if="!getIsLight" class="d3"> <div v-if="!getIsLight" class="d3">
<v-echarts :opt="opt"></v-echarts> <v-echarts :opt="opt"></v-echarts>
</div> </div>
@ -26,21 +39,33 @@ export default {
sStartTime: '', sStartTime: '',
sEndTime: '', sEndTime: '',
}, },
yearNumber: 0,
selTime: ['',''],
opt: {}, opt: {},
opt2: {}, opt2: {},
yearList: []
} }
}, },
created() { created() {
this.form.token = this.getToken; this.form.token = this.getToken;
getCheZhuLatestTime({token: this.form.token}).then(res => { getCheZhuLatestTime({token: this.form.token}).then(res => {
this.form.sStartTime = '2021-01';
this.form.sEndTime = res.data; this.form.sEndTime = res.data;
this.yearNumber = res.data.slice(0,4) * 1;
let currYear = res.data.slice(0,4) * 1;
this.yearList = [currYear, currYear-1, currYear-2 ,currYear-3 ,currYear-4]
this.form.sStartTime = (currYear-1) + '-01';
this.getData() this.getData()
}) })
}, },
methods: { methods: {
getData() { getData() {
getSalesGrowthRatio(this.form).then(res => { let obj = {
token: this.form.token,
sTimeType: 4,
sStartTime: this.form.sStartTime,
sEndTime: this.form.sEndTime,
}
getSalesGrowthRatio(obj).then(res => {
let data = res.data; let data = res.data;
let firstYearData = []; //0 - 11 count let firstYearData = []; //0 - 11 count
let secondYearData = []; //12+ count let secondYearData = []; //12+ count
@ -53,10 +78,28 @@ export default {
percent.push(data[i].YearOnYearGrowth) percent.push(data[i].YearOnYearGrowth)
} }
}; };
this.opt = createOpt(firstYearData,secondYearData,percent) this.opt = createOpt(firstYearData,secondYearData,percent,this.yearNumber)
this.opt2 = createOptLight(firstYearData,secondYearData,percent) this.opt2 = createOptLight(firstYearData,secondYearData,percent,this.yearNumber)
});
},
report() {
let obj = {
token: this.form.token,
sTimeType: 4,
sStartTime: this.form.sStartTime,
sEndTime: this.form.sEndTime,
isExcel: 1,
};
getSalesGrowthRatio(obj).then(res => {
let data = res.data;
window.open(data);
}) })
}, },
yearChange() {
this.form.sStartTime = (this.yearNumber-1) + '-01';
this.form.sEndTime = (this.yearNumber) + '-12';
this.getData()
}
} }
} }
</script> </script>
@ -64,7 +107,7 @@ export default {
<style lang="less"> <style lang="less">
.tpsv-outter { .tpsv-outter {
width: 1552px; width: 1552px;
height: 492px; height: 532px;
margin-top: 16px; margin-top: 16px;
border: 2px solid #0f2a4d; border: 2px solid #0f2a4d;
.d2 { .d2 {
@ -75,7 +118,7 @@ export default {
.d3 { .d3 {
// padding: 0px 16px 16px 16px; // padding: 0px 16px 16px 16px;
width: 100%; width: 100%;
height: calc(100% - 48px); height: calc(100% - 96px);
} }
} }
</style> </style>

@ -1,7 +1,7 @@
import { bigNumberTransform } from "@/utils/gol/dataTool" import { bigNumberTransform } from "@/utils/gol/dataTool"
import * as echarts from "echarts"; import * as echarts from "echarts";
export default function createOpt(firstData = [], secondData = [], percent = []) { export default function createOpt(firstData = [], secondData = [], percent = [], yearNumber) {
return { return {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
@ -73,7 +73,7 @@ export default function createOpt(firstData = [], secondData = [], percent = [])
], ],
series: [ series: [
{ {
name: '2021', name: yearNumber - 1,
type: 'bar', type: 'bar',
barWidth: 20, barWidth: 20,
tooltip: { tooltip: {
@ -107,7 +107,7 @@ export default function createOpt(firstData = [], secondData = [], percent = [])
data: firstData data: firstData
}, },
{ {
name: '2022', name: yearNumber,
type: 'bar', type: 'bar',
barWidth: 20, barWidth: 20,
tooltip: { tooltip: {

@ -1,7 +1,7 @@
import { bigNumberTransform } from "@/utils/gol/dataTool" import { bigNumberTransform } from "@/utils/gol/dataTool"
import * as echarts from "echarts"; import * as echarts from "echarts";
export default function createOptLight(firstData = [], secondData = [], percent = []) { export default function createOptLight(firstData = [], secondData = [], percent = [], yearNumber) {
return { return {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
@ -73,7 +73,7 @@ export default function createOptLight(firstData = [], secondData = [], percent
], ],
series: [ series: [
{ {
name: '2021', name: yearNumber - 1,
type: 'bar', type: 'bar',
barWidth: 20, barWidth: 20,
tooltip: { tooltip: {
@ -107,7 +107,7 @@ export default function createOptLight(firstData = [], secondData = [], percent
data: firstData data: firstData
}, },
{ {
name: '2022', name: yearNumber,
type: 'bar', type: 'bar',
barWidth: 20, barWidth: 20,
tooltip: { tooltip: {

@ -1,16 +1,18 @@
<template> <template>
<div class="tp20-outter" :style="getIsLight?{background: '#FFF'}:{}"> <div class="tp20-outter" :style="getIsLight?{background: '#FFF'}:{}">
<v-label-div v-if="!getIsLight" title="品牌销量排行榜TOP20"> <v-label-div v-if="!getIsLight" :title="tValue==0?'品牌销量排行榜TOP20':'车型销量排行榜TOP20'">
<v-tab-group :value="tValue" :style="{ background: 'transparent' }" :btns="btnTimes" @change="handlerType"></v-tab-group> <v-tab-group :value="tValue" :style="{ background: 'transparent' }" :btns="btnTimes" @change="handlerType"></v-tab-group>
<a-button type="primary" @click="report"></a-button>
</v-label-div> </v-label-div>
<v-label-div-light v-else title="品牌销量排行榜TOP20"> <v-label-div-light v-else :title="tValue==0?'品牌销量排行榜TOP20':'车型销量排行榜TOP20'" class="lightSy">
<v-tab-group-light :value="tValue" :style="{ background: 'transparent' }" :btns="btnTimes" @change="handlerType"></v-tab-group-light> <v-tab-group-light :value="tValue" :style="{ background: 'transparent' }" :btns="btnTimes" @change="handlerType"></v-tab-group-light>
<a-button type="primary" @click="report"></a-button>
</v-label-div-light> </v-label-div-light>
<div class="d2"> <div class="d2">
<a-form-model :class="getIsLight?'lightSy':'dark'" layout="inline"> <a-form-model :class="getIsLight?'lightSy':'dark'" layout="inline">
<a-form-model-item label="选择日期"> <a-form-model-item label="选择日期">
<a-month-picker style="width: 146px" :allowClear="false" v-model="selTime[0]" valueFormat="YYYY-MM" placeholder="开始日期"></a-month-picker> <a-month-picker style="width: 146px" @change="getData" :allowClear="false" v-model="selTime[0]" valueFormat="YYYY-MM" placeholder="开始日期"></a-month-picker>
<a-month-picker style="width: 146px" :allowClear="false" v-model="selTime[1]" valueFormat="YYYY-MM" placeholder="结束日期"></a-month-picker> <a-month-picker style="width: 146px" @change="getData" :allowClear="false" v-model="selTime[1]" valueFormat="YYYY-MM" placeholder="结束日期"></a-month-picker>
</a-form-model-item> </a-form-model-item>
</a-form-model> </a-form-model>
</div> </div>
@ -96,6 +98,26 @@ export default {
this.tValue = index; this.tValue = index;
this.getData(); this.getData();
}, },
report() {
let obj = {
token: this.form.token,
sTimeType: 4,
sStartTime: this.selTime[0],
sEndTime: this.selTime[1],
isExcel: 1,
};
if(this.tValue == 0) {
getSalesBrandTop20(obj).then(res => {
let data = res.data;
window.open(data);
})
} else {
getSalesCarseriesTop20(obj).then(res => {
let data = res.data;
window.open(data);
})
}
}
} }
} }
</script> </script>

@ -11,7 +11,7 @@ import {doStr} from "@/utils/gol/dataTool"
import { bigNumberTransform } from "@/utils/gol/dataTool" import { bigNumberTransform } from "@/utils/gol/dataTool"
// let colors = ['rgba(84,111,197,1)', 'rgba(145,203,116,1)', 'rgba(90,203,156,1)', 'rgba(248,200,87,1)', 'rgba(237,101,101,1)', "rgba(114,191,222,1)", 'rgba(58,162,114,1)', 'rgba(251,131,81,1)'] // let colors = ['rgba(84,111,197,1)', 'rgba(145,203,116,1)', 'rgba(90,203,156,1)', 'rgba(248,200,87,1)', 'rgba(237,101,101,1)', "rgba(114,191,222,1)", 'rgba(58,162,114,1)', 'rgba(251,131,81,1)']
// let colors2 = ['rgba(84,111,197,0.6)', 'rgba(145,203,116,0.6)', 'rgba(90,203,156,0.6)', 'rgba(248,200,87,0.6)', 'rgba(237,101,101,0.6)', "rgba(114,191,222,0.6)", 'rgba(58,162,114,0.6)', 'rgba(251,131,81,0.6)'] // let colors2 = ['rgba(84,111,197,0.6)', 'rgba(145,203,116,0.6)', 'rgba(90,203,156,0.6)', 'rgba(248,200,87,0.6)', 'rgba(237,101,101,0.6)', "rgba(114,191,222,0.6)", 'rgba(58,162,114,0.6)', 'rgba(251,131,81,0.6)']
let colors = ['#5B8FF9','#7DAAFF','#9AC5FF','#B9E2FF','#3A9EC0','#5BB9DB','#78D4F8','#63AECC','#19A576','#43C090','#43C090','#9DF5CA'] let colors = ['#5B8FF9','#7DAAFF','#9AC5FF','#B9E2FF','#3A9EC0','#5BB9DB','#78D4F8','#63AECC','#19A576','#43C090','#43C090','#9DF5CA','#5B8FF9','#7DAAFF','#9AC5FF','#B9E2FF','#3A9EC0','#5BB9DB','#78D4F8','#63AECC','#19A576','#43C090','#43C090','#9DF5CA']
function createData(ds = []) { function createData(ds = []) {
let arr = []; let arr = [];
for (let i = 0; i < ds.length; i++) { for (let i = 0; i < ds.length; i++) {

@ -11,7 +11,7 @@ import {doStr} from "@/utils/gol/dataTool"
import { bigNumberTransform } from "@/utils/gol/dataTool" import { bigNumberTransform } from "@/utils/gol/dataTool"
// let colors = ['rgba(84,111,197,1)', 'rgba(145,203,116,1)', 'rgba(90,203,156,1)', 'rgba(248,200,87,1)', 'rgba(237,101,101,1)', "rgba(114,191,222,1)", 'rgba(58,162,114,1)', 'rgba(251,131,81,1)'] // let colors = ['rgba(84,111,197,1)', 'rgba(145,203,116,1)', 'rgba(90,203,156,1)', 'rgba(248,200,87,1)', 'rgba(237,101,101,1)', "rgba(114,191,222,1)", 'rgba(58,162,114,1)', 'rgba(251,131,81,1)']
// let colors2 = ['rgba(84,111,197,0.6)', 'rgba(145,203,116,0.6)', 'rgba(90,203,156,0.6)', 'rgba(248,200,87,0.6)', 'rgba(237,101,101,0.6)', "rgba(114,191,222,0.6)", 'rgba(58,162,114,0.6)', 'rgba(251,131,81,0.6)'] // let colors2 = ['rgba(84,111,197,0.6)', 'rgba(145,203,116,0.6)', 'rgba(90,203,156,0.6)', 'rgba(248,200,87,0.6)', 'rgba(237,101,101,0.6)', "rgba(114,191,222,0.6)", 'rgba(58,162,114,0.6)', 'rgba(251,131,81,0.6)']
let colors = ['#5B8FF9','#7DAAFF','#9AC5FF','#B9E2FF','#3A9EC0','#5BB9DB','#78D4F8','#63AECC','#19A576','#43C090','#43C090','#9DF5CA'] let colors = ['#5B8FF9','#7DAAFF','#9AC5FF','#B9E2FF','#3A9EC0','#5BB9DB','#78D4F8','#63AECC','#19A576','#43C090','#43C090','#9DF5CA','#5B8FF9','#7DAAFF','#9AC5FF','#B9E2FF','#3A9EC0','#5BB9DB','#78D4F8','#63AECC','#19A576','#43C090','#43C090','#9DF5CA']
function createData(ds = []) { function createData(ds = []) {
let arr = []; let arr = [];
for (let i = 0; i < ds.length; i++) { for (let i = 0; i < ds.length; i++) {

@ -1,7 +1,20 @@
<template> <template>
<div class="ttc-outter" :style="getIsLight?{background: '#FFF'}:{}"> <div class="ttc-outter" :style="getIsLight?{background: '#FFF'}:{}">
<v-label-div v-if="!getIsLight" title="传统燃油车市场"></v-label-div> <v-label-div v-if="!getIsLight" title="传统燃油车">
<v-label-div-light v-else title="传统燃油车市场"></v-label-div-light> <a-button type="primary" @click="report"></a-button>
</v-label-div>
<v-label-div-light v-else title="传统燃油车" class="lightSy">
<a-button type="primary" @click="report"></a-button>
</v-label-div-light>
<div class="d2">
<a-form-model :class="getIsLight?'lightSy':'dark'" layout="inline">
<a-form-model-item label="选择年份">
<a-select style="width: 146px" v-model="yearNumber" @change="yearChange">
<a-select-option v-for="(item,index) in yearList" :key="index" :value='item'>{{item}}</a-select-option>
</a-select>
</a-form-model-item>
</a-form-model>
</div>
<div v-if="!getIsLight" class="d3"> <div v-if="!getIsLight" class="d3">
<v-echarts :opt="opt"></v-echarts> <v-echarts :opt="opt"></v-echarts>
</div> </div>
@ -26,21 +39,33 @@ export default {
sStartTime: '', sStartTime: '',
sEndTime: '', sEndTime: '',
}, },
yearNumber: 0,
selTime: ['',''],
opt: {}, opt: {},
opt2: {}, opt2: {},
yearList: []
} }
}, },
created() { created() {
this.form.token = this.getToken; this.form.token = this.getToken;
getCheZhuLatestTime({token: this.form.token}).then(res => { getCheZhuLatestTime({token: this.form.token}).then(res => {
this.form.sStartTime = '2021-01';
this.form.sEndTime = res.data; this.form.sEndTime = res.data;
this.yearNumber = res.data.slice(0,4) * 1;
let currYear = res.data.slice(0,4) * 1;
this.yearList = [currYear, currYear-1, currYear-2 ,currYear-3 ,currYear-4]
this.form.sStartTime = (currYear-1) + '-01';
this.getData() this.getData()
}) })
}, },
methods: { methods: {
getData() { getData() {
getSalesGrowthRatioByFuel(this.form).then(res => { let obj = {
token: this.form.token,
sTimeType: 4,
sStartTime: this.form.sStartTime,
sEndTime: this.form.sEndTime,
}
getSalesGrowthRatioByFuel(obj).then(res => {
let data = res.data; let data = res.data;
let firstYearData = []; //0 - 11 count let firstYearData = []; //0 - 11 count
let secondYearData = []; //12+ count let secondYearData = []; //12+ count
@ -53,10 +78,28 @@ export default {
percent.push(data[i].YearOnYearGrowth) percent.push(data[i].YearOnYearGrowth)
} }
}; };
this.opt = createOpt(firstYearData,secondYearData,percent) this.opt = createOpt(firstYearData,secondYearData,percent,this.yearNumber)
this.opt2 = createOptLight(firstYearData,secondYearData,percent) this.opt2 = createOptLight(firstYearData,secondYearData,percent,this.yearNumber)
});
},
report() {
let obj = {
token: this.form.token,
sTimeType: 4,
sStartTime: this.form.sStartTime,
sEndTime: this.form.sEndTime,
isExcel: 1,
};
getSalesGrowthRatioByFuel(obj).then(res => {
let data = res.data;
window.open(data);
}) })
}, },
yearChange() {
this.form.sStartTime = (this.yearNumber-1) + '-01';
this.form.sEndTime = (this.yearNumber) + '-12';
this.getData()
}
} }
} }
</script> </script>
@ -64,7 +107,7 @@ export default {
<style lang="less"> <style lang="less">
.ttc-outter { .ttc-outter {
width: 1552px; width: 1552px;
height: 492px; height: 532px;
margin-top: 16px; margin-top: 16px;
border: 2px solid #0f2a4d; border: 2px solid #0f2a4d;
.d2 { .d2 {
@ -75,7 +118,7 @@ export default {
.d3 { .d3 {
// padding: 0px 16px 16px 16px; // padding: 0px 16px 16px 16px;
width: 100%; width: 100%;
height: calc(100% - 48px); height: calc(100% - 96px);
} }
} }
</style> </style>

@ -1,7 +1,7 @@
import { bigNumberTransform } from "@/utils/gol/dataTool" import { bigNumberTransform } from "@/utils/gol/dataTool"
import * as echarts from "echarts"; import * as echarts from "echarts";
export default function createOpt(firstData = [], secondData = [], percent = []) { export default function createOpt(firstData = [], secondData = [], percent = [], yearNumber) {
return { return {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
@ -73,7 +73,7 @@ export default function createOpt(firstData = [], secondData = [], percent = [])
], ],
series: [ series: [
{ {
name: '2021', name: yearNumber - 1,
type: 'bar', type: 'bar',
barWidth: 20, barWidth: 20,
tooltip: { tooltip: {
@ -107,7 +107,7 @@ export default function createOpt(firstData = [], secondData = [], percent = [])
data: firstData data: firstData
}, },
{ {
name: '2022', name: yearNumber,
type: 'bar', type: 'bar',
barWidth: 20, barWidth: 20,
tooltip: { tooltip: {

@ -1,7 +1,7 @@
import { bigNumberTransform } from "@/utils/gol/dataTool" import { bigNumberTransform } from "@/utils/gol/dataTool"
import * as echarts from "echarts"; import * as echarts from "echarts";
export default function createOptLight(firstData = [], secondData = [], percent = []) { export default function createOptLight(firstData = [], secondData = [], percent = [], yearNumber) {
return { return {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
@ -73,7 +73,7 @@ export default function createOptLight(firstData = [], secondData = [], percent
], ],
series: [ series: [
{ {
name: '2021', name: yearNumber - 1,
type: 'bar', type: 'bar',
barWidth: 20, barWidth: 20,
tooltip: { tooltip: {
@ -107,7 +107,7 @@ export default function createOptLight(firstData = [], secondData = [], percent
data: firstData data: firstData
}, },
{ {
name: '2022', name: yearNumber,
type: 'bar', type: 'bar',
barWidth: 20, barWidth: 20,
tooltip: { tooltip: {

@ -103,11 +103,8 @@ export default {
isExcel: 1, isExcel: 1,
}; };
getSalesCountrysTypesE(obj).then(() => { getSalesCountrysTypesE(obj).then(() => {
this.$notification.open({ let data = res.data;
message: `数据生成中`, window.open(data);
description: "请前往个人中心查看下载进度",
placement: "bottomRight",
});
}); });
} }
} }

@ -102,12 +102,9 @@ export default {
sEndTime: this.selTime[1], sEndTime: this.selTime[1],
isExcel: 1, isExcel: 1,
}; };
getSalesEnergyTypesE(obj).then(() => { getSalesEnergyTypesE(obj).then((res) => {
this.$notification.open({ let data = res.data;
message: `数据生成中`, window.open(data);
description: "请前往个人中心查看下载进度",
placement: "bottomRight",
});
}); });
} }
} }

@ -1,17 +1,26 @@
<template> <template>
<div class="ttc-outter" :style="getIsLight?{background: '#FFF'}:{}"> <div class="tpsv-outter" :style="getIsLight?{background: '#FFF'}:{}">
<v-label-div v-if="!getIsLight" title="新能源轿车销量"> <v-label-div v-if="!getIsLight" title="新能源轿车销量">
<a-button type="primary" @click="report"></a-button> <a-button type="primary" @click="report"></a-button>
</v-label-div> </v-label-div>
<v-label-div-light v-else title="新能源轿车销量" class="lightSy"> <v-label-div-light v-else title="新能源轿车销量" class="lightSy">
<a-button type="primary" @click="report"></a-button> <a-button type="primary" @click="report"></a-button>
</v-label-div-light> </v-label-div-light>
<div class="d3" v-if="getIsLight"> <div class="d2">
<v-echarts :opt="opt2"></v-echarts> <a-form-model :class="getIsLight?'lightSy':'dark'" layout="inline">
<a-form-model-item label="选择年份">
<a-select style="width: 146px" v-model="yearNumber" @change="yearChange">
<a-select-option v-for="(item,index) in yearList" :key="index" :value='item'>{{item}}</a-select-option>
</a-select>
</a-form-model-item>
</a-form-model>
</div> </div>
<div class="d3" v-else> <div v-if="!getIsLight" class="d3">
<v-echarts :opt="opt"></v-echarts> <v-echarts :opt="opt"></v-echarts>
</div> </div>
<div v-else class="d3">
<v-echarts :opt="opt2"></v-echarts>
</div>
</div> </div>
</template> </template>
@ -30,21 +39,33 @@ export default {
sStartTime: '', sStartTime: '',
sEndTime: '', sEndTime: '',
}, },
yearNumber: 0,
selTime: ['',''],
opt: {}, opt: {},
opt2: {}, opt2: {},
yearList: []
} }
}, },
created() { created() {
this.form.token = this.getToken; this.form.token = this.getToken;
getCheZhuLatestTime({token: this.form.token}).then(res => { getCheZhuLatestTime({token: this.form.token}).then(res => {
this.form.sStartTime = '2021-01';
this.form.sEndTime = res.data; this.form.sEndTime = res.data;
this.yearNumber = res.data.slice(0,4) * 1;
let currYear = res.data.slice(0,4) * 1;
this.yearList = [currYear, currYear-1, currYear-2 ,currYear-3 ,currYear-4]
this.form.sStartTime = (currYear-1) + '-01';
this.getData() this.getData()
}) })
}, },
methods: { methods: {
getData() { getData() {
getSalesSpecName1TypesBySedanE(this.form).then(res => { let obj = {
token: this.form.token,
sTimeType: 4,
sStartTime: this.form.sStartTime,
sEndTime: this.form.sEndTime,
}
getSalesSpecName1TypesBySedanE(obj).then(res => {
let data = res.data; let data = res.data;
let firstYearData = []; //0 - 11 count let firstYearData = []; //0 - 11 count
let secondYearData = []; //12+ count let secondYearData = []; //12+ count
@ -57,34 +78,36 @@ export default {
percent.push(data[i].YearOnYearGrowth) percent.push(data[i].YearOnYearGrowth)
} }
}; };
this.opt = createOpt(firstYearData,secondYearData,percent) this.opt = createOpt(firstYearData,secondYearData,percent,this.yearNumber)
this.opt2 = createOptLight(firstYearData,secondYearData,percent) this.opt2 = createOptLight(firstYearData,secondYearData,percent,this.yearNumber)
}) });
}, },
report() { report() {
let obj = { let obj = {
token: this.form.token, token: this.form.token,
sTimeType: 4, sTimeType: 4,
sStartTime: this.selTime[0], sStartTime: this.form.sStartTime,
sEndTime: this.selTime[1], sEndTime: this.form.sEndTime,
isExcel: 1, isExcel: 1,
}; };
getSalesSpecName1TypesBySedanE(obj).then(() => { getSalesSpecName1TypesBySedanE(obj).then(res => {
this.$notification.open({ let data = res.data;
message: `数据生成中`, window.open(data);
description: "请前往个人中心查看下载进度", })
placement: "bottomRight", },
}); yearChange() {
}); this.form.sStartTime = (this.yearNumber-1) + '-01';
this.form.sEndTime = (this.yearNumber) + '-12';
this.getData()
} }
} }
} }
</script> </script>
<style lang="less"> <style lang="less">
.ttc-outter { .tpsv-outter {
width: 1552px; width: 1552px;
height: 492px; height: 532px;
margin-top: 16px; margin-top: 16px;
border: 2px solid #0f2a4d; border: 2px solid #0f2a4d;
.d2 { .d2 {
@ -95,7 +118,7 @@ export default {
.d3 { .d3 {
// padding: 0px 16px 16px 16px; // padding: 0px 16px 16px 16px;
width: 100%; width: 100%;
height: calc(100% - 48px); height: calc(100% - 96px);
} }
} }
</style> </style>

@ -1,7 +1,7 @@
import { bigNumberTransform } from "@/utils/gol/dataTool" import { bigNumberTransform } from "@/utils/gol/dataTool"
import * as echarts from "echarts"; import * as echarts from "echarts";
export default function createOpt(firstData = [], secondData = [], percent = []) { export default function createOpt(firstData = [], secondData = [], percent = [], yearNumber) {
return { return {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
@ -73,7 +73,7 @@ export default function createOpt(firstData = [], secondData = [], percent = [])
], ],
series: [ series: [
{ {
name: '2021', name: yearNumber - 1,
type: 'bar', type: 'bar',
barWidth: 20, barWidth: 20,
tooltip: { tooltip: {
@ -107,7 +107,7 @@ export default function createOpt(firstData = [], secondData = [], percent = [])
data: firstData data: firstData
}, },
{ {
name: '2022', name: yearNumber,
type: 'bar', type: 'bar',
barWidth: 20, barWidth: 20,
tooltip: { tooltip: {

@ -1,7 +1,7 @@
import { bigNumberTransform } from "@/utils/gol/dataTool" import { bigNumberTransform } from "@/utils/gol/dataTool"
import * as echarts from "echarts"; import * as echarts from "echarts";
export default function createOptLight(firstData = [], secondData = [], percent = []) { export default function createOptLight(firstData = [], secondData = [], percent = [], yearNumber) {
return { return {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
@ -73,7 +73,7 @@ export default function createOptLight(firstData = [], secondData = [], percent
], ],
series: [ series: [
{ {
name: '2021', name: yearNumber - 1,
type: 'bar', type: 'bar',
barWidth: 20, barWidth: 20,
tooltip: { tooltip: {
@ -107,7 +107,7 @@ export default function createOptLight(firstData = [], secondData = [], percent
data: firstData data: firstData
}, },
{ {
name: '2022', name: yearNumber,
type: 'bar', type: 'bar',
barWidth: 20, barWidth: 20,
tooltip: { tooltip: {

@ -6,12 +6,21 @@
<v-label-div-light v-else title="新能源MPV销量" class="lightSy"> <v-label-div-light v-else title="新能源MPV销量" class="lightSy">
<a-button type="primary" @click="report"></a-button> <a-button type="primary" @click="report"></a-button>
</v-label-div-light> </v-label-div-light>
<div class="d3" v-if="getIsLight"> <div class="d2">
<v-echarts :opt="opt2"></v-echarts> <a-form-model :class="getIsLight?'lightSy':'dark'" layout="inline">
<a-form-model-item label="选择年份">
<a-select style="width: 146px" v-model="yearNumber" @change="yearChange">
<a-select-option v-for="(item,index) in yearList" :key="index" :value='item'>{{item}}</a-select-option>
</a-select>
</a-form-model-item>
</a-form-model>
</div> </div>
<div class="d3" v-else> <div v-if="!getIsLight" class="d3">
<v-echarts :opt="opt"></v-echarts> <v-echarts :opt="opt"></v-echarts>
</div> </div>
<div v-else class="d3">
<v-echarts :opt="opt2"></v-echarts>
</div>
</div> </div>
</template> </template>
@ -30,21 +39,33 @@ export default {
sStartTime: '', sStartTime: '',
sEndTime: '', sEndTime: '',
}, },
yearNumber: 0,
selTime: ['',''],
opt: {}, opt: {},
opt2: {}, opt2: {},
yearList: []
} }
}, },
created() { created() {
this.form.token = this.getToken; this.form.token = this.getToken;
getCheZhuLatestTime({token: this.form.token}).then(res => { getCheZhuLatestTime({token: this.form.token}).then(res => {
this.form.sStartTime = '2021-01';
this.form.sEndTime = res.data; this.form.sEndTime = res.data;
this.yearNumber = res.data.slice(0,4) * 1;
let currYear = res.data.slice(0,4) * 1;
this.yearList = [currYear, currYear-1, currYear-2 ,currYear-3 ,currYear-4]
this.form.sStartTime = (currYear-1) + '-01';
this.getData() this.getData()
}) })
}, },
methods: { methods: {
getData() { getData() {
getSalesSpecName1TypesByMpvE(this.form).then(res => { let obj = {
token: this.form.token,
sTimeType: 4,
sStartTime: this.form.sStartTime,
sEndTime: this.form.sEndTime,
}
getSalesSpecName1TypesByMpvE(obj).then(res => {
let data = res.data; let data = res.data;
let firstYearData = []; //0 - 11 count let firstYearData = []; //0 - 11 count
let secondYearData = []; //12+ count let secondYearData = []; //12+ count
@ -57,25 +78,27 @@ export default {
percent.push(data[i].YearOnYearGrowth) percent.push(data[i].YearOnYearGrowth)
} }
}; };
this.opt = createOpt(firstYearData,secondYearData,percent); this.opt = createOpt(firstYearData,secondYearData,percent,this.yearNumber)
this.opt2 = createOptLight(firstYearData,secondYearData,percent) this.opt2 = createOptLight(firstYearData,secondYearData,percent,this.yearNumber)
}) });
}, },
report() { report() {
let obj = { let obj = {
token: this.form.token, token: this.form.token,
sTimeType: 4, sTimeType: 4,
sStartTime: this.selTime[0], sStartTime: this.form.sStartTime,
sEndTime: this.selTime[1], sEndTime: this.form.sEndTime,
isExcel: 1, isExcel: 1,
}; };
getSalesSpecName1TypesByMpvE(obj).then(() => { getSalesSpecName1TypesByMpvE(obj).then(res => {
this.$notification.open({ let data = res.data;
message: `数据生成中`, window.open(data);
description: "请前往个人中心查看下载进度", })
placement: "bottomRight", },
}); yearChange() {
}); this.form.sStartTime = (this.yearNumber-1) + '-01';
this.form.sEndTime = (this.yearNumber) + '-12';
this.getData()
} }
} }
} }
@ -84,7 +107,7 @@ export default {
<style lang="less"> <style lang="less">
.tpsv-outter { .tpsv-outter {
width: 1552px; width: 1552px;
height: 492px; height: 532px;
margin-top: 16px; margin-top: 16px;
border: 2px solid #0f2a4d; border: 2px solid #0f2a4d;
.d2 { .d2 {
@ -95,7 +118,7 @@ export default {
.d3 { .d3 {
// padding: 0px 16px 16px 16px; // padding: 0px 16px 16px 16px;
width: 100%; width: 100%;
height: calc(100% - 48px); height: calc(100% - 96px);
} }
} }
</style> </style>

@ -1,7 +1,7 @@
import { bigNumberTransform } from "@/utils/gol/dataTool" import { bigNumberTransform } from "@/utils/gol/dataTool"
import * as echarts from "echarts"; import * as echarts from "echarts";
export default function createOpt(firstData = [], secondData = [], percent = []) { export default function createOpt(firstData = [], secondData = [], percent = [], yearNumber) {
return { return {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
@ -73,7 +73,7 @@ export default function createOpt(firstData = [], secondData = [], percent = [])
], ],
series: [ series: [
{ {
name: '2021', name: yearNumber - 1,
type: 'bar', type: 'bar',
barWidth: 20, barWidth: 20,
tooltip: { tooltip: {
@ -107,7 +107,7 @@ export default function createOpt(firstData = [], secondData = [], percent = [])
data: firstData data: firstData
}, },
{ {
name: '2022', name: yearNumber,
type: 'bar', type: 'bar',
barWidth: 20, barWidth: 20,
tooltip: { tooltip: {

@ -1,7 +1,7 @@
import { bigNumberTransform } from "@/utils/gol/dataTool" import { bigNumberTransform } from "@/utils/gol/dataTool"
import * as echarts from "echarts"; import * as echarts from "echarts";
export default function createOptLight(firstData = [], secondData = [], percent = []) { export default function createOptLight(firstData = [], secondData = [], percent = [], yearNumber) {
return { return {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
@ -73,7 +73,7 @@ export default function createOptLight(firstData = [], secondData = [], percent
], ],
series: [ series: [
{ {
name: '2021', name: yearNumber - 1,
type: 'bar', type: 'bar',
barWidth: 20, barWidth: 20,
tooltip: { tooltip: {
@ -107,7 +107,7 @@ export default function createOptLight(firstData = [], secondData = [], percent
data: firstData data: firstData
}, },
{ {
name: '2022', name: yearNumber,
type: 'bar', type: 'bar',
barWidth: 20, barWidth: 20,
tooltip: { tooltip: {

@ -6,12 +6,21 @@
<v-label-div-light v-else title="新能源SUV销量" class="lightSy"> <v-label-div-light v-else title="新能源SUV销量" class="lightSy">
<a-button type="primary" @click="report"></a-button> <a-button type="primary" @click="report"></a-button>
</v-label-div-light> </v-label-div-light>
<div class="d3" v-if="getIsLight"> <div class="d2">
<v-echarts :opt="opt2"></v-echarts> <a-form-model :class="getIsLight?'lightSy':'dark'" layout="inline">
<a-form-model-item label="选择年份">
<a-select style="width: 146px" v-model="yearNumber" @change="yearChange">
<a-select-option v-for="(item,index) in yearList" :key="index" :value='item'>{{item}}</a-select-option>
</a-select>
</a-form-model-item>
</a-form-model>
</div> </div>
<div class="d3" v-else> <div v-if="!getIsLight" class="d3">
<v-echarts :opt="opt"></v-echarts> <v-echarts :opt="opt"></v-echarts>
</div> </div>
<div v-else class="d3">
<v-echarts :opt="opt2"></v-echarts>
</div>
</div> </div>
</template> </template>
@ -30,21 +39,33 @@ export default {
sStartTime: '', sStartTime: '',
sEndTime: '', sEndTime: '',
}, },
yearNumber: 0,
selTime: ['',''],
opt: {}, opt: {},
opt2: {}, opt2: {},
yearList: []
} }
}, },
created() { created() {
this.form.token = this.getToken; this.form.token = this.getToken;
getCheZhuLatestTime({token: this.form.token}).then(res => { getCheZhuLatestTime({token: this.form.token}).then(res => {
this.form.sStartTime = '2021-01';
this.form.sEndTime = res.data; this.form.sEndTime = res.data;
this.yearNumber = res.data.slice(0,4) * 1;
let currYear = res.data.slice(0,4) * 1;
this.yearList = [currYear, currYear-1, currYear-2 ,currYear-3 ,currYear-4]
this.form.sStartTime = (currYear-1) + '-01';
this.getData() this.getData()
}) })
}, },
methods: { methods: {
getData() { getData() {
getSalesSpecName1TypesBySuvE(this.form).then(res => { let obj = {
token: this.form.token,
sTimeType: 4,
sStartTime: this.form.sStartTime,
sEndTime: this.form.sEndTime,
}
getSalesSpecName1TypesBySuvE(obj).then(res => {
let data = res.data; let data = res.data;
let firstYearData = []; //0 - 11 count let firstYearData = []; //0 - 11 count
let secondYearData = []; //12+ count let secondYearData = []; //12+ count
@ -57,25 +78,27 @@ export default {
percent.push(data[i].YearOnYearGrowth) percent.push(data[i].YearOnYearGrowth)
} }
}; };
this.opt = createOpt(firstYearData,secondYearData,percent) this.opt = createOpt(firstYearData,secondYearData,percent,this.yearNumber)
this.opt2 = createOptLight(firstYearData,secondYearData,percent) this.opt2 = createOptLight(firstYearData,secondYearData,percent,this.yearNumber)
}) });
}, },
report() { report() {
let obj = { let obj = {
token: this.form.token, token: this.form.token,
sTimeType: 4, sTimeType: 4,
sStartTime: this.selTime[0], sStartTime: this.form.sStartTime,
sEndTime: this.selTime[1], sEndTime: this.form.sEndTime,
isExcel: 1, isExcel: 1,
}; };
getSalesSpecName1TypesBySuvE(obj).then(() => { getSalesSpecName1TypesBySuvE(obj).then(res => {
this.$notification.open({ let data = res.data;
message: `数据生成中`, window.open(data);
description: "请前往个人中心查看下载进度", })
placement: "bottomRight", },
}); yearChange() {
}); this.form.sStartTime = (this.yearNumber-1) + '-01';
this.form.sEndTime = (this.yearNumber) + '-12';
this.getData()
} }
} }
} }
@ -84,7 +107,7 @@ export default {
<style lang="less"> <style lang="less">
.tpsv-outter { .tpsv-outter {
width: 1552px; width: 1552px;
height: 492px; height: 532px;
margin-top: 16px; margin-top: 16px;
border: 2px solid #0f2a4d; border: 2px solid #0f2a4d;
.d2 { .d2 {
@ -95,7 +118,7 @@ export default {
.d3 { .d3 {
// padding: 0px 16px 16px 16px; // padding: 0px 16px 16px 16px;
width: 100%; width: 100%;
height: calc(100% - 48px); height: calc(100% - 96px);
} }
} }
</style> </style>

@ -1,7 +1,7 @@
import { bigNumberTransform } from "@/utils/gol/dataTool" import { bigNumberTransform } from "@/utils/gol/dataTool"
import * as echarts from "echarts"; import * as echarts from "echarts";
export default function createOpt(firstData = [], secondData = [], percent = []) { export default function createOpt(firstData = [], secondData = [], percent = [], yearNumber) {
return { return {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
@ -73,7 +73,7 @@ export default function createOpt(firstData = [], secondData = [], percent = [])
], ],
series: [ series: [
{ {
name: '2021', name: yearNumber - 1,
type: 'bar', type: 'bar',
barWidth: 20, barWidth: 20,
tooltip: { tooltip: {
@ -107,7 +107,7 @@ export default function createOpt(firstData = [], secondData = [], percent = [])
data: firstData data: firstData
}, },
{ {
name: '2022', name: yearNumber,
type: 'bar', type: 'bar',
barWidth: 20, barWidth: 20,
tooltip: { tooltip: {

@ -1,7 +1,7 @@
import { bigNumberTransform } from "@/utils/gol/dataTool" import { bigNumberTransform } from "@/utils/gol/dataTool"
import * as echarts from "echarts"; import * as echarts from "echarts";
export default function createOptLight(firstData = [], secondData = [], percent = []) { export default function createOptLight(firstData = [], secondData = [], percent = [], yearNumber) {
return { return {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
@ -73,7 +73,7 @@ export default function createOptLight(firstData = [], secondData = [], percent
], ],
series: [ series: [
{ {
name: '2021', name: yearNumber - 1,
type: 'bar', type: 'bar',
barWidth: 20, barWidth: 20,
tooltip: { tooltip: {
@ -107,7 +107,7 @@ export default function createOptLight(firstData = [], secondData = [], percent
data: firstData data: firstData
}, },
{ {
name: '2022', name: yearNumber,
type: 'bar', type: 'bar',
barWidth: 20, barWidth: 20,
tooltip: { tooltip: {

@ -100,16 +100,13 @@ export default {
let obj = { let obj = {
token: this.form.token, token: this.form.token,
sTimeType: 4, sTimeType: 4,
sStartTime: this.selTime[0], sStartTime: this.form.sStartTime,
sEndTime: this.selTime[1], sEndTime: this.form.sEndTime,
isExcel: 1, isExcel: 1,
}; };
getSalesSpecName1TypesE(obj).then(() => { getSalesSpecName1TypesE(obj).then(() => {
this.$notification.open({ let data = res.data;
message: `数据生成中`, window.open(data);
description: "请前往个人中心查看下载进度",
placement: "bottomRight",
});
}); });
} }
} }

@ -84,11 +84,8 @@ export default {
isExcel: 1, isExcel: 1,
}; };
getSalesSpecNameTypesBySedanE(obj).then(() => { getSalesSpecNameTypesBySedanE(obj).then(() => {
this.$notification.open({ let data = res.data;
message: `数据生成中`, window.open(data);
description: "请前往个人中心查看下载进度",
placement: "bottomRight",
});
}); });
} }
} }

@ -84,11 +84,8 @@ export default {
isExcel: 1, isExcel: 1,
}; };
getSalesSpecNameTypesByMpvE(obj).then(() => { getSalesSpecNameTypesByMpvE(obj).then(() => {
this.$notification.open({ let data = res.data;
message: `数据生成中`, window.open(data);
description: "请前往个人中心查看下载进度",
placement: "bottomRight",
});
}); });
} }
} }

@ -84,11 +84,8 @@ export default {
isExcel: 1, isExcel: 1,
}; };
getSalesSpecNameTypesE(obj).then(() => { getSalesSpecNameTypesE(obj).then(() => {
this.$notification.open({ let data = res.data;
message: `数据生成中`, window.open(data);
description: "请前往个人中心查看下载进度",
placement: "bottomRight",
});
}); });
} }
} }

@ -84,11 +84,8 @@ export default {
isExcel: 1, isExcel: 1,
}; };
getSalesSpecNameTypesBySuvE(obj).then(() => { getSalesSpecNameTypesBySuvE(obj).then(() => {
this.$notification.open({ let data = res.data;
message: `数据生成中`, window.open(data);
description: "请前往个人中心查看下载进度",
placement: "bottomRight",
});
}); });
} }
} }

@ -103,11 +103,8 @@ export default {
isExcel: 1, isExcel: 1,
}; };
getSalesCountrysTypes(obj).then(() => { getSalesCountrysTypes(obj).then(() => {
this.$notification.open({ let data = res.data;
message: `数据生成中`, window.open(data);
description: "请前往个人中心查看下载进度",
placement: "bottomRight",
});
}); });
} }
} }

@ -103,11 +103,8 @@ export default {
isExcel: 1, isExcel: 1,
}; };
getSalesSpecNameByPriceRange(obj).then(() => { getSalesSpecNameByPriceRange(obj).then(() => {
this.$notification.open({ let data = res.data;
message: `数据生成中`, window.open(data);
description: "请前往个人中心查看下载进度",
placement: "bottomRight",
});
}); });
} }
} }

@ -97,11 +97,8 @@ export default {
isExcel: 1, isExcel: 1,
}; };
getSalesPriceRangeSBrand(obj).then(() => { getSalesPriceRangeSBrand(obj).then(() => {
this.$notification.open({ let data = res.data;
message: `数据生成中`, window.open(data);
description: "请前往个人中心查看下载进度",
placement: "bottomRight",
});
}); });
} }
} }

@ -105,11 +105,8 @@ export default {
isExcel: 1, isExcel: 1,
}; };
getSalesPriceRangeSTypes(obj).then(() => { getSalesPriceRangeSTypes(obj).then(() => {
this.$notification.open({ let data = res.data;
message: `数据生成中`, window.open(data);
description: "请前往个人中心查看下载进度",
placement: "bottomRight",
});
}); });
} }
} }

@ -84,11 +84,8 @@ export default {
isExcel: 1, isExcel: 1,
}; };
getSalesSpecNameTypesBySedan(obj).then(() => { getSalesSpecNameTypesBySedan(obj).then(() => {
this.$notification.open({ let data = res.data;
message: `数据生成中`, window.open(data);
description: "请前往个人中心查看下载进度",
placement: "bottomRight",
});
}); });
} }
} }

@ -84,11 +84,8 @@ export default {
isExcel: 1, isExcel: 1,
}; };
getSalesSpecNameTypesByMpv(obj).then(() => { getSalesSpecNameTypesByMpv(obj).then(() => {
this.$notification.open({ let data = res.data;
message: `数据生成中`, window.open(data);
description: "请前往个人中心查看下载进度",
placement: "bottomRight",
});
}); });
} }
} }

@ -84,11 +84,8 @@ export default {
isExcel: 1, isExcel: 1,
}; };
getSalesSpecNameTypes(obj).then(() => { getSalesSpecNameTypes(obj).then(() => {
this.$notification.open({ let data = res.data;
message: `数据生成中`, window.open(data);
description: "请前往个人中心查看下载进度",
placement: "bottomRight",
});
}); });
} }
} }

@ -84,11 +84,8 @@ export default {
isExcel: 1, isExcel: 1,
}; };
getSalesSpecNameTypesBySuv(obj).then(() => { getSalesSpecNameTypesBySuv(obj).then(() => {
this.$notification.open({ let data = res.data;
message: `数据生成中`, window.open(data);
description: "请前往个人中心查看下载进度",
placement: "bottomRight",
});
}); });
} }
} }

@ -1,17 +1,26 @@
<template> <template>
<div class="ttc-outter" :style="getIsLight?{background: '#FFF'}:{}"> <div class="tpsv-outter" :style="getIsLight?{background: '#FFF'}:{}">
<v-label-div v-if="!getIsLight" title="轿车销量"> <v-label-div v-if="!getIsLight" title="轿车销量">
<a-button type="primary" @click="report"></a-button> <a-button type="primary" @click="report"></a-button>
</v-label-div> </v-label-div>
<v-label-div-light v-else title="轿车销量" class="lightSy"> <v-label-div-light v-else title="轿车销量" class="lightSy">
<a-button type="primary" @click="report"></a-button> <a-button type="primary" @click="report"></a-button>
</v-label-div-light> </v-label-div-light>
<div class="d3" v-if="getIsLight"> <div class="d2">
<v-echarts :opt="opt2"></v-echarts> <a-form-model :class="getIsLight?'lightSy':'dark'" layout="inline">
<a-form-model-item label="选择年份">
<a-select style="width: 146px" v-model="yearNumber" @change="yearChange">
<a-select-option v-for="(item,index) in yearList" :key="index" :value='item'>{{item}}</a-select-option>
</a-select>
</a-form-model-item>
</a-form-model>
</div> </div>
<div class="d3" v-else> <div v-if="!getIsLight" class="d3">
<v-echarts :opt="opt"></v-echarts> <v-echarts :opt="opt"></v-echarts>
</div> </div>
<div v-else class="d3">
<v-echarts :opt="opt2"></v-echarts>
</div>
</div> </div>
</template> </template>
@ -30,21 +39,33 @@ export default {
sStartTime: '', sStartTime: '',
sEndTime: '', sEndTime: '',
}, },
yearNumber: 0,
selTime: ['',''],
opt: {}, opt: {},
opt2: {}, opt2: {},
yearList: []
} }
}, },
created() { created() {
this.form.token = this.getToken; this.form.token = this.getToken;
getCheZhuLatestTime({token: this.form.token}).then(res => { getCheZhuLatestTime({token: this.form.token}).then(res => {
this.form.sStartTime = '2021-01';
this.form.sEndTime = res.data; this.form.sEndTime = res.data;
this.yearNumber = res.data.slice(0,4) * 1;
let currYear = res.data.slice(0,4) * 1;
this.yearList = [currYear, currYear-1, currYear-2 ,currYear-3 ,currYear-4]
this.form.sStartTime = (currYear-1) + '-01';
this.getData() this.getData()
}) })
}, },
methods: { methods: {
getData() { getData() {
getSalesSpecName1TypesBySedan(this.form).then(res => { let obj = {
token: this.form.token,
sTimeType: 4,
sStartTime: this.form.sStartTime,
sEndTime: this.form.sEndTime,
}
getSalesSpecName1TypesBySedan(obj).then(res => {
let data = res.data; let data = res.data;
let firstYearData = []; //0 - 11 count let firstYearData = []; //0 - 11 count
let secondYearData = []; //12+ count let secondYearData = []; //12+ count
@ -57,34 +78,36 @@ export default {
percent.push(data[i].YearOnYearGrowth) percent.push(data[i].YearOnYearGrowth)
} }
}; };
this.opt = createOpt(firstYearData,secondYearData,percent); this.opt = createOpt(firstYearData,secondYearData,percent,this.yearNumber)
this.opt2 = createOptLight(firstYearData,secondYearData,percent) this.opt2 = createOptLight(firstYearData,secondYearData,percent,this.yearNumber)
}) });
}, },
report() { report() {
let obj = { let obj = {
token: this.form.token, token: this.form.token,
sTimeType: 4, sTimeType: 4,
sStartTime: this.selTime[0], sStartTime: this.form.sStartTime,
sEndTime: this.selTime[1], sEndTime: this.form.sEndTime,
isExcel: 1, isExcel: 1,
}; };
getSalesSpecName1TypesBySedan(obj).then(() => { getSalesSpecName1TypesBySedan(obj).then(res => {
this.$notification.open({ let data = res.data;
message: `数据生成中`, window.open(data);
description: "请前往个人中心查看下载进度", })
placement: "bottomRight", },
}); yearChange() {
}); this.form.sStartTime = (this.yearNumber-1) + '-01';
this.form.sEndTime = (this.yearNumber) + '-12';
this.getData()
} }
} }
} }
</script> </script>
<style lang="less"> <style lang="less">
.ttc-outter { .tpsv-outter {
width: 1552px; width: 1552px;
height: 492px; height: 532px;
margin-top: 16px; margin-top: 16px;
border: 2px solid #0f2a4d; border: 2px solid #0f2a4d;
.d2 { .d2 {
@ -95,7 +118,7 @@ export default {
.d3 { .d3 {
// padding: 0px 16px 16px 16px; // padding: 0px 16px 16px 16px;
width: 100%; width: 100%;
height: calc(100% - 48px); height: calc(100% - 96px);
} }
} }
</style> </style>

@ -1,7 +1,7 @@
import { bigNumberTransform } from "@/utils/gol/dataTool" import { bigNumberTransform } from "@/utils/gol/dataTool"
import * as echarts from "echarts"; import * as echarts from "echarts";
export default function createOpt(firstData = [], secondData = [], percent = []) { export default function createOpt(firstData = [], secondData = [], percent = [], yearNumber) {
return { return {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
@ -73,7 +73,7 @@ export default function createOpt(firstData = [], secondData = [], percent = [])
], ],
series: [ series: [
{ {
name: '2021', name: yearNumber - 1,
type: 'bar', type: 'bar',
barWidth: 20, barWidth: 20,
tooltip: { tooltip: {
@ -107,7 +107,7 @@ export default function createOpt(firstData = [], secondData = [], percent = [])
data: firstData data: firstData
}, },
{ {
name: '2022', name: yearNumber,
type: 'bar', type: 'bar',
barWidth: 20, barWidth: 20,
tooltip: { tooltip: {

@ -1,7 +1,7 @@
import { bigNumberTransform } from "@/utils/gol/dataTool" import { bigNumberTransform } from "@/utils/gol/dataTool"
import * as echarts from "echarts"; import * as echarts from "echarts";
export default function createOptLight(firstData = [], secondData = [], percent = []) { export default function createOptLight(firstData = [], secondData = [], percent = [], yearNumber) {
return { return {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
@ -73,7 +73,7 @@ export default function createOptLight(firstData = [], secondData = [], percent
], ],
series: [ series: [
{ {
name: '2021', name: yearNumber - 1,
type: 'bar', type: 'bar',
barWidth: 20, barWidth: 20,
tooltip: { tooltip: {
@ -107,7 +107,7 @@ export default function createOptLight(firstData = [], secondData = [], percent
data: firstData data: firstData
}, },
{ {
name: '2022', name: yearNumber,
type: 'bar', type: 'bar',
barWidth: 20, barWidth: 20,
tooltip: { tooltip: {

@ -6,12 +6,21 @@
<v-label-div-light v-else title="MPV销量" class="lightSy"> <v-label-div-light v-else title="MPV销量" class="lightSy">
<a-button type="primary" @click="report"></a-button> <a-button type="primary" @click="report"></a-button>
</v-label-div-light> </v-label-div-light>
<div class="d3" v-if="getIsLight"> <div class="d2">
<v-echarts :opt="opt2"></v-echarts> <a-form-model :class="getIsLight?'lightSy':'dark'" layout="inline">
<a-form-model-item label="选择年份">
<a-select style="width: 146px" v-model="yearNumber" @change="yearChange">
<a-select-option v-for="(item,index) in yearList" :key="index" :value='item'>{{item}}</a-select-option>
</a-select>
</a-form-model-item>
</a-form-model>
</div> </div>
<div class="d3" v-else> <div v-if="!getIsLight" class="d3">
<v-echarts :opt="opt"></v-echarts> <v-echarts :opt="opt"></v-echarts>
</div> </div>
<div v-else class="d3">
<v-echarts :opt="opt2"></v-echarts>
</div>
</div> </div>
</template> </template>
@ -30,21 +39,33 @@ export default {
sStartTime: '', sStartTime: '',
sEndTime: '', sEndTime: '',
}, },
yearNumber: 0,
selTime: ['',''],
opt: {}, opt: {},
opt2: {}, opt2: {},
yearList: []
} }
}, },
created() { created() {
this.form.token = this.getToken; this.form.token = this.getToken;
getCheZhuLatestTime({token: this.form.token}).then(res => { getCheZhuLatestTime({token: this.form.token}).then(res => {
this.form.sStartTime = '2021-01';
this.form.sEndTime = res.data; this.form.sEndTime = res.data;
this.yearNumber = res.data.slice(0,4) * 1;
let currYear = res.data.slice(0,4) * 1;
this.yearList = [currYear, currYear-1, currYear-2 ,currYear-3 ,currYear-4]
this.form.sStartTime = (currYear-1) + '-01';
this.getData() this.getData()
}) })
}, },
methods: { methods: {
getData() { getData() {
getSalesSpecName1TypesByMpv(this.form).then(res => { let obj = {
token: this.form.token,
sTimeType: 4,
sStartTime: this.form.sStartTime,
sEndTime: this.form.sEndTime,
}
getSalesSpecName1TypesByMpv(obj).then(res => {
let data = res.data; let data = res.data;
let firstYearData = []; //0 - 11 count let firstYearData = []; //0 - 11 count
let secondYearData = []; //12+ count let secondYearData = []; //12+ count
@ -57,25 +78,27 @@ export default {
percent.push(data[i].YearOnYearGrowth) percent.push(data[i].YearOnYearGrowth)
} }
}; };
this.opt = createOpt(firstYearData,secondYearData,percent) this.opt = createOpt(firstYearData,secondYearData,percent,this.yearNumber)
this.opt2 = createOptLight(firstYearData,secondYearData,percent) this.opt2 = createOptLight(firstYearData,secondYearData,percent,this.yearNumber)
}) });
}, },
report() { report() {
let obj = { let obj = {
token: this.form.token, token: this.form.token,
sTimeType: 4, sTimeType: 4,
sStartTime: this.selTime[0], sStartTime: this.form.sStartTime,
sEndTime: this.selTime[1], sEndTime: this.form.sEndTime,
isExcel: 1, isExcel: 1,
}; };
getSalesSpecName1TypesByMpv(obj).then(() => { getSalesSpecName1TypesByMpv(obj).then(res => {
this.$notification.open({ let data = res.data;
message: `数据生成中`, window.open(data);
description: "请前往个人中心查看下载进度", })
placement: "bottomRight", },
}); yearChange() {
}); this.form.sStartTime = (this.yearNumber-1) + '-01';
this.form.sEndTime = (this.yearNumber) + '-12';
this.getData()
} }
} }
} }
@ -84,7 +107,7 @@ export default {
<style lang="less"> <style lang="less">
.tpsv-outter { .tpsv-outter {
width: 1552px; width: 1552px;
height: 492px; height: 532px;
margin-top: 16px; margin-top: 16px;
border: 2px solid #0f2a4d; border: 2px solid #0f2a4d;
.d2 { .d2 {
@ -95,7 +118,7 @@ export default {
.d3 { .d3 {
// padding: 0px 16px 16px 16px; // padding: 0px 16px 16px 16px;
width: 100%; width: 100%;
height: calc(100% - 48px); height: calc(100% - 96px);
} }
} }
</style> </style>

@ -1,7 +1,7 @@
import { bigNumberTransform } from "@/utils/gol/dataTool" import { bigNumberTransform } from "@/utils/gol/dataTool"
import * as echarts from "echarts"; import * as echarts from "echarts";
export default function createOpt(firstData = [], secondData = [], percent = []) { export default function createOpt(firstData = [], secondData = [], percent = [], yearNumber) {
return { return {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
@ -73,7 +73,7 @@ export default function createOpt(firstData = [], secondData = [], percent = [])
], ],
series: [ series: [
{ {
name: '2021', name: yearNumber - 1,
type: 'bar', type: 'bar',
barWidth: 20, barWidth: 20,
tooltip: { tooltip: {
@ -107,7 +107,7 @@ export default function createOpt(firstData = [], secondData = [], percent = [])
data: firstData data: firstData
}, },
{ {
name: '2022', name: yearNumber,
type: 'bar', type: 'bar',
barWidth: 20, barWidth: 20,
tooltip: { tooltip: {

@ -1,7 +1,7 @@
import { bigNumberTransform } from "@/utils/gol/dataTool" import { bigNumberTransform } from "@/utils/gol/dataTool"
import * as echarts from "echarts"; import * as echarts from "echarts";
export default function createOptLight(firstData = [], secondData = [], percent = []) { export default function createOptLight(firstData = [], secondData = [], percent = [], yearNumber) {
return { return {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
@ -73,7 +73,7 @@ export default function createOptLight(firstData = [], secondData = [], percent
], ],
series: [ series: [
{ {
name: '2021', name: yearNumber - 1,
type: 'bar', type: 'bar',
barWidth: 20, barWidth: 20,
tooltip: { tooltip: {
@ -107,7 +107,7 @@ export default function createOptLight(firstData = [], secondData = [], percent
data: firstData data: firstData
}, },
{ {
name: '2022', name: yearNumber,
type: 'bar', type: 'bar',
barWidth: 20, barWidth: 20,
tooltip: { tooltip: {

@ -6,12 +6,21 @@
<v-label-div-light v-else title="SUV销量" class="lightSy"> <v-label-div-light v-else title="SUV销量" class="lightSy">
<a-button type="primary" @click="report"></a-button> <a-button type="primary" @click="report"></a-button>
</v-label-div-light> </v-label-div-light>
<div class="d3" v-if="getIsLight"> <div class="d2">
<v-echarts :opt="opt2"></v-echarts> <a-form-model :class="getIsLight?'lightSy':'dark'" layout="inline">
<a-form-model-item label="选择年份">
<a-select style="width: 146px" v-model="yearNumber" @change="yearChange">
<a-select-option v-for="(item,index) in yearList" :key="index" :value='item'>{{item}}</a-select-option>
</a-select>
</a-form-model-item>
</a-form-model>
</div> </div>
<div class="d3" v-else> <div v-if="!getIsLight" class="d3">
<v-echarts :opt="opt"></v-echarts> <v-echarts :opt="opt"></v-echarts>
</div> </div>
<div v-else class="d3">
<v-echarts :opt="opt2"></v-echarts>
</div>
</div> </div>
</template> </template>
@ -30,21 +39,33 @@ export default {
sStartTime: '', sStartTime: '',
sEndTime: '', sEndTime: '',
}, },
yearNumber: 0,
selTime: ['',''],
opt: {}, opt: {},
opt2: {}, opt2: {},
yearList: []
} }
}, },
created() { created() {
this.form.token = this.getToken; this.form.token = this.getToken;
getCheZhuLatestTime({token: this.form.token}).then(res => { getCheZhuLatestTime({token: this.form.token}).then(res => {
this.form.sStartTime = '2021-01';
this.form.sEndTime = res.data; this.form.sEndTime = res.data;
this.yearNumber = res.data.slice(0,4) * 1;
let currYear = res.data.slice(0,4) * 1;
this.yearList = [currYear, currYear-1, currYear-2 ,currYear-3 ,currYear-4]
this.form.sStartTime = (currYear-1) + '-01';
this.getData() this.getData()
}) })
}, },
methods: { methods: {
getData() { getData() {
getSalesSpecName1TypesBySuv(this.form).then(res => { let obj = {
token: this.form.token,
sTimeType: 4,
sStartTime: this.form.sStartTime,
sEndTime: this.form.sEndTime,
}
getSalesSpecName1TypesBySuv(obj).then(res => {
let data = res.data; let data = res.data;
let firstYearData = []; //0 - 11 count let firstYearData = []; //0 - 11 count
let secondYearData = []; //12+ count let secondYearData = []; //12+ count
@ -57,25 +78,27 @@ export default {
percent.push(data[i].YearOnYearGrowth) percent.push(data[i].YearOnYearGrowth)
} }
}; };
this.opt = createOpt(firstYearData,secondYearData,percent) this.opt = createOpt(firstYearData,secondYearData,percent,this.yearNumber)
this.opt2 = createOptLight(firstYearData,secondYearData,percent) this.opt2 = createOptLight(firstYearData,secondYearData,percent,this.yearNumber)
}) });
}, },
report() { report() {
let obj = { let obj = {
token: this.form.token, token: this.form.token,
sTimeType: 4, sTimeType: 4,
sStartTime: this.selTime[0], sStartTime: this.form.sStartTime,
sEndTime: this.selTime[1], sEndTime: this.form.sEndTime,
isExcel: 1, isExcel: 1,
}; };
getSalesSpecName1TypesBySuv(obj).then(() => { getSalesSpecName1TypesBySuv(obj).then(res => {
this.$notification.open({ let data = res.data;
message: `数据生成中`, window.open(data);
description: "请前往个人中心查看下载进度", })
placement: "bottomRight", },
}); yearChange() {
}); this.form.sStartTime = (this.yearNumber-1) + '-01';
this.form.sEndTime = (this.yearNumber) + '-12';
this.getData()
} }
} }
} }
@ -84,7 +107,7 @@ export default {
<style lang="less"> <style lang="less">
.tpsv-outter { .tpsv-outter {
width: 1552px; width: 1552px;
height: 492px; height: 532px;
margin-top: 16px; margin-top: 16px;
border: 2px solid #0f2a4d; border: 2px solid #0f2a4d;
.d2 { .d2 {
@ -95,7 +118,7 @@ export default {
.d3 { .d3 {
// padding: 0px 16px 16px 16px; // padding: 0px 16px 16px 16px;
width: 100%; width: 100%;
height: calc(100% - 48px); height: calc(100% - 96px);
} }
} }
</style> </style>

@ -1,7 +1,7 @@
import { bigNumberTransform } from "@/utils/gol/dataTool" import { bigNumberTransform } from "@/utils/gol/dataTool"
import * as echarts from "echarts"; import * as echarts from "echarts";
export default function createOpt(firstData = [], secondData = [], percent = []) { export default function createOpt(firstData = [], secondData = [], percent = [], yearNumber) {
return { return {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
@ -73,7 +73,7 @@ export default function createOpt(firstData = [], secondData = [], percent = [])
], ],
series: [ series: [
{ {
name: '2021', name: yearNumber - 1,
type: 'bar', type: 'bar',
barWidth: 20, barWidth: 20,
tooltip: { tooltip: {
@ -107,7 +107,7 @@ export default function createOpt(firstData = [], secondData = [], percent = [])
data: firstData data: firstData
}, },
{ {
name: '2022', name: yearNumber,
type: 'bar', type: 'bar',
barWidth: 20, barWidth: 20,
tooltip: { tooltip: {

@ -1,7 +1,7 @@
import { bigNumberTransform } from "@/utils/gol/dataTool" import { bigNumberTransform } from "@/utils/gol/dataTool"
import * as echarts from "echarts"; import * as echarts from "echarts";
export default function createOptLight(firstData = [], secondData = [], percent = []) { export default function createOptLight(firstData = [], secondData = [], percent = [], yearNumber) {
return { return {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
@ -73,7 +73,7 @@ export default function createOptLight(firstData = [], secondData = [], percent
], ],
series: [ series: [
{ {
name: '2021', name: yearNumber - 1,
type: 'bar', type: 'bar',
barWidth: 20, barWidth: 20,
tooltip: { tooltip: {
@ -107,7 +107,7 @@ export default function createOptLight(firstData = [], secondData = [], percent
data: firstData data: firstData
}, },
{ {
name: '2022', name: yearNumber,
type: 'bar', type: 'bar',
barWidth: 20, barWidth: 20,
tooltip: { tooltip: {

@ -105,11 +105,8 @@ export default {
isExcel: 1, isExcel: 1,
}; };
getSalesSpecName1Types(obj).then(() => { getSalesSpecName1Types(obj).then(() => {
this.$notification.open({ let data = res.data;
message: `数据生成中`, window.open(data);
description: "请前往个人中心查看下载进度",
placement: "bottomRight",
});
}); });
} }
} }

@ -144,8 +144,8 @@ export default {
isLoading: false, isLoading: false,
dd: false, // dd: false, //
// //
rootSubmenuKeys:['sub1', 'sub2', 'sub3'], rootSubmenuKeys:['sub1', 'sub2', 'sub3','sub4','sub5','sub6'],
openKeys: ['sub1'], openKeys: [],
form: { form: {
token: '', token: '',
sStartTime: '', sStartTime: '',

Loading…
Cancel
Save