video.html 16.7 KB
<html>
<head>
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta charset="UTF-8">
    <title data-i18n>$$$$$${txt-2387}</title>

    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache">
    <meta http-equiv="Cache" content="no-cache">

    <!-- Font Awesome 图标字体 -->
    <link
            href="/metronic_v4.5.4/plugins/font-awesome/css/font-awesome.min.css"
            rel="stylesheet" type="text/css" />
    <!-- Bootstrap style -->
    <link href="/metronic_v4.5.4/plugins/bootstrap/css/bootstrap.min.css"
          rel="stylesheet" type="text/css" />
    <!-- jsTree 数插件 -->
    <link
            href="/metronic_v4.5.4/plugins/jstree/dist/themes/default/style.min.css"
            rel="stylesheet" type="text/css" />
    <!-- MULTI-select 多选下拉框美化 -->
    <link
            href="/metronic_v4.5.4/plugins/jquery-multi-select/css/multi-select.css"
            rel="stylesheet" type="text/css" />

    <!-- editable -->
    <link
            href="/metronic_v4.5.4/plugins/bootstrap-editable/bootstrap-editable/css/bootstrap-editable.css"
            rel="stylesheet" type="text/css" />
    <!-- METRONIC style -->
    <link href="/metronic_v4.5.4/layout4/css/themes/light.min.css"
          rel="stylesheet" type="text/css" id="style_color" />
    <link href="/metronic_v4.5.4/css/components.css" rel="stylesheet"
          type="text/css" />
    <link href="/metronic_v4.5.4/css/plugins.css" rel="stylesheet"
          type="text/css" />
    <link href="/metronic_v4.5.4/layout4/css/layout.min.css"
          rel="stylesheet" type="text/css" />
    <link href="/metronic_v4.5.4/layout4/css/custom.min.css"
          rel="stylesheet" type="text/css" />
    <!-- select2 下拉框插件 -->
    <link href="/metronic_v4.5.4/plugins/select2/css/select2.min.css"
          rel="stylesheet" type="text/css" />
    <link
            href="/metronic_v4.5.4/plugins/select2/css/select2-bootstrap.min.css"
            rel="stylesheet" type="text/css" />
    <!-- layer 弹层 插件 -->
    <link href="/assets/plugins/layer-v2.4/layer/skin/layer.css"
          rel="stylesheet" type="text/css" />
    <!-- fileinput 上传 插件 -->
    <link href="/assets/plugins/fileinput/css/fileinput.min.css"
          rel="stylesheet" type="text/css" />
    <!-- iCheck 单选框和复选框 -->
    <link href="/metronic_v4.5.4/plugins/icheck/skins/all.css"
          rel="stylesheet" type="text/css" />
    <!-- 日期控件 -->
    <link
            href="/metronic_v4.5.4/plugins/bootstrap-datetimepicker-2/css/bootstrap-datetimepicker.min.css"
            rel="stylesheet" type="text/css" />
    <!-- table 表格控件 -->
    <!--<link rel="stylesheet"-->
    <!--href="//api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css"-->
    <!--type="text/css" />-->
    <link href="/metronic_v4.5.4/plugins/bootstrap-tagsinput/bootstrap-tagsinput.css" rel="stylesheet" type="text/css"/>
    <!-- handsontable样式 -->
    <link rel="stylesheet"
          href="/assets/bower_components/handsontable/dist/handsontable.full.css" />
    <!-- sweetalert样式 -->
    <link rel="stylesheet"
          href="/assets/bower_components/sweetalert/dist/sweetalert.css" />
    <!-- schedule计划调度AngularJS模块主css -->
    <link rel="stylesheet" href="/pages/scheduleApp/module/common/main.css"
          type="text/css" />
    <link rel="stylesheet" href="/real_control_v2/assets/plugins/perfect-scrollbar/perfect-scrollbar.css" merge="plugins"/>

    <!-- CSS动画 -->
    <link
            href="/metronic_v4.5.4/plugins/tipso/css/animate.css"
            rel="stylesheet" type="text/css" />

    <!-- 提示工具样式 -->
    <link
            href="/metronic_v4.5.4/plugins/tipso/css/tipso.css"
            rel="stylesheet" type="text/css" />
    <link href="/metronic_v4.5.4/layui/css/layui.css" rel="stylesheet">

    <link href="video.css" rel="stylesheet" type="text/css" />
    <link href="/metronic_v4.5.4/layui/css/layui.css" rel="stylesheet"/>
    <link  href="/metronic_v4.5.4/plugins/bootstrap-datetimepicker-2/css/bootstrap-datetimepicker.min.css"   rel="stylesheet" type="text/css" />

    <!-- jQuery -->
    <script src="/metronic_v4.5.4/plugins/jquery.min.js" data-exclude=1></script>
    <!-- bootstrap -->
    <script src="/metronic_v4.5.4/plugins/bootstrap/js/bootstrap.min.js"
            data-exclude=1></script>
    <script src="/pages/forms/statement/js/jquery.autocompleter.js"></script>
    <script src="/pages/forms/statement/js/jquery.PrintArea.js"></script>
    <!-- MTRONIC JS -->
    <script src="/metronic_v4.5.4/scripts/app.min.js" data-exclude=1></script>
    <script src="/metronic_v4.5.4/layout4/scripts/layout.min.js"
            data-exclude=1></script>
    <!-- 虚拟滚动条 -->
    <script
            src="/metronic_v4.5.4/plugins/jquery-slimscroll/jquery.slimscroll.min.js"></script>
    <!-- jsTree 树插件 -->
    <script src="/metronic_v4.5.4/plugins/jstree/dist/jstree.min.js"></script>
    <!-- bootstrap-hover-dropDown -->
    <script
            src="/metronic_v4.5.4/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js"></script>
    <!-- jquery.validate 表单验证 -->
    <script
            src="/metronic_v4.5.4/plugins/jquery-validation/js/jquery.validate.min.js"></script>
    <script
            src="/metronic_v4.5.4/plugins/jquery-validation/js/localization/messages_zh.js"></script>
    <!-- 向导式插件 -->
    <script
            src="/metronic_v4.5.4//plugins/bootstrap-wizard/jquery.bootstrap.wizard.min.js"></script>
    <!-- iCheck 单选框和复选框  -->
    <script src="/metronic_v4.5.4/plugins/icheck/icheck.min.js"></script>
    <!-- select2 下拉框 -->
    <script src="/metronic_v4.5.4/plugins/select2/js/select2.full.min.js"></script>
    <!-- MULTI SELECT 多选下拉框 -->
    <script
            src="/metronic_v4.5.4/plugins/jquery-multi-select/js/jquery.multi-select.js"></script>
    <!-- editable.js -->
    <script
            src="/metronic_v4.5.4/plugins/bootstrap-editable/bootstrap-editable/js/bootstrap-editable.min.js"></script>
    <!-- PJAX -->
    <script src="/assets/plugins/jquery.pjax.js"></script>
    <!-- layer 弹层 -->
    <script src="/assets/plugins/layer-v2.4/layer/layer.js" data-exclude=1></script>
    <!-- fileinput 上传 -->
    <script src="/assets/plugins/fileinput/canvas-to-blob.min.js"></script>
    <script src="/assets/plugins/fileinput/purify.min.js"></script>
    <script src="/assets/plugins/fileinput/sortable.min.js"></script>
    <script src="/assets/plugins/fileinput/fileinput.min.js"></script>
    <script src="/assets/plugins/fileinput/fileinput_locale_zh.js"></script>
    <!-- jquery.purl URL解析 -->
    <script src="/assets/plugins/purl.js"></script>
    <!-- jquery.serializejson JSON序列化插件 -->
    <script src="/assets/plugins/jquery.serializejson.js"></script>
    <!-- art-template 模版引擎 -->
    <script src="/assets/plugins/template.js"></script>
    <!-- jquery.pageinator 分页 -->
    <script src="/assets/plugins/jqPaginator.min.js"></script>
    <!-- moment.js 日期处理类库 -->
    <script src="/assets/plugins/moment-with-locales.js"></script>

    <script src="/assets/plugins/pinyin.js"></script>
    <!-- 日期控件 -->
    <script
            src="/metronic_v4.5.4/plugins/bootstrap-datetimepicker-2/js/bootstrap-datetimepicker.min.js"></script>
    <!-- 表格控件 -->
    <script src="/metronic_v4.5.4/plugins/bootstrap-tagsinput/bootstrap-tagsinput.min.js"></script>
    <!-- 统计图控件 -->
    <!--<script src="/assets/global/getEchart.js"></script>
    <script src="/assets/global/echarts.js"></script> -->
    <script src="/assets/js/common.js"></script>
    <script src="/assets/js/dictionary.js"></script>
    <!-- tipso JS -->
    <script src="/metronic_v4.5.4/plugins/tipso/js/tipso.js"></script>


    <!-- d3 -->
    <script src="/assets/js/d3.min.js" data-exclude=1></script>
    <!-- webSocket JS -->
    <script src="/assets/js/sockjs.min.js"></script>

    <!-- TODO:angularJS相关库 -->

    <!-- angularJS相关库 -->
    <!-- 这个是基于angularjs 1.4.10修改的版本,主要是修改了history控制部分,用于兼容route和pjax的同时操作history的冲突 -->
    <script src="/assets/js/angular.js" data-autocephaly=1></script>
    <script src="/assets/bower_components/angular-i18n/angular-locale_zh-cn.js" data-autocephaly=1></script>
    <script
            src="/assets/bower_components/angular-resource/angular-resource.min.js"
            data-exclude=1></script>
    <script
            src="/assets/bower_components/angular-sanitize/angular-sanitize.min.js"
            data-exclude=1></script>
    <script
            src="/assets/bower_components/angular-animate/angular-animate.min.js"
            data-exclude=1></script>
    <script
            src="/assets/bower_components/angular-touch/angular-touch.min.js"
            data-exclude=1></script>
    <script
            src="/assets/bower_components/angular-ui-router/release/angular-ui-router.min.js"
            data-exclude=1></script>
    <script
            src="/assets/bower_components/oclazyload/dist/ocLazyLoad.min.js"
            data-exclude=1></script>
    <script
            src="/assets/bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"
            data-exclude=1></script>

    <script
            src="/assets/bower_components/angular-translate/angular-translate.min.js"
            data-exclude=1></script>
    <script
            src="/assets/bower_components/angular-translate-loader-static-files/angular-translate-loader-static-files.min.js"
            data-exclude=1></script>

    <!-- handsontable相关js -->
    <script
            src="/assets/bower_components/handsontable/dist/handsontable.full.js"></script>
    <script
            src="/assets/bower_components/ngHandsontable/dist/ngHandsontable.js"></script>
    <!-- sweetalert相关js -->
    <script src="/assets/bower_components/sweetalert/dist/sweetalert.min.js"></script>
    <script src="/assets/bower_components/ng-sweet-alert/ng-sweet-alert.js"></script>

    <!-- schedule计划调度AngularJS模块主JS -->
    <script src="/pages/scheduleApp/language/en.js" data-exclude=1></script>
    <script src="/pages/scheduleApp/language/zh.js" data-exclude=1></script>
    <script src="/pages/scheduleApp/module/common/main.js" data-exclude=1></script>
    <script
            src="/pages/scheduleApp/module/common/prj-common-globalservice.js"
            data-exclude=1></script>
    <script src="/pages/scheduleApp/module/common/prj-common-filter.js"
            data-exclude=1></script>
    <script src="/pages/scheduleApp/module/common/prj-common-directive.js"
            data-exclude=1></script>
    <script
            src="/pages/scheduleApp/module/common/prj-common-ui-route-state.js"
            data-exclude=1></script>

    <!-- 地图相关 -->
    <!-- 百度 -->
    <script
            src="//api.map.baidu.com/api?v=3.0&ak=dr4jSsmL7M0b1kbUSVVAO7KbleSUNdpv"
            data-exclude=1></script>
    <script
            src="//api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.js"
            data-exclude=1></script>
    <script type="text/javascript"
            src="//api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"
            data-exclude=1></script>
    <script type="text/javascript"
            src="//api.map.baidu.com/library/RichMarker/1.2/src/RichMarker_min.js "
            data-exclude=1></script>
    <script src="/assets/js/baidu/TextIconOverlay.js" data-exclude=1></script>
    <script src="/assets/js/baidu//MarkerClusterer.js" data-exclude=1></script>
    <!-- 高德  -->
    <script
            src="//webapi.amap.com/maps?v=1.3&key=16cb1c5043847e09ef9edafdd77befda"
            data-exclude=1></script>
    <!-- echarts4 -->
    <script src="/metronic_v4.5.4/plugins/echarts4/echarts.min.js"></script>
    <script src="/real_control_v2/assets/plugins/perfect-scrollbar/perfect-scrollbar.jquery.js"  merge="plugins"></script>
    <!-- RSA加密 -->
    <script src="/assets/plugins/jsencrypt.min.js"></script>
    <script src="/assets/js/eventproxy.js"></script>
    <script src="/metronic_v4.5.4/layui/layui.js" ></script>
    <script src="video.js"></script>


</head>
<body style="margin: 0;padding-left: 15px;">
<div class="row" style="display: flex;width:100%;height: 100%;margin: 0;padding: 0">
    <div class="col-md-4" style="padding-right: 0px;width: 20%">
        <div class="portlet light bordered" >
            <div class="portlet-body">
                <div class="row">
                    <div class="col-md-8">
                        <input type="text" placeholder="$$$$$${txt-1476}" autocomplete="off" class="layui-input" id="insideCode_like" style="display:inline-block;width: 200px" data-i18n="placeholder"/>
                    </div>
                    <div class="col-md-3">
                        <button type="button" class="layui-btn layui-btn-primary" lay-on="get-vercode" onclick="queryTreeTable()" data-i18n>$$$$$${txt-3841}</button>
                    </div>
                </div>
                <div class="row">
                    <div id="video_tree" style="height: 91.5%;overflow:scroll"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-6" style="padding-left: 0px;width: 79.95%;height: 100%">
        <div class="portlet light bordered" >
            <div>
                <div class="layui-tab layui-tab-card" lay-filter="video-hash">
                    <ul class="layui-tab-title">
                        <li class="layui-this" lay-id="live_broadcast_lay_id" data-i18n="">$$$$$${txt-4526}</li>
                        <li lay-id="history_lay_id" data-i18n="">$$$$$${txt-4527}</li>
                    </ul>
                    <div class="layui-tab-content" style="height: 90%">
                        <div class="layui-tab-item layui-show" id="live_broadcastDiv" >
                            <div><span data-i18n="">$$$$$${txt-4520}:</span>
                                <a href="#" class="layui-btn layui-btn-primary layui-btn-xs" onclick="skeyewebplayerOne()"></a>
                                <a href="#" class="layui-btn layui-btn-primary layui-btn-xs" onclick="skeyewebplayerFour()"></a>
                                <a href="#" class="layui-btn layui-btn-primary layui-btn-xs" onclick="skeyewebplayerNine()"></a>
                            </div>
                            <div id="skeyewebplayerDivContent" >
                                <div class="skeyewebplayerDivContent_one skeyewebplayerDivContent_play_selected " id="skeyewebplayerDivContent_play_0" onclick="skeyewebplayerDivContent_play_click(this)"><div class="skeyewebplayerDiv_title"></div><div id="skeyewebplayerDiv_play_content_0" class="skeyewebplayerDiv_play_content" style="height: 95%"></div></div>
                            </div>
                        </div>
                        <div class="layui-tab-item" style="width: 100%;height: 90%">
                            <div class="layui-form-item" style="width: 100%; float: left">
                                <div class="layui-inline">
                                    <label class="layui-form-label" data-i18n>$$$$$${txt-4004}</label>
                                    <div class="layui-input-inline layui-input-wrap">
                                        <input type="text" placeholder="$$$$$${txt-4518}" autocomplete="off" class="layui-input" id="deviceVideoDate" data-i18n="placeholder"/>
                                    </div>
                                    <div class="layui-form-mid" style="padding: 0!important;">
                                        <button type="button" class="layui-btn layui-btn-primary" lay-on="get-vercode" id="queryDeviecChannel" onclick="deviceVidemoQueryHistory()" data-i18n>$$$$$${txt-3841}</button>
                                    </div>
                                </div>
                                <div class="layui-table-fixed-l" >

                                        <table cellspacing="0" cellpadding="0" border="0" class="layui-table"><tbody id="deviceVideoTbody" style="text-align: center;justify-content: center;"></tbody></table>

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


    <div id="skeyewebplayerDiv" style="display: none">
        <div style="float: left;width: 10%;">
            <div>通道列表</div>
            <div id="skeyewebplayerDivChannel" class="skeyewebplayerDivChannel"></div>
        </div>


    </div>
</div>

<script type="text/html" id="treeTable-tools">
    <div class="layui-btn-container">
        <a class="layui-btn layui-btn-primary layui-btn-xs"  lay-event="SkeyeWebPlayerEvent">分屏显示</a>
    </div>
</script>



</body>