fix:修改首页

web

2025-06-19 06c29b2bb03adf9dbbf7e33490a42693258d3168

fix:修改首页

 src/assets/images/screen/home/data-cl2.png

 src/assets/images/screen/home/warning.png

 src/router/index.js

@@ -75,6 +75,10 @@
      {
        path: 'home',
        component: () => import('@/views/screen/index.vue')
      },
      {
        path: 'production',
        component: () => import('@/views/screen/production.vue')
      }
    ]
  },

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

 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>

 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>