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>
|
|
|
|
|
|
|
|
|
|
|
|
<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 {
|
2025-07-24 09:50:13 +08:00
|
|
|
|
width: 100%;height: 90%;margin-top: 3%;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;
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.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>
|
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">
|
|
|
|
|
|
<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>
|
2025-07-24 09:50:13 +08:00
|
|
|
|
<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>
|
2025-07-24 00:09:37 +08:00
|
|
|
|
</div>
|
2025-07-24 09:50:13 +08:00
|
|
|
|
<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>
|
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">
|
|
|
|
|
|
<div class="bg-[#002628] border border-[#004446] p-4 rounded-lg shadow">
|
|
|
|
|
|
<h3 class="text-lg font-bold mb-2">节能减排措施落实情况</h3>
|
2025-07-24 00:09:37 +08:00
|
|
|
|
<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>
|
2025-07-24 09:50:13 +08:00
|
|
|
|
<div class="bg-[#002628] p-4 rounded-lg shadow border border-[#004446]">
|
|
|
|
|
|
<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 09:50:13 +08:00
|
|
|
|
style="height: 280px; 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'],
|
|
|
|
|
|
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'
|
|
|
|
|
|
},
|
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 09:50:13 +08:00
|
|
|
|
color: '#00C6BE'
|
|
|
|
|
|
},
|
|
|
|
|
|
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>
|
