add configuration development page
This commit is contained in:
龚祖望
parent
dc7f5b68b9
commit
682195294e
File diff suppressed because it is too large
Load Diff
|
|
@ -14,9 +14,8 @@
|
|||
"test:ci": "npm run lint && npm run test:unit"
|
||||
},
|
||||
"dependencies": {
|
||||
"@topology/core": "^1.2.2",
|
||||
"axios": "0.18.1",
|
||||
"core-js": "3.6.5",
|
||||
"core-js": "^3.6.5",
|
||||
"echarts": "^5.3.3",
|
||||
"element-ui": "^2.15.8",
|
||||
"js-cookie": "2.2.0",
|
||||
|
|
|
|||
|
|
@ -1,17 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
|
||||
/>
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
|
||||
<!-- 常用图标 -->
|
||||
<link
|
||||
href="//at.alicdn.com/t/font_1331132_g7tv7fmj6c9.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<!-- 新通用图标topology-new -->
|
||||
<link
|
||||
href="//at.alicdn.com/t/font_2030495_6tq2su2jmyx.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<!-- 老图标 -->
|
||||
<link
|
||||
href="//at.alicdn.com/t/font_1331132_5lvbai88wkb.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
|
||||
<!-- 其他图形库在此补充，例如企业字体图形库 -->
|
||||
<title><%= webpackConfig.name %></title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
<strong
|
||||
>We're sorry but <%= webpackConfig.name %> doesn't work properly without
|
||||
JavaScript enabled. Please enable it to continue.</strong
|
||||
>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
|
||||
<!-- 需要用到的工具js -->
|
||||
<script src="http://topology.le5le.com/assets/js/canvas2svg.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
||||
<script src="https://cdn.bootcdn.net/ajax/libs/jszip/3.5.0/jszip.min.js"></script>
|
||||
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
|
||||
|
||||
<script src="/js/777777.js"></script>
|
||||
<script src="/js/rg.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -48,7 +48,7 @@ export default {
|
|||
}
|
||||
},
|
||||
showBreadcrumb() {
|
||||
const whiteList = ['overview', 'terminal/add', 'data/value']
|
||||
const whiteList = ['overview', 'terminal/add', 'data/value', 'configuration/development']
|
||||
return whiteList.every((item) => this.$route.path.indexOf(item) === -1)
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -8,6 +8,12 @@ import ElementUI from 'element-ui'
|
|||
// import 'element-ui/lib/theme-chalk/index.css'
|
||||
import '@/assets/font/iconfont.css'
|
||||
|
||||
// 导入topology-vue组件
|
||||
import topology from 'topology-vue'
|
||||
Vue.use(topology)
|
||||
// 需要导入topology-vue.css
|
||||
import 'topology-vue/topology-vue.css'
|
||||
|
||||
import '@/styles/index.scss' // global css
|
||||
|
||||
import App from './App'
|
||||
|
|
|
|||
|
|
@ -173,7 +173,7 @@ export const constantRoutes = [
|
|||
{
|
||||
path: 'development',
|
||||
name: 'Development',
|
||||
// component: () => import(''),
|
||||
component: () => import('@/views/configuration/development'),
|
||||
meta: { title: '组态开发' }
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
<template>
|
||||
<div class="about">
|
||||
<h1>This is an about page</h1>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
<template>
|
||||
<div class="preview">
|
||||
<topology preview="true" :data="data" />
|
||||
<div class="tools" v-if="showTools">
|
||||
<a-button type="primary" @click="onBack">
|
||||
<a-icon type="left" /> 返回
|
||||
</a-button>
|
||||
<div></div>
|
||||
<a-button type="primary" style="margin-right: 0" @click="onSizeWindow">
|
||||
<a-icon type="border" />
|
||||
适合窗口大小
|
||||
</a-button>
|
||||
<a-button type="primary" @click="onSizeOri">
|
||||
<a-icon type="fullscreen-exit" />
|
||||
实际大小
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue';
|
||||
import Topology from 'topology-vue';
|
||||
Vue.use(Topology);
|
||||
export default {
|
||||
name: 'Preview',
|
||||
data() {
|
||||
return {
|
||||
data: {},
|
||||
locked: 0,
|
||||
showTools: true,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
//获取存储数据
|
||||
const data = sessionStorage.getItem('topologyData');
|
||||
if(data){
|
||||
this.data = JSON.parse(data);
|
||||
}else{
|
||||
//
|
||||
}
|
||||
|
||||
this.showTools = !!this.$route.query.r;
|
||||
},
|
||||
methods: {
|
||||
onSizeWindow() {
|
||||
window.topology.fitView(16);
|
||||
},
|
||||
|
||||
onSizeOri() {
|
||||
window.topology.open(this.data.data);
|
||||
},
|
||||
|
||||
onBack() {
|
||||
this.$router.go(-1);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.preview {
|
||||
position: relative;
|
||||
height: 100vh;
|
||||
|
||||
.tools {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
& > div {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
button {
|
||||
margin: 12px 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,87 +1,102 @@
|
|||
<template>
|
||||
<div class="home">
|
||||
<!-- 使用topology组件 -->
|
||||
<topology :configs="topologyConfigs" :user="user" @event="onEvent" />
|
||||
<topology
|
||||
:configs="topologyConfigs"
|
||||
:materials="materials"
|
||||
:user="user"
|
||||
:data="data"
|
||||
@event="onEvent"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue'
|
||||
// 导入topology-vue组件
|
||||
import topology from 'topology-vue'
|
||||
// 需要导入topology-vue.css
|
||||
import 'topology-vue/topology-vue.css'
|
||||
Vue.use(topology)
|
||||
import {
|
||||
defalutMenus,
|
||||
defalutUserMenus,
|
||||
defalutMaterials,
|
||||
images
|
||||
} from './data'
|
||||
|
||||
export default {
|
||||
name: 'Home',
|
||||
components: {
|
||||
topology
|
||||
},
|
||||
data: function() {
|
||||
return {
|
||||
topologyConfigs: {
|
||||
license: {
|
||||
key: '企业版授权码',
|
||||
value: '国产原创开源发展做出我们的贡献'
|
||||
},
|
||||
logo: {
|
||||
img: 'http://topology.le5le.com/assets/img/favicon.ico',
|
||||
url: 'http://topology.le5le.com',
|
||||
target: '_blank'
|
||||
},
|
||||
menus: {
|
||||
// back: {
|
||||
// icon: "t-icon t-angle-left",
|
||||
// },
|
||||
// login: true,
|
||||
left: [
|
||||
{
|
||||
name: '文件(自定义菜单1)',
|
||||
children: [
|
||||
{ name: '新建文件', keyboard: 'Ctrl+N', action: 'open1' },
|
||||
{ name: '打开文件', keyboard: 'Ctrl+O', action: 'loadNew' },
|
||||
{ name: '导入文件', keyboard: 'Ctrl+I', action: 'load' },
|
||||
{},
|
||||
{ name: '保存', keyboard: 'Ctrl+S', action: 'save' },
|
||||
{ name: '另存为', keyboard: 'Ctrl+Shift+I', action: 'saveAs' },
|
||||
{ name: '下载JSON文件', action: 'downloadJson' },
|
||||
{ name: '下载zip打包文件', action: 'downloadZip' },
|
||||
{},
|
||||
{ name: '导出为HTML', action: 'downloadHtml' },
|
||||
{},
|
||||
{ name: '下载为PNG', action: 'downloadPng' },
|
||||
{ name: '下载为SVG', action: 'downloadSvg' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '编辑(自定义菜单2)',
|
||||
children: [
|
||||
{ name: '撤销', keyboard: 'Ctrl+Z', action: 'undo' },
|
||||
{ name: '恢复 ', keyboard: 'Ctrl+Shift+Z', action: 'redo' },
|
||||
{},
|
||||
{ name: '剪切 ', keyboard: 'Ctrl+X', action: 'cut' },
|
||||
{ name: '复制 ', keyboard: 'Ctrl+C', action: 'copy' },
|
||||
{ name: '粘贴 ', keyboard: 'Ctrl+V', action: 'paste' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '我的菜单3',
|
||||
router: '/page'
|
||||
}
|
||||
]
|
||||
// middle: [],
|
||||
},
|
||||
menus: defalutMenus,
|
||||
loginUrl: 'https://account.le5le.com',
|
||||
signupUrl: 'https://account.le5le.com',
|
||||
userMenus: [
|
||||
{ name: '个人中心', router: '/user/home' },
|
||||
{},
|
||||
{
|
||||
name: '账号设置',
|
||||
url: 'https://account.le5le.com/user/profile',
|
||||
target: '_blank'
|
||||
},
|
||||
{},
|
||||
{ name: '退出', action: 'logout' }
|
||||
]
|
||||
userMenus: defalutUserMenus,
|
||||
dataOptionsFn: (pen, key, value) => {
|
||||
console.log(pen, key, value)
|
||||
const keys = ['aaa', 'bbb']
|
||||
const values = [
|
||||
{
|
||||
value: 111,
|
||||
label: '111'
|
||||
},
|
||||
{
|
||||
value: 222,
|
||||
label: '222'
|
||||
}
|
||||
]
|
||||
return {
|
||||
keys,
|
||||
// value: 80,
|
||||
values
|
||||
}
|
||||
}
|
||||
},
|
||||
user: {
|
||||
username: 'le5le'
|
||||
},
|
||||
materials: {
|
||||
system: defalutMaterials,
|
||||
user: [],
|
||||
images,
|
||||
uploadUrl: '/api/file',
|
||||
uploadHeaders: {
|
||||
Authorization: 'your token'
|
||||
},
|
||||
uploadParams: {
|
||||
mydata: 1
|
||||
}
|
||||
},
|
||||
data: {}
|
||||
}
|
||||
},
|
||||
created: function() {},
|
||||
mounted() {
|
||||
// 请确保 7777777(类似数字).js 和 rg.js已下载，正确加载
|
||||
if (window.registerTools) {
|
||||
window.registerTools()
|
||||
if (window.topologyTools) {
|
||||
this.materials.system[0].list = window.topologyTools
|
||||
}
|
||||
// 确保从预览页面返回是时清空存储
|
||||
const json = sessionStorage.getItem('topologyData')
|
||||
if (!this.$route.query.id && json) {
|
||||
this.data = JSON.parse(json)
|
||||
setTimeout(() => {
|
||||
// 读到后清除对应 session
|
||||
sessionStorage.removeItem('topologyData')
|
||||
}, 200)
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -89,11 +104,51 @@ export default {
|
|||
onEvent(e) {
|
||||
switch (e.name) {
|
||||
case 'logout':
|
||||
// 退出登录
|
||||
this.user = null
|
||||
// Do sth.
|
||||
break
|
||||
// ...
|
||||
// ...
|
||||
|
||||
case 'openMaterialGroup':
|
||||
// 展开/折叠图标工具栏分组
|
||||
console.log('openMaterialGroup', e.params)
|
||||
// Do sth.
|
||||
break
|
||||
|
||||
case 'addMaterial':
|
||||
// 添加“我的组件”
|
||||
// Do sth. For example:
|
||||
this.$router.push({
|
||||
path: '/',
|
||||
query: { component: '1' }
|
||||
})
|
||||
break
|
||||
|
||||
case 'editMaterial':
|
||||
// 编辑“我的组件”
|
||||
// Do sth. For example:
|
||||
this.$router.push({
|
||||
path: '/',
|
||||
query: { id: e.params.id, component: '1' }
|
||||
})
|
||||
break
|
||||
|
||||
case 'open':
|
||||
// 导航菜单configs.menus里面定义的action
|
||||
// 比如这里表示打开文件
|
||||
break
|
||||
case 'save':
|
||||
// 导航菜单configs.menus里面定义的action
|
||||
// 比如这里表示保存文件
|
||||
break
|
||||
case 'addImageUrl':
|
||||
// 在“我的图片”里面添加了一张新图片
|
||||
// this.addImageUrl(e.params);
|
||||
break
|
||||
case 'deleteImage':
|
||||
// 在“我的图片”里面删除了一张图片
|
||||
// this.deleteImage(e.params);
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -101,6 +156,12 @@ export default {
|
|||
</script>
|
||||
<style lang="scss">
|
||||
.home {
|
||||
height: 100vh;
|
||||
height: calc(100vh - 50px);
|
||||
}
|
||||
.avater{
|
||||
display: none;
|
||||
}
|
||||
a.menu:first-of-type{
|
||||
display: none !important
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue