feat 历史报告骨架

src/components.d.ts

@@ -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']

src/components/report/item.vue

@@ -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>

src/pages/report/index.vue

@@ -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 two-col">
-        <!-- 第一行 -->
+          <view class="filter-item inline-field">
-        <view class="filter-row">
-          <view class="filter-item">
             <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 two-col">
-        <view class="filter-row">
+          <view class="filter-item inline-field">
-          <view class="filter-item">
             <text class="filter-label">
               施工区域
             </text>
-            <picker :range="['请选择']">
+            <view class="select-wrap">
-              <view class="select-input">
+              <uni-data-select v-model="area" :localdata="areaOptions" />
-                <text class="select-placeholder">
-                  请选择
-                </text>
-                <text class="select-arrow">
-                  ▼
-                </text>
             </view>
-            </picker>
           </view>
 
-          <view class="filter-item">
+          <view class="filter-item inline-field">
             <text class="filter-label">
               项目筛选
             </text>
-            <picker :range="['请选择']">
+            <view class="select-wrap">
-              <view class="select-input">
+              <uni-data-select v-model="project" :localdata="projectOptions" />
-                <text class="select-placeholder">
-                  请选择
-                </text>
-                <text class="select-arrow">
-                  ▼
-                </text>
-              </view>
-            </picker>
             </view>
           </view>
         </view>
 
-      <!-- 查询按钮 -->
+        <wd-button round block type="primary" @tap="handleQuery">
-      <view class="filter-footer">
-        <button class="btn-query" @tap="handleSearch">
           查询
-        </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;
+  color: #333;
-}
+  margin-bottom: 16px;
-
+  display: block;
-.filter-body {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
 }
 
 .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;
+  min-width: 0;
-  align-items: center;
 }
 
-.filter-label {
+.inline-field {
-  font-size: 14px;
-  color: #333333;
-  width: 80px;
-  flex-shrink: 0;
-}
-
-.date-range {
-  flex: 1;
   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;
+  min-width: 0;
-  border: 1px solid #dcdfe6;
+}
-  border-radius: 4px;
+
-  padding: 0 12px;
+.date-range > view,
-  font-size: 13px;
+.date-range > text,
-  color: #333333;
+.date-range > input {
+  flex: 1;
+}
+
+.select-wrap {
+  flex: 1;
+  min-width: 0;
 }
 
 .date-separator {
-  font-size: 13px;
+  font-size: 18px;
-  color: #999999;
+  color: #333;
+  white-space: nowrap;
 }
 
-.select-input {
+.report-header {
-  flex: 1;
-  height: 36px;
-  border: 1px solid #dcdfe6;
-  border-radius: 4px;
-  padding: 0 12px;
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 12px;
 }
 
-.select-text {
+.report-title {
-  font-size: 13px;
+  font-size: 22px;
-  color: #333333;
+  font-weight: bold;
+  color: #333;
 }
 
-.select-placeholder {
+.report-count {
-  font-size: 13px;
+  font-size: 18px;
-  color: #999999;
+  color: #666;
 }
 
-.select-arrow {
+.report-list {
-  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;
   display: flex;
-  align-items: center;
+  flex-direction: column;
-  justify-content: center;
+  gap: 12px;
 }
 </style>