# cm-bigscreen

**Repository Path**: lingering-warmt/cm-bigscreen

## Basic Information

- **Project Name**: cm-bigscreen
- **Description**: 崇明大屏幕
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-03-14
- **Last Updated**: 2025-08-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue3 + pinia + element-plus + echarts 大屏可视化demo

## 初始化项目 分辨率:3920\*1080

1、封装axios请求接口
1）创建axios实例
2）请求拦截：针对于token验证，接口请求携带token请求头
3）请求响应：特殊错误请求的处理

2、存储token
1）创建store - user模块
2）user模块添加token Hooks函数

3、按需引入element-plus组件库

## 布局

三列布局：左中右，其中左侧和右侧为两行两列「用于报表图形展示」，中间为视频监控播放区域

布局：采用的flex弹性布局

问题一： 大屏适配  
1、rem + vw/vh:
2、scale: 改变根元素的缩放比例来实现大屏适配
采用了方法2，封装了一个屏幕缩放hook函数，用于大屏适配
或者使用插件

问题二：Echarts图标数据渲染
1、封装公共echarts图表组件
路径： src/components/Chart
index.vue: 图标渲染界面，接收图表数据，渲染图表
config.js: echarts的组件和配置统一管理「按需引入，用什么图表和对应的组件统一导入」
options/xxx.js: 图表配置项「针对于各个图表的配置，如柱状图、折线图、饼图等，分别创建不同的js文件接收、导出配置项」

问题三：大屏两侧配置
1、单开界面进行内容数据配置
	1）配置界面：单开界面，可配置大屏左侧、右侧、中间的图表数据
	2）采用el-table表格的形式进行数据配置
2、基于大屏界面进行开关锁「开锁：可拖拽、修改内容；关锁：不可操作」