AIManage/src/views/protocol/edit.vue

<template>
    <div class="app-container protocol-edit">
        <el-card>
            <template #header>
                互联信息</template>

            <el-form ref="uploadForm" :model="upForm" label-width="120">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="模型名称">
                            <el-input disabled v-model="upForm.name" placeholder="目标分类模型" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="模型版本">
                            <el-input disabled v-model="upForm.ver" placeholder="v1.0" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="互联名称">
                            <el-input v-model="upForm.netName" placeholder="请输入互联名称" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="标签">
                            <el-input v-model="upForm.label" placeholder="请输入标签" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="互联说明">
                            <el-input v-model="upForm.netName" type="textarea" style="width:100%;" :rows="4"
                                placeholder="请输入互联说明" />
                        </el-form-item>
                    </el-col>

                </el-row>
            </el-form>
        </el-card>
        <el-card style="margin-top: 12px;margin-bottom: 80px;">
            <template #header>算子互联</template>
            <div class="edit-content">
                <div class="item" style="position: relative;">
                    <div class="line-arrow" style="position: absolute;left: 270px;width: 80px;border-bottom: solid 1px #409eff;top: 250px;">
                        <i-ep-arrow-right style="color:#409eff;position: absolute;right: -7px;top: -9px;"/>
                    </div>
                    <div class="div-title">
                        <i-ep-office-building/><span>可用算子</span>
                    </div>
                    <div class="div-nodes">
                       <nodePanel :lf="lf"  ref="ndPanel"/>
                    </div>
                </div>
                <div  class="item" style="margin-left: 100px;">
                <div class="div-title">
                    <i-ep-setting/><span>互联设置</span>
                </div>
                <div class="div-chart">
                    <editFlow @initLf="doInitLf" @updateNode="doUpdateNode"/>
                </div>
                </div>
                <div  class="item" style="margin-left: 100px;">
                <div class="div-title">
                    <i-ep-document/><span>算子基本信息</span>
                </div>
                <div class="div-info">
                    <div class="row">
                        <span class="sp-label">算子名称:</span>
                        <span class="sp-text">图像缩放</span>
                    </div>
                    <div class="row">
                        <span class="sp-label">算子版本:</span>
                        <span class="sp-text">1.0</span>
                    </div>
                    <div class="row">
                        <span class="sp-label">算子说明:</span>
                        <span class="sp-text">算子说明算子说明算子说明算子说明算子说明算子说明算子说明算子说明</span>
                    </div>
                    <div class="row">
                        <span class="sp-label">输入参数:</span>
                        <span class="sp-text">
                            size(1024,1080)
                        </span>
                    </div>
                    <div class="row">
                        <span class="sp-label">输出参数:</span>
                        <span class="sp-text">
                            <div>size:(1024,1080)</div>
                            <div>type:nearest</div>
                        </span>
                    </div>
                </div>
                </div>
            </div>

        </el-card>
        <el-card class="card-footer">
            <el-button type="primary" @click="doSave">保存</el-button>
            <el-button  @click="doCancel">取消</el-button>
          
        </el-card>
    </div>
</template>

<script lang='ts' setup>
import nodePanel from './nodePanel.vue'
import editFlow from './editFlow.vue'
const router = useRouter();
const uploadForm = ref(ElForm)
const upForm = reactive({
    name: ''
})
let lf = ref(null)
const ndPanel=ref()
const doUpdateNode=(data:any)=>{
    ndPanel.value.updateNode(data)
}
const doInitLf=(o:any)=>{
    lf.value=o.value
}
const doSave=()=>{
    router.replace({path:"/protocol/index"})
}
const doCancel=()=>{
    router.replace({path:"/protocol/index"})
}
</script>
<style scoped lang='scss'>
.protocol-edit{
    :deep(.el-card__header) {
        padding: 8px 12px;
        display: flex;
        align-items: center;
        font-weight: bold;
    }
}
.card-footer{
  position: fixed;
  width: calc(100% - 215px);
  bottom: 0px;
  :deep(.el-card__body){
    padding:10px;
    .el-pagination{
      justify-content: end;
    }
  }
}
.edit-content{
        display: flex;
        justify-content: center;
        .item{
            width:300px;
            .div-title{
                color:#409EFF;
                display: flex;
                align-items: center;
                font-size: 12px;
            }
            .div-nodes{
                border:solid 1px #409EFF;
                min-height: 600px;
                height: 600px;
                :deep(.el-tabs--border-card){
                    border:none;
                }
            }
            .div-chart{
                border:solid 1px #409EFF;
                min-height: 600px;
                height: 600px;
            }
            .div-info{
                border:dotted 1px #409EFF;
                min-height: 600px;    
                height:600px;
                padding:10px;
                font-size: 12px;            
                .row{
                    display: flex;
                    .sp-label{
                        color:#888;
                        display: block;                        
                        white-space: nowrap;
                    }
                    .sp-text{
                        flex-grow: 1;
                        display: block;
                    }
                }
            }
        }
    }
</style>