shangshang
/
jili2


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716
							<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>安全警报管理模块可视化数据</title>
    <link rel="stylesheet" href="/static/bootstrap-3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/hplus/css/style.css?v=4.1.0">
    <script src="/static/jquery-1.11.3.min.js"></script>
    <script src="/static/layer3.2.0/layer.js"></script>
    <script src="/static/elementui2.15.5/vue-2.6.14.js"></script>
    <script src="/static/elementui2.15.5/datav.map.vue.js"></script>
    <script src="/static/echarts.js"></script>
    <script src="/static/hplus/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
    <style>
        body{
            position: relative;
            width: 1920px;
            height: 1080px;
            background-image: url("/admin/img/security/bg.jpg");
            background-repeat:repeat;
            background-size:100% 100%;
            -moz-background-size:100% 100%;
            margin: 0 auto;
            /*border: 1px solid red;*/
        }
        .col-xs-3{
            padding-right: 5px;
            padding-left: 5px;
        }
        .line1 {
            overflow: hidden;
            text-overflow: ellipsis;
            display: box;
            display: -webkit-box;
            line-clamp: 1;
            box-orient: vertical;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            word-break: break-all;
        }
        .line2 {
            overflow: hidden;
            text-overflow: ellipsis;
            display: box;
            display: -webkit-box;
            line-clamp: 2;
            box-orient: vertical;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            word-break: break-all;
        }
        .nnav-header{
            width: 100%;
            height: 130px;
            position: relative;
            text-align: center;
            color: #ffffff;
        }
        .nnav-header .nav-bg{
            width: 1143px;
            height: 64px;
            margin-top: 38px;
        }
        .nnav-header .nav-title{
            position: absolute;
            z-index: 10;
            top: 20px;
            left: 0;
            width: 100%;
            height: 50px;
            font-size: 38px;
            text-align: center;
        }
        .nnav-header .nav-desc{
            position: absolute;
            z-index: 10;
            top: 80px;
            left: 0;
            width: 100%;
            height: 40px;
            font-size: 19px;
            text-align: center;
        }

        .main{
            /*border: 1px solid #ffffff;*/
            overflow: hidden;
            overflow-y: auto;
        }
        .main1{
            position: absolute;
            z-index: 10;
            width: 1230px;
            top: 120px;
            left: 20px;
            bottom: 0;
            padding-bottom: 15px;
        }

        .main2{
            position: absolute;
            z-index: 10;
            width: 625px;
            height: 320px;
            top: 120px;
            left: 1270px;
        }
        .main3{
            position: absolute;
            z-index: 10;
            width: 625px;
            height: 320px;
            top: 440px;
            left: 1270px;
        }
        .main4{
            position: absolute;
            z-index: 10;
            width: 625px;
            height: 320px;
            top: 760px;
            left: 1270px;
        }

        .addrbox{
            width: 100%;
            height: auto;
            background-repeat:repeat;
            background-size:100% 100%;
            -moz-background-size:100% 100%;
            padding: 15px 25px;
        }
        .addrbox.cur1{
            background-image: url("/admin/img/security/lsit.png");
        }
        .addrbox.cur2{
            background-image: url("/admin/img/security/lsit2.png");
        }
        .addrbox .addrbox-top,.addrbox .addrbox-desc{
            width: 100%;
            line-height: 34px;
            color: #88B1D0;
        }
        .addrbox .addrbox-title{
            width: 100%;
            height: 80px;
            line-height: 40px;
            color: #E6EEEA;
            font-size: 26px;
            /*margin-top: 10px;*/
            vertical-align: middle;
        }
        .addrbox .addrbox-title table{
            width: 100%;
        }
        .addrbox .addrbox-title td{
            height: 80px;
            text-align: center;
        }
        .status-color1{
            color: #00FF95;
        }
        .status-color2{
            color: #FF3455;
        }
        .status-color3{
            color: #FFCC00;
        }
        .status-color4{
            color: #00FCFF;
        }
        .status-color5{
            color: #00C0FF;
        }
        .status-color6{
            color: #FD7D44;
        }
        .header{
            position: relative;
            color: #FFFFFF;
            font-size: 18px;
            font-weight: bold;
            line-height: 40px;
            padding-left: 8px;
            margin-bottom: 10px;
        }
        .header .header-bg{
            display: block;
            width: 299px;
            height: 33px;
            position: absolute;
            left: 7px;
            top: 20px;
        }
        .hzbox{
            position: relative;
            width: 100%;
            height: 100%;
        }
        .hzbox .hzbg{
            width: 422px;
            height: 100%;
        }
        .hzbox .hzbox-count{
            position: absolute;
            z-index: 10;
            width: 100%;
            line-height: 40px;
            height: 40px;
            top: 30px;
            left: 0;
            text-align: center;
            color: #F5AB3D;
            font-size: 45px;
            font-weight: bold;
        }
        .hzbox .hzbox-year{
            position: absolute;
            z-index: 10;
            width: 100%;
            line-height: 30px;
            height: 30px;
            bottom: 0px;
            left: 0;
            text-align: center;
            color: #FFFFFF;
            font-size: 14px;
        }
        .echartbox{
            width: 100%;
            height: 260px;
        }
        .tablebox{
            width: 100%;
            height: 260px;
            color: #88B1D0!important;
        }
        .tbmask{
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.6);
            position: absolute;
            top: 0;
            left: 0;
            z-index: 98;
        }
        .tcbox{
            width: 1762px;
            height: 942px;
            position: absolute;
            top: 77px;
            left: 84px;
            z-index: 100;
        }
        .tcbox.tbbg{
            z-index: 99;
            background-image: url("/admin/img/security/tcbg.png");
            background-repeat:no-repeat;
            background-size:100% 100%;
            -moz-background-size:100% 100%;
        }
        .jbbox{
            position: relative;
            width: 100%;
            height: 100%;
        }
        .jbbox .jbbox-body{
            width: 100%;
            height: 100%;
            padding-left: 1108px;
            padding-right: 150px;
            padding-top: 342px;
            color: #ffffff;
        }
        .jbbox .jbbox-body h3{
            font-size: 46px;
            font-weight: bold;
            margin-bottom: 20px;
        }
        .jbbox .jbbox-body .jbbox-body-desc{
            font-size: 28px;
            line-height: 44px;
        }
        .jbbox .jbboximg1{
            display: block;
            position: absolute;
            width: 840px;
            height: 720px;
            border-radius: 40px;
            z-index: 10;
            top: 114px;
            left: 83px;
        }
        .jbbox .jbboximg2{
            display: block;
            position: absolute;
            width: 390px;
            height: 147px;
            z-index: 11;
            top: 252px;
            left: 784px;
        }
        .jbbox .jbbox-btn{
            width: 100%;
            height: 64px;
            line-height: 64px;
            font-size: 41px;
            font-weight: bold;
            background-color: #00FFCC;
            border-radius: 10px;
            cursor: pointer;
            text-align: center;
            margin-top: 20px;
        }

        ::-webkit-scrollbar-track {
            background-color: transparent!important;
        }

        ::-webkit-scrollbar {
            width: 6px;
            background-color: transparent!important;
        }

        ::-webkit-scrollbar-thumb {
             background-color: transparent!important;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="nnav-header">
        <img class="nav-bg" src="/admin/img/security/nav-title.png" alt="">
        <div class="nav-title">安全警报管理模块可视化数据</div>
        <div class="nav-desc">Visualization data of grid management module</div>
    </div>

    <div class="main main1">

        <div class="row">
            <div class="col-xs-12">
                <div class="header">
                    设备布防网格化管理
                    <img class="header-bg" src="/admin/img/security/titbg.png" alt="">
                </div>
            </div>

            <div class="col-xs-3" v-for="(item,index) in addrs" :key="index">
                <div v-if="item.class == 'status-color6'" class="addrbox cur2">
                    <div class="addrbox-top">
                        运行状态：<span v-if="item.fault == 0" class="status-color1">正常</span><span v-if="item.fault == 1" class="status-color2">故障</span>
                        <span class="pull-right">报警次数：<span :class="item.class">{{item.count}}</span></span>
                    </div>
                    <div class="addrbox-title line2 text-center">
                        <table>
                            <tr>
                                <td>{{item.title}}</td>
                            </tr>
                        </table>
                    </div>
                    <div class="addrbox-desc text-center">
                        设备编号：{{item.sn}}
                    </div>
                </div>
                <div v-if="item.class != 'status-color6'" class="addrbox cur1">
                    <div class="addrbox-top">
                        运行状态：<span v-if="item.fault == 0" class="status-color1">正常</span><span v-if="item.fault == 1" class="status-color2">故障</span>
                        <span class="pull-right">报警次数：<span :class="item.class">{{item.count}}</span></span>
                    </div>
                    <div class="addrbox-title line2 text-center">
                        <table>
                            <tr>
                                <td>{{item.title}}</td>
                            </tr>
                        </table>
                    </div>
                    <div class="addrbox-desc text-center">
                        设备编号：{{item.sn}}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="main main2 text-center">
        <div class="hzbox">
            <img class="hzbg" src="/admin/img/security/hzbg.png" alt="">
            <div class="hzbox-count">{{yearCount}}</div>
            <div class="hzbox-year">{{year}}年度汇总</div>
        </div>
    </div>

    <div class="main main3">
        <div class="header">
            月度报警回馈效率概览
            <img class="header-bg" src="/admin/img/security/titbg.png" alt="">
        </div>
        <div class="echartbox" id="echartdata"></div>
    </div>

    <div class="main main4">
        <div class="header">
            报警记录
            <img class="header-bg" src="/admin/img/security/titbg.png" alt="">
        </div>
        <div class="tablebox">
            <dv-scroll-board :config="tableData" style="width:100%;height:100%;" />
        </div>
    </div>

    <div class="tbmask" style="display: none;"></div>
    <div class="tcbox tbbg" style="display: none;"></div>
    <div class="tcbox" style="display: none;">
        <div class="jbbox">
            <img class="jbboximg1" id="jb-img" src="/admin/img/security/zwt.png" alt="">
            <img class="jbboximg2" src="/admin/img/security/zxbj.png" alt="">
            <div class="jbbox-body">
                <h3 id="jb-title"></h3>
                <div class="jbbox-body-desc">设备编号：<span id="jb-sn"></span></div>
                <div class="jbbox-body-desc">
                    运行状态：
                    <span class="status-color1" id="jb-fault" style="display: none">正常</span>
                    <span class="status-color2" id="jb-fault1" style="display: none">故障</span>
                </div>
                <div class="jbbox-body-desc">报警次数：<span id="jb-count"></span></div>
                <div class="jbbox-body-desc">报警时间：<span id="jb-time"></span></div>

                <div class="jbbox-btn" onclick="getCfData()">撤 防</div>
            </div>
        </div>
    </div>
</div>
<audio id="dingdantixing" src="/static/security.mp3" controls="controls" loop style="display: none;"></audio>

    <script>
        var audio = document.getElementById('dingdantixing');
        var text = document.title;
        var timer;
        var id = 0;
        var app;
        var timer2;
        var opacity = 1;
        var open = 0;

        $(window).resize(function(){
            location.reload()
        });

        $(function () {
            loadingTitle();
            changeZoom();
            // showOpen();

            app = new Vue({
                el: '#app',
                data: function() {
                    return {
                        tableData: null,
                        addrs: [],
                        year: '',
                        yearCount: 0,
                    }
                },
                created(){
                    this.getData();
                    setInterval(function () {
                        this.getData();
                    },60000);
                },
                methods: {
                    getData() {
                        var url = '{:url("screen")}';
                        let that = this;
                        $.post(url, {}, function (res) {
                            if (res.code == 1) {
                                that.tableData = null;
                                that.addrs = [];
                                that.$nextTick(() => {
                                    that.tableData = {
                                        header: ['报警地点', '报警时间', '撤防时间', '撤防人员'],
                                        data: res.data.records,
                                        rowNum: 5,
                                        align: ['center', 'center', 'center', 'center'],
                                        headerBGC: 'rgba(6, 29, 78, 0.5)',
                                        oddRowBGC: 'rgba(34, 54, 97, 0.5)',
                                        evenRowBGC: 'rgba(6, 29, 78, 0.5)',
                                    };
                                    that.addrs = res.data.addrs;
                                    that.year = res.data.year;
                                    that.yearCount = res.data.year_count;
                                    that.initEcharts(res.data.x,res.data.y,res.data.y2);
                                    console.log('ssdsdsdsd',that.addrs)
                                });
                            }
                        });
                    },
                    initEcharts(x,y,y2){
                        let option = {
                            color: ['#FEC006','#20A3F7'],
                            legend: {
                                right:'5',
                                data:['平均撤防时长','报警总数'],
                                textStyle:{
                                    color:'#fff',
                                    fontSize: 12,
                                },
                            },
                            dataZoom: {
                                show: false,
                                // start: 0,
                                // end: 100
                            },
                            xAxis: [
                                {
                                    axisLabel: {
                                        show: true,
                                        textStyle: {
                                            color: '#fff'
                                        },
                                        rotate:30
                                    },
                                    axisLine: {
                                        lineStyle: {
                                            color: '#7D9AFB',//左边线的颜色
                                            width:'3'//坐标线的宽度
                                        }
                                    },
                                    type: 'category',
                                    boundaryGap: true,
                                    data: x,
                                },
                                {
                                    type: 'category',
                                    boundaryGap: true,
                                    data: []
                                }
                            ],
                            yAxis: [
                                {
                                    splitLine:{
                                        show:false,     //去掉网格线
                                    },
                                    //  去掉背景的网格线
                                    axisLabel: {
                                        show: true,
                                        textStyle: {
                                            color:'#ffffff'  //这里用参数代替了
                                        }
                                    },
                                    axisLine:{
                                        lineStyle:{
                                            color:'#FFFFFF',
                                            width:1,//这里是为了突出显示加上的
                                        }
                                    }
                                },
                                {
                                    type: 'value',
                                    name:'分钟',
                                    scale: true,
                                    //  去掉背景的网格线
                                    axisLabel: {
                                        show: true,
                                        textStyle: {
                                            color:'#ffffff'  //这里用参数代替了
                                        }
                                    },
                                    axisLine:{
                                        lineStyle:{
                                            color:'#FFFFFF',
                                            width:1,//这里是为了突出显示加上的
                                        }
                                    }
                                },
                                {
                                    type: 'value',
                                    scale: true,
                                    main:0,
                                    // name:'分钟',
                                    // boundaryGap: [0.2, 0.2],
                                    axisLabel: {
                                        textStyle: {
                                            color: '#fff'
                                        },
                                    },
                                },

                            ],
                            series: [
                                {
                                    name: '平均撤防时长',
                                    type: 'line',
                                    data: y,
                                    barWidth :20,
                                },
                                {
                                    name: '报警总数',
                                    type: 'bar',
                                    xAxisIndex: 1,
                                    yAxisIndex: 1,
                                    data: y2,
                                    barWidth :20,
                                }
                            ]
                        };

                        var myChart = echarts.init(document.getElementById('echartdata'));
                        myChart.setOption(option);
                    }
                }
            });


            setInterval(function () {
                getBjData();
            },2000);
        });

        function changeZoom() {
            var wb = $(window).width()/1920;
            var hb = $(window).height()/1080;
            if(wb >= hb){
                $('body').css({
                    'zoom': hb,
                });
            }else{
                $('body').css({
                    'zoom': wb,
                });
            }
        }

        function showOpen() {
            open = 1;
            opacity = 1;
            $('.tbbg').css('opacity',opacity);
            clearInterval(timer2);

            $('.tbmask').show();
            $('.tcbox').show();
            audio.play();


            timer2 = setInterval(function () {
                if(opacity <= 0){
                    opacity = 1;
                }else{
                    opacity = opacity - 0.05;
                }
                $('.tbbg').css('opacity',opacity);
            },60)
        }

        function showClose() {
            open = 0;
            $('.tbmask').hide();
            $('.tcbox').hide();
            audio.pause();
            clearInterval(timer2);
        }

        function loadingTitle() {
            clearTimeout(timer);
            document.title = text.substring(1,text.length) + text.substring(0,1);
            text = document.title.substring(0,text.length);
            timer = setTimeout("loadingTitle()", 500)
        }

        // 获取警报数据
        function getBjData(){
            var url = '{:url("bj")}';
            $.post(url,{id:id},function (res) {
                if(res.code == 1) {
                    if(open == 0){
                        showOpen();
                        id = res.data.id;
                        if(res.data.img){
                            $('#jb-img').attr('src',res.data.img);
                        }else{
                            $('#jb-img').attr('src','/admin/img/security/zwt.png');
                        }
                        if(res.data.fault == 0){
                            $('#jb-fault').show();
                            $('#jb-fault1').hide();
                        }else{
                            $('#jb-fault').hide();
                            $('#jb-fault1').show();
                        }
                        $('#jb-title').html(res.data.title);
                        $('#jb-sn').html(res.data.sn);
                        $('#jb-count').html(res.data.count);
                        $('#jb-time').html(res.data.alarm_time);
                    }
                }else{
                    showClose();
                }
            });
        }

        // 撤防
        function getCfData(){
            var url = '{:url("cf")}';
            $.post(url,{id:id},function (res) {
                if(res.code == 1) {
                    showClose();
                    getBjData();
                    app.getData();
                }
            });
        }
    </script>

</body>
</html>