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/production.vue | 93 ++++++++++
src/assets/images/screen/home/warning.png | 0
src/assets/images/screen/home/data-cl2.png | 0
src/screen/index.vue | 5
src/views/screen/index.vue | 408 ++++++++++++++++++++++++++++++++++++++++++++
src/router/index.js | 4
6 files changed, 499 insertions(+), 11 deletions(-)
diff --git a/src/assets/images/screen/home/data-cl2.png b/src/assets/images/screen/home/data-cl2.png
new file mode 100644
index 0000000..fe9b834
--- /dev/null
+++ b/src/assets/images/screen/home/data-cl2.png
Binary files differ
diff --git a/src/assets/images/screen/home/warning.png b/src/assets/images/screen/home/warning.png
new file mode 100644
index 0000000..f35d1b4
--- /dev/null
+++ b/src/assets/images/screen/home/warning.png
Binary files differ
diff --git a/src/router/index.js b/src/router/index.js
index 93c8723..5c3cdf6 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -75,6 +75,10 @@
{
path: 'home',
component: () => import('@/views/screen/index.vue')
+ },
+ {
+ path: 'production',
+ component: () => import('@/views/screen/production.vue')
}
]
},
diff --git a/src/screen/index.vue b/src/screen/index.vue
index aa309d1..73e05a2 100644
--- a/src/screen/index.vue
+++ b/src/screen/index.vue
@@ -61,7 +61,7 @@
const btnList = ref([
{name:'综合调度',url:'/screen/home'},
- {name:'生产监控',url:''},
+ {name:'生产监控',url:'/screen/production'},
{name:'净水厂',url:''},
{name:'取水泵站',url:''},
{name:'高位水池',url:''},
@@ -107,8 +107,7 @@
<style lang="scss" scoped>
.main{
- background:rgba(8,28,65,1);
- //background-image:url("../assets/images/screen/bcg.png");
+ background: #0A0F13;
background-size: 100% 100%;
width: 100%;
height: 100%;
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
diff --git a/src/views/screen/production.vue b/src/views/screen/production.vue
new file mode 100644
index 0000000..0a60426
--- /dev/null
+++ b/src/views/screen/production.vue
@@ -0,0 +1,93 @@
+<script setup>
+
+</script>
+
+<template>
+ <div class="production">
+ <div class="production-l">
+ <div class="data-item">
+ <div class="item-t">数据监控</div>
+ <div class="item-c"></div>
+ </div>
+ <div class="data-item">
+ <div class="item-t">报警监控</div>
+ <div class="item-c"></div>
+ </div>
+ <div class="data-item">
+ <div class="item-t">能耗分析</div>
+ <div class="item-c"></div>
+ </div>
+ </div>
+ <div class="production-c">
+ <div class="data-item">
+ <div class="item-t">水务驾驶舱</div>
+ <div class="item-c"></div>
+ </div>
+ <div class="data-item">
+ <div class="item-t">供水总览</div>
+ <div class="item-c"></div>
+ </div>
+ <div class="data-item">
+ <div class="item-t">工艺监控</div>
+ <div class="item-c"></div>
+ </div>
+ </div>
+ <div class="production-r">
+ <div class="data-item">
+ <div class="item-t">运行分析</div>
+ <div class="item-c"></div>
+ </div>
+ <div class="data-item">
+ <div class="item-t">加药管理</div>
+ <div class="item-c"></div>
+ </div>
+ <div class="data-item">
+ <div class="item-t">统计分析</div>
+ <div class="item-c"></div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<style scoped lang="scss">
+.production{
+ 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%;
+ }
+ &-c{
+ width: 45%;
+ }
+ &-r{
+ width: 25%;
+ }
+}
+</style>
\ No newline at end of file
--
Gitblit v1.9.3