Merge branch 'dev' of https://git.oa00.com/SWS/carInsightSystem into dev
commit
c8f9516af9
@ -0,0 +1,30 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-11-08 09:46:59
|
||||
* @LastEditTime: 2021-11-08 09:51:57
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/components/v-cutscene-waiting/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="cw-outter">
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "v-cutscene-waiting"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.cw-outter {
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
background: rgba(0,11, 26, 0.7);
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,193 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-11-04 18:13:45
|
||||
* @LastEditTime: 2021-11-05 09:56:25
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/components/v-percent/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="v-p-outter">
|
||||
<span class="v-p-item" v-for="(item,index) in colorArr" :key="index" :style="{background: showColor[index] || '#051a33' }"></span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "v-percent",
|
||||
props: {
|
||||
color: {
|
||||
type: String,
|
||||
default: "#3373CC",
|
||||
},
|
||||
num: {
|
||||
type: Number,
|
||||
default: 10,
|
||||
},
|
||||
percentage: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
},
|
||||
reverse: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
prarmObj() {
|
||||
return {
|
||||
color: this.color,
|
||||
num: this.num,
|
||||
percentage: this.percentage,
|
||||
reverse: this.reverse,
|
||||
};
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
prarmObj: {
|
||||
handler() {
|
||||
let a = []
|
||||
if (this.reverse) {
|
||||
a = this.gradientColor(
|
||||
"#05182e",
|
||||
this.color,
|
||||
this.num
|
||||
);
|
||||
} else {
|
||||
a = this.gradientColor(
|
||||
this.color,
|
||||
"#05182e",
|
||||
this.num
|
||||
);
|
||||
}
|
||||
this.colorArr = a
|
||||
let n = Math.floor(this.percentage * this.colorArr.length);
|
||||
let cArr = [];
|
||||
for (let i = 0; i < this.num; i++) {
|
||||
let ele = "#051a33";
|
||||
if (i >=this.num - n && !this.reverse) {
|
||||
ele = this.colorArr[i];
|
||||
}
|
||||
if(this.reverse && i < n) {
|
||||
ele = this.colorArr[i];
|
||||
}
|
||||
cArr.push(ele);
|
||||
}
|
||||
this.showColor = cArr;
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
colorArr: [],
|
||||
showColor: [],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
colorRgb(sColor) {
|
||||
let reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
|
||||
let color = sColor.toLowerCase();
|
||||
if (color && reg.test(color)) {
|
||||
if (color.length === 4) {
|
||||
let sColorNew = "#";
|
||||
for (var i = 1; i < 4; i += 1) {
|
||||
sColorNew += color
|
||||
.slice(i, i + 1)
|
||||
.concat(color.slice(i, i + 1));
|
||||
}
|
||||
color = sColorNew;
|
||||
}
|
||||
//处理六位的颜色值
|
||||
let sColorChange = [];
|
||||
for (let i = 1; i < 7; i += 2) {
|
||||
sColorChange.push(parseInt("0x" + color.slice(i, i + 2)));
|
||||
}
|
||||
return sColorChange;
|
||||
} else {
|
||||
return color;
|
||||
}
|
||||
},
|
||||
colorHex(rgb) {
|
||||
let _this = rgb;
|
||||
let reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
|
||||
if (/^(rgb|RGB)/.test(_this)) {
|
||||
let aColor = _this.replace(/(?:(|)|rgb|RGB)*/g, "").split(",");
|
||||
let strHex = "#";
|
||||
for (let i = 0; i < aColor.length; i++) {
|
||||
let hex = Number(aColor[i]).toString(16);
|
||||
hex = hex < 10 ? 0 + "" + hex : hex; // 保证每个rgb的值为2位
|
||||
if (hex === "0") {
|
||||
hex += hex;
|
||||
}
|
||||
strHex += hex;
|
||||
}
|
||||
if (strHex.length !== 7) {
|
||||
strHex = _this;
|
||||
}
|
||||
return strHex;
|
||||
} else if (reg.test(_this)) {
|
||||
let aNum = _this.replace(/#/, "").split("");
|
||||
if (aNum.length === 6) {
|
||||
return _this;
|
||||
} else if (aNum.length === 3) {
|
||||
let numHex = "#";
|
||||
for (let i = 0; i < aNum.length; i += 1) {
|
||||
numHex += aNum[i] + aNum[i];
|
||||
}
|
||||
return numHex;
|
||||
}
|
||||
} else {
|
||||
return _this;
|
||||
}
|
||||
},
|
||||
gradientColor(startColor, endColor, step) {
|
||||
let startRGB = this.colorRgb(startColor); //转换为rgb数组模式
|
||||
let startR = startRGB[0];
|
||||
let startG = startRGB[1];
|
||||
let startB = startRGB[2];
|
||||
|
||||
let endRGB = this.colorRgb(endColor);
|
||||
let endR = endRGB[0];
|
||||
let endG = endRGB[1];
|
||||
let endB = endRGB[2];
|
||||
|
||||
let sR = (endR - startR) / step; //总差值
|
||||
let sG = (endG - startG) / step;
|
||||
let sB = (endB - startB) / step;
|
||||
|
||||
let colorArr = [];
|
||||
for (let i = 0; i < step; i++) {
|
||||
//计算每一步的hex值
|
||||
let hex = this.colorHex(
|
||||
"rgb(" +
|
||||
parseInt(sR * i + startR) +
|
||||
"," +
|
||||
parseInt(sG * i + startG) +
|
||||
"," +
|
||||
parseInt(sB * i + startB) +
|
||||
")"
|
||||
);
|
||||
colorArr.push(hex);
|
||||
}
|
||||
return colorArr;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.v-p-outter {
|
||||
width: 160px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.v-p-item {
|
||||
width: 10px;
|
||||
height: 16px;
|
||||
display: inline-block;
|
||||
background-color: #051a33;
|
||||
margin-right: 6px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,160 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-11-05 13:56:24
|
||||
* @LastEditTime: 2021-11-08 09:35:56
|
||||
* @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 ref="brandRef" @del="handlerDel"></brandCompateHeader>
|
||||
<div class="mbc-inner">
|
||||
<v-label-div title="品牌推荐">
|
||||
</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 brands" :key="index" @click="handlerBrand(item)">{{item.brandname}}</li>
|
||||
</ul>
|
||||
<div style="clear: both"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="beCpm-footer" @click="handlerSubmit">
|
||||
开始对比
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getRecommendSeries} from "@/api/comm"
|
||||
import brandCompateHeader from "./brandCompateHeader"
|
||||
export default {
|
||||
name: "BrandBeginComparte",
|
||||
components: {
|
||||
brandCompateHeader
|
||||
},
|
||||
inject: ['reload'],
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
token: ""
|
||||
},
|
||||
chooseArr: [null, null, null, null, null, null],
|
||||
brands: [
|
||||
],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.form.token = this.getToken;
|
||||
this.getData();
|
||||
},
|
||||
methods: {
|
||||
// 获取推荐品牌
|
||||
getData() {
|
||||
let obj = Object.assign({}, this.form);
|
||||
getRecommendSeries(obj).then(res => {
|
||||
let data = res.data || [];
|
||||
this.brands = data;
|
||||
})
|
||||
},
|
||||
// 选择默认的车型
|
||||
handlerBrand(row) {
|
||||
for(let i = 0; i < this.chooseArr.length; i++) {
|
||||
let n = this.chooseArr.findIndex(ele =>{
|
||||
return ele && ele.brandname === row.brandname
|
||||
})
|
||||
|
||||
if(!this.chooseArr[i] && n === -1) {
|
||||
this.chooseArr[i] = row;
|
||||
let obj = this.$refs.brandRef.brands[i]
|
||||
obj.name = row.brandname;
|
||||
obj.isDel = true;
|
||||
return;
|
||||
}
|
||||
}
|
||||
},
|
||||
// 删除
|
||||
handlerDel(n) {
|
||||
this.chooseArr[n] = null;
|
||||
},
|
||||
// 开始对比
|
||||
handlerSubmit() {
|
||||
let arr = this.$refs.brandRef.brands || [];
|
||||
let filterArr = arr.filter((ele) => {
|
||||
return ele.name;
|
||||
});
|
||||
if(filterArr.length < 2) {
|
||||
this.$message.warning('至少2个品牌进行对比');
|
||||
return;
|
||||
}
|
||||
this.setBComparison(filterArr);
|
||||
this.reload()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.bbc-inner {
|
||||
padding: 0px 16px 16px 16px;
|
||||
}
|
||||
.mbc-inner {
|
||||
width: 100%;
|
||||
height: 488px;
|
||||
border: 2px solid #0f2a4d;
|
||||
margin-top: 16px;
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.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>
|
||||
@ -0,0 +1,203 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-11-05 13:49:05
|
||||
* @LastEditTime: 2021-11-08 09:40: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 :data="getBComparison" @change="handlerChangeBrand"></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",
|
||||
inject: ['reload'],
|
||||
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 {
|
||||
|
||||
};
|
||||
},
|
||||
beforeMount() {
|
||||
console.log('请等待')
|
||||
},
|
||||
methods: {
|
||||
handlerChangeBrand(arr) {
|
||||
this.setBComparison(arr);
|
||||
this.reload()
|
||||
}
|
||||
|
||||
},
|
||||
};
|
||||
</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,185 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-11-05 13:18:12
|
||||
* @LastEditTime: 2021-11-08 09:27:13
|
||||
* @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|doStr(4)}}</span>
|
||||
<span class="s2">{{item.name|doStr(10)}}</span>
|
||||
<span class="s3" @click="handlerDel(index)" v-if="item.isDel">删除</span>
|
||||
<span class="s3" @click="openBrand(index)" v-else>切换品牌</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" @change="handlerBrand"></iSwitchBrand>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "brandCompateHeader",
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
data: {
|
||||
handler(val) {
|
||||
if (val.length > 0) {
|
||||
val.forEach((ele, index) => {
|
||||
this.brands[index] = Object.assign(this.brands[index], ele);
|
||||
});
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
brandShow: false,
|
||||
brandIndex: 0,
|
||||
brands: [
|
||||
{
|
||||
name: "",
|
||||
isDel: false,
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
isDel: false,
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
isDel: false,
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
isDel: false,
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
isDel: false,
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
isDel: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goback() {
|
||||
this.$router.go(-1);
|
||||
},
|
||||
// 打开品牌选择
|
||||
openBrand(n) {
|
||||
this.brandShow = true;
|
||||
this.brandIndex = n;
|
||||
},
|
||||
// 获取选择品牌的数据
|
||||
handlerBrand(arr) {
|
||||
let name = arr[0].brandname;
|
||||
let n = this.brands.findIndex(ele => ele.name === name);
|
||||
if(n === -1) {
|
||||
let row = this.brands[this.brandIndex];
|
||||
row.name = name;
|
||||
row.isDel = true;
|
||||
}
|
||||
let filterArr = this.brands.filter((ele) => {
|
||||
return ele.name;
|
||||
});
|
||||
this.$emit('change', filterArr)
|
||||
},
|
||||
// 删除
|
||||
handlerDel(n) {
|
||||
let row = this.brands[n];
|
||||
row.name = "";
|
||||
row.isDel = false;
|
||||
let filterArr = this.brands.filter((ele) => {
|
||||
return ele.name;
|
||||
});
|
||||
this.$emit('del', n)
|
||||
this.$emit('change', filterArr)
|
||||
}
|
||||
}
|
||||
};
|
||||
</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>
|
||||
@ -0,0 +1,56 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-15 13:41:17
|
||||
* @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
|
||||
-->
|
||||
<template>
|
||||
<div class="bd-item-round">
|
||||
<div class="bd-item-r-cav">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
</div>
|
||||
<span class="bd-item-r-c-s1" :style="{color: color}">{{title}}</span>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import createOpt from "./opt";
|
||||
export default {
|
||||
name: "wbRoundata",
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
opt: createOpt(),
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.bd-item-round {
|
||||
display: inline-block;
|
||||
.bd-item-r-cav {
|
||||
width: 193px;
|
||||
height: 206px;
|
||||
}
|
||||
.bd-item-r-c-s1 {
|
||||
display: block;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,113 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-13 18:14:01
|
||||
* @LastEditTime: 2021-11-08 13:37:26
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/TailInsightDetails/rearWingInformationList/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="rwl-outter">
|
||||
<v-label-div title="尾翼信息列表"></v-label-div>
|
||||
<div class="rwl-inner">
|
||||
<a-form layout="inline" :form="form">
|
||||
<a-form-item label="来源选择">
|
||||
<a-select v-model="form.s1" style="width: 240px">
|
||||
<a-select-option value="jack">
|
||||
Jack
|
||||
</a-select-option>
|
||||
<a-select-option value="lucy">
|
||||
Lucy
|
||||
</a-select-option>
|
||||
<a-select-option value="Yiminghe">
|
||||
yiminghe
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<div class="rwl-tb">
|
||||
<v-table :columns="columns" :data="tdata" :pagination="pagination"></v-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "MTDrearWingInformationList",
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
s1: "",
|
||||
s2: "",
|
||||
},
|
||||
pagination: {
|
||||
"show-total": total => `共 ${total} 条`
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
title: "新闻标题",
|
||||
key: "name",
|
||||
dataIndex: "name",
|
||||
},
|
||||
{
|
||||
title: "来源",
|
||||
key: "a",
|
||||
dataIndex: "a",
|
||||
width: 120
|
||||
},
|
||||
{
|
||||
title: "作者",
|
||||
key: "b",
|
||||
dataIndex: "b",
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: "发布时间",
|
||||
key: "c",
|
||||
dataIndex: "c",
|
||||
width: 180
|
||||
},
|
||||
{
|
||||
title: "调性",
|
||||
key: "d",
|
||||
dataIndex: "d",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "车型",
|
||||
key: "e",
|
||||
dataIndex: "e",
|
||||
width: 100
|
||||
},
|
||||
],
|
||||
tdata: [
|
||||
{
|
||||
name: '为了研究长城吉利谁更强，我们砸了台吉利，',
|
||||
a: '微博',
|
||||
b: '车二哥说车',
|
||||
c: '2021-08-18 12:00:00',
|
||||
d: '正面',
|
||||
e: 'A4'
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.rwl-outter {
|
||||
width: 100%;
|
||||
height: 632px;
|
||||
border: 2px solid #0f2a4d;
|
||||
margin-top: 16px;
|
||||
.rwl-inner {
|
||||
padding: 16px;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
.rwl-tb {
|
||||
margin-top: 16px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,40 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-13 16:45:48
|
||||
* @LastEditTime: 2021-11-08 13:34:59
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/TailInsightDetails/rearWingPropagationSituation/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="rwps-outter">
|
||||
<v-label-div title="尾翼传播态势"></v-label-div>
|
||||
<div class="rwps-inner">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import createOpt from "./opt"
|
||||
export default {
|
||||
name: "MTDrearWingPropagationSituation",
|
||||
data() {
|
||||
return {
|
||||
opt: createOpt()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.rwps-outter {
|
||||
width: 460px;
|
||||
height: 460px;
|
||||
border: 2px solid #0F2A4D;
|
||||
.rwps-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,75 @@
|
||||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-12 15:32:24
|
||||
* @LastEditTime: 2021-10-13 15:54:53
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandInsight/weiboVolumeTrend/opt.js
|
||||
*/
|
||||
import * as echarts from "echarts";
|
||||
export default function createOpt() {
|
||||
return {
|
||||
grid: {
|
||||
top: "16px",
|
||||
left: "16px",
|
||||
right: "16px",
|
||||
bottom: "16px",
|
||||
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",
|
||||
},
|
||||
},
|
||||
data: ['00:00', '00:40', '00:80', '12:00', '16:00', '20:00', '24:00']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#FFF",
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: "dashed", // y轴分割线类型
|
||||
color: "#012b4b",
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
||||
type: 'line',
|
||||
color: '#546fc5',
|
||||
areaStyle: {normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: '#546fc5'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: 'rgba(0,0,0,0)'
|
||||
}]),
|
||||
}}
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
@ -0,0 +1,70 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-13 17:42:57
|
||||
* @LastEditTime: 2021-11-08 13:36:24
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/TailInsightDetails/theOverallToneOfTheTail/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="tot-outter">
|
||||
<v-label-div title="尾翼整体调性"></v-label-div>
|
||||
<div class="tot-inner">
|
||||
<v-echarts :opt="opt" @echarsUpdate="echarsFun"></v-echarts>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import createOpt from "./opt"
|
||||
export default {
|
||||
name: "MTDtheOverallToneOfTheTail",
|
||||
data() {
|
||||
return {
|
||||
opt: createOpt()
|
||||
}
|
||||
},
|
||||
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>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.tot-outter {
|
||||
width: 460px;
|
||||
height: 460px;
|
||||
border: 2px solid #0f2a4d;
|
||||
margin-left: 16px;
|
||||
.tot-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,40 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-13 17:54:56
|
||||
* @LastEditTime: 2021-11-08 13:32:37
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/TailInsightDetails/popular-word-cloud/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="pwc-outter">
|
||||
<v-label-div title="热门词云"></v-label-div>
|
||||
<div class="pwc-inner">
|
||||
<v-echarts :opt="opt" @echarsUpdate="echarsFun"></v-echarts>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import createOpt from "./opt"
|
||||
export default {
|
||||
name: "mtdPopularWordCloud",
|
||||
data() {
|
||||
return {
|
||||
opt: createOpt()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.pwc-outter {
|
||||
width: 460px;
|
||||
height: 460px;
|
||||
border: 2px solid #0f2a4d;
|
||||
margin-left: 16px;
|
||||
.pwc-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,42 +1,116 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-14 19:41:24
|
||||
* @LastEditTime: 2021-10-14 20:04:50
|
||||
* @LastEditTime: 2021-11-05 10:02:09
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/WeiboDetails/weiboTonalDistribution/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="wtd-outter">
|
||||
<v-label-div title="调性分布">
|
||||
</v-label-div>
|
||||
<div class="wtd-inner">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
</div>
|
||||
<div class="wtd-outter">
|
||||
<v-label-div title="调性分布"> </v-label-div>
|
||||
<div class="wtd-inner">
|
||||
<div class="wtd-item" v-for="(value,key) in obj"
|
||||
:key="key">
|
||||
<v-percent :percentage="value.positive"></v-percent>
|
||||
<span class="s1">{{value.show}}</span>
|
||||
<v-percent color="#b78e11" :percentage="value.negative" reverse></v-percent>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import createOpt from "./opt"
|
||||
import { getBoauthenAffectionsWeiBo0528 } from "@/api/WeiboDetails";
|
||||
export default {
|
||||
name: "wtd-outter",
|
||||
data() {
|
||||
return {
|
||||
opt: createOpt()
|
||||
}
|
||||
}
|
||||
}
|
||||
name: "wtd-outter",
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
token: "",
|
||||
sBrand: "",
|
||||
},
|
||||
obj: {
|
||||
bigV:{positive:0.1,negative:0.1,show:"个人大V"},
|
||||
media:{positive:0.1,negative:0.1,show:"媒体"},
|
||||
enterprice:{positive:0.1,negative:0.1,show:"企业"},
|
||||
goverment:{positive:0.1,negative:0.1,show:"政府"},
|
||||
famousPerson:{positive:0.1,negative:0.1,show:"名人"},
|
||||
uncertified:{positive:0.1,negative:0.1,show:"未认证"},
|
||||
certified:{positive:0.1,negative:0.1,show:"已认证"}
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.form.token = this.getToken;
|
||||
this.form.sBrand = this.getBrand.brandname || this.Brand;
|
||||
this.getData();
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
let obj = Object.assign({}, this.getCtime2, this.form);
|
||||
getBoauthenAffectionsWeiBo0528(obj).then(res => {
|
||||
let data = res.data;
|
||||
data.forEach(ele => {
|
||||
switch (ele.key) {
|
||||
case ("个人大V"):
|
||||
this.obj.bigV.positive = ele.value[0]/(ele.value[0].value+ele.value[2].value+0.1); //index[0]为正面数据
|
||||
this.obj.bigV.negative = ele.value[2].value/(ele.value[0].value+ele.value[2].value+0.1); //index[2]为负面数据
|
||||
break;
|
||||
case ("媒体"):
|
||||
this.obj.media.positive = ele.value[0].value/(ele.value[0].value+ele.value[2].value+0.1);
|
||||
this.obj.media.negative = ele.value[2].value/(ele.value[0].value+ele.value[2].value+0.1);
|
||||
break;
|
||||
case ("企业"):
|
||||
this.obj.enterprice.positive = ele.value[0].value/(ele.value[0].value+ele.value[2].value+0.1);
|
||||
this.obj.enterprice.negative = ele.value[2].value/(ele.value[0].value+ele.value[2].value+0.1);
|
||||
break;
|
||||
case ("政府"):
|
||||
this.obj.goverment.positive = ele.value[0].value/(ele.value[0].value+ele.value[2].value+0.1);
|
||||
this.obj.goverment.negative = ele.value[2].value/(ele.value[0].value+ele.value[2].value+0.1);
|
||||
break;
|
||||
case ("名人"):
|
||||
this.obj.famousPerson.positive = ele.value[0].value/(ele.value[0].value+ele.value[2].value+0.1);
|
||||
this.obj.famousPerson.negative = ele.value[2].value/(ele.value[0].value+ele.value[2].value+0.1);
|
||||
break;
|
||||
case ("非认证"):
|
||||
this.obj.uncertified.positive = ele.value[0].value/(ele.value[0].value+ele.value[2].value+0.1);
|
||||
this.obj.uncertified.negative = ele.value[2].value/(ele.value[0].value+ele.value[2].value+0.1);
|
||||
break;
|
||||
case ("已认证"):
|
||||
this.obj.certified.positive = ele.value[0].value/(ele.value[0].value+ele.value[2].value+0.1);
|
||||
this.obj.certified.negative = ele.value[2].value/(ele.value[0].value+ele.value[2].value+0.1);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
})
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.wtd-outter {
|
||||
width: 460px;
|
||||
height: 460px;
|
||||
border: 2px solid #0f2a4d;
|
||||
margin-left: 16px;
|
||||
.wtd-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
width: 460px;
|
||||
height: 460px;
|
||||
border: 2px solid #0f2a4d;
|
||||
margin-left: 16px;
|
||||
.wtd-inner {
|
||||
width: 100%;
|
||||
padding: 20px 16px;
|
||||
.wtd-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 36px;
|
||||
.s1 {
|
||||
display: block;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in new issue