修改看版配置

master
夜笙歌 1 month ago
parent fd422fae5e
commit efe8695e4e

@ -225,7 +225,29 @@
</div>
</div>
<div class="rightPanel">
<el-form :model="nodeAttrForm" label-width="auto" style="max-width: 600px" v-if="nodeAttrForm">
<el-collapse>
<el-collapse-item title="基础设置" name="1" v-if="Object.keys(nodeDataForm).length>0">
<el-form :model="nodeDataForm" label-width="auto" style="max-width: 600px">
<el-form-item label="x">
<el-input-number :precision="0" :step="1" v-model="nodeDataForm.position.x" style="width: 100%"
@change="updateNode(nodeAttrForm.id,nodeAttrForm,{ replace: true })" />
</el-form-item>
<el-form-item label="y">
<el-input-number :precision="0" :step="1" v-model="nodeDataForm.position.y" style="width: 100%"
@change="updateNode(nodeAttrForm.id,nodeAttrForm,{ replace: true })" />
</el-form-item>
<el-form-item label="宽度">
<el-input-number :precision="0" :step="1" v-model="nodeDataForm.dimensions.width" style="width: 100%"
@change="updateNode(nodeAttrForm.id,nodeAttrForm,{ replace: true })" />
</el-form-item>
<el-form-item label="高度">
<el-input-number :precision="0" :step="1" v-model="nodeDataForm.dimensions.height" style="width: 100%"
@change="updateNode(nodeAttrForm.id,nodeAttrForm,{ replace: true })" />
</el-form-item>
</el-form>
</el-collapse-item>
<el-collapse-item title="数据配置" name="2" v-if="Object.keys(nodeAttrForm).length>0">
<el-form :model="nodeAttrForm" label-width="auto" style="max-width: 600px">
<el-form-item label="默认内容" v-if="Object.keys(nodeAttrForm).includes('defaultInput')">
<el-input v-model="nodeAttrForm.defaultInput" style="width: 100%" />
</el-form-item>
@ -321,6 +343,15 @@
/>
</el-form-item>
</el-form>
</el-collapse-item>
<el-collapse-item title="自定义配置" name="3" v-if="customDataForm">
<el-form :model="customDataForm" label-width="auto" style="max-width: 600px">
<el-form-item label="自定义内容">
<el-input type="textarea" v-model="customDataForm.option" style="width: 100%" />
</el-form-item>
</el-form>
</el-collapse-item>
</el-collapse>
</div>
<el-dialog v-model="pageSettingVisible" title="页面设置" width="500">
<el-form :model="pageSettingForm">
@ -389,8 +420,10 @@ const { onDragStart, onDrop, onDragOver } = tool();
// flow
const {
addEdges
addEdges,
updateNode
} = useVueFlow();
console.log(updateNode);
const pageSettingVisible = ref(false);
const pageSettingForm = ref({});
@ -418,7 +451,9 @@ onMounted(async () => {
edges.value = JSON.parse(localStorage.getItem('EDGES') || '[]');
pageData.value = JSON.parse(localStorage.getItem('PAGEDATA'));
});
const customDataForm = ref({});
const nodeAttrForm = ref({});
const nodeDataForm = ref({});
const logEvent = async (eventname, event) => {
switch (eventname) {
case 'connect':
@ -437,15 +472,23 @@ const logEvent = async (eventname, event) => {
break;
case 'paneClick':
nodeAttrForm.value = {};
nodeDataForm.value = {};
customDataForm.value = {};
break;
case 'click':
nodeAttrForm.value = event.node.data.options;
nodeDataForm.value = event.node;
customDataForm.value = event.node.data.customData;
break;
case 'nodeDrag':
if (event.nodes.length === 1) {
nodeAttrForm.value = event.node.data.options;
nodeDataForm.value = event.node;
customDataForm.value = event.node.data.customData;
} else {
nodeAttrForm.value = {};
nodeDataForm.value = {};
customDataForm.value = {};
}
break;
case 'contextmenu':

@ -209,6 +209,11 @@ watch(() => [JSON.parse(JSON.stringify(props.inputData)), JSON.parse(JSON.string
chart && chart.setOption(getOption(), true);
}
}, { deep: true, immediate: true });
watch(() => JSON.parse(JSON.stringify(props.dimensions)), (obj1, obj2) => {
if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
chart?.resize();
}
}, { deep: true, immediate: true });
const emit = defineEmits(['resize']);
const resize = (e) => {
chart.resize();

@ -216,6 +216,11 @@ watch(() => [JSON.parse(JSON.stringify(props.inputData)), JSON.parse(JSON.string
chart && chart.setOption(getOption(), true);
}
}, { deep: true, immediate: true });
watch(() => JSON.parse(JSON.stringify(props.dimensions)), (obj1, obj2) => {
if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
chart?.resize();
}
}, { deep: true, immediate: true });
const emit = defineEmits(['resize']);
const resize = (e) => {
chart.resize();

@ -94,6 +94,11 @@ watch(() => [JSON.parse(JSON.stringify(props.inputData)), JSON.parse(JSON.string
chart && chart.setOption(getOption(), true);
}
}, { deep: true, immediate: true });
watch(() => JSON.parse(JSON.stringify(props.dimensions)), (obj1, obj2) => {
if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
chart?.resize();
}
}, { deep: true, immediate: true });
const emit = defineEmits(['resize']);
const resize = (e) => {
chart.resize();

@ -216,6 +216,11 @@ watch(() => [JSON.parse(JSON.stringify(props.inputData)), JSON.parse(JSON.string
chart && chart.setOption(getOption(), true);
}
}, { deep: true, immediate: true });
watch(() => JSON.parse(JSON.stringify(props.dimensions)), (obj1, obj2) => {
if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
chart?.resize();
}
}, { deep: true, immediate: true });
const emit = defineEmits(['resize']);
const resize = (e) => {
chart.resize();

@ -219,6 +219,11 @@ watch(() => [JSON.parse(JSON.stringify(props.inputData)), JSON.parse(JSON.string
}
}, { deep: true, immediate: true });
watch(() => JSON.parse(JSON.stringify(props.dimensions)), (obj1, obj2) => {
if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
chart?.resize();
}
}, { deep: true, immediate: true });
const emit = defineEmits(['resize']);
const resize = (e) => {
chart.resize();

@ -225,6 +225,11 @@ watch(() => [JSON.parse(JSON.stringify(props.inputData)), JSON.parse(JSON.string
chart && chart.setOption(getOption(), true);
}
}, { deep: true, immediate: true });
watch(() => JSON.parse(JSON.stringify(props.dimensions)), (obj1, obj2) => {
if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
chart?.resize();
}
}, { deep: true, immediate: true });
const emit = defineEmits(['resize']);
const resize = (e) => {

@ -225,6 +225,11 @@ watch(() => [JSON.parse(JSON.stringify(props.inputData)), JSON.parse(JSON.string
chart && chart.setOption(getOption(), true);
}
}, { deep: true, immediate: true });
watch(() => JSON.parse(JSON.stringify(props.dimensions)), (obj1, obj2) => {
if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
chart?.resize();
}
}, { deep: true, immediate: true });
const emit = defineEmits(['resize']);
const resize = (e) => {

@ -139,6 +139,11 @@ watch(() => [JSON.parse(JSON.stringify(props.inputData)), JSON.parse(JSON.string
chart && chart.setOption(getOption(), true);
}
}, { deep: true, immediate: true });
watch(() => JSON.parse(JSON.stringify(props.dimensions)), (obj1, obj2) => {
if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
chart?.resize();
}
}, { deep: true, immediate: true });
const emit = defineEmits(['resize']);
const resize = (e) => {
chart.resize();

Loading…
Cancel
Save