update lunbo

src/App.vue

@@ -34,7 +34,7 @@ useWebsocket(store, urlPath.value);
 <template>
   <div id="app-container">
     <MainPage :path="urlPath" />
-    <Slider :size="size" @size-change="setSize" />
+    <!-- <Slider :size="size" @size-change="setSize" /> -->
   </div>
 </template>
 

src/MainPage.vue

@@ -9,8 +9,39 @@ import AlertListPage from "./pages/AlertListPage.vue";
 import DataPage from "./pages/DataPage.vue";
 import DatetimeTool from "./components/HeadTime.vue";
 import TriplePage from "./pages/3D.vue";
+import { useSettings } from "./store/settings";
 
 const props = defineProps(["path"]);
+
+const pages = ['3d', 'data', 'realtime', 'alert']
+const currentPage = ref("3d");
+const handlePageChange = (page) => {
+  currentPage.value = page;
+};
+
+
+const { settings } = useSettings();
+const timer = ref(null);
+watch(() => settings.carousel, val => {
+  if (val) {
+    timer.value = setInterval(() => {
+      handlePageChange(pages[(pages.indexOf(currentPage.value) + 1) % pages.length])
+    }, settings.carouselTime);
+    return;
+  }
+  clearInterval(timer.value);
+  timer.value = null;
+})
+
+watch(() => settings.carouselTime, val => {
+  if (val > 0) {
+    if (timer.value) clearInterval(timer.value);
+    timer.value = setInterval(() => {
+      handlePageChange(pages[(pages.indexOf(currentPage.value) + 1) % pages.length])
+    }, val);
+  }
+})
+
 const pathMap = {
   '/1-1': 1,
   '/1-2': 2,
@@ -25,11 +56,6 @@ const pathMap = {
   '/3-3': 11,
   '/3-4': 12
 }
-
-const currentPage = ref("3d");
-const handlePageChange = (page) => {
-  currentPage.value = page;
-};
 </script>
 
 <template>
@@ -37,13 +63,10 @@ const handlePageChange = (page) => {
     <DatetimeTool v-if="currentPage !== 'announcement'" />
     <Tools v-if="currentPage !== 'announcement'" />
     <AppHeader v-if="currentPage !== 'announcement'" />
-    <AnnoucementPage
-      v-if="currentPage === 'announcement'"
-      class="annoucement-page"
-      @home="() => handlePageChange('3d')"
-    />
+    <AnnoucementPage v-if="currentPage === 'announcement'" class="annoucement-page"
+      @home="() => handlePageChange('3d')" />
     <div v-else class="pages-wrapper">
-      <NavMenu @change="handlePageChange" />
+      <NavMenu @change="handlePageChange" :value="currentPage" />
       <TriplePage v-if="currentPage === '3d'" :line="pathMap[path] ?? '1'" />
       <DataPage v-if="currentPage === 'data'" />
       <AlertListPage v-if="currentPage === 'alert'" />

src/components/NavMenu.vue

@@ -5,7 +5,7 @@ import IconAlert from "../assets/menu_icon/IconAlert.vue";
 import IconChart from "../assets/menu_icon/IconChart.vue";
 import IconRealtime from "../assets/menu_icon/IconRealtime.vue";
 import IconAnnounce from "../assets/menu_icon/IconAnnouncement.vue";
-
+const props = defineProps(['value'])
 const emit = defineEmits(["change"]);
 const handleClick = (page) => {
   emit("change", page);
@@ -17,27 +17,32 @@ const handleClick = (page) => {
     <ul class="flex-list">
       <li>
         <button type="button" @click="(e) => handleClick('3d')">
-          <span style="">三维界面</span><Icon3D class="nav-icon" />
+          <span :style="{color: value == '3d' ? '#b1daff': '#339dff' }">三维界面</span>
+          <Icon3D class="nav-icon" :color="value == '3d' ? '#b1daff': '#339dff'" />
         </button>
       </li>
       <li>
         <button type="button" @click="(e) => handleClick('data')">
-          <span style="">数据界面</span><IconChart class="nav-icon" />
+          <span :style="{color: value == 'data' ? '#b1daff': '#339dff' }">数据界面</span>
+          <IconChart class="nav-icon" :color="value == 'data' ? '#b1daff': '#339dff'" />
         </button>
       </li>
       <li>
         <button type="button" @click="(e) => handleClick('realtime')">
-          <span style="">实时数据</span><IconRealtime class="nav-icon" />
+          <span :style="{color: value == 'realtime' ? '#b1daff': '#339dff' }">实时数据</span>
+          <IconRealtime class="nav-icon" :color="value == 'realtime' ? '#b1daff': '#339dff'" />
         </button>
       </li>
       <li>
         <button type="button" @click="(e) => handleClick('alert')">
-          <span style="">报警列表</span><IconAlert class="nav-icon" />
+          <span :style="{color: value == 'alert' ? '#b1daff': '#339dff' }">报警列表</span>
+          <IconAlert class="nav-icon" :color="value == 'alert' ? '#b1daff': '#339dff'" />
         </button>
       </li>
       <li>
         <button type="button" @click="(e) => handleClick('announcement')">
-          <span style="">公告页面</span><IconAnnounce class="nav-icon" />
+          <span style="">公告页面</span>
+          <IconAnnounce class="nav-icon" />
         </button>
       </li>
     </ul>
@@ -54,6 +59,7 @@ const handleClick = (page) => {
   position: relative;
   top: 72px;
   left: 0;
+  z-index: 10;
 }
 
 .flex-list {
@@ -84,7 +90,7 @@ li {
   gap: 8px;
 }
 
-.nav-menu button > span {
+.nav-menu button>span {
   font-size: 32px;
   letter-spacing: 3px;
   line-height: 45px;
@@ -92,18 +98,18 @@ li {
   text-shadow: 0 5px 1px #001124;
   /* text-shadow: 0 5px 1px #004969; */
 }
-.nav-menu button:hover > span {
-  color: #b1daff;
+
+.nav-menu button:hover>span {
+  color: #b1daff !important;
 }
 </style>
 
 <style>
-.nav-menu button:hover > .nav-icon #icon3d-g,
-.nav-menu button:hover > .nav-icon #alert-rect,
-.nav-menu button:hover > .nav-icon #alert-dot,
-.nav-menu button:hover > .nav-icon #realtime-main,
-.nav-menu button:hover > .nav-icon #announce-main,
-.nav-menu button:hover > .nav-icon #chart-main {
+.nav-menu button:hover>.nav-icon #icon3d-g,
+.nav-menu button:hover>.nav-icon #alert-rect,
+.nav-menu button:hover>.nav-icon #alert-dot,
+.nav-menu button:hover>.nav-icon #realtime-main,
+.nav-menu button:hover>.nav-icon #announce-main,
+.nav-menu button:hover>.nav-icon #chart-main {
   fill: #b1daff !important;
-}
-</style>
+}</style>

src/components/Tools.vue

@@ -3,25 +3,36 @@ import { ref, watch, onMounted } from "vue";
 import IconBack from "../assets/menu_icon/IconBack.vue";
 import IconExchange from "../assets/menu_icon/IconExchange.vue";
 import IconSetting from "../assets/menu_icon/IconSetting.vue";
-
 import SettingDialogVue from "./SettingDialog.vue";
+import { useSettings } from '../store/settings';
+
+const { settings } = useSettings();
 
 const visible = ref(false);
 function toHome() {
   document.location.href = '/1-1'
 }
-function showDialog(){
+function showDialog() {
   visible.value = true;
 }
+function toggleLunbo() {
+  settings.carousel = !settings.carousel;
+}
 </script>
 
 <template>
   <div class="tools">
-    <button @click="toHome"><IconBack /></button>
-    <button @click="showDialog"><IconSetting /></button>
-    <button><IconExchange /></button>
+    <button @click="toHome">
+      <IconBack />
+    </button>
+    <button @click="showDialog">
+      <IconSetting />
+    </button>
+    <button @click="toggleLunbo">
+      <IconExchange />
+    </button>
   </div>
-  <SettingDialogVue v-if="visible" @close="visible = false;"/>
+  <SettingDialogVue v-if="visible" @close="visible = false;" />
 </template>
 
 <style scoped>
@@ -67,5 +78,4 @@ button:hover svg #back-btn,
 button:hover svg #setting-btn,
 button:hover svg #switch-btn {
   fill: #b1daff !important;
-}
-</style>
+}</style>

src/pages/3D.vue

@@ -5,8 +5,8 @@ import { computed } from 'vue';
 const { settings } = useSettings();
 const props = defineProps({
   line: {
-    type: String,
-    default: "1",
+    type: Number,
+    default: 1,
   },
 });
 
@@ -284,7 +284,6 @@ console.log('eqStatus', eqStatus.value)
   position: absolute;
   top: 0;
   left: 0;
-  z-index: -1;
   width: 100%;
   height: 100%;
   color: #fff;

src/store/settings.js

@@ -8,7 +8,7 @@ export const useSettings = defineStore("settings", () => {
       height: 1080,
     },
     carousel: false,
-    carouselTime: 1000, // s
+    carouselTime: 10000, // s
     fullscreen: false,
     eqStatus: false,
   });