mainPage.html 10.6 KB
<!DOCTYPE html>
<!--[if IE 8]>    <html class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html>
<!--<![endif]-->

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="css/frame.css" rel="stylesheet" />
    <link href="scripts/easyui/themes/default/easyui.css" rel="stylesheet" />
    <link href="scripts/easyui/themes/icon.css" rel="stylesheet" />
    <link href="css/mainPage.css" rel="stylesheet" />
</head>

<body>
    <div class="easyui-layout" data-options="fit:true">
        <div data-options="region:'center',border:false" class="upperDisplay" style="padding: 3px 3px 0 3px">
            <div class="easyui-layout" data-options="fit:true">
                <div data-options="region:'west',border:false" style="width: 50%; padding-right: 1px; overflow: hidden;">
                    <object id="videoOcxObject" classid="clsid:6DB8BA69-B5F2-47CF-9F5D-A8019A758F83" data-version="1.1.19.0"></object>
                </div>
                <div data-options="region:'center',border:false" style="padding-left: 2px;">
                    <div class="easyui-layout" data-options="fit:true">
                        <div data-options="region:'south',border:false" style="height: 36px;" class="toolBar">
                            <table data-bind="with:selectedInfo" class="toolsTable">
                                <tbody>
                                    <tr>
                                        <td class="toolsTitle">
                                            <span class="i18n-item" data-i18n-key="columns_lane_no"></span>
                                        </td>
                                        <td class="toolsContent" data-bind="text:LineNo"></td>
                                        <td class="toolsTitle">
                                            <span class="i18n-item" data-i18n-key="columns_plate_text"></span>:
                                        </td>
                                        <td class="toolsContent" data-bind="text:PlateText"></td>
                                        <td class="toolsTitle">
                                            <span class="i18n-item" data-i18n-key="columns_plate_width"></span>:
                                        </td>
                                        <td class="toolsContent" data-bind="text:PlateWidth"></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div data-options="region:'center',border:false" style="overflow: hidden;">
                            <table class="picContainer" data-bind="with:selectedInfo">
                                <tr>
                                    <td rowspan="3" class="tdBig">
                                        <div class="normalPic i18n-item" id="pic0" data-i18n-key="text_feature_pic" data-i18n-for-attribute="title">
                                            <div id='featurePic' title='' data-bind="attr:{style:getFeaturePicCss(URL.PictureUrl.LANEVIEW1,Vehicle)}">
                                            </div>
                                        </div>
                                    </td>
                                    <td class="tdSmall">
                                        <div class="normalPic" id="pic1" title="" data-bind="attr:{style:getPicCss(URL.PictureUrl.FULLVIEW1,'pic1')}">
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="tdSmall">
                                        <div class="normalPic" id="pic2" title="" data-bind="attr:{style:getPicCss(URL.PictureUrl.FULLVIEW2,'pic2')}">
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="tdSmall">
                                        <div class="normalPic" id="pic3" title="" data-bind="attr:{style:getPicCss(URL.PictureUrl.FULLVIEW3,'pic3')}">
                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div data-options="region:'south',border:false" class="lowerDisplay" style="height: 250px;">
            <div class="easyui-layout" data-options="fit:true">
                <div data-options="region:'center',border:false">
                    <div class="easyui-layout" data-options="fit:true" style="margin: 3px 3px 0 0; padding-bottom: 6px; background-color: #E6E6E7;">
                        <div data-options="region:'west',border:false" style="width: 36px;">
                            <div class="tabSelector tabSelected" data-id="capture">
                                <div class="tabSelectorTitle title1 i18n-item" data-i18n-key="text_capture_result"></div>
                            </div>
                            <div class="tabSelector" data-id="flow">
                                <div class="tabSelectorTitle title2 i18n-item" data-i18n-key="text_flow"></div>
                            </div>
                        </div>
                        <div data-options="region:'center',border:false" style="overflow: hidden;">
                            <div class="datagridContainer" id="captureGridContainer">
                                <table id="captureGrid"></table>
                            </div>
                            <div class="datagridContainer" id="flowGridContainer">
                                <table id="flowGrid"></table>
                            </div>
                        </div>
                    </div>
                </div>
                <div data-options="region:'south',border:false" class="main-south">
                    <ul>
                        <li class="alarmContainer">
                            <span class="alarmIcon" data-bind="css:{hasAlarm:hasUnReadAlarm},click:readAlarm,clickBubble:false"></span>
                        </li>
                        <li class="version">
                            <ul data-bind="with:versionInfo">
                                <li>
                                    <span class="i18n-item" data-i18n-key="text_model"></span>:
                                </li>
                                <li data-bind="text:ver10"></li>
                                <li class="title">
                                    <span class="i18n-item" data-i18n-key="text_soft_version"></span>
                                </li>
                                <li data-bind="text:ver5"></li>
                                <li>
                                    <span class="i18n-item" data-i18n-key="text_algorithm_version"></span>
                                </li>
                                <li data-bind="text:ver6"></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="alarmPopup">
        <div class="closeBtn i18n-item" data-bind="click:closeAlarmPopup" data-i18n-key="text_close"></div>
        <ul class="alarmItems">
            <li class="title">
                <span class="a_1 title i18n-item" data-i18n-key="alarm_level"></span>
                <span class="a_2 title i18n-item" data-i18n-key="alarm_section"></span>
                <span class="a_3 title i18n-item" data-i18n-key="alarm_source"></span>
                <span class="a_4 title i18n-item" data-i18n-key="alarm_target"></span>
                <span class="a_5 title i18n-item" data-i18n-key="alarm_content"></span>
            </li>
            <!-- ko foreach : alarmList -->
            <li>
                <span class="a_1 content" data-bind="text:Level"></span>
                <span class="a_2 content" data-bind="text:Section"></span>
                <span class="a_3 content" data-bind="text:Source"></span>
                <span class="a_4 content" data-bind="text:Target"></span>
                <span class="a_5 content" data-bind="text:Content"></span>
            </li>
            <!-- /ko -->
        </ul>
    </div>
    <div style="height: 0; width: 0; overflow: hidden;">
        <div id="ocxDownloadWin" class="easyui-window i18n-item" title="" data-i18n-key="text_plugin_download" data-i18n-for-attribute="title"
            data-options="collapsible:false,minimizable:false,maximizable:false,modal:true,closed:true,onClose:closeOcxInstallWindow"
            style="width: 300px; height: 150px;">
            <img class="downPic" src="images/download.png" />
            <a href="ocx/TrafficClientSetup.exe" class="i18n-item" data-i18n-key="text_camera_plugin"></a>
            <div style="padding: 8px; font-size: 12px;" class="i18n-item" data-i18n-key="text_camera_plugin_install_guid"></div>
        </div>
    </div>
    <script src="scripts/console-polyfill.js"></script>
    <script src="scripts/core-js/core.min.js"></script>

    <script src="scripts/easyui/jquery.min.js"></script>
    <script src="scripts/i18n/jquery.i18n.properties.js"></script>
    <script src="scripts/easyui/easyloader.js"></script>
    <script src="scripts/knockout-3.2.0.js"></script>
    <script src="scripts/dateTimeExtension.js"></script>
    <script src="scripts/utilities.js"></script>
    <script src="scripts/i18n/i18nHelper.js"></script>
    <script src="mainPage.js"></script>

    <!-- 捕获ocx控件videoOcxObject抛出的VideoCoreEvent(EventType, nParam1, nParam2, szParam3)事件 -->
    <script type="text/javascript" for="videoOcxObject" event="VideoCoreEvent(EventType, nParam1, nParam2, szParam3)">
        //	alert("EventType:" + EventType + ", szParam3:" + szParam3);
        var ocxEventUrl = "/do/trafficController/nvrOcxEvent?EventType=" + EventType + "&nParam1=" + nParam1 + "&nParam2=" + nParam2 + "&szParam3=" + szParam3;
        $.get(ocxEventUrl, null, function (data) {
            if (!data.error) {
                $.messager.alert("结果", "事件提交失败!原因:" + data.feedback.Msg, "error");
            } else {
                //    $.messager.alert("结果","事件提交成功!","info");
            }
        }, "json");
    </script>
    <script type="text/javascript" for="videoOcxObject" event="SnapShotEvent(param)">
        getCapturePic();
    </script>
    <script type="text/javascript" for="videoOcxObject" event="FlashLightEvent(param)">
        getFlashingCapturePic();
    </script>
</body>

</html>