Vue3 + Element Plus版本iot前端迁移到vben版本

apps/web-antd/src/views/iot/ota/modules/firmware-detail/index.vue

@@ -0,0 +1,149 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { Card, Col, Descriptions, Row } from 'ant-design-vue';
+import { formatDate } from '@vben/utils';
+import type { IoTOtaFirmware } from '#/api/iot/ota/firmware';
+import * as IoTOtaFirmwareApi from '#/api/iot/ota/firmware';
+import * as IoTOtaTaskRecordApi from '#/api/iot/ota/task/record';
+import { IoTOtaTaskRecordStatusEnum } from '#/views/iot/utils/constants';
+import OtaTaskList from '../task/OtaTaskList.vue';
+
+/** IoT OTA 固件详情 */
+defineOptions({ name: 'IoTOtaFirmwareDetail' });
+
+const route = useRoute();
+
+const firmwareId = ref(Number(route.params.id));
+const firmwareLoading = ref(false);
+const firmware = ref<IoTOtaFirmware>({} as IoTOtaFirmware);
+
+const firmwareStatisticsLoading = ref(false);
+const firmwareStatistics = ref<Record<string, number>>({});
+
+/** 获取固件信息 */
+const getFirmwareInfo = async () => {
+  firmwareLoading.value = true;
+  try {
+    firmware.value = await IoTOtaFirmwareApi.getOtaFirmware(firmwareId.value);
+  } finally {
+    firmwareLoading.value = false;
+  }
+};
+
+/** 获取升级统计 */
+const getStatistics = async () => {
+  firmwareStatisticsLoading.value = true;
+  try {
+    firmwareStatistics.value = await IoTOtaTaskRecordApi.getOtaTaskRecordStatusStatistics(
+      firmwareId.value,
+    );
+  } finally {
+    firmwareStatisticsLoading.value = false;
+  }
+};
+
+/** 初始化 */
+onMounted(() => {
+  getFirmwareInfo();
+  getStatistics();
+});
+</script>
+
+<template>
+  <div class="p-4">
+    <!-- 固件信息 -->
+    <Card title="固件信息" class="mb-5" :loading="firmwareLoading">
+      <Descriptions :column="3" bordered>
+        <Descriptions.Item label="固件名称">
+          {{ firmware?.name }}
+        </Descriptions.Item>
+        <Descriptions.Item label="所属产品">
+          {{ firmware?.productName }}
+        </Descriptions.Item>
+        <Descriptions.Item label="固件版本">
+          {{ firmware?.version }}
+        </Descriptions.Item>
+        <Descriptions.Item label="创建时间">
+          {{ firmware?.createTime ? formatDate(firmware.createTime, 'YYYY-MM-DD HH:mm:ss') : '-' }}
+        </Descriptions.Item>
+        <Descriptions.Item label="固件描述" :span="2">
+          {{ firmware?.description }}
+        </Descriptions.Item>
+      </Descriptions>
+    </Card>
+
+    <!-- 升级设备统计 -->
+    <Card title="升级设备统计" class="mb-5" :loading="firmwareStatisticsLoading">
+      <Row :gutter="20" class="py-5">
+        <Col :span="6">
+          <div class="text-center p-5 border border-solid border-gray-200 rounded bg-gray-50">
+            <div class="text-3xl font-bold mb-2 text-blue-500">
+              {{
+                Object.values(firmwareStatistics).reduce((sum: number, count) => sum + (count || 0), 0) ||
+                0
+              }}
+            </div>
+            <div class="text-sm text-gray-600">升级设备总数</div>
+          </div>
+        </Col>
+        <Col :span="3">
+          <div class="text-center p-5 border border-solid border-gray-200 rounded bg-gray-50">
+            <div class="text-3xl font-bold mb-2 text-gray-400">
+              {{ firmwareStatistics[IoTOtaTaskRecordStatusEnum.PENDING.value] || 0 }}
+            </div>
+            <div class="text-sm text-gray-600">待推送</div>
+          </div>
+        </Col>
+        <Col :span="3">
+          <div class="text-center p-5 border border-solid border-gray-200 rounded bg-gray-50">
+            <div class="text-3xl font-bold mb-2 text-blue-400">
+              {{ firmwareStatistics[IoTOtaTaskRecordStatusEnum.PUSHED.value] || 0 }}
+            </div>
+            <div class="text-sm text-gray-600">已推送</div>
+          </div>
+        </Col>
+        <Col :span="3">
+          <div class="text-center p-5 border border-solid border-gray-200 rounded bg-gray-50">
+            <div class="text-3xl font-bold mb-2 text-yellow-500">
+              {{ firmwareStatistics[IoTOtaTaskRecordStatusEnum.UPGRADING.value] || 0 }}
+            </div>
+            <div class="text-sm text-gray-600">正在升级</div>
+          </div>
+        </Col>
+        <Col :span="3">
+          <div class="text-center p-5 border border-solid border-gray-200 rounded bg-gray-50">
+            <div class="text-3xl font-bold mb-2 text-green-500">
+              {{ firmwareStatistics[IoTOtaTaskRecordStatusEnum.SUCCESS.value] || 0 }}
+            </div>
+            <div class="text-sm text-gray-600">升级成功</div>
+          </div>
+        </Col>
+        <Col :span="3">
+          <div class="text-center p-5 border border-solid border-gray-200 rounded bg-gray-50">
+            <div class="text-3xl font-bold mb-2 text-red-500">
+              {{ firmwareStatistics[IoTOtaTaskRecordStatusEnum.FAILURE.value] || 0 }}
+            </div>
+            <div class="text-sm text-gray-600">升级失败</div>
+          </div>
+        </Col>
+        <Col :span="3">
+          <div class="text-center p-5 border border-solid border-gray-200 rounded bg-gray-50">
+            <div class="text-3xl font-bold mb-2 text-gray-400">
+              {{ firmwareStatistics[IoTOtaTaskRecordStatusEnum.CANCELED.value] || 0 }}
+            </div>
+            <div class="text-sm text-gray-600">升级取消</div>
+          </div>
+        </Col>
+      </Row>
+    </Card>
+
+    <!-- 任务管理 -->
+    <OtaTaskList
+      v-if="firmware?.productId"
+      :firmware-id="firmwareId"
+      :product-id="firmware.productId"
+      @success="getStatistics"
+    />
+  </div>
+</template>