|
|
|
@ -2,7 +2,12 @@ |
|
|
|
<div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}"> |
|
|
|
<div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/> |
|
|
|
<!-- Desktop keeps the vertical navigation visible alongside the new horizontal bar. --> |
|
|
|
<sidebar v-if="device !== 'mobile' || sidebar.opened" class="sidebar-container"/> |
|
|
|
<sidebar |
|
|
|
v-if="device !== 'mobile' || sidebar.opened" |
|
|
|
class="sidebar-container" |
|
|
|
:class="{ 'sidebar-wide': sidebarWide }" |
|
|
|
@menu-depth-change="setSidebarWide" |
|
|
|
/> |
|
|
|
<div :class="{hasTagsView:needTagsView,sidebarHide:sidebar.hide}" class="main-container"> |
|
|
|
<div class="layout-header" :class="{'fixed-header':fixedHeader}"> |
|
|
|
<navbar /> |
|
|
|
@ -18,21 +23,6 @@ |
|
|
|
>{{ item.label }}</button> |
|
|
|
</div> |
|
|
|
<!-- station selector removed --> |
|
|
|
<!-- <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> |
|
|
|
@ -50,7 +40,6 @@ 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', |
|
|
|
@ -64,10 +53,9 @@ export default { |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
stationOptions: [], |
|
|
|
selectedStation: '', |
|
|
|
sidebarWide: false, |
|
|
|
moduleLinks: [ |
|
|
|
{ key: 'home', label: '动环巡检', path: '/index' } |
|
|
|
{ key: 'home', label: '', path: '/index' } |
|
|
|
] |
|
|
|
} |
|
|
|
}, |
|
|
|
@ -87,7 +75,8 @@ export default { |
|
|
|
openSidebar: this.sidebar.opened, |
|
|
|
withoutAnimation: this.sidebar.withoutAnimation, |
|
|
|
mobile: this.device === 'mobile', |
|
|
|
patrolWorkspace: this.isPatrolWorkspace |
|
|
|
patrolWorkspace: this.isPatrolWorkspace, |
|
|
|
sidebarWide: this.sidebarWide |
|
|
|
} |
|
|
|
}, |
|
|
|
isPatrolWorkspace() { |
|
|
|
@ -100,32 +89,13 @@ export default { |
|
|
|
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) |
|
|
|
}, |
|
|
|
setSidebarWide(hasNestedMenus) { |
|
|
|
this.sidebarWide = hasNestedMenus |
|
|
|
}, |
|
|
|
handleClickOutside() { |
|
|
|
this.$store.dispatch('app/closeSideBar', { withoutAnimation: false }) |
|
|
|
} |
|
|
|
@ -248,46 +218,6 @@ export default { |
|
|
|
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; |
|
|
|
@ -310,6 +240,16 @@ export default { |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.sidebarWide .layout-header { |
|
|
|
margin-left: -$base-sidebar-wide-width; |
|
|
|
width: calc(100% + #{$base-sidebar-wide-width}); |
|
|
|
|
|
|
|
.tags-view-container { |
|
|
|
width: calc(100% - #{$base-sidebar-wide-width}); |
|
|
|
margin-left: $base-sidebar-wide-width; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.hideSidebar .module-links { |
|
|
|
margin-left: 54px; |
|
|
|
} |
|
|
|
|
