<!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">
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../bootstrap/css/bootstrap-datetimepicker.css">
    <link rel="stylesheet" href="../bootstrap/css/bootstrap-select.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/sjcx.css">
    <link rel="stylesheet" href="../css/jkglsj.css">
    <link rel="stylesheet" href="../css/photoviewer.css">
   <link rel="stylesheet" href="../css/animate.css">
    <link rel="stylesheet" href="../css/noticejs.css">    <!--<link rel="stylesheet" href="../css/viewer.min.css">-->
    <title>事件查询</title>
</head>
<body>
<div id="page-sy">
    <div class="right-nav">
        <div class="tab-content content-sjfx">
            <div role="tabpanel" class="tab-pane active" id="sjcx">
                <div class="div-left">
                    <div class="div-xzml">
                        <!--<span class="xzxq">行政辖区</span>-->
                        <input type="text" class="form-control input-pub" placeholder="请输入点位 回车搜索" v-model="searchText"
                               style="width: calc(100% - 20px);margin-left: 10px;margin-bottom: 10px;" @keyup.enter="fastSearch">
                        <div class="div-xzml-div">
                            <img src="../img/sjcx/xzml.png">
                            <span>监控目录</span>
                        </div>
                        <div id="tree-xzxq" style="height: calc(100% - 80px);overflow-x: auto;float: left;width: 100%;"></div>
                    </div>
                    <div id="sjcx_s" class="div-right">
                        <span class="div-right-top">
                            <span class="pub-span">检测时间：</span>
                            <input type="text" class="form-control input-pub" id="kssj" style="width: 300px;" placeholder="请选择开始时间至结束时间">
                            <!--<span class="pub-span" style="display:none">车辆类型</span>-->
                            <!--<select class="form-control selectpicker" style="display:none" multiple v-model="cllx_select" id="cllxs">-->
                                <!--<option v-for="(item,index) in arr_cllx" :value="item.id"-->
                                        <!--v-text="item.value"></option>-->
                            <!--</select>-->
                            <span class="pub-span" style="margin-left: 10px;">处理状态</span>
                            <select class="form-control selectpicker" multiple v-model="clzt_select">
                                <option value="0">未处理</option>
                                <option value="1">正检</option>
                                <option value="2">误检</option>
                                <option value="2">重复事件</option>
                            </select>
                           <span class="pub-span" style="margin-left: 10px;">自动刷新
                            <input type="checkbox" id="push"  @click="zdsx" style="width: 17px;height: 17px;margin-top: 16px;" checked />
                            </span>

                            <span class="glyphicon glyphicon-th-list table-class"
                                  :style="{'color':!show?'#368ff3 !important':''}" @click="qh_tab(1)"></span>
                            <span class="glyphicon glyphicon-th table-class"
                                  :style="{'color':show?'#368ff3 !important':''}" @click="qh_tab(2)"></span>
                            <span class="pub-span" style="margin-left: 10px;">自动弹窗
                                <input id="status" type="checkbox"  @click="zdtx" checked>
                            </span>
                        </span>                        <div>
                            <span style="float:left;line-height: 52px;margin-right: 10px;">事件类型：</span>
                            <ul class="nav nav-pills " role="tablist">
                                <li role="presentation" :class="['tab-pane',(index==num)?'active':'']"
                                    v-for="(item,index) in data_sjlxs" @click="change(item,index)">
                                    {{item.name}}
                                </li>
                            </ul>
                            <ul class="nav navbar-nav navbar-right admin more">
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                                       aria-expanded="false"><span style="color: #368ff3;">更多</span></a>
                                    <ul class="dropdown-menu" style="min-width: 200px;">
                                        <li v-for="(item,index) in data_sjlxs1" @click="change_gd(item,index)" :class="['tab-pane',(index==num1)?'active':'']"><a v-text="item.name"></a></li>
                                    </ul>
                                </li>
                            </ul>
                            <span style="float: left;margin-left: 18px;line-height: 48px;color: #368ff3;" v-text="gd_span"></span>
                            <button type="button" class="btn btn-sm pub-btn" style="margin-left: 30px;" @click="getChange()">查询</button>
                        </div>
                        <div style="height:calc(100% - 164px);margin-top: 20px;" class="tables">
                            <ul class="div-ul div-pub-gt" v-if="show">
                                <li v-for="(item,index) in data_table_wfpz">
                                    <div style="position: absolute;right: 12px;top: 7px;border: 1px solid #e0e0e0;width: 18px;height: 18px;">
                                        <input type="checkbox" name="loginName" class="loginName" :value="item.id+'|'+item.channelid+'|'+item.fdid+'|'+item.recordtime+'|'+item.recordtype"   @click="cli_input" style="width: 17px;height: 17px;margin-top: 0px;">
                                    </div>
                                    <div class="show-icon" :style="{'background':(item.processstatus==0||item.processstatus==null)?'#ff9c2b':(item.processstatus==2)?'#fc3939':(item.processstatus==1)?'#2fba08':'#cccccc'}" v-text="item.processstatus==0||item.processstatus==null?'未处理':item.processstatus==1?'正检':item.processstatus==2?'误检':'重复事件'"></div>
                                    <div class="li-top">
                                        <img :src="'/TrafficStatistics/fielagent?ftpPath='+ item.imagedata" :id="'img'+item.id">
<!--                                        <canvas :id="'cvs'+item.id" style="position: absolute;pointer-events: none;left:0;width:100%;height:100%"></canvas>-->
                                    </div>
                                    <div class="li-center">
                                        <div>
                                            <span class="lx-span" v-text="item.recordname"></span>
                                        </div>
                                        <div>
                                            <span>检测时间：</span>
                                            <span v-text="item.recordtime"></span>
                                        </div>
                                        <div>
                                            <span>通道名称：</span>
                                            <span v-text="item.tdmc"></span>
                                        </div>
                                        <div>
                                            <span>辖区名称：</span>
                                            <span v-text="item.xzmc"></span>
                                        </div>
                                    </div>
                                    <div class="li-bottom">
                                        <img src="../img/sjcx/lssp.png" v-show="item.videopath==null?false:true">
                                        <span @click="xq(item)">详情</span>
                                    </div>
                                </li>
                            </ul>
                            <table v-if="!show" class="table table-td">
                                <thead>
                                <tr style="background-color: rgb(228, 228, 228);">
                                    <td>类型</td>
                                    <td>时间</td>
                                    <td>通道名称</td>
                                    <td>辖区名称</td>
                                    <td>操作</td>
                                </tr>
                                </thead>
                                <tbody class="div-pub-gt">
                                <tr v-for="(item,index) in data_table_wfpz">
                                    <td v-text="item.recordname"></td>
                                    <td v-text="item.recordtime"></td>
                                    <td v-text="item.tdmc"></td>
                                    <td v-text="item.xzmc"></td>
                                    <td>
                                        <img src="../img/sjcx/lssp.png" style="width: 20px;" v-show="item.videopath==null?false:true">
                                        <button type="button" class="btn btn-sm pub-btn"
                                                @click="xq(item)" style="margin-left: 5px;margin-top: 0px;padding: 2px 7px;">详情
                                        </button>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="div-right-buttom">
                            <div style="line-height: 64px;float: left;font-weight: 900;">
                                <span>共</span><span style="color: red;" v-text="count"></span><span>条</span>
                            </div>
                            <ul id="fy4" style="float: right;"></ul>
                            <div style="float: right;margin-top: 21px;margin-right: 30px;width: 111px;line-height: 36px;font-weight: 900;">
                                <span style="float: left;width: 34px;">每页</span>
                                <select class="form-control selectpicker" v-model="fy_select" style="width: 50px;padding: 0px 3px;float: left;"v-on:change="getChange()">
                                    <option>10</option>
                                    <option>20</option>
                                    <option>30</option>
                                    <option>40</option>
                                    <option>50</option>
                                </select>
                                <span style="float: left;margin-left: 8px;">条</span>
                            </div>
                        </div>
                        <div class="state_div" v-show="show_nums">
                            <button type="button" class="btn btn-sm btn1" id="all">全选</button>
                            <button type="button" class="btn btn-sm btn1" id="unall">取消</button>
                            <span v-text="'已选择'+state_arr.length+'项'"></span>
                            <button type="button" class="btn btn-sm btn2" @click="state_cli(3)">重复事件</button>
                            <button type="button" class="btn btn-sm btn3" @click="state_cli(2)">误检</button>
                            <button type="button" class="btn btn-sm btn4" @click="state_cli(1)">正检</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
   <!--事件实时提醒弹出框三级弹框-->
    <div class="modal fade" id="myModal_sjcx" 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" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document" style="width: 650px;">
        <div class="modal-content" style="color: #e6eaef;width: 650px;">
            <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="top-video">
                        <img :src="img_src_s" v-show="!show_s" style="width: 100%;height: 100%;cursor: zoom-in;" data-gallery="manual">
                    </div>
                    <div class="pub-div" v-show="!show_s">
                        <div class="div-img" style="width: 100%;">
                            <img v-for="(item,index) in data_wfsp" :src="item.src" @click="click_img_bf(item.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)" v-show="data_sj.videopath==null?false:true">事件视频</button>
                    </div>
                    <div style="color: #5d5d5d;" class="pub-div">

                        <div class="gjlx">
                            <span v-text="data_sj.recordname"></span>
                        </div>
                        <div class="pub-div-span" v-show="dataface!=null && dataface.id!=null">
                            <span>年龄：</span>
                            <span v-text="dataface==null || dataface.age==null?'':dataface.age"></span>
                            <span class="leftspan">性别：</span>
                            <span v-text="dataface==null ||  dataface.gender==null?'':dataface.gender"></span>
                        </div>
                        <div class="pub-div-span" v-show="dataface!=null && dataface.id!=null">
                            <span>发型：</span>
                            <span v-text="dataface.hairStyle"></span>==null?'':dataface.gender
                            <span class="leftspan">有无戴眼镜：</span>
                            <span v-text="dataface.hasGlasses=='0'?'无':'有'"></span>
                        </div>
                        <div class="pub-div-span" v-show="dataface!=null && dataface.id!=null">
                            <span>有无帽子：</span>
                            <span v-text="dataface.hasHat=='1'?'有':'无'"></span>
                            <span class="leftspan">有无戴口罩：</span>
                            <span v-text="dataface.hasMask=='1'?'有':'无'"></span>
                        </div>
                        <div class="pub-div-span" v-show="datapede!=null && datapede.id!=null">
                            <span>年龄：</span>
                            <span v-text="datapede==null || datapede.age==null?'':datapede.age"></span>
                            <span class="leftspan">性别：</span>
                            <span v-text="datapede==null || datapede.gendera==null?'':datapede.gender"></span>
                        </div>
                        <div class="pub-div-span" v-show="datapede!=null && datapede.id!=null">
                            <span>有无帽子：</span>
                            <span v-text="datapede.hasHat=='1'?'有':'无'"></span>
                            <span class="leftspan">有无戴口罩：</span>
                            <span v-text="datapede.hasMask=='1'?'有':'无'"></span>
                        </div>
                        <div class="pub-div-span" v-show="datapede!=null && datapede.id!=null">
                            <span>角度：</span>
                            <span v-text="datapede.angle"></span>
                            <span class="leftspan">有无背包：</span>
                            <span v-text="datapede.hasBackpack=='0'?'无':'有'"></span>
                        </div>
                        <div class="pub-div-span" v-show="datapede!=null && datapede.id!=null">
                            <span>有无戴眼镜：</span>
                            <span v-text="datapede.hasGlasses=='1'?'有':'无'"></span>
                            <span class="leftspan">有无手提包：</span>
                            <span v-text="datapede.hasCarrybag=='1'?'有':'无'"></span>
                        </div>
                        <div class="pub-div-span" v-show="datapede!=null && datapede.id!=null">
                            <span>有无打伞：</span>
                            <span v-text="datapede.hasUmbrella"></span>
                            <span class="leftspan">有无手推车：</span>
                            <span v-text="datapede.hasTrolley=='1'?'有':'无'"></span>
                        </div>
                        <div class="pub-div-span" v-show="datapede!=null && datapede.id!=null">
                            <span>有无行李：</span>
                            <span v-text="datapede.haLuggage=='1'?'有':'无'"></span>
                            <span class="leftspan">有无刀具：</span>
                            <span v-text="datapede.hasKnife=='1'?'有':'无'"></span>
                        </div>
                        <div class="pub-div-span" v-show="datapede!=null && datapede.id!=null">
                            <span>上衣衣着类型：</span>
                            <span v-text="datapede.coatLength"></span>
                            <span>下身衣着类型：</span>
                            <span v-text="datapede.trousersLength"></span>
                        </div>
                        <div class="pub-div-span" v-show="datapede!=null && datapede.id!=null">
                            <span>上衣颜色：</span>
                            <span v-text="datapede.coatColor"></span>
                            <span class="leftspan">上衣特征：</span>
                            <span v-text="datapede.coatTexture"></span>
                        </div>
                        <div class="pub-div-span" v-show="datapede!=null && datapede.id!=null">
                            <span>下身颜色：</span>
                            <span v-text="datapede.trousersColor"></span>
                            <span class="leftspan">下身特征：</span>
                            <span v-text="datapede.trousersTexture"></span>
                        </div>

                        <div class="pub-div-span" v-show="datatraffic!=null && datatraffic.id!=null">
                            <span>车辆类型：</span>
                            <span v-text="datatraffic.vehicleClass"></span>
                            <span class="leftspan">车辆颜色：</span>
                            <span v-text="datatraffic.vehicleColor"></span>
                        </div>

                        <div class="pub-div-span" v-show="datatraffic!=null && datatraffic.id!=null">
                            <span>车辆品牌：</span>
                            <span v-text="datatraffic.vehicleBrand"></span>
                            <span class="leftspan">有无车牌：</span>
                            <span v-text="datatraffic.hasPlate=='1'?'有':'无'"></span>
                        </div>
                        <div class="pub-div-span" v-show="datatraffic!=null && datatraffic.id!=null">
                            <span>车牌种类：</span>
                            <span v-text="datatraffic.plateClass"></span>
                            <span class="leftspan">车牌颜色：</span>
                            <span v-text="datatraffic.plateColor"></span>
                        </div>
                        <div class="pub-div-span" v-show="datatraffic!=null && datatraffic.id!=null">
                            <span>车牌号：</span>
                            <span v-text="datatraffic.plateNo"></span>
                            <span class="leftspan">车牌有无污浊遮挡：</span>
                            <span v-text="datatraffic.plateNeatness=='1'?'有':'无'"></span>
                        </div>
                        <div class="pub-div-span" v-show="datatraffic!=null && datatraffic.id!=null">
                            <span>角度：</span>
                            <span v-text="datatraffic.angle"></span>
                            <span class="leftspan">遮阳板状态：</span>
                            <span v-text="datatraffic.sunvisor=='1'?'放下':'收起'"></span>
                        </div>
                        <div class="pub-div-span" v-show="datatraffic!=null && datatraffic.id!=null">
                            <span>是否有纸巾：</span>
                            <span v-text="datatraffic.paper=='1'?'有':'无'"></span>
                            <span class="leftspan">是否有挂饰：</span>
                            <span v-text="datatraffic.drop=='1'?'有':'无'"></span>
                        </div>
                        <div class="pub-div-span" v-show="datatraffic!=null && datatraffic.id!=null">
                            <span>年检个数：</span>
                            <span v-text="datatraffic.tag"></span>
                            <span class="leftspan">是否打电话：</span>
                            <span v-text="datatraffic.hasCall=='1'?'有':'无'"></span>
                        </div>
                        <div class="pub-div-span" v-show="datatraffic.id!=null">
                            <span>主驾驶员安全带状态：</span>
                            <span v-text="datatraffic.safetyBelt.mainDriver=='1'?'有系':'未系'"></span>
                            <span>副驾驶员安全带状态：</span>
                            <span v-text="datatraffic.safetyBelt.coDriver=='1'?'有系':'未系'"></span>
                        </div>

                        <div class="pub-div-span" v-show="datatraffic!=null && datatraffic.id!=null">
                            <span>是否危化车：</span>
                            <span v-text="datatraffic.hasDanger=='1'?'是':'否'"></span>
                            <span class="leftspan">是否有天窗：</span>
                            <span v-text="datatraffic.hasSkylight=='1'?'有':'未'"></span>
                        </div>


                        <div class="pub-div-span" v-show="datapeople!=null && datapeople.id!=null">
                            <span>年龄：</span>
                            <span v-text="datapeople.age"></span>
                            <span class="leftspan">性别：</span>
                            <span v-text="datapeople.gender"></span>
                        </div>

                        <div class="pub-div-span" v-show="datapeople!=null && datapeople.id!=null">
                            <!--<span>有无帽子：</span>-->
                            <!--<span v-text="datapeople.hasHat=='1'?'有':'无'"></span>-->
                            <span class="leftspan">有无戴口罩：</span>
                            <span v-text="datapeople.hasMask=='1'?'有':'无'"></span>
                        </div>
                        <div class="pub-div-span" v-show="datapeople!=null && datapeople.id!=null">
                            <span>角度：</span>
                            <span v-text="datapeople.angle"></span>
                            <span class="leftspan">有无背包：</span>
                            <span v-text="datapeople.hasBackpack=='0'?'无':'有'"></span>
                        </div>
                        <div class="pub-div-span" v-show="datapeople!=null && datapeople.id!=null">
                            <span>有无戴眼镜：</span>
                            <span v-text="datapeople.hasGlasses=='1'?'有':'无'"></span>
                            <span class="leftspan">有无手提包：</span>
                            <span v-text="datapeople.hasCarrybag=='1'?'有':'无'"></span>
                        </div>

                        <div class="pub-div-span" v-show="datapeople!=null && datapeople.id!=null">
                            <span>有无打伞：</span>
                            <span v-text="datapeople.hasUmbrella=='1'?'有':'无'"></span>
                            <span class="leftspan"> 有无挂牌：</span>
                            <span v-text="datapeople.hasPlate=='1'?'有':'无'"></span>
                        </div>
                        <div class="pub-div-span" v-show="datapeople!=null && datapeople.id!=null">
                            <span>骑行类型：</span>
                            <span v-text="datapeople.bikeClass"></span>

                            <span class="leftspan"> 上衣衣着类型：</span>
                            <span v-text="datapeople.coatLength"></span>
                        </div>

                        <div class="pub-div-span" v-show="datapeople!=null && datapeople.id!=null">
                            <span>车牌号：</span>
                            <span v-text="datapeople.plateNo"></span>

                            <span class="leftspan">有无头盔：</span>
                            <span v-text="datapeople.HasHelmet=='1'?'有':'无'"></span>
                        </div>


                        <div class="pub-div-span" v-show="datapeople!=null && datapeople.id!=null">
                            <span>头盔颜色：</span>
                            <span v-text="datapeople.helmetColor"></span>

                            <span class="leftspan">上衣颜色：</span>
                            <span v-text="datapeople.coatColor"></span>
                        </div>
                        <div class="pub-div-span" v-show="datapeople!=null && datapeople.id!=null">
                            <span>上衣特征：</span>
                            <span v-text="datapeople.coatTexture"></span>

                            <span class="leftspan">非机动车社会属性：</span>
                            <span v-text="datapeople.socialAttribute"></span>
                        </div>
                        <div class="pub-div-span" v-show="datapeople!=null && datapeople.id!=null">
                            <span>非机动车所属企业：</span>
                            <span v-text="datapeople.enterprise"></span>

                            <span class="leftspan">是有载客：</span>
                            <span v-text="datapeople.hasPassenger=='1'?'有':'无'"></span>
                        </div>

                        <!--<div class="pub-div-span">-->
                            <!--<span>报警时间：</span>-->
                            <!--<span v-text="data_sj.recordtime"></span>-->
                            <!--<span class="leftspan">辖区编号：</span>-->
                            <!--<span v-text="data_sj.areaid"></span>-->
                        <!--</div>-->
                        <div class="pub-div-span">
                            <span>辖区名称：</span>
                            <span v-text="data_sj.xzmc"></span>
                            <span class="leftspan">通道编号：</span>
                            <span v-text="data_sj.fdid+'_'+data_sj.channelid"></span>
                        </div>
                        <div class="pub-div-span">
                            <span>通道名称：</span>
                            <span v-text="data_sj.tdmc"></span>
                        </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>
  <!--事件实时提醒弹出框-->
    <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/jquery-3.1.1.min.js"></script>
<!--<script src="../js/viewer.min.js"></script>-->
<script src="../js/util/photoviewer.js"></script>
<script src="../bootstrap/js/bootstrap.js"></script>
<script src="../bootstrap/js/bootstrap-paginator.js"></script>
<script src="../bootstrap/js/bootstrap-treeview.js"></script>
<script src="../bootstrap/js/bootstrap-select.js"></script>
<script src="../bootstrap/js/bootstrap-switch.min.js"></script>
<!--<script src="../bootstrap/js/bootstrap-datetimepicker.js"></script>-->
<!--<script src="../bootstrap/js/bootstrap-datetimepicker.zh-CN.js"></script>-->
<script src="../js/laydate/laydate.js"></script>
<script src="../js/vue.js"></script>
<script src="../js/util/http_util.js"></script>
<script src="../js/jkgl/Canvas.js"></script>
<script src="../js/sjcx/sjcx.js"></script>
</html>