update

add 波片移动
add glass
2024-03-08 17:09:26 +08:00 · 2024-03-08 16:31:44 +08:00 · 2024-03-08 10:17:05 +08:00 · 2024-03-06 10:14:35 +08:00
13 changed files with 340 additions and 108 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>
+  <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,27 +1,98 @@
 <!-- 报警列表页面 -->
 <script setup>
-import { ref } from "vue";
+import { ref, watchEffect, onMounted } from "vue";
 import { useWsStore } from "./store";
+import { useSettings } from "./store/settings";
 import Container from "./components/Base/Container.vue";
 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 Glass from "./utils/glass";

-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();
+const settingStore = useSettings();
+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.data1.alarmArrList || []).map((item, index) => ({
+  (store.mainDataAlarm.alarmArrList || []).map((item, index) => ({
    id: item.id,
    eqName: item.equipmentName,
    eqIndex: index + 1,
@ -30,49 +101,69 @@ const alarmList = ref(
    position: `${item.productLine} - ${item.segment}`,
  }))
 );
-// store.$subscribe((mutation, state) => {
-//   alarmList.value = state.data1.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)
-// }
+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}`,
+    })
+  );
+});

+// 检查状态
+onMounted(() => {
+  const settings = settingStore.settings;
+  // 设置分辨率
+  handleResolutionChange(settings.resolution.width, settings.resolution.height);
+});
+function changeScale(elm, width, height) {
+  const xScale = width / 1920;
+  const yScale = height / 1080;
+  const style = {
+    transform: `scale(${xScale}, ${yScale})`,
+    transformOrigin: "top left",
+  };
+  elm.style.transform = style.transform;
+  elm.style.transformOrigin = style.transformOrigin;
+}
 function handleResolutionChange(width, height) {
-  mainContainer.value && changeScale(mainContainer.value, width, height);
+  mainContainer.value &&
+    changeScale(mainContainer.value, width, height) &&
+    changeScale(document.getElementById("glass-layer"), width, height);
 }
 </script>

 <template>
  <div id="main-container" ref="mainContainer" class="main-container">
    <div id="main-container__fulleq">
-      <FullEqList />
+      <FullEqList v-if="0" />
    </div>
    <DatetimeTool />
    <Tools @change-resolution="handleResolutionChange" />
    <AppHeader />

+    <div
+      id="glass-layer"
+      style="position: absolute; top: 0; left: 0; height: 100%"
+    ></div>
+
    <div class="alert-list-page">
      <Container class="alert-list" title="报警列表" icon="cube">
        <div class="alert-list__table" style="">
          <el-table
            class="dark-table"
            :data="alarmList"
-            :show-overflow-tooltip="true"
            row-class-name="dark-row"
            header-row-class-name="dark-header"
          >
            <el-table-column
              prop="eqName"
              label="设备名"
-              width="80"
+              width="90"
            ></el-table-column>
            <el-table-column
              prop="eqIndex"
@ -81,15 +172,34 @@ function handleResolutionChange(width, height) {
            ></el-table-column>
            <el-table-column
              prop="alarmGrade"
-              label="报警等级"
-              width="100"
+              label="等级"
+              width="60"
            ></el-table-column>
+            <el-table-column prop="alarmDetail" label="报警细节">
+              <template v-slot="{ row }">
+                <el-tooltip
+                  class="box-item"
+                  effect="dark"
+                  :content="row.alarmDetail || '---'"
+                  placement="top-start"
+                >
+                  <span
+                    style="
+                      overflow: hidden;
+                      white-space: nowrap;
+                      text-overflow: ellipsis;
+                      word-break: break-all;
+                    "
+                    >{{ row.alarmDetail || "---" }}</span
+                  >
+                </el-tooltip>
+              </template>
+            </el-table-column>
            <el-table-column
-              prop="alarmDetail"
-              label="报警细节"
-              width="144"
+              prop="position"
+              width="128"
+              label="定位"
            ></el-table-column>
-            <el-table-column prop="position" label="定位"></el-table-column>
          </el-table>
        </div>
        <!-- <button @click="handleIgnore" class="alert-btn">忽略</button> -->
@ -153,7 +263,6 @@ function handleResolutionChange(width, height) {
 .main-container {
  width: 1920px;
  height: 1080px;
-  background: #000;
  position: relative;
  display: flex;
  flex-direction: column;
@ -182,11 +291,12 @@ function handleResolutionChange(width, height) {

 .alert-list {
  height: calc(100% - 56px);
-  width: 520px;
+  width: 640px;

  position: absolute;
  top: 15px;
  right: 32px;
+  z-index: 300;

  display: flex;
  flex-direction: column;
--- a/src/App.vue
+++ b/src/App.vue
@ -6,6 +6,7 @@ import AlertListScreen from "./AlertListScreen.vue";
 // import Slider from "./components/Slider.vue";
 import useWebsocket from "./utils/useWebsocket";
 import { useWsStore } from "./store";
+
 const store = useWsStore();

 const excludePaths = ["/alert-list", "/main-screen"];
--- a/src/MainScreen.vue
+++ b/src/MainScreen.vue
@ -1,7 +1,8 @@
 <!-- 报警列表页面 -->
 <script setup>
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
 import { useWsStore } from "./store";
+import { useSettings } from "./store/settings";
 import DatetimeTool from "./components/HeadTime.vue";
 import AppHeader from "./components/Base/Header.vue";
 import Tools from "./components/Tools.vue";
@ -20,34 +21,25 @@ const props = defineProps({
  },
 });
 const store = useWsStore();
-
+const settingStore = useSettings();
 connect0(store);

-const alarmList = ref(
-  (store.data1.alarmArrList || []).map((item, index) => ({
-    id: item.id,
-    eqName: item.equipmentName,
-    eqIndex: index + 1,
-    alarmGrade: item.alarmLevel,
-    alarmDetail: item.alarmDetails,
-    position: `${item.productLine} - ${item.segment}`,
-  }))
-);
-// store.$subscribe((mutation, state) => {
-//   alarmList.value = state.data1.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)
-// }
-
+// 检查状态
+onMounted(() => {
+  const settings = settingStore.settings;
+  // 设置分辨率
+  handleResolutionChange(settings.resolution.width, settings.resolution.height);
+});
+function changeScale(elm, width, height) {
+  const xScale = width / 1920;
+  const yScale = height / 1080;
+  const style = {
+    transform: `scale(${xScale}, ${yScale})`,
+    transformOrigin: "top left",
+  };
+  elm.style.transform = style.transform;
+  elm.style.transformOrigin = style.transformOrigin;
+}
 function handleResolutionChange(width, height) {
  mainContainer.value && changeScale(mainContainer.value, width, height);
 }
@ -56,7 +48,7 @@ function handleResolutionChange(width, height) {
 <template>
  <div id="main-container" ref="mainContainer" class="main-container">
    <div id="main-container__fulleq">
-      <FullEqList />
+      <FullEqList v-if="0" />
    </div>
    <DatetimeTool />
    <Tools @change-resolution="handleResolutionChange" />
@ -189,6 +181,7 @@ function handleResolutionChange(width, height) {
  /* align-content: center; */
  /* place-content: center; */
  gap: 15% 55%;
+  z-index: 300;
 }

 .alert-list {
--- a/src/assets/glass.png
+++ b/src/assets/glass.png
--- a/src/components/SettingDialog.vue
+++ b/src/components/SettingDialog.vue
@ -77,7 +77,7 @@ function handleConfirm() {
    width: 577px;
    height: 422px;
    background: url(../assets/dialog-bg.png) 100% / contain no-repeat;
-    z-index: 1000;
+    z-index: 1001;
    transition: all .3s ease-out;
    display: flex;
    flex-direction: column;
--- a/src/components/Tools.vue
+++ b/src/components/Tools.vue
@ -4,9 +4,9 @@ import IconBack from "../assets/menu_icon/IconBack.vue";
 import IconExchange from "../assets/menu_icon/IconExchange.vue";
 import IconSetting from "../assets/menu_icon/IconSetting.vue";
 import SettingDialogVue from "./SettingDialog.vue";
-import { useSettings } from '../store/settings';
+import { useSettings } from "../store/settings";

-const emit = defineEmits(['change-resolution'])
+const emit = defineEmits(["change-resolution"]);

 const { settings, updateSettings } = useSettings();
 // store.$subscribe((_, state) => {
@ -15,17 +15,17 @@ const { settings, updateSettings } = useSettings();
 const visible = ref(false);

 function toHome() {
-  document.location.reload()
+  document.location.reload();
 }
 function showDialog() {
  visible.value = true;
 }
 function toggleLunbo() {
-  updateSettings({ type: 'carousel', value: null })
+  updateSettings({ type: "carousel", value: null });
 }

 function handleChangeResolution(w, h) {
-  emit('change-resolution', w, h);
+  emit("change-resolution", w, h);
  visible.value = false;
 }
 </script>
@ -38,14 +38,33 @@ function handleChangeResolution(w, h) {
    <button @click="showDialog">
      <IconSetting />
    </button>
-    <button style="position: relative;" @click="toggleLunbo">
-      <span v-if="settings.carousel"
-        style="color: #fffa; font-family: 'Courier New', Courier, monospace; font-weight:600; width: 56px; font-size: 22px; user-select: none; position: absolute; line-height: 52px; text-align: center;">
-        {{ settings.carouselTime }}S</span>
+    <button style="position: relative" @click="toggleLunbo">
+      <span
+        v-if="settings.carousel"
+        style="
+          color: #fffa;
+          font-family: 'Courier New', Courier, monospace;
+          font-weight: 600;
+          width: 56px;
+          font-size: 22px;
+          user-select: none;
+          position: absolute;
+          line-height: 52px;
+          text-align: center;
+        "
+      >
+        {{ settings.carouselTime }}S</span
+      >
      <IconExchange :color="settings.carousel ? '#03356a' : '#50A1EC'" />
    </button>
  </div>
-  <SettingDialogVue v-if="visible" @close="visible = false;" @change-resolution="handleChangeResolution" />
+  <Teleport to="body">
+    <SettingDialogVue
+      v-if="visible"
+      @close="visible = false"
+      @change-resolution="handleChangeResolution"
+    />
+  </Teleport>
 </template>

 <style scoped>
@ -55,7 +74,7 @@ function handleChangeResolution(w, h) {
  right: 24px;
  display: flex;
  gap: 0px;
-  z-index: 3;
+  z-index: 1000;
 }

 button {
@ -86,7 +105,6 @@ button svg #switch-btn {
  transition: fill 0.2s ease-out;
 }

-
 button:hover svg #back-btn,
 button:hover svg #setting-btn,
 button:hover svg #switch-btn {
--- a/src/components/mainscreen/SumYield.vue
+++ b/src/components/mainscreen/SumYield.vue
@ -4,7 +4,6 @@ import * as echarts from "echarts";
 import Container from "../Base/Container.vue";
 import { useWsStore } from "../../store";

-
 const setupFn = (chart, datalist = [0.0, 0.0, 0.0, 0.0]) => {
  console.log("datalist", datalist);
  const option = {
@ -79,14 +78,14 @@ function loadData(yieldArray) {
  if (yieldArray == undefined || yieldArray?.length == 0) return null;
  for (let i = 0; i < yieldArray.length; ++i) {
    if (yieldArray[i].name == "钢1线") {
-      result[0] = parseInt(yieldArray[i].data);
+      result[0] = parseFloat(yieldArray[i].data) || 0;
    } else if (yieldArray[i].name == "钢2线") {
-      result[1] = parseInt(yieldArray[i].data);
+      result[1] = parseFloat(yieldArray[i].data) || 0;
    } else if (yieldArray[i].name == "钢3线") {
-      result[2] = parseInt(yieldArray[i].data);
+      result[2] = parseFloat(yieldArray[i].data) || 0;
    } else {
      // 合计
-      result[3] = parseInt(yieldArray[i].data);
+      result[3] = parseFloat(yieldArray[i].data) || 0;
    }
  }
  return result;
--- a/src/components/mainscreen/TodayYield.vue
+++ b/src/components/mainscreen/TodayYield.vue
@ -79,21 +79,24 @@ function loadData(yieldArray) {
  if (yieldArray == undefined || yieldArray?.length == 0) return null;
  for (let i = 0; i < yieldArray.length; ++i) {
    if (yieldArray[i].name == "钢1线") {
-      result[0] = parseInt(yieldArray[i].data);
+      result[0] = parseFloat(yieldArray[i].data) || 0;
    } else if (yieldArray[i].name == "钢2线") {
-      result[1] = parseInt(yieldArray[i].data);
+      result[1] = parseFloat(yieldArray[i].data) || 0;
    } else if (yieldArray[i].name == "钢3线") {
-      result[2] = parseInt(yieldArray[i].data);
+      result[2] = parseFloat(yieldArray[i].data) || 0;
    } else {
      // 合计
-      result[3] = parseInt(yieldArray[i].data);
+      result[3] = parseFloat(yieldArray[i].data) || 0;
    }
  }
  return result;
 }

 function setupChart(chart, dom, data) {
-  if (chart.value) chart.value.dispose();
+  if (chart.value) {
+    chart.value.dispose();
+    chart.value = null;
+  }
  nextTick(() => {
    chart.value = echarts.init(dom);
    setupFn(chart.value, data);
--- a/src/full-eq-list.css
+++ b/src/full-eq-list.css
@ -61,6 +61,7 @@
 .absolute {
  position: absolute;
  padding: 8px;
+  z-index: 200;
 }

 .v-1 {
--- a/src/main.js
+++ b/src/main.js
@ -1,16 +1,19 @@
-import { createApp } from 'vue';
-import { createPinia } from 'pinia'
+import { createApp } from "vue";
+import { createPinia } from "pinia";

+import "./style.css";
+import ElementPlus from "element-plus";
+import "element-plus/dist/index.css";
+import Vue3Marquee from "vue3-marquee";
+import App from "./App.vue";
+const pinia = createPinia();

-import './style.css';
-import ElementPlus from 'element-plus';
-import 'element-plus/dist/index.css';
-import Vue3Marquee from 'vue3-marquee';
-import App from './App.vue';
-const pinia = createPinia()
+setTimeout(() => {
+  window.location.reload();
+}, 24 * 60 * 60 * 1000);

 const app = createApp(App);
 app.use(pinia);
 app.use(ElementPlus);
-app.use(Vue3Marquee, { name: 'ScrollText' });
-app.mount('#app');
+app.use(Vue3Marquee, { name: "ScrollText" });
+app.mount("#app");
--- 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
@ -0,0 +1,114 @@
+import glassImgSrc from "../assets/glass.png";
+
+const positionMapping = {
+  A1: {
+    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: {
+    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: {
+    M101_1: [285, 1250, -32, 140],
+  },
+  B1: {
+    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: {
+    M101: [490, 930, -30, 60],
+    M201: [515, 960, -30, 80],
+    M301: [530, 990, -30, 50],
+  },
+  B3: {
+    M101: [350, 1310, -32, 180],
+  },
+  C1: {
+    M101: [825, 510, -27, 190],
+    M201: [870, 510, -27, 210],
+    M104_1: [705, 760, -26, 150],
+    M204_1: [740, 775, -26, 165],
+  },
+  C2: {
+    // M101: { 0: [], 1: [] },
+    M101: [590, 980, -28, 30],
+    M201: [620, 1000, -29, 150],
+  },
+  C3: {
+    M101: [415, 1400, -34, 210],
+  },
+};
+
+function calcPosition(positionString = "") {
+  const lineId = positionString.slice(0, 2).toUpperCase(); // A1 B1 C1
+  const subLineId = positionString.slice(2).toUpperCase(); // M1 M206 M3
+
+  return {
+    top: positionMapping[lineId][subLineId][0],
+    left: positionMapping[lineId][subLineId][1],
+    angle: positionMapping[lineId][subLineId][2],
+    distance: positionMapping[lineId][subLineId][3],
+  };
+}
+
+export default class Glass {
+  el = null;
+  distance = 100;
+  valid = true;
+
+  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 = bgColor || "#f00";
+    this.el.style.position = "absolute";
+    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.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 ${distance / 25}s linear`;
+    this.el.style.zIndex = "100";
+    this.el.style.pointerEvents = "none";
+    // 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.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() {
+    return this.visibleOnScreen;
+  }
+
+  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;
+  }
+}
Author	SHA1	Message	Date
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	6d57597aa1	update	2024-03-08 17:09:26 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	149e801d6d	add 波片移动	2024-03-08 16:31:44 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	c6f5bc7d80	add glass	2024-03-08 10:17:05 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	822732742d	update alert list screen	2024-03-06 10:14:35 +08:00