anytrek-front-public-component 1.4.15 → 1.4.17

package/README.md

@@ -192,4 +192,305 @@ onMounted(() => {
 | `chooseItem` | `只有点击车辆后会触发` | `参数为两个（第一个为{vehicleId: xxx,deviceId: xxx},第二个为选择的车辆/设备信息）` |
 | `onlyClickChange` | `只有点击车辆后会触发` | `参数为两个（第一个为{vehicleId: xxx,deviceId: xxx},第二个为选择的车辆/设备信息）` |
 | `clickLandmarkOrTag` | `点击tag或者landmark（关闭/打开）触发` | `参数为三个（1.tag/landmark,2.是否关闭,3.选择的tag/landmark信息）` |
-| `eventTracking` | `触发埋点` | `参数为一个（是具体触发的埋点名称）` |
+| `eventTracking` | `触发埋点` | `参数为一个（是具体触发的埋点名称）` |
+
+
+## 🧩 Component: `<addOrEditVehicle>`
+add or edit vehicle
+
+```vue
+<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"
+  ></add-or-edit-vehicle>
+```
+
+### 🔧 Example Setup
+```ts
+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();
+};
+```
+
+## 📋 Props Reference
+| 参数名称    | 描述                  | 数据类型          | 默认值              |
+| ---------- | --------------------- | ---------------- | ------------------- |
+| drawerShow | 控制drawer的显示和隐藏 | `Boolean` | false |
+| loginInfo | 用户信息，包含用户的type和customerId | `Object` | {} |
+| customerHabit | 用户的偏好设置，包含localTimezone、timeZone | `Object` | {} |
+| vehicleData | 新增/编辑的车辆 | `Object` | {
+    id: row.id,
+    name: row.name,
+    deviceId: row.deviceId,
+    dataTime: '',
+    tagContent: row.tagContent,
+    assetType: row.assetType,
+    newIcon: row.newIcon,
+    vehicleTypeId: row.vehicleTypeId,
+    make: row.make,
+    year: row.year,
+    licensePlateNumber: row.licensePlateNumber,
+    vin: row.vin,
+    description: row.description,
+  } |
+| allAssetTypes | 资产类型列表 | `Array` | [] |
+| allVehicles | 车辆列表 | `Array` | [] |
+| allDevices | 设备列表 | `Array` | [] |
+| modelTypes | 设备类型列表 | `Array` | [] |
+| allVehicleToDevice | 车辆设备绑定关系列表 | `Array` | [] |
+| allTags | tag列表 | `Array` | [] |
+| assetTypeFn |资产类型新增/删除方法 | `Function` |  |
+| bindDeviceHis |车辆绑定历史记录 | `Function` |  |
+| deviceBindTimeLimit | 设备绑定时间限制 | `Function` |  |
+| saveFunctionVehicle | 车辆保存 | `Function` |  |
+| allLandmarks | landmark列表 | `Array` | [] |
+| landmarkGroup | landmarkGroup列表 | `Array` | [] |
+| saveFunctionTag | tag保存 | `Function` |  |
+| unitAllState | 城市列表 | `Array` | [] |
+| GOOGLE_MAP_API_KEY | 地图apikey | `String` | |
+| MAP_STYLES | 地图样式 | `Array` | [] |
+| searhTrimblemapAddress |查询地址api | `Function` |  |
+| saveFunctionLandmark | landmark保存 | `Function` |  |
+
+
+## 🧩 Component: `<addOrEditTag>`
+add or edit tag
+
+```vue
+<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"
+  ></add-or-edit-tag>
+```
+
+### 🔧 Example Setup
+```ts
+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
+| 参数名称    | 描述                  | 数据类型          | 默认值              |
+| ---------- | --------------------- | ---------------- | ------------------- |
+| drawerShow | 控制drawer的显示和隐藏 | `Boolean` | false |
+| loginInfo | 用户信息，包含用户的type和customerId | `Object` | {} |
+| customerHabit | 用户的偏好设置，包含localTimezone、timeZone | `Object` | {} |
+| itemData | 新增/编辑的tag | `Object` | {
+    id: eleForm.id,
+    name: eleForm.name,
+    description: eleForm.description,
+    content: {
+      vehicle: vehicle,
+      device: device,
+      tag: tag,
+      landmark: landmark,
+    },
+  } |
+| allVehicles | 车辆列表 | `Array` | [] |
+| allDevices | 设备列表 | `Array` | [] |
+| modelTypes | 设备类型列表 | `Array` | [] |
+| allVehicleToDevice | 车辆设备绑定关系列表 | `Array` | [] |
+| allTags | tag列表 | `Array` | [] |
+| allLandmarks | landmark列表 | `Array` | [] |
+| landmarkGroup | landmarkGroup列表 | `Array` | [] |
+| saveFunctionTag | tag保存 | `Function` |  |
+| assetTypeFn |资产类型新增/删除方法 | `Function` |  |
+| bindDeviceHis |车辆绑定历史记录 | `Function` |  |
+| deviceBindTimeLimit | 设备绑定时间限制 | `Function` |  |
+| saveFunctionVehicle | 车辆保存 | `Function` |  |
+| unitAllState | 城市列表 | `Array` | [] |
+| GOOGLE_MAP_API_KEY | 地图apikey | `String` | |
+| MAP_STYLES | 地图样式 | `Array` | [] |
+| searhTrimblemapAddress |查询地址api | `Function` |  |
+| saveFunctionLandmark | landmark保存 | `Function` |  |
+
+
+## 🧩 Component: `<addOrEditLandmark>`
+add or edit landmark
+
+```vue
+<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
+```ts
+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
+| 参数名称    | 描述                  | 数据类型          | 默认值              |
+| ---------- | --------------------- | ---------------- | ------------------- |
+| drawerShow | 控制drawer的显示和隐藏 | `Boolean` | false |
+| itemData | 新增/编辑的landmark | `Object` |  |
+| unitAllState | 城市列表 | `Array` | [] |
+| GOOGLE_MAP_API_KEY | 地图apikey | `String` | |
+| MAP_STYLES | 地图样式 | `Array` | [] |
+| allLandmarkGroup | landmarkGroup列表 | `Array` | [] |
+| searhTrimblemapAddress |查询地址api | `Function` |  |
+| saveFunctionLandmark | landmark保存 | `Function` |  |
+| @addGroup | 新增group | `Function` | |