update

2024-03-08 17:09:26 +08:00 · 2024-03-08 17:09:26 +08:00 · 6d57597aa1
commit 6d57597aa1
parent 149e801d6d
10 changed files with 103 additions and 59 deletions
--- a/index.html
+++ b/index.html
@ -8,10 +8,10 @@
  </head>
  <body style="position: relative">
    <div id="app"></div>
-    <div
+    <!-- <div
      id="glass-layer"
      style="position: absolute; top: 0; left: 0; height: 100%"
-    ></div>
+    ></div> -->
    <script type="module" src="/src/main.js"></script>
  </body>
 </html>
--- a/src/AlertListScreen.vue
+++ b/src/AlertListScreen.vue
@ -1,7 +1,8 @@
 <!-- 报警列表页面 -->
 <script setup>
-import { ref, watchEffect } 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";
@ -39,6 +40,7 @@ const allowedList = [
  "c1m201",
 ].map((item) => item.toUpperCase());
 const store = useWsStore();
+const settingStore = useSettings();
 connect0(store);
 const props = defineProps({
  line: {
@ -112,8 +114,26 @@ store.$subscribe((mutation, state) => {
  );
 });

+// 检查状态
+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>

@ -126,7 +146,12 @@ function handleResolutionChange(width, height) {
    <Tools @change-resolution="handleResolutionChange" />
    <AppHeader />

-    <div class="alert-list-page" v-if="0">
+    <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
@ -238,7 +263,6 @@ function handleResolutionChange(width, height) {
 .main-container {
  width: 1920px;
  height: 1080px;
-  background: #000;
  position: relative;
  display: flex;
  flex-direction: column;
@ -272,6 +296,7 @@ function handleResolutionChange(width, height) {
  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/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/TodayYield.vue
+++ b/src/components/mainscreen/TodayYield.vue
@ -93,7 +93,10 @@ function loadData(yieldArray) {
 }

 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/utils/glass.js
+++ b/src/utils/glass.js
@ -87,7 +87,7 @@ export default class Glass {
    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 = "9999";
+    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(${