From 3fc7f383b437b6c579b625f83639c864b33b97fa Mon Sep 17 00:00:00 2001
From: cloudroam <cloudroam>
Date: 星期五, 15 十一月 2024 14:35:33 +0800
Subject: [PATCH] add:1版本
---
src/components/equ-add-form.vue | 17 +++
src/views/area/chart-itm.vue | 46 +++++++++
src/views/area/tj-container.vue | 8 +
src/views/area/server-info.vue | 18 +++
src/views/screen1/components/chart-itm.vue | 89 +++++++++++++++--
src/components/bridge.vue | 67 ++++++++++++-
src/views/screen1/itm-left.vue | 4
src/views/area/main-container.vue | 1
8 files changed, 227 insertions(+), 23 deletions(-)
diff --git a/src/components/bridge.vue b/src/components/bridge.vue
index 773d0b8..31873e3 100644
--- a/src/components/bridge.vue
+++ b/src/components/bridge.vue
@@ -72,7 +72,9 @@
class="device-info"
@click="show_info = false"
>
- <div class="title">接口</div>
+ <div class="info-container">
+ <div class="info-block">
+ <div class="title">上一次信息</div>
<div class="each">
<div class="label">网络连接性:</div>
<div class="value">{{ current_show_info.status }}</div>
@@ -108,6 +110,47 @@
<div class="each">
<div class="label">操作系统:</div>
<div class="value">{{ current_show_info.clhwOperating_System }}</div>
+ </div>
+ </div>
+ <div class="info-block">
+ <div class="title">当前信息</div>
+ <div class="each">
+ <div class="label">网络连接性:</div>
+ <div class="value">{{ current_show_info.status }}</div>
+ </div>
+ <div class="each">
+ <div class="label">IP地址:</div>
+ <div class="value">{{ current_show_info.ip || "" }}</div>
+ </div>
+ <div class="each">
+ <div class="label">Mac:</div>
+ <div class="value">{{ current_show_info.mac }}</div>
+ </div>
+ <div class="each">
+ <div class="label">桥架端口:</div>
+ <div class="value">{{ current_show_info.networkPort }}</div>
+ </div>
+ <div class="each">
+ <div class="label">交换机名字:</div>
+ <div class="value">{{ current_show_info.switchName }}</div>
+ </div>
+ <div class="each">
+ <div class="label">交换机端口:</div>
+ <div class="value">{{ current_show_info.port }}</div>
+ </div>
+ <div class="each">
+ <div class="label">名称:</div>
+ <div class="value">{{ current_show_info.clhwName }}</div>
+ </div>
+ <div class="each">
+ <div class="label">类型:</div>
+ <div class="value">{{ current_show_info.clhwTier }}</div>
+ </div>
+ <div class="each">
+ <div class="label">操作系统:</div>
+ <div class="value">{{ current_show_info.clhwOperating_System }}</div>
+ </div>
+ </div>
</div>
<div class="button-to-switch" @click="toSwitchInfo(index)">交换机</div>
<div class="button-del-port" @click="delPort(index)">删除</div>
@@ -434,11 +477,15 @@
background-image: url("../assets/area/device-info-bg.svg");
/* background-color: #a6c6e5; */
background-size: 100% 100%;
- height: 24.4rem;
- width: 29rem;
+ //height: 24.4rem;
+ height: 39.4rem;
+ //width: 29rem;
+ width: 49rem;
position: absolute;
- top: -31.5rem;
- transform: translate(-50%, 0%);
+ //top: -31.5rem;
+ top: -46.5rem;
+ //transform: translate(-50%, 0%);
+ transform: translate(-48%, 0%);
left: 50%;
z-index: 120;
padding: 3.1rem;
@@ -571,4 +618,14 @@
background-image: url("../assets/area/space-text-gray.svg") !important;
}
}
+
+.info-container {
+ display: flex;
+ justify-content: space-between;
+}
+
+.info-block {
+ width: 45%; /* Adjust the width as needed */
+}
+
</style>
\ No newline at end of file
diff --git a/src/components/equ-add-form.vue b/src/components/equ-add-form.vue
index a3be8e9..b216911 100644
--- a/src/components/equ-add-form.vue
+++ b/src/components/equ-add-form.vue
@@ -220,6 +220,23 @@
this.open = !this.open;
}
},
+ openConfigform(code, cabinetName) {
+ if (this.open) {
+ this.open = !this.open;
+ } else {
+ //展开，显示表格
+ this.locInfo = {};
+ this.selectcode = code;
+ console.log("this.locInfo", this.locInfo);
+ this.name = cabinetName;
+ this.port = this.locInfo.port || "";
+ this.networkPort = this.locInfo.name || "";
+ this.macAddress = this.locInfo.macAddress || "";
+ this.ipAddress = this.locInfo.ipAddress || "";
+
+ this.open = !this.open;
+ }
+ },
},
watch: {
code(newval, oldval) {
diff --git a/src/views/area/chart-itm.vue b/src/views/area/chart-itm.vue
index 7a45094..439448e 100644
--- a/src/views/area/chart-itm.vue
+++ b/src/views/area/chart-itm.vue
@@ -13,6 +13,14 @@
<div class="chart-status-dot red"></div>
<div class="chart-status-desc">异常连接数</div>
</div>
+ <div class="flex1 flex tooltip">
+ <div class="chart-status-dot blue"></div>
+ <div class="chart-status-desc">从有到无</div>
+ </div>
+ <div class="flex1 flex tooltip">
+ <div class="chart-status-dot purple"></div>
+ <div class="chart-status-desc">从无到有</div>
+ </div>
</div>
<div class="sub-div"></div>
<div class="chart-itm-equ-echarts" :id="eid"></div>
@@ -62,7 +70,7 @@
radius: ["55%", "68%"],
center: ["50%", "55%"],
// radius: "75%",
- avoidLabelOverlap: false,
+ avoidLabelOverlap: true,
itemStyle: {
borderRadius: 10,
borderColor: "#fff",
@@ -146,6 +154,42 @@
},
},
},
+ {
+ value: this.info.beSomething || 0,
+ // name: "异常连接数",
+ itemStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0.2, 1, 0.3, 0, [
+ {
+ offset: 1,
+ color: "rgba(52, 90, 255, 1)",
+ },
+ {
+ offset: 0,
+ color: "rgba(241, 76, 3, 1)",
+ },
+ ]),
+ },
+ },
+ },
+ {
+ value: this.info.beNothing || 0,
+ // name: "异常连接数",
+ itemStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0.2, 1, 0.3, 0, [
+ {
+ offset: 1,
+ color: "rgba(128, 0, 128, 1)",
+ },
+ {
+ offset: 0,
+ color: "rgba(241, 76, 3, 1)",
+ },
+ ]),
+ },
+ },
+ },
],
},
],
diff --git a/src/views/area/main-container.vue b/src/views/area/main-container.vue
index 0bcef3c..48c0a43 100644
--- a/src/views/area/main-container.vue
+++ b/src/views/area/main-container.vue
@@ -328,7 +328,6 @@
this.$refs.equAddForm && this.$refs.equAddForm.openform(locInfo);
},
async showServeInfo(info) {
- debugger;
//展示交换机全部端口
console.log("showServeInfo", info);
//弹出框展示全部端口，并且每个端口的情况
diff --git a/src/views/area/server-info.vue b/src/views/area/server-info.vue
index e978738..7266b40 100644
--- a/src/views/area/server-info.vue
+++ b/src/views/area/server-info.vue
@@ -65,6 +65,7 @@
<el-dialog append-to-body :modal="false"
:visible.sync="dialog_activateSwitchPorts" title="交换机端口情况" class="dialog_activateSwitchPorts">
+ <div><el-button type="primary" @click="click_item_add" style="margin-bottom:6rem" >新增</el-button></div>
<div v-for="(infos, index2) of activateSwitchPorts" :key="index2" class="port-items">
<div class="port-item" v-for="(item, index) of infos" :key="index">
<div :key="index" class="space-text" :class="[
@@ -113,7 +114,8 @@
</el-table>
</el-dialog>
-
+ <equ-add-form ref="equAddForm" :code="code" :areas="areas" :init_device_list="device_list"
+ @update="update_map"></equ-add-form>
</div>
</template>
<script>
@@ -141,6 +143,7 @@
serve_info: {},
serve_select:{},
code:"",
+ cabinetName:"",
},
//根据
//后端存储的是世界坐标，初次时候也是世界坐标，最小单位为0.01吧，这个间距或者大小，不考虑实际像素
@@ -152,6 +155,8 @@
dialog_activateSwitchPorts: false,
activateSwitchPorts:{},
switchAllDetialInfos:[],
+ areas: [],
+ device_list: [],
// serve_info: {},
};
@@ -162,6 +167,10 @@
console.log("this.serve_select:",this.serve_select)
},
mounted() {
+ getAreaTjData().then((res) => {
+ // console.log('areas',res.switchAreaInfo || [])
+ this.areas = res.switchAreaInfo || [];
+ });
},
destroyed() {
@@ -169,7 +178,6 @@
},
methods: {
async showServeInfo(info) {
- debugger;
//展示交换机全部端口
console.log("showServeInfo", info);
//弹出框展示全部端口，并且每个端口的情况
@@ -202,6 +210,12 @@
}
// console.log("this.activateSwitchPorts", this.activateSwitchPorts);
this.dialog_activateSwitchPorts = true;
+ this.cabinetName = info.cabinetName;
+ },
+ click_item_add() {
+ console.log("this.$refs.equAddForm", this.$refs.equAddForm);
+ console.log("this.areas", this.areas);
+ this.$refs.equAddForm && this.$refs.equAddForm.openConfigform(this.code,this.cabinetName);
},
},
};
diff --git a/src/views/area/tj-container.vue b/src/views/area/tj-container.vue
index 35f069e..0fed85d 100644
--- a/src/views/area/tj-container.vue
+++ b/src/views/area/tj-container.vue
@@ -24,6 +24,14 @@
<div class="num r">{{ info.alarm || 0 }}</div>
<div class="desc2">故障</div>
</div>
+ <div class="container-equ-num-item">
+ <div class="num r">{{ info.beSomething || 0 }}</div>
+ <div class="desc2">从有到无</div>
+ </div>
+ <div class="container-equ-num-item">
+ <div class="num r">{{ info.beNothing || 0 }}</div>
+ <div class="desc2">从无到有</div>
+ </div>
</div>
<div class="tj-line"></div>
diff --git a/src/views/screen1/components/chart-itm.vue b/src/views/screen1/components/chart-itm.vue
index b2509d5..b369457 100644
--- a/src/views/screen1/components/chart-itm.vue
+++ b/src/views/screen1/components/chart-itm.vue
@@ -7,11 +7,19 @@
</div>
<div class="flex1 flex tooltip">
<div class="chart-status-dot yellow"></div>
- <div class="chart-status-desc">>警告设备</div>
+ <div class="chart-status-desc">警告设备</div>
</div>
<div class="flex1 flex tooltip">
<div class="chart-status-dot red"></div>
<div class="chart-status-desc">异常设备</div>
+ </div>
+ <div class="flex1 flex tooltip">
+ <div class="chart-status-dot blue"></div>
+ <div class="chart-status-desc">从有到无</div>
+ </div>
+ <div class="flex1 flex tooltip">
+ <div class="chart-status-dot purple"></div>
+ <div class="chart-status-desc">从无到有</div>
</div>
</div>
<div class="sub-div"></div>
@@ -45,14 +53,16 @@
methods: {
initChart() {
var value = 0.56;
- var v1 = 0, v2 = 0, v3 = 0;
+ var v1 = 0, v2 = 0, v3 = 0,v4 = 0,v5 = 0;
for (var item of this.areas) {
- v1 += parseInt(item.areaStatic.normal || 0)
- v2 += parseInt(item.areaStatic.warn || 0)
- v3 += parseInt(item.areaStatic.alarm || 0)
+ v1 += parseInt(item.areaStatic.normal || 0);
+ v2 += parseInt(item.areaStatic.warn || 0);
+ v3 += parseInt(item.areaStatic.alarm || 0);
+ v4 += parseInt(item.areaStatic.beSomething || 0);
+ v5 += parseInt(item.areaStatic.beNothing || 0);
}
- this.total = v1 + v2 + v3
- // console.log('v1', v1, v2, v3)
+ this.total = v1 + v2 + v3 + v4 + v5
+ console.log('v1', v1, 'v2', v2, 'v3', v3, 'v4', v4, 'v5', v5);
this.option = {
tooltip: {
@@ -63,11 +73,12 @@
{
// name: 'Access From',
type: "pie",
- silent: "ture",
+ minAngle: 0, // 最小角度设置为0.01度
+ silent: true,
radius: ["55%", "68%"],
center: ["50%", "55%"],
// radius: "75%",
- avoidLabelOverlap: false,
+ avoidLabelOverlap: true,
itemStyle: {
borderRadius: 10,
borderColor: "#fff",
@@ -79,6 +90,11 @@
align: "left",
color: "rgba(108, 153, 190, 1)",
+ labelLine: {
+ show: true,
+ length: 5, // 引导线长度
+ length2: 10 // 第二段引导线长度
+ },
// rich: {
// time: {
// fontSize: 10,
@@ -95,7 +111,13 @@
fontWeight: "bold",
},
},
-
+ // data: [
+ // { value: v1, itemStyle: { normal: this.getGradient("rgba(150, 222, 194, 1)", "rgba(6, 188, 117, 1)") } },
+ // { value: v2, itemStyle: { normal: this.getGradient("rgba(236, 197, 13, 1)", "rgba(221, 175, 1, 1)") } },
+ // { value: v3, itemStyle: { normal: this.getGradient("rgba(249, 109, 0, 1)", "rgba(241, 76, 3, 1)") } },
+ // { value: v4, itemStyle: { normal: this.getGradient("rgba(249, 109, 0, 1)", "rgba(241, 76, 3, 1)") } },
+ // { value: v5, itemStyle: { normal: this.getGradient("rgba(128, 0, 128, 1)", "rgba(241, 76, 3, 1)") } }
+ // ]
data: [
{
value: v1,
@@ -134,7 +156,7 @@
},
},
{
- value: v3,
+ value: parseInt(v3),
// name: "异常连接数",
itemStyle: {
normal: {
@@ -142,6 +164,40 @@
{
offset: 1,
color: "rgba(249, 109, 0, 1)",
+ },
+ {
+ offset: 0,
+ color: "rgba(241, 76, 3, 1)",
+ },
+ ]),
+ },
+ },
+ },
+ {
+ value: parseInt(v4),
+ itemStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0.2, 1, 0.3, 0, [
+ {
+ offset: 1,
+ color: "rgba(52, 90, 255, 1)",
+ },
+ {
+ offset: 0,
+ color: "rgba(241, 76, 3, 1)",
+ },
+ ]),
+ },
+ },
+ },
+ {
+ value: parseInt(v5),
+ itemStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0.2, 1, 0.3, 0, [
+ {
+ offset: 1,
+ color: "rgba(128, 0, 128, 1)",
},
{
offset: 0,
@@ -175,13 +231,13 @@
position: relative;
.tooltips {
- width: 21rem;
+ width: 100%;
height: 2.25rem;
background: #e3edf8;
border-radius: 1.42rem;
position: absolute;
bottom: -3rem;
- left: calc((100% - 21rem) / 2);
+ //left: calc((100% - 21rem) / 2);
.tooltip {
margin: 0 auto;
@@ -208,6 +264,13 @@
background: rgba(223, 177, 2, 1);
}
+ .chart-status-dot.blue {
+ background: rgba(52, 90, 255, 1);
+ }
+
+ .chart-status-dot.purple {
+ background: rgba(128, 0, 128, 1);
+ }
.chart-status-desc {
font-size: 1rem;
font-family: PingFangSC-Regular, PingFang SC;
diff --git a/src/views/screen1/itm-left.vue b/src/views/screen1/itm-left.vue
index a11097a..3f2cce1 100644
--- a/src/views/screen1/itm-left.vue
+++ b/src/views/screen1/itm-left.vue
@@ -90,7 +90,9 @@
this.$router.push({path: "/area", query: {code: res.areaCode, networkPort: res.networkPort || ''}});
} else {
- this.$message.warning('未找到对应区域')
+ // this.$message.warning('未找到对应区域')
+ await this.$modal.confirm('未找到对应区域是否前往交换机机柜引导页面？')
+ this.$router.push({path: "/switch-board"});
}
}
},
--
Gitblit v1.9.3