MTP20_WEB_GLOBAL/src/packages/pc/components/layouts/page/index.vue

<template>
  <div class="app-page" v-loading="fullLoading" element-loading-text="服务连接中...">
    <div class="app-page__header">
      <app-header>
        <!-- <template #left>
          <i class="icon-fold-expand" title="折叠/展开" @click="isCollapse = !isCollapse">
            <span :class="isCollapse ? 'g-icon-expand' : 'g-icon-fold'"></span>
          </i>
        </template> -->
      </app-header>
    </div>
    <div class="app-page__wrapper" :style="bodyStyles">
      <div class="app-page__sidebar">
        <app-sidebar v-model:collapse="isCollapse" />
      </div>
      <div class="app-page__main">
        <div class="app-page__navbar" v-if="false">
          <app-navbar />
        </div>
        <div id="appPageTeleport" class="app-page__container app-page__teleport"></div>
        <div class="app-page__container">
          <!-- 二级路由 -->
          <router-view v-slot="{ Component, route }">
            <component :is="handleComponent(Component, route)" :key="route.fullPath" />
          </router-view>
        </div>
      </div>
    </div>
    <!-- <HQChart /> -->
    <app-footer class="app-page__footer" :style="footerStyles" @tab-change="onTabChange">
      <div class="iconbar">
        <span @click="minimize">
          <AppIcon icon="ArrowUp" v-if="footerWinType === -1" />
          <AppIcon icon="ArrowDown" v-else />
        </span>
        <span @click="maximize">
          <AppIcon icon="g-icon-minimize2" v-if="footerWinType === 1" />
          <AppIcon icon="g-icon-maximize2" v-else />
        </span>
      </div>
    </app-footer>
    <div class="app-page__statusbar">
      <div class="statusbar-left">
        <span style="font-size: 12px;color: #444f57;padding: 0 5px;">v1.0.{{ version }}</span>
      </div>
      <div class="statusbar-right">
        <ul>
          <li>
            <span>用户ID：</span>
            <span>{{ loginStore.userId }}</span>
          </li>
          <li>
            <span>登录ID：</span>
            <span>{{ loginStore.loginId }}</span>
          </li>
          <li>
            <!-- <span>{{ serverTime?.format('MM/DD') }}</span> -->
            <span>{{ serverTime?.format('HH:mm:ss') }}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted, computed } from 'vue'
import { RouteRecordNormalized, RouteRecordName } from 'vue-router'
import { timerTask } from '@/utils/timer'
import { getServerTime } from '@/services/api/common'
import { useGlobalStore, useLoginStore } from '@/stores'
import eventBus from '@/services/bus'
import moment, { Moment } from 'moment'
import AppIcon from '@pc/components/base/icon/index.vue'
import AppHeader from '../header/index.vue'
import AppFooter from '../footer/index.vue'
import AppNavbar from '../navbar/index.vue'
import AppSidebar from '../sidebar/index.vue'
//import HQChart from '@mobile/components/modules/chart/index.vue'

const globalStore = useGlobalStore()
const loginStore = useLoginStore()
const fullLoading = ref(false)
const isCollapse = ref(globalStore.isMobile)
const footerWinType = ref(0) // -1最小化，0默认，1最大化
const serverTime = ref<Moment>()

const meta = document.getElementsByTagName('meta')
const version = meta.namedItem('revised')?.content ?? '0'

// 手动给组件添加 name 属性，处理缓存 exclude 无效的问题
const handleComponent = (component: Record<'type', { name: RouteRecordName | undefined }>, route: RouteRecordNormalized) => {
  if (component) {
    component.type.name = route.name
  }
  return component
}

const bodyStyles = computed(() => {
  if (footerWinType.value === 1) {
    return {
      flex: 0,
      overflow: 'hidden'
    }
  }
  return {
    flex: 1,
  }
})

const footerStyles = computed(() => {
  switch (footerWinType.value) {
    case 1: {
      return {
        flex: 1,
        height: 'auto'
      }
    }
    case -1: {
      return {
        height: '36px',
        overflow: 'hidden'
      }
    }
    default: {
      return {
        height: '360px'
      }
    }
  }
})

// 最小化
const minimize = () => {
  if (footerWinType.value === -1) {
    footerWinType.value = 0
  } else {
    footerWinType.value = -1
  }
}

// 最大化
const maximize = () => {
  if (footerWinType.value === 1) {
    footerWinType.value = 0
  } else {
    footerWinType.value = 1
  }
}

const onTabChange = () => {
  if (footerWinType.value === -1) {
    footerWinType.value = 0
  }
}

// 校验服务器时间
const checkServerTime = () => {
  getServerTime().then((res) => {
    serverTime.value = moment.parseZone(res.data)
    // 每1分钟同步一次服务器时间
    timerTask.setTimeout(() => {
      checkServerTime()
    }, 60 * 1000, 'getServerTime')
  })
}

// 接收窗口页面状态通知
const documentVisibilityStateNotify = eventBus.$on('DocumentVisibilityStateNotify', (state) => {
  if (state === 'visible') {
    checkServerTime()
  }
})

// 接收交易服务重连通知
const tradeServerReconnectNotify = eventBus.$on('TradeServerReconnectNotify', () => {
  fullLoading.value = true
})

// 接收交易服务重连成功通知
const tradeServerReconnectSuccessNotify = eventBus.$on('TradeServerReconnectSuccessNotify', () => {
  fullLoading.value = false
})

onMounted(() => {
  serverTime.value = moment(new Date())
  timerTask.setInterval(() => {
    serverTime.value = moment(serverTime.value).add(1000, 'ms')
  }, 1000, 'refreshTime')
  checkServerTime()
})

onUnmounted(() => {
  timerTask.clearInterval('refreshTime')
  timerTask.clearTimeout('getServerTime')
  documentVisibilityStateNotify.cancel()
  tradeServerReconnectNotify.cancel()
  tradeServerReconnectSuccessNotify.cancel()
})
</script>

<style lang="less">
@import './index.less';
</style>