檔案管理系統(tǒng)是通過建立統(tǒng)一的標(biāo)準(zhǔn)以規(guī)范整個(gè)文件管理，包括規(guī)范各業(yè)務(wù)系統(tǒng)的文件管理的完整的檔案資源信息共享服務(wù)平臺(tái)，主要實(shí)現(xiàn)檔案流水化采集功能。為企事業(yè)單位的檔案現(xiàn)代化管理，提供完整的解決方案，檔案管理系統(tǒng)既可以自成系統(tǒng)，為用戶提供完整的檔案管理和網(wǎng)絡(luò)查詢功能，也可以與本單位的OA辦公自動(dòng)化和DPM設(shè)計(jì)過程管理，或者與MIS信息管理系統(tǒng)相結(jié)合，形成更加完善的現(xiàn)代化信息管理網(wǎng)絡(luò)。傳統(tǒng)檔案館隨著社會(huì)的快速發(fā)展與變化，其內(nèi)在形式上也發(fā)生了巨大變化，逐漸演變?yōu)楝F(xiàn)代智慧檔案館。智慧檔案館以現(xiàn)代科技為依托，充分結(jié)合現(xiàn)代物聯(lián)網(wǎng)技術(shù)與云計(jì)算技術(shù)構(gòu)建完善的城市智慧檔案，實(shí)現(xiàn)了現(xiàn)代社會(huì)全面管理的目標(biāo)。本文以當(dāng)前流行的 H5 技術(shù)為主，為現(xiàn)代智慧檔案館提供一套 WEB 解決方案。

在本例中，將使用 HT UI 組件對頁面實(shí)現(xiàn)布局；使用 RelativeLayout 相對布局器將頁面分為三個(gè)部分：left, top, center，使用 VBoxLayout 縱向布局器將 LEFT 部分分為 logo，editor，chart 三個(gè)部分

Graph3dView 是 HT 組件中加載 3D 模型的拓?fù)浣M件，RelativeLayout 則是 HT 提供的 UI 解決方案，UI 組件中提供 HTView 組件來實(shí)現(xiàn)拓?fù)渑c UI 的融合。

// 初始化相對布局器var relativeLayout = new ht.ui.RelativeLayout();// 初始化 3D 拓?fù)鋠ar g3dView = new ht.graph3d.Graph3dView();// 初始化 HTVIEW 組件， 并將 3D 拓?fù)浞湃肫渲衯ar htView = new ht.ui.HTView(g3dView);// 布局器加載 HTVIEW 組件relativeLayout.addView(htView, { width: match_parent , // 填滿 height: match_parent , // 填滿 marginTop: 64, // 為 TOP 留下空間 marginLeft: 250 // 為 LEFT 留下空間});

左側(cè)的 EDITOR 部分使用 HT 的調(diào)色板組件（ht.widget.Palette）, 將檔案袋添加到調(diào)色板上，并設(shè)置為可以拖拽：

var palette = new ht.widget.Palette();// palette 面板是將圖元都分在“組”里面，然后向“組”中添加圖元即可var group = new ht.Group();// 設(shè)置分組為打開的狀態(tài)group.setExpanded(true);// 設(shè)置組的說明group.setName( 基礎(chǔ)圖元 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);

在上一步中我們對調(diào)色板中的圖元屬性設(shè)置了可拖拽，此時(shí)可以實(shí)現(xiàn)拖拽圖元的動(dòng)畫。但是并不能直接將圖元拖拽到 3D 場景中，實(shí)現(xiàn)思路是：

在拖拽時(shí)獲取拖拽的圖元信息

拖拽到對應(yīng)位置時(shí)顯示可擺放位置

結(jié)束拖拽后在對應(yīng)位置創(chuàng)建對應(yīng)的 3D 模型

對應(yīng)代碼實(shí)現(xiàn)如下：

拖拽時(shí)獲取圖元信息

g3dView.getView().addEventListener( dragover , function(e) { e.preventDefault(); var paletteNode = palette.dm().sm().ld();// 獲取 palette 上最后選中的節(jié)點(diǎn)  if (!paletteNode || !g3d.getDataAt(e)) return; // 獲取鼠標(biāo)下的節(jié)點(diǎn) var data = g3d.getDataAt(e); if (data.s( shape3d ) === 檔案柜.json ) { // 記錄文件袋拖拽到的是哪個(gè)檔案柜 g3dView._focusData = data;});

拖拽到對應(yīng)位置時(shí)創(chuàng)建 3D 模型，在實(shí)際實(shí)現(xiàn)過程中由于很難準(zhǔn)確地獲取到檔案柜中每一個(gè)可以擺放檔案袋的坐標(biāo)位置，所以在本例中采用了預(yù)置的方法。具體原理就是在先創(chuàng)建一個(gè)正常不可見的檔案柜模型，并在其中將檔案袋都擺放完整，在拖拽時(shí)，將此不可見的模型與將要擺放的模型重合，此時(shí)只需判斷鼠標(biāo)所在的點(diǎn)下是否存在預(yù)置的模型存在就可以知道該處是否可以創(chuàng)建 3D 模型，實(shí)現(xiàn)效果如下：

g3dView.getView().addEventListener( dragover , function(e) {  ... // 舊邏輯省略 // 拖拽下來的時(shí)候設(shè)置 所有的 displayName 為 box 的節(jié)點(diǎn) 為可見 （這樣拖拽才能獲取到預(yù)置模型） array.forEach(function(data) { data.s( 3d.visible , true); var data = g3d.getDataAt(e); if (data.s( shape3d ) === 檔案柜.json ) { // 記錄文件袋拖拽到的是哪個(gè)檔案柜 g3dView._focusData = data; // 將預(yù)置模型移動(dòng)到拖拽的柜子坐標(biāo) shelf.p3(data.p3()); if(data.getDisplayName() === box ) { // 將對應(yīng)坐標(biāo)下預(yù)置的檔案袋模型進(jìn)行顯示 // 該屬性可修改模型的透明度，更多屬性可參考 HT 風(fēng)格手冊 data.s( shape3d.opacity , 0.8);g3dView.getView().addEventListener( drop , function(e) { // 獲取鼠標(biāo)位置模型  var data = g3dView.getDataAt(e); if(!data) return; // 鼠標(biāo)位置不是預(yù)置模型，直接跳過 if(data.getDisplayName() !== box ) return; data.s( shape3d.opacity , 0); // 放手時(shí)候設(shè)置 所有的 displayName 為 box 的節(jié)點(diǎn) 不可見 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]); // 旋轉(zhuǎn)檔案袋模型， 使其平放 node.p3(data.p3()); node.setParent(g3dView._focusData); node.setHost(g3dView._focusData);});

上面我們已經(jīng)實(shí)現(xiàn)了檔案袋拖拽至 3D 場景的效果，但是我們可以發(fā)現(xiàn)檔案袋模型遠(yuǎn)小于柜子，要將檔案袋擺放到正確的位置并不是那么容易。所以此時(shí)我們可以將需要操作的檔案柜放大到正中間，其它模型進(jìn)行虛化處理。

// 3D 拓?fù)浣换ケO(jiān)聽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) { // 重點(diǎn)突出檔案柜 showDetail(e.data); else if (parentShape3d parentShape3d.indexOf( 檔案柜 ) -1) { showDetail(e.data.getParent());showDetail = function(data) { // 保存進(jìn)入虛化狀態(tài)前 視角 與 中心點(diǎn) eyeBack = ht.Default.clone(graph3dView.getEye()); centerBack = ht.Default.clone(graph3dView.getCenter()); // 設(shè)置相機(jī)指向配置 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; // 將拓?fù)渲谐艘僮鞯墓褡?與柜子中檔案袋 以及墻外 透明度都設(shè)置為 opacity (0~1) // 保存設(shè)置前配置， 還原用 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 ) // 透明度設(shè)置為 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}

退出虛化模式，以監(jiān)控 3D 拓?fù)涞倪x中變化來實(shí)現(xiàn)

g3dView.dm().ms(function(e) { var lastData = g3dView.sm().ld(); // 判斷是否進(jìn)行虛化 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 ，此次我們就運(yùn)用該插件來實(shí)現(xiàn)簡單的檔案編號查詢

// 初始化 輸入框var textField = new ht.ui.TextField;textField.setIcon( imgs/search.json textField.setIconPosition( left // 初始化查詢器，條件：idvar finder = new ht.QuickFinder(library.view.dm, id // 輸入框點(diǎn)擊查詢按鈕時(shí)觸發(fā)textField.on( p:html' target='_blank'>value , function(e) { var dm = library.view.dm; var value = e.newValue; var datas = finder.find(value); // 查詢到對應(yīng)的圖元時(shí)，我們將第一個(gè)結(jié)果進(jìn)行選中 if (datas datas.size() 0) { library.view.dm.sm().ss(datas.get(0));});

經(jīng)過以上功能的實(shí)現(xiàn)，一個(gè)基礎(chǔ)的智慧檔案管理系統(tǒng)就成形了。當(dāng)然做為一個(gè)智慧管理系統(tǒng)，這些還是遠(yuǎn)遠(yuǎn)不夠的，例如檔案動(dòng)態(tài)監(jiān)控、檔案室內(nèi)人員走動(dòng)監(jiān)控、視頻監(jiān)控、溫度監(jiān)控、災(zāi)害報(bào)警等等模塊都是后期可以完善的地方。這里只是簡單地為大家提供了一個(gè)基于 HTML5 WEBGL 的 3D 解決方案。同樣原理，智能樓宇、智能機(jī)房、智能城市也可以基于此來實(shí)現(xiàn)。

相關(guān)推薦：

關(guān)于圖書管理系統(tǒng)驗(yàn)證管理員的有關(guān)問題

html結(jié)合工業(yè)互聯(lián)網(wǎng)實(shí)現(xiàn)智能飛機(jī)控制（附代碼）

HTML5結(jié)合互聯(lián)網(wǎng)+ 實(shí)現(xiàn)的3D隧道（附代碼）

以上就是HTML5的WebGL3D檔案館圖書可視化管理系統(tǒng)的實(shí)現(xiàn)的詳細(xì)內(nèi)容，其它編程語言

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時(shí)間聯(lián)系我們修改或刪除，多謝。