126 lines
3.5 KiB
Vue
126 lines
3.5 KiB
Vue
<template>
|
||
<Grid :rows="['50px', 1]" style="height: 100%">
|
||
<Flex jc="fe" style="grid-area: 1 / 1 / 2 / 2">
|
||
<span class="welcome-content">{{ userInfo.nickName }}，欢迎您！</span>
|
||
</Flex>
|
||
<Flex ai="c" jc="c" style="grid-area: 1 / 1 / 3 / 2">
|
||
<Grid style="width: 917px; height: 445px" :columns="[1, 1, 1]" :rows="[1, 1]">
|
||
<Flex
|
||
v-for="module in systemModules"
|
||
:key="module.moduleCode"
|
||
fd="co"
|
||
ai="c"
|
||
jc="sb"
|
||
class="module-block"
|
||
@click="handleClick(module)"
|
||
>
|
||
<img class="icon" :src="module.icon" alt="" />
|
||
<div class="title">{{ module.moduleName }}</div>
|
||
</Flex>
|
||
</Grid>
|
||
</Flex>
|
||
</Grid>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapState } from 'vuex'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
systemPathMap: {
|
||
db_system: '/simulationScene/database',
|
||
simulation_system: '/simulationScene/simulationModel',
|
||
scenario_system: '/simulationScene/sceneEditing',
|
||
display_system: '/simulationScene/display',
|
||
evaluation_system: '/simulationScene/evaluation',
|
||
},
|
||
systemModules: [
|
||
{
|
||
moduleCode: 'db_system',
|
||
moduleName: '数据库子系统',
|
||
icon: require('@/assets/images/simulation-scene/system-icon/database.png'),
|
||
modulePath: '/simulationScene/database',
|
||
},
|
||
{
|
||
moduleCode: 'simulation_system',
|
||
moduleName: '仿真模型子系统',
|
||
icon: require('@/assets/images/simulation-scene/system-icon/model.png'),
|
||
modulePath: '/simulationScene/simulationModel',
|
||
},
|
||
{
|
||
moduleCode: 'scenario_system',
|
||
moduleName: '场景编辑子系统',
|
||
icon: require('@/assets/images/simulation-scene/system-icon/editing.png'),
|
||
modulePath: '/simulationScene/sceneEditing',
|
||
},
|
||
{
|
||
moduleCode: 'display_system',
|
||
moduleName: '显示子系统',
|
||
icon: require('@/assets/images/simulation-scene/system-icon/display.png'),
|
||
modulePath: '/simulationScene/display',
|
||
},
|
||
{
|
||
moduleCode: 'evaluation_system',
|
||
moduleName: '评估子系统',
|
||
icon: require('@/assets/images/simulation-scene/system-icon/evaluation.png'),
|
||
modulePath: '/simulationScene/evaluation',
|
||
},
|
||
{
|
||
moduleCode: 'control_system',
|
||
moduleName: '系统控制子系统',
|
||
icon: require('@/assets/images/simulation-scene/system-icon/database.png'),
|
||
modulePath: '/simulationScene/centralControl',
|
||
},
|
||
],
|
||
}
|
||
},
|
||
computed: {
|
||
...mapState({
|
||
userInfo: (state) => state.user.info,
|
||
}),
|
||
},
|
||
methods: {
|
||
handleClick(module) {
|
||
window.open(
|
||
window.location.origin + module.modulePath,
|
||
'_blank',
|
||
'height=' +
|
||
window.screen.height +
|
||
',width=' +
|
||
window.screen.width +
|
||
',top=0,left=0,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no'
|
||
)
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.welcome-content {
|
||
font-size: 20px;
|
||
line-height: 50px;
|
||
font-weight: bolder;
|
||
color: #00deff;
|
||
letter-spacing: 2px;
|
||
margin: 0 20px;
|
||
}
|
||
.module-block {
|
||
border: 1px solid #06445f;
|
||
background-color: #062e45;
|
||
padding-bottom: 32px;
|
||
cursor: pointer;
|
||
.icon {
|
||
transform: translateY(calc(80px - 50%));
|
||
}
|
||
.title {
|
||
color: #9cd3f5;
|
||
font-size: 24px;
|
||
line-height: 32px;
|
||
}
|
||
}
|
||
.module-block:hover {
|
||
border-color: #00deff;
|
||
}
|
||
</style>
|