Skip to content

M
mes-ui
Commit 54395375 authored by 周远喜's avatar 周远喜
Browse files
Options

ok

parent 0d98f368
Hide whitespace changes
Inline Side-by-side
Showing with 302 additions and 7 deletions
assets/css/base.less
View file @ 54395375
...@@ -12,7 +12,38 @@ html body { ...@@ -12,7 +12,38 @@ html body {
#__layout { #__layout {
height: 100% height: 100%
} }
/*flex*/
.flex{
display: flex;
//采用flex布局
}
.fc-m{
justify-content: center;
}
.fc-e{
justify-content: flex-end;
}
.fc-b{
justify-content: space-between;
}
.fc-a{
justify-content: space-around;
}
.fd{
flex-direction: column;
}
.fg1{
flex-grow: 1;
}
.fg2{
flex-grow: 2;
}
.fos{
order: -1;
}
.foe{
order: 99;
}
/*字体*/ /*字体*/
.ib { .ib {
display: inline; display: inline;
......
pages/go/model.vue
View file @ 54395375
<template> <template>
<div id="layout"> <div id="layout">
<div id="tables"> <div id="tables">
<ColorPicker v-model="color" recommend @on-change="addColor"/> <ColorPicker v-model="color" recommend @on-change="addColor"/>
{{colors}} {{colors}}
<Button type="primary" @click="addLink()">链接</Button> <Button type="primary" @click="addLink()">链接</Button>
</div> </div>
<div id="drag"> <div id="drag">
<div class="left" slot="left" id="left"> <div class="left" slot="left">
<Button type="primary" @click="add">添加</Button> <div v-width="300" id="left">111</div>
<div class="tr fg1">
<Button type="primary">建表</Button>
</div>
</div> </div>
<div class="right" slot="right" id="right">33333333333333</div> <div class="right" slot="right" id="right">33333333333333</div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import go from "gojs"; import go from "gojs";
...@@ -245,15 +247,16 @@ export default { ...@@ -245,15 +247,16 @@ export default {
canvas { canvas {
outline: none; outline: none;
} }
#left { .left {
height: 50px; height: 50px;
background: #ddd; background: #ddd;
display: flex;
// color: transparent; // color: transparent;
} }
// #left,#right{ // #left,#right{
// // height: 100%; // // height: 100%;
// } // }
#right { .right {
background: #f7f7f7; background: #f7f7f7;
flex-grow: 1; flex-grow: 1;
} }
......
pages/go/model1.vue 0 → 100644
View file @ 54395375
<template>
<div id="layout">
<div id="tables">
<ColorPicker v-model="color" recommend @on-change="addColor"/>
{{colors}}
<Button type="primary" @click="addLink()">链接</Button>
</div>
<div id="drag">
<div class="left" slot="left" id="left">
<Button type="primary" @click="add">添加</Button>
</div>
<div class="right" slot="right" id="right">33333333333333</div>
</div>
</div>
</template>
<script>
import go from "gojs";
import ResizeMultipleTool from "./resizeMultipleTool";
// import {ResizeMultipleTool} from "gojs/extensionsJSM/ResizeMultipleTool";
// window.resizeMultipleTool =require("gojs/extensions/ResizeMultipleTool");
let $ = go.GraphObject.make;
let colors=["#2D8CF0", "#19BE6B", "#00BCD4", "#607D8B", "#CDDC39"]
export default {
layout: "basic",
head: {
id: 2,
title: "建模",
author: "henq"
},
data() {
return {
split: 0.2,
color:"transparent",
colors:[],
go: null,
models: [
{ key: "A", name: "henq", type: colors.border },
{ key: "B", name: "lily", type: "blue" },
{ key: "C", name: "miaomiao", type: "orange" }
],
right: null
};
},
mounted() {
this.init();
},
methods: {
init() {
this.go = $(go.Diagram, "right",{
nodeSelectionAdornmentTemplate:
$(go.Adornment, "Auto",
$(go.Shape, "Rectangle", { fill: "red", stroke: "red" ,strokeWidth:2}),
),
resizingTool: new ResizeMultipleTool(),
isReadOnly:false
// "undoManager.isEnabled": false // enable undo & redo
});
this.right = $(go.Palette, "left", {
model: new go.GraphLinksModel(this.models)
});
var myModel = $(go.GraphLinksModel);
// in the model data, each node is represented by a JavaScript object:
this.go.nodeTemplate = $(
go.Node,
"Auto",
{ resizable: true },
// { background: "blue" },\
new go.Binding("location", "location", go.Point.parse).makeTwoWay(go.Point.stringify),
new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
$(
go.Panel,
"Spot",
$(
go.Shape,
"Circle",
{
// desiredSize: new go.Size(60, 60),
// fill: "#ddd",
stroke: "#eee",
strokeWidth: 3.5
},
new go.Binding("fill", "type"),
new go.Binding("stroke", "isSelected", v => {
return v ? "#000" : "#eee";
}).ofObject()
),
$(
go.TextBlock,
"Hi,henq",
{
margin: 12,
stroke: "#fff",
font: "bold 16px '宋体'",
editable: true
},
new go.Binding("text", "name")
),
{
doubleClick: (e, obj) => {
alert(321);
}
}
)
// ,new go.Binding("background", "isSelected", v => {
// return !v?"transparent":"white";
// }).ofObject()
);
this.go.linkTemplate = $(
go.Link,
// $(go.Shape),
// $(
// go.Shape, // the "from" end arrowhead
// { fromArrow: "Chevron" }
// ),
{curve: go.Link.Bezier },
$(
go.Shape, // the "to" end arrowhead
{ toArrow: "StretchedDiamond", fill: "red" }
),
$(go.TextBlock, "Hi,henq", {
textAlign: "center",
segmentOffset: new go.Point(0, -10)
})
);
myModel.nodeDataArray = [
{ key: "A", name: "表", type: "black" },
{ key: "B", name: "视图", type: "gray" },
{ key: "C", name: "一对多", type: "red" },
{ key: "D", name: "关系表", type: "orange" }
];
// myModel.linkDataArray = [
// {
// from: "A",
// to: "C"
// },
// { from: "B", to: "C" },
// { from: "C", to: "A" },
// { from: "C", to: "B" }
// ];
// myModel.linkDataArray=[
// {form:"A",to:"C"},
// {form:"C",to:"D"},
// ]
this.go.model = myModel;
// this.go.model.linkDataArray=
// this.right.model=myModel;
// this.right.nodeTemplate=this.go.nodeTemplate;
},
addColor(v){
this.colors.push(v);
},
addLink(){
this.go.model.linkDataArray=[
{from:"A",to:"B"}
]
// this.go.startTransaction("make new link");
// this.go.model.addLinkData({from:"A",to:"B"})
// this.go.commitTransaction("make new link");
},
add() {
var node = new go.Node(go.Panel.Auto);
var shape = new go.Shape();
// shape.figure = "RoundedRectangle";
shape.figure = "Ellipse";
shape.fill = "lightblue";
var text = new go.TextBlock();
text.text = "hello,henq!";
text.margin = 5;
node.add(shape);
node.add(text);
this.go.add(node);
},
henq(params) {},
onContextmenu(event, a) {
this.$contextmenu({
items: [
{
label: "返回(B)",
icon: "md-add",
onClick: () => {
this.message = "返回(B)";
console.log("返回(B)");
}
},
{ label: "前进(F)", disabled: true },
{ label: "重新加载(R)", divided: true, icon: "md-add" },
{ label: "另存为(A)..." },
{ label: "打印(P)...", icon: "el-icon-printer" },
{ label: "投射(C)...", divided: true },
{
label: "使用网页翻译(T)",
divided: true,
minWidth: 0,
children: [{ label: "翻译成简体中文" }, { label: "翻译成繁体中文" }]
},
{
label: "截取网页(R)",
minWidth: 0,
children: [
{
label: "截取可视化区域",
onClick: () => {
this.message = "截取可视化区域";
console.log("截取可视化区域");
}
},
{ label: "截取全屏" }
]
},
{ label: "查看网页源代码(V)", icon: "el-icon-view" },
{ label: "检查(N)" }
],
event,
//x: event.clientX,
//y: event.clientY,
customClass: "class-a",
zIndex: 3,
minWidth: 230
});
return false;
}
}
};
</script>
<style lang="less">
#layout{
width: 100%;
display: flex;
flex-direction: row;
#tables{
width: 200px;
}
#drag {
flex-grow: 1;
// height: calc(100vh - 60px);
// width: 100%;
height: 800px;
display: flex;
flex-direction: column;
canvas {
outline: none;
}
#left {
height: 50px;
background: #ddd;
// color: transparent;
}
// #left,#right{
// // height: 100%;
// }
#right {
background: #f7f7f7;
flex-grow: 1;
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment