556 lines
16 KiB
JavaScript
556 lines
16 KiB
JavaScript
let table, layer, form,laydate;
|
|
let fontSize = '14', fontFamily = 'Alibaba PuHuiTi R', fontColor = '#fff';
|
|
|
|
const bidCode = parent.$('#bidPro').val();
|
|
layui.use(["layer", "table", "form", "laydate"], function () {
|
|
layer = layui.layer;
|
|
table = layui.table;
|
|
form = layui.form;
|
|
|
|
laydate = layui.laydate;
|
|
laydate.render({
|
|
elem: "#ID-laydate-rangeLinked",
|
|
range: ["#ID-laydate-start-date-1", "#ID-laydate-end-date-1"],
|
|
rangeLinked: true, // 开启日期范围选择时的区间联动标注模式 --- 2.8+ 新增
|
|
});
|
|
|
|
$("#ID-laydate-start-date-1").val(getNowTime())
|
|
$("#ID-laydate-end-date-1").val(getNowTime())
|
|
|
|
let startTime = "";
|
|
let endTime = "";
|
|
if ($("#ID-laydate-start-date-1").val() != "") {
|
|
startTime = $("#ID-laydate-start-date-1").val();
|
|
endTime = $("#ID-laydate-end-date-1").val();
|
|
} else {
|
|
startTime = "";
|
|
endTime = "";
|
|
}
|
|
|
|
getEnergyReduction(startTime, endTime)
|
|
});
|
|
|
|
function getEnergyReduction(startTime, endTime) {
|
|
const url =
|
|
commonUrl +
|
|
"screen/energyReduction/selectEnergyReduction?startTime=" + startTime + "&endTime=" + endTime;
|
|
ajaxRequestGet(
|
|
url,
|
|
"GET",
|
|
true,
|
|
function () {
|
|
},
|
|
function (result) {
|
|
if (result.code === 200) {
|
|
setData(result.data);
|
|
} else if (result.code === 500) {
|
|
console.error("实时监测" + result.msg);
|
|
setData(null);
|
|
} else if (result.code === 401) {
|
|
loginout(1);
|
|
}
|
|
},
|
|
function (xhr, status, error) {
|
|
errorFn(xhr, status, error);
|
|
setData(null);
|
|
},
|
|
aqEnnable
|
|
);
|
|
|
|
/* 实时检测赋值 */
|
|
function setData(data) {
|
|
if (data) {
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
function getElectricityStatistics() {
|
|
initElectricityStatisticsChart()
|
|
}
|
|
|
|
function getWaterStatistics() {
|
|
initWaterStatisticsChart()
|
|
}
|
|
|
|
function initElectricityStatisticsChart() {
|
|
const electricityStatistics = echarts.init(document.getElementById("electricityStatistics"));
|
|
const option = {
|
|
tooltip: {
|
|
trigger: "item",
|
|
formatter: "{b}: {c}kWh ({d}%)",
|
|
backgroundColor: "rgba(0, 0, 0, 0.8)",
|
|
borderColor: "#08DCE0",
|
|
borderWidth: 1,
|
|
textStyle: {
|
|
color: "#fff",
|
|
},
|
|
},
|
|
legend: {
|
|
orient: "vertical",
|
|
right: "20%",
|
|
top: "25%",
|
|
itemGap: 30,
|
|
itemWidth: 20,
|
|
itemHeight: 8,
|
|
textStyle: {
|
|
color: "#fff",
|
|
fontSize: 14,
|
|
rich: {
|
|
name: {
|
|
width: 30,
|
|
color: "#fff",
|
|
},
|
|
value: {
|
|
width: 60,
|
|
align: "right",
|
|
color: "#79FFFF",
|
|
fontSize: 16,
|
|
fontWeight: "bold",
|
|
},
|
|
},
|
|
},
|
|
formatter: (name) => {
|
|
const data = option.series[0].data
|
|
const item = data.find((d) => d.name === name)
|
|
const percent = item ? item.value : 0
|
|
return `{name|${name}} {value|${percent}%}`
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: "用电统计",
|
|
type: "pie",
|
|
radius: [0, '60%'],
|
|
center: ["30%", "55%"],
|
|
avoidLabelOverlap: false,
|
|
itemStyle: {
|
|
borderRadius: 5,
|
|
borderColor: "rgba(0, 0, 0, 0.3)",
|
|
borderWidth: 2,
|
|
shadowBlur: 10,
|
|
shadowColor: "rgba(0, 0, 0, 0.5)",
|
|
},
|
|
label: {
|
|
show: false,
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: false,
|
|
},
|
|
itemStyle: {
|
|
shadowBlur: 20,
|
|
shadowOffsetX: 0,
|
|
shadowColor: "rgba(8, 220, 224, 0.8)",
|
|
},
|
|
},
|
|
labelLine: {
|
|
show: false,
|
|
},
|
|
data: [
|
|
{
|
|
value: 60,
|
|
name: "A区",
|
|
itemStyle: {
|
|
color: '#75F7EC',
|
|
},
|
|
},
|
|
{
|
|
value: 60,
|
|
name: "B区",
|
|
itemStyle: {
|
|
color: '#75F791',
|
|
},
|
|
},
|
|
{
|
|
value: 26,
|
|
name: "C区",
|
|
itemStyle: {
|
|
color: '#00C3F2',
|
|
},
|
|
},
|
|
{
|
|
value: 14,
|
|
name: "D区",
|
|
itemStyle: {
|
|
color: '#EB846A',
|
|
},
|
|
},
|
|
],
|
|
},
|
|
],
|
|
}
|
|
|
|
electricityStatistics.setOption(option)
|
|
}
|
|
|
|
function initWaterStatisticsChart() {
|
|
const waterStatistics = echarts.init(document.getElementById("waterStatistics"));
|
|
const option = {
|
|
tooltip: {
|
|
trigger: "item",
|
|
formatter: "{b}: {c}kWh ({d}%)",
|
|
backgroundColor: "rgba(0, 0, 0, 0.8)",
|
|
borderColor: "#08DCE0",
|
|
borderWidth: 1,
|
|
textStyle: {
|
|
color: "#fff",
|
|
},
|
|
},
|
|
legend: {
|
|
orient: "vertical",
|
|
right: "20%",
|
|
top: "25%",
|
|
itemGap: 30,
|
|
itemWidth: 20,
|
|
itemHeight: 8,
|
|
textStyle: {
|
|
color: "#fff",
|
|
fontSize: 14,
|
|
rich: {
|
|
name: {
|
|
width: 30,
|
|
color: "#fff",
|
|
},
|
|
value: {
|
|
width: 60,
|
|
align: "right",
|
|
color: "#79FFFF",
|
|
fontSize: 16,
|
|
fontWeight: "bold",
|
|
},
|
|
},
|
|
},
|
|
formatter: (name) => {
|
|
const data = option.series[0].data
|
|
const item = data.find((d) => d.name === name)
|
|
const percent = item ? item.value : 0
|
|
return `{name|${name}} {value|${percent}%}`
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: "用电统计",
|
|
type: "pie",
|
|
radius: [0, '60%'],
|
|
center: ["30%", "55%"],
|
|
avoidLabelOverlap: false,
|
|
itemStyle: {
|
|
borderRadius: 5,
|
|
borderColor: "rgba(0, 0, 0, 0.3)",
|
|
borderWidth: 2,
|
|
shadowBlur: 10,
|
|
shadowColor: "rgba(0, 0, 0, 0.5)",
|
|
},
|
|
label: {
|
|
show: false,
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: false,
|
|
},
|
|
itemStyle: {
|
|
shadowBlur: 20,
|
|
shadowOffsetX: 0,
|
|
shadowColor: "rgba(8, 220, 224, 0.8)",
|
|
},
|
|
},
|
|
labelLine: {
|
|
show: false,
|
|
},
|
|
data: [
|
|
{
|
|
value: 60,
|
|
name: "A区",
|
|
itemStyle: {
|
|
color: '#75F7EC',
|
|
},
|
|
},
|
|
{
|
|
value: 60,
|
|
name: "B区",
|
|
itemStyle: {
|
|
color: '#75F791',
|
|
},
|
|
},
|
|
{
|
|
value: 26,
|
|
name: "C区",
|
|
itemStyle: {
|
|
color: '#00C3F2',
|
|
},
|
|
},
|
|
{
|
|
value: 14,
|
|
name: "D区",
|
|
itemStyle: {
|
|
color: '#EB846A',
|
|
},
|
|
},
|
|
],
|
|
},
|
|
],
|
|
}
|
|
|
|
waterStatistics.setOption(option)
|
|
}
|
|
|
|
function getWaterTrend() {
|
|
const dates = [
|
|
"xxxx-xx-01",
|
|
"xxxx-xx-02",
|
|
"xxxx-xx-03",
|
|
"xxxx-xx-04",
|
|
"xxxx-xx-05",
|
|
"xxxx-xx-06",
|
|
"xxxx-xx-07",
|
|
"xxxx-xx-08",
|
|
]
|
|
|
|
const waterData = [4.2, 3.3, 3.1, 2.8, 3.0, 3.2, 3.3, 2.1]
|
|
initWaterTrend(dates, waterData);
|
|
}
|
|
|
|
function initWaterTrend(dates, waterData) {
|
|
const waterTrend = echarts.init(document.getElementById("waterTrend"));
|
|
const option = {
|
|
grid: {
|
|
left: "5%",
|
|
right: "8%",
|
|
top: "25%",
|
|
bottom: "10%",
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
type: "category",
|
|
data: dates,
|
|
boundaryGap: false,
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "rgba(8, 220, 224, 0.3)",
|
|
},
|
|
},
|
|
axisLabel: {
|
|
color: "rgba(255, 255, 255, 0.6)",
|
|
fontSize: 11,
|
|
rotate: 0,
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
},
|
|
yAxis: {
|
|
type: "value",
|
|
min: 0,
|
|
max: 5,
|
|
interval: 1,
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
color: "rgba(255, 255, 255, 0.6)",
|
|
fontSize: 12,
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: "rgba(8, 220, 224, 0.15)",
|
|
type: "dashed",
|
|
},
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: "用水量",
|
|
type: "line",
|
|
smooth: true,
|
|
symbol: "circle",
|
|
symbolSize: 6,
|
|
data: waterData,
|
|
lineStyle: {
|
|
color: "#08DCE0",
|
|
width: 2,
|
|
},
|
|
itemStyle: {
|
|
color: "#08DCE0",
|
|
borderColor: "#08DCE0",
|
|
borderWidth: 2,
|
|
},
|
|
areaStyle: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 0,
|
|
color: "rgba(8, 220, 224, 0.3)",
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: "rgba(8, 220, 224, 0.05)",
|
|
},
|
|
]),
|
|
},
|
|
emphasis: {
|
|
itemStyle: {
|
|
color: "#08DCE0",
|
|
borderColor: "#fff",
|
|
borderWidth: 2,
|
|
shadowBlur: 10,
|
|
shadowColor: "rgba(8, 220, 224, 0.8)",
|
|
},
|
|
},
|
|
},
|
|
],
|
|
tooltip: {
|
|
trigger: "axis",
|
|
backgroundColor: "rgba(0, 20, 40, 0.9)",
|
|
borderColor: "#08DCE0",
|
|
borderWidth: 1,
|
|
textStyle: {
|
|
color: "#fff",
|
|
},
|
|
axisPointer: {
|
|
type: "line",
|
|
lineStyle: {
|
|
color: "rgba(8, 220, 224, 0.5)",
|
|
type: "dashed",
|
|
},
|
|
},
|
|
},
|
|
}
|
|
waterTrend.setOption(option)
|
|
}
|
|
|
|
function getElectricityTrend() {
|
|
const dates = [
|
|
"xxxx-xx-01",
|
|
"xxxx-xx-02",
|
|
"xxxx-xx-03",
|
|
"xxxx-xx-04",
|
|
"xxxx-xx-05",
|
|
"xxxx-xx-06",
|
|
"xxxx-xx-07",
|
|
"xxxx-xx-08",
|
|
]
|
|
|
|
const electricityData = [4.2, 3.3, 3.1, 2.8, 3.0, 3.2, 3.3, 2.1]
|
|
initElectricityTrend(dates, electricityData);
|
|
}
|
|
|
|
function initElectricityTrend(dates, electricityData) {
|
|
const waterTrend = echarts.init(document.getElementById("electricityTrend"));
|
|
const option = {
|
|
grid: {
|
|
left: "5%",
|
|
right: "8%",
|
|
top: "25%",
|
|
bottom: "10%",
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
type: "category",
|
|
data: dates,
|
|
boundaryGap: false,
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "rgba(8, 220, 224, 0.3)",
|
|
},
|
|
},
|
|
axisLabel: {
|
|
color: "rgba(255, 255, 255, 0.6)",
|
|
fontSize: 11,
|
|
rotate: 0,
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
},
|
|
yAxis: {
|
|
type: "value",
|
|
min: 0,
|
|
max: 5,
|
|
interval: 1,
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
color: "rgba(255, 255, 255, 0.6)",
|
|
fontSize: 12,
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: "rgba(8, 220, 224, 0.15)",
|
|
type: "dashed",
|
|
},
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: "用水量",
|
|
type: "line",
|
|
smooth: true,
|
|
symbol: "circle",
|
|
symbolSize: 6,
|
|
data: electricityData,
|
|
lineStyle: {
|
|
color: "#08DCE0",
|
|
width: 2,
|
|
},
|
|
itemStyle: {
|
|
color: "#08DCE0",
|
|
borderColor: "#08DCE0",
|
|
borderWidth: 2,
|
|
},
|
|
areaStyle: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 0,
|
|
color: "rgba(8, 220, 224, 0.3)",
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: "rgba(8, 220, 224, 0.05)",
|
|
},
|
|
]),
|
|
},
|
|
emphasis: {
|
|
itemStyle: {
|
|
color: "#08DCE0",
|
|
borderColor: "#fff",
|
|
borderWidth: 2,
|
|
shadowBlur: 10,
|
|
shadowColor: "rgba(8, 220, 224, 0.8)",
|
|
},
|
|
},
|
|
},
|
|
],
|
|
tooltip: {
|
|
trigger: "axis",
|
|
backgroundColor: "rgba(0, 20, 40, 0.9)",
|
|
borderColor: "#08DCE0",
|
|
borderWidth: 1,
|
|
textStyle: {
|
|
color: "#fff",
|
|
},
|
|
axisPointer: {
|
|
type: "line",
|
|
lineStyle: {
|
|
color: "rgba(8, 220, 224, 0.5)",
|
|
type: "dashed",
|
|
},
|
|
},
|
|
},
|
|
}
|
|
waterTrend.setOption(option)
|
|
}
|