前言档案管理系统是一个完整的档案资源信息共享服务平台，通过建立统一的标准来规范整个档案管理，包括规范各业务系统的档案管理。简化的收藏功能。为企事业单位档案现代化管理提供完整的解决方案。档案管理系统可以自成一体，为用户提供完备的档案管理和网络查询功能，也可以与单位的OA办公自动化和DPM设计流程管理相结合，或与MIS信息管理系统相结合，形成更完整的档案管理系统。完善的现代化信息管理网络。随着社会的快速发展和变革，传统档案馆的内部形态发生了翻天覆地的变化，逐渐演变为现代智能档案馆。智慧档案馆依托现代科技，充分结合现代物联网技术和云计算技术，构建完善的城市智慧档案馆，实现现代社会综合管理的目标。本文主要围绕当前流行的H5技术，为现代智能档案馆提供一套WEB解决方案。代码实现场景构建本例中将使用HTUI组件进行页面布局；RelativeLayout相对布局器将用于将页面分为左、上、中三部分，VBoxLayout垂直布局器将用于将LEFT部分分为徽标、编辑器、图表三部分Graph3dView加载3D场景Graph3dView是拓扑HT组件中用于加载3D模型的组件，RelativeLayout是HT提供的UI解决方案，UI组件提供HTView组件实现拓扑和UI的融合。//初始化相对布局varrelativeLayout=newht.ui.RelativeLayout();//初始化3D拓扑varg3dView=newht.graph3d.Graph3dView();//初始化HTVIEW组件，将3D拓扑放入其中varhtView=newht.ui.HTView(g3dView);//布局器加载HTVIEW组件relativeLayout.addView(htView,{width:'match_parent',//Fillheight:'match_parent',//FillmarginTop:64,//为TOP留出空间marginLeft:250//为LEFT留出空间});在LEFT中创建作品集模型左侧的EDITOR部分使用HT的调色板组件（ht.widget.Palette）将作品集添加到调色板中，并设置为可拖动：varpalette=newht.widget.Palette();//调色板面板是将图元分成“组”，然后将图元添加到“组”即vargroup=newht.Group();//设置组为打开状态group.setExpanded(true);//设置组的描述group.setName('basicprimitive');palette.dm().add(group);//添加子图元varchildNode=newht.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();varpaletteNode=palette.dm().sm().ld();//获取调色板上最后选中的节点if(!paletteNode||!g3d.getDataAt(e))return;//获取鼠标下的节点vardata=g3d.getDataAt(e);if(data.s('shape3d')==='filecabinet.json'){//记录拖到哪个文件柜的文件包g3dView._focusData=data;}});拖动到相应位置时创建3D模型。在实际实现过程中，很难准确获取每个文件包在文件柜中的坐标位置，因此本例采用预设的方式。具体原理是先制作一个普通的隐形文件柜模型，把所有的文件袋放在里面。拖动时，将这个不可见的模型与要放置的模型重叠。这个时候你只需要判断鼠标所在点下是否可以创建3D模型即可。效果如下：g3dView.getView().addEventListener('dragover',function(e){...//旧逻辑省略//往下拖时，设置displayName为box的所有节点可见（所以你可以通过拖动获得预设模型)array.forEach(function(data){data.s('3d.visible',true);});vardata=g3d.getDataAt(e);if(data.s('shape3d')==='filecabinet.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){//获取鼠标位置模型vardata=g3dView.getDataAt(e);if(!data)return;//鼠标位置不是预设模型，跳过if(data.getDisplayName()!=='box')return;data.s('shape3d.opacity',0);//放手时将所有displayNames设置为box节点不可见array.forEach(function(data){data.s('3d.visible',false);});varnode=newht.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'){//双击事件varshape3d=e.data.s('shape3d'),parentShape3d=e.data.getParent()&&e.data.getParent().s('shape3d');if(shape3d&&shape3d.indexOf('filecabinet')>-1){//高亮文件柜showDetail(e.data);}elseif(parentShape3d&&parentShape3d.indexOf('filecabinet')>-1){showDetail(e.data.getParent());}}});showDetail=function(data){//保存到virtual前视角和优化状态的中心点eyeBack=ht.Default.clone(graph3dView.getEye());centerBack=ht.Default.clone(graph3dView.getCenter());//设置相机指向配置varopt={};选择.animation=true;opt.ratio=1;opt.direction=[1,0.5,0];opt.center=[data.getX(),100,data.getY()];graph3dView.flyTo（数据，选择）；焦点数据=数据；data.s('select.brightness',1);dataModel.each(function(d){if(d===focusData||(!d.s('3d.selectable')&&d.getTag()!=='wall')||d.getParent()===焦点数据||d.getDisplayName()==='box')返回;//设置拓扑中除要操作的柜子外的不透明度（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')}}//透明度设置为不透明度d.s({'shape3d.opacity'：不透明度，'shape3d.transparent'：true，'all.opacity'：不透明度，'all.transparent'：true，'left.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':不透明度,'bottom.transparent':true,'3d.selectable':false});});}退出模糊模式监听选中的3D拓扑变化实现g3dView.dm().ms(function(e){varlastData=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组件中实现了快速查询功能，HT组件提供了一个快速查询插件QuickFinder，本次我们将使用该插件实现简单的文件号查询//初始化输入框vartextField=newht.ui。TextField;textField.setIcon("imgs/search.json");textField.setIconPosition("left");//初始化finder，条件：idvarfinder=newht.QuickFinder(library.view.dm,"id");//在输入框中点击查询按钮时触发textField.on('p:value',function(e)){vardm=library.view.dm;varvalue=e.newValue;vardatas=finder.find(值);//当找到相应的图元时，我们选择第一个结果if(datas&&datas.size()>0){library.view.dm.sm().ss(datas.get(0));}});总结以上功能实现后，一个基本的智能档案管理系统就形成了，当然作为一个智能管理系统，这些是远远不够的，比如档案动态监控，档案室人员流动监控，视频监控，温度监控，后期可以完善灾难报警等模块。这里我们简单的为大家提供一个基于HTML5WEBGL的3D解决方案。基于同样的原理，智能楼宇、智能机房、智慧城市也可以基于此实现。最终实现链接可以查看：https://hightopo.com/demo/int...
