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();
|
|||
|
|
},*/
|
|||
|
|
});
|
|||
|
|
}
|