feat: 完成采购，视频分析模块

apps/web-antd/src/views/videoSystem/videoWarning/algorithmManagement/algorithm-detail-modal.vue

@@ -0,0 +1,257 @@
+<script setup lang="ts">
+import { shallowRef, ref } from 'vue';
+import { useVbenModal } from '@vben/common-ui';
+import {
+  Descriptions,
+  DescriptionsItem,
+  Tag,
+  Image,
+  Tabs,
+  Input,
+  Button,
+  Upload,
+} from 'ant-design-vue';
+import { QuestionCircleOutlined, UploadOutlined } from '@ant-design/icons-vue';
+import image3 from '../../../../assets/algorithmManagement/image3.png';
+import image4 from '../../../../assets/algorithmManagement/image4.png';
+const [BasicModal, modalApi] = useVbenModal({
+  onOpenChange: handleOpenChange,
+  onClosed() {
+    algorithmDetail.value = null;
+  },
+});
+
+const algorithmDetail = shallowRef<any>(null);
+const activeTab = ref('recognition');
+const confidence = ref(64);
+
+async function handleOpenChange(open: boolean) {
+  if (!open) {
+    return null;
+  }
+  modalApi.modalLoading(true);
+  const { id, data } = modalApi.getData() as {
+    id: number | string;
+    data: any[];
+  };
+
+  // 从传递的数据中查找对应的记录
+  const record = data.find((item: any) => item.id === id);
+  if (record) {
+    algorithmDetail.value = record;
+  }
+
+  modalApi.modalLoading(false);
+}
+
+// 获取算法类型颜色
+const getAlgorithmTypeColor = (type: string) => {
+  const colorMap: Record<string, string> = {
+    安全监控: 'red',
+    环境监测: 'green',
+    基础设施: 'blue',
+    交通管理: 'orange',
+  };
+  return colorMap[type] || 'default';
+};
+
+// 模拟识别结果JSON
+const recognitionResult = {
+  msg: 'success',
+  code: 200,
+  data: [
+    {
+      image: null,
+      coordinate: {
+        xyxy: [191, 202, 809, 521],
+      },
+      label: 'Fall-Detected',
+      score: '0.64',
+    },
+  ],
+};
+
+// 上传图片处理
+const handleUploadImage = (file: any) => {
+  console.log('上传图片', file);
+
+  // 创建文件URL
+  const reader = new FileReader();
+  reader.onload = (e) => {
+    uploadedImageUrl.value = e.target?.result as string;
+    hasUploadedImage.value = true;
+  };
+  reader.readAsDataURL(file);
+
+  return false; // 阻止默认上传行为
+};
+
+// 上传配置
+const uploadProps = {
+  beforeUpload: handleUploadImage,
+  showUploadList: false,
+  accept: 'image/*',
+};
+
+// 是否已上传图片
+const hasUploadedImage = ref(false);
+// 上传的图片URL
+const uploadedImageUrl = ref('');
+// 识别框的坐标（模拟数据）
+const detectionBox = ref({
+  x: 61,
+  y: 52,
+  width: 618, // 809 - 191
+  height: 219, // 521 - 202
+});
+</script>
+
+<template>
+  <BasicModal
+    :footer="false"
+    :fullscreen-button="false"
+    title="人体跌倒识别"
+    class="w-[90%]"
+  >
+    <div v-if="algorithmDetail" class="space-y-6">
+      <!-- 头部信息 -->
+      <div class="flex items-start gap-4">
+        <!-- 缩略图 -->
+        <div class="h-24 w-24 flex-shrink-0 overflow-hidden rounded-lg">
+          <img
+            :src="algorithmDetail.image"
+            :alt="algorithmDetail.title"
+            class="h-full w-full object-cover"
+          />
+        </div>
+        <!-- 标题和描述 -->
+        <div class="flex-1">
+          <h2 class="mb-2 text-xl font-bold text-gray-900">
+            {{ algorithmDetail.title }}
+          </h2>
+          <div class="mb-3 flex flex-wrap gap-2">
+            <Tag
+              v-for="category in [
+                '公安行业',
+                '智慧医院',
+                '地铁站',
+                '交通枢纽',
+                '城市道路',
+                '社区',
+                '园区',
+              ]"
+              :key="category"
+              color="blue"
+            >
+              {{ category }}
+            </Tag>
+          </div>
+          <p class="text-gray-600">{{ algorithmDetail.description }}</p>
+        </div>
+      </div>
+
+      <!-- 主要内容区域 -->
+      <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
+        <!-- 左侧：识别图片 -->
+        <div class="space-y-4">
+          <h3 class="text-lg font-semibold text-gray-900">识别图片</h3>
+          <div v-if="hasUploadedImage" class="relative">
+            <img
+              :src="uploadedImageUrl"
+              :alt="algorithmDetail.title"
+              class="h-60 w-full rounded-lg object-cover"
+            />
+          </div>
+          <div
+            v-else
+            class="flex h-60 items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50"
+          >
+            <Upload v-bind="uploadProps">
+              <div
+                class="cursor-pointer text-center text-gray-500 hover:text-blue-500"
+              >
+                <UploadOutlined class="mb-2 text-4xl" />
+                <p>点击上传图片</p>
+              </div>
+            </Upload>
+          </div>
+          <div v-if="hasUploadedImage" class="text-center">
+            <Upload v-bind="uploadProps">
+              <Button type="primary">
+                <template #icon>
+                  <UploadOutlined />
+                </template>
+                重新上传
+              </Button>
+            </Upload>
+          </div>
+        </div>
+
+        <!-- 右侧：识别结果 -->
+        <div v-if="hasUploadedImage" class="space-y-4">
+          <div class="flex items-center justify-between">
+            <Tabs v-model:activeKey="activeTab" class="flex-1">
+              <Tabs.TabPane key="recognition" tab="识别结果" />
+              <Tabs.TabPane key="json" tab="JSON结果" />
+            </Tabs>
+            <div class="flex items-center gap-2">
+              <span class="text-sm text-gray-600">置信度</span>
+              <QuestionCircleOutlined class="text-gray-400" />
+              <Input
+                v-model:value="confidence"
+                class="w-16"
+                size="small"
+                placeholder="10~99"
+              />
+              <span class="text-sm text-gray-600">%</span>
+            </div>
+          </div>
+
+          <!-- 识别结果内容 -->
+          <div v-if="activeTab === 'recognition'" class="relative">
+            <img
+              :src="uploadedImageUrl"
+              :alt="algorithmDetail.title"
+              class="h-60 w-full rounded-lg object-cover"
+            />
+            <!-- 红色识别框 -->
+            <div
+              class="absolute border-2 border-red-500"
+              :style="{
+                left: `${detectionBox.x}px`,
+                top: `${detectionBox.y}px`,
+                width: `${detectionBox.width}px`,
+                height: `${detectionBox.height}px`,
+              }"
+            >
+              <!-- 标签文字 -->
+              <div
+                class="absolute -top-6 left-0 rounded bg-red-500 px-2 py-1 text-xs text-white"
+              >
+                Fall-Detected 0.64
+              </div>
+            </div>
+          </div>
+
+          <!-- JSON结果内容 -->
+          <div v-else class="rounded-lg bg-gray-50 p-4">
+            <pre class="whitespace-pre-wrap text-sm text-gray-800">{{
+              JSON.stringify(recognitionResult, null, 2)
+            }}</pre>
+          </div>
+        </div>
+
+        <!-- 未上传图片时的提示 -->
+        <div
+          v-else
+          class="flex h-60 items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50"
+        >
+          <div class="text-center text-gray-500">
+            <UploadOutlined class="mb-2 text-4xl" />
+            <p>请先上传图片进行识别</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </BasicModal>
+</template>

apps/web-antd/src/views/videoSystem/videoWarning/algorithmManagement/index.vue

@@ -0,0 +1,281 @@
+<template>
+  <Page class="h-full w-full">
+    <!-- 导航分类 -->
+    <div class="mb-6">
+      <!-- 第一行分类 -->
+      <div class="mb-2 flex flex-wrap gap-2">
+        <a-button
+          v-for="category in categories1"
+          :key="category"
+          :type="selectedCategory === category ? 'primary' : 'default'"
+          size="small"
+          @click="handleCategoryChange(category)"
+        >
+          {{ category }}
+        </a-button>
+      </div>
+      <!-- 第二行分类 -->
+      <div class="flex flex-wrap gap-2">
+        <a-button
+          v-for="category in categories2"
+          :key="category"
+          :type="selectedCategory === category ? 'primary' : 'default'"
+          size="small"
+          @click="handleCategoryChange(category)"
+        >
+          {{ category }}
+        </a-button>
+      </div>
+    </div>
+
+    <!-- 搜索结果和操作 -->
+    <div class="mb-4 flex items-center justify-between">
+      <div class="text-gray-600">为您找到相关算法{{ totalCount }}个</div>
+      <a-button type="primary" @click="handleImport">
+        <template #icon>
+          <UploadOutlined />
+        </template>
+        导入模型
+
+      </a-button>
+    </div>
+
+    <!-- 算法卡片网格 -->
+    <div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+      <div
+        v-for="algorithm in algorithmList"
+        :key="algorithm.id"
+        class="cursor-pointer overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm transition-shadow hover:shadow-md"
+        @click="handleAlgorithmClick(algorithm)"
+      >
+        <!-- 算法图片 -->
+        <div class="relative h-48 bg-gray-100">
+          <div
+            :style="{ background: `url(${algorithm.image})`, backgroundSize: 'cover', backgroundPosition: 'center', backgroundRepeat: 'no-repeat' }"
+            class="h-full w-full object-cover"
+          />
+          <!-- 算法类型标签 -->
+          <div class="absolute left-2 top-2">
+            <a-tag :color="getAlgorithmTypeColor(algorithm.type)">
+              {{ algorithm.type }}
+            </a-tag>
+          </div>
+        </div>
+
+        <!-- 算法详情 -->
+        <div class="space-y-3 p-4">
+          <h3 class="text-lg font-semibold text-gray-900">{{ algorithm.title }}</h3>
+          <p class="text-sm text-gray-600 leading-relaxed">{{ algorithm.description }}</p>
+          <div class="flex items-center justify-between">
+            <span class="text-xs text-gray-500">准确率: {{ algorithm.accuracy }}</span>
+            <a-button type="link" size="small" @click.stop="handleViewDetail(algorithm)">
+              查看详情
+            </a-button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 分页 -->
+    <div class="mt-6 flex items-center justify-between border-t border-gray-200 pt-4">
+      <div class="text-gray-600">共搜索到{{ filteredCount }}条数据</div>
+      <div class="flex items-center gap-4">
+        <Pagination
+          v-model:current="pagination.current"
+          v-model:page-size="pagination.pageSize"
+          :total="filteredCount"
+          :show-size-changer="false"
+          :show-quick-jumper="true"
+          @change="handlePageChange"
+        />
+        <Select
+          v-model:value="pagination.pageSize"
+          class="w-24"
+          @change="handlePageSizeChange"
+        >
+          <SelectOption value="10">10条/页</SelectOption>
+          <SelectOption value="20">20条/页</SelectOption>
+          <SelectOption value="50">50条/页</SelectOption>
+        </Select>
+      </div>
+    </div>
+
+    <!-- 算法详情弹窗 -->
+    <AlgorithmDetailModal />
+  </Page>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue';
+import { Page, useVbenModal } from '@vben/common-ui';
+import { UploadOutlined } from '@ant-design/icons-vue';
+import { message, Pagination, Select, SelectOption } from 'ant-design-vue';
+import AlgorithmDetailModalComponent from './algorithm-detail-modal.vue';
+import image from '../../../../assets/algorithmManagement/image.png'
+import image5 from '../../../../assets/algorithmManagement/image5.png'
+import image6 from '../../../../assets/algorithmManagement/image6.png'
+import image7 from '../../../../assets/algorithmManagement/image7.png'
+
+// 分类数据
+const categories1 = [
+  '全部', '智慧工地', '公安行业', '智慧医院', '地铁站', '交通枢纽',
+  '城市道路', '社区', '园区', '城市治理', '交通治理', '平安校园',
+  '智慧零售', '小区', '写字楼', '消防行业'
+];
+
+const categories2 = [
+  '购物中心', '车站', '化工生产', '智慧电网', '监控室', '后厨',
+  '火车站', '娱乐场所', '机场', '电焊车间', '水务管理', '河道管理', '边境监控'
+];
+
+// 状态管理
+const selectedCategory = ref('园区');
+const totalCount = ref(4);
+const filteredCount = ref(2);
+
+// 分页配置
+const pagination = reactive({
+  current: 1,
+  pageSize: 10,
+});
+
+// 算法列表
+const algorithmList = ref<any[]>([]);
+
+// 创建详情弹窗
+const [AlgorithmDetailModal, detailModalApi] = useVbenModal({
+  connectedComponent: AlgorithmDetailModalComponent,
+});
+
+// 模拟算法数据
+const mockAlgorithmData = [
+  {
+    id: 1,
+    title: '人体跌倒识别',
+    type: '安全监控',
+    description: '适用于地铁扶梯/楼梯、老人儿童活动区域等场所，准确率超过90%。',
+    accuracy: '90%+',
+    image: image,
+    category: '园区',
+    features: ['实时检测', '高准确率', '多场景适用'],
+    applications: ['地铁站', '医院', '养老院', '学校']
+  },
+  {
+    id: 2,
+    title: '地面垃圾',
+    type: '环境监测',
+    description: '在居民区和城市街道部署智能垃圾识别系统，自动检测并上报垃圾堆积情况。',
+    accuracy: '85%+',
+    image: image5,
+    category: '园区',
+    features: ['自动识别', '实时上报', '智能分类'],
+    applications: ['社区', '街道', '公园', '商业区']
+  },
+  {
+    id: 3,
+    title: '烟雾识别',
+    type: '安全监控',
+    description: '在办公楼、居民区、学校等重点场所实施烟雾检测技术，监控并精确定位烟雾源，预防火灾。',
+    accuracy: '95%+',
+    image: image6,
+    category: '园区',
+    features: ['早期预警', '精确定位', '快速响应'],
+    applications: ['办公楼', '居民区', '学校', '工厂']
+  },
+  {
+    id: 4,
+    title: '井盖状态识别',
+    type: '基础设施',
+    description: '井盖识别系统监控城市基础设施，识别井盖状态包括损坏、变形或位移，自动报警维护团队。',
+    accuracy: '88%+',
+    image: image7,
+    category: '园区',
+    features: ['状态监测', '自动报警', '维护管理'],
+    applications: ['城市道路', '小区', '工业园区', '市政设施']
+  }
+];
+
+// 获取算法类型颜色
+const getAlgorithmTypeColor = (type: string) => {
+  const colorMap: Record<string, string> = {
+    '安全监控': 'red',
+    '环境监测': 'green',
+    '基础设施': 'blue',
+    '交通管理': 'orange',
+  };
+  return colorMap[type] || 'default';
+};
+
+// 分类变化处理
+const handleCategoryChange = (category: string) => {
+  selectedCategory.value = category;
+  loadAlgorithmData();
+};
+
+// 导入处理
+const handleImport = () => {
+  message.info('导入功能开发中...');
+};
+
+// 算法点击处理
+const handleAlgorithmClick = (algorithm: any) => {
+  console.log('点击算法:', algorithm);
+};
+
+// 查看详情
+const handleViewDetail = (algorithm: any) => {
+  detailModalApi.setData({ id: algorithm.id, data: algorithmList.value });
+  detailModalApi.open();
+};
+
+// 分页变化处理
+const handlePageChange = (page: number) => {
+  pagination.current = page;
+  loadAlgorithmData();
+};
+
+// 每页条数变化处理
+const handlePageSizeChange = (value: any) => {
+  pagination.pageSize = Number(value);
+  pagination.current = 1;
+  loadAlgorithmData();
+};
+
+// 加载算法数据
+const loadAlgorithmData = () => {
+  // 模拟API调用
+  setTimeout(() => {
+    // 根据分类过滤数据
+    let filteredData = [...mockAlgorithmData];
+
+    if (selectedCategory.value !== '全部') {
+      filteredData = filteredData.filter(item =>
+        item.category === selectedCategory.value
+      );
+    }
+
+    // 模拟分页
+    const start = (pagination.current - 1) * pagination.pageSize;
+    const end = start + pagination.pageSize;
+    algorithmList.value = filteredData.slice(start, end);
+    filteredCount.value = filteredData.length;
+  }, 300);
+};
+
+// 初始化
+onMounted(() => {
+  loadAlgorithmData();
+});
+</script>
+
+<style scoped>
+/* 自定义样式 */
+.ant-pagination-item-active {
+  background-color: #1890ff;
+  border-color: #1890ff;
+}
+
+.ant-pagination-item-active a {
+  color: #fff;
+}
+</style>