风机列表:功能实现

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

View File

@ -1,23 +1,39 @@
export type SelectTypeObj = { export type SelectTypeObjType = {
a: string iturbineoperationmode?: number
b: string belongLine: string
c: string
} }
export type SelectTypeKeyUnion = keyof SelectTypeObj export type SelectTypeKeyUnionType = keyof SelectTypeObjType
export type TableDataObj = {
1: string
2: string
3: string export type TableDataObjType = {
4: string irn:string
5: string name: string
6: string model: string
7: string iturbineoperationmode: number
8: string belongLine: string
9: string iwindspeed: string
10: string igenpower: string
11: string ikwhthisday: string
12: string ikwhoverall: string
13: string ivanedirection: string
14: 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'
} }