You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
309 lines
10 KiB
309 lines
10 KiB
<!--
|
|
* @Author: your name
|
|
* @Date: 2021-10-13 15:17:14
|
|
* @LastEditTime: 2021-11-09 14:52:21
|
|
* @LastEditors: Please set LastEditors
|
|
* @Description: 论坛洞察详情
|
|
* @FilePath: /data-show/src/views/ForumDetails/index.vue
|
|
-->
|
|
<template>
|
|
<div class="d-container">
|
|
<div class="fd-outter">
|
|
<div class="fd-d1" v-loading="load">
|
|
<v-label-div title="论坛洞察详情">
|
|
<v-btn @click="goback">返回洞察详情</v-btn>
|
|
</v-label-div>
|
|
<div class="fd-d1-bd">
|
|
<div class="d1">
|
|
{{this.form.sBrand}}
|
|
</div>
|
|
<div class="d2">
|
|
洞察分析：在<span v-html="msg"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="fd-d2" v-loading="load1">
|
|
<v-label-div title="传播态势"/>
|
|
<div class="fd-d2-inner">
|
|
<v-echarts :opt="opt1" @clickMark="clickMark"></v-echarts>
|
|
</div>
|
|
<div class="vshow" v-if="modelShow" :style="modelStyle">
|
|
<vLabel-div title="实时热点事件">
|
|
<a-button @click="closeBox">关闭</a-button>
|
|
</vLabel-div>
|
|
<div class="vshow-item" v-for="(item, index) in urlArr" :key="index">
|
|
<a class="vshow-link" :href="item.url" v-if="item.column == activeCol" target="tar">{{item.title}}</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="fd-d2" v-loading="load2">
|
|
<v-label-div title="TOP5车型传播态势"/>
|
|
<div class="fd-d2-inner">
|
|
<v-echarts :opt="opt2" @clickMark="clickMark2"></v-echarts>
|
|
</div>
|
|
<div class="vshow" v-if="modelShow2" :style="modelStyle">
|
|
<vLabel-div title="实时热点事件">
|
|
<a-button @click="closeBox">关闭</a-button>
|
|
</vLabel-div>
|
|
<div class="vshow-item" v-for="(item, index) in urlArr2" :key="index">
|
|
<a class="vshow-link" :href="item.url" v-if="item.column == activeCol" target="tar">{{item.title}}</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {getBbsInsightAnalysis,getBbsCountTime, getBbsBrandTime} from '@/api/Forumdetails'
|
|
import {doStr} from "@/utils/gol/dataTool"
|
|
import createOptD1 from "./optD1"
|
|
import createOptD2 from "./optD2"
|
|
export default {
|
|
name: "ForumDetails",
|
|
data() {
|
|
return {
|
|
//弹出框//
|
|
modelStyle:{
|
|
left: '',
|
|
top: ''
|
|
},
|
|
modelShow: false,
|
|
modelShow2: false,
|
|
ecbox:{//图表宽高
|
|
width:1500,
|
|
height:357
|
|
},
|
|
ecmodel:{//弹框宽高
|
|
width:300,
|
|
height:280
|
|
},
|
|
activeCol: 0,
|
|
activeCol2: 0,
|
|
//-*-//
|
|
load: false,
|
|
load1: false,
|
|
load2: false,
|
|
opt1: {},
|
|
opt2: {},
|
|
msg: "",
|
|
form: {
|
|
sBrand: "",
|
|
token: "",
|
|
iBBsType: 1,
|
|
},
|
|
urlArr: [],
|
|
urlArr2: [],
|
|
}
|
|
},
|
|
created() {
|
|
this.form.token = this.getToken;
|
|
this.form.sBrand = this.getBrand.brandname || '奥迪';
|
|
this.getDdta1();
|
|
this.getDdta2();
|
|
this.getDdta3();
|
|
},
|
|
methods: {
|
|
//--弹出框--//
|
|
clickMark(data) {
|
|
this.activeCol = data.index
|
|
this.modelShow = true;
|
|
let mw = window.event;
|
|
if((this.ecbox.width - mw.offsetX - 20) > this.ecmodel.width) {
|
|
this.modelStyle.left = mw.offsetX + 20 + "px"
|
|
} else {
|
|
this.modelStyle.left = mw.offsetX - this.ecmodel.width - 20 + "px"
|
|
}
|
|
if((this.ecbox.height - mw.offsetY - 20) > this.ecmodel.height) {
|
|
this.modelStyle.top = mw.offsetY + "px"
|
|
} else {
|
|
this.modelStyle.top = mw.offsetY - this.ecmodel.height + "px"
|
|
}
|
|
},
|
|
clickMark2(data) {
|
|
this.activeCol2 = data.index
|
|
this.modelShow2 = true;
|
|
let mw = window.event;
|
|
if((this.ecbox.width - mw.offsetX - 20) > this.ecmodel.width) {
|
|
this.modelStyle.left = mw.offsetX + 20 + "px"
|
|
} else {
|
|
this.modelStyle.left = mw.offsetX - this.ecmodel.width - 20 + "px"
|
|
}
|
|
if((this.ecbox.height - mw.offsetY - 20) > this.ecmodel.height) {
|
|
this.modelStyle.top = mw.offsetY + "px"
|
|
} else {
|
|
this.modelStyle.top = mw.offsetY - this.ecmodel.height + "px"
|
|
}
|
|
},
|
|
closeBox() {
|
|
this.modelShow = false;
|
|
this.modelShow2 = false;
|
|
},
|
|
//----//
|
|
getDdta1(){
|
|
let obj = Object.assign({}, this.getCtime2, this.form);
|
|
this.load = true;
|
|
getBbsInsightAnalysis(obj).then(res => {
|
|
let data = res.msg;
|
|
this.msg = data;
|
|
this.load = false;
|
|
})
|
|
},
|
|
getDdta2(){
|
|
let obj = Object.assign({}, this.getCtime2, this.form);
|
|
this.load1 = true;
|
|
getBbsCountTime(obj).then(res => {
|
|
let data = res.data || [];
|
|
let dx = [];
|
|
let ds = [];
|
|
let hotTopArr = [];
|
|
let urlArr = [];
|
|
let hotIndex = [];
|
|
let dataI = 0;
|
|
data.forEach((ele) => {
|
|
let time = ele.Time;
|
|
let value = ele.value;
|
|
dx.push(time);
|
|
ds.push(value);
|
|
if(ele.hotTop[0]) {
|
|
ele.hotTop.forEach((e) => {
|
|
let urlObj = {
|
|
column: dataI,
|
|
title: doStr(e.title, 30),
|
|
url: e.url
|
|
};
|
|
urlArr.push(urlObj);
|
|
})
|
|
}
|
|
let obj = {
|
|
label: time,
|
|
hotTop: ele.hotTop
|
|
}
|
|
hotTopArr.push(obj);
|
|
dataI = dataI + 1;
|
|
});
|
|
this.urlArr = urlArr;
|
|
//获取有热点信息的索引
|
|
for(let i = 0; i<hotTopArr.length; i++) {
|
|
if(hotTopArr[i].hotTop != '') {
|
|
hotIndex.push(i)
|
|
}
|
|
}
|
|
this.opt1 = createOptD1(dx, ds, hotIndex);
|
|
this.load1 = false;
|
|
})
|
|
},
|
|
getDdta3(){
|
|
let obj = Object.assign({}, this.getCtime2, this.form);
|
|
this.load2 = true;
|
|
getBbsBrandTime(obj).then(res => {
|
|
let data = res.data || [];
|
|
let dx = [];
|
|
let ds = [];
|
|
let urlArr = [];
|
|
let dataI = 0;
|
|
data.forEach((ele) => {
|
|
let key = ele.Time;
|
|
let value = ele.Data;
|
|
dx.push(key);
|
|
ds.push(value);
|
|
if(ele.hotTop[0]) {
|
|
ele.hotTop.forEach((e) => {
|
|
let urlObj = {
|
|
column: dataI,
|
|
value: this.findMax(ele.Data).maxVal,
|
|
index: this.findMax(ele.Data).maxIndex,
|
|
title: doStr(e.title, 30),
|
|
url: e.url
|
|
};
|
|
urlArr.push(urlObj);
|
|
})
|
|
}
|
|
dataI = dataI + 1;
|
|
});
|
|
this.urlArr2 = urlArr;
|
|
//获取有热点信息的索引
|
|
this.opt2 = createOptD2(dx, ds, urlArr);
|
|
this.load2 = false;
|
|
})
|
|
},
|
|
goback() {
|
|
this.$router.go(-1)
|
|
},
|
|
findMax(arr = []) {
|
|
let maxVal = arr[0].value * 1.0;
|
|
let maxIndex = 0
|
|
for(let i = 0;i< arr.length; i++) {
|
|
if(arr[i].value > maxVal) {
|
|
maxVal = arr[i].value * 1;
|
|
maxIndex = i
|
|
}
|
|
}
|
|
let obj = {maxVal: maxVal,maxIndex: maxIndex}
|
|
return obj;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.fd-outter {
|
|
padding: 0px 16px 16px 16px;
|
|
}
|
|
.fd-d1 {
|
|
width: 100%;
|
|
height: 222px;
|
|
border: 2px solid #0F2A4D;
|
|
.fd-d1-bd {
|
|
width: 100%;
|
|
height: calc(100% - 48px);
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
.d1 {
|
|
width: 150px;
|
|
height: 150px;
|
|
border-radius: 150px;
|
|
background-image: url("../../assets/images/BrandInsight/img_lq.png");
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
margin-left: 114px;
|
|
text-align: center;
|
|
line-height: 150px;
|
|
font-size: 24px;
|
|
color: #b2daf7;
|
|
}
|
|
.d2 {
|
|
padding: 16px;
|
|
width: 1500px;
|
|
height: 100%;
|
|
font-size: 20px;
|
|
color: #fff;
|
|
margin-left: 114px;
|
|
}
|
|
}
|
|
}
|
|
.fd-d2 {
|
|
width: 100%;
|
|
height: 357px;
|
|
border: 2px solid #0F2A4D;
|
|
margin-top: 16px;
|
|
.fd-d2-inner {
|
|
width: 100%;
|
|
height: calc(100% - 48px);
|
|
}
|
|
}
|
|
.vshow{
|
|
position: absolute;
|
|
width: 300px;
|
|
background: rgb(3, 18, 36);
|
|
border: 4px solid #0f2a4d;
|
|
.vshow-item {
|
|
padding: 11px;
|
|
width: 100%;
|
|
font-size: 15px;
|
|
color: rgb(54, 189, 239);
|
|
}
|
|
}
|
|
</style>
|