From 4ae7311674d6f513f06968f13d21e3aa639f697f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=92=AC=E8=BD=AE=E7=8C=AB?= <10928033@qq.com> Date: Mon, 16 Jan 2023 21:17:33 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E4=BA=86=E8=87=AA?= =?UTF-8?q?=E5=AE=9A=E4=B9=89=E7=BB=84=E4=BB=B6=E5=92=8Cecharts=E4=BD=BF?= =?UTF-8?q?=E7=94=A8demo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 + pnpm-lock.yaml | 42 +++++++ src/assets/svgs/custom-vue-common-table.svg | 7 ++ src/assets/svgs/pie-charts.svg | 10 ++ .../components/center-panel/index.vue | 33 ++--- .../custom-vue/common-table/index.vue | 71 +++++++++++ .../components/echarts/pie-charts/index.vue | 60 +++++++++ .../components/left-panel/index.vue | 4 +- src/config-center/index.ts | 6 +- .../vue/custom-vue/common-table/index.ts | 115 ++++++++++++++++++ src/config-center/vue/custom-vue/index.ts | 9 ++ src/config-center/vue/echarts/index.ts | 8 ++ .../vue/echarts/pie-charts/index.ts | 14 +++ src/config-center/vue/index.ts | 8 +- src/store/global/index.ts | 2 +- src/utils/index.ts | 40 ++++-- 16 files changed, 405 insertions(+), 26 deletions(-) create mode 100644 src/assets/svgs/custom-vue-common-table.svg create mode 100644 src/assets/svgs/pie-charts.svg create mode 100644 src/components/webtopo-svgedit/components/custom-vue/common-table/index.vue create mode 100644 src/components/webtopo-svgedit/components/echarts/pie-charts/index.vue create mode 100644 src/config-center/vue/custom-vue/common-table/index.ts create mode 100644 src/config-center/vue/custom-vue/index.ts create mode 100644 src/config-center/vue/echarts/index.ts create mode 100644 src/config-center/vue/echarts/pie-charts/index.ts 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