zhangchao/Road_roller
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 首页dashboard布局

Browse Source
This commit is contained in:
Ironsp
2026-08-31 15:16:34 +08:00
parent 5b57a106fb
commit 504411f532
7 changed files with 739 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

686
src/pages/home/index.vue
View File

@@ -1,40 +1,668 @@
<script setup lang="ts">
import { useDialog } from '@wot-ui/ui'
import { mockData } from '@/mock/index'
definePage({
layout: false,
style: {
navigationBarTitleText: '首页',
navigationStyle: 'custom',
},
})
const dialog = useDialog()
function openConfirm() {
dialog
.confirm({
title: '提示',
msg: '确认执行此操作吗？',
})
.then(() => {
console.log('点击了确认')
})
.catch(() => {
console.log('点击了取消')
})
}
</script>
<template>
<view>首页</view>
<view>消息:{{ mockData.message }}</view>
<view>时间:{{ mockData.time }}</view>
<wd-dialog />
<wd-button @click="openConfirm">
打开 Confirm
</wd-button>
<view class="page">
<home-homeNav />
<view class="content">
<!-- 今日作业概览 -->
<view class="card overview-card">
<view class="card-header">
<text class="card-title">
今日作业概览
</text>
<text class="card-date">
2025年8月11日
</text>
</view>
<view class="overview-stats">
<view class="stat-item">
<text class="stat-label">
实时作业状态(台)
</text>
<text class="stat-value">
22
</text>
</view>
<view class="stat-item">
<text class="stat-label">
累计作业面积(m²)
</text>
<text class="stat-value">
1268
</text>
</view>
<view class="stat-item">
<text class="stat-label">
累计作业时长(小时)
</text>
<text class="stat-value">
8.5
</text>
</view>
</view>
</view>
<!-- 双列布局 -->
<view class="two-column">
<!-- 左列 -->
<view class="column-left">
<!-- 实时作业状态 -->
<view class="card">
<view class="card-header">
<text class="card-title">
实时作业状态
</text>
</view>
<view class="card-body">
<view class="status-info">
<view class="avatar" />
<view class="info">
<text class="name">
徐工XS65H #01
</text>
<text class="sub">
G1XG2584-B01
</text>
</view>
<view class="status-tag">
作业中
</view>
</view>
<view class="status-params">
<view class="param">
<text class="param-label">
振动频率
</text>
<text class="param-value">
8939HZ
</text>
</view>
<view class="param">
<text class="param-label">
振幅
</text>
<text class="param-value">
8939mm
</text>
</view>
<view class="param">
<text class="param-label">
行驶速度
</text>
<text class="param-value">
3km/h
</text>
</view>
<view class="param">
<text class="param-label">
钢轮温度
</text>
<text class="param-value">
8939°C
</text>
</view>
</view>
<view class="card-footer">
<button class="btn-primary">
进入作业监控
</button>
</view>
</view>
</view>
<!-- 项目列表 -->
<view class="card">
<view class="card-header">
<text class="card-title">
项目列表
</text>
<text class="card-link">
查看全部
</text>
</view>
<view class="card-body">
<view class="project-item">
<view class="project-info">
<view class="avatar" />
<view class="info">
<text class="name">
G6高速改扩建项目
</text>
<text class="sub">
K1+200-K1+800
</text>
</view>
<view class="status-tag">
作业中
</view>
</view>
<view class="project-params">
<view class="param">
<text class="param-label">
作业时长
</text>
<text class="param-value">
8h
</text>
</view>
<view class="param">
<text class="param-label">
压实面积
</text>
<text class="param-value">
28.5m²
</text>
</view>
<view class="param">
<text class="param-label">
碾压遍数
</text>
<text class="param-value">
10遍
</text>
</view>
</view>
<view class="project-actions">
<button class="btn-action btn-start">
开始项目
</button>
<button class="btn-action btn-pause">
暂停项目
</button>
<button class="btn-action btn-end">
结束项目
</button>
</view>
</view>
</view>
</view>
</view>
<!-- 右列 -->
<view class="column-right">
<!-- 项目作业进度 -->
<view class="card">
<view class="card-header">
<text class="card-title">
项目作业进度
</text>
<text class="card-sub">
K1+200-K1+800
</text>
</view>
<view class="card-body">
<view class="progress-content">
<view class="progress-circle">
<text class="progress-percent">
25%
</text>
<text class="progress-label">
jobs
</text>
</view>
<view class="progress-details">
<view class="progress-item">
<text class="progress-name">
压实合格率
</text>
<text class="progress-value">
95.65%
</text>
</view>
<view class="progress-item">
<text class="progress-name">
完成进度
</text>
<text class="progress-value">
66%
</text>
</view>
<view class="progress-item">
<text class="progress-name">
总面积
</text>
<text class="progress-value">
1164m²
</text>
</view>
<view class="progress-item">
<text class="progress-name">
已压实面积
</text>
<text class="progress-value">
664m²
</text>
</view>
<view class="progress-item">
<text class="progress-name">
未压实面积
</text>
<text class="progress-value">
500m²
</text>
</view>
</view>
</view>
</view>
</view>
<!-- 当前施工段 -->
<view class="card">
<view class="card-header">
<text class="card-title">
当前施工段
</text>
</view>
<view class="card-body">
<view class="construction-info">
<view class="icon-placeholder" />
<view class="info">
<text class="segment">
K12+300 — K125+800
</text>
<text class="requirement">
压实遍数要求:≥6遍
</text>
</view>
</view>
</view>
</view>
<!-- 异常警告 -->
<view class="card">
<view class="card-header">
<text class="card-title">
异常警告
</text>
<text class="card-link">
查看全部
</text>
</view>
<view class="card-body">
<view class="warning-item">
<view class="warning-icon" />
<view class="warning-info">
<text class="warning-title">
钢轮温度过高
</text>
<text class="warning-desc">
徐工XS65H #01 钢轮温度达90°C,超过國值85°C
</text>
</view>
<text class="warning-time">
10分钟前
</text>
</view>
<view class="warning-item">
<view class="warning-icon warning-rtk" />
<view class="warning-info">
<text class="warning-title">
RTK信号弱
</text>
<text class="warning-desc">
三一SSZ600AC #002 RTK定位精度下降, 请注意
</text>
</view>
<text class="warning-time">
10分钟前
</text>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<style></style>
<style scoped>
.page {
/* min-height: 100vh; */
background-color: #EAEFF9;
}
.content {
padding: 12px;
padding-top: 88px;
}
/* 卡片基础样式 */
.card {
background-color: #ffffff;
border-radius: 12px;
margin-bottom: 12px;
overflow: hidden;
}
.card-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
border-bottom: 1px solid #f5f5f5;
}
.card-title {
font-size: 15px;
font-weight: bold;
color: #333333;
}
.card-date,
.card-sub,
.card-link {
font-size: 12px;
color: #999999;
}
.card-link {
color: #4685FD;
}
.card-body {
padding: 12px 16px;
}
/* 今日作业概览 */
.overview-card {
margin-top: 12px;
background: linear-gradient(135deg, #4685FD 0%, #6BA3FF 100%);
}
.overview-card .card-header {
border-bottom: none;
padding-bottom: 0;
}
.overview-card .card-title,
.overview-card .card-date {
color: #ffffff;
}
.overview-stats {
display: flex;
justify-content: space-around;
padding: 16px;
}
.stat-item {
display: flex;
flex-direction: column;
align-items: center;
}
.stat-label {
font-size: 12px;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 8px;
}
.stat-value {
font-size: 28px;
font-weight: bold;
color: #ffffff;
}
/* 双列布局 */
.two-column {
display: flex;
gap: 12px;
}
.column-left,
.column-right {
flex: 1;
display: flex;
flex-direction: column;
}
/* 状态信息 */
.status-info,
.project-info,
.construction-info {
display: flex;
align-items: center;
margin-bottom: 12px;
}
.avatar {
width: 48px;
height: 48px;
border-radius: 8px;
background-color: #f0f0f0;
margin-right: 12px;
}
.info {
flex: 1;
display: flex;
flex-direction: column;
}
.name {
font-size: 14px;
font-weight: bold;
color: #333333;
margin-bottom: 4px;
}
.sub {
font-size: 12px;
color: #999999;
}
.status-tag {
font-size: 12px;
color: #52c41a;
padding: 2px 8px;
background-color: #f6ffed;
border-radius: 4px;
}
/* 参数 */
.status-params,
.project-params {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 12px;
}
.param {
display: flex;
flex-direction: column;
}
.param-label {
font-size: 12px;
color: #999999;
margin-bottom: 4px;
}
.param-value {
font-size: 14px;
font-weight: bold;
color: #333333;
}
/* 按钮 */
.card-footer {
display: flex;
justify-content: center;
}
.btn-primary {
background-color: #4685FD;
color: #ffffff;
border: none;
border-radius: 20px;
padding: 8px 24px;
font-size: 14px;
}
.project-actions {
display: flex;
gap: 8px;
}
.btn-action {
flex: 1;
border: none;
border-radius: 4px;
padding: 8px 0;
font-size: 12px;
color: #ffffff;
}
.btn-start {
background-color: #4685FD;
}
.btn-pause {
background-color: #faad14;
}
.btn-end {
background-color: #ff4d4f;
}
/* 进度 */
.progress-content {
display: flex;
align-items: center;
gap: 16px;
}
.progress-circle {
width: 80px;
height: 80px;
border-radius: 50%;
background: conic-gradient(#4685FD 0% 25%, #f0f0f0 25% 100%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
}
.progress-circle::before {
content: '';
position: absolute;
width: 60px;
height: 60px;
border-radius: 50%;
background-color: #ffffff;
}
.progress-percent {
font-size: 18px;
font-weight: bold;
color: #4685FD;
z-index: 1;
}
.progress-label {
font-size: 10px;
color: #999999;
z-index: 1;
}
.progress-details {
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
}
.progress-item {
display: flex;
justify-content: space-between;
}
.progress-name {
font-size: 12px;
color: #666666;
}
.progress-value {
font-size: 12px;
font-weight: bold;
color: #333333;
}
/* 施工段 */
.icon-placeholder {
width: 48px;
height: 48px;
border-radius: 8px;
background-color: #e6f7ff;
margin-right: 12px;
}
.segment {
font-size: 16px;
font-weight: bold;
color: #333333;
margin-bottom: 4px;
}
.requirement {
font-size: 12px;
color: #999999;
}
/* 异常警告 */
.warning-item {
display: flex;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid #f5f5f5;
}
.warning-item:last-child {
border-bottom: none;
}
.warning-icon {
width: 36px;
height: 36px;
border-radius: 50%;
background-color: #fff2e8;
margin-right: 12px;
}
.warning-rtk {
background-color: #e6f7ff;
}
.warning-info {
flex: 1;
display: flex;
flex-direction: column;
}
.warning-title {
font-size: 14px;
font-weight: bold;
color: #333333;
margin-bottom: 4px;
}
.warning-desc {
font-size: 12px;
color: #999999;
}
.warning-time {
font-size: 12px;
color: #cccccc;
}
</style>