ts/src/views/Content/index1.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 Hangjing from '../Hangjing/index.vue'
import Mubiao from '../Mubiao/index.vue'

import TextDetailModal from '../TextReport/components/DetailsModal/index.vue'
import { useTextReport } from '../TextReport/hooks/text'
import { useSatellite } from '../Satellite/hooks/satellite'

const { getTextConfigs, initWebSocket } = useTextReport()
const { addSatellite } = useSatellite()

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

onMounted(async () => {
  await getConfig()
  initWebSocket()
  addSatellite(1)
})
// 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')
</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 h-25 absolute z-20 w-full"></div>
    <div class="h-10 w-full"></div>
    <div class="title-container">xxxxx平台</div>
    <div
      class="radio-group absolute top-[50%] -left-4 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>

    <div class="grid h-full grid-cols-[1.8fr_3fr_1.6fr] grid-rows-1 gap-1 p-2">
      <!-- <div class="left-panel">
        <transition name="slide">
          <div class="left-panel-wrapper" v-show="showPanelName === 'hj'">
            <div class="left-panel-content">
              <n-button ghost @click="showPanelName = 'mb'">
                <template #icon>
                  <n-icon><repeat-sharp /></n-icon>
                </template>
              </n-button>
            </div>
            <panel>
              <hangjing />
            </panel>
          </div>
        </transition>
        <transition name="slide">
          <div class="left-panel-wrapper" v-show="showPanelName === 'mb'">
            <div class="left-panel-content">
              <n-button ghost @click="showPanelName = 'hj'">
                <template #icon>
                  <n-icon><repeat-sharp /></n-icon>
                </template>
              </n-button>
            </div>
            <panel>
              <mubiao />
            </panel>
          </div>
        </transition>
      </div> -->
      <!-- flex flex-col gap-1  -->
      <div class="left-panel pl-8">
        <transition name="slide">
          <div class="w-h-full" v-show="showPanelName === 'ss'">
            <panel><base-mb /></panel>
          </div>
        </transition>
        <transition name="slide">
          <div class="w-h-full" v-show="showPanelName === 'hj-1'">
            <panel><hangjing /></panel>
          </div>
        </transition>
        <transition name="slide">
          <div class="w-h-full" v-show="showPanelName === 'zb'">
            <panel><mubiao /></panel></div
        ></transition>
      </div>
      <div class=""></div>
      <div class="z-20 grid grid-cols-1 grid-rows-3 gap-1">
        <div class="w-h-full">
          <panel><text-report :tabs="types.slice(0, 3)" /></panel>
        </div>
        <div class="w-h-full">
          <panel><text-report :tabs="types.slice(3, 6)" /></panel>
        </div>
        <div class="w-h-full">
          <panel><text-report :tabs="types.slice(6, 7)" /></panel>
        </div>
      </div>
    </div>

    <text-detail-modal></text-detail-modal>
  </div>
</template>

<style lang="scss" scoped>
.title-container {
  @apply absolute left-[50%] top-3 z-20 h-20 text-5xl font-bold italic tracking-[18px];
  background: linear-gradient(
    45deg,
    #71ffff,
    #08ffff,
    #29baf1,
    #29baf1,
    #08ffff,
    #71ffff
  );
  background-size: 200% 200%;

  animation: gradientAnimation 3s ease infinite;
  background-clip: text;
  color: transparent;
  transform: translateX(-50%);
  // text-shadow: 0 0 4px #71ffff;
}
@keyframes gradientAnimation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 200% 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 w-h-full;
    .left-panel-content {
      @apply absolute right-[-37px] top-[78px];
    }
  }
}

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

// .slide-enter-to,
// .slide-leave-from {
//   scale: 1;
//   max-height: 100%;
// }

// .slide-enter-from,
// .slide-leave-to {
//   max-height: 0;
//   scale: 0;
//   opacity: 0%;
//   transform: translateX(-200%);
//   filter: blur(4px);
// }

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

.slide-enter-to,
.slide-leave-from {
  // scale: 1;
  // max-height: 100%;
  height: 100%;
  transform: translateX(0);
}

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

$bg: #30688b;
$fg: lighten($bg, 20%);
$borderWidth: 1px;

input[type='radio'] {
  position: absolute;
  visibility: hidden;
  display: none;
}

label {
  color: lighten($bg, 40%);
  display: inline-block;
  cursor: pointer;
  font-weight: bold;
  padding: 5px 12px;
  // width: 30px;
  // writing-mode: vertical-rl;
  text-align: end;
}

input[type='radio']:checked + label {
  color: lighten($bg, 60%);
  background: $fg;
}

label + input[type='radio'] + label {
  border-top: solid $borderWidth $fg;
  border-image: linear-gradient(
      45deg,
      #71ffff,
      #08ffff,
      #29baf1,
      #29baf1,
      #08ffff,
      #71ffff
    )
    1;
}
.radio-group {
  border: solid $borderWidth $fg;
  border-image: linear-gradient(
      45deg,
      #71ffff,
      #08ffff,
      #29baf1,
      #29baf1,
      #08ffff,
      #71ffff
    )
    1;
  display: inline-block;
  // border-radius: 10px;
  overflow: hidden;
}
</style>