2004 lines
69 KiB
Vue
2004 lines
69 KiB
Vue
<template>
|
||
<div class="windBlower" ref="windBlower">
|
||
<el-row>
|
||
<el-col :md="24" :lg="6">
|
||
<div class="cardContentLeft">
|
||
<!--实时预览-->
|
||
<div class="overview">
|
||
<div class="cardLabel">
|
||
{{ '名称：' + route.query.name + ' ' + '型号：' + route.query.model }}
|
||
</div>
|
||
<div class="overviewDataSection" ref="listContainer">
|
||
<div class="overviewDataSectionItem">
|
||
<span class="realLeft">机组运行状态：</span>
|
||
<span class="reafRight">{{ realTimeDataState }}</span>
|
||
</div>
|
||
<div class="overviewDataSectionItem">
|
||
<span class="realLeft">风速：</span>
|
||
<span class="reafRight">{{ overviewData.iwindspeed }}</span>
|
||
</div>
|
||
<div class="overviewDataSectionItem">
|
||
<span class="realLeft">风向：</span>
|
||
<span class="reafRight">{{ overviewData.iwinddirection }}</span>
|
||
</div>
|
||
<div class="overviewDataSectionItem">
|
||
<span class="realLeft">发电机转速：</span>
|
||
<span class="reafRight">{{ overviewData.igenspeed }}</span>
|
||
</div>
|
||
<div class="overviewDataSectionItem">
|
||
<span class="realLeft">有功功率：</span>
|
||
<span class="reafRight">{{ overviewData.igenpower }}</span>
|
||
</div>
|
||
<div class="overviewDataSectionItem">
|
||
<span class="realLeft">给定有功功率：</span>
|
||
<span class="reafRight">{{ overviewData.iactivepowersetpointvalue }}</span>
|
||
</div>
|
||
<div class="overviewDataSectionItem">
|
||
<span class="realLeft">无功功率：</span>
|
||
<span class="reafRight">{{ overviewData.ireactivepower }}</span>
|
||
</div>
|
||
<div class="overviewDataSectionItem">
|
||
<span class="realLeft">给定无功功率：</span>
|
||
<span class="reafRight">{{ overviewData.ireactivepowersetpointvalue }}</span>
|
||
</div>
|
||
<div class="overviewDataSectionItem">
|
||
<span class="realLeft">限电原因：</span>
|
||
<span class="reafRight">{{ overviewData.powerlimitsource }}</span>
|
||
</div>
|
||
<div class="overviewDataSectionItem">
|
||
<span class="realLeft">机舱位置：</span>
|
||
<span class="reafRight">{{ overviewData.ivanedirection }}</span>
|
||
</div>
|
||
<div class="overviewDataSectionItem">
|
||
<span class="realLeft">日发电量：</span>
|
||
<span class="reafRight">{{ overviewData.ikwhthisday }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="overviewDataBtn">
|
||
<el-icon color="#0064AA" @click="() => (overviewSlotData.visible = true)"><DArrowRight /></el-icon>
|
||
</div>
|
||
</div>
|
||
|
||
<!--温度-->
|
||
<div class="temperatureList">
|
||
<div class="chartPart-item" @click="openTemperature">
|
||
<div class="chartParm" ref="temperatureChartRef1"></div>
|
||
</div>
|
||
<div class="chartPart-item" @click="openTemperature">
|
||
<div class="chartParm" ref="temperatureChartRef2"></div>
|
||
</div>
|
||
<div class="chartPart-item" @click="openTemperature">
|
||
<div class="chartParm" ref="temperatureChartRef3"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
|
||
<el-col :md="24" :lg="12">
|
||
<div class="cardContentCenter">
|
||
<!--风机控制-->
|
||
<div class="controlBackgroundImg" ref="backgroundImgRef">
|
||
<div class="switchWindBlower">
|
||
<el-tooltip :content="beforeAirBlower.name">
|
||
<el-icon color="#fff" size="30" @click="switchAirblower(0)"><ArrowLeftBold /></el-icon>
|
||
</el-tooltip>
|
||
<el-tooltip :content="afterAirBlower.name">
|
||
<el-icon color="#fff" size="30" @click="switchAirblower(1)"><ArrowRightBold /></el-icon>
|
||
</el-tooltip>
|
||
</div>
|
||
<div class="control-type">
|
||
<el-tag v-if="realTimeData.locked === 1" class="control-tag control-tag-left" type="primary">已锁定</el-tag>
|
||
<el-tag class="control-tag" type="primary">{{ realTimeDataState }}</el-tag>
|
||
</div>
|
||
<div class="btnLeft">
|
||
<el-button
|
||
@click="sendCommand('setTurbineFastStart')"
|
||
v-if="realTimeData.processedoperationmode !== 16"
|
||
class="control-btn"
|
||
type="primary"
|
||
>启动</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>
|
||
<el-tooltip :content="subSystem[0]">
|
||
<div @click="openSubSystem(0)" class="dot index-1"></div>
|
||
</el-tooltip>
|
||
<el-tooltip :content="subSystem[1]">
|
||
<div @click="openSubSystem(1)" class="dot index-2"></div>
|
||
</el-tooltip>
|
||
<el-tooltip :content="subSystem[2]">
|
||
<div @click="openSubSystem(2)" class="dot index-3"></div>
|
||
</el-tooltip>
|
||
<el-tooltip :content="subSystem[3]">
|
||
<div @click="openSubSystem(3)" class="dot index-4"></div>
|
||
</el-tooltip>
|
||
<el-tooltip :content="subSystem[4]">
|
||
<div @click="openSubSystem(4)" class="dot index-5"></div>
|
||
</el-tooltip>
|
||
<el-tooltip :content="subSystem[5]">
|
||
<div @click="openSubSystem(5)" class="dot index-6"></div>
|
||
</el-tooltip>
|
||
<el-tooltip :content="subSystem[6]">
|
||
<div @click="openSubSystem(6)" class="dot index-7"></div>
|
||
</el-tooltip>
|
||
<el-tooltip :content="subSystem[7]">
|
||
<div @click="openSubSystem(7)" class="dot index-8"></div>
|
||
</el-tooltip>
|
||
<el-tooltip :content="subSystem[8]">
|
||
<div @click="openSubSystem(8)" class="dot index-9"></div>
|
||
</el-tooltip>
|
||
<el-tooltip :content="subSystem[9]">
|
||
<div @click="openSubSystem(9)" class="dot index-10"></div>
|
||
</el-tooltip>
|
||
<el-tooltip :content="subSystem[10]">
|
||
<div @click="openSubSystem(10)" class="dot index-11"></div>
|
||
</el-tooltip>
|
||
<el-tooltip :content="subSystem[11]">
|
||
<div @click="openSubSystem(11)" class="dot index-12"></div>
|
||
</el-tooltip>
|
||
</div>
|
||
<!-- 功率趋势 -->
|
||
<div class="chartPart">
|
||
<div class="power">
|
||
<div class="chartBox">
|
||
<div class="power-chart" ref="powerChartRef"></div>
|
||
</div>
|
||
</div>
|
||
<div class="chartPart-item item_bar">
|
||
<div class="frequencyChart" ref="frequencyChartRef"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :md="24" :lg="6" style="background: #f5f5f5">
|
||
<div class="cardContentRight">
|
||
<!--发电量概况-->
|
||
<div class="summarize">
|
||
<div class="cardLabel">发电量概况</div>
|
||
<div class="summarize-panel-list">
|
||
<div class="summarize-panel-row">
|
||
<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">{{ realTimeDataForSingle.ikwhthisday }}</span>
|
||
</div>
|
||
<div>{{ realTimeDataForSingleUnit.ikwhthisday }}</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">{{ realTimeDataForSingle.monthprodenergy }}</span>
|
||
</div>
|
||
<div>{{ realTimeDataForSingleUnit.monthprodenergy }}</div>
|
||
<div>月发电量</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="summarize-panel-row">
|
||
<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">{{ realTimeDataForSingle.yearprodenergy }}</span>
|
||
</div>
|
||
<div>{{ realTimeDataForSingleUnit.yearprodenergy }}</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">{{ realTimeDataForSingle.ikwhoverall }}</span>
|
||
</div>
|
||
<div>{{ realTimeDataForSingleUnit.ikwhoverall }}</div>
|
||
<div>总发电量</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--实时告警-->
|
||
<div class="alarm" style="margin-bottom: 0">
|
||
<div class="cardLabel">实时告警</div>
|
||
<el-table
|
||
:data="tableData"
|
||
class="tablePart"
|
||
height="calc(100% - 18px)"
|
||
ref="myTable"
|
||
@mouseover.native="clearScroll"
|
||
@mouseleave.native="createScroll"
|
||
>
|
||
<el-table-column fixed prop="time" label="时间" />
|
||
<el-table-column prop="alertcontent" label="告警信息" />
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
<el-dialog v-model="visible" :title="subSystemName" width="1020" :before-close="handleClose">
|
||
<div class="dialogContent">
|
||
<el-scrollbar>
|
||
<div class="PitchPart">
|
||
<!-- <el-row > -->
|
||
<!-- <el-col :span="12"> -->
|
||
<div class="Pitchitem" v-for="item in subSystemDataList" :key="item.name">
|
||
<span class="PitchitemLeft">{{ item.name }}</span>
|
||
<span class="PitchitemRight">{{ item.value }}</span>
|
||
</div>
|
||
<!-- </el-col> -->
|
||
<!-- </el-row> -->
|
||
</div>
|
||
</el-scrollbar>
|
||
</div>
|
||
</el-dialog>
|
||
<el-dialog v-model="overviewSlotData.visible" title="实时预览">
|
||
<template #header>
|
||
<div class="overviewSlot">
|
||
<span style="font-size: 20px">实时预览</span>
|
||
<div class="radioForOverviewType">
|
||
<el-radio-group v-model="overviewSlotData.type">
|
||
<el-radio value="138">模拟量</el-radio>
|
||
<el-radio value="199">计算量</el-radio>
|
||
<el-radio value="140">状态量</el-radio>
|
||
</el-radio-group>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<Overview v-bind="overviewSlotData"></Overview>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { nextTick, onActivated, onMounted, reactive, ref, computed, watch, onBeforeMount, onUnmounted, VNode, VNodeRef } from 'vue'
|
||
import * as echarts from 'echarts'
|
||
import { useEventListener } from '@vueuse/core'
|
||
import { useI18n } from 'vue-i18n'
|
||
import { DArrowRight, ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
|
||
import { getRealValueListReq, getRealValueRangeReq } from '/@/api/backend/deviceModel/request'
|
||
import { getModelAttributeListReq } from '/@/api/backend/deviceModel/request'
|
||
import { getAirBlowerListReq } from '/@/api/backend/airBlower/request'
|
||
import { useRoute, useRouter } from 'vue-router'
|
||
import Overview from './overview.vue'
|
||
import { TableInstance } from 'element-plus'
|
||
import { dayjs, ElMessage, ElMessageBox } from 'element-plus'
|
||
import { getRealTimeState, getCutDecimalsValue, malFunctionKeys } from '/@/views/backend/equipment/airBlower/utils'
|
||
import { sendCommandReq, sendManualCommandReq } from '/@/api/backend/control/request'
|
||
import { getAlarmListReq } from '/@/api/backend/alarms/request'
|
||
import { queryfaultCodeDict } from '/@/api/backend/theoreticalpowerCurve/request'
|
||
import { useEnumStore } from '/@/stores/enums'
|
||
import { adminBaseRoutePath } from '/@/router/static/adminBase'
|
||
|
||
const enumStore = useEnumStore()
|
||
|
||
const route = useRoute()
|
||
const router = useRouter()
|
||
const { t } = useI18n()
|
||
|
||
const windBlower = ref()
|
||
const backgroundImgRef = ref()
|
||
const computedHeight = reactive({
|
||
powerHeight: '305px',
|
||
centerHeight: '1100px',
|
||
alarmHeight: '360px',
|
||
backgroundImgHeight: '435px',
|
||
})
|
||
const sizeChange = () => {
|
||
// const rect = windBlower.value?.getBoundingClientRect()
|
||
// if (!rect) return
|
||
// computedHeight.powerHeight = rect.height - 626 + 'px'
|
||
// computedHeight.alarmHeight = rect.height - 570 + 'px'
|
||
// computedHeight.centerHeight = rect.height - 20 + 'px'
|
||
const bgiRect = backgroundImgRef.value?.getBoundingClientRect()
|
||
console.log(bgiRect)
|
||
|
||
if (!bgiRect) return
|
||
computedHeight.backgroundImgHeight = bgiRect.height + 'px'
|
||
console.log(computedHeight.backgroundImgHeight)
|
||
}
|
||
|
||
let timer: any = null
|
||
let myTable = ref<TableInstance>()
|
||
|
||
const overviewData = reactive({
|
||
// processedoperationmode: '-',
|
||
iwindspeed: '-',
|
||
iwinddirection: '-',
|
||
igenspeed: '-',
|
||
igenpower: '-',
|
||
iactivepowersetpointvalue: '-',
|
||
ireactivepower: '-',
|
||
ireactivepowersetpointvalue: '-',
|
||
powerlimitsource: '-',
|
||
ivanedirection: '-',
|
||
ikwhthisday: '-',
|
||
})
|
||
|
||
const realTimeDataForSingle = ref<any>({
|
||
ikwhthisday: '-',
|
||
ikwhoverall: '-',
|
||
igenpower: '-',
|
||
igenspeed: '-',
|
||
ipitchangle: '',
|
||
iwindspeed: '-',
|
||
iwinddirection: '-',
|
||
monthprodenergy: '-',
|
||
yearprodenergy: '-',
|
||
})
|
||
const realTimeDataForSingleUnit = reactive({
|
||
ikwhthisday: 'kWh',
|
||
ikwhoverall: 'kWh',
|
||
igenpower: 'kW',
|
||
igenspeed: 'rpm',
|
||
ipitchangle: '°',
|
||
iwindspeed: 'm/s',
|
||
iwinddirection: '°',
|
||
monthprodenergy: 'kWh',
|
||
yearprodenergy: 'kWh',
|
||
})
|
||
|
||
const state: {
|
||
charts: { powerChart: any; temperatureChart1: any; temperatureChart2: any; temperatureChart3: any; frequencyChart: any }
|
||
remark: string
|
||
workingTimeFormat: string
|
||
pauseWork: boolean
|
||
} = reactive({
|
||
charts: {
|
||
powerChart: null,
|
||
temperatureChart1: null,
|
||
temperatureChart2: null,
|
||
temperatureChart3: null,
|
||
frequencyChart: null,
|
||
// trendChart: null,
|
||
},
|
||
remark: 'dashboard.Loading',
|
||
workingTimeFormat: '',
|
||
pauseWork: false,
|
||
})
|
||
|
||
const powerChartRef = ref<VNodeRef>()
|
||
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 = {
|
||
title: {
|
||
show: true,
|
||
text: '功率趋势',
|
||
textStyle: {
|
||
color: '#4E5969',
|
||
fontSize: 14,
|
||
fontFamily: 'PingFangSC-Semibold',
|
||
},
|
||
padding: 10,
|
||
},
|
||
grid: {
|
||
top: 70,
|
||
right: 23,
|
||
bottom: 10,
|
||
left: 18,
|
||
containLabel: true,
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'line',
|
||
},
|
||
show: true,
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#dadada',
|
||
width: 1,
|
||
type: 'solid',
|
||
},
|
||
},
|
||
axisLabel: {
|
||
//x轴文字的配置
|
||
show: true,
|
||
color: '#4E5969',
|
||
interval: 'auto',
|
||
//rotate: 45
|
||
},
|
||
splitLine: {
|
||
//分割线配置
|
||
show: false,
|
||
lineStyle: {
|
||
color: '#999999',
|
||
},
|
||
},
|
||
data: powerChartData.time.iTheoreticalPower,
|
||
},
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
name: '功率MW',
|
||
nameTextStyle: {
|
||
color: '#4E5969',
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
lineStyle: {
|
||
color: '#dadada',
|
||
width: 0,
|
||
type: 'solid',
|
||
},
|
||
},
|
||
axisLabel: {
|
||
//x轴文字的配置
|
||
show: true,
|
||
color: '#4E5969',
|
||
},
|
||
axisTick: { show: false },
|
||
splitLine: {
|
||
interval: 50,
|
||
lineStyle: {
|
||
type: 'dashed',
|
||
color: '#dadada',
|
||
},
|
||
},
|
||
},
|
||
{
|
||
type: 'value',
|
||
name: '风速m/s',
|
||
nameTextStyle: {
|
||
color: '#4E5969',
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
lineStyle: {
|
||
color: '#dadada',
|
||
width: 0,
|
||
type: 'solid',
|
||
},
|
||
},
|
||
axisLabel: {
|
||
//x轴文字的配置
|
||
show: true,
|
||
color: '#4E5969',
|
||
},
|
||
axisTick: { show: false },
|
||
splitLine: {
|
||
interval: 50,
|
||
lineStyle: {
|
||
type: 'dashed',
|
||
color: '#dadada',
|
||
},
|
||
},
|
||
},
|
||
],
|
||
legend: {
|
||
data: ['有功功率', '理论有功功率', '风速'],
|
||
textStyle: {
|
||
color: '#73767a',
|
||
},
|
||
top: 20,
|
||
},
|
||
series: [
|
||
{
|
||
name: '有功功率',
|
||
type: 'line',
|
||
barWidth: 20,
|
||
itemStyle: {
|
||
color: '#00A7EB',
|
||
barBorderRadius: 2,
|
||
},
|
||
smooth: 0.6,
|
||
symbol: 'none',
|
||
data: powerChartData.values?.iGenPower ?? [],
|
||
},
|
||
{
|
||
name: '理论有功功率',
|
||
type: 'line',
|
||
barWidth: 20,
|
||
itemStyle: {
|
||
color: '#62bd25',
|
||
barBorderRadius: 2,
|
||
},
|
||
smooth: 0.6,
|
||
symbol: 'none',
|
||
data: powerChartData.values?.iTheoreticalPower ?? [],
|
||
},
|
||
{
|
||
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?.iWindSpeed ?? [],
|
||
},
|
||
],
|
||
}
|
||
powerChart.setOption(option)
|
||
state.charts.powerChart = powerChart
|
||
}
|
||
|
||
// const TrendDataForDay: {
|
||
// currentPeriod: {
|
||
// time: string[]
|
||
// value: number[]
|
||
// }
|
||
// samePeriod: {
|
||
// time: string[]
|
||
// value: number[]
|
||
// }
|
||
// } = {
|
||
// currentPeriod: {
|
||
// time: [],
|
||
// value: [],
|
||
// },
|
||
// samePeriod: {
|
||
// time: [],
|
||
// value: [],
|
||
// },
|
||
// }
|
||
|
||
// const TrendDataForMonth = [
|
||
// {
|
||
// currentPeriod: 26.3,
|
||
// samePeriod: 53.5,
|
||
// generationTime: '2024-10-01',
|
||
// },
|
||
// {
|
||
// currentPeriod: 36.3,
|
||
// samePeriod: 53.5,
|
||
// generationTime: '2024-10-02',
|
||
// },
|
||
// {
|
||
// currentPeriod: 46.3,
|
||
// samePeriod: 53.5,
|
||
// generationTime: '2024-10-03',
|
||
// },
|
||
// ]
|
||
|
||
// const trendChartRef = ref<VNodeRef>()
|
||
// const trendChartType = ref<'day' | 'month'>('day')
|
||
// const tabhandleClick = () => {
|
||
// state.charts.trendChart.clear()
|
||
// nextTick(() => {
|
||
// initTrendChart(trendChartType.value)
|
||
// })
|
||
// }
|
||
|
||
// const initTrendChart = (type: 'day' | 'month') => {
|
||
// const currentPeriod: number[] = type === 'day' ? TrendDataForDay.currentPeriod.value : TrendDataForMonth.map((item) => item.currentPeriod)
|
||
// const samePeriod: number[] = type === 'day' ? TrendDataForDay.samePeriod.value : TrendDataForMonth.map((item) => item.samePeriod)
|
||
// const xAxisdata: string[] = type === 'day' ? TrendDataForDay.currentPeriod.time : TrendDataForMonth.map((item) => item.generationTime)
|
||
// const trendChart = state.charts?.trendChart ?? echarts.init(trendChartRef.value as unknown as HTMLElement)
|
||
// const legend = type === 'day' ? ['当天', '环比'] : ['本月', '环比']
|
||
|
||
// const option = {
|
||
// grid: {
|
||
// top: 30,
|
||
// right: 10,
|
||
// bottom: 20,
|
||
// left: 70,
|
||
// 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,
|
||
// 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,
|
||
// color: '#4E5969',
|
||
// },
|
||
// axisTick: { show: false },
|
||
// splitLine: {
|
||
// interval: 50,
|
||
// lineStyle: {
|
||
// type: 'dashed',
|
||
// color: '#dadada',
|
||
// },
|
||
// },
|
||
// },
|
||
// ],
|
||
// legend: {
|
||
// data: legend,
|
||
// textStyle: {
|
||
// color: '#73767a',
|
||
// },
|
||
// },
|
||
// series: [
|
||
// {
|
||
// name: legend[0],
|
||
// data: currentPeriod,
|
||
// type: 'bar',
|
||
// smooth: true,
|
||
// itemStyle: {
|
||
// color: '#0277B3',
|
||
// },
|
||
// },
|
||
// {
|
||
// name: legend[1],
|
||
// data: samePeriod,
|
||
// type: 'bar',
|
||
// smooth: true,
|
||
// itemStyle: {
|
||
// color: '#00A096',
|
||
// },
|
||
// },
|
||
// ],
|
||
// }
|
||
// trendChart.setOption(option)
|
||
// state.charts.trendChart = trendChart
|
||
// }
|
||
const temperatureChartsData: { name: string; value: string | number }[] = [
|
||
{
|
||
name: '环境温度(°C)',
|
||
value: 0,
|
||
},
|
||
{
|
||
name: '舱内温度(°C)',
|
||
value: 0,
|
||
},
|
||
{
|
||
name: '塔基柜温度(°C)',
|
||
value: 0,
|
||
},
|
||
]
|
||
const temperatureChartRef1 = ref<VNodeRef>()
|
||
const temperatureChartRef2 = ref<VNodeRef>()
|
||
const temperatureChartRef3 = ref<VNodeRef>()
|
||
const initTemperatureChart = () => {
|
||
const temperatureChart1 = state.charts.temperatureChart1 ?? echarts.init(temperatureChartRef1.value as unknown as HTMLElement)
|
||
const temperatureChart2 = state.charts.temperatureChart2 ?? echarts.init(temperatureChartRef2.value as unknown as HTMLElement)
|
||
const temperatureChart3 = state.charts.temperatureChart3 ?? echarts.init(temperatureChartRef3.value as unknown as HTMLElement)
|
||
const options = []
|
||
for (let i = 0; i < temperatureChartsData.length; i++) {
|
||
const option = {
|
||
grid: {
|
||
top: 30,
|
||
right: 5,
|
||
bottom: 0,
|
||
left: -100,
|
||
containLabel: true,
|
||
},
|
||
xAxis: {
|
||
// type: 'category',
|
||
type: 'value',
|
||
|
||
show: false,
|
||
},
|
||
yAxis: {
|
||
// type: 'value',
|
||
type: 'category',
|
||
|
||
show: false,
|
||
},
|
||
series: [
|
||
{
|
||
name: temperatureChartsData[i].name,
|
||
data: [temperatureChartsData[i].value],
|
||
type: 'bar',
|
||
label: {
|
||
show: true,
|
||
align: 'left',
|
||
// verticalAlign:'top',
|
||
formatter: `{b|{a}} {a|{c}}`,
|
||
rich: {
|
||
a: {
|
||
color: '#333333',
|
||
fontSize: 22,
|
||
},
|
||
b: {
|
||
color: '#4E5969',
|
||
fontSize: 14,
|
||
},
|
||
},
|
||
width: 100,
|
||
height: 22,
|
||
position: 'insideLeft',
|
||
offset: [85, -22],
|
||
},
|
||
itemStyle: {
|
||
color: '#048bd2',
|
||
borderRadius: [0, 4, 4, 0],
|
||
},
|
||
barWidth: 20,
|
||
},
|
||
{
|
||
show: true,
|
||
type: 'bar',
|
||
barGap: '-100%',
|
||
barWidth: 20, // 统计条宽度
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#048bd2',
|
||
opacity: 0.2,
|
||
borderRadius: 4,
|
||
},
|
||
},
|
||
z: 1,
|
||
data: [100],
|
||
},
|
||
],
|
||
aria: {
|
||
enabled: true,
|
||
decal: {
|
||
show: true,
|
||
decals: {
|
||
symbol: 'rect',
|
||
symbolSize: 3,
|
||
dashArrayX: 3,
|
||
rotation: 45,
|
||
color: 'rgba(0, 0, 0, 0.1)',
|
||
},
|
||
},
|
||
},
|
||
}
|
||
options.push(option)
|
||
}
|
||
temperatureChart1.setOption(options[0])
|
||
state.charts.temperatureChart1 = temperatureChart1
|
||
temperatureChart2.setOption(options[1])
|
||
state.charts.temperatureChart2 = temperatureChart2
|
||
temperatureChart3.setOption(options[2])
|
||
state.charts.temperatureChart3 = temperatureChart3
|
||
}
|
||
|
||
var frequencyData: {
|
||
name: string[]
|
||
value: number[]
|
||
} = {
|
||
name: [
|
||
'0~22.5',
|
||
'22.5~45',
|
||
'45~67.5',
|
||
'67.5~90',
|
||
'90~112.5',
|
||
'112.5~135',
|
||
'135~157.5',
|
||
'157.5~180',
|
||
'180~202.5',
|
||
'202.5~225',
|
||
'225~247.5',
|
||
'247.5~270',
|
||
'270~292.5',
|
||
'292.5~315',
|
||
'315~337.5',
|
||
'337.5~360',
|
||
],
|
||
value: [],
|
||
}
|
||
|
||
const frequencyChartRef = ref()
|
||
const initFrequencyChart = () => {
|
||
const frequencyChart = state.charts.frequencyChart ?? echarts.init(frequencyChartRef.value as unknown as HTMLElement)
|
||
// const seriesdata: any = frequencyData.map((item) => item.value)
|
||
|
||
const option = {
|
||
title: [
|
||
{
|
||
text: '风频图',
|
||
textStyle: {
|
||
color: '#4E5969',
|
||
fontSize: 14,
|
||
fontFamily: 'PingFangSC-Semibold',
|
||
},
|
||
padding: 10,
|
||
},
|
||
],
|
||
polar: {
|
||
radius: [0, '70%'],
|
||
},
|
||
radiusAxis: {
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#dadada',
|
||
},
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
color: 'rgba(0,0,0,0.45)',
|
||
fontSize: 10,
|
||
},
|
||
axisTick: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#dadada',
|
||
},
|
||
},
|
||
max: 100,
|
||
},
|
||
angleAxis: {
|
||
min: 0,
|
||
interval: 22.5,
|
||
startAngle: 90,
|
||
type: 'category',
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#dadada',
|
||
},
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
color: 'rgba(0,0,0,0.45)',
|
||
fontSize: 10,
|
||
boundaryGap: false,
|
||
formatter: function (value: string) {
|
||
const reg = /.*(?=\~)/
|
||
return value.match(reg)![0]
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
lineStyle: {
|
||
color: '#dadada',
|
||
},
|
||
},
|
||
data: frequencyData.name,
|
||
//startAngle: 75
|
||
},
|
||
tooltip: {},
|
||
series: {
|
||
type: 'bar',
|
||
data: frequencyData.value,
|
||
coordinateSystem: 'polar',
|
||
itemStyle: {
|
||
color: '#0277B3',
|
||
},
|
||
// label: {
|
||
// show: true,
|
||
// position: 'middle',
|
||
// formatter: '{b}: {c}',
|
||
// },
|
||
},
|
||
animation: false,
|
||
}
|
||
frequencyChart.setOption(option)
|
||
state.charts.frequencyChart = frequencyChart
|
||
}
|
||
|
||
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 tableData = ref<{ time: string; alertcontent: string }[]>([])
|
||
|
||
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 realTimeData = ref<any>({
|
||
processedoperationmode: 1111,
|
||
locked: 0,
|
||
})
|
||
|
||
const realTimeDataState = computed(() => {
|
||
switch (realTimeData.value.processedoperationmode) {
|
||
case 20:
|
||
return '并网'
|
||
case 10:
|
||
return '维护'
|
||
case 8:
|
||
return '限功率运行'
|
||
case 0:
|
||
return '离线'
|
||
case 16:
|
||
return '启动'
|
||
case 6:
|
||
return '正常停机'
|
||
case 1:
|
||
return '紧急停机'
|
||
case 2:
|
||
return '停机'
|
||
case 11:
|
||
return '待机'
|
||
case 33:
|
||
return '通讯中断'
|
||
case 1110:
|
||
return '解缆状态'
|
||
case 1111:
|
||
return '电网故障停机'
|
||
case 1112:
|
||
return '安全链停机'
|
||
}
|
||
})
|
||
|
||
const getModelList = () => {
|
||
return new Promise((resolve) => {
|
||
getModelAttributeListReq({ iotModelId: route.query.iotModelId as string }).then((res) => {
|
||
resolve(res.rows)
|
||
})
|
||
})
|
||
}
|
||
|
||
const getRealTimeData = () => {
|
||
return new Promise((resolve) => {
|
||
getRealValueListReq([{ deviceId: route.query.irn as string }]).then((res) => {
|
||
resolve(res.data?.[route.query.irn as string])
|
||
})
|
||
})
|
||
}
|
||
const createRealTimeData = async () => {
|
||
try {
|
||
const modelList: any = await getModelList()
|
||
const realData: any = await getRealTimeData()
|
||
realTimeData.value.processedoperationmode = getRealTimeState(realData)
|
||
realTimeData.value.locked = realData.locked
|
||
|
||
temperatureChartsData[0].value = getCutDecimalsValue(realData.itempoutdoor_1sec)
|
||
temperatureChartsData[1].value = getCutDecimalsValue(realData.itempnacelle_1sec)
|
||
temperatureChartsData[2].value = getCutDecimalsValue(realData.itempcabinettowerbase_1sec)
|
||
|
||
const overviewDatakeys: any = Object.keys(overviewData)
|
||
const sigleDataKeys: any = Object.keys(realTimeDataForSingle.value)
|
||
|
||
const dataFor138And139: { name: string; value: string }[] = []
|
||
const dataFor140: { name: string; value: string }[] = []
|
||
const dataFor199: { name: string; value: string }[] = []
|
||
const realDataForSub: any = subSystem.map(() => ({ type138: [], type140: [], type199: [] }))
|
||
|
||
modelList.forEach((item: any) => {
|
||
const realVal = realData[item.attributeCode.toLowerCase()]
|
||
let val = getCutDecimalsValue(realVal)
|
||
if (enumStore.keys.includes(item.attributeCode)) {
|
||
val = enumStore.data[item.attributeCode][val]
|
||
}
|
||
if (malFunctionKeys.includes(item.attributeCode)) {
|
||
val = malFunctionEnums?.[val] ?? val
|
||
}
|
||
if (sigleDataKeys.includes(item.attributeCode.toLowerCase())) {
|
||
realTimeDataForSingle.value[item.attributeCode.toLowerCase()] = val === '-' ? val : val
|
||
realTimeDataForSingleUnit[item.attributeCode.toLowerCase() as keyof typeof realTimeDataForSingleUnit] = item.unit
|
||
}
|
||
if (overviewDatakeys.includes(item.attributeCode.toLowerCase())) {
|
||
if (enumStore.keys.includes(item.attributeCode)) {
|
||
overviewData[item.attributeCode.toLowerCase() as keyof typeof overviewData] = val as string
|
||
} else {
|
||
overviewData[item.attributeCode.toLowerCase() as keyof typeof overviewData] = val === '-' ? val : val + item.unit
|
||
}
|
||
}
|
||
const showData = {
|
||
name: item.attributeName,
|
||
value: val === '-' ? val : val + (item?.unit ?? ''),
|
||
}
|
||
if (item.attributeType === 138 || item.attributeType === 139) {
|
||
dataFor138And139.push(showData)
|
||
} else if (item.attributeType === 140) {
|
||
dataFor140.push(showData)
|
||
} else if (item.attributeType === 199) {
|
||
dataFor199.push(showData)
|
||
}
|
||
|
||
if (subSystem.includes(item.subSystem)) {
|
||
const index = subSystem.indexOf(item.subSystem)
|
||
if (index >= 0) {
|
||
if (item.attributeType === 138 || item.attributeType === 139) {
|
||
realDataForSub[index].type138.push(showData)
|
||
} else if (item.attributeType === 140) {
|
||
const copyData = {
|
||
name: item.attributeCode + ' ' + item.attributeName,
|
||
value: showData.value,
|
||
}
|
||
realDataForSub[index].type140.push(copyData)
|
||
} else if (item.attributeType === 199) {
|
||
realDataForSub[index].type199.push(showData)
|
||
}
|
||
}
|
||
}
|
||
})
|
||
overviewSlotData.type138 = dataFor138And139
|
||
overviewSlotData.type140 = dataFor140
|
||
overviewSlotData.type199 = dataFor199
|
||
const realDataForSubSystem = realDataForSub.map((item: any) => {
|
||
return [...item.type138, ...item.type140, ...item.type199]
|
||
})
|
||
realTimeForSubSystem.value = realDataForSubSystem
|
||
} catch (err) {
|
||
console.log(err)
|
||
}
|
||
}
|
||
|
||
const subSystemName = ref('')
|
||
|
||
const visible = ref(false)
|
||
const handleClose = (done: () => void) => {
|
||
visible.value = false
|
||
}
|
||
|
||
const realTimeForSubSystem = ref<any>([])
|
||
const curSubSystem = ref(0)
|
||
const subSystemDataList = computed(() => {
|
||
return realTimeForSubSystem.value[curSubSystem.value]
|
||
})
|
||
|
||
const subSystem = ['变桨1', '变桨2', '变桨3', '传动链齿轮箱', '发电机', '机舱', '控制系统', '轮毂', '偏航系统', '气象', '塔基', '箱变']
|
||
|
||
const openSubSystem = (type: number) => {
|
||
subSystemName.value = subSystem[type]
|
||
curSubSystem.value = type
|
||
visible.value = true
|
||
}
|
||
|
||
const overviewSlotData = reactive<{ visible: boolean; type: '138' | '140' | '199'; type138: any[]; type140: any[]; type199: any[] }>({
|
||
visible: false,
|
||
type: '138',
|
||
type138: [],
|
||
type140: [],
|
||
type199: [],
|
||
})
|
||
|
||
let autoUpdateForSecondTimer: any = null
|
||
let autoUpdateTimerForMinuteTimer: any = null
|
||
let autoUpdateTimerForHourTimer: any = null
|
||
const autoUpdate = () => {
|
||
createRealTimeData()
|
||
nextTick(() => {
|
||
initTemperatureChart()
|
||
})
|
||
if (!autoUpdateForSecondTimer) {
|
||
autoUpdateForSecondTimer = setInterval(() => {
|
||
createRealTimeData()
|
||
initTemperatureChart()
|
||
}, 2000)
|
||
}
|
||
if (!autoUpdateTimerForMinuteTimer) {
|
||
autoUpdateTimerForMinuteTimer = setInterval(() => {
|
||
getAllChartData(['power', 'frequency'])
|
||
}, 60000)
|
||
}
|
||
// if (!autoUpdateTimerForHourTimer) {
|
||
// autoUpdateTimerForHourTimer = setInterval(() => {
|
||
// getAllChartData(['trend'])
|
||
// }, 60000 * 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: route.query.irn as string,
|
||
attributes: params.attr,
|
||
},
|
||
],
|
||
interval: params.interval,
|
||
}
|
||
getRealValueRangeReq(data).then((res) => {
|
||
if (res.success) {
|
||
const data = res.data[route.query.irn as string]
|
||
if (!data) return
|
||
const rangeKeys = Object.keys(data)
|
||
const times: any = {}
|
||
const val: any = {}
|
||
rangeKeys.forEach((key) => {
|
||
times[key] = []
|
||
val[key] = []
|
||
data[key].times.forEach((item: number) => {
|
||
times[key].push(dayjs(item).format('HH:mm'))
|
||
})
|
||
data[key].values.forEach((item: number) => {
|
||
val[key].push(item)
|
||
})
|
||
})
|
||
resolve({ times, val })
|
||
}
|
||
})
|
||
})
|
||
}
|
||
|
||
const getThisDayChartData = () => {
|
||
return new Promise((resolve) => {
|
||
getChartData<'iGenPower' | 'iTheoreticalPower' | 'iWindSpeed'>({
|
||
startTime: new Date(new Date().toLocaleDateString()).getTime(),
|
||
endTime: Date.now(),
|
||
attr: ['iGenPower', 'iTheoreticalPower', 'iWindSpeed'],
|
||
interval: '5m',
|
||
}).then(({ times, val }) => {
|
||
powerChartData.time = { iGenPower: times.iGenPower, iTheoreticalPower: times.iTheoreticalPower, iWindSpeed: times.iWindSpeed }
|
||
powerChartData.values = { iGenPower: val.iGenPower, iTheoreticalPower: val.iTheoreticalPower, iWindSpeed: val.iWindSpeed }
|
||
resolve(true)
|
||
})
|
||
})
|
||
}
|
||
|
||
// const getLastMonthThisDayChartData = () => {
|
||
// return new Promise((resolve) => {
|
||
// const start = dayjs().subtract(1, 'month').startOf('day').valueOf()
|
||
// const end = dayjs().subtract(1, 'month').valueOf()
|
||
// getChartData<'iKWhThisDay'>({
|
||
// startTime: start,
|
||
// endTime: end,
|
||
// attr: ['iKWhThisDay'],
|
||
// interval: '1h',
|
||
// }).then(({ times, val }) => {
|
||
// TrendDataForDay.samePeriod.time = times.iKWhThisDay
|
||
// TrendDataForDay.samePeriod.value = val.iKWhThisDay
|
||
// resolve(true)
|
||
// })
|
||
// })
|
||
// }
|
||
|
||
// const getThisDayChartForHourData = () => {
|
||
// return new Promise((resolve) => {
|
||
// getChartData<'iKWhThisDay'>({
|
||
// startTime: new Date(new Date().toLocaleDateString()).getTime(),
|
||
// endTime: Date.now(),
|
||
// attr: ['iKWhThisDay'],
|
||
// interval: '1h',
|
||
// }).then(({ times, val }) => {
|
||
// TrendDataForDay.currentPeriod.time = times.iKWhThisDay
|
||
// TrendDataForDay.currentPeriod.value = val.iKWhThisDay
|
||
// resolve(true)
|
||
// })
|
||
// })
|
||
// }
|
||
|
||
const getThisDayChartDataForMinute = () => {
|
||
return new Promise((resolve) => {
|
||
getChartData<'iWindDirection'>({
|
||
startTime: new Date(new Date().toLocaleDateString()).getTime(),
|
||
endTime: Date.now(),
|
||
attr: ['iWindDirection'],
|
||
interval: '1m',
|
||
}).then(({ val }) => {
|
||
const len = val.iWindDirection.length
|
||
const result: number[] = new Array(16).fill(0)
|
||
val.iWindDirection.forEach((item: number) => {
|
||
item = item < 0 ? 360 + item : item > 360 ? 360 : item
|
||
const divisor = Math.ceil(item / 22.5) - 1
|
||
result[divisor] += 1
|
||
})
|
||
const percent = result.map((item) => Math.floor((item / len) * 100000) / 1000)
|
||
frequencyData.value = percent
|
||
resolve(true)
|
||
})
|
||
})
|
||
}
|
||
|
||
const getAllChartData = (type: ('power' | 'trend' | 'frequency')[] = ['power', 'trend', 'frequency']) => {
|
||
if (type.includes('power')) {
|
||
getThisDayChartData().then(() => {
|
||
nextTick(() => {
|
||
initpowerChart()
|
||
})
|
||
})
|
||
}
|
||
// if (type.includes('trend')) {
|
||
// const trendDataForLastYear = getLastMonthThisDayChartData()
|
||
// const trendDataForThisDay = getThisDayChartForHourData()
|
||
// Promise.all([trendDataForLastYear, trendDataForThisDay]).then(() => {
|
||
// initTrendChart(trendChartType.value)
|
||
// })
|
||
// }
|
||
if (type.includes('frequency')) {
|
||
getThisDayChartDataForMinute().then((res) => {
|
||
nextTick(() => {
|
||
initFrequencyChart()
|
||
})
|
||
})
|
||
}
|
||
}
|
||
|
||
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: route.query.irn 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: route.query.irn as string,
|
||
serviceCode: 'Locked',
|
||
serviceName,
|
||
optDesc: serviceName + ',设定值为：' + type,
|
||
opValue: type,
|
||
}).then((res) => {
|
||
if (res.code == 200) {
|
||
ElMessage.success('指令发送成功')
|
||
} else {
|
||
ElMessage.error('指令发送失败')
|
||
}
|
||
})
|
||
})
|
||
}
|
||
|
||
const getAlarmList = () => {
|
||
const start = dayjs().startOf('day').toDate().getTime()
|
||
const end = dayjs().endOf('day').toDate().getTime()
|
||
return getAlarmListReq({
|
||
startTime: start,
|
||
endTime: end,
|
||
deviceCode: [route.query.deviceCode],
|
||
}).then((res) => {
|
||
if (res.rows) {
|
||
tableData.value = res.rows.map((item: any) => {
|
||
return {
|
||
time: dayjs(item.eventTime).format('YYYY-MM-DD HH:mm:ss'),
|
||
alertcontent: item.eventText,
|
||
}
|
||
})
|
||
}
|
||
})
|
||
}
|
||
|
||
let malFunctionEnums: any = {}
|
||
const getMalfunctionEnums = () => {
|
||
const curWindBlower = airBlowerList.value.find((item) => item.irn === route.query.irn)
|
||
queryfaultCodeDict({ madeinfactory: curWindBlower!.madeinfactory, model: curWindBlower!.model }).then((res) => {
|
||
if (res.code == 200) {
|
||
const data: any = {}
|
||
res.data.forEach((item: any) => {
|
||
data[item.code] = item.description
|
||
})
|
||
malFunctionEnums = data
|
||
}
|
||
})
|
||
}
|
||
|
||
const airBlowerList = ref<
|
||
{
|
||
irn: string
|
||
model: string
|
||
name: string
|
||
deviceCode: string
|
||
iotModelId: string
|
||
madeinfactory: string
|
||
}[]
|
||
>([])
|
||
|
||
const getAirBlowerList = () => {
|
||
return getAirBlowerListReq().then((res) => {
|
||
if (res.success) {
|
||
airBlowerList.value = res.data.map((item) => {
|
||
return {
|
||
irn: item.irn,
|
||
model: item.model,
|
||
name: item.name,
|
||
deviceCode: item.deviceCode,
|
||
iotModelId: item.modelId,
|
||
madeinfactory: item.madeinfactory,
|
||
}
|
||
})
|
||
return
|
||
}
|
||
})
|
||
}
|
||
|
||
const beforeAirBlower = computed(() => {
|
||
const len = airBlowerList.value.length
|
||
if (len === 0) return { irn: '', model: '', name: '', deviceCode: '', iotModelId: '' }
|
||
const curIndex = airBlowerList.value.findIndex((item) => item.irn === route.query.irn)
|
||
if (curIndex === 0) return airBlowerList.value[len - 1]
|
||
return airBlowerList.value[curIndex - 1]
|
||
})
|
||
const afterAirBlower = computed(() => {
|
||
const len = airBlowerList.value.length
|
||
if (len === 0) return { irn: '', model: '', name: '', deviceCode: '', iotModelId: '' }
|
||
const curIndex = airBlowerList.value.findIndex((item) => item.irn === route.query.irn)
|
||
if (curIndex === len - 1) return airBlowerList.value[0]
|
||
return airBlowerList.value[curIndex + 1]
|
||
})
|
||
const switchAirBlowerQuery = ref()
|
||
const switchAirblower = (type: 0 | 1) => {
|
||
const data = type === 0 ? beforeAirBlower.value : afterAirBlower.value
|
||
const query = {
|
||
irn: data.irn,
|
||
iotModelId: data.iotModelId,
|
||
deviceCode: data.deviceCode,
|
||
model: data.model,
|
||
name: data.name,
|
||
}
|
||
switchAirBlowerQuery.value = query
|
||
router.push({
|
||
name: 'windTurbine',
|
||
query,
|
||
})
|
||
}
|
||
onMounted(() => {
|
||
window.addEventListener('resize', sizeChange)
|
||
sizeChange()
|
||
getAllChartData()
|
||
useEventListener(window, 'resize', echartsResize)
|
||
autoUpdate()
|
||
getAlarmList().then(() => {
|
||
createScroll()
|
||
})
|
||
getAirBlowerList().then(() => {
|
||
getMalfunctionEnums()
|
||
})
|
||
switchAirBlowerQuery.value = route.query
|
||
})
|
||
|
||
onUnmounted(() => {
|
||
window.removeEventListener('resize', sizeChange)
|
||
autoUpdateForSecondTimer && clearInterval(autoUpdateForSecondTimer)
|
||
autoUpdateTimerForHourTimer && clearInterval(autoUpdateTimerForHourTimer)
|
||
autoUpdateTimerForMinuteTimer && clearInterval(autoUpdateTimerForMinuteTimer)
|
||
const chartKeys = Object.keys(state.charts) as Array<keyof typeof state.charts>
|
||
chartKeys.forEach((key) => {
|
||
state.charts[key] && state.charts[key].dispose()
|
||
state.charts[key] = null
|
||
})
|
||
})
|
||
|
||
watch(
|
||
() => route.query.irn,
|
||
() => {
|
||
autoUpdateForSecondTimer && clearInterval(autoUpdateForSecondTimer)
|
||
autoUpdateForSecondTimer = null
|
||
autoUpdateTimerForHourTimer && clearInterval(autoUpdateTimerForHourTimer)
|
||
autoUpdateTimerForHourTimer = null
|
||
autoUpdateTimerForMinuteTimer && clearInterval(autoUpdateTimerForMinuteTimer)
|
||
autoUpdateTimerForMinuteTimer = null
|
||
const chartKeys = Object.keys(state.charts) as Array<keyof typeof state.charts>
|
||
chartKeys.forEach((key) => {
|
||
state.charts[key] && state.charts[key].dispose()
|
||
state.charts[key] = null
|
||
})
|
||
|
||
nextTick(() => {
|
||
autoUpdate()
|
||
getAlarmList()
|
||
getAllChartData()
|
||
})
|
||
}
|
||
)
|
||
|
||
const openTemperature = (row: any) => {
|
||
if (!router.hasRoute('windBlowerTemperature')) {
|
||
router.addRoute('admin', {
|
||
path: adminBaseRoutePath + '/windBlowerTemperature',
|
||
name: 'windBlowerTemperature',
|
||
component: () => import('/@/views/backend/WindBlower/temperature.vue'),
|
||
meta: {
|
||
title: 'windBlowerTemperature',
|
||
menuDesc: '温度管理',
|
||
addtab: true,
|
||
},
|
||
})
|
||
}
|
||
|
||
router.push({
|
||
name: 'windBlowerTemperature',
|
||
query: {
|
||
...switchAirBlowerQuery.value,
|
||
},
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
$marginNum: 10px;
|
||
$labelHeight: 24px;
|
||
|
||
@mixin cardDefaultStyle {
|
||
padding: 10px;
|
||
border-radius: 10px;
|
||
background-color: #fff;
|
||
}
|
||
@mixin cardlabel {
|
||
.cardLabel {
|
||
width: 100%;
|
||
height: $labelHeight;
|
||
font-size: 18px;
|
||
line-height: 18px;
|
||
font-weight: 600;
|
||
color: #4e5969;
|
||
}
|
||
}
|
||
.radioItem {
|
||
margin-top: -43px;
|
||
float: right;
|
||
}
|
||
.dialogContent {
|
||
width: 100%;
|
||
height: 500px;
|
||
// overflow-y: auto;
|
||
// overflow-x: hidden;
|
||
.PitchPart {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
width: 100%;
|
||
.Pitchitem {
|
||
border: 1px solid #e1edf6;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
width: 50%;
|
||
.PitchitemLeft {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 325px;
|
||
min-height: 50px;
|
||
background: #f7f9fc;
|
||
padding-left: 20px;
|
||
font-size: 14px;
|
||
color: #4e5969;
|
||
letter-spacing: 0;
|
||
font-weight: 500;
|
||
word-break: break-all;
|
||
}
|
||
.PitchitemRight {
|
||
/*width: 180px;*/
|
||
height: 25px;
|
||
line-height: 50px;
|
||
padding-right: 20px;
|
||
font-size: 14px;
|
||
color: #4e5969;
|
||
letter-spacing: 0;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.dialog-footer {
|
||
text-align: center;
|
||
.el-button {
|
||
width: 120px;
|
||
height: 40px;
|
||
}
|
||
}
|
||
.overviewSlot {
|
||
display: flex;
|
||
.radioForOverviewType {
|
||
margin-left: auto;
|
||
}
|
||
}
|
||
|
||
.windBlower {
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: #f2f3f5;
|
||
// overflow: hidden;
|
||
.el-row {
|
||
width: 100%;
|
||
height: 100%;
|
||
.el-col {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.cardContentLeft {
|
||
margin: 0 5px;
|
||
width: calc(100% - 10px);
|
||
height: 100%;
|
||
.overview {
|
||
width: 100%;
|
||
height: 60%;
|
||
min-height: 450px;
|
||
@include cardDefaultStyle;
|
||
@include cardlabel;
|
||
.overviewDataSection {
|
||
width: 100%;
|
||
height: calc(100% - 42px);
|
||
.overviewDataSectionItem {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 5px;
|
||
padding: 0 10px;
|
||
width: 100%;
|
||
height: calc(9% - 5px);
|
||
min-height: 20px;
|
||
font-size: 14px;
|
||
color: #333333;
|
||
background: #f0f6ff;
|
||
border-radius: 4px;
|
||
}
|
||
}
|
||
.overviewDataBtn {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: end;
|
||
width: 100%;
|
||
height: 18px;
|
||
font-size: 18px;
|
||
.el-icon {
|
||
transform: rotate(90deg);
|
||
}
|
||
:hover {
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
.temperatureList {
|
||
@include cardDefaultStyle;
|
||
@include cardlabel;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-around;
|
||
margin: 10px 0;
|
||
width: 100%;
|
||
height: calc(40% - 20px);
|
||
.chartPart-item {
|
||
// margin: 5px 0;
|
||
width: 100%;
|
||
height: calc(33.3% - 10px);
|
||
background: #f0f6ff;
|
||
border-radius: 8px;
|
||
// text-align: center;
|
||
color: #4e5969;
|
||
.chartParm {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.frequencyChart {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
// .power {
|
||
// @include cardDefaultStyle;
|
||
// @include cardlabel;
|
||
// margin: 10px 0;
|
||
// width: 100%;
|
||
// height: calc(40% - 20px);
|
||
// // min-height: 285px;
|
||
// // height: v-bind('computedHeight.powerHeight');
|
||
// .chartBox {
|
||
// width: 100%;
|
||
// height: calc(100% - $labelHeight);
|
||
// .power-chart {
|
||
// width: 100%;
|
||
// height: 100%;
|
||
// }
|
||
// }
|
||
// }
|
||
}
|
||
.cardContentCenter {
|
||
@include cardDefaultStyle;
|
||
// display: flex;
|
||
// flex-direction: column;
|
||
// justify-content: space-around;
|
||
margin: 0 5px 10px 5px;
|
||
width: calc(100% - 10px);
|
||
height: calc(100% - 10px);
|
||
// min-height: 900px;
|
||
.controlBackgroundImg {
|
||
position: relative;
|
||
width: 100%;
|
||
aspect-ratio: 43 / 24;
|
||
background: url('/@/assets/WindBlower/bg.png') no-repeat;
|
||
background-size: contain;
|
||
&:hover {
|
||
.switchWindBlower {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
.switchWindBlower {
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 5%;
|
||
transform: translateX(-50%);
|
||
width: 100px;
|
||
height: 40px;
|
||
// background-color: red;
|
||
opacity: 0;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
transition: opacity 0.4s;
|
||
.el-icon:hover {
|
||
cursor: pointer;
|
||
color: rgba(255, 255, 255, 0.7);
|
||
}
|
||
}
|
||
.control-type {
|
||
width: 100%;
|
||
display: flex;
|
||
.control-tag {
|
||
background: #0064aa;
|
||
border-radius: 0 8px 0 0;
|
||
min-width: 80px;
|
||
height: 40px;
|
||
color: #ffffff;
|
||
font-size: 20px;
|
||
border: none;
|
||
margin-left: auto;
|
||
}
|
||
.control-tag-left {
|
||
margin-left: 0;
|
||
border-radius: 8px 0 0 0;
|
||
background-color: #ff4949;
|
||
}
|
||
}
|
||
.btnLeft {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-end;
|
||
position: absolute;
|
||
bottom: 0;
|
||
.el-button {
|
||
width: 80px;
|
||
height: 40px;
|
||
// background: rgb(0,100,170);
|
||
border-radius: 6px;
|
||
color: #ffffff;
|
||
border: none;
|
||
margin-bottom: 10px;
|
||
}
|
||
}
|
||
.dot {
|
||
position: absolute;
|
||
width: 15px;
|
||
height: 15px;
|
||
background-color: rgba(255, 255, 255, 0);
|
||
transition: all 0.5s ease;
|
||
background-position: center center;
|
||
background-size: contain;
|
||
background-repeat: no-repeat;
|
||
&:hover {
|
||
transform: scale(1.2);
|
||
cursor: pointer;
|
||
}
|
||
&:nth-of-type(1) {
|
||
top: 25%;
|
||
left: 50%;
|
||
}
|
||
}
|
||
.index-1 {
|
||
left: 24%;
|
||
top: 1%;
|
||
width: 12%;
|
||
height: 48%;
|
||
&:hover {
|
||
transform: scale(1.5);
|
||
background-image: url('/@/assets/WindBlower/9.png');
|
||
}
|
||
}
|
||
.index-2 {
|
||
left: 30%;
|
||
top: 83%;
|
||
width: 15%;
|
||
height: 16%;
|
||
&:hover {
|
||
transform: scale(1.8);
|
||
background-image: url('/@/assets/WindBlower/3.png');
|
||
}
|
||
}
|
||
.index-3 {
|
||
left: 12.5%;
|
||
top: 69%;
|
||
width: 4%;
|
||
height: 25%;
|
||
&:hover {
|
||
transform: scale(3);
|
||
background-image: url('/@/assets/WindBlower/4.png');
|
||
}
|
||
}
|
||
|
||
.index-4 {
|
||
left: 46%;
|
||
top: 49%;
|
||
width: 12%;
|
||
height: 15%;
|
||
&:hover {
|
||
transform: scale(1.8);
|
||
background-image: url('/@/assets/WindBlower/1.png');
|
||
}
|
||
}
|
||
.index-5 {
|
||
left: 66%;
|
||
top: 35%;
|
||
width: 8%;
|
||
height: 14%;
|
||
// transform: rotate(-51deg);
|
||
&:hover {
|
||
transform: scale(1.8);
|
||
background-image: url('/@/assets/WindBlower/7.png');
|
||
}
|
||
}
|
||
.index-6 {
|
||
left: 60%;
|
||
top: 63%;
|
||
width: 27%;
|
||
height: 5%;
|
||
transform: rotate(-15deg);
|
||
&:hover {
|
||
transform: scale(5);
|
||
background-image: url('/@/assets/WindBlower/5.png');
|
||
}
|
||
}
|
||
.index-7 {
|
||
left: 73%;
|
||
top: 48%;
|
||
width: 7%;
|
||
height: 11%;
|
||
transform: rotate(-13deg);
|
||
&:hover {
|
||
transform: scale(2.5);
|
||
background-image: url('/@/assets/WindBlower/6.png');
|
||
}
|
||
}
|
||
|
||
.index-8 {
|
||
left: 23%;
|
||
top: 53%;
|
||
width: 19%;
|
||
height: 26%;
|
||
&:hover {
|
||
background-image: url('/@/assets/WindBlower/2.png');
|
||
}
|
||
}
|
||
.index-9 {
|
||
left: 50%;
|
||
top: 66%;
|
||
width: 9%;
|
||
height: 13%;
|
||
&:hover {
|
||
transform: scale(2);
|
||
background-image: url('/@/assets/WindBlower/10.png');
|
||
}
|
||
}
|
||
|
||
.index-10 {
|
||
left: 67%;
|
||
top: 1%;
|
||
width: 12%;
|
||
height: 12%;
|
||
&:hover {
|
||
transform: scale(2.5);
|
||
background-image: url('/@/assets/WindBlower/8.png');
|
||
}
|
||
}
|
||
|
||
.index-11 {
|
||
right: 16%;
|
||
bottom: 3%;
|
||
width: 13%;
|
||
height: 23%;
|
||
}
|
||
.index-12 {
|
||
right: 2%;
|
||
bottom: 3%;
|
||
width: 13%;
|
||
height: 23%;
|
||
}
|
||
}
|
||
.chartPart {
|
||
margin: 10px 0;
|
||
width: 100%;
|
||
height: calc(100% - 10px - v-bind('computedHeight.backgroundImgHeight'));
|
||
// min-height: 220px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
&:hover {
|
||
cursor: pointer;
|
||
}
|
||
.power {
|
||
margin-bottom: 5px;
|
||
width: 60%;
|
||
height: 100%;
|
||
background-color: #f0f6ff;
|
||
border-radius: 8px;
|
||
.chartBox {
|
||
width: 100%;
|
||
height: 100%;
|
||
.power-chart {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.chartPart-item {
|
||
margin: 0 0 5px 5px;
|
||
// width: 25%;
|
||
height: 100%;
|
||
background: #f0f6ff;
|
||
border-radius: 8px;
|
||
color: #4e5969;
|
||
.frequencyChart {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.item_bar {
|
||
width: 40%;
|
||
}
|
||
}
|
||
}
|
||
.cardContentRight {
|
||
margin: 0 5px;
|
||
width: calc(100% - 10px);
|
||
height: 100%;
|
||
// min-height: 920px;
|
||
.summarize {
|
||
width: 100%;
|
||
height: 40%;
|
||
@include cardDefaultStyle;
|
||
@include cardlabel;
|
||
.summarize-panel-list {
|
||
width: 100%;
|
||
height: calc(100% - $labelHeight);
|
||
.summarize-panel-row {
|
||
display: flex;
|
||
width: 100%;
|
||
height: 50%;
|
||
min-height: 110px;
|
||
.summarize-panel {
|
||
margin: 5px;
|
||
width: calc(50% - 10px);
|
||
height: calc(100% - 10px);
|
||
background-color: #f0f6ff;
|
||
border-radius: 10px;
|
||
.summarize-panel-pic {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
min-height: 36px;
|
||
height: 40%;
|
||
img {
|
||
height: 80%;
|
||
aspect-ratio: 1/1;
|
||
}
|
||
}
|
||
.summarize-panel-base {
|
||
width: 100%;
|
||
height: 60%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
div {
|
||
display: flex;
|
||
justify-content: center;
|
||
height: 30%;
|
||
font-size: 14px;
|
||
color: rgb(78, 89, 105);
|
||
.content-number {
|
||
color: #333333;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
}
|
||
&:first-child {
|
||
height: 40%;
|
||
align-items: center;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.alarm {
|
||
margin: 10px 0;
|
||
width: 100%;
|
||
// min-height: 350px;
|
||
height: calc(60% - 20px);
|
||
@include cardDefaultStyle;
|
||
@include cardlabel;
|
||
}
|
||
}
|
||
}
|
||
</style>
|