From 0967b9f3ddaaf901a68d78edb7a80df0245425bd Mon Sep 17 00:00:00 2001
From: 陶杰 <1378534974@qq.com>
Date: 星期四, 14 十一月 2024 09:52:36 +0800
Subject: [PATCH] 1.交换机引导页面
---
src/views/screen1/itm.vue | 77 ++++
src/views/area/server-info.vue | 622 +++++++++++++++++++++++++++++++++++++++++
src/views/area/switch-board.vue | 50 ++-
src/views/area/main-container.vue | 119 -------
4 files changed, 738 insertions(+), 130 deletions(-)
diff --git a/src/views/area/main-container.vue b/src/views/area/main-container.vue
index 4ea077f..0bcef3c 100644
--- a/src/views/area/main-container.vue
+++ b/src/views/area/main-container.vue
@@ -76,123 +76,21 @@
</div>
<equ-add-form ref="equAddForm" :code="code" :areas="areas" :init_device_list="device_list"
@update="update_map"></equ-add-form>
- <!-- 点击设备可以前往服务器详情页看看（debug) -->
- <div v-if="!hideServe" class="serve-item" @click="() => {
- // stopScrolling();
- //$nextTick(() => {
- // hideServe = !hideServe;
- //});
- }
- ">
- <div class="serve-img" v-if="serve_info.cabinetInfoStatic">
- <div class="each-item-container">
- <div v-for="(serve, itemindex) in serve_info.cabinetInfoStatic" @click="showServeInfo(serve)" :key="itemindex"
- class="each-item" :class="[
- serve.cabinetName == serve_select.switchName
- ? 'each-item-default'
- : '',
- ]">
- <div class="desc">
- <div class="title">{{ serve.cabinetName }}</div>
- <div class="value">设备数量: {{ serve.normal }}</div>
- <div class="tip-msg">
- <div class="title">{{ serve.cabinetName }}</div>
- <div class="desc">正常设备：<span class="f-n">{{ serve.normal || 0 }}</span></div>
- <div class="desc">黄色预警：<span class="f-y">{{ serve.waring || 0 }}</span></div>
- <div class="desc">红色预警：<span class="f-r">{{ serve.exception || 0 }}</span></div>
+ <server-info v-if="!hideServe"
+ :serve_info="serve_info"
+ :serve_select="serve_select"
+ :code="code"></server-info>
- <!-- <div class="desc">详细信息：一小时后磁盘满</div> -->
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="tj-item">
- <div class="tj-nums">
- <div class="title">{{ serve_info.cabinetName || "-" }}</div>
- <div class="flex">
- <div class="equ-num-item a">
- <div class="num g">{{ serve_info.terminalCount || 0 }}</div>
- <div class="desc2">正常设备</div>
- </div>
- <div class="equ-num-item">
- <div class="num y">{{ serve_info.seitchCount || 0 }}</div>
- <div class="desc2">黄色预警</div>
- </div>
- <div class="equ-num-item c">
- <div class="num r">{{ serve_info.exceptionCount || 0 }}</div>
- <div class="desc2">红色预警</div>
- </div>
- </div>
- </div>
- <div class="tj-line" v-if="false"></div>
- <div class="tj-list" v-if="false">
- <div class="service-list-arr" id="my_serve_info_list">
- <div class="service-list-arr-item" v-for="(item, index) of data_service_list" :key="index">
- <div class="time">{{ item.time }}</div>
- <div class="flex1 service-list-arr-item_content" v-html="item.desc"></div>
- <div class="dot" :class="item.status"></div>
- </div>
- </div>
- </div>
- </div>
- </div>
<div class="back-button-left-bottom" @click="backToTop">返回</div>
- <el-dialog :visible.sync="dialog_activateSwitchPorts" title="交换机端口情况" class="dialog_activateSwitchPorts">
- <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="[
- (item.info && item.info.statusInt == 2) ||
- (item.info && item.info.statusInt == 3) ||
- (item.info && item.info.statusInt == 4)
- ? 'space-text-red'
- : '',
- item.info && item.info.statusInt == 1 ? 'space-text-yellow' : '',
- ]" v-if="item.info">
- {{ item.info.networkPort || "-" }}
- </div>
- <div class="port-tip">{{ item.index }}</div>
- </div>
- </div>
- <!-- 全部的信息 -->
- <el-table
- :data="switchAllDetialInfos"
- border
- style="width: 100%;max-height: 650px;overflow-y: scroll;">
- <el-table-column
- prop="deviceName"
- label="device name">
- </el-table-column>
- <el-table-column
- prop="deviceNameDNS"
- label="DNS">
- </el-table-column>
- <el-table-column
- prop="ipAddress"
- label="ip address">
- </el-table-column>
- <el-table-column
- width="180"
- prop="macAddress"
- label="mac address">
- </el-table-column>
- <el-table-column
- prop="nasPort"
- label="nas port">
- </el-table-column>
- <el-table-column
- prop="switchType"
- label="switch type">
- </el-table-column>
- </el-table>
-
- </el-dialog>
+
</div>
</template>
<script>
import tjContainer from "./tj-container";
import bridge from "@/components/bridge";
+import serverInfo from "./server-info";
import equAddForm from "@/components/equ-add-form.vue";
+
import {
getAreaServeInfo,
getFaultInfo,
@@ -208,7 +106,7 @@
import Bridge from "@/components/bridge.vue";
export default {
- components: {tjContainer, bridge, equAddForm, Bridge},
+ components: {tjContainer, bridge, equAddForm, Bridge,serverInfo},
props: {
item_show: false,
code: "",
@@ -430,6 +328,7 @@
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
new file mode 100644
index 0000000..e978738
--- /dev/null
+++ b/src/views/area/server-info.vue
@@ -0,0 +1,622 @@
+<template>
+ <div class="server-container">
+ <!-- 点击设备可以前往服务器详情页看看（debug) -->
+ <!-- <equ-add-form ref="equAddForm" :code="code" :areas="areas" :init_device_list="device_list" @update="update_map"></equ-add-form> -->
+ <div class="serve-item" @click="() => {
+ // stopScrolling();
+ //$nextTick(() => {
+ // hideServe = !hideServe;
+ //});
+ }
+ ">
+ <div class="serve-img" v-if="serve_info.cabinetInfoStatic">
+ <div class="each-item-container">
+ <div v-for="(serve, itemindex) in serve_info.cabinetInfoStatic" @click="showServeInfo(serve)" :key="itemindex"
+ class="each-item" :class="[
+ serve.cabinetName == serve_select.switchName
+ ? 'each-item-default'
+ : '',
+ ]">
+ <div class="desc">
+ <div class="title">{{ serve.cabinetName }}</div>
+ <div class="value">设备数量: {{ serve.normal }}</div>
+ <div class="tip-msg">
+ <div class="title">{{ serve.cabinetName }}</div>
+ <div class="desc">正常设备：<span class="f-n">{{ serve.normal || 0 }}</span></div>
+ <div class="desc">黄色预警：<span class="f-y">{{ serve.waring || 0 }}</span></div>
+ <div class="desc">红色预警：<span class="f-r">{{ serve.exception || 0 }}</span></div>
+
+ <!-- <div class="desc">详细信息：一小时后磁盘满</div> -->
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="tj-item">
+ <div class="tj-nums">
+ <div class="title">{{ serve_info.cabinetName || "-" }}</div>
+ <div class="flex">
+ <div class="equ-num-item a">
+ <div class="num g">{{ serve_info.terminalCount || 0 }}</div>
+ <div class="desc2">正常设备</div>
+ </div>
+ <div class="equ-num-item">
+ <div class="num y">{{ serve_info.seitchCount || 0 }}</div>
+ <div class="desc2">黄色预警</div>
+ </div>
+ <div class="equ-num-item c">
+ <div class="num r">{{ serve_info.exceptionCount || 0 }}</div>
+ <div class="desc2">红色预警</div>
+ </div>
+ </div>
+ </div>
+ <div class="tj-line" v-if="false"></div>
+ <div class="tj-list" v-if="false">
+ <div class="service-list-arr" id="my_serve_info_list">
+ <div class="service-list-arr-item" v-for="(item, index) of data_service_list" :key="index">
+ <div class="time">{{ item.time }}</div>
+ <div class="flex1 service-list-arr-item_content" v-html="item.desc"></div>
+ <div class="dot" :class="item.status"></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <el-dialog append-to-body :modal="false"
+ :visible.sync="dialog_activateSwitchPorts" title="交换机端口情况" class="dialog_activateSwitchPorts">
+ <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="[
+ (item.info && item.info.statusInt == 2) ||
+ (item.info && item.info.statusInt == 3) ||
+ (item.info && item.info.statusInt == 4)
+ ? 'space-text-red'
+ : '',
+ item.info && item.info.statusInt == 1 ? 'space-text-yellow' : '',
+ ]" v-if="item.info">
+ {{ item.info.networkPort || "-" }}
+ </div>
+ <div class="port-tip">{{ item.index }}</div>
+ </div>
+ </div>
+ <!-- 全部的信息 -->
+ <el-table
+ :data="switchAllDetialInfos"
+ border
+ style="width: 100%;max-height: 650px;overflow-y: scroll;">
+ <el-table-column
+ prop="deviceName"
+ label="device name">
+ </el-table-column>
+ <el-table-column
+ prop="deviceNameDNS"
+ label="DNS">
+ </el-table-column>
+ <el-table-column
+ prop="ipAddress"
+ label="ip address">
+ </el-table-column>
+ <el-table-column
+ width="180"
+ prop="macAddress"
+ label="mac address">
+ </el-table-column>
+ <el-table-column
+ prop="nasPort"
+ label="nas port">
+ </el-table-column>
+ <el-table-column
+ prop="switchType"
+ label="switch type">
+ </el-table-column>
+ </el-table>
+
+ </el-dialog>
+
+ </div>
+</template>
+<script>
+
+
+import equAddForm from "@/components/equ-add-form.vue";
+import {
+ getAreaServeInfo,
+ getFaultInfo,
+ getDeviceList,
+ updateDevicePosition,
+ getBridgeInfos,
+ delport,
+ statusPort,
+} from "@/api/area";
+import {getAreaTjData} from "@/api/area";
+
+
+import Bridge from "@/components/bridge.vue";
+
+export default {
+
+ components: {equAddForm},
+ props: {
+ serve_info: {},
+ serve_select:{},
+ code:"",
+ },
+ //根据
+ //后端存储的是世界坐标，初次时候也是世界坐标，最小单位为0.01吧，这个间距或者大小，不考虑实际像素
+ //渲染时候，需要把 坐标，变为实际rem等像素坐标
+ //每个厂房大小不一样，先用一定的数代表吧.
+
+ data() {
+ return {
+ dialog_activateSwitchPorts: false,
+ activateSwitchPorts:{},
+ switchAllDetialInfos:[],
+ // serve_info: {},
+
+ };
+ },
+ created() {
+ console.log("serve_infoserve_infoserve_infoserve_info")
+ console.log("this.serve_info:",this.serve_info)
+ console.log("this.serve_select:",this.serve_select)
+ },
+ mounted() {
+
+ },
+ destroyed() {
+
+ },
+ methods: {
+ async showServeInfo(info) {
+ debugger;
+ //展示交换机全部端口
+ console.log("showServeInfo", info);
+ //弹出框展示全部端口，并且每个端口的情况
+ //获取一下信息
+ this.$modal.loading("加载中");
+ const res = await getDeviceList(this.code, info.cabinetName);
+ this.$modal.closeLoading();
+ console.log("serveinfo", res);
+ // this.activateSwitchPorts = res.switchDetialInfos || [];
+ this.activateSwitchPorts = {};
+ //分两行，每行24个
+ this.switchAllDetialInfos = res.switchAllDetialInfos || []
+ var activaePorts = {};
+ if (res.switchDetialInfos) {
+ for (var item of res.switchDetialInfos) {
+ if (item.port) activaePorts[item.port] = item;
+ }
+ }
+ console.log("activaePorts", activaePorts);
+ for (var i = 0; i <= 47; i++) {
+ var level = "" + parseInt(i / 24);
+ if (!this.activateSwitchPorts["" + level]) {
+ this.activateSwitchPorts["" + level] = [];
+ }
+ this.activateSwitchPorts["" + level].push({
+ index: "" + (i + 1),
+ name: "",
+ info: activaePorts["" + (i + 1)] || undefined,
+ });
+ }
+ // console.log("this.activateSwitchPorts", this.activateSwitchPorts);
+ this.dialog_activateSwitchPorts = true;
+ },
+ },
+};
+</script>
+<style lang="scss" scoped>
+@import "../../common/itm_svg.scss";
+@import "../../common/area-bg.scss";
+$width-screen1: 174.17rem;
+
+.server-container {
+
+ margin: 0 auto;
+ margin-bottom: 5rem;
+
+ .equipments-container {
+ background: #d3e3f3;
+ position: relative;
+ margin: 0 auto;
+ cursor: pointer;
+ max-width: 100%;
+ max-height: 100vh;
+
+ .equipment-item {
+ cursor: pointer;
+ position: absolute;
+ width: 5rem;
+ height: 5rem;
+ background-size: 100% 100%;
+ filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.2));
+ }
+ }
+
+ .serve-item {
+ margin: 0 auto;
+ display: flex;
+ width: fit-content;
+ cursor: pointer;
+
+ .serve-img {
+ margin-right: 2rem;
+ background-image: url("../../assets/equipment/serve.svg");
+ background-image: url("../../assets/equipment/serve_v2.png");
+ background-size: 100% 100%;
+ width: 30.3rem;
+ height: 62.3rem;
+
+ /* padding-left: 1rem; */
+ .each-item-container {
+ margin-top: 21rem;
+ margin-left: 3rem;
+
+ .each-item {
+ background-image: url("../../assets/equipment/serve_item.png");
+ width: 18.9rem;
+ height: 4.8rem;
+ background-size: 100% 100%;
+ margin-bottom: 0.9rem;
+ color: #265696;
+ position: relative;
+
+ .desc {
+ text-align: left;
+ padding-left: 1rem;
+ padding-top: 0.5rem;
+
+ .title {
+ font-weight: 600;
+ margin-bottom: 0.8rem;
+ /* */
+ }
+
+ .value {
+ }
+ }
+ }
+ .each-item:hover::before {
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+
+ content: "";
+ background-color: #059ce293;
+ }
+
+ .each-item-default::before {
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+
+ content: "";
+ // background-color: #4bb6e854;
+ background-color:rgb(4 255 246 / 41%);
+ }
+ .tip-msg {
+ display: none;
+ position: absolute;
+ left: calc(50% + 5rem); //起始是在body中，横向距左50%的位置
+ top: 55%; //起始是在body中，纵向距上50%的位置，这个点相当于body的中心点，div的左上角的定位
+ min-width: 21rem;
+ height: 13.6rem;
+ background: #f1f9ff;
+ box-shadow: 0.6rem 0.4rem 2.4rem 0rem rgba(56, 92, 131, 0.77);
+ border-radius: 0.6rem;
+ z-index: 2;
+ padding: 1.3rem;
+
+ .title {
+ font-size: 2.5rem;
+ font-family: PingFangSC-Semibold, PingFang SC;
+ font-weight: 600;
+ color: #012b5e;
+ line-height: 3.6rem;
+ text-align: left;
+ margin-bottom: 1rem;
+ text-overflow: ellipsis;
+ /* width: 10rem; */
+ overflow: hidden;
+ word-break: break-all;
+ white-space: nowrap;
+
+ .dot {
+ width: 1.6rem;
+ height: 1.6rem;
+ min-width: 1.6rem;
+ min-height: 1.6rem;
+ /* background: #e20505; */
+ border-radius: 50%;
+ margin-top: 1rem;
+ margin-right: 0.5rem;
+ }
+ }
+
+ .desc {
+ font-size: 1.8rem;
+ font-family: PingFangSC-Regular, PingFang SC;
+ font-weight: 400;
+ color: #666666;
+ line-height: 2rem;
+ text-align: left;
+ /* margin-left: 2.1rem; */
+ margin-top: 0.5rem;
+
+ .f-n {
+ color: #0dbe79;
+ font-weight: 600;
+ }
+
+ .f-r {
+ color: #e10808;
+ font-weight: 600;
+ }
+
+ .f-y {
+ color: #ffc310;
+ font-weight: 600;
+ }
+ }
+ }
+
+ .each-item:hover .tip-msg {
+ display: unset;
+ }
+ }
+ }
+
+ .tj-item {
+ margin-left: 2rem;
+ width: 33.5rem;
+ min-height: 47.5rem;
+ min-height: 17.5rem;
+ height: fit-content;
+ background: #f2f8fd;
+ box-shadow: 0.6rem 0.4rem 2.4rem 0rem rgba(198, 212, 228, 0.38),
+ inset 0rem 0.2rem 0.3rem 0rem rgba(255, 255, 255, 0.5);
+ border-radius: 1rem;
+
+ .tj-nums {
+ padding: 1.8rem;
+
+ .title {
+ font-size: 2.5rem;
+ font-family: PingFangSC-Semibold, PingFang SC;
+ font-weight: 600;
+ color: #265696;
+ line-height: 3.6rem;
+ text-align: left;
+ margin-bottom: 1.8rem;
+ }
+
+ .equ-num-item {
+ margin: 0 auto;
+ text-align: center;
+
+ .desc2 {
+ font-size: 1.6rem;
+ font-family: PingFangSC-Medium, PingFang SC;
+ font-weight: 500;
+ color: #235884;
+ line-height: 2.2rem;
+ }
+
+ .num {
+ font-size: 2.4rem;
+ font-family: Impact;
+ line-height: 2.9rem;
+ }
+
+ .num.g {
+ color: #0dbe79;
+ }
+
+ .num.y {
+ color: #ffc310;
+ }
+
+ .num.r {
+ color: #e10808;
+ }
+ }
+
+ .equ-num-item.a {
+ margin-left: 0;
+ margin-right: auto;
+ }
+
+ .equ-num-item.c {
+ margin-right: 0;
+ margin-left: auto;
+ }
+ }
+
+ .tj-list {
+ padding: 2.2rem;
+ padding-top: 1.4rem;
+
+ .service-list-arr {
+ background-color: #f2f8fd;
+ overflow: hidden;
+ height: 30.3rem;
+
+ .service-list-arr-item {
+ width: 100%;
+ min-height: 3rem;
+ /* margin-top: 2.2rem; */
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ height: fit-content;
+
+ .time {
+ font-size: 1.2rem;
+ font-family: PingFangSC-Medium, PingFang SC;
+ font-weight: 500;
+ color: #a1b6c8;
+ line-height: 1.7rem;
+ margin-right: 1rem;
+ }
+
+ .service-list-arr-item_content {
+ font-family: PingFangSC-Medium, PingFang SC;
+ color: #235884;
+ line-height: 1.17rem;
+ text-align: left;
+ margin-left: 0.4rem;
+ margin-right: 1.5rem;
+ padding-top: 1rem;
+
+ font-size: 1.4rem;
+ font-weight: 500;
+ line-height: 1.4rem;
+ }
+
+ .dot {
+ width: 0.58rem;
+ height: 0.58rem;
+ border-radius: 50%;
+ margin-top: 0.8rem;
+ margin-left: auto;
+ margin-right: 10px;
+ }
+
+ .dot.red {
+ background: #c10b0b;
+ }
+
+ .dot.yellow {
+ background: #fda928;
+ }
+
+ .dot.green {
+ background: #17a537;
+ }
+ }
+ }
+ }
+
+ .tj-line {
+ width: 30.1rem;
+ height: 0.1rem;
+ border: 0.1rem solid #ccdeec;
+ margin: 0 auto;
+ }
+ }
+ }
+
+ .chart-open {
+ width: 6.1rem;
+ height: 7.5rem;
+ background: #e9f4fd;
+ box-shadow: 0.6rem 0.4rem 2.4rem 0rem rgba(198, 212, 228, 0.83),
+ inset 0rem 0.2rem 0.3rem 0rem rgba(255, 255, 255, 0.5);
+ border-radius: 1rem;
+ position: fixed;
+ right: 3rem;
+ top: 50%;
+ transform: translate(0%, 50%);
+ cursor: pointer;
+
+ .img-button {
+ background-size: 100% 100%;
+ background-image: url("../../assets/area/chart-open.svg");
+ width: 2.6rem;
+ height: 2.6rem;
+ transform: translate(-50%, -50%);
+ left: 50%;
+ top: 50%;
+ position: absolute;
+ }
+ }
+}
+</style>
+<!-- 交换机的端口 -->
+<style scoped lang="scss">
+.port-items {
+ display: flex;
+ margin-bottom: 8rem;
+ /* height: 2rem; */
+ width: fit-content;
+
+ .port-item {
+ background: #e9f4fd;
+ border-top: 5px solid #e9f4fd;
+ flex: 1;
+ margin: 0 auto;
+ min-width: 6rem;
+ max-width: 6rem;
+ /* max-width: 6rem; */
+ height: 1.6rem;
+ // background: #fff;
+ // box-shadow: 0rem -2rem 2.1rem 0rem #fff;
+ background-image: url("../../assets/area/space.svg");
+ background-size: 100% 100%;
+ position: relative;
+
+ .port-tip {
+ position: absolute;
+ bottom: -2.5rem;
+ height: 2.5rem;
+ font-size: 1.8rem;
+ font-family: PingFangSC-Semibold, PingFang SC;
+ font-weight: 600;
+ color: #265696;
+ line-height: 2.5rem;
+ text-align: center;
+ /* margin-bottom: 0.5rem; */
+ left: 0;
+ right: 0;
+ }
+
+ .space-text {
+ background-image: url("../../assets/area/space-text.svg");
+ background-size: 100% 100%;
+ min-width: 6rem;
+ min-height: 2.5rem;
+ transform: translate(-50%, 0%);
+ left: 50%;
+ padding-top: 0.5rem;
+ top: -2.5rem;
+ position: absolute;
+ /* line-height: 100%; */
+ /* font-size: 12px; */
+ /* span { */
+ word-break: break-all;
+ word-wrap: break-word;
+ /*但在有些场景中，还需要加上下面这行代码*/
+ white-space: normal;
+ overflow-wrap: anywhere;
+ /* } */
+
+ font-size: 1rem;
+ font-family: PingFangSC-Semibold, PingFang SC;
+ font-weight: 600;
+ color: #3299ff;
+ z-index: 20;
+ }
+
+ .space-text-yellow {
+ color: #e8be19;
+ }
+
+ .space-text-red {
+ color: #e20909;
+ }
+ }
+
+ .port-item:nth-child(6n) {
+ margin-right: 3rem;
+ }
+}
+
+.port-items:nth-child(2n) {
+ margin-bottom: 8rem;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/area/switch-board.vue b/src/views/area/switch-board.vue
index eca53aa..0ab22da 100644
--- a/src/views/area/switch-board.vue
+++ b/src/views/area/switch-board.vue
@@ -2,6 +2,9 @@
<div>
<dv-full-screen-container>
<self-header title="ITM Device Monitoring System"></self-header>
+
+ <server-info v-if="!hideServe" :serve_info="serve_info" :serve_select="serve_select" :code="code"></server-info>
+
<div class="main-container" :style="{
zoom: zoom_main,
width: screen_width + 'rem',
@@ -13,7 +16,7 @@
@mouseup="handleMouseUp"
@mousedown="handleMouseDown"
@mouseleave="handleMouseLeave" -->
- <div id="content" class="equipments-container area-map" :class="['area-map-' + code]" v-show="hideServe"
+ <div id="content" class="equipments-container area-map" v-show="hideServe"
@mousemove="handleMouseMove" @mouseup="handleMouseUp" @mousedown="handleMouseDown"
@mouseleave="handleMouseLeave"
:style="{
@@ -28,15 +31,15 @@
}">
- <div class="serve-item" @click="showCabinetName">
+ <div class="serve-item" >
<div class="serve-img"
v-for="(serverInfo, serverItemindex) in switchCabinets.switchCabinet" :key="serverItemindex"
>
- <div class="cabinetNameDesc">{{ serverInfo.cabinetName }} </div>
+ <div class="cabinetNameDesc" @click="showCabinetName(serverInfo)">{{ serverInfo.cabinetName }} </div>
<div class="each-item-container">
- <div v-for="(serve, itemindex) in serverInfo.cabinetInfoStatic" @click="showServeInfo(serve)" :key="itemindex"
+ <div v-for="(serve, itemindex) in serverInfo.cabinetInfoStatic" :key="itemindex"
class="each-item"
-
+ @click="showCabinetServerInfo(serverInfo,serve)"
>
<div class="desc">
<div class="title">{{ serve.cabinetName }}</div>
@@ -70,6 +73,7 @@
</template>
<script>
import selfHeader from "@/components/header";
+import serverInfo from "./server-info";
import {
getSwitchCabinetInfo,
@@ -79,11 +83,9 @@
export default {
- components: { selfHeader, },
+ components: { selfHeader,serverInfo, },
props: {
- item_show: false,
- code: "",
- query_networkPort: '',
+
},
//根据
//后端存储的是世界坐标，初次时候也是世界坐标，最小单位为0.01吧，这个间距或者大小，不考虑实际像素
@@ -95,6 +97,10 @@
//如果显示服务器的话
hideServe: true,
+ serve_info:{},
+ serve_select:{},
+ activateSwitchPorts: {},
+ code:"",
html_base: 10,
zoom_main: 0.8,
@@ -173,12 +179,21 @@
this.stopScrolling();
},
methods: {
- showCabinetName(){
- alert(111)
+ showCabinetName(serverInfo){
+ this.serve_info=serverInfo
+ this.serve_select={}
+ this.hideServe=!this.hideServe
},
- toSwitchInfo(info) {
- this.showServe(info);
+
+ showCabinetServerInfo(serverInfo,serve_select){
+ this.serve_info=serverInfo
+ this.serve_select={
+ switchName:serve_select.cabinetName
+ }
+ this.hideServe=!this.hideServe
},
+
+
backToTop() {
if (!this.hideServe) {
this.hideServe = !this.hideServe;
@@ -401,7 +416,7 @@
background-image: url("../../assets/equipment/serve.svg");
background-image: url("../../assets/equipment/serve_v2.png");
background-size: 100% 100%;
- width: 15rem;
+ width: 20rem;
// height: 35.3rem;
.cabinetNameDesc{
@@ -417,7 +432,7 @@
.each-item {
background-image: url("../../assets/equipment/serve_item.png");
- width: 10.3rem;
+ width: 14.3rem;
height: 3.7rem;
background-size: 100% 100%;
margin-bottom: 0.9rem;
@@ -430,8 +445,9 @@
padding-top: 0.5rem;
.title {
- font-weight: 600;
- margin-bottom: 0.8rem;
+ font-weight: 700;
+ // margin-bottom: 0.8rem;
+ margin-bottom: 0.2rem;
/* */
}
diff --git a/src/views/screen1/itm.vue b/src/views/screen1/itm.vue
index cebe501..abdd525 100644
--- a/src/views/screen1/itm.vue
+++ b/src/views/screen1/itm.vue
@@ -83,7 +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="showSwitchBoardInfoTableAdd=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: 1rem" @click="showSwitchBoardInfoTable=true">
<div class="flex1">
<div class="reg-num flex">
<span class="div1">{{ switchInfo.switchInfo && switchInfo.switchInfo.length || 0 }}</span>
@@ -94,7 +105,7 @@
</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">
交换机机柜
@@ -102,6 +113,64 @@
</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>
+ <el-table-column
+ prop="deviceNameDNS"
+ label="DNS">
+ </el-table-column>
+ <el-table-column
+ prop="ipAddress"
+ label="ip address">
+ </el-table-column>
+ <el-table-column
+ width="180"
+ prop="macAddress"
+ label="mac address">
+ </el-table-column>
+ <el-table-column
+ prop="nasPort"
+ label="nas port">
+ </el-table-column>
+ <el-table-column
+ prop="switchType"
+ label="switch type">
+ </el-table-column>
+ </el-table>
+ </el-dialog>
+
+ <!-- 新增交换机弹窗 -->
+
+ <el-dialog :visible.sync="showSwitchBoardInfoTableAdd" title="新增交换机" append-to-body>
<el-table
:data="switchInfo.lackSwitchInfo||[]"
border
@@ -171,10 +240,12 @@
chartclose: false,
switchDeviceStatus: {},
switchInfo: {},
+ switchInfoAdd:{}
},
data() {
return {
showSwitchBoardInfoTable: false,
+ showSwitchBoardInfoTableAdd:false,
}
},
methods: {
@@ -303,7 +374,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