相容移動端的 Web 檔案館視覺化管理系統
前言
檔案管理系統是通過建立統一的標準以規範整個檔案管理，包括規範各業務系統的檔案管理的完整的檔案資源資訊共享服務平臺，主要實現檔案流水化採集功能。為企事業單位的檔案現代化管理，提供完整的解決方案，檔案管理系統既可以自成系統，為使用者提供完整的檔案管理和網路查詢功能，也可以與本單位的OA辦公自動化和DPM設計過程管理，或者與MIS資訊管理系統相結合，形成更加完善的現代化資訊管理網路。傳統檔案館隨著社會的快速發展與變化，其內在形式上也發生了巨大變化，逐漸演變為現代智慧檔案館。智慧檔案館以現代科技為依託，充分結合現代物聯網技術與雲端計算技術構建完善的城市智慧檔案，實現了現代社會全面管理的目標。本文以當前流行的 H5 技術為主，為現代智慧檔案館提供一套 WEB 解決方案。
程式碼實現
場景搭建
在本例中，將使用 HT UI 元件對頁面實現佈局；使用 RelativeLayout 相對佈局器將頁面分為三個部分：left, top, center，使用 VBoxLayout 縱向佈局器將 LEFT 部分分為 logo，editor，chart 三個部分
Graph3dView 載入 3D 場景
Graph3dView 是 HT（www.hightopo.com） 元件中載入 3D 模型的拓撲元件，RelativeLayout 則是 HT 提供的 UI 解決方案，UI 元件中提供 HTView 元件來實現拓撲與 UI 的融合。
// 初始化相對佈局器
var relativeLayout = new ht.ui.RelativeLayout();
// 初始化 3D 拓撲
var g3dView = new ht.graph3d.Graph3dView();
// 初始化 HTVIEW 元件， 並將 3D 拓撲放入其中
var htView = new ht.ui.HTView(g3dView);
// 佈局器載入 HTVIEW 元件
relativeLayout.addView(htView, {
width: 'match_parent', // 填滿
height: 'match_parent', // 填滿
marginTop: 64, // 為 TOP 留下空間
marginLeft: 250 // 為 LEFT 留下空間
});
建立 LEFT 中的檔案袋模型
左側的 EDITOR 部分使用 HT 的調色盤元件（ht.widget.Palette）, 將檔案袋新增到調色盤上，並設定為可以拖拽：
var palette = new ht.widget.Palette();
// palette 皮膚是將圖元都分在“組”裡面，然後向“組”中新增圖元即可
var group = new ht.Group();
// 設定分組為開啟的狀態
group.setExpanded(true);
// 設定組的說明
group.setName('基礎圖元');
palette.dm().add(group);
// 新增子圖元
var childNode = new ht.Node();
childNode.setParent(group);
childNode.setName(name);
childNode.setImage(image);
childNode.s({
'draggable': true, // true 為可拖拽
'image.stretch': 'centerUniform' // 圖片申展方式
});
palette.dm().add(childNode);
實現從調色盤中將圖元拖拽至 3D 場景
在上一步中我們對調色盤中的圖元屬性設定了可拖拽，此時可以實現拖拽圖元的動畫。但是並不能直接將圖元拖拽到 3D 場景中，實現思路是：
- 在拖拽時獲取拖拽的圖元資訊
- 拖拽到對應位置時顯示可擺放位置
- 結束拖拽後在對應位置建立對應的 3D 模型
對應程式碼實現如下：
拖拽時獲取圖元資訊
g3dView.getView().addEventListener('dragover', function(e) {
e.preventDefault();
var paletteNode = palette.dm().sm().ld();// 獲取 palette 上最後選中的節點
if (!paletteNode || !g3d.getDataAt(e)) return;
// 獲取滑鼠下的節點
var data = g3d.getDataAt(e);
if (data.s('shape3d') === '檔案櫃.json') {
// 記錄檔案袋拖拽到的是哪個檔案櫃
g3dView._focusData = data;
}
});
拖拽到對應位置時建立 3D 模型，在實際實現過程中由於很難準確地獲取到檔案櫃中每一個可以擺放檔案袋的座標位置，所以在本例中採用了預置的方法。具體原理就是在先建立一個正常不可見的檔案櫃模型，並在其中將檔案袋都擺放完整，在拖拽時，將此不可見的模型與將要擺放的模型重合，此時只需判斷滑鼠所在的點下是否存在預置的模型存在就可以知道該處是否可以建立 3D 模型，實現效果如下：
g3dView.getView().addEventListener('dragover', function(e) {
... // 舊邏輯省略
// 拖拽下來的時候設定 所有的 displayName 為 box 的節點 為可見 （這樣拖拽才能獲取到預置模型）
array.forEach(function(data) {
data.s('3d.visible', true);
});
var data = g3d.getDataAt(e);
if (data.s('shape3d') === '檔案櫃.json') {
// 記錄檔案袋拖拽到的是哪個檔案櫃
g3dView._focusData = data;
// 將預置模型移動到拖拽的櫃子座標
shelf.p3(data.p3());
}
if(data.getDisplayName() === 'box') {
// 將對應座標下預置的檔案袋模型進行顯示
// 該屬性可修改模型的透明度，更多屬性可參考 HT 風格手冊
data.s('shape3d.opacity', 0.8);
}
...
})
g3dView.getView().addEventListener('drop', function(e) {
// 獲取滑鼠位置模型
var data = g3dView.getDataAt(e);
if(!data) return;
// 滑鼠位置不是預置模型，直接跳過
if(data.getDisplayName() !== 'box') return;
data.s('shape3d.opacity', 0);
// 放手時候設定 所有的 displayName 為 box 的節點 不可見
array.forEach(function(data) {
data.s('3d.visible', false);
});
var node = new ht.Node();
node.s('shape3d', url); // 檔案袋 3D 模型地址
node.r3([Math.PI/2, -Math.PI/2, 0]); // 旋轉檔案袋模型， 使其平放
node.p3(data.p3());
node.setParent(g3dView._focusData);
node.setHost(g3dView._focusData);
});
檔案櫃虛化效果實現
上面我們已經實現了檔案袋拖拽至 3D 場景的效果，但是我們可以發現檔案袋模型遠小於櫃子，要將檔案袋擺放到正確的位置並不是那麼容易。所以此時我們可以將需要操作的檔案櫃放大到正中間，其它模型進行虛化處理。
// 3D 拓撲互動監聽
g3dView.mi(function(e){
if(e.kind === 'doubleClickData') {
// 雙擊事件
var shape3d = e.data.s('shape3d'),
parentShape3d = e.data.getParent() && e.data.getParent().s('shape3d');
if (shape3d && shape3d.indexOf('檔案櫃') > -1) {
// 重點突出檔案櫃
showDetail(e.data);
}
else if (parentShape3d && parentShape3d.indexOf('檔案櫃') > -1) {
showDetail(e.data.getParent());
}
}
});
showDetail = function(data) {
// 儲存進入虛化狀態前 視角 與 中心點
eyeBack = ht.Default.clone(graph3dView.getEye());
centerBack = ht.Default.clone(graph3dView.getCenter());
// 設定相機指向配置
var opt = {};
opt.animation = true;
opt.ratio = 1;
opt.direction = [1, 0.5, 0];
opt.center = [data.getX(), 100, data.getY()];
graph3dView.flyTo(data, opt);
focusData = data;
data.s('select.brightness', 1);
dataModel.each(function (d) {
if (d === focusData || (!d.s('3d.selectable') && d.getTag() !== 'wall')
|| d.getParent() === focusData || d.getDisplayName() === 'box') return;
// 將拓撲中除了要操作的櫃子 與櫃子中檔案袋 以及牆外 透明度都設定為 opacity (0~1)
// 儲存設定前配置， 還原用
if (!opacityMap[d.getId()]) {
opacityMap[d.getId()] = {
'shape3d.opacity': d.s('shape3d.opacity'),
'shape3d.transparent': d.s('shape3d.transparent'),
'all.opacity': d.s('all.opacity'),
'all.transparent': d.s('all.transparent'),
'left.opacity': d.s('left.opacity'),
'left.transparent': d.s('left.transparent'),
'right.opacity': d.s('right.opacity'),
'right.transparent': d.s('right.transparent'),
'front.opacity': d.s('front.opacity'),
'front.transparent': d.s('front.transparent'),
'back.opacity': d.s('back.opacity'),
'back.transparent': d.s('back.transparent'),
'top.opacity': d.s('top.opacity'),
'top.transparent': d.s('top.transparent'),
'bottom.opacity': d.s('bottom.opacity'),
'bottom.transparent': d.s('bottom.transparent'),
'3d.selectable': d.s('3d.selectable')
}
}
// 透明度設定為 opacity
d.s({
'shape3d.opacity': opacity,
'shape3d.transparent': true,
'all.opacity': opacity,
'all.transparent': true,
'left.opacity': opacity,
'left.transparent': true,
'right.opacity': opacity,
'right.transparent': true,
'front.opacity': opacity,
'front.transparent': true,
'back.opacity': opacity,
'back.transparent': true,
'top.opacity': opacity,
'top.transparent': true,
'bottom.opacity': opacity,
'bottom.transparent': true,
'3d.selectable': false
});
});
}
退出虛化模式，以監控 3D 拓撲的選中變化來實現
g3dView.dm().ms(function(e) {
var lastData = g3dView.sm().ld();
// 判斷是否進行虛化
if(focusData) {
if(lastData === focusData || (lastData && lastData.getParetn() === focusData)) return;
g3dView.setEye(eyeBack);
g3dView.setCenter(centerBack);
// 還原模型的原透明度
g3dView.dm().each(function (d) {
if (d === focusData) return;
d.s(opacityMap[d.getId()]);
});
focusData.s('select.brightness', 0.7);
focusData = null;
eyeBack = null;
centerBack = null;
}
});
快速查詢功能實現
在 HT 的元件中有提供快速查詢外掛 QuickFinder ，此次我們就運用該外掛來實現簡單的檔案編號查詢
// 初始化 輸入框
var textField = new ht.ui.TextField;
textField.setIcon("imgs/search.json");
textField.setIconPosition("left");
// 初始化查詢器，條件：id
var finder = new ht.QuickFinder(library.view.dm, "id");
// 輸入框點選查詢按鈕時觸發
textField.on('p:value', function(e) {
var dm = library.view.dm;
var value = e.newValue;
var datas = finder.find(value);
// 查詢到對應的圖元時，我們將第一個結果進行選中
if (datas && datas.size() > 0) {
library.view.dm.sm().ss(datas.get(0));
}
});
總結
經過以上功能的實現，一個基礎的智慧檔案管理系統就成形了。當然做為一個智慧管理系統，這些還是遠遠不夠的，例如檔案動態監控、檔案室內人員走動監控、視訊監控、溫度監控、災害報警等等模組都是後期可以完善的地方。這裡只是簡單地為大家提供了一個基於 HTML5 WEBGL 的 3D 解決方案。同樣原理，智慧樓宇、智慧機房、智慧城市也可以基於此來實現。
最終效果可檢視：https://hightopo.com/demo/intelligent-archives/
相關文章
- 基於 WebGL 3D 的 HTML5檔案館視覺化管理系統Web3DHTML視覺化
- 基於 HTML5 的 WebGL 3D 檔案館視覺化管理系統HTMLWeb3D視覺化
- 構建檔案館發展新趨勢：智慧檔案館三維視覺化方案視覺化
- 用web視覺化開發工具定製工程專案全生命週期管理系統Web視覺化
- 智慧小程式檔案館——檔案系統能力
- 基於Web的數字孿生三維視覺化綜合管理系統Web視覺化
- 中移動香港攜手8Manage實現視覺化專案管理視覺化專案管理
- 智慧小程式檔案館——版本相容
- 遠端檔案管理系統（SpringBoot + Vue）Spring BootVue
- 標籤化檔案管理系統
- 基於 vue 的移動端頁面視覺化搭建工具思路Vue視覺化
- 檔案管理系統助力檔案資訊化建設
- 騰訊通RTX最佳升級遷移指南，相容移動端及Linux系統Linux
- 搭建政務民生視覺化管理系統 | 智慧城市視覺化
- 如何在移動端資料視覺化大屏實現分析？視覺化
- 工業綠色發展視覺化管理——高爐鍊鐵廠視覺化系統視覺化
- 數維圖智慧化工園區Web3d視覺化綜合管理系統Web3D視覺化
- 高效視覺化的港口碼頭集裝箱管理系統視覺化
- css在移動端常遇到的檔案CSS
- Araxis Merge Pro 2022,視覺化檔案視覺化
- 智慧運維：基於 BIM 技術的視覺化管理系統運維視覺化
- 活動視覺化搭建系統——你的KPI被我承包了視覺化KPI
- docker registry（私庫）搭建，使用，WEB視覺化管理部署DockerWeb視覺化
- Rosbag使用：bag檔案視覺化實現ROS視覺化
- 二進位制檔案視覺化（二）視覺化
- 如何實現視覺化、智慧化、自動化的檔案採集？一文了解！視覺化
- [譯] Dweb: 基於 IPFS 的去中心化 Web 檔案系統 (中英)Web中心化
- Web移動端佈局Web
- charles抓取web端移動端httpsWebHTTP
- CRM系統中的文件檔案管理
- 磁碟管理與檔案系統
- 智慧市政視覺化綜合管理系統 提升城市“智治力”視覺化
- FMCS廠務監控系統，全廠三維視覺化管理視覺化
- 彈簧系統三維視覺化視覺化
- 移動檔案
- 智慧小程式檔案館——遠端除錯除錯
- 基於HTML5的移動Web應用——檔案操作HTMLWeb
- 移動端web適配方案Web