This commit is contained in:
DESKTOP-FUDKNA8\znjsz 2024-01-19 15:24:47 +08:00
parent d78e93b494
commit ac8eb57317
8 changed files with 128 additions and 17 deletions

View File

@ -7,11 +7,11 @@ import { useWsStore } from "./store";
const store = useWsStore(); const store = useWsStore();
// use websocket // use websocket
let urlPath = document.location.pathname; let urlPath = ref(document.location.pathname);
if (urlPath === "/") { if (urlPath.value === "/") {
urlPath = "/1-1"; urlPath.value = "/1-1";
} }
useWebsocket(store, urlPath); useWebsocket(store, urlPath.value);
// size setting // size setting
const size = ref(80); const size = ref(80);
@ -23,7 +23,6 @@ onMounted(() => {
const styles = ref({}); const styles = ref({});
function setSize(value) { function setSize(value) {
const v = (value / 100).toFixed(2); const v = (value / 100).toFixed(2);
console.log("size change", value);
styles.value = { styles.value = {
transform: `scale(${v})`, transform: `scale(${v})`,
// transform: `scale(${v * 24 / 33}, ${v})`, // transform: `scale(${v * 24 / 33}, ${v})`,
@ -34,7 +33,7 @@ function setSize(value) {
<template> <template>
<div id="app-container"> <div id="app-container">
<MainPage :style="styles" /> <MainPage :style="styles" :path="urlPath" />
<Slider :size="size" @size-change="setSize" /> <Slider :size="size" @size-change="setSize" />
</div> </div>
</template> </template>

View File

@ -1,5 +1,5 @@
<script setup> <script setup>
import { ref } from "vue"; import { ref, watch } from "vue";
import Tools from "./components/Tools.vue"; import Tools from "./components/Tools.vue";
import NavMenu from "./components/NavMenu.vue"; import NavMenu from "./components/NavMenu.vue";
import AnnoucementPage from "./pages/AnnouncementPage.vue"; import AnnoucementPage from "./pages/AnnouncementPage.vue";
@ -10,10 +10,25 @@ 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";
const props = defineProps(["path"]);
const pathMap = {
'/1-1': 1,
'/1-2': 2,
'/1-3': 3,
'/1-4': 4,
'/2-1': 5,
'/2-2': 6,
'/2-3': 7,
'/2-4': 8,
'/3-1': 9,
'/3-2': 10,
'/3-3': 11,
'/3-4': 12
}
const currentPage = ref("3d"); const currentPage = ref("3d");
const handlePageChange = (page) => { const handlePageChange = (page) => {
currentPage.value = page; currentPage.value = page;
console.log(currentPage.value);
}; };
</script> </script>
@ -29,7 +44,7 @@ const handlePageChange = (page) => {
/> />
<div v-else class="pages-wrapper"> <div v-else class="pages-wrapper">
<NavMenu @change="handlePageChange" /> <NavMenu @change="handlePageChange" />
<TriplePage v-if="currentPage === '3d'" line="8" /> <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'" />
<RealtimePage v-if="currentPage === 'realtime'" /> <RealtimePage v-if="currentPage === 'realtime'" />

View File

@ -25,7 +25,6 @@ store.$subscribe((mutation, state) => {
}); });
// watch(hourData, (newVal) => { // watch(hourData, (newVal) => {
// console.log("hourData", newVal);
// if (newVal) { // if (newVal) {
// chartSetup( // chartSetup(
// chart.value, // chart.value,

View File

@ -380,6 +380,106 @@ const props = defineProps({
top: 80px; top: 80px;
} }
/* info 9 */
.info-9 .info:nth-child(1) {
left: 400px;
bottom: 250px;
}
.info-9 .info:nth-child(2) {
left: 1100px;
bottom: 220px;
}
.info-9 .info:nth-child(3) {
left: 496px;
bottom: 570px;
}
.info-9 .info:nth-child(4) {
left: 1100px;
bottom: 490px;
}
.info-9 .info:nth-child(5) {
left: 670px;
top: 144px;
}
.info-9 .info:nth-child(6) {
left: 1100px;
top: 155px;
}
/* info 10 */
.info-10 .info:nth-child(1) {
left: 620px;
bottom: 450px;
}
.info-10 .info:nth-child(2) {
left: 1000px;
bottom: 320px;
}
.info-10 .info:nth-child(3) {
left: 736px;
top: 270px;
}
.info-10 .info:nth-child(4) {
left: 1200px;
top: 330px;
}
.info-10 .info:nth-child(5) {
left: 870px;
top: 144px;
}
.info-10 .info:nth-child(6) {
left: 1100px;
top: 195px;
}
.info-10 .info:nth-child(7) {
left: 900px;
top: 55px;
}
.info-10 .info:nth-child(8) {
left: 1200px;
top: 68px;
}
/* info 11 */
.info-11 .info:nth-child(1) {
left: 570px;
bottom: 450px;
}
.info-11 .info:nth-child(2) {
left: 1100px;
bottom: 410px;
}
.info-11 .info:nth-child(3) {
left: 436px;
bottom: 170px;
}
.info-11 .info:nth-child(4) {
left: 1036px;
bottom: 170px;
}
.info-11 .info:nth-child(5) {
left: 890px;
top: 94px;
}
/* info 12 */
.info-12 .info:nth-child(1) {
left: 570px;
bottom: 250px;
}
.info-12 .info:nth-child(2) {
left: 800px;
bottom: 80px;
}
.info-12 .info:nth-child(3) {
left: 1136px;
bottom: 670px;
}
.info-12 .info:nth-child(4) {
left: 836px;
top: 70px;
}
/* other */ /* other */
.line-1 { .line-1 {
background: url(../assets/model/F1.png) no-repeat; background: url(../assets/model/F1.png) no-repeat;

View File

@ -25,6 +25,10 @@ store.$subscribe((mutation, state) => {
position: `${item.productLine} - ${item.segment}`, position: `${item.productLine} - ${item.segment}`,
})); }));
}); });
function handleIgnore(){
alarmList.value.splice(0)
}
</script> </script>
<template> <template>
@ -61,7 +65,7 @@ store.$subscribe((mutation, state) => {
<el-table-column prop="position" label="定位"></el-table-column> <el-table-column prop="position" label="定位"></el-table-column>
</el-table> </el-table>
</div> </div>
<button class="alert-btn">忽略</button> <button @click="handleIgnore" class="alert-btn">忽略</button>
</Container> </Container>
</div> </div>
</template> </template>

View File

@ -8,7 +8,6 @@ export const useWsStore = defineStore("wsData", () => {
const data3 = ref({}); const data3 = ref({});
function updateData(category, data) { function updateData(category, data) {
console.log('update', data)
switch (category) { switch (category) {
case "1": case "1":
data1.value = data; data1.value = data;

View File

@ -15,19 +15,15 @@ function connectPath(store, path) {
(message) => { (message) => {
try { try {
const data = JSON.parse(message.data); const data = JSON.parse(message.data);
console.log("message", JSON.parse(message.data));
if ("specificationChanges" in data) { if ("specificationChanges" in data) {
console.log("[*] setting data1");
// 分屏推送1数据 // 分屏推送1数据
store.updateData("1", data); store.updateData("1", data);
} else if ("deliveryNotification" in data) { } else if ("deliveryNotification" in data) {
// 分屏推送3数据 // 分屏推送3数据
console.log("[*] setting data3");
store.updateData("3", data); store.updateData("3", data);
} else { } else {
// 分屏推送2数据 // 分屏推送2数据
console.log("[*] setting data2");
store.updateData("2", data); store.updateData("2", data);
} }
} catch (err) { } catch (err) {

View File

@ -35,7 +35,6 @@ export default class XClient {
heartbeat() { heartbeat() {
if (this.hb) clearInterval(this.hb); if (this.hb) clearInterval(this.hb);
return setInterval(() => { return setInterval(() => {
console.log(`${this.name} ping...`);
if (this.ws.readyState == WebSocket.OPEN) { if (this.ws.readyState == WebSocket.OPEN) {
this.ws.send("ping"); this.ws.send("ping");
} else { } else {