Skip to content

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

gojs

parent 5413d3ae
Hide whitespace changes
Inline Side-by-side
Showing with 1136 additions and 150 deletions
components/page/remote.vue 0 → 100644
View file @ 0d98f368
<template>
<div class="remote">
<component :is="currentView" v-bind="$props"/>
</div>
</template>
<script>
import Axios from 'axios';
import '@/utils/less.min';
export default {
props:{
url:{
type:String,
default(){
return null;
}
}
},
data(){
return {
resData:null,
cssId:null,
}
},
computed:{
currentView(){
if(!this.resData)return {template:"<div class='remoteInfo'>正在加载中。。。</div>"};
const tplData = this.resolveStr(this.resData);
let ponentObj = new Function(`return ${tplData.sctipts.slice(tplData.sctipts.indexOf('{'),tplData.sctipts.lastIndexOf('}')+1)}`)();
ponentObj.template = tplData.templates;
this.$el.setAttribute('class',`remote css${this.cssId}`);
if(!document.querySelector(`style[id=css${this.cssId}]`)){//防止重复创建
let cssStr = `
.css${this.cssId}{
${tplData.styles}
}
`;
this.resolveCss(cssStr);
}
return ponentObj;
}
},
watch:{
url(){
this.getData();
}
},
mounted(){
this.getData();
},
methods:{
getId() {
var d = new Date().getTime();
var uid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
var r = (d + Math.random()*16)%16 | 0;
d = Math.floor(d/16);
return (c=='x' ? r : (r&0x3|0x8)).toString(16);
});
return uid;
},
resolveCss(lessInput){
less.render(lessInput).then(function(output) {
let style = document.createElement("style");
style.setAttribute("type", "text/css");
style.setAttribute("id",'css' + this.cssId);
if(style.styleSheet)// IE
style.styleSheet.cssText = output.css;
else {// w3c
var cssText = document.createTextNode(output.css);
style.appendChild(cssText);
}
var heads = document.getElementsByTagName("head");
if(heads.length)
heads[0].appendChild(style);
else
document.documentElement.appendChild(style);
}.bind(this));
},
resolveStr(str){
return {
templates:str.match(/<template>([\s\S]*)<\/template>/)[1],
sctipts:str.match(/<script.*>([\s\S]*)<\/script>/)[1],
styles:str.match(/<style.*>([\s\S]*)<\/style>/)[1],
}
},
async getData(){
let remoteData = this.$store.getters.getRemoteByUrl(this.url);
if(remoteData){
this.resData = remoteData.resData;
this.cssId = remoteData.cssId;
}else{
const res = await Axios.get(this.$props.url);
this.cssId = this.getId();
this.resData = res.data;
this.$store.dispatch('doAction',{
event:'addRemote',
data:{url:this.url,cssId:this.cssId,resData:this.resData}
});
}
}
}
}
</script>
\ No newline at end of file
components/page/user.vue
View file @ 0d98f368
......@@ -2,22 +2,20 @@
<Poptip placement="bottom-start" trigger="hover" width="240" transfer>
<label :class="css">{{ user.name }}</label>
<div slot="content">
<Avatar
v-if="user.face"
size="large"
:src="user.face"
></Avatar>
<Avatar v-if="user.face" size="large" :src="user.face"></Avatar>
<Avatar
v-else
size="large"
style="color: #f56a00;background-color: #fde3cf; text-align:center"
:icon="user.gender=='男'?'md-person':'md-woman'"
></Avatar>
<div>姓名：{{ user.name }}
<div>
姓名：{{ user.name }}
<tag v-if="user.isDeleted">已删除</tag>
</div>
<div>状态：
<state :value="user.status" type="tag" code="User.base.status"/>
<div>
状态：
<state :value="user.status" type="tag" code="User.base.status" />
</div>
<div>性别：{{ user.gender }}</div>
<div>部门：{{ user.department }}</div>
......@@ -27,7 +25,7 @@
</template>
<script>
export default {
name: 'User',
name: "User",
props: {
value: {
type: [Number, String],
......@@ -38,58 +36,55 @@ export default {
return {
user: {
name: this.value,
face: '',
gender: '',
roles: '',
department: '',
loginName: '',
face: "",
gender: "",
roles: "",
status:0,
department: "",
loginName: "",
id: 0
},
css:"s0"
}
css: "s0"
};
},
mounted() {
//{"id":77,"name":"杨华馥","gender":"男","department":"北京生产车间","roles":"admin","status":1,"isDeleted":false}
this.load()
this.load();
},
methods: {
load() {
if (this.value) {
var user = this.$store.getters.getUser(this.value)
var user = this.$store.getters.getUser(this.value);
if (user) {
this.user = user
} else {
this.$api
.get(`${systemUrl}/user/getuser`, { id: this.value })
.then((r) => {
// alert(JSON.stringify( r.result))
if (r.success) {
this.user = r.result
if(this.user.isDeleted){
this.css="s2"
}else if(this.user.status==1){
this.css="s1"
}
if(this.user.face){
this.user.face=fileUrlDown+this.user.face;
}
// this.$store.commit('addUser', r.result)
}
})
this.user = user;
if (this.user.isDeleted) {
this.css = "s2";
} else if (this.user.status == 1) {
this.css = "s1";
}
if (this.user.face) {
this.user.face = fileUrlDown + this.user.face;
}
}
}
}
},
watch: {
value(v) {
if (v > 0) this.load()
if (v > 0) this.load();
}
}
}
};
</script>
<style lang="less">
.s2{color: red;}
.s1{color: #333}
.s0{color:#ddd}
.s2 {
color: red;
}
.s1 {
color: #333;
}
.s0 {
color: #ddd;
}
</style>
\ No newline at end of file
layouts/basic.vue
View file @ 0d98f368
<template>
<Layout class="go-main">
<Header class="header">
<Menu mode="horizontal" theme="light" active-name="1" class="menu">
<MenuItem name="1" to="/go">
<Icon type="ios-navigate"></Icon>
简单
</MenuItem>
<MenuItem name="2" to="/go/tree">
<Icon type="ios-keypad"></Icon>
树形
</MenuItem>
<MenuItem name="3" to="/go/color">
<Icon type="ios-analytics"></Icon>
色彩
</MenuItem>
<MenuItem name="4" to="/go/wall">
<Icon type="ios-analytics"></Icon>
墙
</MenuItem>
<MenuItem name="5" to="/go/flow">
<Icon type="ios-analytics"></Icon>
工作流
</MenuItem>
</Menu>
</Header>
<Content >
<Card class="hp100">
<nuxt/>
</Card>
</Content>
</Layout>
<Layout class="go-main">
<Header class="header">
<Menu mode="horizontal" theme="light" active-name="1" class="menu">
<MenuItem name="1" to="/go">
<Icon type="ios-navigate"></Icon>简单
</MenuItem>
<MenuItem name="2" to="/go/tree">
<Icon type="ios-keypad"></Icon>树形
</MenuItem>
<MenuItem name="3" to="/go/color">
<Icon type="ios-analytics"></Icon>色彩
</MenuItem>
<MenuItem name="4" to="/go/wall">
<Icon type="ios-analytics"></Icon>墙
</MenuItem>
<MenuItem name="5" to="/go/flow">
<Icon type="ios-analytics"></Icon>工作流3
</MenuItem>
<MenuItem name="6" to="/go/model">
<Icon type="ios-analytics"></Icon>建模
</MenuItem>
<MenuItem name="6" to="/go/pictrue">
<Icon type="ios-analytics"></Icon>图片
</MenuItem>
</Menu>
</Header>
<Content>
<Card class="hp100">
<nuxt />
</Card>
</Content>
</Layout>
</template>
<script>
export default {
}
export default {
async fetch({ store, params }) {
// alert(1)
// await store.dispatch("loadDictionary"); // 加载数据字典
// await store.dispatch("loadUsers"); // 加载数据字典
},
async fetch({ store, params }) {
await store.dispatch('loadDictionary') // 加载数据字典
await store.dispatch("loadUsers"); // 加载数据字典
},
mounted(){
this.$store.dispatch("loadDictionary"); // 加载数据字典
this.$store.dispatch("loadUsers"); // 加载数据字典
}
};
</script>
<style lang="less">
@top-height:50px;
@tob-bg:#eee;
.go-main{
height: 100vh;
.header{
background: @tob-bg;
height: 40px;
padding: 0;
.menu{
height: @top-height;
line-height: @top-height;
background: @tob-bg;
}
@top-height: 50px;
@tob-bg: #eee;
.go-main {
height: 100vh;
.header {
background: @tob-bg;
height: 40px;
padding: 0;
.menu {
height: @top-height;
line-height: @top-height;
background: @tob-bg;
}
.ivu-layout-content{
height: 100%;
padding: 20px;
.hp100{
min-height: 90%;
}
}
.ivu-layout-content {
height: 100%;
padding: 20px;
.hp100 {
min-height: 90%;
}
}
}
</style>
\ No newline at end of file
package-lock.json
View file @ 0d98f368
......@@ -5721,6 +5721,15 @@
"integrity": "sha1-8xz35PPiGLBybnOMqSoC00iO9hU=",
"dev": true
},
"cwd": {
"version": "0.10.0",
"resolved": "https://registry.npmjs.org/cwd/-/cwd-0.10.0.tgz",
"integrity": "sha1-FyQAaUBXwioTsM8WFix+S3p/5Wc=",
"requires": {
"find-pkg": "^0.1.2",
"fs-exists-sync": "^0.1.0"
}
},
"cyclist": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz",
......@@ -7222,6 +7231,14 @@
}
}
},
"expand-tilde": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/expand-tilde/-/expand-tilde-2.0.2.tgz",
"integrity": "sha1-l+gBqgUt8CRU3kawK/YhZCzchQI=",
"requires": {
"homedir-polyfill": "^1.0.1"
}
},
"expect": {
"version": "23.6.0",
"resolved": "https://registry.npmjs.org/expect/-/expect-23.6.0.tgz",
......@@ -7683,12 +7700,29 @@
"pkg-dir": "^3.0.0"
}
},
"find-file-up": {
"version": "0.1.3",
"resolved": "https://registry.npmjs.org/find-file-up/-/find-file-up-0.1.3.tgz",
"integrity": "sha1-z2gJG8+fMApA2kEbN9pczlovvqA=",
"requires": {
"fs-exists-sync": "^0.1.0",
"resolve-dir": "^0.1.0"
}
},
"find-parent-dir": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/find-parent-dir/-/find-parent-dir-0.3.0.tgz",
"integrity": "sha1-M8RLQpqysvBkYpnF+fcY83b/jVQ=",
"dev": true
},
"find-pkg": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/find-pkg/-/find-pkg-0.1.2.tgz",
"integrity": "sha1-G9wiwG42NlUy4qJIBGhUuXiNpVc=",
"requires": {
"find-file-up": "^0.1.2"
}
},
"find-up": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
......@@ -7854,6 +7888,11 @@
}
}
},
"fs-exists-sync": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/fs-exists-sync/-/fs-exists-sync-0.1.0.tgz",
"integrity": "sha1-mC1ok6+RjnLQjeyehnP/K1qNat0="
},
"fs-extra": {
"version": "8.1.0",
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
......@@ -8038,6 +8077,48 @@
"integrity": "sha1-jFoUlNIGbFcMw7/kSWF1rMTVAqs=",
"dev": true
},
"global-modules": {
"version": "0.2.3",
"resolved": "https://registry.npmjs.org/global-modules/-/global-modules-0.2.3.tgz",
"integrity": "sha1-6lo77ULG1s6ZWk+KEmm12uIjgo0=",
"requires": {
"global-prefix": "^0.1.4",
"is-windows": "^0.2.0"
},
"dependencies": {
"is-windows": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/is-windows/-/is-windows-0.2.0.tgz",
"integrity": "sha1-3hqm1j6indJIc3tp8f+LgALSEIw="
}
}
},
"global-prefix": {
"version": "0.1.5",
"resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-0.1.5.tgz",
"integrity": "sha1-jTvGuNo8qBEqFg2NSW/wRiv+948=",
"requires": {
"homedir-polyfill": "^1.0.0",
"ini": "^1.3.4",
"is-windows": "^0.2.0",
"which": "^1.2.12"
},
"dependencies": {
"is-windows": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/is-windows/-/is-windows-0.2.0.tgz",
"integrity": "sha1-3hqm1j6indJIc3tp8f+LgALSEIw="
},
"which": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
"integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
"requires": {
"isexe": "^2.0.0"
}
}
}
},
"globals": {
"version": "11.12.0",
"resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
......@@ -8295,6 +8376,14 @@
"os-tmpdir": "^1.0.1"
}
},
"homedir-polyfill": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz",
"integrity": "sha512-eSmmWE5bZTK2Nou4g0AI3zZ9rswp7GRKoKXS1BLUkvPviOqs4YTN1djQIqrXy9k5gEtdLPy86JjRwsNM9tnDcA==",
"requires": {
"parse-passwd": "^1.0.0"
}
},
"hoopy": {
"version": "0.1.4",
"resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
......@@ -8737,8 +8826,7 @@
"ini": {
"version": "1.3.5",
"resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
"integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==",
"dev": true
"integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw=="
},
"inquirer": {
"version": "3.3.0",
......@@ -11034,6 +11122,14 @@
"launch-editor": "^2.2.1"
}
},
"lazy-cache": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/lazy-cache/-/lazy-cache-2.0.2.tgz",
"integrity": "sha1-uRkKT5EzVGlIQIWfio9whNiCImQ=",
"requires": {
"set-getter": "^0.1.0"
}
},
"lcid": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/lcid/-/lcid-2.0.0.tgz",
......@@ -12820,8 +12916,7 @@
"os-homedir": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
"integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=",
"dev": true
"integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M="
},
"os-locale": {
"version": "3.1.0",
......@@ -13104,6 +13199,11 @@
"json-parse-better-errors": "^1.0.1"
}
},
"parse-passwd": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/parse-passwd/-/parse-passwd-1.0.0.tgz",
"integrity": "sha1-bVuTSkVpk7I9N/QKOC1vFmao5cY="
},
"parse5": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/parse5/-/parse5-4.0.0.tgz",
......@@ -15115,6 +15215,49 @@
"resolve-from": "^3.0.0"
}
},
"resolve-dir": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/resolve-dir/-/resolve-dir-0.1.1.tgz",
"integrity": "sha1-shklmlYC+sXFxJatiUpujMQwJh4=",
"requires": {
"expand-tilde": "^1.2.2",
"global-modules": "^0.2.3"
},
"dependencies": {
"expand-tilde": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/expand-tilde/-/expand-tilde-1.2.2.tgz",
"integrity": "sha1-C4HrqJflo9MdHD0QL48BRB5VlEk=",
"requires": {
"os-homedir": "^1.0.1"
}
}
}
},
"resolve-file": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/resolve-file/-/resolve-file-0.3.0.tgz",
"integrity": "sha1-EeH7RkVm06fFAMt+lIHo8LAKFO8=",
"requires": {
"cwd": "^0.10.0",
"expand-tilde": "^2.0.2",
"extend-shallow": "^2.0.1",
"fs-exists-sync": "^0.1.0",
"homedir-polyfill": "^1.0.1",
"lazy-cache": "^2.0.2",
"resolve": "^1.2.0"
},
"dependencies": {
"extend-shallow": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
"integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
"requires": {
"is-extendable": "^0.1.0"
}
}
}
},
"resolve-from": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
......@@ -16050,6 +16193,14 @@
"integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=",
"dev": true
},
"set-getter": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/set-getter/-/set-getter-0.1.0.tgz",
"integrity": "sha1-12nBgsnVpR9AkUXy+6guXoboA3Y=",
"requires": {
"to-object-path": "^0.3.0"
}
},
"set-value": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.1.tgz",
......
package.json
View file @ 0d98f368
......@@ -36,6 +36,7 @@
"nuxt": "^2.10.2",
"oidc-client": "^1.9.1",
"qs": "^6.6.0",
"resolve-file": "^0.3.0",
"screenfull": "^5.0.2",
"ua-parser-js": "^0.7.18",
"view-design": "^4.1.3",
......
pages/go/flow/index.vue
View file @ 0d98f368
......@@ -10,6 +10,7 @@
<script>
import go from "gojs";
let $ = go.GraphObject.make;
export default {
layout: "basic",
name: "",
......@@ -37,7 +38,7 @@ export default {
var myModel = $(go.GraphLinksModel);
// in the model data, each node is represented by a JavaScript object:
this.go.nodeTemplate = $(
let dell = $(
go.Node,
"Horizontal",
// { background: "blue" },
......@@ -45,42 +46,108 @@ export default {
go.Panel,
"Spot",
$(go.Shape, "Circle", {
// desiredSize: new go.Size(60, 60),
desiredSize: new go.Size(150, 150),
fill: "orange",
stroke: "#eee",
strokeWidth: 3.5,
portId: "A",
toSpot: go.Spot.LeftCenter,
portId: "",
toSpot: go.Spot.Center,
toLinkable: true,
fromLinkable: true,
// toMaxLinks: 1,
doubleClick:(e,o)=>{
let nodes=this.go.findNodeForKey("B");
// console.log(nodes)
// nodes.category="detailed"
// alert(1)
// console.warn(e,o)
o.part.category="detailed"
}
// ,toMaxLinks: 1,
// fromMaxLinks:1
}),
$(
go.TextBlock,
"Hi,henq",
{ margin: 12, stroke: "#fff", font: "bold 16px '宋体'" },
{
margin: 8,
stroke: "#fff",
font: "bold 24px '宋体'",
editable: true
},
new go.Binding("text", "name")
)
)
);
var simpletemplate = $(
go.Node,
"Auto",
$(go.Shape, "Ellipse", new go.Binding("fill", "color")),
$(go.TextBlock, new go.Binding("text", "key")),
{
toolTip: $(
"ToolTip",
$(go.TextBlock, { margin: 4 }, new go.Binding("text", "desc"))
)
}
);
// the "detailed" template shows all of the information in a Table Panel
var detailtemplate = $(
go.Node,
"Auto",
$(go.Shape, "RoundedRectangle", new go.Binding("fill", "color")),
$(
go.Panel,
"Table",
{ defaultAlignment: go.Spot.Left },
$(
go.TextBlock,
{ row: 0, column: 0, columnSpan: 2, font: "bold 12pt sans-serif" },
new go.Binding("text", "key")
),
$(go.TextBlock, { row: 1, column: 0 }, "Description:"),
$(
go.TextBlock,
{ row: 1, column: 1 },
new go.Binding("text", "name")
),
$(go.TextBlock, { row: 2, column: 0 }, "Color:red"),
$(
go.TextBlock,
{ row: 2, column: 1 },
new go.Binding("text", "color")
)
)
);
var templmap = new go.Map(); // In TypeScript you could write: new go.Map<string, go.Node>();
// for each of the node categories, specify which template to use
templmap.add("simple", simpletemplate);
templmap.add("detailed", detailtemplate);
// for the default category, "", use the same template that Diagrams use by default;
// this just shows the key value as a simple TextBlock
templmap.add("", dell);
this.go.nodeTemplateMap = templmap;
this.go.linkTemplate = $(
go.Link,
// $(go.Shape),
$(go.Shape, { stroke: "red", strokeWidth: 3.5 }),
// $(
// go.Shape, // the "from" end arrowhead
// { fromArrow: "Chevron" }
// ),
$(
go.Shape, // the "to" end arrowhead
{ toArrow: "StretchedDiamond", fill: "red" }
go.Shape, // the "to" end arrowhead
// { toArrow: "StretchedDiamond", fill: "red" },
{ toArrow: "OpenTriangle", fill: "red" }
),
$(go.TextBlock,"Hi,henq", { textAlign: "center" ,segmentOffset: new go.Point(0, -10) })
$(go.TextBlock, "备注", {
textAlign: "center",
segmentOffset: new go.Point(0, -10)
})
);
myModel.nodeDataArray = [
{ key: "A", name: "henq" },
{ key: "B", name: "lily" },
{ key: "C", name: "miaomiao" }
{ key: "C", name: "miaomiao" ,category:"detailed",color:"red"}
];
// myModel.linkDataArray = [
// {
......
pages/go/model.vue 0 → 100644
View file @ 0d98f368
<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>
pages/go/tree/index.vue → pages/go/pictrue/index.vue
View file @ 0d98f368
......@@ -149,9 +149,9 @@ export default {
$(go.Shape, { strokeWidth: 1, stroke: "#ddd" })
); // the link shape
// myModel.nodeDataArray = this.data;
myModel.nodeDataArray = this.data;
this.go.model = myModel;
this.go.add($(go.Part, "Table",$(go.Picture,{source:"/static/logo.png",margin:10,column:1})))
this.go.add($(go.Part, "Auto",$(go.Picture,{source:"/static/logo.png",margin:10})))
},
svg() {
this.show = !this.show;
......
pages/go/resizeMultipleTool.js 0 → 100644
View file @ 0d98f368
import go from "gojs";
function ResizeMultipleTool() {
go.ResizingTool.call(this);
this.name = "ResizeMultiple";
}
go.Diagram.inherit(ResizeMultipleTool, go.ResizingTool);
/**
* Overrides ResizingTool.resize to resize all selected objects to the same size.
* @this {ResizeMultipleTool}
* @param {Rect} newr the intended new rectangular bounds for each Part's {@link Part#resizeObject}.
*/
ResizeMultipleTool.prototype.resize = function(newr) {
var diagram = this.diagram;
if (diagram === null) return;
diagram.selection.each(function(part) {
if (part instanceof go.Link || part instanceof go.Group) return; // only Nodes and simple Parts
var obj = part.resizeObject;
// calculate new location
var pos = part.position.copy();
var angle = obj.getDocumentAngle();
var sc = obj.getDocumentScale();
var radAngle = Math.PI * angle / 180;
var angleCos = Math.cos(radAngle);
var angleSin = Math.sin(radAngle);
var deltaWidth = newr.width - obj.naturalBounds.width;
var deltaHeight = newr.height - obj.naturalBounds.height;
var angleRight = (angle > 270 || angle < 90) ? 1 : 0;
var angleBottom = (angle > 0 && angle < 180) ? 1 : 0;
var angleLeft = (angle > 90 && angle < 270) ? 1 : 0;
var angleTop = (angle > 180 && angle < 360) ? 1 : 0;
pos.x += sc * ((newr.x + deltaWidth * angleLeft) * angleCos - (newr.y + deltaHeight * angleBottom) * angleSin);
pos.y += sc * ((newr.x + deltaWidth * angleTop) * angleSin + (newr.y + deltaHeight * angleLeft) * angleCos);
obj.desiredSize = newr.size;
part.position = pos;
});
}
export default ResizeMultipleTool;
\ No newline at end of file
pages/go/tree.vue 0 → 100644
View file @ 0d98f368
<template>
<div>
<Button @click="svg">svg</Button>
<!-- <div id="card" @contextmenu.prevent="onContextmenu($event,2)"> -->
<div id="card">
<h1>go.js</h1>
</div>
<div id="svg" ref="svg" v-if="show">vvvv</div>
</div>
</template>
<script>
import go from "gojs";
export default {
layout: "basic",
name: "",
data() {
return {
go: null,
show: false,
data: [
{ key: 39, name: "增材制造中心", parent: 0 },
{ key: 40, name: "北京星驰恒动工厂", parent: 39 },
{ key: 41, name: "市场处", parent: 40 },
{ key: 42, name: "调度组", parent: 40 },
{ key: 43, name: "工程技术部", parent: 40 },
{ key: 44, name: "质检组", parent: 40 },
{ key: 45, name: "物料管理组", parent: 40 },
{ key: 47, name: "山东新泰工厂", parent: 39 },
{ key: 51, name: "CCC", parent: 0 },
{ key: 52, name: "DDD", parent: 51 },
{ key: 53, name: "EEE", parent: 52 },
{ key: 55, name: "新泰3D打印工厂", parent: 39 },
{ key: 56, name: "北京生产车间", parent: 40 },
{ key: 57, name: "产品研发部", parent: 40 },
{ key: 58, name: "DDD", parent: 51 },
{ key: 59, name: "过分的", parent: 39 },
{ key: 60, name: "发电机房", parent: 51 },
{ key: 61, name: "范德萨", parent: 39 },
{ key: 62, name: "测试部门", parent: 39 },
{ key: 63, name: "测试部门011", parent: 40 },
{ key: 64, name: "llllll---", parent: 0 },
{ key: 65, name: "部门9999", parent: 0 },
{ key: 66, name: "测试部门", parent: 0 },
{ key: 67, name: "测44444444", parent: 0 },
{ key: 68, name: "测试2020202", parent: 0 },
{ key: 69, name: "测试部门", parent: 51 },
{ key: 70, name: "测试一级部门", parent: 0 },
{ key: 71, name: "测试二级部门", parent: 70 },
{ key: 72, name: "发电机房二级部门", parent: 60 },
{ key: 73, name: "测试三级部门022", parent: 71 },
{ key: 74, name: "测试二级部门3333", parent: 70 },
{ key: 75, name: "测试三级部门", parent: 74 },
{ key: 76, name: "测试部门11", parent: 0 },
{ key: 77, name: "测试部门2233322222", parent: 76 },
{ key: 78, name: "测试部门333", parent: 77 },
{ key: 79, name: "打上断点多", parent: 76 },
{ key: 80, name: "鹅鹅鹅鹅鹅鹅饿时", parent: 79 },
{ key: 81, name: "山东新泰", parent: 0 },
{ key: 82, name: "新泰金属3d打印车间", parent: 81 },
{ key: 83, name: "新泰生产班组", parent: 82 },
{ key: 84, name: "操作组", parent: 56 },
{ key: 85, name: "库房组", parent: 56 },
{ key: 86, name: "新泰库房组", parent: 0 },
{ key: 87, name: "新泰库房组", parent: 82 },
{ key: 88, name: "测试部门", parent: 0 },
{ key: 89, name: "车间A", parent: 88 },
{ key: 90, name: "工艺部门", parent: 88 },
{ key: 91, name: "车间A班组1", parent: 89 },
{ key: 92, name: "车间A班组2", parent: 89 },
{ key: 93, name: "b1", parent: 90 },
{ key: 94, name: "LXG_新增工厂_0309", parent: 0 },
{ key: 95, name: "LXG_新增车间_0309", parent: 94 },
{ key: 96, name: "LXG_新增保卫科", parent: 94 },
{ key: 97, name: "LXG_新增保安组", parent: 96 },
{ key: 98, name: "信息部", parent: 40 },
{ key: 99, name: "北京生产车间", parent: 0 },
{ key: 100, name: "工艺组", parent: 56 }
]
};
},
mounted() {
this.init();
},
methods: {
init() {
let $ = go.GraphObject.make;
this.go = $(go.Diagram, "card", {
"undoManager.isEnabled": true, // enable Ctrl-Z to undo and Ctrl-Y to redo
layout: $(
go.TreeLayout, // specify a Diagram.layout that arranges trees
{ angle: 90, layerSpacing: 35 }
),
nodeSelectionAdornmentTemplate:
$(go.Adornment, "Auto",
$(go.Shape, "Rectangle", { fill: "red", stroke: "red" ,strokeWidth:2}),
)
});
var myModel = $(go.TreeModel);
// in the model data, each node is represented by a JavaScript object:
this.go.nodeTemplate = $(
go.Node,
"Horizontal",
{ background: "blue" },
$(
go.TextBlock,
"Hi,henq",
{ margin: 12, stroke: "#fff", font: "bold 16px '宋体'" },
new go.Binding("text", "name")
),
{
contextClick: (e, obj) => {
// alert(obj.data.key+":"+obj.data.name);
console.warn("info", e, obj);
this.onContextmenu(e.event, obj.data);
},
doubleClick: (e, obj) => {
alert(321);
},
angle: 45,
// mouseEnter:(e,obj)=>{
// console.warn(e,obj);
// if(obj.part){
// obj.part.fill="red"
// }
// }
// mouseEnter: function(e, obj) {
// console.log(obj)
// obj.background = "green";
// obj.stroke = "dodgerblue";
// obj.toolTip="hello henq!"
// },
// mouseLeave: function(e, obj) {
// obj.background = "orange";
// obj.opacity = 1;
// obj.strokeWidth = 2;
// obj.stroke = "gray";
// }
}
,
new go.Binding("background","isSelected",(v)=>{
return v?"green":"red"
}).ofObject()
);
this.go.linkTemplate = $(
go.Link,
{ routing: go.Link.Orthogonal, corner: 3 },
$(go.Shape, { strokeWidth: 1, stroke: "#ddd" })
); // the link shape
myModel.nodeDataArray = this.data;
this.go.model = myModel;
this.go.add($(go.Part, "Table",$(go.Picture,{source:"/static/logo.png",margin:10,column:1})))
},
svg() {
this.show = !this.show;
if (this.show) {
var svg = this.go.makeSvg({
document: window.document, // create SVG DOM in new document context
scale: 1,
maxSize: new go.Size(1200, NaN)
});
console.log(this.$refs.svg);
this.$nextTick(() => {
document.getElementById("svg").appendChild(svg);
});
}
},
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: 3000,
minWidth: 230
});
return false;
}
}
};
</script>
<style lang="less">
#card {
height: 80vh;
width: 100%;
canvas {
outline: none;
}
z-index: 5;
}
#svg {
height: 90vh;
width: 100%;
z-index: 99;
position: fixed;
background-color: white;
top: 150px;
left: 0;
rect {
// fill:wheat;
cursor: pointer;
}
rect:hover {
fill: tomato;
}
}
</style>
\ No newline at end of file
pages/go/wall/brick.vue
View file @ 0d98f368
<template>
<div>
<h2>{{data}}这是一个幸福的新年</h2>
<ul>
<li v-for="(u,i) in list">
{{u.id}}
</li>
</ul>
<Button type="primary" @click="dudu">show</Button>
</div>
</template>
<script>
export default {
name: '',
data() {
return {
list:[]
}
},
props:{
data:Number
},
mounted(){
let that=this;
this.$api.get(`${systemUrl}/user/getuserlist`).then(r=>{
this.list=r.result;
});
},
methods:{
dudu(){
this.$emit("showCityName",this.list)
}
}
}
</script>
<style lang="less" scoped>
</style>
\ No newline at end of file
pages/go/wall/index.vue
View file @ 0d98f368
......@@ -10,6 +10,8 @@
</div>
</div>
<div class="clear"></div>
<Button @click="load('./brick.vue')">加载</Button>
<component :is="name" :data="123" @showCityName="hi"/>
</div>
<div slot="right" class="tools">
<Table :columns="cols" :data="items" size="small" height="800">
......@@ -31,6 +33,9 @@
</Table>
</div>
</Split>
<!-- <h1 v-for=" i of 100" :key="i">
<User :value="i" />
</h1> -->
<div class="clear"></div>
</div>
</template>
......@@ -39,6 +44,7 @@ export default {
layout: "basic",
data() {
return {
name:"",
items: [],
cols: [
{ key: "id", title: "id", width: 50 },
......@@ -51,29 +57,45 @@ export default {
split: 0.8
};
},
async fetch({ store, params }) {
// await store.dispatch("loadUsers"); // 加载数据字典
},
created() {
let items = [];
for (let i = 0; i < 20; i++) {
items.push({
id: i,
name: "hahah" + i,
value: i + "大家爱，才是真爱。。。",
span: 5,
rows: 1,
hide: false,
style: {
width: `${5 * 5}%`,
height: `${1 * 40}px`,
left: `0`,
top: `0`
}
});
}
// for (let i = 0; i < 20; i++) {
// items.push({
// id: i,
// name: "hahah" + i,
// value: i + "大家爱，才是真爱。。。",
// span: 5,
// rows: 1,
// hide: false,
// style: {
// width: `${5 * 5}%`,
// height: `${1 * 40}px`,
// left: `0`,
// top: `0`
// }
// });
// }
this.items = items;
// this.list = items;
this.resort();
},
methods: {
hi(items){
alert(items.length)
},
load(path){
if(this.name==""){
// this.name=()=>require('file:///D:/brick.vue')
// this.name=()=>import('./brick.vue')
this.name=()=>import(path)
}else{
this.name=""
}
},
width(row) {
return 4.8 * row.span + "%";
},
......@@ -81,7 +103,7 @@ export default {
let cols = 20;
let nextX = 0;
let x = 0;
let nextY=0;
let nextY = 0;
let y = 0;
let miny = 0;
let w = 5;
......@@ -89,7 +111,7 @@ export default {
let items = this.$u.clone(this.items);
items.map((u, i) => {
if (i == 0) {
x = 0;
x = 0;
maxy = 0;
} else {
if (cols - nextX - u.span > 0) {
......
pages/go/wall/test.vue 0 → 100644
View file @ 0d98f368
<template>
<div>
</div>
</template>
<script>
export default {
data () {
return {
}
},
components: {
},
methods: {
}
}
</script>
<style style="less">
</style>
pages/system/tanant/detail.vue
View file @ 0d98f368
......@@ -29,7 +29,9 @@ export default {
},
methods: {
load(v) {
alert(v)
Api.get({ id: v }).then((r) => {
this.entity = r.result
this.$emit('on-load')
})
......
pages/system/tanant/index.vue
View file @ 0d98f368
......@@ -22,7 +22,7 @@
<Add @on-close="cancel" @on-ok="addOk" />
</Modal>
<Modal v-model="editModal" title="编辑" footer-hide>
<Edit :eid="curId" @on-close="cancel" @on-ok="addOk" />
<Edit :eid="editId" @on-close="cancel" @on-ok="addOk" />
</Modal>
<Modal v-model="detailModal" title="详情">
<Detail :eid="curId" />
......@@ -64,6 +64,7 @@ export default {
deletelModal: false,
datadetailModal: false,
curId: 0,
editId:0,
datacurId: 0,
columns: [
{ key: 'id', title: this.l('id'), hide: true, align: 'left' },
......@@ -176,7 +177,7 @@ export default {
{
title: '操作',
key: 'id',
key: 'action',
width: 180,
align: 'center',
render: (h, params) => {
......@@ -245,6 +246,7 @@ export default {
this.detailModal = false
this.editModal = false
this.curId = 0
this.editId = 0
},
search() {
this.$refs.grid.reload(this.easySearch)
......@@ -260,7 +262,7 @@ export default {
edit(id) {
this.editModal = true
this.curId = id
this.editId = id
},
TanantInit(rowdata) {
let obj = {
......@@ -298,7 +300,8 @@ export default {
this.deletelModal = false
},
cancel() {
this.curId = 0
this.curId = 0,
this.editId = 0,
this.addModal = false
this.detailModal = false
this.editModal = false
......
store/index.js
View file @ 0d98f368
......@@ -3,7 +3,7 @@ import Api from '@/plugins/request'
export const state=()=>({
counter:0,
dictionary: new Map(),//所有字典项
userMap:[],//所有用户缓存;
userMap:new Map(),//所有用户缓存;
userInfo:{
userId:0,
userName:""
......@@ -11,6 +11,9 @@ export const state=()=>({
})
export const getters={
dictionaryByKey: (state) => (key) => {
if(state.dictionary){
return;
}
let result = [];
let items = state.dictionary.get(key);
if (items) {
......@@ -19,19 +22,10 @@ export const getters={
}
return result;
},
getUser:state=>key=>{
// try{
// if(state.userMap.has(key)){
// return state.userMap.get(key);
// }
// }catch(e){
// console.log(e);
// }
let user=state.userMap.filter(u=>{return u.id==key});
if(user.length>0){
return user[0]
}else{
return null;
getUser:(state)=>key=>{
// debugger
if(state.userMap&&state.userMap.get){
return state.userMap.get(key);
}
}
}
......@@ -44,6 +38,9 @@ export const mutations={
// sessionStorage.setItem("userInfo", JSON.stringify(userInfo));
// sessionStorage.setItem("token", userInfo.token);
},
setUsers(state,users){
state.userMap=users;
},
addUser(state,user){
state.userMap.push(user);
},
......@@ -55,10 +52,18 @@ export const mutations={
export const actions={
async loadUser({commit},key){
let { result } = await this.$api.get(`${systemUrl}/user/getuser`,{id:key});
let { result } = await Api.get(`${systemUrl}/user/getuser`,{id:key});
console.warn("result",result)
commit("addUser",result);
},
async loadUsers({commit}){
let { result } = await Api.get(`${systemUrl}/user/getuserlist`);
var map=new Map();
result.map(u=>{
map.set(u.id,u);
});
commit("setUsers",map)
},
async loadDictionary({ commit }) {
let url = `${systemUrl}/Dictionary/GetAll`
let { result } = await Api.get(url);
......
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