# csdn-demo

**Repository Path**: lemonaid/csdn-demo

## Basic Information

- **Project Name**: csdn-demo
- **Description**: vue3的选人组件:
可以控制可以选多人，或者只能选单人可以做部门筛选再选人，没有部门情景，直接显示全部人员，有输入框可以搜索人员
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-10-29
- **Last Updated**: 2026-04-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 1. `selectPerson` 选择人员

#### ✨实现功能

- 🌟 可以灵活控制，多选或者单选人员
- 🌟 配合部门进行部门下的人员筛选

#### 详细地址说明：

[https://intostars.blog.csdn.net/article/details/145276102?spm=1001.2014.3001.5502](https://intostars.blog.csdn.net/article/details/145276102?spm=1001.2014.3001.5502)

## 2. `caches` 路由缓存案例

1. 新增，编辑都进行页签缓存，并不是弹框
2. 新增或编辑的时候，填写表单内容一半，中途去了其他页签，点击切换回来的时候，前面填写的内容已经重置掉了，需要解决缓存问题，不能重置掉
3. 创建，编辑应该怎么设置，使用1个组件，还是俩个组件

- 效果:

1. 能同时打开编辑和新增，能来回切换页面，并且填写的内容切换回来也是存在的

## 3. `uploadCase` 上传案例

#### ✨实现功能

- 上传格式限制
- 上传大小限制
- 上传文件数量限制
- 自定义上传区
- 上传成功回调
- 禁用上传开关与点击上传自定义事件
- 暴露所以上传文件列表（uploadList）与当前文件数据（uploadLatestFile）

#### 详细地址说明：

[https://intostars.blog.csdn.net/article/details/140051298?spm=1001.2014.3001.5502](https://intostars.blog.csdn.net/article/details/140051298?spm=1001.2014.3001.5502)

## 4. `amap` 高德地图组件案例

#### `VueAmap Pro`详细文档说明与预览请浏览：
[https://intostars.blog.csdn.net/article/details/151609979?spm=1001.2014.3001.5502](https://intostars.blog.csdn.net/article/details/151609979?spm=1001.2014.3001.5502)


### 1. `AmapFromSearch`: `el-form`表单及高德地图的关联组件

#### ✨实现功能

1. 🌟表单内显示省市县以及详细地址

- 点击省市县输入框时，打开对应地图弹窗，进行位置选择
- 选择位置回显入对应输入框
- 表单内的省市县以及地址输入框同外嵌表单走相同的校验方式
- 触发校验后点击reset实现清除校验与清空数据

2. 🌟地图内展示地址搜索框以及地图坐标图

- 搜索框展示当前经纬度地址
- 搜索框可输入自定义地址，下拉菜单展示范围兴趣点和道路信息，点击可进行搜索

3. 🌟 单独封装每个组件，使form-item和dialog以及amap三个组件可单独使用

#### 详细文档说明与预览请浏览：

[https://intostars.blog.csdn.net/article/details/138696634?spm=1001.2014.3001.5502](https://intostars.blog.csdn.net/article/details/138696634?spm=1001.2014.3001.5502)

## 5. `smartHelmet` 智能头盔案例

✨实现功能
1. 🌟WebSocket实时通信
   - 建立与服务器的长连接，支持自动重连机制
   - 连接状态实时监控（未连接、连接中、已连接）
   - 管理员身份认证登录
   - 获取活跃设备列表信息
2. 🌟实时视频监控
   - 远程开启/关闭智能头盔摄像头画面
   - 基于WebRTC技术的高清视频流传输
   - 默认1280×720分辨率视频播放
3. 🌟远程操作控制
   - 支持远程截屏功能
   - 全屏显示支持
   - 操作结果实时反馈
4. 🌟用户界面
   - 直观的操作按钮区域（开启画面、关闭画面、截屏、全屏）
   - 连接状态实时显示
   - 设备信息展示区域
   - 视频播放区域

#### 详细文档说明与预览请浏览：
[https://intostars.blog.csdn.net/article/details/151620363?spm=1001.2014.3001.5502](https://intostars.blog.csdn.net/article/details/151620363?spm=1001.2014.3001.5502)