项目结构优化
公用组件提取(通过配置达到多种样式的显示效果)
项目基础组件抽离
输入: input, textarea, select, radio, checkbox
点击:Button, Icon(确认,取消,清除。。。)
提示:Icon, Tooltips, Loading, NoMore / NoData
布局:Layout, Cell, Row
功能:上传资源,搜索资源,控制,拖拽,帮助/版本信息,语言国际化
项目复合通用组件抽离
登陆: Login
修改密码: ChangePassWord
用户信息展示:UserBar
肺
骨
心脏
MiniPA
Search: Filter, SearchPanel
Patient: PatientCard
Preview: Preview
Cell: 2D, 3D, VR
Report
Console: 2D, 3D
Tools: ToolsPanel
Tags: TagSelect
List: AnnoList, PatientList, PathologyList
替换:使用NPM 包@sense/care @sense/plugins替换原项目中的组件
优化完善:提取纯UI组件,抽离业务逻辑,优化配置选项
项目合并
plugins: 合并,拆分 目标:抽离出纯组件(目前有业务逻辑)
符合组件:UI与逻辑分离,抽离Controller
开发部署优化
项目合并的原因:
目前一个前端应用对应多个项目,登陆/项目主体/MIS,每次部署需要检查每个项目的branch以及pull新代码
本地开发需要启多个项目,相同UI/js部分需求/bug需要同时修改多个项目(影像阅片,影像标注,病理阅片,病理标注)
项目合并:
优化部署时间:前端目前一个应用对应多个项目,打包需要check每个项目的分支 目标(多个项目合并为一) 1周 (病理/mis先行),难点需要修改服务端逻辑,node
优化本地开发部署:完全前后端分离,数据与静态资源分离 目标(多个项目合并为一,数据与静态资源分离) 1周 (病理/mis先行)
影像难点在于websocket通信 目标(在病理项目合并后1月内搞定)
路由管理
前端hash路由,区分应用
优化开发效率/降低项目维护成本
引入Vuex数据管理替换全局事件,剔除vue-bus 1人/2周 病理阅片/标注 1人/3周 影像阅片/标注
用户体验&插件/组件通用性优化
标注:所有操作(框选/自由笔/橡皮擦/剪裁/缩放)
*websocket机器休眠断连问题
*提升应用展示与UI稿贴近度
进度条:画布,透明度(提升用户体验)
滚动加载:PageScroll(提升用户体验) 1人/ 2天组件 1人/1天同步影像阅片/标注
右键菜单:MenuContext 添加蒙层,点击,右键,滚动等事件隐藏 1人/1天同步影像阅片/标注 1人/1天病理阅片/标注
下拉菜单:添加蒙层,点击,右键,滚动等事件隐藏 1人/ 1天同步影像阅片/标注 1人/1天病理阅片/标注
提示信息: Message/MenuContext 组件和非框架环境下可用,已经初步实现,需要优化操作性能及可通用性
鼠标显示:通过css className来控制样式 1人/2周 (影像阅片,影像标注,病理阅片,病理标注)
windowJs: 全屏/退出,resize/rotate (onWindowChangeStatus, onWindowEndChange) 1人/1周初步优化【长线任务】 目标(提供窗口变动需要可能需要用到的事件,窗口变化期间的函数/结束的函数,不能出现长时间瘫痪或卡顿)
语言切换:Default >> window.navigator.language
新需求
骨盆肿瘤 2人/2周(功能) 1人/2周(修复bug,需求调整)
肺结节 2人/2周(功能) 1人/2周 修复bug,需求调整)
项目合并优化
影像阅片,影像标注:公用组件抽离,复合组件合并,plugins抽离合并 1人/1-2周(其他任务)
影像阅片,影像标注: 复合组件业务逻辑拆分,bug修复同步 1人/2周(其他任务)
影像阅片,影像标注,病理阅片,病理标注:公用组件抽离,复合组件合并,plugins抽离合并 1人/1-2周(其他任务)
影像阅片,影像标注,病理阅片,病理标注: 复合组件业务逻辑拆分,bug修复同步 1人/2周(其他任务)
项目BUG
影像阅片:bug d3/绘制类型/工具 10个 1人/1周 (目标是解决同类问题)
影像标注: bug 22个/10个工具 1人/1周
病理阅片:bug d3/绘制类型/工具 10个 1人/1周
病理标注:bug d3/绘制类型/工具 10个 1人/1周
性能优化
目前前端性能点:
b1800025.svs 1000个矩形标注点,全部资源加载完成3s左右 目标:1s
b1714033.svs 200个多边形(200个点),全部资源加载完成3s左右, 目标:1s
b1714033.svs 80个多边形(200个点),NudgeTool出现卡顿 无明显延时/流畅
标注:所有操作(框选/自由笔/橡皮擦/剪裁/缩放)#大量数据 流畅
高并发
大容量资源切片上传
GPU渲染兼容
鼠标事件优化/mouseover mousemove mousedown mouseleave / click dbclick / touchstart touchend / drag
阶段一 提升体验,提升流畅度(自由笔绘制期间卡顿问题,连续点击bug) 1人/2天
阶段二 初步提升性能 防抖节流/冒泡/捕获所引起的性能开销 1人/1周
APP开发,多端适配,原生壳子开发ios, android各2周
影像阅片 1人/2周开发 1人/2周bug修复,需求/UI调整 目标:跨端兼容
影像标注 1人/2周开发 1人/2周bug修复,需求/UI调整 目标:跨端兼容
病理阅片 1人/2周开发 1人/2周bug修复,需求/UI调整 目标:跨端兼容
病理标注 1人/2周开发 1人/2周bug修复,需求/UI调整 目标:跨端兼容
MIS项目UI优化 影像阅片,影像标注,病理阅片,病理标注 1人/3-4周
警报管理
接口/网关 调用次数以及状态(错误/超时)统计,每分钟统计一次 数据需要后端提供
前端代码错误监控 还没有好的方案
滚动加载,需要根据当前宽的高度判断请求数据,窗口变动需要调整,少了再次请求数据,多了不用请求。请求的数量后端返回结果不一定正确,不足需要再次请求。去重。。。
浏览器滚动触发事件不灵敏/卡顿/不触发 (element-ui)
滚动条不在原位置
目前框架设计的有问题,不便于多人协同开发 我得把基础组件抽出来 在弄个核心组件框架 到时候再把功能组件合进去
项目优化的目标:化繁为简/模块化/组件化/!碎片化