<!DOCTYPE html>
|
<html class="no-js css-menubar" lang="zh-cn">
|
|
<head>
|
<script type="text/javascript" src="echart/echarts4.0.js"></script>
|
<link href="echart/theme/shine.js" rel="stylesheet" />
|
<link rel="stylesheet" href="../../lib/layui/css/layui.css">
|
<script type="text/javascript" src="../../lib/jquery/jquery-2.1.4.min.js"></script>
|
|
<script type="text/javascript" src="../../lib/layui/layui.js"></script>
|
|
|
<style>
|
#top10Div {
|
width: 100%;
|
height: 50%;
|
/* background-color: hotpink; */
|
/* margin-bottom: 80px; */
|
/* margin-top: 50px; */
|
}
|
|
#top10Div>table {
|
width: 100%;
|
height: 50%;
|
background-color: rgba(0, 0, 0, 0);
|
/* border-collapse:collapse; */
|
/* color: aqua; */
|
/* font: italic 400 16px "宋体"; */
|
/* border-radius: 10px; */
|
}
|
|
.no_bgc_table{
|
width: 100%;
|
height: 50%;
|
padding: 2px;
|
background-color: rgba(0, 0, 0, 0);
|
color:rgba(255,255,255,.7);
|
}
|
|
.no_bgc_table_head{
|
background-color: rgba(0, 0, 0, 0);
|
color:rgba(255,255,255,.7);
|
}
|
.top_10_table tr {
|
border-bottom: 1px solid rgba(77,255,255,.5);
|
}
|
|
|
.cnt_div{
|
color: #fff;
|
background-color: rgba(0, 48, 64, .6);
|
}
|
.color_white{
|
color: #fff;
|
}
|
|
.cnt_left_div{
|
width: 50%;
|
float: left;
|
}
|
.cnt_right_div{
|
width: 50%;
|
float: right;
|
}
|
.padding_2_p{
|
padding: 2%;
|
}
|
.padding_right_2_p{
|
padding: 2%;
|
}
|
|
.my_sep{
|
width: 96%;
|
/* text-align: center; */
|
height: 2px;
|
margin-left: 2%;
|
}
|
|
.select_tr{
|
background: rgba(255,87,34,.5) !important;
|
}
|
.over_tr{
|
background: rgba(255,87,34,.8) !important;
|
}
|
|
.select_btn{
|
color: #FF5722;
|
}
|
</style>
|
</head>
|
|
<!-- <body style="padding:5px;text-align:center;background-color: azure;"> -->
|
|
<body cl>
|
<div class="layui-row">
|
<span class="layui-breadcrumb" lay-separator="|" >
|
<a href="#"></a>
|
<a href="#" style="color: white!important;">监测总量</a>
|
<a href="#"></a>
|
</span>
|
</div>
|
|
<div class="layui-row">
|
<div style="float: left;width: 30%;">
|
<img src="img/tq_02qing.png">
|
</div>
|
|
<div id="weather" style="float: right;width: 70%;">
|
<table class="layui-table no_bgc_table" lay-skin="nob">
|
<tr>
|
<td>温度:35</td>
|
<td>能见度:100%</td>
|
</tr>
|
<tr>
|
<td>湿度:70%</td>
|
<td>PM2.5:60</td>
|
</tr>
|
</table>
|
</div>
|
|
|
|
|
|
</div>
|
|
|
<div class="layui-row cnt_div">
|
<div class="layui-row padding_2_p">
|
<div class="cnt_left_div">
|
<a id="href1" class="color_white cnt_btn" href="#">
|
<img src="img/count1.png" class="layui-nav-img">
|
<span class="padding_right_2_p" id="countName1">国控点</span>
|
<span class="layui-badge" id="count1">0</span></a>
|
<input class="codeInput" type="hidden" id="countCode1">
|
</div>
|
<div class="cnt_right_div">
|
<a id="href2" class="color_white cnt_btn" href="#">
|
<img src="img/count2.png" class="layui-nav-img">
|
<span class="padding_right_2_p" id="countName2">监测点</span>
|
<span class="layui-badge" id="count2">0</span></a>
|
<input class="codeInput" type="hidden" id="countCode2">
|
</div>
|
</div>
|
<div class="layui-row padding_2_p">
|
<div class="cnt_left_div">
|
<a id="href3" class="color_white cnt_btn" href="#">
|
<img src="img/count3.png" class="layui-nav-img">
|
<span class="padding_right_2_p" id="countName3">微站</span>
|
<span class="layui-badge" id="count3">0</span></a>
|
<input class="codeInput" type="hidden" id="countCode3">
|
</div>
|
<div class="cnt_right_div">
|
<a id="href4" class="color_white cnt_btn" href="#">
|
<img src="img/count4.png" class="layui-nav-img">
|
<span class="padding_right_2_p" id="countName4">移动监测站</span>
|
<span class="layui-badge" id="count4">0</span></a>
|
<input class="codeInput" type="hidden" id="countCode4">
|
</div>
|
</div>
|
<div class="layui-row padding_2_p">
|
<div class="cnt_left_div">
|
<a id="href5" class="color_white cnt_btn" href="#">
|
<img src="img/count5.png" class="layui-nav-img">
|
<span class="padding_right_2_p" id="countName5">区域</span>
|
<span class="layui-badge" id="count5">0</span></a>
|
<input class="codeInput" type="hidden" id="countCode5">
|
</div>
|
<div class="cnt_right_div cnt_btn">
|
<a id="href6" class="color_white" href="#">
|
<img src="img/count6.png" class="layui-nav-img">
|
<span class="padding_right_2_p" id="countName6">道路</span>
|
<span class="layui-badge" id="count6">0</span></a>
|
<input class="codeInput" type="hidden" id="countCode6">
|
</div>
|
</div>
|
</div>
|
|
|
|
<!-- <div class="layui-row">
|
<ul class="layui-nav" lay-bar="disabled">
|
<li class="layui-nav-item">
|
<a href="#">
|
<img src="img/count1.png" class="layui-nav-img">
|
国控点<span class="layui-badge" id="count1">0</span></a>
|
</li>
|
<li class="layui-nav-item">
|
<a href="#">
|
<img src="img/count2.png" class="layui-nav-img">
|
监测点<span class="layui-badge" id="count2">0</span></a>
|
</li>
|
<li class="layui-nav-item">
|
<a href="#">
|
<img src="img/count3.png" class="layui-nav-img">
|
微站<span class="layui-badge" id="count3">0</span></a>
|
</li>
|
<li class="layui-nav-item">
|
<a href="#">
|
<img src="img/count4.png" class="layui-nav-img">
|
移动监测站<span class="layui-badge" id="count4">0</span></a>
|
</li>
|
<li class="layui-nav-item">
|
<a href="#">
|
<img src="img/count5.png" class="layui-nav-img">
|
区域<span class="layui-badge" id="count5">0</span></a>
|
</li>
|
<li class="layui-nav-item">
|
<a href="#">
|
<img src="img/count6.png" class="layui-nav-img">
|
道路<span class="layui-badge" id="count6">0</span></a>
|
</li>
|
</ul>
|
</div> -->
|
<hr class="layui-border-blue my_sep" >
|
<div class="layui-row">
|
<span class="layui-breadcrumb" lay-separator="|" >
|
<a href="#"></a>
|
<a href="#" style="color: white!important;">监测Top10</a>
|
<a href="#"></a>
|
</span>
|
</div>
|
|
<div class="layui-row" style="padding-left:1%;padding-right:1%;">
|
<table id="" class="layui-table no_bgc_table top_10_table" lay-skin="nob">
|
<thead >
|
<tr style="background-color: rgba(0, 0, 0, 0); color: #FF5722;">
|
<th style="font-weight: bold;">序号</th>
|
<th style="font-weight: bold;">编号</th>
|
<th style="font-weight: bold;">名称</th>
|
<th style="font-weight: bold;">指标</th>
|
</tr>
|
</thead>
|
<tbody id="top10Tb" style="cursor: pointer;">
|
|
</tbody>
|
</table>
|
</div>
|
|
|
|
|
|
<!--
|
<div id="top10Div" style="width:100%;height:300px">
|
|
</div> -->
|
|
|
|
|
<script>
|
|
var potency = 'pm25';
|
var potencyObj = {
|
'pm25':'pm25'
|
,'pm10':'pm10'
|
,'no':'no'
|
,'no2':'no2'
|
,'nox':'nox'
|
,'co':'co'
|
}
|
var cntId;
|
var cntName;
|
//对应widget.js中MyWidget实例化后的对象
|
var thisWidget
|
|
//当前页面业务
|
function initWidgetView(_thisWidget) {
|
thisWidget = _thisWidget
|
//绑定点击事件
|
//loadWeather();
|
|
loadCount();
|
|
$(".cnt_div a").on("click", function () {
|
$(".cnt_div a").removeClass("select_btn");
|
$(this).addClass("select_btn");
|
//var potencyWidget = mars3d.widget.getClass("widgetsTS/potency/widget.js");
|
var _id = $(this).attr("_code");
|
var _name = $(this).attr("_name");
|
cntId = _id;
|
cntName = _name;
|
loadTop10();
|
});
|
|
|
}
|
|
|
$(document).ready(function() {
|
//console.log("i am jquery");
|
})
|
|
//加载天气
|
function loadWeather(){
|
var backend_url = "https://api.map.baidu.com/weather/v1/?district_id=310100&data_type=all&ak=VcpU6Z2XivfQ44TDpSU8KHMT1hgMcCzq";
|
$.ajax({
|
type: 'get',
|
dataType: 'json',
|
data: {},
|
async: false,//同步
|
url: backend_url,
|
success: function (data) {
|
console.log(data);
|
},
|
error: function (request, textStatus) {
|
|
}
|
});
|
}
|
|
function showDetail(code){
|
alert("i am left: your code is "+code);
|
}
|
|
|
//加载count
|
function loadCount(){
|
var backend_url = "http://58.246.27.194:7012/dataapi/Bdata?bid=get_all_count_by_id&userid="+parent.userid;
|
$.ajax({
|
type: 'get',
|
dataType: 'json',
|
data: {},
|
async: false,//同步
|
url: backend_url,
|
success: function (data) {
|
var cntGroup = data.data.result;
|
if(cntGroup != null){
|
for(var i=0;i<cntGroup.length;i++){
|
var j = i+1;
|
var cntObj = cntGroup[i];
|
|
$("#count"+j).text(cntObj.count);
|
$("#countName"+j).text(cntObj.name);
|
$("#href"+j).attr("_code",cntObj.code);
|
$("#href"+j).attr("_name",cntObj.name);
|
|
}
|
}
|
},
|
error: function (request, textStatus) {
|
|
}
|
});
|
}
|
|
function reloadTop10(_potency){
|
potency = _potency;
|
loadTop10();
|
}
|
|
function loadTop10(){
|
|
//var potency = parent.applyPotency();
|
var dateType = parent.applyDateType();
|
var datetime = encodeURIComponent(parent.getAppDateTime());
|
var backend_url = "http://58.246.27.194:7012/dataapi/Bdata?bid=get_"+cntId+"_top10_"+dateType+"&datatime="+datetime+"&qindex="+potency;
|
|
//加入cntId
|
$.ajax({
|
type: 'get',
|
dataType: 'json',
|
//crossDomain: true,
|
data: {},
|
async: false,//同步
|
url: backend_url,
|
success: function (data) {
|
var tableData = data.data.result;
|
//console.log(tableData);
|
$("#top10Tb").empty();
|
if(tableData != null){
|
for(var i=0;i<tableData.length;i++){
|
var j = i+1;
|
var topObj = tableData[i];
|
var _tr = "<tr _siteid='"+topObj.siteid+"' onclick='cli(this)' onmouseover='over(this)' onmouseout='out(this)' ><td>"+j+"</td><td>"+topObj.siteid+"</td><td>"+topObj.SiteName+"</td><td>"+topObj[potency]+"</td></tr>"
|
$("#top10Tb").append(_tr);
|
|
}
|
}
|
|
},
|
error: function (request, textStatus) {
|
|
}
|
});
|
}
|
|
|
function over(obj){
|
|
$('#top10Tb tr').removeClass("over_tr");
|
$(obj).addClass("over_tr");
|
//obj.style.background = "rgba(255,87,34,.8)";
|
}
|
|
function out(obj){
|
|
$(obj).removeClass("over_tr");
|
}
|
|
function cli(obj){
|
$('#top10Tb tr').removeClass("select_tr");
|
$(obj).addClass("select_tr");
|
var siteId = $(obj).attr("_siteid");
|
thisWidget.viewWindowRight.loadIndexTable(siteId,cntId);
|
thisWidget.viewWindowRight.loadLineChart(siteId,cntId,cntName);
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|
