1.交换机引导页面

陶杰

2024-11-14 0967b9f3ddaaf901a68d78edb7a80df0245425bd

 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;
              /* */
            }