From ad63ed678d792acde086868b4af81a0c68c161fd Mon Sep 17 00:00:00 2001 From: liudianxin Date: Mon, 10 Aug 2020 19:05:22 +0800 Subject: [PATCH] =?UTF-8?q?=E6=8B=93=E6=89=91=E5=9B=BE=E6=B8=B2=E6=9F=93?= =?UTF-8?q?=EF=BC=8C=E6=B5=81=E7=A8=8B=E8=AE=BE=E8=AE=A1=E9=83=A8=E5=88=86?= =?UTF-8?q?=EF=BC=8C=E8=B4=AD=E7=89=A9=E8=BD=A6=E9=97=AE=E9=A2=98=EF=BC=8C?= =?UTF-8?q?=E6=9C=8D=E5=8A=A1=E6=B3=A8=E5=86=8C=E5=8F=82=E6=95=B0=EF=BC=8C?= =?UTF-8?q?bi=EF=BC=8C=E8=AE=A2=E5=8D=95=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/i18n/language-zh.js | 6 + .../app-build-steps/app-build-step.vue | 4 + .../app-build-steps/app-build-steps.vue | 7 +- src/components/order-list/order-list-com.vue | 24 +- .../shopping-cart/shopping-cart-cell.vue | 72 ++-- src/components/topology.vue | 168 ++++----- src/components/work-flow/super-flow.vue | 324 ++++++++++-------- .../process-design/index.vue | 195 ++++++++++- src/pages/workbench/fwzc_fwcs.vue | 23 +- src/pages/workbench/workPlace.vue | 2 +- 10 files changed, 547 insertions(+), 278 deletions(-) diff --git a/src/assets/i18n/language-zh.js b/src/assets/i18n/language-zh.js index f368162..025e3ee 100644 --- a/src/assets/i18n/language-zh.js +++ b/src/assets/i18n/language-zh.js @@ -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 diff --git a/src/components/app-build-steps/app-build-step.vue b/src/components/app-build-steps/app-build-step.vue index 5142294..b7cf248 100644 --- a/src/components/app-build-steps/app-build-step.vue +++ b/src/components/app-build-steps/app-build-step.vue @@ -20,6 +20,10 @@ export default { type: String, default: () => "", }, + stepTitle: { + type: String, + default: "", + }, }, data: () => ({}), computed: { diff --git a/src/components/app-build-steps/app-build-steps.vue b/src/components/app-build-steps/app-build-steps.vue index 3568024..3c7340c 100644 --- a/src/components/app-build-steps/app-build-steps.vue +++ b/src/components/app-build-steps/app-build-steps.vue @@ -25,7 +25,12 @@
-

+

+ + {{ item.stepTitle }} + +

+

已完成 diff --git a/src/components/order-list/order-list-com.vue b/src/components/order-list/order-list-com.vue index 61ad6d9..ed7c91c 100644 --- a/src/components/order-list/order-list-com.vue +++ b/src/components/order-list/order-list-com.vue @@ -10,14 +10,12 @@

- {{ item.name }} + >{{ item.name }}
@@ -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 }} + > + {{ index + 1 + ". " + "访问次数：" + + item.pv + + "/日，" + + "访问量：" + + item.count + + "/日" }} +
暂无规格
@@ -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); } }); - } - } + }, + }, }; @@ -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; diff --git a/src/components/topology.vue b/src/components/topology.vue index 73169ff..25ff6b2 100644 --- a/src/components/topology.vue +++ b/src/components/topology.vue @@ -5,9 +5,9 @@
拓扑图图例
服务类型
-
+
调用状态
-
+
@@ -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(); + }, + }, }; diff --git a/src/components/work-flow/super-flow.vue b/src/components/work-flow/super-flow.vue index ee1010f..b14f0b3 100644 --- a/src/components/work-flow/super-flow.vue +++ b/src/components/work-flow/super-flow.vue @@ -2,19 +2,46 @@