anytrek-front-public-component 1.11.13 → 1.11.14

package/README.md

@@ -726,7 +726,7 @@ const saveFunctionLandmark = async (
 
 
 ## 🧩 Component: `<ImageDisplay>`
-图片预览弹窗，支持缩放、旋转、地图 MiniMap、AI 分析、图片列表懒加载
+图片预览弹窗，支持缩放、旋转、地图 MiniMap、AI 分析、图片列表懒加载、多帧图片轮播
 
 ```vue
 <ImageDisplay
@@ -749,6 +749,7 @@ const saveFunctionLandmark = async (
   @handle-close="onClose"
   @handle-download="onDownload"
   @update-cur-img="onUpdateCurImg"
+  @updateChildUrl="onUpdateChildUrl"
   @to-history="onToHistory"
 />
 ```
@@ -760,6 +761,9 @@ const visible = ref(false)
 const imageData = ref<any>({})
 const previewItem = ref<any>({})//当前设备
 const imgList = ref<any[]>([]);
+const childImages = ref<any[]>([]);
+const isMutiple = ref(false);
+
 /* 图片宽高 */
 const curPicWH = ref<any>({
   imgW: 800,
@@ -767,33 +771,78 @@ const curPicWH = ref<any>({
 });
 const showImageDisplay = () => {
   imageDisplayRef.value?.loadImageListFun();
+
   visible.value = true;
 }
+/* CargoHandling 相同 uuid 归为一项，新增 imageList 字段存所有帧按 takeTime 最新排序 */
+const groupCargoHandlingImages = (list: any[]): any[] => {
+  const groupMap = new Map<string, any[]>();
+  list.forEach((item: any) => {
+    if (item.triggerType === 'CargoHandling' && item.uuid) {
+      const key = item.uuid;
+      if (!groupMap.has(key)) groupMap.set(key, []);
+      groupMap.get(key)!.push(item);
+    }
+  });
+  const groupedUuids = new Set(groupMap.keys());
+  const result: any[] = [];
+  groupMap.forEach((items) => {
+    items.sort((a: any, b: any) => new Date(b.takeTime).getTime() - new Date(a.takeTime).getTime());
+    result.push({ ...items[0], imageList: [...items] });
+  });
+  list.forEach((item: any) => {
+    if (!(item.triggerType === 'CargoHandling' && item.uuid && groupedUuids.has(item.uuid))) {
+      result.push(item);
+    }
+  });
+  return result;
+}
+
 const fetchImgList = async (successFun: Function) => { 
   /* 请求图片列表 */ 
   const res = await getImgList();
   if (!res || res.errorCode) {
     return;
   }
-  const list = res.sort(
+  const list = groupCargoHandlingImages(res).sort(
     (a: any, b: any) =>
       new Date(b.takeTime).getTime() - new Date(a.takeTime).getTime()
   );
   if (list[0] && imageData.value?.deviceId !== previewItem.value?.deviceId) {
-    imageData = list[0];
+    imageData.value = list[0];
+    childImages.value = imageData.value.imageList?.map((i: any) => i.url) || [];
+    isMutiple.value = imageData.value.imageList?.length > 1;
   }
   imgList.value = list;
   successFun();
 }
 
 const onDownload = (data: any) => {
-  /* 下载图片 */ 
-}
+  /* 下载图片,自行根据data数组长度执行下载方法 */ 
 
-const onUpdateCurImg = (index: number) => {
-  imageData.value = imgList.value[index];
 }
 
+onUpdateCurImg: (index: number) => {
+  const img = { ...imgList.value[index] };
+  delete img._mainUrl;
+  imageData.value = img;
+  isMutiple.value = !!(img?.imageList?.length);
+  childImages.value = img?.imageList?.map((i: any) => i.url) || [];
+},
+onUpdateChildUrl: (url: string) => {
+  const img = imageData.value;
+  if (!img._mainUrl) {
+    img._mainUrl = img.url;
+  }
+  if (img.imageList) {
+    const child = img.imageList.find((i: any) => i.url === url);
+    if (child) {
+        Object.assign(img, child);
+        img.url = url;
+    }
+  }
+},
+
 const fetchHistoryTrail = async () => { 
   const res = await getHistoryTrail();
   if (!res || res.errorCode) {
@@ -846,15 +895,19 @@ const onToHistory = (data: any) => {
 | `onGetHistoryTrail` | 获取历史轨迹 | `Function` | — |
 | `onGetHistoryTrailPoint` | 获取轨迹点详情 | `Function` | — |
 | `getImgList` | 获取图片列表（弹窗打开且列表为空时调用） | `Function` | — |
+| `isMutiple` | 是否开启多帧图片轮播模式 | `Boolean` | `false` |
+| `childImages` | 子图 URL 列表（多帧轮播时使用） | `String[]` | `[]` |
+
 
 ### 📋 Events Reference
 | 事件 | 描述 | 参数 |
 | --- | --- | --- |
 | `update:modelValue` | 弹窗开关变化 | `Boolean` |
 | `handleClose` | 弹窗关闭 | — |
-| `handleDownload` | 下载图片 | — |
+| `handleDownload` | 下载图片，始终返回数组，父组件通过数组长度判断下载方式 | `data: Object[]` |
 | `updateCurImg` | 切换图片 | `index: Number` |
 | `toHistory` | 跳转轨迹历史 | `params: Object` |
+| `updateChildUrl` | 多帧轮播切换子图时触发 | `url: String` |
 
 
 ### 📋 Methods Reference (通过 ref 调用)