From ccee429d379e0108b7445f72ade8d97c110a6fb3 Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期二, 09 十一月 2021 18:01:59 +0800
Subject: [PATCH] 问题修复
---
src/pages/systemSettings/components/CloudNode.vue | 149 +++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 149 insertions(+), 0 deletions(-)
diff --git a/src/pages/systemSettings/components/CloudNode.vue b/src/pages/systemSettings/components/CloudNode.vue
new file mode 100644
index 0000000..800651a
--- /dev/null
+++ b/src/pages/systemSettings/components/CloudNode.vue
@@ -0,0 +1,149 @@
+<template>
+ <div class="cloud">
+ <div class="inner">
+ <div class="rect">
+ <serfDiagram
+ ref="inside-nodes"
+ :members="insideNodes"
+ :agent="agentName"
+ :sizeX="insideSizeX"
+ :sizeY="insideSizeY"
+ :startX="insideStartX"
+ :isShowHover="true"
+ class="inside-nodes"
+ ></serfDiagram>
+ </div>
+ </div>
+ <div class="outer" v-if="outsideNodes.length">
+ <serfDiagram
+ ref="outer-nodes"
+ :members="outsideNodes"
+ :agent="agentName"
+ :sizeX="280"
+ :sizeY="370"
+ :startX="60"
+ class="outer-nodes"
+ ></serfDiagram>
+ </div>
+ </div>
+</template>
+<script>
+import SerfDiagram from "@/components/serfDiagram";
+export default {
+ name: "cloudNode",
+ props: {
+ nodes: Array,
+ },
+ components: {
+ SerfDiagram,
+ },
+ data() {
+ return {
+ agentName: "",
+ nodeIcons: [],
+ //insideNodes: [],
+ BaseWidth: 150,
+ BaseHeight: 70,
+ minWidth: 0,
+ minHeight: 0,
+ };
+ },
+ mounted() {
+ console.log(this.nodes);
+ //this.getInsideNodes();
+ },
+ methods: {
+ getRandom(index) {
+ if (index % 2 == 0) {
+ return Math.random() * 20;
+ } else {
+ return Math.random() * 50;
+ }
+ },
+ getInsideNodes() {
+ let arr = this.nodes.filter(
+ (item) => item.hardwareType == "01" || item.hardwareType == "02"
+ );
+ let len = arr.length;
+ let lefts = [];
+ let tops = [];
+ this.insideNodes = arr.map((item, index) => {
+ lefts.push((20 - len) * (index + 1) + this.getRandom(index));
+ tops.push(30 * (index + 1));
+ return {
+ l: 10 + this.getRandom(index),
+ t: 30 * (index + 1),
+ nodeName: item.nodeName,
+ id: item.id,
+ workType: item.workType,
+ };
+ });
+ this.minWidth = Math.max(...lefts) - Math.min(...lefts);
+ this.minHeight = Math.max(...tops) - Math.min(...tops);
+ console.log("w,h", this.minWidth, this.minHeight);
+ },
+ },
+ computed: {
+ cloudPic() {
+ return "/images/settings/cloud.png";
+ },
+ insideNodes() {
+ return this.nodes.filter(
+ (item) => item.hardwareType == "01" || item.hardwareType == "02"
+ );
+ },
+ insideSizeX() {
+ return 160 + 200 * 0.2 * this.insideNodes.length <= 400
+ ? 160 + 200 * 0.2 * this.insideNodes.length
+ : 400;
+ },
+ insideSizeY() {
+ return 140 + 200 * 0.2 * this.insideNodes.length <= 380
+ ? 140 + 200 * 0.2 * this.insideNodes.length
+ : 380;
+ },
+ insideStartX() {
+ return this.insideSizeX / 3;
+ },
+ outsideNodes() {
+ return this.nodes.filter((item) => item.hardwareType == "03");
+ },
+ },
+};
+</script>
+<style lang="scss">
+.cloud {
+ width: 100%;
+ display: flex;
+ .inner {
+ background: url("/images/settings/easy-cloud.png") no-repeat;
+ background-size: 100%;
+ margin-top: -55px;
+ margin-left: 55px;
+
+ .rect {
+ position: relative;
+ margin: 130px 100px 70px;
+ .node {
+ position: absolute;
+ .node-icon {
+ width: 40px;
+ height: 40px;
+ }
+ .node-name {
+ font-size: 14px;
+ color: #333;
+ }
+ }
+ }
+ }
+ .outer {
+ width: 40%;
+ position: relative;
+ text-align: left;
+ .node {
+ position: absolute;
+ }
+ }
+}
+</style>
\ No newline at end of file
--
Gitblit v1.8.0