376 lines
11 KiB
JavaScript
376 lines
11 KiB
JavaScript
|
$(function(){
|
||
|
|
$('#map').load('../../page/svg/svgMap_3D_red.svg',function(){
|
||
|
|
deviceNum();
|
||
|
|
})
|
||
|
|
//七日折线
|
||
|
|
weeklyData();
|
||
|
|
//十二月折线
|
||
|
|
monthlyData();
|
||
|
|
//发电量统计
|
||
|
|
voltTotal();
|
||
|
|
})
|
||
|
|
|
||
|
|
//根据uuid绑定svg内部的id和每个防区的线条数量
|
||
|
|
const idMap = new Map([
|
||
|
|
["83d8402f147a4752b533253a9b8efdcc",4],
|
||
|
|
["693b822a29c6485c89e20bf2f0361e71",8],
|
||
|
|
["d9d05050d8c54012b2888eb5c085c63a",4],
|
||
|
|
["0244961a68cb402a89081ef73947dc9a",12],
|
||
|
|
["399d97e087a84144a1e5cb41ab32e084",4],
|
||
|
|
["1de47425c6ff404883ac17b061f4d093",4],
|
||
|
|
["1de47425c6ff404883ac17b061f4d027",8]
|
||
|
|
])
|
||
|
|
|
||
|
|
function webscoketIndexSvg(strs){
|
||
|
|
var arr = strs.split(",");//uuid-code-status
|
||
|
|
for (var i = 0; i < arr.length; i++) {
|
||
|
|
var lineNum = idMap.get(arr[i].split("-")[0]);//防区线数量
|
||
|
|
var status = arr[i].split("-")[2];//防区状态
|
||
|
|
var lineColor = status == 5 ? "#FF3636" : "#23ee63";
|
||
|
|
if(arr[i].split("-")[1] == 2){
|
||
|
|
//第七房区
|
||
|
|
for (var k = 5; k <= 8; k++) {
|
||
|
|
changColor("a_"+arr[i].split("-")[0] +"_"+ k,lineColor);
|
||
|
|
}
|
||
|
|
}else{
|
||
|
|
//1-6防区
|
||
|
|
for (var k = 1; k <= lineNum; k++) {
|
||
|
|
changColor("a_"+arr[i].split("-")[0] +"_"+ k,lineColor);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
//修改防区线颜色
|
||
|
|
function changColor(code,lineColor){
|
||
|
|
var svg = Snap(`#${code}`);
|
||
|
|
svg.attr({
|
||
|
|
stroke: lineColor,
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function deviceNum() {
|
||
|
|
$.ajax({
|
||
|
|
type: 'POST',
|
||
|
|
url: dataUrl + 'electronicMap/deviceCount',
|
||
|
|
data: "",
|
||
|
|
dataType: 'json',
|
||
|
|
success: function(res) {
|
||
|
|
let deviceCount = res.obj.deviceCount;
|
||
|
|
var Monitoring = parseInt(deviceCount[0].camera)-(parseInt(deviceCount[0].camera1) + parseInt(deviceCount[0].camera2) + parseInt(deviceCount[0].camera3) + parseInt(deviceCount[0].camera4));
|
||
|
|
$('#map').find('#svg_795').text(parseInt(deviceCount[0].camera1));
|
||
|
|
$('#map').find('#svg_793').text(parseInt(deviceCount[0].camera2));
|
||
|
|
$('#map').find('#svg_800').text(parseInt(deviceCount[0].camera3));
|
||
|
|
$('#map').find('#svg_803').text(Monitoring);
|
||
|
|
$('#map').find('#svg_783').text(parseInt(deviceCount[0].camera4));
|
||
|
|
$('#map').find('#svg_801').text(parseInt(deviceCount[1].stand));
|
||
|
|
$('#map').find('#svg_796').text(parseInt(deviceCount[2].switch));
|
||
|
|
|
||
|
|
$('#map').find('#svg_804').text(parseInt(deviceCount[3].firefight-deviceCount[5].firefight3-deviceCount[4].firefight1)); //监控消防栓
|
||
|
|
$('#map').find('#svg_802').text(parseInt(deviceCount[5].firefight3)); //3号消防栓
|
||
|
|
$('#map').find('#svg_792').text(parseInt(deviceCount[4].firefight1)); //1号消防栓
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 近7日用电量折线图
|
||
|
|
*/
|
||
|
|
// 近7日用电量接口数据获取
|
||
|
|
function weeklyData() {
|
||
|
|
$.ajax({
|
||
|
|
type: 'POST',
|
||
|
|
url: dataUrl + 'photovoltaic/getElectricityFromWeek',
|
||
|
|
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(item => item.voltUse);
|
||
|
|
console.log(yWeeklyValueArr)
|
||
|
|
const xWeeklyNameArr = getPastSevenDays();
|
||
|
|
|
||
|
|
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 + '日';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
let weeklyOption = {
|
||
|
|
title: {
|
||
|
|
subtext: '单位 : KW',
|
||
|
|
subtextStyle: {
|
||
|
|
fontSize: 14,
|
||
|
|
color: '#fff'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
left: '2%',
|
||
|
|
right: '5%',
|
||
|
|
top: '20%',
|
||
|
|
bottom: '5%',
|
||
|
|
containLabel: true
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
trigger: "axis",
|
||
|
|
},
|
||
|
|
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: '#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: yWeeklyValueArr,
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
weeklyChart.setOption(weeklyOption);
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 近12月用电量折线图
|
||
|
|
*/
|
||
|
|
//近12月用电量接口数据获取
|
||
|
|
function monthlyData() {
|
||
|
|
$.ajax({
|
||
|
|
type: 'POST',
|
||
|
|
url: dataUrl + 'photovoltaic/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.voltUse);
|
||
|
|
const lastTwelveMonths = data.map(item => item.date);
|
||
|
|
|
||
|
|
let monthlyOption = {
|
||
|
|
title: {
|
||
|
|
subtext: '单位 : KW',
|
||
|
|
subtextStyle: {
|
||
|
|
fontSize: 14,
|
||
|
|
color: '#fff'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
trigger: "axis",
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
left: '2%',
|
||
|
|
right: '5%',
|
||
|
|
top: '20%',
|
||
|
|
bottom: '5%',
|
||
|
|
containLabel: true
|
||
|
|
},
|
||
|
|
xAxis: [
|
||
|
|
{
|
||
|
|
type: 'category',
|
||
|
|
boundaryGap: false,
|
||
|
|
axisLabel: {
|
||
|
|
color: '#fff',
|
||
|
|
interval: 1,
|
||
|
|
// 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);
|
||
|
|
}
|
||
|
|
|
||
|
|
function voltTotal() {
|
||
|
|
$.ajax({
|
||
|
|
type: 'POST',
|
||
|
|
url: dataUrl + 'photovoltaic/getElectricityCount',
|
||
|
|
data: "",
|
||
|
|
dataType: 'json',
|
||
|
|
success: function(res) {
|
||
|
|
$('#today').html(res.obj.dayElectricity)
|
||
|
|
$('#month').html(res.obj.monthElectricity)
|
||
|
|
$('#year').html(res.obj.yearElectricity)
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|