xins
/
hwmom-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改看版配置

Browse Source
master
夜笙歌 3 months ago
parent fd422fae5e
commit efe8695e4e
9 changed files with 180 additions and 97 deletions
Show Stats Download Patch File Download Diff File

237
src/views/boardGenerate/index.vue
Unescape Escape View File

@ -225,102 +225,133 @@
</div> </div>
</div> </div>
<div class="rightPanel"> <div class="rightPanel">
<el-form :model="nodeAttrForm" label-width="auto" style="max-width: 600px" v-if="nodeAttrForm"> <el-collapse>
<el-form-item label="默认内容" v-if="Object.keys(nodeAttrForm).includes('defaultInput')"> <el-collapse-item title="基础设置" name="1" v-if="Object.keys(nodeDataForm).length>0">
<el-input v-model="nodeAttrForm.defaultInput" style="width: 100%" /> <el-form :model="nodeDataForm" label-width="auto" style="max-width: 600px">
</el-form-item> <el-form-item label="x">
<el-form-item label="默认日期" v-if="Object.keys(nodeAttrForm).includes('defaultTime')"> <el-input-number :precision="0" :step="1" v-model="nodeDataForm.position.x" style="width: 100%"
<el-date-picker @change="updateNode(nodeAttrForm.id,nodeAttrForm,{ replace: true })" />
v-model="nodeAttrForm.defaultTime" </el-form-item>
type="datetimerange" <el-form-item label="y">
range-separator="到" <el-input-number :precision="0" :step="1" v-model="nodeDataForm.position.y" style="width: 100%"
start-placeholder="开始时间" @change="updateNode(nodeAttrForm.id,nodeAttrForm,{ replace: true })" />
end-placeholder="结束时间" </el-form-item>
style="width: 100%;height: 100%" <el-form-item label="宽度">
:value-format="nodeAttrForm?.format||'YYYY/MM/DD HH:mm:ss'" <el-input-number :precision="0" :step="1" v-model="nodeDataForm.dimensions.width" style="width: 100%"
:format="nodeAttrForm?.format||'YYYY/MM/DD HH:mm:ss'" @change="updateNode(nodeAttrForm.id,nodeAttrForm,{ replace: true })" />
/> </el-form-item>
</el-form-item> <el-form-item label="高度">
<el-form-item label="日期格式" v-if="Object.keys(nodeAttrForm).includes('format')"> <el-input-number :precision="0" :step="1" v-model="nodeDataForm.dimensions.height" style="width: 100%"
<el-input v-model="nodeAttrForm.format" style="width: 100%" /> @change="updateNode(nodeAttrForm.id,nodeAttrForm,{ replace: true })" />
</el-form-item> </el-form-item>
<el-form-item label="输出字段名" v-if="Object.keys(nodeAttrForm).includes('field')"> </el-form>
<el-input v-model="nodeAttrForm.field" /> </el-collapse-item>
</el-form-item> <el-collapse-item title="数据配置" name="2" v-if="Object.keys(nodeAttrForm).length>0">
<el-form-item label="开始时间字段名" v-if="Object.keys(nodeAttrForm).includes('startTimeId')"> <el-form :model="nodeAttrForm" label-width="auto" style="max-width: 600px">
<el-input v-model="nodeAttrForm.startTimeId" /> <el-form-item label="默认内容" v-if="Object.keys(nodeAttrForm).includes('defaultInput')">
</el-form-item> <el-input v-model="nodeAttrForm.defaultInput" style="width: 100%" />
<el-form-item label="结束时间字段名" v-if="Object.keys(nodeAttrForm).includes('endTimeId')"> </el-form-item>
<el-input v-model="nodeAttrForm.endTimeId" /> <el-form-item label="默认日期" v-if="Object.keys(nodeAttrForm).includes('defaultTime')">
</el-form-item> <el-date-picker
<el-form-item label="数据映射" v-if="Object.keys(nodeAttrForm).includes('dataMap')"> v-model="nodeAttrForm.defaultTime"
<el-table :data="nodeAttrForm.dataMap" style="width: 100%"> type="datetimerange"
<el-table-column label="源字段" min-width="120"> range-separator="到"
<template #default="scope"> start-placeholder="开始时间"
<el-input v-model="scope.row.source" style="width: 100%" /> end-placeholder="结束时间"
</template> style="width: 100%;height: 100%"
</el-table-column> :value-format="nodeAttrForm?.format||'YYYY/MM/DD HH:mm:ss'"
<el-table-column label="映射字段" min-width="120"> :format="nodeAttrForm?.format||'YYYY/MM/DD HH:mm:ss'"
<template #default="scope"> />
<el-input v-model="scope.row.target" style="width: 100%" /> </el-form-item>
</template> <el-form-item label="日期格式" v-if="Object.keys(nodeAttrForm).includes('format')">
</el-table-column> <el-input v-model="nodeAttrForm.format" style="width: 100%" />
<el-table-column label="操作" min-width="120"> </el-form-item>
<template #default="scope"> <el-form-item label="输出字段名" v-if="Object.keys(nodeAttrForm).includes('field')">
<el-button link type="primary" size="small" @click="nodeAttrForm.dataMap.splice(scope.$index, 1)"> <el-input v-model="nodeAttrForm.field" />
删除 </el-form-item>
</el-button> <el-form-item label="开始时间字段名" v-if="Object.keys(nodeAttrForm).includes('startTimeId')">
</template> <el-input v-model="nodeAttrForm.startTimeId" />
</el-table-column> </el-form-item>
</el-table> <el-form-item label="结束时间字段名" v-if="Object.keys(nodeAttrForm).includes('endTimeId')">
<el-button style="width: 100%" @click="nodeAttrForm.dataMap.push({})"> <el-input v-model="nodeAttrForm.endTimeId" />
添加映射 </el-form-item>
</el-button> <el-form-item label="数据映射" v-if="Object.keys(nodeAttrForm).includes('dataMap')">
</el-form-item> <el-table :data="nodeAttrForm.dataMap" style="width: 100%">
<el-form-item label="内容" v-if="Object.keys(nodeAttrForm).includes('text')"> <el-table-column label="源字段" min-width="120">
<el-input v-model="nodeAttrForm.text" style="width: 100%" /> <template #default="scope">
</el-form-item> <el-input v-model="scope.row.source" style="width: 100%" />
<el-form-item label="对齐方式" v-if="Object.keys(nodeAttrForm).includes('align')"> </template>
<el-select </el-table-column>
v-model="nodeAttrForm.align" <el-table-column label="映射字段" min-width="120">
placeholder="Select" <template #default="scope">
style="width: 100%" <el-input v-model="scope.row.target" style="width: 100%" />
> </template>
<el-option </el-table-column>
label="左对齐" <el-table-column label="操作" min-width="120">
value="left" <template #default="scope">
/> <el-button link type="primary" size="small" @click="nodeAttrForm.dataMap.splice(scope.$index, 1)">
<el-option 删除
label="居中对齐" </el-button>
value="center" </template>
/> </el-table-column>
<el-option </el-table>
label="右对齐" <el-button style="width: 100%" @click="nodeAttrForm.dataMap.push({})">
value="right" 添加映射
/> </el-button>
</el-select> </el-form-item>
</el-form-item> <el-form-item label="内容" v-if="Object.keys(nodeAttrForm).includes('text')">
<el-form-item label="文字颜色" v-if="Object.keys(nodeAttrForm).includes('color')"> <el-input v-model="nodeAttrForm.text" style="width: 100%" />
<el-color-picker v-model="nodeAttrForm.color" show-alpha /> </el-form-item>
</el-form-item> <el-form-item label="对齐方式" v-if="Object.keys(nodeAttrForm).includes('align')">
<el-form-item label="图片路径" v-if="Object.keys(nodeAttrForm).includes('imgSrc')"> <el-select
<el-input v-model="nodeAttrForm.imgSrc" style="width: 100%" /> v-model="nodeAttrForm.align"
</el-form-item> placeholder="Select"
<el-form-item label="标题" v-if="Object.keys(nodeAttrForm).includes('title')"> style="width: 100%"
<el-input v-model="nodeAttrForm.title" style="width: 100%" /> >
</el-form-item> <el-option
<el-form-item label="数据名称" v-if="Object.keys(nodeAttrForm).includes('yNames')"> label="左对齐"
<el-input-tag v-model="nodeAttrForm.yNames" placeholder="回车确认" /> value="left"
</el-form-item> />
<el-form-item label="超时时间" v-if="Object.keys(nodeAttrForm).includes('timeout')"> <el-option
<el-input-number label="居中对齐"
v-model="nodeAttrForm.timeout" value="center"
:min="1000" />
:step="1000" <el-option
controls-position="right" label="右对齐"
/> value="right"
</el-form-item> />
</el-form> </el-select>
</el-form-item>
<el-form-item label="文字颜色" v-if="Object.keys(nodeAttrForm).includes('color')">
<el-color-picker v-model="nodeAttrForm.color" show-alpha />
</el-form-item>
<el-form-item label="图片路径" v-if="Object.keys(nodeAttrForm).includes('imgSrc')">
<el-input v-model="nodeAttrForm.imgSrc" style="width: 100%" />
</el-form-item>
<el-form-item label="标题" v-if="Object.keys(nodeAttrForm).includes('title')">
<el-input v-model="nodeAttrForm.title" style="width: 100%" />
</el-form-item>
<el-form-item label="数据名称" v-if="Object.keys(nodeAttrForm).includes('yNames')">
<el-input-tag v-model="nodeAttrForm.yNames" placeholder="回车确认" />
</el-form-item>
<el-form-item label="超时时间" v-if="Object.keys(nodeAttrForm).includes('timeout')">
<el-input-number
v-model="nodeAttrForm.timeout"
:min="1000"
:step="1000"
controls-position="right"
/>
</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> </div>
<el-dialog v-model="pageSettingVisible" title="页面设置" width="500"> <el-dialog v-model="pageSettingVisible" title="页面设置" width="500">
<el-form :model="pageSettingForm"> <el-form :model="pageSettingForm">
@ -389,8 +420,10 @@ const { onDragStart, onDrop, onDragOver } = tool();
// flow内置方法 // flow内置方法
const { const {
addEdges addEdges,
updateNode
} = useVueFlow(); } = useVueFlow();
console.log(updateNode);
const pageSettingVisible = ref(false); const pageSettingVisible = ref(false);
const pageSettingForm = ref({}); const pageSettingForm = ref({});
@ -418,7 +451,9 @@ onMounted(async () => {
edges.value = JSON.parse(localStorage.getItem('EDGES') || '[]'); edges.value = JSON.parse(localStorage.getItem('EDGES') || '[]');
pageData.value = JSON.parse(localStorage.getItem('PAGEDATA')); pageData.value = JSON.parse(localStorage.getItem('PAGEDATA'));
}); });
const customDataForm = ref({});
const nodeAttrForm = ref({}); const nodeAttrForm = ref({});
const nodeDataForm = ref({});
const logEvent = async (eventname, event) => { const logEvent = async (eventname, event) => {
switch (eventname) { switch (eventname) {
case 'connect': case 'connect':
@ -437,15 +472,23 @@ const logEvent = async (eventname, event) => {
break; break;
case 'paneClick': case 'paneClick':
nodeAttrForm.value = {}; nodeAttrForm.value = {};
nodeDataForm.value = {};
customDataForm.value = {};
break; break;
case 'click': case 'click':
nodeAttrForm.value = event.node.data.options; nodeAttrForm.value = event.node.data.options;
nodeDataForm.value = event.node;
customDataForm.value = event.node.data.customData;
break; break;
case 'nodeDrag': case 'nodeDrag':
if (event.nodes.length === 1) { if (event.nodes.length === 1) {
nodeAttrForm.value = event.node.data.options; nodeAttrForm.value = event.node.data.options;
nodeDataForm.value = event.node;
customDataForm.value = event.node.data.customData;
} else { } else {
nodeAttrForm.value = {}; nodeAttrForm.value = {};
nodeDataForm.value = {};
customDataForm.value = {};
} }
break; break;
case 'contextmenu': case 'contextmenu':

5
src/views/boardGenerate/nodes/board/barNode.vue
Unescape Escape View File

@ -209,6 +209,11 @@ watch(() => [JSON.parse(JSON.stringify(props.inputData)), JSON.parse(JSON.string
chart && chart.setOption(getOption(), true); chart && chart.setOption(getOption(), true);
} }
}, { deep: true, immediate: 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 emit = defineEmits(['resize']);
const resize = (e) => { const resize = (e) => {
chart.resize(); chart.resize();

5
src/views/boardGenerate/nodes/board/curveNode.vue
Unescape Escape View File

@ -216,6 +216,11 @@ watch(() => [JSON.parse(JSON.stringify(props.inputData)), JSON.parse(JSON.string
chart && chart.setOption(getOption(), true); chart && chart.setOption(getOption(), true);
} }
}, { deep: true, immediate: 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 emit = defineEmits(['resize']);
const resize = (e) => { const resize = (e) => {
chart.resize(); chart.resize();

5
src/views/boardGenerate/nodes/board/customBoardNode.vue
Unescape Escape View File

@ -94,6 +94,11 @@ watch(() => [JSON.parse(JSON.stringify(props.inputData)), JSON.parse(JSON.string
chart && chart.setOption(getOption(), true); chart && chart.setOption(getOption(), true);
} }
}, { deep: true, immediate: 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 emit = defineEmits(['resize']);
const resize = (e) => { const resize = (e) => {
chart.resize(); chart.resize();

5
src/views/boardGenerate/nodes/board/lineNode.vue
Unescape Escape View File

@ -216,6 +216,11 @@ watch(() => [JSON.parse(JSON.stringify(props.inputData)), JSON.parse(JSON.string
chart && chart.setOption(getOption(), true); chart && chart.setOption(getOption(), true);
} }
}, { deep: true, immediate: 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 emit = defineEmits(['resize']);
const resize = (e) => { const resize = (e) => {
chart.resize(); chart.resize();

5
src/views/boardGenerate/nodes/board/multiBarsNode.vue
Unescape Escape View File

@ -219,6 +219,11 @@ watch(() => [JSON.parse(JSON.stringify(props.inputData)), JSON.parse(JSON.string
} }
}, { deep: true, immediate: 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 emit = defineEmits(['resize']);
const resize = (e) => { const resize = (e) => {
chart.resize(); chart.resize();

5
src/views/boardGenerate/nodes/board/multiCurvesNode.vue
Unescape Escape View File

@ -225,6 +225,11 @@ watch(() => [JSON.parse(JSON.stringify(props.inputData)), JSON.parse(JSON.string
chart && chart.setOption(getOption(), true); chart && chart.setOption(getOption(), true);
} }
}, { deep: true, immediate: 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 emit = defineEmits(['resize']);
const resize = (e) => { const resize = (e) => {

5
src/views/boardGenerate/nodes/board/multiLinesNode.vue
Unescape Escape View File

@ -225,6 +225,11 @@ watch(() => [JSON.parse(JSON.stringify(props.inputData)), JSON.parse(JSON.string
chart && chart.setOption(getOption(), true); chart && chart.setOption(getOption(), true);
} }
}, { deep: true, immediate: 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 emit = defineEmits(['resize']);
const resize = (e) => { const resize = (e) => {

5
src/views/boardGenerate/nodes/board/pieNode.vue
Unescape Escape View File

@ -139,6 +139,11 @@ watch(() => [JSON.parse(JSON.stringify(props.inputData)), JSON.parse(JSON.string
chart && chart.setOption(getOption(), true); chart && chart.setOption(getOption(), true);
} }
}, { deep: true, immediate: 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 emit = defineEmits(['resize']);
const resize = (e) => { const resize = (e) => {
chart.resize(); chart.resize();

Write Preview
Loading…
Cancel
Save