ts/src/views/Content/index.vue

<script setup>
import { RepeatSharp } from '@vicons/ionicons5'
import Panel from '@/components/Panel/index.vue'
// import Header from './components/Header.vue'
import Satellite from '../Satellite/index.vue'
import TextReport from '../TextReport/index.vue'
// import TextList from '../TextReport/components/List/index.vue'
import BaseMb from '../BaseMB/index.vue'
import HisImages from '../BaseMB/components/HisImages/index.vue'
import Hangjing from '../Hangjing/index.vue'
import Mubiao from '../Mubiao/index.vue'
import MubiaoHisTrajectory from '../Mubiao/components/HisTrajectory/index.vue'
import YsHangjing from '../YsHangjing/index.vue'
import HeatMap from '../Mubiao/components/HeatMap/index.vue'

// import TextDetailModal from '../TextReport/components/DetailsModal/index.vue'
import { useTextReport } from '../TextReport/hooks/text'
import { useHisImage } from '../BaseMB/components/HisImages/hooks/hisImage'
import { useMBTrajectory } from '../Mubiao/components/HisTrajectory/hooks/mbTraj'
import DetailsModal from './components/DetailsModal/index.vue'

const { getTextConfigs, initWebSocket } = useTextReport()

const { showHisImageCom } = useHisImage()
const { showHisTrajCom } = useMBTrajectory()
const getConfig = async () => {
  const res = await getTextConfigs()
  // console.log(res)
  window.settings['textConfigs'] = res
}

onMounted(async () => {
  await getConfig()

  initWebSocket()
})
// setInterval(() => {
//   console.log(eventData)
// }, 1000)
const types = [
  { name: 'YH', value: 'wzbYh' },
  { name: 'SC', value: 'wzbSC' },
  { name: 'PS', value: 'wzbPs' },
  { name: 'LL', value: 'wzbLl' },
  { name: 'ZW', value: 'wzbZw' },
  { name: 'PP', value: 'wzbPp' },
  { name: 'XW', value: 'wzbXw' },
]

const showPanelName = ref('ss')

const worldTime = ref('')
const getTime = () => {
  worldTime.value = new Date().toLocaleString()
  requestAnimationFrame(getTime)
}
onMounted(() => {
  getTime()
})
</script>
<template>
  <div class="flex flex-col w-h-full">
    <!-- <div class="absolute z-20 h-8 w-full bg-[#1a222988]"></div> -->

    <div class="header-bg absolute z-20 h-[100px] w-full"></div>
    <div
      class="time-bg z-20 mb-1 flex h-[30px] w-full items-center justify-between px-5 text-2xl"
    >
      <div class="time-container">
        <div class="time-title">世界时</div>
        <div class="bgc-animation">
          {{ worldTime }}
        </div>
      </div>
      <div class="time-container bgc-animation">
        <div class="bgc-animation">{{ worldTime }}</div>
        <div class="time-title">作战时</div>
      </div>
    </div>
    <div class="title-container bgc-animation">xxxxx平台</div>

    <div class="grid flex-1 grid-cols-[1.5fr_3fr_1.5fr] grid-rows-1 gap-1 p-2">
      <div class="left-panel pl-8">
        <div
          class="radio-group absolute top-[50%] -left-7 z-30 flex w-14 translate-y-[-50%] transform flex-col"
        >
          <input
            type="radio"
            id="hj-1"
            name="selector"
            v-model="showPanelName"
            value="hj-1"
          />
          <label for="hj-1">原始航景</label>
          <input
            type="radio"
            id="hj-2"
            name="selector"
            v-model="showPanelName"
            value="hj-2"
          />
          <label for="hj-2">值班航景</label>
          <input
            type="radio"
            id="ss"
            name="selector"
            v-model="showPanelName"
            value="ss"
          />
          <label for="ss">设施</label>
          <input
            type="radio"
            id="zb"
            name="selector"
            v-model="showPanelName"
            value="zb"
          />
          <label for="zb">装备</label>
          <input
            type="radio"
            id="wx"
            name="selector"
            v-model="showPanelName"
            value="wx"
          />
          <label for="wx">卫星</label>
        </div>
        <transition name="slide">
          <div class="left-panel-wrapper" v-show="showPanelName === 'hj-1'">
            <panel title="原始航景">
              <ys-hangjing />
            </panel>
          </div>
        </transition>
        <transition name="slide">
          <div class="left-panel-wrapper" v-show="showPanelName === 'hj-2'">
            <panel title="值班航景">
              <hangjing />
            </panel>
          </div>
        </transition>
        <transition name="slide">
          <div class="left-panel-wrapper" v-show="showPanelName === 'zb'">
            <panel title="装备目标">
              <mubiao />
            </panel>
          </div>
        </transition>
        <transition name="slide">
          <div class="left-panel-wrapper" v-show="showPanelName === 'ss'">
            <panel title="设施目标">
              <base-mb />
            </panel>
          </div>
        </transition>
        <transition name="slide">
          <div class="left-panel-wrapper" v-show="showPanelName === 'wx'">
            <panel title="卫星">
              <satellite />
            </panel>
          </div>
        </transition>
      </div>
      <div class="flex h-full flex-col justify-end">
        <!-- <his-images
          class="transition-duration-1000 z-20 row-start-5 transition-all"
        ></his-images> -->
        <mubiao-his-trajectory
          v-if="showHisTrajCom"
          class="z-20 h-[260px]"
        ></mubiao-his-trajectory>
        <his-images v-if="showHisImageCom" class="z-20 h-[260px]"></his-images>
        <heat-map class="z-20"></heat-map>
      </div>
      <div class="z-20 grid grid-cols-1 grid-rows-3 gap-1">
        <div class="w-h-full">
          <panel title="文字报"
            ><text-report :tabs="types.slice(0, 3)"
          /></panel>
        </div>
        <div class="w-h-full">
          <panel title="文字报"
            ><text-report :tabs="types.slice(3, 6)"
          /></panel>
        </div>
        <div class="w-h-full">
          <panel title="文字报"
            ><text-report :tabs="types.slice(6, 7)"
          /></panel>
        </div>
      </div>
    </div>

    <details-modal></details-modal>
  </div>
</template>

<style lang="scss" scoped>
@import './style/radio.scss';

.time-bg {
  background-color: rgba(26, 34, 41, 0.4);
  .time-container {
    @apply flex items-center justify-center gap-2;
    font-family: Digital;
    .time-title {
      @apply h-6 border border-[#29baf1] px-2 text-sm leading-5 text-[#29baf1];
    }
  }
}

.bgc-animation {
  background: var(--gradient-bg);
  background-size: 200% 200%;

  animation: gradientAnimation 3s ease infinite alternate;
  background-clip: text;
  color: transparent;
}
.title-container {
  @apply absolute left-[50%] top-3 z-20 h-20 text-5xl font-bold tracking-[18px];

  transform: translateX(-50%);
}
@keyframes gradientAnimation {
  0% {
    background-position: 200% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.header-bg {
  background: url('./header.svg') no-repeat;
  background-size: 100% 100%;
}
.left-panel {
  @apply relative z-20 w-h-full;
  &-wrapper {
    @apply absolute h-full;
    width: calc(100% - 2rem);
    .left-panel-content {
      @apply absolute right-[-37px] top-[78px];
    }
  }
}

.slide-enter-active,
.slide-leave-active {
  transition: transform 0.8s ease;
}

.slide-enter-from,
.slide-leave-to {
  transform: translateX(-120%) scale(0.8);
  filter: blur(4px);
}
</style>