add： 区域配置

cloudroam

2024-11-22 0390f5ab4b062a9146cd7d92bdd91954a052e13d

 src/components/device-info.vue

@@ -1,11 +1,52 @@
<template>
      

      <div
        v-if="local_show_info"
        class="device-info"
        @click="local_show_info = false"
      >
        <div class="title">接口</div>
        <div class="info-container">
        <div class="info-block">
        <div class="title">上一次信息</div>
        <div class="each">
          <div class="label">网络连接性:</div>
          <div class="value">{{ current_show_info.status }}</div>
        </div>
        <div class="each">
          <div class="label">IP地址:</div>
          <div class="value">{{ current_show_info.ip || "" }}</div>
        </div>
        <div class="each">
          <div class="label">Mac:</div>
          <div class="value">{{ current_show_info.mac }}</div>
        </div>
        <div class="each">
          <div class="label">桥架端口:</div>
          <div class="value">{{ current_show_info.networkPort }}</div>
        </div>
        <div class="each">
          <div class="label">交换机名字:</div>
          <div class="value">{{ current_show_info.switchName }}</div>
        </div>
        <div class="each">
          <div class="label">交换机端口:</div>
          <div class="value">{{ current_show_info.port }}</div>
        </div>
        <div class="each">
          <div class="label">名称:</div>
          <div class="value">{{ current_show_info.clhwName }}</div>
        </div>
        <div class="each">
          <div class="label">类型:</div>
          <div class="value">{{ current_show_info.clhwTier }}</div>
        </div>
        <div class="each">
          <div class="label">操作系统:</div>
          <div class="value">{{ current_show_info.clhwOperating_System }}</div>
        </div>
      </div>
        <div class="info-block">
        <div class="title">当前信息</div>
        <div class="each">
          <div class="label">网络连接性:</div>
          <div class="value">{{ device_info.status }}</div>
@@ -42,6 +83,8 @@
          <div class="label">操作系统:</div>
          <div class="value">{{ device_info.clhwOperating_System }}</div>
        </div>
      </div>
      </div>
        <div class="button-to-switch" @click="toSwitchInfo()">交换机</div>
        <div class="button-del-port" @click="delPort()">删除</div>
        <div
@@ -52,7 +95,7 @@
            device_info?.status==3 ||
            device_info?.status==4 
          "
        

          @click="statusPort(index)"
        >
          确认
@@ -104,7 +147,7 @@
        return 4;
      },
    },
    

    code: "",
    areacode: "",
    current_show_id: "",
@@ -173,12 +216,12 @@
      background-image: url("../assets/area/device-info-bg.svg");
      /* background-color: #a6c6e5; */
      background-size: 100% 100%;
      height: 24.4rem;
      width: 29rem;
      height: 39.4rem;
      width: 49rem;
      position: absolute;
      // top: -31.5rem;
      top: -28.7rem;
      transform: translate(-50%, 0%);
      top: -46.5rem;
      transform: translate(-48%, 0%);
      left: 50%;
      z-index: 120;
      padding: 3.1rem;
@@ -284,4 +327,12 @@
        background-color: rgb(243, 15, 15);
      }
    }
.info-container {
  display: flex;
  justify-content: space-between;
}

.info-block {
  width: 45%; /* Adjust the width as needed */
}
</style>