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