1. 平台主要框架/插件介绍

平台使用框架

1). Vue.js 搭建前台界面以及业务逻辑嵌套
2). Create.js - easeljs模块完成图形操作功能模块.
3). Jquery库, Dom类快速操作
4). 其他使用如: vue-draggable,jslinq,qs,element-ui等,分别针对拖拽调整层级功能,便捷数据查改,数据传输,界面交互优化.

2. 平台主要模块基本介绍

平台主要分为标注质检验收打回四个模块, 以标注模块为基础,业务逻辑在此基础上进行增删,与语音平台大同小异.
功能模块主要包含:

1). 图像加载模块
2). 图像基本操作功能 -- 拖拽,缩放,比率显示等初始化功能
3). 三个createjs实例, 分别为多边形自动打点,多边形手动打点,矩形标注,实例中包含各自实例的打点逻辑
4). 数据重绘加载模块

业务逻辑主要包含:
1). 标注属性数据显示,校验,调整
2). 标注框透明度调整
3). 后台业务逻辑实现,模块字段匹配
4). 数据保存校对,字段对接
5). 重绘数据对接
6). 整图属性标注模块
7). 图像配置模块(标注框配置/图像属性配置)

3. 模块细分以及项目目录

项目目录:

     ---src
       ---assets 
           ---css       
              ---default.css   //公共样式表
           ---easeljs    //createjs easeljs模块静态文件
           ---img    
           ---js  
              --- data.js      // 存放模拟数据  --暂时不用
              --- index.js     //axios 拦截器封装
              --- public.js    // 共用方法文件 
              --- utils.js     // 导出整图属性配置格式化方法
           ---sephirth
              --- defaut.js    //核心功能模块,加载,重绘,矩形多边形,打点功能模块
              --- e_canvastrim.js  // 图像加载自适应处理方法
       ---components
            ---markback.vue    //打回页面       
            ---mark.vue        //标注页面       
            ---qc.vue          // 质检/验收页面 (逻辑相同,接口不同)       
       ---router
            ---index.js   //路由控件
       ---template    // 公共组件目录
            ---wholepicmark       //整图标注表单目录
              ---cardForm.vue     //整图标注表单组件导出文件      
              ---FormContent.vue  //表单内容组件
              ---FormExtend.vue   //表单内容三级/四级组件
              ---FormHead.vue     //表单头部组件
            ---MarkForm           //框属性表单组件
            ---shotcutHint        //快捷键提示框组件
       ---app.vue   //入口文件
       ---main.js   //入口文件