|
|
|
@ -1,13 +1,127 @@ |
|
|
|
<template> |
|
|
|
<div class='topolog'> |
|
|
|
<div class="list"> |
|
|
|
<div v-for="(item,index) in list" class="listItem keep-ratio"> |
|
|
|
{{ item.switchName }} |
|
|
|
<div v-for="(item, index) in list" @click="listClick(index)" |
|
|
|
:class="'listItem keep-ratio ' + (selIndex === index ? 'listItemAction' : '')"> |
|
|
|
{{ item.name }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="card"> |
|
|
|
<div class="title"> |
|
|
|
<view class="t-left">{{ list[selIndex].switchName }}</view> |
|
|
|
<div class="top "> |
|
|
|
<div class="t-left">{{ name }}</div> |
|
|
|
<div style="display: flex;"> |
|
|
|
<div class="t-right" v-for="(item,index) in card"> |
|
|
|
交换机总数 <template v-if="card.length>1">({{ index+1 }})</template>：<span class="len">{{ item.total }}</span>个 |
|
|
|
<div class="space"></div> |
|
|
|
故障数：<span class="len err">{{ item.error }}</span>个 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="content" v-if="selIndex===0"> |
|
|
|
<div class="c c-border"> |
|
|
|
<div class="arrow-panel-line"> |
|
|
|
<div class="arrowdow"></div> |
|
|
|
<div class="arrowdow"></div> |
|
|
|
</div> |
|
|
|
<div class="arrow-panel" style="margin-top: -5px;"> |
|
|
|
<div class="arrow"></div> |
|
|
|
<div class="arrow"></div> |
|
|
|
<div class="arrow"></div> |
|
|
|
<div class="arrow"></div> |
|
|
|
</div> |
|
|
|
<div v-for="(item, index) in topo" v-if="index < 5" class="switch"> |
|
|
|
<div :class="'line ' + (item.netWorkStatus ? '' : 'liner')"></div> |
|
|
|
<div :class="'arrowdown ' + (item.netWorkStatus ? '' : 'arrowr')"></div> |
|
|
|
<div :class="'c-name ' + (item.netWorkStatus ? '' : 'c-namer')">{{ item.switchName }}</div> |
|
|
|
<div :class="'line ' + (item.netWorkStatus ? '' : 'liner')"></div> |
|
|
|
<div :class="'arrowdown ' + (item.netWorkStatus ? '' : 'arrowr')" style="margin-top:-35px;"></div> |
|
|
|
<img v-if="item.netWorkStatus" src="./switch1.png"> |
|
|
|
<img v-else src="./switch0.png"> |
|
|
|
<div :class="'c-name c-namesw ' + (item.netWorkStatus ? '' : 'c-namer')">sw</div> |
|
|
|
<div :class="'c-desc ' + (item.netWorkStatus ? '' : 'c-descr')"> |
|
|
|
<div>桩号：{{ item.stakeMark }}</div> |
|
|
|
<div>IP：{{ item.switchIp }}</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="arrow-panel" style="margin-top: 292px;"> |
|
|
|
<div class="arrow arrowrig"></div> |
|
|
|
<div class="arrow arrowrig"></div> |
|
|
|
<div class="arrow arrowrig"></div> |
|
|
|
<div class="arrow arrowrig"></div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="arrow-panel-line" style="margin-left: 100.1%;"> |
|
|
|
<div class="arrowdow arrowtop"></div> |
|
|
|
<div class="arrowdow arrowtop"></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="c " style="margin-top: -5px;"> |
|
|
|
<div v-for="(item, index) in topo" v-if="index >= 5" class="switch"> |
|
|
|
<div :class="'line ' + (item.netWorkStatus ? '' : 'liner')"></div> |
|
|
|
<div :class="'arrowdown ' + (item.netWorkStatus ? '' : 'arrowr')"></div> |
|
|
|
<div :class="'c-name ' + (item.netWorkStatus ? '' : 'c-namer')">{{ item.switchName }}</div> |
|
|
|
<div :class="'line ' + (item.netWorkStatus ? '' : 'liner')"></div> |
|
|
|
<div :class="'arrowdown ' + (item.netWorkStatus ? '' : 'arrowr')" style="margin-top:-35px;"></div> |
|
|
|
<img class="imgsw" v-if="item.netWorkStatus" src="./switch1.png" /> |
|
|
|
<img class="imgsw" v-else src="./switch0.png" /> |
|
|
|
<div :class="'c-name ' + (item.netWorkStatus ? '' : 'c-namer')" |
|
|
|
style="padding:0px 50px;margin-top: -5px;border:0px">sw</div> |
|
|
|
<div :class="'c-desc ' + (item.netWorkStatus ? '' : 'c-descr')"> |
|
|
|
<div>桩号：{{ item.stakeMark }}</div> |
|
|
|
<div>IP：{{ item.switchIp }}</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="content" v-else> |
|
|
|
<div class="c c-border" style="margin-bottom: 30px;" v-for="(item,index) of topo"> |
|
|
|
|
|
|
|
<div class="arrow-panel-line"> |
|
|
|
<div class="arrowdow"></div> |
|
|
|
<div class="arrowdow"></div> |
|
|
|
</div> |
|
|
|
<div class="arrow-panel" style="margin-top: -5px;"> |
|
|
|
<div class="arrow"></div> |
|
|
|
<div class="arrow"></div> |
|
|
|
<div class="arrow"></div> |
|
|
|
<div class="arrow"></div> |
|
|
|
</div> |
|
|
|
<div class="cscorll"> |
|
|
|
<div :style="' height: 290px;width:'+item.length*200+'px;'"> |
|
|
|
<div v-for="(itm, idx) in item" class="switchScro"> |
|
|
|
<div class="switch"> |
|
|
|
<div :class="'line ' + (itm.netWorkStatus ? '' : 'liner')"></div> |
|
|
|
<div :class="'arrowdown ' + (itm.netWorkStatus ? '' : 'arrowr')" style="margin-top: -30px;"></div> |
|
|
|
<img class="imgsw" v-if="itm.netWorkStatus" src="./switch1.png" /> |
|
|
|
<img class="imgsw" v-else src="./switch0.png" /> |
|
|
|
<div :class="'c-name c-namesw ' + (itm.netWorkStatus ? '' : 'c-namer')">{{itm.switchName}}({{index+1}})</div> |
|
|
|
<div :class="'line ' + (itm.netWorkStatus ? '' : 'liner')" style="height: 40px"></div> |
|
|
|
<div :class="'arrowdown ' + (itm.netWorkStatus ? '' : 'arrowr')" style="margin-top: -30px;"></div> |
|
|
|
<div :class="'device-list ' + (itm.netWorkStatus ? '' : 'device-list-r')"> |
|
|
|
<div v-for="(idv,idvx) in itm.dcDeviceList"> |
|
|
|
<div class="device-item"> |
|
|
|
<img src="./t10.png" /> |
|
|
|
<div>{{ idv.deviceName }}</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="arrow-panel" style="margin-top: 292px;"> |
|
|
|
<div class="arrow"></div> |
|
|
|
<div class="arrow"></div> |
|
|
|
<div class="arrow"></div> |
|
|
|
<div class="arrow"></div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="arrow-panel-line" style="margin-left: 100.1%;"> |
|
|
|
<div class="arrowdow"></div> |
|
|
|
<div class="arrowdow"></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -16,7 +130,9 @@ |
|
|
|
<script> |
|
|
|
import request from '@/utils/request' |
|
|
|
import { Message } from "element-ui"; |
|
|
|
|
|
|
|
const enum_device_type = [ |
|
|
|
{type: "1", label: "枪机",} |
|
|
|
] |
|
|
|
export default { |
|
|
|
name: 'InDevelopment', |
|
|
|
components: { |
|
|
|
@ -25,22 +141,71 @@ export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
list: [], |
|
|
|
selIndex: 0 |
|
|
|
selIndex: 0, |
|
|
|
name: '', |
|
|
|
card: [{total: 0, error: 0 }], |
|
|
|
topo: [] |
|
|
|
} |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.bind() |
|
|
|
request({ |
|
|
|
url: "/type/list", |
|
|
|
method: "get", |
|
|
|
}).then(res=>{ |
|
|
|
console.log(res) |
|
|
|
}); |
|
|
|
}, |
|
|
|
methods:{ |
|
|
|
bind(){ |
|
|
|
methods: { |
|
|
|
bind() { |
|
|
|
request({ |
|
|
|
url: '/business/switch/list', |
|
|
|
method: 'get' |
|
|
|
}).then(result=>{ |
|
|
|
}).then(result => { |
|
|
|
if (result.code != 200) return Message.error(result?.msg); |
|
|
|
this.list = result.data |
|
|
|
console.log(this.list) |
|
|
|
this.map = result.data[0]; |
|
|
|
let list = [{ name: this.map.switchName }] |
|
|
|
this.map.children.forEach(e => { |
|
|
|
list.push({ name: e.switchName }) |
|
|
|
}); |
|
|
|
this.list = list; |
|
|
|
this.listClick(); |
|
|
|
}) |
|
|
|
}, |
|
|
|
listClick(e = 0) { |
|
|
|
this.selIndex = e; |
|
|
|
if (e === 0) { |
|
|
|
this.name = this.map.switchName, |
|
|
|
this.card = [{ |
|
|
|
total: this.map.children.length, |
|
|
|
error: this.map.children.filter(x => x.netWorkStatus === 0).length |
|
|
|
}] |
|
|
|
this.topo = this.map.children |
|
|
|
} else { |
|
|
|
this.name = this.map.children[e-1].switchName; |
|
|
|
let cards = []; |
|
|
|
let topo = []; |
|
|
|
const list = this.map.children[e-1].children; |
|
|
|
|
|
|
|
const list1 = list.filter(x=>x.ringNetWork === 1) |
|
|
|
if(list1){ |
|
|
|
cards.push({ |
|
|
|
total: list1.length, |
|
|
|
error: list1.filter(x => x.netWorkStatus === 0).length |
|
|
|
}) |
|
|
|
topo.push(list1) |
|
|
|
} |
|
|
|
const list2 = list.filter(x=>x.ringNetWork === 2) |
|
|
|
if(list2 && list2.length > 0){ |
|
|
|
cards.push({ |
|
|
|
total: list2.length, |
|
|
|
error: list2.filter(x => x.netWorkStatus === 0).length |
|
|
|
}) |
|
|
|
topo.push(list2) |
|
|
|
} |
|
|
|
this.topo = topo; |
|
|
|
this.card = cards; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
@ -61,25 +226,227 @@ export default { |
|
|
|
font-size: 200px; |
|
|
|
} |
|
|
|
} |
|
|
|
.list{ |
|
|
|
width: 20vw; |
|
|
|
|
|
|
|
.list { |
|
|
|
width: 15vw; |
|
|
|
height: 100%; |
|
|
|
color: white; |
|
|
|
margin: 0px 20px; |
|
|
|
.listItem{ |
|
|
|
margin: 0px 40px 0px 20px; |
|
|
|
|
|
|
|
.listItem { |
|
|
|
background-image: url(../topology/left-bg.png); |
|
|
|
background-repeat: no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
height: 44px; |
|
|
|
height: 50px; |
|
|
|
width: 100%; |
|
|
|
text-align: center; |
|
|
|
line-height: 44px; |
|
|
|
line-height: 50px; |
|
|
|
margin-top: 20px; |
|
|
|
} |
|
|
|
|
|
|
|
.listItemAction { |
|
|
|
background-image: url(../topology/left-bg-action.png); |
|
|
|
} |
|
|
|
} |
|
|
|
.card{ |
|
|
|
|
|
|
|
.card { |
|
|
|
flex: 1; |
|
|
|
height: 100%; |
|
|
|
|
|
|
|
.top { |
|
|
|
width: 99%; |
|
|
|
height: 50px; |
|
|
|
margin-top: 20px; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
|
|
|
|
.t-left { |
|
|
|
height: 50px; |
|
|
|
padding: 0px 20px; |
|
|
|
line-height: 50px; |
|
|
|
border-radius: 5px; |
|
|
|
background: linear-gradient(to top, #278ea9, #ffffff00); |
|
|
|
} |
|
|
|
|
|
|
|
.t-right { |
|
|
|
display: flex; |
|
|
|
padding: 0px 30px; |
|
|
|
border-radius: 5px; |
|
|
|
background: linear-gradient(to top, #278ea9, #ffffff00); |
|
|
|
justify-content: center; |
|
|
|
align-items: flex-end; |
|
|
|
padding-bottom: 10px; |
|
|
|
margin-left: 20px; |
|
|
|
.len { |
|
|
|
color: #12F7B2; |
|
|
|
font-size: 26px; |
|
|
|
font-weight: bold; |
|
|
|
margin: 0px 10px; |
|
|
|
} |
|
|
|
|
|
|
|
.err { |
|
|
|
color: #FF5935; |
|
|
|
} |
|
|
|
|
|
|
|
.space { |
|
|
|
width: 40px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.content { |
|
|
|
width: 99%; |
|
|
|
margin-top: 20px; |
|
|
|
} |
|
|
|
|
|
|
|
.c { |
|
|
|
display: flex; |
|
|
|
flex-direction: row; |
|
|
|
justify-content: space-around; |
|
|
|
height: 300px; |
|
|
|
} |
|
|
|
|
|
|
|
.c-border { |
|
|
|
border: 2px solid #34d3eb; |
|
|
|
position: relative; |
|
|
|
} |
|
|
|
|
|
|
|
.arrow-panel { |
|
|
|
position: absolute; |
|
|
|
z-index: 999; |
|
|
|
width: 65%; |
|
|
|
display: flex; |
|
|
|
justify-content: space-around; |
|
|
|
|
|
|
|
.arrow { |
|
|
|
width: 25px; |
|
|
|
height: 10px; |
|
|
|
background: linear-gradient(to right, #34d3eb, #ffffff00); |
|
|
|
border-radius: 50%; |
|
|
|
} |
|
|
|
|
|
|
|
.arrowrig { |
|
|
|
background: linear-gradient(to left, #34d3eb, #ffffff00); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.arrow-right { |
|
|
|
width: 100%; |
|
|
|
position: absolute; |
|
|
|
background-color: #ff0000dd; |
|
|
|
} |
|
|
|
|
|
|
|
.arrow-panel-line { |
|
|
|
height: 300px; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
position: absolute; |
|
|
|
margin-left: -100.1%; |
|
|
|
z-index: 99999; |
|
|
|
justify-content: space-around; |
|
|
|
|
|
|
|
.arrowdow { |
|
|
|
border-radius: 50%; |
|
|
|
width: 10px; |
|
|
|
height: 20px; |
|
|
|
background: linear-gradient(to top, #34d3eb, #ffffff00); |
|
|
|
} |
|
|
|
|
|
|
|
.arrowtop { |
|
|
|
background: linear-gradient(to bottom, #34d3eb, #ffffff00); |
|
|
|
} |
|
|
|
} |
|
|
|
.cscorll{ |
|
|
|
width: 80vw; |
|
|
|
height: 290px; |
|
|
|
overflow-x: auto; |
|
|
|
overflow-y: hidden; |
|
|
|
z-index: 9999; |
|
|
|
} |
|
|
|
.switchScro{ |
|
|
|
height: 300px; |
|
|
|
width: 200px; |
|
|
|
margin-right: 20px; |
|
|
|
float: left; |
|
|
|
} |
|
|
|
.switch { |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
flex-direction: column; |
|
|
|
|
|
|
|
.line { |
|
|
|
height: 50px; |
|
|
|
background-color: #34d3eb; |
|
|
|
width: 2px; |
|
|
|
} |
|
|
|
|
|
|
|
.liner { |
|
|
|
background-color: #FF5935; |
|
|
|
} |
|
|
|
|
|
|
|
.arrowdown { |
|
|
|
width: 10px; |
|
|
|
height: 20px; |
|
|
|
background: linear-gradient(to top, #34d3eb, #ffffff00); |
|
|
|
margin-top: -25px; |
|
|
|
border-radius: 50%; |
|
|
|
} |
|
|
|
|
|
|
|
.arrowr { |
|
|
|
background: linear-gradient(to top, #FF5935, #ffffff00); |
|
|
|
} |
|
|
|
|
|
|
|
.c-name { |
|
|
|
background: linear-gradient(270deg, rgba(61, 231, 253, 0) 0%, rgba(61, 231, 253, 0.7) 51%, rgba(61, 231, 253, 0) 100%); |
|
|
|
border-radius: 4px; |
|
|
|
padding: 10px 30px; |
|
|
|
margin-top: 5px; |
|
|
|
border: 1px solid #34d3eb; |
|
|
|
} |
|
|
|
.c-namesw{ |
|
|
|
padding:0px 50px; |
|
|
|
margin-top: -5px; |
|
|
|
font-size: 14px; |
|
|
|
border:0px !important; |
|
|
|
} |
|
|
|
.c-namer { |
|
|
|
background: linear-gradient(270deg, rgba(255, 90, 54, 0) 0%, rgba(255, 90, 54, 0.8) 51%, rgba(255, 90, 54, 0) 100%); |
|
|
|
border: 1px solid #FF5935; |
|
|
|
} |
|
|
|
|
|
|
|
.c-desc { |
|
|
|
background: linear-gradient(to bottom, #102229 5%, #34d3eb); |
|
|
|
padding: 5px 50px; |
|
|
|
margin-bottom: 30px; |
|
|
|
font-size: 14px; |
|
|
|
padding-top: 10px; |
|
|
|
} |
|
|
|
|
|
|
|
.c-descr { |
|
|
|
background: linear-gradient(to bottom, #102229 5%, #FF5935); |
|
|
|
} |
|
|
|
|
|
|
|
img { |
|
|
|
width: 70px; |
|
|
|
height: 50px; |
|
|
|
margin-top: 10px; |
|
|
|
} |
|
|
|
} |
|
|
|
.device-list{ |
|
|
|
border: 1px dashed #34d3eb; |
|
|
|
height: 90px; |
|
|
|
min-width: 160px; |
|
|
|
margin-top: 10px; |
|
|
|
} |
|
|
|
.device-list-r{ |
|
|
|
border-color: #FF5935; |
|
|
|
} |
|
|
|
.device-item{ |
|
|
|
image{ |
|
|
|
width: 30px; |
|
|
|
height: 30px; |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
