风机列表:功能实现

This commit is contained in:
高云鹏 2024-10-24 19:13:18 +08:00
parent e7c96ecb0f
commit 6ca2fdee19
3 changed files with 394 additions and 310 deletions

View File

@ -0,0 +1,28 @@
import createAxios from '/@/utils/axios'
export const getAirBlowerListReq = () => {
return createAxios({
url: '/api/page/turbines/queryWindTurbinesPages',
method: 'get',
})
}
export const getBelongLineListReq = () => {
return createAxios({
url: '/api/page/turbines/lines',
method: 'get',
})
}
export const runAirBlowerReq = (data: {
deviceId: string,
serviceName: string,
opValue: 1 | 0
}[]) => {
return createAxios({
url: '/windTurbinesControl',
method: 'post',
data: data
})
}

View File

@ -6,68 +6,91 @@
<div class="selectPart">
<span>{{ t('airBlower.status') }}</span>
<el-select
v-model="airBlowerSelect.a"
@change="selectAirBlower('a')"
v-model="airBlowerSelect.iturbineoperationmode"
@change="selectAirBlower('iturbineoperationmode')"
:placeholder="'请选择' + t('airBlower.status')"
class="airBlowerSelect"
>
<el-option v-for="v in airBlowerSelectOptions.a" :key="v.value" :label="v.label" :value="v.value"></el-option>
<el-option
v-for="v in airBlowerSelectOptions.iturbineoperationmode"
:key="v.value"
:label="v.label"
:value="v.value"
></el-option>
</el-select>
</div>
<div class="selectPart">
<span>{{ t('airBlower.feeder') }}</span>
<el-select
v-model="airBlowerSelect.b"
@change="selectAirBlower('b')"
v-model="airBlowerSelect.belongLine"
@change="selectAirBlower('belongLine')"
:placeholder="'请选择' + t('airBlower.feeder')"
class="airBlowerSelect"
>
<el-option v-for="v in airBlowerSelectOptions.b" :key="v.value" :label="v.label" :value="v.value"></el-option>
</el-select>
<el-option v-for="v in airBlowerSelectOptions.belongLine" :key="v.value" :label="v.value" :value="v.value"></el-option>
</el-select>
</div>
<div class="selectPart">
<span>{{ t('airBlower.airBlowerNumber') }}</span>
<el-select
v-model="airBlowerSelect.c"
@change="selectAirBlower('c')"
:placeholder="'请选择' + t('airBlower.airBlowerNumber')"
class="airBlowerSelect"
>
<el-option v-for="item in airBlowerSelectOptions.c" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
<span>自动更新</span>
<el-switch
v-model="autoUpdate"
class="ml-2"
style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
></el-switch>
</div>
</div>
<div class="headerRight">
<el-button type="primary" @click="airBlowerOperate('start')">{{ t('airBlower.start') }}</el-button>
<el-button style="color:#0064AA" @click="airBlowerOperate('stop')">{{ t('airBlower.stop') }}</el-button>
<el-button style="color:#0064AA" @click="airBlowerOperate('reset')">{{ t('airBlower.reset') }}</el-button>
<el-button style="color:#0064AA" @click="airBlowerOperate('verify')">{{ t('airBlower.verify') }}</el-button>
<el-button type="primary" @click="airBlowerOperate('setTurbineFastStart')">{{ t('airBlower.start') }}</el-button>
<el-button style="color: #0064aa" @click="airBlowerOperate('setTurbineStop')">{{ t('airBlower.stop') }}</el-button>
<el-button style="color: #0064aa" @click="airBlowerOperate('setTurbineResetSafetyChain')">{{ t('airBlower.reset') }}</el-button>
<el-button style="color: #0064aa" @click="airBlowerOperate('verify')">{{ t('airBlower.verify') }}</el-button>
</div>
</el-header>
<el-main class="mainPart">
<el-table :column="tableColumn" :data="tableData" :header-row-style="tableHaderStyle">
<el-table :column="tableColumn" :data="tableData" :header-row-style="tableHaderStyle" @selectionChange="selectTable" height="100%">
<el-table-column type="selection" width="55"></el-table-column>
<template v-for="item in tableColumn" :key="item.prop">
<el-table-column
v-if="!item.custom"
:prop="item.prop"
:label="item.name"
:label="item.label"
:align="item.align"
:width="item.width"
:type="item.type"
/>
<el-table-column v-else :label="item.name" :align="item.align" :width="item.width">
<el-table-column v-else :label="item.label" :align="item.align" :width="item.width">
<template v-if="item.custom === 'default'" #default="scope">
<div v-if="item.prop === 'c'">
<el-tag v-if="scope.row.c === '1'" color="rgba(0,100,170,0.20)" style="color: #0064aa">并网</el-tag>
<el-tag v-if="scope.row.c === '2'" color="rgba(0,160,150,0.20)" style="color: #00a096">维护</el-tag>
<el-tag v-if="scope.row.c === '3'" color="rgba(255,126,0,0.20)" style="color: #ff7e00">故障</el-tag>
<el-tag v-if="scope.row.c === '4'" color="rgba(153,153,153,0.20)" style="color: #666666">离线</el-tag>
<el-tag v-if="scope.row.c === '5'" color="rgba(6,180,41,0.20)" style="color: #06b429">启动</el-tag>
<el-tag v-if="scope.row.c === '6'" color="rgba(254,55,49,0.20)" style="color: #fe3731">集控停机</el-tag>
<el-tag v-if="scope.row.c === '7'" color="rgba(254,55,49,0.20)" style="color: #fe3731">远程监控停机</el-tag>
<el-tag v-if="scope.row.c === '8'" color="rgba(255,182,0,0.20)" style="color: #ffb600">待机</el-tag>
<el-tag v-if="scope.row.c === '9'" color="rgba(48,89,236,0.20)" style="color: #3059ec">维护</el-tag>
<el-tag v-if="scope.row.c === '10'" color="rgba(153,153,153,0.20)" style="color: #666666">离线</el-tag>
<div v-if="item.prop === 'iturbineoperationmode'">
<el-tag v-if="scope.row.iturbineoperationmode === 20" color="rgba(0,100,170,0.20)" style="color: #0064aa"
>并网</el-tag
>
<el-tag v-if="scope.row.iturbineoperationmode === 10" color="rgba(0,160,150,0.20)" style="color: #00a096"
>维护</el-tag
>
<el-tag v-if="scope.row.iturbineoperationmode === 8" color="rgba(255,126,0,0.20)" style="color: #ff7e00"
>限功率运行</el-tag
>
<el-tag v-if="scope.row.iturbineoperationmode === 0" color="rgba(153,153,153,0.20)" style="color: #666666"
>离线</el-tag
>
<el-tag v-if="scope.row.iturbineoperationmode === 16" color="rgba(6,180,41,0.20)" style="color: #06b429"
>启动</el-tag
>
<el-tag v-if="scope.row.iturbineoperationmode === 6" color="rgba(254,55,49,0.20)" style="color: #fe3731"
>正常停机</el-tag
>
<el-tag v-if="scope.row.iturbineoperationmode === 1" color="rgba(254,55,49,0.20)" style="color: #fe3731"
>紧急停机</el-tag
>
<el-tag v-if="scope.row.iturbineoperationmode === 11" color="rgba(255,182,0,0.20)" style="color: #ffb600"
>待机</el-tag
>
<el-tag v-if="scope.row.iturbineoperationmode === 1110" color="rgba(153,153,153,0.20)" style="color: #666666"
>解缆状态</el-tag
>
<el-tag v-if="scope.row.iturbineoperationmode === 1111" color="rgba(254,55,49,0.20)" style="color: #fe3731"
>紧急停机</el-tag
>
</div>
</template>
<template v-if="item.custom === 'header'" #header="scope">
@ -77,331 +100,352 @@
<template v-if="item.custom === 'header'" #default="scope">
<div>{{ scope.row[item.prop] }}</div>
</template>
<template v-if="item.prop === 'name'" #default="scope">
<div class="tableColumnClick">{{ scope.row[item.prop] }}</div>
</template>
</el-table-column>
</template>
</el-table>
</el-main>
<el-footer class="footerPart">
<div class="footerPage">
<el-pagination
background
layout="total,prev, pager, next,sizes,jumper"
:total="paginationData.total"
:page-sizes="[10, 20, 30]"
v-model:current-page="paginationData.currentPage"
@change="paginationChange"
/>
</div>
</el-footer>
</el-container>
</div>
</template>
<script setup lang="ts">
import { SelectTypeObj, SelectTypeKeyUnion } from './type'
import { reactive, ref } from 'vue'
import { SelectTypeObjType, SelectTypeKeyUnionType, TableDataObjType, TableColumnType } from './type'
import { reactive, ref, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import { getAirBlowerListReq, getBelongLineListReq, runAirBlowerReq } from '/@/api/backend/airBlower/request'
const { t } = useI18n()
const airBlowerSelect = reactive<SelectTypeObj>({
a: '',
b: '',
c: '',
const airBlowerSelect = reactive<SelectTypeObjType>({
iturbineoperationmode: 987654321,
belongLine: '全部',
})
const airBlowerSelectOptions = reactive<{ [K in SelectTypeKeyUnion]: { label: string; value: string }[] }>({
a: [],
b: [],
c: [],
const airBlowerSelectOptions = reactive<{ [K in SelectTypeKeyUnionType]: { label: string; value: string | number }[] }>({
iturbineoperationmode: [
{
label: '全部',
value: 987654321,
},
{
label: '并网',
value: 20,
},
{
label: '待机',
value: 11,
},
{
label: '启动',
value: 16,
},
{
label: '维护',
value: 10,
},
{
label: '离线',
value: 0,
},
{
label: '限功率运行',
value: 8,
},
{
label: '正常停机',
value: 6,
},
{
label: '紧急停机',
value: 1,
},
{
label: '解缆状态',
value: 1110,
},
{
label: '电网故障停机',
value: 1111,
},
],
belongLine: [],
})
const selectAirBlower = (type: SelectTypeKeyUnion) => {
const selectAirBlower = (type: SelectTypeKeyUnionType) => {
switch (type) {
case 'a':
break
case 'b':
break
case 'c':
break
case 'iturbineoperationmode':
if (airBlowerSelect.belongLine === '全部') {
if (airBlowerSelect.iturbineoperationmode === 987654321) {
tableData.value = originTableData.value
return
}
const data = originTableData.value.filter((item) => item.iturbineoperationmode === airBlowerSelect.iturbineoperationmode)
tableData.value = data
} else {
if (airBlowerSelect.iturbineoperationmode === 987654321) {
tableData.value = originTableData.value.filter((item) => item.belongLine === airBlowerSelect.belongLine)
return
}
const data = tableData.value.filter((item) => item.iturbineoperationmode === airBlowerSelect.iturbineoperationmode)
tableData.value = data
break
}
case 'belongLine':
if (airBlowerSelect.iturbineoperationmode === 987654321) {
if (airBlowerSelect.belongLine === '全部') {
tableData.value = originTableData.value
return
}
const val = originTableData.value.filter((item) => item.belongLine === airBlowerSelect.belongLine)
tableData.value = val
break
} else {
if (airBlowerSelect.belongLine === '全部') {
tableData.value = originTableData.value.filter((item) => item.iturbineoperationmode === airBlowerSelect.iturbineoperationmode)
return
}
const val = tableData.value.filter((item) => item.belongLine === airBlowerSelect.belongLine)
tableData.value = val
}
}
}
const airBlowerOperate = (type: 'start' | 'stop' | 'reset' | 'verify') => {
switch (type) {
case 'start':
break
case 'stop':
break
case 'reset':
break
case 'verify':
break
}
const airBlowerOperate = (type: 'setTurbineFastStart' | 'setTurbineStop' | 'setTurbineResetSafetyChain' | 'verify') => {
const data = selectList.value.map((item) => {
return {
deviceId: item,
serviceName: type,
opValue: 1 as const,
}
})
console.log(data)
runAirBlowerReq(data).then((res) => {
console.log(res)
})
// switch (type) {
// break
// case 'setTurbineStop':
// break
// case 'setTurbineResetSafetyChain':
// break
// case 'verify':
// break
// }
}
const tableHaderStyle = {
color: '#333',
}
const tableColumn = [
const tableColumn: TableColumnType[] = [
{
type: 'selection',
width: 55,
},
{
name: '风机列表',
prop: 'a',
align: 'center',
},
{
name: '风机型号',
prop: 'b',
align: 'center',
},
{
name: '风机状态',
prop: 'c',
label: '风机列表',
prop: 'name',
align: 'center',
custom: 'default',
},
{
name: '线路',
prop: 'd',
label: '风机型号',
prop: 'model',
align: 'center',
},
{
name: '风速 (m/s)',
prop: 'e',
label: '风机状态',
prop: 'iturbineoperationmode',
align: 'center',
custom: 'default',
},
{
label: '线路',
prop: 'belongLine',
align: 'center',
},
{
label: '风速 (m/s)',
prop: 'iwindspeed',
align: 'center',
custom: 'header',
},
{
name: '有功功率 (MW)',
prop: 'f',
label: '有功功率 (MW)',
prop: 'igenpower',
align: 'center',
custom: 'header',
},
{
name: '日发电量 (kWh)',
prop: 'g',
label: '日发电量 (kWh)',
prop: 'ikwhthisday',
align: 'center',
custom: 'header',
},
{
name: '总发电量 (万kWh)',
prop: 'h',
label: '总发电量 (万kWh)',
prop: 'ikwhoverall',
align: 'center',
custom: 'header',
},
{
name: '机舱角度',
prop: 'i',
label: '机舱角度',
prop: 'ivanedirection',
align: 'center',
},
{
name: '叶轮转速 (rmp)',
prop: 'j',
label: '叶轮转速 (rmp)',
prop: 'irotorspeed',
align: 'center',
custom: 'header',
},
{
name: '发电机转速 (rmp)',
prop: 'k',
label: '发电机转速 (rmp)',
prop: 'igenspeed',
align: 'center',
custom: 'header',
},
{
name: '机舱温度 (℃)',
prop: 'l',
label: '机舱温度 (℃)',
prop: 'itempnacelle_1se',
align: 'center',
custom: 'header',
},
{
name: '主油路压力 (kpa)',
prop: 'm',
label: '主油路压力 (kpa)',
prop: 'ihydrpress',
align: 'center',
custom: 'header',
},
{
name: '变桨角度',
prop: 'n',
label: '变桨角度',
prop: 'ipitchangle',
align: 'center',
},
]
const tableData = ref([
{
a: 'SC-001',
b: '-',
c: '1',
d: '线路1',
e: '5',
f: '-',
g: '-',
h: '-',
i: '-',
j: '-',
k: '-',
l: '-',
m: '-',
n: '-',
},
{
a: 'SC-002',
b: '-',
c: '2',
d: '线路1',
e: '5',
f: '-',
g: '-',
h: '-',
i: '-',
j: '-',
k: '-',
l: '-',
m: '-',
n: '-',
},
{
a: 'SC-003',
b: '-',
c: '3',
d: '线路1',
e: '5',
f: '-',
g: '-',
h: '-',
i: '-',
j: '-',
k: '-',
l: '-',
m: '-',
n: '-',
},
{
a: 'SC-004',
b: '-',
c: '4',
d: '线路1',
e: '5',
f: '-',
g: '-',
h: '-',
i: '-',
j: '-',
k: '-',
l: '-',
m: '-',
n: '-',
},
{
a: 'SC-005',
b: '-',
c: '5',
d: '线路1',
e: '5',
f: '-',
g: '-',
h: '-',
i: '-',
j: '-',
k: '-',
l: '-',
m: '-',
n: '-',
},
{
a: 'SC-006',
b: '-',
c: '6',
d: '线路1',
e: '5',
f: '-',
g: '-',
h: '-',
i: '-',
j: '-',
k: '-',
l: '-',
m: '-',
n: '-',
},
{
a: 'SC-007',
b: '-',
c: '7',
d: '线路1',
e: '5',
f: '-',
g: '-',
h: '-',
i: '-',
j: '-',
k: '-',
l: '-',
m: '-',
n: '-',
},
{
a: 'SC-008',
b: '-',
c: '8',
d: '线路1',
e: '5',
f: '-',
g: '-',
h: '-',
i: '-',
j: '-',
k: '-',
l: '-',
m: '-',
n: '-',
},
{
a: 'SC-009',
b: '-',
c: '9',
d: '线路1',
e: '5',
f: '-',
g: '-',
h: '-',
i: '-',
j: '-',
k: '-',
l: '-',
m: '-',
n: '-',
},
{
a: 'SC-010',
b: '-',
c: '10',
d: '线路1',
e: '5',
f: '-',
g: '-',
h: '-',
i: '-',
j: '-',
k: '-',
l: '-',
m: '-',
n: '-',
},
])
const tableData = ref<TableDataObjType[]>([])
const originTableData = ref<TableDataObjType[]>([])
const getTableData = () => {
// iPYlevel===10
// GridLostDetected===1
getAirBlowerListReq()
.then((res) => {
const data = res.data.map((item: any) => {
const attributeMap = item.attributeMap
const state = attributeMap.iturbineoperationmode
? attributeMap.iturbineoperationmode
: attributeMap.GridLostDetected
? attributeMap.GridLostDetected
: attributeMap.iPYlevel
return {
irn: item.irn,
name: item.name ?? '-',
model: item.model || '-',
belongLine: item.belongLine ?? '-',
iPitchAngle: Math.min(attributeMap.iPitchAngle1, attributeMap.iPitchAngle2, attributeMap.iPitchAngle3) || '-',
iturbineoperationmode: state,
iwindspeed: attributeMap.iwindspeed
? attributeMap.iwindspeed % 1 === 0
? attributeMap.iwindspeed
: attributeMap.iwindspeed.toFixed(3)
: '-',
igenpower: attributeMap.igenpower
? attributeMap.igenpower % 1 === 0
? attributeMap.igenpower
: attributeMap.igenpower.toFixed(3)
: '-',
ikwhthisday: attributeMap.ikwhthisday
? attributeMap.ikwhthisday % 1 === 0
? attributeMap.ikwhthisday
: attributeMap.ikwhthisday.toFixed(3)
: '-',
ikwhoverall: attributeMap.ikwhoverall
? attributeMap.ikwhoverall % 1 === 0
? attributeMap.ikwhoverall
: attributeMap.ikwhoverall.toFixed(3)
: '-',
ivanedirection: attributeMap.ivanedirection
? attributeMap.ivanedirection % 1 === 0
? attributeMap.ivanedirection
: attributeMap.ivanedirection.toFixed(3)
: '-',
irotorspeed: attributeMap.irotorspeed
? attributeMap.irotorspeed % 1 === 0
? attributeMap.irotorspeed
: attributeMap.irotorspeed.toFixed(3)
: '-',
igenspeed: attributeMap.igenspeed
? attributeMap.igenspeed % 1 === 0
? attributeMap.igenspeed
: attributeMap.igenspeed.toFixed(3)
: '-',
itempnacelle_1se: attributeMap.itempnacelle_1se
? attributeMap.itempnacelle_1se % 1 === 0
? attributeMap.itempnacelle_1se
: attributeMap.itempnacelle_1se.toFixed(3)
: '-',
ihydrpress: attributeMap.ihydrpress
? attributeMap.ihydrpress % 1 === 0
? attributeMap.ihydrpress
: attributeMap.ihydrpress.toFixed(3)
: '-',
ipitchangle: attributeMap.ipitchangle
? attributeMap.ipitchangle % 1 === 0
? attributeMap.ipitchangle
: attributeMap.ipitchangle.toFixed(3)
: '-',
}
})
console.log(data)
const getTableData = () => {}
originTableData.value = data
tableData.value = data
})
.catch((err: any) => {
console.log(err)
})
}
const paginationData = reactive({
currentPage: 1,
pageSize: 10,
total: 0,
const getBlongLineList = () => {
getBelongLineListReq()
.then((res) => {
const data = res.data.map((item: any) => {
return {
value: item,
}
})
airBlowerSelectOptions.belongLine = [{ value: '全部', label: '全部' }, ...data]
})
.catch((err) => {
console.log(err)
})
}
const selectList = ref<string[]>([])
const selectTable = (selected: TableDataObjType[]) => {
selectList.value = selected.map((item) => item.irn)
}
const autoUpdate = ref(false)
const autoUpdateInterval = ref<any>(null)
watch(autoUpdate, (newVal: boolean) => {
if (newVal) {
if (autoUpdateInterval.value) return
autoUpdateInterval.value = setInterval(() => {
console.log('刷新')
getTableData()
}, 2000)
} else {
clearInterval(autoUpdateInterval.value)
autoUpdateInterval.value = null
}
})
const paginationChange = () => {}
getTableData()
getBlongLineList()
</script>
<style scoped lang="scss">
@ -444,15 +488,11 @@ const paginationChange = () => {}
}
}
.mainPart {
height: calc(100% - 120px);
}
.footerPart {
width: 100%;
.footerPage {
height: 100%;
display: flex;
justify-content: right;
align-items: center;
height: 100%;
.tableColumnClick {
text-decoration: underline;
color: #00a4ff;
cursor: pointer;
}
}
}

View File

@ -1,23 +1,39 @@
export type SelectTypeObj = {
a: string
b: string
c: string
export type SelectTypeObjType = {
iturbineoperationmode?: number
belongLine: string
}
export type SelectTypeKeyUnion = keyof SelectTypeObj
export type SelectTypeKeyUnionType = keyof SelectTypeObjType
export type TableDataObj = {
1: string
2: string
3: string
4: string
5: string
6: string
7: string
8: string
9: string
10: string
11: string
12: string
13: string
14: string
export type TableDataObjType = {
irn:string
name: string
model: string
iturbineoperationmode: number
belongLine: string
iwindspeed: string
igenpower: string
ikwhthisday: string
ikwhoverall: string
ivanedirection: string
irotorspeed: string
igenspeed: string
itempnacelle_1se: string
ihydrpress: string
ipitchangle: string
}
export type TableColumnSortType = {
type?: 'default' | 'selection' | 'index' | 'expand'
}
export type TableColumnType = {
label: string
prop: keyof TableDataObjType
width?: number
fixed?: 'left' | 'right'
align?: 'left' | 'right' | 'center'
custom?: 'header' | 'default'
type?: 'default' | 'selection' | 'index' | 'expand'
}