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 {
|
2025-07-24 14:52:54 +08:00
|
|
|
|
border-bottom: 1px solid #008781;
|
2025-07-24 14:51:03 +08:00
|
|
|
|
}
|
2025-07-24 18:16:13 +08:00
|
|
|
|
|
|
|
|
|
|
.layui-laydate-preview {
|
2025-07-24 17:27:00 +08:00
|
|
|
|
color: #FFFFFF !important;
|
|
|
|
|
|
}
|
2025-07-24 14:51:03 +08:00
|
|
|
|
|
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 19:38:54 +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 19:38:54 +08:00
|
|
|
|
<h3 class="text-lg font-bold mb-2">设备节能占比</h3>
|
|
|
|
|
|
<div id="renewableUsedKwh" style="height: 300px;width: 100%;"></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'));
|
2025-07-24 19:38:54 +08:00
|
|
|
|
const renewableUsedKwhChart = echarts.init(document.getElementById('renewableUsedKwh'));
|
|
|
|
|
|
|
2025-07-24 00:09:37 +08:00
|
|
|
|
let table, layer, form, laydate;
|
|
|
|
|
|
layui.use(["layer", "table", "form"], function () {
|
|
|
|
|
|
layer = layui.layer;
|
|
|
|
|
|
table = layui.table;
|
|
|
|
|
|
form = layui.form;
|
|
|
|
|
|
laydate = layui.laydate;
|
2025-07-24 17:27:00 +08:00
|
|
|
|
let range = getDateRangeOneWeek();
|
2025-07-24 00:09:37 +08:00
|
|
|
|
|
2025-07-24 18:16:13 +08:00
|
|
|
|
range.startDate = "2024-09-17"
|
|
|
|
|
|
range.endDate = "2024-09-24"
|
2025-07-24 00:09:37 +08:00
|
|
|
|
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 18:16:13 +08:00
|
|
|
|
value: range.startDate + ' - ' + range.endDate,
|
2025-07-24 00:09:37 +08:00
|
|
|
|
done: function (value) {
|
|
|
|
|
|
// value 是选择的字符串，比如 '2025-06-23 - 2025-07-23'
|
2025-07-24 17:27:00 +08:00
|
|
|
|
const [startDateStr, endDateStr] = value.split(" - ");
|
|
|
|
|
|
const startDate = new Date(startDateStr);
|
|
|
|
|
|
const endDate = new Date(endDateStr);
|
|
|
|
|
|
|
|
|
|
|
|
// 计算两个日期相差的天数
|
|
|
|
|
|
const diffDays = (endDate - startDate) / (1000 * 60 * 60 * 24);
|
|
|
|
|
|
|
|
|
|
|
|
if (diffDays > 7) {
|
|
|
|
|
|
layer.msg('起止时间不能超过7天', {icon: 0});
|
|
|
|
|
|
// 重置日期为上一次合法范围（或你预设的默认值）
|
|
|
|
|
|
this.elem.val(range.startDate + ' - ' + range.endDate);
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2025-07-24 00:09:37 +08:00
|
|
|
|
let data = {
|
2025-07-24 17:27:00 +08:00
|
|
|
|
"startDate": startDateStr,
|
|
|
|
|
|
"endDate": endDateStr,
|
2025-07-24 00:09:37 +08:00
|
|
|
|
"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
|
2025-07-24 17:27:00 +08:00
|
|
|
|
function getDateRangeOneWeek() {
|
2025-07-24 00:09:37 +08:00
|
|
|
|
let today = new Date();
|
|
|
|
|
|
|
2025-07-24 17:27:00 +08:00
|
|
|
|
// 复制一个日期，减去7天
|
|
|
|
|
|
let oneWeekAgo = new Date(today);
|
|
|
|
|
|
oneWeekAgo.setDate(today.getDate() - 7);
|
2025-07-24 00:09:37 +08:00
|
|
|
|
|
|
|
|
|
|
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 {
|
2025-07-24 17:27:00 +08:00
|
|
|
|
startDate: formatDate(oneWeekAgo),
|
2025-07-24 00:09:37 +08:00
|
|
|
|
endDate: formatDate(today)
|
|
|
|
|
|
};
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2025-07-24 17:27:00 +08:00
|
|
|
|
|
2025-07-24 00:09:37 +08:00
|
|
|
|
/* 加载数据分析应用 */
|
|
|
|
|
|
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)
|
2025-07-24 19:38:54 +08:00
|
|
|
|
renewableUsedKwhFn(result.data)
|
2025-07-24 00:09:37 +08:00
|
|
|
|
} 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);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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);
|
2025-07-24 19:38:54 +08:00
|
|
|
|
consumptionKwh.push(Number(parseFloat(item.consumptionKwh).toFixed(2)));
|
|
|
|
|
|
renewableUsedKwh.push(Number(parseFloat(item.renewableUsedKwh).toFixed(2)));
|
2025-07-24 00:09:37 +08:00
|
|
|
|
})
|
|
|
|
|
|
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',
|
2025-07-24 17:27:00 +08:00
|
|
|
|
name: '能源消耗量(kWh)',
|
|
|
|
|
|
|
2025-07-24 00:09:37 +08:00
|
|
|
|
}, {
|
|
|
|
|
|
type: 'value',
|
|
|
|
|
|
name: '节能减排量(kgCO₂)',
|
2025-07-24 17:27:00 +08:00
|
|
|
|
|
2025-07-24 00:09:37 +08:00
|
|
|
|
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);
|
2025-07-24 19:38:54 +08:00
|
|
|
|
consumptionKwh.push(Number(parseFloat(item.consumptionKwh).toFixed(2)));
|
2025-07-24 00:09:37 +08:00
|
|
|
|
})
|
|
|
|
|
|
deviceChart.setOption({
|
|
|
|
|
|
animation: false,
|
|
|
|
|
|
tooltip: {
|
|
|
|
|
|
trigger: 'axis',
|
2025-07-24 19:38:54 +08:00
|
|
|
|
axisPointer: {type: 'shadow'}
|
2025-07-24 00:09:37 +08:00
|
|
|
|
},
|
2025-07-24 19:38:54 +08:00
|
|
|
|
textStyle: {color: '#FFFFFF'},
|
|
|
|
|
|
grid: {
|
|
|
|
|
|
left: 30, // 增大左边距，给长标签留出空间
|
|
|
|
|
|
right: 30,
|
|
|
|
|
|
top: 20,
|
|
|
|
|
|
bottom: 30,
|
|
|
|
|
|
containLabel: true
|
2025-07-24 00:09:37 +08:00
|
|
|
|
},
|
2025-07-24 19:38:54 +08:00
|
|
|
|
xAxis: {type: 'value'},
|
2025-07-24 00:09:37 +08:00
|
|
|
|
yAxis: {
|
|
|
|
|
|
type: 'category',
|
|
|
|
|
|
data: deviceName
|
|
|
|
|
|
},
|
|
|
|
|
|
series: [{
|
|
|
|
|
|
type: 'bar',
|
|
|
|
|
|
data: consumptionKwh,
|
2025-07-24 19:38:54 +08:00
|
|
|
|
itemStyle: {color: '#008781'},
|
|
|
|
|
|
label: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
position: 'right',
|
|
|
|
|
|
color: '#FFFFFF',
|
|
|
|
|
|
fontSize: 12,
|
|
|
|
|
|
formatter: '{c}'
|
|
|
|
|
|
}
|
|
|
|
|
|
}]
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function renewableUsedKwhFn(data) {
|
|
|
|
|
|
let deviceName = [];
|
|
|
|
|
|
let renewableUsedKwh = []
|
|
|
|
|
|
data.map(item => {
|
|
|
|
|
|
deviceName.push(item.deviceName);
|
|
|
|
|
|
renewableUsedKwh.push(Number(parseFloat(item.renewableUsedKwh).toFixed(2)));
|
|
|
|
|
|
})
|
|
|
|
|
|
renewableUsedKwhChart.setOption({
|
|
|
|
|
|
animation: false,
|
|
|
|
|
|
tooltip: {
|
|
|
|
|
|
trigger: 'axis',
|
|
|
|
|
|
axisPointer: {type: 'shadow'}
|
|
|
|
|
|
},
|
|
|
|
|
|
textStyle: {color: '#FFFFFF'},
|
|
|
|
|
|
grid: {
|
|
|
|
|
|
left: 30, // 增大左边距，给长标签留出空间
|
|
|
|
|
|
right: 30,
|
|
|
|
|
|
top: 20,
|
|
|
|
|
|
bottom: 30,
|
|
|
|
|
|
containLabel: true
|
|
|
|
|
|
},
|
|
|
|
|
|
xAxis: {type: 'value'},
|
|
|
|
|
|
yAxis: {
|
|
|
|
|
|
type: 'category',
|
|
|
|
|
|
data: deviceName
|
|
|
|
|
|
},
|
|
|
|
|
|
series: [{
|
|
|
|
|
|
type: 'bar',
|
|
|
|
|
|
data: renewableUsedKwh,
|
|
|
|
|
|
itemStyle: {color: '#008781'},
|
2025-07-24 09:50:13 +08:00
|
|
|
|
label: {
|
2025-07-24 19:38:54 +08:00
|
|
|
|
show: true,
|
|
|
|
|
|
position: 'right',
|
|
|
|
|
|
color: '#FFFFFF',
|
2025-07-24 09:50:13 +08:00
|
|
|
|
fontSize: 12,
|
2025-07-24 19:38:54 +08:00
|
|
|
|
formatter: '{c}'
|
2025-07-24 00:09:37 +08:00
|
|
|
|
}
|
|
|
|
|
|
}]
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
window.addEventListener('resize', function () {
|
|
|
|
|
|
trendChart.resize();
|
|
|
|
|
|
deviceChart.resize();
|
2025-07-24 19:38:54 +08:00
|
|
|
|
renewableUsedKwhChart.resize();
|
2025-07-24 00:09:37 +08:00
|
|
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
