|
|
@@ -12,10 +12,11 @@
|
|
|
<Background pattern-color="#aaa" :gap="16" />
|
|
|
|
|
|
<!-- <MiniMap /> -->
|
|
|
- <Panel>
|
|
|
+ <Panel :position="'right'">
|
|
|
<div>
|
|
|
- <button class="remove" @click="removeNode(event)">删除节点</button>
|
|
|
- <button class="remove" @click="removeEdge(event)">删除线</button>
|
|
|
+ <button class="remove" @click="removeNode(event)">N</button>
|
|
|
+ <button class="remove" @click="removeEdge(event)">E</button>
|
|
|
+ <button class="remove" @click="removeall(event)">all</button>
|
|
|
<!-- <button class="remove" @click="getnodes()">获取所有数据</button> -->
|
|
|
</div>
|
|
|
|
|
|
@@ -49,7 +50,7 @@
|
|
|
</template>
|
|
|
<script setup>
|
|
|
import { ref, markRaw } from 'vue'
|
|
|
-import { VueFlow, useVueFlow, MarkerType } from '@vue-flow/core'
|
|
|
+import { VueFlow,Panel, useVueFlow, MarkerType } from '@vue-flow/core'
|
|
|
import { ElMessage, ElButton, ElDialog, ElSelect } from 'element-plus'
|
|
|
import { useRoute } from 'vue-router';
|
|
|
import { request, uploadFile } from "@/utils/request";
|
|
|
@@ -76,7 +77,15 @@ const props = defineProps({
|
|
|
optimizer: {
|
|
|
type: Boolean,
|
|
|
},
|
|
|
+ color1: {
|
|
|
+ type: String,
|
|
|
+ },
|
|
|
+})
|
|
|
+let newobj=ref({
|
|
|
+ name:'',
|
|
|
+ description:'',
|
|
|
})
|
|
|
+let pid=ref('');
|
|
|
let newroter=ref();
|
|
|
let vueflowimg=ref('');
|
|
|
const shopShow = ref(false);
|
|
|
@@ -94,6 +103,7 @@ onConnect((connection) => {
|
|
|
console.log(connection);
|
|
|
connection.type = 'smoothstep';// smoothstep straight
|
|
|
connection.markerEnd = MarkerType.ArrowClosed;
|
|
|
+ connection.color="#FC0537"
|
|
|
addEdges(connection)
|
|
|
})
|
|
|
function onNodeClick(e) {
|
|
|
@@ -174,18 +184,21 @@ function removeNode(id) {
|
|
|
id = noid.value.id
|
|
|
vueFlowRef.value.removeNodes(noid.value.id);
|
|
|
}
|
|
|
+function removeall(){
|
|
|
+ nodes.value=[];
|
|
|
+ edges.value=[];
|
|
|
+}
|
|
|
async function logToObject1() {
|
|
|
let obj = { nodes: toObject().nodes,edges:toObject().edges };
|
|
|
mergedObj.value=JSON.stringify(obj);
|
|
|
try {
|
|
|
- console.log(vueFlowRef.value)
|
|
|
const container = vueFlowRef.value.$el;
|
|
|
const canvas = await html2canvas(container);
|
|
|
const img = canvas.toDataURL('image/png');
|
|
|
|
|
|
// 创建一个图片元素并设置src属性为转换后的图片数据
|
|
|
- const image = new Image();
|
|
|
- image.src = img;
|
|
|
+ // const image = new Image();
|
|
|
+ // image.src = img;
|
|
|
vueflowimg.value=img
|
|
|
if(vueflowimg.value!=''){
|
|
|
console.log("进入了")
|
|
|
@@ -207,9 +220,9 @@ async function logToObject1() {
|
|
|
const addflow = () => {
|
|
|
const params = {
|
|
|
transCode: 'MDO0002',
|
|
|
- pid: '',
|
|
|
- name: newroter.value.name,
|
|
|
- remark:newroter.value.description,
|
|
|
+ pid: pid.value,
|
|
|
+ name: newobj.value.name,
|
|
|
+ remark:newobj.value.description,
|
|
|
image:vueflowimg.value,
|
|
|
isshare:'1',
|
|
|
flow:mergedObj.value
|
|
|
@@ -245,20 +258,36 @@ onMounted(() => {
|
|
|
const getroter=()=>{
|
|
|
|
|
|
if(route.query.id=='2'){
|
|
|
+
|
|
|
let objlist=JSON.parse(sessionStorage.getItem("objlist"));
|
|
|
+ console.log(11111)
|
|
|
+ console.log(objlist)
|
|
|
let nodesflow=JSON.parse(objlist.flow)
|
|
|
+
|
|
|
nodes.value=nodesflow.nodes;
|
|
|
edges.value=nodesflow.edges;
|
|
|
+ newobj.value.name=objlist.name;
|
|
|
+ newobj.value.description=objlist.remark;
|
|
|
+ console.log(objlist.pid);
|
|
|
+ pid.value=objlist.pid;
|
|
|
}else if(route.query.id='1'&&route.query!={}){
|
|
|
newroter.value=JSON.parse(route.query.vlaobj);
|
|
|
+ newobj.value= newroter.value;
|
|
|
+ console.log( newobj.value);
|
|
|
|
|
|
}
|
|
|
- // if(route.query.id=='0'){
|
|
|
- // console.log(route.query);
|
|
|
- // nodes.value=initialNodes;
|
|
|
- // edges.value=initialEdges;
|
|
|
- // }
|
|
|
}
|
|
|
+//改变线的颜色
|
|
|
+const changeAllEdgesColor=()=>{
|
|
|
+let id = Edgeid.value;
|
|
|
+edges.value=edges.value.filter((edge) => edge.id !== id)
|
|
|
+console.log(props.color1);
|
|
|
+ // const edge = vueFlowRef.value.find(el => el.id === id);
|
|
|
+ // if (edge && edge.data) {
|
|
|
+ edges.value.color = props.color1;
|
|
|
+ // }
|
|
|
+}
|
|
|
+defineExpose({changeAllEdgesColor});
|
|
|
</script>
|
|
|
|
|
|
<style>
|
