Files
SIPAIIS_WMS_JSSW/WebRoot/jsp/evaluation/interfaceDisplay.jsp
2026-01-16 14:13:44 +08:00

794 lines
50 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<%@page import="com.sipai.tools.CommString"%>
<%@ 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>
<!-- <html lang="zh-CN"> -->
<!-- BEGIN HEAD -->
<head>
<title><%= ServerObject.atttable.get("TOPTITLE")%></title>
<!-- 引用页头及CSS页-->
<jsp:include page="/jsp/inc.jsp"></jsp:include>
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/echarts/echarts.4.1.0.min.js"
charset="utf-8"></script>
<!-- bootstrap switch -->
<link rel="stylesheet"
href="<%=request.getContextPath()%>/node_modules/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.min.css" />
<script type="text/javascript"
src="<%=request.getContextPath()%>/node_modules/bootstrap-switch/dist/js/bootstrap-switch.min.js"
charset="utf-8"></script>
<style type="text/css">
html,body{
height: 500px;
}
.line001{
background:#E7E7E7;/*背景色为浅灰色*/
width:1px;/*设置宽高*/
height:60px;
/*调整位置*/
}
</style>
<script type="text/javascript">
$(function(){
var json = '${jsonData}';
// var myChart_gb_day = echarts.init(document.getElementById('myChart_gb_day'));
// var myChart_gb_month = echarts.init(document.getElementById('myChart_gb_month'));
// var myChart_gb_year = echarts.init(document.getElementById('myChart_gb_year'));
var myChart_db_day = echarts.init(document.getElementById('myChart_db_day'));
var myChart_db_month = echarts.init(document.getElementById('myChart_db_month'));
var myChart_db_year = echarts.init(document.getElementById('myChart_db_year'));
// var myChart_nk_day = echarts.init(document.getElementById('myChart_nk_day'));
// var myChart_nk_month = echarts.init(document.getElementById('myChart_nk_month'));
// var myChart_nk_year = echarts.init(document.getElementById('myChart_nk_year'));
// 指定图表的配置项和数据
var colorTemplate1 = [[0.25, "rgba(51, 255, 51,0.8)"],[0.5, "rgba(240,189,0,0.8)"],[1, "rgba(255,0,0,0.8)"]];
var axisLine = { // 仪表盘轴线(轮廓线)相关配置。
show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。
lineStyle: { // 仪表盘轴线样式。
color: colorTemplate1, //仪表盘的轴线可以被分成不同颜色的多段。每段的 结束位置(范围是[0,1]) 和 颜色 可以通过一个数组来表示。默认取值:[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
opacity: 1, //图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
width: 20, //轴线宽度,默认 30。
shadowBlur: 0, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
shadowColor: "#fff", //阴影颜色。支持的格式同color。
}
};
var splitLine = { // 分隔线样式。
show: true, // 是否显示分隔线,默认 true。
length: 8, // 分隔线线长。支持相对半径的百分比,默认 30。
lineStyle: { // 分隔线样式。
color: "#eee", //线的颜色,默认 #eee。
opacity: 1, //图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
width: 1, //线度,默认 2。
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
shadowBlur: 0, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
shadowColor: "#fff", //阴影颜色。支持的格式同color。
}
};
var axisTick = { // 刻度(线)样式。
show: true, // 是否显示刻度(线),默认 true。
splitNumber: 5, // 分隔线之间分割的刻度数,默认 5。
length: 10, // 刻度线长。支持相对半径的百分比,默认 8。
lineStyle: { // 刻度线样式。
color: "rgb(64,75,87)", //线的颜色,默认 #eee。
opacity: 1, //图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
width: 2, //线度,默认 1。
type: "solid", //线的类型,默认 solid。 此外还有 dashed,dotted
shadowBlur: 0, //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
shadowColor: "#fff", //阴影颜色。支持的格式同color。
},
};
var pointer = { // 仪表盘指针。
show: true, // 是否显示指针,默认 true。
length: "70%", // 指针长度,可以是绝对数值,也可以是相对于半径的百分比,默认 80%。
width: 5, // 指针宽度,默认 8。
};
var itemStyle = { // 仪表盘指针样式。
color: "auto", // 指针颜色,默认(auto)取数值所在的区间的颜色
opacity: 1, // 图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
borderWidth: 0, // 描边线宽,默认 0。为 0 时无描边。
borderType: "solid", // 柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'。
borderColor: "#000", // 图形的描边颜色,默认 "#000"。支持的颜色格式同 color不支持回调函数。
shadowBlur: 0, // (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
shadowColor: "#fff", // 阴影颜色。支持的格式同color。
};
var title = { // 仪表盘标题。
show: true, // 是否显示标题,默认 true。
offsetCenter: [0,"20%"],//相对于仪表盘中心的偏移位置,数组第一项是水平方向的偏移,第二项是垂直方向的偏移。可以是绝对的数值,也可以是相对于仪表盘半径的百分比。
color: "#fff", // 文字的颜色,默认 #333。
fontSize: 30, // 文字的字体大小,默认 15。
};
// // 指定图表的配置项和数据
// var option_gb_day = {
// //backgroundColor: "#000",
// tooltip: { // 本系列特定的 tooltip 设定。
// show: true,
// formatter: "{c}",
// backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色。注意series.tooltip 仅在 tooltip.trigger 为 'item' 时有效。
// borderColor: "#333", // 提示框浮层的边框颜色。...
// borderWidth: 0, // 提示框浮层的边框宽。...
// padding: 5, // 提示框浮层内边距单位px默认各方向内边距为5接受数组分别设定上右下左边距。...
// textStyle: { // 提示框浮层的文本样式。...
// // color ,fontStyle ,fontWeight ,fontFamily ,fontSize ,lineHeight ,.......
// },
// },
// series: [
// {
// name: "单仪表盘示例", // 系列名称,用于tooltip的显示legend 的图例筛选,在 setOption 更新数据和配置项时用于指定对应的系列。
// type: "gauge", // 系列类型
// radius: "80%", // 参数:number, string。 仪表盘半径,默认 75% ,可以是相对于容器高宽中较小的一项的一半的百分比,也可以是绝对的数值。
// center: ["50%", "55%"], // 仪表盘位置(圆心坐标)
// startAngle: 225, // 仪表盘起始角度,默认 225。圆心 正右手侧为0度正上方为90度正左手侧为180度。
// endAngle: -45, // 仪表盘结束角度,默认 -45
// clockwise: true, // 仪表盘刻度是否是顺时针增长,默认 true。
// min: 0, // 最小的数据值,默认 0 。映射到 minAngle。
// max: 2, // 最大的数据值,默认 100 。映射到 maxAngle。
// splitNumber: 4, // 仪表盘刻度的分割段数,默认 10。
// axisLine: axisLine,
// splitLine: splitLine,
// axisTick: axisTick,
// axisLabel: { // 刻度标签。
// show: true, // 是否显示标签,默认 true。
// distance: 2, // 标签与刻度线的距离,默认 5。
// color: "rgb(255,255,255)", // 文字的颜色,默认 #fff。
// fontSize: 10, // 文字的字体大小,默认 5。
// formatter: "{value}", // 刻度标签的内容格式器,支持字符串模板和回调函数两种形式。 示例:// 使用字符串模板,模板变量为刻度默认标签 {value},如:formatter: '{value} kg'; // 使用函数模板,函数参数分别为刻度数值,如formatter: function (value) {return value + 'km/h';}
// },
// pointer: pointer,
// itemStyle: itemStyle,
// title: title,
// detail: { // 仪表盘详情,用于显示数据。
// show: true, // 是否显示详情,默认 true。
// offsetCenter: [0,"100%"],// 相对于仪表盘中心的偏移位置,数组第一项是水平方向的偏移,第二项是垂直方向的偏移。可以是绝对的数值,也可以是相对于仪表盘半径的百分比。
// color: "auto", // 文字的颜色,默认 auto。
// fontSize: 15, // 文字的字体大小,默认 15。
// formatter: "日评指数 {value}", // 格式化函数或者字符串
// },
// data: [{
// name: "",
// value: JSON.parse(json).gb_day,
// }]
// }
// ]
// };
// myChart_gb_day.setOption(option_gb_day);
// myChart_gb_day.on('click',function(){
// showline('gb_day');
// });
// var option_gb_month = {
// //backgroundColor: "#000",
// tooltip: { // 本系列特定的 tooltip 设定。
// show: true,
// formatter: "{c}",
// backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色。注意series.tooltip 仅在 tooltip.trigger 为 'item' 时有效。
// borderColor: "#333", // 提示框浮层的边框颜色。...
// borderWidth: 0, // 提示框浮层的边框宽。...
// padding: 5, // 提示框浮层内边距单位px默认各方向内边距为5接受数组分别设定上右下左边距。...
// textStyle: { // 提示框浮层的文本样式。...
// // color ,fontStyle ,fontWeight ,fontFamily ,fontSize ,lineHeight ,.......
// },
// },
// series: [
// {
// name: "单仪表盘示例", // 系列名称,用于tooltip的显示legend 的图例筛选,在 setOption 更新数据和配置项时用于指定对应的系列。
// type: "gauge", // 系列类型
// radius: "80%", // 参数:number, string。 仪表盘半径,默认 75% ,可以是相对于容器高宽中较小的一项的一半的百分比,也可以是绝对的数值。
// center: ["50%", "55%"], // 仪表盘位置(圆心坐标)
// startAngle: 225, // 仪表盘起始角度,默认 225。圆心 正右手侧为0度正上方为90度正左手侧为180度。
// endAngle: -45, // 仪表盘结束角度,默认 -45
// clockwise: true, // 仪表盘刻度是否是顺时针增长,默认 true。
// min: 0, // 最小的数据值,默认 0 。映射到 minAngle。
// max: 2, // 最大的数据值,默认 100 。映射到 maxAngle。
// splitNumber: 4, // 仪表盘刻度的分割段数,默认 10。
// axisLine: axisLine,
// splitLine: splitLine,
// axisTick: axisTick,
// axisLabel: { // 刻度标签。
// show: true, // 是否显示标签,默认 true。
// distance: 2, // 标签与刻度线的距离,默认 5。
// color: "rgb(255,255,255)", // 文字的颜色,默认 #fff。
// fontSize: 10, // 文字的字体大小,默认 5。
// formatter: "{value}", // 刻度标签的内容格式器,支持字符串模板和回调函数两种形式。 示例:// 使用字符串模板,模板变量为刻度默认标签 {value},如:formatter: '{value} kg'; // 使用函数模板,函数参数分别为刻度数值,如formatter: function (value) {return value + 'km/h';}
// },
// pointer: pointer,
// itemStyle: itemStyle,
// title: title,
// detail: { // 仪表盘详情,用于显示数据。
// show: true, // 是否显示详情,默认 true。
// offsetCenter: [0,"100%"],// 相对于仪表盘中心的偏移位置,数组第一项是水平方向的偏移,第二项是垂直方向的偏移。可以是绝对的数值,也可以是相对于仪表盘半径的百分比。
// color: "auto", // 文字的颜色,默认 auto。
// fontSize: 15, // 文字的字体大小,默认 15。
// formatter: "月评指数 {value}", // 格式化函数或者字符串
// },
// data: [{
// name: "",
// value: JSON.parse(json).gb_month,
// }]
// }
// ]
// };
// myChart_gb_month.setOption(option_gb_month);
// myChart_gb_month.on('click',function(){
// showline('gb_month');
// });
// var option_gb_year = {
// //backgroundColor: "#000",
// tooltip: { // 本系列特定的 tooltip 设定。
// show: true,
// formatter: "{c}",
// backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色。注意series.tooltip 仅在 tooltip.trigger 为 'item' 时有效。
// borderColor: "#333", // 提示框浮层的边框颜色。...
// borderWidth: 0, // 提示框浮层的边框宽。...
// padding: 5, // 提示框浮层内边距单位px默认各方向内边距为5接受数组分别设定上右下左边距。...
// textStyle: { // 提示框浮层的文本样式。...
// // color ,fontStyle ,fontWeight ,fontFamily ,fontSize ,lineHeight ,.......
// },
// },
// series: [
// {
// name: "单仪表盘示例", // 系列名称,用于tooltip的显示legend 的图例筛选,在 setOption 更新数据和配置项时用于指定对应的系列。
// type: "gauge", // 系列类型
// radius: "80%", // 参数:number, string。 仪表盘半径,默认 75% ,可以是相对于容器高宽中较小的一项的一半的百分比,也可以是绝对的数值。
// center: ["50%", "55%"], // 仪表盘位置(圆心坐标)
// startAngle: 225, // 仪表盘起始角度,默认 225。圆心 正右手侧为0度正上方为90度正左手侧为180度。
// endAngle: -45, // 仪表盘结束角度,默认 -45
// clockwise: true, // 仪表盘刻度是否是顺时针增长,默认 true。
// min: 0, // 最小的数据值,默认 0 。映射到 minAngle。
// max: 2, // 最大的数据值,默认 100 。映射到 maxAngle。
// splitNumber: 4, // 仪表盘刻度的分割段数,默认 10。
// axisLine: axisLine,
// splitLine: splitLine,
// axisTick: axisTick,
// axisLabel: { // 刻度标签。
// show: true, // 是否显示标签,默认 true。
// distance: 2, // 标签与刻度线的距离,默认 5。
// color: "rgb(255,255,255)", // 文字的颜色,默认 #fff。
// fontSize: 10, // 文字的字体大小,默认 5。
// formatter: "{value}", // 刻度标签的内容格式器,支持字符串模板和回调函数两种形式。 示例:// 使用字符串模板,模板变量为刻度默认标签 {value},如:formatter: '{value} kg'; // 使用函数模板,函数参数分别为刻度数值,如formatter: function (value) {return value + 'km/h';}
// },
// pointer: pointer,
// itemStyle: itemStyle,
// title: title,
// detail: { // 仪表盘详情,用于显示数据。
// show: true, // 是否显示详情,默认 true。
// offsetCenter: [0,"100%"],// 相对于仪表盘中心的偏移位置,数组第一项是水平方向的偏移,第二项是垂直方向的偏移。可以是绝对的数值,也可以是相对于仪表盘半径的百分比。
// color: "auto", // 文字的颜色,默认 auto。
// fontSize: 15, // 文字的字体大小,默认 15。
// formatter: "年评指数 {value}", // 格式化函数或者字符串
// },
// data: [{
// name: "",
// value: JSON.parse(json).gb_year,
// }]
// }
// ]
// };
// myChart_gb_year.setOption(option_gb_year);
// myChart_gb_year.on('click',function(){
// showline('gb_year');
// });
var option_db_day = {
//backgroundColor: "#000",
tooltip: { // 本系列特定的 tooltip 设定。
show: true,
formatter: "{c}",
backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色。注意series.tooltip 仅在 tooltip.trigger 为 'item' 时有效。
borderColor: "#333", // 提示框浮层的边框颜色。...
borderWidth: 0, // 提示框浮层的边框宽。...
padding: 5, // 提示框浮层内边距单位px默认各方向内边距为5接受数组分别设定上右下左边距。...
textStyle: { // 提示框浮层的文本样式。...
// color ,fontStyle ,fontWeight ,fontFamily ,fontSize ,lineHeight ,.......
},
},
series: [
{
name: "单仪表盘示例", // 系列名称,用于tooltip的显示legend 的图例筛选,在 setOption 更新数据和配置项时用于指定对应的系列。
type: "gauge", // 系列类型
radius: "80%", // 参数:number, string。 仪表盘半径,默认 75% ,可以是相对于容器高宽中较小的一项的一半的百分比,也可以是绝对的数值。
center: ["50%", "55%"], // 仪表盘位置(圆心坐标)
startAngle: 225, // 仪表盘起始角度,默认 225。圆心 正右手侧为0度正上方为90度正左手侧为180度。
endAngle: -45, // 仪表盘结束角度,默认 -45
clockwise: true, // 仪表盘刻度是否是顺时针增长,默认 true。
min: 0, // 最小的数据值,默认 0 。映射到 minAngle。
max: 2, // 最大的数据值,默认 100 。映射到 maxAngle。
splitNumber: 4, // 仪表盘刻度的分割段数,默认 10。
axisLine: axisLine,
splitLine: splitLine,
axisTick: axisTick,
axisLabel: { // 刻度标签。
show: true, // 是否显示标签,默认 true。
distance: 18, // 标签与刻度线的距离,默认 5。
color: "rgb(255,255,255)", // 文字的颜色,默认 #fff。
fontSize: 20, // 文字的字体大小,默认 5。
formatter: "{value}", // 刻度标签的内容格式器,支持字符串模板和回调函数两种形式。 示例:// 使用字符串模板,模板变量为刻度默认标签 {value},如:formatter: '{value} kg'; // 使用函数模板,函数参数分别为刻度数值,如formatter: function (value) {return value + 'km/h';}
},
pointer: pointer,
itemStyle: itemStyle,
title: title,
detail: { // 仪表盘详情,用于显示数据。
show: true, // 是否显示详情,默认 true。
offsetCenter: [0,"100%"],// 相对于仪表盘中心的偏移位置,数组第一项是水平方向的偏移,第二项是垂直方向的偏移。可以是绝对的数值,也可以是相对于仪表盘半径的百分比。
color: "auto", // 文字的颜色,默认 auto。
fontSize: 25, // 文字的字体大小,默认 15。
formatter: "日评指数 {value}", // 格式化函数或者字符串
},
data: [{
name: "",
value: JSON.parse(json).db_day,
}]
}
]
};
myChart_db_day.setOption(option_db_day);
myChart_db_day.on('click',function(){
showline('db_day');
});
var option_db_month = {
//backgroundColor: "#000",
tooltip: { // 本系列特定的 tooltip 设定。
show: true,
formatter: "{c}",
backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色。注意series.tooltip 仅在 tooltip.trigger 为 'item' 时有效。
borderColor: "#333", // 提示框浮层的边框颜色。...
borderWidth: 0, // 提示框浮层的边框宽。...
padding: 5, // 提示框浮层内边距单位px默认各方向内边距为5接受数组分别设定上右下左边距。...
textStyle: { // 提示框浮层的文本样式。...
// color ,fontStyle ,fontWeight ,fontFamily ,fontSize ,lineHeight ,.......
},
},
series: [
{
name: "单仪表盘示例", // 系列名称,用于tooltip的显示legend 的图例筛选,在 setOption 更新数据和配置项时用于指定对应的系列。
type: "gauge", // 系列类型
radius: "80%", // 参数:number, string。 仪表盘半径,默认 75% ,可以是相对于容器高宽中较小的一项的一半的百分比,也可以是绝对的数值。
center: ["50%", "55%"], // 仪表盘位置(圆心坐标)
startAngle: 225, // 仪表盘起始角度,默认 225。圆心 正右手侧为0度正上方为90度正左手侧为180度。
endAngle: -45, // 仪表盘结束角度,默认 -45
clockwise: true, // 仪表盘刻度是否是顺时针增长,默认 true。
min: 0, // 最小的数据值,默认 0 。映射到 minAngle。
max: 2, // 最大的数据值,默认 100 。映射到 maxAngle。
splitNumber: 4, // 仪表盘刻度的分割段数,默认 10。
axisLine: axisLine,
splitLine: splitLine,
axisTick: axisTick,
axisLabel: { // 刻度标签。
show: true, // 是否显示标签,默认 true。
distance: 18, // 标签与刻度线的距离,默认 5。
color: "rgb(255,255,255)", // 文字的颜色,默认 #fff。
fontSize: 20, // 文字的字体大小,默认 5。
formatter: "{value}", // 刻度标签的内容格式器,支持字符串模板和回调函数两种形式。 示例:// 使用字符串模板,模板变量为刻度默认标签 {value},如:formatter: '{value} kg'; // 使用函数模板,函数参数分别为刻度数值,如formatter: function (value) {return value + 'km/h';}
},
pointer: pointer,
itemStyle: itemStyle,
title: title,
detail: { // 仪表盘详情,用于显示数据。
show: true, // 是否显示详情,默认 true。
offsetCenter: [0,"100%"],// 相对于仪表盘中心的偏移位置,数组第一项是水平方向的偏移,第二项是垂直方向的偏移。可以是绝对的数值,也可以是相对于仪表盘半径的百分比。
color: "auto", // 文字的颜色,默认 auto。
fontSize: 25, // 文字的字体大小,默认 15。
formatter: "月评指数 {value}", // 格式化函数或者字符串
},
data: [{
name: "",
value: JSON.parse(json).db_month,
}]
}
]
};
myChart_db_month.setOption(option_db_month);
myChart_db_month.on('click',function(){
showline('db_month');
});
var option_db_year = {
//backgroundColor: "#000",
tooltip: { // 本系列特定的 tooltip 设定。
show: true,
formatter: "{c}",
backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色。注意series.tooltip 仅在 tooltip.trigger 为 'item' 时有效。
borderColor: "#333", // 提示框浮层的边框颜色。...
borderWidth: 0, // 提示框浮层的边框宽。...
padding: 5, // 提示框浮层内边距单位px默认各方向内边距为5接受数组分别设定上右下左边距。...
textStyle: { // 提示框浮层的文本样式。...
// color ,fontStyle ,fontWeight ,fontFamily ,fontSize ,lineHeight ,.......
},
},
series: [
{
name: "单仪表盘示例", // 系列名称,用于tooltip的显示legend 的图例筛选,在 setOption 更新数据和配置项时用于指定对应的系列。
type: "gauge", // 系列类型
radius: "80%", // 参数:number, string。 仪表盘半径,默认 75% ,可以是相对于容器高宽中较小的一项的一半的百分比,也可以是绝对的数值。
center: ["50%", "55%"], // 仪表盘位置(圆心坐标)
startAngle: 225, // 仪表盘起始角度,默认 225。圆心 正右手侧为0度正上方为90度正左手侧为180度。
endAngle: -45, // 仪表盘结束角度,默认 -45
clockwise: true, // 仪表盘刻度是否是顺时针增长,默认 true。
min: 0, // 最小的数据值,默认 0 。映射到 minAngle。
max: 2, // 最大的数据值,默认 100 。映射到 maxAngle。
splitNumber: 4, // 仪表盘刻度的分割段数,默认 10。
axisLine: axisLine,
splitLine: splitLine,
axisTick: axisTick,
axisLabel: { // 刻度标签。
show: true, // 是否显示标签,默认 true。
distance: 18, // 标签与刻度线的距离,默认 5。
color: "rgb(255,255,255)", // 文字的颜色,默认 #fff。
fontSize: 20, // 文字的字体大小,默认 5。
formatter: "{value}", // 刻度标签的内容格式器,支持字符串模板和回调函数两种形式。 示例:// 使用字符串模板,模板变量为刻度默认标签 {value},如:formatter: '{value} kg'; // 使用函数模板,函数参数分别为刻度数值,如formatter: function (value) {return value + 'km/h';}
},
pointer: pointer,
itemStyle: itemStyle,
title: title,
detail: { // 仪表盘详情,用于显示数据。
show: true, // 是否显示详情,默认 true。
offsetCenter: [0,"100%"],// 相对于仪表盘中心的偏移位置,数组第一项是水平方向的偏移,第二项是垂直方向的偏移。可以是绝对的数值,也可以是相对于仪表盘半径的百分比。
color: "auto", // 文字的颜色,默认 auto。
fontSize: 25, // 文字的字体大小,默认 15。
formatter: "年评指数 {value}", // 格式化函数或者字符串
},
data: [{
name: "",
value: JSON.parse(json).db_year,
}]
}
]
};
myChart_db_year.setOption(option_db_year);
myChart_db_year.on('click',function(){
showline('db_year');
});
// var option_nk_day = {
// //backgroundColor: "#000",
// tooltip: { // 本系列特定的 tooltip 设定。
// show: true,
// formatter: "{c}",
// backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色。注意series.tooltip 仅在 tooltip.trigger 为 'item' 时有效。
// borderColor: "#333", // 提示框浮层的边框颜色。...
// borderWidth: 0, // 提示框浮层的边框宽。...
// padding: 5, // 提示框浮层内边距单位px默认各方向内边距为5接受数组分别设定上右下左边距。...
// textStyle: { // 提示框浮层的文本样式。...
// // color ,fontStyle ,fontWeight ,fontFamily ,fontSize ,lineHeight ,.......
// },
// },
// series: [
// {
// name: "单仪表盘示例", // 系列名称,用于tooltip的显示legend 的图例筛选,在 setOption 更新数据和配置项时用于指定对应的系列。
// type: "gauge", // 系列类型
// radius: "80%", // 参数:number, string。 仪表盘半径,默认 75% ,可以是相对于容器高宽中较小的一项的一半的百分比,也可以是绝对的数值。
// center: ["50%", "55%"], // 仪表盘位置(圆心坐标)
// startAngle: 225, // 仪表盘起始角度,默认 225。圆心 正右手侧为0度正上方为90度正左手侧为180度。
// endAngle: -45, // 仪表盘结束角度,默认 -45
// clockwise: true, // 仪表盘刻度是否是顺时针增长,默认 true。
// min: 0, // 最小的数据值,默认 0 。映射到 minAngle。
// max: 2, // 最大的数据值,默认 100 。映射到 maxAngle。
// splitNumber: 4, // 仪表盘刻度的分割段数,默认 10。
// axisLine: axisLine,
// splitLine: splitLine,
// axisTick: axisTick,
// axisLabel: { // 刻度标签。
// show: true, // 是否显示标签,默认 true。
// distance: 2, // 标签与刻度线的距离,默认 5。
// color: "rgb(255,255,255)", // 文字的颜色,默认 #fff。
// fontSize: 10, // 文字的字体大小,默认 5。
// formatter: "{value}", // 刻度标签的内容格式器,支持字符串模板和回调函数两种形式。 示例:// 使用字符串模板,模板变量为刻度默认标签 {value},如:formatter: '{value} kg'; // 使用函数模板,函数参数分别为刻度数值,如formatter: function (value) {return value + 'km/h';}
// },
// pointer: pointer,
// itemStyle: itemStyle,
// title: title,
// detail: { // 仪表盘详情,用于显示数据。
// show: true, // 是否显示详情,默认 true。
// offsetCenter: [0,"100%"],// 相对于仪表盘中心的偏移位置,数组第一项是水平方向的偏移,第二项是垂直方向的偏移。可以是绝对的数值,也可以是相对于仪表盘半径的百分比。
// color: "auto", // 文字的颜色,默认 auto。
// fontSize: 15, // 文字的字体大小,默认 15。
// formatter: "日评指数 {value}", // 格式化函数或者字符串
// },
// data: [{
// name: "",
// value: JSON.parse(json).nk_day,
// }]
// }
// ]
// };
// myChart_nk_day.setOption(option_nk_day);
// myChart_nk_day.on('click',function(){
// showline('nk_day');
// });
// var option_nk_month = {
// //backgroundColor: "#000",
// tooltip: { // 本系列特定的 tooltip 设定。
// show: true,
// formatter: "{c}",
// backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色。注意series.tooltip 仅在 tooltip.trigger 为 'item' 时有效。
// borderColor: "#333", // 提示框浮层的边框颜色。...
// borderWidth: 0, // 提示框浮层的边框宽。...
// padding: 5, // 提示框浮层内边距单位px默认各方向内边距为5接受数组分别设定上右下左边距。...
// textStyle: { // 提示框浮层的文本样式。...
// // color ,fontStyle ,fontWeight ,fontFamily ,fontSize ,lineHeight ,.......
// },
// },
// series: [
// {
// name: "单仪表盘示例", // 系列名称,用于tooltip的显示legend 的图例筛选,在 setOption 更新数据和配置项时用于指定对应的系列。
// type: "gauge", // 系列类型
// radius: "80%", // 参数:number, string。 仪表盘半径,默认 75% ,可以是相对于容器高宽中较小的一项的一半的百分比,也可以是绝对的数值。
// center: ["50%", "55%"], // 仪表盘位置(圆心坐标)
// startAngle: 225, // 仪表盘起始角度,默认 225。圆心 正右手侧为0度正上方为90度正左手侧为180度。
// endAngle: -45, // 仪表盘结束角度,默认 -45
// clockwise: true, // 仪表盘刻度是否是顺时针增长,默认 true。
// min: 0, // 最小的数据值,默认 0 。映射到 minAngle。
// max: 2, // 最大的数据值,默认 100 。映射到 maxAngle。
// splitNumber: 4, // 仪表盘刻度的分割段数,默认 10。
// axisLine: axisLine,
// splitLine: splitLine,
// axisTick: axisTick,
// axisLabel: { // 刻度标签。
// show: true, // 是否显示标签,默认 true。
// distance: 2, // 标签与刻度线的距离,默认 5。
// color: "rgb(255,255,255)", // 文字的颜色,默认 #fff。
// fontSize: 10, // 文字的字体大小,默认 5。
// formatter: "{value}", // 刻度标签的内容格式器,支持字符串模板和回调函数两种形式。 示例:// 使用字符串模板,模板变量为刻度默认标签 {value},如:formatter: '{value} kg'; // 使用函数模板,函数参数分别为刻度数值,如formatter: function (value) {return value + 'km/h';}
// },
// pointer: pointer,
// itemStyle: itemStyle,
// title: title,
// detail: { // 仪表盘详情,用于显示数据。
// show: true, // 是否显示详情,默认 true。
// offsetCenter: [0,"100%"],// 相对于仪表盘中心的偏移位置,数组第一项是水平方向的偏移,第二项是垂直方向的偏移。可以是绝对的数值,也可以是相对于仪表盘半径的百分比。
// color: "auto", // 文字的颜色,默认 auto。
// fontSize: 15, // 文字的字体大小,默认 15。
// formatter: "月评指数 {value}", // 格式化函数或者字符串
// },
// data: [{
// name: "",
// value: JSON.parse(json).nk_month,
// }]
// }
// ]
// };
// myChart_nk_month.setOption(option_nk_month);
// myChart_nk_month.on('click',function(){
// showline('nk_month');
// });
// var option_nk_year = {
// //backgroundColor: "#000",
// tooltip: { // 本系列特定的 tooltip 设定。
// show: true,
// formatter: "{c}",
// backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色。注意series.tooltip 仅在 tooltip.trigger 为 'item' 时有效。
// borderColor: "#333", // 提示框浮层的边框颜色。...
// borderWidth: 0, // 提示框浮层的边框宽。...
// padding: 5, // 提示框浮层内边距单位px默认各方向内边距为5接受数组分别设定上右下左边距。...
// textStyle: { // 提示框浮层的文本样式。...
// // color ,fontStyle ,fontWeight ,fontFamily ,fontSize ,lineHeight ,.......
// },
// },
// series: [
// {
// name: "单仪表盘示例", // 系列名称,用于tooltip的显示legend 的图例筛选,在 setOption 更新数据和配置项时用于指定对应的系列。
// type: "gauge", // 系列类型
// radius: "80%", // 参数:number, string。 仪表盘半径,默认 75% ,可以是相对于容器高宽中较小的一项的一半的百分比,也可以是绝对的数值。
// center: ["50%", "55%"], // 仪表盘位置(圆心坐标)
// startAngle: 225, // 仪表盘起始角度,默认 225。圆心 正右手侧为0度正上方为90度正左手侧为180度。
// endAngle: -45, // 仪表盘结束角度,默认 -45
// clockwise: true, // 仪表盘刻度是否是顺时针增长,默认 true。
// min: 0, // 最小的数据值,默认 0 。映射到 minAngle。
// max: 2, // 最大的数据值,默认 100 。映射到 maxAngle。
// splitNumber: 4, // 仪表盘刻度的分割段数,默认 10。
// axisLine: axisLine,
// splitLine: splitLine,
// axisTick: axisTick,
// axisLabel: { // 刻度标签。
// show: true, // 是否显示标签,默认 true。
// distance: 2, // 标签与刻度线的距离,默认 5。
// color: "rgb(255,255,255)", // 文字的颜色,默认 #fff。
// fontSize: 10, // 文字的字体大小,默认 5。
// formatter: "{value}", // 刻度标签的内容格式器,支持字符串模板和回调函数两种形式。 示例:// 使用字符串模板,模板变量为刻度默认标签 {value},如:formatter: '{value} kg'; // 使用函数模板,函数参数分别为刻度数值,如formatter: function (value) {return value + 'km/h';}
// },
// pointer: pointer,
// itemStyle: itemStyle,
// title: title,
// detail: { // 仪表盘详情,用于显示数据。
// show: true, // 是否显示详情,默认 true。
// offsetCenter: [0,"100%"],// 相对于仪表盘中心的偏移位置,数组第一项是水平方向的偏移,第二项是垂直方向的偏移。可以是绝对的数值,也可以是相对于仪表盘半径的百分比。
// color: "auto", // 文字的颜色,默认 auto。
// fontSize: 15, // 文字的字体大小,默认 15。
// formatter: "年评指数 {value}", // 格式化函数或者字符串
// },
// data: [{
// name: "",
// value: JSON.parse(json).nk_year,
// }]
// }
// ]
// };
// myChart_nk_year.setOption(option_nk_year);
// myChart_nk_year.on('click',function(){
// showline('nk_year');
// });
});
var k = 0;
var showline = function (type) {
k+=1;
$.get(ext.contextPath + '/evaluation/show/showline.do', {type:type,k:k}, function (data) {
if(data == 'fail'){
swal('最近无数据!');
}else{
$("#subDiv").html(data);
openModal('subModal');
}
});
}
var show = function(type){
$.get(ext.contextPath + '/evaluation/criterion/showCriterion.do', {type:type}, function (data) {
$("#subDiv").html(data);
openModal('subModal');
});
}
</script>
</head>
<body onload="initMenu()" class="hold-transition ${cu.themeclass} sidebar-mini" style="background-color:rgba(255,255,255,0.1);height: 500px;">
<div class="wrapper">
<!-- 引用top -->
<%--<jsp:include page="/jsp/side.jsp"></jsp:include> --%>
<!-- 菜单栏 -->
<%-- <jsp:include page="/jsp/left.jsp"></jsp:include> --%>
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<%-- <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>--%>
<!-- Main content -->
<section class="content container-fluid footer">
<div id="mainAlertdiv"></div>
<div id="subDiv"></div>
<div id="subDivSelect"></div>
<%-- <div>--%>
<%-- <div style="height: 200px;width: 100%;text-align: center;float: right;margin-top: -10px;">--%>
<%-- <table class="table table-bordered" style="width: 30%;float: right;margin-right: 45px;">--%>
<%-- <caption style="text-align: center;"><font size="3" color="black"><b>&nbsp;&nbsp;评价指数值对应级别&nbsp;&nbsp;</b></font></caption>--%>
<%-- <thead>--%>
<%-- <tr align="center" style="background-color: rgb(64,75,87);color: white;">--%>
<%-- <td><font size="3"><b>指数值</b></font></td>--%>
<%-- <td><font size="3"><b>评价级别</b></font></td>--%>
<%-- </tr>--%>
<%-- </thead>--%>
<%-- <tbody>--%>
<%-- <tr style="background-color: rgba(64,75,87,0.5);color: white;">--%>
<%-- <td> <font size="3"><b>< 0.5</b></font></td>--%>
<%-- <td><font size="3"><b>1级</b></font></td>--%>
<%-- </tr>--%>
<%-- <tr style="background-color: rgb(64,75,87);color: white;">--%>
<%-- <td><font size="3"><b>0.5~1.0</b></font></td>--%>
<%-- <td><font size="3"><b>2级合格</b></font></td>--%>
<%-- </tr>--%>
<%-- <tr style="background-color: rgba(64,75,87,0.5);color: white;">--%>
<%-- <td><font size="3"><b>>1.0</b></font></td>--%>
<%-- <td><font size="3"><b>3级不合格</b></font></td>--%>
<%-- </tr>--%>
<%-- </tbody>--%>
<%-- </table>--%>
<%-- </div>--%>
<%-- <div class="divframe_bottom_num" style="float: left;width: 100%;">--%>
<%-- <div style="width:32%; height: 400px;float: left;background-color: rgb(64,75,87);">--%>
<%-- <div style="width: 40%;height: 15%;text-align: center;line-height: 30px;padding-top: 25px;float: left;"><button style="border:1px solid rgb(43,218,219);color: rgb(43,218,219);border-radius: 5px;background-color: rgb(64,75,87);" onclick="show(1)">国家标准限值</button></div>--%>
<%-- <div style="width: 60%;height: 15%;text-align: left;line-height: 30px;padding-top: 25px;float: left;"><font size="6" color="white">国家标准</font></div>--%>
<%-- <div id="myChart_gb_day" style="width:33%; height: 40%;float: left;margin-top: 10%;" onclick="showline('gb_day');"></div>--%>
<%-- <div id="myChart_gb_month" style="width:33%; height: 40%;float: left;margin-top: 10%;" onclick="showline('gb_month');"></div>--%>
<%-- <div id="myChart_gb_year" style="width:33%; height: 40%;float: left;margin-top: 10%;" onclick="showline('gb_year');"></div>--%>
<%-- <!-- <div style="width: 33%;height: 20%;text-align: center;float: left;"><font size="5" color="white">日评指数</font></div>--%>
<%-- <div style="width: 33%;height: 20%;text-align: center;float: left;"><font size="5" color="white">月评指数</font></div>--%>
<%-- <div style="width: 33%;height: 20%;text-align: center;float: left;"><font size="5" color="white">年评指数</font></div> -->--%>
<%-- </div>--%>
<%-- <div style="width:32%; height: 400px;float: left;background-color: rgb(64,75,87);margin-left: 1%;">--%>
<%-- <div style="width: 40%;height: 15%;text-align: center;line-height: 30px;padding-top: 25px;float: left;"><button style="border:1px solid rgb(43,218,219);color: rgb(43,218,219);border-radius: 5px;background-color: rgb(64,75,87);" onclick="show(2)"><b>地方标准限值</b></button></div>--%>
<%-- <div style="width: 60%;height: 15%;text-align: left;line-height: 30px;padding-top: 25px;float: left;"><font size="6" color="white">地方标准</font></div>--%>
<%-- <div id="myChart_db_day" style="width:33%; height: 40%;float: left;margin-top: 10%;" onclick="showline('db_day');"></div>--%>
<%-- <div id="myChart_db_month" style="width:33%; height: 40%;float: left;margin-top: 10%;" onclick="showline('db_month');"></div>--%>
<%-- <div id="myChart_db_year" style="width:33%; height: 40%;float: left;margin-top: 10%;" onclick="showline('db_year');"></div>--%>
<%-- <!-- <div style="width: 33%;height: 20%;text-align: center;float: left;"><font size="5" color="white">日评指数</font></div>--%>
<%-- <div style="width: 33%;height: 20%;text-align: center;float: left;"><font size="5" color="white">月评指数</font></div>--%>
<%-- <div style="width: 33%;height: 20%;text-align: center;float: left;"><font size="5" color="white">年评指数</font></div> -->--%>
<%-- </div>--%>
<%-- <div style="width:32%; height: 400px;float: left;background-color: rgb(64,75,87);margin-left: 1%;">--%>
<%-- <div style="width: 40%;height: 15%;text-align: center;line-height: 30px;padding-top: 25px;float: left;"><button style="border:1px solid rgb(43,218,219);color: rgb(43,218,219);border-radius: 5px;background-color: rgb(64,75,87);" onclick="show(3)">内控标准限值</button></div>--%>
<%-- <div style="width: 60%;height: 15%;text-align: left;line-height: 30px;padding-top: 25px;float: left;"><font size="6" color="white">内控标准</font></div>--%>
<%-- <div id="myChart_nk_day" style="width:33%; height: 40%;float: left;margin-top: 10%;" onclick="showline('nk_day');"></div>--%>
<%-- <div id="myChart_nk_month" style="width:33%; height: 40%;float: left;margin-top: 10%;" onclick="showline('nk_month');"></div>--%>
<%-- <div id="myChart_nk_year" style="width:33%; height: 40%;float: left;margin-top: 10%;" onclick="showline('nk_year');"></div>--%>
<%-- <!-- <div style="width: 33%;height: 20%;text-align: center;float: left;"><font size="5" color="white">日评指数</font></div>--%>
<%-- <div style="width: 33%;height: 20%;text-align: center;float: left;"><font size="5" color="white">月评指数</font></div>--%>
<%-- <div style="width: 33%;height: 20%;text-align: center;float: left;"><font size="5" color="white">年评指数</font></div> -->--%>
<%-- </div>--%>
<%-- </div>--%>
<%-- </div>--%>
<div style="float: left;width: 100%;height: 640px;background-color: rgb(64,75,87);border-radius: 25px;">
<!-- <div style="width:26%; height: 640px;float: left;border-right: white 1px solid;">
<div style="width: 60%;height: 15%;text-align: right;line-height: 30px;padding-top: 50px;float: left;"><font size="12" face="宋体" color="white"><b>&nbsp;&nbsp;国家标准</b></font></div>
<div style="width: 40%;height: 15%;text-align: center;line-height: 30px;padding-top: 50px;float: left;"><button style="border:1px solid rgb(43,218,219);color: rgb(43,218,219);border-radius: 5px;background-color: rgb(64,75,87);" onclick="show(1)">标准内控值</button></div>
<div id="myChart_gb_day" style="width:33%; height: 40%;float: left;margin-top: 10%;" onclick="showline('gb_day');"></div>
<div id="myChart_gb_month" style="width:33%; height: 40%;float: left;margin-top: 10%;margin-left: 0.1px;" onclick="showline('gb_month');"></div>
<div id="myChart_gb_year" style="width:33%; height: 40%;float: left;margin-top: 10%;margin-left: 0.1px;" onclick="showline('gb_year');"></div>
</div> -->
<div style="width:78%; height: 640px;float: left;margin-left: 1%;border-right: white 1px solid;">
<div style="width: 60%;height: 15%;text-align: right;line-height: 30px;padding-top: 50px;float: left;"><font size="12" face="宋体" color="white"><b>&nbsp;地方标准</b></font></div>
<div style="width: 40%;height: 15%;text-align: center;line-height: 30px;padding-top: 50px;float: left;"><button style="border:1px solid rgb(43,218,219);color: rgb(43,218,219);border-radius: 5px;background-color: rgb(64,75,87);" onclick="show(2)"><b>标准内控值</b></button></div>
<div id="myChart_db_day" style="width:33%; height: 70%;float: left;" onclick="showline('db_day');"></div>
<div id="myChart_db_month" style="width:33%; height: 70%;float: left;" onclick="showline('db_month');"></div>
<div id="myChart_db_year" style="width:33%; height: 70%;float: left;" onclick="showline('db_year');"></div>
</div>
<!-- <div style="width:78%; height: 640px;float: left;margin-left: 1%;border-right: white 1px solid;">
<div style="width: 60%;height: 15%;text-align: right;line-height: 30px;padding-top: 50px;float: left;"><font size="12" face="宋体" color="white"><b>&nbsp;内控标准</b></font></div>
<div style="width: 40%;height: 15%;text-align: center;line-height: 30px;padding-top: 50px;float: left;"><button style="border:1px solid rgb(43,218,219);color: rgb(43,218,219);border-radius: 5px;background-color: rgb(64,75,87);" onclick="show(3)">标准内控值</button></div>
<div id="myChart_nk_day" style="width:33%; height: 40%;float: left;margin-top: 10%;" onclick="showline('nk_day');"></div>
<div id="myChart_nk_month" style="width:33%; height: 40%;float: left;margin-top: 10%;" onclick="showline('nk_month');"></div>
<div id="myChart_nk_year" style="width:33%; height: 40%;float: left;margin-top: 10%;" onclick="showline('nk_year');"></div>
</div> -->
<div style="float: right;width: 18%;height: 640px;margin-right: 1%;">
<table style=" width: 90%; margin-top: 25px; padding-top: 30px;">
<caption style="text-align: center;"><font size="12" style="color: white;"><b>评价指数值对应级别</b></font></caption>
<tr style="background-color: black;color: white;margin-top: 10%;">
<td style="text-align:center"><font size="12"><b>指数值</b></font></td>
<td style="text-align:center"><font size="12" ><b>评价级别</b></font></td>
</tr>
<tr style="background-color: rgb(64,75,87); height:100px;">
<td style="text-align:center"> <font size="12" style="color: white;"><b>< 0.5</b></font></td>
<td style="text-align:center"><font size="12" style="color: limegreen;"><b>1级 优秀</b></font></td>
</tr>
<tr style="background-color: rgb(64,75,87); height:100px;">
<td style="text-align:center"><font size="12" style="color: white;"><b>0.5~1.0</b></font></td>
<td style="text-align:center"><font size="12" style="color: goldenrod;"><b>2级 合格</b></font></td>
</tr>
<tr style="background-color: rgb(64,75,87); height:100px;">
<td style="text-align:center"><font size="12" style="color: white;"><b>>1.0</b></font></td>
<td style="text-align:center"><font size="12" style="color: red;"><b>3级 不合格</b></font></td>
</tr>
</table>
</div>
</div>
</section>
<!-- /.content -->
</div>
<%-- <jsp:include page="/jsp/bottom.jsp"></jsp:include> --%>
<jsp:include page="/jsp/side.jsp"></jsp:include>
</div>
</body>
</html>