|
@@ -1,483 +1,506 @@
|
|
|
<style>
|
|
|
- .springFrame1 {
|
|
|
- z-index: 99999;
|
|
|
- }
|
|
|
-
|
|
|
- .springFrame1 .content ul li {
|
|
|
- height: 0.6rem;
|
|
|
- }
|
|
|
-
|
|
|
- .springFrame1 .content ul li h3,
|
|
|
- .springFrame1 .content ul li p {
|
|
|
- font-size: 0.1rem !important;
|
|
|
- }
|
|
|
+ .springFrame1 {
|
|
|
+ z-index: 99999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .springFrame1 .content ul li {
|
|
|
+ height: 0.6rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .springFrame1 .content ul li h3,
|
|
|
+ .springFrame1 .content ul li p {
|
|
|
+ font-size: 0.1rem !important;
|
|
|
+ }
|
|
|
</style>
|
|
|
<!-- 局本级 -->
|
|
|
|
|
|
<div class="springFrame springFrame1">
|
|
|
- <div class="springFrameTitle">
|
|
|
- <h2>局本级网络安全态势</h2>
|
|
|
+ <div class="springFrameTitle">
|
|
|
+ <h2>局本级网络安全态势</h2>
|
|
|
+ </div>
|
|
|
+ <!-- style="z-index: 3; left: 130px; top: 912px; width: 4133px; height: 1685px;" -->
|
|
|
+ <div class="box11 box active" data-name="test11" data-id="80"
|
|
|
+ style="z-index: 3; left: 130px; top: 912px; width: 4133px; height: 1685px;">
|
|
|
+ <div class="toolBox">
|
|
|
+ <span class="fit"></span>
|
|
|
+ <span class="close"></span>
|
|
|
</div>
|
|
|
- <!-- style="z-index: 3; left: 130px; top: 912px; width: 4133px; height: 1685px;" -->
|
|
|
- <div class="box11 box active" data-name="test11" data-id="80" style="z-index: 3; left: 130px; top: 912px; width: 4133px; height: 1685px;">
|
|
|
- <div class="toolBox">
|
|
|
- <span class="fit"></span>
|
|
|
- <span class="close"></span>
|
|
|
- </div>
|
|
|
- <div class="tool">
|
|
|
- <div class="title bgTitle">
|
|
|
- <h2>数据统计</h2>
|
|
|
+ <div class="tool">
|
|
|
+ <div class="title bgTitle">
|
|
|
+ <h2>数据统计</h2>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="test-box">
|
|
|
+ <div class="content">
|
|
|
+ <!-- 数据统计 -->
|
|
|
+ <div class="dataCount">
|
|
|
+ <div class="dataCount_box">
|
|
|
+ <div class="count-item item1">
|
|
|
+ <h3>业务系统</h3>
|
|
|
+ <div class="info-box">
|
|
|
+ <span class="num">3</span>
|
|
|
+ <span>个</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="test-box">
|
|
|
- <div class="content">
|
|
|
- <!-- 数据统计 -->
|
|
|
- <div class="dataCount">
|
|
|
- <div class="dataCount_box">
|
|
|
- <div class="count-item item1">
|
|
|
- <h3>业务系统</h3>
|
|
|
- <div class="info-box">
|
|
|
- <span class="num">3</span>
|
|
|
- <span>个</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="count-item item2">
|
|
|
- <h3>安全设备</h3>
|
|
|
- <div class="info-box">
|
|
|
- <span class="num">3</span>
|
|
|
- <span>台</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class="count-item item2">
|
|
|
+ <h3>安全设备</h3>
|
|
|
+ <div class="info-box">
|
|
|
+ <span class="num">3</span>
|
|
|
+ <span>台</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="panel-footer"></div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <div class="panel-footer"></div>
|
|
|
+ </div>
|
|
|
|
|
|
|
|
|
- <div class="box12 box" data-name="test12" data-id="81" style="z-index: 4; left: 162px; top: 2685px; width: 4123px; height: 1501px;">
|
|
|
- <div class="toolBox">
|
|
|
- <span class="fit"></span>
|
|
|
- <span class="close"></span>
|
|
|
- </div>
|
|
|
- <div class="tool">
|
|
|
- <div class="title bgTitle">
|
|
|
- <h2>局门户网站</h2>
|
|
|
+ <div class="box12 box" data-name="test12" data-id="81"
|
|
|
+ style="z-index: 4; left: 162px; top: 2685px; width: 4123px; height: 1501px;">
|
|
|
+ <div class="toolBox">
|
|
|
+ <span class="fit"></span>
|
|
|
+ <span class="close"></span>
|
|
|
+ </div>
|
|
|
+ <div class="tool">
|
|
|
+ <div class="title bgTitle">
|
|
|
+ <h2>局门户网站</h2>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="test-box">
|
|
|
+ <div class="content">
|
|
|
+ <!-- 数据统计 -->
|
|
|
+ <div class="dataCount">
|
|
|
+ <div class="dataCount_box">
|
|
|
+ <div class="left">
|
|
|
+ <img src="../images/networkSecurity/tu9.png" alt="">
|
|
|
+ <div class="spanBox">
|
|
|
+ <p class="txt">安全状态</p>
|
|
|
+ <p class="num">良好</p>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="test-box">
|
|
|
- <div class="content">
|
|
|
- <!-- 数据统计 -->
|
|
|
- <div class="dataCount">
|
|
|
- <div class="dataCount_box">
|
|
|
- <div class="left">
|
|
|
- <img src="../images/networkSecurity/tu9.png" alt="">
|
|
|
- <div class="spanBox">
|
|
|
- <p class="txt">安全状态</p>
|
|
|
- <p class="num">良好</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="right">
|
|
|
- <img src="../images/networkSecurity/tu10.png" alt="">
|
|
|
- <div class="spanBox">
|
|
|
- <p class="txt">高危漏洞</p>
|
|
|
- <p class="num">0</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class="right">
|
|
|
+ <img src="../images/networkSecurity/tu10.png" alt="">
|
|
|
+ <div class="spanBox">
|
|
|
+ <p class="txt">高危漏洞</p>
|
|
|
+ <p class="num">0</p>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="panel-footer"></div>
|
|
|
-
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <div class="panel-footer"></div>
|
|
|
|
|
|
- <!-- left: 162px; top: 4162px; -->
|
|
|
- <div class="box13 box" id="box13" data-name="test13" data-id="82" style="z-index: 5; left: 162px; top: 4190px; width: 4120px; height: 1936px;">
|
|
|
- <div class="toolBox">
|
|
|
- <span class="fit"></span>
|
|
|
- <span class="close"></span>
|
|
|
- </div>
|
|
|
- <div class="tool">
|
|
|
- <div class="title bgTitle">
|
|
|
- <h2>直属单位门户网站安全态势</h2>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="test-box">
|
|
|
- <div class="content">
|
|
|
- <!-- 数据统计 -->
|
|
|
- <div class="dataCount">
|
|
|
- <div class="dataCount_box">
|
|
|
- <div class="left">
|
|
|
- <img src="../images/networkSecurity/tu9.png" alt="">
|
|
|
- <div class="spanBox">
|
|
|
- <p class="txt">安全状态</p>
|
|
|
- <p class="num">良好</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="right">
|
|
|
- <img src="../images/networkSecurity/tu10.png" alt="">
|
|
|
- <div class="spanBox">
|
|
|
- <p class="txt">高危漏洞</p>
|
|
|
- <p class="num">0</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="floor-dist" _echarts_instance_="ec_1650358105783" style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative;">
|
|
|
- <div style="position: relative; width: 640px; height: 10px; padding: 0px; margin: 0px; border-width: 0px;">
|
|
|
- <canvas data-zr-dom-id="zr_0" width="640" height="10" style="position: absolute; left: 0px; top: 0px; width: 640px; height: 10px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas>
|
|
|
- </div>
|
|
|
- <div></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="panel-footer"></div>
|
|
|
+ </div>
|
|
|
|
|
|
+ <!-- left: 162px; top: 4162px; -->
|
|
|
+ <div class="box13 box" id="box13" data-name="test13" data-id="82"
|
|
|
+ style="z-index: 5; left: 162px; top: 4190px; width: 4120px; height: 1936px;">
|
|
|
+ <div class="toolBox">
|
|
|
+ <span class="fit"></span>
|
|
|
+ <span class="close"></span>
|
|
|
</div>
|
|
|
-
|
|
|
- <!-- style="z-index: 3; left: 10400px; top: 920px; height: 1600px; width: 4872px;" -->
|
|
|
- <div class="box14 box" data-name="test14" data-id="83" style="z-index: 3; left: 10400px; top: 892px; height: 1984px; width: 4848px;">
|
|
|
- <div class="toolBox">
|
|
|
- <span class="fit"></span>
|
|
|
- <span class="close"></span>
|
|
|
- </div>
|
|
|
- <div class="tool">
|
|
|
- <div class="title bgTitle">
|
|
|
- <h2>终端安全态势</h2>
|
|
|
+ <div class="tool">
|
|
|
+ <div class="title bgTitle">
|
|
|
+ <h2>直属单位门户网站安全态势</h2>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="test-box">
|
|
|
+ <div class="content">
|
|
|
+ <!-- 数据统计 -->
|
|
|
+ <div class="dataCount">
|
|
|
+ <div class="dataCount_box">
|
|
|
+ <div class="left">
|
|
|
+ <img src="../images/networkSecurity/tu9.png" alt="">
|
|
|
+ <div class="spanBox">
|
|
|
+ <p class="txt">安全状态</p>
|
|
|
+ <p class="num">良好</p>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="test-box">
|
|
|
- <div class="content active">
|
|
|
- <!-- 终端安全态势 -->
|
|
|
- <div class="dataCount">
|
|
|
- <div class="dataCount_box">
|
|
|
- <div class="left">
|
|
|
- <div class="one">
|
|
|
- <img src="../images/networkSecurity/tu2.png" alt="">
|
|
|
- <div class="spanBox">
|
|
|
- <p class="txt">感染台数</p>
|
|
|
- <p class="num">10</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="tow">
|
|
|
- <img src="../images/networkSecurity/tu3.png" alt="">
|
|
|
- <div class="spanBox">
|
|
|
- <p class="txt">病毒总数</p>
|
|
|
- <p class="num">0</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="right">
|
|
|
- <div class="floor-dist" _echarts_instance_="ec_1650358904595" style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative;">
|
|
|
- <div style="position: relative; width: 320px; height: 160px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;">
|
|
|
- <canvas data-zr-dom-id="zr_0" width="320" height="160" style="position: absolute; left: 0px; top: 0px; width: 320px; height: 160px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas>
|
|
|
- </div>
|
|
|
- <div></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class="right">
|
|
|
+ <img src="../images/networkSecurity/tu10.png" alt="">
|
|
|
+ <div class="spanBox">
|
|
|
+ <p class="txt">高危漏洞</p>
|
|
|
+ <p class="num">0</p>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="floor-dist" _echarts_instance_="ec_1650358105783"
|
|
|
+ style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative;">
|
|
|
+ <div style="position: relative; width: 640px; height: 10px; padding: 0px; margin: 0px; border-width: 0px;">
|
|
|
+ <canvas data-zr-dom-id="zr_0" width="640" height="10"
|
|
|
+ style="position: absolute; left: 0px; top: 0px; width: 640px; height: 10px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas>
|
|
|
+ </div>
|
|
|
+ <div></div>
|
|
|
</div>
|
|
|
- <div class="panel-footer"></div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <div class="panel-footer"></div>
|
|
|
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="box15 box" data-name="test15" data-id="84" style="z-index: 4; left: 10400px; top: 3010px; width: 4840px; height: 1516px;">
|
|
|
- <div class="toolBox">
|
|
|
- <span class="fit"></span>
|
|
|
- <span class="close"></span>
|
|
|
- </div>
|
|
|
- <div class="tool">
|
|
|
- <div class="title bgTitle">
|
|
|
- <h2>攻击类型</h2>
|
|
|
+ <!-- style="z-index: 3; left: 10400px; top: 920px; height: 1600px; width: 4872px;" -->
|
|
|
+ <div class="box14 box" data-name="test14" data-id="83"
|
|
|
+ style="z-index: 3; left: 10400px; top: 892px; height: 1984px; width: 4848px;">
|
|
|
+ <div class="toolBox">
|
|
|
+ <span class="fit"></span>
|
|
|
+ <span class="close"></span>
|
|
|
+ </div>
|
|
|
+ <div class="tool">
|
|
|
+ <div class="title bgTitle">
|
|
|
+ <h2>终端安全态势</h2>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="test-box">
|
|
|
+ <div class="content active">
|
|
|
+ <!-- 终端安全态势 -->
|
|
|
+ <div class="dataCount">
|
|
|
+ <div class="dataCount_box">
|
|
|
+ <div class="left">
|
|
|
+ <div class="one">
|
|
|
+ <img src="../images/networkSecurity/tu2.png" alt="">
|
|
|
+ <div class="spanBox">
|
|
|
+ <p class="txt">感染台数</p>
|
|
|
+ <p class="num">10</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="tow">
|
|
|
+ <img src="../images/networkSecurity/tu3.png" alt="">
|
|
|
+ <div class="spanBox">
|
|
|
+ <p class="txt">病毒总数</p>
|
|
|
+ <p class="num">0</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
-
|
|
|
+ <div class="right">
|
|
|
+ <div class="floor-dist" _echarts_instance_="ec_1650358904595"
|
|
|
+ style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative;">
|
|
|
+ <div
|
|
|
+ style="position: relative; width: 320px; height: 160px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;">
|
|
|
+ <canvas data-zr-dom-id="zr_0" width="320" height="160"
|
|
|
+ style="position: absolute; left: 0px; top: 0px; width: 320px; height: 160px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas>
|
|
|
+ </div>
|
|
|
+ <div></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="test-box">
|
|
|
- <div class="content">
|
|
|
- <!-- 攻击类型 -->
|
|
|
- <div class="container active">
|
|
|
- <div class="progress">
|
|
|
- <div class="proDesc"><i style="background-color: #ccc;"></i> 远程控制 》 恶意IP</div>
|
|
|
- <span style="width: 20%;"><span>20%</span></span>
|
|
|
- <span class="txt"><i style="color: #ccc;">202</i> 条</span>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="progress">
|
|
|
- <div class="proDesc"><i style="background-color: green;"></i>远程控制 》 恶意IP</div>
|
|
|
- <span class="green" style="width: 40%;"><span>40%</span></span>
|
|
|
- <span class="txt"><i style="color: green;">230</i> 条</span>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="panel-footer"></div>
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="progress">
|
|
|
- <div class="proDesc"><i style="background-color: orange;"></i>远程控制 》 恶意IP</div>
|
|
|
- <span class="orange" style="width: 60%;"><span>60%</span></span>
|
|
|
- <span class="txt"><i style="color: orange;">40</i>条</span>
|
|
|
- </div>
|
|
|
|
|
|
- <div class="progress">
|
|
|
- <div class="proDesc"><i style="background-color: red;"></i>远程控制 》 恶意IP</div>
|
|
|
- <span class="red" style="width: 80%;"><span>80%</span></span>
|
|
|
- <span class="txt"><i style="color: red;">210</i>条</span>
|
|
|
- </div>
|
|
|
+ <div class="box15 box" data-name="test15" data-id="84"
|
|
|
+ style="z-index: 4; left: 10400px; top: 3010px; width: 4840px; height: 1516px;">
|
|
|
+ <div class="toolBox">
|
|
|
+ <span class="fit"></span>
|
|
|
+ <span class="close"></span>
|
|
|
+ </div>
|
|
|
+ <div class="tool">
|
|
|
+ <div class="title bgTitle">
|
|
|
+ <h2>攻击类型</h2>
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="progress">
|
|
|
- <div class="proDesc"><i style="background-color: blue;"></i>远程控制 》 恶意IP</div>
|
|
|
- <span class="blue" style="width: 100%;"><span>100%</span></span>
|
|
|
- <span class="txt"><i style="color: blue;">230</i>条</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ <div class="test-box">
|
|
|
+ <div class="content">
|
|
|
+ <!-- 攻击类型 -->
|
|
|
+ <div class="container active">
|
|
|
+ <div class="progress">
|
|
|
+ <div class="proDesc"><i style="background-color: #ccc;"></i> 远程控制 》 恶意IP</div>
|
|
|
+ <span style="width: 20%;"><span>20%</span></span>
|
|
|
+ <span class="txt"><i style="color: #ccc;">202</i> 条</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="progress">
|
|
|
+ <div class="proDesc"><i style="background-color: green;"></i>远程控制 》 恶意IP</div>
|
|
|
+ <span class="green" style="width: 40%;"><span>40%</span></span>
|
|
|
+ <span class="txt"><i style="color: green;">230</i> 条</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="progress">
|
|
|
+ <div class="proDesc"><i style="background-color: orange;"></i>远程控制 》 恶意IP</div>
|
|
|
+ <span class="orange" style="width: 60%;"><span>60%</span></span>
|
|
|
+ <span class="txt"><i style="color: orange;">40</i>条</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="progress">
|
|
|
+ <div class="proDesc"><i style="background-color: red;"></i>远程控制 》 恶意IP</div>
|
|
|
+ <span class="red" style="width: 80%;"><span>80%</span></span>
|
|
|
+ <span class="txt"><i style="color: red;">210</i>条</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="progress">
|
|
|
+ <div class="proDesc"><i style="background-color: blue;"></i>远程控制 》 恶意IP</div>
|
|
|
+ <span class="blue" style="width: 100%;"><span>100%</span></span>
|
|
|
+ <span class="txt"><i style="color: blue;">230</i>条</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="panel-footer"></div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <div class="panel-footer"></div>
|
|
|
+ </div>
|
|
|
|
|
|
|
|
|
- <div class="box16 box" data-name="test16" data-id="85" style="z-index: 5; left: 10400px; top: 4629px; width: 2384px; height: 1604px;">
|
|
|
- <div class="toolBox">
|
|
|
- <span class="fit"></span>
|
|
|
- <span class="close"></span>
|
|
|
- </div>
|
|
|
- <div class="tool">
|
|
|
- <div class="title bgTitle">
|
|
|
- <h2>网络安全应急流程</h2>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="test-box">
|
|
|
- <div class="content">
|
|
|
- <!-- 网络安全应急流程 -->
|
|
|
- <img src="../images/networkSecurity/tu.png" alt="">
|
|
|
- <!-- <div class="floor-dist">
|
|
|
+ <div class="box16 box" data-name="test16" data-id="85"
|
|
|
+ style="z-index: 5; left: 10400px; top: 4629px; width: 2384px; height: 1604px;">
|
|
|
+ <div class="toolBox">
|
|
|
+ <span class="fit"></span>
|
|
|
+ <span class="close"></span>
|
|
|
+ </div>
|
|
|
+ <div class="tool">
|
|
|
+ <div class="title bgTitle">
|
|
|
+ <h2>网络安全应急流程</h2>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="test-box">
|
|
|
+ <div class="content">
|
|
|
+ <!-- 网络安全应急流程 -->
|
|
|
+ <img src="../images/networkSecurity/tu.png" alt="">
|
|
|
+ <!-- <div class="floor-dist">
|
|
|
</div> -->
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="panel-footer"></div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <div class="panel-footer"></div>
|
|
|
+ </div>
|
|
|
|
|
|
|
|
|
- <div class="box17 box" data-name="test17" data-id="86" style="z-index: 6; left: 12834px; top: 4625px; width: 2420px; height: 1604px;">
|
|
|
- <div class="toolBox">
|
|
|
- <span class="fit"></span>
|
|
|
- <span class="close"></span>
|
|
|
- </div>
|
|
|
- <div class="tool">
|
|
|
- <div class="title bgTitle">
|
|
|
- <h2>应急保障组成员信息</h2>
|
|
|
+ <div class="box17 box" data-name="test17" data-id="86"
|
|
|
+ style="z-index: 6; left: 12834px; top: 4625px; width: 2420px; height: 1604px;">
|
|
|
+ <div class="toolBox">
|
|
|
+ <span class="fit"></span>
|
|
|
+ <span class="close"></span>
|
|
|
+ </div>
|
|
|
+ <div class="tool">
|
|
|
+ <div class="title bgTitle">
|
|
|
+ <h2>应急保障组成员信息</h2>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="test-box">
|
|
|
+ <div class="content">
|
|
|
+ <!-- 应急保障组成员信息 -->
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <img src="../images/networkSecurity/kuang.png" alt="">
|
|
|
+ <div class="desc">
|
|
|
+ <h3>局科技信息处</h3>
|
|
|
+ <p>联系人:林老师</p>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="test-box">
|
|
|
- <div class="content">
|
|
|
- <!-- 应急保障组成员信息 -->
|
|
|
- <ul>
|
|
|
- <li>
|
|
|
- <img src="../images/networkSecurity/kuang.png" alt="">
|
|
|
- <div class="desc">
|
|
|
- <h3>局科技信息处</h3>
|
|
|
- <p>联系人:林老师</p>
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <img src="../images/networkSecurity/kuang.png" alt="">
|
|
|
- <div class="desc">
|
|
|
- <h3>局科技信息处</h3>
|
|
|
- <p>联系人:林老师</p>
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <img src="../images/networkSecurity/kuang.png" alt="">
|
|
|
- <div class="desc">
|
|
|
- <h3>局科技信息处</h3>
|
|
|
- <p>联系人:林老师</p>
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <img src="../images/networkSecurity/kuang.png" alt="">
|
|
|
- <div class="desc">
|
|
|
- <h3>局科技信息处</h3>
|
|
|
- <p>联系人:林老师</p>
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <img src="../images/networkSecurity/kuang.png" alt="">
|
|
|
+ <div class="desc">
|
|
|
+ <h3>局科技信息处</h3>
|
|
|
+ <p>联系人:林老师</p>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="panel-footer"></div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <img src="../images/networkSecurity/kuang.png" alt="">
|
|
|
+ <div class="desc">
|
|
|
+ <h3>局科技信息处</h3>
|
|
|
+ <p>联系人:林老师</p>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <img src="../images/networkSecurity/kuang.png" alt="">
|
|
|
+ <div class="desc">
|
|
|
+ <h3>局科技信息处</h3>
|
|
|
+ <p>联系人:林老师</p>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <div class="panel-footer"></div>
|
|
|
+ </div>
|
|
|
|
|
|
|
|
|
- <div class="fx" style="top: 15%;">
|
|
|
- <p>安全等级</p>
|
|
|
- <h2>优</h2>
|
|
|
- </div>
|
|
|
- <div class="dj" style="bottom: 5%;">
|
|
|
- <p>风险系数</p>
|
|
|
- <h2>低</h2>
|
|
|
- </div>
|
|
|
+ <div class="fx" style="top: 15%;">
|
|
|
+ <p>安全等级</p>
|
|
|
+ <h2>优</h2>
|
|
|
+ </div>
|
|
|
+ <div class="dj" style="bottom: 5%;">
|
|
|
+ <p>风险系数</p>
|
|
|
+ <h2>低</h2>
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="frameClose">X</div>
|
|
|
+ <div class="frameClose">X</div>
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
- const dom13 = document.querySelector('.springFrame1 .box13 .floor-dist');
|
|
|
- const testDom13 = document.querySelector('.springFrame1 .box13');
|
|
|
- const dom14 = document.querySelector(".springFrame1 .box14 .floor-dist");
|
|
|
- const testDom14 = document.querySelector(".springFrame1 .box14");
|
|
|
- // 数据统计
|
|
|
+ const dom13 = document.querySelector('.springFrame1 .box13 .floor-dist');
|
|
|
+ const testDom13 = document.querySelector('.springFrame1 .box13');
|
|
|
+ const dom14 = document.querySelector(".springFrame1 .box14 .floor-dist");
|
|
|
+ const testDom14 = document.querySelector(".springFrame1 .box14");
|
|
|
+ // 数据统计
|
|
|
+ function sp1Ajax11() {
|
|
|
$.ajax({
|
|
|
- url: "http://23.37.100.87:8084" + "/basic/safetyInfor/getSafetyInfoByMonth",
|
|
|
- data: {
|
|
|
- orgType: 3
|
|
|
- },
|
|
|
- success: function(res) {
|
|
|
- console.log('springFrame1 数据统计', res);
|
|
|
- const result = res.result;
|
|
|
- if (!result) {
|
|
|
- $('.springFrame1 .box11 .item1 .num').html(0)
|
|
|
- $('.springFrame1 .box11 .item2 .num').html(0)
|
|
|
- } else {
|
|
|
- $('.springFrame1 .box11 .item1 .num').html(result.sys_number)
|
|
|
- $('.springFrame1 .box11 .item2 .num').html(result.equipment_number)
|
|
|
- }
|
|
|
- },
|
|
|
- error: function() {
|
|
|
- console.log('springFrame1 数据统计超时');
|
|
|
+ url: "http://23.37.100.87:8084" + "/basic/safetyInfor/getSafetyInfoByMonth",
|
|
|
+ data: {
|
|
|
+ orgType: 3
|
|
|
+ },
|
|
|
+ success: function (res) {
|
|
|
+ console.log('springFrame1 数据统计', res);
|
|
|
+ const result = res.result;
|
|
|
+ if (!result) {
|
|
|
+ $('.springFrame1 .box11 .item1 .num').html(0)
|
|
|
+ $('.springFrame1 .box11 .item2 .num').html(0)
|
|
|
+ } else {
|
|
|
+ $('.springFrame1 .box11 .item1 .num').html(result.sys_number)
|
|
|
+ $('.springFrame1 .box11 .item2 .num').html(result.equipment_number)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ error: function () {
|
|
|
+ console.log('springFrame1 数据统计超时');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 局本级门户网站
|
|
|
+ function sp1Ajax12() {
|
|
|
+ $.ajax({
|
|
|
+ url: "http://23.37.100.87:8084" + "/basic/safetyInfor/getWebSafetyStatusByOrg",
|
|
|
+ data: {
|
|
|
+ orgType: 3
|
|
|
+ },
|
|
|
+ success: function (res) {
|
|
|
+ const result = res.result;
|
|
|
+ console.log(result, '优秀');
|
|
|
+ if (!result.length) {
|
|
|
+ $('.springFrame1 .box12 .dataCount_box').html('暂无数据')
|
|
|
+ $('.springFrame1 .box13 .dataCount_box').html('暂无数据')
|
|
|
+ // $('.springFrame1 .box12 .content').append('<div class="noData">暂无数据</div>')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ let status = '优秀'
|
|
|
+ let status2 = '优秀'
|
|
|
+ if (result.safetyStatusFirst === 1) {
|
|
|
+ status = '优秀';
|
|
|
+ status2 = '优秀';
|
|
|
+
|
|
|
+ } else if (result.safetyStatusFirst === 2) {
|
|
|
+ status = '良好'
|
|
|
+ status2 = '良好'
|
|
|
+ } else if (result.safetyStatusFirst === 3) {
|
|
|
+ status = '一般';
|
|
|
+ status2 = '一般'
|
|
|
+ } else {
|
|
|
+ status = '恶劣'
|
|
|
+ status2 = '恶劣'
|
|
|
}
|
|
|
- });
|
|
|
-
|
|
|
|
|
|
- // 局本级门户网站
|
|
|
- $.ajax({
|
|
|
- url: "http://23.37.100.87:8084" + "/basic/safetyInfo/getWebSafetyStatusByOrg",
|
|
|
- data: {
|
|
|
- orgType: 3
|
|
|
- },
|
|
|
- success: function(res) {
|
|
|
- const result = res.result;
|
|
|
- console.log(result, '优秀');
|
|
|
- if (!result.length) {
|
|
|
- $('.springFrame1 .box12 .dataCount_box').html('暂无数据')
|
|
|
- $('.springFrame1 .box13 .dataCount_box').html('暂无数据')
|
|
|
- // $('.springFrame1 .box12 .content').append('<div class="noData">暂无数据</div>')
|
|
|
- return
|
|
|
- }
|
|
|
- let status = '优秀'
|
|
|
- let status2 = '优秀'
|
|
|
- if (result.safetyStatusFirst === 1) {
|
|
|
- status = '优秀';
|
|
|
- status2 = '优秀';
|
|
|
-
|
|
|
- } else if (result.safetyStatusFirst === 2) {
|
|
|
- status = '良好'
|
|
|
- status2 = '良好'
|
|
|
- } else if (result.safetyStatusFirst === 3) {
|
|
|
- status = '一般';
|
|
|
- status2 = '一般'
|
|
|
- } else {
|
|
|
- status = '恶劣'
|
|
|
- status2 = '恶劣'
|
|
|
- }
|
|
|
-
|
|
|
- $('.springFrame1 .box12 .left .num').html(status);
|
|
|
- $('.springFrame1 .box12 .right .num').html(result.highRiskNumberFirst);
|
|
|
-
|
|
|
-
|
|
|
- $('.springFrame1 .box13 .left .num').html(status2);
|
|
|
- $('.springFrame1 .box13 .right .num').html(result.highRiskNumberSecond);
|
|
|
-
|
|
|
- const newArr = result.webAttackTypeList.map(item => {
|
|
|
- return {
|
|
|
- value: item.attack_count,
|
|
|
- name: item.attack_type
|
|
|
- }
|
|
|
- });
|
|
|
- setCharts13(dom13, testDom13, newArr);
|
|
|
+ $('.springFrame1 .box12 .left .num').html(status);
|
|
|
+ $('.springFrame1 .box12 .right .num').html(result.highRiskNumberFirst);
|
|
|
|
|
|
- },
|
|
|
- error: function(err) {
|
|
|
- console.log("-dfdf-------------超时");
|
|
|
- },
|
|
|
- });
|
|
|
|
|
|
+ $('.springFrame1 .box13 .left .num').html(status2);
|
|
|
+ $('.springFrame1 .box13 .right .num').html(result.highRiskNumberSecond);
|
|
|
|
|
|
- // 终端安全态势
|
|
|
- $.ajax({
|
|
|
- url: "http://23.37.100.87:8084" + "/basic/OfficeVirus/getOfficeSafetyInfo",
|
|
|
- data: {
|
|
|
- orgType: 3
|
|
|
- },
|
|
|
- success: function(res) {
|
|
|
- const result = res.result;
|
|
|
- console.log('终端安全态势', result);
|
|
|
-
|
|
|
- if (!result) {
|
|
|
- // $('.springFrame1 .box14 .content').append('<div class="noData">暂无数据</div>')
|
|
|
- $('.springFrame1 .box14 .left .one .num').html('-');
|
|
|
- $('.springFrame1 .box14 .left .tow .num').html('-');
|
|
|
- return
|
|
|
- }
|
|
|
- $('.springFrame1 .box14 .left .one .num').html(result.infectedNumber);
|
|
|
- $('.springFrame1 .box14 .left .tow .num').html(result.virusesTNumber);
|
|
|
-
|
|
|
- const newArr = result.virus.map(item => {
|
|
|
- return {
|
|
|
- value: item.virus_number,
|
|
|
- name: item.virus_name
|
|
|
- }
|
|
|
- });
|
|
|
- console.log(newArr);
|
|
|
- setCharts14(dom14, testDom14, newArr);
|
|
|
+ const newArr = result.webAttackTypeList.map(item => {
|
|
|
+ return {
|
|
|
+ value: item.attack_count,
|
|
|
+ name: item.attack_type
|
|
|
+ }
|
|
|
+ });
|
|
|
+ setCharts13(dom13, testDom13, newArr);
|
|
|
|
|
|
- },
|
|
|
- error: function(err) {
|
|
|
- console.log("-终端安全态势-----------超时");
|
|
|
- },
|
|
|
+ },
|
|
|
+ error: function (err) {
|
|
|
+ console.log("-dfdf-------------超时");
|
|
|
+ },
|
|
|
});
|
|
|
+ }
|
|
|
|
|
|
+ // 终端安全态势
|
|
|
+ function sp1Ajax14() {
|
|
|
+ $.ajax({
|
|
|
+ url: "http://23.37.100.87:8084" + "/basic/OfficeVirus/getOfficeSafetyInfo",
|
|
|
+ data: {
|
|
|
+ orgType: 3
|
|
|
+ },
|
|
|
+ success: function (res) {
|
|
|
+ const result = res.result;
|
|
|
+ console.log('终端安全态势', result);
|
|
|
+
|
|
|
+ if (!result) {
|
|
|
+ // $('.springFrame1 .box14 .content').append('<div class="noData">暂无数据</div>')
|
|
|
+ $('.springFrame1 .box14 .left .one .num').html('-');
|
|
|
+ $('.springFrame1 .box14 .left .tow .num').html('-');
|
|
|
+ return
|
|
|
+ }
|
|
|
+ $('.springFrame1 .box14 .left .one .num').html(result.infectedNumber);
|
|
|
+ $('.springFrame1 .box14 .left .tow .num').html(result.virusesTNumber);
|
|
|
+
|
|
|
+ const newArr = result.virus.map(item => {
|
|
|
+ return {
|
|
|
+ value: item.virus_number,
|
|
|
+ name: item.virus_name
|
|
|
+ }
|
|
|
+ });
|
|
|
+ console.log(newArr);
|
|
|
+ setCharts14(dom14, testDom14, newArr);
|
|
|
+
|
|
|
+ },
|
|
|
+ error: function (err) {
|
|
|
+ console.log("-终端安全态势-----------超时");
|
|
|
+ },
|
|
|
+ });
|
|
|
+ }
|
|
|
|
|
|
-// 攻击类型
|
|
|
+ // 攻击类型
|
|
|
+ let sp1flag = false;
|
|
|
+ function sp1Ajax15() {
|
|
|
$.ajax({
|
|
|
- url: "http://23.37.100.87:8084" + "/basic/AttackType/getTopAttackType",
|
|
|
- data: {
|
|
|
- orgType: 3
|
|
|
- },
|
|
|
- success: function(res) {
|
|
|
- const result = res.result;
|
|
|
- console.log('攻击类型', result);
|
|
|
- if (!result) {
|
|
|
- return
|
|
|
- }
|
|
|
- const progress = result.map(item => {
|
|
|
- return `
|
|
|
+ url: "http://23.37.100.87:8084" + "/basic/AttackType/getTopAttackType",
|
|
|
+ data: {
|
|
|
+ orgType: 3
|
|
|
+ },
|
|
|
+ success: function (res) {
|
|
|
+ const result = res.result;
|
|
|
+ console.log('攻击类型', result);
|
|
|
+ if (!result) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const progress = result.map(item => {
|
|
|
+ return `
|
|
|
<div class="progress">
|
|
|
<div class="proDesc"><i style="background-color: green;"></i>${item.attack_type}</div>
|
|
|
<span class="green" style="width: 40%;"><span>40%</span></span>
|
|
|
<span class="txt"><i style="color: green;">${item.attack_count}</i> 条</span>
|
|
|
</div>
|
|
|
`
|
|
|
- }).join('');
|
|
|
-
|
|
|
- $('.springFrame1 .box15 .container').html(progress);
|
|
|
- },
|
|
|
- error: function(err) {
|
|
|
- console.log("------------------------超时");
|
|
|
- },
|
|
|
+ }).join('');
|
|
|
+
|
|
|
+ $('.springFrame1 .box15 .container').html(progress);
|
|
|
+ const dom = $('.springFrame1 .box15 .content');
|
|
|
+ setTimeout(() => {
|
|
|
+ scroll(dom, 0,sp1flag)
|
|
|
+ sp1flag = true;
|
|
|
+ }, 1500);
|
|
|
+ },
|
|
|
+ error: function (err) {
|
|
|
+ console.log("------------------------超时");
|
|
|
+ },
|
|
|
});
|
|
|
+ }
|
|
|
|
|
|
-
|
|
|
- // 应急保障组成员信息
|
|
|
+ // 应急保障组成员信息
|
|
|
+ function sp1Ajax17() {
|
|
|
$.ajax({
|
|
|
- url: "http://23.37.100.87:8084" + "/basic/GuaranteeGroup/getAllGuaranteeGroup",
|
|
|
- success: function(res) {
|
|
|
- const result = res.result;
|
|
|
- console.log('应急保障组成员信息', result);
|
|
|
- if (!result) {
|
|
|
- return
|
|
|
- }
|
|
|
-
|
|
|
- const html = result.map(item => {
|
|
|
- return `
|
|
|
+ url: "http://23.37.100.87:8084" + "/basic/GuaranteeGroup/getAllGuaranteeGroup",
|
|
|
+ success: function (res) {
|
|
|
+ const result = res.result;
|
|
|
+ console.log('应急保障组成员信息', result);
|
|
|
+ if (!result) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ const html = result.map(item => {
|
|
|
+ return `
|
|
|
<li>
|
|
|
<img src="../images/networkSecurity/kuang.png" alt="">
|
|
|
<div class="desc">
|
|
@@ -486,166 +509,165 @@
|
|
|
</div>
|
|
|
</li>
|
|
|
`
|
|
|
- }).join('')
|
|
|
- $('.springFrame1 .box17 .content ul').html(html);
|
|
|
+ }).join('')
|
|
|
+ $('.springFrame1 .box17 .content ul').html(html);
|
|
|
+ },
|
|
|
+ error: function (err) {
|
|
|
+ console.log("----应急保障组成员信息------------超时");
|
|
|
+ },
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ function setCharts13(echartDom, testDom, data = []) {
|
|
|
+ const defaultData = [{
|
|
|
+ value: 1048,
|
|
|
+ name: 'java攻击'
|
|
|
+ }, {
|
|
|
+ value: 735,
|
|
|
+ name: '协议违规'
|
|
|
+ }, {
|
|
|
+ value: 580,
|
|
|
+ name: '文件限制'
|
|
|
+ }, {
|
|
|
+ value: 484,
|
|
|
+ name: '其他'
|
|
|
+ }];
|
|
|
+
|
|
|
+ if (data === undefined || data.length === 0) {
|
|
|
+ data = defaultData;
|
|
|
+ }
|
|
|
+ let timer = null;
|
|
|
+ // 1实例化对象
|
|
|
+ const myChart = echarts.init(echartDom);
|
|
|
+ const option = {
|
|
|
+ color: [
|
|
|
+ "#006cff",
|
|
|
+ "#47BAFD",
|
|
|
+ "#DA8F51"
|
|
|
+ ],
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item'
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ orient: 'vertical',
|
|
|
+ top: "center",
|
|
|
+ right: "480",
|
|
|
+ textStyle: {
|
|
|
+ color: "#fff",
|
|
|
+ fontSize: "100",
|
|
|
},
|
|
|
- error: function(err) {
|
|
|
- console.log("----应急保障组成员信息------------超时");
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ name: '攻击类型',
|
|
|
+ type: 'pie',
|
|
|
+ radius: ['30%', '70%'],
|
|
|
+ center: ["20%", "50%"],
|
|
|
+ avoidLabelOverlap: false,
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ position: 'center'
|
|
|
},
|
|
|
- });
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- function setCharts13(echartDom, testDom, data = []) {
|
|
|
- const defaultData = [{
|
|
|
- value: 1048,
|
|
|
- name: 'java攻击'
|
|
|
- }, {
|
|
|
- value: 735,
|
|
|
- name: '协议违规'
|
|
|
- }, {
|
|
|
- value: 580,
|
|
|
- name: '文件限制'
|
|
|
- }, {
|
|
|
- value: 484,
|
|
|
- name: '其他'
|
|
|
- }];
|
|
|
-
|
|
|
- if (data === undefined || data.length === 0) {
|
|
|
- data = defaultData;
|
|
|
- }
|
|
|
- let timer = null;
|
|
|
- // 1实例化对象
|
|
|
- const myChart = echarts.init(echartDom);
|
|
|
- const option = {
|
|
|
- color: [
|
|
|
- "#006cff",
|
|
|
- "#47BAFD",
|
|
|
- "#DA8F51"
|
|
|
- ],
|
|
|
- tooltip: {
|
|
|
- trigger: 'item'
|
|
|
- },
|
|
|
- legend: {
|
|
|
- orient: 'vertical',
|
|
|
- top: "center",
|
|
|
- right: "480",
|
|
|
- textStyle: {
|
|
|
- color: "#fff",
|
|
|
- fontSize: "100",
|
|
|
- },
|
|
|
- },
|
|
|
- series: [{
|
|
|
- name: '攻击类型',
|
|
|
- type: 'pie',
|
|
|
- radius: ['30%', '70%'],
|
|
|
- center: ["20%", "50%"],
|
|
|
- avoidLabelOverlap: false,
|
|
|
- label: {
|
|
|
- show: false,
|
|
|
- position: 'center'
|
|
|
- },
|
|
|
- emphasis: {
|
|
|
- label: {
|
|
|
- show: true,
|
|
|
- fontSize: '100',
|
|
|
- fontWeight: 'bold'
|
|
|
- }
|
|
|
- },
|
|
|
- itemStyle: {
|
|
|
- shadowColor: 'rgba(71, 186, 253, .5)',
|
|
|
- shadowBlur: 100,
|
|
|
- },
|
|
|
- labelLine: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- data: data
|
|
|
- }]
|
|
|
- };
|
|
|
- myChart.setOption(option);
|
|
|
-
|
|
|
- window.addEventListener('resize', function() {
|
|
|
- if (timer) {
|
|
|
- clearTimeout(timer);
|
|
|
- timer = null;
|
|
|
- }
|
|
|
- timer = setTimeout(() => {
|
|
|
- myChart.resize();
|
|
|
- }, 500);
|
|
|
- })
|
|
|
- obsDom(testDom, myChart)
|
|
|
+ emphasis: {
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ fontSize: '100',
|
|
|
+ fontWeight: 'bold'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ shadowColor: 'rgba(71, 186, 253, .5)',
|
|
|
+ shadowBlur: 100,
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ data: data
|
|
|
+ }]
|
|
|
+ };
|
|
|
+ myChart.setOption(option);
|
|
|
+
|
|
|
+ window.addEventListener('resize', function () {
|
|
|
+ if (timer) {
|
|
|
+ clearTimeout(timer);
|
|
|
+ timer = null;
|
|
|
+ }
|
|
|
+ timer = setTimeout(() => {
|
|
|
+ myChart.resize();
|
|
|
+ }, 500);
|
|
|
+ })
|
|
|
+ obsDom(testDom, myChart)
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ function setCharts14(echartDom, testDom, data = []) {
|
|
|
+ const defaultData = [{
|
|
|
+ value: 1048,
|
|
|
+ name: '广告'
|
|
|
+ }, {
|
|
|
+ value: 735,
|
|
|
+ name: '木马'
|
|
|
+ }, , {
|
|
|
+ value: 484,
|
|
|
+ name: '其他'
|
|
|
+ }];
|
|
|
+
|
|
|
+ if (data === undefined || data.length === 0) {
|
|
|
+ data = defaultData;
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
- function setCharts14(echartDom, testDom, data = []) {
|
|
|
- const defaultData = [{
|
|
|
- value: 1048,
|
|
|
- name: '广告'
|
|
|
- }, {
|
|
|
- value: 735,
|
|
|
- name: '木马'
|
|
|
- }, , {
|
|
|
- value: 484,
|
|
|
- name: '其他'
|
|
|
- }];
|
|
|
-
|
|
|
- if (data === undefined || data.length === 0) {
|
|
|
- data = defaultData;
|
|
|
- }
|
|
|
- console.log(data);
|
|
|
- // 1实例化对象
|
|
|
- myChart = echarts.init(echartDom);
|
|
|
- let option = {
|
|
|
- color: [
|
|
|
- "#006cff",
|
|
|
- "#47BAFD",
|
|
|
- "#DA8F51"
|
|
|
- ],
|
|
|
- tooltip: {
|
|
|
- trigger: 'item'
|
|
|
- },
|
|
|
- legend: {
|
|
|
- orient: 'vertical',
|
|
|
- top: "center",
|
|
|
- right: "50",
|
|
|
- textStyle: {
|
|
|
- color: "#fff",
|
|
|
- fontSize: "100",
|
|
|
- },
|
|
|
- },
|
|
|
- series: [{
|
|
|
- name: 'Access From',
|
|
|
- type: 'pie',
|
|
|
- radius: ['20%', '40%'],
|
|
|
- center: ["30%", "55%"],
|
|
|
- avoidLabelOverlap: false,
|
|
|
- label: {
|
|
|
- show: false,
|
|
|
- position: 'center'
|
|
|
- },
|
|
|
- emphasis: {
|
|
|
- label: {
|
|
|
- show: true,
|
|
|
- fontSize: '140',
|
|
|
- fontWeight: 'bold'
|
|
|
- }
|
|
|
- },
|
|
|
- itemStyle: {
|
|
|
- shadowColor: 'rgba(71, 186, 253, .5)',
|
|
|
- shadowBlur: 100,
|
|
|
- },
|
|
|
- labelLine: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- data: data
|
|
|
- }]
|
|
|
- };
|
|
|
- myChart.setOption(option);
|
|
|
- // obsDom(`.test14 .box`, myChart)
|
|
|
-
|
|
|
- if (!testDom) {
|
|
|
- testDom = document.querySelectorAll('.test14 .box');
|
|
|
- }
|
|
|
- obsDom(testDom, myChart)
|
|
|
+ console.log(data);
|
|
|
+ // 1实例化对象
|
|
|
+ myChart = echarts.init(echartDom);
|
|
|
+ let option = {
|
|
|
+ color: [
|
|
|
+ "#006cff",
|
|
|
+ "#47BAFD",
|
|
|
+ "#DA8F51"
|
|
|
+ ],
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item'
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ orient: 'vertical',
|
|
|
+ top: "center",
|
|
|
+ right: "50",
|
|
|
+ textStyle: {
|
|
|
+ color: "#fff",
|
|
|
+ fontSize: "100",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ name: 'Access From',
|
|
|
+ type: 'pie',
|
|
|
+ radius: ['20%', '40%'],
|
|
|
+ center: ["30%", "55%"],
|
|
|
+ avoidLabelOverlap: false,
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ position: 'center'
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ fontSize: '140',
|
|
|
+ fontWeight: 'bold'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ shadowColor: 'rgba(71, 186, 253, .5)',
|
|
|
+ shadowBlur: 100,
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ data: data
|
|
|
+ }]
|
|
|
+ };
|
|
|
+ myChart.setOption(option);
|
|
|
+ // obsDom(`.test14 .box`, myChart)
|
|
|
+
|
|
|
+ if (!testDom) {
|
|
|
+ testDom = document.querySelectorAll('.test14 .box');
|
|
|
}
|
|
|
+ obsDom(testDom, myChart)
|
|
|
+ }
|
|
|
</script>
|