From dcf3385a97c3ba1e633f4cee3f8fcf97b0842de2 Mon Sep 17 00:00:00 2001 From: lizhichao Date: Sun, 29 Sep 2024 13:28:25 +0800 Subject: [PATCH] =?UTF-8?q?=E6=8E=A5=E5=8F=A3=E8=81=94=E8=B0=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/opsVisualization/alarmProcess.js | 4 +- src/api/opsVisualization/serviceDataOAM.js | 6 +- src/api/opsVisualization/systemMonitoring.js | 6 +- src/api/opsVisualization/tuobu.js | 2 +- src/page/index/sidebar/opsSidebar.vue | 4 +- src/page/opsVisualization/alarmProcess.vue | 489 ++++++++++++------ .../opsVisualization/components/normal.vue | 64 +++ src/page/opsVisualization/serviceDataOAM.vue | 69 ++- .../systemMonitoring/index.vue | 138 ++--- 9 files changed, 524 insertions(+), 258 deletions(-) create mode 100644 src/page/opsVisualization/components/normal.vue diff --git a/src/api/opsVisualization/alarmProcess.js b/src/api/opsVisualization/alarmProcess.js index ba4380b..277fd6c 100644 --- a/src/api/opsVisualization/alarmProcess.js +++ b/src/api/opsVisualization/alarmProcess.js @@ -3,7 +3,7 @@ import request from '@/router/axios'; //设备类型通讯链路及排除方案 export const getWarnPoint = (params) => { return request({ - url: '/kgApi/monitor-business/getWarnPoint', + url: '/monitor-business/getWarnPoint', method: 'get', params }) @@ -11,7 +11,7 @@ export const getWarnPoint = (params) => { //排查方案信息列表 export const getResolveTips = (params) => { return request({ - url: '/kgApi/monitor-business/getResolveTips', + url: '/monitor-business/getResolveTips', method: 'get', params }) diff --git a/src/api/opsVisualization/serviceDataOAM.js b/src/api/opsVisualization/serviceDataOAM.js index 1f51a2f..6efd016 100644 --- a/src/api/opsVisualization/serviceDataOAM.js +++ b/src/api/opsVisualization/serviceDataOAM.js @@ -2,7 +2,7 @@ import request from '@/router/axios'; //报警设备列表 export const getEquipList = (params) => { return request({ - url: '/kgApi/monitor-business/getEquipList', + url: '/monitor-business/getEquipList', method: 'get', params }) @@ -10,7 +10,7 @@ export const getEquipList = (params) => { //当前报警信息 export const getWarnMsg = (params) => { return request({ - url: '/kgApi/monitor-business/getWarnMsg', + url: '/monitor-business/getWarnMsg', method: 'get', params }) @@ -18,7 +18,7 @@ export const getWarnMsg = (params) => { //报警记录 export const getWarnHisList = (params) => { return request({ - url: '/kgApi/monitor-business/getWarnHisList', + url: '/monitor-business/getWarnHisList', method: 'get', params }) diff --git a/src/api/opsVisualization/systemMonitoring.js b/src/api/opsVisualization/systemMonitoring.js index 3d0ceb7..afdcd3f 100644 --- a/src/api/opsVisualization/systemMonitoring.js +++ b/src/api/opsVisualization/systemMonitoring.js @@ -2,19 +2,19 @@ import request from '@/router/axios'; export const getServiceList = () => { return request({ - url: '/kgApi/monitor-system/getServiceList', + url: '/monitor-system/getServiceList', method: 'get', }) } export const getMiddleList = () => { return request({ - url: '/kgApi/monitor-system/getMiddleList', + url: '/monitor-system/getMiddleList', method: 'get', }) } export const getServerParamsList = () => { return request({ - url: '/kgApi/monitor-system/getServerParamsList', + url: '/monitor-system/getServerParamsList', method: 'get', }) } diff --git a/src/api/opsVisualization/tuobu.js b/src/api/opsVisualization/tuobu.js index 9716e0d..94b4616 100644 --- a/src/api/opsVisualization/tuobu.js +++ b/src/api/opsVisualization/tuobu.js @@ -2,7 +2,7 @@ import request from '@/router/axios'; export const getMonitorList = () => { return request({ - url: '/kgApi/monitor-system/getMonitorList', + url: '/monitor-system/getMonitorList', method: 'get', }) } diff --git a/src/page/index/sidebar/opsSidebar.vue b/src/page/index/sidebar/opsSidebar.vue index 6041075..ba0be65 100644 --- a/src/page/index/sidebar/opsSidebar.vue +++ b/src/page/index/sidebar/opsSidebar.vue @@ -32,9 +32,9 @@ 业务数据运维 - + 报警信息记录 diff --git a/src/page/opsVisualization/alarmProcess.vue b/src/page/opsVisualization/alarmProcess.vue index da5fad6..bfbb5fa 100644 --- a/src/page/opsVisualization/alarmProcess.vue +++ b/src/page/opsVisualization/alarmProcess.vue @@ -2,146 +2,177 @@
报警节点示意图
-
-
-
示例：
-
-
-
正常
-
-
-
-
报警
-
-
-
-
静默
-
-
-
-
-
- -
脚本
-
-
-
- -
-
- -
电子围栏服务
-
-
-
- -
-
- -
网关
-
-
-
- -
-
-
dtu断联报警
- -
dtu
-
-
-
- -
-
- -
电子围栏
-
-
-
-
查看更多报警信息
-
+ +
+ {{ + loading1 ? "数据加载中..." : "未查询到设备类型通讯链路及排除方案" + }}
-
-
-
-
-
2024-5-17 08:51:12
+ +
+
+
+ 共{{ warnPoint.length }}条，{{ + index + 1 + "/" + warnPoint.length + }} +
+
示例：
+
+
+
正常
+
+
-
dtu断联报警
-
dtu编号：SJK001
-
+
报警
+
+
+
+
静默
+
+
+
+
+
-
请检查dtu设备
+
+ {{ + item.lineData && item.lineData[0] && item.lineData[0].name + }} +
-
-
-
2024-5-17 08:51:13
-
-
静默
-
设备编号：SHUIBIAO1
-
+ +
+ +
+ {{ + item.lineData && item.lineData[1] && item.lineData[1].name + }} +
+
+ +
+ +
+ {{ + item.lineData && item.lineData[2] && item.lineData[2].name + }} +
+
+ +
-
等待重新链接
+
+ {{ + item.lineData && item.lineData[3] && item.lineData[3].name + }} +
+
+ +
+ +
+ {{ + item.lineData && item.lineData[4] && item.lineData[4].name + }} +
+
+
+
+
+ 查看更多报警信息
-
-
-
操作：
-
一键重启
-
-
+ +
-
报警解决方法
-
-
-
设备类型编码：
-
-
{{ item.classCode }}
-
+
报警解决方法
+
+ {{ loading2 ? "数据加载中..." : "未查询到报警解决方法" }} +
+
+
+ 排查方法：
-
-
排查方法：
+
-
1.检查电源是否正常，重新接入或更换电源；
-
- 2.检查是否过载，重新调整系统负载或更换更高性能的设备； -
-
- 3.检查温度是否过高，采取措施降低温度，如改变工作环境或更换散热设备； -
-
- 4.检查是否受到电磁干扰，采取措施降低干扰，如改变工作环境或更换屏蔽设备。 +
+ {{ item.shortNum }}.{{ item.tips }}
+
@@ -150,52 +181,188 @@ import { getWarnPoint, getResolveTips, -} from "@/api/opsVisualization/serviceDataOAM"; +} from "@/api/opsVisualization/alarmProcess"; +import normal from "./components/normal.vue"; export default { data() { return { - data: [ - { - classCode: "设备类型编码,0100", - pointCode: "报警节点code，1", - tips: "排查方案说明，简单进线电流", - shortNum: 1, // 排查方案排序，展示时按照排序升序展示 - }, - ], + resolveTips: [], + warnPoint: [], + loading1: false, + loading2: false, + + carouselIndex: 0, }; }, + components: { + normal, + }, created() {}, mounted() { - // [ - // { - // nodeid: 1, - // list: [ - // { - // name: "脚本", - // state: "正常", - // }, - // { - // name: "电子围栏服务", - // state: "正常", - // }, - // { - // name: "网关", - // state: "正常", - // }, - // { - // name: "dtu", - // state: "dtu断联报警", - // }, - // { - // name: "电子围栏", - // state: "", - // }, - // ], - // }, - // ]; - getResolveTips(); + const { serviceCode = "" } = this.$route.query; + + this.loading1 = true; + getWarnPoint({ serviceCode }) + .then((res) => { + //排序 + this.loading1 = false; + let arr = res.data.data; + // let arr = [ + // { + // classCode: "0200", // 设备类型 + // lineData: [ + // { + // parent: "294", // 父节点id + // name: "data", // 节点名称 + // id: 301, // 节点id + // type: "equip", // 监控节点类型 + // class_code: "0200", // 设备类型 + // status: 4, // 节点状态 + // }, + // { + // parent: "293", + // name: "gateway", + // id: 294, + // type: "middleware", + // status: 4, + // }, + // { + // parent: "11", + // name: "mqtt通讯服务", + // id: 293, + // type: "middleware", + // status: 4, + // }, + // { + // parent: "0", + // name: "水表、热表、火警、电梯", + // id: 11, + // type: "service", + // status: 2, + // }, + // ], + // }, + // { + // classCode: "0201", // 设备类型 + // lineData: [ + // { + // parent: "294", // 父节点id + // name: "data", // 节点名称 + // id: 301, // 节点id + // type: "equip", // 监控节点类型 + // class_code: "0200", // 设备类型 + // status: 4, // 节点状态 + // }, + // { + // parent: "293", + // name: "gateway", + // id: 294, + // type: "middleware", + // status: 4, + // }, + // { + // parent: "11", + // name: "mqtt通讯服务", + // id: 293, + // type: "middleware", + // status: 4, + // }, + // { + // parent: "0", + // name: "水表、热表、火警、电梯", + // id: 11, + // type: "service", + // status: 2, + // }, + // ], + // }, + // ]; + arr.map((i) => { + i.lineData = this.arrSort(i.lineData); + }); + + this.warnPoint = arr; + this.loading1 = false; + + console.log( + arr, + "warnPointwarnPointwarnPointwarnPointwarnPointwarnPoint" + ); + + //排查方案信息列表 + this.loading2 = true; + getResolveTips({ + classCode: this.warnPoint[0].classCode, + pointCode: this.warnPoint[0].lineData.find( + (i) => i.status == 2 || i.status == 3 + ).type, + }) + .then((res) => { + this.resolveTips = res.data.data; + this.loading2 = false; + }) + .catch((err) => { + this.$message.warning("排查方案信息列表查询失败，请联系管理员！"); + this.loading2 = false; + }); + }) + .catch((err) => { + this.$message.warning( + "设备类型通讯链路及排除方案查询失败，请联系管理员！" + ); + this.loading1 = false; + }); + }, + methods: { + change(index) { + console.log("indexindexindex", index); + + this.loading2 = true; + getResolveTips({ + classCode: this.warnPoint[index].classCode, + pointCode: this.warnPoint[index].lineData.find( + (i) => i.status == 2 || i.status == 3 + ).type, + }) + .then((res) => { + this.resolveTips = res.data.data; + this.loading2 = false; + }) + .catch((err) => { + this.$message.warning("排查方案信息列表查询失败，请联系管理员！"); + this.loading2 = false; + }); + }, + open(detail) { + this.$router.push({ + path: `/opsVisualization/serviceDataOAM?equipCode=&warnStatus=1&classCode=${detail.classCode}`, + }); + }, + arrSort(list) { + let arr = []; + arr[0] = list.find((i) => i.parent == 0); + if (arr[0]) { + arr[1] = list.find((i) => i.parent == arr[0].id); + } + if (arr[1]) { + arr[2] = list.find((i) => i.parent == arr[1].id); + } + if (arr[2]) { + arr[3] = list.find((i) => i.parent == arr[2].id); + } + if (arr[3]) { + arr[4] = list.find((i) => i.parent == arr[3].id); + } + if (arr[4]) { + arr[5] = list.find((i) => i.parent == arr[4].id); + } + if (arr[5]) { + arr[6] = list.find((i) => i.parent == arr[4].id); + } + arr.splice(arr.length - 1, 1); + return arr; + }, }, - methods: {}, }; @@ -205,7 +372,7 @@ export default { .process { width: calc(100% - 218px); margin-left: 218px; - height: 584px; + height: 500px; background: #ffffff; border-radius: 0px 0px 0px 0px; border: 1px solid #d1d1d1; @@ -432,6 +599,7 @@ export default { } } .method { + height: 270px; flex: 1; margin-top: 30px; width: calc(100% - 218px); @@ -442,6 +610,7 @@ export default { border: 1px solid #d1d1d1; display: flex; flex-direction: column; + position: relative; .title { width: 100%; height: 40px; diff --git a/src/page/opsVisualization/components/normal.vue b/src/page/opsVisualization/components/normal.vue new file mode 100644 index 0000000..a954c89 --- /dev/null +++ b/src/page/opsVisualization/components/normal.vue @@ -0,0 +1,64 @@ + + + + + \ No newline at end of file diff --git a/src/page/opsVisualization/serviceDataOAM.vue b/src/page/opsVisualization/serviceDataOAM.vue index 0087b43..d5f7384 100644 --- a/src/page/opsVisualization/serviceDataOAM.vue +++ b/src/page/opsVisualization/serviceDataOAM.vue @@ -4,16 +4,16 @@
- + /> --> @@ -26,6 +26,12 @@ placeholder="请输入设备编码" clearable /> + @@ -48,7 +54,7 @@ align="center" > - + @@ -59,7 +65,7 @@ align="center" > - + @@ -71,7 +77,14 @@ width="100" align="center" > - 查看 +
@@ -80,7 +93,7 @@ width: 100%; height: 100%; position: absolute; - background: rgba(255,255,255,.9); + background: rgba(255, 255, 255, 0.9); z-index: 9; position: absolute; top: 0; @@ -118,13 +131,13 @@ >报警信息记录
- - +
{{ tabKey == 1 ? "报警详情信息" : "报警信息记录" }} - 更多 +
span { - cursor: pointer; - } } .timelineBoxContent { display: flex; @@ -299,10 +309,16 @@ export default { tableData: [], warnMsgList: [], + equipCode2: "", }; }, + computed: {}, mounted() { + const { equipCode = "", warnStatus = "", classCode } = this.$route.query; + this.equipCode = equipCode; + this.warnStatus = warnStatus; + this.classCode = classCode; this.handleSearch(); }, methods: { @@ -319,29 +335,28 @@ export default { equipCode, currentPage, pageSize, - }).then((res) => { + }).then((res) => { this.tableData = res.data.data.records; this.currentPage = res.data.data.current; this.total = res.data.data.total; this.loading = false; }); - getWarnMsg({ equipCode }).then((res) => { - this.warnMsgList = res.data.data; - }); }, tabChange(tabKey) { this.tabKey = tabKey; - const { equipCode } = this; + const { equipCode2 } = this; if (tabKey == 1) { - getWarnMsg({ equipCode }).then((res) => { + getWarnMsg({ equipCode: equipCode2 }).then((res) => { this.warnMsgList = res.data.data; }); } else if (tabKey == 2) { - getWarnHisList({ equipCode, currentPage: 1, pageSize: 10 }).then( - (res) => { - this.warnMsgList = res.data.data.records; - } - ); + getWarnHisList({ + equipCode: equipCode2, + currentPage: 1, + pageSize: 99, + }).then((res) => { + this.warnMsgList = res.data.data.records; + }); } }, // 改变每页显示条数 @@ -379,6 +394,10 @@ export default { this.loading = false; }); }, + handleDetail(detail) { + this.equipCode2 = detail.equipCode; + this.tabChange(1); + }, }, }; diff --git a/src/page/opsVisualization/systemMonitoring/index.vue b/src/page/opsVisualization/systemMonitoring/index.vue index 5ee4264..96b846d 100644 --- a/src/page/opsVisualization/systemMonitoring/index.vue +++ b/src/page/opsVisualization/systemMonitoring/index.vue @@ -22,6 +22,7 @@ borderColor: item.color != 'red' ? '#dcdcdc' : '#e14b33', background: item.color != 'red' ? '' : '#FFF2F2 ', }" + @click="() => handleTo(item)" >
{{ item.name }}
-
- +
状态
-
- {{ item.color != 'red' ? "正常" : "设备异常" }} +
+ {{ item.color != "red" ? "正常" : "设备异常" }}
@@ -56,28 +53,38 @@ style="width: 240px; height: 216px; position: relative" v-for="(item, index) in middleListData" :key="index" + @click="() => handleTo(item)" :style="{ borderColor: item.result != 'result' ? '#dcdcdc' : '#e14b33', background: item.result != 'result' ? '' : '#FFF2F2 ', }" > -
- - {{ item.type == 'redis' ? 'Redis服务监控' : '数据库监控' }} +
+ + {{ item.type == "redis" ? "Redis服务监控" : "数据库监控" }}
- +
状态
-
- {{ item.result != 'result' ? "正常" : "服务已挂" }} -
+
+ {{ item.result != "result" ? "正常" : "服务已挂" }} +
状态
-
{{ i.result == 'result' ? '硬件异常' : i.result }}
+
+ {{ i.result == "result" ? "硬件异常" : i.result }} +
@@ -180,33 +209,15 @@ @@ -330,15 +347,12 @@ export default { // flex-direction: column; align-items: center; position: relative; - padding-top: 60px; + padding-top: 60px; } .item_title { font-weight: bold; margin: 20px 0 2px 0; } -.item_EnTitle { - font-size: 14px; -} .item_bottom { width: 100%; display: flex; @@ -354,7 +368,7 @@ export default { color: #26b843; } } -.itemBox3_item{ +.itemBox3_item { width: 210px; height: 182px; border: 1px solid #dcdcdc; @@ -363,13 +377,13 @@ export default { flex-direction: column; align-items: center; } -.bottom-box{ +.bottom-box { width: 100%; display: flex; flex-direction: column; // max-width: 1280px } -.ip-title{ +.ip-title { position: absolute; top: 10px; left: 10px;