880 lines
24 KiB
JavaScript
880 lines
24 KiB
JavaScript
|
$(document).ready(function () {
|
||
|
|
|
||
|
|
//智慧用水-雨水回收量统计
|
||
|
|
// rainwaterRecovery();
|
||
|
|
// 智慧用水-年用水量统计
|
||
|
|
waterYearUse();
|
||
|
|
// 智慧用水-近十二个月回收用水量
|
||
|
|
getPortStatusNum();
|
||
|
|
// 智慧用水-设备状态
|
||
|
|
// switchStatus();
|
||
|
|
// 智慧用水-告警表格
|
||
|
|
waterAlarmInformation();
|
||
|
|
// 智慧用水-近12月用水量折线图
|
||
|
|
monthlyData();
|
||
|
|
// 智慧用水-近7日用水量折线图
|
||
|
|
weeklyData();
|
||
|
|
// 智慧用水-今日用水排名
|
||
|
|
waterRanking();
|
||
|
|
// 智慧用水-今日时间段用水
|
||
|
|
timePeriodWaterUse();
|
||
|
|
//初始渲染页面
|
||
|
|
init();
|
||
|
|
// 定时任务(每1分钟执行)
|
||
|
|
setInterval(() => {
|
||
|
|
init();
|
||
|
|
}, 1000*60);
|
||
|
|
})
|
||
|
|
function init(){
|
||
|
|
// changeStore(localStorage.setstoreLJYL)
|
||
|
|
document.getElementById('onlineCount').innerText = localStorage.getItem('countOnline');
|
||
|
|
document.getElementById('offlineCount').innerText = localStorage.getItem('countOffline');
|
||
|
|
document.getElementById('total').innerText = 9;
|
||
|
|
console.log('每隔60秒执行');
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 智慧用水-雨水回收量统计
|
||
|
|
*/
|
||
|
|
|
||
|
|
function rainwaterRecovery() {
|
||
|
|
$.ajax({
|
||
|
|
type: 'POST',
|
||
|
|
url: dataUrl + 'water/rainwaterRecovery',
|
||
|
|
data: "",
|
||
|
|
dataType: 'json',
|
||
|
|
success: function (res) {
|
||
|
|
changeStore(res.obj.yearRecovery);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
function changeStore(done) {
|
||
|
|
console.log(done)
|
||
|
|
const domeString = done.toString();
|
||
|
|
const doneArray = domeString.split('').reverse();
|
||
|
|
console.log(doneArray)
|
||
|
|
for (let i = 0; i < doneArray.length; i++) {
|
||
|
|
document.getElementById('recycle' + i).innerText = doneArray[i];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 智慧用水-年用水量统计
|
||
|
|
*/
|
||
|
|
function waterYearUse() {
|
||
|
|
$.ajax({
|
||
|
|
type: 'POST',
|
||
|
|
url: dataUrl + 'water/waterYearUse',
|
||
|
|
data: "",
|
||
|
|
dataType: 'json',
|
||
|
|
success: function (res) {
|
||
|
|
changeUse(res.obj.waterUse);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function changeUse(done) {
|
||
|
|
const domeString = done.toString();
|
||
|
|
const doneArray = domeString.split('').reverse();
|
||
|
|
console.log(doneArray)
|
||
|
|
for (let i = 0; i < doneArray.length; i++) {
|
||
|
|
document.getElementById('yearUse' + i).innerText = doneArray[i];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 智慧用水-设备状态
|
||
|
|
*/
|
||
|
|
function switchStatus() {
|
||
|
|
$.ajax({
|
||
|
|
type: 'POST',
|
||
|
|
url: dataUrl + 'electricity/switchStatus',
|
||
|
|
data: "",
|
||
|
|
dataType: 'json',
|
||
|
|
success: function (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;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 智慧用水-进十二个月回收用水量
|
||
|
|
*/
|
||
|
|
function getPortStatusNum() {
|
||
|
|
$.ajax({
|
||
|
|
type: 'POST',
|
||
|
|
// async: false,
|
||
|
|
url: dataUrl + 'water/waterStoreInDecember', // 请求地址
|
||
|
|
dataType: 'json', // 服务器返回数据类型
|
||
|
|
data: {}, //获取提交的表单字段
|
||
|
|
success: function (data) {
|
||
|
|
var resMsg = data.resMsg;
|
||
|
|
console.log(data.obj)
|
||
|
|
if ("数据获取成功" === resMsg) {
|
||
|
|
setTimeout(function () {
|
||
|
|
//用电统计
|
||
|
|
powerStatChart(data.obj);
|
||
|
|
let done = data.obj.reduce((sum, item) => sum + parseFloat(item.waterStore), 0);
|
||
|
|
done = parseFloat(done.toString().slice(0, 6));
|
||
|
|
console.log("done", done)
|
||
|
|
changeStore(done)
|
||
|
|
}, 200)
|
||
|
|
|
||
|
|
}
|
||
|
|
},
|
||
|
|
error: function (XMLHttpRequest, textStatus, e) {
|
||
|
|
layer.msg('数据请求发生异常,请稍后重试', {
|
||
|
|
icon: 16,
|
||
|
|
scrollbar: false
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function powerStatChart(data) {
|
||
|
|
echarts.init(document.getElementById('reclaimedWater')).dispose(); // 销毁实例
|
||
|
|
const myChart = echarts.init(document.getElementById('reclaimedWater'));
|
||
|
|
|
||
|
|
const lastTwelveMonths = data.map(item => item.yearMonth);
|
||
|
|
const yWeeklyValueArr = data.map(item => item.waterStore);
|
||
|
|
|
||
|
|
let monthlyOption = {
|
||
|
|
title: {
|
||
|
|
subtext: '单位 : m³',
|
||
|
|
subtextStyle: {
|
||
|
|
fontSize: 14,
|
||
|
|
color: '#fff'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
trigger: "axis",
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
left: '0%',
|
||
|
|
right: '5%',
|
||
|
|
top: '20%',
|
||
|
|
bottom: '5%',
|
||
|
|
containLabel: true
|
||
|
|
},
|
||
|
|
xAxis: [
|
||
|
|
{
|
||
|
|
type: 'category',
|
||
|
|
boundaryGap: false,
|
||
|
|
axisLabel: {
|
||
|
|
color: '#fff',
|
||
|
|
interval: 1,
|
||
|
|
|
||
|
|
},
|
||
|
|
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,
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
myChart.setOption(monthlyOption);
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 智慧用水-报警表格
|
||
|
|
*/
|
||
|
|
function waterAlarmInformation() {
|
||
|
|
$.ajax({
|
||
|
|
type: 'POST',
|
||
|
|
url: dataUrl + 'water/warnInfos',
|
||
|
|
data: "",
|
||
|
|
dataType: 'json',
|
||
|
|
success: function (res) {
|
||
|
|
waterAlarmList(res.obj);
|
||
|
|
},
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function waterAlarmList(data) {
|
||
|
|
let equipNum = 5;
|
||
|
|
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].waterName + "</span>"
|
||
|
|
html += "<span>" + data.equipInfo[i].waterLocation + "</span>"
|
||
|
|
html += "<span>" + data.equipInfo[i].alarmType + "</span>"
|
||
|
|
html += "<span>" + data.equipInfo[i].alarmTime + "</span>"
|
||
|
|
html += "</div>"
|
||
|
|
}
|
||
|
|
$(".readLine>.table").append(html)
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 智慧用水-近12月用水量折线图
|
||
|
|
*/
|
||
|
|
function monthlyData() {
|
||
|
|
$.ajax({
|
||
|
|
type: 'POST',
|
||
|
|
url: dataUrl + 'water/waterUseInDecember',
|
||
|
|
data: "",
|
||
|
|
dataType: 'json',
|
||
|
|
success: function (res) {
|
||
|
|
monthlyECharts(res.obj)
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function monthlyECharts(data) {
|
||
|
|
let monthlyChart = echarts.init(document.getElementById('monthly-water'));
|
||
|
|
const lastTwelveMonths = data.map(item => item.yearMonth);
|
||
|
|
const yWeeklyValueArr = data.map(item => item.waterUse);
|
||
|
|
|
||
|
|
let monthlyOption = {
|
||
|
|
title: {
|
||
|
|
subtext: '单位 : m³',
|
||
|
|
subtextStyle: {
|
||
|
|
fontSize: 14,
|
||
|
|
color: '#fff'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
trigger: "axis",
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
left: '0%',
|
||
|
|
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);
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 智慧用水-近7日用水量折线图
|
||
|
|
*/
|
||
|
|
function weeklyData() {
|
||
|
|
$.ajax({
|
||
|
|
type: 'POST',
|
||
|
|
url: dataUrl + 'water/waterForNearly7Days',
|
||
|
|
data: "",
|
||
|
|
dataType: 'json',
|
||
|
|
success: function (res) {
|
||
|
|
weeklyECharts(res.obj)
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function weeklyECharts(data) {
|
||
|
|
let weeklyChart = echarts.init(document.getElementById('weekly-chart'));
|
||
|
|
const yWeeklyValueArr5 = data.map(item => item.waterUse);
|
||
|
|
const reversedArray = yWeeklyValueArr5.slice().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 weeklyOption = {
|
||
|
|
title: {
|
||
|
|
subtext: '单位 : m³',
|
||
|
|
subtextStyle: {
|
||
|
|
fontSize: 14,
|
||
|
|
color: '#fff'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
left: '0%',
|
||
|
|
right: '5%',
|
||
|
|
top: '20%',
|
||
|
|
bottom: '5%',
|
||
|
|
containLabel: true
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
trigger: "axis",
|
||
|
|
},
|
||
|
|
// legend: {
|
||
|
|
// show: true,
|
||
|
|
// x: '55%',
|
||
|
|
// top: '0',
|
||
|
|
// y: '35',
|
||
|
|
// icon: 'stack',
|
||
|
|
// itemWidth: 10,
|
||
|
|
// itemHeight: 10,
|
||
|
|
// textStyle: {
|
||
|
|
// color: '#1bb4f6'
|
||
|
|
// },
|
||
|
|
// data: ['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: '#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: reversedArray,
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
weeklyChart.setOption(weeklyOption);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 智慧用水-今日用水排名
|
||
|
|
*/
|
||
|
|
function waterRanking() {
|
||
|
|
$.ajax({
|
||
|
|
type: 'POST',
|
||
|
|
url: dataUrl + 'water/waterUseRanking',
|
||
|
|
data: "",
|
||
|
|
dataType: 'json',
|
||
|
|
success: function (res) {
|
||
|
|
waterRankingEcharts(res.obj);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function waterRankingEcharts(obj) {
|
||
|
|
echarts.init(document.getElementById('waterToday')).dispose(); // 销毁实例
|
||
|
|
const myChart = echarts.init(document.getElementById('waterToday'));
|
||
|
|
|
||
|
|
let data = obj.sort(function(a, b) {
|
||
|
|
return parseFloat(a.value) - parseFloat(b.value); // 降序
|
||
|
|
});
|
||
|
|
console.log(data)
|
||
|
|
|
||
|
|
const ydata = [];
|
||
|
|
for (var i = 0; i < data.length; i++) {
|
||
|
|
ydata.push(data[i].name);
|
||
|
|
}
|
||
|
|
console.log(ydata)
|
||
|
|
|
||
|
|
const datalength = [];
|
||
|
|
for (var i = 0; i < data.length; i++) {
|
||
|
|
datalength.push(0);
|
||
|
|
}
|
||
|
|
console.log(datalength)
|
||
|
|
|
||
|
|
const databg = [];
|
||
|
|
for (var i = 0; i < data.length; i++) {
|
||
|
|
databg.push(data[0].value);
|
||
|
|
}
|
||
|
|
console.log(databg)
|
||
|
|
|
||
|
|
|
||
|
|
let option = {
|
||
|
|
backgroundColor: 'transparent',
|
||
|
|
grid: {
|
||
|
|
left: '4%',
|
||
|
|
top: '2%',
|
||
|
|
right: '8%',
|
||
|
|
bottom: '2%',
|
||
|
|
containLabel: true
|
||
|
|
},
|
||
|
|
xAxis: [{
|
||
|
|
show: false,
|
||
|
|
}],
|
||
|
|
yAxis: [{
|
||
|
|
axisTick: 'none',
|
||
|
|
axisLine: 'none',
|
||
|
|
offset: '10',
|
||
|
|
axisLabel: {
|
||
|
|
textStyle: {
|
||
|
|
color: '#ccd1d2',
|
||
|
|
fontSize: '14',
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data: ydata,
|
||
|
|
}, {
|
||
|
|
axisTick: 'none',
|
||
|
|
axisLine: 'none',
|
||
|
|
axisLabel: {
|
||
|
|
textStyle: {
|
||
|
|
color: '#ccd1d2',
|
||
|
|
fontSize: '16',
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data: data
|
||
|
|
}, {
|
||
|
|
axisLine: {
|
||
|
|
lineStyle: {
|
||
|
|
color: 'rgba(0,0,0,0)'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data: [],
|
||
|
|
}],
|
||
|
|
series: [{
|
||
|
|
name: '条',
|
||
|
|
type: 'bar',
|
||
|
|
stack: '圆',
|
||
|
|
yAxisIndex: 0,
|
||
|
|
data: data,
|
||
|
|
barWidth: 8,
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: {
|
||
|
|
type: 'linear',
|
||
|
|
x: 0,
|
||
|
|
y: 0,
|
||
|
|
x2: 1,
|
||
|
|
y2: 0,
|
||
|
|
colorStops: [
|
||
|
|
{
|
||
|
|
offset: 0,
|
||
|
|
color: '#bae7ff', // 0% 处的颜色
|
||
|
|
},
|
||
|
|
{
|
||
|
|
offset: 1,
|
||
|
|
color: '#1890ff', // 100% 处的颜色
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
barBorderRadius: 5,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
z: 2
|
||
|
|
}, {
|
||
|
|
name: '内圆',
|
||
|
|
type: 'scatter',
|
||
|
|
stack: '圆',
|
||
|
|
yAxisIndex: 0,
|
||
|
|
data: datalength,
|
||
|
|
label: false,
|
||
|
|
symbolSize: 8,
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
borderColor: '#409eff',
|
||
|
|
borderWidth: 4,
|
||
|
|
color: '#fff',
|
||
|
|
opacity: 1,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
z: 2
|
||
|
|
}, {
|
||
|
|
name: '白框',
|
||
|
|
type: 'bar',
|
||
|
|
yAxisIndex: 1,
|
||
|
|
barGap: '-100%',
|
||
|
|
data: databg,
|
||
|
|
barWidth: 6,
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
color: '#e4effe',
|
||
|
|
barBorderRadius: 5,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
z: 0
|
||
|
|
}]
|
||
|
|
};
|
||
|
|
myChart.setOption(option);
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 智慧用水-今日时间段用水
|
||
|
|
*/
|
||
|
|
function timePeriodWaterUse() {
|
||
|
|
$.ajax({
|
||
|
|
type: 'POST',
|
||
|
|
url: dataUrl + 'water/timeOfDay',
|
||
|
|
data: "",
|
||
|
|
dataType: 'json',
|
||
|
|
success: function (res) {
|
||
|
|
timePeriodWaterUseEcharts(res.obj);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function timePeriodWaterUseEcharts(data) {
|
||
|
|
echarts.init(document.getElementById('timePeriodWaterUse')).dispose(); // 销毁实例
|
||
|
|
const myChart = echarts.init(document.getElementById('timePeriodWaterUse'));
|
||
|
|
var scale = 1;
|
||
|
|
var echartData = [
|
||
|
|
{
|
||
|
|
value: data[0].timePeriodWaterUse,
|
||
|
|
name: "00:00-07:59",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: data[1].timePeriodWaterUse-data[0].timePeriodWaterUse,
|
||
|
|
name: "08:00-11:59",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: data[2].timePeriodWaterUse-data[1].timePeriodWaterUse,
|
||
|
|
name: "12:00-15:59",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
value: data[3].timePeriodWaterUse-data[2].timePeriodWaterUse,
|
||
|
|
name: "16:00-23:59",
|
||
|
|
}
|
||
|
|
];
|
||
|
|
var rich = {
|
||
|
|
yellow: {
|
||
|
|
color: "#66ffff",
|
||
|
|
fontSize: 25 * scale,
|
||
|
|
padding: [5, 4],
|
||
|
|
align: "center",
|
||
|
|
},
|
||
|
|
total: {
|
||
|
|
color: "#ffc72b",
|
||
|
|
fontSize: 30 * scale,
|
||
|
|
align: "center",
|
||
|
|
},
|
||
|
|
white: {
|
||
|
|
color: "#fff",
|
||
|
|
align: "center",
|
||
|
|
fontSize: 14 * scale,
|
||
|
|
padding: [10, 0],
|
||
|
|
},
|
||
|
|
blue: {
|
||
|
|
color: "#49dff0",
|
||
|
|
fontSize: 16 * scale,
|
||
|
|
align: "center",
|
||
|
|
},
|
||
|
|
hr: {
|
||
|
|
borderColor: "#0b5263",
|
||
|
|
width: "100%",
|
||
|
|
borderWidth: 1,
|
||
|
|
height: 0,
|
||
|
|
},
|
||
|
|
};
|
||
|
|
option = {
|
||
|
|
backgroundColor: "transparent",
|
||
|
|
title: {
|
||
|
|
text: "昨日用水量",
|
||
|
|
left: "center",
|
||
|
|
top: "53%",
|
||
|
|
padding: [24, 0],
|
||
|
|
textStyle: {
|
||
|
|
color: "#fff",
|
||
|
|
fontSize: 18 * scale,
|
||
|
|
align: "center",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
selectedMode: false,
|
||
|
|
formatter: function (name) {
|
||
|
|
var total = 0; //各科正确率总和
|
||
|
|
var averagePercent; //综合正确率
|
||
|
|
echartData.forEach(function (value, index, array) {
|
||
|
|
total += value.value;
|
||
|
|
});
|
||
|
|
return "{total|" + total.toFixed(2) +"m³"+ "}";
|
||
|
|
},
|
||
|
|
data: [echartData[0].name],
|
||
|
|
left: "center",
|
||
|
|
top: "center",
|
||
|
|
icon: "none",
|
||
|
|
align: "center",
|
||
|
|
textStyle: {
|
||
|
|
color: "#fff",
|
||
|
|
fontSize: 16 * scale,
|
||
|
|
rich: rich,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: "总用水量",
|
||
|
|
type: "pie",
|
||
|
|
radius: ["42%", "50%"],
|
||
|
|
hoverAnimation: false,
|
||
|
|
color: ["#c487ee", "#deb140", "#49dff0", "#034079"],
|
||
|
|
label: {
|
||
|
|
normal: {
|
||
|
|
formatter: function (params, ticket, callback) {
|
||
|
|
var total = 0; //考生总数量
|
||
|
|
var percent = 0; //考生占比
|
||
|
|
echartData.forEach(function (value, index, array) {
|
||
|
|
total += value.value;
|
||
|
|
});
|
||
|
|
percent = ((params.value / total) * 100).toFixed(1);
|
||
|
|
return (
|
||
|
|
"{white|" +
|
||
|
|
params.name +
|
||
|
|
"}\n{hr|}\n{yellow|" +
|
||
|
|
(params.value).toFixed(2) +"m³"+
|
||
|
|
"}\n{blue|" +
|
||
|
|
percent +
|
||
|
|
"%}"
|
||
|
|
);
|
||
|
|
},
|
||
|
|
rich: rich,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
labelLine: {
|
||
|
|
normal: {
|
||
|
|
length: 55 * scale,
|
||
|
|
length2: 0,
|
||
|
|
lineStyle: {
|
||
|
|
color: "#0b5263",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data: echartData,
|
||
|
|
},
|
||
|
|
],
|
||
|
|
};
|
||
|
|
|
||
|
|
myChart.setOption(option);
|
||
|
|
}
|
||
|
|
|