|
|
|
|
@ -2,8 +2,40 @@ |
|
|
|
|
<div class="content"> |
|
|
|
|
<div class="process"> |
|
|
|
|
<div class="title">报警节点示意图</div> |
|
|
|
|
<el-carousel |
|
|
|
|
style="position: relative" |
|
|
|
|
:autoplay="false" |
|
|
|
|
:loop="false" |
|
|
|
|
@change="change" |
|
|
|
|
> |
|
|
|
|
<div |
|
|
|
|
style=" |
|
|
|
|
width: 100%; |
|
|
|
|
height: 100%; |
|
|
|
|
position: absolute; |
|
|
|
|
background: rgba(255, 255, 255, 0.9); |
|
|
|
|
z-index: 9; |
|
|
|
|
position: absolute; |
|
|
|
|
top: 0; |
|
|
|
|
left: 0; |
|
|
|
|
text-align: center; |
|
|
|
|
line-height: 300px; |
|
|
|
|
z-index: 99; |
|
|
|
|
" |
|
|
|
|
v-show="loading1 || !warnPoint.length" |
|
|
|
|
> |
|
|
|
|
{{ |
|
|
|
|
loading1 ? "数据加载中..." : "未查询到设备类型通讯链路及排除方案" |
|
|
|
|
}} |
|
|
|
|
</div> |
|
|
|
|
<el-carousel-item v-for="(item, index) in warnPoint" :key="item"> |
|
|
|
|
<div class="main"> |
|
|
|
|
<div class="process-example"> |
|
|
|
|
<div style="position: absolute; left: 24px"> |
|
|
|
|
共{{ warnPoint.length }}条，{{ |
|
|
|
|
index + 1 + "/" + warnPoint.length |
|
|
|
|
}} |
|
|
|
|
</div> |
|
|
|
|
<div class="example-title">示例：</div> |
|
|
|
|
<div class="example-box"> |
|
|
|
|
<div class="point blue"></div> |
|
|
|
|
@ -20,128 +52,127 @@ |
|
|
|
|
</div> |
|
|
|
|
<div class="process-center"> |
|
|
|
|
<div class="process-node-box"> |
|
|
|
|
<div class="node-img"> |
|
|
|
|
<div class="node-img" v-if="item.lineData && item.lineData[0]"> |
|
|
|
|
<img |
|
|
|
|
class="nav_img" |
|
|
|
|
src="../../../public/img/process/node1.png" |
|
|
|
|
/> |
|
|
|
|
<div class="node-text">脚本</div> |
|
|
|
|
<div class="node-text"> |
|
|
|
|
{{ |
|
|
|
|
item.lineData && item.lineData[0] && item.lineData[0].name |
|
|
|
|
}} |
|
|
|
|
</div> |
|
|
|
|
<div class="yes-no"> |
|
|
|
|
<div class="yes"></div> |
|
|
|
|
<img class="nav_img" src="../../../public/img/process/yes.png" /> |
|
|
|
|
</div> |
|
|
|
|
<div class="node-img"> |
|
|
|
|
<normal |
|
|
|
|
v-if="item.lineData && item.lineData[1]" |
|
|
|
|
:params="item.lineData[1]" |
|
|
|
|
/> |
|
|
|
|
<div class="node-img" v-if="item.lineData && item.lineData[1]"> |
|
|
|
|
<img |
|
|
|
|
class="nav_img" |
|
|
|
|
src="../../../public/img/process/node2.png" |
|
|
|
|
/> |
|
|
|
|
<div class="node-text">电子围栏服务</div> |
|
|
|
|
<div class="node-text"> |
|
|
|
|
{{ |
|
|
|
|
item.lineData && item.lineData[1] && item.lineData[1].name |
|
|
|
|
}} |
|
|
|
|
</div> |
|
|
|
|
<div class="yes-no"> |
|
|
|
|
<div class="yes"></div> |
|
|
|
|
<img class="nav_img" src="../../../public/img/process/yes.png" /> |
|
|
|
|
</div> |
|
|
|
|
<div class="node-img"> |
|
|
|
|
<normal |
|
|
|
|
v-if="item.lineData && item.lineData[2]" |
|
|
|
|
:params="item.lineData[2]" |
|
|
|
|
/> |
|
|
|
|
<div class="node-img" v-if="item.lineData && item.lineData[2]"> |
|
|
|
|
<img |
|
|
|
|
class="nav_img" |
|
|
|
|
src="../../../public/img/process/node3.png" |
|
|
|
|
/> |
|
|
|
|
<div class="node-text">网关</div> |
|
|
|
|
<div class="node-text"> |
|
|
|
|
{{ |
|
|
|
|
item.lineData && item.lineData[2] && item.lineData[2].name |
|
|
|
|
}} |
|
|
|
|
</div> |
|
|
|
|
<div class="yes-no"> |
|
|
|
|
<div class="yes"></div> |
|
|
|
|
<img class="nav_img" src="../../../public/img/process/yes.png" /> |
|
|
|
|
</div> |
|
|
|
|
<div class="node-img"> |
|
|
|
|
<div class="baojing">dtu断联报警</div> |
|
|
|
|
<normal |
|
|
|
|
v-if="item.lineData && item.lineData[3]" |
|
|
|
|
:params="item.lineData[3]" |
|
|
|
|
/> |
|
|
|
|
<div class="node-img" v-if="item.lineData && item.lineData[3]"> |
|
|
|
|
<img |
|
|
|
|
class="nav_img" |
|
|
|
|
src="../../../public/img/process/node4.png" |
|
|
|
|
/> |
|
|
|
|
<div class="node-text">dtu</div> |
|
|
|
|
<div class="node-text"> |
|
|
|
|
{{ |
|
|
|
|
item.lineData && item.lineData[3] && item.lineData[3].name |
|
|
|
|
}} |
|
|
|
|
</div> |
|
|
|
|
<div class="yes-no"> |
|
|
|
|
<div class="no"></div> |
|
|
|
|
<img class="nav_img" src="../../../public/img/process/no.png" /> |
|
|
|
|
</div> |
|
|
|
|
<div class="node-img"> |
|
|
|
|
<normal |
|
|
|
|
v-if="item.lineData && item.lineData[4]" |
|
|
|
|
:params="item.lineData[4]" |
|
|
|
|
/> |
|
|
|
|
<div class="node-img" v-if="item.lineData && item.lineData[4]"> |
|
|
|
|
<img |
|
|
|
|
class="nav_img" |
|
|
|
|
src="../../../public/img/process/node5.png" |
|
|
|
|
/> |
|
|
|
|
<div class="node-text">电子围栏</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="process-more"> |
|
|
|
|
<div class="button">查看更多报警信息</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="process-bottom"> |
|
|
|
|
<div class="line"> |
|
|
|
|
<div class="item"> |
|
|
|
|
<div class="item-box"> |
|
|
|
|
<div class="time">2024-5-17 08:51:12</div> |
|
|
|
|
<div class="point red"></div> |
|
|
|
|
<div class="name">dtu断联报警</div> |
|
|
|
|
<div class="code">dtu编号：SJK001</div> |
|
|
|
|
<div class="btn red-btn"> |
|
|
|
|
<img |
|
|
|
|
class="img" |
|
|
|
|
src="../../../public/img/process/serch.png" |
|
|
|
|
alt="" |
|
|
|
|
/> |
|
|
|
|
<div class="text">请检查dtu设备</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="item-box"> |
|
|
|
|
<div class="time">2024-5-17 08:51:13</div> |
|
|
|
|
<div class="point grey"></div> |
|
|
|
|
<div class="name">静默</div> |
|
|
|
|
<div class="code">设备编号：SHUIBIAO1</div> |
|
|
|
|
<div class="btn grey-btn"> |
|
|
|
|
<img |
|
|
|
|
class="img" |
|
|
|
|
src="../../../public/img/process/loading.png" |
|
|
|
|
alt="" |
|
|
|
|
/> |
|
|
|
|
<div class="text">等待重新链接</div> |
|
|
|
|
<div class="node-text"> |
|
|
|
|
{{ |
|
|
|
|
item.lineData && item.lineData[4] && item.lineData[4].name |
|
|
|
|
}} |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="restart"> |
|
|
|
|
<div class="restart-title">操作：</div> |
|
|
|
|
<div class="restart-btn">一键重启</div> |
|
|
|
|
<div class="process-more"> |
|
|
|
|
<div class="button" @click="() => open(item)"> |
|
|
|
|
查看更多报警信息 |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</el-carousel-item> |
|
|
|
|
</el-carousel> |
|
|
|
|
</div> |
|
|
|
|
<div class="method"> |
|
|
|
|
<div class="title">报警解决方法</div> |
|
|
|
|
<div class="main" v-for="item in data"> |
|
|
|
|
<div class="text-box"> |
|
|
|
|
<div class="label">设备类型编码：</div> |
|
|
|
|
<div class="value"> |
|
|
|
|
<div class="item">{{ item.classCode }}</div> |
|
|
|
|
<div class="title" style="z-index: 10">报警解决方法</div> |
|
|
|
|
<div |
|
|
|
|
style=" |
|
|
|
|
width: 100%; |
|
|
|
|
height: 280px; |
|
|
|
|
position: absolute; |
|
|
|
|
background: rgba(255, 255, 255, 0.9); |
|
|
|
|
z-index: 9; |
|
|
|
|
position: absolute; |
|
|
|
|
top: 0; |
|
|
|
|
left: 0; |
|
|
|
|
text-align: center; |
|
|
|
|
line-height: 300px; |
|
|
|
|
border: 1px solid #d1d1d1; |
|
|
|
|
border-top: none; |
|
|
|
|
" |
|
|
|
|
v-show="loading2 && !resolveTips.length" |
|
|
|
|
> |
|
|
|
|
{{ loading2 ? "数据加载中..." : "未查询到报警解决方法" }} |
|
|
|
|
</div> |
|
|
|
|
<div class="text-box" style="display: flex; padding: 28px 0 0 44px"> |
|
|
|
|
<div class="label" style="font-size: 18px; font-weight: bold"> |
|
|
|
|
排查方法： |
|
|
|
|
</div> |
|
|
|
|
<div class="text-box"> |
|
|
|
|
<div class="label">排查方法：</div> |
|
|
|
|
<div> |
|
|
|
|
<div class="value"> |
|
|
|
|
<div class="item">1.检查电源是否正常，重新接入或更换电源；</div> |
|
|
|
|
<div class="item"> |
|
|
|
|
2.检查是否过载，重新调整系统负载或更换更高性能的设备； |
|
|
|
|
<div class="item" v-for="item in resolveTips"> |
|
|
|
|
{{ item.shortNum }}.{{ item.tips }} |
|
|
|
|
</div> |
|
|
|
|
<div class="item"> |
|
|
|
|
3.检查温度是否过高，采取措施降低温度，如改变工作环境或更换散热设备； |
|
|
|
|
</div> |
|
|
|
|
<div class="item"> |
|
|
|
|
4.检查是否受到电磁干扰，采取措施降低干扰，如改变工作环境或更换屏蔽设备。 |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<!-- <div class="text-box" style="margin: 0;"> |
|
|
|
|
<div class="label">{{ item.shortNum }}.</div> |
|
|
|
|
<div class="value"> |
|
|
|
|
<div class="item">{{ item.tips }}</div> |
|
|
|
|
</div> |
|
|
|
|
</div> --> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
@ -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() { |
|
|
|
|
// [ |
|
|
|
|
const { serviceCode = "" } = this.$route.query; |
|
|
|
|
|
|
|
|
|
this.loading1 = true; |
|
|
|
|
getWarnPoint({ serviceCode }) |
|
|
|
|
.then((res) => { |
|
|
|
|
//排序 |
|
|
|
|
this.loading1 = false; |
|
|
|
|
let arr = res.data.data; |
|
|
|
|
// let arr = [ |
|
|
|
|
// { |
|
|
|
|
// nodeid: 1, |
|
|
|
|
// list: [ |
|
|
|
|
// classCode: "0200", // 设备类型 |
|
|
|
|
// lineData: [ |
|
|
|
|
// { |
|
|
|
|
// parent: "294", // 父节点id |
|
|
|
|
// name: "data", // 节点名称 |
|
|
|
|
// id: 301, // 节点id |
|
|
|
|
// type: "equip", // 监控节点类型 |
|
|
|
|
// class_code: "0200", // 设备类型 |
|
|
|
|
// status: 4, // 节点状态 |
|
|
|
|
// }, |
|
|
|
|
// { |
|
|
|
|
// name: "脚本", |
|
|
|
|
// state: "正常", |
|
|
|
|
// parent: "293", |
|
|
|
|
// name: "gateway", |
|
|
|
|
// id: 294, |
|
|
|
|
// type: "middleware", |
|
|
|
|
// status: 4, |
|
|
|
|
// }, |
|
|
|
|
// { |
|
|
|
|
// name: "电子围栏服务", |
|
|
|
|
// state: "正常", |
|
|
|
|
// 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, // 节点状态 |
|
|
|
|
// }, |
|
|
|
|
// { |
|
|
|
|
// name: "网关", |
|
|
|
|
// state: "正常", |
|
|
|
|
// parent: "293", |
|
|
|
|
// name: "gateway", |
|
|
|
|
// id: 294, |
|
|
|
|
// type: "middleware", |
|
|
|
|
// status: 4, |
|
|
|
|
// }, |
|
|
|
|
// { |
|
|
|
|
// name: "dtu", |
|
|
|
|
// state: "dtu断联报警", |
|
|
|
|
// parent: "11", |
|
|
|
|
// name: "mqtt通讯服务", |
|
|
|
|
// id: 293, |
|
|
|
|
// type: "middleware", |
|
|
|
|
// status: 4, |
|
|
|
|
// }, |
|
|
|
|
// { |
|
|
|
|
// name: "电子围栏", |
|
|
|
|
// state: "", |
|
|
|
|
// parent: "0", |
|
|
|
|
// name: "水表、热表、火警、电梯", |
|
|
|
|
// id: 11, |
|
|
|
|
// type: "service", |
|
|
|
|
// status: 2, |
|
|
|
|
// }, |
|
|
|
|
// ], |
|
|
|
|
// }, |
|
|
|
|
// ]; |
|
|
|
|
getResolveTips(); |
|
|
|
|
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: {}, |
|
|
|
|
}; |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
@ -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; |
|
|
|
|
|
lizhichao
2 years ago