anytrek-front-public-component 1.3.49 → 1.3.51

package/README.md

@@ -16,6 +16,7 @@ app.use(frontPublicComponent);
 ```
 
 ## 🧩 Component: `<anytrekTimerangePick>`
+Select a time range
 
 ```vue
 <anytrekTimerangePick
@@ -72,4 +73,117 @@ function onRangeChange(start: string, end: string, tz: string) {
 | `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'}]` |
+| `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'}]` |
+
+## 🧩 Component: `<anytrekTimePick>`
+Select a time
+
+```vue
+<anytrekTimePick
+  v-model:value="anytrekTimePickValue"
+  v-model:timeZone="anytrekTimePickTimeZone"
+  v-model:visible="anytrekTimePickVisible"
+  :immediate="true"
+  @change="timeChange"
+/>
+```
+
+### 🔧 Example Setup
+
+```ts
+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` |
+
+## 🧩 Component: `<vehicle-select>`
+Viewing and selecting vehicles
+
+```vue
+<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
+
+```ts
+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` | `接口返回的原始数据(包含数组：tagList,deviceStatusList,vehicleDeviceList,landmarkDeviceList,landmarkList,vehicleType,deviceList,vehicleList,landmarkGroupList)` | `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` |
+
+## 📋 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` | `触发埋点` | `参数为一个（是具体触发的埋点名称）` |