<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 Daodan from '../Daodan' import TextMessage from '../TextReport/components/Message' import DaodanTestConfig from '../Daodan/components/ConfigContainer' // 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 { useDaodan } from '../Daodan/ddHooks' // 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 { showDdConfigCom } = useDaodan() 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('zb') const panelList = [ // { // id: 'hj-2', // value: 'hj-2', // name: '事件航景', // }, { id: 'ss', value: 'ss', name: '设施', }, { id: 'zb', value: 'zb', name: '装备', }, { id: 'dd', value: 'dd', name: 'DD', }, { 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-[18%] 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> <transition name="slide"> <div class="left-panel-wrapper" v-show="showPanelName === 'dd'"> <panel title="DD"> <daodan /> </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 items-center justify-end" > <text-message class="absolute h-[200px] w-full"></text-message> <mubiao-his-trajectory v-if="showHisTrajCom" class="z-30 h-[260px] w-full" ></mubiao-his-trajectory> <multi-his-trajectory v-if="showMultiHisTrajCom" class="z-30 h-[260px] w-full" ></multi-his-trajectory> <his-images v-if="showHisImageCom" class="z-30 h-[260px] w-full" ></his-images> <daodan-test-config v-show="showDdConfigCom" class="z-30 h-[90%] w-[75%]" ></daodan-test-config> </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>