zhouzhendong
/
baoshi-was


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212
							<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="{{asset('icon/faviconc.ico')}}" type="image/x-icon"/>
    <title>通知栏</title>
    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link href="{{ mix('css/app.css') }}" rel="stylesheet">
    <style>
        html{
            height: 100%;
            width: 100%;
        }
        body{
            width: 100%;
            margin : 0 auto;
        }
        .b-container{
            background: RGB(245,250,245) !important;
        }
        li{
            cursor: pointer;
        }
        ul{
            max-height: 100%;
            max-width: 100%;
            overflow: auto;
            border: RGB(204, 204, 204) solid 1px;
            border-radius: 5px;
        }
        #msg{
            width:266px;
            position: fixed;
            z-index:999;
            top: 49%;
            margin-top:-80px;
            left:50%;
            margin-left:-133px;
            background:#fff;
            box-shadow:5px 5px 8px #999;
            font-size:17px;
            color:#666;
            border:1px solid #f8f8f8;
            text-align: center;
            line-height: 2rem;
            display:inline-block;
            padding-bottom:20px;
            border-radius:5px;
        }
        #msg_top {
            background: #f8f8f8;
            padding: 5px 15px 5px 20px;
            text-align: left;
        }
        #msg_top span{
            font-size:22px;
            float:right;
            cursor:pointer;
        }
        #msg_cont{
            padding:15px 20px 20px;
            text-align:left;
        }
        #msg_clear{
            background:#8fc31f;
            float:right;
        }
        #msg_success{
            background:#2a9055;
            float:right;
        }
        .msg_btn{
            display:inline-block;
            color:#fff;
            padding:1px 15px;
            border-radius:2px;
            margin-right:15px;
            cursor:pointer;
        }
    </style>
</head>
<body class="h-100">
    <div id="notification" class="w-100 h-100 b-container p-0 card">
        <div class="card-header">
            <label class="h3 text-center w-100">
                <b style="font-family:STHupo">@{{ count }}</b>
                <label class="text-secondary" style="font-family:STZhongsong">条未处理通知</label>
            </label>
        </div>
        <div class="card-body p-0">
            <ul class="list-group" id="scroll-list">
                <li class="list-group-item mt-3" v-for="info in infos" @click="toTarget(info)">
                    <div class="row">
                        <div class="col-7 row">
                            <div class="col-3 pr-0 h5" v-if="info.delivered=='0'"><span class="badge badge-secondary">New</span></div>
                            <div v-else class="col-1"></div>
                            <div class="text-left text-overflow-replace font-weight-bold col-8 p-0">@{{ info.title }}</div>
                        </div>
                        <div class="text-right text-secondary col-5">@{{ info.created_at }}</div>
                    </div>
                    <div class="offset-2 mt-2 text-muted" v-html="info.message">
                    </div>
                </li>
            </ul>
        </div>
    </div>
</body>
<script src="{{ mix('js/app.js') }}"></script>
<script type="text/javascript">
        var audioPlay = false;
        //重绘弹窗样式
        function alert(e){
            $("body").append('<div id="msg"><div id="msg_top">设置<span class="msg_close">×</span></div><div id="msg_cont">'+e+
                '</div><div class="msg_close msg_btn" id="msg_clear">取消</div><div class="msg_close msg_btn" id="msg_success">确定</div></div>');
            $("#msg_clear").click(function (){
                $("#msg").remove();
            });
            $("#msg_success").click(function (){
                audioPlay = true;
                $("#msg").remove();
            });
        }
        alert("是否开启音频?");
        new Vue({
            el:"#notification",
            data:{
                infos:{!! $infos !!},
                loadSign:false,
                count: {!! $count !!},
                page:2,
                mark:{
                    "0" : "/storage/audio.mp3",
                }
            },
            mounted(){
                if(this.infos.length===15)this.bindListen();
                $(document.body).append($('<audio id="audio" src="" autoplay></audio>'));
                if (Notification.permission!=='granted')Notification.requestPermission();
                this.initBroadcast();
            },
            methods: {
                bindListen(){
                    $("#scroll-list").scroll(()=>{
                        let element = $("#scroll-list");
                        let scrollTop = element.scrollTop();
                        let scrollHeight = element[0].scrollHeight;
                        let height = element.height();
                        if(scrollTop + height > scrollHeight-50){
                            this.loadData();
                        }
                    });
                },
                initBroadcast() {
                    initEcho();
                    Echo.private('App.User.' + "{{\Illuminate\Support\Facades\Auth::id()}}")
                        .notification((notification) => {
                            this.count++;
                            this.infos.unshift(notification);
                            if (notification.mark==0)this._handleWorkOrder(notification);
                        });
                },
                _handleWorkOrder(notification){
                    this.playAudio(notification.mark);
                    if(window.Notification ) {
                        Notification.requestPermission(function(status) {
                            let notify = new Notification('通知面板', { body: '有新工单',icon:"{{asset('icon/faviconc.ico')}}" });
                            notify.onclick=function(){
                                //如果通知消息被点击,通知窗口将被激活
                                window.focus();
                                notify.close();
                                //打开对应的界面
                                window.open('{{url('')}}'+'/'+notification.link);
                            };
                        });
                    }
                },
                playAudio(mark){
                    if (!audioPlay)return;
                    let audio = document.getElementById('audio');
                    audio.src = this.mark[mark];
                    setTimeout(()=>{
                        audio.play();
                    },0);
                },
                toTarget(info = null){
                    if (info.delivered==='0'){
                        window.tempTip.postBasicRequest("{{url('notification/toTarget')}}",
                            {id:info.no ? info.no : info.id},res=>{
                                info.delivered = '1';
                                this.count--;
                            })
                    }
                    window.open('{{url('')}}'+'/'+info.link);
                },
                loadData(){
                    if (this.loadSign)return;
                    this.loadSign = true;
                    let last = this.infos[this.infos.length-1];
                    window.tempTip.postBasicRequest("{{url('notification/regular')}}",
                        {id:last.no ? last.no : last.id,page:this.page},res=>{
                            this.loadSign = false;
                            this.page++;
                            if (res)this.infos.push.apply(this.infos,res);
                            if (!res || res.length<15)$("#scroll-list").unbind("scroll");
                        })
                }
            }
        });
</script>
</html>