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

Compare commits

base: luoshiwen:587c923f0837f471295d8021ac0acfc23649d38b
Branches Tags
luoshiwen:master
..
compare: luoshiwen:15026f7ed5f13093ab77ef7e38ab25c464fbf037
Branches Tags
luoshiwen:master

No commits in common. "587c923f0837f471295d8021ac0acfc23649d38b" and "15026f7ed5f13093ab77ef7e38ab25c464fbf037" have entirely different histories.
587c923f08 ... 15026f7ed5

5 changed files with 242 additions and 378 deletions
Show Stats Expand all files Collapse all files

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

@ -1,87 +1,65 @@
<script setup> <script setup>
import { ref, onMounted, nextTick } from "vue"; import { ref } 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(new Date()); const calendarDate = ref();
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="width: 1rem; height: 1rem; cursor: pointer" style="
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="width: 1rem; height: 1rem; cursor: pointer" style="
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="width: 1rem; height: 1rem; cursor: pointer" style="
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="width: 1rem; height: 1rem; cursor: pointer" style="
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"> <p class="value">{{ data.day.split("-").slice(1)[1] }}</p>
{{ getDateValue(data.day.split("-").slice(1)[1],data.day.split("-").slice(1)[0])}}
</p>
</template> </template>
</el-calendar> </el-calendar>
</template> </template>

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

@ -1,15 +1,7 @@
<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 { import { getTotalEnergy,getEnergyIndexing,getEnergyFlow,getSystemEnergy,getMultiRate,getElectricityRate } from "@/api/energyEfficiency";
getTotalEnergy,
getEnergyIndexing,
getEnergyFlow,
getSystemEnergy,
getMultiRate,
getElectricityRate,
} from "@/api/energyEfficiency";
import moment from "moment";
// 各系统能耗概况 // 各系统能耗概况
const systemTab = [ const systemTab = [
{ name: "空调" }, { name: "空调" },
@ -19,7 +11,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: "今日用能峰值",
@ -88,23 +80,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
@ -157,9 +149,7 @@ const drawTotalChart = (data) => {
// "11-13", // "11-13",
// "11-14", // "11-14",
// ], // ],
data: data.map((el) => { data:data.map(el=>{return el.time})
return el.time;
}),
}, },
], ],
yAxis: [ yAxis: [
@ -221,9 +211,7 @@ 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) => { data:data.map(el=>{return el.EH})
return el.EH;
}),
}, },
], ],
}; };
@ -281,9 +269,7 @@ 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) => { data:data.map(el=>{return el.time})
return el.time;
}),
}, },
], ],
yAxis: [ yAxis: [
@ -366,9 +352,7 @@ 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) => { data:data.map(el=>{return el.EnergyIndexing})
return el.EnergyIndexing;
}),
}, },
], ],
}; };
@ -379,27 +363,27 @@ const drawManagement = (data) => {
}); });
}; };
// 能效流向 // 能效流向
const drawEnergyFlow = (params) => { const drawEnergyFlow = () => {
let myChart = echarts.init(document.getElementById("energyFlow")); let myChart = echarts.init(document.getElementById("energyFlow"));
let sourceData = [ let sourceData = [
{ {
name: "电", name: "电",
nameValue: params[0].Amont, nameValue: 1562,
valueUnit: "kWh", valueUnit: "kWh",
}, },
{ {
name: "空调", name: "空调",
nameValue: params[0].data[0].AirConditioner, nameValue: 562,
valueUnit: "kWh", valueUnit: "kWh",
}, },
{ {
name: "照明", name: "照明",
nameValue: params[0].data[0].Illumination, nameValue: 490,
valueUnit: "kWh", valueUnit: "kWh",
}, },
{ {
name: "电梯", name: "电梯",
nameValue: params[0].data[0].Elevator, nameValue: 510,
valueUnit: "kWh", valueUnit: "kWh",
}, },
]; ];
@ -586,9 +570,7 @@ function getExhibitionLoad(data) {
}, },
}, },
// data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"], // data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
data: data.map((el) => { data:data.map(el=>{return el.time})
return el.time;
}),
}, },
], ],
yAxis: [ yAxis: [
@ -660,9 +642,7 @@ function getExhibitionLoad(data) {
]), ]),
}, },
}, },
data: data.map((el) => { data: data.map(el=>{return el.Needle}),
return el.Needle;
}),
}, },
{ {
name: "峰", name: "峰",
@ -696,9 +676,7 @@ function getExhibitionLoad(data) {
]), ]),
}, },
}, },
data: data.map((el) => { data: data.map(el=>{return el.Peak}),
return el.Peak;
}),
}, },
{ {
name: "平", name: "平",
@ -733,9 +711,7 @@ function getExhibitionLoad(data) {
barBorderRadius: 0, barBorderRadius: 0,
}, },
}, },
data: data.map((el) => { data: data.map(el=>{return el.Flat}),
return el.Flat;
}),
}, },
{ {
name: "谷", name: "谷",
@ -770,9 +746,7 @@ function getExhibitionLoad(data) {
barBorderRadius: 0, barBorderRadius: 0,
}, },
}, },
data: data.map((el) => { data: data.map(el=>{return el.Grain}),
return el.Grain;
}),
}, },
{ {
name: "深", name: "深",
@ -807,9 +781,7 @@ function getExhibitionLoad(data) {
barBorderRadius: 0, barBorderRadius: 0,
}, },
}, },
data: data.map((el) => { data: data.map(el=>{return el.Deep}),
return el.Deep;
}),
}, },
], ],
}; };
@ -865,9 +837,7 @@ const drawElectricityPrice = (data) => {
xAxis: { xAxis: {
type: "category", type: "category",
data: data.map((el) => { data: data.map(el=>{return el.time}),
return el.time;
}),
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
@ -970,9 +940,7 @@ const drawElectricityPrice = (data) => {
]), ]),
}, },
}, },
data: data.map((el) => { data: data.map(el=>{return el.Electricity}),
return el.Electricity;
}),
}, },
{ {
name: "销售电价", name: "销售电价",
@ -982,9 +950,7 @@ const drawElectricityPrice = (data) => {
color: "rgba(1, 246, 139, 1)", // 设置折线颜色为黄色 color: "rgba(1, 246, 139, 1)", // 设置折线颜色为黄色
}, },
symbol: "none", symbol: "none",
data: data.map((el) => { data:data.map(el=>{return el.Electrovalence}), // 折线图的数据
return el.Electrovalence;
}), // 折线图的数据
}, },
], ],
}; };
@ -996,109 +962,83 @@ 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([
moment().format("YYYY-MM-DD"), new Date(2000, 1, 1, 0, 0, 0),
moment().add(1, "days").format("YYYY-MM-DD"), new Date(2000, 2, 1, 23, 59, 59),
]); ]);
// 获取能耗总量数据 // 获取能耗总量数据
const totalEnergyInterface = () => { const totalEnergyInterface = () =>{
let params = { let params = {
date: totalEnergyDate.value === "month" ? "月" : "日", date:totalEnergyDate.value==='month'?'月':'日'
};
getTotalEnergy(params).then((res) => {
drawTotalChart(res.data);
});
};
// 获取能效对标数据
const energyIndexingInterface = () => {
let params = {
date: managementDate.value === "month" ? "月" : "年",
};
getEnergyIndexing(params).then((res) => {
drawManagement(res.data);
});
};
// 获取各系统能耗数据
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;
});
});
};
// 获取复费率数据
const multiRateInterface = () => {
let 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) => { getTotalEnergy(params).then(res=>{
getExhibitionLoad(res.data); drawTotalChart(res.data)
}); })
};
// 获取电费电价数据
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() { const energyIndexingInterface = () =>{
let date = { let params = {
sdate: defaultTime.value[0], date:managementDate.value==='month'?'月':'年'
edate: defaultTime.value[1], }
}; getEnergyIndexing(params).then(res=>{
getEnergyFlow(date) drawManagement(res.data)
.then((res) => { })
if (res.code == 200) { }
drawEnergyFlow(res.data); // 获取各系统能耗数据
} else { const systemEnergyInterface = () =>{
return flase; 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
}) })
.catch((err) => {
console.log(err); })
});
} }
// dom加载ie // 获取复费率数据
const multiRateInterface = () =>{
let 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)
})
}
// 获取电费电价数据
const electricityRateInterface = () =>{
getElectricityRate().then(res=>{
drawElectricityPrice(res.data);
})
}
// dom加载ie
onMounted(() => { onMounted(() => {
// 能耗总量 // 能耗总量
totalEnergyInterface(); totalEnergyInterface();
// 定额管理 // 定额管理
energyIndexingInterface(); energyIndexingInterface();
// 能效流向 // 能效流向
energyFlow(); drawEnergyFlow();
// 各系统能耗概况 // 各系统能耗概况
systemEnergyInterface(); systemEnergyInterface()
// 电费电价 // 电费电价
electricityRateInterface(); electricityRateInterface()
//复费率 //复费率
multiRateInterface(); multiRateInterface()
// getExhibitionLoad(); // getExhibitionLoad();
}); });
</script> </script>
@ -1157,7 +1097,6 @@ 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>
@ -1173,7 +1112,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,14 +40,7 @@
<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 { import { getRealLoad,getDailyElectricity,getLoadClassification,getAirconditioningLoad,getDisplayLoad,getLoopRanking } from "@/api/energyMonitoring";
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;
}; };
@ -88,9 +81,7 @@ 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) => { data: data.map(el=>{return el.time}),
return el.time;
}),
}, },
], ],
yAxis: [ yAxis: [
@ -131,9 +122,7 @@ 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) => { data: data.map(el=>{return el.P}),
return el.P;
}),
}, },
], ],
}; };
@ -178,7 +167,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] - 5]; const c3 = [xAxisPoint[0] + 7 + 7, xAxisPoint[1] - 10];
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])
@ -225,13 +214,9 @@ const getDailyElectricityConsumption = (data) => {
// "16:00", // "16:00",
// "17:00", // "17:00",
// ]; // ];
let xAxisData = data.map((el) => { let xAxisData = data.map(el=>{return el.time})
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) => { let seriesData = data.map(el=>{return el.EH})
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)"]]
// 蓝色渐变 // 蓝色渐变
@ -472,9 +457,7 @@ 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) => { data:data.map(el=>{return el.time})
return el.time;
}),
}, },
], ],
yAxis: [ yAxis: [
@ -534,9 +517,7 @@ 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) => { data:data.map(el=>{return el.P})
return el.P;
}),
}, },
], ],
}; };
@ -582,9 +563,7 @@ 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) => { data:data.map(el=>{return el.time})
return el.time;
}),
}, },
], ],
yAxis: [ yAxis: [
@ -644,9 +623,7 @@ 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) => { data:data.map(el=>{return el.P})
return el.P;
}),
}, },
], ],
}; };
@ -657,13 +634,7 @@ const drawExhibitionLoad = (data) => {
}); });
}; };
// 配电回路排名 // 配电回路排名
const drawRanking = (params) => { const drawRanking = () => {
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: {
@ -688,7 +659,7 @@ const drawRanking = (params) => {
Number( Number(
(params[0].value.toFixed(4) / 10000).toFixed(2) (params[0].value.toFixed(4) / 10000).toFixed(2)
).toLocaleString() + ).toLocaleString() +
"kWh<br/>" " 万元<br/>"
); );
}, },
}, },
@ -696,17 +667,6 @@ const drawRanking = (params) => {
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",
@ -721,7 +681,7 @@ const drawRanking = (params) => {
fontSize: "14", fontSize: "14",
}, },
formatter: function (value, index) { formatter: function (value, index) {
return "{a|" + value + "}"; return "{a|TOP " + (index + 1) + "}" + "{b|" + value + "}";
}, },
rich: { rich: {
a: { a: {
@ -743,10 +703,8 @@ const drawRanking = (params) => {
axisLine: { axisLine: {
show: false, show: false,
}, },
// axisPointer: {
// show: true, data: ["空调系统", "照明系统", "消防系统", "电梯系统", "展陈系统"],
// },
data: yData.slice(0, 5),
}, },
{ {
type: "category", type: "category",
@ -774,12 +732,12 @@ const drawRanking = (params) => {
}, },
}, },
}, },
data: xData.slice(0, 5), data: [50000000, 22000000, 10000000, 5000000, 1],
}, },
], ],
series: [ series: [
{ {
name: "用电量", name: "金额",
type: "bar", type: "bar",
zlevel: 1, zlevel: 1,
itemStyle: { itemStyle: {
@ -795,7 +753,7 @@ const drawRanking = (params) => {
]), ]),
}, },
barWidth: 8, barWidth: 8,
data: xData.slice(0, 5), data: [50000000, 22000000, 10000000, 5000000, 200],
}, },
{ {
name: "背景", name: "背景",
@ -831,14 +789,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;
@ -1027,56 +985,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>

10
src/views/lighting/index.vue
View File

@ -70,7 +70,7 @@ const toggleFloor = (item, index) => {
} else if (item.name === "二层") { } else if (item.name === "二层") {
emit("sendVal", 7); emit("sendVal", 7);
} else if (item.name === "三层") { } else if (item.name === "三层") {
emit("sendVal", 8); emit("sendVal", 8);
} else if (item.name === "负一层") { } else if (item.name === "负一层") {
emit("sendVal", 5); emit("sendVal", 5);
} }
@ -124,10 +124,10 @@ const drawFaultConditionsChart = (params) => {
value: params[0].Malfunction, value: params[0].Malfunction,
}, },
]; ];
var total = params[0].Amount; 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;
// } }
var data = []; var data = [];
var color = ["rgba(1, 246, 139, 1)", "rgba(255, 221, 0, 1)"]; var color = ["rgba(1, 246, 139, 1)", "rgba(255, 221, 0, 1)"];

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

@ -2,14 +2,7 @@
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 { import {getPower,getRealtimeLoad,getCarbonEmission,getEnergyCalendar,getMeteorologicalStation,getSystemRanking} from '@/api/overview'
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([
@ -30,19 +23,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();
}); });
@ -50,15 +43,16 @@ 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"));
@ -95,9 +89,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: [
@ -160,9 +154,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
}), })
}, },
], ],
}; };
@ -229,9 +223,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",
@ -260,9 +254,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: [
@ -284,9 +278,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: "背景",
@ -341,7 +335,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] - 5]; const c3 = [xAxisPoint[0] + 7 + 7, xAxisPoint[1] - 10];
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])
@ -377,13 +371,9 @@ 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) => { let xAxisData = data.map(el=>{return el.time})
return el.time;
});
// let seriesData = [100, 200, 300, 400, 200, 250]; // let seriesData = [100, 200, 300, 400, 200, 250];
let seriesData = data.map((el) => { let seriesData = data.map(el=>{return el.CarbonEmission})
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)"]]
// 蓝色渐变 // 蓝色渐变
@ -586,57 +576,56 @@ 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 = () => {
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 = () => { 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>