cwchen
/
ah_jjzhgd_webscreen
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

节能减排

This commit is contained in:
jiang 2025-07-24 14:03:38 +08:00
parent 823f151a39
commit f36daef384
12 changed files with 8396 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8108
css/all.min.css vendored Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
css/webfonts/fa-brands-400.ttf Normal file
View File

Binary file not shown.

BIN
css/webfonts/fa-brands-400.woff2 Normal file
View File

Binary file not shown.

BIN
css/webfonts/fa-regular-400.ttf Normal file
View File

Binary file not shown.

BIN
css/webfonts/fa-regular-400.woff2 Normal file
View File

Binary file not shown.

BIN
css/webfonts/fa-solid-900.ttf Normal file
View File

Binary file not shown.

BIN
css/webfonts/fa-solid-900.woff2 Normal file
View File

Binary file not shown.

BIN
css/webfonts/fa-v4compatibility.ttf Normal file
View File

Binary file not shown.

BIN
css/webfonts/fa-v4compatibility.woff2 Normal file
View File

Binary file not shown.

83
js/publics/tailwindcss.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

154
pages/newDataAnalysis/energySavingAnalysis.html
View File

@ -5,14 +5,14 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>节能减排分析</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="../../js/publics/tailwindcss.min.js"></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>
<link href="../../css/all.min.css" rel="stylesheet">
<script src="../../js/publics/echarts.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>
@ -22,8 +22,16 @@
<script src="../../api/commonRequest.js"></script>
<style>
html {
width: 100%;height: 90%;margin-top: 3%;color: #009B94
width: 100%;
height: 90%;
margin-top: 3%;
color: #009B94
}
.layui-icon-close:before {
color: #009B94
}
.layui-form-select dl dd {
@ -49,6 +57,21 @@
}
.shadow {
background: linear-gradient(
135deg,
rgba(22, 186, 170, 0.1) 0%,
rgba(22, 186, 170, 0.05) 100%
);
}
.layui-layer {
background-image: url("../../img/video/child-back.png");
background-size: 100% 100%;
background-color: transparent;
}
.layui-laydate-footer span {
background-color: transparent;
@ -100,7 +123,7 @@
</head>
<body style="width: 100%;height: 100%;color: #FFFFFF">
<div class="max-w-[1440px] mx-auto px-4">
<div class="flex items-center justify-between mb-4">
<div class="flex items-center justify-between mb-1">
<form class="layui-form" style="color: #009B94" action="">
<div class="layui-form-item">
<div class="layui-inline">
@ -121,53 +144,25 @@
</form>
</div>
<div class="grid grid-cols-2 gap-4 mb-2">
<div class="bg-[#002628] border border-[#004446] p-4 rounded-lg shadow">
<div class=" border border-[#004446] p-4 rounded-lg shadow">
<h3 class="text-lg font-bold mb-1">能耗趋势分析</h3>
<div id="trendChart" style="height: 280px;"></div>
<div id="trendChart" style="height: 300px;"></div>
</div>
<div class="bg-[#002628] border border-[#004446] p-4 rounded-lg shadow">
<div class=" border border-[#004446] p-4 rounded-lg shadow">
<h3 class="text-lg font-bold mb-1">设备能耗占比</h3>
<div id="deviceChart" style="height: 280px;"></div>
<div id="deviceChart" style="height: 300px;width: 100%"></div>
</div>
</div>
<div class="grid grid-cols-2 gap-4 mb-2">
<div class="bg-[#002628] border border-[#004446] p-4 rounded-lg shadow">
<div class=" border border-[#004446] p-4 rounded-lg shadow">
<h3 class="text-lg font-bold mb-2">节能减排措施落实情况</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 id="progress-container" class="space-y-4"></div>
</div>
<div class="bg-[#002628] p-4 rounded-lg shadow border border-[#004446]">
<div class=" p-4 rounded-lg shadow border border-[#004446]">
<h3 class="text-lg font-bold mb-2">能耗异常分析</h3>
<div id="alarm-container" class="space-y-4"
style="height: 280px; overflow-y: auto;"></div>
style="height: 270px; overflow-y: auto;"></div>
</div>
</div>
@ -200,6 +195,7 @@
selectEnergyStatsByDateRange(data)
selectDeviceEnergyByDateRange(data)
selectAnomalyByDateRange(data)
selectLatestAll(data)
// 这里可以写你想监听后做的操作
}
});
@ -212,6 +208,7 @@
selectEnergyStatsByDateRange(data)
selectDeviceEnergyByDateRange(data)
selectAnomalyByDateRange(data)
selectLatestAll(data)
});
// 获取今天和一个月前日期，格式 yyyy-MM-dd
@ -270,6 +267,7 @@
}, "application/json", aqEnnable);
}
function selectAnomalyByDateRange(data) {
const url = commonUrl + 'screen/largeScreen/deviceEnergyAnalysis/selectAnomalyByDateRange';
ajaxRequest(url, "post", JSON.stringify(data), true, function () {
@ -287,26 +285,61 @@
}
/* 加载数据分析应用 */
function selectLatestAll(data) {
const url = commonUrl + 'screen/largeScreen/deviceEnergyAnalysis/selectLatestAll';
ajaxRequest(url, "post", JSON.stringify(data), true, function () {
}, function (result) {
if (result.code === 200) {
insetLatest(result.data)
} else if (result.code === 500) {
console.error('数据分析应用' + result.msg);
} else if (result.code === 401) {
}
}, function (xhr, status, error) {
}, "application/json", aqEnnable);
}
function insetLatest(data) {
const container = document.getElementById('progress-container');
data.map(item => {
const block = document.createElement('div');
block.innerHTML = `
<div class="flex justify-between mb-1">
<span>${item.measureName}</span>
<span class="font-bold">${item.coverageRate * 100}%</span>
</div>
<div class="h-2 bg-gray-200 rounded-full">
<div class="h-2 bg-primary rounded-full" style="width: ${item.coverageRate * 100}%"></div>
</div>
`;
container.appendChild(block);
})
}
function insertAlarm(data) {
const container = document.getElementById('alarm-container');
container.innerHTML = ''; // 🔄 清空原有内容
const colorMap = {
info: {
bg: 'bg-blue-50',
bg: 'bg-blue-100',
icon: 'fa-info-circle',
iconColor: 'text-blue-500',
titleColor: 'text-blue-900',
timeColor: 'text-blue-700'
},
warning: {
bg: 'bg-yellow-50',
bg: 'bg-yellow-100',
icon: 'fa-exclamation-triangle',
iconColor: 'text-yellow-500',
titleColor: 'text-yellow-900',
timeColor: 'text-yellow-700'
},
danger: {
bg: 'bg-red-50',
bg: 'bg-red-100',
icon: 'fa-exclamation-circle',
iconColor: 'text-red-500',
titleColor: 'text-red-900',
@ -316,21 +349,42 @@
data.map(item => {
const cfg = colorMap[item.anomalyLevel];
const div = document.createElement('div');
div.onclick = () => goDetail(item);
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>
<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>
`;
<div class="font-medium ${cfg.titleColor}" style="font-size: 16px">${item.deviceName}</div>
<div class="flex font-medium gap-2 p-1 ${cfg.titleColor}" style="width: 100%"><span>${item.anomalyDesc}</span><span style="float: right">${item.statDate}</span></div>
</div>`;
container.appendChild(div);
})
}
function goDetail(date) {
let layerIndex = layer.open({
type: 2, // page 层类型
area: ['600px', '400px'],
title: [`${date.deviceName} 异常详情`, 'font-size: 20px;color: #009B94;'],
shade: 0.6, // 遮罩透明度
shadeClose: true, // 点击遮罩区域，关闭弹层
anim: 0, // 0-6 的动画形式，-1 不开启
content: 'exception-detail.html',
success: function () {
if (date) {
let iframeWin = window["layui-layer-iframe" + layerIndex];
iframeWin.setParams(JSON.stringify(date));
}
}
});
}
function trendChartFn(data) {
let statDate = [];
let consumptionKwh = [];
@ -425,7 +479,7 @@
type: 'bar',
data: consumptionKwh,
itemStyle: {
color: '#00C6BE'
color: '#008781'
},
label: {
show: true, // 开启显示

101
pages/newDataAnalysis/exception-detail.html Normal file
View File

@ -0,0 +1,101 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>能耗异常详细分析</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui@2.8.18/dist/css/layui.css">
<script src="https://cdn.jsdelivr.net/npm/layui@2.8.18/dist/layui.js"></script>
<style>
body {
background-color: transparent;
color: #FFFFFF;
padding: 30px;
font-family: "Microsoft YaHei", sans-serif;
font-size: 16px;
}
.card {
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
max-width: 600px;
margin: 0 auto;
}
.card-title {
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
border-left: 6px solid #16baaa;
padding-left: 12px;
}
.info-item {
display: flex;
margin-bottom: 16px;
}
.info-label {
width: 100px;
font-weight: bold;
color: #cccccc;
}
.info-value {
flex: 1;
color: #ffffff;
}
</style>
</head>
<body>
<div class="card">
<div class="info-item">
<div class="info-label">设备名称</div>
<div class="info-value" id="device-name">加载中...</div>
</div>
<div class="info-item">
<div class="info-label">异常日期</div>
<div class="info-value" id="abnormal-date">加载中...</div>
</div>
<div class="info-item">
<div class="info-label">异常类型</div>
<div class="info-value" id="anomalyDesc">设备过载能耗</div>
</div>
<div class="info-item">
<div class="info-label">异常时段</div>
<div class="info-value">13:00 - 14:30</div>
</div>
<div class="info-item">
<div class="info-label">建议措施</div>
<div class="info-value">检查设备运行负荷，适当分配工作任务。</div>
</div>
</div>
<script>
// 从 URL 获取参数
function getQueryParam(param) {
const urlParams = new URLSearchParams(window.location.search);
return urlParams.get(param);
}
function setParams(data){
let item = JSON.parse(data);
console.log(data);
document.getElementById('device-name').innerText = item.deviceName;
document.getElementById('abnormal-date').innerText = item.statDate;
document.getElementById('anomalyDesc').innerText = item.anomalyDesc;
}
</script>
</body>
</html>