feat 对接数据

src/components/home/progress.vue

@@ -1,7 +1,77 @@
-<script setup>
-import { ref } from 'vue'
+<script setup lang="ts">
+import { onShow } from '@dcloudio/uni-app'
+import { computed, onMounted, ref } from 'vue'
+import { calcUncompactedArea } from '@/service/project'
+import { useDbStore } from '@/store/modules/db'
+import storage from '@/utils/storage'
 
-const current = ref(25)
+const db = useDbStore()
+const currentProjectId = ref<number | null>(storage.get('current_project')?.id ?? null)
+
+const currentProject = computed(() => {
+  const list = db.project || []
+  if (!list.length)
+    return null
+
+  const stored = currentProjectId.value != null
+    ? list.find(item => item.id === currentProjectId.value)
+    : null
+  if (stored)
+    return stored
+
+  return list.find(item => item.status === 2) || list[0]
+})
+
+const progressPercent = computed(() => {
+  const project = currentProject.value
+  if (!project)
+    return 0
+  if (project.progress)
+    return clampPercent(project.progress)
+
+  const total = project.total_area || 0
+  if (total <= 0)
+    return 0
+  return clampPercent(((project.total_compaction_area ?? 0) / total) * 100)
+})
+
+const qualifiedRate = computed(() => currentProject.value?.qualified_rate ?? 0)
+
+const totalArea = computed(() => currentProject.value?.total_area ?? 0)
+
+const compactedArea = computed(() => currentProject.value?.total_compaction_area ?? 0)
+
+const uncompactedArea = computed(() => {
+  const project = currentProject.value
+  if (!project)
+    return 0
+  if (project.uncompacted_area != null)
+    return Math.max(0, project.uncompacted_area)
+  return calcUncompactedArea(project.total_area, project.total_compaction_area)
+})
+
+function clampPercent(value: number) {
+  return Math.min(100, Math.max(0, Number(value.toFixed(1))))
+}
+
+function formatArea(value: number) {
+  const text = Number.isInteger(value) ? String(value) : String(value)
+  return `${text}m²`
+}
+
+function formatRate(value: number) {
+  const text = Number.isInteger(value) ? String(value) : value.toFixed(2)
+  return `${text}%`
+}
+
+onMounted(async () => {
+  if (!db.project?.length)
+    await db.loadAll()
+})
+
+onShow(() => {
+  currentProjectId.value = storage.get('current_project')?.id ?? null
+})
 </script>
 
 <template>
@@ -11,16 +81,19 @@ const current = ref(25)
         项目作业进度
       </text>
       <text class="card-sub">
-        K1+200-K1+800
+        {{ currentProject?.stake_range || currentProject?.project_name || '暂无项目' }}
       </text>
     </view>
     <view class="card-body">
-      <view class="progress-content">
+      <view v-if="!currentProject" class="empty-tip">
+        暂无项目数据
+      </view>
+      <view v-else class="progress-content">
         <view class="progress-circle">
-          <wd-circle v-model="current" :size="120">
+          <wd-circle :model-value="progressPercent" :size="120">
             <view class="progress-circle-text">
               <text class="progress-percent">
-                {{ current }}%
+                {{ progressPercent }}%
               </text>
               <text class="progress-label">
                 已完成
@@ -35,10 +108,10 @@ const current = ref(25)
                 压实合格率
               </text>
               <text class="progress-value">
-                95.65%
+                {{ formatRate(qualifiedRate) }}
               </text>
             </view>
-            <wd-progress :percentage="50" hide-text />
+            <wd-progress :percentage="clampPercent(qualifiedRate)" hide-text />
           </view>
           <view class="progress-item">
             <view class="progress-row">
@@ -46,17 +119,17 @@ const current = ref(25)
                 完成进度
               </text>
               <text class="progress-value">
-                66%
+                {{ progressPercent }}%
               </text>
             </view>
-            <wd-progress :percentage="50" hide-text />
+            <wd-progress :percentage="progressPercent" hide-text />
           </view>
           <view class="progress-item progress-item-inline">
             <text class="progress-name">
               总面积
             </text>
             <text class="progress-value">
-              1164m²
+              {{ formatArea(totalArea) }}
             </text>
           </view>
           <view class="progress-item progress-item-inline">
@@ -64,7 +137,7 @@ const current = ref(25)
               已压实面积
             </text>
             <text class="progress-value">
-              664m²
+              {{ formatArea(compactedArea) }}
             </text>
           </view>
           <view class="progress-item progress-item-inline">
@@ -72,7 +145,7 @@ const current = ref(25)
               未压实面积
             </text>
             <text class="progress-value">
-              500m²
+              {{ formatArea(uncompactedArea) }}
             </text>
           </view>
         </view>
@@ -114,6 +187,13 @@ const current = ref(25)
   padding: 12px 16px;
 }
 
+.empty-tip {
+  font-size: 14px;
+  color: #999999;
+  text-align: center;
+  padding: 16px 0;
+}
+
 .progress-content {
   display: flex;
   align-items: center;