# rtc-web **Repository Path**: jiyao9385/rtc-web ## Basic Information - **Project Name**: rtc-web - **Description**: No description available - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2023-11-06 - **Last Updated**: 2024-11-23 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README 登陆地址1 点击某个用户直接邀请 发起视频会议 https://10.20.21.168:4000/videoConferenceToName?loginName=superadmin&app_code=ZBFXKH&appKey=65c3153d7356370ea30dee24acb5da44&userName=zb&telephone=13181754287 登陆地址2 创建主会场 扫码或者邀请发起视频会议 https://10.20.21.168:4000/videoConferenceToName?loginName=superadmin&app_code=ZBFXKH&appKey=65c3153d7356370ea30dee24acb5da44 进入会议地址(移动端) https://phoneLogin?roomId=${roomId.value}&app_code=${app_code.value}&appKey=${appKey.value} # vue-project ``` 项目依托于Vite搭建的Vue + TypeScript + Pinia + Antd框架. 应用node环境为V16版本 Vue官方和TypeScript官方推荐使用VS code开发，提供了更好的TS类型提示和管理 vs code安装必要插件 1、Vite 强化Vite开发，自启动服务 2、Volar 是官方的 VSCode 扩展，提供了 Vue 单文件组件中的 TypeScript 支持，还伴随着一些其他非常棒的特性。 3、TypeScript Vue Plugin 用于支持在 TS 中 import *.vue 文件 【禁止个人随便修改src文件夹之外的其他文件，GIT检查会回滚删除】 ``` ``` js 注意： 1、开发环境：需要自主请求后台(如:img标签src请求等) 页面最上方添加添加请求根路径 const baseUrl = import.meta.env.VITE_BASE_URL; 环境变量配置： 直接在.env.development和.env.development添加VITE_开头的名称 并且在env.d.ts中的ImportMetaEnv接口内添加指定对象并添加注释 并在引用处前加上`${baseUrl}/XXX` 2、解决打包跨域问题【打包部署的时候需要在nginx配置针对.env.production配置中的根路径代理，删除请求的prodApi一级路径】 nginx代理配置示例： #上传大小 client_max_body_size 1024m; #gzip on; server { listen 8710; server_name localhost; location / { root html; index index.html index.htm; try_files $uri $uri/ @router; } location @router { rewrite ^.*$ /index.html last; } location /prodApi/ { rewrite ^/b/(.*)$ /$1 break; proxy_pass http://127.0.0.1:8310/; } } 3、HTTP请求 【多参数】请使用post方式提交 【单一参数】为降低后端序列化性能开销，后端采用单参数接收方式，前端请使用postFormData或postQueryString方式提交 4、GIS开发 所有地图和图层都不要使用响应式对象 5、安全配置 打包之后，nginx部署环境配置中需要添加下面的请求头 add_header X-Frame-Options DENY; add_header Strict-Transport-Security "max-age=63072000; includeSubdomains; preload"; add_header Referrer-Policy "origin"; add_header Content-Security-Policy value; add_header X-Permitted-Cross-Domain-Policies "none"; add_header X-XSS-Protection "X-XSS-Protection: 1;mode=block"; add_header X-Download-Options noopen; add_header X-Content-Type-Options "nosniff"; ``` ## 系统说明 ``` 本框架在基于非一级大版本换代的情况下，保证组件的升级能力和替代性，全框架和控件的可控性作为优先考虑 引入任何资源和封装，需要统一报备，确保全系统自主可控，保障不会影响框架的迭代能力 文档主要强化前端的资源索引能力，降低非核心人员的后续开发运维的难度和成本 !!!注!!! 开发过程使用方法、组件等，请先从公共组件库和系统工具包查找，个人引入的重复功能会定期审查，并要求删除或合并； ``` ## 第三方组件 > - [**vue3-seamless-scroll 基于vue3开发的新版本自动滚动插件**](https://www.npmjs.com/package/vue3-seamless-scroll) > - [**tinymce-vue V5 基于vue3的富文本**](https://www.tiny.cloud/docs/tinymce/6/vue-cloud) 注意：tinymce-vue需要在账号domain下添加IP/域名白名单 > - [**pinia 新一代状态管理，相比vuex，具有更好的ts类型推导**](https://pinia.web3doc.top/introduction.html) > - [**echarts5 图表**](https://echarts.apache.org/zh/index.html) 注意最近更新事件为2020年 当vue升级时需查看是否兼容 注意：如需添加第三方组件，需要报备提供相关开源版权信息和打包后增加的大小等信息，否则会定期清理
类型 名称 版本号 日期 开源协议 备注
基础框架 Vue 3.2.47 MIT License
前端开发与构建工具 Vite 4.1.4 MIT License
增强编程语言 TypeScript 4.9.5 Apache License 2.0
UI框架 ant-design-vue 3.2.15 MIT License
状态管理 Pinia 2.0.32 MIT License
加密工具 jsencrypt 3.3.1 MIT License
HTTP工具 axios 1.2.4 MIT License
CSS预处理 less 4.1.3 Apache License 2.0
图表工具 echarts 5.4.1 Apache License 2.0
## 强化使用 F1 输入markdown，选择开启右侧预览 ## vite命令 ### 项目启动 npx vite --port=4000 ## 项目命令 ### 资源下载 npm install ### 项目启动 npm run dev ### 项目打包 npm run build # 一、外层文件 ## 1、[外部资源](public) * ### [超图三维GIS](public/Cesium) | [超图二维GIS](public/supermap) | [GIS资源](public/gis) | [材质文件](public/textures) | [视频插件](public/videoPlugIn) ## 2、配置文件 * ### [开发环境配置文件](.env.development) | [生产环境配置文件](.env.production) | [项目入口文件](index.html) | [项目描述文件](package.json) | [Vite配置文件](vite.config.ts) # 二、[项目主体](src) ``` 根目录：src - api 后台数据接口 - config axios、http封装 - 其它 业务API接口封装 - assets 资源目录 - component 封装组件 - router 路由配置及守卫 - store 状态管理插件Pinia配置 - utils 公共设置 - interface 自定义接口对象(主要应用于TypeScript实现对象提示) - tools 公共工具 - commonData 公共静态数据 - commonMethod 公共方法和对象 - commonValidator 公共数据校验 - layoutConfig 公共格式配置 - resize 自适应高度封装hooks - views 页面显示资源 ``` ## 1、[数据接口](src/api) * #### [axios配置](src/api/config) | [公共API](src/api/common) ### 2、[资源目录](src/assets) * #### [css文件目录](src/assets/css) * #### [ts文件目录(存放各页面非【公共工具类】的提取方法)](src/assets/ts) * #### [img图片目录](src/assets/img) ### 3、[自定义组件](src/component) * #### [公共组件](src/component/common) * ##### [公共Table页面模板](src/component/common/CommonTable.vue) | [左右结构模板](src/component/common/LRStructure.vue) * ##### [自由滚动组件](src/component/common/ScrollTable.vue) * #### [系统功能组件](src/component/system) * #### [用户功能组件](src/component/user) * #### [GIS组件](src/component/gis) * ##### [山东天地图底图组件](src/component/gis/GisTdtBase.vue) ### 4、[路由组件](src/router) * #### [路由配置](src/router/index.ts) | [路由守卫](src/router/beforeEach.ts) | [管理模式路由清单](src/router/routerList.ts) ### 5、[状态管理Pinia](src/store) * #### [主要状态配置](src/store/storeIndex.ts) * #### [权限状态配置](src/store/suthStore.ts) ### 6、[系统工具包](src/utils) * #### [Compositions API简化包](src/utils/compositions) * ##### [资源导入整合包](src/utils/compositions/commonComposition.ts) * #### [自定义接口](src/utils/interface) * #### [自定义工具](src/utils/tools) * ##### [公共静态数据](src/utils/tools/commonData.ts) | [公共方法对象](src/utils/tools/commonMethod.ts) | [公共表单校验](src/utils/tools/commonValidator.ts) * ##### [公共静态数据](src/utils/tools/commonData.ts) | [公共页面格式](src/utils/tools/layoutConfig.ts) | [页面自适应高度Hooks](src/utils/tools/resize.ts) ### 7、[App配置首页](src/App.vue) ### 8、[App资源引用首页](src/main.ts) # 三、后台管理模块 ## 1、[页面主目录](src/views) * ### [登录页面](src/views/Login.vue) | [主页面](src/views/Main.vue) | [403页面](src/views/403.vue) | [404页面](src/views/404.vue) | [单点登录页面](src/views/SsoLogin.vue) ## 2、[系统管理](src/views/system) * ### 用户管理 [页面](src/views/system/user) | [API](src/api/system/userApi.ts) * ### 角色管理 [页面](src/views/system/role) | [API](src/api/system/roleApi.ts) * ### 菜单管理 [页面](src/views/system/menu) | [API](src/api/system/menuApi.ts) * ### 字典管理 [页面](src/views/system/dict) | [API](src/api/system/dictApi.ts) * ### 部门管理 [页面](src/views/system/department) | [API](src/api/system/departmentApi.ts) ## 3、[日志管理](src/views/log) | [API](src/api/log/logApi.ts) * ### [登录日志](src/views/log/loginLog.vue) | [操作日志](src/views/log/operationLog.vue) | [日志统计](src/views/log/logStatistics.vue) ## 4、[资源监听](src/views/monitor) | [API](src/api/monitor/monitorApi.ts) * ### [Redis监听](src/views/monitor/redisMonitor.vue) | [数据监听](src/views/monitor/dataMonitor.vue) ## 5、[调度任务](src/views/schedule) * ### 调度任务管理 [页面](src/views/schedule/Schedule.vue) | [日志](src/views/schedule/ScheduleLog.vue) | [API](src/api/schedule/scheduleApi.ts) ## 6、[行政区划](src/views/area) * ### 行政区划管理 [页面](src/views/area/AdministrativeDivision.vue) | [API](src/api/area/AdministrativeDivisionApi.ts) ## 7、[测试模块](src/views/test) * ### [图片上传预览](src/views/test/vueUpload.vue) | [手动上传](src/views/test/upload2.vue) | [自动滚动](src/views/test/autoScroll.vue) | [手动上传](src/views/test/richtext.vue) | [高性能测试](src/views/test/highPerformance.vue) # 四、[一张图模块](src/views/home) ## 1、[综合展示](src/views/home/oneMap.vue) ## 2、[数字场景](src/views/home/szcj.vue) ## 3、[流域防洪](src/views/home/lysy.vue) ## 4、[水资源调配](src/views/home/szytp.vue) * ### [水资源总览](src/component/Home/szcj/waterResourcesOverview.vue) | [来水预测](src/component/Home/szcj/waterInflowForecast.vue) | [需水预测与分析](src/component/Home/szcj/waterDemandAnalysis.vue) | [可调水资源分析](src/component/Home/szcj/analysisOfAdjustable.vue)