suzhou-jichuang-lanhai
/
network-zz
10
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

网络管理修改

Browse Source
main
项洋 2 weeks ago
parent 9128d8cf0a
commit 83e51985ed
9 changed files with 352 additions and 158 deletions
Show Stats Download Patch File Download Diff File

0
src/assets/privateOrder/map/弹窗背景.png → src/assets/privateOrder/map/网络安全弹窗背景.png
Unescape View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 21 KiB

BIN
src/assets/privateOrder/map/网络管理弹窗背景.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
src/assets/sentimeent/上.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 49 KiB

After

Width:  |  Height:  |  Size: 46 KiB

BIN
src/assets/sentimeent/底.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 218 KiB

After

Width:  |  Height:  |  Size: 130 KiB

8
src/router/index.js
Unescape View File

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

12
src/views/privateOrder/Screen.vue
Unescape View File

@ -5,14 +5,14 @@
<div class="top_nav"> <div class="top_nav">
<div class="top_left"> <div class="top_left">
<router-link v-for="item in menus.slice(0, 2)" :key="item.id" class="nav_item left_nav" <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 }} {{ item.name }}
</router-link> </router-link>
</div> </div>
<!-- <div class="center_title">太仓市网络综合治理平台</div> --> <!-- <div class="center_title">太仓市网络综合治理平台</div> -->
<div class="top_right"> <div class="top_right">
<router-link v-for="item in menus.slice(2, 4)" :key="item.id" class="nav_item right_nav" <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 }} {{ item.name }}
</router-link> </router-link>
</div> </div>
@ -89,6 +89,8 @@ export default {
selectMenuId: 0, selectMenuId: 0,
// 菜单项集合 // 菜单项集合
menus: [], menus: [],
// 导航高亮状态
activeNavPath: '/screen/security',
// 当前时间 // 当前时间
now: { now: {
date: "", date: "",
@ -114,6 +116,9 @@ export default {
watch: { watch: {
$route: { $route: {
handler(route) { handler(route) {
// 更新当前活动路径
this.activeNavPath = route.path;
if ( if (
route.path !== "/screen/security" || route.path !== "/screen/security" ||
route.path !== "/screen/supplyChain" || route.path !== "/screen/supplyChain" ||
@ -140,6 +145,9 @@ export default {
{ id: 3, name: "网络管理", path: "/screen/ecosphere" }, { id: 3, name: "网络管理", path: "/screen/ecosphere" },
// { id: 4, name: "网络生态", path: "/screen/positiveEnergy" }, // { id: 4, name: "网络生态", path: "/screen/positiveEnergy" },
]; ];
// 初始设置当前路径
this.activeNavPath = this.$route.path;
setInterval(() => { setInterval(() => {
this.now.date = this.$moment().format("YYYY年 M月 D日"); this.now.date = this.$moment().format("YYYY年 M月 D日");

10
src/views/privateOrder/ecosphere/components/componentLeft.vue
Unescape View File

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

80
src/views/privateOrder/ecosphere/components/componentRight.vue
Unescape View File

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

400
src/views/privateOrder/security/components/componentCenter.vue
Unescape View File

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

Write Preview
Loading…
Cancel
Save