<template>
|
<div class="home">
|
<div class="home-l">
|
<div class="data-item">
|
<div class="item-t">项目简介</div>
|
<div class="item-c">
|
<div class="xm">
|
泾川县北部塬区供水保障工程位于玉都镇北部，距县城约 20 公里。工程起点为泾川县玉都镇刘李河水库，库水通过布置在水库大坝下游的预沉池沉淀和取水泵站加压后，中途经过安全调节池，最终到达位于玉都镇的净水厂，输水管线沿线经过寺头冯、小李村、曹家山、任王家等村庄，全长约 8 公里，在净水厂配水井设置灌溉分水口。工程等别为小型 Ⅳ 级，工程规模为小（1）型，由预沉池、取水泵站、输水管线、净水厂等组成。主要建设内容包括新建 1 万立方米 / 天净水厂 1 处、3.7 万立方米 / 天取水泵站 1 座，同步配套 400 立方米安全调节池 1 座、输水管道 8 公里，并安装视频安防、通信系统，实现工程自动化控制和信息化管理。
|
</div>
|
</div>
|
</div>
|
<div class="data-item">
|
<div class="item-t">数据管理</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 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>
|
<div class="home-r">
|
<div class="data-item">
|
<div class="item-t">公司介绍</div>
|
<div class="item-c">
|
<div class="compony">
|
泾川县水利工程建设站是泾川县水务局下属单位，地址位于泾川县安定街 2 号。站内人员秉持 “节水优先、空间均衡、系统治理、两手发力” 的治水方针开展工作，负责县域水利项目规划编制、前期手续办理、建设过程监管等多项工作，严格执行水利工程建设管理的相关法规与技术标准，保障项目合规推进，在水资源利用、防洪治理、生态修复等水利建设的各领域发挥关键作用，全力推动县域水利事业发展。
|
</div>
|
</div>
|
</div>
|
<div class="data-item">
|
<div class="item-t">生产控制</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 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>
|
</template>
|
|
|
<script setup>
|
|
</script>
|
|
|
<style scoped lang="scss">
|
.home{
|
width: 100%;
|
height: 100%;
|
display: flex;
|
justify-content: space-between;
|
.data-item{
|
width: 100%;
|
height: 33.3%;
|
.item-t{
|
width: 100%;
|
height: 3rem;
|
line-height: 2.8rem;
|
background: url("@/assets/images/screen/cbox-title.png") no-repeat;
|
background-size: 100% 100%;
|
font-size: 1.2rem;
|
font-weight: bold;
|
padding-left: 3rem;
|
color: #fff;
|
}
|
.item-c{
|
margin-top: 0.5rem;
|
width: 100%;
|
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{
|
width: 25%;
|
.xm{
|
width: 100%;
|
height: 100%;
|
color: #fff;
|
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%;
|
color: #fff;
|
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>
|
