1012 lines
33 KiB
Plaintext
1012 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 style="height:100%">
|
|||
|
|
<!-- <html lang="zh-CN"> -->
|
|||
|
|
<!-- BEGIN HEAD -->
|
|||
|
|
<head>
|
|||
|
|
<title>
|
|||
|
|
<%= ServerObject.atttable.get("TOPTITLE")%>
|
|||
|
|
</title>
|
|||
|
|
|
|||
|
|
<style type="text/css">
|
|||
|
|
.content1top {
|
|||
|
|
width: 9%;
|
|||
|
|
height: 100%;
|
|||
|
|
float: left;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content1bottom {
|
|||
|
|
width: 9%;
|
|||
|
|
height: 100%;
|
|||
|
|
float: left;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content1bottomleft {
|
|||
|
|
width: auto;
|
|||
|
|
height: 100%;
|
|||
|
|
float: left;
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin-left: 10%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content1bottomleftcolor {
|
|||
|
|
width: auto;
|
|||
|
|
height: 100%;
|
|||
|
|
float: left;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #00C9FF;
|
|||
|
|
margin-left: 10%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content1bottomright {
|
|||
|
|
width: auto;
|
|||
|
|
height: 100%;
|
|||
|
|
float: left;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.thstyle {
|
|||
|
|
text-align: center;
|
|||
|
|
/** 设置水平方向居中 */
|
|||
|
|
vertical-align: middle;
|
|||
|
|
/** 设置垂直方向居中 */
|
|||
|
|
width: 5%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.redbubble {
|
|||
|
|
position: absolute;
|
|||
|
|
width: 10px;
|
|||
|
|
height: 10px;
|
|||
|
|
background-color: red;
|
|||
|
|
|
|||
|
|
border-radius: 50%;
|
|||
|
|
-moz-border-radius: 50%;
|
|||
|
|
-webkit-border-radius: 50%;
|
|||
|
|
z-index: 9999;
|
|||
|
|
display: none;
|
|||
|
|
text-align: center;
|
|||
|
|
color: rgb(0, 0, 0);
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.greenbubble {
|
|||
|
|
position: absolute;
|
|||
|
|
width: 10px;
|
|||
|
|
height: 10px;
|
|||
|
|
background-color: green;
|
|||
|
|
|
|||
|
|
border-radius: 50%;
|
|||
|
|
-moz-border-radius: 50%;
|
|||
|
|
-webkit-border-radius: 50%;
|
|||
|
|
z-index: 9999;
|
|||
|
|
display: none;
|
|||
|
|
text-align: center;
|
|||
|
|
color: rgb(0, 0, 0);
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.yellowbubble {
|
|||
|
|
position: absolute;
|
|||
|
|
width: 10px;
|
|||
|
|
height: 10px;
|
|||
|
|
background-color: yellow;
|
|||
|
|
|
|||
|
|
border-radius: 50%;
|
|||
|
|
-moz-border-radius: 50%;
|
|||
|
|
-webkit-border-radius: 50%;
|
|||
|
|
z-index: 9999;
|
|||
|
|
display: none;
|
|||
|
|
text-align: center;
|
|||
|
|
color: rgb(0, 0, 0);
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
</style>
|
|||
|
|
<!-- 引用页头及CSS页-->
|
|||
|
|
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
|||
|
|
<!-- 文件上传-->
|
|||
|
|
<link rel="stylesheet" href="<%=request.getContextPath()%>/node_modules/bootstrap-fileinput/css/fileinput.min.css" />
|
|||
|
|
<script type="text/javascript" src="<%=request.getContextPath()%>/node_modules/bootstrap-fileinput/js/fileinput.min.js"
|
|||
|
|
charset="utf-8"></script>
|
|||
|
|
<script type="text/javascript" src="<%=request.getContextPath()%>/node_modules/bootstrap-fileinput/js/locales/zh.js"
|
|||
|
|
charset="utf-8"></script>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
|
|||
|
|
window.onresize = function () {
|
|||
|
|
allfun();
|
|||
|
|
}
|
|||
|
|
/*
|
|||
|
|
根据月查询
|
|||
|
|
*/
|
|||
|
|
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为查看年
|
|||
|
|
}
|
|||
|
|
/*
|
|||
|
|
根据月查询 yearRangeinputDate1 monthRangeinputDate1
|
|||
|
|
*/
|
|||
|
|
function domonthRange() {
|
|||
|
|
$("#yearRangeinputDate1").val('');//点月的时候把年的值置为空
|
|||
|
|
$("#yearRangeinputDate2").val('');//点月的时候把年的值置为空
|
|||
|
|
|
|||
|
|
$("#monthButtonId").css({//高亮月 去除年高亮色
|
|||
|
|
"background-color": "#238AE5"
|
|||
|
|
});
|
|||
|
|
$("#yearButtonId").css({
|
|||
|
|
"background-color": "#FFFFFF"
|
|||
|
|
});
|
|||
|
|
$("#yearRangeDiv").attr("style", "display:none;");//隐藏div
|
|||
|
|
$("#monthRangeDiv").attr("style", "display:block;");//显示div
|
|||
|
|
|
|||
|
|
// $("#yearRangeDiv").attr("style", "width:300px;height:100%;float:left;margin:11px 0px 11px 0px;display:none;");//隐藏div
|
|||
|
|
// $("#monthRangeDiv").attr("style", "width:300px;height:100%;float:left;margin:11px 0px 11px 0px;display:block;");//显示div
|
|||
|
|
|
|||
|
|
$("#dateType").val('0');//dateType为日期类型 0为查看月 1为查看年
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*
|
|||
|
|
根据年查询
|
|||
|
|
*/
|
|||
|
|
function doyearRange() {
|
|||
|
|
$("#monthRangeinputDate1").val('');//点年的时候把月的值置为空
|
|||
|
|
$("#monthRangeinputDate2").val('');//点年的时候把月的值置为空
|
|||
|
|
|
|||
|
|
$("#yearButtonId").css({//高亮年 去除月高亮色
|
|||
|
|
"background-color": "#238AE5"
|
|||
|
|
});
|
|||
|
|
$("#monthButtonId").css({
|
|||
|
|
"background-color": "#FFFFFF"
|
|||
|
|
});
|
|||
|
|
$("#yearRangeDiv").attr("style", "display:block;");//显示div
|
|||
|
|
$("#monthRangeDiv").attr("style", "display:none;");//隐藏div
|
|||
|
|
|
|||
|
|
// $("#monthRangeDiv").attr("style", "width:300px;height:100%;float:left;margin:11px 0px 11px 0px;display:none;");//隐藏div
|
|||
|
|
// $("#yearRangeDiv").attr("style", "width:300px;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();
|
|||
|
|
datestr1 = $('#yearRangeinputDate1').val();
|
|||
|
|
datestr2 = $('#yearRangeinputDate2').val();
|
|||
|
|
console.log("yearRangeinputDate1 datestr1 " + datestr1);
|
|||
|
|
console.log("yearRangeinputDate2 datestr2 " + datestr2);
|
|||
|
|
} else {
|
|||
|
|
datestr = $('#monthtimeId').val();
|
|||
|
|
datestr1 = $('#monthRangeinputDate1').val();
|
|||
|
|
datestr2 = $('#monthRangeinputDate2').val();
|
|||
|
|
console.log("monthRangeinputDate1 datestr1 " + datestr1);
|
|||
|
|
console.log("monthRangeinputDate2 datestr2 " + datestr2);
|
|||
|
|
}
|
|||
|
|
$("#selectDate").val(datestr);//selectDate为查询时间
|
|||
|
|
$("#selectDateStart").val(datestr1);
|
|||
|
|
$("#selectDateEnd").val(datestr2);
|
|||
|
|
|
|||
|
|
|
|||
|
|
allfun();//加载所有方法
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function dateRange() {
|
|||
|
|
var ops = {
|
|||
|
|
language: 'zh-CN', //语言
|
|||
|
|
autoclose: true, //选择后自动关闭
|
|||
|
|
clearBtn: true,//清除按钮
|
|||
|
|
format: "yyyy",//日期格式 yyyy-mm-dd
|
|||
|
|
// startDate: "2020-06-10", //开始时间，在这时间之前都不可选
|
|||
|
|
weekStart: 1, //
|
|||
|
|
startView: 2, //2是从年开始 1是月 0是日 3是近10年 4是近100年
|
|||
|
|
minViewMode: 2, // 最小的是年
|
|||
|
|
maxViewMode: 2, // 最大的也是年
|
|||
|
|
forceParse: false,
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
$("#yearRangeinputDate1").datepicker(ops).on('changeDate', chaDate);
|
|||
|
|
$("#yearRangeinputDate2").datepicker(ops).on('changeDate', chaDate);
|
|||
|
|
|
|||
|
|
//第一个输入选中日期后设置第二个输入框的开始日期 —— 就是 第二个的开始日期不能早于第一个的日期了 很合理啊！
|
|||
|
|
$("#yearRangeinputDate1").datepicker().on("changeDate", function (e) {
|
|||
|
|
$("#yearRangeinputDate2").datepicker('setStartDate', e.date);
|
|||
|
|
});
|
|||
|
|
//第二个输入选中日期后设置第一个输入框的结束日期 —— 就是 第一个的结束日期不能晚于第二个的日期了 很合理啊！
|
|||
|
|
$("#yearRangeinputDate2").datepicker().on("changeDate", function (e) {
|
|||
|
|
$("#yearRangeinputDate1").datepicker('setEndDate', e.date);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
var ops2 = {
|
|||
|
|
language: 'zh-CN', //语言
|
|||
|
|
autoclose: true, //选择后自动关闭
|
|||
|
|
clearBtn: true,//清除按钮
|
|||
|
|
format: "yyyy-mm",//日期格式 yyyy-mm-dd
|
|||
|
|
// startDate: "2020-06-10", //开始时间，在这时间之前都不可选
|
|||
|
|
weekStart: 1, // 1是周一，0是周日，6是周六
|
|||
|
|
startView: 2, //2是从年开始 1是月 0是日 3是近10年 4是近100年
|
|||
|
|
minViewMode: 1, // 最小的是月
|
|||
|
|
maxViewMode: 2, // 最大的是年
|
|||
|
|
forceParse: false,
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
$("#monthRangeinputDate1").datepicker(ops2).on('changeDate', chaDate);
|
|||
|
|
$("#monthRangeinputDate2").datepicker(ops2).on('changeDate', chaDate);
|
|||
|
|
|
|||
|
|
//第一个输入选中日期后设置第二给输入框的开始日期
|
|||
|
|
$("#monthRangeinputDate1").datepicker().on("changeDate", function (e) {
|
|||
|
|
$("#monthRangeinputDate2").datepicker('setStartDate', e.date);
|
|||
|
|
});
|
|||
|
|
$("#monthRangeinputDate2").datepicker().on("changeDate", function (e) {
|
|||
|
|
$("#monthRangeinputDate1").datepicker('setEndDate', e.date);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function initMenu() {
|
|||
|
|
|
|||
|
|
//根据分辨率自适应
|
|||
|
|
var wid = $(window).width();
|
|||
|
|
var hei = $(window).height();
|
|||
|
|
$('#divbottom').height(hei - 50);//顶部工具栏固定30px 其余为下面div高度
|
|||
|
|
|
|||
|
|
|
|||
|
|
$('#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 chart1(dateType, selectDate1, selectDate2) {
|
|||
|
|
//初始化echarts实例 getPatrolRecordNum
|
|||
|
|
var myChart = echarts.init(document.getElementById('chart1'));
|
|||
|
|
$.ajax({
|
|||
|
|
type: 'GET',
|
|||
|
|
url: ext.contextPath + '/hqconfig/hqAlarmAna/selectABCDListByDate.do?&&math='
|
|||
|
|
+ Math.random()
|
|||
|
|
+ '&dateType=' + dateType
|
|||
|
|
+ '&patrolDateStart=' + selectDate1
|
|||
|
|
+ '&patrolDateEnd=' + selectDate2, //////////////////////// 逗号一定别忘了 ///////////////////////////////////
|
|||
|
|
// + '&patrolDate=' + selectDate, // + '&unitId=' + bizid
|
|||
|
|
async: true,
|
|||
|
|
globle: false,
|
|||
|
|
error: function () {
|
|||
|
|
console.log(" 没有 找到 ");
|
|||
|
|
return false;
|
|||
|
|
},
|
|||
|
|
success: function (data) {
|
|||
|
|
var datastr = eval('(' + data + ')');
|
|||
|
|
var xdata = new Array();//X轴数据 [0,1,2,3,4,5]
|
|||
|
|
|
|||
|
|
|
|||
|
|
var xData = datastr.result[0].jsonObjectForAll.xdate;
|
|||
|
|
var planTypeName = datastr.result[0].jsonObjectForAll.abcdName;
|
|||
|
|
var listYdateArray = datastr.result[0].jsonObjectForAll.listYdateArray;
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
// var li = ['巡检', '维保', '年检'];
|
|||
|
|
|
|||
|
|
var option = {
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis',
|
|||
|
|
axisPointer: {// 坐标轴指示器，坐标轴触发有效
|
|||
|
|
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
left: '3%',
|
|||
|
|
right: '4%',
|
|||
|
|
bottom: '3%',
|
|||
|
|
top: '16%',width: '50%', height: '80%',
|
|||
|
|
containLabel: true
|
|||
|
|
},
|
|||
|
|
// grid: [
|
|||
|
|
// {x: '7%', y: '7%', width: '50%', height: '80%'},
|
|||
|
|
// ],
|
|||
|
|
legend: {
|
|||
|
|
data: planTypeName,
|
|||
|
|
|
|||
|
|
// orient: 'vertical', // vertical
|
|||
|
|
// x:'right',//left right top bottom 可设定图例在左、右、居中
|
|||
|
|
// y:'center', // center 可设定图例在上、下、居中
|
|||
|
|
|
|||
|
|
padding:[0, 0, 66, 0] // //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
|
|||
|
|
},
|
|||
|
|
toolbox: {//添加一个toolbox配置
|
|||
|
|
show: true,
|
|||
|
|
feature: {
|
|||
|
|
dataZoom: {
|
|||
|
|
yAxisIndex: "none"
|
|||
|
|
},
|
|||
|
|
// dataView: {
|
|||
|
|
// readOnly: false
|
|||
|
|
// }, // 'line'（切换为折线图）, 'bar'（切换为柱状图）,
|
|||
|
|
magicType: {//配置可以动态切换的类型： 'stack'（切换为堆叠模式）, 'tiled'（切换为平铺模式）
|
|||
|
|
type: ["line", "bar", "stack", "tiled"]
|
|||
|
|
},
|
|||
|
|
// restore: {},
|
|||
|
|
saveAsImage: {}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
type: 'category',
|
|||
|
|
// show: false,
|
|||
|
|
data: xData,
|
|||
|
|
// boundaryGap: false,// 设置为false代表是零刻度开始
|
|||
|
|
boundaryGap: true,// 设置为true代表离零刻度间隔一段距离
|
|||
|
|
axisLabel: {
|
|||
|
|
interval: 0, //0为显示所有标签 1为隔一个显示一个
|
|||
|
|
margin: 10,
|
|||
|
|
textStyle: {
|
|||
|
|
fontSize: 12,
|
|||
|
|
color: '#000000'//月份文字颜色 ---切换主题需修改
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: 'value',
|
|||
|
|
axisLabel: {
|
|||
|
|
formatter: '{value}',
|
|||
|
|
textStyle: {
|
|||
|
|
fontSize: 12,
|
|||
|
|
color: '#000000'//Y轴数量颜色---切换主题需修改
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
minInterval: 1,
|
|||
|
|
name: '报警次数'
|
|||
|
|
},
|
|||
|
|
// {"code":1,"msg":"","result":[{"pdata":{"2021":"3"},"edata":{"2021":"0"},"ndata":{"2021":"1"}}]}
|
|||
|
|
series:function() {
|
|||
|
|
let serie=[];
|
|||
|
|
// 红、 橙、 黄（金色）、绿、 青、 蓝、 紫
|
|||
|
|
let colorArr=['#FF0000', '#FF8C00', '#FFD700', '#00BFFF', '#00FFFF', '#00BFFF', '#8A2BE2',
|
|||
|
|
'#000000', '#0000CD', '#FF7F50'];
|
|||
|
|
// 黑色、 深蓝色、 珊瑚色
|
|||
|
|
planTypeName.forEach( function(element, index){
|
|||
|
|
serie.push(
|
|||
|
|
{
|
|||
|
|
name: planTypeName[index],
|
|||
|
|
barWidth: 18, // 柱状图的 柱子的宽度
|
|||
|
|
type: "bar",
|
|||
|
|
label: {
|
|||
|
|
normal: {
|
|||
|
|
show: true, //柱状图上显示数值 false true
|
|||
|
|
position: 'inside', // insideRight inside top topbottom
|
|||
|
|
color: '#000000',
|
|||
|
|
fontSize: 15 //字体大小
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data: listYdateArray[index], // ydata_p yData
|
|||
|
|
itemStyle: {
|
|||
|
|
color: colorArr[index]
|
|||
|
|
},
|
|||
|
|
smooth: true
|
|||
|
|
}
|
|||
|
|
)
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
let pieABCD = [0, 0, 0, 0];
|
|||
|
|
var pieA = 0;
|
|||
|
|
var pieB = 0;
|
|||
|
|
var pieC = 0;
|
|||
|
|
var pieD = 0;
|
|||
|
|
|
|||
|
|
listYdateArray.forEach( function(element, index1){
|
|||
|
|
var tempDate = 0;
|
|||
|
|
xData.forEach( function(element, index2){
|
|||
|
|
tempDate += listYdateArray[index1][index2];
|
|||
|
|
});
|
|||
|
|
console.log("tempDate " + tempDate);
|
|||
|
|
pieABCD[index1] = tempDate;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
xData.forEach( function(element, index){
|
|||
|
|
listYdateArray.forEach( function(element, index){
|
|||
|
|
pieA += 1;
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
console.log("a " + pieA);
|
|||
|
|
console.log("b " + pieB);
|
|||
|
|
console.log("c " + pieC);
|
|||
|
|
console.log("d " + pieD);
|
|||
|
|
|
|||
|
|
serie.push(
|
|||
|
|
// {
|
|||
|
|
// name: '销量',
|
|||
|
|
// type: 'bar',
|
|||
|
|
// data: dataValue
|
|||
|
|
// },
|
|||
|
|
{
|
|||
|
|
type: 'pie',
|
|||
|
|
data: [
|
|||
|
|
{value: pieABCD[0], name: planTypeName[0] + ": " + pieABCD[0], itemStyle:{color: '#FF0000'}},
|
|||
|
|
{value: pieABCD[1], name: planTypeName[1] + ": " + pieABCD[1], itemStyle:{color: '#FF8C00'}},
|
|||
|
|
{value: pieABCD[2], name: planTypeName[2] + ": " + pieABCD[2], itemStyle:{color: '#FFD700'}},
|
|||
|
|
{value: pieABCD[3], name: planTypeName[3] + ": " + pieABCD[3], itemStyle:{color: '#00BFFF'}}
|
|||
|
|
],
|
|||
|
|
radius:'65%',
|
|||
|
|
center:['75%','50%']
|
|||
|
|
// ,
|
|||
|
|
// smooth: true
|
|||
|
|
}
|
|||
|
|
)
|
|||
|
|
return serie;
|
|||
|
|
}()
|
|||
|
|
|
|||
|
|
}; // option
|
|||
|
|
|
|||
|
|
myChart.clear();
|
|||
|
|
myChart.setOption(option);
|
|||
|
|
myChart.resize();//主动调用resize达到区域更新的效果,用于自动刷新区域大小
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*
|
|||
|
|
任务统计直方图
|
|||
|
|
*/
|
|||
|
|
function chart3(dateType, selectDate1, selectDate2) {
|
|||
|
|
//初始化echarts实例 getPatrolRecordNum
|
|||
|
|
var myChart = echarts.init(document.getElementById('chart3'));
|
|||
|
|
$.ajax({
|
|||
|
|
type: 'GET',
|
|||
|
|
url: ext.contextPath + '/hqconfig/hqAlarmAna/selectAreaListByDate.do?&&math='
|
|||
|
|
+ Math.random()
|
|||
|
|
+ '&dateType=' + dateType
|
|||
|
|
+ '&patrolDateStart=' + selectDate1
|
|||
|
|
+ '&patrolDateEnd=' + selectDate2, //////////////////////// 逗号一定别忘了 ///////////////////////////////////
|
|||
|
|
// + '&patrolDate=' + selectDate, // + '&unitId=' + bizid
|
|||
|
|
async: true,
|
|||
|
|
globle: false,
|
|||
|
|
error: function () {
|
|||
|
|
console.log(" 没有 找到 ");
|
|||
|
|
return false;
|
|||
|
|
},
|
|||
|
|
success: function (data) {
|
|||
|
|
var datastr = eval('(' + data + ')');
|
|||
|
|
var xdata = new Array();//X轴数据 [0,1,2,3,4,5]
|
|||
|
|
|
|||
|
|
|
|||
|
|
var xData = datastr.result[0].jsonObjectForAll.xdate;
|
|||
|
|
var planTypeName = datastr.result[0].jsonObjectForAll.areaName;
|
|||
|
|
var listYdateArray = datastr.result[0].jsonObjectForAll.listYdateArray;
|
|||
|
|
|
|||
|
|
var option = {
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis',
|
|||
|
|
axisPointer: {// 坐标轴指示器，坐标轴触发有效
|
|||
|
|
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
left: '3%',
|
|||
|
|
right: '4%',
|
|||
|
|
bottom: '3%',
|
|||
|
|
top: '16%', width: '50%', height: '80%',
|
|||
|
|
containLabel: true
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
data: planTypeName,
|
|||
|
|
|
|||
|
|
padding:[0, 0, 66, 0] // //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
|
|||
|
|
},
|
|||
|
|
toolbox: {//添加一个toolbox配置
|
|||
|
|
show: true,
|
|||
|
|
feature: {
|
|||
|
|
dataZoom: {
|
|||
|
|
yAxisIndex: "none"
|
|||
|
|
},
|
|||
|
|
// 'line'（切换为折线图）, 'bar'（切换为柱状图）,
|
|||
|
|
magicType: {//配置可以动态切换的类型： 'stack'（切换为堆叠模式）, 'tiled'（切换为平铺模式）
|
|||
|
|
type: ["line", "bar", "stack", "tiled"]
|
|||
|
|
},
|
|||
|
|
// restore: {},
|
|||
|
|
saveAsImage: {}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
type: 'category',
|
|||
|
|
data: xData,
|
|||
|
|
boundaryGap: true,// 设置为true代表离零刻度间隔一段距离
|
|||
|
|
axisLabel: {
|
|||
|
|
interval: 0, //0为显示所有标签 1为隔一个显示一个
|
|||
|
|
margin: 10,
|
|||
|
|
textStyle: {
|
|||
|
|
fontSize: 12,
|
|||
|
|
color: '#000000'//月份文字颜色 ---切换主题需修改
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
type: 'value',
|
|||
|
|
axisLabel: {
|
|||
|
|
formatter: '{value}',
|
|||
|
|
textStyle: {
|
|||
|
|
fontSize: 12,
|
|||
|
|
color: '#000000'//Y轴数量颜色---切换主题需修改
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
minInterval: 1,
|
|||
|
|
name: '报警次数'
|
|||
|
|
},
|
|||
|
|
series:function() {
|
|||
|
|
let serie=[];
|
|||
|
|
let colorArr=['#FFD700', '#00BFFF', '#FF7F50', '#FF0000', '#FF8C00', '#FFD700', '#00FF00',
|
|||
|
|
'#000000', '#0000CD', '#FF7F50'];
|
|||
|
|
planTypeName.forEach( function(element, index){
|
|||
|
|
serie.push(
|
|||
|
|
{
|
|||
|
|
name: planTypeName[index],
|
|||
|
|
barWidth: 18, // 柱状图的 柱子的宽度
|
|||
|
|
type: "bar",
|
|||
|
|
label: {
|
|||
|
|
normal: {
|
|||
|
|
show: true, //柱状图上显示数值 false true
|
|||
|
|
position: 'inside', // insideRight inside top topbottom
|
|||
|
|
color: '#000000',
|
|||
|
|
fontSize: 15 //字体大小
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data: listYdateArray[index], // ydata_p yData
|
|||
|
|
itemStyle: {
|
|||
|
|
color: colorArr[index]
|
|||
|
|
},
|
|||
|
|
smooth: true
|
|||
|
|
}
|
|||
|
|
)
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
let pieABCD = [0, 0, 0];
|
|||
|
|
var pieA = 0;
|
|||
|
|
var pieB = 0;
|
|||
|
|
var pieC = 0;
|
|||
|
|
|
|||
|
|
listYdateArray.forEach( function(element, index1){
|
|||
|
|
var tempDate = 0;
|
|||
|
|
xData.forEach( function(element, index2){
|
|||
|
|
tempDate += listYdateArray[index1][index2];
|
|||
|
|
});
|
|||
|
|
console.log("tempDate " + tempDate);
|
|||
|
|
pieABCD[index1] = tempDate;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
serie.push(
|
|||
|
|
{
|
|||
|
|
type: 'pie',
|
|||
|
|
/*data: [
|
|||
|
|
{value: pieABCD[0], name: planTypeName[0] + ": " + pieABCD[0], itemStyle:{color: colorArr[0] }},
|
|||
|
|
{value: pieABCD[1], name: planTypeName[1] + ": " + pieABCD[1], itemStyle:{color: colorArr[1] }},
|
|||
|
|
{value: pieABCD[2], name: planTypeName[2] + ": " + pieABCD[2], itemStyle:{color: colorArr[2] }},
|
|||
|
|
],*/
|
|||
|
|
data:function(){
|
|||
|
|
let temp = [];
|
|||
|
|
planTypeName.forEach( function(element, index){
|
|||
|
|
temp.push({
|
|||
|
|
value: pieABCD[index],
|
|||
|
|
name: planTypeName[index] + ": " + pieABCD[index],
|
|||
|
|
itemStyle:{color: colorArr[index]}
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
return temp
|
|||
|
|
}(),
|
|||
|
|
radius:'65%',
|
|||
|
|
|
|||
|
|
center:['75%','50%']
|
|||
|
|
}
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
return serie;
|
|||
|
|
}()
|
|||
|
|
|
|||
|
|
|
|||
|
|
}; // option
|
|||
|
|
|
|||
|
|
myChart.clear();
|
|||
|
|
myChart.setOption(option);
|
|||
|
|
myChart.resize();//主动调用resize达到区域更新的效果,用于自动刷新区域大小
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
function chart1111(){
|
|||
|
|
var myChart = echarts.init(document.getElementById('chart1'));
|
|||
|
|
var option = {
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: "axis",
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
itemWidth:15,
|
|||
|
|
itemHeight:15,
|
|||
|
|
data:['A','B','C','D'],
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
name:"时间",
|
|||
|
|
data: ["1月","2月","3月","4月","5月","6月"],
|
|||
|
|
splitLine:{
|
|||
|
|
show:false,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
name:"报警次数",
|
|||
|
|
splitLine:{
|
|||
|
|
show:false,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
series: [{
|
|||
|
|
name: 'A',
|
|||
|
|
type: 'bar',
|
|||
|
|
stack:'使用情况',
|
|||
|
|
data: [5, 20, 36, 10, 10, 20],
|
|||
|
|
itemStyle:{
|
|||
|
|
normal:{color:"#FF0000"},
|
|||
|
|
}
|
|||
|
|
},{
|
|||
|
|
name: 'B',
|
|||
|
|
type: 'bar',
|
|||
|
|
stack:'使用情况',
|
|||
|
|
data: [40, 22, 18, 35, 42, 40],
|
|||
|
|
itemStyle:{
|
|||
|
|
normal:{color:"#FF9900"},
|
|||
|
|
}
|
|||
|
|
},{
|
|||
|
|
name: 'C',
|
|||
|
|
type: 'bar',
|
|||
|
|
stack:'使用情况',
|
|||
|
|
data: [40, 22, 18, 35, 42, 40],
|
|||
|
|
itemStyle:{
|
|||
|
|
normal:{color:"#FFFF00"},
|
|||
|
|
}
|
|||
|
|
},{
|
|||
|
|
name: 'D',
|
|||
|
|
type: 'bar',
|
|||
|
|
stack:'使用情况',
|
|||
|
|
data: [40, 22, 18, 35, 42, 40],
|
|||
|
|
itemStyle:{
|
|||
|
|
normal:{color:"#0066FF"},
|
|||
|
|
}
|
|||
|
|
}]
|
|||
|
|
};
|
|||
|
|
myChart.setOption(option);
|
|||
|
|
myChart.resize();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function chart2222(){
|
|||
|
|
var myChart = echarts.init(document.getElementById('chart2'));
|
|||
|
|
var option = {
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'item'
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
orient: 'vertical',
|
|||
|
|
left: 'left',
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: '访问来源',
|
|||
|
|
type: 'pie',
|
|||
|
|
radius: '50%',
|
|||
|
|
data: [
|
|||
|
|
{value: 1048, name: 'A'},
|
|||
|
|
{value: 735, name: 'B'},
|
|||
|
|
{value: 580, name: 'C'},
|
|||
|
|
{value: 484, name: 'D'}
|
|||
|
|
],
|
|||
|
|
emphasis: {
|
|||
|
|
itemStyle: {
|
|||
|
|
shadowBlur: 10,
|
|||
|
|
shadowOffsetX: 0,
|
|||
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}]
|
|||
|
|
}
|
|||
|
|
myChart.setOption(option);
|
|||
|
|
myChart.resize();
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
function chart3333(){
|
|||
|
|
var myChart = echarts.init(document.getElementById('chart3'));
|
|||
|
|
var option = {
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis'
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
data: ['预处理上层', '预处理下层', '加药区']
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
left: '3%',
|
|||
|
|
right: '4%',
|
|||
|
|
bottom: '3%',
|
|||
|
|
containLabel: true
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
name:"时间",
|
|||
|
|
type: 'category',
|
|||
|
|
boundaryGap: false,
|
|||
|
|
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
name:"报警次数",
|
|||
|
|
type: 'value'
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: '预处理上层',
|
|||
|
|
type: 'line',
|
|||
|
|
stack: '总量',
|
|||
|
|
data: [120, 132, 101, 134, 90, 230, 210]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '预处理下层',
|
|||
|
|
type: 'line',
|
|||
|
|
stack: '总量',
|
|||
|
|
data: [220, 182, 191, 234, 290, 330, 310]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '加药区',
|
|||
|
|
type: 'line',
|
|||
|
|
stack: '总量',
|
|||
|
|
data: [150, 232, 201, 154, 190, 330, 410]
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
myChart.setOption(option);
|
|||
|
|
myChart.resize();
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
function chart4(){
|
|||
|
|
var myChart = echarts.init(document.getElementById('chart4'));
|
|||
|
|
var option = {
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'item'
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
orient: 'vertical',
|
|||
|
|
left: 'left',
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: '访问来源',
|
|||
|
|
type: 'pie',
|
|||
|
|
radius: '50%',
|
|||
|
|
data: [
|
|||
|
|
{value: 1048, name: '预处理上层'},
|
|||
|
|
{value: 735, name: '预处理下层'},
|
|||
|
|
{value: 580, name: '加药区'}
|
|||
|
|
],
|
|||
|
|
emphasis: {
|
|||
|
|
itemStyle: {
|
|||
|
|
shadowBlur: 10,
|
|||
|
|
shadowOffsetX: 0,
|
|||
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}]
|
|||
|
|
}
|
|||
|
|
myChart.setOption(option);
|
|||
|
|
myChart.resize();
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
function allfun() {
|
|||
|
|
//给div赋值高度
|
|||
|
|
var heightstr = $(window).height();
|
|||
|
|
$("#divbottom").height(heightstr - 50);//20只是为了避免滚动条 无其他意义
|
|||
|
|
|
|||
|
|
var dateType = $('#dateType').val();//查询类型 0:月 1:年
|
|||
|
|
var selectDate1 = $('#selectDateStart').val();//查询的日期 selectDateStart selectDateEnd
|
|||
|
|
var selectDate2 = $('#selectDateEnd').val();//查询的日期
|
|||
|
|
// var bizid = unitId;
|
|||
|
|
|
|||
|
|
if (dateType == 1) {
|
|||
|
|
dateType = 'year';
|
|||
|
|
selectDate1 = selectDate1 + '-01-01';
|
|||
|
|
selectDate2 = selectDate2 + '-01-01'; // 2020-2021 是2年的
|
|||
|
|
// 不用改成-12-31 因为反正只是 年份 作差 和月份天数无关
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
if (dateType == 0) {
|
|||
|
|
dateType = 'month';
|
|||
|
|
selectDate1 = selectDate1 + '-01';
|
|||
|
|
selectDate2 = selectDate2 + '-01';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if(selectDate1 != '-01-01' && selectDate2 != '-01-01' && selectDate1 != '-01' && selectDate2 != '-01') {
|
|||
|
|
console.log("看 selectDate1 " + selectDate1);
|
|||
|
|
chart1(dateType, selectDate1, selectDate2); // 新版 范围版本
|
|||
|
|
chart3(dateType, selectDate1, selectDate2); // 新版 范围版本
|
|||
|
|
// chart12(bizid, dateType, selectDate1, selectDate2); // 新版 范围版本 不超时率的
|
|||
|
|
// chart22(bizid, dateType, selectDate1, selectDate2); // 新版 范围版本 合格率的
|
|||
|
|
// chart4(bizid, dateType, selectDate1, selectDate2); // 新版 范围版本 直方图的
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
console.log("空 selectDate1 2 " + selectDate1);
|
|||
|
|
console.log("空 selectDate1 2 " + selectDate2);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
} // allfun()
|
|||
|
|
|
|||
|
|
// $(function() {
|
|||
|
|
// domonth();
|
|||
|
|
// doyear();
|
|||
|
|
// domonthRange();
|
|||
|
|
// doyearRange();
|
|||
|
|
// dateRange();
|
|||
|
|
// chart1();
|
|||
|
|
// chart1(dateType, selectDate1, selectDate2); // 新版 范围版本 直方图的
|
|||
|
|
// chart2();
|
|||
|
|
// chart3();
|
|||
|
|
// chart4();
|
|||
|
|
|
|||
|
|
// });
|
|||
|
|
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
</head>
|
|||
|
|
<body onload="initMenu();allfun();dateRange();" class="hold-transition ${cu.themeclass} sidebar-mini">
|
|||
|
|
|
|||
|
|
<input type="hidden" name="dateType" id="dateType" value="1">
|
|||
|
|
<input type="hidden" name="selectDate" id="selectDate" value="${datestr}">
|
|||
|
|
|
|||
|
|
<input type="hidden" name="selectDateStart" id="selectDateStart" value="${datestr-2}">
|
|||
|
|
<input type="hidden" name="selectDateEnd" id="selectDateEnd" value="${datestr}">
|
|||
|
|
|
|||
|
|
<div class="wrapper" style="height:auto;min-height: 100%;">
|
|||
|
|
<!-- 引用top -->
|
|||
|
|
<%-- <jsp:include page="/jsp/top.jsp"></jsp:include> --%>
|
|||
|
|
<!-- 菜单栏 -->
|
|||
|
|
<%-- <jsp:include page="/jsp/left.jsp"></jsp:include> --%>
|
|||
|
|
<div class="content-wrapper" style="height:auto;min-height: 100%;">
|
|||
|
|
<!-- Main content -->
|
|||
|
|
<section class="content-header">
|
|||
|
|
<h1 id="head_title"></h1>
|
|||
|
|
<ol class="breadcrumb">
|
|||
|
|
<li><a id='head_firstlevel' href="#"><i class="fa fa-dashboard"></i> </a></li>
|
|||
|
|
<!-- <li class="active">Here</li> -->
|
|||
|
|
</ol>
|
|||
|
|
</section>
|
|||
|
|
<section class="content container-fluid" style="height:auto;min-height: 100%;">
|
|||
|
|
<div id="mainAlertdiv"></div>
|
|||
|
|
<div id="subDiv"></div>
|
|||
|
|
<div id="subDivDetail"></div>
|
|||
|
|
<div id="fileInputDiv"></div>
|
|||
|
|
<div id="fault4SelectDiv"></div>
|
|||
|
|
|
|||
|
|
<!-- 上 top-->
|
|||
|
|
<div id="top" style="width: 100%;height: 45%;background-color: white;">
|
|||
|
|
<div style="width: 100%;height: 100%;float: left;">
|
|||
|
|
<div style="width:100%;height:20%;margin-top:1%">
|
|||
|
|
<div style="height:100%;width:50%;float:left">
|
|||
|
|
<div style="height:100%;width:288px;float:left">
|
|||
|
|
<div id="yearRangeDiv" style="float:left;margin-left:1%">
|
|||
|
|
<span class="text">查询范围</span>
|
|||
|
|
<input type="text" id="yearRangeinputDate1" value="${datestr-2}" style="width:100px;" placeholder="开始日期" class="date-picker">
|
|||
|
|
<span class="text">至</span>
|
|||
|
|
<input type="text" id="yearRangeinputDate2" value="${datestr}" style="width:100px;margin:0px 3px 0px 0px;" placeholder="结束日期" class="date-picker">
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- monthRangeDiv 是 点击 年-月 的 查询框 范围 display:none; 默认先显示年的范围 -->
|
|||
|
|
<div id="monthRangeDiv" style="display:none;float:left;margin-left:0%" >
|
|||
|
|
<span class="input-group-text">查询范围</span>
|
|||
|
|
<input type="text" id="monthRangeinputDate1" style="width:100px;" placeholder="开始日期" class="date-picker">
|
|||
|
|
<span class="text">至</span>
|
|||
|
|
<input type="text" id="monthRangeinputDate2" style="width:100px;margin:0px 3px 0px 0px;" placeholder="结束日期" class="date-picker">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style="height:100%;width:30%;float:left;margin-left:-1%">
|
|||
|
|
<button id="yearButtonId" type="button" class="btn btn-default" style="background-color:#238AE5;float:left"
|
|||
|
|
onclick="doyearRange();">年
|
|||
|
|
</button>
|
|||
|
|
<button id="monthButtonId" type="button" class="btn btn-default" style="background-color:#D4D4D4;float:left"
|
|||
|
|
onclick="domonthRange();">月
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style="display:none; height:100%;width:50%;float:left">
|
|||
|
|
<label class="form-label" style="float: left;line-height: 2;">风险等级：</label>
|
|||
|
|
<select type="text" id="risklevelForSelect" class="form-control" name="risklevelForSelect" style="width: 120px;float:left">
|
|||
|
|
<option value="all">全部</option>
|
|||
|
|
<option value="A">A</option>
|
|||
|
|
<option value="B">B</option>
|
|||
|
|
<option value="C">C</option>
|
|||
|
|
<option value="D">D</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div style="width:100%;height:1%;"></div>
|
|||
|
|
<div style="width:100%;height:70%;">
|
|||
|
|
<div style="height:100%;width:100%;float:left">
|
|||
|
|
<div id="chart1" style="width:100%; height: 100%;"></div>
|
|||
|
|
</div>
|
|||
|
|
<div style="height:100%;width:0%;float:left">
|
|||
|
|
<div id="chart2" style="width:100%; height: 100%;"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style="width: 100%;height: 3%;"></div>
|
|||
|
|
<!-- 中 mid-->
|
|||
|
|
<div id="mid" style="width: 100%;height: 45%;background-color: white;">
|
|||
|
|
<div style="width:100%;height:100%;float:left;">
|
|||
|
|
<div id="chart3" style="width:100%; height: 100%;"></div>
|
|||
|
|
</div>
|
|||
|
|
<div style="width:0%;height:100%;float:left;">
|
|||
|
|
<div id="chart4" style="width:100%; height: 100%;"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</section>
|
|||
|
|
<%-- <jsp:include page="/jsp/bottom.jsp"></jsp:include> --%>
|
|||
|
|
<%-- <jsp:include page="/jsp/side.jsp"></jsp:include> --%>
|
|||
|
|
</div>
|
|||
|
|
</body>
|
|||
|
|
</html>
|