zx-营销对比

prod
张雄 3 years ago
parent 28ceafd3aa
commit 3dc36392ca

@ -0,0 +1,14 @@
import httpService from "@/request"
// 营销分析对比-论坛总量对比
export function getCountMKT0528C(params) {
let obj = Object.assign({action: 'getCountMKT0528C',sType: 'Marketing',iBbsType: 1}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}

@ -0,0 +1,68 @@
import httpService from "@/request"
// 营销分析对比-整体声量对比
export function getCountMKT0528C(params) {
let obj = Object.assign({action: 'getCountMKT0528C',sType: 'Marketing'}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}
// 营销分析对比-互动量对比
export function getInteractCountMKT0528C(params) {
let obj = Object.assign({action: 'getInteractCountMKT0528C',sType: 'Marketing'}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}
// 营销分析对比-互动量对比
export function getSourceCountMKT0528C(params) {
let obj = Object.assign({action: 'getSourceCountMKT0528C',sType: 'Marketing'}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}
// 营销分析对比-渠道分布对比
export function getSourceTypeCountMKT0528C(params) {
let obj = Object.assign({action: 'getSourceTypeCountMKT0528C',sType: 'Marketing'}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}
// 营销分析对比-销量对比
export function getSalesCountMKT0528C(params) {
let obj = Object.assign({action: 'getSalesCountMKT0528C',sType: 'Marketing'}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}

@ -7,35 +7,76 @@
* @FilePath: /data-show/src/views/MarketingComparison/mcCTNF/index.vue
-->
<template>
<div class="mcct-outter">
<v-label-div title="论坛总量对比">
</v-label-div>
<div class="mcct-inner">
<v-echarts :opt="opt"></v-echarts>
</div>
<div class="mcct-outter" v-loading="load">
<v-label-div title="论坛总量对比"> </v-label-div>
<div class="mcct-inner">
<v-echarts :opt="opt"></v-echarts>
</div>
</div>
</template>
<script>
import {createSingleColumnar} from "@/utils/gol/singleColumnar"
import { getCountMKT0528C } from "@/api/MarketingComparison/index.js";
import { createSingleColumnar } from "@/utils/gol/singleColumnar";
export default {
name: "mcCTNF",
data() {
return {
opt: createSingleColumnar(["奥迪", "宝马", "奔驰", "吉利", "大众", "别克"],[2200, 1900, 1800, 1600, 1400, 1500])
}
}
}
name: "mcCTNF",
data() {
return {
form: {
token: "",
sJson: "",
load: false
},
opt: {},
};
},
created() {
this.initData();
},
methods: {
initData() {
this.form.token = this.getToken;
let arr = this.getSComparison;
let sourceData = [];
arr.forEach((ele) => {
let o = {
sBrand: ele.brand,
sSeriesName: ele.model,
sStartTime: ele.startTime,
sEndTime: ele.endTime,
};
sourceData.push(o);
});
this.form.sJson = JSON.stringify(sourceData); //json
this.getData();
},
getData() {
let obj = Object.assign({}, this.getCtime, this.form);
this.load = true;
getCountMKT0528C(obj).then((res) => {
let data = res.data || [];
let dx = [];
let ds = [];
data.forEach((ele) => {
dx.push(ele.key);
ds.push(ele.value);
});
this.opt = createSingleColumnar(dx, ds);
this.load = false;
});
},
},
};
</script>
<style lang="less" scoped>
.mcct-outter {
width: 936px;
height: 460px;
border: 2px solid #0f2a4d;
.mcct-inner {
width: 100%;
height: calc(100% - 48px);
}
width: 936px;
height: 460px;
border: 2px solid #0f2a4d;
.mcct-inner {
width: 100%;
height: calc(100% - 48px);
}
}
</style>

@ -7,35 +7,77 @@
* @FilePath: /data-show/src/views/BrandComparison/channelDistribution/index.vue
-->
<template>
<div class="cd-outter">
<v-label-div title="渠道分布">
</v-label-div>
<div class="cd-inner">
<v-echarts :opt="opt"></v-echarts>
</div>
<div class="cd-outter">
<v-label-div title="渠道分布"> </v-label-div>
<div class="cd-inner">
<v-echarts :opt="opt"></v-echarts>
</div>
</div>
</template>
<script>
import createOpt from "./opt"
import { getSourceTypeCountMKT0528C } from "@/api/MarketingComparison/index.js";
import createOpt from "./opt";
export default {
name: "mcChannelDistribution",
data() {
return {
opt: createOpt()
}
}
name: "mcChannelDistribution",
data() {
return {
opt: {},
form: {
token: "",
sJson: "",
},
};
},
created() {
this.initData();
},
methods: {
initData() {
this.form.token = this.getToken;
let arr = this.getSComparison;
let sourceData = [];
arr.forEach((ele) => {
let o = {
sBrand: ele.brand,
sSeriesName: ele.model,
sStartTime: ele.startTime,
sEndTime: ele.endTime,
};
sourceData.push(o);
});
this.form.sJson = JSON.stringify(sourceData); //json
this.getData();
},
getData() {
let obj = Object.assign({}, this.getCtime, this.form);
getSourceTypeCountMKT0528C(obj).then((res) => {
let data = res.data || [];
let brandList = [];
let dx = [];
data.forEach((e) => {
e.data.forEach( ele => {
if (!dx.includes(ele.key)) {
dx.push(ele.key);
}
})
brandList.push(e.key);
});
this.opt = createOpt(data, dx, brandList);
});
},
},
};
</script>
<style lang="less" scoped>
.cd-outter {
width: 100%;
height: 460px;
border: 2px solid #0f2a4d;
.cd-inner {
width: 100%;
height: 460px;
border: 2px solid #0f2a4d;
.cd-inner {
width: 100%;
height: calc(100% - 48px);
}
height: calc(100% - 48px);
}
}
</style>

@ -6,6 +6,7 @@
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandComparison/channelDistribution/opt.js
*/
import { bigNumberTransform } from "@/utils/gol/dataTool";
import * as echarts from "echarts";
let colors = [new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
@ -62,7 +63,32 @@ let colors = [new echarts.graphic.LinearGradient(0, 0, 0, 1, [
color: '#071a32'
}
], false)]
export default function createOpt() {
function createData(dataList = []) {
let arr = [];
dataList.forEach(ele => {
let a = [];
//let Data = ele.Data || {};
ele.data.forEach(e => {
a.push(e.value)
})
let o = {
name: ele.key,
type: 'bar',
barGap: 0,
barWidth: 20,
emphasis: {
focus: 'series'
},
data: a
};
arr.push(o)
})
return arr;
}
export default function createOpt(dataList = [],dx = [], brandList = []) {
let info = createData(dataList);
return {
grid: {
top: "56px",
@ -73,7 +99,7 @@ export default function createOpt() {
},
color: colors,
legend: {
data: ['奥迪', '宝马', '奔驰', '吉利', '大众', '别克'],
data: brandList,
textStyle: { //图例文字的样式
color: '#fff'
},
@ -102,7 +128,7 @@ export default function createOpt() {
color: "#fff",
},
},
data: ['新闻', '论坛', '微信', 'APP', '微博', "其他"]
data: dx
}
],
yAxis: [
@ -114,6 +140,12 @@ export default function createOpt() {
color: "#FFF",
},
},
axisLabel: {
formatter: (value) => {
let str = bigNumberTransform(value);
return str;
}
},
splitLine: {
lineStyle: {
type: "dashed", // y轴分割线类型
@ -122,67 +154,6 @@ export default function createOpt() {
},
}
],
series: [
{
name: '奥迪',
type: 'bar',
barGap: '9%',
barWidth: 16,
emphasis: {
focus: 'series'
},
data: [320, 332, 301, 334, 390, 400]
},
{
name: '宝马',
type: 'bar',
barWidth: 16,
barGap: '9%',
emphasis: {
focus: 'series'
},
data: [220, 182, 191, 234, 290, 300]
},
{
name: '奔驰',
type: 'bar',
barWidth: 16,
barGap: '9%',
emphasis: {
focus: 'series'
},
data: [150, 232, 201, 154, 190, 200]
},
{
name: '吉利',
type: 'bar',
barWidth: 16,
barGap: '9%',
emphasis: {
focus: 'series'
},
data: [98, 77, 101, 99, 40, 44]
},
{
name: '大众',
type: 'bar',
barWidth: 16,
barGap: '9%',
emphasis: {
focus: 'series'
},
data: [198, 177, 101, 199, 140, 145]
},
{
name: '别克',
type: 'bar',
barWidth: 16,
barGap: '9%',
emphasis: {
focus: 'series'
},
data: [298, 277, 201, 299, 240, 250]
}
]
series: info
}
}

@ -7,37 +7,77 @@
* @FilePath: /data-show/src/views/MarketingComparison/mcIVC/index.vue
-->
<template>
<div class="mic-outter">
<v-label-div title="互动量对比">
</v-label-div>
<div class="mic-inner">
<v-echarts :opt="opt"></v-echarts>
</div>
<div class="mic-outter" v-loading="load">
<v-label-div title="互动量对比"> </v-label-div>
<div class="mic-inner">
<v-echarts :opt="opt"></v-echarts>
</div>
</div>
</template>
<script>
import {createSingleColumnar} from "@/utils/gol/singleColumnar"
import { getInteractCountMKT0528C } from "@/api/MarketingComparison/index.js";
import { createSingleColumnar } from "@/utils/gol/singleColumnar";
export default {
name: "mcIVC",
data() {
return {
opt: createSingleColumnar(["奥迪", "宝马", "奔驰", "吉利", "大众", "别克"],[2200, 1900, 1800, 1600, 1400, 1500], '#4fb58c')
}
name: "mcIVC",
data() {
return {
form: {
token: "",
sJson: "",
load: false
},
opt: {}
};
},
created() {
this.initData();
},
methods: {
initData() {
this.form.token = this.getToken;
let arr = this.getSComparison;
let sourceData = [];
arr.forEach((ele) => {
let o = {
sBrand: ele.brand,
sSeriesName: ele.model,
sStartTime: ele.startTime,
sEndTime: ele.endTime,
};
sourceData.push(o);
});
this.form.sJson = JSON.stringify(sourceData); //json
this.getData();
},
getData() {
let obj = Object.assign({}, this.getCtime, this.form);
this.load = true;
getInteractCountMKT0528C(obj).then((res) => {
let data = res.data || [];
let dx = [];
let ds = [];
data.forEach((ele) => {
dx.push(ele.key);
ds.push(ele.value);
});
this.opt = createSingleColumnar(dx, ds,"#4fb58c");
this.load = false;
});
}
}
}
};
</script>
<style lang="less" scoped>
.mic-outter {
width: 936px;
height: 460px;
border: 2px solid #0f2a4d;
margin-left: 16px;
.mic-inner {
width: 100%;
height: calc(100% - 48px);
}
width: 936px;
height: 460px;
border: 2px solid #0f2a4d;
margin-left: 16px;
.mic-inner {
width: 100%;
height: calc(100% - 48px);
}
}
</style>

@ -7,35 +7,76 @@
* @FilePath: /data-show/src/views/MarketingComparison/mcOSVC/index.vue
-->
<template>
<div class="mos-outter">
<v-label-div title="整体声量对比">
</v-label-div>
<div class="mos-inner">
<v-echarts :opt="opt"></v-echarts>
</div>
<div class="mos-outter" v-loading="load">
<v-label-div title="整体声量对比"> </v-label-div>
<div class="mos-inner">
<v-echarts :opt="opt"></v-echarts>
</div>
</div>
</template>
<script>
import {createSingleColumnar} from "@/utils/gol/singleColumnar"
import { getCountMKT0528C } from "@/api/MarketingComparison/index.js";
import { createSingleColumnar } from "@/utils/gol/singleColumnar";
export default {
name: "mcOSVC",
data() {
return {
opt: createSingleColumnar(["奥迪", "宝马", "奔驰", "吉利", "大众", "别克"],[2200, 1900, 1800, 1600, 1400, 1500])
}
}
}
name: "mcOSVC",
data() {
return {
form: {
token: "",
sJson: "",
load: false
},
opt: {},
};
},
created() {
this.initData();
},
methods: {
initData() {
this.form.token = this.getToken;
let arr = this.getSComparison;
let sourceData = [];
arr.forEach((ele) => {
let o = {
sBrand: ele.brand,
sSeriesName: ele.model,
sStartTime: ele.startTime,
sEndTime: ele.endTime,
};
sourceData.push(o);
});
this.form.sJson = JSON.stringify(sourceData); //json
this.getData();
},
getData() {
let obj = Object.assign({}, this.getCtime, this.form);
this.load = true;
getCountMKT0528C(obj).then((res) => {
let data = res.data || [];
let dx = [];
let ds = [];
data.forEach((ele) => {
dx.push(ele.key);
ds.push(ele.value);
});
this.opt = createSingleColumnar(dx, ds);
this.load = false;
});
},
},
};
</script>
<style lang="less" scoped>
.mos-outter {
width: 936px;
height: 460px;
border: 2px solid #0f2a4d;
width: 936px;
height: 460px;
border: 2px solid #0f2a4d;
}
.mos-inner {
width: 100%;
height: calc(100% - 48px);
width: 100%;
height: calc(100% - 48px);
}
</style>

@ -7,236 +7,112 @@
* @FilePath: /data-show/src/views/BrandComparison/brandCommunicationTOPMedia/index.vue
-->
<template>
<div class="bcm-outter">
<v-label-div title="品牌传播TOP媒体">
</v-label-div>
<div class="bcm-inner">
<div class="bcm-item" v-for="(item,index) in list" :key="index">
<span class="ss1" :style="{color: colors[index]}">{{item.name}}</span>
<v-ranking-bcm v-for="(it,n) in item.medias" :key="n" :label="it.label" :num="it.num" :val="it.val"></v-ranking-bcm>
</div>
</div>
<div class="bcm-outter" v-loading="load">
<v-label-div title="品牌传播TOP媒体"> </v-label-div>
<div class="bcm-inner">
<div class="bcm-item" v-for="(item, index) in arrList" :key="index">
<span class="ss1" :style="{ color: colors[index] }">{{
item.key
}}</span>
<v-ranking-bcm
v-for="(it, n) in item.data"
:key="n"
:label="it.key"
:num="it.num"
:val="it.value"
></v-ranking-bcm>
</div>
</div>
</div>
</template>
<script>
import vRankingBcm from "./v-ranking-bcm"
import { getSourceCountMKT0528C } from "@/api/MarketingComparison/index.js";
import vRankingBcm from "./v-ranking-bcm";
export default {
name: "mcTOPMedia",
components: {
vRankingBcm
name: "mcTOPMedia",
components: {
vRankingBcm,
},
data() {
return {
form: {
token: "",
sJson: "",
load: false
},
colors: [
"#3373CC",
"#63AECC",
"#54BF93",
"#CC9D12",
"#CC7733",
"#CC5B41",
],
arrList: [],
};
},
created() {
this.initData();
},
methods: {
initData() {
this.form.token = this.getToken;
let arr = this.getSComparison;
let sourceData = [];
arr.forEach((ele) => {
let o = {
sBrand: ele.brand,
sSeriesName: ele.model,
sStartTime: ele.startTime,
sEndTime: ele.endTime,
};
sourceData.push(o);
});
this.form.sJson = JSON.stringify(sourceData); //json
this.getData();
},
data() {
return {
colors: ['#3373CC', '#63AECC', '#54BF93', '#CC9D12', '#CC7733', '#CC5B41'],
list: [
{
name: '奥迪A4',
medias: [
{
num: 1,
label: '微博',
val: 1000
},
{
num: 2,
label: '字节跳动',
val: 800
},
{
num: 3,
label: '搜狐汽车',
val: 600
},
{
num: 4,
label: '汽车之家',
val: 400
},
{
num: 5,
label: '企鹅网',
val: 300
}
]
},
{
name: '宝马525',
medias: [
{
num: 1,
label: '微博',
val: 1000
},
{
num: 2,
label: '字节跳动',
val: 800
},
{
num: 3,
label: '搜狐汽车',
val: 600
},
{
num: 4,
label: '汽车之家',
val: 400
},
{
num: 5,
label: '企鹅网',
val: 300
}
]
},
{
name: '奔驰S600',
medias: [
{
num: 1,
label: '微博',
val: 1000
},
{
num: 2,
label: '字节跳动',
val: 800
},
{
num: 3,
label: '搜狐汽车',
val: 600
},
{
num: 4,
label: '汽车之家',
val: 400
},
{
num: 5,
label: '企鹅网',
val: 300
}
]
},
{
name: '吉利帝豪',
medias: [
{
num: 1,
label: '微博',
val: 1000
},
{
num: 2,
label: '字节跳动',
val: 800
},
{
num: 3,
label: '搜狐汽车',
val: 600
},
{
num: 4,
label: '汽车之家',
val: 400
},
{
num: 5,
label: '企鹅网',
val: 300
}
]
},
{
name: '大众途观',
medias: [
{
num: 1,
label: '微博',
val: 1000
},
{
num: 2,
label: '字节跳动',
val: 800
},
{
num: 3,
label: '搜狐汽车',
val: 600
},
{
num: 4,
label: '汽车之家',
val: 400
},
{
num: 5,
label: '企鹅网',
val: 300
}
]
},
{
name: '别克君威',
medias: [
{
num: 1,
label: '微博',
val: 1000
},
{
num: 2,
label: '字节跳动',
val: 800
},
{
num: 3,
label: '搜狐汽车',
val: 600
},
{
num: 4,
label: '汽车之家',
val: 400
},
{
num: 5,
label: '企鹅网',
val: 300
}
]
}
]
}
}
getData() {
let obj = Object.assign({}, this.getCtime, this.form);
this.load = true;
getSourceCountMKT0528C(obj).then((res) => {
let data = res.data || [];
//
data.forEach((ele) => {
for (let index = 0; index < ele.data.length; index++) {
ele.data[index].num = index + 1;
}
ele.data = ele.data.slice(0,5);
});
this.arrList = data;
this.load = false;
});
},
},
};
</script>
<style lang="less" scoped>
.bcm-outter {
width: 100%;
height: 460px;
border: 2px solid #0f2a4d;
margin-top: 16px;
.bcm-inner {
width: 100%;
height: 460px;
border: 2px solid #0f2a4d;
margin-top: 16px;
.bcm-inner {
width: 100%;
height: calc(100% - 48px);
display: flex;
justify-content: flex-start;
.bcm-item {
width: 282px;
margin-left: 27px;
.ss1 {
display: block;
font-size: 18px;
color: #fff;
font-weight: 500;
padding-top: 14px;
}
}
height: calc(100% - 48px);
display: flex;
justify-content: flex-start;
.bcm-item {
width: 282px;
margin-left: 27px;
.ss1 {
display: block;
font-size: 18px;
color: #fff;
font-weight: 500;
padding-top: 14px;
}
}
}
}
</style>

@ -7,36 +7,77 @@
* @FilePath: /data-show/src/views/MarketingComparison/salesComparison/index.vue
-->
<template>
<div class="ssc-outter">
<v-label-div title="销量对比">
</v-label-div>
<div class="ssc-inner">
<v-echarts :opt="opt"></v-echarts>
</div>
<div class="ssc-outter" v-loading="load">
<v-label-div title="销量对比"> </v-label-div>
<div class="ssc-inner">
<v-echarts :opt="opt"></v-echarts>
</div>
</div>
</template>
<script>
import {createSingleColumnar} from "@/utils/gol/singleColumnar"
import { getSalesCountMKT0528C } from "@/api/MarketingComparison/index.js";
import { createSingleColumnar } from "@/utils/gol/singleColumnar";
export default {
name: "salesComparison",
data() {
return {
opt: createSingleColumnar(["奥迪", "宝马", "奔驰", "吉利", "大众", "别克"],[2200, 1900, 1800, 1600, 1400, 1500], '#4fb58c')
}
}
}
name: "salesComparison",
data() {
return {
form: {
token: "",
sJson: "",
load: false,
},
opt: {}
};
},
created() {
this.initData();
},
methods: {
initData() {
this.form.token = this.getToken;
let arr = this.getSComparison;
let sourceData = [];
arr.forEach((ele) => {
let o = {
sBrand: ele.brand,
sSeriesName: ele.model,
sStartTime: ele.startTime,
sEndTime: ele.endTime,
};
sourceData.push(o);
});
this.form.sJson = JSON.stringify(sourceData); //json
this.getData();
},
getData() {
let obj = Object.assign({}, this.getCtime, this.form);
this.load = true;
getSalesCountMKT0528C(obj).then((res) => {
let data = res.data || [];
let dx = [];
let ds = [];
data.forEach((ele) => {
dx.push(ele.key);
ds.push(ele.value);
});
this.opt = createSingleColumnar(dx, ds,"#4fb58c");
this.load = false;
});
},
},
};
</script>
<style lang="less" scoped>
.ssc-outter {
width: 936px;
height: 460px;
border: 2px solid #0f2a4d;
margin-left: 16px;
.ssc-inner {
width: 100%;
height: calc(100% - 48px);
}
width: 936px;
height: 460px;
border: 2px solid #0f2a4d;
margin-left: 16px;
.ssc-inner {
width: 100%;
height: calc(100% - 48px);
}
}
</style>

@ -60,7 +60,7 @@ export default function createOpt(dx = [], ds = []) {
let str = bigNumberTransform(value);
return str;
}
},
},
splitLine: {
lineStyle: {
type: "dashed", // y轴分割线类型

Loading…
Cancel
Save