1384 lines
29 KiB
JavaScript
1384 lines
29 KiB
JavaScript
$(function(){
|
||
// 智慧用电-开关状态
|
||
switchStatus();
|
||
// 线路分布
|
||
lineDistributionData();
|
||
// 年度用电情况
|
||
yearElect();
|
||
//近12月用电量接口数据获取
|
||
monthlyData();
|
||
// 近7日用电量接口数据获取
|
||
weeklyData();
|
||
// 智慧用电-接口状态
|
||
interfaceStatus();
|
||
// 异常报警
|
||
alarmData();
|
||
//防区告警表格
|
||
defenceWarnData();
|
||
})
|
||
|
||
/**
|
||
* 智慧用电-开关状态
|
||
*/
|
||
function switchStatus() {
|
||
$.ajax({
|
||
type: 'POST',
|
||
url: dataUrl + 'electricity/switchStatus',
|
||
data: "",
|
||
dataType: 'json',
|
||
success: function(res) {
|
||
console.log(res);
|
||
let offline = res.obj.switchStatus[0];
|
||
document.getElementById('onlineCount').innerText = offline.onlineCount;
|
||
document.getElementById('offlineCount').innerText = offline.offlineCount;
|
||
document.getElementById('total').innerText = offline.total;
|
||
console.log(onlineCount);
|
||
|
||
let overview = res.obj.equipmentOverview[0];
|
||
document.getElementById('onlineNum').innerText = overview.onlineNum;
|
||
document.getElementById('totalNum').innerText = overview.totalNum;
|
||
document.getElementById('alarmNum').innerText = overview.alarmNum;
|
||
}
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 智慧用电-接口状态数量
|
||
*/
|
||
function interfaceStatus() {
|
||
$.ajax({
|
||
type: 'POST',
|
||
url: dataUrl + 'electricity/interfaceStatus',
|
||
data: "type=1",
|
||
dataType: 'json',
|
||
success: function(res) {
|
||
let interface = res.obj.electricityBean;
|
||
document.getElementById('requestNum').innerText = parseInt(interface.requestNum);
|
||
document.getElementById('successNum').innerText = parseInt(interface.successNum);
|
||
document.getElementById('errorNum').innerText = parseInt(interface.errorNum);
|
||
}
|
||
});
|
||
}
|
||
|
||
|
||
|
||
//线路分布接口数据获取
|
||
function lineDistributionData() {
|
||
$.ajax({
|
||
type: 'POST',
|
||
url: dataUrl + 'electricity/lineDistribution',
|
||
data: "",
|
||
dataType: 'json',
|
||
success: function(res) {
|
||
lineDistribution(res.obj.lineDistribution)
|
||
}
|
||
});
|
||
}
|
||
//线路分布ECharts
|
||
function lineDistribution(data){
|
||
let myChart = echarts.init(document.getElementById('chart'));
|
||
let xNameArr = [];
|
||
let yValueArr = [];
|
||
|
||
var attackSourcesColor = [
|
||
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{ offset: 0, color: '#EB3B5A' },
|
||
{ offset: 1, color: '#FE9C5A' },
|
||
]),
|
||
new echarts.graphic.LinearGradient(0, 1, 1, 1, [
|
||
{ offset: 0, color: '#FA8231' },
|
||
{ offset: 1, color: '#FFD14C' },
|
||
]),
|
||
new echarts.graphic.LinearGradient(0, 1, 1, 1, [
|
||
{ offset: 0, color: '#F7B731' },
|
||
{ offset: 1, color: '#FFEE96' },
|
||
]),
|
||
new echarts.graphic.LinearGradient(0, 1, 1, 1, [
|
||
{ offset: 0, color: '#395CFE' },
|
||
{ offset: 1, color: '#2EC7CF' },
|
||
]),
|
||
new echarts.graphic.LinearGradient(0, 1, 1, 1, [
|
||
{ offset: 0, color: '#395CFE' },
|
||
{ offset: 1, color: '#2EC7CF' },
|
||
]),
|
||
new echarts.graphic.LinearGradient(0, 1, 1, 1, [
|
||
{ offset: 0, color: '#F7B731' },
|
||
{ offset: 1, color: '#FFEE96' },
|
||
]),
|
||
];
|
||
|
||
|
||
let colorArr = ['#52a8f7', '#17f3f4', '#c6f8b5', '#c380f9', '#f394b7', '#f6cf83']; // 7种颜色
|
||
for (let i = 0; i < data.length; i++) {
|
||
xNameArr.push(data[i].switchName);
|
||
yValueArr.push(data[i].lineNum);
|
||
}
|
||
colorArr.push(new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||
offset: 0,
|
||
color: 'rgba(30, 144, 255, 0.8)'
|
||
}, {
|
||
offset: 1,
|
||
color: 'rgba(70, 130, 180, 0.8)'
|
||
}]));
|
||
let option = {
|
||
title: {
|
||
subtext: '单位：条',
|
||
subtextStyle: {
|
||
fontSize: 12,
|
||
color: '#fff'
|
||
}
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
show: true
|
||
},
|
||
xAxis: {
|
||
data: xNameArr,
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#fff'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
rotate: -40, // 逆时针旋转40度
|
||
interval: 0 // 强制显示所有标签
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: '#fff'
|
||
}
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#fff'
|
||
}
|
||
}
|
||
},
|
||
series: [{
|
||
name: '数量',
|
||
type: 'bar',
|
||
data: yValueArr,
|
||
show: true,
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
color: '#fff'
|
||
},
|
||
itemStyle: {
|
||
color: function(params) {
|
||
let index = params.dataIndex % colorArr.length; // 取模运算，循环使用颜色数组
|
||
return colorArr[index];
|
||
}
|
||
}
|
||
}]
|
||
};
|
||
myChart.setOption(option);
|
||
}
|
||
|
||
|
||
/**
|
||
年度用电情况
|
||
*/
|
||
//年度用电情况接口数据获取
|
||
function yearElect() {
|
||
$.ajax({
|
||
type: 'POST',
|
||
url: dataUrl + 'electricity/yearElect',
|
||
data: "",
|
||
dataType: 'json',
|
||
success: function(res) {
|
||
yearElects(res.obj.yearElect)
|
||
monthElects(res.obj.yearElect)
|
||
}
|
||
});
|
||
}
|
||
//年度用电情况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[0].totalElectricity) } };
|
||
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 => {
|
||
var reg = new RegExp(/^\d+(?:\.\d{0,2})?/)
|
||
return '' + data[0].totalElectricity.match(reg) + '\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[0].monthElectricity) } };
|
||
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 reg = new RegExp(/^\d+(?:\.\d{0,2})?/)
|
||
return '' + data[0].monthElectricity.toString().match(reg) + '\n' + '月总用电量'
|
||
}
|
||
}
|
||
}
|
||
]
|
||
}
|
||
yearChart.setOption(monthOption);
|
||
}
|
||
|
||
|
||
|
||
/**
|
||
* 近12月用电量折线图
|
||
*/
|
||
//近12月用电量接口数据获取
|
||
function monthlyData() {
|
||
$.ajax({
|
||
type: 'POST',
|
||
url: dataUrl + 'electricity/electricityConsumption',
|
||
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(innerList => innerList.length > 0 ? innerList[0].dl : 0);
|
||
const yWeeklyValueArr1 = data.map(innerList => innerList.length > 0 ? innerList[1].dl : 0);
|
||
const yWeeklyValueArr2 = data.map(innerList => innerList.length > 0 ? innerList[2].dl : 0);
|
||
const yWeeklyValueArr3 = data.map(innerList => innerList.length > 0 ? innerList[3].dl : 0);
|
||
const yWeeklyValueArr4 = data.map(innerList => innerList.length > 0 ? innerList[4].dl : 0);
|
||
const yWeeklyValueArr5 = data.map(innerList => innerList.length > 0 ? innerList[5].dl : 0);
|
||
|
||
function handleLegendClick(params) {
|
||
var selectedName = params.name;
|
||
var selectedData;
|
||
if (selectedName === '1#配电柜1') {
|
||
selectedData = {name: '1#配电柜1', value: '187ED5338A38'};
|
||
} else if (selectedName === '2#配电柜') {
|
||
selectedData = {name: '2#配电柜', value: '187ED5338A64'};
|
||
} else if (selectedName === '1#配电柜2') {
|
||
selectedData = {name: '1#配电柜2', value: '187ED5338A70'};
|
||
} else if (selectedName === '1#1层动力照明') {
|
||
selectedData = {name: '1#1层动力照明', value: '187ED5338ADC'};
|
||
} else if (selectedName === '3#配电柜') {
|
||
selectedData = {name: '3#配电柜', value: '187ED533B8D8'};
|
||
} else if (selectedName === '4#配电柜') {
|
||
selectedData = {name: '4#配电柜', value: '187ED533B8E0'};
|
||
}
|
||
|
||
var contentUrl = './lineStatuFrom.html?value=' + selectedData.value;
|
||
|
||
layer.open({
|
||
title: selectedName,
|
||
type: 2, // 指定类型为iframe
|
||
content: contentUrl, // 弹窗内容为一个URL地址
|
||
area: ['70%', '95%']
|
||
});
|
||
}
|
||
|
||
|
||
|
||
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:'1#配电柜1',
|
||
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,
|
||
},
|
||
{
|
||
name:'2#配电柜',
|
||
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,
|
||
},
|
||
{
|
||
name:'1#配电柜2',
|
||
type:'line',
|
||
stack: '总量',
|
||
|
||
symbolSize: 0,
|
||
itemStyle: {
|
||
normal: {
|
||
color:'#c6f8b5',
|
||
lineStyle: {
|
||
color: "#c6f8b5",
|
||
width:3
|
||
},
|
||
areaStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
||
offset: 0,
|
||
color: '#43cc1b'
|
||
}, {
|
||
offset: 1,
|
||
color: '#c6f8b5'
|
||
}]),
|
||
}
|
||
}
|
||
},
|
||
markPoint:{
|
||
itemStyle:{
|
||
normal:{
|
||
color:'red'
|
||
}
|
||
}
|
||
},
|
||
data:yWeeklyValueArr2,
|
||
},
|
||
{
|
||
name:'1#1层动力照明',
|
||
type:'line',
|
||
stack: '总量',
|
||
|
||
symbolSize: 0,
|
||
itemStyle: {
|
||
normal: {
|
||
color:'#c380f9',
|
||
lineStyle: {
|
||
color: "#c380f9",
|
||
width:3
|
||
},
|
||
areaStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
||
offset: 0,
|
||
color: '#8b16ef'
|
||
}, {
|
||
offset: 1,
|
||
color: '#c380f9'
|
||
}]),
|
||
}
|
||
}
|
||
},
|
||
markPoint:{
|
||
itemStyle:{
|
||
normal:{
|
||
color:'red'
|
||
}
|
||
}
|
||
},
|
||
data:yWeeklyValueArr3,
|
||
},
|
||
{
|
||
name:'3#配电柜',
|
||
type:'line',
|
||
stack: '总量',
|
||
|
||
symbolSize: 0,
|
||
itemStyle: {
|
||
normal: {
|
||
color:'#f394b7',
|
||
lineStyle: {
|
||
color: "#f394b7",
|
||
width:3
|
||
},
|
||
areaStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
||
offset: 0,
|
||
color: '#ee2e72'
|
||
}, {
|
||
offset: 1,
|
||
color: '#f689b0'
|
||
}]),
|
||
}
|
||
}
|
||
},
|
||
markPoint:{
|
||
itemStyle:{
|
||
normal:{
|
||
color:'red'
|
||
}
|
||
}
|
||
},
|
||
data:yWeeklyValueArr4,
|
||
},
|
||
{
|
||
name:'4#配电柜',
|
||
type:'line',
|
||
stack: '总量',
|
||
|
||
symbolSize: 0,
|
||
itemStyle: {
|
||
normal: {
|
||
color:'#f6cf83',
|
||
lineStyle: {
|
||
color: "#f6cf83",
|
||
width:3
|
||
},
|
||
areaStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
||
offset: 0,
|
||
color: '#ffb014'
|
||
}, {
|
||
offset: 1,
|
||
color: '#f6cf83'
|
||
}]),
|
||
}
|
||
}
|
||
},
|
||
markPoint:{
|
||
itemStyle:{
|
||
normal:{
|
||
color:'red'
|
||
}
|
||
}
|
||
},
|
||
data:yWeeklyValueArr5,
|
||
}
|
||
]
|
||
};
|
||
monthlyChart.setOption(monthlyOption);
|
||
monthlyChart.on('legendselectchanged', function(params) {
|
||
handleLegendClick(params);
|
||
});
|
||
}
|
||
|
||
|
||
/**
|
||
* 近7日用电量折线图
|
||
*/
|
||
// 近7日用电量接口数据获取
|
||
function weeklyData() {
|
||
$.ajax({
|
||
type: 'POST',
|
||
url: dataUrl + 'electricity/electricityConsumptionDay',
|
||
data: "",
|
||
dataType: 'json',
|
||
success: function(res) {
|
||
weeklyECharts(res.obj)
|
||
}
|
||
});
|
||
}
|
||
// 近7日用电量ECharts
|
||
function weeklyECharts(data) {
|
||
let weeklyChart = echarts.init(document.getElementById('weekly-chart'));
|
||
const yWeeklyValueArr = data.map(innerList => innerList.length > 0 ? innerList[0].dl : 0);
|
||
const yWeeklyValueArr1 = data.map(innerList => innerList.length > 0 ? innerList[1].dl : 0);
|
||
const yWeeklyValueArr2 = data.map(innerList => innerList.length > 0 ? innerList[2].dl : 0);
|
||
const yWeeklyValueArr3 = data.map(innerList => innerList.length > 0 ? innerList[3].dl : 0);
|
||
const yWeeklyValueArr4 = data.map(innerList => innerList.length > 0 ? innerList[4].dl : 0);
|
||
const yWeeklyValueArr5 = data.map(innerList => innerList.length > 0 ? innerList[5].dl : 0);
|
||
|
||
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:'1#配电柜1',
|
||
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,
|
||
},
|
||
{
|
||
name:'2#配电柜',
|
||
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,
|
||
},
|
||
{
|
||
name:'1#配电柜2',
|
||
type:'line',
|
||
stack: '总量',
|
||
|
||
symbolSize: 0,
|
||
itemStyle: {
|
||
normal: {
|
||
color:'#c6f8b5',
|
||
lineStyle: {
|
||
color: "#c6f8b5",
|
||
width:3
|
||
},
|
||
areaStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
||
offset: 0,
|
||
color: '#43cc1b'
|
||
}, {
|
||
offset: 1,
|
||
color: '#c6f8b5'
|
||
}]),
|
||
}
|
||
}
|
||
},
|
||
markPoint:{
|
||
itemStyle:{
|
||
normal:{
|
||
color:'red'
|
||
}
|
||
}
|
||
},
|
||
data:yWeeklyValueArr2,
|
||
},
|
||
{
|
||
name:'1#1层动力照明',
|
||
type:'line',
|
||
stack: '总量',
|
||
|
||
symbolSize: 0,
|
||
itemStyle: {
|
||
normal: {
|
||
color:'#c380f9',
|
||
lineStyle: {
|
||
color: "#c380f9",
|
||
width:3
|
||
},
|
||
areaStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
||
offset: 0,
|
||
color: '#8b16ef'
|
||
}, {
|
||
offset: 1,
|
||
color: '#c380f9'
|
||
}]),
|
||
}
|
||
}
|
||
},
|
||
markPoint:{
|
||
itemStyle:{
|
||
normal:{
|
||
color:'red'
|
||
}
|
||
}
|
||
},
|
||
data:yWeeklyValueArr3,
|
||
},
|
||
{
|
||
name:'3#配电柜',
|
||
type:'line',
|
||
stack: '总量',
|
||
|
||
symbolSize: 0,
|
||
itemStyle: {
|
||
normal: {
|
||
color:'#f394b7',
|
||
lineStyle: {
|
||
color: "#f394b7",
|
||
width:3
|
||
},
|
||
areaStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
||
offset: 0,
|
||
color: '#ee2e72'
|
||
}, {
|
||
offset: 1,
|
||
color: '#f689b0'
|
||
}]),
|
||
}
|
||
}
|
||
},
|
||
markPoint:{
|
||
itemStyle:{
|
||
normal:{
|
||
color:'red'
|
||
}
|
||
}
|
||
},
|
||
data:yWeeklyValueArr4,
|
||
},
|
||
{
|
||
name:'4#配电柜',
|
||
type:'line',
|
||
stack: '总量',
|
||
|
||
symbolSize: 0,
|
||
itemStyle: {
|
||
normal: {
|
||
color:'#f6cf83',
|
||
lineStyle: {
|
||
color: "#f6cf83",
|
||
width:3
|
||
},
|
||
areaStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
||
offset: 0,
|
||
color: '#ffb014'
|
||
}, {
|
||
offset: 1,
|
||
color: '#f6cf83'
|
||
}]),
|
||
}
|
||
}
|
||
},
|
||
markPoint:{
|
||
itemStyle:{
|
||
normal:{
|
||
color:'red'
|
||
}
|
||
}
|
||
},
|
||
data:yWeeklyValueArr5,
|
||
}
|
||
]
|
||
};
|
||
weeklyChart.setOption(weeklyOption);
|
||
}
|
||
|
||
|
||
/**
|
||
* 异常报警
|
||
*/
|
||
// 异常报警接口数据获取
|
||
function alarmData() {
|
||
$.ajax({
|
||
type: 'POST',
|
||
url: dataUrl + 'electricity/alarm',
|
||
data: "",
|
||
dataType: 'json',
|
||
success: function(res) {
|
||
let alarm = res.obj.alarm[0];
|
||
document.getElementById('todayAlarm').innerText = alarm.todayAlarmNum;
|
||
document.getElementById('totalAlarm').innerText = alarm.yearAlarmNum;
|
||
document.getElementById('monthNum').innerText = alarm.monthAlarmNum;
|
||
console.log(res.obj.electricityLlarms);
|
||
defalarmECharts(res.obj.electricityLlarms)
|
||
}
|
||
});
|
||
}
|
||
// 异常报警ECharts
|
||
function defalarmECharts(date) {
|
||
// data = [
|
||
// {value: 2, name: '短路报警'},
|
||
// {value: 3, name: '漏电监测报警'},
|
||
// {value: 1, name: '过载报警'},
|
||
// {value: 1, name: '过流报警'},
|
||
// {value: 1, name: '其他'},
|
||
// ]
|
||
data = date;
|
||
let sumValue = 0; // 总值
|
||
// 计算总值
|
||
// data.map(item => {
|
||
// sumValue += item.value;
|
||
// });
|
||
|
||
let legendOption = {
|
||
orient: 'vertical',
|
||
top: 'center',
|
||
icon: "circle",
|
||
selectedMode: false,
|
||
itemWidth: 12,
|
||
itemGap: 50,
|
||
textStyle: {
|
||
fontSize: 14,
|
||
color: '#ffa',
|
||
rich: {
|
||
name: { color: "#333333", padding: [10, 5, 30, 5] },
|
||
percent: { color: "#18DB9F", fontSize: 18, padding: [0, 5, 0, 5] }
|
||
}
|
||
},
|
||
}
|
||
|
||
let abnormals = echarts.init(document.getElementById('alarmStatus'));
|
||
abnormal = {
|
||
backgroundColor: 'transparent',
|
||
tooltip: {
|
||
trigger: 'item'
|
||
},
|
||
// graphic: [{
|
||
// type: 'text',
|
||
// left: (sumValue >= 10 && sumValue < 1000) ? '46%' : (sumValue >= 1000 ? '43%' : '48%'), //
|
||
// top: '45%',
|
||
// style: {
|
||
// text: sumValue, // 替换为实际的总值
|
||
// textAlign: 'center',
|
||
// fill: '#ffa',
|
||
// fontSize: 32,
|
||
// fontWeight: 'bold'
|
||
// },
|
||
// formatter: (name) => {
|
||
// let datas = data;
|
||
// let valueIndex = datas.map(item => item.name).indexOf(name);
|
||
// return name + ':' + datas[valueIndex].value;
|
||
// }
|
||
// }],
|
||
legend: [{
|
||
|
||
left: '20', // 调整图例的左侧位置
|
||
data: ['短路报警', '过载报警', '过流报警'], // 调整了数据的顺序，将'高'放在最后
|
||
align: 'right',
|
||
...legendOption
|
||
},{
|
||
right: '20', // 调整图例的左侧位置
|
||
data: ['漏电监测报警', '其他'], // 调整了数据的顺序，将'高'放在最后
|
||
align: 'left',
|
||
...legendOption
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
// name: '总报警',
|
||
type: 'pie',
|
||
radius: ['40%', '63%'],
|
||
avoidLabelOverlap: false,
|
||
hoverAnimation: false,
|
||
label: {
|
||
formatter: '({d}%)'
|
||
},
|
||
color: ['rgb(85 234 241)', '#fac858', '#8c56df', '#52b96a', '#73c0de'],
|
||
emphasis: {
|
||
label: {
|
||
show: true,
|
||
fontSize: 13,
|
||
fontWeight: 'bold'
|
||
}
|
||
},
|
||
data,
|
||
},
|
||
{
|
||
type: 'custom',
|
||
coordinateSystem: 'none',
|
||
silent: true,
|
||
data: [0],
|
||
renderItem(params, api) {
|
||
//环形图半径
|
||
const r = Math.min(api.getWidth(), api.getHeight()) / 2
|
||
//圆心
|
||
const center = {
|
||
x: api.getWidth() / 2,
|
||
y: api.getHeight() / 2
|
||
}
|
||
//大圆半径
|
||
const rBig = r * 0.9
|
||
//小圆半径
|
||
const rSmall = r * 0.78
|
||
//大圆上的扇形
|
||
const bigSector = []
|
||
const smallSector = []
|
||
const circleOnCircle = [] //小圆上携带的小圆圈
|
||
const sectorSize = 60 //扇形长度（弧度）
|
||
const sectorInterval = 30 //扇形与扇形之间的间隔
|
||
const BigStartAngle = 310 //大扇形起始角度
|
||
for (let i = 0; i < 4; i++) {
|
||
const startAngle = ((i * (sectorInterval + sectorSize) + BigStartAngle) * Math.PI) / 180
|
||
const endAngle = startAngle + (sectorSize * Math.PI) / 180
|
||
const smallStartAngle = (Math.PI / 180) * (280 + angle + i * (sectorSize + sectorInterval))
|
||
const smallEndAngle = smallStartAngle + (sectorSize * Math.PI) / 180
|
||
bigSector.push({
|
||
type: 'sector',
|
||
shape: {
|
||
cx: center.x,
|
||
cy: center.y,
|
||
r: rBig,
|
||
r0: rBig * 0.93,
|
||
startAngle,
|
||
endAngle
|
||
},
|
||
style: {
|
||
fill: '#55EAF1',
|
||
lineWidth: 2
|
||
}
|
||
})
|
||
smallSector.push({
|
||
type: 'sector',
|
||
shape: {
|
||
cx: center.x,
|
||
cy: center.y,
|
||
r: rSmall * 0.93,
|
||
r0: rSmall * 0.87,
|
||
startAngle: smallStartAngle,
|
||
endAngle: smallEndAngle
|
||
},
|
||
style: {
|
||
fill: '#14769f',
|
||
lineWidth: 2
|
||
}
|
||
})
|
||
circleOnCircle.push({
|
||
type: 'circle',
|
||
shape: {
|
||
cx: getCirclePoint(center.x, center.y, rSmall, 270 + i * 90 -angle).x,
|
||
cy: getCirclePoint(center.x, center.y, rSmall, 270 + i * 90 - angle).y,
|
||
r: 6
|
||
},
|
||
style: {
|
||
fill: '#19ECFF',
|
||
stroke: '#19ECFF',
|
||
lineWidth: 2
|
||
}
|
||
})
|
||
}
|
||
return {
|
||
type: 'group',
|
||
children: [
|
||
{
|
||
type: 'group',
|
||
children: [
|
||
...bigSector,
|
||
...smallSector,
|
||
...circleOnCircle,
|
||
{
|
||
// 外圆环
|
||
type: 'arc',
|
||
shape: {
|
||
cx: center.x,
|
||
cy: center.y,
|
||
r: rBig
|
||
},
|
||
style: {
|
||
fill: 'transparent',
|
||
stroke: '#55EAF1',
|
||
lineWidth: 2
|
||
}
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
}
|
||
}
|
||
]
|
||
}
|
||
//获取圆上某点的坐标(x0、y0表示坐标，r半径，angle角度)
|
||
function getCirclePoint(x0, y0, r, angle) {
|
||
let x1 = x0 + r * Math.cos((angle * Math.PI) / 180)
|
||
let y1 = y0 + r * Math.sin((angle * Math.PI) / 180)
|
||
return {
|
||
x: x1,
|
||
y: y1
|
||
}
|
||
}
|
||
|
||
//添加旋转动画
|
||
let timer
|
||
let angle = 0
|
||
function play() {
|
||
angle += 3
|
||
// 在此处添加你需要执行的操作
|
||
if (timer) return
|
||
timer = setTimeout(() => {
|
||
cancelAnimationFrame(timer)
|
||
timer = null
|
||
}, 28)
|
||
}
|
||
abnormals.setOption(abnormal);
|
||
}
|
||
|
||
//报警表格
|
||
function defenceWarnData(){
|
||
$.ajax({
|
||
type: 'POST',
|
||
url: dataUrl + 'electricity/equipInfos',
|
||
data: "",
|
||
dataType: 'json',
|
||
success: function(res) {
|
||
defenceWarnList(res.obj);
|
||
},
|
||
});
|
||
}
|
||
|
||
function defenceWarnList(data){
|
||
let equipNum = 6;
|
||
if(data.equipInfo.length < equipNum){
|
||
equipNum = data.equipInfo.length;
|
||
}
|
||
let html = ""
|
||
for (let i = 0; i < equipNum; i++) {
|
||
html += "<div style='font-size: 12px'>"
|
||
html += "<span>" +data.equipInfo[i].equipName + "</span>"
|
||
html += "<span>" +data.equipInfo[i].alarmType + "</span>"
|
||
html += "<span>" +data.equipInfo[i].information + "</span>"
|
||
html += "<span>" +data.equipInfo[i].processStatus + "</span>"
|
||
html += "<span>" +data.equipInfo[i].alarmTime + "</span>"
|
||
html += "</div>"
|
||
}
|
||
$(".defenceWarn>.table").append(html)
|
||
}
|
||
|
||
//接口状态点击
|
||
function interfaceStateClick(){
|
||
var index = layer.open({
|
||
title: ['接口状态','color: #fff'],
|
||
type: 2,
|
||
closeBtn: 2,
|
||
content: '../../page/electricity/electricityFrom.html',
|
||
area: ["70%", "90%"],
|
||
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 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();
|
||
},*/
|
||
});
|
||
}
|