feat: 为污水列表和监控页面添加流量曲线和界面优化

This commit is contained in:
Rue Ji
2026-03-25 01:03:20 +08:00
parent 9a9a743945
commit e50422d7a7
2 changed files with 300 additions and 97 deletions

View File

@ -44,6 +44,7 @@
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
height: 100%;
overflow: hidden;
}
@ -77,9 +78,10 @@
/* 上部分区域 */
.top-section {
display: grid;
grid-template-columns: 280px 1fr 200px;
grid-template-columns: 220px 1fr 220px;
gap: 15px;
margin-bottom: 15px;
align-items: start;
}
/* 进水累计卡片 - 美化样式 */
@ -87,42 +89,65 @@
display: flex;
flex-direction: column;
gap: 10px;
padding: 15px;
/*background: linear-gradient(180deg, #f8fbfd 0%, #f0f5f9 100%);*/
padding: 10px;
}
.inflow-group {
border-radius: 10px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.inflow-group-title {
font-size: 12px;
font-weight: bold;
padding: 6px 10px;
color: #fff;
}
.inflow-group.industrial .inflow-group-title {
background: linear-gradient(135deg, #667eea 0%, #1890ff 100%);
}
.inflow-group.domestic .inflow-group-title {
background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}
.inflow-group-content {
display: flex;
flex-direction: column;
gap: 1px;
background: #e8e8e8;
}
.inflow-item {
display: flex;
align-items: center;
padding: 15px;
border-radius: 12px;
padding: 10px;
background: #fff;
position: relative;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0,0,0,0.08);
transition: transform 0.2s, box-shadow 0.2s;
transition: background 0.2s;
}
.inflow-item:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0,0,0,0.12);
background: #f5f7fa;
}
.inflow-item.industrial {
background: linear-gradient(135deg, #667eea 0%, #1890ff 100%);
.inflow-item.industrial-inflow {
border-left: 3px solid #378dcc;
}
.inflow-item.domestic {
background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
.inflow-item.industrial-outflow {
border-left: 3px solid #40a9ff;
}
.inflow-item::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 100%;
height: 100%;
background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
.inflow-item.domestic-inflow {
border-left: 3px solid #52c41a;
}
.inflow-item.domestic-outflow {
border-left: 3px solid #2ecc71;
}
.inflow-content {
@ -130,8 +155,8 @@
}
.inflow-item .label {
font-size: 15px;
color: rgba(255,255,255,0.85);
font-size: 12px;
color: #666;
margin-bottom: 4px;
display: flex;
}
@ -144,25 +169,24 @@
}
.inflow-item .value {
font-size: 26px;
font-size: 20px;
font-weight: bold;
color: #fff;
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
color: #333;
}
.inflow-item .unit {
font-size: 13px;
color: rgba(255,255,255,0.85);
font-size: 11px;
color: #999;
}
/* 图表卡片 */
.chart-container {
height: 220px;
height: 360px;
}
/* 设备运行卡片 */
.device-list {
max-height: 220px;
max-height: 360px;
overflow-y: auto;
}
@ -205,73 +229,123 @@
}
/* 泵站详情 */
.pump-stations {
.pump-section-wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.pump-category {
background: #f8f9fa;
border-radius: 10px;
overflow: hidden;
}
.pump-category-header {
padding: 10px 15px;
font-size: 14px;
font-weight: bold;
color: #fff;
}
.pump-category.industrial .pump-category-header {
background: linear-gradient(135deg, #667eea 0%, #1890ff 100%);
}
.pump-category.domestic .pump-category-header {
background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}
.pump-category-content {
padding: 15px;
display: flex;
flex-direction: column;
gap: 15px;
}
.pump-station {
background: #f8f9fa;
border-radius: 6px;
background: #fff;
border-radius: 8px;
padding: 12px;
box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.pump-station-title {
font-size: 14px;
font-weight: bold;
color: #0c4377;
margin-bottom: 12px;
.pump-station-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
padding-bottom: 8px;
border-bottom: 1px solid #e8e8e8;
}
.pump-station-title {
font-size: 13px;
font-weight: bold;
color: #0c4377;
}
.pump-station-params {
display: flex;
gap: 15px;
}
.pump-param {
font-size: 12px;
color: #666;
}
.pump-param-value {
font-weight: bold;
color: #333;
}
.pump-list {
display: flex;
gap: 10px;
justify-content: center;
gap: 8px;
flex-wrap: wrap;
}
.pump-item {
display: flex;
flex-direction: column;
align-items: center;
width: 50px;
width: 42px;
}
.pump-icon {
width: 40px;
height: 40px;
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-size: 11px;
color: #fff;
margin-bottom: 4px;
margin-bottom: 3px;
}
.pump-icon.on {
.pump-icon.running {
background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
}
.pump-icon.off {
.pump-icon.stopped {
background: linear-gradient(135deg, #d9d9d9 0%, #bfbfbf 100%);
}
.pump-icon.error {
.pump-icon.fault {
background: linear-gradient(135deg, #ff4d4f 0%, #cf1322 100%);
}
.pump-name {
font-size: 12px;
font-size: 11px;
color: #666;
}
/* 下部分区域 */
.bottom-section {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-columns: 60% 1fr;
gap: 15px;
margin-bottom: 15px;
}
@ -426,10 +500,11 @@
});
function initData() {
// 初始化工业进水累计
$('#industrial_value').text('12,580');
// 初始化生活进水累计
$('#domestic_value').text('8,650');
// 初始化进水累计
$('#industrial_inflow_value').text('12,580');
$('#industrial_outflow_value').text('12,380');
$('#domestic_inflow_value').text('8,650');
$('#domestic_outflow_value').text('8,450');
// 初始化设备运行列表
initDeviceList();
@ -470,29 +545,35 @@
}
function initPumpStations() {
var stations = [
{name: '卫八泵站', pumps: ['on', 'on', 'off', 'on', 'error']},
{name: '九号泵站', pumps: ['on', 'off', 'on', 'on', 'off']},
{name: '春华泵站', pumps: ['on', 'on', 'on', 'off', 'on']},
{name: '厂内泵站', pumps: ['on', 'off', 'off', 'on', 'on']}
];
// 初始化水质参数
$('#chunhua_cod').text('156');
$('#weibalu_cod').text('142');
$('#pump8_cod').text('98');
$('#pump8_nh3n').text('12.5');
$('#pump9_cod').text('105');
$('#pump9_nh3n').text('14.2');
// 春华路泵站 - 6个泵
renderPumpList('chunhua_pumps', ['running', 'running', 'stopped', 'running', 'fault', 'running']);
// 卫八路泵站 - 6个泵
renderPumpList('weibalu_pumps', ['running', 'stopped', 'running', 'running', 'stopped', 'running']);
// 8号泵站 - 6个泵
renderPumpList('pump8_pumps', ['running', 'running', 'running', 'stopped', 'running', 'fault']);
// 9号泵站 - 8个泵
renderPumpList('pump9_pumps', ['running', 'stopped', 'running', 'running', 'running', 'stopped', 'running', 'running']);
}
function renderPumpList(containerId, pumps) {
var html = '';
stations.forEach(function(station) {
html += '<div class="pump-station">';
html += '<div class="pump-station-title">' + station.name + '</div>';
html += '<div class="pump-list">';
station.pumps.forEach(function(status, index) {
var iconClass = status === 'on' ? 'on' : status === 'off' ? 'off' : 'error';
var iconText = status === 'on' ? '启' : status === 'off' ? '关' : '异';
html += '<div class="pump-item">';
html += '<div class="pump-icon ' + iconClass + '">' + iconText + '</div>';
html += '<span class="pump-name">泵' + (index + 1) + '#</span>';
html += '</div>';
});
html += '</div></div>';
pumps.forEach(function(status, index) {
var iconClass = status === 'running' ? 'running' : status === 'stopped' ? 'stopped' : 'fault';
var iconText = status === 'running' ? '运' : status === 'stopped' ? '停' : '故';
html += '<div class="pump-item">';
html += '<div class="pump-icon ' + iconClass + '">' + iconText + '</div>';
html += '<span class="pump-name">泵' + (index + 1) + '</span>';
html += '</div>';
});
$('#pump_stations').html(html);
$('#' + containerId).html(html);
}
// 生成工艺列表mock数据
@ -635,7 +716,7 @@
}
},
legend: {
data: ['工业进水', '生活进水'],
data: ['工业进水', '工业出水', '生活进水', '生活出水'],
top: 5,
textStyle: {
fontSize: 12
@ -687,7 +768,7 @@
{
name: '工业进水',
type: 'bar',
barWidth: '30%',
barWidth: '20%',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{offset: 0, color: '#378dcc'},
@ -696,10 +777,22 @@
},
data: [12000, 11500, 13000, 12500, 11800, 12200, 12580]
},
{
name: '工业出水',
type: 'bar',
barWidth: '20%',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{offset: 0, color: '#5b8def'},
{offset: 1, color: '#40a9ff'}
])
},
data: [11800, 11300, 12800, 12300, 11600, 12000, 12380]
},
{
name: '生活进水',
type: 'bar',
barWidth: '30%',
barWidth: '20%',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{offset: 0, color: '#52c41a'},
@ -707,6 +800,18 @@
])
},
data: [8500, 8200, 9000, 8800, 8600, 8400, 8650]
},
{
name: '生活出水',
type: 'bar',
barWidth: '20%',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{offset: 0, color: '#2ecc71'},
{offset: 1, color: '#58d68d'}
])
},
data: [8300, 8000, 8800, 8600, 8400, 8200, 8450]
}
]
};
@ -723,26 +828,54 @@
<div class="page-container">
<!-- 上部分区域 -->
<div class="top-section">
<!-- 进水累计(工业+生活合并,上下布局 -->
<!-- 进水累计(工业+生活,上下结构 -->
<div class="card">
<div class="card-header">水累计</div>
<div class="card-header">污水进出水累计</div>
<div class="card-body" style="padding: 0;">
<div class="inflow-card">
<div class="inflow-item industrial">
<div class="inflow-content">
<span class="label">工业当日总量</span>
<div class="value-row">
<span class="value" id="industrial_value">--</span>
<span class="unit">m³</span>
<div class="inflow-group industrial">
<div class="inflow-group-title">工业污水</div>
<div class="inflow-group-content">
<div class="inflow-item industrial-inflow">
<div class="inflow-content">
<span class="label">进水累计</span>
<div class="value-row">
<span class="value" id="industrial_inflow_value">--</span>
<span class="unit">m³</span>
</div>
</div>
</div>
<div class="inflow-item industrial-outflow">
<div class="inflow-content">
<span class="label">出水累计</span>
<div class="value-row">
<span class="value" id="industrial_outflow_value">--</span>
<span class="unit">m³</span>
</div>
</div>
</div>
</div>
</div>
<div class="inflow-item domestic">
<div class="inflow-content">
<span class="label">生活当日总量</span>
<div class="value-row">
<span class="value" id="domestic_value">--</span>
<span class="unit">m³</span>
<div class="inflow-group domestic">
<div class="inflow-group-title">生活污水</div>
<div class="inflow-group-content">
<div class="inflow-item domestic-inflow">
<div class="inflow-content">
<span class="label">进水累计</span>
<div class="value-row">
<span class="value" id="domestic_inflow_value">--</span>
<span class="unit">m³</span>
</div>
</div>
</div>
<div class="inflow-item domestic-outflow">
<div class="inflow-content">
<span class="label">出水累计</span>
<div class="value-row">
<span class="value" id="domestic_outflow_value">--</span>
<span class="unit">m³</span>
</div>
</div>
</div>
</div>
</div>
@ -752,7 +885,7 @@
<!-- 进水流量7天日趋势 -->
<div class="card">
<div class="card-header">水流量7天日趋势</div>
<div class="card-header">水流量7天日趋势</div>
<div class="card-body">
<div id="flow_chart" class="chart-container"></div>
</div>
@ -818,8 +951,63 @@
<div class="pump-section">
<div class="card">
<div class="card-header">泵站详情</div>
<div class="card-body">
<div class="pump-stations" id="pump_stations"></div>
<div class="card-body" style="padding: 10px;">
<div class="pump-section-wrapper">
<!-- 工业污水泵站 -->
<div class="pump-category industrial">
<div class="pump-category-header">工业污水泵站</div>
<div class="pump-category-content">
<!-- 春华路泵站 -->
<div class="pump-station">
<div class="pump-station-header">
<span class="pump-station-title">春华路泵站</span>
<div class="pump-station-params">
<span class="pump-param">COD: <span class="pump-param-value" id="chunhua_cod">--</span> mg/L</span>
</div>
</div>
<div class="pump-list" id="chunhua_pumps"></div>
</div>
<!-- 卫八路泵站 -->
<div class="pump-station">
<div class="pump-station-header">
<span class="pump-station-title">卫八路泵站</span>
<div class="pump-station-params">
<span class="pump-param">COD: <span class="pump-param-value" id="weibalu_cod">--</span> mg/L</span>
</div>
</div>
<div class="pump-list" id="weibalu_pumps"></div>
</div>
</div>
</div>
<!-- 生活污水泵站 -->
<div class="pump-category domestic">
<div class="pump-category-header">生活污水泵站</div>
<div class="pump-category-content">
<!-- 8号泵站 -->
<div class="pump-station">
<div class="pump-station-header">
<span class="pump-station-title">8号泵站</span>
<div class="pump-station-params">
<span class="pump-param">COD: <span class="pump-param-value" id="pump8_cod">--</span> mg/L</span>
<span class="pump-param">NH3N: <span class="pump-param-value" id="pump8_nh3n">--</span> mg/L</span>
</div>
</div>
<div class="pump-list" id="pump8_pumps"></div>
</div>
<!-- 9号泵站 -->
<div class="pump-station">
<div class="pump-station-header">
<span class="pump-station-title">9号泵站</span>
<div class="pump-station-params">
<span class="pump-param">COD: <span class="pump-param-value" id="pump9_cod">--</span> mg/L</span>
<span class="pump-param">NH3N: <span class="pump-param-value" id="pump9_nh3n">--</span> mg/L</span>
</div>
</div>
<div class="pump-list" id="pump9_pumps"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

View File

@ -29,6 +29,19 @@
openModal('subModal');
});
};
// 查看曲线(瞬时流量、累计流量)
var showLineFun = function(ventNum, type) {
if (!ventNum) {
showAlert('w', '请关联点位ID', 'mainAlertdiv');
return;
}
var mpcode = ventNum + '_' + type;
$.post(ext.contextPath + '/data/showOnlyLine.do', {mpcode: mpcode, unitId: unitId}, function(data) {
$("#subDiv").html(data);
openModal('curveModal');
});
};
var editFun = function(id) {
$.post(ext.contextPath + '/sparepart/sewage/edit.do', {id:id} , function(data) {
$("#subDiv").html(data);
@ -339,9 +352,11 @@
width: 120, // 定义列的宽度单位为像素px
formatter: function (value, row, index) {
var buts= '';
buts+= '<button class="btn btn-default btn-sm" title="查看点位" onclick="showpointFun(\'' + row.name + '\')"><i class="fa fa-check-square-o"></i><span class="hidden-md hidden-lg"> 查看点位</span></button>';
buts+= '<button class="btn btn-default btn-sm" title="瞬时流量" onclick="showLineFun(\'' + (row.ventNum || '') + '\', \'SSLL\')"><i class="fa fa-line-chart"></i></button>';
buts+= '<button class="btn btn-default btn-sm" title="累计流量" onclick="showLineFun(\'' + (row.ventNum || '') + '\', \'LJLL\')"><i class="fa fa-area-chart"></i></button>';
buts+= '<button class="btn btn-default btn-sm" title="查看点位" onclick="showpointFun(\'' + row.name + '\')"><i class="fa fa-check-square-o"></i></button>';
buts+= '<security:authorize buttonUrl="sparepart/sewage/edit.do">';
buts+= '<button class="btn btn-default btn-sm" title="编辑" onclick="editFun(\'' + row.id + '\')"><i class="fa fa-edit"></i><span class="hidden-md hidden-lg"> 编辑</span></button>';
buts+= '<button class="btn btn-default btn-sm" title="编辑" onclick="editFun(\'' + row.id + '\')"><i class="fa fa-edit"></i><span class="hidden-md hidden-lg"> 编辑</span></button>';
buts+= '</security:authorize>';
buts+= '<security:authorize buttonUrl="sparepart/sewage/delete.do">';