You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
666 lines
19 KiB
666 lines
19 KiB
<template> |
|
<basic-container class="content"> |
|
<div class="process"> |
|
<div class="title"> |
|
<div>报警节点示意图</div> |
|
<el-button class="go-back" @click="goBack">返回</el-button> |
|
</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> |
|
<div class="value">正常</div> |
|
</div> |
|
<div class="example-box margin-right-left-20"> |
|
<div class="point red"></div> |
|
<div class="value">报警</div> |
|
</div> |
|
<div class="example-box"> |
|
<div class="point grey"></div> |
|
<div class="value">静默</div> |
|
</div> |
|
</div> |
|
<div class="process-center"> |
|
<div class="process-node-box"> |
|
<div class="node-img" v-if="item.lineData && item.lineData[0]"> |
|
<img |
|
class="nav_img" |
|
:src="require(`../../../public/img/opsVisualization/node1_${item.lineData[1].status ||3}.png`)" |
|
/> |
|
<div class="node-text"> |
|
{{ |
|
item.lineData && item.lineData[0] && item.lineData[0].name |
|
}} |
|
</div> |
|
</div> |
|
<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="require(`../../../public/img/opsVisualization/node2_${item.lineData[1].status||3}.png`)" |
|
/> |
|
<div class="node-text"> |
|
{{ |
|
item.lineData && item.lineData[1] && item.lineData[1].name |
|
}} |
|
</div> |
|
</div> |
|
<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="require(`../../../public/img/opsVisualization/node3_${item.lineData[2].status||3}.png`)" |
|
/> |
|
<div class="node-text"> |
|
{{ |
|
item.lineData && item.lineData[2] && item.lineData[2].name |
|
}} |
|
</div> |
|
</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="require(`../../../public/img/opsVisualization/node3_${item.lineData[3].status||3}.png`)" |
|
/> |
|
<div class="node-text"> |
|
{{ |
|
item.lineData && item.lineData[3] && item.lineData[3].name |
|
}} |
|
</div> |
|
</div> |
|
<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="require(`../../../public/img/opsVisualization/node3_${item.lineData[4].status||3}.png`)" |
|
/> |
|
<div class="node-text"> |
|
{{ |
|
item.lineData && item.lineData[4] && item.lineData[4].name |
|
}} |
|
</div> |
|
</div> |
|
</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" 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> |
|
<div class="value"> |
|
<div class="item" v-for="item in resolveTips"> |
|
{{ item.shortNum }}.{{ item.tips }} |
|
</div> |
|
</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> |
|
</basic-container> |
|
</template> |
|
|
|
<script> |
|
import { |
|
getWarnPoint, |
|
getResolveTips, |
|
} from "@/api/opsVisualization/alarmProcess"; |
|
import normal from "./components/normal.vue"; |
|
export default { |
|
data() { |
|
return { |
|
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 = [ |
|
// { |
|
// 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; |
|
}, |
|
goBack() { |
|
this.$router.go(-1); |
|
} |
|
}, |
|
}; |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.content { |
|
// padding: 20px !important; |
|
.process { |
|
// width: calc(100% - 218px); |
|
// margin-left: 218px; |
|
height: 500px; |
|
background: #ffffff; |
|
border-radius: 0px 0px 0px 0px; |
|
border: 1px solid #d1d1d1; |
|
display: flex; |
|
flex-direction: column; |
|
.title { |
|
width: 100%; |
|
height: 40px; |
|
background: #e5e5e5; |
|
border-radius: 0px 0px 0px 0px; |
|
border: 1px solid #d1d1d1; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
font-size: 18px; |
|
color: #333333; |
|
position: relative; |
|
.go-back{ |
|
position: absolute; |
|
right: 2px; |
|
} |
|
} |
|
.main { |
|
display: flex; |
|
flex-direction: column; |
|
padding: 30px; |
|
height: 50%; |
|
.process-example { |
|
width: 100%; |
|
display: flex; |
|
justify-content: flex-end; |
|
.example-title { |
|
color: #999999; |
|
margin-right: 6px; |
|
font-size: 14px; |
|
} |
|
.example-box { |
|
display: flex; |
|
align-items: center; |
|
.point { |
|
width: 11px; |
|
height: 11px; |
|
border-radius: 10px; |
|
margin-right: 11px; |
|
} |
|
.value { |
|
color: #999999; |
|
font-size: 14px; |
|
} |
|
} |
|
.margin-right-left-20 { |
|
margin: 0 20px; |
|
} |
|
} |
|
.process-center { |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-around; |
|
margin-top: 75px; |
|
.process-node-box { |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
.node-img { |
|
width: 69px; |
|
height: 69px; |
|
display: flex; |
|
flex-direction: column; |
|
justify-content: center; |
|
align-items: center; |
|
position: relative; |
|
.baojing { |
|
width: 133px; |
|
height: 31px; |
|
background: #fff3f3; |
|
border-radius: 0px 0px 0px 0px; |
|
border: 1px solid #ee6464; |
|
font-size: 16px; |
|
color: #e14b33; |
|
position: absolute; |
|
top: -55px; |
|
transform: translateY(-50%); |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
} |
|
.nav_img { |
|
width: 100%; |
|
height: 100%; |
|
// margin-bottom: 20px; |
|
} |
|
.node-text { |
|
position: absolute; |
|
transform: translateY(-50%); |
|
width: 100px; |
|
text-align: center; |
|
top: 100px; |
|
} |
|
} |
|
.yes-no { |
|
width: 163px; |
|
height: 17px; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
position: relative; |
|
.yes { |
|
width: 167px; |
|
height: 17px; |
|
background: #21a2e5; |
|
opacity: 0.18; |
|
position: absolute; |
|
} |
|
.no { |
|
width: 167px; |
|
height: 17px; |
|
background: #a5a5a5; |
|
opacity: 0.18; |
|
position: absolute; |
|
} |
|
.nav_img { |
|
width: 24px; |
|
height: 24px; |
|
opacity: 1; |
|
z-index: 10; |
|
} |
|
} |
|
} |
|
.process-more { |
|
.button { |
|
width: 190px; |
|
height: 40px; |
|
background: #ffffff; |
|
border-radius: 0px 0px 0px 0px; |
|
border: 1px solid #2b8ee5; |
|
color: #2b8ee5; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
cursor: pointer; |
|
} |
|
} |
|
} |
|
.process-bottom { |
|
border-top: 1px solid #d1d1d1; |
|
margin-top: 200px; |
|
display: flex; |
|
flex-direction: column; |
|
.line { |
|
margin-top: 20px; |
|
display: flex; |
|
align-items: flex-start; |
|
justify-content: center; |
|
} |
|
.item { |
|
display: flex; |
|
flex-direction: column; |
|
.item-box { |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
margin-bottom: 20px; |
|
.point { |
|
width: 10px; |
|
height: 10px; |
|
margin: 0 20px; |
|
border-radius: 10px; |
|
} |
|
.name { |
|
width: 200px; |
|
} |
|
.code { |
|
width: 250px; |
|
margin-left: 40px; |
|
} |
|
.btn { |
|
margin-left: 20px; |
|
width: 185px; |
|
height: 31px; |
|
border-radius: 0px 0px 0px 0px; |
|
display: flex; |
|
justify-content: space-around; |
|
align-items: center; |
|
font-size: 16px; |
|
.img { |
|
width: 15px; |
|
height: 15px; |
|
} |
|
} |
|
.red-btn { |
|
background: #fff3f3; |
|
border: 1px solid #ee6464; |
|
.text { |
|
color: #e14b33; |
|
} |
|
} |
|
.grey-btn { |
|
background: #f5f5f5; |
|
border: 1px solid #999999; |
|
.text { |
|
color: #999999; |
|
} |
|
} |
|
} |
|
} |
|
.restart { |
|
margin-left: 72px; |
|
display: flex; |
|
align-items: center; |
|
cursor: pointer; |
|
.restart-text { |
|
font-size: 16px; |
|
color: #333333; |
|
} |
|
.restart-btn { |
|
width: 93px; |
|
height: 31px; |
|
background: #2b8ee5; |
|
border-radius: 0px 0px 0px 0px; |
|
font-size: 16px; |
|
color: #ffffff; |
|
margin-left: 7px; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
.method { |
|
height: 270px; |
|
flex: 1; |
|
margin-top: 30px; |
|
// width: calc(100% - 218px); |
|
// // height: 326px; |
|
// margin-left: 218px; |
|
background: #ffffff; |
|
border-radius: 0px 0px 0px 0px; |
|
border: 1px solid #d1d1d1; |
|
display: flex; |
|
flex-direction: column; |
|
position: relative; |
|
.title { |
|
width: 100%; |
|
height: 40px; |
|
background: #e5e5e5; |
|
border-radius: 0px 0px 0px 0px; |
|
border: 1px solid #d1d1d1; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
font-size: 18px; |
|
color: #333333; |
|
} |
|
.main { |
|
display: flex; |
|
flex-direction: column; |
|
padding: 22px; |
|
// height: 50%; |
|
overflow: auto; |
|
.text-box { |
|
margin-bottom: 22px; |
|
display: flex; |
|
.label { |
|
} |
|
.value { |
|
.item { |
|
margin-bottom: 12px; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
.blue { |
|
background: #21a2e5; |
|
} |
|
.red { |
|
background: #e96955; |
|
} |
|
.grey { |
|
background: #e1e1e1; |
|
} |
|
} |
|
</style> |