0214
/
ALOps_sys1
2
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Merge branch 'dev' of https://gitea.wangzhiwen.top/0214/ALOps_sys1 into dev

Browse Source
dev
YYD-YY 9 months ago
parent ca3ae05b60 ace6039895
commit e876808ff7
2 changed files with 68 additions and 90 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      ALOps_sys_fe/alops-ui/src/api/index/index.js
  2. 156
      ALOps_sys_fe/alops-ui/src/views/index.vue

2
ALOps_sys_fe/alops-ui/src/api/index/index.js
Unescape View File

@ -13,7 +13,7 @@ export function getDict() {
// 预警信息统
export function statistic(query) {
return request({
url: 'inMonitoring/statistic',
url: '/inMonitoring/alertMessage/statistic/list',
method: 'get',
params: query
})

156
ALOps_sys_fe/alops-ui/src/views/index.vue
Unescape View File

@ -10,20 +10,23 @@
<h2 class="card-title"><i class="fas fa-exclamation-triangle"></i> 预警信息统计</h2>
</div>
<div class="stats-container">
<div class="stat-card">
<div class="stat-label">预警总数</div>
<div class="stat-value">{{ totalAlerts }}</div>
<div class="stat-desc">系统检测到的预警总数</div>
<div class="stat-card" :class="alertMessageData.yearCount == 0?'normal':''">
<div class="stat-label">年预警总数</div>
<div class="stat-value">{{ alertMessageData.yearCount }}</div>
</div>
<div class="stat-card warning">
<div class="stat-label">当前预警</div>
<div class="stat-value">{{ activeAlerts }}</div>
<div class="stat-desc">需要处理的预警数量</div>
<div class="stat-card" :class="alertMessageData.monthCount == 0?'normal':''">
<div class="stat-label">月预警总数</div>
<div class="stat-value">{{ alertMessageData.monthCount }}</div>
</div>
<div class="stat-card normal">
<div class="stat-label">已处理</div>
<div class="stat-value">{{ resolvedAlerts }}</div>
<div class="stat-desc">已解决的预警数量</div>
<!-- 等级预警 -->
<div class="stat-card" :class="i.count == 0?'normal':i.count>10?'warning':''" v-for="(i,k) in alertMessageData.levelCount" :key="k">
<div class="stat-label">{{ `等级${i.level}预警` }}</div>
<div class="stat-value">{{ i.count }}</div>
</div>
<!-- 设备预警 -->
<div class="stat-card" :class="i.count == 0?'normal':i.count>10?'warning':''" v-for="(i,k) in alertMessageData.typeCount" :key="k">
<div class="stat-label">{{ `${i.name}预警` }}</div>
<div class="stat-value">{{ i.count }}</div>
</div>
</div>
</div>
@ -44,8 +47,8 @@
<div class="device-name">{{ device.name }}</div>
<div class="device-details">{{ device.description }}</div>
</div>
<span :class="device.status === 'warning' ? 'alert-badge' : 'normal-badge'">
{{ device.status === 'warning' ? '预警中' : '正常' }}
<span :class="device.status === 'UNHANDLED' ? 'alert-badge' : 'normal-badge'">
{{ device.status === 'UNHANDLED' ? '预警中' : '正常' }}
</span>
</li>
</ul>
@ -58,23 +61,25 @@
<div class="card-header">
<h2 class="card-title"><i class="fas fa-bell"></i> 设备预警信息</h2>
</div>
<ul class="device-list">
<li class="device-item" v-for="alert in alerts" :key="alert.id" :class="alert.status">
<ul class="device-list" v-infinite-scroll="loadMore" :infinite-scroll-disabled="isLoading || noMore" infinite-scroll-distance="50" infinite-scroll-delay="300">
<li class="device-item" v-for="alert in alerts" :key="alert.id" :class="alert.status === 'UNHANDLED' ? 'warning' : 'normal'" >
<div class="device-icon">
<i :class="alert.icon"></i>
<i :class="alert.status === 'UNHANDLED' ? 'fas fa-exclamation-circle' : 'fas fa-check-circle'"></i>
</div>
<div class="device-info">
<div class="device-name">{{ alert.deviceName }}</div>
<div class="device-name">{{ alert.name }}</div>
<div class="device-details">
<div>预警时间: {{ alert.time }}</div>
<div>预警时间: {{ parseTime(alert.occurTime) }}</div>
<div>设备位置: {{ alert.location }}</div>
<div>预警信息: {{ alert.message }}</div>
</div>
</div>
<span :class="alert.status === 'warning' ? 'alert-badge' : 'normal-badge'">
{{ alert.level === 1 ? '等级1' : '等级0' }}
<span :class="alert.status === 'UNHANDLED' ? 'alert-badge' : 'normal-badge'">
{{ '等级'+alert.level }}
</span>
</li>
<p v-if="isLoading">加载中...</p>
<p v-if="noMore">没有更多了</p>
</ul>
</div>
</div>
@ -155,73 +160,19 @@ export default {
activeAlerts: 42,
resolvedAlerts: 69,
lastUpdate: new Date().toLocaleString(),
isLoading: false, // 加载状态
noMore: false, // 是否无更多数据
page: 1, // 当前页码
devices: [
{ id: 1, name: 'Forecasts', description: '预测分析系统', status: 'normal', icon: 'fas fa-chart-line' },
{ id: 2, name: 'Gold', description: '核心处理单元', status: 'warning', icon: 'fas fa-server' },
{ id: 3, name: 'Industries', description: '工业控制系统', status: 'normal', icon: 'fas fa-industry' }
],
alerts: [
{
id: 1,
deviceName: 'PLC远程监控系统',
time: '2021-10-16 14:54:11',
location: '污水处理监控系统',
message: '2#电机运行状态等于1',
level: 1,
status: 'warning',
icon: 'fas fa-exclamation-circle'
},
{
id: 2,
deviceName: 'PLC远程监控系统',
time: '2021-10-16 14:54:04',
location: '污水处理监控系统',
message: '2#电机运行状态报警恢复',
level: 0,
status: 'normal',
icon: 'fas fa-check-circle'
},
{
id: 1,
deviceName: 'PLC远程监控系统',
time: '2021-10-16 14:54:11',
location: '污水处理监控系统',
message: '2#电机运行状态等于1',
level: 1,
status: 'warning',
icon: 'fas fa-exclamation-circle'
},
{
id: 2,
deviceName: 'PLC远程监控系统',
time: '2021-10-16 14:54:04',
location: '污水处理监控系统',
message: '2#电机运行状态报警恢复',
level: 0,
status: 'normal',
icon: 'fas fa-check-circle'
},
{
id: 1,
deviceName: 'PLC远程监控系统',
time: '2021-10-16 14:54:11',
location: '污水处理监控系统',
message: '2#电机运行状态等于1',
level: 1,
status: 'warning',
icon: 'fas fa-exclamation-circle'
},
{
id: 2,
deviceName: 'PLC远程监控系统',
time: '2021-10-16 14:54:04',
location: '污水处理监控系统',
message: '2#电机运行状态报警恢复',
level: 0,
status: 'normal',
icon: 'fas fa-check-circle'
},
],
// 设备预警信息
alerts: [],
// 统计预警信息次数
alertMessageData: [],
tableHeaders: ['设备名称', '设备位置', 'CPU使用率', '内存使用率', '温度', '健康度', '设备运行时长', '采集时间'],
deviceStatus: [
{
@ -290,7 +241,7 @@ export default {
getstatistic() {
this.loading = true
statistic().then(response => {
console.log("%c 🎹: getList -> response ", "font-size:16px;background-color:#624a64;color:white;", response)
this.alerts = response.rows
this.loading = false
}
)
@ -304,7 +255,7 @@ export default {
},
getlistMonitor() {
this.loading = true
listMonitor({id:11}).then(response => {
listMonitor().then(response => {
this.loading = false
}
)
@ -312,13 +263,33 @@ export default {
getalertMessageTimes() {
this.loading = true
alertMessageTimes().then(response => {
this.loading = false
this.alertMessageData = response.data
this.loading = false
}
)
},
async loadMore() {
console.log("%c 🎧: loadMore -> this.isLoading || this.noMore ", "font-size:16px;background-color:#64b738;color:white;", this.isLoading , this.noMore)
if (this.isLoading || this.noMore) return;
this.isLoading = true;
try {
const res = await statistic({page:this.page}); // 模拟API请求
if (res.rows.length < 10) { // 假设每页10条
this.noMore = true;
} else {
this.alerts = [...this.alerts, ...res.rows];
this.page++;
}
} catch (error) {
console.error('加载失败:', error);
} finally {
this.isLoading = false;
}
},
},
created() {
this.getstatistic()
// this.getstatistic()
this.getbyEquType()
this.getlistMonitor()
this.getalertMessageTimes()
@ -414,9 +385,13 @@ export default {
}
.stats-container {
display: flex;
display: grid;
justify-content: space-between;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
overflow-y: auto;
overflow-x: hidden;
height: 255px;
}
.stat-card {
@ -424,7 +399,7 @@ export default {
background: linear-gradient(135deg, #3498db, #2c3e50);
color: white;
border-radius: 10px;
padding: 20px;
padding: 12px;
text-align: center;
box-shadow: 0 4px 8px rgba(52, 152, 219, 0.3);
}
@ -452,6 +427,9 @@ export default {
.device-list {
list-style: none;
overflow-y: auto;
overflow-x: hidden;
max-height: 255px;
}
.device-item {

Write Preview
Loading…
Cancel
Save