跳转到内容
污水小程序文档

项目目录结构

整体项目的目录结构如下

  • 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指令的组装

  1. base.ts 负责基础组件
  2. C**request.ts 负责组装指令

components

  1. BottolesView.tsx 负责设备详情页面的瓶子状态展示
  2. CustomNavBar.tsx 基于antmjs框架简单改了下样式,同小程序NavBar
  3. CustomScrollViewList.tsx 负责页面所有用到ScrollView组件的组件封装(计算高度)
  4. CustomTab.tsx 基于antmjs简单改了下样式,同antmjs Tab
  5. DeviceAmountStatusCard.tsx 首页上面四个设备 数量 状态的设备卡片
  6. DeviceStatusCard.tsx 首页中间设备 采样 状态的设备卡片
  7. FormAreaPicker.tsx antmjs的form表单封装地区选择器组件,在送检信息表单中用到了
  8. FormDatePicker.tsx antmjs的form表单封装时间选择器组件,在送检信息表单中用到了
  9. OldListCard.tsx 旧版设备列表(老的设备列表接口) 首页老设备列表入口按钮用到
  10. Validator.tsx 倒计时组件(发送验证码短信的倒计时)

hooks

  1. useCustomScrollViewHeight.tsx 在 components 中 CustomScrollViewList.tsx用到,用于计算高度
  2. useDeviceList.tsx 首页设备采样状态,设备状态数量请求hook 除 采样中空闲设备两个,其他都用的这个
  3. useMonthSelector 用于切换日期组件的展示,里面有 useMonthSelectoruseMonthSelector 两种hook,仅返回的日期格式不同,一种是 YYYY-MM-DD ,另一种是 YYYYMMDDHHmmss

http

  1. bottoleSample.ts 用于查询采样瓶子历史采样信息的接口 — 页面暂时没有涉及
  2. collectInfo.ts 收集小程序设备信息
  3. index.ts 小程序基础请求的封装,prequest + prequest-addon (prequest-upload存在问题,慎用)
  4. instrument.ts 关于仪器所有的请求,获取仪器列表,仪器运行信息,上传仪器运行参数,批量上传仪器运行参数(集群控制), 查询仪器历史运行信息,获取仪器其他运行参数,获取仪器设置参数,更新仪器备注,采样完成和报警确认
  5. log.ts 获取仪器报警日志
  6. mqtt.ts 转发和批量转发MQTT指令(集群控制)
  7. other.ts 下发采样设置的增删改查接口
  8. send.ts 送检信息表单的增和查
  9. 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也不涉及全局状态交互,但是我偷懒放到这下面了.

  1. historyRecord.ts 采样历史的store,点击采样历史列表会把数据赋给此store,进到采样历史详情页面之后将store中的数据拿出并取出
  2. instrumentRemark.ts 设备昵称备注
  3. phoneInfoStore 设备信息(屏幕宽高之类的,计算scrollview列表要用到)
  4. samplingPlanStore.ts 保存用户采样设置的状态,集群控制和单控都用的这个store,仅serialNo不同,一个是string列表,一个是string
  5. userStore.ts 用户登录信息的store

utils

  1. common.type.ts 设备的interface,分页通用的interface,采样瓶的interface(设备和采样瓶 首字母大写和小写是两种接口…注意切换)
  2. converPeroidcSamplingToInstument 这个就是将设备返回的首字母小写的字段切换为大写
  3. convertToLowerCase.ts 将首字母大写改为小写
  4. enum.ts 设备存在的各种状态码
  5. errorCode.ts 接口返回的报警码(我不明白空列表为啥会报错50000而不是返回一个空[],问就是的历史原因)
  6. expressReg.ts 各种快递的正则表达式匹配
  7. generateOneKeyWashSamplingPlan.ts 生成一键清洗的代码
  8. getBottoleNum 校验采样瓶编码是否合法、根据设备序列号获取瓶子的最大容量和数量
  9. getSoftwareVersion 根据设备序列号拿到软件的版本
  10. md5.js 登录的时候要用到,md5加密
  11. navigate.ts 小程序切换路由的简单封装
  12. parseReturnString.ts 有的时候接口返回的纯字符串,还要先解析成json.(问就是**的历史原因)
  13. promisify.ts 将小程序的部分接口promise化 14 testUtils.ts 方便command命令测试的时候对比封装的二进制数据与APP的有何不同