Skip to content

Commit 6504038

Browse files
author
Zhang Jie
committed
增加控制面板、工程管理面板、修改配色
1 parent 91f769a commit 6504038

File tree

13 files changed

+495
-1249
lines changed

13 files changed

+495
-1249
lines changed

‎package-lock.json

Lines changed: 177 additions & 1066 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
"cssprefix": "^2.0.16",
1616
"element-ui": "^2.13.0",
1717
"less": "^3.11.1",
18-
"less-loader": "^6.1.0",
18+
"less-loader": "^5.0.0",
1919
"m-class-list": "^1.1.9",
2020
"plain-draggable": "^2.5.12",
2121
"pointer-event": "^1.0.0",

‎src/App.vue

Lines changed: 21 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@
22
<div id="app">
33
<TopMenu/>
44
<ProjectManagementPanel/>
5-
<router-view/>
5+
<keep-alive include="StatePage">
6+
<router-view/>
7+
</keep-alive>
68
<CtrlPanel/>
79
</div>
810
</template>
@@ -21,18 +23,23 @@ export default {
2123
}
2224
</script>
2325

24-
<style>
25-
#app {
26-
font-family: 'Avenir', Helvetica, Arial, sans-serif;
27-
-webkit-font-smoothing: antialiased;
28-
-moz-osx-font-smoothing: grayscale;
29-
/* text-align: center; */
30-
color: #2c3e50;
31-
/* margin-top: 60px; */
32-
33-
}
34-
body{
35-
margin: 0;
36-
padding: 0;
26+
<style lang="less">
27+
html{
28+
height: 100%;
29+
body{
30+
height: 100%;
31+
margin: 0;
32+
padding: 0;
33+
#app {
34+
padding-top: 60px;
35+
height: calc(100% - 60px);
36+
font-family: 'Avenir', Helvetica, Arial, sans-serif;
37+
-webkit-font-smoothing: antialiased;
38+
-moz-osx-font-smoothing: grayscale;
39+
/* text-align: center; */
40+
color: #2c3e50;
41+
background-color: #192a49;
42+
}
43+
}
3744
}
3845
</style>

‎src/components/BlocklyPage.vue

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<template>
2+
<div id="blocklyPage">
3+
<iframe :src="`/static/blockly/demos/code/index.html`" frameborder="0" width="100%" height="100%"></iframe>
4+
</div>
5+
</template>
6+
<script>
7+
export default {
8+
name: 'BlocklyPage',
9+
data(){
10+
return {
11+
12+
}
13+
}
14+
}
15+
</script>
16+
17+
<style lang="less" scoped>
18+
@topMenuHeight: 60px;
19+
#blocklyPage{
20+
height: 100%;
21+
}
22+
</style>

‎src/components/Home.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,4 +14,4 @@ export default {
1414

1515
<style scoped>
1616
17-
</style>
17+
</style>

‎src/components/ProjectManagementPanel.vue

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,9 +83,13 @@ export default {
8383
console.log(data);
8484
},
8585
expandPanel(){
86+
return ;//开发时暂时屏蔽 TODO
8687
if(this.isCollapsed){
8788
this.isCollapsed = !this.isCollapsed;
8889
}
90+
},
91+
collapse(){
92+
this.isCollapsed = true;
8993
}
9094
},
9195
};

‎src/components/Test.vue

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<template>
2+
<div class="outer">
3+
<div class="inner"></div>
4+
</div>
5+
</template>
6+
7+
<script>
8+
export default {
9+
name: "Test",
10+
data() {
11+
return {
12+
};
13+
}
14+
};
15+
</script>
16+
17+
<style lang="less" rel="stylesheet/less">
18+
.outer{
19+
margin-top: 62px;
20+
margin-left: 20px;
21+
width: 400px;
22+
height: 400px;
23+
border: 1px solid aquamarine;
24+
.inner{
25+
width: 200px;
26+
height: 200px;
27+
border: 1px solid red;
28+
}
29+
}
30+
</style>
31+

‎src/components/statepage/LineContextMenu.vue

Lines changed: 71 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,35 @@
11
<template>
2-
<div class="menu-wrap">
2+
3+
<div class="menu-wrap" @click.stop>
34
<ul v-if="showMenu" class="line-context-menu">
45
<li
56
v-for="(item, index) in menuData"
67
:key="index"
78
:type="item.type"
8-
@click="onItemClick($event, index)"
9-
>{{ item.desc }}</li>
9+
@click.stop="onItemClick(index)"
10+
>
11+
{{ item.desc }}
12+
</li>
1013
</ul>
14+
1115
<el-form
1216
v-if="showForm"
1317
ref="form"
1418
:model="form"
1519
label-width="80px"
16-
style="background-color: #ffffff; width: 400px; padding: 5px; border-radius: 4px;"
20+
style="
21+
background-color: #ffffff;
22+
width: 400px;
23+
padding: 5px;
24+
border-radius: 4px;
25+
"
1726
>
1827
<el-form-item label="事件描述">
1928
<el-input type="textarea" v-model="form.desc"></el-input>
2029
</el-form-item>
2130
<el-form-item>
2231
<el-button type="primary" @click="onSubmit">确定</el-button>
23-
<el-button @click="showForm = false">取消</el-button>
32+
<el-button @click="onCancelClick">取消</el-button>
2433
</el-form-item>
2534
</el-form>
2635
</div>
@@ -29,72 +38,99 @@
2938
<script>
3039
export default {
3140
name: "LineContextMenu",
32-
props: ['lineId', 'threadIndex', 'lineData', 'mustShowMenu'],
41+
props: ["lineId", "threadIndex", "lineData", "mustShowMenu"],
3342
data() {
3443
return {
3544
showMenu: true,
36-
//TODO: 添加一个新的boolean,判断是否关闭整个面板
3745
showForm: false,
3846
form: {
39-
desc: ""
47+
desc: "",
4048
},
4149
menuData: [
4250
{
4351
desc: "触发事件描述",
44-
type: "editDesc"
52+
type: "editDesc",
4553
},
4654
{
4755
desc: "删除",
48-
type: "delete"
49-
}
56+
type: "delete",
57+
},
5058
],
5159
};
5260
},
5361
methods: {
54-
onItemClick(e, index) {
62+
onItemClick(index) {
5563
let data = this.menuData[index];
5664
switch (data.type) {
5765
case "editDesc":
5866
this.showMenu = false;
5967
this.showForm = true;
6068
break;
6169
case "delete":
62-
this.showMenu = false;
63-
store.deleteLine({
64-
lineId: this.lineId,
65-
threadIndex: this.threadIndex,
66-
});
67-
//通知外层元素修改mustShowMenu为false
68-
this.$emit('toggleLineContextMenu', false);
70+
this.showMenu = false;
71+
store.deleteLine({
72+
lineId: this.lineId,
73+
threadIndex: this.threadIndex,
74+
});
75+
//通知外层元素修改mustShowMenu为false
76+
this.$emit("toggleLineContextMenu", false);
6977
break;
7078
default:
71-
79+
7280
// pass through
7381
}
74-
e.stopPropagation();
7582
// this.$emit('selectItem', this.menuData[index])
7683
},
84+
onCancelClick(){
85+
this.showForm = false;
86+
this.$emit("toggleLineContextMenu", false);
87+
},
7788
onSubmit() {
78-
//通知StatePage更新lineAry中对应的line对象的数据
79-
EventObj.$emit('updateLineData', {
80-
lineId: this.lineId,
81-
threadIndex: this.threadIndex,
82-
desc: this.form.desc
83-
});
84-
this.showForm = false;
85-
}
89+
//通知StatePage更新lineAry中对应的line对象的数据
90+
EventObj.$emit("updateLineData", {
91+
lineId: this.lineId,
92+
threadIndex: this.threadIndex,
93+
desc: this.form.desc,
94+
});
95+
this.showForm = false;
96+
},
97+
onItemMenu(){
98+
/**
99+
* this.$contextmenu({
100+
* items:[
101+
* {
102+
* label: "触发事件描述",
103+
* onClick: () => {
104+
* this.showMenu = false;
105+
* this.showForm = true;
106+
* }
107+
* }
108+
* {
109+
* label: "删除",
110+
* onClick: () => {
111+
* this.showMenu = false;
112+
store.deleteLine({
113+
lineId: this.lineId,
114+
threadIndex: this.threadIndex,
115+
});
116+
this.$emit("toggleLineContextMenu", false);
117+
*
118+
* }
119+
* }]})
120+
*/
121+
},
86122
},
87123
watch: {
88-
'mustShowMenu': function(v){
89-
if(v){
90-
this.showMenu = true;
91-
this.form.desc = this.lineData && this.lineData.desc;
92-
}
124+
mustShowMenu: function (v) {
125+
if (v) {
126+
this.showMenu = true;
127+
this.form.desc = this.lineData && this.lineData.desc;
93128
}
129+
},
94130
},
95131
created() {
96132
this.form.desc = this.lineData && this.lineData.desc;
97-
}
133+
},
98134
};
99135
</script>
100136

‎src/components/statepage/LineSvg.vue

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,19 @@
22
<g
33
@contextmenu.prevent="onContextMenu"
44
@click="activeLineChange"
5-
:class="{active: isActive}"
5+
:class="{active: isActive, running:isRunning}"
66
>
77
<path
88
:id="line.lineId"
99
:lineId="line.lineId"
1010
:d="line.d"
1111
:class="genClass()"
12-
:style="{ strokeWidth: strokeWidth}">
13-
</path>
12+
:style="{strokeWidth: strokeWidth}">
13+
</path>
1414
<path
1515
:d="getTextPath(line)"
1616
:id="line.lineId + '-textpath'"></path>
17+
1718
<text
1819
v-if="line.desc"
1920
x="15"
@@ -31,21 +32,18 @@
3132

3233
<script>
3334
import {lineCfg} from './graphCfg.js'
34-
import pathAnimation from './PathAnimation'
3535
const line_h = lineCfg.line_h
3636
const stroke_width = lineCfg.stroke_width
3737
const desc_limit = lineCfg.desc_limit
3838
export default {
3939
name: 'LineSvg',
4040
props: ['line', 'threadIndex', 'lineClass'],
4141
components:{
42-
pathAnimation
4342
},
4443
data(){
4544
return {
4645
isActive: false,
4746
isShowDesc: false,
48-
//TODO: 运行时动画
4947
isRunning: false,
5048
strokeWidth: stroke_width,
5149
descLimit: desc_limit,
@@ -156,6 +154,22 @@ export default {
156154
stroke:rgb(112, 255, 255);
157155
fill: none;
158156
}
157+
158+
.running .connect-line{
159+
fill: none;
160+
stroke-dasharray: 5 5;
161+
animation: run-right 8s linear forwards infinite normal;
162+
animation-fill-mode: none;
163+
}
164+
@keyframes run-right{
165+
0%{
166+
stroke-dashoffset: 650;
167+
}
168+
100%{
169+
stroke-dashoffset: 0;
170+
/* stroke-dasharray: 650px 0px; */
171+
}
172+
}
159173
text{
160174
display: none;
161175
}

0 commit comments

Comments
 (0)