Road_roller/src/components/project/item.vue

<script setup lang="ts">
defineProps<{
  projectName: string
  stakeRange: string
  status: number
  workTime: string
  compactArea: string
  rollerCount: string
}>()

function getStatusText(status: number) {
  const map: Record<number, string> = {
    0: '已暂停',
    1: '已结束',
    2: '作业中',
  }
  return map[status] || '未知'
}

function getStatusColor(status: number) {
  const map: Record<number, string> = {
    0: '#faad14',
    1: '#999999',
    2: '#52c41a',
  }
  return map[status] || '#999999'
}
</script>

<template>
  <view class="project-item">
    <!-- 头部：图标 + 项目名 + 状态 -->
    <view class="item-header">
      <view class="header-left">
        <image class="project-icon" src="/static/machine.png" mode="aspectFit" />
        <view class="header-info">
          <text class="project-name">
            {{ projectName }}
          </text>
          <text class="stake-range">
            {{ stakeRange }}
          </text>
        </view>
      </view>
      <view class="status-badge">
        <view class="status-dot" :style="{ backgroundColor: getStatusColor(status) }" />
        <text class="status-text" :style="{ color: getStatusColor(status) }">
          {{ getStatusText(status) }}
        </text>
      </view>
    </view>

    <!-- 数据统计 -->
    <view class="stats-row">
      <view class="stat-item">
        <text class="stat-label">
          作业时长
        </text>
        <text class="stat-value">
          {{ workTime }}
        </text>
      </view>
      <view class="stat-item">
        <text class="stat-label">
          压实面积
        </text>
        <text class="stat-value">
          {{ compactArea }}
        </text>
      </view>
      <view class="stat-item">
        <text class="stat-label">
          碾压遍数
        </text>
        <text class="stat-value">
          {{ rollerCount }}
        </text>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view v-if="status !== 1" class="btn-row">
      <wd-button size="large" type="primary" round>
        开始项目
      </wd-button>
      <wd-button size="large" type="warning" round>
        暂停项目
      </wd-button>
      <wd-button size="large" type="danger" round>
        结束项目
      </wd-button>
    </view>
  </view>
</template>

<style scoped>
.project-item {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 16px;
}

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.project-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
}

.header-info {
  display: flex;
  flex-direction: column;
}

.project-name {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
}

.stake-range {
  font-size: 32rpx;
  color: #999;
}

.status-badge {
  display: flex;
  align-items: center;
  gap: 6px;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #52c41a;
}

.status-text {
  font-size: 14px;
  color: #52c41a;
}

.stats-row {
  display: flex;
  justify-content: space-around;
  padding: 16px 0;
  border-top: 1px solid #f5f5f5;
  border-bottom: 1px solid #f5f5f5;
  margin-bottom: 16px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-label {
  font-size: 40rpx;
  color: #999;
  margin-bottom: 4px;
}

.stat-value {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
}

.btn-row {
  display: flex;
  justify-content: flex-end;
  gap: 60rpx;
}
</style>