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" @click="openWindTurbine(scope.row)">{{ 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'
import { ElMessage } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()

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) => {
    if (airBlowerSelect.belongLine === '全部' && airBlowerSelect.iturbineoperationmode === 987654321) {
        tableData.value = originTableData.value
        return
    } else if (airBlowerSelect.belongLine !== '全部' && airBlowerSelect.iturbineoperationmode !== 987654321) {
        tableData.value = tableData.value.filter((item) => item[type] === airBlowerSelect[type])
        return
    } else {
        if (type === 'belongLine' && airBlowerSelect.belongLine === '全部') {
            tableData.value = originTableData.value.filter((item) => item.iturbineoperationmode === airBlowerSelect.iturbineoperationmode)
            return
        } else if (type === 'iturbineoperationmode' && airBlowerSelect.iturbineoperationmode === 987654321) {
            tableData.value = originTableData.value.filter((item) => item.belongLine === airBlowerSelect.belongLine)
            return
        }
        tableData.value = originTableData.value.filter((item) => item[type] === airBlowerSelect[type])
        return
    }
}

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

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_1sec',
        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 = () => {
    getAirBlowerListReq()
        .then((res) => {
            const data = res.data.map((item: any) => {
                const state = item.attributeMap.iturbineoperationmode ?? item.attributeMap.GridLostDetected ?? item.attributeMap.iPYlevel ?? '-'
                const ipitchangle = Math.min(item.attributeMap.ipitchangle1, item.attributeMap.ipitchangle2, item.attributeMap.ipitchangle3)
                const resVal: any = {}
                Object.keys(item.attributeMap).forEach((attrKey) => {
                    resVal[attrKey] =
                        item.attributeMap[attrKey] === 0
                            ? 0
                            : item.attributeMap[attrKey]
                              ? item.attributeMap.iwindspeed % 1 === 0
                                  ? item.attributeMap.iwindspeed
                                  : Math.floor(item.attributeMap[attrKey] * 1000) / 1000
                              : '-'
                })
                return {
                    irn: item.irn,
                    name: item.name ?? '-',
                    model: item.model || '-',
                    belongLine: item.belongLine || '-',
                    iwindspeed: '-',
                    igenpower: '-',
                    ikwhthisday: '-',
                    ikwhoverall: '-',
                    ivanedirection: '-',
                    irotorspeed: '-',
                    igenspeed: '-',
                    itempnacelle_1sec: '-',
                    ihydrpress: '-',
                    ...resVal,
                    ipitchangle: ipitchangle === 0 ? 0 : ipitchangle ? Math.floor(ipitchangle * 1000) / 1000 : '-',
                    iturbineoperationmode: state,
                }
            })
            console.log(data)

            originTableData.value = data
            if (airBlowerSelect.belongLine === '全部' && airBlowerSelect.iturbineoperationmode === 987654321) {
                tableData.value = data
            } else {
                const irn = tableData.value.map((item) => item.irn)
                const result: TableDataObjType[] = []
                data.forEach((item: TableDataObjType) => {
                    if (irn.includes(item.irn)) {
                        result.push(item)
                    }
                })
                tableData.value = result
            }
        })
        .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
        ElMessage.success('开启自动刷新')
        autoUpdateInterval.value = setInterval(() => {
            console.log('刷新')
            getTableData()
        }, 2000)
    } else {
        ElMessage.warning('关闭自动刷新')
        clearInterval(autoUpdateInterval.value)
        autoUpdateInterval.value = null
    }
})

const openWindTurbine = (row: TableDataObjType) => {
    if (!router.hasRoute('windTurbine')) {
        router.addRoute('admin', {
            path: '/windTurbine',
            name: 'windTurbine',
            component: () => import('/@/views/backend/WindBlower/index.vue'),
            meta: {
                title: '风机详情',
            },
        })
    }
    console.log(router.getRoutes());
    
    router.push({
        name: 'windTurbine',
        query: {
            irn: row.irn,
        },
    })
}

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>