张雄 3 years ago
parent 579e1e2abe
commit 25e6be8212

@ -104,3 +104,16 @@ export function getPositiveAndNegative0528C(params) {
})
}
// 品牌对比-销量态势对比
export function getCheZhuCountTimeC(params) {
let obj = Object.assign({action: 'getCheZhuCountTimeC', sType: 'Marketing1C', iContrastType: 1}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}

@ -209,4 +209,29 @@ export function getToPptTask(params) {
'content-type': 'application/x-www-form-urlencoded'
}
})
}
// 品牌销量态势
export function getCheZhuCountTime(params) {
let obj = Object.assign({action: 'getCheZhuCountTime', sType: 'Marketing1'}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}
// 品牌销量TOP
export function getCheZhuCarSeriesCount(params) {
let obj = Object.assign({action: 'getCheZhuCarSeriesCount', sType: 'Marketing1'}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}

@ -127,4 +127,17 @@ export function getSourceTopCount0528C(params) {
'content-type': 'application/x-www-form-urlencoded'
}
})
}
// 车型对比-销量态势对比
export function getCheZhuCountTimeC(params) {
let obj = Object.assign({action: 'getCheZhuCountTimeC', sType: 'Marketing1C', iContrastType: 2}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}

@ -57,6 +57,10 @@
<brandCommunicationTOPMedia></brandCommunicationTOPMedia>
<brandCommunicationTOPMediaStoken slot="skeleton"></brandCommunicationTOPMediaStoken>
</vue-lazy-component>
<vue-lazy-component>
<saleFormComparison></saleFormComparison>
<saleFormComparisonStoken slot="skeleton"></saleFormComparisonStoken>
</vue-lazy-component>
<vue-lazy-component>
<overallWordCloudComparison></overallWordCloudComparison>
<overallWordCloudComparisonStoken slot="skeleton"></overallWordCloudComparisonStoken>
@ -187,6 +191,8 @@ export default {
userAreaDistributionStoken: (resolve) => require(['./userAreaDistributionStoken'], resolve), //
weiboUserPortrait: (resolve) => require(['./weiboUserPortrait'], resolve), //
weiboUserPortraitStoken: (resolve) => require(['./weiboUserPortraitStoken'], resolve), //
saleFormComparison: (resolve) => require(['./saleFormComparison'], resolve), //
saleFormComparisonStoken: (resolve) => require(['./saleFormComparisonStoken'], resolve), //
summaryAndComparisonOfForumInformation: (resolve) => require(['./summaryAndComparisonOfForumInformation'], resolve), //
summaryAndComparisonOfForumInformationStoken: (resolve) => require(['./summaryAndComparisonOfForumInformationStoken'], resolve), //
comparisonOfForumPostingTrends: (resolve) => require(['./comparisonOfForumPostingTrends'], resolve), //

@ -104,8 +104,6 @@ export default {
}
dataI = dataI + 1;
});
console.log(dx);
console.log(ds)
this.opt = createOpt(dx, ds, markData);
this.load = false;
});

@ -0,0 +1,72 @@
<template>
<div class="sfc-outter" v-loading="load">
<v-label-div :title="'销量对比('+time+')'"> </v-label-div>
<div class="sfc-inner">
<v-echarts :opt="opt"></v-echarts>
</div>
</div>
</template>
<script>
import {getCheZhuCountTimeC} from "@/api/BrandComparison/index.js";
import createOpt from "./opt";
export default {
name: "saleFormComparison",
data() {
return {
form: {
token: '',
sBrand: '',
sSeriesName: ''
},
opt: {},
load: false,
time: ''
}
},
created() {
this.initData();
},
methods: {
initData() {
this.form.token = this.getToken;
let arr = this.getBComparison;
let brands = [];
arr.forEach((ele) => {
brands.push(ele.name);
});
this.form.sBrand = brands.toString();
this.getData();
},
getData() {
this.load = true;
let obj = Object.assign({}, this.form);
getCheZhuCountTimeC(obj).then(res => {
let data = res.data.Data;
this.time = res.data.Time;
let dx = [];
let ds = [];
data.forEach(ele => {
let key = ele.key;
let value = ele.value;
dx.push(key);
ds.push(value);
});
this.opt = createOpt(dx, ds);
this.load = false;
})
}
}
}
</script>
<style lang="less">
.sfc-outter {
width: 1880px;
height: 412px;
.sfc-inner {
width: 100%;
height: calc(100% - 48px);
}
}
</style>

@ -0,0 +1,114 @@
/*
* @Author: your name
* @Date: 2021-10-12 10:11:24
* @LastEditTime: 2021-11-19 19:47:53
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandInsight/titsopo/opt.js
*/
import { bigNumberTransform } from "@/utils/gol/dataTool"
function createData(ds = []) {
let testData = {}
ds.forEach(item => {
item.forEach(val => {
if (testData[val.key] === undefined) {
testData[val.key] = {
name: val.key,
type: 'line',
symbol: 'none',
areaStyle: {
opacity: 0.2
},
emphasis: {
focus: 'series'
},
data: [val.value],
markPoint: {
data: [],
}
};
} else {
testData[val.key].data.push(val.value)
}
})
})
let arr = [];
for(let key in testData) {
arr.push(testData[key])
}
return arr
}
export default function createOpt(dx = [], ds = []) {
let data = createData(ds);
return {
grid: {
left: 10,
right: '5%',
bottom: 10,
top: 52,
containLabel: true
},
tooltip: {
trigger: "axis",
backgroundColor: "#08182F",
color: "#fff",
borderColor: "#3373CC",
textStyle: {
color: "#fff", //设置文字颜色
},
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
},
legend: {
icon: 'roundRect',
textStyle: { //图例文字的样式
color: '#fff',
fontSize: 10
},
y: 12,
x: 16,
itemWidth: 12,
itemHeight: 12
},
xAxis: {
type: 'category',
boundaryGap: false,
axisTick: {
show: false,
},
axisLabel: {
formatter: (value) => {
return value
}
},
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: data
}
}

@ -0,0 +1,25 @@
<template>
<div class="sfc-outter">
<v-label-div title="销量对比"> </v-label-div>
<div class="sfc-inner">
</div>
</div>
</template>
<script>
export default {
name: "saleFormComparison"
}
</script>
<style lang="less">
.sfc-outter {
width: 1880px;
height: 412px;
.sfc-inner {
width: 100%;
height: calc(100% - 48px);
}
}
</style>

@ -97,6 +97,21 @@
</vue-lazy-component>
</div>
</div>
<div class="bdl-d6">
<v-label-div title="品牌销量">
<v-btn @click="toSale"></v-btn>
</v-label-div>
<div class="bdl-d6-bd">
<vue-lazy-component>
<saleForm :brand="brand"></saleForm>
<saleFormStoken slot="skeleton"></saleFormStoken>
</vue-lazy-component>
<vue-lazy-component>
<saleTop :brand="brand"></saleTop>
<saleTopStoken slot="skeleton"></saleTopStoken>
</vue-lazy-component>
</div>
</div>
</div>
<iSwitchBrand :brand="brand" :visible.sync="brandShow" @change="handlerBrand"></iSwitchBrand>
</div>
@ -114,6 +129,8 @@ import weiboVolumeTrend from "./weiboVolumeTrend";
import forumCommunicationTrend from "./forumCommunicationTrend";
import forumHotTopicDirection from "./forumHotTopicDirection";
import spreadTOPmodels from "./spreadTOPmodels";
import saleForm from "./saleForm";
import saleTop from "./saleTop";
import rearWingPropagationSituation from "./rearWingPropagationSituation";
import keyMedia from "./keyMedia";
import popularwordCloud from "./popularwordCloud";
@ -129,9 +146,12 @@ import weiboVolumeTrendStoken from "./weiboVolumeTrendStoken";
import forumCommunicationTrendStoken from "./forumCommunicationTrendStoken";
import forumHotTopicDirectionStoken from "./forumHotTopicDirectionStoken";
import spreadTOPmodelsStoken from "./spreadTOPmodelsStoken";
import saleFormStoken from "./saleFormStoken";
import saleTopStoken from "./saleTopStoken";
import rearWingPropagationSituationStoken from "./rearWingPropagationSituationStoken";
import keyMediaStoken from "./keyMediaStoken";
import popularwordCloudStoken from "./popularwordCloudStoken";
import {getCheZhuLatestTime} from "@/api/SaleRank"
export default {
name: "BrandInsight",
inject: ['reload'],
@ -146,6 +166,8 @@ export default {
weiboVolumeTrend, //
forumCommunicationTrend, //
forumHotTopicDirection, //
saleForm, //
saleTop, //top
spreadTOPmodels, // TOP
rearWingPropagationSituation, //
keyMedia, //
@ -161,6 +183,8 @@ export default {
weiboVolumeTrendStoken, //
forumCommunicationTrendStoken, //
forumHotTopicDirectionStoken, //
saleFormStoken, //
saleTopStoken, //top
spreadTOPmodelsStoken, // TOP
rearWingPropagationSituationStoken, //
keyMediaStoken, //
@ -190,6 +214,21 @@ export default {
this.setBrand(arr[0]);
// this.setModel(arr[1]);
this.reload();
},
//
toSale() {
getCheZhuLatestTime({token: this.getToken}).then(res => {
let dDate = res.data;
this.$router.push(
{
path: '/saleRank/brandInfoDetail',
query: {
sBrand: this.brand,
sourcetime: dDate,
}
}
)
})
}
}
};
@ -290,4 +329,15 @@ export default {
padding: 0px 16px 16px 16px;
}
}
.bdl-d6 {
width: 100%;
height: 460px;
border: 2px solid #0f2a4d;
margin-top: 16px;
.bdl-d6-bd {
display: flex;
justify-content: flex-start;
padding: 0px 16px 16px 16px;
}
}
</style>

@ -0,0 +1,63 @@
<template>
<div class="sssf-outter" v-loading="load">
<v-label-div :title="'销量态势('+time+')'" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div>
<div class="sf-inner">
<v-echarts :opt="opt" ></v-echarts>
</div>
</div>
</template>
<script>
import {getCheZhuCountTime} from "@/api/BrandInsight"
import createOpt from "./opt"
export default {
name: "saleForm",
props: ["brand"],
data() {
return {
load: false,
form: {
token: '',
sBrand: '',
sSeriesName: '',
},
time: '',
opt: {}
}
},
created() {
this.form.token = this.getToken;
this.form.sBrand = this.getBrand.brandname || this.brand;
this.getData();
},
methods: {
getData() {
this.load = true
let obj = Object.assign({}, this.form);
getCheZhuCountTime(obj).then(res => {
let data = res.data.Data;
this.time = res.data.Time;
let dx = [];
let ds = [];
data.forEach(ele => {
dx.push(ele.Time);
ds.push(ele.value);
})
this.opt = createOpt(dx, ds);
this.load = false
})
}
}
}
</script>
<style lang="less">
.sssf-outter {
width: 912px;
height: 412px;
.sf-inner {
width: 100%;
height: calc(100% - 50px);
}
}
</style>

@ -0,0 +1,87 @@
/*
* @Author: your name
* @Date: 2021-10-12 16:40:53
* @LastEditTime: 2021-11-19 19:48:04
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandInsight/forumCommunicationTrend/opt.js
*/
import * as echarts from "echarts";
import { bigNumberTransform } from "@/utils/gol/dataTool"
export default function createOpt(dx = [], ds = []) {
return {
grid: {
top: "15%",
left: "3%",
right: "5%",
bottom: "3%",
containLabel: true,
},
tooltip: {
trigger: "axis",
backgroundColor: "#08182F",
color: "#fff",
borderColor: "#3373CC",
textStyle: {
color: "#fff", //设置文字颜色
},
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
},
xAxis: {
type: 'category',
boundaryGap: false,
axisTick: {
show: false,
},
axisLine: {
show: false,
lineStyle: {
color: "#fff",
},
},
axisLabel : {
formatter: (value) => {
return value
}
},
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: [
{
data: ds,
type: 'line',
color: "#CC9D12",
areaStyle: {normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#CC9D12'
}, {
offset: 1,
color: 'rgba(0,0,0,0)'
}]),
}},
}
]
};
}

@ -0,0 +1,31 @@
<template>
<div class="sf-outter">
<v-label-div title="销量态势" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div>
<div class="sf-inner">
</div>
</div>
</template>
<script>
export default {
name: "saleFormStoken",
props: ["brand"],
data() {
return {
load: false
}
}
}
</script>
<style lang="less">
.sf-outter {
width: 912px;
height: 412px;
.sf-inner {
width: 100%;
height: calc(100% - 50px);
}
}
</style>

@ -0,0 +1,68 @@
<template>
<div class="st-outter" v-loading="load">
<v-label-div :title="'车型销量TOP('+time+')'" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div>
<div class="st-inner">
<v-echarts :opt="opt" @getData="clickEchars"></v-echarts>
</div>
</div>
</template>
<script>
import {getCheZhuCarSeriesCount} from "@/api/BrandInsight"
import createOpt from "./opt"
export default {
name: "saleTop",
props: ["brand"],
data() {
return {
load: false,
form: {
token: '',
sBrand: '',
},
time: '',
opt: {}
}
},
created() {
this.form.token = this.getToken;
this.form.sBrand = this.getBrand.brandname || this.brand;
this.getData();
},
methods: {
getData() {
this.load = true
let obj = Object.assign({}, this.form);
getCheZhuCarSeriesCount(obj).then(res => {
let data = res.data.Data;
this.time = res.data.Time;
let dx = [];
let ds = [];
data.forEach(ele => {
dx.push(ele.key);
ds.push(ele.value)
})
this.opt = createOpt(dx, ds);
this.load = false;
})
},
clickEchars(data) {
let ele = data;
let model = ele.axisValueLabel;
this.setModel({name: model});
this.$router.push("/modelInsight");
}
}
}
</script>
<style lang="less">
.st-outter {
width: 912px;
height: 412px;
.st-inner {
width: 100%;
height: calc(100% - 50px);
}
}
</style>

@ -0,0 +1,111 @@
/*
* @Author: your name
* @Date: 2021-10-12 18:23:25
* @LastEditTime: 2021-10-12 18:31:20
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandInsight/spreadTOPmodels/opt.js
*/
import * as echarts from "echarts";
import { bigNumberTransform } from "@/utils/gol/dataTool"
export default function createOpt(dx,ds) {
return {
grid: {
top: "10%",
left: "16px",
right: "5%",
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: "#000", // 0% 处的颜色
},
{
offset: 1,
color: "#CC9D12", // 100% 处的颜色#3373CC
},
],
false
),
},
},
},
],
}
}

@ -0,0 +1,26 @@
<template>
<div class="st-outter">
<v-label-div title="销量态势" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div>
<div class="st-inner">
</div>
</div>
</template>
<script>
export default {
name: "saleTopStoken",
props: ["brand"],
}
</script>
<style lang="less">
.st-outter {
width: 912px;
height: 412px;
.st-inner {
width: 100%;
height: calc(100% - 50px);
}
}
</style>

@ -54,6 +54,10 @@
<brandCommunicationTOPMediaStoken slot="skeleton"></brandCommunicationTOPMediaStoken>
</vue-lazy-component>
<vue-lazy-component>
<saleFormComparison></saleFormComparison>
<saleFormComparisonStoken slot="skeleton"></saleFormComparisonStoken>
</vue-lazy-component>
<vue-lazy-component>
<overallWordCloudComparison></overallWordCloudComparison>
<overallWordCloudComparisonStoken slot="skeleton"></overallWordCloudComparisonStoken>
</vue-lazy-component>
@ -167,6 +171,7 @@ import brandRearWingComparison from "./brandRearWingComparison"
// import informationVolumeByChannel from "./informationVolumeByChannel"
import tailTOPMedia from "./tailTOPMedia"
import brandCompateHeader from "./brandCompateHeader"
import saleFormComparison from "./saleFormComparison"
//
import informationTrendStoken from "./informationTrendStoken";
import overallInformationStoken from "./overallInformationStoken";
@ -192,7 +197,9 @@ import comparisonOfNegativeTopicsInForumsStoken from "./comparisonOfNegativeTopi
import brandRearWingComparisonStoken from "./brandRearWingComparisonStoken"
// import informationVolumeByChannelStoken from "./informationVolumeByChannelStoken"
import tailTOPMediaStoken from "./tailTOPMediaStoken"
import brandCompateHeaderStoken from "./brandCompateHeaderStoken"
import brandCompateHeaderStoken from "./brandCompateHeaderStoken";
import saleFormComparisonStoken from "./saleFormComparisonStoken";
export default {
name: "brandComparison",
inject: ['reload'],
@ -222,6 +229,7 @@ export default {
// informationVolumeByChannel, //
tailTOPMedia, // TOP
brandCompateHeader, //
saleFormComparison, //
//
informationTrendStoken, //
overallInformationStoken, //
@ -248,6 +256,7 @@ export default {
// informationVolumeByChannelStoken, //
tailTOPMediaStoken, // TOP
brandCompateHeaderStoken, //
saleFormComparisonStoken, //
},
data() {
return {

@ -0,0 +1,75 @@
<template>
<div class="sfcc-outter" v-loading="load">
<v-label-div :title="'销量对比('+time+')'"> </v-label-div>
<div class="sfc-inner">
<v-echarts :opt="opt"></v-echarts>
</div>
</div>
</template>
<script>
import {getCheZhuCountTimeC} from "@/api/ModelComparison/index.js";
import createOpt from "./opt";
export default {
name: "saleFormComparison",
data() {
return {
form: {
token: '',
sBrand: '',
sSeriesName: ''
},
opt: {},
load: false,
time: ''
}
},
created() {
this.initData();
},
methods: {
initData() {
this.form.token = this.getToken;
let arr = this.getMComparison;
let brands = [];
let models = [];
arr.forEach((ele) => {
brands.push(ele.brand);
models.push(ele.model);
});
this.form.sBrand = brands.toString();
this.form.sSeriesName = models.toString();
this.getData();
},
getData() {
this.load = true;
let obj = Object.assign({}, this.form);
getCheZhuCountTimeC(obj).then(res => {
let data = res.data.Data;
this.time = res.data.Time;
let dx = [];
let ds = [];
data.forEach(ele => {
let key = ele.key;
let value = ele.value;
dx.push(key);
ds.push(value);
});
this.opt = createOpt(dx, ds);
this.load = false;
})
}
}
}
</script>
<style lang="less">
.sfcc-outter {
width: 1880px;
height: 412px;
.sfc-inner {
width: 100%;
height: calc(100% - 48px);
}
}
</style>

@ -0,0 +1,114 @@
/*
* @Author: your name
* @Date: 2021-10-12 10:11:24
* @LastEditTime: 2021-11-19 19:47:53
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandInsight/titsopo/opt.js
*/
import { bigNumberTransform } from "@/utils/gol/dataTool"
function createData(ds = []) {
let testData = {}
ds.forEach(item => {
item.forEach(val => {
if (testData[val.key] === undefined) {
testData[val.key] = {
name: val.key,
type: 'line',
symbol: 'none',
areaStyle: {
opacity: 0.2
},
emphasis: {
focus: 'series'
},
data: [val.value],
markPoint: {
data: [],
}
};
} else {
testData[val.key].data.push(val.value)
}
})
})
let arr = [];
for(let key in testData) {
arr.push(testData[key])
}
return arr
}
export default function createOpt(dx = [], ds = []) {
let data = createData(ds);
return {
grid: {
left: 10,
right: '5%',
bottom: 10,
top: 52,
containLabel: true
},
tooltip: {
trigger: "axis",
backgroundColor: "#08182F",
color: "#fff",
borderColor: "#3373CC",
textStyle: {
color: "#fff", //设置文字颜色
},
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
},
legend: {
icon: 'roundRect',
textStyle: { //图例文字的样式
color: '#fff',
fontSize: 10
},
y: 12,
x: 16,
itemWidth: 12,
itemHeight: 12
},
xAxis: {
type: 'category',
boundaryGap: false,
axisTick: {
show: false,
},
axisLabel: {
formatter: (value) => {
return value
}
},
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: data
}
}

@ -0,0 +1,25 @@
<template>
<div class="sfc-outter">
<v-label-div title="销量对比"> </v-label-div>
<div class="sfc-inner">
</div>
</div>
</template>
<script>
export default {
name: "saleFormComparison"
}
</script>
<style lang="less">
.sfc-outter {
width: 1880px;
height: 412px;
.sfc-inner {
width: 100%;
height: calc(100% - 48px);
}
}
</style>

@ -98,6 +98,17 @@
</vue-lazy-component>
</div>
</div>
<div class="bdl-d6">
<v-label-div title="销量趋势">
<v-btn @click="goSaleModel"></v-btn>
</v-label-div>
<div class="bdl-d6-bd">
<vue-lazy-component>
<mlSaleForm :brand="brand" :model="model"></mlSaleForm>
<mlSaleFormStoken slot="skeleton"></mlSaleFormStoken>
</vue-lazy-component>
</div>
</div>
</div>
<iSwitchModel :brand="brand" :model="model" :visible.sync="modelShow" @change="handlerBrand"></iSwitchModel>
</div>
@ -116,6 +127,7 @@ import mlForumHotTopicDirection from "./mlForumHotTopicDirection";
import mlSpreadTOPmodels from "./mlSpreadTOPmodels";
import mlKeyMedia from "./mlKeyMedia";
import mlRearWingPropagationSituation from "./mlRearWingPropagationSituation";
import mlSaleForm from './mlSaleForm'
import mlPopularwordCloud from "./mlPopularwordCloud";
//
import mlBrandDataStoken from "./ml-brand-dataStoken";
@ -130,6 +142,7 @@ import mlForumHotTopicDirectionStoken from "./mlForumHotTopicDirectionStoken";
import mlSpreadTOPmodelsStoken from "./mlSpreadTOPmodelsStoken";
import mlKeyMediaStoken from "./mlKeyMediaStoken";
import mlRearWingPropagationSituationStoken from "./mlRearWingPropagationSituationStoken";
import mlSaleFormStoken from './mlSaleFormStoken'
import mlPopularwordCloudStoken from "./mlPopularwordCloudStoken";
import { getUserSeriesName } from "@/api/comm";
export default {
@ -148,6 +161,7 @@ export default {
mlSpreadTOPmodels, //
mlKeyMedia, //
mlRearWingPropagationSituation, //
mlSaleForm, //
mlPopularwordCloud, //
//
mlBrandDataStoken, //
@ -162,6 +176,7 @@ export default {
mlSpreadTOPmodelsStoken, //
mlKeyMediaStoken, //
mlRearWingPropagationSituationStoken, //
mlSaleFormStoken, //
mlPopularwordCloudStoken, //
},
data() {
@ -212,6 +227,18 @@ export default {
//
goRouter(path) {
this.$router.push({path: path})
},
//
goSaleModel() {
this.$router.push(
{
path: '/saleRank/seriesInfo',
query: {
sBrand: this.brand,
sSeriesName: this.model,
}
}
)
}
},
};
@ -311,4 +338,15 @@ export default {
padding: 0px 16px 16px 16px;
}
}
.bdl-d6 {
width: 100%;
height: 460px;
border: 2px solid #0f2a4d;
margin-top: 16px;
.bdl-d6-bd {
display: flex;
justify-content: flex-start;
padding: 0px 16px 16px 16px;
}
}
</style>

@ -0,0 +1,71 @@
<template>
<div class="sf-outter" v-loading="load">
<v-label-div :title="'销量态势('+time+')'" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div>
<div class="sf-inner">
<v-echarts :opt="opt" ></v-echarts>
</div>
</div>
</template>
<script>
import {getCheZhuCountTime} from "@/api/BrandInsight"
import createOpt from "./opt"
export default {
name: "saleForm",
props: ["brand", "model"],
data() {
return {
load: false,
form: {
token: '',
sBrand: '',
sSeriesName: '',
},
time: '',
opt: {}
}
},
watch: {
model: {
handler(val) {
if (val) {
this.form.token = this.getToken;
this.form.sBrand = this.brand;
this.form.sSeriesName = this.model;
this.getData();
}
},
immediate: true,
},
},
methods: {
getData() {
this.load = true;
let obj = Object.assign({}, this.form);
getCheZhuCountTime(obj).then(res => {
let data = res.data.Data;
this.time = res.data.Time;
let dx = [];
let ds = [];
data.forEach(ele => {
dx.push(ele.Time);
ds.push(ele.value);
})
this.opt = createOpt(dx, ds);
this.load = false
})
}
}
}
</script>
<style lang="less">
.sf-outter {
width: 1824px;
height: 412px;
.sf-inner {
width: 100%;
height: calc(100% - 50px);
}
}
</style>

@ -0,0 +1,87 @@
/*
* @Author: your name
* @Date: 2021-10-12 16:40:53
* @LastEditTime: 2021-11-19 19:48:04
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandInsight/forumCommunicationTrend/opt.js
*/
import * as echarts from "echarts";
import { bigNumberTransform } from "@/utils/gol/dataTool"
export default function createOpt(dx = [], ds = []) {
return {
grid: {
top: "15%",
left: "3%",
right: "5%",
bottom: "3%",
containLabel: true,
},
tooltip: {
trigger: "axis",
backgroundColor: "#08182F",
color: "#fff",
borderColor: "#3373CC",
textStyle: {
color: "#fff", //设置文字颜色
},
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
},
xAxis: {
type: 'category',
boundaryGap: false,
axisTick: {
show: false,
},
axisLine: {
show: false,
lineStyle: {
color: "#fff",
},
},
axisLabel : {
formatter: (value) => {
return value
}
},
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: [
{
data: ds,
type: 'line',
color: "#CC9D12",
areaStyle: {normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#CC9D12'
}, {
offset: 1,
color: 'rgba(0,0,0,0)'
}]),
}},
}
]
};
}

@ -0,0 +1,31 @@
<template>
<div class="sf-outter" v-loading="load">
<v-label-div title="销量态势" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div>
<div class="sf-inner">
</div>
</div>
</template>
<script>
export default {
name: "saleFormStoken",
props: ["brand"],
data() {
return {
load: false
}
}
}
</script>
<style lang="less">
.sf-outter {
width: 1824px;
height: 412px;
.sf-inner {
width: 100%;
height: calc(100% - 50px);
}
}
</style>

@ -11,17 +11,17 @@
</div>
<div class="rank-container" v-loading="load">
<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>
<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>
<a @click="goInfo(index)">{{item.key}}>>></a></div>
</div>
</div>
</div>
<a-modal title="汽车能源销量排行榜趋势图(单位:辆)" width="1200px" :footer="null" @cancel="onClose" :visible="visible">
<a-modal title="各能源汽车销量排行榜趋势图(单位:辆)" width="1200px" :footer="null" @cancel="onClose" :visible="visible">
<div class="modal-table">
<a-month-picker style="width: 160px" v-model="selTime[0]" :disabled-date="disabledDate" valueFormat="YYYY-MM" placeholder="请选择开始日期"></a-month-picker>
<a-month-picker style="width: 160px;margin-left:40px" v-model="selTime[1]" :disabled-date="disabledDate" valueFormat="YYYY-MM" placeholder="请选择结束日期"></a-month-picker>
@ -48,7 +48,7 @@ export default {
data() {
return {
load: false,
time: '汽车能源类型销售排行榜',
time: '汽车能源类型销售排行榜',
form: {
token: '',
sTimeType: 4,

Loading…
Cancel
Save