feat 项目列表

src/pages/project/index.vue

@@ -1,4 +1,8 @@
 <script setup lang="ts">
+import type { Project } from '@/service/project'
+import { computed, onMounted, ref } from 'vue'
+import { useDbStore } from '@/store/modules/db'
+
 definePage({
   layout: false,
   style: {
@@ -6,32 +10,62 @@ definePage({
   },
 })
 
-const search = ref('')
-const activeTab = ref(0)
-const tabs = ['全部', '进行中', '已结束']
+const db = useDbStore()
 
-const projects = [
-  {
-    projectName: '徐工XS65H #01',
-    stakeRange: 'K1+200-K1+800',
-    status: 0,
-    workTime: '8h',
-    compactArea: '28.5m²',
-    rollerCount: '10遍',
-  },
-  {
-    projectName: '徐工XS65H #02',
-    stakeRange: 'K2+100-K2+600',
-    status: 2,
-    workTime: '5h',
-    compactArea: '15.2m²',
-    rollerCount: '6遍',
-  },
-]
+const search = ref('')
+const activeTab = ref(0) // 0全部 1作业中 2已结束
+const tabs = ['全部', '作业中', '已结束']
+
+const projects = computed(() => {
+  const keyword = search.value.trim().toLowerCase()
+
+  return db.project
+    .filter((item) => {
+      if (activeTab.value === 1 && item.status === 1)
+        return false
+      if (activeTab.value === 2 && item.status !== 1)
+        return false
+      if (keyword) {
+        const name = (item.project_name || '').toLowerCase()
+        const stake = (item.stake_range || '').toLowerCase()
+        if (!name.includes(keyword) && !stake.includes(keyword))
+          return false
+      }
+      return true
+    })
+    .map(mapProjectItem)
+})
+
+function mapProjectItem(item: Project) {
+  return {
+    id: item.id,
+    projectName: item.project_name,
+    stakeRange: item.stake_range || '-',
+    status: item.status,
+    workTime: formatDuration(item.total_duration),
+    compactArea: formatArea(item.total_compaction_area),
+    rollerCount: `${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) {
+  return `${value ?? 0}m²`
+}
 
 function handleCreate() {
   console.log('点击了新建项目')
 }
+
+onMounted(async () => {
+  if (!db.project.length)
+    await db.loadAll()
+})
 </script>
 
 <template>
@@ -63,9 +97,12 @@ function handleCreate() {
 
       <!-- 项目列表 -->
       <view class="project-list">
+        <view v-if="!projects.length" class="empty-tip">
+          暂无项目
+        </view>
         <project-item
-          v-for="(item, index) in projects"
-          :key="index"
+          v-for="item in projects"
+          :key="item.id"
           :project-name="item.projectName"
           :stake-range="item.stakeRange"
           :status="item.status"
@@ -126,4 +163,11 @@ function handleCreate() {
   flex-direction: column;
   gap: 12px;
 }
+
+.empty-tip {
+  font-size: 14px;
+  color: #999;
+  text-align: center;
+  padding: 24px 0;
+}
 </style>