项目目录结构
整体项目的目录结构如下
Directoryconfig/
- dev.js
- prod.js
- index.js
Directorysrc/
Directorycommand/
- …
Directorycomponents/
- …
Directoryhooks/
- …
Directoryhttp/
- …
Directoryimages/
- …
Directorypages/
- …
Directorystore/
- …
Directoryutils/
- …
Directorytest/
- app.config.ts
- app.css
- app.ts
- package.json
- tsconfig.json
config
负责整个项目的配置,请求后端的 API_URL 在这里配置
src
command
负责MQTT指令的组装
- base.ts 负责基础组件
- C**request.ts 负责组装指令
components
- BottolesView.tsx 负责设备详情页面的瓶子状态展示
- CustomNavBar.tsx 基于antmjs框架简单改了下样式,同小程序NavBar
- CustomScrollViewList.tsx 负责页面所有用到ScrollView组件的组件封装(计算高度)
- CustomTab.tsx 基于antmjs简单改了下样式,同antmjs Tab
- DeviceAmountStatusCard.tsx 首页上面四个设备
数量状态的设备卡片 - DeviceStatusCard.tsx 首页中间设备
采样状态的设备卡片 - FormAreaPicker.tsx antmjs的form表单封装地区选择器组件,在送检信息表单中用到了
- FormDatePicker.tsx antmjs的form表单封装时间选择器组件,在送检信息表单中用到了
- OldListCard.tsx 旧版设备列表(老的设备列表接口) 首页老设备列表入口按钮用到
- Validator.tsx 倒计时组件(发送验证码短信的倒计时)
hooks
- useCustomScrollViewHeight.tsx 在 components 中
CustomScrollViewList.tsx用到,用于计算高度 - useDeviceList.tsx 首页设备采样状态,设备状态数量请求hook 除
采样中和空闲设备两个,其他都用的这个 - useMonthSelector 用于切换日期组件的展示,里面有
useMonthSelector和useMonthSelector两种hook,仅返回的日期格式不同,一种是YYYY-MM-DD,另一种是YYYYMMDDHHmmss
http
- bottoleSample.ts 用于查询采样瓶子历史采样信息的接口 — 页面暂时没有涉及
- collectInfo.ts 收集小程序设备信息
- index.ts 小程序基础请求的封装,prequest + prequest-addon (prequest-upload存在问题,慎用)
- instrument.ts 关于仪器所有的请求,获取仪器列表,仪器运行信息,上传仪器运行参数,批量上传仪器运行参数(集群控制), 查询仪器历史运行信息,获取仪器其他运行参数,获取仪器设置参数,更新仪器备注,采样完成和报警确认
- log.ts 获取仪器报警日志
- mqtt.ts 转发和批量转发MQTT指令(集群控制)
- other.ts 下发采样设置的增删改查接口
- send.ts 送检信息表单的增和查
- user.ts 关于用户的登录登出,验证码,心跳请求
images
在config已有配置,会在打包的时候整体将此文件加复制到根目录下,之后引入图片只需要 /mage/图片名字 即可。
pages
小程序的页面路径,所有的路由都已经在 app.config.ts 中进行配置
"pages/index/index", //首页
"pages/submissionInformation/index", //送检
"pages/submissionInformationEdit/index", //送检编辑
"pages/submissionInformationView/index", //送检查看
"pages/mine/index", //我的
"pages/login/index", //登录
"pages/deviceAmountList/index", //设备数量列表
// "pages/deviceStatusList/index", //设备状态列表
"pages/deviceDetail/index", //设备详情
"pages/samplingSettingList/index", //采样设置的列表
"pages/samplingSetting/index", //采样设置的列表项详情 配置
"pages/samplingTimingList/index", //采样设置 时间列表 配置
"pages/clusterControlSamplingSettingList/index", //集控 采样设置 列表
"pages/deviceHistoryRecordList/index", //设备历史记录列表
"pages/historyRecordDetail/index", //设备历史记录详情
"pages/deviceAlarmRecordList/index", //设备报警记录列表
"pages/wholeDevice/index", //全部设备列表
"pages/disconnectDevice/index", //离线设备列表
"pages/connectDevice/index", // 在线设备列表
"pages/freeDevice/index", //空闲设备列表
"pages/samplingNumDevice/index", //采样中设备列表
"pages/samplingFinishNumDevice/index", //采样完成设备列表
"pages/alarmNumDevice/index", //报警设备列表
"pages/editDeviceRemark/index", //编辑设备备注
store
zustand+persist 所有状态的保存,部分页面因为不涉及全局store,故直接放在了页面文件夹下方,historyRecord也不涉及全局状态交互,但是我偷懒放到这下面了.
- historyRecord.ts 采样历史的store,点击采样历史列表会把数据赋给此store,进到采样历史详情页面之后将store中的数据拿出并取出
- instrumentRemark.ts 设备昵称备注
- phoneInfoStore 设备信息(屏幕宽高之类的,计算scrollview列表要用到)
- samplingPlanStore.ts 保存用户采样设置的状态,集群控制和单控都用的这个store,仅serialNo不同,一个是string列表,一个是string
- userStore.ts 用户登录信息的store
utils
- common.type.ts 设备的interface,分页通用的interface,采样瓶的interface(设备和采样瓶 首字母大写和小写是两种接口…注意切换)
- converPeroidcSamplingToInstument 这个就是将设备返回的首字母小写的字段切换为大写
- convertToLowerCase.ts 将首字母大写改为小写
- enum.ts 设备存在的各种状态码
- errorCode.ts 接口返回的报警码(我不明白空列表为啥会报错50000而不是返回一个空[],问就是的历史原因)
- expressReg.ts 各种快递的正则表达式匹配
- generateOneKeyWashSamplingPlan.ts 生成一键清洗的代码
- getBottoleNum 校验采样瓶编码是否合法、根据设备序列号获取瓶子的最大容量和数量
- getSoftwareVersion 根据设备序列号拿到软件的版本
- md5.js 登录的时候要用到,md5加密
- navigate.ts 小程序切换路由的简单封装
- parseReturnString.ts 有的时候接口返回的纯字符串,还要先解析成json.(问就是**的历史原因)
- promisify.ts 将小程序的部分接口promise化 14 testUtils.ts 方便command命令测试的时候对比封装的二进制数据与APP的有何不同