<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><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="[
|
(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" @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>
|
</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-column
|
prop="areaCode"
|
label="Area Code">
|
</el-table-column>
|
<el-table-column
|
prop="networkPort"
|
label="Network Port">
|
</el-table-column>
|
|
</el-table>
|
|
</el-dialog>
|
<equ-add-form ref="equAddForm" :code="code" :areas="areas" :init_device_list="device_list"
|
@update="update_map" @update-server-info="update_server_info" ></equ-add-form>
|
</div>
|
</template>
|
<script>
|
|
|
import equAddForm from "@/components/equ-add-form.vue";
|
import deviceInfoDelete from "@/components/device-info-delete";
|
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,deviceInfoDelete},
|
props: {
|
serve_info: {},
|
serve_select:{},
|
code:"",
|
cabinetNameForOpen:"",
|
switchName:"",
|
},
|
//根据
|
//后端存储的是世界坐标，初次时候也是世界坐标，最小单位为0.01吧，这个间距或者大小，不考虑实际像素
|
//渲染时候，需要把 坐标，变为实际rem等像素坐标
|
//每个厂房大小不一样，先用一定的数代表吧.
|
|
data() {
|
return {
|
dialog_activateSwitchPorts: false,
|
activateSwitchPorts:{},
|
switchAllDetialInfos:[],
|
areas: [],
|
device_list: [],
|
// serve_info: {},
|
isDragging: false,
|
selectedIndex: null,
|
cur_device_info: null, // 当前的设备信息
|
cur_item:null,// 当前的element
|
show_device_info: false, // 展示设备信息
|
};
|
},
|
created() {
|
console.log("serve_infoserve_infoserve_infoserve_info")
|
console.log("this.serve_info:",this.serve_info)
|
console.log("this.serve_select:",this.serve_select)
|
//这里取打开的交换机柜的名称
|
this.cabinetNameForOpen = this.serve_info.cabinetName;
|
},
|
mounted() {
|
getAreaTjData().then((res) => {
|
// console.log('areas',res.switchAreaInfo || [])
|
this.areas = res.switchAreaInfo || [];
|
});
|
|
},
|
destroyed() {
|
|
},
|
methods: {
|
async showServeInfo(info) {
|
//展示交换机全部端口
|
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 || []
|
console.log("switchAllDetialInfos", this.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;
|
this.cabinetName = info.cabinetName;
|
},
|
async update_server_info(code,name) {
|
// name 是交换机
|
console.log("info",code,name);
|
this.$modal.loading("加载中");
|
const res = await getDeviceList(code, name);
|
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;
|
this.cabinetName = name;
|
},
|
click_item_add() {
|
console.log("this.$refs.equAddForm", this.$refs.equAddForm);
|
console.log("this.areas", this.areas);
|
const queryParams = this.$route.query;
|
console.log("queryParams",queryParams)
|
let config = 0;
|
if (queryParams.code) {
|
config = 1;
|
}
|
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>
|
<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>
|
