2016年上海SODA开放数据大赛进入复赛作品《安全橙子》:
效果:
网页展示源码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="./jquery.min.js"></script>
<style>
*{margin: 0;padding: 0;box-sizing: border-box;}
.js-tab{width: 100%;}
.js-tab li.js-click{float: left;width:50%;height: 50px;border: #000 solid 1px;color: #000;list-style: none;cursor: pointer;;color: #fff;background-color: #101734;}
.js-tab li.js-click2{float: right;width:50%;height: 50px;border: #000 solid 1px;color: #000;background-color:#5E5E5E;list-style: none;cursor: pointer;}
.js-div{border: #000 solid 1px;width: 100%;height: 970px;}
.display{display: none;}
.leftdiv{
position:absolute;
z-index:20;
bottom:0%;
right:88%;
background:#4A4752;
}
.container{
position:absolute;
z-index:20;
bottom:0%;
right:0%;
}
.leftdiv2{
position:absolute;
z-index:20;
bottom:0%;
right:88%;
background:#4A4752;<!--url('./img/xing2.jpg');-->
}
.container2{
position:absolute;
z-index:20;
top:0%;
bottom:0%;
left:100%;
}
#logo1{
position:relative;
width:100%;
height:70px;
z-index:100;
top:0px;
left:0px;
text-align:left;
}
#logo1 img{
width:50px;
height:61px;
}
#logo2{
position:relative;
width:100%;
height:70px;
z-index:100;
top:0px;
left:0px;
text-align:left;
}
#logo2 img{
width:50px;
height:61px;
}
#logo3{
position:relative;
width:100%;
height:70px;
z-index:100;
top:0px;
left:0px;
text-align:left;
}
#logo3 img{
width:50px;
height:61px;
}
#logo12{
position:relative;
width:100%;
height:70px;
z-index:100;
top:0px;
left:0px;
text-align:left;
}
#logo12 img{
width:50px;
height:61px;
}
#logo22{
position:relative;
width:100%;
height:70px;
z-index:100;
top:0px;
left:0px;
text-align:left;
}
#logo22 img{
width:50px;
height:61px;
}
#logo32{
position:relative;
width:100%;
height:70px;
z-index:100;
top:0px;
left:0px;
text-align:left;
}
#logo32 img{
width:50px;
height:61px;
}
</style>
</head>
<body>
<ul class="js-tab clearfix" id="js-tab">
<li class="js-click"> <p align="left" style="font-family:Microsoft YaHei;color:#4ED3D3;font-size:28px; margin: 0;line-height:42px;"> 城市公共安全综合态势图</p></li>
<li class="js-click2"> <p align="right" style="font-family:Microsoft YaHei;color:#4ED3D3;font-size:28px; margin: 0;line-height:42px"><input size="45" style="font-family:Microsoft YaHei;width:180px;height:30px;" type="text" class="content" id="inputcontent" name="q" autocomplete="off" value="上海站" placeholder="输入感兴趣位置..."> <button style="font-family:Microsoft YaHei;width:100px;height: 30px;background:#1169EE;color:#FFFFFF;border:0;border-radius:20px ;cursor:pointer;font-size:14px;margin-right:15px;" type="submit" class="search-button" οnclick="searchByStationName();"><span style="font-family:Microsoft YaHei;" class="hide-text">搜索</span><span class="sprite-global-icon-magnifier-dark"></span></button> 城市公共安全信息检索系统 </p></li>
</ul>
<div class="js-div" id="js-div">
<div class="option1">
<div class="leftdiv" style="height:95%;width:12%" >
<div style="font-family:Microsoft YaHei;width:100%;height:40%;float:left">
<div class="logo1" id="logo1" style="background:#3399cc;"><img style="vertical-align: middle;" src="img/logo1.png"/><span align="center" style="font-family:Microsoft YaHei;color:#FFFFFF;font-size:25px; margin: 0;line-height:28px;vertical-align: middle;"> 社会治安</span></div>
<p align="center">
</br>
<input style="font-family:Microsoft YaHei;width:150px;height: 40px;background:#BE0E31;color:#FFFFFF;border:0;font-size:14px;margin-right:15px;" type="button" value="派出所出警" class="btn" id="chujing"/></br></br>
<input style="font-family:Microsoft YaHei;width:150px;height: 40px;background:#BE0E31;color:#FFFFFF;border:0;font-size:14px;margin-right:15px;" type="button" value="交通事故" class="btn" id="jiaotong"/></br></br>
<input style="font-family:Microsoft YaHei;width:150px;height: 40px;background:#BE0E31;color:#FFFFFF;border:0;font-size:14px;margin-right:15px;" type="button" value="企业不良记录" class="btn" id="qiyebuliang"/></br></br>
<input style="font-family:Microsoft YaHei;width:150px;height: 40px;background:#BE0E31;color:#FFFFFF;border:0;font-size:14px;margin-right:15px;" type="button" value="乱晾晒车乱停" class="btn" id="luanting"/></br></br>
</p>
</div>
<div style="width:100%;height:25%;float:left">
<div class="logo2" id="logo2" style="font-family:Microsoft YaHei;background:#39383F;"><img style="vertical-align: middle;" src="img/logo2.png"/><span align="center" style="color:#FFFFFF;font-size:25px; margin: 0;line-height:28px;vertical-align: middle;"> 食品安全</span></div>
<p align="center">
</br>
<input style="font-family:Microsoft YaHei;width:150px;height: 40px;background:#15B8B8;color:#FFFFFF;border:0;font-size:14px;margin-right:15px;" type="button" value="餐饮处罚" class="btn2" id="canyin"/></br></br>
<input style="font-family:Microsoft YaHei;width:150px;height: 40px;background:#15B8B8;color:#FFFFFF;border:0;font-size:14px;margin-right:15px;" type="button" value="摆摊占道" class="btn2" id="baitan"/></br></br>
</p>
</div>
<div style="width:100%;height:35%;float:left">
<div class="logo3" id="logo3" style="font-family:Microsoft YaHei;background:#39383F;"><img style="vertical-align: middle;" src="img/logo3.png"/><span align="center" style="font-family:Microsoft YaHei;color:#FFFFFF;font-size:25px; margin: 0;line-height:28px;vertical-align: middle;"> 环境卫生</span></div>
<p align="center">
</br>
<input style="font-family:Microsoft YaHei;width:150px;height: 40px;background:#0C2DAF;color:#FFFFFF;border:0;font-size:14px;margin-right:15px;" type="button" value="重污染" class="btn3" id="wuran"/></br></br>
<input style="font-family:Microsoft YaHei;width:150px;height: 40px;background:#0C2DAF;color:#FFFFFF;border:0;font-size:14px;margin-right:15px;" type="button" value="暴露垃圾乱涂写" class="btn3" id="baolvlaji"/></br></br>
<input style="font-family:Microsoft YaHei;width:150px;height: 40px;background:#0C2DAF;color:#FFFFFF;border:0;font-size:14px;margin-right:15px;" type="button" value="建筑工地污染" class="btn3" id="gongdi"/></br></br>
</p>
</div>
</div>
<div class="container" id="container" style="height:95%; width:88%">
</div>
</div>
<div class="option2" style="display: none;">
<div class="leftdiv2" id="leftdiv2" style="font-family:Microsoft YaHei;height:95%;width:12%" >
<div style="font-family:Microsoft YaHei;width:100%;height:40%;float:left">
<div class="logo12" id="logo12" style="font-family:Microsoft YaHei;background:#39383F;"><img style="vertical-align: middle;" src="img/logo1.png"/><span align="center" style="color:#FFFFFF;font-size:25px; margin: 0;line-height:28px;vertical-align: middle;"> 社会治安</span></div>
<p align="center">
</br>
<input style="font-family:Microsoft YaHei;width:150px;height: 40px;background:#BE0E31;color:#FFFFFF;border:0;font-size:14px;margin-right:15px;" type="button" value="派出所出警" class="btn4" id="chujing2"/><input type="checkbox" name="category" value="0" checked="true" /></br></br>
<input style="font-family:Microsoft YaHei;width:150px;height: 40px;background:#BE0E31;color:#FFFFFF;border:0;font-size:14px;margin-right:15px;" type="button" value="交通事故" class="btn4" id="jiaotong2"/><input type="checkbox" name="category" value="1" checked="true" /></br></br>
<input style="font-family:Microsoft YaHei;width:150px;height: 40px;background:#BE0E31;color:#FFFFFF;border:0;font-size:14px;margin-right:15px;" type="button" value="企业不良记录" class="btn4" id="qiyebuliang2"/><input type="checkbox" name="category" value="2" /></br></br>
<input style="font-family:Microsoft YaHei;width:150px;height: 40px;background:#BE0E31;color:#FFFFFF;border:0;font-size:14px;margin-right:15px;" type="button" value="乱晾晒车乱停" class="btn4" id="luanting2"/><input type="checkbox" name="category" value="3" /></br></br>
</p>
</div>
<div style="font-family:Microsoft YaHei;width:100%;height:25%;float:left">
<div class="logo22" id="logo22" style="font-family:Microsoft YaHei;background:#39383F;"><img style="vertical-align: middle;" src="img/logo2.png"/><span align="center" style="font-family:Microsoft YaHei;color:#FFFFFF;font-size:25px; margin: 0;line-height:28px;vertical-align: middle;"> 食品安全</span></div>
<p align="center">
</br>
<input style="font-family:Microsoft YaHei;width:150px;height: 40px;background:#15B8B8;color:#FFFFFF;border:0;font-size:14px;margin-right:15px;" type="button" value="餐饮处罚" class="btn5" id="canyin2"/><input type="checkbox" name="category" value="4" /></br></br>
<input style="font-family:Microsoft YaHei;width:150px;height: 40px;background:#15B8B8;color:#FFFFFF;border:0;font-size:14px;margin-right:15px;" type="button" value="摆摊占道" class="btn5" id="baitan2"/><input type="checkbox" name="category" value="5" /></br></br>
</p>
</div>
<div style="font-family:Microsoft YaHei;width:100%;height:35%;float:left">
<div class="logo32" id="logo32" style="font-family:Microsoft YaHei;background:#39383F;"><img style="vertical-align: middle;" src="img/logo3.png"/><span align="center" style="color:#FFFFFF;font-size:25px; margin: 0;line-height:28px;vertical-align: middle;"> 环境卫生</span></div>
<p align="center">
</br>
<input style="font-family:Microsoft YaHei;width:150px;height: 40px;background:#0C2DAF;color:#FFFFFF;border:0;font-size:14px;margin-right:15px;" type="button" value="重污染" class="btn6" id="wuran2"/><input type="checkbox" name="category" value="6" /></br></br>
<input style="font-family:Microsoft YaHei;width:150px;height: 40px;background:#0C2DAF;color:#FFFFFF;border:0;font-size:14px;margin-right:15px;" type="button" value="暴露垃圾乱涂写" class="btn6" id="baolvlaji2"/><input type="checkbox" name="category" value="7" /></br></br>
<input style="font-family:Microsoft YaHei;width:150px;height: 40px;background:#0C2DAF;color:#FFFFFF;border:0;font-size:14px;margin-right:15px;" type="button" value="建筑工地污染" class="btn6" id="gongdi2"/><input type="checkbox" name="category" value="8" /></br></br>
<input style="font-family:Microsoft YaHei;width:50px;height: 20px;background:#AA5577;color:#FFFFFF;border:0;font-size:14px;margin-right:15px;" type="button" value="全选" class="btn7" id="selectAll"/>
<input style="font-family:Microsoft YaHei;width:50px;height: 20px;background:#AA5577;color:#FFFFFF;border:0;font-size:14px;margin-right:15px;" type="button" value="全不选" class="btn7" id="unSelect"/>
<input style="font-family:Microsoft YaHei;width:50px;height: 20px;background:#AA5577;color:#FFFFFF;border:0;font-size:14px;margin-right:15px;" type="button" value="反选" class="btn7" id="reverse"/>
</p>
</div>
<div class="container2" id="container2" style="height:100%; width:800%">
</div>
</div>
</div>
<!-- 引入 js -->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=iYwyAuGoB5PMQUewkUH30cmgxY05VMrw">//ZUONbpqGBsYGXNIYHicvbAbM</script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<!-- End -->
<script type="text/javascript">
/
//option2 jquery监控选择按钮
$(function () {
//全选
$("#selectAll").click(function () {
$("#leftdiv2 :checkbox,#all").prop("checked", true);
});
//全不选
$("#unSelect").click(function () {
$("#leftdiv2 :checkbox,#all").prop("checked", false);
});
//反选
$("#reverse").click(function () {
$("#leftdiv2 :checkbox").each(function () {
$(this).prop("checked", !$(this).prop("checked"));
});
//allchk();
});
})
//searchByStationName();
option2();
function option2()