1548 lines
58 KiB
Vue
1548 lines
58 KiB
Vue
|
<template>
|
||
|
|
<div class="default-main" ref="HomeHight">
|
||
|
|
<el-row :gutter="20" style="margin: 0px">
|
||
|
|
<el-col :md="24" :lg="6" style="padding: 0px">
|
||
|
|
<div class="grid-content ep-bg-purple">
|
||
|
|
<!--风场概览-->
|
||
|
|
<div class="overview panelBg">
|
||
|
|
<el-text class="mx-1 homelabel">风场概览</el-text>
|
||
|
|
<el-row :gutter="10">
|
||
|
|
<el-col :sm="24" :md="12">
|
||
|
|
<div :xs="24" :sm="6" class="small-panel" style="margin-bottom: 10px">
|
||
|
|
<img class="small-panel-pic" src="~assets/dashboard/viewP.png" alt="" />
|
||
|
|
<div class="small-base">
|
||
|
|
<div>
|
||
|
|
<span class="content-number">{{ realData.attributeMap.windfarmactivepower }}</span> <span>MW</span>
|
||
|
|
</div>
|
||
|
|
<div>功率</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div :sm="24" :md="6" class="small-panel">
|
||
|
|
<img class="small-panel-pic" src="~assets/dashboard/viewW.png" alt="" />
|
||
|
|
<div class="small-base">
|
||
|
|
<div>
|
||
|
|
<span class="content-number">{{ realData.attributeMap.windfarmavgwindspeed }}</span> <span>m/s</span>
|
||
|
|
</div>
|
||
|
|
<div>风速</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</el-col>
|
||
|
|
<el-col :sm="24" :md="12">
|
||
|
|
<div :xs="24" :sm="6" class="small-panel" style="margin-bottom: 10px">
|
||
|
|
<img class="small-panel-pic" src="~assets/dashboard/viewR.png" alt="" />
|
||
|
|
<div class="small-base">
|
||
|
|
<div>
|
||
|
|
<span class="content-number">{{ realData.attributeMap.windfarmdayoperationhours }}</span> <span>H</span>
|
||
|
|
</div>
|
||
|
|
<div>日利用小时</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div :xs="24" :sm="6" class="small-panel">
|
||
|
|
<img class="small-panel-pic" src="~assets/dashboard/viewY.png" alt="" />
|
||
|
|
<div class="small-base">
|
||
|
|
<div>
|
||
|
|
<span class="content-number">{{ realData.attributeMap.windfarmmonthoperationhours }}</span> <span>H</span>
|
||
|
|
</div>
|
||
|
|
<div>月利用小时</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!--今日运行状态-->
|
||
|
|
<div class="status panelBg">
|
||
|
|
<el-text class="mx-1 homelabel" style="margin-bottom: 0">今日运行状态</el-text>
|
||
|
|
<el-row :gutter="10" class="statusrow" style="margin-bottom: 0">
|
||
|
|
<el-col :span="12">
|
||
|
|
<div class="status-panel toal-panel">
|
||
|
|
<img class="status-panel-pic" src="~assets/dashboard/status1.png" alt="" />
|
||
|
|
<div class="status-base-main">
|
||
|
|
<div>
|
||
|
|
<span class="content-number">{{ currentDayStatus.windTurbineNum }}</span> <span>台</span>
|
||
|
|
</div>
|
||
|
|
<div>风机台数</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="12">
|
||
|
|
<div class="status-panel toal-panel">
|
||
|
|
<img class="status-panel-pic" src="~assets/dashboard/status2.png" alt="" />
|
||
|
|
<div class="status-base-main">
|
||
|
|
<div>
|
||
|
|
<span class="content-number">{{ currentDayStatus.installedCapacity }}</span> <span>MW</span>
|
||
|
|
</div>
|
||
|
|
<div>装机容量</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
<el-row :gutter="10" class="statusrow">
|
||
|
|
<el-col :span="12">
|
||
|
|
<div class="status-panel status-con">
|
||
|
|
<div>
|
||
|
|
<img class="status-panel-piczt" src="~assets/dashboard/status04.png" alt="" />
|
||
|
|
<p>运行</p>
|
||
|
|
</div>
|
||
|
|
<div class="status-base">
|
||
|
|
<div class="capacity">
|
||
|
|
<p class="content-number">{{ currentDayStatus.runCapacityTotal }}</p>
|
||
|
|
<p>MW</p>
|
||
|
|
</div>
|
||
|
|
<div class="units">
|
||
|
|
<p class="content-number">{{ currentDayStatus.runNum }}</p>
|
||
|
|
<p>台</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="12">
|
||
|
|
<div class="status-panel status-con">
|
||
|
|
<div>
|
||
|
|
<img class="status-panel-piczt" src="~assets/dashboard/status03.png" alt="" />
|
||
|
|
<p>启动</p>
|
||
|
|
</div>
|
||
|
|
<div class="status-base">
|
||
|
|
<div class="capacity">
|
||
|
|
<p class="content-number">{{ currentDayStatus.StartCapacityTotal }}</p>
|
||
|
|
<p>MW</p>
|
||
|
|
</div>
|
||
|
|
<div class="units">
|
||
|
|
<p class="content-number">{{ currentDayStatus.StarteNum }}</p>
|
||
|
|
<p>台</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
<el-row :gutter="10" class="statusrow">
|
||
|
|
<el-col :span="12">
|
||
|
|
<div class="status-panel status-con">
|
||
|
|
<div>
|
||
|
|
<img class="status-panel-piczt" src="~assets/dashboard/status01.png" alt="" />
|
||
|
|
<p>待机</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="status-base">
|
||
|
|
<div class="capacity">
|
||
|
|
<p class="content-number">{{ currentDayStatus.faultCapacityTotal }}</p>
|
||
|
|
<p>MW</p>
|
||
|
|
</div>
|
||
|
|
<div class="units">
|
||
|
|
<p class="content-number">{{ currentDayStatus.faultNum }}</p>
|
||
|
|
<p>台</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="12">
|
||
|
|
<div class="status-panel status-con">
|
||
|
|
<div>
|
||
|
|
<img class="status-panel-piczt" src="~assets/dashboard/status06.png" alt="" />
|
||
|
|
<p>停机</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="status-base">
|
||
|
|
<div class="capacity">
|
||
|
|
<p class="content-number">{{ currentDayStatus.standbyCapacityTotal }}</p>
|
||
|
|
<p>MW</p>
|
||
|
|
</div>
|
||
|
|
<div class="units">
|
||
|
|
<p class="content-number">{{ currentDayStatus.standbyNum }}</p>
|
||
|
|
<p>台</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
<el-row :gutter="10">
|
||
|
|
<el-col :span="12">
|
||
|
|
<div class="status-panel status-con">
|
||
|
|
<div>
|
||
|
|
<img class="status-panel-piczt" src="~assets/dashboard/status02.png" alt="" />
|
||
|
|
<p>离线</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="status-base">
|
||
|
|
<div class="capacity">
|
||
|
|
<p class="content-number">{{ currentDayStatus.offlineCapacityTotal }}</p>
|
||
|
|
<p>MW</p>
|
||
|
|
</div>
|
||
|
|
<div class="units">
|
||
|
|
<p class="content-number">{{ currentDayStatus.offlineNum }}</p>
|
||
|
|
<p>台</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="12">
|
||
|
|
<div class="status-panel status-con">
|
||
|
|
<div>
|
||
|
|
<img class="status-panel-piczt" src="~assets/dashboard/status05.png" alt="" />
|
||
|
|
<p>维修</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="status-base">
|
||
|
|
<div class="capacity">
|
||
|
|
<p class="content-number">{{ currentDayStatus.StandCapacityTotal }}</p>
|
||
|
|
<p>MW</p>
|
||
|
|
</div>
|
||
|
|
<div class="units">
|
||
|
|
<p class="content-number">{{ currentDayStatus.StandNum }}</p>
|
||
|
|
<p>台</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!--功率趋势-->
|
||
|
|
<div class="power panelBg" style="margin-bottom: 0; padding-bottom: 10px">
|
||
|
|
<div class="cardLabel">功率趋势</div>
|
||
|
|
<div class="chartBox">
|
||
|
|
<div class="power-chart" ref="powerChartRef"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</el-col>
|
||
|
|
|
||
|
|
<el-col :md="24" :lg="12" class="col-center">
|
||
|
|
<div class="grid-content ep-bg-purple-light">
|
||
|
|
<!--风机矩阵-->
|
||
|
|
<div class="matrix panelBg">
|
||
|
|
<el-text class="mx-1 homelabel">风机矩阵</el-text>
|
||
|
|
<el-scrollbar>
|
||
|
|
<WindContent :parentData="FanList" @StatusListData="StatusListData"></WindContent>
|
||
|
|
</el-scrollbar>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</el-col>
|
||
|
|
<el-col :md="24" :lg="6" style="padding: 0px">
|
||
|
|
<div class="grid-content ep-bg-purple cardContentRight">
|
||
|
|
<!--发电量概况-->
|
||
|
|
<div class="summarize">
|
||
|
|
<div class="cardLabel">发电量概况</div>
|
||
|
|
<div class="summarize-panel-list">
|
||
|
|
<div class="summarize-panel">
|
||
|
|
<div class="summarize-panel-pic">
|
||
|
|
<img src="~assets/dashboard/fdl1.png" alt="" />
|
||
|
|
</div>
|
||
|
|
<div class="summarize-panel-base">
|
||
|
|
<div>
|
||
|
|
<span class="content-number">{{ realData.attributeMap.windfarmdayprodenergy }}</span>
|
||
|
|
</div>
|
||
|
|
<div>kWh</div>
|
||
|
|
<div>日发电量</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="summarize-panel">
|
||
|
|
<div class="summarize-panel-pic">
|
||
|
|
<img src="~assets/dashboard/fdl2.png" alt="" />
|
||
|
|
</div>
|
||
|
|
<div class="summarize-panel-base">
|
||
|
|
<div>
|
||
|
|
<span class="content-number">{{ realData.attributeMap.windfarmmonthprodenergy }}</span>
|
||
|
|
</div>
|
||
|
|
<div>kWh</div>
|
||
|
|
<div>月发电量</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="summarize-panel">
|
||
|
|
<div class="summarize-panel-pic">
|
||
|
|
<img src="~assets/dashboard/fdl3.png" alt="" />
|
||
|
|
</div>
|
||
|
|
<div class="summarize-panel-base">
|
||
|
|
<div>
|
||
|
|
<span class="content-number">{{ realData.attributeMap.windfarmyearprodenergy }}</span>
|
||
|
|
</div>
|
||
|
|
<div>kWh</div>
|
||
|
|
<div>年发电量</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="summarize-panel">
|
||
|
|
<div class="summarize-panel-pic">
|
||
|
|
<img src="~assets/dashboard/fdl4.png" alt="" />
|
||
|
|
</div>
|
||
|
|
<div class="summarize-panel-base">
|
||
|
|
<div>
|
||
|
|
<span class="content-number">{{ realData.attributeMap.windfarmtotalprodenergy }}</span>
|
||
|
|
</div>
|
||
|
|
<div>kWh</div>
|
||
|
|
<div>总发电量</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!--发电量趋势-->
|
||
|
|
<div class="trend panelBg">
|
||
|
|
<el-text class="mx-1 homelabel">发电量趋势</el-text>
|
||
|
|
<el-row :gutter="10">
|
||
|
|
<el-col :span="24">
|
||
|
|
<el-tabs v-model="trendChartType" class="demo-tabs trend-tabs" @tab-click="tabhandleClick" ref="userTab">
|
||
|
|
<el-tab-pane label="日" name="day"> </el-tab-pane>
|
||
|
|
<el-tab-pane label="月" name="month"> </el-tab-pane>
|
||
|
|
</el-tabs>
|
||
|
|
<div class="trend-chart" ref="trendChartRef"></div>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!--实时告警-->
|
||
|
|
<div class="realPart panelBg" style="margin-bottom: 0">
|
||
|
|
<el-text class="mx-1 homelabel">实时告警</el-text>
|
||
|
|
<el-row :gutter="10">
|
||
|
|
<el-col :span="24">
|
||
|
|
<el-table
|
||
|
|
:data="tableData"
|
||
|
|
class="tablePart"
|
||
|
|
height="250"
|
||
|
|
ref="myTable"
|
||
|
|
@mouseover.native="clearScroll"
|
||
|
|
@mouseleave.native="createScroll"
|
||
|
|
>
|
||
|
|
<el-table-column fixed prop="eventTimeFormate" label="时间" width="80" />
|
||
|
|
<el-table-column prop="deviceCode" label="风机" width="70" />
|
||
|
|
<el-table-column prop="eventText" label="告警内容" />
|
||
|
|
<el-table-column label="操作" width="70">
|
||
|
|
<template #default="scope">
|
||
|
|
<div class="tableOperate comfirmed" style="color: #333333" v-if="scope.row.confirmed">已确认</div>
|
||
|
|
<div class="tableOperate" v-else>
|
||
|
|
<a style="color: #0277b3; cursor: pointer" @click="open(scope.row)">确认</a>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
</div>
|
||
|
|
</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 { useI18n } from 'vue-i18n'
|
||
|
|
import WindContent from '/@/views/backend/home/windMatrix.vue'
|
||
|
|
import { equipList } from '/@/api/backend/realData/request'
|
||
|
|
import { getWindFarmRealData, getWindTurbineMatrixData, getHistoryData } from '/@/api/backend/dashboard.ts'
|
||
|
|
import { dayjs, ElMessage, ElMessageBox, TableInstance } from 'element-plus'
|
||
|
|
import { getRealTimeState } from '/@/views/backend/equipment/airBlower/utils.ts'
|
||
|
|
import { useRoute } from 'vue-router'
|
||
|
|
import { getAlarmListReq, eventComfirm } from '/@/api/backend/alarms/request'
|
||
|
|
const route = useRoute()
|
||
|
|
|
||
|
|
const d = new Date()
|
||
|
|
const { t } = useI18n()
|
||
|
|
let timer: any = null
|
||
|
|
let myTable = ref<TableInstance>()
|
||
|
|
|
||
|
|
const realData = ref({
|
||
|
|
windFarmId: '',
|
||
|
|
attributeMap: {},
|
||
|
|
})
|
||
|
|
|
||
|
|
const formatAttributeValue = (value: any) => {
|
||
|
|
if (value === undefined) {
|
||
|
|
return '-'
|
||
|
|
}
|
||
|
|
if (typeof value !== 'number') {
|
||
|
|
throw new Error('Invalid data type for attribute value')
|
||
|
|
}
|
||
|
|
return value % 1 === 0 ? value : value.toFixed(2)
|
||
|
|
}
|
||
|
|
const overviewList = () => {
|
||
|
|
getWindFarmRealData().then((res) => {
|
||
|
|
if (res.code == 200) {
|
||
|
|
res.data.attributeMap.windfarmdayprodenergy = formatAttributeValue(res.data.attributeMap.windfarmdayprodenergy)
|
||
|
|
res.data.attributeMap.windfarmmonthprodenergy = formatAttributeValue(res.data.attributeMap.windfarmmonthprodenergy)
|
||
|
|
res.data.attributeMap.windfarmactivepower = formatAttributeValue(res.data.attributeMap.windfarmactivepower)
|
||
|
|
res.data.attributeMap.windfarmavgwindspeed = formatAttributeValue(res.data.attributeMap.windfarmavgwindspeed)
|
||
|
|
res.data.attributeMap.windfarmdayoperationhours = formatAttributeValue(res.data.attributeMap.windfarmdayoperationhours)
|
||
|
|
res.data.attributeMap.windfarmmonthoperationhours = formatAttributeValue(res.data.attributeMap.windfarmmonthoperationhours)
|
||
|
|
res.data.attributeMap.windfarmyearprodenergy = formatAttributeValue(res.data.attributeMap.windfarmyearprodenergy)
|
||
|
|
res.data.attributeMap.windfarmtotalprodenergy = formatAttributeValue(res.data.attributeMap.windfarmtotalprodenergy)
|
||
|
|
const data: any = {
|
||
|
|
windFarmId: res.data.windFarmId,
|
||
|
|
attributeMap: {
|
||
|
|
windfarmdayprodenergy: res.data.attributeMap.windfarmdayprodenergy,
|
||
|
|
windfarmmonthprodenergy: res.data.attributeMap.windfarmmonthprodenergy,
|
||
|
|
windfarmactivepower: res.data.attributeMap.windfarmactivepower,
|
||
|
|
windfarmavgwindspeed: res.data.attributeMap.windfarmavgwindspeed,
|
||
|
|
windfarmdayoperationhours: res.data.attributeMap.windfarmdayoperationhours,
|
||
|
|
windfarmmonthoperationhours: res.data.attributeMap.windfarmmonthoperationhours,
|
||
|
|
windfarmyearprodenergy: res.data.attributeMap.windfarmyearprodenergy,
|
||
|
|
windfarmtotalprodenergy: res.data.attributeMap.windfarmtotalprodenergy,
|
||
|
|
},
|
||
|
|
}
|
||
|
|
|
||
|
|
realData.value = data
|
||
|
|
} else {
|
||
|
|
ElMessage.error({
|
||
|
|
message: res.msg,
|
||
|
|
type: 'error',
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
const currentDayStatus = ref({
|
||
|
|
windTurbineNum: 0,
|
||
|
|
installedCapacity: 0,
|
||
|
|
runCapacityTotal: 0,
|
||
|
|
runNum: 0,
|
||
|
|
standbyCapacityTotal: 0,
|
||
|
|
standbyNum: 0,
|
||
|
|
faultCapacityTotal: 0,
|
||
|
|
faultNum: 0,
|
||
|
|
offlineCapacityTotal: 0,
|
||
|
|
offlineNum: 0,
|
||
|
|
StandCapacityTotal: 0,
|
||
|
|
StandNum: 0,
|
||
|
|
StartCapacityTotal: 0,
|
||
|
|
StarteNum: 0,
|
||
|
|
})
|
||
|
|
const deviceCode = ref([])
|
||
|
|
const FanList = ref([])
|
||
|
|
const StatusListData = () => {
|
||
|
|
getWindTurbineMatrixData().then((res) => {
|
||
|
|
if (res.code == 200) {
|
||
|
|
currentDayStatus.value.windTurbineNum = res.data.length
|
||
|
|
const data = res.data.map((item, index) => {
|
||
|
|
const state = getRealTimeState(item.attributeMap)
|
||
|
|
item.attributeMap.iwindspeed =
|
||
|
|
item.attributeMap.iwindspeed !== undefined
|
||
|
|
? item.attributeMap.iwindspeed % 1 === 0
|
||
|
|
? item.attributeMap.iwindspeed
|
||
|
|
: item.attributeMap.iwindspeed.toFixed(2)
|
||
|
|
: '--'
|
||
|
|
item.attributeMap.igenpower =
|
||
|
|
item.attributeMap.igenpower !== undefined
|
||
|
|
? item.attributeMap.igenpower % 1 === 0
|
||
|
|
? item.attributeMap.igenpower
|
||
|
|
: item.attributeMap.igenpower.toFixed(2)
|
||
|
|
: '--'
|
||
|
|
item.attributeMap.ikwhthisday =
|
||
|
|
item.attributeMap.ikwhthisday !== undefined
|
||
|
|
? item.attributeMap.ikwhthisday % 1 === 0
|
||
|
|
? item.attributeMap.ikwhthisday
|
||
|
|
: item.attributeMap.ikwhthisday.toFixed(2)
|
||
|
|
: '--'
|
||
|
|
// 初始化计数器和累加器
|
||
|
|
if (index === 0) {
|
||
|
|
currentDayStatus.value.runNum = 0
|
||
|
|
currentDayStatus.value.standbyNum = 0
|
||
|
|
currentDayStatus.value.StandNum = 0
|
||
|
|
currentDayStatus.value.StarteNum = 0
|
||
|
|
currentDayStatus.value.offlineNum = 0
|
||
|
|
currentDayStatus.value.faultNum = 0
|
||
|
|
|
||
|
|
currentDayStatus.value.runCapacityTotal = 0
|
||
|
|
currentDayStatus.value.standbyCapacityTotal = 0
|
||
|
|
currentDayStatus.value.StandCapacityTotal = 0
|
||
|
|
currentDayStatus.value.StartCapacityTotal = 0
|
||
|
|
currentDayStatus.value.offlineCapacityTotal = 0
|
||
|
|
currentDayStatus.value.faultCapacityTotal = 0
|
||
|
|
currentDayStatus.value.installedCapacity = 0
|
||
|
|
}
|
||
|
|
|
||
|
|
// 更新容量
|
||
|
|
if (item.nominalCapacity !== undefined) {
|
||
|
|
currentDayStatus.value.installedCapacity += item.nominalCapacity
|
||
|
|
}
|
||
|
|
|
||
|
|
// 根据运行模式更新状态和数量
|
||
|
|
//const mode = item.attributeMap.iturbineoperationmode
|
||
|
|
if ([7, 8, 17, 18, 19, 20, 21].includes(state)) {
|
||
|
|
currentDayStatus.value.runCapacityTotal += item.nominalCapacity
|
||
|
|
currentDayStatus.value.runNum += 1
|
||
|
|
} else if ([1, 2, 3, 4, 5, 6].includes(state)) {
|
||
|
|
currentDayStatus.value.standbyCapacityTotal += item.nominalCapacity
|
||
|
|
currentDayStatus.value.standbyNum += 1
|
||
|
|
} else if ([9, 10, 12, 13, 14, 15].includes(state)) {
|
||
|
|
currentDayStatus.value.StandCapacityTotal += item.nominalCapacity
|
||
|
|
currentDayStatus.value.StandNum += 1
|
||
|
|
} else if (state === 16) {
|
||
|
|
currentDayStatus.value.StartCapacityTotal += item.nominalCapacity
|
||
|
|
currentDayStatus.value.StarteNum += 1
|
||
|
|
} else if (state === 0) {
|
||
|
|
currentDayStatus.value.offlineCapacityTotal += item.nominalCapacity
|
||
|
|
currentDayStatus.value.offlineNum += 1
|
||
|
|
} else if (state === 11) {
|
||
|
|
currentDayStatus.value.faultCapacityTotal += item.nominalCapacity
|
||
|
|
currentDayStatus.value.faultNum += 1
|
||
|
|
}
|
||
|
|
const propertiesToFormat = [
|
||
|
|
'runCapacityTotal',
|
||
|
|
'standbyCapacityTotal',
|
||
|
|
'StandCapacityTotal',
|
||
|
|
'StartCapacityTotal',
|
||
|
|
'offlineCapacityTotal',
|
||
|
|
'faultCapacityTotal',
|
||
|
|
'installedCapacity',
|
||
|
|
]
|
||
|
|
|
||
|
|
propertiesToFormat.forEach((property) => {
|
||
|
|
if (currentDayStatus.value[property] !== null && currentDayStatus.value[property] !== undefined) {
|
||
|
|
currentDayStatus.value[property] = Number(currentDayStatus.value[property].toFixed(1))
|
||
|
|
}
|
||
|
|
})
|
||
|
|
return {
|
||
|
|
irn: item.irn,
|
||
|
|
name: item.name ?? '-',
|
||
|
|
model: item.model || '-',
|
||
|
|
modelId: item.modelId,
|
||
|
|
belongLine: item.belongLine || '-',
|
||
|
|
standard: item.standard,
|
||
|
|
attributeMap: {
|
||
|
|
iwindspeed: item.attributeMap.iwindspeed,
|
||
|
|
igenpower: item.attributeMap.igenpower,
|
||
|
|
ikwhthisday: item.attributeMap.ikwhthisday,
|
||
|
|
iturbineoperationmode: state,
|
||
|
|
locked: item.attributeMap.locked,
|
||
|
|
irotorspeed: item.attributeMap.irotorspeed,
|
||
|
|
},
|
||
|
|
}
|
||
|
|
})
|
||
|
|
FanList.value = data
|
||
|
|
} else {
|
||
|
|
ElMessage.error({
|
||
|
|
message: res.msg,
|
||
|
|
type: 'error',
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
const state: {
|
||
|
|
charts: { powerChart: any; trendChart: any }
|
||
|
|
remark: string
|
||
|
|
workingTimeFormat: string
|
||
|
|
pauseWork: boolean
|
||
|
|
} = reactive({
|
||
|
|
charts: { powerChart: null, trendChart: null },
|
||
|
|
remark: 'dashboard.Loading',
|
||
|
|
workingTimeFormat: '',
|
||
|
|
pauseWork: false,
|
||
|
|
})
|
||
|
|
const powerChartRef = ref()
|
||
|
|
const powerChartData: { time: any; values: any } = {
|
||
|
|
time: {},
|
||
|
|
values: {},
|
||
|
|
}
|
||
|
|
const initpowerChart = () => {
|
||
|
|
const powerChart = state.charts.powerChart ?? echarts.init(powerChartRef.value as unknown as HTMLElement)
|
||
|
|
const option = {
|
||
|
|
grid: {
|
||
|
|
top: 50,
|
||
|
|
right: 25,
|
||
|
|
bottom: 10,
|
||
|
|
left: 25,
|
||
|
|
containLabel: true,
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'axis',
|
||
|
|
axisPointer: {
|
||
|
|
type: 'shadow',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
xAxis: {
|
||
|
|
type: 'category',
|
||
|
|
axisLine: {
|
||
|
|
show: true,
|
||
|
|
lineStyle: {
|
||
|
|
color: '#dadada',
|
||
|
|
width: 1,
|
||
|
|
type: 'solid',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
//x轴文字的配置
|
||
|
|
show: true,
|
||
|
|
textStyle: {
|
||
|
|
color: '#4E5969',
|
||
|
|
},
|
||
|
|
interval: 'auto',
|
||
|
|
//rotate: 45
|
||
|
|
},
|
||
|
|
splitLine: {
|
||
|
|
//分割线配置
|
||
|
|
show: false,
|
||
|
|
lineStyle: {
|
||
|
|
color: '#999999',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data: powerChartData.time.WindFarmAvgWindSpee ?? powerChartData.time.WindFarmActivePower,
|
||
|
|
},
|
||
|
|
yAxis: [
|
||
|
|
{
|
||
|
|
type: 'value',
|
||
|
|
name: '功率MW',
|
||
|
|
nameTextStyle: {
|
||
|
|
color: '#4E5969',
|
||
|
|
},
|
||
|
|
axisLine: {
|
||
|
|
show: false,
|
||
|
|
lineStyle: {
|
||
|
|
color: '#dadada',
|
||
|
|
width: 0,
|
||
|
|
type: 'solid',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
//x轴文字的配置
|
||
|
|
show: true,
|
||
|
|
textStyle: {
|
||
|
|
color: '#4E5969',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
axisTick: { show: false },
|
||
|
|
splitLine: {
|
||
|
|
interval: 50,
|
||
|
|
lineStyle: {
|
||
|
|
type: 'dashed',
|
||
|
|
color: '#dadada',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
type: 'value',
|
||
|
|
name: '风速m/s',
|
||
|
|
nameTextStyle: {
|
||
|
|
color: '#4E5969',
|
||
|
|
padding: [0, 50, 0, 0],
|
||
|
|
},
|
||
|
|
axisLine: {
|
||
|
|
show: false,
|
||
|
|
lineStyle: {
|
||
|
|
color: '#dadada',
|
||
|
|
width: 0,
|
||
|
|
type: 'solid',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
//x轴文字的配置
|
||
|
|
show: true,
|
||
|
|
textStyle: {
|
||
|
|
color: '#4E5969',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
axisTick: { show: false },
|
||
|
|
splitLine: {
|
||
|
|
interval: 50,
|
||
|
|
lineStyle: {
|
||
|
|
type: 'dashed',
|
||
|
|
color: '#dadada',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
],
|
||
|
|
legend: {
|
||
|
|
data: ['全场总有功功率', '全场平均风速'],
|
||
|
|
textStyle: {
|
||
|
|
color: '#73767a',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: '全场总有功功率',
|
||
|
|
type: 'bar',
|
||
|
|
//barWidth: 10,
|
||
|
|
itemStyle: {
|
||
|
|
color: '#00A7EB',
|
||
|
|
barBorderRadius: 2,
|
||
|
|
},
|
||
|
|
data: powerChartData.values?.WindFarmActivePower ?? [],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '全场平均风速',
|
||
|
|
type: 'line',
|
||
|
|
yAxisIndex: 1,
|
||
|
|
itemStyle: {
|
||
|
|
color: '#FF7E00',
|
||
|
|
barBorderRadius: 2,
|
||
|
|
},
|
||
|
|
smooth: 0.6,
|
||
|
|
symbol: 'none',
|
||
|
|
areaStyle: {
|
||
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
|
|
{
|
||
|
|
offset: 0,
|
||
|
|
color: 'rgba(255,126,0,0.8)',
|
||
|
|
},
|
||
|
|
]),
|
||
|
|
},
|
||
|
|
data: powerChartData.values?.WindFarmAvgWindSpeed ?? [],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
}
|
||
|
|
powerChart.setOption(option)
|
||
|
|
state.charts.powerChart = powerChart
|
||
|
|
}
|
||
|
|
|
||
|
|
const trendChartRef = ref<VNodeRef>()
|
||
|
|
const TrendDataForDay: {
|
||
|
|
currentPeriod: {
|
||
|
|
time: string[]
|
||
|
|
value: number[]
|
||
|
|
}
|
||
|
|
samePeriod: {
|
||
|
|
time: string[]
|
||
|
|
value: number[]
|
||
|
|
}
|
||
|
|
} = {
|
||
|
|
currentPeriod: {
|
||
|
|
time: [],
|
||
|
|
value: [],
|
||
|
|
},
|
||
|
|
samePeriod: {
|
||
|
|
time: [],
|
||
|
|
value: [],
|
||
|
|
},
|
||
|
|
}
|
||
|
|
|
||
|
|
const TrendDataForMonth: {
|
||
|
|
currentPeriod: {
|
||
|
|
time: string[]
|
||
|
|
value: number[]
|
||
|
|
}
|
||
|
|
samePeriod: {
|
||
|
|
time: string[]
|
||
|
|
value: number[]
|
||
|
|
}
|
||
|
|
} = {
|
||
|
|
currentPeriod: {
|
||
|
|
time: [],
|
||
|
|
value: [],
|
||
|
|
},
|
||
|
|
samePeriod: {
|
||
|
|
time: [],
|
||
|
|
value: [],
|
||
|
|
},
|
||
|
|
}
|
||
|
|
|
||
|
|
const inittrendChart = (type: 'day' | 'month') => {
|
||
|
|
const currentPeriod: number[] = type === 'day' ? TrendDataForDay.currentPeriod.value : TrendDataForMonth.currentPeriod.value
|
||
|
|
const samePeriod: number[] = type === 'day' ? TrendDataForDay.samePeriod.value : TrendDataForMonth.samePeriod.value
|
||
|
|
const xAxisdata: string[] = type === 'day' ? TrendDataForDay.currentPeriod.time : TrendDataForMonth.currentPeriod.time
|
||
|
|
const trendChart = state.charts?.trendChart ?? echarts.init(trendChartRef.value as unknown as HTMLElement)
|
||
|
|
|
||
|
|
const option = {
|
||
|
|
grid: {
|
||
|
|
top: 30,
|
||
|
|
right: 10,
|
||
|
|
bottom: 30,
|
||
|
|
left: 25,
|
||
|
|
borderColor: '#dadada',
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'axis',
|
||
|
|
axisPointer: {
|
||
|
|
type: 'shadow',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
xAxis: {
|
||
|
|
type: 'category',
|
||
|
|
axisLine: {
|
||
|
|
show: true,
|
||
|
|
lineStyle: {
|
||
|
|
color: '#dadada',
|
||
|
|
width: 1,
|
||
|
|
type: 'solid',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
//x轴文字的配置
|
||
|
|
show: true,
|
||
|
|
textStyle: {
|
||
|
|
color: '#4E5969',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
splitLine: {
|
||
|
|
//分割线配置
|
||
|
|
show: false,
|
||
|
|
lineStyle: {
|
||
|
|
color: '#999999',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data: xAxisdata,
|
||
|
|
},
|
||
|
|
yAxis: [
|
||
|
|
{
|
||
|
|
type: 'value',
|
||
|
|
name: 'kWh',
|
||
|
|
nameTextStyle: {
|
||
|
|
color: '#4E5969',
|
||
|
|
},
|
||
|
|
axisLine: {
|
||
|
|
show: false,
|
||
|
|
lineStyle: {
|
||
|
|
color: '#dadada',
|
||
|
|
width: 0,
|
||
|
|
type: 'solid',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
//x轴文字的配置
|
||
|
|
show: true,
|
||
|
|
textStyle: {
|
||
|
|
color: '#4E5969',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
axisTick: { show: false },
|
||
|
|
splitLine: {
|
||
|
|
interval: 50,
|
||
|
|
lineStyle: {
|
||
|
|
type: 'dashed',
|
||
|
|
color: '#dadada',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
],
|
||
|
|
legend: {
|
||
|
|
data: ['本期', '同期'],
|
||
|
|
textStyle: {
|
||
|
|
color: '#73767a',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: '本期',
|
||
|
|
data: currentPeriod,
|
||
|
|
type: 'bar',
|
||
|
|
smooth: true,
|
||
|
|
itemStyle: {
|
||
|
|
color: '#0277B3',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '同期',
|
||
|
|
data: samePeriod,
|
||
|
|
type: 'bar',
|
||
|
|
smooth: true,
|
||
|
|
itemStyle: {
|
||
|
|
color: '#00A096',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
],
|
||
|
|
}
|
||
|
|
trendChart.setOption(option)
|
||
|
|
state.charts.trendChart = trendChart
|
||
|
|
}
|
||
|
|
|
||
|
|
const echartsResize = () => {
|
||
|
|
nextTick(() => {
|
||
|
|
const chartKeys = Object.keys(state.charts) as Array<keyof typeof state.charts>
|
||
|
|
chartKeys.forEach((key) => {
|
||
|
|
state.charts[key].resize()
|
||
|
|
})
|
||
|
|
})
|
||
|
|
}
|
||
|
|
onActivated(() => {
|
||
|
|
echartsResize()
|
||
|
|
})
|
||
|
|
const timestampToTime = (timestamp: any) => {
|
||
|
|
timestamp = timestamp ? timestamp : null
|
||
|
|
let date = new Date(timestamp)
|
||
|
|
let Y = date.getFullYear() + '-'
|
||
|
|
let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
|
||
|
|
let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
|
||
|
|
let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
|
||
|
|
let m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
|
||
|
|
return Y + M + D + h + m
|
||
|
|
}
|
||
|
|
const tableData = ref()
|
||
|
|
|
||
|
|
const getTableData = (deviceCode) => {
|
||
|
|
const today = new Date()
|
||
|
|
const threeDaysAgo = new Date(today)
|
||
|
|
threeDaysAgo.setDate(today.getDate() - 3)
|
||
|
|
const startTime = threeDaysAgo.getTime()
|
||
|
|
const data: any = {
|
||
|
|
startTime: startTime,
|
||
|
|
endTime: Date.now(),
|
||
|
|
deviceCode: deviceCode,
|
||
|
|
limit: 100,
|
||
|
|
}
|
||
|
|
console.log(JSON.stringify(data))
|
||
|
|
getAlarmListReq(data).then((res) => {
|
||
|
|
if (res.code == 200) {
|
||
|
|
//tableData.value = res.rows
|
||
|
|
tableData.value = res.rows.map((item: any) => {
|
||
|
|
return {
|
||
|
|
...item,
|
||
|
|
eventTimeFormate: timestampToTime(item.eventTime),
|
||
|
|
}
|
||
|
|
})
|
||
|
|
} else {
|
||
|
|
ElMessage.error(res.msg ?? '查询失败')
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
const open = (val: any) => {
|
||
|
|
ElMessageBox.confirm('是否确认?', '提示', {
|
||
|
|
confirmButtonText: '确认',
|
||
|
|
cancelButtonText: '取消',
|
||
|
|
type: 'warning',
|
||
|
|
})
|
||
|
|
.then(() => {
|
||
|
|
okSubmit(val)
|
||
|
|
})
|
||
|
|
.catch(() => {
|
||
|
|
ElMessage({
|
||
|
|
type: 'info',
|
||
|
|
message: '取消确认',
|
||
|
|
})
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
const okSubmit = (val: any) => {
|
||
|
|
const reqData: any = [
|
||
|
|
{
|
||
|
|
eventTime: val.eventTime,
|
||
|
|
eventId: val.eventId,
|
||
|
|
confirmed: 1,
|
||
|
|
deviceId: val.deviceId,
|
||
|
|
},
|
||
|
|
]
|
||
|
|
eventComfirm(reqData)
|
||
|
|
.then((res: any) => {
|
||
|
|
if (res.code == 200) {
|
||
|
|
ElMessage.success(res.msg ?? '确认成功')
|
||
|
|
getTableData(deviceCode.value)
|
||
|
|
} else {
|
||
|
|
ElMessage.error(res.msg ?? '查询失败')
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch((err) => {
|
||
|
|
ElMessage.error(err?.response?.data?.msg ?? '查询失败')
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
const clearScroll = () => {
|
||
|
|
clearInterval(timer)
|
||
|
|
timer = null
|
||
|
|
}
|
||
|
|
const createScroll = () => {
|
||
|
|
clearScroll()
|
||
|
|
const table = myTable.value.layout.table.refs
|
||
|
|
const tableWrapper = table.bodyWrapper.firstElementChild.firstElementChild
|
||
|
|
|
||
|
|
timer = setInterval(() => {
|
||
|
|
tableWrapper.scrollTop += 1
|
||
|
|
if (tableWrapper.clientHeight + tableWrapper.scrollTop == tableWrapper.scrollHeight) {
|
||
|
|
tableWrapper.scrollTop = 0
|
||
|
|
}
|
||
|
|
}, 30)
|
||
|
|
}
|
||
|
|
|
||
|
|
const getChartData = <T extends string = any>(params: {
|
||
|
|
startTime: number
|
||
|
|
endTime: number
|
||
|
|
attr: T[]
|
||
|
|
interval: string
|
||
|
|
}): Promise<{ times: { [K in T]: string[] }; val: { [K in T]: number[] } }> => {
|
||
|
|
return new Promise((resolve) => {
|
||
|
|
const data = {
|
||
|
|
startTime: params.startTime,
|
||
|
|
endTime: params.endTime,
|
||
|
|
devices: [
|
||
|
|
{
|
||
|
|
deviceId: '',
|
||
|
|
attributes: params.attr,
|
||
|
|
},
|
||
|
|
],
|
||
|
|
interval: params.interval,
|
||
|
|
}
|
||
|
|
/* console.log(JSON.stringify(data))*/
|
||
|
|
getHistoryData(data).then((res) => {
|
||
|
|
if (res.success) {
|
||
|
|
if (typeof res.data === 'object' && res.data !== null && Object.keys(res.data).length === 0) {
|
||
|
|
const times: any = {}
|
||
|
|
const val: any = {}
|
||
|
|
resolve({ times, val })
|
||
|
|
} else {
|
||
|
|
const data = res.data['1848624295633317890']
|
||
|
|
const rangeKeys = Object.keys(data)
|
||
|
|
const times: any = {}
|
||
|
|
const val: any = {}
|
||
|
|
rangeKeys.forEach((key) => {
|
||
|
|
times[key] = []
|
||
|
|
val[key] = []
|
||
|
|
data[key].times.forEach((item: number) => {
|
||
|
|
if (params.interval == '5m') {
|
||
|
|
times[key].push(dayjs(item).format('HH:mm'))
|
||
|
|
} else if (params.interval == '1d') {
|
||
|
|
times[key].push(dayjs(item).format('DD'))
|
||
|
|
} else if (params.interval == '1n') {
|
||
|
|
times[key].push(dayjs(item).format('MM'))
|
||
|
|
}
|
||
|
|
})
|
||
|
|
data[key].values.forEach((item: number) => {
|
||
|
|
val[key].push(item)
|
||
|
|
})
|
||
|
|
})
|
||
|
|
resolve({ times, val })
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
})
|
||
|
|
}
|
||
|
|
const getThisDayChartData = () => {
|
||
|
|
return new Promise((resolve) => {
|
||
|
|
getChartData<'WindFarmActivePower' | 'WindFarmAvgWindSpeed '>({
|
||
|
|
startTime: new Date(new Date().toLocaleDateString()).getTime(),
|
||
|
|
endTime: Date.now(),
|
||
|
|
attr: ['WindFarmActivePower', 'WindFarmAvgWindSpeed '],
|
||
|
|
interval: '5m',
|
||
|
|
}).then(({ times, val }) => {
|
||
|
|
powerChartData.time = { WindFarmActivePower: times.WindFarmActivePower, WindFarmAvgWindSpeed: times.WindFarmAvgWindSpeed }
|
||
|
|
powerChartData.values = { WindFarmActivePower: val.WindFarmActivePower, WindFarmAvgWindSpeed: val.WindFarmAvgWindSpeed }
|
||
|
|
resolve(true)
|
||
|
|
})
|
||
|
|
})
|
||
|
|
}
|
||
|
|
const getLastYearTodayTimestamp = () => {
|
||
|
|
const now = new Date()
|
||
|
|
const lastYear = now.getFullYear() - 1
|
||
|
|
const lastYearToday = new Date(lastYear, now.getMonth(), now.getDate())
|
||
|
|
return lastYearToday.getTime()
|
||
|
|
}
|
||
|
|
const getLastYearChartData = () => {
|
||
|
|
return new Promise((resolve) => {
|
||
|
|
const start = getLastYearTodayTimestamp()
|
||
|
|
const end = new Date()
|
||
|
|
end.setFullYear(end.getFullYear() - 1)
|
||
|
|
end.setMonth(end.getMonth() + 1, 0) // 设置为下个月的第一天，然后减去一天
|
||
|
|
|
||
|
|
getChartData<'WindFarmDayProdEnergy'>({
|
||
|
|
startTime: start,
|
||
|
|
endTime: end.getTime(),
|
||
|
|
attr: ['WindFarmDayProdEnergy'],
|
||
|
|
interval: '1d',
|
||
|
|
}).then(({ times, val }) => {
|
||
|
|
TrendDataForDay.samePeriod.time = times.WindFarmDayProdEnergy
|
||
|
|
TrendDataForDay.samePeriod.value = val.WindFarmDayProdEnergy
|
||
|
|
resolve(true)
|
||
|
|
})
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
const getThisDayChartForHourData = () => {
|
||
|
|
return new Promise((resolve) => {
|
||
|
|
getChartData<'WindFarmDayProdEnergy'>({
|
||
|
|
startTime: new Date(new Date().toLocaleDateString()).getTime(),
|
||
|
|
endTime: Date.now(),
|
||
|
|
attr: ['WindFarmDayProdEnergy'],
|
||
|
|
interval: '1d',
|
||
|
|
}).then(({ times, val }) => {
|
||
|
|
TrendDataForDay.currentPeriod.time = times.WindFarmDayProdEnergy
|
||
|
|
TrendDataForDay.currentPeriod.value = val.WindFarmDayProdEnergy
|
||
|
|
resolve(true)
|
||
|
|
})
|
||
|
|
})
|
||
|
|
}
|
||
|
|
//发电连月
|
||
|
|
const getLastMonthTodayTimestamp = () => {
|
||
|
|
const now = new Date() // 当前日期
|
||
|
|
const thisYear = now.getFullYear() // 获取当前年份
|
||
|
|
const lastYear = thisYear - 1 // 计算去年年份
|
||
|
|
const firstDayOfLastYear = new Date(lastYear, 0, 1) // 设置为去年的一月一日
|
||
|
|
return firstDayOfLastYear.getTime()
|
||
|
|
}
|
||
|
|
const getThisMonthTodayTimestamp = () => {
|
||
|
|
const now = new Date() // 当前日期
|
||
|
|
const thisYear = now.getFullYear() // 获取当前年份
|
||
|
|
const firstDayOfYear = new Date(thisYear, 0, 1) // 设置为今年的一月一日
|
||
|
|
return firstDayOfYear.getTime()
|
||
|
|
}
|
||
|
|
const getLastYear = () => {
|
||
|
|
const now = new Date() // 当前日期
|
||
|
|
const thisYear = now.getFullYear() // 获取当前年份
|
||
|
|
const lastYear = thisYear - 1 // 计算去年年份
|
||
|
|
const lastDayOfLastYear = new Date(lastYear, 11, 0) // 设置为去年12月的最后一天
|
||
|
|
return lastDayOfLastYear.getTime()
|
||
|
|
}
|
||
|
|
const getLastMonthChartData = () => {
|
||
|
|
return new Promise((resolve) => {
|
||
|
|
const start = getLastMonthTodayTimestamp()
|
||
|
|
const end = getLastYear()
|
||
|
|
getChartData<'WIndFarmMonthProdEnergy'>({
|
||
|
|
startTime: start,
|
||
|
|
endTime: end,
|
||
|
|
attr: ['WIndFarmMonthProdEnergy'],
|
||
|
|
interval: '1n',
|
||
|
|
}).then(({ times, val }) => {
|
||
|
|
TrendDataForMonth.samePeriod.time = times.WIndFarmMonthProdEnergy
|
||
|
|
TrendDataForMonth.samePeriod.value = val.WIndFarmMonthProdEnergy
|
||
|
|
resolve(true)
|
||
|
|
})
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
const getThisMonthChartForHourData = () => {
|
||
|
|
return new Promise((resolve) => {
|
||
|
|
const start = getThisMonthTodayTimestamp()
|
||
|
|
getChartData<'WIndFarmMonthProdEnergy'>({
|
||
|
|
startTime: start,
|
||
|
|
endTime: Date.now(),
|
||
|
|
attr: ['WIndFarmMonthProdEnergy'],
|
||
|
|
interval: '1n',
|
||
|
|
}).then(({ times, val }) => {
|
||
|
|
TrendDataForMonth.currentPeriod.time = times.WIndFarmMonthProdEnergy
|
||
|
|
TrendDataForMonth.currentPeriod.value = val.WIndFarmMonthProdEnergy
|
||
|
|
resolve(true)
|
||
|
|
})
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
const getAllChartData = (type: ('power' | 'trend')[] = ['power', 'trend']) => {
|
||
|
|
if (type.includes('power')) {
|
||
|
|
getThisDayChartData().then(() => {
|
||
|
|
initpowerChart()
|
||
|
|
})
|
||
|
|
}
|
||
|
|
if (type.includes('trend')) {
|
||
|
|
const trendDataForLastYear = getLastYearChartData()
|
||
|
|
const trendDataForThisDay = getThisDayChartForHourData()
|
||
|
|
const trendDataForLastMonth = getLastMonthChartData()
|
||
|
|
const trendDataForThisMonth = getThisMonthChartForHourData()
|
||
|
|
Promise.all([trendDataForLastYear, trendDataForThisDay, trendDataForLastMonth, trendDataForThisMonth]).then(() => {
|
||
|
|
inittrendChart(trendChartType.value)
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const trendChartType = ref<'day' | 'month'>('day')
|
||
|
|
const tabhandleClick = () => {
|
||
|
|
state.charts.trendChart.clear()
|
||
|
|
nextTick(() => {
|
||
|
|
inittrendChart(trendChartType.value)
|
||
|
|
})
|
||
|
|
}
|
||
|
|
const activeName = ref('first')
|
||
|
|
//let autoUpdateTimer: any = null
|
||
|
|
let autoUpdateForSecondTimer: any = null
|
||
|
|
let autoUpdateTimerForMinuteTimer: any = null
|
||
|
|
let autoUpdateTimerForHourTimer: any = null
|
||
|
|
const autoUpdate = () => {
|
||
|
|
if (!autoUpdateForSecondTimer) {
|
||
|
|
autoUpdateForSecondTimer = setInterval(() => {
|
||
|
|
StatusListData()
|
||
|
|
overviewList()
|
||
|
|
}, 2000)
|
||
|
|
}
|
||
|
|
if (!autoUpdateTimerForMinuteTimer) {
|
||
|
|
autoUpdateTimerForMinuteTimer = setInterval(() => {
|
||
|
|
getAllChartData(['power'])
|
||
|
|
//initpowerChart()
|
||
|
|
}, 60000)
|
||
|
|
}
|
||
|
|
if (!autoUpdateTimerForHourTimer) {
|
||
|
|
autoUpdateTimerForHourTimer = setInterval(() => {
|
||
|
|
getAllChartData(['trend'])
|
||
|
|
//inittrendChart(trendChartType.value)
|
||
|
|
}, 60000 * 30)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
const HomeHight = ref()
|
||
|
|
const computedHeight = reactive({
|
||
|
|
powerHeight: '298px',
|
||
|
|
centerHeight: '1100px',
|
||
|
|
alarmHeight: '350px',
|
||
|
|
})
|
||
|
|
const sizeChange = () => {
|
||
|
|
const rect = HomeHight.value?.getBoundingClientRect()
|
||
|
|
if (!rect) return
|
||
|
|
computedHeight.powerHeight = rect.height - 630 + 'px'
|
||
|
|
computedHeight.alarmHeight = rect.height - 578 + 'px'
|
||
|
|
computedHeight.centerHeight = rect.height - 0 + 'px'
|
||
|
|
if (window.screen.width < 1360) {
|
||
|
|
computedHeight.alarmHeight = '200px'
|
||
|
|
computedHeight.powerHeight = '200px'
|
||
|
|
}
|
||
|
|
if (rect.width < 1360) {
|
||
|
|
computedHeight.alarmHeight = '200px'
|
||
|
|
computedHeight.powerHeight = '200px'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
window.addEventListener('resize', sizeChange)
|
||
|
|
sizeChange()
|
||
|
|
getAllChartData()
|
||
|
|
createScroll()
|
||
|
|
overviewList()
|
||
|
|
StatusListData()
|
||
|
|
autoUpdate()
|
||
|
|
|
||
|
|
equipList({ objectType: 10002 }).then((res) => {
|
||
|
|
res.data.map((item: any) => {
|
||
|
|
deviceCode.value.push(item.name)
|
||
|
|
})
|
||
|
|
|
||
|
|
getTableData(deviceCode.value)
|
||
|
|
})
|
||
|
|
useEventListener(window, 'resize', echartsResize)
|
||
|
|
})
|
||
|
|
|
||
|
|
onUnmounted(() => {
|
||
|
|
window.removeEventListener('resize', sizeChange)
|
||
|
|
clearInterval(timer)
|
||
|
|
autoUpdateForSecondTimer && clearInterval(autoUpdateForSecondTimer)
|
||
|
|
const chartKeys = Object.keys(state.charts) as Array<keyof typeof state.charts>
|
||
|
|
chartKeys.forEach((key) => {
|
||
|
|
state.charts[key].dispose()
|
||
|
|
})
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
$marginNum: 10px;
|
||
|
|
$labelHeight: 38px;
|
||
|
|
@mixin cardDefaultStyle {
|
||
|
|
margin-top: $marginNum;
|
||
|
|
margin-bottom: $marginNum;
|
||
|
|
padding: 10px;
|
||
|
|
border-radius: 10px;
|
||
|
|
background-color: #fff;
|
||
|
|
}
|
||
|
|
@mixin cardlabel {
|
||
|
|
.cardLabel {
|
||
|
|
width: 100%;
|
||
|
|
height: $labelHeight;
|
||
|
|
font-size: 18px;
|
||
|
|
font-weight: 600;
|
||
|
|
color: #4e5969;
|
||
|
|
line-height: 38px;
|
||
|
|
padding-left: 10px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.default-main {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
min-height: 920px;
|
||
|
|
padding: 0;
|
||
|
|
margin: 0;
|
||
|
|
color: #4e5969;
|
||
|
|
background-color: #f2f3f5;
|
||
|
|
.el-row {
|
||
|
|
width: calc(100% - 0px);
|
||
|
|
.el-col {
|
||
|
|
height: calc(100% - 10px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.content-number {
|
||
|
|
color: #333333;
|
||
|
|
font-size: 20px;
|
||
|
|
}
|
||
|
|
.homelabel {
|
||
|
|
font-family: PingFangSC-Semibold;
|
||
|
|
font-size: 18px;
|
||
|
|
color: #4e5969;
|
||
|
|
letter-spacing: 0;
|
||
|
|
line-height: 18px;
|
||
|
|
font-weight: 600;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
.grid-content {
|
||
|
|
/* overflow-x: hidden;*/
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
.panelBg {
|
||
|
|
background-color: #ffffff;
|
||
|
|
padding: 20px;
|
||
|
|
border-radius: 5px;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
.overview {
|
||
|
|
/* @include cardDefaultStyle;
|
||
|
|
@include cardlabel;*/
|
||
|
|
min-height: 216px;
|
||
|
|
.small-panel {
|
||
|
|
display: flex;
|
||
|
|
border: 1px solid #e1edf6;
|
||
|
|
border-radius: 10px;
|
||
|
|
padding: 10px;
|
||
|
|
.small-panel-pic {
|
||
|
|
width: 36px;
|
||
|
|
height: 36px;
|
||
|
|
}
|
||
|
|
.small-base {
|
||
|
|
word-break: keep-all;
|
||
|
|
margin-left: 10px;
|
||
|
|
color: #2c3f5d;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.status {
|
||
|
|
/* @include cardDefaultStyle;
|
||
|
|
@include cardlabel;*/
|
||
|
|
min-height: 374px;
|
||
|
|
.statusrow {
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
.status-con {
|
||
|
|
padding-left: 20px !important;
|
||
|
|
background: #f0f6ff;
|
||
|
|
border-radius: 10px;
|
||
|
|
}
|
||
|
|
.status-panel {
|
||
|
|
display: flex;
|
||
|
|
padding: 10px;
|
||
|
|
font-size: 12px;
|
||
|
|
.status-panel-pic {
|
||
|
|
width: 60px;
|
||
|
|
height: 60px;
|
||
|
|
}
|
||
|
|
.status-base-main {
|
||
|
|
word-break: keep-all;
|
||
|
|
margin-left: 10px;
|
||
|
|
line-height: 23px;
|
||
|
|
padding-top: 6px;
|
||
|
|
}
|
||
|
|
.status-base {
|
||
|
|
margin-left: 10px;
|
||
|
|
line-height: 23px;
|
||
|
|
padding: 6px 10px 0 10px;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
.status-panel-piczt {
|
||
|
|
width: 24px;
|
||
|
|
height: 24px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.power {
|
||
|
|
@include cardDefaultStyle;
|
||
|
|
@include cardlabel;
|
||
|
|
width: 100%;
|
||
|
|
min-height: 290px;
|
||
|
|
height: v-bind('computedHeight.powerHeight');
|
||
|
|
.chartBox {
|
||
|
|
height: calc(100% - $labelHeight);
|
||
|
|
.power-chart {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.matrix {
|
||
|
|
background: url('/@/assets/dashboard/bg1.png') no-repeat #ffffff;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
min-height: 900px;
|
||
|
|
width: 100%;
|
||
|
|
height: v-bind('computedHeight.centerHeight');
|
||
|
|
margin-bottom: 0;
|
||
|
|
.el-scrollbar {
|
||
|
|
height: calc(100% - 20px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.summarize {
|
||
|
|
padding: 10px;
|
||
|
|
border-radius: 10px;
|
||
|
|
background-color: #fff;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
word-break: keep-all;
|
||
|
|
@include cardlabel;
|
||
|
|
min-height: 224px;
|
||
|
|
.summarize-panel-list {
|
||
|
|
width: 100%;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
}
|
||
|
|
.summarize-panel {
|
||
|
|
margin: 5px;
|
||
|
|
width: 25%;
|
||
|
|
display: flex;
|
||
|
|
padding: 20px 0;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
background-color: #f0f6ff;
|
||
|
|
border-radius: 10px;
|
||
|
|
.summarize-panel-base {
|
||
|
|
width: 100%;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
div {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
font-size: 14px;
|
||
|
|
color: rgb(78, 89, 105);
|
||
|
|
.content-number {
|
||
|
|
color: #333333;
|
||
|
|
font-size: 20px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.trend {
|
||
|
|
min-height: 300px;
|
||
|
|
height: 335px;
|
||
|
|
overflow: hidden;
|
||
|
|
.trend-tabs {
|
||
|
|
:deep(.el-tabs__item) {
|
||
|
|
border: none;
|
||
|
|
text-align: center;
|
||
|
|
width: 40px;
|
||
|
|
padding: 0;
|
||
|
|
line-height: 24px;
|
||
|
|
height: 24px;
|
||
|
|
}
|
||
|
|
:deep(.el-tabs__header .el-tabs__nav) {
|
||
|
|
border-radius: 0;
|
||
|
|
border: none;
|
||
|
|
}
|
||
|
|
:deep(.el-tabs__header) {
|
||
|
|
border-bottom: 0;
|
||
|
|
float: right;
|
||
|
|
margin-top: -43px;
|
||
|
|
}
|
||
|
|
:deep(.el-tabs__content) {
|
||
|
|
clear: both;
|
||
|
|
}
|
||
|
|
:deep(.el-tabs__item.is-active) {
|
||
|
|
background: rgba(2, 119, 179, 0.2);
|
||
|
|
border-radius: 4px;
|
||
|
|
border: none;
|
||
|
|
}
|
||
|
|
:deep(.el-tabs__nav-wrap:after) {
|
||
|
|
background: none;
|
||
|
|
}
|
||
|
|
:deep(.el-tabs__active-bar) {
|
||
|
|
background: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.trend-chart {
|
||
|
|
width: 100%;
|
||
|
|
height: 260px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.realPart {
|
||
|
|
/* @include cardDefaultStyle;
|
||
|
|
@include cardlabel;*/
|
||
|
|
/*height: 370px;*/
|
||
|
|
min-height: 340px;
|
||
|
|
height: v-bind('computedHeight.alarmHeight');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media screen and (max-width: 1920px) {
|
||
|
|
.default-main {
|
||
|
|
.trend {
|
||
|
|
height: 315px !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@media screen and (max-width: 1280px) {
|
||
|
|
.default-main {
|
||
|
|
/*height: auto !important;*/
|
||
|
|
overflow: none;
|
||
|
|
.col-center {
|
||
|
|
padding: 0px !important;
|
||
|
|
}
|
||
|
|
.windtitle {
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
.summarize {
|
||
|
|
.summarize-panel {
|
||
|
|
margin: 2px !important;
|
||
|
|
.summarize-panel-base {
|
||
|
|
white-space: normal !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@media screen and (max-width: 1360px) {
|
||
|
|
.default-main {
|
||
|
|
font-size: 11px !important;
|
||
|
|
height: auto !important;
|
||
|
|
|
||
|
|
.summarize {
|
||
|
|
word-break: break-all !important;
|
||
|
|
}
|
||
|
|
.matrix {
|
||
|
|
height: auto !important;
|
||
|
|
}
|
||
|
|
.overview {
|
||
|
|
.small-panel {
|
||
|
|
.small-base {
|
||
|
|
margin-left: 0px !important;
|
||
|
|
font-size: 11px !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@media screen and (max-width: 1480px) {
|
||
|
|
.default-main {
|
||
|
|
font-size: 12px !important;
|
||
|
|
.overview {
|
||
|
|
.small-panel {
|
||
|
|
padding: 13px 0px !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.status {
|
||
|
|
.status-panel {
|
||
|
|
.status-base-main {
|
||
|
|
margin-left: 5px !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@media screen and (max-width: 1680px) {
|
||
|
|
.default-main {
|
||
|
|
/*font-size: 12px !important;*/
|
||
|
|
.content-number {
|
||
|
|
font-size: 16px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.homelabel {
|
||
|
|
font-size: 16px !important;
|
||
|
|
margin-bottom: 10px !important;
|
||
|
|
}
|
||
|
|
.grid-content {
|
||
|
|
.cardLabel {
|
||
|
|
font-size: 16px !important;
|
||
|
|
}
|
||
|
|
.panelBg {
|
||
|
|
/* padding: 10px !important;*/
|
||
|
|
margin-bottom: 10px !important;
|
||
|
|
}
|
||
|
|
.summarize {
|
||
|
|
margin-bottom: 10px !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.toal-panel {
|
||
|
|
padding: 0 !important;
|
||
|
|
padding-bottom: 10px !important;
|
||
|
|
}
|
||
|
|
// .matrix {
|
||
|
|
// height: 900px !important;
|
||
|
|
// }
|
||
|
|
:deep(.el-tabs__header) {
|
||
|
|
margin-top: -33px !important;
|
||
|
|
}
|
||
|
|
.overview {
|
||
|
|
.small-panel {
|
||
|
|
.small-base {
|
||
|
|
margin-left: 5px !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|