449 lines
15 KiB
HTML
449 lines
15 KiB
HTML
<!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: 90%;margin-top: 3%;color: #009B94
|
||
|
||
}
|
||
|
||
.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: 100%;color: #FFFFFF">
|
||
<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-4 mb-2">
|
||
<div class="bg-[#002628] 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>
|
||
<div class="bg-[#002628] 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>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-2 gap-4 mb-2">
|
||
<div class="bg-[#002628] 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>
|
||
<div class="bg-[#002628] 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>
|
||
|
||
</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'
|
||
},
|
||
textStyle: {
|
||
color: '#FFFFFF'
|
||
},
|
||
legend: {
|
||
data: ['能源消耗量', '节能减排量'],
|
||
textStyle: {
|
||
color: '#FFFFFF'
|
||
}
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: statDate
|
||
},
|
||
yAxis: [{
|
||
type: 'value',
|
||
name: '能源消耗量(kWh)'
|
||
}, {
|
||
type: 'value',
|
||
name: '节能减排量(kgCO₂)',
|
||
splitLine: {
|
||
show: false
|
||
}
|
||
}],
|
||
series: [{
|
||
name: '能源消耗量',
|
||
type: 'line',
|
||
data: consumptionKwh,
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
color: '#FFFFFF',
|
||
fontSize: 12,
|
||
formatter: '{c}'
|
||
}
|
||
}, {
|
||
name: '节能减排量',
|
||
type: 'line',
|
||
yAxisIndex: 1,
|
||
data: renewableUsedKwh,
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
color: '#FFFFFF',
|
||
fontSize: 12,
|
||
formatter: '{c}'
|
||
}
|
||
},]
|
||
});
|
||
}
|
||
|
||
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'
|
||
}
|
||
},
|
||
textStyle: {
|
||
color: '#FFFFFF'
|
||
},
|
||
xAxis: {
|
||
type: 'value'
|
||
},
|
||
yAxis: {
|
||
type: 'category',
|
||
data: deviceName
|
||
},
|
||
series: [{
|
||
type: 'bar',
|
||
data: consumptionKwh,
|
||
itemStyle: {
|
||
color: '#00C6BE'
|
||
},
|
||
label: {
|
||
show: true, // 开启显示
|
||
position: 'right', // 数值显示在柱状图右侧（柱子尾部）
|
||
color: '#FFFFFF', // 设置字体颜色，根据背景可调整
|
||
fontSize: 12,
|
||
formatter: '{c}' // 显示对应的数值
|
||
}
|
||
}]
|
||
});
|
||
}
|
||
|
||
|
||
window.addEventListener('resize', function () {
|
||
trendChart.resize();
|
||
deviceChart.resize();
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|