|
|
|
@ -131,9 +131,9 @@ |
|
|
|
:class="{ selected: isMonitorStationSelected(station.id) }" |
|
|
|
@click="selectMonitorStation(station)" |
|
|
|
> |
|
|
|
<div class="station-head" title="进入场站系统" @click.stop="enterStation(station)"> |
|
|
|
<span class="station-name" :title="station.name">{{ station.name }}</span> |
|
|
|
<img class="enter-icon" :src="enterIcon" alt=""> |
|
|
|
<div class="station-head"> |
|
|
|
<span class="station-name" :title="station.name" @click.stop="enterStation(station)">{{ station.name }}</span> |
|
|
|
<img class="enter-icon" :src="enterIcon" alt="" title="进入场站系统" @click.stop="enterStation(station)"> |
|
|
|
<span class="head-spacer" /> |
|
|
|
<span class="status-dot" :class="station.status === 'abnormal' ? 'abnormal' : 'normal'" /> |
|
|
|
<span class="station-status" :class="station.status === 'abnormal' ? 'abnormal' : 'normal'"> |
|
|
|
@ -160,6 +160,8 @@ |
|
|
|
<div class="panel-title"> |
|
|
|
<img class="title-icon" :src="triangleIcon" alt=""> |
|
|
|
<span>动环监控</span> |
|
|
|
</div> |
|
|
|
<div class="video-filter-row"> |
|
|
|
<el-select |
|
|
|
v-model="videoStationIds" |
|
|
|
class="panel-select" |
|
|
|
@ -382,8 +384,7 @@ export default { |
|
|
|
treeCollapseIcon, |
|
|
|
navItems: [ |
|
|
|
{ key: "home", label: "首页" }, |
|
|
|
{ key: "patrol", label: "动环巡检" }, |
|
|
|
{ key: "system", label: "系统管理" } |
|
|
|
{ key: "patrol", label: "动环巡检" } |
|
|
|
], |
|
|
|
stationButtons: STATION_BUTTONS, |
|
|
|
defectSlides: DEFECT_SLIDES, |
|
|
|
@ -461,8 +462,9 @@ export default { |
|
|
|
trendQueryKey() { |
|
|
|
this.loadDefectTrend(); |
|
|
|
}, |
|
|
|
videoStationIds() { |
|
|
|
videoStationIds(ids) { |
|
|
|
this.replacePortalVideos(this.filteredVideos); |
|
|
|
if (ids && ids.length) this.openDeviceTree(); |
|
|
|
} |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
@ -476,6 +478,11 @@ export default { |
|
|
|
methods: { |
|
|
|
selectMonitorStation(station) { |
|
|
|
this.videoStationIds = [station.id]; |
|
|
|
this.openDeviceTree(); |
|
|
|
}, |
|
|
|
openDeviceTree() { |
|
|
|
this.treeMounted = true; |
|
|
|
this.treeVisible = true; |
|
|
|
}, |
|
|
|
isMonitorStationSelected(stationId) { |
|
|
|
return this.videoStationIds.some(id => String(id) === String(stationId)); |
|
|
|
@ -858,8 +865,11 @@ export default { |
|
|
|
: `${month}月`; |
|
|
|
}, |
|
|
|
toggleDeviceTree() { |
|
|
|
this.treeMounted = true; |
|
|
|
this.treeVisible = !this.treeVisible; |
|
|
|
if (this.treeVisible) { |
|
|
|
this.treeVisible = false; |
|
|
|
return; |
|
|
|
} |
|
|
|
this.openDeviceTree(); |
|
|
|
}, |
|
|
|
defectValue(card, slide) { |
|
|
|
const field = slide.fields.find(key => card[key] !== undefined && card[key] !== null); |
|
|
|
@ -1407,11 +1417,6 @@ $panel-border: rgba(84, 130, 255, 0.22); |
|
|
|
align-items: center; |
|
|
|
gap: 7px; |
|
|
|
min-width: 0; |
|
|
|
cursor: pointer; |
|
|
|
|
|
|
|
&:hover .station-name { |
|
|
|
color: $accent; |
|
|
|
} |
|
|
|
|
|
|
|
.station-name { |
|
|
|
min-width: 0; |
|
|
|
@ -1421,7 +1426,12 @@ $panel-border: rgba(84, 130, 255, 0.22); |
|
|
|
font-size: 16px; |
|
|
|
font-weight: 600; |
|
|
|
color: #eef7ff; |
|
|
|
cursor: pointer; |
|
|
|
transition: color 0.2s; |
|
|
|
|
|
|
|
&:hover { |
|
|
|
color: $accent; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.enter-icon { |
|
|
|
@ -1429,10 +1439,17 @@ $panel-border: rgba(84, 130, 255, 0.22); |
|
|
|
width: 15px; |
|
|
|
height: 14px; |
|
|
|
object-fit: contain; |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
|
|
|
|
.head-spacer { |
|
|
|
flex: 1 1 auto; |
|
|
|
cursor: default; |
|
|
|
} |
|
|
|
|
|
|
|
.status-dot, |
|
|
|
.station-status { |
|
|
|
cursor: default; |
|
|
|
} |
|
|
|
|
|
|
|
.station-status { |
|
|
|
@ -1512,6 +1529,24 @@ $panel-border: rgba(84, 130, 255, 0.22); |
|
|
|
flex: 1; |
|
|
|
} |
|
|
|
|
|
|
|
/* 场站筛选与左侧「表计/外观/红外巡检」分类名同一行、同一高度 */ |
|
|
|
.video-filter-row { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: flex-end; |
|
|
|
flex: none; |
|
|
|
height: 16px; |
|
|
|
margin: 6px 14px 4px; |
|
|
|
padding: 0; |
|
|
|
|
|
|
|
.panel-select { |
|
|
|
position: relative; |
|
|
|
top: -6px; |
|
|
|
width: 132px; |
|
|
|
height: 16px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.video-monitor-body { |
|
|
|
display: flex; |
|
|
|
flex: 1; |
|
|
|
@ -1527,13 +1562,15 @@ $panel-border: rgba(84, 130, 255, 0.22); |
|
|
|
} |
|
|
|
|
|
|
|
.portal-device-tree { |
|
|
|
align-self: flex-start; |
|
|
|
flex: 0 0 46%; |
|
|
|
width: 46%; |
|
|
|
height: calc(100% + 1px); |
|
|
|
min-width: 280px; |
|
|
|
max-width: 360px; |
|
|
|
min-height: 0; |
|
|
|
padding: 0; |
|
|
|
margin: 10px 0 14px; |
|
|
|
margin: -1px 0 14px; |
|
|
|
overflow: hidden; |
|
|
|
background: transparent !important; |
|
|
|
|
|
|
|
@ -1631,12 +1668,33 @@ $panel-border: rgba(84, 130, 255, 0.22); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
:deep(.video-filter-row .panel-select.el-select) { |
|
|
|
height: 16px; |
|
|
|
|
|
|
|
.el-input { |
|
|
|
height: 16px; |
|
|
|
line-height: 16px; |
|
|
|
} |
|
|
|
|
|
|
|
.el-input.el-input--mini .el-input__inner, |
|
|
|
.el-input .el-input__inner { |
|
|
|
height: 16px !important; |
|
|
|
line-height: 14px !important; |
|
|
|
} |
|
|
|
|
|
|
|
.el-input__suffix, |
|
|
|
.el-input__icon { |
|
|
|
height: 16px; |
|
|
|
line-height: 16px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.camera-stats { |
|
|
|
display: grid; |
|
|
|
grid-template-columns: repeat(4, 1fr); |
|
|
|
gap: 12px; |
|
|
|
flex: none; |
|
|
|
padding: 10px 14px 12px; |
|
|
|
padding: 0 14px 12px; |
|
|
|
} |
|
|
|
|
|
|
|
.video-monitor-body.tree-visible { |
|
|
|
@ -1913,7 +1971,7 @@ $panel-border: rgba(84, 130, 255, 0.22); |
|
|
|
} |
|
|
|
|
|
|
|
.el-input__inner { |
|
|
|
height: 28px !important; |
|
|
|
height: 25px !important; |
|
|
|
line-height: 26px !important; |
|
|
|
padding-top: 0; |
|
|
|
padding-bottom: 0; |
|
|
|
|
