forked from floraachy/xiuos_IoT
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"
|
"test:ci": "npm run lint && npm run test:unit"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@topology/core": "^1.2.2",
|
|
||||||
"axios": "0.18.1",
|
"axios": "0.18.1",
|
||||||
"core-js": "3.6.5",
|
"core-js": "^3.6.5",
|
||||||
"echarts": "^5.3.3",
|
"echarts": "^5.3.3",
|
||||||
"element-ui": "^2.15.8",
|
"element-ui": "^2.15.8",
|
||||||
"js-cookie": "2.2.0",
|
"js-cookie": "2.2.0",
|
||||||
|
|
|
||||||
|
|
@ -1,17 +1,48 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8" />
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<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">
|
<meta
|
||||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
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>
|
<title><%= webpackConfig.name %></title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<noscript>
|
<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>
|
</noscript>
|
||||||
<div id="app"></div>
|
<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>
|
</body>
|
||||||
</html>
|
</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() {
|
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)
|
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 'element-ui/lib/theme-chalk/index.css'
|
||||||
import '@/assets/font/iconfont.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 '@/styles/index.scss' // global css
|
||||||
|
|
||||||
import App from './App'
|
import App from './App'
|
||||||
|
|
|
||||||
|
|
@ -173,7 +173,7 @@ export const constantRoutes = [
|
||||||
{
|
{
|
||||||
path: 'development',
|
path: 'development',
|
||||||
name: 'Development',
|
name: 'Development',
|
||||||
// component: () => import(''),
|
component: () => import('@/views/configuration/development'),
|
||||||
meta: { title: '组态开发' }
|
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>
|
<template>
|
||||||
<div class="home">
|
<div class="home">
|
||||||
<!-- 使用topology组件 -->
|
<!-- 使用topology组件 -->
|
||||||
<topology :configs="topologyConfigs" :user="user" @event="onEvent" />
|
<topology
|
||||||
|
:configs="topologyConfigs"
|
||||||
|
:materials="materials"
|
||||||
|
:user="user"
|
||||||
|
:data="data"
|
||||||
|
@event="onEvent"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import Vue from 'vue'
|
||||||
// 导入topology-vue组件
|
// 导入topology-vue组件
|
||||||
import topology from 'topology-vue'
|
import topology from 'topology-vue'
|
||||||
// 需要导入topology-vue.css
|
// 需要导入topology-vue.css
|
||||||
import 'topology-vue/topology-vue.css'
|
import 'topology-vue/topology-vue.css'
|
||||||
|
Vue.use(topology)
|
||||||
|
import {
|
||||||
|
defalutMenus,
|
||||||
|
defalutUserMenus,
|
||||||
|
defalutMaterials,
|
||||||
|
images
|
||||||
|
} from './data'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Home',
|
name: 'Home',
|
||||||
components: {
|
|
||||||
topology
|
|
||||||
},
|
|
||||||
data: function() {
|
data: function() {
|
||||||
return {
|
return {
|
||||||
topologyConfigs: {
|
topologyConfigs: {
|
||||||
|
license: {
|
||||||
|
key: '企业版授权码',
|
||||||
|
value: '国产原创开源发展做出我们的贡献'
|
||||||
|
},
|
||||||
logo: {
|
logo: {
|
||||||
img: 'http://topology.le5le.com/assets/img/favicon.ico',
|
img: 'http://topology.le5le.com/assets/img/favicon.ico',
|
||||||
url: 'http://topology.le5le.com',
|
url: 'http://topology.le5le.com',
|
||||||
target: '_blank'
|
target: '_blank'
|
||||||
},
|
},
|
||||||
menus: {
|
menus: defalutMenus,
|
||||||
// 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: [],
|
|
||||||
},
|
|
||||||
loginUrl: 'https://account.le5le.com',
|
loginUrl: 'https://account.le5le.com',
|
||||||
signupUrl: 'https://account.le5le.com',
|
signupUrl: 'https://account.le5le.com',
|
||||||
userMenus: [
|
userMenus: defalutUserMenus,
|
||||||
{ name: '个人中心', router: '/user/home' },
|
dataOptionsFn: (pen, key, value) => {
|
||||||
{},
|
console.log(pen, key, value)
|
||||||
{
|
const keys = ['aaa', 'bbb']
|
||||||
name: '账号设置',
|
const values = [
|
||||||
url: 'https://account.le5le.com/user/profile',
|
{
|
||||||
target: '_blank'
|
value: 111,
|
||||||
},
|
label: '111'
|
||||||
{},
|
},
|
||||||
{ name: '退出', action: 'logout' }
|
{
|
||||||
]
|
value: 222,
|
||||||
|
label: '222'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
return {
|
||||||
|
keys,
|
||||||
|
// value: 80,
|
||||||
|
values
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
user: {
|
user: {
|
||||||
username: 'le5le'
|
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) {
|
onEvent(e) {
|
||||||
switch (e.name) {
|
switch (e.name) {
|
||||||
case 'logout':
|
case 'logout':
|
||||||
|
// 退出登录
|
||||||
this.user = null
|
this.user = null
|
||||||
// Do sth.
|
// Do sth.
|
||||||
break
|
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>
|
</script>
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.home {
|
.home {
|
||||||
height: 100vh;
|
height: calc(100vh - 50px);
|
||||||
|
}
|
||||||
|
.avater{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
a.menu:first-of-type{
|
||||||
|
display: none !important
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue