From 06c29b2bb03adf9dbbf7e33490a42693258d3168 Mon Sep 17 00:00:00 2001
From: web <candymxq888@outlook.com>
Date: 星期四, 19 六月 2025 11:32:49 +0800
Subject: [PATCH] fix:修改首页
---
src/views/screen/index.vue | 408 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 400 insertions(+), 8 deletions(-)
diff --git a/src/views/screen/index.vue b/src/views/screen/index.vue
index e61578d..7fd2ca0 100644
--- a/src/views/screen/index.vue
+++ b/src/views/screen/index.vue
@@ -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>
\ No newline at end of file
--
Gitblit v1.9.3