From a548944f679dcd550977e4f9d341930a0e80ded1 Mon Sep 17 00:00:00 2001 From: Wangxin Date: Tue, 7 Oct 2025 17:00:09 +0800 Subject: [PATCH] =?UTF-8?q?=E3=80=90web=E3=80=91=20=E9=A6=96=E9=A1=B5UI?= =?UTF-8?q?=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/api/inMonitoring/devicesState.js | 2 +- ALOps_sys_fe/alops-ui/src/api/index/index.js | 92 ++ ALOps_sys_fe/alops-ui/src/router/index.js | 2 +- .../alops-ui/src/views/device/files/index.vue | 10 +- .../inMonitoring/devicesState/cardItem.vue | 514 +++++++++-- .../inMonitoring/devicesState/detail.vue | 839 ++++++++++++++---- .../inMonitoring/devicesState/history.vue | 69 ++ .../views/inMonitoring/devicesState/index.vue | 30 +- .../inMonitoring/inMonitor/message/index.vue | 3 - .../inMonitoring/inMonitor/rules/index.vue | 4 +- ALOps_sys_fe/alops-ui/src/views/index.vue | 91 +- 11 files changed, 1398 insertions(+), 258 deletions(-) create mode 100644 ALOps_sys_fe/alops-ui/src/api/index/index.js create mode 100644 ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/history.vue diff --git a/ALOps_sys_fe/alops-ui/src/api/inMonitoring/devicesState.js b/ALOps_sys_fe/alops-ui/src/api/inMonitoring/devicesState.js index eb99e9e3..5ead40a8 100644 --- a/ALOps_sys_fe/alops-ui/src/api/inMonitoring/devicesState.js +++ b/ALOps_sys_fe/alops-ui/src/api/inMonitoring/devicesState.js @@ -5,7 +5,7 @@ const api = '/device/files/' // 查询多台设备列表 export function list(query) { return request({ - url: api + 'listMonitor', + url: api + 'list', method: 'get', params: query }) diff --git a/ALOps_sys_fe/alops-ui/src/api/index/index.js b/ALOps_sys_fe/alops-ui/src/api/index/index.js new file mode 100644 index 00000000..858aa7a0 --- /dev/null +++ b/ALOps_sys_fe/alops-ui/src/api/index/index.js @@ -0,0 +1,92 @@ +import request from '@/utils/request' +import { parseStrEmpty } from "@/utils/ruoyi"; +const api = '/device/files/' + +// 查询详细 +export function getDict() { + return request({ + url: '/sys_dict', + method: 'get' + }) +} + +// 预警信息统 +export function statistic(query) { + return request({ + url: 'inMonitoring/statistic', + method: 'get', + params: query + }) +} + +// 统计预警信息次数 +export function alertMessageTimes(query) { + return request({ + url: 'inMonitoring/alertMessage/times', + method: 'get', + params: query + }) +} + +// 按设备类型分类统计设备信息 +export function byEquType() { + return request({ + url: 'device/files/byEquType', + method: 'get' + }) +} + +// 设备运行状态 +export function listMonitor(query) { + return request({ + url: 'device/files/monitorById', + method: 'get', + params: query + }) +} + + + + + + + + + +// 查询详细 +export function getInfo(id) { + return request({ + url: api + '/queryById/' + parseStrEmpty(id), + method: 'get' + }) +} + +// 新增 +export function add(data) { + return request({ + url: api + 'add', + method: 'post', + data: data + }) +} + +// 修改 +export function update(data) { + return request({ + url: api + 'modify', + method: 'put', + data: data + }) +} + +// 删除 +export function del(id) { + return request({ + url: api + id, + method: 'delete' + }) +} + + + + diff --git a/ALOps_sys_fe/alops-ui/src/router/index.js b/ALOps_sys_fe/alops-ui/src/router/index.js index 02ed4a52..904eb925 100644 --- a/ALOps_sys_fe/alops-ui/src/router/index.js +++ b/ALOps_sys_fe/alops-ui/src/router/index.js @@ -99,7 +99,7 @@ export const dynamicRoutes = [ permissions: ['inMonitoring:devicesState:edit'], children: [ { - path: 'detail/:userId(\\d+)', + path: 'detail/:userId', component: () => import('@/views/inMonitoring/devicesState/detail'), name: 'DevicesStateDetail', meta: { title: '设备详情', activeMenu: '/inMonitoring/devicesState-detail' } diff --git a/ALOps_sys_fe/alops-ui/src/views/device/files/index.vue b/ALOps_sys_fe/alops-ui/src/views/device/files/index.vue index 4185cba1..7b1d03db 100644 --- a/ALOps_sys_fe/alops-ui/src/views/device/files/index.vue +++ b/ALOps_sys_fe/alops-ui/src/views/device/files/index.vue @@ -33,9 +33,9 @@ 删除 - + @@ -119,7 +119,9 @@ - + + + @@ -205,7 +207,7 @@ import "splitpanes/dist/splitpanes.css" export default { name: "User", - dicts: ['device_disable', 'sys_user_sex'], + dicts: ['device_disable', 'sys_user_sex', 'warning_level'], components: { Treeselect, Splitpanes, Pane }, data() { return { diff --git a/ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/cardItem.vue b/ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/cardItem.vue index 445debfc..378dbb81 100644 --- a/ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/cardItem.vue +++ b/ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/cardItem.vue @@ -1,75 +1,485 @@ \ No newline at end of file + + \ No newline at end of file diff --git a/ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/detail.vue b/ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/detail.vue index c6aeb13f..59c8768a 100644 --- a/ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/detail.vue +++ b/ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/detail.vue @@ -1,198 +1,679 @@ - \ No newline at end of file + .tab-top{ + display: flex; + gap: 20px; + } + .top-item{ + color: #2d3748; + font-weight: 400; + font-size:18px ; + cursor: pointer; + } + .top-item.ac{ + font-weight: 600; + border-bottom: 2px solid #2d3748; + } + \ No newline at end of file diff --git a/ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/history.vue b/ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/history.vue new file mode 100644 index 00000000..f9828db3 --- /dev/null +++ b/ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/history.vue @@ -0,0 +1,69 @@ + + + \ No newline at end of file diff --git a/ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/index.vue b/ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/index.vue index 8a4bf9e2..d71f7257 100644 --- a/ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/index.vue +++ b/ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/index.vue @@ -36,12 +36,10 @@ -
+
- - - - + +
@@ -148,7 +146,7 @@ \ No newline at end of file + + \ No newline at end of file diff --git a/ALOps_sys_fe/alops-ui/src/views/inMonitoring/inMonitor/message/index.vue b/ALOps_sys_fe/alops-ui/src/views/inMonitoring/inMonitor/message/index.vue index 3f7ad5e9..0fdf7a3a 100644 --- a/ALOps_sys_fe/alops-ui/src/views/inMonitoring/inMonitor/message/index.vue +++ b/ALOps_sys_fe/alops-ui/src/views/inMonitoring/inMonitor/message/index.vue @@ -19,9 +19,6 @@ - - - 搜索 重置 diff --git a/ALOps_sys_fe/alops-ui/src/views/inMonitoring/inMonitor/rules/index.vue b/ALOps_sys_fe/alops-ui/src/views/inMonitoring/inMonitor/rules/index.vue index 5800c083..fcd5b1c1 100644 --- a/ALOps_sys_fe/alops-ui/src/views/inMonitoring/inMonitor/rules/index.vue +++ b/ALOps_sys_fe/alops-ui/src/views/inMonitoring/inMonitor/rules/index.vue @@ -7,7 +7,7 @@ - + @@ -112,7 +112,7 @@ - + diff --git a/ALOps_sys_fe/alops-ui/src/views/index.vue b/ALOps_sys_fe/alops-ui/src/views/index.vue index d35b56a4..3c06caf7 100644 --- a/ALOps_sys_fe/alops-ui/src/views/index.vue +++ b/ALOps_sys_fe/alops-ui/src/views/index.vue @@ -7,7 +7,7 @@
-

预警信息统计1

+

预警信息统计

@@ -132,6 +132,12 @@ import RaddarChart from './dashboard/RaddarChart' import PieChart from './dashboard/PieChart' import BarChart from './dashboard/BarChart' import digital from './dashboard/digital' +import { statistic, byEquType, listMonitor, alertMessageTimes } from "@/api/index/index" +import { getToken } from "@/utils/auth" +import Treeselect from "@riophae/vue-treeselect" +import "@riophae/vue-treeselect/dist/vue-treeselect.css" +import { Splitpanes, Pane } from "splitpanes" +import "splitpanes/dist/splitpanes.css" export default { name: 'Index', @@ -174,7 +180,47 @@ export default { 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' + }, ], tableHeaders: ['设备名称', '设备位置', 'CPU使用率', '内存使用率', '温度', '健康度', '设备运行时长', '采集时间'], deviceStatus: [ @@ -240,8 +286,45 @@ export default { if (health >= 80) return 'health-good'; if (health >= 60) return 'health-warning'; return 'health-critical'; - } - } + }, + getstatistic() { + this.loading = true + statistic().then(response => { + console.log("%c 🎹: getList -> response ", "font-size:16px;background-color:#624a64;color:white;", response) + this.loading = false + } + ) + }, + getbyEquType() { + this.loading = true + byEquType().then(response => { + this.loading = false + } + ) + }, + getlistMonitor() { + this.loading = true + listMonitor({id:11}).then(response => { + this.loading = false + } + ) + }, + getalertMessageTimes() { + this.loading = true + alertMessageTimes().then(response => { + this.loading = false + } + ) + }, + }, + created() { + this.getstatistic() + this.getbyEquType() + this.getlistMonitor() + this.getalertMessageTimes() + + + }, }