feat 历史报告骨架

src/components/report/item.vue

@@ -0,0 +1,185 @@
+<script setup lang="ts">
+defineProps<{
+  title: string
+  deviceCode: string
+  status: string
+  time: string
+  area: string
+  duration: string
+  areaCount: string
+  passRate: string
+}>()
+</script>
+
+<template>
+  <view class="report-item">
+    <view class="item-main">
+      <view class="item-icon">
+        <wd-icon name="document" size="48rpx" color="#4080ff" />
+      </view>
+
+      <view class="item-content">
+        <view class="item-header">
+          <view class="title-group">
+            <text class="report-title">
+              {{ title }}
+            </text>
+            <text class="device-code">
+              设备码: {{ deviceCode }}
+            </text>
+          </view>
+          <text class="report-status">
+            {{ status }}
+          </text>
+        </view>
+
+        <view class="item-info">
+          <view class="info-row">
+            <view class="info-group">
+              <text class="info-label">
+                作业时间:
+              </text>
+              <text class="info-value">
+                {{ time }}
+              </text>
+            </view>
+            <view class="info-group">
+              <text class="info-label">
+                施工区域:
+              </text>
+              <text class="info-value">
+                {{ area }}
+              </text>
+            </view>
+          </view>
+        </view>
+
+        <view class="item-footer">
+          <view class="stats">
+            <text class="stat-item">
+              {{ duration }} 时长
+            </text>
+            <text class="stat-item">
+              {{ areaCount }} 面积
+            </text>
+            <text class="stat-item">
+              {{ passRate }} 合格率
+            </text>
+          </view>
+          <text class="view-detail">
+            查看详情>
+          </text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.report-item {
+  background-color: #ffffff;
+  border-radius: 12px;
+  padding: 16px;
+}
+
+.item-main {
+  display: flex;
+  gap: 12px;
+}
+
+.item-icon {
+  width: 48px;
+  height: 48px;
+  background-color: #e6f0ff;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.item-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.item-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 12px;
+}
+
+.title-group {
+  flex: 1;
+  min-width: 0;
+}
+
+.report-title {
+  font-size: 18px;
+  font-weight: bold;
+  color: #333;
+  display: block;
+  margin-bottom: 4px;
+}
+
+.device-code {
+  font-size: 16px;
+  color: #666;
+}
+
+.report-status {
+  font-size: 14px;
+  padding: 4px 12px;
+  border-radius: 12px;
+  background-color: #f6ffed;
+  color: #52c41a;
+  flex-shrink: 0;
+}
+
+.item-info {
+  margin-bottom: 12px;
+}
+
+.info-row {
+  display: flex;
+  gap: 1000rpx;
+  margin-bottom: 8px;
+}
+
+.info-group {
+  display: flex;
+  gap: 8px;
+}
+
+.info-label {
+  font-size: 14px;
+  color: #666;
+}
+
+.info-value {
+  font-size: 14px;
+  color: #333;
+}
+
+.item-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.stats {
+  display: flex;
+  gap: 16px;
+}
+
+.stat-item {
+  font-size: 14px;
+  color: #333;
+}
+
+.view-detail {
+  font-size: 14px;
+  color: #4080ff;
+}
+</style>