Skip to content

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

拓扑图渲染，流程设计部分，购物车问题，服务注册参数，bi，订单样式

parent 37430b29
Hide whitespace changes
Inline Side-by-side
Showing with 547 additions and 278 deletions
src/assets/i18n/language-zh.js
View file @ ad63ed67
...@@ -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 @ ad63ed67
...@@ -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 @ ad63ed67
...@@ -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 @ ad63ed67
...@@ -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-button> >{{ item.name }}</span>
</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 @ ad63ed67
...@@ -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="280" width="300"
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 @ ad63ed67
...@@ -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="lengedNodes" class="legend_nodes"></div> <div id="nodes" ref="legendNodes" class="legend_nodes"></div>
<div class="legend_in_tit">调用状态</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> </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.lengedNodes.scrollWidth; const width = this.$refs.legendNodes.scrollWidth;
const height = this.$refs.lengedNodes.scrollHeight; const height = this.$refs.legendNodes.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.lengedEdges.scrollWidth; const width = this.$refs.legendEdges.scrollWidth;
const height = this.$refs.lengedEdges.scrollHeight; const height = this.$refs.legendEdges.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 @ ad63ed67
...@@ -2,19 +2,46 @@ ...@@ -2,19 +2,46 @@
<template> <template>
<div> <div>
<div class="super-flow-demo1"> <div class="super-flow-demo1">
<div class="node-container"> <div class="scale_block">
<p class="label_head">节点类型</p> <div class="scale_control">
<p class="label_explanation">请拖拽添加到流程中</p> <div class="less">
<el-input-number v-model="scale_num" @change="handleChange" :step="10" :step-strictly="true" :min="50" :max="150" label="描述文字"></el-input-number> <i class="el-icon-minus"></i>
<span class="node-item" v-for="(item, index) in nodeItemList" :key="index" @mousedown="evt => nodeItemMouseDown(evt, item.value)">{{item.label}}</span> </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>
<div class="flow-container" :class="`scale${scale_num}`" ref="flowContainer"> <div class="flow-container" 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"> <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}"> <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
<div @click="clickItem(meta)"> :class="{'flow-node-begin': meta.type == 0, 'flow-node-end': meta.type == 1, 'flow-node-default': meta.type == 2}"
{{meta.name}} :id="meta.id"
</div> >
<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: 40, height: 48,
meta: { meta: {
label: "开始开始开始开始开始", label: "普通节点",
name: "开始开始开始开始开始", name: "普通节点",
type: 0 type: 2,
} },
} },
}, },
{ {
label: "结束", label: "开始",
value: { value: {
width: 120, width: 120,
height: 40, height: 48,
meta: { meta: {
label: "结束", label: "开始",
name: "结束", name: "开始",
type: 1 type: 0,
} },
} },
}, },
{ {
label: "普通节点", label: "结束",
value: { value: {
width: 120, width: 120,
height: 40, height: 48,
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: #f5f5f5; background-color: #fff;
@list-width: 200px; @list-width: 160px;
position: relative; position: relative;
> .node-container { > .flow-container {
width: @list-width; width: 100%;
position: absolute; float: left;
z-index: 2; height: 100%;
left: 0; overflow: hidden;
height: 400px; }
}
.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; 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: 18px; font-size: 14px;
text-align: center; text-align: center;
padding: 20px 0; padding: 20px 0 15px;
color: #242c43;
} }
.label_explanation { .label_explanation {
font-size: 16px; font-size: 14px;
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 @ ad63ed67
<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 @ ad63ed67
...@@ -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 @ ad63ed67
...@@ -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
}, },
{ {
......
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