98 lines
2.4 KiB
Vue
98 lines
2.4 KiB
Vue
<template>
|
|
<div class="system-select-page" v-grid-box="{ columns: [1, 1, 1, 1, 1, 1], rows: [1, 1], gap: '40px' }">
|
|
<div
|
|
v-for="(block, index) in systemModules"
|
|
:key="block.moduleCode"
|
|
:class="['system-block', 'flex-c', 'ai-c', 'jc-sb', `system-${block.moduleStatus}`]"
|
|
:style="blockStyleMap[index]"
|
|
@click="handleClick(block)"
|
|
>
|
|
<img class="icon" :src="systemIconMap[block.moduleCode]" alt="" />
|
|
<div class="title">{{ block.moduleName }}</div>
|
|
<div :class="['status', `status-${block.moduleStatus}`]">
|
|
{{ systemStatusDesc[block.moduleStatus] }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapActions, mapState } from 'vuex'
|
|
|
|
export default {
|
|
name: 'SimulationSceneSystemSelect',
|
|
data() {
|
|
return {
|
|
blockStyleMap: [
|
|
{ gridColumn: '2 / 4' },
|
|
{ gridColumn: '4 / 6' },
|
|
{ gridColumn: '1 / 3' },
|
|
{ gridColumn: '3 / 5' },
|
|
{ gridColumn: '5 / 7' },
|
|
],
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState({
|
|
systemModules: (state) => state.simulation.systemModules,
|
|
systemStatusMap: (state) => state.simulation.systemStatusMap,
|
|
systemStatusDesc: (state) => state.simulation.systemStatusDesc,
|
|
systemIconMap: (state) => state.simulation.systemIconMap,
|
|
systemPathMap: (state) => state.simulation.systemPathMap,
|
|
}),
|
|
},
|
|
created() {
|
|
this.getSystemModules()
|
|
},
|
|
methods: {
|
|
...mapActions(['getSystemModules']),
|
|
handleClick(block) {
|
|
if (block.moduleStatus === '0') return
|
|
this.$router.push(this.systemPathMap[block.moduleCode])
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.system-select-page {
|
|
padding: 40px;
|
|
.system-block {
|
|
border: 1px solid #06445f;
|
|
background-color: #062e45;
|
|
position: relative;
|
|
padding-bottom: 64px;
|
|
cursor: pointer;
|
|
.icon {
|
|
transform: translateY(calc(180px - 50%)) scale(1.5, 1.5);
|
|
}
|
|
.title {
|
|
color: #9cd3f5;
|
|
font-size: 36px;
|
|
line-height: 39px;
|
|
}
|
|
.status {
|
|
position: absolute;
|
|
right: 15px;
|
|
top: 15px;
|
|
padding: 12px 15px;
|
|
font-size: 21px;
|
|
line-height: 1;
|
|
color: #ffffff;
|
|
}
|
|
.status-1 {
|
|
background-color: #11b740;
|
|
}
|
|
.status-0 {
|
|
background-color: #9d9d9d;
|
|
}
|
|
}
|
|
.system-0 {
|
|
cursor: not-allowed;
|
|
}
|
|
.system-1:hover {
|
|
border-color: #00f2fe;
|
|
}
|
|
}
|
|
</style>
|