节能减排

2025-07-24 00:09:37 +08:00 · 2025-07-24 00:09:37 +08:00 · 3b14315101
parent d8a0c2c70b
commit 3b14315101
2 changed files with 420 additions and 1 deletions
--- a/js/pages/newDataAnalysis/newDataAnalysis.js
+++ b/js/pages/newDataAnalysis/newDataAnalysis.js
@ -41,7 +41,7 @@ function changeData(that, type) {
        src = 'resourceRateAnalysis.html';
    } else if (type == 5) {
        // 节能减排分析
-        src = "";
+        src = "energySavingAnalysis.html";
    } else if (type == 6) {
        // 工人效率分析
        src = "workerEfficiencyAnalysis.html";
--- a/pages/newDataAnalysis/energySavingAnalysis.html
+++ b/pages/newDataAnalysis/energySavingAnalysis.html
@ -0,0 +1,419 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>节能减排分析</title>
+
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="../../css/font.css">
+    <link rel="stylesheet" href="../../plugin/layui-v2.9.7/layui/css/layui.css">
+    <link rel="stylesheet" href="../../css/dataAnalysis/commonStyle.css">
+    <link rel="stylesheet" href="../../css/shuiYin/shuiYin.css">
+    <link rel="stylesheet" href="../../css/coreTable.css"/>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
+    <script src="../../js/publics/sm4.js" type="text/javascript"></script>
+    <script src="../../js/publics/jquery-3.6.0.min.js" type="text/javascript"></script>
+    <script src="../../js/publics/public.js"></script>
+    <script src="../../plugin/layui-v2.9.7/layui/layui.js"></script>
+    <script src="../../js/publics/aescbc.js"></script>
+    <script src="../../js/publics/sm3.js"></script>
+    <script src="../../api/commonRequest.js"></script>
+    <style>
+        html {
+            width: 100%;
+            height: 100%;
+
+        }
+
+        .layui-form-select dl dd {
+            cursor: pointer;
+            background-color: #008781;
+        }
+
+        .shadow {
+            background-color: #FFFFFF;
+        }
+
+        .layui-laydate {
+            background-color: #009B94;
+            color: #FFFFFF;
+        }
+
+        .layui-laydate-content td {
+            color: #FFFFFF;
+        }
+
+        .layui-laydate-header i {
+            color: #FFFFFF;
+
+        }
+
+        .layui-laydate-footer span {
+            background-color: transparent;
+
+        }
+
+        .layui-laydate-preview {
+            color: #FFFFFF;
+        }
+
+        #alarm-container {
+            overflow-x: auto; /* 或 overflow-y: auto，根据需要 */
+
+            /* Firefox */
+            scrollbar-width: none;
+
+            /* IE 10+ */
+            -ms-overflow-style: none;
+        }
+
+        /* Chrome, Edge, Safari */
+        #alarm-container::-webkit-scrollbar {
+            display: none;
+        }
+    </style>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#009B94',
+                        secondary: '#009B94'
+                    },
+                    borderRadius: {
+                        'none': '0px',
+                        'sm': '2px',
+                        DEFAULT: '4px',
+                        'md': '8px',
+                        'lg': '12px',
+                        'xl': '16px',
+                        '2xl': '20px',
+                        '3xl': '24px',
+                        'full': '9999px',
+                        'button': '4px'
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body style="width: 100%;height: 90%;margin-top: 4%;color: #009B94">
+<div class="max-w-[1440px] mx-auto px-4">
+    <div class="flex items-center justify-between mb-4">
+        <form class="layui-form" style="color: #009B94" action="">
+            <div class="layui-form-item">
+                <div class="layui-inline">
+                    <div class="layui-inline" id="ID-laydate-range">
+                        <div class="layui-input-inline">
+                            <input type="text" autocomplete="off" id="ID-laydate-start-date" class="layui-input"
+                                   placeholder="开始日期">
+                        </div>
+                        <div class="layui-form-mid">-</div>
+                        <div class="layui-input-inline">
+                            <input type="text" autocomplete="off" id="ID-laydate-end-date" class="layui-input"
+                                   placeholder="结束日期">
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+        </form>
+    </div>
+    <div class="grid grid-cols-2 gap-6 mb-8">
+        <div class=" p-6 rounded-lg shadow">
+            <h3 class="text-lg font-bold mb-4">能耗趋势分析</h3>
+            <div id="trendChart" style="height: 300px;"></div>
+        </div>
+        <div class=" p-6 rounded-lg shadow">
+            <h3 class="text-lg font-bold mb-4">设备能耗占比</h3>
+            <div id="deviceChart" style="height: 300px;"></div>
+        </div>
+    </div>
+
+    <div class="grid grid-cols-2 gap-6 mb-8">
+        <div class=" p-6 rounded-lg shadow">
+            <h3 class="text-lg font-bold mb-4">节能减排措施落实情况</h3>
+            <div class="space-y-4">
+                <div>
+                    <div class="flex justify-between mb-1">
+                        <span>光伏板覆盖率</span>
+                        <span class="font-bold">80%</span>
+                    </div>
+                    <div class="h-2 bg-gray-200 rounded-full">
+                        <div class="h-2 bg-primary rounded-full" style="width: 80%"></div>
+                    </div>
+                </div>
+                <div>
+                    <div class="flex justify-between mb-1">
+                        <span>节能电焊机替换率</span>
+                        <span class="font-bold">100%</span>
+                    </div>
+                    <div class="h-2 bg-gray-200 rounded-full">
+                        <div class="h-2 bg-primary rounded-full" style="width: 100%"></div>
+                    </div>
+                </div>
+                <div>
+                    <div class="flex justify-between mb-1">
+                        <span>LED 照明覆盖率</span>
+                        <span class="font-bold">95%</span>
+                    </div>
+                    <div class="h-2 bg-gray-200 rounded-full">
+                        <div class="h-2 bg-primary rounded-full" style="width: 95%"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="p-6 rounded-lg shadow">
+            <h3 class="text-lg font-bold mb-4">能耗异常分析</h3>
+            <div id="alarm-container" class="space-y-4"
+                 style="overflow-x: auto; max-height: 130px; overflow-y: auto;"></div>
+
+        </div>
+    </div>
+</div>
+
+<script>
+    const trendChart = echarts.init(document.getElementById('trendChart'));
+    const deviceChart = echarts.init(document.getElementById('deviceChart'));
+    let table, layer, form, laydate;
+    layui.use(["layer", "table", "form"], function () {
+        layer = layui.layer;
+        table = layui.table;
+        form = layui.form;
+        laydate = layui.laydate;
+        let range = getDateRangeOneMonth();
+
+        laydate.render({
+            elem: '#ID-laydate-range',
+            range: ['#ID-laydate-start-date', '#ID-laydate-end-date'],
+            value: range.startDate + ' - ' + range.endDate,
+            done: function (value) {
+                // value 是选择的字符串，比如 '2025-06-23 - 2025-07-23'
+                console.log('选择的日期范围:', value);
+                const [startDate, endDate] = value.split(" - ");
+                let data = {
+                    "startDate": startDate,
+                    "endDate": endDate,
+                    "proId": parent.parent.$('#bidPro').val()
+                }
+                selectEnergyStatsByDateRange(data)
+                selectDeviceEnergyByDateRange(data)
+                selectAnomalyByDateRange(data)
+                // 这里可以写你想监听后做的操作
+            }
+        });
+        let data = {
+            "startDate": range.startDate,
+            "endDate": range.endDate,
+            "proId": parent.parent.$('#bidPro').val()
+        }
+
+        selectEnergyStatsByDateRange(data)
+        selectDeviceEnergyByDateRange(data)
+        selectAnomalyByDateRange(data)
+    });
+
+    // 获取今天和一个月前日期，格式 yyyy-MM-dd
+    function getDateRangeOneMonth() {
+        let today = new Date();
+        let year = today.getFullYear();
+        let month = today.getMonth();
+        let day = today.getDate();
+
+        let oneMonthAgo = new Date(year, month - 1, day);
+
+        function formatDate(d) {
+            let m = d.getMonth() + 1;
+            let day = d.getDate();
+            return d.getFullYear() + '-' + (m < 10 ? '0' + m : m) + '-' + (day < 10 ? '0' + day : day);
+        }
+
+        return {
+            startDate: formatDate(oneMonthAgo),
+            endDate: formatDate(today)
+        };
+    }
+
+    /* 加载数据分析应用 */
+    function selectEnergyStatsByDateRange(data) {
+        const url = commonUrl + 'screen/largeScreen/deviceEnergyAnalysis/selectEnergyStatsByDateRange';
+        ajaxRequest(url, "post", JSON.stringify(data), true, function () {
+        }, function (result) {
+            if (result.code === 200) {
+                trendChartFn(result.data)
+            } else if (result.code === 500) {
+                console.error('数据分析应用' + result.msg);
+            } else if (result.code === 401) {
+
+            }
+        }, function (xhr, status, error) {
+
+        }, "application/json", aqEnnable);
+    }
+
+
+    /* 加载数据分析应用 */
+    function selectDeviceEnergyByDateRange(data) {
+        const url = commonUrl + 'screen/largeScreen/deviceEnergyAnalysis/selectDeviceEnergyByDateRange';
+        ajaxRequest(url, "post", JSON.stringify(data), true, function () {
+        }, function (result) {
+            if (result.code === 200) {
+                deviceChartFn(result.data)
+            } else if (result.code === 500) {
+                console.error('数据分析应用' + result.msg);
+            } else if (result.code === 401) {
+
+            }
+        }, function (xhr, status, error) {
+
+        }, "application/json", aqEnnable);
+    }
+
+    function selectAnomalyByDateRange(data) {
+        const url = commonUrl + 'screen/largeScreen/deviceEnergyAnalysis/selectAnomalyByDateRange';
+        ajaxRequest(url, "post", JSON.stringify(data), true, function () {
+        }, function (result) {
+            if (result.code === 200) {
+                insertAlarm(result.data)
+            } else if (result.code === 500) {
+                console.error('数据分析应用' + result.msg);
+            } else if (result.code === 401) {
+
+            }
+        }, function (xhr, status, error) {
+
+        }, "application/json", aqEnnable);
+    }
+
+
+    function insertAlarm(data) {
+        const container = document.getElementById('alarm-container');
+        container.innerHTML = ''; // 🔄 清空原有内容
+        const colorMap = {
+            info: {
+                bg: 'bg-blue-50',
+                icon: 'fa-info-circle',
+                iconColor: 'text-blue-500',
+                titleColor: 'text-blue-900',
+                timeColor: 'text-blue-700'
+            },
+            warning: {
+                bg: 'bg-yellow-50',
+                icon: 'fa-exclamation-triangle',
+                iconColor: 'text-yellow-500',
+                titleColor: 'text-yellow-900',
+                timeColor: 'text-yellow-700'
+            },
+            danger: {
+                bg: 'bg-red-50',
+                icon: 'fa-exclamation-circle',
+                iconColor: 'text-red-500',
+                titleColor: 'text-red-900',
+                timeColor: 'text-red-700'
+            }
+        };
+        data.map(item => {
+            const cfg = colorMap[item.anomalyLevel];
+
+            const div = document.createElement('div');
+            div.className = `flex items-start gap-3 p-4 ${cfg.bg} rounded-lg`;
+            div.innerHTML = `
+        <i class="fas ${cfg.icon} ${cfg.iconColor} mt-1"></i>
+        <div>
+            <div class="font-medium ${cfg.titleColor}">${item.anomalyDesc}</div>
+            <div class="${cfg.timeColor} text-sm mt-1">${item.statDate}</div>
+        </div>
+    `;
+            container.appendChild(div);
+        })
+
+    }
+
+
+    function trendChartFn(data) {
+        let statDate = [];
+        let consumptionKwh = [];
+        let renewableUsedKwh = [];
+
+        data.map(item => {
+            statDate.push(item.statDate);
+            consumptionKwh.push(item.consumptionKwh);
+            renewableUsedKwh.push(item.renewableUsedKwh);
+        })
+        trendChart.setOption({
+            animation: false,
+            tooltip: {
+                trigger: 'axis'
+            },
+            legend: {
+                data: ['能源消耗量', '节能减排量']
+            },
+            xAxis: {
+                type: 'category',
+                data: statDate
+            },
+            yAxis: [{
+                type: 'value',
+                name: '能源消耗量(kWh)'
+            }, {
+                type: 'value',
+                name: '节能减排量(kgCO₂)',
+                splitLine: {
+                    show: false
+                }
+            }],
+            series: [{
+                name: '能源消耗量',
+                type: 'line',
+                data: consumptionKwh
+            }, {
+                name: '节能减排量',
+                type: 'line',
+                yAxisIndex: 1,
+                data: renewableUsedKwh
+            }]
+        });
+    }
+
+    function deviceChartFn(data) {
+        let deviceName = [];
+        let consumptionKwh = []
+        data.map(item => {
+            deviceName.push(item.deviceName);
+            consumptionKwh.push(item.consumptionKwh);
+        })
+        deviceChart.setOption({
+            animation: false,
+            tooltip: {
+                trigger: 'axis',
+                axisPointer: {
+                    type: 'shadow'
+                }
+            },
+            xAxis: {
+                type: 'value'
+            },
+            yAxis: {
+                type: 'category',
+                data: deviceName
+            },
+            series: [{
+                type: 'bar',
+                data: consumptionKwh,
+                itemStyle: {
+                    color: '#22c55e'
+                }
+            }]
+        });
+    }
+
+
+    window.addEventListener('resize', function () {
+        trendChart.resize();
+        deviceChart.resize();
+    });
+</script>
+</body>
+</html>