388 lines
17 KiB
HTML
388 lines
17 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title></title>
|
||
<script src="../../js/core/jquery-3.6.0.js"></script>
|
||
<script src="../../js/svg/jquery.svg.pan.zoom.js" type="text/javascript" charset="utf-8"></script>
|
||
<style type="text/css">
|
||
#deviceType{
|
||
border-radius: 5px;
|
||
background-color: rgba(124,213,255,0.2);
|
||
list-style-type: none;
|
||
width: 10%;
|
||
height: 27%;
|
||
font-size: 14px;
|
||
color: white;
|
||
position: fixed;
|
||
top: 0%;
|
||
right: 0%;
|
||
padding-left: 0.8%;
|
||
}
|
||
#deviceType>li{
|
||
margin-bottom: 5%;
|
||
cursor: pointer;
|
||
display: flex;
|
||
}
|
||
#deviceType>li>span{
|
||
align-self: center;
|
||
}
|
||
#deviceType>li>label{
|
||
display: flex;
|
||
}
|
||
#deviceType>li>label>span{
|
||
align-self: center;
|
||
}
|
||
|
||
|
||
#floor{
|
||
border-radius: 5px;
|
||
background-color: rgba(124,213,255,0.2);
|
||
list-style-type: none;
|
||
width: 10%;
|
||
height: 17%;
|
||
font-size: 14px;
|
||
color: white;
|
||
position: fixed;
|
||
top: 0%;
|
||
right: 0%;
|
||
padding-left: 0.8%;
|
||
}
|
||
#floor>li{
|
||
margin-bottom: 5%;
|
||
cursor: pointer;
|
||
display: flex;
|
||
}
|
||
#floor>li>span{
|
||
align-self: center;
|
||
}
|
||
|
||
</style>
|
||
</head>
|
||
<body style="background-color: rgba(0,0,0,1)">
|
||
<svg id="svgBack" viewBox="-150 0 2500 2200" version="1.1" width="2350" height="850" style="" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||
<defs>
|
||
<filter id="f3" x="-110%" y="-110%" width="400%" height="400%">
|
||
<feOffset result="offOut" in="SourceGraphic" dx="0" dy="0"></feOffset>
|
||
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="10"></feGaussianBlur>
|
||
<feBlend in="SourceGraphic" in2="blurOut" mode="multiply"></feBlend>
|
||
</filter>
|
||
</defs>
|
||
|
||
<line x1="760" y1="180" x2="1885" y2="180" stroke="rgba(255,255,255,0.5)" stroke-width="3" />
|
||
<line x1="1885" y1="180" x2="1885" y2="650" stroke="rgba(255,255,255,0.5)" stroke-width="3" />
|
||
<line x1="760" y1="180" x2="760" y2="570" stroke="rgba(255,255,255,0.5)" stroke-width="3" />
|
||
<line x1="720" y1="570" x2="-60" y2="570" stroke="rgba(255,255,255,0.5)" stroke-width="3" />
|
||
<line x1="-60" y1="570" x2="-60" y2="850" stroke="rgba(255,255,255,0.5)" stroke-width="3" />
|
||
<line x1="-60" y1="850" x2="50" y2="850" stroke="rgba(255,255,255,0.5)" stroke-width="3" />
|
||
<line x1="50" y1="850" x2="50" y2="1075" stroke="rgba(255,255,255,0.5)" stroke-width="3" />
|
||
<line x1="50" y1="1075" x2="1205" y2="1075" stroke="rgba(255,255,255,0.5)" stroke-width="3" />
|
||
<line x1="1205" y1="1035" x2="1205" y2="1075" stroke="rgba(255,255,255,0.5)" stroke-width="3" />
|
||
<line x1="1205" y1="1035" x2="1882" y2="1035" stroke="rgba(255,255,255,0.5)" stroke-width="3" />
|
||
|
||
<line x1="1884" y1="570" x2="1310" y2="570" stroke="rgba(255,255,255,0.5)" stroke-width="3" />
|
||
<line x1="1310" y1="570" x2="1310" y2="180" stroke="rgba(255,255,255,0.5)" stroke-width="3" />
|
||
<text transform="translate(1800,800) rotate(0)" style="font-size:30pt;color:#ffffff;" fill="#ffffff">
|
||
出入口
|
||
</text>
|
||
|
||
<line x1="1882" y1="1035" x2="1882" y2="940" stroke="rgba(255,255,255,0.5)" stroke-width="3" />
|
||
<line x1="1882" y1="940" x2="1840" y2="940" stroke="rgba(255,255,255,0.5)" stroke-width="3" />
|
||
<line x1="1840" y1="940" x2="1840" y2="1035" stroke="rgba(255,255,255,0.5)" stroke-width="3" />
|
||
<text transform="translate(1850,970) rotate(0)" style="font-size:16pt;color:#ffffff;" fill="#ffffff">
|
||
<tspan>传</tspan>
|
||
<tspan x="0" y="25">达</tspan>
|
||
<tspan x="0" y="50">室</tspan>
|
||
</text>
|
||
|
||
<line x1="718" y1="570" x2="760" y2="570" stroke="rgba(255,0,0,0.7)" stroke-width="3" />
|
||
<line x1="718" y1="180" x2="718" y2="570" stroke="rgba(255,0,0,0.7)" stroke-width="3" />
|
||
<line x1="718" y1="180" x2="760" y2="180" stroke="rgba(255,0,0,0.7)" stroke-width="3" />
|
||
<line x1="728.5" y1="180" x2="728.5" y2="570" stroke="rgba(255,0,0,0.7)" stroke-width="3" />
|
||
<line x1="739" y1="180" x2="739" y2="570" stroke="rgba(255,0,0,0.7)" stroke-width="3" />
|
||
<line x1="749.5" y1="180" x2="749.5" y2="570" stroke="rgba(255,0,0,0.7)" stroke-width="3" />
|
||
<text transform="translate(685,320) rotate(0)" style="font-size:18pt;color:#ffffff;" fill="#ffffff">
|
||
<tspan>第</tspan>
|
||
<tspan x="0" y="30">六<tspan>
|
||
<tspan x="0" y="60">防</tspan>
|
||
<tspan x="0" y="90">区</tspan>
|
||
</text>
|
||
|
||
<line x1="512" y1="528" x2="512" y2="570" stroke="rgba(255,0,0,0.7)" stroke-width="3" />
|
||
<line x1="420" y1="528" x2="512" y2="528" stroke="rgba(255,0,0,0.7)" stroke-width="3" />
|
||
<line x1="420" y1="528" x2="420" y2="570" stroke="rgba(255,0,0,0.7)" stroke-width="3" />
|
||
<line x1="420" y1="538.5" x2="512" y2="538.5" stroke="rgba(255,0,0,0.7)" stroke-width="3" />
|
||
<line x1="420" y1="549" x2="512" y2="549" stroke="rgba(255,0,0,0.7)" stroke-width="3" />
|
||
<line x1="420" y1="559.5" x2="512" y2="559.5" stroke="rgba(255,0,0,0.7)" stroke-width="3" />
|
||
<text transform="translate(418,514) rotate(0)" style="font-size:18pt;color:#ffffff;" fill="#ffffff">
|
||
第五防区
|
||
</text>
|
||
|
||
<line x1="30" y1="528" x2="30" y2="570" stroke="rgba(255,0,0,0.7)" stroke-width="3" />
|
||
<line x1="-105" y1="528" x2="30" y2="528" stroke="rgba(255,0,0,0.7)" stroke-width="3" />
|
||
<line x1="-104" y1="528" x2="-104" y2="892" stroke="rgba(255,0,0,0.7)" stroke-width="3" />
|
||
<line x1="-104" y1="892" x2="8" y2="892" stroke="rgba(255,0,0,0.7)" stroke-width="3" />
|
||
<line x1="8" y1="892" x2="8" y2="1020" stroke="rgba(255,0,0,0.7)" stroke-width="3" />
|
||
<line x1="8" y1="1020" x2="50" y2="1020" stroke="rgba(255,0,0,0.7)" stroke-width="3" />
|
||
<line x1="-94.5" y1="538.5" x2="30" y2="538.5" stroke="rgba(255,0,0,0.7)" stroke-width="3" />
|
||
<line x1="-93.5" y1="538.5" x2="-93.5" y2="881.5" stroke="rgba(255,0,0,0.7)" stroke-width="3" />
|
||
<line x1="-93.5" y1="881.5" x2="18.5" y2="881.5" stroke="rgba(255,0,0,0.7)" stroke-width="3" />
|
||
<line x1="18.5" y1="881.5" x2="18.5" y2="1020" stroke="rgba(255,0,0,0.7)" stroke-width="3" />
|
||
<line x1="-84" y1="549" x2="30" y2="549" stroke="rgba(255,0,0,0.7)" stroke-width="3" />
|
||
<line x1="-84" y1="549" x2="-84" y2="871" stroke="rgba(255,0,0,0.7)" stroke-width="3" />
|
||
<line x1="-84" y1="871" x2="29" y2="871" stroke="rgba(255,0,0,0.7)" stroke-width="3" />
|
||
<line x1="29" y1="871" x2="29" y2="1020" stroke="rgba(255,0,0,0.7)" stroke-width="3" />
|
||
<line x1="-73.5" y1="559.5" x2="30" y2="559.5" stroke="rgba(255,0,0,0.7)" stroke-width="3" />
|
||
<line x1="-73.5" y1="559.5" x2="-73.5" y2="860.5" stroke="rgba(255,0,0,0.7)" stroke-width="3" />
|
||
<line x1="-73.5" y1="860.5" x2="39.5" y2="860.5" stroke="rgba(255,0,0,0.7)" stroke-width="3" />
|
||
<line x1="39.5" y1="860.5" x2="39.5" y2="1020" stroke="rgba(255,0,0,0.7)" stroke-width="3" />
|
||
<text transform="translate(-102,922) rotate(0)" style="font-size:18pt;color:#ffffff;" fill="#ffffff">
|
||
第五防区
|
||
</text>
|
||
|
||
<line x1="390" y1="1076" x2="390" y2="1118" stroke="rgba(255,0,0,0.7)" stroke-width="3" />
|
||
<line x1="390" y1="1118" x2="562" y2="1118" stroke="rgba(255,0,0,0.7)" stroke-width="3" />
|
||
<line x1="562" y1="1076" x2="562" y2="1118" stroke="rgba(255,0,0,0.7)" stroke-width="3" />
|
||
<line x1="390" y1="1107.5" x2="562" y2="1107.5" stroke="rgba(255,0,0,0.7)" stroke-width="3" />
|
||
<line x1="390" y1="1097" x2="562" y2="1097" stroke="rgba(255,0,0,0.7)" stroke-width="3" />
|
||
<line x1="390" y1="1086.5" x2="562" y2="1086.5" stroke="rgba(255,0,0,0.7)" stroke-width="3" />
|
||
<text transform="translate(428,1145) rotate(0)" style="font-size:18pt;color:#ffffff;" fill="#ffffff">
|
||
第三防区
|
||
</text>
|
||
|
||
<line x1="755" y1="1076" x2="755" y2="1118" stroke="rgba(255,0,0,0.7)" stroke-width="3" />
|
||
<line x1="755" y1="1118" x2="1250" y2="1118" stroke="rgba(255,0,0,0.7)" stroke-width="3" />
|
||
<line x1="1250" y1="1075" x2="1250" y2="1118" stroke="rgba(255,0,0,0.7)" stroke-width="3" />
|
||
<line x1="1250" y1="1077" x2="1882" y2="1077" stroke="rgba(255,0,0,0.7)" stroke-width="3" />
|
||
<line x1="1882" y1="1035" x2="1882" y2="1077" stroke="rgba(255,0,0,0.7)" stroke-width="3" />
|
||
<line x1="755" y1="1107.5" x2="1239.5" y2="1107.5" stroke="rgba(255,0,0,0.7)" stroke-width="3" />
|
||
<line x1="1239.5" y1="1065.5" x2="1239.5" y2="1107.5" stroke="rgba(255,0,0,0.7)" stroke-width="3" />
|
||
<line x1="1239.5" y1="1065.5" x2="1882" y2="1065.5" stroke="rgba(255,0,0,0.7)" stroke-width="3" />
|
||
<line x1="755" y1="1097" x2="1229" y2="1097" stroke="rgba(255,0,0,0.7)" stroke-width="3" />
|
||
<line x1="1229" y1="1055" x2="1229" y2="1097" stroke="rgba(255,0,0,0.7)" stroke-width="3" />
|
||
<line x1="1229" y1="1055" x2="1882" y2="1055" stroke="rgba(255,0,0,0.7)" stroke-width="3" />
|
||
<line x1="755" y1="1086.5" x2="1218.5" y2="1086.5" stroke="rgba(255,0,0,0.7)" stroke-width="3" />
|
||
<line x1="1218.5" y1="1044.5" x2="1218.5" y2="1086.5" stroke="rgba(255,0,0,0.7)" stroke-width="3" />
|
||
<line x1="1218.5" y1="1044.5" x2="1882" y2="1044.5" stroke="rgba(255,0,0,0.7)" stroke-width="3" />
|
||
<text transform="translate(940,1146) rotate(0)" style="font-size:18pt;color:#ffffff;" fill="#ffffff">
|
||
第二防区
|
||
</text>
|
||
<text transform="translate(1500,1106) rotate(0)" style="font-size:18pt;color:#ffffff;" fill="#ffffff">
|
||
第一防区
|
||
</text>
|
||
|
||
<line x1="29" y1="570" x2="421" y2="570" stroke="rgba(255,255,255,1)" stroke-width="8" />
|
||
<line x1="29" y1="570" x2="29" y2="782" stroke="rgba(255,255,255,1)" stroke-width="8" />
|
||
<line x1="29" y1="782" x2="421" y2="782" stroke="rgba(255,255,255,1)" stroke-width="8" />
|
||
<line x1="421" y1="570" x2="421" y2="782" stroke="rgba(255,255,255,1)" stroke-width="8" />
|
||
<text transform="translate(180,655) rotate(0)" style="font-size:22pt;color:#ffffff;" fill="#ffffff">
|
||
计量楼
|
||
</text>
|
||
|
||
<line x1="760" y1="570" x2="932" y2="570" stroke="rgba(255,255,255,1)" stroke-width="8" />
|
||
<line x1="780" y1="570" x2="780" y2="782" stroke="rgba(255,255,255,1)" stroke-width="8" />
|
||
<line x1="780" y1="782" x2="932" y2="782" stroke="rgba(255,255,255,1)" stroke-width="8" />
|
||
<line x1="932" y1="570" x2="932" y2="782" stroke="rgba(255,255,255,1)" stroke-width="8" />
|
||
<text transform="translate(905,655) rotate(0)" style="font-size:22pt;color:#ffffff;" fill="#ffffff">
|
||
化学楼
|
||
</text>
|
||
|
||
<line x1="1110" y1="595" x2="1518" y2="595" stroke="rgba(255,255,255,1)" stroke-width="8" />
|
||
<line x1="1110" y1="595" x2="1110" y2="775" stroke="rgba(255,255,255,1)" stroke-width="8" />
|
||
<line x1="1110" y1="775" x2="1518" y2="775" stroke="rgba(255,255,255,1)" stroke-width="8" />
|
||
<line x1="1518" y1="595" x2="1518" y2="775" stroke="rgba(255,255,255,1)" stroke-width="8" />
|
||
<text transform="translate(1270,660) rotate(0)" style="font-size:22pt;color:#ffffff;" fill="#ffffff">
|
||
综合楼
|
||
</text>
|
||
|
||
|
||
<line x1="512" y1="570" x2="512" y2="782" stroke="rgba(255,255,255,0.7)" stroke-width="3" />
|
||
<line x1="718" y1="570" x2="718" y2="782" stroke="rgba(255,255,255,0.7)" stroke-width="3" />
|
||
<line x1="760" y1="570" x2="760" y2="782" stroke="rgba(255,255,255,0.7)" stroke-width="3" />
|
||
<line x1="512" y1="630" x2="718" y2="630" stroke="rgba(255,255,255,0.7)" stroke-width="3" />
|
||
<line x1="512" y1="782" x2="760" y2="782" stroke="rgba(255,255,255,0.7)" stroke-width="3" />
|
||
|
||
<image x="75" y="425" width="300" height="500" xlink:href="../../img/eMap/board_1.png"/>
|
||
<text transform="translate(180,655) rotate(0)" style="font-size:22pt;color:#ffffff;" fill="#ffffff">
|
||
计量楼
|
||
</text>
|
||
<image x="90" y="460" width="30" height="500" xlink:href="../../img/eMap/01.png"/>
|
||
<text id='ZJ_camera' transform="translate(125,718) rotate(0)" style="font-size:14pt;color:#ffffff;" fill="#ffffff">
|
||
30
|
||
</text>
|
||
<image x="160" y="460" width="30" height="500" xlink:href="../../img/eMap/02.png"/>
|
||
<text id='ZJ_fireCock' transform="translate(195,718) rotate(0)" style="font-size:14pt;color:#ffffff;" fill="#ffffff">
|
||
30
|
||
</text>
|
||
<image x="230" y="460" width="30" height="500" xlink:href="../../img/eMap/03.png"/>
|
||
<text id='ZJ_switch' transform="translate(265,718) rotate(0)" style="font-size:14pt;color:#ffffff;" fill="#ffffff">
|
||
30
|
||
</text>
|
||
<image x="300" y="460" width="30" height="500" xlink:href="../../img/eMap/04.png"/>
|
||
<text id='ZJ_aSector' transform="translate(335,718) rotate(0)" style="font-size:14pt;color:#ffffff;" fill="#ffffff">
|
||
30
|
||
</text>
|
||
|
||
|
||
|
||
|
||
<image x="795" y="425" width="300" height="500" xlink:href="../../img/eMap/board_1.png"/>
|
||
<text transform="translate(905,655) rotate(0)" style="font-size:22pt;color:#ffffff;" fill="#ffffff">
|
||
化学楼
|
||
</text>
|
||
<image x="880" y="460" width="30" height="500" xlink:href="../../img/eMap/01.png"/>
|
||
<text id='ZJ_camera' transform="translate(915,718) rotate(0)" style="font-size:14pt;color:#ffffff;" fill="#ffffff">
|
||
30
|
||
</text>
|
||
<image x="950" y="460" width="30" height="500" xlink:href="../../img/eMap/02.png"/>
|
||
<text id='ZJ_fireCock' transform="translate(985,718) rotate(0)" style="font-size:14pt;color:#ffffff;" fill="#ffffff">
|
||
30
|
||
</text>
|
||
|
||
|
||
|
||
<image x="1160" y="435" width="300" height="500" xlink:href="../../img/eMap/board_1.png"/>
|
||
<text transform="translate(1270,660) rotate(0)" style="font-size:22pt;color:#ffffff;" fill="#ffffff">
|
||
综合楼
|
||
</text>
|
||
<image x="1245" y="470" width="30" height="500" xlink:href="../../img/eMap/01.png"/>
|
||
<text id='ZJ_camera' transform="translate(1280,728) rotate(0)" style="font-size:14pt;color:#ffffff;" fill="#ffffff">
|
||
30
|
||
</text>
|
||
<image x="1315" y="470" width="30" height="500" xlink:href="../../img/eMap/02.png"/>
|
||
<text id='ZJ_fireCock' transform="translate(1350,728) rotate(0)" style="font-size:14pt;color:#ffffff;" fill="#ffffff">
|
||
30
|
||
</text>
|
||
|
||
|
||
|
||
<image x="1520" y="680" width="300" height="500" xlink:href="../../img/eMap/board_1.png"/>
|
||
<text transform="translate(1632,910) rotate(0)" style="font-size:22pt;color:#ffffff;" fill="#ffffff">
|
||
监控室
|
||
</text>
|
||
<image x="1607" y="720" width="30" height="500" xlink:href="../../img/eMap/01.png"/>
|
||
<text id='ZJ_camera' transform="translate(1642,978) rotate(0)" style="font-size:14pt;color:#ffffff;" fill="#ffffff">
|
||
30
|
||
</text>
|
||
<image x="1677" y="720" width="30" height="500" xlink:href="../../img/eMap/02.png"/>
|
||
<text id='ZJ_fireCock' transform="translate(1712,978) rotate(0)" style="font-size:14pt;color:#ffffff;" fill="#ffffff">
|
||
30
|
||
</text>
|
||
|
||
|
||
|
||
|
||
|
||
<!--<ul id="deviceType">
|
||
<li style="margin-top: 8%;">
|
||
<span><input type="checkbox" checked id="01"/></span>
|
||
<label for="01">
|
||
<span><img src="../../img/eMap/01.png" /></span>
|
||
<span>摄像设备</span>
|
||
<span>（30）</span>
|
||
</label>
|
||
</li>
|
||
<li>
|
||
<span><input type="checkbox" checked id="02"/></span>
|
||
<label for="02">
|
||
<span><img src="../../img/eMap/02.png" /></span>
|
||
<span>消防设备</span>
|
||
<span>（30）</span>
|
||
</label>
|
||
</li>
|
||
<li>
|
||
<span><input type="checkbox" checked id="03"/></span>
|
||
<label for="03">
|
||
<span><img src="../../img/eMap/03.png" /></span>
|
||
<span>智能开关</span>
|
||
<span>（30）</span>
|
||
</label>
|
||
</li>
|
||
<li>
|
||
<span><input type="checkbox" checked id="04"/></span>
|
||
<label for="04">
|
||
<span><img src="../../img/eMap/04.png" /></span>
|
||
<span>安全防区</span>
|
||
<span>（30）</span>
|
||
</label>
|
||
</li>
|
||
<li>
|
||
<span><input type="checkbox" checked id="05"/></span>
|
||
<label for="05">
|
||
<span><img src="../../img/eMap/05.png" /></span>
|
||
<span>道闸闸机</span>
|
||
<span>（30）</span>
|
||
</label>
|
||
</li>
|
||
</ul>-->
|
||
|
||
<ul id="floor">
|
||
<li style="margin-top: 8%;" name='综合楼'>
|
||
<span><img src="../../img/eMap/floor.png" /></span>
|
||
<span>1号综合楼</span>
|
||
<span>（30）</span>
|
||
</li>
|
||
<li name='化学楼'>
|
||
<span><img src="../../img/eMap/floor.png" /></span>
|
||
<span>2号化学楼</span>
|
||
<span>（30）</span>
|
||
</li>
|
||
<li name='计量楼'>
|
||
<span><img src="../../img/eMap/floor.png" /></span>
|
||
<span>3号计量楼</span>
|
||
<span>（30）</span>
|
||
</li>
|
||
</ul>
|
||
</svg>
|
||
|
||
<script>
|
||
$(function(){
|
||
|
||
$('#svgBack').attr('width','2800')
|
||
$('#svgBack').attr('height','1300')
|
||
|
||
//缩放、拖动
|
||
var svgContent = $("svg");
|
||
var options = {
|
||
events: {
|
||
mouseWheel: true,
|
||
doubleClick: false,
|
||
drag: true,
|
||
dragCursor: "move"
|
||
},
|
||
animationTime: 0,
|
||
zoomFactor: 0.1,
|
||
initialViewBox: {
|
||
x: 750,
|
||
y: 150,
|
||
width: 1700,
|
||
height: 1700
|
||
}
|
||
}
|
||
svgPanZoom = svgContent.svgPanZoom(options);
|
||
|
||
|
||
$("#floor li").on({
|
||
click : function(){
|
||
var name = $(this).attr("name");
|
||
if(name === '计量楼'){
|
||
$("#map").load('../../page/eMap_svg/JL/svgJL_1.html')
|
||
}
|
||
if(name === '化学楼'){
|
||
$("#map").load("../../page/eMap_svg/HX/svgHX_1.html")
|
||
}
|
||
if(name === '综合楼'){
|
||
$("#map").load("../../page/eMap_svg/ZH/svgZH_0.html");
|
||
}
|
||
if(name === '食堂'){
|
||
$("#map").load("../../page/eMap_svg/ST/svgST_1.html");
|
||
}
|
||
}
|
||
});
|
||
|
||
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|