1.首页可拖拽 2.没有名字去掉悬浮层 3.增加了背景

陶杰

2024-11-29 0ae255185f422781f8a5cc4c52ad56ee0d3a1e6e

 src/views/area/server-info.vue

@@ -75,8 +75,11 @@
              ? 'space-text-red'
              : '',
            item.info && item.info.statusInt == 1 ? 'space-text-yellow' : '',
          ]" v-if="item.info">
          ]" v-if="item.info"  @click="showDeviceInfo(index,item,$event)">
            {{ item.info.networkPort || "-" }}
            <device-info-delete v-show="selectedIndex === item.info.id " :show_info="show_device_info"
                                :device_info="cur_device_info" @delPort="delPort"
            ></device-info-delete>
          </div>
          <div class="port-tip">{{ item.index }}</div>
        </div>
@@ -86,30 +89,30 @@
          :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="deviceName"-->
<!--            label="device name">-->
<!--        </el-table-column>-->
        <el-table-column
            prop="deviceNameDNS"
            label="DNS">
            label="Device Name">
        </el-table-column>
        <el-table-column
            prop="ipAddress"
            label="ip address">
            label="Ip Address">
        </el-table-column>
        <el-table-column
            width="180"
            prop="macAddress"
            label="mac address">
            label="Mac Address">
        </el-table-column>
        <el-table-column
            prop="nasPort"
            label="nas port">
            label="Nas Port">
        </el-table-column>
        <el-table-column
            prop="switchType"
            label="switch type">
            label="Switch Type">
        </el-table-column>
        <el-table-column
            prop="areaCode"
@@ -131,6 +134,7 @@


import equAddForm from "@/components/equ-add-form.vue";
import deviceInfoDelete from "@/components/device-info-delete";
import {
  getAreaServeInfo,
  getFaultInfo,
@@ -147,7 +151,7 @@

export default {

  components: {equAddForm},
  components: {equAddForm,deviceInfoDelete},
  props: {
    serve_info: {},
    serve_select:{},
@@ -168,7 +172,11 @@
      areas: [],
      device_list: [],
      // serve_info: {},
    
      isDragging: false,
      selectedIndex: null,
      cur_device_info: null,  // 当前的设备信息
      cur_item:null,// 当前的element
      show_device_info: false, // 展示设备信息
    };
  },
  created() {
@@ -195,7 +203,9 @@
      //弹出框展示全部端口，并且每个端口的情况
      //获取一下信息
      this.$modal.loading("加载中");
      const res = await getDeviceList(this.code, info.cabinetName);
      // const res = await getDeviceList(this.code, info.cabinetName);
      //2024-11-29 改成传空处理
      const res = await getDeviceList("", info.cabinetName);
      this.$modal.closeLoading();
      console.log("serveinfo", res);
      // this.activateSwitchPorts = res.switchDetialInfos || [];
@@ -229,7 +239,9 @@
      // name 是交换机
      console.log("info",code,name);
      this.$modal.loading("加载中");
      const res = await getDeviceList(code, name);
      //2024-11-29 改成传空处理
      //const res = await getDeviceList(code, name);
      const res = await getDeviceList("", name);
      this.$modal.closeLoading();
      console.log("serveinfo", res);
      // this.activateSwitchPorts = res.switchDetialInfos || [];
@@ -256,7 +268,7 @@
      }
      // console.log("this.activateSwitchPorts", this.activateSwitchPorts);
      this.dialog_activateSwitchPorts = true;
      this.cabinetName = cabinetName;
      this.cabinetName = name;
    },
    click_item_add() {
      console.log("this.$refs.equAddForm", this.$refs.equAddForm);
@@ -269,6 +281,36 @@
      }
      this.$refs.equAddForm && this.$refs.equAddForm.openConfigform(this.code,this.cabinetName,this.cabinetNameForOpen,config);
    },
    showDeviceInfo(index, item, event) {
      event.stopPropagation(); // 阻止事件冒泡
      if (item.info) {
        // 如果点击的是同一个元素，则切换显示状态
        if (this.selectedIndex === item.info.id) {
          this.show_device_info = !this.show_device_info;
        } else {
          // 切换到新元素，自动关闭之前的
          this.selectedIndex = item.info.id;
          this.show_device_info = true;
          this.cur_device_info = item.info;
        }
      }
    },
    async delPort(info) {
      var json = {
        id: info.id,
        operateType: 4,
        networkPort: info.name,
      };
      this.$modal.loading("删除中");

      const data = await delport(json);
      console.log("info", info);
      this.update_server_info(info.areaCode, info.switchName);

      // this.$modal.closeLoading();
      // this.initializeElements();
      // this.handleBindElementsItems()
    },
  },
};
</script>