cwchen
/
ah_jjzhgd_webscreen
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
ah_jjzhgd_webscreen/pages/newDataAnalysis/energySavingAnalysis.html

509 lines
16 KiB
HTML
Raw Normal View History

节能减排
2025-07-24 00:09:37 +08:00
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>节能减排分析</title>
节能减排
2025-07-24 14:03:38 +08:00
<script src="../../js/publics/tailwindcss.min.js"></script>
节能减排
2025-07-24 00:09:37 +08:00
<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"/>
节能减排
2025-07-24 14:03:38 +08:00
<link href="../../css/all.min.css" rel="stylesheet">
<script src="../../js/publics/echarts.js"></script>
节能减排
2025-07-24 00:09:37 +08:00
<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 {
节能减排
2025-07-24 14:03:38 +08:00
width: 100%;
height: 90%;
margin-top: 3%;
color: #009B94
}
节能减排
2025-07-24 00:09:37 +08:00
节能减排
2025-07-24 14:03:38 +08:00
.layui-icon-close:before {
color: #009B94
节能减排
2025-07-24 00:09:37 +08:00
}
.layui-form-select dl dd {
cursor: pointer;
background-color: #008781;
}
节能减排
2025-07-24 09:50:13 +08:00
/*.shadow {
节能减排
2025-07-24 00:09:37 +08:00
background-color: #FFFFFF;
节能减排
2025-07-24 09:50:13 +08:00
}*/
节能减排
2025-07-24 00:09:37 +08:00
.layui-laydate {
background-color: #009B94;
color: #FFFFFF;
}
.layui-laydate-content td {
color: #FFFFFF;
}
.layui-laydate-header i {
color: #FFFFFF;
}
节能减排
2025-07-24 14:03:38 +08:00
.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;
}
节能减排
2025-07-24 00:09:37 +08:00
.layui-laydate-footer span {
background-color: transparent;
}
.layui-laydate-preview {
color: #FFFFFF;
}
节能减排
2025-07-24 14:51:03 +08:00
.layui-layer-title {
border: none;
}
节能减排
2025-07-24 00:09:37 +08:00
#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>
节能减排
2025-07-24 09:50:13 +08:00
<body style="width: 100%;height: 100%;color: #FFFFFF">
节能减排
2025-07-24 00:09:37 +08:00
<div class="max-w-[1440px] mx-auto px-4">
节能减排
2025-07-24 14:03:38 +08:00
<div class="flex items-center justify-between mb-1">
节能减排
2025-07-24 00:09:37 +08:00
<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>
节能减排
2025-07-24 09:50:13 +08:00
<div class="grid grid-cols-2 gap-4 mb-2">
节能减排
2025-07-24 14:03:38 +08:00
<div class=" border border-[#004446] p-4 rounded-lg shadow">
节能减排
2025-07-24 09:50:13 +08:00
<h3 class="text-lg font-bold mb-1">能耗趋势分析</h3>
节能减排
2025-07-24 14:03:38 +08:00
<div id="trendChart" style="height: 300px;"></div>
节能减排
2025-07-24 00:09:37 +08:00
</div>
节能减排
2025-07-24 14:03:38 +08:00
<div class=" border border-[#004446] p-4 rounded-lg shadow">
节能减排
2025-07-24 09:50:13 +08:00
<h3 class="text-lg font-bold mb-1">设备能耗占比</h3>
节能减排
2025-07-24 14:03:38 +08:00
<div id="deviceChart" style="height: 300px;width: 100%"></div>
节能减排
2025-07-24 00:09:37 +08:00
</div>
</div>
节能减排
2025-07-24 09:50:13 +08:00
<div class="grid grid-cols-2 gap-4 mb-2">
节能减排
2025-07-24 14:03:38 +08:00
<div class=" border border-[#004446] p-4 rounded-lg shadow">
节能减排
2025-07-24 09:50:13 +08:00
<h3 class="text-lg font-bold mb-2">节能减排措施落实情况</h3>
节能减排
2025-07-24 14:03:38 +08:00
<div id="progress-container" class="space-y-4"></div>
节能减排
2025-07-24 00:09:37 +08:00
</div>
节能减排
2025-07-24 14:03:38 +08:00
<div class=" p-4 rounded-lg shadow border border-[#004446]">
节能减排
2025-07-24 09:50:13 +08:00
<h3 class="text-lg font-bold mb-2">能耗异常分析</h3>
节能减排
2025-07-24 00:09:37 +08:00
<div id="alarm-container" class="space-y-4"
节能减排
2025-07-24 14:03:38 +08:00
style="height: 270px; overflow-y: auto;"></div>
节能减排
2025-07-24 00:09:37 +08:00
</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'],
节能减排
2025-07-24 14:30:02 +08:00
btns: ['confirm'],
节能减排
2025-07-24 00:09:37 +08:00
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)
节能减排
2025-07-24 14:03:38 +08:00
selectLatestAll(data)
节能减排
2025-07-24 00:09:37 +08:00
// 这里可以写你想监听后做的操作
}
});
let data = {
"startDate": range.startDate,
"endDate": range.endDate,
"proId": parent.parent.$('#bidPro').val()
}
selectEnergyStatsByDateRange(data)
selectDeviceEnergyByDateRange(data)
selectAnomalyByDateRange(data)
节能减排
2025-07-24 14:03:38 +08:00
selectLatestAll(data)
节能减排
2025-07-24 00:09:37 +08:00
});
// 获取今天和一个月前日期，格式 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);
}
节能减排
2025-07-24 14:03:38 +08:00
节能减排
2025-07-24 00:09:37 +08:00
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);
}
节能减排
2025-07-24 14:03:38 +08:00
/* 加载数据分析应用 */
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');
节能减排
2025-07-24 14:30:02 +08:00
container.innerHTML = ''; // 🔄 清空原有内容
节能减排
2025-07-24 14:03:38 +08:00
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);
})
}
节能减排
2025-07-24 00:09:37 +08:00
function insertAlarm(data) {
const container = document.getElementById('alarm-container');
container.innerHTML = ''; // 🔄 清空原有内容
const colorMap = {
info: {
节能减排
2025-07-24 14:03:38 +08:00
bg: 'bg-blue-100',
节能减排
2025-07-24 00:09:37 +08:00
icon: 'fa-info-circle',
iconColor: 'text-blue-500',
titleColor: 'text-blue-900',
timeColor: 'text-blue-700'
},
warning: {
节能减排
2025-07-24 14:03:38 +08:00
bg: 'bg-yellow-100',
节能减排
2025-07-24 00:09:37 +08:00
icon: 'fa-exclamation-triangle',
iconColor: 'text-yellow-500',
titleColor: 'text-yellow-900',
timeColor: 'text-yellow-700'
},
danger: {
节能减排
2025-07-24 14:03:38 +08:00
bg: 'bg-red-100',
节能减排
2025-07-24 00:09:37 +08:00
icon: 'fa-exclamation-circle',
iconColor: 'text-red-500',
titleColor: 'text-red-900',
timeColor: 'text-red-700'
}
};
data.map(item => {
const cfg = colorMap[item.anomalyLevel];
节能减排
2025-07-24 14:03:38 +08:00
节能减排
2025-07-24 00:09:37 +08:00
const div = document.createElement('div');
节能减排
2025-07-24 14:03:38 +08:00
div.onclick = () => goDetail(item);
节能减排
2025-07-24 00:09:37 +08:00
div.className = `flex items-start gap-3 p-4 ${cfg.bg} rounded-lg`;
div.innerHTML = `
节能减排
2025-07-24 14:03:38 +08:00
<i class="fas ${cfg.icon} ${cfg.iconColor} mt-1"></i>
节能减排
2025-07-24 00:09:37 +08:00
<div>
节能减排
2025-07-24 14:03:38 +08:00
<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>`;
节能减排
2025-07-24 00:09:37 +08:00
container.appendChild(div);
})
}
节能减排
2025-07-24 14:03:38 +08:00
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));
}
}
});
}
节能减排
2025-07-24 00:09:37 +08:00
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'
},
节能减排
2025-07-24 09:50:13 +08:00
textStyle: {
color: '#FFFFFF'
},
节能减排
2025-07-24 00:09:37 +08:00
legend: {
节能减排
2025-07-24 09:50:13 +08:00
data: ['能源消耗量', '节能减排量'],
textStyle: {
color: '#FFFFFF'
}
节能减排
2025-07-24 00:09:37 +08:00
},
xAxis: {
type: 'category',
data: statDate
},
yAxis: [{
type: 'value',
name: '能源消耗量(kWh)'
}, {
type: 'value',
name: '节能减排量(kgCO₂)',
splitLine: {
show: false
}
}],
series: [{
name: '能源消耗量',
type: 'line',
节能减排
2025-07-24 09:50:13 +08:00
data: consumptionKwh,
label: {
show: true,
position: 'top',
color: '#FFFFFF',
fontSize: 12,
formatter: '{c}'
}
节能减排
2025-07-24 00:09:37 +08:00
}, {
name: '节能减排量',
type: 'line',
yAxisIndex: 1,
节能减排
2025-07-24 09:50:13 +08:00
data: renewableUsedKwh,
label: {
show: true,
position: 'top',
color: '#FFFFFF',
fontSize: 12,
formatter: '{c}'
}
},]
节能减排
2025-07-24 00:09:37 +08:00
});
}
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'
}
},
节能减排
2025-07-24 09:50:13 +08:00
textStyle: {
color: '#FFFFFF'
},
节能减排
2025-07-24 00:09:37 +08:00
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: deviceName
},
series: [{
type: 'bar',
data: consumptionKwh,
itemStyle: {
节能减排
2025-07-24 14:03:38 +08:00
color: '#008781'
节能减排
2025-07-24 09:50:13 +08:00
},
label: {
show: true, // 开启显示
position: 'right', // 数值显示在柱状图右侧（柱子尾部）
color: '#FFFFFF', // 设置字体颜色，根据背景可调整
fontSize: 12,
formatter: '{c}' // 显示对应的数值
节能减排
2025-07-24 00:09:37 +08:00
}
}]
});
}
window.addEventListener('resize', function () {
trendChart.resize();
deviceChart.resize();
});
</script>
</body>
</html>