map/ui/dasadmin/src/views/backend/equipment/airBlower/index.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.iturbineoperationmode"
                            @change="selectAirBlower('iturbineoperationmode')"
                            :placeholder="'请选择' + t('airBlower.status')"
                            class="airBlowerSelect"
                        >
                            <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.belongLine"
                            @change="selectAirBlower('belongLine')"
                            :placeholder="'请选择' + t('airBlower.feeder')"
                            class="airBlowerSelect"
                        >
                            <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>自动更新：</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('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" @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.label"
                            :align="item.align"
                            :width="item.width"
                            :type="item.type"
                        />
                        <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 === '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">
                                <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>
                            <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-container>
    </div>
</template>

<script setup lang="ts">
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<SelectTypeObjType>({
    iturbineoperationmode: 987654321,
    belongLine: '全部',
})

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: SelectTypeKeyUnionType) => {
    switch (type) {
        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: '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: TableColumnType[] = [
    {
        label: '风机列表',
        prop: 'name',
        align: 'center',
        custom: 'default',
    },
    {
        label: '风机型号',
        prop: 'model',
        align: 'center',
    },
    {
        label: '风机状态',
        prop: 'iturbineoperationmode',
        align: 'center',
        custom: 'default',
    },
    {
        label: '线路',
        prop: 'belongLine',
        align: 'center',
    },
    {
        label: '风速 (m/s)',
        prop: 'iwindspeed',
        align: 'center',
        custom: 'header',
    },
    {
        label: '有功功率 (MW)',
        prop: 'igenpower',
        align: 'center',
        custom: 'header',
    },
    {
        label: '日发电量 (kWh)',
        prop: 'ikwhthisday',
        align: 'center',
        custom: 'header',
    },
    {
        label: '总发电量 (万kWh)',
        prop: 'ikwhoverall',
        align: 'center',
        custom: 'header',
    },
    {
        label: '机舱角度',
        prop: 'ivanedirection',
        align: 'center',
    },
    {
        label: '叶轮转速 (rmp)',
        prop: 'irotorspeed',
        align: 'center',
        custom: 'header',
    },
    {
        label: '发电机转速 (rmp)',
        prop: 'igenspeed',
        align: 'center',
        custom: 'header',
    },
    {
        label: '机舱温度 (℃)',
        prop: 'itempnacelle_1se',
        align: 'center',
        custom: 'header',
    },
    {
        label: '主油路压力 (kpa)',
        prop: 'ihydrpress',
        align: 'center',
        custom: 'header',
    },
    {
        label: '变桨角度',
        prop: 'ipitchangle',
        align: 'center',
    },
]

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)

            originTableData.value = data
            tableData.value = data
        })
        .catch((err: any) => {
            console.log(err)
        })
}

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
    }
})

getTableData()
getBlongLineList()
</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: 100%;
            .tableColumnClick {
                text-decoration: underline;
                color: #00a4ff;
                cursor: pointer;
            }
        }
    }
}
</style>