add 删除功能

cloudroam

2024-11-28 73953e3d95ecf974a5e79c1e259d33c1c9d518cc

add 删除功能

 src/components/device-info-delete.vue

对比新文件
@@ -0,0 +1,283 @@
<template>
      <div
        v-if="local_show_info"
        class="device-info"
        @click="local_show_info = false"
      >
        <div class="info-container">
        <div class="info-block">
        <div class="title">当前信息</div>
        <div class="each">
          <div class="label">网络连接性:</div>
          <div class="value">{{ device_info.status }}</div>
        </div>
        <div class="each">
          <div class="label">IP地址:</div>
          <div class="value">{{ device_info.ip || "" }}</div>
        </div>
        <div class="each">
          <div class="label">Mac:</div>
          <div class="value">{{ device_info.mac }}</div>
        </div>
        <div class="each">
          <div class="label">桥架端口:</div>
          <div class="value">{{ device_info.networkPort }}</div>
        </div>
        <div class="each">
          <div class="label">交换机名字:</div>
          <div class="value">{{ device_info.switchName }}</div>
        </div>
        <div class="each">
          <div class="label">交换机端口:</div>
          <div class="value">{{ device_info.port }}</div>
        </div>
        <div class="each">
          <div class="label">名称:</div>
          <div class="value">{{ device_info.clhwName }}</div>
        </div>
        <div class="each">
          <div class="label">类型:</div>
          <div class="value">{{ device_info.clhwTier }}</div>
        </div>
        <div class="each">
          <div class="label">操作系统:</div>
          <div class="value">{{ device_info.clhwOperating_System }}</div>
        </div>
      </div>
      </div>
        <div class="button-del-port" @click="delPort()">删除</div>
        <div class="close" @click="handleClose"></div>
      </div>
</template>
<script>
export default {
  props: {

    show_info: {
      type: Boolean,
      default() {
        return false;
      },
    },

    device_info: {
      type: Object,
      default() {
        return {};
      },
    },

    configs: {
      type: Object,
      default() {
        return {};
      },
    },

    datamap: {
      type: Object,
      default() {
        return {};
      },
    },
    devicelist: {
      type: Array,
      default() {
        return [];
      },
    },
    width: {
      type: Number,
      default() {
        return 4;
      },
    },

    code: "",
    areacode: "",
    current_show_id: "",
    grouplevel: {
      type: Number,
      default() {
        return 0;
      },
    },
    status_indrag: false,
    current_drag_index: {
      type: Object,
      default() {
        return {};
      },
    },

  },

  watch: {
    // 监听 props 的变化并同步到 data
    show_info(newVal) {
      this.local_show_info = newVal;
    },
  },

  methods: {

    toSwitchInfo() {
      this.$emit("toSwitchInfo",this.device_info);
    },
    async delPort(index) {
      await this.$modal.confirm("是否删除此端口");
      this.$emit("delPort", this.device_info);
    },
    async statusPort(index) {
      await this.$modal.confirm("是否设置此端口状态为正常");
      this.$emit("statusPort",this.device_info);
    },

    handleClose(){
      this.local_show_info=false
    },
  },
  data() {
    return {
      local_show_info: false,
      current_show_info: {
        status:"",
        ip:"",
        mac:"",
        networkPort:"",
        switchName:"",
        port:"",
        clhwName:"",
        clhwTier:"",
        clhwOperating_System:""
      },
    };
  },
};
</script>
<style lang="scss" scoped>
.device-info {
      cursor: default;
      background-image: url("../assets/area/device-info-bg.svg");
      background-size: 100% 100%;
      height: 40.4rem;
      width: 49rem;
      position: absolute;
      // top: -31.5rem;
      top: -44.7rem;
      transform: translate(-50%, 0%);
      left: 50%;
      z-index: 120;
      padding: 3.1rem;
      padding-top: 2.5rem;
      padding-left: 1.6rem;
      padding-right: 1.6rem;

      .title {
        height: 2.5rem;
        font-size: 1.8rem;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #265696;
        line-height: 2.5rem;
        text-align: left;
        margin-bottom: 0.5rem;
      }

      .each {
        display: flex;
        height: 2rem;
        font-size: 1.4rem;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #265696;
        line-height: 2rem;

        .label {
          margin-right: 1rem;
          text-align: left;
        }

        .value {
        }
      }

      .close {
        background-image: url("../assets/area/close.svg");
        background-size: 100% 100%;
        position: absolute;
        width: 1.2rem;
        height: 1.2rem;
        top: 3rem;
        right: 2rem;
      }
      .button-to-switch {
        cursor: pointer;
        width: 5.9rem;
        height: 2.2rem;
        border-radius: 0.2rem;
        border: 0.1rem solid #278afa;
        font-size: 1.2rem;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #278afa;
        line-height: 2.2rem;
        position: absolute;
        right: 9.2rem;
        bottom: 4rem;
      }

      .button-to-switch:hover {
        color: #fff;
        background-color: #278afa;
      }
      .button-to-check {
        cursor: pointer;
        width: 5.2rem;
        height: 2.2rem;
        border-radius: 0.2rem;
        border: 0.1rem solid rgb(15, 243, 76);
        font-size: 1.2rem;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgb(2, 76, 22);
        line-height: 2.2rem;
        position: absolute;

        right: 16.2rem;
        bottom: 4rem;
      }
      .button-to-check:hover {
        color: #fff;
        background-color: rgb(15, 243, 76);
      }
      .button-del-port {
        cursor: pointer;
        width: 5.2rem;
        height: 2.2rem;
        border-radius: 0.2rem;
        border: 0.1rem solid rgb(243, 15, 15);
        font-size: 1.2rem;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgb(243, 15, 15);
        line-height: 2.2rem;
        position: absolute;
        right: 2.2rem;
        bottom: 4rem;
      }
      .button-del-port:hover {
        color: #fff;
        background-color: rgb(243, 15, 15);
      }
    }
.info-container {
  display: flex;
  justify-content: space-between;
  height:100%;
}

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

 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>
@@ -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() {
@@ -226,6 +234,7 @@
      this.cabinetName = info.cabinetName;
    },
    async update_server_info(code,name) {
      debugger;
      // name 是交换机
      console.log("info",code,name);
      this.$modal.loading("加载中");
@@ -255,8 +264,9 @@
        });
      }
      // console.log("this.activateSwitchPorts", this.activateSwitchPorts);
      debugger;
      this.dialog_activateSwitchPorts = true;
      this.cabinetName = cabinetName;
      this.cabinetName = name;
    },
    click_item_add() {
      console.log("this.$refs.equAddForm", this.$refs.equAddForm);
@@ -269,6 +279,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>