parent
5d25c8fc9a
commit
e935bcfb97
@ -0,0 +1,124 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-15 15:58:57
|
||||
* @LastEditTime: 2021-11-16 11:01:43
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/brandCommunicationTOPMedia/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="bcm-outter">
|
||||
<v-label-div title="品牌传播TOP媒体"> </v-label-div>
|
||||
<div class="bcm-inner">
|
||||
<div class="bcm-item" v-for="(item, index) in arrList" :key="index">
|
||||
<span class="ss1" :style="{ color: colors[index] }">{{
|
||||
item.key
|
||||
}}</span>
|
||||
<div class="dd1">
|
||||
<vue-scroll>
|
||||
<!-- <v-ranking-bcm v-for="(it, n) in item.value" :key="n" :label="it.key" :num="it.num" :val="it.value"></v-ranking-bcm> -->
|
||||
</vue-scroll>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// import { getSourceTopCount0528C } from "@/api/BrandComparison";
|
||||
// import vRankingBcm from "./v-ranking-bcm";
|
||||
export default {
|
||||
name: "brandCommunicationTOPMedia",
|
||||
components: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
colors: [
|
||||
"#3373CC",
|
||||
"#63AECC",
|
||||
"#54BF93",
|
||||
"#CC9D12",
|
||||
"#CC7733",
|
||||
"#CC5B41",
|
||||
],
|
||||
load: false,
|
||||
form: {
|
||||
token: "",
|
||||
sBrand: "",
|
||||
},
|
||||
arrList: [],
|
||||
};
|
||||
},
|
||||
// created() {
|
||||
// this.initData();
|
||||
// },
|
||||
// methods: {
|
||||
// initData() {
|
||||
// this.form.token = this.getToken;
|
||||
// let arr = this.getBComparison;
|
||||
// let brands = [];
|
||||
// arr.forEach((ele) => {
|
||||
// brands.push(ele.name);
|
||||
// });
|
||||
// this.form.sBrand = brands.toString();
|
||||
// this.getData();
|
||||
// },
|
||||
// getData() {
|
||||
// return new Promise((resolve, reject) => {
|
||||
// let obj = Object.assign({}, this.getCtime2, this.form);
|
||||
// this.load = true;
|
||||
// getSourceTopCount0528C(obj)
|
||||
// .then((res) => {
|
||||
// let data = res.data || [];
|
||||
// //往原始数据内添加排名
|
||||
// data.forEach((ele) => {
|
||||
// for (
|
||||
// let index = 0;
|
||||
// index < ele.value.length;
|
||||
// index++
|
||||
// ) {
|
||||
// ele.value[index].num = index + 1;
|
||||
// }
|
||||
// });
|
||||
// this.arrList = data;
|
||||
// this.load = false;
|
||||
// resolve(data);
|
||||
// })
|
||||
// .catch(() => {
|
||||
// reject(false);
|
||||
// });
|
||||
// });
|
||||
// },
|
||||
// },
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.bcm-outter {
|
||||
width: 100%;
|
||||
height: 460px;
|
||||
border: 2px solid #0f2a4d;
|
||||
margin-top: 16px;
|
||||
.bcm-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
.bcm-item {
|
||||
width: 282px;
|
||||
height: 100%;
|
||||
margin-left: 27px;
|
||||
.ss1 {
|
||||
display: block;
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
padding-top: 14px;
|
||||
}
|
||||
.dd1 {
|
||||
height: calc(100% - 44px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,152 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-15 17:33:28
|
||||
* @LastEditTime: 2021-11-18 11:23:17
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/brandEventComparison/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="bec-outter">
|
||||
<v-label-div title="品牌事件对比"> </v-label-div>
|
||||
<div class="bec-inner">
|
||||
<v-echarts :opt="opt1"></v-echarts>
|
||||
</div>
|
||||
<!-- <v-label-div
|
||||
title="事件上榜车型"
|
||||
:showLine="false"
|
||||
:eStyle="{ 'border-style': 'none' }"
|
||||
>
|
||||
</v-label-div> -->
|
||||
<!-- <div class="bec-one">
|
||||
<div class="bec-one-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 { getSourcetypeC } from "@/api/BrandComparison/HotEvent.js";
|
||||
// //import { getContrastCount0528C } from "@/api/BrandComparison/HotEvent.js";
|
||||
// import { createSideSingleColumn } from "@/utils/gol/sideSingleColumn";
|
||||
// import createOpt from "./opt";
|
||||
export default {
|
||||
name: "brandEventComparison",
|
||||
data() {
|
||||
return {
|
||||
|
||||
form: {
|
||||
token: "",
|
||||
sBrand: "",
|
||||
},
|
||||
load: false,
|
||||
colors: [
|
||||
"#3373CC",
|
||||
"#63AECC",
|
||||
"#54BF93",
|
||||
"#CC9D12",
|
||||
"#CC7733",
|
||||
"#CC5B41",
|
||||
],
|
||||
|
||||
};
|
||||
},
|
||||
// created() {
|
||||
// this.initData();
|
||||
// },
|
||||
// methods: {
|
||||
// initData() {
|
||||
// this.form.token = this.getToken;
|
||||
// let arr = this.getBComparison;
|
||||
// let brands = [];
|
||||
// arr.forEach((ele) => {
|
||||
// brands.push(ele.name);
|
||||
// });
|
||||
// this.form.sBrand = brands.toString();
|
||||
// this.getData();
|
||||
// // this.getTypeData();
|
||||
// },
|
||||
// getData() {
|
||||
// return new Promise((resolve, reject) => {
|
||||
// let obj = Object.assign({}, this.getCtime2, this.form);
|
||||
// this.load = true;
|
||||
// getSourcetypeC(obj)
|
||||
// .then((res) => {
|
||||
// let data = res.data || [];
|
||||
// let brandList = [];
|
||||
// let dx = [];
|
||||
// data.forEach((e) => {
|
||||
// let ab = e.Data || {};
|
||||
// for (let key in ab) {
|
||||
// if (!dx.includes(key)) {
|
||||
// dx.push(key);
|
||||
// }
|
||||
// }
|
||||
// brandList.push(e.Name);
|
||||
// });
|
||||
// this.opt1 = createOpt(data,dx, brandList);
|
||||
// this.load = false;
|
||||
// resolve(data);
|
||||
// })
|
||||
// .catch(() => {
|
||||
// reject(false);
|
||||
// });
|
||||
// });
|
||||
// },
|
||||
// // getTypeData() {
|
||||
// // return new Promise((resolve, reject) => {
|
||||
// // let obj = Object.assign({}, this.getCtime2, this.form);
|
||||
// // getContrastCount0528C(obj)
|
||||
// // .then((res) => {
|
||||
// // let data = res.data || [];
|
||||
// // resolve(data);
|
||||
// // })
|
||||
// // .catch(() => {
|
||||
// // reject(false);
|
||||
// // });
|
||||
// // });
|
||||
// // },
|
||||
// },
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.bec-outter {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border: 2px solid #0f2a4d;
|
||||
margin-top: 16px;
|
||||
.bec-inner {
|
||||
width: 100%;
|
||||
height: 412px;
|
||||
}
|
||||
.bec-one {
|
||||
width: 100%;
|
||||
height: 412px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
.bec-one-item {
|
||||
width: 314px;
|
||||
height: 100%;
|
||||
.s1 {
|
||||
padding-left: 16px;
|
||||
display: block;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
}
|
||||
.d1 {
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,79 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-16 14:26:18
|
||||
* @LastEditTime: 2021-10-16 14:42:07
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/brandRearWingComparison/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="brw-outter" v-loading="load">
|
||||
<v-label-div title="尾翼趋势对比" :showLine="false" :eStyle="{'border-style': 'none'}"/>
|
||||
<div class="brw-inner">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import {getCountTime0528C} from "@/api/BrandComparison/BrandWeiyi.js"
|
||||
// import createOpt from "./opt"
|
||||
export default {
|
||||
name: "brandRearWingComparison",
|
||||
data() {
|
||||
return {
|
||||
opt: {},
|
||||
load: false,
|
||||
form: {
|
||||
token: "",
|
||||
sBrand: ""
|
||||
}
|
||||
}
|
||||
},
|
||||
// created() {
|
||||
// this.initData();
|
||||
// },
|
||||
// methods: {
|
||||
// initData() {
|
||||
// this.form.token = this.getToken;
|
||||
// let arr = this.getBComparison;
|
||||
// let brands = [];
|
||||
// arr.forEach((ele) => {
|
||||
// brands.push(ele.name);
|
||||
// });
|
||||
// this.form.sBrand = brands.toString();
|
||||
// this.getData();
|
||||
// },
|
||||
// getData() {
|
||||
// let obj = Object.assign({}, this.getCtime2, this.form);
|
||||
// this.load = true;
|
||||
// getCountTime0528C(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);
|
||||
// this.load = false;
|
||||
// })
|
||||
// },
|
||||
// },
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.brw-outter {
|
||||
width: 944px;
|
||||
height: 412px;
|
||||
.brw-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,129 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-15 13:27:50
|
||||
* @LastEditTime: 2021-10-15 14:30:30
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/brandTonalDistribution/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="bd-outter">
|
||||
<v-label-div title="品牌调性分布"> </v-label-div>
|
||||
<div class="bd-d1">
|
||||
<div class="dd1" style="margin-left: 16px">
|
||||
<span class="s1"></span><span class="s2">正面</span>
|
||||
</div>
|
||||
<div class="dd1" style="margin-left: 24px">
|
||||
<span class="s1" :style="{ background: '#54BF93' }"></span
|
||||
><span class="s2">中性</span>
|
||||
</div>
|
||||
<div class="dd1" style="margin-left: 24px">
|
||||
<span class="s1" :style="{ background: '#CC9D12' }"></span
|
||||
><span class="s2">负面</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bd-inner" style="margin-left: 18px">
|
||||
<!-- <roundata
|
||||
v-for="(item,index) in list"
|
||||
:key="index"
|
||||
:title="item.Name"
|
||||
:color="colors[index]"
|
||||
:style="index === 0 ? 'margin-left: 46px': 'margin-left: 110px'"
|
||||
:data="item.Data"
|
||||
></roundata> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import { getAffectionsC } from "@/api/BrandComparison";
|
||||
// import roundata from "./roundata";
|
||||
export default {
|
||||
name: "brandTonalDistribution",
|
||||
components: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
token: "",
|
||||
sBrand: "",
|
||||
},
|
||||
// load: false,
|
||||
colors: ['#3373CC', '#63AECC', '#54BF93', '#CC9D12', '#CC7733', '#CC5B41'],
|
||||
list: [
|
||||
|
||||
]
|
||||
};
|
||||
},
|
||||
// created() {
|
||||
// this.initData();
|
||||
// },
|
||||
// methods: {
|
||||
// initData() {
|
||||
// this.form.token = this.getToken;
|
||||
// let arr = this.getBComparison;
|
||||
// let brands = [];
|
||||
// arr.forEach(ele => {
|
||||
// brands.push(ele.name)
|
||||
// });
|
||||
// this.form.sBrand = brands.toString();
|
||||
// this.getData();
|
||||
// },
|
||||
// //
|
||||
// getData() {
|
||||
// return new Promise((resolve, reject) => {
|
||||
// let obj = Object.assign({}, this.getCtime2, this.form);
|
||||
// this.load = true;
|
||||
// getAffectionsC(obj).then((res) => {
|
||||
// let data = res.data || [];
|
||||
// this.list = data;
|
||||
// this.load = false;
|
||||
// resolve(data)
|
||||
// }).catch(() => {
|
||||
// reject(false)
|
||||
// });
|
||||
// });
|
||||
// },
|
||||
// },
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.bd-outter {
|
||||
width: 100%;
|
||||
height: 460px;
|
||||
border: 2px solid #0f2a4d;
|
||||
margin-top: 16px;
|
||||
.bd-d1 {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
height: 36px;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
.dd1 {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
.s1 {
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: #3373cc;
|
||||
}
|
||||
.s2 {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.bd-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,88 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-15 15:08:13
|
||||
* @LastEditTime: 2021-10-15 15:18:32
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/channelDistribution/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="cd-outter">
|
||||
<v-label-div title="渠道分布"> </v-label-div>
|
||||
<div class="cd-inner">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import { getSourcetypeC } from "@/api/BrandComparison/index.js";
|
||||
// import createOpt from "./opt";
|
||||
export default {
|
||||
name: "channelDistribution",
|
||||
data() {
|
||||
return {
|
||||
load: false,
|
||||
form: {
|
||||
token: "",
|
||||
sBrand: "",
|
||||
},
|
||||
opt: {},
|
||||
};
|
||||
},
|
||||
// created() {
|
||||
// this.initData();
|
||||
// },
|
||||
// methods: {
|
||||
// initData() {
|
||||
// this.form.token = this.getToken;
|
||||
// let arr = this.getBComparison;
|
||||
// let brands = [];
|
||||
// arr.forEach((ele) => {
|
||||
// brands.push(ele.name);
|
||||
// });
|
||||
// this.form.sBrand = brands.toString();
|
||||
// this.getData();
|
||||
// },
|
||||
// getData() {
|
||||
// return new Promise((resolve, reject) => {
|
||||
// let obj = Object.assign({}, this.getCtime2, this.form);
|
||||
// this.load = true;
|
||||
// getSourcetypeC(obj)
|
||||
// .then((res) => {
|
||||
// let data = res.data || [];
|
||||
// let brandList = [];
|
||||
// let dx = [];
|
||||
// data.forEach((e) => {
|
||||
// let ab = e.Data || {};
|
||||
// for (let key in ab) {
|
||||
// if (!dx.includes(key)) {
|
||||
// dx.push(key);
|
||||
// }
|
||||
// }
|
||||
// brandList.push(e.Name);
|
||||
// });
|
||||
// this.opt = createOpt(data, dx, brandList);
|
||||
// this.load = false;
|
||||
// resolve(data);
|
||||
// })
|
||||
// .catch(() => {
|
||||
// reject(false);
|
||||
// });
|
||||
// });
|
||||
// },
|
||||
// },
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.cd-outter {
|
||||
width: 936px;
|
||||
height: 460px;
|
||||
border: 2px solid #0f2a4d;
|
||||
.cd-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,82 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-16 13:45:18
|
||||
* @LastEditTime: 2021-10-16 13:49:34
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/comparisonOfForumPostingTrends/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="cop-outter">
|
||||
<v-label-div
|
||||
title="论坛发帖趋势对比"
|
||||
:showLine="false"
|
||||
:eStyle="{ 'border-style': 'none' }"
|
||||
/>
|
||||
<div class="cop-inner">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import { getCountTime0528C } from "@/api/BrandComparison/BbsBrand.js";
|
||||
// import createOpt from "./opt";
|
||||
export default {
|
||||
name: "comparisonOfForumPostingTrends",
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
token: "",
|
||||
sBrand: "",
|
||||
},
|
||||
load: false,
|
||||
opt: {},
|
||||
};
|
||||
},
|
||||
// created() {
|
||||
// this.initData();
|
||||
// },
|
||||
// methods: {
|
||||
// initData() {
|
||||
// this.form.token = this.getToken;
|
||||
// let arr = this.getBComparison;
|
||||
// let brands = [];
|
||||
// arr.forEach((ele) => {
|
||||
// brands.push(ele.name);
|
||||
// });
|
||||
// this.form.sBrand = brands.toString();
|
||||
// this.getData();
|
||||
// },
|
||||
// getData() {
|
||||
// let obj = Object.assign({}, this.getCtime2, this.form);
|
||||
// this.load = true,
|
||||
// getCountTime0528C(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);
|
||||
// this.load = false
|
||||
// })
|
||||
// },
|
||||
// },
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.cop-outter {
|
||||
width: 944px;
|
||||
height: 412px;
|
||||
.cop-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,130 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-16 13:57:58
|
||||
* @LastEditTime: 2021-10-16 14:20:07
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/comparisonOfPositiveTopicsInTheForum/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="cpt-outter">
|
||||
<v-label-div
|
||||
title="论坛负面话题对比"
|
||||
:showLine="false"
|
||||
:eStyle="{ 'border-style': 'none' }"
|
||||
/>
|
||||
<div class="cpt-inner">
|
||||
<div class="cpt-item" v-for="(item, index) in showData" :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 { getTopicPosAndTopicNeg0528C } from "@/api/BrandComparison/BbsBrand.js";
|
||||
// import { createSideSingleColumn } from "@/utils/gol/sideSingleColumn";
|
||||
export default {
|
||||
name: "comparisonOfPositiveTopicsInTheForum",
|
||||
data() {
|
||||
return {
|
||||
colors: [
|
||||
"#3373CC",
|
||||
"#63AECC",
|
||||
"#54BF93",
|
||||
"#CC9D12",
|
||||
"#CC7733",
|
||||
"#CC5B41",
|
||||
],
|
||||
form: {
|
||||
token: "",
|
||||
sBrand: "",
|
||||
},
|
||||
load: false,
|
||||
showData: [],
|
||||
|
||||
|
||||
};
|
||||
},
|
||||
// created() {
|
||||
// this.initData();
|
||||
// },
|
||||
// methods: {
|
||||
// initData() {
|
||||
// this.form.token = this.getToken;
|
||||
// let arr = this.getBComparison;
|
||||
// let brands = [];
|
||||
// arr.forEach((ele) => {
|
||||
// brands.push(ele.name);
|
||||
// });
|
||||
// this.form.sBrand = brands.toString();
|
||||
// this.getData();
|
||||
// },
|
||||
// getData() {
|
||||
// return new Promise((resolve, reject) => {
|
||||
// let obj = Object.assign({}, this.getCtime2, this.form);
|
||||
// this.load = true;
|
||||
// getTopicPosAndTopicNeg0528C(obj)
|
||||
// .then((res) => {
|
||||
// let data = res.data || [];
|
||||
// let sourceData = [];
|
||||
// data.forEach( ele => {
|
||||
// let tagArr = [];
|
||||
// let valArr = [];
|
||||
// //ele.value[0]表示正面话题的数据 [1]表示负面话题的数据
|
||||
// ele.value[1].value.forEach( e => {
|
||||
// tagArr.push(e.key);
|
||||
// valArr.push(e.value)
|
||||
// });
|
||||
// let o = {
|
||||
// name: ele.key,
|
||||
// drawOpt: createSideSingleColumn(tagArr,valArr,"#bd9312")
|
||||
// };
|
||||
// sourceData.push(o);
|
||||
// });
|
||||
// this.showData = sourceData;
|
||||
// this.load = false;
|
||||
// resolve(data);
|
||||
// })
|
||||
// .catch(() => {
|
||||
// reject(false);
|
||||
// });
|
||||
// });
|
||||
// },
|
||||
// },
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.cpt-outter {
|
||||
width: 100%;
|
||||
height: 412px;
|
||||
.cpt-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
.cpt-item {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.s1 {
|
||||
padding-left: 16px;
|
||||
display: block;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
}
|
||||
.d1 {
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,128 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-16 13:57:58
|
||||
* @LastEditTime: 2021-10-16 14:16:03
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/comparisonOfPositiveTopicsInTheForum/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="cpt-outter" v-loading="load">
|
||||
<v-label-div
|
||||
title="论坛正面话题对比"
|
||||
:showLine="false"
|
||||
:eStyle="{ 'border-style': 'none' }"
|
||||
/>
|
||||
<div class="cpt-inner">
|
||||
<!-- <div class="cpt-item" v-for="(item, index) in showData" :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 { getTopicPosAndTopicNeg0528C } from "@/api/BrandComparison/BbsBrand.js";
|
||||
// import { createSideSingleColumn } from "@/utils/gol/sideSingleColumn";
|
||||
export default {
|
||||
name: "comparisonOfPositiveTopicsInTheForum",
|
||||
data() {
|
||||
return {
|
||||
colors: [
|
||||
"#3373CC",
|
||||
"#63AECC",
|
||||
"#54BF93",
|
||||
"#CC9D12",
|
||||
"#CC7733",
|
||||
"#CC5B41",
|
||||
],
|
||||
form: {
|
||||
token: "",
|
||||
sBrand: "",
|
||||
},
|
||||
load: false,
|
||||
showData: [],
|
||||
};
|
||||
},
|
||||
// created() {
|
||||
// this.initData();
|
||||
// },
|
||||
// methods: {
|
||||
// initData() {
|
||||
// this.form.token = this.getToken;
|
||||
// let arr = this.getBComparison;
|
||||
// let brands = [];
|
||||
// arr.forEach((ele) => {
|
||||
// brands.push(ele.name);
|
||||
// });
|
||||
// this.form.sBrand = brands.toString();
|
||||
// this.getData();
|
||||
// },
|
||||
// getData() {
|
||||
// return new Promise((resolve, reject) => {
|
||||
// let obj = Object.assign({}, this.getCtime2, this.form);
|
||||
// this.load = true;
|
||||
// getTopicPosAndTopicNeg0528C(obj)
|
||||
// .then((res) => {
|
||||
// let data = res.data || [];
|
||||
// let sourceData = [];
|
||||
// data.forEach( ele => {
|
||||
// let tagArr = [];
|
||||
// let valArr = [];
|
||||
// //ele.value[0]表示正面话题的数据 [1]表示负面话题的数据
|
||||
// ele.value[0].value.forEach( e => {
|
||||
// tagArr.push(e.key);
|
||||
// valArr.push(e.value)
|
||||
// });
|
||||
// let o = {
|
||||
// name: ele.key,
|
||||
// drawOpt: createSideSingleColumn(tagArr,valArr,"#3373CC")
|
||||
// };
|
||||
// sourceData.push(o);
|
||||
// });
|
||||
// this.showData = sourceData;
|
||||
// this.load = false;
|
||||
// resolve(data);
|
||||
// })
|
||||
// .catch(() => {
|
||||
// reject(false);
|
||||
// });
|
||||
// });
|
||||
// },
|
||||
// },
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.cpt-outter {
|
||||
width: 100%;
|
||||
height: 412px;
|
||||
.cpt-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
.cpt-item {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.s1 {
|
||||
padding-left: 16px;
|
||||
display: block;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
}
|
||||
.d1 {
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,85 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-16 10:22:21
|
||||
* @LastEditTime: 2021-10-16 10:28:27
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/comparisonOfTheNumberOfWeiboInteractions/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="cotn-outter" v-loading="load">
|
||||
<v-label-div
|
||||
title="微博互动人数对比"
|
||||
:showLine="false"
|
||||
:eStyle="{ 'border-style': 'none' }"
|
||||
></v-label-div>
|
||||
<div class="cotn-inner">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getInteractCount0528C } from "@/api/BrandComparison/BrandWeibo.js";
|
||||
import { createSingleColumnar } from "@/utils/gol/singleColumnar";
|
||||
export default {
|
||||
name: "comparisonOfTheNumberOfWeiboInteractions",
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
token: "",
|
||||
sBrand: "",
|
||||
},
|
||||
opt: {},
|
||||
load: false,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.initData();
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
this.form.token = this.getToken;
|
||||
let arr = this.getBComparison;
|
||||
let brands = [];
|
||||
arr.forEach((ele) => {
|
||||
brands.push(ele.name);
|
||||
});
|
||||
this.form.sBrand = brands.toString();
|
||||
this.getData();
|
||||
},
|
||||
getData() {
|
||||
return new Promise((resolve, reject) => {
|
||||
let obj = Object.assign({}, this.getCtime2, this.form);
|
||||
this.load = true;
|
||||
getInteractCount0528C(obj)
|
||||
.then((res) => {
|
||||
let data = res.data || [];
|
||||
let dx = [];
|
||||
let ds = [];
|
||||
data.forEach((ele) => {
|
||||
dx.push(ele.key);
|
||||
ds.push(ele.value);
|
||||
});
|
||||
this.opt = createSingleColumnar(dx, ds);
|
||||
this.load = false;
|
||||
resolve(data);
|
||||
})
|
||||
.catch(() => {
|
||||
reject(false);
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.cotn-outter {
|
||||
width: 628px;
|
||||
height: 412px;
|
||||
.cotn-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,86 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-16 10:01:52
|
||||
* @LastEditTime: 2021-10-16 10:20:07
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/comparisonOfWeiboInformation/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="cowi-outter">
|
||||
<v-label-div
|
||||
title="微博信息量对比"
|
||||
:showLine="false"
|
||||
:eStyle="{ 'border-style': 'none' }"
|
||||
></v-label-div>
|
||||
<div class="cowi-inner">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import { getContrastCount0528C } from "@/api/BrandComparison/BrandWeibo.js";
|
||||
// import { createSingleColumnar } from "@/utils/gol/singleColumnar";
|
||||
export default {
|
||||
name: "comparisonOfWeiboInformation",
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
token: "",
|
||||
sBrand: "",
|
||||
},
|
||||
load: false,
|
||||
opt: {}
|
||||
};
|
||||
},
|
||||
// created() {
|
||||
// this.initData();
|
||||
// },
|
||||
// methods: {
|
||||
// initData() {
|
||||
// this.form.token = this.getToken;
|
||||
// let arr = this.getBComparison;
|
||||
// let brands = [];
|
||||
// arr.forEach((ele) => {
|
||||
// brands.push(ele.name);
|
||||
// });
|
||||
// this.form.sBrand = brands.toString();
|
||||
// this.getData();
|
||||
// },
|
||||
// getData() {
|
||||
// return new Promise((resolve, reject) => {
|
||||
// let obj = Object.assign({}, this.getCtime2, this.form);
|
||||
// this.load = true;
|
||||
// getContrastCount0528C(obj)
|
||||
// .then((res) => {
|
||||
// let data = res.data || [];
|
||||
// let dx = [];
|
||||
// let ds = [];
|
||||
// data.forEach(ele => {
|
||||
// dx.push(ele.key);
|
||||
// ds.push(ele.value)
|
||||
// })
|
||||
// this.opt = createSingleColumnar(dx,ds);
|
||||
// this.load = false
|
||||
// resolve(data);
|
||||
// })
|
||||
// .catch(() => {
|
||||
// reject(false);
|
||||
// });
|
||||
// });
|
||||
// },
|
||||
// },
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.cowi-outter {
|
||||
width: 628px;
|
||||
height: 412px;
|
||||
.cowi-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,140 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-16 10:49:09
|
||||
* @LastEditTime: 2021-10-16 13:55:52
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/weiboTuneComparison/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="wtc-outter" v-loading="load">
|
||||
<v-label-div
|
||||
title="论坛调性对比"
|
||||
:showLine="false"
|
||||
:eStyle="{ 'border-style': 'none' }"
|
||||
>
|
||||
</v-label-div>
|
||||
<div class="wtc-d1">
|
||||
<div class="dd1" style="margin-left: 16px">
|
||||
<span class="s1"></span><span class="s2">正面</span>
|
||||
</div>
|
||||
<div class="dd1" style="margin-left: 24px">
|
||||
<span class="s1" :style="{ background: '#54BF93' }"></span
|
||||
><span class="s2">中性</span>
|
||||
</div>
|
||||
<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
|
||||
v-for="(item,index) in dataSource"
|
||||
:key="index"
|
||||
:title="item.Name"
|
||||
:color="colors[index]"
|
||||
:style="index === 0 ? 'margin-left: 46px': 'margin-left: 110px'"
|
||||
:data="item.Data"
|
||||
></roundata> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import { getAffectionsC } from "@/api/BrandComparison/BbsBrand.js";
|
||||
// import roundata from "./roundata";
|
||||
export default {
|
||||
name: "forumTonalComparison",
|
||||
components: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
token: "",
|
||||
sBrand: "",
|
||||
},
|
||||
load: false,
|
||||
colors: [
|
||||
"#3373CC",
|
||||
"#63AECC",
|
||||
"#54BF93",
|
||||
"#CC9D12",
|
||||
"#CC7733",
|
||||
"#CC5B41",
|
||||
],
|
||||
dataSource: [],
|
||||
};
|
||||
},
|
||||
// created() {
|
||||
// this.initData();
|
||||
// },
|
||||
// methods: {
|
||||
// initData() {
|
||||
// this.form.token = this.getToken;
|
||||
// let arr = this.getBComparison;
|
||||
// let brands = [];
|
||||
// arr.forEach((ele) => {
|
||||
// brands.push(ele.name);
|
||||
// });
|
||||
// this.form.sBrand = brands.toString();
|
||||
// this.getData();
|
||||
// },
|
||||
// getData() {
|
||||
// return new Promise((resolve, reject) => {
|
||||
// let obj = Object.assign({}, this.getCtime2, this.form);
|
||||
// this.load = true;
|
||||
// getAffectionsC(obj)
|
||||
// .then((res) => {
|
||||
// let data = res.data || [];
|
||||
// this.dataSource = data;
|
||||
// this.load = false;
|
||||
// resolve(data);
|
||||
// })
|
||||
// .catch(() => {
|
||||
// reject(false);
|
||||
// });
|
||||
// });
|
||||
// },
|
||||
// },
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.wtc-outter {
|
||||
width: 100%;
|
||||
height: 460px;
|
||||
margin-top: 16px;
|
||||
.wtc-d1 {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
height: 36px;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
.dd1 {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
.s1 {
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: #3373cc;
|
||||
}
|
||||
.s2 {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.wtc-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,63 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-15 11:40:55
|
||||
* @LastEditTime: 2021-10-15 11:53:35
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/informationTrend/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="it-outter">
|
||||
<v-label-div title="信息量趋势"></v-label-div>
|
||||
<div class="it-inner">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import { getCountTime0528C } from "@/api/BrandComparison";
|
||||
// import createOpt from "./opt";
|
||||
export default {
|
||||
name: "informationTrend",
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
token: "",
|
||||
sBrand: "",
|
||||
},
|
||||
opt: {},
|
||||
};
|
||||
},
|
||||
// created() {
|
||||
// this.initData();
|
||||
// },
|
||||
// methods: {
|
||||
// initData() {
|
||||
// this.form.token = this.getToken;
|
||||
// let arr = this.getBComparison;
|
||||
// let brands = [];
|
||||
// arr.forEach((ele) => {
|
||||
// brands.push(ele.name);
|
||||
// });
|
||||
// this.form.sBrand = brands.toString();
|
||||
// this.getData();
|
||||
// },
|
||||
// getData() {
|
||||
|
||||
// },
|
||||
// },
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.it-outter {
|
||||
width: 618px;
|
||||
height: 460px;
|
||||
border: 2px solid #0f2a4d;
|
||||
.it-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,126 @@
|
||||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-12 10:11:24
|
||||
* @LastEditTime: 2021-11-19 19:47:53
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandInsight/titsopo/opt.js
|
||||
*/
|
||||
import { bigNumberTransform } from "@/utils/gol/dataTool"
|
||||
function createData(ds = []) {
|
||||
let testData = {}
|
||||
ds.forEach(item => {
|
||||
item.forEach(val => {
|
||||
if (testData[val.key] === undefined) {
|
||||
testData[val.key] = {
|
||||
name: val.key,
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
opacity: 0.2
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: [val.value]
|
||||
}
|
||||
} else {
|
||||
testData[val.key].data.push(val.value)
|
||||
}
|
||||
})
|
||||
})
|
||||
let arr = [];
|
||||
for(let key in testData) {
|
||||
arr.push(testData[key])
|
||||
}
|
||||
return arr
|
||||
}
|
||||
export default function createOpt(dx = [], ds = []) {
|
||||
let data = createData(ds);
|
||||
return {
|
||||
grid: {
|
||||
left: 10,
|
||||
right: '5%',
|
||||
bottom: 10,
|
||||
top: 52,
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
backgroundColor: "#08182F",
|
||||
color: "#fff",
|
||||
borderColor: "#3373CC",
|
||||
textStyle: {
|
||||
color: "#fff", //设置文字颜色
|
||||
},
|
||||
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
|
||||
},
|
||||
legend: {
|
||||
icon: 'roundRect',
|
||||
textStyle: { //图例文字的样式
|
||||
color: '#fff',
|
||||
fontSize: 10
|
||||
},
|
||||
y: 12,
|
||||
x: 16,
|
||||
itemWidth: 12,
|
||||
itemHeight: 12
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: (value) => {
|
||||
let rex = "00:00:00";
|
||||
let isCont = false;
|
||||
let str = value;
|
||||
for(let i = 0;i<dx.length-1;i++){
|
||||
//连续两条带小时
|
||||
if(dx[i].indexOf(rex) === -1 && dx[i+1].indexOf(rex) === -1){
|
||||
isCont = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if(isCont == true) {
|
||||
str = value.substring(10, 16)
|
||||
} else {
|
||||
str = value.substring(5, 10)
|
||||
}
|
||||
return str;
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
data: dx
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: (value) => {
|
||||
let str = bigNumberTransform(value);
|
||||
return str;
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: "dashed", // y轴分割线类型
|
||||
color: "#012b4b",
|
||||
},
|
||||
},
|
||||
},
|
||||
series: data
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,91 @@
|
||||
<!--
|
||||
* @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-loading="load">
|
||||
<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 { getSourcetypeC } from "@/api/BrandComparison/BrandWeiyi.js";
|
||||
// import createOpt from "./opt";
|
||||
export default {
|
||||
name: "informationVolumeByChannel",
|
||||
data() {
|
||||
return {
|
||||
opt: {},
|
||||
load: false,
|
||||
form: {
|
||||
token: "",
|
||||
sBrand: "",
|
||||
},
|
||||
};
|
||||
},
|
||||
// created() {
|
||||
// this.initData();
|
||||
// },
|
||||
// methods: {
|
||||
// initData() {
|
||||
// this.form.token = this.getToken;
|
||||
// let arr = this.getBComparison;
|
||||
// let brands = [];
|
||||
// arr.forEach((ele) => {
|
||||
// brands.push(ele.name);
|
||||
// });
|
||||
// this.form.sBrand = brands.toString();
|
||||
// this.getData();
|
||||
// },
|
||||
// getData() {
|
||||
// return new Promise((resolve, reject) => {
|
||||
// let obj = Object.assign({}, this.getCtime2, this.form);
|
||||
// this.load = true;
|
||||
// getSourcetypeC(obj)
|
||||
// .then((res) => {
|
||||
// let data = res.data || [];
|
||||
// let brandList = [];
|
||||
// let dx = [];
|
||||
// data.forEach((e) => {
|
||||
// let ab = e.Data || {};
|
||||
// for (let key in ab) {
|
||||
// if (!dx.includes(key)) {
|
||||
// dx.push(key);
|
||||
// }
|
||||
// }
|
||||
// brandList.push(e.Name);
|
||||
// });
|
||||
// this.opt = createOpt(data, dx, brandList);
|
||||
// this.load = false;
|
||||
// resolve(data);
|
||||
// })
|
||||
// .catch(() => {
|
||||
// reject(false);
|
||||
// });
|
||||
// });
|
||||
// },
|
||||
// },
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.ivb-outter {
|
||||
width: 944px;
|
||||
height: 412px;
|
||||
.ivb-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,78 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-15 11:58:33
|
||||
* @LastEditTime: 2021-10-15 15:20:41
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/overallInformation/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="oi-outter">
|
||||
<v-label-div title="整体信息量"></v-label-div>
|
||||
<div class="oi-inner">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import { getContrastCount0528C } from "@/api/BrandComparison";
|
||||
// import { createSingleColumnar } from "@/utils/gol/singleColumnar";
|
||||
export default {
|
||||
name: "overallInformation",
|
||||
data() {
|
||||
return {
|
||||
load: false,
|
||||
form: {
|
||||
token: "",
|
||||
sBrand: "",
|
||||
},
|
||||
opt: {},
|
||||
};
|
||||
},
|
||||
}
|
||||
// created() {
|
||||
// this.initData();
|
||||
// },
|
||||
// methods: {
|
||||
// initData() {
|
||||
// this.form.token = this.getToken;
|
||||
// let arr = this.getBComparison;
|
||||
// let brands = [];
|
||||
// arr.forEach((ele) => {
|
||||
// brands.push(ele.name);
|
||||
// });
|
||||
// this.form.sBrand = brands.toString();
|
||||
// this.getData();
|
||||
// },
|
||||
// getData() {
|
||||
// let obj = Object.assign({}, this.getCtime2, this.form);
|
||||
// this.load = true;
|
||||
// getContrastCount0528C(obj).then((res) => {
|
||||
// let data = res.data || [];
|
||||
// let brandsList = [];
|
||||
// let infoList = [];
|
||||
// data.forEach((e) => {
|
||||
// brandsList.push(e.key);
|
||||
// infoList.push(e.value);
|
||||
// });
|
||||
// this.opt = createSingleColumnar(brandsList, infoList);
|
||||
// this.load = false;
|
||||
// });
|
||||
// },
|
||||
// },
|
||||
// };
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.oi-outter {
|
||||
width: 618px;
|
||||
height: 460px;
|
||||
border: 2px solid #0f2a4d;
|
||||
margin-left: 16px;
|
||||
.oi-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,77 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-15 13:12:08
|
||||
* @LastEditTime: 2021-10-15 15:21:18
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/overallNumberOfInteractions/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="onoi-outter">
|
||||
<v-label-div title="整体互动人数"></v-label-div>
|
||||
<div class="onoi-inner">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import { getInteractCount0528C } from "@/api/BrandComparison";
|
||||
// import { createSingleColumnar } from "@/utils/gol/singleColumnar";
|
||||
export default {
|
||||
name: "overallInformation",
|
||||
data() {
|
||||
return {
|
||||
load: false,
|
||||
form: {
|
||||
token: "",
|
||||
sBrand: "",
|
||||
},
|
||||
opt: {},
|
||||
};
|
||||
},
|
||||
// created() {
|
||||
// this.initData();
|
||||
// },
|
||||
// methods: {
|
||||
// initData() {
|
||||
// this.form.token = this.getToken;
|
||||
// let arr = this.getBComparison;
|
||||
// let brands = [];
|
||||
// arr.forEach((ele) => {
|
||||
// brands.push(ele.name);
|
||||
// });
|
||||
// this.form.sBrand = brands.toString();
|
||||
// this.getData();
|
||||
// },
|
||||
// getData() {
|
||||
// this.load = true;
|
||||
// let obj = Object.assign({}, this.getCtime2, this.form);
|
||||
// getInteractCount0528C(obj).then((res) => {
|
||||
// let data = res.data || [];
|
||||
// let brandsList = [];
|
||||
// let infoList = [];
|
||||
// data.forEach((e) => {
|
||||
// brandsList.push(e.key);
|
||||
// infoList.push(e.value);
|
||||
// });
|
||||
// this.opt = createSingleColumnar(brandsList, infoList);
|
||||
// this.load = false;
|
||||
// });
|
||||
// },
|
||||
// },
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.onoi-outter {
|
||||
width: 618px;
|
||||
height: 460px;
|
||||
border: 2px solid #0f2a4d;
|
||||
margin-left: 16px;
|
||||
.onoi-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,132 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-15 16:56:32
|
||||
* @LastEditTime: 2021-10-15 17:31:34
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/overallWordCloudComparison/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="owcc-outter">
|
||||
<v-label-div title="整体词云对比"> </v-label-div>
|
||||
<div class="owcc-inner">
|
||||
<!-- <div class="owcc-item" v-for="(item, index) in dataSource" :key="index">
|
||||
<v-label-div
|
||||
:title="item.name"
|
||||
:titleColor="colors[index]"
|
||||
:showLine="false"
|
||||
:eStyle="{ 'border-style': 'none' }"
|
||||
>
|
||||
<v-tab-group
|
||||
:btns="['正面', '负面']"
|
||||
@change="(n) => {handlerTab(n,item)}"
|
||||
></v-tab-group>
|
||||
</v-label-div>
|
||||
<div class="owcc-draw">
|
||||
<v-echarts :opt="item.opt"></v-echarts>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import { getPositiveAndNegative0528C } from "@/api/BrandComparison";
|
||||
// import createWordCloud from "@/utils/gol/bubbleWord";
|
||||
export default {
|
||||
name: "overallWordCloudComparison",
|
||||
data() {
|
||||
return {
|
||||
opt: {},
|
||||
form: {
|
||||
token: "",
|
||||
sBrand: "",
|
||||
},
|
||||
// load: false,
|
||||
colors: [
|
||||
"#3373CC",
|
||||
"#63AECC",
|
||||
"#54BF93",
|
||||
"#CC9D12",
|
||||
"#CC7733",
|
||||
"#CC5B41",
|
||||
],
|
||||
dataSource: []
|
||||
};
|
||||
},
|
||||
// created() {
|
||||
// this.initData();
|
||||
// },
|
||||
// methods: {
|
||||
// initData() {
|
||||
// this.form.token = this.getToken;
|
||||
// let arr = this.getBComparison;
|
||||
// let brands = [];
|
||||
// arr.forEach((ele) => {
|
||||
// brands.push(ele.name);
|
||||
// });
|
||||
// this.form.sBrand = brands.toString();
|
||||
// this.getData();
|
||||
// },
|
||||
// getData() {
|
||||
// return new Promise((resolve, reject) => {
|
||||
// let obj = Object.assign({}, this.getCtime2, this.form);
|
||||
// this.load = true;
|
||||
// getPositiveAndNegative0528C(obj)
|
||||
// .then((res) => {
|
||||
// let data = res.data || [];
|
||||
// let arr = [];
|
||||
// data.forEach(ele => {
|
||||
// let obj = {
|
||||
// name: ele.key,
|
||||
// p: ele.value[0].value,
|
||||
// s: ele.value[1].value,
|
||||
// opt: createWordCloud(ele.value[0].value),
|
||||
// tapIndex: 0
|
||||
// }
|
||||
// arr.push(obj);
|
||||
// })
|
||||
// this.dataSource = arr;
|
||||
// this.load = false;
|
||||
// resolve(data);
|
||||
// })
|
||||
// .catch(() => {
|
||||
// reject(false);
|
||||
// });
|
||||
// });
|
||||
// },
|
||||
// handlerTab(n,item) {
|
||||
// item.tapIndex = n;
|
||||
// if(n === 0) {
|
||||
// item.opt = createWordCloud(item.p)
|
||||
// } else {
|
||||
// item.opt = createWordCloud(item.s)
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.owcc-outter {
|
||||
width: 100%;
|
||||
height: 460px;
|
||||
border: 2px solid #0f2a4d;
|
||||
margin-top: 16px;
|
||||
.owcc-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
.owcc-item {
|
||||
width: 314px;
|
||||
height: 412px;
|
||||
margin-top: 5px;
|
||||
.owcc-draw {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,138 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-16 13:14:28
|
||||
* @LastEditTime: 2021-10-16 13:44:02
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/summaryAndComparisonOfForumInformation/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="saco-outter" v-loading="load">
|
||||
<v-label-div title="论坛信息概括对比" :showLine="false" :eStyle="{'border-style': 'none'}"/>
|
||||
<div class="saco-item" v-for="(item,index) in sourceData" :key="index">
|
||||
<span class="s1">{{item.key}}</span>
|
||||
<div class="d1">
|
||||
<img class="d1-m1" src="../../../assets/images/BrandInsight/ic_lt.png">
|
||||
<div class="d1-d1">
|
||||
<span class="ss1">论坛信息量</span>
|
||||
<span class="ss2">{{item.Count}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d1">
|
||||
<img class="d1-m1" src="../../../assets/images/BrandInsight/ic_hdrs.png">
|
||||
<div class="d1-d1">
|
||||
<span class="ss1">互动人数</span>
|
||||
<span class="ss2">{{item.commentsSum}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d1">
|
||||
<img class="d1-m1" src="../../../assets/images/BrandInsight/ic_ztl.png">
|
||||
<div class="d1-d1">
|
||||
<span class="ss1">论坛主贴量</span>
|
||||
<span class="ss2">{{item.zhutieCount}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d1">
|
||||
<img class="d1-m1" src="../../../assets/images/BrandInsight/ic_pll.png">
|
||||
<div class="d1-d1">
|
||||
<span class="ss1">论坛评论量</span>
|
||||
<span class="ss2">{{item.interactCount}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getCount0528C} from "@/api/BrandComparison/BbsBrand.js"
|
||||
export default {
|
||||
name: "summaryAndComparisonOfForumInformation",
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
token: "",
|
||||
sBrand: ""
|
||||
},
|
||||
load: false,
|
||||
sourceData: [],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.initData();
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
this.form.token = this.getToken;
|
||||
let arr = this.getBComparison;
|
||||
let brands = [];
|
||||
arr.forEach(ele => {
|
||||
brands.push(ele.name)
|
||||
});
|
||||
this.form.sBrand = brands.toString();
|
||||
this.getData();
|
||||
},
|
||||
getData() {
|
||||
return new Promise((resolve, reject) => {
|
||||
let obj = Object.assign({}, this.getCtime2, this.form);
|
||||
this.load = true;
|
||||
getCount0528C(obj).then((res) => {
|
||||
let data = res.data || [];
|
||||
this.sourceData = data;
|
||||
this.load = false;
|
||||
resolve(data)
|
||||
}).catch(() => {
|
||||
reject(false)
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.saco-outter {
|
||||
width: 944px;
|
||||
height: 412px;
|
||||
.saco-item {
|
||||
width: 912px;
|
||||
height: 54px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #0f2a4d;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
margin-bottom: 5px;
|
||||
margin-left: 16px;
|
||||
.s1 {
|
||||
width: 137px;
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
margin-left: 16px;
|
||||
}
|
||||
.d1 {
|
||||
width: 183px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
.d1-m1 {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
.d1-d1 {
|
||||
.ss1 {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: #7f868d;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.ss2 {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
font-family: Bebas;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,147 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-14 11:25:20
|
||||
* @LastEditTime: 2021-10-16 11:31:16
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/WeiboDetails/weiboUserActiveArea/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="wua-outter" v-loading="load">
|
||||
<v-label-div
|
||||
title="用户区域分布"
|
||||
:showLine="false"
|
||||
:eStyle="{ 'border-style': 'none' }"
|
||||
>
|
||||
<v-tab-group :btns="this.brandArr" @change="handlerTab"></v-tab-group>
|
||||
</v-label-div>
|
||||
<div class="wua-inner">
|
||||
<div class="d1">
|
||||
<!-- <v-echarts :opt="opt1"></v-echarts> -->
|
||||
</div>
|
||||
<div class="d2">
|
||||
<!-- <v-echars-map :opt="opt2"></v-echars-map> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import { getRegionWeiBoC } from "@/api/BrandComparison/BrandWeibo.js";
|
||||
// import createOptD1 from "./opt1";
|
||||
// import createOptD2 from "./opt2";
|
||||
export default {
|
||||
name: "userAreaDistribution",
|
||||
data() {
|
||||
return {
|
||||
opt1: {},
|
||||
opt2: {},
|
||||
form: {
|
||||
token: "",
|
||||
sBrand: "",
|
||||
},
|
||||
dataSource: [],
|
||||
brandArr: [],
|
||||
};
|
||||
},
|
||||
// created() {
|
||||
// this.initData();
|
||||
// },
|
||||
// methods: {
|
||||
// initData() {
|
||||
// this.form.token = this.getToken;
|
||||
// let arr = this.getBComparison;
|
||||
// let brands = [];
|
||||
// arr.forEach((ele) => {
|
||||
// brands.push(ele.name);
|
||||
// });
|
||||
// this.form.sBrand = brands.toString();
|
||||
// Promise.all([this.getData()]).then(() => {
|
||||
// // 什么也不执行
|
||||
// this.handlerTab(0);
|
||||
// });
|
||||
// },
|
||||
// getData() {
|
||||
// return new Promise((resolve, reject) => {
|
||||
// let obj = Object.assign({}, this.getCtime2, this.form);
|
||||
// this.load = true;
|
||||
// getRegionWeiBoC(obj)
|
||||
// .then((res) => {
|
||||
// let data = res.data || [];
|
||||
// //dx省份 ds数据 dm省份和数据的对象数组
|
||||
// let mapArr = [];
|
||||
// let brandList = [];
|
||||
// data.forEach((ele) => {
|
||||
// let dx = [];
|
||||
// let ds = [];
|
||||
// let dm = this.toArr(ele.Data);
|
||||
// dm.forEach((e) => {
|
||||
// //处理直辖市
|
||||
// e.name = e.name.replace('省', '');
|
||||
// dx.push(e.name);
|
||||
// ds.push(e.value);
|
||||
// });
|
||||
// let o = {
|
||||
// name: ele.Name,
|
||||
// dx: dx,
|
||||
// ds: ds,
|
||||
// dm: dm,
|
||||
// //opt1: createOptD1(),
|
||||
// //opt2: createOptD2(),
|
||||
// //tapIndex: 0
|
||||
// };
|
||||
// brandList.push(ele.Name);
|
||||
// mapArr.push(o);
|
||||
// });
|
||||
// this.dataSource = mapArr;
|
||||
// this.brandArr = brandList;
|
||||
// this.load = false;
|
||||
// resolve(data);
|
||||
// })
|
||||
// .catch(() => {
|
||||
// reject(false);
|
||||
// });
|
||||
// });
|
||||
// },
|
||||
// // 将对象变成数组
|
||||
// toArr(obj) {
|
||||
// let arr = [];
|
||||
// for (let key in obj) {
|
||||
// let o = {
|
||||
// name: key,
|
||||
// value: obj[key] * 1,
|
||||
// };
|
||||
// arr.push(o);
|
||||
// }
|
||||
// return arr;
|
||||
// },
|
||||
// // 切换数据
|
||||
// handlerTab(n) {
|
||||
// this.opt1 = createOptD1(this.dataSource[n].dx, this.dataSource[n].ds);
|
||||
// this.opt2 = createOptD2(this.dataSource[n].dm);
|
||||
// },
|
||||
// },
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.wua-outter {
|
||||
width: 944px;
|
||||
height: 412px;
|
||||
.wua-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
.d1 {
|
||||
width: 479px;
|
||||
height: 100%;
|
||||
}
|
||||
.d2 {
|
||||
width: 465px;
|
||||
height: 100%;
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,134 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-16 10:49:09
|
||||
* @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
|
||||
-->
|
||||
<template>
|
||||
<div class="wtc-outter">
|
||||
<v-label-div
|
||||
title="微博调性对比"
|
||||
:showLine="false"
|
||||
:eStyle="{ 'border-style': 'none' }"
|
||||
>
|
||||
</v-label-div>
|
||||
<div class="wtc-d1">
|
||||
<div class="dd1" style="margin-left: 16px">
|
||||
<span class="s1"></span><span class="s2">正面</span>
|
||||
</div>
|
||||
<div class="dd1" style="margin-left: 24px">
|
||||
<span class="s1" :style="{ background: '#54BF93' }"></span
|
||||
><span class="s2">中性</span>
|
||||
</div>
|
||||
<div class="dd1" style="margin-left: 24px">
|
||||
<span class="s1" :style="{ background: '#CC9D12' }"></span
|
||||
><span class="s2">负面</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wtc-inner">
|
||||
<!-- <wbRoundata
|
||||
v-for="(item,index) in dataSource"
|
||||
:key="index"
|
||||
:title="item.Name"
|
||||
:color="colors[index]"
|
||||
:style="index === 0 ? 'margin-left: 46px': 'margin-left: 110px'"
|
||||
:data="item.Data"
|
||||
></wbRoundata> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import { getAffectionsC } from "@/api/BrandComparison/BrandWeibo.js";
|
||||
// import wbRoundata from "./wbRoundata";
|
||||
export default {
|
||||
name: "weiboTuneComparison",
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
token: "",
|
||||
sBrand: "",
|
||||
},
|
||||
load: false,
|
||||
colors: ["#3373CC","#63AECC","#54BF93","#CC9D12","#CC7733","#CC5B41"],
|
||||
dataSource: []
|
||||
};
|
||||
},
|
||||
components: {
|
||||
|
||||
},
|
||||
|
||||
// created() {
|
||||
// this.initData();
|
||||
// },
|
||||
// methods: {
|
||||
// initData() {
|
||||
// this.form.token = this.getToken;
|
||||
// let arr = this.getBComparison;
|
||||
// let brands = [];
|
||||
// arr.forEach((ele) => {
|
||||
// brands.push(ele.name);
|
||||
// });
|
||||
// this.form.sBrand = brands.toString();
|
||||
// this.getData();
|
||||
// },
|
||||
// getData() {
|
||||
// return new Promise((resolve, reject) => {
|
||||
// let obj = Object.assign({}, this.getCtime2, this.form);
|
||||
// this.load = true;
|
||||
// getAffectionsC(obj)
|
||||
// .then((res) => {
|
||||
// let data = res.data || [];
|
||||
// this.dataSource = data;
|
||||
// this.load = false;
|
||||
// resolve(data);
|
||||
// })
|
||||
// .catch(() => {
|
||||
// reject(false);
|
||||
// });
|
||||
// });
|
||||
// },
|
||||
// },
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.wtc-outter {
|
||||
width: 100%;
|
||||
height: 460px;
|
||||
margin-top: 16px;
|
||||
.wtc-d1 {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
height: 36px;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
.dd1 {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
.s1 {
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: #3373cc;
|
||||
}
|
||||
.s2 {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.wtc-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,127 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-15 15:58:57
|
||||
* @LastEditTime: 2021-11-16 11:06:38
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/brandCommunicationTOPMedia/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="bcm-outter" v-loading="load">
|
||||
<v-label-div title="车型传播TOP媒体"> </v-label-div>
|
||||
<div class="bcm-inner">
|
||||
<div class="bcm-item" v-for="(item, index) in arrList" :key="index">
|
||||
<span class="ss1" :style="{ color: colors[index] }">{{
|
||||
item.key
|
||||
}}</span>
|
||||
<div class="dd1">
|
||||
<vue-scroll>
|
||||
<!-- <v-ranking-bcm v-for="(it, n) in item.value" :key="n" :label="it.key" :num="it.num" :val="it.value"></v-ranking-bcm> -->
|
||||
</vue-scroll>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// import { getSourceTopCount0528C } from "@/api/BrandComparison";
|
||||
// import vRankingBcm from "./v-ranking-bcm";
|
||||
export default {
|
||||
name: "brandCommunicationTOPMedia",
|
||||
components: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
load: false,
|
||||
colors: [
|
||||
"#3373CC",
|
||||
"#63AECC",
|
||||
"#54BF93",
|
||||
"#CC9D12",
|
||||
"#CC7733",
|
||||
"#CC5B41",
|
||||
],
|
||||
form: {
|
||||
token: "",
|
||||
sBrand: "",
|
||||
sSeriesName: "",
|
||||
iContrastType: 2,
|
||||
},
|
||||
arrList: [],
|
||||
};
|
||||
},
|
||||
// created() {
|
||||
// this.initData();
|
||||
// },
|
||||
// methods: {
|
||||
// initData() {
|
||||
// this.form.token = this.getToken;
|
||||
// let arr = this.getMComparison;
|
||||
// let brands = [];
|
||||
// let models = [];
|
||||
// arr.forEach((ele) => {
|
||||
// brands.push(ele.brand);
|
||||
// models.push(ele.model);
|
||||
// });
|
||||
// this.form.sBrand = brands.toString();
|
||||
// this.form.sSeriesName = models.toString();
|
||||
// this.getData();
|
||||
// },
|
||||
// getData() {
|
||||
// return new Promise((resolve, reject) => {
|
||||
// let obj = Object.assign({}, this.getCtime2, this.form);
|
||||
// this.load = true;
|
||||
// getSourceTopCount0528C(obj)
|
||||
// .then((res) => {
|
||||
// let data = res.data || [];
|
||||
// data.forEach((ele) => {
|
||||
// for (
|
||||
// let index = 0;
|
||||
// index < ele.value.length;
|
||||
// index++
|
||||
// ) {
|
||||
// ele.value[index].num = index + 1;
|
||||
// }
|
||||
// });
|
||||
// this.arrList = data;
|
||||
// this.load = false;
|
||||
// resolve(data);
|
||||
// })
|
||||
// .catch(() => {
|
||||
// reject(false);
|
||||
// });
|
||||
// });
|
||||
// },
|
||||
// },
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.bcm-outter {
|
||||
width: 100%;
|
||||
height: 460px;
|
||||
border: 2px solid #0f2a4d;
|
||||
margin-top: 16px;
|
||||
.bcm-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
.bcm-item {
|
||||
width: 282px;
|
||||
margin-left: 27px;
|
||||
.ss1 {
|
||||
display: block;
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
padding-top: 14px;
|
||||
}
|
||||
.dd1 {
|
||||
height: calc(100% - 44px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,264 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-11-03 11:54:08
|
||||
* @LastEditTime: 2021-11-19 15:41:42
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/MarketingComparison/mcChooseModel/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="mccm-outter">
|
||||
<v-label-div title="切换车型">
|
||||
<a-button style="margin-right: 1rem" :loading="btnLoading" @click="handlerExport" v-if="getMComparison.length > 0" v-has="'btn_model_c_toppt'">导出报告</a-button>
|
||||
<v-btn @click="goback">返回洞察详情</v-btn>
|
||||
</v-label-div>
|
||||
<div class="mccm-inner">
|
||||
<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 class="m-t-btn" @click="handlerDel(index)" v-if="item.isDel">删除</div>
|
||||
<div class="m-t-btn" @click="handlerChoose(index)" v-else>切换车型</div>
|
||||
</div>
|
||||
<img v-if="index < list.length -1" class="mccm-vs" src="../../../assets/images/comm/img_vs.png">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
<iSwitchModel :brand="brand" :model="model" :visible.sync="modelShow" @change="handlerBrand"></iSwitchModel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getToPptTask } from "@/api/BrandInsight";
|
||||
import { getUserSeriesName } from "@/api/comm";
|
||||
export default {
|
||||
name: "brandCompateHeader",
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
data: {
|
||||
handler(val) {
|
||||
if (val.length > 0) {
|
||||
val.forEach((ele, index) => {
|
||||
this.list[index] = Object.assign(this.list[index], ele);
|
||||
});
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
btnLoading: false,
|
||||
labelCol: { span: 9 },
|
||||
wrapperCol: { span: 14 },
|
||||
modelShow: false,
|
||||
brand: "",
|
||||
model: "",
|
||||
chooseIndex: -1,
|
||||
form: {
|
||||
token: "",
|
||||
sBrandName: "",
|
||||
},
|
||||
list: [
|
||||
{
|
||||
brand: "",
|
||||
model: "",
|
||||
isDel: false,
|
||||
},
|
||||
{
|
||||
brand: "",
|
||||
model: "",
|
||||
isDel: false,
|
||||
},
|
||||
{
|
||||
brand: "",
|
||||
model: "",
|
||||
isDel: false,
|
||||
},
|
||||
{
|
||||
brand: "",
|
||||
model: "",
|
||||
isDel: false,
|
||||
},
|
||||
{
|
||||
brand: "",
|
||||
model: "",
|
||||
isDel: false,
|
||||
},
|
||||
{
|
||||
brand: "",
|
||||
model: "",
|
||||
isDel: false,
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.brand = this.getBrand.brandname || "奥迪";
|
||||
this.modelData();
|
||||
},
|
||||
methods: {
|
||||
goback() {
|
||||
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.isDel = false;
|
||||
let filterArr = this.list.filter((ele) => {
|
||||
return ele.brand && ele.model;
|
||||
});
|
||||
this.$emit("del", n);
|
||||
this.$emit("change", filterArr);
|
||||
},
|
||||
// 获取切换车型的数据
|
||||
handlerBrand(arr) {
|
||||
let n = this.list.findIndex((ele) => ele.model === arr[1].name);
|
||||
if (n != -1) return;
|
||||
let row = this.list[this.chooseIndex];
|
||||
row.brand = arr[0].brandname;
|
||||
row.model = arr[1].name;
|
||||
row.isDel = true;
|
||||
let filterArr = this.list.filter((ele) => {
|
||||
return ele.brand && ele.model;
|
||||
});
|
||||
this.$emit("change", filterArr);
|
||||
},
|
||||
handlerExport() {
|
||||
this.btnLoading = true;
|
||||
let arr = this.getMComparison;
|
||||
let brands = [];
|
||||
let models = [];
|
||||
arr.forEach((ele) => {
|
||||
brands.push(ele.brand);
|
||||
models.push(ele.model);
|
||||
});
|
||||
let sBrand = brands.toString();
|
||||
let sSeriesName = models.toString();
|
||||
let obj = Object.assign({}, this.getCtime2, {
|
||||
token: this.getToken,
|
||||
iContrastType: 2,
|
||||
sBrand: sBrand,
|
||||
sSeriesName: sSeriesName,
|
||||
sType: 'ToSeriesPptV6'
|
||||
});
|
||||
getToPptTask(obj).then(() => {
|
||||
this.$notification.open({
|
||||
message: `数据生成中`,
|
||||
description: '请前往个人中心查看下载进度',
|
||||
placement: 'bottomRight',
|
||||
});
|
||||
this.btnLoading = false;
|
||||
})
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.mccm-outter {
|
||||
width: 1888px;
|
||||
height: 236px;
|
||||
border: 2px solid #0f2a4d;
|
||||
.mccm-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
.mccm-item {
|
||||
width: 230px;
|
||||
height: 160px;
|
||||
background: linear-gradient(180deg, #003a62 0%, #001c43 100%);
|
||||
border: 2px solid #0e5193;
|
||||
margin-top: 13px;
|
||||
border-radius: 2px;
|
||||
position: relative;
|
||||
.m-t-btn {
|
||||
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: 100% 100%;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
color: #63aecc;
|
||||
line-height: 28px;
|
||||
}
|
||||
.mc-t {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
margin-top: 21px;
|
||||
.m-t-d1 {
|
||||
width: 78px;
|
||||
height: 78px;
|
||||
background-image: url("../../../assets/images/BrandInsight/img_lq.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
line-height: 78px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: #0090ff;
|
||||
margin-left: 17px;
|
||||
}
|
||||
.m-t-s1 {
|
||||
display: block;
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
margin-left: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.mccm-vs {
|
||||
width: 78px;
|
||||
height: 78px;
|
||||
margin-top: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
/deep/ .ant-form-item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
/deep/ .ant-calendar-picker {
|
||||
min-width: auto !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,164 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-15 17:33:28
|
||||
* @LastEditTime: 2021-11-12 10:02:53
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/brandEventComparison/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="bec-outter" v-loading="load">
|
||||
<v-label-div title="车型事件对比"> </v-label-div>
|
||||
<div class="bec-inner">
|
||||
<v-label-div title="渠道声量对比" :showLine="false" :eStyle="{ 'border-style': 'none' }">
|
||||
</v-label-div>
|
||||
<div class="bec-inner-1">
|
||||
<!-- <v-echarts :opt="opt1"></v-echarts> -->
|
||||
</div>
|
||||
</div>
|
||||
<v-label-div title="事件分类" :showLine="false" :eStyle="{ 'border-style': 'none' }">
|
||||
</v-label-div>
|
||||
<div class="bec-one">
|
||||
<!-- <v-echarts :opt="opt2"></v-echarts> -->
|
||||
</div>
|
||||
<!-- <eventBrandTonalDistribution></eventBrandTonalDistribution> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import { getSourcetypeC } from "@/api/BrandComparison/HotEvent.js";
|
||||
// import { getEventsSeriesNameC } from "@/api/ModelComparison";
|
||||
// import eventBrandTonalDistribution from "../eventBrandTonalDistribution"
|
||||
// import createOpt from "./opt";
|
||||
// import createOpt1 from "./opt1"
|
||||
export default {
|
||||
name: "brandEventComparison",
|
||||
components: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
load: false,
|
||||
// opt1: {},
|
||||
// opt2: {},
|
||||
form: {
|
||||
token: "",
|
||||
sBrand: "",
|
||||
sSeriesName: "",
|
||||
iContrastType: 2,
|
||||
},
|
||||
colors: [
|
||||
"#3373CC",
|
||||
"#63AECC",
|
||||
"#54BF93",
|
||||
"#CC9D12",
|
||||
"#CC7733",
|
||||
"#CC5B41",
|
||||
],
|
||||
|
||||
};
|
||||
},
|
||||
// created() {
|
||||
// this.initData();
|
||||
// },
|
||||
// methods: {
|
||||
// initData() {
|
||||
// this.form.token = this.getToken;
|
||||
// let arr = this.getMComparison;
|
||||
// let brands = [];
|
||||
// let models = [];
|
||||
// arr.forEach((ele) => {
|
||||
// brands.push(ele.brand);
|
||||
// models.push(ele.model);
|
||||
// });
|
||||
// this.form.sBrand = brands.toString();
|
||||
// this.form.sSeriesName = models.toString();
|
||||
// this.load = true;
|
||||
// Promise.all([this.getData(),this.getTypeData()]).then(() => {
|
||||
// this.load = false;
|
||||
// })
|
||||
// },
|
||||
// getData() {
|
||||
// return new Promise((resolve, reject) => {
|
||||
// let obj = Object.assign({}, this.getCtime2, this.form);
|
||||
// getSourcetypeC(obj)
|
||||
// .then((res) => {
|
||||
// let data = res.data || [];
|
||||
// let dx = [];
|
||||
// data.forEach((ele) => {
|
||||
// let ab = ele.Data || {};
|
||||
// for(let key in ab) {
|
||||
// if(!dx.includes(key)) {
|
||||
// dx.push(key)
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
// this.opt1 = createOpt(data, dx);
|
||||
// resolve(data);
|
||||
// })
|
||||
// .catch(() => {
|
||||
// reject(false);
|
||||
// });
|
||||
// });
|
||||
// },
|
||||
// getTypeData() {
|
||||
// return new Promise((resolve, reject) => {
|
||||
// let obj = Object.assign({}, this.getCtime2, this.form);
|
||||
// getEventsSeriesNameC(obj)
|
||||
// .then((res) => {
|
||||
// let data = res.data || [];
|
||||
// let brandList = [];
|
||||
// data.forEach((e) => {
|
||||
// e.Name = e.key;
|
||||
// brandList.push(e.key);
|
||||
// });
|
||||
// this.opt2 = createOpt1(data, brandList);
|
||||
// resolve(data);
|
||||
// })
|
||||
// .catch(() => {
|
||||
// reject(false);
|
||||
// });
|
||||
// });
|
||||
// },
|
||||
// },
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.bec-outter {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border: 2px solid #0f2a4d;
|
||||
margin-top: 16px;
|
||||
.bec-inner {
|
||||
width: 100%;
|
||||
height: 412px;
|
||||
.bec-inner-1 {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
.bec-one {
|
||||
width: 100%;
|
||||
height: 412px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
.bec-one-item {
|
||||
width: 314px;
|
||||
height: 100%;
|
||||
.s1 {
|
||||
padding-left: 16px;
|
||||
display: block;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
}
|
||||
.d1 {
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,82 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-16 14:26:18
|
||||
* @LastEditTime: 2021-11-12 14:29:39
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/brandRearWingComparison/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="brw-outter" v-loading="load">
|
||||
<v-label-div title="尾翼趋势对比" :showLine="false" :eStyle="{'border-style': 'none'}" />
|
||||
<div class="brw-inner">
|
||||
<!-- <v-echarts :opt="opt"></v-echarts> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import { getCountTime0528C1 } from "@/api/ModelComparison";
|
||||
// import createOpt from "./opt";
|
||||
export default {
|
||||
name: "brandRearWingComparison",
|
||||
data() {
|
||||
return {
|
||||
load: false,
|
||||
form: {
|
||||
token: "",
|
||||
sBrand: "",
|
||||
sSeriesName: "",
|
||||
iContrastType: 2,
|
||||
},
|
||||
// opt: createOpt(),
|
||||
};
|
||||
},
|
||||
// created() {
|
||||
// this.initData();
|
||||
// },
|
||||
// methods: {
|
||||
// initData() {
|
||||
// this.form.token = this.getToken;
|
||||
// let arr = this.getMComparison || [];
|
||||
// let brands = [];
|
||||
// let models = [];
|
||||
// arr.forEach((ele) => {
|
||||
// brands.push(ele.brand);
|
||||
// models.push(ele.model);
|
||||
// });
|
||||
// this.form.sBrand = brands.toString();
|
||||
// this.form.sSeriesName = models.toString();
|
||||
// this.getData();
|
||||
// },
|
||||
// getData() {
|
||||
// let obj = Object.assign({}, this.getCtime2, this.form);
|
||||
// this.load = true;
|
||||
// getCountTime0528C1(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);
|
||||
// this.load = false;
|
||||
// });
|
||||
// },
|
||||
// },
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.brw-outter {
|
||||
width: 944px;
|
||||
height: 412px;
|
||||
.brw-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,134 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-15 13:27:50
|
||||
* @LastEditTime: 2021-11-11 14:25:06
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/brandTonalDistribution/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="bd-outter">
|
||||
<v-label-div title="车型调性分布"> </v-label-div>
|
||||
<div class="bd-d1">
|
||||
<div class="dd1" style="margin-left: 16px">
|
||||
<span class="s1"></span><span class="s2">正面</span>
|
||||
</div>
|
||||
<div class="dd1" style="margin-left: 24px">
|
||||
<span class="s1" :style="{ background: '#54BF93' }"></span
|
||||
><span class="s2">中性</span>
|
||||
</div>
|
||||
<div class="dd1" style="margin-left: 24px">
|
||||
<span class="s1" :style="{ background: '#CC9D12' }"></span
|
||||
><span class="s2">负面</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bd-inner">
|
||||
<!-- <roundata
|
||||
v-for="(item,index) in list"
|
||||
:key="index"
|
||||
:title="item.Name"
|
||||
:color="colors[index]"
|
||||
:style="index === 0 ? 'margin-left: 4rem': 'margin-left: 7.5rem'"
|
||||
:data="item.Data"
|
||||
></roundata> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import { getAffectionsC } from "@/api/BrandComparison";
|
||||
// import roundata from "./roundata";
|
||||
export default {
|
||||
name: "brandTonalDistribution",
|
||||
components: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
load: false,
|
||||
form: {
|
||||
token: "",
|
||||
sBrand: "",
|
||||
sSeriesName: "",
|
||||
iContrastType: 2
|
||||
},
|
||||
colors: ['#3373CC', '#63AECC', '#54BF93', '#CC9D12', '#CC7733', '#CC5B41'],
|
||||
list: [
|
||||
|
||||
]
|
||||
};
|
||||
},
|
||||
// created() {
|
||||
// this.initData();
|
||||
// },
|
||||
// methods: {
|
||||
// initData() {
|
||||
// this.form.token = this.getToken;
|
||||
// let arr = this.getMComparison;
|
||||
// let brands = [];
|
||||
// let models = [];
|
||||
// arr.forEach(ele => {
|
||||
// brands.push(ele.brand);
|
||||
// models.push(ele.model);
|
||||
// });
|
||||
// this.form.sBrand = brands.toString();
|
||||
// this.form.sSeriesName = models.toString();
|
||||
// this.getData();
|
||||
// },
|
||||
// //
|
||||
// getData() {
|
||||
// return new Promise((resolve, reject) => {
|
||||
// this.load = true;
|
||||
// let obj = Object.assign({}, this.getCtime2, this.form);
|
||||
// getAffectionsC(obj).then((res) => {
|
||||
// let data = res.data || [];
|
||||
// this.list = data;
|
||||
// this.load = false;
|
||||
// resolve(data)
|
||||
// }).catch(() => {
|
||||
// reject(false)
|
||||
// });
|
||||
// });
|
||||
// },
|
||||
// },
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.bd-outter {
|
||||
width: 100%;
|
||||
height: 460px;
|
||||
border: 2px solid #0f2a4d;
|
||||
margin-top: 16px;
|
||||
.bd-d1 {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
height: 36px;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
.dd1 {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
.s1 {
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: #3373cc;
|
||||
}
|
||||
.s2 {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.bd-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,91 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-15 15:08:13
|
||||
* @LastEditTime: 2021-11-11 16:29:45
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/channelDistribution/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="cd-outter" v-loading="load">
|
||||
<v-label-div title="渠道分布"> </v-label-div>
|
||||
<div class="cd-inner">
|
||||
<!-- <v-echarts :opt="opt"></v-echarts> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import { getSourcetypeC } from "@/api/BrandComparison/index.js";
|
||||
// import createOpt from "./opt";
|
||||
export default {
|
||||
name: "channelDistribution",
|
||||
data() {
|
||||
return {
|
||||
load: false,
|
||||
form: {
|
||||
token: "",
|
||||
sBrand: "",
|
||||
sSeriesName: "",
|
||||
iContrastType: 2,
|
||||
},
|
||||
opt: {},
|
||||
};
|
||||
},
|
||||
// created() {
|
||||
// this.initData();
|
||||
// },
|
||||
// methods: {
|
||||
// initData() {
|
||||
// this.form.token = this.getToken;
|
||||
// let arr = this.getMComparison;
|
||||
// let brands = [];
|
||||
// let models = [];
|
||||
// arr.forEach((ele) => {
|
||||
// brands.push(ele.brand);
|
||||
// models.push(ele.model);
|
||||
// });
|
||||
// this.form.sBrand = brands.toString();
|
||||
// this.form.sSeriesName = models.toString();
|
||||
// this.getData();
|
||||
// },
|
||||
// getData() {
|
||||
// return new Promise((resolve, reject) => {
|
||||
// let obj = Object.assign({}, this.getCtime2, this.form);
|
||||
// this.load = true;
|
||||
// getSourcetypeC(obj)
|
||||
// .then((res) => {
|
||||
// let data = res.data || [];
|
||||
// let dx = [];
|
||||
// data.forEach((ele) => {
|
||||
// let ab = ele.Data || {};
|
||||
// for (let key in ab) {
|
||||
// if (!dx.includes(key)) {
|
||||
// dx.push(key);
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
// this.opt = createOpt(data, dx);
|
||||
// this.load = false;
|
||||
// resolve(data);
|
||||
// })
|
||||
// .catch(() => {
|
||||
// reject(false);
|
||||
// });
|
||||
// });
|
||||
// },
|
||||
// },
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.cd-outter {
|
||||
width: 936px;
|
||||
height: 460px;
|
||||
border: 2px solid #0f2a4d;
|
||||
.cd-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,79 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-16 13:45:18
|
||||
* @LastEditTime: 2021-11-12 13:44:13
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/comparisonOfForumPostingTrends/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="cop-outter">
|
||||
<v-label-div title="论坛发帖趋势对比" :showLine="false" :eStyle="{'border-style': 'none'}" />
|
||||
<div class="cop-inner">
|
||||
<!-- <v-echarts :opt="opt"></v-echarts> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import { getCountTime0528C } from "@/api/ModelComparison";
|
||||
// import createOpt from "./opt";
|
||||
export default {
|
||||
name: "comparisonOfForumPostingTrends",
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
token: "",
|
||||
sBrand: "",
|
||||
sSeriesName: "",
|
||||
iContrastType: 2,
|
||||
},
|
||||
// opt: createOpt(),
|
||||
};
|
||||
},
|
||||
// created() {
|
||||
// this.initData();
|
||||
// },
|
||||
// methods: {
|
||||
// initData() {
|
||||
// this.form.token = this.getToken;
|
||||
// let arr = this.getMComparison;
|
||||
// let brands = [];
|
||||
// let models = [];
|
||||
// arr.forEach((ele) => {
|
||||
// brands.push(ele.brand);
|
||||
// models.push(ele.model);
|
||||
// });
|
||||
// this.form.sBrand = brands.toString();
|
||||
// this.form.sSeriesName = models.toString();
|
||||
// this.getData();
|
||||
// },
|
||||
// getData() {
|
||||
// let obj = Object.assign({}, this.getCtime2, this.form);
|
||||
// getCountTime0528C(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>
|
||||
.cop-outter {
|
||||
width: 944px;
|
||||
height: 412px;
|
||||
.cop-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,120 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-16 13:57:58
|
||||
* @LastEditTime: 2021-11-12 14:24:50
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/comparisonOfPositiveTopicsInTheForum/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="cpt-outter" v-loading="load">
|
||||
<v-label-div title="论坛负面话题对比" :showLine="false" :eStyle="{'border-style': 'none'}" />
|
||||
<div class="cpt-inner">
|
||||
<div class="cpt-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 { getTopicPosAndTopicNeg0528C } from "@/api/ModelComparison";
|
||||
import { createSideSingleColumn } from "@/utils/gol/sideSingleColumn";
|
||||
export default {
|
||||
name: "comparisonOfPositiveTopicsInTheForum",
|
||||
data() {
|
||||
return {
|
||||
load: false,
|
||||
form: {
|
||||
token: "",
|
||||
sBrand: "",
|
||||
sSeriesName: "",
|
||||
iContrastType: 2,
|
||||
},
|
||||
colors: [
|
||||
"#3373CC",
|
||||
"#63AECC",
|
||||
"#54BF93",
|
||||
"#CC9D12",
|
||||
"#CC7733",
|
||||
"#CC5B41",
|
||||
],
|
||||
list: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.initData();
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
this.form.token = this.getToken;
|
||||
let arr = this.getMComparison || [];
|
||||
let brands = [];
|
||||
let models = [];
|
||||
arr.forEach((ele) => {
|
||||
brands.push(ele.brand);
|
||||
models.push(ele.model);
|
||||
});
|
||||
this.form.sBrand = brands.toString();
|
||||
this.form.sSeriesName = models.toString();
|
||||
this.getData();
|
||||
},
|
||||
getData() {
|
||||
let obj = Object.assign({}, this.getCtime2, this.form);
|
||||
this.load = true;
|
||||
getTopicPosAndTopicNeg0528C(obj).then((res) => {
|
||||
let data = res.data || [];
|
||||
let arr = [];
|
||||
data.forEach((ele) => {
|
||||
let z = ele.value[1].value || [];
|
||||
let dx = [];
|
||||
let ds = [];
|
||||
z.forEach((e) => {
|
||||
dx.push(e.key);
|
||||
ds.push(e.value);
|
||||
});
|
||||
let obj = {
|
||||
name: ele.key,
|
||||
drawOpt: createSideSingleColumn(dx, ds, "#bd9312"),
|
||||
};
|
||||
arr.push(obj);
|
||||
});
|
||||
this.list = arr;
|
||||
this.load = false;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.cpt-outter {
|
||||
width: 100%;
|
||||
height: 412px;
|
||||
.cpt-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
.cpt-item {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.s1 {
|
||||
padding-left: 16px;
|
||||
display: block;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
}
|
||||
.d1 {
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,120 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-16 13:57:58
|
||||
* @LastEditTime: 2021-11-12 14:25:38
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/comparisonOfPositiveTopicsInTheForum/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="cpt-outter" v-loading="load">
|
||||
<v-label-div title="论坛正面话题对比" :showLine="false" :eStyle="{'border-style': 'none'}"/>
|
||||
<div class="cpt-inner">
|
||||
<div class="cpt-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 { getTopicPosAndTopicNeg0528C } from "@/api/ModelComparison";
|
||||
import {createSideSingleColumn} from "@/utils/gol/sideSingleColumn"
|
||||
export default {
|
||||
name: "comparisonOfPositiveTopicsInTheForum",
|
||||
data() {
|
||||
return {
|
||||
load: false,
|
||||
form: {
|
||||
token: "",
|
||||
sBrand: "",
|
||||
sSeriesName: "",
|
||||
iContrastType: 2,
|
||||
},
|
||||
colors: [
|
||||
"#3373CC",
|
||||
"#63AECC",
|
||||
"#54BF93",
|
||||
"#CC9D12",
|
||||
"#CC7733",
|
||||
"#CC5B41",
|
||||
],
|
||||
list: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.initData();
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
this.form.token = this.getToken;
|
||||
let arr = this.getMComparison || [];
|
||||
let brands = [];
|
||||
let models = [];
|
||||
arr.forEach((ele) => {
|
||||
brands.push(ele.brand);
|
||||
models.push(ele.model);
|
||||
});
|
||||
this.form.sBrand = brands.toString();
|
||||
this.form.sSeriesName = models.toString();
|
||||
this.getData();
|
||||
},
|
||||
getData() {
|
||||
let obj = Object.assign({}, this.getCtime2, this.form);
|
||||
this.load = true;
|
||||
getTopicPosAndTopicNeg0528C(obj).then((res) => {
|
||||
let data = res.data || [];
|
||||
let arr = [];
|
||||
data.forEach((ele) => {
|
||||
let z = ele.value[0].value || [];
|
||||
let dx = [];
|
||||
let ds = [];
|
||||
z.forEach((e) => {
|
||||
dx.push(e.key);
|
||||
ds.push(e.value);
|
||||
});
|
||||
let obj = {
|
||||
name: ele.key,
|
||||
drawOpt: createSideSingleColumn(dx, ds, "#3373CC"),
|
||||
};
|
||||
arr.push(obj);
|
||||
});
|
||||
this.list = arr;
|
||||
this.load = false;
|
||||
});
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.cpt-outter {
|
||||
width: 100%;
|
||||
height: 412px;
|
||||
.cpt-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
.cpt-item {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.s1 {
|
||||
padding-left: 16px;
|
||||
display: block;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
color:#fff;
|
||||
font-size: 18px;
|
||||
}
|
||||
.d1 {
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,90 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-16 10:22:21
|
||||
* @LastEditTime: 2021-11-12 10:06:29
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/comparisonOfTheNumberOfWeiboInteractions/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="cotn-outter" v-loading="load">
|
||||
<v-label-div
|
||||
title="微博互动人数对比"
|
||||
:showLine="false"
|
||||
:eStyle="{ 'border-style': 'none' }"
|
||||
></v-label-div>
|
||||
<div class="cotn-inner">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getInteractCount0528C } from "@/api/BrandComparison/BrandWeibo.js";
|
||||
import { createSingleColumnar } from "@/utils/gol/singleColumnar";
|
||||
export default {
|
||||
name: "comparisonOfTheNumberOfWeiboInteractions",
|
||||
data() {
|
||||
return {
|
||||
load: false,
|
||||
form: {
|
||||
token: "",
|
||||
sBrand: "",
|
||||
sSeriesName: "",
|
||||
iContrastType: 2
|
||||
},
|
||||
opt: {}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.initData();
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
this.form.token = this.getToken;
|
||||
let arr = this.getMComparison;
|
||||
let brands = [];
|
||||
let models = [];
|
||||
arr.forEach((ele) => {
|
||||
brands.push(ele.brand);
|
||||
models.push(ele.model);
|
||||
});
|
||||
this.form.sBrand = brands.toString();
|
||||
this.form.sSeriesName = models.toString();
|
||||
this.getData();
|
||||
},
|
||||
getData() {
|
||||
return new Promise((resolve, reject) => {
|
||||
let obj = Object.assign({}, this.getCtime2, this.form);
|
||||
this.load = true;
|
||||
getInteractCount0528C(obj)
|
||||
.then((res) => {
|
||||
let data = res.data || [];
|
||||
let dx = [];
|
||||
let ds = [];
|
||||
data.forEach((ele) => {
|
||||
dx.push(ele.key);
|
||||
ds.push(ele.value);
|
||||
});
|
||||
this.opt = createSingleColumnar(dx, ds, '#54BF93');
|
||||
this.load = false;
|
||||
resolve(data);
|
||||
})
|
||||
.catch(() => {
|
||||
reject(false);
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.cotn-outter {
|
||||
width: 628px;
|
||||
height: 412px;
|
||||
.cotn-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,91 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-16 10:01:52
|
||||
* @LastEditTime: 2021-11-12 10:05:17
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/comparisonOfWeiboInformation/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="cowi-outter" v-loading="load">
|
||||
<v-label-div
|
||||
title="微博信息量对比"
|
||||
:showLine="false"
|
||||
:eStyle="{ 'border-style': 'none' }"
|
||||
></v-label-div>
|
||||
<div class="cowi-inner">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getContrastCount0528C } from "@/api/BrandComparison/BrandWeibo.js";
|
||||
import { createSingleColumnar } from "@/utils/gol/singleColumnar";
|
||||
export default {
|
||||
name: "comparisonOfWeiboInformation",
|
||||
data() {
|
||||
return {
|
||||
load: false,
|
||||
form: {
|
||||
token: "",
|
||||
sBrand: "",
|
||||
sSeriesName: "",
|
||||
iContrastType: 2
|
||||
},
|
||||
opt: {}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.initData();
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
this.form.token = this.getToken;
|
||||
let arr = this.getMComparison;
|
||||
let brands = [];
|
||||
let models = [];
|
||||
arr.forEach((ele) => {
|
||||
brands.push(ele.brand);
|
||||
models.push(ele.model);
|
||||
});
|
||||
this.form.sBrand = brands.toString();
|
||||
this.form.sSeriesName = models.toString();
|
||||
this.getData();
|
||||
},
|
||||
getData() {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.load = true;
|
||||
let obj = Object.assign({}, this.getCtime2, this.form);
|
||||
getContrastCount0528C(obj)
|
||||
.then((res) => {
|
||||
let data = res.data || [];
|
||||
let dx = [];
|
||||
let ds = [];
|
||||
data.forEach(ele => {
|
||||
dx.push(ele.key);
|
||||
ds.push(ele.value)
|
||||
})
|
||||
this.opt = createSingleColumnar(dx,ds);
|
||||
this.load = false;
|
||||
resolve(data);
|
||||
})
|
||||
.catch(() => {
|
||||
reject(false);
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.cowi-outter {
|
||||
width: 628px;
|
||||
height: 412px;
|
||||
.cowi-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,133 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-15 13:27:50
|
||||
* @LastEditTime: 2021-11-11 17:49:37
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/brandTonalDistribution/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="bd-outter" v-loading="load">
|
||||
<v-label-div title="整体调性对比" :showLine="false" :eStyle="{ 'border-style': 'none' }"> </v-label-div>
|
||||
<div class="bd-d1">
|
||||
<div class="dd1" style="margin-left: 16px">
|
||||
<span class="s1"></span><span class="s2">正面</span>
|
||||
</div>
|
||||
<div class="dd1" style="margin-left: 24px">
|
||||
<span class="s1" :style="{ background: '#54BF93' }"></span
|
||||
><span class="s2">中性</span>
|
||||
</div>
|
||||
<div class="dd1" style="margin-left: 24px">
|
||||
<span class="s1" :style="{ background: '#CC9D12' }"></span
|
||||
><span class="s2">负面</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bd-inner">
|
||||
<roundata
|
||||
v-for="(item,index) in list"
|
||||
:key="index"
|
||||
:title="item.key"
|
||||
:color="colors[index]"
|
||||
:style="index === 0 ? 'margin-left: 4rem': 'margin-left: 7.5rem'"
|
||||
:data="item.value"
|
||||
></roundata>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getEventAffectionsC } from "@/api/ModelComparison";
|
||||
import roundata from "./roundata";
|
||||
export default {
|
||||
name: "eventBrandTonalDistribution",
|
||||
components: {
|
||||
roundata,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
load: false,
|
||||
form: {
|
||||
token: "",
|
||||
sBrand: "",
|
||||
sSeriesName: "",
|
||||
iContrastType: 2
|
||||
},
|
||||
colors: ['#3373CC', '#63AECC', '#54BF93', '#CC9D12', '#CC7733', '#CC5B41'],
|
||||
list: [
|
||||
|
||||
]
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.initData();
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
this.form.token = this.getToken;
|
||||
let arr = this.getMComparison;
|
||||
let brands = [];
|
||||
let models = [];
|
||||
arr.forEach(ele => {
|
||||
brands.push(ele.brand);
|
||||
models.push(ele.model);
|
||||
});
|
||||
this.form.sBrand = brands.toString();
|
||||
this.form.sSeriesName = models.toString();
|
||||
this.getData();
|
||||
},
|
||||
//
|
||||
getData() {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.load = true;
|
||||
let obj = Object.assign({}, this.getCtime2, this.form);
|
||||
getEventAffectionsC(obj).then((res) => {
|
||||
let data = res.data || [];
|
||||
this.list = data;
|
||||
this.load = false;
|
||||
resolve(data)
|
||||
}).catch(() => {
|
||||
reject(false)
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.bd-outter {
|
||||
width: 100%;
|
||||
height: 460px;
|
||||
margin-top: 16px;
|
||||
.bd-d1 {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
height: 36px;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
.dd1 {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
.s1 {
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: #3373cc;
|
||||
}
|
||||
.s2 {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.bd-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,119 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-16 10:49:09
|
||||
* @LastEditTime: 2021-11-12 13:59:50
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/weiboTuneComparison/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="wtc-outter">
|
||||
<v-label-div title="论坛调性对比" :showLine="false" :eStyle="{'border-style': 'none'}">
|
||||
</v-label-div>
|
||||
<div class="wtc-d1">
|
||||
<div class="dd1" style="margin-left: 16px"><span class="s1"></span><span class="s2">正面</span></div>
|
||||
<div class="dd1" style="margin-left: 24px;"><span class="s1" :style="{background: '#54BF93'}"></span><span class="s2">中性</span></div>
|
||||
<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 v-for="(item,index) in list" :key="index" :title="item.Name" :color="colors[index]" :style="index === 0 ? 'margin-left: 4rem': 'margin-left: 7.5rem'" :data="item.Data"></roundata> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import { getAffectionsC } from "@/api/ModelComparison";
|
||||
// import roundata from "./roundata";
|
||||
export default {
|
||||
name: "forumTonalComparison",
|
||||
components: {
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
load: false,
|
||||
form: {
|
||||
token: "",
|
||||
sBrand: "",
|
||||
sSeriesName: "",
|
||||
iContrastType: 2,
|
||||
},
|
||||
colors: [
|
||||
"#3373CC",
|
||||
"#63AECC",
|
||||
"#54BF93",
|
||||
"#CC9D12",
|
||||
"#CC7733",
|
||||
"#CC5B41",
|
||||
],
|
||||
list: [],
|
||||
};
|
||||
},
|
||||
// created() {
|
||||
// this.initData();
|
||||
// },
|
||||
// methods: {
|
||||
// initData() {
|
||||
// this.form.token = this.getToken;
|
||||
// let arr = this.getMComparison;
|
||||
// let brands = [];
|
||||
// let models = [];
|
||||
// arr.forEach((ele) => {
|
||||
// brands.push(ele.brand);
|
||||
// models.push(ele.model);
|
||||
// });
|
||||
// this.form.sBrand = brands.toString();
|
||||
// this.form.sSeriesName = models.toString();
|
||||
// this.getData();
|
||||
// },
|
||||
// getData() {
|
||||
// let obj = Object.assign({}, this.getCtime2, this.form);
|
||||
// this.load = true;
|
||||
// getAffectionsC(obj).then((res) => {
|
||||
// let data = res.data || [];
|
||||
// this.list = data;
|
||||
// this.load = false;
|
||||
// });
|
||||
// },
|
||||
// },
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.wtc-outter {
|
||||
width: 100%;
|
||||
height: 460px;
|
||||
margin-top: 16px;
|
||||
.wtc-d1 {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
height: 36px;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
.dd1 {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
.s1 {
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: #3373cc;
|
||||
}
|
||||
.s2 {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.wtc-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,83 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-15 11:40:55
|
||||
* @LastEditTime: 2021-11-11 14:26:23
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/informationTrend/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="it-outter">
|
||||
<v-label-div title="信息量趋势"></v-label-div>
|
||||
<div class="it-inner">
|
||||
<!-- <v-echarts :opt="opt"></v-echarts> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import { getCountTime0528C } from "@/api/BrandComparison";
|
||||
// import createOpt from "./opt";
|
||||
export default {
|
||||
name: "informationTrend",
|
||||
data() {
|
||||
return {
|
||||
load: false,
|
||||
form: {
|
||||
token: "",
|
||||
sBrand: "",
|
||||
sSeriesName: "",
|
||||
iContrastType: 2
|
||||
},
|
||||
opt: {},
|
||||
};
|
||||
},
|
||||
// created() {
|
||||
// this.initData();
|
||||
// },
|
||||
// methods: {
|
||||
// initData() {
|
||||
// this.form.token = this.getToken;
|
||||
// let arr = this.getMComparison;
|
||||
// let brands = [];
|
||||
// let models = [];
|
||||
// arr.forEach((ele) => {
|
||||
// brands.push(ele.brand);
|
||||
// models.push(ele.model);
|
||||
// });
|
||||
// this.form.sBrand = brands.toString();
|
||||
// this.form.sSeriesName = models.toString();
|
||||
// this.getData();
|
||||
// },
|
||||
// getData() {
|
||||
// let obj = Object.assign({}, this.getCtime2, this.form);
|
||||
// this.load = true;
|
||||
// getCountTime0528C(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);
|
||||
// this.load = false;
|
||||
// });
|
||||
// },
|
||||
// },
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.it-outter {
|
||||
width: 618px;
|
||||
height: 460px;
|
||||
border: 2px solid #0f2a4d;
|
||||
.it-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,83 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-16 14:47:23
|
||||
* @LastEditTime: 2021-11-12 14:39:17
|
||||
* @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 { getSourcetypeC } from "@/api/ModelComparison";
|
||||
// import createOpt from "./opt";
|
||||
export default {
|
||||
name: "informationVolumeByChannel",
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
token: "",
|
||||
sBrand: "",
|
||||
sSeriesName: "",
|
||||
iContrastType: 2,
|
||||
},
|
||||
load: false,
|
||||
opt: {},
|
||||
};
|
||||
},
|
||||
// created() {
|
||||
// this.initData();
|
||||
// },
|
||||
// methods: {
|
||||
// initData() {
|
||||
// this.form.token = this.getToken;
|
||||
// let arr = this.getMComparison || [];
|
||||
// let brands = [];
|
||||
// let models = [];
|
||||
// arr.forEach((ele) => {
|
||||
// brands.push(ele.brand);
|
||||
// models.push(ele.model);
|
||||
// });
|
||||
// this.form.sBrand = brands.toString();
|
||||
// this.form.sSeriesName = models.toString();
|
||||
// this.getData();
|
||||
// },
|
||||
// getData() {
|
||||
// let obj = Object.assign({}, this.getCtime2, this.form);
|
||||
// this.load = true;
|
||||
// getSourcetypeC(obj).then((res) => {
|
||||
// let data = res.data || [];
|
||||
// let dx = [];
|
||||
// data.forEach((ele) => {
|
||||
// let ab = ele.Data || {};
|
||||
// for (let key in ab) {
|
||||
// if (!dx.includes(key)) {
|
||||
// dx.push(key);
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
// this.opt = createOpt(data, dx);
|
||||
// this.load = false;
|
||||
// });
|
||||
// },
|
||||
// },
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.ivb-outter {
|
||||
width: 944px;
|
||||
height: 412px;
|
||||
.ivb-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,85 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-15 15:34:26
|
||||
* @LastEditTime: 2021-11-11 16:27:27
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/keyMediaCommunicationComparison/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="kmcc-outter">
|
||||
<v-label-div title="重点媒体传播对比"> </v-label-div>
|
||||
<div class="kmcc-inner">
|
||||
<!-- <v-echarts :opt="opt"></v-echarts> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import createOpt from "./opt";
|
||||
// import { getSourceCount0528C } from "@/api/BrandComparison";
|
||||
export default {
|
||||
name: "kmcc-outter",
|
||||
data() {
|
||||
return {
|
||||
load: false,
|
||||
form: {
|
||||
token: "",
|
||||
sBrand: "",
|
||||
sSeriesName: "",
|
||||
iContrastType: 2,
|
||||
},
|
||||
// opt: {},
|
||||
};
|
||||
},
|
||||
// created() {
|
||||
// this.initData();
|
||||
// },
|
||||
// methods: {
|
||||
// initData() {
|
||||
// this.form.token = this.getToken;
|
||||
// let arr = this.getMComparison;
|
||||
// let brands = [];
|
||||
// let models = [];
|
||||
// arr.forEach((ele) => {
|
||||
// brands.push(ele.brand);
|
||||
// models.push(ele.model);
|
||||
// });
|
||||
// this.form.sBrand = brands.toString();
|
||||
// this.form.sSeriesName = models.toString();
|
||||
// this.getData();
|
||||
// },
|
||||
// getData() {
|
||||
// let obj = Object.assign({}, this.getCtime2, this.form);
|
||||
// this.load = true;
|
||||
// getSourceCount0528C(obj).then((res) => {
|
||||
// let data = res.data || [];
|
||||
// let dx = [];
|
||||
// data.forEach((ele) => {
|
||||
// let ab = ele.value || [];
|
||||
// ab.forEach(e => {
|
||||
// if (!dx.includes(e.key)) {
|
||||
// dx.push(e.key);
|
||||
// }
|
||||
// })
|
||||
// });
|
||||
// this.opt = createOpt(dx, data);
|
||||
// this.load = false;
|
||||
// });
|
||||
// },
|
||||
// },
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.kmcc-outter {
|
||||
width: 936px;
|
||||
height: 460px;
|
||||
border: 2px solid #0f2a4d;
|
||||
margin-left: 16px;
|
||||
.kmcc-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,87 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-15 11:58:33
|
||||
* @LastEditTime: 2021-11-11 14:28:31
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/overallInformation/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="oi-outter">
|
||||
<v-label-div title="整体信息量" ></v-label-div>
|
||||
<div class="oi-inner">
|
||||
<!-- <v-echarts :opt="opt"></v-echarts> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import {getContrastCount0528C} from "@/api/BrandComparison"
|
||||
// import {createSingleColumnar} from "@/utils/gol/singleColumnar"
|
||||
export default {
|
||||
name: "overallInformation",
|
||||
data() {
|
||||
return {
|
||||
load: false,
|
||||
form: {
|
||||
token: "",
|
||||
sBrand: "",
|
||||
sSeriesName: "",
|
||||
iContrastType: 2
|
||||
},
|
||||
opt: {}
|
||||
}
|
||||
},
|
||||
// created() {
|
||||
// this.initData();
|
||||
// },
|
||||
// methods: {
|
||||
// initData() {
|
||||
// this.form.token = this.getToken;
|
||||
// let arr = this.getMComparison;
|
||||
// let brands = [];
|
||||
// let models = [];
|
||||
// arr.forEach(ele => {
|
||||
// brands.push(ele.brand);
|
||||
// models.push(ele.model);
|
||||
// });
|
||||
// this.form.sBrand = brands.toString();
|
||||
// this.form.sSeriesName = models.toString();
|
||||
// this.getData();
|
||||
// },
|
||||
// getData() {
|
||||
// return new Promise((resolve, reject) => {
|
||||
// let obj = Object.assign({}, this.getCtime2, this.form);
|
||||
// this.load = true;
|
||||
// getContrastCount0528C(obj).then((res) => {
|
||||
// let data = res.data || [];
|
||||
// let brandsList = [];
|
||||
// let infoList = [];
|
||||
// data.forEach(e => {
|
||||
// brandsList.push(e.key);
|
||||
// infoList.push(e.value);
|
||||
// })
|
||||
// this.opt = createSingleColumnar(brandsList, infoList);
|
||||
// this.load = false;
|
||||
// resolve(data)
|
||||
// }).catch(() => {
|
||||
// reject(false)
|
||||
// });
|
||||
// });
|
||||
// }
|
||||
// }
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.oi-outter {
|
||||
width: 618px;
|
||||
height: 460px;
|
||||
border: 2px solid #0f2a4d;
|
||||
margin-left: 16px;
|
||||
.oi-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,87 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-15 13:12:08
|
||||
* @LastEditTime: 2021-11-11 14:29:27
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/overallNumberOfInteractions/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="onoi-outter">
|
||||
<v-label-div title="整体互动人数" ></v-label-div>
|
||||
<div class="onoi-inner">
|
||||
<!-- <v-echarts :opt="opt"></v-echarts> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import {getInteractCount0528C} from "@/api/BrandComparison"
|
||||
// import {createSingleColumnar} from "@/utils/gol/singleColumnar"
|
||||
export default {
|
||||
name: "overallInformation",
|
||||
data() {
|
||||
return {
|
||||
load: false,
|
||||
form: {
|
||||
token: "",
|
||||
sBrand: "",
|
||||
sSeriesName: "",
|
||||
iContrastType: 2
|
||||
},
|
||||
opt: {}
|
||||
}
|
||||
},
|
||||
// created() {
|
||||
// this.initData();
|
||||
// },
|
||||
// methods: {
|
||||
// initData() {
|
||||
// this.form.token = this.getToken;
|
||||
// let arr = this.getMComparison;
|
||||
// let brands = [];
|
||||
// let models = [];
|
||||
// arr.forEach(ele => {
|
||||
// brands.push(ele.brand);
|
||||
// models.push(ele.model);
|
||||
// });
|
||||
// this.form.sBrand = brands.toString();
|
||||
// this.form.sSeriesName = models.toString();
|
||||
// this.getData();
|
||||
// },
|
||||
// getData() {
|
||||
// return new Promise((resolve, reject) => {
|
||||
// let obj = Object.assign({}, this.getCtime2, this.form);
|
||||
// this.load = true;
|
||||
// getInteractCount0528C(obj).then((res) => {
|
||||
// let data = res.data || [];
|
||||
// let brandsList = [];
|
||||
// let infoList = [];
|
||||
// data.forEach(e => {
|
||||
// brandsList.push(e.key);
|
||||
// infoList.push(e.value);
|
||||
// })
|
||||
// this.opt = createSingleColumnar(brandsList, infoList, '#54BF93');
|
||||
// this.load = false;
|
||||
// resolve(data)
|
||||
// }).catch(() => {
|
||||
// reject(false)
|
||||
// });
|
||||
// });
|
||||
// }
|
||||
// }
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.onoi-outter {
|
||||
width: 618px;
|
||||
height: 460px;
|
||||
border: 2px solid #0f2a4d;
|
||||
margin-left: 16px;
|
||||
.onoi-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,137 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-15 16:56:32
|
||||
* @LastEditTime: 2021-11-11 16:44:15
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/overallWordCloudComparison/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="owcc-outter" v-loading="load">
|
||||
<v-label-div title="整体词云对比"> </v-label-div>
|
||||
<div class="owcc-inner">
|
||||
<div class="owcc-item" v-for="(item, index) in dataSource" :key="index">
|
||||
<v-label-div
|
||||
:title="item.name"
|
||||
:titleColor="colors[index]"
|
||||
:showLine="false"
|
||||
:eStyle="{ 'border-style': 'none' }"
|
||||
>
|
||||
<v-tab-group
|
||||
:btns="['正面', '负面']"
|
||||
@change="(n) => {handlerTab(n,item)}"
|
||||
></v-tab-group>
|
||||
</v-label-div>
|
||||
<div class="owcc-draw">
|
||||
<v-echarts :opt="item.opt"></v-echarts>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPositiveAndNegative0528C } from "@/api/BrandComparison";
|
||||
import createWordCloud from "@/utils/gol/bubbleWord";
|
||||
export default {
|
||||
name: "overallWordCloudComparison",
|
||||
data() {
|
||||
return {
|
||||
opt: {},
|
||||
load: false,
|
||||
form: {
|
||||
token: "",
|
||||
sBrand: "",
|
||||
sSeriesName: "",
|
||||
iContrastType: 2
|
||||
},
|
||||
colors: [
|
||||
"#3373CC",
|
||||
"#63AECC",
|
||||
"#54BF93",
|
||||
"#CC9D12",
|
||||
"#CC7733",
|
||||
"#CC5B41",
|
||||
],
|
||||
dataSource: []
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.initData();
|
||||
},
|
||||
methods: {
|
||||
initData() {
|
||||
this.form.token = this.getToken;
|
||||
let arr = this.getMComparison;
|
||||
let brands = [];
|
||||
let models = [];
|
||||
arr.forEach((ele) => {
|
||||
brands.push(ele.brand);
|
||||
models.push(ele.model);
|
||||
});
|
||||
this.form.sBrand = brands.toString();
|
||||
this.form.sSeriesName = models.toString();
|
||||
this.getData();
|
||||
},
|
||||
getData() {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.load = true;
|
||||
let obj = Object.assign({}, this.getCtime2, this.form);
|
||||
getPositiveAndNegative0528C(obj)
|
||||
.then((res) => {
|
||||
let data = res.data || [];
|
||||
let arr = [];
|
||||
data.forEach(ele => {
|
||||
let obj = {
|
||||
name: ele.key,
|
||||
p: ele.value[0].value,
|
||||
s: ele.value[1].value,
|
||||
opt: createWordCloud(ele.value[0].value),
|
||||
tapIndex: 0
|
||||
}
|
||||
arr.push(obj);
|
||||
})
|
||||
this.dataSource = arr;
|
||||
this.load = false;
|
||||
resolve(data);
|
||||
})
|
||||
.catch(() => {
|
||||
reject(false);
|
||||
});
|
||||
});
|
||||
},
|
||||
handlerTab(n,item) {
|
||||
item.tapIndex = n;
|
||||
if(n === 0) {
|
||||
item.opt = createWordCloud(item.p)
|
||||
} else {
|
||||
item.opt = createWordCloud(item.s)
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.owcc-outter {
|
||||
width: 100%;
|
||||
height: 460px;
|
||||
border: 2px solid #0f2a4d;
|
||||
margin-top: 16px;
|
||||
.owcc-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
.owcc-item {
|
||||
width: 314px;
|
||||
height: 412px;
|
||||
margin-top: 5px;
|
||||
.owcc-draw {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,140 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-16 13:14:28
|
||||
* @LastEditTime: 2021-11-12 13:24:10
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/summaryAndComparisonOfForumInformation/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="saco-outter">
|
||||
<v-label-div title="论坛信息概括对比" :showLine="false" :eStyle="{'border-style': 'none'}"/>
|
||||
<div class="saco-item" v-for="(item,index) in list" :key="index">
|
||||
<span class="s1">{{item.key}}</span>
|
||||
<div class="d1">
|
||||
<img class="d1-m1" src="../../../assets/images/BrandInsight/ic_lt.png">
|
||||
<div class="d1-d1">
|
||||
<span class="ss1">论坛信息量</span>
|
||||
<span class="ss2">{{item.Count}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d1">
|
||||
<img class="d1-m1" src="../../../assets/images/BrandInsight/ic_hdrs.png">
|
||||
<div class="d1-d1">
|
||||
<span class="ss1">互动人数</span>
|
||||
<span class="ss2">{{item.interactCount}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d1">
|
||||
<img class="d1-m1" src="../../../assets/images/BrandInsight/ic_ztl.png">
|
||||
<div class="d1-d1">
|
||||
<span class="ss1">论坛主贴量</span>
|
||||
<span class="ss2">{{item.zhutieCount}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d1">
|
||||
<img class="d1-m1" src="../../../assets/images/BrandInsight/ic_pll.png">
|
||||
<div class="d1-d1">
|
||||
<span class="ss1">论坛评论量</span>
|
||||
<span class="ss2">{{item.commentsSum}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import {getCount0528C} from "@/api/ModelComparison"
|
||||
export default {
|
||||
name: "summaryAndComparisonOfForumInformation",
|
||||
data() {
|
||||
return {
|
||||
load: false,
|
||||
form: {
|
||||
token: "",
|
||||
sBrand: "",
|
||||
sSeriesName: "",
|
||||
iContrastType: 2,
|
||||
},
|
||||
list: [
|
||||
|
||||
]
|
||||
}
|
||||
},
|
||||
// created() {
|
||||
// this.initData()
|
||||
// },
|
||||
// methods: {
|
||||
// initData() {
|
||||
// this.form.token = this.getToken;
|
||||
// let arr = this.getMComparison || [];
|
||||
// let brands = [];
|
||||
// let models = [];
|
||||
// arr.forEach((ele) => {
|
||||
// brands.push(ele.brand);
|
||||
// models.push(ele.model);
|
||||
// });
|
||||
// this.form.sBrand = brands.toString();
|
||||
// this.form.sSeriesName = models.toString();
|
||||
// this.getData();
|
||||
// },
|
||||
// getData() {
|
||||
// let obj = Object.assign({}, this.getCtime2, this.form);
|
||||
// this.load = true;
|
||||
// getCount0528C(obj).then(res => {
|
||||
// let data = res.data;
|
||||
// this.list = data;
|
||||
// this.load = false;
|
||||
// })
|
||||
// }
|
||||
// }
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.saco-outter {
|
||||
width: 944px;
|
||||
height: 412px;
|
||||
.saco-item {
|
||||
width: 912px;
|
||||
height: 54px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #0f2a4d;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
margin-bottom: 5px;
|
||||
margin-left: 16px;
|
||||
.s1 {
|
||||
width: 137px;
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
margin-left: 16px;
|
||||
}
|
||||
.d1 {
|
||||
width: 183px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
.d1-m1 {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
.d1-d1 {
|
||||
.ss1 {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: #7f868d;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.ss2 {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
font-family: Bebas;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,113 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-16 14:56:13
|
||||
* @LastEditTime: 2021-11-12 14:47:54
|
||||
* @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 {getSourceTopCount0528C} from "@/api/ModelComparison"
|
||||
// import {createSingleColumnar} from "@/utils/gol/singleColumnar"
|
||||
export default {
|
||||
name: "tailTOPMedia",
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
token: "",
|
||||
sBrand: "",
|
||||
sSeriesName: "",
|
||||
iContrastType: 2,
|
||||
},
|
||||
colors: ['#3373CC', '#63AECC', '#54BF93', '#CC9D12', '#CC7733', '#CC5B41'],
|
||||
list: [],
|
||||
|
||||
};
|
||||
},
|
||||
// created() {
|
||||
// this.initData();
|
||||
// },
|
||||
// methods: {
|
||||
// initData() {
|
||||
// this.form.token = this.getToken;
|
||||
// let arr = this.getMComparison || [];
|
||||
// let brands = [];
|
||||
// let models = [];
|
||||
// arr.forEach((ele) => {
|
||||
// brands.push(ele.brand);
|
||||
// models.push(ele.model);
|
||||
// });
|
||||
// this.form.sBrand = brands.toString();
|
||||
// this.form.sSeriesName = models.toString();
|
||||
// this.getData();
|
||||
// },
|
||||
// getData() {
|
||||
// let obj = Object.assign({}, this.getCtime2, this.form);
|
||||
// getSourceTopCount0528C(obj).then(res => {
|
||||
// let data = res.data || [];
|
||||
// let arr = [];
|
||||
// data.forEach((ele,index) => {
|
||||
// let val = ele.value || [];
|
||||
// let dx = [];
|
||||
// let ds = [];
|
||||
// val.forEach(e => {
|
||||
// dx.push(e.key);
|
||||
// ds.push(e.value);
|
||||
// })
|
||||
// let o = {
|
||||
// name: ele.key,
|
||||
// drawOpt: createSingleColumnar(dx,ds, this.colors[index])
|
||||
// }
|
||||
// arr.push(o)
|
||||
// })
|
||||
// this.list = arr;
|
||||
// })
|
||||
// }
|
||||
// }
|
||||
};
|
||||
</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: 16px;
|
||||
color: #fff;
|
||||
}
|
||||
.d1 {
|
||||
width: 100%;
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,129 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-14 11:25:20
|
||||
* @LastEditTime: 2021-11-12 11:06:40
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/WeiboDetails/weiboUserActiveArea/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="wua-outter">
|
||||
<v-label-div title="用户区域分布" :showLine="false" :eStyle="{ 'border-style': 'none' }">
|
||||
<v-tab-group :btns="tabs" @change="handlerTab"></v-tab-group>
|
||||
</v-label-div>
|
||||
<div class="wua-inner">
|
||||
<div class="d1">
|
||||
<!-- <v-echarts :opt="opt1"></v-echarts> -->
|
||||
</div>
|
||||
<div class="d2">
|
||||
<!-- <v-echars-map :opt="opt2"></v-echars-map> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import { getRegionWeiBoC } from "@/api/BrandComparison/BrandWeibo.js";
|
||||
// import createOptD1 from "./opt1";
|
||||
// import createOptD2 from "./opt2";
|
||||
export default {
|
||||
name: "userAreaDistribution",
|
||||
data() {
|
||||
return {
|
||||
load: false,
|
||||
// opt1: createOptD1(),
|
||||
// opt2: createOptD2(),
|
||||
tabs: [],
|
||||
form: {
|
||||
token: "",
|
||||
sBrand: "",
|
||||
sSeriesName: "",
|
||||
iContrastType: 2,
|
||||
},
|
||||
list: []
|
||||
};
|
||||
},
|
||||
// created() {
|
||||
// this.initData();
|
||||
// },
|
||||
// methods: {
|
||||
// initData() {
|
||||
// this.form.token = this.getToken;
|
||||
// let arr = this.getMComparison || [];
|
||||
// let a = [];
|
||||
// arr.forEach((ele) => {
|
||||
// a.push(ele.model);
|
||||
// });
|
||||
// this.tabs = a;
|
||||
// let brands = [];
|
||||
// let models = [];
|
||||
// arr.forEach((ele) => {
|
||||
// brands.push(ele.brand);
|
||||
// models.push(ele.model);
|
||||
// });
|
||||
// this.form.sBrand = brands.toString();
|
||||
// this.form.sSeriesName = models.toString();
|
||||
// this.getData();
|
||||
// },
|
||||
// getData() {
|
||||
// return new Promise((resolve, reject) => {
|
||||
// let obj = Object.assign({}, this.getCtime2, this.form);
|
||||
// this.load = true;
|
||||
// getRegionWeiBoC(obj)
|
||||
// .then((res) => {
|
||||
// let data = res.data || [];
|
||||
// this.list = data;
|
||||
// this.handlerTab(0);
|
||||
// this.load = false;
|
||||
// resolve(data);
|
||||
// })
|
||||
// .catch(() => {
|
||||
// reject(false);
|
||||
// });
|
||||
// });
|
||||
// },
|
||||
// handlerTab(n) {
|
||||
// let model = this.tabs[n];
|
||||
// let row = this.list.find(ele => ele.Name === model);
|
||||
// let obj = row.Data || [];
|
||||
// let dx = [];
|
||||
// let ds = [];
|
||||
// let provArr = [];
|
||||
// for(let key in obj) {
|
||||
// dx.push(key);
|
||||
// ds.push(obj[key]);
|
||||
// let o = {
|
||||
// name: key.replace('省', ''),
|
||||
// value: obj[key]
|
||||
// }
|
||||
// provArr.push(o)
|
||||
// }
|
||||
// this.opt1 = createOptD1(dx, ds);
|
||||
// this.opt2 = createOptD2(provArr);
|
||||
// }
|
||||
|
||||
// },
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.wua-outter {
|
||||
width: 944px;
|
||||
height: 412px;
|
||||
.wua-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
.d1 {
|
||||
width: 479px;
|
||||
height: 100%;
|
||||
}
|
||||
.d2 {
|
||||
width: 465px;
|
||||
height: 100%;
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,84 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-16 10:30:29
|
||||
* @LastEditTime: 2021-11-12 10:27:57
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/weiboBigVComparison/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="wbc-outter">
|
||||
<v-label-div
|
||||
title="微博大V对比"
|
||||
:showLine="false"
|
||||
:eStyle="{ 'border-style': 'none' }"
|
||||
></v-label-div>
|
||||
<div class="wbc-inner">
|
||||
<!-- <v-echarts :opt="opt"></v-echarts> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import { getBoauthen0528C } from "@/api/BrandComparison/BrandWeibo.js";
|
||||
// import createOpt from "./opt";
|
||||
export default {
|
||||
name: "weiboBigVComparison",
|
||||
data() {
|
||||
return {
|
||||
load: false,
|
||||
form: {
|
||||
token: "",
|
||||
sBrand: "",
|
||||
sSeriesName: "",
|
||||
iContrastType: 2
|
||||
},
|
||||
opt: {}
|
||||
};
|
||||
},
|
||||
// created() {
|
||||
// this.initData();
|
||||
// },
|
||||
// methods: {
|
||||
// initData() {
|
||||
// this.form.token = this.getToken;
|
||||
// let arr = this.getMComparison;
|
||||
// let brands = [];
|
||||
// let models = [];
|
||||
// arr.forEach((ele) => {
|
||||
// brands.push(ele.brand);
|
||||
// models.push(ele.model);
|
||||
// });
|
||||
// this.form.sBrand = brands.toString();
|
||||
// this.form.sSeriesName = models.toString();
|
||||
// this.getData();
|
||||
// },
|
||||
// getData() {
|
||||
// return new Promise((resolve, reject) => {
|
||||
// let obj = Object.assign({}, this.getCtime2, this.form);
|
||||
// this.load = true;
|
||||
// getBoauthen0528C(obj)
|
||||
// .then((res) => {
|
||||
// let data = res.data || [];
|
||||
// this.opt = createOpt(data);
|
||||
// this.load = false;
|
||||
// resolve(data);
|
||||
// })
|
||||
// .catch(() => {
|
||||
// reject(false);
|
||||
// });
|
||||
// });
|
||||
// },
|
||||
// },
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.wbc-outter {
|
||||
width: 630px;
|
||||
height: 412px;
|
||||
.wbc-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,139 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-16 10:49:09
|
||||
* @LastEditTime: 2021-11-12 10:31:20
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/weiboTuneComparison/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="wtc-outter">
|
||||
<v-label-div
|
||||
title="微博调性对比"
|
||||
:showLine="false"
|
||||
:eStyle="{ 'border-style': 'none' }"
|
||||
>
|
||||
</v-label-div>
|
||||
<div class="wtc-d1">
|
||||
<div class="dd1" style="margin-left: 16px">
|
||||
<span class="s1"></span><span class="s2">正面</span>
|
||||
</div>
|
||||
<div class="dd1" style="margin-left: 24px">
|
||||
<span class="s1" :style="{ background: '#54BF93' }"></span
|
||||
><span class="s2">中性</span>
|
||||
</div>
|
||||
<div class="dd1" style="margin-left: 24px">
|
||||
<span class="s1" :style="{ background: '#CC9D12' }"></span
|
||||
><span class="s2">负面</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wtc-inner">
|
||||
<!-- <wbRoundata
|
||||
v-for="(item,index) in dataSource"
|
||||
:key="index"
|
||||
:title="item.Name"
|
||||
:color="colors[index]"
|
||||
:style="index === 0 ? 'margin-left: 46px': 'margin-left: 110px'"
|
||||
:data="item.Data"
|
||||
></wbRoundata> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import { getAffectionsC } from "@/api/BrandComparison/BrandWeibo.js";
|
||||
// import wbRoundata from "./wbRoundata";
|
||||
export default {
|
||||
name: "weiboTuneComparison",
|
||||
data() {
|
||||
return {
|
||||
load: false,
|
||||
form: {
|
||||
token: "",
|
||||
sBrand: "",
|
||||
sSeriesName: "",
|
||||
iContrastType: 2
|
||||
},
|
||||
colors: ["#3373CC","#63AECC","#54BF93","#CC9D12","#CC7733","#CC5B41"],
|
||||
dataSource: []
|
||||
};
|
||||
},
|
||||
components: {
|
||||
|
||||
},
|
||||
|
||||
// created() {
|
||||
// this.initData();
|
||||
// },
|
||||
// methods: {
|
||||
// initData() {
|
||||
// this.form.token = this.getToken;
|
||||
// let arr = this.getMComparison;
|
||||
// let brands = [];
|
||||
// let models = [];
|
||||
// arr.forEach((ele) => {
|
||||
// brands.push(ele.brand);
|
||||
// models.push(ele.model);
|
||||
// });
|
||||
// this.form.sBrand = brands.toString();
|
||||
// this.form.sSeriesName = models.toString();
|
||||
// this.getData();
|
||||
// },
|
||||
// getData() {
|
||||
// return new Promise((resolve, reject) => {
|
||||
// let obj = Object.assign({}, this.getCtime2, this.form);
|
||||
// this.load = true;
|
||||
// getAffectionsC(obj)
|
||||
// .then((res) => {
|
||||
// let data = res.data || [];
|
||||
// this.dataSource = data;
|
||||
// this.load = false;
|
||||
// resolve(data);
|
||||
// })
|
||||
// .catch(() => {
|
||||
// reject(false);
|
||||
// });
|
||||
// });
|
||||
// },
|
||||
// },
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.wtc-outter {
|
||||
width: 100%;
|
||||
height: 460px;
|
||||
margin-top: 16px;
|
||||
.wtc-d1 {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
height: 36px;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
.dd1 {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
.s1 {
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: #3373cc;
|
||||
}
|
||||
.s2 {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.wtc-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,181 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-16 11:36:20
|
||||
* @LastEditTime: 2021-11-12 13:24:39
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/weiboUserPortrait/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="wup-outter">
|
||||
<v-label-div title="微博用户画像" :showLine="false" :eStyle="{'border-style': 'none'}">
|
||||
<v-tab-group :btns="tabs" @change="handlerTab"></v-tab-group>
|
||||
</v-label-div>
|
||||
<div class="wup-inner">
|
||||
<div class="d1">
|
||||
<div class="dd1">
|
||||
<!-- <v-echarts :opt="opt1"></v-echarts> -->
|
||||
</div>
|
||||
<div class="dd2">
|
||||
<v-label-ctx v-for="(item,index) in sexArr" :key="index" :label="item.key" :color="item.color" :cont="item.value" :percentage="(item.value / total1 * 100).toFixed(2) +'%'" :eStyle="{ height: '7.7rem' }"></v-label-ctx>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d1">
|
||||
<div class="dd1">
|
||||
<!-- <v-echarts :opt="opt2">
|
||||
<v-echarts :opt="opt2"></v-echarts>
|
||||
</v-echarts> -->
|
||||
</div>
|
||||
<div class="dd2" style="margin-right: 16px">
|
||||
<v-label-ctx v-for="(item,index) in attArr" :key="index" :label="item.key" :color="item.color" :cont="item.value" :percentage="(item.value / total1 * 100).toFixed(2) +'%'" :eStyle="{ height: '7.7rem' }"></v-label-ctx>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import createOpt1 from "./opt1";
|
||||
// import createOpt2 from "./opt2";
|
||||
// import { getSexMergeWeiBoC } from "@/api/ModelComparison";
|
||||
export default {
|
||||
name: "weiboUserPortrait",
|
||||
data() {
|
||||
return {
|
||||
load: false,
|
||||
form: {
|
||||
token: "",
|
||||
sBrand: "",
|
||||
sSeriesName: "",
|
||||
iContrastType: 2,
|
||||
},
|
||||
tabs: [],
|
||||
list: [],
|
||||
total1: 0,
|
||||
total2: 0,
|
||||
sexArr: [],
|
||||
attArr: [],
|
||||
|
||||
};
|
||||
},
|
||||
// created() {
|
||||
// this.initData();
|
||||
// },
|
||||
// methods: {
|
||||
// initData() {
|
||||
// this.form.token = this.getToken;
|
||||
// let arr = this.getMComparison || [];
|
||||
// let a = [];
|
||||
// arr.forEach((ele) => {
|
||||
// a.push(ele.model);
|
||||
// });
|
||||
// this.tabs = a;
|
||||
// let brands = [];
|
||||
// let models = [];
|
||||
// arr.forEach((ele) => {
|
||||
// brands.push(ele.brand);
|
||||
// models.push(ele.model);
|
||||
// });
|
||||
// this.form.sBrand = brands.toString();
|
||||
// this.form.sSeriesName = models.toString();
|
||||
// this.getData();
|
||||
// },
|
||||
// getData() {
|
||||
// return new Promise((resolve, reject) => {
|
||||
// let obj = Object.assign({}, this.getCtime2, this.form);
|
||||
// this.load = true;
|
||||
// getSexMergeWeiBoC(obj)
|
||||
// .then((res) => {
|
||||
// let data = res.data;
|
||||
// this.list = data;
|
||||
// this.handlerTab(0);
|
||||
// this.load = false;
|
||||
// resolve(data);
|
||||
// })
|
||||
// .catch(() => {
|
||||
// reject(false);
|
||||
// });
|
||||
// });
|
||||
// },
|
||||
// handlerTab(n) {
|
||||
// let name = this.tabs[n];
|
||||
// let row = this.list.find((ele) => ele.Name === name);
|
||||
// let Data = row.Data;
|
||||
// let sex = Data.sex || {};
|
||||
// let attestation = Data.attestation || {};
|
||||
// let sexArr = [];
|
||||
// let attArr = [];
|
||||
// let total1 = 0;
|
||||
// let total2 = 0;
|
||||
// for (let key in sex) {
|
||||
// let color = "";
|
||||
// if (key === "男") {
|
||||
// color = "#3373CC";
|
||||
// } else if (key === "未设性别") {
|
||||
// color = "#54BF93";
|
||||
// } else {
|
||||
// color = "#CC9D12";
|
||||
// }
|
||||
// let obj = {
|
||||
// key: key,
|
||||
// value: sex[key],
|
||||
// color: color,
|
||||
// };
|
||||
// total1 += sex[key] * 1;
|
||||
// sexArr.push(obj);
|
||||
// }
|
||||
// for (let key in attestation) {
|
||||
// let color = "";
|
||||
// if (key === "普通认证") {
|
||||
// color = "#3373CC";
|
||||
// } else if (key === "机构认证") {
|
||||
// color = "#CC9D12";
|
||||
// } else {
|
||||
// color = "#54BF93";
|
||||
// }
|
||||
// let obj = {
|
||||
// key: key,
|
||||
// value: attestation[key],
|
||||
// color: color,
|
||||
// };
|
||||
// total2 += attestation[key] * 1;
|
||||
// attArr.push(obj);
|
||||
// }
|
||||
// this.total1 = total1;
|
||||
// this.total2 = total2;
|
||||
// this.sexArr = sexArr;
|
||||
// this.attArr = attArr;
|
||||
// this.opt1 = createOpt1(sexArr);
|
||||
// this.opt2 = createOpt2(attArr);
|
||||
// },
|
||||
// },
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.wup-outter {
|
||||
width: 944px;
|
||||
height: 412px;
|
||||
.wup-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
.d1 {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
overflow: hidden;
|
||||
.dd1 {
|
||||
width: 260px;
|
||||
height: 100%;
|
||||
}
|
||||
.dd2 {
|
||||
width: 240px;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue