Files
SIPAIIS_WMS_JSSW/WebRoot/jsp/command/equipmentDeployOverview.jsp

750 lines
23 KiB
Plaintext
Raw Permalink Normal View History

2026-01-16 14:13:44 +08:00
<%@ 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>
<!-- 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>
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/echarts/echarts.js" charset="utf-8"></script>
<!-- <link href="<%=request.getContextPath()%>/node_modules/bootstrap-datepicker/dist/css/bootstrap-datepicker3.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<%=request.getContextPath()%>/node_modules/bootstrap-datepicker/js/bootstrap-datepicker.js" ></script> -->
<style type="text/css">
/*
顶部div
*/
.top_div {
width: 98%;
height: 35px;
margin-left:1%;
margin-top:5px;
/* background: yellow; */
/* border:1px solid #8B8386; */
float: left;
}
/*
搜索div
*/
.center_div {
width: 98%;
height: 28%;
margin-left:1%;
margin-top:5px;
background: #FFFFFF;
/* border:1px solid #8B8386; */
float: left;
}
/*
管理中心显示结果div
*/
.bottom_div {
width: 98%;
height: 55%;
margin-left:1%;
margin-top:10px;
/* background: red; */
/* border:1px solid #8B8386; */
float: left;
}
/*
中间的筛选div
*/
.searchDiv {
width: 100%;
height: 16%;
margin-left:1%;
border-bottom: 1px solid #E5E5E5;
/* color: #6F6F6F; */
float: left;
}
.tabletitle{
font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
color:#838B8B;
font-weight:800;
}
.table td {
/* text-align: center; */
vertical-align: middle!important;
}
.bottom_div_1{
width: 100%;
height: 10%;
/* background: red; */
}
.bottom_div_2{
width: 100%;
height: 8%;
/* background: blue; */
}
.bottom_div_3{
width: 100%;
height: 56%;
/* background: #E0FFFF; */
}
.bottom_div_4{
width: 100%;
height: 26%;
/* background: blue; */
}
.selectText{
cursor:pointer;
color:#000000;
}
/*
根据不同分辨率显示不同px的文字大小
*/
@media (min-width: 400px) and (min-height: 300px) {
.manageName{
font-size:8px;
font-weight: bold;
margin-left:3%;
}
.equNumName{
font-size:6px;
margin-left:8%;
font-weight: bold;
}
.equNum{
font-size:14px;
font-weight: bold;
}
}
@media (min-width: 768px) and (min-height: 432px) {
.manageName{
font-size:10px;
font-weight: bold;
margin-left:3%;
}
.equNumName{
font-size:8px;
margin-left:8%;
font-weight: bold;
}
.equNum{
font-size:18px;
font-weight: bold;
}
}
@media (min-width: 992px) and (min-height: 558px) {
.manageName{
font-size:12px;
font-weight: bold;
margin-left:3%;
}
.equNumName{
font-size:10px;
margin-left:8%;
font-weight: bold;
}
.equNum{
font-size:20px;
font-weight: bold;
}
}
@media (min-width: 1200px) and (min-height: 675px) {
.manageName{
font-size:14px;
font-weight: bold;
margin-left:3%;
}
.equNumName{
font-size:12px;
margin-left:8%;
font-weight: bold;
}
.equNum{
font-size:22px;
font-weight: bold;
}
}
@media (min-width: 1400px) and (min-height: 875px) {
.manageName{
font-size:14px;
font-weight: bold;
margin-left:3%;
}
.equNumName{
font-size:12px;
margin-left:8%;
font-weight: bold;
}
.equNum{
font-size:24px;
font-weight: bold;
}
}
</style>
<script type="text/javascript">
var dosearch = function() {
$("#table").bootstrapTable('refresh');
};
/*
js预加载
*/
$(function(){
var windowghight=document.body.clientHeight;
var topheight=$("#topdiv").outerHeight(true);
windowghight=windowghight-topheight-10;
$('#centerdiv').attr("style","height:"+windowghight+"px;");
//环形图形数据
echartData('','','');
//获取设备数量
//getEquData();
//获取设备大类与设备小类内容
getEquipmentType();
$('#starYear').datepicker({
format: 'yyyy',
weekStart: 1,
autoclose: true,
startView: 2,
minViewMode: 2,
maxViewMode: 2,
forceParse: false,
language: 'zh-CN'
}).on('changeDate',chaDate);
$('#endYear').datepicker({
format: 'yyyy',
weekStart: 1,
autoclose: true,
startView: 2,
minViewMode: 2,
maxViewMode: 2,
forceParse: false,
language: 'zh-CN'
}).on('changeDate',chaDate);
});
function chaDate(){
}
/*
改变屏幕分辨率
*/
window.onresize = function(){
refreshPage('/BKYWQ/command/equipmentDeploy/showlistOverview.do');
}
/*
筛选按钮
*/
function selectFunction(){
var typeId = $("#typeId").val();
var typeIdDetail = $("#typeIdDetail").val();
var search_name = $("#search_name").val();
var startGL = $("#startGL").val();//功率筛选第一个框
var endGL = $("#endGL").val();//功率筛选第二个框
var starYear = $("#starYear").val();//启用年份--开始
var endYear = $("#endYear").val();//启用年份--结束
//getEquData(typeId,typeIdDetail,search_name);
var rank = document.getElementsByName("rank");//ABC类的复选框
rankA = rank[0].checked;
rankB = rank[1].checked;
rankC = rank[2].checked;
echartData(typeId,typeIdDetail,search_name,startGL,endGL,starYear,endYear,rankA,rankB,rankC);
}
/*
重置
*/
function dorefresh(){
refreshPage('/BKYWQ/command/equipmentDeploy/showlistOverview.do');
}
/*
获取设备大类内容
*/
function getEquipmentType(){
$.ajax({
type:'post',
url:ext.contextPath + '/command/equipmentDeploy/getEquipmentType.do',
async: true,
globle:false,
error: function(){
return false;
},
success: function(data){
var data=eval('(' + data + ')');
$("#table1").empty();
var tr = '<td style="width:120px;color:#6F6F6F;">设备类别</td><td><span id="bx1" class="selectText" onclick="updateColor(\'bx1\')">不限</span></td>';
for (var i = 0; i < data.length; i++) {
tr += '<td><span id='+data[i].equipmentTypeId+' class="selectText" onclick="updateColor('+data[i].equipmentTypeId+')">'+data[i].equipmentTypeName+'</span></td>';
}
$("#table1").append('<tr>'+tr+'</tr>');
$("#table2").append('<tr><td style="width:120px;color:#6F6F6F;">设备小类</td><td><span id="bx2" class="selectText" onclick="updateColor2(\'bx2\')">不限</span></td></tr>');
}
});
}
/*
点击改变颜色
*/
function updateColor(id){
/*
下面几行为操作设备大类
*/
var typeId = $('#typeId').val();//获取原有颜色
if(typeId!=null && typeId!=''){
document.getElementById(typeId).style.color="#000000";//将原有td颜色恢复
}
document.getElementById(id).style.color="red";//将点击类型改变颜色
$('#typeId').val(id);//给新Id赋值
if(id=='bx1'){
var typeIdDetail = $('#typeIdDetail').val();//获取原有颜色
if(typeIdDetail!=null && typeIdDetail!=''){
document.getElementById(typeIdDetail).style.color="#000000";//将原有td颜色恢复
}
document.getElementById('bx2').style.color="red";//将原有td颜色恢复
$('#typeIdDetail').val('bx2');//给新Id赋值
}else{
$.ajax({
type:'post',
url:ext.contextPath + '/command/equipmentDeploy/getEquipmentTypeDetail.do?id='+id,
async: true,
globle:false,
error: function(){
return false;
},
success: function(data){
var data=eval('(' + data + ')');
$("#table2").empty();
var tr = '<td style="width:120px;color:#6F6F6F;">设备小类</td><td><span id="bx2" class="selectText" onclick="updateColor2(\'bx2\')">不限</span></td>';
for (var i = 0; i < data.length; i++) {
tr += '<td><span id='+data[i].equipmentTypeId+' class="selectText" onclick="updateColor2('+data[i].equipmentTypeId+')">'+data[i].equipmentTypeName+'</span></td>';
}
$("#table2").append('<tr>'+tr+'</tr>');
document.getElementById('bx2').style.color="red";//将点击类型改变颜色
$('#typeIdDetail').val('bx2');//给新Id赋值
}
});
}
}
//设备
var doequipment = function() {
$.post(ext.contextPath + '/command/equipmentDeploy/add.do', {} , function(data) {
$("#subDiv").html(data);
openModal('subModal');
});
};
//设备筛选页面
var doequipmentlist = function() {
var typeId = $("#typeId").val();
var typeIdDetail = $("#typeIdDetail").val();
var search_name = $("#search_name").val();
var startGL = $("#startGL").val();//功率筛选第一个框
var endGL = $("#endGL").val();//功率筛选第二个框
var starYear = $("#starYear").val();//启用年份--开始
var endYear = $("#endYear").val();//启用年份--结束
//getEquData(typeId,typeIdDetail,search_name);
var rank = document.getElementsByName("rank");//ABC类的复选框
rankA = rank[0].checked;
rankB = rank[1].checked;
rankC = rank[2].checked;
$.post(ext.contextPath + '/command/equipmentDeploy/equipmentSelectList.do', {
typeId:typeId,typeIdDetail:typeIdDetail,startGL:startGL,endGL:endGL,starYear:starYear,endYear:endYear,rankA:rankA,rankB:rankB,rankC:rankC
} , function(data) {
$("#subDiv").html(data);
openModal('subModallist');
});
};
/*
点击改变颜色
*/
function updateColor2(id){
/*
下面几行为操作设备大类
*/
var typeIdDetail = $('#typeIdDetail').val();//获取原有颜色
if(typeIdDetail!=null && typeIdDetail!=''){
document.getElementById(typeIdDetail).style.color="#000000";//将原有td颜色恢复
}
document.getElementById(id).style.color="red";//将点击类型改变颜色
$('#typeIdDetail').val(id);//给新Id赋值
}
/*
获取管理中心及区控中心的数量
*/
/*function getEquData(typeId,typeIdDetail,searchName){
$.ajax({
type:'post',
url:ext.contextPath + '/command/equipmentDeploy/getEquData.do?typeId='+typeId+'&typeIdDetail='+typeIdDetail+'&searchName='+encodeURI(encodeURI(searchName)),
async: true,
globle:false,
error: function(){
return false;
},
success: function(data){
var data=eval('(' + data + ')');
for (var i = 0; i < data.length; i++) {
$('#equNum'+i).text(data[i].Msize);//赋值管理中心设备数量
for (var j = 0; j < data[i].Rnum.length; j++) {
$('#equNum'+i+j).text(data[i].Rnum[j].Rsize);//赋值区控中心设备数量
}
}
}
});
}*/
function echartData(typeId,typeIdDetail,searchName,startGL,endGL,starYear,endYear,rankA,rankB,rankC){
//根据分辨率自适应
var wid = document.body.clientWidth;
var hei = document.body.clientHeight;
//$('#divbottom').height(hei-30);//顶部工具栏固定30px 其余为下面div高度
var textSize1 = 0;//环形图里面的字大小
var textSize2 = 0;//标签类 的大小
if(wid>0 && hei>0){
textSize1 = 10;
textSize2 = 8;
}
if(wid>768 && hei>432){
textSize1 = 12;
textSize2 = 12;
}
if(wid>992 && hei>558){
textSize1 = 14;
textSize2 = 12;
}
if(wid>1200 && hei>675){
textSize1 = 16;
textSize2 = 14;
}
//循环所有echart数据
for (var i = 0; i < ${companyList}.length; i++) {
echart(i,'container'+i,${companyList}[i].companyId,textSize1,textSize2,typeId,typeIdDetail,searchName,startGL,endGL,starYear,endYear,rankA,rankB,rankC);//设备状态占比
}
}
var mychart;
function echart(morder,container,companyId,textSize1,textSize2,typeId,typeIdDetail,searchName,startGL,endGL,starYear,endYear,rankA,rankB,rankC){
var EleId = document.getElementById(container);
$.ajax({
type:'GET',
url:ext.contextPath + '/command/equipmentDeploy/getEchartData.do?id='+companyId+'&math='+Math.random()+'&typeId='+typeId+'&typeIdDetail='+typeIdDetail+'&searchName='+encodeURI(encodeURI(searchName))+'&startGL='+startGL+'&endGL='+endGL+'&starYear='+starYear+'&endYear='+endYear+'&rankA='+rankA+'&rankB='+rankB+'&rankC='+rankC,
async: true,
globle:false,
error: function(){
return false;
},
success: function(data){
var data=eval('(' + data + ')');
mychart=echarts.init(EleId);
//4类状态的设备
ems1=data[0].equManageStatus1;
ems2=data[0].equManageStatus2;
ems3=data[0].equManageStatus3;
ems4=data[0].equManageStatus4;
$('#equNum'+morder).text(data[0].Msize);//赋值管理中心设备数量
for (var j = 0; j < data[0].Rnum.length; j++) {
$('#equNum'+morder+j).text(data[0].Rnum[j].Rsize);//赋值区控中心设备数量
}
var option = {
title: {
text:'设备',
left:'center',
top:'25%',
//padding:[24,0],
textStyle:{
color:'#000000',
fontSize:textSize1,
align:'center'
}
},
legend: {
orient: 'vertical',//vertical/horizontal 横向 纵向
x: 'center',
y:'60%',
itemWidth: 18,//legend的图标的宽度
itemHeight: 10,
itemGap: 10,
data: ['启用中','已封存','已停用','已报废'],
formatter:function(name){
let target;
/*for(let i=0;i<data.length;i++){
if(data[i].name===name){
target=data[i].value
}
}*/
if(name=='启用中'){
target = ems1;
}
if(name=='已封存'){
target = ems2;
}
if(name=='已停用'){
target = ems3;
}
if(name=='已报废'){
target = ems4;
}
let arr=[""+name+"设备 : "+target+""]
return arr.join("\n")
},
textStyle:{
color:'#6F6F6F',
fontSize:textSize2
}
},
series : [
{
name: '访问来源',
type: 'pie',
radius: ['40%','50%'],//调整大小
center: ['50%', '30%'],
itemStyle : {
normal : {
label : {
show : false,
textStyle: {
fontSize:textSize2, //改变标示文字的大小
color: '#6F6F6F' // 改变标示文字的颜色
}
},
labelLine : {
show : false,
length:2, // 改变标示线的长度
lineStyle: {
color: "#6F6F6F" // 改变标示线的颜色
}
}
},
},
data:[
{value:ems1, name:'启用中',itemStyle:{normal:{color:'#3883FF'}}},
{value:ems2, name:'已封存',itemStyle:{normal:{color:'#992FC2'}}},
{value:ems3, name:'已停用',itemStyle:{normal:{color:'#4BE5DD'}}},
{value:ems4, name:'已报废',itemStyle:{normal:{color:'#FE8840'}}}
]
}
]
};
mychart.clear();
mychart.setOption(option);
mychart.resize();//主动调用resize达到区域更新的效果,用于自动刷新区域大小
}
});
}
</script>
</head>
<body onload="initMenu()" class="hold-transition ${cu.themeclass} sidebar-mini">
<input type="hidden" name="typeId" id="typeId" value="">
<input type="hidden" name="typeIdDetail" id="typeIdDetail" value="">
<div class="wrapper" style="overflow-y:hidden;">
<!-- 引用top -->
<%-- <jsp:include page="/jsp/top.jsp"></jsp:include> --%>
<!-- 菜单栏 -->
<%-- <jsp:include page="/jsp/left.jsp"></jsp:include> --%>
<!-- BEGIN CONTENT -->
<div class="content-wrapper">
<div id="subDiv" style="width: 350px;height:10px;line-height: 5px;"></div>
<div id="user4SelectDiv"></div>
<section class="content-header">
<h4 id ="head_title"></h4>
<ol class="breadcrumb">
<li><a id ='head_firstlevel' href="#"><i class="fa fa-dashboard"></i> </a></li>
</ol>
</section>
<div id="page-content" class="page-content" >
<!-- BEGIN CONTAINER -->
<div id="centerdiv" >
<div class="top_div" style="overflow:hidden;">
<button type="button" class="btn btn-primary btn-sm" style="background-color:#1790FF;" onclick="doequipmentlist();" >设备资源查询</button>&nbsp;
<button type="button" class="btn btn-primary btn-sm" style="background-color:#1790FF;" onclick="doequipment();">调拨</button>&nbsp;
<div class="input-group input-group-sm pull-right" style="width: 250px;">
<input type="text" id="search_name" name="search_name" class="form-control pull-right" placeholder="物资名称">
<div class="input-group-btn">
<button class="btn btn-default" onclick="selectFunction();"><i class="fa fa-search"></i></button>
</div>
</div>
</div>
<div class="center_div" style="overflow:hidden;">
<div class="searchDiv">
<table class="table table-condensed" id="table1">
</table>
</div>
<div class="searchDiv">
<table class="table table-condensed" id="table2">
</table>
</div>
<div class="searchDiv">
<table class="table table-condensed">
<tr>
<td style="width:120px;color:#6F6F6F;">功率范围 </td>
<td style="color:#000000;">
<div style="height:100%;float:left;"></div>
<div style="width:120px;height:80%;float:left;" >
<div class="input-group mb-3 input-group-sm" >
<input class="form-control date-picker" id="startGL"
type="text" placeholder="" style="background-color:#FFFFFF;height:100%;" value=""/>
</div>
</div>
<div style="width:30px;height:80%;float:left;margin-left:12px;">至</div>
<div style="width:120px;height:80%;float:left;" >
<div class="input-group mb-3 input-group-sm" >
<input class="form-control date-picker" id="endGL"
type="text" placeholder="" style="background-color:#FFFFFF;height:100%;" value=""/>
</div>
</div>
<div style="width:30px;height:80%;float:left;margin-left:12px;">KW</div>
</div>
</td>
</tr>
</table>
</div>
<div class="searchDiv">
<table class="table table-condensed">
<tr>
<td style="width:120px;color:#6F6F6F;">启用年份</td>
<td style="color:#000000;">
<div style="height:100%;float:left;"></div>
<div style="width:120px;height:80%;float:left;" >
<div class="input-group mb-3 input-group-sm" >
<input class="form-control date-picker" id="starYear"
type="text" placeholder="点击选择" style="background-color:#FFFFFF;height:100%;" value=""/>
</div>
</div>
<div style="width:30px;height:80%;float:left;margin-left:12px;">至</div>
<div style="width:120px;height:80%;float:left;" >
<div class="input-group mb-3 input-group-sm" >
<input class="form-control date-picker" id="endYear"
type="text" placeholder="点击选择" style="background-color:#FFFFFF;height:100%;" value=""/>
</div>
</div>
<div style="width:30px;height:80%;float:left;margin-left:12px;">年</div>
</div>
</td>
</tr>
</table>
</div>
<div class="searchDiv">
<table class="table table-condensed">
<tr>
<td style="width:120px;color:#6F6F6F;">设备等级</td>
<td style="color:#000000;">
<input type="checkbox" name="rank" value="A" />&nbsp;&nbsp;A&nbsp;&nbsp;
<input type="checkbox" name="rank" value="B" />&nbsp;&nbsp;B&nbsp;&nbsp;
<input type="checkbox" name="rank" value="C" />&nbsp;&nbsp;C&nbsp;&nbsp;
</td>
</tr>
</table>
</div>
<div style="width: 100%;height:20%;">
<table class="table table-condensed">
<tr>
<td style="color:#000000;">
<button type="button" class="btn btn-primary btn-sm" style="background-color:#1790FF;margin-left:1%;" onclick="selectFunction()">筛选</button>&nbsp;
<button type="button" class="btn btn-primary btn-sm" style="background-color:#C0C0C0;border-color:#C0C0C0;" onclick="dorefresh()">重置</button>&nbsp;
</td>
</tr>
</table>
</div>
</div>
<div class="bottom_div" style="overflow:hidden;">
<c:set var="rowcount" value="${0}" />
<c:forEach var="current" items="${companyList}">
<div style="background-color:#FFFFFF;width:19.2%;height:100%;float:left;">
<div class="bottom_div_1">
<div style="height:10%;"></div>
<div class="manageName">${current.companyName}</div>
</div>
<div class="bottom_div_2">
<div class="equNumName">总设备数量:
<span class="equNum" id="equNum${rowcount}">查询中...</span></div>
</div>
<div class="bottom_div_3">
<div class="container" id="container${rowcount}" style="width:100%;height:100%;"></div>
</div>
<div class="bottom_div_4">
<c:set var="rowcount2" value="${0}" />
<c:forEach var="current2" items="${current.Rnum}">
<div style="width:100%;height:25%;float:left;font-weight:bold;">
&nbsp;&nbsp;${current2.Rname}
<span id="equNum${rowcount}${rowcount2}">查询中...</span>
</div>
<c:set var="rowcount2" value="${rowcount2+1}" />
</c:forEach>
</div>
</div>
<div style="width:1%;height:100%;float:left;"></div>
<c:set var="rowcount" value="${rowcount+1}" />
</c:forEach>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>