map/ui/dasadmin/src/views/backend/alarms/index.vue

<template>
    <div class="alarms">
        <el-container class="mainContainer">
            <el-header class="mainHeader">
                <el-space class="mainHeaderCenter">
                    <div style="width: fit-content; min-width: 60px">{{ t('alarm.alarmTime') }}</div>
                    <el-date-picker
                        style="height: 40px"
                        v-model="timeRange"
                        type="daterange"
                        format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD"
                        range-separator="-"
                        :start-placeholder="t('alarm.selectDate')"
                        :end-placeholder="t('alarm.selectDate')"
                        :shortcuts="shortcuts"
                    />
                    <div style="width: 20px"></div>
                    <div style="width: fit-content; min-width: 60px">{{ t('airBlower.airBlowerNumber') }}</div>
                    <el-select v-model="airBlowerNumberValue" :placeholder="t('alarm.select') + t('airBlower.airBlowerNumber')" class="alarmSelect">
                        <el-option v-for="v in airBlowerList" :key="v.value" :label="v.label" :value="v.value"></el-option>
                    </el-select>
                    <div style="width: 20px"></div>
                    <div style="width: fit-content; min-width: 30px">{{ t('alarm.type') }}</div>
                    <el-select v-model="alarmTypeValue" :placeholder="t('alarm.select') + t('alarm.type')" class="alarmSelect">
                        <el-option v-for="v in alarmTypes" :key="v.value" :label="v.label" :value="v.value"></el-option>
                    </el-select>
                    <div style="width: 20px"></div>
                    <el-button :icon="Search" type="primary" @click="getalarmsList">查询</el-button>
                </el-space>
            </el-header>
            <el-main class="mainMain">
                <div class="tabsPart">
                    <el-table :data="alarmsTableData" class="tablePart" highlight-current-row>
                        <el-table-column prop="alarmTime" :label="AlarmsFieldsEnums['alarmTime']" align="center"> </el-table-column>
                        <el-table-column prop="airBlowerNumber" :label="AlarmsFieldsEnums['airBlowerNumber']" align="center"> </el-table-column>
                        <el-table-column prop="faultDescription" :label="AlarmsFieldsEnums['faultDescription']" align="center"> </el-table-column>
                        <el-table-column prop="alarmGrade" :label="AlarmsFieldsEnums['alarmGrade']" align="center"> </el-table-column>
                        <el-table-column prop="alarmType" :label="AlarmsFieldsEnums['alarmType']" align="center"> </el-table-column>

                        <el-table-column label="操作" width="200" align="center">
                            <template #default="scope">
                                <div class="tableOperate">
                                    <a @click="okSubmit(scope.row)">确认</a>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="mainFooter">
                    <el-pagination
                        v-model:current-page="paginationOptions.current"
                        v-model:page-size="paginationOptions.pageSize"
                        :total="paginationOptions.total"
                        :page-sizes="paginationOptions.pageSizes"
                        background
                        :pager-count="7"
                        layout="prev, pager, next, jumper,sizes,total"
                        @change="getcurrentPage"
                    ></el-pagination>
                </div>
            </el-main>
        </el-container>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, nextTick, onMounted } from 'vue'
import { ElMessage, TableInstance, TreeInstance } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import { AlarmsFieldsEnums, AlarmsTableType, GetAlarmsTableParam } from './type'
import { getAlarmListReq } from '/@/api/backend/alarms/request'
import { equipList } from '/@/api/backend/realData/request.ts'
import { debounce, cloneDeep } from 'lodash'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
import { useAdminInfo } from '/@/stores/adminInfo'
const adminInfo = useAdminInfo()

// 告警时间

const timeRange = ref([])
const shortcuts = [
    {
        text: '今天',
        value: () => {
            const end = new Date()
            const start = new Date()
            return [start, end]
        },
    },
    {
        text: '昨天',
        value: () => {
            const end = new Date()
            end.setDate(end.getDate() - 1)
            const start = new Date()
            start.setDate(start.getDate() - 1)
            return [start, end]
        },
    },
    {
        text: '前3天',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setDate(start.getDate() - 2)
            return [start, end]
        },
    },
    {
        text: '本周',
        value: () => {
            return getDateRange('week')
        },
    },
    {
        text: '本月',
        value: () => {
            return getDateRange('month')
        },
    },
]

// 风机编号
const airBlowerNumberValue = ref('')
const airBlowerList = ref([{ label: '', value: '' }])
// 类别
const alarmTypeValue = ref('')
const alarmTypes = ref([
    { label: '故障', value: 1 },
    { label: '告警', value: 2 },
])

const searchalarms = (): GetAlarmsTableParam => {
    const start = timeRange.value[0]
    const end = timeRange.value[1]
    return {
        startTime: start || '',
        endTime: end || '',
        airBlowerNumber: airBlowerNumberValue.value,
        alarmType: alarmTypeValue.value,
        pageNum: paginationOptions.current,
        pageSize: paginationOptions.pageSize,
    }
}

const alarmsTableData = ref<AlarmsTableType[]>([])

// 告警列表
const paginationOptions = reactive({
    current: 1,
    pageSize: 20,
    total: 0,
    pageSizes: [20, 50, 100],
})
const getcurrentPage = () => {
    getalarmsList()
}

const getalarmsList = () => {
    const transparams = searchalarms()
    console.log('🚀 ~ getalarmsList ~ transparams:', transparams)
    setTimeout(() => {
        alarmsTableData.value = [
            {
                alarmTime: '2024-09-30 14:08:00',
                airBlowerNumber: 'sc-001',
                faultDescription: '变桨轴1处于紧急模式',
                alarmGrade: '一级',
                alarmType: '故障',
            },
            {
                alarmTime: '2024-09-30 14:08:00',
                airBlowerNumber: 'sc-001',
                faultDescription: '变桨轴1处于紧急模式',
                alarmGrade: '一级',
                alarmType: '故障',
            },
            {
                alarmTime: '2024-09-30 14:08:00',
                airBlowerNumber: 'sc-001',
                faultDescription: '变桨轴1处于紧急模式',
                alarmGrade: '一级',
                alarmType: '故障',
            },
        ]
        paginationOptions.total = 3
    })
    // getAlarmListReq(transparams)
    //     .then((res) => {
    //         if (res.rows) {
    //             paginationOptions.total = res.total
    //         } else {
    //             ElMessage.error(res.msg ?? '查询失败')
    //         }
    //     })
    //     .catch((err) => {
    //         ElMessage.error(err?.response?.data?.msg ?? '查询失败')
    //     })
}

const okSubmit = (val) => {
    console.log(val)
    getalarmsList()
}
const getDateRange = (type: 'week' | 'month') => {
    const today = new Date()
    if (type === 'week') {
        const dayOfWeek = today.getDay()
        const startOfWeek = new Date(today)
        startOfWeek.setDate(today.getDate() - dayOfWeek + (dayOfWeek === 0 ? -6 : 1))
        startOfWeek.setHours(0, 0, 0, 0)
        const endOfWeek = new Date(startOfWeek)
        endOfWeek.setDate(startOfWeek.getDate() + 6)
        endOfWeek.setHours(23, 59, 59, 999)
        return [startOfWeek, endOfWeek]
    }
    if (type === 'month') {
        const startOfMonth = new Date(today.getFullYear(), today.getMonth(), 1)
        startOfMonth.setHours(0, 0, 0, 0)
        const endOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0)
        endOfMonth.setHours(23, 59, 59, 999)
        return [startOfMonth, endOfMonth]
    }
}

onMounted(() => {
    equipList({
        // orgId: adminInfo.orgid,
        objectType: 10002,
    }).then((res) => {
        if (res.code == 200) {
            airBlowerList.value = res.data.map((item) => {
                return {
                    label: item.code,
                    value: item.id,
                }
            })
        }
    })
    getalarmsList()
})
</script>

<style lang="scss" scoped>
$headerHeight: 60px;
$defaultBackgroundColor: #fff;
$defaultAsideWidth: 260px;
$paginationHeight: 32px;
.alarms {
    position: relative;
    width: 100%;
    height: 100%;
    .mainContainer {
        width: 100%;
        height: 100%;
        .mainHeader {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: $headerHeight;
            padding: 0 20px;
            border-bottom: 1px solid #eaebed;
            .alarmsInput {
                height: 40px;
                width: 220px;
            }
            .mainHeaderCenter {
                width: 100%;
                display: flex;
                // overflow-x: auto;
                // justify-content: flex-start;
                align-items: center;
                // width: 320px;
                .alarmSelect {
                    width: 200px;
                    :deep(.el-select__wrapper) {
                        height: 40px;
                    }
                }
            }
        }
        .mainMain {
            height: calc(100% - $headerHeight);
            .tabsPart {
                height: calc(100% - $paginationHeight);
                padding-bottom: 5px;
                :deep(.el-tabs__content) {
                    height: calc(100% - 55px);
                    .el-tab-pane {
                        height: 100%;
                    }
                }
                .tablePart {
                    height: 100%;
                }
                .tableOperate {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    a {
                        margin: 5px;
                        color: #0064aa;
                        font-weight: 600;
                        &:hover {
                            cursor: pointer;
                        }
                    }
                }
            }
            .mainFooter {
                display: flex;
                justify-content: right;
                background-color: #fff;
            }
        }
    }
    .modelOperate {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        width: 80px;
        height: 150px;
        .el-button {
            margin: 0;
        }
    }
}

// 状态
.status-container {
    display: flex;
    justify-content: center;
    align-items: center;
}
.status-dot-online,
.status-dot-offline {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.status-dot-online {
    background-color: #06b429;
}

.status-dot-offline {
    background-color: red;
}
.highlight {
    background-color: yellow; /* 高亮背景颜色 */
    color: red; /* 字体颜色 */
    font-weight: bold; /* 加粗字体 */
}
</style>