feat: 算法配置新版

src/api/camera/camera-config.ts

@@ -0,0 +1,111 @@
+import { http } from '@/utils/http/axios';
+
+export interface QueryCameraPageByAlgoParams {
+  pageNumber: number; // 页号
+  pageSize: number; // 每页数量
+  queryParam: {
+    workspaceIdList?: string[]; // 工位id列表
+    algoId?: number; // 算法id
+    isAlgoDisabled?: boolean; // 算法是否开启
+    isRenderDisabled?: boolean; // 渲染是否开启
+    cameraName?: string; // 相机名称
+    cameraCode?: string; // 相机code
+  };
+}
+export interface QueryCameraPageByAlgoRes {
+  cameraId: number; // 相机id
+  cameraName: string; // 相机名称
+  cameraCode: string; // 相机code
+  networkingState: number; // 联网状态: 0-启用, 1-禁用
+  integrationState: number; // 接入状态: 0-启用, 1-禁用
+  cameraImgUrl: string; // 相机预览图片url
+  workshopName: string; // 车间名称
+  workspaceName: string; // 工位名称
+  isRenderDisabled: boolean; // 渲染是否失效: true-关闭, false-开启
+  algoStatusList: {
+    algoName: string; // 算法名称
+    isDisabled: boolean; // 算法是否失效: true-关闭, false-开启
+  }[];
+}
+
+// 按算法分页查询相机列表
+export function getCameraListByAlgo(data: QueryCameraPageByAlgoParams) {
+  return http.request({
+    url: '/admin/cameraConfig/queryCameraPageByAlgo',
+    method: 'post',
+    data,
+  });
+}
+
+// 根据相机id查询算法状态
+export function getAlgoStatusByCameraIds(params: { cameraIdList: number[] }) {
+  return http.request({
+    url: '/admin/algo/queryAlgoStatusByCameraId',
+    method: 'post',
+    params,
+  });
+}
+
+// 相机算法批量添加
+export function addAlgosByBatch(params: { cameraIdList: number[]; algoIdList: number[] }) {
+  return http.request({
+    url: '/admin/algo/batchSaveCameraAlgoRel',
+    method: 'post',
+    params,
+  });
+}
+
+// 相机算法参数批量设置
+export function updateAlgosByBatch(params: { cameraIdList: number[]; algoId: number; algoParam: string }) {
+  return http.request({
+    url: '/admin/algo/batchUpdateCameraAlgoRelParam',
+    method: 'post',
+    params,
+  });
+}
+
+// 单个相机算法全部开启/关闭（isDisabled: true-关闭, false-开启）
+export function updateAlgosStatusByCameraId(params: { cameraId: number; isDisabled: boolean }) {
+  return http.request({
+    url: `/admin/algo/updateCameraAllAlgoRelStatus?cameraId=${params.cameraId}&isDisabled=${params.isDisabled}`,
+    method: 'put',
+    params,
+  });
+}
+
+// 批量相机算法批量开启/关闭（isEnabled: true-开启, false-关闭）
+export function updateAlgosStatusByBatch(data: { cameraIdList: number[]; algoIdList: number[]; isEnabled: boolean }) {
+  return http.request({
+    url: '/admin/algo/batchUpdateCameraAlgoRelStatus',
+    method: 'post',
+    data,
+  });
+}
+
+// 相机算法批量删除
+export function deleteAlgosByBatch(params: { cameraIdList: number[]; algoIdList: number[] }) {
+  return http.request({
+    url: '/admin/algo/batchDeleteCameraAlgoRel',
+    method: 'post',
+    params,
+  });
+}
+
+export interface QueryAlgoInfoRes {
+  id: number; // 算法id
+  code: string; // 算法code
+  name: string; // 算法名称
+  showName: string; // 算法展示名称
+  remark: string; // 算法描述
+  status: number; // 算法状态: 0-启用, 1-禁用
+  isDeleted: number; // 是否删除: 0-否, 1-是
+  extra: string; // 扩展信息（算法默认参数）
+}
+
+// 获取权限范围内所有算法及其默认参数
+export function getAlgosInfo() {
+  return http.request({
+    url: '/admin/algo/queryAlgoInfo',
+    method: 'get',
+  });
+}

src/router/full-routes.ts

@@ -219,7 +219,7 @@ const fullRoutes: AppRouteRecordRaw[] = [
         // 算法配置
         path: 'config',
         name: 'AlgorithmConfig',
-        component: '/cameras/AlogoConfig/',
+        component: '/cameras/preview/CameraPreview',
         meta: {
           ico: '',
           title: '算法配置',

src/views/cameras/preview/CameraPreview.vue

@@ -24,7 +24,7 @@
     width: 100%;
     height: 100%;
     min-height: calc(100vh - 90px);
-    padding: 20px;
+    padding: 20px 20px 10px 20px;
     background-color: rgba(255, 255, 255, 1);
     border-radius: 10px;
   }

src/views/cameras/preview/components/CameraConfigSingle/CameraConfigSingle.vue

@@ -1,53 +1,291 @@
 <template>
   <div class="query-box">
-    <el-form :inline="true" :model="queryForm" class="demo-form-inline">
-      <el-form-item label="Approved by">
-        <el-input v-model="queryForm.user" placeholder="Approved by" clearable />
-      </el-form-item>
-      <el-form-item label="Activity zone">
-        <el-select v-model="queryForm.region" placeholder="Activity zone" clearable>
-          <el-option label="Zone one" value="shanghai" />
-          <el-option label="Zone two" value="beijing" />
+    <div class="query-param">
+      <el-input
+        v-model="tableQueryTypeContent"
+        style="width: 300px; height: 32px; margin-right: 40px; margin-bottom: 10px"
+        :placeholder="tableQueryType ? '请输入' + tableQueryType : '请输入查找内容'"
+        clearable
+        :disabled="!tableQueryType"
+        @input="handleTableQueryTypeContentChange"
+      >
+        <template #prepend>
+          <el-select
+            v-model="tableQueryType"
+            placeholder="选择类型"
+            style="width: 110px"
+            @change="handleTableQueryTypeChange"
+            clearable
+          >
+            <el-option v-for="item in tableQueryTypeOptions" :key="item.value" :label="item.name" :value="item.value" />
+          </el-select>
+        </template>
+      </el-input>
+      <div class="locations-query">
+        <div>地点：</div>
+        <el-cascader
+          v-model="workLocation"
+          :options="locationOptions"
+          :props="locationProp"
+          clearable
+          collapse-tags
+          :show-all-levels="false"
+          placeholder="请选择地点"
+          popper-class="special-cascader"
+          @change="handleCascaderChange"
+        />
+      </div>
+      <div class="algo-query">
+        <div>算法：</div>
+        <el-select v-model="tableQueryParams.queryParam.algoId" placeholder="请选择算法" clearable style="width: 200px">
+          <el-option v-for="item in algoOptions" :key="item.value" :label="item.name" :value="item.value" />
         </el-select>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" @click="">Query</el-button>
-      </el-form-item>
-    </el-form>
+      </div>
+    </div>
+    <div class="query-btn">
+      <el-button type="primary" @click="submitTableQuery">查询</el-button>
+      <el-button @click="resetTable">重置</el-button>
+    </div>
   </div>
   <div class="table-box">
     <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" height="100%">
-      <el-table-column type="selection" width="55" />
-      <el-table-column label="相机名称" prop="name" width="200" />
-      <el-table-column label="设备ID" prop="code" width="200" />
-      <el-table-column label="地点" prop="location" width="220" />
-      <el-table-column label="算法" prop="algoIds" width="220" />
-      <el-table-column label="渲染" prop="render" width="100" />
-      <el-table-column label="算法操作" fixed="right">
+      <el-table-column type="selection" width="30" />
+      <el-table-column label="相机名称" prop="cameraName" width="180" />
+      <el-table-column label="设备ID" prop="cameraCode" width="180" />
+      <el-table-column label="地点" prop="location" width="280">
+        <template #default="{ row }">
+          {{ row.workshopName + ' - ' + row.workspaceName }}
+        </template>
+      </el-table-column>
+      <el-table-column label="算法" prop="algoStatusList" min-width="200">
         <template #default="{ row }">
-          <el-button type="primary" size="mini" text>配置</el-button>
-          <el-button type="primary" size="mini" text>一键开启</el-button>
+          <div v-for="item in row.algoStatusList" :class="item.isDisabled ? 'close-algo' : ''">{{ item.algoName }}</div>
+        </template>
+      </el-table-column>
+      <el-table-column label="渲染" prop="isRenderDisabled" width="100">
+        <template #default="{ row }">
+          <el-switch :model-value="!row.isRenderDisabled" @change="handleChangeRenderStatus(row)" @click.stop />
+        </template>
+      </el-table-column>
+      <el-table-column label="算法操作" fixed="right" width="300">
+        <template #default="{ row }">
+          <el-button type="primary" text @click="handleSettingConfig(row)">配置</el-button>
+          <el-button type="primary" text @click="batchOpenAlgos(row)">一键开启</el-button>
+          <el-button type="primary" text @click="batchCloseAlgos(row)">一键关闭</el-button>
         </template>
       </el-table-column>
     </el-table>
   </div>
+  <Pagination
+    v-model:page="tableQueryParams.pageNumber"
+    v-model:size="tableQueryParams.pageSize"
+    :total="total"
+    @update:page="handlePageChange"
+    @update:size="handleSizeChange"
+    style="margin-bottom: 0"
+  />
 </template>
 
 <script lang="ts" setup>
-  import { ref } from 'vue';
-  import { ElForm, ElFormItem, ElSelect, ElInput, ElTable, ElTableColumn } from 'element-plus';
-
-  const queryForm = ref({
-    name: '',
-    code: '',
-    location: '',
-    algoId: '',
+  import { onMounted, ref } from 'vue';
+  import {
+    ElSelect,
+    ElOption,
+    ElInput,
+    ElCascader,
+    ElButton,
+    ElTable,
+    ElTableColumn,
+    ElSwitch,
+    ElMessageBox,
+  } from 'element-plus';
+  import { useWorkLocation } from '@/views/datamanager/alertformdata/hooks/useWorkLocation';
+  import {
+    QueryCameraPageByAlgoParams,
+    QueryCameraPageByAlgoRes,
+    getCameraListByAlgo,
+    updateAlgosStatusByCameraId,
+    updateAlgosStatusByBatch,
+    getAlgosInfo,
+  } from '@/api/camera/camera-config';
+  import { renderCamera } from '@/api/camera/camera-preview';
+  import Pagination from '@/components/Pagination/Pagination.vue';
+  import { mockQueryCameraPageByAlgoRes } from './mockData';
+
+  const { locationOptions, getLocationOptions } = useWorkLocation();
+
+  const tableQueryParams = ref<QueryCameraPageByAlgoParams>({
+    pageNumber: 1,
+    pageSize: 10,
+    queryParam: {},
+  });
+
+  const tableData = ref<QueryCameraPageByAlgoRes[]>([]);
+  // const tableData = ref(mockQueryCameraPageByAlgoRes); // Mock data for testing
+
+  const tableQueryTypeOptions = [
+    { name: '相机名称', value: '相机名称' },
+    { name: '相机ID', value: '相机ID' },
+  ];
+  const algoOptions = ref<{ name: string; value: number }[]>([]); // 算法选择器选项
+  const tableQueryType = ref<string>('');
+  const tableQueryTypeContent = ref<string>('');
+  const workLocation = ref([]); // 级联选择器，为二维数组（提取workspaceId）
+  const locationProp = { multiple: true, expandTrigger: 'hover' as const }; // 级联选择器（打开多选）
+  // 分页
+  const total = ref(0); // 总条数
+
+  const handleTableQueryTypeChange = () => {
+    if (tableQueryType.value === '相机名称') {
+      delete tableQueryParams.value.queryParam.cameraCode;
+    } else if (tableQueryType.value === '相机ID') {
+      delete tableQueryParams.value.queryParam.cameraName;
+    } else {
+      delete tableQueryParams.value.queryParam.cameraCode;
+      delete tableQueryParams.value.queryParam.cameraName;
+    }
+    tableQueryTypeContent.value = '';
+  };
+  const handleTableQueryTypeContentChange = () => {
+    if (tableQueryType.value === '相机名称') {
+      tableQueryParams.value.queryParam.cameraName = tableQueryTypeContent.value;
+    } else if (tableQueryType.value === '相机ID') {
+      tableQueryParams.value.queryParam.cameraCode = tableQueryTypeContent.value;
+    }
+  };
+  const handleCascaderChange = () => {
+    if (workLocation.value.length !== 0) {
+      const arr = [];
+      workLocation.value.forEach((item) => {
+        arr.push(item[1]);
+      });
+      tableQueryParams.value.queryParam.workspaceIdList = arr;
+    } else {
+      Reflect.deleteProperty(tableQueryParams.value.queryParam, 'workspaceIdList');
+    }
+  };
+
+  const submitTableQuery = () => {
+    getTableData();
+  };
+
+  const resetTable = () => {
+    tableQueryType.value = '';
+    tableQueryTypeContent.value = '';
+    workLocation.value = [];
+    tableQueryParams.value.pageNumber = 1;
+    tableQueryParams.value.pageSize = 10;
+    tableQueryParams.value.queryParam = {};
+    getTableData();
+  };
+
+  // 换页，重新获取表格
+  const handlePageChange = (val) => {
+    tableQueryParams.value.pageNumber = val;
+    getTableData();
+  };
+  const handleSizeChange = (val) => {
+    tableQueryParams.value.pageSize = val;
+    getTableData();
+  };
+
+  // 切换渲染状态
+  const handleChangeRenderStatus = (row) => {
+    const tempRenderStatus = row.isRenderDisabled ? 'demo' : 'null';
+    console.log('切换渲染状态', tempRenderStatus);
+    renderCamera({
+      render: tempRenderStatus,
+      cameraId: row.cameraId,
+    })
+      .then(() => {
+        console.log('渲染开启成功');
+        getTableData();
+      })
+      .catch(() => {
+        console.log('渲染开启失败');
+        ElMessageBox.alert('开启数量达到上限，请关闭其他相机渲染后再开启。', '渲染开启失败', {
+          type: 'warning',
+        });
+      });
+  };
+
+  // 配置算法（单相机配置）
+  const handleSettingConfig = (row) => {
+    console.log('配置算法，进入算法设置详情页', row);
+    // TODO: 跳转到算法设置详情页
+  };
+  // 一键开启算法（单相机一键开启）
+  const batchOpenAlgos = (row) => {
+    console.log('开启算法', row);
+    updateAlgosStatusByCameraId({ cameraId: row.cameraId, isDisabled: false }).then(() => {
+      console.log('开启算法成功');
+      getTableData();
+    });
+  };
+  // 一键关闭算法（单相机一键关闭）
+  const batchCloseAlgos = (row) => {
+    console.log('关闭算法', row);
+    updateAlgosStatusByCameraId({ cameraId: row.cameraId, isDisabled: true }).then(() => {
+      console.log('关闭算法成功');
+      getTableData();
+    });
+  };
+
+  const getTableData = async () => {
+    console.log('Query params:', tableQueryParams.value);
+    await getCameraListByAlgo(tableQueryParams.value).then((res) => {
+      console.log('Camera data:', res);
+      tableData.value = res.records;
+      total.value = res.totalRow;
+    });
+  };
+
+  const getAllAlgosInfo = async () => {
+    await getAlgosInfo().then((res) => {
+      algoOptions.value = res.map((item) => ({ name: item.name, value: item.id }));
+    });
+  };
+
+  onMounted(() => {
+    getTableData();
+    getLocationOptions();
+    getAllAlgosInfo();
   });
-  const tableData = ref([]);
 </script>
 
 <style lang="scss" scoped>
+  .query-box {
+    margin-bottom: 10px;
+    display: flex;
+
+    .query-param {
+      display: flex;
+      flex-wrap: wrap;
+      flex-direction: row;
+      align-items: center;
+      flex: 1;
+    }
+
+    .locations-query,
+    .algo-query {
+      display: flex;
+      align-items: center;
+      margin-right: 40px;
+      margin-bottom: 10px;
+    }
+
+    .query-btn {
+      margin-left: auto;
+      margin-bottom: 10px;
+    }
+  }
+
   .table-box {
-    height: calc(100vh - 250px);
+    height: calc(100vh - 280px);
+
+    .close-algo {
+      color: #cccccc;
+      text-decoration: line-through;
+    }
   }
 </style>

src/views/cameras/preview/components/CameraConfigSingle/mockData.ts

@@ -0,0 +1,410 @@
+export const mockQueryCameraPageByAlgoRes = [
+  {
+    cameraName: 'Camera-1',
+    cameraCode: 'CAM-1',
+    networkingState: 0,
+    integrationState: 1,
+    cameraImgUrl: 'https://example.com/camera1.jpg',
+    workshopName: 'Workshop A',
+    workspaceName: 'Workspace 1',
+    isRenderDisabled: false,
+    algoStatusList: [
+      {
+        algoName: 'Algo Alpha',
+        isDisabled: false,
+      },
+      {
+        algoName: 'Algo Beta',
+        isDisabled: true,
+      },
+      {
+        algoName: 'Algo Alpha2',
+        isDisabled: false,
+      },
+      {
+        algoName: 'Algo Beta2',
+        isDisabled: false,
+      },
+    ],
+  },
+  {
+    cameraName: 'Camera-2',
+    cameraCode: 'CAM-2',
+    networkingState: 1,
+    integrationState: 0,
+    cameraImgUrl: 'https://example.com/camera2.jpg',
+    workshopName: 'Workshop B',
+    workspaceName: 'Workspace 2',
+    isRenderDisabled: true,
+    algoStatusList: [
+      {
+        algoName: 'Algo Gamma',
+        isDisabled: true,
+      },
+      {
+        algoName: 'Algo Delta',
+        isDisabled: false,
+      },
+    ],
+  },
+  {
+    cameraName: 'Camera-3',
+    cameraCode: 'CAM-3',
+    networkingState: 0,
+    integrationState: 1,
+    cameraImgUrl: 'https://example.com/camera3.jpg',
+    workshopName: 'Workshop A',
+    workspaceName: 'Workspace 3',
+    isRenderDisabled: false,
+    algoStatusList: [
+      {
+        algoName: 'Algo Alpha',
+        isDisabled: false,
+      },
+      {
+        algoName: 'Algo Epsilon',
+        isDisabled: true,
+      },
+    ],
+  },
+  {
+    cameraName: 'Camera-4',
+    cameraCode: 'CAM-4',
+    networkingState: 1,
+    integrationState: 0,
+    cameraImgUrl: 'https://example.com/camera4.jpg',
+    workshopName: 'Workshop B',
+    workspaceName: 'Workspace 4',
+    isRenderDisabled: true,
+    algoStatusList: [
+      {
+        algoName: 'Algo Gamma',
+        isDisabled: true,
+      },
+      {
+        algoName: 'Algo Zeta',
+        isDisabled: false,
+      },
+    ],
+  },
+  {
+    cameraName: 'Camera-5',
+    cameraCode: 'CAM-5',
+    networkingState: 0,
+    integrationState: 1,
+    cameraImgUrl: 'https://example.com/camera5.jpg',
+    workshopName: 'Workshop A',
+    workspaceName: 'Workspace 5',
+    isRenderDisabled: false,
+    algoStatusList: [
+      {
+        algoName: 'Algo Alpha',
+        isDisabled: false,
+      },
+      {
+        algoName: 'Algo Eta',
+        isDisabled: true,
+      },
+    ],
+  },
+  // {
+  //   cameraName: 'Camera-6',
+  //   cameraCode: 'CAM-6',
+  //   networkingState: 1,
+  //   integrationState: 0,
+  //   cameraImgUrl: 'https://example.com/camera6.jpg',
+  //   workshopName: 'Workshop B',
+  //   workspaceName: 'Workspace 6',
+  //   isRenderDisabled: true,
+  //   algoStatusList: [
+  //     {
+  //       algoName: 'Algo Gamma',
+  //       isDisabled: true,
+  //     },
+  //     {
+  //       algoName: 'Algo Theta',
+  //       isDisabled: false,
+  //     },
+  //   ],
+  // },
+  // {
+  //   cameraName: 'Camera-7',
+  //   cameraCode: 'CAM-7',
+  //   networkingState: 0,
+  //   integrationState: 1,
+  //   cameraImgUrl: 'https://example.com/camera7.jpg',
+  //   workshopName: 'Workshop A',
+  //   workspaceName: 'Workspace 7',
+  //   isRenderDisabled: false,
+  //   algoStatusList: [
+  //     {
+  //       algoName: 'Algo Alpha',
+  //       isDisabled: false,
+  //     },
+  //     {
+  //       algoName: 'Algo Iota',
+  //       isDisabled: true,
+  //     },
+  //   ],
+  // },
+  // {
+  //   cameraName: 'Camera-8',
+  //   cameraCode: 'CAM-8',
+  //   networkingState: 1,
+  //   integrationState: 0,
+  //   cameraImgUrl: 'https://example.com/camera8.jpg',
+  //   workshopName: 'Workshop B',
+  //   workspaceName: 'Workspace 8',
+  //   isRenderDisabled: true,
+  //   algoStatusList: [
+  //     {
+  //       algoName: 'Algo Gamma',
+  //       isDisabled: true,
+  //     },
+  //     {
+  //       algoName: 'Algo Kappa',
+  //       isDisabled: false,
+  //     },
+  //   ],
+  // },
+  // {
+  //   cameraName: 'Camera-9',
+  //   cameraCode: 'CAM-9',
+  //   networkingState: 0,
+  //   integrationState: 1,
+  //   cameraImgUrl: 'https://example.com/camera9.jpg',
+  //   workshopName: 'Workshop A',
+  //   workspaceName: 'Workspace 9',
+  //   isRenderDisabled: false,
+  //   algoStatusList: [
+  //     {
+  //       algoName: 'Algo Alpha',
+  //       isDisabled: false,
+  //     },
+  //     {
+  //       algoName: 'Algo Lambda',
+  //       isDisabled: true,
+  //     },
+  //   ],
+  // },
+  // {
+  //   cameraName: 'Camera-10',
+  //   cameraCode: 'CAM-10',
+  //   networkingState: 1,
+  //   integrationState: 0,
+  //   cameraImgUrl: 'https://example.com/camera10.jpg',
+  //   workshopName: 'Workshop B',
+  //   workspaceName: 'Workspace 10',
+  //   isRenderDisabled: true,
+  //   algoStatusList: [
+  //     {
+  //       algoName: 'Algo Gamma',
+  //       isDisabled: true,
+  //     },
+  //     {
+  //       algoName: 'Algo Mu',
+  //       isDisabled: false,
+  //     },
+  //   ],
+  // },
+  // {
+  //   cameraName: 'Camera-11',
+  //   cameraCode: 'CAM-11',
+  //   networkingState: 0,
+  //   integrationState: 1,
+  //   cameraImgUrl: 'https://example.com/camera11.jpg',
+  //   workshopName: 'Workshop A',
+  //   workspaceName: 'Workspace 11',
+  //   isRenderDisabled: false,
+  //   algoStatusList: [
+  //     {
+  //       algoName: 'Algo Alpha',
+  //       isDisabled: false,
+  //     },
+  //     {
+  //       algoName: 'Algo Nu',
+  //       isDisabled: true,
+  //     },
+  //   ],
+  // },
+  // {
+  //   cameraName: 'Camera-12',
+  //   cameraCode: 'CAM-12',
+  //   networkingState: 1,
+  //   integrationState: 0,
+  //   cameraImgUrl: 'https://example.com/camera12.jpg',
+  //   workshopName: 'Workshop B',
+  //   workspaceName: 'Workspace 12',
+  //   isRenderDisabled: true,
+  //   algoStatusList: [
+  //     {
+  //       algoName: 'Algo Gamma',
+  //       isDisabled: true,
+  //     },
+  //     {
+  //       algoName: 'Algo Xi',
+  //       isDisabled: false,
+  //     },
+  //   ],
+  // },
+  // {
+  //   cameraName: 'Camera-13',
+  //   cameraCode: 'CAM-13',
+  //   networkingState: 0,
+  //   integrationState: 1,
+  //   cameraImgUrl: 'https://example.com/camera13.jpg',
+  //   workshopName: 'Workshop A',
+  //   workspaceName: 'Workspace 13',
+  //   isRenderDisabled: false,
+  //   algoStatusList: [
+  //     {
+  //       algoName: 'Algo Alpha',
+  //       isDisabled: false,
+  //     },
+  //     {
+  //       algoName: 'Algo Omicron',
+  //       isDisabled: true,
+  //     },
+  //   ],
+  // },
+  // {
+  //   cameraName: 'Camera-14',
+  //   cameraCode: 'CAM-14',
+  //   networkingState: 1,
+  //   integrationState: 0,
+  //   cameraImgUrl: 'https://example.com/camera14.jpg',
+  //   workshopName: 'Workshop B',
+  //   workspaceName: 'Workspace 14',
+  //   isRenderDisabled: true,
+  //   algoStatusList: [
+  //     {
+  //       algoName: 'Algo Gamma',
+  //       isDisabled: true,
+  //     },
+  //     {
+  //       algoName: 'Algo Pi',
+  //       isDisabled: false,
+  //     },
+  //   ],
+  // },
+  // {
+  //   cameraName: 'Camera-15',
+  //   cameraCode: 'CAM-15',
+  //   networkingState: 0,
+  //   integrationState: 1,
+  //   cameraImgUrl: 'https://example.com/camera15.jpg',
+  //   workshopName: 'Workshop A',
+  //   workspaceName: 'Workspace 15',
+  //   isRenderDisabled: false,
+  //   algoStatusList: [
+  //     {
+  //       algoName: 'Algo Alpha',
+  //       isDisabled: false,
+  //     },
+  //     {
+  //       algoName: 'Algo Rho',
+  //       isDisabled: true,
+  //     },
+  //   ],
+  // },
+  // {
+  //   cameraName: 'Camera-16',
+  //   cameraCode: 'CAM-16',
+  //   networkingState: 1,
+  //   integrationState: 0,
+  //   cameraImgUrl: 'https://example.com/camera16.jpg',
+  //   workshopName: 'Workshop B',
+  //   workspaceName: 'Workspace 16',
+  //   isRenderDisabled: true,
+  //   algoStatusList: [
+  //     {
+  //       algoName: 'Algo Gamma',
+  //       isDisabled: true,
+  //     },
+  //     {
+  //       algoName: 'Algo Sigma',
+  //       isDisabled: false,
+  //     },
+  //   ],
+  // },
+  // {
+  //   cameraName: 'Camera-17',
+  //   cameraCode: 'CAM-17',
+  //   networkingState: 0,
+  //   integrationState: 1,
+  //   cameraImgUrl: 'https://example.com/camera17.jpg',
+  //   workshopName: 'Workshop A',
+  //   workspaceName: 'Workspace 17',
+  //   isRenderDisabled: false,
+  //   algoStatusList: [
+  //     {
+  //       algoName: 'Algo Alpha',
+  //       isDisabled: false,
+  //     },
+  //     {
+  //       algoName: 'Algo Tau',
+  //       isDisabled: true,
+  //     },
+  //   ],
+  // },
+  // {
+  //   cameraName: 'Camera-18',
+  //   cameraCode: 'CAM-18',
+  //   networkingState: 1,
+  //   integrationState: 0,
+  //   cameraImgUrl: 'https://example.com/camera18.jpg',
+  //   workshopName: 'Workshop B',
+  //   workspaceName: 'Workspace 18',
+  //   isRenderDisabled: true,
+  //   algoStatusList: [
+  //     {
+  //       algoName: 'Algo Gamma',
+  //       isDisabled: true,
+  //     },
+  //     {
+  //       algoName: 'Algo Upsilon',
+  //       isDisabled: false,
+  //     },
+  //   ],
+  // },
+  // {
+  //   cameraName: 'Camera-19',
+  //   cameraCode: 'CAM-19',
+  //   networkingState: 0,
+  //   integrationState: 1,
+  //   cameraImgUrl: 'https://example.com/camera19.jpg',
+  //   workshopName: 'Workshop A',
+  //   workspaceName: 'Workspace 19',
+  //   isRenderDisabled: false,
+  //   algoStatusList: [
+  //     {
+  //       algoName: 'Algo Alpha',
+  //       isDisabled: false,
+  //     },
+  //     {
+  //       algoName: 'Algo Phi',
+  //       isDisabled: true,
+  //     },
+  //   ],
+  // },
+  // {
+  //   cameraName: 'Camera-20',
+  //   cameraCode: 'CAM-20',
+  //   networkingState: 1,
+  //   integrationState: 0,
+  //   cameraImgUrl: 'https://example.com/camera20.jpg',
+  //   workshopName: 'Workshop B',
+  //   workspaceName: 'Workspace 20',
+  //   isRenderDisabled: true,
+  //   algoStatusList: [
+  //     {
+  //       algoName: 'Algo Gamma',
+  //       isDisabled: true,
+  //     },
+  //     {
+  //       algoName: 'Algo Chi',
+  //       isDisabled: false,
+  //     },
+  //   ],
+  // },
+];

src/views/datamanager/alertformdata/components/default-simple/Default.vue

@@ -56,7 +56,7 @@
   import QueryFormSimple from '../common/QueryFormSimple.vue';
   import AlertTableSimple, { DataSourceItem } from '../common/AlertTableSimple.vue';
   import DetailDialog from '../common/DetailDialog.vue';
-  import Pagination from '../common/Pagination.vue';
+  import Pagination from '@/components/Pagination/Pagination.vue';
 
   const { locationOptions, getLocationOptions } = useWorkLocation();
   const { aiMainOptions, getAIMainOptions } = useIssueMainType();

src/views/datamanager/alertformdata/components/default/Default.vue

@@ -101,7 +101,7 @@
   import QueryForm from '../common/QueryForm.vue';
   import AlertTable, { DataSourceItem } from '../common/AlertTable.vue';
   import DetailDialog from '../common/DetailDialog.vue';
-  import Pagination from '../common/Pagination.vue';
+  import Pagination from '@/components/Pagination/Pagination.vue';
 
   const { urlPrefix } = useGlobSetting();
 

src/views/datamanager/alertformdata/components/show/Show.vue

@@ -75,7 +75,7 @@
   import QueryForm from '../common/QueryForm.vue';
   import AlertTable, { DataSourceItem } from '../common/AlertTable.vue';
   import DetailDialog from '../common/DetailDialog.vue';
-  import Pagination from '../common/Pagination.vue';
+  import Pagination from '@/components/Pagination/Pagination.vue';
   import AddDrawer from '../common/AddDrawer.vue';
   import EditDrawer from '../common/EditDrawer.vue';