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. For enterprises and institutions of the archives modernization management, to provide a complete solution, the archives management system can not only become a system, to provide users with complete archives management and network query function, but also with the unit of OA office automation and DPM design process management, or combined with MIS information management 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 directly drag and drop primitives into the 3D scene.

  1. Gets dragged meta information while dragging
  2. Drag to the corresponding position to display the position
  3. Create a 3D model in the corresponding position

The corresponding code is as follows:

Gets meta information while dragging

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 result can be viewed: hightopo.com/demo/intell…