update main-screen glass

src/AlertListScreen.vue

@@ -1,6 +1,6 @@
 <!-- 报警列表页面 -->
 <script setup>
-import { ref, watchEffect, onMounted } from "vue";
+import { ref, onMounted } from "vue";
 import { useWsStore } from "./store";
 import { useSettings } from "./store/settings";
 import Container from "./components/Base/Container.vue";
@@ -8,40 +8,11 @@ import DatetimeTool from "./components/HeadTime.vue";
 import AppHeader from "./components/Base/Header.vue";
 import Tools from "./components/Tools.vue";
 import FullEqList from "./FullEqList.vue";
-import { connect0 } from "./utils/useWebsocket";
+import { useGlass } from "./utils/glass";
-import Glass from "./utils/glass";
 
-const allowedList = [
-  "c2m101",
-  "c2m201",
-  "c1m104_1",
-  "c1m204_1",
-  "c2m101",
-  "c2m201",
-  "a3m101_1",
-  "b3m101",
-  "c3m101",
-  "a2m101_1",
-  "a2m201_1",
-  "b2m101",
-  "b2m201",
-  "b2m301",
-  "a1m105_1",
-  "a1m205_1",
-  "b1m105_1",
-  "b1m205_1",
-  "b1m305_1",
-  "a1m101",
-  "a1m201",
-  "b1m101",
-  "b1m201",
-  "b1m301",
-  "c1m101",
-  "c1m201",
-].map((item) => item.toUpperCase());
 const store = useWsStore();
+const GlassContainer = useGlass(store);
 const settingStore = useSettings();
-connect0(store);
 const props = defineProps({
   line: {
     type: Number,
@@ -49,48 +20,6 @@ const props = defineProps({
   },
 });
 const mainContainer = ref(null);
-const grassArr = ref({});
-
-const doRender = (data) => {
-  return setTimeout(() => {
-    // console.log("渲染一批数据...");
-    const commingData = data
-      .filter((item) => item.haveGlass)
-      .filter((item) => allowedList.includes(item.lightCode));
-
-    if (commingData.length != 0) {
-      /** 清空之前的状态 */
-      document.getElementById("glass-layer").innerHTML = "";
-      document.getElementById("glass-layer").innerHTML = "";
-      grassArr.value = {};
-
-      commingData.forEach((item) => {
-        const n = new Glass(
-          item.lightCode,
-          item.lightCode.includes("A3") ||
-          item.lightCode.includes("B3") ||
-          item.lightCode.includes("C3")
-            ? 12
-            : undefined,
-          "#0F0D"
-        );
-        setTimeout(() => {
-          n.move();
-        }, 100);
-
-        grassArr.value[item.lightCode] = n;
-      });
-    }
-  }, 1000);
-};
-
-watchEffect((onInvalidate) => {
-  const timer = doRender(store.mainDataAlarm.orbitalPositioningArrayList || []);
-  onInvalidate(() => {
-    clearTimeout(timer);
-  });
-});
-
 const alarmList = ref(
   (store.mainDataAlarm.alarmArrList || []).map((item, index) => ({
     id: item.id,
@@ -146,10 +75,11 @@ function handleResolutionChange(width, height) {
     <Tools @change-resolution="handleResolutionChange" />
     <AppHeader />
 
-    <div
+    <GlassContainer />
+    <!-- <div
       id="glass-layer"
       style="position: absolute; top: 0; left: 0; height: 100%"
-    ></div>
+    ></div>-->
 
     <div class="alert-list-page">
       <Container class="alert-list" title="报警列表" icon="cube">

src/MainScreen.vue

@@ -11,7 +11,7 @@ import SumYield from "./components/mainscreen/SumYield.vue";
 import TodayRate from "./components/mainscreen/TodayRate.vue";
 import SumRate from "./components/mainscreen/SumRate.vue";
 import FullEqList from "./FullEqList.vue";
-import { connect0 } from "./utils/useWebsocket";
+import { useGlass } from "./utils/glass";
 
 const mainContainer = ref(null);
 const props = defineProps({
@@ -21,8 +21,8 @@ const props = defineProps({
   },
 });
 const store = useWsStore();
+const GlassContainer = useGlass(store);
 const settingStore = useSettings();
-connect0(store);
 
 // 检查状态
 onMounted(() => {
@@ -54,6 +54,8 @@ function handleResolutionChange(width, height) {
     <Tools @change-resolution="handleResolutionChange" />
     <AppHeader />
 
+    <GlassContainer />
+
     <div class="main-screen">
       <!-- <div
         style="

src/utils/glass.js

@@ -1,4 +1,6 @@
 import glassImgSrc from "../assets/glass.png";
+import { connect0 } from "./useWebsocket";
+import { ref, watchEffect, onMounted, h } from "vue";
 
 const positionMapping = {
   A1: {
@@ -112,3 +114,93 @@ export default class Glass {
     this.el.style.opacity = 1;
   }
 }
+
+/** 允许展示的工段 */
+const allowedList = [
+  "c2m101",
+  "c2m201",
+  "c1m104_1",
+  "c1m204_1",
+  "c2m101",
+  "c2m201",
+  "a3m101_1",
+  "b3m101",
+  "c3m101",
+  "a2m101_1",
+  "a2m201_1",
+  "b2m101",
+  "b2m201",
+  "b2m301",
+  "a1m105_1",
+  "a1m205_1",
+  "b1m105_1",
+  "b1m205_1",
+  "b1m305_1",
+  "a1m101",
+  "a1m201",
+  "b1m101",
+  "b1m201",
+  "b1m301",
+  "c1m101",
+  "c1m201",
+].map((item) => item.toUpperCase());
+
+export function useGlass(store) {
+  onMounted(() => {
+    connect0(store);
+  });
+
+  const grassArr = ref({});
+  const doRender = (data) => {
+    return setTimeout(() => {
+      const commingData = data
+        .filter((item) => item.haveGlass)
+        .filter((item) => allowedList.includes(item.lightCode));
+
+      if (commingData.length != 0) {
+        /** 清空之前的状态 */
+        document.getElementById("glass-layer").innerHTML = "";
+        document.getElementById("glass-layer").innerHTML = "";
+        grassArr.value = {};
+
+        commingData.forEach((item) => {
+          const n = new Glass(
+            item.lightCode,
+            item.lightCode.includes("A3") ||
+            item.lightCode.includes("B3") ||
+            item.lightCode.includes("C3")
+              ? 12
+              : undefined,
+            "#0F0D"
+          );
+          setTimeout(() => {
+            n.move();
+          }, 100);
+
+          grassArr.value[item.lightCode] = n;
+        });
+      }
+    }, 1000);
+  };
+
+  watchEffect((onInvalidate) => {
+    const timer = doRender(
+      store.mainDataAlarm.orbitalPositioningArrayList || []
+    );
+    onInvalidate(() => {
+      clearTimeout(timer);
+    });
+  });
+
+  return h("div", {
+    id: "glass-layer",
+    style: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      width: "100%",
+      height: "100%",
+      pointerEvents: "none",
+    },
+  });
+}