<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>监控管理</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../bootstrap/css/bootstrap-datetimepicker.css">
    <link rel="stylesheet" href="../bootstrap/css/bootstrap-treeview.css">
    <link rel="stylesheet" href="../bootstrap/css/bootstrap-switch.min.css">
    <link rel="stylesheet" href="../css/jkgl.css">
    <!--<link rel="stylesheet" href="../css/viewer.min.css">-->
    <link rel="stylesheet" href="../css/photoviewer.css">
    <link rel="stylesheet" href="../css/animate.css">
    <link rel="stylesheet" href="../css/noticejs.css">
</head>
<body>
<div id="page-sy">
    <audio id="audio" src="../img/4082.mp3"></audio>
    <div class="left-nav">
        <input type="text" class="form-control input-pub" placeholder="请输入点位 回车搜索" v-model="searchText"
               @keyup.enter="fastSearch">
        <div class="div-xzml-div">
            <img src="../img/sjcx/xzml.png">
            <span>行政目录</span>
        </div>
        <div id="tree-xzxq"></div>
    </div>
    <div class="right-nav">
        <div class="center-nav" id="qpzs" :style="{'width':is_bd?'calc(66%)':'calc(100% - 15px)'}">
            <div class="right-top-div">
                <ul class="div-ul">
                    <li v-bind:class=class_s @dblclick="sj_click($event,item)" v-for="(item,index) in data_sl"
                        onselectstart="return false" :id="'li'+index">
                        <video
                               style="height: 100%;width: 100%;position:absolute;object-fit:fill;pointer-events: none;"
                               class="monitorc" muted :id="item.id"
                               v-show="item.type">
                        </video>
                        <div style="pointer-events: none;position:absolute;left:0;top:0;right:0;bottom:0;color:white;font-size:20px;display:flex;align-items:center;justify-content:space-around;z-index:1;" v-text="item.videoMessage"></div>
                        <canvas id="myCanvas" style="position: absolute;pointer-events: none;" :id="item.canvas_id" v-show="item.canvas_show"></canvas>
                        <canvas style="position: absolute;pointer-events: none;width: 100%;height: 100%" :id="item.canvas_id_1"></canvas>
                        <canvas style="position: absolute;pointer-events: none;width: 100%;height: 100%" :id="item.canvas_id_2"></canvas>
                        <div style="position: absolute;width: 100%;height: 100%;" @click="dj_click(index,item)"></div>
                        <img src="../img/sjcx/mr.png" v-show="!item.type">
                        <div style="position: absolute;bottom: 0;width: 100%;background-color: #313131;z-index: 11;"
                             v-show="num_inx==index">
                            <!--                            <span class="glyphicon glyphicon-fullscreen pub-span" title="全屏"></span>-->
                            <!--<span class="glyphicon glyphicon-cog pub-span" title="编辑规则"-->
                                                             <!--:id="item.bjgz_id"></span>-->
                            <span class="glyphicon glyphicon-screenshot pub-span" title="开启交参预览"
                                  @click="jcyl($event,item)" v-show="show_jcyl"
                                                             :id="item.jcyl_id"></span>
                            <!--<span class="glyphicon glyphicon-indent-right pub-span" title="开启规则设置"-->
                                  <!--@click="gzpz()"            :id="item.gzsz_id"></span>-->
                            <!--<span class="glyphicon glyphicon-random pub-span" title="开启属性叠加"-->
                                                             <!--:id="item.sxdj_id"></span>-->
                            <span class="glyphicon glyphicon-duplicate pub-span" title="开启对象叠加"
                                  @click="dxdj($event,item,index)" :id="item.dxdj_id"></span>
                            <span class="glyphicon glyphicon-adjust pub-span" title="开启规则叠加"
                                  @click="gzdj($event,item,index)" :id="item.gzdj_id"></span>
                            <!--<span class="glyphicon glyphicon-eye-open pub-span" title="开启算法"-->
                                                             <!--:id="item.sf_id"></span>-->
                        </div>
                    </li>
                    <div class="right_fd-div" v-show="echarts_show">
                        <div class="right-top">
                            <div class="img-div">
                                <img src="../img/sjcx/up.png">
                            </div>
                            <div id="ecs1" class="echarts-div"></div>
                            <div id="ecs2" class="echarts-div"></div>
                            <div class="jdclx-div">
                                <div>
                                    <img src="../img/sjcx/car_type1.png" ><span v-text="sx_1"></span>
                                </div>
                                <div>
                                    <img src="../img/sjcx/car_type2.png"><span v-text="sx_2"></span>
                                </div>
                                <div>
                                    <img src="../img/sjcx/car_type3.png"><span v-text="sx_3"></span>
                                </div>
                                <div>
                                    <img src="../img/sjcx/car_type5.png"><span v-text="sx_4"></span>
                                </div>
                            </div>
                        </div>
                        <div class="right-top">
                            <div class="img-div">
                                <img src="../img/sjcx/down.png">
                            </div>
                            <div id="ecs3" class="echarts-div"></div>
                            <div id="ecs4" class="echarts-div"></div>
                            <div class="jdclx-div">
                                <div>
                                    <img src="../img/sjcx/car_type1.png"><span v-text="xx_1"></span>
                                </div>
                                <div>
                                    <img src="../img/sjcx/car_type2.png"><span v-text="xx_2"></span>
                                </div>
                                <div>
                                    <img src="../img/sjcx/car_type3.png"><span v-text="xx_3"></span>
                                </div>
                                <div>
                                    <img src="../img/sjcx/car_type5.png"><span v-text="xx_4"></span>
                                </div>
                            </div>
                        </div>

                    </div>
                </ul>
                <div style="position: absolute;top: 7px;right: 7px;z-index: 100;">
                    <input name="status" type="checkbox">
                </div>
            </div>
            <div class="right-bottom-div">
                <div>
                    <span class="glyphicon glyphicon-fullscreen pub-span" title="全屏"
                          style="float: left;margin-left: 10px;" @click="qp_span" v-show="qp_show"></span>
                    <span class="glyphicon glyphicon-fullscreen pub-span" title="退出全屏"
                          style="float: left;margin-left: 10px;" @click="tcqp_span" v-show="!qp_show"></span>
                    <span class="glyphicon glyphicon-remove-circle pub-span" title="清除当前播放监控"
                          style="float: left;font-size: 19px;" @click="qc_span"></span>
                </div>
                <div style="float: left;width: 80%;height: 100%;" @click="ycczgz"> </div>
                <div>
                    <!--<span class="glyphicon glyphicon-th pub-span" title="九屏" @click="dj_cp(9)"-->
                          <!--:style="{'color':num==9?'#368ff3 !important':'','pointer-events':num==9?'none':'all'}"></span>-->
                    <span class="glyphicon glyphicon-th-large pub-span" title="四屏" @click="dj_cp(4)"
                          :style="{'color':num==4?'#368ff3 !important':'','pointer-events':num==4?'none':'all'}"></span>
                    <span class="glyphicon glyphicon-unchecked pub-span" title="单屏" @click="dj_cp(1)"
                          :style="{'color':num==1?'#368ff3 !important':'','pointer-events':num==1?'none':'all'}"></span>
                </div>
            </div>
        </div>
        <div class="center-nav" :style="{'width':is_bd?'calc(33% - 25px)':'0'}" v-show="is_bd">
            <div style="width: 100%;height: 30px;float: left;color: #525252;font-size: 18px;line-height: 36px;margin-left: 10px;font-weight: 900;">
                <span>锁定监控矩阵</span>
            </div>
            <div style="float:left; height: calc(100% - 40px);width: 100%;">
                <ul class="div-ul" style="margin-left: 10px;width: calc(100% - 20px);overflow-y: auto;overflow-x: hidden;">
                    <li v-for="(item,index) in data_sd" style="width:calc(100% - 5px);height: 300px;position: relative" :id="'sd_li'+index" @dblclick="sj_click_sd($event)">
                        <div style="width: 100%;height: 40px;color: white;line-height: 40px;margin-left: 10px;">
                            <span v-text="item.name"></span>
                        </div>
                        <div style="width:100%;height: calc(100% - 40px);">
                            <video controls
                                   style="height: 100%;width: 100%;object-fit:fill;pointer-events: none;"
                                   class="monitorc" autoplay muted :id="item.id">
                            </video>
                        </div>
                        <button @click="remove(item,index)" type="button" class="close" style="position: absolute;top:5px;right: 15px;"><span style="color: white;font-size: 30px">&times;</span></button>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document" style="width: 800px;">
        <div class="modal-content" style="color: #e6eaef;width: 800px;">
            <div class="modal-header" style="background-color: rgb(48, 53, 72);">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true" style="color: white;">&times;</span></button>
                <h6 class="modal-title">检测规则配置</h6>
            </div>
            <div class="modal-body">
                <div class="left-modal-div">
                    <img src="../img/sjcx/wf.png">
                </div>
                <div class="right-modal-div">
                    <div class="right-modal-top-div">
                        <span class="pzgz">规则配置</span>
                        <span class="glyphicon glyphicon-refresh sx"></span>
                    </div>
                    <div class="right-modal-center-div">
                        <ul>
                            <li v-for="(item,index) in pzx">
                                <span v-text="item.iem">基础检测区域</span>
                                <span class="glyphicon glyphicon-remove-sign sc" @click="remove(item,index)"></span>
                            </li>
                        </ul>
                    </div>
                    <div class="right-modal-bottom-div">
                        <div class="input-group" style="width: 80px;float:left;">
                            <span class="input-group-addon glyphicon glyphicon-minus" @click="add_cut(true)"
                                  :style="{'pointer-events':tim==1?'none !important':''}"></span>
                            <input type="text" class="form-control" aria-describedby="basic-addon1" disabled
                                   v-model="tim">
                            <span class="input-group-addon glyphicon glyphicon-plus" @click="add_cut(false)"></span>
                        </div>
                        <button type="button" class="btn btn-sm">
                            <span class="glyphicon glyphicon-copy"></span>
                            <span>导入</span>
                        </button>
                        <button type="button" class="btn btn-sm" style="margin-right: 10px">
                            <span class="glyphicon glyphicon-paste"></span>
                            <span>导出</span>
                        </button>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm" data-dismiss="modal" style="color: #2f2f2f;">关闭</button>
                <button type="button" class="btn btn-sm btn-info" data-dismiss="modal">保存</button>
            </div>
        </div>
    </div>
</div>
<!--事件实时提醒弹出框三级弹框-->
<div class="modal fade" id="myModal_sj" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document" style="width: 700px;">
        <div class="modal-content" style="color: #e6eaef;width: 700px;">
            <div class="modal-header" style="background-color: rgb(48, 53, 72);">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true" style="color: white;">&times;</span></button>
                <h6 class="modal-title">事件实时提醒</h6>
            </div>
            <div class="modal-body" style="height: 780px;">
                <div>
                    <div id="a1s" class="carousel" data-ride="carousel">
                        <ol class="carousel-indicators">
                            <li data-target="#a1s" :data-slide-to="index"
                                v-for="(item,index) in yjsj_data"></li>
                        </ol>
                        <div class="carousel-inner" role="listbox">
                            <div class="item" v-for="(item,index) in yjsj_data">
                                <img :src="item.src[0].img_src" alt="..." @click="djxx_modal(item)">
                                <div style="float: left;margin-left: 20px;width: 270px;">
                                    <div class="div_modal">
                                        <div class="div_modal_span">
                                            <span>报警时间:</span>
                                        </div>
                                        <div class="div_modal_span1">
                                            <span v-text="item.bjsj"></span>
                                        </div>
                                    </div>
                                    <div class="div_modal">
                                        <div class="div_modal_span">
                                            <span>事件类型:</span>
                                        </div>
                                        <div class="div_modal_span1">
                                            <span v-text="item.sjlx"></span>
                                        </div>
                                    </div>
                                    <div class="div_modal">
                                        <div class="div_modal_span">
                                            <span>点位名称:</span>
                                        </div>
                                        <div class="div_modal_span1">
                                            <span v-text="item.dwmc"></span>
                                        </div>
                                    </div>
                                    <div class="div_modal">
                                        <div class="div_modal_span">
                                            <span>处理状态:</span>
                                        </div>
                                        <div class="div_modal_span1">
                                            <button type="button" v-show="item.ss_type==''" class="btn btn-sm" @click="state_cli(item,1,index,1)" style="margin-top: 0px;padding: 2px 7px;float: none;background: #368ff3;border: 1px solid #929292;color: white;">正检
                                            </button>
                                            <button type="button" v-show="item.ss_type==''" class="btn btn-sm" @click="state_cli(item,2,index,1)" style="margin-top: 0px;padding: 2px 7px;float: none;background: #ffffff;border: 1px solid #f94646;color: #f94646;">误检
                                            </button>
                                            <button type="button" v-show="item.ss_type==''" class="btn btn-sm" @click="state_cli(item,3,index,1)" style="margin-top: 0px;padding: 2px 7px;float: none;color: #717171;">重复事件
                                            </button>
                                            <span v-text="item.ss_type==1?'正检':item.ss_type==2?'误检':item.ss_type==3?'重复事件':''"></span>
                                        </div>
                                    </div>
                                    <div class="div_modal">
                                        <div class="div_modal_span">
                                            <span>是否锁定:</span>
                                        </div>
                                        <div class="div_modal_span1">
                                            <input type="checkbox" :name="'ass_'+index" :value="item.videoid" :checked="item.checked"
                                                   style="width: 19px;height: 19px;" @click="cli_input(item,$event,index,1)"/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <a class="left carousel-control" href="#a1s" role="button" data-slide="prev">
                            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                            <span class="sr-only">Previous</span>
                        </a>
                        <a class="right carousel-control" href="#a1s" role="button" data-slide="next">
                            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                            <span class="sr-only">Next</span>
                        </a>
                    </div>
                    <div class="show-icon" style="background: #e80000;">一级</div>
                </div>
                <div>
                    <div id="a2s" class="carousel" data-ride="carousel">
                        <ol class="carousel-indicators">
                            <li data-target="#a2s" :data-slide-to="index"
                                v-for="(item,index) in ejsj_data"></li>
                        </ol>
                        <div class="carousel-inner" role="listbox">
                            <div class="item" v-for="(item,index) in ejsj_data">
                                <img :src="item.src[0].img_src" alt="..." @click="djxx_modal(item)">
                                <div style="float: left;margin-left: 20px;width: 270px;">
                                    <div class="div_modal">
                                        <div class="div_modal_span">
                                            <span>报警时间:</span>
                                        </div>
                                        <div class="div_modal_span1">
                                            <span v-text="item.bjsj"></span>
                                        </div>
                                    </div>
                                    <div class="div_modal">
                                        <div class="div_modal_span">
                                            <span>事件类型:</span>
                                        </div>
                                        <div class="div_modal_span1">
                                            <span v-text="item.sjlx"></span>
                                        </div>
                                    </div>
                                    <div class="div_modal">
                                        <div class="div_modal_span">
                                            <span>点位名称:</span>
                                        </div>
                                        <div class="div_modal_span1">
                                            <span v-text="item.dwmc"></span>
                                        </div>
                                    </div>
                                    <div class="div_modal">
                                        <div class="div_modal_span">
                                            <span>处理状态:</span>
                                        </div>
                                        <div class="div_modal_span1">
                                            <button type="button" v-show="item.ss_type==''" class="btn btn-sm" @click="state_cli(item,1,index,2)" style="margin-top: 0px;padding: 2px 7px;float: none;background: #368ff3;border: 1px solid #929292;color: white;">正检
                                            </button>
                                            <button type="button" v-show="item.ss_type==''" class="btn btn-sm" @click="state_cli(item,2,index,2)" style="margin-top: 0px;padding: 2px 7px;float: none;background: #ffffff;border: 1px solid #f94646;color: #f94646;">误检
                                            </button>
                                            <button type="button" v-show="item.ss_type==''" class="btn btn-sm" @click="state_cli(item,3,index,2)" style="margin-top: 0px;padding: 2px 7px;float: none;color: #717171;">重复事件
                                            </button>
                                            <span v-text="item.ss_type==1?'正检':item.ss_type==2?'误检':item.ss_type==3?'重复事件':''"></span>
                                        </div>
                                    </div>
                                    <div class="div_modal">
                                        <div class="div_modal_span">
                                            <span>是否锁定:</span>
                                        </div>
                                        <div class="div_modal_span1">
                                            <input type="checkbox"  :name="'a1ss_'+index" :value="item.videoid" :checked="item.checked"
                                                   style="width: 19px;height: 19px;" @click="cli_input(item,$event,index,2)"/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <a class="left carousel-control" href="#a2s" role="button" data-slide="prev">
                            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                            <span class="sr-only">Previous</span>
                        </a>
                        <a class="right carousel-control" href="#a2s" role="button" data-slide="next">
                            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                            <span class="sr-only">Next</span>
                        </a>
                    </div>
                    <div class="show-icon" style="background: #fb7e22;">二级</div>
                </div>
                <div>
                    <div id="a3s" class="carousel" data-ride="carousel">
                        <ol class="carousel-indicators">
                            <li data-target="#a3s" :data-slide-to="index"
                                v-for="(item,index) in sjsj_data"></li>
                        </ol>
                        <div class="carousel-inner" role="listbox">
                            <div class="item" v-for="(item,index) in sjsj_data">
                                <img :src="item.src[0].img_src" alt="..." @click="djxx_modal(item)">
                                <div style="float: left;margin-left: 20px;width: 270px;">
                                    <div class="div_modal">
                                        <div class="div_modal_span">
                                            <span>报警时间:</span>
                                        </div>
                                        <div class="div_modal_span1">
                                            <span v-text="item.bjsj"></span>
                                        </div>
                                    </div>
                                    <div class="div_modal">
                                        <div class="div_modal_span">
                                            <span>事件类型:</span>
                                        </div>
                                        <div class="div_modal_span1">
                                            <span v-text="item.sjlx"></span>
                                        </div>
                                    </div>
                                    <div class="div_modal">
                                        <div class="div_modal_span">
                                            <span>点位名称:</span>
                                        </div>
                                        <div class="div_modal_span1">
                                            <span v-text="item.dwmc"></span>
                                        </div>
                                    </div>
                                    <div class="div_modal">
                                        <div class="div_modal_span">
                                            <span>处理状态:</span>
                                        </div>
                                        <div class="div_modal_span1">
                                            <button v-show="item.ss_type==''" type="button" class="btn btn-sm" @click="state_cli(item,1,index,3)" style="margin-top: 0px;padding: 2px 7px;float: none;background: #368ff3;border: 1px solid #929292;color: white;">正检
                                            </button>
                                            <button v-show="item.ss_type==''" type="button" class="btn btn-sm" @click="state_cli(item,2,index,3)" style="margin-top: 0px;padding: 2px 7px;float: none;background: #ffffff;border: 1px solid #f94646;color: #f94646;">误检
                                            </button>
                                            <button v-show="item.ss_type==''" type="button" class="btn btn-sm" @click="state_cli(item,3,index,3)" style="margin-top: 0px;padding: 2px 7px;float: none;color: #717171;">重复事件
                                            </button>
                                            <span v-text="item.ss_type==1?'正检':item.ss_type==2?'误检':item.ss_type==3?'重复事件':''"></span>
                                        </div>
                                    </div>
                                    <div class="div_modal">
                                        <div class="div_modal_span">
                                            <span>是否锁定:</span>
                                        </div>
                                        <div class="div_modal_span1">
                                            <input type="checkbox" :name="'a2ss_'+index" :value="item.videoid" :checked="item.checked"
                                                   style="width: 19px;height: 19px;" @click="cli_input(item,$event,index,3)"/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <a class="left carousel-control" href="#a3s" role="button" data-slide="prev">
                            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                            <span class="sr-only">Previous</span>
                        </a>
                        <a class="right carousel-control" href="#a3s" role="button" data-slide="next">
                            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                            <span class="sr-only">Next</span>
                        </a>
                    </div>
                    <div class="show-icon" style="background: #ffee00;">三级</div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--事件实时提醒弹出框-->
<div class="modal fade" id="myModal_li" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document" style="width: 633px;">
        <div class="modal-content" style="color: #e6eaef;width: 633px;">
            <div class="modal-header" style="background-color: rgb(48, 53, 72);">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true" style="color: white;">&times;</span></button>
                <h6 class="modal-title">事件实时提醒</h6>
            </div>
            <div class="modal-body">
                <div>
                    <div class="top-video">
                        <video controls style="height: 100%;width: 100%;object-fit:fill;pointer-events: none;"
                               class="video-js" autoplay muted id="my_video_1" ref='video'
                               v-show="shows">
                        </video>
                        <img :src="src_img" v-show="!shows" style="width: 100%;height: 100%;cursor: zoom-in;"
                             data-gallery="manual">
                    </div>
                    <div class="pub-div" v-show="!shows">
                        <div class="div-img" v-for="(item,index) in data_wfsp">
                            <img :src="item.img_src" @click="click_img_bf(item.img_src)">
                        </div>
                    </div>
                    <div class="pub-div">
                        <button type="button" class="btn btn-sm" v-bind:class=class_s @click="sp_qh(1)">实时视频
                        </button>
                        <button type="button" class="btn btn-sm" v-bind:class=class_s1 @click="sp_qh(2)">事件图片</button>
                    </div>
                    <div style="color: #5d5d5d;" class="pub-div">
                        <div class="gjlx">
                            <span v-text="data_sj.lx"></span>
                        </div>
                        <div class="pub-div-span">
                            <span>报警时间：</span>
                            <span v-text="data_sj.bjsj"></span>
                        </div>
                        <div class="pub-div-span">
                            <span>点位名称：</span>
                            <span v-text="data_sj.dwmc"></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer" style="border-top:none">
                <button type="button" class="btn btn-sm" data-dismiss="modal" style="color: #2f2f2f;">关闭</button>
            </div>
        </div>
    </div>
</div>

</body>
<script src="../js/jkgl/axios.min.js"></script>
<script src="../js/flv.min.js"></script>
<script src="../js/jquery-3.1.1.min.js"></script>
<!--<script src="../js/viewer.min.js"></script>-->
<script src="../js/util/photoviewer.js"></script>
<script src="../js/notice.js"></script>
<script src="../bootstrap/js/bootstrap.js"></script>
<script src="../bootstrap/js/bootstrap-treeview.js"></script>
<script src="../bootstrap/js/bootstrap-switch.min.js"></script>
<script src="../js/echarts.min.js"></script>
<script src="../js/echarts-liquidfill.min.js"></script>
<script src="../js/vue.js"></script>
<script src="../js/util/http_util.js"></script>
<script src="../js/jkgl/MseVideo.js"></script>
<script src="../js/jkgl/Canvas.js"></script>
<script src="../js/jkgl/jkgl.js"></script>
</html>