1.悬浮框大小修改 2.搜索ip跳转过来的匹配的network显示弹框

陶杰

2024-11-26 ae5a9a5f277960ea9ebec339c6f299db28c59b17

1.悬浮框大小修改
2.搜索ip跳转过来的匹配的network显示弹框

 src/views/area/main-container.vue

@@ -51,6 +51,7 @@
              @dragstart="dragstart($event, index)" @dragend="dragend($event, index)"
              @drop="handleDrop($event, index)" @dragover="handleDragOver($event)" draggable="true"
              @click="showDeviceInfo(index,item,$event)"
              :id="'itemtext@'+item?.deviceInfo?.areaCode+'_'+item?.deviceInfo?.networkPort+'_'+index"
            >
              {{ item.deviceInfo?.networkPort }}
            <device-info v-show="selectedIndex === index " :show_info="show_device_info"
@@ -114,6 +115,7 @@
    item_show: false,
    code: "",
    query_networkPort: '',
    deviceId:'',
  },
  //根据
  //后端存储的是世界坐标，初次时候也是世界坐标，最小单位为0.01吧，这个间距或者大小，不考虑实际像素
@@ -252,14 +254,19 @@
    });
    if(this.code){
       // 获取当前页面的背景图和数量
      this.initArea();
      await this.initArea();
      // 根据屏幕初始化格子
      this.initializeElements(); // 在组件加载时初始化 elements
      await this.initializeElements(); // 在组件加载时初始化 elements
      // 初始化设备信息
      this.handleBindElementsItems()
      await this.handleBindElementsItems()

      // 如果传入了ip的话，则弹框展示
      if(this.code && this.query_networkPort){
        this.showSelectedIpDevice(this.code, this.query_networkPort)
    }
   
    // this.handleBindElementsItemsTest()
    }

  },
  destroyed() {
    const content = document.getElementById("content");
@@ -443,22 +450,28 @@
          this.elements[originalIndex] = element;
        }
      }

    },

    async handleBindElementsItemsTest() {
      const deviceInfoList = await getDeviceList(this.code)
      const switchDetialInfos = deviceInfoList.switchDetialInfos

      // const evenIndexes = this.elements.filter((_, index) => index % 2 === 0);
      const evenIndexes = this.elements.filter(element => element.cell % 2 == 0);
      evenIndexes.forEach((element, index) => {
        element.deviceInfo = switchDetialInfos[index] || null;
        // element.isPlaceholder = !!switchDetialInfos[index];
        element.isPlaceholder=true;
      });

      console.log("所有布局元素")
      console.log(this.elements)
    showSelectedIpDevice(code,networkPort){
     const originalIndex = this.elements.findIndex((el) =>el.deviceInfo?.areaCode==code && el.deviceInfo?.networkPort == networkPort);
    //  console.log(originalIndex)
     if(originalIndex>0){
        this.selectedIndex=originalIndex
        this.show_device_info = true;
        this.cur_device_info =  this.elements[originalIndex].deviceInfo;
     }
    //  if(originalIndex>0){
    //   let id='itemtext@'+code+'_'+networkPort+'_'+originalIndex
    //   // itemtext@01_T2-04-06_46
    //   var dom = document.getElementById(id)
    //   if (dom) {
    //     this.selectedIndex=originalIndex
    //     this.show_device_info = true;
    //     this.cur_device_info =  this.elements[originalIndex].deviceInfo;
    //     // dom.click()
    //   }
    //  }

    },

@@ -765,7 +778,6 @@

    // 点击增加
    handleClickToAddItem(index,item){

      this.cur_item=item
      // 如果存在设备的话则直接返回
      if(item?.deviceInfo?.id) return;
@@ -833,12 +845,7 @@
          cells: item.areaCellRow || [],
          code: item.areaIndex,
        };
        // console.log("bridge_infos", this.bridge_infos);
        // console.log(
        //   "currentareaconfig",
        //   currentareaconfig[item.areaIndex],
        //   currentareaconfig["pad"]
        // );
    
        if (currentareaconfig["pad"]) {
          this.bridge_infos[item.areaIndex]["pad"] = currentareaconfig["pad"];
        }
@@ -1176,29 +1183,53 @@
      cursor: move;
    }

    // .space-text {
    //   background-image: url("@/assets/area/space-text.svg");
    //   background-size: 100% 100%;
    //   min-width: 7.5rem;
    //   min-height: 2.5rem;
    //   transform: translate(-50%, 0%);
    //   left: 50%;
    //   padding-top: 0.5rem;
    //   top: -2.5rem;
    //   position: absolute;
    //   cursor: grabbing;
    //   cursor: move;
    //   /* line-height: 100%; */
    //   /* font-size: 12px; */
    //   /* span { */
    //   word-break: break-all;
    //   word-wrap: break-word;
    //   /*但在有些场景中，还需要加上下面这行代码*/
    //   white-space: normal;
    //   overflow-wrap: anywhere;
    //   /* } */

    //   font-size: 1rem;
    //   font-family: PingFangSC-Semibold, PingFang SC;
    //   font-weight: 600;
    //   color: #3299ff;
    //   z-index: 20;
    // }
    .space-text {
      background-image: url("@/assets/area/space-text.svg");
      background-size: 100% 100%;
      min-width: 7.5rem;
      min-height: 2.5rem;
      transform: translate(-50%, 0%);
      min-width: 3rem;
      height: 1.5rem;
      transform: translate(-50%);
      left: 50%;
      padding-top: 0.5rem;
      top: -2.5rem;
      padding-top: 0.2rem;
      padding-left: 0.2rem;
      padding-right: 0.3rem;
      top: -1.5rem;
      position: absolute;
      cursor: grabbing;
      cursor: move;
      /* line-height: 100%; */
      /* font-size: 12px; */
      /* span { */
      word-break: break-all;
      word-wrap: break-word;
      /*但在有些场景中，还需要加上下面这行代码*/
      white-space: normal;
      white-space: nowrap;
      overflow-wrap: anywhere;
      /* } */

      font-size: 1rem;
      font-size: 0.6rem;
      font-size: 14;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #3299ff;