Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
A
apaas-ui
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Analytics
Analytics
CI / CD
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
gzga-jzapi
apaas-ui
Commits
10bdb520
Commit
10bdb520
authored
Aug 10, 2020
by
刘殿昕
Browse files
Options
Browse Files
Download
Plain Diff
Merge branch 'ldx' into dev
parents
63687f6c
ad63ed67
Changes
10
Show whitespace changes
Inline
Side-by-side
Showing
10 changed files
with
547 additions
and
278 deletions
+547
-278
src/assets/i18n/language-zh.js
src/assets/i18n/language-zh.js
+6
-0
src/components/app-build-steps/app-build-step.vue
src/components/app-build-steps/app-build-step.vue
+4
-0
src/components/app-build-steps/app-build-steps.vue
src/components/app-build-steps/app-build-steps.vue
+6
-1
src/components/order-list/order-list-com.vue
src/components/order-list/order-list-com.vue
+19
-5
src/components/shopping-cart/shopping-cart-cell.vue
src/components/shopping-cart/shopping-cart-cell.vue
+47
-25
src/components/topology.vue
src/components/topology.vue
+89
-79
src/components/work-flow/super-flow.vue
src/components/work-flow/super-flow.vue
+179
-145
src/pages/workbench/component-center/process-management/process-design/index.vue
...ponent-center/process-management/process-design/index.vue
+182
-13
src/pages/workbench/fwzc_fwcs.vue
src/pages/workbench/fwzc_fwcs.vue
+14
-9
src/pages/workbench/workPlace.vue
src/pages/workbench/workPlace.vue
+1
-1
No files found.
src/assets/i18n/language-zh.js
View file @
10bdb520
...
@@ -33,4 +33,10 @@ export const lang = {
...
@@ -33,4 +33,10 @@ export const lang = {
message_alert
:
"
消息提醒管理
"
,
message_alert
:
"
消息提醒管理
"
,
banner
:
"
banner管理
"
,
banner
:
"
banner管理
"
,
message_template
:
"
消息模板管理
"
,
message_template
:
"
消息模板管理
"
,
//online component tool
online_component_tool
:
"
在线组件中心
"
,
process_design
:
"
流程设计
"
,
process_management
:
"
流程管理
"
,
new
:
"
新建
"
}
}
\ No newline at end of file
src/components/app-build-steps/app-build-step.vue
View file @
10bdb520
...
@@ -20,6 +20,10 @@ export default {
...
@@ -20,6 +20,10 @@ export default {
type
:
String
,
type
:
String
,
default
:
()
=>
""
,
default
:
()
=>
""
,
},
},
stepTitle
:
{
type
:
String
,
default
:
""
,
},
},
},
data
:
()
=>
({}),
data
:
()
=>
({}),
computed
:
{
computed
:
{
...
...
src/components/app-build-steps/app-build-steps.vue
View file @
10bdb520
...
@@ -25,7 +25,12 @@
...
@@ -25,7 +25,12 @@
</div>
</div>
<div
class=
"step_icon"
v-else
></div>
<div
class=
"step_icon"
v-else
></div>
<div
class=
"step_info"
>
<div
class=
"step_info"
>
<p
class=
"step_state"
>
<p
v-if=
"item.stepTitle != ''"
class=
"step_state"
>
<span>
{{
item
.
stepTitle
}}
</span>
</p>
<p
v-else
class=
"step_state"
>
<span
v-if=
"item.step
<
activeStep
||
done
"
>
<span
v-if=
"item.step
<
activeStep
||
done
"
>
已完成
已完成
</span>
</span>
...
...
src/components/order-list/order-list-com.vue
View file @
10bdb520
...
@@ -10,14 +10,12 @@
...
@@ -10,14 +10,12 @@
</el-tabs>
</el-tabs>
<div
class=
"list_options"
>
<div
class=
"list_options"
>
<div
class=
"button_group"
>
<div
class=
"button_group"
>
<el-button
<span
size=
"mini"
v-for=
"(item, index) in buttonList"
v-for=
"(item, index) in buttonList"
:key=
"'btn' + index"
:key=
"'btn' + index"
:class=
"item.state ? 'btn_actice':''"
:class=
"item.state ? 'btn_default btn_actice':'btn_default'"
round
@
click=
"btnClick(index)"
@
click=
"btnClick(index)"
>
{{
item
.
name
}}
</
el-butto
n>
>
{{
item
.
name
}}
</
spa
n>
</div>
</div>
<div
class=
"input_right"
>
<div
class=
"input_right"
>
<el-input
<el-input
...
@@ -224,6 +222,22 @@ export default {
...
@@ -224,6 +222,22 @@ export default {
.button_group
{
.button_group
{
padding
:
17px
10px
;
padding
:
17px
10px
;
}
}
.btn_default
{
display
:
inline-block
;
padding
:
6px
15px
;
border-radius
:
14px
;
font-size
:
12px
;
margin-right
:
6px
;
cursor
:
pointer
;
}
.btn_default
:hover
{
background-color
:
#515fe7
;
color
:
#fff
;
}
.btn_default
:focus
{
background-color
:
#fff
;
color
:
#606266
;
}
.btn_actice
{
.btn_actice
{
background-color
:
#515fe7
;
background-color
:
#515fe7
;
color
:
#fff
;
color
:
#fff
;
...
...
src/components/shopping-cart/shopping-cart-cell.vue
View file @
10bdb520
...
@@ -54,7 +54,7 @@
...
@@ -54,7 +54,7 @@
<div
class=
"shopping_cell_specification_edit"
>
<div
class=
"shopping_cell_specification_edit"
>
<el-popover
<el-popover
placement=
"right-start"
placement=
"right-start"
width=
"
28
0"
width=
"
30
0"
v-model=
"visible"
v-model=
"visible"
@
show=
"setSpecificationPop"
@
show=
"setSpecificationPop"
>
>
...
@@ -70,7 +70,14 @@
...
@@ -70,7 +70,14 @@
:class=
"specificationPop == item.id ? 'shopping_cell_specification_btn active' : 'shopping_cell_specification_btn'"
:class=
"specificationPop == item.id ? 'shopping_cell_specification_btn active' : 'shopping_cell_specification_btn'"
size=
"mini"
size=
"mini"
@
click=
"changeSpecification(item.id)"
@
click=
"changeSpecification(item.id)"
>
{{
index
+
1
+
"
.
"
+
item
.
des
}}
</el-button>
>
{{
index
+
1
+
"
.
"
+
"
访问次数:
"
+
item
.
pv
+
"
/日,
"
+
"
访问量:
"
+
item
.
count
+
"
/日
"
}}
</el-button>
</div>
</div>
<div
class=
"no_option"
v-else
>
暂无规格
</div>
<div
class=
"no_option"
v-else
>
暂无规格
</div>
</div>
</div>
...
@@ -151,25 +158,26 @@ export default {
...
@@ -151,25 +158,26 @@ export default {
cellIndex
:
{
type
:
Number
,
default
:
null
},
cellIndex
:
{
type
:
Number
,
default
:
null
},
cellCheck
:
{
cellCheck
:
{
type
:
Boolean
,
type
:
Boolean
,
default
:
false
default
:
false
,
},
},
readOnly
:
{
readOnly
:
{
type
:
Boolean
,
type
:
Boolean
,
default
:
false
default
:
false
,
},
},
cellIsService
:
{
cellIsService
:
{
type
:
Boolean
type
:
Boolean
,
}
}
,
},
},
watch
:
{
watch
:
{
cellCheck
:
function
(
val
)
{
cellCheck
:
function
(
val
)
{
this
.
checkedItem
=
val
;
this
.
checkedItem
=
val
;
},
},
cellItem
:
{
cellItem
:
{
immediate
:
true
,
// 这句重要
immediate
:
true
,
// 这句重要
handler
(
val
)
{
handler
(
val
)
{
this
.
cellItems
=
val
;
this
.
cellItems
=
val
;
this
.
cellItems
.
is_subscribe
=
this
.
cellItems
.
is_subscribe
==
1
?
true
:
false
;
this
.
cellItems
.
is_subscribe
=
this
.
cellItems
.
is_subscribe
==
1
?
true
:
false
;
if
(
this
.
cellIsService
)
{
if
(
this
.
cellIsService
)
{
if
(
this
.
cellItems
.
service
.
buy_method
==
1
)
{
if
(
this
.
cellItems
.
service
.
buy_method
==
1
)
{
this
.
specificationApplicationBtns
=
[{
id
:
1
,
value
:
"
按月
"
}];
this
.
specificationApplicationBtns
=
[{
id
:
1
,
value
:
"
按月
"
}];
...
@@ -178,12 +186,12 @@ export default {
...
@@ -178,12 +186,12 @@ export default {
}
else
{
}
else
{
this
.
specificationApplicationBtns
=
[
this
.
specificationApplicationBtns
=
[
{
id
:
1
,
value
:
"
按月
"
},
{
id
:
1
,
value
:
"
按月
"
},
{
id
:
2
,
value
:
"
按年
"
}
{
id
:
2
,
value
:
"
按年
"
}
,
];
];
}
}
}
}
}
}
,
}
}
,
},
},
data
:
()
=>
({
data
:
()
=>
({
cellItems
:
{},
cellItems
:
{},
...
@@ -195,12 +203,12 @@ export default {
...
@@ -195,12 +203,12 @@ export default {
specificationApplicationPop
:
1
,
specificationApplicationPop
:
1
,
appSpecificationBtns
:
[
appSpecificationBtns
:
[
{
id
:
1
,
value
:
"
部署
"
},
{
id
:
1
,
value
:
"
部署
"
},
{
id
:
2
,
value
:
"
开发
"
}
{
id
:
2
,
value
:
"
开发
"
}
,
],
],
specificationApplicationBtns
:
[
specificationApplicationBtns
:
[
{
id
:
1
,
value
:
"
按月
"
},
{
id
:
1
,
value
:
"
按月
"
},
{
id
:
2
,
value
:
"
按年
"
}
{
id
:
2
,
value
:
"
按年
"
}
,
]
]
,
}),
}),
computed
:
{
computed
:
{
getSpecification
()
{
getSpecification
()
{
...
@@ -211,14 +219,20 @@ export default {
...
@@ -211,14 +219,20 @@ export default {
this
.
cellItems
.
service
.
request_spcs_info
.
length
!=
0
this
.
cellItems
.
service
.
request_spcs_info
.
length
!=
0
)
{
)
{
let
requestArr
=
this
.
cellItems
.
service
.
request_spcs_info
;
let
requestArr
=
this
.
cellItems
.
service
.
request_spcs_info
;
requestArr
.
forEach
(
item
=>
{
requestArr
.
forEach
(
(
item
)
=>
{
arr
.
push
(
item
.
id
);
arr
.
push
(
item
.
id
);
});
});
}
}
let
num
=
arr
.
indexOf
(
this
.
cellItems
.
spec_id
);
let
num
=
arr
.
indexOf
(
this
.
cellItems
.
spec_id
);
let
specification
=
""
;
let
specification
=
""
;
if
(
num
!=
-
1
)
{
if
(
num
!=
-
1
)
{
specification
=
this
.
cellItems
.
service
.
request_spcs_info
[
num
].
des
;
specification
=
"
访问次数:
"
+
this
.
cellItems
.
service
.
request_spcs_info
[
num
].
pv
+
"
/日,
"
+
"
访问量:
"
+
this
.
cellItems
.
service
.
request_spcs_info
[
num
].
count
+
"
/日
"
;
}
}
return
specification
;
return
specification
;
}
else
{
}
else
{
...
@@ -228,7 +242,7 @@ export default {
...
@@ -228,7 +242,7 @@ export default {
return
"
开发
"
;
return
"
开发
"
;
}
}
}
}
}
}
,
},
},
mounted
()
{},
mounted
()
{},
methods
:
{
methods
:
{
...
@@ -263,23 +277,23 @@ export default {
...
@@ -263,23 +277,23 @@ export default {
changeCellItem
()
{
changeCellItem
()
{
this
.
$emit
(
"
changeCellMsg
"
,
{
this
.
$emit
(
"
changeCellMsg
"
,
{
index
:
this
.
cellIndex
,
index
:
this
.
cellIndex
,
data
:
this
.
cellItems
data
:
this
.
cellItems
,
});
});
},
},
delCellItem
()
{
delCellItem
()
{
this
.
$api
.
serviceShop
this
.
$api
.
serviceShop
.
delShoppingCart
([
this
.
cellItems
.
id
])
.
delShoppingCart
([
this
.
cellItems
.
id
])
.
then
(
response
=>
{
.
then
(
(
response
)
=>
{
if
(
response
.
data
.
success
==
1
)
{
if
(
response
.
data
.
success
==
1
)
{
this
.
$message
({
this
.
$message
({
message
:
this
.
cellIsService
?
"
删除该服务成功
"
:
"
删除该应用成功
"
,
message
:
this
.
cellIsService
?
"
删除该服务成功
"
:
"
删除该应用成功
"
,
type
:
"
success
"
type
:
"
success
"
,
});
});
this
.
$emit
(
"
updateList
"
);
this
.
$emit
(
"
updateList
"
);
}
else
{
}
else
{
this
.
$message
({
this
.
$message
({
message
:
this
.
cellIsService
?
"
删除该服务失败
"
:
"
删除该应用失败
"
,
message
:
this
.
cellIsService
?
"
删除该服务失败
"
:
"
删除该应用失败
"
,
type
:
"
error
"
type
:
"
error
"
,
});
});
}
}
});
});
...
@@ -290,16 +304,16 @@ export default {
...
@@ -290,16 +304,16 @@ export default {
duration
:
this
.
cellItems
.
duration
,
duration
:
this
.
cellItems
.
duration
,
spec_id
:
this
.
cellItems
.
spec_id
,
spec_id
:
this
.
cellItems
.
spec_id
,
duration_method
:
this
.
cellItems
.
duration_method
,
duration_method
:
this
.
cellItems
.
duration_method
,
is_subscribe
:
Number
(
this
.
cellItems
.
is_subscribe
)
is_subscribe
:
Number
(
this
.
cellItems
.
is_subscribe
)
,
};
};
this
.
$api
.
serviceShop
.
updateShoppingCart
(
query
).
then
(
response
=>
{
this
.
$api
.
serviceShop
.
updateShoppingCart
(
query
).
then
(
(
response
)
=>
{
if
(
response
.
data
.
success
==
1
)
{
if
(
response
.
data
.
success
==
1
)
{
}
else
{
}
else
{
console
.
log
(
response
.
data
.
errMsg
);
console
.
log
(
response
.
data
.
errMsg
);
}
}
});
});
}
}
,
}
}
,
};
};
</
script
>
</
script
>
...
@@ -437,6 +451,14 @@ export default {
...
@@ -437,6 +451,14 @@ export default {
}
}
.shopping_cell_specification_btn
{
.shopping_cell_specification_btn
{
margin
:
0
10px
10px
;
margin
:
0
10px
10px
;
max-width
:
calc
(
100%
-
20px
);
overflow
:
hidden
;
white-space
:
nowrap
;
text-overflow
:
ellipsis
;
}
.shopping_cell_specification_btn
:hover
{
background-color
:
#b2baf5
;
color
:
#f4f7fc
;
}
}
.shopping_cell_specification_btn.active
{
.shopping_cell_specification_btn.active
{
background-color
:
#515fe7
;
background-color
:
#515fe7
;
...
...
src/components/topology.vue
View file @
10bdb520
...
@@ -5,9 +5,9 @@
...
@@ -5,9 +5,9 @@
<div
class=
"legend_title"
>
拓扑图图例
</div>
<div
class=
"legend_title"
>
拓扑图图例
</div>
<div
class=
"legend_inner"
>
<div
class=
"legend_inner"
>
<div
class=
"legend_in_tit"
>
服务类型
</div>
<div
class=
"legend_in_tit"
>
服务类型
</div>
<div
id=
"nodes"
ref=
"le
nge
dNodes"
class=
"legend_nodes"
></div>
<div
id=
"nodes"
ref=
"le
gen
dNodes"
class=
"legend_nodes"
></div>
<div
class=
"legend_in_tit"
>
调用状态
</div>
<div
class=
"legend_in_tit"
>
调用状态
</div>
<div
id=
"edges"
ref=
"le
nge
dEdges"
class=
"legend_edges"
></div>
<div
id=
"edges"
ref=
"le
gen
dEdges"
class=
"legend_edges"
></div>
</div>
</div>
</div>
</div>
</div>
</div>
...
@@ -22,11 +22,18 @@ export default {
...
@@ -22,11 +22,18 @@ export default {
default
:
()
=>
{
default
:
()
=>
{
return
{
return
{
nodes
:
[],
nodes
:
[],
edges
:
[]
edges
:
[]
,
};
};
}
},
},
namespace
:
String
},
namespace
:
String
,
},
data
:
()
=>
{
return
{
graph
:
null
,
legendNodes
:
null
,
legendEdges
:
null
,
};
},
},
mounted
()
{},
mounted
()
{},
watch
:
{
watch
:
{
...
@@ -34,13 +41,13 @@ export default {
...
@@ -34,13 +41,13 @@ export default {
this
.
getCavData
();
this
.
getCavData
();
this
.
getLegendNodes
();
this
.
getLegendNodes
();
this
.
getLegendEdges
();
this
.
getLegendEdges
();
}
}
,
},
},
methods
:
{
methods
:
{
// shu ju chu li
// shu ju chu li
getCavData
()
{
getCavData
()
{
let
self
=
this
;
let
self
=
this
;
self
.
datas
.
nodes
.
map
(
node
=>
{
self
.
datas
.
nodes
.
map
(
(
node
)
=>
{
node
.
id
=
node
.
data
.
id
;
node
.
id
=
node
.
data
.
id
;
switch
(
node
.
data
.
svcType
)
{
switch
(
node
.
data
.
svcType
)
{
case
"
数据服务
"
:
case
"
数据服务
"
:
...
@@ -87,12 +94,12 @@ export default {
...
@@ -87,12 +94,12 @@ export default {
fontSize
:
12
,
fontSize
:
12
,
stroke
:
"
#fffef9
"
,
stroke
:
"
#fffef9
"
,
lineWidth
:
4
,
lineWidth
:
4
,
cursor
:
"
pointer
"
cursor
:
"
pointer
"
,
},
},
position
:
"
bottom
"
position
:
"
bottom
"
,
};
};
});
});
self
.
datas
.
edges
.
map
(
edge
=>
{
self
.
datas
.
edges
.
map
(
(
edge
)
=>
{
edge
.
id
=
edge
.
data
.
id
;
edge
.
id
=
edge
.
data
.
id
;
edge
.
source
=
edge
.
data
.
source
;
edge
.
source
=
edge
.
data
.
source
;
edge
.
target
=
edge
.
data
.
target
;
edge
.
target
=
edge
.
data
.
target
;
...
@@ -107,10 +114,10 @@ export default {
...
@@ -107,10 +114,10 @@ export default {
lineAppendWidth
:
5
,
lineAppendWidth
:
5
,
endArrow
:
{
endArrow
:
{
path
:
"
M -3,0 L 4,2 L 4,-2 Z
"
,
// 自定义箭头路径
path
:
"
M -3,0 L 4,2 L 4,-2 Z
"
,
// 自定义箭头路径
d
:
-
2
// 偏移量
d
:
-
2
,
// 偏移量
},
},
strokeOpacity
:
1
,
strokeOpacity
:
1
,
cursor
:
"
pointer
"
cursor
:
"
pointer
"
,
};
};
if
(
edge
.
data
.
traffic
.
protocol
==
"
tcp
"
)
{
if
(
edge
.
data
.
traffic
.
protocol
==
"
tcp
"
)
{
// tcp
// tcp
...
@@ -151,11 +158,12 @@ export default {
...
@@ -151,11 +158,12 @@ export default {
self
.
getCav
();
self
.
getCav
();
},
},
getCav
()
{
getCav
()
{
if
(
this
.
graph
)
this
.
graph
.
destroy
();
const
width
=
this
.
$refs
.
conCav
.
scrollWidth
;
const
width
=
this
.
$refs
.
conCav
.
scrollWidth
;
const
height
=
this
.
$refs
.
conCav
.
scrollHeight
||
500
;
const
height
=
this
.
$refs
.
conCav
.
scrollHeight
||
500
;
let
self
=
this
;
let
self
=
this
;
// console.log(self.datas);
// console.log(self.datas);
const
graph
=
new
G6
.
Graph
({
this
.
graph
=
new
G6
.
Graph
({
container
:
"
container
"
,
container
:
"
container
"
,
width
,
width
,
height
,
height
,
...
@@ -165,78 +173,79 @@ export default {
...
@@ -165,78 +173,79 @@ export default {
// 流程图布局
// 流程图布局
type
:
"
dagre
"
,
type
:
"
dagre
"
,
rankdir
:
"
LR
"
,
rankdir
:
"
LR
"
,
nodesep
:
12
nodesep
:
12
,
},
},
modes
:
{
modes
:
{
default
:
[
"
zoom-canvas
"
,
"
drag-canvas
"
,
"
drag-node
"
]
default
:
[
"
zoom-canvas
"
,
"
drag-canvas
"
,
"
drag-node
"
]
,
},
},
defaultNode
:
{
defaultNode
:
{
color
:
"
#5B8FF9
"
,
color
:
"
#5B8FF9
"
,
style
:
{
style
:
{
lineWidth
:
2
,
lineWidth
:
2
,
fill
:
"
#C6E5FF
"
,
fill
:
"
#C6E5FF
"
,
cursor
:
"
pointer
"
cursor
:
"
pointer
"
,
},
},
labelCfg
:
{
labelCfg
:
{
style
:
{
style
:
{
fill
:
"
#f36c21
"
,
fill
:
"
#f36c21
"
,
fontSize
:
10
fontSize
:
10
,
},
position
:
"
bottom
"
,
},
},
position
:
"
bottom
"
}
},
},
defaultEdge
:
{
defaultEdge
:
{
style
:
{
style
:
{
stroke
:
"
#e2e2e2
"
,
stroke
:
"
#e2e2e2
"
,
lineWidth
:
1
,
lineWidth
:
1
,
lineAppendWidth
:
6
,
lineAppendWidth
:
6
,
opacity
:
1
opacity
:
1
,
},
},
labelCfg
:
{
labelCfg
:
{
style
:
{
style
:
{
fontSize
:
10
,
fontSize
:
10
,
stroke
:
"
#fffef9
"
,
stroke
:
"
#fffef9
"
,
fill
:
"
#595959
"
,
fill
:
"
#595959
"
,
lineWidth
:
4
lineWidth
:
4
,
}
}
,
}
}
,
},
},
nodeStateStyles
:
{
nodeStateStyles
:
{
highlight
:
{
highlight
:
{
opacity
:
1
opacity
:
1
,
},
},
dark
:
{
dark
:
{
opacity
:
0.2
opacity
:
0.2
,
}
}
,
},
},
edgeStateStyles
:
{
edgeStateStyles
:
{
highlight
:
{
highlight
:
{
opacity
:
1
opacity
:
1
,
},
},
dark
:
{
dark
:
{
opacity
:
0.2
opacity
:
0.2
,
},
},
click
:
{
click
:
{
lineWidth
:
3
lineWidth
:
3
,
}
}
,
},
},
plugins
:
[]
plugins
:
[]
,
});
});
// 节点点击
// 节点点击
graph
.
on
(
"
node:click
"
,
function
(
e
)
{});
this
.
graph
.
on
(
"
node:click
"
,
function
(
e
)
{});
// 路径点击
// 路径点击
graph
.
on
(
"
edge:click
"
,
function
(
e
)
{});
this
.
graph
.
on
(
"
edge:click
"
,
function
(
e
)
{});
graph
.
on
(
"
node:dblclick
"
,
function
(
e
)
{});
this
.
graph
.
on
(
"
node:dblclick
"
,
function
(
e
)
{});
// 点击画布
// 点击画布
graph
.
on
(
"
canvas:click
"
,
function
(
e
)
{});
this
.
graph
.
on
(
"
canvas:click
"
,
function
(
e
)
{});
graph
.
data
(
self
.
datas
);
this
.
graph
.
data
(
self
.
datas
);
graph
.
render
();
this
.
graph
.
render
();
},
},
getLegendNodes
()
{
getLegendNodes
()
{
if
(
this
.
legendNodes
)
this
.
legendNodes
.
destroy
();
// legend. maybe you want use parames to reset it, but i did not do the extension
// legend. maybe you want use parames to reset it, but i did not do the extension
const
width
=
this
.
$refs
.
le
nge
dNodes
.
scrollWidth
;
const
width
=
this
.
$refs
.
le
gen
dNodes
.
scrollWidth
;
const
height
=
this
.
$refs
.
le
nge
dNodes
.
scrollHeight
;
const
height
=
this
.
$refs
.
le
gen
dNodes
.
scrollHeight
;
const
legendGraph
=
new
G6
.
Graph
({
this
.
legendNodes
=
new
G6
.
Graph
({
container
:
"
nodes
"
,
container
:
"
nodes
"
,
width
:
width
,
width
:
width
,
height
:
height
,
height
:
height
,
...
@@ -244,16 +253,16 @@ export default {
...
@@ -244,16 +253,16 @@ export default {
style
:
{
style
:
{
fill
:
"
transparent
"
,
// 节点填充色
fill
:
"
transparent
"
,
// 节点填充色
stroke
:
"
transparent
"
,
// 节点描边色
stroke
:
"
transparent
"
,
// 节点描边色
lineWidth
:
1
// 节点描边粗细
lineWidth
:
1
,
// 节点描边粗细
},
},
labelCfg
:
{
labelCfg
:
{
position
:
"
right
"
,
position
:
"
right
"
,
offset
:
10
,
offset
:
10
,
style
:
{
style
:
{
fill
:
"
#333
"
fill
:
"
#333
"
,
}
}
,
}
}
,
}
}
,
});
});
const
legendX
=
20
;
const
legendX
=
20
;
const
legendBeginY
=
20
;
const
legendBeginY
=
20
;
...
@@ -268,7 +277,7 @@ export default {
...
@@ -268,7 +277,7 @@ export default {
type
:
"
image
"
,
type
:
"
image
"
,
img
:
require
(
"
@/assets/svg/topology_ic_shujufw.svg
"
),
img
:
require
(
"
@/assets/svg/topology_ic_shujufw.svg
"
),
size
:
[
15
,
15
],
size
:
[
15
,
15
],
label
:
"
数据服务
"
label
:
"
数据服务
"
,
},
},
{
{
id
:
"
level2
"
,
id
:
"
level2
"
,
...
@@ -277,7 +286,7 @@ export default {
...
@@ -277,7 +286,7 @@ export default {
type
:
"
image
"
,
type
:
"
image
"
,
img
:
require
(
"
@/assets/svg/topology_ic_shikongfw.svg
"
),
img
:
require
(
"
@/assets/svg/topology_ic_shikongfw.svg
"
),
size
:
[
15
,
15
],
size
:
[
15
,
15
],
label
:
"
时空服务
"
label
:
"
时空服务
"
,
},
},
{
{
id
:
"
level3
"
,
id
:
"
level3
"
,
...
@@ -286,7 +295,7 @@ export default {
...
@@ -286,7 +295,7 @@ export default {
type
:
"
image
"
,
type
:
"
image
"
,
img
:
require
(
"
@/assets/svg/topology_ic_shipinfw.svg
"
),
img
:
require
(
"
@/assets/svg/topology_ic_shipinfw.svg
"
),
size
:
[
15
,
15
],
size
:
[
15
,
15
],
label
:
"
视频服务
"
label
:
"
视频服务
"
,
},
},
{
{
id
:
"
level4
"
,
id
:
"
level4
"
,
...
@@ -295,7 +304,7 @@ export default {
...
@@ -295,7 +304,7 @@ export default {
type
:
"
image
"
,
type
:
"
image
"
,
img
:
require
(
"
@/assets/svg/topology_ic_ganzhifw.svg
"
),
img
:
require
(
"
@/assets/svg/topology_ic_ganzhifw.svg
"
),
size
:
[
15
,
15
],
size
:
[
15
,
15
],
label
:
"
感知服务
"
label
:
"
感知服务
"
,
},
},
{
{
id
:
"
level5
"
,
id
:
"
level5
"
,
...
@@ -304,18 +313,19 @@ export default {
...
@@ -304,18 +313,19 @@ export default {
type
:
"
image
"
,
type
:
"
image
"
,
img
:
require
(
"
@/assets/svg/topology_ic_zonghefw.svg
"
),
img
:
require
(
"
@/assets/svg/topology_ic_zonghefw.svg
"
),
size
:
[
15
,
15
],
size
:
[
15
,
15
],
label
:
"
综合应用
"
label
:
"
综合应用
"
,
}
}
,
]
]
,
};
};
legendGraph
.
data
(
legendData
);
this
.
legendNodes
.
data
(
legendData
);
legendGraph
.
render
();
this
.
legendNodes
.
render
();
},
},
getLegendEdges
()
{
getLegendEdges
()
{
if
(
this
.
legendEdges
)
this
.
legendEdges
.
destroy
();
// legend. maybe you want use parames to reset it, but i did not do the extension
// legend. maybe you want use parames to reset it, but i did not do the extension
const
width
=
this
.
$refs
.
le
nge
dEdges
.
scrollWidth
;
const
width
=
this
.
$refs
.
le
gen
dEdges
.
scrollWidth
;
const
height
=
this
.
$refs
.
le
nge
dEdges
.
scrollHeight
;
const
height
=
this
.
$refs
.
le
gen
dEdges
.
scrollHeight
;
const
legendGraph
=
new
G6
.
Graph
({
this
.
legendEdges
=
new
G6
.
Graph
({
container
:
"
edges
"
,
container
:
"
edges
"
,
width
:
width
,
width
:
width
,
height
:
height
,
height
:
height
,
...
@@ -323,16 +333,16 @@ export default {
...
@@ -323,16 +333,16 @@ export default {
style
:
{
style
:
{
fill
:
"
transparent
"
,
// 节点填充色
fill
:
"
transparent
"
,
// 节点填充色
stroke
:
"
transparent
"
,
// 节点描边色
stroke
:
"
transparent
"
,
// 节点描边色
lineWidth
:
1
// 节点描边粗细
lineWidth
:
1
,
// 节点描边粗细
},
},
labelCfg
:
{
labelCfg
:
{
position
:
"
right
"
,
position
:
"
right
"
,
offset
:
10
,
offset
:
10
,
style
:
{
style
:
{
fill
:
"
#333
"
fill
:
"
#333
"
,
}
}
,
}
}
,
}
}
,
});
});
const
legendX
=
10
;
const
legendX
=
10
;
const
legendBeginY
=
20
;
const
legendBeginY
=
20
;
...
@@ -345,7 +355,7 @@ export default {
...
@@ -345,7 +355,7 @@ export default {
x
:
legendX
,
x
:
legendX
,
y
:
legendBeginY
,
y
:
legendBeginY
,
type
:
"
circle
"
,
type
:
"
circle
"
,
size
:
1
size
:
1
,
},
},
// line1 point 1
// line1 point 1
{
{
...
@@ -354,7 +364,7 @@ export default {
...
@@ -354,7 +364,7 @@ export default {
y
:
legendBeginY
,
y
:
legendBeginY
,
label
:
"
正常
"
,
label
:
"
正常
"
,
type
:
"
circle
"
,
type
:
"
circle
"
,
size
:
1
size
:
1
,
},
},
// line2 point 0
// line2 point 0
{
{
...
@@ -362,7 +372,7 @@ export default {
...
@@ -362,7 +372,7 @@ export default {
x
:
legendX
,
x
:
legendX
,
y
:
legendBeginY
+
legendYPadding
,
y
:
legendBeginY
+
legendYPadding
,
type
:
"
circle
"
,
type
:
"
circle
"
,
size
:
1
size
:
1
,
},
},
// line2 point 1
// line2 point 1
{
{
...
@@ -371,8 +381,8 @@ export default {
...
@@ -371,8 +381,8 @@ export default {
y
:
legendBeginY
+
legendYPadding
,
y
:
legendBeginY
+
legendYPadding
,
label
:
"
错误
"
,
label
:
"
错误
"
,
type
:
"
circle
"
,
type
:
"
circle
"
,
size
:
1
size
:
1
,
}
}
,
],
],
edges
:
[
edges
:
[
{
{
...
@@ -385,10 +395,10 @@ export default {
...
@@ -385,10 +395,10 @@ export default {
lineAppendWidth
:
5
,
lineAppendWidth
:
5
,
endArrow
:
{
endArrow
:
{
path
:
"
M -3,0 L 4,2 L 4,-2 Z
"
,
// 自定义箭头路径
path
:
"
M -3,0 L 4,2 L 4,-2 Z
"
,
// 自定义箭头路径
d
:
-
2
// 偏移量
d
:
-
2
,
// 偏移量
},
cursor
:
"
pointer
"
,
},
},
cursor
:
"
pointer
"
}
},
},
{
{
id
:
"
line1
"
,
id
:
"
line1
"
,
...
@@ -400,17 +410,17 @@ export default {
...
@@ -400,17 +410,17 @@ export default {
lineAppendWidth
:
5
,
lineAppendWidth
:
5
,
endArrow
:
{
endArrow
:
{
path
:
"
M -3,0 L 4,2 L 4,-2 Z
"
,
// 自定义箭头路径
path
:
"
M -3,0 L 4,2 L 4,-2 Z
"
,
// 自定义箭头路径
d
:
-
2
// 偏移量
d
:
-
2
,
// 偏移量
},
},
cursor
:
"
pointer
"
cursor
:
"
pointer
"
,
}
}
,
}
}
,
]
]
,
};
};
legendGraph
.
data
(
legendData
);
this
.
legendEdges
.
data
(
legendData
);
legendGraph
.
render
();
this
.
legendEdges
.
render
();
}
}
,
}
}
,
};
};
</
script
>
</
script
>
...
...
src/components/work-flow/super-flow.vue
View file @
10bdb520
...
@@ -2,19 +2,46 @@
...
@@ -2,19 +2,46 @@
<
template
>
<
template
>
<div>
<div>
<div
class=
"super-flow-demo1"
>
<div
class=
"super-flow-demo1"
>
<div
class=
"scale_block"
>
<div
class=
"scale_control"
>
<div
class=
"less"
>
<i
class=
"el-icon-minus"
></i>
</div>
<div
class=
"num"
>
{{
scale_num
}}
%
</div>
<div
class=
"add"
>
<i
class=
"el-icon-plus"
></i>
</div>
</div>
<div
class=
"node-container"
>
<div
class=
"node-container"
>
<p
class=
"label_head"
>
节点类型
</p>
<p
class=
"label_head"
>
节点类型
</p>
<p
class=
"label_explanation"
>
请拖拽添加到流程中
</p>
<p
class=
"label_explanation"
>
请拖拽添加到流程中
</p>
<el-input-number
v-model=
"scale_num"
@
change=
"handleChange"
:step=
"10"
:step-strictly=
"true"
:min=
"50"
:max=
"150"
label=
"描述文字"
></el-input-number>
<div
<span
class=
"node-item"
v-for=
"(item, index) in nodeItemList"
:key=
"index"
@
mousedown=
"evt => nodeItemMouseDown(evt, item.value)"
>
{{
item
.
label
}}
</span>
class=
"node-item"
:class=
"
{'node-item-begin': item.value.meta.type == 0, 'node-item-end': item.value.meta.type == 1, 'node-item-default': item.value.meta.type == 2}"
v-for="(item, index) in nodeItemList"
:key="index"
@mousedown="evt => nodeItemMouseDown(evt, item.value)"
>
<span>
{{
item
.
label
}}
</span>
</div>
</div>
</div>
<div
class=
"flow-container"
:class=
"`scale$
{scale_num}`" ref="flowContainer">
<super-flow
ref=
"superFlow"
:node-list=
"nodeList"
:link-list=
"linkList"
:link-menu=
"linkMenu"
:link-base-style=
"linkBaseStyle"
:link-style=
"linkStyle"
:link-desc=
"linkDesc"
:origin=
"origin"
>
<template
v-slot:node=
"
{meta}">
<div
:class=
"
{'flow-node-begin': meta.type == 0, 'flow-node-end': meta.type == 1, 'flow-node-default': meta.type == 2}" :id="meta.id">
<div
@
click=
"clickItem(meta)"
>
{{
meta
.
name
}}
</div>
</div>
<div
class=
"flow-container"
ref=
"flowContainer"
>
<super-flow
ref=
"superFlow"
:node-list=
"nodeList"
:link-list=
"linkList"
:link-menu=
"linkMenu"
line-color=
"#c4d8f8"
onLineColor=
"#94a8c8"
:origin=
"origin"
>
<template
v-slot:node=
"
{meta}">
<div
:class=
"
{'flow-node-begin': meta.type == 0, 'flow-node-end': meta.type == 1, 'flow-node-default': meta.type == 2}"
:id="meta.id"
>
<div
class=
"node_span"
@
click=
"clickItem(meta)"
>
{{
meta
.
name
}}
</div>
</div>
</div>
</
template
>
</
template
>
</super-flow>
</super-flow>
...
@@ -26,7 +53,7 @@
...
@@ -26,7 +53,7 @@
<
script
>
<
script
>
const
drawerType
=
{
const
drawerType
=
{
node
:
0
,
node
:
0
,
link
:
1
link
:
1
,
};
};
export
default
{
export
default
{
data
()
{
data
()
{
...
@@ -68,14 +95,14 @@ export default {
...
@@ -68,14 +95,14 @@ export default {
}
else
{
}
else
{
this
.
$refs
.
linkSetting
.
clearValidate
();
this
.
$refs
.
linkSetting
.
clearValidate
();
}
}
}
}
,
},
},
linkSetting
:
{
linkSetting
:
{
desc
:
""
desc
:
""
,
},
},
nodeSetting
:
{
nodeSetting
:
{
name
:
""
,
name
:
""
,
desc
:
""
desc
:
""
,
},
},
dragConf
:
{
dragConf
:
{
isDown
:
false
,
isDown
:
false
,
...
@@ -85,73 +112,57 @@ export default {
...
@@ -85,73 +112,57 @@ export default {
clientX
:
0
,
clientX
:
0
,
clientY
:
0
,
clientY
:
0
,
ele
:
null
,
ele
:
null
,
info
:
null
info
:
null
,
},
},
nodeItemList
:
[
nodeItemList
:
[
{
{
label
:
"
开始
"
,
label
:
"
普通节点
"
,
value
:
{
value
:
{
width
:
120
,
width
:
120
,
height
:
4
0
,
height
:
4
8
,
meta
:
{
meta
:
{
label
:
"
开始开始开始开始开始
"
,
label
:
"
普通节点
"
,
name
:
"
开始开始开始开始开始
"
,
name
:
"
普通节点
"
,
type
:
0
type
:
2
,
}
}
,
}
}
,
},
},
{
{
label
:
"
结束
"
,
label
:
"
开始
"
,
value
:
{
value
:
{
width
:
120
,
width
:
120
,
height
:
4
0
,
height
:
4
8
,
meta
:
{
meta
:
{
label
:
"
结束
"
,
label
:
"
开始
"
,
name
:
"
结束
"
,
name
:
"
开始
"
,
type
:
1
type
:
0
,
}
}
,
}
}
,
},
},
{
{
label
:
"
普通节点
"
,
label
:
"
结束
"
,
value
:
{
value
:
{
width
:
120
,
width
:
120
,
height
:
4
0
,
height
:
4
8
,
meta
:
{
meta
:
{
label
:
"
普通节点
"
,
label
:
"
结束
"
,
name
:
"
普通节点
"
,
name
:
"
结束
"
,
type
:
2
type
:
1
,
}
}
,
}
}
,
}
}
,
],
],
linkMenu
:
[
linkMenu
:
[
[
[
{
{
label
:
"
删除
"
,
label
:
"
删除
"
,
selected
:
link
=>
{
selected
:
(
link
)
=>
{
console
.
log
(
link
);
console
.
log
(
link
);
link
.
remove
();
link
.
remove
();
}
},
},
{
},
label
:
"
编辑
"
,
],
selected
:
link
=>
{
this
.
drawerConf
.
open
(
drawerType
.
link
,
link
);
}
}
]
],
],
linkBaseStyle
:
{
color
:
"
#666666
"
,
// line 颜色
hover
:
"
#FF0000
"
,
// line hover 的颜色
textColor
:
"
#666666
"
,
// line 描述文字颜色
textHover
:
"
#FF0000
"
,
// line 描述文字 hover 颜色
font
:
"
14px Arial
"
,
// line 描述文字 字体设置 参考 canvas font
dotted
:
false
,
// 是否是虚线
lineDash
:
[
4
,
4
],
// 虚线时生效
background
:
"
rgba(255,255,255,0.6)
"
// 描述文字背景色
}
};
};
},
},
mounted
()
{
mounted
()
{
...
@@ -164,12 +175,7 @@ export default {
...
@@ -164,12 +175,7 @@ export default {
},
},
methods
:
{
methods
:
{
linkStyle
(
link
)
{
linkStyle
(
link
)
{
return
{
return
{};
// hover: '#FF00FF'
};
},
linkDesc
(
link
)
{
return
link
.
meta
?
link
.
meta
.
desc
:
""
;
},
},
docMousemove
({
clientX
,
clientY
})
{
docMousemove
({
clientX
,
clientY
})
{
const
conf
=
this
.
dragConf
;
const
conf
=
this
.
dragConf
;
...
@@ -191,7 +197,7 @@ export default {
...
@@ -191,7 +197,7 @@ export default {
top
,
top
,
right
,
right
,
bottom
,
bottom
,
left
left
,
}
=
this
.
$refs
.
flowContainer
.
getBoundingClientRect
();
}
=
this
.
$refs
.
flowContainer
.
getBoundingClientRect
();
// 判断鼠标是否进入 flow container
// 判断鼠标是否进入 flow container
if
(
if
(
...
@@ -217,7 +223,7 @@ export default {
...
@@ -217,7 +223,7 @@ export default {
// 添加节点
// 添加节点
this
.
$refs
.
superFlow
.
addNode
({
this
.
$refs
.
superFlow
.
addNode
({
coordinate
,
coordinate
,
...
conf
.
info
...
conf
.
info
,
});
});
conf
.
isMove
=
false
;
conf
.
isMove
=
false
;
}
}
...
@@ -239,7 +245,7 @@ export default {
...
@@ -239,7 +245,7 @@ export default {
clientY
:
clientY
,
clientY
:
clientY
,
info
,
info
,
ele
,
ele
,
isDown
:
true
isDown
:
true
,
});
});
ele
.
style
.
position
=
"
fixed
"
;
ele
.
style
.
position
=
"
fixed
"
;
ele
.
style
.
margin
=
"
0
"
;
ele
.
style
.
margin
=
"
0
"
;
...
@@ -253,12 +259,12 @@ export default {
...
@@ -253,12 +259,12 @@ export default {
getData
()
{
getData
()
{
return
this
.
$refs
.
superFlow
.
toJSON
();
return
this
.
$refs
.
superFlow
.
toJSON
();
},
},
handleChange
()
{}
handleChange
()
{}
,
}
}
,
};
};
</
script
>
</
script
>
<
style
lang=
"less"
>
<
style
lang=
"less"
scoped
>
.link-base-style-form {
.link-base-style-form {
.el-form-item {
.el-form-item {
margin-bottom: 12px;
margin-bottom: 12px;
...
@@ -269,117 +275,145 @@ export default {
...
@@ -269,117 +275,145 @@ export default {
.super-flow-demo1 {
.super-flow-demo1 {
margin-top: 20px;
margin-top: 20px;
width: 100%;
width: 100%;
height:
800px
;
height:
100%
;
background-color: #f
5f5f5
;
background-color: #f
ff
;
@list-width:
20
0px;
@list-width:
16
0px;
position: relative;
position: relative;
> .node-container {
> .flow-container {
width: @list-width;
width: 100%;
float: left;
height: 100%;
overflow: hidden;
}
}
.node-item {
@node-item-height: 42px;
font-size: 16px;
display: inline-block;
height: @node-item-height + 6;
width: 120px;
margin-top: 18px;
background-color: #ffffff;
border-radius: 10px;
line-height: @node-item-height;
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
cursor: pointer;
user-select: none;
text-align: center;
z-index: 6;
&:hover {
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.4);
}
&.node-item-begin {
border: solid 3px #25bdb1;
}
&.node-item-end {
border: solid 3px #f78181;
}
&.node-item-default {
border: solid 3px #b4c6f5;
}
}
.scale_block {
position: absolute;
position: absolute;
z-index: 2;
left: 0;
left: 0;
height: 400px;
z-index: 2;
top: 5px;
width: 160px;
.scale_control {
width: 130px;
display: flex;
justify-content: space-around;
border-radius: 8px;
border: solid 2px #e3e5ef;
height: 40px;
font-size: 16px;
line-height: 36px;
margin: 0 auto;
color: #8390ee;
.less {
padding: 0 10px;
border-right: solid 2px #e3e5ef;
}
.add {
padding: 0 10px;
border-left: solid 2px #e3e5ef;
}
.num {
color: #58617a;
}
}
.node-container {
width: 160px;
height: 300px;
text-align: center;
text-align: center;
background-color: #ffffff;
background-color: #f8f9fd;
border-radius: 8px;
margin-top: 20px;
.label_head {
.label_head {
font-weight: bold;
font-weight: bold;
font-size: 1
8
px;
font-size: 1
4
px;
text-align: center;
text-align: center;
padding: 20px 0;
padding: 20px 0 15px;
color: #242c43;
}
}
.label_explanation {
.label_explanation {
font-size: 1
6
px;
font-size: 1
4
px;
text-align: center;
text-align: center;
padding-bottom: 5px
;
color: #8890a7
;
}
}
}
}
> .flow-container {
}
width: 100%;
</
style
>
float: left;
<
style
lang=
"less"
>
height: 100%;
.super-flow {
overflow: hidden;
}
.super-flow__node {
.super-flow__node {
box-shadow: none;
border: none;
border: none;
background-color: transparent;
background-color: transparent;
border-radius: 8px;
border-radius: 8px;
font-size: 16px;
&:focus {
&:focus {
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.8);
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.8);
background-color: #515fe7;
color: #fff;
}
}
.flow-node-begin {
/deep/ .node_span {
width: 100%;
height: 100%;
line-height: 36px;
padding: 0 6px;
font-size: 12px;
text-align: center;
text-align: center;
overflow: hidden;
overflow: hidden;
white-space: nowrap;
white-space: nowrap;
text-overflow: ellipsis;
text-overflow: ellipsis;
}
.flow-node-begin {
width: 100%;
height: 100%;
line-height: 42px;
padding: 0 6px;
border-radius: 8px;
border-radius: 8px;
border: 2px solid #444;
border: solid 3px #109e93;
background-color: #25bdb1;
color: #ffffff;
}
}
.flow-node-end {
.flow-node-end {
width: 100%;
width: 100%;
line-height: 36px;
height: 100%;
line-height: 42px;
padding: 0 6px;
padding: 0 6px;
font-size: 12px;
text-align: center;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
border-radius: 8px;
border-radius: 8px;
border: 2px solid #f80;
background-color: #f78181;
border: solid 3px #e86262;
color: #ffffff;
}
}
.flow-node-default {
.flow-node-default {
width: 100%;
width: 100%;
line-height: 36px;
height: 100%;
line-height: 42px;
padding: 0 6px;
padding: 0 6px;
font-size: 12px;
text-align: center;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
border-radius: 8px;
border-radius: 8px;
border:
2px solid #3a9
;
border:
solid 3px #b4c6f5
;
}
}
}
}
}
}
.node-item {
.super-flow__menu-container .super-flow__menu {
@node-item-height: 30px;
font-size: 14px;
display: inline-block;
height: @node-item-height;
width: 120px;
width: 120px;
margin-top: 20px;
background-color: #ffffff;
line-height: @node-item-height;
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
cursor: pointer;
user-select: none;
text-align: center;
z-index: 6;
&:hover {
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.4);
}
}
</
style
>
<
style
scoped
>
.scale60
{
transform
:
scale
(
0.6
,
0.6
);
}
.scale70
{
transform
:
scale
(
0.7
,
0.7
);
}
.scale80
{
transform
:
scale
(
0.8
,
0.8
);
}
.scale90
{
transform
:
scale
(
0.9
,
0.9
);
}
.scale100
{
transform
:
scale
(
1
,
1
);
}
}
</
style
>
</
style
>
\ No newline at end of file
src/pages/workbench/component-center/process-management/process-design/index.vue
View file @
10bdb520
<
template
>
<
template
>
<div
class=
"design_contain"
>
<div
class=
"design_contain"
>
<el-button
@
click=
"getData"
>
获取参数
</el-button>
<el-breadcrumb
separator=
"/"
class=
"bread_crumb1"
>
<WorkFlow
ref=
"workFlow"
/>
<el-breadcrumb-item
:to=
"
{ path: '/workplace' }">
{{
$t
(
"
lang.online_component_tool
"
)
}}
</el-breadcrumb-item>
<el-breadcrumb-item
:to=
"
{ path: '/progress/designer' }">
{{
$t
(
"
lang.process_design
"
)
}}
</el-breadcrumb-item>
<el-breadcrumb-item
:to=
"
{ path: '/progress/designer' }">
{{
$t
(
"
lang.process_management
"
)
}}
</el-breadcrumb-item>
<el-breadcrumb-item>
{{
$t
(
"
lang.new
"
)
}}
</el-breadcrumb-item>
</el-breadcrumb>
<BlockRadius
class=
"block_item"
>
<steps
:active-step=
"step"
:done=
"done"
:show-done=
"true"
done-title=
"保存成功"
done-sub-title=
"可返回流程管理列表查看该流程,并进行流程的部署和发布。"
class=
"apaas_steps"
>
<step
title=
"基本信息"
:step=
"0"
:active-icon=
"require('@/assets/imgs/progress_ic_xinxitx.png')"
class=
"apaas_step"
>
<div
class=
"step_in"
>
<el-form
:model=
"basic_form"
:rules=
"rules"
ref=
"basicInformation"
class=
"form_left"
>
<el-form-item>
<p
class=
"formname"
>
流程名称:
</p>
<el-input
v-model=
"basic_form.name"
placeholder=
"请输入流程名称"
></el-input>
</el-form-item>
<el-form-item
prop=
"preson"
>
<p
class=
"formname"
>
工作区域:
</p>
<el-select
v-model=
"basic_form.workplace"
@
change=
"changeWorkPlace"
placeholder=
"请选择工作区域"
>
<el-option
v-for=
"item in workplace_list"
:label=
"item"
:value=
"item"
:key=
"item"
></el-option>
</el-select>
</el-form-item>
<el-form-item
prop=
"phone"
>
<p
class=
"formname"
>
流程描述:
</p>
<el-input
type=
"textarea"
:autosize=
"
{ minRows: 6, maxRows: 10}"
v-model="basic_form.desc"
placeholder="请输入流程描述"
>
</el-input>
</el-form-item>
</el-form>
<div
class=
"btn_footer"
>
<el-button
class=
"cancel"
@
click=
"cancel"
>
取消
</el-button>
<el-button
class=
"next"
@
click=
"next"
>
下一步
</el-button>
</div>
</div>
</step>
<step
title=
"流程设计"
:step=
"1"
:active-icon=
"require('@/assets/imgs/progress_ic_liucheng.png')"
class=
"apaas_step"
>
<div
class=
"step_in"
>
<WorkFlow
ref=
"workFlow"
class=
"work_flow"
/>
<div
class=
"btn_footer"
>
<el-button
class=
"cancel"
@
click=
"cancel"
>
取消
</el-button>
<div>
<el-button
class=
"cancel"
@
click=
"back"
>
上一步
</el-button>
<el-button
class=
"next"
@
click=
"complete"
>
完成
</el-button>
</div>
</div>
</div>
</step>
<step
title
step-title=
"完成"
:step=
"2"
:active-icon=
"require('@/assets/imgs/progress_ic_wancheng.png')"
class=
"apaas_step"
></step>
<template
slot=
"action"
>
<el-button
type=
"primary"
@
click=
"backToList"
>
返回列表
</el-button>
</
template
>
</steps>
</BlockRadius>
</div>
</div>
</template>
</template>
<
script
>
<
script
>
import
WorkFlow
from
"
@/components/work-flow/super-flow
"
;
import
WorkFlow
from
"
@/components/work-flow/super-flow
"
;
import
BlockRadius
from
"
@/components/general/block-radius
"
;
import
Steps
from
"
@/components/app-build-steps/app-build-steps
"
;
import
Step
from
"
@/components/app-build-steps/app-build-step
"
;
export
default
{
export
default
{
components
:
{
components
:
{
WorkFlow
WorkFlow
,
BlockRadius
,
Steps
,
Step
,
},
data
:
()
=>
{
return
{
step
:
0
,
done
:
false
,
basic_form
:
{
name
:
""
,
workplace
:
""
,
desc
:
""
,
},
rules
:
{
name
:
[
{
required
:
true
,
message
:
"
请输入流程名称
"
,
trigger
:
"
blur
"
},
{
max
:
16
,
message
:
"
不能超过16个字符
"
,
trigger
:
"
blur
"
},
],
workplace
:
[
{
required
:
true
,
message
:
"
请选择工作区域
"
,
trigger
:
"
blur
"
},
],
desc
:
[
{
required
:
true
,
message
:
"
请输入流程描述
"
,
trigger
:
"
blur
"
},
{
max
:
400
,
message
:
"
不能超过400个字符
"
,
trigger
:
"
blur
"
},
],
},
workplace_list
:
[],
};
},
},
methods
:
{
methods
:
{
getData
()
{
verification
()
{
let
self
=
this
;
let
self
=
this
;
let
data
=
self
.
$refs
.
workFlow
.
getData
();
let
data
=
self
.
$refs
.
workFlow
.
getData
();
console
.
log
(
data
);
console
.
log
(
data
);
...
@@ -23,7 +135,7 @@ export default {
...
@@ -23,7 +135,7 @@ export default {
let
end_id
=
""
;
let
end_id
=
""
;
let
start_before
=
0
;
let
start_before
=
0
;
let
end_after
=
0
;
let
end_after
=
0
;
data
.
nodeList
.
forEach
(
item
=>
{
data
.
nodeList
.
forEach
(
(
item
)
=>
{
if
(
item
.
meta
.
type
==
0
)
{
if
(
item
.
meta
.
type
==
0
)
{
start_num
++
;
start_num
++
;
start_id
=
item
.
id
;
start_id
=
item
.
id
;
...
@@ -33,40 +145,97 @@ export default {
...
@@ -33,40 +145,97 @@ export default {
end_id
=
item
.
id
;
end_id
=
item
.
id
;
}
}
});
});
data
.
linkList
.
forEach
(
item
=>
{
data
.
linkList
.
forEach
(
(
item
)
=>
{
if
(
start_id
==
item
.
endId
)
{
if
(
start_id
==
item
.
endId
)
{
start_before
++
;
start_before
++
;
}
}
if
(
end_id
==
item
.
startId
)
{
if
(
end_id
==
item
.
startId
)
{
end_after
++
;
end_after
++
;
}
}
});
});
if
(
start_num
!=
1
||
end_num
!=
1
)
{
if
(
start_num
!=
1
||
end_num
!=
1
)
{
this
.
$message
({
this
.
$message
({
message
:
"
开始节点与结束节点均应有且只有一个
"
,
message
:
"
开始节点与结束节点均应有且只有一个
"
,
type
:
"
warning
"
type
:
"
warning
"
,
});
});
}
else
if
(
start_before
!=
0
)
{
}
else
if
(
start_before
!=
0
)
{
this
.
$message
({
this
.
$message
({
message
:
"
开始节点前面不应连接其它节点
"
,
message
:
"
开始节点前面不应连接其它节点
"
,
type
:
"
warning
"
type
:
"
warning
"
,
});
});
}
else
if
(
end_after
!=
0
)
{
}
else
if
(
end_after
!=
0
)
{
this
.
$message
({
this
.
$message
({
message
:
"
结束节点后面不应连接其它节点
"
,
message
:
"
结束节点后面不应连接其它节点
"
,
type
:
"
warning
"
type
:
"
warning
"
,
});
});
}
}
}
},
}
backToList
()
{
this
.
$router
.
push
(
"
/message/directed_push
"
);
},
changeWorkPlace
()
{},
cancel
()
{
this
.
$router
.
go
(
-
1
);
},
next
()
{
this
.
step
++
;
},
back
()
{
this
.
step
--
;
},
complete
()
{
this
.
verification
();
},
},
};
};
</
script
>
</
script
>
<
style
scoped
>
<
style
scoped
>
.design_contain
{
.design_contain
{
width
:
100%
;
width
:
100%
;
height
:
calc
(
100%
-
20px
);
padding
:
0
20px
;
padding
:
0
20px
;
margin-bottom
:
20px
;
}
.block_item
{
height
:
calc
(
100%
-
56px
);
}
.step_in
{
height
:
100%
;
}
.form_left
{
width
:
55%
;
height
:
calc
(
100%
-
70px
);
}
.btn_footer
{
width
:
calc
(
100%
-
20px
);
height
:
40px
;
padding
:
0
10px
;
display
:
flex
;
justify-content
:
space-between
;
}
.cancel
{
background-color
:
#e3e5ef
;
color
:
#0f2683
;
}
.next
{
background-color
:
#0f2683
;
color
:
#f8f9fd
;
}
.work_flow
{
height
:
calc
(
100%
-
70px
);
}
</
style
>
<
style
>
.block_item
.el-textarea__inner
{
border-radius
:
8px
;
background-color
:
#e3e5ef
;
border
:
solid
1px
#e3e5ef
;
}
.block_item
.el-input__inner
{
background-color
:
#e3e5ef
;
border
:
solid
1px
#e3e5ef
;
}
.block_item
.el-select
{
width
:
100%
;
}
}
</
style
>
</
style
>
src/pages/workbench/fwzc_fwcs.vue
View file @
10bdb520
...
@@ -355,10 +355,7 @@
...
@@ -355,10 +355,7 @@
</block-radius>
</block-radius>
</div>
</div>
<div
style=
"display: none"
>
<div
style=
"display: none"
>
<iframe
<iframe
id=
"listener"
:src=
"addPortalItemUrl"
></iframe>
id=
"listener"
:src=
"addPortalItemUrl"
></iframe>
</div>
</div>
<apass-dialog
<apass-dialog
ref=
"alertChange"
ref=
"alertChange"
...
@@ -388,7 +385,8 @@ export default {
...
@@ -388,7 +385,8 @@ export default {
},
},
data
()
{
data
()
{
return
{
return
{
addPortalItemUrl
:
gisServiceUrl
+
'
/portal/apaasplat/viewer/addPortalItem.html
'
,
addPortalItemUrl
:
gisServiceUrl
+
"
/portal/apaasplat/viewer/addPortalItem.html
"
,
btnList
:
[],
btnList
:
[],
activeBtn
:
null
,
activeBtn
:
null
,
serviceUrl
:
""
,
serviceUrl
:
""
,
...
@@ -552,6 +550,7 @@ export default {
...
@@ -552,6 +550,7 @@ export default {
},
},
is_portal
:
false
,
is_portal
:
false
,
portal_id
:
""
,
portal_id
:
""
,
dataType
:
""
,
};
};
},
},
computed
:
{},
computed
:
{},
...
@@ -687,12 +686,14 @@ export default {
...
@@ -687,12 +686,14 @@ export default {
this
.
$api
.
workbench
.
fwzcFwcs
(
query
).
then
((
response
)
=>
{
this
.
$api
.
workbench
.
fwzcFwcs
(
query
).
then
((
response
)
=>
{
if
(
response
.
data
.
success
==
1
)
{
if
(
response
.
data
.
success
==
1
)
{
let
data
=
response
.
data
.
data
;
let
data
=
response
.
data
.
data
;
this
.
body_fields
=
data
.
body_fields
;
this
.
param_fields
=
data
.
param_fields
;
if
(
data
.
body_fields
&&
data
.
body_fields
.
length
!=
0
)
{
if
(
data
.
body_fields
&&
data
.
body_fields
.
length
!=
0
)
{
this
.
datasQqcs
=
data
.
body_fields
;
this
.
datasQqcs
=
data
.
body_fields
;
this
.
param_fields
=
data
.
param_fields
;
this
.
dataType
=
"
body
"
;
}
else
{
}
else
{
this
.
datasQqcs
=
data
.
param_fields
;
this
.
datasQqcs
=
data
.
param_fields
;
this
.
body_fields
=
[]
;
this
.
dataType
=
"
param
"
;
}
}
this
.
datasFhcs
=
data
.
response_fields
;
this
.
datasFhcs
=
data
.
response_fields
;
this
.
resSuccess
=
true
;
this
.
resSuccess
=
true
;
...
@@ -886,9 +887,13 @@ export default {
...
@@ -886,9 +887,13 @@ export default {
method
:
this
.
select
,
method
:
this
.
select
,
url
:
this
.
serviceUrl
,
url
:
this
.
serviceUrl
,
request_fields
:
request_fields
:
this
.
body_fields
.
length
==
0
?
[]
:
this
.
request_fields
,
this
.
dataType
==
"
body
"
?
this
.
request_fields
:
this
.
body_fields
,
request_query_fields
:
request_query_fields
:
this
.
param_fields
.
length
==
0
?
[]
:
this
.
request_fields
,
this
.
dataType
==
"
param
"
?
this
.
request_fields
:
this
.
param_fields
,
response_fields
:
this
.
response_fields
,
response_fields
:
this
.
response_fields
,
content_type
:
contentType
,
content_type
:
contentType
,
portal_id
:
this
.
portal_id
,
portal_id
:
this
.
portal_id
,
...
...
src/pages/workbench/workPlace.vue
View file @
10bdb520
...
@@ -998,7 +998,7 @@ export default {
...
@@ -998,7 +998,7 @@ export default {
pic
:
require
(
"
@/assets/imgs/home_tool_ic_kshbb.png
"
),
pic
:
require
(
"
@/assets/imgs/home_tool_ic_kshbb.png
"
),
bg
:
"
#fff2e2
"
,
bg
:
"
#fff2e2
"
,
color
:
"
#ea7d19
"
,
color
:
"
#ea7d19
"
,
url
:
"
/bi
"
,
url
:
"
/bi
/
"
,
target
:
1
target
:
1
},
},
{
{
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment