From baef0375875c22f7803aa41a28c7f569e055a798 Mon Sep 17 00:00:00 2001
From: cloudroam <cloudroam>
Date: 星期五, 22 十一月 2024 18:05:35 +0800
Subject: [PATCH] add： 区域配置
---
src/views/screen1/itm.vue | 155 ++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 121 insertions(+), 34 deletions(-)
diff --git a/src/views/screen1/itm.vue b/src/views/screen1/itm.vue
index 2da3906..d141d4d 100644
--- a/src/views/screen1/itm.vue
+++ b/src/views/screen1/itm.vue
@@ -48,7 +48,7 @@
<span class="div2">个</span>
</div>
<div class="reg-desc">
- Online
+ 从无到有
</div>
</div>
<div class="flex1 reg-img-service">
@@ -58,7 +58,7 @@
<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,42 +94,27 @@
</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"
+
+ <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">
@@ -147,8 +132,53 @@
prop="switchType"
label="switch type">
</el-table-column>
+
+ <el-table-column
+ prop="cabinetName"
+ label="Cabinet Name">
+ <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 +186,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 +196,70 @@
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;
+ }
+
+ 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 +314,7 @@
border-radius: 0.83rem;
padding: 2.5rem;
margin-top: 2rem;
- height: 53.5rem;
+ height: 58.5rem;
padding-top: 1rem;
}
@@ -292,7 +379,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),
--
Gitblit v1.9.3