smartpark-front/src/views/opsVisualization/alarmProcess.vue

<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>