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>
|