feat 分层架构
This commit is contained in:
6
src/components.d.ts
vendored
6
src/components.d.ts
vendored
@@ -10,7 +10,13 @@ declare module 'vue' {
|
|||||||
AppFooter: typeof import('./components/AppFooter.vue')['default']
|
AppFooter: typeof import('./components/AppFooter.vue')['default']
|
||||||
AppLogos: typeof import('./components/AppLogos.vue')['default']
|
AppLogos: typeof import('./components/AppLogos.vue')['default']
|
||||||
HiCounter: typeof import('./components/HiCounter.vue')['default']
|
HiCounter: typeof import('./components/HiCounter.vue')['default']
|
||||||
|
HomeConstruction: typeof import('./components/home/construction.vue')['default']
|
||||||
HomeHomeNav: typeof import('./components/home/homeNav.vue')['default']
|
HomeHomeNav: typeof import('./components/home/homeNav.vue')['default']
|
||||||
|
HomeOverview: typeof import('./components/home/overview.vue')['default']
|
||||||
|
HomeProgress: typeof import('./components/home/progress.vue')['default']
|
||||||
|
HomeProjectList: typeof import('./components/home/projectList.vue')['default']
|
||||||
|
HomeStatus: typeof import('./components/home/status.vue')['default']
|
||||||
|
HomeWarning: typeof import('./components/home/warning.vue')['default']
|
||||||
InputEntry: typeof import('./components/InputEntry.vue')['default']
|
InputEntry: typeof import('./components/InputEntry.vue')['default']
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
81
src/components/home/construction.vue
Normal file
81
src/components/home/construction.vue
Normal 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
105
src/components/home/overview.vue
Normal 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
161
src/components/home/progress.vue
Normal 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
189
src/components/home/projectList.vue
Normal 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
169
src/components/home/status.vue
Normal 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
120
src/components/home/warning.vue
Normal 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>
|
||||||
@@ -12,311 +12,21 @@ definePage({
|
|||||||
<home-homeNav />
|
<home-homeNav />
|
||||||
|
|
||||||
<view class="content">
|
<view class="content">
|
||||||
<!-- 今日作业概览 -->
|
<home-overview />
|
||||||
<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="two-column">
|
||||||
<!-- 左列 -->
|
<!-- 左列 -->
|
||||||
<view class="column-left">
|
<view class="column-left">
|
||||||
<!-- 实时作业状态 -->
|
<home-status />
|
||||||
<view class="card">
|
<home-projectList />
|
||||||
<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>
|
||||||
|
|
||||||
<!-- 右列 -->
|
<!-- 右列 -->
|
||||||
<view class="column-right">
|
<view class="column-right">
|
||||||
<!-- 项目作业进度 -->
|
<home-progress />
|
||||||
<view class="card">
|
<home-construction />
|
||||||
<view class="card-header">
|
<home-warning />
|
||||||
<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>
|
||||||
</view>
|
</view>
|
||||||
@@ -334,83 +44,6 @@ definePage({
|
|||||||
padding-top: 88px;
|
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 {
|
.two-column {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -423,246 +56,4 @@ definePage({
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
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>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user