You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

252 lines
6.5 KiB

<#include "../../_include/_t.ftl"/>
<!DOCTYPE html>
<html>
<head>
<title></title>
<#include "../../_include/_h.ftl"/>
<#include "../../_include/_l.ftl"/>
<#include "../../_include/_j.ftl"/>
<#include "../../_include/_z.ftl"/>
<#include "../../_include/_e.ftl"/>
<#include "../../_include/bdata/_c.ftl"/>
<style type="text/css">
.td_class{
border:solid 1px #0060bf;
font-size:18px;
font-weight:bold;
text-align:center;
height:40px;
line-height:40px;
vertical-align:middle;
}
.tr_class{
border:solid 1px #0060bf;
font-size:18px;
text-align:center;
height:40px;
line-height:40px;
vertical-align:middle;
}
._tr_class{
border:solid 1px #0060bf;
font-size:18px;
text-align:center;
height:40px;
line-height:40px;
vertical-align:middle;
}
</style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
<!-- 内容主体区域 -->
<div class="layui-body" style="top:0;">
<div class="page_content" style="margin-left: 0px;width: 100%;">
<div style="min-height: 80vh;padding:30px 50px;">
<h1 style="text-align:center;margin-bottom:20px;">固定消防设施报警分析</h1>
<div class="page_tools">
<div class="layui-inline layui-form" style="width:75px;">
<select id="xfbj">
<option value="">全部</option>
<option value="1">预警</option>
<option value="2">报警</option>
<option value="3">火警</option>
<option value="4">故障</option>
<option value="5">其他</option>
</select>
</div>
<div class="layui-inline" style="width:120px;">
<input class="layui-input" type="text" id="data_1_01_beginDate" value="${.now?string('yyyy-MM')}-01" autocomplete="off" style="font-size:16px;padding-top:4px;cursor:pointer;letter-spacing:1px;"/>
</div>
<div class="layui-inline">到</div>
<div class="layui-inline" style="width:120px;">
<input class="layui-input" type="text" id="data_1_01_endDate" value="${.now?string('yyyy-MM-dd')}" autocomplete="off" style="font-size:16px;padding-top:4px;cursor:pointer;letter-spacing:1px;"/>
</div>
<button id="data_1_01_div_queryBtn" class="layui-btn layui-btn-normal"><i class="layui-icon">&#xe615;</i>查询</button>
</div>
<div id="data_1_01_div_echars" style="height:500px;width: 90%;margin:10px auto;margin-bottom: 66px;">
</div>
<table width="90%" style="border:solid 1px #0060bf;margin:10px auto;background-color:transparent;border-radius:5px;">
<thead>
<th class="td_class">时间</th>
<th class="td_class">报警数</th>
<th class="td_class">时间</th>
<th class="td_class">报警数</th>
<th class="td_class">时间</th>
<th class="td_class">报警数</th>
</thead>
<tbody id="table_data">
<tr>
<td colspan="6" class="_tr_class">暂无数据</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script type="text/javascript">
layuiplus.on_w_1(function(){
layuiplus.init(1);
$.ajax({
type:"get",
url:"http://"+window.location.host.split(":")[0]+"${rmsUrl}/WEBAPI/WebHandle/Handler.ashx",
data:{
Action:"TotalAlarmHoursForType",
UNIT_ID:"${manager_user['groupId']}",
TYPE:$("#xfbj").val(),
S_TIME:$("#data_1_01_beginDate").val(),
E_TIME:$("#data_1_01_endDate").val()
},
dataType:"json",
success:function(data){
//解析data.data
var tArr = new Array();
var dArr = new Array();
var _strHtml = "<tr>";
for(var i = 0;i < data.data.length;i++){
if((i+1)%3 == 0){
_strHtml += '<td class="_tr_class">'+data.data[i].RIQI+'时</td><td class="_tr_class">'+data.data[i].NUM+'</td></tr></tr>';
}else{
_strHtml += '<td class="_tr_class">'+data.data[i].RIQI+'时</td><td class="_tr_class">'+data.data[i].NUM+'</td>';
}
tArr.push(data.data[i].RIQI+"时");
dArr.push(data.data[i].NUM);
}
$("#table_data").html(_strHtml);
bdataEchars("1","data_1_01_div_echars",tArr,dArr);
}
});
//单位消防隐患统计的查询按钮
$("#data_1_01_div_queryBtn").click(function(){
$.ajax({
type:"get",
url:"http://47.104.11.54:8075/WEBAPI/WebHandle/Handler.ashx",
data:{
Action:"TotalAlarmHoursForType",
UNIT_ID:"${manager_user['groupId']}",
TYPE:$("#xfbj").val(),
S_TIME:$("#data_1_01_beginDate").val(),
E_TIME:$("#data_1_01_endDate").val()
},
dataType:"json",
success:function(data){
//解析data.data
var tArr = new Array();
var dArr = new Array();
var _strHtml = "<tr>";
for(var i = 0;i < data.data.length;i++){
if((i+1)%3 == 0){
_strHtml += '<td class="_tr_class">'+data.data[i].RIQI+'时</td><td class="_tr_class">'+data.data[i].NUM+'</td></tr></tr>';
}else{
_strHtml += '<td class="_tr_class">'+data.data[i].RIQI+'时</td><td class="_tr_class">'+data.data[i].NUM+'</td>';
}
tArr.push(data.data[i].RIQI+"时");
dArr.push(data.data[i].NUM);
}
$("#table_data").html(_strHtml);
bdataEchars("1","data_1_01_div_echars",tArr,dArr);
}
});
});
//日期input
ldate.render({
elem:"#data_1_01_beginDate",
max:"#data_1_01_endDate"
});
ldate.render({
elem:"#data_1_01_endDate",
max:"nowTime"
});
});
var bdataEchars = function(t,pdiv){
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
color: '#023c8d'
}
}
},
grid: {
left: '1%',
right: '4%',
bottom: '1%',
top: '6%',
containLabel: true
},
xAxis: [{
type: 'category',
boundaryGap: false,
axisLine: {
lineStyle: {
color: '#023c8d'
}
},
axisLabel: {
margin: 10,
textStyle: {
fontSize: 14,
color: '#b5e0ff'
}
},
data: arguments[2]
}],
yAxis: [{
type: 'value',
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: '#023c8d'
}
},
axisLabel: {
margin: 10,
textStyle: {
fontSize: 14,
color: '#b5e0ff'
}
},
splitLine: {
show: false
}
}],
series: [{
name:'报警设备',
type:'line',
stack: '总数',
data:arguments[3],
symbolSize: 5,
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(61, 205, 249, 0.9)'
}, {
offset: 0.8,
color: 'rgba(61, 205, 249, 0.1)'
}], false),
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 10
}
},
itemStyle: {
normal: {
color: 'rgb(61, 205, 249)',
borderWidth: 1
}
},
}]
};
echarts.init($("#"+pdiv).get(0)).setOption(option);
}
</script>
</body>
</html>