$(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
}
${
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 += "