update

src/App.vue

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

src/MainPage.vue

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

src/components/HourChart.vue

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

src/pages/3D.vue

@@ -380,6 +380,106 @@ const props = defineProps({
   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  */
 .line-1 {
   background: url(../assets/model/F1.png) no-repeat;

src/pages/AlertListPage.vue

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

src/store/index.js

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

src/utils/useWebsocket.js

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

src/utils/ws.js

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