农贸市场数字化信息平台系统 + 智慧菜场H5 + “互联网5G+明厨亮灶” 食品安全智慧监管平台

技术信息

语言技术
Vue、TypeScript、Node.js、ElementUI、iView系统类型
H5、Web行业分类
物联网、区块链

作品详情

行业场景

供食品监督管理局协查部门使用的OA工具，用于市场监管、商户监管、商品监管、特种设备监管等。
农贸市场数字化信息平台系统 + 智慧菜场H5，用于市场管理、商户入驻审核、商品分类、订单管理、价格监管、巡检检查等，PC端支撑市场运营管理，H5端为市场方与商户提供移动办公入口；二是“5G+明厨亮灶”食品安全智慧监管平台，对接物联网设备，实现设备隐患与物联隐患的排查、整改闭环管理，并集成视频监控实时查看后厨/市场情况，助力食品安全监管数字化。

功能介绍

1. 农贸市场数字化信息平台
商户管理：入驻申请审核、资质认证、档案维护
商品管理：商品分类、价格管控、上下架管理
订单管理：交易订单查询与全流程跟踪
市场巡检：巡检任务派发、结果录入与复查审核
2. 智慧菜场H5（联动管理平台）
集成浙里办小程序，移动端查看市场经营数据
支持商户移动端商品维护、价格更新
集成微信JSSDK，调用分享、定位等能力
3. “5G+明厨亮灶”智慧监管平台
隐患管理：设备隐患与物联隐患的发现、整改、复查全流程闭环
物联监控：对接对讲机等物联设备，实时查看设备状态
视频监控：嵌入RTMP/HLS播放器，实时查看后厨/市场监控画面
统计分析：隐患分类统计、整改率、设备在线率等数据看板

项目实现

主要技术：
1、Vue 2（Options API）+ Vuex + Vue Router 3（权限路由、嵌套路由）+ Vue CLI + JavaScript（ES6+）
2、OA管理后台：Ant Design Vue。移动端 H5：Vant UI。
3、网络：Axios（封装拦截器、统一错误处理、请求重试）。接口规范：RESTful API（JSON ）。认证方式：JWT Token / OAuth2（浙里办使用政务统一身份认证）。实时通信：WebSocket（用于大屏展示）
4、政务平台集成：微信 JSSDK，调用微信原生能力（定位、分享、扫码等）
5、浙里办容器适配：处理 WebView 特性，单点登录（SSO）对接，URL 白名单配置、跳转限制处理。
6、硬件与物联网（IoT）联动：通过 HTTP/WebSocket进行设备数据对接。
7、视频监控集成：嵌入 HLS（HTTP Live Streaming）视频流（使用 video.js 、flv.js）。
8、调用摄像头（H5 扫码：zxing-js/library 、微信扫码 API）。
9、省市区下钻式层级地图。
10、高德地图图层渲染：AMap.DistrictLayer。监听 click 事件获取当前区域 adcode，递归下钻（省 → 市 → 区），配合面包屑导航展示路径。
11、设备点位对接与检索：通过后端接口获取设备列表，使用AMap.Marker 批量创建，自定义点位图标。使用AMap.MarkerClusterer 防止密集点重叠卡顿。
13、地图轨迹绘制+历史轨迹回放与动画演示：后端返回有序经纬度，使用AMap.Polyline 绘制折线，使用AMap.MoveAnimation 插件实现点位沿轨迹移动。结合时间戳，分段绘制 + 定时器控制播放进度，实现历史轨迹回放。