prod
parent
239654def9
commit
2f5a2a3ec3
@ -0,0 +1,118 @@
|
||||
import httpService from "@/request"
|
||||
|
||||
// 用户品牌列表
|
||||
export function getSwsQyUserCarMainBrandList(params) {
|
||||
let obj = Object.assign({action: 'getSwsQyUserCarMainBrandList'}, params)
|
||||
return httpService({
|
||||
url: `/api/v6.ashx`,
|
||||
method: 'post',
|
||||
data: obj,
|
||||
headers: {
|
||||
'content-type': 'application/x-www-form-urlencoded'
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 获取品牌信息
|
||||
export function getHealthIndex(params) {
|
||||
let obj = Object.assign({action: 'getHealthIndex', sType: 'BrandOverview'}, params)
|
||||
return httpService({
|
||||
url: `/api/v6.ashx`,
|
||||
method: 'post',
|
||||
data: obj,
|
||||
headers: {
|
||||
'content-type': 'application/x-www-form-urlencoded'
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 危机消息和危机列表
|
||||
export function getList(params) {
|
||||
let obj = Object.assign({action: 'getList', sType: 'BrandData', sQingGan: 2}, params)
|
||||
return httpService({
|
||||
url: `/api/v6.ashx`,
|
||||
method: 'post',
|
||||
data: obj,
|
||||
headers: {
|
||||
'content-type': 'application/x-www-form-urlencoded'
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 重点媒体
|
||||
export function getWebsite(params) {
|
||||
let obj = Object.assign({action: 'getWebsite', sType: 'BrandOverview'}, params)
|
||||
return httpService({
|
||||
url: `/api/v6.ashx`,
|
||||
method: 'post',
|
||||
data: obj,
|
||||
headers: {
|
||||
'content-type': 'application/x-www-form-urlencoded'
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 热点事件
|
||||
export function getHotEventsList0528(params) {
|
||||
let obj = Object.assign({action: 'getHotEventsList0528', sType: 'HotEvent'}, params)
|
||||
return httpService({
|
||||
url: `/api/v6.ashx`,
|
||||
method: 'post',
|
||||
data: obj,
|
||||
headers: {
|
||||
'content-type': 'application/x-www-form-urlencoded'
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 预警消息列表
|
||||
export function getSwsQyMessageList(params) {
|
||||
let obj = Object.assign({action: 'getSwsQyMessageList'}, params)
|
||||
return httpService({
|
||||
url: `/api/v6.ashx`,
|
||||
method: 'post',
|
||||
data: obj,
|
||||
headers: {
|
||||
'content-type': 'application/x-www-form-urlencoded'
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 预警设为已读
|
||||
export function updSwsQyMessageByIDRead(params) {
|
||||
let obj = Object.assign({action: 'updSwsQyMessageByIDRead'}, params)
|
||||
return httpService({
|
||||
url: `/api/v6.ashx`,
|
||||
method: 'post',
|
||||
data: obj,
|
||||
headers: {
|
||||
'content-type': 'application/x-www-form-urlencoded'
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 获取预警列表
|
||||
export function getSwsQyQuartzList(params) {
|
||||
let obj = Object.assign({action: 'getSwsQyQuartzList'}, params)
|
||||
return httpService({
|
||||
url: `/api/v6.ashx`,
|
||||
method: 'post',
|
||||
data: obj,
|
||||
headers: {
|
||||
'content-type': 'application/x-www-form-urlencoded'
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 添加修改预警
|
||||
export function addOrUpdSwsQyQuartzList(params) {
|
||||
let obj = Object.assign({action: 'addOrUpdSwsQyQuartzList'}, params)
|
||||
return httpService({
|
||||
url: `/api/v6.ashx`,
|
||||
method: 'post',
|
||||
data: obj,
|
||||
headers: {
|
||||
'content-type': 'application/x-www-form-urlencoded'
|
||||
}
|
||||
})
|
||||
}
|
||||
|
After Width: | Height: | Size: 7.8 KiB |
|
After Width: | Height: | Size: 44 KiB |
@ -0,0 +1,166 @@
|
||||
<!--
|
||||
* @Author: xw
|
||||
* @Date: 2021-10-11 18:42:58
|
||||
* @LastEditTime: 2021-11-29 10:48:33
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: 品牌数据
|
||||
* @FilePath: /data-show/src/views/BrandInsight/brandData/index.vue
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="bd-outter" v-loading="load">
|
||||
<v-label-div title="品牌数据"></v-label-div>
|
||||
<div class="bd-inner">
|
||||
<div class="bd-o-d1">
|
||||
<div class="d1">
|
||||
<img class="m1" src="../../../assets/images/BrandInsight/ic_cb.png" />
|
||||
<span class="s1">传播数据总量</span>
|
||||
</div>
|
||||
<!-- <a-popover title="传播数据">
|
||||
<template slot="content">
|
||||
<div class="pd-item" v-for="(item,index) in countArr" :key="index">
|
||||
<span>{{item.key}}</span>
|
||||
<span>{{item.value}}</span>
|
||||
</div>
|
||||
</template> -->
|
||||
<span class="s2">{{count}}</span>
|
||||
<!-- </a-popover> -->
|
||||
</div>
|
||||
<div class="bd-o-d1" style="margin-top: 16px">
|
||||
<div class="d1">
|
||||
<img class="m1" src="../../../assets/images/BrandInsight/ic_dx.png" />
|
||||
<span class="s1">舆情整体调性</span>
|
||||
</div>
|
||||
<a-popover title="舆情整体调性">
|
||||
<template slot="content">
|
||||
<template v-for="(item,index) in affObj">
|
||||
<div class="pd-item" :key="index" v-if="index != 'z'">
|
||||
<span v-if="index === 'a'">正面</span>
|
||||
<span v-if="index === 'b'">中性</span>
|
||||
<span v-if="index === 'c'">负面</span>
|
||||
<span>{{item}}</span>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
<span class="s2">
|
||||
<span class="s2-s1" :style="{width: affObj.a/affObj.z * 100 +'%'}"></span>
|
||||
<span class="s2-s1" :style="{width: affObj.b/affObj.z * 100 + '%', background: '#54BF93'}"></span>
|
||||
<span class="s2-s1" :style="{width: affObj.c/affObj.z * 100 + '%',background: '#CC9D12'}"></span>
|
||||
</span>
|
||||
</a-popover>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getHealthIndex} from "@/api/MyBrand"
|
||||
export default {
|
||||
name: "brandData",
|
||||
props: ["brand"],
|
||||
data() {
|
||||
return {
|
||||
count: 0,
|
||||
countArr: [],
|
||||
load: false,
|
||||
form: {
|
||||
token: "",
|
||||
sBrand: '',
|
||||
sSeriesName: '',
|
||||
},
|
||||
affObj: {
|
||||
a: 0,
|
||||
b: 0,
|
||||
c: 0,
|
||||
z: 0,
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.form.token = this.getToken;
|
||||
this.form.sBrand = this.getWarningBrand.brandname || this.brand;
|
||||
this.form.sSeriesName = this.getWarningSeries || '';
|
||||
this.getData();
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
let obj = Object.assign({}, this.getCtime2, this.form)
|
||||
getHealthIndex(obj).then(res => {
|
||||
let data = res.data;
|
||||
this.countArr = data.affections || [];
|
||||
this.count = data.affections[0].value + data.affections[1].value + data.affections[2].value;
|
||||
this.affObj.a = data.affections[0].value || 0;
|
||||
this.affObj.b = data.affections[1].value || 0;
|
||||
this.affObj.c = data.affections[2].value || 0;
|
||||
this.affObj.z = this.count;
|
||||
})
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.bd-outter {
|
||||
width: 620px;
|
||||
height: 272px;
|
||||
border: 2px solid #0f2a4d;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.bd-inner {
|
||||
padding: 16px;
|
||||
.bd-o-d1 {
|
||||
width: 588px;
|
||||
height: 88px;
|
||||
border: 1px solid #0f2a4d;
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.d1 {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
.m1 {
|
||||
display: block;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
margin-left: 16px;
|
||||
}
|
||||
.s1 {
|
||||
display: block;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
.s2 {
|
||||
display: block;
|
||||
color: #fff;
|
||||
font-size: 44px;
|
||||
font-family: Bebas;
|
||||
margin-right: 16px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
width: 276px;
|
||||
cursor: pointer;
|
||||
.s2-s1 {
|
||||
display: block;
|
||||
width: 102px;
|
||||
height: 36px;
|
||||
background: #3373cc;
|
||||
margin-right: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.pd-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: #fff;
|
||||
border-bottom: 1px solid #173b6d;
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,116 @@
|
||||
<!--
|
||||
* @Author: xw
|
||||
* @Date: 2021-10-12 09:32:35
|
||||
* @LastEditTime: 2021-12-29 17:11:53
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: 舆情传播趋势
|
||||
* @FilePath: /data-show/src/views/BrandInsight/warnsopo/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="warn-outter" v-loading="load">
|
||||
<div class="warn-inner">
|
||||
<vLabel-div title="热点事件"></vLabel-div>
|
||||
<div class="warn-bd">
|
||||
<dv-scroll-board :config="config" :style="{ width: '100%', height: '22rem' }" @click="handlerItem"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getHotEventsList0528 } from "@/api/MyBrand";
|
||||
export default {
|
||||
name: "eventList",
|
||||
props: ["brand"],
|
||||
data() {
|
||||
return {
|
||||
load: false,
|
||||
form: {
|
||||
sBrand: "",
|
||||
token: "",
|
||||
sSeriesName: '',
|
||||
iPageIndex: 1,
|
||||
iPageSize: 100,
|
||||
},
|
||||
config: {},
|
||||
darr: []
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.form.token = this.getToken;
|
||||
this.form.sBrand = this.getWarningBrand.brandname || this.brand;
|
||||
this.form.sSeriesName = this.getWarningSeries || ''
|
||||
this.getData();
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
let obj = Object.assign({}, this.getCtime2, this.form);
|
||||
this.load = true;
|
||||
getHotEventsList0528(obj).then((res) => {
|
||||
let data = res.data || [];
|
||||
let arr = [];
|
||||
let arr2 = [];
|
||||
data.forEach((ele) => {
|
||||
let a = [
|
||||
`<span style='cursor: pointer;'>${ele.events_title}</span>`,
|
||||
ele.count,
|
||||
ele.ctime,
|
||||
ele.events_series
|
||||
];
|
||||
let b = [
|
||||
`<span style='cursor: pointer;'>${ele.events_title}</span>`,
|
||||
ele.count,
|
||||
ele.ctime,
|
||||
ele.events_series,
|
||||
ele.events_id
|
||||
];
|
||||
arr.push(a);
|
||||
arr2.push(b);
|
||||
});
|
||||
this.darr = arr2;
|
||||
this.config = {
|
||||
headerBGC: "rgba(16,33,59)",
|
||||
oddRowBGC: "#173b6d",
|
||||
evenRowBGC: "rgba(69, 149, 244, 0)",
|
||||
columnWidth: [520,80,130,80],
|
||||
rowNum: 6,
|
||||
header: ["事件列表", "影响力", "时间", "关联车型"],
|
||||
data: arr,
|
||||
};
|
||||
this.load = false;
|
||||
});
|
||||
},
|
||||
handlerItem(row) {
|
||||
let ele = this.darr[row.rowIndex];
|
||||
if(row.columnIndex === 0) {
|
||||
let id = ele[4];
|
||||
this.$router.push({path: '/eventDEC', query: {events_id: id}});
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.warn-outter {
|
||||
width: 936px;
|
||||
height: 460px;
|
||||
.warn-inner {
|
||||
width: 100%;
|
||||
height: 460px;
|
||||
margin-top: 16px;
|
||||
border: 2px solid #0f2a4d;
|
||||
.warn-bd {
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
}
|
||||
.more {
|
||||
font-size: 16px;
|
||||
font-family: PingFangSC-Semibold, PingFang SC;
|
||||
font-weight: 600;
|
||||
color: #AAAAAA;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,380 @@
|
||||
<template>
|
||||
<div class="b-container">
|
||||
<div class="b-outter">
|
||||
<div class="b-d1">
|
||||
<div class="bdl-d1-dd1">
|
||||
<brand-data :brand="brand"></brand-data>
|
||||
<negative-data :brand="brand"></negative-data>
|
||||
</div>
|
||||
<div class="bdl-d1-dd2">
|
||||
<div class="bdl-d1-dd2-d1">
|
||||
<div class="bdl-d1-dd2-d1-s1">{{this.brand}}</div>
|
||||
<div class="bdl-d1-dd2-d1-number">{{healthNum}}</div>
|
||||
<div class="bdl-d1-dd2-d1-number" style="font-size: 18px;line-height: 36px">健康指数</div>
|
||||
</div>
|
||||
<img class="m2" src="../../assets/images/BrandInsight/img_warning.png" @click="openBrand"/>
|
||||
</div>
|
||||
<div class="bdl-d1-dd3">
|
||||
<warning-info></warning-info>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bdl-d2">
|
||||
<event-list :brand="brand"></event-list>
|
||||
<media-list :brand="brand"></media-list>
|
||||
</div>
|
||||
</div>
|
||||
<a-modal title="推送设置" width="33%" :footer="null" @cancel="visible = false" :visible="visible">
|
||||
<div class="modal-table">
|
||||
<a-form-model layout="horizontal" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }">
|
||||
<a-form-model-item label="选择车型">
|
||||
<a-input v-model="settingForm.SeriesNames" disabled placeholder="全部车型"></a-input>
|
||||
<a @click="chooseSeries">选择</a>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="接收时间">
|
||||
<a-checkbox-group v-model="dx" :options="options" @change="(val) => crisisChange(val, 'crisis')" />
|
||||
</a-form-model-item>
|
||||
<a-form-model-item label="是否预警消息">
|
||||
<a-switch :checked="Statu == '0'" checked-children="开" un-checked-children="关" @change="openChange" />
|
||||
</a-form-model-item>
|
||||
</a-form-model>
|
||||
</div>
|
||||
<div class="beCpm-footer" @click="onSave">
|
||||
保存
|
||||
</div>
|
||||
</a-modal>
|
||||
<a-modal title="车型选择" width="69%" :footer="null" @cancel="seriesVisible = false" :visible="seriesVisible">
|
||||
<a @click="selectAll" style="color: #FAFAFA;margin-left: 16px">全选</a>
|
||||
<vue-scroll>
|
||||
<div class="sb-bd">
|
||||
<div class="sb-b-item" :class="list.indexOf(item.seriesname) != -1 ? 'sb-b-item-active': ''" v-for="(item,index) in models" :key="index" @click="handlerModel(index, item)">
|
||||
<!-- <div v-if="item.seriesname.length > 11 && item.seriesname.length <= 13" style="font-size: 15px">{{item.seriesname}}</div>
|
||||
<div v-else-if="item.seriesname.length > 13 && item.seriesname.length <= 14" style="font-size: 13px">{{item.seriesname}}</div>
|
||||
<div v-else-if="item.seriesname.length > 14" style="font-size: 13px">{{item.seriesname}}</div> -->
|
||||
<div>{{item.seriesname}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</vue-scroll>
|
||||
<div class="beCpm-footer" @click="seriesVisible = false">
|
||||
确定
|
||||
</div>
|
||||
</a-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import brandData from "./brandData";
|
||||
import negativeData from "./negativeData";
|
||||
import warningInfo from "./warningInfo";
|
||||
import eventList from "./eventList";
|
||||
import mediaList from "./mediaList"
|
||||
import {getSwsQyUserCarMainBrandList, getHealthIndex, getSwsQyQuartzList, addOrUpdSwsQyQuartzList} from "@/api/MyBrand"
|
||||
import { getSeriesNameByCategory } from "@/api/comm";
|
||||
export default {
|
||||
name: "MyBrand",
|
||||
inject: ['reload'],
|
||||
components: {
|
||||
brandData,negativeData,warningInfo,eventList,mediaList
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
healthNum: undefined,
|
||||
series: [],
|
||||
form: {
|
||||
token: '',
|
||||
sBrand: '',
|
||||
sSeriesName: ''
|
||||
},
|
||||
// 预警设置
|
||||
settingForm: {
|
||||
SeriesNames: '',
|
||||
Crisis: '',
|
||||
},
|
||||
Id: 0,
|
||||
Statu: '0',
|
||||
dx: ['1','2','3'],
|
||||
options: [
|
||||
{label: '低级危机', value: '1'},
|
||||
{label: '中级危机', value: '2'},
|
||||
{label: '高级危机', value: '3'}
|
||||
],
|
||||
visible: false,
|
||||
seriesVisible: false,
|
||||
// 车型选择
|
||||
models: [],
|
||||
list: [],
|
||||
brand: '',
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.setHeaderType(3);
|
||||
this.brand = this.getWarningBrand.brandname;
|
||||
this.form.token = this.getToken;
|
||||
this.form.sBrand = this.getWarningBrand.brandname;
|
||||
this.form.sSeriesName = this.getWarningSeries;
|
||||
this.getData();
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
let obj = Object.assign({}, this.form, this.getCtime2)
|
||||
getSwsQyUserCarMainBrandList({token: this.getToken}).then(res => {
|
||||
let brand = res.data[0] || '';
|
||||
if(brand) {
|
||||
this.brand = brand.brandname
|
||||
};
|
||||
});
|
||||
getHealthIndex(obj).then(res => {
|
||||
this.healthNum = res.data.healthIndex
|
||||
});
|
||||
},
|
||||
openBrand() {
|
||||
this.visible = true;
|
||||
let obj = {
|
||||
token: this.getToken, iPageIndex: 1, iPageSize: 20, brandname: this.getWarningBrand.brandname
|
||||
}
|
||||
getSwsQyQuartzList(obj).then(res => {
|
||||
let data = res.data;
|
||||
this.dx = data[0].Es.Crisis.split(',');
|
||||
this.settingForm.Crisis = data[0].Es.Crisis;
|
||||
this.settingForm.SeriesNames = data[0].Es.SeriesNames;
|
||||
if(data[0].Es.SeriesNames != '') {
|
||||
this.list = data[0].Es.SeriesNames.split(',');
|
||||
}
|
||||
this.Id = data[0].Id;
|
||||
this.Statu = data[0].Statu
|
||||
})
|
||||
},
|
||||
crisisChange(val, type) {
|
||||
this.dx = val;
|
||||
this.settingForm.Crisis = val.join(',');
|
||||
},
|
||||
openChange(e) { //预警开启/关闭
|
||||
let obj = {
|
||||
Id: this.Id,
|
||||
Statu: e?0:1
|
||||
};
|
||||
let form = {
|
||||
token: this.getToken,
|
||||
data: JSON.stringify(obj)
|
||||
};
|
||||
addOrUpdSwsQyQuartzList(form).then(res => {
|
||||
if(res.msg == 'Success') {
|
||||
let m = e?'预警已开启':'预警已关闭'
|
||||
this.Statu = e?'0':'1';
|
||||
this.$message.success(m);
|
||||
}
|
||||
})
|
||||
},
|
||||
chooseSeries() {
|
||||
let obj = {
|
||||
token: this.getToken,
|
||||
sBrand: this.getWarningBrand.brandname,
|
||||
sType: 'Series',
|
||||
}
|
||||
getSeriesNameByCategory(obj).then(res => {
|
||||
this.models = res.data
|
||||
})
|
||||
this.seriesVisible = true;
|
||||
},
|
||||
onSave() {
|
||||
let obj = {
|
||||
Id: this.Id,
|
||||
Es: {
|
||||
Brands: this.getWarningBrand.brandname,
|
||||
SeriesNames: this.settingForm.SeriesNames,
|
||||
QingGan: 2,
|
||||
Crisis: this.settingForm.Crisis
|
||||
},
|
||||
};
|
||||
let form = {
|
||||
token: this.getToken,
|
||||
data: JSON.stringify(obj)
|
||||
};
|
||||
addOrUpdSwsQyQuartzList(form).then(res => {
|
||||
if(res.msg == 'Success') {
|
||||
this.setWarningSeries(this.settingForm.SeriesNames);
|
||||
this.$message.success('修改成功');
|
||||
this.visible = false;
|
||||
this.reload();
|
||||
}
|
||||
})
|
||||
},
|
||||
// 车型选择
|
||||
handlerModel(n, row) {
|
||||
let value = row.seriesname;
|
||||
if(this.list.indexOf(value) == -1) {
|
||||
this.list.push(value)
|
||||
} else {
|
||||
let index = this.list.indexOf(value);
|
||||
this.list.splice(index, 1);
|
||||
};
|
||||
this.settingForm.SeriesNames = this.list.join(',')
|
||||
},
|
||||
selectAll() {
|
||||
if(this.list.length = this.models.length && this.list.length != 0) {
|
||||
this.list = [];
|
||||
this.settingForm.SeriesNames = '';
|
||||
} else {
|
||||
let arr = [];
|
||||
this.models.forEach(ele => {
|
||||
arr.push(ele.seriesname)
|
||||
});
|
||||
this.list = arr;
|
||||
this.settingForm.SeriesNames = arr.join(',');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.b-outter {
|
||||
position: relative;
|
||||
padding: 0px 16px 16px 16px;
|
||||
}
|
||||
.b-d1 {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.bdl-d1-dd2 {
|
||||
position: relative;
|
||||
width: 620px;
|
||||
height: 560px;
|
||||
margin-left: 16px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
.m1 {
|
||||
position: absolute;
|
||||
width: 274px;
|
||||
height: 64px;
|
||||
top: 0px;
|
||||
transform: translate(0px);
|
||||
cursor: pointer;
|
||||
}
|
||||
.m2 {
|
||||
position: absolute;
|
||||
width: 274px;
|
||||
height: 64px;
|
||||
bottom: 0px;
|
||||
transform: translate(0px);
|
||||
cursor: pointer;
|
||||
}
|
||||
.bdl-d1-dd2-d1 {
|
||||
width: 470px;
|
||||
height: 520px;
|
||||
background-image: url("../../assets/images/BrandInsight/img_tz.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: 0 40px;
|
||||
.bdl-d1-dd2-d1-s1 {
|
||||
display: block;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #b2daf7;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-top: 125px;
|
||||
}
|
||||
.bdl-d1-dd2-d1-s2 {
|
||||
display: block;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #b2daf7;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-top: 125px;
|
||||
}
|
||||
.bdl-d1-dd2-d1-s3 {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #b2daf7;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-top: 125px;
|
||||
}
|
||||
.bdl-d1-dd2-d1-number {
|
||||
display: block;
|
||||
font-size: 60px;
|
||||
line-height: 60px;
|
||||
font-weight: 600;
|
||||
color: #b2daf7;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bdl-d2 {
|
||||
// width: 50%;
|
||||
// height: 460px;
|
||||
// border: 2px solid #0f2a4d;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.epor {
|
||||
// width: 100%;
|
||||
// height: 80px;
|
||||
.epor-btn {
|
||||
width: 274px;
|
||||
height: 64px;
|
||||
background-image: url("../../assets/images/comm/img_bbut.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
text-align: center;
|
||||
line-height: 80px;
|
||||
color: #63aecc;
|
||||
font-size: 28px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.beCpm-footer {
|
||||
position: relative;
|
||||
width: 354px;
|
||||
height: 48px;
|
||||
background-image: url("../../assets/images/login/img_dlan_nor.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
bottom: 0px;
|
||||
left: 50%;
|
||||
transform: translate(-50%);
|
||||
cursor: pointer;
|
||||
color: #63aecc;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
line-height: 64px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.sb-bd {
|
||||
padding: 0px 16px 16px 8px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
.sb-b-item {
|
||||
width: 190px;
|
||||
height: 66px;
|
||||
background: #1B4163;
|
||||
color: #fff;
|
||||
border-radius: 2px;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
line-height: 66px;
|
||||
margin-left: 16px;
|
||||
margin-top: 16px;
|
||||
transition: all 0.3s;
|
||||
white-space:nowrap;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background: #3373CC;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.sb-b-item-active {
|
||||
background: #3373CC;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,77 @@
|
||||
<!--
|
||||
* @Author: xw
|
||||
* @Date: 2021-10-12 09:03:51
|
||||
* @LastEditTime: 2021-11-01 09:58:03
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: 品牌TOP车型
|
||||
* @FilePath: /data-show/src/views/BrandInsight/brandTop/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="ml-outter" v-see v-loading="load">
|
||||
<v-label-div title="媒体分别"></v-label-div>
|
||||
<div class="ml-inner">
|
||||
<v-echarts :opt="opt" @getData="clickEchars"></v-echarts>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getWebsite} from "@/api/MyBrand"
|
||||
import createOpt from "./opt"
|
||||
export default {
|
||||
name: "brand-top",
|
||||
props: ["brand"],
|
||||
data() {
|
||||
return {
|
||||
load: false,
|
||||
form: {
|
||||
token: "",
|
||||
sBrand: '',
|
||||
sSeriesName: '',
|
||||
},
|
||||
opt: {},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.form.token = this.getToken;
|
||||
this.form.sBrand = this.getWarningBrand.brandname || this.brand;
|
||||
this.form.sSeriesName = this.getWarningSeries || '';
|
||||
this.getData()
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
this.load = true;
|
||||
let obj = Object.assign({},this.getCtime2, this.form);
|
||||
getWebsite(obj).then(res => {
|
||||
let data = res.data || {};
|
||||
let dx = [];
|
||||
let ds = [];
|
||||
for(let key in data) {
|
||||
dx.push(key);
|
||||
ds.push(data[key])
|
||||
}
|
||||
this.opt = createOpt(dx,ds);
|
||||
this.load = false;
|
||||
})
|
||||
},
|
||||
clickEchars(data) {
|
||||
let ele = data;
|
||||
let media = ele.axisValueLabel;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.ml-outter {
|
||||
width: 936px;
|
||||
height: 460px;
|
||||
border: 2px solid #0f2a4d;
|
||||
margin-top: 16px;
|
||||
margin-left: 16px;
|
||||
.ml-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,111 @@
|
||||
/*
|
||||
* @Author: your name
|
||||
* @Date: 2021-10-12 09:12:13
|
||||
* @LastEditTime: 2021-11-02 18:03:08
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandInsight/brandTop/opt.js
|
||||
*/
|
||||
import * as echarts from "echarts";
|
||||
import { bigNumberTransform } from "@/utils/gol/dataTool"
|
||||
export default function createOpt(dx,ds) {
|
||||
return {
|
||||
grid: {
|
||||
top: "16px",
|
||||
left: "16px",
|
||||
right: "28px",
|
||||
bottom: "16px",
|
||||
containLabel: true,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
backgroundColor: "#08182F",
|
||||
color: "#fff",
|
||||
borderColor: "#3373CC",
|
||||
textStyle: {
|
||||
color: "#fff", //设置文字颜色
|
||||
},
|
||||
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
|
||||
formatter: function (params) {
|
||||
var result = "";
|
||||
var dotHtml =
|
||||
'<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#1197b8"></span>';
|
||||
params.forEach(function (item) {
|
||||
result += item.axisValue + "</br>" + dotHtml + item.data;
|
||||
});
|
||||
return result;
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
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: [
|
||||
{
|
||||
name: "2001",
|
||||
data: ds,
|
||||
type: "bar",
|
||||
barWidth: 24,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: true, //开启显示
|
||||
position: 'top', //在上方显示
|
||||
textStyle: { //数值样式
|
||||
color: '#fff',
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgb(65,117,203,0.4)", // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#3373CC", // 100% 处的颜色#3373CC
|
||||
},
|
||||
],
|
||||
false
|
||||
),
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,167 @@
|
||||
<!--
|
||||
* @Author: xw
|
||||
* @Date: 2021-10-11 18:42:58
|
||||
* @LastEditTime: 2021-11-29 10:48:33
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: 品牌数据
|
||||
* @FilePath: /data-show/src/views/BrandInsight/brandData/index.vue
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="bd-outter" v-loading="load">
|
||||
<v-label-div title="负面数据"></v-label-div>
|
||||
<div class="bd-inner">
|
||||
<div class="bd-o-d1">
|
||||
<div class="d1">
|
||||
<img class="m1" src="../../../assets/images/BrandInsight/ic_warning.png" />
|
||||
<span class="s1">负面数据总量</span>
|
||||
</div>
|
||||
<!-- <a-popover title="负面数据">
|
||||
<template slot="content">
|
||||
<div class="pd-item" v-for="(item,index) in countArr" :key="index">
|
||||
<span>{{item.key}}</span>
|
||||
<span>{{item.value}}</span>
|
||||
</div>
|
||||
</template> -->
|
||||
<span class="s2">{{count}}</span>
|
||||
<!-- </a-popover> -->
|
||||
</div>
|
||||
<div class="bd-o-d1" style="margin-top: 16px">
|
||||
<div class="d1">
|
||||
<img class="m1" src="../../../assets/images/BrandInsight/ic_dx.png" />
|
||||
<span class="s1">舆情整体调性</span>
|
||||
</div>
|
||||
<a-popover title="舆情整体调性">
|
||||
<template slot="content">
|
||||
<template v-for="(item,index) in affObj">
|
||||
<div class="pd-item" :key="index" v-if="index != 'z'">
|
||||
<span v-if="index === 'a'">低级危机</span>
|
||||
<span v-if="index === 'b'">中级危机</span>
|
||||
<span v-if="index === 'c'">高级危机</span>
|
||||
<span>{{item}}</span>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
<span class="s2">
|
||||
<span class="s2-s1" :style="{width: affObj.a/affObj.z * 100 + '%',background: '#CC9D12'}"></span>
|
||||
<span class="s2-s1" :style="{width: affObj.b/affObj.z * 100 + '%',background: '#CC7733'}"></span>
|
||||
<span class="s2-s1" :style="{width: affObj.c/affObj.z * 100 + '%',background: '#CC5B41'}"></span>
|
||||
</span>
|
||||
</a-popover>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getHealthIndex} from "@/api/MyBrand"
|
||||
export default {
|
||||
name: "negativeData",
|
||||
props: ["brand"],
|
||||
data() {
|
||||
return {
|
||||
count: 0,
|
||||
countArr: [],
|
||||
load: false,
|
||||
form: {
|
||||
token: "",
|
||||
sBrand: this.getWarningBrand,
|
||||
sSeriesName: '',
|
||||
},
|
||||
affObj: {
|
||||
a: 0,
|
||||
b: 0,
|
||||
c: 0,
|
||||
z: 0,
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.form.token = this.getToken;
|
||||
this.form.sBrand = this.getWarningBrand.brandname || this.brand;
|
||||
this.form.sSeriesName = this.getWarningSeries || '';
|
||||
this.getData();
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
let obj = Object.assign({}, this.getCtime2, this.form)
|
||||
getHealthIndex(obj).then(res => {
|
||||
let data = res.data;
|
||||
this.countArr = data.crisis || [];
|
||||
this.count = data.crisis[0].value + data.crisis[1].value + data.crisis[2].value;
|
||||
this.affObj.a = data.crisis[0].value || 0;
|
||||
this.affObj.b = data.crisis[1].value || 0;
|
||||
this.affObj.c = data.crisis[2].value || 0;
|
||||
this.affObj.z = this.count;
|
||||
})
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.bd-outter {
|
||||
width: 620px;
|
||||
height: 272px;
|
||||
border: 2px solid #0f2a4d;
|
||||
border-radius: 2px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
.bd-inner {
|
||||
padding: 16px;
|
||||
.bd-o-d1 {
|
||||
width: 588px;
|
||||
height: 88px;
|
||||
border: 1px solid #0f2a4d;
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.d1 {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
.m1 {
|
||||
display: block;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
margin-left: 16px;
|
||||
}
|
||||
.s1 {
|
||||
display: block;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
.s2 {
|
||||
display: block;
|
||||
color: #fff;
|
||||
font-size: 44px;
|
||||
font-family: Bebas;
|
||||
margin-right: 16px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
width: 276px;
|
||||
cursor: pointer;
|
||||
.s2-s1 {
|
||||
display: block;
|
||||
width: 102px;
|
||||
height: 36px;
|
||||
background: #3373cc;
|
||||
margin-right: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.pd-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: #fff;
|
||||
border-bottom: 1px solid #173b6d;
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,115 @@
|
||||
<!--
|
||||
* @Author: xw
|
||||
* @Date: 2021-10-12 09:32:35
|
||||
* @LastEditTime: 2021-12-29 17:11:53
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: 舆情传播趋势
|
||||
* @FilePath: /data-show/src/views/BrandInsight/warnsopo/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="warn-outter" v-loading="load">
|
||||
<div class="warn-inner">
|
||||
<vLabel-div title="危机消息">
|
||||
<a class="more" @click="goMore">更多</a>
|
||||
</vLabel-div>
|
||||
<div class="warn-bd">
|
||||
<dv-scroll-board :config="config" :style="{ width: '100%', height: '29.5rem' }" @click="handlerItem"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getList} from "@/api/MyBrand"
|
||||
export default {
|
||||
name: "",
|
||||
props: ["brand"],
|
||||
data() {
|
||||
return {
|
||||
load: false,
|
||||
config: {},
|
||||
darr: [],
|
||||
form: {
|
||||
token: '',
|
||||
sBrand: '',
|
||||
sSeriesName: '',
|
||||
sQingGan: 2,
|
||||
sCrisis: '',
|
||||
iPageIndex: 1,
|
||||
iPageSize: 100,
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.form.token = this.getToken;
|
||||
this.form.sBrand = this.getWarningBrand.brandname || this.brand ;
|
||||
this.form.sSeriesName = this.getWarningSeries || '';
|
||||
this.getData();
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
let obj = Object.assign({}, this.getCtime2, this.form)
|
||||
getList(obj).then(res => {
|
||||
let data = res.data || [];
|
||||
let arr = [];
|
||||
let arr2 = [];
|
||||
data.forEach((ele) => {
|
||||
let a = [
|
||||
`<span style='cursor: pointer;'>${ele._source.title}</span>`,
|
||||
ele._source.carseries,
|
||||
ele._source.affections == 1?'初级危机':ele._source.affections == 2?'中级危机':'高级危机'
|
||||
];
|
||||
let b = [
|
||||
`<span style='cursor: pointer;'>${ele._source.title}</span>`,
|
||||
ele._source.carseries,
|
||||
ele._source.affections == 1?'初级危机':ele._source.affections == 2?'中级危机':'高级危机',
|
||||
ele._source.id
|
||||
];
|
||||
arr.push(a);
|
||||
arr2.push(b);
|
||||
});
|
||||
this.darr = arr2;
|
||||
this.config = {
|
||||
headerBGC: "rgba(16,33,59)",
|
||||
oddRowBGC: "#173b6d",
|
||||
evenRowBGC: "rgba(69, 149, 244, 0)",
|
||||
columnWidth: [410,110,100],
|
||||
rowNum: 11,
|
||||
header: ["事件列表", "关联车型", "调性"],
|
||||
data: arr,
|
||||
};
|
||||
})
|
||||
},
|
||||
handlerItem() {
|
||||
|
||||
},
|
||||
goMore() {
|
||||
this.$router.push("/moreWarning");
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.warn-outter {
|
||||
width: 618px;
|
||||
// height: 560px;
|
||||
margin-left: 16px;
|
||||
.warn-inner {
|
||||
width: 100%;
|
||||
height: 540px;
|
||||
margin-top: 16px;
|
||||
border: 2px solid #0f2a4d;
|
||||
.warn-bd {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
}
|
||||
.more {
|
||||
font-size: 16px;
|
||||
font-family: PingFangSC-Semibold, PingFang SC;
|
||||
font-weight: 600;
|
||||
color: #AAAAAA;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue