From 73953e3d95ecf974a5e79c1e259d33c1c9d518cc Mon Sep 17 00:00:00 2001
From: cloudroam <cloudroam>
Date: 星期四, 28 十一月 2024 16:49:27 +0800
Subject: [PATCH] add 删除功能
---
src/views/area/server-info.vue | 48 +++++++
src/components/device-info-delete.vue | 283 +++++++++++++++++++++++++++++++++++++++++++++++
2 files changed, 327 insertions(+), 4 deletions(-)
diff --git a/src/components/device-info-delete.vue b/src/components/device-info-delete.vue
new file mode 100644
index 0000000..63e9612
--- /dev/null
+++ b/src/components/device-info-delete.vue
@@ -0,0 +1,283 @@
+<template>
+ <div
+ v-if="local_show_info"
+ class="device-info"
+ @click="local_show_info = false"
+ >
+ <div class="info-container">
+ <div class="info-block">
+ <div class="title">当前信息</div>
+ <div class="each">
+ <div class="label">网络连接性:</div>
+ <div class="value">{{ device_info.status }}</div>
+ </div>
+ <div class="each">
+ <div class="label">IP地址:</div>
+ <div class="value">{{ device_info.ip || "" }}</div>
+ </div>
+ <div class="each">
+ <div class="label">Mac:</div>
+ <div class="value">{{ device_info.mac }}</div>
+ </div>
+ <div class="each">
+ <div class="label">桥架端口:</div>
+ <div class="value">{{ device_info.networkPort }}</div>
+ </div>
+ <div class="each">
+ <div class="label">交换机名字:</div>
+ <div class="value">{{ device_info.switchName }}</div>
+ </div>
+ <div class="each">
+ <div class="label">交换机端口:</div>
+ <div class="value">{{ device_info.port }}</div>
+ </div>
+ <div class="each">
+ <div class="label">名称:</div>
+ <div class="value">{{ device_info.clhwName }}</div>
+ </div>
+ <div class="each">
+ <div class="label">类型:</div>
+ <div class="value">{{ device_info.clhwTier }}</div>
+ </div>
+ <div class="each">
+ <div class="label">操作系统:</div>
+ <div class="value">{{ device_info.clhwOperating_System }}</div>
+ </div>
+ </div>
+ </div>
+ <div class="button-del-port" @click="delPort()">删除</div>
+ <div class="close" @click="handleClose"></div>
+ </div>
+</template>
+<script>
+export default {
+ props: {
+
+ show_info: {
+ type: Boolean,
+ default() {
+ return false;
+ },
+ },
+
+ device_info: {
+ type: Object,
+ default() {
+ return {};
+ },
+ },
+
+ configs: {
+ type: Object,
+ default() {
+ return {};
+ },
+ },
+
+ datamap: {
+ type: Object,
+ default() {
+ return {};
+ },
+ },
+ devicelist: {
+ type: Array,
+ default() {
+ return [];
+ },
+ },
+ width: {
+ type: Number,
+ default() {
+ return 4;
+ },
+ },
+
+ code: "",
+ areacode: "",
+ current_show_id: "",
+ grouplevel: {
+ type: Number,
+ default() {
+ return 0;
+ },
+ },
+ status_indrag: false,
+ current_drag_index: {
+ type: Object,
+ default() {
+ return {};
+ },
+ },
+
+ },
+
+ watch: {
+ // 监听 props 的变化并同步到 data
+ show_info(newVal) {
+ this.local_show_info = newVal;
+ },
+ },
+
+ methods: {
+
+ toSwitchInfo() {
+ this.$emit("toSwitchInfo",this.device_info);
+ },
+ async delPort(index) {
+ await this.$modal.confirm("是否删除此端口");
+ this.$emit("delPort", this.device_info);
+ },
+ async statusPort(index) {
+ await this.$modal.confirm("是否设置此端口状态为正常");
+ this.$emit("statusPort",this.device_info);
+ },
+
+ handleClose(){
+ this.local_show_info=false
+ },
+ },
+ data() {
+ return {
+ local_show_info: false,
+ current_show_info: {
+ status:"",
+ ip:"",
+ mac:"",
+ networkPort:"",
+ switchName:"",
+ port:"",
+ clhwName:"",
+ clhwTier:"",
+ clhwOperating_System:""
+ },
+ };
+ },
+};
+</script>
+<style lang="scss" scoped>
+.device-info {
+ cursor: default;
+ background-image: url("../assets/area/device-info-bg.svg");
+ background-size: 100% 100%;
+ height: 40.4rem;
+ width: 49rem;
+ position: absolute;
+ // top: -31.5rem;
+ top: -44.7rem;
+ transform: translate(-50%, 0%);
+ left: 50%;
+ z-index: 120;
+ padding: 3.1rem;
+ padding-top: 2.5rem;
+ padding-left: 1.6rem;
+ padding-right: 1.6rem;
+
+ .title {
+ height: 2.5rem;
+ font-size: 1.8rem;
+ font-family: PingFangSC-Semibold, PingFang SC;
+ font-weight: 600;
+ color: #265696;
+ line-height: 2.5rem;
+ text-align: left;
+ margin-bottom: 0.5rem;
+ }
+
+ .each {
+ display: flex;
+ height: 2rem;
+ font-size: 1.4rem;
+ font-family: PingFangSC-Regular, PingFang SC;
+ font-weight: 400;
+ color: #265696;
+ line-height: 2rem;
+
+ .label {
+ margin-right: 1rem;
+ text-align: left;
+ }
+
+ .value {
+ }
+ }
+
+ .close {
+ background-image: url("../assets/area/close.svg");
+ background-size: 100% 100%;
+ position: absolute;
+ width: 1.2rem;
+ height: 1.2rem;
+ top: 3rem;
+ right: 2rem;
+ }
+ .button-to-switch {
+ cursor: pointer;
+ width: 5.9rem;
+ height: 2.2rem;
+ border-radius: 0.2rem;
+ border: 0.1rem solid #278afa;
+ font-size: 1.2rem;
+ font-family: PingFangSC-Regular, PingFang SC;
+ font-weight: 400;
+ color: #278afa;
+ line-height: 2.2rem;
+ position: absolute;
+ right: 9.2rem;
+ bottom: 4rem;
+ }
+
+ .button-to-switch:hover {
+ color: #fff;
+ background-color: #278afa;
+ }
+ .button-to-check {
+ cursor: pointer;
+ width: 5.2rem;
+ height: 2.2rem;
+ border-radius: 0.2rem;
+ border: 0.1rem solid rgb(15, 243, 76);
+ font-size: 1.2rem;
+ font-family: PingFangSC-Regular, PingFang SC;
+ font-weight: 400;
+ color: rgb(2, 76, 22);
+ line-height: 2.2rem;
+ position: absolute;
+
+ right: 16.2rem;
+ bottom: 4rem;
+ }
+ .button-to-check:hover {
+ color: #fff;
+ background-color: rgb(15, 243, 76);
+ }
+ .button-del-port {
+ cursor: pointer;
+ width: 5.2rem;
+ height: 2.2rem;
+ border-radius: 0.2rem;
+ border: 0.1rem solid rgb(243, 15, 15);
+ font-size: 1.2rem;
+ font-family: PingFangSC-Regular, PingFang SC;
+ font-weight: 400;
+ color: rgb(243, 15, 15);
+ line-height: 2.2rem;
+ position: absolute;
+ right: 2.2rem;
+ bottom: 4rem;
+ }
+ .button-del-port:hover {
+ color: #fff;
+ background-color: rgb(243, 15, 15);
+ }
+ }
+.info-container {
+ display: flex;
+ justify-content: space-between;
+ height:100%;
+}
+
+.info-block {
+ width: 45%; /* Adjust the width as needed */
+}
+</style>
\ No newline at end of file
diff --git a/src/views/area/server-info.vue b/src/views/area/server-info.vue
index 448faff..3f61aea 100644
--- a/src/views/area/server-info.vue
+++ b/src/views/area/server-info.vue
@@ -75,8 +75,11 @@
? 'space-text-red'
: '',
item.info && item.info.statusInt == 1 ? 'space-text-yellow' : '',
- ]" v-if="item.info">
+ ]" v-if="item.info" @click="showDeviceInfo(index,item,$event)">
{{ item.info.networkPort || "-" }}
+ <device-info-delete v-show="selectedIndex === item.info.id " :show_info="show_device_info"
+ :device_info="cur_device_info" @delPort="delPort"
+ ></device-info-delete>
</div>
<div class="port-tip">{{ item.index }}</div>
</div>
@@ -131,6 +134,7 @@
import equAddForm from "@/components/equ-add-form.vue";
+import deviceInfoDelete from "@/components/device-info-delete";
import {
getAreaServeInfo,
getFaultInfo,
@@ -147,7 +151,7 @@
export default {
- components: {equAddForm},
+ components: {equAddForm,deviceInfoDelete},
props: {
serve_info: {},
serve_select:{},
@@ -168,7 +172,11 @@
areas: [],
device_list: [],
// serve_info: {},
-
+ isDragging: false,
+ selectedIndex: null,
+ cur_device_info: null, // 当前的设备信息
+ cur_item:null,// 当前的element
+ show_device_info: false, // 展示设备信息
};
},
created() {
@@ -226,6 +234,7 @@
this.cabinetName = info.cabinetName;
},
async update_server_info(code,name) {
+ debugger;
// name 是交换机
console.log("info",code,name);
this.$modal.loading("加载中");
@@ -255,8 +264,9 @@
});
}
// console.log("this.activateSwitchPorts", this.activateSwitchPorts);
+ debugger;
this.dialog_activateSwitchPorts = true;
- this.cabinetName = cabinetName;
+ this.cabinetName = name;
},
click_item_add() {
console.log("this.$refs.equAddForm", this.$refs.equAddForm);
@@ -269,6 +279,36 @@
}
this.$refs.equAddForm && this.$refs.equAddForm.openConfigform(this.code,this.cabinetName,this.cabinetNameForOpen,config);
},
+ showDeviceInfo(index, item, event) {
+ event.stopPropagation(); // 阻止事件冒泡
+ if (item.info) {
+ // 如果点击的是同一个元素，则切换显示状态
+ if (this.selectedIndex === item.info.id) {
+ this.show_device_info = !this.show_device_info;
+ } else {
+ // 切换到新元素，自动关闭之前的
+ this.selectedIndex = item.info.id;
+ this.show_device_info = true;
+ this.cur_device_info = item.info;
+ }
+ }
+ },
+ async delPort(info) {
+ var json = {
+ id: info.id,
+ operateType: 4,
+ networkPort: info.name,
+ };
+ this.$modal.loading("删除中");
+
+ const data = await delport(json);
+ console.log("info", info);
+ this.update_server_info(info.areaCode, info.switchName);
+
+ // this.$modal.closeLoading();
+ // this.initializeElements();
+ // this.handleBindElementsItems()
+ },
},
};
</script>
--
Gitblit v1.9.3