npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

platform-infospace

v1.4.0

Published

## components 公共组件

Readme

项目目录

components 公共组件

numberRange 组件

筛选数字范围组件 一般用于搜索里面 (注: 搜索需要搭配 config 里面的 handleSearchQuery 方法一起用,可在项目里参考其他页面用到的方式)

numberRange 属性

| 属性 | 说明 | 类型 | 可选项 | 默认 | | --------------- | ------ | ----- | ------ | ---- | | value/v-model | 绑定值 | Array | - | - |

relevance 组件

tabs 标签已关联未关联组件 应用于原型是已关联未关联业务页面

relevance 属性

| 属性 | 说明 | 类型 | 可选项 | 默认 | | --------------- | -------------------------- | ------- | ------ | ---- | | dialogConfig | sc-dialog 配置 | Object | - | - | | dialogVisible | 是否显示,支持.sync 修饰符 | Boolean | - | - | | tabConfig | tab 配置 | Array | - | - |

tabConfig 配置说明

| 属性 | 说明 | 类型 | 可选项 | 默认 | | --------------- | -------------------------- | ------ | ------------------------ | ---- | | label | tab 栏标题 | String | - | - | | name | 关联类型 | String | 'isRelate' | 'noRelate' | - | | idsKey | 关联或取消关联的参数 key | String | - | ids | | api | 关联或取消关联的请求 api | String | - | - | | params | 关联或取消关联的额外参数 | Object | - | - | | tableConfig | table-config 配置 | Object | - | - | | columnsSchema | columns-schema 配置 | Object | - | - | | searchConfig | search-configd 配置 | Object | - | - | | treeConfig | sc-tree 配置 | Object | - | - | | columns | sc-table columns 配置 | Array | - | - | | idCustomKey | 关联或取消关联取的列表 key | String | - | id |

uploadFile 组件

下载模板以及一键导入组件

uploadFile 属性

| 属性 | 说明 | 类型 | 可选项 | 默认 | | --------------- | -------------------------- | ------- | ------ | ----------------- | | dialogVisible | 是否显示,支持.sync 修饰符 | Boolean | - | - | | uploadApi | 导入上传 api | String | - | - | | downloadApi | 下载模板 api | String | - | - | | downloadId | 下载模板 oss 文件名 | String | - | - | | fileName | 下载模板自定义文件名 | String | - | 文件导入模板.xlsx | | title | 弹窗标题 | String | - | 一键导入数据 | | fileType | 指定下载的模板文件后缀 | String | - | xlsx | | downloadUrl | 下载模板链接 | String | - | - | | data | 导入额外参数 | Object | - | - |

downloadId 方式上传模板一般是去 test 模块的 /test/form 路由将上传文件的 mode 设置为 server,然后取返回字段中的 fileName(不包括后缀)

downloadUrl 方式上传模板一般是去 test 模块的 /test/form 路由用默认的 oss 上传,然后取返回字段中的 remoteUrl(该方式改不了下载模板的文件名)

video 组件

实时监控,视频回放组件

video 属性

| 属性 | 说明 | 类型 | 可选项 | 默认 | | --------------- | ---------------- | ------- | ------------------------------------------------- | ---- | | data | 视频数据 | Object | - | - | | isLive | 是否直播 | Boolean | - | - | | componentType | 指定视频组件类型 | String | 'flv' | 'aliplayer' | 'ezuikit' | 'cmsvPlayer' | - |

data 属性

| 属性 | 说明 | 类型 | 可选项 | 默认 | | ----------- | ----------------------- | ------- | ------ | ---- | | monitorNo | 摄像头(序列号)#(通道号) | String | - | - | | type | 摄像头类型 | Number | - | - | | hd | 是否使用 hd 链接 | Boolean | - | | url | 播放链接 | String | - |

config

公共的一些方法,ts 类型定义,options 选项

  • checkPhone 表单验证手机号码
  • downloadFile 下载文件 接收文件流或链接
  • handleSearchQuery 搭配 components 里面的 numberRange 组件使用
  • launchFullScreen 对某个 dom 元素全屏
  • exitFullscreen 退出全屏
  • addEventListenerFullScreen 进入全屏后做某些操作, 参数是一个函数
  • removeEventListenerFullScreen 退出全屏后做某些操作, 参数是一个函数

常用的一些方法

index

  • setConfigItemOption 设置增加,编辑,搜索表单配置项中的 options
// 使用示例
setConfigItemOption('add', this.formAddConfig.data, 'regionIds', data);
setConfigItemOption([
  ['add', this.formAddConfig.data, 'regionIds', data],
  ['edit', this.editConfig.data, 'regionIds', data],
  ['search', this.searchConfig.data, 'regionIds', data],
]);
  • getOptionLabel 通过 value 查找 option 中对应的 label,并返回 label
// 使用示例
const label = getOptionLabel(value, option);
  • changeDataToOption 改变数据结构为 Option 结构,并返回新数据
// 使用示例
const options = changeDataToOption(data, { value: 'id', label: 'title' });
  • changeQueryToObj 抽取搜索 query 参数放到对象里面
// 使用示例
const obj = changeQueryToObj(query[0].exps, ['regions']);
  • handleRegionSearchQuery 处理区域级联搜索参数
// 使用示例
handleRegionSearchQuery(data, 'region', ['regionPid', 'regionId', 'regionCid']);
  • getPlaceByRegion 通过级联区域参数查询场所列表
// 使用示例
const data = await getPlaceByRegion(regionArr, 'RESIDENCE_ZONE');
  • getPoint 获取投放点列表 参数可选 级联区域参数/投放点类型/场所 id
const data = await getPoint({ type: 'RESIDENCE_ZONE', placeId });
  • delCascadeChildByLevel 根据 level 只保留级联数据对应层级
const options = delCascadeChildByLevel(this.region, 2);

mixins 公共的 mixins

  • formThis 获取表格添加,编辑表单实例
  • refreshTable 用于已缓存页面重新进入需要刷新表格
  • regionMixins 用于获取公共区域数据 可在 getRegionComplete 方法里面写获取数据后的业务逻辑
  • regionTree 用于需要地区选择树形菜单表格
  • resetFormValue 获取表格搜索,添加,编辑表单实例, 可用 resetFormValue 方法清空对应字段的 value 值
  • selection 用于表格多选 常用业务是对表格批量自定义操作

utils 公共的一些方法

  • amap-ui 加载 AMapUILoader
  • formatSeconds 秒转时分秒 不会显示为 0 的单位

page 页面目录

admin 场所管理

apply 申请角色列表

appoint 预约列表

appointRecycle 预约回收

assessment 考核预警

baoan 宝安考核

baoanSupervisionAssessment 宝安督导考核

cloudSupervise 云端督导

collectTransport 分类预约收运

dynamicSupervise 动态督导

emptyPlateAction 环保打卡

environmentalBank 环保银行

environmentalForest 环保森林

guangming 光明九大分流

infospace 科普馆

intelligentWeight 智能称重

lecturer 蒲公英讲师

logs 现场引导

manager 区域管理员

map 一图概览

member 团队成员

newMap 一图概览

operateCompany 运营公司

point 投放点管理

recovery 旧衣回收

report 报表

resourceRecovery 资源回收

socialSupervise 社会监督员

stagingPoint 暂存点

voiceManage 语音管理

router 路由目录

对应 page 页面文件夹,新的 page 页面就新建一个新的路由文件

store vuex 目录

项目里面共用的 store 数据,一般是很多页面用到且不需要经常更新的数据可以存放在这里

api 接口地址文件

新的api就新建一个新的api文件手动引入, 修改就在原来模块里面改

multi-tenant 目录

多租户页面配置

  • config 配置多租户对应SCID需要替换的路由
  • guangzhou 穗分类项目文件夹
    • api 放置对应页面需要的请求方法以及公共api路径
    • page 放置对应页面代码
    • router 放置对应页面路由