prod
lily.zhang 3 years ago
parent 334c398dd5
commit 95ea1ea690

@ -1,7 +1,7 @@
/*
* @Author: your name
* @Date: 2021-10-12 13:56:13
* @LastEditTime: 2021-11-05 12:00:57
* @LastEditTime: 2021-11-05 14:07:28
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/mixins/index.js
@ -78,10 +78,10 @@ export default {
}
},
computed: {
...mapGetters(['getZoom', 'getToken', 'getUser', 'getAccount', 'getCommTime', 'getCtime', 'getCtime2', 'getHeaderType', 'getBrand', 'getModel','getSComparison'])
...mapGetters(['getZoom', 'getToken', 'getUser', 'getAccount', 'getCommTime', 'getCtime', 'getCtime2', 'getHeaderType', 'getBrand', 'getModel','getSComparison','getBComparison'])
},
methods: {
...mapActions(["setZoom", 'setToken', 'setUser', 'setAccount', 'setCommTime', 'setCtime', 'setCtime2', 'setHeaderType', 'setBrand', 'setModel', 'setSComparison']),
...mapActions(["setZoom", 'setToken', 'setUser', 'setAccount', 'setCommTime', 'setCtime', 'setCtime2', 'setHeaderType', 'setBrand', 'setModel', 'setSComparison','setBComparison']),
// 获取当前日期时间
getDatetime() {
let now = new Date();

@ -1,7 +1,7 @@
/*
* @Author: your name
* @Date: 2021-10-08 09:26:29
* @LastEditTime: 2021-11-04 15:06:16
* @LastEditTime: 2021-11-05 13:51:34
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/router/index.js
@ -24,7 +24,7 @@ import iLayout from "@/lycomponents/iLayout"
import ForumDetails from "@/views/ForumDetails"
import TailInsightDetails from "@/views/TailInsightDetails"
import WeiboDetails from "@/views/WeiboDetails"
import BrandComparison from "@/views/BrandComparison"
import brandComparisonIndex from "@/views/BrandComparison"
import EventInsight from "@/views/EventInsight"
import EventComparison from "@/views/EventComparison"
import Login from "@/views/Login"
@ -93,10 +93,10 @@ const router = [
component: WeiboDetails
},
{
path: '/brandComparison',
name: "brandComparison",
path: '/brandComparisonIndex',
name: "brandComparisonIndex",
desc: "品牌洞察-品牌对比",
component: BrandComparison
component: brandComparisonIndex
},
{
path: '/eventInsight',

@ -1,7 +1,7 @@
/*
* @Author: your name
* @Date: 2021-10-12 13:36:49
* @LastEditTime: 2021-10-28 19:34:37
* @LastEditTime: 2021-11-05 14:03:18
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/store/actions.js
@ -37,6 +37,9 @@ const actions = {
setModel: ({commit}, log) => {
commit('setModel', log)
},
setBComparison: ({commit}, log) => {
commit('setBComparison', log)
},
setSComparison: ({commit}, log) => {
commit('setSComparison', log)
},

@ -1,7 +1,7 @@
/*
* @Author: your name
* @Date: 2021-10-12 13:37:06
* @LastEditTime: 2021-11-03 17:00:15
* @LastEditTime: 2021-11-05 14:04:53
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/store/getters.js
@ -37,8 +37,11 @@ const getters = {
getModel(state) {
return state.model
},
getBComparison(state) {
return state.bComparison
},
getSComparison(state) {
return state.sComparison
}
},
}
export default getters

@ -1,7 +1,7 @@
/*
* @Author: your name
* @Date: 2021-10-12 13:37:35
* @LastEditTime: 2021-11-03 16:59:16
* @LastEditTime: 2021-11-05 14:04:03
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/store/mutations.js
@ -58,6 +58,11 @@ const mutations = {
let str = JSON.stringify(obj);
sessionStorage.setItem('model', str);
},
setBComparison: (state, log) => {
state.bComparison = log;
let str = JSON.stringify(log);
sessionStorage.setItem('bComparison', str);
},
setSComparison: (state, log) => {
state.sComparison = log;
let str = JSON.stringify(log);

@ -1,7 +1,7 @@
/*
* @Author: your name
* @Date: 2021-10-12 13:37:50
* @LastEditTime: 2021-11-03 16:56:14
* @LastEditTime: 2021-11-05 14:02:42
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/store/state.js
@ -18,6 +18,8 @@ const state = {
headerType: sessionStorage.getItem('headerType') || 1,
brand: JSON.parse(sessionStorage.getItem('brand')) || {},
model: JSON.parse(sessionStorage.getItem('model')) || {},
bComparison: JSON.parse(sessionStorage.getItem('bComparison')) || [],
sComparison: JSON.parse(sessionStorage.getItem('sComparison')) || [],
}
export default state;

@ -0,0 +1,31 @@
<!--
* @Author: your name
* @Date: 2021-11-05 13:56:24
* @LastEditTime: 2021-11-05 14:08:48
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandComparison/BrandBeginComparte.vue
-->
<template>
<div class="d-container">
<div class="bbc-inner">
<brandCompateHeader></brandCompateHeader>
</div>
</div>
</template>
<script>
import brandCompateHeader from "./brandCompateHeader"
export default {
name: "BrandBeginComparte",
components: {
brandCompateHeader
}
}
</script>
<style lang="less" scoped>
.bbc-inner {
padding: 0px 16px 16px 16px;
}
</style>

@ -0,0 +1,196 @@
<!--
* @Author: your name
* @Date: 2021-11-05 13:49:05
* @LastEditTime: 2021-11-05 13:49:06
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandComparison/BrandComparison.vue
-->
<!--
* @Author: your name
* @Date: 2021-10-15 10:39:43
* @LastEditTime: 2021-11-05 13:25:31
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandComparison/index.vue
-->
<template>
<div class="d-container">
<div class="bc-outter">
<brandCompateHeader></brandCompateHeader>
<div class="bc-d2">
<informationTrend></informationTrend>
<overallInformation></overallInformation>
<overallNumberOfInteractions></overallNumberOfInteractions>
</div>
<brandTonalDistribution></brandTonalDistribution>
<div class="bc-d3">
<channelDistribution></channelDistribution>
<keyMediaCommunicationComparison></keyMediaCommunicationComparison>
</div>
<brandCommunicationTOPMedia></brandCommunicationTOPMedia>
<overallWordCloudComparison></overallWordCloudComparison>
<brandEventComparison></brandEventComparison>
<div class="bc-d4">
<v-label-div title="品牌微博对比"></v-label-div>
<div class="bc-d4-d1">
<comparisonOfWeiboInformation></comparisonOfWeiboInformation>
<comparisonOfTheNumberOfWeiboInteractions></comparisonOfTheNumberOfWeiboInteractions>
<weiboBigVComparison></weiboBigVComparison>
</div>
<weiboTuneComparison></weiboTuneComparison>
<weiboContentDirectionComparison></weiboContentDirectionComparison>
<div class="bc-d4-d2">
<userAreaDistribution></userAreaDistribution>
<weiboUserPortrait></weiboUserPortrait>
</div>
</div>
<div class="bc-d5">
<v-label-div title="品牌论坛对比"></v-label-div>
<div class="bc-d5-dd1">
<summaryAndComparisonOfForumInformation></summaryAndComparisonOfForumInformation>
<comparisonOfForumPostingTrends></comparisonOfForumPostingTrends>
</div>
<forumTonalComparison></forumTonalComparison>
<comparisonOfPositiveTopicsInTheForum></comparisonOfPositiveTopicsInTheForum>
<comparisonOfNegativeTopicsInForums></comparisonOfNegativeTopicsInForums>
</div>
<div class="bc-d6">
<v-label-div title="品牌尾翼对比"></v-label-div>
<div class="bc-d6-dd1">
<brandRearWingComparison></brandRearWingComparison>
<informationVolumeByChannel></informationVolumeByChannel>
</div>
<tailTOPMedia></tailTOPMedia>
</div>
</div>
</div>
</template>
<script>
import informationTrend from "./informationTrend";
import overallInformation from "./overallInformation";
import overallNumberOfInteractions from "./overallNumberOfInteractions";
import brandTonalDistribution from "./brandTonalDistribution";
import channelDistribution from "./channelDistribution";
import keyMediaCommunicationComparison from "./keyMediaCommunicationComparison";
import brandCommunicationTOPMedia from "./brandCommunicationTOPMedia";
import overallWordCloudComparison from "./overallWordCloudComparison";
import brandEventComparison from "./brandEventComparison";
import comparisonOfWeiboInformation from "./comparisonOfWeiboInformation";
import comparisonOfTheNumberOfWeiboInteractions from "./comparisonOfTheNumberOfWeiboInteractions";
import weiboBigVComparison from "./weiboBigVComparison";
import weiboTuneComparison from "./weiboTuneComparison";
import weiboContentDirectionComparison from "./weiboContentDirectionComparison";
import userAreaDistribution from "./userAreaDistribution";
import weiboUserPortrait from "./weiboUserPortrait";
import summaryAndComparisonOfForumInformation from "./summaryAndComparisonOfForumInformation"
import comparisonOfForumPostingTrends from "./comparisonOfForumPostingTrends"
import forumTonalComparison from "./forumTonalComparison"
import comparisonOfPositiveTopicsInTheForum from "./comparisonOfPositiveTopicsInTheForum"
import comparisonOfNegativeTopicsInForums from "./comparisonOfNegativeTopicsInForums"
import brandRearWingComparison from "./brandRearWingComparison"
import informationVolumeByChannel from "./informationVolumeByChannel"
import tailTOPMedia from "./tailTOPMedia"
import brandCompateHeader from "./brandCompateHeader"
export default {
name: "brandComparison",
components: {
informationTrend, //
overallInformation, //
overallNumberOfInteractions, //
brandTonalDistribution, //
channelDistribution, //
keyMediaCommunicationComparison, //
brandCommunicationTOPMedia, // TOP
overallWordCloudComparison, //
brandEventComparison, //
comparisonOfWeiboInformation, //
comparisonOfTheNumberOfWeiboInteractions, //
weiboBigVComparison, // V
weiboTuneComparison, //
weiboContentDirectionComparison, //
userAreaDistribution, //
weiboUserPortrait, //
summaryAndComparisonOfForumInformation, //
comparisonOfForumPostingTrends, //
forumTonalComparison, //
comparisonOfPositiveTopicsInTheForum, //
comparisonOfNegativeTopicsInForums, //
brandRearWingComparison, //
informationVolumeByChannel, //
tailTOPMedia, // TOP
brandCompateHeader //
},
data() {
return {
};
},
methods: {
},
};
</script>
<style lang="less" scoped>
.bc-outter {
padding: 0px 16px 16px 16px;
}
.bc-d2 {
width: 100%;
height: auto;
display: flex;
justify-content: flex-start;
margin-top: 16px;
}
.bc-d3 {
width: 100%;
height: auto;
display: flex;
justify-content: flex-start;
margin-top: 16px;
}
.bc-d4 {
width: 100%;
height: auto;
border: 2px solid #0f2a4d;
margin-top: 16px;
.bc-d4-d1 {
width: 100%;
display: flex;
justify-content: flex-start;
}
.bc-d4-d2 {
width: 100%;
height: auto;
display: flex;
justify-content: flex-start;
}
}
.bc-d5 {
width: 100%;
height: auto;
border: 2px solid #0f2a4d;
margin-top: 16px;
.bc-d5-dd1 {
display: flex;
justify-content: flex-start;
}
}
.bc-d6 {
width: 100%;
height: auto;
border: 2px solid #0f2a4d;
margin-top: 16px;
.bc-d6-dd1 {
display: flex;
justify-content: flex-start;
}
}
</style>

@ -0,0 +1,132 @@
<!--
* @Author: your name
* @Date: 2021-11-05 13:18:12
* @LastEditTime: 2021-11-05 13:25:38
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandComparison/brandCompateHeader/index.vue
-->
<template>
<div class="bc-d1">
<v-label-div title="品牌对比">
<v-btn @click="goback"></v-btn>
</v-label-div>
<div class="bc-d1-inner">
<template v-for="(item,index) in brands">
<div class="bc-d1-item" :key="index">
<div class="d1-item" :style="index === 0 ? 'margin-left: 16px' : ''">
<span class="s1">{{item.name}}</span>
<span class="s2">{{item.name}}</span>
<span class="s3" @click="openBrand(index)"></span>
</div>
<img v-if="index != brands.length -1" src="../../../assets/images/comm/img_vs.png" class="d1-m1">
</div>
</template>
</div>
<iSwitchBrand :visible.sync="brandShow"></iSwitchBrand>
</div>
</template>
<script>
export default {
name: "brandCompateHeader",
data() {
return {
brandShow: false,
brandIndex: 0,
brands: [
{
name: "奥迪",
},
{
name: "宝马",
},
{
name: "奔驰",
},
{
name: "吉利",
},
{
name: "大众",
},
{
name: "别克",
},
],
}
},
methods: {
goback() {
this.$router.go(-1);
},
openBrand(n) {
this.brandShow = true;
this.brandIndex = n;
},
}
};
</script>
<style lang="less" scoped>
.bc-d1 {
width: 100%;
height: 222px;
border: 2px solid #0f2a4d;
.bc-d1-inner {
width: 100%;
height: calc(100% - 48px);
display: flex;
justify-content: flex-start;
align-items: center;
.bc-d1-item {
display: inline-block;
display: flex;
justify-content: flex-start;
}
.d1-m1 {
width: 96px;
height: 102px;
}
.d1-item {
position: relative;
width: 228.5px;
height: 120px;
background-image: url("../../../assets/images/BrandInsight/img_pd.png");
background-repeat: no-repeat;
background-size: 100% 100%;
.s1 {
position: absolute;
font-size: 14px;
color: #b2daf8;
top: 52px;
left: 43px;
}
.s2 {
position: absolute;
top: 50px;
left: 110px;
color: #fff;
font-size: 20px;
}
.s3 {
display: block;
position: absolute;
top: 0px;
right: 0px;
width: 95px;
height: 28px;
background-image: url("../../../assets/images/BrandInsight/img_xbut.png");
background-repeat: no-repeat;
background-size: cover;
color: #4390ba;
text-align: center;
line-height: 28px;
font-size: 12px;
cursor: pointer;
}
}
}
}
</style>

@ -1,7 +1,7 @@
<!--
* @Author: your name
* @Date: 2021-10-15 13:41:17
* @LastEditTime: 2021-10-21 16:50:07
* @LastEditTime: 2021-11-05 13:47:57
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandComparison/brandTonalDistribution/roundata/index.vue
@ -66,7 +66,7 @@ export default {
.bd-item-round {
display: inline-block;
.bd-item-r-cav {
width: 206px;
width: 193px;
height: 206px;
}
.bd-item-r-c-s1 {

@ -1,7 +1,7 @@
<!--
* @Author: your name
* @Date: 2021-10-15 13:41:17
* @LastEditTime: 2021-10-15 14:37:24
* @LastEditTime: 2021-11-05 13:31:48
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandComparison/brandTonalDistribution/roundata/index.vue
@ -9,7 +9,7 @@
<template>
<div class="bd-item-round">
<div class="bd-item-r-cav">
<v-echarts :opt="opt" @echarsUpdate="echarsFun"></v-echarts>
<v-echarts :opt="opt"></v-echarts>
</div>
<span class="bd-item-r-c-s1" :style="{color: color}">{{title}}</span>
</div>
@ -34,32 +34,7 @@ export default {
};
},
methods: {
echarsFun(myChart) {
let index = 0;
myChart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: 0,
});
myChart.on("mouseover", function (e) {
if (e.dataIndex != index) {
myChart.dispatchAction({
type: "downplay",
seriesIndex: 0,
dataIndex: index,
});
}
});
myChart.on("mouseout", function (e) {
index = e.dataIndex;
myChart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: e.dataIndex,
});
});
},
},
};
</script>
@ -67,7 +42,7 @@ export default {
.bd-item-round {
display: inline-block;
.bd-item-r-cav {
width: 206px;
width: 193px;
height: 206px;
}
.bd-item-r-c-s1 {

@ -1,170 +1,39 @@
<!--
* @Author: your name
* @Date: 2021-10-15 10:39:43
* @LastEditTime: 2021-10-19 11:45:50
* @LastEditTime: 2021-11-05 14:02:07
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandComparison/index.vue
-->
<template>
<div class="d-container">
<div class="bc-outter">
<div class="bc-d1">
<v-label-div title="品牌对比">
<v-btn @click="goback"></v-btn>
</v-label-div>
<div class="bc-d1-inner">
<template v-for="(item,index) in brands">
<div class="bc-d1-item" :key="index">
<div class="d1-item" :style="index === 0 ? 'margin-left: 16px' : ''">
<span class="s1">{{item.name}}</span>
<span class="s2">{{item.name}}</span>
<span class="s3" @click="openBrand(index)"></span>
</div>
<img v-if="index != brands.length -1" src="../../assets/images/comm/img_vs.png" class="d1-m1">
</div>
</template>
</div>
</div>
<div class="bc-d2">
<informationTrend></informationTrend>
<overallInformation></overallInformation>
<overallNumberOfInteractions></overallNumberOfInteractions>
</div>
<brandTonalDistribution></brandTonalDistribution>
<div class="bc-d3">
<channelDistribution></channelDistribution>
<keyMediaCommunicationComparison></keyMediaCommunicationComparison>
</div>
<brandCommunicationTOPMedia></brandCommunicationTOPMedia>
<overallWordCloudComparison></overallWordCloudComparison>
<brandEventComparison></brandEventComparison>
<div class="bc-d4">
<v-label-div title="品牌微博对比"></v-label-div>
<div class="bc-d4-d1">
<comparisonOfWeiboInformation></comparisonOfWeiboInformation>
<comparisonOfTheNumberOfWeiboInteractions></comparisonOfTheNumberOfWeiboInteractions>
<weiboBigVComparison></weiboBigVComparison>
</div>
<weiboTuneComparison></weiboTuneComparison>
<weiboContentDirectionComparison></weiboContentDirectionComparison>
<div class="bc-d4-d2">
<userAreaDistribution></userAreaDistribution>
<weiboUserPortrait></weiboUserPortrait>
</div>
</div>
<div class="bc-d5">
<v-label-div title="品牌论坛对比"></v-label-div>
<div class="bc-d5-dd1">
<summaryAndComparisonOfForumInformation></summaryAndComparisonOfForumInformation>
<comparisonOfForumPostingTrends></comparisonOfForumPostingTrends>
</div>
<forumTonalComparison></forumTonalComparison>
<comparisonOfPositiveTopicsInTheForum></comparisonOfPositiveTopicsInTheForum>
<comparisonOfNegativeTopicsInForums></comparisonOfNegativeTopicsInForums>
</div>
<div class="bc-d6">
<v-label-div title="品牌尾翼对比"></v-label-div>
<div class="bc-d6-dd1">
<brandRearWingComparison></brandRearWingComparison>
<informationVolumeByChannel></informationVolumeByChannel>
</div>
<tailTOPMedia></tailTOPMedia>
</div>
</div>
<iSwitchBrand :visible.sync="brandShow"></iSwitchBrand>
<BrandComparison v-if="hasData"></BrandComparison>
<BrandBeginComparte v-else></BrandBeginComparte>
</div>
</template>
<script>
import informationTrend from "./informationTrend";
import overallInformation from "./overallInformation";
import overallNumberOfInteractions from "./overallNumberOfInteractions";
import brandTonalDistribution from "./brandTonalDistribution";
import channelDistribution from "./channelDistribution";
import keyMediaCommunicationComparison from "./keyMediaCommunicationComparison";
import brandCommunicationTOPMedia from "./brandCommunicationTOPMedia";
import overallWordCloudComparison from "./overallWordCloudComparison";
import brandEventComparison from "./brandEventComparison";
import comparisonOfWeiboInformation from "./comparisonOfWeiboInformation";
import comparisonOfTheNumberOfWeiboInteractions from "./comparisonOfTheNumberOfWeiboInteractions";
import weiboBigVComparison from "./weiboBigVComparison";
import weiboTuneComparison from "./weiboTuneComparison";
import weiboContentDirectionComparison from "./weiboContentDirectionComparison";
import userAreaDistribution from "./userAreaDistribution";
import weiboUserPortrait from "./weiboUserPortrait";
import summaryAndComparisonOfForumInformation from "./summaryAndComparisonOfForumInformation"
import comparisonOfForumPostingTrends from "./comparisonOfForumPostingTrends"
import forumTonalComparison from "./forumTonalComparison"
import comparisonOfPositiveTopicsInTheForum from "./comparisonOfPositiveTopicsInTheForum"
import comparisonOfNegativeTopicsInForums from "./comparisonOfNegativeTopicsInForums"
import brandRearWingComparison from "./brandRearWingComparison"
import informationVolumeByChannel from "./informationVolumeByChannel"
import tailTOPMedia from "./tailTOPMedia"
import BrandComparison from "./BrandComparison.vue"
import BrandBeginComparte from "./BrandBeginComparte.vue"
export default {
name: "brandComparison",
name: "brandComparisonIndex",
components: {
informationTrend, //
overallInformation, //
overallNumberOfInteractions, //
brandTonalDistribution, //
channelDistribution, //
keyMediaCommunicationComparison, //
brandCommunicationTOPMedia, // TOP
overallWordCloudComparison, //
brandEventComparison, //
comparisonOfWeiboInformation, //
comparisonOfTheNumberOfWeiboInteractions, //
weiboBigVComparison, // V
weiboTuneComparison, //
weiboContentDirectionComparison, //
userAreaDistribution, //
weiboUserPortrait, //
summaryAndComparisonOfForumInformation, //
comparisonOfForumPostingTrends, //
forumTonalComparison, //
comparisonOfPositiveTopicsInTheForum, //
comparisonOfNegativeTopicsInForums, //
brandRearWingComparison, //
informationVolumeByChannel, //
tailTOPMedia // TOP
BrandComparison,
BrandBeginComparte
},
data() {
return {
brandShow: false,
brandIndex: 0,
brands: [
{
name: "奥迪",
},
{
name: "宝马",
},
{
name: "奔驰",
},
{
name: "吉利",
},
{
name: "大众",
},
{
name: "别克",
},
],
hasData: false
};
},
created() {
this.hasData = this.getBComparison.length > 0 ? true : false;
},
methods: {
goback() {
this.$router.go(-1);
},
openBrand(n) {
this.brandShow = true;
this.brandIndex = n;
},
},
};
</script>
@ -173,66 +42,7 @@ export default {
.bc-outter {
padding: 0px 16px 16px 16px;
}
.bc-d1 {
width: 100%;
height: 222px;
border: 2px solid #0f2a4d;
.bc-d1-inner {
width: 100%;
height: calc(100% - 48px);
display: flex;
justify-content: flex-start;
align-items: center;
.bc-d1-item {
display: inline-block;
display: flex;
justify-content: flex-start;
}
.d1-m1 {
width: 96px;
height: 102px;
}
.d1-item {
position: relative;
width: 228.5px;
height: 120px;
background-image: url("../../assets/images/BrandInsight/img_pd.png");
background-repeat: no-repeat;
background-size: 100% 100%;
.s1 {
position: absolute;
font-size: 14px;
color: #b2daf8;
top: 52px;
left: 43px;
}
.s2 {
position: absolute;
top: 50px;
left: 110px;
color: #fff;
font-size: 20px;
}
.s3 {
display: block;
position: absolute;
top: 0px;
right: 0px;
width: 95px;
height: 28px;
background-image: url("../../assets/images/BrandInsight/img_xbut.png");
background-repeat: no-repeat;
background-size: cover;
color: #4390ba;
text-align: center;
line-height: 28px;
font-size: 12px;
cursor: pointer;
}
}
}
}
.bc-d2 {
width: 100%;
height: auto;

@ -1,7 +1,7 @@
<!--
* @Author: your name
* @Date: 2021-10-16 10:49:09
* @LastEditTime: 2021-10-16 12:06:59
* @LastEditTime: 2021-11-05 13:45:20
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandComparison/weiboTuneComparison/index.vue
@ -16,22 +16,22 @@
<div class="dd1" style="margin-left: 24px;"><span class="s1" :style="{background: '#CC9D12'}"></span><span class="s2">负面</span></div>
</div>
<div class="wtc-inner">
<roundata title="奥迪" color="#3373CC" style="margin-left: 46px"></roundata>
<roundata title="宝马" color="#63AECC" style="margin-left: 110px"></roundata>
<roundata title="奔驰" color="#54BF93" style="margin-left: 110px"></roundata>
<roundata title="吉利" color="#CC9D12" style="margin-left: 110px"></roundata>
<roundata title="大众" color="#CC7733" style="margin-left: 110px"></roundata>
<roundata title="别克" color="#CC5B41" style="margin-left: 110px"></roundata>
<wbRoundata title="奥迪" color="#3373CC" style="margin-left: 46px"></wbRoundata>
<wbRoundata title="宝马" color="#63AECC" style="margin-left: 110px"></wbRoundata>
<wbRoundata title="奔驰" color="#54BF93" style="margin-left: 110px"></wbRoundata>
<wbRoundata title="吉利" color="#CC9D12" style="margin-left: 110px"></wbRoundata>
<wbRoundata title="大众" color="#CC7733" style="margin-left: 110px"></wbRoundata>
<wbRoundata title="别克" color="#CC5B41" style="margin-left: 110px"></wbRoundata>
</div>
</div>
</template>
<script>
import roundata from "./roundata";
import wbRoundata from "./wbRoundata";
export default {
name: "weiboTuneComparison",
components: {
roundata
wbRoundata
}
}
</script>

@ -1,7 +1,7 @@
<!--
* @Author: your name
* @Date: 2021-10-15 13:41:17
* @LastEditTime: 2021-10-15 14:37:24
* @LastEditTime: 2021-11-05 13:47:15
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandComparison/brandTonalDistribution/roundata/index.vue
@ -9,7 +9,7 @@
<template>
<div class="bd-item-round">
<div class="bd-item-r-cav">
<v-echarts :opt="opt" @echarsUpdate="echarsFun"></v-echarts>
<v-echarts :opt="opt"></v-echarts>
</div>
<span class="bd-item-r-c-s1" :style="{color: color}">{{title}}</span>
</div>
@ -17,7 +17,7 @@
<script>
import createOpt from "./opt";
export default {
name: "roundata",
name: "wbRoundata",
props: {
title: {
type: String,
@ -34,32 +34,7 @@ export default {
};
},
methods: {
echarsFun(myChart) {
let index = 0;
myChart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: 0,
});
myChart.on("mouseover", function (e) {
if (e.dataIndex != index) {
myChart.dispatchAction({
type: "downplay",
seriesIndex: 0,
dataIndex: index,
});
}
});
myChart.on("mouseout", function (e) {
index = e.dataIndex;
myChart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: e.dataIndex,
});
});
},
},
};
</script>
@ -67,7 +42,7 @@ export default {
.bd-item-round {
display: inline-block;
.bd-item-r-cav {
width: 206px;
width: 193px;
height: 206px;
}
.bd-item-r-c-s1 {

@ -1,7 +1,7 @@
<!--
* @Author: xw
* @Date: 2021-10-11 17:59:49
* @LastEditTime: 2021-10-28 18:37:20
* @LastEditTime: 2021-11-05 13:52:35
* @LastEditors: Please set LastEditors
* @Description: 品牌洞察
* @FilePath: /data-show/src/views/BrandInsight/index.vue
@ -15,7 +15,7 @@
<brand-top :brand="brand"></brand-top>
</div>
<div class="bdl-d1-dd2">
<img class="m1" src="../../assets/images/BrandInsight/img_ppdb.png" @click="goRouter('/brandComparison')"/>
<img class="m1" src="../../assets/images/BrandInsight/img_ppdb.png" @click="goRouter('/brandComparisonIndex')"/>
<div class="bdl-d1-dd2-d1">
<span class="bdl-d1-dd2-d1-s1">{{this.brand}}</span>
</div>

@ -1,7 +1,7 @@
<!--
* @Author: your name
* @Date: 2021-11-03 17:12:47
* @LastEditTime: 2021-11-03 18:11:43
* @LastEditTime: 2021-11-05 14:32:56
* @LastEditors: Please set LastEditors
* @Description: In User Settings Editiv
* @FilePath: /data-show/src/views/MarketingComparison/mcBeginCompare.vue
@ -15,13 +15,15 @@
</v-label-div>
<div class="mbc-dd">
<ul class="mb-ul">
<li class="mbc-d-item" :class="chooseArr.includes(item) ? 'liActive': ''" v-for="(item,index) in models" :key="index" @click="handlerModel(item)">{{item}}</li>
<li class="mbc-d-item" :class="chooseArr.includes(item) ? 'liActive': ''" v-for="(item,index) in models" :key="index" @click="handlerModel(item)">{{item}}</li>
</ul>
<div style="clear: both"></div>
</div>
</div>
<div class="beCpm-footer">
开始对比
</div>
</div>
</div>
</template>
@ -35,20 +37,44 @@ export default {
data() {
return {
chooseArr: [],
models: ["奥迪A4", "奥迪A6", "奥迪S3", "奥迪S4", "奥迪RS3", "奥迪RS4", "宝马1系",
"宝马2系","宝马3系","宝马M5","宝马M4","宝马M3","本田凌派","本田雅阁","本田缤智","本田冠道",
"本田奥德赛", "本田艾力绅", "比亚迪宋PRO", "比亚迪唐","比亚迪汉EV", "比亚迪秦", "比亚迪元", "比亚迪宋Max"
]
}
models: [
"奥迪A4",
"奥迪A6",
"奥迪S3",
"奥迪S4",
"奥迪RS3",
"奥迪RS4",
"宝马1系",
"宝马2系",
"宝马3系",
"宝马M5",
"宝马M4",
"宝马M3",
"本田凌派",
"本田雅阁",
"本田缤智",
"本田冠道",
"本田奥德赛",
"本田艾力绅",
"比亚迪宋PRO",
"比亚迪唐",
"比亚迪汉EV",
"比亚迪秦",
"比亚迪元",
"比亚迪宋Max",
],
};
},
methods: {
//
handlerModel(ele) {
let n = this.chooseArr.findIndex(e => e === ele);
if(n === -1 && this.chooseArr.length < 6) {
this.chooseArr.push(ele)
let n = this.chooseArr.findIndex((e) => e === ele);
if (n === -1 && this.chooseArr.length < 6) {
this.chooseArr.push(ele);
}
}
}
},
},
};
</script>
@ -65,37 +91,53 @@ export default {
.mbc-dd {
width: 100%;
height: calc(100% - 48px);
.mb-ul {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
list-style: none;
li {
float: left;
width: 295px;
height: 89px;
background-color: #0f2b47;
margin-left: 16px;
margin-top: 16px;
color: #fff;
text-align: center;
border-radius: 2px;
border: 1px solid transparent;
line-height: 89px;
font-size: 20px;
font-weight: 500;
cursor: pointer;
&:hover {
border: 1px solid #0058e6;
}
}
.liActive {
color: #0058e6;
border: 1px solid #0058e6;
}
}
.mb-ul {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
list-style: none;
li {
float: left;
width: 295px;
height: 89px;
background-color: #0f2b47;
margin-left: 16px;
margin-top: 16px;
color: #fff;
text-align: center;
border-radius: 2px;
border: 1px solid transparent;
line-height: 89px;
font-size: 20px;
font-weight: 500;
cursor: pointer;
&:hover {
border: 1px solid #0058e6;
}
}
.liActive {
color: #0058e6;
border: 1px solid #0058e6;
}
}
}
}
.beCpm-footer {
position: relative;
width: 354px;
height: 64px;
background-image: url("../../assets/images/login/img_dlan_nor.png");
background-repeat: no-repeat;
background-size: cover;
bottom: 0px;
left: 50%;
transform: translate(-50%);
cursor: pointer;
color: #63aecc;
font-size: 24px;
text-align: center;
line-height: 64px;
margin-top: 16px;
}
</style>

@ -1,7 +1,7 @@
<!--
* @Author: your name
* @Date: 2021-11-03 11:54:08
* @LastEditTime: 2021-11-03 14:40:05
* @LastEditTime: 2021-11-05 15:25:19
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/MarketingComparison/mcChooseModel/index.vue
@ -12,135 +12,145 @@
<v-btn @click="goback"></v-btn>
</v-label-div>
<div class="mccm-inner">
<div class="mccm-item" style="margin-left: 1rem">
<div class="mc-t">
<div class="m-t-d1">奥迪</div>
<span class="m-t-s1">A4</span>
<template v-for="(item,index) in list">
<div :key="index" style="display: flex;justify-content: flex-start;">
<div class="mccm-item" style="margin-left: 1rem">
<div class="mc-t">
<div class="m-t-d1">{{item.brand|doStr(4)}}</div>
<span class="m-t-s1">{{item.model|doStr(10)}}</span>
</div>
<div>
<a-form-model :label-col="labelCol" :wrapper-col="wrapperCol" style="width: 100%">
<a-form-model-item label="开始时间">
<a-date-picker v-model="item.startTime" show-time type="date" placeholder="开始时间" style="width: 100%;" />
</a-form-model-item>
<a-form-model-item label="结束时间">
<a-date-picker v-model="item.endTime" show-time type="date" placeholder="结束时间" style="width: 100%;" />
</a-form-model-item>
</a-form-model>
</div>
<div class="m-t-btn" @click="handlerDel(index)" v-if="item.isDel"></div>
<div class="m-t-btn" @click="handlerChoose(index)" v-else></div>
</div>
<div>
<a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" style="width: 100%">
<a-form-model-item label="开始时间">
<a-date-picker v-model="form.startTime" show-time type="date" placeholder="开始时间" style="width: 100%;" />
</a-form-model-item>
<a-form-model-item label="结束时间">
<a-date-picker v-model="form.endTime" show-time type="date" placeholder="结束时间" style="width: 100%;" />
</a-form-model-item>
</a-form-model>
<img v-if="index < list.length -1" class="mccm-vs" src="../../../assets/images/comm/img_vs.png">
</div>
<div class="m-t-btn">切换车型</div>
</div>
<img class="mccm-vs" src="../../../assets/images/comm/img_vs.png">
<div class="mccm-item">
<div class="mc-t">
<div class="m-t-d1">奥迪</div>
<span class="m-t-s1">A4</span>
</div>
<div>
<a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" style="width: 100%">
<a-form-model-item label="开始时间">
<a-date-picker v-model="form.startTime" show-time type="date" placeholder="开始时间" style="width: 100%;" />
</a-form-model-item>
<a-form-model-item label="结束时间">
<a-date-picker v-model="form.endTime" show-time type="date" placeholder="结束时间" style="width: 100%;" />
</a-form-model-item>
</a-form-model>
</div>
<div class="m-t-btn">切换车型</div>
</div>
<img class="mccm-vs" src="../../../assets/images/comm/img_vs.png">
<div class="mccm-item">
<div class="mc-t">
<div class="m-t-d1">奥迪</div>
<span class="m-t-s1">A4</span>
</div>
<div>
<a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" style="width: 100%">
<a-form-model-item label="开始时间">
<a-date-picker v-model="form.startTime" show-time type="date" placeholder="开始时间" style="width: 100%;" />
</a-form-model-item>
<a-form-model-item label="结束时间">
<a-date-picker v-model="form.endTime" show-time type="date" placeholder="结束时间" style="width: 100%;" />
</a-form-model-item>
</a-form-model>
</div>
<div class="m-t-btn">切换车型</div>
</div>
<img class="mccm-vs" src="../../../assets/images/comm/img_vs.png">
<div class="mccm-item">
<div class="mc-t">
<div class="m-t-d1">奥迪</div>
<span class="m-t-s1">A4</span>
</div>
<div>
<a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" style="width: 100%">
<a-form-model-item label="开始时间">
<a-date-picker v-model="form.startTime" show-time type="date" placeholder="开始时间" style="width: 100%;" />
</a-form-model-item>
<a-form-model-item label="结束时间">
<a-date-picker v-model="form.endTime" show-time type="date" placeholder="结束时间" style="width: 100%;" />
</a-form-model-item>
</a-form-model>
</div>
<div class="m-t-btn">切换车型</div>
</div>
<img class="mccm-vs" src="../../../assets/images/comm/img_vs.png">
<div class="mccm-item">
<div class="mc-t">
<div class="m-t-d1">奥迪</div>
<span class="m-t-s1">A4</span>
</div>
<div>
<a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" style="width: 100%">
<a-form-model-item label="开始时间">
<a-date-picker v-model="form.startTime" show-time type="date" placeholder="开始时间" style="width: 100%;" />
</a-form-model-item>
<a-form-model-item label="结束时间">
<a-date-picker v-model="form.endTime" show-time type="date" placeholder="结束时间" style="width: 100%;" />
</a-form-model-item>
</a-form-model>
</div>
<div class="m-t-btn">切换车型</div>
</div>
<img class="mccm-vs" src="../../../assets/images/comm/img_vs.png">
<div class="mccm-item">
<div class="mc-t">
<div class="m-t-d1">奥迪</div>
<span class="m-t-s1">A4</span>
</div>
<div>
<a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" style="width: 100%">
<a-form-model-item label="开始时间">
<a-date-picker v-model="form.startTime" show-time type="date" placeholder="开始时间" style="width: 100%;" />
</a-form-model-item>
<a-form-model-item label="结束时间">
<a-date-picker v-model="form.endTime" show-time type="date" placeholder="结束时间" style="width: 100%;" />
</a-form-model-item>
</a-form-model>
</div>
<div class="m-t-btn">切换车型</div>
</div>
</template>
</div>
<iSwitchModel :brand="brand" :model="model" :visible.sync="modelShow" @change="handlerBrand"></iSwitchModel>
</div>
</template>
<script>
import { getUserSeriesName } from "@/api/comm";
export default {
name: "mcChooseModel",
data() {
return {
labelCol: { span: 9 },
wrapperCol: { span: 14 },
modelShow: false,
brand: "",
model: "",
chooseIndex: -1,
form: {
startTime: "",
endTime: "",
token: "",
sBrandName: ""
},
list: [
{
brand: "",
model: "",
startTime: "",
endTime: "",
isDel: false
},
{
brand: "",
model: "",
startTime: "",
endTime: "",
isDel: false
},
{
brand: "",
model: "",
startTime: "",
endTime: "",
isDel: false
},
{
brand: "",
model: "",
startTime: "",
endTime: "",
isDel: false
},
{
brand: "",
model: "",
startTime: "",
endTime: "",
isDel: false
},
{
brand: "",
model: "",
startTime: "",
endTime: "",
isDel: false
},
],
};
},
created() {
this.brand = this.getBrand.brandname || "奥迪";
this.modelData();
},
methods: {
goback() {
this.$router.go(-1)
}
}
this.$router.go(-1);
},
//
modelData() {
let model = this.getModel.name || "";
if (!model) {
this.getUserSeriesName(this.brand);
} else {
this.model = model;
}
},
//
getUserSeriesName(brandName) {
this.form.token = this.getToken;
this.form.sBrandName = brandName;
getUserSeriesName(this.form).then((res) => {
let data = res.data || [];
this.model = data[0].name;
});
},
//
handlerChoose(n) {
this.chooseIndex = n;
this.modelShow = true;
},
//
handlerDel(n) {
let row = this.list[n];
row.brand = "";
row.model = "";
row.startTime = "";
row.endTime = "";
row.isDel = false;
},
//
handlerBrand(arr) {
let row = this.list[this.chooseIndex];
row.brand = arr[0].brandname;
row.model = arr[1].name;
row.isDel = true;
},
},
};
</script>
@ -173,7 +183,7 @@ export default {
background-size: 100% 100%;
cursor: pointer;
text-align: center;
color: #63AECC;
color: #63aecc;
line-height: 28px;
}
.mc-t {
@ -202,8 +212,8 @@ export default {
}
}
.mccm-vs {
width: 94px;
height: 94px;
width: 78px;
height: 78px;
margin-top: 22px;
}
}

Loading…
Cancel
Save