feat 项目列表

src/components/home/list.vue

@@ -1,17 +1,51 @@
+<script setup lang="ts">
+import type { Project } from '@/service/project'
+
+const props = defineProps<{
+  item: Project
+}>()
+
+const statusMap: Record<number, string> = {
+  0: '未完成',
+  1: '已完成',
+  2: '作业中',
+}
+
+const statusText = computed(() => statusMap[props.item.status] || '未知')
+
+const durationText = computed(() => formatDuration(props.item.total_duration))
+
+const areaText = computed(() => formatArea(props.item.total_compaction_area))
+
+const passText = computed(() => `${props.item.total_pass_count ?? 0}遍`)
+
+function formatDuration(value?: number) {
+  const hours = value ?? 0
+  const text = Number.isInteger(hours) ? String(hours) : hours.toFixed(1)
+  return `${text}h`
+}
+
+function formatArea(value?: number) {
+  const area = value ?? 0
+  const text = Number.isInteger(area) ? String(area) : String(area)
+  return `${text}m²`
+}
+</script>
+
 <template>
   <view class="project-item">
     <view class="project-info">
       <view class="avatar" />
       <view class="info">
         <text class="name">
-          G6高速改扩建项目
+          {{ item.project_name }}
         </text>
         <text class="sub">
-          K1+200-K1+800
+          {{ item.stake_range || '-' }}
         </text>
       </view>
-      <view class="status-tag">
-        作业中
+      <view class="status-tag" :class="`status-${item.status}`">
+        {{ statusText }}
       </view>
     </view>
     <view class="project-params">
@@ -20,7 +54,7 @@
           作业时长
         </text>
         <text class="param-value">
-          8h
+          {{ durationText }}
         </text>
       </view>
       <view class="param">
@@ -28,7 +62,7 @@
           压实面积
         </text>
         <text class="param-value">
-          28.5m²
+          {{ areaText }}
         </text>
       </view>
       <view class="param">
@@ -36,11 +70,11 @@
           碾压遍数
         </text>
         <text class="param-value">
-          10遍
+          {{ passText }}
         </text>
       </view>
     </view>
-    <view class="project-actions">
+    <view v-if="item.status !== 1" class="project-actions">
       <wd-button size="large" round>
         开始项目
       </wd-button>
@@ -55,6 +89,12 @@
 </template>
 
 <style scoped>
+.project-item + .project-item {
+  margin-top: 16px;
+  padding-top: 16px;
+  border-top: 1px solid #f5f5f5;
+}
+
 .project-info {
   display: flex;
   align-items: center;
@@ -89,12 +129,22 @@
 
 .status-tag {
   font-size: 12px;
-  color: #52c41a;
+  color: #faad14;
   padding: 2px 8px;
-  background-color: #f6ffed;
+  background-color: #fffbe6;
   border-radius: 4px;
 }
 
+.status-tag.status-2 {
+  color: #52c41a;
+  background-color: #f6ffed;
+}
+
+.status-tag.status-1 {
+  color: #999999;
+  background-color: #f5f5f5;
+}
+
 .project-params {
   display: flex;
   flex-wrap: wrap;

src/components/home/projectList.vue

@@ -1,9 +1,31 @@
 <script setup lang="ts">
+import type { Project } from '@/service/project'
+import { onMounted } from 'vue'
+import { useDbStore } from '@/store/modules/db'
+
+const db = useDbStore()
+
+/** 首页只展示最近几条 */
+const list = computed(() => (db.project || []).slice(0, 2))
+
+onMounted(async () => {
+  if (!db.project?.length)
+    await db.loadAll()
+})
+
 function goToProjectList() {
   uni.navigateTo({
     url: '/pages/project/index',
   })
 }
+
+function goToDetail(item: Project) {
+  if (!item.id)
+    return
+  uni.navigateTo({
+    url: `/pages/project/index?id=${item.id}`,
+  })
+}
 </script>
 
 <template>
@@ -17,7 +39,15 @@ function goToProjectList() {
       </wd-button>
     </view>
     <view class="card-body">
-      <home-list />
+      <view v-if="!list.length" class="empty-tip">
+        暂无项目
+      </view>
+      <home-list
+        v-for="item in list"
+        :key="item.id"
+        :item="item"
+        @tap="goToDetail(item)"
+      />
     </view>
   </view>
 </template>
@@ -47,4 +77,11 @@ function goToProjectList() {
 .card-body {
   padding: 12px 16px;
 }
+
+.empty-tip {
+  font-size: 14px;
+  color: #999999;
+  text-align: center;
+  padding: 16px 0;
+}
 </style>

src/components/project/item.vue

@@ -10,18 +10,18 @@ defineProps<{
 
 function getStatusText(status: number) {
   const map: Record<number, string> = {
-    0: '作业中',
-    1: '暂停中',
-    2: '已结束',
+    0: '未完成',
+    1: '已结束',
+    2: '进行中',
   }
   return map[status] || '未知'
 }
 
 function getStatusColor(status: number) {
   const map: Record<number, string> = {
-    0: '#52c41a',
-    1: '#faad14',
-    2: '#999999',
+    0: '#faad14',
+    1: '#999999',
+    2: '#52c41a',
   }
   return map[status] || '#999999'
 }
@@ -79,7 +79,7 @@ function getStatusColor(status: number) {
     </view>
 
     <!-- 操作按钮 -->
-    <view v-if="status === 0 || status === 1" class="btn-row">
+    <view v-if="status !== 1" class="btn-row">
       <wd-button size="large" type="primary" round>
         开始项目
       </wd-button>