yunyang
/
carInsightSystem
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

lyl-事件详情页

Browse Source
prod
阿丽 4 years ago
parent 836eb7cab1
commit 4d39139f8b
10 changed files with 545 additions and 347 deletions
Show Stats Download Patch File Download Diff File

61
src/api/EventDetails/index.js
Unescape View File

@ -0,0 +1,61 @@
import httpService from "@/request"
// 热点事件传播导向
export function getPropagationDirection0528(params) {
let obj = Object.assign({action: 'getPropagationDirection0528', sType: 'HotEvent0528'}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}
// 事件洞察列表
export function getHotEventsList(params) {
let obj = Object.assign({action: 'getHotEventsList', sType: 'HotEvent'}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}
// 热点事件top车型分布
export function getHotEventSseries(params) {
let obj = Object.assign({action: 'getHotEventSseries', sType: 'HotEvent0528'}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}
// 热点事件渠道分布
export function getEventsSourceTypeByEventsType0528(params) {
let obj = Object.assign({action: 'getEventsSourceTypeByEventsType0528', sType: 'HotEvent0528'}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}
// 品牌数据-数据传播总量
export function getBrandOverviewCount0528(params) {
let obj = Object.assign({action: 'getBrandOverviewCount0528', sType: 'BrandOverview'}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'post',
data: obj,
headers: {
'content-type': 'application/x-www-form-urlencoded'
}
})
}

34
src/views/EventDetails/distributionOfHotEventChannels/index.vue
Unescape View File

@ -16,15 +16,43 @@
</template>
<script>
import {getEventsSourceTypeByEventsType0528} from '@/api/EventDetails'
import createOpt from "./opt";
export default {
name: "distributionOfHotEventChannels",
data() {
return {
opt: createOpt(),
};
opt: {},
form: {
sBrand: "",
token: ""
}
}
},
};
created() {
this.form.token = this.getToken;
this.form.sBrand = this.getBrand.brandname || '奥迪';
this.getDdta();
},
methods:{
getDdta(){
let obj = Object.assign({}, this.getCtime2, this.form);
getEventsSourceTypeByEventsType0528(obj).then(res => {
let data = res.data || [];
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);
})
}
}
}
</script>
<style lang="less" scoped>

136
src/views/EventDetails/distributionOfHotEventChannels/opt.js
Unescape View File

@ -1,18 +1,71 @@
/*
* @Author: your name
* @Date: 2021-10-09 11:01:19
* @LastEditTime: 2021-10-13 14:21:44
* @LastEditTime: 2021-10-29 15:52:04
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/Index/spreadTheSound/opt.js
*/
export default function createOpt() {
import * as echarts from "echarts";
import { bigNumberTransform } from "@/utils/gol/dataTool"
let colors = ['rgba(203,118,58,1)', 'rgba(202,156,17,1)', 'rgba(90,203,156,1)', 'rgba(99,173,204,1)', 'rgba(55,113,190,1)', "rgba(138,191,66,1)", 'rgba(181,191,67,1)', 'rgba(203,91,65,1)']
let colors2 = ['rgba(203,118,58,0.6)', 'rgba(202,156,17,0.6)', 'rgba(90,203,156,0.6)', 'rgba(99,173,204,0.6)', 'rgba(55,113,190,0.6)', "rgba(138,191,66,0.6)", 'rgba(181,191,67,0.6)', 'rgba(203,91,65,0.6)']
function createData(ds = []) {
let arr = [];
for (let i = 0; i < ds.length; i++) {
let arr1 = ds[i];
for (let j = 0; j < arr1.length; j++) {
let n = arr.findIndex(ele => {
return ele.name === arr1[j].key;
})
if (n === -1) {
let obj =
{
name: arr1[j].key,
type: 'bar',
stack: 'total',
barWidth: 22,
barGap: "-100%",
emphasis: {
focus: 'series'
},
itemStyle: {
normal: {
//柱体的颜色
//右，下，左，上（1，0，0，0）表示从正右开始向左渐变
color: function () {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: colors[j]
},
{
offset: 1,
color: colors2[j]
}
], false);
}
}
},
data: [arr1[j].value]
}
arr.push(obj)
} else {
arr[n].data.push(arr1[j].value)
}
}
}
return arr;
}
export default function createOpt(dx = [], ds = []) {
const data = createData(ds);
return {
grid: {
left: '3%',
right: '6%',
bottom: '3%',
top: '16%',
left: 10,
right: 10,
bottom: 10,
top: 46,
containLabel: true
},
tooltip: {
@ -25,12 +78,16 @@ export default function createOpt() {
},
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
},
color: colors,
legend: {
textStyle: { //图例文字的样式
color: '#fff'
color: '#fff',
fontSize:10
},
y: 'top',
x: 23
y: 10,
x: 10,
itemWidth: 10,
itemHeight: 10,
},
xAxis: {
type: 'category',
@ -43,7 +100,7 @@ export default function createOpt() {
color: "#fff",
},
},
data: ['产品代言', '新车上市', '新品发布', '领导人', '维权']
data: dx
},
yAxis: {
type: 'value',
@ -53,6 +110,12 @@ export default function createOpt() {
color: "#fff",
},
},
axisLabel: {
formatter: (value) => {
let str = bigNumberTransform(value);
return str;
}
},
splitLine: {
lineStyle: {
type: "dashed", // y轴分割线类型
@ -60,58 +123,7 @@ export default function createOpt() {
},
},
},
series: [
{
name: '新闻',
type: 'bar',
stack: 'total',
barWidth: 24,
emphasis: {
focus: 'series'
},
data: [320, 302, 301, 334, 390]
},
{
name: '论坛',
type: 'bar',
stack: 'total',
barWidth: 24,
emphasis: {
focus: 'series'
},
data: [120, 132, 101, 134, 90]
},
{
name: '微信',
type: 'bar',
stack: 'total',
barWidth: 24,
emphasis: {
focus: 'series'
},
data: [220, 182, 191, 234, 290]
},
{
name: '微博',
type: 'bar',
stack: 'total',
barWidth: 24,
emphasis: {
focus: 'series'
},
data: [150, 212, 201, 154, 190]
},
{
name: 'APP',
type: 'bar',
stack: 'total',
barWidth: 24,
emphasis: {
focus: 'series'
},
data: [820, 832, 901, 934, 1290]
}
]
series: data
}
}

34
src/views/EventDetails/distributionOfTOPModelsOfHotEvents/index.vue
Unescape View File

@ -18,12 +18,44 @@
</template>
<script>
import {getHotEventSseries} from '@/api/EventDetails'
import createOpt from "./opt"
export default {
name: "distributionOfTOPModelsOfHotEvents",
data() {
return {
opt: createOpt()
opt: {},
form: {
sQueryType: 1,
sBrand: "",
token: ""
}
}
},
created() {
this.form.token = this.getToken;
this.form.sBrand = this.getBrand.brandname || '奥迪';
this.getDdta();
},
methods:{
getDdta() {
let obj = Object.assign({}, this.getCtime2, this.form);
getHotEventSseries(obj).then(res => {
let data = res.data || [];
let dx = [];
let ds = [];
console.log(data);
data.forEach(ele => {
let key = ele.key;
let value = ele.data;
dx.push(key);
ds.push(value);
});
this.opt = createOpt(dx, ds);
// this.opt = createOpt()
})
}
}
}

136
src/views/EventDetails/distributionOfTOPModelsOfHotEvents/opt.js
Unescape View File

@ -1,18 +1,71 @@
/*
* @Author: your name
* @Date: 2021-10-09 11:01:19
* @LastEditTime: 2021-10-13 14:08:29
* @LastEditTime: 2021-10-29 15:52:04
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/Index/spreadTheSound/opt.js
*/
export default function createOpt() {
import * as echarts from "echarts";
import { bigNumberTransform } from "@/utils/gol/dataTool"
let colors = ['rgba(203,118,58,1)', 'rgba(202,156,17,1)', 'rgba(90,203,156,1)', 'rgba(99,173,204,1)', 'rgba(55,113,190,1)', "rgba(138,191,66,1)", 'rgba(181,191,67,1)', 'rgba(203,91,65,1)']
let colors2 = ['rgba(203,118,58,0.6)', 'rgba(202,156,17,0.6)', 'rgba(90,203,156,0.6)', 'rgba(99,173,204,0.6)', 'rgba(55,113,190,0.6)', "rgba(138,191,66,0.6)", 'rgba(181,191,67,0.6)', 'rgba(203,91,65,0.6)']
function createData(ds = []) {
let arr = [];
for (let i = 0; i < ds.length; i++) {
let arr1 = ds[i];
for (let j = 0; j < arr1.length; j++) {
let n = arr.findIndex(ele => {
return ele.name === arr1[j].key;
})
if (n === -1) {
let obj =
{
name: arr1[j].key,
type: 'bar',
stack: 'total',
barWidth: 22,
barGap: "-100%",
emphasis: {
focus: 'series'
},
itemStyle: {
normal: {
//柱体的颜色
//右，下，左，上（1，0，0，0）表示从正右开始向左渐变
color: function () {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: colors[j]
},
{
offset: 1,
color: colors2[j]
}
], false);
}
}
},
data: [arr1[j].value]
}
arr.push(obj)
} else {
arr[n].data.push(arr1[j].value)
}
}
}
return arr;
}
export default function createOpt(dx = [], ds = []) {
const data = createData(ds);
return {
grid: {
left: '3%',
right: '6%',
bottom: '3%',
top: '16%',
left: 10,
right: 10,
bottom: 10,
top: 46,
containLabel: true
},
tooltip: {
@ -25,12 +78,16 @@ export default function createOpt() {
},
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
},
color: colors,
legend: {
textStyle: { //图例文字的样式
color: '#fff'
color: '#fff',
fontSize:10
},
y: 'top',
x: 23
y: 10,
x: 10,
itemWidth: 10,
itemHeight: 10,
},
xAxis: {
type: 'category',
@ -43,7 +100,7 @@ export default function createOpt() {
color: "#fff",
},
},
data: ['奥迪A4', '奥迪A3', '奥迪A6', '奥迪A8', '奥迪Q3']
data: dx
},
yAxis: {
type: 'value',
@ -53,6 +110,12 @@ export default function createOpt() {
color: "#fff",
},
},
axisLabel: {
formatter: (value) => {
let str = bigNumberTransform(value);
return str;
}
},
splitLine: {
lineStyle: {
type: "dashed", // y轴分割线类型
@ -60,58 +123,7 @@ export default function createOpt() {
},
},
},
series: [
{
name: '产品代言',
type: 'bar',
stack: 'total',
barWidth: 24,
emphasis: {
focus: 'series'
},
data: [320, 302, 301, 334, 390]
},
{
name: '新车上市',
type: 'bar',
stack: 'total',
barWidth: 24,
emphasis: {
focus: 'series'
},
data: [120, 132, 101, 134, 90]
},
{
name: '新品发布',
type: 'bar',
stack: 'total',
barWidth: 24,
emphasis: {
focus: 'series'
},
data: [220, 182, 191, 234, 290]
},
{
name: '领导人',
type: 'bar',
stack: 'total',
barWidth: 24,
emphasis: {
focus: 'series'
},
data: [150, 212, 201, 154, 190]
},
{
name: '维权',
type: 'bar',
stack: 'total',
barWidth: 24,
emphasis: {
focus: 'series'
},
data: [820, 832, 901, 934, 1290]
}
]
series: data
}
}

47
src/views/EventDetails/eventCorrelation/index.vue
Unescape View File

@ -12,29 +12,59 @@
<v-btn @click="goback">返回品牌洞察</v-btn>
</div>
<div class="ec-inner">
<span class="ec-label">奥迪</span>
<span class="ec-label">{{brand}}</span>
<div class="ec-footer">
<img class="m1" src="../../../assets/images/BrandInsight/ic_glsl.png" />
<a-popover title="事件关联数量">
<template slot="content">
<div class="pd-item" v-for="(item,index) in list" :key="index">
<span>{{item.key}}</span>
<span>{{item.value}}</span>
</div>
</template>
<div class="d1">
<span class="s1">74,073,195</span>
<span class="s1">{{zolNum}}</span>
<span class="s2">事件关联数量(条)</span>
</div>
</a-popover>
</div>
</div>
</div>
</template>
<script>
import { getBrandOverviewCount0528 } from "@/api/EventDetails";
export default {
name: "eventCorrelation",
data() {
return {};
return {
brand: "",
form: {
sBrand: "",
token: "",
},
zolNum: 0,
list: [],
};
},
created() {
this.form.token = this.getToken;
this.brand = this.getBrand.brandname || "奥迪";
this.getDdta();
},
methods: {
getDdta() {
let obj = Object.assign({}, this.getCtime2, this.form);
getBrandOverviewCount0528(obj).then((res) => {
let data = res.data;
this.zolNum = data.count;
this.list = data.data;
});
},
goback() {
this.$router.go(-1);
}
}
},
},
};
</script>
@ -97,4 +127,11 @@ export default {
}
}
}
.pd-item {
display: flex;
justify-content: space-between;
color: #fff;
border-bottom: 1px solid #173b6d;
padding: 10px;
}
</style>

25
src/views/EventDetails/hotEventPropagationOriented/index.vue
Unescape View File

@ -17,12 +17,35 @@
</template>
<script>
import {getPropagationDirection0528} from '@/api/EventDetails'
import createOpt from "./opt"
export default {
name: "hotEventPropagationOriented",
props: ["brand"],
data() {
return {
opt: createOpt()
opt: createOpt(),
form: {
sBrand: "",
token: ""
}
}
},
created() {
this.form.token = this.getToken;
this.form.sBrand = this.getBrand.brandname || '奥迪';
this.getDdta();
},
methods:{
getDdta() {
let obj = Object.assign({}, this.getCtime2, this.form);
getPropagationDirection0528(obj).then(res => {
let data = res.data;
let population = data.links;
let citylist = data.data;
this.opt = createOpt(citylist, population)
})
}
}
}

110
src/views/EventDetails/hotEventPropagationOriented/opt.js
Unescape View File

@ -1,62 +1,62 @@
/*
* @Author: your name
* @Date: 2021-10-13 09:09:51
* @LastEditTime: 2021-10-13 11:05:48
* @LastEditTime: 2021-10-27 17:32:39
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/EventDetails/hotEventPropagationOriented/opt.js
*/
const citylist = [
{name: '领导人'},
{name: '自然'},
{name: '明星代言人'},
{name: '车展'},
{name: '新车上市'},
{name: '新闻'},
{name: '论坛'},
{name: '微博'},
{name: 'APP'},
{name: '短视频'},
{name: '吉利'},
{name: '奔驰'},
{name: '宝马'},
{name: '特斯拉'},
{name: '奥迪'},
{name: '女车主表态'},
{name: '广州车展'},
{name: '销量大增'},
];
const population=[
{source: "领导人", target: "APP", value: 2000},
{source: "APP", target: "宝马", value: 3000},
//
{source: "明星代言人", target: "论坛", value: 1000},
//
{source: "自然", target: "论坛", value: 2100},
{source: "论坛", target: "宝马", value: 3100},
{source: "宝马", target: "广州车展", value: 5100},
//
{source: "自然", target: "新闻", value: 3234},
{source: "新闻", target: "吉利", value: 3000},
{source: "吉利", target: "销量大增", value: 6000},
//
{source: "车展", target: "微博", value: 1234},
{source: "微博", target: "特斯拉", value: 3234},
{source: "特斯拉", target: "销量大增", value: 4234},
//
{source: "新车上市", target: "APP", value: 1234},
{source: "APP", target: "宝马", value: 1234},
//
{source: "新车上市", target: "短视频", value: 2234},
{source: "短视频", target: "奔驰", value: 2234},
{source: "奔驰", target: "广州车展", value: 2234},
//
{source: "APP", target: "奥迪", value: 2234},
{source: "奥迪", target: "销量大增", value: 2234},
//
{source: "奔驰", target: "女车主表态", value: 5234},
];
export default function createOpt() {
// const citylist = [
// {name: '领导人'},
// {name: '自然'},
// {name: '明星代言人'},
// {name: '车展'},
// {name: '新车上市'},
// {name: '新闻'},
// {name: '论坛'},
// {name: '微博'},
// {name: 'APP'},
// {name: '短视频'},
// {name: '吉利'},
// {name: '奔驰'},
// {name: '宝马'},
// {name: '特斯拉'},
// {name: '奥迪'},
// {name: '女车主表态'},
// {name: '广州车展'},
// {name: '销量大增'},
// ];
// const population=[
// {source: "领导人", target: "APP", value: 2000},
// {source: "APP", target: "宝马", value: 3000},
// //
// {source: "明星代言人", target: "论坛", value: 1000},
// //
// {source: "自然", target: "论坛", value: 2100},
// {source: "论坛", target: "宝马", value: 3100},
// {source: "宝马", target: "广州车展", value: 5100},
// //
// {source: "自然", target: "新闻", value: 3234},
// {source: "新闻", target: "吉利", value: 3000},
// {source: "吉利", target: "销量大增", value: 6000},
// //
// {source: "车展", target: "微博", value: 1234},
// {source: "微博", target: "特斯拉", value: 3234},
// {source: "特斯拉", target: "销量大增", value: 4234},
// //
// {source: "新车上市", target: "APP", value: 1234},
// {source: "APP", target: "宝马", value: 1234},
// //
// {source: "新车上市", target: "短视频", value: 2234},
// {source: "短视频", target: "奔驰", value: 2234},
// {source: "奔驰", target: "广州车展", value: 2234},
// //
// {source: "APP", target: "奥迪", value: 2234},
// {source: "奥迪", target: "销量大增", value: 2234},
// //
// {source: "奔驰", target: "女车主表态", value: 5234},
// ];
export default function createOpt(citylist=[],population=[]) {
return {
tooltip: {
trigger: "item",
@ -75,6 +75,10 @@ export default function createOpt() {
data: citylist,
links: population,
focusNodeAdjacency: 'allEdges', //鼠标悬停到节点或边上，相邻接的节点和边高亮显示
left: 16,
right: 120,
top: 16,
bottom: 16,
itemStyle: {
borderWidth: 1,
},
@ -86,7 +90,7 @@ export default function createOpt() {
label: {
color: "#fff",
fontWeight: 'bold',
fontSize: 14
fontSize: 10
}
}
]

115
src/views/EventDetails/hotOther/index.vue
Unescape View File

@ -13,89 +13,70 @@
<dv-scroll-board :config="config" :style="{ width: '100%', height: '27rem' }" />
</div>
<div class="ho-footer">
<span class="ho-f-s1">共 <span style="color: #2c66b5;">26785</span> 条</span>
<a-pagination v-model="currentPage" :total="50" show-less-items />
<span class="ho-f-s1">共 <span style="color: #2c66b5;">{{total}}</span> 条</span>
<a-pagination v-model="form.iPageIndex" :total="total" show-less-items @change="handlerPagnation"/>
</div>
</div>
</template>
<script>
import { getHotEventsList } from "@/api/EventDetails";
export default {
name: "hotOther",
data() {
return {
currentPage: 1,
form: {
token: "",
ssBrand: "",
iPageIndex: 1,
iPageSize: 20,
},
total: 0,
config: {
},
};
},
created() {
this.form.token = this.getToken;
this.form.sBrand = this.getBrand.brandname || "奥迪";
this.getDdta();
},
methods: {
// 获取后台数据
getDdta() {
let obj = Object.assign({}, this.getCtime2, this.form);
getHotEventsList(obj).then((res) => {
let data = res.data || [];
let totalNum = res.totalNum || 0;
this.total = totalNum;
let arr = [];
data.forEach((ele) => {
let a = [
ele.events_title,
ele.events_influence,
ele.maxSourcetime,
ele.events_brand,
];
arr.push(a);
});
this.config = {
headerBGC: "#0c203b",
oddRowBGC: "#173b6d",
evenRowBGC: "rgba(69, 149, 244, 0)",
rowNum: 10,
columnWidth: [224,'', 160],
header: ["事件列表", "影响力", "时间", "关联车型"],
data: [
[
"2021广州车展，现场更多你没…",
"40.90",
"2021-08-17 12:00:00",
"A3",
],
[
"丰田威兰达高性能版配置曝光...",
"39.90",
"2021-08-17 12:00:00",
"Q3",
],
[
"广州车展，15分钟抢空的限定…",
"38.20",
"2021-08-17 12:00:00",
"A4",
],
[
"2021广州车展，现场更多你没…",
"37.50",
"2021-08-17 12:00:00",
"Q4",
],
[
"全新本田思域发布动力提升内…",
"36.50",
"2021-08-17 12:00:00",
"A5",
],
[
"全新本田思域发布动力提升内…",
"36.50",
"2021-08-17 12:00:00",
"Q5",
],
[
"全新本田思域发布动力提升内…",
"36.50",
"2021-08-17 12:00:00",
"A6",
],
[
"全新本田思域发布动力提升内…",
"36.50",
"2021-08-17 12:00:00",
"Q6",
],
[
"全新本田思域发布动力提升内…",
"36.50",
"2021-08-17 12:00:00",
"Q7",
],
[
"全新本田思域发布动力提升内…",
"36.50",
"2021-08-17 12:00:00",
"A7",
],
],
},
columnWidth: [170,60,160],
header: ["事件列表", "影响力", "时间", "关联品牌"],
data: arr,
};
console.log(data);
});
},
// 分页处理
handlerPagnation(page) {
this.form.iPageIndex = page;
this.getDdta()
}
},
};
</script>

8
src/views/EventDetails/index.vue
Unescape View File

@ -33,12 +33,20 @@ import distributionOfTOPModelsOfHotEvents from "./distributionOfTOPModelsOfHotEv
import distributionOfHotEventChannels from "./distributionOfHotEventChannels"
export default {
name: "event-details",
data() {
return {
}
},
components: {
hotEventPropagationOriented, // 热点事件传播导向桑基图
eventCorrelation, // 中间
hotOther, // 热点事件传播导向列表
distributionOfTOPModelsOfHotEvents, // 热点事件TOP车型分布
distributionOfHotEventChannels // 热点事件渠道分布
},
created() {
}
}
</script>

Write Preview
Loading…
Cancel
Save