642 lines
19 KiB
JavaScript
642 lines
19 KiB
JavaScript
$(function () {
|
||
yearElect();
|
||
// powerConsumptionRank();
|
||
|
||
getDeviceMessage();
|
||
getAllLampStatus();
|
||
getSevenDayElectricity()
|
||
getTwelveMonthElectricity()
|
||
getElectricityOrderBy()
|
||
|
||
});
|
||
//控制管理
|
||
function control(){
|
||
var index = layer.open({
|
||
title: ['媒体设定', 'color: #fff; cursor: move;background: transparent;float: left;'],
|
||
type: 2,
|
||
closeBtn: 2,
|
||
content: '../../page/light/videoLightSecondaryPage.html',
|
||
area: ["50%", "70%"],
|
||
maxmin: false
|
||
});
|
||
|
||
// window.open("http://192.168.0.110:81?user=LED001&pd=YTw4t2H9kHjpfzhokbZ%2BIT31th6xCBOyJtGWmgMxvsc3P%2BW4V7EikPFjaDMpoBTT0%2F%2BHxueI8KoJaLrwKsjO%2BNiWGGoGgb5VkD4hqMhczyUhNjVKr10L8Tcl9yw1U3CgGorKUdGyjB%2Fm8GZARuVNANd0LejaPmxrMTC%2BbGKNAf4%3D&path=/equipmentCorrelation");
|
||
}
|
||
function getDeviceMessage(){
|
||
$.ajax({
|
||
type: 'POST',
|
||
url: dataUrl + 'lamp/getDeviceMessage',
|
||
data: "",
|
||
dataType: 'json',
|
||
success: function (data) {
|
||
dome(data.obj);
|
||
}
|
||
});
|
||
}
|
||
/**
|
||
* 智慧路灯-七日用电量
|
||
*/
|
||
function getSevenDayElectricity() {
|
||
$.ajax({
|
||
type: 'POST',
|
||
url: dataUrl + 'lamp/getElectricityFromWeek',
|
||
data: "",
|
||
dataType: 'json',
|
||
success: function (data) {
|
||
sevenDayElectricityEcharts(data.obj);
|
||
}
|
||
});
|
||
}
|
||
|
||
function sevenDayElectricityEcharts(data){
|
||
let sevenDayChart = echarts.init(document.getElementById('sevenDayElectricity'));
|
||
const xSevenArray = data.map(item => item.date+"日");
|
||
const ySevenArray = data.map(item => parseFloat( item.electricityUse).toFixed(3));
|
||
const maxEntity = data.reduce((max, entity) => {
|
||
return (entity.electricityUse > max.electricityUse) ? entity : max;
|
||
});
|
||
let options = {
|
||
backgroundColor: "transparent",
|
||
tooltip: { // 配置弹窗
|
||
trigger: 'axis', // 触发类型为坐标轴触发
|
||
axisPointer: { // 轴指示器配置
|
||
type: 'shadow', // 影子指示器
|
||
},
|
||
formatter: function(params) {
|
||
const date = params[0].name; // 获取日期
|
||
const electricityUse = params[0].value; // 获取电量
|
||
return `${date}<br/>电量使用: ${electricityUse} KW\h`;
|
||
},
|
||
},
|
||
xAxis: {
|
||
data: xSevenArray,
|
||
axisLine: {
|
||
color: "#0177d4",
|
||
},
|
||
axisLabel: {
|
||
color: "#fff",
|
||
fontSize: 14,
|
||
// rotate: 45, // 旋转角度，帮助节省空间
|
||
},
|
||
|
||
},
|
||
yAxis: {
|
||
name: "单位：KW\\h",
|
||
nameTextStyle: {
|
||
color: "#fff",
|
||
fontSize: 14,
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "#0177d4",
|
||
},
|
||
},
|
||
axisLabel: {
|
||
color: "#fff",
|
||
fontSize: 14,
|
||
},
|
||
splitLine: {
|
||
show: true, // 显示分隔线
|
||
lineStyle: {
|
||
color: "#ffffff",
|
||
type: 'dashed', // 设置为虚线
|
||
},
|
||
},
|
||
//interval: 10,
|
||
max: Math.ceil(maxEntity.electricityUse),
|
||
},
|
||
series: [
|
||
{
|
||
type: "bar",
|
||
barWidth: 18,
|
||
itemStyle: {
|
||
color: new echarts.graphic.LinearGradient(
|
||
0,
|
||
0,
|
||
0,
|
||
1,
|
||
[
|
||
{
|
||
offset: 0,
|
||
color: "#0eebe4",
|
||
},
|
||
{
|
||
offset: 0.8,
|
||
color: "#058fe7",
|
||
},
|
||
],
|
||
false
|
||
),
|
||
},
|
||
data: ySevenArray,
|
||
label: {
|
||
show: true,
|
||
position: "top",
|
||
formatter: "{c}",
|
||
textStyle: {
|
||
color: "#fff",
|
||
},
|
||
},
|
||
},
|
||
],
|
||
};
|
||
sevenDayChart.setOption(options);
|
||
}
|
||
|
||
/**
|
||
* 智慧路灯-月总和年总用电量
|
||
*/
|
||
//年度用电情况接口数据获取
|
||
function yearElect() {
|
||
$.ajax({
|
||
type: 'POST',
|
||
url: dataUrl + 'lamp/getElectricityCount',
|
||
data: "",
|
||
dataType: 'json',
|
||
success: function(res) {
|
||
yearElects(res.obj)
|
||
monthElects(res.obj)
|
||
}
|
||
});
|
||
}
|
||
function yearElects(data){
|
||
let yearChart = echarts.init(document.getElementById('year-chart'));
|
||
const payload = { id: 'liquid-fill-5', color: ['#1791ff', '#1791ff'], data: { data: Number(data.yearElectricity) } };
|
||
const color = payload.color
|
||
|
||
yearOption = {
|
||
backgroundColor: 'transparent',
|
||
series: [
|
||
{
|
||
name: '水球图',
|
||
type: 'liquidFill',
|
||
radius: '95%',
|
||
center: ['50%', '50%'],
|
||
waveAnimation: 10, // 动画时长
|
||
amplitude: 5, // 振幅
|
||
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 => {
|
||
|
||
return parseFloat( data.yearElectricity).toFixed(3) + 'KW\\h' + '\n' + '年总用电量'
|
||
}
|
||
}
|
||
}
|
||
]
|
||
}
|
||
yearChart.setOption(yearOption);
|
||
}
|
||
|
||
function monthElects(data){
|
||
let yearChart = echarts.init(document.getElementById('year-container'));
|
||
const payload = { id: 'liquid-fill-5', color: ['#1791ff', '#1791ff'], data: { data: Number(data.monthElectricity) } };
|
||
const color = payload.color
|
||
|
||
monthOption = {
|
||
backgroundColor: 'transparent',
|
||
series: [
|
||
{
|
||
name: '水球图',
|
||
type: 'liquidFill',
|
||
radius: '85%',
|
||
center: ['50%', '50%'],
|
||
waveAnimation: 10, // 动画时长
|
||
amplitude: 5, // 振幅
|
||
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 => {
|
||
return parseFloat( data.monthElectricity).toFixed(3) + 'KW\\h' + '\n' + '月总用电量'
|
||
}
|
||
}
|
||
}
|
||
]
|
||
}
|
||
yearChart.setOption(monthOption);
|
||
}
|
||
|
||
/**
|
||
* 智慧路灯-近十二个月用电量
|
||
*/
|
||
function getTwelveMonthElectricity() {
|
||
$.ajax({
|
||
type: 'POST',
|
||
url: dataUrl + 'lamp/getElectricityFromMonth',
|
||
data: "",
|
||
dataType: 'json',
|
||
success: function (data) {
|
||
yearElectricityEcharts(data.obj);
|
||
}
|
||
});
|
||
}
|
||
/**
|
||
* 智慧路灯-近十二个月用电量
|
||
*/
|
||
function yearElectricityEcharts(res){
|
||
let yearChart = echarts.init(document.getElementById('yearElectricity'));
|
||
|
||
const xMonthArray = res.map(item => item.date);
|
||
const yMonthArray = res.map(item => parseFloat( item.electricityUse).toFixed(3));
|
||
const maxEntity = res.reduce((max, entity) => {
|
||
return (entity.electricityUse > max.electricityUse) ? entity : max;
|
||
});
|
||
let option = {
|
||
backgroundColor: "transparent",
|
||
tooltip: { // 配置弹窗
|
||
trigger: 'axis', // 触发类型为坐标轴触发
|
||
axisPointer: { // 轴指示器配置
|
||
type: 'shadow', // 影子指示器
|
||
},
|
||
formatter: function(params) {
|
||
const date = params[0].name; // 获取日期
|
||
const electricityUse = params[0].value; // 获取电量
|
||
return `${date}<br/>电量使用: ${electricityUse} KW\h`;
|
||
},
|
||
},
|
||
xAxis: {
|
||
data: xMonthArray ,
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "#0177d4",
|
||
},
|
||
},
|
||
axisLabel: {
|
||
color: "#fff",
|
||
fontSize: 14,
|
||
rotate: -45, // 旋转角度，帮助节省空间
|
||
overflow: 'truncate', // 或者 'break'，根据需要选择
|
||
},
|
||
|
||
},
|
||
yAxis: {
|
||
name: "单位：KW\\h",
|
||
nameTextStyle: {
|
||
color: "#fff",
|
||
fontSize: 14,
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "#0177d4",
|
||
},
|
||
},
|
||
axisLabel: {
|
||
color: "#fff",
|
||
fontSize: 14,
|
||
|
||
},
|
||
splitLine: {
|
||
show: true, // 显示分隔线
|
||
lineStyle: {
|
||
color: "#ffffff",
|
||
type: 'dashed', // 设置为虚线
|
||
},
|
||
},
|
||
//interval: 1000,
|
||
max: Math.ceil(maxEntity.electricityUse),
|
||
},
|
||
series: [
|
||
{
|
||
type: "line",
|
||
barWidth: 18,
|
||
itemStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(
|
||
0,
|
||
0,
|
||
0,
|
||
1,
|
||
[
|
||
{
|
||
offset: 0,
|
||
color: "#6b59f5",
|
||
},
|
||
{
|
||
offset: 0.8,
|
||
color: "#05bfb5",
|
||
},
|
||
],
|
||
false
|
||
),
|
||
},
|
||
},
|
||
data: yMonthArray,
|
||
label: {
|
||
normal: {
|
||
show: true,
|
||
position: "top",
|
||
formatter: "{c}",
|
||
textStyle: {
|
||
color: "#fff",
|
||
},
|
||
}
|
||
}
|
||
},
|
||
],
|
||
};
|
||
yearChart.setOption(option);
|
||
}
|
||
|
||
/**
|
||
* 智慧路灯-昨日用电排名
|
||
*/
|
||
function getElectricityOrderBy() {
|
||
$.ajax({
|
||
type: 'POST',
|
||
url: dataUrl + 'lamp/getElectricityOrderBy',
|
||
data: "",
|
||
dataType: 'json',
|
||
success: function (res) {
|
||
powerConsumptionRank(res.obj);
|
||
}
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 智慧路灯-昨日用电排名
|
||
*/
|
||
function powerConsumptionRank(data){
|
||
const myChart = echarts.init(document.getElementById('powerConsumptionRanking'));
|
||
data.sort((a, b) => b.value - a.value);
|
||
var datas = data;
|
||
option = {
|
||
backgroundColor: 'transparent',
|
||
grid: {
|
||
left: 30,
|
||
right:10,
|
||
bottom: 0,
|
||
top:0,
|
||
containLabel: true,
|
||
},
|
||
tooltip: {
|
||
trigger: 'item',
|
||
axisPointer: {
|
||
type: 'none',
|
||
},
|
||
formatter: function (params) {
|
||
return params.data.name + ' : ' + parseFloat(params.data.value).toFixed(3);
|
||
},
|
||
},
|
||
xAxis: {
|
||
show: false,
|
||
type: 'value',
|
||
},
|
||
yAxis: [
|
||
{
|
||
type: 'category',
|
||
inverse: true,
|
||
axisLabel: {
|
||
show: true,
|
||
align: 'right',
|
||
textStyle: {
|
||
fontSize: 18,
|
||
color: 'rgb(255,255,255)',
|
||
rich: {
|
||
name: {
|
||
padding: [0,10,0,20],
|
||
width:50,
|
||
borderWidth:1,
|
||
align: 'left',
|
||
},
|
||
},
|
||
},
|
||
formatter: (name) => {
|
||
var index = datas.map((item) => item.name).indexOf(name) + 1;
|
||
return [
|
||
'{' + 'index' + '|' +'NO.'+ index + '}',
|
||
'{name|' + name + '}',
|
||
].join('');
|
||
},
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
data: datas.map((item) => item.name),
|
||
},
|
||
{
|
||
type:'category',
|
||
inverse: true,
|
||
axisLabel:{
|
||
show:true,
|
||
margin:30,//右侧y轴数字的外边距
|
||
textStyle: {
|
||
fontSize: 16,
|
||
color: 'rgb(255,255,255)',
|
||
},
|
||
formatter: (value) => {
|
||
return parseFloat( value).toFixed(3) +'KW\\h'
|
||
},
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
data: datas.map((item) => {
|
||
return item.value
|
||
}),
|
||
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: '值',
|
||
type: 'bar',
|
||
zlevel: 1,
|
||
showBackground: true,
|
||
// 柱状条上方的白色线条
|
||
label: {
|
||
show: true,
|
||
position: 'right', // 位置
|
||
color: '#fff',
|
||
fontSize: 14,
|
||
fontWeight:'bold',
|
||
distance: -1, // 字与条形图bar 的距离
|
||
formatter: '|', // 这里是数据展示的时候显示的数据
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||
{
|
||
offset: 0,
|
||
color: '#3cf0f1',
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: '#67b1f5',
|
||
},
|
||
]),
|
||
},
|
||
},
|
||
barWidth: 14,
|
||
data: data,
|
||
},
|
||
],
|
||
};
|
||
|
||
myChart.setOption(option);
|
||
}
|
||
|
||
function dome(data){
|
||
const container = document.getElementById('centerContainer');
|
||
let row = document.createElement('div');
|
||
row.className = 'center_title';
|
||
|
||
data.forEach((item, index) => {
|
||
if (index > 0 && index % 3 === 0) {
|
||
container.appendChild(row);
|
||
row = document.createElement('div');
|
||
row.className = 'center_title';
|
||
}
|
||
|
||
const icon = document.createElement('div');
|
||
icon.className = 'icon';
|
||
if (item.type === '1') {
|
||
icon.style.backgroundImage = `url(../../img/streeLamp/openButton.png)`;
|
||
}else {
|
||
icon.style.backgroundImage = `url(../../img/streeLamp/closeKey.png)`;
|
||
}
|
||
icon.onclick = () => {
|
||
localStorage.setItem("id", item.id);
|
||
var index = layer.open({
|
||
title: ['设备', 'color: #fff; cursor: move;background: transparent;float: left;'],
|
||
type: 2,
|
||
closeBtn: 2,
|
||
content: '../../page/light/streetLightSecondaryPage.html',
|
||
area: ["50%", "70%"],
|
||
maxmin: false
|
||
});
|
||
// window.parent.jump('', 17);
|
||
};
|
||
const nameSpan = document.createElement('span');
|
||
nameSpan.className = 'icon_top';
|
||
nameSpan.id = `streetLightName${item.id}`;
|
||
nameSpan.textContent = item.lightName;
|
||
|
||
const typeSpan = document.createElement('span');
|
||
typeSpan.className = 'icon_top1';
|
||
typeSpan.id = `streetLightType${item.id}`;
|
||
typeSpan.textContent = item.type ==='1'?"开启":"关闭";
|
||
|
||
icon.appendChild(nameSpan);
|
||
icon.appendChild(typeSpan);
|
||
row.appendChild(icon);
|
||
});
|
||
|
||
container.appendChild(row);
|
||
|
||
}
|
||
|
||
function getAllLampStatus() {
|
||
$.ajax({
|
||
type: 'POST',
|
||
url: dataUrl + 'lamp/getAllLampStatus',
|
||
data: "",
|
||
dataType: 'json',
|
||
success: function(res) {
|
||
$("#online").text(res.obj.online);
|
||
$("#offline").text(res.obj.offline);
|
||
$("#total").text(res.obj.deviceTotal);
|
||
|
||
}
|
||
});
|
||
}
|