|
|
<!--
|
|
|
* @Version: 1.0
|
|
|
* @Author: kery.chen
|
|
|
* @Description: 总体概览左侧
|
|
|
* @Date: 2021-11-30 11:08:50
|
|
|
-->
|
|
|
<template>
|
|
|
<div class="container">
|
|
|
<div class="module-container">
|
|
|
<div class="section">
|
|
|
<module-title>舆情走势图</module-title>
|
|
|
<div id="lineBox"></div>
|
|
|
</div>
|
|
|
<div class="section section-superviseObject">
|
|
|
<module-title>舆情信息量统计</module-title>
|
|
|
<div class="Statistics">
|
|
|
<div
|
|
|
v-for="item in Statistics"
|
|
|
:key="item.type"
|
|
|
class="StatisticsInfo"
|
|
|
>
|
|
|
<img :src="item.url" alt="" />
|
|
|
<span
|
|
|
style="cursor: pointer"
|
|
|
@click="clickDetails(item.name, item.type, item.flag)"
|
|
|
>
|
|
|
{{ item.name }}</span
|
|
|
>
|
|
|
<!-- <el-progress
|
|
|
:percentage="item.value || 0"
|
|
|
:color="item.color"
|
|
|
></el-progress> -->
|
|
|
<el-progress
|
|
|
:percentage="Number(item.info)"
|
|
|
:color="item.color"
|
|
|
></el-progress>
|
|
|
<div class="StatisticsText">
|
|
|
<!-- {{ item.info | commaFilter }} -->
|
|
|
{{ item.info }}
|
|
|
<div class="StatisticsText-2">条</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div
|
|
|
class="section section-securityMonitor"
|
|
|
style="padding-top: 35px"
|
|
|
@mouseover="mouseOver"
|
|
|
@mouseleave="mouseLeave"
|
|
|
>
|
|
|
<module-title
|
|
|
>舆情分类
|
|
|
<div slot="operate" class="btn-wrap">
|
|
|
<div
|
|
|
v-for="(item, idx) in sentimeentList.options"
|
|
|
:key="idx"
|
|
|
class="btn"
|
|
|
:class="{ active: currentIndex === idx }"
|
|
|
@click="currentIndex = idx"
|
|
|
>
|
|
|
{{ item }}
|
|
|
<div :class="[idx === 0 ? 'topIP' : 'distributed']" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</module-title>
|
|
|
<media-pie v-show="currentIndex === 0"></media-pie>
|
|
|
<sentimentPie v-show="currentIndex === 1"></sentimentPie>
|
|
|
</div>
|
|
|
<div class="section section-attackRanking" style="padding-top: 35px">
|
|
|
<module-title>动态筛选</module-title>
|
|
|
<div style="padding-top: 35px">
|
|
|
<div class="left-box">
|
|
|
<div class="yellow"></div>
|
|
|
<div class="blue"></div>
|
|
|
<div class="sx"></div>
|
|
|
</div>
|
|
|
<div class="right_box">
|
|
|
<div class="yellow_box">
|
|
|
<div class="yI">监测信息总量</div>
|
|
|
<!-- :value="newsCount"
|
|
|
:step="oldNewsCount" -->
|
|
|
<NumberGrow
|
|
|
class="yV"
|
|
|
:value="dtsx.jcCount"
|
|
|
:step="oldNewsCount"
|
|
|
></NumberGrow>
|
|
|
</div>
|
|
|
<div class="blue_box">
|
|
|
<div class="bI">排除信息量</div>
|
|
|
<!-- :value="newsCount - warningCount" -->
|
|
|
<NumberGrow
|
|
|
class="bV"
|
|
|
:value="dtsx.pcCount"
|
|
|
:step="oldNewsCount - oldWarningCount"
|
|
|
></NumberGrow>
|
|
|
</div>
|
|
|
<div class="total">
|
|
|
<div class="name">舆情预警</div>
|
|
|
<div class="warn">
|
|
|
{{ dtsx.yqCount }}
|
|
|
</div>
|
|
|
<div class="total_info">
|
|
|
<!-- :value="warningCount" -->
|
|
|
<NumberGrow
|
|
|
:value="dtsx.yqZb"
|
|
|
:step="oldWarningCount"
|
|
|
></NumberGrow>
|
|
|
</div>
|
|
|
<div class="percent">%</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 舆情信息量统计 -->
|
|
|
<el-dialog
|
|
|
v-if="dialogStatus"
|
|
|
:title="dialogTitle"
|
|
|
class="screen-dialog"
|
|
|
:visible.sync="dialogStatus"
|
|
|
width="1820px"
|
|
|
:modal-append-to-body="false"
|
|
|
center
|
|
|
:modal="false"
|
|
|
>
|
|
|
<div style="height: 760px">
|
|
|
<el-table
|
|
|
:data="currentPageData"
|
|
|
height="740"
|
|
|
highlight-current-row
|
|
|
@row-click="rowClick"
|
|
|
>
|
|
|
<el-table-column
|
|
|
label="序号"
|
|
|
type="index"
|
|
|
width="80"
|
|
|
align="center"
|
|
|
/>
|
|
|
<template v-for="item in tableHeader">
|
|
|
<el-table-column
|
|
|
v-if="item.key !== '序号'"
|
|
|
:key="item.value"
|
|
|
:prop="item.value"
|
|
|
:style="item.width ? 'width:' + item.width + 'px' : ''"
|
|
|
show-overflow-tooltip
|
|
|
:label="item.key"
|
|
|
>
|
|
|
</el-table-column>
|
|
|
</template>
|
|
|
</el-table>
|
|
|
<div style="text-align: right">
|
|
|
<paginations
|
|
|
v-show="total > 0"
|
|
|
:total="total"
|
|
|
:page.sync="queryData.pageNum"
|
|
|
:limit.sync="queryData.pageSize"
|
|
|
@pagination="showAttack"
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
<span slot="footer" class="dialog-footer">
|
|
|
<span>
|
|
|
<el-button class="dialog-btn" @click="dialogClose">关 闭 </el-button>
|
|
|
</span>
|
|
|
</span>
|
|
|
</el-dialog>
|
|
|
<el-dialog
|
|
|
v-if="dialogDetails"
|
|
|
:title="dialogTitle"
|
|
|
class="screen-dialog"
|
|
|
:visible.sync="dialogDetails"
|
|
|
width="1260px"
|
|
|
:modal-append-to-body="false"
|
|
|
center
|
|
|
:modal="false"
|
|
|
>
|
|
|
<div style="padding: 0 0 0 80px; height: 730px; overflow: auto">
|
|
|
<el-row>
|
|
|
<el-col :span="3" class="detail_title">标题：</el-col>
|
|
|
<el-col :span="21" class="detail_text">{{ rowDta.title }}</el-col>
|
|
|
</el-row>
|
|
|
<el-row>
|
|
|
<el-col :span="3" class="detail_title">内容：</el-col>
|
|
|
<el-col :span="21" class="detail_text">{{
|
|
|
rowDta.content || ""
|
|
|
}}</el-col>
|
|
|
</el-row>
|
|
|
<el-row>
|
|
|
<el-col :span="3" class="detail_title">来源：</el-col>
|
|
|
<el-col :span="21" class="detail_text">{{ rowDta.source }}</el-col>
|
|
|
</el-row>
|
|
|
<el-row>
|
|
|
<el-col :span="3" class="detail_title">时间：</el-col>
|
|
|
<el-col :span="21" class="detail_text">{{ rowDta.dateTime }}</el-col>
|
|
|
</el-row>
|
|
|
</div>
|
|
|
<span slot="footer" class="dialog-footer">
|
|
|
<span>
|
|
|
<el-button class="dialog-btn" @click="dialogDetails = false"
|
|
|
>关 闭</el-button
|
|
|
>
|
|
|
</span>
|
|
|
</span>
|
|
|
</el-dialog>
|
|
|
<!-- <div class="left"></div> -->
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { echartsJump } from "../../../../../public/static/echartsJump";
|
|
|
import ModuleTitle from "../../common/ModuleTitle.vue";
|
|
|
import sentimentPie from "./sentimentPie.vue";
|
|
|
import mediaPie from "./mediaPie.vue";
|
|
|
import NumberGrow from "./NumberGrow.vue";
|
|
|
import {
|
|
|
publicOpinionTrendChart,
|
|
|
statisticsOfPublicOpinionInformation,
|
|
|
allProjects,
|
|
|
newsList,
|
|
|
opinionWarningDetail,
|
|
|
newswarningList,
|
|
|
loaclMedia,
|
|
|
} from "@/api/common";
|
|
|
import { title } from "../../../../settings";
|
|
|
//=======
|
|
|
import { yuqingChart, yuqingMsgStats, dtsxListGet } from "@/api/publicOpinion";
|
|
|
import { yuqingListA, getWlyq } from "@/api/consensusList";
|
|
|
import {
|
|
|
listYqzs,
|
|
|
listYqxxlnum,
|
|
|
listYqxxltj,
|
|
|
getYqxxltj,
|
|
|
listDtsx,
|
|
|
} from "@/api/netWorkYq";
|
|
|
|
|
|
export default {
|
|
|
components: {
|
|
|
ModuleTitle,
|
|
|
sentimentPie,
|
|
|
mediaPie,
|
|
|
NumberGrow,
|
|
|
},
|
|
|
filters: {
|
|
|
commaFilter(target) {
|
|
|
return String(target).replace(/(\d)(?=(\d{3})+$)/g, "$1,");
|
|
|
},
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
currentIndex: 0,
|
|
|
percentage: 40,
|
|
|
Statistics: [
|
|
|
// {
|
|
|
// value: 1,
|
|
|
// name: '监测信息量',
|
|
|
// info: '2454',
|
|
|
// color: '#47c4f9',
|
|
|
// url: require('@/assets/sentimeent/舆情icon-1.png')
|
|
|
// },
|
|
|
{
|
|
|
flag: false,
|
|
|
name: "本地相关信息量",
|
|
|
info: "0",
|
|
|
color: "#4799f8",
|
|
|
url: require("@/assets/sentimeent/舆情icon-2.png"),
|
|
|
type: 1,
|
|
|
},
|
|
|
{
|
|
|
flag: false,
|
|
|
name: "本地敏感信息量",
|
|
|
info: "0",
|
|
|
color: "#ff5432",
|
|
|
url: require("@/assets/sentimeent/舆情icon-5.png"),
|
|
|
type: 2,
|
|
|
},
|
|
|
{
|
|
|
flag: false,
|
|
|
name: "推送预警信息量",
|
|
|
info: "0",
|
|
|
color: "#ffed61",
|
|
|
url: require("@/assets/sentimeent/舆情icon-4.png"),
|
|
|
type: 3,
|
|
|
},
|
|
|
{
|
|
|
flag: false,
|
|
|
name: "聚焦本地媒体量",
|
|
|
info: "0",
|
|
|
color: "#20b028",
|
|
|
url: require("@/assets/sentimeent/舆情icon-3.png"),
|
|
|
type: 4,
|
|
|
},
|
|
|
],
|
|
|
Warning: [
|
|
|
{
|
|
|
value: 1,
|
|
|
name: "舆情预警标题舆情预警标题舆情预警标题舆情预警标题舆情舆情预警标题舆情预警标题舆情预警标题舆情预警标题舆情舆情预警标题舆情预警标题舆情预警标题舆情预警标题舆情舆情预警标题舆情预警标题舆情预警标题舆情预警标题舆情",
|
|
|
time: "2021-12-13 13:30:20",
|
|
|
from: "舆情来源",
|
|
|
},
|
|
|
{
|
|
|
value: 2,
|
|
|
name: "舆情预警标题舆情预警标题舆情预警标题舆情预警标题舆情舆情预警标题舆情预警标题舆情预警标题舆情预警标题舆情舆情预警标题舆情预警标题舆情预警标题舆情预警标题舆情舆情预警标题舆情预警标题舆情预警标题舆情预警标题舆情",
|
|
|
time: "2021-12-13 13:30:20",
|
|
|
from: "舆情来源",
|
|
|
},
|
|
|
{
|
|
|
value: 3,
|
|
|
name: "舆情预警标题舆情预警标题舆情预警标题舆情预警标题舆情舆情预警标题舆情预警标题舆情预警标题舆情预警标题舆情舆情预警标题舆情预警标题舆情预警标题舆情预警标题舆情舆情预警标题舆情预警标题舆情预警标题舆情预警标题舆情",
|
|
|
time: "2021-12-13 13:30:20",
|
|
|
from: "舆情来源",
|
|
|
},
|
|
|
{
|
|
|
value: 4,
|
|
|
name: "舆情预警标题舆情预警标题舆情预警标题舆情预警标题舆情舆情预警标题舆情预警标题舆情预警标题舆情预警标题舆情舆情预警标题舆情预警标题舆情预警标题舆情预警标题舆情舆情预警标题舆情预警标题舆情预警标题舆情预警标题舆情",
|
|
|
time: "2021-12-13 13:30:20",
|
|
|
from: "舆情来源",
|
|
|
},
|
|
|
],
|
|
|
sentimeentList: {
|
|
|
options: ["媒体类型", "涉事类型"],
|
|
|
},
|
|
|
dialogStatus: false,
|
|
|
totalPage: 1, // 统共页数，默认为1
|
|
|
total: 1, // 统共页数，默认为1
|
|
|
currentPage: 1, // 当前页数 ，默认为1
|
|
|
pageSize: 10, // 每页显示数量
|
|
|
currentPageData: [], // 当前页显示内容
|
|
|
tableHeader: [],
|
|
|
tableData: [],
|
|
|
dialogTitle: "",
|
|
|
dialogDetails: false,
|
|
|
rowDta: {},
|
|
|
opinionTime: [],
|
|
|
|
|
|
obj: {
|
|
|
locNewsTotal: "本地相关信息量",
|
|
|
// '监测信息量': '监测信息量',
|
|
|
locNegTotal: "本地敏感信息量",
|
|
|
推送预警量: "推送预警信息量",
|
|
|
本地媒体量: "聚焦本地媒体量",
|
|
|
},
|
|
|
newsCount: 0,
|
|
|
warningCount: 0,
|
|
|
oldNewsCount: 0,
|
|
|
oldWarningCount: 0,
|
|
|
filterTime: "",
|
|
|
//=================
|
|
|
jcMsgData: {},
|
|
|
queryData: {
|
|
|
pageNum: 1,
|
|
|
pageSize: 10,
|
|
|
type: "",
|
|
|
isStatus: 1,
|
|
|
},
|
|
|
//将敏感和非敏感区分开来
|
|
|
positiveOpinion: [],
|
|
|
negativeOpinion: [],
|
|
|
allDate: [],
|
|
|
date: [],
|
|
|
newDate: [],
|
|
|
dtsx: {},
|
|
|
//========
|
|
|
listTotal: 0,
|
|
|
};
|
|
|
},
|
|
|
computed: {},
|
|
|
watch: {
|
|
|
newsCount(newVal, oldVal) {
|
|
|
this.oldNewsCount = oldVal;
|
|
|
},
|
|
|
warningCount(newVal, oldVal) {
|
|
|
this.oldWarningCount = oldVal;
|
|
|
},
|
|
|
},
|
|
|
created() {
|
|
|
// 获取舆情信息量统计
|
|
|
this.getyqMsgStats();
|
|
|
},
|
|
|
destroyed() {
|
|
|
clearInterval(this.attackTime); // 清除定时器
|
|
|
},
|
|
|
mounted() {
|
|
|
this.changeBtn();
|
|
|
// this.getFilterData();
|
|
|
//舆情走势图
|
|
|
this.getyqData();
|
|
|
},
|
|
|
beforeDestroy() {
|
|
|
clearInterval(this.filterTime);
|
|
|
},
|
|
|
methods: {
|
|
|
initTime() {
|
|
|
const timeArr = [];
|
|
|
for (let i = 0; i < 7; i++) {
|
|
|
const time = new Date(new Date().setDate(new Date().getDate() + i - 7));
|
|
|
const month = `${time.getMonth() + 1}`.slice(-2);
|
|
|
const strDate = `${time.getDate()}`.slice(-2);
|
|
|
timeArr.push(`${month}.${strDate}`);
|
|
|
}
|
|
|
return timeArr;
|
|
|
},
|
|
|
// getFilterData() {
|
|
|
// this.filterTime = setInterval(() => {
|
|
|
// this.getData();
|
|
|
// }, 600000);
|
|
|
// },
|
|
|
// getData() {
|
|
|
// statisticsOfPublicOpinionInformation().then((res) => {
|
|
|
// res["T_GET_PARAMETER[]"].forEach((item) => {
|
|
|
// if (item.NAME === "newsCount") {
|
|
|
// this.newsCount = item.CODE;
|
|
|
// }
|
|
|
// if (item.NAME === "warningCount") {
|
|
|
// this.warningCount = item.CODE;
|
|
|
// }
|
|
|
// });
|
|
|
// });
|
|
|
// },
|
|
|
// 自动切换
|
|
|
// 鼠标经过暂停
|
|
|
mouseOver() {
|
|
|
clearInterval(this.attackTime);
|
|
|
},
|
|
|
// 鼠标离开开启
|
|
|
mouseLeave() {
|
|
|
this.changeBtn();
|
|
|
},
|
|
|
// 自动切换
|
|
|
changeBtn() {
|
|
|
this.attackTime = setInterval(() => {
|
|
|
this.currentIndex === 0
|
|
|
? (this.currentIndex = 1)
|
|
|
: (this.currentIndex = 0);
|
|
|
}, 11000);
|
|
|
},
|
|
|
// 获取舆情走势图的数据
|
|
|
getyqData() {
|
|
|
listYqzs().then((res) => {
|
|
|
console.log(res);
|
|
|
this.allDate = res.rows;
|
|
|
//已经排序过的数组
|
|
|
this.allDate.sort(function (a, b) {
|
|
|
return new Date(a.dateTime) - new Date(b.dateTime);
|
|
|
});
|
|
|
this.allDate.forEach((value) => {
|
|
|
//把日期存储起来
|
|
|
this.newDate.push(this.$moment(value.dateTime).format("MM-DD"));
|
|
|
this.positiveOpinion.push(value.count1);
|
|
|
this.negativeOpinion.push(value.count2);
|
|
|
});
|
|
|
this.lineBox();
|
|
|
});
|
|
|
},
|
|
|
// 获取舆情信息量统计
|
|
|
getyqMsgStats() {
|
|
|
listYqxxlnum().then((res) => {
|
|
|
if (res.rows.length > 0) {
|
|
|
if (res.rows[0].count1) {
|
|
|
this.Statistics[0].info = res.rows[0].count1;
|
|
|
this.Statistics[0].flag = true;
|
|
|
} else {
|
|
|
this.wlyqListNums(0, this.Statistics[0].type);
|
|
|
}
|
|
|
if (res.rows[0].count2) {
|
|
|
this.Statistics[1].info = res.rows[0].count2;
|
|
|
this.Statistics[1].flag = true;
|
|
|
}else{
|
|
|
this.wlyqListNums(1, this.Statistics[1].type);
|
|
|
}
|
|
|
if (res.rows[0].count3) {
|
|
|
this.Statistics[2].info = res.rows[0].count3;
|
|
|
this.Statistics[2].flag = true;
|
|
|
}else{
|
|
|
this.wlyqListNums(2, this.Statistics[2].type);
|
|
|
}
|
|
|
if (res.rows[0].count4) {
|
|
|
this.Statistics[3].info = res.rows[0].count4;
|
|
|
this.Statistics[3].flag = true;
|
|
|
}else{
|
|
|
this.wlyqListNums(3, this.Statistics[3].type);
|
|
|
}
|
|
|
}else{
|
|
|
this.wlyqListNums(0, this.Statistics[0].type);
|
|
|
this.wlyqListNums(1, this.Statistics[1].type);
|
|
|
this.wlyqListNums(2, this.Statistics[2].type);
|
|
|
this.wlyqListNums(3, this.Statistics[3].type);
|
|
|
}
|
|
|
});
|
|
|
//动态筛选
|
|
|
listDtsx().then((res) => {
|
|
|
this.dtsx = res.rows[0];
|
|
|
this.dtsx.jcCount = this.dtsx.jcCount ? Number(this.dtsx.jcCount) : 0;
|
|
|
this.dtsx.pcCount = this.dtsx.pcCount ? Number(this.dtsx.pcCount) : 0;
|
|
|
this.dtsx.yqCount = this.dtsx.yqCount
|
|
|
? Number(this.dtsx.yqCount)
|
|
|
: this.dtsx.jcCount - this.dtsx.pcCount;
|
|
|
this.dtsx.yqZb = this.dtsx.yqZb
|
|
|
? this.dtsx.yqZb
|
|
|
: Math.round((this.dtsx.yqCount / this.dtsx.jcCount) * 100);
|
|
|
});
|
|
|
},
|
|
|
// 折线图
|
|
|
lineBox() {
|
|
|
const myChart = this.$echarts.init(document.getElementById("lineBox"));
|
|
|
const options = {
|
|
|
grid: {
|
|
|
top: "20%",
|
|
|
bottom: "15%",
|
|
|
left: "17%",
|
|
|
right: "1%",
|
|
|
},
|
|
|
legend: {
|
|
|
data: ["非敏感", "敏感"],
|
|
|
top: "3%",
|
|
|
right: "2%",
|
|
|
itemHeight: 10,
|
|
|
itemWidth: 10,
|
|
|
textStyle: {
|
|
|
padding: [10, 30, 10, 14],
|
|
|
color: "rgba(250,250,250,1)",
|
|
|
fontSize: 28,
|
|
|
},
|
|
|
},
|
|
|
tooltip: {
|
|
|
trigger: "item",
|
|
|
formatter: "{a} <br/>{b} : {c} ",
|
|
|
axisPointer: {
|
|
|
lineStyle: {
|
|
|
width: 0,
|
|
|
},
|
|
|
},
|
|
|
backgroundColor: "#fff",
|
|
|
textStyle: {
|
|
|
color: "#5c6c7c",
|
|
|
},
|
|
|
},
|
|
|
xAxis: {
|
|
|
data: this.newDate,
|
|
|
// data: ['7.23', '7.24', '7.25', '7.26', '7.27', '7.28', '7.29'],
|
|
|
axisLine: {
|
|
|
show: true, // 隐藏X轴轴线
|
|
|
lineStyle: {
|
|
|
color: "rgb(119,123,132,1)",
|
|
|
width: 1,
|
|
|
},
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: true, // 隐藏X轴刻度
|
|
|
length: 0.2,
|
|
|
},
|
|
|
axisLabel: {
|
|
|
show: true,
|
|
|
interval: 0, // 强制显示文字
|
|
|
// rotate: 40,
|
|
|
padding: [20, 0, 0, 0],
|
|
|
// margin: 15,
|
|
|
// position: [100, 100],
|
|
|
textStyle: {
|
|
|
color: "#6ddefb", // X轴文字颜色
|
|
|
fontSize: 28,
|
|
|
},
|
|
|
},
|
|
|
grid: {
|
|
|
left: "50%",
|
|
|
bottom: "35%",
|
|
|
},
|
|
|
// splitArea: {
|
|
|
// interval: 0,
|
|
|
// show: true,
|
|
|
// areaStyle: {
|
|
|
// color: ['rgba(250,250,250,0.1)', 'rgba(250,250,250,0)']
|
|
|
// }
|
|
|
// }
|
|
|
},
|
|
|
yAxis: [
|
|
|
{
|
|
|
name: "单位:件",
|
|
|
min: 0,
|
|
|
// max: 3500,
|
|
|
splitNumber: 7,
|
|
|
type: "value",
|
|
|
nameTextStyle: {
|
|
|
padding: [10, 0, 10, 0],
|
|
|
color: "rgb(255,255,255,1)",
|
|
|
fontSize: 28,
|
|
|
left: 20,
|
|
|
},
|
|
|
splitLine: {
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
|
type: "dashed",
|
|
|
color: "rgba(77, 128, 254, 0.4)",
|
|
|
width: 1,
|
|
|
},
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: true,
|
|
|
},
|
|
|
axisLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisLabel: {
|
|
|
show: true,
|
|
|
textStyle: {
|
|
|
color: "rgba(250,250,250,1)",
|
|
|
fontSize: 28,
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
series: [
|
|
|
{
|
|
|
name: "非敏感",
|
|
|
type: "bar",
|
|
|
barWidth: 12,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: "#38c5ff",
|
|
|
},
|
|
|
},
|
|
|
data: this.positiveOpinion,
|
|
|
// data: [70, 50, 70, 60, 30, 40, 70]
|
|
|
},
|
|
|
{
|
|
|
name: "敏感",
|
|
|
type: "bar",
|
|
|
barWidth: 12,
|
|
|
itemStyle: {
|
|
|
color: "#fc6a31",
|
|
|
},
|
|
|
data: this.negativeOpinion,
|
|
|
// data: [30, 10, 70, 64, 60, 10, 20]
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
myChart.setOption(options, true);
|
|
|
echartsJump(myChart, options);
|
|
|
},
|
|
|
//点击显示弹出框列表
|
|
|
clickDetails(val, type, flag) {
|
|
|
this.tableHeader = [
|
|
|
{ key: "标题", value: "title" },
|
|
|
{ key: "来源", width: 120, value: "source" },
|
|
|
{ key: "时间", width: 200, value: "dateTime" },
|
|
|
];
|
|
|
this.queryData = {
|
|
|
pageNum: 1,
|
|
|
pageSize: 10,
|
|
|
type,
|
|
|
isStatus: 1,
|
|
|
};
|
|
|
this.dialogTitle = val;
|
|
|
if (!flag) {
|
|
|
this.wlyqList();
|
|
|
}
|
|
|
},
|
|
|
// 获取网络舆情list表
|
|
|
wlyqListNums(a,b) {
|
|
|
listYqxxltj({ type: b }).then((res) => {
|
|
|
this.Statistics[a].info = res.total;
|
|
|
});
|
|
|
},
|
|
|
// 获取网络舆情list表
|
|
|
wlyqList() {
|
|
|
listYqxxltj(this.queryData).then((res) => {
|
|
|
this.currentPageData = res.rows;
|
|
|
this.total = res.total;
|
|
|
this.dialogStatus = true;
|
|
|
});
|
|
|
},
|
|
|
//更换页数页码
|
|
|
showAttack(e) {
|
|
|
this.queryData.pageNum = e.page;
|
|
|
this.queryData.pageSize = e.limit;
|
|
|
this.wlyqList();
|
|
|
},
|
|
|
rowClick(row) {
|
|
|
this.dialogDetails = true;
|
|
|
getYqxxltj(row.id).then((res) => {
|
|
|
this.rowDta = res.data;
|
|
|
});
|
|
|
},
|
|
|
dialogClose() {
|
|
|
this.dialogStatus = false;
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.detail_title {
|
|
|
font-size: 28px;
|
|
|
font-family: SourceHanSansCN-Regular;
|
|
|
color: #fff;
|
|
|
margin: 20px 0;
|
|
|
}
|
|
|
.detail_text {
|
|
|
font-size: 28px;
|
|
|
font-family: SourceHanSansCN-Regular;
|
|
|
color: #fff;
|
|
|
margin: 20px 0;
|
|
|
}
|
|
|
::v-deep .el-progress-bar__outer {
|
|
|
width: 531px;
|
|
|
height: 12px;
|
|
|
border-radius: 6px;
|
|
|
}
|
|
|
::v-deep .el-progress__text {
|
|
|
display: none;
|
|
|
}
|
|
|
.container {
|
|
|
width: 100%;
|
|
|
height: 960px;
|
|
|
position: relative;
|
|
|
.module-container {
|
|
|
width: 1482px;
|
|
|
height: 960px;
|
|
|
margin: 120px 0 0 60px;
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
justify-content: space-between;
|
|
|
align-content: flex-start;
|
|
|
|
|
|
.section {
|
|
|
width: 720px;
|
|
|
height: 415px;
|
|
|
margin-bottom: 63px;
|
|
|
// border: 1px solid #ddd;
|
|
|
|
|
|
.txtPinyin {
|
|
|
font-family: ConthraxSb-Regular;
|
|
|
font-size: 20px;
|
|
|
font-weight: normal;
|
|
|
font-stretch: normal;
|
|
|
line-height: 32px;
|
|
|
letter-spacing: 1px;
|
|
|
color: rgba(#fff, 0.5);
|
|
|
margin-left: 10px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.left-box {
|
|
|
position: relative;
|
|
|
}
|
|
|
.sx {
|
|
|
width: 300px;
|
|
|
height: 400px;
|
|
|
background: url("~@/assets/sentimeent/筛选效果.png") no-repeat center;
|
|
|
position: absolute;
|
|
|
top: 0px;
|
|
|
left: 95px;
|
|
|
}
|
|
|
|
|
|
.yellow {
|
|
|
width: 400px;
|
|
|
height: 60px;
|
|
|
background: url("~@/assets/sentimeent/黄网.png") no-repeat center;
|
|
|
position: absolute;
|
|
|
left: 50px;
|
|
|
top: 40px;
|
|
|
}
|
|
|
|
|
|
.blue {
|
|
|
width: 313px;
|
|
|
height: 47px;
|
|
|
background: url("~@/assets/sentimeent/蓝网.png") no-repeat center;
|
|
|
position: absolute;
|
|
|
left: 100px;
|
|
|
top: 130px;
|
|
|
}
|
|
|
.right_box {
|
|
|
position: relative;
|
|
|
.yellow_box {
|
|
|
width: 243px;
|
|
|
height: 54px;
|
|
|
background: url("~@/assets/sentimeent/黄备注.png") no-repeat left;
|
|
|
position: absolute;
|
|
|
top: 21px;
|
|
|
right: 40px;
|
|
|
|
|
|
.yI {
|
|
|
width: 200px;
|
|
|
height: 19px;
|
|
|
font-family: SourceHanSansCN-Regular;
|
|
|
font-size: 32px;
|
|
|
font-weight: normal;
|
|
|
font-stretch: normal;
|
|
|
line-height: 19px;
|
|
|
color: #ffffff;
|
|
|
opacity: 0.9;
|
|
|
position: absolute;
|
|
|
right: 0px;
|
|
|
left: 110px;
|
|
|
top: 5px;
|
|
|
}
|
|
|
|
|
|
.yV {
|
|
|
width: 83px;
|
|
|
height: 23px;
|
|
|
font-family: DIN-Medium;
|
|
|
font-size: 32px;
|
|
|
font-weight: normal;
|
|
|
font-stretch: normal;
|
|
|
line-height: 23px;
|
|
|
letter-spacing: 0px;
|
|
|
color: #ffffff;
|
|
|
position: absolute;
|
|
|
right: 20px;
|
|
|
top: 35px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.blue_box {
|
|
|
width: 223px;
|
|
|
height: 54px;
|
|
|
background: url("~@/assets/sentimeent/蓝备注.png") no-repeat left;
|
|
|
position: absolute;
|
|
|
top: 110px;
|
|
|
right: 90px;
|
|
|
.bI {
|
|
|
width: 160px;
|
|
|
height: 19px;
|
|
|
font-family: SourceHanSansCN-Regular;
|
|
|
font-size: 32px;
|
|
|
font-weight: normal;
|
|
|
font-stretch: normal;
|
|
|
line-height: 54px;
|
|
|
letter-spacing: 0px;
|
|
|
color: #ffffff;
|
|
|
opacity: 0.9;
|
|
|
position: absolute;
|
|
|
top: -8px;
|
|
|
left: 130px;
|
|
|
}
|
|
|
.bV {
|
|
|
width: 83px;
|
|
|
height: 23px;
|
|
|
font-family: DIN-Medium;
|
|
|
font-size: 32px;
|
|
|
font-weight: normal;
|
|
|
font-stretch: normal;
|
|
|
line-height: 54px;
|
|
|
letter-spacing: 0px;
|
|
|
color: #ffffff;
|
|
|
position: absolute;
|
|
|
top: 36px;
|
|
|
left: 150px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.total {
|
|
|
width: 292px;
|
|
|
height: 141px;
|
|
|
background: url("~@/assets/sentimeent/bg-筛选.png");
|
|
|
position: absolute;
|
|
|
right: 64px;
|
|
|
top: 230px;
|
|
|
.name {
|
|
|
width: 120px;
|
|
|
height: 23px;
|
|
|
font-family: SourceHanSansCN-Regular;
|
|
|
font-size: 28px;
|
|
|
line-height: 54px;
|
|
|
color: #ffffff;
|
|
|
opacity: 0.8;
|
|
|
position: absolute;
|
|
|
left: 42px;
|
|
|
top: 10px;
|
|
|
}
|
|
|
.warn {
|
|
|
width: 106px;
|
|
|
height: 43px;
|
|
|
font-family: DIN-Medium;
|
|
|
font-size: 60px;
|
|
|
line-height: 54px;
|
|
|
color: #ffe21c;
|
|
|
position: absolute;
|
|
|
top: 66px;
|
|
|
left: 38px;
|
|
|
}
|
|
|
.total_info {
|
|
|
width: 31px;
|
|
|
height: 23px;
|
|
|
font-size: 32px;
|
|
|
line-height: 54px;
|
|
|
color: #ffffff;
|
|
|
position: absolute;
|
|
|
top: 10px;
|
|
|
right: 75px;
|
|
|
}
|
|
|
.percent {
|
|
|
width: 21px;
|
|
|
height: 18px;
|
|
|
font-family: SourceHanSansCN-Regular;
|
|
|
font-size: 24px;
|
|
|
line-height: 54px;
|
|
|
color: #ffffff;
|
|
|
opacity: 0.5;
|
|
|
position: absolute;
|
|
|
top: 72px;
|
|
|
right: 77px;
|
|
|
}
|
|
|
}
|
|
|
.right {
|
|
|
width: 140px;
|
|
|
height: 833px;
|
|
|
background: #000;
|
|
|
position: absolute;
|
|
|
background: url("~@/assets/sentimeent/右.png");
|
|
|
top: 50px;
|
|
|
left: 0px;
|
|
|
}
|
|
|
#lineBox {
|
|
|
width: 720px;
|
|
|
height: 400px;
|
|
|
background: url("~@/assets/sentimeent/柱状-12月-bg.png") no-repeat;
|
|
|
}
|
|
|
.Statistics {
|
|
|
width: 652px;
|
|
|
height: 348px;
|
|
|
margin: 39px 49px 0px 19px;
|
|
|
}
|
|
|
.StatisticsInfo {
|
|
|
font-family: SourceHanSansCN-Regular;
|
|
|
font-size: 32px;
|
|
|
font-weight: normal;
|
|
|
font-stretch: normal;
|
|
|
color: #ffffff;
|
|
|
// opacity: 0.5;
|
|
|
position: relative;
|
|
|
margin-bottom: 24px;
|
|
|
}
|
|
|
.StatisticsText {
|
|
|
text-align: right;
|
|
|
width: 78px;
|
|
|
font-family: DIN-Medium;
|
|
|
font-size: 32px;
|
|
|
font-weight: normal;
|
|
|
font-stretch: normal;
|
|
|
letter-spacing: 0px;
|
|
|
color: #ffffff;
|
|
|
position: absolute;
|
|
|
right: 20px;
|
|
|
top: 30px;
|
|
|
}
|
|
|
.StatisticsText-2 {
|
|
|
font-family: SourceHanSansCN-Regular;
|
|
|
font-size: 25px;
|
|
|
font-weight: normal;
|
|
|
font-stretch: normal;
|
|
|
position: absolute;
|
|
|
// opacity: 0.5;
|
|
|
right: -30px;
|
|
|
top: 5px;
|
|
|
}
|
|
|
.line {
|
|
|
width: 642px;
|
|
|
height: 348px;
|
|
|
margin: 27px 0 0 30px;
|
|
|
position: relative;
|
|
|
}
|
|
|
.lineInfo {
|
|
|
width: 646px;
|
|
|
height: 80px;
|
|
|
background: url("~@/assets/sentimeent/bg-舆情预警.png") no-repeat center;
|
|
|
position: relative;
|
|
|
margin-bottom: 20px;
|
|
|
}
|
|
|
.lineText {
|
|
|
width: 563px;
|
|
|
height: 20px;
|
|
|
margin: 0 28px 0 51px;
|
|
|
font-family: SourceHanSansCN-Regular;
|
|
|
font-size: 20px;
|
|
|
font-weight: normal;
|
|
|
font-stretch: normal;
|
|
|
line-height: 20px;
|
|
|
color: #fff27f;
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
white-space: nowrap;
|
|
|
position: absolute;
|
|
|
top: 14px;
|
|
|
}
|
|
|
.lineIcon {
|
|
|
width: 22px;
|
|
|
height: 22px;
|
|
|
position: absolute;
|
|
|
background: url("~@/assets/sentimeent/icon-预警.png");
|
|
|
top: 11px;
|
|
|
left: 20px;
|
|
|
z-index: 9999;
|
|
|
}
|
|
|
.lineTime {
|
|
|
width: 202px;
|
|
|
height: 16px;
|
|
|
font-family: SourceHanSansCN-Regular;
|
|
|
font-size: 20px;
|
|
|
font-weight: normal;
|
|
|
font-stretch: normal;
|
|
|
color: #ffffff;
|
|
|
line-height: 16px;
|
|
|
opacity: 0.5;
|
|
|
position: absolute;
|
|
|
bottom: 16px;
|
|
|
left: 21px;
|
|
|
}
|
|
|
.lineFrom {
|
|
|
width: 100px;
|
|
|
height: 19px;
|
|
|
font-family: SourceHanSansCN-Regular;
|
|
|
font-size: 20px;
|
|
|
font-weight: normal;
|
|
|
font-stretch: normal;
|
|
|
line-height: 19px;
|
|
|
letter-spacing: 1px;
|
|
|
color: #ffffff;
|
|
|
opacity: 0.5;
|
|
|
position: absolute;
|
|
|
bottom: 14px;
|
|
|
right: 21px;
|
|
|
}
|
|
|
.all {
|
|
|
position: relative;
|
|
|
}
|
|
|
.left {
|
|
|
width: 140px;
|
|
|
height: 833px;
|
|
|
background: #000;
|
|
|
position: absolute;
|
|
|
background: url("~@/assets/sentimeent/左.png") no-repeat center;
|
|
|
top: 50px;
|
|
|
right: 0px;
|
|
|
}
|
|
|
|
|
|
.btn-wrap {
|
|
|
display: flex;
|
|
|
cursor: pointer;
|
|
|
.btn {
|
|
|
width: 157px;
|
|
|
height: 43px;
|
|
|
text-align: center;
|
|
|
line-height: 43px;
|
|
|
font-size: 28px;
|
|
|
color: rgba(#fff, 1);
|
|
|
&.active {
|
|
|
color: #fff;
|
|
|
font-weight: bolder;
|
|
|
.topIP {
|
|
|
width: 104px;
|
|
|
height: 10px;
|
|
|
position: relative;
|
|
|
left: 20px;
|
|
|
top: -19px;
|
|
|
// background: url('~@/assets/sentimeent/tab-选中.png');
|
|
|
// background-size: 100% 100%;
|
|
|
}
|
|
|
.distributed {
|
|
|
width: 107px;
|
|
|
height: 10px;
|
|
|
position: relative;
|
|
|
left: 24px;
|
|
|
top: -19px;
|
|
|
// background: url('~@/assets/sentimeent/tab-选中.png');
|
|
|
// background-size: 100% 100%;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.screen-dialog {
|
|
|
.dialog-btn {
|
|
|
background: url("~@/assets/dialog/btn-bg.png") no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
width: 160px;
|
|
|
height: 50px;
|
|
|
font-family: SourceHanSansCN-Regular;
|
|
|
font-size: 24px;
|
|
|
font-weight: normal;
|
|
|
font-stretch: normal;
|
|
|
line-height: 10px;
|
|
|
letter-spacing: 2px;
|
|
|
color: #ffffff;
|
|
|
}
|
|
|
::v-deep .el-button {
|
|
|
border: none;
|
|
|
}
|
|
|
.dialog-footer :hover {
|
|
|
.dialog-btn {
|
|
|
background: url("~@/assets/dialog/btn-bg-act.png") no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
}
|
|
|
}
|
|
|
::v-deep .el-dialog__header {
|
|
|
background: rgba(255, 255, 255, 0);
|
|
|
text-align: left;
|
|
|
padding-left: 40px;
|
|
|
.el-dialog__title {
|
|
|
font-family: SourceHanSansCN-Bold, san-serif;
|
|
|
font-size: 24px;
|
|
|
font-weight: normal;
|
|
|
font-stretch: normal;
|
|
|
line-height: 38px;
|
|
|
letter-spacing: 0px;
|
|
|
color: #ffffff;
|
|
|
}
|
|
|
}
|
|
|
::v-deep .el-dialog {
|
|
|
background: url("../../../../assets/dialog/弹窗背景-一般.png") no-repeat;
|
|
|
width: 1820px;
|
|
|
height: 950px;
|
|
|
background-size: 100% 100%;
|
|
|
}
|
|
|
::v-deep .el-dialog__headerbtn {
|
|
|
top: 0;
|
|
|
}
|
|
|
::v-deep .el-dialog__footer {
|
|
|
background: rgba(255, 255, 255, 0);
|
|
|
}
|
|
|
::v-deep .el-table th.el-table__cell {
|
|
|
background-color: rgba(0, 0, 0, 0);
|
|
|
}
|
|
|
::v-deep .el-table {
|
|
|
background-color: rgba(0, 0, 0, 0);
|
|
|
color: #fff;
|
|
|
border: none;
|
|
|
}
|
|
|
::v-deep.el-table::before {
|
|
|
display: none;
|
|
|
}
|
|
|
::v-deep .el-table tr {
|
|
|
background-color: rgba(0, 0, 0, 0);
|
|
|
}
|
|
|
::v-deep .el-table .cell {
|
|
|
font-size: 26px;
|
|
|
height: 40px;
|
|
|
line-height: 40px;
|
|
|
}
|
|
|
::v-deep .el-table__header {
|
|
|
background-color: rgba(76, 162, 248, 0.2);
|
|
|
color: #fff;
|
|
|
}
|
|
|
::v-deep .el-table__row {
|
|
|
font-family: SourceHanSansCN-Regular, sans-serif;
|
|
|
font-size: 26px;
|
|
|
font-weight: normal;
|
|
|
font-stretch: normal;
|
|
|
letter-spacing: 0px;
|
|
|
color: #b7dfff;
|
|
|
background-color: rgba(106, 184, 255, 0.2);
|
|
|
border: solid 1px #6ab8ff;
|
|
|
}
|
|
|
::v-deep .el-table {
|
|
|
tbody tr {
|
|
|
&:hover {
|
|
|
td {
|
|
|
background-color: rgba(228, 223, 223, 0.3) !important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
::v-deep .el-table td.el-table__cell {
|
|
|
border: none;
|
|
|
}
|
|
|
::v-deep .el-table .cell {
|
|
|
color: #fff;
|
|
|
}
|
|
|
::v-deep .el-table th.el-table__cell {
|
|
|
border: none;
|
|
|
}
|
|
|
}
|
|
|
.screen-dialog ::-webkit-scrollbar {
|
|
|
width: 10px;
|
|
|
height: 10px;
|
|
|
background-color: rgba(#1fb6e5, 0.06);
|
|
|
}
|
|
|
::v-deep .el-pagination__total {
|
|
|
color: #fff;
|
|
|
}
|
|
|
::v-deep .el-input .el-input--mini .el-input--suffix {
|
|
|
background: transparent;
|
|
|
}
|
|
|
::v-deep .el-pagination .el-select .el-input .el-input__inner {
|
|
|
background: transparent;
|
|
|
border: none;
|
|
|
color: #fff;
|
|
|
}
|
|
|
::v-deep .el-select-dropdown__list {
|
|
|
background: #000;
|
|
|
}
|
|
|
::v-deep .el-pagination button:disabled {
|
|
|
background-color: transparent;
|
|
|
}
|
|
|
::v-deep .el-pagination .btn-next {
|
|
|
background-color: transparent;
|
|
|
color: #fff;
|
|
|
}
|
|
|
::v-deep .el-pager {
|
|
|
color: #fff !important;
|
|
|
}
|
|
|
::v-deep .el-pager li {
|
|
|
background-color: transparent;
|
|
|
}
|
|
|
::v-deep .el-pagination__editor.el-input .el-input__inner {
|
|
|
background-color: transparent;
|
|
|
border: none;
|
|
|
color: #fff;
|
|
|
}
|
|
|
::v-deep .el-pagination__jump {
|
|
|
color: #fff;
|
|
|
}
|
|
|
::v-deep .el-select-dropdown .el-popper {
|
|
|
background-color: #132d56 !important;
|
|
|
}
|
|
|
.dialog-title {
|
|
|
text-align: center;
|
|
|
width: 756px;
|
|
|
margin: 0 auto;
|
|
|
font-family: SourceHanSansCN-Bold;
|
|
|
font-size: 36px;
|
|
|
font-weight: normal;
|
|
|
font-stretch: normal;
|
|
|
line-height: 38px;
|
|
|
letter-spacing: 0;
|
|
|
color: #ffe850;
|
|
|
}
|
|
|
.dialog-explain {
|
|
|
margin-top: 39px;
|
|
|
height: 125px;
|
|
|
background: url("~@/assets/dialog/信息-bg.png") no-repeat 100% 100%;
|
|
|
}
|
|
|
.dialog-content {
|
|
|
width: 1073px;
|
|
|
max-height: 500px;
|
|
|
margin: 20px auto;
|
|
|
font-family: SourceHanSansCN-Medium;
|
|
|
font-size: 30px;
|
|
|
font-weight: normal;
|
|
|
font-stretch: normal;
|
|
|
line-height: 50px;
|
|
|
letter-spacing: 2px;
|
|
|
color: #ffffff;
|
|
|
}
|
|
|
</style>
|
|
|
<style lang="scss">
|
|
|
.select_bottom {
|
|
|
border: none !important;
|
|
|
.el-scrollbar {
|
|
|
background-color: rgb(0, 23, 53);
|
|
|
}
|
|
|
.el-select-dropdown__item {
|
|
|
//background: red;
|
|
|
color: #fff;
|
|
|
}
|
|
|
.el-select-dropdown__item.hover,
|
|
|
.el-select-dropdown__item:hover {
|
|
|
background: rgb(12, 46, 97);
|
|
|
color: #fff;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
