diff --git a/src/main/webapp/jsp/main_JS_Company.jsp b/src/main/webapp/jsp/main_JS_Company.jsp index 9b43976d..64c58ef9 100644 --- a/src/main/webapp/jsp/main_JS_Company.jsp +++ b/src/main/webapp/jsp/main_JS_Company.jsp @@ -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 += '
'; - html += '
' + station.name + '
'; - html += '
'; - station.pumps.forEach(function(status, index) { - var iconClass = status === 'on' ? 'on' : status === 'off' ? 'off' : 'error'; - var iconText = status === 'on' ? '启' : status === 'off' ? '关' : '异'; - html += '
'; - html += '
' + iconText + '
'; - html += '泵' + (index + 1) + '#'; - html += '
'; - }); - html += '
'; + pumps.forEach(function(status, index) { + var iconClass = status === 'running' ? 'running' : status === 'stopped' ? 'stopped' : 'fault'; + var iconText = status === 'running' ? '运' : status === 'stopped' ? '停' : '故'; + html += '
'; + html += '
' + iconText + '
'; + html += '泵' + (index + 1) + ''; + html += '
'; }); - $('#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 @@
- +
-
进水累计
+
污水进出水累计
-
-
- 工业当日总量 -
- -- - m³ +
+
工业污水
+
+
+
+ 进水累计 +
+ -- + m³ +
+
+
+
+
+ 出水累计 +
+ -- + m³ +
+
-
-
- 生活当日总量 -
- -- - m³ +
+
生活污水
+
+
+
+ 进水累计 +
+ -- + m³ +
+
+
+
+
+ 出水累计 +
+ -- + m³ +
+
@@ -752,7 +885,7 @@
-
进水流量7天日趋势
+
污水流量7天日趋势
@@ -818,8 +951,63 @@
泵站详情
-
-
+
+
+ +
+
工业污水泵站
+
+ +
+
+ 春华路泵站 +
+ COD: -- mg/L +
+
+
+
+ +
+
+ 卫八路泵站 +
+ COD: -- mg/L +
+
+
+
+
+
+ +
+
生活污水泵站
+
+ +
+
+ 8号泵站 +
+ COD: -- mg/L + NH3N: -- mg/L +
+
+
+
+ +
+
+ 9号泵站 +
+ COD: -- mg/L + NH3N: -- mg/L +
+
+
+
+
+
+
diff --git a/src/main/webapp/jsp/sparepart/sewageList.jsp b/src/main/webapp/jsp/sparepart/sewageList.jsp index a8cc0839..81552407 100644 --- a/src/main/webapp/jsp/sparepart/sewageList.jsp +++ b/src/main/webapp/jsp/sparepart/sewageList.jsp @@ -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+= ''; + buts+= ''; + buts+= ''; + buts+= ''; buts+= ''; - buts+= ''; + buts+= ''; buts+= ''; buts+= '';