461 lines
12 KiB
Vue
461 lines
12 KiB
Vue
|
<template>
|
||
|
|
<div class="airBlower">
|
||
|
|
<el-container class="containerPart">
|
||
|
|
<el-header class="headerPart">
|
||
|
|
<div class="headerLeft">
|
||
|
|
<div class="selectPart">
|
||
|
|
<span>{{ t('airBlower.status') }}</span>
|
||
|
|
<el-select
|
||
|
|
v-model="airBlowerSelect.a"
|
||
|
|
@change="selectAirBlower('a')"
|
||
|
|
: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-select>
|
||
|
|
</div>
|
||
|
|
<div class="selectPart">
|
||
|
|
<span>{{ t('airBlower.feeder') }}</span>
|
||
|
|
<el-select
|
||
|
|
v-model="airBlowerSelect.b"
|
||
|
|
@change="selectAirBlower('b')"
|
||
|
|
: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>
|
||
|
|
</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>
|
||
|
|
</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>
|
||
|
|
</div>
|
||
|
|
</el-header>
|
||
|
|
<el-main class="mainPart">
|
||
|
|
<el-table :column="tableColumn" :data="tableData" :header-row-style="tableHaderStyle">
|
||
|
|
<template v-for="item in tableColumn" :key="item.prop">
|
||
|
|
<el-table-column
|
||
|
|
v-if="!item.custom"
|
||
|
|
:prop="item.prop"
|
||
|
|
:label="item.name"
|
||
|
|
:align="item.align"
|
||
|
|
:width="item.width"
|
||
|
|
:type="item.type"
|
||
|
|
/>
|
||
|
|
<el-table-column v-else :label="item.name" :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>
|
||
|
|
</template>
|
||
|
|
<template v-if="item.custom === 'header'" #header="scope">
|
||
|
|
<div>{{ scope.column.label.split(' ')[0] }}</div>
|
||
|
|
<div>{{ scope.column.label.split(' ')[1] }}</div>
|
||
|
|
</template>
|
||
|
|
<template v-if="item.custom === 'header'" #default="scope">
|
||
|
|
<div>{{ 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 { useI18n } from 'vue-i18n'
|
||
|
|
|
||
|
|
const { t } = useI18n()
|
||
|
|
|
||
|
|
const airBlowerSelect = reactive<SelectTypeObj>({
|
||
|
|
a: '',
|
||
|
|
b: '',
|
||
|
|
c: '',
|
||
|
|
})
|
||
|
|
|
||
|
|
const airBlowerSelectOptions = reactive<{ [K in SelectTypeKeyUnion]: { label: string; value: string }[] }>({
|
||
|
|
a: [],
|
||
|
|
b: [],
|
||
|
|
c: [],
|
||
|
|
})
|
||
|
|
|
||
|
|
const selectAirBlower = (type: SelectTypeKeyUnion) => {
|
||
|
|
switch (type) {
|
||
|
|
case 'a':
|
||
|
|
break
|
||
|
|
case 'b':
|
||
|
|
break
|
||
|
|
case 'c':
|
||
|
|
break
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const airBlowerOperate = (type: 'start' | 'stop' | 'reset' | 'verify') => {
|
||
|
|
switch (type) {
|
||
|
|
case 'start':
|
||
|
|
break
|
||
|
|
case 'stop':
|
||
|
|
break
|
||
|
|
case 'reset':
|
||
|
|
break
|
||
|
|
case 'verify':
|
||
|
|
break
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const tableHaderStyle = {
|
||
|
|
color: '#333',
|
||
|
|
}
|
||
|
|
|
||
|
|
const tableColumn = [
|
||
|
|
{
|
||
|
|
type: 'selection',
|
||
|
|
width: 55,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '风机列表',
|
||
|
|
prop: 'a',
|
||
|
|
align: 'center',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '风机型号',
|
||
|
|
prop: 'b',
|
||
|
|
align: 'center',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '风机状态',
|
||
|
|
prop: 'c',
|
||
|
|
align: 'center',
|
||
|
|
custom: 'default',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '线路',
|
||
|
|
prop: 'd',
|
||
|
|
align: 'center',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '风速 (m/s)',
|
||
|
|
prop: 'e',
|
||
|
|
align: 'center',
|
||
|
|
custom: 'header',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '有功功率 (MW)',
|
||
|
|
prop: 'f',
|
||
|
|
align: 'center',
|
||
|
|
custom: 'header',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '日发电量 (kWh)',
|
||
|
|
prop: 'g',
|
||
|
|
align: 'center',
|
||
|
|
custom: 'header',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '总发电量 (万kWh)',
|
||
|
|
prop: 'h',
|
||
|
|
align: 'center',
|
||
|
|
custom: 'header',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '机舱角度',
|
||
|
|
prop: 'i',
|
||
|
|
align: 'center',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '叶轮转速 (rmp)',
|
||
|
|
prop: 'j',
|
||
|
|
align: 'center',
|
||
|
|
custom: 'header',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '发电机转速 (rmp)',
|
||
|
|
prop: 'k',
|
||
|
|
align: 'center',
|
||
|
|
custom: 'header',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '机舱温度 (℃)',
|
||
|
|
prop: 'l',
|
||
|
|
align: 'center',
|
||
|
|
custom: 'header',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '主油路压力 (kpa)',
|
||
|
|
prop: 'm',
|
||
|
|
align: 'center',
|
||
|
|
custom: 'header',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '变桨角度',
|
||
|
|
prop: 'n',
|
||
|
|
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 getTableData = () => {}
|
||
|
|
|
||
|
|
const paginationData = reactive({
|
||
|
|
currentPage: 1,
|
||
|
|
pageSize: 10,
|
||
|
|
total: 0,
|
||
|
|
})
|
||
|
|
|
||
|
|
const paginationChange = () => {}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.airBlower {
|
||
|
|
height: 100%;
|
||
|
|
.containerPart {
|
||
|
|
height: 100%;
|
||
|
|
.headerPart {
|
||
|
|
padding: 20px;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
.headerLeft {
|
||
|
|
display: flex;
|
||
|
|
.selectPart {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
height: 40px;
|
||
|
|
margin-right: 20px;
|
||
|
|
span {
|
||
|
|
margin-right: 10px;
|
||
|
|
}
|
||
|
|
.airBlowerSelect {
|
||
|
|
width: 200px;
|
||
|
|
:deep(.el-select__wrapper) {
|
||
|
|
height: 40px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.headerRight {
|
||
|
|
width: 436px;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
.el-button {
|
||
|
|
width: 100px;
|
||
|
|
height: 40px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.mainPart {
|
||
|
|
height: calc(100% - 120px);
|
||
|
|
}
|
||
|
|
.footerPart {
|
||
|
|
width: 100%;
|
||
|
|
.footerPage {
|
||
|
|
height: 100%;
|
||
|
|
display: flex;
|
||
|
|
justify-content: right;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|