sxyanzhu
/
AIManage
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update code

main
haha 2024-07-14 23:30:29 +08:00
parent 94ea2f9fa8
commit 9b21964136
5 changed files with 200 additions and 145 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

271
src/views/connection/detail.vue
View File

@ -12,7 +12,7 @@
</td> </td>
<td style="width: 50%;"> <td style="width: 50%;">
<span class="sp-title">模型版本:</span> <span class="sp-title">模型版本:</span>
<span class="sp-text">{{ info.data.connection_version}}</span> <span class="sp-text">{{ info.data.connection_version }}</span>
</td> </td>
</tr> </tr>
<tr> <tr>
@ -49,57 +49,73 @@
<svg-icon icon-class="pause" style="width:20px;height:20px;" /> <svg-icon icon-class="pause" style="width:20px;height:20px;" />
算子互联信息</template> 算子互联信息</template>
<div class="detail-content" style="position: relative;"> <div class="detail-content" style="position: relative;">
<detailFlow ref="operFlow" @nodeClick="doNodeClick"/> <detailFlow ref="operFlow" @nodeClick="doNodeClick" />
<div class="item" v-if="1==2"> <div class="item" v-if="1 == 2">
<div class="div-title"> <div class="div-title">
<i-ep-setting/><span>互联设置</span> <i-ep-setting /><span>互联设置</span>
</div> </div>
<div class="div-chart"> <div class="div-chart">
</div>
</div> </div>
</div> <div class="item node-info" style="margin-left: 100px;" v-if="info.selNode">
<div class="item node-info" style="margin-left: 100px;" v-if="info.selNode"> <div class="div-title">
<div class="div-title"> <i-ep-document /><span>算子基本信息</span>
<i-ep-document/><span>算子基本信息</span> </div>
</div> <div class="div-info">
<div class="div-info">
<div class="row"> <div class="row">
<span class="sp-label">算子名称:</span> <span class="sp-label">算子名称:</span>
<span class="sp-text">{{ info.selNode.operator_name }}</span> <span class="sp-text">{{ info.selNode.operator_name }}</span>
</div> </div>
<div class="row"> <div class="row">
<span class="sp-label">算子版本:</span> <span class="sp-label">算子版本:</span>
<span class="sp-text">{{ info.selNode.operator_version }}</span> <span class="sp-text">{{ info.selNode.operator_version }}</span>
</div> </div>
<div class="row"> <div class="row">
<span class="sp-label">算子说明:</span> <span class="sp-label">算子说明:</span>
<span class="sp-text">{{ info.selNode.operator_desc }}</span> <span class="sp-text">{{ info.selNode.operator_desc }}</span>
</div> </div>
<!-- <div class="row" v-if="info.param.inputs.length > 0">
<div class="row"> <span class="sp-label">输入参数:</span>
<span class="sp-label">输入参数:</span> <div class="div-param">
<span class="sp-text"> <div v-if="info.param.inputs.length > 1" class="div-navs">
size(1024,1080) <span v-for="(it, idx) in info.param.inputs" @click="doInputSelected(idx)" :key="idx"
</span> class="sp-nav" :class="it.selected ? 'active' : ''">{{ it.input_id }}</span>
</div> </div>
<div class="row"> <span class="sp-text sp-paramter scroll">
<span class="sp-label">输出参数:</span> <span v-for="(it, idx) in info.param.inputs " :key="idx" v-show="it.selected"
<span class="sp-text"> class="param-item">
<div>size:(1024,1080)</div> <paramShow :paramInfo="it"></paramShow>
<div>type:nearest</div> </span>
</span> </span>
</div> </div>
--> </div>
<div class="row"> <div class="row" style="margin-top:4px;" v-if="info.param && info.param.outputs">
<span class="sp-label">参数:</span> <span class="sp-label">输出参数:</span>
<span class="sp-text"> <div class="div-param">
<span :key="it.key" style="display: block;" v-for="it in mapToArray(info.selNode.parameters)">{{ it.key }}:{{it.value }}</span> <div v-if="info.param.outputs.length > 1" class="div-navs">
</span> <span v-for="(it, idx) in info.param.outputs" @click="doOutputSelected(idx)"
</div> :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>
</div> </div>
</div> </div>
</el-card> </el-card>
@ -109,43 +125,61 @@
</div> </div>
</template> </template>
<script setup> <script setup>
import detailFlow from './detailFlow.vue'; import detailFlow from './detailFlow.vue';
import ConnApi from '@/api/connection' import ConnApi from '@/api/connection'
import paramShow from './paramShow.vue'
const router = useRouter(); const router = useRouter();
const route =useRoute() const route = useRoute()
const info=reactive({ const info = reactive({
data:{}, data: {},
selNode:null selNode: null,
param: null,
}) })
const operFlow=ref(); const operFlow = ref();
const doBack=()=>{ const doBack = () => {
router.push({path:"/connection/index"}) router.push({ path: "/connection/index" })
} }
const mapToArray=obj=>{ const mapToArray = obj => {
let arr=[]; let arr = [];
for(let k in obj){ for (let k in obj) {
arr.push({ arr.push({
key:k,value:obj[k] key: k, value: obj[k]
}) })
}; };
return arr; return arr;
} }
const loadData=()=>{ const loadData = () => {
let id=route.query.id; let id = route.query.id;
ConnApi.detail(id).then(d=>{ ConnApi.detail(id).then(d => {
info.data=d.data?.data||{}; info.data = d.data?.data || {};
operFlow.value.showFlow(info.data) operFlow.value.showFlow(info.data)
}); });
}; };
const doNodeClick=(node)=>{ const doNodeClick = (node) => {
info.selNode=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(() => { 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> </script>
<style scoped lang='scss'> <style scoped lang='scss'>
.connection-detail { .connection-detail {
@ -154,49 +188,88 @@ onMounted(() => {
display: flex; display: flex;
align-items: center align-items: center
} }
.detail-content{
.item{ .detail-content {
width:300px; .sp-paramter {
&.node-info{ height: 100px;
border: solid 1px #409EFF;
overflow-y: auto;
padding: 4px;
cursor: pointer;
.param-item {
display: block;
}
}
.item {
width: 300px;
&.node-info {
position: absolute; position: absolute;
right:10px; right: 10px;
top:10px; top: 10px;
.div-chart{
.div-chart {
min-height: unset; min-height: unset;
height: auto; height: auto;
} }
.div-info{
.div-info {
min-height: unset; min-height: unset;
height: auto; height: auto;
} }
} }
.div-title{
color:#409EFF; .div-title {
color: #409EFF;
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 12px; font-size: 12px;
} }
.div-chart{
border:solid 1px #409EFF; .div-chart {
border: solid 1px #409EFF;
min-height: 400px; min-height: 400px;
height: 400px; height: 400px;
} }
.div-info{
border:dotted 1px #409EFF; .div-info {
min-height: 400px; border: dotted 1px #409EFF;
padding:10px; min-height: 600px;
height: 600px;
padding: 10px;
font-size: 12px; font-size: 12px;
.row{
.row {
display: flex; display: flex;
.sp-label{
color:#888; .sp-label {
color: #888;
display: block; display: block;
white-space: nowrap; white-space: nowrap;
} }
.sp-text{
.sp-text {
flex-grow: 1; flex-grow: 1;
display: block; 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;
}
}
}
}
} }
} }
} }
@ -205,7 +278,8 @@ onMounted(() => {
.tb-base-info { .tb-base-info {
line-height: 30px; line-height: 30px;
:deep(span){
:deep(span) {
font-size: 14px; font-size: 14px;
} }
} }
@ -213,15 +287,18 @@ onMounted(() => {
:deep(.svg-icon) { :deep(.svg-icon) {
margin-right: 8px; margin-right: 8px;
} }
.card-footer{
position: fixed; .card-footer {
width: calc(100% - 215px); position: fixed;
bottom: 0px; width: calc(100% - 215px);
:deep(.el-card__body){ bottom: 0px;
padding:10px;
.el-pagination{ :deep(.el-card__body) {
justify-content: end; padding: 10px;
.el-pagination {
justify-content: end;
}
} }
}
} }
</style> </style>

8
src/views/connection/detailFlow.vue
View File

@ -85,13 +85,7 @@ defineExpose({
}) })
const initEvent=(lf)=>{ const initEvent=(lf)=>{
lf.on("element:click",node=>{ lf.on("element:click",node=>{
let nodeId=node.data.properties.node; emit("nodeClick",node.data);
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);
}); });
} }
onMounted(() => { onMounted(() => {

9
src/views/connection/edit.vue
View File

@ -151,7 +151,8 @@ const info = reactive({
editObj: null, editObj: null,
}) })
const selNode = reactive({ const selNode = reactive({
info: null info: null,
node:null,
}) })
let lf = ref(null) let lf = ref(null)
let edFlow = ref() let edFlow = ref()
@ -174,7 +175,7 @@ const doEditSuccess = (obj) => {
if(cobjs.length>0){ if(cobjs.length>0){
let cobj=cobjs[0]; let cobj=cobjs[0];
o.attrs.forEach(oo=>{ o.attrs.forEach(oo=>{
if(oo.name=="dataType"){ if(oo.name=="oper_inout_data_type"){
cobj.oper_inout_data_type=oo.value; cobj.oper_inout_data_type=oo.value;
}else{ }else{
cobj[oo.name].value=oo.value; cobj[oo.name].value=oo.value;
@ -189,7 +190,7 @@ const doEditSuccess = (obj) => {
if(cobjs.length>0){ if(cobjs.length>0){
let cobj=cobjs[0]; let cobj=cobjs[0];
o.attrs.forEach(oo=>{ o.attrs.forEach(oo=>{
if(oo.name=="dataType"){ if(oo.name=="oper_inout_data_type"){
cobj.oper_inout_data_type=oo.value; cobj.oper_inout_data_type=oo.value;
}else{ }else{
cobj[oo.name].value=oo.value; cobj[oo.name].value=oo.value;
@ -211,6 +212,7 @@ const doEditSuccess = (obj) => {
tmps[0].outputs = selNode.info.parameters.outputs; tmps[0].outputs = selNode.info.parameters.outputs;
tmps[0].process = selNode.info.parameters.process; tmps[0].process = selNode.info.parameters.process;
} }
edFlow.value.updateNode(selNode.info,selNode.node);
}; };
const doEdit = (obj, title, t) => { const doEdit = (obj, title, t) => {
info.editObj = { info.editObj = {
@ -239,6 +241,7 @@ const doUpdateNode = (data) => {
const doNodeClick = (node) => { const doNodeClick = (node) => {
if (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); let tmps = info.nodes.filter(d => d.id == selNode.info.id);
if (tmps.length == 0) { if (tmps.length == 0) {
info.nodes.push(selNode.info); info.nodes.push(selNode.info);

39
src/views/connection/editFlow.vue
View File

@ -99,7 +99,7 @@ const doUpdateState=()=>{
emit("updateNode",lf.value.getGraphData()) emit("updateNode",lf.value.getGraphData())
} }
const getFLowData=()=>{ const getFlowData=()=>{
return lf.value.getGraphData(); return lf.value.getGraphData();
} }
onMounted(() => { onMounted(() => {
@ -114,39 +114,20 @@ onMounted(() => {
emit("initLf",lf); emit("initLf",lf);
window.lf = lf; window.lf = lf;
logicFlow.render({ logicFlow.render({
nodes: [ nodes: [],
/* { edges: []
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: [
]
}) })
doUpdateState(); doUpdateState();
}); });
const updateNode=(info,node)=>{
lf.value.setProperties(node.data.id,{
data:info
})
}
defineExpose({ defineExpose({
doEdit, doEdit,
getFLowData getFlowData,
updateNode
}) })
</script> </script>
<style scoped lang='scss'> <style scoped lang='scss'>

6
src/views/connection/editParamDlg.vue
View File

@ -12,7 +12,7 @@
<div v-for="(item, index) in it.attrs" :key="index" class="div-item"> <div v-for="(item, index) in it.attrs" :key="index" class="div-item">
<span class="sp-label">{{ item.name }}</span> <span class="sp-label">{{ item.name }}</span>
<span class="sp-value"> <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-select v-model="item.value" v-else>
<el-option v-for="(opt, oidx) in item.options" :key="oidx" :label="opt" :value="opt" /> <el-option v-for="(opt, oidx) in item.options" :key="oidx" :label="opt" :value="opt" />
</el-select> </el-select>
@ -98,7 +98,7 @@ const showDialog = (opt) => {
if (o.oper_inout_data_type) { if (o.oper_inout_data_type) {
attr.attrs.push( attr.attrs.push(
{ {
name: "dataType", name: "oper_inout_data_type",
value: o.oper_inout_data_type, value: o.oper_inout_data_type,
oldValue:o.oper_inout_data_type, oldValue:o.oper_inout_data_type,
type: "input", type: "input",
@ -159,7 +159,7 @@ defineExpose({
align-items: center; align-items: center;
margin-bottom: 10px; margin-bottom: 10px;
.sp-label{ .sp-label{
width:100px; width:140px;
text-align: right; text-align: right;
margin-right: 10px; margin-right: 10px;
} }