视屏播放

VisualInspection/js/lib/mytable.js

@@ -1,4 +1,4 @@
-(function($) {
+(function ($) {
     'use strict';
 
     var con;
@@ -12,14 +12,14 @@
      * @param object element           DOM element or jquery element
      * @param object options           Datatable options
      */
-    var mytable = function(element, options, flag) {
+    var mytable = function (element, options, flag) {
         // default options
         var DEFAULTS = {
-            checkable:false,
-            sortable:false,
-            isShoWPager:true,
-            pager:{
-                page_size:10
+            checkable: false,
+            sortable: false,
+            isShoWPager: true,
+            pager: {
+                page_size: 10
             }
         };
         this.options = $.extend({}, DEFAULTS, options);
@@ -29,206 +29,227 @@
         this.con = $(element);
         this.obj = this;
         $(element).html('');
-        if(flag) return;
+        if (flag) return;
         $(element).append('<div class=""><div id="my_table" data-checkable="true" data-sortable="true"></div></div>'
-                           + '<div id="kkpager" class="" style="text-align:center"></div>');
-        this.getRemoteData(element,this.options,this);
-        return this;       
+            + '<div id="kkpager" class="" style="text-align:center"></div>');
+        this.getRemoteData(element, this.options, this);
+        return this;
     };
 
     // Get options
     mytable.prototype = {
-        getRemoteData:function(element,options,obj){
-            if(!element) element = this.element;
-            if(!options) options = this.options;
+        getRemoteData: function (element, options, obj) {
+            if (!element) element = this.element;
+            if (!options) options = this.options;
             var url = options.url;
             var p_cur = 1;
             var pager = options.pager;
             this.getServerData(p_cur, options, element, obj);
         },
-        getRemoteData1:function(p_cur){
+        getRemoteData1: function (p_cur) {
             this.getServerData(p_cur, this.options, this.element, this.obj);
         },
-        getServerData:function(p_cur, options, element, obj){
+        getServerData: function (p_cur, options, element, obj) {
             var url = options.url;
             var pager = options.pager;
             var page_size = pager.page_size;
             var param = options.param;
             // var obj = this.obj;
-            post_common_service(url+"/"+p_cur+"/"+page_size, param, function(data) {
+            post_common_service(url + "/" + p_cur + "/" + page_size, param, function (data) {
                 console.log(data);
-                if(!data){
-                    data = {list:[]};
+                if (!data) {
+                    data = { list: [] };
                     // return;
                 }
-                 // 这边把请求过来的数据缓存到table选择器中
-                $(element).data("data_cache",data.list);
-                element.tt_data=data.list;
-                options.tableData=data.list;
-                obj.setTable(data.list,element, options,p_cur); 
-                if(obj.options.pager){
+                // 这边把请求过来的数据缓存到table选择器中
+                $(element).data("data_cache", data.list);
+                element.tt_data = data.list;
+                options.tableData = data.list;
+                obj.setTable(data.list, element, options, p_cur);
+                if (obj.options.pager) {
                     options.pager = {
-                        page_size:10,
-                        p_cur : data.pageNum, //页号
-                        p_pages:data.pages, //总页码
-                        p_totalRecords:data.total
+                        page_size: 10,
+                        p_cur: data.pageNum, //页号
+                        p_pages: data.pages, //总页码
+                        p_totalRecords: data.total
                         // 'cb':'getRemoteData
-                    }   
+                    }
                     obj.setPager();
                 }
-                if(data.list.length<=0){
-                    $("#kkpager").css("display","none");
-                }else{
-                    $("#kkpager").css("display","block");
+                if (data.list.length <= 0) {
+                    $("#kkpager").css("display", "none");
+                } else {
+                    $("#kkpager").css("display", "block");
                 }
-            }, function(error) {
+            }, function (error) {
                 alert(error);
             });
         },
-        setTable:function(datas, element, options,p_cur) {
+        setTable: function (datas, element, options, p_cur) {
             var cols = options.cols;
             var newCols = []
-            for(var i in cols) {
-                if(!cols[i].hide){
+            for (var i in cols) {
+                if (!cols[i].hide) {
                     newCols.push(cols[i]);
                 }
             }
             cols = newCols;
             var tableData = datas;
             // var pager = options.pager;
-           
-            clearTable(cols,options,element);
+
+            clearTable(cols, options, element);
             var rowData = formatTableData(tableData, cols, p_cur);
 
             // 使用data参数更新数据：
-            $('#my_table').datatable('load',{
-                    cols: cols,
-                    rows:rowData
-                }
+            $('#my_table').datatable('load', {
+                cols: cols,
+                rows: rowData
+            }
             );
             // $('#my_table').datatable({checkable: true});
 
             $('a.lightbox-toggle').lightbox();//图片轮播
-            function formatTableData(data,cols,p_cur){
+            function formatTableData(data, cols, p_cur) {
                 var rows = [];
-                for(var i=0;i<data.length;i++){
-                    data[i].num=(p_cur-1)*10+i+1;
-                    rows.push(genRow(data[i],cols));
+                for (var i = 0; i < data.length; i++) {
+                    data[i].num = (p_cur - 1) * 10 + i + 1;
+                    rows.push(genRow(data[i], cols));
                 }
                 return rows;
             }
 
-            function genRow(obj,cols){
-                var row = {checked: false, data:null};
-                var dArr=[];
-                for(var i=0;i<cols.length;i++){
-                    if(cols[i].func!=null){
+            function genRow(obj, cols) {
+                var row = { checked: false, data: null };
+                var dArr = [];
+                for (var i = 0; i < cols.length; i++) {
+                    if (cols[i].func != null) {
                         dArr.push(cols[i].func(obj[cols[i].field]));
-                    }else if(cols[i].type=="imagedd"){
+                    } else if (cols[i].type == "imagedd") {
                         var pics = obj[cols[i].field];
-                        var picStr='';
-                        if(pics){
+                        var picStr = '';
+                        if (pics) {
                             var picArr = pics.split(',');
-                            for(var j in picArr){
-                                var pic =  '<a class="lightbox-toggle" href="'+picArr[j]+'" style="width:60px;height:50px;">'
-                                    +      '<img class="pic-class  img-thumbnail" style="width:60px;height:50px;" src="'+picArr[j]+'" alt="">'
-                                    +  '</a>';
-                                picStr+=pic;
+                            for (var j in picArr) {
+                                 
+
+                                var ispic = true;
+                                
+                                var src = picArr[j];
+                                if (!src.startWith("http"))
+                                    src = base_image_server_url + src;
+
+                                var videosrc = src;
+                                if (src.indexOf('.avi') != -1) {
+                                    src = src.split('.avi')[0] + "_screen_0.png"
+                                    ispic = false;
+                                }
+                                if (src.indexOf('.mov') != -1) {
+                                    src = src.split('.mov')[0] + "_screen_0.png"
+                                    ispic = false;
+                                }
+                                if (src.indexOf('.mp4') != -1) {
+                                    src = src.split('.mp4')[0] + "_screen_0.png"
+                                    ispic = false;
+                                }
+                                var pic =  (ispic ? '<a class="card lightbox-toggle" data-group="image-group-1" data-lightbox-group="example-3" href="' + src + '" style="width:60px;height:50px;">' : '<a class="card" onclick="video_paly(\'' + videosrc + '\')" href="javascript:void(0)" style="width:60px;height:50px;">') 
+                                    + '<img class="pic-class  img-thumbnail" style="width:60px;height:50px;" src="' + src + '" alt="">'+ (ispic ? '' : '<i class="icon icon-play-circle" style=" font-size: 30px;position: absolute;top: 10px;left: 15px;color: white;"></i>') 
+                                    + '</a>';
+                                picStr += pic;
                             }
                         }
                         dArr.push(picStr);
-                    }else if(cols[i].oper!=null) {
+                    } else if (cols[i].oper != null) {
                         var oper = cols[i].oper;
-                        var operStr="";
-                        for(var j=0;j<oper.length;j++){
-                            operStr+='<a href="javascript:void(0)" onclick="'+oper[j].func+'('+obj[cols[i].field]+','+obj[cols[i].field_other]+')"><i class="icon '+oper[j].icon_class+'"></i>&nbsp;'+oper[j].text+' </a>&nbsp;';
+                        var operStr = "";
+                        for (var j = 0; j < oper.length; j++) {
+                            operStr += '<a href="javascript:void(0)" onclick="' + oper[j].func + '(' + obj[cols[i].field] + ',' + obj[cols[i].field_other] + ')"><i class="icon ' + oper[j].icon_class + '"></i>&nbsp;' + oper[j].text + ' </a>&nbsp;';
                         }
                         dArr.push(operStr);
-                    }else{
-                        if(cols[i].type == "date"){
-                            if(cols[i].custom){
-                                dArr.push(timeStamp2String(obj[cols[i].field],cols[i].date_type) + cols[i].custom);
-                            }else{
-                                dArr.push(timeStamp2String(obj[cols[i].field],cols[i].date_type));
+                    } else {
+                        if (cols[i].type == "date") {
+                            if (cols[i].custom) {
+                                dArr.push(timeStamp2String(obj[cols[i].field], cols[i].date_type) + cols[i].custom);
+                            } else {
+                                dArr.push(timeStamp2String(obj[cols[i].field], cols[i].date_type));
                             }
-                        
-                        }else if(obj[cols[i].field]){
-                            if(cols[i].custom){
+
+                        } else if (obj[cols[i].field]) {
+                            if (cols[i].custom) {
                                 dArr.push(obj[cols[i].field] + cols[i].custom);
-                            }else{
+                            } else {
                                 dArr.push(obj[cols[i].field]);
                             }
-                        }else{ 
+                        } else {
                             dArr.push('');
                         }
                     }
-                    
+
                 }
-                row.data=dArr;
+                row.data = dArr;
                 return row;
             }
-            function clearTable(cols,options,element){
+            function clearTable(cols, options, element) {
                 var checkable = options.checkable;
                 var sortable = options.sortable
-                $('#my_table').datatable( {
-                    checkable:checkable,
-                    sortable:sortable,
+                $('#my_table').datatable({
+                    checkable: checkable,
+                    sortable: sortable,
                     data: {
                         cols: cols,
-                        rows:[]
+                        rows: []
                     },
-                    checksChanged:function(event) {
+                    checksChanged: function (event) {
                         var checkArr = event.checks.checks;
-                        var checkedIds=[];
-                        for(var i=0;i<checkArr.length;i++) {
-                            element.tt_data[i].checked=true;
+                        var checkedIds = [];
+                        for (var i = 0; i < checkArr.length; i++) {
+                            element.tt_data[i].checked = true;
                             checkedIds.push(element.tt_data[i].id);
                         }
                         element.tt_checkedIds = checkedIds;
-                        $(element).data("select_cache",checkedIds);
+                        $(element).data("select_cache", checkedIds);
                         console.log(element.tt_checkedIds);
                     }
                 });
             }
         },
-        setPager:function(data) {
+        setPager: function (data) {
             var pager = this.options.pager;
             var p_cur = pager.p_cur;
             var p_pages = pager.p_pages;
             var p_totalRecords = pager.p_totalRecords;
-            var obj=this;
+            var obj = this;
             kkpager.generPageHtml({
-                pno : p_cur,
-                total : p_pages,
-                totalRecords : p_totalRecords,
-                isShowTotalRecords:true,
-                mode : 'click',
-                click : function(n){
+                pno: p_cur,
+                total: p_pages,
+                totalRecords: p_totalRecords,
+                isShowTotalRecords: true,
+                mode: 'click',
+                click: function (n) {
                     obj.options.pager.p_cur = n;
                     this.selectPage(n);
                     obj.getRemoteData1(n);//调用获取数据方法
                     return false;
                 }
-            },true);
+            }, true);
         }
     };
 
-    $.fn.mytable = function(options) {
+    $.fn.mytable = function (options) {
         if (typeof options == 'string') {
             switch (options) {
-                case 'getTableData': 
+                case 'getTableData':
                     return this[0].tt_data;
-                case 'getTableCheckedIds': 
+                case 'getTableCheckedIds':
                     // return this[0].tt_checkedIds;
                     return $(this).data("select_cache");
-                case 'empty': 
-                    return new mytable(this,options,true);
+                case 'empty':
+                    return new mytable(this, options, true);
             }
-         }   else{
-        return this.each(function() {
-            // var $this = $(this);
-                new mytable(this,options);
-            //  $(this).attr('tableData',mytable.tableData);
+        } else {
+            return this.each(function () {
+                // var $this = $(this);
+                new mytable(this, options);
+                //  $(this).attr('tableData',mytable.tableData);
             });
         }
     };

VisualInspection/js/mytask/check.js

@@ -481,7 +481,7 @@ function genPicstr(imgSrc) {
     if (ISCLIENT) {
         pic = '<div class="img_item" style="width:100px;height:90px;float:left;">' +
             '<a href="javascript:void(0)" onclick="removeImg(this)" style="float:right;position:relative;z-index:100;"><span class="label label-danger"><i class="icon icon-remove-circle"></i> 删除</span></a>' +
-            '<a class="card" onclick="' + (ispic ? 'showClientImg(\'' + src + '\')' : '') + '" href="javascript:void(0)" style="position:absolute">' +
+            '<a class="card" onclick="' + (ispic ? 'showClientImg(\'' + src + '\')' : 'showClientVideo(\'' + videosrc + '\')') + '" href="javascript:void(0)" style="position:absolute">' +
             '<img class="pic-class img-thumbnail" path="' + imgSrc + '" style="width:100px;height:70px;" src="' + src + '" alt="">' + (ispic ? '' : '<i class="icon icon-play-circle" style=" font-size: 30px;position: absolute;top: 20px;left: 40px;color: white;"></i>') +
             '</a>' +
             '</div>';
@@ -489,6 +489,7 @@ function genPicstr(imgSrc) {
     return pic;
 }
 
+
 function removeImg(this1) {
     $(this1).parent('.img_item').remove();
 }

VisualInspection/js/util/media.js

@@ -2,13 +2,13 @@ function video_paly(src) {
     var height = 264;
     var width = 640;
 
-    alert(src)
+   
 
     __inline('/node_modules/video.js/dist/video.min.js');
     var css = "<style lang='css/text'>" + __inline('/node_modules/video.js/dist/video-js.min.css') + "  .video-js .vjs-fullscreen-control { display: none;} </style>";
 
     var list = src.split(".");
-    var videotype = "x-msvideo"
+    var videotype = list[list.length-1]
 
     var html = css + '<video' +
         '    id="my-player"' +
@@ -17,7 +17,7 @@ function video_paly(src) {
         '    preload="auto"' +
         '    width="' + width + '" height="' + height + '"' +
         '    data-setup=\'{}\'>' +
-        '  <source src="' + src + '" type="video/avi"></source>' +
+        '  <source src=\'' + src + '\' type="video/'+videotype+'"></source>' +
         '  <p class="vjs-no-js">' +
         '    To view this video please enable JavaScript, and consider upgrading to a' +
         '    web browser that' +

VisualInspection/js/util/util.js

@@ -375,6 +375,10 @@ function showClientImg(src){
     callFunc("showImage", src);
 }
 
+function showClientVideo(src){
+    callFunc("showVideo", src);
+}
+
 function downloadClientfile(src){
     callFunc("downloadfile", src);
 }

VisualInspection/view/mytask/taskDetail.html

@@ -202,10 +202,31 @@
         if(pics){
             var picArr = pics.split(',');
             for(var i in picArr){
+
+                var ispic = true;
+                var src =  picArr[i];
+                if (!src.startWith("http"))
+                        src = base_image_server_url + src;
+
+                var videosrc = src;
+                if (src.indexOf('.avi') != -1) {
+                    src = src.split('.avi')[0] + "_screen_0.png"
+                    ispic = false;
+                }
+                if (src.indexOf('.mov') != -1) {
+                    src = src.split('.mov')[0] + "_screen_0.png"
+                    ispic = false;
+                }
+                if (src.indexOf('.mp4') != -1) {
+                    src = src.split('.mp4')[0] + "_screen_0.png"
+                    ispic = false;
+                }
+
+            
                 var pic = '<div id="img_item_'+i+'" class="col-md-4 col-sm-6 col-lg-3">'
                     +  '<a href="javascript:void(0)" onclick="removeImg(\'#img_item_'+i+'\')" style="float:right;position:absolute;z-index:100;"><span class="label label-danger"><i class="icon icon-remove-circle"></i> 删除</span></a>'
-                    +  '<a class="card lightbox-toggle" href="'+picArr[i]+'" style="position:absolute">'
-                    +      '<img class="pic-class img-thumbnail" style="width:200px;height:150px;" src="'+picArr[i]+'" alt="">'
+                    +(ispic ? '<a class="card lightbox-toggle" data-group="image-group-1" data-lightbox-group="example-3" href="' + src + '" style="position:absolute">' : '<a class="card" onclick="video_paly(\'' + videosrc + '\')" href="javascript:void(0)" style="position:absolute">') 
+                    +      '<img class="pic-class img-thumbnail" style="width:200px;height:150px;" src="'+src+'" alt="">'+ (ispic ? '' : '<i class="icon icon-play-circle" style=" font-size: 30px;position: absolute;top: 40px;left:80px;color: white;"></i>') 
                     +  '</a>'
                     +'</div>';
                 picStr+=pic;