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

602 lines
26 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 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" %>
<%@page import="com.sipai.entity.scada.ProAlarmBaseText" %>
<%request.setAttribute("AdoptSt_True", ProAlarmBaseText.AdoptSt_True); %>
<%request.setAttribute("AdoptSt_False", ProAlarmBaseText.AdoptSt_False); %>
<!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">
var beginTimeStore = '';
var endTimeStore = '';
var beginTimeStore2 = '';
// var endTimeStore2 = '';
let colors = ['#3AA1FF', '#59D4D4', '#6DD48C', '#FBDB5A',
"#2ec7c9",
"#b6a2de",
"#5ab1ef",
"#ffb980",
"#d87a80",
"#8d98b3",
"#e5cf0d",
"#97b552",
"#95706d",
"#dc69aa",
"#07a2a4",
"#9a7fd1",
"#588dd5",
"#f5994e",
"#c05050",
"#59678c",
"#c9ab00",
"#7eb00a",
"#6f5553",
"#c14089"];
$(function () {
let bodyWidth = $(window).width();
let bodyHeight = $(window).height();
// var bodyWidth = global_width;
// var bodyHeight = global_height;
$('#main').css('width', bodyWidth);
$('#main').css('height', bodyHeight);
initDate();
initDate2();
dosearch2();
$.ajax({
type: 'GET',
url: ext.contextPath + "/process/decisionExpertBase/get4SelectPidJson.do",
async: false,
globle: false,
data: {unitId: unitId},
dataType: 'json',
error: function () {
return false;
},
success: function (data) {
$("#zdType").empty();
var selelct_ = $("#zdType").select2({
data: data,
cache: false,
placeholder: '请选择',//默认文字提示
allowClear: true,//允许清空
escapeMarkup: function (markup) {
return markup;
}, // 自定义格式化防止xss注入
language: "zh-CN",
minimumInputLength: 0,
minimumResultsForSearch: 10,//数据超过十个启用搜索框
formatResult: function formatRepo(repo) {
return repo.text;
}, // 函数用来渲染结果
formatSelection: function formatRepoSelection(repo) {
return repo.text;
} // 函数用于呈现当前的选择
});
$(".select2-selection--single").css({'height': '30px', 'paddingTop': '4px'})
selelct_.val('${param.zdType}').trigger("change");
selelct_.on("change", function (e) {
$("#table").bootstrapTable('refresh');
});
}
});
var data_adoptSt = [{ id: '${AdoptSt_True}', text: '采纳' }, { id: '${AdoptSt_False}', text: '未采纳' }];
var selelct_adoptSt = $("#adoptSt").select2({
data: data_adoptSt,
cache: false,
placeholder: '请选择',//默认文字提示
allowClear: true,//允许清空
escapeMarkup: function (markup) {
return markup;
}, // 自定义格式化防止xss注入
language: "zh-CN",
minimumInputLength: 0,
minimumResultsForSearch: 10,//数据超过十个启用搜索框
formatResult: function formatRepo(repo) {
return repo.text;
}, // 函数用来渲染结果
formatSelection: function formatRepoSelection(repo) {
return repo.text;
} // 函数用于呈现当前的选择
});
$(".select2-selection--single").css({'height': '30px', 'paddingTop': '4px'})
selelct_adoptSt.val('${param.adoptSt}').trigger("change");
selelct_adoptSt.on("change", function (e) {
$("#table").bootstrapTable('refresh');
});
$("#table").bootstrapTable({ // 对应table标签的id
url: ext.contextPath + '/alarm/proAlarmBaseText/getList.do', // 获取表格数据的url
cache: false, // 设置为 false 禁用 AJAX 数据缓存, 默认为true
striped: true, //表格显示条纹默认为false
pagination: true, // 在表格底部显示分页组件默认false
pageList: [10, 20, 50], // 设置页面可以显示的数据条数
pageSize: 50, // 页面数据条数
pageNumber: 1, // 首页页码
sidePagination: 'server', // 设置为服务器端分页
queryParams: function (params) { // 请求服务器数据时发送的参数可以在这里添加额外的查询参数返回false则终止请求
return {
rows: params.limit, // 每页要显示的数据条数
page: params.offset / params.limit + 1, // 每页显示数据的开始页码
sort: params.sort, // 要排序的字段
order: params.order,
unitId: unitId,
sdt: beginTimeStore,
edt: endTimeStore,
adoptSt: $("#adoptSt").val(),
zdType: $("#zdType").val()
}
},
sortName: 'insdt', // 要排序的字段
sortOrder: 'desc', // 排序规则
onClickRow: function (row) {//单击行事件,执行查看功能
// viewFun(row.id);
},
columns: [
// {
// checkbox: true, // 显示一个勾选框
// },
{
field: 'pointName', // 返回json数据中的name
title: '问题项', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle', // 上下居中
formatter: function (value, row, index) {
if (row.proAlarm != null) {
return row.proAlarm.pointName
} else {
return "未关联报警点"
}
}
},
{
field: 'describe', // 返回json数据中的name
title: '问题描述', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle', // 上下居中
formatter: function (value, row, index) {
if (row.proAlarm != null) {
return row.proAlarm.describe
} else {
return "未关联报警点"
}
}
},
{
field: 'zdTypeName', // 返回json数据中的name
title: '诊断类型', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle' // 上下居中
},
{
field: 'alarmTime', // 返回json数据中的name
title: '诊断时间', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle', // 上下居中
formatter: function (value, row, index) {
if (row.proAlarm != null) {
return row.proAlarm.alarmTime.substring(0, 16)
} else {
return "未关联报警点"
}
}
},
{
field: 'decisionexpertbasetext', // 返回json数据中的name
title: '专家建议', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle' // 上下居中
},
{
field: 'adoptSt', // 返回json数据中的name
title: '状态', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle', // 上下居中
formatter: function (value, row, index) {
if (value == '${AdoptSt_True}') {
return "采纳"
} else {
return "未采纳"
}
}
}, {
title: "操作",
align: 'center',
valign: 'middle',
width: 120, // 定义列的宽度单位为像素px
formatter: function (value, row, index) {
var buts = '';
buts += '<button class="btn btn-default btn-sm" title="采纳" onclick="downOrder(\'' + row.id + '\')"><i class="fa fa-check"></i><span class="hidden-md hidden-lg"> 采纳</span></button>';
buts = '<div class="btn-group" >' + buts + '</div>';
return buts;
}
}
],
onLoadSuccess: function () { //加载成功时执行
adjustBootstrapTableView("table");
},
onLoadError: function () { //加载失败时执行
console.info("加载数据失败");
}
});
});
function downOrder(id) {
swal({
text: "您确定要采纳此记录?",
dangerMode: true,
buttons: {
cancel: {
text: "取消",
value: null,
visible: true,
className: "btn btn-default btn-sm",
closeModal: true,
},
confirm: {
text: "确定",
value: true,
visible: true,
className: "btn btn-danger btn-sm",
closeModal: true
}
}
})
.then(function (willDelete) {
if (willDelete) {
$.post(ext.contextPath + "/alarm/proAlarmBaseText/downOrder.do", {
id: id,
unitId: unitId
}, function (data) {
$("#table").bootstrapTable('refresh');
}, 'json');
}
});
}
function initDate() {
//定义locale汉化插件
// beginTimeStore = moment().subtract(7, 'days').format('YYYY-MM-DD HH:mm');
beginTimeStore = moment().subtract(30, 'days').format('YYYY-MM-DD') + ' 00:00';
endTimeStore = moment().subtract(0, 'days').format('YYYY-MM-DD') + ' 23:59';
var locale = {
"format": 'YYYY-MM-DD HH:mm',
"separator": " ~ ",
"applyLabel": "确定",
"cancelLabel": "取消",
"fromLabel": "起始时间",
"toLabel": "结束时间'",
"customRangeLabel": "自定义",
"weekLabel": "W",
"daysOfWeek": ["日", "一", "二", "三", "四", "五", "六"],
"monthNames": ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
"firstDay": 1
};
$('#reservationtimeMain').daterangepicker({
"timePicker": true,
"timePicker24Hour": true,
"linkedCalendars": false,
"autoUpdateInput": false,
"timePickerIncrement": 10,
"locale": locale,
//汉化按钮部分
ranges: {
// '今日': [moment(), moment().subtract(-1, 'days')],
'昨日': [moment().subtract(1, 'days'), moment()],
'最近7日': [moment().subtract(6, 'days'), moment().subtract(-1, 'days')],
'本月': [moment().startOf('month'), moment().endOf('month').subtract(-1, 'days')],
'上月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month').subtract(-1, 'days')]
},
startDate: beginTimeStore,
endDate: endTimeStore
}, function (start, end, label) {
beginTimeStore = start.format(this.locale.format);
endTimeStore = end.format(this.locale.format);
if (!this.startDate) {
this.element.val('');
} else {
this.element.val(this.startDate.format(this.locale.format) + this.locale.separator + this.endDate.format(this.locale.format));
}
});
$('#reservationtimeMain').val(beginTimeStore + locale.separator + endTimeStore);
};
function initDate2() {
beginTimeStore2 = moment().subtract(0, 'days').format("YYYY");
$('#reservationtime2').datetimepicker({
startView: 4,//日期时间选择器打开之后首先显示的视图。 可接受的值0 - 小时 视图1 - 天 视图2 - 月 视图3 - 年 视图4 - 十年 视图
minView: 4,//Number, String. 默认值0, hour日期时间选择器所能够提供的最精确的时间选择视图
autoclose: true,//当选择一个日期之后是否立即关闭此日期时间选择器
todayBtn: true,//在日期时间选择器组件的底部显示一个 “Today” 按钮用以选择当前日期
format: 'yyyy'//日期显示格式
});
$('#reservationtime2').val(beginTimeStore2);
};
//模糊查询列表中的数据
var dosearch = function () {
$("#table").bootstrapTable('refresh');
};
//展示数据
var dosearch2 = function () {
// console.log($('#reservationtime2').val() + "-01-01")
$.post(ext.contextPath + "/alarm/proAlarmBaseText/getStatisticalData.do", {
unitId: unitId,
statisticalDate: $('#reservationtime2').val() + "-01-01"
}, function (data) {
// console.log(data)
let pieData = [];
let totalNum = 0;
let trueNum = 0;
let falseNum = 0;
for (let i = 0; i < data.length; i++) {
let forData = data[i];
pieData.push({
name: forData.name,
value: forData.totalNum
})
totalNum += forData.totalNum;
trueNum += forData.trueNum;
falseNum += forData.falseNum;
}
$('#totalNum').text(totalNum);
$('#trueNum').text(trueNum);
if (totalNum > 0) {
$('#truePercent').text(((trueNum / totalNum) * 100).toFixed(0));
} else {
$('#truePercent').text(0);
}
let typeTableHtml = "";
typeTableHtml += "<table style=\"width: 100%;height: 100%;text-align: center;\">";
typeTableHtml += "<tr >";
for (let i = 0; i < data.length; i++) {
let forData = data[i];
typeTableHtml += "<td style='color: #9F9F9F;'>" + forData.name + "<br>采纳次数</td>";
}
typeTableHtml += "</tr>";
typeTableHtml += "<tr >";
for (let i = 0; i < data.length; i++) {
let forData = data[i];
typeTableHtml += "<td style=\"color: " + colors[i] + ";font-size: 30px;\">" + forData.trueNum + "</td>";
}
typeTableHtml += "</tr>";
typeTableHtml += "<tr >";
for (let i = 0; i < data.length; i++) {
// let forData = data[i];
typeTableHtml += "<td style='color: #9F9F9F;'>被采纳率</td>";
}
typeTableHtml += "</tr>";
typeTableHtml += "<tr >";
for (let i = 0; i < data.length; i++) {
let forData = data[i];
if (forData.totalNum > 0) {
typeTableHtml += "<td ><span style='font-size: 30px;'>" + ((forData.trueNum / forData.totalNum) * 100).toFixed(0) + "</span><span style='font-size: 18px;'>%</span></td>";
} else {
typeTableHtml += "<td ><span style='font-size: 30px;'>0</span><span style='font-size: 18px;'>%</span></td>";
}
}
typeTableHtml += "</tr>";
typeTableHtml += "</table>";
$('#typeTableHtml').html(typeTableHtml);
getPieChart(pieData);
}, 'json');
$.post(ext.contextPath + "/alarm/proAlarmBaseText/getBarData.do", {
unitId: unitId,
statisticalDate: $('#reservationtime2').val() + "-01-01"
}, function (data) {
// console.log(data)
getBarChart(data[0], data[1]);
}, 'json');
};
function getPieChart(data) {
let myChart = echarts.init(document.getElementById("chart1"));
let option = {
color: colors,
tooltip: {
trigger: 'item'
},
legend: {
bottom: '10px'
},
series: [
{
name: '问题占比',
type: 'pie',
radius: '50%',
center: ['50%', '40%'],
data: data,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
myChart.setOption(option, true);
}
function getBarChart(data1, data2) {
let myChart = echarts.init(document.getElementById("chart2"));
let option = {
color: ['#DADADA', '#26B2FF'],
tooltip: {
trigger: 'axis'
},
legend: {
bottom: '10px'
},
grid: {
left: '2%', // 与容器左侧的距离
right: '2%', // 与容器右侧的距离
top: '8%', // 与容器顶部的距离
bottom: '45px', // 与容器底部的距离
containLabel: true
},
xAxis: [
{
type: 'category',
// axisLabel:{
// formatter:'{yyyy}-{MM}'
// }
data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '建议次数',
type: 'bar',
data: data2
},
{
name: '被采纳次数',
type: 'bar',
data: data1
}
]
};
console.log(option)
myChart.setOption(option, true);
}
</script>
</head>
<body onload="initMenu()" class="hold-transition ${cu.themeclass} sidebar-mini">
<div id="main" style="background-color: #ecf0f5;padding: 5px;">
<div style="float:left;width: 100%;height:calc((100% - 10px)*0.4);background-color: #fff;">
<div style="float:left;width: 30%;height:100%;">
<div style="float:left;width: 100%;height:45px;padding-left: 20px;padding-top: 5px;">
<div class="input-group input-group-sm">
<input type="text" class="form-control pull-left" id="reservationtime2"
style="width:80px">
<div class="input-group-btn" style="float: left;">
<button class="btn btn-default" onclick="dosearch2();"><i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
<div id="chart1" style="float:left;width: 100%;height:calc(100% - 45px);">
</div>
</div>
<div style="float:left;width: 30%;height:100%;padding: 10px;">
<div style="float: left;width: 100%;height:33.3%;border-top:1px solid rgba(232, 232, 232, 1);border-bottom:1px solid rgba(232, 232, 232, 1);">
<table style="width: 100%;height: 100%;">
<tr style="text-align: center;">
<td>总建议次数</td>
<td>被采纳次数</td>
<td>被采纳率</td>
</tr>
<tr style="font-size: 40px;font-weight: 700;text-align: center;">
<td id="totalNum" style="color: #D4D4D4;"></td>
<td id="trueNum" style="color: #00A5FF;"></td>
<td style="color: #00A5FF;"><span id="truePercent" style="font-size: 40px;"></span><span
style="font-size: 20px;">%</span></td>
</tr>
</table>
</div>
<div id="typeTableHtml" style="float: left;width: 100%;height:66.6%;">
</div>
</div>
<div id="chart2" style="float:left;width: 40%;height:100%;"></div>
</div>
<div style="float:left;width: 100%;height:10px;">
</div>
<div style="float:left;width: 100%;height:calc((100% - 10px)*0.6);">
<div id="mainAlertdiv"></div>
<div id="subDiv"></div>
<div id="user4SelectDiv"></div>
<div class="form-group form-inline" style="padding:0;height: 15px;">
<div class="form-group pull-left">
<div class="input-group input-group-sm">
<input type="text" class="form-control pull-left" id="reservationtimeMain"
style="width:230px">
<div class="input-group-btn">
<button class="btn btn-default" onclick="dosearch();"><i class="fa fa-search"></i>
</button>
</div>
</div>
<div class="input-group input-group-sm " style="width: 240px;">
<label class="col-sm-4 control-label"
style="padding:0px 10px 0px 10px;line-height:30px;">诊断类型</label>
<div class="col-sm-8 control-label" style="padding: 0px;">
<select class="form-control select2 " id="zdType" name="zdType"
style="width: 130px;height: 30px;"></select>
</div>
</div>
<div class="input-group input-group-sm " style="width: 240px;">
<label class="col-sm-4 control-label"
style="padding:0px 10px 0px 10px;line-height:30px;">状态</label>
<div class="col-sm-8 control-label" style="padding: 0px;">
<select class="form-control select2 " id="adoptSt" name="adoptSt"
style="width: 130px;height: 30px;"></select>
</div>
</div>
</div>
</div>
<br>
<table id="table"></table>
</div>
</div>
</body>
<!-- 引入daterangepicker-->
<link rel="stylesheet" href="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/daterangepicker.css"/>
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/moment.min.js"
charset="utf-8"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/daterangepicker.js"
charset="utf-8"></script>
</html>