93 lines
2.2 KiB
Vue
93 lines
2.2 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="index"
|
||
|
|
:class="['system-block', `system-${systemStatusMap[block.statusKey]}`]"
|
||
|
|
:style="blockStyleMap[index]"
|
||
|
|
v-flex.v="['c', 'sb']"
|
||
|
|
@click="handleClick(block)"
|
||
|
|
>
|
||
|
|
<img class="icon" :src="block.icon" alt="" />
|
||
|
|
<div class="title">{{ block.title }}</div>
|
||
|
|
<div :class="['status', `status-${systemStatusMap[block.statusKey]}`]">
|
||
|
|
{{ systemStatusDesc[systemStatusMap[block.statusKey]] }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { 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,
|
||
|
|
}),
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
handleClick(block) {
|
||
|
|
if (this.systemStatusMap[block.statusKey] === 'unstart') return
|
||
|
|
this.$router.push(block.path)
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</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-running {
|
||
|
|
background-color: #11b740;
|
||
|
|
}
|
||
|
|
.status-unstart {
|
||
|
|
background-color: #9d9d9d;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.system-unstart {
|
||
|
|
cursor: not-allowed;
|
||
|
|
}
|
||
|
|
.system-running:hover {
|
||
|
|
border-color: #00f2fe;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|