861 lines
33 KiB
Plaintext
861 lines
33 KiB
Plaintext
|
<%@ page language="java" pageEncoding="UTF-8" %>
|
||
|
|
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
|
||
|
|
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
|
||
|
|
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
|
||
|
|
<%@ page import="com.sipai.entity.base.ServerObject" %>
|
||
|
|
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security" %>
|
||
|
|
<!DOCTYPE html>
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<title><%= ServerObject.atttable.get("TOPTITLE")%>
|
||
|
|
</title>
|
||
|
|
<!-- 引用页头及CSS页-->
|
||
|
|
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||
|
|
|
||
|
|
<!--bootstrap-table 导出 -->
|
||
|
|
<script type="text/javascript"
|
||
|
|
src="<%=request.getContextPath()%>/plugins/bootstrap-table/extensions/export/bootstrap-table-export.js"></script>
|
||
|
|
<script type="text/javascript"
|
||
|
|
src="<%=request.getContextPath()%>/plugins/bootstrap-table/tableExport/libs/FileSaver/FileSaver.min.js"></script>
|
||
|
|
<script type="text/javascript"
|
||
|
|
src="<%=request.getContextPath()%>/plugins/bootstrap-table/tableExport/libs/js-xlsx/xlsx.core.min.js"></script>
|
||
|
|
<script type="text/javascript"
|
||
|
|
src="<%=request.getContextPath()%>/plugins/bootstrap-table/tableExport/libs/jsPDF/jspdf.min.js"></script>
|
||
|
|
<script type="text/javascript"
|
||
|
|
src="<%=request.getContextPath()%>/plugins/bootstrap-table/tableExport/libs/jsPDF-AutoTable/jspdf.plugin.autotable.js"></script>
|
||
|
|
<script type="text/javascript"
|
||
|
|
src="<%=request.getContextPath()%>/plugins/bootstrap-table/tableExport/libs/es6-promise/es6-promise.auto.min.js"></script>
|
||
|
|
<script type="text/javascript"
|
||
|
|
src="<%=request.getContextPath()%>/plugins/bootstrap-table/tableExport/libs/html2canvas/html2canvas.min.js"></script>
|
||
|
|
<script type="text/javascript"
|
||
|
|
src="<%=request.getContextPath()%>/plugins/bootstrap-table/tableExport/tableExport.min.js"></script>
|
||
|
|
|
||
|
|
<style type="text/css">
|
||
|
|
/*
|
||
|
|
顶部工具栏
|
||
|
|
*/
|
||
|
|
#divtop {
|
||
|
|
height: 50px;
|
||
|
|
width: 100%;
|
||
|
|
float: left;
|
||
|
|
}
|
||
|
|
|
||
|
|
#div_top {
|
||
|
|
width: 100%;
|
||
|
|
height: 50%;
|
||
|
|
margin: 0px 0px 0px 0px;
|
||
|
|
float: left;
|
||
|
|
}
|
||
|
|
|
||
|
|
#div_below {
|
||
|
|
width: 100%;
|
||
|
|
height: 50%;
|
||
|
|
margin: 0px 0px 0px 0px;
|
||
|
|
float: left;
|
||
|
|
}
|
||
|
|
|
||
|
|
/*5个div下面的内容*/
|
||
|
|
.direct-chat-messages {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.row {
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-md-3 {
|
||
|
|
height: 100%;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-md-4 {
|
||
|
|
height: 100%;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-md-5 {
|
||
|
|
height: 100%;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-md-6 {
|
||
|
|
height: 100%;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-md-7 {
|
||
|
|
height: 100%;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-md-8 {
|
||
|
|
height: 100%;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.col-md-9 {
|
||
|
|
height: 100%;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
/*
|
||
|
|
根据不同分辨率显示不同px的文字大小
|
||
|
|
*/
|
||
|
|
@media (min-width: 400px) and (min-height: 300px) {
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (min-width: 768px) and (min-height: 432px) {
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (min-width: 992px) and (min-height: 558px) {
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (min-width: 1200px) and (min-height: 675px) {
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (min-width: 1400px) and (min-height: 875px) {
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (min-width: 1600px) and (min-height: 1075px) {
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
background-color: #FFFFFF;
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<script type="text/javascript">
|
||
|
|
var showview = 0;
|
||
|
|
|
||
|
|
window.onresize = function () {
|
||
|
|
allfun();
|
||
|
|
}
|
||
|
|
|
||
|
|
var color_blueSystem = ['#0C4F9D', '#0089F2', '#0063FE', '#95DEFF', '#CBEFFF', '#BBDEFF'];
|
||
|
|
var color_bars = ['#D4D4D4', '#00A5FF', '#CB70EC'];
|
||
|
|
|
||
|
|
/*
|
||
|
|
根据月查询
|
||
|
|
*/
|
||
|
|
function domonth() {
|
||
|
|
$("#yeartimeId").val('');//点月的时候把年的值置为空
|
||
|
|
|
||
|
|
$("#monthButtonId").css({//高亮月 去除年高亮色
|
||
|
|
"background-color": "#238AE5"
|
||
|
|
});
|
||
|
|
$("#yearButtonId").css({
|
||
|
|
"background-color": "#FFFFFF"
|
||
|
|
});
|
||
|
|
$("#yearDiv").attr("style", "width:200px;height:100%;float:left;margin:11px 0px 11px 0px;display:none;");//隐藏div
|
||
|
|
$("#monthDiv").attr("style", "width:200px;height:100%;float:left;margin:11px 0px 11px 0px;display:block;");//显示div
|
||
|
|
|
||
|
|
$("#dateType").val('0');//dateType为日期类型 0为查看月 1为查看年
|
||
|
|
}
|
||
|
|
|
||
|
|
/*
|
||
|
|
根据年查询
|
||
|
|
*/
|
||
|
|
function doyear() {
|
||
|
|
$("#monthtimeId").val('');//点年的时候把月的值置为空
|
||
|
|
|
||
|
|
$("#yearButtonId").css({//高亮年 去除月高亮色
|
||
|
|
"background-color": "#238AE5"
|
||
|
|
});
|
||
|
|
$("#monthButtonId").css({
|
||
|
|
"background-color": "#FFFFFF"
|
||
|
|
});
|
||
|
|
$("#monthDiv").attr("style", "width:200px;height:100%;float:left;margin:11px 0px 11px 0px;display:none;");//隐藏div
|
||
|
|
$("#yearDiv").attr("style", "width:200px;height:100%;float:left;margin:11px 0px 11px 0px;display:block;");//显示div
|
||
|
|
|
||
|
|
$("#dateType").val('1');//dateType为日期类型 0为查看月 1为查看年
|
||
|
|
}
|
||
|
|
|
||
|
|
/*
|
||
|
|
显示默认的时间
|
||
|
|
*/
|
||
|
|
function chaDate(ev) {
|
||
|
|
var dateType = $('#dateType').val();//dateType为日期类型 0为查看月 1为查看年
|
||
|
|
var datestr = '';
|
||
|
|
if (dateType == '1') {
|
||
|
|
datestr = $('#yeartimeId').val();
|
||
|
|
} else {
|
||
|
|
datestr = $('#monthtimeId').val();
|
||
|
|
}
|
||
|
|
$("#selectDate").val(datestr);//selectDate为查询时间
|
||
|
|
|
||
|
|
allfun();//加载所有方法
|
||
|
|
}
|
||
|
|
|
||
|
|
//左上
|
||
|
|
function chart1(bizid, dateType, selectDate) {
|
||
|
|
//初始化echarts实例
|
||
|
|
var myChart = echarts.init(document.getElementById('chart1'));
|
||
|
|
$.ajax({
|
||
|
|
type: 'GET',
|
||
|
|
url: ext.contextPath + '/hqconfig/hqAlarmRecord/getAlarmRecordLevelType.do?&&math=' + Math.random() + '&unitId=' + bizid + '&dateType=' + dateType + '&patrolDate=' + selectDate,
|
||
|
|
async: true,
|
||
|
|
globle: false,
|
||
|
|
error: function () {
|
||
|
|
return false;
|
||
|
|
},
|
||
|
|
success: function (data) {
|
||
|
|
var data = eval('(' + data + ')');
|
||
|
|
var xdata = new Array();//X轴数据 [0,1,2,3,4,5]
|
||
|
|
var ydata_a = new Array();//Y轴数据 [0,1,2,3,4,5]
|
||
|
|
var ydata_b = new Array();//Y轴数据 [0,1,2,3,4,5]
|
||
|
|
var ydata_c = new Array();//Y轴数据 [0,1,2,3,4,5]
|
||
|
|
var ydata_d = new Array();//Y轴数据 [0,1,2,3,4,5]
|
||
|
|
var ydata_all = new Array();//Y轴数据 [0,1,2,3,4,5]
|
||
|
|
|
||
|
|
var jsonObject_a = data.result.jsonObject_a;//总数
|
||
|
|
var jsonObject_b = data.result.jsonObject_b;//总数
|
||
|
|
var jsonObject_c = data.result.jsonObject_c;//总数
|
||
|
|
var jsonObject_d = data.result.jsonObject_d;//总数
|
||
|
|
var jsonObject_all = data.result.jsonObject_all;//总数
|
||
|
|
|
||
|
|
// console.log(jsonObject_all);
|
||
|
|
|
||
|
|
for (var i in jsonObject_all) {
|
||
|
|
xdata.push(i);
|
||
|
|
}
|
||
|
|
for (var i in jsonObject_a) {
|
||
|
|
ydata_a.push(jsonObject_a[i]);
|
||
|
|
}
|
||
|
|
for (var i in jsonObject_b) {
|
||
|
|
ydata_b.push(jsonObject_b[i]);
|
||
|
|
}
|
||
|
|
for (var i in jsonObject_c) {
|
||
|
|
ydata_c.push(jsonObject_c[i]);
|
||
|
|
}
|
||
|
|
for (var i in jsonObject_d) {
|
||
|
|
ydata_d.push(jsonObject_d[i]);
|
||
|
|
}
|
||
|
|
for (var i in jsonObject_all) {
|
||
|
|
ydata_all.push(jsonObject_all[i]);
|
||
|
|
}
|
||
|
|
|
||
|
|
var option = {
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'axis',
|
||
|
|
axisPointer: {
|
||
|
|
type: 'cross',
|
||
|
|
crossStyle: {
|
||
|
|
color: '#999'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
textStyle: {
|
||
|
|
align: 'left'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
/*toolbox: {
|
||
|
|
feature: {
|
||
|
|
dataView: { show: true, readOnly: false },
|
||
|
|
magicType: { show: true, type: ['line', 'bar'] },
|
||
|
|
restore: { show: true },
|
||
|
|
saveAsImage: { show: true }
|
||
|
|
}
|
||
|
|
},*/
|
||
|
|
legend: {
|
||
|
|
data: ['A', 'B', 'C', 'D', '总计'],
|
||
|
|
bottom: 0,//缩放条显示在底部
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
left: '1%',
|
||
|
|
right: '4%',
|
||
|
|
bottom: '30',
|
||
|
|
top: '30',
|
||
|
|
containLabel: true
|
||
|
|
},
|
||
|
|
xAxis: [
|
||
|
|
{
|
||
|
|
type: 'category',
|
||
|
|
data: xdata,
|
||
|
|
axisPointer: {
|
||
|
|
type: 'shadow'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
],
|
||
|
|
yAxis: [
|
||
|
|
{
|
||
|
|
type: 'value',
|
||
|
|
name: '',
|
||
|
|
// min: 0,
|
||
|
|
// max: 250,
|
||
|
|
// interval: 1,
|
||
|
|
axisLabel: {
|
||
|
|
formatter: '{value}'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/*{
|
||
|
|
type: 'value',
|
||
|
|
name: '',
|
||
|
|
// min: 0,
|
||
|
|
// max: 25,
|
||
|
|
// interval: 1,
|
||
|
|
splitLine: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
formatter: '{value}'
|
||
|
|
}
|
||
|
|
}*/
|
||
|
|
],
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: 'A',
|
||
|
|
type: 'bar',
|
||
|
|
stack: 'total',
|
||
|
|
tooltip: {
|
||
|
|
valueFormatter: function (value) {
|
||
|
|
return value + ' 左边';
|
||
|
|
}
|
||
|
|
},
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: '#FF0000',//#FFC000
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data: ydata_a
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'B',
|
||
|
|
type: 'bar',
|
||
|
|
stack: 'total',
|
||
|
|
tooltip: {
|
||
|
|
valueFormatter: function (value) {
|
||
|
|
return value + ' 左边';
|
||
|
|
}
|
||
|
|
},
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: '#FFC000',//##FFFF00
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data: ydata_b
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'C',
|
||
|
|
type: 'bar',
|
||
|
|
stack: 'total',
|
||
|
|
tooltip: {
|
||
|
|
valueFormatter: function (value) {
|
||
|
|
return value + ' 左边';
|
||
|
|
}
|
||
|
|
},
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: '#FFFF00',//##FFFF00
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data: ydata_c
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'D',
|
||
|
|
type: 'bar',
|
||
|
|
stack: 'total',
|
||
|
|
tooltip: {
|
||
|
|
valueFormatter: function (value) {
|
||
|
|
return value + ' 左边';
|
||
|
|
}
|
||
|
|
},
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: '#00B0F0',//#5AD8A6
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data: ydata_d
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '总计',
|
||
|
|
type: 'line',
|
||
|
|
// yAxisIndex: 1,
|
||
|
|
tooltip: {
|
||
|
|
valueFormatter: function (value) {
|
||
|
|
return value + ' 右边';
|
||
|
|
}
|
||
|
|
},
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: '#5AD8A6',//#5AD8A6
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data: ydata_all
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
// myChart = echarts.init(document.getElementById('chart1'));
|
||
|
|
myChart.setOption(option, true);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
//右上
|
||
|
|
function chart2(bizid, dateType, selectDate) {
|
||
|
|
//初始化echarts实例
|
||
|
|
var myChart = echarts.init(document.getElementById('chart2'));
|
||
|
|
$.ajax({
|
||
|
|
type: 'GET',
|
||
|
|
url: ext.contextPath + '/hqconfig/hqAlarmRecord/getAlarmRecordPie.do?&&math=' + Math.random() + '&unitId=' + bizid + '&dateType=' + dateType + '&patrolDate=' + selectDate,
|
||
|
|
async: true,
|
||
|
|
globle: false,
|
||
|
|
error: function () {
|
||
|
|
return false;
|
||
|
|
},
|
||
|
|
success: function (data) {
|
||
|
|
var datastr = eval('(' + data + ')');
|
||
|
|
// var xdata = new Array();//X轴数据 [0,1,2,3,4,5]
|
||
|
|
|
||
|
|
var option = {
|
||
|
|
title: {
|
||
|
|
text: '',
|
||
|
|
subtext: '',
|
||
|
|
left: 'center'
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'item'
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
// x: 'left'
|
||
|
|
// left: '-20',
|
||
|
|
// right: '30%',
|
||
|
|
// bottom: '30',
|
||
|
|
// top: '30'
|
||
|
|
// containLabel: true
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
icon: 'circle',
|
||
|
|
orient: 'vertical',
|
||
|
|
right: '10%',
|
||
|
|
top: '36%',
|
||
|
|
fontSize: 16,
|
||
|
|
formatter: function (name) {
|
||
|
|
var num = 0;
|
||
|
|
if (name == 'A') {
|
||
|
|
num = datastr.result.jsonObject_a.size
|
||
|
|
}
|
||
|
|
if (name == 'B') {
|
||
|
|
num = datastr.result.jsonObject_b.size
|
||
|
|
}
|
||
|
|
if (name == 'C') {
|
||
|
|
num = datastr.result.jsonObject_c.size
|
||
|
|
}
|
||
|
|
if (name == 'D') {
|
||
|
|
num = datastr.result.jsonObject_d.size
|
||
|
|
}
|
||
|
|
var arr = [name + '级风险 ', " " + num]
|
||
|
|
return arr.join(" ")
|
||
|
|
}
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: 'Access From',
|
||
|
|
type: 'pie',
|
||
|
|
radius: '50%',
|
||
|
|
label: {
|
||
|
|
normal: {
|
||
|
|
formatter: '{b}: ({d}%)',
|
||
|
|
textStyle: {
|
||
|
|
fontWeight: 'normal',
|
||
|
|
fontSize: 12
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
center: ['37%', '50%'],
|
||
|
|
data: [
|
||
|
|
{value: datastr.result.jsonObject_a.size, name: 'A'},
|
||
|
|
{value: datastr.result.jsonObject_b.size, name: 'B'},
|
||
|
|
{value: datastr.result.jsonObject_c.size, name: 'C'},
|
||
|
|
{value: datastr.result.jsonObject_d.size, name: 'D'}
|
||
|
|
],
|
||
|
|
emphasis: {
|
||
|
|
itemStyle: {
|
||
|
|
shadowBlur: 10,
|
||
|
|
shadowOffsetX: 0,
|
||
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
myChart.setOption(option, true);
|
||
|
|
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
//左上
|
||
|
|
function chart3(bizid, dateType, selectDate) {
|
||
|
|
//初始化echarts实例
|
||
|
|
var myChart = echarts.init(document.getElementById('chart3'));
|
||
|
|
$.ajax({
|
||
|
|
type: 'GET',
|
||
|
|
url: ext.contextPath + '/hqconfig/hqAlarmRecord/getAlarmRecordAreaType.do?&&math=' + Math.random() + '&unitId=' + bizid + '&dateType=' + dateType + '&patrolDate=' + selectDate,
|
||
|
|
async: true,
|
||
|
|
globle: false,
|
||
|
|
error: function () {
|
||
|
|
return false;
|
||
|
|
},
|
||
|
|
success: function (data) {
|
||
|
|
var data = eval('(' + data + ')');
|
||
|
|
// var xdata = new Array();//X轴数据 [0,1,2,3,4,5]
|
||
|
|
// var ydata = new Array();//Y轴数据 [0,1,2,3,4,5]
|
||
|
|
|
||
|
|
var l_data = new Array();//X轴数据 [0,1,2,3,4,5]
|
||
|
|
|
||
|
|
for (var i in data.result) {
|
||
|
|
l_data.push(data.result[i].name);
|
||
|
|
}
|
||
|
|
|
||
|
|
var option = {
|
||
|
|
color: ['#5B8FF9', '#5D7092', '#6F5EF9', '#945FB9'],
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'axis',
|
||
|
|
axisPointer: {
|
||
|
|
type: 'shadow'
|
||
|
|
},
|
||
|
|
textStyle: {
|
||
|
|
align: 'left'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
left: '1%',
|
||
|
|
right: '4%',
|
||
|
|
bottom: '30',
|
||
|
|
top: '30',
|
||
|
|
containLabel: true
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
data: l_data,
|
||
|
|
bottom: 0,//缩放条显示在底部
|
||
|
|
},
|
||
|
|
toolbox: {
|
||
|
|
show: true,
|
||
|
|
orient: 'vertical',
|
||
|
|
left: 'right',
|
||
|
|
top: 'center'
|
||
|
|
},
|
||
|
|
xAxis: [
|
||
|
|
{
|
||
|
|
type: 'category',
|
||
|
|
axisTick: {show: false},
|
||
|
|
// data: ['2012', '2013', '2014', '2015', '2016']
|
||
|
|
}
|
||
|
|
],
|
||
|
|
yAxis: [
|
||
|
|
{
|
||
|
|
type: 'value'
|
||
|
|
}
|
||
|
|
],
|
||
|
|
series: data.result
|
||
|
|
};
|
||
|
|
// myChart = echarts.init(document.getElementById('chart1'));
|
||
|
|
myChart.setOption(option, true);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
//右上
|
||
|
|
function chart4(bizid, dateType, selectDate) {
|
||
|
|
//初始化echarts实例
|
||
|
|
var myChart = echarts.init(document.getElementById('chart4'));
|
||
|
|
$.ajax({
|
||
|
|
type: 'GET',
|
||
|
|
url: ext.contextPath + '/hqconfig/hqAlarmRecord/getAlarmRecordAreaTypePie.do?&&math=' + Math.random() + '&unitId=' + bizid + '&dateType=' + dateType + '&patrolDate=' + selectDate,
|
||
|
|
async: true,
|
||
|
|
globle: false,
|
||
|
|
error: function () {
|
||
|
|
return false;
|
||
|
|
},
|
||
|
|
success: function (data) {
|
||
|
|
var datastr = eval('(' + data + ')');
|
||
|
|
|
||
|
|
var option = {
|
||
|
|
title: {
|
||
|
|
text: '',
|
||
|
|
subtext: '',
|
||
|
|
left: 'center'
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'item'
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
// x: 'right',
|
||
|
|
// left: '-20',
|
||
|
|
// right: '0',
|
||
|
|
// bottom: '30',
|
||
|
|
// top: '30'
|
||
|
|
// containLabel: true
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
icon: 'circle',
|
||
|
|
orient: 'right',
|
||
|
|
right: '7%',
|
||
|
|
top: '40%',
|
||
|
|
fontSize: 16,
|
||
|
|
textStyle: {
|
||
|
|
name: {//legend左边的文字:第一针、第二针...
|
||
|
|
fontSize: 10,
|
||
|
|
padding: [3, 100, 0, 0]//1.左边的文字添加右边距10(可自己调整)
|
||
|
|
},
|
||
|
|
value: {//legend右边的值:10.09%、59.62%...
|
||
|
|
fontSize:12,
|
||
|
|
color: "#182F41",
|
||
|
|
backgroundColor: "transparent",//2.右边的值添加背景色
|
||
|
|
align: "right",//3.右对齐
|
||
|
|
padding: [5, 0, 0, 0],//4.设置右边距为-100(-70/-80..可自己调整)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
formatter: function (name) {
|
||
|
|
var num = 0;
|
||
|
|
var array = datastr.result;//总数
|
||
|
|
for (var i in array) {
|
||
|
|
if (array[i].name == name) {
|
||
|
|
num = array[i].value;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
var arr = [name, " " + num]
|
||
|
|
return arr.join(" ")
|
||
|
|
}
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: 'Access From',
|
||
|
|
type: 'pie',
|
||
|
|
radius: '50%',
|
||
|
|
label: {
|
||
|
|
normal: {
|
||
|
|
formatter: '{b}: ({d}%)',
|
||
|
|
textStyle: {
|
||
|
|
fontWeight: 'normal',
|
||
|
|
fontSize: 12
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
center: ['37%', '50%'],
|
||
|
|
data: datastr.result,
|
||
|
|
emphasis: {
|
||
|
|
itemStyle: {
|
||
|
|
shadowBlur: 10,
|
||
|
|
shadowOffsetX: 0,
|
||
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
myChart.setOption(option, true);
|
||
|
|
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function selectBz(type) {
|
||
|
|
//给div赋值高度
|
||
|
|
var heightstr = $(window).height();
|
||
|
|
$("#divbottom").height(heightstr - 50);//20只是为了避免滚动条 无其他意义
|
||
|
|
|
||
|
|
var dateType = $('#dateType').val();//查询类型 0:月 1:年
|
||
|
|
var selectDate = $('#selectDate').val();//查询的日期
|
||
|
|
var bizid = unitId;
|
||
|
|
|
||
|
|
|
||
|
|
if (dateType == 1) {
|
||
|
|
dateType = 'year';
|
||
|
|
selectDate = selectDate + '-01-01';
|
||
|
|
}
|
||
|
|
if (dateType == 0) {
|
||
|
|
dateType = 'month';
|
||
|
|
selectDate = selectDate + '-01';
|
||
|
|
}
|
||
|
|
|
||
|
|
if (type == 'P') {
|
||
|
|
document.getElementById('button1').className = 'btn btn-primary btn-sm';
|
||
|
|
document.getElementById('button2').className = 'btn btn-default btn-sm';
|
||
|
|
}
|
||
|
|
if (type == 'E') {
|
||
|
|
document.getElementById('button1').className = 'btn btn-default btn-sm';
|
||
|
|
document.getElementById('button2').className = 'btn btn-primary btn-sm';
|
||
|
|
}
|
||
|
|
|
||
|
|
bzchart2(bizid, dateType, selectDate, type);
|
||
|
|
}
|
||
|
|
|
||
|
|
/*
|
||
|
|
预加载
|
||
|
|
*/
|
||
|
|
function initMenu() {
|
||
|
|
|
||
|
|
//根据分辨率自适应
|
||
|
|
var wid = $(window).width();
|
||
|
|
var hei = $(window).height();
|
||
|
|
$('#divbottom').height(hei - 50);//顶部工具栏固定30px 其余为下面div高度
|
||
|
|
|
||
|
|
//box box-primary
|
||
|
|
$('.box-body').height((hei / 2) - 110);
|
||
|
|
|
||
|
|
$('#monthtimeId').datepicker({
|
||
|
|
format: 'yyyy-mm',
|
||
|
|
weekStart: 1,
|
||
|
|
autoclose: true,
|
||
|
|
startView: 2,
|
||
|
|
minViewMode: 1,
|
||
|
|
maxViewMode: 2,
|
||
|
|
forceParse: false,
|
||
|
|
language: 'zh-CN'
|
||
|
|
}).on('changeDate', chaDate);
|
||
|
|
|
||
|
|
$('#yeartimeId').datepicker({
|
||
|
|
format: 'yyyy',
|
||
|
|
weekStart: 1,
|
||
|
|
autoclose: true,
|
||
|
|
startView: 2,
|
||
|
|
minViewMode: 2,
|
||
|
|
maxViewMode: 2,
|
||
|
|
forceParse: false,
|
||
|
|
language: 'zh-CN'
|
||
|
|
}).on('changeDate', chaDate);
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
/*
|
||
|
|
加载所有方法
|
||
|
|
*/
|
||
|
|
function allfun() {
|
||
|
|
//给div赋值高度
|
||
|
|
var heightstr = $(window).height();
|
||
|
|
$("#divbottom").height(heightstr - 50);//20只是为了避免滚动条 无其他意义
|
||
|
|
|
||
|
|
var dateType = $('#dateType').val();//查询类型 0:月 1:年
|
||
|
|
var selectDate = $('#selectDate').val();//查询的日期
|
||
|
|
var bizid = unitId;
|
||
|
|
|
||
|
|
if (dateType == 1) {
|
||
|
|
dateType = 'year';
|
||
|
|
selectDate = selectDate + '-01-01';
|
||
|
|
showview = 0;
|
||
|
|
}
|
||
|
|
if (dateType == 0) {
|
||
|
|
dateType = 'month';
|
||
|
|
selectDate = selectDate + '-01';
|
||
|
|
showview = 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
chart1(bizid, dateType, selectDate);
|
||
|
|
chart2(bizid, dateType, selectDate);
|
||
|
|
chart3(bizid, dateType, selectDate);
|
||
|
|
chart4(bizid, dateType, selectDate);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body onload="initMenu();allfun();" style="background-color: #ECF0F5;">
|
||
|
|
<input type="hidden" name="dateType" id="dateType" value="0">
|
||
|
|
<input type="hidden" name="selectDate" id="selectDate" value="${datestr}">
|
||
|
|
<div id="mainAlertdiv"></div>
|
||
|
|
<div id="subDiv"></div>
|
||
|
|
<div id="subDiv_recordDetail"></div>
|
||
|
|
|
||
|
|
<div id="divtop" style="background-color:#ECF0F5;">
|
||
|
|
<div style="width:1%;height:100%;float:left;"></div>
|
||
|
|
<div style="width:200px;height:100%;float:left;margin:5px 0px;display:none;" id="yearDiv">
|
||
|
|
<div class="input-group">
|
||
|
|
<input class="form-control date-picker" id="yeartimeId" name="yeartimeId" autocomplete="off" type="text"
|
||
|
|
placeholder="点击选择" style="background-color:#FFFFFF;height:100%;" value=""/>
|
||
|
|
<span class="input-group-addon">
|
||
|
|
<i class="fa fa-calendar bigger-110"></i>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div style="width:200px;height:100%;float:left;margin:11px 0px 11px 0px;" id="monthDiv">
|
||
|
|
<div class="input-group">
|
||
|
|
<input class="form-control date-picker" id="monthtimeId" autocomplete="off" type="text"
|
||
|
|
placeholder="点击选择" style="background-color:#FFFFFF;height:100%;" value="${datestr}"/>
|
||
|
|
<span class="input-group-addon">
|
||
|
|
<i class="fa fa-calendar bigger-110"></i>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div style="width:1%;height:100%;float:left;"></div>
|
||
|
|
<div style="width:100px;height:100%;float:left;margin:10px 5px 10px 0px">
|
||
|
|
<div class="btn-group" role="group" aria-label="...">
|
||
|
|
<button id="yearButtonId" type="button" class="btn btn-default"
|
||
|
|
style="height:100%;background-color:#D4D4D4;"
|
||
|
|
onclick="doyear();">
|
||
|
|
年
|
||
|
|
</button>
|
||
|
|
<button id="monthButtonId" type="button" class="btn btn-default"
|
||
|
|
style="height:100%;background-color:#238AE5;"
|
||
|
|
onclick="domonth();">
|
||
|
|
月
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div style="width:100%;" id="divbottom">
|
||
|
|
<!--上面div-->
|
||
|
|
<div id="div_top" class="row">
|
||
|
|
<div class="col-md-12">
|
||
|
|
<div class="box box-primary">
|
||
|
|
<div class="box-header with-border">
|
||
|
|
<h3 class="box-title">风险等级统计</h3>
|
||
|
|
</div>
|
||
|
|
<div class="box-body">
|
||
|
|
<div class="direct-chat-messages">
|
||
|
|
<div style="width:100%;height:100%;">
|
||
|
|
<div class="col-md-8">
|
||
|
|
<div id="chart1" style="width:100%; height: 100%;"></div>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-4">
|
||
|
|
<div id="chart2" style="width:100%; height: 100%;"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!--下面div-->
|
||
|
|
<div id="div_below">
|
||
|
|
<div class="col-md-12">
|
||
|
|
<div class="box box-primary">
|
||
|
|
<div class="box-header with-border">
|
||
|
|
<h3 class="box-title">风险区域统计</h3>
|
||
|
|
</div>
|
||
|
|
<div class="box-body">
|
||
|
|
<div class="direct-chat-messages">
|
||
|
|
<div style="width:100%;height:100%;">
|
||
|
|
<div class="col-md-8">
|
||
|
|
<div id="chart3" style="width:100%; height: 100%;"></div>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-4">
|
||
|
|
<div id="chart4" style="width:100%; height: 100%;"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|