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

feat 分层架构

Browse Source
This commit is contained in:
Ironsp
2026-08-31 16:17:28 +08:00
parent 08da3b171a
commit 689e10d3b3
8 changed files with 837 additions and 615 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
src/components/home/construction.vue Normal file
View File

@@ -0,0 +1,81 @@
<template>
<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>
</template>
<style scoped>
.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-body {
padding: 12px 16px;
}
.construction-info {
display: flex;
align-items: center;
margin-bottom: 12px;
}
.icon-placeholder {
width: 48px;
height: 48px;
border-radius: 8px;
background-color: #e6f7ff;
margin-right: 12px;
}
.info {
flex: 1;
display: flex;
flex-direction: column;
}
.segment {
font-size: 16px;
font-weight: bold;
color: #333333;
margin-bottom: 4px;
}
.requirement {
font-size: 12px;
color: #999999;
}
</style>

105
src/components/home/overview.vue Normal file
View File

@@ -0,0 +1,105 @@
<template>
<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>
</template>
<style scoped>
.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 {
font-size: 12px;
color: #999999;
}
.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;
}
</style>

161
src/components/home/progress.vue Normal file
View File

@@ -0,0 +1,161 @@
<template>
<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>
</template>
<style scoped>
.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-sub {
font-size: 12px;
color: #999999;
}
.card-body {
padding: 12px 16px;
}
.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;
}
</style>

189
src/components/home/projectList.vue Normal file
View File

@@ -0,0 +1,189 @@
<template>
<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>
</template>
<style scoped>
.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-link {
font-size: 12px;
color: #4685FD;
}
.card-body {
padding: 12px 16px;
}
.project-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;
}
.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;
}
.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;
}
</style>

169
src/components/home/status.vue Normal file
View File

@@ -0,0 +1,169 @@
<template>
<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>
</template>
<style scoped>
.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-body {
padding: 12px 16px;
}
.status-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 {
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;
}
</style>

120
src/components/home/warning.vue Normal file
View File

@@ -0,0 +1,120 @@
<template>
<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>
</template>
<style scoped>
.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-link {
font-size: 12px;
color: #4685FD;
}
.card-body {
padding: 12px 16px;
}
.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>