From 287cb818b329db39a9f5830abb5ce81fad98e060 Mon Sep 17 00:00:00 2001
From: lzh <sickone075@gmail.com>
Date: Sun, 15 Mar 2026 16:57:51 +0800
Subject: [PATCH] =?UTF-8?q?feat(@vben/web-antd):=20=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E4=BF=9D=E6=B4=81=E4=BD=9C=E4=B8=9A=E8=BF=9B=E5=BA=A6=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

展示保洁工单的实时作业进度，包含圆环进度图和关键指标网格。

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../components/cleaning-work-progress.vue     | 236 ++++++++++++++++++
 1 file changed, 236 insertions(+)
 create mode 100644 apps/web-antd/src/views/ops/cleaning/work-order/components/cleaning-work-progress.vue

diff --git a/apps/web-antd/src/views/ops/cleaning/work-order/components/cleaning-work-progress.vue b/apps/web-antd/src/views/ops/cleaning/work-order/components/cleaning-work-progress.vue
new file mode 100644
index 000000000..5c6c76c34
--- /dev/null
+++ b/apps/web-antd/src/views/ops/cleaning/work-order/components/cleaning-work-progress.vue
@@ -0,0 +1,236 @@
+<script setup lang="ts">
+import type { OpsOrderCenterApi } from '#/api/ops/order-center';
+
+import { computed } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Card, Progress, Tag } from 'ant-design-vue';
+
+import { CLEANING_TYPE_TEXT_MAP } from '../config';
+
+defineOptions({ name: 'CleaningWorkProgress' });
+
+const props = defineProps<{
+  order: OpsOrderCenterApi.OrderDetail;
+}>();
+
+const extInfo = computed(() => {
+  return props.order.extInfo as OpsOrderCenterApi.CleaningExtInfo | undefined;
+});
+
+const workDuration = computed(() => {
+  if (!extInfo.value?.arrivedTime) return 0;
+  const arrived = new Date(extInfo.value.arrivedTime).getTime();
+  const endTime = props.order.endTime
+    ? new Date(props.order.endTime).getTime()
+    : Date.now();
+  return Math.floor((endTime - arrived) / 60_000);
+});
+
+const workProgress = computed(() => {
+  if (!extInfo.value?.expectedDuration) return 0;
+  return Math.min(
+    Math.round((workDuration.value / extInfo.value.expectedDuration) * 100),
+    100,
+  );
+});
+
+const isOvertime = computed(() => {
+  if (props.order.status === 'COMPLETED') return false;
+  return (
+    extInfo.value?.expectedDuration &&
+    workDuration.value > extInfo.value.expectedDuration
+  );
+});
+
+const progressColor = computed(() => {
+  if (isOvertime.value) return '#ff4d4f';
+  if (workProgress.value >= 100) return '#52c41a';
+  return '#1677ff';
+});
+
+const progressColorStyle = computed(() => ({ color: progressColor.value }));
+
+const strokeColor = computed(() => {
+  if (isOvertime.value) return '#ff4d4f';
+  if (workProgress.value >= 100) return '#52c41a';
+  return { '0%': '#1677ff', '100%': '#69b1ff' };
+});
+
+const remainOrOvertime = computed(() => {
+  const expected = extInfo.value?.expectedDuration || 0;
+  return isOvertime.value
+    ? workDuration.value - expected
+    : expected - workDuration.value;
+});
+</script>
+
+<template>
+  <Card
+    v-if="extInfo && ['ARRIVED', 'COMPLETED'].includes(order.status)"
+    :body-style="{ padding: '12px', flex: 1, display: 'flex' }"
+    class="wp-card mb-3"
+  >
+    <template #title>
+      <div class="flex items-center gap-2">
+        <IconifyIcon icon="solar:chart-2-bold-duotone" class="text-blue-500" />
+        <span>作业进度</span>
+        <Tag v-if="isOvertime" color="error" size="small">超时</Tag>
+      </div>
+    </template>
+
+    <div class="wp-main">
+      <!-- 上：圆环 -->
+      <div class="wp-ring">
+        <Progress
+          type="circle"
+          :percent="workProgress"
+          :stroke-color="strokeColor"
+          :stroke-width="7"
+          :size="105"
+          trail-color="#f5f5f5"
+        >
+          <template #format>
+            <div class="wp-ring-inner">
+              <span class="wp-ring-num" :style="progressColorStyle">
+                {{ workProgress }}
+              </span>
+              <span class="wp-ring-pct" :style="progressColorStyle">%</span>
+            </div>
+          </template>
+        </Progress>
+      </div>
+
+      <!-- 下：2x2 指标 -->
+      <div class="wp-grid">
+        <div class="wp-cell">
+          <div class="wp-cell-label">作业类型</div>
+          <div class="wp-cell-val">
+            {{ CLEANING_TYPE_TEXT_MAP[extInfo.cleaningType!] || '-' }}
+          </div>
+        </div>
+        <div class="wp-cell">
+          <div class="wp-cell-label">预计时长</div>
+          <div class="wp-cell-val">{{ extInfo.expectedDuration }} 分钟</div>
+        </div>
+        <div class="wp-cell">
+          <div class="wp-cell-label">已用时长</div>
+          <div class="wp-cell-val" :class="{ 'wp-cell-val--warn': isOvertime }">
+            {{ workDuration }} 分钟
+          </div>
+        </div>
+        <div class="wp-cell">
+          <div class="wp-cell-label">
+            {{ isOvertime ? '已超时' : '剩余' }}
+          </div>
+          <div class="wp-cell-val" :class="{ 'wp-cell-val--warn': isOvertime }">
+            {{ remainOrOvertime }} 分钟
+          </div>
+        </div>
+      </div>
+    </div>
+  </Card>
+</template>
+
+<style scoped>
+.wp-card {
+  display: flex;
+  flex-direction: column;
+  border-radius: 8px;
+  box-shadow: 0 1px 2px rgb(0 0 0 / 4%);
+}
+
+:deep(.ant-card-head) {
+  min-height: 40px;
+  padding: 0 16px;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+:deep(.ant-card-head-title) {
+  padding: 10px 0;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+/* 左右布局，居中撑满 */
+.wp-main {
+  display: flex;
+  flex: 1;
+  gap: 12px;
+  align-items: center;
+  justify-content: flex-end;
+  padding-right: 8px;
+}
+
+/* 圆环 */
+.wp-ring {
+  flex-shrink: 0;
+}
+
+.wp-ring-inner {
+  display: flex;
+  align-items: baseline;
+  justify-content: center;
+}
+
+.wp-ring-num {
+  font-size: 26px;
+  font-weight: 800;
+  line-height: 1;
+  letter-spacing: -0.5px;
+}
+
+.wp-ring-pct {
+  margin-left: 1px;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+/* 2x2 网格 */
+.wp-grid {
+  display: grid;
+  flex: 1;
+  grid-template-columns: 1fr 1fr;
+  gap: 14px 10px;
+  min-width: 0;
+  padding-left: 12px;
+  border-left: 1px solid #f0f0f0;
+}
+
+.wp-cell {
+  min-width: 0;
+}
+
+.wp-cell-label {
+  margin-bottom: 5px;
+  font-size: 12px;
+  line-height: 1;
+  color: #8c8c8c;
+}
+
+.wp-cell-val {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.3;
+  color: #333;
+  white-space: nowrap;
+}
+
+.wp-cell-val--warn {
+  color: #ff4d4f;
+}
+
+/* card 整体 flex 撑满 */
+:deep(.ant-card-body) {
+  display: flex;
+  flex: 1;
+}
+
+/* 暗色 */
+.dark .wp-cell-val {
+  color: rgb(255 255 255 / 85%);
+}
+</style>