feat: 新增示例
咬轮猫
3 years ago
parent
1a3529e354
commit
70e54d2eba
@ -0,0 +1,231 @@
|
||||
<template>
|
||||
<webtopo-svg-edit
|
||||
@on-return="onReturn"
|
||||
@on-preview="onPreview"
|
||||
@on-save="onSave"
|
||||
:custom-tool-bar="setCustomToolBar"
|
||||
></webtopo-svg-edit>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
// import { ref } from 'vue';
|
||||
import { IDataModel } from '@/components/webtopo-svg-edit/types';
|
||||
import { ref } from 'vue';
|
||||
// import { ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import WebtopoSvgEdit from '../../components/webtopo-svg-edit/index.vue';
|
||||
const setCustomToolBar = ref<any>({
|
||||
测试注入组件: [
|
||||
{
|
||||
groupType: 'element-ui',
|
||||
title: 'element-ui',
|
||||
list: [
|
||||
{
|
||||
name: 'el-button',
|
||||
tag: 'el-button',
|
||||
title: '按钮',
|
||||
type: 'Vue',
|
||||
config: {
|
||||
can_zoom: true,
|
||||
have_anchor: true,
|
||||
actual_rect: true
|
||||
},
|
||||
display: true,
|
||||
props: {
|
||||
size: {
|
||||
title: '尺寸',
|
||||
type: 'Select',
|
||||
val: 'default',
|
||||
options: [
|
||||
{
|
||||
label: '大',
|
||||
value: 'large'
|
||||
},
|
||||
{
|
||||
label: '默认',
|
||||
value: 'default'
|
||||
},
|
||||
{
|
||||
label: '小',
|
||||
value: 'small'
|
||||
}
|
||||
]
|
||||
},
|
||||
type: {
|
||||
title: '类型',
|
||||
type: 'Select',
|
||||
val: 'primary',
|
||||
options: [
|
||||
{
|
||||
label: '主要按钮',
|
||||
value: 'primary'
|
||||
},
|
||||
{
|
||||
label: '成功按钮',
|
||||
value: 'success'
|
||||
},
|
||||
{
|
||||
label: '警告按钮',
|
||||
value: 'warning'
|
||||
},
|
||||
{
|
||||
label: '危险按钮',
|
||||
value: 'danger'
|
||||
},
|
||||
{
|
||||
label: '信息按钮',
|
||||
value: 'info'
|
||||
}
|
||||
]
|
||||
},
|
||||
plain: {
|
||||
title: '朴素按钮',
|
||||
type: 'Switch',
|
||||
val: false
|
||||
},
|
||||
text: {
|
||||
title: '文字按钮',
|
||||
type: 'Switch',
|
||||
val: false
|
||||
}
|
||||
},
|
||||
tag_slot: '按钮'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
groupType: 'custom-vue',
|
||||
title: '自定义',
|
||||
list: [
|
||||
{
|
||||
name: 'custom-vue-common-table',
|
||||
title: '通用表格',
|
||||
tag: 'custom-vue-common-table',
|
||||
type: 'Vue',
|
||||
config: {
|
||||
can_zoom: true,
|
||||
have_anchor: true,
|
||||
actual_rect: true
|
||||
},
|
||||
display: true,
|
||||
props: {
|
||||
'col-config': {
|
||||
title: '列配置',
|
||||
type: 'JsonEdit',
|
||||
val: [
|
||||
{
|
||||
prop: 'date',
|
||||
label: '第一列',
|
||||
width: '120px',
|
||||
fixed: false,
|
||||
sortable: false,
|
||||
'show-overflow-tooltip': false
|
||||
},
|
||||
{
|
||||
prop: 'name',
|
||||
label: '第二列',
|
||||
width: '120px',
|
||||
fixed: false,
|
||||
sortable: false,
|
||||
'show-overflow-tooltip': false
|
||||
},
|
||||
{
|
||||
prop: 'address',
|
||||
label: '第三列测试',
|
||||
width: '280px',
|
||||
fixed: false,
|
||||
sortable: false,
|
||||
'show-overflow-tooltip': false
|
||||
}
|
||||
]
|
||||
},
|
||||
data: {
|
||||
title: '表格数据',
|
||||
type: 'JsonEdit',
|
||||
val: [
|
||||
{
|
||||
date: '2016-05-03',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles'
|
||||
},
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles'
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles'
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles'
|
||||
}
|
||||
]
|
||||
},
|
||||
height: {
|
||||
title: '高度',
|
||||
type: 'InputNumber',
|
||||
val: null
|
||||
},
|
||||
'max-height': {
|
||||
title: '最大高度',
|
||||
type: 'InputNumber',
|
||||
val: null
|
||||
},
|
||||
stripe: {
|
||||
title: '斑马纹',
|
||||
type: 'Switch',
|
||||
val: false
|
||||
},
|
||||
border: {
|
||||
title: '纵向边框',
|
||||
type: 'Switch',
|
||||
val: false
|
||||
},
|
||||
size: {
|
||||
title: '尺寸',
|
||||
type: 'Select',
|
||||
val: 'default',
|
||||
options: [
|
||||
{
|
||||
label: '大',
|
||||
value: 'large'
|
||||
},
|
||||
{
|
||||
label: '默认',
|
||||
value: 'default'
|
||||
},
|
||||
{
|
||||
label: '小',
|
||||
value: 'small'
|
||||
}
|
||||
]
|
||||
},
|
||||
fit: {
|
||||
title: '列宽自撑开',
|
||||
type: 'Switch',
|
||||
val: false
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
});
|
||||
const router = useRouter();
|
||||
const onReturn = () => {
|
||||
console.log('点击了返回按钮');
|
||||
router.go(-1);
|
||||
};
|
||||
const onPreview = (data_model: IDataModel) => {
|
||||
router.push({
|
||||
name: 'preview',
|
||||
params: { data_model: JSON.stringify(data_model) }
|
||||
});
|
||||
};
|
||||
const onSave = (data_model: IDataModel) => {
|
||||
console.log('点击了保存按钮，可以在此处将图存到数据库', data_model);
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,197 @@
|
||||
<template>
|
||||
<webtopo-svg-edit
|
||||
@on-return="onReturn"
|
||||
@on-preview="onPreview"
|
||||
@on-save="onSave"
|
||||
:data-model="import_model"
|
||||
></webtopo-svg-edit>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { IDataModel } from '@/components/webtopo-svg-edit/types';
|
||||
import { ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import WebtopoSvgEdit from '../../components/webtopo-svg-edit/index.vue';
|
||||
//我是从数据库获取到的数据
|
||||
const import_model = ref(
|
||||
JSON.stringify({
|
||||
layout_center: {
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
config: {
|
||||
background_color: '#fff',
|
||||
scale: 1,
|
||||
position_center: {
|
||||
x: -295,
|
||||
y: -95
|
||||
},
|
||||
svg_position_center: {
|
||||
x: 50,
|
||||
y: 50
|
||||
}
|
||||
},
|
||||
done_json: [
|
||||
{
|
||||
id: 'circuit-breakerCuFTG7Iy6F',
|
||||
x: 474,
|
||||
y: 226,
|
||||
client: {
|
||||
x: 474,
|
||||
y: 226
|
||||
},
|
||||
scale_x: 1,
|
||||
scale_y: 1,
|
||||
rotate: 0,
|
||||
actual_bound: {
|
||||
x: 23.1640625,
|
||||
y: 19.375,
|
||||
width: 61.201171875,
|
||||
height: 64.033203125
|
||||
},
|
||||
point_coordinate: {
|
||||
tl: {
|
||||
x: 443.3994140625,
|
||||
y: 193.9833984375
|
||||
},
|
||||
tc: {
|
||||
x: 474,
|
||||
y: 193.9833984375
|
||||
},
|
||||
tr: {
|
||||
x: 504.6005859375,
|
||||
y: 193.9833984375
|
||||
},
|
||||
l: {
|
||||
x: 443.3994140625,
|
||||
y: 226
|
||||
},
|
||||
r: {
|
||||
x: 504.6005859375,
|
||||
y: 226
|
||||
},
|
||||
bl: {
|
||||
x: 443.3994140625,
|
||||
y: 258.0166015625
|
||||
},
|
||||
bc: {
|
||||
x: 474,
|
||||
y: 258.0166015625
|
||||
},
|
||||
br: {
|
||||
x: 504.6005859375,
|
||||
y: 258.0166015625
|
||||
}
|
||||
},
|
||||
name: 'circuit-breaker',
|
||||
title: '断路器',
|
||||
type: 'File',
|
||||
config: {
|
||||
can_zoom: true,
|
||||
have_anchor: true,
|
||||
actual_rect: true
|
||||
},
|
||||
display: true,
|
||||
props: {},
|
||||
state: {
|
||||
OnOff: {
|
||||
title: '开关',
|
||||
default: false,
|
||||
props: {
|
||||
fill: {
|
||||
openVal: '#00ff00',
|
||||
closeVal: '#ff0000'
|
||||
},
|
||||
'fill-opacity': {
|
||||
openVal: '0',
|
||||
closeVal: '1'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
id: 'traction-transformer9nzBE9dPxm',
|
||||
x: 666,
|
||||
y: 170,
|
||||
client: {
|
||||
x: 666,
|
||||
y: 170
|
||||
},
|
||||
scale_x: 1,
|
||||
scale_y: 1,
|
||||
rotate: 0,
|
||||
actual_bound: {
|
||||
x: 35.416664123535156,
|
||||
y: 22.916667938232422,
|
||||
width: 26.858333587646484,
|
||||
height: 54.16874313354492
|
||||
},
|
||||
point_coordinate: {
|
||||
tl: {
|
||||
x: 652.5708332061768,
|
||||
y: 142.91562843322754
|
||||
},
|
||||
tc: {
|
||||
x: 666,
|
||||
y: 142.91562843322754
|
||||
},
|
||||
tr: {
|
||||
x: 679.4291667938232,
|
||||
y: 142.91562843322754
|
||||
},
|
||||
l: {
|
||||
x: 652.5708332061768,
|
||||
y: 170
|
||||
},
|
||||
r: {
|
||||
x: 679.4291667938232,
|
||||
y: 170
|
||||
},
|
||||
bl: {
|
||||
x: 652.5708332061768,
|
||||
y: 197.08437156677246
|
||||
},
|
||||
bc: {
|
||||
x: 666,
|
||||
y: 197.08437156677246
|
||||
},
|
||||
br: {
|
||||
x: 679.4291667938232,
|
||||
y: 197.08437156677246
|
||||
}
|
||||
},
|
||||
name: 'traction-transformer',
|
||||
title: '牵引变',
|
||||
type: 'File',
|
||||
config: {
|
||||
can_zoom: true,
|
||||
have_anchor: true,
|
||||
actual_rect: true
|
||||
},
|
||||
display: true,
|
||||
props: {
|
||||
fill: {
|
||||
title: '填充色',
|
||||
type: 'Color',
|
||||
val: '#ff0000'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
);
|
||||
const router = useRouter();
|
||||
const onReturn = () => {
|
||||
console.log('点击了返回按钮');
|
||||
router.go(-1);
|
||||
};
|
||||
const onPreview = (data_model: IDataModel) => {
|
||||
router.push({
|
||||
name: 'preview',
|
||||
params: { data_model: JSON.stringify(data_model) }
|
||||
});
|
||||
};
|
||||
const onSave = (data_model: IDataModel) => {
|
||||
console.log('点击了保存按钮，可以在此处将图存到数据库', data_model);
|
||||
};
|
||||
</script>
|
||||
@ -0,0 +1,94 @@
|
||||
<!-- eslint-disable vue/html-indent -->
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex justify-center">
|
||||
<div>
|
||||
<p class="mt-5">webtopo-svg-edit demo演示页面</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex mt-10px justify-center h-[calc(100vh-100px)]">
|
||||
<el-button
|
||||
type="primary"
|
||||
link
|
||||
v-for="item in button_list"
|
||||
:key="item.name"
|
||||
:title="item.title"
|
||||
@click="item.onClick"
|
||||
style="height: 20px"
|
||||
>{{ item.name }}</el-button
|
||||
>
|
||||
</div>
|
||||
<div class="h-40px bottom-el-footer">
|
||||
<bottom-panel></bottom-panel>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ElButton } from 'element-plus';
|
||||
import { reactive } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import BottomPanel from '@/components/webtopo-svg-edit/components/bottom-panel/index.vue';
|
||||
const router = useRouter();
|
||||
const button_list: IButtonList[] = reactive([
|
||||
{
|
||||
name: '编辑器页面',
|
||||
title: '基础功能之编辑器页面',
|
||||
onClick: () => {
|
||||
router.push({
|
||||
name: 'edit',
|
||||
params: {}
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '编辑器(加载已有数据)',
|
||||
title: '模拟从数据库加载数据',
|
||||
onClick: () => {
|
||||
router.push({
|
||||
name: 'edit-load',
|
||||
params: {}
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '自定义左侧组件库',
|
||||
title: '用自己的组件库替换现有组件库，一般是集成到自己项目时使用',
|
||||
onClick: () => {
|
||||
router.push({
|
||||
name: 'custom-toolbar',
|
||||
params: {}
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '加载保存好的页面',
|
||||
title: '模拟从数据库加载数据',
|
||||
onClick: () => {
|
||||
router.push({
|
||||
name: 'preview-test',
|
||||
params: {}
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '设置节点属性',
|
||||
title: '从插件外部设置节点属性',
|
||||
onClick: () => {
|
||||
router.push({
|
||||
name: 'set-node-attr',
|
||||
params: {}
|
||||
});
|
||||
}
|
||||
}
|
||||
]);
|
||||
interface IButtonList {
|
||||
name: string;
|
||||
title: string;
|
||||
onClick: () => void;
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.bottom-el-footer {
|
||||
box-shadow: 0px -1px 0px 0px #dfcfcf;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,130 @@
|
||||
<!-- eslint-disable vue/html-indent -->
|
||||
<template>
|
||||
<div>
|
||||
<el-button @click="openTest">打开开关</el-button>
|
||||
<el-button @click="closeTest">关闭开关</el-button>
|
||||
<webtopo-svg-preview
|
||||
ref="svgPreviewRef"
|
||||
:data-model="data_model"
|
||||
:canvas-drag="true"
|
||||
></webtopo-svg-preview>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import WebtopoSvgPreview from '@/components/webtopo-svg-preview/index.vue';
|
||||
import { ElButton } from 'element-plus';
|
||||
import { ref } from 'vue';
|
||||
const svgPreviewRef = ref<InstanceType<typeof WebtopoSvgPreview>>();
|
||||
const data_model = ref<any>({
|
||||
layout_center: {
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
config: {
|
||||
background_color: '#fff',
|
||||
scale: 1,
|
||||
position_center: {
|
||||
x: -295,
|
||||
y: -95
|
||||
},
|
||||
svg_position_center: {
|
||||
x: 50,
|
||||
y: 50
|
||||
}
|
||||
},
|
||||
done_json: [
|
||||
{
|
||||
id: 'circuit-breakerCkjuZ7Ql9C',
|
||||
x: 471,
|
||||
y: 222,
|
||||
client: {
|
||||
x: 471,
|
||||
y: 222
|
||||
},
|
||||
scale_x: 1,
|
||||
scale_y: 1,
|
||||
rotate: 0,
|
||||
actual_bound: {
|
||||
x: 23.1640625,
|
||||
y: 19.375,
|
||||
width: 61.201171875,
|
||||
height: 64.033203125
|
||||
},
|
||||
point_coordinate: {
|
||||
tl: {
|
||||
x: 440.3994140625,
|
||||
y: 189.9833984375
|
||||
},
|
||||
tc: {
|
||||
x: 471,
|
||||
y: 189.9833984375
|
||||
},
|
||||
tr: {
|
||||
x: 501.6005859375,
|
||||
y: 189.9833984375
|
||||
},
|
||||
l: {
|
||||
x: 440.3994140625,
|
||||
y: 222
|
||||
},
|
||||
r: {
|
||||
x: 501.6005859375,
|
||||
y: 222
|
||||
},
|
||||
bl: {
|
||||
x: 440.3994140625,
|
||||
y: 254.0166015625
|
||||
},
|
||||
bc: {
|
||||
x: 471,
|
||||
y: 254.0166015625
|
||||
},
|
||||
br: {
|
||||
x: 501.6005859375,
|
||||
y: 254.0166015625
|
||||
}
|
||||
},
|
||||
name: 'circuit-breaker',
|
||||
title: '断路器',
|
||||
type: 'File',
|
||||
config: {
|
||||
can_zoom: true,
|
||||
have_anchor: true,
|
||||
actual_rect: true
|
||||
},
|
||||
display: true,
|
||||
props: {},
|
||||
state: {
|
||||
OnOff: {
|
||||
title: '开关',
|
||||
default: false,
|
||||
props: {
|
||||
fill: {
|
||||
openVal: '#00ff00',
|
||||
closeVal: '#ff0000'
|
||||
},
|
||||
'fill-opacity': {
|
||||
openVal: '0',
|
||||
closeVal: '1'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
const openTest = () => {
|
||||
svgPreviewRef.value
|
||||
?.setNodeAttrByID('circuit-breakerCkjuZ7Ql9C', 'state.OnOff.default', true)
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
});
|
||||
};
|
||||
const closeTest = () => {
|
||||
svgPreviewRef.value
|
||||
?.setNodeAttrByID('circuit-breakerCkjuZ7Ql9C', 'state.OnOff.default', false)
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
});
|
||||
};
|
||||
</script>
|
||||
Loading…
Reference in New Issue