let myecharts_jrsssj, myecharts_jrssll, myecharts_lssjqs, myecharts_lsllqs;
let wss;
let flv_s;
let timeSpeed = 0;
let timeIntervalSign= null;
let timeIndex = 0;
let decTimes = [1, 3, 5, 8, 10, 20];
let timeSign = null;
let option_ls = {
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ''
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ''
    },
    yAxis: {
        type: 'value'
    },
    series: '',
    color: ['#ffb980', '#fe8463', '#2EC7C9', '#B6A2DE', '#5AB1EF', '#FFB980', '#D87A80', '#97B552', '#E5CF0D', '#8D98B3']
};

let option_jr = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    legend: {
        data: ''
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            data: ['0-1(h)', '1-2(h)', '2-3(h)', '3-4(h)', '4-5(h)', '5-6(h)', '6-7(h)', '7-8(h)', '8-9(h)', '9-10(h)'
                , '10-11(h)', '11-12(h)', '12-13(h)', '13-14(h)', '14-15(h)', '15-16(h)', '16-17(h)', '17-18(h)', '18-19(h)'
                , '20-21(h)', '21-22(h)', '22-23(h)', '23-24(h)']
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: '',
    color: ['#2EC7C9', '#B6A2DE', '#5AB1EF', '#FFB980', '#D87A80', '#97B552', '#E5CF0D', '#8D98B3']
};

let vue_sjcx = new Vue({
    el: '#gcjl_s',
    data: {
        monitor_name: '',
        shows: true,
        data_table_dwll: [],
        sjzs: '0',
        sjzs_tb: '',
        sjzs_hb: '',
        jrzs: '0',
        jrzs_tb: '',
        jrzs_hb: '',
        jrll: '0',
        sjzs_sjlx_data: [],
        jrzs_sjlx_data: [],
        jrll_sjlx_data: [],
        color_arr: ['#ff0000', '#ff1000', '#ff2000', '#ff3000', '#ff4000', '#ff5000', '#ff6000', '#ff7000', '#ff8000', '#ff9000'],
        show: false,
        qh_show: true,
        count: '',
        jrll_hb: '',
        jrll_tb: '',
        time_5: '',
        arrs: [],
        ids: '',
        j5fzll:'',
        j5fzll_hb:'',
        j5fzll_tb:'',
        videoMessage:'',
    },
    methods: {
        qh_tab: function (el) {
            if (el == 1) {
                this.show = false;
            } else {
                this.show = true;
            }
        },
        detailed: function (e, item) {
            this.qh_show = e;
            if (!e) {
                timeSpeed = 0;
                timeIntervalSign= null;
                timeIndex = 0;
                this.monitor_name = item.videoname;
                this.videoMessage = '';
                // monitor_sx('20200722173828092023_1', 'my_video_1');
                // if(timeSign) clearInterval(timeSign);
                monitor_sx(item.videoid, 'my_video_1');
                // jsq_s1(item.videoid);
                this.query_jrsssj(item.videoid,item.fiveflow,item.hbfiveflow,item.tbfiveflow,item.total,item.hbtotal,item.tbtotal,item.sedan,item.coach,item.goodsvan,item.other);
            }else{
                clearTimeout(timeIntervalSign);
                timeIntervalSign = null;
                wss.close();
                if(flv_s){
                    flv_s.pause();
                    flv_s.unload();
                    flv_s.detachMediaElement();
                    flv_s.destroy();
                    flv_s = null;
                }
            }
        },
        query_jrsssj: function (id,fiveflows,hbfiveflows,tbfiveflows,totals,hbtotals,tbtotals,sedans,coachs,goodsvans,others) {
            this.ids = id;
            this.jrll_sjlx_data = [];
            vue_sjcx.jrll = totals;
            vue_sjcx.jrll_hb = hbtotals;
            vue_sjcx.jrll_tb = tbtotals;
            vue_sjcx.j5fzll = fiveflows;
            vue_sjcx.j5fzll_tb = tbfiveflows;
            vue_sjcx.j5fzll_hb = hbfiveflows;
            vue_sjcx.jrll_sjlx_data.push({sj: sedans, type: '轿车'});
            vue_sjcx.jrll_sjlx_data.push({sj: coachs, type: '中大型客车'});
            vue_sjcx.jrll_sjlx_data.push({sj: goodsvans, type: '轻中重型货车'});
            vue_sjcx.jrll_sjlx_data.push({sj: others, type: '其它车辆'});
            //今日事件
            $.ajax({
                url: "/TrafficStatistics/list/todaytraffRecords",
                dataType: "json",
                type: "GET",
                data: {
                    "starttime": getTime().kssj,
                    "endtime": getTime().jssj,
                    "videoId": id,
                },
                success: function (result) {
                    vue_sjcx.sjzs = 0;
                    vue_sjcx.sjzs_hb = '';
                    vue_sjcx.sjzs_tb = '';
                    vue_sjcx.sjzs_sjlx_data = [];
                    if (result.data.length <= 0) {
                        return;
                    }
                    vue_sjcx.sjzs = result.data[0].total;
                    vue_sjcx.sjzs_hb = result.data[0].hbtotal;
                    vue_sjcx.sjzs_tb = result.data[0].tbtotal;
                    vue_sjcx.sjzs_sjlx_data.push({sj: result.data[0].congestion, type: '交通拥堵检测'});
                    vue_sjcx.sjzs_sjlx_data.push({sj: result.data[0].illegalparking, type: '车辆异常停驶检测'});
                    vue_sjcx.sjzs_sjlx_data.push({sj: result.data[0].nomotorban, type: '行人/非机动车闯入检测'});
                    vue_sjcx.sjzs_sjlx_data.push({sj: result.data[0].notcongestion, type: '拥堵结束'});
                    vue_sjcx.sjzs_sjlx_data.push({sj: result.data[0].notslowdeive, type: '缓行结束'});
                    vue_sjcx.sjzs_sjlx_data.push({sj: result.data[0].roadworks, type: '高速公路道路施工检测'});
                    vue_sjcx.sjzs_sjlx_data.push({sj: result.data[0].severeweather, type: '恶劣天气（雨雪）检测'});
                    vue_sjcx.sjzs_sjlx_data.push({sj: result.data[0].slowdeive, type: '车辆异常缓行检测'});
                    vue_sjcx.sjzs_sjlx_data.push({sj: result.data[0].vehicleban, type: '车辆禁行报警'});
                    vue_sjcx.sjzs_sjlx_data.push({sj: result.data[0].wrongdirection, type: '倒车/逆行检测'});
                }
            });
            //本月事件
            $.ajax({
                url: "/TrafficStatistics/list/todaytraffRecords",
                dataType: "json",
                type: "GET",
                data: {
                    "starttime": new Date(new Date().getFullYear(), new Date().getMonth(), 1).Format('yyyy-MM-dd'),
                    "endtime": getTime().jssj,
                    "videoId": id,
                },
                success: function (result) {
                    vue_sjcx.jrzs = 0;
                    vue_sjcx.jrzs_hb = '';
                    vue_sjcx.jrzs_tb = '';
                    vue_sjcx.jrzs_sjlx_data = [];
                    if (result.data.length <= 0) {
                        return;
                    }
                    vue_sjcx.jrzs = result.data[0].total;
                    vue_sjcx.jrzs_hb = result.data[0].hbtotal;
                    vue_sjcx.jrzs_tb = result.data[0].tbtotal;
                    vue_sjcx.jrzs_sjlx_data.push({sj: result.data[0].congestion, type: '交通拥堵检测'});
                    vue_sjcx.jrzs_sjlx_data.push({sj: result.data[0].illegalparking, type: '车辆异常停驶检测'});
                    vue_sjcx.jrzs_sjlx_data.push({sj: result.data[0].nomotorban, type: '行人/非机动车闯入检测'});
                    vue_sjcx.jrzs_sjlx_data.push({sj: result.data[0].notcongestion, type: '拥堵结束'});
                    vue_sjcx.jrzs_sjlx_data.push({sj: result.data[0].notslowdeive, type: '缓行结束'});
                    vue_sjcx.jrzs_sjlx_data.push({sj: result.data[0].roadworks, type: '高速公路道路施工检测'});
                    vue_sjcx.jrzs_sjlx_data.push({sj: result.data[0].severeweather, type: '恶劣天气（雨雪）检测'});
                    vue_sjcx.jrzs_sjlx_data.push({sj: result.data[0].slowdeive, type: '车辆异常缓行检测'});
                    vue_sjcx.jrzs_sjlx_data.push({sj: result.data[0].vehicleban, type: '车辆禁行报警'});
                    vue_sjcx.jrzs_sjlx_data.push({sj: result.data[0].wrongdirection, type: '倒车/逆行检测'});
                }
            });
            //今日流量
            $.ajax({
                url: "/TrafficStatistics/list/todayvehiclesByVideoId",
                dataType: "json",
                type: "GET",
                data: {
                    "starttime": getTime().kssj,
                    "endtime": new Date().Format("yyyy-MM-dd hh:mm:ss"),
                    "videoId": id,
                },
                success: function (result) {
                    vue_sjcx.jrll = result.data[0].total;
                    vue_sjcx.jrll_hb = result.data[0].hbtotal;
                    vue_sjcx.jrll_tb = result.data[0].tbtotal;
                    vue_sjcx.jrll_sjlx_data=[];
                    vue_sjcx.jrll_sjlx_data.push({sj: result.data[0].sedan, type: '轿车'});
                    vue_sjcx.jrll_sjlx_data.push({sj: result.data[0].coach, type: '中大型客车'});
                    vue_sjcx.jrll_sjlx_data.push({sj: result.data[0].goodsvan, type: '轻中重型货车'});
                    vue_sjcx.jrll_sjlx_data.push({sj: result.data[0].other, type: '其它车辆'});
                }
            });
            //今日实时事件
            $.ajax({
                url: "/TrafficStatistics/list/todaytraffRecordByeveryhour",
                dataType: "json",
                type: "GET",
                data: {
                    "starttime": getTime().kssj,
                    "endtime": getTime().jssj,
                    "videoId": id,
                },
                success: function (result) {
                    let arr1 = ['交通拥堵检测', '车辆异常停驶检测', '行人/非机动车闯入检测', '拥堵结束', '缓行结束', '高速公路道路施工检测', '恶劣天气（雨雪）检测',
                        '车辆异常缓行检测', '车辆禁行报警', '倒车/逆行检测'];
                    let arr_congestion = [];
                    let arr_illegalparking = [];
                    let arr_nomotorban = [];
                    let arr_notcongestion = [];
                    let arr_notslowdeive = [];
                    let arr_roadworks = [];
                    let arr_severeweather = [];
                    let arr_slowdeive = [];
                    let arr_vehicleban = [];
                    let arr_wrongdirection = [];
                    let arrs_s = [];
                    if (result.code == 0) {
                        result.data.forEach((item, index)=> {
                            arr_congestion.push(parseInt(item.congestion));
                            arr_illegalparking.push(parseInt(item.illegalparking));
                            arr_nomotorban.push(parseInt(item.nomotorban));
                            arr_notcongestion.push(parseInt(item.notcongestion));
                            arr_notslowdeive.push(parseInt(item.notslowdeive));
                            arr_roadworks.push(parseInt(item.roadworks));
                            arr_severeweather.push(parseInt(item.severeweather));
                            arr_slowdeive.push(parseInt(item.slowdeive));
                            arr_vehicleban.push(parseInt(item.vehicleban));
                            arr_wrongdirection.push(parseInt(item.wrongdirection));
                        });
                        arrs_s = [
                            {name: '交通拥堵检测', type: 'bar', stack: '广告', data: arr_congestion},
                            {name: '车辆异常停驶检测', type: 'bar', stack: '广告', data: arr_illegalparking},
                            {name: '行人/非机动车闯入检测', type: 'bar', stack: '广告', data: arr_nomotorban},
                            {name: '拥堵结束', type: 'bar', stack: '广告', data: arr_notcongestion},
                            {name: '缓行结束', type: 'bar', stack: '广告', data: arr_notslowdeive},
                            {name: '高速公路道路施工检测', type: 'bar', stack: '广告', data: arr_roadworks},
                            {name: '恶劣天气（雨雪）检测', type: 'bar', stack: '广告', data: arr_severeweather},
                            {name: '车辆异常缓行检测', type: 'bar', stack: '广告', data: arr_slowdeive},
                            {name: '车辆禁行报警', type: 'bar', stack: '广告', data: arr_vehicleban},
                            {name: '倒车/逆行检测', type: 'bar', stack: '广告', data: arr_wrongdirection},
                        ]
                    }
                    let options = {
                        legend: {
                            data: arr1
                        },
                        series: arrs_s,
                    };
                    myecharts_jrsssj = echarts.init(document.getElementById("jrsssj"));
                    myecharts_jrsssj.setOption(option_jr);
                    myecharts_jrsssj.setOption(options);
                    window.addEventListener("resize", function () {
                        myecharts_jrsssj.resize();
                    });
                }
            });
            //今日实时流量
            $.ajax({
                url: "/TrafficStatistics/list/todayvehiclesByeveryhour",
                dataType: "json",
                type: "GET",
                data: {
                    "starttime": getTime().kssj,
                    "endtime": getTime().jssj,
                    "videoId": id,
                },
                success: function (result) {
                    let arr1 = ['轿车', '中大型客车', '轻中重型货车', '其它'];
                    let arr_sedan = [];
                    let arr_coach = [];
                    let arr_goodsvan = [];
                    let arr_other = [];
                    let arrs_s = [];
                    if (result.code == 0) {
                        result.data.forEach((item, index)=> {
                            arr_sedan.push(parseInt(item.sedan));
                            arr_coach.push(parseInt(item.coach));
                            arr_goodsvan.push(parseInt(item.goodsvan));
                            arr_other.push(parseInt(item.other));
                        });
                        arrs_s = [
                            {name: '轿车', type: 'bar', stack: '广告', data: arr_sedan},
                            {name: '中大型客车', type: 'bar', stack: '广告', data: arr_coach},
                            {name: '轻中重型货车', type: 'bar', stack: '广告', data: arr_goodsvan},
                            {name: '其它', type: 'bar', stack: '广告', data: arr_other},
                        ]
                    }
                    let options = {
                        legend: {
                            data: arr1
                        },
                        series: arrs_s,
                    };
                    myecharts_jrssll = echarts.init(document.getElementById("jrssll"));
                    myecharts_jrssll.setOption(option_jr);
                    myecharts_jrssll.setOption(options);
                    window.addEventListener("resize", function () {
                        myecharts_jrssll.resize();
                    });
                }
            });
            //历史事件趋势
            this.query_history_sj(getTime_extent(30).pre_rq, getTime().jssj_big, id);
            //历史流量趋势
            setTimeout(()=> {
                this.query_history_ll(getTime_extent(30).pre_rq, getTime().jssj_big, id);
            }, 1000);
            websocket_s(id);
        },
        //历史事件
        query_history_sj: function (kssj, jssj, id) {
            $.ajax({
                url: "/TrafficStatistics/list/historytraffRecords",
                dataType: "json",
                type: "GET",
                data: {
                    "starttime": kssj,
                    "endtime": jssj,
                    "videoId": id,
                },
                success: function (result) {
                    let arr1 = ['总量', '交通拥堵检测', '车辆异常停驶检测', '行人/非机动车闯入检测', '拥堵结束', '缓行结束', '高速公路道路施工检测', '恶劣天气（雨雪）检测',
                        '车辆异常缓行检测', '车辆禁行报警', '倒车/逆行检测'];
                    let arr_zl = [];
                    let arr_congestion = [];
                    let arr_illegalparking = [];
                    let arr_nomotorban = [];
                    let arr_notcongestion = [];
                    let arr_notslowdeive = [];
                    let arr_roadworks = [];
                    let arr_severeweather = [];
                    let arr_slowdeive = [];
                    let arr_vehicleban = [];
                    let arr_wrongdirection = [];
                    let arrs_s = [];
                    let arr_x = [];
                    if (result.code == 0) {
                        result.data.forEach((item, index)=> {
                            arr_x.push(item.recordtime);
                            arr_zl.push(parseInt(item.total == null ? '0' : item.total));
                            arr_congestion.push(parseInt(item.congestion == null ? '0' : item.congestion));
                            arr_illegalparking.push(parseInt(item.illegalparking == null ? '0' : item.illegalparking));
                            arr_nomotorban.push(parseInt(item.nomotorban == null ? '0' : item.nomotorban));
                            arr_notcongestion.push(parseInt(item.notcongestion == null ? '0' : item.notcongestion));
                            arr_notslowdeive.push(parseInt(item.notslowdeive == null ? '0' : item.notslowdeive));
                            arr_roadworks.push(parseInt(item.roadworks == null ? '0' : item.roadworks));
                            arr_severeweather.push(parseInt(item.severeweather == null ? '0' : item.severeweather));
                            arr_slowdeive.push(parseInt(item.slowdeive == null ? '0' : item.slowdeive));
                            arr_vehicleban.push(parseInt(item.vehicleban == null ? '0' : item.vehicleban));
                            arr_wrongdirection.push(parseInt(item.wrongdirection == null ? '0' : item.wrongdirection));
                        });
                        arrs_s = [
                            {name: '总量', type: 'line', stack: '广告', smooth: true, data: arr_zl},
                            {name: '交通拥堵检测', type: 'line', stack: '广告', smooth: true, data: arr_congestion},
                            {name: '车辆异常停驶检测', type: 'line', stack: '广告', smooth: true, data: arr_illegalparking},
                            {name: '行人/非机动车闯入检测', type: 'line', stack: '广告', smooth: true, data: arr_nomotorban},
                            {name: '拥堵结束', type: 'line', stack: '广告', smooth: true, data: arr_notcongestion},
                            {name: '缓行结束', type: 'line', stack: '广告', smooth: true, data: arr_notslowdeive},
                            {name: '高速公路道路施工检测', type: 'line', stack: '广告', smooth: true, data: arr_roadworks},
                            {name: '恶劣天气（雨雪）检测', type: 'line', stack: '广告', smooth: true, data: arr_severeweather},
                            {name: '车辆异常缓行检测', type: 'line', stack: '广告', smooth: true, data: arr_slowdeive},
                            {name: '车辆禁行报警', type: 'line', stack: '广告', smooth: true, data: arr_vehicleban},
                            {name: '倒车/逆行检测', type: 'line', stack: '广告', smooth: true, data: arr_wrongdirection},
                        ]
                    }
                    let options = {
                        legend: {
                            data: arr1
                        },
                        xAxis: {
                            data: arr_x
                        },
                        series: arrs_s,
                    };
                    myecharts_lssjqs = echarts.init(document.getElementById("lssjqs"));
                    myecharts_lssjqs.setOption(option_ls);
                    myecharts_lssjqs.setOption(options);
                    window.addEventListener("resize", function () {
                        myecharts_lssjqs.resize();
                    });
                }
            });
        },
        //历史流量
        query_history_ll: function (kssj, jssj, id) {
            $.ajax({
                url: "/TrafficStatistics/list/historyvehicles",
                dataType: "json",
                type: "GET",
                data: {
                    "starttime": kssj,
                    "endtime": jssj,
                    "videoId": id,
                },
                success: function (result) {
                    let arr1 = ['总量', '轿车', '中大型客车', '轻中重型货车', '其它'];
                    let arr_zl = [];
                    let arr_sedan = [];
                    let arr_coach = [];
                    let arr_goodsvan = [];
                    let arr_other = [];
                    let arrs_s = [];
                    let arr_x = [];
                    if (result.code == 0) {
                        result.data.forEach((item, index)=> {
                            arr_x.push(item.recordtime);
                            arr_zl.push(parseInt(item.total == null ? '0' : item.total));
                            arr_sedan.push(parseInt(item.sedan == null ? '0' : item.sedan));
                            arr_coach.push(parseInt(item.coach == null ? '0' : item.coach));
                            arr_goodsvan.push(parseInt(item.goodsvan == null ? '0' : item.goodsvan));
                            arr_other.push(parseInt(item.other == null ? '0' : item.other));
                        });
                        arrs_s = [
                            {name: '总量', type: 'line', stack: '广告', smooth: true, data: arr_zl},
                            {name: '轿车', type: 'line', stack: '广告', smooth: true, data: arr_sedan},
                            {name: '中大型客车', type: 'line', stack: '广告', smooth: true, data: arr_coach},
                            {name: '轻中重型货车', type: 'line', stack: '广告', smooth: true, data: arr_goodsvan},
                            {name: '其它', type: 'line', stack: '广告', smooth: true, data: arr_other},
                        ]
                    }
                    let options = {
                        legend: {
                            data: arr1
                        },
                        xAxis: {
                            data: arr_x
                        },
                        series: arrs_s,
                    };
                    myecharts_lsllqs = echarts.init(document.getElementById("lsllqs"));
                    myecharts_lsllqs.setOption(option_ls);
                    myecharts_lsllqs.setOption(options);
                    window.addEventListener("resize", function () {
                        myecharts_lsllqs.resize();
                    });
                }
            });
        },

        queryLL: function (pages, items) {
            let starttime = $("#kssj_gcjl").val().substr(0, 10);
            let endtime = $("#kssj_gcjl").val().substr(13);
            if (Date.parse(starttime) - Date.parse(endtime) != 0) {
                this.shows = false;
            } else {
                this.shows = true;
            }
            if (starttime == endtime) {
                starttime = starttime + ' 00:00:00';
                endtime = endtime + ' ' + new Date().Format("hh:mm:ss")
            } else {
                starttime = starttime + ' 00:00:00';
                endtime = endtime + ' 23:59:59';
            }
            $("#loadingModal").modal('show');
            $.ajax({
                url: "/TrafficStatistics/list/vehiclesByVideoIdAndType",
                dataType: "json",
                type: "get",
                data: {
                    pageNum: pages,
                    pageSize: 10,
                    deptid: getCookie("bjpt_deptId")=='-1'?'':getCookie("bjpt_deptId"),
                    videoname: $("#dwmc").val(),
                    starttime: starttime,
                    endtime: endtime,
                    ruletag:'',
                    videoid:null
                },
                success: function (result) {
                    $("#loadingModal").modal('hide');
                    vue_sjcx.data_table_dwll = [];
                    if (result.code == 0) {
                        let a_sum = result.count;
                        vue_sjcx.count = result.count;
                        vue_sjcx.data_table_dwll = result.data;
                        if (items) {
                            $("#fy_gcjl").bootstrapPaginator({
                                bootstrapMajorVersion: 3, //版本，这里设置为3，大于2即可
                                currentPage: 1,//当前页
                                totalPages: Math.ceil(((a_sum > 0) ? a_sum : 1) / 10),//总页数
                                numberofPages: 10,//显示的页数
                                itemTexts: function (type, page, current) { //修改显示文字
                                    switch (type) {
                                        case "first":
                                            return "首页";
                                        case "prev":
                                            return "上一页";
                                        case "next":
                                            return "下一页";
                                        case "last":
                                            return "末页";
                                        case "page":
                                            return page;
                                    }
                                }, onPageClicked: function (event, originalEvent, type, page) { //异步换页
                                    //请求加载数据
                                    vue_sjcx.queryLL(page, false);
                                }
                            });
                        }
                    }
                }
            });
        }

    },
    mounted(){
        $("#kssj_gcjl").val(getTime().jssj_big + ' - ' + getTime().jssj_big);
        $("#kssj_gcjl1").val(getTime_extent(30).pre_rq + ' - ' + getTime().jssj_big);
        $("#kssj_gcjl2").val(getTime_extent(30).pre_rq + ' - ' + getTime().jssj_big);
        this.queryLL(1, true);
        sjcx();
    }
});

//查询监控对应的属性(访问Python里面默认的库存放的值)
function monitor_sx(video_id, div_id) {
    $.ajax({
        url: "/getflv/" + video_id,
        dataType: "text",
        type: "GET",
        data: {},
        success: function (result) {
            if(result!=""){
                stop();
                monitor_bf_cs(result.replace("0.0.0.0","33.50.1.21"), div_id);
            }
        },
    });
}

//监控播放
function monitor_bf_cs(http_rest, div_id) {
    if (flvjs.isSupported()) {
        let videoElement = document.getElementById(div_id);
        let flvPlayer = flvjs.createPlayer(
            { type: 'flv', url: http_rest, isLive: true, duration: 0 },
            {
                isLive: true, enableStashBuffer: false, lazyLoad: false,
                lazyLoadMaxDuration: 0,
                lazyLoadRecoverDuration: 0,
                deferLoadAfterSourceOpen: false,
                fixAudioTimestampGap: false,
            },
        );
        if(flv_s) {
            flv_s.pause();
            flv_s.unload();
            flv_s.detachMediaElement();
            flv_s.destroy();
            flv_s = null;
        }
        flv_s = flvPlayer;
        flvPlayer.on(flvjs.Events.STATISTICS_INFO, function(message) {
            emitMessage(message,http_rest,div_id);
        });
        // flvPlayer.on(flvjs.Events.ERROR, e => {
        //     flvPlayer.unload();
        //     flvPlayer.load();
        //     flvPlayer.play();
        //     console.log(e);
        // });
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
        flvPlayer.play();

        // if(timeSign) clearInterval(timeSign);
        // timeSign = null;
        // timeSign = setInterval(() => {
        //     if (!flv_s.buffered.length) {
        //         return;
        //     }
        //     let end = flv_s.buffered.end(0);
        //     let diff = end - flv_s.currentTime;
        //     if (diff >= 1.5) {
        //         flv_s.currentTime = end - 0.1;
        //     }
        // }, 5 * 1000);
    }
}
function emitMessage(message,http_rest,div_id) {
    const { decodedFrames, speed } = message;
    timeSpeed = speed;
    if(timeSpeed === 0) {
        if(timeIntervalSign) return;
        timeInterval(http_rest,div_id);
    } else {
        if(timeIntervalSign) {
            clearTimeout(timeIntervalSign);
            timeIntervalSign = null;
        }
        timeIndex = 0;
        vue_sjcx.videoMessage = '';
    }
}
function timeInterval(http_rest,div_id) {
    if(!decTimes[timeIndex]) {
        console.log('长时间未连接！已关闭！');
        vue_sjcx.videoMessage = '长时间未连接！已关闭！';
        clearTimeout(timeIntervalSign);
        timeIntervalSign = null;
        timeIndex = 0;
        stop();
        return;
    }
    console.log(`视频播放异常，${decTimes[timeIndex]}秒后重连！`);
    vue_sjcx.videoMessage = `视频播放异常，${decTimes[timeIndex]}秒后重连...`;
    timeIntervalSign = setTimeout(() => {
        monitor_bf_cs(http_rest,div_id);
        timeIntervalSign = null;
        clearTimeout(timeIntervalSign);
        // timeInterval(http_rest,div_id);
    }, decTimes[timeIndex++] * 1000);
}

function stop() {
    if(flv_s) {
        flv_s.pause();
        flv_s.unload();
        flv_s.detachMediaElement();
        flv_s.destroy();
        flv_s = null;
        // if(timeSign) clearInterval(timeSign);
        // timeSign = null;
    }
}

function sjcx() {
    setTimeout(()=> {
        vue_sjcx.time_5 = new Date(new Date().getTime() - 1000 * 60 * 5).Format("hh:mm") + ' - ' + new Date().Format("hh:mm");
        sjcx();
    }, 2000);
}

laydate.render({
    elem: '#kssj_gcjl'
    , theme: '#368ff3'
    , range: true
    , min: -30
    , max: 0
});

laydate.render({
    elem: '#kssj_gcjl1'
    , theme: '#368ff3'
    , range: true
    , min: -30
    , max: 0
    , done: function (value, date, endDate) {
        let starttime = value.substr(0, 10);
        let endtime = value.substr(13);
        vue_sjcx.query_history_sj(starttime, endtime, vue_sjcx.ids);
    }
});

laydate.render({
    elem: '#kssj_gcjl2'
    , theme: '#368ff3'
    , range: true
    , min: -30
    , max: 0
    , done: function (value, date, endDate) {
        let starttime = value.substr(0, 10);
        let endtime = value.substr(13);
        vue_sjcx.query_history_ll(starttime, endtime, vue_sjcx.ids);
    }
});
function websocket_s(d) {
    let web_ip = "ws:/127.0.0.1:8089/websocket/" + d;
    wss = new WebSocket(web_ip);
    wss.onopen = function () {
        console.log("连接成功");
        // var from = {"serialNo": "xxx", "idNo": "xxx"};
        wss.send("videoid");//发送参数
    };
    wss.onmessage = function (evt) {
        // console.log(evt)
        if(evt.data !='videoid'){
            var data = JSON.parse(evt.data);
            vue_sjcx.j5fzll = data[0].FIVEFLOW;
            vue_sjcx.j5fzll_tb = data[0].TBFIVEFLOW;
            vue_sjcx.j5fzll_hb = data[0].HBFIVEFLOW;
        }
    };
}