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

陶杰

2024-11-29 0ae255185f422781f8a5cc4c52ad56ee0d3a1e6e

 src/views/screen1/itm.vue

@@ -44,7 +44,7 @@
          <div class="flex1 reg-img-service">
            <div class="reg-img-2-1"></div>
            <div class="reg-num flex">
              <span class="div1">{{ switchDeviceStatus['1'] && switchDeviceStatus['1'].online || 0 }}</span>
              <span class="div1">{{ switchDeviceStatus['3'] && switchDeviceStatus['3'].online || 0 }}</span>
              <span class="div2">个</span>
            </div>
            <div class="reg-desc">
@@ -54,7 +54,7 @@
          <div class="flex1 reg-img-service">
            <div class="reg-img-2-2"></div>
            <div class="reg-num flex">
              <span class="div1">{{ switchDeviceStatus['1'] && switchDeviceStatus['1'].offline || 0 }}</span>
              <span class="div1">{{ switchDeviceStatus['3'] && switchDeviceStatus['3'].offline || 0 }}</span>
              <span class="div2">个</span>
            </div>
            <div class="reg-desc">
@@ -105,11 +105,16 @@
        <el-table
            :data="switchInfo.lackSwitchInfo||[]"
            border
            style="width: 100%;max-height: 650px;overflow-y: scroll">
         
            style="width: 100%"
            max-height="650"
            >

            <el-table-column
              prop="deviceNameDNS"
              label="device name">
              label="Device Name"
              fixed
              :width="width"
              >
          </el-table-column>
          <!-- <el-table-column
              prop="deviceNameDNS"
@@ -117,27 +122,32 @@
          </el-table-column> -->
          <el-table-column
              prop="ipAddress"
              label="ip address">
              label="Ip Address"
              :width="width"
              >
          </el-table-column>
          <el-table-column
              width="180"
              prop="macAddress"
              label="mac address">
              label="Mac Address">
          </el-table-column>
          <el-table-column
            :width="width"
              prop="nasPort"
              label="nas port">
              label="Nas Port">
          </el-table-column>
          <el-table-column
              :width="width"
              prop="switchType"
              label="switch type">
              label="Switch Type">
          </el-table-column>

          <el-table-column
              :width="width"
              prop="cabinetName"
              label="Cabinet Name">
              <template slot-scope="scope">
                  <el-select v-model="scope.row.cabinetName" placeholder="请选择机柜" filterable clearable="" >
                  <el-select v-model="scope.row.cabinetName" placeholder="请选择机柜" filterable clearable>
                    <el-option
                      v-for="item in cabinetList"
                      :key="item.id"
@@ -150,10 +160,11 @@
          </el-table-column>
     
          <el-table-column
              :width="width"
              prop="areaCode"
              label="Area Code">
              <template slot-scope="scope">
                  <el-select v-model="scope.row.areaCode" placeholder="请选择区域" filterable clearable="" >
                  <el-select v-model="scope.row.areaCode" placeholder="请选择区域" filterable clearable>
                    <el-option
                      v-for="item in areaList"
                      :key="item.id"
@@ -164,8 +175,19 @@
                  </el-select>
              </template>
          </el-table-column>

          <el-table-column
              :width="width"
              prop="networkPort"
              label="NetworkPort">
              <template slot-scope="scope">
                  <el-input v-model="scope.row.networkPort" placeholder="请输入网络端口号" clearable></el-input>
              </template>
          </el-table-column>

          
          <el-table-column
              :width="width"
              label="Operator">
              <template slot-scope="scope">
                <el-button
@@ -205,15 +227,33 @@
      showSwitchBoardInfoTable: false,
      cabinetList:[],
      areaList:[],
      width:150,
    }
  },
  methods: {
    async handleConfirm(row) {
      // 检查必填项
      if (!row.cabinetName || !row.areaCode) {
        this.$message.error('交换机柜名和区域代码不能为空');
      if (!row.cabinetName) {
        this.$message.error('交换机柜名不能为空');
        return;
      }

      if (!row.areaCode) {
        this.$message.error('区域代码不能为空');
        return;
      }

      if (!row.networkPort) {
        this.$message.error('网络端口号不能为空');
        return;
      }


      
      // if (!row.cabinetName) {
      //   this.$message.error('交换机柜名不能为空');
      //   return;
      // }

      let confirmRes= await this.$confirm('确认提交吗？', '提示', {
        confirmButtonText: '确定',
@@ -230,6 +270,7 @@
            macAddress: row.macAddress,
            ipAddress: row.ipAddress,
            areaCode: row.areaCode,
            networkPort:row.networkPort,
          }
        };