yuansh
/
FBS_VIEW


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182
							<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=0.5">
    <title>云看板</title>
    <link href="/lib/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="/css/dashboard.css" rel="stylesheet" />
    <script type="text/javascript" src="/js/service.js"></script>
    <script type="text/javascript" src="/js/session.js"></script>
    <script type="text/javascript" src="/js/getService.js"></script>
    <script type="text/javascript" src="/lib/jquery-3.4.1.js"></script>
    <script type="text/javascript" src="/lib/jquery-3.4.1.min.js"></script>

</head>

<body id="container" class="container-fluid">
    <style>
        body{    
            overflow-y: hidden;
            overflow-x: hidden;
        }
    </style>
     <!-- <div class="row no-padding head-bar" style="height:81px"> -->
        <!-- <div class="col-lg-1 col-md-1">

        </div> 
         <div class="col-lg-4 col-md-4 page-title">
            云看板
        </div>  -->
        <!-- <div class="col-lg-3 col-md-3 block-padding">
            <button type="button" class="btn btn-warning"
                onclick="window.location.replace('/pages/dashboard/warehouse.html');">仓库看板</button>
            <button type="button" class="btn btn-warning"
                onclick="window.location.replace('/pages/dashboard/produce.html');">制造看板</button>
            <button type="button" class="btn btn-warning"
                onclick="window.location.replace('/pages/dashboard/line.html');">产线看板</button>
            <button type="button" class="btn btn-warning"
                onclick="window.location.replace('/pages/dashboard/quality.html');">品质看板</button>
        </div> -->
        <!-- <div class="col-lg-4 col-md-4">
        </div>-->
    <!-- </div>  -->
    <div class="my-container" id="div-main">
        
        <div id="two">
            <div style="width: 49%;height: 100%;float:left;margin-left: -20px;margin-right: 10px;">
                <video autoplay="true" loop="true" muted="muted" id="twoVideo" class="videoType" :src="'/upVedio/ABB/'+firstFile"  controls width="100%" height="100%" > </video> 
                <img id="twoImg" class="imgType" :src="'/upVedio/ABB/'+firstFile" width="100%" />
            </div>
            <div style="width: 50%;height: 100%;float:left;" v-for="task in taskList">
                <video autoplay="true" loop="true" muted="muted" id="twoVideo2"  v-if="!task.isImg" class="videoType" :src="'/upVedio/ABB/'+task.fileName"  controls width="100%" height="100%" > </video> 
                <img v-if="task.isImg" class="imgType" :src="'/upVedio/ABB/'+task.fileName" width="106%" /> 
            </div>
        </div>
        <div class="row" v-for="task in taskList" id="one" style="margin-left: -25px"> 
            <video autoplay="true" loop="true" muted="muted" v-if="!task.isImg" id="oneVideo"  class="videoType" :src="'/upVedio/AAA/'+task.fileName"  controls width="100%" height="100%" > </video> 
            <img v-if="task.isImg" class="imgType" :src="'/upVedio/AAA/'+task.fileName" width="101%" />
       </div>  
        <!-- <div class="row" v-for="task in taskList" id="one" style="margin-left: -25px"> 
            <img v-if="task.isImg" class="imgType" :src="'/upVedio/AAA/'+task.fileName" width="101%" />
            <video  width="100%" height="100%"  autoplay="true" loop="true" v-if="!task.isImg" id="oneVideo"  controls="controls"  class="videoType">
                <source type="video/mp4" :src="'/upVedio/AAA/'+task.fileName" /> 
            </video>    
        </div>  -->
    </div>

    <!-- jQuery  -->
    <script src="/lib/jquery.min.js"></script>
    <script src="/lib/vue.min.js"></script>
    <script src="/lib/echarts/echarts.min.js"></script>
    <script src="/lib/echarts/theme/macarons.js"></script>
    <script src="/js/service/produce-task.js"></script>
    <script type="text/javascript">
        // $(".videoType").height($(window).height()-85);
        // $(".imgType").height($(window).height()-85);
        $(".videoType").height($(window).height());
        $(".imgType").height($(window).height());
        var vm = new Vue({
                    el: '#div-main',
                    data: {
                        listInit: ServiceProduceTask.getVedioFileList(),
                        taskList: [],
                        timer: '',
                        pageSize: 1,
                        pageIndex: 0,
                        timer: '',
                        upVideo:'',
                        firstFile:''
                    },
                    methods: {
                        get() {
                            this.upVideo = this.listInit[0].upVideo;
                            
                            this.firstFile = this.listInit[0].fileName;
                            if(this.listInit[0].isImg){
                                $("#twoVideo").hide();
                            }else{
                                $("#twoImg").hide();
                            }
                            if(this.upVideo == 'AAA'){
                               $("#two").hide();
                            }else{
                               $("#one").hide();
                               this.listInit.splice(0, 1);
                            }
                            
                        },
                        get2(){
                            this.taskList = this.listInit.slice(this.pageIndex,this.pageSize);
                            if(this.pageSize >= this.listInit.length){
                                this.pageIndex = 0;
                                this.pageSize = 1;
                            }else{
                                this.pageIndex = this.pageIndex + 1;
                                this.pageSize = this.pageSize + 1;
                            }
                            // this.getVideo();
                        },
                        getVideo(){
                            var _video1 = $('#twoVideo')[0];
                            var _video2 = $('#twoVideo2')[0];
                            var _video3 = $('#oneVideo')[0];
                            
                            if($('#twoVideo').is(':hidden') && _video1.paused){
                            }else{
                                _video1.play();
                            }
                            if($('#twoVideo2').is(':hidden') && _video2.paused){
                            }else{
                                _video1.play();
                            }
                            if($('#oneVideo').is(':hidden') && _video3.paused){
                            }else{
                                _video1.play();
                            }
                           
                        }
                    },
                    mounted() {
                        this.get();
                        this.get2();
                        this.timer = setInterval(this.get2, 7000);

                    },
                    beforeDestroy() {
                        clearInterval(this.timer);
                    }
                })

        
        // function getVideo(){
        //     var _video1 = $('#twoVideo')[0];
        //     var _video2 = $('#twoVideo2')[0];
        //     var _video3 = $('#oneVideo')[0];
            
        //     if($('#twoVideo').is(':hidden') && _video1.paused){
        //     }else{
        //         _video1.play();
        //     }
        //     if($('#twoVideo2').is(':hidden') && _video2.paused){
        //     }else{
        //         _video1.play();
        //     }
        //     if($('#oneVideo').is(':hidden') && _video3.paused){
        //     }else{
        //         _video1.play();
        //     }
            
        //     if(_video3.paused){
        //        _video3.play();
        //        //_video.pause();//暂停
        //     }
        // }
       
        
    </script>

</body>

</html>