first commit
This commit is contained in:
861
WebRoot/jsp/hqconfig/hqAlarmRecordOverview.jsp
Normal file
861
WebRoot/jsp/hqconfig/hqAlarmRecordOverview.jsp
Normal file
@ -0,0 +1,861 @@
|
||||
<%@ 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>
|
||||
Reference in New Issue
Block a user