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-09-03 10:23:27 +08:00
parent 56197b13e7
commit ab264b54aa
3 changed files with 341 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components.d.ts vendored
View File

@@ -22,6 +22,7 @@ declare module 'vue' {
HomeWarning_list: typeof import('./components/home/warning_list.vue')['default']
MessageList: typeof import('./components/message/list.vue')['default']
ProjectItem: typeof import('./components/project/item.vue')['default']
ReportItem: typeof import('./components/report/item.vue')['default']
SettingsProjectForm: typeof import('./components/settings/projectForm.vue')['default']
SettingsProjectSettings: typeof import('./components/settings/projectSettings.vue')['default']
SettingsRadioConfig: typeof import('./components/settings/radioConfig.vue')['default']

185
src/components/report/item.vue Normal file
View File

@@ -0,0 +1,185 @@
<script setup lang="ts">
defineProps<{
title: string
deviceCode: string
status: string
time: string
area: string
duration: string
areaCount: string
passRate: string
}>()
</script>
<template>
<view class="report-item">
<view class="item-main">
<view class="item-icon">
<wd-icon name="document" size="48rpx" color="#4080ff" />
</view>
<view class="item-content">
<view class="item-header">
<view class="title-group">
<text class="report-title">
{{ title }}
</text>
<text class="device-code">
设备码: {{ deviceCode }}
</text>
</view>
<text class="report-status">
{{ status }}
</text>
</view>
<view class="item-info">
<view class="info-row">
<view class="info-group">
<text class="info-label">
作业时间:
</text>
<text class="info-value">
{{ time }}
</text>
</view>
<view class="info-group">
<text class="info-label">
施工区域:
</text>
<text class="info-value">
{{ area }}
</text>
</view>
</view>
</view>
<view class="item-footer">
<view class="stats">
<text class="stat-item">
{{ duration }} 时长
</text>
<text class="stat-item">
{{ areaCount }} 面积
</text>
<text class="stat-item">
{{ passRate }} 合格率
</text>
</view>
<text class="view-detail">
查看详情>
</text>
</view>
</view>
</view>
</view>
</template>
<style scoped>
.report-item {
background-color: #ffffff;
border-radius: 12px;
padding: 16px;
}
.item-main {
display: flex;
gap: 12px;
}
.item-icon {
width: 48px;
height: 48px;
background-color: #e6f0ff;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.item-content {
flex: 1;
min-width: 0;
}
.item-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 12px;
}
.title-group {
flex: 1;
min-width: 0;
}
.report-title {
font-size: 18px;
font-weight: bold;
color: #333;
display: block;
margin-bottom: 4px;
}
.device-code {
font-size: 16px;
color: #666;
}
.report-status {
font-size: 14px;
padding: 4px 12px;
border-radius: 12px;
background-color: #f6ffed;
color: #52c41a;
flex-shrink: 0;
}
.item-info {
margin-bottom: 12px;
}
.info-row {
display: flex;
gap: 1000rpx;
margin-bottom: 8px;
}
.info-group {
display: flex;
gap: 8px;
}
.info-label {
font-size: 14px;
color: #666;
}
.info-value {
font-size: 14px;
color: #333;
}
.item-footer {
display: flex;
justify-content: space-between;
align-items: center;
}
.stats {
display: flex;
gap: 16px;
}
.stat-item {
font-size: 14px;
color: #333;
}
.view-detail {
font-size: 14px;
color: #4080ff;
}
</style>

266
src/pages/report/index.vue
View File

@@ -1,99 +1,144 @@
<script lang="ts" setup>
<script setup lang="ts">
definePage({
layout: false,
style: {
navigationBarTitleText: '历史报告',
navigationStyle: 'custom',
},
})
function handleSearch() {
const startDate = ref('')
const endDate = ref('')
const reportStatus = ref('')
const area = ref('')
const project = ref('')
const reportStatusOptions = [
{ value: 'all', text: '全部' },
{ value: 'completed', text: '已完成' },
{ value: 'pending', text: '待审核' },
]
const areaOptions = [
{ value: 'area1', text: '区域1' },
{ value: 'area2', text: '区域2' },
]
const projectOptions = [
{ value: 'project1', text: '项目1' },
{ value: 'project2', text: '项目2' },
]
const reports = [
{
title: 'k1+200-k1+800压实作业报告',
deviceCode: 'ABC123',
status: '已完成',
time: '2025年12月15日08:30-14:30',
area: 'G6高速-3标段 基层',
duration: '6H',
areaCount: '2580m²',
passRate: '96.8%',
},
{
title: 'k1+200-k1+800压实作业报告',
deviceCode: 'ABC123',
status: '已完成',
time: '2025年12月15日08:30-14:30',
area: 'G6高速-3标段 基层',
duration: '6H',
areaCount: '2580m²',
passRate: '96.8%',
},
]
function handleQuery() {
console.log('查询')
}
</script>
<template>
<view class="page">
<back-nav title="历史报告" />
<view class="content">
<!-- 筛选条件 -->
<view class="filter-card">
<view class="filter-header">
<text class="filter-title">
筛选条件
</text>
</view>
<view class="filter-body">
<!-- 第一行 -->
<view class="filter-row">
<view class="filter-item">
<view class="filter-row two-col">
<view class="filter-item inline-field">
<text class="filter-label">
作业日期
</text>
<view class="date-range">
<input class="date-input" placeholder="2020-2-21">
<uni-easyinput v-model="startDate" placeholder="开始时间" />
<text class="date-separator">
至
</text>
<input class="date-input" placeholder="请选择时间">
<uni-easyinput v-model="endDate" placeholder="请选择时间" />
</view>
</view>
<view class="filter-item">
<view class="filter-item inline-field">
<text class="filter-label">
报告状态
</text>
<picker :range="['全部', '已完成', '进行中', '待审核']">
<view class="select-input">
<text class="select-text">
全部
</text>
<text class="select-arrow">
▼
作业状态
</text>
<view class="select-wrap">
<uni-data-select v-model="reportStatus" :localdata="reportStatusOptions" />
</view>
</picker>
</view>
</view>
<!-- 第二行 -->
<view class="filter-row">
<view class="filter-item">
<view class="filter-row two-col">
<view class="filter-item inline-field">
<text class="filter-label">
施工区域
</text>
<picker :range="['请选择']">
<view class="select-input">
<text class="select-placeholder">
请选择
</text>
<text class="select-arrow">
▼
</text>
<view class="select-wrap">
<uni-data-select v-model="area" :localdata="areaOptions" />
</view>
</picker>
</view>
<view class="filter-item">
<view class="filter-item inline-field">
<text class="filter-label">
项目筛选
</text>
<picker :range="['请选择']">
<view class="select-input">
<text class="select-placeholder">
请选择
</text>
<text class="select-arrow">
▼
</text>
</view>
</picker>
<view class="select-wrap">
<uni-data-select v-model="project" :localdata="projectOptions" />
</view>
</view>
</view>
<!-- 查询按钮 -->
<view class="filter-footer">
<button class="btn-query" @tap="handleSearch">
<wd-button round block type="primary" @tap="handleQuery">
查询
</button>
</wd-button>
</view>
<!-- 报告列表 -->
<view class="report-header">
<text class="report-title">
报告列表
</text>
<text class="report-count">
共{{ reports.length }}条
</text>
</view>
<view class="report-list">
<report-item
v-for="(item, index) in reports"
:key="index"
:title="item.title"
:device-code="item.deviceCode"
:status="item.status"
:time="item.time"
:area="item.area"
:duration="item.duration"
:area-count="item.areaCount"
:pass-rate="item.passRate"
/>
</view>
</view>
</view>
@@ -103,112 +148,103 @@ function handleSearch() {
.page {
min-height: 100vh;
background-color: #EAEFF9;
padding: 12px;
}
.content {
padding: 16px;
padding-top: 72px;
}
.filter-card {
background-color: #ffffff;
border-radius: 12px;
padding: 16px;
margin-top: 12px;
}
.filter-header {
margin-bottom: 12px;
}
.filter-title {
font-size: 16px;
font-size: 22px;
font-weight: bold;
color: #333333;
}
.filter-body {
display: flex;
flex-direction: column;
gap: 12px;
color: #333;
margin-bottom: 16px;
display: block;
}
.filter-row {
display: flex;
gap: 12px;
gap: 200rpx;
margin-bottom: 80rpx;
}
.filter-row.two-col .filter-item {
flex: 1 1 48%;
}
.filter-item {
flex: 1;
display: flex;
align-items: center;
min-width: 0;
}
.filter-label {
font-size: 14px;
color: #333333;
width: 80px;
flex-shrink: 0;
}
.date-range {
flex: 1;
.inline-field {
display: flex;
align-items: center;
gap: 8px;
}
.date-input {
.filter-label {
font-size: 16px;
color: #333;
margin-bottom: 0;
display: block;
white-space: nowrap;
}
.date-range {
display: flex;
align-items: center;
gap: 6px;
flex: 1;
height: 36px;
border: 1px solid #dcdfe6;
border-radius: 4px;
padding: 0 12px;
font-size: 13px;
color: #333333;
min-width: 0;
}
.date-range > view,
.date-range > text,
.date-range > input {
flex: 1;
}
.select-wrap {
flex: 1;
min-width: 0;
}
.date-separator {
font-size: 13px;
color: #999999;
font-size: 18px;
color: #333;
white-space: nowrap;
}
.select-input {
flex: 1;
height: 36px;
border: 1px solid #dcdfe6;
border-radius: 4px;
padding: 0 12px;
.report-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 12px;
}
.select-text {
font-size: 13px;
color: #333333;
.report-title {
font-size: 22px;
font-weight: bold;
color: #333;
}
.select-placeholder {
font-size: 13px;
color: #999999;
.report-count {
font-size: 18px;
color: #666;
}
.select-arrow {
font-size: 10px;
color: #999999;
}
.filter-footer {
margin-top: 16px;
}
.btn-query {
width: 100%;
height: 44px;
background-color: #4685FD;
color: #ffffff;
border: none;
border-radius: 8px;
font-size: 16px;
.report-list {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 12px;
}
</style>