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

cxw-010203

Browse Source
prod
lily.zhang 4 years ago
parent 590613bbd6
commit 26c7753e78
9 changed files with 540 additions and 24 deletions
Show Stats Download Patch File Download Diff File

BIN
src/assets/images/BrandInsight/img_yhtx.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

10
src/lycomponents/iLayout/index.vue
Unescape View File

@ -1,7 +1,7 @@
<!--
* @Author: your name
* @Date: 2021-10-13 14:25:26
* @LastEditTime: 2021-10-16 09:56:00
* @LastEditTime: 2021-10-16 16:00:06
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/lycomponents/iLayout/index.vue
@ -9,11 +9,11 @@
<template>
<div class="layout-container">
<iHeader></iHeader>
<vue-scroll>
<div class="layout-body">
<div class="layout-body">
<vue-scroll>
<router-view></router-view>
</div>
</vue-scroll>
</vue-scroll>
</div>
</div>
</template>

10
src/views/BrandComparison/index.vue
Unescape View File

@ -1,7 +1,7 @@
<!--
* @Author: your name
* @Date: 2021-10-15 10:39:43
* @LastEditTime: 2021-10-16 14:43:54
* @LastEditTime: 2021-10-16 15:03:02
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandComparison/index.vue
@ -67,7 +67,9 @@
<v-label-div title="品牌尾翼对比"></v-label-div>
<div class="bc-d6-dd1">
<brandRearWingComparison></brandRearWingComparison>
<informationVolumeByChannel></informationVolumeByChannel>
</div>
<tailTOPMedia></tailTOPMedia>
</div>
</div>
@ -98,6 +100,8 @@ import forumTonalComparison from "./forumTonalComparison"
import comparisonOfPositiveTopicsInTheForum from "./comparisonOfPositiveTopicsInTheForum"
import comparisonOfNegativeTopicsInForums from "./comparisonOfNegativeTopicsInForums"
import brandRearWingComparison from "./brandRearWingComparison"
import informationVolumeByChannel from "./informationVolumeByChannel"
import tailTOPMedia from "./tailTOPMedia"
export default {
name: "brandComparison",
components: {
@ -122,7 +126,9 @@ export default {
forumTonalComparison, // 论坛调性对比
comparisonOfPositiveTopicsInTheForum, // 论坛正面话题对比
comparisonOfNegativeTopicsInForums, // 论坛负面话题对比
brandRearWingComparison // 尾翼趋势对比
brandRearWingComparison, // 尾翼趋势对比
informationVolumeByChannel, // 分渠道信息量
tailTOPMedia
},
data() {

39
src/views/BrandComparison/informationVolumeByChannel/index.vue
Unescape View File

@ -0,0 +1,39 @@
<!--
* @Author: your name
* @Date: 2021-10-16 14:47:23
* @LastEditTime: 2021-10-16 14:54:34
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandComparison/informationVolumeByChannel/index.vue
-->
<template>
<div class="ivb-outter">
<v-label-div title="分渠道信息量" :showLine="false" :eStyle="{'border-style': 'none'}"/>
<div class="ivb-inner">
<v-echarts :opt="opt"></v-echarts>
</div>
</div>
</template>
<script>
import createOpt from "./opt"
export default {
name: "informationVolumeByChannel",
data() {
return {
opt: createOpt()
}
}
}
</script>
<style lang="less" scoped>
.ivb-outter {
width: 944px;
height: 412px;
.ivb-inner {
width: 100%;
height: calc(100% - 48px);
}
}
</style>

126
src/views/BrandComparison/informationVolumeByChannel/opt.js
Unescape View File

@ -0,0 +1,126 @@
/*
* @Author: your name
* @Date: 2021-10-15 15:15:27
* @LastEditTime: 2021-10-15 17:44:34
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandComparison/channelDistribution/opt.js
*/
export default function createOpt() {
return {
grid: {
top: "56px",
left: "16px",
right: "28px",
bottom: "16px",
containLabel: true,
},
legend: {
data: ['奥迪', '宝马', '奔驰', '吉利', '大众', '别克'],
textStyle: { //图例文字的样式
color: '#fff'
},
y: 12,
x: 16
},
tooltip: {
trigger: "axis",
backgroundColor: "#08182F",
color: "#fff",
borderColor: "#3373CC",
textStyle: {
color: "#fff", //设置文字颜色
},
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
},
xAxis: [
{
type: 'category',
axisTick: {
show: false,
},
axisLine: {
show: false,
lineStyle: {
color: "#fff",
},
},
data: ['新闻', '论坛', '微信', 'APP', '微博', "其他"]
}
],
yAxis: [
{
type: 'value',
axisLine: {
show: false,
lineStyle: {
color: "#FFF",
},
},
splitLine: {
lineStyle: {
type: "dashed", // y轴分割线类型
color: "#012b4b",
},
},
}
],
series: [
{
name: '奥迪',
type: 'bar',
barGap: 0,
barWidth: 16,
emphasis: {
focus: 'series'
},
data: [320, 332, 301, 334, 390, 400]
},
{
name: '宝马',
type: 'bar',
barWidth: 16,
emphasis: {
focus: 'series'
},
data: [220, 182, 191, 234, 290, 300]
},
{
name: '奔驰',
type: 'bar',
barWidth: 16,
emphasis: {
focus: 'series'
},
data: [150, 232, 201, 154, 190, 200]
},
{
name: '吉利',
type: 'bar',
barWidth: 16,
emphasis: {
focus: 'series'
},
data: [98, 77, 101, 99, 40, 44]
},
{
name: '大众',
type: 'bar',
barWidth: 16,
emphasis: {
focus: 'series'
},
data: [198, 177, 101, 199, 140, 145]
},
{
name: '别克',
type: 'bar',
barWidth: 16,
emphasis: {
focus: 'series'
},
data: [298, 277, 201, 299, 240, 250]
}
]
}
}

91
src/views/BrandComparison/tailTOPMedia/index.vue
Unescape View File

@ -0,0 +1,91 @@
<!--
* @Author: your name
* @Date: 2021-10-16 14:56:13
* @LastEditTime: 2021-10-16 15:15:52
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandComparison/tailTOPMedia/index.vue
-->
<template>
<div class="ttm-outter">
<v-label-div title="尾翼TOP媒体" :showLine="false" :eStyle="{'border-style': 'none'}" />
<div class="ttm-inner">
<div class="ttm-item" v-for="(item,index) in list" :key="index">
<span class="s1" :style="{color: colors[index]}">{{item.name}}</span>
<div class="d1">
<v-echarts :opt="item.drawOpt"></v-echarts>
</div>
</div>
</div>
</div>
</template>
<script>
import {createSingleColumnar} from "@/utils/gol/singleColumnar"
export default {
name: "tailTOPMedia",
data() {
return {
colors: ['#3373CC', '#63AECC', '#54BF93', '#CC9D12', '#CC7733', '#CC5B41'],
list: [
{
name: "奥迪",
drawOpt: createSingleColumnar(["新浪微博", "汽车之家", "懂车帝", "抖音", "快手"],[2200, 1900, 1800, 1600, 1400])
},
{
name: "宝马",
drawOpt: createSingleColumnar(["新浪微博", "汽车之家", "懂车帝", "抖音", "快手"],[2200, 1900, 1800, 1600, 1400], '#63AECC')
},
{
name: "奔驰",
drawOpt: createSingleColumnar(["新浪微博", "汽车之家", "懂车帝", "抖音", "快手"],[2200, 1900, 1800, 1600, 1400], '#54BF93')
},
{
name: "吉利",
drawOpt: createSingleColumnar(["新浪微博", "汽车之家", "懂车帝", "抖音", "快手"],[2200, 1900, 1800, 1600, 1400], '#CC9D12')
},
{
name: "大众",
drawOpt: createSingleColumnar(["新浪微博", "汽车之家", "懂车帝", "抖音", "快手"],[2200, 1900, 1800, 1600, 1400], '#CC7733')
},
{
name: "别克",
drawOpt: createSingleColumnar(["新浪微博", "汽车之家", "懂车帝", "抖音", "快手"],[2200, 1900, 1800, 1600, 1400], '#CC5B41')
}
],
};
},
};
</script>
<style lang="less" scoped>
.ttm-outter {
width: 100%;
height: auto;
.ttm-inner {
width: 100%;
height: auto;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
.ttm-item {
width: 628px;
height: 380px;
.s1 {
padding-left: 16px;
width: 100%;
height: 40px;
line-height: 40px;
font-size: 18px;
color: #fff;
}
.d1 {
width: 100%;
height: calc(100% - 40px);
}
}
}
}
</style>

49
src/views/WeiboDetails/index.vue
Unescape View File

@ -1,7 +1,7 @@
<!--
* @Author: your name
* @Date: 2021-10-14 09:00:09
* @LastEditTime: 2021-10-14 19:44:08
* @LastEditTime: 2021-10-16 15:54:30
* @LastEditors: Please set LastEditors
* @Description: 微博详情
* @FilePath: /data-show/src/views/WeiboDetails/index.vue
@ -31,14 +31,14 @@
<span class="s2">参与大V数量</span>
</div>
</div>
<div class="d2">
<div class="d2">
<img class="dd1" src="../../assets/images/BrandInsight/ic_yhs.png" />
<div class="dd2">
<span class="s1">13200</span>
<span class="s2">参与用户数</span>
</div>
</div>
<div class="d2">
<div class="d2">
<img class="dd1" src="../../assets/images/BrandInsight/ic_yqdx.png" />
<div class="dd3">
<span class="s3" style="background: #3373CC"></span>
@ -46,7 +46,7 @@
<span class="s3" style="background: #CC9D12;width: 96px"></span>
</div>
</div>
</div>
</div>
</div>
<div class="wd-d2">
<weibo-communication-trend></weibo-communication-trend>
@ -63,20 +63,26 @@
<weiboSpreadFission></weiboSpreadFission>
<weiboTonalDistribution></weiboTonalDistribution>
</div>
<div class="wd-d5">
<positiveViewKOL></positiveViewKOL>
<negativeOpinionKOL></negativeOpinionKOL>
</div>
</div>
</div>
</template>
<script>
import weiboCommunicationTrend from "./weiboCommunicationTrend"
import weiboContentType from "./weiboContentType"
import weiboCharacters from "./weiboCharacters"
import weiboUserActiveArea from "./weiboUserActiveArea"
import weiboContentTOPVolume from "./weiboContentTOPVolume"
import modelPopularity from "./modelPopularity"
import weiboWordCloud from "./weiboWordCloud"
import weiboSpreadFission from "./weiboSpreadFission"
import weiboTonalDistribution from "./weiboTonalDistribution"
import weiboCommunicationTrend from "./weiboCommunicationTrend";
import weiboContentType from "./weiboContentType";
import weiboCharacters from "./weiboCharacters";
import weiboUserActiveArea from "./weiboUserActiveArea";
import weiboContentTOPVolume from "./weiboContentTOPVolume";
import modelPopularity from "./modelPopularity";
import weiboWordCloud from "./weiboWordCloud";
import weiboSpreadFission from "./weiboSpreadFission";
import weiboTonalDistribution from "./weiboTonalDistribution";
import positiveViewKOL from "./positiveViewKOL";
import negativeOpinionKOL from "./negativeOpinionKOL"
export default {
name: "WeiboDetails",
components: {
@ -88,13 +94,15 @@ export default {
modelPopularity, // 车型热度
weiboWordCloud, // 词云分布
weiboSpreadFission, // 微博传播裂变
weiboTonalDistribution // 调性分布
weiboTonalDistribution, // 调性分布
positiveViewKOL, // 正面观点KOL
negativeOpinionKOL // 负面观点KOL
},
methods: {
goback() {
this.$router.go(-1);
}
}
},
},
};
</script>
@ -160,7 +168,7 @@ export default {
display: inline-block;
margin-right: 2px;
}
}
}
}
}
}
@ -185,4 +193,11 @@ export default {
justify-content: flex-start;
margin-top: 16px;
}
.wd-d5 {
width: 100%;
height: auto;
display: flex;
justify-content: flex-start;
margin-top: 16px;
}
</style>

120
src/views/WeiboDetails/negativeOpinionKOL/index.vue
Unescape View File

@ -0,0 +1,120 @@
<!--
* @Author: your name
* @Date: 2021-10-16 15:18:44
* @LastEditTime: 2021-10-16 15:58:24
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/WeiboDetails/positiveViewKOL/index.vue
-->
<template>
<div class="pv-outter">
<v-label-div title="负面观点KOL">
</v-label-div>
<div class="pv-inner">
<div class="pv-item" v-for="(item,index) in list" :key="index">
<div class="dm"></div>
<div class="d-f">
<div class="d1">{{item.title}}</div>
<div class="d2">粉丝数：<span class="d2-s1">{{item.fans}}</span></div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "negativeOpinionKOL",
data() {
return {
list: [
{
title: "汽车之家",
fans: '1106w'
},
{
title: "爱卡汽车",
fans: '1326w'
},
{
title: "新浪汽车",
fans: '1326w'
},
{
title: "车评人",
fans: '1326w'
},
{
title: "汽车专家",
fans: '1326w'
},
{
title: "萝卜报告",
fans: '1326w'
}
]
}
}
};
</script>
<style lang="less" scoped>
.pv-outter {
width: 936px;
height: 246px;
border: 2px solid #0f2a4d;
margin-left: 16px;
.pv-inner {
width: 100%;
height: calc(100% - 48px);
padding: 0px 0px 16px 16px;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
.pv-item {
width: 285px;
height: 72px;
display: flex;
justify-content: flex-start;
align-items: center;
position: relative;
margin-right: 16px;
margin-top: 16px;
.dm {
position: absolute;
width: 72px;
height: 72px;
border-radius: 72px;
border: 1px solid #ccc;
left: 0px;
top: 0px;
background-color: #fff;
z-index: 10;
}
.d-f {
position: absolute;
width: 249px;
height: 64px;
left: 36px;
padding-left: 65px;
background-image: url("../../../assets/images/BrandInsight/img_yhtx.png");
.d1 {
font-size: 14px;
color: #fff;
font-weight: 500;
margin-top: 10px;
}
.d2 {
color: #70869a;
font-size: 12px;
.d2-s1 {
font-size: 12px;
font-family: Bebas;
color: #f49847;
}
}
}
}
}
}
</style>

119
src/views/WeiboDetails/positiveViewKOL/index.vue
Unescape View File

@ -0,0 +1,119 @@
<!--
* @Author: your name
* @Date: 2021-10-16 15:18:44
* @LastEditTime: 2021-10-16 15:56:52
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/WeiboDetails/positiveViewKOL/index.vue
-->
<template>
<div class="pv-outter">
<v-label-div title="正面观点KOL">
</v-label-div>
<div class="pv-inner">
<div class="pv-item" v-for="(item,index) in list" :key="index">
<div class="dm"></div>
<div class="d-f">
<div class="d1">{{item.title}}</div>
<div class="d2">粉丝数：<span class="d2-s1">{{item.fans}}</span></div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "positiveViewKOL",
data() {
return {
list: [
{
title: "新浪汽车",
fans: '1106w'
},
{
title: "易车",
fans: '1326w'
},
{
title: "主编说车",
fans: '1326w'
},
{
title: "我是评车人",
fans: '1326w'
},
{
title: "汽车老手",
fans: '1326w'
},
{
title: "艾兰汽车",
fans: '1326w'
}
]
}
}
};
</script>
<style lang="less" scoped>
.pv-outter {
width: 936px;
height: 246px;
border: 2px solid #0f2a4d;
.pv-inner {
width: 100%;
height: calc(100% - 48px);
padding: 0px 0px 16px 16px;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
.pv-item {
width: 285px;
height: 72px;
display: flex;
justify-content: flex-start;
align-items: center;
position: relative;
margin-right: 16px;
margin-top: 16px;
.dm {
position: absolute;
width: 72px;
height: 72px;
border-radius: 72px;
border: 1px solid #ccc;
left: 0px;
top: 0px;
background-color: #fff;
z-index: 10;
}
.d-f {
position: absolute;
width: 249px;
height: 64px;
left: 36px;
padding-left: 65px;
background-image: url("../../../assets/images/BrandInsight/img_yhtx.png");
.d1 {
font-size: 14px;
color: #fff;
font-weight: 500;
margin-top: 10px;
}
.d2 {
color: #70869a;
font-size: 12px;
.d2-s1 {
font-size: 12px;
font-family: Bebas;
color: #f49847;
}
}
}
}
}
}
</style>
Write Preview
Loading…
Cancel
Save