Merge branch 'master' of http://172.16.1.12/luoshiwen/long_IslandOcean
This commit is contained in:
commit
699d4d39fd
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -7,13 +7,11 @@
|
|||
<link rel="shortcut icon" href="TemplateData/favicon.ico">
|
||||
<link rel="stylesheet" href="TemplateData/style.css">
|
||||
</head>
|
||||
<style>
|
||||
body,html{
|
||||
<style>body,html{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
}</style>
|
||||
<body>
|
||||
<div id="unity-container" class="unity-desktop" style="width: 100%;height: 100%">
|
||||
<canvas id="unity-canvas" style="width: 100%;height: 100%"></canvas>
|
||||
|
|
@ -105,9 +103,8 @@
|
|||
}
|
||||
|
||||
loadingBar.style.display = "block";
|
||||
|
||||
var script = document.createElement("script");
|
||||
var unityInstanceA
|
||||
var script = document.createElement("script");
|
||||
script.src = loaderUrl;
|
||||
script.onload = () => {
|
||||
createUnityInstance(canvas, config, (progress) => {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
})
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
// 排水接口
|
||||
import http from '@/utils/http'
|
||||
// 获取能耗总量
|
||||
export function getWaterDraining(params){
|
||||
return http({
|
||||
url:'/api/GetWaterDraining',
|
||||
method:'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
|
@ -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
|
||||
})
|
||||
}
|
||||
|
|
@ -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
|
||||
})
|
||||
}
|
||||
|
|
@ -2,6 +2,7 @@
|
|||
import {ref, reactive,onMounted} from "vue";
|
||||
import getPath from "@/utils/getPath.js";
|
||||
import dialogBox from './components/dialogBox.vue'
|
||||
import {getGeneralSituation,getElectricalCondition,getFailureWarning,getBootStrategy,getMaintenanceReminder,getPolicyEditing} from '@/api/air-conditioning'
|
||||
const systemNumList = ref([
|
||||
{
|
||||
name: '运行设备数量',
|
||||
|
|
@ -53,7 +54,7 @@ const electricityContent = ref([
|
|||
unit:"kWh",
|
||||
},
|
||||
{
|
||||
name:'本月用电费用',
|
||||
name:'本年用电费用',
|
||||
value:66,
|
||||
unit:"万元",
|
||||
},
|
||||
|
|
@ -170,8 +171,79 @@ const closeDialog = (val) =>{
|
|||
const controlBtn = ref('on')
|
||||
const toggleControl = (event) => {
|
||||
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(()=>{
|
||||
// 概况接口
|
||||
generalSituationInterface()
|
||||
// 用电接口
|
||||
electricalConditionInterface()
|
||||
// 故障报警接口
|
||||
failureWarningInterface()
|
||||
// 开机策略接口
|
||||
bootStrategyInterface()
|
||||
// 维护提醒接口
|
||||
maintenanceReminderInterface()
|
||||
})
|
||||
</script>
|
||||
|
||||
|
|
@ -409,13 +481,18 @@ onMounted(()=>{
|
|||
}
|
||||
}
|
||||
//故障
|
||||
#fault::-webkit-scrollbar{
|
||||
display:none;
|
||||
}
|
||||
#fault{
|
||||
padding: 0 1rem;
|
||||
overflow-y:scroll;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: space-evenly;
|
||||
// align-content: space-evenly;
|
||||
p{
|
||||
margin:.8rem;
|
||||
width: 100%;
|
||||
height: 20%;
|
||||
background-image: url("@/assets/images/air-conditioning/fault.png");
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<script setup>
|
||||
import {ref} from "vue";
|
||||
|
||||
import {ref,onMounted} from "vue";
|
||||
import {getWaterDraining} from '@/api/drainage'
|
||||
const operationLeftList = ref([
|
||||
{
|
||||
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>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
import { getTotalEnergy,getEnergyIndexing,getEnergyFlow,getSystemEnergy,getMultiRate,getElectricityRate } from "@/api/energyEfficiency";
|
||||
// 各系统能耗概况
|
||||
const systemTab = [
|
||||
{ name: "空调" },
|
||||
|
|
@ -10,6 +11,7 @@ const systemTab = [
|
|||
{ name: "电梯" },
|
||||
];
|
||||
const systemTabIndex = ref(0);
|
||||
const systemTabName = ref('空调');
|
||||
const systemLeftList = ref([
|
||||
{
|
||||
name: "今日用能峰值",
|
||||
|
|
@ -78,24 +80,27 @@ const systemRightList = ref([
|
|||
const totalEnergyDate = ref("month");
|
||||
const toggleTotalEnergy = (event) => {
|
||||
totalEnergyDate.value = event.srcElement.className;
|
||||
totalEnergyInterface()
|
||||
};
|
||||
// 能效对标时间点击时间
|
||||
const managementDate = ref("month");
|
||||
|
||||
const toggleManagement = (event) => {
|
||||
managementDate.value = event.srcElement.className;
|
||||
energyIndexingInterface()
|
||||
};
|
||||
// 复费率的时间点击事件
|
||||
const exhibitionLoadDate = ref("month");
|
||||
const toggleExhibitionLoad = (event) => {
|
||||
exhibitionLoadDate.value = event.srcElement.className;
|
||||
};
|
||||
const selectSystemTab = (index) => {
|
||||
const selectSystemTab = (item,index) => {
|
||||
systemTabIndex.value = index;
|
||||
systemTabName.value = item
|
||||
};
|
||||
|
||||
// 能耗总量echarts
|
||||
const drawTotalChart = () => {
|
||||
const drawTotalChart = (data) => {
|
||||
let myChart = echarts.init(document.getElementById("totalEnergy"));
|
||||
const option = {
|
||||
// backgroundColor: "#05224d",
|
||||
|
|
@ -129,21 +134,22 @@ const drawTotalChart = () => {
|
|||
|
||||
axisTick: { show: false },
|
||||
boundaryGap: true,
|
||||
data: [
|
||||
"11-01",
|
||||
"11-02",
|
||||
"11-03",
|
||||
"11-04",
|
||||
"11-05",
|
||||
"11-07",
|
||||
"11-08",
|
||||
"11-09",
|
||||
"11-10",
|
||||
"11-11",
|
||||
"11-12",
|
||||
"11-13",
|
||||
"11-14",
|
||||
],
|
||||
// data: [
|
||||
// "11-01",
|
||||
// "11-02",
|
||||
// "11-03",
|
||||
// "11-04",
|
||||
// "11-05",
|
||||
// "11-07",
|
||||
// "11-08",
|
||||
// "11-09",
|
||||
// "11-10",
|
||||
// "11-11",
|
||||
// "11-12",
|
||||
// "11-13",
|
||||
// "11-14",
|
||||
// ],
|
||||
data:data.map(el=>{return el.time})
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
|
|
@ -204,7 +210,8 @@ const drawTotalChart = () => {
|
|||
shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
|
||||
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
|
||||
const drawManagement = () => {
|
||||
const drawManagement = (data) => {
|
||||
let myChart = echarts.init(document.getElementById("management"));
|
||||
const option = {
|
||||
// backgroundColor: "#05224d",
|
||||
|
|
@ -261,7 +268,8 @@ const drawManagement = () => {
|
|||
|
||||
axisTick: { show: false },
|
||||
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: [
|
||||
|
|
@ -343,7 +351,8 @@ const drawManagement = () => {
|
|||
shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
|
||||
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"));
|
||||
var option = {
|
||||
tooltip: {
|
||||
|
|
@ -560,7 +569,8 @@ function getExhibitionLoad() {
|
|||
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: [
|
||||
|
|
@ -632,7 +642,7 @@ function getExhibitionLoad() {
|
|||
]),
|
||||
},
|
||||
},
|
||||
data: [1, 2, 3, 4, 5, 6, 7],
|
||||
data: data.map(el=>{return el.Needle}),
|
||||
},
|
||||
{
|
||||
name: "峰",
|
||||
|
|
@ -666,7 +676,7 @@ function getExhibitionLoad() {
|
|||
]),
|
||||
},
|
||||
},
|
||||
data: [1, 2, 3, 4, 5, 6, 7],
|
||||
data: data.map(el=>{return el.Peak}),
|
||||
},
|
||||
{
|
||||
name: "平",
|
||||
|
|
@ -701,7 +711,7 @@ function getExhibitionLoad() {
|
|||
barBorderRadius: 0,
|
||||
},
|
||||
},
|
||||
data: [1, 2, 3, 4, 5, 6, 7],
|
||||
data: data.map(el=>{return el.Flat}),
|
||||
},
|
||||
{
|
||||
name: "谷",
|
||||
|
|
@ -736,7 +746,7 @@ function getExhibitionLoad() {
|
|||
barBorderRadius: 0,
|
||||
},
|
||||
},
|
||||
data: [1, 2, 3, 4, 5, 6, 7],
|
||||
data: data.map(el=>{return el.Grain}),
|
||||
},
|
||||
{
|
||||
name: "深",
|
||||
|
|
@ -771,7 +781,7 @@ function getExhibitionLoad() {
|
|||
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 option = {
|
||||
tooltip: {
|
||||
|
|
@ -827,7 +837,7 @@ const drawElectricityPrice = () => {
|
|||
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
|
||||
data: data.map(el=>{return el.time}),
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
|
|
@ -930,7 +940,7 @@ const drawElectricityPrice = () => {
|
|||
]),
|
||||
},
|
||||
},
|
||||
data: [40, 35, 15, 10, 19, 24, 14],
|
||||
data: data.map(el=>{return el.Electricity}),
|
||||
},
|
||||
{
|
||||
name: "销售电价",
|
||||
|
|
@ -940,7 +950,7 @@ const drawElectricityPrice = () => {
|
|||
color: "rgba(1, 246, 139, 1)", // 设置折线颜色为黄色
|
||||
},
|
||||
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, 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(() => {
|
||||
// 能耗总量
|
||||
drawTotalChart();
|
||||
totalEnergyInterface();
|
||||
// 定额管理
|
||||
drawManagement();
|
||||
energyIndexingInterface();
|
||||
// 能效流向
|
||||
drawEnergyFlow();
|
||||
// 各系统能耗概况
|
||||
systemEnergyInterface()
|
||||
// 电费电价
|
||||
drawElectricityPrice();
|
||||
// })
|
||||
// drawEnergyFlow();
|
||||
electricityRateInterface()
|
||||
//复费率
|
||||
getExhibitionLoad();
|
||||
multiRateInterface()
|
||||
// getExhibitionLoad();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -1044,7 +1112,7 @@ onMounted(() => {
|
|||
<li
|
||||
v-for="(item, index) in systemTab"
|
||||
:class="index === systemTabIndex ? 'tab-select' : ''"
|
||||
@click="selectSystemTab(index)"
|
||||
@click="selectSystemTab(item,index)"
|
||||
>
|
||||
<span>{{ item.name }}</span>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -40,11 +40,12 @@
|
|||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
import { getRealLoad,getDailyElectricity,getLoadClassification,getAirconditioningLoad,getDisplayLoad,getLoopRanking } from "@/api/energyMonitoring";
|
||||
const getImageUrl = (name) => {
|
||||
return new URL(name, import.meta.url).href;
|
||||
};
|
||||
//实时负荷
|
||||
const getRealTimeLoad = () => {
|
||||
const getRealTimeLoad = (data) => {
|
||||
let myChart;
|
||||
myChart = echarts.init(document.getElementById("realTimeLoad"));
|
||||
const option = {
|
||||
|
|
@ -79,7 +80,8 @@ const getRealTimeLoad = () => {
|
|||
|
||||
axisTick: { show: false },
|
||||
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: [
|
||||
|
|
@ -119,7 +121,8 @@ const getRealTimeLoad = () => {
|
|||
lineStyle: {
|
||||
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 offsetY = 5; //倾斜角度
|
||||
// 绘制左侧面
|
||||
|
|
@ -199,19 +202,21 @@ const getDailyElectricityConsumption = () => {
|
|||
echarts.graphic.registerShape("CubeLeft", CubeLeft);
|
||||
echarts.graphic.registerShape("CubeRight", CubeRight);
|
||||
echarts.graphic.registerShape("CubeTop", CubeTop);
|
||||
let xAxisData = [
|
||||
"08:00",
|
||||
"09:00",
|
||||
"10:00",
|
||||
"11:00",
|
||||
"12:00",
|
||||
"13:00",
|
||||
"14:00",
|
||||
"15:00",
|
||||
"16:00",
|
||||
"17:00",
|
||||
];
|
||||
let seriesData = [100, 200, 300, 400, 200, 250, 360, 250, 340, 280];
|
||||
// let xAxisData = [
|
||||
// "08:00",
|
||||
// "09:00",
|
||||
// "10:00",
|
||||
// "11:00",
|
||||
// "12:00",
|
||||
// "13:00",
|
||||
// "14:00",
|
||||
// "15:00",
|
||||
// "16:00",
|
||||
// "17:00",
|
||||
// ];
|
||||
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)"]]
|
||||
// 蓝色渐变
|
||||
|
|
@ -417,7 +422,7 @@ const getDailyElectricityConsumption = () => {
|
|||
};
|
||||
|
||||
//空调负荷
|
||||
const drawAirConditioningLoad = () => {
|
||||
const drawAirConditioningLoad = (data) => {
|
||||
let myChart = echarts.init(document.getElementById("airConditioningLoad"));
|
||||
const option = {
|
||||
// backgroundColor: "#05224d",
|
||||
|
|
@ -451,7 +456,8 @@ const drawAirConditioningLoad = () => {
|
|||
|
||||
axisTick: { show: false },
|
||||
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: [
|
||||
|
|
@ -510,7 +516,8 @@ const drawAirConditioningLoad = () => {
|
|||
shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
|
||||
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"));
|
||||
const option = {
|
||||
// backgroundColor: "#05224d",
|
||||
|
|
@ -555,7 +562,8 @@ const drawExhibitionLoad = () => {
|
|||
|
||||
axisTick: { show: false },
|
||||
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: [
|
||||
|
|
@ -614,7 +622,8 @@ const drawExhibitionLoad = () => {
|
|||
shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
|
||||
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 = () => {
|
||||
var trafficWay = [
|
||||
{
|
||||
name: "一级",
|
||||
value: 20,
|
||||
},
|
||||
{
|
||||
name: "二级",
|
||||
value: 30,
|
||||
},
|
||||
{
|
||||
name: "三级",
|
||||
value: 50,
|
||||
},
|
||||
];
|
||||
const drawLoadClassification = (item) => {
|
||||
// var trafficWay = [
|
||||
// {
|
||||
// name: "一级",
|
||||
// value: 20,
|
||||
// },
|
||||
// {
|
||||
// name: "二级",
|
||||
// value: 30,
|
||||
// },
|
||||
// {
|
||||
// name: "三级",
|
||||
// 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;
|
||||
for (var i = 0; i < trafficWay.length; i++) {
|
||||
total += trafficWay[i].value;
|
||||
|
|
@ -845,7 +862,7 @@ const getLoadClassification = () => {
|
|||
color: color,
|
||||
title: [
|
||||
{
|
||||
text: "1694",
|
||||
text: item[0].Amount,
|
||||
x: "47%",
|
||||
y: "42%",
|
||||
textAlign: "center",
|
||||
|
|
@ -965,20 +982,59 @@ const getLoadClassification = () => {
|
|||
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执行
|
||||
onMounted(() => {
|
||||
//实时负荷
|
||||
getRealTimeLoad();
|
||||
//当日累计用电量
|
||||
getDailyElectricityConsumption();
|
||||
// 空调负荷
|
||||
drawAirConditioningLoad();
|
||||
// 展陈负荷
|
||||
drawExhibitionLoad();
|
||||
// 实时负荷接口
|
||||
realTimeLoadInterface()
|
||||
//当日累计用电量接口
|
||||
dailyElectricityInterface()
|
||||
// 空调负荷接口
|
||||
airconditioningLoadInteface();
|
||||
// 展陈负荷接口
|
||||
displayLoadInterface()
|
||||
// drawExhibitionLoad();
|
||||
// 配电回路排名
|
||||
drawRanking();
|
||||
//负荷分类
|
||||
getLoadClassification();
|
||||
loopRankingInterface()
|
||||
//负荷分类接口
|
||||
loadClassificationInterface()
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -34,8 +34,10 @@ onMounted(() => {
|
|||
stationInterface()
|
||||
// 系统用电排名接口
|
||||
systemRankingInterface()
|
||||
// 碳排放的接口
|
||||
CarbonEmissionInterface()
|
||||
//碳排放
|
||||
getCarbonEmissionEcahrts();
|
||||
// getCarbonEmissionEcahrts();
|
||||
});
|
||||
// 用电量时间切换
|
||||
const powerDate = ref("year");
|
||||
|
|
@ -49,6 +51,8 @@ const togglePower = (event) => {
|
|||
const carbonEmissionDate = ref("month");
|
||||
const toggleCarbonEmission = (event) => {
|
||||
carbonEmissionDate.value = event.srcElement.className;
|
||||
// 碳排放接口
|
||||
CarbonEmissionInterface()
|
||||
};
|
||||
const drawPowerEcharts = (item) => {
|
||||
let myChart = echarts.init(document.getElementById("power"));
|
||||
|
|
@ -297,7 +301,7 @@ const drawRankEcharts = (data) => {
|
|||
});
|
||||
};
|
||||
//碳排放
|
||||
function getCarbonEmissionEcahrts() {
|
||||
function getCarbonEmissionEcahrts(data) {
|
||||
const offsetX = 10; //bar宽
|
||||
const offsetY = 5; //倾斜角度
|
||||
// 绘制左侧面
|
||||
|
|
@ -366,8 +370,10 @@ function getCarbonEmissionEcahrts() {
|
|||
echarts.graphic.registerShape("CubeLeft", CubeLeft);
|
||||
echarts.graphic.registerShape("CubeRight", CubeRight);
|
||||
echarts.graphic.registerShape("CubeTop", CubeTop);
|
||||
let xAxisData = ["1月", "2月", "3月", "4月", "5月", "6月", "7月"];
|
||||
let seriesData = [100, 200, 300, 400, 200, 250];
|
||||
// let xAxisData = ["1月", "2月", "3月", "4月", "5月", "6月", "7月"];
|
||||
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)"]]
|
||||
// 蓝色渐变
|
||||
|
|
@ -612,6 +618,14 @@ const systemRankingInterface = () =>{
|
|||
drawRankEcharts(res.data)
|
||||
})
|
||||
}
|
||||
const CarbonEmissionInterface = () =>{
|
||||
let params = {
|
||||
date:carbonEmissionDate.value === 'month'?'月':'年'
|
||||
}
|
||||
getCarbonEmission(params).then(res=>{
|
||||
getCarbonEmissionEcahrts(res.data)
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
|||
Loading…
Reference in New Issue