ts/src/views/Content/index.vue

<script setup>
import { ArrowLeft, ArrowRight } from '@vicons/tabler'
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 MultiHisTrajectory from '../Mubiao/components/MultiHisTrajectory/index.vue'
import YsHangjing from '../YsHangjing/index.vue'

import TextMessage from '../TextReport/components/Message'
// 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 { useMultiMBTrajectory } from '../Mubiao/components/MultiHisTrajectory/hooks/multiMbTraj'
// import { useWeather } from '../Weather/hooks/weather'
import DetailsModal from './components/DetailsModal/index.vue'

const { getTextConfigs, initWebSocket } = useTextReport()

const { showHisImageCom } = useHisImage()
const { showHisTrajCom } = useMBTrajectory()
const { showMultiHisTrajCom } = useMultiMBTrajectory()
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('wx')

const panelList = [
  // {
  //   id: 'hj-2',
  //   value: 'hj-2',
  //   name: '事件航景',
  // },
  {
    id: 'ss',
    value: 'ss',
    name: '设施',
  },
  {
    id: 'zb',
    value: 'zb',
    name: '装备',
  },
  {
    id: 'wx',
    value: 'wx',
    name: '卫星',
  },
  {
    id: 'hj-2',
    value: 'hj-2',
    name: '航景',
  },
]

const hidePanel = ($event, checked) => {
  $event.preventDefault()
  if (showPanelName.value === checked) {
    showPanelName.value = null
  } else {
    showPanelName.value = checked
  }
}
const showTextReport = ref(false)
const showOrHideTextReport = () => {
  showTextReport.value = !showTextReport.value
}

// 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.5fr_3fr_1.5fr] grid-rows-1 gap-1">
      <div class="left-panel pl-8">
        <div
          class="radio-group absolute -left-4 top-[15%] z-30 flex w-12 translate-y-[-50%] transform flex-col"
        >
          <template v-for="panel in panelList" :key="panel.id">
            <input
              type="radio"
              :id="panel.id"
              name="selector"
              v-model="showPanelName"
              :value="panel.value"
            />
            <label for="wx" @click="hidePanel($event, panel.value)">{{
              panel.name
            }}</label>
          </template>
        </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>
        <div
          class="btn-transform z-20 w-h-full"
          :class="showTextReport ? '' : 'btn-transform-pos'"
        >
          <n-button
            class="absolute -left-[16px] top-5 z-30 border border-[#29baf1] bg-[var(--color-bg)]"
            size="tiny"
            @click="showOrHideTextReport"
          >
            <n-icon
              class="btn-transform"
              :class="showTextReport ? '' : 'icon-transform'"
              ><arrow-right
            /></n-icon>
          </n-button>
          <!-- <transition name="slide2">.slice(0, 3) -->
          <panel title="文字报"><text-report :tabs="types" /></panel>
          <!-- </transition> -->
        </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>
    <div class="absolute bottom-0 flex h-full w-full flex-col justify-end">
      <text-message class="absolute z-30 h-[200px]"></text-message>
      <mubiao-his-trajectory
        v-if="showHisTrajCom"
        class="z-30 h-[260px]"
      ></mubiao-his-trajectory>
      <multi-his-trajectory
        v-if="showMultiHisTrajCom"
        class="z-30 h-[260px]"
      ></multi-his-trajectory>
      <his-images v-if="showHisImageCom" class="z-30 h-[260px]"></his-images>
    </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);
}

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

.slide2-enter-from,
.slide2-leave-to {
  transform: translateX(100%);
  filter: blur(4px);
}

.btn-transform {
  transition: transform 0.8s ease;
}
.btn-transform-pos {
  transform: translateX(99%);
}

.icon-transform {
  transform: rotate(180deg);
}

// @keyframes btn-trans {
//   from {
//     transform: translateX(0%);
//   }
//   to {
//     transform: translateX(100%);
//   }
// }

// .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;
//   }
// }
</style>