1156 lines
35 KiB
JavaScript
1156 lines
35 KiB
JavaScript
$(function () {
|
||
// 楼层用电量统计
|
||
changeBackground('daily');
|
||
changeBackgrounds('daily');
|
||
changeTypeBackground('daily');
|
||
// floorElectricity();
|
||
// 年度用电情况
|
||
yearElect();
|
||
//近12月用电量接口数据获取
|
||
monthlyData();
|
||
// 近7日用电量接口数据获取
|
||
weeklyData();
|
||
// 智慧用电-接口状态
|
||
// interfaceStatus();
|
||
|
||
})
|
||
|
||
// 点击切换背景图片和处理点击事件
|
||
function changeBackground(type) {
|
||
// 获取三个按钮的元素
|
||
const daily = document.getElementById('daily');
|
||
const weekly = document.getElementById('weekly');
|
||
const monthly = document.getElementById('monthly');
|
||
|
||
// 清除所有按钮的选中样式
|
||
daily.style.backgroundImage = "url('../../img/air/Rectangle01.png')";
|
||
weekly.style.backgroundImage = "url('../../img/air/Rectangle01.png')";
|
||
monthly.style.backgroundImage = "url('../../img/air/Rectangle01.png')";
|
||
|
||
// 根据点击的按钮类型添加对应的背景样式
|
||
if (type === 'daily') {
|
||
daily.style.backgroundImage = "url('../../img/air/Rectangle01_daily.png')";
|
||
console.log('每日用电量统计');
|
||
//清空表格
|
||
floorElectricity("1");
|
||
} else if (type === 'weekly') {
|
||
weekly.style.backgroundImage = "url('../../img/air/Rectangle01_daily.png')";
|
||
console.log('每周用电量统计');
|
||
floorElectricity("2");
|
||
} else if (type === 'monthly') {
|
||
monthly.style.backgroundImage = "url('../../img/air/Rectangle01_daily.png')";
|
||
console.log('每月用电量统计');
|
||
floorElectricity("3");
|
||
}
|
||
}
|
||
|
||
function changeTypeBackground(type) {
|
||
// 获取三个按钮的元素
|
||
const daily = document.getElementById('daily-type');
|
||
const weekly = document.getElementById('weekly-type');
|
||
const monthly = document.getElementById('monthly-type');
|
||
|
||
// 清除所有按钮的选中样式
|
||
daily.style.backgroundImage = "url('../../img/air/Rectangle01.png')";
|
||
weekly.style.backgroundImage = "url('../../img/air/Rectangle01.png')";
|
||
monthly.style.backgroundImage = "url('../../img/air/Rectangle01.png')";
|
||
|
||
// 根据点击的按钮类型添加对应的背景样式
|
||
if (type === 'daily') {
|
||
daily.style.backgroundImage = "url('../../img/air/Rectangle01_daily.png')";
|
||
console.log('每日用电量统计');
|
||
// 设备类型用电量统计
|
||
lineDistributionData("1");
|
||
} else if (type === 'weekly') {
|
||
weekly.style.backgroundImage = "url('../../img/air/Rectangle01_daily.png')";
|
||
console.log('每周用电量统计');
|
||
// 设备类型用电量统计
|
||
lineDistributionData("2");
|
||
} else if (type === 'monthly') {
|
||
monthly.style.backgroundImage = "url('../../img/air/Rectangle01_daily.png')";
|
||
console.log('每月用电量统计');
|
||
// 设备类型用电量统计
|
||
lineDistributionData("3");
|
||
}
|
||
}
|
||
|
||
function changeBackgrounds(type) {
|
||
// 获取三个按钮的元素
|
||
const daily = document.getElementById('daily-equipment');
|
||
const weekly = document.getElementById('weekly-equipment');
|
||
const monthly = document.getElementById('monthly-equipment');
|
||
|
||
// 清除所有按钮的选中样式
|
||
daily.style.backgroundImage = "url('../../img/air/Rectangle01.png')";
|
||
weekly.style.backgroundImage = "url('../../img/air/Rectangle01.png')";
|
||
monthly.style.backgroundImage = "url('../../img/air/Rectangle01.png')";
|
||
|
||
// 根据点击的按钮类型添加对应的背景样式
|
||
if (type === 'daily') {
|
||
daily.style.backgroundImage = "url('../../img/air/Rectangle01_daily.png')";
|
||
console.log('每日用电量统计');
|
||
$(".dayWarn>.table").empty();
|
||
//防区告警表格
|
||
defenceWarnData("1");
|
||
} else if (type === 'weekly') {
|
||
weekly.style.backgroundImage = "url('../../img/air/Rectangle01_daily.png')";
|
||
console.log('每周用电量统计');
|
||
$(".dayWarn>.table").empty();
|
||
defenceWarnData("2");
|
||
} else if (type === 'monthly') {
|
||
monthly.style.backgroundImage = "url('../../img/air/Rectangle01_daily.png')";
|
||
console.log('每月用电量统计');
|
||
$(".dayWarn>.table").empty();
|
||
defenceWarnData("3");
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 楼层用电量统计
|
||
*/
|
||
function floorElectricity(queryMode) {
|
||
$.ajax({
|
||
type: 'POST',
|
||
url: dataUrl + 'conditioning/floorElectricityStatistics',
|
||
data: {
|
||
"queryMode": queryMode
|
||
},
|
||
dataType: 'json',
|
||
success: function (res) {
|
||
floorElectricityECharts(res.obj)
|
||
}
|
||
});
|
||
}
|
||
|
||
// 楼层用电量统计ECharts
|
||
function floorElectricityECharts(data) {
|
||
let myChart = echarts.init(document.getElementById('floorElectricity'));
|
||
const datas = data;
|
||
const yData = datas.map(item => item.name);
|
||
const zData = datas.map(item => item.finished);
|
||
const maxFinished = Math.max(...zData);
|
||
const pData = zData.map(item => Math.round((item / maxFinished) * 100));
|
||
// 设置等长的背景柱状图
|
||
const maxData = new Array(yData.length).fill(100);
|
||
option = {
|
||
backgroundColor: "transparent",
|
||
grid: {
|
||
left: "10%",
|
||
right: "10%",
|
||
bottom: "5%",
|
||
top: "5%",
|
||
containLabel: false
|
||
},
|
||
xAxis: [
|
||
{
|
||
show: true
|
||
},
|
||
{
|
||
show: false,
|
||
splitLine: {
|
||
show: false
|
||
}
|
||
}
|
||
],
|
||
yAxis: [
|
||
{
|
||
show: true,
|
||
data: yData,
|
||
position: "left",
|
||
axisLabel: {
|
||
lineHeight: 0,
|
||
verticalAlign: "bottom",
|
||
fontSize: 14,
|
||
color: "#bcc3c4",
|
||
formatter: "{value}"
|
||
},
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
splitLine: {
|
||
show: false
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
}
|
||
},
|
||
{
|
||
show: true,
|
||
data: zData,
|
||
offset: 5,
|
||
position: "right",
|
||
axisLabel: {
|
||
lineHeight: 0,
|
||
verticalAlign: "bottom",
|
||
fontSize: 14,
|
||
color: "#bcc3c4",
|
||
formatter: "{value}"
|
||
},
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
splitLine: {
|
||
show: false
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
}
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: "进度",
|
||
show: true,
|
||
type: "bar",
|
||
barGap: "-100%",
|
||
xAxisIndex: 1,
|
||
barWidth: 15,
|
||
itemStyle: {
|
||
borderRadius: 10,
|
||
color: {
|
||
type: 'linear',
|
||
x: 0,
|
||
y: 0,
|
||
x2: 1,
|
||
y2: 0,
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: '#0A7782', // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: '#81EFF3', // 0% 处的颜色
|
||
},
|
||
],
|
||
global: false, // 缺省为 false
|
||
}
|
||
},
|
||
label: {
|
||
show: true,
|
||
position: 'inside', // 改为 'inside' 使文本显示在柱内
|
||
formatter: '{c}%', // 显示百分比
|
||
color: '#ffffff', // 设置字体颜色
|
||
fontSize: 12, // 字体大小
|
||
fontWeight: 'bold', // 字体加粗
|
||
align: 'center', // 水平居中对齐
|
||
verticalAlign: 'middle', // 垂直居中对齐
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
z: 2,
|
||
data: pData,
|
||
animationDelay: 1000,
|
||
animationDuration: 1000
|
||
},
|
||
{
|
||
name: "百分比",
|
||
z: 1,
|
||
show: true,
|
||
type: "bar",
|
||
xAxisIndex: 1,
|
||
barGap: "-100%",
|
||
barWidth: 15,
|
||
itemStyle: {
|
||
borderRadius: 4,
|
||
color: "rgba(13, 55, 78, 1)"
|
||
},
|
||
label: {
|
||
show: false,
|
||
},
|
||
data: maxData
|
||
}
|
||
]
|
||
};
|
||
|
||
myChart.setOption(option);
|
||
}
|
||
|
||
/**
|
||
* 设备类型用电量统计
|
||
*/
|
||
function lineDistributionData(queryMode) {
|
||
$.ajax({
|
||
type: 'POST',
|
||
url: dataUrl + 'conditioning/typeElectricityConsumption',
|
||
data: {
|
||
"queryMode": queryMode
|
||
},
|
||
dataType: 'json',
|
||
success: function (res) {
|
||
lineDistribution(res.obj)
|
||
}
|
||
});
|
||
}
|
||
|
||
function lineDistribution(data) {
|
||
let myChart = echarts.init(document.getElementById('chart'));
|
||
|
||
function getParametricEquation(
|
||
startRatio,
|
||
endRatio,
|
||
isSelected,
|
||
isHovered,
|
||
k,
|
||
height
|
||
) {
|
||
// 计算
|
||
const midRatio = (startRatio + endRatio) / 2
|
||
|
||
const startRadian = startRatio * Math.PI * 2
|
||
const endRadian = endRatio * Math.PI * 2
|
||
const midRadian = midRatio * Math.PI * 2
|
||
|
||
// 如果只有一个扇形，则不实现选中效果。
|
||
if (startRatio === 0 && endRatio === 1) {
|
||
isSelected = false
|
||
}
|
||
|
||
// 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
|
||
k = typeof k !== 'undefined' ? k : 1 / 3
|
||
|
||
// 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
|
||
const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0
|
||
const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0
|
||
|
||
// 计算高亮效果的放大比例（未高亮，则比例为 1）
|
||
const hoverRate = isHovered ? 1.05 : 1
|
||
|
||
// 返回曲面参数方程
|
||
return {
|
||
u: {
|
||
min: -Math.PI,
|
||
max: Math.PI * 3,
|
||
step: Math.PI / 32
|
||
},
|
||
|
||
v: {
|
||
min: 0,
|
||
max: Math.PI * 2,
|
||
step: Math.PI / 20
|
||
},
|
||
|
||
x: function (u, v) {
|
||
if (u < startRadian) {
|
||
return (
|
||
offsetX +
|
||
Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
|
||
)
|
||
}
|
||
if (u > endRadian) {
|
||
return (
|
||
offsetX +
|
||
Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
|
||
)
|
||
}
|
||
return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate
|
||
},
|
||
|
||
y: function (u, v) {
|
||
if (u < startRadian) {
|
||
return (
|
||
offsetY +
|
||
Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
|
||
)
|
||
}
|
||
if (u > endRadian) {
|
||
return (
|
||
offsetY +
|
||
Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
|
||
)
|
||
}
|
||
return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate
|
||
},
|
||
|
||
z: function (u, v) {
|
||
if (u < -Math.PI * 0.5) {
|
||
return Math.sin(u)
|
||
}
|
||
if (u > Math.PI * 2.5) {
|
||
return Math.sin(u)
|
||
}
|
||
return Math.sin(v) > 0 ? 1 * height : -1
|
||
}
|
||
}
|
||
}
|
||
|
||
// 生成模拟 3D 饼图的配置项
|
||
function getPie3D(pieData, internalDiameterRatio) {
|
||
const series = []
|
||
let sumValue = 0
|
||
let startValue = 0
|
||
let endValue = 0
|
||
const legendData = []
|
||
const k =
|
||
typeof internalDiameterRatio !== 'undefined'
|
||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||
: 1 / 3
|
||
|
||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||
for (let i = 0; i < pieData.length; i++) {
|
||
sumValue += pieData[i].value
|
||
|
||
const seriesItem = {
|
||
name:
|
||
typeof pieData[i].name === 'undefined'
|
||
? `series${i}`
|
||
: pieData[i].name,
|
||
type: 'surface',
|
||
parametric: true,
|
||
wireframe: {
|
||
show: false
|
||
},
|
||
pieData: pieData[i],
|
||
pieStatus: {
|
||
selected: false,
|
||
hovered: false,
|
||
k: k
|
||
}
|
||
}
|
||
|
||
if (typeof pieData[i].itemStyle !== 'undefined') {
|
||
const itemStyle = {}
|
||
|
||
typeof pieData[i].itemStyle.color !== 'undefined'
|
||
? (itemStyle.color = pieData[i].itemStyle.color)
|
||
: null
|
||
typeof pieData[i].itemStyle.opacity !== 'undefined'
|
||
? (itemStyle.opacity = pieData[i].itemStyle.opacity)
|
||
: null
|
||
|
||
seriesItem.itemStyle = itemStyle
|
||
}
|
||
series.push(seriesItem)
|
||
}
|
||
|
||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||
for (let i = 0; i < series.length; i++) {
|
||
endValue = startValue + series[i].pieData.value
|
||
series[i].pieData.startRatio = startValue / sumValue
|
||
series[i].pieData.endRatio = endValue / sumValue
|
||
series[i].parametricEquation = getParametricEquation(
|
||
series[i].pieData.startRatio,
|
||
series[i].pieData.endRatio,
|
||
false,
|
||
false,
|
||
k,
|
||
2000
|
||
)
|
||
|
||
startValue = endValue
|
||
|
||
legendData.push(series[i].name)
|
||
}
|
||
return series
|
||
}
|
||
|
||
// 传入数据生成 option
|
||
const optionsData = [
|
||
{
|
||
name: data[0].name,
|
||
value: parseFloat(data[0].finished),
|
||
itemStyle: {
|
||
opacity: 0.5,
|
||
color: '#7bc35a'
|
||
}
|
||
},
|
||
{
|
||
name: data[1].name,
|
||
value: parseFloat(data[1].finished),
|
||
itemStyle: {
|
||
opacity: 0.5,
|
||
color: '#2f97df'
|
||
}
|
||
}
|
||
]
|
||
const series = getPie3D(optionsData.map(item => {
|
||
if (item.value < 5) {
|
||
item.value = item.value
|
||
}
|
||
return item
|
||
}), 0, 240, 28, 26, 0.5)
|
||
series.push({
|
||
name: 'pie2d',
|
||
type: 'pie',
|
||
label: {
|
||
opacity: 1,
|
||
position: 'outside',
|
||
fontSize: 12,
|
||
lineHeight: 20,
|
||
textStyle: {
|
||
fontSize: 12,
|
||
color: '#fff'
|
||
}
|
||
},
|
||
labelLine: {
|
||
length: 30,
|
||
length2: 100
|
||
},
|
||
minAngle: 10,
|
||
startAngle: -50, // 起始角度，支持范围[0, 360]。
|
||
clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||
radius: ['0', '25%'],
|
||
center: ['50%', '50%'],
|
||
data: optionsData.map(item => {
|
||
item.itemStyle.opacity = 0
|
||
return item
|
||
})
|
||
})
|
||
// 准备待返回的配置项，把准备好的 legendData、series 传入。
|
||
const option = {
|
||
legend: {
|
||
show: false
|
||
},
|
||
animation: true,
|
||
tooltip: {
|
||
formatter: (params) => {
|
||
if (
|
||
params.seriesName !== 'mouseoutSeries' &&
|
||
params.seriesName !== 'pie2d'
|
||
) {
|
||
return `${
|
||
params.seriesName
|
||
}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
|
||
params.color
|
||
};"></span>${
|
||
option.series[params.seriesIndex].pieData.value
|
||
}`
|
||
}
|
||
},
|
||
textStyle: {
|
||
fontSize: 14
|
||
}
|
||
},
|
||
title: {
|
||
x: 'center',
|
||
top: '20',
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 22
|
||
}
|
||
},
|
||
// backgroundColor: '#0E3567',
|
||
labelLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#7BC0CB'
|
||
},
|
||
normal: {
|
||
show: true,
|
||
length: 10,
|
||
length2: 10
|
||
}
|
||
},
|
||
label: {
|
||
show: true,
|
||
position: 'outside',
|
||
formatter: '{b} \n{d}%',
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: '12px'
|
||
}
|
||
},
|
||
xAxis3D: {
|
||
min: -1,
|
||
max: 1
|
||
},
|
||
yAxis3D: {
|
||
min: -1,
|
||
max: 1
|
||
},
|
||
zAxis3D: {
|
||
min: -1,
|
||
max: 1
|
||
},
|
||
grid3D: {
|
||
show: false,
|
||
boxHeight: 0.01,
|
||
// top: '30%',
|
||
bottom: '50%',
|
||
// environment: "rgba(255,255,255,0)",
|
||
viewControl: {
|
||
distance: 300,
|
||
alpha: 35,
|
||
beta: 60,
|
||
autoRotate: false // 自动旋转
|
||
}
|
||
},
|
||
series: series
|
||
}
|
||
|
||
myChart.setOption(option);
|
||
}
|
||
|
||
/**
|
||
年度用电情况
|
||
*/
|
||
//年度用电情况接口数据获取
|
||
function yearElect() {
|
||
$.ajax({
|
||
type: 'POST',
|
||
url: dataUrl + 'conditioning/getElectricity',
|
||
data: "",
|
||
dataType: 'json',
|
||
success: function (res) {
|
||
yearElects(res.obj.yearElect)
|
||
monthElects(res.obj.monthElect)
|
||
}
|
||
});
|
||
}
|
||
|
||
//年度用电情况ECharts
|
||
function yearElects(data) {
|
||
let yearChart = echarts.init(document.getElementById('year-chart'));
|
||
const payload = {id: 'liquid-fill-5', color: ['#1791ff', '#1791ff'], data: {data: Number(data)}};
|
||
let yearElectData = payload.data.data;
|
||
const color = payload.color
|
||
|
||
yearOption = {
|
||
backgroundColor: 'transparent',
|
||
series: [
|
||
{
|
||
name: '水球图',
|
||
type: 'liquidFill',
|
||
radius: '95%',
|
||
center: ['50%', '50%'],
|
||
waveAnimation: 10, // 动画时长
|
||
amplitude: 5, // 振幅
|
||
// 注释上面2行, 并开启下面三行, 则关闭动画
|
||
// waveAnimation: false,
|
||
// animationDuration: 0,
|
||
// animationDurationUpdate: 0,
|
||
data: [0.55, 0.45],
|
||
itemStyle: {
|
||
//渐变色设置
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: color[0]
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: color[1]
|
||
}
|
||
])
|
||
},
|
||
color: {
|
||
type: 'linear',
|
||
x: 0,
|
||
y: 0,
|
||
x2: 1,
|
||
y2: 1,
|
||
colorStops: [
|
||
{
|
||
offset: 1,
|
||
color: color[0]
|
||
},
|
||
{
|
||
offset: 0,
|
||
color: color[1]
|
||
}
|
||
],
|
||
globalCoord: false
|
||
},
|
||
outline: {
|
||
show: true,
|
||
borderDistance: 0,
|
||
itemStyle: {
|
||
borderWidth: 0,
|
||
}
|
||
},
|
||
backgroundStyle: {
|
||
color: '#001c22'
|
||
},
|
||
label: {
|
||
color: '#ffffff',
|
||
insideColor: '#ffffff',
|
||
fontSize: 18,
|
||
lineHeight: 30,
|
||
formatter: params => {
|
||
const value = parseFloat(data);
|
||
const formattedValue = value.toFixed(2);
|
||
return formattedValue + '\n' + '年总用电量'
|
||
}
|
||
}
|
||
}
|
||
]
|
||
}
|
||
yearChart.setOption(yearOption);
|
||
}
|
||
|
||
//月度用电情况ECharts
|
||
function monthElects(data) {
|
||
let yearChart = echarts.init(document.getElementById('year-container'));
|
||
const payload = {id: 'liquid-fill-5', color: ['#1791ff', '#1791ff'], data: {data: Number(data)}};
|
||
let yearElectData = payload.data.data;
|
||
const color = payload.color
|
||
|
||
monthOption = {
|
||
backgroundColor: 'transparent',
|
||
series: [
|
||
{
|
||
name: '水球图',
|
||
type: 'liquidFill',
|
||
radius: '85%',
|
||
center: ['50%', '50%'],
|
||
waveAnimation: 10, // 动画时长
|
||
amplitude: 5, // 振幅
|
||
// 注释上面2行, 并开启下面三行, 则关闭动画
|
||
// waveAnimation: false,
|
||
// animationDuration: 0,
|
||
// animationDurationUpdate: 0,
|
||
data: [0.55, 0.45],
|
||
itemStyle: {
|
||
//渐变色设置
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: color[0]
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: color[1]
|
||
}
|
||
])
|
||
},
|
||
color: {
|
||
type: 'linear',
|
||
x: 0,
|
||
y: 0,
|
||
x2: 1,
|
||
y2: 1,
|
||
colorStops: [
|
||
{
|
||
offset: 1,
|
||
color: color[0]
|
||
},
|
||
{
|
||
offset: 0,
|
||
color: color[1]
|
||
}
|
||
],
|
||
globalCoord: false
|
||
},
|
||
outline: {
|
||
show: true,
|
||
borderDistance: 0,
|
||
itemStyle: {
|
||
borderWidth: 0,
|
||
}
|
||
},
|
||
backgroundStyle: {
|
||
color: '#001c22'
|
||
},
|
||
label: {
|
||
color: '#ffffff',
|
||
insideColor: '#ffffff',
|
||
fontSize: 18,
|
||
lineHeight: 30,
|
||
formatter: params => {
|
||
var value = parseFloat(data);
|
||
var formattedValue = value.toFixed(2); // 保留两位小数并四舍五入
|
||
return formattedValue + '\n' + '月总用电量';
|
||
}
|
||
}
|
||
}
|
||
]
|
||
}
|
||
yearChart.setOption(monthOption);
|
||
}
|
||
|
||
/**
|
||
* 近12月用电量折线图
|
||
*/
|
||
//近12月用电量接口数据获取
|
||
function monthlyData() {
|
||
$.ajax({
|
||
type: 'POST',
|
||
url: dataUrl + 'conditioning/getElectricityFromMonth',
|
||
data: "",
|
||
dataType: 'json',
|
||
success: function (res) {
|
||
monthlyECharts(res.obj)
|
||
}
|
||
});
|
||
}
|
||
|
||
// 近12月用电量ECharts
|
||
function monthlyECharts(data) {
|
||
let monthlyChart = echarts.init(document.getElementById('monthly-chart'));
|
||
const yWeeklyValueArr = data.map(item => item.dayElectricity);
|
||
|
||
function getLastTwelveMonths() {
|
||
var currentDate = new Date();
|
||
var months = [];
|
||
for (var i = 11; i >= 0; i--) {
|
||
var month = currentDate.getMonth() - i;
|
||
var year = currentDate.getFullYear();
|
||
if (month < 0) {
|
||
month += 12;
|
||
year -= 1;
|
||
}
|
||
var yearMonth = year + '-' + padZero(month + 1);
|
||
months.push(yearMonth);
|
||
}
|
||
return months;
|
||
}
|
||
|
||
function padZero(number) {
|
||
return number.toString().padStart(2, '0');
|
||
}
|
||
|
||
var lastTwelveMonths = getLastTwelveMonths();
|
||
|
||
monthlyOption = {
|
||
title: {
|
||
subtext: '单位:kw/h',
|
||
subtextStyle: {
|
||
fontSize: 12,
|
||
color: '#fff'
|
||
}
|
||
},
|
||
tooltip: {
|
||
trigger: "axis",
|
||
},
|
||
grid: {
|
||
left: '0%',
|
||
right: '10%',
|
||
top: '30%',
|
||
bottom: '0%',
|
||
containLabel: true
|
||
},
|
||
legend: {
|
||
show: true,
|
||
x: '55%',
|
||
top: '-2%',
|
||
y: '35',
|
||
icon: 'stack',
|
||
selectedMode: 'multiple', // 设置为单选模式
|
||
clickable: true, // 保留可点击属性
|
||
itemWidth: 10,
|
||
itemHeight: 10,
|
||
textStyle: {
|
||
color: '#1bb4f6'
|
||
},
|
||
data: ['1#配电柜1', '1#配电柜2', '2#配电柜', '3#配电柜', '1#1层动力照明', '4#配电柜'],
|
||
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
axisLabel: {
|
||
color: '#fff',
|
||
interval: 0,
|
||
rotate: -45
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#397cbc'
|
||
}
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
lineStyle: {
|
||
color: '#195384'
|
||
}
|
||
},
|
||
data: lastTwelveMonths,
|
||
}
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
axisLabel: {
|
||
formatter: '{value}',
|
||
textStyle: {
|
||
color: '#fff'
|
||
}
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#27b4c2'
|
||
}
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
type: 'dashed',
|
||
color: '#e7e9ea'
|
||
},
|
||
},
|
||
}],
|
||
series: [
|
||
{
|
||
name: '',
|
||
type: 'line',
|
||
stack: '总量',
|
||
|
||
symbolSize: 0,
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#0092f6',
|
||
lineStyle: {
|
||
color: "#0092f6",
|
||
width: 3
|
||
},
|
||
areaStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
||
offset: 0,
|
||
color: 'rgba(7,44,90,0.3)'
|
||
}, {
|
||
offset: 1,
|
||
color: 'rgba(0,146,246,0.9)'
|
||
}]),
|
||
}
|
||
}
|
||
},
|
||
markPoint: {
|
||
itemStyle: {
|
||
normal: {
|
||
color: 'red'
|
||
}
|
||
}
|
||
},
|
||
data: yWeeklyValueArr,
|
||
},
|
||
]
|
||
};
|
||
monthlyChart.setOption(monthlyOption);
|
||
}
|
||
|
||
|
||
/**
|
||
* 近7日用电量折线图
|
||
*/
|
||
// 近7日用电量接口数据获取
|
||
function weeklyData() {
|
||
$.ajax({
|
||
type: 'POST',
|
||
url: dataUrl + 'conditioning/getElectricityFromWeek',
|
||
data: "",
|
||
dataType: 'json',
|
||
success: function (res) {
|
||
weeklyECharts(res.obj)
|
||
}
|
||
});
|
||
}
|
||
|
||
// 近7日用电量ECharts
|
||
function weeklyECharts(data) {
|
||
let weeklyChart = echarts.init(document.getElementById('weekly-chart'));
|
||
const yWeeklyValueArr1 = data.map(item => item.dayElectricity).reverse();
|
||
|
||
function getPastSevenDays() {
|
||
const dates = [];
|
||
for (let i = 6; i >= 0; i--) {
|
||
const currentDate = new Date();
|
||
currentDate.setDate(currentDate.getDate() - i);
|
||
const formattedDate = formatDate(currentDate);
|
||
dates.push(formattedDate);
|
||
}
|
||
return dates;
|
||
}
|
||
|
||
function formatDate(dateString) {
|
||
let date = new Date(dateString);
|
||
let day = date.getDate();
|
||
let month = date.getMonth() + 1;
|
||
let year = date.getFullYear();
|
||
if (day === 1) {
|
||
return month + '月' + day + '日';
|
||
} else {
|
||
return day + '日';
|
||
}
|
||
}
|
||
|
||
const xWeeklyNameArr = getPastSevenDays();
|
||
// let fontColor = '#30eee9';
|
||
weeklyOption = {
|
||
title: {
|
||
subtext: '单位:kw/h',
|
||
subtextStyle: {
|
||
fontSize: 12,
|
||
color: '#fff'
|
||
}
|
||
},
|
||
grid: {
|
||
left: '0%',
|
||
right: '10%',
|
||
top: '30%',
|
||
bottom: '0%',
|
||
containLabel: true
|
||
},
|
||
tooltip: {
|
||
trigger: "axis",
|
||
},
|
||
legend: {
|
||
show: true,
|
||
x: '55%',
|
||
top: '-2%',
|
||
y: '35',
|
||
icon: 'stack',
|
||
itemWidth: 10,
|
||
itemHeight: 10,
|
||
textStyle: {
|
||
color: '#1bb4f6'
|
||
},
|
||
data: ['1#配电柜1', '1#配电柜2', '2#配电柜', '3#配电柜', '1#1层动力照明', '4#配电柜']
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
axisLabel: {
|
||
color: '#fff',
|
||
interval: 0,
|
||
rotate: -45
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#397cbc'
|
||
}
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
lineStyle: {
|
||
color: '#195384'
|
||
}
|
||
},
|
||
data: xWeeklyNameArr,
|
||
}
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
axisLabel: {
|
||
formatter: '{value}',
|
||
textStyle: {
|
||
color: '#fff'
|
||
}
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#27b4c2'
|
||
}
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
type: 'dashed',
|
||
color: '#e7e9ea'
|
||
},
|
||
},
|
||
}],
|
||
series: [
|
||
{
|
||
name: '',
|
||
type: 'line',
|
||
stack: '总量',
|
||
|
||
symbolSize: 0,
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#17f3f4',
|
||
lineStyle: {
|
||
color: "#17f3f4",
|
||
width: 3
|
||
},
|
||
areaStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
||
offset: 0,
|
||
color: '#004d4d'
|
||
}, {
|
||
offset: 1,
|
||
color: '#66ecff'
|
||
}]),
|
||
}
|
||
}
|
||
},
|
||
markPoint: {
|
||
itemStyle: {
|
||
normal: {
|
||
color: 'red'
|
||
}
|
||
}
|
||
},
|
||
data: yWeeklyValueArr1,
|
||
},
|
||
]
|
||
};
|
||
weeklyChart.setOption(weeklyOption);
|
||
}
|
||
|
||
|
||
//报警表格
|
||
function defenceWarnData(queryMode) {
|
||
$.ajax({
|
||
type: 'POST',
|
||
url: dataUrl + 'conditioning/getElectricityAll',
|
||
data: {
|
||
queryMode: queryMode
|
||
},
|
||
dataType: 'json',
|
||
success: function (res) {
|
||
defenceWarnList(res.obj);
|
||
},
|
||
});
|
||
}
|
||
|
||
function defenceWarnList(data) {
|
||
let html = ""
|
||
for (let i = 0; i < data.length; i++) {
|
||
html += "<div style='font-size: 12px;'>"
|
||
html += "<span>" + data[i].name + "</span>"
|
||
html += "<span>" + data[i].dayElectricity + "</span>"
|
||
html += "</div>"
|
||
}
|
||
$(".dayWarn>.table").append(html)
|
||
}
|
||
|
||
|
||
//报警详情
|
||
function defenceWarnDataClick() {
|
||
var index = layer.open({
|
||
title: ['报警信息', 'color: #fff'],
|
||
type: 2,
|
||
closeBtn: 2,
|
||
content: '../../page/electricity/defenceWarnDataList.html',
|
||
area: ["70%", "97%"],
|
||
maxmin: false
|
||
/*btn: ['确定', '关闭'],
|
||
success: function (layero, index) {
|
||
// localStorage.setItem("subName",params.name);
|
||
//var myIframe = window[layero.find('iframe')[0]['name']];
|
||
//var fnc = myIframe.setData(params.name); //aaa()为子页面的方法
|
||
},
|
||
yes: function (index, layero) {
|
||
// 获取弹出层中的form表单元素
|
||
// var formSubmit = layer.getChildFrame('form', index);
|
||
// var submited = formSubmit.find('button')[0];
|
||
// // 触发点击事件，会对表单进行验证，验证成功则提交表单，失败则返回错误信息
|
||
// submited.click();
|
||
},*/
|
||
});
|
||
}
|
||
|
||
function electricityConsumptionClick() {
|
||
window.parent.jump('', 16);
|
||
}
|