guanxiaohan
1 year ago
parent
157f4a96ad
commit
2c8c0c8d60
12 changed files with 425 additions and 2 deletions
|
After Width: | Height: | Size: 559 B |
|
After Width: | Height: | Size: 646 B |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 614 B |
|
After Width: | Height: | Size: 914 B |
@ -0,0 +1,423 @@ |
|||||||
|
<template> |
||||||
|
<div class="content"> |
||||||
|
<div class="process"> |
||||||
|
<div class="title">报警节点示意图</div> |
||||||
|
<div class="main"> |
||||||
|
<div class="process-example"> |
||||||
|
<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"> |
||||||
|
<img class="nav_img" src="../../../public/img/process/node1.png"> |
||||||
|
<div class="node-text">脚本</div> |
||||||
|
</div> |
||||||
|
<div class="yes-no"> |
||||||
|
<div class="yes"></div> |
||||||
|
<img class="nav_img" src="../../../public/img/process/yes.png"> |
||||||
|
</div> |
||||||
|
<div class="node-img"> |
||||||
|
<img class="nav_img" src="../../../public/img/process/node2.png"> |
||||||
|
<div class="node-text">电子围栏服务</div> |
||||||
|
</div> |
||||||
|
<div class="yes-no"> |
||||||
|
<div class="yes"></div> |
||||||
|
<img class="nav_img" src="../../../public/img/process/yes.png"> |
||||||
|
</div> |
||||||
|
<div class="node-img"> |
||||||
|
<img class="nav_img" src="../../../public/img/process/node3.png"> |
||||||
|
<div class="node-text">网关</div> |
||||||
|
</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> |
||||||
|
<img class="nav_img" src="../../../public/img/process/node4.png"> |
||||||
|
<div class="node-text">dtu</div> |
||||||
|
</div> |
||||||
|
<div class="yes-no"> |
||||||
|
<div class="no"></div> |
||||||
|
<img class="nav_img" src="../../../public/img/process/no.png"> |
||||||
|
</div> |
||||||
|
<div class="node-img"> |
||||||
|
<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> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="restart"> |
||||||
|
<div class="restart-title">操作：</div> |
||||||
|
<div class="restart-btn">一键重启</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="method"> |
||||||
|
<div class="title">报警解决方法</div> |
||||||
|
<div class="main"> |
||||||
|
<div class="text-box"> |
||||||
|
<div class="label">设备位置：</div> |
||||||
|
<div class="value"> |
||||||
|
<div class="item">园区2号围栏</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="text-box"> |
||||||
|
<div class="label">排查方法：</div> |
||||||
|
<div class="value"> |
||||||
|
<div class="item">1.检查电源是否正常，重新接入或更换电源；</div> |
||||||
|
<div class="item">2.检查是否过载，重新调整系统负载或更换更高性能的设备；</div> |
||||||
|
<div class="item">3.检查温度是否过高，采取措施降低温度，如改变工作环境或更换散热设备；</div> |
||||||
|
<div class="item">4.检查是否受到电磁干扰，采取措施降低干扰，如改变工作环境或更换屏蔽设备。</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
|
||||||
|
} |
||||||
|
}, |
||||||
|
created() { |
||||||
|
|
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
|
||||||
|
}, |
||||||
|
methods: { |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.content{ |
||||||
|
padding: 20px !important; |
||||||
|
.process{ |
||||||
|
width: calc(100% - 218px); |
||||||
|
margin-left: 218px; |
||||||
|
height: 584px; |
||||||
|
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; |
||||||
|
} |
||||||
|
.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{ |
||||||
|
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; |
||||||
|
.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> |
||||||
Loading…
Reference in new issue