首页样式重新设计
This commit is contained in:
Rue Ji
Binary file not shown.
|
Before Width: | Height: | Size: 82 KiB After Width: | Height: | Size: 80 KiB |
BIN
src/main/webapp/IMG/logo1.png
Normal file
BIN
src/main/webapp/IMG/logo1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
@ -9,6 +9,82 @@
|
||||
* @param textId
|
||||
*/
|
||||
function getValue(unitId, mpointCode, valueId, textId) {
|
||||
// var data = {
|
||||
// "confirmalarm": "0",
|
||||
// "parmname": "进水瞬时流量",
|
||||
// "signaltag": "",
|
||||
// "soundalarm": "0",
|
||||
// "remoteup": "0",
|
||||
// "triggercycle": "0",
|
||||
// "triggermutation": "0",
|
||||
// "ledcolor": "1",
|
||||
// "id": "C_Jsssll",
|
||||
// "numtail": "0",
|
||||
// "signaltype": "AI",
|
||||
// "active": "启用",
|
||||
// "flowset": 0,
|
||||
// "unit": "m³/h",
|
||||
// "sourceType": "auto",
|
||||
// "mpointcode": "C_Jsssll",
|
||||
// "triggerequoff": "0",
|
||||
// "disname": "",
|
||||
// "valuetype": "sql",
|
||||
// "directtype": "1",
|
||||
// "freq": 1,
|
||||
// "morder": 999,
|
||||
// "showname": "1",
|
||||
// "rate": 1,
|
||||
// "subscriptionStatus": 0,
|
||||
// "mpointid": "C_Jsssll",
|
||||
// "valuemeaning": "",
|
||||
// "mathop": "*",
|
||||
// "triggeralarm": "1",
|
||||
// "equipmentid": "",
|
||||
// "biztype": "",
|
||||
// "parmvalue": 3551,
|
||||
// "ledtype": "1",
|
||||
// "measuredt": "2026-03-11T17:05:43Z",
|
||||
// "bizid": "0533JS"
|
||||
// }
|
||||
//
|
||||
// $('#' + valueId).html(data.parmvalue);//赋值
|
||||
// if (data.unit == undefined) {
|
||||
// $('#' + textId).html(data.parmname);//赋值名称
|
||||
// } else {
|
||||
// $('#' + textId).html(data.parmname + ' (' + data.unit + ')');//赋值名称+单位
|
||||
// }
|
||||
// $.ajax({
|
||||
// type: 'GET',
|
||||
// url: ext.contextPath + '/work/mpoint/getValue4Es.do?unitId=' + unitId + '&mpointCode=' + mpointCode,
|
||||
// async: true,
|
||||
// globle: false,
|
||||
// error: function () {
|
||||
// return false;
|
||||
// },
|
||||
// success: function (data) {
|
||||
// if (data != null && data != '') {
|
||||
// var data = eval('(' + data + ')');
|
||||
// //只限制上限为0.8 下限根据设定值自己设
|
||||
// // var maxvalue = data.alarmmax/0.8;
|
||||
// // var minvalue = data.alarmmin/maxvalue;
|
||||
// // var acvalue = data.parmvalue/maxvalue*100;
|
||||
// $('#' + valueId).html(data.parmvalue);//赋值
|
||||
// if (data.unit == undefined) {
|
||||
// $('#' + textId).html(data.parmname);//赋值名称
|
||||
// } else {
|
||||
// $('#' + textId).html(data.parmname + ' (' + data.unit + ')');//赋值名称+单位
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* echart饼图--通用
|
||||
*/
|
||||
function echartPie2(unitId, mpointCode, echartId, textId) {
|
||||
var myChart = echarts.init(document.getElementById(echartId));
|
||||
$.ajax({
|
||||
type: 'GET',
|
||||
url: ext.contextPath + '/work/mpoint/getValue4Es.do?unitId=' + unitId + '&mpointCode=' + mpointCode,
|
||||
@ -19,26 +95,113 @@ function getValue(unitId, mpointCode, valueId, textId) {
|
||||
},
|
||||
success: function (data) {
|
||||
if (data != null && data != '') {
|
||||
var data = eval('(' + data + ')');
|
||||
//只限制上限为0.8 下限根据设定值自己设
|
||||
// var maxvalue = data.alarmmax/0.8;
|
||||
// var minvalue = data.alarmmin/maxvalue;
|
||||
// var acvalue = data.parmvalue/maxvalue*100;
|
||||
$('#' + valueId).html(data.parmvalue);//赋值
|
||||
if (data.unit == undefined) {
|
||||
$('#' + textId).html(data.parmname);//赋值名称
|
||||
} else {
|
||||
$('#' + textId).html(data.parmname + ' (' + data.unit + ')');//赋值名称+单位
|
||||
var echart_minvalue = 0.2;
|
||||
var echart_maxvalue = 0.8;
|
||||
|
||||
// var data = eval('(' + data + ')');
|
||||
//180度的上限
|
||||
var maxvalue_20 = data.alarmmax * 1.2;
|
||||
//0度的下限
|
||||
var minvalue_20 = data.alarmmin - data.alarmmin * 0.2;
|
||||
|
||||
var maxvalue = data.alarmmax;
|
||||
var minvalue = data.alarmmin;
|
||||
|
||||
//判断是否需要下限
|
||||
if (data.alarmmin == null || data.alarmmin == '') {
|
||||
minvalue_20 = 0;
|
||||
minvalue = 0;
|
||||
echart_minvalue = 0;
|
||||
}
|
||||
|
||||
var parmvalue = data.parmvalue;
|
||||
var rate = 0;
|
||||
var unit = '';
|
||||
|
||||
$('#' + textId).html(data.parmname);
|
||||
|
||||
if (data.unit != undefined && data.unit != null && data.unit != '') {
|
||||
unit = '(' + data.unit + ')';
|
||||
}
|
||||
|
||||
//计算实际值比例
|
||||
if (maxvalue_20 <= 1) {
|
||||
minvalue_20 = minvalue_20 * 100;
|
||||
maxvalue_20 = maxvalue_20 * 100;
|
||||
parmvalue = parmvalue * 100;
|
||||
minvalue = minvalue * 100;
|
||||
maxvalue = maxvalue * 100;
|
||||
if (maxvalue != undefined && minvalue != undefined) {
|
||||
rate = parmvalue / (maxvalue_20 - minvalue_20) * 100;
|
||||
} else {
|
||||
rate = parmvalue;
|
||||
}
|
||||
|
||||
rate += 20;
|
||||
} else {
|
||||
if (maxvalue != undefined && minvalue != undefined) {
|
||||
// rate = parmvalue / maxvalue_20 * 100;
|
||||
rate = (parmvalue / maxvalue) * 0.8 * 100;
|
||||
} else {
|
||||
rate = parmvalue;
|
||||
}
|
||||
}
|
||||
|
||||
//计算颜色
|
||||
var colorStr = '#6C6C6C';
|
||||
if (parmvalue < minvalue) {
|
||||
colorStr = '#67e0e3';
|
||||
} else if (parmvalue > maxvalue) {
|
||||
colorStr = '#fd666d';
|
||||
} else {
|
||||
colorStr = '#37a2da';
|
||||
// 37a2da
|
||||
}
|
||||
|
||||
console.log(data.parmname + '扩大下限：' + minvalue_20 + '------扩大上限：' + maxvalue_20 + '------实际比率：' + rate + '------实际值：' + parmvalue + '------实际下限：' + minvalue + '------实际上限：' + maxvalue);
|
||||
|
||||
var option = {
|
||||
toolbox: { //可视化的工具箱
|
||||
show: false, feature: {
|
||||
restore: { //重置
|
||||
show: true
|
||||
}, saveAsImage: {//保存图片
|
||||
show: true
|
||||
}
|
||||
}
|
||||
}, series: [{
|
||||
name: '业务指标', type: 'gauge', startAngle: 180, endAngle: 0, radius: 70, center: ['50%', '80%'],//设置饼图位置
|
||||
axisLine: {
|
||||
show: true, // 属性lineStyle控制线条样式
|
||||
lineStyle: {
|
||||
width: 15, // color: [[0.2, '#e2e2e2'], [0.8, '#66d99f'], [maxvalue, '#f35a4a']]
|
||||
color: [[echart_minvalue, '#67e0e3'], [echart_maxvalue, '#37a2da'], [maxvalue_20, '#fd666d']]
|
||||
}
|
||||
}, splitLine: {
|
||||
show: false,
|
||||
}, axisTick: {
|
||||
show: false,
|
||||
}, axisLabel: {
|
||||
show: false,
|
||||
}, pointer: {
|
||||
length: '40px', width: '3px',
|
||||
}, detail: {
|
||||
offsetCenter: [0, '20%'], fontSize: 14, color: colorStr, //formatter: data.parmname,
|
||||
formatter: data.parmvalue + unit//data.parmvalue为实际值 acvalue为计算后的比例
|
||||
}, data: [{value: rate}]
|
||||
}]
|
||||
};
|
||||
myChart.setOption(option);
|
||||
myChart.resize();
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* echart饼图--通用
|
||||
*/
|
||||
function echartPie(unitId, mpointCode, echartId, textId) {
|
||||
function echartPie1(unitId, mpointCode, echartId, textId) {
|
||||
var myChart = echarts.init(document.getElementById(echartId));
|
||||
$.ajax({
|
||||
type: 'GET',
|
||||
@ -152,6 +315,155 @@ function echartPie(unitId, mpointCode, echartId, textId) {
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* echart饼图--通用
|
||||
*/
|
||||
function echartPie(unitId, mpointCode, echartId, textId) {
|
||||
var myChart = echarts.init(document.getElementById(echartId));
|
||||
var data = {
|
||||
"confirmalarm": "0",
|
||||
"parmname": "进水PH",
|
||||
"signaltag": "",
|
||||
"soundalarm": "0",
|
||||
"remoteup": "0",
|
||||
"triggercycle": "0",
|
||||
"triggermutation": "0",
|
||||
"ledcolor": "1",
|
||||
"id": "D_JinSPH",
|
||||
"numtail": "0",
|
||||
"signaltype": "AI",
|
||||
"active": "启用",
|
||||
"flowset": 0,
|
||||
"unit": "mg/l",
|
||||
"sourceType": "auto",
|
||||
"mpointcode": "D_JinSPH",
|
||||
"triggerequoff": "0",
|
||||
"disname": "",
|
||||
"valuetype": "sql",
|
||||
"directtype": "1",
|
||||
"freq": 1,
|
||||
"morder": 999,
|
||||
"showname": "1",
|
||||
"rate": 1,
|
||||
"subscriptionStatus": 0,
|
||||
"mpointid": "D_JinSPH",
|
||||
"valuemeaning": "",
|
||||
"mathop": "*",
|
||||
"triggeralarm": "1",
|
||||
"equipmentid": "",
|
||||
"biztype": "",
|
||||
"parmvalue": 20,
|
||||
"alarmmax": 14,
|
||||
"alarmmin": 6,
|
||||
"ledtype": "1",
|
||||
"measuredt": "2026-03-11T18:20:27Z",
|
||||
"bizid": "0533JS"
|
||||
};
|
||||
|
||||
|
||||
if (data != null && data != '') {
|
||||
var echart_minvalue = 0.2;
|
||||
var echart_maxvalue = 0.8;
|
||||
|
||||
// var data = eval('(' + data + ')');
|
||||
//180度的上限
|
||||
var maxvalue_20 = data.alarmmax * 1.2;
|
||||
//0度的下限
|
||||
var minvalue_20 = data.alarmmin - data.alarmmin * 0.2;
|
||||
|
||||
var maxvalue = data.alarmmax;
|
||||
var minvalue = data.alarmmin;
|
||||
|
||||
//判断是否需要下限
|
||||
if (data.alarmmin == null || data.alarmmin == '') {
|
||||
minvalue_20 = 0;
|
||||
minvalue = 0;
|
||||
echart_minvalue = 0;
|
||||
}
|
||||
|
||||
var parmvalue = data.parmvalue;
|
||||
var rate = 0;
|
||||
var unit = '';
|
||||
|
||||
$('#' + textId).html(data.parmname);
|
||||
|
||||
if (data.unit != undefined && data.unit != null && data.unit != '') {
|
||||
unit = '(' + data.unit + ')';
|
||||
}
|
||||
|
||||
//计算实际值比例
|
||||
if (maxvalue_20 <= 1) {
|
||||
minvalue_20 = minvalue_20 * 100;
|
||||
maxvalue_20 = maxvalue_20 * 100;
|
||||
parmvalue = parmvalue * 100;
|
||||
minvalue = minvalue * 100;
|
||||
maxvalue = maxvalue * 100;
|
||||
if (maxvalue != undefined && minvalue != undefined) {
|
||||
rate = parmvalue / (maxvalue_20 - minvalue_20) * 100;
|
||||
} else {
|
||||
rate = parmvalue;
|
||||
}
|
||||
|
||||
rate += 20;
|
||||
} else {
|
||||
if (maxvalue != undefined && minvalue != undefined) {
|
||||
// rate = parmvalue / maxvalue_20 * 100;
|
||||
rate = (parmvalue / maxvalue) * 0.8 * 100;
|
||||
} else {
|
||||
rate = parmvalue;
|
||||
}
|
||||
}
|
||||
|
||||
//计算颜色
|
||||
var colorStr = '#6C6C6C';
|
||||
if (parmvalue < minvalue) {
|
||||
colorStr = '#67e0e3';
|
||||
} else if (parmvalue > maxvalue) {
|
||||
colorStr = '#fd666d';
|
||||
} else {
|
||||
colorStr = '#37a2da';
|
||||
// 37a2da
|
||||
}
|
||||
|
||||
console.log(data.parmname + '扩大下限：' + minvalue_20 + '------扩大上限：' + maxvalue_20 + '------实际比率：' + rate + '------实际值：' + parmvalue + '------实际下限：' + minvalue + '------实际上限：' + maxvalue);
|
||||
|
||||
var option = {
|
||||
toolbox: { //可视化的工具箱
|
||||
show: false, feature: {
|
||||
restore: { //重置
|
||||
show: true
|
||||
}, saveAsImage: {//保存图片
|
||||
show: true
|
||||
}
|
||||
}
|
||||
}, series: [{
|
||||
name: '业务指标', type: 'gauge', startAngle: 180, endAngle: 0, radius: 70, center: ['50%', '80%'],//设置饼图位置
|
||||
axisLine: {
|
||||
show: true, // 属性lineStyle控制线条样式
|
||||
lineStyle: {
|
||||
width: 15, // color: [[0.2, '#e2e2e2'], [0.8, '#66d99f'], [maxvalue, '#f35a4a']]
|
||||
color: [[echart_minvalue, '#67e0e3'], [echart_maxvalue, '#37a2da'], [maxvalue_20, '#fd666d']]
|
||||
}
|
||||
}, splitLine: {
|
||||
show: false,
|
||||
}, axisTick: {
|
||||
show: false,
|
||||
}, axisLabel: {
|
||||
show: false,
|
||||
}, pointer: {
|
||||
length: '40px', width: '3px',
|
||||
}, detail: {
|
||||
offsetCenter: [0, '20%'], fontSize: 14, color: colorStr, //formatter: data.parmname,
|
||||
formatter: data.parmvalue + unit//data.parmvalue为实际值 acvalue为计算后的比例
|
||||
}, data: [{value: rate}]
|
||||
}]
|
||||
};
|
||||
myChart.setOption(option);
|
||||
myChart.resize();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* echart折线图--单点
|
||||
*/
|
||||
@ -199,83 +511,420 @@ function echartLine(unitId, mpointCode, echartId) {
|
||||
}
|
||||
|
||||
/**
|
||||
* echart柱状图--单点
|
||||
* echart混合图--双柱状+折线
|
||||
*/
|
||||
function echartColumnar(unitId, mpointCode, echartId) {
|
||||
function echartMixed(unitId, mpointCode, echartId) {
|
||||
var myChart = echarts.init(document.getElementById(echartId));
|
||||
|
||||
$.ajax({
|
||||
type: 'GET',
|
||||
url: ext.contextPath + '/work/mpoint/getValueMonth.do?unitId=' + unitId + '&mpointCode=' + mpointCode,
|
||||
async: true,
|
||||
globle: false,
|
||||
error: function () {
|
||||
return false;
|
||||
var datastr = {
|
||||
"barData1": {
|
||||
"name": "工业进水量",
|
||||
"data": [89483, 96870, 85420, 92150, 88960, 95340, 91280]
|
||||
},
|
||||
success: function (data) {
|
||||
var data = eval('(' + data + ')');
|
||||
var option = {
|
||||
color: '#62AEDF', tooltip: {
|
||||
trigger: 'axis', axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
}
|
||||
}, xAxis: {
|
||||
type: 'category',
|
||||
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31']
|
||||
}, yAxis: {
|
||||
type: 'value'
|
||||
}, title: [{
|
||||
left: 'center', text: data.name
|
||||
}], grid: {
|
||||
left: '3%', right: '4%', bottom: '3%', containLabel: true
|
||||
}, series: [{
|
||||
data: data.datalist, type: 'bar', showBackground: true
|
||||
// backgroundStyle: {
|
||||
// //color: '#62AEDF'
|
||||
// }
|
||||
}]
|
||||
};
|
||||
myChart.setOption(option);
|
||||
myChart.resize();
|
||||
}
|
||||
});
|
||||
"barData2": {
|
||||
"name": "工业出水量",
|
||||
"data": [87297, 88460, 82100, 89500, 85600, 91200, 88500]
|
||||
},
|
||||
"barData3": {
|
||||
"name": "生活进水量",
|
||||
"data": [89483, 96870, 85420, 92150, 88960, 95340, 91280]
|
||||
},
|
||||
"barData4": {
|
||||
"name": "生活出水量",
|
||||
"data": [87297, 88460, 82100, 89500, 85600, 91200, 88500]
|
||||
},
|
||||
"lineData": {
|
||||
"name": "累计水量",
|
||||
"data": [176780, 185330, 167520, 181650, 174560, 186540, 179780]
|
||||
},
|
||||
"timeJson": [
|
||||
"2026-03-10",
|
||||
"2026-03-11",
|
||||
"2026-03-12",
|
||||
"2026-03-13",
|
||||
"2026-03-14",
|
||||
"2026-03-15",
|
||||
"2026-03-16"
|
||||
]
|
||||
};
|
||||
|
||||
var option = {
|
||||
color: ['#67D89F', '#FFBB00', '#5B8FF9', '#F6903D', '#EE6666'],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: [datastr.barData1.name, datastr.barData2.name, datastr.barData3.name, datastr.barData4.name, datastr.lineData.name]
|
||||
},
|
||||
xAxis: [{
|
||||
type: 'category',
|
||||
axisLabel: {
|
||||
interval: 0
|
||||
},
|
||||
data: datastr.timeJson
|
||||
}],
|
||||
yAxis: [{
|
||||
type: 'value',
|
||||
name: '水量(m³)',
|
||||
position: 'left'
|
||||
}],
|
||||
grid: {
|
||||
left: '2%',
|
||||
right: '5%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: datastr.barData1.name,
|
||||
type: 'bar',
|
||||
barWidth: 20,
|
||||
data: datastr.barData1.data
|
||||
},
|
||||
{
|
||||
name: datastr.barData2.name,
|
||||
type: 'bar',
|
||||
barWidth: 20,
|
||||
data: datastr.barData2.data
|
||||
},
|
||||
{
|
||||
name: datastr.barData3.name,
|
||||
type: 'bar',
|
||||
barWidth: 20,
|
||||
data: datastr.barData3.data
|
||||
},
|
||||
{
|
||||
name: datastr.barData4.name,
|
||||
type: 'bar',
|
||||
barWidth: 20,
|
||||
data: datastr.barData4.data
|
||||
},
|
||||
{
|
||||
name: datastr.lineData.name,
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 6,
|
||||
lineStyle: {
|
||||
width: 2
|
||||
},
|
||||
data: datastr.lineData.data
|
||||
}
|
||||
]
|
||||
};
|
||||
myChart.setOption(option);
|
||||
myChart.resize();
|
||||
}
|
||||
|
||||
/**
|
||||
* echart曲线图--单点
|
||||
*/
|
||||
function echartLine2(unitId, mpointCode, echartId) {
|
||||
var myChart = echarts.init(document.getElementById(echartId));
|
||||
|
||||
var datastr = {
|
||||
"dataJson": [
|
||||
{
|
||||
"data": [
|
||||
89483.1,
|
||||
96870.97,
|
||||
85420.5,
|
||||
92150.3,
|
||||
88960.8,
|
||||
95340.2,
|
||||
91280.6
|
||||
],
|
||||
"name": "每日进水出水总量",
|
||||
"type": "line",
|
||||
"smooth": true,
|
||||
"symbol": "circle",
|
||||
"symbolSize": 6,
|
||||
"lineStyle": {
|
||||
"width": 2
|
||||
},
|
||||
"areaStyle": {
|
||||
"opacity": 0.1
|
||||
}
|
||||
},
|
||||
],
|
||||
"timeJson": [
|
||||
"2026-03-10",
|
||||
"2026-03-11",
|
||||
"2026-03-12",
|
||||
"2026-03-13",
|
||||
"2026-03-14",
|
||||
"2026-03-15",
|
||||
"2026-03-16"
|
||||
]
|
||||
}
|
||||
|
||||
var data1 = datastr.dataJson;
|
||||
var data2 = datastr.timeJson;
|
||||
|
||||
var option = {
|
||||
color: ['#67D89F', '#5B8FF9'],
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {},
|
||||
xAxis: [{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisLabel: {
|
||||
interval: 0
|
||||
},
|
||||
data: data2
|
||||
}],
|
||||
yAxis: [{
|
||||
type: 'value'
|
||||
}],
|
||||
grid: {
|
||||
left: '2%',
|
||||
right: '5%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
series: data1
|
||||
};
|
||||
myChart.setOption(option);
|
||||
myChart.resize();
|
||||
}
|
||||
|
||||
/**
|
||||
* echart柱状图--单点
|
||||
*/
|
||||
function echartColumnar2(unitId, mpointCode, echartId) {
|
||||
var myChart = echarts.init(document.getElementById(echartId));
|
||||
|
||||
var datastr = {
|
||||
"dataJson": [
|
||||
{
|
||||
"barWidth": 30,
|
||||
"stack": "total",
|
||||
"data": [
|
||||
89483.1,
|
||||
96870.97,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0
|
||||
],
|
||||
"name": "每日进水量",
|
||||
"label": {
|
||||
"show": "true"
|
||||
},
|
||||
"type": "bar"
|
||||
},
|
||||
{
|
||||
"barWidth": 30,
|
||||
"stack": "total",
|
||||
"data": [
|
||||
87297.59,
|
||||
88460.4,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0
|
||||
],
|
||||
"name": "每日出水量",
|
||||
"label": {
|
||||
"show": "true"
|
||||
},
|
||||
"type": "bar"
|
||||
}
|
||||
|
||||
],
|
||||
"timeJson": [
|
||||
"2026-03-10",
|
||||
"2026-03-11",
|
||||
"2026-03-12",
|
||||
"2026-03-13",
|
||||
"2026-03-14",
|
||||
"2026-03-15",
|
||||
"2026-03-16"
|
||||
]
|
||||
}
|
||||
|
||||
var data1 = datastr.dataJson;
|
||||
var data2 = datastr.timeJson;
|
||||
|
||||
var option = {
|
||||
color: ['#67D89F', '#FFBB00'], legend: {}, calculable: true, xAxis: [{
|
||||
type: 'category', axisLabel: {
|
||||
interval: 0,//代表显示所有x轴标签显示
|
||||
}, data: data2
|
||||
}], yAxis: [{
|
||||
type: 'value'
|
||||
}], grid: {
|
||||
left: '2%', right: '5%', bottom: '3%', containLabel: true
|
||||
}, series: data1
|
||||
};
|
||||
myChart.setOption(option);
|
||||
myChart.resize();
|
||||
|
||||
// $.ajax({
|
||||
// type: 'GET',
|
||||
// url: ext.contextPath + '/work/mpoint/getValueMonth.do?unitId=' + unitId + '&mpointCode=' + mpointCode,
|
||||
// async: true,
|
||||
// globle: false,
|
||||
// error: function () {
|
||||
// return false;
|
||||
// },
|
||||
// success: function (data) {
|
||||
// var data = eval('(' + data + ')');
|
||||
// var option = {
|
||||
// color: '#62AEDF', tooltip: {
|
||||
// trigger: 'axis', axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
// type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
// }
|
||||
// }, xAxis: {
|
||||
// type: 'category',
|
||||
// data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31']
|
||||
// }, yAxis: {
|
||||
// type: 'value'
|
||||
// }, title: [{
|
||||
// left: 'center', text: data.name
|
||||
// }], grid: {
|
||||
// left: '3%', right: '4%', bottom: '3%', containLabel: true
|
||||
// }, series: [{
|
||||
// data: data.datalist, type: 'bar', showBackground: true
|
||||
// // backgroundStyle: {
|
||||
// // //color: '#62AEDF'
|
||||
// // }
|
||||
// }]
|
||||
// };
|
||||
// myChart.setOption(option);
|
||||
// myChart.resize();
|
||||
// }
|
||||
// });
|
||||
}
|
||||
|
||||
/**
|
||||
* echart柱状图--多点
|
||||
*/
|
||||
function echartColumnar2(unitId, mpointCode, echartId) {
|
||||
function echartColumnar1(unitId, mpointCode, echartId) {
|
||||
var myChart = echarts.init(document.getElementById(echartId));
|
||||
|
||||
$.ajax({
|
||||
type: 'GET',
|
||||
url: ext.contextPath + '/work/mpoint/getValueWeekS.do?unitId=' + unitId + '&mpointCode=' + mpointCode,
|
||||
async: true,
|
||||
globle: false,
|
||||
error: function () {
|
||||
return false;
|
||||
},
|
||||
success: function (data) {
|
||||
var datastr = eval('(' + data + ')');
|
||||
|
||||
var data1 = datastr.dataJson;
|
||||
var data2 = datastr.timeJson;
|
||||
var datastr = {
|
||||
"dataJson": [
|
||||
{
|
||||
"barWidth": 30,
|
||||
"stack": "total",
|
||||
"data": [
|
||||
89483.1,
|
||||
96870.97,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0
|
||||
],
|
||||
"name": "每日进水量",
|
||||
"label": {
|
||||
"show": "true"
|
||||
},
|
||||
"type": "bar"
|
||||
},
|
||||
{
|
||||
"barWidth": 30,
|
||||
"stack": "total",
|
||||
"data": [
|
||||
87297.59,
|
||||
88460.4,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0
|
||||
],
|
||||
"name": "每日出水量",
|
||||
"label": {
|
||||
"show": "true"
|
||||
},
|
||||
"type": "bar"
|
||||
}
|
||||
|
||||
var option = {
|
||||
color: ['#67D89F', '#FFBB00'], legend: {}, calculable: true, xAxis: [{
|
||||
type: 'category', axisLabel: {
|
||||
interval: 0,//代表显示所有x轴标签显示
|
||||
}, data: data2
|
||||
}], yAxis: [{
|
||||
type: 'value'
|
||||
}], grid: {
|
||||
left: '2%', right: '5%', bottom: '3%', containLabel: true
|
||||
}, series: data1
|
||||
};
|
||||
myChart.setOption(option);
|
||||
myChart.resize();
|
||||
}
|
||||
});
|
||||
],
|
||||
"timeJson": [
|
||||
"2026-03-10",
|
||||
"2026-03-11",
|
||||
"2026-03-12",
|
||||
"2026-03-13",
|
||||
"2026-03-14",
|
||||
"2026-03-15",
|
||||
"2026-03-16"
|
||||
]
|
||||
}
|
||||
|
||||
var data1 = datastr.dataJson;
|
||||
var data2 = datastr.timeJson;
|
||||
|
||||
// var option = {
|
||||
// color: ['#67D89F', '#FFBB00'], legend: {}, calculable: true, xAxis: [{
|
||||
// type: 'category', axisLabel: {
|
||||
// interval: 0,//代表显示所有x轴标签显示
|
||||
// }, data: data2
|
||||
// }], yAxis: [{
|
||||
// type: 'value'
|
||||
// }], grid: {
|
||||
// left: '2%', right: '5%', bottom: '3%', containLabel: true
|
||||
// }, series: data1
|
||||
// };
|
||||
// myChart.setOption(option);
|
||||
// myChart.resize();
|
||||
|
||||
|
||||
|
||||
var option = {
|
||||
color: ['#67D89F', '#FFBB00'], legend: {}, calculable: true, xAxis: [{
|
||||
type: 'category', axisLabel: {
|
||||
interval: 0,//代表显示所有x轴标签显示
|
||||
}, data: data2
|
||||
}], yAxis: [{
|
||||
type: 'value'
|
||||
}], grid: {
|
||||
left: '2%', right: '5%', bottom: '3%', containLabel: true
|
||||
}, series: data1
|
||||
};
|
||||
myChart.setOption(option);
|
||||
myChart.resize();
|
||||
|
||||
|
||||
// $.ajax({
|
||||
// type: 'GET',
|
||||
// url: ext.contextPath + '/work/mpoint/getValueWeekS.do?unitId=' + unitId + '&mpointCode=' + mpointCode,
|
||||
// async: true,
|
||||
// globle: false,
|
||||
// error: function () {
|
||||
// return false;
|
||||
// },
|
||||
// success: function (data) {
|
||||
// var datastr = eval('(' + data + ')');
|
||||
//
|
||||
// var data1 = datastr.dataJson;
|
||||
// var data2 = datastr.timeJson;
|
||||
//
|
||||
// var option = {
|
||||
// color: ['#67D89F', '#FFBB00'], legend: {}, calculable: true, xAxis: [{
|
||||
// type: 'category', axisLabel: {
|
||||
// interval: 0,//代表显示所有x轴标签显示
|
||||
// }, data: data2
|
||||
// }], yAxis: [{
|
||||
// type: 'value'
|
||||
// }], grid: {
|
||||
// left: '2%', right: '5%', bottom: '3%', containLabel: true
|
||||
// }, series: data1
|
||||
// };
|
||||
// myChart.setOption(option);
|
||||
// myChart.resize();
|
||||
// }
|
||||
// });
|
||||
}
|
||||
|
||||
/**
|
||||
@ -328,3 +977,5 @@ function proDatavisualFrame(unitId, proDatavisualFrameId) {
|
||||
parent.addTab(proDatavisualFrameId, '工艺可视化', 'process/dataVisualFrame/view.do?frameId=' + proDatavisualFrameId + '&unitId=' + unitId);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -166,9 +166,8 @@
|
||||
$.widget.bridge('uibutton', $.ui.button);
|
||||
</script>
|
||||
<!-- END 布局样式 -->
|
||||
<LINK href="<%=contextPath%>/IMG/sipai.ico" type="image/x-icon" rel="shortcut icon"></LINK>
|
||||
<!-- END HEAD -->
|
||||
<LINK href="<%=contextPath%>/IMG/logo.ico" type="image/x-icon" rel="shortcut icon"></LINK>
|
||||
<LINK href="<%=contextPath%>/IMG/logo.png" type="image/png" rel="shortcut icon"></LINK>
|
||||
<LINK href="<%=contextPath%>/IMG/logo.png" type="image/png" rel="icon"></LINK>
|
||||
|
||||
<script type="text/javascript" src="<%=contextPath%>/node_modules/bootstrap/layer/layer.js" charset="utf-8"></script>
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
839
src/main/webapp/jsp/main_JS_Company2.jsp
Normal file
839
src/main/webapp/jsp/main_JS_Company2.jsp
Normal file
@ -0,0 +1,839 @@
|
||||
<%@ 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.base.MainConfig" %>
|
||||
<% request.setAttribute("type_pro", MainConfig.type_pro); %>
|
||||
<% request.setAttribute("type_safe", MainConfig.type_safe); %>
|
||||
<% request.setAttribute("type_eff", MainConfig.type_eff); %>
|
||||
<% request.setAttribute("type_pic", MainConfig.type_pic); %>
|
||||
|
||||
<!DOCTYPE html>
|
||||
|
||||
<head>
|
||||
<title><%= ServerObject.atttable.get("TOPTITLE")%>
|
||||
</title>
|
||||
|
||||
<!-- 引用页头及CSS页-->
|
||||
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
||||
<!-- echarts-->
|
||||
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/echarts/echarts.4.1.0.min.js"
|
||||
charset="utf-8"></script>
|
||||
|
||||
<script type="text/javascript" src="<%=request.getContextPath()%>/JS/main/main_js.js" charset="utf-8"></script>
|
||||
<style>
|
||||
/*
|
||||
根据不同分辨率显示不同px的文字大小
|
||||
*/
|
||||
@media (min-width: 1080px) {
|
||||
|
||||
}
|
||||
|
||||
@media (min-width: 1550px) {
|
||||
|
||||
}
|
||||
|
||||
.fontValue {
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
margin-left: 70px;
|
||||
font-size: 20px;
|
||||
color: #ffffff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.fontText {
|
||||
margin: 20px;
|
||||
font-size: 18px;
|
||||
color: #ffffff;
|
||||
font-weight: bold;
|
||||
}
|
||||
.carousel-inner,
|
||||
.carousel-inner >.item,
|
||||
.carousel-inner >.item >img{
|
||||
width:100%;height:100%;
|
||||
}
|
||||
.carousel-caption{
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
background-color: RGBA(55,141,204,0.5);
|
||||
bottom: 10px;
|
||||
}
|
||||
.section-header {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
float: left;
|
||||
border-bottom: 2px solid #67aad7;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
color: #0c4377;
|
||||
padding-left: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: linear-gradient(to right, rgba(103, 170, 215, 0.1), transparent);
|
||||
}
|
||||
.section-header::before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 4px;
|
||||
height: 60%;
|
||||
background-color: #0c4377;
|
||||
margin-right: 10px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
|
||||
|
||||
$(function () {
|
||||
firstFun();
|
||||
});
|
||||
|
||||
window.onresize = function () {
|
||||
firstFun();
|
||||
}
|
||||
|
||||
function firstFun() {
|
||||
// 不再设置固定高度，让页面自然滚动
|
||||
|
||||
$.ajax({
|
||||
type: 'GET',
|
||||
url: ext.contextPath + '/base/mainConfig/getJson.do',
|
||||
async: true,
|
||||
data: {unitId: unitId},
|
||||
globle: false,
|
||||
error: function () {
|
||||
return false;
|
||||
},
|
||||
success: function (data1) {
|
||||
// var data = eval('(' + data + ')');
|
||||
|
||||
console.log(data);
|
||||
var data = {
|
||||
"status": "pass",
|
||||
"mpcode": [
|
||||
{
|
||||
"divId": "valueProduce1_js",
|
||||
"funName": "getValue",
|
||||
"id": "9A46F4D7-3C49-42DD-9603-BC55890F6829",
|
||||
"memo": "AUTO_HOME_PRO_VAL_1",
|
||||
"morder": 1,
|
||||
"mpointId": "C_Jsssll",
|
||||
"sql": "",
|
||||
"testId": "textProduce1_js",
|
||||
"type": "pro",
|
||||
"unitId": "0533JS",
|
||||
"where": ""
|
||||
},
|
||||
{
|
||||
"divId": "",
|
||||
"funName": "getPic",
|
||||
"id": "D071B1E9-EADC-466A-86E8-300EE5ED35B2",
|
||||
"memo": "AUTO_HOME_PIC",
|
||||
"morder": 1,
|
||||
"mpointId": "",
|
||||
"sql": "",
|
||||
"testId": "",
|
||||
"type": "pic",
|
||||
"unitId": "0533JS",
|
||||
"where": ""
|
||||
},
|
||||
{
|
||||
"divId": "valueProduce2_js",
|
||||
"funName": "getValue",
|
||||
"id": "7A212EF9-6A0D-415D-BEA5-5A1B23250069",
|
||||
"memo": "AUTO_HOME_PRO_VAL_2",
|
||||
"morder": 2,
|
||||
"mpointId": "C_Csssll",
|
||||
"sql": "",
|
||||
"testId": "textProduce2_js",
|
||||
"type": "pro",
|
||||
"unitId": "0533JS",
|
||||
"where": ""
|
||||
},
|
||||
{
|
||||
"divId": "valueProduce3_js",
|
||||
"funName": "getValue",
|
||||
"id": "37D4878E-82D5-4A06-A7FC-3D1D9298D5F7",
|
||||
"memo": "AUTO_HOME_PRO_VAL_3",
|
||||
"morder": 3,
|
||||
"mpointId": "C_Mrddh",
|
||||
"sql": "",
|
||||
"testId": "textProduce3_js",
|
||||
"type": "pro",
|
||||
"unitId": "0533JS",
|
||||
"where": ""
|
||||
},
|
||||
{
|
||||
"divId": "myChartProduce1_js",
|
||||
"funName": "echartPie",
|
||||
"id": "D88301BC-ACF7-48F5-A1B1-6672CB686786",
|
||||
"memo": "AUTO_HOME_PRO_PIE_1",
|
||||
"morder": 14,
|
||||
"mpointId": "D_JinSCOD",
|
||||
"sql": "",
|
||||
"testId": "myChartProduceText1_js",
|
||||
"type": "pro",
|
||||
"unitId": "0533JS",
|
||||
"where": ""
|
||||
},
|
||||
{
|
||||
"divId": "myChartProduce2_js",
|
||||
"funName": "echartPie",
|
||||
"id": "D90B7C5B-76F4-4B70-9C65-58AD3F70C127",
|
||||
"memo": "AUTO_HOME_PRO_PIE_2",
|
||||
"morder": 15,
|
||||
"mpointId": "D_JinSPH",
|
||||
"sql": "",
|
||||
"testId": "myChartProduceText2_js",
|
||||
"type": "pro",
|
||||
"unitId": "0533JS",
|
||||
"where": ""
|
||||
},
|
||||
{
|
||||
"divId": "myChartProduce3_js",
|
||||
"funName": "echartPie",
|
||||
"id": "B2309C35-5F47-402C-A7C3-F710F67A0AE3",
|
||||
"memo": "AUTO_HOME_PRO_PIE_3",
|
||||
"morder": 16,
|
||||
"mpointId": "C_Jstp",
|
||||
"sql": "",
|
||||
"testId": "myChartProduceText3_js",
|
||||
"type": "pro",
|
||||
"unitId": "0533JS",
|
||||
"where": ""
|
||||
},
|
||||
{
|
||||
"divId": "myChartProduce4_js",
|
||||
"funName": "echartPie",
|
||||
"id": "B054F2EA-CF10-4976-B308-EE6A929468A3",
|
||||
"memo": "AUTO_HOME_PRO_PIE_4",
|
||||
"morder": 17,
|
||||
"mpointId": "C_Jstn",
|
||||
"sql": "",
|
||||
"testId": "myChartProduceText4_js",
|
||||
"type": "pro",
|
||||
"unitId": "0533JS",
|
||||
"where": ""
|
||||
},
|
||||
{
|
||||
"divId": "myChartProduce5_js",
|
||||
"funName": "echartPie",
|
||||
"id": "0DDD5D71-2D8F-400D-A99E-0D19C3D8DADF",
|
||||
"memo": "AUTO_HOME_PRO_PIE_5",
|
||||
"morder": 18,
|
||||
"mpointId": "C_Jsnh4n",
|
||||
"sql": "",
|
||||
"testId": "myChartProduceText5_js",
|
||||
"type": "pro",
|
||||
"unitId": "0533JS",
|
||||
"where": ""
|
||||
},
|
||||
{
|
||||
"divId": "myChartProduce6_js",
|
||||
"funName": "echartPie",
|
||||
"id": "DAB3ABF7-5135-462F-80FC-E717A09391C0",
|
||||
"memo": "AUTO_HOME_PRO_PIE_6",
|
||||
"morder": 19,
|
||||
"mpointId": "D_ChuSCOD",
|
||||
"sql": "",
|
||||
"testId": "myChartProduceText6_js",
|
||||
"type": "pro",
|
||||
"unitId": "0533JS",
|
||||
"where": ""
|
||||
},
|
||||
{
|
||||
"divId": "myChartProduce7_js",
|
||||
"funName": "echartPie",
|
||||
"id": "9864A8F9-6362-49F9-8F10-812E45F22FFB",
|
||||
"memo": "AUTO_HOME_PRO_PIE_7",
|
||||
"morder": 20,
|
||||
"mpointId": "D_ChuSPH",
|
||||
"sql": "",
|
||||
"testId": "myChartProduceText7_js",
|
||||
"type": "pro",
|
||||
"unitId": "0533JS",
|
||||
"where": ""
|
||||
},
|
||||
{
|
||||
"divId": "myChartProduce8_js",
|
||||
"funName": "echartPie",
|
||||
"id": "B989F914-9883-47BA-B261-F12DC2CA1365",
|
||||
"memo": "AUTO_HOME_PRO_PIE_8",
|
||||
"morder": 21,
|
||||
"mpointId": "C_Cstp",
|
||||
"sql": "",
|
||||
"testId": "myChartProduceText8_js",
|
||||
"type": "pro",
|
||||
"unitId": "0533JS",
|
||||
"where": ""
|
||||
},
|
||||
{
|
||||
"divId": "myChartProduce9_js",
|
||||
"funName": "echartPie",
|
||||
"id": "BBA7F23F-197F-4FF0-AD42-426DE4569907",
|
||||
"memo": "AUTO_HOME_PRO_PIE_9",
|
||||
"morder": 22,
|
||||
"mpointId": "C_Cstn",
|
||||
"sql": "",
|
||||
"testId": "myChartProduceText9_js",
|
||||
"type": "pro",
|
||||
"unitId": "0533JS",
|
||||
"where": ""
|
||||
},
|
||||
{
|
||||
"divId": "myChartProduce10_js",
|
||||
"funName": "echartPie",
|
||||
"id": "E179A4CE-D159-4B11-A517-7CC760C27E70",
|
||||
"memo": "AUTO_HOME_PRO_PIE_10",
|
||||
"morder": 23,
|
||||
"mpointId": "C_Csnh4n",
|
||||
"sql": "",
|
||||
"testId": "myChartProduceText10_js",
|
||||
"type": "pro",
|
||||
"unitId": "0533JS",
|
||||
"where": ""
|
||||
},
|
||||
{
|
||||
"divId": "myChartProduce11_js",
|
||||
"funName": "echartPie",
|
||||
"id": "E179A4CE-D159-4B11-A517-7CC760C27E70",
|
||||
"memo": "AUTO_HOME_PRO_PIE_10",
|
||||
"morder": 23,
|
||||
"mpointId": "C_Csnh4n",
|
||||
"sql": "",
|
||||
"testId": "myChartProduceText11_js",
|
||||
"type": "pro",
|
||||
"unitId": "0533JS",
|
||||
"where": ""
|
||||
},
|
||||
{
|
||||
"divId": "myChartProduce12_js",
|
||||
"funName": "echartPie",
|
||||
"id": "E179A4CE-D159-4B11-A517-7CC760C27E70",
|
||||
"memo": "AUTO_HOME_PRO_PIE_10",
|
||||
"morder": 23,
|
||||
"mpointId": "C_Csnh4n",
|
||||
"sql": "",
|
||||
"testId": "myChartProduceText12_js",
|
||||
"type": "pro",
|
||||
"unitId": "0533JS",
|
||||
"where": ""
|
||||
},
|
||||
{
|
||||
"divId": "myChartProduce13_js",
|
||||
"funName": "echartPie",
|
||||
"id": "E179A4CE-D159-4B11-A517-7CC760C27E70",
|
||||
"memo": "AUTO_HOME_PRO_PIE_10",
|
||||
"morder": 23,
|
||||
"mpointId": "C_Csnh4n",
|
||||
"sql": "",
|
||||
"testId": "myChartProduceText13_js",
|
||||
"type": "pro",
|
||||
"unitId": "0533JS",
|
||||
"where": ""
|
||||
},
|
||||
{
|
||||
"divId": "myChartProduce14_js",
|
||||
"funName": "echartPie",
|
||||
"id": "E179A4CE-D159-4B11-A517-7CC760C27E70",
|
||||
"memo": "AUTO_HOME_PRO_PIE_10",
|
||||
"morder": 23,
|
||||
"mpointId": "C_Csnh4n",
|
||||
"sql": "",
|
||||
"testId": "myChartProduceText14_js",
|
||||
"type": "pro",
|
||||
"unitId": "0533JS",
|
||||
"where": ""
|
||||
},
|
||||
{
|
||||
"divId": "myChartProduce15_js",
|
||||
"funName": "echartPie",
|
||||
"id": "E179A4CE-D159-4B11-A517-7CC760C27E70",
|
||||
"memo": "AUTO_HOME_PRO_PIE_10",
|
||||
"morder": 23,
|
||||
"mpointId": "C_Csnh4n",
|
||||
"sql": "",
|
||||
"testId": "myChartProduceText15_js",
|
||||
"type": "pro",
|
||||
"unitId": "0533JS",
|
||||
"where": ""
|
||||
},
|
||||
{
|
||||
"divId": "myChartProduce16_js",
|
||||
"funName": "echartPie",
|
||||
"id": "E179A4CE-D159-4B11-A517-7CC760C27E70",
|
||||
"memo": "AUTO_HOME_PRO_PIE_10",
|
||||
"morder": 23,
|
||||
"mpointId": "C_Csnh4n",
|
||||
"sql": "",
|
||||
"testId": "myChartProduceText16_js",
|
||||
"type": "pro",
|
||||
"unitId": "0533JS",
|
||||
"where": ""
|
||||
},
|
||||
{
|
||||
"divId": "myChartProduce17_js",
|
||||
"funName": "echartPie",
|
||||
"id": "E179A4CE-D159-4B11-A517-7CC760C27E70",
|
||||
"memo": "AUTO_HOME_PRO_PIE_10",
|
||||
"morder": 23,
|
||||
"mpointId": "C_Csnh4n",
|
||||
"sql": "",
|
||||
"testId": "myChartProduceText17_js",
|
||||
"type": "pro",
|
||||
"unitId": "0533JS",
|
||||
"where": ""
|
||||
},
|
||||
{
|
||||
"divId": "myChartProduce18_js",
|
||||
"funName": "echartPie",
|
||||
"id": "E179A4CE-D159-4B11-A517-7CC760C27E70",
|
||||
"memo": "AUTO_HOME_PRO_PIE_10",
|
||||
"morder": 23,
|
||||
"mpointId": "C_Csnh4n",
|
||||
"sql": "",
|
||||
"testId": "myChartProduceText18_js",
|
||||
"type": "pro",
|
||||
"unitId": "0533JS",
|
||||
"where": ""
|
||||
},
|
||||
{
|
||||
"divId": "myChartProduce19_js",
|
||||
"funName": "echartPie",
|
||||
"id": "E179A4CE-D159-4B11-A517-7CC760C27E70",
|
||||
"memo": "AUTO_HOME_PRO_PIE_10",
|
||||
"morder": 23,
|
||||
"mpointId": "C_Csnh4n",
|
||||
"sql": "",
|
||||
"testId": "myChartProduceText19_js",
|
||||
"type": "pro",
|
||||
"unitId": "0533JS",
|
||||
"where": ""
|
||||
},
|
||||
{
|
||||
"divId": "myChartProduce20_js",
|
||||
"funName": "echartPie",
|
||||
"id": "E179A4CE-D159-4B11-A517-7CC760C27E70",
|
||||
"memo": "AUTO_HOME_PRO_PIE_10",
|
||||
"morder": 23,
|
||||
"mpointId": "C_Csnh4n",
|
||||
"sql": "",
|
||||
"testId": "myChartProduceText20_js",
|
||||
"type": "pro",
|
||||
"unitId": "0533JS",
|
||||
"where": ""
|
||||
},
|
||||
{
|
||||
"divId": "safe_value_1",
|
||||
"funName": "getValue",
|
||||
"id": "E39427C5-3120-46CB-B94B-53B76190ED39",
|
||||
"memo": "AUTO_HOME_SAFE_VAL_1",
|
||||
"morder": 44,
|
||||
"mpointId": "C_Ydrjjs",
|
||||
"sql": "",
|
||||
"testId": "safe_text_1",
|
||||
"type": "safe",
|
||||
"unitId": "0533JS",
|
||||
"where": ""
|
||||
},
|
||||
{
|
||||
"divId": "safe_value_2",
|
||||
"funName": "getValue",
|
||||
"id": "541399E8-7413-444F-85A9-22D746E4A3A2",
|
||||
"memo": "AUTO_HOME_SAFE_VAL_2",
|
||||
"morder": 45,
|
||||
"mpointId": "C_Ndzjs",
|
||||
"sql": "",
|
||||
"testId": "safe_text_2",
|
||||
"type": "safe",
|
||||
"unitId": "0533JS",
|
||||
"where": ""
|
||||
},
|
||||
{
|
||||
"divId": "safe_value_3",
|
||||
"funName": "getValue",
|
||||
"id": "E109D0CB-4458-4A63-B714-A6AC7B6979F1",
|
||||
"memo": "AUTO_HOME_SAFE_VAL_3",
|
||||
"morder": 46,
|
||||
"mpointId": "C_Sbwhl",
|
||||
"sql": "",
|
||||
"testId": "safe_text_3",
|
||||
"type": "safe",
|
||||
"unitId": "0533JS",
|
||||
"where": ""
|
||||
},
|
||||
{
|
||||
"divId": "safe_value_4",
|
||||
"funName": "getValue",
|
||||
"id": "024F849A-E7F3-4665-862A-49B2944277B7",
|
||||
"memo": "AUTO_HOME_SAFE_VAL_4",
|
||||
"morder": 47,
|
||||
"mpointId": "C_Mrddh",
|
||||
"sql": "",
|
||||
"testId": "safe_text_4",
|
||||
"type": "safe",
|
||||
"unitId": "0533JS",
|
||||
"where": ""
|
||||
},
|
||||
{
|
||||
"divId": "myChartProduce8",
|
||||
"funName": "echartMixed",
|
||||
"id": "B414A41C-DC87-47A0-BB07-5BC64E5E61CB",
|
||||
"memo": "AUTO_HOME_SAFE_BAR",
|
||||
"morder": 100,
|
||||
"mpointId": "C_Mrjsy,C_Mrjse",
|
||||
"sql": "",
|
||||
"testId": "",
|
||||
"type": "safe",
|
||||
"unitId": "0533JS",
|
||||
"where": ""
|
||||
},
|
||||
// {
|
||||
// "divId": "myChartProduce9",
|
||||
// "funName": "echartColumnar2",
|
||||
// "id": "B414A41C-DC87-47A0-BB07-5BC64E5E61CB",
|
||||
// "memo": "AUTO_HOME_SAFE_BAR",
|
||||
// "morder": 100,
|
||||
// "mpointId": "C_Mrjsy,C_Mrjse",
|
||||
// "sql": "",
|
||||
// "testId": "",
|
||||
// "type": "safe",
|
||||
// "unitId": "0533JS",
|
||||
// "where": ""
|
||||
// },
|
||||
// {
|
||||
// "divId": "myChartProduce10",
|
||||
// "funName": "echartLine2",
|
||||
// "id": "B414A41C-DC87-47A0-BB07-5BC64E5E61CB",
|
||||
// "memo": "AUTO_HOME_SAFE_BAR",
|
||||
// "morder": 100,
|
||||
// "mpointId": "C_Mrjsy,C_Mrjse",
|
||||
// "sql": "",
|
||||
// "testId": "",
|
||||
// "type": "safe",
|
||||
// "unitId": "0533JS",
|
||||
// "where": ""
|
||||
// }
|
||||
]
|
||||
}
|
||||
|
||||
for (var i = 0; i < data.mpcode.length; i++) {
|
||||
var code = data.mpcode[i].mpointId;
|
||||
var funname = data.mpcode[i].funName;
|
||||
var divid = data.mpcode[i].divId;
|
||||
var testid = data.mpcode[i].testId;
|
||||
var mpointId = data.mpcode[i].mpointId;
|
||||
if (data.mpcode[i].type == '${type_pro}') {//生产
|
||||
eval(funname + "('" + unitId + "','" + code + "','" + divid + "','" + testid + "')")
|
||||
}
|
||||
if (data.mpcode[i].type == '${type_safe}') {//安全
|
||||
eval(funname + "('" + unitId + "','" + code + "','" + divid + "','" + testid + "')")
|
||||
}
|
||||
if (data.mpcode[i].type == '${type_eff}') {//效率
|
||||
eval(funname + "('" + unitId + "','" + code + "','" + divid + "','" + testid + "')")
|
||||
}
|
||||
if (data.mpcode[i].type == '${type_pic}') {//左上角图片
|
||||
//eval(funname + "('" + unitId + "')")
|
||||
getUnitsByUnitId4Select(unitId,funname,mpointId);
|
||||
}
|
||||
}
|
||||
//安全
|
||||
// echartColumnar2(unitId, 'TH_03_FIT040001D_FLOW_C', 'myChartsafe1');
|
||||
}
|
||||
});
|
||||
|
||||
//优良差
|
||||
$(".evaluateIcon").attr("src", ext.contextPath + "/IMG/main/evaluate.png");
|
||||
|
||||
//左上角图片
|
||||
// $("#mainImg").attr("src", ext.contextPath + "/IMG/main/main.jpg");
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="mainDiv" style="background:#f1f1f1;min-height:100vh; width:100%;">
|
||||
|
||||
<div style="float:left;width:100%;">
|
||||
<!-- 水质指标区域 -->
|
||||
<div style="float:left;width:100%;padding:5px;">
|
||||
<div style="width:100%;background-color:#ffffff;border-radius:5px;">
|
||||
<div class="section-header">
|
||||
金山卫污水厂
|
||||
</div>
|
||||
<div style="display:flex;width:100%;">
|
||||
<!-- 左侧卡片 -->
|
||||
<div style="width:300px;min-width:300px;display:flex;flex-direction:column;justify-content:space-evenly;padding:10px;gap:10px;">
|
||||
<div></div>
|
||||
<div style="width:100%;height:120px;background-color:#cbe3f9;border-radius:5px;">
|
||||
<div class="fontText" style="color: #0c4377;" id="textProduce1_js">进水瞬时流量(m³/h)</div>
|
||||
<div class="fontValue" style="color: #0c4377;" id="valueProduce1_js">3551</div>
|
||||
</div>
|
||||
<div style="width:100%;height:120px;background-color:#badaf8;border-radius:5px;">
|
||||
<div class="fontText" style="color: #0c4377;" id="textProduce2_js">出水瞬时流量(m³/h)</div>
|
||||
<div class="fontValue" style="color: #0c4377;" id="valueProduce2_js">3551</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div style="width:100%;height:120px;background-color:#73afd8;border-radius:5px;">
|
||||
<div class="fontText" style="color: #0c4377;" id="textProduce3_js">进水瞬时流量(m³/h)</div>
|
||||
<div class="fontValue" style="color: #0c4377;" id="valueProduce3_js">3551</div>
|
||||
</div>
|
||||
<div style="width:100%;height:120px;background-color:#378dcc;border-radius:5px;">
|
||||
<div class="fontText" style="color: #0c4377;" id="textProduce4_js">出水瞬时流量(m³/h)</div>
|
||||
<div class="fontValue" style="color: #0c4377;" id="valueProduce4_js">3551</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 右侧图表区域 -->
|
||||
<div style="flex:1;padding:10px;">
|
||||
<!-- 工业污水质量指标 标题 -->
|
||||
<div style="width:100%;height:30px;font-weight:bold;color:#0c4377;padding-left:10px;border-bottom:2px solid #67aad7;display:flex;align-items:center;">
|
||||
工业污水质量指标
|
||||
</div>
|
||||
<!-- 工业污水质量指标 第一行 (1-5) -->
|
||||
<div style="width:100%;height:180px;display:flex;padding:5px 0;">
|
||||
<div style="width:20%;height:100%;padding:0 5px;">
|
||||
<div style="width:100%;height:30px;text-align:center; line-height: 40px;" id="myChartProduceText1_js">-</div>
|
||||
<div style="width:100%;height:110px;" id="myChartProduce1_js"></div>
|
||||
</div>
|
||||
<div style="width:20%;height:100%;padding:0 5px;">
|
||||
<div style="width:100%;height:30px;text-align:center; line-height: 40px" id="myChartProduceText2_js">-</div>
|
||||
<div style="width:100%;height:110px;" id="myChartProduce2_js"></div>
|
||||
</div>
|
||||
<div style="width:20%;height:100%;padding:0 5px;">
|
||||
<div style="width:100%;height:25px;text-align:center; line-height: 40px" id="myChartProduceText3_js">-</div>
|
||||
<div style="width:100%;height:110px;" id="myChartProduce3_js"></div>
|
||||
</div>
|
||||
<div style="width:20%;height:100%;padding:0 5px;">
|
||||
<div style="width:100%;height:25px;text-align:center; line-height: 40px" id="myChartProduceText4_js">-</div>
|
||||
<div style="width:100%;height:110px;" id="myChartProduce4_js"></div>
|
||||
</div>
|
||||
<div style="width:20%;height:100%;padding:0 5px;">
|
||||
<div style="width:100%;height:25px;text-align:center; line-height: 40px" id="myChartProduceText5_js">-</div>
|
||||
<div style="width:100%;height:110px;" id="myChartProduce5_js"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 工业污水质量指标 第二行 (6-10) -->
|
||||
<div style="width:100%;height:180px;display:flex;padding:5px 0;">
|
||||
<div style="width:20%;height:100%;padding:0 5px;">
|
||||
<div style="width:100%;height:25px;text-align:center; line-height: 40px" id="myChartProduceText6_js">-</div>
|
||||
<div style="width:100%;height:110px;" id="myChartProduce6_js"></div>
|
||||
</div>
|
||||
<div style="width:20%;height:100%;padding:0 5px;">
|
||||
<div style="width:100%;height:25px;text-align:center; line-height: 40px" id="myChartProduceText7_js">-</div>
|
||||
<div style="width:100%;height:110px;" id="myChartProduce7_js"></div>
|
||||
</div>
|
||||
<div style="width:20%;height:100%;padding:0 5px;">
|
||||
<div style="width:100%;height:25px;text-align:center; line-height: 40px" id="myChartProduceText8_js">-</div>
|
||||
<div style="width:100%;height:110px;" id="myChartProduce8_js"></div>
|
||||
</div>
|
||||
<div style="width:20%;height:100%;padding:0 5px;">
|
||||
<div style="width:100%;height:25px;text-align:center; line-height: 40px" id="myChartProduceText9_js">-</div>
|
||||
<div style="width:100%;height:110px;" id="myChartProduce9_js"></div>
|
||||
</div>
|
||||
<div style="width:20%;height:100%;padding:0 5px;">
|
||||
<div style="width:100%;height:25px;text-align:center; line-height: 40px" id="myChartProduceText10_js">-</div>
|
||||
<div style="width:100%;height:110px;" id="myChartProduce10_js"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 生活污水质量指标 标题 -->
|
||||
<div style="width:100%;height:30px;font-weight:bold;color:#0c4377;padding-left:10px;border-bottom:2px solid #67aad7;display:flex;align-items:center;margin-top:10px;">
|
||||
生活污水质量指标
|
||||
|
||||
</div>
|
||||
<!-- 生活污水质量指标 第一行 (11-15) -->
|
||||
<div style="width:100%;height:180px;display:flex;padding:5px 0;">
|
||||
<div style="width:20%;height:100%;padding:0 5px;">
|
||||
<div style="width:100%;height:25px;text-align:center; line-height: 40px" id="myChartProduceText11_js">-</div>
|
||||
<div style="width:100%;height:110px;" id="myChartProduce11_js"></div>
|
||||
</div>
|
||||
<div style="width:20%;height:100%;padding:0 5px;">
|
||||
<div style="width:100%;height:25px;text-align:center; line-height: 40px" id="myChartProduceText12_js">-</div>
|
||||
<div style="width:100%;height:110px;" id="myChartProduce12_js"></div>
|
||||
</div>
|
||||
<div style="width:20%;height:100%;padding:0 5px;">
|
||||
<div style="width:100%;height:25px;text-align:center; line-height: 40px" id="myChartProduceText13_js">-</div>
|
||||
<div style="width:100%;height:110px;" id="myChartProduce13_js"></div>
|
||||
</div>
|
||||
<div style="width:20%;height:100%;padding:0 5px;">
|
||||
<div style="width:100%;height:25px;text-align:center; line-height: 40px" id="myChartProduceText14_js">-</div>
|
||||
<div style="width:100%;height:110px;" id="myChartProduce14_js"></div>
|
||||
</div>
|
||||
<div style="width:20%;height:100%;padding:0 5px;">
|
||||
<div style="width:100%;height:25px;text-align:center; line-height: 40px" id="myChartProduceText15_js">-</div>
|
||||
<div style="width:100%;height:110px;" id="myChartProduce15_js"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 生活污水质量指标 第二行 (16-20) -->
|
||||
<div style="width:100%;height:180px;display:flex;padding:5px 0;">
|
||||
<div style="width:20%;height:100%;padding:0 5px;">
|
||||
<div style="width:100%;height:25px;text-align:center; line-height: 40px" id="myChartProduceText16_js">-</div>
|
||||
<div style="width:100%;height:110px;" id="myChartProduce16_js"></div>
|
||||
</div>
|
||||
<div style="width:20%;height:100%;padding:0 5px;">
|
||||
<div style="width:100%;height:25px;text-align:center; line-height: 40px" id="myChartProduceText17_js">-</div>
|
||||
<div style="width:100%;height:110px;" id="myChartProduce17_js"></div>
|
||||
</div>
|
||||
<div style="width:20%;height:100%;padding:0 5px;">
|
||||
<div style="width:100%;height:25px;text-align:center; line-height: 40px" id="myChartProduceText18_js">-</div>
|
||||
<div style="width:100%;height:110px;" id="myChartProduce18_js"></div>
|
||||
</div>
|
||||
<div style="width:20%;height:100%;padding:0 5px;">
|
||||
<div style="width:100%;height:25px;text-align:center; line-height: 40px" id="myChartProduceText19_js">-</div>
|
||||
<div style="width:100%;height:110px;" id="myChartProduce19_js"></div>
|
||||
</div>
|
||||
<div style="width:20%;height:100%;padding:0 5px;">
|
||||
<div style="width:100%;height:25px;text-align:center; line-height: 40px" id="myChartProduceText20_js">-</div>
|
||||
<div style="width:100%;height:110px;" id="myChartProduce20_js"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 水量及电耗区域 -->
|
||||
<div style="float:left;width:100%;padding:5px;">
|
||||
<div style="width:100%;background-color:#ffffff;border-radius:5px;">
|
||||
<div class="section-header">
|
||||
水量及电耗
|
||||
</div>
|
||||
<div style="display:flex;width:100%;padding:10px;gap:10px;">
|
||||
<div style="flex:1;height:100px;background-color:#378dcc;border-radius:5px;">
|
||||
<div class="fontValue" id="safe_value_1">16532</div>
|
||||
<div class="fontText" id="safe_text_1">工业进水量 (m3)</div>
|
||||
</div>
|
||||
<div style="flex:1;height:100px;background-color:#67aad7;border-radius:5px;">
|
||||
<div class="fontValue" id="safe_value_2">16532</div>
|
||||
<div class="fontText" id="safe_text_2">工业出水量 (m3)</div>
|
||||
</div>
|
||||
<div style="flex:1;height:100px;background-color:#FACA00;border-radius:5px;">
|
||||
<div class="fontValue" id="safe_value_3">16532</div>
|
||||
<div class="fontText" id="safe_text_3">生活进水量 (m3)</div>
|
||||
</div>
|
||||
<div style="flex:1;height:100px;background-color:#66D97C;border-radius:5px;">
|
||||
<div class="fontValue" id="safe_value_4">16532</div>
|
||||
<div class="fontText" id="safe_text_4">生活出水量 (m3)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width:100%;height:300px;padding:10px;">
|
||||
<div style="width:100%;height:100%;" id="myChartProduce8"></div>
|
||||
<%-- <div style="width:100%;height:100%;" id="myChartProduce9"></div>--%>
|
||||
<%-- <div style="width:100%;height:100%;" id="myChartProduce10"></div>--%>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--
|
||||
<div style="float:left;height:50%;width:100%;padding:5px 5px 5px 5px;">
|
||||
<div style="height:100%;width:100%;background-color:#ffffff;">
|
||||
<div style="width:100%;height:5%;float:left;border-bottom:2px solid #67aad7;font-weight: bold;">
|
||||
二车间
|
||||
</div>
|
||||
<div style="width:20%;height:96%;float:left;">
|
||||
<div style="width:100%;height:25%;float:left;background-color:#cbe3f9;margin:6%;">
|
||||
<div class="fontValue" style="color: #0c4377;" id="valueProduce1_cs"></div>
|
||||
<div class="fontText" style="color: #0c4377;" id="textProduce1_cs"></div>
|
||||
</div>
|
||||
<div style="width:100%;height:25%;float:left;background-color:#badaf8;margin:6%;">
|
||||
<div class="fontValue" style="color: #0c4377;" id="valueProduce2_cs"></div>
|
||||
<div class="fontText" style="color: #0c4377;" id="textProduce2_cs"></div>
|
||||
</div>
|
||||
<div style="width:100%;height:25%;float:left;background-color:#73afd8;margin:6%;">
|
||||
<div class="fontValue" style="color: #0c4377;" id="valueProduce3_cs"></div>
|
||||
<div class="fontText" style="color: #0c4377;" id="textProduce3_cs"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width:80%;height:96%;float:left;padding: 5px 10px 30px 10px;">
|
||||
<div style="width:100%;height:100%;float:left;">
|
||||
<div style="width:100%;height:3%;float:left;"></div>
|
||||
<div style="width:100%;height:40%;float:left;">
|
||||
<div style="width:20%;height:100%;float:left;">
|
||||
<div style="width:100%;height:20%;padding-top:10%;padding-right:5%;" align="center"
|
||||
id="myChartProduceText1_cs">
|
||||
-
|
||||
</div>
|
||||
<div style="width:100%;height:80%;" id="myChartProduce1_cs"></div>
|
||||
</div>
|
||||
<div style="width:20%;height:100%;float:left;">
|
||||
<div style="width:100%;height:20%;padding-top:10%;padding-right:5%;" align="center"
|
||||
id="myChartProduceText2_cs">
|
||||
-
|
||||
</div>
|
||||
<div style="width:100%;height:80%;" id="myChartProduce2_cs"></div>
|
||||
</div>
|
||||
<div style="width:20%;height:100%;float:left;">
|
||||
<div style="width:100%;height:20%;padding-top:10%;padding-right:5%;" align="center"
|
||||
id="myChartProduceText3_cs">
|
||||
-
|
||||
</div>
|
||||
<div style="width:100%;height:80%;" id="myChartProduce3_cs"></div>
|
||||
</div>
|
||||
<div style="width:20%;height:100%;float:left;">
|
||||
<div style="width:100%;height:20%;padding-top:10%;padding-right:5%;" align="center"
|
||||
id="myChartProduceText4_cs">
|
||||
-
|
||||
</div>
|
||||
<div style="width:100%;height:80%;" id="myChartProduce4_cs"></div>
|
||||
</div>
|
||||
<div style="width:20%;height:100%;float:left;">
|
||||
<div style="width:100%;height:20%;padding-top:10%;padding-right:5%;" align="center"
|
||||
id="myChartProduceText5_cs">
|
||||
-
|
||||
</div>
|
||||
<div style="width:100%;height:80%;" id="myChartProduce5_cs"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width:100%;height:4%;float:left;"></div>
|
||||
<div style="width:100%;height:40%;float:left;">
|
||||
<div style="width:20%;height:100%;float:left;">
|
||||
<div style="width:100%;height:20%;padding-top:10%;padding-right:5%;" align="center"
|
||||
id="myChartProduceText6_cs">
|
||||
-
|
||||
</div>
|
||||
<div style="width:100%;height:80%;" id="myChartProduce6_cs"></div>
|
||||
</div>
|
||||
<div style="width:20%;height:100%;float:left;">
|
||||
<div style="width:100%;height:20%;padding-top:10%;padding-right:5%;" align="center"
|
||||
id="myChartProduceText7_cs">
|
||||
-
|
||||
</div>
|
||||
<div style="width:100%;height:80%;" id="myChartProduce7_cs"></div>
|
||||
</div>
|
||||
<div style="width:20%;height:100%;float:left;">
|
||||
<div style="width:100%;height:20%;padding-top:10%;padding-right:5%;" align="center"
|
||||
id="myChartProduceText8_cs">
|
||||
-
|
||||
</div>
|
||||
<div style="width:100%;height:80%;" id="myChartProduce8_cs"></div>
|
||||
</div>
|
||||
<div style="width:20%;height:100%;float:left;">
|
||||
<div style="width:100%;height:20%;padding-top:10%;padding-right:5%;" align="center"
|
||||
id="myChartProduceText9_cs">
|
||||
-
|
||||
</div>
|
||||
<div style="width:100%;height:80%;" id="myChartProduce9_cs"></div>
|
||||
</div>
|
||||
<div style="width:20%;height:100%;float:left;">
|
||||
<div style="width:100%;height:20%;padding-top:10%;padding-right:5%;" align="center"
|
||||
id="myChartProduceText10_cs">
|
||||
-
|
||||
</div>
|
||||
<div style="width:100%;height:80%;" id="myChartProduce10_cs"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width:100%;height:3%;float:left;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1062,12 +1062,12 @@
|
||||
<a onclick="goToMainTab();" style="cursor:pointer " class="logo">
|
||||
<!-- mini logo for sidebar mini 50x50 pixels -->
|
||||
<span class="logo-mini">
|
||||
<img src="<%=request.getContextPath()%>/IMG/logo.png" style="height: 30px; margin-top: 10px;" alt="Logo"/>
|
||||
<img src="<%=request.getContextPath()%>/IMG/logo.png" style="height: 30px;" alt="Logo"/>
|
||||
</span>
|
||||
<!-- logo for regular state and mobile devices -->
|
||||
<span class="logo-lg">
|
||||
<img src="<%=request.getContextPath()%>/IMG/logo.png" style="height: 30px; margin-right: 5px; vertical-align: middle;" alt="Logo"/>
|
||||
<b id="logo-lg" style="vertical-align: middle; font-size: 18px;">上海金山卫污水厂</b>
|
||||
<b id="logo-lg" style="vertical-align: middle; font-size: 18px;">金山卫污水厂</b>
|
||||
</span>
|
||||
</a>
|
||||
<!-- Navbar Right Menu -->
|
||||
|
||||
459
污水处理管理平台_v7.html
Normal file
459
污水处理管理平台_v7.html
Normal file
@ -0,0 +1,459 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>智水云 - 污水处理全流程监控一张图</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script src="https://code.iconify.design/3/3.1.1/iconify.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');
|
||||
:root {
|
||||
--panel-bg: rgba(15, 23, 42, 0.7);
|
||||
--border-color: rgba(51, 65, 85, 0.4);
|
||||
--accent-blue: #3b82f6;
|
||||
}
|
||||
body {
|
||||
background-color: #020617;
|
||||
background-image: radial-gradient(circle at 50% 50%, #0f172a 0%, #020617 100%);
|
||||
color: #e2e8f0;
|
||||
overflow: hidden;
|
||||
height: 100vh;
|
||||
font-family: "PingFang SC", "Microsoft YaHei", -apple-system, sans-serif;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1rem;
|
||||
}
|
||||
.font-digital { font-family: 'Share+Tech+Mono', monospace; }
|
||||
.glass-card {
|
||||
background: var(--panel-bg);
|
||||
border: 1px solid var(--border-color);
|
||||
border-top: 2px solid var(--accent-blue);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
backdrop-filter: blur(4px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.glass-card:hover {
|
||||
border-color: #60a5fa;
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
|
||||
transform: translateY(-2px);
|
||||
background: rgba(30, 41, 59, 0.6);
|
||||
}
|
||||
.status-pulse {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
@keyframes pulse {
|
||||
0% { box-shadow: 0 0 0 0px rgba(34, 197, 94, 0.7); }
|
||||
70% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
|
||||
100% { box-shadow: 0 0 0 0px rgba(34, 197, 94, 0); }
|
||||
}
|
||||
.grid-container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 280px;
|
||||
gap: 0.75rem;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.stats-panel {
|
||||
height: 120px;
|
||||
margin-bottom: 0.75rem;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 2fr 280px;
|
||||
gap: 0.75rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.alarm-panel {
|
||||
height: 100%;
|
||||
background: rgba(30, 41, 59, 0.4);
|
||||
border-top: 2px solid #ef4444;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
.table-container {
|
||||
background: var(--panel-bg);
|
||||
border: 1px solid var(--border-color);
|
||||
border-top: 2px solid var(--accent-blue);
|
||||
backdrop-filter: blur(4px);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
text-align: left;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
thead {
|
||||
background: rgba(30, 41, 59, 0.8);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
th {
|
||||
padding: 0.75rem 1rem;
|
||||
font-weight: 600;
|
||||
color: #94a3b8;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
font-size: 0.75rem;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
td {
|
||||
padding: 0.65rem 1rem;
|
||||
border-bottom: 1px solid rgba(51, 65, 85, 0.2);
|
||||
color: #e2e8f0;
|
||||
}
|
||||
tbody tr:nth-child(even) {
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
}
|
||||
tbody tr:hover {
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
.status-tag {
|
||||
padding: 2px 8px;
|
||||
border-radius: 9999px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.status-online { background: rgba(34, 197, 94, 0.2); color: #4ade80; border: 1px solid rgba(34, 197, 94, 0.3); }
|
||||
.status-offline { background: rgba(239, 68, 68, 0.2); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.3); }
|
||||
.param-chip {
|
||||
display: inline-block;
|
||||
background: rgba(15, 23, 42, 0.6);
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
margin-right: 4px;
|
||||
font-family: 'Share+Tech+Mono', monospace;
|
||||
}
|
||||
.param-label-mini {
|
||||
color: #64748b;
|
||||
font-size: 10px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
.alarm-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
.alarm-list::-webkit-scrollbar { width: 4px; }
|
||||
.alarm-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 10px; }
|
||||
.alarm-item {
|
||||
background: rgba(15, 23, 42, 0.5);
|
||||
border-left: 3px solid transparent;
|
||||
margin-bottom: 0.5rem;
|
||||
padding: 0.6rem;
|
||||
font-size: 0.75rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.alarm-item:hover { background: rgba(15, 23, 42, 0.8); }
|
||||
.alarm-high { border-left-color: #ef4444; }
|
||||
.alarm-mid { border-left-color: #f59e0b; }
|
||||
.alarm-low { border-left-color: #3b82f6; }
|
||||
.badge {
|
||||
padding: 1px 4px;
|
||||
border-radius: 2px;
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
.badge-high { background: rgba(239, 68, 68, 0.2); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.3); }
|
||||
.badge-mid { background: rgba(245, 158, 11, 0.2); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.3); }
|
||||
.badge-low { background: rgba(59, 130, 246, 0.2); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.3); }
|
||||
.flow-card {
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.flow-card.industrial { border-top-color: #f59e0b; }
|
||||
.flow-card.domestic { border-top-color: #10b981; }
|
||||
.chart-container {
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.param-label { color: #94a3b8; font-size: 0.7rem; font-weight: 500; }
|
||||
.param-value { color: #f8fafc; font-size: 1.05rem; font-family: 'Share+Tech+Mono', monospace; }
|
||||
.unit { font-size: 0.65rem; color: #64748b; margin-left: 2px; }
|
||||
|
||||
.card-header { padding: 0.6rem 0.8rem; border-bottom: 1px solid rgba(255,255,255,0.05); }
|
||||
.card-body { padding: 0.6rem 0.8rem; flex: 1; }
|
||||
.card-footer { padding: 0.4rem 0.8rem; background: rgba(0,0,0,0.15); border-top: 1px solid rgba(255,255,255,0.03); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 顶部状态栏 -->
|
||||
<header class="flex items-center justify-between mb-4 px-1">
|
||||
<div class="flex items-center space-x-3">
|
||||
<span class="iconify text-blue-500 text-3xl" data-icon="material-symbols:water-drop-outline"></span>
|
||||
<div>
|
||||
<h1 class="text-xl font-bold tracking-tight text-white leading-tight">智水云 · 全流程数字化管控平台</h1>
|
||||
<p class="text-[10px] text-blue-400 font-mono tracking-widest uppercase" id="current-time">SYSTEM STATUS: 2026-03-22 10:45:00</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center space-x-6">
|
||||
<div class="flex space-x-6 text-[11px] font-medium bg-slate-800/30 px-4 py-2 rounded-full border border-slate-700/50">
|
||||
<span class="text-white flex items-center"><i class="w-1.5 h-1.5 bg-green-500 rounded-full mr-2"></i> 运行中: 24h</span>
|
||||
<span class="text-slate-400">负荷: 78%</span>
|
||||
<span class="text-slate-400">能效: 0.32 kW·h/m³</span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-3 border-l border-slate-700 pl-6">
|
||||
<div class="text-right">
|
||||
<p class="text-[10px] text-slate-400 leading-none">值班主管</p>
|
||||
<p class="text-xs text-white">王建国 (A组)</p>
|
||||
</div>
|
||||
<div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center font-bold text-white shadow-lg">王</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- 核心统计区域 -->
|
||||
<div class="stats-panel">
|
||||
<div class="glass-card flow-card industrial">
|
||||
<div class="flex items-center space-x-2 mb-2">
|
||||
<span class="iconify text-orange-400" data-icon="material-symbols:factory-outline"></span>
|
||||
<span class="text-[10px] font-bold text-orange-400 uppercase">工业进水累计</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-end gap-2">
|
||||
<div>
|
||||
<p class="param-label text-[9px]">当日总量</p>
|
||||
<p class="text-2xl font-digital text-white leading-none">10,867<span class="unit">m³</span></p>
|
||||
</div>
|
||||
<div class="text-right border-l border-slate-700/50 pl-2">
|
||||
<p class="param-label text-[9px]">环比</p>
|
||||
<p class="text-xs font-digital text-orange-300">+2.4% ↑</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="glass-card flow-card domestic">
|
||||
<div class="flex items-center space-x-2 mb-2">
|
||||
<span class="iconify text-green-400" data-icon="material-symbols:home-outline"></span>
|
||||
<span class="text-[10px] font-bold text-green-400 uppercase">生活进水累计</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-end gap-2">
|
||||
<div>
|
||||
<p class="param-label text-[9px]">当日总量</p>
|
||||
<p class="text-2xl font-digital text-white leading-none">7,569<span class="unit">m³</span></p>
|
||||
</div>
|
||||
<div class="text-right border-l border-slate-700/50 pl-2">
|
||||
<p class="param-label text-[9px]">环比</p>
|
||||
<p class="text-xs font-digital text-green-300">-1.8% ↓</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="glass-card chart-container">
|
||||
<div class="absolute top-2 left-4 z-10 flex items-center space-x-2">
|
||||
<span class="w-1.5 h-1.5 bg-blue-500 rounded-full animate-pulse"></span>
|
||||
<span class="text-[10px] text-slate-400 font-bold uppercase tracking-wider">进水流量7日趋势 (m³/d)</span>
|
||||
</div>
|
||||
<canvas id="flowChart"></canvas>
|
||||
</div>
|
||||
<!-- 统计面板右侧对应的告警总览 -->
|
||||
<div class="glass-card flex flex-col justify-center p-3 relative overflow-hidden" style="border-top-color: #ef4444;">
|
||||
<div class="absolute -right-4 -top-4 opacity-10">
|
||||
<span class="iconify text-8xl text-red-500" data-icon="material-symbols:warning-outline"></span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<span class="text-[10px] font-bold text-red-400">设备运行异常</span>
|
||||
<span class="badge badge-high animate-pulse">实时监控</span>
|
||||
</div>
|
||||
<div class="flex items-end justify-between">
|
||||
<div>
|
||||
<div class="text-3xl font-digital text-red-500">03</div>
|
||||
<div class="text-[9px] text-slate-500 uppercase tracking-wider">Active Alarms</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<div class="text-[10px] text-slate-400">待处理: <span class="text-red-400 font-digital">03</span></div>
|
||||
<div class="text-[10px] text-slate-400">已闭环: <span class="text-green-500 font-digital">12</span>/今日</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 工艺流程数据表格 -->
|
||||
<main class="grid-container">
|
||||
<div class="table-container">
|
||||
<div class="p-3 border-b border-slate-700/50 flex justify-between items-center bg-slate-900/40">
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="iconify text-blue-500" data-icon="material-symbols:AppSettings-outline"></span>
|
||||
<h2 class="text-xs font-bold uppercase tracking-wider text-slate-300">全流程生产工艺实时数据概览</h2>
|
||||
</div>
|
||||
<div class="flex space-x-4">
|
||||
<span class="text-[10px] text-green-500 flex items-center"><span class="w-2 h-2 bg-green-500 rounded-full mr-1 animate-pulse"></span> 生产正常</span>
|
||||
<span class="text-[10px] text-slate-500">更新时间: 2026-03-22 10:15:30</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-y-auto flex-1">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>工艺段名称</th>
|
||||
<th>状态</th>
|
||||
<th>瞬时流量 (m³/h)</th>
|
||||
<th>关键参数 1</th>
|
||||
<th>关键参数 2</th>
|
||||
<th>关键参数 3</th>
|
||||
<th class="text-right">设备ID</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td class="font-bold text-slate-200">01. 细格栅与提升</td><td><span class="status-tag status-online">运行中</span></td><td class="font-digital text-blue-400">1,245.8</td><td><span class="param-label-mini">液位:</span><span class="param-chip text-green-400">1.8m</span></td><td><span class="param-label-mini">pH:</span><span class="param-chip text-white">7.2</span></td><td><span class="param-label-mini">主泵:</span><span class="param-chip text-white">2#</span></td><td class="text-right font-mono text-[10px] text-slate-500">P101</td></tr>
|
||||
<tr><td class="font-bold text-slate-200">02. 曝气沉砂池</td><td><span class="status-tag status-online">运行中</span></td><td class="font-digital text-blue-400">1,238.2</td><td><span class="param-label-mini">DO:</span><span class="param-chip text-white">2.5mg/L</span></td><td><span class="param-label-mini">速:</span><span class="param-chip text-white">35Hz</span></td><td><span class="param-label-mini">油:</span><span class="param-chip text-green-400">0.2</span></td><td class="text-right font-mono text-[10px] text-slate-500">D205</td></tr>
|
||||
<tr><td class="font-bold text-slate-200">03. 初次沉淀池</td><td><span class="status-tag status-online">运行中</span></td><td class="font-digital text-blue-400">1,232.0</td><td><span class="param-label-mini">SS:</span><span class="param-chip text-white">180mg/L</span></td><td><span class="param-label-mini">泥位:</span><span class="param-chip text-white">0.8m</span></td><td><span class="param-label-mini">刮泥:</span><span class="param-chip text-white">ON</span></td><td class="text-right font-mono text-[10px] text-slate-500">S302</td></tr>
|
||||
<tr><td class="font-bold text-slate-200">04. A/A/O 生物反应器</td><td><span class="status-tag status-online">运行中</span></td><td class="font-digital text-blue-400">1,230.5</td><td><span class="param-label-mini">厌氧ORP:</span><span class="param-chip text-white">-180mV</span></td><td><span class="param-label-mini">MLSS:</span><span class="param-chip text-white">3250</span></td><td><span class="param-label-mini">回流:</span><span class="param-chip text-white">100%</span></td><td class="text-right font-mono text-[10px] text-slate-500">B401</td></tr>
|
||||
<tr><td class="font-bold text-slate-200">05. 二次沉淀池组</td><td><span class="status-tag status-offline">故障告警</span></td><td class="font-digital text-red-400">1,228.1</td><td><span class="param-label-mini">出水SS:</span><span class="param-chip text-red-400">22.4</span></td><td><span class="param-label-mini">泥层:</span><span class="param-chip text-white">1.2m</span></td><td><span class="param-label-mini">泵组:</span><span class="param-chip text-red-500">ERR</span></td><td class="text-right font-mono text-[10px] text-slate-500">S204</td></tr>
|
||||
<tr><td class="font-bold text-slate-200">06. 磁混凝高效沉淀</td><td><span class="status-tag status-online">运行中</span></td><td class="font-digital text-blue-400">1,225.0</td><td><span class="param-label-mini">投药:</span><span class="param-chip text-white">12.5mg/L</span></td><td><span class="param-label-mini">磁粉:</span><span class="param-chip text-white">保持</span></td><td><span class="param-label-mini">浊度:</span><span class="param-chip text-green-400">4.2</span></td><td class="text-right font-mono text-[10px] text-slate-500">M501</td></tr>
|
||||
<tr><td class="font-bold text-slate-200">07. V型滤池</td><td><span class="status-tag status-online">运行中</span></td><td class="font-digital text-blue-400">1,210.6</td><td><span class="param-label-mini">滤速:</span><span class="param-chip text-white">6.5m/h</span></td><td><span class="param-label-mini">水头失:</span><span class="param-chip text-white">1.2m</span></td><td><span class="param-label-mini">反冲:</span><span class="param-chip text-white">4:30</span></td><td class="text-right font-mono text-[10px] text-slate-500">F602</td></tr>
|
||||
<tr><td class="font-bold text-slate-200">08. 紫外消毒/次氯酸钠</td><td><span class="status-tag status-online">运行中</span></td><td class="font-digital text-blue-400">1,208.5</td><td><span class="param-label-mini">强度:</span><span class="param-chip text-white">35mW</span></td><td><span class="param-label-mini">余氯:</span><span class="param-chip text-green-400">0.45</span></td><td><span class="param-label-mini">运行:</span><span class="param-chip text-white">12h</span></td><td class="text-right font-mono text-[10px] text-slate-500">V501</td></tr>
|
||||
<tr><td class="font-bold text-slate-200">09. 核心鼓风机房</td><td><span class="status-tag status-online">运行中</span></td><td class="font-digital text-blue-400">254 m³</td><td><span class="param-label-mini">压:</span><span class="param-chip text-green-400">58kPa</span></td><td><span class="param-label-mini">温:</span><span class="param-chip text-white">62℃</span></td><td><span class="param-label-mini">功率:</span><span class="param-chip text-white">185kW</span></td><td class="text-right font-mono text-[10px] text-slate-500">M601</td></tr>
|
||||
<tr><td class="font-bold text-slate-200 text-blue-400">10. 总出水在线监测</td><td><span class="status-tag status-online">达标运行</span></td><td class="font-digital text-blue-400">18.5k</td><td><span class="param-label-mini">COD:</span><span class="param-chip text-green-400">22.4</span></td><td><span class="param-label-mini">NH3:</span><span class="param-chip text-green-400">0.24</span></td><td><span class="param-label-mini">TP:</span><span class="param-chip text-green-400">0.08</span></td><td class="text-right font-mono text-[10px] text-slate-500">OUT-M</td></tr>
|
||||
<tr><td class="font-bold text-slate-200">11. 污泥脱水系统</td><td><span class="status-tag status-online">运行中</span></td><td class="font-digital text-blue-400">--</td><td><span class="param-label-mini">含水:</span><span class="param-chip text-white">78.2%</span></td><td><span class="param-label-mini">产泥:</span><span class="param-chip text-white">12.5t</span></td><td><span class="param-label-mini">药量:</span><span class="param-chip text-white">4.2</span></td><td class="text-right font-mono text-[10px] text-slate-500">W701</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="px-3 py-2 border-t border-slate-700/50 bg-slate-900/40 flex justify-between items-center">
|
||||
<div class="text-[10px] text-slate-500">系统就绪，当前生产效率：<span class="text-blue-400">92%</span></div>
|
||||
<div class="flex space-x-2">
|
||||
<button class="bg-blue-600/20 text-blue-400 text-[10px] px-3 py-1 rounded border border-blue-500/30 hover:bg-blue-600/40 transition">导出历史报表</button>
|
||||
<button class="bg-slate-700 text-slate-200 text-[10px] px-3 py-1 rounded hover:bg-slate-600 transition">自定义列</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 15. 设备异常告警面板 (占据右侧整列) -->
|
||||
<div class="glass-card alarm-panel">
|
||||
<div class="card-header flex justify-between items-center bg-red-950/20">
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="iconify text-red-500 animate-pulse" data-icon="material-symbols:fmd-bad"></span>
|
||||
<span class="text-xs font-bold text-red-100 uppercase tracking-wider">实时告警列表</span>
|
||||
</div>
|
||||
<div class="flex space-x-2">
|
||||
<button class="text-[9px] bg-slate-800 hover:bg-slate-700 px-2 py-0.5 rounded transition">忽略全部</button>
|
||||
<button class="text-[9px] bg-blue-600 hover:bg-blue-500 px-2 py-0.5 rounded transition">导出日志</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alarm-list">
|
||||
<!-- 告警项 1 -->
|
||||
<div class="alarm-item alarm-high">
|
||||
<div class="flex justify-between mb-1">
|
||||
<span class="badge badge-high font-bold uppercase">Critical</span>
|
||||
<span class="text-[9px] text-slate-500 font-mono">10:42:15</span>
|
||||
</div>
|
||||
<div class="font-bold text-slate-200">鼓风机房 #2 离心风机</div>
|
||||
<div class="text-[10px] text-red-400 mt-1 flex items-center">
|
||||
<span class="iconify mr-1" data-icon="material-symbols:bolt"></span>
|
||||
运行电流过载 (45.2A > 40.0A)
|
||||
</div>
|
||||
<div class="flex justify-end space-x-2 mt-2">
|
||||
<button class="text-[9px] border border-slate-700 hover:border-slate-500 px-2 py-1 rounded">查看详情</button>
|
||||
<button class="text-[9px] bg-red-600/80 hover:bg-red-500 px-2 py-1 rounded text-white" onclick="alert('已发送工单给维保组')">立即处理</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 告警项 2 -->
|
||||
<div class="alarm-item alarm-mid">
|
||||
<div class="flex justify-between mb-1">
|
||||
<span class="badge badge-mid font-bold uppercase">Warning</span>
|
||||
<span class="text-[9px] text-slate-500 font-mono">10:05:21</span>
|
||||
</div>
|
||||
<div class="font-bold text-slate-200">2# 二沉池 吸泥机</div>
|
||||
<div class="text-[10px] text-orange-400 mt-1 flex items-center">
|
||||
<span class="iconify mr-1" data-icon="material-symbols:settings-backup-restore"></span>
|
||||
转速异常波动 (+/- 15%)
|
||||
</div>
|
||||
<div class="flex justify-end space-x-2 mt-2">
|
||||
<button class="text-[9px] border border-slate-700 hover:border-slate-500 px-2 py-1 rounded w-full text-slate-300">远程复位</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 告警项 3 -->
|
||||
<div class="alarm-item alarm-low">
|
||||
<div class="flex justify-between mb-1">
|
||||
<span class="badge badge-low font-bold uppercase">Info</span>
|
||||
<span class="text-[9px] text-slate-500 font-mono">09:12:05</span>
|
||||
</div>
|
||||
<div class="font-bold text-slate-200">加药间 PAC 储罐</div>
|
||||
<div class="text-[10px] text-blue-300 mt-1 flex items-center">
|
||||
<span class="iconify mr-1" data-icon="material-symbols:water-medium"></span>
|
||||
低液位预警 (剩余 15%)
|
||||
</div>
|
||||
<div class="flex justify-end mt-2">
|
||||
<button class="text-[9px] text-blue-400 hover:underline">申请补料</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer text-center bg-slate-900/50 p-2 border-t border-slate-800">
|
||||
<p class="text-[9px] text-slate-500 hover:text-blue-400 cursor-pointer transition">查看所有历史记录 (6张待办) »</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="mt-4 flex items-center justify-between px-2 text-[10px] text-slate-600 border-t border-slate-800 pt-2 h-6"> <div class="flex space-x-8">
|
||||
<p>© 2026 智水云污水处理管理有限公司</p>
|
||||
<p><i class="iconify inline mr-1" data-icon="material-symbols:location-on"></i> 江苏省南通市华东第二污水处理厂</p>
|
||||
</div>
|
||||
<div class="flex space-x-6">
|
||||
<p class="flex items-center text-green-700 font-medium"><i class="iconify mr-1" data-icon="material-symbols:check-circle"></i> 云端数据实时同步中 (25ms)</p>
|
||||
<p>生产智脑 V4.2.0-PROD</p>
|
||||
</div>
|
||||
</footer>
|
||||
<script>
|
||||
// 自动刷新当前时刻
|
||||
function updateClock() {
|
||||
const now = new Date();
|
||||
const timeStr = `SYSTEM STATUS: ${now.getFullYear()}-${String(now.getMonth()+1).padStart(2,'0')}-${String(now.getDate()).padStart(2,'0')} ${String(now.getHours()).padStart(2,'0')}:${String(now.getMinutes()).padStart(2,'0')}:${String(now.getSeconds()).padStart(2,'0')}`;
|
||||
document.getElementById('current-time').textContent = timeStr;
|
||||
}
|
||||
setInterval(updateClock, 1000);
|
||||
|
||||
// Chart.js 趋势分析
|
||||
const ctx = document.getElementById('flowChart').getContext('2d');
|
||||
const flowChart = new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ['03/16', '03/17', '03/18', '03/19', '03/20', '03/21', '03/22'],
|
||||
datasets: [
|
||||
{
|
||||
label: '工业污水',
|
||||
data: [11200, 10800, 11500, 10200, 12100, 10600, 10867],
|
||||
backgroundColor: 'rgba(245, 158, 11, 0.4)',
|
||||
borderColor: '#f59e0b',
|
||||
borderWidth: 1.5,
|
||||
borderRadius: 3
|
||||
},
|
||||
{
|
||||
label: '生活污水',
|
||||
data: [7200, 7120, 7800, 7400, 7650, 7420, 7569],
|
||||
backgroundColor: 'rgba(59, 130, 246, 0.4)',
|
||||
borderColor: '#3b82f6',
|
||||
borderWidth: 1.5,
|
||||
borderRadius: 3
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: { display: false }
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
grid: { display: false },
|
||||
ticks: { color: '#64748b', font: { size: 9 } }
|
||||
},
|
||||
y: {
|
||||
beginAtZero: false,
|
||||
grid: { color: 'rgba(255, 255, 255, 0.03)' },
|
||||
ticks: { color: '#64748b', font: { size: 9 }, stepSize: 5000 }
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user