update
This commit is contained in:
parent
d78e93b494
commit
ac8eb57317
11
src/App.vue
11
src/App.vue
@ -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>
|
||||||
|
@ -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'" />
|
||||||
|
@ -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,
|
||||||
|
100
src/pages/3D.vue
100
src/pages/3D.vue
@ -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;
|
||||||
|
@ -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>
|
||||||
|
@ -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;
|
||||||
|
@ -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) {
|
||||||
|
@ -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 {
|
||||||
|
Loading…
Reference in New Issue
Block a user