preface

File management system is a complete file resource information sharing service platform by establishing a unified standard to standardize the entire file management, including the standard of the file management of each business system, mainly to achieve the function of archival flow collection. Archives management modernization, for the enterprises and institutions to provide a complete solution, file management system can form a system, to provide users with complete records management and network query function, can also with this unit of OA office automation and DPM design process management, or combined with MIS management information system, form a more perfect modern information management network. With the rapid development and change of the society, the traditional archives have undergone great changes in its internal form and gradually evolved into modern wisdom archives. Relying on modern science and technology, smart Archive fully combines modern Internet of Things technology and cloud computing technology to build a perfect urban smart archive, realizing the goal of comprehensive management in modern society. Based on the current popular H5 technology, this paper provides a WEB solution for the modern wisdom archive.


Code implementation

Scenario building

In this case, the HT UI component is used for the layout of the page; Use the RelativeLayout layout to divide the page into three sections: left, Top, and Center. Use the VBoxLayout vertical layout to divide the left into logo, Editor, and Chart sections

Graph3dView loads 3D scenes

Graph3dView is a topology component for loading 3D models in HT. RelativeLayout is a UI solution provided by HT. HTView is provided in THE UI component to integrate topology and UI.

Var relativeLayout = new ht.ui.relativelayout (); Var g3dView = new hT.graph3d.graph3dView (); Var HTVIEW = new ht.ui.htView (g3dView); // Initialize the HTVIEW component and put the 3D topology in it. Relativelayout. addView(HTVIEW, {width: 'match_parent', // Fill height: 'match_parent', // fill in marginTop: 64, // leave space for TOP marginLeft: 250 // Leave space for LEFT

});

Copy the code

 

Create the portfolio model in LEFT

The EDITOR section on the left uses the HT Palette component (HT.Widget.Palette) to add the portfolio to the Palette and set it to drag and drop:

var palette = new ht.widget.Palette(); Palette = new ht.group (); // Palette = new ht.group (); // Set the group to the open state group.setexpanded (true); // Set the description of the group group.setname (' base primitives '); palette.dm().add(group); Var childNode = new ht.node (); childNode.setParent(group); childNode.setName(name); childNode.setImage(image); Childnode. s({'draggable': true, // true to drag 'image.stretch': 'centerUniform'}); childNode.s({'draggable': true, // true to drag 'image.stretch': 'centerUniform'}); palette.dm().add(childNode);Copy the code

Drag and drop primitives from a palette to a 3D scene

In the previous step, we set the primitives properties in the palette to be draggable, and then we can animate them by dragging them. However, it is not possible to drag primitives into 3D scenes directly. The implementation idea is as follows: 1. Obtain the information of dragged primitives when dragging them. 2. Display the available position when dragging them to the corresponding position. After drag and drop, create the corresponding 3D model in the corresponding position. The corresponding code is implemented as follows: Obtain the pixel information during drag and drop

g3dView.getView().addEventListener('dragover', function(e) { e.preventDefault(); var paletteNode = palette.dm().sm().ld(); // Get the last selected node on the Palette if (! paletteNode || ! g3d.getDataAt(e)) return; Var data = g3d.getDataat (e); If (data.s('shape3d') === 'archive.json ') {g3dview._focusData = data; }});Copy the code

The 3D model is created when the file is dragged to the corresponding position. In the actual implementation process, it is difficult to accurately obtain the coordinate position of each file bag in the file cabinet, so the preset method is adopted in this example. Specific principle is to first create a filing cabinet model of normal not visible, and in it put file cover is complete, when drag and drop, the invisible model and is going to put the model of overlap, at this time only need to determine whether the mouse’s point under existing preset model can know whether it can be to create a 3 d model, implementation effects as follows:







  

g3dView.getView().addEventListener('dragover', function(e) { ... Array. forEach(function(data) {data.s('3d.visible', true); }); var data = g3d.getDataAt(e); If (data.s('shape3d') === 'archive.json ') {g3dview._focusData = data; // Move the preset model to shelf.p3(data.p3()); } if(data.getDisplayName() === 'box') {// This property can change the transparency of the model, For more properties, see HT style manual data.s('shape3d.opacity', 0.8); }... }) g3dView.getView().adDeventListener ('drop', function(e) {var data = g3dView.getDataat (e); if(! data) return; // Mouse position is not a preset model, just skip if(data.getDisplayName()! == 'box') return; data.s('shape3d.opacity', 0); Array. forEach(function(data) {data.s('3d.visible', false); }); var node = new ht.Node(); node.s('shape3d', url); // Node.r3 ([math.pi /2, -math.pi /2, 0]); // Rotate the portfolio model so it lies flat on Node.p3 (data.p3()); node.setParent(g3dView._focusData); node.setHost(g3dView._focusData); });Copy the code

 

The effect of filing cabinet is realized

Above, we have achieved the effect of dragging the file bag to 3D scene, but we can find that the file bag model is far smaller than the cabinet, and it is not easy to place the file bag in the correct position. Therefore, at this time, we can enlarge the file cabinet to the middle of the operation, and blur other models.





    

   

Function (e){if(e.type === 'doubleClickData') {var shape3d = e.data.s('shape3d'), parentShape3d = e.data.getParent() && e.data.getParent().s('shape3d'); If (shape3d &&shape3d.indexof (' shape3d.indexof ') > -1) {// showDetail(e.ata); } else if (parentShape3d.indexof (' parentShape3D.indexof ') > -1) {showDetail(e.data.getparent ()); }}}); 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; // Set opacity (0~1) of any cabinet to be operated, file bag in the cabinet, and wall outside the topology, save the previous Settings, restore with 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': Opacity d.s('bottom.transparent'), '3d.selectable': d.s('3d.selectable')}} // Opacity is set to 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 }); }); }Copy the code

Exit the virtual mode to monitor selected changes in the 3D topology

g3dView.dm().ms(function(e) { var lastData = g3dView.sm().ld(); / / determine whether others 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; }});Copy the code

Fast query function realization

HT components have a quick query plug-in QuickFinder, this time we use the plug-in to achieve a simple file number query

Var textField = new ht.ui.textField; textField.setIcon("imgs/search.json"); textField.setIconPosition("left"); 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)); }});Copy the code

 

conclusion

After the realization of the above functions, a basic intelligent file management system will take shape. Of course, as an intelligent management system, these are far from enough, such as archive dynamic monitoring, archive room personnel walking monitoring, video monitoring, temperature monitoring, disaster alarm and other modules can be improved later. Here is a simple 3D solution based on HTML5 WEBGL. The same principle, intelligent building, intelligent computer room, intelligent city can also be based on this to achieve.

The final effect can be viewed:Hightopo.com/demo/intell…