1.交换机引导页面

陶杰

2024-11-14 0967b9f3ddaaf901a68d78edb7a80df0245425bd

 src/views/area/main-container.vue

@@ -76,123 +76,21 @@
    </div>
    <equ-add-form ref="equAddForm" :code="code" :areas="areas" :init_device_list="device_list"
                  @update="update_map"></equ-add-form>
    <!-- 点击设备可以前往服务器详情页看看（debug) -->
    <div v-if="!hideServe" class="serve-item" @click="() => {
      // stopScrolling();
      //$nextTick(() => {
      //  hideServe = !hideServe;
      //});
    }
      ">
      <div class="serve-img" v-if="serve_info.cabinetInfoStatic">
        <div class="each-item-container">
          <div v-for="(serve, itemindex) in serve_info.cabinetInfoStatic" @click="showServeInfo(serve)" :key="itemindex"
               class="each-item" :class="[
              serve.cabinetName == serve_select.switchName
                ? 'each-item-default'
                : '',
            ]">
            <div class="desc">
              <div class="title">{{ serve.cabinetName }}</div>
              <div class="value">设备数量: {{ serve.normal }}</div>
              <div class="tip-msg">
                <div class="title">{{ serve.cabinetName }}</div>
                <div class="desc">正常设备：<span class="f-n">{{ serve.normal || 0 }}</span></div>
                <div class="desc">黄色预警：<span class="f-y">{{ serve.waring || 0 }}</span></div>
                <div class="desc">红色预警：<span class="f-r">{{ serve.exception || 0 }}</span></div>
    <server-info v-if="!hideServe" 
    :serve_info="serve_info" 
    :serve_select="serve_select" 
    :code="code"></server-info>

                <!-- <div class="desc">详细信息：一小时后磁盘满</div> -->
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="tj-item">
        <div class="tj-nums">
          <div class="title">{{ serve_info.cabinetName || "-" }}</div>
          <div class="flex">
            <div class="equ-num-item a">
              <div class="num g">{{ serve_info.terminalCount || 0 }}</div>
              <div class="desc2">正常设备</div>
            </div>
            <div class="equ-num-item">
              <div class="num y">{{ serve_info.seitchCount || 0 }}</div>
              <div class="desc2">黄色预警</div>
            </div>
            <div class="equ-num-item c">
              <div class="num r">{{ serve_info.exceptionCount || 0 }}</div>
              <div class="desc2">红色预警</div>
            </div>
          </div>
        </div>
        <div class="tj-line" v-if="false"></div>
        <div class="tj-list" v-if="false">
          <div class="service-list-arr" id="my_serve_info_list">
            <div class="service-list-arr-item" v-for="(item, index) of data_service_list" :key="index">
              <div class="time">{{ item.time }}</div>
              <div class="flex1 service-list-arr-item_content" v-html="item.desc"></div>
              <div class="dot" :class="item.status"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="back-button-left-bottom" @click="backToTop">返回</div>
    <el-dialog :visible.sync="dialog_activateSwitchPorts" title="交换机端口情况" class="dialog_activateSwitchPorts">
      <div v-for="(infos, index2) of activateSwitchPorts" :key="index2" class="port-items">
        <div class="port-item" v-for="(item, index) of infos" :key="index">
          <div :key="index" class="space-text" :class="[
            (item.info && item.info.statusInt == 2) ||
              (item.info && item.info.statusInt == 3) ||
              (item.info && item.info.statusInt == 4)
              ? 'space-text-red'
              : '',
            item.info && item.info.statusInt == 1 ? 'space-text-yellow' : '',
          ]" v-if="item.info">
            {{ item.info.networkPort || "-" }}
          </div>
          <div class="port-tip">{{ item.index }}</div>
        </div>
      </div>
      <!--   全部的信息   -->
      <el-table
          :data="switchAllDetialInfos"
          border
          style="width: 100%;max-height: 650px;overflow-y: scroll;">
        <el-table-column
            prop="deviceName"
            label="device name">
        </el-table-column>
        <el-table-column
            prop="deviceNameDNS"
            label="DNS">
        </el-table-column>
        <el-table-column
            prop="ipAddress"
            label="ip address">
        </el-table-column>
        <el-table-column
            width="180"
            prop="macAddress"
            label="mac address">
        </el-table-column>
        <el-table-column
            prop="nasPort"
            label="nas port">
        </el-table-column>
        <el-table-column
            prop="switchType"
            label="switch type">
        </el-table-column>
      </el-table>

    </el-dialog>
  </div>
</template>
<script>
import tjContainer from "./tj-container";
import bridge from "@/components/bridge";
import serverInfo from "./server-info";
import equAddForm from "@/components/equ-add-form.vue";

import {
  getAreaServeInfo,
  getFaultInfo,
@@ -208,7 +106,7 @@
import Bridge from "@/components/bridge.vue";

export default {
  components: {tjContainer, bridge, equAddForm, Bridge},
  components: {tjContainer, bridge, equAddForm, Bridge,serverInfo},
  props: {
    item_show: false,
    code: "",
@@ -430,6 +328,7 @@
      this.$refs.equAddForm && this.$refs.equAddForm.openform(locInfo);
    },
    async showServeInfo(info) {
      debugger;
      //展示交换机全部端口
      console.log("showServeInfo", info);
      //弹出框展示全部端口，并且每个端口的情况