Merge branch 'main' of http://42.192.7.176:3000/suojin/smartpark
sunjianxi
1 year ago
commit
b22db36646
14 changed files with 449 additions and 4 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