张雄 3 years ago
parent 43d1446432
commit 9dc4acfbb7

@ -13,6 +13,7 @@ import vTabGroup from "@/components/v-tab-group";
import vEcharts from "@/components/v-echars";
import vBtn from "@/components/v-btn";
import vLabelCtx from "@/components/v-label-ctx"
import vLabelTable from "@/components/v-label-table"
import vPagination from "@/components/v-pagination"
import vRanking from "@/components/v-ranking";
import vEcharsMap from "@/components/v-echars-map"
@ -29,6 +30,7 @@ export default {
vEcharts,
vBtn,
vLabelCtx,
vLabelTable,
vPagination,
vRanking,
vEcharsMap,

@ -0,0 +1,121 @@
<!--
* @Author: your name
* @Date: 2021-10-09 09:19:06
* @LastEditTime: 2021-10-28 13:08:21
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/components/v-label-ctx/index.vue
-->
<template>
<div class="v-l-c-outter" :style="eStyle">
<div class="d1">
<span class="s1" :style="{background: color}"></span>
<span class="s2">{{label}}</span>
</div>
<div class="d2">
<span class="s1">粉丝数>1千万</span>
<span class="s2">{{cont}}</span>
</div>
<div class="d2">
<span class="s1">粉丝数>5百万</span>
<span class="s2">{{cont}}</span>
</div>
<div class="d2">
<span class="s1">粉丝数>1百万</span>
<span class="s2">{{cont}}</span>
</div>
<div class="d3">
<span class="s1">数量</span>
<span class="s2">{{percentage}}</span>
</div>
</div>
</template>
<script>
export default {
name: "v-label-table",
props: {
label: {
type: String,
default: ""
},
contLabel: {
type: String,
default: "数量"
},
cont: {
type: [String, Number],
default: 0
},
percentage: {
type: String,
default: "0%"
},
color: {
type: String,
default: "#3373CC"
},
eStyle: {
type: Object,
default: () => {
return {}
}
}
}
};
</script>
<style lang="less" scoped>
.v-l-c-outter {
width: 100%;
height: 88px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #0F2A4D;
.d1 {
display: block;
width: 12%;
.s1 {
display: block;
width: 66%;
height: 8px;
background: red;
}
.s2 {
display: block;
font-size: 18px;
color: #fff;
margin-top: 10px;
}
}
.d2 {
width: 12%;
.s1 {
display: block;
font-size: 12px;
color: #7a8289;
}
.s2 {
display: block;
font-family: Bebas;
font-size: 16px;
color: #fff;
}
}
.d3 {
width: 12%;
.s1 {
display: block;
font-size: 16px;
color: #7a8289;
}
.s2 {
display: block;
font-family: Bebas;
font-size: 18px;
color: #fff;
}
}
}
</style>

@ -37,6 +37,9 @@ import ModelEventDetails from "@/views/ModelEventDetails"
import ModelWeiboDetails from "@/views/ModelWeiboDetails"
import ModelForumDetails from "@/views/ModelForumDetails"
import ModelComparison from "@/views/ModelComparison"
import ThemeAnalize from "@/views/ThemeAnalize"
import ThemeData from "@/views/ThemeData"
import ThemeBoard from "@/views/ThemeBoard"
import iSwitchEvent from "@/lycomponents/iSwitchEvent"
const router = [
{
@ -176,7 +179,24 @@ const router = [
desc: "营销对比",
component: mcIndex
},
{
path: '/ThemeAnalize',
name: "ThemeAnalize",
desc: "主题分析",
component: ThemeAnalize
},
{
path: '/ThemeData',
name: "ThemeData",
desc: "主题数据",
component: ThemeData
},
{
path: '/ThemeBoard',
name: "ThemeBoard",
desc: "数据看板",
component: ThemeBoard
},
]
},

@ -287,3 +287,42 @@ li.ant-calendar-time-picker-select-option-selected {
.ant-modal-body {
color: #fff !important;
}
.ant-tabs-card > .ant-tabs-content > .ant-tabs-tabpane {
background: rgb(26, 38, 65) !important;
}
.ant-tabs-card > .ant-tabs-bar {
color: white;
border-color: rgb(26, 38, 65)!important;
}
.ant-tabs-card > .ant-tabs-bar .ant-tabs-tab {
border-color: transparent !important;
background: transparent !important;
}
.ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active {
border-color: rgb(26, 38, 65) !important;
background: rgb(26, 38, 65) !important;
}
.ant-descriptions-row {
border-color: #63AECC !important;
}
.ant-descriptions > .ant-descriptions-view {
border-color: #63AECC !important;
}
.ant-descriptions-row > th {
background: #1B4163 !important;
border-color: #63AECC !important;
width: 400px !important;
color: #D8D8D8;
}
.ant-descriptions-row > td {
background: #1B4163 !important;
border-color: #63AECC !important;
width: 400px !important;
color: #63AECC;
}

@ -39,8 +39,8 @@ export default {
},
modelShow: false,
ecbox:{//
width:1618,
height:1490
width:618,
height:490
},
ecmodel:{//
width:300,

@ -39,8 +39,8 @@ export default {
},
modelShow: false,
ecbox:{//
width:1618,
height:1490
width:618,
height:490
},
ecmodel:{//
width:300,

@ -40,8 +40,8 @@ export default {
},
modelShow: false,
ecbox:{//
width:1618,
height:1490
width:618,
height:490
},
ecmodel:{//
width:300,

@ -12,6 +12,7 @@
<div class="hpo-outter" v-loading="loadTop">
<v-label-div title="热点事件传播导向">
<v-btn @click="goPath"></v-btn>
<v-btn @click="goTheme"></v-btn>
</v-label-div>
<div class="hpo-inner">
<v-echarts @getData="clickEchars" :opt="opt"></v-echarts>
@ -97,6 +98,9 @@ export default {
goPath() {
this.$router.push({path: '/eventComparison'})
},
goTheme() {
this.$router.push({path: '/themeAnalize'})
},
goRefresh() {
this.form.sQudao = "";
this.form.sSeriesName = "";

@ -50,8 +50,8 @@ export default {
},
modelShow: false,
ecbox:{//
width:1618,
height:1490
width:618,
height:490
},
ecmodel:{//
width:300,

@ -39,8 +39,8 @@ export default {
},
modelShow: false,
ecbox:{//
width:1618,
height:1490
width:618,
height:490
},
ecmodel:{//
width:300,

@ -18,7 +18,7 @@ export default function createOpt(dx=[], ds=[], hotIndex = []) {
symbolSize: 16,
symbolOffset: [0, '-75%'],
}
if(ds[ele] < 10) {
if(ds[ele] < 100) {
obj.symbolOffset = [0, '-15%']
}
mark.push(obj)

@ -40,8 +40,8 @@ export default {
},
modelShow: false,
ecbox:{//
width:1618,
height:1490
width:618,
height:490
},
ecmodel:{//
width:300,

@ -18,7 +18,7 @@ export default function createOpt(dx = [], ds = [], hotIndex = []) {
symbolSize: 16,
symbolOffset: [0, '-75%'],
}
if(ds[ele] < 10) {
if(ds[ele] < 100) {
obj.symbolOffset = [0, '-15%']
}
mark.push(obj)

@ -0,0 +1,229 @@
<template>
<div class="d-container">
<div class="d-outer">
<div class="d-inner">
<v-label-div title="主题分析">
<v-btn @click="goBack"></v-btn>
</v-label-div>
<div class="card-container">
<a-tabs type="card">
<template slot="tabBarExtraContent">
<a-button @click="handlerAdd"></a-button>
</template>
<a-tab-pane class="tab-pane" key="1" tab="我的主题">
<div class="card-items" v-for="(item, index) in myThemeArr" :key="index">
<div class="card-item-top">
<a-button v-if="isCom"></a-button>
<a-button v-else disabled>已完成</a-button>
<a-button-group style="float: right">
<a-button @click="handlerEdit(index)"></a-button>
<a-button>删除</a-button>
</a-button-group>
</div>
<div class="card-item-data" @click="toThemeData(index)">
<div class="cid-title">
{{index}}
</div>
<div class="cid-data">
<div class="s1"><div class="s1-title">开始时间</div><div class="s1-text">{{index}}</div></div>
<div class="s1"><div class="s1-title">结束时间</div><div class="s1-text">{{index}}</div></div>
<div class="s1"><div class="s1-title">相关报道</div><div class="s1-text">{{index}}</div></div>
</div>
</div>
</div>
</a-tab-pane>
<a-tab-pane key="2" tab="往期主题"></a-tab-pane>
</a-tabs>
</div>
</div>
</div>
<v-modal :title="modalObj.title" :visible.sync="modalObj.visible">
<div slot="body">
<a-tabs type="card">
<a-tab-pane key="1" tab="便捷模式">
<div class="modal-container">
<div class="modal-form">
<a-form-model :model="form" :label-col="{span : 4}" :wrapper-col="{span : 18}">
<a-tabs type="card"><a-tab-pane key="10" tab="名称设置">
<a-form-model-item label="主题名称"><a-input v-model="form.theme"></a-input></a-form-model-item>
<a-form-model-item label="监测周期"><a-input v-model="form.round"></a-input></a-form-model-item>
</a-tab-pane></a-tabs>
<a-tabs type="card">
<a-tab-pane key="11" tab="必选词“和”的关系">
<a-form-model-item label="必选词"><a-input v-model="form.must"></a-input></a-form-model-item>
<a-form-model-item label="可选词"><a-input v-model="form.maybe"></a-input></a-form-model-item>
<a-form-model-item label="排除词"><a-input v-model="form.except"></a-input></a-form-model-item>
</a-tab-pane>
<a-tab-pane key="12" tab="主题词“或”的关系">
<a-form-model-item label="主体词"><a-input v-model="form.must"></a-input></a-form-model-item>
<a-form-model-item label="关键词组一"><a-input v-model="form.must"></a-input></a-form-model-item>
<a-form-model-item label="关键词组二"><a-input v-model="form.must"></a-input></a-form-model-item>
<a-form-model-item label="排除词"><a-input v-model="form.must"></a-input></a-form-model-item>
</a-tab-pane>
</a-tabs>
<a-tabs type="card"><a-tab-pane key="13" tab="定向监测">
<a-form-model-item label="媒体"><a-input v-model="form.media"></a-input></a-form-model-item>
<a-form-model-item label="作者"><a-input v-model="form.author"></a-input></a-form-model-item>
</a-tab-pane></a-tabs>
</a-form-model>
</div>
<div class="modal-display">
<a-descriptions layout="vertical" bordered>
<a-descriptions-item label="配置组合示例共0组">
1111
</a-descriptions-item>
</a-descriptions>
</div>
</div>
</a-tab-pane>
<a-tab-pane key="2" tab="高级模式">
<div class="modal-container">
<div class="modal-form">
<a-form-model :model="form" :label-col="{span : 4}" :wrapper-col="{span : 18}">
<a-tabs type="card"><a-tab-pane key="21" tab="名称设置">
<a-form-model-item label="主题名称"><a-input v-model="form.theme"></a-input></a-form-model-item>
<a-form-model-item label="监测周期"><a-input v-model="form.round"></a-input></a-form-model-item>
</a-tab-pane></a-tabs>
<a-tabs type="card"><a-tab-pane key="22" tab="分析词设置">
<a-form-model-item label="主题词"><a-textarea></a-textarea></a-form-model-item>
</a-tab-pane></a-tabs>
<a-tabs type="card"><a-tab-pane key="23" tab="定向监测">
<a-form-model-item label="媒体"><a-textarea v-model="form.media"></a-textarea></a-form-model-item>
<a-form-model-item label="作者"><a-textarea v-model="form.author"></a-textarea></a-form-model-item>
</a-tab-pane></a-tabs>
</a-form-model>
</div>
<div class="modal-display">
<a-descriptions layout="vertical" bordered>
<a-descriptions-item label="配置组合示例共0组">
1111
</a-descriptions-item>
</a-descriptions>
</div>
</div>
</a-tab-pane>
</a-tabs>
</div>
<div slot="footer">
<div align="center">
<v-btn @click="handlerOk"></v-btn>
</div>
</div>
</v-modal>
<!-- <newThemeModal :formData="formData" :visible="visible" @onSave="onSave"></newThemeModal> -->
</div>
</template>
<script>
import newThemeModal from "./newThemeModal"
export default {
name: "themeAnalize",
components: {
newThemeModal
},
data() {
return {
isCom: true,
myThemeArr: [
{},{},{},{},{},{},
],
//
visible: false,
form: {},
modalObj: {
title: "新建主题",
visible: false,
},
contentStyle: {
color: 'white',
}
}
},
methods: {
goBack() {
this.$router.go(-1);
},
handlerAdd() {
this.modalObj.visible = true
},
handlerEdit(index) {
},
handlerOk() {
this.modalObj.visible = false
},
toThemeData(index) {
console.log(index);
this.$router.push({path: '/ThemeData'})
}
}
}
</script>
<style lang="less">
.d-outer {
padding: 0px 16px 16px 16px;
}
.d-inner {
width: 100%;
height: 960px;
border: 2px solid #0F2A4D;
background: rgba(6, 21, 41, 0.4);
}
.card-container {
background: rgba(6, 21, 41, 0.4);
overflow: hidden;
padding: 24px;
}
.tab-pane {
display: flex;
flex-wrap:wrap;
justify-content: flex-start;
align-items: center;
}
.card-items {
width: 430px;
height: 240px;
background: linear-gradient(180deg, #0088c9 0%, #001c43 100%);
border-radius: 4px;
border: 2px solid #0091ff;
margin-left: 24px;
margin-top: 24px;
.card-item-top {
width: 100%;
}
.card-item-data {
width: 100%;
padding: 16px;
color: white;
.cid-title {
height: 130px;
}
.cid-data {
display: flex;
justify-content: space-between;
.s1 {
width: 30%;
display: block;
font-size: 12px;
.s1-title {
color: #7b93a5;
}
}
}
}
}
.modal-container {
display: flex;
justify-content: flex-start;
color: white;
width: 1200px;
.modal-form {
width: 60%;
}
.model-display {
background: rgb(21, 49, 81);
}
}
</style>

@ -0,0 +1,49 @@
<template>
<a-modal :visible="visible" :footer="null">
<div class="modal-container">
<v-label-div title="新建主题"></v-label-div>
<a-tabs></a-tabs>
<div class="footer">
<v-btn @click="handlerSave"></v-btn>
</div>
</div>
</a-modal>
</template>
<script>
export default {
name: "newThemeModal",
props: {
visible: {
type: Boolean,
default: false
},
formData: {
type: Object,
default: () => {}
}
},
data() {
return {
}
},
methods: {
handlerSave() {
let form = {
data: 'test'
}
this.$emit('onSave',form)
}
}
}
</script>
<style lang="less">
.model-container {
width: 1200px;
}
.footer {
align-content: center;
}
</style>

@ -0,0 +1,78 @@
<template>
<div class="bv-container">
<v-label-div title="大V分析" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div>
<div class="bv-inner">
<div class="bv-d1">
</div>
<div class="bv-d2">
<vue-scroll>
<v-label-table v-for="(item,index) in labelData"
:key="index" :label="item.key"
:cont="item.value"
:percentage="(item.value/total*100).toFixed(2) +'%'"
:color="colors[index]" contLabel="数量"
:eStyle="{ height: '5rem' }">
</v-label-table>
</vue-scroll>
</div>
</div>
</div>
</template>
<script>
export default {
name: "BigvAnalize",
data() {
return {
opt: {},
labelData: [
{key: '微博', value: 1250},
{key: '微信', value: 2400}
],
total: 14000,
colors: [
"#54BF93",
"#3373CC",
"#CC9D12",
"#f15c80",
"#e4d354",
"#8085e8",
"#8d4653",
"#91e8e1",
"#f7a35c",
"#90ed7d",
"#54BF93",
"#3373CC",
"#CC9D12",
"#f15c80",
"#e4d354",
"#8085e8",
"#8d4653",
"#91e8e1",
"#f7a35c",
"#90ed7d",
],
}
}
}
</script>
<style lang="less">
.bv-container {
width: 100%;
.bv-inner {
display: flex;
justify-content: flex-start;
.bv-d1 {
width: 430px;
height: calc(100% - 48px);
}
.bv-d2 {
width: 430px;
height: auto;
margin-left: 16px;
}
}
}
</style>

@ -0,0 +1,17 @@
<template>
<div class="ba-container">
<v-label-div title="博主区域分布" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div>
</div>
</template>
<script>
export default {
name: "BloggerArea"
}
</script>
<style lang="less">
.ba-container {
width: 100%;
}
</style>

@ -0,0 +1,17 @@
<template>
<div class="ctu-container">
<v-label-div title="核心传播网民" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div>
</div>
</template>
<script>
export default {
name: "CoreTransformUser"
}
</script>
<style lang="less">
.ctu-container {
width: 100%;
}
</style>

@ -0,0 +1,21 @@
<template>
<div class="container1">
<v-label-div title="事件传播历程"></v-label-div>
</div>
</template>
<script>
export default {
name: "EventTransform"
}
</script>
<style lang="less">
.container1 {
width: 100%;
height: 460px;
border: 2px solid #0f2a4d;
margin-top: 16px;
overflow: hidden;
}
</style>

@ -0,0 +1,21 @@
<template>
<div class="pa-outter">
<v-label-div title="人群画像认证分析"></v-label-div>
</div>
</template>
<script>
export default {
name: "PeopleAuthen"
}
</script>
<style lang="less">
.pa-outter {
width: 936px;
height: 460px;
border: 2px solid #0f2a4d;
margin-left: 16px;
overflow: hidden;
}
</style>

@ -0,0 +1,19 @@
<template>
<div class="pg-outter">
<v-label-div title="人群画像性别分析"></v-label-div>
</div>
</template>
<script>
export default {
name: "PeopleGender"
}
</script>
<style lang="less">
.pg-outter {
width: 936px;
height: 460px;
border: 2px solid #0f2a4d;
}
</style>

@ -0,0 +1,82 @@
<template>
<div class="sd-outter">
<v-label-div title="渠道分布占比"></v-label-div>
<div class="sd-inner">
<div class="sd-d1">
<v-echarts :opt="opt"></v-echarts>
</div>
<div class="sd-d2">
<vue-scroll>
<v-label-ctx v-for="(item,index) in labelData"
:key="index" :label="item.key"
:cont="item.value"
:percentage="(item.value/total*100).toFixed(2) +'%'"
:color="colors[index]" contLabel="数量"
:eStyle="{ height: '5rem' }">
</v-label-ctx>
</vue-scroll>
</div>
</div>
</div>
</template>
<script>
export default {
name: "SourceDivide",
data() {
return {
opt: {},
labelData: [
{key: '微博', value: 1250},
{key: '微信', value: 2400}
],
total: 14000,
colors: [
"#54BF93",
"#3373CC",
"#CC9D12",
"#f15c80",
"#e4d354",
"#8085e8",
"#8d4653",
"#91e8e1",
"#f7a35c",
"#90ed7d",
"#54BF93",
"#3373CC",
"#CC9D12",
"#f15c80",
"#e4d354",
"#8085e8",
"#8d4653",
"#91e8e1",
"#f7a35c",
"#90ed7d",
],
}
}
}
</script>
<style lang="less">
.sd-outter {
width: 936px;
height: 460px;
border: 2px solid #0f2a4d;
.sd-inner {
display: flex;
justify-content: flex-start;
width: 100%;
height: 100%;
.sd-d1 {
width: 430px;
height: calc(100% - 48px);
}
.sd-d2 {
width: 430px;
height: auto;
margin-left: 16px;
}
}
}
</style>

@ -0,0 +1,80 @@
/*
* @Author: your name
* @Date: 2021-10-12 14:33:51
* @LastEditTime: 2021-10-29 19:20:12
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/BrandInsight/weiboKol/opt.js
*/
import * as echarts from "echarts";
function createData(ds=[], colors=[]) {
let arr = [];
for(let i = 0; i < ds.length; i++) {
let ele = ds[i];
if(ele.value*1 > 0) {
let obj = { value: ele.value*1, name: ele.key, itemStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
//给颜色设置渐变色 前面4个参数给第一个设置1第四个设置0 ,就是水平渐变
//给第一个设置0第四个设置1就是垂直渐变
offset: 0,
color: 'black'
}, {
offset: 1,
color: colors[i]
}])
}};
arr.push(obj)
}
}
return arr;
}
export default function createOpt(ds = [], colors= []) {
const data = createData(ds, colors)
return {
series: [
{
name: 'Access From0',
type: 'pie',
radius: ['65%', '80%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center',
lineHeight: 30
},
emphasis: {
label: {
show: true,
fontSize: '20',
color: "#ffff",
fontWeight: 'bold',
formatter: function (p) {
return `${p.data.name}\n${p.percent}%\n${p.data.value}`
}
}
},
labelLine: {
show: false
},
data: data,
},
{
name: 'Access From1',
type: 'pie',
radius: ['86%', '94%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
labelLine: {
show: false
},
center: ['50%', '50%'],//边框位置
data: data,
}
]
}
}

@ -0,0 +1,19 @@
<template>
<div class="ts-outter">
<v-label-div title="主题调性分布"></v-label-div>
</div>
</template>
<script>
export default {
name: "ThemeSource"
}
</script>
<style lang="less">
.ts-outter {
width: 936px;
height: 460px;
border: 2px solid #0f2a4d;
}
</style>

@ -0,0 +1,33 @@
<template>
<div class="ts-container1">
<v-label-div title="渠道分布"></v-label-div>
<div class="ts-inner">
<v-echarts :opt="opt"></v-echarts>
</div>
</div>
</template>
<script>
export default {
name: "TotalSource",
data() {
return {
opt: {}
}
}
}
</script>
<style lang="less">
.ts-container1 {
width: 100%;
height: 460px;
border: 2px solid #0f2a4d;
margin-top: 16px;
overflow: hidden;
.ts-inner {
width: 100%;
height: calc(100% - 48px);
}
}
</style>

@ -0,0 +1,36 @@
<template>
<div class="tv-container1">
<v-label-div title="总声量趋势"></v-label-div>
<div class="tv-inner">
<v-echarts :opt="opt"></v-echarts>
</div>
</div>
</template>
<script>
export default {
name: "TotalVolume",
data() {
return {
opt: {}
}
},
methods: {
}
}
</script>
<style lang="less">
.tv-container1 {
width: 100%;
height: 460px;
border: 2px solid #0f2a4d;
margin-top: 16px;
overflow: hidden;
.tv-inner {
width: 100%;
height: calc(100% - 48px);
}
}
</style>

@ -0,0 +1,149 @@
<template>
<div class="container1">
<v-label-div title="传播分析">
</v-label-div>
<div class="inner">
<div class="dd1">
<v-label-div title="核心传播网民" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div>
<div class="d1-inner">
<div class="pv-item" v-for="(item,index) in list" :key="index">
<div class="dm">
<img class="mm1" :src="item._source.profileimgurl" width="100%" height="100%">
</div>
<div class="d-f">
<div class="d1">{{item._source.user_author}}</div>
<div class="d2">粉丝数<span class="d2-s1">{{bigNumberTransform(item._source.weibofans)}}</span></div>
</div>
</div>
</div>
</div>
<div class="dd2">
<v-label-div title="核心传播媒体" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div>
<div class="d-rank">
<div class="rank1">
<v-ranking-kmd v-for="(item,index) in d1" :key="index" :lineShow="index === 0 ? false : true" :num="index + 1" :label="item.label|doStr(8)" :val="item.val"></v-ranking-kmd>
</div>
<div class="rank1" style="margin-left: 14px">
<v-ranking-kmd v-for="(item,index) in d2" :key="index" :lineShow="index === 0 ? false : true" :num="index + 1" :label="item.label|doStr(8)" :val="item.val"></v-ranking-kmd>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import vRankingKmd from "./v-ranking-kmd"
import {bigNumberTransform} from "@/utils/gol/dataTool"
export default {
name: "TransformAnalize",
components: {
vRankingKmd
},
data() {
return {
bigNumberTransform: bigNumberTransform,
d1: [
{label: '媒体1', val: 1200},
{label: '媒体2', val: 1600},
{label: '媒体3', val: 1800},
],
d2: [
{label: '媒体6', val: 3190}
],
list: [
{ _source:
{profileimgurl: '', user_author: '1111', weibofans: '1223'}
},
{ _source:
{profileimgurl: '', user_author: '2222', weibofans: '321214'}
},
]
}
}
}
</script>
<style lang="less">
.container1 {
width: 100%;
height: 460px;
border: 2px solid #0f2a4d;
margin-top: 16px;
overflow: hidden;
.inner {
width: 100%;
height: calc(100% - 48px);
display: flex;
justify-content: flex-start;
.dd1 {
width: 944px;
height: 100%;
.d1-inner {
width: 100%;
height: calc(100% - 48px);
margin-left: 16px;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
.pv-item {
width: 285px;
height: 64px;
display: flex;
justify-content: flex-start;
align-items: center;
position: relative;
margin-right: 24px;
margin-top: 12px;
.dm {
position: absolute;
width: 68px;
height: 68px;
border-radius: 68px;
border: 1px solid #ccc;
left: 0px;
top: 0px;
background-color: #fff;
z-index: 10;
.mm1 {
width: 100%;
height: 100%;
border-radius: 74px;
}
}
.d-f {
position: absolute;
width: 249px;
height: 64px;
left: 36px;
padding-left: 65px;
background-image: url("../../../assets/images/BrandInsight/img_yhtx.png");
.d1 {
font-size: 14px;
color: #fff;
font-weight: 500;
margin-top: 10px;
height: 20px;
}
.d2 {
color: #70869a;
font-size: 12px;
.d2-s1 {
font-size: 12px;
font-family: Bebas;
color: #f49847;
}
}
}
}
}
}
}
}
.d-rank {
width: 100%;
height: calc(100% - 48px);
display: flex;
justify-content: flex-start;
}
</style>

@ -0,0 +1,230 @@
<!--
* @Author: your name
* @Date: 2021-10-08 16:44:08
* @LastEditTime: 2021-11-18 11:57:14
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/components/v-ranking/index.vue
-->
<template>
<div class="v-r-container">
<div class="v-r-line" v-if="lineShow"></div>
<div class="v-r-inner">
<div :class="ls">
<span class="s1">{{ num|numStr }}</span>
</div>
<div :class="rs">
<span class="v-r-label">{{label}}</span>
<div class="v-r-res">
<span class="s1">传播量</span>
<span class="s2">{{val}}</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "v-ranking-kmd",
props: {
num: {
type: [String, Number],
default: 1,
},
val: {
type: [String, Number],
default: 0
},
label: {
type: String,
default: ""
},
lineShow: {
type: Boolean,
default: true
},
},
watch: {
num: {
handler(val) {
if(val == 1) {
this.ls = "v-r-left-1"
this.rs = "v-r-right-1"
} else if(val == 2) {
this.ls = "v-r-left-2"
this.rs = "v-r-right-2"
} else if(val == 3) {
this.ls = "v-r-left-3"
this.rs = "v-r-right-3"
} else {
this.ls = "v-r-left"
this.rs = "v-r-right"
}
},
immediate: true
}
},
data() {
return {
ls: "v-r-left",
rs: "v-r-right"
}
},
filters: {
numStr(val) {
let str = ""
if(0<val && val<10) {
str = '0' + val
} else {
str = val + ''
}
return str
}
}
};
</script>
<style lang="less" scoped>
.v-r-container {
width: 446px;
height: auto;
.v-r-line {
width: 100%;
height: 1px;
background:#0a1d3b;
margin-top: 13px;
margin-bottom: 13px;
}
.v-r-inner {
position: relative;
width: 100%;
height: 48px;
margin-top: 6px;
color: #fff;
background: #0a1d3b;
border-radius: 2px;
}
.v-r-label {
display: block;
font-size: 14px;
color: #FFFFFF;
margin-left: 40px;
font-weight: bold;
}
.v-r-res {
margin-right: 16px;
span {
display: block;
text-align: right;
font-size: 12px;
}
.s1 {
color: #9ba4af;
}
.s2 {
color: #fff;
font-family: Bebas;
}
}
.v-r-left {
width: 48px;
height: 48px;
text-align: center;
line-height: 48px;
.s1 {
color: #9099a6;
font-size: 16px;
line-height: 48px;
font-family: Bebas;
}
}
.v-r-right {
position: absolute;
width: 420px;
height: 48px;
border-top: 2px solid transparent;
top: 0px;
left: 24px;
display: flex;
justify-content: space-between;
align-items: center;
}
.v-r-left-1 {
width: 48px;
height: 48px;
text-align: center;
border: 2px solid #cc9d12;
border-radius: 48px;
.s1 {
color: #ffffff;
font-size: 16px;
line-height: 42px;
text-shadow: 0px 0px 8px #cc9d12;
font-family: Bebas;
}
}
.v-r-right-1 {
position: absolute;
width: 420px;
height: 48px;
border-top: 2px solid #CC9D12;
top: 0px;
left: 24px;
display: flex;
justify-content: space-between;
align-items: center;
}
.v-r-left-2 {
width: 48px;
height: 48px;
text-align: center;
border: 2px solid #3373CC;
border-radius: 48px;
.s1 {
color: #ffffff;
font-size: 16px;
line-height: 42px;
text-shadow: 0px 0px 8px #3373CC;
font-family: Bebas;
}
}
.v-r-right-2 {
position: absolute;
width: 420px;
height: 48px;
border-top: 2px solid #3373CC;
top: 0px;
left: 24px;
display: flex;
justify-content: space-between;
align-items: center;
}
.v-r-left-3 {
width: 48px;
height: 48px;
text-align: center;
border: 2px solid #54BF93;
border-radius: 48px;
.s1 {
color: #ffffff;
font-size: 16px;
line-height: 42px;
text-shadow: 0px 0px 8px #54BF93;
font-family: Bebas;
}
}
.v-r-right-3 {
position: absolute;
width: 420px;
height: 48px;
border-top: 2px solid #54BF93;
top: 0px;
left: 24px;
display: flex;
justify-content: space-between;
align-items: center;
}
}
</style>

@ -0,0 +1,17 @@
<template>
<div class="tf-container">
<v-label-div title="传播途径" :showLine="false" :eStyle="{'border-style': 'none'}"></v-label-div>
</div>
</template>
<script>
export default {
name: "TransformMethod"
}
</script>
<style lang="less">
.tf-container {
width: 100%;
}
</style>

@ -0,0 +1,21 @@
<template>
<div class="ua-outter">
<v-label-div title="用户区域分布"></v-label-div>
</div>
</template>
<script>
export default {
name: "UserArea"
}
</script>
<style lang="less">
.ua-outter {
width: 936px;
height: 460px;
border: 2px solid #0f2a4d;
margin-left: 16px;
overflow: hidden;
}
</style>

@ -0,0 +1,21 @@
<template>
<div class="ut-outter">
<v-label-div title="用户热议话题"></v-label-div>
</div>
</template>
<script>
export default {
name: "UserTopic"
}
</script>
<style lang="less">
.ut-outter {
width: 936px;
height: 460px;
border: 2px solid #0f2a4d;
margin-left: 16px;
overflow: hidden;
}
</style>

@ -0,0 +1,48 @@
<template>
<div class="va-outter">
<v-label-div title="声量区域分布"></v-label-div>
<div class="va-inner">
<div class="va-d1">
<v-echarts :opt="opt1"></v-echarts>
</div>
<div class="va-d2">
<v-echars-map :opt="opt2"></v-echars-map>
</div>
</div>
</div>
</template>
<script>
export default {
name: "VolumeArea",
data() {
return {
opt1: {},
opt2: {}
}
}
}
</script>
<style lang="less">
.va-outter {
width: 936px;
height: 460px;
border: 2px solid #0f2a4d;
.va-inner {
display: flex;
justify-content: flex-start;
width: 100%;
height: calc(100% - 48px);
.va-d1 {
width: 479px;
height: 100%;
}
.va-d2 {
width: 420px;
height: 100%;
margin-left: 16px;
}
}
}
</style>

@ -0,0 +1,83 @@
/*
* @Author: your name
* @Date: 2021-10-09 12:38:34
* @LastEditTime: 2021-10-14 11:48:19
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/Index/tailInsight/opt.js
*/
import * as echarts from "echarts";
import { bigNumberTransform } from "@/utils/gol/dataTool"
export default function createOptD1(dx=[],ds=[]) {
return {
grid: {
left: 16,
right: '5%',
bottom: 10,
top: "1%",
containLabel: true
},
tooltip: {
trigger: "axis",
backgroundColor: "#08182F",
color: "#fff",
borderColor: "#3373CC",
textStyle: {
color: "#fff", //设置文字颜色
},
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
},
xAxis: {
type: 'value',
axisLine: {
show: false,
lineStyle: {
color: "#fff",
},
},
axisLabel: {
formatter: (value) => {
let str = bigNumberTransform(value);
return str;
}
},
splitLine: {
lineStyle: {
type: "dashed", // y轴分割线类型
color: "#012b4b",
},
},
},
yAxis: {
type: 'category',
data: dx,
axisTick: {
show: false,
},
axisLine: {
show: false,
lineStyle: {
color: "#fff",
},
},
inverse: true
},
series: [
{
name: '2011',
type: 'bar',
barWidth: 20,
data: ds,
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: '#010B19'
}, {
offset: 1,
color: '#2f68b4'
}]),
}
]
}
}

@ -0,0 +1,94 @@
/*
* @Author: your name
* @Date: 2021-10-14 11:53:16
* @LastEditTime: 2021-11-04 17:17:02
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/WeiboDetails/weiboUserActiveArea/opt2.js
*/
export default function createOptD2(dm) {
return {
tooltip: {
trigger: "item",
backgroundColor: "#08182F",
color: "#fff",
borderColor: "#3373CC",
textStyle: {
color: "#fff", //设置文字颜色
},
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;"
},
// geo: {
// show: true,
// map: 'china',
// roam: false,//地图设置不可拖拽,固定的
// itemStyle: {
// normal: {
// borderWidth: 0,
// shadowColor: 'rgba(0,54,255, 1)',
// shadowBlur: 100
// }
// }
// },
visualMap: {
type: 'continuous',
show: false,
min: 0,
max: 2000,
text: ['高', '低'],
orient: 'horizontal',
itemWidth: 15,
itemHeight: 200,
right: 0,
bottom: 30,
inRange: {
color: ['#0393d2', '#75ddff']
},
textStyle: {
color: 'white'
}
},
series: [
{
name: "微博区域",
type: "map",
mapType: "china",
roam: false,
zoom: 1,//默认地图在容器中显示zoom:1,可根据需求放大缩小地图
left: 16,
top: 20,
right: 10,
bottom: 10,
selectedMode:'multiple',
colorBy: 'data',
itemStyle: {
areaColor: '#001f5b',//地图区域背景颜色
borderColor: '#005cf9',//地图边界颜色
shadowColor: '#005cf9',
emphasis: {
areaColor: '#3066ba',//鼠标滑过区域颜色
label: {
color: '#fff'
}
}
},
label: {
normal: {
show: false
},
},
// select: {
// label: {
// show: false
// },
// itemStyle: {
// areaColor: '#3edffe'
// }
// },
data: dm
}
]
}
}

@ -0,0 +1,71 @@
<template>
<div class="wa-container1">
<v-label-div title="微博分析">
</v-label-div>
<div class="wa-outter">
<div class="wa-inner">
<div class="wa-dd1">
<bigvAnalize></bigvAnalize>
</div>
<div class="wa-dd1">
<coreTransformUser></coreTransformUser>
</div>
</div>
<div class="wa-inner">
<div class="wa-dd1">
<transformMethod></transformMethod>
</div>
<div class="wa-dd1">
<bloggerArea></bloggerArea>
</div>
</div>
</div>
</div>
</template>
<script>
import bigvAnalize from "@/views/ThemeBoard/BigvAnalize" //V
import coreTransformUser from "@/views/ThemeBoard/CoreTransformUser" //
import transformMethod from "@/views/ThemeBoard/TransformMethod" //
import bloggerArea from "@/views/ThemeBoard/BloggerArea" //
export default {
name: "WeiboAnalize",
components: {
bigvAnalize,
coreTransformUser,
transformMethod,
bloggerArea
}
}
</script>
<style lang="less">
.wa-container1 {
width: 100%;
height: 920px;
border: 2px solid #0f2a4d;
margin-top: 16px;
overflow: hidden;
.wa-inner {
width: 100%;
height: 460px;
display: flex;
justify-content: flex-start;
.wa-dd1 {
width: 944px;
height: 100%;
}
}
.wa-inner2 {
width: 100%;
height: 460px;
display: flex;
justify-content: flex-start;
.dd2 {
width: 944px;
height: 100%;
}
}
}
</style>

@ -0,0 +1,39 @@
<template>
<div class="wc-outter">
<v-label-div title="词云">
<div>
<v-tab-group
:btns="['正面', '负面', '热门']"
@change="handlerTab"
></v-tab-group>
</div>
</v-label-div>
<div class="wc-inner">
</div>
</div>
</template>
<script>
export default {
name: "WordCloud",
data() {
return {
}
},
methods: {
handlerTab() {},
}
}
</script>
<style lang="less">
.wc-outter {
width: 936px;
height: 460px;
border: 2px solid #0f2a4d;
margin-left: 16px;
overflow: hidden;
}
</style>

@ -0,0 +1,151 @@
<template>
<div class="d-container">
<div class="d-outter">
<div class="d-outter-d1">
<v-label-div title="主题概述">
<v-btn @click="goBack"></v-btn>
</v-label-div>
<div class="s1">
{{themeObj.title}}
</div>
<div class="s2">
{{themeObj.content}}
</div>
</div>
<totalVolume></totalVolume>
<eventTransform></eventTransform>
<transformAnalize></transformAnalize>
<totalSource></totalSource>
<div class="d5">
<sourceDivide></sourceDivide>
<userTopic></userTopic>
</div>
<div class="d6">
<themeSource></themeSource>
<wordCloud></wordCloud>
</div>
<div class="d7">
<volumeArea></volumeArea>
<userArea></userArea>
</div>
<div class="d8">
<peopleGender></peopleGender>
<peopleAuthen></peopleAuthen>
</div>
<div class="wb-analize">
<weiboAnalize></weiboAnalize>
</div>
</div>
</div>
</template>
<script>
import totalVolume from "./TotalVolume" //
import eventTransform from "./EventTransform" //
import transformAnalize from "./TransformAnalize" //
import totalSource from "./TotalSource" //
import sourceDivide from "./SourceDivide" //
import userTopic from "./UserTopic" //
import themeSource from "./ThemeSource" //
import wordCloud from "./WordCloud" //
import volumeArea from "./VolumeArea" //
import userArea from "./UserArea" //
import peopleGender from "./PeopleGender" //
import peopleAuthen from "./PeopleAuthen" //
import weiboAnalize from "./WeiboAnalize" //
export default {
name: "ThemeBoard",
components: {
totalVolume,
eventTransform,
transformAnalize,
sourceDivide,
userTopic,
totalSource,
themeSource,
wordCloud,
volumeArea,
userArea,
peopleGender,
peopleAuthen,
weiboAnalize
},
data() {
return {
themeObj: {
title: '特斯拉续航能力实测',
content: '特斯拉续航能力实测'
}
}
},
methods: {
goBack() {
this.$router.go(-1);
}
}
}
</script>
<style lang="less">
.d-outter {
padding: 0px 16px 16px 16px;
}
.d-outter-d1 {
width: 100%;
height: 195px;
border: 2px solid #0f2a4d;
overflow: hidden;
.s1 {
color: rgb(255, 255, 255);
font-size: 20px;
padding: 16px;
}
.s2 {
color: rgba(255, 255, 255, 0.6);
font-size: 14px;
padding: 0px 16px 16px 16px;
}
}
.d5 {
width: 100%;
height: 460px;
margin-top: 16px;
display: flex;
justify-content: space-between;
}
.d6 {
width: 100%;
height: auto;
display: flex;
justify-content: flex-start;
margin-top: 16px;
}
.d7 {
width: 100%;
height: auto;
display: flex;
justify-content: flex-start;
margin-top: 16px;
}
.d8 {
width: 100%;
height: auto;
display: flex;
justify-content: flex-start;
margin-top: 16px;
}
.wb-analize {
width: 100%;
height: auto;
display: flex;
border: 2px solid #0f2a4d;
justify-content: flex-start;
margin-top: 16px;
.wb-inner {
width: 100%;
height: calc(100% - 48px);
display: flex;
justify-content: flex-start;
}
}
</style>

@ -0,0 +1,138 @@
<template>
<div class="d-container">
<div class="d-outter">
<div class="d-inner">
<v-label-div title="主题数据">
<v-btn @click="handlerBack"></v-btn>
</v-label-div>
<div class="d-inner-d1">
<span class="s1">时间</span>
<a-range-picker show-time v-model="selTime" style="margin-left: 0.8rem" :disabled-date="disabledDate" @calendarChange="calendarPriceRangeChange" :size="$vuiSize" valueFormat="YYYY-MM-DD HH:mm:ss" @change="handlerChangeTime">
<a-icon slot="suffixIcon" type="calendar" />
</a-range-picker>
</div>
<div class="d-inner-d1">
<span class="s1">渠道</span>
<a-checkbox :disabled="noClick" :indeterminate="qdIndeterminate" :checked="qdCheckAll" @change="onCheckAllChangeQd">
全部
</a-checkbox>
<a-checkbox-group v-model="quDao" :disabled="noClick" :options="plainOptions" @change="(val) => onChange(val, 'quDao')" />
</div>
<div class="d-inner-d1">
<span class="s1">调性</span>
<a-checkbox :disabled="noClick" :indeterminate="dxIndeterminate" :checked="dxCheckAll" @change="onCheckAllChangeDx">
全部
</a-checkbox>
<a-checkbox-group v-model="diaoXing" :disabled="noClick" :options="plainOptions2" @change="(val) => onChange(val, 'diaoXing')" />
</div>
<div class="d-inner-d1">
<span class="s1">关键词</span>
<a-select style="width: 200px"></a-select>
<a-input style="width: 200px;margin-left: 12px"></a-input>
</div>
<div class="d-inner-d1">
<span class="s1">时间筛选</span>
<v-tab-group :value="gValue" :style="{ background: 'transparent' }" :btns="btnTimes" @change="handlerTime"></v-tab-group>
</div>
<div class="d-inner-d1">
<span class="s1">去重筛选</span>
<v-tab-group :value="gValue2" :style="{ background: 'transparent' }" :btns="btnTimes2" @change="handlerTime"></v-tab-group>
</div>
<div class="d-inner-d2">
<span class="s1">共计<span class="ss1">{{totalNum}}</span>条数据已选中<span class="ss1"></span>条数据</span>
<div>
<a-button type="primary" >导出数据</a-button>
<a-button type="primary" @click="goThemeBoard"></a-button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "ThemeData",
data() {
return {
noClick: false,
//
selTime: [],
//
quDao: [],
plainOptions: [
{label: '新闻', value: 'news'},
{label: '论坛', value: 'forum'},
],
qdIndeterminate: true,
qdCheckAll: false,
//
diaoXing: [],
plainOptions2: [
{label: '正面', value: 'poz'},
{label: '中性', value: 'mid'},
{label: '负面', value: 'neg'},
],
dxIndeterminate: true,
dxCheckAll: false,
//
gValue: 0,
btnTimes:['发布时间','入库时间'],
//
gValue2: 0,
btnTimes2:['不去重','相似度去重'],
}
},
methods: {
handlerBack() {
this.$router.go(-1);
},
goThemeBoard() {
this.$router.push({path: '/ThemeBoard'})
},
//
calendarPriceRangeChange() {},
handlerChangeTime() {},
disabledDate() {},
onChange(val, type) {}, //
//
onCheckAllChangeQd() {},
//
onCheckAllChangeDx() {},
//
handlerTime() {}
}
}
</script>
<style lang="less">
.d-outter {
padding: 0px 16px 16px 16px;
}
.d-inner {
width: 100%;
height: 960px;
border: 2px solid #0f2a4d;
background: #091e36;
.d-inner-d1 {
width: 100%;
margin-top: 22px;
margin-left: 20px;
display: flex;
.s1 {
font-size: 14px;
color: #fff;
}
}
.d-inner-d2 {
display: flex;
justify-content: space-between;
padding: 24px 20px 10px 20px;
align-items: flex-end;
.s1 {
font-size: 14px;
color: #fff;
}
}
}
</style>
Loading…
Cancel
Save