Merge branch 'master' of http://47.96.225.205:8888/r/ITM_V2_2DModel

cloudroam

2024-11-29 2e20334b05e3cb49434ec07aa8d77b30578466ab

 src/views/screen1/itm.vue

@@ -44,21 +44,21 @@
          <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">
              Online
              从无到有
            </div>
          </div>
          <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">
              Offline
              从有到无
            </div>
          </div>
        </div>
@@ -83,7 +83,7 @@
          </div>
        </div>
      </div>
      <div class="itm-container container-alert" style="cursor: pointer;margin-top: 3rem" @click="showSwitchInfoTable=true">
      <div class="itm-container container-alert" style="cursor: pointer;margin-top: 1rem" @click="showSwitchBoardInfoTable=true">
        <div class="flex1">
          <div class="reg-num flex">
            <span class="div1">{{ switchInfo.switchInfo && switchInfo.switchInfo.length || 0 }}</span>
@@ -94,61 +94,93 @@
          </div>
        </div>
      </div>
      <el-dialog :visible.sync="showSwitchInfoTable" title="新增交换机" append-to-body>
      <div class="itm-container container-alert" style="cursor: pointer;margin-top: 1rem" @click="showSwitchBoard">
        <div class="flex1">
          <div class="reg-desc">
            交换机机柜
          </div>
        </div>
      </div>
      <el-dialog :visible.sync="showSwitchBoardInfoTable" title="交换机清单" append-to-body>
        <el-table
            :data="switchInfo.lackSwitchInfo||[]"
            border
            style="width: 100%;max-height: 650px;overflow-y: scroll">
<!--          <el-table-column-->
<!--              fixed-->
<!--              label="index"-->
<!--              width="80"-->
<!--              type="index">-->
<!--          </el-table-column>-->
<!--          <el-table-column-->
<!--              prop="assetName"-->
<!--              label="asset name">-->
<!--          </el-table-column>-->
<!--          <el-table-column-->
<!--              prop="clentSiteCode"-->
<!--              label="clent site code"-->
<!--          >-->
<!--          </el-table-column>-->
<!--          <el-table-column-->
<!--              prop="createdTime"-->
<!--              label="created time">-->
<!--          </el-table-column>-->
<!--          <el-table-column-->
<!--              prop="dateTimeConnected"-->
<!--              label="connected datetime">-->
<!--          </el-table-column>-->
          <el-table-column
              prop="deviceName"
              label="device name">
         
            <el-table-column
              prop="deviceNameDNS"
              label="Device Name">
          </el-table-column>
          <el-table-column
          <!-- <el-table-column
              prop="deviceNameDNS"
              label="DNS">
          </el-table-column>
          </el-table-column> -->
          <el-table-column
              prop="ipAddress"
              label="ip address">
              label="Ip Address"
              width="150"
              >
          </el-table-column>
          <el-table-column
              width="180"
              prop="macAddress"
              label="mac address">
              label="Mac Address">
          </el-table-column>
          <el-table-column
              prop="nasPort"
              label="nas port">
              label="Nas Port">
          </el-table-column>
          <el-table-column
              prop="switchType"
              label="switch type">
              label="Switch Type">
          </el-table-column>

          <el-table-column
              prop="cabinetName"
              label="Cabinet Name" width="150">
              <template slot-scope="scope">
                  <el-select v-model="scope.row.cabinetName" placeholder="请选择机柜" filterable clearable>
                    <el-option
                      v-for="item in cabinetList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                      >
                    </el-option>
                  </el-select>
              </template>
          </el-table-column>
     
          <el-table-column
              prop="areaCode"
              label="Area Code">
              <template slot-scope="scope">
                  <el-select v-model="scope.row.areaCode" placeholder="请选择区域" filterable clearable>
                    <el-option
                      v-for="item in areaList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                      >
                    </el-option>
                  </el-select>
              </template>
          </el-table-column>
          
          <el-table-column
              label="Operator">
              <template slot-scope="scope">
                <el-button
                size="mini"
                type="primary"
               
                @click="handleConfirm(scope.row)">确认</el-button>
            </template>
          </el-table-column>

        </el-table>
      </el-dialog>

    </div>
    <div v-if="!chartclose" @click="closeself" class="chart-close"></div>
  </div>
@@ -156,6 +188,7 @@
<script>
import itmEqu from "./components/chart-itm";
import itmLine from "./components/chart-itm-line";
import {getSwitchBord,getAreaCode,AssignSwitch} from "@/api/area";

export default {
  components: {itmEqu, itmLine},
@@ -165,14 +198,75 @@
    switchDeviceStatus: {},
    switchInfo: {},
  },
  mounted(){
    this.getSwitchBord()
    this.getAreaCode()
  },
  data() {
    return {
      showSwitchInfoTable: false,
      showSwitchBoardInfoTable: false,
      cabinetList:[],
      areaList:[],
    }
  },
  methods: {
    async handleConfirm(row) {
      // 检查必填项
      if (!row.cabinetName || !row.areaCode) {
        this.$message.error('交换机柜名和区域代码不能为空');
        return;
      }

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

      let confirmRes= await this.$confirm('确认提交吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })

      if(confirmRes=="confirm"){
        let deviceInfo = {
          deviceInfo: {
            cabinetName: row.cabinetName,
            switchName: row.deviceNameDNS,
            port: row.nasPort,
            macAddress: row.macAddress,
            ipAddress: row.ipAddress,
            areaCode: row.areaCode,
          }
        };

        let res= await AssignSwitch(deviceInfo)

        if(res.isSuccess){
          this.showSwitchBoardInfoTable=false
          this.$emit("refresh", "")
        }
       
      }
    },
    closeself() {
      this.$emit("show", false);
    },
    showSwitchBoard(){
      this.$router.push({path: "/switch-board"});
      // this.$router.push({path: "/area", query: {code: '01'}});
    },

    getSwitchBord(){
        getSwitchBord().then((res) => {
        this.cabinetList = res.cabinetList || [];
      });
    },

    getAreaCode(){
      getAreaCode().then((res) => {
        this.areaList = res.cabinetList || [];
      });
    },
  },
};
@@ -227,7 +321,7 @@
    border-radius: 0.83rem;
    padding: 2.5rem;
    margin-top: 2rem;
    height: 53.5rem;
    height: 58.5rem;
    padding-top: 1rem;
  }

@@ -292,7 +386,7 @@
  }

  .itm-container {
    padding: 2rem;
    padding: 1rem;
    margin-top: 2rem;
    background: #e9f4fd;
    box-shadow: 0.5rem 0.33rem 2rem 0rem rgba(198, 212, 228, 0.38),