sx/map
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

首页：修改布局和风机矩阵加右键操作

Browse Source
This commit is contained in:
fengrong 2024-12-05 17:32:53 +08:00
parent 6eedf5826f
commit 718dcf45c6
4 changed files with 281 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
ui/dasadmin/src/assets/dashboard/overview07.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.3 KiB

BIN
ui/dasadmin/src/assets/dashboard/overview08.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.8 KiB

244
ui/dasadmin/src/views/backend/dashboard.vue
View File

@ -3,79 +3,114 @@
<el-row style="margin: 0px;">
<el-col :md="24" :lg="24" class="col-top">
<el-row class="overview">
<el-col :xs="12" :sm="8" :md="8" :lg="4">
<el-col :xs="24" :sm="24" :md="24" :lg="16">
<div class="overviewItem" style="margin-left: 0px;">
<img class="small-panel-pic" src="~assets/dashboard/overview01.png" alt="" />
<div class="small-base">
<div class="small-title">全场平均风速</div>
<div class="small-value">
<span class="content-number">{{realData.attributeMap.windfarmavgwindspeed}}</span>
<span>m/s</span>
</div>
</div>
</div>
</el-col>
<el-col :xs="12" :sm="8" :md="8" :lg="4">
<div class="overviewItem">
<img class="small-panel-pic" src="~assets/dashboard/overview02.png" alt="" />
<div class="small-base">
<div class="small-title">全场实时有功</div>
<div class="small-value">
<span class="content-number">{{realData.attributeMap.windfarmactivepower}}</span>
<span>kW</span>
</div>
</div>
</div>
</el-col>
<el-col :xs="1" :sm="1" :md="1" :lg="1">
<img class="small-panel-pic" src="~assets/dashboard/overview07.png" alt="" />
</el-col>
<el-col :xs="12" :sm="8" :md="8" :lg="4">
<div class="overviewItem">
<img class="small-panel-pic" src="~assets/dashboard/overview03.png" alt="" />
<div class="small-base">
<div class="small-title">全场实时无功</div>
<div class="small-value">
<span class="content-number">{{realData.attributeMap.windfarmreactivepower}}</span>
<span>kvar</span>
</div>
</div>
</div>
</el-col>
<el-col :xs="4" :sm="3" :md="3" :lg="3">
<div class="small-base">
<el-col :xs="12" :sm="8" :md="8" :lg="4">
<div class="overviewItem">
<img class="small-panel-pic" src="~assets/dashboard/overview04.png" alt="" />
<div class="small-base">
<div class="small-title">日发电量</div>
<div class="small-value">
<span class="content-number">{{realData.attributeMap.windfarmdayprodenergy}}</span>
<span>kWh</span>
<div class="small-value">
<span class="content-number">{{realData.attributeMap.windfarmavgwindspeed}}</span>
<span>m/s</span>
</div>
<div class="small-title">平均风速</div>
</div>
</div>
</div>
</el-col>
</el-col>
<el-col :xs="3" :sm="4" :md="4" :lg="4">
<div class="small-base">
<div class="small-value">
<span class="content-number">{{realData.attributeMap.windfarmactivepower}}</span>
<span>kW</span>
</div>
<div class="small-title">实时有功</div>
</div>
</el-col>
<el-col :xs="4" :sm="4" :md="4" :lg="4">
<div class="small-base">
<div class="small-value">
<span class="content-number">{{realData.attributeMap.windfarmreactivepower}}</span>
<span>kvar</span>
</div>
<div class="small-title">实时无功</div>
</div>
</el-col>
<el-col :xs="4" :sm="4" :md="4" :lg="4">
<div class="small-base">
<el-col :xs="12" :sm="8" :md="8" :lg="4">
<div class="overviewItem">
<img class="small-panel-pic" src="~assets/dashboard/overview05.png" alt="" />
<div class="small-base">
<div class="small-title">本月发电量</div>
<div class="small-value">
<span class="content-number">{{realData.attributeMap.windfarmmonthprodenergy}}</span>
<span>kWh</span>
<div class="small-value">
<span class="content-number">{{realData.attributeMap.windfarmdayprodenergy}}</span>
<span>万kWh</span>
</div>
<div class="small-title">日发电量</div>
</div>
</div>
</el-col>
<el-col :xs="4" :sm="4" :md="4" :lg="4">
<div class="small-base">
<div class="small-value">
<span class="content-number">{{realData.attributeMap.windfarmmonthprodenergy}}</span>
<span>万kWh</span>
</div>
<div class="small-title">本月发电量</div>
</div>
</el-col>
<el-col :xs="4" :sm="4" :md="4" :lg="4">
<div class="small-base" style="border: none;">
<div class="small-value">
<span class="content-number">{{realData.attributeMap.windfarmyearprodenergy}}</span>
<span>万kWh</span>
</div>
<div class="small-title">年发电量</div>
</div>
</el-col>
</div>
</el-col>
<el-col :xs="12" :sm="8" :md="8" :lg="4">
<div class="overviewItem" style="margin-right: 0px;">
<img class="small-panel-pic" src="~assets/dashboard/overview06.png" alt="" />
<div class="small-base">
<div class="small-title">年发电量</div>
<div class="small-value">
<span class="content-number">{{realData.attributeMap.windfarmyearprodenergy}}</span>
<span>kWh</span>
<el-col :xs="24" :sm="24" :md="24" :lg="8">
<div class="overviewItem">
<el-col :xs="3" :sm="3" :md="3" :lg="3">
<img class="small-panel-pic" src="~assets/dashboard/overview08.png" alt="" />
</el-col>
<el-col :xs="4" :sm="4" :md="4" :lg="4">
<div class="small-base">
<div class="small-value">
<span class="content-number">{{realData.attributeMap.turbinecountpowerprod}}</span>
<span>台</span>
</div>
<div class="small-title">并网台数</div>
</div>
</div>
</el-col>
<el-col :xs="6" :sm="6" :md="6" :lg="6">
<div class="small-base">
<div class="small-value">
<span class="content-number">{{realData.attributeMap.turbinecountidle}}</span>
<span>台</span>
</div>
<div class="small-title">待机台数</div>
</div>
</el-col>
<el-col :xs="6" :sm="6" :md="6" :lg="6">
<div class="small-base">
<div class="small-value">
<span class="content-number">{{realData.attributeMap.turbinecountdisconnected}}</span>
<span>台</span>
</div>
<div class="small-title">断联台数</div>
</div>
</el-col>
<el-col :xs="6" :sm="5" :md="5" :lg="5">
<div class="small-base" style="border: none;">
<div class="small-value">
<span class="content-number">{{realData.attributeMap.turbinecountservice}}</span>
<span>台</span>
</div>
<div class="small-title">维护台数</div>
</div>
</el-col>
</div>
</el-col>
</el-row>
@ -125,9 +160,7 @@
</template>
<script setup lang="ts">
import { nextTick, onActivated, onMounted, reactive, ref, onBeforeMount, onUnmounted, VNodeRef } from 'vue'
import * as echarts from 'echarts'
import { useTemplateRefsList, useEventListener } from '@vueuse/core'
import { onMounted, reactive, ref, onUnmounted } from 'vue'
import { useI18n } from 'vue-i18n'
import WindContent from '/@/views/backend/home/windMatrix.vue'
import { equipList } from '/@/api/backend/realData/request'
@ -156,6 +189,11 @@ const attributeList = ref({
'windfarmdayprodenergy',
'windfarmmonthprodenergy',
'windfarmyearprodenergy',
'turbinecountpowerprod',
'turbinecountidle',
'turbinecountdisconnected',
'turbinecountservice'
]
})
@ -174,9 +212,33 @@ const overviewList = () => {
res.data.attributeMap.windfarmactivepower = formatAttributeValue(res.data.attributeMap.windfarmactivepower)
res.data.attributeMap.windfarmreactivepower = formatAttributeValue(res.data.attributeMap.windfarmreactivepower)
res.data.attributeMap.windfarmavgwindspeed = formatAttributeValue(res.data.attributeMap.windfarmavgwindspeed)
res.data.attributeMap.windfarmdayprodenergy = formatAttributeValue(res.data.attributeMap.windfarmdayprodenergy)
res.data.attributeMap.windfarmmonthprodenergy = formatAttributeValue(res.data.attributeMap.windfarmmonthprodenergy)
res.data.attributeMap.windfarmyearprodenergy = formatAttributeValue(res.data.attributeMap.windfarmyearprodenergy)
res.data.attributeMap.windfarmdayprodenergy = formatAttributeValue(res.data.attributeMap.windfarmdayprodenergy/10000)
res.data.attributeMap.windfarmmonthprodenergy = formatAttributeValue(res.data.attributeMap.windfarmmonthprodenergy/10000)
res.data.attributeMap.windfarmyearprodenergy = formatAttributeValue(res.data.attributeMap.windfarmyearprodenergy/10000)
res.data.attributeMap.turbinecountpowerprod =
res.data.attributeMap.turbinecountpowerprod !== undefined
? res.data.attributeMap.turbinecountpowerprod % 1 === 0
? res.data.attributeMap.turbinecountpowerprod
: res.data.attributeMap.turbinecountpowerprod.toFixed(0)
: '0'
res.data.attributeMap.turbinecountidle =
res.data.attributeMap.turbinecountidle !== undefined
? res.data.attributeMap.turbinecountidle % 1 === 0
? res.data.attributeMap.turbinecountidle
: res.data.attributeMap.turbinecountidle.toFixed(0)
: '0'
res.data.attributeMap.turbinecountdisconnected =
res.data.attributeMap.turbinecountdisconnected !== undefined
? res.data.attributeMap.turbinecountdisconnected % 1 === 0
? res.data.attributeMap.turbinecountdisconnected
: res.data.attributeMap.turbinecountdisconnected.toFixed(0)
: '0'
res.data.attributeMap.turbinecountservice =
res.data.attributeMap.turbinecountservice !== undefined
? res.data.attributeMap.turbinecountservice % 1 === 0
? res.data.attributeMap.turbinecountservice
: res.data.attributeMap.turbinecountservice.toFixed(0)
: '0'
const data: any = {
windFarmId: res.data.windFarmId,
attributeMap: {
@ -185,7 +247,11 @@ const overviewList = () => {
windfarmavgwindspeed: res.data.attributeMap.windfarmavgwindspeed,
windfarmdayprodenergy: res.data.attributeMap.windfarmdayprodenergy,
windfarmmonthprodenergy: res.data.attributeMap.windfarmmonthprodenergy,
windfarmyearprodenergy: res.data.attributeMap.windfarmyearprodenergy
windfarmyearprodenergy: res.data.attributeMap.windfarmyearprodenergy,
turbinecountpowerprod: res.data.attributeMap.turbinecountpowerprod,
turbinecountidle: res.data.attributeMap.turbinecountidle,
turbinecountdisconnected: res.data.attributeMap.turbinecountdisconnected,
turbinecountservice: res.data.attributeMap.turbinecountservice
},
}
@ -327,9 +393,6 @@ const StatusListData = () => {
})
}
const timestampToTime = (timestamp: any) => {
timestamp = timestamp ? timestamp : null
let date = new Date(timestamp)
@ -510,13 +573,13 @@ $labelHeight: 30px;
background-color: #f2f3f5;
.el-row {
width: calc(100% - 0px);
.el-col {
/* .el-col {
height: calc(100% - 10px);
}
}*/
}
.content-number {
color: #333333;
font-size: 24px;
font-size: 22px;
}
.homelabel {
font-family: PingFangSC-Semibold;
@ -543,6 +606,10 @@ $labelHeight: 30px;
width: 80px;
height: 80px;
}
.small-base{
text-align: center;
border-right: 1px #eeeeee solid;
}
}
}
@ -612,7 +679,21 @@ $labelHeight: 30px;
}
}
}
@media screen and (max-width: 1280px) {
.default-main {
font-size: 12px !important;
.content-number {
font-size: 16px !important;
}
.overviewItem{
.small-panel-pic{
width: 40px!important;
height: 40px!important;
}
}
}
}
@media screen and (max-width: 1360px) {
@ -632,7 +713,14 @@ $labelHeight: 30px;
.default-main {
/*font-size: 12px !important;*/
.content-number {
font-size: 18px !important;
font-size: 16px !important;
}
.overviewItem{
.small-panel-pic{
width: 60px!important;
height: 60px!important;
}
}
.homelabel {

119
ui/dasadmin/src/views/backend/home/windMatrix.vue
View File

@ -2,7 +2,10 @@
<div class="FanList-content">
<el-row :gutter="10">
<el-col :xs="12" :sm="8" :md="8" :lg="4" :xl="3" v-for="(item, index) in props.parentData" style="margin-bottom: 5px">
<div class="grid-content ep-bg-purple" @click="handleClick(item)">
<div class="grid-content ep-bg-purple"
@click="handleClick(item)"
@contextmenu.prevent="windContextMenu($event,item)"
>
<div class="FanList-panel" :class="item.standard == true ? 'wind-mark' : 'wind-default'">
<div class="fanlist-top">
<span :class="item.standard == true ? 'wind-mark-icon' : 'fanlist-icon'">
@ -71,13 +74,37 @@
</div>
</el-col>
</el-row>
<ContextMenu :pos="contextMenuPos" v-model:visible="OperateVisible">
<template #default>
<div class="modelOperate">
<el-button
class="control-btn"
type="primary"
@click="sendCommand('setTurbineFastStart')"
v-if="realTimeData.iturbineoperationmode !== 16"
>启动</el-button>
<el-button @click="sendCommand('setTurbineStop')" v-else class="control-btn" type="primary">停机</el-button>
<el-button @click="sendCommand('setTurbineResetStatusCode')" class="control-btn" type="primary">复位</el-button>
<el-button
@click="sendManualCommand(1)"
v-if="realTimeData.locked !== 1"
class="control-btn"
type="primary">锁定</el-button>
<el-button @click="sendManualCommand(0)" v-else class="control-btn" type="primary">解锁</el-button>
</div>
</template>
</ContextMenu>
</div>
</template>
<script setup lang="ts">
import { defineProps, defineEmits, onMounted, onUnmounted } from 'vue'
import {defineProps, defineEmits, onMounted, onUnmounted, ref} from 'vue'
import { useRouter } from 'vue-router'
import { adminBaseRoutePath } from '/@/router/static/adminBase'
import ContextMenu from '/@/views/backend/auth/model/contextMenu.vue'
import { sendCommandReq, sendManualCommandReq } from '/@/api/backend/control/request'
import {ElMessage, ElMessageBox} from "element-plus";
const router = useRouter()
const props = defineProps({
@ -126,6 +153,79 @@ const handleClick = (row) => {
},
})
}
const OperateVisible = ref(false)
const contextMenuPos = ref({
x: 0,
y: 0,
})
const realTimeData = ref<any>({
iturbineoperationmode: 1111,
locked: 0,
deviceId: '',
name:''
})
const windContextMenu = (event: any,curnodeData) => {
contextMenuPos.value.x = event.pageX
contextMenuPos.value.y = event.pageY
realTimeData.value.iturbineoperationmode=curnodeData.attributeMap.iturbineoperationmode
realTimeData.value.locked=curnodeData.attributeMap.locked
realTimeData.value.deviceId=curnodeData.irn
realTimeData.value.name=curnodeData.name
OperateVisible.value = true
}
const sendCommand = (type: 'setTurbineFastStart' | 'setTurbineStop' | 'setTurbineResetStatusCode') => {
const sendTypeEnum = {
setTurbineFastStart: '风机快速启动指令',
setTurbineStop: '风机停机指令',
setTurbineResetStatusCode: '风机复位故障代码指令',
}
ElMessageBox.confirm('确认发送' + sendTypeEnum[type] + '吗？', '', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
}).then(() => {
const serviceName = sendTypeEnum[type]
const optDesc = serviceName + ',设定值为：1'
sendCommandReq({
deviceId: realTimeData.value.deviceId as string,
serviceCode: type,
serviceName,
optDesc,
opValue: 1,
}).then((res) => {
if (res.code == 200) {
ElMessage.success('指令发送成功')
} else {
ElMessage.error('指令发送失败')
}
})
})
}
const sendManualCommand = (type: 1 | 0) => {
const serviceName = type === 0 ? '风机解锁' : '风机锁定'
ElMessageBox.confirm('确认' + serviceName + '吗？', '', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
}).then(() => {
sendManualCommandReq({
deviceId: realTimeData.value.deviceId as string,
serviceCode: 'Locked',
serviceName,
optDesc: serviceName + ',设定值为：' + type,
opValue: type,
}).then((res) => {
if (res.code == 200) {
ElMessage.success('指令发送成功')
} else {
ElMessage.error('指令发送失败')
}
})
})
}
</script>
<style scoped lang="scss">
@ -247,10 +347,10 @@ const handleClick = (row) => {
text-align: center;
top: 5px;
left: 17px;
z-index: 3;
/* z-index: 3;*/
}
.leafs {
z-index: 1;
/* z-index: 1;*/
position: absolute;
/* animation: leafRotate 1s infinite linear;*/
transform-origin: center center;
@ -313,6 +413,17 @@ const handleClick = (row) => {
}
}
}
.modelOperate{
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
width: 80px;
/* height: 80px;*/
.el-button {
margin: 5px;
}
}
}
@media screen and (max-width: 1680px) {