界面搭建
在集成界面文件中增加SView for HTML5所需标签,具体可参考控件包中sview3d.html中body下标签。
<div id="mainSection" style="display: flex;width:100%;height:100%;position:absolute">
<!--三维视口-->
<div id="mainView" style="width:100%;height:100%;display:flex;position:relative;background-color:aliceblue;z-index:0;user-select:none;overflow:hidden">
<div id="sview_1" class="render_view_div">
<!--多视口-->
<div id="views" class="render_views">
<!--单个模型视口行-->
<div id="singleModel" class="render_single_div" style="">
<div id="changeCompareBasic" class="SView_change_compare_basic_button">
</div>
<!--模型一视口-->
<div id="model_1" class="render_view_div">
<p class="file_name_p" id="file_name_1"></p>
<canvas id="gesture_canvas" style="display:none;position:fixed;top:0;left: 0;z-index:-1;" langid="warning.browserNotSupportCanvas">您的浏览器不支持 canvas 标签</canvas>
<video style="display:none;" id='video' class="dx-theme-background-color" autoplay muted playsinline autobuffer></video>
<!--odaCanvas-->
<canvas id="odaCanvas" style="display: none; width: 100%; height: 100%;"></canvas>
</div>
<!--模型二视口-->
<div id="model_2" class="model_div SView-hide">
<p class="file_name_p" id="file_name_2"></p>
</div>
</div>
<!--模型比对视口行-->
<div id="modelCompare" class="model_compare_div SView-hide" style="">
<!--装配树-->
<div id="assemblyTree1" class="assemblyTree compare_assembly_tree" style="">
</div>
<div id="assemblyTree2" class="assemblyTree compare_assembly_tree" style="">
</div>
<!--模型比对视口-->
<div id="compare" class="compare_div">
<div class="description_div" id="description" style="position: absolute; display: block">
</div>
</div>
<!--模型比对结果展示-->
<div id="compareResult" class="compare_result_div">
<div id="compareResultTitle"></div>
<div id="compareResultContent" class="compare_result_content_div">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 预览PDF div -->
<div id="preViewPdf" style=" display: none;border: 1px solid #000000; box-sizing: border-box; width: 100%; height: 100%; background-color: aliceblue; z-index: 0; user-select: none; overflow: hidden ">
<iframe id="iframe_pdf" style="width:100%;height:100%;border:none;"></iframe>
</div>
</div>
<div class="newAssembleTreeInfo" style="display:none">
<div class="assembly-tree" id="setting_assembly_tree">
<div class="content_wrap">
<div class="zTreeDemoBackground left">
<ul id="ModelTree" class="ztree"></ul>
</div>
</div>
</div>
</div>