<template> <!-- 实时日志 --> <div class="alarmLogs"> <n-tabs default-value="real" type="line" @update:value="alramVal" size="large"> <n-tab-pane name="real" tab="实时日志"> <AlarmReal /> </n-tab-pane> <n-tab-pane name="history" tab="历史日志"> <div class="searchBox"> <n-space> <n-select v-model:value="searchValue1" :options="stationOptions" style="width: 200px" clearable filterable placeholder="请选择站点名称" /> <n-date-picker v-model:value="timeRange" type="datetimerange" clearable /> <n-button type="primary" @click="handleClick('search')">搜索</n-button> </n-space> </div> <div class="tableBox"> <n-data-table ref="tableRef" :bordered="false" :max-height="700" striped :columns="columns" :loading="tableLoading" :data="tableData" :remote="true" :pagination="pagination" > </n-data-table> </div> </n-tab-pane> </n-tabs> </div> </template> <script> import { onMounted, reactive, toRefs } from 'vue'; import { getWarnLog, getStationame } from '@/services'; import { formatDate } from '@/utils/util'; import AlarmReal from './conponents/alarmLogsReal.vue'; export default { name: 'alarmLogs', components: { AlarmReal, }, setup() { const allData = reactive({ stationOptions: [], // 搜索 searchValue1: null, timeRange: [ new Date().getTime() - 24 * 7 * 60 * 60 * 1000, new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1), ], tableLoading: true, // 表格 columns: [ { title: '站点编码', key: 'siteNo', align: 'center', }, { title: '所属项目', key: 'name', align: 'center', }, { title: '站点名称', key: 'siteName', align: 'center', }, { title: '因子名', key: 'factorsName', align: 'center', }, { title: '警戒级别', key: 'warnType', align: 'center', render(row) { let value = ''; switch (row.warnType) { case 1: value = '预警'; break; case 2: value = '报警'; break; case 3: value = '设备异常'; break; case 4: value = '设备离线'; break; case 5: value = '设备故障'; break; } return value; }, }, { title: '实时监测值', key: 'warnValue', align: 'center', }, { title: '判断类型', key: 'compareWayDesc', align: 'center', }, { title: '报警阈值', key: 'warnConfigValue', align: 'center', }, { title: '持续时间', key: 'durationTime', align: 'center', }, { title: '观测时间', key: 'ttTime', align: 'center', }, ], tableData: [], }); //分页 const paginationReactive = reactive({ page: 1, pageSize: 10, showSizePicker: true, pageSizes: [10, 20, 50], showQuickJumper: true, pageCount: 0, itemCount: 0, onChange: (page) => { paginationReactive.page = page; getTableData(); }, onPageSizeChange: (pageSize) => { paginationReactive.pageSize = pageSize; paginationReactive.page = 1; getTableData(); }, }); //获取站点名称下拉框 const GetStationName = async () => { let res = await getStationame(); if (res && res.code == 1) { let data = res.data; data.forEach((item) => { let { stCode, stName } = item; allData.stationOptions.push({ value: stCode, label: stName }); }); } }; // 获取表格数据 const getTableData = async () => { allData.tableLoading = true; let times = allData.timeRange ? formatDate(allData.timeRange[0]) : null; let timee = allData.timeRange ? formatDate(allData.timeRange[1]) : null; let pramas = { current: paginationReactive.page, size: paginationReactive.pageSize, data: { endTime: timee, siteNo: allData.searchValue1, startTime: times, }, }; let res = await getWarnLog(pramas); if (res && res.code == 200) { let datas = res.data; allData.tableData = datas.list || []; paginationReactive.pageCount = datas.pages; paginationReactive.itemCount = datas.total; } allData.tableLoading = false; }; const handleClick = (type, row) => { switch (type) { case 'search': getTableData(); break; } }; // tab点击切换 async function alramVal(val) { if (val == 'history') { getTableData(); } } onMounted(() => { GetStationName(); }); return { ...toRefs(allData), pagination: paginationReactive, getTableData, handleClick, alramVal, GetStationName, }; }, }; </script> <style lang="less" scoped> .alarmLogs { .tableBox { margin-top: 10px; } } </style>