# jc-ui **Repository Path**: webzdx/jc-ui ## Basic Information - **Project Name**: jc-ui - **Description**: 前端 - **Primary Language**: JavaScript - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 1 - **Created**: 2024-05-26 - **Last Updated**: 2024-05-26 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # config-cli 通用框架配置文档 ## Build Setup ``` bash # 安装依赖项 npm install # 服务开启 默认 开启 服务 为 IP:8081 npm run dev # 沿用 官方打包要求 同时在这个命令后新添加 把生产环境的 配置文件替换为 开发环境的配置文件 npm run build ``` ## 项目目录结构 特别值得注意的是 src中的静态文件是参与打包的 与 src同级的static文件 打包中会原封不动挪到dist中的合并的static中 ``` -build // 系统默认 -config // 系统默认 -share.json // 项目默认打包位置 -public // 项目的入口 index.html在此 -dist // 项目默认打包位置 -src -assets -imgs -common -components │ dseAside.vue // 侧边菜单 │ dseBreadcrumb.vue // 面包屑 │ dseCalanderEvent.vue // 事件日历 │ dseDashboard.vue // 图表面板 │ dseFilterTab.vue // 含有(更多)的 多item 点选 │ dseFuncTools.vue // gis工具栏 │ dseFuzzySearch.vue // 模糊搜索 带有下拉列表 (需要定制) │ dseGisTools.vue // gis工具栏 │ dseHeaderInner.vue // 通用的头部菜单文件 │ dseLayerOut.vue // 通用的 左右布局的 内容和树的组件 │ dseLegend.vue // gis的图例组件 │ dseLiveVideo.vue // 在线视频组件 (针对 easynvr) │ dseLoadAnimation.vue // 耗时的吃豆人动画组件 │ dseLoadingAnimation.vue // 页面跳转和数据加载的 缓动动画 │ dseMenu.vue // 菜单的主文件 (可按需生成三级组文件) │ dseMyPagination.vue // 自定义的 带有列表+自定义分页的 抽屉组件 │ dsePagination.vue // 细分的 自定义分页组件 │ DseselectTips.vue // 根据情况 单选进入的组件（按需修改） │ DseSearchInput.vue // 根据情况 带搜索框的按钮组件 │ dseSelectWithTree.vue // 输入框嵌套树的 选择组件 │ dseSeparatingTabs.vue // 分离式的 页签切换组件 │ DseShuttleBox.vue // 支持两级切换的穿梭框(需要按需修改) │ dseSlideTableList.vue // 侧边抽屉的 表格列表和elment-ui分页样式的组件 │ dseTab.vue │ dseTableList.vue // 侧边抽屉 表格和分页组件 │ dseTableWidthPagination.vue // 大型表格和分页组件 │ dseTabsToggle.vue // 页签切换组件 │ dseTabsUnderline.vue // 带有下划线的组件 │ dseToggleTable.vue // 抽屉的 开关组件 │ FirstMapHead.vue // 可参考的 头部菜单组件 │ ├─tabs │ dseR_tableCard.vue // 竖向菜单和 内容区的组件 │ └─toast DseBgModel.vue // 大的弹窗 Dsedit.vue // 带有 取消和保存按钮的 自定义弹窗 DseGisModel.vue // 自由配置弹窗位置 无按钮 (宽大于高) DseListModel.vue // 以展示为主的 无按钮弹窗 (高大于宽) DseNormalModel.vue // 通用的弹窗组件 无按钮 DseSaveStatus.vue // 保存状态的组件 (含有 确认删除和保存成功的组件) DseView.vue // 自定义宽高的组件 -config +inner_config.js //内置配置共享数据 不可轻易配置 与外置/static/config.js 联动 -styles main.scss // 各种样式文件导入的主文件 全局定义样式 包含基于element-ui的样式纠正 (尽量不要在组件中用 /deep/ 应该改文件中定义重置样式) │ ├─generic // 定义基本的通用样式 │ base.scss // 通用的全局样式 │ iconfont.scss // 全局的字体文件 │ reset.scss // 全局的重置样式(重置element-ui) │ └─settings _fun.scss // 定义 可传参数的 的函数样式或者(定义一段样式的混合器) _vars.scss //定义 基准的 基准变量 -store │ index.js 状态包裹器 │ └─modules dataManage_store.js 数据管理状态器 emergencyManage_store.js 应急管理状态器 goodsManage_store.js 物资管理状态器 oneMap_store.js 一张图状态器 pipeManage_store.js 管网管理状态器 root.js 用户信息管理状态器 routingManager_store.js 巡检管理状态器 saveWaterManage_store.js 节水管理状态器 system_store.js 系统管理状态器 waterAnalysis_store.js 用水分析状态器 -mixins // 混合器目录 arcgis_methods.js gis相关的 common_mixins.js 时间日历的使用函数 pipeSetting_sites_mixin.js 水质、水压、水流、视频等站点的混合器 chart_mixins.js 图表 (包含 线、柱子等，逐步完善) README.md -pages 404.vue │ 500.vue │ gisEdit.vue gis编辑 │ home.vue 一张图的主页 │ init.vue 页面初始化 │ Login.vue 登录的页面 │ mainContent.vue 所有页面的 包裹器页面 │ Temp.vue 判断是否登录的 跳转缓存页面 │ +---alert 预警模块 +---analysis 用水分析模块 | +---company | | \---data | +---county | | +---data | | \---style | \---region | \---data +---data 数据管理模块 | \---monitor | +---components | \---data +---emergency 紧急管理模块 | +---incident | \---resource | \---comonents +---home_tabs 一张图右侧面板的小组件 | +---countMsg 统计 | +---monitorMsg_points 监测点 | +---part 分区 | +---pool 蓄水池 | +---pump 泵站 | +---showAllModel 显示常在的小窗口 | +---sk 水库 | +---userDev 联户表井 | +---waterate 用水率 | \---waterFactory 水厂 +---intelligentOffice 智慧办公管理模块 +---liveMonitor 实时监测管理模块 +---material 物资管理模块 | +---analysis | | \---data | +---device | \---spareParts | \---data +---pipeManage 管网管理模块 +---quality 水质管理模块 | +---CheckCom | +---CheckOffice | \---Monitor +---routingManage 运营管理管理模块 +---statistical 统计分析管理模块 | +---Monitor | \---Synthetical +---system 系统管理模块 | +---engineering | | \---comonents | +---inspectionItem | +---monitor | +---patrolTeam | \---supplyProgect +---tipPanel 一张图左侧面板 +---video 视频管理模块 \---water 用水管理模块 +---calculate | \---data \---examine -api │ contentType_form_fetch.js 针对 www-form 接口封装 │ fetch.js 一般 json 格式封装 │ fetchForExport.js 导出数据流文件封装 │ postFile.js 上传文件 带进度条封装 │ README.md │ urls.js 所有 接口地址的所在目录 │ └─interfaces common_api.js 通用 接口回调 dataManage_api.js 数据管理 接口回调 emergencyManage_api.js 应急管理 接口回调 goodsManage_api.js 物资管理 接口回调 oneMap_api.js 一张图 接口回调 pipeManage_api.js 管网管理 接口回调 routingManager_api.js 巡检管理 接口回调 saveWaterManage_api.js 节水管理 接口回调 system_api.js 系统管理 接口回调 waterAnalysis_api.js 用水分析 接口回调 www_form.js 针对 www-form 的接口统一 位置 -utils │ cookie.js │ date_func.js │ el_validater.js // 基于官方的element-ui 封装的自定义表单验证（持续增加） │ fileDownloadUtil.js │ geometryUtils.js // 高德和天地图的 坐标转化 │ getDate.js │ gisUtils.js // gis的通用方法 │ inputs_valid.js // 普通的 变淡校验 │ judgeTime.js // 日期类的 比较 │ lunar_solar.js // 阴历和农历的转换 │ mapExportUtil.js // 导出gis地图 │ month_days.js │ README.md │ uuid.js //uuid │ baiduMap.js // 引入 百度地图的实例 内部有使用说明 │ gaodeMap.js // 引入 高德地图的实例 内部有使用说明 -router index.js -static -imgs *.jpg +config.js //外置配置全局变量 vue.config.js ``` // 修改为 相对路径打包 运维人员 无需 重新打包配置绝对路径 webpackConfig = { publicPath: process.env.NODE_ENV === 'production' ? `./` : './', // 配置 跨域访问 （敲黑板: 这是重点） devServer: { // proxy: proxyTable, proxy: { '/ncysgc': { target: 'http://10.100.50.77:8018', // target: 'http://10.100.50.170:8091', // target: 'http://10.100.50.197:8091', changeOrigin: true }, '/api': { target: 'http://10.100.50.155:3000', changeOrigin: true } } }, } ``` ## 项目运行 需要 配置 一、项目 main.js 加入 import 'babel-profill' 解决 IE 下的问题 二、 基于业务的 配置 放置在 moduleConfig.js 里面存放 项目的所有内置配置 (arcgis 的相关 配置 也放置其中) 三、 项目 原有框架 采用 编译时 页面，但是 原有项目 大量采用 运行时 页面，有冲突 故而所有 引入 Vue 的 地方 全部替换为 import Vue from 'vue/dist/vue.js' 可以解决冲突 四、项目 开发前 注意 删除 package.lock.json 然后下载 依赖 五、项目其他组员 更新 static/config.js时 必须重置如下部分 (敲黑板:重点) ``` // 服务端文件所在的根目录 // window.baseURL = getIndexUrl('/tongxin/'); //本地开发路径 window.baseURL = getIndexUrl(); //服务器端静态资源所在的目录 // window.static_baseUrl = getIndexUrl('/tongxin/static'); //本地静态资源所在的目录 window.static_baseUrl = getIndexUrl('/static'); ``` ## 项目接口调用配置(spring boot) /static/config.js 下 ``` window.base_api_url = ?????(注意 跟原来的写法不同 ) ``` ## 路由页面注意增加占位路由 留给外置的iframe页面 例如： ```{ path: '/alert/iframe', component: () => import('@/pages/IframeModule'), // 占位页面 主要是针对 外部链接 name: 'alertIframe', meta: { index: 112, crumbs: [{ path: '/routing/iframe', label: 'iframe页面', icon: 'analysisRegion' }], links: [{ path: '/alert/info', label: '报警信息', icon: 'materialDevice' }] } } ``` ## 全局状态（基于store） 开发使用相关功能，请参照相关的 状态文件的 开发实例 (1): 完善store的 分模块存储，用来区分相同名字的变量 (2): 强烈建议使用 异步加载数据 （store） (3): 针对store的刷新状态丢失，全部采用 基于sessionStorage的固化，来辅助状态的记忆和回放 (4): 本项目使用 命名空间定义变量， 使用和设置变量，尽量使用 'vuex'相关的功能函数 ## 纯粹 单页应用 优化路由 1、支持 浏览器地址栏刷新页面，而不会失去刷新前的状态 2、页面的回退 建议 使用 go(-1); 同时加上 this.$emit('show_aside',true); 3、页面内部跳转 添加 this.$emit('hiddenAside',false); 4、弊端 暂时没有做成祖宗级及重孙级 也就是 一个脉系的事件唤醒，暂时支持单一的 父子组件实现菜单的开关 5、路由使用二级路由嵌套、相关页面的增添 可查看相关文件 实例 6、优化 面包屑组件的监听实现; ## SVN 更新和 提交前 需要 注意的 地方 1、除了第一次上传配置文件外，任何其他人上传，必须屏蔽掉 /static/config.js ## 打包前需要新增 生产环境的 配置文件编写 现有 配置文件 仅限于 index.html 和 static 下的 config.js SVN 更新前 注意修改 如下部分 /static/config.js 就像下面这样 ``` // 服务端文件所在的根目录 window.baseURL = getIndexUrl('/tongxin/'); //本地开发路径 //window.baseURL = getIndexUrl(); //服务器端静态资源所在的目录 window.static_baseUrl = getIndexUrl('/tongxin/static'); //本地静态资源所在的目录 //window.static_baseUrl = getIndexUrl('/static'); ``` ## 引用的 包 1、 lodash 工具库 已注册全局 使用 方式 this.funTool.unil(XXX) 2、 vee-valitor 表单校验 已注册全局 关注官方教程 4、 element-ui 5、 eris-loader 6、 proj4 用于不同坐标系之间转换空间数据 7、 xlsx 用于excel数据的导入 8、 jquery 引入 9、外置脚本库 video.js 10、 外置 脚本库 my97date 11、 el-tree-transfer 多级穿梭框 12、 echarts 使用原生写法 使用 方式 this.$echarts.init(XXXXX) 使用方式 沿用 jq时代的方式，写法完全一致，不需要再造轮子 13、 dayjs 时间处理插件 使用方式 this.$days().formate('YYYY-MM-DD HH:mm:ss'); 类似写法 具体参见官方文档 14、 vue-contextmenu 重置右键绑定事件 15、 vue-photo-preview 图片预览插件 16、 vue-jsonp jsonp 跨域访问 ## 打包 注意事项 1、项目的 基本配置项中的 业务配置向项 写在 /moduleConfig.js 中 （1）、大量的 字典项 需要 调用接口 会引起 性能问题，索性放入本地，减少请求（重新部署时，需要完善或者验证字典项的 ID是否变化） 2、 项目配置浏览器图标 /public/img/icons/ 下 需要修改脚本的内部参数 方便生成该目录下 一大堆的icon 脚本很小 寥寥数行 有注释 必须配置 该目录下 必须包含两个文件 (icon_1024.png 和 safari-pinned-tab.svg svg绘制大小为16*16)