busSetting.esp 15 KB
<!DOCTYPE html>
<html>

<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" />
    <style type="text/css">
        body {
            min-width: 1256px;
        }

        .mainDiv {
            background-color: #f3f5f6;
            overflow: hidden;
            /* width: 1256px; */
            width: 100%;
        }

        .leftArea {
            width: 566px;
            height: 570px;
            padding: 0 4px;
            float: left;
            overflow: hidden;
        }

        .rightArea {
            position: relative;
            width: 670px;
            height: 570px;
            max-height: 100%;
            overflow: hidden;
            float: left;
        }

        .rightArea .rightUpper {
            width: 100%;
            height: 600px;
        }

        .rightArea .rightLower {
            width: 650px;
            height: 462px;
            position: absolute;
            bottom: 0;
            right: 0;
            padding: 8px;
            border: 1px solid #7C8895;
        }

        .rightArea .rightLower table.redLight {}

        .bottomArea {
            height: 800px;
            width: 100%;
            /* padding: 10px; */
            clear: both;
        }

        .settingGroups {
            width: 100%;
        }

        .settingGroup {
            background-color: white;
            margin-top: 5px;
            border: 1px solid #99A1AD;
        }

        .settingGroup .groupTitle {
            height: 30px;
            line-height: 30px;
            background-color: #DBDFE5;

            text-align: center;
            font-weight: bold;
        }

        .settingItem {
            /*height: 30px;*/
            line-height: 21px;
        }
    </style>
</head>

<body>
    <div class="mainDiv">
        <form id="busConfigInfo">
            <div class="leftArea">
                <ul class="settingGroups">
                    <li class="settingGroup">
                        <div class="groupTitle">
                            公交参数
                        </div>
                        <ul class="settingItem">
                            <table class="settingsContainer">
                                <tr>
                                    <td class="tdContent" colspan="2">
                                        <input id="540" name="540" type="checkbox" class="checkboxAlign" />无条件检测黄线
                                    </td>
                                </tr>
                                <tr>
                                    <td class="tdTitle">
                                        车牌识别置信度阈值
                                    </td>
                                    <td class="tdContent">
                                        <input id="541" name="541" class="settingParameter needReboot" onkeyup="value=value.replace(/[^\d]/g,'')" type="text" />
                                    </td>
                                </tr>
                                <tr>
                                    <td class="tdTitle">
                                        报警的黄线条件
                                    </td>
                                    <td class="tdContent">
                                        <input id="542" name="542" class="settingParameter needReboot" onkeyup="value=value.replace(/[^\d]/g,'')" type="text" />
                                    </td>
                                </tr>
                                <tr>
                                    <td class="tdContent" colspan="2">
                                        <input id="543" name="543" type="checkbox" class="checkboxAlign" />报警必须有视频
                                    </td>
                                </tr>
                                <tr>
                                    <td class="tdTitle">
                                        GPS距路段最大偏移
                                    </td>
                                    <td class="tdContent">
                                        <input id="544" name="544" class="settingParameter needReboot" onkeyup="value=value.replace(/[^\d]/g,'')" type="text" />
                                    </td>
                                </tr>
                                <tr>
                                    <td class="tdContent" colspan="2">
                                        <input id="545" name="545" type="checkbox" class="checkboxAlign" />开启路段GPS过滤
                                    </td>
                                </tr>
                                <tr>
                                    <td class="tdContent" colspan="2">
                                        <input id="546" name="546" type="checkbox" class="checkboxAlign" />开启限行时间段过滤
                                    </td>
                                </tr>
                                <tr>
                                    <td class="tdTitle">
                                        路口最大距离(m)
                                    </td>
                                    <td class="tdContent">
                                        <input id="547" name="547" class="settingParameter needReboot" onkeyup="value=value.replace(/[^\d]/g,'')" type="text" />
                                    </td>
                                </tr>
                                <tr>
                                    <td class="tdTitle">
                                        GPS差值间隔(ms)
                                    </td>
                                    <td class="tdContent">
                                        <input id="548" name="548" class="settingParameter needReboot" onkeyup="value=value.replace(/[^\d]/g,'')" type="text" />
                                    </td>
                                </tr>
                                <tr>
                                    <td class="tdTitle">
                                        抓拍时间间隔
                                        <br>(200-10000ms)
                                    </td>
                                    <td class="tdContent">
                                        <input id="2011005" name="2011005" class="settingParameter" onkeyup="value=value.replace(/[^\d]/g,'')" type="text" />
                                    </td>
                                </tr>
                                <tr>
                                    <td class="tdTitle">
                                        此类车牌不抓拍
                                        <br>(多个以英文;分隔)
                                    </td>
                                    <td class="tdContent">
                                        <input id="2011006" name="2011006" class="settingParameter" type="text" />
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="2">
                                        <a href="#" id="btnSave" class="settingBtn" style="float:left;">保存</a>
                                    </td>
                                </tr>
                            </table>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="rightArea">
                <div class="rightUpper">
                    <object id="roiOcxObject" classid="clsid:7E4DB96E-7A82-48DD-8376-7552E2D09170" style="height: 530px; width: 100%;">
                    </object>
                    <div style="height:30px;">
                        <a class="settingBtn" style="float: left;" id="capturePicture">抓图</a>
                    </div>
                </div>
            </div>
            <!--<div class="bottomArea">
            	<iframe style="width:100%;height:100%;border:0;" frameborder="no" src="../../bus/roadList.esp">
            	</iframe>
            </div>-->

            <% inputSecurityToken(); %>
        </form>
    </div>
    <script src="../../../scripts/jquery-1.11.1.js"></script>
    <script src="../../../scripts/easyui/jquery.easyui.min.js"></script>
    <script src="../../../scripts/easyui/locale/easyui-lang-zh_CN.js"></script>
    <script src="../../../scripts/utilities.js"></script>
    <script src="../../../scripts/jquery.form.js"></script>
    <script src="../../../scripts/jquery.validate.min.js"></script>
    <script src="../../../scripts/jquery.validate.extend.js"></script>
    <script src="../../../scripts/My97DatePicker/WdatePicker.js"></script>
    <script type="text/javascript">

        var ocxController;
        //参数适配器
        var parameterAdaptor = new ParameterAdaptor();
        $().ready(function () {
            initBusParams();

            $(".bottomArea").load("../../bus/test.html");
            var ip = window.location.hostname;
            var roiOcxObject = document.getElementById("roiOcxObject");

            ocxController = new ROIOcxController(roiOcxObject);
            try {
                var timestamp = new Date().getTime();
                //公交模式不用红灯相关的,更换为Kakou模式,ROI不带红灯
                ocxController.switchToKakouMode();
                ocxController.showPage();
                ocxController.loadUrlPage("http://" + ip + "/do/trafficController/roiOcxRequestEvent?EventType=1&t=" + timestamp);
                ocxController.loadUrlXml("http://" + ip + "/do/trafficController/roiOcxRequestEvent?EventType=2&t=" + timestamp);
            } catch (err) {
                if (console)
                    console.error("ROI:" + err.name + "->" + err.message);
            }

            //验证校验
            validateForm();

            //保存参数
            $("#btnSave").click(saveParametersToServer);
        });

        //初始化公交参数信息
        function initBusParams() {
            var RefererInfo = "intersection";
            parameterAdaptor.getParameters(RefererInfo, bindBusParams);
        }

        function bindBusParams(data) {
            var map = data.feedback;
            $("#busConfigInfo").form("load", map);
            $.each(map, function (key, value) {
                $("#busConfigInfo input[type='checkbox']").each(function (i, item) {
                    if (item.id == key && value == 1) {
                        $("#" + item.id).prop("checked", "checked");
                    }
                });
            });
        }

        function validateForm() {
            var rules = {
                2011005: {
                    range: [200, 10000],
                    digits: true
                }
                ,
                2011006: {
                    maxByteLength: 100
                }

            };
            $("#busConfigInfo").validate({
                rules: rules
            });
        }

        //提交参数到服务器保存
        function saveParametersToServer() {
            var formObj = $("#busConfigInfo");
            //验证参数
            if (!formObj.valid()) {
                $("#roiOcxObject").hide();

                $.messager.alert("提示", "参数验证有误,请修改后再提交!", "error", function () {
                    $("#roiOcxObject").show();
                });
                return;
            }
            parameterAdaptor.saveParameters(formObj, null, "get");
        }

        function ROIOcxController(ocxObj) {
            var ocxObject = ocxObj;

            this.switchToKakouMode = function () {
                switchOcxMode(1);
            };
            this.showPage = function () {
                showOcxPage();
            };
            this.showDialog = function () {
                showOcxDialog();
            };
            this.loadUrlPage = function (imgUrl) {
                loadOcxUrlPage(imgUrl);
            };
            this.loadUrlXml = function (imgUrl) {
                loadOcxUrlXml(imgUrl);
            };

            function switchOcxMode(mode) {
                ocxObject.SetKakouShow(mode);
            };
            function showOcxPage() {
                ocxObject.showRoiPage();
            };

            function showOcxDialog() {
                ocxObject.AboutBox();
            };

            function loadOcxUrlPage(imgUrl) {
                var err = ocxObject.loadRoiPictureFromUrl(imgUrl);
                if (err != 0) {
                    //alert("loadRoiPictureFromUrl: err = " + err);
                }
            };

            function loadOcxUrlXml(imgUrl) {
                var err = ocxObject.loadRoiXmlFromUrl(imgUrl);
                if (err != 0) {
                    //alert("loadRoiXmlFromXml: err = " + err);
                }
            };
        }

        function showOcxObj() {
            $("#roiOcxObject").show();
        }

        function hideOcxObj() {
            $("#roiOcxObject").hide();
        }
    </script>
    <!-- 捕获ocx控件roiOcxObject抛出的事件 -->
    <script type="text/javascript" for="roiOcxObject" event="roiRequestEvent(EventType, szParam1, nParam2)">
        //var roiRequestUrl = "/do/trafficController/roiOcxRequestEvent?EventType=" + EventType;
        if (ocxController != null) {
            var ip = window.location.hostname;
            if (EventType == 1) {
                ocxController.loadUrlPage("http://" + ip + "/do/trafficController/roiOcxRequestEvent?EventType=1");
            } else if (EventType == 2) {
                ocxController.loadUrlXml("http://" + ip + "/do/trafficController/roiOcxRequestEvent?EventType=2");
            }
        }     
    </script>

    <script type="text/javascript" for="roiOcxObject" event="roiResponseEvent(EventType, szParam1, szParam2, nParam3)">
        var roiRequestUrl = "/do/trafficController/roiOcxResponseEvent?EventType=" + EventType;
        //var roiRequestUrl = "/do/trafficController/importRoiXml";
        var szJson = {};
        szJson["paramXml"] = szParam2;

        //添加securityToken
        var securityToken = document.getElementsByName("-xsrf-");
        if (securityToken.length > 0) {
            szJson["-xsrf-"] = securityToken[0].value;
        } else {
            alert("securityToken为空!不能提交!");
        }

        $.post(roiRequestUrl, szJson, function (data) {
            if (!data.error) {
                $.messager.show({
                    title: '结果',
                    msg: 'roiResponseEvent:' + 'Event=' + EventType + ' 事件提交失败!原因:' + data.feedback.Msg,
                    timeout: 0,
                    showType: 'slide'
                });
            } else {
                $.messager.show({
                    title: '结果',
                    msg: 'roiResponseEvent:' + 'Event=' + EventType + '事件提交成功!',
                    timeout: 3000,
                    showType: 'slide'
                });
            }
        }, "json");
    </script>
</body>

</html>