Road_roller/src/components/home/progress.vue

<script setup lang="ts">
import { computed, onMounted } from 'vue'
import { useCurrentProject } from '@/composables/useCurrentProject'
import { useDeviceAuth } from '@/composables/useDeviceAuth'
import { calcUncompactedArea } from '@/service/project'
import { useDbStore } from '@/store/modules/db'

const db = useDbStore()
const { hasCurrentProject, currentProjectId } = useCurrentProject()
const { isActivated } = useDeviceAuth()

const currentProject = computed(() => {
  if (!hasCurrentProject.value || currentProjectId.value == null)
    return null

  const list = db.project || []
  return list.find(item => item.id === currentProjectId.value) || null
})

const progressPercent = computed(() => {
  const project = currentProject.value
  if (!project)
    return null
  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(() => {
  if (!currentProject.value)
    return null
  return currentProject.value.qualified_rate ?? 0
})

const totalArea = computed(() => {
  if (!currentProject.value)
    return null
  return currentProject.value.total_area ?? 0
})

const compactedArea = computed(() => {
  if (!currentProject.value)
    return null
  return currentProject.value.total_compaction_area ?? 0
})

const uncompactedArea = computed(() => {
  const project = currentProject.value
  if (!project)
    return null
  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 | null) {
  if (value == null)
    return '--'
  const text = Number.isInteger(value) ? String(value) : String(value)
  return `${text}m²`
}

function formatRate(value: number | null) {
  if (value == null)
    return '--'
  const text = Number.isInteger(value) ? String(value) : value.toFixed(2)
  return `${text}%`
}

function formatPercent(value: number | null) {
  if (value == null)
    return '--'
  return `${value}%`
}

onMounted(async () => {
  if (!hasCurrentProject.value || currentProjectId.value == null)
    return
  await db.loadByProject(currentProjectId.value)
})
</script>

<template>
  <view class="card">
    <view class="card-header">
      <text class="card-title">
        项目作业进度
      </text>
      <text v-if="isActivated" class="card-sub">
        {{ currentProject?.stake_range || currentProject?.project_name || '暂无施工段' }}
      </text>
    </view>
    <view class="card-body">
      <unauthorized v-if="!isActivated" />
      <view v-else class="progress-content">
        <view class="progress-circle">
          <wd-circle :model-value="progressPercent ?? 0" :size="120">
            <view class="progress-circle-text">
              <text class="progress-percent">
                {{ hasCurrentProject ? `${progressPercent}%` : '0%' }}
              </text>
              <text class="progress-label">
                {{ hasCurrentProject ? '已完成' : '未开始' }}
              </text>
            </view>
          </wd-circle>
        </view>
        <view class="progress-details">
          <view class="progress-item">
            <view class="progress-row">
              <text class="progress-name">
                压实合格率
              </text>
              <text class="progress-value">
                {{ formatRate(qualifiedRate) }}
              </text>
            </view>
            <wd-progress :percentage="clampPercent(qualifiedRate ?? 0)" hide-text />
          </view>
          <view class="progress-item">
            <view class="progress-row">
              <text class="progress-name">
                完成进度
              </text>
              <text class="progress-value">
                {{ formatPercent(progressPercent) }}
              </text>
            </view>
            <wd-progress :percentage="progressPercent ?? 0" hide-text />
          </view>
          <view class="progress-item progress-item-inline">
            <text class="progress-name">
              总面积
            </text>
            <text class="progress-value">
              {{ formatArea(totalArea) }}
            </text>
          </view>
          <view class="progress-item progress-item-inline">
            <text class="progress-name">
              已压实面积
            </text>
            <text class="progress-value">
              {{ formatArea(compactedArea) }}
            </text>
          </view>
          <view class="progress-item progress-item-inline">
            <text class="progress-name">
              未压实面积
            </text>
            <text class="progress-value">
              {{ formatArea(uncompactedArea) }}
            </text>
          </view>
        </view>
      </view>
    </view>
    <home-construction />
  </view>
</template>

<style scoped>
.card {
  background-color: #ffffff;
  border-radius: 12px;
  margin-bottom: 12px;
  overflow: hidden;
}

.card-header {
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
  padding: 12px 16px;
  border-bottom: 1px solid #f5f5f5;
}

.card-title {
  font-size: 22px;
  font-weight: bold;
  color: #333333;
  margin-right: 12.08rpx;
}

.card-sub {
  font-size: 12px;
  color: #999999;
}

.card-body {
  padding: 12px 16px;
}

.progress-content {
  display: flex;
  align-items: center;
  gap: 50px;
}

.progress-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 40rpx;
}

.progress-item {
  display: flex;
  flex-direction: column;
  /* gap: 8px; */
}

.progress-item-inline {
  flex-direction: row;
  justify-content: space-between;
}

.progress-row {
  display: flex;
  justify-content: space-between;
}

.progress-name {
  /* font-size: 12px; */
  color: #666666;
}

.progress-value {
  /* font-size: 12px; */
  font-weight: bold;
  color: #333333;
}

.progress-percent {
  font-size: 28px;
  font-weight: bold;
  color: #333333;
}

.progress-circle-text {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.progress-label {
  font-size: 12px;
  color: #999999;
}
</style>