From 0ae255185f422781f8a5cc4c52ad56ee0d3a1e6e Mon Sep 17 00:00:00 2001
From: 陶杰 <1378534974@qq.com>
Date: 星期五, 29 十一月 2024 19:07:15 +0800
Subject: [PATCH] 1.首页可拖拽 2.没有名字去掉悬浮层 3.增加了背景
---
src/views/screen1/itm.vue | 201 +++++++++++++++++++++++++++++++++++++++----------
1 files changed, 159 insertions(+), 42 deletions(-)
diff --git a/src/views/screen1/itm.vue b/src/views/screen1/itm.vue
index cebe501..64b1064 100644
--- a/src/views/screen1/itm.vue
+++ b/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,18 +83,18 @@
</div>
</div>
</div>
- <div class="itm-container container-alert" style="cursor: pointer;margin-top: 3rem" @click="showSwitchBoardInfoTable=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>
<span class="div2">个</span>
</div>
<div class="reg-desc">
- 交换机清单
+ 新增交换机
</div>
</div>
</div>
- <div class="itm-container container-alert" style="cursor: pointer;margin-top: 3rem" @click="showSwitchBoard">
+ <div class="itm-container container-alert" style="cursor: pointer;margin-top: 1rem" @click="showSwitchBoard">
<div class="flex1">
<div class="reg-desc">
交换机机柜
@@ -105,57 +105,102 @@
<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">
+ style="width: 100%"
+ max-height="650"
+ >
+
+ <el-table-column
+ prop="deviceNameDNS"
+ label="Device Name"
+ fixed
+ :width="width"
+ >
</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="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-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
+ :width="width"
+ 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
+ :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
+ 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>
@@ -163,6 +208,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},
@@ -172,19 +218,90 @@
switchDeviceStatus: {},
switchInfo: {},
},
+ mounted(){
+ this.getSwitchBord()
+ this.getAreaCode()
+ },
data() {
return {
showSwitchBoardInfoTable: false,
+ cabinetList:[],
+ areaList:[],
+ width:150,
}
},
methods: {
+ async handleConfirm(row) {
+ // 检查必填项
+ 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: '确定',
+ 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,
+ networkPort:row.networkPort,
+ }
+ };
+
+ 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 || [];
+ });
+ },
},
};
</script>
@@ -303,7 +420,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