|
|
|
@ -5,7 +5,34 @@ |
|
|
|
<sidebar v-if="device !== 'mobile' || sidebar.opened" class="sidebar-container"/> |
|
|
|
<div :class="{hasTagsView:needTagsView,sidebarHide:sidebar.hide}" class="main-container"> |
|
|
|
<div class="layout-header" :class="{'fixed-header':fixedHeader}"> |
|
|
|
<navbar v-if="!isPatrolWorkspace"/> |
|
|
|
<navbar /> |
|
|
|
<div class="module-subbar"> |
|
|
|
<div class="module-links"> |
|
|
|
<button |
|
|
|
v-for="item in moduleLinks" |
|
|
|
:key="item.key" |
|
|
|
type="button" |
|
|
|
class="module-link" |
|
|
|
:class="{ active: activeModule === item.key }" |
|
|
|
@click="goModule(item.path)" |
|
|
|
>{{ item.label }}</button> |
|
|
|
</div> |
|
|
|
<el-select |
|
|
|
v-model="selectedStation" |
|
|
|
class="station-select" |
|
|
|
size="mini" |
|
|
|
popper-class="station-select-popper" |
|
|
|
placeholder="请选择场站" |
|
|
|
@change="handleStationChange" |
|
|
|
> |
|
|
|
<el-option |
|
|
|
v-for="station in stationOptions" |
|
|
|
:key="station.value" |
|
|
|
:label="station.label" |
|
|
|
:value="station.value" |
|
|
|
/> |
|
|
|
</el-select> |
|
|
|
</div> |
|
|
|
<tags-view v-if="needTagsView"/> |
|
|
|
</div> |
|
|
|
<app-main :class="{hasTagsView: needTagsView, patrolWorkspace: isPatrolWorkspace}" /> |
|
|
|
@ -22,6 +49,7 @@ import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components' |
|
|
|
import ResizeMixin from './mixin/ResizeHandler' |
|
|
|
import { mapState } from 'vuex' |
|
|
|
import variables from '@/assets/styles/variables.scss' |
|
|
|
import { getList as getStationList } from '@/api/basedata/station' |
|
|
|
|
|
|
|
export default { |
|
|
|
name: 'Layout', |
|
|
|
@ -33,6 +61,16 @@ export default { |
|
|
|
Sidebar, |
|
|
|
TagsView |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
stationOptions: [], |
|
|
|
selectedStation: '', |
|
|
|
moduleLinks: [ |
|
|
|
{ key: 'home', label: '动环巡检', path: '/index' }, |
|
|
|
{ key: 'video', label: '视频监控', path: '/video-preview/index' } |
|
|
|
] |
|
|
|
} |
|
|
|
}, |
|
|
|
mixins: [ResizeMixin], |
|
|
|
computed: { |
|
|
|
...mapState({ |
|
|
|
@ -55,11 +93,43 @@ export default { |
|
|
|
isPatrolWorkspace() { |
|
|
|
return this.$route.matched.some(route => route.meta && route.meta.patrolWorkspace) |
|
|
|
}, |
|
|
|
activeModule() { |
|
|
|
const path = this.$route.path |
|
|
|
const inspectionPaths = ['/task-summary', '/patrol-plan', '/site-management', '/patrol-report', '/patrol-schedule', '/defect-record', '/inspection-workspace/task', '/inspection-workspace/plan', '/inspection-workspace/points', '/inspection-workspace/report', '/inspection-workspace/schedule', '/inspection-workspace/defects'] |
|
|
|
if (path === '/' || path === '/index' || path === '/xfdh/index' || inspectionPaths.some(item => path === item || path.indexOf(item + '/') === 0)) return 'home' |
|
|
|
if (path.indexOf('/video-preview') === 0 || path.indexOf('/video-playback') === 0 || path.indexOf('/inspection-workspace/video-preview') === 0 || path.indexOf('/inspection-workspace/video-playback') === 0) return 'video' |
|
|
|
return '' |
|
|
|
}, |
|
|
|
variables() { |
|
|
|
return variables; |
|
|
|
} |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.loadStations() |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
async loadStations() { |
|
|
|
try { |
|
|
|
const result = await getStationList({ pageNum: 1, pageSize: 1000 }) |
|
|
|
const rows = Array.isArray(result && result.rows) |
|
|
|
? result.rows |
|
|
|
: (Array.isArray(result && result.data) ? result.data : []) |
|
|
|
this.stationOptions = rows.map((item, index) => { |
|
|
|
const value = item.stationCode || item.stationId || item.id || item.code |
|
|
|
const label = index === 0 ? '白杨坪升压站' : (item.stationName || item.name || String(value || '')) |
|
|
|
return { value: value == null ? '' : String(value), label } |
|
|
|
}).filter(item => item.value && item.label) |
|
|
|
} catch (error) { |
|
|
|
this.stationOptions = [] |
|
|
|
} |
|
|
|
this.selectedStation = this.$route.query.stationCode || (this.stationOptions[0] && this.stationOptions[0].value) || '' |
|
|
|
}, |
|
|
|
handleStationChange(value) { |
|
|
|
this.$router.replace({ query: { ...this.$route.query, stationCode: value } }).catch(() => undefined) |
|
|
|
}, |
|
|
|
goModule(path) { |
|
|
|
if (this.$route.path !== path) this.$router.push({ path }).catch(() => undefined) |
|
|
|
}, |
|
|
|
handleClickOutside() { |
|
|
|
this.$store.dispatch('app/closeSideBar', { withoutAnimation: false }) |
|
|
|
} |
|
|
|
@ -104,6 +174,124 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.module-subbar { |
|
|
|
position: relative; |
|
|
|
width: 100%; |
|
|
|
height: 40px; |
|
|
|
padding: 2px 18px; |
|
|
|
box-sizing: border-box; |
|
|
|
background: linear-gradient(180deg, #151b5b 0%, #111753 58%, #0e1244 100%); |
|
|
|
// Keep the lower edge soft while replacing the former hard top line with a fade. |
|
|
|
box-shadow: inset 0 -1px 0 rgba(0, 13, 63, .55); |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-between; |
|
|
|
} |
|
|
|
|
|
|
|
.module-subbar::before { |
|
|
|
content: ""; |
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
right: 0; |
|
|
|
height: 6px; |
|
|
|
pointer-events: none; |
|
|
|
background: linear-gradient(180deg, rgba(1, 8, 27, .62) 0%, rgba(5, 18, 52, .28) 48%, rgba(5, 18, 52, 0) 100%); |
|
|
|
} |
|
|
|
|
|
|
|
.module-links { |
|
|
|
height: 36px; |
|
|
|
margin-left:120px; |
|
|
|
display: flex; |
|
|
|
align-items: stretch; |
|
|
|
} |
|
|
|
|
|
|
|
.module-link { |
|
|
|
position: relative; |
|
|
|
min-width: 90px; |
|
|
|
height: 36px; |
|
|
|
padding: 0 24px; |
|
|
|
border: 0; |
|
|
|
border-right: 0; |
|
|
|
color: #c9dcf8; |
|
|
|
background: transparent; |
|
|
|
font: inherit; |
|
|
|
font-size: 14px; |
|
|
|
font-weight: 900; |
|
|
|
letter-spacing: 1px; |
|
|
|
font-family: "PingFang SC", "Microsoft YaHei", sans-serif; |
|
|
|
line-height: 36px; |
|
|
|
text-align: center; |
|
|
|
cursor: pointer; |
|
|
|
transition: color .2s, background-color .2s; |
|
|
|
} |
|
|
|
|
|
|
|
.module-link:not(:last-child)::before { |
|
|
|
content: ""; |
|
|
|
position: absolute; |
|
|
|
top: 11%; |
|
|
|
right: 0; |
|
|
|
width: 1px; |
|
|
|
height: 78%; |
|
|
|
background: linear-gradient(180deg, rgba(90, 133, 197, 0) 0%, rgba(90, 133, 197, .42) 50%, rgba(90, 133, 197, 0) 100%); |
|
|
|
pointer-events: none; |
|
|
|
} |
|
|
|
|
|
|
|
.module-link:hover { |
|
|
|
color: #54ffff; |
|
|
|
background: transparent; |
|
|
|
} |
|
|
|
|
|
|
|
.module-link.active { |
|
|
|
position: relative; |
|
|
|
color: #3FFFFE; |
|
|
|
font-size: 14px; |
|
|
|
letter-spacing: 1px; |
|
|
|
font-weight: 900; |
|
|
|
background: transparent; |
|
|
|
box-shadow: none; |
|
|
|
} |
|
|
|
|
|
|
|
.module-link.active::after { |
|
|
|
content: ''; |
|
|
|
position: absolute; |
|
|
|
left: 0; |
|
|
|
right: 0; |
|
|
|
bottom: -2px; |
|
|
|
height: 24px; |
|
|
|
transform: scaleX(-1) scaleY(-1); |
|
|
|
background-image: radial-gradient(circle at 50% 0%, #00CBDA 0%, rgba(23, 88, 93, 0) 47%, rgba(23, 47, 93, 0) 61%); |
|
|
|
background-size: 100% 100%; |
|
|
|
pointer-events: none; |
|
|
|
} |
|
|
|
|
|
|
|
.station-select { |
|
|
|
width: 176px; |
|
|
|
} |
|
|
|
|
|
|
|
.station-select ::v-deep .el-input__inner { |
|
|
|
height: 26px; |
|
|
|
padding: 0 30px 0 12px; |
|
|
|
color: #dcecff; |
|
|
|
font-size: 14px; |
|
|
|
letter-spacing: 1px; |
|
|
|
font-family: "PingFang SC", "Microsoft YaHei", sans-serif; |
|
|
|
line-height: 24px; |
|
|
|
background: rgba(9, 31, 89, .82); |
|
|
|
border: 1px solid #6b9deb; |
|
|
|
border-radius: 2px; |
|
|
|
} |
|
|
|
|
|
|
|
.station-select ::v-deep .el-input__suffix { |
|
|
|
color: #b5d9ff; |
|
|
|
} |
|
|
|
|
|
|
|
::v-deep .station-select-popper .el-select-dropdown__item { |
|
|
|
font-size: 14px; |
|
|
|
letter-spacing: 1px; |
|
|
|
font-family: "PingFang SC", "Microsoft YaHei", sans-serif; |
|
|
|
} |
|
|
|
|
|
|
|
.fixed-header { |
|
|
|
position: fixed; |
|
|
|
top: 0; |
|
|
|
@ -126,6 +314,10 @@ export default { |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.hideSidebar .module-links { |
|
|
|
margin-left: 54px; |
|
|
|
} |
|
|
|
|
|
|
|
.hideSidebar .fixed-header { |
|
|
|
margin-left: 0; |
|
|
|
width: 100%; |
|
|
|
@ -143,6 +335,11 @@ export default { |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.sidebarHide .module-links, |
|
|
|
.mobile .module-links { |
|
|
|
margin-left: 12px; |
|
|
|
} |
|
|
|
|
|
|
|
.app-wrapper.patrolWorkspace { |
|
|
|
::v-deep .sidebar-container { |
|
|
|
top: 0 !important; |
|
|
|
|
