From 856c3d2047705fd4e08d029c39f2f39816c95177 Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期三, 21 七月 2021 18:09:01 +0800
Subject: [PATCH] video max len
---
src/pages/settings/components/CloudNode.vue | 226 +++++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 182 insertions(+), 44 deletions(-)
diff --git a/src/pages/settings/components/CloudNode.vue b/src/pages/settings/components/CloudNode.vue
index 800651a..e99063f 100644
--- a/src/pages/settings/components/CloudNode.vue
+++ b/src/pages/settings/components/CloudNode.vue
@@ -1,7 +1,21 @@
<template>
<div class="cloud">
<div class="inner">
+ <!-- <div
+ class="rect"
+ :style="{width:`${minWidth+BaseWidth}px`,height:`${minHeight+BaseHeight}px`}"
+ >-->
<div class="rect">
+ <!-- <div
+ class="node"
+ v-for="item in insideNodes"
+ :key="item.id"
+ :style="{top:item.t+'px',left:item.l+'px'}"
+ >
+ <span class="node-icon">
+ </span>
+ <span class="node-name">{{item.nodeName}}</span>
+ </div>-->
<serfDiagram
ref="inside-nodes"
:members="insideNodes"
@@ -24,46 +38,156 @@
:startX="60"
class="outer-nodes"
></serfDiagram>
+ <!-- <div
+ class="node"
+ v-for="(item,index) in outsideNodes"
+ :key="item.id"
+ :style="{top:36*(index+1)+'px',left:60*(index+1)+'px'}"
+ >
+ <span class="node-icon"></span>
+ <span class="node-name">{{item.nodeName}}</span>
+ </div>-->
</div>
</div>
</template>
<script>
import SerfDiagram from "@/components/serfDiagram";
export default {
- name: "cloudNode",
+ name: 'cloudNode',
props: {
- nodes: Array,
+ nodes: Array
},
components: {
- SerfDiagram,
+ SerfDiagram
},
- data() {
+ data () {
return {
- agentName: "",
+ agentName: '',
nodeIcons: [],
//insideNodes: [],
BaseWidth: 150,
BaseHeight: 70,
minWidth: 0,
minHeight: 0,
- };
+ 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.11-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.13-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'
+ },
+ {
+ cluster_id: "b6132bfe-d3af-4710-ba89-436f614cf",
+ hardwareType: "02",
+ id: "DSVAD01012019063",
+ node_id: "DSVAD01012019063",
+ node_ip: "192.168.20.10:30190",
+ nodeName: "寮�鍙戞祴璇�20.15-1",
+ role: 'master'
+ },
+ {
+ cluster_id: "b6132bfe-d3af-710-ba89-436f614cf",
+ hardwareType: "02",
+ id: "DSVAD0101201906",
+ node_id: "DSVAD0101209063",
+ node_ip: "192.168.20.10:30190",
+ nodeName: "k20.15-128437586",
+ role: 'master'
+ },
+ {
+ cluster_id: "b612bfe-d3af-710-ba89-436f614cf",
+ hardwareType: "02",
+ id: "DSVAD010120906",
+ node_id: "DSVAD010120963",
+ node_ip: "192.168.20.107:30190",
+ nodeName: "kfl20.15-127586",
+ role: 'master'
+ },
+ {
+ cluster_id: "b6132bfe-d3af-710-ba89-436f614cf",
+ hardwareType: "02",
+ id: "DSVAD0101201906",
+ node_id: "DSVAD001209063",
+ node_ip: "192.168.20.10:30190",
+ nodeName: "k20.15-128437586",
+ role: 'master'
+ },
+ {
+ cluster_id: "b612bfe-d3af-710-ba89-436f614cf",
+ hardwareType: "02",
+ id: "DSVAD01010906",
+ node_id: "DSVAD012063",
+ node_ip: "192.168.20.107:30190",
+ nodeName: "kfl20.15-127586",
+ role: 'master'
+ },
+ {
+ cluster_id: "b6132bfe-d3af-710-ba89-436f614cf",
+ hardwareType: "02",
+ id: "DSVAD0101201906",
+ node_id: "DSVAD0012063",
+ node_ip: "192.168.20.10:30190",
+ nodeName: "k20.15-128437586",
+ role: 'master'
+ },
+ {
+ cluster_id: "b612bfe-d3af-710-ba89-436f614cf",
+ hardwareType: "02",
+ id: "DSVAD01010906",
+ node_id: "DSVAD01012063",
+ node_ip: "192.168.20.107:30190",
+ nodeName: "kfl20.15-127586",
+ role: 'master'
+ },
+ ]
+ }
},
- mounted() {
- console.log(this.nodes);
+ mounted () {
+ console.log(this.nodes)
//this.getInsideNodes();
},
methods: {
- getRandom(index) {
+ getRandom (index) {
if (index % 2 == 0) {
- return Math.random() * 20;
+ return Math.random() * 20
} else {
- return Math.random() * 50;
+ return Math.random() * 50
}
},
- getInsideNodes() {
- let arr = this.nodes.filter(
- (item) => item.hardwareType == "01" || item.hardwareType == "02"
- );
+ getInsideNodes () {
+ //return this.nodes.filter(item=>item.hardwareType=='01'||item.hardwareType=='02');
+ //return this.mockData.filter(item => item.hardwareType == '01' || item.hardwareType == '02');
+ let arr = this.nodes.filter(item => item.hardwareType == '01' || item.hardwareType == '02');
let len = arr.length;
let lefts = [];
let tops = [];
@@ -75,55 +199,69 @@
t: 30 * (index + 1),
nodeName: item.nodeName,
id: item.id,
- workType: item.workType,
- };
+ 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);
+ console.log('w,h', this.minWidth, this.minHeight);
},
},
computed: {
- cloudPic() {
- return "/images/settings/cloud.png";
+ cloudPic () {
+ return '/images/settings/cloud.png'
},
- insideNodes() {
- return this.nodes.filter(
- (item) => item.hardwareType == "01" || item.hardwareType == "02"
- );
+ 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;
+ 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;
+ insideSizeY () {
+ return 140 + 200 * 0.2 * (this.insideNodes.length) <= 380 ? 140 + 200 * 0.2 * (this.insideNodes.length) : 380;
},
- insideStartX() {
- return this.insideSizeX / 3;
+ insideStartX () {
+ return this.insideSizeX / 3
},
- outsideNodes() {
- return this.nodes.filter((item) => item.hardwareType == "03");
- },
- },
-};
+ // insideNodes () {
+ // //return this.nodes.filter(item=>item.hardwareType=='01'||item.hardwareType=='02');
+ // //return this.mockData.filter(item => item.hardwareType == '01' || item.hardwareType == '02');
+ // let arr = this.mockData.filter(item => item.hardwareType == '01' || item.hardwareType == '02');
+ // let len = arr.length;
+ // let lefts = [];
+ // let tops = [];
+ // let temp = arr.map((item,index)=>{
+ // lefts.push((20-len)*(index+1));
+ // tops.push(30*(index+1));
+ // return {
+ // l: (20-len)*(index+1),
+ // t: 30*(index+1),
+ // nodeName: item.nodeName,
+ // id: item.id,
+ // workType: item.workType
+ // }
+ // });
+ // return temp;
+ // },
+ outsideNodes () {
+ return this.nodes.filter(item=>item.hardwareType=='03');
+ //return this.mockData.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: url('/images/settings/easy-cloud.png') no-repeat;
background-size: 100%;
- margin-top: -55px;
- margin-left: 55px;
-
+ margin-top: -80px;
.rect {
+ //background: rgba(176, 203, 253, 0.3);
position: relative;
- margin: 130px 100px 70px;
+ margin: 130px 100px 100px;
.node {
position: absolute;
.node-icon {
--
Gitblit v1.8.0