@@ -34,7 +34,7 @@ useWebsocket(store, urlPath.value); | |||||
<template> | <template> | ||||
<div id="app-container"> | <div id="app-container"> | ||||
<MainPage :path="urlPath" /> | <MainPage :path="urlPath" /> | ||||
<Slider :size="size" @size-change="setSize" /> | |||||
<!-- <Slider :size="size" @size-change="setSize" /> --> | |||||
</div> | </div> | ||||
</template> | </template> | ||||
@@ -9,8 +9,39 @@ import AlertListPage from "./pages/AlertListPage.vue"; | |||||
import DataPage from "./pages/DataPage.vue"; | import DataPage from "./pages/DataPage.vue"; | ||||
import DatetimeTool from "./components/HeadTime.vue"; | import DatetimeTool from "./components/HeadTime.vue"; | ||||
import TriplePage from "./pages/3D.vue"; | import TriplePage from "./pages/3D.vue"; | ||||
import { useSettings } from "./store/settings"; | |||||
const props = defineProps(["path"]); | 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 = { | const pathMap = { | ||||
'/1-1': 1, | '/1-1': 1, | ||||
'/1-2': 2, | '/1-2': 2, | ||||
@@ -25,11 +56,6 @@ const pathMap = { | |||||
'/3-3': 11, | '/3-3': 11, | ||||
'/3-4': 12 | '/3-4': 12 | ||||
} | } | ||||
const currentPage = ref("3d"); | |||||
const handlePageChange = (page) => { | |||||
currentPage.value = page; | |||||
}; | |||||
</script> | </script> | ||||
<template> | <template> | ||||
@@ -37,13 +63,10 @@ const handlePageChange = (page) => { | |||||
<DatetimeTool v-if="currentPage !== 'announcement'" /> | <DatetimeTool v-if="currentPage !== 'announcement'" /> | ||||
<Tools v-if="currentPage !== 'announcement'" /> | <Tools v-if="currentPage !== 'announcement'" /> | ||||
<AppHeader 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"> | <div v-else class="pages-wrapper"> | ||||
<NavMenu @change="handlePageChange" /> | |||||
<NavMenu @change="handlePageChange" :value="currentPage" /> | |||||
<TriplePage v-if="currentPage === '3d'" :line="pathMap[path] ?? '1'" /> | <TriplePage v-if="currentPage === '3d'" :line="pathMap[path] ?? '1'" /> | ||||
<DataPage v-if="currentPage === 'data'" /> | <DataPage v-if="currentPage === 'data'" /> | ||||
<AlertListPage v-if="currentPage === 'alert'" /> | <AlertListPage v-if="currentPage === 'alert'" /> | ||||
@@ -5,7 +5,7 @@ import IconAlert from "../assets/menu_icon/IconAlert.vue"; | |||||
import IconChart from "../assets/menu_icon/IconChart.vue"; | import IconChart from "../assets/menu_icon/IconChart.vue"; | ||||
import IconRealtime from "../assets/menu_icon/IconRealtime.vue"; | import IconRealtime from "../assets/menu_icon/IconRealtime.vue"; | ||||
import IconAnnounce from "../assets/menu_icon/IconAnnouncement.vue"; | import IconAnnounce from "../assets/menu_icon/IconAnnouncement.vue"; | ||||
const props = defineProps(['value']) | |||||
const emit = defineEmits(["change"]); | const emit = defineEmits(["change"]); | ||||
const handleClick = (page) => { | const handleClick = (page) => { | ||||
emit("change", page); | emit("change", page); | ||||
@@ -17,27 +17,32 @@ const handleClick = (page) => { | |||||
<ul class="flex-list"> | <ul class="flex-list"> | ||||
<li> | <li> | ||||
<button type="button" @click="(e) => handleClick('3d')"> | <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> | </button> | ||||
</li> | </li> | ||||
<li> | <li> | ||||
<button type="button" @click="(e) => handleClick('data')"> | <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> | </button> | ||||
</li> | </li> | ||||
<li> | <li> | ||||
<button type="button" @click="(e) => handleClick('realtime')"> | <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> | </button> | ||||
</li> | </li> | ||||
<li> | <li> | ||||
<button type="button" @click="(e) => handleClick('alert')"> | <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> | </button> | ||||
</li> | </li> | ||||
<li> | <li> | ||||
<button type="button" @click="(e) => handleClick('announcement')"> | <button type="button" @click="(e) => handleClick('announcement')"> | ||||
<span style="">公告页面</span><IconAnnounce class="nav-icon" /> | |||||
<span style="">公告页面</span> | |||||
<IconAnnounce class="nav-icon" /> | |||||
</button> | </button> | ||||
</li> | </li> | ||||
</ul> | </ul> | ||||
@@ -54,6 +59,7 @@ const handleClick = (page) => { | |||||
position: relative; | position: relative; | ||||
top: 72px; | top: 72px; | ||||
left: 0; | left: 0; | ||||
z-index: 10; | |||||
} | } | ||||
.flex-list { | .flex-list { | ||||
@@ -84,7 +90,7 @@ li { | |||||
gap: 8px; | gap: 8px; | ||||
} | } | ||||
.nav-menu button > span { | |||||
.nav-menu button>span { | |||||
font-size: 32px; | font-size: 32px; | ||||
letter-spacing: 3px; | letter-spacing: 3px; | ||||
line-height: 45px; | line-height: 45px; | ||||
@@ -92,18 +98,18 @@ li { | |||||
text-shadow: 0 5px 1px #001124; | text-shadow: 0 5px 1px #001124; | ||||
/* text-shadow: 0 5px 1px #004969; */ | /* text-shadow: 0 5px 1px #004969; */ | ||||
} | } | ||||
.nav-menu button:hover > span { | |||||
color: #b1daff; | |||||
.nav-menu button:hover>span { | |||||
color: #b1daff !important; | |||||
} | } | ||||
</style> | </style> | ||||
<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; | fill: #b1daff !important; | ||||
} | |||||
</style> | |||||
}</style> |
@@ -3,25 +3,36 @@ import { ref, watch, onMounted } from "vue"; | |||||
import IconBack from "../assets/menu_icon/IconBack.vue"; | import IconBack from "../assets/menu_icon/IconBack.vue"; | ||||
import IconExchange from "../assets/menu_icon/IconExchange.vue"; | import IconExchange from "../assets/menu_icon/IconExchange.vue"; | ||||
import IconSetting from "../assets/menu_icon/IconSetting.vue"; | import IconSetting from "../assets/menu_icon/IconSetting.vue"; | ||||
import SettingDialogVue from "./SettingDialog.vue"; | import SettingDialogVue from "./SettingDialog.vue"; | ||||
import { useSettings } from '../store/settings'; | |||||
const { settings } = useSettings(); | |||||
const visible = ref(false); | const visible = ref(false); | ||||
function toHome() { | function toHome() { | ||||
document.location.href = '/1-1' | document.location.href = '/1-1' | ||||
} | } | ||||
function showDialog(){ | |||||
function showDialog() { | |||||
visible.value = true; | visible.value = true; | ||||
} | } | ||||
function toggleLunbo() { | |||||
settings.carousel = !settings.carousel; | |||||
} | |||||
</script> | </script> | ||||
<template> | <template> | ||||
<div class="tools"> | <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> | </div> | ||||
<SettingDialogVue v-if="visible" @close="visible = false;"/> | |||||
<SettingDialogVue v-if="visible" @close="visible = false;" /> | |||||
</template> | </template> | ||||
<style scoped> | <style scoped> | ||||
@@ -67,5 +78,4 @@ button:hover svg #back-btn, | |||||
button:hover svg #setting-btn, | button:hover svg #setting-btn, | ||||
button:hover svg #switch-btn { | button:hover svg #switch-btn { | ||||
fill: #b1daff !important; | fill: #b1daff !important; | ||||
} | |||||
</style> | |||||
}</style> |
@@ -5,8 +5,8 @@ import { computed } from 'vue'; | |||||
const { settings } = useSettings(); | const { settings } = useSettings(); | ||||
const props = defineProps({ | const props = defineProps({ | ||||
line: { | line: { | ||||
type: String, | |||||
default: "1", | |||||
type: Number, | |||||
default: 1, | |||||
}, | }, | ||||
}); | }); | ||||
@@ -284,7 +284,6 @@ console.log('eqStatus', eqStatus.value) | |||||
position: absolute; | position: absolute; | ||||
top: 0; | top: 0; | ||||
left: 0; | left: 0; | ||||
z-index: -1; | |||||
width: 100%; | width: 100%; | ||||
height: 100%; | height: 100%; | ||||
color: #fff; | color: #fff; | ||||
@@ -8,7 +8,7 @@ export const useSettings = defineStore("settings", () => { | |||||
height: 1080, | height: 1080, | ||||
}, | }, | ||||
carousel: false, | carousel: false, | ||||
carouselTime: 1000, // s | |||||
carouselTime: 10000, // s | |||||
fullscreen: false, | fullscreen: false, | ||||
eqStatus: false, | eqStatus: false, | ||||
}); | }); | ||||