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 ? //入口文件