道友别走：手写网络拓扑图Illustrator + iconfont+ jquery+css3特效生成svg特效
作者：互联网
所需工具：
矢量绘图软件：Adobe Illustrator
阿里矢量图标库：https://www.iconfont.cn（下载成将各个矢量图标，下载AI格式，然后用Adobe Illustrator合成为网络拓扑图 ）
在hbuilderX或者其他ide开发工具开发，引入JQ，添加交互css特效等
点击其中某个设备或显示弹窗:
所有代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<body>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="1000px" height="1500px" viewBox="0 0 100.891 200.279" enable-background="new 0 0 100.891 200.279"
xml:space="preserve">
<g class="a1 a2 a3 a4" id="sjcj1" data-type="大数据处理">
<defs>
<rect id="SVGID_3_" x="5.114" y="46.867" width="4.708" height="10.197" />
</defs>
<clipPath id="SVGID_4_">
<use xlink:href="#SVGID_3_" overflow="visible" />
</clipPath>
<path clip-path="url(#SVGID_4_)" d="M5.406,46.873h4.116c0.078,0,0.152,0.054,0.208,0.149c0.055,0.096,0.086,0.225,0.086,0.36
v2.544H5.113v-2.544c0-0.135,0.031-0.265,0.086-0.36C5.254,46.927,5.329,46.873,5.406,46.873L5.406,46.873z M5.406,46.873" />
<rect x="5.113" y="50.436" clip-path="url(#SVGID_4_)" width="4.704" height="3.053" />
<path clip-path="url(#SVGID_4_)" d="M5.113,53.998h4.704v2.544c0,0.135-0.031,0.264-0.086,0.36
c-0.055,0.095-0.13,0.149-0.208,0.149H5.406c-0.078,0-0.152-0.054-0.208-0.149c-0.055-0.096-0.086-0.225-0.086-0.36V53.998z
M5.113,53.998" />
<path class="sjci-host" fill="#5390EA" d="M6.216,47.891h1.852c0.344,0,0.515,0.169,0.515,0.509s-0.171,0.509-0.515,0.509H6.216
C5.872,48.909,5.7,48.74,5.7,48.4S5.872,47.891,6.216,47.891L6.216,47.891z M6.216,47.891" />
<path class="sjci-host" fill="#5390EA" d="M6.216,51.453h1.852c0.344,0,0.515,0.17,0.515,0.509s-0.171,0.509-0.515,0.509H6.216
c-0.343,0-0.515-0.169-0.515-0.509S5.872,51.453,6.216,51.453L6.216,51.453z M6.216,51.453" />
<path class="sjci-host" fill="#5390EA" d="M8.071,55.525c0,0.337,0.272,0.611,0.608,0.611c0.336,0,0.608-0.273,0.608-0.611s-0.272-0.61-0.608-0.61
C8.343,54.914,8.071,55.187,8.071,55.525L8.071,55.525z M8.071,55.525" />
<text transform="matrix(1 0 0 1 5.3201 45.0872)" font-family="'MicrosoftYaHeiLight'" font-size="1.2">大数据处理</text>
<rect class="line-state" x="7.141" y="57.064" width="0.326" height="4.826" />
</g>
<g class="a1 a2 a3 a4" id="sjcj" data-type="大数据处理">
<defs>
<rect id="SVGID_5_" x="13.17" y="46.867" width="4.707" height="10.197" />
</defs>
<clipPath id="SVGID_6_">
<use xlink:href="#SVGID_5_" overflow="visible" />
</clipPath>
<path clip-path="url(#SVGID_6_)" d="M13.463,46.873h4.115c0.078,0,0.152,0.054,0.208,0.149c0.056,0.096,0.087,0.225,0.087,0.36
v2.544h-4.705v-2.544c0-0.135,0.031-0.265,0.086-0.36C13.311,46.927,13.385,46.873,13.463,46.873L13.463,46.873z M13.463,46.873" />
<rect x="13.168" y="50.436" clip-path="url(#SVGID_6_)" width="4.705" height="3.053" />
<path clip-path="url(#SVGID_6_)" d="M13.168,53.998h4.705v2.544c0,0.135-0.031,0.264-0.087,0.36
c-0.056,0.095-0.13,0.149-0.208,0.149h-4.115c-0.078,0-0.152-0.054-0.209-0.149c-0.055-0.096-0.086-0.225-0.086-0.36V53.998z
M13.168,53.998" />
<path class="sjci-host" fill="#5390EA" d="M14.272,47.891h1.852c0.344,0,0.515,0.169,0.515,0.509s-0.171,0.509-0.515,0.509h-1.852
c-0.344,0-0.516-0.169-0.516-0.509S13.928,47.891,14.272,47.891L14.272,47.891z M14.272,47.891" />
<path class="sjci-host" fill="#5390EA" d="M14.272,51.453h1.852c0.344,0,0.515,0.17,0.515,0.509s-0.171,0.509-0.515,0.509h-1.852
c-0.344,0-0.516-0.169-0.516-0.509S13.928,51.453,14.272,51.453L14.272,51.453z M14.272,51.453" />
<path class="sjci-host" fill="#5390EA" d="M16.127,55.525c0,0.337,0.271,0.611,0.607,0.611c0.337,0,0.609-0.273,0.609-0.611s-0.272-0.61-0.609-0.61
C16.399,54.914,16.127,55.187,16.127,55.525L16.127,55.525z M16.127,55.525" />
<text transform="matrix(1 0 0 1 13.1658 45.0872)" font-family="'MicrosoftYaHeiLight'" font-size="1.2">大数据处理</text>
<rect class="line-state" x="15.252" y="57.064" width="0.326" height="4.826" />
</g>
<g class="a1 a2 a3 a4" id="fwqjk" data-type="监控服务器">
<defs>
<rect id="SVGID_7_" x="21.227" y="46.867" width="4.707" height="10.197" />
</defs>
<clipPath id="SVGID_8_">
<use xlink:href="#SVGID_7_" overflow="visible" />
</clipPath>
<path clip-path="url(#SVGID_8_)" d="M21.52,46.873h4.115c0.078,0,0.152,0.054,0.208,0.149c0.056,0.096,0.087,0.225,0.087,0.36
v2.544h-4.705v-2.544c0-0.135,0.031-0.265,0.086-0.36C21.367,46.927,21.442,46.873,21.52,46.873L21.52,46.873z M21.52,46.873" />
<rect x="21.225" y="50.436" clip-path="url(#SVGID_8_)" width="4.705" height="3.053" />
<path clip-path="url(#SVGID_8_)" d="M21.225,53.998h4.705v2.544c0,0.135-0.031,0.264-0.087,0.36
c-0.056,0.095-0.13,0.149-0.208,0.149H21.52c-0.078,0-0.152-0.054-0.209-0.149c-0.055-0.096-0.086-0.225-0.086-0.36V53.998z
M21.225,53.998" />
<path class="sjci-host" fill="#5390EA" d="M22.328,47.891h1.852c0.344,0,0.515,0.169,0.515,0.509s-0.171,0.509-0.515,0.509h-1.852
c-0.344,0-0.516-0.169-0.516-0.509S21.985,47.891,22.328,47.891L22.328,47.891z M22.328,47.891" />
<path class="sjci-host" fill="#5390EA" d="M22.328,51.453h1.852c0.344,0,0.515,0.17,0.515,0.509s-0.171,0.509-0.515,0.509h-1.852
c-0.344,0-0.516-0.169-0.516-0.509S21.985,51.453,22.328,51.453L22.328,51.453z M22.328,51.453" />
<path class="sjci-host" fill="#5390EA" d="M24.184,55.525c0,0.337,0.271,0.611,0.607,0.611c0.337,0,0.609-0.273,0.609-0.611s-0.272-0.61-0.609-0.61
C24.455,54.914,24.184,55.187,24.184,55.525L24.184,55.525z M24.184,55.525" />
<text transform="matrix(1 0 0 1 20.4109 45.0872)" font-family="'MicrosoftYaHeiLight'" font-size="1.2">监控服务器</text>
<rect class="line-state" x="23.363" y="57.064" width="0.326" height="4.826" />
</g>
<g class="a1 a2 a3 a4" id="websev" data-type="Web服务器">
<defs>
<rect id="SVGID_9_" x="29.283" y="46.867" width="4.707" height="10.197" />
</defs>
<clipPath id="SVGID_10_">
<use xlink:href="#SVGID_9_" overflow="visible" />
</clipPath>
<path clip-path="url(#SVGID_10_)" d="M29.576,46.873h4.115c0.078,0,0.152,0.054,0.208,0.149c0.056,0.096,0.087,0.225,0.087,0.36
v2.544h-4.705v-2.544c0-0.135,0.031-0.265,0.086-0.36C29.424,46.927,29.498,46.873,29.576,46.873L29.576,46.873z M29.576,46.873" />
<rect x="29.281" y="50.436" clip-path="url(#SVGID_10_)" width="4.705" height="3.053" />
<path clip-path="url(#SVGID_10_)" d="M29.281,53.998h4.705v2.544c0,0.135-0.031,0.264-0.087,0.36
c-0.056,0.095-0.13,0.149-0.208,0.149h-4.115c-0.078,0-0.152-0.054-0.209-0.149c-0.055-0.096-0.086-0.225-0.086-0.36V53.998z
M29.281,53.998" />
<path class="sjci-host" fill="#5390EA" d="M30.385,47.891h1.852c0.344,0,0.515,0.169,0.515,0.509s-0.171,0.509-0.515,0.509h-1.852
c-0.344,0-0.516-0.169-0.516-0.509S30.041,47.891,30.385,47.891L30.385,47.891z M30.385,47.891" />
<path class="sjci-host" fill="#5390EA" d="M30.385,51.453h1.852c0.344,0,0.515,0.17,0.515,0.509s-0.171,0.509-0.515,0.509h-1.852
c-0.344,0-0.516-0.169-0.516-0.509S30.041,51.453,30.385,51.453L30.385,51.453z M30.385,51.453" />
<path class="sjci-host" fill="#5390EA" d="M32.24,55.525c0,0.337,0.271,0.611,0.607,0.611c0.337,0,0.609-0.273,0.609-0.611s-0.272-0.61-0.609-0.61
C32.511,54.914,32.24,55.187,32.24,55.525L32.24,55.525z M32.24,55.525" />
<text transform="matrix(1 0 0 1 28.2097 45.0872)" font-family="'MicrosoftYaHeiLight'" font-size="1.2">Web服务器</text>
<rect class="line-state" x="31.473" y="57.064" width="0.326" height="4.826" />
</g>
<g class="a1 a2 a3" id="jh" data-type="交换机">
<rect class="line-state" x="7.145" y="61.564" width="24.658" height="0.326" />
<rect class="line-state" x="19.613" y="61.89" width="0.326" height="9.25" />
<path d="M23.508,79.5h-7.472c-0.158,0-0.287-0.113-0.287-0.252V77.74c0-0.138,0.129-0.251,0.287-0.251h7.471
c0.159,0,0.288,0.112,0.288,0.251v1.508C23.796,79.387,23.667,79.5,23.508,79.5L23.508,79.5z M16.899,77.907h-0.67v0.586h0.67
V77.907z M20.826,77.907h-0.67v1.173h0.67V77.907z M22.071,77.907h-0.669v1.173h0.669V77.907z M23.317,77.907h-0.67v1.173h0.67
V77.907z M23.508,76.879h-7.472c-0.158,0-0.287-0.113-0.287-0.252v-1.508c0-0.138,0.129-0.251,0.287-0.251h7.471
c0.159,0,0.288,0.113,0.288,0.251v1.508C23.796,76.765,23.667,76.879,23.508,76.879L23.508,76.879z M16.899,75.285h-0.67v0.587
h0.67V75.285z M20.826,75.285h-0.67v1.173h0.67V75.285z M22.071,75.285h-0.669v1.173h0.669V75.285z M23.317,75.285h-0.67v1.173
h0.67V75.285z M23.508,74.249h-7.472c-0.158,0-0.287-0.112-0.287-0.252v-1.508c0-0.139,0.129-0.251,0.287-0.251h7.471
c0.159,0,0.288,0.112,0.288,0.251v1.508C23.796,74.136,23.667,74.249,23.508,74.249L23.508,74.249z M16.899,72.656h-0.67v0.586
h0.67V72.656z M20.826,72.656h-0.67v1.173h0.67V72.656z M22.071,72.656h-0.669v1.173h0.669V72.656z M23.317,72.656h-0.67v1.173
h0.67V72.656z M23.317,72.656" />
<text transform="matrix(1 0 0 1 25.1472 75.8704)" font-family="'MicrosoftYaHeiLight'" font-size="1.2">交换机</text>
</g>
<g class="a1 a2" id="route-left" data-type="路由器">
<path class="route-host" d="M20.999,93.349l-0.409,0.283c0.114,0.166,0.177,0.361,0.177,0.566s-0.063,0.401-0.177,0.566l0.409,0.283
c0.167-0.241,0.265-0.534,0.265-0.849S21.166,93.59,20.999,93.349L20.999,93.349z M18.546,93.349
c-0.167,0.241-0.265,0.534-0.265,0.849s0.098,0.608,0.265,0.849l0.409-0.283c-0.114-0.166-0.176-0.361-0.176-0.566
s0.062-0.401,0.176-0.566L18.546,93.349z M21.718,92.851l-0.409,0.283c0.071,0.104,0.13,0.213,0.18,0.33
c0.099,0.232,0.148,0.479,0.148,0.735c0,0.255-0.05,0.502-0.148,0.735c-0.049,0.116-0.109,0.226-0.18,0.33l0.409,0.283
c0.263-0.384,0.417-0.848,0.417-1.347S21.98,93.235,21.718,92.851L21.718,92.851z M18.204,93.113l-0.409-0.283
c-0.272,0.387-0.432,0.859-0.432,1.368s0.159,0.981,0.431,1.369l0.409-0.283c-0.077-0.109-0.142-0.227-0.195-0.351
c-0.098-0.233-0.147-0.48-0.147-0.735s0.05-0.502,0.148-0.735C18.062,93.339,18.127,93.221,18.204,93.113L18.204,93.113z
M22.645,92.209l-0.409,0.283c0.112,0.163,0.208,0.338,0.285,0.521c0.155,0.367,0.234,0.758,0.234,1.161
c0,0.403-0.078,0.793-0.234,1.162c-0.083,0.196-0.186,0.381-0.307,0.553l0.409,0.282c0.397-0.565,0.629-1.254,0.629-1.997
C23.253,93.445,23.028,92.769,22.645,92.209L22.645,92.209z M16.789,94.175c0-0.403,0.079-0.794,0.235-1.161
c0.078-0.184,0.173-0.358,0.285-0.521l-0.41-0.283c-0.383,0.56-0.607,1.236-0.607,1.965c0,0.743,0.233,1.432,0.629,1.997
l0.409-0.283c-0.121-0.172-0.224-0.357-0.307-0.553C16.867,94.968,16.789,94.578,16.789,94.175L16.789,94.175z M22.383,97.305
c-0.206,0-0.373,0.167-0.373,0.373c0,0.206,0.167,0.373,0.373,0.373s0.373-0.167,0.373-0.373
C22.756,97.472,22.589,97.305,22.383,97.305L22.383,97.305z M21.388,97.305c-0.206,0-0.373,0.167-0.373,0.373
c0,0.206,0.167,0.373,0.373,0.373c0.206,0,0.373-0.167,0.373-0.373C21.761,97.472,21.594,97.305,21.388,97.305L21.388,97.305z
M20.394,97.43c-0.138,0-0.249,0.111-0.249,0.249c0,0.137,0.111,0.249,0.249,0.249s0.249-0.111,0.249-0.249
C20.642,97.541,20.531,97.43,20.394,97.43L20.394,97.43z M16.789,97.43h2.735v0.497h-2.735V97.43z M16.789,97.43" />
<path d="M23.626,96.56h-3.356c-0.137,0-0.249-0.111-0.249-0.249v-2.237c0-0.138-0.111-0.249-0.249-0.249
s-0.249,0.111-0.249,0.249v2.237c0,0.137-0.111,0.249-0.249,0.249h-3.356c-0.068,0-0.125,0.056-0.125,0.124v1.989
c0,0.068,0.056,0.125,0.125,0.125h7.707c0.068,0,0.124-0.056,0.124-0.125v-1.989C23.75,96.615,23.694,96.56,23.626,96.56
L23.626,96.56z M23.253,98.269c0,0.017-0.014,0.031-0.031,0.031h-6.898c-0.017,0-0.031-0.014-0.031-0.031v-1.181
c0-0.017,0.014-0.031,0.031-0.031h6.898c0.017,0,0.031,0.014,0.031,0.031V98.269z M23.253,98.269" />
<text transform="matrix(1 0 0 1 25.1472 96.2747)" font-family="'MicrosoftYaHeiLight'" font-size="1.2">路由器</text>
<rect class="line-state" x="19.613" y="80.51" width="0.326" height="11.88" />
</g>
<g class="a1" id="fire-wall-left" data-type="防火墙">
<path d="M12.695,111.084h8.843v0.984h-8.843V111.084z M18.001,112.35h8.843v0.985h-8.843V112.35z M12.695,112.35h4.127v0.985
h-4.127V112.35z M22.717,113.616h4.127v0.844h-4.127V113.616z M22.717,111.084h4.127v0.984h-4.127V111.084z M12.695,113.616h8.843
v0.844h-8.843V113.616z M12.695,113.616" />
<text transform="matrix(1 0 0 1 17.8347 115.9622)" font-family="'MicrosoftYaHeiLight'" font-size="1.2">防火墙</text>
<rect class="line-state" x="19.45" y="99.808" width="0.326" height="10.273" />
</g>
<g class="o" id="area-net" data-type="三区内网">
<path fill="#009688" d="M57.038,113.906c-0.069-1.762-1.483-3.213-3.245-3.322c-1.586-0.1-2.96,0.867-3.474,2.252
c-0.051,0.125-0.193,0.187-0.318,0.139c-0.125-0.049-0.19-0.188-0.145-0.315c0.551-1.469,1.941-2.522,3.589-2.573
c-0.486-1.963-2.259-3.421-4.372-3.421c-2.116,0-3.893,1.46-4.375,3.428c-0.085-0.007-0.17-0.011-0.258-0.011
c-2.053,0-3.718,1.665-3.718,3.719c0,1.979,1.547,3.598,3.498,3.711v0.007h9.497v-0.004
C55.613,117.436,57.114,115.835,57.038,113.906L57.038,113.906z" />
<text transform="matrix(1 0 0 1 46.5222 105.5247)" font-family="'MicrosoftYaHeiLight'" font-size="1.2">三区内网</text>
<rect class="line-state" x="58.515" y="113.314" width="10.93" height="0.326" />
<rect class="line-state" x="28.015" y="113.314" width="10.93" height="0.326" />
<rect class="line-state" x="48.718" y="118.753" width="0.326" height="14.012" />
</g>
<g class="b1" id="route" data-type="路由器">
<path class="route-host" d="M79.149,93.349l-0.408,0.283c0.114,0.166,0.176,0.361,0.176,0.566s-0.062,0.401-0.176,0.566l0.408,0.283
c0.167-0.241,0.265-0.534,0.265-0.849S79.316,93.59,79.149,93.349L79.149,93.349z M76.696,93.349
c-0.167,0.241-0.265,0.534-0.265,0.849s0.098,0.608,0.265,0.849l0.408-0.283c-0.114-0.166-0.176-0.361-0.176-0.566
s0.062-0.401,0.176-0.566L76.696,93.349z M79.868,92.851l-0.408,0.283c0.07,0.104,0.13,0.213,0.179,0.33
c0.099,0.232,0.148,0.479,0.148,0.735c0,0.255-0.05,0.502-0.148,0.735c-0.049,0.116-0.108,0.226-0.179,0.33l0.408,0.283
c0.263-0.384,0.416-0.848,0.416-1.347S80.131,93.235,79.868,92.851L79.868,92.851z M76.355,93.113l-0.409-0.283
c-0.272,0.387-0.432,0.859-0.432,1.368s0.159,0.981,0.431,1.369l0.409-0.283c-0.077-0.109-0.143-0.227-0.195-0.351
c-0.098-0.233-0.147-0.48-0.147-0.735s0.05-0.502,0.148-0.735C76.212,93.339,76.277,93.221,76.355,93.113L76.355,93.113z
M80.796,92.209l-0.409,0.283c0.112,0.163,0.208,0.338,0.285,0.521c0.155,0.367,0.235,0.758,0.235,1.161
c0,0.403-0.079,0.793-0.235,1.162c-0.083,0.196-0.186,0.381-0.307,0.553l0.409,0.282c0.396-0.565,0.629-1.254,0.629-1.997
C81.403,93.445,81.178,92.769,80.796,92.209L80.796,92.209z M74.939,94.175c0-0.403,0.079-0.794,0.234-1.161
c0.078-0.184,0.174-0.358,0.285-0.521l-0.409-0.283c-0.383,0.56-0.607,1.236-0.607,1.965c0,0.743,0.233,1.432,0.63,1.997
l0.408-0.283c-0.121-0.172-0.224-0.357-0.307-0.553C75.018,94.968,74.939,94.578,74.939,94.175L74.939,94.175z M80.533,97.305
c-0.206,0-0.373,0.167-0.373,0.373c0,0.206,0.167,0.373,0.373,0.373s0.373-0.167,0.373-0.373
C80.906,97.472,80.739,97.305,80.533,97.305L80.533,97.305z M79.539,97.305c-0.206,0-0.373,0.167-0.373,0.373
c0,0.206,0.167,0.373,0.373,0.373s0.373-0.167,0.373-0.373C79.912,97.472,79.745,97.305,79.539,97.305L79.539,97.305z
M78.544,97.43c-0.137,0-0.248,0.111-0.248,0.249c0,0.137,0.111,0.249,0.248,0.249c0.138,0,0.249-0.111,0.249-0.249
C78.793,97.541,78.681,97.43,78.544,97.43L78.544,97.43z M74.939,97.43h2.734v0.497h-2.734V97.43z M74.939,97.43" />
<path d="M81.776,96.56H78.42c-0.138,0-0.248-0.111-0.248-0.249v-2.237c0-0.138-0.111-0.249-0.249-0.249s-0.249,0.111-0.249,0.249
v2.237c0,0.137-0.11,0.249-0.248,0.249h-3.356c-0.068,0-0.124,0.056-0.124,0.124v1.989c0,0.068,0.056,0.125,0.124,0.125h7.707
c0.068,0,0.124-0.056,0.124-0.125v-1.989C81.9,96.615,81.844,96.56,81.776,96.56L81.776,96.56z M81.403,98.269
c0,0.017-0.014,0.031-0.031,0.031h-6.898c-0.018,0-0.031-0.014-0.031-0.031v-1.181c0-0.017,0.014-0.031,0.031-0.031h6.898
c0.018,0,0.031,0.014,0.031,0.031V98.269z M81.403,98.269" />
<text transform="matrix(1 0 0 1 83.1472 96.2747)" font-family="'MicrosoftYaHeiLight'" font-size="1.2">路由器</text>
<rect class="line-state" x="65.145" y="82.564" width="24.658" height="0.326" />
<rect class="line-state" x="77.613" y="82.89" width="0.326" height="9.25" />
</g>
<g class="b1 b2" id="fire-wall-right" data-type="防火墙">
<path d="M70.845,111.084h8.844v0.984h-8.844V111.084z M76.151,112.35h8.844v0.985h-8.844V112.35z M70.845,112.35h4.127v0.985
h-4.127V112.35z M80.868,113.616h4.127v0.844h-4.127V113.616z M80.868,111.084h4.127v0.984h-4.127V111.084z M70.845,113.616h8.844
v0.844h-8.844V113.616z M70.845,113.616" />
<text transform="matrix(1 0 0 1 75.8347 115.9622)" font-family="'MicrosoftYaHeiLight'" font-size="1.2">防火墙</text>
<rect class="line-state" x="77.764" y="100.003" width="0.326" height="10.272" />
</g>
<g class="b1 b2 b3" id="pc-rigth" data-type="电脑">
<path fill="#666666" d="M90.958,68.668c0-0.543,0.44-0.984,0.984-0.984h2.954c0.544,0,0.984,0.441,0.984,0.984v7.878
c0,0.543-0.44,0.984-0.984,0.984h-2.954c-0.544,0-0.984-0.441-0.984-0.984V68.668z M90.958,68.668" />
<path fill="#F5F5F5" d="M91.451,68.668c0-0.272,0.22-0.493,0.492-0.493h2.954c0.272,0,0.493,0.221,0.493,0.493v7.878
c0,0.272-0.221,0.493-0.493,0.493h-2.954c-0.272,0-0.492-0.22-0.492-0.493V68.668z M91.451,68.668" />
<defs>
<rect id="SVGID_11_" x="84.067" y="67.681" width="11.825" height="9.863" />
</defs>
<clipPath id="SVGID_12_">
<use xlink:href="#SVGID_11_" overflow="visible" />
</clipPath>
<path clip-path="url(#SVGID_12_)" fill="#CCCCCC" d="M91.943,68.668h2.954v0.984h-2.954V68.668z M91.943,70.637h2.954v0.984
h-2.954V70.637z M91.943,70.637" />
<path clip-path="url(#SVGID_12_)" fill="#666666" d="M88.497,76.546v-0.984H85.05c-0.544,0-0.984-0.441-0.984-0.984v-4.924
c0-0.543,0.44-0.984,0.984-0.984h7.878c0.544,0,0.984,0.441,0.984,0.984v4.924c0,0.543-0.44,0.984-0.984,0.984h-3.446v0.984h1.23
c0.137,0,0.247,0.111,0.247,0.246c0,0.136-0.11,0.246-0.247,0.246h-3.445c-0.136,0-0.247-0.111-0.247-0.246
c0-0.136,0.111-0.246,0.247-0.246H88.497z M88.497,76.546" />
<path class="pc-sceen" fill="#E6FFFA" d="M84.558,69.653c0-0.272,0.22-0.493,0.492-0.493h7.877c0.272,0,0.493,0.22,0.493,0.493v4.924
c0,0.272-0.221,0.493-0.493,0.493H85.05c-0.272,0-0.493-0.22-0.493-0.493v-4.924H84.558z M84.558,69.653" />
<text transform="matrix(1 0 0 1 87.4597 67.0579)" font-family="'MicrosoftYaHeiLight'" font-size="1.2">电脑</text>
<rect class="line-state" x="89.473" y="78.064" width="0.326" height="4.826" />
</g>
<g class="b1 b2 b3" id="pc-left" data-type="电脑">
<path fill="#666666" d="M67.167,68.668c0-0.543,0.44-0.984,0.984-0.984h2.954c0.544,0,0.984,0.441,0.984,0.984v7.878
c0,0.543-0.44,0.984-0.984,0.984h-2.954c-0.544,0-0.984-0.441-0.984-0.984V68.668z M67.167,68.668" />
<path fill="#F5F5F5" d="M67.66,68.668c0-0.272,0.22-0.493,0.492-0.493h2.954c0.272,0,0.493,0.221,0.493,0.493v7.878
c0,0.272-0.221,0.493-0.493,0.493h-2.954c-0.272,0-0.492-0.22-0.492-0.493V68.668z M67.66,68.668" />
<defs>
<rect id="SVGID_13_" x="60.276" y="67.681" width="11.825" height="9.863" />
</defs>
<clipPath id="SVGID_14_">
<use xlink:href="#SVGID_13_" overflow="visible" />
</clipPath>
<path clip-path="url(#SVGID_14_)" fill="#CCCCCC" d="M68.152,68.668h2.954v0.984h-2.954V68.668z M68.152,70.637h2.954v0.984
h-2.954V70.637z M68.152,70.637" />
<path clip-path="url(#SVGID_14_)" fill="#666666" d="M64.706,76.546v-0.984h-3.447c-0.544,0-0.984-0.441-0.984-0.984v-4.924
c0-0.543,0.44-0.984,0.984-0.984h7.878c0.544,0,0.984,0.441,0.984,0.984v4.924c0,0.543-0.44,0.984-0.984,0.984H65.69v0.984h1.23
c0.137,0,0.247,0.111,0.247,0.246c0,0.136-0.11,0.246-0.247,0.246h-3.445c-0.137,0-0.247-0.111-0.247-0.246
c0-0.136,0.11-0.246,0.247-0.246H64.706z M64.706,76.546" />
<path class="pc-sceen" fill="#E6FFFA" d="M60.767,69.653c0-0.272,0.22-0.493,0.492-0.493h7.877c0.272,0,0.493,0.22,0.493,0.493v4.924
c0,0.272-0.221,0.493-0.493,0.493h-7.878c-0.272,0-0.493-0.22-0.493-0.493v-4.924H60.767z M60.767,69.653" />
<text transform="matrix(1 0 0 1 63.8972 67.0579)" font-family="'MicrosoftYaHeiLight'" font-size="1.2">电脑</text>
<rect class="line-state" x="65.141" y="78.064" width="0.326" height="4.826" />
</g>
<g class="c1" id="dbase" data-type="数据库">
<defs>
<rect id="SVGID_15_" x="44.878" y="134.653" width="8.008" height="7.743" />
</defs>
<clipPath id="SVGID_16_">
<use xlink:href="#SVGID_15_" overflow="visible" />
</clipPath>
<path clip-path="url(#SVGID_16_)" fill="#424A60" d="M48.077,139.186v-1.301h0.005c-0.003,0.017-0.004,0.033-0.005,0.051
c0-0.325,0.515-0.607,1.271-0.751h-3.991c-0.127,0-0.25,0.051-0.34,0.142c-0.09,0.09-0.141,0.212-0.141,0.34v1.571
c0,0.128,0.051,0.25,0.141,0.341c0.09,0.09,0.213,0.141,0.34,0.141h2.719V139.186z M48.077,139.186" />
<path clip-path="url(#SVGID_16_)" fill="#556080" d="M48.082,141.586h-0.005v-1.867h-2.719c-0.266,0-0.481,0.216-0.481,0.481
v1.571c0,0.127,0.051,0.25,0.141,0.34c0.09,0.091,0.213,0.141,0.34,0.141h3.83C48.557,142.11,48.128,141.866,48.082,141.586
L48.082,141.586z M52.13,137.185h-6.772c-0.266,0-0.481-0.215-0.481-0.48v-1.571c0-0.266,0.215-0.481,0.481-0.481h6.772
c0.266,0,0.481,0.216,0.481,0.481v1.571C52.611,136.97,52.395,137.185,52.13,137.185L52.13,137.185z M52.13,137.185" />
<path fill="#7383BF" d="M45.677,135.918c0,0.258,0.209,0.467,0.466,0.467c0.258,0,0.467-0.209,0.467-0.467
c0-0.167-0.089-0.32-0.233-0.404c-0.144-0.083-0.322-0.083-0.466,0C45.766,135.598,45.677,135.751,45.677,135.918L45.677,135.918z
M45.677,135.918" />
<path fill="#7383BF" d="M51.277,135.718c0,0.048,0.025,0.092,0.067,0.116c0.041,0.023,0.092,0.023,0.133,0
c0.042-0.024,0.067-0.068,0.067-0.116c0-0.047-0.025-0.091-0.067-0.115c-0.041-0.023-0.092-0.023-0.133,0
C51.302,135.627,51.277,135.671,51.277,135.718L51.277,135.718z M51.277,135.718" />
<path fill="#7383BF" d="M50.744,135.718c0,0.048,0.025,0.092,0.066,0.116c0.042,0.023,0.092,0.023,0.133,0
c0.041-0.024,0.066-0.068,0.066-0.116c0-0.047-0.025-0.091-0.066-0.115c-0.041-0.023-0.092-0.023-0.133,0
C50.77,135.627,50.744,135.671,50.744,135.718L50.744,135.718z M50.744,135.718" />
<path fill="#7383BF" d="M51.545,136.118c0,0.048,0.025,0.092,0.066,0.115c0.041,0.024,0.092,0.024,0.133,0
c0.042-0.023,0.067-0.067,0.067-0.115s-0.025-0.092-0.067-0.115c-0.041-0.024-0.092-0.024-0.133,0
C51.57,136.027,51.545,136.071,51.545,136.118L51.545,136.118z M51.545,136.118" />
<path fill="#7383BF" d="M51.01,136.118c0,0.048,0.025,0.092,0.067,0.115c0.041,0.024,0.092,0.024,0.133,0
c0.041-0.023,0.066-0.067,0.066-0.115s-0.025-0.092-0.066-0.115c-0.041-0.024-0.092-0.024-0.133,0
C51.036,136.027,51.01,136.071,51.01,136.118L51.01,136.118z M51.01,136.118" />
<path fill="#7383BF" d="M50.211,135.718c0,0.048,0.025,0.092,0.067,0.116c0.041,0.023,0.092,0.023,0.133,0
c0.041-0.024,0.066-0.068,0.066-0.116c0-0.047-0.025-0.091-0.066-0.115c-0.042-0.023-0.092-0.023-0.133,0
C50.236,135.627,50.211,135.671,50.211,135.718L50.211,135.718z M50.211,135.718" />
<path fill="#7383BF" d="M50.477,136.118c0,0.048,0.025,0.092,0.067,0.115c0.041,0.024,0.092,0.024,0.133,0
c0.041-0.023,0.067-0.067,0.067-0.115s-0.026-0.092-0.067-0.115c-0.042-0.024-0.092-0.024-0.133,0
C50.503,136.027,50.477,136.071,50.477,136.118L50.477,136.118z M50.477,136.118" />
<path fill="#7383BF" d="M49.677,135.718c0,0.048,0.025,0.092,0.066,0.116c0.042,0.023,0.092,0.023,0.133,0
c0.042-0.024,0.067-0.068,0.067-0.116c0-0.047-0.025-0.091-0.067-0.115c-0.041-0.023-0.092-0.023-0.133,0
C49.703,135.627,49.677,135.671,49.677,135.718L49.677,135.718z M49.677,135.718" />
<path fill="#7383BF" d="M49.944,136.118c0,0.048,0.025,0.092,0.066,0.115c0.042,0.024,0.092,0.024,0.134,0
c0.041-0.023,0.066-0.067,0.066-0.115s-0.025-0.092-0.066-0.115c-0.042-0.024-0.092-0.024-0.134,0
C49.969,136.027,49.944,136.071,49.944,136.118L49.944,136.118z M49.944,136.118" />
<path fill="#7383BF" d="M49.144,135.718c0,0.048,0.025,0.092,0.067,0.116c0.041,0.023,0.092,0.023,0.133,0
c0.041-0.024,0.067-0.068,0.067-0.116c0-0.047-0.026-0.091-0.067-0.115c-0.042-0.023-0.092-0.023-0.133,0
C49.169,135.627,49.144,135.671,49.144,135.718L49.144,135.718z M49.144,135.718" />
<path fill="#7383BF" d="M49.411,136.118c0,0.048,0.025,0.092,0.066,0.115c0.042,0.024,0.092,0.024,0.133,0
c0.042-0.023,0.067-0.067,0.067-0.115s-0.025-0.092-0.067-0.115c-0.041-0.024-0.092-0.024-0.133,0
C49.436,136.027,49.41,136.071,49.411,136.118L49.411,136.118z M49.411,136.118" />
<path fill="#7383BF" d="M45.677,138.452c0,0.258,0.209,0.467,0.466,0.467c0.258,0,0.467-0.209,0.467-0.467
c0-0.167-0.089-0.321-0.233-0.404c-0.144-0.084-0.322-0.084-0.466,0C45.766,138.131,45.677,138.285,45.677,138.452L45.677,138.452
z M45.677,138.452" />
<path fill="#7383BF" d="M45.677,140.986c0,0.258,0.209,0.467,0.466,0.467c0.258,0,0.467-0.209,0.467-0.467
c0-0.167-0.089-0.32-0.233-0.404c-0.144-0.083-0.322-0.083-0.466,0C45.766,140.665,45.677,140.819,45.677,140.986L45.677,140.986z
M45.677,140.986" />
<path class="db-host" fill="#1A9172" d="M50.477,141.019c-1.326,0-2.4-0.38-2.4-0.85v1.417h0.005c0.073,0.446,1.118,0.8,2.396,0.8
c1.278,0,2.323-0.354,2.396-0.8h0.005v-1.417C52.878,140.639,51.803,141.019,50.477,141.019L50.477,141.019z M48.077,140.119v0.05
c0-0.017,0.002-0.033,0.005-0.05H48.077z M52.873,140.119c0.003,0.017,0.005,0.033,0.005,0.05v-0.05H52.873z M52.873,140.119" />
<path class="db-hosta" fill="#25AE88" d="M50.477,139.585c-1.326,0-2.4-0.38-2.4-0.85v1.483h0.005c0.073,0.446,1.118,0.8,2.396,0.8
c1.278,0,2.323-0.354,2.396-0.8h0.005v-1.483C52.878,139.205,51.803,139.585,50.477,139.585L50.477,139.585z M48.077,138.686v0.05
c0-0.017,0.002-0.033,0.005-0.05H48.077z M52.873,138.686c0.003,0.017,0.005,0.033,0.005,0.05v-0.05H52.873z M52.873,138.686" />
<path class="db-hostb" fill="#88C057" d="M48.077,137.368c0,0.47,1.075,0.851,2.4,0.851c1.326,0,2.4-0.381,2.4-0.851s-1.074-0.85-2.4-0.85
C49.152,136.519,48.077,136.899,48.077,137.368L48.077,137.368z M48.077,137.368" />
<path class="db-hostc" fill="#61B872" d="M50.477,138.219c-1.326,0-2.4-0.381-2.4-0.851v1.417h0.005c0.073,0.446,1.118,0.8,2.396,0.8
c1.278,0,2.323-0.354,2.396-0.8h0.005v-1.417C52.878,137.838,51.803,138.219,50.477,138.219L50.477,138.219z M48.077,137.319v0.05
c0-0.017,0.002-0.033,0.005-0.05H48.077z M52.873,137.319c0.003,0.017,0.005,0.033,0.005,0.05v-0.05H52.873z M52.873,137.319" />
<text transform="matrix(1 0 0 1 55.2722 139.0247)">
<tspan x="0" y="0" font-family="'MicrosoftYaHeiLight'" font-size="1.2">公司内网</tspan>
<tspan x="0" y="1.439" font-family="'MicrosoftYaHeiLight'" font-size="1.2">综合数据库</tspan>
</text>
<text transform="matrix(1 0 0 1 49.8972 148.8997)">
<tspan x="0" y="0" font-family="'MicrosoftYaHeiLight'" font-size="1.2">隔</tspan>
<tspan x="0" y="1.439" font-family="'MicrosoftYaHeiLight'" font-size="1.2">离</tspan>
<tspan x="0" y="2.88" font-family="'MicrosoftYaHeiLight'" font-size="1.2">装</tspan>
<tspan x="0" y="4.32" font-family="'MicrosoftYaHeiLight'" font-size="1.2">置</tspan>
</text>
<rect class="line-state" x="48.719" y="143.753" width="0.326" height="14.012" />
</g>
<g class="c1 c2" id="web-out-serve" data-type="互联网">
<path d="M45,163.629v1.03c0,0.267,0.217,0.484,0.485,0.484h6.786c0.268,0,0.484-0.218,0.484-0.484v-1.03
c0-0.033-0.027-0.061-0.061-0.061H45.06C45.027,163.569,45,163.596,45,163.629L45,163.629z M50.862,164.356
c0,0.034-0.027,0.062-0.061,0.062h-2.59c-0.033,0-0.061-0.027-0.061-0.062v-0.363c0-0.033,0.027-0.061,0.061-0.061h2.59
c0.033,0,0.061,0.027,0.061,0.061V164.356z M51.786,164.356c0,0.034-0.027,0.062-0.061,0.062h-0.364
c-0.033,0-0.061-0.027-0.061-0.062v-0.363c0-0.033,0.027-0.061,0.061-0.061h0.364c0.033,0,0.061,0.027,0.061,0.061V164.356z
M45,162.175v1.091c0,0.033,0.027,0.061,0.061,0.061h7.634c0.033,0,0.061-0.027,0.061-0.061v-1.091
c0-0.033-0.027-0.061-0.061-0.061H45.06C45.027,162.115,45,162.142,45,162.175L45,162.175z M50.862,162.902
c0,0.034-0.027,0.061-0.061,0.061h-2.59c-0.033,0-0.061-0.026-0.061-0.061v-0.363c0-0.033,0.027-0.061,0.061-0.061h2.59
c0.033,0,0.061,0.027,0.061,0.061V162.902z M51.786,162.902c0,0.034-0.027,0.061-0.061,0.061h-0.364
c-0.033,0-0.061-0.026-0.061-0.061v-0.363c0-0.033,0.027-0.061,0.061-0.061h0.364c0.033,0,0.061,0.027,0.061,0.061V162.902z
M45,160.721v1.091c0,0.033,0.027,0.061,0.061,0.061h7.634c0.033,0,0.061-0.027,0.061-0.061v-1.091
c0-0.033-0.027-0.061-0.061-0.061H45.06C45.027,160.66,45,160.688,45,160.721L45,160.721z M50.862,161.448
c0,0.034-0.027,0.062-0.061,0.062h-2.59c-0.033,0-0.061-0.027-0.061-0.062v-0.363c0-0.033,0.027-0.061,0.061-0.061h2.59
c0.033,0,0.061,0.027,0.061,0.061V161.448z M51.786,161.448c0,0.034-0.027,0.062-0.061,0.062h-0.364
c-0.033,0-0.061-0.027-0.061-0.062v-0.363c0-0.033,0.027-0.061,0.061-0.061h0.364c0.033,0,0.061,0.027,0.061,0.061V161.448z
M52.27,158.843h-6.786c-0.268,0-0.485,0.217-0.485,0.484v1.03c0,0.033,0.027,0.061,0.061,0.061h7.634
c0.033,0,0.061-0.027,0.061-0.061v-1.03C52.755,159.06,52.538,158.843,52.27,158.843L52.27,158.843z M50.862,159.993
c0,0.034-0.027,0.062-0.061,0.062h-2.59c-0.033,0-0.061-0.027-0.061-0.062v-0.363c0-0.033,0.027-0.061,0.061-0.061h2.59
c0.033,0,0.061,0.027,0.061,0.061V159.993z M51.786,159.993c0,0.034-0.027,0.062-0.061,0.062h-0.364
c-0.033,0-0.061-0.027-0.061-0.062v-0.363c0-0.033,0.027-0.061,0.061-0.061h0.364c0.033,0,0.061,0.027,0.061,0.061V159.993z
M51.786,159.993" />
<text transform="matrix(1 0 0 1 54.3347 162.3372)" font-family="'MicrosoftYaHeiLight'" font-size="1.2">互联网</text>
<rect class="line-state" x="48.718" y="165.995" width="0.326" height="14.012" />
</g>
<g class="c1 c2 c3" id="i-guowang" data-type="手机端">
<path d="M76.4,176.37c0.172,0,0.326-0.104,0.393-0.264c0.065-0.159,0.029-0.342-0.094-0.464c-0.122-0.121-0.306-0.157-0.465-0.091
c-0.158,0.067-0.262,0.223-0.26,0.396C75.976,176.181,76.166,176.369,76.4,176.37L76.4,176.37z M76.4,175.816
c0.07,0,0.128,0.057,0.129,0.129c0,0.07-0.057,0.129-0.128,0.129c-0.071,0.002-0.13-0.055-0.131-0.126
c-0.001-0.034,0.013-0.067,0.036-0.093C76.332,175.829,76.365,175.816,76.4,175.816L76.4,175.816z M76.4,175.816" />
<path d="M78.203,175.232v-4.107c-0.001-0.279-0.227-0.505-0.507-0.506h-2.589c-0.279,0.001-0.506,0.227-0.507,0.506v5.205
c0.001,0.279,0.228,0.506,0.507,0.506h2.589c0.28,0,0.506-0.227,0.507-0.506V175.232z M75.107,170.915h2.589
c0.056,0,0.109,0.021,0.149,0.061c0.039,0.04,0.061,0.094,0.061,0.148v3.959h-3.01v-3.959c0-0.055,0.022-0.108,0.063-0.148
C74.998,170.937,75.051,170.915,75.107,170.915L75.107,170.915z M77.906,176.329c0,0.057-0.021,0.109-0.061,0.148
c-0.04,0.04-0.094,0.063-0.149,0.063h-2.589c-0.057,0-0.109-0.022-0.148-0.063c-0.04-0.039-0.063-0.092-0.063-0.148v-0.95h3.01
V176.329z M77.906,176.329" />
<text transform="matrix(1 0 0 1 75.0681 169.8372)" font-family="'MicrosoftYaHeiLight'" font-size="1.2">手机端</text>
<rect class="line-state" x="48.718" y="172.564" width="24.658" height="0.326" />
</g>
<g class="c1 c2 c3" id="ipc" data-type="电脑">
<path fill="#666666" d="M49.858,181.548c0-0.544,0.441-0.984,0.984-0.984h2.955c0.543,0,0.984,0.44,0.984,0.984v7.878
c0,0.544-0.441,0.984-0.984,0.984h-2.955c-0.543,0-0.984-0.44-0.984-0.984V181.548z M49.858,181.548" />
<path fill="#F5F5F5" d="M50.35,181.548c0-0.272,0.221-0.493,0.493-0.493h2.955c0.272,0,0.492,0.221,0.492,0.493v7.878
c0,0.272-0.22,0.493-0.492,0.493h-2.955c-0.272,0-0.493-0.221-0.493-0.493V181.548z M50.35,181.548" />
<defs>
<rect id="SVGID_1_" x="42.967" y="180.562" width="11.826" height="9.862" />
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_" overflow="visible" />
</clipPath>
<path clip-path="url(#SVGID_2_)" fill="#CCCCCC" d="M50.843,181.548h2.955v0.984h-2.955V181.548z M50.843,183.518h2.955v0.984
h-2.955V183.518z M50.843,183.518" />
<path clip-path="url(#SVGID_2_)" fill="#666666" d="M47.396,189.426v-0.984h-3.447c-0.543,0-0.984-0.44-0.984-0.984v-4.924
c0-0.544,0.441-0.984,0.984-0.984h7.878c0.543,0,0.984,0.44,0.984,0.984v4.924c0,0.544-0.441,0.984-0.984,0.984h-3.447v0.984
h1.231c0.136,0,0.247,0.11,0.247,0.246s-0.111,0.245-0.247,0.245h-3.446c-0.136,0-0.247-0.11-0.247-0.245
c0-0.137,0.111-0.246,0.247-0.246H47.396z M47.396,189.426" />
<path class="pc-sceen" fill="#E6FFFA" d="M43.458,182.533c0-0.272,0.221-0.493,0.493-0.493h7.877c0.272,0,0.492,0.221,0.492,0.493v4.924
c0,0.272-0.22,0.493-0.492,0.493h-7.878c-0.272,0-0.493-0.221-0.493-0.493L43.458,182.533L43.458,182.533z M43.458,182.533" />
<text transform="matrix(1 0 0 1 47.5242 192.3372)" font-family="'MicrosoftYaHeiLight'" font-size="1.2">电脑</text>
</g>
</svg>
<div class="pop" style="display: none;">
<div class="pop-content">
<div class="content-head"><span class="title-text"></span><span id="close">X</span></div>
<div class="content-body">
<div id="info"></div>
</div>
</div>
</div>
</body>
<script>
let data = {
o:{"state":"0"},
//左
fhq:{"state":"1"},
lyq:{"state":"1"},
jhj:{"state":"0"},
sjcj1:{
"state":"1",
"ip":"127.0.0.1",
"host":"大数据处理",
"memery":"2G",
"cpu":"i7",
"disk":"50G",
},
sjcj:{"state":"1"},
fwqjk:{"state":"1"},
websev:{"state":"0"},
//右
fhq2:{"state":"0"},
lyq2:{"state":"0"},
pcRigth:{"state":"0"},
pcLeft:{"state":"0"},
//下
dbase:{"state":"1"},
webOutServe:{"state":"0"},
Iguowang:{"state":"1"},
ipc:{"state":"0"}
}
$(function() {
$(".line-state").attr("fill","#00bcd4")//防火墙
$(".line-state").removeClass("ff0")
//三区内网
data.o.state === '0' ? $("#area-net .line-state").addClass("ff0") : "";
//下拓扑
data.dbase.state === '0' ? $(".c1 .line-state").addClass("ff0") : "";//防火墙
data.webOutServe.state === '0' ? $(".c2 .line-state").addClass("ff0") : "";//路由器
data.Iguowang.state === '0' ? $("#i-guowang .line-state").addClass("ff0") : "";//电脑
data.ipc.state === '0' ? $("#ipc .line-state").addClass("ff0") : "";//电脑
//右拓扑
data.fhq2.state === '0' ? $(".b1 .line-state").addClass("ff0") : "";//防火墙
data.lyq2.state === '0' ? $(".b2 .line-state").addClass("ff0") : "";//路由器
data.pcRigth.state === '0' ? $("#pc-rigth .line-state").addClass("ff0") : "";//电脑
data.pcLeft.state === '0' ? $("#pc-left .line-state").addClass("ff0") : "";//电脑
//左拓扑
data.fhq.state === '0' ? $(".a1 .line-state").addClass("ff0"): "";//防火墙
data.lyq.state === '0' ? $(".a2 .line-state").addClass("ff0") : "";//路由器
data.jhj.state === '0' ? $(".a3 .line-state").addClass("ff0") : "";//交换机
data.sjcj1.state === '0' ? $("#sjcj1 .line-state").addClass("ff0") : "";//大数据处理
data.sjcj.state === '0' ? $("#sjcj .line-state").addClass("ff0"): "";//大数据处理
data.fwqjk.state === '0' ? $("#fwqjk .line-state").addClass("ff0") : "";//监控服务器
data.websev.state === '0' ? $("#websev .line-state").addClass("ff0") : "";//Web服务器
//设备点击事件
$("g").on('click', function() {
$(".pop").show()
let dom=`
<li><span>状态：</span><span>${data.sjcj1.state}</span></li>
<li><span>IP：</span><span>${data.sjcj1.ip}</span></li>
<li><span>主机：</span><span>${data.sjcj1.host}</span></li>
<li><span>内存：</span><span>${data.sjcj1.memery}</span></li>
<li><span>CPU：</span><span>${data.sjcj1.cpu}</span></li>
<li><span>数据盘：</span><span>${data.sjcj1.disk}</span></li>
`;
$("#info").empty()
$("#info").append(dom)
})
//关闭弹窗
$("#close, .pop").on('click', function() {
$(".pop").hide()
})
//节点变色
setInterval(function(){
$(".sjci-host").attr("fill","#00"+ parseInt(Math.random()*1 + 8)+ parseInt(Math.random()*80 + 10)+"e")
$(".route-host, #jh path").attr("fill","#00"+ parseInt(Math.random()*1 + 8)+ parseInt(Math.random()*80 + 10)+"e")
$(".db-host").attr("fill","#00"+ parseInt(Math.random()*1 + 8)+ parseInt(Math.random()*80 + 10)+"e")
$(".db-hosta").attr("fill","#00"+ parseInt(Math.random()*1 + 8)+ parseInt(Math.random()*80 + 10)+"e")
$(".db-hostb").attr("fill","#00"+ parseInt(Math.random()*1 + 8)+ parseInt(Math.random()*80 + 10)+"e")
$(".db-hostc").attr("fill","#00"+ parseInt(Math.random()*1 + 8)+ parseInt(Math.random()*80 + 10)+"e")
$("#fire-wall-left path, #fire-wall-right path").attr("fill","#ff"+ parseInt(Math.random()*10 + 80)+ parseInt(Math.random()*80 + 10))
$("#web-out-serve path").attr("fill","#00"+ parseInt(Math.random()*1 + 8)+ parseInt(Math.random()*80 + 10)+"e")
$(".pc-sceen").attr("fill","#00"+ parseInt(Math.random()*1 + 8)+ parseInt(Math.random()*80 + 10)+"e")
$("#area-net path")
},1000)
})
</script>
<style type="text/css">
svg{ margin-top:-200px ;}
g{ cursor: pointer;}
.pop{
position: fixed;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.2);
top: 0;
}
.pop-content{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
height: 300px;
width: 400px;
background: #fff;
border-radius: 5px;
overflow: hidden;
}
.content-head {
height: 30px;
background: #efefef;
text-align: right;
padding: 0 10px;
line-height: 30px;
color: #333;
}
#close{ cursor: pointer;}
li{
list-style: none;
display: flex;
justify-content: space-between;
line-height: 30px;
height: 30px;
border-bottom: 1px solid #efefef;
}
#info {
padding: 10px;
font-size: 14px;
}
.ff0{ fill: #ff0000;animation: myfirst .5s infinite;}
@keyframes myfirst
{
0% {background: #ff0000; opacity: 1;}
50% {background: #ff0000;opacity: 0;}
100% {background: #ff0000;opacity: 1;}
}
</style>
</html>
标签：jquery,特效,random,ff0,道友,state,line,data,Math 来源： https://blog.csdn.net/rexfow/article/details/112920155