update code
parent
f4668da448
commit
4bcf5f9fef
|
|
@ -44,25 +44,27 @@
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
</el-card>
|
</el-card>
|
||||||
<el-card style="margin-top: 12px;">
|
<el-card style="margin-top: 12px;margin-bottom: 60px;">
|
||||||
<template #header>
|
<template #header>
|
||||||
<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">
|
<div class="detail-content" style="position: relative;">
|
||||||
<div class="item">
|
<detailFlow ref="operFlow" @nodeClick="doNodeClick"/>
|
||||||
|
|
||||||
|
<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">
|
||||||
<detailFlow ref="operFlow" @nodeClick="doNodeClick"/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="item" style="margin-left: 100px;">
|
<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">
|
||||||
<template v-if="info.selNode">
|
|
||||||
<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>
|
||||||
|
|
@ -96,7 +98,7 @@
|
||||||
<span :key="it.key" style="display: block;" v-for="it in mapToArray(info.selNode.parameters)">{{ it.key }}:{{it.value }}</span>
|
<span :key="it.key" style="display: block;" v-for="it in mapToArray(info.selNode.parameters)">{{ it.key }}:{{it.value }}</span>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -153,10 +155,21 @@ onMounted(() => {
|
||||||
align-items: center
|
align-items: center
|
||||||
}
|
}
|
||||||
.detail-content{
|
.detail-content{
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
.item{
|
.item{
|
||||||
width:300px;
|
width:300px;
|
||||||
|
&.node-info{
|
||||||
|
position: absolute;
|
||||||
|
right:10px;
|
||||||
|
top:10px;
|
||||||
|
.div-chart{
|
||||||
|
min-height: unset;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.div-info{
|
||||||
|
min-height: unset;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
.div-title{
|
.div-title{
|
||||||
color:#409EFF;
|
color:#409EFF;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
|
||||||
|
|
@ -79,8 +79,9 @@ const showFlow=(o)=>{
|
||||||
let data={nodes:info.nodes,edges:info.edges};
|
let data={nodes:info.nodes,edges:info.edges};
|
||||||
lf.value.render(data)
|
lf.value.render(data)
|
||||||
}
|
}
|
||||||
|
|
||||||
defineExpose({
|
defineExpose({
|
||||||
showFlow
|
showFlow,
|
||||||
})
|
})
|
||||||
const initEvent=(lf)=>{
|
const initEvent=(lf)=>{
|
||||||
lf.on("element:click",node=>{
|
lf.on("element:click",node=>{
|
||||||
|
|
@ -100,44 +101,19 @@ onMounted(() => {
|
||||||
})
|
})
|
||||||
initEvent(logicFlow);
|
initEvent(logicFlow);
|
||||||
lf.value = logicFlow
|
lf.value = logicFlow
|
||||||
window.lf = lf;
|
window.lf = lf;
|
||||||
/*
|
|
||||||
const data = {
|
|
||||||
"nodes": [
|
|
||||||
{ "id": "node_1", "type": "ai-node",fill:'#409effaa',"x": 150, "y": 20, "properties": { "node": 1, "ui": "node-ai" }, "text": { "x": 160, "y": 20, "value": "图像缩放" } },
|
|
||||||
{ "id": "node_2", "type": "ai-node",fill:'#3CB371', "x": 150, "y": 290, "properties": { "node": 2, "ui": "node-ai" }, "text": { "x": 160, "y": 290, "value": "目标绘图" } },
|
|
||||||
{ "id": "node_3", fill:'#409effaa',"type": "ai-node", "x": 150, "y": 90, "properties": { "node": 3, "ui": "node-ai" }, "text": { "x": 160, "y": 90, "value": "RGB12图像格式转换" } },
|
|
||||||
{ "id": "node_4",fill:'#ccccccaa', "type": "ai-node", "x": 150, "y": 150, "properties": { "node": 4, "ui": "node-ai" }, "text": { "x": 160, "y": 150, "value": "VIT推理算子1" } },
|
|
||||||
{ "id": "node_5", fill:'#ccccccaa',"type": "ai-node", "x": 150, "y": 220, "properties": { "node": 5, "ui": "node-ai" }, "text": { "x": 160, "y": 220, "value": "VIT推理算子2" } }],
|
|
||||||
"edges":
|
|
||||||
[{ "id": "54555484-e393-4a43-8b51-1f407dd42c11", "type": "polyline", "sourceNodeId": "node_1", "targetNodeId": "node_3", "startPoint": { "x": 150, "y": 35 },
|
|
||||||
"endPoint": { "x": 150, "y": 75 },
|
|
||||||
"properties": {},
|
|
||||||
"pointsList": [{ "x": 150, "y": 35 }, { "x": 150, "y": 65 }, { "x": 150, "y": 65 }, { "x": 150, "y": 45 }, { "x": 150, "y": 45 }, { "x": 150, "y": 75 }] },
|
|
||||||
{ "id": "46e53f10-8997-42fc-9107-9e0083670ce8", "type": "polyline", "sourceNodeId": "node_3", "targetNodeId": "node_4",
|
|
||||||
"startPoint": { "x": 150, "y": 105 }, "endPoint": { "x": 150, "y": 135 },
|
|
||||||
"properties": {},
|
|
||||||
"pointsList": [{ "x": 150, "y": 105 }, { "x": 150, "y": 135 }, { "x": 150, "y": 135 }, { "x": 150, "y": 105 }, { "x": 150, "y": 105 }, { "x": 150, "y": 135 }] },
|
|
||||||
{ "id": "7d5407fa-01f5-457c-8504-f5f464dd254f", "type": "polyline", "sourceNodeId": "node_4", "targetNodeId": "node_5",
|
|
||||||
"startPoint": { "x": 150, "y": 165 }, "endPoint": { "x": 150, "y": 205 },
|
|
||||||
"properties": {},
|
|
||||||
"pointsList": [{ "x": 150, "y": 165 }, { "x": 150, "y": 195 }, { "x": 150, "y": 195 }, { "x": 150, "y": 175 }, { "x": 150, "y": 175 }, { "x": 150, "y": 205 }] },
|
|
||||||
{ "id": "4ece042b-faf1-4e95-8213-ee1c9b6060c5", "type": "polyline", "sourceNodeId": "node_5", "targetNodeId": "node_2",
|
|
||||||
"startPoint": { "x": 150, "y": 235 }, "endPoint": { "x": 150, "y": 275 },
|
|
||||||
"properties": {},
|
|
||||||
"pointsList": [{ "x": 150, "y": 235 }, { "x": 150, "y": 265 }, { "x": 150, "y": 265 }, { "x": 150, "y": 245 }, { "x": 150, "y": 245 }, { "x": 150, "y": 275 }] }] }
|
|
||||||
logicFlow.render(data)
|
|
||||||
*/
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<style scoped lang='scss'>
|
<style scoped lang='scss'>
|
||||||
.flow-demo1 {
|
.flow-demo1 {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
padding: 20px 0px 10px;
|
padding: 20px 0px 10px;
|
||||||
|
|
||||||
.viewport {
|
.viewport {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
height: 600px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -8,31 +8,31 @@
|
||||||
<el-row>
|
<el-row>
|
||||||
<el-col :span="12">
|
<el-col :span="12">
|
||||||
<el-form-item label="模型名称">
|
<el-form-item label="模型名称">
|
||||||
<el-input disabled v-model="upForm.name" placeholder="目标分类模型" />
|
<el-input disabled v-model="upForm.model_name" placeholder="目标分类模型" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="12">
|
<el-col :span="12">
|
||||||
<el-form-item label="模型版本">
|
<el-form-item label="模型版本">
|
||||||
<el-input disabled v-model="upForm.ver" placeholder="v1.0" />
|
<el-input disabled v-model="upForm.model_version" placeholder="v1.0" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
<el-row>
|
<el-row>
|
||||||
<el-col :span="12">
|
<el-col :span="12">
|
||||||
<el-form-item label="互联名称">
|
<el-form-item label="互联名称">
|
||||||
<el-input v-model="upForm.netName" placeholder="请输入互联名称" />
|
<el-input v-model="upForm.connection_name" placeholder="请输入互联名称" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="12">
|
<el-col :span="12">
|
||||||
<el-form-item label="标签">
|
<el-form-item label="标签">
|
||||||
<el-input v-model="upForm.label" placeholder="请输入标签" />
|
<el-input v-model="upForm.connection_label" placeholder="请输入标签" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
<el-row>
|
<el-row>
|
||||||
<el-col :span="24">
|
<el-col :span="24">
|
||||||
<el-form-item label="互联说明">
|
<el-form-item label="互联说明">
|
||||||
<el-input v-model="upForm.netName" type="textarea" style="width:100%;" :rows="4"
|
<el-input v-model="upForm.connection_desc" type="textarea" style="width:100%;" :rows="4"
|
||||||
placeholder="请输入互联说明" />
|
placeholder="请输入互联说明" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
|
|
@ -40,96 +40,145 @@
|
||||||
</el-row>
|
</el-row>
|
||||||
</el-form>
|
</el-form>
|
||||||
</el-card>
|
</el-card>
|
||||||
<el-card style="margin-top: 12px;margin-bottom: 80px;">
|
<el-card style="margin-top: 12px;margin-bottom: 80px;" class="flow-card">
|
||||||
<template #header>算子互联</template>
|
<template #header>算子互联</template>
|
||||||
<div class="edit-content">
|
<div class="edit-content" style="position: relative;">
|
||||||
<div class="item" style="position: relative;">
|
<div class="item" style="position: relative;width:380px;">
|
||||||
<div class="line-arrow" style="position: absolute;left: 100%;margin-left:10px; width: 80px;border-bottom: solid 1px #409eff;top: 250px;">
|
<div class="line-arrow"
|
||||||
<i-ep-arrow-right style="color:#409eff;position: absolute;right: -7px;top: -9px;"/>
|
style="position: absolute;left: 100%;margin-left:10px; width: 80px;border-bottom: solid 1px #409eff;top: 250px;">
|
||||||
|
<i-ep-arrow-right style="color:#409eff;position: absolute;right: -7px;top: -9px;" />
|
||||||
</div>
|
</div>
|
||||||
<div class="div-title">
|
<div class="div-title" style="display: none;">
|
||||||
<i-ep-office-building/><span>可用算子</span>
|
<i-ep-office-building /><span>可用算子</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="div-nodes">
|
<div class="div-nodes">
|
||||||
<nodePanel :lf="lf" ref="ndPanel"/>
|
<nodePanel :lf="lf" ref="ndPanel" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="item" style="margin-left: 100px;">
|
<div style="flex-grow: 1;">
|
||||||
<div class="div-title">
|
<editFlow ref="edFlow" @initLf="doInitLf" @updateNode="doUpdateNode" @nodeClick="doNodeClick" />
|
||||||
<i-ep-setting/><span>互联设置</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="div-chart">
|
<div class="item flow-info" style="margin-left: 100px;" v-if="selNode.info">
|
||||||
<editFlow @initLf="doInitLf" @updateNode="doUpdateNode"/>
|
<div class="div-title">
|
||||||
</div>
|
<i-ep-document /><span>算子基本信息</span>
|
||||||
</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>
|
||||||
<div class="row">
|
<div class="div-info">
|
||||||
<span class="sp-label">算子版本:</span>
|
<div class="row">
|
||||||
<span class="sp-text">1.0</span>
|
<span class="sp-label">算子名称:</span>
|
||||||
|
<span class="sp-text">{{ selNode.info.operator_name }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<span class="sp-label">算子版本:</span>
|
||||||
|
<span class="sp-text">{{ selNode.info.operator_version }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<span class="sp-label">算子说明:</span>
|
||||||
|
<span class="sp-text">{{ selNode.info.operator_desc }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<span class="sp-label">输入参数:</span>
|
||||||
|
<span class="sp-text">
|
||||||
|
<el-input v-model="selNode.info.inputParams" type="textarea" style="width:100%;"
|
||||||
|
:rows="4" @input="doFlowInput" />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="row" style="margin-top:4px;">
|
||||||
|
<span class="sp-label">输出参数:</span>
|
||||||
|
<span class="sp-text">
|
||||||
|
<el-input v-model="selNode.info.outputParams" type="textarea" style="width:100%;"
|
||||||
|
:rows="4" @input="doFlowInput" />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
</div>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</el-card>
|
</el-card>
|
||||||
<el-card class="card-footer">
|
<el-card class="card-footer">
|
||||||
<el-button type="primary" @click="doSave">保存</el-button>
|
<el-button type="primary" @click="doSave">保存</el-button>
|
||||||
<el-button @click="doCancel">取消</el-button>
|
<el-button @click="doCancel">取消</el-button>
|
||||||
|
|
||||||
</el-card>
|
</el-card>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang='ts' setup>
|
<script setup>
|
||||||
import nodePanel from './nodePanel.vue'
|
import nodePanel from './nodePanel.vue'
|
||||||
import editFlow from './editFlow.vue'
|
import editFlow from './editFlow.vue'
|
||||||
|
import ConnApi from '@/api/connection'
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const uploadForm = ref(ElForm)
|
const uploadForm = ref(ElForm)
|
||||||
|
const route = useRoute()
|
||||||
const upForm = reactive({
|
const upForm = reactive({
|
||||||
name: ''
|
model_name: '',
|
||||||
|
model_version: '',
|
||||||
|
connection_name: '',
|
||||||
|
connection_label: '',
|
||||||
|
connection_desc: ''
|
||||||
|
});
|
||||||
|
const info = reactive({
|
||||||
|
connInfo: null,
|
||||||
|
nodes: [],
|
||||||
|
})
|
||||||
|
const selNode = reactive({
|
||||||
|
info: null
|
||||||
})
|
})
|
||||||
let lf = ref(null)
|
let lf = ref(null)
|
||||||
const ndPanel=ref()
|
let edFlow = ref()
|
||||||
const doUpdateNode=(data:any)=>{
|
const ndPanel = ref()
|
||||||
ndPanel.value.updateNode(data)
|
const doFlowInput = () => {
|
||||||
|
let tmps = info.nodes.filter(d => d.id == selNode.info.id);
|
||||||
|
if (tmps.length == 0) {
|
||||||
|
info.nodes.push(selNode.info)
|
||||||
|
} else {
|
||||||
|
tmps[0].inputParams = selNode.info.inputParams;
|
||||||
|
tmps[0].outputParams = selNode.info.outputParams;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
const doInitLf=(o:any)=>{
|
const doUpdateNode = (data) => {
|
||||||
lf.value=o.value
|
if (ndPanel && ndPanel.value) {
|
||||||
|
ndPanel.value.updateNode(data)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
const doSave=()=>{
|
const doNodeClick = (node) => {
|
||||||
router.replace({path:"/connection/index"})
|
if (node) {
|
||||||
|
selNode.info = node.data.properties.data;
|
||||||
|
let tmps = info.nodes.filter(d => d.id == selNode.info.id);
|
||||||
|
if (tmps.length == 0) {
|
||||||
|
info.nodes.push(selNode.info);
|
||||||
|
} else {
|
||||||
|
selNode.info.inputParams = tmps[0].inputParams;
|
||||||
|
selNode.info.outputParams = tmps[0].outputParams;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
selNode.info = null;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
const doCancel=()=>{
|
const doInitLf = (o) => {
|
||||||
router.replace({path:"/connection/index"})
|
lf.value = o.value
|
||||||
}
|
}
|
||||||
|
const doSave = () => {
|
||||||
|
router.replace({ path: "/connection/index" })
|
||||||
|
}
|
||||||
|
const doCancel = () => {
|
||||||
|
router.replace({ path: "/connection/index" })
|
||||||
|
}
|
||||||
|
const initData = () => {
|
||||||
|
let id = route.query.id;
|
||||||
|
ConnApi.detail(id).then(d => {
|
||||||
|
info.connInfo = d.data?.data || {};
|
||||||
|
upForm.model_name = info.connInfo.model_name;
|
||||||
|
upForm.model_version = info.connInfo.model_version;
|
||||||
|
upForm.model_name = info.connInfo.model_name;
|
||||||
|
upForm.model_name = info.connInfo.model_name;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
onMounted(() => {
|
||||||
|
initData();
|
||||||
|
window.xapp = getCurrentInstance();
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
<style scoped lang='scss'>
|
<style scoped lang='scss'>
|
||||||
.connection-edit{
|
.connection-edit {
|
||||||
:deep(.el-card__header) {
|
:deep(.el-card__header) {
|
||||||
padding: 8px 12px;
|
padding: 8px 12px;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -137,60 +186,90 @@ const doCancel=()=>{
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.edit-content{
|
|
||||||
display: flex;
|
.flow-card {
|
||||||
justify-content: center;
|
:deep(.el-card__body) {
|
||||||
.item{
|
padding: 0px;
|
||||||
width:300px;
|
}
|
||||||
.div-title{
|
}
|
||||||
color:#409EFF;
|
|
||||||
|
.edit-content {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.item {
|
||||||
|
width: 300px;
|
||||||
|
|
||||||
|
&.flow-info {
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
right: 10px;
|
||||||
|
background: #fff;
|
||||||
|
|
||||||
|
.div-info {
|
||||||
|
min-height: unset;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
display: flex;
|
||||||
align-items: center;
|
|
||||||
font-size: 12px;
|
.sp-label {
|
||||||
}
|
color: #888;
|
||||||
.div-nodes{
|
display: block;
|
||||||
border:solid 1px #409EFF;
|
white-space: nowrap;
|
||||||
min-height: 600px;
|
|
||||||
height: 600px;
|
|
||||||
:deep(.el-tabs--border-card){
|
|
||||||
border:none;
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
.div-chart{
|
.sp-text {
|
||||||
border:solid 1px #409EFF;
|
flex-grow: 1;
|
||||||
min-height: 600px;
|
display: block;
|
||||||
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>
|
</style>
|
||||||
|
|
@ -11,7 +11,7 @@ import '@logicflow/core/dist/style/index.css';
|
||||||
import { Menu } from "@logicflow/extension";
|
import { Menu } from "@logicflow/extension";
|
||||||
import AiNodeExtension from '@/components/flow/index'
|
import AiNodeExtension from '@/components/flow/index'
|
||||||
import RegisteMenu from '@/components/flow/menu.js'
|
import RegisteMenu from '@/components/flow/menu.js'
|
||||||
const emit=defineEmits(["initLf","updateNode"])
|
const emit=defineEmits(["initLf","updateNode","nodeClick"])
|
||||||
const themeApprove = {
|
const themeApprove = {
|
||||||
rect: { // 矩形样式
|
rect: { // 矩形样式
|
||||||
radius: 8,
|
radius: 8,
|
||||||
|
|
@ -56,13 +56,16 @@ let showProp=ref(false)
|
||||||
let nodeData=reactive(null)
|
let nodeData=reactive(null)
|
||||||
let nodePropKey=ref(1)
|
let nodePropKey=ref(1)
|
||||||
const initEvent=(lf)=>{
|
const initEvent=(lf)=>{
|
||||||
|
lf.on("blank:click",node=>{
|
||||||
|
emit("nodeClick",null)
|
||||||
|
});
|
||||||
lf.on("element:click",node=>{
|
lf.on("element:click",node=>{
|
||||||
nodeData=node.data
|
nodeData=node.data
|
||||||
showProp.value=true
|
showProp.value=true
|
||||||
nodePropKey.value++
|
nodePropKey.value++
|
||||||
console.log("-->",nodeData)
|
emit("nodeClick",node)
|
||||||
});
|
});
|
||||||
lf.on("node:dnd-add",data=>{
|
lf.on("node:dnd-add",data=>{
|
||||||
nodeData=data.data;
|
nodeData=data.data;
|
||||||
showProp.value=true
|
showProp.value=true
|
||||||
nodePropKey.value++
|
nodePropKey.value++
|
||||||
|
|
@ -86,11 +89,16 @@ const initEvent=(lf)=>{
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
const doEdit=(n)=>{
|
||||||
|
debugger
|
||||||
|
}
|
||||||
const doUpdateState=()=>{
|
const doUpdateState=()=>{
|
||||||
//nodePanel.value.updateNode(lf.value.getGraphData());
|
//nodePanel.value.updateNode(lf.value.getGraphData());
|
||||||
emit("updateNode",lf.value.getGraphData())
|
emit("updateNode",lf.value.getGraphData())
|
||||||
}
|
}
|
||||||
|
defineExpose({
|
||||||
|
doEdit,
|
||||||
|
})
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
const logicFlow = new LogicFlow({
|
const logicFlow = new LogicFlow({
|
||||||
...config,
|
...config,
|
||||||
|
|
@ -103,7 +111,7 @@ onMounted(() => {
|
||||||
window.lf = lf;
|
window.lf = lf;
|
||||||
logicFlow.render({
|
logicFlow.render({
|
||||||
nodes: [
|
nodes: [
|
||||||
{
|
/* {
|
||||||
id: 'node_1',
|
id: 'node_1',
|
||||||
type: 'ai-node',
|
type: 'ai-node',
|
||||||
x: 150,
|
x: 150,
|
||||||
|
|
@ -124,7 +132,7 @@ onMounted(() => {
|
||||||
properties:{
|
properties:{
|
||||||
node:900
|
node:900
|
||||||
}
|
}
|
||||||
}
|
}*/
|
||||||
],
|
],
|
||||||
edges: [
|
edges: [
|
||||||
|
|
||||||
|
|
@ -140,7 +148,7 @@ onMounted(() => {
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
|
|
||||||
.viewport {
|
.viewport {
|
||||||
height: 100%;
|
height: 600px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -2,12 +2,26 @@
|
||||||
<div class="node-panel">
|
<div class="node-panel">
|
||||||
<el-tabs type="border-card">
|
<el-tabs type="border-card">
|
||||||
<el-tab-pane label="前处理算子">
|
<el-tab-pane label="前处理算子">
|
||||||
<div v-for="(it1, idx1) in list1" :key="idx1" class="div-item" @mousedown="dragNode(it1, 1)" v-show="it1.show">
|
<div v-for="(it1, idx1) in info.list1" :key="idx1" class="div-item" @mousedown="dragNode(it1, 1)"
|
||||||
|
v-show="it1.show">
|
||||||
{{ it1.text }}
|
{{ it1.text }}
|
||||||
</div>
|
</div>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
<el-tab-pane label="后处理算子">
|
<el-tab-pane label="后处理算子">
|
||||||
<div v-for="(it2, idx2) in list2" :key="idx2" class="div-item item2" @mousedown="dragNode(it2, 2)" v-show="it2.show">
|
<div v-for="(it2, idx2) in info.list2" :key="idx2" class="div-item item2" @mousedown="dragNode(it2, 2)"
|
||||||
|
v-show="it2.show">
|
||||||
|
{{ it2.text }}
|
||||||
|
</div>
|
||||||
|
</el-tab-pane>
|
||||||
|
<el-tab-pane label="数据源算子">
|
||||||
|
<div v-for="(it2, idx2) in info.list3" :key="idx2" class="div-item item3" @mousedown="dragNode(it2, 3)"
|
||||||
|
v-show="it2.show">
|
||||||
|
{{ it2.text }}
|
||||||
|
</div>
|
||||||
|
</el-tab-pane>
|
||||||
|
<el-tab-pane label="数据报告算子">
|
||||||
|
<div v-for="(it2, idx2) in info.list4" :key="idx2" class="div-item item4" @mousedown="dragNode(it2, 4)"
|
||||||
|
v-show="it2.show">
|
||||||
{{ it2.text }}
|
{{ it2.text }}
|
||||||
</div>
|
</div>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
|
|
@ -16,6 +30,7 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
|
import OperApi from '@/api/operator'
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
lf: {
|
lf: {
|
||||||
type: Object,
|
type: Object,
|
||||||
|
|
@ -24,54 +39,104 @@ const props = defineProps({
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
const dragNode = (it, t) => {
|
const dragNode = (it, t) => {
|
||||||
|
let color = '#409effaa';
|
||||||
|
if (t == 2) {
|
||||||
|
color = '#ccccccaa';
|
||||||
|
}
|
||||||
|
if (t == 3) {
|
||||||
|
color = '#038181aa';
|
||||||
|
}
|
||||||
|
if (t == 4) {
|
||||||
|
color = '#eeb806aa';
|
||||||
|
}
|
||||||
props.lf.dnd.startDrag({
|
props.lf.dnd.startDrag({
|
||||||
type: 'ai-node',
|
type: 'ai-node',
|
||||||
text: it.text,
|
text: it.text,
|
||||||
fill: t == 1 ? '#409effaa' : '#ccccccaa',
|
fill: color,
|
||||||
properties:{
|
properties: {
|
||||||
node:it.id
|
node: it.id,
|
||||||
|
data:it
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
const info = reactive({
|
||||||
|
list1: [],
|
||||||
|
list2: [],
|
||||||
|
list3: [],
|
||||||
|
list4: []
|
||||||
|
})
|
||||||
const list1 = reactive([
|
const list1 = reactive([
|
||||||
{ text: "图像缩放", id: 201,show:true },
|
{ text: "图像缩放", id: 201, show: true },
|
||||||
{ text: "RGB12图像格式转换", id: 202,show:true },
|
{ text: "RGB12图像格式转换", id: 202, show: true },
|
||||||
{ text: "RGB24图像格式转换", id: 203,show:true },
|
{ text: "RGB24图像格式转换", id: 203, show: true },
|
||||||
{ text: "RGB36图像格式转换", id: 204,show:true },
|
{ text: "RGB36图像格式转换", id: 204, show: true },
|
||||||
{ text: "RGB48图像格式转换", id: 205,show:true },
|
{ text: "RGB48图像格式转换", id: 205, show: true },
|
||||||
{ text: "RGB72图像格式转换", id: 206,show:true }
|
{ text: "RGB72图像格式转换", id: 206, show: true }
|
||||||
])
|
])
|
||||||
|
|
||||||
const list2 = reactive([
|
const list2 = reactive([
|
||||||
{ text: "VIT推理算子1", id: 301,show:true },
|
{ text: "VIT推理算子1", id: 301, show: true },
|
||||||
{ text: "VIT推理算子2", id: 302,show:true },
|
{ text: "VIT推理算子2", id: 302, show: true },
|
||||||
{ text: "VIT后处理算子1", id: 303,show:true },
|
{ text: "VIT后处理算子1", id: 303, show: true },
|
||||||
{ text: "VIT后处理算子2", id: 304,show:true },
|
{ text: "VIT后处理算子2", id: 304, show: true },
|
||||||
{ text: "VIT后处理算子3", id: 305,show:true },
|
{ text: "VIT后处理算子3", id: 305, show: true },
|
||||||
]);
|
]);
|
||||||
|
|
||||||
const updateNode=(nodes)=>{
|
const updateNode = (nodes) => {
|
||||||
let nds=nodes.nodes.map(d=>d.properties.node);
|
let nds = nodes.nodes.map(d => d.properties.node);
|
||||||
list2.forEach(d=>{
|
list2.forEach(d => {
|
||||||
d.show=nds.indexOf(d.id)==-1
|
d.show = nds.indexOf(d.id) == -1
|
||||||
})
|
})
|
||||||
list1.forEach(d=>{
|
list1.forEach(d => {
|
||||||
d.show=nds.indexOf(d.id)==-1
|
d.show = nds.indexOf(d.id) == -1
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const doEdit=(nd)=>{
|
||||||
|
debugger
|
||||||
|
let tmps=info.all.filter(d=>d.id==nd.id);
|
||||||
|
if(tmps.length>0){
|
||||||
|
tmps[0].inputParams=nd.inputParams;
|
||||||
|
tmps[0].outputParams=nd.inputParams;
|
||||||
|
}
|
||||||
|
}
|
||||||
defineExpose({
|
defineExpose({
|
||||||
updateNode
|
updateNode,
|
||||||
|
doEdit,
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const initData = () => {
|
||||||
|
OperApi.list().then(d => {
|
||||||
|
let tmps = (d.data?.data?.operator_list || []).map(it => {
|
||||||
|
it.show = true;
|
||||||
|
it.text = it.operator_name;
|
||||||
|
it.id = it.operator_id
|
||||||
|
it.inputParams="";
|
||||||
|
it.outputParams="";
|
||||||
|
return it;
|
||||||
|
});
|
||||||
|
info.all=tmps;
|
||||||
|
info.list1 = tmps.filter(d => d.oper_main_type == "pre_process");
|
||||||
|
info.list2 = tmps.filter(d => d.oper_main_type == "post_process");
|
||||||
|
info.list3 = tmps.filter(d => d.oper_main_type == "data_source");
|
||||||
|
info.list4 = tmps.filter(d => d.oper_main_type == "data_report");
|
||||||
|
});
|
||||||
|
}
|
||||||
|
onMounted(() => {
|
||||||
|
initData();
|
||||||
|
});
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<style lang='scss'>
|
<style lang='scss'>
|
||||||
.node-panel {
|
.node-panel {
|
||||||
|
.el-tabs__item {
|
||||||
|
padding: 0px 8px !important;
|
||||||
|
}
|
||||||
|
|
||||||
.div-item {
|
.div-item {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
border: solid 1px #888;
|
border: solid 1px #888;
|
||||||
margin-bottom: 10px;
|
margin: 0px 40px 10px;
|
||||||
line-height: 30px;
|
line-height: 30px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
|
|
@ -82,6 +147,14 @@ defineExpose({
|
||||||
&.item2 {
|
&.item2 {
|
||||||
background: #ccccccaa;
|
background: #ccccccaa;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.item3 {
|
||||||
|
background: #038181aa;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.item4 {
|
||||||
|
background: #eeb806aa;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
Loading…
Reference in New Issue