client/gansu-water-station-web.git

			@@ -11,11 +11,167 @@
			</div>
			<div class="data-item">
			<div class="item-t">数据管理</div>
			<div class="item-c"></div>
			<div class="item-c">
			<div class="data-m">
			<div class="data-m-item">
			<img class="img" src="@/assets/images/screen/home/data-cl2.png" alt="" />
			<div class="info">
			<div class="name">余氯</div>
			<div class="val"><span>0.04</span>mg/l</div>
			</div>
			</div>
			<div class="data-m-item">
			<img class="img" src="@/assets/images/screen/home/data-cl2.png" alt="" />
			<div class="info">
			<div class="name">余氯</div>
			<div class="val"><span>0.04</span>mg/l</div>
			</div>
			</div>
			<div class="data-m-item">
			<img class="img" src="@/assets/images/screen/home/data-cl2.png" alt="" />
			<div class="info">
			<div class="name">余氯</div>
			<div class="val"><span>0.04</span>mg/l</div>
			</div>
			</div>
			<div class="data-m-item">
			<img class="img" src="@/assets/images/screen/home/data-cl2.png" alt="" />
			<div class="info">
			<div class="name">余氯</div>
			<div class="val"><span>0.04</span>mg/l</div>
			</div>
			</div>
			<div class="data-m-item">
			<img class="img" src="@/assets/images/screen/home/data-cl2.png" alt="" />
			<div class="info">
			<div class="name">余氯</div>
			<div class="val"><span>0.04</span>mg/l</div>
			</div>
			</div>
			<div class="data-m-item">
			<img class="img" src="@/assets/images/screen/home/data-cl2.png" alt="" />
			<div class="info">
			<div class="name">余氯</div>
			<div class="val"><span>0.04</span>mg/l</div>
			</div>
			</div>
			</div>
			</div>
			</div>
			<div class="data-item">
			<div class="item-t">报警消息</div>
			<div class="item-c"></div>
			<div class="item-c">
			<div class="warn">
			<div class="list">
			<div class="icon">
			<img src="@/assets/images/screen/home/warning.png" alt="" />
			</div>
			<div class="info">
			<div>水池水位过低</div>
			<div class="address">高位水池</div>
			</div>
			<div class="level">严重警报</div>
			<div class="yewei">
			<div>水池液位:</div>
			<div class="val">1.07m</div>
			</div>
			<div class="time">
			<div class="start">开始报警时间: 5月22日 17:00</div>
			<div class="end">恢复时间:暂无</div>
			</div>
			</div>
			<div class="list">
			<div class="icon">
			<img src="@/assets/images/screen/home/warning.png" alt="" />
			</div>
			<div class="info">
			<div>水池水位过低</div>
			<div class="address">高位水池</div>
			</div>
			<div class="level">严重警报</div>
			<div class="yewei">
			<div>水池液位:</div>
			<div class="val">1.07m</div>
			</div>
			<div class="time">
			<div class="start">开始报警时间: 5月22日 17:00</div>
			<div class="end">恢复时间:暂无</div>
			</div>
			</div>
			<div class="list">
			<div class="icon">
			<img src="@/assets/images/screen/home/warning.png" alt="" />
			</div>
			<div class="info">
			<div>水池水位过低</div>
			<div class="address">高位水池</div>
			</div>
			<div class="level">严重警报</div>
			<div class="yewei">
			<div>水池液位:</div>
			<div class="val">1.07m</div>
			</div>
			<div class="time">
			<div class="start">开始报警时间: 5月22日 17:00</div>
			<div class="end">恢复时间:暂无</div>
			</div>
			</div>
			<div class="list">
			<div class="icon">
			<img src="@/assets/images/screen/home/warning.png" alt="" />
			</div>
			<div class="info">
			<div>水池水位过低</div>
			<div class="address">高位水池</div>
			</div>
			<div class="level">严重警报</div>
			<div class="yewei">
			<div>水池液位:</div>
			<div class="val">1.07m</div>
			</div>
			<div class="time">
			<div class="start">开始报警时间: 5月22日 17:00</div>
			<div class="end">恢复时间:暂无</div>
			</div>
			</div>
			<div class="list">
			<div class="icon">
			<img src="@/assets/images/screen/home/warning.png" alt="" />
			</div>
			<div class="info">
			<div>水池水位过低</div>
			<div class="address">高位水池</div>
			</div>
			<div class="level">严重警报</div>
			<div class="yewei">
			<div>水池液位:</div>
			<div class="val">1.07m</div>
			</div>
			<div class="time">
			<div class="start">开始报警时间: 5月22日 17:00</div>
			<div class="end">恢复时间:暂无</div>
			</div>
			</div>
			<div class="list">
			<div class="icon">
			<img src="@/assets/images/screen/home/warning.png" alt="" />
			</div>
			<div class="info">
			<div>水池水位过低</div>
			<div class="address">高位水池</div>
			</div>
			<div class="level">严重警报</div>
			<div class="yewei">
			<div>水池液位:</div>
			<div class="val">1.07m</div>
			</div>
			<div class="time">
			<div class="start">开始报警时间: 5月22日 17:00</div>
			<div class="end">恢复时间:暂无</div>
			</div>
			</div>
			</div>
			</div>
			</div>
			</div>
			<div class="home-c"></div>
			@@ -30,11 +186,103 @@
			</div>
			<div class="data-item">
			<div class="item-t">生产控制</div>
			<div class="item-c"></div>
			<div class="item-c">
			<div class="product">
			<div class="list">
			<div class="name">刘李河水库</div>
			<div class="status">当前状态：开闸</div>
			<div class="btn">
			<el-button size="small" type="success">开闸</el-button>
			<el-button size="small" type="danger">关闸</el-button>
			</div>
			</div>
			<div class="list">
			<div class="name">刘李河水库</div>
			<div class="status">当前状态：开闸</div>
			<div class="btn">
			<el-button size="small" type="success">开闸</el-button>
			<el-button size="small" type="danger">关闸</el-button>
			</div>
			</div>
			<div class="list">
			<div class="name">刘李河水库</div>
			<div class="status">当前状态：开闸</div>
			<div class="btn">
			<el-button size="small" type="success">开闸</el-button>
			<el-button size="small" type="danger">关闸</el-button>
			</div>
			</div>
			<div class="list">
			<div class="name">刘李河水库</div>
			<div class="status">当前状态：开闸</div>
			<div class="btn">
			<el-button size="small" type="success">开闸</el-button>
			<el-button size="small" type="danger">关闸</el-button>
			</div>
			</div>
			<div class="list">
			<div class="name">刘李河水库</div>
			<div class="status">当前状态：开闸</div>
			<div class="btn">
			<el-button size="small" type="success">开闸</el-button>
			<el-button size="small" type="danger">关闸</el-button>
			</div>
			</div>
			<div class="list">
			<div class="name">刘李河水库</div>
			<div class="status">当前状态：开闸</div>
			<div class="btn">
			<el-button size="small" type="success">开闸</el-button>
			<el-button size="small" type="danger">关闸</el-button>
			</div>
			</div>
			<div class="list">
			<div class="name">刘李河水库</div>
			<div class="status">当前状态：开闸</div>
			<div class="btn">
			<el-button size="small" type="success">开闸</el-button>
			<el-button size="small" type="danger">关闸</el-button>
			</div>
			</div>
			</div>
			</div>
			</div>
			<div class="data-item">
			<div class="item-t">运营维护</div>
			<div class="item-c"></div>
			<div class="item-c">
			<div class="opera">
			<div class="list">
			<div class="type">日常巡检</div>
			<div class="status">已完成</div>
			<div class="time">上次完成时间：2025/6/25</div>
			<div class="user">负责人：张三</div>
			</div>
			<div class="list">
			<div class="type">月度维护</div>
			<div class="status">已完成</div>
			<div class="time">上次完成时间：2025/6/25</div>
			<div class="user">负责人：张三</div>
			</div>
			<div class="list">
			<div class="type">季度维护</div>
			<div class="status">已完成</div>
			<div class="time">上次完成时间：2025/6/25</div>
			<div class="user">负责人：张三</div>
			</div>
			<div class="list">
			<div class="type">年度维护</div>
			<div class="status">已完成</div>
			<div class="time">上次完成时间：2025/6/25</div>
			<div class="user">负责人：张三</div>
			</div>
			<div class="list">
			<div class="type">异常维护</div>
			<div class="status">已完成</div>
			<div class="time">上次完成时间：2025/6/25</div>
			<div class="user">负责人：张三</div>
			</div>
			</div>
			</div>
			</div>
			</div>
			</div>
			@@ -42,6 +290,7 @@


			<script setup>

			</script>


			@@ -71,6 +320,9 @@
			height: calc(100% - 3.5rem);
			background: url("@/assets/images/screen/cbox-content.png") no-repeat;
			background-size: 100% 100%;
			padding: 0.7rem 0.7rem 1.1rem;
			box-sizing: border-box;
			overflow: hidden;
			}
			}
			&-l{
			@@ -78,22 +330,162 @@
			.xm{
			width: 100%;
			height: 100%;
			padding: 1rem;
			color: #fff;
			font-size: 0.95rem;
			font-size: 0.97rem;
			text-indent: 2rem;
			}
			.data-m{
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-wrap: wrap;
			.data-m-item{
			width: 31%;
			display: flex;
			justify-content: center;
			align-items: center;
			.img{
			width: 3.5rem;
			height: 3.5rem;
			}
			.info{
			flex: 1;
			color: #fff;
			padding: 0 0.5rem;
			.name{
			padding: 0.3rem 0;
			}
			.val{
			font-size: 0.8rem;
			span{
			display: inline-block;
			width: 60%;
			}
			}
			}
			}
			}
			.warn{
			height: 100%;
			overflow-y: scroll;
			&::-webkit-scrollbar {
			display: none;
			}
			.list{
			color: #fff;
			font-size: 0.6rem;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0.5rem;
			box-shadow: inset 0 0 10px 0 #658B9C;
			.icon{
			width: 10%;
			img{
			width: 2rem;
			height: 2rem;
			}
			}
			.info{
			width: 20%;
			text-align: center;
			.address{
			color: #1c84c6;
			padding-top: 0.2rem;
			}
			}
			.level{
			width: 20%;
			color: #df1a1a;
			font-size: 1rem;
			font-weight: bold;
			text-align: center;
			}
			.yewei{
			width: 20%;
			text-align: center;
			.val{
			padding-top: 0.2rem;
			}
			}
			.time{
			width: 30%;
			text-align: center;
			.end{
			color: #1c84c6;
			padding-top: 0.2rem;
			}
			}
			}
			}
			}
			&-c{
			width: 50%;
			}
			&-r{
			width: 25%;
			.compony{
			width: 100%;
			height: 100%;
			padding: 1rem;
			color: #fff;
			font-size: 1.1rem;
			font-size: 1.2rem;
			text-indent: 2rem;
			}
			.product{
			height: 100%;
			overflow-y: scroll;
			&::-webkit-scrollbar {
			display: none;
			}
			.list{
			color: #fff;
			display: flex;
			align-items: center;
			padding: 0.5rem 0;
			box-shadow: inset 0 0 10px 0 #658B9C;
			.name{
			width: 30%;
			text-align: center;
			}
			.status{
			width: 30%;
			text-align: center;
			}
			.btn{
			width: 40%;
			text-align: center;
			}
			}
			}
			.opera{
			height: 100%;
			.list{
			color: #fff;
			display: flex;
			align-items: center;
			padding: 0.8rem 0;
			box-shadow: inset 0 0 10px 0 #658B9C;
			.type{
			width: 15%;
			text-align: center;
			}
			.status{
			width: 20%;
			text-align: center;
			color: #4AFF6B;
			}
			.time{
			width: 40%;
			text-align: center;
			font-size: 0.8rem;
			}
			.user{
			width: 25%;
			text-align: center;
			}
			}
			}
			}
			}
			</style>