Merge pull request '支持训练任务日志滑动最底部和最顶部' (#1967) from fix-1944 into V20220428

Reviewed-on: https://git.openi.org.cn/OpenI/aiforge/pulls/1967
Reviewed-by: wangjr <wangjr@pcl.ac.cn>

templates/repo/modelarts/trainjob/show.tmpl

@@ -420,7 +420,13 @@ td, th {
                         </div>
                     </div>
                     <div class="ui tab" data-tab="second{{$k}}">
-                        <div>
+                        <div style="position: relative;">
+                            <span>
+                                <a title="滚动到顶部" style="position: absolute; right: -32px;cursor: pointer;" id="log_top"><i class="icon-to-top"></i></a>
+                            </span>
+                            <span>
+                                <a title="滚动到底部" style="position: absolute; bottom: 10px;right: -32px;cursor: pointer;" id="log_bottom"><i class="icon-to-bottom"></i></a>
+                            </span>
                             <div class="ui message message{{.VersionName}}" style="display: none;">
                                 <div id="header"></div>
                             </div>
@@ -879,4 +885,57 @@ td, th {
             });
         }
     }
+    function scrollAnimation(dom, currentY, targetY, currentX) {
+        let needScrollTop = targetY - currentY;
+        let _currentY = currentY;
+        setTimeout(() => {
+            // 一次调用滑动帧数，每次调用会不一样
+            //取总距离的十分之一
+            const dist = Math.ceil(needScrollTop / 10);
+            _currentY += dist;
+            //移动一个十分之一
+            console.log(_currentY, targetY)
+            dom.scrollTo(currentX || 0, _currentY);
+            // 如果移动幅度小于十个像素，直接移动，否则递归调用，实现动画效果
+            if (needScrollTop > 10 || needScrollTop < -10) {
+                scrollAnimation(dom, _currentY, targetY)
+            } else {
+                dom.scrollTo(0, targetY)
+            }
+        }, 1)
+    }
+
+    $('#log_top').click(function(){
+        let logContentDom = document.querySelector('.log')
+        if(!logContentDom)
+            return
+        scrollAnimation(logContentDom, logContentDom.scrollTop, 0);
+    })
+    $('#log_bottom').click(function(){
+        let logContentDom = document.querySelector('.log')
+			if(!logContentDom)
+				return
+			//如果内容撑大到可以滚动，则触发滚动
+			// if(!['10','11','12'].includes(context.taskInfo.statusCode)){
+            //     context.getLogContent(0, context.lines, 'goDown')
+            // }
+            if(logContentDom.scrollHeight > logContentDom.clientHeight){
+                console.log("1111")
+                scrollAnimation(logContentDom, logContentDom.scrollTop, logContentDom.scrollHeight - logContentDom.clientHeight);
+            }
+			else{
+                logScroll(version_name)
+                logContentDom.scrollTo(0,logContentDom.scrollTop-1);
+            }
+			// if(this.checkCurrentCanScrollBottom()){
+			// 	// this.goDown();
+				
+				
+			// 	this.scrollAnimation(logContentDom, logContentDom.scrollTop, logContentDom.scrollHeight - logContentDom.clientHeight);
+			// }else{
+			// 	//如果内容不足，则往后追加内容
+			// 	this.goDown();
+			// 	logContentDom.scrollTo(0,logContentDom.scrollTop-1);
+			// }
+    })
 </script>