add 波片移动

2024-03-08 14:21:07 +08:00
parent c6f5bc7d80
commit 149e801d6d
4 changed files with 141 additions and 79 deletions
--- a/index.html
+++ b/index.html
@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
@@ -6,8 +6,12 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue</title>
  </head>
-  <body style="position: relative;">
+  <body style="position: relative">
    <div id="app"></div>
+    <div
+      id="glass-layer"
+      style="position: absolute; top: 0; left: 0; height: 100%"
+    ></div>
    <script type="module" src="/src/main.js"></script>
  </body>
 </html>
--- a/src/AlertListScreen.vue
+++ b/src/AlertListScreen.vue
@@ -1,6 +1,6 @@
 <!-- 报警列表页面 -->
 <script setup>
-import { ref } from "vue";
+import { ref, watchEffect } from "vue";
 import { useWsStore } from "./store";
 import Container from "./components/Base/Container.vue";
 import DatetimeTool from "./components/HeadTime.vue";
@@ -10,23 +10,84 @@ import FullEqList from "./FullEqList.vue";
 import { connect0 } from "./utils/useWebsocket";
 import Glass from "./utils/glass";

-//
-const gls = new Glass("a2m1");
-setTimeout(() => {
-  gls.move();
-}, 1000);
-//
-
-const mainContainer = ref(null);
+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();
+connect0(store);
 const props = defineProps({
  line: {
    type: Number,
    default: 1,
  },
 });
-const store = useWsStore();
+const mainContainer = ref(null);
+const grassArr = ref({});

-connect0(store);
+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) => ({
@@ -39,20 +100,18 @@ const alarmList = ref(
  }))
 );
 store.$subscribe((mutation, state) => {
-  alarmList.value = state.mainDataAlarm.alarmArrList.map((item, index) => ({
-    id: item.id,
-    eqName: item.equipmentName,
-    eqIndex: index + 1,
-    alarmGrade: item.alarmLevel,
-    alarmDetail: item.alarmDetails,
-    position: `${item.productLine} - ${item.segment}`,
-  }));
+  alarmList.value = (state.mainDataAlarm.alarmArrList || []).map(
+    (item, index) => ({
+      id: item.id,
+      eqName: item.equipmentName,
+      eqIndex: index + 1,
+      alarmGrade: item.alarmLevel,
+      alarmDetail: item.alarmDetails,
+      position: `${item.productLine} - ${item.segment}`,
+    })
+  );
 });

-// function handleIgnore() {
-//   alarmList.value.splice(0)
-// }
-
 function handleResolutionChange(width, height) {
  mainContainer.value && changeScale(mainContainer.value, width, height);
 }
@@ -67,7 +126,7 @@ function handleResolutionChange(width, height) {
    <Tools @change-resolution="handleResolutionChange" />
    <AppHeader />

-    <div class="alert-list-page">
+    <div class="alert-list-page" v-if="0">
      <Container class="alert-list" title="报警列表" icon="cube">
        <div class="alert-list__table" style="">
          <el-table
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -32,17 +32,3 @@ export const useWsStore = defineStore("wsData", () => {

  return { data1, data2, data3, mainDataChart, mainDataAlarm, updateData };
 });
-// export const useWsStore = defineStore('wsData', {
-//     state: () => ({
-//         data1: {
-//             test: 'hello world'
-//         },
-//         data2: null,
-//         data3: null,
-//     }),
-//     actions: {
-//         updateData(category, data) {
-//             this[category] = data
-//         }
-//     }
-// })
--- a/src/utils/glass.js
+++ b/src/utils/glass.js
@@ -2,51 +2,53 @@ import glassImgSrc from "../assets/glass.png";

 const positionMapping = {
  A1: {
-    M1: [0, 0, 60, 400], // x, y, angle, distance(px)
-    M2: [0, 0, 60, 400],
-    M105: [],
-    M205: [],
+    M101: [640, 420, -26, 150], // top, left, angle, distance(px)
+    M201: [675, 420, -26, 150],
+    M105_1: [530, 680, -28, 128],
+    M205_1: [560, 680, -28, 138],
  },
  A2: {
-    M1: [740, 380, -24, 100],
-    M2: {
-      // 分段
-      0: [0, 0, 60, 400],
-      1: [0, 0, 60, 400],
-      2: [0, 0, 60, 400],
-    },
+    M101_1: [440, 880, -28, 100],
+    M201_1: [470, 880, -28, 60],
+    // M201_1: {
+    //   // 分段
+    //   0: [0, 0, 60, 400],
+    //   1: [0, 0, 60, 400],
+    //   2: [0, 0, 60, 400],
+    // },
  },
  A3: {
-    M1: [],
+    M101_1: [285, 1250, -32, 140],
  },
  B1: {
-    M1: [],
-    M2: [],
-    M3: [],
-    M105s: [],
-    M205: [],
-    M305: [],
+    M101: [720, 410, -27, 190],
+    M201: [760, 410, -27, 215],
+    M301: [800, 410, -27, 240],
+    M105_1: [590, 710, -28, 140],
+    M205_1: [615, 730, -29, 145],
+    M305_1: [640, 750, -29, 150],
  },
  B2: {
-    M1: [],
-    M2: [],
-    M3: [],
+    M101: [490, 930, -30, 60],
+    M201: [515, 960, -30, 80],
+    M301: [530, 990, -30, 50],
  },
  B3: {
-    M1: [],
+    M101: [350, 1310, -32, 180],
  },
  C1: {
-    M1: [],
-    M2: [],
-    M104: [],
-    M204: [],
+    M101: [825, 510, -27, 190],
+    M201: [870, 510, -27, 210],
+    M104_1: [705, 760, -26, 150],
+    M204_1: [740, 775, -26, 165],
  },
  C2: {
-    M1: { 0: [], 1: [] },
-    M2: [],
+    // M101: { 0: [], 1: [] },
+    M101: [590, 980, -28, 30],
+    M201: [620, 1000, -29, 150],
  },
  C3: {
-    M1: [],
+    M101: [415, 1400, -34, 210],
  },
 };

@@ -65,29 +67,39 @@ function calcPosition(positionString = "") {
 export default class Glass {
  el = null;
  distance = 100;
-  visibleOnScreen = false;
+  valid = true;

-  constructor(positionStr) {
+  constructor(positionStr, size, bgColor) {
    const { left, top, angle, distance } = calcPosition(positionStr);
    // this.el = document.createElement("img");
    // this.el.src = glassImgSrc;
    this.el = document.createElement("div");
-    this.el.style.background = "#f00";
+    this.el.style.background = bgColor || "#f00";
    this.el.style.position = "absolute";
-    this.el.style.top = `${top}px` || "740px";
-    this.el.style.left = `${left}px` || "380px";
+    this.el.style.top = top ? `${top}px` : "740px";
+    this.el.style.left = left ? `${left}px` : "380px";
    this.distance = distance || 100;
    // this.el.style.border = "3px solid red";
    // this.el.style.display = "none";
-    this.el.style.width = "18px";
-    this.el.style.height = "18px";
+    this.el.style.borderRadius = "2px";
+    this.el.style.boxShadow = "0 0 10px 2px #000";
+    this.el.style.width = size ? `${size}px` : "16px";
+    this.el.style.height = size ? `${size}px` : "16px";
    this.el.style.transformOrigin = "center";
-    this.el.style.transition = "all 3s linear";
+    this.el.style.transition = `all ${distance / 25}s linear`;
    this.el.style.zIndex = "9999";
    this.el.style.pointerEvents = "none";
-    this.el.style.transform = `rotate(${angle}deg) skew(8deg)`;
+    // this.el.style.transform = `rotate(${angle}deg) skew(32deg, 8deg)`;
+    this.el.style.transform = `rotate(${angle}deg) skew(${
+      -1 * angle
+    }deg, ${Math.floor((-1 * angle) / 4.5)}deg)`;
    // debugger;
-    document.body.appendChild(this.el);
+    document.getElementById("glass-layer").appendChild(this.el);
+    this.el.addEventListener("transitionend", () => {
+      //   document.body.removeChild(this.el);
+      this.el.style.opacity = 0;
+      this.valid = false;
+    });
  }

  get visible() {
@@ -97,5 +109,6 @@ export default class Glass {
  move() {
    const getTranslate = (d) => `${d}px ${-1 * Math.floor(Math.cos(24) * d)}px`;
    this.el.style.translate = getTranslate(this.distance);
+    this.el.style.opacity = 1;
  }
 }