<!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%;
|
}
|
</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 class="color_white cnt_btn" href="#">
|
<img src="img/count1.png" class="layui-nav-img">
|
<span class="padding_right_2_p">国控点</span>
|
<span class="layui-badge" id="count1">0</span></a>
|
</div>
|
<div class="cnt_right_div">
|
<a class="color_white cnt_btn" href="#">
|
<img src="img/count2.png" class="layui-nav-img">
|
<span class="padding_right_2_p">监测点</span>
|
<span class="layui-badge" id="count2">0</span></a>
|
</div>
|
</div>
|
<div class="layui-row padding_2_p">
|
<div class="cnt_left_div">
|
<a class="color_white cnt_btn" href="#">
|
<img src="img/count3.png" class="layui-nav-img">
|
<span class="padding_right_2_p">微站</span>
|
<span class="layui-badge" id="count3">0</span></a>
|
</div>
|
<div class="cnt_right_div">
|
<a class="color_white cnt_btn" href="#">
|
<img src="img/count4.png" class="layui-nav-img">
|
<span class="padding_right_2_p">移动监测站</span>
|
<span class="layui-badge" id="count4">0</span></a>
|
</div>
|
</div>
|
<div class="layui-row padding_2_p">
|
<div class="cnt_left_div">
|
<a class="color_white cnt_btn" href="#">
|
<img src="img/count5.png" class="layui-nav-img">
|
<span class="padding_right_2_p">区域</span>
|
<span class="layui-badge" id="count5">0</span></a>
|
</div>
|
<div class="cnt_right_div cnt_btn">
|
<a class="color_white" href="#">
|
<img src="img/count6.png" class="layui-nav-img">
|
<span class="padding_right_2_p">道路</span>
|
<span class="layui-badge" id="count6">0</span></a>
|
</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>
|
<tr>
|
<td>1</td>
|
<td>MN653</td>
|
<td>TAXI202</td>
|
<td>63</td>
|
</tr>
|
<tr>
|
<td>2</td>
|
<td>MN653</td>
|
<td>TAXI202</td>
|
<td>63</td>
|
</tr>
|
<tr>
|
<td>3</td>
|
<td>MN653</td>
|
<td>TAXI202</td>
|
<td>63</td>
|
</tr>
|
<tr>
|
<td>4</td>
|
<td>MN653</td>
|
<td>TAXI202</td>
|
<td>63</td>
|
</tr>
|
<tr>
|
<td>5</td>
|
<td>MN653</td>
|
<td>TAXI202</td>
|
<td>63</td>
|
</tr>
|
<tr>
|
<td>6</td>
|
<td>MN653</td>
|
<td>TAXI202</td>
|
<td>63</td>
|
</tr>
|
<tr>
|
<td>7</td>
|
<td>MN653</td>
|
<td>TAXI202</td>
|
<td>63</td>
|
</tr>
|
<tr>
|
<td>8</td>
|
<td>MN653</td>
|
<td>TAXI202</td>
|
<td>63</td>
|
</tr>
|
<tr>
|
<td>9</td>
|
<td>MN653</td>
|
<td>TAXI202</td>
|
<td>63</td>
|
</tr>
|
<tr>
|
<td>10</td>
|
<td>MN653</td>
|
<td>TAXI202</td>
|
<td>63</td>
|
</tr>
|
</tbody>
|
</table>
|
</div>
|
|
|
|
|
<!--
|
<div id="top10Div" style="width:100%;height:300px">
|
|
</div> -->
|
|
|
|
|
<script>
|
|
|
|
//对应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 potency = parent.applyPotency();
|
console.log(potency);
|
var id = $(this).attr("id");
|
//showInfo(id);
|
|
});
|
|
|
}
|
|
|
$(document).ready(function() {
|
console.log("i am jquery");
|
})
|
|
//加载天气
|
function loadWeather(){
|
|
}
|
|
function showDetail(code){
|
alert("i am left: your code is "+code);
|
}
|
|
//加载count
|
function loadCount(){
|
var backend_url = "http://112.74.77.127:9090/geoserver/sxyd112_47_77_127/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=sxyd112_47_77_127%3Atest_userid&maxFeatures=50&outputFormat=application%2Fjson&viewparams=id1:0;id2:10";
|
backend_url = "http://58.246.27.194:7012/dataapi/Bdata?bid=get_all_count_by_id&userid=2";
|
backend_url = "http://58.246.27.194:7012/dataapi/Bdata?bid=get_1001_top10_hour&datatime=2021-09-08%2012:00:00&qindex=pm10";
|
$.ajax({
|
type: 'get',
|
dataType: 'jsonp',
|
crossDomain: true,
|
data: {},
|
//async: false,//同步
|
url: backend_url,
|
//jsonp:"callback", //Jquery生成验证参数的名称
|
//processData: false,
|
//jsonpCallback: "handleCallback", // 自定义回调函数名
|
//timeout: 0,
|
success: function (data) {
|
console.log(data);
|
|
|
$("#count1").text(39);
|
$("#count2").text(34);
|
$("#count3").text(0);
|
$("#count4").text(2);
|
$("#count5").text(12);
|
},
|
error: function (request, textStatus) {
|
|
}
|
});
|
}
|
|
function handleCallback(){
|
console.log("back");
|
}
|
|
|
function test(id) {
|
alert("i am left: your id is "+id);
|
}
|
</script>
|
|
|
|
</body>
|
|
</html>
|
