aiforge/templates/repo/modelarts/inferencejob/show.tmpl

{{template "base/head" .}}
<style>
.according-panel-heading{
    box-sizing: border-box;
    padding: 8px 16px;
    color: #252b3a;
    background-color: #f2f5fc;
    line-height: 1.5;
    cursor: pointer;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}
.accordion-panel-title {
    margin-top: 0;
    margin-bottom: 0;
    color: #252b3a;
}
.accordion-panel-title-content{
    vertical-align: middle;
    display: inline-block;
    width: calc(100% - 32px);
    cursor: default;
}
.acc-margin-bottom {
    margin-bottom: 5px;
}
.title_text {
    font-size: 12px;
}
.ac-display-inblock {
    display: inline-block;
}
.cti-mgRight-sm {
    margin-right: 8px;
}
.ac-text-normal {
    font-size: 14px;
    color: #575d6c;
}
.uc-accordionTitle-black {
    color: #333;
}
.accordion-border{
    border:1px solid #cce2ff;
}
.padding0{
    padding: 0 !important;
}
.content-pad{
    padding: 15px 35px;
}
.content-margin{
    margin:10px 5px ;
}
.tab_2_content {
    min-height: 360px;
    margin-left: 10px;
}
.ac-grid {
    display: block;
    *zoom: 1;
}
.ac-grid-col {
    float: left;
    width: 100%;
}
.ac-grid-col2 .ac-grid-col {
    width: 50%;
}
.ti-form {
    text-align: left;
    max-width: 100%;
    vertical-align: middle;
}
.ti-form>tbody {
    font-size: 12px;
}
.ti-form>tbody, .ti-form>tbody>tr {
    vertical-align: inherit;
}
.ti-text-form-label {

    padding-bottom: 20px;
    padding-right: 20px;
    color: #8a8e99;
    font-size: 12px;
    white-space: nowrap !important;
    width: 80px;
    line-height: 30px;
}
.ti-text-form-content{
    line-height: 30px;
    padding-bottom: 20px;
}
.ti-form>tbody>tr>td {
    vertical-align: top;
    white-space: normal;
}
td, th {
    padding: 0;
}
.ac-grid-col .text-span {
    width: 450px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.redo-color{
    color: #3291F8;
}
.ti-action-menu-item:not(:last-child){
    margin-right: 10px;
    padding-right: 11px;
    text-decoration: none!important;
    color: #526ecc;
    cursor: pointer;
    display: inline-block;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    user-select: none;
    position: relative;
}
.ti-action-menu-item:not(:last-child):after {
    content: "";
    display: inline-block;
    position: absolute;
    height: 12px;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-6px);
    -ms-transform: translateY(-6px);
    -o-transform: translateY(-6px);
    transform: translateY(-6px);
    border-right: 1px solid #dfe1e6;
}
.text-width80{
    width: 100px;
    line-height: 30px;
}
.border-according{
    border: 1px solid #dfe1e6;
}
.disabled {
        cursor: default;
        pointer-events: none;
        color: rgba(0,0,0,.6) !important;
        opacity: .45 !important;
}
.pad20{

    border:0px !important;
}
.model_file_bread{
    margin-bottom: -0.5rem !important;
    padding-left: 1rem;
    padding-top: 0.5rem ;
}
</style>
<div class="repository">
{{template "repo/header" .}}
    <div class="ui container">
        <h4 class="ui header" id="vertical-segment">
            <div class="ui breadcrumb">
                <a class="section" href="{{.RepoLink}}/debugjob?debugListType=all">
                    {{.i18n.Tr "repo.cloudbrain"}}
                </a>
                <div class="divider"> / </div>
                <a class="section" href="{{$.RepoLink}}/modelarts/inference-job">
                    {{$.i18n.Tr "repo.modelarts.infer_job"}}
                </a>
                <div class="divider"> / </div>
				<div class="active section">{{.displayJobName}}</div>
			</div>
        </h4>
        {{with .task}}
        <div class="content-pad" style="border: 1px solid #e2e2e2;margin-top: 24px;padding: 20px 60px 40px 60px;">
                <div class="ui pointing secondary menu" style="border-bottom: 1px solid rgba(34,36,38,.15);">

                    <a class="active item" data-tab="first">{{$.i18n.Tr "repo.modelarts.train_job.config"}}</a>
                    <a class="item" data-tab="second" onclick="loadLog({{.VersionName}})">{{$.i18n.Tr "repo.modelarts.log"}}</a>
                    <a class="item" data-tab="third" onclick="loadModelFile({{.VersionName}},'','','init')">{{$.i18n.Tr "repo.model_download"}}</a>
                </div>

                <div class="ui tab active" data-tab="first">
                    <div style="padding-top: 10px;">
                        <div class="tab_2_content">
                            <div class="ac-grid ac-grid-col2">
                                <div class="ac-grid-col">
                                    <table class="ti-form">
                                        <tbody class="ti-text-form">
                                            <tr class="ti-no-ng-animate">
                                                <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                    {{$.i18n.Tr "repo.cloudbrain_task"}}
                                                </td>
                                                <td class="ti-text-form-content">
                                                    <div class="text-span text-span-w">
                                                        {{.DisplayJobName}}
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr class="ti-no-ng-animate">
                                                <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                    {{$.i18n.Tr "repo.modelarts.status"}}
                                                </td>

                                                <td class="ti-text-form-content">
                                                    <div class="text-span text-span-w" id="{{.VersionName}}-status">
                                                        {{.Status}}
                                                    </div>
                                                </td>
                                            </tr>
                                            <!-- <tr class="ti-no-ng-animate">
                                                <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                    {{$.i18n.Tr "repo.modelarts.run_version"}}
                                                </td>

                                                <td class="ti-text-form-content">
                                                    <div class="text-span text-span-w">
                                                        {{.VersionName}}
                                                    </div>
                                                </td>
                                            </tr> -->
                                            <tr class="ti-no-ng-animate">
                                                <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                    {{$.i18n.Tr "repo.modelarts.train_job.start_time"}}
                                                </td>

                                                <td class="ti-text-form-content">
                                                    <div class="text-span text-span-w">
                                                        <span style="font-size: 12px;" class="">
                                                        {{if not (eq .StartTime 0)}}
															 {{TimeSinceUnix1 .StartTime}}
															{{else}}
															{{TimeSinceUnix1 .CreatedUnix}}
															{{end}}
                                                        </span>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr class="ti-no-ng-animate">
                                                <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                    {{$.i18n.Tr "repo.modelarts.train_job.dura_time"}}
                                                </td>

                                                <td class="ti-text-form-content">
                                                    <div class="text-span text-span-w" id="{{.VersionName}}-duration">
                                                        {{.TrainJobDuration}}
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr class="ti-no-ng-animate">

                                                <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                    {{$.i18n.Tr "repo.modelarts.train_job.AI_driver"}}
                                                </td>
                                                <td class="ti-text-form-content">
                                                    <div class="text-span text-span-w">
                                                    {{.EngineName}}
                                                    </div>
                                                </td>

                                            </tr>

                                            <tr class="ti-no-ng-animate">
                                                <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                    {{$.i18n.Tr "repo.model.manage.description"}}
                                                </td>

                                                <td class="ti-text-form-content">
                                                    <div class="text-span text-span-w" id="{{.VersionName}}-desc" style="width: 380px;">
                                                        {{if .Description}}
                                                        <span title="{{.Description}}">{{.Description}}</span>
                                                        {{else}}
                                                        <span>--</span>
                                                        {{end}}
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr class="ti-no-ng-animate">
                                                <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                    创建人
                                                </td>

                                                <td class="ti-text-form-content">
                                                    <div class="text-span text-span-w" id="{{.VersionName}}-creator">
                                                        {{$.userName}}
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr class="ti-no-ng-animate">
                                                <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                    {{$.i18n.Tr "repo.modelarts.train_job.compute_node"}}
                                                </td>
                                                <td class="ti-text-form-content">
                                                    <div class="text-span text-span-w">
                                                        {{.WorkServerNumber}}
                                                    </div>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="ac-grid-col">
                                        <table class="ti-form">
                                            <tbody class="ti-text-form">
                                                <tr class="ti-no-ng-animate">
                                                    <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                        {{$.i18n.Tr "repo.modelarts.infer_job_model"}}
                                                    </td>
                                                    <td class="ti-text-form-content">
                                                        <div class="text-span text-span-w">
                                                        <span>{{.ModelName}}</span>&nbsp;&nbsp;
                                                        <span style="color: #8a8e99">{{$.i18n.Tr "repo.modelarts.version"}}：</span><span>{{.ModelVersion}}</span>&nbsp;&nbsp;

                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr class="ti-no-ng-animate">
                                                    <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                        {{$.i18n.Tr "repo.modelarts.infer_job_model_file"}}
                                                    </td>
                                                    <td class="ti-text-form-content">
                                                        <div class="text-span text-span-w">
                                                            {{.CkptName}}
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr class="ti-no-ng-animate">
                                                    <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                        {{$.i18n.Tr "repo.modelarts.model_label"}}
                                                    </td>

                                                    <td class="ti-text-form-content">
                                                        <div class="text-span text-span-w" id="{{.VersionName}}-labels">

                                                            {{if .LabelName}}
                                                                {{range $.labelName}}
                                                                <a class="ui label" title="{{.}}">{{.}}</a>
                                                                {{end}}
                                                            {{else}}
                                                            <span>--</span>
                                                            {{end}}
                                                        </div>
                                                    </td>
                                                </tr>

                                                <tr class="ti-no-ng-animate">
                                                    <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                        {{$.i18n.Tr "repo.modelarts.code_version"}}
                                                    </td>

                                                    <td class="ti-text-form-content">
                                                        <div class="text-span text-span-w">
                                                            {{.BranchName}}
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr class="ti-no-ng-animate">
                                                    <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                        {{$.i18n.Tr "repo.modelarts.train_job.start_file"}}
                                                    </td>

                                                    <td class="ti-text-form-content">
                                                        <div class="text-span text-span-w">
                                                            {{.BootFile}}
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr class="ti-no-ng-animate">
                                                    <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                        {{$.i18n.Tr "repo.modelarts.infer_dataset"}}
                                                    </td>

                                                    <td class="ti-text-form-content">
                                                        <div class="text-span text-span-w">
                                                            {{.DatasetName}}
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr class="ti-no-ng-animate">
                                                    <td class="ti-no-ng-animate ti-text-form-label text-width80" >
                                                        {{$.i18n.Tr "repo.modelarts.train_job.run_parameter"}}
                                                    </td>

                                                    <td class="ti-text-form-content">
                                                        <div class="text-span text-span-w" title="{{.Parameters}}">
                                                            {{if .Parameters}}
                                                            <span>{{.Parameters}}</span>
                                                            {{else}}
                                                            <span>--</span>
                                                            {{end}}
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr class="ti-no-ng-animate">
                                                    <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                            {{$.i18n.Tr "repo.modelarts.train_job.standard"}}
                                                    </td>

                                                    <td class="ti-text-form-content">
                                                        <div class="text-span text-span-w">
                                                            {{.FlavorName}}
                                                        </div>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                            </div>
                        </div>

                    </div>
                </div>

                <div class="ui tab" data-tab="second">
                    <div>
                        <a id="{{.VersionName}}-log-down"
                            class='{{if and (.CanModify) (eq .Status "KILLED" "FAILED" "START_FAILED" "STOPPED" "COMPLETED") }}ti-download-file{{else}}disabled{{end}}'
                            href="{{$.RepoLink}}/modelarts/train-job/{{.JobID}}/download_log_file?version_name={{.VersionName}}">
                            <i class="ri-download-cloud-2-line"></i>
                            <span style="margin-left: 0.3rem;">{{$.i18n.Tr "repo.modelarts.download_log"}}</span>
                        </a>

                    </div>
                    <div style="position: relative;border: 1px solid rgba(0,0,0,.2);padding: 0 10px;margin-top: 10px;">
                            <span>
                                <a title="滚动到顶部" style="position: absolute; right: -32px;cursor: pointer;"
                                    class="log_top" data-version="{{.VersionName}}"><i class="icon-to-top"></i></a>
                            </span>
                            <span>
                                <a title="滚动到底部" style="position: absolute; bottom: 10px;right: -32px;cursor: pointer;"
                                    class="log_bottom" data-version="{{.VersionName}}"><i
                                        class="icon-to-bottom"></i></a>
                            </span>
                        <div class="ui message message{{.VersionName}}" style="display: none;">
                            <div id="header"></div>
                        </div>
                        <div class="ui attached  log" onscroll="logScroll({{.VersionName}})" id="log{{.VersionName}}" style="height: 300px !important; overflow: auto;">
                            <input type="hidden"  name="end_line" value>
                            <input type="hidden"  name="start_line" value>
                            <pre id="log_file{{.VersionName}}"></pre>
                        </div>

                    </div>

                </div>
                <div class="ui tab" data-tab="third">
                    <input type="hidden" name="model{{.VersionName}}" value="-1">
                    <input type="hidden" name="modelback{{.VersionName}}" value="-1">
                    <div class='ui breadcrumb model_file_bread' id='file_breadcrumb{{.VersionName}}'>
                        <div class="active section">result</div>
                        <div class="divider"> / </div>

                    </div>
                    <div id="dir_list{{.VersionName}}">

                    </div>
                </div>

        </div>
        {{end}}





    </div>
    <!-- 确认模态框 -->
    <div id="deletemodel">
        <div class="ui basic modal">
            <div class="ui icon header">
                <i class="trash icon"></i> {{.i18n.Tr "cloudbrain.delete_task"}}
            </div>

            <div class="content">
                <p>{{.i18n.Tr "cloudbrain.task_delete_confirm"}}</p>
            </div>
            <div class="actions">
                <div class="ui red basic inverted cancel button">
                    <i class="remove icon"></i> {{.i18n.Tr "cloudbrain.operate_cancel"}}
                </div>
                <div class="ui green basic inverted ok button">
                    <i class="checkmark icon"></i> {{.i18n.Tr "cloudbrain.operate_confirm"}}
                </div>
            </div>
        </div>
    </div>
</div>
{{template "base/footer" .}}
<script>
$(document).ready(function(){
    $('.secondary.menu .item').tab();
});
let userName
let repoPath
let jobID
let downlaodFlag = {{$.canDownload }}
$(document).ready(function(){
    let url = window.location.href;
    let urlArr = url.split('/')
    userName = urlArr.slice(-5)[0]
    repoPath = urlArr.slice(-4)[0]
    jobID = urlArr.slice(-1)[0]
})
function loadLog(version_name){
    $.get(`/api/v1/repos/${userName}/${repoPath}/modelarts/inference-job/${jobID}/log?version_name=${version_name}&lines=50&order=asc`, (data) => {
        $('input[name=end_line]').val(data.EndLine)
        $('input[name=start_line]').val(data.StartLine)
        $(`#log_file${version_name}`).text(data.Content)
    }).fail(function(err) {
        console.log(err);
    });
}
function logScroll(version_name) {

    let container = document.querySelector(`#log${version_name}`)
    let scrollTop = container.scrollTop
    let scrollHeight = container.scrollHeight
    let clientHeight = container.clientHeight
    let scrollLeft = container.scrollLeft
    if((parseInt(scrollTop)  + clientHeight == scrollHeight || parseInt(scrollTop)  + clientHeight +1 == scrollHeight || parseInt(scrollTop)  + clientHeight - 1 == scrollHeight) && (scrollLeft===0)){
        let end_line = $(`#log${version_name} input[name=end_line]`).val()
        $.get(`/api/v1/repos/${userName}/${repoPath}/modelarts/inference-job/${jobID}/log?version_name=${version_name}&base_line=${end_line}&lines=50&order=desc`, (data) => {
            if (data.Lines == 0){
                $(`.message${version_name} #header`).text('您已翻阅至日志底部')
                $(`.message${version_name}`).css('display', 'block')
                setTimeout(function(){
                    $(`.message${version_name}`).css('display', 'none')
                }, 1000)
            }else{
                if(end_line===data.EndLine){
                    return
                }
                else{
                    $(`#log${version_name} input[name=end_line]`).val(data.EndLine)
                    $(`#log${version_name}`).append('<pre>' + data.Content)
                }

            }
        }).fail(function(err) {
            console.log(err);
        });
    }
    if(scrollTop == 0 && scrollLeft==0){
        let start_line = $(`#log${version_name} input[name=start_line]`).val()
        $.get(`/api/v1/repos/${userName}/${repoPath}/modelarts/inference-job/${jobID}/log?version_name=${version_name}&base_line=${start_line}&lines=50&order=asc`, (data) => {
            if (data.Lines == 0){
                $(`.message${version_name} #header`).text('您已翻阅至日志顶部')
                $(`.message${version_name}`).css('display', 'block')
                setTimeout(function(){
                    $(`.message${version_name}`).css('display', 'none')
                }, 1000)
            }else{
                $(`#log${version_name} input[name=start_line]`).val(data.StartLine)   //如果变动就改变所对应的值
                $(`#log${version_name}`).prepend('<pre>' + data.Content)
            }
        }).fail(function(err) {
            console.log(err);
        });
    }
}
function renderSize(value){
    if(null==value||value==''){
        return "0 Bytes";
    }
    var unitArr = new Array("Bytes","KB","MB","GB","TB","PB","EB","ZB","YB");
    var index=0;
    var srcsize = parseFloat(value);
    index=Math.floor(Math.log(srcsize)/Math.log(1024));
    var size =srcsize/Math.pow(1024,index);
    size=size.toFixed(0);//保留的小数位数
    return size+unitArr[index];
}
function loadModelFile(version_name,parents,filename,init){
    parents = parents || ''
    filename = filename || ''
    init = init || ''
    $.get(`/api/v1/repos/${userName}/${repoPath}/modelarts/inference-job/${jobID}/result_list?version_name=${version_name}&parentDir=${parents}`, (data) => {
            $(`#dir_list${version_name}`).empty()
            renderDir(data,version_name)
            if(init==="init"){
                $(`input[name=model${version_name}]`).val("")
                $(`input[name=modelback${version_name}]`).val(version_name)
                $(`#file_breadcrumb${version_name}`).empty()
                let htmlBread = ""
                htmlBread += `<div class='active section'>result</div>`
                htmlBread += "<div class='divider'> / </div>"
                $(`#file_breadcrumb${version_name}`).append(htmlBread)
            }else{
                renderBrend(version_name,parents,filename,init)
            }
        }).fail(function(err) {
            console.log(err,version_name);
        });

}
function renderBrend(version_name,parents,filename,init){
    if(init=="folder"){
        let htmlBrend = ""
        let sectionName=$(`#file_breadcrumb${version_name} .active.section`).text()
        let parents1 = $(`input[name=model${version_name}]`).val()
        let filename1 = $(`input[name=modelback${version_name}]`).val()
        if(parents1===""){
            $(`#file_breadcrumb${version_name} .active.section`).replaceWith(`<a class='section' onclick="loadModelFile('${version_name}','${parents1}','','init')">${sectionName}</a>`)
        }else{
            $(`#file_breadcrumb${version_name} .active.section`).replaceWith(`<a class='section' onclick="loadModelFile('${version_name}','${parents1}','${filename1}')">${sectionName}</a>`)
        }

        htmlBrend += `<div class='active section'>${filename}</div>`
        htmlBrend += "<div class='divider'> / </div>"
        $(`#file_breadcrumb${version_name}`).append(htmlBrend)
        $(`input[name=model${version_name}]`).val(parents)
        $(`input[name=modelback${version_name}]`).val(filename)
    }else{
        $(`input[name=model${version_name}]`).val(parents)
        $(`input[name=modelback${version_name}]`).val(filename)
        $(`#file_breadcrumb${version_name} a.section:contains(${filename})`).nextAll().remove()
        $(`#file_breadcrumb${version_name} a.section:contains(${filename})`).replaceWith(`<div class='active section'>${filename}</div>`)
        $(`#file_breadcrumb${version_name} div.section:contains(${filename})`).append("<div class='divider'> / </div>")
    }

}
function renderDir(data,version_name){
    let html=""
        html += "<div class='ui grid' style='margin:0;'>"
        html += "<div class='row' style='padding: 0;'>"
        html += "<div class='ui sixteen wide column' style='padding:1rem;'>"
        html += "<div class='dir list'>"
        html += "<table id='repo-files-table' class='ui single line table pad20'>"
        html += '<tbody>'
        // html += "</tbody>"
        for(let i=0;i<data.Dirs.length;i++){
            let dirs_size = renderSize(data.Dirs[i].Size)
            html += "<tr>"
            html += "<td class='name six wid'>"
            html += "<span class='truncate'>"
            html += "<span class='octicon octicon-file-directory'>"
            html += "</span>"
            if(data.Dirs[i].IsDir){
                html += `<a  onclick="loadModelFile('${version_name}','${data.Dirs[i].ParenDir}','${data.Dirs[i].FileName}','folder')">`
                html += "<span class='fitted'><i class='folder icon' width='16' height='16' aria-hidden='true'></i>" + data.Dirs[i].FileName + "</span>"
            }else{
                if(downlaodFlag){
                    html += `<a href="${location.href}/result_download?version_name=${version_name}&file_name=${data.Dirs[i].FileName}&parent_dir=${data.Dirs[i].ParenDir}">`
                }
                else{
                    html += `<a class="disabled">`
                }
                html += "<span class='fitted'><i class='file icon' width='16' height='16' aria-hidden='true'></i>" + data.Dirs[i].FileName + "</span>"
            }
            html += '</a>'
            html += "</span>"
            html += "</td>"
            html += "<td class='message seven wide'>"
            if(data.Dirs[i].IsDir){
                html += "<span class='truncate has-emoji'></span>"
            }else{
                html += "<span class='truncate has-emoji'>"+ `${dirs_size}` + "</span>"
            }

            html += "</td>"

            html += "<td class='text right age three wide'>"
            html += "<span class='truncate has-emoji'>" + data.Dirs[i].ModTime + "</span>"
            html += "</td>"
            html += "</tr>"

        }
        html += "</tbody>"
        html += "</table>"
        html += "</div>"
        html += "</div>"
        html += "</div>"
        html += "</div>"
        $(`#dir_list${version_name}`).append(html)
}
function scrollAnimation(dom, currentY, targetY, currentX) {
        let needScrollTop = targetY - currentY;
        let _currentY = currentY;
        setTimeout(() => {
            // 一次调用滑动帧数，每次调用会不一样
            //取总距离的十分之一
            const dist = Math.ceil(needScrollTop / 10);
            _currentY += dist;
            //移动一个十分之一
            dom.scrollTo(currentX || 0, _currentY, 'smooth');
            // 如果移动幅度小于十个像素，直接移动，否则递归调用，实现动画效果
            if (needScrollTop > 10 || needScrollTop < -10) {
                scrollAnimation(dom, _currentY, targetY)
            } else {
                dom.scrollTo(0, targetY, 'smooth')
            }
        }, 1)
    }

    $('.log_top').click(function () {
        // let logContentDom = document.querySelector('.log')
        // if(!logContentDom)
        //     return
        // let version_name = $('.log_top').data('version')
        let version_name = $(this).data('version')
        let logContentDom = document.querySelector(`#log${version_name}`)

        $(`#log_file${version_name}`).siblings('pre').remove()
        $.get(`/api/v1/repos/${userName}/${repoPath}/modelarts/train-job/${jobID}/log?version_name=${version_name}&base_line=&lines=50&order=asc`, (data) => {

            $(`#log${version_name} input[name=end_line]`).val(data.EndLine)   //如果变动就改变所对应的值
            $(`#log${version_name} input[name=start_line]`).val(data.StartLine)
            $(`#log${version_name}`).prepend('<pre>' + data.Content)
            $(`.message${version_name} #header`).text('您已翻阅至日志顶部')
            $(`.message${version_name}`).css('display', 'block')
            setTimeout(function () {
                $(`.message${version_name}`).css('display', 'none')
            }, 1000)
            scrollAnimation(logContentDom, logContentDom.scrollTop, 0);
        })

    })
    $('.log_bottom').click(function (e) {
        let version_name = $(this).data('version')
        let logContentDom = document.querySelector(`#log${version_name}`)
        $(`#log_file${version_name}`).siblings('pre').remove()
        $.get(`/api/v1/repos/${userName}/${repoPath}/modelarts/train-job/${jobID}/log?version_name=${version_name}&base_line=&lines=50&order=desc`, (data) => {

            $(`#log${version_name} input[name=end_line]`).val(data.EndLine)   //如果变动就改变所对应的值
            $(`#log${version_name} input[name=start_line]`).val(data.StartLine)
            $(`#log${version_name}`).append('<pre>' + data.Content)
            $.get(`/api/v1/repos/${userName}/${repoPath}/modelarts/train-job/${jobID}/log?version_name=${version_name}&base_line=${data.EndLine}&lines=50&order=desc`, (data) => {
                if (data.Lines == 0) {
                    $(`.message${version_name} #header`).text('您已翻阅至日志底部')
                    $(`.message${version_name}`).css('display', 'block')
                    setTimeout(function () {
                        $(`.message${version_name}`).css('display', 'none')
                    }, 1000)
                } else {
                    if (end_line === data.EndLine) {
                        return
                    }
                    else {
                        $(`#log${version_name} input[name=end_line]`).val(data.EndLine)
                        $(`#log${version_name}`).append('<pre>' + data.Content)
                    }

                }
            }).fail(function (err) {
                console.log(err);
            });
            scrollAnimation(logContentDom, logContentDom.scrollTop + 1, logContentDom.scrollHeight - logContentDom.clientHeight);
        })
    })
</script>