sx/map
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

告警管理 静态

Browse Source
This commit is contained in:
郁万成 2024-10-28 16:49:25 +08:00
parent 033eabf1be
commit 8780945822
5 changed files with 401 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
ui/dasadmin/src/api/backend/alarms/request.ts Normal file
View File

@ -0,0 +1,11 @@
import createAxios from '/@/utils/axios'
import { RequestReturnRowType, GetAlarmsTableParam, AlarmsTableType } from '/@/views/backend/alarms/type'
// 告警列表
export const getAlarmListReq = (data: GetAlarmsTableParam) => {
return createAxios<never, RequestReturnRowType<AlarmsTableType[]>>({
url: '/api/alarm/list',
method: 'post',
data: data,
})
}

6
ui/dasadmin/src/lang/common/en/alarm.ts Normal file
View File

@ -0,0 +1,6 @@
export default {
select: 'please select',
selectDate: 'select date and time',
type: 'category',
alarmTime: 'alarm time',
}

6
ui/dasadmin/src/lang/common/zh-cn/alarm.ts Normal file
View File

@ -0,0 +1,6 @@
export default {
select: '请选择',
selectDate: '选择日期时间',
type: '类别',
alarmTime: '告警时间',
}

340
ui/dasadmin/src/views/backend/alarms/index.vue Normal file
View File

@ -0,0 +1,340 @@
<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 { debounce, cloneDeep } from 'lodash'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
// 告警时间
const timeRange = ref([])
const shortcuts = [
{
text: '昨天',
value: () => {
const end = new Date()
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() - 3)
return [start, end]
},
},
{
text: '上周',
value: () => {
const end = new Date()
const start = new Date()
start.setDate(start.getDate() - 7)
return [start, end]
},
},
{
text: '上个月',
value: () => {
const end = new Date()
const start = new Date()
start.setMonth(start.getMonth() - 1)
return [start, end]
},
},
]
// 风机编号
const airBlowerNumberValue = ref('')
const airBlowerList = ref([
{ label: 'sc-001', value: '001' },
{ label: 'sc-001', value: '002' },
])
// 类别
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: 10,
total: 0,
pageSizes: [10, 20, 30],
})
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 getTodayAndYesterday = () => {
const today = new Date()
const yesterday = new Date()
yesterday.setDate(today.getDate() - 1)
const formatDate = (date) => {
const year = date.getFullYear()
const month = String(date.getMonth() + 1).padStart(2, '0')
const day = String(date.getDate()).padStart(2, '0')
return `${year}-${month}-${day}`
}
return {
today: formatDate(today),
yesterday: formatDate(yesterday),
}
}
onMounted(() => {
console.log(getTodayAndYesterday(), 999)
// timeRange[0] = getTodayAndYesterday().yesterday
// timeRange[1] = getTodayAndYesterday().today
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>

38
ui/dasadmin/src/views/backend/alarms/type.ts Normal file
View File

@ -0,0 +1,38 @@
export type RequestReturnType<T = never> = Promise<{
code: number
msg: string
success: boolean
data?: T
}>
export type RequestReturnRowType<T = never> = Promise<{
code: number
msg: string
rows: T
total: number
}>
export type AlarmsTableType = {
id?: string
alarmTime: string
airBlowerNumber: string
faultDescription: string
alarmGrade: string
alarmType: string
}
export type GetAlarmsTableParam = {
startTime: string
endTime: string
airBlowerNumber: string
alarmType: string
pageNum: number
pageSize: number
}
export enum AlarmsFieldsEnums {
'id' = 'id',
'alarmTime' = '报警时间',
'airBlowerNumber' = '风机编号',
'faultDescription' = '故障描述',
'alarmGrade' = '报警等级',
'alarmType' = '报警类别',
}