hb_zhgd_screen/js/pages/dataAnalysisOctober/energySavingAnalysis.js

556 lines
16 KiB
JavaScript
Raw Normal View History

2025-10-18 15:55:58 +08:00
let table, layer, form,laydate;
2025-10-16 16:26:48 +08:00
let fontSize = '14', fontFamily = 'Alibaba PuHuiTi R', fontColor = '#fff';
const bidCode = parent.$('#bidPro').val();
2025-10-18 15:55:58 +08:00
layui.use(["layer", "table", "form", "laydate"], function () {
2025-10-16 16:26:48 +08:00
layer = layui.layer;
table = layui.table;
form = layui.form;
2025-10-18 15:55:58 +08:00
laydate = layui.laydate;
laydate.render({
elem: "#ID-laydate-rangeLinked",
range: ["#ID-laydate-start-date-1", "#ID-laydate-end-date-1"],
rangeLinked: true, // 开启日期范围选择时的区间联动标注模式 --- 2.8+ 新增
});
2025-10-16 16:26:48 +08:00
2025-10-18 15:55:58 +08:00
$("#ID-laydate-start-date-1").val(getNowTime())
$("#ID-laydate-end-date-1").val(getNowTime())
2025-10-16 16:26:48 +08:00
2025-10-18 15:55:58 +08:00
let startTime = "";
let endTime = "";
if ($("#ID-laydate-start-date-1").val() != "") {
startTime = $("#ID-laydate-start-date-1").val();
endTime = $("#ID-laydate-end-date-1").val();
} else {
startTime = "";
endTime = "";
}
getEnergyReduction(startTime, endTime)
2025-10-16 16:26:48 +08:00
});
2025-10-18 15:55:58 +08:00
function getEnergyReduction(startTime, endTime) {
const url =
commonUrl +
"screen/energyReduction/selectEnergyReduction?startTime=" + startTime + "&endTime=" + endTime;
ajaxRequestGet(
url,
"GET",
true,
function () {
},
function (result) {
if (result.code === 200) {
setData(result.data);
} else if (result.code === 500) {
console.error("实时监测" + result.msg);
setData(null);
} else if (result.code === 401) {
loginout(1);
}
},
function (xhr, status, error) {
errorFn(xhr, status, error);
setData(null);
},
aqEnnable
);
/* 实时检测赋值 */
function setData(data) {
if (data) {
}
}
}
2025-10-16 16:26:48 +08:00
function getElectricityStatistics() {
initElectricityStatisticsChart()
}
function getWaterStatistics() {
initWaterStatisticsChart()
}
function initElectricityStatisticsChart() {
const electricityStatistics = echarts.init(document.getElementById("electricityStatistics"));
const option = {
tooltip: {
trigger: "item",
formatter: "{b}: {c}kWh ({d}%)",
backgroundColor: "rgba(0, 0, 0, 0.8)",
borderColor: "#08DCE0",
borderWidth: 1,
textStyle: {
color: "#fff",
},
},
legend: {
orient: "vertical",
right: "20%",
top: "25%",
itemGap: 30,
itemWidth: 20,
itemHeight: 8,
textStyle: {
color: "#fff",
fontSize: 14,
rich: {
name: {
width: 30,
color: "#fff",
},
value: {
width: 60,
align: "right",
color: "#79FFFF",
fontSize: 16,
fontWeight: "bold",
},
},
},
formatter: (name) => {
const data = option.series[0].data
const item = data.find((d) => d.name === name)
const percent = item ? item.value : 0
return `{name|${name}} {value|${percent}%}`
},
},
series: [
{
name: "用电统计",
type: "pie",
radius: [0, '60%'],
center: ["30%", "55%"],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 5,
borderColor: "rgba(0, 0, 0, 0.3)",
borderWidth: 2,
shadowBlur: 10,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
label: {
show: false,
},
emphasis: {
label: {
show: false,
},
itemStyle: {
shadowBlur: 20,
shadowOffsetX: 0,
shadowColor: "rgba(8, 220, 224, 0.8)",
},
},
labelLine: {
show: false,
},
data: [
{
value: 60,
name: "A区",
itemStyle: {
color: '#75F7EC',
},
},
{
value: 60,
name: "B区",
itemStyle: {
color: '#75F791',
},
},
{
value: 26,
name: "C区",
itemStyle: {
color: '#00C3F2',
},
},
{
value: 14,
name: "D区",
itemStyle: {
color: '#EB846A',
},
},
],
},
],
}
electricityStatistics.setOption(option)
}
function initWaterStatisticsChart() {
const waterStatistics = echarts.init(document.getElementById("waterStatistics"));
const option = {
tooltip: {
trigger: "item",
formatter: "{b}: {c}kWh ({d}%)",
backgroundColor: "rgba(0, 0, 0, 0.8)",
borderColor: "#08DCE0",
borderWidth: 1,
textStyle: {
color: "#fff",
},
},
legend: {
orient: "vertical",
right: "20%",
top: "25%",
itemGap: 30,
itemWidth: 20,
itemHeight: 8,
textStyle: {
color: "#fff",
fontSize: 14,
rich: {
name: {
width: 30,
color: "#fff",
},
value: {
width: 60,
align: "right",
color: "#79FFFF",
fontSize: 16,
fontWeight: "bold",
},
},
},
formatter: (name) => {
const data = option.series[0].data
const item = data.find((d) => d.name === name)
const percent = item ? item.value : 0
return `{name|${name}} {value|${percent}%}`
},
},
series: [
{
name: "用电统计",
type: "pie",
radius: [0, '60%'],
center: ["30%", "55%"],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 5,
borderColor: "rgba(0, 0, 0, 0.3)",
borderWidth: 2,
shadowBlur: 10,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
label: {
show: false,
},
emphasis: {
label: {
show: false,
},
itemStyle: {
shadowBlur: 20,
shadowOffsetX: 0,
shadowColor: "rgba(8, 220, 224, 0.8)",
},
},
labelLine: {
show: false,
},
data: [
{
value: 60,
name: "A区",
itemStyle: {
color: '#75F7EC',
},
},
{
value: 60,
name: "B区",
itemStyle: {
color: '#75F791',
},
},
{
value: 26,
name: "C区",
itemStyle: {
color: '#00C3F2',
},
},
{
value: 14,
name: "D区",
itemStyle: {
color: '#EB846A',
},
},
],
},
],
}
waterStatistics.setOption(option)
}
function getWaterTrend() {
const dates = [
"xxxx-xx-01",
"xxxx-xx-02",
"xxxx-xx-03",
"xxxx-xx-04",
"xxxx-xx-05",
"xxxx-xx-06",
"xxxx-xx-07",
"xxxx-xx-08",
]
const waterData = [4.2, 3.3, 3.1, 2.8, 3.0, 3.2, 3.3, 2.1]
initWaterTrend(dates, waterData);
}
function initWaterTrend(dates, waterData) {
const waterTrend = echarts.init(document.getElementById("waterTrend"));
const option = {
grid: {
left: "5%",
right: "8%",
top: "25%",
bottom: "10%",
containLabel: true,
},
xAxis: {
type: "category",
data: dates,
boundaryGap: false,
axisLine: {
lineStyle: {
color: "rgba(8, 220, 224, 0.3)",
},
},
axisLabel: {
color: "rgba(255, 255, 255, 0.6)",
fontSize: 11,
rotate: 0,
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
},
yAxis: {
type: "value",
min: 0,
max: 5,
interval: 1,
axisLine: {
show: false,
},
axisLabel: {
color: "rgba(255, 255, 255, 0.6)",
fontSize: 12,
},
axisTick: {
show: false,
},
splitLine: {
lineStyle: {
color: "rgba(8, 220, 224, 0.15)",
type: "dashed",
},
},
},
series: [
{
name: "用水量",
type: "line",
smooth: true,
symbol: "circle",
symbolSize: 6,
data: waterData,
lineStyle: {
color: "#08DCE0",
width: 2,
},
itemStyle: {
color: "#08DCE0",
borderColor: "#08DCE0",
borderWidth: 2,
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(8, 220, 224, 0.3)",
},
{
offset: 1,
color: "rgba(8, 220, 224, 0.05)",
},
]),
},
emphasis: {
itemStyle: {
color: "#08DCE0",
borderColor: "#fff",
borderWidth: 2,
shadowBlur: 10,
shadowColor: "rgba(8, 220, 224, 0.8)",
},
},
},
],
tooltip: {
trigger: "axis",
backgroundColor: "rgba(0, 20, 40, 0.9)",
borderColor: "#08DCE0",
borderWidth: 1,
textStyle: {
color: "#fff",
},
axisPointer: {
type: "line",
lineStyle: {
color: "rgba(8, 220, 224, 0.5)",
type: "dashed",
},
},
},
}
waterTrend.setOption(option)
}
function getElectricityTrend() {
const dates = [
"xxxx-xx-01",
"xxxx-xx-02",
"xxxx-xx-03",
"xxxx-xx-04",
"xxxx-xx-05",
"xxxx-xx-06",
"xxxx-xx-07",
"xxxx-xx-08",
]
const electricityData = [4.2, 3.3, 3.1, 2.8, 3.0, 3.2, 3.3, 2.1]
initElectricityTrend(dates, electricityData);
}
function initElectricityTrend(dates, electricityData) {
const waterTrend = echarts.init(document.getElementById("electricityTrend"));
const option = {
grid: {
left: "5%",
right: "8%",
top: "25%",
bottom: "10%",
containLabel: true,
},
xAxis: {
type: "category",
data: dates,
boundaryGap: false,
axisLine: {
lineStyle: {
color: "rgba(8, 220, 224, 0.3)",
},
},
axisLabel: {
color: "rgba(255, 255, 255, 0.6)",
fontSize: 11,
rotate: 0,
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
},
yAxis: {
type: "value",
min: 0,
max: 5,
interval: 1,
axisLine: {
show: false,
},
axisLabel: {
color: "rgba(255, 255, 255, 0.6)",
fontSize: 12,
},
axisTick: {
show: false,
},
splitLine: {
lineStyle: {
color: "rgba(8, 220, 224, 0.15)",
type: "dashed",
},
},
},
series: [
{
name: "用水量",
type: "line",
smooth: true,
symbol: "circle",
symbolSize: 6,
data: electricityData,
lineStyle: {
color: "#08DCE0",
width: 2,
},
itemStyle: {
color: "#08DCE0",
borderColor: "#08DCE0",
borderWidth: 2,
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(8, 220, 224, 0.3)",
},
{
offset: 1,
color: "rgba(8, 220, 224, 0.05)",
},
]),
},
emphasis: {
itemStyle: {
color: "#08DCE0",
borderColor: "#fff",
borderWidth: 2,
shadowBlur: 10,
shadowColor: "rgba(8, 220, 224, 0.8)",
},
},
},
],
tooltip: {
trigger: "axis",
backgroundColor: "rgba(0, 20, 40, 0.9)",
borderColor: "#08DCE0",
borderWidth: 1,
textStyle: {
color: "#fff",
},
axisPointer: {
type: "line",
lineStyle: {
color: "rgba(8, 220, 224, 0.5)",
type: "dashed",
},
},
},
}
waterTrend.setOption(option)
}