@@ -1,12 +1,12 @@ | |||||
<script setup> | <script setup> | ||||
import { ref, watch, computed } from "vue"; | |||||
import { ref, onMounted } from "vue"; | |||||
import MainPage from "./MainPage.vue"; | import MainPage from "./MainPage.vue"; | ||||
import Slider from "./components/Slider.vue"; | import Slider from "./components/Slider.vue"; | ||||
import Client from "./utils/ws"; | import Client from "./utils/ws"; | ||||
import { useWsStore } from "./store"; | import { useWsStore } from "./store"; | ||||
const store = useWsStore(); | const store = useWsStore(); | ||||
const url = "ws://192.168.1.101:8082/QbMonitoring/websocket"; | const url = "ws://192.168.1.101:8082/QbMonitoring/websocket"; | ||||
let urlPath = document.location.pathname; | let urlPath = document.location.pathname; | ||||
if (urlPath === "/") { | if (urlPath === "/") { | ||||
@@ -41,6 +41,11 @@ new Client( | |||||
} | } | ||||
); | ); | ||||
const size = ref(80); | |||||
onMounted(() => { | |||||
setSize(size.value); | |||||
}); | |||||
const styles = ref({}); | const styles = ref({}); | ||||
function setSize(value) { | function setSize(value) { | ||||
const v = (value / 100).toFixed(2); | const v = (value / 100).toFixed(2); | ||||
@@ -56,7 +61,7 @@ function setSize(value) { | |||||
<template> | <template> | ||||
<div id="app-container"> | <div id="app-container"> | ||||
<MainPage :style="styles" /> | <MainPage :style="styles" /> | ||||
<Slider @size-change="setSize" /> | |||||
<Slider :size="size" @size-change="setSize" /> | |||||
</div> | </div> | ||||
</template> | </template> | ||||
@@ -1,34 +1,42 @@ | |||||
<script setup> | <script setup> | ||||
import { ref, watch, onMounted } from 'vue'; | |||||
import { ref, watch, computed, onMounted } from "vue"; | |||||
const props = defineProps({ | |||||
size: { | |||||
type: Number, | |||||
default: 60, | |||||
}, | |||||
}); | |||||
const emit = defineEmits(["size-change"]); | |||||
const emit = defineEmits(['size-change']); | |||||
const size = ref(100); | |||||
const slider = ref(null); | const slider = ref(null); | ||||
const innerSize = ref(props.size); | |||||
// watchers | |||||
watch(size, (value) => { | |||||
if (value == null) return; | |||||
emit('size-change', value); | |||||
}); | |||||
// watch | |||||
watch( | |||||
() => innerSize.value, | |||||
(value) => { | |||||
emit("size-change", value); | |||||
} | |||||
); | |||||
// handlers | // handlers | ||||
function keydownHandler(e) { | function keydownHandler(e) { | ||||
if (e.shiftKey && e.key === 'L') { | |||||
if (e.shiftKey && e.key === "L") { | |||||
if (slider.value) { | if (slider.value) { | ||||
slider.value.classList.toggle('show'); | |||||
slider.value.classList.toggle("show"); | |||||
} | } | ||||
} | } | ||||
} | } | ||||
// hooks | // hooks | ||||
onMounted(() => { | onMounted(() => { | ||||
document.addEventListener('keydown', keydownHandler); | |||||
document.addEventListener("keydown", keydownHandler); | |||||
}); | }); | ||||
</script> | </script> | ||||
<template> | <template> | ||||
<div ref="slider" class="slider"> | <div ref="slider" class="slider"> | ||||
<input type="range" min="0" max="100" v-model="size" /> | |||||
<input type="range" min="0" max="100" v-model="innerSize" /> | |||||
</div> | </div> | ||||
</template> | </template> | ||||
@@ -10,15 +10,14 @@ const horizontal_content = ref("公告加载中..."); | |||||
const store = useWsStore(); | const store = useWsStore(); | ||||
store.$subscribe((mutation, state) => { | store.$subscribe((mutation, state) => { | ||||
vertical_content.value = | vertical_content.value = | ||||
(state.data3.deliveryNotification || []).map( | |||||
(item) => item.deliveryContent || "" | |||||
).join('').replaceAll(/<br(\s?)\/>/g, '') || "暂无公告"; | |||||
(state.data3.deliveryNotification || []) | |||||
.map((item) => item.deliveryContent || "") | |||||
.join("") | |||||
.replaceAll(/<br(\s?)\/>/g, "") || "暂无公告"; | |||||
horizontal_content.value = | horizontal_content.value = | ||||
(state.data2.deliveryMsg || []) | (state.data2.deliveryMsg || []) | ||||
.map((item) => item.deliveryContent || "") | .map((item) => item.deliveryContent || "") | ||||
.join("\t") || "暂无公告"; | .join("\t") || "暂无公告"; | ||||
console.log('vertical_content.value', vertical_content.value) | |||||
}); | }); | ||||
// handlers | // handlers | ||||