|
|
|
@ -54,11 +54,11 @@ |
|
|
|
></div> |
|
|
|
<img v-if="item.netWorkStatus" src="./switch1.png" /> |
|
|
|
<img v-else src="./switch0.png" /> |
|
|
|
<div |
|
|
|
<!-- <div |
|
|
|
:class=" |
|
|
|
'c-name c-namesw ' + (item.netWorkStatus ? '' : 'c-namer') |
|
|
|
" |
|
|
|
></div> |
|
|
|
></div> --> |
|
|
|
<div :class="'c-desc ' + (item.netWorkStatus ? '' : 'c-descr')"> |
|
|
|
<div>桩号：{{ item.stakeMark }}</div> |
|
|
|
<div>IP：{{ item.switchIp }}</div> |
|
|
|
@ -137,13 +137,20 @@ |
|
|
|
src="./switch1.png" |
|
|
|
/> |
|
|
|
<img class="imgsw" v-else src="./switch0.png" /> |
|
|
|
<div |
|
|
|
<el-tooltip |
|
|
|
class="item" |
|
|
|
effect="dark" |
|
|
|
:content="itm.switchName" |
|
|
|
placement="top-end" |
|
|
|
><div |
|
|
|
:class=" |
|
|
|
'c-name c-namesw ' + (itm.netWorkStatus ? '' : 'c-namer') |
|
|
|
" |
|
|
|
> |
|
|
|
{{ itm.switchName }}({{ index + 1 }}) |
|
|
|
</div> |
|
|
|
</div></el-tooltip |
|
|
|
> |
|
|
|
|
|
|
|
<div |
|
|
|
:class="'line ' + (itm.netWorkStatus ? '' : 'liner')" |
|
|
|
style="height: 40px" |
|
|
|
@ -162,7 +169,15 @@ |
|
|
|
class="device-item" |
|
|
|
> |
|
|
|
<img src="./t10.png" /> |
|
|
|
<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></el-tooltip |
|
|
|
> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -479,10 +494,15 @@ export default { |
|
|
|
border: 1px solid #34d3eb; |
|
|
|
} |
|
|
|
.c-namesw { |
|
|
|
padding: 0px 50px; |
|
|
|
width: 180px; |
|
|
|
text-align: center; |
|
|
|
// padding: 0px 50px; |
|
|
|
margin-top: -5px; |
|
|
|
font-size: 14px; |
|
|
|
border: 0px !important; |
|
|
|
white-space: nowrap; |
|
|
|
overflow: hidden; |
|
|
|
text-overflow: ellipsis; |
|
|
|
} |
|
|
|
.c-namer { |
|
|
|
background: linear-gradient( |
|
|
|
@ -517,26 +537,26 @@ export default { |
|
|
|
} |
|
|
|
.device-list { |
|
|
|
border: 1px dashed #34d3eb; |
|
|
|
min-height: 110px; |
|
|
|
height: 112px; |
|
|
|
min-width: 160px; |
|
|
|
margin-top: 10px; |
|
|
|
overflow: auto; |
|
|
|
display: grid; |
|
|
|
grid-template-rows: repeat(2, minmax(45px, auto)); |
|
|
|
grid-auto-columns: 1fr; |
|
|
|
grid-gap: 0px; |
|
|
|
grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); |
|
|
|
padding: 10px; |
|
|
|
} |
|
|
|
.device-list-r { |
|
|
|
border-color: #ff5935; |
|
|
|
// display: flex; |
|
|
|
// flex-wrap: wrap; |
|
|
|
// justify-content: space-around; |
|
|
|
display: grid; |
|
|
|
grid-template-rows: repeat(2, minmax(30px, auto)); |
|
|
|
grid-auto-columns: 1fr; |
|
|
|
grid-gap: 0px; |
|
|
|
grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); |
|
|
|
// overflow: hidden; |
|
|
|
padding: 10px; |
|
|
|
} |
|
|
|
.device-item { |
|
|
|
overflow: hidden; |
|
|
|
// overflow: hidden; |
|
|
|
img { |
|
|
|
margin: 0; |
|
|
|
width: 25px; |
|
|
|
|
