ts/src/views/Content/index.vue

<script setup>
import { RepeatSharp } from '@vicons/ionicons5'
import HeaderCom from './components/Header/index.vue'
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 { useWeather } from '../Weather/hooks/weather'
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()
// })
const { showWeather } = useWeather()
</script>
<template>
  <div class="flex flex-col w-h-full">
    <!-- <div class="absolute z-20 h-8 w-full bg-[#1a222988]"></div> -->
    <header-com />
    <!-- <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.3fr_3fr_1.3fr] 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">
        <div class="absolute top-2 z-30 flex w-full justify-between">
          <div class="btn-class left"></div>
          <div
            class="btn-class right"
            :class="{ checked: showWeather }"
            @click="showWeather = !showWeather"
          ></div>
        </div>
        <!-- <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);
}

.btn-class {
  @apply h-[28px] w-[110px];
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  letter-spacing: 4px;
  color: #a7cae0;
  cursor: pointer;
  background: linear-gradient(
    90deg,
    rgba(47, 255, 255, 0.4) 0%,
    rgba(8, 77, 126, 0.4) 25%,
    rgba(8, 77, 126, 0.4) 70%,
    rgba(47, 255, 255, 0.4) 100%
  );
  filter: drop-shadow(inset 0 0 0 2px red);
  clip-path: polygon(
    0% 0%,
    71.67% 0%,
    79.33% 6%,
    84% 15.33%,
    88% 28%,
    91% 41.67%,
    94.33% 59.33%,
    97% 74%,
    99% 88%,
    100% 100%,
    0% 100%
  );
  border-radius: 5px;
  &:hover {
    background: linear-gradient(
        180deg,
        rgba(8, 77, 126, 0.2) 0%,
        rgba(8, 77, 126, 0.42) 100%
      ),
      rgba(47, 255, 255, 0.4);
    box-shadow: inset 0 0 12px rgba(151, 200, 255, 0.44);
  }

  &::after {
    content: '显示天气';
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    // color: '#a7cae0';
    // background: var(--gradient-bg);
    // background-clip: text;
  }
}

.checked {
  color: #f2f7fb;
  background: linear-gradient(
      180deg,
      rgba(8, 77, 126, 0.2) 0%,
      rgba(8, 77, 126, 0.42) 100%
    ),
    rgba(47, 255, 255, 0.4);
  box-shadow: inset 0 0 12px rgba(151, 200, 255, 0.44);
}

.left {
  &::after {
    content: '热力图';
  }
}
.right {
  transform: rotateY(180deg);
  &::after {
    transform: rotateY(-180deg);
  }
}
</style>