luoshiwen
/
long_IslandOcean
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

代码提交_3_14_能耗日历

This commit is contained in:
lixiaobang 2024-03-14 15:48:26 +08:00
parent 699d4d39fd
commit 587c923f08
4 changed files with 366 additions and 230 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
src/components/calendar/index.vue
View File

@ -1,65 +1,87 @@
<script setup> <script setup>
import { ref } from "vue"; import { ref, onMounted, nextTick } from "vue";
import { getEnergyCalendar } from "@/api/overview";
import moment from "moment";
// dom // dom
const calendar = ref(); const calendar = ref();
const calenderValue = ref(new Date()); const calenderValue = ref(new Date());
// 时间参数 // 时间参数
const calendarDate = ref(); const calendarDate = ref(new Date());
const toggleClick = () => {}; const toggleClick = () => {};
const selectDate = (val) => { const selectDate = (val) => {
if (!calendar.value) return; if (!calendar.value) return;
calendar.value.selectDate(val); 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> </script>
<template> <template>
<el-calendar ref="calendar" v-model="calendarDate" :row="5"> <el-calendar ref="calendar" v-model="calendarDate" :row="5">
<template #header="{ date }"> <template #header="{ date }">
<div> <div>
<img <img
@click="selectDate('prev-year')" @click="selectDate('prev-year')"
src="../../assets/images/overview/prevMonth.png" src="../../assets/images/overview/prevMonth.png"
style=" style="width: 1rem; height: 1rem; cursor: pointer"
width: 1rem;
height: 1rem;
cursor: pointer;
"
/> />
<img <img
@click="selectDate('prev-month')" @click="selectDate('prev-month')"
src="../../assets/images/overview/prevYear.png" src="../../assets/images/overview/prevYear.png"
style=" style="width: 1rem; height: 1rem; cursor: pointer"
width: 1rem;
height: 1rem;
cursor: pointer;
"
/> />
<span @click="toggleClick" style="font-size: 13px">{{ date }}</span> <span @click="toggleClick" style="font-size: 13px">{{ date }}</span>
<img <img
@click="selectDate('next-month')" @click="selectDate('next-month')"
src="../../assets/images/overview/nextYear.png" src="../../assets/images/overview/nextYear.png"
style=" style="width: 1rem; height: 1rem; cursor: pointer"
width:1rem;
height: 1rem;
cursor: pointer;
"
/> />
<img <img
@click="selectDate('next-year')" @click="selectDate('next-year')"
src="../../assets/images/overview/nextMonth.png" src="../../assets/images/overview/nextMonth.png"
style=" style="width: 1rem; height: 1rem; cursor: pointer"
width: 1rem;
height: 1rem;
cursor: pointer;
"
/> />
</div> </div>
<div class="returningToThisMonth" @click="selectDate('today')"></div> <div class="returningToThisMonth" @click="selectDate('today')"></div>
</template> </template>
<template #date-cell="{ data }"> <template #date-cell="{ data }">
<p class="day">{{ data.day.split("-").slice(1)[1] }}</p> <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> </template>
</el-calendar> </el-calendar>
</template> </template>

215
src/views/energyEfficiency/index.vue
View File

@ -1,7 +1,15 @@
<script setup> <script setup>
import { ref, onMounted } from "vue"; import { ref, onMounted } from "vue";
import * as echarts from "echarts"; 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 = [ const systemTab = [
{ name: "空调" }, { name: "空调" },
@ -11,7 +19,7 @@ const systemTab = [
{ name: "电梯" }, { name: "电梯" },
]; ];
const systemTabIndex = ref(0); const systemTabIndex = ref(0);
const systemTabName = ref('空调'); const systemTabName = ref("空调");
const systemLeftList = ref([ const systemLeftList = ref([
{ {
name: "今日用能峰值", name: "今日用能峰值",
@ -80,23 +88,23 @@ const systemRightList = ref([
const totalEnergyDate = ref("month"); const totalEnergyDate = ref("month");
const toggleTotalEnergy = (event) => { const toggleTotalEnergy = (event) => {
totalEnergyDate.value = event.srcElement.className; totalEnergyDate.value = event.srcElement.className;
totalEnergyInterface() totalEnergyInterface();
}; };
// 能效对标时间点击时间 // 能效对标时间点击时间
const managementDate = ref("month"); const managementDate = ref("month");
const toggleManagement = (event) => { const toggleManagement = (event) => {
managementDate.value = event.srcElement.className; managementDate.value = event.srcElement.className;
energyIndexingInterface() energyIndexingInterface();
}; };
// 复费率的时间点击事件 // 复费率的时间点击事件
const exhibitionLoadDate = ref("month"); const exhibitionLoadDate = ref("month");
const toggleExhibitionLoad = (event) => { const toggleExhibitionLoad = (event) => {
exhibitionLoadDate.value = event.srcElement.className; exhibitionLoadDate.value = event.srcElement.className;
}; };
const selectSystemTab = (item,index) => { const selectSystemTab = (item, index) => {
systemTabIndex.value = index; systemTabIndex.value = index;
systemTabName.value = item systemTabName.value = item;
}; };
// 能耗总量echarts // 能耗总量echarts
@ -149,7 +157,9 @@ const drawTotalChart = (data) => {
// "11-13", // "11-13",
// "11-14", // "11-14",
// ], // ],
data:data.map(el=>{return el.time}) data: data.map((el) => {
return el.time;
}),
}, },
], ],
yAxis: [ yAxis: [
@ -211,7 +221,9 @@ const drawTotalChart = (data) => {
shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。 shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
}, },
// data: [100, 200, 300, 282, 283, 166, 100, 200, 300, 282, 283, 166, 283], // 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 }, axisTick: { show: false },
boundaryGap: true, boundaryGap: true,
// data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"], // data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
data:data.map(el=>{return el.time}) data: data.map((el) => {
return el.time;
}),
}, },
], ],
yAxis: [ yAxis: [
@ -352,7 +366,9 @@ const drawManagement = (data) => {
shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。 shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
}, },
// data: [5, 7, 9, 6, 2, 5, 4], // 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 myChart = echarts.init(document.getElementById("energyFlow"));
let sourceData = [ let sourceData = [
{ {
name: "电", name: "电",
nameValue: 1562, nameValue: params[0].Amont,
valueUnit: "kWh", valueUnit: "kWh",
}, },
{ {
name: "空调", name: "空调",
nameValue: 562, nameValue: params[0].data[0].AirConditioner,
valueUnit: "kWh", valueUnit: "kWh",
}, },
{ {
name: "照明", name: "照明",
nameValue: 490, nameValue: params[0].data[0].Illumination,
valueUnit: "kWh", valueUnit: "kWh",
}, },
{ {
name: "电梯", name: "电梯",
nameValue: 510, nameValue: params[0].data[0].Elevator,
valueUnit: "kWh", valueUnit: "kWh",
}, },
]; ];
@ -570,7 +586,9 @@ function getExhibitionLoad(data) {
}, },
}, },
// data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"], // data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
data:data.map(el=>{return el.time}) data: data.map((el) => {
return el.time;
}),
}, },
], ],
yAxis: [ yAxis: [
@ -642,7 +660,9 @@ function getExhibitionLoad(data) {
]), ]),
}, },
}, },
data: data.map(el=>{return el.Needle}), data: data.map((el) => {
return el.Needle;
}),
}, },
{ {
name: "峰", name: "峰",
@ -676,7 +696,9 @@ function getExhibitionLoad(data) {
]), ]),
}, },
}, },
data: data.map(el=>{return el.Peak}), data: data.map((el) => {
return el.Peak;
}),
}, },
{ {
name: "平", name: "平",
@ -711,7 +733,9 @@ function getExhibitionLoad(data) {
barBorderRadius: 0, barBorderRadius: 0,
}, },
}, },
data: data.map(el=>{return el.Flat}), data: data.map((el) => {
return el.Flat;
}),
}, },
{ {
name: "谷", name: "谷",
@ -746,7 +770,9 @@ function getExhibitionLoad(data) {
barBorderRadius: 0, barBorderRadius: 0,
}, },
}, },
data: data.map(el=>{return el.Grain}), data: data.map((el) => {
return el.Grain;
}),
}, },
{ {
name: "深", name: "深",
@ -781,7 +807,9 @@ function getExhibitionLoad(data) {
barBorderRadius: 0, barBorderRadius: 0,
}, },
}, },
data: data.map(el=>{return el.Deep}), data: data.map((el) => {
return el.Deep;
}),
}, },
], ],
}; };
@ -837,7 +865,9 @@ const drawElectricityPrice = (data) => {
xAxis: { xAxis: {
type: "category", type: "category",
data: data.map(el=>{return el.time}), data: data.map((el) => {
return el.time;
}),
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
@ -940,7 +970,9 @@ const drawElectricityPrice = (data) => {
]), ]),
}, },
}, },
data: data.map(el=>{return el.Electricity}), data: data.map((el) => {
return el.Electricity;
}),
}, },
{ {
name: "销售电价", name: "销售电价",
@ -950,7 +982,9 @@ const drawElectricityPrice = (data) => {
color: "rgba(1, 246, 139, 1)", // 设置折线颜色为黄色 color: "rgba(1, 246, 139, 1)", // 设置折线颜色为黄色
}, },
symbol: "none", symbol: "none",
data:data.map(el=>{return el.Electrovalence}), // 折线图的数据 data: data.map((el) => {
return el.Electrovalence;
}), // 折线图的数据
}, },
], ],
}; };
@ -962,83 +996,109 @@ 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([ const defaultTime = ref([
new Date(2000, 1, 1, 0, 0, 0), moment().format("YYYY-MM-DD"),
new Date(2000, 2, 1, 23, 59, 59), moment().add(1, "days").format("YYYY-MM-DD"),
]); ]);
// 获取能耗总量数据 // 获取能耗总量数据
const totalEnergyInterface = () =>{ const totalEnergyInterface = () => {
let params = { let params = {
date:totalEnergyDate.value==='month'?'月':'日' date: totalEnergyDate.value === "month" ? "月" : "日",
} };
getTotalEnergy(params).then(res=>{ getTotalEnergy(params).then((res) => {
drawTotalChart(res.data) drawTotalChart(res.data);
}) });
} };
// 获取能效对标数据 // 获取能效对标数据
const energyIndexingInterface = () =>{ const energyIndexingInterface = () => {
let params = { let params = {
date:managementDate.value==='month'?'月':'年' date: managementDate.value === "month" ? "月" : "年",
} };
getEnergyIndexing(params).then(res=>{ getEnergyIndexing(params).then((res) => {
drawManagement(res.data) drawManagement(res.data);
}) });
} };
// 获取各系统能耗数据 // 获取各系统能耗数据
const systemEnergyInterface = () =>{ const systemEnergyInterface = () => {
let params = { let params = {
name:systemTabName.value name: systemTabName.value,
} };
getSystemEnergy(params).then(res=>{ getSystemEnergy(params).then((res) => {
systemLeftList.value[0].value = res.data[0].DayPeak systemLeftList.value[0].value = res.data[0].DayPeak;
systemLeftList.value[1].value = res.data[0].MonthPeak systemLeftList.value[1].value = res.data[0].MonthPeak;
systemRightList.value.forEach((el,i)=>{ systemRightList.value.forEach((el, i) => {
el[0].value = res.data[0].data[i].This el[0].value = res.data[0].data[i].This;
el[1].value = res.data[0].data[i].Last el[1].value = res.data[0].data[i].Last;
el[2].value = res.data[0].data[i].Year el[2].value = res.data[0].data[i].Year;
}) });
});
}) };
}
// 获取复费率数据 // 获取复费率数据
const multiRateInterface = () =>{ const multiRateInterface = () => {
let params = { 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'){ getMultiRate(params).then((res) => {
params.date = '年' getExhibitionLoad(res.data);
}else if(exhibitionLoadDate.value==='month'){ });
params.date = '月' };
}else if(exhibitionLoadDate.value==='day'){
params.date = '日'
}
getMultiRate(params).then(res=>{
getExhibitionLoad(res.data)
})
}
// 获取电费电价数据 // 获取电费电价数据
const electricityRateInterface = () =>{ const electricityRateInterface = () => {
getElectricityRate().then(res=>{ getElectricityRate().then((res) => {
drawElectricityPrice(res.data); 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();
} }
// dom加载ie //能效流向
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(() => { onMounted(() => {
// 能耗总量 // 能耗总量
totalEnergyInterface(); totalEnergyInterface();
// 定额管理 // 定额管理
energyIndexingInterface(); energyIndexingInterface();
// 能效流向 // 能效流向
drawEnergyFlow(); energyFlow();
// 各系统能耗概况 // 各系统能耗概况
systemEnergyInterface() systemEnergyInterface();
// 电费电价 // 电费电价
electricityRateInterface() electricityRateInterface();
//复费率 //复费率
multiRateInterface() multiRateInterface();
// getExhibitionLoad(); // getExhibitionLoad();
}); });
</script> </script>
@ -1097,6 +1157,7 @@ onMounted(() => {
start-placeholder="开始时间" start-placeholder="开始时间"
end-placeholder="结束时间" end-placeholder="结束时间"
:default-time="defaultTime" :default-time="defaultTime"
@change="handBlur"
/> />
</div> </div>
<div id="energyFlow"></div> <div id="energyFlow"></div>
@ -1112,7 +1173,7 @@ onMounted(() => {
<li <li
v-for="(item, index) in systemTab" v-for="(item, index) in systemTab"
:class="index === systemTabIndex ? 'tab-select' : ''" :class="index === systemTabIndex ? 'tab-select' : ''"
@click="selectSystemTab(item,index)" @click="selectSystemTab(item, index)"
> >
<span>{{ item.name }}</span> <span>{{ item.name }}</span>
</li> </li>

160
src/views/energyMonitoring/index.vue
View File

@ -40,7 +40,14 @@
<script setup> <script setup>
import { ref, onMounted } from "vue"; import { ref, onMounted } from "vue";
import * as echarts from "echarts"; 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) => { const getImageUrl = (name) => {
return new URL(name, import.meta.url).href; return new URL(name, import.meta.url).href;
}; };
@ -81,7 +88,9 @@ const getRealTimeLoad = (data) => {
axisTick: { show: false }, axisTick: { show: false },
boundaryGap: true, boundaryGap: true,
// data: ["08:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00"], // 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: [ yAxis: [
@ -122,7 +131,9 @@ const getRealTimeLoad = (data) => {
width: 2, width: 2,
}, },
// data: [90, 70, 40, 70, 80, 65, 73], // 折线图的数据 // 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 xAxisPoint = shape.xAxisPoint;
const c1 = [shape.x + 7, shape.y]; const c1 = [shape.x + 7, shape.y];
const c2 = [xAxisPoint[0] + 7, xAxisPoint[1]]; 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]; const c4 = [shape.x + 7 + 7, shape.y - 5];
ctx ctx
.moveTo(c1[0], c1[1]) .moveTo(c1[0], c1[1])
@ -214,9 +225,13 @@ const getDailyElectricityConsumption = (data) => {
// "16:00", // "16:00",
// "17: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 = [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)"]] // 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 }, axisTick: { show: false },
boundaryGap: true, boundaryGap: true,
// data: ["09:00", "11:00", "13:00", "15:00", "17:00", "19:00"], // 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: [ yAxis: [
@ -517,7 +534,9 @@ const drawAirConditioningLoad = (data) => {
shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。 shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
}, },
// data: [500, 800, 900, 1200, 1800, 1600], // 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 }, axisTick: { show: false },
boundaryGap: true, boundaryGap: true,
// data: ["09:00", "11:00", "13:00", "15:00", "17:00", "19:00"], // 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: [ yAxis: [
@ -623,7 +644,9 @@ const drawExhibitionLoad = (data) => {
shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。 shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
}, },
// data: [500, 800, 900, 1200, 1800, 1600], // 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 myChart = echarts.init(document.getElementById("ranking"));
let option = { let option = {
grid: { grid: {
@ -659,7 +688,7 @@ const drawRanking = () => {
Number( Number(
(params[0].value.toFixed(4) / 10000).toFixed(2) (params[0].value.toFixed(4) / 10000).toFixed(2)
).toLocaleString() + ).toLocaleString() +
" 万元<br/>" "kWh<br/>"
); );
}, },
}, },
@ -667,6 +696,17 @@ const drawRanking = () => {
show: false, show: false,
type: "value", type: "value",
}, },
// dataZoom: [
// {
// type: "inside", // 支持内部鼠标滚动平移
// start: 25,
// end: 100,
// yAxisIndex: 0,
// zoomOnMouseWheel: false, // 关闭滚轮缩放
// moveOnMouseWheel: true, // 开启滚轮平移
// moveOnMouseMove: false, // 鼠标移动能触发数据窗口平移
// },
// ],
yAxis: [ yAxis: [
{ {
type: "category", type: "category",
@ -681,7 +721,7 @@ const drawRanking = () => {
fontSize: "14", fontSize: "14",
}, },
formatter: function (value, index) { formatter: function (value, index) {
return "{a|TOP " + (index + 1) + "}" + "{b|" + value + "}"; return "{a|" + value + "}";
}, },
rich: { rich: {
a: { a: {
@ -703,8 +743,10 @@ const drawRanking = () => {
axisLine: { axisLine: {
show: false, show: false,
}, },
// axisPointer: {
data: ["空调系统", "照明系统", "消防系统", "电梯系统", "展陈系统"], // show: true,
// },
data: yData.slice(0, 5),
}, },
{ {
type: "category", type: "category",
@ -732,12 +774,12 @@ const drawRanking = () => {
}, },
}, },
}, },
data: [50000000, 22000000, 10000000, 5000000, 1], data: xData.slice(0, 5),
}, },
], ],
series: [ series: [
{ {
name: "金额", name: "用电量",
type: "bar", type: "bar",
zlevel: 1, zlevel: 1,
itemStyle: { itemStyle: {
@ -753,7 +795,7 @@ const drawRanking = () => {
]), ]),
}, },
barWidth: 8, barWidth: 8,
data: [50000000, 22000000, 10000000, 5000000, 200], data: xData.slice(0, 5),
}, },
{ {
name: "背景", name: "背景",
@ -789,14 +831,14 @@ const drawLoadClassification = (item) => {
// value: 50, // value: 50,
// }, // },
// ]; // ];
console.log(item[0].Amount,'xxx'); console.log(item[0].Amount, "xxx");
var trafficWay = item[0].list.map(el=>{ var trafficWay = item[0].list.map((el) => {
return { return {
name:el.type, name: el.type,
value:el.P value: el.P,
} };
}) });
var total = 0; var total = 0;
for (var i = 0; i < trafficWay.length; i++) { for (var i = 0; i < trafficWay.length; i++) {
total += trafficWay[i].value; total += trafficWay[i].value;
@ -985,56 +1027,56 @@ const drawLoadClassification = (item) => {
//接口 //接口
// 获取实时负荷数据 // 获取实时负荷数据
const realTimeLoadInterface = () =>{ const realTimeLoadInterface = () => {
getRealLoad().then(res=>{ getRealLoad().then((res) => {
getRealTimeLoad(res.data) getRealTimeLoad(res.data);
}) });
} };
// 获取当日累计用电量数据 // 获取当日累计用电量数据
const dailyElectricityInterface = () =>{ const dailyElectricityInterface = () => {
getDailyElectricity().then(res=>{ getDailyElectricity().then((res) => {
getDailyElectricityConsumption(res.data) getDailyElectricityConsumption(res.data);
}) });
} };
// 获取负荷分类数据 // 获取负荷分类数据
const loadClassificationInterface = () =>{ const loadClassificationInterface = () => {
getLoadClassification().then(res=>{ getLoadClassification().then((res) => {
drawLoadClassification(res.data) drawLoadClassification(res.data);
}) });
} };
// 获取空调负荷数据 // 获取空调负荷数据
const airconditioningLoadInteface = () =>{ const airconditioningLoadInteface = () => {
getAirconditioningLoad().then(res=>{ getAirconditioningLoad().then((res) => {
drawAirConditioningLoad(res.data) drawAirConditioningLoad(res.data);
}) });
} };
// 获取展陈负荷数据 // 获取展陈负荷数据
const displayLoadInterface = () =>{ const displayLoadInterface = () => {
getDisplayLoad().then(res=>{ getDisplayLoad().then((res) => {
drawExhibitionLoad(res.data) drawExhibitionLoad(res.data);
}) });
} };
// 获取配电回路数据 // 获取配电回路数据
const loopRankingInterface = () =>{ const loopRankingInterface = () => {
getLoopRanking().then(res=>{ getLoopRanking().then((res) => {
drawRanking(res.data); drawRanking(res.data);
}) });
} };
//加载完dom执行 //加载完dom执行
onMounted(() => { onMounted(() => {
// 实时负荷接口 // 实时负荷接口
realTimeLoadInterface() realTimeLoadInterface();
//当日累计用电量接口 //当日累计用电量接口
dailyElectricityInterface() dailyElectricityInterface();
// 空调负荷接口 // 空调负荷接口
airconditioningLoadInteface(); airconditioningLoadInteface();
// 展陈负荷接口 // 展陈负荷接口
displayLoadInterface() displayLoadInterface();
// drawExhibitionLoad(); // drawExhibitionLoad();
// 配电回路排名 // 配电回路排名
loopRankingInterface() loopRankingInterface();
//负荷分类接口 //负荷分类接口
loadClassificationInterface() loadClassificationInterface();
}); });
</script> </script>

151
src/views/overview/index.vue
View File

@ -2,7 +2,14 @@
import calendar from "@/components/calendar/index.vue"; import calendar from "@/components/calendar/index.vue";
import * as echarts from "echarts"; import * as echarts from "echarts";
import { onMounted, ref } from "vue"; 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"; import getPath from "@/utils/getPath.js";
// 实时负荷 // 实时负荷
const realTimeLoad = ref([ const realTimeLoad = ref([
@ -23,19 +30,19 @@ const weatherStation = ref([
// return `url(${new URL(name, import.meta.url).href})` // return `url(${new URL(name, import.meta.url).href})`
// } // }
// 用电量列表 // 用电量列表
const powerList = ref([]) const powerList = ref([]);
onMounted(() => { onMounted(() => {
// 用电量接口 // 用电量接口
powerInterface() powerInterface();
// 实时负荷接口 // 实时负荷接口
realtimeLoadInterface() realtimeLoadInterface();
// 气象站接口 // 气象站接口
stationInterface() stationInterface();
// 系统用电排名接口 // 系统用电排名接口
systemRankingInterface() systemRankingInterface();
// 碳排放的接口 // 碳排放的接口
CarbonEmissionInterface() CarbonEmissionInterface();
//碳排放 //碳排放
// getCarbonEmissionEcahrts(); // getCarbonEmissionEcahrts();
}); });
@ -43,16 +50,15 @@ onMounted(() => {
const powerDate = ref("year"); const powerDate = ref("year");
const togglePower = (event) => { const togglePower = (event) => {
powerDate.value = event.srcElement.className; powerDate.value = event.srcElement.className;
powerInterface() powerInterface();
}; };
// 碳排放时间切换 // 碳排放时间切换
const carbonEmissionDate = ref("month"); const carbonEmissionDate = ref("month");
const toggleCarbonEmission = (event) => { const toggleCarbonEmission = (event) => {
carbonEmissionDate.value = event.srcElement.className; carbonEmissionDate.value = event.srcElement.className;
// 碳排放接口 // 碳排放接口
CarbonEmissionInterface() CarbonEmissionInterface();
}; };
const drawPowerEcharts = (item) => { const drawPowerEcharts = (item) => {
let myChart = echarts.init(document.getElementById("power")); let myChart = echarts.init(document.getElementById("power"));
@ -89,9 +95,9 @@ const drawPowerEcharts = (item) => {
axisTick: { show: false }, axisTick: { show: false },
boundaryGap: true, boundaryGap: true,
// data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"], // data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
data:item.map(el=>{ data: item.map((el) => {
return el.time return el.time;
}) }),
}, },
], ],
yAxis: [ yAxis: [
@ -154,9 +160,9 @@ const drawPowerEcharts = (item) => {
}, },
}, },
// data: [110, 200, 300, 325, 400, 322, 250], // data: [110, 200, 300, 325, 400, 322, 250],
data:item.map(el=>{ data: item.map((el) => {
return el.EH return el.EH;
}) }),
}, },
], ],
}; };
@ -223,9 +229,9 @@ const drawRankEcharts = (data) => {
show: false, show: false,
}, },
// data: ["空调系统", "照明系统", "消防系统", "电梯系统", "展陈系统"], // data: ["空调系统", "照明系统", "消防系统", "电梯系统", "展陈系统"],
data:data.map(el=>{ data: data.map((el) => {
return el.name return el.name;
}) }),
}, },
{ {
type: "category", type: "category",
@ -254,9 +260,9 @@ const drawRankEcharts = (data) => {
}, },
}, },
// data: [50000000, 22000000, 10000000, 5000000, 1], // data: [50000000, 22000000, 10000000, 5000000, 1],
data:data.map(el=>{ data: data.map((el) => {
return el.EH return el.EH;
}) }),
}, },
], ],
series: [ series: [
@ -278,9 +284,9 @@ const drawRankEcharts = (data) => {
}, },
barWidth: 8, barWidth: 8,
// data: [50000000, 22000000, 10000000, 5000000, 200], // data: [50000000, 22000000, 10000000, 5000000, 200],
data:data.map(el=>{ data: data.map((el) => {
return el.EH return el.EH;
}) }),
}, },
{ {
name: "背景", name: "背景",
@ -335,7 +341,7 @@ function getCarbonEmissionEcahrts(data) {
const xAxisPoint = shape.xAxisPoint; const xAxisPoint = shape.xAxisPoint;
const c1 = [shape.x + 7, shape.y]; const c1 = [shape.x + 7, shape.y];
const c2 = [xAxisPoint[0] + 7, xAxisPoint[1]]; 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]; const c4 = [shape.x + 7 + 7, shape.y - 5];
ctx ctx
.moveTo(c1[0], c1[1]) .moveTo(c1[0], c1[1])
@ -371,9 +377,13 @@ function getCarbonEmissionEcahrts(data) {
echarts.graphic.registerShape("CubeRight", CubeRight); echarts.graphic.registerShape("CubeRight", CubeRight);
echarts.graphic.registerShape("CubeTop", CubeTop); echarts.graphic.registerShape("CubeTop", CubeTop);
// let xAxisData = ["1月", "2月", "3月", "4月", "5月", "6月", "7月"]; // 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 = [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)"]] // 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 = { let params = {
date:powerDate.value==='year'?'年':'月' date: powerDate.value === "year" ? "年" : "月",
} };
getPower(params).then(res=>{ getPower(params).then((res) => {
// 渲染用电量图表 // 渲染用电量图表
drawPowerEcharts(res.data); drawPowerEcharts(res.data);
}) });
} };
// 获取实时负荷 // 获取实时负荷
const realtimeLoadInterface = () =>{ const realtimeLoadInterface = () => {
getRealtimeLoad().then(res=>{ getRealtimeLoad().then((res) => {
realTimeLoad.value.forEach(item=>{ realTimeLoad.value.forEach((item) => {
if(item.name==='配电室数量'){ if (item.name === "配电室数量") {
item.value = res.data[0].Amount item.value = res.data[0].Amount;
}else if(item.name==='实时负荷'){ } else if (item.name === "实时负荷") {
item.value = res.data[0].P item.value = res.data[0].P;
}else if(item.name==='今日电量'){ } else if (item.name === "今日电量") {
item.value = res.data[0].EH item.value = res.data[0].EH;
} }
}) });
}) });
} };
// 获取气象站数据 // 获取气象站数据
const stationInterface = () =>{ const stationInterface = () => {
getMeteorologicalStation().then(res=>{ getMeteorologicalStation().then((res) => {
weatherStation.value.forEach(item=>{ weatherStation.value.forEach((item) => {
res.data.forEach(el=>{ res.data.forEach((el) => {
if(el.name.indexOf(item.name)!==-1){ if (el.name.indexOf(item.name) !== -1) {
item.value = el.value item.value = el.value;
} }
}) });
}) });
}) });
} };
// 系统用电量排名 // 系统用电量排名
const systemRankingInterface = () =>{ const systemRankingInterface = () => {
getSystemRanking().then(res=>{ getSystemRanking().then((res) => {
// 系统用电排名chart图 // 系统用电排名chart图
drawRankEcharts(res.data) drawRankEcharts(res.data);
}) });
} };
const CarbonEmissionInterface = () =>{ const CarbonEmissionInterface = () => {
let params = { let params = {
date:carbonEmissionDate.value === 'month'?'月':'年' date: carbonEmissionDate.value === "month" ? "月" : "年",
} };
getCarbonEmission(params).then(res=>{ getCarbonEmission(params).then((res) => {
getCarbonEmissionEcahrts(res.data) getCarbonEmissionEcahrts(res.data);
}) });
} };
</script> </script>
<template> <template>