«

PHP ExoSip预热2-基于 Vue3、TypeScript 和 Vite 的安防 UI 模板

时间：2025-12-16 17:07     作者：wanzi     分类： 推应用

针对PHP ExoSip 扩展实现的GB28181网关，开发的一套基于 Vue3、TypeScript 和 Vite 的安防 UI 模板，包含一整套监控系统组件，并提供实时演示。该项目可作为构建集成视频管理功能的安防应用程序的模板。

仓库地址

核心功能

技术栈

项目结构


├── api/ # API 接口

├── assets/ # 静态资源

├── components/ # 共享组件

│ ├── layout/ # 布局组件

│ └── ptz/ # 云台控制组件

├── mock/ # 模拟数据

├── router/ # 路由配置

├── stores/ # Pinia 状态管理

├​​── styles/ # 全局 SCSS 变量和 mixin

├── utils/ # 实用函数

└── views/ # 页面组件

├── alarms/ # 报警管理页面

├── map/ # 电子地图页面

├── ptz/ # 云台控制页面

└── video/ # 视频播放页面

设置和安装


# 安装依赖项

pnpm install

# 环境配置
cp .env.example .env

VITE_APP_TITLE=PHP-GB28181
VITE_AMAP_KEY=xxxx , 获取高德地图密钥

# 启动开发服务器

pnpm dev

# 构建生产版本

pnpm build

演示地址

http://localhost:3230
默认用户名密码：admin/123456

开发指南

API 模拟

该项目使用 Mock.js 来模拟后端 API，包括：

主要特性

效果

login homepage ptz-dashboard video-playback
video-playback-timeline map map-dialog 
Options:
  -h, --help            Display help for the given command. When no command is given display help for the list command
  -q, --quiet           Do not output any message
  -V, --version         Display this application version
      --ansi|--no-ansi  Force (or disable --no-ansi) ANSI output
  -n, --no-interaction  Do not ask any interactive question
  -v|vv|vvv, --verbose  Increase the verbosity of messages: 1 for normal output, 2 for more verbose output and 3 for debug

Available commands:
  completion               Dump the shell completion script
  connections              Get worker connections.
  fix-disable-functions    Fix disbale_functions in php.ini
  help                     Display help for a command
  install                  Execute webman installation script
  list                     List commands
  reload                   Reload codes. Use mode -g to reload gracefully.
  restart                  Restart workers. Use mode -d to start in DAEMON mode. Use mode -g to stop gracefully.
  start                    Start worker in DEBUG mode. Use mode -d to start in DAEMON mode.
  status                   Get worker status. Use mode -d to show live status.
  stop                     Stop worker. Use mode -g to stop gracefully.
  version                  Show webman version
 Lottery
  Lottery:test             彩票统计测试
 app-plugin
  app-plugin:create        App Plugin Create
  app-plugin:install       App Plugin Install
  app-plugin:uninstall     App Plugin Uninstall
 build
  build:bin                build bin
  build:phar               [phar:pack] Can be easily packaged a project into phar files. Easy to distribute and use.
 company
  company:check            审核公司
 gb
  gb:generate-hock-token   生成api hock token
  gb:test                  GB28181 Interactive Testing Tool
 gb28181
  gb28181:server {action}  国标信令服务: 启动、停止、重启、查看状态
 hi
  hi:webman                测试
 make
  make:biz                 生成biz（参数1：--id 业务名称【必填】；参数2：--table 数据表名称【不必填，默认小写业务名】；参数3：--namespace  命名空间【不必填，默认CoreW\Business;插件使用则{plugin}\Business；参数4：--dao y】）
  make:biz-dao             生成业务数据访问对象（DAO Interface & Implementation）
  make:biz-exception       生成业务异常类
  make:biz-service         生成业务服务类（Service Interface & Implementation）
  make:bootstrap           Make bootstrap
  make:command             Make command
  make:controller          Make controller
  make:middleware          Make middleware
  make:model               Make model
  make:resource            Make resource
  make:vip                 创建系统内部会员
 plugin
  plugin:create            Plugin create
  plugin:disable           Disable plugin by name
  plugin:enable            Enable plugin by name
  plugin:export            Plugin export
  plugin:install           Execute plugin installation script
  plugin:uninstall         Execute plugin uninstall script
 redis-queue
  redis-queue:consumer     Make redis-queue consumer
 route
  route:list               Route list
 system
  system:init              系统初始化
 upload
  upload:merge-chunk       合并大文件分片
 zlm
  zlm:start                zlm start

状态