1

js/util/main.js

@@ -0,0 +1,90 @@
+window.addEventListener('load', function() {
+ 
+    var leftArrow = this.document.querySelector('.lf');
+    var rightArrow = this.document.querySelector('.lr');
+ 
+    // 鼠标移动到左右箭头的位置更换图片 有灰色背景的图片
+    leftArrow.addEventListener('mouseenter', function() {
+        this.style.backgroundPosition = '0 0';
+    });
+ 
+    leftArrow.addEventListener('mouseleave', function() {
+        this.style.backgroundPosition = '-83px 0';
+    });
+ 
+    rightArrow.addEventListener('mouseenter', function() {
+        this.style.backgroundPosition = '-42px 0';
+    });
+ 
+    rightArrow.addEventListener('mouseleave', function() {
+        this.style.backgroundPosition = '-123px 0';
+    });
+ 
+    // 获取图片 和 小点
+    var imgs = this.document.querySelectorAll('.img');
+    var dots = this.document.querySelector('.dots').querySelectorAll('span');
+ 
+    // 给图片设置index 属性，好判断当前的图片是哪一张
+    for (let i = 0; i < imgs.length; i++) {
+        imgs[i].setAttribute('data-index', i);
+    }
+ 
+    // 获取当前图片 和 图片的index（数组下标）
+    var current = this.document.querySelector('.current');
+    var currentIndex = current.getAttribute('data-index');
+ 
+    // 左箭头的点击事件，点击了就返回前一张图片 
+    // 如果当前图片为第一张那么需要更换到最后一张图片也就是第四张
+    leftArrow.addEventListener('click', function() {
+        if (currentIndex > 0) {
+            imgs[currentIndex].classList.remove('current');
+            dots[currentIndex].classList.remove('square');
+            imgs[--currentIndex].classList.add('current');
+            dots[currentIndex].classList.add('square');
+        } else {
+            imgs[currentIndex].classList.remove('current');
+            dots[currentIndex].classList.remove('square');
+            currentIndex = 4;
+            imgs[currentIndex].classList.add('current');
+            dots[currentIndex].classList.add('square');
+        }
+    });
+ 
+    // 点击右箭头下一张图片切换
+    // 如果当前为第五张图片，那么切换回第一张图片
+    rightArrow.addEventListener('click', changeImage);
+ 
+    var timer = this.setInterval(changeImage, 8000);
+ 
+    function changeImage() {
+        if (currentIndex < 4) {
+            imgs[currentIndex].classList.remove('current');
+            dots[currentIndex].classList.remove('square');
+            imgs[++currentIndex].classList.add('current');
+            dots[currentIndex].classList.add('square');
+        } else {
+            imgs[currentIndex].classList.remove('current');
+            dots[currentIndex].classList.remove('square');
+            currentIndex = 0;
+            imgs[currentIndex].classList.add('current');
+            dots[currentIndex].classList.add('square');
+        }
+    };
+ 
+    // 小圆点的点击事件
+    for (let k = 0; k < dots.length; k++) {
+        dots[k].setAttribute('data-index', k);
+        dots[k].addEventListener('click', function() {
+            var index = this.getAttribute('data-index');
+            if (index != currentIndex) {
+                imgs[currentIndex].classList.remove('current');
+                dots[currentIndex].classList.remove('square');
+                imgs[index].classList.add('current');
+                dots[index].classList.add('square');
+                currentIndex = index;
+            }
+ 
+        })
+    }
+
+});

js/util/style.css

@@ -0,0 +1,77 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+ 
+.app {
+    width: 100%;
+    /* margin: 50px 0; */
+    text-align: center;
+}
+ 
+.app .scroll {
+    position: relative;
+    display: inline-block;
+    width: 100%;
+    height: 100%;
+}
+ 
+.app .scroll .img {
+    display: none;
+    width: 100%;
+}
+ 
+.app .scroll .current {
+    display: block;
+}
+ 
+.scroll .lf {
+    position: absolute;
+    top: 50%;
+    left: 10px;
+    background-image: url('img/arrow.png');
+    background-position: -83px 0;
+    width: 41px;
+    height: 69px;
+    cursor: pointer;
+    transform: translateY(-50%);
+}
+ 
+.scroll .lr {
+    position: absolute;
+    top: 50%;
+    right: 10px;
+    background-image: url('img/arrow.png');
+    background-position: -123px 0;
+    width: 41px;
+    height: 69px;
+    cursor: pointer;
+    transform: translateY(-50%);
+}
+ 
+.dots {
+    position: absolute;
+    bottom: 15px;
+    right: 20px;
+    width: 160px;
+}
+ 
+.dots>span {
+    display: inline-block;
+    box-sizing: border-box;
+    width: 11px;
+    height: 11px;
+    border: 3px solid rgba(204, 204, 204, 0.2);
+    border-radius: 15px;
+    cursor: pointer;
+}
+ 
+.dots>span:not(:last-child) {
+    margin-right: 5px;
+}
+ 
+/* 小圆点的颜色 */
+.dots .square {
+    background: #f46;
+
+}

pages/dashboard/video.html

@@ -225,7 +225,7 @@
 </head>
 <body>
     
-    <div class="row no-padding head-bar" style="height:81px">
+     <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"><span id="ggkb">公告看板</span>

pages/dashboard/video1.html

@@ -5,27 +5,30 @@
     <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">
-    <div class="row no-padding head-bar" style="height:81px">
-        <!-- <div class="col-lg-1 col-md-1">
+    <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">
-            E-SOP看板
-        </div> -->
+        </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>
@@ -37,13 +40,24 @@
                 onclick="window.location.replace('/pages/dashboard/quality.html');">品质看板</button>
         </div> -->
         <!-- <div class="col-lg-4 col-md-4">
-        </div> -->
-    </div>
+        </div>-->
+    </div> 
     <div class="my-container" id="div-main">
-        <div class="row block-padding">
-             <video id="videoType" src="" controls width="100%" height="100%" > </video> 
-             <img id="imgType" src="" width="100%" /> 
+        
+        <div id="two">
+            <div style="width: 49%;height: 100%;float:left;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 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="100%" /> 
+            </div>
         </div>
+        <div class="row" v-for="task in taskList" id="one"> 
+            <video v-if="!task.isImg" 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  -->
@@ -53,35 +67,113 @@
     <script src="/lib/echarts/theme/macarons.js"></script>
     <script src="/js/service/produce-task.js"></script>
     <script type="text/javascript">
-        $("#videoType").height($(window).height()-110);
-        $("#imgType").height($(window).height()-110);
-        const taskList = ServiceProduceTask.getVedioFileList();
+        $(".videoType").height($(window).height()-85);
+        $(".imgType").height($(window).height()-85);
+
+        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 = setInterval(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);
+                                }
+                            }
 
-        $(function () {
+                        }, // 从服务器加载数据
+                        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();
+                            }
+                            this.cacheDataObject.taskList = {
+                                data: taskList,
+                                pagesize: 1,
+                                pageindex: 0
+                            }
+                            this.taskList = taskList.slice(0, this.cacheDataObject.taskList.pagesize);
+                        }
+                    },
+                    mounted() {
+                        this.timer_long = setInterval(this.refreshData, 10000);
+                        this.refreshData();
 
-            if(taskList != null){
+                    },
+                    beforeDestroy() {
+                        clearInterval(this.timer_long);
+                        clearInterval(this.timer_short);
+                    }
+                })
 
-                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 () {
+
+        //     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 _video = $('#videoType')[0];
-            if(_video.paused){
-                _video.play();
-                //_video.pause();//暂停
-            }
-        }
+        // function getVideo(){
+        //     var _video = $('#videoType')[0];
+        //     if(_video.paused){
+        //         _video.play();
+        //         //_video.pause();//暂停
+        //     }
+        // }
        
         
     </script>