LSSE-front/src/views/user/Welcome.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 { getAction } from '@/api/manage'
import { mapState } from 'vuex'

export default {
  data() {
    return {
      openChildren: [],
      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: '/bzstlsjk/zzllsjk',
        },
        {
          moduleCode: 'simulation_system',
          moduleName: '仿真模型子系统',
          icon: require('@/assets/images/simulation-scene/system-icon/model.png'),
          modulePath: '/subsystem/modelEntry',
        },
        {
          moduleCode: 'scenario_system',
          moduleName: '场景编辑子系统',
          icon: require('@/assets/images/simulation-scene/system-icon/editing.png'),
          modulePath: '/subsystem/sceneEntry',
        },
        {
          moduleCode: 'display_system',
          moduleName: '显示子系统',
          icon: require('@/assets/images/simulation-scene/system-icon/display.png'),
          modulePath: '/subsystem/displayEntry',
        },
        {
          moduleCode: 'evaluation_system',
          moduleName: '评估子系统',
          icon: require('@/assets/images/simulation-scene/system-icon/evaluation.png'),
          modulePath: window._CONFIG.evaluationSrc,
        },
        {
          moduleCode: 'control_system',
          moduleName: '系统控制子系统',
          icon: require('@/assets/images/simulation-scene/system-icon/database.png'),
          modulePath: '/subSystem/control',
        },
      ],
    }
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.info,
    }),
  },
  async created() {
    const searchParams = new URLSearchParams(window.location.search)
    const searchCode = searchParams.get('code')
    const localCode = window.localStorage.getItem('code')
    if (searchCode) {
      window.localStorage.setItem('code', searchCode)
      window.location.href = window.location.origin + window.location.pathname
    } else if (localCode) {
      try {
        const tokenRes = await getAction('/oauth2/thirdLogin', { code: localCode })
        storage.set(ACCESS_TOKEN, tokenRes.data.token, 7 * 24 * 60 * 60 * 1000)
        this.$store.commit('SET_TOKEN', tokenRes.data.token)
        await this.$store.dispatch('GetInfo')
      } catch (error) {
        console.log(error)
      } finally {
        window.localStorage.removeItem('code')
      }
    } else {
      this.$store.dispatch('GetInfo')
    }
    window.addEventListener('beforeunload', (e) => {
      this.openChildren.forEach((childWindow) => {
        childWindow && childWindow.close()
      })
      return true // 必须设置 returnValue 才能显示确认框
    })
  },
  methods: {
    handleClick(module) {
      this.openChildren.push(
        window.open(
          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: #00d5fe;
  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: #00d5fe;
}
</style>