fix 1126

cloudroam

2024-11-26 c7d180dfdd4c2910c771e9a61b0746a41179a414

fix 1126

 src/components/equ-add-form.vue

@@ -20,7 +20,8 @@
            class="value select"
            placeholder="请选择交换机"
            v-model="name"
            clearable filterable 
            clearable filterable
            :disabled="nameDisabled"
          >
            <option disabled selected value >请选择交换机</option>
            <option  v-for="item in switchList"
@@ -44,7 +45,8 @@
            class="value select"
            placeholder="请选择交换机柜"
            v-model="cabinetName"
            clearable filterable 
            clearable filterable
            :disabled="cabinetNameDisabled"
          >
            <option disabled selected value >请选择交换机柜</option>
            <option  v-for="item in cabinetList"
@@ -99,6 +101,7 @@
            placeholder="请选择厂区"
            disabled clearable filterable
            v-model="selectcode"
            :disabled="areaCodeDisabled"
          >
            <!-- @change="updateDeviceList" -->
            <option disabled selected value>- 请选择厂区</option>
@@ -171,6 +174,9 @@
      // selectswitchindex: "",
      cabinetList:[],
      switchList:[],
      nameDisabled: false,
      cabinetNameDisabled: false,
      areaCodeDisabled: false,
    };
  },
  mounted() {
@@ -216,6 +222,10 @@
    },
    async submit() {
      //todo 提交设备
      if (!this.isValidIP(this.ipAddress)) {
        this.$message.warning("请输入有效的IP地址");
        return;
      }
      if (!this.name || !this.selectcode || !this.cabinetName || !this.networkPort) {
        this.$message.warning("数据未填写完整");
        return;
@@ -262,6 +272,7 @@
        this.$message.success("创建成功");
        this.open = false;
        this.$emit("update", {});
        this.$emit("update-server-info", this.code,this.name);
      }
    },
    openform(locInfo = {}) {
@@ -280,7 +291,8 @@
        this.open = !this.open;
      }
    },
    openConfigform(code, cabinetName) {
    openConfigform(code, switchName,cabinetName,config) {
      console.log('openConfigform',code,switchName,cabinetName);
      if (this.open) {
        this.open = !this.open;
      } else {
@@ -288,14 +300,23 @@
        this.locInfo =  {};
        this.selectcode = code;
        console.log("this.locInfo", this.locInfo);
        this.name = cabinetName;
        this.name = switchName;
        this.cabinetName = cabinetName;
        this.port = this.locInfo.port || "";
        this.networkPort = this.locInfo.name || "";
        this.macAddress = this.locInfo.macAddress || "";
        this.ipAddress = this.locInfo.ipAddress || "";

        this.open = !this.open;
      }
      if (config === 1) {
        this.nameDisabled = true; // 将nameDisabled设置为禁用
        this.cabinetNameDisabled = true; // 将cabinetName设置为禁用
        this.areaCodeDisabled = true; // 将areaCode设置为不禁用
      }
    },
    isValidIP(ip) {
      const regex = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
      return regex.test(ip);
    },
  },
  watch: {

 src/views/area/server-info.vue

@@ -111,11 +111,20 @@
            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"></equ-add-form>
                  @update="update_map"  @update-server-info="update_server_info" ></equ-add-form>
  </div>
</template>
<script>
@@ -143,7 +152,8 @@
    serve_info: {},
    serve_select:{},
    code:"",
    cabinetName:"",
    cabinetNameForOpen:"",
    switchName:"",
  },
  //根据
  //后端存储的是世界坐标，初次时候也是世界坐标，最小单位为0.01吧，这个间距或者大小，不考虑实际像素
@@ -165,6 +175,8 @@
    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) => {
@@ -184,6 +196,40 @@
      //获取一下信息
      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) {
      // 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 || [];
@@ -210,12 +256,18 @@
      }
      // console.log("this.activateSwitchPorts", this.activateSwitchPorts);
      this.dialog_activateSwitchPorts = true;
      this.cabinetName = info.cabinetName;
      this.cabinetName = cabinetName;
    },
    click_item_add() {
      console.log("this.$refs.equAddForm", this.$refs.equAddForm);
      console.log("this.areas", this.areas);
      this.$refs.equAddForm && this.$refs.equAddForm.openConfigform(this.code,this.cabinetName);
      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);
    },
  },
};