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

| 参数名称 | 描述 | 数据类型 | 默认值 | | ---------- | --------------------- | ---------------- | ------------------- | | value | 当选择快捷选项时，这个字段是数量。value为1，valueType为'month'时表示选择的时间段为从现在开始往前推一个月到现在，当自定义时间时这个字段固定为'custom'。 | custom \| '' \| number | 'custom' | | valueType | 快捷选项的单位(当value值为custom时，这个字段无效) | hour \| day \| week \| month \| quarter \| year | '' | | startTime | 开始时间 | String | '' | | endTime | 结束时间 | String | '' | | valueFormat | startTime、endTime值的格式(如果自定义这个格式没有带上小时，则认为是只选择日期，此时showFormat也应该不带小时及以后部分) | String | YYYY-MM-DDTHH:mm:ssZ | | showFormat | startTime、endTime显示格式 | String | YYYY-MM-DD HH:mm | | timeZone | 时区 | String | 当前网页时区(当needNowTimeZone为false时，timeZone默认取PST) | | visible | popover弹框的展示与否 | Boolean | false | | teleported | 将popover弹框插入至 body 元素 | Boolean | true | | disabled | 禁用选择器 | Boolean | false | | showQuick | 是否显示快捷选项 | Boolean | true | | hourList | 小时快捷选项 | Number[] | [] | | dayList | 天快捷选项 | Number[] | [] | | weekList | 周快捷选项 | Number[] | [1, 2] | | monthList | 月快捷选项 | Number[] | [1] | | quarterList | 季度快捷选项 | Number[] | [] | | yearList | 年快捷选项 | Number[] | [] | | disabledDate | 最多可以选择多少天 | Number | 31 | | immediate | 是否需要开始时执行一次change事件 | Boolean | false | | needNowTimeZone | 是否需要在时区列表显示当前网页时区 | Boolean | true | | haveRangSwitch | 是否需要左右进行区间移动 | Boolean | false | | needMaxIndex | 是否需要弹框在最上层 | Boolean | false | | timeZoneList | 时区选项 | Object[] | [{value:'PST',label:'PST'},{value:'PDT',label:'PDT'},{value:'MST',label:'MST'},{value:'MDT',label:'MDT'},{value:'CST',label:'CST'},{value:'CDT',label:'CDT'},{value:'EST',label:'EST'},{value:'EDT',label:'EDT'},{value:'AST',label:'AST'},{value:'ADT',label:'ADT'},{value:'AKST',label:'AKST'},{value:'AKDT',label:'AKDT'}] | | unlinkPanels | 是否取消两个日期面板之间的联动 | Boolean | true | | isLast | 默认快捷选项都是最近一天，最近一年，要想设置成当天、当月就得把这个值改成false | Boolean | true | | showTimeZoneChoose | 是否允许选择时区 | Boolean | true | | disableDayFuntion | 一个用来判断该日期是否被禁用的函数，接受一个Date对象作为参数。 应该返回一个Boolean值。 | (date:String,tz:String ) => Boolean | | | disableHourFuntion | 禁止选择部分小时选项。数组内有效的值为0-23 | (date:String,tz:String ) => Number[] | | | disableMinuteFuntion | 禁止选择部分分钟选项。数组内有效的值为0-59 | (date:String,hour:String,tz:String ) => Number[] | | | showTime | 没选时间时默认指定哪个月份（最好为15号） | YYYY-MM-DDTHH:mm:ssZ | | | quarterMessage | 当前只能选择哪个季度（季度值取1、2、3、4） | { year: Number, quarter: Number } | | | assetTimeList | 资产利用率数据数组 | { startTime: Number(时间戳或者YYYY-MM-DDTHH:mm:ssZ), endTime: Number(时间戳或者YYYY-MM-DDTHH:mm:ssZ) } | |

🧩 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

| 参数名称 | 描述 | 数据类型 | 默认值 | | ---------- | --------------------- | ---------------- | ------------------- | | value | 选择的时间值 | String | '' | | valueFormat | value 值的格式(如果自定义这个格式没有带上小时，则认为是只选择日期，此时showFormat也应该不带小时及以后部分) | String | YYYY-MM-DDTHH:mm:ssZ | | showFormat | value 显示格式 | String | YYYY-MM-DD HH:mm | | timeZone | 时区 | String | 当前网页时区(当needNowTimeZone为false时，timeZone默认取PST) | | visible | popover弹框的展示与否 | Boolean | false | | teleported | 将popover弹框插入至 body 元素 | Boolean | true | | disabled | 禁用选择器 | Boolean | false | | immediate | 是否需要开始时执行一次 change事件 | Boolean | false | | disableFuntion | 一个用来判断该日期是否被禁用的函数，接受一个Date对象作为参数。 应该返回一个Boolean值。 | (date:String,tz:String ) => Boolean | | | needNowTimeZone | 是否需要在时区列表显示当前网页时区 | Boolean | true | | needMaxIndex | 是否需要弹框在最上层 | Boolean | false | | showTimeZoneChoose | 是否允许选择时区 | Boolean | true | | showTime | 没选时间时默认指定哪个月份（最好为15号） | YYYY-MM-DDTHH:mm:ssZ | | | quarterMessage | 当前只能选择哪个季度（季度值取1、2、3、4） | { year: Number, quarter: Number } | |

🧩 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

| 参数名称 | 描述 | 数据类型 | 默认值 | | ---------- | --------------------- | ---------------- | ------------------- | | keyword | 搜索的关键字，用此字段搜索车辆/设备（右上角搜索框） | String | '' | | loading | 加载中，做状态显示，只要为true，就会出现一层盖在上面的遮罩(第一次loading变成false时，会去合并data中的数据，所以必须在请求到data中的数据之后置为false) | Boolean | true | | data | 接口返回的原始数据(见下方备注) | Object | {} | | sortKey | 排序规则(默认A->Z排序。可选值(driving,idle,waring,offline,battery,last,create,asc,desc)) | String | asc | | modleList | 如果需要只筛选某些型号的设备及其关联的车辆，可以将型号Id加入这个数组 | Number[] | [](比如只想显示型号为2002和2310的设备及其关联的车辆，可以传[37, 54];如果只想显示型号为2308的设备，可以传[62]) | | vehicleId | 当前选择的车辆ID(如果匹配不上，会默认到第一辆车)(外部改变选择的车辆/设备靠这个参数和下面的deviceId) | Number | 0 | | deviceId | 当前选择的设备ID(如果上述vehicleId为0且deviceId有值时才生效)(外部改变选择的车辆/设备靠这个参数和上面的vehicleId) | Number | 0 | | immediate | 当vehicleId和deviceId都为0时是否需要选择第一辆车 | Boolean | false | | align | | String | middle | | retract | 外面控制组件关闭的功能 false 打开 true关闭 | Boolean | false | | clikcOutRetract | 是否开启点击组件外部关闭组件的功能 false 关闭 true 打开 | Boolean | false | | showLoading | 整个组件上方显示加载样式(只做样式控制) | Boolean | false | | haveBorderRadius | 四个角是否有圆角 | Boolean | false | | haveLeftBorder | 是否有左边框 | Boolean | false | | isArray | 选择是否以数组的方式进行 | Boolean | false | | vehicleArray | isArray为true时绑定的值，每一项为{ vehicleId：xxx, deviceId: 0, isChoose: Boolean }或者{ vehicleId：0, deviceId: xxx, isChoose: Boolean } | Object[] | [] | | vehicleMaxlength | isArray为true时最多同时选择的车辆数量 | Number | 3 | | showAllName | 收起来之后显示全称 | Boolean | false | | clickToMdvr | 点击跳到mdvr界面 | Function | | | useCompleteVehicleScope | 是否显示全部车辆（此时不显示设备） | Boolean | false |

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

📋 Events Reference

| 事件名 | 描述 | 备注 | | -------- | --------------------- | ----------------- | | clickItem | 通过监听此事件得知车辆/设备选择变化 | 参数为两个（第一个为{vehicleId: xxx,deviceId: xxx},第二个为选择的车辆/设备信息） | | chooseItem | 只有点击车辆后会触发 | 参数为两个（第一个为{vehicleId: xxx,deviceId: xxx},第二个为选择的车辆/设备信息） | | onlyClickChange | 只有点击车辆后会触发 | 参数为两个（第一个为{vehicleId: xxx,deviceId: xxx},第二个为选择的车辆/设备信息） | | clickLandmarkOrTag | 点击tag或者landmark（关闭/打开）触发 | 参数为三个（1.tag/landmark,2.是否关闭,3.选择的tag/landmark信息） | | eventTracking | 触发埋点 | 参数为一个（是具体触发的埋点名称） | | changeArray | isArray为true时车辆选择变化时触发 | 参数为两个（第一个为{vehicleId: xxx,deviceId: xxx}数组,第二个为选择的车辆/设备信息数组） |

🧩 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

| 参数名称 | 描述 | 数据类型 | 默认值 | | ---------- | --------------------- | ---------------- | ------------------- | | drawerShow | 控制drawer的显示和隐藏 | Boolean | false | | loginInfo | 用户信息，包含用户的type和customerId | Object | {} | | customerHabit | 用户的偏好设置，包含localTimezone、timeZone | Object | {} | | vehicleData | 新增/编辑的车辆，编辑是需要传id | Object | { } | | allAssetTypes | 资产类型列表 | Array | [] | | allVehicles | 车辆列表 | Array | [] | | allDevices | 设备列表 | Array | [] | | modelTypes | 设备类型列表 | Object | {} | | 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 | | | conDetSensorList | 传感器列表 | Array | [] | | needConDetSensor | 是否显示集装箱检测传感器功能 | Boolean | true |

🧩 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

| 参数名称 | 描述 | 数据类型 | 默认值 | | ---------- | --------------------- | ---------------- | ------------------- | | drawerShow | 控制drawer的显示和隐藏 | Boolean | false | | loginInfo | 用户信息，包含用户的type和customerId | Object | {} | | customerHabit | 用户的偏好设置，包含localTimezone、timeZone | Object | {} | | itemData | 新增/编辑的tag，编辑是需要传id | Object | { } | | allVehicles | 车辆列表 | Array | [] | | allDevices | 设备列表 | Array | [] | | modelTypes | 设备类型列表 | Object | {} | | 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 | | | conDetSensorList | 传感器列表 | Array | [] | | needConDetSensor | 是否显示集装箱检测传感器功能 | Boolean | true |

🧩 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

| 参数名称 | 描述 | 数据类型 | 默认值 | | ---------- | --------------------- | ---------------- | ------------------- | | 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 | |

🧩 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

| 参数名称 | 描述 | 数据类型 | 默认值 | | ---------- | --------------------- | ---------------- | ------------------- | | modelValue | 控制drawer的显示和隐藏 | Boolean | false | | readOnly | 是否只看 | Boolean | false | | data | 接口返回的原始数据(包含数组：tagList,deviceStatusList,vehicleDeviceList,landmarkDeviceList,landmarkList,vehicleType,deviceList,vehicleList,landmarkGroupList) | Object | {} | | itemData | 新增/编辑的share | Object | {} | | getShareHistoryUrl | 获取分享的历史logo | Function | | | uploadShareFile | 上传logo | Function | | | saveFunctionShare | share保存 | Function | | | loginInfo | 登录信息 | Object | {} | | assetTypeFn |资产类型新增/删除方法 | Function | | | bindDeviceHis |车辆绑定历史记录 | Function | | | deviceBindTimeLimit | 设备绑定时间限制 | Function | | | saveFunctionVehicle | 车辆保存 | Function | | | saveFunctionTag | tag保存 | Function | | | unitAllState | 城市列表 | Array | [] | | GOOGLE_MAP_API_KEY | 地图apikey | String | | | MAP_STYLES | 地图样式 | Array | [] | | searhTrimblemapAddress |查询地址api | Function | | | saveFunctionLandmark | landmark保存 | Function | | | nowChooseVehicleId | 当前选择的车辆id | Number | |