视频逻辑调试

VisualInspection/js/config.js

@@ -1,6 +1,6 @@
-// var base_ui_url = "http://192.168.68.126:8081/";
-// var base_server_url = "http://192.168.68.126:8089/";
+var base_ui_url = "http://192.168.68.126:8081/";
+var base_server_url = "http://192.168.68.126:8089/";
 var base_image_server_url = "http://192.168.68.126:8080/";
 
-var base_ui_url = "http://localhost:8080/";
-var base_server_url = "http://localhost:8089/";
+// var base_ui_url = "http://localhost:8080/";
+// var base_server_url = "http://localhost:8089/";

VisualInspection/js/lib/slide/rangeslider.css

@@ -0,0 +1,111 @@
+.rangeslider,
+.rangeslider__fill {
+  display: block;
+  -moz-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3);
+  -webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3);
+  box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3);
+  -moz-border-radius: 10px;
+  -webkit-border-radius: 10px;
+  border-radius: 10px;
+}
+
+.rangeslider {
+  background: #e6e6e6;
+  position: relative;
+}
+
+.rangeslider--horizontal {
+  height: 20px;
+  width: 100%;
+}
+
+.rangeslider--vertical {
+  width: 20px;
+  min-height: 150px;
+  max-height: 100%;
+}
+
+.rangeslider--disabled {
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
+  opacity: 0.4;
+}
+
+.rangeslider__fill {
+  background: #00ff00;
+  position: absolute;
+}
+.rangeslider--horizontal .rangeslider__fill {
+  top: 0;
+  height: 100%;
+}
+.rangeslider--vertical .rangeslider__fill {
+  bottom: 0;
+  width: 100%;
+}
+
+.rangeslider__handle {
+  background: white;
+  border: 1px solid #ccc;
+  cursor: pointer;
+  display: inline-block;
+  width: 40px;
+  height: 40px;
+  position: absolute;
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4xIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
+  background-size: 100%;
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(0, 0, 0, 0.1)));
+  background-image: -moz-linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1));
+  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1));
+  background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.1));
+  -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
+  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
+  -moz-border-radius: 50%;
+  -webkit-border-radius: 50%;
+  border-radius: 50%;
+}
+.rangeslider__handle:after {
+  content: "";
+  display: block;
+  width: 18px;
+  height: 18px;
+  margin: auto;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjEzIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+  background-size: 100%;
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.13)), color-stop(100%, rgba(255, 255, 255, 0)));
+  background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0));
+  background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0));
+  background-image: linear-gradient(rgba(0, 0, 0, 0.13), rgba(255, 255, 255, 0));
+  -moz-border-radius: 50%;
+  -webkit-border-radius: 50%;
+  border-radius: 50%;
+}
+.rangeslider__handle:active, .rangeslider--active .rangeslider__handle {
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjEiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4xMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+  background-size: 100%;
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, rgba(0, 0, 0, 0.12)));
+  background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.12));
+  background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.12));
+  background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.12));
+}
+.rangeslider--horizontal .rangeslider__handle {
+  top: -10px;
+  touch-action: pan-y;
+  -ms-touch-action: pan-y;
+}
+.rangeslider--vertical .rangeslider__handle {
+  left: -10px;
+  touch-action: pan-x;
+  -ms-touch-action: pan-x;
+}
+
+input[type="range"]:focus + .rangeslider .rangeslider__handle {
+  -moz-box-shadow: 0 0 8px rgba(255, 0, 255, 0.9);
+  -webkit-box-shadow: 0 0 8px rgba(255, 0, 255, 0.9);
+  box-shadow: 0 0 8px rgba(255, 0, 255, 0.9);
+}

VisualInspection/js/mytask/check.js

@@ -1,6 +1,7 @@
 function initCheck() {
 
-    alert(getVideoPosition())
+    $('input[type="range"]').rangeslider();
+    // alert(getVideoPosition())
 
     // 仅选择日期
     $("#start-time").datetimepicker({
@@ -82,6 +83,18 @@ function deleteScore(id) {
     deleteItem4Common(id, "/score/delete/", queryScores);
 }
 
+function addPic(pic) {
+    if (pic) {
+        var picStr = '<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="' + pic + '" style="position:absolute">'
+            + '<img class="pic-class img-thumbnail" style="width:100px;height:70px;" src="' + pic + '" alt="">'
+            + '</a>'
+            + '</div>';
+        $(divId).append(picStr);
+    }
+}
+
 function showPics(pics, divId) {
     var picStr = '';
     if (!divId) divId = '#img_container';

VisualInspection/js/util/video.js

@@ -1,5 +1,6 @@
+
 function setProgress(percent){
-    $(".progress-bar").css('width',percent);
+    $('input[type="range"]').val(percent).change();
 }
 
 function setVideoList(videos){
@@ -17,6 +18,7 @@ function setVideoList(videos){
     $('#video_list').html(selectStr);
 }
 
+
 function doAction(func){
     event = document.createEvent('MessageEvent');
     var origin = window.location.protocol + '//' + window.location.host;

VisualInspection/view/common/commoncsslink.html

@@ -5,4 +5,4 @@
 <link rel="stylesheet" type="text/css" href="/css/common/header.css">
 <link rel="stylesheet" type="text/css" href="/css/common/foot.css">
 <link rel="stylesheet" type="text/css" href="/js/lib/kkpager_green.css">
-<link rel="stylesheet" type="text/css" href="/js/lib/ystep/css/ystep.css">
+<link rel="stylesheet" type="text/css" href="/js/lib/slide/rangeslider.css">

VisualInspection/view/common/commonscriptlink.html

@@ -14,7 +14,7 @@
 <script src="/node_modules/ztree/js/jquery.ztree.all.min.js"></script>
 <script src="/js/lib/treeSelect.js"></script>
 <script src="/js/lib/kkpager.min.js"></script>
-<script src="/js/lib/ystep/js/ystep.js"></script>
+<script src="/js/lib/slide/rangeslider.min.js"></script>
 <script src="/js/util/util.js"></script>
 <script src="/js/util/service.js"></script>
 <script src="/js/constant/constant.js"></script>

VisualInspection/view/mytask/check.html

@@ -35,7 +35,7 @@
                     <i class="icon icon-list"></i>
                     <span class="title">面板标题</span>
                     </div>-->
-                    <select class="form-control" id="video_list" style="position:absolute;left:300px;top:10px;width:200px;"></select>
+                    
                     <div class="panel-body" style="padding:5px;">
                         <ul class="nav nav-secondary">
                             <li class="active"><a data-tab href="#tabContent1">收费亭</a></li>
@@ -51,14 +51,11 @@
                             </div>
                         </div>
                         <div class="row" style="padding:5px;margin-top:5px;text-align:center">
-                            <div class="progress">
-                                <div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
-                                    <span class="sr-only">40% Complete (success)</span>
-                                </div>
-                            </div>
+                            <input type="range" min="10"  max="1000"   step="10" value="300" >
                         </div>
-                        <div class="row" style="margin-top:5px;text-align:center">
-                            <div class="btn-group">
+                        <div class="row" style="padding:0 10px;margin-top:5px;text-align:center">
+                            <select class="form-control" id="video_list" style="width:200px;float:left;"></select>
+                            <div class="btn-group" style="float:right;">
                                 <button type="button" class="btn btn-info" onclick="doAction('start')">播放</button>
                                 <button type="button" class="btn btn-primary" onclick="doAction('stop')">停止</button>
                                 <button type="button" class="btn btn-warning" onclick="doAction('fast')">快进</button>