From 3fc7f383b437b6c579b625f83639c864b33b97fa Mon Sep 17 00:00:00 2001
From: cloudroam <cloudroam>
Date: 星期五, 15 十一月 2024 14:35:33 +0800
Subject: [PATCH] add:1版本
---
src/views/area/switch-board.vue | 50 +++++++++++++++++++++++++++++++++-----------------
1 files changed, 33 insertions(+), 17 deletions(-)
diff --git a/src/views/area/switch-board.vue b/src/views/area/switch-board.vue
index eca53aa..0ab22da 100644
--- a/src/views/area/switch-board.vue
+++ b/src/views/area/switch-board.vue
@@ -2,6 +2,9 @@
<div>
<dv-full-screen-container>
<self-header title="ITM Device Monitoring System"></self-header>
+
+ <server-info v-if="!hideServe" :serve_info="serve_info" :serve_select="serve_select" :code="code"></server-info>
+
<div class="main-container" :style="{
zoom: zoom_main,
width: screen_width + 'rem',
@@ -13,7 +16,7 @@
@mouseup="handleMouseUp"
@mousedown="handleMouseDown"
@mouseleave="handleMouseLeave" -->
- <div id="content" class="equipments-container area-map" :class="['area-map-' + code]" v-show="hideServe"
+ <div id="content" class="equipments-container area-map" v-show="hideServe"
@mousemove="handleMouseMove" @mouseup="handleMouseUp" @mousedown="handleMouseDown"
@mouseleave="handleMouseLeave"
:style="{
@@ -28,15 +31,15 @@
}">
- <div class="serve-item" @click="showCabinetName">
+ <div class="serve-item" >
<div class="serve-img"
v-for="(serverInfo, serverItemindex) in switchCabinets.switchCabinet" :key="serverItemindex"
>
- <div class="cabinetNameDesc">{{ serverInfo.cabinetName }} </div>
+ <div class="cabinetNameDesc" @click="showCabinetName(serverInfo)">{{ serverInfo.cabinetName }} </div>
<div class="each-item-container">
- <div v-for="(serve, itemindex) in serverInfo.cabinetInfoStatic" @click="showServeInfo(serve)" :key="itemindex"
+ <div v-for="(serve, itemindex) in serverInfo.cabinetInfoStatic" :key="itemindex"
class="each-item"
-
+ @click="showCabinetServerInfo(serverInfo,serve)"
>
<div class="desc">
<div class="title">{{ serve.cabinetName }}</div>
@@ -70,6 +73,7 @@
</template>
<script>
import selfHeader from "@/components/header";
+import serverInfo from "./server-info";
import {
getSwitchCabinetInfo,
@@ -79,11 +83,9 @@
export default {
- components: { selfHeader, },
+ components: { selfHeader,serverInfo, },
props: {
- item_show: false,
- code: "",
- query_networkPort: '',
+
},
//根据
//后端存储的是世界坐标，初次时候也是世界坐标，最小单位为0.01吧，这个间距或者大小，不考虑实际像素
@@ -95,6 +97,10 @@
//如果显示服务器的话
hideServe: true,
+ serve_info:{},
+ serve_select:{},
+ activateSwitchPorts: {},
+ code:"",
html_base: 10,
zoom_main: 0.8,
@@ -173,12 +179,21 @@
this.stopScrolling();
},
methods: {
- showCabinetName(){
- alert(111)
+ showCabinetName(serverInfo){
+ this.serve_info=serverInfo
+ this.serve_select={}
+ this.hideServe=!this.hideServe
},
- toSwitchInfo(info) {
- this.showServe(info);
+
+ showCabinetServerInfo(serverInfo,serve_select){
+ this.serve_info=serverInfo
+ this.serve_select={
+ switchName:serve_select.cabinetName
+ }
+ this.hideServe=!this.hideServe
},
+
+
backToTop() {
if (!this.hideServe) {
this.hideServe = !this.hideServe;
@@ -401,7 +416,7 @@
background-image: url("../../assets/equipment/serve.svg");
background-image: url("../../assets/equipment/serve_v2.png");
background-size: 100% 100%;
- width: 15rem;
+ width: 20rem;
// height: 35.3rem;
.cabinetNameDesc{
@@ -417,7 +432,7 @@
.each-item {
background-image: url("../../assets/equipment/serve_item.png");
- width: 10.3rem;
+ width: 14.3rem;
height: 3.7rem;
background-size: 100% 100%;
margin-bottom: 0.9rem;
@@ -430,8 +445,9 @@
padding-top: 0.5rem;
.title {
- font-weight: 600;
- margin-bottom: 0.8rem;
+ font-weight: 700;
+ // margin-bottom: 0.8rem;
+ margin-bottom: 0.2rem;
/* */
}
--
Gitblit v1.9.3