From 4ff29e301de38488db0ff04f0209c99e37cf30b4 Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期二, 07 十二月 2021 18:56:34 +0800
Subject: [PATCH] 对比库管理
---
src/pages/settings/components/CloudNode.vue | 217 +++++++++++++++++++++++++++++++-----------------------
1 files changed, 125 insertions(+), 92 deletions(-)
diff --git a/src/pages/settings/components/CloudNode.vue b/src/pages/settings/components/CloudNode.vue
index 74a8f55..3919710 100644
--- a/src/pages/settings/components/CloudNode.vue
+++ b/src/pages/settings/components/CloudNode.vue
@@ -2,114 +2,147 @@
<div class="cloud">
<div class="inner">
<div class="rect">
- <div class="node" v-for="(item,index) in insideNodes" :key="item.id" :style="{top:36*(index+1)+'px',left:60*(index+1)+'px'}">
- <span class="node-icon">
- <!-- <img :src="nodeIcons[item.workType]" alt=""> -->
- </span>
- <span class="node-name">{{item.nodeName}}</span>
- </div>
+ <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">
- <div class="node" v-for="(item,index) in insideNodes" :key="item.id" :style="{top:36*(index+1)+'px',left:80*(index+1)+'px'}">
- <span class="node-icon">
- <!-- <img :src="nodeIcons[item.workType]" alt=""> -->
- </span>
- <span class="node-name">{{item.nodeName}}</span>
- </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
+ name: "cloudNode",
+ props: {
+ nodes: Array,
},
- data(){
+ components: {
+ SerfDiagram,
+ },
+ data() {
return {
- nodeIcons:[],
- mockData:[
- {
- cluster_id: "b6132bfe-d3af-4710-ba89-436f614c2f46",
- hardwareType: "01",
- id: "DSVAD010120190622",
- node_id: "DSVAD010120190622",
- node_ip: "192.168.20.10:30190",
- nodeName: "寮�鍙�20.10-1",
- role: 'pc'
- },
- {
- cluster_id: "b6132bfe-d3af-4710-ba89-436f614c2f",
- hardwareType: "02",
- id: "DSVAD010120190623",
- node_id: "DSVAD010120190623",
- node_ip: "192.168.20.10:30190",
- nodeName: "寮�鍙戞祴璇�20.10-1",
- role:'master'
- },
- {
- cluster_id: "b6132bfe-d3af-4710-ba89-436f614c2g",
- hardwareType: "03",
- id: "DSVAD010120190624",
- node_id: "DSVAD010120190624",
- node_ip: "192.168.20.10:30190",
- nodeName: "娴嬭瘯20.10-1",
- role:'pc'
- },
- {
- cluster_id: "b6132bfe-d3af-4710-ba89-436f614c2h",
- hardwareType: "03",
- id: "DSVAD010120190625",
- node_id: "DSVAD010120190625",
- node_ip: "192.168.20.10:30190",
- nodeName: "娴嬭瘯20.101-1",
- role:'server'
- },
- ]
- }
+ agentName: "",
+ nodeIcons: [],
+ //insideNodes: [],
+ BaseWidth: 150,
+ BaseHeight: 70,
+ minWidth: 0,
+ minHeight: 0,
+ };
},
- computed:{
-
- insideNodes(){
- //return this.nodes.filter(item=>item.hardwareType=='01'||item.hardwareType=='02');
- return this.mockData.filter(item=>item.hardwareType=='01'||item.hardwareType=='02');
+ mounted() {
+ console.log(this.nodes);
+ //this.getInsideNodes();
+ },
+ methods: {
+ getRandom(index) {
+ if (index % 2 == 0) {
+ return Math.random() * 20;
+ } else {
+ return Math.random() * 50;
+ }
},
- outsideNodes(){
- //return this.nodes.filter(item=>item.hardwareType=='03');
- return this.mockData.filter(item=>item.hardwareType=='03');
- }
- }
-}
+ 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);
+ },
+ },
+ 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%;
- height: 500px;
- display: flex;
- .inner{
- width: 50%;
- background: url('/images/settings/cloud.png') no-repeat;
- background-size: 100%;
- .rect{
- background:cornflowerblue;
- position: relative;
- .node{
- position: absolute;
- .node-icon{
- width:40px;
- height:40px;
- }
- .node-name{
- font-size:14px;
- color: #333;
- }
+.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:50%;
- position: relative;
+ }
+ .outer {
+ width: 40%;
+ position: relative;
+ text-align: left;
+ .node {
+ position: absolute;
}
}
+}
</style>
\ No newline at end of file
--
Gitblit v1.8.0