update code
parent
94ea2f9fa8
commit
9b21964136
|
|
@ -12,7 +12,7 @@
|
|||
</td>
|
||||
<td style="width: 50%;">
|
||||
<span class="sp-title">模型版本:</span>
|
||||
<span class="sp-text">{{ info.data.connection_version}}</span>
|
||||
<span class="sp-text">{{ info.data.connection_version }}</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -49,57 +49,73 @@
|
|||
<svg-icon icon-class="pause" style="width:20px;height:20px;" />
|
||||
算子互联信息</template>
|
||||
<div class="detail-content" style="position: relative;">
|
||||
<detailFlow ref="operFlow" @nodeClick="doNodeClick"/>
|
||||
|
||||
<div class="item" v-if="1==2">
|
||||
<div class="div-title">
|
||||
<i-ep-setting/><span>互联设置</span>
|
||||
<detailFlow ref="operFlow" @nodeClick="doNodeClick" />
|
||||
|
||||
<div class="item" v-if="1 == 2">
|
||||
<div class="div-title">
|
||||
<i-ep-setting /><span>互联设置</span>
|
||||
</div>
|
||||
<div class="div-chart">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="div-chart">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="item node-info" style="margin-left: 100px;" v-if="info.selNode">
|
||||
<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">{{ info.selNode.operator_name }}</span>
|
||||
<div class="item node-info" style="margin-left: 100px;" v-if="info.selNode">
|
||||
<div class="div-title">
|
||||
<i-ep-document /><span>算子基本信息</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span class="sp-label">算子版本:</span>
|
||||
<span class="sp-text">{{ info.selNode.operator_version }}</span>
|
||||
<div class="div-info">
|
||||
|
||||
<div class="row">
|
||||
<span class="sp-label">算子名称:</span>
|
||||
<span class="sp-text">{{ info.selNode.operator_name }}</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span class="sp-label">算子版本:</span>
|
||||
<span class="sp-text">{{ info.selNode.operator_version }}</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span class="sp-label">算子说明:</span>
|
||||
<span class="sp-text">{{ info.selNode.operator_desc }}</span>
|
||||
</div>
|
||||
<div class="row" v-if="info.param.inputs.length > 0">
|
||||
<span class="sp-label">输入参数:</span>
|
||||
<div class="div-param">
|
||||
<div v-if="info.param.inputs.length > 1" class="div-navs">
|
||||
<span v-for="(it, idx) in info.param.inputs" @click="doInputSelected(idx)" :key="idx"
|
||||
class="sp-nav" :class="it.selected ? 'active' : ''">{{ it.input_id }}</span>
|
||||
</div>
|
||||
<span class="sp-text sp-paramter scroll">
|
||||
<span v-for="(it, idx) in info.param.inputs " :key="idx" v-show="it.selected"
|
||||
class="param-item">
|
||||
<paramShow :paramInfo="it"></paramShow>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin-top:4px;" v-if="info.param && info.param.outputs">
|
||||
<span class="sp-label">输出参数:</span>
|
||||
<div class="div-param">
|
||||
<div v-if="info.param.outputs.length > 1" class="div-navs">
|
||||
<span v-for="(it, idx) in info.param.outputs" @click="doOutputSelected(idx)"
|
||||
:key="idx" class="sp-nav" :class="it.selected ? 'active' : ''">{{ it.output_id
|
||||
}}</span>
|
||||
</div>
|
||||
<span class="sp-text sp-paramter scroll">
|
||||
<span v-for="(it, idx) in info.param.outputs " :key="idx" v-show="it.selected"
|
||||
class="param-item">
|
||||
<paramShow :paramInfo="it"></paramShow>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin-top:4px;" v-if="info.param && info.param.process">
|
||||
<span class="sp-label">处理参数:</span>
|
||||
<span class="sp-text sp-paramter scroll" v-if="info.param.process">
|
||||
<paramShow :paramInfo="info.param.process"></paramShow>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="row">
|
||||
<span class="sp-label">算子说明:</span>
|
||||
<span class="sp-text">{{ info.selNode.operator_desc }}</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 class="row">
|
||||
<span class="sp-label">参数:</span>
|
||||
<span class="sp-text">
|
||||
<span :key="it.key" style="display: block;" v-for="it in mapToArray(info.selNode.parameters)">{{ it.key }}:{{it.value }}</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
|
@ -109,43 +125,61 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<script setup>
|
||||
import detailFlow from './detailFlow.vue';
|
||||
import ConnApi from '@/api/connection'
|
||||
import paramShow from './paramShow.vue'
|
||||
const router = useRouter();
|
||||
const route =useRoute()
|
||||
const info=reactive({
|
||||
data:{},
|
||||
selNode:null
|
||||
const route = useRoute()
|
||||
const info = reactive({
|
||||
data: {},
|
||||
selNode: null,
|
||||
param: null,
|
||||
})
|
||||
const operFlow=ref();
|
||||
const operFlow = ref();
|
||||
|
||||
const doBack=()=>{
|
||||
router.push({path:"/connection/index"})
|
||||
const doBack = () => {
|
||||
router.push({ path: "/connection/index" })
|
||||
}
|
||||
const mapToArray=obj=>{
|
||||
let arr=[];
|
||||
for(let k in obj){
|
||||
const mapToArray = obj => {
|
||||
let arr = [];
|
||||
for (let k in obj) {
|
||||
arr.push({
|
||||
key:k,value:obj[k]
|
||||
key: k, value: obj[k]
|
||||
})
|
||||
};
|
||||
return arr;
|
||||
}
|
||||
const loadData=()=>{
|
||||
let id=route.query.id;
|
||||
ConnApi.detail(id).then(d=>{
|
||||
info.data=d.data?.data||{};
|
||||
const loadData = () => {
|
||||
let id = route.query.id;
|
||||
ConnApi.detail(id).then(d => {
|
||||
info.data = d.data?.data || {};
|
||||
operFlow.value.showFlow(info.data)
|
||||
});
|
||||
};
|
||||
const doNodeClick=(node)=>{
|
||||
info.selNode=node;
|
||||
const doNodeClick = (node) => {
|
||||
info.selNode = node?.properties?.data || {};
|
||||
info.param = node?.properties?.data?.parameters || { inputs: [], outputs: [], process: {} }
|
||||
info.param.inputs.forEach((d, idx) => {
|
||||
d.selected = idx == 0;
|
||||
});
|
||||
info.param.outputs.forEach((d, idx) => {
|
||||
d.selected = idx == 0;
|
||||
});
|
||||
}
|
||||
onMounted(() => {
|
||||
loadData();
|
||||
loadData();
|
||||
});
|
||||
|
||||
const doInputSelected=idx=>{
|
||||
info.param.inputs.forEach((it,i)=>{
|
||||
it.selected=i==idx;
|
||||
});
|
||||
}
|
||||
const doOutputSelected=idx=>{
|
||||
info.param.outputs.forEach((it,i)=>{
|
||||
it.selected=i==idx;
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<style scoped lang='scss'>
|
||||
.connection-detail {
|
||||
|
|
@ -154,58 +188,98 @@ onMounted(() => {
|
|||
display: flex;
|
||||
align-items: center
|
||||
}
|
||||
.detail-content{
|
||||
.item{
|
||||
width:300px;
|
||||
&.node-info{
|
||||
|
||||
.detail-content {
|
||||
.sp-paramter {
|
||||
height: 100px;
|
||||
border: solid 1px #409EFF;
|
||||
overflow-y: auto;
|
||||
padding: 4px;
|
||||
cursor: pointer;
|
||||
|
||||
.param-item {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 300px;
|
||||
|
||||
&.node-info {
|
||||
position: absolute;
|
||||
right:10px;
|
||||
top:10px;
|
||||
.div-chart{
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
|
||||
.div-chart {
|
||||
min-height: unset;
|
||||
height: auto;
|
||||
}
|
||||
.div-info{
|
||||
|
||||
.div-info {
|
||||
min-height: unset;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.div-title{
|
||||
color:#409EFF;
|
||||
|
||||
.div-title {
|
||||
color: #409EFF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
.div-chart{
|
||||
border:solid 1px #409EFF;
|
||||
|
||||
.div-chart {
|
||||
border: solid 1px #409EFF;
|
||||
min-height: 400px;
|
||||
height: 400px;
|
||||
}
|
||||
.div-info{
|
||||
border:dotted 1px #409EFF;
|
||||
min-height: 400px;
|
||||
padding:10px;
|
||||
font-size: 12px;
|
||||
.row{
|
||||
|
||||
.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;
|
||||
|
||||
.sp-label {
|
||||
color: #888;
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.sp-text{
|
||||
|
||||
.sp-text {
|
||||
flex-grow: 1;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.div-param {
|
||||
.div-navs {
|
||||
.sp-nav {
|
||||
display: inline-block;
|
||||
line-height: 24px;
|
||||
padding: 0px 12px;
|
||||
cursor: pointer;
|
||||
|
||||
&.active {
|
||||
background-color: #409EFF;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tb-base-info {
|
||||
.tb-base-info {
|
||||
line-height: 30px;
|
||||
:deep(span){
|
||||
|
||||
:deep(span) {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
|
@ -213,15 +287,18 @@ onMounted(() => {
|
|||
:deep(.svg-icon) {
|
||||
margin-right: 8px;
|
||||
}
|
||||
.card-footer{
|
||||
position: fixed;
|
||||
width: calc(100% - 215px);
|
||||
bottom: 0px;
|
||||
:deep(.el-card__body){
|
||||
padding:10px;
|
||||
.el-pagination{
|
||||
justify-content: end;
|
||||
|
||||
.card-footer {
|
||||
position: fixed;
|
||||
width: calc(100% - 215px);
|
||||
bottom: 0px;
|
||||
|
||||
:deep(.el-card__body) {
|
||||
padding: 10px;
|
||||
|
||||
.el-pagination {
|
||||
justify-content: end;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -85,13 +85,7 @@ defineExpose({
|
|||
})
|
||||
const initEvent=(lf)=>{
|
||||
lf.on("element:click",node=>{
|
||||
let nodeId=node.data.properties.node;
|
||||
let nd=null;
|
||||
if(nodeId){
|
||||
let tmps=info.opers.filter(d=>d.operator_id==nodeId);
|
||||
nd=tmps.length>0?tmps[0]:null;
|
||||
}
|
||||
emit("nodeClick",nd);
|
||||
emit("nodeClick",node.data);
|
||||
});
|
||||
}
|
||||
onMounted(() => {
|
||||
|
|
|
|||
|
|
@ -151,7 +151,8 @@ const info = reactive({
|
|||
editObj: null,
|
||||
})
|
||||
const selNode = reactive({
|
||||
info: null
|
||||
info: null,
|
||||
node:null,
|
||||
})
|
||||
let lf = ref(null)
|
||||
let edFlow = ref()
|
||||
|
|
@ -174,7 +175,7 @@ const doEditSuccess = (obj) => {
|
|||
if(cobjs.length>0){
|
||||
let cobj=cobjs[0];
|
||||
o.attrs.forEach(oo=>{
|
||||
if(oo.name=="dataType"){
|
||||
if(oo.name=="oper_inout_data_type"){
|
||||
cobj.oper_inout_data_type=oo.value;
|
||||
}else{
|
||||
cobj[oo.name].value=oo.value;
|
||||
|
|
@ -189,7 +190,7 @@ const doEditSuccess = (obj) => {
|
|||
if(cobjs.length>0){
|
||||
let cobj=cobjs[0];
|
||||
o.attrs.forEach(oo=>{
|
||||
if(oo.name=="dataType"){
|
||||
if(oo.name=="oper_inout_data_type"){
|
||||
cobj.oper_inout_data_type=oo.value;
|
||||
}else{
|
||||
cobj[oo.name].value=oo.value;
|
||||
|
|
@ -211,6 +212,7 @@ const doEditSuccess = (obj) => {
|
|||
tmps[0].outputs = selNode.info.parameters.outputs;
|
||||
tmps[0].process = selNode.info.parameters.process;
|
||||
}
|
||||
edFlow.value.updateNode(selNode.info,selNode.node);
|
||||
};
|
||||
const doEdit = (obj, title, t) => {
|
||||
info.editObj = {
|
||||
|
|
@ -238,7 +240,8 @@ const doUpdateNode = (data) => {
|
|||
}
|
||||
const doNodeClick = (node) => {
|
||||
if (node) {
|
||||
selNode.info = node.data.properties.data;
|
||||
selNode.info = node.data.properties.data;
|
||||
selNode.node=node;
|
||||
let tmps = info.nodes.filter(d => d.id == selNode.info.id);
|
||||
if (tmps.length == 0) {
|
||||
info.nodes.push(selNode.info);
|
||||
|
|
|
|||
|
|
@ -99,7 +99,7 @@ const doUpdateState=()=>{
|
|||
emit("updateNode",lf.value.getGraphData())
|
||||
}
|
||||
|
||||
const getFLowData=()=>{
|
||||
const getFlowData=()=>{
|
||||
return lf.value.getGraphData();
|
||||
}
|
||||
onMounted(() => {
|
||||
|
|
@ -114,39 +114,20 @@ onMounted(() => {
|
|||
emit("initLf",lf);
|
||||
window.lf = lf;
|
||||
logicFlow.render({
|
||||
nodes: [
|
||||
/* {
|
||||
id: 'node_1',
|
||||
type: 'ai-node',
|
||||
x: 150,
|
||||
y: 40,
|
||||
fill:'#409effaa',
|
||||
text: '图像缩放',
|
||||
properties:{
|
||||
node:201
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'node_2',
|
||||
type: 'ai-node',
|
||||
x: 150,
|
||||
y: 540,
|
||||
fill:'#3CB371',
|
||||
text: '目标绘图',
|
||||
properties:{
|
||||
node:900
|
||||
}
|
||||
}*/
|
||||
],
|
||||
edges: [
|
||||
|
||||
]
|
||||
nodes: [],
|
||||
edges: []
|
||||
})
|
||||
doUpdateState();
|
||||
});
|
||||
const updateNode=(info,node)=>{
|
||||
lf.value.setProperties(node.data.id,{
|
||||
data:info
|
||||
})
|
||||
}
|
||||
defineExpose({
|
||||
doEdit,
|
||||
getFLowData
|
||||
getFlowData,
|
||||
updateNode
|
||||
})
|
||||
</script>
|
||||
<style scoped lang='scss'>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
<div v-for="(item, index) in it.attrs" :key="index" class="div-item">
|
||||
<span class="sp-label">{{ item.name }}</span>
|
||||
<span class="sp-value">
|
||||
<el-input v-model="item.value" v-if="item.type == 'input'" @blur="doCheckInput(item)"/>
|
||||
<el-input v-model="item.value" :disabled="item.name=='oper_inout_data_type'" v-if="item.type == 'input'" @blur="doCheckInput(item)"/>
|
||||
<el-select v-model="item.value" v-else>
|
||||
<el-option v-for="(opt, oidx) in item.options" :key="oidx" :label="opt" :value="opt" />
|
||||
</el-select>
|
||||
|
|
@ -98,7 +98,7 @@ const showDialog = (opt) => {
|
|||
if (o.oper_inout_data_type) {
|
||||
attr.attrs.push(
|
||||
{
|
||||
name: "dataType",
|
||||
name: "oper_inout_data_type",
|
||||
value: o.oper_inout_data_type,
|
||||
oldValue:o.oper_inout_data_type,
|
||||
type: "input",
|
||||
|
|
@ -159,7 +159,7 @@ defineExpose({
|
|||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
.sp-label{
|
||||
width:100px;
|
||||
width:140px;
|
||||
text-align: right;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue