Skip to content

T
topology-ui
提交 d4ffe4da authored 作者: jianglw's avatar jianglw
浏览文件
操作

升级topology

上级 e027af67
展开全部 隐藏空白字符变更
内嵌 并排
正在显示 包含 3851 行增加 和 3848 行删除
package.json
浏览文件 @ d4ffe4da
...@@ -8,11 +8,31 @@ ...@@ -8,11 +8,31 @@
"lint": "vue-cli-service lint", "lint": "vue-cli-service lint",
"lib": "vue-cli-service build --target lib --name topology --dest lib package/index.js" "lib": "vue-cli-service build --target lib --name topology --dest lib package/index.js"
}, },
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/**/*.{js,vue}": [
"eslint --fix",
"git add"
]
},
"keywords": [
"vue",
"admin",
"dashboard",
"element-ui",
"boilerplate",
"admin-template",
"management-system"
],
"dependencies": { "dependencies": {
"@topology/activity-diagram": "^0.5.0", "@topology/activity-diagram": "^0.5.0",
"@topology/chart-diagram": "^0.5.3", "@topology/chart-diagram": "^0.5.3",
"@topology/class-diagram": "^0.3.0", "@topology/class-diagram": "^0.3.0",
"@topology/core": "^0.5.34", "@topology/core": "0.5.38",
"@topology/flow-diagram": "^0.3.0", "@topology/flow-diagram": "^0.3.0",
"@topology/layout": "^0.3.0", "@topology/layout": "^0.3.0",
"@topology/sequence-diagram": "^0.3.0", "@topology/sequence-diagram": "^0.3.0",
...@@ -25,10 +45,8 @@ ...@@ -25,10 +45,8 @@
"jsencrypt": "^3.2.1", "jsencrypt": "^3.2.1",
"lodash.pick": "^4.4.0", "lodash.pick": "^4.4.0",
"node-sass": "^4.14.1", "node-sass": "^4.14.1",
"sass": "^1.32.0",
"script-ext-html-webpack-plugin": "^2.1.5", "script-ext-html-webpack-plugin": "^2.1.5",
"svg-sprite-loader": "^6.0.11", "svg-sprite-loader": "^6.0.11",
"topology-work": "0.0.3",
"vue": "^2.6.11", "vue": "^2.6.11",
"vue-router": "^3.2.0", "vue-router": "^3.2.0",
"vuex": "^3.4.0" "vuex": "^3.4.0"
...@@ -42,22 +60,13 @@ ...@@ -42,22 +60,13 @@
"babel-eslint": "^10.1.0", "babel-eslint": "^10.1.0",
"eslint": "^6.7.2", "eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2", "eslint-plugin-vue": "^6.2.2",
"sass-loader": "^10.1.0", "sass": "1.32.0",
"sass-loader": "10.1.0",
"vue-template-compiler": "^2.6.11" "vue-template-compiler": "^2.6.11"
}, },
"eslintConfig": { "engines": {
"root": true, "node": ">=8.9",
"env": { "npm": ">= 3.0.0"
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
}, },
"browserslist": [ "browserslist": [
"> 1%", "> 1%",
......
src/components/topology/PreviewToImg.vue
浏览文件 @ d4ffe4da
...@@ -74,7 +74,7 @@ export default { ...@@ -74,7 +74,7 @@ export default {
}, },
init() { init() {
this.canvas = new Topology("topology-hrhx"); this.canvas = new Topology("topology-hrhx");
this.canvasData.locked = 1; this.canvasData.locked = 2;
// 3. 渲染图形 // 3. 渲染图形
// 画布图形数据，可以来自于官网下载的json // 画布图形数据，可以来自于官网下载的json
this.canvasData.websocket = ""; this.canvasData.websocket = "";
......
src/main.js
浏览文件 @ d4ffe4da
import Vue from 'vue' import Vue from 'vue'
import ElementUI from 'element-ui'
import './assets/styles/element-variables.scss'
import '@/assets/styles/index.scss' // global css
import '@/assets/styles/ruoyi.scss' // ruoyi css
import App from './App.vue' import App from './App.vue'
import router from './router' import router from './router'
import store from './store' import store from './store'
import ElementUI from 'element-ui'
import './assets/styles/element-variables.scss'
import Antd from 'ant-design-vue'; import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css'; import 'ant-design-vue/dist/antd.css';
...@@ -11,7 +14,6 @@ import { parseTime, resetForm,selectDictLabel, selectDictLabels,addDateRange } f ...@@ -11,7 +14,6 @@ import { parseTime, resetForm,selectDictLabel, selectDictLabels,addDateRange } f
//topology //topology
//注册图标 //注册图标
import { registerIcons,registerSvgs } from "@/utils/topology/customgraph.js"; import { registerIcons,registerSvgs } from "@/utils/topology/customgraph.js";
// import {encryption,decrypt} from "@/utils/rsautils.js";
registerIcons(); registerIcons();
registerSvgs(); registerSvgs();
import { getDicts } from "@/api/dict/data"; import { getDicts } from "@/api/dict/data";
......
src/views/topology/Preview.vue
浏览文件 @ d4ffe4da
...@@ -54,8 +54,8 @@ export default { ...@@ -54,8 +54,8 @@ export default {
this.$router.go(-1); this.$router.go(-1);
}, },
onSizeWindow() { onSizeWindow() {
this.canvas.fitView(5); this.canvas.fitView(20);
this.canvas.centerView(15); this.canvas.centerView(30);
}, },
onSizeOri() { onSizeOri() {
this.canvas.open(this.topologyData); this.canvas.open(this.topologyData);
...@@ -80,16 +80,14 @@ export default { ...@@ -80,16 +80,14 @@ export default {
}); });
if (this.topologyData) { if (this.topologyData) {
let data = JSON.parse(this.topologyData); let data = JSON.parse(this.topologyData);
console.log(data)
if(data.websocket){ if(data.websocket){
data.websocket= data.websocket + "/" + (urlParse()===''?null:urlParse()); data.websocket= data.websocket + "/" + (urlParse()===''?null:urlParse());
console.log(data)
} }
this.topologyData=JSON.stringify(data) this.topologyData=JSON.stringify(data)
} }
this.canvas.open(this.topologyData); this.canvas.open(this.topologyData);
this.canvas.data.locked = 10; this.canvas.lock(2);
// 或 用window.topology对象 === 上面的canvas // 或 用window.topology对象 === 上面的canvas
// topology.open(json); // topology.open(json);
// 4. 如果json发送变化，重绘 // 4. 如果json发送变化，重绘
......
src/views/topology/Workspace.vue
浏览文件 @ d4ffe4da
...@@ -337,7 +337,7 @@ export default { ...@@ -337,7 +337,7 @@ export default {
}, },
set(val) { set(val) {
this.lineWidth = val; this.lineWidth = val;
this.canvas.data.lineWidth = val; this.canvas.pureData().lineWidth = val;
}, },
}, },
}, },
...@@ -352,7 +352,7 @@ export default { ...@@ -352,7 +352,7 @@ export default {
}, },
back() { back() {
this.$router.push({ this.$router.push({
path: this.backUrl path: this.backUrl,
}); });
}, },
saveContent(e) { saveContent(e) {
...@@ -370,13 +370,13 @@ export default { ...@@ -370,13 +370,13 @@ export default {
} }
}, },
handlLineName(val) { handlLineName(val) {
this.canvas.data.lineName = val; this.canvas.pureData().lineName = val;
}, },
handleFromArrowType(val) { handleFromArrowType(val) {
this.canvas.data.fromArrow = val; this.canvas.pureData().fromArrow = val;
}, },
handleToArrowType(val) { handleToArrowType(val) {
this.canvas.data.toArrow = val; this.canvas.pureData().toArrow = val;
}, },
lockClick() { lockClick() {
if (this.locked > 0) { if (this.locked > 0) {
...@@ -435,7 +435,7 @@ export default { ...@@ -435,7 +435,7 @@ export default {
}, },
//预览 //预览
preview() { preview() {
this.topologyData = JSON.parse(JSON.stringify(this.canvas.data)); this.topologyData = JSON.parse(JSON.stringify(this.canvas.pureData()));
if (!this.$route.query.id) { if (!this.$route.query.id) {
this.$message.warning("未保存数据"); this.$message.warning("未保存数据");
return; return;
...@@ -462,9 +462,9 @@ export default { ...@@ -462,9 +462,9 @@ export default {
if (this.topologyData) { if (this.topologyData) {
this.canvas.open(this.topologyData); this.canvas.open(this.topologyData);
this.canvas.render(); this.canvas.render();
this.toArrow = this.canvas.data.toArrow; this.toArrow = this.canvas.pureData().toArrow;
this.fromArrow = this.canvas.data.fromArrow; this.fromArrow = this.canvas.pureData().fromArrow;
this.lineName = this.canvas.data.lineName; this.lineName = this.canvas.pureData().lineName;
this.canvas.lock(0); this.canvas.lock(0);
this.canvas.closeSocket(); this.canvas.closeSocket();
this.canvas.closeMqtt(); this.canvas.closeMqtt();
...@@ -517,23 +517,32 @@ export default { ...@@ -517,23 +517,32 @@ export default {
handle_replace() { handle_replace() {
const input = document.createElement("input"); const input = document.createElement("input");
input.type = "file"; input.type = "file";
let that=this;
input.onchange = (event) => { input.onchange = (event) => {
const elem = event.srcElement || event.target; const elem = event.srcElement || event.target;
if (elem.files && elem.files[0]) { if (elem.files && elem.files[0]) {
const name = elem.files[0].name.replace(".json", ""); const name = elem.files[0].name.replace(".json", "");
const reader = new FileReader(); const reader = new FileReader();
reader.readAsText(elem.files[0]); reader.readAsText(elem.files[0]);
reader.onload = function () {
//读取完成后，数据保存在对象的result属性中
if(this.result){
that.topologyData = JSON.stringify(JSON.parse(this.result));
that.canvas.open(that.topologyData);
that.canvas.render();
}
};
} }
}; };
input.click(); input.click();
}, },
handle_saveJson() { handle_saveJson() {
if (!!this.canvas.data.name) { if (!!this.canvas.pureData().name) {
FileSaver.saveAs( FileSaver.saveAs(
new Blob([JSON.stringify(this.canvas.data)], { new Blob([JSON.stringify(this.canvas.pureData())], {
type: "text/plain;charset=utf-8", type: "text/plain;charset=utf-8",
}), }),
this.canvas.data.name + ".json" this.canvas.pureData().name + ".json"
); );
} else { } else {
this.$notification.warn({ this.$notification.warn({
...@@ -543,8 +552,8 @@ export default { ...@@ -543,8 +552,8 @@ export default {
}, },
handle_savePng() { handle_savePng() {
if (!!this.canvas.data.name) { if (!!this.canvas.pureData().name) {
this.canvas.saveAsImage(this.canvas.data.name + ".png"); this.canvas.saveAsImage(this.canvas.pureData().name + ".png");
} else { } else {
this.$notification.warn({ this.$notification.warn({
message: "请填写图文名称", message: "请填写图文名称",
...@@ -554,8 +563,8 @@ export default { ...@@ -554,8 +563,8 @@ export default {
handle_saveSvg() { handle_saveSvg() {
let name = ""; let name = "";
if (!!this.canvas.data.name) { if (!!this.canvas.pureData().name) {
name = this.canvas.data.name + ".svg"; name = this.canvas.pureData().name + ".svg";
} else { } else {
this.$notification.warn({ this.$notification.warn({
message: "请填写图文名称", message: "请填写图文名称",
...@@ -566,7 +575,7 @@ export default { ...@@ -566,7 +575,7 @@ export default {
this.canvas.canvas.width + 200, this.canvas.canvas.width + 200,
this.canvas.canvas.height + 200 this.canvas.canvas.height + 200
); );
for (const item of this.canvas.data.pens) { for (const item of this.canvas.pureData().pens) {
item.render(ctx); item.render(ctx);
} }
let mySerializedSVG = ctx.getSerializedSvg(); let mySerializedSVG = ctx.getSerializedSvg();
...@@ -597,10 +606,10 @@ export default { ...@@ -597,10 +606,10 @@ export default {
a.dispatchEvent(evt); a.dispatchEvent(evt);
}, },
updateProps(node) { updateProps(node) {
this.canvas.updateProps(this.canvas.data.pens); this.canvas.updateProps(this.canvas.pureData().pens);
}, },
updateLines(line) { updateLines(line) {
this.canvas.updateProps(this.canvas.data.pens); this.canvas.updateProps(this.canvas.pureData().pens);
}, },
uploadCanvasData(data) { uploadCanvasData(data) {
this.canvas.open(data); this.canvas.open(data);
...@@ -608,33 +617,33 @@ export default { ...@@ -608,33 +617,33 @@ export default {
}, },
updatePens(params) { updatePens(params) {
layout(this.pens, params); layout(this.pens, params);
this.canvas.updateProps(this.canvas.data.pens); this.canvas.updateProps(this.canvas.pureData().pens);
}, },
updatePensSubclass(name, val) { updatePensSubclass(name, val) {
for (let item of this.pens) { for (let item of this.pens) {
item[name] = val; item[name] = val;
} }
this.canvas.updateProps(this.canvas.data.pens); this.canvas.updateProps(this.canvas.pureData().pens);
}, },
updateAlignNodes(rect, align) { updateAlignNodes(rect, align) {
alignNodes(this.pens, rect, align); alignNodes(this.pens, rect, align);
this.canvas.updateProps(this.canvas.data.pens); this.canvas.updateProps(this.canvas.pureData().pens);
}, },
updateSpaceBetween(params) { updateSpaceBetween(params) {
spaceBetween(this.pens, params.maxWidth); spaceBetween(this.pens, params.maxWidth);
this.canvas.updateProps(this.canvas.data.pens); this.canvas.updateProps(this.canvas.pureData().pens);
}, },
async saveTopology() { async saveTopology() {
let params = {}; let params = {};
if (!!this.$route.query.id) { if (!!this.$route.query.id) {
params.id = this.$route.query.id; params.id = this.$route.query.id;
} }
if (!this.canvas.data.name) { if (!this.canvas.pureData().name) {
this.$message.error("请填写图文名称"); this.$message.error("请填写图文名称");
return; return;
} }
params.name = this.canvas.data.name; params.name = this.canvas.pureData().name;
params.data = this.canvas.data; params.data = this.canvas.pureData();
await save(params) await save(params)
.then((res) => { .then((res) => {
if (res.code === 200) { if (res.code === 200) {
......
yarn.lock
浏览文件 @ d4ffe4da
此差异已折叠。
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论