<!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" type="text/css" href="../bootstrap/css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap-datetimepicker.css" />
    <link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap-treeview.css">
    <title>人脸识别</title>
    <style>
        html,
        body,
        .main {
            width: 100%;
            height: 100%;
            margin: 0 auto;
            overflow: hidden;
        }

        .main {}

        .top-nav {
            width: 100%;
            height: 65%;
        }

        .top-nav>div {
            float: left;
        }

        .top-left {
            width: 20%;
            height: 100%;
            padding: 10px;
            border-right: 1px solid #ddd;
            border-bottom: 1px solid #ddd;
        }

        .top-center {
            width: 60%;
            height: 100%;
            border-right: 1px solid #ddd;
            border-bottom: 1px solid #ddd;
        }

        .top-right {
            width: 20%;
            height: 100%;
            padding: 10px;
            border-bottom: 1px solid #ddd;
        }

        .top-right .title {
            width: 100%;
            height: 30px;
            background: #ddd;
            border-radius: 8px;
            line-height: 30px;
            padding-left: 30px;
            color: #463e3e;
        }

        .top-right .content {
            width: 100%;
            height: calc(100% - 30px);
            padding: 5px;
            overflow-y: auto;
        }

        .bottom-nav {
            width: 100%;
            height: 35%;
            padding: 5px;
        }

        .condition {
            width: 100%;
            height: 50px;
            line-height: 50px;
            padding-left: 30px;
            display: -webkit-box;
            border-bottom: 1px solid #ddd;
        }
        
        .condition input{
            width: 180px;
            height: 30px;
            margin-top: 10px;
            margin-right: 20px;
        }

        .condition select{
            width: 180px;
            height: 30px;
            padding: 3px 6px;
            margin-top: 10px;
            margin-right: 20px;
        }

        #capturepichistory table tr td:first-child{
            text-align: right;
            vertical-align: middle !important;
        }

        .bottom-nav-content{
            width: 100%;
            height: calc(100% - 50px);
        }

        .content table tr td:first-child,.content table tr td:nth-child(3){
            text-align: right;
        }

        .bottom-nav-content table tr td:first-child,.bottom-nav-content table tr td:nth-child(3){
            text-align: right;
        }

        .tab-content>div{
            width: 100%;
            height: 100%;
        }

        #home table tr td:first-child,#home table tr td:nth-child(3){
            text-align: right;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="top-nav">
            <div class="top-left">
                <div id="tree"></div>
            </div>
            <div class="top-center">
                <iframe :src=video_src width="100%" height="100%" allowfullscreen></iframe>
            </div>
            <div class="top-right">
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">实时抓拍</a></li>
                    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">历史抓拍</a></li>
                </ul>

                <!-- Tab panes -->
                <div class="tab-content" style="width: 100%;height: calc(100% - 45px);">
                    <div role="tabpanel" class="tab-pane active" id="home" style="overflow-y:auto;">
                        <table class="table" v-for="(item,index) in actual_capturepichistory" style="width:calc(100% - 2px);height:calc(33% - 2px);border: 1px solid #ddd;">
                            <tr>
                                <td style="text-align:left;" colspan="4" v-text=index+1></td>
                            </tr>
                            <tr>
                                <td colspan="4">
                                    <img :src="(ishostname==1)?item.snappicurl:item.snappicassetsurl" alt="" style="width:100%;height:200px;">
                                </td>
                            </tr>
                            <tr>
                                <td>性别：</td>
                                <td v-text="item.sex=='undefined'?'未知':item.sex"></td>
                                <td>年龄段：</td>
                                <td v-text="item.agegroup=='undefined'?'未知':item.agegroup"></td>
                            </tr>
                            <tr>
                                <td>戴眼镜：</td>
                                <td colspan="3" v-text="item.iswearingglassess=='undefined'?'未知':item.iswearingglassess"></td>
                            </tr>
                            <tr>
                                <td>抓拍时间：</td>
                                <td colspan="3" v-text="item.created_at=='undefined'?'未知':item.created_at"></td>
                            </tr>
                        </table>
                    </div>
                    <div role="tabpanel" class="tab-pane" id="profile">
                        <div class="title">
                            <span style="font-weight: 600;">人脸抓拍</span>
                            <span class="glyphicon glyphicon-glass" style="float:right;margin-top: 8px;margin-right: 30px;"
                                @click="search_history()"></span>
                        </div>
                        <div class="content">
                            <table class="table" v-for="(item,index) in capturepichistory" style="width:calc(100% - 2px);height:calc(33% - 2px);border: 1px solid #ddd;">
                                <tr>
                                    <td style="text-align:left;" colspan="4" v-text=index+1></td>
                                </tr>
                                <tr>
                                    <td colspan="4">
                                        <img :src="(ishostname==1)?item.snappicurl:item.snappicassetsurl" alt="" style="width:100%;height:200px;">
                                    </td>
                                </tr>
                                <tr>
                                    <td>性别：</td>
                                    <td v-text="item.sex=='undefined'?'未知':item.sex"></td>
                                    <td>年龄段：</td>
                                    <td v-text="item.agegroup=='undefined'?'未知':item.agegroup"></td>
                                </tr>
                                <tr>
                                    <td>戴眼镜：</td>
                                    <td colspan="3" v-text="item.iswearingglasses=='undefined'?'未知':item.iswearingglasses"></td>
                                </tr>
                                <tr>
                                    <td>抓拍时间：</td>
                                    <td colspan="3" v-text="item.created_at=='undefined'?'未知':item.created_at"></td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom-nav">
            <div class="condition">
                <span style="font-size: 18px;font-weight: 700;padding-right: 30px;">人脸比对历史查询</span>
                时间：<input id="date_db" class="form-control" type="text">
                年龄段：<select class="form-control" v-model="conditiondb.agegroup">
                    <option value="全部">全部</option>
                    <option value="青年">青年</option>
                    <option value="中年">中年</option>
                    <option value="老年">老年</option>
                </select>
                是否戴眼镜：<select class="form-control" v-model="conditiondb.glassess">
                    <option value="全部">全部</option>
                    <option value="是">是</option>
                    <option value="否">否</option>
                </select>
                性别：<select class="form-control" style="margin-right:0px;" v-model="conditiondb.sex">
                    <option value="全部">全部</option>
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
                <button class="btn btn-sm btn-default" @click="query_db_history()" style="margin-top: -3px;">查询</button>
            </div>
            <div class="bottom-nav-content" style="display: -webkit-box;overflow-x: auto;overflow-y: hidden;">
                <table class="table" style="width:calc(25% - 12px);height: calc(100% - 12px);border: 1px solid #ddd;margin-right: 10px;margin-top: 5px;"
                    v-for="(item,index) in facerecognitionhistory">
                    <tr>
                        <td colspan="4">
                            <img :src="(ishostname==1)?item.snappicurl:item.capturepicassetsurl" alt="" style="width:100%;height:100px;">
                        </td>
                    </tr>
                    <tr>
                        <td>姓名：</td>
                        <td v-text="item.bname=='undefined'?'未知':item.bname"></td>
                        <td>年龄：</td>
                        <td v-text="item.captureage=='undefined'?'未知':item.captureage"></td>
                    </tr>
                    <tr>
                        <td>性别：</td>
                        <td v-text="item.capturesex=='undefined'?'未知':item.capturesex"></td>
                        <td>年龄段：</td>
                        <td v-text="item.captureagegroup=='undefined'?'未知':item.captureagegroup"></td>
                    </tr>
                    <tr>
                        <td>戴眼镜：</td>
                        <td colspan="3" v-text="item.captureiswearingglasses=='undefined'?'未知':item.captureiswearingglasses"></td>
                    </tr>
                    <tr>
                        <td>抓拍时间：</td>
                        <td colspan="3" v-text="item.created_at=='undefined'?'未知':item.created_at"></td>
                    </tr>
                </table>
            </div>
        </div>
        <div id="capturepichistory" class="modal fade" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" style="text-align: center;">查询条件</h4>
                    </div>
                    <div class="modal-body">
                        <table class="table">
                            <tr>
                                <td>时间：</td>
                                <td>
                                    <input id="time" class="form-control" />
                                </td>
                            </tr>
                            <tr>
                                <td>年龄段：</td>
                                <td>
                                    <select class="form-control" v-model=condition.agegroup>
										<option value="全部">全部</option>
                                        <option value="青年">青年</option>
                                        <option value="中年">中年</option>
                                        <option value="老年">老年</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td>是否戴眼镜：</td>
                                <td>
                                    <select class="form-control" v-model=condition.glassess>
                                        <option value="全部">全部</option>
                                        <option value="是">是</option>
                                        <option value="否">否</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td>性别：</td>
                                <td>
                                    <select class="form-control" v-model=condition.sex>
                                        <option value="全部">全部</option>
                                        <option value="男">男</option>
                                        <option value="女">女</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td>摄像机：</td>
                                <td>
                                    <select class="form-control" v-model=condition.monitor>
                                        <option value="全部">全部</option>
                                        <option v-for="(item,index) in monitor_arr" :value=item.ip v-text=item.name></option>
                                    </select>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" data-dismiss="modal" @click="query_zp_history()">查询</button>
                    </div>
                </div>
            </div>
        </div>
    </div>


</body>
<script src="../js/jquery-2.2.3.js"></script>
<script src="../js/http_request.js"></script>
<script src="../js/vue.js"></script>
<script src="../js/crypt.bundle.js"></script>
<script src="../bootstrap/js/bootstrap.js"></script>
<script src="../bootstrap/js/bootstrap-treeview.js"></script>
<script src="../bootstrap/js/bootstrap-datetimepicker.js"></script>
<script src="../bootstrap/js/bootstrap-datetimepicker.zh-CN.js"></script>

<script>

    var vue = new Vue({
        el: '.main',
        data: {
            PUBLICKEY: `-----BEGIN PUBLIC KEY-----
                MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC1nIZQ1zQhFV3SLUNevsizpYLm
                FEFlIPl8+q2DzFNAhZ5yntQc5nhBTV9ryJBGmXHxdwijws4hRBVs9dcYE/QXTNel
                rthIl/9h64EFpQPPREp5/0bsAZwwI3RM8aQI47+XuLzPoLSkSmcNSj2EBaRLq7Oo
                j0fL76SYGiiHYXDH3wIDAQAB
                -----END PUBLIC KEY-----`,
            aesKey: '',
            capturepichistory: [],
            facerecognitionhistory: [],
            monitor_arr: [],
            condition: {
                sj: '',
                agegroup: '全部',
                glassess: '全部',
                sex: '女',
                monitor: '全部'
            },
            conditiondb: {
                sj: '',
                agegroup: '全部',
                glassess: '全部',
                sex: '全部'
            },
            video_src: '',
            ws: '',
            actual_capturepichistory: [],
            ishostname: ''
        },
        methods: {
            querymonitor: function (id) {
                var that = this;
                getByAjax("../rest/monitorquery/" + id, result => {
                    if (result.length > 0) {
                        var sd = "/api/v1/getchannels?channel=" + result[0].url;
                        var hostname = window.location.hostname;
                        var port = window.location.port;
                        var easynvr = window.location.protocol + "//" + hostname + ":" + port + sd;
                        $.ajax({
                            url: easynvr, type: "GET", data: {}, success: function (data) {
                                var online = data.EasyDarwin.Body.Channels[0].Online;
                                if (online == "1") {
                                    that.video_src = '/nvrurl/play.html?channel=' + result[0].url + '&iframe=yes&aspect=640x360';
                                } else if (online == "0") {
                                    alert("视频不在线");
                                }
                            }
                        });
                    }
                });
            },
            search_history: function () {
                $("#capturepichistory").modal('show');
            },
            //查询抓拍历史
            querycapturepichistory: function () {
                var that = this;
                //查询抓拍历史
                var sj = $("#time").val();
                const enc_history = CryptUtils.encrypt(
                    {
                        header: {
                            request_id: "000",
                            user_info: {
                                username: "123",
                                access_token: "001",
                                jurisdiction_sid: "123"
                            }
                        },
                        queryDate: new Date(sj),
                        queryageRange: that.condition.agegroup,
                        queryiswearingglasses: that.condition.glassess,
                        querysex: that.condition.sex,
                        querymonitor: that.condition.monitor, //传ip
                        querylimit: 20,
                        queryoffset: 0
                    },
                    that.aesKey,
                    that.PUBLICKEY
                );

                $.ajax({
                    type: "POST",
                    url: "https://community.stycloud.com/camera/v1/face/capturepichistory",
                    contentType: "application/json; charset=utf-8",
                    data: JSON.stringify(enc_history),
                    dataType: "json",
                    success: function (res) {
                        // console.log("加密响应报文:", res);
                        // 解密返回结果
                        // console.log("历史抓拍解密响应报文:", CryptUtils.decrypt(res, that.aesKey));
                        that.capturepichistory = CryptUtils.decrypt(res, that.aesKey).Content;
                    },
                    error: function (message) {
                        // 打印服务端返回的错误代码
                        console.log(message.status);
                    }
                });
            },
            //查询人脸对比历史
            queryfacerecognitionhistory: function () {
                var that = this;
                var sj = $("#date_db").val();
                const enc_face = CryptUtils.encrypt(
                    {
                        header: {
                            request_id: "000",
                            user_info: {
                                username: "123",
                                access_token: "001",
                                jurisdiction_sid: "123"
                            }
                        },
                        queryDate: new Date(sj),
                        queryageRange: that.conditiondb.agegroup,
                        queryiswearingglasses: that.conditiondb.glassess,
                        querysex: that.conditiondb.sex,
                        querylimit: 20,
                        queryoffset: 0
                    },
                    that.aesKey,
                    that.PUBLICKEY
                );

                $.ajax({
                    type: "POST",
                    url: "https://community.stycloud.com/camera/v1/face/facerecognitionhistory",
                    contentType: "application/json; charset=utf-8",
                    data: JSON.stringify(enc_face),
                    dataType: "json",
                    success: function (res) {
                        // console.log("加密响应报文:", res);
                        // 解密返回结果
                        // console.log("人脸识别历史解密响应报文:", CryptUtils.decrypt(res, that.aesKey));
                        that.facerecognitionhistory = CryptUtils.decrypt(res, that.aesKey).content;
                    },
                    error: function (message) {
                        // 打印服务端返回的错误代码
                        console.log(message.status);
                    }
                });
            },
            //选择条件 查询人脸抓拍历史
            query_zp_history: function () {
                this.querycapturepichistory();
            },
            //选择条件 查询人脸对比历史
            query_db_history: function () {
                this.queryfacerecognitionhistory();
            },
            //获取前几日的日期
            getTime_extent: function (n) {
                var now = new Date();
                var preDate = now.getTime() - (n * 24 * 60 * 60 * 1000);
                var preDay = new Date(preDate);
                var pre_year = preDay.getFullYear();
                var pre_month = preDay.getMonth() + 1;
                var pre_date = preDay.getDate();
                var pre_newMonth = (pre_month < 10) ? "0" + pre_month : pre_month;
                var pre_newDate = (pre_date < 10) ? "0" + pre_date : pre_date;
                var pre_rq = pre_year + '-' + pre_newMonth + '-' + pre_newDate;
                return pre_rq;
            }
        },
        mounted() {
            var that = this;
            // 使用npm包生成随机6-32位的字母数字字符串
            that.aesKey = CryptUtils.generate();

            //查询所有的人脸识别设备列表
            // 加密传递请求报文对象，非stringify化的字符串
            const enc = CryptUtils.encrypt(
                {
                    header: {
                        request_id: "000",
                        user_info: {
                            username: "123",
                            access_token: "001",
                            jurisdiction_sid: "123"
                        }
                    }
                },
                that.aesKey,
                that.PUBLICKEY
            );
            $.ajax({
                type: "POST",
                url: "https://community.stycloud.com/camera/v1/face/monitorlist",
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify(enc),
                dataType: "json",
                success: function (res) {
                    var monitorlist = CryptUtils.decrypt(res, that.aesKey).Content;
                    that.monitor_arr = monitorlist;

                    var tree_data = [{
                        text: '社区人脸识别设备',
                        icon: 'glyphicon glyphicon-home',
                        nodes: []
                    }];
                    for (var i = 0; i < monitorlist.length; i++) {
                        var obj = {};
                        obj.text = monitorlist[i].name;
                        obj.href = monitorlist[i].ip;
                        obj.icon = 'glyphicon glyphicon-facetime-video'
                        tree_data[0].nodes.push(obj);
                    }
                    $('#tree').treeview({
                        data: tree_data,         // data is not optional
                        levels: 5,
                        selectedBackColor: '#272727',
                        // backColor: 'green',
                        onNodeSelected: function (event, data) {
                            if(data.nodeId !=0){
								that.querymonitor(data.href);
							}
                        }
                    });
                    $('#tree').treeview('selectNode', [1, { silent: true }]);
                    if (tree_data[0].nodes.length > 0) {
                        var ip = tree_data[0].nodes[0].href;
                        that.querymonitor(ip);
                    }

                },
                error: function (message) {
                    // 打印服务端返回的错误代码
                    console.log(message.status);
                }
            });

            //人脸抓拍历史
            $("#time").val(that.getTime_extent(0));
            that.querycapturepichistory();

            //查询人脸对比历史
            $("#date_db").val(that.getTime_extent(1));
            that.queryfacerecognitionhistory();

            // 日历
            $('#date_db').datetimepicker({
                minView: "month", //选择日期后，不会再跳转去选择时分秒 
                language: 'zh-CN',
                format: 'yyyy-mm-dd',
                todayBtn: 1,
                autoclose: 1,
            });

            $('#time').datetimepicker({
                minView: "month", //选择日期后，不会再跳转去选择时分秒 
                language: 'zh-CN',
                format: 'yyyy-mm-dd',
                todayBtn: 1,
                autoclose: 1,
            });

            //websocket
            //判断内外网
            var ws_url = '';
            var hostname = window.location.hostname;
            if (hostname == '170.2.229.213') {
                that.ishostname = 1;
                ws_url = '170.2.229.221';
            } else {
                that.ishostname = 0;
                ws_url = '61.155.110.210';
            }
            var ws = new WebSocket('ws://' + ws_url + ':9026/messages');
            ws.onopen = function () {
                console.log(that.aesKey);
                // 加密传递请求报文对象，非stringify化的字符串
                const enc_websocket =
                {
                    header: {
                        request_id: "000",
                        user_info: {
                            username: "123",
                            access_token: "001",
                            jurisdiction_sid: "123"
                        }
                    },
                    content: {
                        hello: "world"
                    }
                };
                // 打印加密密文
                console.log("加密请求报文:", enc_websocket);
                ws.send(JSON.stringify(enc_websocket));
            };
            ws.onmessage = function (e) {
                // console.log('_message');
                var data1 = JSON.parse(e.data);
                // console.log(data1);
                // console.log(CryptUtils.decrypt(data1, that.aesKey));
                if (data1.content != 'websocket连接成功！'&& data1.content != undefined) {
                    that.actual_capturepichistory.unshift(data1.content);
                }
            };


            ws.onerror = function (err) {
                console.log('_error');
                console.log(err);
            };
        }
    });

</script>

</html>