Skip to content

A
apaas-ui
Commit 10bdb520 authored by 刘殿昕's avatar 刘殿昕
Browse files
Options

Merge branch 'ldx' into dev

parents 63687f6c ad63ed67
Hide whitespace changes
Inline Side-by-side
Showing with 547 additions and 278 deletions
src/assets/i18n/language-zh.js
View file @ 10bdb520
......@@ -33,4 +33,10 @@ export const lang = {
message_alert: "消息提醒管理",
banner: "banner管理",
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 {
type: String,
default: () => "",
},
stepTitle: {
type: String,
default: "",
},
},
data: () => ({}),
computed: {
......
src/components/app-build-steps/app-build-steps.vue
View file @ 10bdb520
......@@ -25,7 +25,12 @@
</div>
<div class="step_icon" v-else></div>
<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>
......
src/components/order-list/order-list-com.vue
View file @ 10bdb520
......@@ -10,14 +10,12 @@
</el-tabs>
<div class="list_options">
<div class="button_group">
<el-button
size="mini"
<span
v-for="(item, index) in buttonList"
:key="'btn' + index"
:class="item.state ? 'btn_actice':''"
round
:class="item.state ? 'btn_default btn_actice':'btn_default'"
@click="btnClick(index)"
>{{ item.name }}</el-button>
>{{ item.name }}</span>
</div>
<div class="input_right">
<el-input
......@@ -224,6 +222,22 @@ export default {
.button_group {
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 {
background-color: #515fe7;
color: #fff;
......
src/components/shopping-cart/shopping-cart-cell.vue
View file @ 10bdb520
......@@ -54,7 +54,7 @@
<div class="shopping_cell_specification_edit">
<el-popover
placement="right-start"
width="280"
width="300"
v-model="visible"
@show="setSpecificationPop"
>
......@@ -70,7 +70,14 @@
:class="specificationPop == item.id ? 'shopping_cell_specification_btn active' : 'shopping_cell_specification_btn'"
size="mini"
@click="changeSpecification(item.id)"
>{{ index + 1 + ". " + item.des }}</el-button>
>
{{ index + 1 + ". " + "访问次数：" +
item.pv +
"/日，" +
"访问量：" +
item.count +
"/日" }}
</el-button>
</div>
<div class="no_option" v-else>暂无规格</div>
</div>
......@@ -151,25 +158,26 @@ export default {
cellIndex: { type: Number, default: null },
cellCheck: {
type: Boolean,
default: false
default: false,
},
readOnly: {
type: Boolean,
default: false
default: false,
},
cellIsService: {
type: Boolean
}
type: Boolean,
},
},
watch: {
cellCheck: function(val) {
cellCheck: function (val) {
this.checkedItem = val;
},
cellItem: {
immediate: true, // 这句重要
handler(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.cellItems.service.buy_method == 1) {
this.specificationApplicationBtns = [{ id: 1, value: "按月" }];
......@@ -178,12 +186,12 @@ export default {
} else {
this.specificationApplicationBtns = [
{ id: 1, value: "按月" },
{ id: 2, value: "按年" }
{ id: 2, value: "按年" },
];
}
}
}
}
},
},
},
data: () => ({
cellItems: {},
......@@ -195,12 +203,12 @@ export default {
specificationApplicationPop: 1,
appSpecificationBtns: [
{ id: 1, value: "部署" },
{ id: 2, value: "开发" }
{ id: 2, value: "开发" },
],
specificationApplicationBtns: [
{ id: 1, value: "按月" },
{ id: 2, value: "按年" }
]
{ id: 2, value: "按年" },
],
}),
computed: {
getSpecification() {
......@@ -211,14 +219,20 @@ export default {
this.cellItems.service.request_spcs_info.length != 0
) {
let requestArr = this.cellItems.service.request_spcs_info;
requestArr.forEach(item => {
requestArr.forEach((item) => {
arr.push(item.id);
});
}
let num = arr.indexOf(this.cellItems.spec_id);
let specification = "";
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;
} else {
......@@ -228,7 +242,7 @@ export default {
return "开发";
}
}
}
},
},
mounted() {},
methods: {
......@@ -263,23 +277,23 @@ export default {
changeCellItem() {
this.$emit("changeCellMsg", {
index: this.cellIndex,
data: this.cellItems
data: this.cellItems,
});
},
delCellItem() {
this.$api.serviceShop
.delShoppingCart([this.cellItems.id])
.then(response => {
.then((response) => {
if (response.data.success == 1) {
this.$message({
message: this.cellIsService ? "删除该服务成功" : "删除该应用成功",
type: "success"
type: "success",
});
this.$emit("updateList");
} else {
this.$message({
message: this.cellIsService ? "删除该服务失败" : "删除该应用失败",
type: "error"
type: "error",
});
}
});
......@@ -290,16 +304,16 @@ export default {
duration: this.cellItems.duration,
spec_id: this.cellItems.spec_id,
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) {
} else {
console.log(response.data.errMsg);
}
});
}
}
},
},
};
</script>
......@@ -437,6 +451,14 @@ export default {
}
.shopping_cell_specification_btn {
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 {
background-color: #515fe7;
......
src/components/topology.vue
View file @ 10bdb520
......@@ -5,9 +5,9 @@
<div class="legend_title">拓扑图图例</div>
<div class="legend_inner">
<div class="legend_in_tit">服务类型</div>
<div id="nodes" ref="lengedNodes" class="legend_nodes"></div>
<div id="nodes" ref="legendNodes" class="legend_nodes"></div>
<div class="legend_in_tit">调用状态</div>
<div id="edges" ref="lengedEdges" class="legend_edges"></div>
<div id="edges" ref="legendEdges" class="legend_edges"></div>
</div>
</div>
</div>
......@@ -22,11 +22,18 @@ export default {
default: () => {
return {
nodes: [],
edges: []
edges: [],
};
}
},
},
namespace: String
namespace: String,
},
data: () => {
return {
graph: null,
legendNodes: null,
legendEdges: null,
};
},
mounted() {},
watch: {
......@@ -34,13 +41,13 @@ export default {
this.getCavData();
this.getLegendNodes();
this.getLegendEdges();
}
},
},
methods: {
// shu ju chu li
getCavData() {
let self = this;
self.datas.nodes.map(node => {
self.datas.nodes.map((node) => {
node.id = node.data.id;
switch (node.data.svcType) {
case "数据服务":
......@@ -87,12 +94,12 @@ export default {
fontSize: 12,
stroke: "#fffef9",
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.source = edge.data.source;
edge.target = edge.data.target;
......@@ -107,10 +114,10 @@ export default {
lineAppendWidth: 5,
endArrow: {
path: "M -3,0 L 4,2 L 4,-2 Z", // 自定义箭头路径
d: -2 // 偏移量
d: -2, // 偏移量
},
strokeOpacity: 1,
cursor: "pointer"
cursor: "pointer",
};
if (edge.data.traffic.protocol == "tcp") {
// tcp
......@@ -151,11 +158,12 @@ export default {
self.getCav();
},
getCav() {
if (this.graph) this.graph.destroy();
const width = this.$refs.conCav.scrollWidth;
const height = this.$refs.conCav.scrollHeight || 500;
let self = this;
// console.log(self.datas);
const graph = new G6.Graph({
this.graph = new G6.Graph({
container: "container",
width,
height,
......@@ -165,78 +173,79 @@ export default {
// 流程图布局
type: "dagre",
rankdir: "LR",
nodesep: 12
nodesep: 12,
},
modes: {
default: ["zoom-canvas", "drag-canvas", "drag-node"]
default: ["zoom-canvas", "drag-canvas", "drag-node"],
},
defaultNode: {
color: "#5B8FF9",
style: {
lineWidth: 2,
fill: "#C6E5FF",
cursor: "pointer"
cursor: "pointer",
},
labelCfg: {
style: {
fill: "#f36c21",
fontSize: 10
fontSize: 10,
},
position: "bottom"
}
position: "bottom",
},
},
defaultEdge: {
style: {
stroke: "#e2e2e2",
lineWidth: 1,
lineAppendWidth: 6,
opacity: 1
opacity: 1,
},
labelCfg: {
style: {
fontSize: 10,
stroke: "#fffef9",
fill: "#595959",
lineWidth: 4
}
}
lineWidth: 4,
},
},
},
nodeStateStyles: {
highlight: {
opacity: 1
opacity: 1,
},
dark: {
opacity: 0.2
}
opacity: 0.2,
},
},
edgeStateStyles: {
highlight: {
opacity: 1
opacity: 1,
},
dark: {
opacity: 0.2
opacity: 0.2,
},
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) {});
graph.on("node:dblclick", function(e) {});
this.graph.on("edge:click", function (e) {});
this.graph.on("node:dblclick", function (e) {});
// 点击画布
graph.on("canvas:click", function(e) {});
graph.data(self.datas);
graph.render();
this.graph.on("canvas:click", function (e) {});
this.graph.data(self.datas);
this.graph.render();
},
getLegendNodes() {
if (this.legendNodes) this.legendNodes.destroy();
// legend. maybe you want use parames to reset it, but i did not do the extension
const width = this.$refs.lengedNodes.scrollWidth;
const height = this.$refs.lengedNodes.scrollHeight;
const legendGraph = new G6.Graph({
const width = this.$refs.legendNodes.scrollWidth;
const height = this.$refs.legendNodes.scrollHeight;
this.legendNodes = new G6.Graph({
container: "nodes",
width: width,
height: height,
......@@ -244,16 +253,16 @@ export default {
style: {
fill: "transparent", // 节点填充色
stroke: "transparent", // 节点描边色
lineWidth: 1 // 节点描边粗细
lineWidth: 1, // 节点描边粗细
},
labelCfg: {
position: "right",
offset: 10,
style: {
fill: "#333"
}
}
}
fill: "#333",
},
},
},
});
const legendX = 20;
const legendBeginY = 20;
......@@ -268,7 +277,7 @@ export default {
type: "image",
img: require("@/assets/svg/topology_ic_shujufw.svg"),
size: [15, 15],
label: "数据服务"
label: "数据服务",
},
{
id: "level2",
......@@ -277,7 +286,7 @@ export default {
type: "image",
img: require("@/assets/svg/topology_ic_shikongfw.svg"),
size: [15, 15],
label: "时空服务"
label: "时空服务",
},
{
id: "level3",
......@@ -286,7 +295,7 @@ export default {
type: "image",
img: require("@/assets/svg/topology_ic_shipinfw.svg"),
size: [15, 15],
label: "视频服务"
label: "视频服务",
},
{
id: "level4",
......@@ -295,7 +304,7 @@ export default {
type: "image",
img: require("@/assets/svg/topology_ic_ganzhifw.svg"),
size: [15, 15],
label: "感知服务"
label: "感知服务",
},
{
id: "level5",
......@@ -304,18 +313,19 @@ export default {
type: "image",
img: require("@/assets/svg/topology_ic_zonghefw.svg"),
size: [15, 15],
label: "综合应用"
}
]
label: "综合应用",
},
],
};
legendGraph.data(legendData);
legendGraph.render();
this.legendNodes.data(legendData);
this.legendNodes.render();
},
getLegendEdges() {
if (this.legendEdges) this.legendEdges.destroy();
// legend. maybe you want use parames to reset it, but i did not do the extension
const width = this.$refs.lengedEdges.scrollWidth;
const height = this.$refs.lengedEdges.scrollHeight;
const legendGraph = new G6.Graph({
const width = this.$refs.legendEdges.scrollWidth;
const height = this.$refs.legendEdges.scrollHeight;
this.legendEdges = new G6.Graph({
container: "edges",
width: width,
height: height,
......@@ -323,16 +333,16 @@ export default {
style: {
fill: "transparent", // 节点填充色
stroke: "transparent", // 节点描边色
lineWidth: 1 // 节点描边粗细
lineWidth: 1, // 节点描边粗细
},
labelCfg: {
position: "right",
offset: 10,
style: {
fill: "#333"
}
}
}
fill: "#333",
},
},
},
});
const legendX = 10;
const legendBeginY = 20;
......@@ -345,7 +355,7 @@ export default {
x: legendX,
y: legendBeginY,
type: "circle",
size: 1
size: 1,
},
// line1 point 1
{
......@@ -354,7 +364,7 @@ export default {
y: legendBeginY,
label: "正常",
type: "circle",
size: 1
size: 1,
},
// line2 point 0
{
......@@ -362,7 +372,7 @@ export default {
x: legendX,
y: legendBeginY + legendYPadding,
type: "circle",
size: 1
size: 1,
},
// line2 point 1
{
......@@ -371,8 +381,8 @@ export default {
y: legendBeginY + legendYPadding,
label: "错误",
type: "circle",
size: 1
}
size: 1,
},
],
edges: [
{
......@@ -385,10 +395,10 @@ export default {
lineAppendWidth: 5,
endArrow: {
path: "M -3,0 L 4,2 L 4,-2 Z", // 自定义箭头路径
d: -2 // 偏移量
d: -2, // 偏移量
},
cursor: "pointer"
}
cursor: "pointer",
},
},
{
id: "line1",
......@@ -400,17 +410,17 @@ export default {
lineAppendWidth: 5,
endArrow: {
path: "M -3,0 L 4,2 L 4,-2 Z", // 自定义箭头路径
d: -2 // 偏移量
d: -2, // 偏移量
},
cursor: "pointer"
}
}
]
cursor: "pointer",
},
},
],
};
legendGraph.data(legendData);
legendGraph.render();
}
}
this.legendEdges.data(legendData);
this.legendEdges.render();
},
},
};
</script>
......
src/components/work-flow/super-flow.vue
View file @ 10bdb520
......@@ -2,19 +2,46 @@
<template>
<div>
<div class="super-flow-demo1">
<div class="node-container">
<p class="label_head">节点类型</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>
<span class="node-item" v-for="(item, index) in nodeItemList" :key="index" @mousedown="evt => nodeItemMouseDown(evt, item.value)">{{item.label}}</span>
<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">
<p class="label_head">节点类型</p>
<p class="label_explanation">请拖拽添加到流程中</p>
<div
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">
<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 @click="clickItem(meta)">
{{meta.name}}
</div>
<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>
</template>
</super-flow>
......@@ -26,7 +53,7 @@
<script>
const drawerType = {
node: 0,
link: 1
link: 1,
};
export default {
data() {
......@@ -68,14 +95,14 @@ export default {
} else {
this.$refs.linkSetting.clearValidate();
}
}
},
},
linkSetting: {
desc: ""
desc: "",
},
nodeSetting: {
name: "",
desc: ""
desc: "",
},
dragConf: {
isDown: false,
......@@ -85,73 +112,57 @@ export default {
clientX: 0,
clientY: 0,
ele: null,
info: null
info: null,
},
nodeItemList: [
{
label: "开始",
label: "普通节点",
value: {
width: 120,
height: 40,
height: 48,
meta: {
label: "开始开始开始开始开始",
name: "开始开始开始开始开始",
type: 0
}
}
label: "普通节点",
name: "普通节点",
type: 2,
},
},
},
{
label: "结束",
label: "开始",
value: {
width: 120,
height: 40,
height: 48,
meta: {
label: "结束",
name: "结束",
type: 1
}
}
label: "开始",
name: "开始",
type: 0,
},
},
},
{
label: "普通节点",
label: "结束",
value: {
width: 120,
height: 40,
height: 48,
meta: {
label: "普通节点",
name: "普通节点",
type: 2
}
}
}
label: "结束",
name: "结束",
type: 1,
},
},
},
],
linkMenu: [
[
{
label: "删除",
selected: link => {
selected: (link) => {
console.log(link);
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() {
......@@ -164,12 +175,7 @@ export default {
},
methods: {
linkStyle(link) {
return {
// hover: '#FF00FF'
};
},
linkDesc(link) {
return link.meta ? link.meta.desc : "";
return {};
},
docMousemove({ clientX, clientY }) {
const conf = this.dragConf;
......@@ -191,7 +197,7 @@ export default {
top,
right,
bottom,
left
left,
} = this.$refs.flowContainer.getBoundingClientRect();
// 判断鼠标是否进入 flow container
if (
......@@ -217,7 +223,7 @@ export default {
// 添加节点
this.$refs.superFlow.addNode({
coordinate,
...conf.info
...conf.info,
});
conf.isMove = false;
}
......@@ -239,7 +245,7 @@ export default {
clientY: clientY,
info,
ele,
isDown: true
isDown: true,
});
ele.style.position = "fixed";
ele.style.margin = "0";
......@@ -253,12 +259,12 @@ export default {
getData() {
return this.$refs.superFlow.toJSON();
},
handleChange() {}
}
handleChange() {},
},
};
</script>
<style lang="less">
<style lang="less" scoped>
.link-base-style-form {
.el-form-item {
margin-bottom: 12px;
......@@ -269,117 +275,145 @@ export default {
.super-flow-demo1 {
margin-top: 20px;
width: 100%;
height: 800px;
background-color: #f5f5f5;
@list-width: 200px;
height: 100%;
background-color: #fff;
@list-width: 160px;
position: relative;
> .node-container {
width: @list-width;
position: absolute;
z-index: 2;
left: 0;
height: 400px;
> .flow-container {
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;
left: 0;
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;
background-color: #ffffff;
background-color: #f8f9fd;
border-radius: 8px;
margin-top: 20px;
.label_head {
font-weight: bold;
font-size: 18px;
font-size: 14px;
text-align: center;
padding: 20px 0;
padding: 20px 0 15px;
color: #242c43;
}
.label_explanation {
font-size: 16px;
font-size: 14px;
text-align: center;
padding-bottom: 5px;
color: #8890a7;
}
}
> .flow-container {
width: 100%;
float: left;
height: 100%;
overflow: hidden;
}
}
</style>
<style lang="less">
.super-flow {
.super-flow__node {
box-shadow: none;
border: none;
background-color: transparent;
border-radius: 8px;
font-size: 16px;
&:focus {
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.8);
background-color: #515fe7;
color: #fff;
}
.flow-node-begin {
width: 100%;
height: 100%;
line-height: 36px;
padding: 0 6px;
font-size: 12px;
/deep/ .node_span {
text-align: center;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.flow-node-begin {
width: 100%;
height: 100%;
line-height: 42px;
padding: 0 6px;
border-radius: 8px;
border: 2px solid #444;
border: solid 3px #109e93;
background-color: #25bdb1;
color: #ffffff;
}
.flow-node-end {
width: 100%;
line-height: 36px;
height: 100%;
line-height: 42px;
padding: 0 6px;
font-size: 12px;
text-align: center;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
border-radius: 8px;
border: 2px solid #f80;
background-color: #f78181;
border: solid 3px #e86262;
color: #ffffff;
}
.flow-node-default {
width: 100%;
line-height: 36px;
height: 100%;
line-height: 42px;
padding: 0 6px;
font-size: 12px;
text-align: center;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
border-radius: 8px;
border: 2px solid #3a9;
border: solid 3px #b4c6f5;
}
}
}
.node-item {
@node-item-height: 30px;
font-size: 14px;
display: inline-block;
height: @node-item-height;
.super-flow__menu-container .super-flow__menu {
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>
\ No newline at end of file
src/pages/workbench/component-center/process-management/process-design/index.vue
View file @ 10bdb520
<template>
<div class="design_contain">
<el-button @click="getData">获取参数</el-button>
<WorkFlow ref="workFlow" />
<el-breadcrumb separator="/" class="bread_crumb1">
<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>
</template>
<script>
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 {
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: {
getData() {
verification() {
let self = this;
let data = self.$refs.workFlow.getData();
console.log(data);
......@@ -23,7 +135,7 @@ export default {
let end_id = "";
let start_before = 0;
let end_after = 0;
data.nodeList.forEach(item => {
data.nodeList.forEach((item) => {
if (item.meta.type == 0) {
start_num++;
start_id = item.id;
......@@ -33,40 +145,97 @@ export default {
end_id = item.id;
}
});
data.linkList.forEach(item => {
data.linkList.forEach((item) => {
if (start_id == item.endId) {
start_before++;
}
if (end_id == item.startId) {
end_after++;
}
});
if (start_num != 1 || end_num != 1) {
this.$message({
message: "开始节点与结束节点均应有且只有一个",
type: "warning"
type: "warning",
});
} else if (start_before != 0) {
this.$message({
message: "开始节点前面不应连接其它节点",
type: "warning"
type: "warning",
});
} else if (end_after != 0) {
this.$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>
<style scoped>
.design_contain {
width: 100%;
height: calc(100% - 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>
src/pages/workbench/fwzc_fwcs.vue
View file @ 10bdb520
......@@ -355,10 +355,7 @@
</block-radius>
</div>
<div style="display: none">
<iframe
id="listener"
:src="addPortalItemUrl"
></iframe>
<iframe id="listener" :src="addPortalItemUrl"></iframe>
</div>
<apass-dialog
ref="alertChange"
......@@ -388,7 +385,8 @@ export default {
},
data() {
return {
addPortalItemUrl: gisServiceUrl + '/portal/apaasplat/viewer/addPortalItem.html',
addPortalItemUrl:
gisServiceUrl + "/portal/apaasplat/viewer/addPortalItem.html",
btnList: [],
activeBtn: null,
serviceUrl: "",
......@@ -552,6 +550,7 @@ export default {
},
is_portal: false,
portal_id: "",
dataType: "",
};
},
computed: {},
......@@ -687,12 +686,14 @@ export default {
this.$api.workbench.fwzcFwcs(query).then((response) => {
if (response.data.success == 1) {
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) {
this.datasQqcs = data.body_fields;
this.param_fields = data.param_fields;
this.dataType = "body";
} else {
this.datasQqcs = data.param_fields;
this.body_fields = [];
this.dataType = "param";
}
this.datasFhcs = data.response_fields;
this.resSuccess = true;
......@@ -886,9 +887,13 @@ export default {
method: this.select,
url: this.serviceUrl,
request_fields:
this.body_fields.length == 0 ? [] : this.request_fields,
this.dataType == "body"
? this.request_fields
: this.body_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,
content_type: contentType,
portal_id: this.portal_id,
......
src/pages/workbench/workPlace.vue
View file @ 10bdb520
......@@ -998,7 +998,7 @@ export default {
pic: require("@/assets/imgs/home_tool_ic_kshbb.png"),
bg: "#fff2e2",
color: "#ea7d19",
url: "/bi",
url: "/bi/",
target: 1
},
{
......
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