anytrek-front-public-component

front-public-component

A public component library

📦 Installation

npm install anytrek-front-public-component --save

🚀 Usage

import frontPublicComponent from 'anytrek-front-public-component';
import 'anytrek-front-public-component/style.css';
app.use(frontPublicComponent);

🧩 Component: <anytrekTimerangePick>

Select a time range

<anytrekTimerangePick
  v-model:visible="visible"
  v-model:value="value"
  v-model:valueType="valueType"
  v-model:startTime="startTime"
  v-model:endTime="endTime"
  v-model:timeZone="timeZone"
  :showQuick="true"
  :immediate="true"
  @change="onRangeChange"
/>

🔧 Example Setup

const visible = ref(false);
const value = ref<'custom' | '' | number>('custom');
const valueType = ref<string>('week');
const startTime = ref<string>('');
const endTime = ref<string>('');
const timeZone = ref<string>('');

function onRangeChange(start: string, end: string, tz: string) {
  console.log(start, end, tz);
}

📋 Props Reference

🧩 Component: <anytrekTimePick>

Select a time

<anytrekTimePick
  v-model:value="anytrekTimePickValue"
  v-model:timeZone="anytrekTimePickTimeZone"
  v-model:visible="anytrekTimePickVisible"
  :immediate="true"
  @change="timeChange"
/>

🔧 Example Setup

const anytrekTimePickValue = ref<string>('2018-01-31T14:32:19.213Z');
const anytrekTimePickTimeZone = ref<string>('');
const anytrekTimePickVisible = ref<boolean>(false);
function timeChange(time: string, tz: string) {
  console.log(time, tz);
}

📋 Props Reference

🧩 Component: <vehicle-select>

Viewing and selecting vehicles

<div style="height: 500px">
  <vehicleSelect
    :data="testData"
    :loading="loading"
    :keyword="keyword"
    :modleList="modleList"
    v-model:sortKey="sortKey"
    v-model:vehicleId="vehicleId"
    v-model:deviceId="deviceId"
    v-model:retract="retract"
  />
</div>

🔧 Example Setup

const testData = ref<any>({});
const loading = ref<boolean>(true);
const keyword = ref<string>('');
const modleList = ref<number[]>([62]);
const sortKey = ref<string>('asc')
const vehicleId = ref<number>(15884)
const deviceId = ref<number>(0)
const retract = ref<boolean>(false);
onMounted(() => {
  testData.value = {
    tagList: [],
    deviceStatusList: [],
    vehicleDeviceList: [],
    landmarkDeviceList: [],
    landmarkList: [],
    vehicleType: [],
    deviceList: [],
    vehicleList: [],
    landmarkGroupList: [],
  }
  loading.value = false;
});

📋 Props Reference

备注：现在data支持2种情况了： 1.包含数组：tagList,deviceStatusList,vehicleDeviceList,landmarkDeviceList,landmarkList,vehicleType,deviceList,vehicleList 2.包含数组：relationDeviceList，tagList,landmarkList,vehicleType

备注：limitList的使用

1. 必须有modleList才能生效；
2. 用于对于modelList中的设备详细限制，比如想限制2310固件版本（fwVer）在11309及以上，则可以传 const limitList = ref([ { modelId: 54, key: 'fwVer', regex: '^(1130[9]|113[1-9]\d|11[4-9]\d{2}|1[2-9]\d{3}|[2-9]\d{4}|[1-9]\d{5,})$' } ])

📋 Events Reference

🧩 Component: <addOrEditVehicle>

add or edit vehicle

<add-or-edit-vehicle
  v-model="drawerShow"
  :loginInfo="loginInfo"
  :customerHabit="customerHabit"
  :vehicleData="drawerForm"
  :allAssetTypes="allAssetTypes"
  :allVehicles="allVehicles"
  :allDevices="allDevices"
  :modelTypes="modelTypes"
  :allVehicleToDevice="allVehicleToDevice"
  :allTags="allTags"
  :assetTypeFn="assetTypeFn"
  :bindDeviceHis="bindDeviceHis"
  :deviceBindTimeLimit="deviceBindTimeLimit"
  :saveFunctionVehicle="saveFunctionVehicle"
  :allLandmarks="allLandmarks"
  :landmarkGroup="landmarkGroup"
  :saveFunctionTag="saveFunctionTag"
  :unitAllState="unitAllState"
  :GOOGLE_MAP_API_KEY="GOOGLE_MAP_API_KEY"
  :MAP_STYLES="MAP_STYLES"
  :searhTrimblemapAddress="searhTrimblemapAddress"
  :saveFunctionLandmark="saveFunctionLandmark"
  :conDetSensorList="conDetSensorList"
  :needConDetSensor="needConDetSensor"
  ></add-or-edit-vehicle>

🔧 Example Setup

const assetTypeFn = async (data: any, flag: 'add' | 'delete') => {
  if (flag === 'delete') {
    const res = await Api.editCustomizeVehicleType([
      {
        id: data.id,
        isDelete: 1,
      },
    ]);
    if (!res || (res.errorCode && res.errorCode !== 200)) return;
  } else if (flag === 'add') {
    const result = await Api.addCustomizeVehicleType([data]);
    if (!result || result.errorCode) return;
  }
  await getCustomizeVehicleType();
};

const bindDeviceHis = async (params: any) => {
  const res = await Api.loadBoundDevices(params);
  if (!res || (res.errorCode && res.errorCode !== 200)) return;
  return res;
};

const deviceBindTimeLimit = async (deviceId: any) => {
  const res = await Api.getDeviceTimeLimitApi({
    deviceId: deviceId,
  });

  if (!res || res.errorCode) return;

  if (res.length) {
    return [
      res[0].limitStartTime,
      dayjs(new Date()).utc().format('YYYY-MM-DDTHH:mm:ss[Z]'),
    ];
  } else {
    return [null, dayjs(new Date()).utc().format('YYYY-MM-DDTHH:mm:ss[Z]')];
  }
};

const saveFunctionVehicle = async (
  params: any,
  flag = false,
  successFn: Function,
  failFn: Function,
) => {
  let result;
  if (params.id) {
    result = await Api.editVehicleNEW([params]);
  } else {
    result = await Api.addVehicleNEW([params]);
  }

  // 设备状态为1的需要切换为2
  if (flag) {
    const res = await Api.editDeviceNew([
      {
        id: params.deviceId,
        content: {
          deviceStatus: 2,
          modifyTime: dayjs(new Date()).utc().format(),
          activateTime: dayjs(new Date()).utc().format(),
        },
      },
    ]);

    if (!res || res.errorCode) return failFn();
    if (Array.isArray(result) && result[0].errorCode) {
    let errorCode = result[0].errorCode;

    const errLang1 = errLang[errorCode as string];
    const errMessage = errLang1 || `Error Code: ${errorCode}`;

    return failFn(errMessage);
  }
  }

  if (!result || result.errorCode) return failFn();
  successFn();
  refresh();
};

📋 Props Reference

🧩 Component: <addOrEditTag>

add or edit tag

<add-or-edit-tag
  v-model="drawerShow"
  :loginInfo="loginInfo"
  :customerHabit="customerHabit"
  :itemData="drawerForm"
  :allVehicles="allVehicles"
  :allAssetTypes="allAssetTypes"
  :allDevices="allDevices"
  :modelTypes="modelTypes"
  :allVehicleToDevice="allVehicleToDevice"
  :allTags="allTags"
  :allLandmarks="allLandmarks"
  :landmarkGroup="landmarkGroup"
  :saveFunctionTag="saveFunctionTag"
  :assetTypeFn="assetTypeFn"
  :bindDeviceHis="bindDeviceHis"
  :deviceBindTimeLimit="deviceBindTimeLimit"
  :saveFunctionVehicle="saveFunctionVehicle"
  :unitAllState="unitAllState"
  :GOOGLE_MAP_API_KEY="GOOGLE_MAP_API_KEY"
  :MAP_STYLES="MAP_STYLES"
  :searhTrimblemapAddress="searhTrimblemapAddress"
  :saveFunctionLandmark="saveFunctionLandmark"
  :conDetSensorList="conDetSensorList"
  :needConDetSensor="needConDetSensor"
  ></add-or-edit-tag>

🔧 Example Setup

const saveFunctionTag = async (
  params: any,
  successFn: Function,
  failFn: Function,
) => {
  let result;
  if (params.id) {
    result = await Api.updateTagsList([params]);
  } else {
    result = await Api.saveTagsList([params]);
  }

  if (!result || result.errorCode) return failFn();
  successFn();

  handleClose();
};

const handleAddBurialPoint = (type: string) => {
  Api.addBurialPoint(type);
};

📋 Props Reference

🧩 Component: <addOrEditLandmark>

add or edit landmark

<add-or-edit-landmark
  v-model="drawerShow"
  :itemData="drawerForm"
  :unitAllState="unitAllState"
  :GOOGLE_MAP_API_KEY="GOOGLE_MAP_API_KEY"
  :MAP_STYLES="MAP_STYLES"
  :allLandmarkGroup="landmarkGroup"
  :searhTrimblemapAddress="searhTrimblemapAddress"
  :saveFunctionLandmark="saveFunctionLandmark"
  @addGroup="handleAddGroup"
  ></add-or-edit-landmark>

🔧 Example Setup

const searhTrimblemapAddress = async (params: any) => {
  const res = await Api.searhTrimblemapAddress(params);
  return res;
};

const saveFunctionLandmark = async (
  params: any,
  successFn: Function,
  failFn: Function,
) => {
  let result;

  if (params.id) {
    result = await Api.editLandmark([params]);
  } else {
    result = await Api.addLandmark([params]);
  }

  if (!result || result.errorCode) return failFn();
  successFn();
  initData();
};

const handleAddGroup = (params: any) => {
  groupFormVisible.value = true;
  groupForm = params;
};

📋 Props Reference

🧩 Component: <AddOrEditShare>

add or edit Share

<AddOrEditShare
  v-model="addVisible"
  :vehicleLoading="vehicleLoading"
  :readOnly=""
  :data="testData"
  :itemData="itemData"
  :unitAllState="unitAllState"
  :getShareHistoryUrl="getShareHistoryUrl"
  :uploadShareFile="uploadShareFile"
  :saveFunctionShare="saveFunctionShare"
  :loginInfo="loginInfo"
  :assetTypeFn="assetTypeFn"
  :bindDeviceHis="bindDeviceHis"
  :deviceBindTimeLimit="deviceBindTimeLimit"
  :saveFunctionVehicle="saveFunctionVehicle"
  :saveFunctionTag="saveFunctionTag"
  :unitAllState="unitAllState"
  :GOOGLE_MAP_API_KEY="GOOGLE_MAP_API_KEY"
  :MAP_STYLES="MAP_STYLES"
  :searhTrimblemapAddress="searhTrimblemapAddress"
  :saveFunctionLandmark="saveFunctionLandmark"
  ></AddOrEditShare>

🔧 Example Setup

const addVisible = ref(false);
const vehicleLoading = ref(false);
const testData = ref<any>({});
onMounted(() => {
  testData.value = {
    tagList: [],
    deviceStatusList: [],
    vehicleDeviceList: [],
    landmarkDeviceList: [],
    landmarkList: [],
    vehicleType: [],
    deviceList: [],
    vehicleList: [],
    landmarkGroupList: [],
  }
  vehicleLoading.value = false;
});
const readOnly = ref(false);
const itemData = ref<any>({});
const getShareHistoryUrl = Api.getHistoryUrl;
const uploadShareFile = Api.uploadFile;

const saveFunctionShare = async (
  params: any,
  successFn: Function,
  failFn: Function,
) => {
  let result;

  if (params.id) {
    result = await Api.editShare([params]);
  } else {
    result = await Api.addShare([params]);
  }

  if (!result || result.errorCode) return failFn();
  successFn();
  initData();
};
const { loginInfo } = store;

const assetTypeFn = async (data: any, flag: 'add' | 'delete') => {
  if (flag === 'delete') {
    const res = await Api.editCustomizeVehicleType([
      {
        id: data.id,
        isDelete: 1,
      },
    ]);
    if (!res || (res.errorCode && res.errorCode !== 200)) return;
  } else if (flag === 'add') {
    const result = await Api.addCustomizeVehicleType([data]);
    if (!result || result.errorCode) return;
  }
  await getCustomizeVehicleType();
};

const bindDeviceHis = async (params: any) => {
  const res = await Api.loadBoundDevices(params);
  if (!res || (res.errorCode && res.errorCode !== 200)) return;
  return res;
};

const deviceBindTimeLimit = async (deviceId: any) => {
  const res = await Api.getDeviceTimeLimitApi({
    deviceId: deviceId,
  });

  if (!res || res.errorCode) return;

  if (res.length) {
    return [
      res[0].limitStartTime,
      dayjs(new Date()).utc().format('YYYY-MM-DDTHH:mm:ss[Z]'),
    ];
  } else {
    return [null, dayjs(new Date()).utc().format('YYYY-MM-DDTHH:mm:ss[Z]')];
  }
};

const saveFunctionVehicle = async (
  params: any,
  flag = false,
  successFn: Function,
  failFn: Function,
) => {
  let result;
  if (params.id) {
    result = await Api.editVehicleNEW([params]);
  } else {
    result = await Api.addVehicleNEW([params]);
  }

  // 设备状态为1的需要切换为2
  if (flag) {
    const res = await Api.editDeviceNew([
      {
        id: params.deviceId,
        content: {
          deviceStatus: 2,
          modifyTime: dayjs(new Date()).utc().format(),
          activateTime: dayjs(new Date()).utc().format(),
        },
      },
    ]);

    if (!res || res.errorCode) return failFn();
  }

  if (!result || result.errorCode) return failFn();
  successFn();
  refresh();
};

const saveFunctionTag = async (
  params: any,
  successFn: Function,
  failFn: Function,
) => {
  let result;
  if (params.id) {
    result = await Api.updateTagsList([params]);
  } else {
    result = await Api.saveTagsList([params]);
  }

  if (!result || result.errorCode) return failFn();
  successFn();

  handleClose();
};

const unitAllState = ref<any[]>([]);
const GOOGLE_MAP_API_KEY: string = 'xxxx;
const MAP_STYLES: any = {};

const searhTrimblemapAddress = async (params: any) => {
  const res = await Api.searhTrimblemapAddress(params);
  return res;
};

const saveFunctionLandmark = async (
  params: any,
  successFn: Function,
  failFn: Function,
) => {
  let result;

  if (params.id) {
    result = await Api.editLandmark([params]);
  } else {
    result = await Api.addLandmark([params]);
  }

  if (!result || result.errorCode) return failFn();
  successFn();
  initData();
};

📋 Props Reference

🧩 Component: <ImageDisplay>

图片预览弹窗，支持缩放、旋转、地图 MiniMap、AI 分析、图片列表懒加载、多帧图片轮播

📈 Maint 图表模式（maint 来源）

当 isComeFromMaint 为 true 时（图片来源于 maint 页面），imageCarousel / imageList 模式下会在图片状态区显示一个 line-chart 图标。点击图标会打开一个独立的多线折线图 dialog（基于 echarts，800×600，覆盖在图片预览上方，点击弹窗外部区域仅关闭图表、不关闭图片预览），展示 Gsensor X/Y/Z、Speed、Door Status、Human Detection 六条曲线。

图表数据由宿主通过 getChartData 方法提供，组件在点击图标时才发起请求，并按参数（userPackageId + beginTime + endTime）缓存结果——参数未变化不重复请求，图片列表变化导致参数变化后，下次点击才会重新请求。

// 宿主端实现示例：返回 echarts series 数据（结构见下方 getChartData 说明）
const getChartData = async (params: {
  userPackageId: string; // String(deviceId)
  beginTime: string;    // 第一张图片的 takeTime
  endTime: string;      // 最后一张图片的 takeTime
}) => {
  const res = await Api.getTelemetryChartData(params);
  if (!res || res.errorCode) return null; // 返回 null/空 显示 No Data
  return res;
};

<ImageDisplay
  :isComeFromMaint="true"
  :getChartData="getChartData"
  ...
/>

<ImageDisplay
  ref="imageDisplayRef"
  v-model="visible"
  :data="imageData"
  :vehicleId="vehicleId"
  :deviceId="deviceId"
  :curImgList="imgList"
  :imageInterval=imageInterval
  :curPicWH="curPicWH"
  :haveRotate="haveRotate"
  :saveRotation="saveRotation"
  :haveMap="haveMap"
  :needPath="needPath"
  :mapJson="mapJson"
  :google-map-key="googleMapKey"
  :on-get-history-trail="fetchHistoryTrail"
  :on-get-history-trail-point="fetchHistoryTrailPoint"
  :get-img-list="fetchImgList"
  :getImageVideo="getImageVideo"
  @handle-close="onClose"
  @handle-download="onDownload"
  @update-cur-img="onUpdateCurImg"
  @changeCurPicWH="changeCurPicWH"
  @to-history="onToHistory"
/>

🔧 Example Setup

const imageDisplayRef = ref();
const visible = ref(false)
const imageData = ref<any>({})
const previewItem = ref<any>({})//当前设备
const imgList = ref<any[]>([]);
const imageInterval = ref<number>(15);//当前最新的设置Interval,默认是15
/* 图片宽高 */
const curPicWH = ref<any>({
  imgW: 800,
  imgH: 600,
});
const showImageDisplay = () => {
  imageDisplayParams.value.curImg = {};
  imageDisplayRef.value?.loadImageListFun();

  visible.value = true;
}
/* 2310图片轮播，triggerType为CargoHandling或者eventType为9且uuid，index相同归为一项，新增 imageList 字段存，按 takeTime 最新排序 */
// 2310视频，uuid一样，含有media字段
export const groupCargoHandlingImages = (list: any[]): any[] => {
  const groupMap = new Map<string, any[]>();
  const mergedSet = new Set<any>();
  // 第1步：先合并 triggerType 为 CargoHandling 或 eventType 为 9 且 uuid 相同的图片组
  list.forEach((item: any) => {
    if ((item.triggerType === 'CargoHandling' || item.eventType === 9) && item.uuid) {
      const key = `picture-${item.uuid}-${item.index}`;
      if (!groupMap.has(key)) groupMap.set(key, []);
      groupMap.get(key)!.push(item);
    }
  });
  // 第2步：处理带 media 的项，uuid + index 匹配到图片组则并入该组并记录为已合并，否则走 videoList 分组
  list.forEach((item: any) => {
    if (!item.media || !item.uuid) return;
    if (item.triggerType === 'CargoHandling' || item.eventType === 9) {
      // 自身既是 CargoHandling 又带 media：按 CargoHandling 算，已在图片组中，不重复处理
      mergedSet.add(item);
      return;
    }
    const pictureKey = `picture-${item.uuid}-${item.index}`;
    if (groupMap.has(pictureKey)) {
      groupMap.get(pictureKey)!.push(item);
      mergedSet.add(item);
    } else {
      const key = `media-${item.uuid}`;
      if (!groupMap.has(key)) groupMap.set(key, []);
      groupMap.get(key)!.push(item);
    }
  });
  const result: any[] = [];
  groupMap.forEach((items) => {
    items.sort((a: any, b: any) => new Date(a.takeTime).getTime() - new Date(b.takeTime).getTime());
    const mediaItems = items.filter((i: any) => i.media);
    const imageItems = items.filter((i: any) => !i.media);
    const isPureMediaGroup = !!mediaItems.length && !imageItems.length;
    let timeStampGap = 0;
    if (isPureMediaGroup) {
      timeStampGap = new Date(items[items.length - 1].endTime).getTime() - new Date(items[0].startTime).getTime();
    } else {
      timeStampGap = new Date(items[items.length - 1].takeTime).getTime() - new Date(items[0].takeTime).getTime();
    }
     
    let timeGap = formatDuration(timeStampGap, { d: true, h: true, m: true, s: true });
    let list = items.slice(0);
    if (import.meta.env.MODE === 'development') {
      list = list.map((l: any) => {
        const obj: any =  {
          ...l,
        }
        obj.media && (obj.media = obj.media.replace('https://oss.anytrek.app', '/oss-anytrek-app'));
        obj.media && (obj.media = obj.media.replace('https://oss.anytrek.com', '/oss-anytrek-com'));
        obj.url && (obj.url = obj.url.replace('https://oss.anytrek.app', '/oss-anytrek-app'));
        obj.url && (obj.url = obj.url.replace('https://oss.anytrek.com', '/oss-anytrek-com'));
        return {
          ...obj,
        }
      })
    }
    if (isPureMediaGroup) {
      result.push({ ...items[0], videoList: [...list], timeGap });
    } else {
      const merged = list.find((i: any) => i.media);
      const hasMethodType = list.find((i: any) => i.methodType?.includes('final'));
      const imageList = list.filter((i: any) => !i.media);
      timeGap = timeGap === '0s' ? `${imageList.length}s` : timeGap;
      const obj: any = { ...items[0], imageList: [...imageList], timeGap };
      if (merged) obj.media = merged.media;
      if (!hasMethodType) obj.isCarousel = true;
      result.push(obj);
    }
  });
  
  list.forEach((item: any) => {
    // 已并入图片组的 media 项不再重复添加
    if (mergedSet.has(item)) return;
    const isNotMutiplePicture = !item.media && (!item.uuid || (item.triggerType !== 'CargoHandling' && item.eventType !== 9));
    const isNotMergeMedia = item.media && !item.uuid;
    if (isNotMutiplePicture) {
      result.push(item);
    }
    if (isNotMergeMedia) {
      let timeStampGap = 0;
      timeStampGap = new Date(item.endTime).getTime() - new Date(item.startTime).getTime();
      let timeGap = formatDuration(timeStampGap, { d: true, h: true, m: true, s: true });
      result.push({ ...item, videoList: [item], timeGap });
    }
  });
  result.sort((a, b) => new Date(b.takeTime).getTime() - new Date(a.takeTime).getTime());
  return result;
}

function formatDuration(
  ms: number,
  options: any = {
    d: true,
    h: true,
    m: true,
    s: true,
  }
) {
  let remain = Math.floor(ms / 1000)

  const result = []

  const units: [string, number][] = [
    ['d', 86400],
    ['h', 3600],
    ['m', 60],
    ['s', 1],
  ]

  for (const [key, value] of units) {
    if (!options[key]) continue

    const count = Math.floor(remain / value)

    if (count > 0) {
      result.push(`${count}${key}`)
    }

    remain %= value
  }

  return result.join('') || '0s'
}

const fetchImgList = async (successFun: Function) => { 
  /* 请求图片列表 */ 
  const res = await getImgList();
  if (!res || res.errorCode) {
    return;
  }
  const list = groupCargoHandlingImages(res);
  if (list[0]) {
    imageData.value = { ...list[0] };
  }
  imgList.value = list;
  successFun();
}

const getImageVideo = async(item: any) => {
  const params = `userPackageId=${item.deviceId}&uuid=${item.uuid}`;
  const res = await Api.getCargoHandlingVideo(params);
  const index = curImgList.value.findIndex((l: any) => l.url === curImg.value.url);
  if (index === -1) return;
  let url = '';
  if (!res || res.errorCode || !res.list?.[0]?.media) {
    url = '';
  } else {
    url = res.list[0].media;
  }
  if (import.meta.env.MODE === 'development') {
    url = url.replace('https://oss.anytrek.app', '/oss-anytrek-app');
    url = url.replace('https://oss.anytrek.com', '/oss-anytrek-com');
  }
  curImg.value.media = url;
}

const onDownload = async(data: any) => {
  imageDisplayRef.value?.changeDownloadImageLoading(true);

  /* 下载图片,自行根据data数组长度执行下载方法 */ 
  //await .....

  imageDisplayRef.value?.changeDownloadImageLoading(false);
  
}

const onUpdateCurImg = (index: number) => {
  const img = { ...imgList.value[index] };
  imageData.value = img;
}


const changeCurPicWH = (data: any) => {
  if (curPicWH.value.imgW !== data.imgW || curPicWH.value.imgH !== data.imgH) {
    curPicWH.value = data;
  }
}

const fetchHistoryTrail = async () => { 
  const res = await getHistoryTrail();
  if (!res || res.errorCode) {
    return [];
  }
  return res;
}

const fetchHistoryTrailPoint = async () => { 
  const res = await getHistoryTrailPoint();
  if (!res || res.errorCode) {
    return [];
  }
  return res;
}

const onToHistory = (data: any) => {
  const { startTime, endTime, takeTime, vehicleId, deviceId, } = data;
  let url =
    getOrigin() +
    `/#/history-trail?startTime=${startTime}&endTime=${endTime}&takeTime=${takeTime}`;

  if (vehicleId) {
    url += `&vehicleId=${vehicleId}`;
  }
  if (deviceId) {
    url += `&deviceId=${deviceId}`;
  }
  console.log(url);
  location.href = url;
}

📋 Props Reference

📋 Events Reference

📋 Methods Reference (通过 ref 调用)

🧩 Component: <SelectList>

列表选择

<SelectList
  v-model:visible="isShowAllList"
  v-model:selected="selectedIds"
  :items="allTagsList"
  id-key="id"
  name-key="name"
  :search-placeholder="placeholderText"
  :batch-mode="hasMoreInput"
  :single-mode-label="
    eleType === 'vehicle' ? t('vehicleName') : t('device')
  "
  :batch-mode-label="t('batchDeviceID')"
  batch-match-field="deviceUpid"
  :create-label="wordAboutAdd"
  @confirm="handleConfirm"
  @jump="handleJumpEdit"
  @create="handleClickAdd"
>
  <template #item-icon="{ item }">
    <anSvgIcon
      :name="
        addtagType === 'vehicle'
          ? getVehicleIconById(item.id)
          : setTagSvg(addtagType, item)
      "
      font-size="24"
    />
  </template>
</SelectList>

🔧 Example Setup

import { ref, computed } from 'vue';

// 面板控制
const isShowAllList = ref(false);
const selectedIds = ref<any[]>([]);

// 数据源（示例：标签列表）
const allTagsList = ref([
  { id: 1, name: '标签A' },
  { id: 2, name: '标签B' },
]);

// 搜索 & 输入模式
const placeholderText = ref('搜索标签');
const hasMoreInput = ref(false);
const eleType = ref('tag');
const addtagType = ref('tag');
const wordAboutAdd = ref('新建标签');

// 确认选中
function handleConfirm(items: any[]) {
  // 将选中的 items 合并到表单数据
}

// 跳转编辑
function handleJumpEdit(item: any) {
  console.log('edit', item);
}

// 新建
function handleClickAdd() {
  console.log('create');
}

// 图标辅助函数（按项目类型返回对应 SVG）
function setTagSvg(type: string) {
  return type === 'landmark'
    ? 'landmarkIcon'
    : type === 'vehicle'
      ? 'vehicleIcon'
      : 'tagIcon';
}

function getVehicleIconById(id: number) {
  const vehicle = allVehicles.value.find((v: any) => v.id === id);
  return vehicle ? 'vehicle-' + vehicle.content.newIcon : 'vehicleIcon';
}

📋 Props Reference

📤 Events

🧩 Slots

🧩 Component: <notificationOp>

通知/报警规则配置抽屉（drawer），支持新增和编辑报警通知。包含报警类型选择（低电量、静止、温度、TPMS、拆除、地理围栏、门磁等，不同类型有各自的阈值配置表单）、Apply To 绑定（tag/vehicle/landmark）、接收人配置（Email/Phone）、生效时间、TPMS 阈值弹窗等。宿主注入数据与保存方法，组件不写入任何全局 store。

<notificationOp
  v-model:show="notificationShow"
  :message="notificationMessage"
  :is-edit="isEdit"
  :data="notificationData"
  :alarm-types="alarmTypes"
  :vehicle-detail="notificationVehicleDetail"
  :save-notification-fn="saveNotificationFn"
  :edit-tpms-threshold-fn="editTpmsThresholdFn"
  :edit-landmark-fn="editLandmarkFn"
  :op-module-response="opModuleResponse"
  :has-add="true"
  @success="onNotificationSuccess"
  @op-module="onOpModule"
  @open-page="onOpenPage"
  @refresh="onRefresh"
/>

🔧 Example Setup

const notificationShow = ref(false);
const notificationMessage = ref<any>({}); // 编辑时传入通知数据，新增传 {}
const isEdit = ref(false);
const notificationVehicleDetail = ref<any>(null); // 锁定车辆（可选）

// 宿主注入的数据（tag/vehicle/landmark 列表及用户信息等）
// deviceList + deviceStatusList + vehicleDeviceList 三份原始数据同传时，
// 组件内部会合并出 vehicle.deviceOne / deviceOne.deviceStatusOne，
// 供 Temperature（fwVer）/ TPMS（sensorConfig）等类型门槛过滤使用；
// 不传则原样使用 vehicleList。
const notificationData = ref<any>({
  tagList: [],
  vehicleList: [],
  deviceList: [],
  deviceStatusList: [],
  vehicleDeviceList: [],
  landmarkList: [],
  landmarkGroupList: [],
  loginInfo: {},
  customerHabit: {},
  allowSmsAlarm: false,
});

// 保存通知（新增/编辑），接收数组；返回 null 或带 errorCode 视为失败
const saveNotificationFn = async (list: any[]) => {
  const res = await Api.saveNotification(list);
  if (!res || res.errorCode) return res;
  return res;
};

// 编辑 TPMS 阈值
const editTpmsThresholdFn = async (params: any) => {
  return await Api.editTpmsThreshold(params);
};

// 编辑地标（保存星标用）
const editLandmarkFn = async (params: any[]) => {
  return await Api.editLandmark(params);
};

// 宿主完成 tag/vehicle/landmark 数据刷新后，将结果传回 opModuleResponse 触发内部合并刷新
const opModuleResponse = ref<any>(null);

function onNotificationSuccess(payload: any) {
  // payload: { type: 'add' | 'edit', data: 接口返回 }
  console.log('notification success', payload);
}

// 组件内部跳转编辑 tag/vehicle/landmark 时触发，宿主打开对应编辑页
// payload: { opModule: 'tag' | 'vehicle' | 'landmark', type: 'edit', id: number }
function onOpModule(payload: any) {
  console.log('opModule', payload);
}

// 组件请求宿主打开页面（如历史轨迹等）
function onOpenPage(url: string) {
  location.href = url;
}

// 子模块（tag/vehicle/landmark/TPMS）保存成功后宿主刷新数据，配合 opModuleResponse 使用
function onRefresh(payload?: any) {
  console.log('refresh', payload);
}

📋 Props Reference

📋 data 结构说明

{
  tagList?: any[];              // tag 列表
  vehicleList?: any[];          // 车辆列表
  deviceList?: any[];           // 设备原始列表（与 vehicleDeviceList 同传时，组件内部合并出 vehicle.deviceOne）
  deviceStatusList?: any[];     // 设备状态列表（按 userPackageId 关联到 device.deviceStatusOne，Temperature 门槛读 fwVer 依赖此合并）
  vehicleDeviceList?: any[];    // 车辆-设备绑定关系（[{ vehicleId, deviceId }]）
  landmarkList?: any[];         // landmark 列表
  landmarkGroupList?: any[];    // landmark 分组列表
  loginInfo?: Record<string, any>;      // 用户信息；type 为 3 或 4 时组件表现为只读
  customerHabit?: Record<string, any>;  // 用户偏好（tempUnit、speedUnit、distanceUnit、localTimezone、timeZone 等）
  allowSmsAlarm?: boolean;      // 是否允许短信告警；false 时非 Door Status(20)/loadingUnloading(24) 类型会过滤掉 Phone 接收人选项
}

📋 message 结构说明（编辑时传入）

{
  id: number;                   // 通知 id（编辑保存时回传）
  type: number;                 // 报警类型 value（见下方内置报警类型表）
  name: string;
  content: {
    selectVehicles: { allTags: 0 | 1; tags: number[]; vehicles: number[] };
    time: { anyTime: 0 | 1; timeList: any[] };  // anyTime: 1=任何时间，0=自定义时间
    attachToReminder: boolean;
    createTime?: string;
  };
  trigger: any;                 // 各报警类型结构不同（alarmCompare / alarmLimit / alarmConditions / onlyIdle 等）
  email: { remark: string; list: { type: 1 | 2; country: string; value: string }[] }; // type: 1=Email 2=Phone
}
// 特殊：message 无 type 但带 content.selectVehicles 时，视为"别的页面带了车辆 id 跳转过来"，只回填绑定车辆

📋 内置报警类型（alarmTypes 默认值）

📤 Events

📋 Methods Reference

无对外暴露方法（script setup 未 defineExpose）。每次 show 变为 true 时组件自动执行「重置全部内部状态 → 按 message 回填」，等价于销毁重建，宿主无需再用 v-if + 延时销毁来重置组件。

备注：

1. 只读用户（data.loginInfo.type === 3 或 4）下组件表现为只读，不可保存。
2. 未传 alarmTypes 时使用内置默认报警类型（见上表），各类型有对应的阈值配置表单。
3. vehicleDetail 锁定车辆仅在新增模式（isEdit 为 false）下生效。
4. 宿主约定：打开前先设置 message / vehicleDetail，再置 show = true（组件使用 pre-flush watch，同 tick 内设置即可生效）。
5. 编辑保存时组件会用 compareObjects2 对比原始 message，只把变更字段传给 saveNotificationFn；无变更时不调用保存方法。
6. 保存时若时间选择弹层 / tag-vehicle 选择弹层尚未关闭，第一次点击保存会先确认弹层内容，第二次点击才真正提交。
7. allowSmsAlarm 为 false 时，非 Door Status(20) / loadingUnloading(24) 类型的告警会过滤掉 Phone 接收人选项。