diff --git a/package.json b/package.json
index 46d2909..d15b53c 100644
--- a/package.json
+++ b/package.json
@@ -10,9 +10,11 @@
"postinstall": "husky install"
},
"dependencies": {
+ "echarts": "^5.4.1",
"element-plus": "^2.2.9",
"pinia": "^2.0.16",
"vue": "^3.2.25",
+ "vue-echarts": "^6.5.1",
"vue-router": "4"
},
"devDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 204153c..bfbae5d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -6,6 +6,7 @@ specifiers:
'@typescript-eslint/eslint-plugin': ^5.30.5
'@typescript-eslint/parser': ^5.30.5
'@vitejs/plugin-vue': ^2.3.3
+ echarts: ^5.4.1
element-plus: ^2.2.9
eslint: ^8.19.0
eslint-config-prettier: ^8.5.0
@@ -22,15 +23,18 @@ specifiers:
vite-plugin-svg-icons: ^2.0.1
vite-plugin-windicss: ^1.8.6
vue: ^3.2.25
+ vue-echarts: ^6.5.1
vue-eslint-parser: ^9.0.3
vue-router: '4'
vue-tsc: ^0.34.7
windicss: ^3.5.6
dependencies:
+ echarts: 5.4.1
element-plus: 2.2.9_vue@3.2.37
pinia: 2.0.17_j6bzmzd4ujpabbp5objtwxyjp4
vue: 3.2.37
+ vue-echarts: 6.5.1_echarts@5.4.1+vue@3.2.37
vue-router: 4.1.1_vue@3.2.37
devDependencies:
@@ -1377,6 +1381,13 @@ packages:
is-obj: 2.0.0
dev: true
+ /echarts/5.4.1:
+ resolution: {integrity: sha512-9ltS3M2JB0w2EhcYjCdmtrJ+6haZcW6acBolMGIuf01Hql1yrIV01L1aRj7jsaaIULJslEP9Z3vKlEmnJaWJVQ==}
+ dependencies:
+ tslib: 2.3.0
+ zrender: 5.4.1
+ dev: false
+
/element-plus/2.2.9_vue@3.2.37:
resolution: {integrity: sha512-jYbL0JkCdv95rkT6trZJjCAizLPySa0qcd2cgq+57SKQnCZAcNDDq4GbTuFRnNavdoeCJnuM3HIficTIUpsMOQ==}
peerDependencies:
@@ -3204,6 +3215,10 @@ packages:
engines: {node: '>=0.10.0'}
dev: true
+ /resize-detector/0.3.0:
+ resolution: {integrity: sha512-R/tCuvuOHQ8o2boRP6vgx8hXCCy87H1eY9V5imBYeVNyNVpuL9ciReSccLj2gDcax9+2weXy3bc8Vv+NRXeEvQ==}
+ dev: false
+
/resolve-from/4.0.0:
resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
engines: {node: '>=4'}
@@ -3657,6 +3672,10 @@ packages:
resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==}
dev: true
+ /tslib/2.3.0:
+ resolution: {integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==}
+ dev: false
+
/tslib/2.4.0:
resolution: {integrity: sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==}
dev: true
@@ -3851,6 +3870,23 @@ packages:
vue: 3.2.37
dev: false
+ /vue-echarts/6.5.1_echarts@5.4.1+vue@3.2.37:
+ resolution: {integrity: sha512-vlCX65ITq83xkOljip3juL8LyMd4cHOE6Zmp+9u1nPxPrar0irEtTwV80lkFm5yQM4Ef9X9fNdMa6gmsj75xYw==}
+ requiresBuild: true
+ peerDependencies:
+ '@vue/composition-api': ^1.0.5
+ echarts: ^5.4.1
+ vue: ^2.6.12 || ^3.1.1
+ peerDependenciesMeta:
+ '@vue/composition-api':
+ optional: true
+ dependencies:
+ echarts: 5.4.1
+ resize-detector: 0.3.0
+ vue: 3.2.37
+ vue-demi: 0.13.4_vue@3.2.37
+ dev: false
+
/vue-eslint-parser/9.0.3_eslint@8.19.0:
resolution: {integrity: sha512-yL+ZDb+9T0ELG4VIFo/2anAOz8SvBdlqEnQnvJ3M7Scq56DvtjY0VY88bByRZB0D4J0u8olBcfrXTVONXsh4og==}
engines: {node: ^14.17.0 || >=16.0.0}
@@ -3980,3 +4016,9 @@ packages:
resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
engines: {node: '>=10'}
dev: true
+
+ /zrender/5.4.1:
+ resolution: {integrity: sha512-M4Z05BHWtajY2241EmMPHglDQAJ1UyHQcYsxDNzD9XLSkPDqMq4bB28v9Pb4mvHnVQ0GxyTklZ/69xCFP6RXBA==}
+ dependencies:
+ tslib: 2.3.0
+ dev: false
diff --git a/src/assets/svgs/custom-vue-common-table.svg b/src/assets/svgs/custom-vue-common-table.svg
new file mode 100644
index 0000000..bfcb4b9
--- /dev/null
+++ b/src/assets/svgs/custom-vue-common-table.svg
@@ -0,0 +1,7 @@
+
\ No newline at end of file
diff --git a/src/assets/svgs/pie-charts.svg b/src/assets/svgs/pie-charts.svg
new file mode 100644
index 0000000..fefd7b3
--- /dev/null
+++ b/src/assets/svgs/pie-charts.svg
@@ -0,0 +1,10 @@
+
\ No newline at end of file
diff --git a/src/components/webtopo-svgedit/components/center-panel/index.vue b/src/components/webtopo-svgedit/components/center-panel/index.vue
index 68d884b..bd182de 100644
--- a/src/components/webtopo-svgedit/components/center-panel/index.vue
+++ b/src/components/webtopo-svgedit/components/center-panel/index.vue
@@ -76,8 +76,7 @@
>
.canvas {
diff --git a/src/components/webtopo-svgedit/components/custom-vue/common-table/index.vue b/src/components/webtopo-svgedit/components/custom-vue/common-table/index.vue
new file mode 100644
index 0000000..00432ce
--- /dev/null
+++ b/src/components/webtopo-svgedit/components/custom-vue/common-table/index.vue
@@ -0,0 +1,71 @@
+
+
+
+
+
+
+
+
diff --git a/src/components/webtopo-svgedit/components/echarts/pie-charts/index.vue b/src/components/webtopo-svgedit/components/echarts/pie-charts/index.vue
new file mode 100644
index 0000000..82f9b45
--- /dev/null
+++ b/src/components/webtopo-svgedit/components/echarts/pie-charts/index.vue
@@ -0,0 +1,60 @@
+
+
+
+
+
+
+
diff --git a/src/components/webtopo-svgedit/components/left-panel/index.vue b/src/components/webtopo-svgedit/components/left-panel/index.vue
index be54998..78ccc25 100644
--- a/src/components/webtopo-svgedit/components/left-panel/index.vue
+++ b/src/components/webtopo-svgedit/components/left-panel/index.vue
@@ -56,7 +56,9 @@
'stateless',
'have_animation',
'custom_svg_group',
- 'element-ui'
+ 'element-ui',
+ 'custom-vue',
+ 'echarts'
]);
const libChange = (val: any) => {
config_center.value = [];
diff --git a/src/config-center/index.ts b/src/config-center/index.ts
index 9e0973d..c3e2db4 100644
--- a/src/config-center/index.ts
+++ b/src/config-center/index.ts
@@ -3,6 +3,8 @@ import { IComponentImport, IConfigCenter } from './types';
import customSvgText from '@/components/webtopo-svgedit/components/custom-svg/custom-svg-text/index.vue';
import { vue_config_center } from './vue';
import { ElButton, ElTag } from 'element-plus';
+import CommonTable from '@/components/webtopo-svgedit/components/custom-vue/common-table/index.vue';
+import PieCharts from '@/components/webtopo-svgedit/components/echarts/pie-charts/index.vue';
export const configCenter: IConfigCenter = {
svg文件: svgfile_config_center,
vue组件: vue_config_center
@@ -10,5 +12,7 @@ export const configCenter: IConfigCenter = {
export const ComponentImport: IComponentImport = {
'custom-svg-text': customSvgText,
'el-button': ElButton,
- 'el-tag': ElTag
+ 'el-tag': ElTag,
+ 'custom-vue-common-table': CommonTable,
+ 'pie-charts': PieCharts
};
diff --git a/src/config-center/vue/custom-vue/common-table/index.ts b/src/config-center/vue/custom-vue/common-table/index.ts
new file mode 100644
index 0000000..d42bbd9
--- /dev/null
+++ b/src/config-center/vue/custom-vue/common-table/index.ts
@@ -0,0 +1,115 @@
+import { EConfigItemPropsType, EDoneJsonType, IConfigItem } from '@/config-center/types';
+
+export const custom_vue_common_table: IConfigItem = {
+ name: 'custom-vue-common-table',
+ title: '通用表格',
+ tag: 'custom-vue-common-table',
+ type: EDoneJsonType.Vue,
+ config: {
+ can_zoom: true,
+ have_anchor: true,
+ actual_rect: true
+ },
+ props: {
+ 'col-config': {
+ title: '列配置',
+ type: EConfigItemPropsType.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: EConfigItemPropsType.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: EConfigItemPropsType.InputNumber,
+ val: null
+ },
+ 'max-height': {
+ title: '最大高度',
+ type: EConfigItemPropsType.InputNumber,
+ val: null
+ },
+ stripe: {
+ title: '斑马纹',
+ type: EConfigItemPropsType.Switch,
+ val: false
+ },
+ border: {
+ title: '纵向边框',
+ type: EConfigItemPropsType.Switch,
+ val: false
+ },
+ size: {
+ title: '尺寸',
+ type: EConfigItemPropsType.Select,
+ val: 'default',
+ options: [
+ {
+ label: '大',
+ value: 'large'
+ },
+ {
+ label: '默认',
+ value: 'default'
+ },
+ {
+ label: '小',
+ value: 'small'
+ }
+ ]
+ },
+ fit: {
+ title: '列宽自撑开',
+ type: EConfigItemPropsType.Switch,
+ val: false
+ }
+ }
+};
diff --git a/src/config-center/vue/custom-vue/index.ts b/src/config-center/vue/custom-vue/index.ts
new file mode 100644
index 0000000..7003f35
--- /dev/null
+++ b/src/config-center/vue/custom-vue/index.ts
@@ -0,0 +1,9 @@
+import { IConfigComponentGroup } from '@/config-center/types';
+
+import { custom_vue_common_table } from './common-table';
+
+export const custom_vue_group: IConfigComponentGroup = {
+ groupType: 'custom-vue',
+ title: '自定义',
+ list: [custom_vue_common_table]
+};
diff --git a/src/config-center/vue/echarts/index.ts b/src/config-center/vue/echarts/index.ts
new file mode 100644
index 0000000..1746903
--- /dev/null
+++ b/src/config-center/vue/echarts/index.ts
@@ -0,0 +1,8 @@
+import { IConfigComponentGroup } from '@/config-center/types';
+import { pie_charts } from './pie-charts';
+
+export const echarts_group: IConfigComponentGroup = {
+ groupType: 'echarts',
+ title: 'echarts图表',
+ list: [pie_charts]
+};
diff --git a/src/config-center/vue/echarts/pie-charts/index.ts b/src/config-center/vue/echarts/pie-charts/index.ts
new file mode 100644
index 0000000..fec931d
--- /dev/null
+++ b/src/config-center/vue/echarts/pie-charts/index.ts
@@ -0,0 +1,14 @@
+import { EDoneJsonType, IConfigItem } from '../../../types';
+
+export const pie_charts: IConfigItem = {
+ name: 'pie-charts',
+ tag: 'pie-charts',
+ title: '饼图',
+ type: EDoneJsonType.Vue,
+ config: {
+ can_zoom: true,
+ have_anchor: true,
+ actual_rect: true
+ },
+ props: {}
+};
diff --git a/src/config-center/vue/index.ts b/src/config-center/vue/index.ts
index 3380e38..909bcf5 100644
--- a/src/config-center/vue/index.ts
+++ b/src/config-center/vue/index.ts
@@ -1,4 +1,10 @@
import { IConfigComponentGroup } from '../types';
+import { custom_vue_group } from './custom-vue';
+import { echarts_group } from './echarts';
import { element_ui_group } from './element-ui';
-export const vue_config_center: IConfigComponentGroup[] = Object.seal([element_ui_group]);
+export const vue_config_center: IConfigComponentGroup[] = Object.seal([
+ element_ui_group,
+ custom_vue_group,
+ echarts_group
+]);
diff --git a/src/store/global/index.ts b/src/store/global/index.ts
index ab72fdb..a5589cc 100644
--- a/src/store/global/index.ts
+++ b/src/store/global/index.ts
@@ -66,7 +66,7 @@ export const useGlobalStore = defineStore('global-store', {
this.create_svg_info = create_svg_info;
},
setDoneJson(done_json: IDoneJson[] | IDoneJson) {
- console.log('这里要记录操作历史记录');
+ console.log('这里要记录操作历史记录', done_json);
if (isOfType(done_json, 'id')) {
this.done_json.push(done_json);
nextTick(() => {
diff --git a/src/utils/index.ts b/src/utils/index.ts
index ce6e87c..99f12a2 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -120,7 +120,7 @@ export const objectDeepClone = (object: object, default_val: any = {}) => {
*/
export const setSvgActualInfo = (done_json: IDoneJson) => {
const queryBbox = document.querySelector(`#${done_json.id}`);
- // const rectBBox = document.querySelector(`#rect${done_json.id}`);
+ const rectBBox = document.querySelector(`#rect${done_json.id}`);
if (queryBbox) {
let x = 0,
y = 0,
@@ -134,22 +134,46 @@ export const setSvgActualInfo = (done_json: IDoneJson) => {
} else {
(width = (queryBbox as HTMLElement).offsetWidth),
(height = (queryBbox as HTMLElement).offsetHeight);
+ width = width === 0 ? 100 : width;
+ height = height === 0 ? 100 : height;
x = 50 - width / 2;
y = 50 - height / 2;
const foreignObjectBox = document.querySelector(`#foreign-object${done_json.id}`);
- if (foreignObjectBox) {
+ if (
+ foreignObjectBox &&
+ foreignObjectBox.getAttribute('x') === '0' &&
+ foreignObjectBox.getAttribute('y') === '0' &&
+ foreignObjectBox.getAttribute('width') === '0' &&
+ foreignObjectBox.getAttribute('height') === '0'
+ ) {
foreignObjectBox.setAttribute('x', x.toString());
foreignObjectBox.setAttribute('y', y.toString());
foreignObjectBox.setAttribute('width', width.toString());
foreignObjectBox.setAttribute('height', height.toString());
}
}
-
- // rectBBox.setAttribute('x', x.toString());
- // rectBBox.setAttribute('y', y.toString());
- // rectBBox.setAttribute('width', width.toString());
- // rectBBox.setAttribute('height', height.toString());
- done_json.actual_bound = { x, y, width, height };
+ if (
+ rectBBox &&
+ rectBBox.getAttribute('x') === '0' &&
+ rectBBox.getAttribute('y') === '0' &&
+ rectBBox.getAttribute('width') === '0' &&
+ rectBBox.getAttribute('height') === '0'
+ ) {
+ console.log(rectBBox.getAttribute('x'), 168);
+ rectBBox.setAttribute('x', x.toString());
+ rectBBox.setAttribute('y', y.toString());
+ rectBBox.setAttribute('width', width.toString());
+ rectBBox.setAttribute('height', height.toString());
+ }
+ //实际大小和坐标理论上不会变 但是如果子组件设置了100% 还是会变 所以要做下判断
+ if (
+ done_json.actual_bound.x === 0 &&
+ done_json.actual_bound.y === 0 &&
+ done_json.actual_bound.width === 0 &&
+ done_json.actual_bound.height === 0
+ ) {
+ done_json.actual_bound = { x, y, width, height };
+ }
done_json.point_coordinate.tl = {
x: done_json.x - (width * done_json.scale_x) / 2,
y: done_json.y - (height * done_json.scale_y) / 2