@ -40,7 +40,7 @@
< div class = "arrow" > < / div > < div class = "arrow" > < / div >
< / div > < / div >
< div v-for ="(item, index) in topo" v-if="index < 5" class="switch" > < div v-for ="(item, index) in topo" v-if="index < 5" class="switch" >
< div : class = "'line ' + (item.netWorkStatus ? '' : 'liner')" > < / div > < div : class = "'line ' + (item.netWorkStatus ? '' : 'liner')" style = "height: 70px;margin-top: -10px;" > < / div >
< div < div
: class = "'arrowdown ' + (item.netWorkStatus ? '' : 'arrowr')" : class = "'arrowdown ' + (item.netWorkStatus ? '' : 'arrowr')"
> < / div > > < / div >
@ -54,11 +54,6 @@
> < / div > > < / div >
< img v -if = " item.netWorkStatus " src = "./switch1.png" / > < img v -if = " item.netWorkStatus " src = "./switch1.png" / >
< img v -else src = "./switch0.png" / > < img v -else src = "./switch0.png" / >
< div
: class = "
'c-name c-namesw ' + ( item . netWorkStatus ? '' : 'c-namer' )
"
> < / div >
< div : class = "'c-desc ' + (item.netWorkStatus ? '' : 'c-descr')" > < div : class = "'c-desc ' + (item.netWorkStatus ? '' : 'c-descr')" >
< div > 桩号 ： { { item . stakeMark } } < / div > < div > 桩号 ： { { item . stakeMark } } < / div >
< div > IP ： { { item . switchIp } } < / div > < div > IP ： { { item . switchIp } } < / div >
@ -78,7 +73,7 @@
< / div > < / div >
< div class = "c" style = "margin-top: -5px" > < div class = "c" style = "margin-top: -5px" >
< div v-for ="(item, index) in topo" v-if="index >= 5" class="switch" > < div v-for ="(item, index) in topo" v-if="index >= 5" class="switch" >
< div : class = "'line ' + (item.netWorkStatus ? '' : 'liner')" > < / div > < div : class = "'line ' + (item.netWorkStatus ? '' : 'liner')" style = "height: 70px;margin-top: -10px;" > < / div >
< div < div
: class = "'arrowdown ' + (item.netWorkStatus ? '' : 'arrowr')" : class = "'arrowdown ' + (item.netWorkStatus ? '' : 'arrowr')"
> < / div > > < / div >
@ -137,13 +132,20 @@
src = "./switch1.png" src = "./switch1.png"
/ > / >
< img class = "imgsw" v -else src = "./switch0.png" / > < img class = "imgsw" v -else src = "./switch0.png" / >
< div < el -tooltip
: class = " class = "item"
'c-name c-namesw ' + ( itm . netWorkStatus ? '' : 'c-namer' ) effect = "dark"
" : content = "itm.switchName"
placement = "top-end"
> < div
: class = "
'c-name c-namesw ' + ( itm . netWorkStatus ? '' : 'c-namer' )
"
>
{ { itm . switchName } } ( { { index + 1 } } )
< / div > < / e l - t o o l t i p
> >
{ { itm . switchName } } ( { { index + 1 } } )
< / div >
< div < div
: class = "'line ' + (itm.netWorkStatus ? '' : 'liner')" : class = "'line ' + (itm.netWorkStatus ? '' : 'liner')"
style = "height: 40px" style = "height: 40px"
@ -161,8 +163,16 @@
v - for = "(idv, idvx) in itm.dcDeviceList" v - for = "(idv, idvx) in itm.dcDeviceList"
class = "device-item" class = "device-item"
> >
< img src = "./t10.png" / > < img :src ="require(`./t${itm.netWorkStatus}${idv.childType||'1-1'}.svg`)" / >
< div class = "device-item-text" > { { idv . deviceName } } < / div > < el -tooltip
class = "item"
effect = "dark"
: content = "idv.deviceName"
placement = "top-end"
> < div class = "device-item-text" >
{ { idv . deviceName } }
< / div > < / e l - t o o l t i p
>
< / div > < / div >
< / div > < / div >
< / div > < / div >
@ -206,12 +216,6 @@ export default {
} , } ,
mounted ( ) { mounted ( ) {
this . bind ( ) ; this . bind ( ) ;
request ( {
url : "/type/list" ,
method : "get" ,
} ) . then ( ( res ) => {
console . log ( res ) ;
} ) ;
} , } ,
methods : { methods : {
bind ( ) { bind ( ) {
@ -246,7 +250,6 @@ export default {
let cards = [ ] ; let cards = [ ] ;
let topo = [ ] ; let topo = [ ] ;
const list = this . map . children [ e - 1 ] . children ; const list = this . map . children [ e - 1 ] . children ;
const list1 = list . filter ( ( x ) => x . ringNetWork === 1 ) ; const list1 = list . filter ( ( x ) => x . ringNetWork === 1 ) ;
if ( list1 ) { if ( list1 ) {
cards . push ( { cards . push ( {
@ -479,10 +482,15 @@ export default {
border : 1 px solid # 34 d3eb ; border : 1 px solid # 34 d3eb ;
} }
. c - namesw { . c - namesw {
padding : 0 px 50 px ; width : 180 px ;
text - align : center ;
/ / p a d d i n g : 0 p x 5 0 p x ;
margin - top : - 5 px ; margin - top : - 5 px ;
font - size : 14 px ; font - size : 14 px ;
border : 0 px ! important ; border : 0 px ! important ;
white - space : nowrap ;
overflow : hidden ;
text - overflow : ellipsis ;
} }
. c - namer { . c - namer {
background : linear - gradient ( background : linear - gradient (
@ -517,26 +525,26 @@ export default {
} }
. device - list { . device - list {
border : 1 px dashed # 34 d3eb ; border : 1 px dashed # 34 d3eb ;
min - height : 110 px ; height : 112 px ;
min - width : 160 px ; min - width : 160 px ;
margin - top : 10 px ; margin - top : 10 px ;
overflow : auto ; overflow : auto ;
display : grid ;
grid - template - rows : repeat ( 2 , minmax ( 45 px , auto ) ) ;
grid - auto - columns : 1 fr ;
grid - gap : 0 px ;
grid - template - columns : repeat ( auto - fill , minmax ( 40 px , 1 fr ) ) ;
padding : 10 px ;
} }
. device - list - r { . device - list - r {
border - color : # ff5935 ; border - color : # ff5935 ;
/ / d i s p l a y : f l e x ; / / d i s p l a y : f l e x ;
/ / f l e x - w r a p : w r a p ; / / f l e x - w r a p : w r a p ;
/ / j u s t i f y - c o n t e n t : s p a c e - a r o u n d ; / / j u s t i f y - c o n t e n t : s p a c e - a r o u n d ;
display : grid ;
grid - template - rows : repeat ( 2 , minmax ( 30 px , auto ) ) ;
grid - auto - columns : 1 fr ;
grid - gap : 0 px ;
grid - template - columns : repeat ( auto - fill , minmax ( 40 px , 1 fr ) ) ;
/ / o v e r f l o w : h i d d e n ; / / o v e r f l o w : h i d d e n ;
padding : 10 px ;
} }
. device - item { . device - item {
overflow : hidden ; / / o v e r f l o w : h i d d e n ;
img { img {
margin : 0 ; margin : 0 ;
width : 25 px ; width : 25 px ;
