代码提交_3_14_能耗日历
This commit is contained in:
parent
699d4d39fd
commit
587c923f08
|
|
@ -1,15 +1,51 @@
|
|||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { ref, onMounted, nextTick } from "vue";
|
||||
import { getEnergyCalendar } from "@/api/overview";
|
||||
import moment from "moment";
|
||||
// dom
|
||||
const calendar = ref();
|
||||
const calenderValue = ref(new Date());
|
||||
// 时间参数
|
||||
const calendarDate = ref();
|
||||
const calendarDate = ref(new Date());
|
||||
const toggleClick = () => {};
|
||||
const selectDate = (val) => {
|
||||
if (!calendar.value) return;
|
||||
calendar.value.selectDate(val);
|
||||
energyCalendar();
|
||||
};
|
||||
const dateValues = ref([
|
||||
{ time: "01", EH: "10" },
|
||||
{ time: "02", EH: "12" },
|
||||
]);
|
||||
//能耗日历
|
||||
function energyCalendar() {
|
||||
let date = moment(calendarDate.value).format("YYYY-MM");
|
||||
let month = moment(calendarDate.value).format("MM")
|
||||
getEnergyCalendar({ date })
|
||||
.then((res) => {
|
||||
if (res.code == 200) {
|
||||
dateValues.value = res.data;
|
||||
getDateValue(date,month)
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
function getDateValue(date,month) {
|
||||
let month1 = moment(calendarDate.value).format("MM")
|
||||
if (dateValues.value != undefined && month == month1) {
|
||||
const foundDate = dateValues.value.find((item) => item.time === date);
|
||||
if (foundDate) {
|
||||
return foundDate ? foundDate.EH : "";
|
||||
}
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
energyCalendar();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -19,47 +55,33 @@ const selectDate = (val) => {
|
|||
<img
|
||||
@click="selectDate('prev-year')"
|
||||
src="../../assets/images/overview/prevMonth.png"
|
||||
style="
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
cursor: pointer;
|
||||
"
|
||||
style="width: 1rem; height: 1rem; cursor: pointer"
|
||||
/>
|
||||
<img
|
||||
@click="selectDate('prev-month')"
|
||||
src="../../assets/images/overview/prevYear.png"
|
||||
style="
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
cursor: pointer;
|
||||
"
|
||||
style="width: 1rem; height: 1rem; cursor: pointer"
|
||||
/>
|
||||
|
||||
<span @click="toggleClick" style="font-size: 13px">{{ date }}</span>
|
||||
<img
|
||||
@click="selectDate('next-month')"
|
||||
src="../../assets/images/overview/nextYear.png"
|
||||
style="
|
||||
width:1rem;
|
||||
height: 1rem;
|
||||
cursor: pointer;
|
||||
"
|
||||
style="width: 1rem; height: 1rem; cursor: pointer"
|
||||
/>
|
||||
<img
|
||||
@click="selectDate('next-year')"
|
||||
src="../../assets/images/overview/nextMonth.png"
|
||||
style="
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
cursor: pointer;
|
||||
"
|
||||
style="width: 1rem; height: 1rem; cursor: pointer"
|
||||
/>
|
||||
</div>
|
||||
<div class="returningToThisMonth" @click="selectDate('today')"></div>
|
||||
</template>
|
||||
<template #date-cell="{ data }">
|
||||
<p class="day">{{ data.day.split("-").slice(1)[1] }}</p>
|
||||
<p class="value">{{ data.day.split("-").slice(1)[1] }}</p>
|
||||
<p class="value">
|
||||
{{ getDateValue(data.day.split("-").slice(1)[1],data.day.split("-").slice(1)[0])}}
|
||||
</p>
|
||||
</template>
|
||||
</el-calendar>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,15 @@
|
|||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
import { getTotalEnergy,getEnergyIndexing,getEnergyFlow,getSystemEnergy,getMultiRate,getElectricityRate } from "@/api/energyEfficiency";
|
||||
import {
|
||||
getTotalEnergy,
|
||||
getEnergyIndexing,
|
||||
getEnergyFlow,
|
||||
getSystemEnergy,
|
||||
getMultiRate,
|
||||
getElectricityRate,
|
||||
} from "@/api/energyEfficiency";
|
||||
import moment from "moment";
|
||||
// 各系统能耗概况
|
||||
const systemTab = [
|
||||
{ name: "空调" },
|
||||
|
|
@ -11,7 +19,7 @@ const systemTab = [
|
|||
{ name: "电梯" },
|
||||
];
|
||||
const systemTabIndex = ref(0);
|
||||
const systemTabName = ref('空调');
|
||||
const systemTabName = ref("空调");
|
||||
const systemLeftList = ref([
|
||||
{
|
||||
name: "今日用能峰值",
|
||||
|
|
@ -80,23 +88,23 @@ const systemRightList = ref([
|
|||
const totalEnergyDate = ref("month");
|
||||
const toggleTotalEnergy = (event) => {
|
||||
totalEnergyDate.value = event.srcElement.className;
|
||||
totalEnergyInterface()
|
||||
totalEnergyInterface();
|
||||
};
|
||||
// 能效对标时间点击时间
|
||||
const managementDate = ref("month");
|
||||
|
||||
const toggleManagement = (event) => {
|
||||
managementDate.value = event.srcElement.className;
|
||||
energyIndexingInterface()
|
||||
energyIndexingInterface();
|
||||
};
|
||||
// 复费率的时间点击事件
|
||||
const exhibitionLoadDate = ref("month");
|
||||
const toggleExhibitionLoad = (event) => {
|
||||
exhibitionLoadDate.value = event.srcElement.className;
|
||||
};
|
||||
const selectSystemTab = (item,index) => {
|
||||
const selectSystemTab = (item, index) => {
|
||||
systemTabIndex.value = index;
|
||||
systemTabName.value = item
|
||||
systemTabName.value = item;
|
||||
};
|
||||
|
||||
// 能耗总量echarts
|
||||
|
|
@ -149,7 +157,9 @@ const drawTotalChart = (data) => {
|
|||
// "11-13",
|
||||
// "11-14",
|
||||
// ],
|
||||
data:data.map(el=>{return el.time})
|
||||
data: data.map((el) => {
|
||||
return el.time;
|
||||
}),
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
|
|
@ -211,7 +221,9 @@ const drawTotalChart = (data) => {
|
|||
shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
|
||||
},
|
||||
// data: [100, 200, 300, 282, 283, 166, 100, 200, 300, 282, 283, 166, 283],
|
||||
data:data.map(el=>{return el.EH})
|
||||
data: data.map((el) => {
|
||||
return el.EH;
|
||||
}),
|
||||
},
|
||||
],
|
||||
};
|
||||
|
|
@ -269,7 +281,9 @@ const drawManagement = (data) => {
|
|||
axisTick: { show: false },
|
||||
boundaryGap: true,
|
||||
// data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
|
||||
data:data.map(el=>{return el.time})
|
||||
data: data.map((el) => {
|
||||
return el.time;
|
||||
}),
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
|
|
@ -352,7 +366,9 @@ const drawManagement = (data) => {
|
|||
shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
|
||||
},
|
||||
// data: [5, 7, 9, 6, 2, 5, 4],
|
||||
data:data.map(el=>{return el.EnergyIndexing})
|
||||
data: data.map((el) => {
|
||||
return el.EnergyIndexing;
|
||||
}),
|
||||
},
|
||||
],
|
||||
};
|
||||
|
|
@ -363,27 +379,27 @@ const drawManagement = (data) => {
|
|||
});
|
||||
};
|
||||
// 能效流向
|
||||
const drawEnergyFlow = () => {
|
||||
const drawEnergyFlow = (params) => {
|
||||
let myChart = echarts.init(document.getElementById("energyFlow"));
|
||||
let sourceData = [
|
||||
{
|
||||
name: "电",
|
||||
nameValue: 1562,
|
||||
nameValue: params[0].Amont,
|
||||
valueUnit: "kWh",
|
||||
},
|
||||
{
|
||||
name: "空调",
|
||||
nameValue: 562,
|
||||
nameValue: params[0].data[0].AirConditioner,
|
||||
valueUnit: "kWh",
|
||||
},
|
||||
{
|
||||
name: "照明",
|
||||
nameValue: 490,
|
||||
nameValue: params[0].data[0].Illumination,
|
||||
valueUnit: "kWh",
|
||||
},
|
||||
{
|
||||
name: "电梯",
|
||||
nameValue: 510,
|
||||
nameValue: params[0].data[0].Elevator,
|
||||
valueUnit: "kWh",
|
||||
},
|
||||
];
|
||||
|
|
@ -570,7 +586,9 @@ function getExhibitionLoad(data) {
|
|||
},
|
||||
},
|
||||
// data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
|
||||
data:data.map(el=>{return el.time})
|
||||
data: data.map((el) => {
|
||||
return el.time;
|
||||
}),
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
|
|
@ -642,7 +660,9 @@ function getExhibitionLoad(data) {
|
|||
]),
|
||||
},
|
||||
},
|
||||
data: data.map(el=>{return el.Needle}),
|
||||
data: data.map((el) => {
|
||||
return el.Needle;
|
||||
}),
|
||||
},
|
||||
{
|
||||
name: "峰",
|
||||
|
|
@ -676,7 +696,9 @@ function getExhibitionLoad(data) {
|
|||
]),
|
||||
},
|
||||
},
|
||||
data: data.map(el=>{return el.Peak}),
|
||||
data: data.map((el) => {
|
||||
return el.Peak;
|
||||
}),
|
||||
},
|
||||
{
|
||||
name: "平",
|
||||
|
|
@ -711,7 +733,9 @@ function getExhibitionLoad(data) {
|
|||
barBorderRadius: 0,
|
||||
},
|
||||
},
|
||||
data: data.map(el=>{return el.Flat}),
|
||||
data: data.map((el) => {
|
||||
return el.Flat;
|
||||
}),
|
||||
},
|
||||
{
|
||||
name: "谷",
|
||||
|
|
@ -746,7 +770,9 @@ function getExhibitionLoad(data) {
|
|||
barBorderRadius: 0,
|
||||
},
|
||||
},
|
||||
data: data.map(el=>{return el.Grain}),
|
||||
data: data.map((el) => {
|
||||
return el.Grain;
|
||||
}),
|
||||
},
|
||||
{
|
||||
name: "深",
|
||||
|
|
@ -781,7 +807,9 @@ function getExhibitionLoad(data) {
|
|||
barBorderRadius: 0,
|
||||
},
|
||||
},
|
||||
data: data.map(el=>{return el.Deep}),
|
||||
data: data.map((el) => {
|
||||
return el.Deep;
|
||||
}),
|
||||
},
|
||||
],
|
||||
};
|
||||
|
|
@ -837,7 +865,9 @@ const drawElectricityPrice = (data) => {
|
|||
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: data.map(el=>{return el.time}),
|
||||
data: data.map((el) => {
|
||||
return el.time;
|
||||
}),
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
|
|
@ -940,7 +970,9 @@ const drawElectricityPrice = (data) => {
|
|||
]),
|
||||
},
|
||||
},
|
||||
data: data.map(el=>{return el.Electricity}),
|
||||
data: data.map((el) => {
|
||||
return el.Electricity;
|
||||
}),
|
||||
},
|
||||
{
|
||||
name: "销售电价",
|
||||
|
|
@ -950,7 +982,9 @@ const drawElectricityPrice = (data) => {
|
|||
color: "rgba(1, 246, 139, 1)", // 设置折线颜色为黄色
|
||||
},
|
||||
symbol: "none",
|
||||
data:data.map(el=>{return el.Electrovalence}), // 折线图的数据
|
||||
data: data.map((el) => {
|
||||
return el.Electrovalence;
|
||||
}), // 折线图的数据
|
||||
},
|
||||
],
|
||||
};
|
||||
|
|
@ -962,68 +996,94 @@ const drawElectricityPrice = (data) => {
|
|||
};
|
||||
|
||||
// 时间选择器参数
|
||||
const dateValue = ref("");
|
||||
const dateValue = ref([
|
||||
moment().format("YYYY-MM-DD"),
|
||||
moment().add(1, "days").format("YYYY-MM-DD"),
|
||||
]);
|
||||
// 默认时间
|
||||
const defaultTime = ref([
|
||||
new Date(2000, 1, 1, 0, 0, 0),
|
||||
new Date(2000, 2, 1, 23, 59, 59),
|
||||
moment().format("YYYY-MM-DD"),
|
||||
moment().add(1, "days").format("YYYY-MM-DD"),
|
||||
]);
|
||||
|
||||
// 获取能耗总量数据
|
||||
const totalEnergyInterface = () =>{
|
||||
const totalEnergyInterface = () => {
|
||||
let params = {
|
||||
date:totalEnergyDate.value==='month'?'月':'日'
|
||||
}
|
||||
getTotalEnergy(params).then(res=>{
|
||||
drawTotalChart(res.data)
|
||||
})
|
||||
}
|
||||
date: totalEnergyDate.value === "month" ? "月" : "日",
|
||||
};
|
||||
getTotalEnergy(params).then((res) => {
|
||||
drawTotalChart(res.data);
|
||||
});
|
||||
};
|
||||
// 获取能效对标数据
|
||||
const energyIndexingInterface = () =>{
|
||||
const energyIndexingInterface = () => {
|
||||
let params = {
|
||||
date:managementDate.value==='month'?'月':'年'
|
||||
}
|
||||
getEnergyIndexing(params).then(res=>{
|
||||
drawManagement(res.data)
|
||||
})
|
||||
}
|
||||
date: managementDate.value === "month" ? "月" : "年",
|
||||
};
|
||||
getEnergyIndexing(params).then((res) => {
|
||||
drawManagement(res.data);
|
||||
});
|
||||
};
|
||||
// 获取各系统能耗数据
|
||||
const systemEnergyInterface = () =>{
|
||||
const systemEnergyInterface = () => {
|
||||
let params = {
|
||||
name:systemTabName.value
|
||||
}
|
||||
getSystemEnergy(params).then(res=>{
|
||||
systemLeftList.value[0].value = res.data[0].DayPeak
|
||||
systemLeftList.value[1].value = res.data[0].MonthPeak
|
||||
systemRightList.value.forEach((el,i)=>{
|
||||
el[0].value = res.data[0].data[i].This
|
||||
el[1].value = res.data[0].data[i].Last
|
||||
el[2].value = res.data[0].data[i].Year
|
||||
})
|
||||
|
||||
})
|
||||
}
|
||||
name: systemTabName.value,
|
||||
};
|
||||
getSystemEnergy(params).then((res) => {
|
||||
systemLeftList.value[0].value = res.data[0].DayPeak;
|
||||
systemLeftList.value[1].value = res.data[0].MonthPeak;
|
||||
systemRightList.value.forEach((el, i) => {
|
||||
el[0].value = res.data[0].data[i].This;
|
||||
el[1].value = res.data[0].data[i].Last;
|
||||
el[2].value = res.data[0].data[i].Year;
|
||||
});
|
||||
});
|
||||
};
|
||||
// 获取复费率数据
|
||||
const multiRateInterface = () =>{
|
||||
const multiRateInterface = () => {
|
||||
let params = {
|
||||
date:''
|
||||
date: "",
|
||||
};
|
||||
if (exhibitionLoadDate.value === "year") {
|
||||
params.date = "年";
|
||||
} else if (exhibitionLoadDate.value === "month") {
|
||||
params.date = "月";
|
||||
} else if (exhibitionLoadDate.value === "day") {
|
||||
params.date = "日";
|
||||
}
|
||||
if(exhibitionLoadDate.value==='year'){
|
||||
params.date = '年'
|
||||
}else if(exhibitionLoadDate.value==='month'){
|
||||
params.date = '月'
|
||||
}else if(exhibitionLoadDate.value==='day'){
|
||||
params.date = '日'
|
||||
}
|
||||
getMultiRate(params).then(res=>{
|
||||
getExhibitionLoad(res.data)
|
||||
})
|
||||
}
|
||||
getMultiRate(params).then((res) => {
|
||||
getExhibitionLoad(res.data);
|
||||
});
|
||||
};
|
||||
// 获取电费电价数据
|
||||
const electricityRateInterface = () =>{
|
||||
getElectricityRate().then(res=>{
|
||||
const electricityRateInterface = () => {
|
||||
getElectricityRate().then((res) => {
|
||||
drawElectricityPrice(res.data);
|
||||
});
|
||||
};
|
||||
//事件选择
|
||||
function handBlur(value) {
|
||||
defaultTime.value[0] = moment(value[0]).format("YYYY-MM-DD");
|
||||
defaultTime.value[1] = moment(value[1]).format("YYYY-MM-DD");
|
||||
energyFlow();
|
||||
}
|
||||
//能效流向
|
||||
function energyFlow() {
|
||||
let date = {
|
||||
sdate: defaultTime.value[0],
|
||||
edate: defaultTime.value[1],
|
||||
};
|
||||
getEnergyFlow(date)
|
||||
.then((res) => {
|
||||
if (res.code == 200) {
|
||||
drawEnergyFlow(res.data);
|
||||
} else {
|
||||
return flase;
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
// dom加载ie
|
||||
onMounted(() => {
|
||||
|
|
@ -1032,13 +1092,13 @@ onMounted(() => {
|
|||
// 定额管理
|
||||
energyIndexingInterface();
|
||||
// 能效流向
|
||||
drawEnergyFlow();
|
||||
energyFlow();
|
||||
// 各系统能耗概况
|
||||
systemEnergyInterface()
|
||||
systemEnergyInterface();
|
||||
// 电费电价
|
||||
electricityRateInterface()
|
||||
electricityRateInterface();
|
||||
//复费率
|
||||
multiRateInterface()
|
||||
multiRateInterface();
|
||||
// getExhibitionLoad();
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1097,6 +1157,7 @@ onMounted(() => {
|
|||
start-placeholder="开始时间"
|
||||
end-placeholder="结束时间"
|
||||
:default-time="defaultTime"
|
||||
@change="handBlur"
|
||||
/>
|
||||
</div>
|
||||
<div id="energyFlow"></div>
|
||||
|
|
@ -1112,7 +1173,7 @@ onMounted(() => {
|
|||
<li
|
||||
v-for="(item, index) in systemTab"
|
||||
:class="index === systemTabIndex ? 'tab-select' : ''"
|
||||
@click="selectSystemTab(item,index)"
|
||||
@click="selectSystemTab(item, index)"
|
||||
>
|
||||
<span>{{ item.name }}</span>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -40,7 +40,14 @@
|
|||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
import { getRealLoad,getDailyElectricity,getLoadClassification,getAirconditioningLoad,getDisplayLoad,getLoopRanking } from "@/api/energyMonitoring";
|
||||
import {
|
||||
getRealLoad,
|
||||
getDailyElectricity,
|
||||
getLoadClassification,
|
||||
getAirconditioningLoad,
|
||||
getDisplayLoad,
|
||||
getLoopRanking,
|
||||
} from "@/api/energyMonitoring";
|
||||
const getImageUrl = (name) => {
|
||||
return new URL(name, import.meta.url).href;
|
||||
};
|
||||
|
|
@ -81,7 +88,9 @@ const getRealTimeLoad = (data) => {
|
|||
axisTick: { show: false },
|
||||
boundaryGap: true,
|
||||
// data: ["08:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00"],
|
||||
data: data.map(el=>{return el.time}),
|
||||
data: data.map((el) => {
|
||||
return el.time;
|
||||
}),
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
|
|
@ -122,7 +131,9 @@ const getRealTimeLoad = (data) => {
|
|||
width: 2,
|
||||
},
|
||||
// data: [90, 70, 40, 70, 80, 65, 73], // 折线图的数据
|
||||
data: data.map(el=>{return el.P}),
|
||||
data: data.map((el) => {
|
||||
return el.P;
|
||||
}),
|
||||
},
|
||||
],
|
||||
};
|
||||
|
|
@ -167,7 +178,7 @@ const getDailyElectricityConsumption = (data) => {
|
|||
const xAxisPoint = shape.xAxisPoint;
|
||||
const c1 = [shape.x + 7, shape.y];
|
||||
const c2 = [xAxisPoint[0] + 7, xAxisPoint[1]];
|
||||
const c3 = [xAxisPoint[0] + 7 + 7, xAxisPoint[1] - 10];
|
||||
const c3 = [xAxisPoint[0] + 7 + 7, xAxisPoint[1] - 5];
|
||||
const c4 = [shape.x + 7 + 7, shape.y - 5];
|
||||
ctx
|
||||
.moveTo(c1[0], c1[1])
|
||||
|
|
@ -214,9 +225,13 @@ const getDailyElectricityConsumption = (data) => {
|
|||
// "16:00",
|
||||
// "17:00",
|
||||
// ];
|
||||
let xAxisData = data.map(el=>{return el.time})
|
||||
let xAxisData = data.map((el) => {
|
||||
return el.time;
|
||||
});
|
||||
// let seriesData = [100, 200, 300, 400, 200, 250, 360, 250, 340, 280];
|
||||
let seriesData = data.map(el=>{return el.EH})
|
||||
let seriesData = data.map((el) => {
|
||||
return el.EH;
|
||||
});
|
||||
// 绿色渐变
|
||||
// let colorArr = [["#12D5AF"], ["#0BC19D", "rgba(13,8,16,0)"], ["#68EFD4", "rgba(14,185,151,0)"]]
|
||||
// 蓝色渐变
|
||||
|
|
@ -457,7 +472,9 @@ const drawAirConditioningLoad = (data) => {
|
|||
axisTick: { show: false },
|
||||
boundaryGap: true,
|
||||
// data: ["09:00", "11:00", "13:00", "15:00", "17:00", "19:00"],
|
||||
data:data.map(el=>{return el.time})
|
||||
data: data.map((el) => {
|
||||
return el.time;
|
||||
}),
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
|
|
@ -517,7 +534,9 @@ const drawAirConditioningLoad = (data) => {
|
|||
shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
|
||||
},
|
||||
// data: [500, 800, 900, 1200, 1800, 1600],
|
||||
data:data.map(el=>{return el.P})
|
||||
data: data.map((el) => {
|
||||
return el.P;
|
||||
}),
|
||||
},
|
||||
],
|
||||
};
|
||||
|
|
@ -563,7 +582,9 @@ const drawExhibitionLoad = (data) => {
|
|||
axisTick: { show: false },
|
||||
boundaryGap: true,
|
||||
// data: ["09:00", "11:00", "13:00", "15:00", "17:00", "19:00"],
|
||||
data:data.map(el=>{return el.time})
|
||||
data: data.map((el) => {
|
||||
return el.time;
|
||||
}),
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
|
|
@ -623,7 +644,9 @@ const drawExhibitionLoad = (data) => {
|
|||
shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
|
||||
},
|
||||
// data: [500, 800, 900, 1200, 1800, 1600],
|
||||
data:data.map(el=>{return el.P})
|
||||
data: data.map((el) => {
|
||||
return el.P;
|
||||
}),
|
||||
},
|
||||
],
|
||||
};
|
||||
|
|
@ -634,7 +657,13 @@ const drawExhibitionLoad = (data) => {
|
|||
});
|
||||
};
|
||||
// 配电回路排名
|
||||
const drawRanking = () => {
|
||||
const drawRanking = (params) => {
|
||||
let xData = [];
|
||||
let yData = [];
|
||||
params.forEach((item) => {
|
||||
yData.push(item.Ranking + " " + item.DeviceName);
|
||||
xData.push(item.EH);
|
||||
});
|
||||
let myChart = echarts.init(document.getElementById("ranking"));
|
||||
let option = {
|
||||
grid: {
|
||||
|
|
@ -659,7 +688,7 @@ const drawRanking = () => {
|
|||
Number(
|
||||
(params[0].value.toFixed(4) / 10000).toFixed(2)
|
||||
).toLocaleString() +
|
||||
" 万元<br/>"
|
||||
"kWh<br/>"
|
||||
);
|
||||
},
|
||||
},
|
||||
|
|
@ -667,6 +696,17 @@ const drawRanking = () => {
|
|||
show: false,
|
||||
type: "value",
|
||||
},
|
||||
// dataZoom: [
|
||||
// {
|
||||
// type: "inside", // 支持内部鼠标滚动平移
|
||||
// start: 25,
|
||||
// end: 100,
|
||||
// yAxisIndex: 0,
|
||||
// zoomOnMouseWheel: false, // 关闭滚轮缩放
|
||||
// moveOnMouseWheel: true, // 开启滚轮平移
|
||||
// moveOnMouseMove: false, // 鼠标移动能触发数据窗口平移
|
||||
// },
|
||||
// ],
|
||||
yAxis: [
|
||||
{
|
||||
type: "category",
|
||||
|
|
@ -681,7 +721,7 @@ const drawRanking = () => {
|
|||
fontSize: "14",
|
||||
},
|
||||
formatter: function (value, index) {
|
||||
return "{a|TOP " + (index + 1) + "}" + "{b|" + value + "}";
|
||||
return "{a|" + value + "}";
|
||||
},
|
||||
rich: {
|
||||
a: {
|
||||
|
|
@ -703,8 +743,10 @@ const drawRanking = () => {
|
|||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
|
||||
data: ["空调系统", "照明系统", "消防系统", "电梯系统", "展陈系统"],
|
||||
// axisPointer: {
|
||||
// show: true,
|
||||
// },
|
||||
data: yData.slice(0, 5),
|
||||
},
|
||||
{
|
||||
type: "category",
|
||||
|
|
@ -732,12 +774,12 @@ const drawRanking = () => {
|
|||
},
|
||||
},
|
||||
},
|
||||
data: [50000000, 22000000, 10000000, 5000000, 1],
|
||||
data: xData.slice(0, 5),
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "金额",
|
||||
name: "用电量",
|
||||
type: "bar",
|
||||
zlevel: 1,
|
||||
itemStyle: {
|
||||
|
|
@ -753,7 +795,7 @@ const drawRanking = () => {
|
|||
]),
|
||||
},
|
||||
barWidth: 8,
|
||||
data: [50000000, 22000000, 10000000, 5000000, 200],
|
||||
data: xData.slice(0, 5),
|
||||
},
|
||||
{
|
||||
name: "背景",
|
||||
|
|
@ -789,13 +831,13 @@ const drawLoadClassification = (item) => {
|
|||
// value: 50,
|
||||
// },
|
||||
// ];
|
||||
console.log(item[0].Amount,'xxx');
|
||||
var trafficWay = item[0].list.map(el=>{
|
||||
console.log(item[0].Amount, "xxx");
|
||||
var trafficWay = item[0].list.map((el) => {
|
||||
return {
|
||||
name:el.type,
|
||||
value:el.P
|
||||
}
|
||||
})
|
||||
name: el.type,
|
||||
value: el.P,
|
||||
};
|
||||
});
|
||||
|
||||
var total = 0;
|
||||
for (var i = 0; i < trafficWay.length; i++) {
|
||||
|
|
@ -985,56 +1027,56 @@ const drawLoadClassification = (item) => {
|
|||
|
||||
//接口
|
||||
// 获取实时负荷数据
|
||||
const realTimeLoadInterface = () =>{
|
||||
getRealLoad().then(res=>{
|
||||
getRealTimeLoad(res.data)
|
||||
})
|
||||
}
|
||||
const realTimeLoadInterface = () => {
|
||||
getRealLoad().then((res) => {
|
||||
getRealTimeLoad(res.data);
|
||||
});
|
||||
};
|
||||
// 获取当日累计用电量数据
|
||||
const dailyElectricityInterface = () =>{
|
||||
getDailyElectricity().then(res=>{
|
||||
getDailyElectricityConsumption(res.data)
|
||||
})
|
||||
}
|
||||
const dailyElectricityInterface = () => {
|
||||
getDailyElectricity().then((res) => {
|
||||
getDailyElectricityConsumption(res.data);
|
||||
});
|
||||
};
|
||||
// 获取负荷分类数据
|
||||
const loadClassificationInterface = () =>{
|
||||
getLoadClassification().then(res=>{
|
||||
drawLoadClassification(res.data)
|
||||
})
|
||||
}
|
||||
const loadClassificationInterface = () => {
|
||||
getLoadClassification().then((res) => {
|
||||
drawLoadClassification(res.data);
|
||||
});
|
||||
};
|
||||
// 获取空调负荷数据
|
||||
const airconditioningLoadInteface = () =>{
|
||||
getAirconditioningLoad().then(res=>{
|
||||
drawAirConditioningLoad(res.data)
|
||||
})
|
||||
}
|
||||
const airconditioningLoadInteface = () => {
|
||||
getAirconditioningLoad().then((res) => {
|
||||
drawAirConditioningLoad(res.data);
|
||||
});
|
||||
};
|
||||
// 获取展陈负荷数据
|
||||
const displayLoadInterface = () =>{
|
||||
getDisplayLoad().then(res=>{
|
||||
drawExhibitionLoad(res.data)
|
||||
})
|
||||
}
|
||||
const displayLoadInterface = () => {
|
||||
getDisplayLoad().then((res) => {
|
||||
drawExhibitionLoad(res.data);
|
||||
});
|
||||
};
|
||||
// 获取配电回路数据
|
||||
const loopRankingInterface = () =>{
|
||||
getLoopRanking().then(res=>{
|
||||
const loopRankingInterface = () => {
|
||||
getLoopRanking().then((res) => {
|
||||
drawRanking(res.data);
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
//加载完dom执行
|
||||
onMounted(() => {
|
||||
// 实时负荷接口
|
||||
realTimeLoadInterface()
|
||||
realTimeLoadInterface();
|
||||
//当日累计用电量接口
|
||||
dailyElectricityInterface()
|
||||
dailyElectricityInterface();
|
||||
// 空调负荷接口
|
||||
airconditioningLoadInteface();
|
||||
// 展陈负荷接口
|
||||
displayLoadInterface()
|
||||
displayLoadInterface();
|
||||
// drawExhibitionLoad();
|
||||
// 配电回路排名
|
||||
loopRankingInterface()
|
||||
loopRankingInterface();
|
||||
//负荷分类接口
|
||||
loadClassificationInterface()
|
||||
loadClassificationInterface();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,14 @@
|
|||
import calendar from "@/components/calendar/index.vue";
|
||||
import * as echarts from "echarts";
|
||||
import { onMounted, ref } from "vue";
|
||||
import {getPower,getRealtimeLoad,getCarbonEmission,getEnergyCalendar,getMeteorologicalStation,getSystemRanking} from '@/api/overview'
|
||||
import {
|
||||
getPower,
|
||||
getRealtimeLoad,
|
||||
getCarbonEmission,
|
||||
getEnergyCalendar,
|
||||
getMeteorologicalStation,
|
||||
getSystemRanking,
|
||||
} from "@/api/overview";
|
||||
import getPath from "@/utils/getPath.js";
|
||||
// 实时负荷
|
||||
const realTimeLoad = ref([
|
||||
|
|
@ -24,18 +31,18 @@ const weatherStation = ref([
|
|||
// }
|
||||
|
||||
// 用电量列表
|
||||
const powerList = ref([])
|
||||
const powerList = ref([]);
|
||||
onMounted(() => {
|
||||
// 用电量接口
|
||||
powerInterface()
|
||||
powerInterface();
|
||||
// 实时负荷接口
|
||||
realtimeLoadInterface()
|
||||
realtimeLoadInterface();
|
||||
// 气象站接口
|
||||
stationInterface()
|
||||
stationInterface();
|
||||
// 系统用电排名接口
|
||||
systemRankingInterface()
|
||||
systemRankingInterface();
|
||||
// 碳排放的接口
|
||||
CarbonEmissionInterface()
|
||||
CarbonEmissionInterface();
|
||||
//碳排放
|
||||
// getCarbonEmissionEcahrts();
|
||||
});
|
||||
|
|
@ -43,16 +50,15 @@ onMounted(() => {
|
|||
const powerDate = ref("year");
|
||||
|
||||
const togglePower = (event) => {
|
||||
|
||||
powerDate.value = event.srcElement.className;
|
||||
powerInterface()
|
||||
powerInterface();
|
||||
};
|
||||
// 碳排放时间切换
|
||||
const carbonEmissionDate = ref("month");
|
||||
const toggleCarbonEmission = (event) => {
|
||||
carbonEmissionDate.value = event.srcElement.className;
|
||||
// 碳排放接口
|
||||
CarbonEmissionInterface()
|
||||
CarbonEmissionInterface();
|
||||
};
|
||||
const drawPowerEcharts = (item) => {
|
||||
let myChart = echarts.init(document.getElementById("power"));
|
||||
|
|
@ -89,9 +95,9 @@ const drawPowerEcharts = (item) => {
|
|||
axisTick: { show: false },
|
||||
boundaryGap: true,
|
||||
// data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
|
||||
data:item.map(el=>{
|
||||
return el.time
|
||||
})
|
||||
data: item.map((el) => {
|
||||
return el.time;
|
||||
}),
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
|
|
@ -154,9 +160,9 @@ const drawPowerEcharts = (item) => {
|
|||
},
|
||||
},
|
||||
// data: [110, 200, 300, 325, 400, 322, 250],
|
||||
data:item.map(el=>{
|
||||
return el.EH
|
||||
})
|
||||
data: item.map((el) => {
|
||||
return el.EH;
|
||||
}),
|
||||
},
|
||||
],
|
||||
};
|
||||
|
|
@ -223,9 +229,9 @@ const drawRankEcharts = (data) => {
|
|||
show: false,
|
||||
},
|
||||
// data: ["空调系统", "照明系统", "消防系统", "电梯系统", "展陈系统"],
|
||||
data:data.map(el=>{
|
||||
return el.name
|
||||
})
|
||||
data: data.map((el) => {
|
||||
return el.name;
|
||||
}),
|
||||
},
|
||||
{
|
||||
type: "category",
|
||||
|
|
@ -254,9 +260,9 @@ const drawRankEcharts = (data) => {
|
|||
},
|
||||
},
|
||||
// data: [50000000, 22000000, 10000000, 5000000, 1],
|
||||
data:data.map(el=>{
|
||||
return el.EH
|
||||
})
|
||||
data: data.map((el) => {
|
||||
return el.EH;
|
||||
}),
|
||||
},
|
||||
],
|
||||
series: [
|
||||
|
|
@ -278,9 +284,9 @@ const drawRankEcharts = (data) => {
|
|||
},
|
||||
barWidth: 8,
|
||||
// data: [50000000, 22000000, 10000000, 5000000, 200],
|
||||
data:data.map(el=>{
|
||||
return el.EH
|
||||
})
|
||||
data: data.map((el) => {
|
||||
return el.EH;
|
||||
}),
|
||||
},
|
||||
{
|
||||
name: "背景",
|
||||
|
|
@ -335,7 +341,7 @@ function getCarbonEmissionEcahrts(data) {
|
|||
const xAxisPoint = shape.xAxisPoint;
|
||||
const c1 = [shape.x + 7, shape.y];
|
||||
const c2 = [xAxisPoint[0] + 7, xAxisPoint[1]];
|
||||
const c3 = [xAxisPoint[0] + 7 + 7, xAxisPoint[1] - 10];
|
||||
const c3 = [xAxisPoint[0] + 7 + 7, xAxisPoint[1] - 5];
|
||||
const c4 = [shape.x + 7 + 7, shape.y - 5];
|
||||
ctx
|
||||
.moveTo(c1[0], c1[1])
|
||||
|
|
@ -371,9 +377,13 @@ function getCarbonEmissionEcahrts(data) {
|
|||
echarts.graphic.registerShape("CubeRight", CubeRight);
|
||||
echarts.graphic.registerShape("CubeTop", CubeTop);
|
||||
// let xAxisData = ["1月", "2月", "3月", "4月", "5月", "6月", "7月"];
|
||||
let xAxisData = data.map(el=>{return el.time})
|
||||
let xAxisData = data.map((el) => {
|
||||
return el.time;
|
||||
});
|
||||
// let seriesData = [100, 200, 300, 400, 200, 250];
|
||||
let seriesData = data.map(el=>{return el.CarbonEmission})
|
||||
let seriesData = data.map((el) => {
|
||||
return el.CarbonEmission;
|
||||
});
|
||||
// 绿色渐变
|
||||
// let colorArr = [["#12D5AF"], ["#0BC19D", "rgba(13,8,16,0)"], ["#68EFD4", "rgba(14,185,151,0)"]]
|
||||
// 蓝色渐变
|
||||
|
|
@ -576,56 +586,57 @@ function getCarbonEmissionEcahrts(data) {
|
|||
});
|
||||
}
|
||||
// 获取用电量
|
||||
const powerInterface=()=>{
|
||||
const powerInterface = () => {
|
||||
let params = {
|
||||
date:powerDate.value==='year'?'年':'月'
|
||||
}
|
||||
getPower(params).then(res=>{
|
||||
date: powerDate.value === "year" ? "年" : "月",
|
||||
};
|
||||
getPower(params).then((res) => {
|
||||
// 渲染用电量图表
|
||||
drawPowerEcharts(res.data);
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
// 获取实时负荷
|
||||
const realtimeLoadInterface = () =>{
|
||||
getRealtimeLoad().then(res=>{
|
||||
realTimeLoad.value.forEach(item=>{
|
||||
if(item.name==='配电室数量'){
|
||||
item.value = res.data[0].Amount
|
||||
}else if(item.name==='实时负荷'){
|
||||
item.value = res.data[0].P
|
||||
}else if(item.name==='今日电量'){
|
||||
item.value = res.data[0].EH
|
||||
const realtimeLoadInterface = () => {
|
||||
getRealtimeLoad().then((res) => {
|
||||
realTimeLoad.value.forEach((item) => {
|
||||
if (item.name === "配电室数量") {
|
||||
item.value = res.data[0].Amount;
|
||||
} else if (item.name === "实时负荷") {
|
||||
item.value = res.data[0].P;
|
||||
} else if (item.name === "今日电量") {
|
||||
item.value = res.data[0].EH;
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
// 获取气象站数据
|
||||
const stationInterface = () =>{
|
||||
getMeteorologicalStation().then(res=>{
|
||||
weatherStation.value.forEach(item=>{
|
||||
res.data.forEach(el=>{
|
||||
if(el.name.indexOf(item.name)!==-1){
|
||||
item.value = el.value
|
||||
const stationInterface = () => {
|
||||
getMeteorologicalStation().then((res) => {
|
||||
weatherStation.value.forEach((item) => {
|
||||
res.data.forEach((el) => {
|
||||
if (el.name.indexOf(item.name) !== -1) {
|
||||
item.value = el.value;
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
};
|
||||
// 系统用电量排名
|
||||
const systemRankingInterface = () =>{
|
||||
getSystemRanking().then(res=>{
|
||||
const systemRankingInterface = () => {
|
||||
getSystemRanking().then((res) => {
|
||||
// 系统用电排名chart图
|
||||
drawRankEcharts(res.data)
|
||||
})
|
||||
}
|
||||
const CarbonEmissionInterface = () =>{
|
||||
drawRankEcharts(res.data);
|
||||
});
|
||||
};
|
||||
const CarbonEmissionInterface = () => {
|
||||
let params = {
|
||||
date:carbonEmissionDate.value === 'month'?'月':'年'
|
||||
}
|
||||
getCarbonEmission(params).then(res=>{
|
||||
getCarbonEmissionEcahrts(res.data)
|
||||
})
|
||||
}
|
||||
date: carbonEmissionDate.value === "month" ? "月" : "年",
|
||||
};
|
||||
getCarbonEmission(params).then((res) => {
|
||||
getCarbonEmissionEcahrts(res.data);
|
||||
});
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
|||
Loading…
Reference in New Issue