完成SCA：蚕茧模块演示效果

2025-06-10 15:32:22 +08:00
parent 89adaf02b9
commit 617cc3162e
19 changed files with 620 additions and 44 deletions
@@ -0,0 +1,159 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { Form, Input, InputNumber, message } from 'ant-design-vue';
+
+import { createVideoTask } from '#/api/core/iva';
+
+const projectName = ref('');
+const year = ref<null | number>(null);
+const month = ref<null | number>(null);
+const day = ref<null | number>(null);
+const hours = ref<null | number>(null);
+const minutes = ref<null | number>(null);
+const seconds = ref<null | number>(null);
+const fileName = ref('');
+const selectedFile = ref<File | null>(null);
+const fileInputRef = ref<HTMLInputElement | null>(null);
+
+const [Modal, modalApi] = useVbenModal({
+  title: '新建视频分析任务',
+  class: 'w-[600px]',
+  onCancel() {
+    modalApi.close();
+  },
+  onConfirm() {
+    if (!projectName.value || !selectedFile.value) {
+      message.warning('请填写项目名并选择视频文件');
+    }
+    uploadFile();
+  },
+});
+
+async function uploadFile() {
+  const formData = new FormData();
+  formData.append('file', selectedFile.value);
+  formData.append('projectName', projectName.value);
+  formData.append(
+    'projectDatetime',
+    `${year.value ? year.value.toString() : '2025'}-${
+      month.value ? month.value.toString().padStart(2, '0') : '01'
+    }-${day.value ? day.value.toString().padStart(2, '0') : '01'} ${
+      hours.value ? hours.value.toString().padStart(2, '0') : '00'
+    }:${minutes.value ? minutes.value.toString().padStart(2, '0') : '00'}:${
+      seconds.value ? seconds.value.toString().padStart(2, '0') : '00'
+    }`,
+  );
+  await createVideoTask(formData).then(() => {
+    message.success('任务创建成功，正在处理视频，请稍后刷新列表查看');
+    modalApi.close();
+    // 清空表单
+    projectName.value = '';
+    year.value = null;
+    month.value = null;
+    day.value = null;
+    hours.value = null;
+    minutes.value = null;
+    seconds.value = null;
+    fileName.value = '';
+    selectedFile.value = null;
+  });
+}
+
+function selectFile() {
+  fileInputRef.value?.click();
+}
+
+function handleFileChange(event: Event) {
+  const files = (event.target as HTMLInputElement).files;
+  if (files && files.length > 0) {
+    selectedFile.value = files[0];
+    fileName.value = files[0].name;
+  }
+}
+</script>
+
+<template>
+  <Modal>
+    <Form layout="vertical">
+      <Form.Item label="项目名*" required>
+        <Input v-model:value="projectName" />
+      </Form.Item>
+
+      <Form.Item label="日期">
+        <div style="display: flex; gap: 8px">
+          <InputNumber
+            v-model:value="year"
+            :min="1900"
+            :max="2100"
+            placeholder="年"
+            style="flex: 1"
+          />
+          <InputNumber
+            v-model:value="month"
+            :min="1"
+            :max="12"
+            placeholder="月"
+            style="flex: 1"
+          />
+          <InputNumber
+            v-model:value="day"
+            :min="1"
+            :max="31"
+            placeholder="日"
+            style="flex: 1"
+          />
+        </div>
+      </Form.Item>
+
+      <Form.Item label="时间">
+        <div style="display: flex; gap: 8px">
+          <InputNumber
+            v-model:value="hours"
+            :min="0"
+            :max="23"
+            placeholder="小时"
+            style="flex: 1"
+          />
+          <InputNumber
+            v-model:value="minutes"
+            :min="0"
+            :max="59"
+            placeholder="分钟"
+            style="flex: 1"
+          />
+          <InputNumber
+            v-model:value="seconds"
+            :min="0"
+            :max="59"
+            placeholder="秒"
+            style="flex: 1"
+          />
+        </div>
+      </Form.Item>
+
+      <Form.Item label="上传视频*" required>
+        <div
+          @click="selectFile"
+          style="
+            padding: 16px;
+            text-align: center;
+            cursor: pointer;
+            border: 1px dashed #d9d9d9;
+          "
+        >
+          {{ fileName || '点击选择文件' }}
+          <input
+            type="file"
+            accept="video/*"
+            ref="fileInputRef"
+            @change="handleFileChange"
+            style="display: none"
+          />
+        </div>
+      </Form.Item>
+    </Form>
+  </Modal>
+</template>