|
|
|
|
@ -15,9 +15,7 @@
|
|
|
|
|
<div class="processIcon">
|
|
|
|
|
<div style="top: 0px; left: 340px">
|
|
|
|
|
<img src="@/assets/sentimeent/网络举报事件.png" alt="" />
|
|
|
|
|
<span style="margin-left: -40px; color: #fbe84f">
|
|
|
|
|
网络举报事件
|
|
|
|
|
</span>
|
|
|
|
|
<span style="margin-left: -40px"> 网络举报事件 </span>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="top: 73px; left: 550px">
|
|
|
|
|
<img src="@/assets/sentimeent/举报中心.png" alt="" />
|
|
|
|
|
@ -49,32 +47,30 @@
|
|
|
|
|
<div class="section">
|
|
|
|
|
<module-title> 举报事件年度分类统计 </module-title>
|
|
|
|
|
<div id="pie" />
|
|
|
|
|
<div class="chart-labels">
|
|
|
|
|
<div class="label-item">
|
|
|
|
|
<span class="dot" style="background-color: #37a4ff"></span>
|
|
|
|
|
<span class="label-text">上级下发</span>
|
|
|
|
|
<span class="label-value">200%</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="label-item">
|
|
|
|
|
<span class="dot" style="background-color: #00ffde"></span>
|
|
|
|
|
<span class="label-text">部门转发</span>
|
|
|
|
|
<span class="label-value">20%</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="label-item">
|
|
|
|
|
<span class="dot" style="background-color: #ff7e2b"></span>
|
|
|
|
|
<span class="label-text">小程序</span>
|
|
|
|
|
<span class="label-value">10%</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="label-item">
|
|
|
|
|
<span class="dot" style="background-color: #f6ff00"></span>
|
|
|
|
|
<span class="label-text">无效</span>
|
|
|
|
|
<span class="label-value">1%</span>
|
|
|
|
|
<div class="labels">
|
|
|
|
|
<div
|
|
|
|
|
class="label-item"
|
|
|
|
|
v-for="(item, index) in pieData"
|
|
|
|
|
:key="index"
|
|
|
|
|
:style="{
|
|
|
|
|
backgroundImage: `url(${require('@/assets/sentimeent/' +
|
|
|
|
|
(item.name === '小程序' ? '其他' : item.name) +
|
|
|
|
|
'.png')})`,
|
|
|
|
|
backgroundSize: '100% 100%',
|
|
|
|
|
}"
|
|
|
|
|
>
|
|
|
|
|
<div class="label-content">
|
|
|
|
|
<div class="percent" :style="{ color: getItemColor(index) }">
|
|
|
|
|
{{ getItemPercent(item) }}%
|
|
|
|
|
</div>
|
|
|
|
|
<div class="name">{{ item.name }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="section" style="padding-top: 35px">
|
|
|
|
|
<module-title> 清朗专项行动数据统计</module-title>
|
|
|
|
|
<div class="qlzfsjtj">
|
|
|
|
|
<!-- <div class="qlzfsjtj">
|
|
|
|
|
<div class="qlzf-head">
|
|
|
|
|
<div>处理有害信息数量(条)</div>
|
|
|
|
|
<div>处置平台违规账号(个)</div>
|
|
|
|
|
@ -87,9 +83,9 @@
|
|
|
|
|
class="left-item"
|
|
|
|
|
>
|
|
|
|
|
<span>{{ item.num }}</span>
|
|
|
|
|
<div class="processBox">
|
|
|
|
|
<!-- 分母是为了数据展示好看 要求这样 2024/10/12之前分母是25000 今天甲方提要求进度条的占比分布改小一点，这个太大看不出差距了 -->
|
|
|
|
|
<div
|
|
|
|
|
<div class="processBox"> -->
|
|
|
|
|
<!-- 分母是为了数据展示好看 要求这样 2024/10/12之前分母是25000 今天甲方提要求进度条的占比分布改小一点，这个太大看不出差距了 -->
|
|
|
|
|
<!-- <div
|
|
|
|
|
class="process"
|
|
|
|
|
:style="{ width: (item.num / 2500) * 251 + 'px' }"
|
|
|
|
|
></div>
|
|
|
|
|
@ -106,7 +102,7 @@
|
|
|
|
|
<span class="month">{{ item.name }}</span>
|
|
|
|
|
<div class="processBox">
|
|
|
|
|
<!-- 分母是为了数据展示好看 要求这样 -->
|
|
|
|
|
<div
|
|
|
|
|
<!-- <div
|
|
|
|
|
class="process"
|
|
|
|
|
:style="{ width: (item.num / 230) * 251 + 'px' }"
|
|
|
|
|
></div>
|
|
|
|
|
@ -116,6 +112,10 @@
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div> -->
|
|
|
|
|
<div class="charts-container">
|
|
|
|
|
<div id="clyhxxsl" class="chart-box"></div>
|
|
|
|
|
<div id="gbzbptwgzh" class="chart-box"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="section" style="padding-top: 35px">
|
|
|
|
|
@ -253,6 +253,7 @@ export default {
|
|
|
|
|
{ url: require("@/assets/ecosphere/清朗专项行动图/1-3.png") },
|
|
|
|
|
{ url: require("@/assets/ecosphere/清朗专项行动图/1-4.png") },
|
|
|
|
|
],
|
|
|
|
|
colorMap: ["#37a4ff", "#00ffde", "#ff7e2b", "#fbe84f"],
|
|
|
|
|
cleanActionData: [
|
|
|
|
|
{
|
|
|
|
|
time: "2024-12-28",
|
|
|
|
|
@ -330,116 +331,68 @@ export default {
|
|
|
|
|
number: 0,
|
|
|
|
|
reportingTimer: null,
|
|
|
|
|
pieData: [
|
|
|
|
|
{ value: 200, name: "上级下发" },
|
|
|
|
|
{ value: 20, name: "部门转发" },
|
|
|
|
|
{ value: 15, name: "上级下发" },
|
|
|
|
|
{ value: 3, name: "部门转发" },
|
|
|
|
|
{ value: 10, name: "小程序" },
|
|
|
|
|
{ value: 1, name: "无效" },
|
|
|
|
|
{ value: 4, name: "无效" },
|
|
|
|
|
],
|
|
|
|
|
qlzfDataStatistics: [
|
|
|
|
|
{
|
|
|
|
|
title: "处理有害信息数量(条)",
|
|
|
|
|
data: [
|
|
|
|
|
// {
|
|
|
|
|
// name: nmonth + "月",
|
|
|
|
|
// num: 0,
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// name: nmonth - 1 + "月",
|
|
|
|
|
// num: 0,
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// name: nmonth - 2 + "月",
|
|
|
|
|
// num: 0,
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// name: nmonth - 3 + "月",
|
|
|
|
|
// num: 0,
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// name: nmonth - 4 + "月",
|
|
|
|
|
// num: 0,
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// name: nmonth - 5 + "月",
|
|
|
|
|
// num: 0,
|
|
|
|
|
// },
|
|
|
|
|
// // {
|
|
|
|
|
// // name: '8月',
|
|
|
|
|
// // num: 0
|
|
|
|
|
// // },
|
|
|
|
|
// // {
|
|
|
|
|
// // name: '7月',
|
|
|
|
|
// // num: 0
|
|
|
|
|
// // },
|
|
|
|
|
// // {
|
|
|
|
|
// // name: '6月',
|
|
|
|
|
// // num: 0
|
|
|
|
|
// // },
|
|
|
|
|
// // {
|
|
|
|
|
// // name: '5月',
|
|
|
|
|
// // num: 0
|
|
|
|
|
// // },
|
|
|
|
|
// // {
|
|
|
|
|
// // name: '4月',
|
|
|
|
|
// // num: 0
|
|
|
|
|
// // },
|
|
|
|
|
// // {
|
|
|
|
|
// // name: '3月',
|
|
|
|
|
// // num: 0
|
|
|
|
|
// // }
|
|
|
|
|
{
|
|
|
|
|
name: "9月",
|
|
|
|
|
num: 12500,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "10月",
|
|
|
|
|
num: 17200,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "11月",
|
|
|
|
|
num: 11800,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "12月",
|
|
|
|
|
num: 14700,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "1月",
|
|
|
|
|
num: 7500,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "2月",
|
|
|
|
|
num: 18000,
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "关闭直播平台违规账号(个)",
|
|
|
|
|
data: [
|
|
|
|
|
// {
|
|
|
|
|
// name: nmonth + "月",
|
|
|
|
|
// num: 0,
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// name: nmonth - 1 + "月",
|
|
|
|
|
// num: 0,
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// name: nmonth - 2 + "月",
|
|
|
|
|
// num: 0,
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// name: nmonth - 3 + "月",
|
|
|
|
|
// num: 0,
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// name: nmonth - 4 + "月",
|
|
|
|
|
// num: 0,
|
|
|
|
|
// },
|
|
|
|
|
// {
|
|
|
|
|
// name: nmonth - 5 + "月",
|
|
|
|
|
// num: 0,
|
|
|
|
|
// },
|
|
|
|
|
// // {
|
|
|
|
|
// // name: '8月',
|
|
|
|
|
// // num: 0
|
|
|
|
|
// // },
|
|
|
|
|
// // {
|
|
|
|
|
// // name: '7月',
|
|
|
|
|
// // num: 0
|
|
|
|
|
// // },
|
|
|
|
|
// // {
|
|
|
|
|
// // name: '6月',
|
|
|
|
|
// // num: 0
|
|
|
|
|
// // },
|
|
|
|
|
// // {
|
|
|
|
|
// // name: '5月',
|
|
|
|
|
// // num: 0
|
|
|
|
|
// // },
|
|
|
|
|
// // {
|
|
|
|
|
// // name: '4月',
|
|
|
|
|
// // num: 0
|
|
|
|
|
// // },
|
|
|
|
|
// // {
|
|
|
|
|
// // name: '3月',
|
|
|
|
|
// // num: 0
|
|
|
|
|
// // }
|
|
|
|
|
{
|
|
|
|
|
name: "9月",
|
|
|
|
|
num: 130,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "10月",
|
|
|
|
|
num: 180,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "11月",
|
|
|
|
|
num: 120,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "12月",
|
|
|
|
|
num: 140,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "1月",
|
|
|
|
|
num: 70,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: "2月",
|
|
|
|
|
num: 180,
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
@ -478,6 +431,7 @@ export default {
|
|
|
|
|
this.zhuanxiangList(); // 清朗专项行动动态
|
|
|
|
|
this.managescreenData(); // 行动数据统计
|
|
|
|
|
this.reportbyyearDate(); // 举报事件年度分类统计
|
|
|
|
|
this.initQinglangCharts(); // 初始化清朗专项行动数据统计图表
|
|
|
|
|
|
|
|
|
|
// getreportNum().then(res => {
|
|
|
|
|
// this.pieData[0].value = res.data.reportTotalCount - 12
|
|
|
|
|
@ -694,107 +648,228 @@ export default {
|
|
|
|
|
const chartDom = document.getElementById("pie");
|
|
|
|
|
const myChart = this.$echarts.init(chartDom);
|
|
|
|
|
const optionSecond = {
|
|
|
|
|
tooltip: {
|
|
|
|
|
trigger: "item",
|
|
|
|
|
formatter: "{a} <br/>{b} : {c}%",
|
|
|
|
|
},
|
|
|
|
|
color: ["#37a4ff", "#00ffde", "#ff7e2b", "#f6ff00"],
|
|
|
|
|
legend: {
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
color: this.colorMap,
|
|
|
|
|
// tooltip: {
|
|
|
|
|
// trigger: "item",
|
|
|
|
|
// formatter: "{a} <br/>{b}: {c} ({d}% )",
|
|
|
|
|
// },
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
name: "举报事件年度分类统计",
|
|
|
|
|
name: "Access From",
|
|
|
|
|
type: "pie",
|
|
|
|
|
radius: ["55%", "78%"],
|
|
|
|
|
avoidLabelOverlap: false,
|
|
|
|
|
center: ["24%", "48%"],
|
|
|
|
|
hoverAnimation: true,
|
|
|
|
|
radius: ["35%", "50%"],
|
|
|
|
|
labelLine: {
|
|
|
|
|
show: false,
|
|
|
|
|
length: 30,
|
|
|
|
|
},
|
|
|
|
|
label: {
|
|
|
|
|
show: false
|
|
|
|
|
show: false,
|
|
|
|
|
position: "outside",
|
|
|
|
|
formatter: "{b}{c} ",
|
|
|
|
|
borderWidth: 1,
|
|
|
|
|
borderRadius: 4,
|
|
|
|
|
rich: {
|
|
|
|
|
a: {
|
|
|
|
|
color: "#6E7079",
|
|
|
|
|
lineHeight: 22,
|
|
|
|
|
align: "center",
|
|
|
|
|
},
|
|
|
|
|
hr: {
|
|
|
|
|
borderColor: "#8C8D8E",
|
|
|
|
|
width: "100%",
|
|
|
|
|
borderWidth: 1,
|
|
|
|
|
height: 0,
|
|
|
|
|
},
|
|
|
|
|
b: {
|
|
|
|
|
color: "#4C5058",
|
|
|
|
|
fontSize: 14,
|
|
|
|
|
fontWeight: "bold",
|
|
|
|
|
lineHeight: 33,
|
|
|
|
|
},
|
|
|
|
|
per: {
|
|
|
|
|
color: "#fff",
|
|
|
|
|
backgroundColor: "#4C5058",
|
|
|
|
|
padding: [3, 4],
|
|
|
|
|
borderRadius: 4,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
data: this.pieData,
|
|
|
|
|
emphasis: {
|
|
|
|
|
labelLine: {
|
|
|
|
|
show: true,
|
|
|
|
|
length: 30,
|
|
|
|
|
},
|
|
|
|
|
label: {
|
|
|
|
|
show: false
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
labelLine: {
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
data: this.pieData.map((item) => {
|
|
|
|
|
if (item.name === "无效") {
|
|
|
|
|
return {
|
|
|
|
|
...item,
|
|
|
|
|
label: {
|
|
|
|
|
show: true,
|
|
|
|
|
position: 'outside',
|
|
|
|
|
formatter: '4件\n无效',
|
|
|
|
|
fontSize: 16,
|
|
|
|
|
color: '#f6ff00',
|
|
|
|
|
distance: 5
|
|
|
|
|
show: true,
|
|
|
|
|
position: "outside",
|
|
|
|
|
formatter: "{b}{c} ",
|
|
|
|
|
borderWidth: 1,
|
|
|
|
|
borderRadius: 4,
|
|
|
|
|
rich: {
|
|
|
|
|
a: {
|
|
|
|
|
color: "#6E7079",
|
|
|
|
|
lineHeight: 22,
|
|
|
|
|
align: "center",
|
|
|
|
|
},
|
|
|
|
|
labelLine: {
|
|
|
|
|
show: true,
|
|
|
|
|
length: 30,
|
|
|
|
|
length2: 40,
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: '#f6ff00',
|
|
|
|
|
width: 1
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
return item;
|
|
|
|
|
}),
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
type: 'pie',
|
|
|
|
|
radius: ['0', '35%'],
|
|
|
|
|
center: ["24%", "48%"],
|
|
|
|
|
silent: true,
|
|
|
|
|
label: {
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
labelLine: {
|
|
|
|
|
show: false
|
|
|
|
|
hr: {
|
|
|
|
|
borderColor: "#8C8D8E",
|
|
|
|
|
width: "100%",
|
|
|
|
|
borderWidth: 1,
|
|
|
|
|
height: 0,
|
|
|
|
|
},
|
|
|
|
|
b: {
|
|
|
|
|
color: "#4C5058",
|
|
|
|
|
fontSize: 14,
|
|
|
|
|
fontWeight: "bold",
|
|
|
|
|
lineHeight: 33,
|
|
|
|
|
},
|
|
|
|
|
per: {
|
|
|
|
|
color: "#fff",
|
|
|
|
|
backgroundColor: "#4C5058",
|
|
|
|
|
padding: [3, 4],
|
|
|
|
|
borderRadius: 4,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
z: 1,
|
|
|
|
|
data: [{
|
|
|
|
|
value: 100,
|
|
|
|
|
itemStyle: {
|
|
|
|
|
color: 'rgba(0, 15, 58, 0.8)',
|
|
|
|
|
borderWidth: 2,
|
|
|
|
|
borderColor: '#072761'
|
|
|
|
|
}
|
|
|
|
|
}]
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
};
|
|
|
|
|
// Add warning icon in the center
|
|
|
|
|
const warningIcon = {
|
|
|
|
|
type: 'group',
|
|
|
|
|
left: '24%',
|
|
|
|
|
top: '48%',
|
|
|
|
|
type: "group",
|
|
|
|
|
left: 60,
|
|
|
|
|
top: "85%",
|
|
|
|
|
z: 100,
|
|
|
|
|
children: [{
|
|
|
|
|
type: 'image',
|
|
|
|
|
z: 100,
|
|
|
|
|
style: {
|
|
|
|
|
image: require('@/assets/sentimeent/warning.png'),
|
|
|
|
|
width: 24,
|
|
|
|
|
height: 24,
|
|
|
|
|
x: -12,
|
|
|
|
|
y: -12
|
|
|
|
|
}
|
|
|
|
|
}]
|
|
|
|
|
children: [
|
|
|
|
|
{
|
|
|
|
|
type: "image",
|
|
|
|
|
z: 100,
|
|
|
|
|
style: {
|
|
|
|
|
width: 24,
|
|
|
|
|
height: 24,
|
|
|
|
|
x: -12,
|
|
|
|
|
y: -12,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
optionSecond.graphic = [warningIcon];
|
|
|
|
|
|
|
|
|
|
optionSecond.graphic = [
|
|
|
|
|
warningIcon,
|
|
|
|
|
// 动态生成图例
|
|
|
|
|
// ...this.generateLegendItems()
|
|
|
|
|
];
|
|
|
|
|
myChart.setOption(optionSecond, true);
|
|
|
|
|
|
|
|
|
|
// Remove click event handler - we don't need it
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
echartsJump(myChart, optionSecond);
|
|
|
|
|
},
|
|
|
|
|
// 生成图例项
|
|
|
|
|
generateLegendItems() {
|
|
|
|
|
// 色彩映射（与饼图扇区颜色对应）
|
|
|
|
|
const colorMap = ["#37a4ff", "#00ffde", "#ff7e2b", "#fbe84f"];
|
|
|
|
|
|
|
|
|
|
// 计算总和，用于百分比计算
|
|
|
|
|
const total = this.pieData.reduce((sum, item) => sum + item.value, 0);
|
|
|
|
|
|
|
|
|
|
// 循环创建图例项
|
|
|
|
|
return this.pieData.map((item, index) => {
|
|
|
|
|
// 计算百分比
|
|
|
|
|
const percent = ((item.value / total) * 100).toFixed(1);
|
|
|
|
|
|
|
|
|
|
// 计算位置 (每个图例宽度大约190px，包括间距)
|
|
|
|
|
const left = index * 180;
|
|
|
|
|
|
|
|
|
|
// 创建图例组
|
|
|
|
|
const legendItem = {
|
|
|
|
|
type: "group",
|
|
|
|
|
left: left,
|
|
|
|
|
top: "85%",
|
|
|
|
|
children: [
|
|
|
|
|
{
|
|
|
|
|
// 内部深色背景
|
|
|
|
|
type: "rect",
|
|
|
|
|
z: 91,
|
|
|
|
|
shape: {
|
|
|
|
|
x: 2,
|
|
|
|
|
y: 2,
|
|
|
|
|
width: 166,
|
|
|
|
|
height: 61,
|
|
|
|
|
r: 0,
|
|
|
|
|
},
|
|
|
|
|
style: {
|
|
|
|
|
backgroundImage: `url(${require("@/assets/sentimeent/" +
|
|
|
|
|
(item.name === "小程序" ? "其他" : item.name) +
|
|
|
|
|
".png")})`,
|
|
|
|
|
backgroundSize: "100% 100%",
|
|
|
|
|
// stroke: 'transparent'
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
{
|
|
|
|
|
// 百分比文字
|
|
|
|
|
type: "text",
|
|
|
|
|
z: 95,
|
|
|
|
|
left: 40,
|
|
|
|
|
top: 10,
|
|
|
|
|
style: {
|
|
|
|
|
text: percent + "%",
|
|
|
|
|
fill: colorMap[index],
|
|
|
|
|
fontSize: 24,
|
|
|
|
|
fontWeight: "bold",
|
|
|
|
|
fontFamily: "Arial",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
// 描述文字
|
|
|
|
|
type: "text",
|
|
|
|
|
z: 95,
|
|
|
|
|
left: 85,
|
|
|
|
|
top: 35,
|
|
|
|
|
style: {
|
|
|
|
|
text: item.name,
|
|
|
|
|
fill: "#ffffff",
|
|
|
|
|
fontSize: 16,
|
|
|
|
|
fontFamily: "Microsoft YaHei",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 为"无效"类型添加特殊的红圈标注
|
|
|
|
|
if (item.name === "无效" && this.showNotifications) {
|
|
|
|
|
legendItem.children.push(
|
|
|
|
|
{
|
|
|
|
|
type: "circle",
|
|
|
|
|
z: 100,
|
|
|
|
|
shape: {
|
|
|
|
|
cx: 160,
|
|
|
|
|
cy: -25,
|
|
|
|
|
r: 20,
|
|
|
|
|
},
|
|
|
|
|
style: {
|
|
|
|
|
fill: "#ff3131",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
type: "text",
|
|
|
|
|
z: 101,
|
|
|
|
|
left: 141,
|
|
|
|
|
top: -33,
|
|
|
|
|
style: {
|
|
|
|
|
text: "3.44%",
|
|
|
|
|
fill: "#ffffff",
|
|
|
|
|
fontSize: 12,
|
|
|
|
|
fontWeight: "bold",
|
|
|
|
|
fontFamily: "Arial",
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
return legendItem;
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
// 定时器旋转+字体颜色变
|
|
|
|
|
reportingProcessTimer() {
|
|
|
|
|
let index = 0;
|
|
|
|
|
@ -824,6 +899,217 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
}, 4000);
|
|
|
|
|
},
|
|
|
|
|
getItemColor(index) {
|
|
|
|
|
return this.colorMap[index] || "#ffffff";
|
|
|
|
|
},
|
|
|
|
|
getItemPercent(item) {
|
|
|
|
|
const total = this.pieData.reduce((sum, i) => sum + i.value, 0);
|
|
|
|
|
if (total === 0) return 0;
|
|
|
|
|
|
|
|
|
|
let percent = (item.value / total) * 100;
|
|
|
|
|
|
|
|
|
|
// 保留一位小数
|
|
|
|
|
return percent.toFixed(1);
|
|
|
|
|
},
|
|
|
|
|
// 初始化清朗专项行动数据统计图表
|
|
|
|
|
initQinglangCharts() {
|
|
|
|
|
this.initHarmfulInfoChart();
|
|
|
|
|
this.initIllegalAccountsChart();
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 初始化处理有害信息数量图表
|
|
|
|
|
initHarmfulInfoChart() {
|
|
|
|
|
const chartDom = document.getElementById("clyhxxsl");
|
|
|
|
|
if (!chartDom) return;
|
|
|
|
|
|
|
|
|
|
const myChart = this.$echarts.init(chartDom);
|
|
|
|
|
|
|
|
|
|
// 准备数据
|
|
|
|
|
const data = this.qlzfDataStatistics[0].data;
|
|
|
|
|
const months = data.map((item) => item.name);
|
|
|
|
|
const values = data.map((item) => item.num);
|
|
|
|
|
|
|
|
|
|
const option = {
|
|
|
|
|
grid: {
|
|
|
|
|
left: "5%",
|
|
|
|
|
right: "5%",
|
|
|
|
|
top: "15%",
|
|
|
|
|
bottom: "10%",
|
|
|
|
|
containLabel: true,
|
|
|
|
|
},
|
|
|
|
|
title: {
|
|
|
|
|
text: "处理有害信息数量(条)",
|
|
|
|
|
left: "center",
|
|
|
|
|
top: "2%",
|
|
|
|
|
textStyle: {
|
|
|
|
|
// color: "#66c9fa",
|
|
|
|
|
// fontSize: 16,
|
|
|
|
|
// fontWeight: "normal",
|
|
|
|
|
fontFamily: "AlibabaPuHuiTiR",
|
|
|
|
|
fontSize: 20,
|
|
|
|
|
color: "#B9CCDF",
|
|
|
|
|
lineHeight: 5,
|
|
|
|
|
textAlign: "center",
|
|
|
|
|
fontStyle: "normal",
|
|
|
|
|
textTransform: "none",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
xAxis: {
|
|
|
|
|
type: "category",
|
|
|
|
|
data: months,
|
|
|
|
|
axisLine: {
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: "#456389",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
axisTick: {
|
|
|
|
|
show: false,
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
color: "#ffffff",
|
|
|
|
|
fontSize: 14,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
yAxis: {
|
|
|
|
|
type: "value",
|
|
|
|
|
name: "",
|
|
|
|
|
min: 0,
|
|
|
|
|
max: function (value) {
|
|
|
|
|
return 25000;
|
|
|
|
|
},
|
|
|
|
|
axisLine: {
|
|
|
|
|
show: false,
|
|
|
|
|
},
|
|
|
|
|
axisTick: {
|
|
|
|
|
show: false,
|
|
|
|
|
},
|
|
|
|
|
splitLine: {
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: "rgba(69, 99, 137, 0.3)",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
color: "#ffffff",
|
|
|
|
|
fontSize: 14,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
data: values,
|
|
|
|
|
type: "bar",
|
|
|
|
|
barWidth: 18,
|
|
|
|
|
itemStyle: {
|
|
|
|
|
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
|
|
{ offset: 0, color: "#50a1f8" },
|
|
|
|
|
{ offset: 1, color: "#94d8fb" },
|
|
|
|
|
]),
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
myChart.setOption(option);
|
|
|
|
|
window.addEventListener("resize", () => {
|
|
|
|
|
myChart.resize();
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 初始化关闭直播平台违规账号图表
|
|
|
|
|
initIllegalAccountsChart() {
|
|
|
|
|
const chartDom = document.getElementById("gbzbptwgzh");
|
|
|
|
|
if (!chartDom) return;
|
|
|
|
|
|
|
|
|
|
const myChart = this.$echarts.init(chartDom);
|
|
|
|
|
|
|
|
|
|
// 准备数据
|
|
|
|
|
const data = this.qlzfDataStatistics[1].data;
|
|
|
|
|
const months = data.map((item) => item.name);
|
|
|
|
|
const values = data.map((item) => item.num);
|
|
|
|
|
|
|
|
|
|
const option = {
|
|
|
|
|
grid: {
|
|
|
|
|
left: "5%",
|
|
|
|
|
right: "5%",
|
|
|
|
|
top: "15%",
|
|
|
|
|
bottom: "10%",
|
|
|
|
|
containLabel: true,
|
|
|
|
|
},
|
|
|
|
|
title: {
|
|
|
|
|
text: "关闭直播平台违规账号(个)",
|
|
|
|
|
left: "center",
|
|
|
|
|
top: "2%",
|
|
|
|
|
textStyle: {
|
|
|
|
|
// color: "#66c9fa",
|
|
|
|
|
// fontSize: 16,
|
|
|
|
|
// fontWeight: "normal",
|
|
|
|
|
fontFamily: "AlibabaPuHuiTiR",
|
|
|
|
|
fontSize: 20,
|
|
|
|
|
color: "#B9CCDF",
|
|
|
|
|
lineHeight: 5,
|
|
|
|
|
textAlign: "center",
|
|
|
|
|
fontStyle: "normal",
|
|
|
|
|
textTransform: "none",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
xAxis: {
|
|
|
|
|
type: "category",
|
|
|
|
|
data: months,
|
|
|
|
|
axisLine: {
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: "#456389",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
axisTick: {
|
|
|
|
|
show: false,
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
color: "#ffffff",
|
|
|
|
|
fontSize: 14,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
yAxis: {
|
|
|
|
|
type: "value",
|
|
|
|
|
name: "",
|
|
|
|
|
min: 0,
|
|
|
|
|
max: function (value) {
|
|
|
|
|
return 250;
|
|
|
|
|
},
|
|
|
|
|
axisLine: {
|
|
|
|
|
show: false,
|
|
|
|
|
},
|
|
|
|
|
axisTick: {
|
|
|
|
|
show: false,
|
|
|
|
|
},
|
|
|
|
|
splitLine: {
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: "rgba(69, 99, 137, 0.3)",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
color: "#ffffff",
|
|
|
|
|
fontSize: 14,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
data: values,
|
|
|
|
|
type: "bar",
|
|
|
|
|
barWidth: 18,
|
|
|
|
|
itemStyle: {
|
|
|
|
|
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
|
|
{ offset: 0, color: "#50a1f8" },
|
|
|
|
|
{ offset: 1, color: "#94d8fb" },
|
|
|
|
|
]),
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
myChart.setOption(option);
|
|
|
|
|
window.addEventListener("resize", () => {
|
|
|
|
|
myChart.resize();
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
@ -860,7 +1146,8 @@ export default {
|
|
|
|
|
|
|
|
|
|
.table-header {
|
|
|
|
|
display: flex;
|
|
|
|
|
background-color: #1a3b6e;
|
|
|
|
|
background: url("~@/assets/sentimeent/背景表格.png") no-repeat center;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
|
|
|
|
|
.header-cell {
|
|
|
|
|
padding: 12px 15px;
|
|
|
|
|
@ -909,7 +1196,7 @@ export default {
|
|
|
|
|
|
|
|
|
|
.title-cell {
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
.highlight-tag {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 50%;
|
|
|
|
|
@ -931,7 +1218,7 @@ export default {
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
&.time-cell {
|
|
|
|
|
width: 120px;
|
|
|
|
|
color: #9bb8d5;
|
|
|
|
|
@ -961,8 +1248,10 @@ export default {
|
|
|
|
|
// padding-top: 20px;
|
|
|
|
|
position: relative;
|
|
|
|
|
height: 100%;
|
|
|
|
|
background: url("~@/assets/sentimeent/举报流程环形图.png") no-repeat center ,url("~@/assets/sentimeent/举报流程(环形中间).png") no-repeat center;
|
|
|
|
|
background-size: 430px 410px,215px 210px;
|
|
|
|
|
background: url("~@/assets/sentimeent/举报流程环形图.png") no-repeat
|
|
|
|
|
center,
|
|
|
|
|
url("~@/assets/sentimeent/举报流程(环形中间).png") no-repeat center;
|
|
|
|
|
background-size: 430px 410px, 215px 210px;
|
|
|
|
|
.processTitle {
|
|
|
|
|
width: 90px;
|
|
|
|
|
position: absolute;
|
|
|
|
|
@ -992,12 +1281,14 @@ export default {
|
|
|
|
|
height: 77px;
|
|
|
|
|
}
|
|
|
|
|
span {
|
|
|
|
|
font-family: SourceHanSansCN-Regular;
|
|
|
|
|
font-family: AlibabaPuHuiTiR;
|
|
|
|
|
font-size: 28px;
|
|
|
|
|
font-weight: normal;
|
|
|
|
|
font-stretch: normal;
|
|
|
|
|
letter-spacing: 0px;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
// font-weight: bold;
|
|
|
|
|
color: #e4f0ff;
|
|
|
|
|
line-height: 30px;
|
|
|
|
|
text-align: justifyLeft;
|
|
|
|
|
font-style: normal;
|
|
|
|
|
text-transform: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@ -1071,19 +1362,20 @@ export default {
|
|
|
|
|
left: 39%;
|
|
|
|
|
width: 180px;
|
|
|
|
|
height: 180px;
|
|
|
|
|
background: url("~@/assets/sentimeent/举报流程(环形中间).png") no-repeat center;
|
|
|
|
|
background: url("~@/assets/sentimeent/举报流程(环形中间).png")
|
|
|
|
|
no-repeat center;
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
#pie {
|
|
|
|
|
position: relative;
|
|
|
|
|
top: 43px;
|
|
|
|
|
top: 0px;
|
|
|
|
|
left: 5px;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 310px;
|
|
|
|
|
margin-top: 30px;
|
|
|
|
|
background: url("~@/assets/ecosphere/bg-饼图.png") no-repeat;
|
|
|
|
|
height: 70%;
|
|
|
|
|
// margin-top: 30px;
|
|
|
|
|
// background: url("~@/assets/ecosphere/bg-饼图.png") no-repeat;
|
|
|
|
|
}
|
|
|
|
|
.qlzfsjtj {
|
|
|
|
|
margin-left: 54px;
|
|
|
|
|
@ -1316,7 +1608,7 @@ export default {
|
|
|
|
|
left: -28px;
|
|
|
|
|
height: 365px;
|
|
|
|
|
width: 20px;
|
|
|
|
|
box-shadow: 21px 0 20px 15px #051831;
|
|
|
|
|
// box-shadow: 21px 0 20px 15px #051831;
|
|
|
|
|
}
|
|
|
|
|
.rightmh {
|
|
|
|
|
position: relative;
|
|
|
|
|
@ -1324,7 +1616,20 @@ export default {
|
|
|
|
|
left: 723px;
|
|
|
|
|
height: 365px;
|
|
|
|
|
width: 20px;
|
|
|
|
|
box-shadow: -21px 0 20px 15px #051831;
|
|
|
|
|
// box-shadow: -21px 0 20px 15px #051831;
|
|
|
|
|
}
|
|
|
|
|
.charts-container {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
height: 400px;
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
|
|
|
|
|
.chart-box {
|
|
|
|
|
flex: 1;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 50%;
|
|
|
|
|
padding: 5px 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@ -1346,33 +1651,46 @@ export default {
|
|
|
|
|
transform: translateX(0px);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.chart-labels {
|
|
|
|
|
.labels {
|
|
|
|
|
position: relative;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
margin-top: 70px;
|
|
|
|
|
padding: 0 30px;
|
|
|
|
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
// margin-top: 80px;
|
|
|
|
|
padding: 0 20px;
|
|
|
|
|
|
|
|
|
|
.label-item {
|
|
|
|
|
position: relative;
|
|
|
|
|
width: 170px;
|
|
|
|
|
height: 65px;
|
|
|
|
|
// border: 1px dashed;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
.dot {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: 10px;
|
|
|
|
|
height: 10px;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
margin-right: 8px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.label-text {
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
margin-right: 8px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.label-value {
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
color: #f6ff00;
|
|
|
|
|
|
|
|
|
|
.label-content {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
|
|
|
|
.percent {
|
|
|
|
|
font-size: 28px;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
font-family: Arial;
|
|
|
|
|
line-height: 1.2;
|
|
|
|
|
margin-top: -10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.name {
|
|
|
|
|
font-family: AlibabaPuHuiTiR;
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
color: #b4f9ff;
|
|
|
|
|
line-height: 22px;
|
|
|
|
|
text-align: justifyLeft;
|
|
|
|
|
font-style: normal;
|
|
|
|
|
text-transform: none;
|
|
|
|
|
margin-top: 5px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
