<!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/tstj.css">
    <link rel="stylesheet" href="../css/photoviewer.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">
                        <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">
                        <div class="div-right-top">
                            <span class="pub-span">统计类型：</span>
                            <select class="form-control selectpicker" v-model="type" v-on:change="getChange_tszt()">
                                <option value="1">按天</option>
                                <option value="2">按月</option>
                            </select>
                            <span class="pub-span">告警时间：</span>
                            <input type="text" class="form-control input-pub" id="kssj" style="width: 180px;"
                                   v-show="shows" placeholder="请选择开始时间至结束时间">
                            <input type="text" class="form-control input-pub" id="kssj1" style="width: 142px;"
                                   v-show="!shows" placeholder="请选择开始时间至结束时间">
                            <span class="pub-span">事件类型</span>
                            <select class="form-control selectpicker" v-model="cllx_select" id="cllxs">
                                <option v-for="(item,index) in arr_cllx" :value="item.id"
                                        v-text="item.name"></option>
                            </select>
                            <button type="button" class="btn btn-sm pub-btn" style="margin-left: 30px;" @click="getChange()">查询</button>
                        </div>
                        <div style="height:calc(100% - 130px);margin-top: 20px;" class="tables">
                            <table class="table table-td">
                                <thead>
                                <tr style="background-color: rgb(228, 228, 228);">
                                    <td>日期</td>
                                    <td>事件类型</td>
                                    <td>支队名称</td>
                                    <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.countdate"></td>
                                    <td v-text="item.eventtypename==null?'全部':item.eventtypename"></td>
                                    <td v-text="item.areaname"></td>
                                    <td v-text="item.totalcount==null?'0':item.totalcount"></td>
                                    <td v-text="item.successpushcount==null?'0':item.successpushcount"></td>
                                    <td v-text="item.nopushcount==null?'0':item.nopushcount"></td>
                                    <td v-text="item.failpushcount==null?'0':item.failpushcount"></td>
                                    <td>
                                        <button type="button" class="btn btn-sm pub-btn"
                                                style="margin-left: 5px;margin-top: 0px;padding: 2px 7px;"
                                                @click="xqs(item)">详情
                                        </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>
                </div>
            </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: 1300px;">
        <div class="modal-content" style="color: #e6eaef;width: 1300px;">
            <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 tables" style="height: 650px">
                <div style="height:calc(100% - 44px);" class="tables">
                    <table class="table table-td" style="text-align: center;color: dimgrey;margin-bottom: 0px;">
                        <thead>
                        <tr style="background-color: rgb(228, 228, 228);">
                            <td style="width:40px;"></td>
                            <td style="width: 90px;">操作</td>
                            <td>时间</td>
                            <td style="width: 400px;">通道名称</td>
                            <td>事件类型</td>
                            <td>辖区名称</td>
                            <td>推送状态</td>
                        </tr>
                        </thead>
                        <tbody class="div-pub-gt" style="height: calc(100% - 5px);">
                        <tr v-for="(item,index) in data_table_wfpz">
                            <td v-text="index+1" style="width:40px;"></td>
                            <td style="width: 90px;">
                                <button type="button" class="btn btn-sm pub-btn pubs_1" style="margin: 0px;"
                                        @click="xq(item)">详情
                                </button>
                            </td>
                            <td v-text="item.recordtime"></td>
                            <td v-text="item.tdmc" style="width: 400px;"></td>
                            <td v-text="item.recordname"></td>
                            <td v-text="item.xzmc"></td>
                            <td v-text="item.pushstatus==null||item.pushstatus=='9'?'待推送':item.pushstatus=='0'?'推送成功':'推送失败'"></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="div-right-buttom" style="height: 0px;">
                    <div style="line-height: 64px;float: left;font-weight: 900;color: #7b7b7b;">
                        <span>共</span><span style="color: red;" v-text="count"></span><span>条</span>
                    </div>
                    <ul id="fy" style="float: right;"></ul>
                    <div style="float: right;margin-top: 21px;color: #7b7b7b;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>
            <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" 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="modal-body">
                <div>
                    <div class="top-video">
                        <video id="my_video_1" class="video-js" controls preload="auto" width="480" height="280"
                               ref='video' v-show="show_s" style="object-fit: fill;width: 100%;height: 100%;"
                               :src="video_src">
                        </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">
                            <span>报警时间：</span>
                            <span v-text="data_sj.recordtime"></span>
                        </div>
                        <div class="pub-div-span">
                            <span>辖区编号：</span>
                            <span v-text="data_sj.areaid"></span>
                        </div>
                        <div class="pub-div-span">
                            <span>辖区名称：</span>
                            <span v-text="data_sj.xzmc"></span>
                        </div>
                        <div class="pub-div-span">
                            <span>通道编号：</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>
            </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/tsgl/tstj.js"></script>
</html>