cloudroam
2024-11-29 2b98925a0c57e8fa901f51619c641af8c86382f6
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;
}