报警节点示意图
-
-
-
- 示例：
-
-
-
- 正常
-
-
-
- 报警
-
-
-
- 静默
-
-
+
-
-
- 
-
-
- 脚本
-
-
- 
-
-
-
- 
-
-
- 电子围栏服务
-
-
-
-
-
-
- 
-
-
- 网关
-
-
-
-
-
-
- 
-
- 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 ? "数据加载中..." : "未查询到报警解决方法" }}
+
+
+
@@ -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 @@
+
+
+ 排查方法：
-
-
+
排查方法：
+
-
1.检查电源是否正常，重新接入或更换电源；
-
- 2.检查是否过载，重新调整系统负载或更换更高性能的设备；
-
-
- 3.检查温度是否过高，采取措施降低温度，如改变工作环境或更换散热设备；
-
-
- 4.检查是否受到电磁干扰，采取措施降低干扰，如改变工作环境或更换屏蔽设备。
+
+ {{ item.shortNum }}.{{ item.tips }}
+
+ 
+
+ 
+
+
+
+
+
+
\ 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 @@
+
+
+
-
@@ -48,7 +54,7 @@
align="center"
>
-
+
@@ -59,7 +65,7 @@
align="center"
>
-
+
@@ -71,7 +77,14 @@
width="100"
align="center"
>
- 查看
+
+ 查看
+
-
+
@@ -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;
@@ -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)"
>
@@ -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.name }}
-
- ![]()
+ ![]()
状态
-
- {{ item.color != 'red' ? "正常" : "设备异常" }}
+
+ {{ item.color != "red" ? "正常" : "设备异常" }}
- ![]()
- {{ item.type == 'redis' ? 'Redis服务监控' : '数据库监控' }}
+
+ ![]()
+ {{ item.type == "redis" ? "Redis服务监控" : "数据库监控" }}
- ![]()
+ ![]()
状态
-
- {{ item.result != 'result' ? "正常" : "服务已挂" }}
-
+
+ {{ item.result != "result" ? "正常" : "服务已挂" }}
+
状态
- {{ i.result == 'result' ? '硬件异常' : i.result }}
+
+ {{ i.result == "result" ? "硬件异常" : i.result }}
+