网络管理修改

main
项洋 2 weeks ago
parent 9128d8cf0a
commit 83e51985ed

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 49 KiB

After

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 218 KiB

After

Width:  |  Height:  |  Size: 130 KiB

@ -11,6 +11,7 @@ export const constantRoutes = [
component: (resolve) => {
require(["@/views/privateOrder/Screen"], resolve);
},
redirect: '/screen/security', // 确保/screen路径也会重定向到网络安全页面
children: [
{
path: "security",
@ -18,10 +19,9 @@ export const constantRoutes = [
component: (resolve) => {
require(["@/views/privateOrder/security/index"], resolve);
},
// redirect: "/screen/security/index",
// children: [
// ]
meta: {
active: true // 标记为默认激活的路由
}
},
{
path: "sentiment",

@ -5,14 +5,14 @@
<div class="top_nav">
<div class="top_left">
<router-link v-for="item in menus.slice(0, 2)" :key="item.id" class="nav_item left_nav"
active-class="selected_left_nav" exact :to="{ path: item.path }">
:class="{ 'selected_left_nav': activeNavPath === item.path }" exact :to="{ path: item.path,query:{name:item.name} }" >
{{ item.name }}
</router-link>
</div>
<!-- <div class="center_title">太仓市网络综合治理平台</div> -->
<div class="top_right">
<router-link v-for="item in menus.slice(2, 4)" :key="item.id" class="nav_item right_nav"
active-class="selected_right_nav" exact :to="{ path: item.path }">
:class="{ 'selected_right_nav': activeNavPath === item.path }" exact :to="{ path: item.path, query: { name: item.name } }">
{{ item.name }}
</router-link>
</div>
@ -89,6 +89,8 @@ export default {
selectMenuId: 0,
//
menus: [],
//
activeNavPath: '/screen/security',
//
now: {
date: "",
@ -114,6 +116,9 @@ export default {
watch: {
$route: {
handler(route) {
//
this.activeNavPath = route.path;
if (
route.path !== "/screen/security" ||
route.path !== "/screen/supplyChain" ||
@ -141,6 +146,9 @@ export default {
// { id: 4, name: "", path: "/screen/positiveEnergy" },
];
//
this.activeNavPath = this.$route.path;
setInterval(() => {
this.now.date = this.$moment().format("YYYY年 M月 D日");
this.now.hour = this.$moment().format("HH");

@ -1818,21 +1818,21 @@ export default {
justify-content: center;
align-items: center;
.stat-number {
font-size: 32px;
font-size: 42px;
font-weight: bold;
color: #09f0ff;
display: flex;
align-items: baseline;
.stat-unit {
font-size: 18px;
font-size: 24px;
font-weight: normal;
margin-left: 5px;
}
}
.stat-dept {
font-size: 16px;
font-size: 26px;
color: #9bb8d5;
margin-top: 5px;
}
@ -1957,7 +1957,7 @@ export default {
width: 100%;
height: 40px;
font-family: AlibabaPuHuiTiB;
font-size: 20px;
font-size: 28px;
font-weight: bold;
color: #b9ccdf;
text-align: center;

@ -68,7 +68,7 @@
</div>
</div>
</div>
<div class="section1" >
<div class="section1">
<module-title> 清朗专项行动数据统计</module-title>
<!-- <div class="qlzfsjtj">
<div class="qlzf-head">
@ -438,6 +438,9 @@ export default {
// this.inItPie()
// })
},
destroyed() {
clearInterval(this.reportingTimer);
},
methods: {
async itemClick(e) {
// console.log(this.qlzxdtList[e.target.dataset.curdata])
@ -791,26 +794,30 @@ export default {
this.reportingTimer = setInterval(() => {
this.number += 60;
const content = document.getElementById("processRotate");
content.style.transform = "rotateZ(" + this.number + "deg)";
if (index === 5) {
document.getElementsByClassName(
"processIcon"
)[0].children[0].children[1].style.color = "#fbe84f";
document.getElementsByClassName(
"processIcon"
)[0].children[5].children[1].style.color = "#ffffff";
if (content) {
content.style.transform = "rotateZ(" + this.number + "deg)";
// if (index === 5) {
// document.getElementsByClassName(
// "processIcon"
// )[0].children[0].children[1].style.color = "#fbe84f";
// document.getElementsByClassName(
// "processIcon"
// )[0].children[5].children[1].style.color = "#ffffff";
// } else {
// document.getElementsByClassName("processIcon")[0].children[
// index + 1
// ].children[1].style.color = "#fbe84f";
// document.getElementsByClassName("processIcon")[0].children[
// index
// ].children[1].style.color = "#ffffff";
// }
// if (index > 4) {
// index = 0;
// } else {
// index++;
// }
} else {
document.getElementsByClassName("processIcon")[0].children[
index + 1
].children[1].style.color = "#fbe84f";
document.getElementsByClassName("processIcon")[0].children[
index
].children[1].style.color = "#ffffff";
}
if (index > 4) {
index = 0;
} else {
index++;
return;
}
}, 2000);
},
@ -855,15 +862,16 @@ export default {
title: {
text: "处理有害信息数量(条)",
left: "center",
top: "2%",
top: "0",
textStyle: {
// color: "#66c9fa",
// fontSize: 16,
// fontWeight: "normal",
fontFamily: "AlibabaPuHuiTiR",
fontSize: 20,
fontSize: 26,
color: "#B9CCDF",
lineHeight: 5,
lineHeight: 49,
textAlign: "center",
fontStyle: "normal",
textTransform: "none",
@ -882,7 +890,7 @@ export default {
},
axisLabel: {
color: "#ffffff",
fontSize: 14,
fontSize: 20,
},
},
yAxis: {
@ -905,7 +913,7 @@ export default {
},
axisLabel: {
color: "#ffffff",
fontSize: 14,
fontSize: 20,
},
},
series: [
@ -952,15 +960,15 @@ export default {
title: {
text: "关闭直播平台违规账号(个)",
left: "center",
top: "2%",
top: "%",
textStyle: {
// color: "#66c9fa",
// fontSize: 16,
// fontWeight: "normal",
fontFamily: "AlibabaPuHuiTiR",
fontSize: 20,
fontSize: 26,
color: "#B9CCDF",
lineHeight: 5,
lineHeight: 49,
textAlign: "center",
fontStyle: "normal",
textTransform: "none",
@ -979,7 +987,7 @@ export default {
},
axisLabel: {
color: "#ffffff",
fontSize: 14,
fontSize: 20,
},
},
yAxis: {
@ -1002,7 +1010,7 @@ export default {
},
axisLabel: {
color: "#ffffff",
fontSize: 14,
fontSize: 20,
},
},
series: [
@ -1109,7 +1117,7 @@ export default {
}
&:nth-child(odd) {
background: url("~@/assets/privateOrder/general/背景表格斑马纹.png")!important;
background: url("~@/assets/privateOrder/general/背景表格斑马纹.png") !important;
}
&.highlight-row {
@ -1180,7 +1188,6 @@ export default {
background: url("~@/assets/sentimeent/举报流程环形图.png") no-repeat
center,
url("~@/assets/sentimeent/举报流程(环型).png") no-repeat center,
url("~@/assets/sentimeent/举报流程(中间).png") no-repeat center;
// background-size: 430px 410px, 215px 210px;
.processTitle {
@ -1199,7 +1206,8 @@ export default {
#feffff 0%,
rgba(111, 226, 251, 1) 100%
);
background: url("~@/assets/sentimeent/举报流程(环型).png") no-repeat center;
background: url("~@/assets/sentimeent/举报流程(环型).png") no-repeat
center;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
@ -1223,7 +1231,8 @@ export default {
text-transform: none;
}
}
}@keyframes rotate {
}
@keyframes rotate {
0% {
transform: rotateZ(0deg);
transform-origin: center;
@ -1283,7 +1292,8 @@ export default {
position: absolute;
height: 240px;
width: 140px;
background: url("~@/assets/sentimeent/举报流程(旋转高亮).png") no-repeat;
background: url("~@/assets/sentimeent/举报流程(旋转高亮).png")
no-repeat;
transform-origin: center;
transition: transform 0.5s ease-in 0s;
}

@ -1,174 +1,284 @@
<template>
<div class="maincontainer">
<img class="map-img" src="@/assets/privateOrder/map/地图@2x.png" alt="">
<img class="map-img" src="@/assets/privateOrder/map/地图@2x.png" alt="" />
<div class="abspan">
<span> 苏州阳澄湖 <br /> 半岛旅游度假区</span>
<span> 苏州工业园区 <br /> 金鸡湖商务区</span>
<span> 苏州工业园区 <br /> 高端制造与国际贸易区</span>
<span>
苏州阳澄湖 <br />
半岛旅游度假区</span
>
<span>
苏州工业园区 <br />
金鸡湖商务区</span
>
<span>
苏州工业园区 <br />
高端制造与国际贸易区</span
>
<span> 苏州独墅湖科教创新区</span>
</div>
<!-- 1 点位 () -->
<div class="localone" @click="togglePoint(0)">
<img :src="points[0].isActive ? redPoint : bluePoint" alt="">
<img :src="points[0].isActive ? redPoint : bluePoint" alt="" />
<div v-if="points[0].isActive" class="info-box">
<div style="display: flex; justify-content: space-between;">
<div style="display: flex; justify-content: space-between">
<h3>{{ points[0].title }}</h3>
<p>{{ points[0].content }}</p>
</div>
</div>
</div>
<!-- 1 点位 () -->
<div class="localtwo" @click="togglePoint(1)">
<img :src="points[1].isActive ? redPoint : bluePoint" alt="">
<div v-if="points[1].isActive" class="info-box">
<img :src="points[1].isActive ? redPoint : bluePoint" alt="" />
<div
v-if="points[1].isActive"
class="info-box"
:style="getBackgroundStyle()"
>
<div class="infotop">
<h3>{{ points[1].title }}</h3>
<div class="topleft">
<p>{{ points[1].content }}</p>
<img src="@/assets/privateOrder/map/关闭.png" alt="">
<img src="@/assets/privateOrder/map/关闭.png" alt="" />
</div>
</div>
<div class="infocontainer">
<div class="item">
<span>监测数据</span>
<span><span class="numberspan">88</span></span>
</div>
<div class="item">
<span>受攻击次数</span>
<span><span class="numberspan">128</span></span>
<div>
<div v-if="routeName == '网络安全'" class="infocontainer">
<div class="item">
<span>监测数据</span>
<span><span class="numberspan">88</span></span>
</div>
<div class="item">
<span>受攻击次数</span>
<span><span class="numberspan">128</span></span>
</div>
<div class="item">
<span>安全隐患</span>
<span><span class="numberspan">24</span></span>
</div>
<div class="item">
<span>通报次数</span>
<span><span class="numberspan">24</span></span>
</div>
</div>
<div class="item">
<span>安全隐患</span>
<span><span class="numberspan">24</span></span>
</div>
<div class="item">
<span>通报次数</span>
<span><span class="numberspan">24</span></span>
<div v-if="routeName == '网络管理'" class="infocontainer">
<div class="item1">
<span>网络动态</span>
<span><span class="numberspan">88</span></span>
</div>
<div class="item1">
<span>翻墙事件</span>
<span><span class="numberspan">128</span></span>
</div>
<div class="item1">
<span>举报时间</span>
<span><span class="numberspan">24</span></span>
</div>
</div>
</div>
</div>
</div>
<!-- 2 -->
<div class="localthree" @click="togglePoint(2)">
<img :src="points[2].isActive ? redPoint : bluePoint" alt="">
<div v-if="points[2].isActive" class="info-box">
<img :src="points[2].isActive ? redPoint : bluePoint" alt="" />
<div
v-if="points[2].isActive"
class="info-box"
:style="getBackgroundStyle()"
>
<div class="infotop">
<h3>{{ points[2].title }}</h3>
<div class="topleft">
<p>{{ points[2].content }}</p>
<img src="@/assets/privateOrder/map/关闭.png" alt="">
<img src="@/assets/privateOrder/map/关闭.png" alt="" />
</div>
</div>
<div class="infocontainer">
<div class="item">
<span>监测数据</span>
<span><span class="numberspan">{{ points[2].von }}</span></span>
</div>
<div class="item">
<span>受攻击次数</span>
<span><span class="numberspan">{{ points[2].vtw }}</span></span>
</div>
<div class="item">
<span>安全隐患</span>
<span><span class="numberspan">{{ points[2].vth }}</span></span>
</div>
<div class="item">
<span>通报次数</span>
<span><span class="numberspan">{{ points[2].vfo }}</span></span>
<div>
<div>
<div v-if="routeName == '网络安全'" class="infocontainer">
<div class="item">
<span>监测数据</span>
<span><span class="numberspan">88</span></span>
</div>
<div class="item">
<span>受攻击次数</span>
<span><span class="numberspan">128</span></span>
</div>
<div class="item">
<span>安全隐患</span>
<span><span class="numberspan">24</span></span>
</div>
<div class="item">
<span>通报次数</span>
<span><span class="numberspan">24</span></span>
</div>
</div>
<div v-if="routeName == '网络管理'" class="infocontainer">
<div class="item1">
<span>网络动态</span>
<span><span class="numberspan">88</span></span>
</div>
<div class="item1">
<span>翻墙事件</span>
<span><span class="numberspan">128</span></span>
</div>
<div class="item1">
<span>举报时间</span>
<span><span class="numberspan">24</span></span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 3 -->
<div class="localfour" @click="togglePoint(3)">
<img :src="points[3].isActive ? redPoint : bluePoint" alt="">
<div v-if="points[3].isActive" class="info-box">
<img :src="points[3].isActive ? redPoint : bluePoint" alt="" />
<div
v-if="points[3].isActive"
class="info-box"
:style="getBackgroundStyle()"
>
<div class="infotop">
<h3>{{ points[3].title }}</h3>
<div class="topleft">
<p>{{ points[3].content }}</p>
<img src="@/assets/privateOrder/map/关闭.png" alt="">
<img src="@/assets/privateOrder/map/关闭.png" alt="" />
</div>
</div>
<div class="infocontainer">
<div class="item">
<span>监测数据</span>
<span><span class="numberspan">88</span></span>
</div>
<div class="item">
<span>受攻击次数</span>
<span><span class="numberspan">128</span></span>
<div>
<div v-if="routeName == '网络安全'" class="infocontainer">
<div class="item">
<span>监测数据</span>
<span><span class="numberspan">88</span></span>
</div>
<div class="item">
<span>受攻击次数</span>
<span><span class="numberspan">128</span></span>
</div>
<div class="item">
<span>安全隐患</span>
<span><span class="numberspan">24</span></span>
</div>
<div class="item">
<span>通报次数</span>
<span><span class="numberspan">24</span></span>
</div>
</div>
<div class="item">
<span>安全隐患</span>
<span><span class="numberspan">24</span></span>
</div>
<div class="item">
<span>通报次数</span>
<span><span class="numberspan">24</span></span>
<div v-if="routeName == '网络管理'" class="infocontainer">
<div class="item1">
<span>网络动态</span>
<span><span class="numberspan">88</span></span>
</div>
<div class="item1">
<span>翻墙事件</span>
<span><span class="numberspan">128</span></span>
</div>
<div class="item1">
<span>举报时间</span>
<span><span class="numberspan">24</span></span>
</div>
</div>
</div>
</div>
</div>
<!-- 4 -->
<div class="localone" @click="togglePoint(4)">
<img :src="points[4].isActive ? redPoint : bluePoint" alt="">
<div v-if="points[4].isActive" class="info-box">
<img :src="points[4].isActive ? redPoint : bluePoint" alt="" />
<div
v-if="points[4].isActive"
class="info-box"
:style="getBackgroundStyle()"
>
<div class="infotop">
<h3>{{ points[4].title }}</h3>
<div class="topleft">
<p>{{ points[4].content }}</p>
<img src="@/assets/privateOrder/map/关闭.png" alt="">
<img src="@/assets/privateOrder/map/关闭.png" alt="" />
</div>
</div>
<div class="infocontainer">
<div class="item">
<span>监测数据</span>
<span><span class="numberspan">88</span></span>
</div>
<div class="item">
<span>受攻击次数</span>
<span><span class="numberspan">128</span></span>
<div>
<div v-if="routeName == '网络安全'" class="infocontainer">
<div class="item">
<span>监测数据</span>
<span><span class="numberspan">88</span></span>
</div>
<div class="item">
<span>受攻击次数</span>
<span><span class="numberspan">128</span></span>
</div>
<div class="item">
<span>安全隐患</span>
<span><span class="numberspan">24</span></span>
</div>
<div class="item">
<span>通报次数</span>
<span><span class="numberspan">24</span></span>
</div>
</div>
<div class="item">
<span>安全隐患</span>
<span><span class="numberspan">24</span></span>
</div>
<div class="item">
<span>通报次数</span>
<span><span class="numberspan">24</span></span>
<div v-if="routeName == '网络管理'" class="infocontainer">
<div class="item1">
<span>网络动态</span>
<span><span class="numberspan">88</span></span>
</div>
<div class="item1">
<span>翻墙事件</span>
<span><span class="numberspan">128</span></span>
</div>
<div class="item1">
<span>举报时间</span>
<span><span class="numberspan">24</span></span>
</div>
</div>
</div>
</div>
</div>
<!-- 5 -->
<div class="localfive" @click="togglePoint(5)">
<img :src="points[5].isActive ? redPoint : bluePoint" alt="">
<div v-if="points[5].isActive" class="info-box">
<img :src="points[5].isActive ? redPoint : bluePoint" alt="" />
<div
v-if="points[5].isActive"
class="info-box"
:style="getBackgroundStyle()"
>
<div class="infotop">
<h3>{{ points[5].title }}</h3>
<div class="topleft">
<p>{{ points[5].content }}</p>
<img src="@/assets/privateOrder/map/关闭.png" alt="">
<img src="@/assets/privateOrder/map/关闭.png" alt="" />
</div>
</div>
<div class="infocontainer">
<div class="item">
<span>监测数据</span>
<span><span class="numberspan">88</span></span>
</div>
<div class="item">
<span>受攻击次数</span>
<span><span class="numberspan">128</span></span>
<div>
<div v-if="routeName == '网络安全'" class="infocontainer">
<div class="item">
<span>监测数据</span>
<span><span class="numberspan">88</span></span>
</div>
<div class="item">
<span>受攻击次数</span>
<span><span class="numberspan">128</span></span>
</div>
<div class="item">
<span>安全隐患</span>
<span><span class="numberspan">24</span></span>
</div>
<div class="item">
<span>通报次数</span>
<span><span class="numberspan">24</span></span>
</div>
</div>
<div class="item">
<span>安全隐患</span>
<span><span class="numberspan">24</span></span>
</div>
<div class="item">
<span>通报次数</span>
<span><span class="numberspan">24</span></span>
<div v-if="routeName == '网络管理'" class="infocontainer">
<div class="item1">
<span>网络动态</span>
<span><span class="numberspan">88</span></span>
</div>
<div class="item1">
<span>翻墙事件</span>
<span><span class="numberspan">128</span></span>
</div>
<div class="item1">
<span>举报时间</span>
<span><span class="numberspan">24</span></span>
</div>
</div>
</div>
</div>
@ -183,13 +293,22 @@ export default {
bluePoint: require("@/assets/privateOrder/map/蓝点位.png"),
redPoint: require("@/assets/privateOrder/map/红点位.png"),
points: [
{ isActive: false, title: "数据信息", content: "近一个月"},
{ isActive: false, title: "数据信息", content: "近一个月" },
{ isActive: false, title: "数据信息", content: "近一个月",von:88,vtw:78,vth:97,vfo:91 },
{ isActive: false, title: "数据信息", content: "近一个月" },
{
isActive: false,
title: "数据信息",
content: "近一个月",
von: 88,
vtw: 78,
vth: 97,
vfo: 91,
},
{ isActive: false, title: "数据信息", content: "近一个月" },
{ isActive: false, title: "数据信息", content: "近一个月" },
{ isActive: false, title: "数据信息", content: "近一个月" },
],
routeName: "网络安全",
};
},
methods: {
@ -199,11 +318,37 @@ export default {
point.isActive = i === index ? !point.isActive : false;
});
},
getBackgroundStyle() {
//
if (this.routeName === "网络安全") {
return {
backgroundImage: `url(${require("@/assets/privateOrder/map/网络安全弹窗背景.png")})`,
};
} else if (this.routeName === "网络管理") {
return {
backgroundImage: `url(${require("@/assets/privateOrder/map/网络管理弹窗背景.png")})`,
};
}
//
return {
backgroundImage: `url(${require("@/assets/privateOrder/map/网络安全弹窗背景.png")})`,
};
},
},
mounted() {
// URL使
if (this.$route && this.$route.query && this.$route.query.name) {
this.routeName = this.$route.query.name;
} else {
//
this.routeName = "网络安全";
}
console.log("当前路由名称:", this.routeName);
},
};
</script>
<style lang='scss' scoped>
<style lang="scss" scoped>
.maincontainer {
width: 100%;
height: 100%;
@ -291,9 +436,9 @@ export default {
left: 100%;
margin-left: 10px;
z-index: 1000;
width: 300px;
height: 200px;
background-image: url("~@/assets/privateOrder/map/弹窗背景.png");
width: 500px;
height: 400px;
//background-image: url("~@/assets/privateOrder/map/.png");
background-size: 100% 100%;
background-repeat: no-repeat;
display: flex;
@ -304,6 +449,12 @@ export default {
display: flex;
justify-content: space-between;
align-items: center;
font-family: AlibabaPuHuiTiM;
font-size: 24px;
color: #ffffff;
line-height: 31px;
text-shadow: 3px 0px 6px #48566e;
text-align: left;
}
.topleft {
@ -316,25 +467,50 @@ export default {
.infocontainer {
width: 100%;
height: 100%;
padding-top: 10px;
padding-top: 60px;
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: column;
gap: 7px;
.item1 {
width: 80%;
height: 70px;
// background-color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
color: #b4f9ff;
line-height: 120px;
// line-height: 80px;
span {
font-size: 28px;
height: 100%;
}
.numberspan {
color: #f6e53f;
font-size: 20px;
padding-right: 7px;
}
}
.item {
width: 80%;
height: 25px;
height: 60px;
// background-color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
color: #B4F9FF;
color: #b4f9ff;
// line-height: 80px;
span {
font-size: 28px;
height: 100%;
}
.numberspan {
color: #F6E53F;
font-size: 20px;
padding-right: 7px;
color: #f6e53f;
font-size: 20px;
padding-right: 7px;
}
}
}
@ -347,7 +523,7 @@ export default {
p {
margin: 0;
color: #99A5BF;
color: #99a5bf;
font-size: 12px;
}
}

Loading…
Cancel
Save