医院运维管理平台(模板)

医院运维管理平台前端(模板)实现方法

1.调用库函数

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="../static/css/BigData.css" rel="stylesheet" type="text/css" />
    <link href="../static/css/index.css" rel="stylesheet" type="text/css" />
    <link href="../static/css/index01.css" rel="stylesheet" type="text/css" />
    <script src="../static/js/jquery.js"></script>
    <link href="../static/js/bstable/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="../static/js/bstable/css/bootstrap-table.css" rel="stylesheet" type="text/css" />
    <link href="../static/css/Security_operation.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="../static/js/artDialog/skins/default.css" type="text/css" />
    <script src="../static/js/laydate.js"></script>
    <script src="../static/js/Home_page.js"></script>
    <script src="../static/js/echarts-all.js"></script>
    <script src="../static/js/index.js"></script>
    <script src="../static/js/bstable/js/bootstrap.min.js"></script>
    <script src="../static/js/bstable/js/bootstrap-table.js"></script>
    <script type="text/javascript" src="../static/js/jquery.pagination.js"></script>
    <script src="../static/js/bstable/js/bootstrap-table-zh-CN.min.js"></script>
    <script type="text/javascript"
        src="http://api.map.baidu.com/api?v=2.0&ak=5ieMMexWmzB9jivTq6oCRX9j&callback"></script>

    <script src="../static/js/Home_page.js"></script>
    <script src="../static/js/artDialog/artDialog.js"></script>
    <script src="../static/js/artDialog/plugins/iframeTools.source.js"></script>
    <script src="https://static.bimface.com/api/BimfaceSDKLoader/BimfaceSDKLoader@latest-release.js"
        charset="utf-8"></script>
    <meta charset="UTF-8">
    <title>医院智慧管理平台</title>

2.调用BIMFACE的在线数据包

    <script src="https://static.bimface.com/api/BimfaceSDKLoader/BimfaceSDKLoader@latest-release.js"
        charset="utf-8">
    </script>

</head>

3.创建索引按钮

<body>
    <div class="data_bodey">
        <div class="index_nav">
            <ul style="height: 30px; margin-bottom: 0px;">
                <li class="l_left total_chose_fr nav_active">BIM模型</li>
                <li class="l_left total_chose_pl">信息机房</li>
                <li class="l_left total_chose_pl">负压病房</li>
                <li class="r_right total_chose_pl">防涝</li>
                <li class="r_right total_chose_pl">检验检疫科</li>
                <li class="r_right total_chose_pl">病理实验室</li>
            </ul>

4.创建筛选框


          <div class="total_chose_box" style="display: none;margin-top: 1%;">
                <div style="height: 32px;"></div>
                <span class="chose_tltle">请选择年份:</span>
                <select class="year_chose">
                    <option>2021</option>
                    <option>2020</option>
                    <option>2019</option>
                    <option>2018</option>
                    <option>2017</option>
                    <option>2016</option>
                </select>
                <span class="chose_tltle">请输入月份:</span>
                <input class="chose_text_in">
                <span class="chose_tltle">请选择区域:</span>
                <select class="year_chose">
                    <option>负压病房</option>
                    <option>病理实验室</option>
                    <option>检验科</option>
                    <option>防涝</option>
                    <option>信息机房</option>
                </select>
                <button class="chose_enter">确定</button>
            </div>

5.创建BIM模型页面

<div class="inner" style="height: 100%;">
                <div class="right_cage" style="width: 98%;height: 100%;margin-top: 4%;border-radius: 10px;">
                    <div class="111" style="height: 100%;width: 98%;border-radius: 10px;margin: right 100px;">

6.显示调用的BIM轻量化模型

<div class="item" id="domId" style="height: 98%;width: 100%;"></div>
                        <div id="container_huan"></div> 
                    </div>
                </div>
            </div>

7.创建信息机房页面并放置温湿度显示框

<div class="inner" style="display: none; margin-top: 3%;">
                <div class="data_left01">
                    <div class="dataAll maginS">
                        <div class="dataAllBorder01">
                            <div class="dataAllBorder02">
                                <div class="data_tit1">温湿度</div>
                                <p class="data_chart" id="rodeAbook"></p>
                                <div class="data_chart" id="buyTime">
                                </div> 
                            </div>
                        </div>
                    </div>

8.创建烟感显示框

                    <div class="dataAll">
                        <div class="dataAllBorder01">
                            <div class="dataAllBorder02">
                                <div class="data_tit1">烟感</div>
                                <p class="data_chart" id="bookAret"></p>
                            </div>
                        </div>
                    </div>

9.创建渗水显示框

                    <div class="dataAll">
                        <div class="dataAllBorder01">
                            <div class="dataAllBorder02">
                                <div class="data_tit1">渗水</div>
                                <p class="data_chart" id="whearAbook"></p>
                            </div>
                        </div>
                    </div>
                </div>

10创建视频管理框

                <div class="data_left02" style="width: 53%;height: 100%;">
                    <div class="dataAll01">
                        <div class="dataAllBorder01">
                            <div class="dataAllBorder02">
                                <div class="data_tit2">视频管理</div>
                                <!-- <div class="total_chose_box" style="display:none; height: 6%;">
                                    <div style="height: 5px;"></div>
                                    <span class="chose_tltle">请输入日期:</span>
                                    <input class="chose_text_in">
                                    <span class="chose_tltle">请选择区域:</span>
                                    <select class="year_chose">
                                        <option>负压病房</option>
                                        <option>病理实验室</option>
                                        <option>检验科</option>
                                        <option>防涝</option>
                                        <option>信息机房</option>
                    
                                    </select>
                                    <button class="chose_enter">确定</button>
                                </div> -->
                                <div class="dataAllBorder01 cage_cl" style="margin-top: 0 !important; height: 96%;">
                                    <div class="video_around video_around_chose" style="width: 50%;background-color: black;"><video width="100%" height="100%" autoplay loop src="../static/video/video_1.mp4"></video></div>
                                    <div class="video_around" style="width: 50%;background-color: black;"><video width="100%" height="100%" autoplay loop src="../static/video/video_2.mp4"></video></div>
                                    <div class="video_around" style="width: 50%;background-color: black;"><video width="100%" height="100%" autoplay loop src="../static/video/video_3.mp4"></video></div>
                                    <div class="video_around" style="width: 50%;background-color: black;"><video width="100%" height="100%" autoplay loop src="../static/video/video_4.mp4"></video></div>
                                        <!-- <img class="video_around video_around_chose" style="width: 50%;" src="../static/video/video.jpg">
                                        <img class="video_around" style="width: 50%;" src="../static/video/video.jpg">
                                        <img class="video_around" style="width: 50%;" src="../static/video/video.jpg">
                                        <img class="video_around" style="width: 50%;" src="../static/video/video.jpg"> -->
                                </div>
                            </div>
                        </div>
                    </div>

11.创建告警管理魔术盒

                    <div class="dataAll02">
                        <div class="dataAllBorder01">
                            <div class="dataAllBorder02" style="overflow: hidden;">
                                <div class="data_tit1">告警管理</div>
                                <div id="container2_1" style="height: 100%;">
                                    <div class="scroll">
                                        <div class="scroll_tool_box">
                                        <a class="scroll_tool" href="#">查看历史</a>
                                        </div>
                                      <div class="message_scroll_box">
                                        <div class="message_scroll_box_inner">
                                          <div class="message_scroll">
                                            <div class="scroll_top">
                                              <span class="scroll_title">构件告警提示</span>
                                              <span class="scroll_level scroll_level01">一级</span>
                                              <a class="localize"></a>
                                              <span class="scroll_timer">17-09-13/9:52</span>
                                            </div>
                                            <div class="msg_cage">
                                              <a class="localize_title">下载</a>
                                            </div>
                                            <div class="msg_cage">
                                              <a class="localize_msg">地址</a>
                                            </div>
                                          </div>
                          
                                          <div class="message_scroll">
                                            <div class="scroll_top">
                                              <span class="scroll_title">构件告警提示</span>
                                              <span class="scroll_level scroll_level01">二级</span>
                                              <a class="localize"></a>
                                              <span class="scroll_timer">17-09-13/9:52</span>
                                            </div>
                                            <div class="msg_cage">
                                              <a class="localize_title">下载</a>
                                            </div>
                                            <div class="msg_cage">
                                              <a class="localize_msg">地址</a>
                                            </div>
                                          </div>
                          
                                          <div class="message_scroll">
                                            <div class="scroll_top">
                                              <span class="scroll_title">构件告警提示</span>
                                              <span class="scroll_level scroll_level01">三级</span>
                                              <a class="localize"></a>
                                              <span class="scroll_timer">17-09-13/9:52</span>
                                            </div>
                                            <div class="msg_cage">
                                              <a class="localize_title">下载</a>
                                            </div>
                                            <div class="msg_cage">
                                              <a class="localize_msg">地址</a>
                                            </div>
                                          </div>
                                        </div>
                                      </div>

                                    </div>
                                  </div>
                            </div>
                        </div>
                    </div>
                </div>

12.创建负压病房页面,其中包含了温湿度、水阀反馈、压力监测、出水阀监测、板面温湿度监测的功能图表框

            <div class="inner" style="display:none;margin-top: 3%;">
                <div class="data_left03">
                    <div class="dataAllNo01 maginS01">
                        <div class="dataAllBorder01">
                            <div class="dataAllBorder02" style="height: 50%;">
                                <div class="data_tit3">温湿度</div>
                                <p class="data_chart01" id="zhanbi02"></p>
                            </div>
                            <div class="dataAllBorder02" style="height: 50%;">
                                <div class="data_tit3">水阀反馈</div>
                                <p class="rodeAbook1" id="rodeAbook1"></p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="data_left04">
                    <div class="dataAllNo01">
                        <div class="dataAllBorder01">
                            <div class="dataAllBorder02" style="height: 60%;">
                                <div class="data_tit3">压力监测</div>
                                <table class="table_data02">
                                    <tr>
                                        <td class="font07">AQI</td>
                                        <td class="font03">优</td>
                                        <td class="font07">PM2.5(24h平均)</td>
                                        <td class="font02">0.15 Mg/m³</td>
                                    </tr>
                                    <tr>
                                        <td class="font07">臭氧</td>
                                        <td class="font01">60 ug/ml</td>
                                        <td class="font07">PM10 (24h平均)</td>
                                        <td class="font01">50 ug/m³</td>
                                    </tr>
                                </table>
                                <p>
                                <div class="zhanleft01" id="allAly01"></div> -->
                                </p> -->
                            </div>
                            <div class="dataAllBorder02" style="height: 40%;">
                                <div class="data_tit3">出水阀监测</div>
                                <p>
                                    <div class="zhanleft01" id="allAly02"></div> -->
                                    </p> -->
                            </div>
                        </div>
                    </div>
                </div>
                <div class="data_left03">
                    <div class="dataAllNo01 maginS01">
                        <div class="dataAllBorder01">
                            <div class="dataAllBorder02">
                                <div class="data_tit3">板面温湿度</div>
                                <p class="data_chart01" id="zhanbi03"></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

13.创建防涝页面,其中包含了水位分析、防涝事件统计、事件等级分析、事件占比分析的功能框

<div class="inner" style="display: none;margin-top: 3%;">
                <div class="clear"></div>
                <div class="data_left05">
                    <div class="dataAllNo02 ">
                        <div class="dataAllBorder01">
                            <div class="dataAllBorder02">
                                <div class="data_tit">水位分析</div>
                                <p class="data_chart02" id="shijian01"></p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="data_left05">
                    <div class="dataAllNo02 ">
                        <div class="dataAllBorder01">
                            <div class="dataAllBorder02">
                                <div class="data_tit">防涝事件统计</div>
                                <table class="table_data02">
                                    <tr>
                                        <td class="font07">事件类型:</td>
                                        <td class="font03">个</td>
                                        <td class="font07">止损金额:</td>
                                        <td class="font02">567万</td>
                                    </tr>
                                    <tr>
                                        <td class="font07">最多发生事件:</td>
                                        <td class="font01">医疗事件</td>
                                        <td class="font07">最少发生事件:</td>
                                        <td class="font01">其他事件</td>
                                    </tr>
                                </table>
                                <p class="data_chart02" id="shijian03"></p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="clear"></div>
                <div class="data_left05">
                    <div class="dataAllNo02">
                        <div class="dataAllBorder01">
                            <div class="dataAllBorder02">
                                <div class="data_tit">事件等级分析</div>
                                <p class="data_chart02" id="shijian02"></p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="data_left05">
                    <div class="dataAllNo02">
                        <div class="dataAllBorder01">
                            <div class="dataAllBorder02">
                                <div class="data_tit">事件占比分析</div>
                                <p class="data_chart03" id="shijian04"></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

14.创建检验检疫科页面,其中包含了设备数量汇总、设备精度分析、设备产地分析、设备功能分析、设备使用情况分析、用电量情况分析、气溶胶浓度分析、年用电量分析等功能的图表框

<div class="inner" style="display: none ;margin-top: 3%;">
                <div class="manage_left l_left">
                    <div class="manage_line1">
                        <div class="manage_line2">
                            <div class="manage_top_middle">
                                <table class="table table-bordered">
                                    <tbody>
                                        <tr>
                                            <td>设备总数(台)</td>
                                            <td colspan="3">2541</td>
                                        </tr>
                                        <tr>
                                            <td>精密电器设备(台)</td>
                                            <td colspan="3">541</td>
                                        </tr>
                                        <tr>
                                            <td>普通电器设备(台)</td>
                                            <td colspan="3">2000</td>
                                        </tr>
                                        <tr>
                                            <td>生化类(台)</td>
                                            <td>424</td>
                                            <td>血球类(台)</td>
                                            <td>457</td>
                                        </tr>
                                        <tr>
                                            <td>血凝类(台)</td>
                                            <td>24</td>
                                            <td>免疫类(台)</td>
                                            <td>57</td>
                                        </tr>
                                    </tbody>
                                </table>
                                <p>检验检疫科设备数量汇总</p>
                            </div>
                            <div class="manage_left_top">
                                <div class="manage_top_left l_left">
                                    <div id="container2" style="height: 90%"></div>
                                    <p>设备精度分析</p>
                                </div>
                                <div class="manage_top_left l_left">
                                    <div id="container1" style="height: 90%"></div>
                                    <p>设备产地分析</p>
                                </div>
                                <div class="manage_top_left l_left">
                                    <div id="container3" style="height:90%"></div>
                                    <p>设备功能分析</p>
                                </div>
                            </div>
                            <div class="manage_top_middle">
                                <div id="container4" style="height: 90%"></div>
                                <p>仪器使用情况分析</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="manage_left l_left">
                    <div class="manage_line1">
                        <div class="manage_line2">
                            <div class="manage_top_middle l_left">
                                <div id="container9" style="height: 90%"></div>
                                <p>用电量情况分析</p>
                            </div>
                            <div class="manage_top_middle l_left">
                                <div id="container10" style="height: 90%"></div>
                                <p>气溶胶浓度分析</p>
                            </div>
                            <div class="manage_top_middle l_left">
                                <div id="container11" style="height: 90%"></div>
                                <p>年用电量分析</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="manage_left l_left">
                    <div class="manage_line1">
                        <div class="manage_line2">
                            <div class="manage_top_middle">
                                <div id="container12" style="height: 90%"></div>
                                <p>取材VOC含量</p>
                            </div>
                            <div class="manage_top_middle">
                                <div id="container6" style="height: 90%"></div>
                                <p>染色VOC含量</p>
                            </div>
                            <div class="manage_top_middle l_left">
                                <div id="container5" style="height: 90%"></div>
                                <p>温湿度检测</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

15.创建病理实验室页面,其中包含了设备运行情况、标本甲醛、取材甲醛、取材新风、取材VOC含量、染色VOC含量等功能的图表框

<div class="inner" style="display: none; margin-top: 3%;">
                <div class="user_left l_left" style=" margin-left: 0.6%"> 
                    <div class="user_line1">
                        <div class="user_line2">
                            <div class="user_top_middle" style="height: 100%;">
                                <p>设备运行情况</p>
                                <table class="table table-bordered">
                                    <tbody >
                                        <tr>
                                        <td>排风</td>
                                        <td>新风</td>-->
                                        <td>除臭</td>
                                        <td>取材离子</td>
                                        </tr>
                                        <tr >
                                        <td style="color: red;">MTT-800</td>
                                        <td style="color:greenyellow;">MTT-1000</td>-->
                                        <td style="color:red">UV光氧-1200</td>
                                        <td style="color:greenyellow">等离子-1500</td>
                                        </tr>
                                        <tr >
                                        <td style="color: red;">MTT-800</td>
                                        <td style="color:greenyellow;">MTT-1000</td>-->
                                        <td style="color:red">UV光氧-1200</td>
                                        <td style="color:greenyellow">等离子-1500</td>
                                        </tr>
                                        <tr >
                                        <td style="color: red;">MTT-800</td>
                                        <td style="color:greenyellow;">MTT-1000</td>-->
                                        <td style="color:red">UV光氧-1200</td>
                                        <td style="color:greenyellow">等离子-1500</td>
                                        </tr>
                                        <tr >
                                        <td style="color: red;">MTT-800</td>
                                        <td style="color:greenyellow;">MTT-1000</td>-->
                                        <td style="color:red">UV光氧-1200</td>
                                        <td style="color:greenyellow">等离子-1500</td>
                                        </tr>
                                        <tr >
                                        <td style="color: red;">MTT-800</td>
                                        <td style="color:greenyellow;">MTT-1000</td>-->
                                        <td style="color:red">UV光氧-1200</td>
                                        <td style="color:greenyellow">等离子-1500</td>
                                        </tr>
                                        <tr >
                                        <td style="color: red;">MTT-800</td>
                                        <td style="color:greenyellow;">MTT-1000</td>-->
                                        <td style="color:red">UV光氧-1200</td>
                                        <td style="color:greenyellow">等离子-1500</td>
                                        </tr>
                                        <tr >
                                        <td style="color: red;">MTT-800</td>
                                        <td style="color:greenyellow;">MTT-1000</td>-->
                                        <td style="color:red">UV光氧-1200</td>
                                        <td style="color:greenyellow">等离子-1500</td>
                                        </tr>
                                        <tr >
                                        <td style="color: red;">MTT-800</td>
                                        <td style="color:greenyellow;">MTT-1000</td>-->
                                        <td style="color:red">UV光氧-1200</td>
                                        <td style="color:greenyellow">等离子-1500</td>
                                        </tr>
                                        <tr >
                                        <td style="color: red;">MTT-800</td>
                                        <td style="color:greenyellow;">MTT-1000</td>-->
                                        <td style="color:red">UV光氧-1200</td>
                                        <td style="color:greenyellow">等离子-1500</td>
                                        </tr>
                                        <tr >
                                        <td style="color: red;">MTT-800</td>
                                        <td style="color:greenyellow;">MTT-1000</td>-->
                                        <td style="color:red">UV光氧-1200</td>
                                        <td style="color:greenyellow">等离子-1500</td>
                                        </tr>
                                        <tr >
                                        <td style="color: red;">MTT-800</td>
                                        <td style="color:greenyellow;">MTT-1000</td>-->
                                        <td style="color:red">UV光氧-1200</td>
                                        <td style="color:greenyellow">等离子-1500</td>
                                        </tr>
                                        <tr >
                                        <td style="color: red;">MTT-800</td>
                                        <td style="color:greenyellow;">MTT-1000</td>-->
                                        <td style="color:red">UV光氧-1200</td>
                                        <td style="color:greenyellow">等离子-1500</td>
                                        </tr>
                                        <tr >
                                        <td style="color: red;">MTT-800</td>
                                        <td style="color:greenyellow;">MTT-1000</td>-->
                                        <td style="color:red">UV光氧-1200</td>
                                        <td style="color:greenyellow">等离子-1500</td>
                                        </tr>
                                        <tr >
                                        <td style="color: red;">MTT-800</td>
                                        <td style="color:greenyellow;">MTT-1000</td>-->
                                        <td style="color:red">UV光氧-1200</td>
                                        <td style="color:greenyellow">等离子-1500</td>
                                        </tr>
                                        <tr >
                                        <td style="color: red;">MTT-800</td>
                                        <td style="color:greenyellow;">MTT-1000</td>-->
                                        <td style="color:red">UV光氧-1200</td>
                                        <td style="color:greenyellow">等离子-1500</td>
                                        </tr>
                                        <tr >
                                        <td style="color: red;">MTT-800</td>
                                        <td style="color:greenyellow;">MTT-1000</td>-->
                                        <td style="color:red">UV光氧-1200</td>
                                        <td style="color:greenyellow">等离子-1500</td>
                                        </tr>
                                        <tr >
                                        <td style="color: red;">MTT-800</td>
                                        <td style="color:greenyellow;">MTT-1000</td>-->
                                        <td style="color:red">UV光氧-1200</td>
                                        <td style="color:greenyellow">等离子-1500</td>
                                        </tr>
                                        <tr >
                                        <td style="color: red;">MTT-800</td>
                                        <td style="color:greenyellow;">MTT-1000</td>-->
                                        <td style="color:red">UV光氧-1200</td>
                                        <td style="color:greenyellow">等离子-1500</td>
                                        </tr>
                                        <tr >
                                        <td style="color: red;">MTT-800</td>
                                        <td style="color:greenyellow;">MTT-1000</td>-->
                                        <td style="color:red">UV光氧-1200</td>
                                        <td style="color:greenyellow">等离子-1500</td>
                                        </tr>
                                        <tr >
                                        <td style="color: red;">MTT-800</td>
                                        <td style="color:greenyellow;">MTT-1000</td>-->
                                        <td style="color:red">UV光氧-1200</td>
                                        <td style="color:greenyellow">等离子-1500</td>
                                        </tr>
                                        <tr >
                                        <td style="color: red;">MTT-800</td>
                                        <td style="color:greenyellow;">MTT-1000</td>-->
                                        <td style="color:red">UV光氧-1200</td>
                                        <td style="color:greenyellow">等离子-1500</td>
                                        </tr>
                                        <tr >
                                        <td style="color: red;">MTT-800</td>
                                        <td style="color:greenyellow;">MTT-1000</td>-->
                                        <td style="color:red">UV光氧-1200</td>
                                        <td style="color:greenyellow">等离子-1500</td>
                                        </tr>
                                        <tr >
                                        <td style="color: red;">MTT-800</td>
                                        <td style="color:greenyellow;">MTT-1000</td>-->
                                        <td style="color:red">UV光氧-1200</td>
                                        <td style="color:greenyellow">等离子-1500</td>
                                        </tr>
                                        <tr >
                                        <td style="color: red;">MTT-800</td>
                                        <td style="color:greenyellow;">MTT-1000</td>-->
                                        <td style="color:red">UV光氧-1200</td>
                                        <td style="color:greenyellow">等离子-1500</td>
                                        </tr>
                                        <tr >
                                        <td style="color: red;">MTT-800</td>
                                        <td style="color:greenyellow;">MTT-1000</td>-->
                                        <td style="color:red">UV光氧-1200</td>
                                        <td style="color:greenyellow">等离子-1500</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="user_left l_left" style=" margin-left: 0.6%">
                    <div class="user_line1">
                        <div class="user_line2">
                            <div class="user_top_middle l_left">
                                <div id="userContainerPersonal" style="height: 90%"></div>
                                <p>标本甲醛</p>
                            </div>
                            <div class="user_top_middle l_left">
                                <div id="userContainerFlow" style="height: 90%"></div>
                                <p>取材甲醛</p>
                            </div>
                            <div class="user_top_middle l_left">
                                <div id="userContainerIllegal" style="height: 90%"></div>
                                <p>取材新风</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="user_left l_left" style=" margin-left: 0.6%">
                    <div class="user_line1">
                        <div class="user_line2">
                            <div class="user_top_middle">
                                <div id="userContainerComplaint" style="height: 90%"></div>
                                <p>取材排风</p>
                            </div>
                            <div class="user_top_middle " style="display: flex;flex-direction: column;justify-content: center;width: 100%; height: 67%;align-items: center;">
                                <div class="user_right_left " style="display: flex;flex-direction: column;justify-content: center;">
                                    <div id="userContainerReason" style="height: 90%"></div>
                                    <p>取材VOC含量</p>
                                </div>
                                <div class="user_right_left ">
                                    <div id="userContainerHandle" style="height: 90%"></div>
                                    <p>染色VOC含量</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

16.调用BIMFACE的viewtoken

</html>
<script>
    let componentId;
    let componentName;
    var viewer3D;
    var app;
    var viewToken = '{{viewToken}}';
    var loaderConfig = new BimfaceSDKLoaderConfig();
    loaderConfig.viewToken = viewToken;
    BimfaceSDKLoader.load(loaderConfig, successCallback, failureCallback);
    function successCallback(viewMetaData) {
      var domShow = document.getElementById('domId');
      var webAppConfig = new Glodon.Bimface.Application.WebApplication3DConfig();
      webAppConfig.domElement = domShow;    
      app = new Glodon.Bimface.Application.WebApplication3D(webAppConfig);    
      app.addView(viewToken);
      viewer3D = app.getViewer();
      viewer3D.enableHover(true);
      app.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.MouseClicked, function (objectData) {
        componentId = objectData.objectId;
        viewer3D.getModel().getComponentProperty(componentId, function (objectdata) {
          // alert(JSON.stringify(objectdata));
          componentName = objectdata['name'];
          pageJump(componentName);
        });
      }
      )    
    };
      
    function failureCallback(error) {
      console.log(error);
    };

    // function pageJump(componentName) {
    //   // alert(JSON.stringify(componentName));
    //   window.open('/dataPage?componentName='+encodeURI(componentName));
    //   // window.location.assign('/dataPage?componentName='+encodeURI(componentName));
    // };

    function pageJump(componentName) {
      // alert(JSON.stringify(componentName));
    //   window.location.href('/dataPage?componentName='+encodeURI(componentName));
      window.location.assign('/dataPage?componentName='+encodeURI(componentName));
    };
  </script>

17.翻页模块和其他功能模块

    <script>
        var number;
        $(function () {
            if (window.screen.height <= 768) {
                number = 4;
            } else if (window.screen.height > 768 && window.screen.height <= 900) {
                number = 6
            } else if (window.screen.height > 1080) {
                number = 8
            }
        });
        $(".tcdPageCode").createPage({
            pageCount: 5,
            current: 1,
            backFn: function (p) { }
        });
        $(".chemistry_tcdPageCode").createPage({
            pageCount: 4,
            current: 1,
            backFn: function (p) { }
        });
        $(".enterprise_tcdPageCode").createPage({
            pageCount: 4,
            current: 1,
            backFn: function (p) { }
        });
        $(".car_tcdPageCode").createPage({
            pageCount: 4,
            current: 1,
            backFn: function (p) { }
        });

        $(function () {
            $("#fresh_tool").click(function (event) {
                event.stopPropagation();
                cancel();
            })
        });
        function EventClick() {
            $(".check_increase").removeClass("check_increase_act");
            $("#over_hide1").show().siblings().hide();
            $(".check_decrease").show();
            $("#cage_cl").hide();
            $("#map_title_innerbox").hide();
            $("#cage_cl1").show();
            //        $("#over_hide").show();
            $("#map_title_innerbox1").show();
            $(".addition_check_in").hide();
            $("#car_check_in").hide();
            BootstrapTable();
        }
        function cancel(e) {
            $(".check_increase").removeClass("check_increase_act");
            $("#over_hide").show().siblings().hide();
            $(".check_decrease").show();
            $("#cage_cl").show();
            $("#cage_cl1").hide();
            BootstrapTable();
        }
        function TimeControl() {
            $(".message_scroll_box").animate({ marginTop: 96 }, 800,
                function () {
                    $(".message_scroll_box").css({ marginTop: 0 }); 
                });
        }
    </script>

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

邱榆超

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值