From f7ac77c7cc193502aff7e2a70f636253ada12386 Mon Sep 17 00:00:00 2001
From: 陶杰 <1378534974@qq.com>
Date: 星期二, 19 十一月 2024 10:14:52 +0800
Subject: [PATCH] 1.区域页面
---
src/views/area/switch-board.vue | 81 ++++++++++++++++++++++++++--------------
1 files changed, 52 insertions(+), 29 deletions(-)
diff --git a/src/views/area/switch-board.vue b/src/views/area/switch-board.vue
index eca53aa..8f72c19 100644
--- a/src/views/area/switch-board.vue
+++ b/src/views/area/switch-board.vue
@@ -1,11 +1,14 @@
<template>
<div>
- <dv-full-screen-container>
+ <!-- <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',
- height: screen_height + 'rem',
+ // height: screen_height + 'rem',
// width:'100%',
// height:'calc(100vh - 10rem)'
}">
@@ -13,13 +16,13 @@
@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="{
transform: `scale(${scale_container})`,
width: screen_width + 'rem',
- height: screen_height + 'rem',
+ // height: screen_height + 'rem',
// container_offset_x:''
// container_offset_x:''
@@ -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>
@@ -65,11 +68,12 @@
<div class="back-button-left-bottom" @click="backToTop">返回</div>
</div>
- </dv-full-screen-container>
+ <!-- </dv-full-screen-container>oo -->
</div>
</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,
@@ -162,23 +168,39 @@
this.chartclose = true;
console.log("main-container1,mounted");
- const content = document.getElementById("content");
- content.addEventListener("wheel", this.handleWheel);
+ // const content = document.getElementById("content");
+ // content.addEventListener("wheel", this.handleWheel);
-
+ document.addEventListener("DOMContentLoaded", () => {
+ const content = document.getElementById("content");
+ content.addEventListener("wheel", this.handleWheel);
+ });
+
},
destroyed() {
- const content = document.getElementById("content");
- content.removeEventListener("wheel", this.handleWheel);
+ document.addEventListener("DOMContentLoaded", () => {
+ const content = document.getElementById("content");
+ content.removeEventListener("wheel", this.handleWheel);
+ });
+
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;
@@ -374,7 +396,7 @@
cursor: pointer;
max-width: 100%;
min-height: 100vh;
- overflow: auto;
+ // overflow: auto;
.equipment-item {
cursor: pointer;
@@ -401,7 +423,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 +439,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 +452,9 @@
padding-top: 0.5rem;
.title {
- font-weight: 600;
- margin-bottom: 0.8rem;
+ font-weight: 700;
+ // margin-bottom: 0.8rem;
+ margin-bottom: 0.2rem;
/* */
}
@@ -757,8 +780,8 @@
color: #ffffff;
line-height: 3.9rem;
position: fixed;
- left: 3rem;
- // bottom: 3.5rem;
+ left: 1rem;
+ bottom: 2rem;
cursor: pointer;
z-index: 99;
}
--
Gitblit v1.9.3