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

Merge branch 'master' of http://172.16.1.12/luoshiwen/long_IslandOcean

This commit is contained in:
lixiaobang 2024-03-14 09:17:55 +08:00
parent 0d6dd4a4d7 15026f7ed5
commit 699d4d39fd
13 changed files with 503 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/ChangDaobuild/Build/build.data.unityweb
View File

Binary file not shown.

BIN
public/ChangDaobuild/Build/build.framework.js.unityweb
View File

Binary file not shown.

BIN
public/ChangDaobuild/Build/build.wasm.unityweb
View File

Binary file not shown.

9
public/ChangDaobuild/index.html
View File

@ -7,13 +7,11 @@
<link rel="shortcut icon" href="TemplateData/favicon.ico"> <link rel="shortcut icon" href="TemplateData/favicon.ico">
<link rel="stylesheet" href="TemplateData/style.css"> <link rel="stylesheet" href="TemplateData/style.css">
</head> </head>
<style> <style>body,html{
body,html{
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
} }</style>
</style>
<body> <body>
<div id="unity-container" class="unity-desktop" style="width: 100%;height: 100%"> <div id="unity-container" class="unity-desktop" style="width: 100%;height: 100%">
<canvas id="unity-canvas" style="width: 100%;height: 100%"></canvas> <canvas id="unity-canvas" style="width: 100%;height: 100%"></canvas>
@ -105,9 +103,8 @@
} }
loadingBar.style.display = "block"; loadingBar.style.display = "block";
var script = document.createElement("script");
var unityInstanceA var unityInstanceA
var script = document.createElement("script");
script.src = loaderUrl; script.src = loaderUrl;
script.onload = () => { script.onload = () => {
createUnityInstance(canvas, config, (progress) => { createUnityInstance(canvas, config, (progress) => {

50
src/api/air-conditioning.js Normal file
View File

@ -0,0 +1,50 @@
// 空调接口
import http from '@/utils/http'
// 获取概况
export function getGeneralSituation(params){
return http({
url:'/api/GetGeneralSituation',
method:'get',
params
})
}
// 获取用电情况
export function getElectricalCondition(params){
return http({
url:'/api/GetElectricalCondition',
method:'get',
params
})
}
// 获取故障情况
export function getFailureWarning(params){
return http({
url:'/api/GetFailureWarning',
method:'get',
params
})
}
// 获取开机策略
export function getBootStrategy(params){
return http({
url:'/api/GetBootStrategy',
method:'get',
params
})
}
// 获取维护提醒
export function getMaintenanceReminder(params){
return http({
url:'/api/GetMaintenanceReminder',
method:'get',
params
})
}
// 获取策略编辑
export function getPolicyEditing(params){
return http({
url:'/api/GetPolicyEditing',
method:'get',
params
})
}

10
src/api/drainage.js Normal file
View File

@ -0,0 +1,10 @@
// 排水接口
import http from '@/utils/http'
// 获取能耗总量
export function getWaterDraining(params){
return http({
url:'/api/GetWaterDraining',
method:'get',
params
})
}

50
src/api/energyEfficiency.js Normal file
View File

@ -0,0 +1,50 @@
// 能效接口
import http from '@/utils/http'
// 获取能耗总量
export function getTotalEnergy(params){
return http({
url:'/api/GetTotalEnergy',
method:'get',
params
})
}
// 获取能效对标
export function getEnergyIndexing(params){
return http({
url:'/api/GetEnergyIndexing',
method:'get',
params
})
}
// 获取能源流向
export function getEnergyFlow(params){
return http({
url:'/api/GetEnergyFlow',
method:'get',
params
})
}
// 获取各系统能耗情况
export function getSystemEnergy(params){
return http({
url:'/api/GetSystemEnergy',
method:'get',
params
})
}
// 获取复费率
export function getMultiRate(params){
return http({
url:'/api/GetMultiRate',
method:'get',
params
})
}
// 获取电费电价
export function getElectricityRate(params){
return http({
url:'/api/GetElectricityRate',
method:'get',
params
})
}

51
src/api/energyMonitoring.js Normal file
View File

@ -0,0 +1,51 @@
// 用能检测api
import http from '@/utils/http'
// 获取实时负荷
export function getRealLoad(params){
console.log(params,http);
return http({
url:'/api/GetRealLoad',
method:'get',
params
})
}
// 获取当日累计用电量
export function getDailyElectricity(params){
return http({
url:'/api/GetDailyElectricity',
method:'get',
params
})
}
// 获取负荷分类
export function getLoadClassification(params){
return http({
url:'/api/GetLoadClassification',
method:'get',
params
})
}
// 获取空调负荷
export function getAirconditioningLoad(params){
return http({
url:'/api/GetAirconditioningLoad',
method:'get',
params
})
}
// 获取展陈负荷
export function getDisplayLoad(params){
return http({
url:'/api/GetDisplayLoad',
method:'get',
params
})
}
// 获取配电室回路排名
export function getLoopRanking(params){
return http({
url:'/api/GetLoopRanking',
method:'get',
params
})
}

83
src/views/air-conditioning/index.vue
View File

@ -2,6 +2,7 @@
import {ref, reactive,onMounted} from "vue"; import {ref, reactive,onMounted} from "vue";
import getPath from "@/utils/getPath.js"; import getPath from "@/utils/getPath.js";
import dialogBox from './components/dialogBox.vue' import dialogBox from './components/dialogBox.vue'
import {getGeneralSituation,getElectricalCondition,getFailureWarning,getBootStrategy,getMaintenanceReminder,getPolicyEditing} from '@/api/air-conditioning'
const systemNumList = ref([ const systemNumList = ref([
{ {
name: '运行设备数量', name: '运行设备数量',
@ -53,7 +54,7 @@ const electricityContent = ref([
unit:"kWh", unit:"kWh",
}, },
{ {
name:'本月用电费用', name:'本年用电费用',
value:66, value:66,
unit:"万元", unit:"万元",
}, },
@ -170,8 +171,79 @@ const closeDialog = (val) =>{
const controlBtn = ref('on') const controlBtn = ref('on')
const toggleControl = (event) => { const toggleControl = (event) => {
controlBtn.value = event.srcElement.className controlBtn.value = event.srcElement.className
maintenanceReminderInterface()
}
// 获取概况数据
const generalSituationInterface = () =>{
getGeneralSituation().then(res=>{
systemNumList.value[0].num = res.data[0].Operation
systemNumList.value[1].num = res.data[0].Stop
overviewList.value[0].num = res.data[0].Area / 10000
overviewList.value[1].num = res.data[0].Amount
})
}
// 获取故障报警
const failureWarningInterface = () =>{
getFailureWarning().then(res=>{
faultList.value = res.data.map(el=>{
return {
name:el.FailureWarning,
date:el.FailureTime
}
})
})
}
// 获取用电情况数据
const electricalConditionInterface = () =>{
getElectricalCondition().then(res=>{
// 今日
electricityContent.value[0].value = res.data[0].EH
electricityContent.value[1].value = res.data[0].Electricity
// 本月
electricityContent.value[2].value = res.data[1].EH
electricityContent.value[3].value = res.data[1].Electricity
// 本年
electricityContent.value[4].value = res.data[2].EH
electricityContent.value[5].value = res.data[2].Electricity
})
}
// 开机策略
const bootStrategyInterface = () =>{
getBootStrategy().then(res=>{
runTimeList.value = res.data.map(el=>{
return {
name:el.StrategyName,
value:el.StrategyState
}
})
})
}
// 维护提醒
const maintenanceReminderInterface = () =>{
console.log(controlBtn.value);
let params = {
name: controlBtn.value === 'on' ? '已超期':'即将开始'
}
getMaintenanceReminder(params).then(res=>{
maintenanceList.value = res.data.map(el=>{
return {
name:el.DeviceName,
date:el.OverDue
}
})
})
} }
onMounted(()=>{ onMounted(()=>{
// 概况接口
generalSituationInterface()
// 用电接口
electricalConditionInterface()
// 故障报警接口
failureWarningInterface()
// 开机策略接口
bootStrategyInterface()
// 维护提醒接口
maintenanceReminderInterface()
}) })
</script> </script>
@ -231,7 +303,7 @@ onMounted(()=>{
<div class="title margin10"> <div class="title margin10">
<span>故障报警</span> <span>故障报警</span>
</div> </div>
<div id="fault" class="margin10 box-bg"> <div id="fault" class="margin10 box-bg" >
<p v-for="s in faultList"> <p v-for="s in faultList">
<span class="name">{{s.name}}</span> <span class="name">{{s.name}}</span>
<span class="date">时间：{{s.date}}</span> <span class="date">时间：{{s.date}}</span>
@ -409,13 +481,18 @@ onMounted(()=>{
} }
} }
//故障 //故障
#fault::-webkit-scrollbar{
display:none;
}
#fault{ #fault{
padding: 0 1rem; padding: 0 1rem;
overflow-y:scroll;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-content: space-evenly; // align-content: space-evenly;
p{ p{
margin:.8rem;
width: 100%; width: 100%;
height: 20%; height: 20%;
background-image: url("@/assets/images/air-conditioning/fault.png"); background-image: url("@/assets/images/air-conditioning/fault.png");

25
src/views/drainage/index.vue
View File

@ -1,6 +1,6 @@
<script setup> <script setup>
import {ref} from "vue"; import {ref,onMounted} from "vue";
import {getWaterDraining} from '@/api/drainage'
const operationLeftList = ref([ const operationLeftList = ref([
{ {
name: '1号排水点', name: '1号排水点',
@ -187,7 +187,26 @@ const operationRightList = ref([
] ]
}, },
]) ])
const waterDrainingInterface = () =>{
getWaterDraining().then(res=>{
operationLeftList.value = res.data.slice(0,7).map(el=>{
return {
name:el.WaterName,
children:el.list
}
})
operationRightList.value = res.data.slice(7).map(el=>{
return {
name:el.WaterName,
children:el.list
}
})
})
}
// dom挂载
onMounted(()=>{
waterDrainingInterface()
})
</script> </script>

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

@ -1,6 +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 { getTotalEnergy,getEnergyIndexing,getEnergyFlow,getSystemEnergy,getMultiRate,getElectricityRate } from "@/api/energyEfficiency";
// 各系统能耗概况 // 各系统能耗概况
const systemTab = [ const systemTab = [
{ name: "空调" }, { name: "空调" },
@ -10,6 +11,7 @@ const systemTab = [
{ name: "电梯" }, { name: "电梯" },
]; ];
const systemTabIndex = ref(0); const systemTabIndex = ref(0);
const systemTabName = ref('空调');
const systemLeftList = ref([ const systemLeftList = ref([
{ {
name: "今日用能峰值", name: "今日用能峰值",
@ -78,24 +80,27 @@ 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()
}; };
// 能效对标时间点击时间 // 能效对标时间点击时间
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()
}; };
// 复费率的时间点击事件 // 复费率的时间点击事件
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 = (index) => { const selectSystemTab = (item,index) => {
systemTabIndex.value = index; systemTabIndex.value = index;
systemTabName.value = item
}; };
// 能耗总量echarts // 能耗总量echarts
const drawTotalChart = () => { const drawTotalChart = (data) => {
let myChart = echarts.init(document.getElementById("totalEnergy")); let myChart = echarts.init(document.getElementById("totalEnergy"));
const option = { const option = {
// backgroundColor: "#05224d", // backgroundColor: "#05224d",
@ -129,21 +134,22 @@ const drawTotalChart = () => {
axisTick: { show: false }, axisTick: { show: false },
boundaryGap: true, boundaryGap: true,
data: [ // data: [
"11-01", // "11-01",
"11-02", // "11-02",
"11-03", // "11-03",
"11-04", // "11-04",
"11-05", // "11-05",
"11-07", // "11-07",
"11-08", // "11-08",
"11-09", // "11-09",
"11-10", // "11-10",
"11-11", // "11-11",
"11-12", // "11-12",
"11-13", // "11-13",
"11-14", // "11-14",
], // ],
data:data.map(el=>{return el.time})
}, },
], ],
yAxis: [ yAxis: [
@ -204,7 +210,8 @@ const drawTotalChart = () => {
shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色 shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
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})
}, },
], ],
}; };
@ -215,7 +222,7 @@ const drawTotalChart = () => {
}); });
}; };
// 定额管理charts // 定额管理charts
const drawManagement = () => { const drawManagement = (data) => {
let myChart = echarts.init(document.getElementById("management")); let myChart = echarts.init(document.getElementById("management"));
const option = { const option = {
// backgroundColor: "#05224d", // backgroundColor: "#05224d",
@ -261,7 +268,8 @@ const drawManagement = () => {
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})
}, },
], ],
yAxis: [ yAxis: [
@ -343,7 +351,8 @@ const drawManagement = () => {
shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色 shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
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})
}, },
], ],
}; };
@ -500,7 +509,7 @@ const drawEnergyFlow = () => {
}); });
}; };
//复费率 //复费率
function getExhibitionLoad() { function getExhibitionLoad(data) {
let myChart = echarts.init(document.getElementById("exhibitionLoad")); let myChart = echarts.init(document.getElementById("exhibitionLoad"));
var option = { var option = {
tooltip: { tooltip: {
@ -560,7 +569,8 @@ function getExhibitionLoad() {
margin: 40, margin: 40,
}, },
}, },
data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"], // data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
data:data.map(el=>{return el.time})
}, },
], ],
yAxis: [ yAxis: [
@ -632,7 +642,7 @@ function getExhibitionLoad() {
]), ]),
}, },
}, },
data: [1, 2, 3, 4, 5, 6, 7], data: data.map(el=>{return el.Needle}),
}, },
{ {
name: "峰", name: "峰",
@ -666,7 +676,7 @@ function getExhibitionLoad() {
]), ]),
}, },
}, },
data: [1, 2, 3, 4, 5, 6, 7], data: data.map(el=>{return el.Peak}),
}, },
{ {
name: "平", name: "平",
@ -701,7 +711,7 @@ function getExhibitionLoad() {
barBorderRadius: 0, barBorderRadius: 0,
}, },
}, },
data: [1, 2, 3, 4, 5, 6, 7], data: data.map(el=>{return el.Flat}),
}, },
{ {
name: "谷", name: "谷",
@ -736,7 +746,7 @@ function getExhibitionLoad() {
barBorderRadius: 0, barBorderRadius: 0,
}, },
}, },
data: [1, 2, 3, 4, 5, 6, 7], data: data.map(el=>{return el.Grain}),
}, },
{ {
name: "深", name: "深",
@ -771,7 +781,7 @@ function getExhibitionLoad() {
barBorderRadius: 0, barBorderRadius: 0,
}, },
}, },
data: [1, 2, 3, 4, 5, 6, 7], data: data.map(el=>{return el.Deep}),
}, },
], ],
}; };
@ -783,7 +793,7 @@ function getExhibitionLoad() {
} }
// 电费电价 // 电费电价
const drawElectricityPrice = () => { const drawElectricityPrice = (data) => {
let myChart = echarts.init(document.getElementById("electricity-price")); let myChart = echarts.init(document.getElementById("electricity-price"));
let option = { let option = {
tooltip: { tooltip: {
@ -827,7 +837,7 @@ const drawElectricityPrice = () => {
xAxis: { xAxis: {
type: "category", type: "category",
data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"], data: data.map(el=>{return el.time}),
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
@ -930,7 +940,7 @@ const drawElectricityPrice = () => {
]), ]),
}, },
}, },
data: [40, 35, 15, 10, 19, 24, 14], data: data.map(el=>{return el.Electricity}),
}, },
{ {
name: "销售电价", name: "销售电价",
@ -940,7 +950,7 @@ const drawElectricityPrice = () => {
color: "rgba(1, 246, 139, 1)", // 设置折线颜色为黄色 color: "rgba(1, 246, 139, 1)", // 设置折线颜色为黄色
}, },
symbol: "none", symbol: "none",
data: [0.1, 0.2, 0.6, 1, 0.4, 0.8, 0.9], // 折线图的数据 data:data.map(el=>{return el.Electrovalence}), // 折线图的数据
}, },
], ],
}; };
@ -958,20 +968,78 @@ const defaultTime = ref([
new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 0, 0, 0),
new Date(2000, 2, 1, 23, 59, 59), new Date(2000, 2, 1, 23, 59, 59),
]); ]);
// dom加载
// 获取能耗总量数据
const totalEnergyInterface = () =>{
let params = {
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=>{
getExhibitionLoad(res.data)
})
}
// 获取电费电价数据
const electricityRateInterface = () =>{
getElectricityRate().then(res=>{
drawElectricityPrice(res.data);
})
}
// dom加载ie
onMounted(() => { onMounted(() => {
// 能耗总量 // 能耗总量
drawTotalChart(); totalEnergyInterface();
// 定额管理 // 定额管理
drawManagement(); energyIndexingInterface();
// 能效流向 // 能效流向
drawEnergyFlow(); drawEnergyFlow();
// 各系统能耗概况
systemEnergyInterface()
// 电费电价 // 电费电价
drawElectricityPrice(); electricityRateInterface()
// })
// drawEnergyFlow();
//复费率 //复费率
getExhibitionLoad(); multiRateInterface()
// getExhibitionLoad();
}); });
</script> </script>
@ -1044,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(index)" @click="selectSystemTab(item,index)"
> >
<span>{{ item.name }}</span> <span>{{ item.name }}</span>
</li> </li>

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

@ -40,11 +40,12 @@
<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";
const getImageUrl = (name) => { const getImageUrl = (name) => {
return new URL(name, import.meta.url).href; return new URL(name, import.meta.url).href;
}; };
//实时负荷 //实时负荷
const getRealTimeLoad = () => { const getRealTimeLoad = (data) => {
let myChart; let myChart;
myChart = echarts.init(document.getElementById("realTimeLoad")); myChart = echarts.init(document.getElementById("realTimeLoad"));
const option = { const option = {
@ -79,7 +80,8 @@ const getRealTimeLoad = () => {
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}),
}, },
], ],
yAxis: [ yAxis: [
@ -119,7 +121,8 @@ const getRealTimeLoad = () => {
lineStyle: { lineStyle: {
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}),
}, },
], ],
}; };
@ -130,7 +133,7 @@ const getRealTimeLoad = () => {
}); });
}; };
//当日累计用电量 //当日累计用电量
const getDailyElectricityConsumption = () => { const getDailyElectricityConsumption = (data) => {
const offsetX = 10; //bar宽 const offsetX = 10; //bar宽
const offsetY = 5; //倾斜角度 const offsetY = 5; //倾斜角度
// 绘制左侧面 // 绘制左侧面
@ -199,19 +202,21 @@ const getDailyElectricityConsumption = () => {
echarts.graphic.registerShape("CubeLeft", CubeLeft); echarts.graphic.registerShape("CubeLeft", CubeLeft);
echarts.graphic.registerShape("CubeRight", CubeRight); echarts.graphic.registerShape("CubeRight", CubeRight);
echarts.graphic.registerShape("CubeTop", CubeTop); echarts.graphic.registerShape("CubeTop", CubeTop);
let xAxisData = [ // let xAxisData = [
"08:00", // "08:00",
"09:00", // "09:00",
"10:00", // "10:00",
"11:00", // "11:00",
"12:00", // "12:00",
"13:00", // "13:00",
"14:00", // "14:00",
"15:00", // "15:00",
"16:00", // "16:00",
"17:00", // "17:00",
]; // ];
let seriesData = [100, 200, 300, 400, 200, 250, 360, 250, 340, 280]; 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 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)"]]
// 蓝色渐变 // 蓝色渐变
@ -417,7 +422,7 @@ const getDailyElectricityConsumption = () => {
}; };
//空调负荷 //空调负荷
const drawAirConditioningLoad = () => { const drawAirConditioningLoad = (data) => {
let myChart = echarts.init(document.getElementById("airConditioningLoad")); let myChart = echarts.init(document.getElementById("airConditioningLoad"));
const option = { const option = {
// backgroundColor: "#05224d", // backgroundColor: "#05224d",
@ -451,7 +456,8 @@ const drawAirConditioningLoad = () => {
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})
}, },
], ],
yAxis: [ yAxis: [
@ -510,7 +516,8 @@ const drawAirConditioningLoad = () => {
shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色 shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
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})
}, },
], ],
}; };
@ -521,7 +528,7 @@ const drawAirConditioningLoad = () => {
}); });
}; };
// 展陈负荷 // 展陈负荷
const drawExhibitionLoad = () => { const drawExhibitionLoad = (data) => {
let myChart = echarts.init(document.getElementById("exhibitionLoad")); let myChart = echarts.init(document.getElementById("exhibitionLoad"));
const option = { const option = {
// backgroundColor: "#05224d", // backgroundColor: "#05224d",
@ -555,7 +562,8 @@ const drawExhibitionLoad = () => {
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})
}, },
], ],
yAxis: [ yAxis: [
@ -614,7 +622,8 @@ const drawExhibitionLoad = () => {
shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色 shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
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})
}, },
], ],
}; };
@ -765,21 +774,29 @@ const drawRanking = () => {
}); });
}; };
//负荷分类 //负荷分类
const getLoadClassification = () => { const drawLoadClassification = (item) => {
var trafficWay = [ // var trafficWay = [
{ // {
name: "一级", // name: "一级",
value: 20, // value: 20,
}, // },
{ // {
name: "二级", // name: "二级",
value: 30, // value: 30,
}, // },
{ // {
name: "三级", // name: "三级",
value: 50, // value: 50,
}, // },
]; // ];
console.log(item[0].Amount,'xxx');
var trafficWay = item[0].list.map(el=>{
return {
name:el.type,
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;
@ -845,7 +862,7 @@ const getLoadClassification = () => {
color: color, color: color,
title: [ title: [
{ {
text: "1694", text: item[0].Amount,
x: "47%", x: "47%",
y: "42%", y: "42%",
textAlign: "center", textAlign: "center",
@ -965,20 +982,59 @@ const getLoadClassification = () => {
myChart.resize(); // 调用 resize 函数进行自适应大小调整 myChart.resize(); // 调用 resize 函数进行自适应大小调整
}); });
}; };
//接口
// 获取实时负荷数据
const realTimeLoadInterface = () =>{
getRealLoad().then(res=>{
getRealTimeLoad(res.data)
})
}
// 获取当日累计用电量数据
const dailyElectricityInterface = () =>{
getDailyElectricity().then(res=>{
getDailyElectricityConsumption(res.data)
})
}
// 获取负荷分类数据
const loadClassificationInterface = () =>{
getLoadClassification().then(res=>{
drawLoadClassification(res.data)
})
}
// 获取空调负荷数据
const airconditioningLoadInteface = () =>{
getAirconditioningLoad().then(res=>{
drawAirConditioningLoad(res.data)
})
}
// 获取展陈负荷数据
const displayLoadInterface = () =>{
getDisplayLoad().then(res=>{
drawExhibitionLoad(res.data)
})
}
// 获取配电回路数据
const loopRankingInterface = () =>{
getLoopRanking().then(res=>{
drawRanking(res.data);
})
}
//加载完dom执行 //加载完dom执行
onMounted(() => { onMounted(() => {
//实时负荷 // 实时负荷接口
getRealTimeLoad(); realTimeLoadInterface()
//当日累计用电量 //当日累计用电量接口
getDailyElectricityConsumption(); dailyElectricityInterface()
// 空调负荷 // 空调负荷接口
drawAirConditioningLoad(); airconditioningLoadInteface();
// 展陈负荷 // 展陈负荷接口
drawExhibitionLoad(); displayLoadInterface()
// drawExhibitionLoad();
// 配电回路排名 // 配电回路排名
drawRanking(); loopRankingInterface()
//负荷分类 //负荷分类接口
getLoadClassification(); loadClassificationInterface()
}); });
</script> </script>

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

@ -34,8 +34,10 @@ onMounted(() => {
stationInterface() stationInterface()
// 系统用电排名接口 // 系统用电排名接口
systemRankingInterface() systemRankingInterface()
// 碳排放的接口
CarbonEmissionInterface()
//碳排放 //碳排放
getCarbonEmissionEcahrts(); // getCarbonEmissionEcahrts();
}); });
// 用电量时间切换 // 用电量时间切换
const powerDate = ref("year"); const powerDate = ref("year");
@ -49,6 +51,8 @@ const togglePower = (event) => {
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()
}; };
const drawPowerEcharts = (item) => { const drawPowerEcharts = (item) => {
let myChart = echarts.init(document.getElementById("power")); let myChart = echarts.init(document.getElementById("power"));
@ -297,7 +301,7 @@ const drawRankEcharts = (data) => {
}); });
}; };
//碳排放 //碳排放
function getCarbonEmissionEcahrts() { function getCarbonEmissionEcahrts(data) {
const offsetX = 10; //bar宽 const offsetX = 10; //bar宽
const offsetY = 5; //倾斜角度 const offsetY = 5; //倾斜角度
// 绘制左侧面 // 绘制左侧面
@ -366,8 +370,10 @@ function getCarbonEmissionEcahrts() {
echarts.graphic.registerShape("CubeLeft", CubeLeft); echarts.graphic.registerShape("CubeLeft", CubeLeft);
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 seriesData = [100, 200, 300, 400, 200, 250]; 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 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)"]]
// 蓝色渐变 // 蓝色渐变
@ -612,6 +618,14 @@ const systemRankingInterface = () =>{
drawRankEcharts(res.data) drawRankEcharts(res.data)
}) })
} }
const CarbonEmissionInterface = () =>{
let params = {
date:carbonEmissionDate.value === 'month'?'月':'年'
}
getCarbonEmission(params).then(res=>{
getCarbonEmissionEcahrts(res.data)
})
}
</script> </script>
<template> <template>