cloudroam
2024-11-28 73953e3d95ecf974a5e79c1e259d33c1c9d518cc
src/views/area/server-info.vue
@@ -65,6 +65,7 @@
    <el-dialog append-to-body :modal="false"
    :visible.sync="dialog_activateSwitchPorts" title="交换机端口情况" class="dialog_activateSwitchPorts">
      <div><el-button type="primary" @click="click_item_add" style="margin-bottom:6rem" >新增</el-button></div>
      <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="[
@@ -74,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>
@@ -110,16 +114,27 @@
            prop="switchType"
            label="switch type">
        </el-table-column>
        <el-table-column
            prop="areaCode"
            label="Area Code">
        </el-table-column>
        <el-table-column
            prop="networkPort"
            label="Network Port">
        </el-table-column>
      </el-table>
    </el-dialog>
    <equ-add-form ref="equAddForm" :code="code" :areas="areas" :init_device_list="device_list"
                  @update="update_map"  @update-server-info="update_server_info" ></equ-add-form>
  </div>
</template>
<script>
import equAddForm from "@/components/equ-add-form.vue";
import deviceInfoDelete from "@/components/device-info-delete";
import {
  getAreaServeInfo,
  getFaultInfo,
@@ -136,11 +151,13 @@
export default {
  components: {equAddForm},
  components: {equAddForm,deviceInfoDelete},
  props: {
    serve_info: {},
    serve_select:{},
    code:"",
    cabinetNameForOpen:"",
    switchName:"",
  },
  //根据
  //后端存储的是世界坐标,初次时候也是世界坐标,最小单位为0.01吧,这个间距或者大小,不考虑实际像素
@@ -152,16 +169,28 @@
      dialog_activateSwitchPorts: false,
      activateSwitchPorts:{},
      switchAllDetialInfos:[],
      areas: [],
      device_list: [],
      // serve_info: {},
      isDragging: false,
      selectedIndex: null,
      cur_device_info: null,  // 当前的设备信息
      cur_item:null,// 当前的element
      show_device_info: false, // 展示设备信息
    };
  },
  created() {
    console.log("serve_infoserve_infoserve_infoserve_info")
    console.log("this.serve_info:",this.serve_info)
    console.log("this.serve_select:",this.serve_select)
    //这里取打开的交换机柜的名称
    this.cabinetNameForOpen = this.serve_info.cabinetName;
  },
   mounted() {
     getAreaTjData().then((res) => {
       // console.log('areas',res.switchAreaInfo || [])
       this.areas = res.switchAreaInfo || [];
     });
    
  },
  destroyed() {
@@ -169,13 +198,47 @@
  },
  methods: {
    async showServeInfo(info) {
      debugger;
      //展示交换机全部端口
      console.log("showServeInfo", info);
      //弹出框展示全部端口,并且每个端口的情况
      //获取一下信息
      this.$modal.loading("加载中");
      const res = await getDeviceList(this.code, info.cabinetName);
      this.$modal.closeLoading();
      console.log("serveinfo", res);
      // this.activateSwitchPorts = res.switchDetialInfos || [];
      this.activateSwitchPorts = {};
      //分两行,每行24个
      this.switchAllDetialInfos = res.switchAllDetialInfos || []
      console.log("switchAllDetialInfos", this.switchAllDetialInfos)
      var activaePorts = {};
      if (res.switchDetialInfos) {
        for (var item of res.switchDetialInfos) {
          if (item.port) activaePorts[item.port] = item;
        }
      }
      console.log("activaePorts", activaePorts);
      for (var i = 0; i <= 47; i++) {
        var level = "" + parseInt(i / 24);
        if (!this.activateSwitchPorts["" + level]) {
          this.activateSwitchPorts["" + level] = [];
        }
        this.activateSwitchPorts["" + level].push({
          index: "" + (i + 1),
          name: "",
          info: activaePorts["" + (i + 1)] || undefined,
        });
      }
      // console.log("this.activateSwitchPorts", this.activateSwitchPorts);
      this.dialog_activateSwitchPorts = true;
      this.cabinetName = info.cabinetName;
    },
    async update_server_info(code,name) {
      debugger;
      // name 是交换机
      console.log("info",code,name);
      this.$modal.loading("加载中");
      const res = await getDeviceList(code, name);
      this.$modal.closeLoading();
      console.log("serveinfo", res);
      // this.activateSwitchPorts = res.switchDetialInfos || [];
@@ -201,7 +264,50 @@
        });
      }
      // console.log("this.activateSwitchPorts", this.activateSwitchPorts);
      debugger;
      this.dialog_activateSwitchPorts = true;
      this.cabinetName = name;
    },
    click_item_add() {
      console.log("this.$refs.equAddForm", this.$refs.equAddForm);
      console.log("this.areas", this.areas);
      const queryParams = this.$route.query;
      console.log("queryParams",queryParams)
      let config = 0;
      if (queryParams.code) {
        config = 1;
      }
      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()
    },
  },
};