Skip to content

Commit

Permalink
新增图表(雷达,散点,饼图,地图,树图...)
Browse files Browse the repository at this point in the history
  • Loading branch information
xiaoai7904 committed Mar 13, 2020
1 parent aeb0882 commit 800a686
Show file tree
Hide file tree
Showing 102 changed files with 3,014 additions and 117 deletions.
11 changes: 9 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,15 @@

[在线预览](https://xiaoai7904.github.io/web_designer)

### 项目截图
### 项目部分截图
* 页面设计区
![](src/assets/1.png)
* 图表样式设置可视化配置
![](src/assets/2.png)
* 图表样式设置代码编辑
![](src/assets/3.png)
* 页面预览
![](src/assets/4.png)
### 介绍:
* 项目使用了`Vue`进行开发
* 网页设计器图形化工具,目前内置`ElementUi`组件库
Expand All @@ -20,7 +27,7 @@ npm run dev
```

### 项目使用介绍
* 通过拖拽左侧组件图标,放置中间画布区,进行页面排版
* 通过拖拽左侧组件图标,放置中间画布区,进行页面排版,设计区右侧面板可以对组件属性进行设置
* 点击右侧顶部保存按钮(数据保存在本地浏览器`localStorage`)可以进行数据保存
* 点击右侧顶部预览按钮,可以对页面布局进行预览
* 点击右侧顶部发布按钮,会调用设计器后台服务进行页面生成和代码生成,生成完成之后会在项目根目录生成`runtime/vue_cli_3.x-master`文件夹,里面的代码可以进行二次开发(基于vue cli 3.x版本)
Expand Down
1 change: 0 additions & 1 deletion docs/css/index.1f7250f6.css

This file was deleted.

1 change: 1 addition & 0 deletions docs/css/index.ceb488d9.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/index.html
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=favicon.ico><link rel=stylesheet href=//at.alicdn.com/t/font_1517251_4i80dzq2iq6.css><title>web Designer</title><link href=css/chunk-5269b5f1.31dbc325.css rel=prefetch><link href=js_202003111850/chunk-2d0a3577.08dcc637.js rel=prefetch><link href=js_202003111850/chunk-2d0a43df.08dcc637.js rel=prefetch><link href=js_202003111850/chunk-2d0aa90c.08dcc637.js rel=prefetch><link href=js_202003111850/chunk-2d0aab07.08dcc637.js rel=prefetch><link href=js_202003111850/chunk-2d0abc00.08dcc637.js rel=prefetch><link href=js_202003111850/chunk-2d0ae937.08dcc637.js rel=prefetch><link href=js_202003111850/chunk-2d0aeb45.08dcc637.js rel=prefetch><link href=js_202003111850/chunk-2d0af08c.08dcc637.js rel=prefetch><link href=js_202003111850/chunk-2d0afa49.08dcc637.js rel=prefetch><link href=js_202003111850/chunk-2d0b6187.08dcc637.js rel=prefetch><link href=js_202003111850/chunk-2d0ba136.08dcc637.js rel=prefetch><link href=js_202003111850/chunk-2d0bb267.08dcc637.js rel=prefetch><link href=js_202003111850/chunk-2d0bcec1.08dcc637.js rel=prefetch><link href=js_202003111850/chunk-2d0bff92.08dcc637.js rel=prefetch><link href=js_202003111850/chunk-2d0c0494.08dcc637.js rel=prefetch><link href=js_202003111850/chunk-2d0c0a09.08dcc637.js rel=prefetch><link href=js_202003111850/chunk-2d0c1ed0.08dcc637.js rel=prefetch><link href=js_202003111850/chunk-2d0c4313.08dcc637.js rel=prefetch><link href=js_202003111850/chunk-2d0c46d1.08dcc637.js rel=prefetch><link href=js_202003111850/chunk-2d0c512b.08dcc637.js rel=prefetch><link href=js_202003111850/chunk-2d0cf16e.08dcc637.js rel=prefetch><link href=js_202003111850/chunk-2d0d056d.08dcc637.js rel=prefetch><link href=js_202003111850/chunk-2d0d0645.08dcc637.js rel=prefetch><link href=js_202003111850/chunk-2d0d2f22.08dcc637.js rel=prefetch><link href=js_202003111850/chunk-2d0d61fd.08dcc637.js rel=prefetch><link href=js_202003111850/chunk-2d0d7e63.08dcc637.js rel=prefetch><link href=js_202003111850/chunk-2d0e1b57.08dcc637.js rel=prefetch><link href=js_202003111850/chunk-2d0e1fbe.08dcc637.js rel=prefetch><link href=js_202003111850/chunk-2d0e22d6.08dcc637.js rel=prefetch><link href=js_202003111850/chunk-2d0e542a.08dcc637.js rel=prefetch><link href=js_202003111850/chunk-2d0e57ec.08dcc637.js rel=prefetch><link href=js_202003111850/chunk-2d0e6553.08dcc637.js rel=prefetch><link href=js_202003111850/chunk-2d0e6c86.08dcc637.js rel=prefetch><link href=js_202003111850/chunk-2d0ea098.08dcc637.js rel=prefetch><link href=js_202003111850/chunk-2d0f0a11.08dcc637.js rel=prefetch><link href=js_202003111850/chunk-2d208ac5.08dcc637.js rel=prefetch><link href=js_202003111850/chunk-2d209408.08dcc637.js rel=prefetch><link href=js_202003111850/chunk-2d20f745.08dcc637.js rel=prefetch><link href=js_202003111850/chunk-2d20ff23.08dcc637.js rel=prefetch><link href=js_202003111850/chunk-2d2138c7.08dcc637.js rel=prefetch><link href=js_202003111850/chunk-2d216f3b.08dcc637.js rel=prefetch><link href=js_202003111850/chunk-2d217e5b.08dcc637.js rel=prefetch><link href=js_202003111850/chunk-2d21b84a.08dcc637.js rel=prefetch><link href=js_202003111850/chunk-2d21dcd2.08dcc637.js rel=prefetch><link href=js_202003111850/chunk-2d21f327.08dcc637.js rel=prefetch><link href=js_202003111850/chunk-2d2214b3.08dcc637.js rel=prefetch><link href=js_202003111850/chunk-2d221799.08dcc637.js rel=prefetch><link href=js_202003111850/chunk-2d221814.08dcc637.js rel=prefetch><link href=js_202003111850/chunk-2d221a34.08dcc637.js rel=prefetch><link href=js_202003111850/chunk-2d22502a.08dcc637.js rel=prefetch><link href=js_202003111850/chunk-2d226775.08dcc637.js rel=prefetch><link href=js_202003111850/chunk-2d228ca6.08dcc637.js rel=prefetch><link href=js_202003111850/chunk-2d2295e9.08dcc637.js rel=prefetch><link href=js_202003111850/chunk-2d22c171.08dcc637.js rel=prefetch><link href=js_202003111850/chunk-2d22c2b8.08dcc637.js rel=prefetch><link href=js_202003111850/chunk-2d22ca58.08dcc637.js rel=prefetch><link href=js_202003111850/chunk-2d2311f7.08dcc637.js rel=prefetch><link href=js_202003111850/chunk-2d237ee7.08dcc637.js rel=prefetch><link href=js_202003111850/chunk-2d238465.08dcc637.js rel=prefetch><link href=js_202003111850/chunk-5269b5f1.08dcc637.js rel=prefetch><link href=js_202003111850/chunk-7459c510.08dcc637.js rel=prefetch><link href=js_202003111850/chunk-7532b3ea.08dcc637.js rel=prefetch><link href=js_202003111850/chunk-774ac664.08dcc637.js rel=prefetch><link href=css/chunk-vendors.363289a0.css rel=preload as=style><link href=css/index.1f7250f6.css rel=preload as=style><link href=js_202003111850/chunk-vendors.08dcc637.js rel=preload as=script><link href=js_202003111850/index.08dcc637.js rel=preload as=script><link href=css/chunk-vendors.363289a0.css rel=stylesheet><link href=css/index.1f7250f6.css rel=stylesheet></head><body><noscript><strong>We're sorry but web Designer doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=js_202003111850/chunk-vendors.08dcc637.js></script><script src=js_202003111850/index.08dcc637.js></script></body></html>
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=favicon.ico><link rel=stylesheet href=//at.alicdn.com/t/font_1517251_4v8bi3btfc3.css><title>web Designer</title><link href=css/chunk-5269b5f1.31dbc325.css rel=prefetch><link href=js_202003131729/chunk-2d0a3577.c7b1604c.js rel=prefetch><link href=js_202003131729/chunk-2d0a43df.c7b1604c.js rel=prefetch><link href=js_202003131729/chunk-2d0aa90c.c7b1604c.js rel=prefetch><link href=js_202003131729/chunk-2d0aab07.c7b1604c.js rel=prefetch><link href=js_202003131729/chunk-2d0abc00.c7b1604c.js rel=prefetch><link href=js_202003131729/chunk-2d0ae937.c7b1604c.js rel=prefetch><link href=js_202003131729/chunk-2d0aeb45.c7b1604c.js rel=prefetch><link href=js_202003131729/chunk-2d0af08c.c7b1604c.js rel=prefetch><link href=js_202003131729/chunk-2d0afa49.c7b1604c.js rel=prefetch><link href=js_202003131729/chunk-2d0b6187.c7b1604c.js rel=prefetch><link href=js_202003131729/chunk-2d0ba136.c7b1604c.js rel=prefetch><link href=js_202003131729/chunk-2d0bb267.c7b1604c.js rel=prefetch><link href=js_202003131729/chunk-2d0bcec1.c7b1604c.js rel=prefetch><link href=js_202003131729/chunk-2d0bff92.c7b1604c.js rel=prefetch><link href=js_202003131729/chunk-2d0c0494.c7b1604c.js rel=prefetch><link href=js_202003131729/chunk-2d0c0a09.c7b1604c.js rel=prefetch><link href=js_202003131729/chunk-2d0c1ed0.c7b1604c.js rel=prefetch><link href=js_202003131729/chunk-2d0c4313.c7b1604c.js rel=prefetch><link href=js_202003131729/chunk-2d0c46d1.c7b1604c.js rel=prefetch><link href=js_202003131729/chunk-2d0c512b.c7b1604c.js rel=prefetch><link href=js_202003131729/chunk-2d0cf16e.c7b1604c.js rel=prefetch><link href=js_202003131729/chunk-2d0d056d.c7b1604c.js rel=prefetch><link href=js_202003131729/chunk-2d0d0645.c7b1604c.js rel=prefetch><link href=js_202003131729/chunk-2d0d2f22.c7b1604c.js rel=prefetch><link href=js_202003131729/chunk-2d0d61fd.c7b1604c.js rel=prefetch><link href=js_202003131729/chunk-2d0d7e63.c7b1604c.js rel=prefetch><link href=js_202003131729/chunk-2d0e1b57.c7b1604c.js rel=prefetch><link href=js_202003131729/chunk-2d0e1fbe.c7b1604c.js rel=prefetch><link href=js_202003131729/chunk-2d0e22d6.c7b1604c.js rel=prefetch><link href=js_202003131729/chunk-2d0e542a.c7b1604c.js rel=prefetch><link href=js_202003131729/chunk-2d0e57ec.c7b1604c.js rel=prefetch><link href=js_202003131729/chunk-2d0e6553.c7b1604c.js rel=prefetch><link href=js_202003131729/chunk-2d0e6c86.c7b1604c.js rel=prefetch><link href=js_202003131729/chunk-2d0ea098.c7b1604c.js rel=prefetch><link href=js_202003131729/chunk-2d0f0a11.c7b1604c.js rel=prefetch><link href=js_202003131729/chunk-2d208ac5.c7b1604c.js rel=prefetch><link href=js_202003131729/chunk-2d209408.c7b1604c.js rel=prefetch><link href=js_202003131729/chunk-2d20f745.c7b1604c.js rel=prefetch><link href=js_202003131729/chunk-2d20ff23.c7b1604c.js rel=prefetch><link href=js_202003131729/chunk-2d2138c7.c7b1604c.js rel=prefetch><link href=js_202003131729/chunk-2d216f3b.c7b1604c.js rel=prefetch><link href=js_202003131729/chunk-2d217e5b.c7b1604c.js rel=prefetch><link href=js_202003131729/chunk-2d21b84a.c7b1604c.js rel=prefetch><link href=js_202003131729/chunk-2d21dcd2.c7b1604c.js rel=prefetch><link href=js_202003131729/chunk-2d21f327.c7b1604c.js rel=prefetch><link href=js_202003131729/chunk-2d2214b3.c7b1604c.js rel=prefetch><link href=js_202003131729/chunk-2d221799.c7b1604c.js rel=prefetch><link href=js_202003131729/chunk-2d221814.c7b1604c.js rel=prefetch><link href=js_202003131729/chunk-2d221a34.c7b1604c.js rel=prefetch><link href=js_202003131729/chunk-2d22502a.c7b1604c.js rel=prefetch><link href=js_202003131729/chunk-2d226775.c7b1604c.js rel=prefetch><link href=js_202003131729/chunk-2d228ca6.c7b1604c.js rel=prefetch><link href=js_202003131729/chunk-2d2295e9.c7b1604c.js rel=prefetch><link href=js_202003131729/chunk-2d22c171.c7b1604c.js rel=prefetch><link href=js_202003131729/chunk-2d22c2b8.c7b1604c.js rel=prefetch><link href=js_202003131729/chunk-2d22ca58.c7b1604c.js rel=prefetch><link href=js_202003131729/chunk-2d2311f7.c7b1604c.js rel=prefetch><link href=js_202003131729/chunk-2d237ee7.c7b1604c.js rel=prefetch><link href=js_202003131729/chunk-2d238465.c7b1604c.js rel=prefetch><link href=js_202003131729/chunk-5269b5f1.c7b1604c.js rel=prefetch><link href=js_202003131729/chunk-7459c510.c7b1604c.js rel=prefetch><link href=js_202003131729/chunk-7532b3ea.c7b1604c.js rel=prefetch><link href=js_202003131729/chunk-774ac664.c7b1604c.js rel=prefetch><link href=css/chunk-vendors.363289a0.css rel=preload as=style><link href=css/index.ceb488d9.css rel=preload as=style><link href=js_202003131729/chunk-vendors.c7b1604c.js rel=preload as=script><link href=js_202003131729/index.c7b1604c.js rel=preload as=script><link href=css/chunk-vendors.363289a0.css rel=stylesheet><link href=css/index.ceb488d9.css rel=stylesheet></head><body><noscript><strong>We're sorry but web Designer doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=js_202003131729/chunk-vendors.c7b1604c.js></script><script src=js_202003131729/index.c7b1604c.js></script></body></html>
1 change: 0 additions & 1 deletion docs/js_202003111850/index.08dcc637.js

This file was deleted.

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions docs/js_202003131729/index.c7b1604c.js

Large diffs are not rendered by default.

14 changes: 14 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
"dependencies": {
"axios": "^0.19.0",
"echarts": "^4.6.0",
"echarts-gl": "^1.1.1",
"lodash": "^4.17.15",
"monaco-editor": "0.18.1",
"monaco-editor-webpack-plugin": "1.7.0",
Expand Down
2 changes: 1 addition & 1 deletion public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="stylesheet" href="//at.alicdn.com/t/font_1517251_4i80dzq2iq6.css">
<link rel="stylesheet" href="//at.alicdn.com/t/font_1517251_4v8bi3btfc3.css">
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script> -->
<title>web Designer</title>
</head>
Expand Down
Binary file modified src/assets/1.png
100644 → 100755
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/3.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/4.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
13 changes: 9 additions & 4 deletions src/components/codeEditor/codeEditor.vue
Original file line number Diff line number Diff line change
Expand Up @@ -43,14 +43,14 @@ export default class CodeEditor extends Vue {
language: this.language || 'javascript',
theme: 'vs-dark'
})
console.log(monacoEditor)
window.Uidesigner.$event.trigger('open_code_editor', true)
// monacoEditor
window.Uidesigner.$event.trigger('open_code_editor', true)
// 格式化代码
this.formatDocument()
})
}
destroyed() {
window.Uidesigner.$event.trigger('open_code_editor', false)
window.Uidesigner.$event.trigger('open_code_editor', false)
monacoEditor.dispose()
monacoEditor = null
}
Expand All @@ -72,6 +72,11 @@ export default class CodeEditor extends Vue {
return error
}
}
formatDocument() {
setTimeout(() => {
monacoEditor.trigger('anyString', 'editor.action.formatDocument');
}, 100)
}
render(h) {
return <div id="codeEditor" class="code-editor"></div>
Expand Down
5 changes: 3 additions & 2 deletions src/components/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,13 @@ import itemList from './itemList/itemList';
import pageIconsView from './pageIconsView/pageIconsView';
import pageDialogView from './pageDialogView/pageDialogView'
import StyleSetting from './styleSetting/styleSetting'

import CodeEditor from '@/components/codeEditor/codeEditor';
const components = {
itemList,
pageIconsView,
pageDialogView,
StyleSetting
StyleSetting,
CodeEditor
};

export const installFn = function() {
Expand Down
10 changes: 7 additions & 3 deletions src/components/pageFormView/builtin.js
Original file line number Diff line number Diff line change
Expand Up @@ -164,14 +164,18 @@ export const createItem = (h, item, vm) => {
</el-button>
<pageDialogView
ref="styleSettingDialogView"
options={{ title: '图表样式设置', width: '1100px', classname: 'chart-style-setting' }}
options={{ title: '图表样式设置', width: '1200px', classname: 'chart-style-setting' }}
on-confirmDialog={id => {
let { chartConfig } = vm.handlerData('props', 'get');
let chartConfig
chartConfig = vm.$refs.styleSettingRef.getValue()
if(!chartConfig) {
chartConfig = vm.handlerData('props', 'get').chartConfig;
}
let currentPlugins = vm.$store.state.currentPlugins[0];
vm.$store.commit('updatePluginsProps', { id: currentPlugins.id, modify: { id: 'props.chartConfig', value: chartConfig } });
}}
>
<StyleSetting options={chartConfig} type={key} />
<StyleSetting options={chartConfig} type={key} ref="styleSettingRef"/>
</pageDialogView>
</div>
);
Expand Down
3 changes: 3 additions & 0 deletions src/components/pageFormView/pageFormView.vue
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,9 @@ export default class PageFormView extends Vue {
})
}
}
updateFormMode(_model) {
this.formMode = Object.assign({}, this.formMode, _model)
}
handlerData(id, type) {
const _this = this
const handlerType = {
Expand Down
5 changes: 4 additions & 1 deletion src/components/styleSetting/styleSetting.vue
Original file line number Diff line number Diff line change
Expand Up @@ -28,11 +28,14 @@ export default {
methods: {
updateChartData(data) {
this.echartsIns.setOption(data)
},
getValue() {
return this.$refs.styleSettingParamsEditRef.getValue()
}
},
render(h) {
return <div class="style-setting">
<StyleSettingParamsEdit type={this.type} chartData={this.options} class="style-setting__edit" onUpdateChart={this.updateChartData} />
<StyleSettingParamsEdit ref="styleSettingParamsEditRef" type={this.type} chartData={this.options} class="style-setting__edit" onUpdateChart={this.updateChartData} />
<div class="style-setting__chart"></div>
</div>
}
Expand Down
Loading

0 comments on commit 800a686

Please sign in to comment.