@cloud-app-dev/micro-basic-library
v1.8.4
Published
micro-basic-library 是通用接口、状态、方法服务,里面封装了如 "Dict" 字典类、“store” mobx 全局状态类、“shared”共享业务方法类、“LMConfig”配置类、“service”公共接口方法类,使用微应用脚手架构建项时目已默认安装,可直接使用。
Downloads
3
Keywords
Readme
简介
micro-basic-library 是通用接口、状态、方法服务,里面封装了如 "Dict" 字典类、“store” mobx 全局状态类、“shared”共享业务方法类、“LMConfig”配置类、“service”公共接口方法类,使用微应用脚手架构建项时目已默认安装,可直接使用。
Git 仓库地址:https://git.topvdn.com/micro-basic/micro-basic-library
依赖安装:
//示例为yarn安装,也可以使用npm安装
yarn add @zenview/micro-basic-library
使用示例:
//使用示例
import { BaseStore,LMConfig,Dict } from '@zenview/micro-basic-library';
function UserView(){
//Dict字典hooks使用 useDicts传入要获取的字典类code
const [sex, userStatus] = Dict.useDicts(['100000', '104400'])
//获取BaseStore下用户性别code 根据字典过滤出性别
const sexTetx = sex.find((v) => v.value === BaseStore.app.userInfo.userSex);
//调用系统配置
const text = 默认查询近{LMConfig.BSConfig.dataRetention}天
return <>{text}/性别:{sexTetx ||'男'}</>
}
LMConfig
配置信息公共类
代码演示
import { LMConfig } from '@zenview/micro-basic-library';
...
useEffect(() => {
//判断是否开启webSocket
LMConfig.BSConfig.openSocket && SocketEmitter.connect('/socket.io',null);
// 存放播放插件版本
sessionStorage.setItem('_APP_PLAY_VERSION', LMConfig.BSConfig.player.version)
}, []);
//获取地图配置中心点
const center = LMConfig.LMapConfig.layerOptions.center
...
API
type ConfigJOSN = { [key: string]: any };
export interface LMConfigInterface {
BSConfig: ConfigJOSN;
LMapConfig: ConfigJOSN;
}
declare const LMConfig: LMConfigInterface;
| 参数 | 说明 | | :--------: | :------: | | BSConfig | 系统配置 | | LMapConfig | 地图配置 |
Service
接口公共类
代码演示
import { Service } from '@zenview/micro-basic-library';
import { cache } from '@zenview/micro-utils';
Service.$http({
requestId: 'AlarmResult',
headers: {
Authorization: cache.getCache('token', 'session'),
},
url: '/handleAlarmResult',
data,
method: 'post',
requestId: 'handleAlarmResult',
})
.then((res) => {
Service.logger.save({
function: 105201,
module: 105200,
description: `查看重点人员布控告警信息,信息ID:${id}`,
});
return res;
})
.catch((e) => {
return Promise.reject(e);
});
API
export type loggerType = {
save(options: { description: string; module: string | number; function: string | number }, token?: string): Promise<any>;
};
export interface ServiceInterface {
$http(options: AxiosRequestConfig & { requestId?: string; cancelHttp?: (cancel: Function) => void }): Promise<any>;
$httpXMLInstance(options: AxiosRequestConfig & { requestId?: string; loggerIndex?: number }): Promise<any>;
$httpMultiPartInstance(options: AxiosRequestConfig): Promise<any>;
logger: loggerType;
}
declare const Service: ServiceInterface;
| 参数 | 说明 | | :--------------------: | :-----------------------------: | | $http | 基于 axios 封装的 ajax 请求方法 | | $httpXMLInstance | XML 请求方式 | | $httpMultiPartInstance | formData 文件传输请求 | | logger | 基于$http 封装的记录日志请求 |
Options
| 参数 | 说明 | 类型 | | :-------: | :------------------: | :----: | | url | 请求地址 | string | | headers | 请求偷 | any | | method | 请求方式 | string | | requestId | 请求接口对应唯一标识 | string |
Dict
字典存取公共类 注意:Dict 获取字典第一次输入的 code 因为是请求接口异步获取,所以 hook 方法在某些场景可能会出现获取后未响应的情况,可使用 useMemo 进行再次包裹监听:代码示例
代码演示
hooks 函数组件用法
class 装饰器用法
import { Dict } from '@zenview/micro-basic-library';
const dictCode = ['119100', '119113', '119104', '119109'];
//withDict写入要获取的字典类code
@Dict.withDict(dictCode)
class DeviceInfo extends React.Component {
constructor(props) {
super(props);
// props.dictMap 根据字典类code读取对应字典
if (props.dictMap) {
let arr = [];
for (const key of dictCode) {
props.dictMap[key] && (arr = [...arr, ...props.dictMap[key]]);
}
this.placeType = arr;
}
}
render() {
let { pathId = [] } = this.props;
const tagLabel = this.placeType.filter((v) => pathId.indexOf(v.code) > -1);
return <TagView tags={tagLabel} />;
}
}
device 类字典用法
import { Dict } from '@zenview/micro-basic-library';
...
//过滤摄像机类型
const cameraTypes = []
if (Dict.device.deviceType) {
const deviceType = Dict.device.deviceType;
deviceType
.filter((v) => v.value !== '-1' && v.value !== '100605')
.map((v) => {
let item = v.value.split(',');
if (item.length > 1) {
cameraTypes.push(item[0]);
cameraTypes.push(item[1]);
} else {
cameraTypes.push(v.value);
}
return cameraTypes;
});
}
/**根据设备类型和状态获取设备展示图标 */
const { znxj, qj, db, wifi, mj, wgsb, dz, xfs, znjg, qt } = Dict.device;
const { ptjk, rlzp, zpj, clzpj, qmbzpj, ydjc, qtzp } = Dict.device;
export const getCameraTypeIcon = (type, status) => {
const onLine = status * 1 === 1;
let option = {};
if (znxj.value === type) {
option.url = znqjimg;
option.color = !onLine ? '#ccc' : 'rgba(255, 156, 84, 1)';
option.bgColor = !onLine ? '#ccc' : '#29CCCC';
option.icon = 'icon-S_Point_Smart';
}
if (qj.value === type) {
option.url = qjimg;
option.color = !onLine ? '#ccc' : 'rgba(43, 153, 255, 1)';
option.bgColor = !onLine ? '#ccc' : '#29CCCC';
option.icon = 'icon-S_Point_Ball';
}
if (zpj.value === type) {
option.url = zpjimg;
option.color = !onLine ? '#ccc' : 'rgba(193, 100, 207, 1)';
option.bgColor = !onLine ? '#ccc' : '#29CCCC';
option.icon = 'icon-S_Point_Gun';
}
...
}
特殊情况处理示例
import React, { useMemo } from 'react';
import { Dict } from '@zenview/micro-basic-library';
import typeCode from '../../typeCode'
//hooks 中字典特殊情况处理
//字典code获取
const dictCode = (name)=>{
const obj = typeCode.find(v=>name===v.name)
return obj?.code ? obj.code : undefined
}
//表单组件赋值
function FormItems({ onChange, value, item, isInfo }) {
const code = dictCode(item.dict)
const useDict = Dict.useDict(item.dicType === 'local'? code : undefined)
//判断字典获取方式'local'本地读取,'url'请求接口,'setting'手动配置
const dicfilter = useMemo(() => {
if (item.dicType) {
switch (item.dicType) {
case 'setting':
return item.dicData;
case 'local':
return useDict
case 'url':
return [];
default:
return [];
}
} else {
return item.dicData || [];
}
}, [item.dicType,item.dicData,useDict]);
...
}
API
interface DictItem {
label: string;
code: string;
id: string;
icon: string;
}
interface DeviceDict {
deviceStatus: Array<DictItem>;
deviceLocation: Array<DictItem>;
cameraType: Array<DictItem>;
cameraDeviceType: Array<DictItem>;
cameraAndSoldierType: Array<DictItem>;
deviceAndMjType: Array<DictItem>;
deviceType: Array<DictItem>;
[key: string]: DictItem;
}
declare type IReactComponent<P = any> = React.ClassicComponentClass<P> | React.ComponentClass<P> | React.FunctionComponent<P> | React.ForwardRefExoticComponent<P>;
declare type IWrappedComponent<P> = {
wrappedComponent: IReactComponent<P>;
};
interface DictMapProps {
dictMap: { [key: string]: Array<DictItem> };
}
export interface DictInterface {
useDict(typeCode: string | number): Array<DictItem & any>;
useTypeCodes(): Array<DictItem & any>;
useDicts(typeCodes: Array<string | number>): Array<Array<DictItem & any>>;
device: DeviceDict;
withDict(code: Array<string | number>): <T extends IReactComponent<any>>(target: T) => T & (T extends IReactComponent<infer P & DictMapProps> ? IWrappedComponent<P & DictMapProps> : never);
withTypeCodes<T extends IReactComponent>(component: T): T;
}
declare const Dict: DictInterface;
| 参数 | 说明 | | :-----------: | :--------------------------: | | useDict | code 获取单个字典 hooks | | useDicts | codes 批量获取字典 hooks | | withDict | 装饰器 codes 批量获取字典 | | device | 设备类字典 | | useTypeCodes | 获取结构化信息类型字典 hooks | | withTypeCodes | 装饰器获取结构化信息类型字典 |
BaseStore
全局状态管理 注意:BaseStore 类中方法使用方式分为 import 引入和 mobx 注入两种,对应不同使用场景,import 引入在数据状态全局更新时 不会触发重新渲染,mobx 反之。
代码演示
//应用组件外层注入BaseStore 同mobx使用方法
import { BaseStore } from '@zenview/micro-basic-library';
<Provider {...BaseStore}>...</Provider>;
//组件中mobx方式使用 以下为函数组件参考,class组件请参考mobx API
import { inject, observer } from 'mobx-react';
function OrgView({org}){...}
export default inject('org')(observer(OrgView));
import { BaseStore } from '@zenview/micro-basic-library';
//组件中BaseStore引用方式使用
function BaseInfo() {
const userInfo = BaseStore.app.userInfo;
}
API
export interface BaseStoreInterface {
device: typeof DeviceStore;
org: typeof OrgStore;
place: typeof PlaceStore;
app: typeof AppStore;
auth: typeof AuthStore;
}
| 参数 | 说明 | | :----: | :--------: | | app | 用户信息类 | | auth | 菜单权限类 | | device | 设备信息类 | | org | 组织信息类 | | place | 场所信息类 |
app
用户信息全局状态
代码演示
//示例为mobx方式
import { inject, observer } from 'mobx-react';
function MenuView({app}) {
...
return (
<div className="title">
<p>您好{app.userInfo?.loginName},欢迎来到</p>
<h3>{app.systemConfig?.systemName}</h3>
</div>
)
}
export default inject('app')(observer(MenuView));
API
export interface UserInfo {
loginName: string;
id: string;
operationCenterId: string;
organizationId: string;
phoneNum: string;
realName: string;
roleIds: Array<string>;
systemLogo: string;
userGrade: string;
userSource: string;
userType: string;
validStartTime: string;
validEndTime?: string;
validState: string;
mobile: string;
email?: string;
userSex: string;
identityCardNum: string;
telephone?: string;
addressCode?: string;
}
export interface AppInfo {
centerPoint: string;
centerType: string;
id: string;
isHideLogo: string;
operationCenterName: string;
sceneCode: string;
sceneType: string;
systemLogoUrl: string;
userInitialPassword: string;
zoomLevelCenter: string;
}
export interface SystemConfig {
centerPoint: string;
domainAddress: string;
systemLogo: string;
systemName: string;
zoomLevelCenter: string;
}
export interface AppStoreInterface {
isLogin: boolean;
appInfo: AppInfo;
userInfo: UserInfo;
systemConfig: SystemConfig;
updateLoginStatus: (loginStatus: boolean) => void;
}
declare const AppStore: AppStoreInterface;
| 参数 | 说明 | | :---------------: | :----------: | | isLogin | 获取登录状态 | | appInfo | 用户登录信息 | | userInfo | 用户信息 | | systemConfig | 用户系统信息 | | updateLoginStatus | 更新登录状态 |
auth
用户信息全局状态
代码演示
//示例为BaseStore方式
import { BaseStore } from '@zenview/micro-basic-library';
function MenuView() {
const {auth} = BaseStore
const menuList = auth.userMenuList.filter((v) => v.type !== 0);
const isBool= auth.getInfoByName(item.id));
}
API
export interface FeatureItem {
code: number;
parentCode?: number;
id: string;
sort: number;
name: string;
isMenu: number;
alias: string;
routeUrl: string;
requestParam?: string;
microApplicationId: string;
applicationSystemId: string;
}
export const authStore: { dataMap: Map<string, FeatureItem>; nameToCode: Map<string, number>; codeToName: Map<number, string> };
export interface AuthStoreInterface {
userMenuList: Array<FeatureItem>;
userAuthList: Array<FeatureItem>;
isAuth(name: string): boolean;
getInfoByCode(code: number): FeatureItem;
getInfoByNames(names: string[]): Array<FeatureItem>;
getInfoByName(name: string): FeatureItem;
}
declare const AuthStore: AuthStoreInterface;
| 参数 | 说明 | | :------------: | :---------------------------------: | | userMenuList | 用户菜单列表 | | userAuthList | 用户菜单及功能全列表 | | isAuth | 根据别名判断是否有权限 | | getInfoByCode | 根据 code 返回当前菜单功能信息 | | getInfoByNames | 根据 codes 批量返回当前菜单功能信息 |
device
设备信息全局状态
代码演示
import { BaseStore } from '@zenview/micro-basic-library';
//
const deviceList = BaseStore.device.deviceList;
const currentList = BaseStore.device.queryDeviceByIncludeOrgId(id);
API
export type DeviceItemType = {
abilityIds: [];
cameraOrientationCode: string;
cameraType: string;
cid: string;
deviceName: string;
deviceStatus: '0' | '1';
deviceType: string;
hasFrontEnd: boolean;
hasStorage: boolean;
id: string;
latitude: string;
longitude: string;
lygroupId: string;
manufacturerDeviceId: string;
manufacturerDeviceType: string;
organizationIds: Array<string>;
parentId: string;
placeId: string;
sn: string;
};
export const deviceStore: {
dataMap: Map<string, DeviceItemType>;
idToCid: Map<string, string>;
cidToId: Map<string, string>;
};
export interface DeviceStoreInterface {
cameraList: Array<DeviceItemType>;
deviceList: Array<DeviceItemType>;
initSetDevices(mapData: { [key: string]: DeviceItemType }): void;
updateSingleDevice(info: DeviceItemType & { deviceId: string; type: number }): void;
updateMutipleDevice(infos: Array<DeviceItemType & { deviceId: string; type: number }>): void;
getDeviceById(id: string): DeviceItemType | undefined;
getDeviceByCId(cid: string): DeviceItemType | undefined;
getDeviceByIds(ids: string[]): Array<DeviceItemType>;
getDeviceByCIds(cids: string[]): Array<DeviceItemType>;
getListByIdsOrCids(idOrCids: string[]): Array<DeviceItemType>;
queryCameraByIncludeOrgId(orgId: string, cameraList?: Array<DeviceItemType>);
queryDeviceByIncludeOrgId(orgId: string, deviceList?: Array<DeviceItemType>);
queryCameraByIncludePlaceId(placeId: string, cameraList?: Array<DeviceItemType>);
}
declare const DeviceStore: DeviceStoreInterface;
| 参数 | 说明 | | :-------------------------: | :----------------------------: | | cameraList | 摄像机列表 | | deviceList | 设备列表 | | initSetDevices | 初始化设备 | | updateSingleDevice | 单个更新设备 | | updateMutipleDevice | 批量更新设备 | | getDeviceById | 单个 ID 获取设备信息 | | getDeviceByCId | 单个 CID 获取设备信息 | | getDeviceByIds | IDS 批量获取设备信息 | | getDeviceByCIds | CIDS 批量获取设备信息 | | getListByIdsOrCids | 获取批量设备信息 | | queryCameraByIncludeOrgId | 查询组织下摄像机列表(含子组织) | | queryDeviceByIncludeOrgId | 查询组织下设备列表(含子组织) | | queryCameraByIncludePlaceId | 查询场所下设备列表(含子组织) |
org
用户组织信息全局状态
代码演示
import { inject, observer } from 'mobx-react';
import { BaseStore } from '@zenview/micro-basic-library';
import { treeHelper } from '@zenview/micro-utils';
function OrgTreeView({org,id}) {
const treeData = treeHelper.computTreeList(org.orgList)
const title = BaseStore.org.getOrgTreeText(id);
...
}
export default inject('org')(observer(OrgTreeView));
API
export interface OrgItemType {
createTime: string;
id: string;
orgSort: number;
parentId: string;
type: string;
name: string;
}
export const orgStore: { dataMap: Map<string, OrgItemType> };
export interface OrgStoreInterface {
orgList: Array<OrgItemType>;
orgListWithCameraCount: Array<OrgItemType>;
initSetOrgData(orgList: Array<OrgItemType>): void;
updateSingleOrg(org: OrgItemType): void;
queryOrgIdsForParentOrgId(orgId: string, ids?: Array<string>, orgList?: Array<OrgItemType>): Array<string>;
getOrgInfoByOrgId(orgId: string): OrgItemType;
getOrgTreeText(orgId: string): string;
getParentOrgListByOrgId(orgId: string, list?: Array<OrgItemType>, orgList?: Array<OrgItemType>);
getOrgListCount(orgList?: Array<OrgItemType>, deviceList: Array<Device>);
}
declare const OrgStore: OrgStoreInterface;
| 参数 | 说明 | | :-----------------------: | :----------------------: | | orgList | 组织列表 | | orgListWithCameraCount | 包含像机数量组织列表 | | initSetOrgData | 初始化组织 | | updateSingleOrg | 更新组织数据 | | queryOrgIdsForParentOrgId | 获取组织下的所有组织 id | | getOrgInfoByOrgId | 单个 ID 获取组织信息 | | getOrgTreeText | 格式化获取父组织名称 | | getParentOrgListByOrgId | 根据 id 获取所有父级组织 | | getOrgListCount | 获取组织下设备数量 |
place
场所信息全局状态
代码演示
import { inject, observer } from 'mobx-react';
@inject('place')
@observer
class PlaceTree extends React.Component {
...
onChange = (value) => {
const { place } = this.props;
const placeList = place.placeList.filter((v) => v.name.indexOf(value) > -1);
};
...
}
export default PlaceTree;
API
export type PlaceItemType = {
areaCode: string;
areaName: string;
center: string;
hasDevice: boolean;
id: string;
level: number;
name: string;
parentCode: string;
placeId: string;
pcodes?: Array<string>;
provinceId: string;
placeInfoUrl?: string;
};
export const placeStore: { dataMap: Map<string, PlaceItemType>; idToCode: Map<string, string>; codeToId: Map<string, string> };
export interface PlaceStoreInterface {
placeList: Array<PlaceItemType>;
placeListWithCameraCount: Array<PlaceItemType>;
placeListWithDeviceCount: Array<PlaceItemType>;
updateMutiplePlace(list: Array<PlaceItemType>): void;
initSetPlaceData(list: Array<PlaceItemType>): void;
getPlaceInfoByCode(code: string): PlaceItemType;
getPlaceInfoByCodes(codes: string[]): Array<PlaceItemType>;
getPlaceInfoById(id: string): PlaceItemType;
getPlaceInfoByIds(ids: string[]): Array<PlaceItemType>;
getCodesForIds(ids: string[]): Array<string>;
getIdsForCodes(codes: string[]): Array<string>;
getPlaceListForIdsOrCodes(idOrCodes: string[]): Array<string>;
getPlaceCodesWithParent(areaCode: string, areaCodes?: string[]): Array<string>;
getPlaceCodesWithChild(areaCode: string, areaCodes?: string[], placeList?: Array<PlaceItemType>): Array<string>;
queryChildPlaceForLevel(areaCode: string, level: number, list?: PlaceItemType[], placeList?: PlaceItemType[]): PlaceItemType[];
getParentPlaceListByCode(areaCode: string, list?: PlaceItemType[], placeList?: PlaceItemType[]): PlaceItemType[];
getPlaceListDeviceCount(placeList: PlaceItemType[], deviceList: Device[], type: string);
}
declare const PlaceStore: PlaceStoreInterface;
| 参数 | 说明 | | :-----------------------: | :------------------------: | | placeList | 场所列表 | | placeListWithCameraCount | 包含像机数量场所列表 | | placeListWithDeviceCount | 包含设备数量场所列表 | | updateMutiplePlace | 更新场所数据 | | initSetPlaceData | 初始化场所数据 | | getPlaceInfoByCode | code 单个获取详细信息 | | getPlaceInfoByCodes | codes 批量获取详细信息 | | getPlaceInfoById | id 单个获取详细信息 | | getPlaceInfoByIds | ids 批量获取详细信息 | | getCodesForIds | id areaCode 转换 | | getPlaceListForIdsOrCodes | id areaCode 转换 | | getPlaceCodesWithParent | 获取场所下的所有场所 codes | | getPlaceCodesWithChild | 根据 code 获取所以子场所 | | queryChildPlaceForLevel | 获取场所下的所有场所 id | | getParentPlaceListByCode | 根据 code 获取所有父级场所 | | getPlaceListDeviceCount | 计算场所设备 |
Shared
公共共享方法
代码演示
import { Shared } from '@zenview/micro-basic-library';
//跳转人脸图库
Shared.jumpFaceLibrary({ this.props.history, cids: ['121234'] });
//发起视频下载审批
Shared.downloadVideo(options)
API
interface jumpFaceLibrary {
history: H.History<any>;
[propName: string]: any;
}
interface jumpParm {
history: H.History<any>;
defaultItem?: any;
defaultUrl?: string;
frameUrl?: string;
rects?: RectType;
feature?: string;
id?: string;
imgId?: string;
startTime?: string;
endTime?: string;
score?: number;
cids?: Array<string>;
aids?: Array<string>;
type?: string;
}
interface jumpLibraryDetail<T> {
history: H.History<any>;
list: Array<T>;
data?: any;
currentId: string;
searchUrl?: string; //搜图传url
type: 'faceDetail' | 'bodyDetail' | 'faceSearchDetail' | 'bodySearchDetail' | 'vehicleDetail' | 'nonVehicleDetail';
beforeAction?: () => void;
}
interface jumpTrajectory<T> {
history: H.History<any>;
list: Array<T>;
type: 'faceTrajectory' | 'bodyTrajectory' | 'vehicleTrajectory' | 'nonVehicleTrajectory';
}
interface queryVehicleTrajectoryPictures<T> {
history: H.History<any>;
data: any;
type: 'queryVehicleTrajectoryPictures';
}
interface jumpVehicleSearch<T> {}
interface jumpNonVehicleSearch<T> {}
interface downloadVideo<T> {
startTime: string;
endTime: string;
fileData: {
id?: string | number;
cid?: string | number;
title?: string;
deviceName?: string;
[properName: string]: any;
};
HistoryService?: (data: any) => Promise<any>;
onError?: (msg: string) => void;
}
interface formatRectInfo<T> {
structuredInfo: any;
dicts: any;
id: string;
typeCodes: any;
}
export interface SharedInterface {
jumpFaceLibrary: jumpFaceLibrary;
jumpBodyLibrary: jumpFaceLibrary;
jumpFaceSearch: jumpParm;
jumpFaceRecord: jumpParm;
jumpBodySearch: jumpParm;
jumpBodyRecord: jumpParm;
jumpLibraryDetail: jumpLibraryDetail;
jumpTrajectory: jumpTrajectory;
queryVehicleTrajectoryPictures: queryVehicleTrajectoryPictures;
jumpCameraSnapshot: jumpFaceLibrary;
jumpVehicleSearch: jumpVehicleSearch;
jumpNonVehicleSearch: jumpNonVehicleSearch;
jumpVehicleLibrary: any;
jumpNonVehicleLibrary: any;
resourcePageInfo: any;
handleResourceListParams: any;
downloadVideo: downloadVideo;
formatRectInfo: formatRectInfo;
}
declare const Shared: SharedInterface;
| 参数 | 说明 | | :------------: | :--------------: | | jump**** | 跳转类方法 | | downloadVideo | 发起视频下载审批 | | formatRectInfo | 结构化信息 tag |