<template>
|
<div class="layout-navbars-breadcrumb-user-news">
|
<div class="head-box">
|
<div class="head-box-title">{{ $t('message.user.newTitle') }}</div>
|
<div class="head-box-btn" v-if="state.monitorList.length > 0" @click="onAllReadClick">{{ $t('message.user.newBtn') }}</div>
|
</div>
|
<div class="content-box">
|
<template v-if="state.monitorList.length > 0">
|
<div class="content-box-item" v-for="(alarm_item, k) in state.monitorList" :key="k">
|
<div>{{ alarm_item.Name }}: {{ alarm_item.SignalName }}</div>
|
<div class="content-box-msg">
|
<span
|
>于{{ alarm_item.DataTime }}达到{{ alarm_item.DataValue }},阈值为{{ alarm_item.AlarmName
|
}}{{ alarm_item.ThresholdValue }}</span
|
>
|
<span :style="{ color: alarm_item.AlarmLevelColor }"> [{{ alarm_item.AlarmLevelName }}]</span>
|
</div>
|
<div class="content-box-time">{{ alarm_item.AlarmTime }}</div>
|
</div>
|
</template>
|
<el-empty :description="$t('message.user.newDesc')" v-else></el-empty>
|
</div>
|
<!-- <div class="foot-box" @click="onGoToGiteeClick" v-if="state.monitorList.length > 0">{{ $t('message.user.newGo') }}</div> -->
|
</div>
|
</template>
|
|
<script setup lang="ts" name="layoutBreadcrumbUserNews">
|
import { GetLastList } from '/@/api/monitor/monitorlAlarm';
|
import { reactive, onMounted } from 'vue';
|
import { ElMessage } from 'element-plus';
|
import moment from 'moment';
|
const emits = defineEmits<{
|
(event: 'monitorChange', data): void;
|
}>();
|
// 定义变量内容
|
const state = reactive({
|
monitorList: [],
|
monitorLastLoading: false,
|
themetime: '' as any,
|
});
|
|
// 全部已读点击
|
const onAllReadClick = () => {
|
state.monitorList = [];
|
};
|
// 页面加载时
|
onMounted(async () => {
|
state.themetime = getdatatime();
|
lastMonitorList();
|
});
|
// 前往通知中心点击
|
const onGoToGiteeClick = () => {
|
// window.open('https://gitee.com/lyt-top/vue-next-admin');
|
};
|
//默认时间选择前7天/默认选择当天
|
const getdatatime = () => {
|
let sevenAgo = moment(new Date()).subtract(7, 'days').startOf('day').format('YYYY-MM-DD HH:mm:ss');
|
let today = moment().endOf('day').format('YYYY-MM-DD HH:mm:ss');
|
return [sevenAgo, today];
|
};
|
//获取最近报警的列表
|
const lastMonitorList = async () => {
|
state.monitorLastLoading = true;
|
await GetLastList({
|
StartTime: state.themetime[0],
|
EndTime: state.themetime[1],
|
Number: 5,
|
})
|
.then((res) => {
|
state.monitorLastLoading = false;
|
if (res.Code != 0) {
|
return ElMessage.error(res.Message);
|
}
|
if (res.Data == null || res.Data == '') {
|
state.monitorList = [];
|
}
|
if (res.Data) {
|
state.monitorList = res.Data;
|
}
|
getMonitorList();
|
})
|
.catch((err) => {
|
return ElMessage.error('获取失败' + (err?.Message ? `，${JSON.stringify(err.Message)}` : ''));
|
});
|
};
|
const getMonitorList = () => {
|
emits('monitorChange', state.monitorList);
|
};
|
</script>
|
|
<style scoped lang="scss">
|
.layout-navbars-breadcrumb-user-news {
|
.head-box {
|
display: flex;
|
border-bottom: 1px solid var(--el-border-color-lighter);
|
box-sizing: border-box;
|
color: var(--el-text-color-primary);
|
justify-content: space-between;
|
height: 35px;
|
align-items: center;
|
.head-box-btn {
|
color: var(--el-color-primary);
|
font-size: 13px;
|
cursor: pointer;
|
opacity: 0.8;
|
&:hover {
|
opacity: 1;
|
}
|
}
|
}
|
.content-box {
|
font-size: 13px;
|
.content-box-item {
|
padding-top: 12px;
|
&:last-of-type {
|
padding-bottom: 12px;
|
}
|
.content-box-msg {
|
span {
|
color: var(--el-text-color-secondary);
|
margin-top: 5px;
|
margin-bottom: 5px;
|
}
|
}
|
.content-box-time {
|
color: var(--el-color-primary);
|
}
|
}
|
}
|
.foot-box {
|
height: 35px;
|
color: var(--el-color-primary);
|
font-size: 13px;
|
cursor: pointer;
|
opacity: 0.8;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
border-top: 1px solid var(--el-border-color-lighter);
|
&:hover {
|
opacity: 1;
|
}
|
}
|
:deep(.el-empty__description p) {
|
font-size: 13px;
|
}
|
}
|
</style>
|
