@zenview/micro-basic-library

简介

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