yuansh
/
FBS_VIEW


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202
							<!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 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 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="110%" /> 
            </div>
        </div>
        <div class="row" v-for="task in taskList" id="one"> 
            <video 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="100%" />
       </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: {
                        taskList: [],
                        cacheDataObject: {}, // 从服务器加载的全数据，界面只取某几条
                        imer_long: '', // 定时取服务器数据
                        timer_short: '', // 数据超长定时轮播
                        upVideo:'',
                        firstFile:''
                    },
                    methods: {
                        // 从服务器加载数据并显示
                        refreshData: function () {
                            // 关闭定时器
                            // clearInterval(this.timer_short);
                            this.loadData();
                            // 开启定时器
                            this.timer_short = setTimeout(this.scrollData, 3000);
                        }, // 轮播数据
                        scrollData: function () {
                            for (var key in this.cacheDataObject) {
                                const dataList = this.cacheDataObject[key].data;
                                const pagesize = this.cacheDataObject[key].pagesize;
                                var pageindex = this.cacheDataObject[key].pageindex + 1;

                                if (dataList.length > pagesize) {
                                    const pagesum = (dataList.length / pagesize).toFixed(0) * 1 + (dataList.length %
                                        pagesize > 0 ? 1 : 0);
                                    if (pageindex >= pagesum)
                                        pageindex = 0;
                                    this.cacheDataObject[key].pageindex = pageindex;
                                    const startIndex = pageindex * pagesize;
                                    const remainSum = dataList.length - startIndex;
                                    const recordSum = remainSum >= pagesize ? pagesize : remainSum;
                                    const keyPar = dataList.slice(startIndex, startIndex + pagesize);
                                    if(keyPar.length < 1){
                                        continue;
                                    }
                                    this[key] = dataList.slice(startIndex, startIndex + pagesize);
                                }
                            }

                        }, // 从服务器加载数据
                        loadData: function () {
                            this.cacheDataObject = {};
                            
                            const taskList = ServiceProduceTask.getVedioFileList();
                            this.upVideo = taskList[0].upVideo;
                            if(this.upVideo == 'AAA'){
                               $("#two").hide();
                            }else{
                                $("#one").hide();
                            }
                            
                            this.firstFile = taskList[0].fileName;
                            if(taskList[0].isImg){
                                $("#twoVideo").hide();
                            }else{
                                $("#twoImg").hide();
                            }
                            taskList.splice(0, 1);
                            this.cacheDataObject.taskList = {
                                data: taskList,
                                pagesize: 1,
                                pageindex: 0
                            }
                            this.taskList = taskList.slice(0, this.cacheDataObject.taskList.pagesize);
                            getVideo();
                        }
                    },
                    mounted() {
                        this.timer_long = setInterval(this.refreshData, 10000);
                        this.refreshData();

                    },
                    beforeDestroy() {
                        clearInterval(this.timer_long);
                        // clearInterval(this.timer_short);
                    }
                })

        // $(function () {

        //     if(taskList != null){

        //         var file = taskList[0].fileType;
        //         if (file=='jpg' || file=='jpeg' || file=='png'){
        //             $("#videoType").hide();
        //             $("#imgType").attr('src',"/upVedio/"+taskList[0].fileName);
        //         }else{
        //             $("#imgType").hide();
        //             $("#videoType").attr('src',"/upVedio/"+taskList[0].fileName);
        //             setInterval(function () { getVideo(); }, 3000);
        //         }
                
        //     }
            
        // })
       
        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>