|
|
@@ -84,6 +84,7 @@ import DropzoneBackground from './DropzoneBackground.vue'
|
|
|
import eltree from './eltree.vue'
|
|
|
import useDragAndDrop from './useDnD';
|
|
|
import f11 from '@/assets/img/f11.png'
|
|
|
+import r2 from '@/assets/img/r2.png'
|
|
|
import html2canvas from 'html2canvas';
|
|
|
import Icon from './Icon.vue'
|
|
|
import { formatTime } from '@/js/lindex.js';
|
|
|
@@ -93,7 +94,7 @@ import emitter from "@/utils/emitter";
|
|
|
const dark = ref(false)
|
|
|
let datatree=ref();
|
|
|
const route = useRoute();
|
|
|
-const { onInit, onNodeDragStop, onNodeContextMenu, onConnect, addEdges, setViewport, toObject } = useVueFlow()
|
|
|
+const { onInit, onNodeDragStop, onNodeContextMenu, onConnect, addEdges, setViewport, toObject,addNode } = useVueFlow()
|
|
|
let vueFlowRef = ref();
|
|
|
let emit = defineEmits(['optimizerfalse']);
|
|
|
let mergedObj=ref();
|
|
|
@@ -118,7 +119,9 @@ let newobj=ref({
|
|
|
name:'',
|
|
|
description:'',
|
|
|
})
|
|
|
+let nodesitem=ref([]);
|
|
|
let linenum=ref(1);
|
|
|
+let bgcolor=ref();
|
|
|
let linecolor=ref('#b1b1b7')
|
|
|
let pid=ref('');
|
|
|
let newroter=ref();
|
|
|
@@ -127,12 +130,15 @@ const shopShow = ref(false);
|
|
|
let noid = ref([]);
|
|
|
let Edgeid = ref();
|
|
|
let seledge=ref(null);
|
|
|
+let djshow=ref(false);
|
|
|
let node = ref();
|
|
|
let contextMenu = ref({
|
|
|
position: { x: 0, y: 0 },
|
|
|
target: 'kong',
|
|
|
})
|
|
|
let Nested=ref([]);
|
|
|
+let Nested2=ref([]);
|
|
|
+let nnum=ref(0);
|
|
|
const { onDragOver, onDrop, onDragLeave, isDragOver } = useDragAndDrop();
|
|
|
const edges = ref([]);
|
|
|
const nodes = ref([]);
|
|
|
@@ -140,6 +146,7 @@ onConnect((connection) => {
|
|
|
console.log(connection);
|
|
|
connection.type = 'smoothstep';// smoothstep straight
|
|
|
connection.markerEnd = MarkerType.ArrowClosed;
|
|
|
+ connection.color=linecolor.value;
|
|
|
// connection.label = '这是一条注释';
|
|
|
connection.style = { strokeWidth:linenum.value ,stroke:linecolor.value};
|
|
|
addEdges(connection)
|
|
|
@@ -162,28 +169,111 @@ function onNodeClick(e) {
|
|
|
noid.value = e.node;
|
|
|
labelname.value=e.node.data.label;
|
|
|
console.log(e.node);
|
|
|
+ djshow.value = !djshow.value;
|
|
|
+ // if(djshow.value){
|
|
|
+ // console.log('选中');
|
|
|
+
|
|
|
+ // }else{
|
|
|
+ // console.log('取消选中');
|
|
|
+ // }
|
|
|
|
|
|
}
|
|
|
//模块化
|
|
|
+const bgcolorfunc= (color)=>{
|
|
|
+
|
|
|
+ bgcolor.value=color;
|
|
|
+if(noid.value.style!=undefined){
|
|
|
+ console.log(noid.value.style);
|
|
|
+ noid.value.style.backgroundColor=color;
|
|
|
+}
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
function onSelection(){
|
|
|
- //onNodeDragStop();
|
|
|
- let num=1;
|
|
|
- num++;
|
|
|
- let item= {
|
|
|
- id: '1',
|
|
|
- data: { label: '模块化' },
|
|
|
- position: { x: 100, y: 100 },
|
|
|
- style: { backgroundColor: 'rgba(16, 185, 129,0.1)', width: '200px',height: '200px' },
|
|
|
+ let positionX=[];
|
|
|
+ let positiony=[];
|
|
|
+ for(let i=0;i<Nested.value.length;i++){
|
|
|
+ // Nested2.value.push(Nested.value[i]);
|
|
|
+ positionX.push(Nested.value[i].position.x)
|
|
|
+ positiony.push(Nested.value[i].position.y)
|
|
|
}
|
|
|
- nodes.value = Nested.value.map(node => {
|
|
|
- node.parentNode=item.id;
|
|
|
- node.expandParent=true;
|
|
|
- return node;
|
|
|
- });
|
|
|
- nodes.value.push(item);
|
|
|
- console.log( nodes.value);
|
|
|
-
|
|
|
+ let xmin=Math.min(...positionX);
|
|
|
+ let ymax=Math.max(...positiony);
|
|
|
+ console.log(positionX);
|
|
|
+ // console.log( positionX)
|
|
|
+ // console.log(44444)
|
|
|
+ // console.log( positiony)
|
|
|
+ nnum.value++;
|
|
|
+// let x=Math.floor(Math.random() * 91) + 10;
|
|
|
+// let y=Math.floor(Math.random() * 91) + 10;
|
|
|
+ let name='模块'+nnum.value
|
|
|
+ let item= {
|
|
|
+ id:nnum.value.toString(),
|
|
|
+ data: { label:name },
|
|
|
+ position: { x:xmin , y:ymax},
|
|
|
+ style: { backgroundColor: bgcolor.value, width: '200px',height: '200px' },
|
|
|
+ //children: [],
|
|
|
+ }
|
|
|
+
|
|
|
+ if(Nested.value.length!=0){
|
|
|
+ Nested2.value=[];
|
|
|
+ for(let i=0;i<Nested.value.length;i++){
|
|
|
+ Nested2.value.push(Nested.value[i]);
|
|
|
+ }
|
|
|
+ console.log(Nested2.value);
|
|
|
+ nodesitem.value= Nested2.value.map(node => {
|
|
|
+
|
|
|
+ if(node.parentNode==undefined){
|
|
|
+
|
|
|
+ node.isParent=false;
|
|
|
+ node.parentNode=item.id;
|
|
|
+ console.log( node.parentNode)
|
|
|
+ node.position.x= node.position.x /2;
|
|
|
+ node.position.y= node.position.y/2;
|
|
|
+ node.expandParent=true;
|
|
|
+ //positionxy=node.position;
|
|
|
+ // node.extent='parent';
|
|
|
+ // return node;
|
|
|
+ }
|
|
|
+ return node;
|
|
|
+ })
|
|
|
+
|
|
|
+ }
|
|
|
+ nodes.value.push(item)
|
|
|
|
|
|
+ for(let i=0;i<nodesitem.value.length;i++){
|
|
|
+ console.log(nodesitem.value[i]);
|
|
|
+ nodes.value.push(nodesitem.value[i])
|
|
|
+ }
|
|
|
+console.log(1111)
|
|
|
+
|
|
|
+ console.log( nodes.value);
|
|
|
+//console.log(nodesitem.value);
|
|
|
+ //nodes.value.push( nodes.value)
|
|
|
+// let item= {
|
|
|
+// id:nnum.value.toString(),
|
|
|
+// data: { label: '模块化' },
|
|
|
+// position: positionxy,
|
|
|
+// style: { backgroundColor: bgcolor.value, width: '200px',height: '200px' },
|
|
|
+// }
|
|
|
+// console.log(Nested2.value)
|
|
|
+// nodes.value = Nested2.value.map(node => {
|
|
|
+// positionxy=node.position;
|
|
|
+// if(node.parentNode==undefined){
|
|
|
+// node.parentNode=item.id;
|
|
|
+// // node.expandParent=true;
|
|
|
+// node.extent='parent';
|
|
|
+
|
|
|
+// }
|
|
|
+// return node;
|
|
|
+// });
|
|
|
+// Nested2.value.push(item)
|
|
|
+// nodes.value.push(item);
|
|
|
+// console.log( nodes.value);
|
|
|
+
|
|
|
+// }else{
|
|
|
+// console.log(222)
|
|
|
+// }
|
|
|
|
|
|
}
|
|
|
function onNodeDoubleClick(e) {
|
|
|
@@ -191,10 +281,10 @@ function onNodeDoubleClick(e) {
|
|
|
console.log( e.node);
|
|
|
if (e.node.data.label == '优化器') {
|
|
|
emit('optimizerfalse','优化器');
|
|
|
- }else if(e.node.data.image=="/src/assets/flowimg/xuek10.png"){
|
|
|
+ }else if(e.node.data.label=="进化优化器"){
|
|
|
emit('optimizerfalse','进化优化器');
|
|
|
|
|
|
- }else if(e.node.data.image=="/src/assets/flowimg/xuek8.png"){
|
|
|
+ }else if(e.node.data.label=="Rosenbrock"||e.node.data.label=="AirfoilAero"){
|
|
|
emit('optimizerfalse','AirfoilAero');
|
|
|
}
|
|
|
|
|
|
@@ -252,8 +342,26 @@ emitter.emit('doSomethingEvent');
|
|
|
}
|
|
|
function removeNode(id) {
|
|
|
id = noid.value.id;
|
|
|
- console.log(id);
|
|
|
- console.log( datatree.value);
|
|
|
+if(datatree.value==undefined){
|
|
|
+ if(nodes.value.length>0){
|
|
|
+ for (let i = 0; i <nodes.value.length; i++) {
|
|
|
+ if(id==nodes.value[i].id){
|
|
|
+ console.log(44444)
|
|
|
+ console.log( nodes.value[i]);
|
|
|
+ nodes.value.splice(i, 1)
|
|
|
+ }
|
|
|
+}
|
|
|
+console.log( nodes.value);
|
|
|
+ }
|
|
|
+}else{
|
|
|
+ if(nodes.value.length>0){
|
|
|
+ for (let i = 0; i <nodes.value.length; i++) {
|
|
|
+ if(id==nodes.value[i].id){
|
|
|
+ console.log( nodes.value[i]);
|
|
|
+ nodes.value.splice(i, 1)
|
|
|
+ }
|
|
|
+}
|
|
|
+ }
|
|
|
for (let i = 0; i <datatree.value[0].children.length; i++) {
|
|
|
if(id.includes(datatree.value[0].children[i].Text)){
|
|
|
for (let j = 0; j <datatree.value[0].children[i].children.length; j++) {
|
|
|
@@ -266,11 +374,15 @@ function removeNode(id) {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+}
|
|
|
}
|
|
|
}
|
|
|
function removeall(){
|
|
|
nodes.value=[];
|
|
|
edges.value=[];
|
|
|
+ Nested2.value=[];
|
|
|
+ Nested.value=[];
|
|
|
+
|
|
|
for (let i = 0; i <datatree.value[0].children.length; i++) {
|
|
|
for (let j = 0; j <datatree.value[0].children[i].children.length; j++) {
|
|
|
datatree.value[0].children[i].children=[];
|
|
|
@@ -348,6 +460,7 @@ onMounted(() => {
|
|
|
});
|
|
|
// 获取链接
|
|
|
const getroter=()=>{
|
|
|
+ //datatree.value[0].children=[];
|
|
|
let objlist=JSON.parse(sessionStorage.getItem("objlist"));
|
|
|
if(objlist.flow!=''){
|
|
|
let nodesflow=JSON.parse(objlist.flow)
|
|
|
@@ -357,6 +470,15 @@ const getroter=()=>{
|
|
|
newobj.value.name=objlist.name;
|
|
|
newobj.value.description=objlist.remark;
|
|
|
pid.value=objlist.pid;
|
|
|
+
|
|
|
+ // let item={
|
|
|
+ // id:'1-0',
|
|
|
+ // label: objlist.name,
|
|
|
+ // img:r2,
|
|
|
+ // }
|
|
|
+ // console.log( datatree.value[0].children);
|
|
|
+ // datatree.value[0].children.push(item);
|
|
|
+
|
|
|
}
|
|
|
//改变线的粗
|
|
|
const linestrokeWidth=(num)=>{
|
|
|
@@ -389,7 +511,7 @@ watch(() => seledge.value, (newItems, oldItems) => {
|
|
|
// //seledge.value.style.stroke = linecolor.value;
|
|
|
// }
|
|
|
});
|
|
|
-defineExpose({changeAllEdgesColor,linestrokeWidth,getroter,onSelection});
|
|
|
+defineExpose({changeAllEdgesColor,linestrokeWidth,getroter,onSelection,bgcolorfunc});
|
|
|
</script>
|
|
|
|
|
|
<style>
|
