update 增加互联
parent
e3b440c689
commit
3f2741c473
|
|
@ -49,7 +49,6 @@ const download=(id)=>{
|
|||
}
|
||||
//上传数据文件
|
||||
const upload = (file) => {
|
||||
debugger
|
||||
const formData = new FormData();
|
||||
formData.append("file_name", file.name);
|
||||
formData.append("file_content",file)
|
||||
|
|
|
|||
|
|
@ -20,28 +20,23 @@
|
|||
<span class="sp-title">互联名称:</span>
|
||||
<span class="sp-text">{{ info.data.connection_name }}</span>
|
||||
</td>
|
||||
<td style="width: 50%;">
|
||||
<span class="sp-title">标签:</span>
|
||||
<span class="sp-text">{{ info.data.connection_label }}</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="width: 50%;">
|
||||
<span class="sp-title">创建用户:</span>
|
||||
<span class="sp-text">{{ info.data.user_name }}</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
||||
<td style="width: 50%;">
|
||||
<span class="sp-title">创建时间:</span>
|
||||
<span class="sp-text">{{ info.data.create_time }}</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="width: 100%;" colspan="2">
|
||||
<td style="width: 50%;" colspan="2">
|
||||
<span class="sp-title">互联说明:</span>
|
||||
<span class="sp-text">{{ info.data.connection_desc }}</span>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
</el-card>
|
||||
<el-card style="margin-top: 12px;margin-bottom: 60px;">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="flow-demo1">
|
||||
<div ref="flow" class="viewport" id="flowMain" />
|
||||
</div>
|
||||
<div class="flow-demo1">
|
||||
<div ref="flow" class="viewport" id="flowMain" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
|
@ -13,142 +13,136 @@ import AiNodeExtension from '@/components/flow/index'
|
|||
import RegisteMenu from '@/components/flow/menu.js'
|
||||
|
||||
const themeApprove = {
|
||||
rect: { // 矩形样式
|
||||
radius: 8,
|
||||
stroke: '#3CB371'
|
||||
},
|
||||
circle: {
|
||||
r: 25,
|
||||
stroke: '#FF6347'
|
||||
},
|
||||
polygon: {
|
||||
stroke: '#6495ED',
|
||||
},
|
||||
polyline: {
|
||||
strokeWidth: 1,
|
||||
stroke: '#6495ED'
|
||||
},
|
||||
edgeText: {
|
||||
background: {
|
||||
fill: 'white',
|
||||
},
|
||||
rect: { // 矩形样式
|
||||
radius: 8,
|
||||
stroke: '#3CB371'
|
||||
},
|
||||
circle: {
|
||||
r: 25,
|
||||
stroke: '#FF6347'
|
||||
},
|
||||
polygon: {
|
||||
stroke: '#6495ED',
|
||||
},
|
||||
polyline: {
|
||||
strokeWidth: 1,
|
||||
stroke: '#6495ED'
|
||||
},
|
||||
edgeText: {
|
||||
background: {
|
||||
fill: 'white',
|
||||
},
|
||||
},
|
||||
}
|
||||
const props = defineProps({
|
||||
operInfo: {
|
||||
type: Object,
|
||||
require: true,
|
||||
default: {}
|
||||
}
|
||||
operInfo: {
|
||||
type: Object,
|
||||
require: true,
|
||||
default: {}
|
||||
}
|
||||
})
|
||||
const info=reactive({
|
||||
nodes:[],
|
||||
opers:[],
|
||||
edges:[],
|
||||
const info = reactive({
|
||||
nodes: [],
|
||||
opers: [],
|
||||
edges: [],
|
||||
})
|
||||
const emit = defineEmits(["nodeClick"]);
|
||||
const flow = ref()
|
||||
let lf = ref(null)
|
||||
const config = {
|
||||
stopScrollGraph: true,
|
||||
stopZoomGraph: true,
|
||||
isSilentMode: true,
|
||||
grid: {
|
||||
size: 10,
|
||||
visible: false,
|
||||
type: 'mesh',
|
||||
config: {
|
||||
color: '#DCDCDC',
|
||||
}
|
||||
},
|
||||
keyboard: { enabled: false },
|
||||
style: themeApprove,
|
||||
plugins: [AiNodeExtension, Menu]
|
||||
stopScrollGraph: true,
|
||||
stopZoomGraph: true,
|
||||
isSilentMode: true,
|
||||
grid: {
|
||||
size: 10,
|
||||
visible: false,
|
||||
type: 'mesh',
|
||||
config: {
|
||||
color: '#DCDCDC',
|
||||
}
|
||||
},
|
||||
keyboard: { enabled: false },
|
||||
style: themeApprove,
|
||||
plugins: [AiNodeExtension, Menu]
|
||||
};
|
||||
const showFlow=(o)=>{
|
||||
info.opers=o.operator_list;
|
||||
info.edges=o.operator_edges;
|
||||
info.nodes=o.operator_nodes.map(it=>{
|
||||
let tmps=info.opers.filter(d=>d.operator_id==it.properties.node);
|
||||
if(tmps.length>0){
|
||||
it.text.value=tmps[0].operator_name;
|
||||
}
|
||||
return it;
|
||||
});
|
||||
|
||||
let data={nodes:info.nodes,edges:info.edges};
|
||||
lf.value.render(data)
|
||||
const showFlow = (o) => {
|
||||
info.opers = o.operator_list;
|
||||
info.edges = o.operator_node_data.edges || [];
|
||||
info.nodes = o.operator_node_data.nodes || [];
|
||||
|
||||
let data = { nodes: info.nodes, edges: info.edges };
|
||||
lf.value.render(data)
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
showFlow,
|
||||
showFlow,
|
||||
})
|
||||
const initEvent=(lf)=>{
|
||||
lf.on("element:click",node=>{
|
||||
emit("nodeClick",node.data);
|
||||
const initEvent = (lf) => {
|
||||
lf.on("element:click", node => {
|
||||
emit("nodeClick", node.data);
|
||||
});
|
||||
}
|
||||
onMounted(() => {
|
||||
const logicFlow = new LogicFlow({
|
||||
...config,
|
||||
container: flow.value
|
||||
})
|
||||
initEvent(logicFlow);
|
||||
lf.value = logicFlow
|
||||
window.lf = lf;
|
||||
const logicFlow = new LogicFlow({
|
||||
...config,
|
||||
container: flow.value
|
||||
})
|
||||
initEvent(logicFlow);
|
||||
lf.value = logicFlow
|
||||
window.lf = lf;
|
||||
});
|
||||
</script>
|
||||
<style scoped lang='scss'>
|
||||
.flow-demo1 {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
padding: 20px 0px 10px;
|
||||
|
||||
.viewport {
|
||||
height: 100%;
|
||||
height: 600px;
|
||||
overflow: hidden;
|
||||
|
||||
padding: 20px 0px 10px;
|
||||
}
|
||||
|
||||
.viewport {
|
||||
height: 100%;
|
||||
height: 600px;
|
||||
overflow: hidden;
|
||||
.custom-anchor {
|
||||
stroke: #999;
|
||||
stroke-width: 1;
|
||||
fill: #d9d9d9;
|
||||
cursor: crosshair;
|
||||
rx: 3;
|
||||
ry: 3;
|
||||
}
|
||||
|
||||
.custom-anchor:hover {
|
||||
fill: #ff7f0e;
|
||||
stroke: #ff7f0e;
|
||||
}
|
||||
|
||||
.flow-card {
|
||||
height: 80%;
|
||||
width: calc(100% - 450px);
|
||||
|
||||
.el-card__body {
|
||||
height: 100%;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.custom-anchor {
|
||||
stroke: #999;
|
||||
stroke-width: 1;
|
||||
fill: #d9d9d9;
|
||||
cursor: crosshair;
|
||||
rx: 3;
|
||||
ry: 3;
|
||||
margin: 0px 12px;
|
||||
}
|
||||
|
||||
.node-panel {
|
||||
width: 240px;
|
||||
|
||||
.el-tabs__item {
|
||||
padding: 0px 10px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-anchor:hover {
|
||||
fill: #ff7f0e;
|
||||
stroke: #ff7f0e;
|
||||
}
|
||||
|
||||
.flow-card {
|
||||
height: 80%;
|
||||
width: calc(100% - 450px);
|
||||
|
||||
.el-card__body {
|
||||
height: 100%;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
margin: 0px 12px;
|
||||
}
|
||||
|
||||
.node-panel {
|
||||
width: 240px;
|
||||
|
||||
.el-tabs__item {
|
||||
padding: 0px 10px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.card-prop {
|
||||
height: 300px;
|
||||
width: 200px;
|
||||
min-width: 200px;
|
||||
}
|
||||
.card-prop {
|
||||
height: 300px;
|
||||
width: 200px;
|
||||
min-width: 200px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -18,16 +18,11 @@
|
|||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-col :span="24">
|
||||
<el-form-item label="互联名称" prop="connection_name">
|
||||
<el-input v-model="upForm.connection_name" placeholder="请输入互联名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="标签" prop="connection_label">
|
||||
<el-input v-model="upForm.connection_label" placeholder="请输入标签" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
|
|
@ -139,13 +134,11 @@ const upForm = reactive({
|
|||
model_name: '',
|
||||
model_version: '',
|
||||
connection_name: '',
|
||||
connection_label: '',
|
||||
connection_desc: ''
|
||||
});
|
||||
const upRules = computed(() => {
|
||||
return {
|
||||
connection_name: [{ required: true, trigger: "blur", message: "请输入互联名称", },],
|
||||
connection_label: [{ required: true, trigger: "blur", message: "请输入标签", },],
|
||||
connection_desc: [{ required: true, trigger: "blur", message: "请输入互联说明", },],
|
||||
}
|
||||
});
|
||||
|
|
@ -336,8 +329,10 @@ const doSave = () => {
|
|||
connection_desc: upForm.connection_desc,
|
||||
operator_list: operator_list,
|
||||
operator_connection_list: operator_connection_list,
|
||||
operator_connection_nodes: flowData.nodes,
|
||||
operator_connection_edges: flowData.edges
|
||||
operator_node_data: {
|
||||
nodes: flowData.nodes,
|
||||
edges: flowData.edges
|
||||
}
|
||||
};
|
||||
if (info.type == "add") {
|
||||
ConnApi.add(postData).then(d => {
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@
|
|||
<template #default="scope">
|
||||
<el-button text type="primary" size="small" @click="doShowDetail(scope.row)"><i-ep-edit />查看</el-button>
|
||||
<el-button text type="primary" size="small" style="margin:0px;"
|
||||
@click="doEdit(scope.row.connection_id)"><i-ep-link />修改互联</el-button>
|
||||
@click="doEdit(scope.row)"><i-ep-link />修改互联</el-button>
|
||||
<el-button text type="primary" size="small" @click="doAdd(scope.row)"
|
||||
style="margin:0px;"><i-ep-plus />新建互联</el-button>
|
||||
<el-button text type="primary" size="small" @click="handleDelete(scope.row)"
|
||||
|
|
|
|||
|
|
@ -294,7 +294,6 @@ function handleFileChange(file, b) {
|
|||
name: file.file.name,
|
||||
serverName: res.data.data.file_name
|
||||
})
|
||||
debugger
|
||||
upForm.model_file_list = listOpt.upFiles.map(it => it.serverName);
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue