536 lines
15 KiB
JavaScript
536 lines
15 KiB
JavaScript
let table, layer, form,laydate;
|
||
let fontSize = '14', fontFamily = 'Alibaba PuHuiTi R', fontColor = '#fff';
|
||
|
||
const bidCode = parent.$('#bidPro').val();
|
||
layui.use(["layer", "table", "form", "laydate"], function () {
|
||
layer = layui.layer;
|
||
table = layui.table;
|
||
form = layui.form;
|
||
|
||
laydate = layui.laydate;
|
||
laydate.render({
|
||
elem: "#ID-laydate-rangeLinked",
|
||
range: ["#ID-laydate-start-date-1", "#ID-laydate-end-date-1"],
|
||
rangeLinked: true, // 开启日期范围选择时的区间联动标注模式 --- 2.8+ 新增
|
||
});
|
||
|
||
$("#ID-laydate-start-date-1").val(getNowTime())
|
||
$("#ID-laydate-end-date-1").val(getNowTime())
|
||
|
||
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)
|
||
});
|
||
|
||
function query() {
|
||
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);
|
||
}
|
||
|
||
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) {
|
||
console.log(data)
|
||
console.log(data.length)
|
||
if (data) {
|
||
console.log(data)
|
||
let energyUtilization = data.energyUtilization;
|
||
updateCounter("power", energyUtilization);
|
||
let waterUtilization = data.waterUtilization;
|
||
updateCounter("water", waterUtilization);
|
||
|
||
let power = data.echarts['发电量'];
|
||
let water = data.echarts['用水量'];
|
||
let usePower = data.echarts['用电量'];
|
||
let waterStorage = data.echarts['蓄水量'];
|
||
|
||
getWaterTrend(water, waterStorage);
|
||
getPowerTrend(power, usePower);
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
function updateCounter(prefix, value) {
|
||
// 确保值在有效范围内
|
||
const numValue = Math.max(0, Math.min(9999, parseInt(value) || 0));
|
||
|
||
// 转换为4位数字字符串，不足4位用0补全
|
||
const paddedValue = String(numValue).padStart(4, '0');
|
||
|
||
// 更新每个数字显示
|
||
for (let i = 0; i < 4; i++) {
|
||
const digitElement = document.getElementById(`${prefix}-${i}`);
|
||
if (digitElement) {
|
||
digitElement.textContent = paddedValue[i];
|
||
}
|
||
}
|
||
}
|
||
|
||
function getWaterTrend(water, waterStorage){
|
||
let date =[];
|
||
let waterDataNum = [];
|
||
let waterStorageDataNum = [];
|
||
for (let i = 0; i < water.length; i++) {
|
||
date.push(water[i].date);
|
||
waterDataNum.push(water[i].num);
|
||
waterStorageDataNum.push(waterStorage[i].num);
|
||
}
|
||
initWaterTrend(date, waterDataNum, waterStorageDataNum);
|
||
}
|
||
|
||
function initWaterTrend(date,waterDataNum,waterStorageDataNum) {
|
||
const leftChart = echarts.init(document.getElementById("waterTrend"));
|
||
const option = {
|
||
tooltip: {
|
||
show:true,
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow',
|
||
},
|
||
borderColor: 'rgba(255,255,255,.3)',
|
||
backgroundColor: 'rgba(19,51,55,.6)',
|
||
textStyle: {
|
||
color: 'white', //设置文字颜色
|
||
},
|
||
borderWidth: 1,
|
||
padding: 10,
|
||
},
|
||
legend: {
|
||
show:true,
|
||
top:40,
|
||
right:20,
|
||
textStyle:{
|
||
color:'#ffffff'
|
||
}
|
||
},
|
||
grid: {
|
||
top: '30%',
|
||
left: '8%',
|
||
right: '4%',
|
||
bottom: '15%'
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
boundaryGap: true,
|
||
axisLine: {
|
||
//坐标轴轴线相关设置。数学上的x轴
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#5A6E71',
|
||
},
|
||
},
|
||
axisLabel: {
|
||
//坐标轴刻度标签的相关设置
|
||
textStyle: {
|
||
color: fontColor,
|
||
fontSize: fontSize,
|
||
fontFamily: fontFamily
|
||
},
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
lineStyle: {
|
||
color: '#233653',
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: true,
|
||
},
|
||
data: date,
|
||
},
|
||
],
|
||
yAxis: [{
|
||
min: 0,
|
||
splitNumber: 10,
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: 'rgba(255,255,255,0.6)',
|
||
type: 'dashed',
|
||
},
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: 'rgba(255,255,255,0.8)',
|
||
padding: 16
|
||
},
|
||
formatter: function(value) {
|
||
if (value === 0) {
|
||
return value
|
||
}
|
||
return value
|
||
}
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
}],
|
||
"dataZoom": [{
|
||
"show": true,
|
||
"height": 12,
|
||
"xAxisIndex": [
|
||
0
|
||
],
|
||
bottom:'8%',
|
||
"start": 10,
|
||
"end": 90,
|
||
handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
|
||
handleSize: '110%',
|
||
handleStyle:{
|
||
color:"#d3dee5",
|
||
|
||
},
|
||
textStyle:{
|
||
color:"#fff"},
|
||
borderColor:"#90979c"
|
||
}, {
|
||
"type": "inside",
|
||
"show": true,
|
||
"height": 15,
|
||
"start": 1,
|
||
"end": 35
|
||
}],
|
||
series: [{
|
||
name: '用水量',
|
||
type: 'line',
|
||
symbol: 'circle',
|
||
showAllSymbol: true,
|
||
symbolSize: 0,
|
||
smooth: true,
|
||
lineStyle: {
|
||
normal: {
|
||
width: 2,
|
||
color: "#00FEFC",
|
||
}
|
||
},
|
||
itemStyle: {
|
||
color: "#00FEFC",
|
||
borderWidth: 2
|
||
},
|
||
tooltip: {
|
||
show: true
|
||
},
|
||
areaStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||
offset: 0,
|
||
color: "rgba(18,86,100,0.6)"
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(16,72,81, 0.7)"
|
||
}
|
||
], false),
|
||
shadowColor: 'rgba(15,55,63, 0.8)',
|
||
shadowBlur: 20
|
||
}
|
||
},
|
||
data: waterDataNum
|
||
}, {
|
||
name: '蓄水量',
|
||
type: 'line',
|
||
symbol: 'circle',
|
||
showAllSymbol: true,
|
||
symbolSize: 0,
|
||
smooth: true,
|
||
lineStyle: {
|
||
normal: {
|
||
width: 2,
|
||
color: "rgba(25,196,134, 1)",
|
||
}
|
||
},
|
||
itemStyle: {
|
||
color: "rgba(25,196,134, 1)",
|
||
borderWidth: 2
|
||
|
||
},
|
||
tooltip: {
|
||
show: true
|
||
},
|
||
areaStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||
offset: 0,
|
||
color: "rgba(17,95,82, 0.6)"
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(16,72,67, 0.7)"
|
||
}
|
||
], false),
|
||
shadowColor: 'rgba(15,55,54, 0.8)',
|
||
shadowBlur: 20
|
||
}
|
||
},
|
||
data: waterStorageDataNum
|
||
}]
|
||
};
|
||
|
||
leftChart.setOption(option);
|
||
// 响应式调整
|
||
window.addEventListener("resize", function () {
|
||
leftChart.resize();
|
||
});
|
||
}
|
||
|
||
function getPowerTrend(power, usePower){
|
||
let date =[];
|
||
let powerDataNum = [];
|
||
let usePowerDataNum = [];
|
||
for (let i = 0; i < power.length; i++) {
|
||
date.push(power[i].date);
|
||
powerDataNum.push(power[i].num);
|
||
usePowerDataNum.push(usePower[i].num);
|
||
}
|
||
initPowerTrend(date, powerDataNum, usePowerDataNum);
|
||
}
|
||
|
||
function initPowerTrend(date,powerDataNum,usePowerDataNum) {
|
||
const leftChart = echarts.init(document.getElementById("powerTrend"));
|
||
const option = {
|
||
tooltip: {
|
||
show:true,
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow',
|
||
},
|
||
borderColor: 'rgba(255,255,255,.3)',
|
||
backgroundColor: 'rgba(19,51,55,.6)',
|
||
textStyle: {
|
||
color: 'white', //设置文字颜色
|
||
},
|
||
borderWidth: 1,
|
||
padding: 10,
|
||
},
|
||
legend: {
|
||
show:true,
|
||
top:40,
|
||
right:20,
|
||
textStyle:{
|
||
color:'#ffffff'
|
||
}
|
||
},
|
||
grid: {
|
||
top: '30%',
|
||
left: '8%',
|
||
right: '4%',
|
||
bottom: '15%'
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
boundaryGap: true,
|
||
axisLine: {
|
||
//坐标轴轴线相关设置。数学上的x轴
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#5A6E71',
|
||
},
|
||
},
|
||
axisLabel: {
|
||
//坐标轴刻度标签的相关设置
|
||
textStyle: {
|
||
color: fontColor,
|
||
fontSize: fontSize,
|
||
fontFamily: fontFamily
|
||
},
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
lineStyle: {
|
||
color: '#233653',
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: true,
|
||
},
|
||
data: date,
|
||
},
|
||
],
|
||
yAxis: [{
|
||
min: 0,
|
||
splitNumber: 10,
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: 'rgba(255,255,255,0.6)',
|
||
type: 'dashed',
|
||
},
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: 'rgba(255,255,255,0.8)',
|
||
padding: 16
|
||
},
|
||
formatter: function(value) {
|
||
if (value === 0) {
|
||
return value
|
||
}
|
||
return value
|
||
}
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
}],
|
||
"dataZoom": [{
|
||
"show": true,
|
||
"height": 12,
|
||
"xAxisIndex": [
|
||
0
|
||
],
|
||
bottom:'8%',
|
||
"start": 10,
|
||
"end": 90,
|
||
handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
|
||
handleSize: '110%',
|
||
handleStyle:{
|
||
color:"#d3dee5",
|
||
|
||
},
|
||
textStyle:{
|
||
color:"#fff"},
|
||
borderColor:"#90979c"
|
||
}, {
|
||
"type": "inside",
|
||
"show": true,
|
||
"height": 15,
|
||
"start": 1,
|
||
"end": 35
|
||
}],
|
||
series: [{
|
||
name: '发电量',
|
||
type: 'line',
|
||
symbol: 'circle',
|
||
showAllSymbol: true,
|
||
symbolSize: 0,
|
||
smooth: true,
|
||
lineStyle: {
|
||
normal: {
|
||
width: 2,
|
||
color: "#00FEFC",
|
||
}
|
||
},
|
||
itemStyle: {
|
||
color: "#00FEFC",
|
||
borderWidth: 2
|
||
},
|
||
tooltip: {
|
||
show: true
|
||
},
|
||
areaStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||
offset: 0,
|
||
color: "rgba(18,86,100,0.6)"
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(16,72,81, 0.7)"
|
||
}
|
||
], false),
|
||
shadowColor: 'rgba(15,55,63, 0.8)',
|
||
shadowBlur: 20
|
||
}
|
||
},
|
||
data: powerDataNum
|
||
}, {
|
||
name: '用电量',
|
||
type: 'line',
|
||
symbol: 'circle',
|
||
showAllSymbol: true,
|
||
symbolSize: 0,
|
||
smooth: true,
|
||
lineStyle: {
|
||
normal: {
|
||
width: 2,
|
||
color: "rgba(25,196,134, 1)",
|
||
}
|
||
},
|
||
itemStyle: {
|
||
color: "rgba(25,196,134, 1)",
|
||
borderWidth: 2
|
||
|
||
},
|
||
tooltip: {
|
||
show: true
|
||
},
|
||
areaStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||
offset: 0,
|
||
color: "rgba(17,95,82, 0.6)"
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(16,72,67, 0.7)"
|
||
}
|
||
], false),
|
||
shadowColor: 'rgba(15,55,54, 0.8)',
|
||
shadowBlur: 20
|
||
}
|
||
},
|
||
data: usePowerDataNum
|
||
}]
|
||
};
|
||
|
||
leftChart.setOption(option);
|
||
// 响应式调整
|
||
window.addEventListener("resize", function () {
|
||
leftChart.resize();
|
||
});
|
||
}
|
||
|