diff --git a/src/main/webapp/IMG/logo.png b/src/main/webapp/IMG/logo.png
index 760c29cb..de5f522d 100644
Binary files a/src/main/webapp/IMG/logo.png and b/src/main/webapp/IMG/logo.png differ
diff --git a/src/main/webapp/IMG/logo1.png b/src/main/webapp/IMG/logo1.png
new file mode 100644
index 00000000..760c29cb
Binary files /dev/null and b/src/main/webapp/IMG/logo1.png differ
diff --git a/src/main/webapp/JS/main/main_js.js b/src/main/webapp/JS/main/main_js.js
index 02169e5a..07312a0c 100644
--- a/src/main/webapp/JS/main/main_js.js
+++ b/src/main/webapp/JS/main/main_js.js
@@ -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();
+    //     }
+    // });
 }
 
 /**
@@ -327,4 +976,6 @@ function proDatavisualFrame(unitId, proDatavisualFrameId) {
     if (proDatavisualFrameId != null && proDatavisualFrameId != undefined && proDatavisualFrameId != '') {
         parent.addTab(proDatavisualFrameId, '工艺可视化', 'process/dataVisualFrame/view.do?frameId=' + proDatavisualFrameId + '&unitId=' + unitId);
     }
-}
\ No newline at end of file
+}
+
+
diff --git a/src/main/webapp/jsp/inc.jsp b/src/main/webapp/jsp/inc.jsp
index 124865e5..51763259 100644
--- a/src/main/webapp/jsp/inc.jsp
+++ b/src/main/webapp/jsp/inc.jsp
@@ -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>
 
diff --git a/src/main/webapp/jsp/main_JS_Company.jsp b/src/main/webapp/jsp/main_JS_Company.jsp
index 74367925..9b43976d 100644
--- a/src/main/webapp/jsp/main_JS_Company.jsp
+++ b/src/main/webapp/jsp/main_JS_Company.jsp
@@ -14,409 +14,816 @@
 <!DOCTYPE html>
 
 <head>
-    <title><%= ServerObject.atttable.get("TOPTITLE")%>
-    </title>
+    <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()%>/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) {
-
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
         }
-
-        @media (min-width: 1550px) {
-
+        
+        body {
+            background: #f0f2f5;
+            font-family: 'Microsoft YaHei', sans-serif;
         }
-
-        .fontValue {
-            text-align: center;
-            margin-top: 20px;
-            margin-left: 70px;
-            font-size: 20px;
-            color: #ffffff;
+        
+        .page-container {
+            padding: 15px;
+            min-height: 100vh;
+        }
+        
+        /* 通用卡片样式 */
+        .card {
+            background: #fff;
+            border-radius: 8px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+            overflow: hidden;
+        }
+        
+        .card-header {
+            height: 40px;
+            line-height: 40px;
+            padding: 0 15px;
             font-weight: bold;
-        }
-
-        .fontText {
-            margin-left: 20px;
             font-size: 14px;
-            color: #ffffff;
-            font-weight: bold;
+            color: #0c4377;
+            border-bottom: 2px solid #67aad7;
+            background: linear-gradient(to right, rgba(103, 170, 215, 0.1), transparent);
+            display: flex;
+            align-items: center;
+        }
+        
+        .card-header::before {
+            content: "";
+            display: block;
+            width: 4px;
+            height: 16px;
+            background-color: #0c4377;
+            margin-right: 10px;
+            border-radius: 2px;
+        }
+        
+        .card-body {
+            padding: 15px;
+        }
+        
+        /* 上部分区域 */
+        .top-section {
+            display: grid;
+            grid-template-columns: 280px 1fr 200px;
+            gap: 15px;
+            margin-bottom: 15px;
+        }
+        
+        /* 进水累计卡片 - 美化样式 */
+        .inflow-card {
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            padding: 15px;
+            /*background: linear-gradient(180deg, #f8fbfd 0%, #f0f5f9 100%);*/
+        }
+        
+        .inflow-item {
+            display: flex;
+            align-items: center;
+            padding: 15px;
+            border-radius: 12px;
+            position: relative;
+            overflow: hidden;
+            box-shadow: 0 4px 15px rgba(0,0,0,0.08);
+            transition: transform 0.2s, box-shadow 0.2s;
+        }
+        
+        .inflow-item:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(0,0,0,0.12);
+        }
+        
+        .inflow-item.industrial {
+            background: linear-gradient(135deg, #667eea 0%, #1890ff 100%);
+        }
+        
+        .inflow-item.domestic {
+            background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
+        }
+        
+        .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-content {
+            flex: 1;
+        }
+        
+        .inflow-item .label {
+            font-size: 15px;
+            color: rgba(255,255,255,0.85);
+            margin-bottom: 4px;
+            display: flex;
+        }
+        
+        .inflow-item .value-row {
+            display: flex;
+            align-items: baseline;
+            gap: 4px;
+            justify-content: flex-end;
+        }
+        
+        .inflow-item .value {
+            font-size: 26px;
+            font-weight: bold;
+            color: #fff;
+            text-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+        
+        .inflow-item .unit {
+            font-size: 13px;
+            color: rgba(255,255,255,0.85);
+        }
+        
+        /* 图表卡片 */
+        .chart-container {
+            height: 220px;
+        }
+        
+        /* 设备运行卡片 */
+        .device-list {
+            max-height: 220px;
+            overflow-y: auto;
+        }
+        
+        .device-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 8px 12px;
+            border-bottom: 1px solid #f0f0f0;
+        }
+        
+        .device-item:last-child {
+            border-bottom: none;
+        }
+        
+        .device-name {
+            font-size: 13px;
+            color: #333;
+        }
+        
+        .device-status {
+            padding: 2px 10px;
+            border-radius: 10px;
+            font-size: 12px;
+        }
+        
+        .status-running {
+            background: #e6f7e6;
+            color: #52c41a;
+        }
+        
+        .status-stopped {
+            background: #fff1f0;
+            color: #ff4d4f;
+        }
+        
+        .status-warning {
+            background: #fffbe6;
+            color: #faad14;
+        }
+        
+        /* 泵站详情 */
+        .pump-stations {
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            gap: 15px;
+        }
+        
+        .pump-station {
+            background: #f8f9fa;
+            border-radius: 6px;
+            padding: 12px;
+        }
+        
+        .pump-station-title {
+            font-size: 14px;
+            font-weight: bold;
+            color: #0c4377;
+            margin-bottom: 12px;
+            padding-bottom: 8px;
+            border-bottom: 1px solid #e8e8e8;
+        }
+        
+        .pump-list {
+            display: flex;
+            gap: 10px;
+            justify-content: center;
+        }
+        
+        .pump-item {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            width: 50px;
+        }
+        
+        .pump-icon {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 13px;
+            color: #fff;
+            margin-bottom: 4px;
+        }
+        
+        .pump-icon.on {
+            background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
+        }
+        
+        .pump-icon.off {
+            background: linear-gradient(135deg, #d9d9d9 0%, #bfbfbf 100%);
+        }
+        
+        .pump-icon.error {
+            background: linear-gradient(135deg, #ff4d4f 0%, #cf1322 100%);
+        }
+        
+        .pump-name {
+            font-size: 12px;
+            color: #666;
+        }
+        
+        /* 下部分区域 */
+        .bottom-section {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 15px;
+            margin-bottom: 15px;
+        }
+        
+        /* 泵站区域 */
+        .pump-section {
+            margin-bottom: 15px;
+        }
+        
+        /* 表格样式 */
+        .table-wrapper {
+            height: 280px;
+            overflow-y: auto;
+        }
+        
+        .data-table {
+            width: 100%;
+            border-collapse: collapse;
+        }
+        
+        .data-table thead {
+            position: sticky;
+            top: 0;
+            z-index: 1;
+        }
+        
+        .data-table th {
+            background: #f5f7fa;
+            color: #0c4377;
+            font-weight: bold;
+            font-size: 13px;
+            padding: 10px 8px;
+            text-align: left;
+            border-bottom: 2px solid #67aad7;
+        }
+        
+        .data-table td {
+            padding: 10px 8px;
+            font-size: 13px;
+            color: #333;
+            border-bottom: 1px solid #f0f0f0;
+        }
+        
+        .data-table tr:hover {
+            background: #f5f7fa;
+        }
+        
+        /* 告警状态 */
+        .alarm-badge {
+            display: inline-block;
+            padding: 2px 8px;
+            border-radius: 4px;
+            font-size: 12px;
+        }
+        
+        .alarm-badge.critical {
+            background: #fff1f0;
+            color: #ff4d4f;
+        }
+        
+        .alarm-badge.warning {
+            background: #fffbe6;
+            color: #faad14;
+        }
+        
+        .alarm-badge.info {
+            background: #e6f7ff;
+            color: #1890ff;
+        }
+        
+        /* 分页样式 */
+        .pagination {
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
+            padding: 10px 15px;
+            border-top: 1px solid #f0f0f0;
+            background: #fafafa;
+        }
+        
+        .pagination-info {
+            font-size: 12px;
+            color: #666;
+            margin-right: 15px;
+        }
+        
+        .pagination-btns {
+            display: flex;
+            gap: 5px;
+        }
+        
+        .pagination-btn {
+            padding: 4px 12px;
+            border: 1px solid #d9d9d9;
+            background: #fff;
+            border-radius: 4px;
+            font-size: 12px;
+            color: #333;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+        
+        .pagination-btn:hover:not(:disabled) {
+            border-color: #378dcc;
+            color: #378dcc;
+        }
+        
+        .pagination-btn:disabled {
+            color: #d9d9d9;
+            cursor: not-allowed;
+        }
+        
+        .pagination-btn.active {
+            background: #378dcc;
+            border-color: #378dcc;
+            color: #fff;
+        }
+        
+        /* 滚动条美化 */
+        .scroll-container::-webkit-scrollbar,
+        .table-wrapper::-webkit-scrollbar,
+        .device-list::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .scroll-container::-webkit-scrollbar-thumb,
+        .table-wrapper::-webkit-scrollbar-thumb,
+        .device-list::-webkit-scrollbar-thumb {
+            background: #c1c1c1;
+            border-radius: 3px;
+        }
+        
+        .scroll-container::-webkit-scrollbar-track,
+        .table-wrapper::-webkit-scrollbar-track,
+        .device-list::-webkit-scrollbar-track {
+            background: #f1f1f1;
         }
-      .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: 9%;
-          float: left;
-          border-bottom: 2px solid #67aad7;
-          font-weight: bold;
-          font-size: 13px;
-          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">
-
-
+        // 分页配置
+        var processPageSize = 10;
+        var processCurrentPage = 1;
+        var processData = [];
+        
+        var alarmPageSize = 10;
+        var alarmCurrentPage = 1;
+        var alarmData = [];
+        
         $(function () {
-            firstFun();
+            initData();
+            initChart();
         });
 
-        window.onresize = function () {
-            firstFun();
+        function initData() {
+            // 初始化工业进水累计
+            $('#industrial_value').text('12,580');
+            // 初始化生活进水累计
+            $('#domestic_value').text('8,650');
+            
+            // 初始化设备运行列表
+            initDeviceList();
+            // 初始化泵站详情
+            initPumpStations();
+            // 初始化工艺列表
+            initProcessList();
+            // 初始化告警列表
+            initAlarmList();
         }
-
-        function firstFun() {
-            //var height = document.documentElement.clientHeight;
-            var height = $(window).height();
-            $('#mainDiv').css('height', height);//页面加载先给高度
-
-            $.ajax({
-                type: 'GET',
-                url: ext.contextPath + '/base/mainConfig/getJson.do',
-                async: true,
-                data: {unitId: unitId},
-                globle: false,
-                error: function () {
-                    return false;
+        
+        function initDeviceList() {
+            var devices = [
+                {name: '进水泵1#', status: 'running'},
+                {name: '进水泵2#', status: 'running'},
+                {name: '鼓风机1#', status: 'running'},
+                {name: '鼓风机2#', status: 'stopped'},
+                {name: '回流泵1#', status: 'warning'},
+                {name: '回流泵2#', status: 'running'},
+                {name: '污泥泵1#', status: 'running'},
+                {name: '污泥泵2#', status: 'stopped'},
+                {name: '提升泵1#', status: 'running'},
+                {name: '提升泵2#', status: 'running'}
+            ];
+            
+            var html = '';
+            devices.forEach(function(device) {
+                var statusClass = device.status === 'running' ? 'status-running' : 
+                                  device.status === 'stopped' ? 'status-stopped' : 'status-warning';
+                var statusText = device.status === 'running' ? '运行中' : 
+                                 device.status === 'stopped' ? '已停止' : '异常';
+                html += '<div class="device-item">';
+                html += '<span class="device-name">' + device.name + '</span>';
+                html += '<span class="device-status ' + statusClass + '">' + statusText + '</span>';
+                html += '</div>';
+            });
+            $('#device_list').html(html);
+        }
+        
+        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']}
+            ];
+            
+            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>';
+            });
+            $('#pump_stations').html(html);
+        }
+        
+        // 生成工艺列表mock数据
+        function generateProcessData() {
+            var processNames = ['粗格栅间', '细格栅间', '曝气沉砂池', '厌氧池', '缺氧池', '好氧池', '二沉池', '消毒池', '污泥浓缩池', '污泥脱水间'];
+            var params1 = ['pH: 7.2', 'pH: 7.1', 'DO: 2.5mg/L', 'ORP: -200mV', 'DO: 0.5mg/L', 'DO: 3.5mg/L', 'SS: 15mg/L', '余氯: 0.3mg/L', 'MLSS: 4500mg/L', '含水率: 80%'];
+            var params2 = ['温度: 25°C', '温度: 24°C', 'MLSS: 3500mg/L', 'MLSS: 3200mg/L', 'MLSS: 3400mg/L', 'MLSS: 3800mg/L', '流量: 480m³/h', '流量: 470m³/h', '流量: 50m³/h', 'PAM: 2mg/L'];
+            var params3 = ['液位: 2.5m', '液位: 2.3m', '流量: 500m³/h', '温度: 26°C', 'ORP: -50mV', '温度: 27°C', '液位: 3.2m', 'pH: 7.0', '液位: 1.8m', '压力: 0.5MPa'];
+            
+            var data = [];
+            for (var i = 0; i < 30; i++) {
+                data.push({
+                    name: processNames[i % processNames.length] + (i >= 10 ? '-' + (Math.floor(i / 10) + 1) + '#' : ''),
+                    param1: params1[i % params1.length],
+                    param2: params2[i % params2.length],
+                    param3: params3[i % params3.length],
+                    deviceId: 'EQ-' + String(i + 1).padStart(3, '0')
+                });
+            }
+            return data;
+        }
+        
+        // 生成告警列表mock数据
+        function generateAlarmData() {
+            var processNames = ['粗格栅间', '细格栅间', '曝气沉砂池', '厌氧池', '缺氧池', '好氧池', '二沉池', '消毒池', '污泥浓缩池', '污泥脱水间'];
+            var statuses = ['Critical', 'Warning', 'INFO'];
+            
+            var data = [];
+            var baseTime = new Date('2026-03-22 14:30:00');
+            for (var i = 0; i < 30; i++) {
+                var time = new Date(baseTime.getTime() - i * 5 * 60000);
+                var timeStr = time.getFullYear() + '-' + 
+                              String(time.getMonth() + 1).padStart(2, '0') + '-' + 
+                              String(time.getDate()).padStart(2, '0') + ' ' + 
+                              String(time.getHours()).padStart(2, '0') + ':' + 
+                              String(time.getMinutes()).padStart(2, '0') + ':' + 
+                              String(time.getSeconds()).padStart(2, '0');
+                data.push({
+                    process: processNames[i % processNames.length],
+                    status: statuses[i % 3],
+                    time: timeStr
+                });
+            }
+            return data;
+        }
+        
+        function initProcessList() {
+            processData = generateProcessData();
+            renderProcessTable();
+        }
+        
+        function renderProcessTable() {
+            var start = (processCurrentPage - 1) * processPageSize;
+            var end = Math.min(start + processPageSize, processData.length);
+            var pageData = processData.slice(start, end);
+            
+            var html = '';
+            pageData.forEach(function(process) {
+                html += '<tr>';
+                html += '<td>' + process.name + '</td>';
+                html += '<td>' + process.param1 + '</td>';
+                html += '<td>' + process.param2 + '</td>';
+                html += '<td>' + process.param3 + '</td>';
+                html += '<td>' + process.deviceId + '</td>';
+                html += '</tr>';
+            });
+            $('#process_table tbody').html(html);
+            
+            // 更新分页信息
+            var totalPages = Math.ceil(processData.length / processPageSize);
+            $('#process_page_info').text('第 ' + processCurrentPage + '/' + totalPages + ' 页，共 ' + processData.length + ' 条');
+            
+            // 更新分页按钮
+            var btnHtml = '';
+            btnHtml += '<button class="pagination-btn" onclick="processGoToPage(1)" ' + (processCurrentPage === 1 ? 'disabled' : '') + '>首页</button>';
+            btnHtml += '<button class="pagination-btn" onclick="processGoToPage(' + (processCurrentPage - 1) + ')" ' + (processCurrentPage === 1 ? 'disabled' : '') + '>上一页</button>';
+            btnHtml += '<button class="pagination-btn" onclick="processGoToPage(' + (processCurrentPage + 1) + ')" ' + (processCurrentPage === totalPages ? 'disabled' : '') + '>下一页</button>';
+            // btnHtml += '<button class="pagination-btn" onclick="processGoToPage(' + totalPages + ')" ' + (processCurrentPage === totalPages ? 'disabled' : '') + '>末页</button>';
+            $('#process_page_btns').html(btnHtml);
+        }
+        
+        function processGoToPage(page) {
+            var totalPages = Math.ceil(processData.length / processPageSize);
+            if (page < 1) page = 1;
+            if (page > totalPages) page = totalPages;
+            processCurrentPage = page;
+            renderProcessTable();
+        }
+        
+        function initAlarmList() {
+            alarmData = generateAlarmData();
+            renderAlarmTable();
+        }
+        
+        function renderAlarmTable() {
+            var start = (alarmCurrentPage - 1) * alarmPageSize;
+            var end = Math.min(start + alarmPageSize, alarmData.length);
+            var pageData = alarmData.slice(start, end);
+            
+            var html = '';
+            pageData.forEach(function(alarm) {
+                var badgeClass = alarm.status === 'Critical' ? 'critical' : 
+                                  alarm.status === 'Warning' ? 'warning' : 'info';
+                html += '<tr>';
+                html += '<td>' + alarm.process + '</td>';
+                html += '<td><span class="alarm-badge ' + badgeClass + '">' + alarm.status + '</span></td>';
+                html += '<td>' + alarm.time + '</td>';
+                html += '</tr>';
+            });
+            $('#alarm_table tbody').html(html);
+            
+            // 更新分页信息
+            var totalPages = Math.ceil(alarmData.length / alarmPageSize);
+            $('#alarm_page_info').text('第 ' + alarmCurrentPage + '/' + totalPages + ' 页，共 ' + alarmData.length + ' 条');
+            
+            // 更新分页按钮
+            var btnHtml = '';
+            btnHtml += '<button class="pagination-btn" onclick="alarmGoToPage(1)" ' + (alarmCurrentPage === 1 ? 'disabled' : '') + '>首页</button>';
+            btnHtml += '<button class="pagination-btn" onclick="alarmGoToPage(' + (alarmCurrentPage - 1) + ')" ' + (alarmCurrentPage === 1 ? 'disabled' : '') + '>上一页</button>';
+            btnHtml += '<button class="pagination-btn" onclick="alarmGoToPage(' + (alarmCurrentPage + 1) + ')" ' + (alarmCurrentPage === totalPages ? 'disabled' : '') + '>下一页</button>';
+            // btnHtml += '<button class="pagination-btn" onclick="alarmGoToPage(' + totalPages + ')" ' + (alarmCurrentPage === totalPages ? 'disabled' : '') + '>末页</button>';
+            $('#alarm_page_btns').html(btnHtml);
+        }
+        
+        function alarmGoToPage(page) {
+            var totalPages = Math.ceil(alarmData.length / alarmPageSize);
+            if (page < 1) page = 1;
+            if (page > totalPages) page = totalPages;
+            alarmCurrentPage = page;
+            renderAlarmTable();
+        }
+        
+        function initChart() {
+            var chart = echarts.init(document.getElementById('flow_chart'));
+            var option = {
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'shadow'
+                    }
                 },
-                success: function (data) {
-                    var data = eval('(' + data + ')');
-                    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 + "')")
+                legend: {
+                    data: ['工业进水', '生活进水'],
+                    top: 5,
+                    textStyle: {
+                        fontSize: 12
+                    }
+                },
+                grid: {
+                    left: '5%',
+                    right: '5%',
+                    bottom: '8%',
+                    top: '18%',
+                    containLabel: true
+                },
+                xAxis: {
+                    type: 'category',
+                    data: ['3/16', '3/17', '3/18', '3/19', '3/20', '3/21', '3/22'],
+                    axisLine: {
+                        lineStyle: {
+                            color: '#e8e8e8'
                         }
-                        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);
+                    },
+                    axisLabel: {
+                        color: '#666',
+                        fontSize: 12
+                    }
+                },
+                yAxis: {
+                    type: 'value',
+                    name: 'm³/D',
+                    nameTextStyle: {
+                        fontSize: 12
+                    },
+                    axisLine: {
+                        show: false
+                    },
+                    axisTick: {
+                        show: false
+                    },
+                    axisLabel: {
+                        color: '#666',
+                        fontSize: 12
+                    },
+                    splitLine: {
+                        lineStyle: {
+                            color: '#f0f0f0'
                         }
                     }
-                    //安全
-                    // echartColumnar2(unitId, 'TH_03_FIT040001D_FLOW_C', 'myChartsafe1');
-                }
+                },
+                series: [
+                    {
+                        name: '工业进水',
+                        type: 'bar',
+                        barWidth: '30%',
+                        itemStyle: {
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {offset: 0, color: '#378dcc'},
+                                {offset: 1, color: '#5ba3d9'}
+                            ])
+                        },
+                        data: [12000, 11500, 13000, 12500, 11800, 12200, 12580]
+                    },
+                    {
+                        name: '生活进水',
+                        type: 'bar',
+                        barWidth: '30%',
+                        itemStyle: {
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                {offset: 0, color: '#52c41a'},
+                                {offset: 1, color: '#73d13d'}
+                            ])
+                        },
+                        data: [8500, 8200, 9000, 8800, 8600, 8400, 8650]
+                    }
+                ]
+            };
+            chart.setOption(option);
+            
+            window.addEventListener('resize', function() {
+                chart.resize();
             });
-
-            //优良差
-            $(".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;">
-
-<%--    <div style="float:left;height:100%;width:35%;">--%>
-<%--        <div style="float:left;height:100%;width:100%;padding:5px 5px 5px 5px;">--%>
-<%--            <div style="height:100%;width:100%;background-color:#ffffff;">--%>
-<%--                &lt;%&ndash;图片&ndash;%&gt;--%>
-<%--                <!-- <img src="" id="mainImg" style="width:100%;height:100%;"> -->--%>
-<%--                <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" style="width:100%;height:100%;">--%>
-<%--                --%>
-<%--                  <!-- Wrapper for slides -->--%>
-<%--                  <div class="carousel-inner" role="listbox" id="carousel-items">--%>
-<%--                  </div>--%>
-<%--                  <!-- Controls -->--%>
-<%--                  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">--%>
-<%--                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>--%>
-<%--                    <span class="sr-only">Previous</span>--%>
-<%--                  </a>--%>
-<%--                  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">--%>
-<%--                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>--%>
-<%--                    <span class="sr-only">Next</span>--%>
-<%--                  </a>--%>
-<%--                </div>--%>
-<%--            </div>--%>
-<%--        </div>--%>
-<%--    </div>--%>
-
-    <div style="float:left;height:100%;width:100%;">
-        <div style="float:left;height:50%;width:100%;padding:5px 5px 5px 5px;">
-            <div style="height:100%;width:100%;background-color:#ffffff;">
-                <div class="section-header">
-                    上海金山卫污水公司
-                </div>
-                <div style="width:20%;height:95%;float:left;">
-                    <div style="width:100%;height:25%;float:left;background-color:#cbe3f9;margin:6%;">
-                        <div class="fontValue" style="color: #0c4377;" id="valueProduce1_js"></div>
-                        <div class="fontText" style="color: #0c4377;" id="textProduce1_js"></div>
-                    </div>
-                    <div style="width:100%;height:25%;float:left;background-color:#badaf8;margin:6%;">
-                        <div class="fontValue" style="color: #0c4377;" id="valueProduce2_js"></div>
-                        <div class="fontText" style="color: #0c4377;" id="textProduce2_js"></div>
-                    </div>
-                    <div style="width:100%;height:25%;float:left;background-color:#73afd8;margin:6%;">
-                        <div class="fontValue" style="color: #0c4377;" id="valueProduce3_js"></div>
-                        <div class="fontText" style="color: #0c4377;" id="textProduce3_js"></div>
-                    </div>
-                </div>
-                <div style="width:80%;height:95%;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_js">
-                                    -
-                                </div>
-                                <div style="width:100%;height:80%;" id="myChartProduce1_js"></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_js">
-                                    -
-                                </div>
-                                <div style="width:100%;height:80%;" id="myChartProduce2_js"></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_js">
-                                    -
-                                </div>
-                                <div style="width:100%;height:80%;" id="myChartProduce3_js"></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_js">
-                                    -
-                                </div>
-                                <div style="width:100%;height:80%;" id="myChartProduce4_js"></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_js">
-                                    -
-                                </div>
-                                <div style="width:100%;height:80%;" id="myChartProduce5_js"></div>
+<div class="page-container">
+    <!-- 上部分区域 -->
+    <div class="top-section">
+        <!-- 进水累计（工业+生活合并，上下布局） -->
+        <div class="card">
+            <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>
                         </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_js">
-                                    -
-                                </div>
-                                <div style="width:100%;height:80%;" id="myChartProduce6_js"></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_js">
-                                    -
-                                </div>
-                                <div style="width:100%;height:80%;" id="myChartProduce7_js"></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_js">
-                                    -
-                                </div>
-                                <div style="width:100%;height:80%;" id="myChartProduce8_js"></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_js">
-                                    -
-                                </div>
-                                <div style="width:100%;height:80%;" id="myChartProduce9_js"></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_js">
-                                    -
-                                </div>
-                                <div style="width:100%;height:80%;" id="myChartProduce10_js"></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>
                         </div>
-                        <div style="width:100%;height:3%;float:left;"></div>
                     </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 class="section-header">
-                    水量及电耗
-                </div>
-                <div style="width:100%;height:40%;float:left;">
-
-                    <div style="width:48%;height:45%;float:left;background-color:#378dcc;margin:1%;">
-                        <div class="fontValue" id="safe_value_1">-</div>
-                        <div class="fontText" id="safe_text_1">-</div>
-                    </div>
-                    <div style="width:48%;height:45%;float:right;background-color:#67aad7;margin:1%;">
-                        <div class="fontValue" id="safe_value_2">-</div>
-                        <div class="fontText" id="safe_text_2">-</div>
-                    </div>
-
-                    <div style="width:48%;height:45%;float:left;background-color:#FACA00;margin:1%;">
-                        <div class="fontValue" id="safe_value_3">-</div>
-                        <div class="fontText" id="safe_text_3">-</div>
-                    </div>
-                    <div style="width:48%;height:45%;float:right;background-color:#66D97C;margin:1%;">
-                        <div class="fontValue" id="safe_value_4">-</div>
-                        <div class="fontText" id="safe_text_4">-</div>
-                    </div>
-                </div>
-                <div style="width:100%;height:55%;float:left;padding: 5px 5px 5px 5px;">
-                    <div style="width:100%;height:100%;float:left;">
-                        <div style="width:100%;height:100%;float:left;" id="myChartProduce8"></div>
-                    </div>
-                </div>
+        
+        <!-- 进水流量7天日趋势 -->
+        <div class="card">
+            <div class="card-header">进水流量7天日趋势</div>
+            <div class="card-body">
+                <div id="flow_chart" class="chart-container"></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 class="card">
+            <div class="card-header">设备运行</div>
+            <div class="card-body" style="padding: 0;">
+                <div class="device-list" id="device_list"></div>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 下部分区域 -->
+    <div class="bottom-section">
+        <!-- 工艺列表展示 -->
+        <div class="card">
+            <div class="card-header">工艺列表展示</div>
+            <div class="table-wrapper">
+                <table class="data-table" id="process_table">
+                    <thead>
+                        <tr>
+                            <th>工艺段名称</th>
+                            <th>关键参数1</th>
+                            <th>关键参数2</th>
+                            <th>关键参数3</th>
+                            <th>设备ID</th>
+                        </tr>
+                    </thead>
+                    <tbody></tbody>
+                </table>
+            </div>
+            <div class="pagination">
+                <span class="pagination-info" id="process_page_info"></span>
+                <div class="pagination-btns" id="process_page_btns"></div>
+            </div>
+        </div>
+        
+        <!-- 实时告警列表 -->
+        <div class="card">
+            <div class="card-header">实时告警列表</div>
+            <div class="table-wrapper">
+                <table class="data-table" id="alarm_table">
+                    <thead>
+                        <tr>
+                            <th>报警工艺段名称</th>
+                            <th>报警状态</th>
+                            <th>时间</th>
+                        </tr>
+                    </thead>
+                    <tbody></tbody>
+                </table>
+            </div>
+            <div class="pagination">
+                <span class="pagination-info" id="alarm_page_info"></span>
+                <div class="pagination-btns" id="alarm_page_btns"></div>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 泵站详情区域 -->
+    <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>
         </div>
-        -->
     </div>
-
 </div>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/src/main/webapp/jsp/main_JS_Company2.jsp b/src/main/webapp/jsp/main_JS_Company2.jsp
new file mode 100644
index 00000000..5b063486
--- /dev/null
+++ b/src/main/webapp/jsp/main_JS_Company2.jsp
@@ -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>
\ No newline at end of file
diff --git a/src/main/webapp/jsp/top.jsp b/src/main/webapp/jsp/top.jsp
index 8ca5586a..1f9cada6 100644
--- a/src/main/webapp/jsp/top.jsp
+++ b/src/main/webapp/jsp/top.jsp
@@ -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 -->
diff --git a/污水处理管理平台_v7.html b/污水处理管理平台_v7.html
new file mode 100644
index 00000000..6f8f35c6
--- /dev/null
+++ b/污水处理管理平台_v7.html
@@ -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 &gt; 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>
\ No newline at end of file