1

2024-03-19 15:57:57 +08:00
parent e306b0f837 85cc0c4c43
commit 5652cff730
49 changed files with 3215 additions and 338 deletions
--- a/dist/assets/F1-55QmHI7d.png
+++ b/dist/assets/F1-55QmHI7d.png
--- a/dist/assets/F10-Hv1fN2jG.png
+++ b/dist/assets/F10-Hv1fN2jG.png
--- a/dist/assets/F11-qPMSBvQD.png
+++ b/dist/assets/F11-qPMSBvQD.png
--- a/dist/assets/F12-HVmhWYKd.png
+++ b/dist/assets/F12-HVmhWYKd.png
--- a/dist/assets/F2-lmrN7SN0.png
+++ b/dist/assets/F2-lmrN7SN0.png
--- a/dist/assets/F3-1ugFZPG5.png
+++ b/dist/assets/F3-1ugFZPG5.png
--- a/dist/assets/F4-fpSJsNod.png
+++ b/dist/assets/F4-fpSJsNod.png
--- a/dist/assets/F5-UMmShybg.png
+++ b/dist/assets/F5-UMmShybg.png
--- a/dist/assets/F6-hBP3AH5M.png
+++ b/dist/assets/F6-hBP3AH5M.png
--- a/dist/assets/F7-P2lCiLFS.png
+++ b/dist/assets/F7-P2lCiLFS.png
--- a/dist/assets/F8-hD2yq-Ht.png
+++ b/dist/assets/F8-hD2yq-Ht.png
--- a/dist/assets/F9-tsi2BAmc.png
+++ b/dist/assets/F9-tsi2BAmc.png
--- a/dist/assets/bg-NfSaSAhM.png
+++ b/dist/assets/bg-NfSaSAhM.png
--- a/dist/assets/dialog-bg-B20sE8fu.png
+++ b/dist/assets/dialog-bg-B20sE8fu.png
--- a/dist/assets/dialog-button-kA3QlVc6.png
+++ b/dist/assets/dialog-button-kA3QlVc6.png
--- a/dist/assets/header-bg@2x-N9PN7iGV.png
+++ b/dist/assets/header-bg@2x-N9PN7iGV.png
--- a/dist/assets/index-b8YKTp8F.css
+++ b/dist/assets/index-b8YKTp8F.css
--- a/dist/assets/index-z875ZJyp.js
+++ b/dist/assets/index-z875ZJyp.js
--- a/dist/assets/left-bg-A_Q0r6Ff.png
+++ b/dist/assets/left-bg-A_Q0r6Ff.png
--- a/dist/assets/line-jc9fN4Ph.png
+++ b/dist/assets/line-jc9fN4Ph.png
--- a/dist/assets/logo-n86KXcl7.png
+++ b/dist/assets/logo-n86KXcl7.png
--- a/dist/index.html
+++ b/dist/index.html
@@ -1,14 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + Vue</title>
-    <script type="module" crossorigin src="/assets/index-z875ZJyp.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-b8YKTp8F.css">
-  </head>
-  <body>
-    <div id="app"></div>
-  </body>
-</html>
--- a/dist/vite.svg
+++ b/dist/vite.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- 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
@@ -0,0 +1,270 @@
+<!-- 报警列表页面 -->
+<script setup>
+import { ref, 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 { useGlass } from "./utils/glass";
+
+const store = useWsStore();
+const GlassContainer = useGlass(store);
+const settingStore = useSettings();
+const props = defineProps({
+  line: {
+    type: Number,
+    default: 1,
+  },
+});
+const mainContainer = ref(null);
+const alarmList = ref(
+  (store.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}`,
+  }))
+);
+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) &&
+    changeScale(document.getElementById("glass-layer"), width, height);
+}
+</script>
+
+<template>
+  <div id="main-container" ref="mainContainer" class="main-container">
+    <div id="main-container__fulleq">
+      <FullEqList v-if="0" />
+    </div>
+    <DatetimeTool />
+    <Tools @change-resolution="handleResolutionChange" />
+    <AppHeader />
+
+    <GlassContainer />
+    <!-- <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"
+            row-class-name="dark-row"
+            header-row-class-name="dark-header"
+          >
+            <el-table-column
+              prop="eqName"
+              label="设备名"
+              width="90"
+            ></el-table-column>
+            <el-table-column
+              prop="eqIndex"
+              label="序号"
+              width="60"
+            ></el-table-column>
+            <el-table-column
+              prop="alarmGrade"
+              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="position"
+              width="128"
+              label="定位"
+            ></el-table-column>
+          </el-table>
+        </div>
+        <!-- <button @click="handleIgnore" class="alert-btn">忽略</button> -->
+      </Container>
+    </div>
+  </div>
+</template>
+
+<style>
+.dark-table {
+  height: 100%;
+  background: transparent;
+  user-select: none;
+}
+
+.dark-row {
+  color: #fff;
+  background: #006acd32 !important;
+  user-select: none;
+}
+
+.dark-row:nth-child(odd) {
+  background: #020d2d32 !important;
+}
+
+.dark-row > td.el-table__cell {
+  border: none;
+  font-size: 16px;
+}
+
+.dark-row > td.el-table__cell:not(:last-child) {
+  border-right: 1px solid #0003;
+}
+
+.dark-row:hover > td.el-table__cell {
+  background-color: #fff1 !important;
+}
+
+.dark-header {
+  background-color: transparent !important;
+  color: #fff;
+}
+
+.dark-header > th.el-table__cell.is-leaf {
+  border-bottom: none;
+  background-color: #006acd32 !important;
+  font-weight: 400;
+  letter-spacing: 1px;
+}
+
+.dark-header > th.el-table__cell {
+  font-size: 16px;
+}
+
+.dark-header > th.el-table__cell:not(:last-child) {
+  border-right: 1px solid #0003;
+}
+</style>
+
+<style scoped>
+.main-container {
+  width: 1920px;
+  height: 1080px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  background: url(./assets/bg.png) 100% / cover no-repeat;
+}
+
+#main-container__fulleq {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: url(./assets/full-lines.png) 100% / cover no-repeat;
+}
+
+.pages-wrapper {
+  flex: 1;
+  display: flex;
+  position: relative;
+}
+
+.alert-list-page {
+  flex: 1;
+  position: relative;
+}
+
+.alert-list {
+  height: calc(100% - 56px);
+  width: 640px;
+
+  position: absolute;
+  top: 15px;
+  right: 32px;
+  z-index: 300;
+
+  display: flex;
+  flex-direction: column;
+}
+
+:fullscreen .alert-list {
+  width: 35%;
+  top: 32px;
+  height: calc(100% - 64px);
+}
+
+.alert-list__table {
+  height: calc(100% - 72px);
+}
+
+.alert-list__table >>> .el-table__inner-wrapper::before {
+  background: transparent;
+}
+
+button {
+  appearance: none;
+  outline: none;
+  border: none;
+  cursor: pointer;
+}
+
+.alert-btn {
+  width: 100%;
+  height: 72px;
+  background: #0f04;
+  color: #fff;
+  font-size: 32px;
+  line-height: 1;
+  letter-spacing: 2px;
+  transition: all 0.2s ease-out;
+}
+
+.alert-btn:hover {
+  background: #0f08;
+}
+</style>
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,17 +1,21 @@
 <script setup>
 import { ref, onMounted } from "vue";
 import MainPage from "./MainPage.vue";
+import MainScreen from "./MainScreen.vue";
+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"];
 // use websocket
 let urlPath = ref(document.location.pathname);
 if (urlPath.value === "/") {
  urlPath.value = "/1-1";
 }
-useWebsocket(store, urlPath.value);
+useWebsocket(store, urlPath.value, excludePaths);

 // size setting
 // const size = ref(80);
@@ -33,8 +37,10 @@ useWebsocket(store, urlPath.value);

 <template>
  <div id="app-container">
-    <MainPage :path="urlPath" />
    <!-- <Slider :size="size" @size-change="setSize" /> -->
+    <MainPage v-if="!excludePaths.includes(urlPath)" :path="urlPath" />
+    <MainScreen v-if="urlPath == '/main-screen'" />
+    <AlertListScreen v-if="urlPath == '/alert-list'" />
  </div>
 </template>

--- a/src/FullEqList.vue
+++ b/src/FullEqList.vue
@@ -0,0 +1,119 @@
+<!-- 
+    filename: FullEqList.vue
+    author: liubin
+    date: 2024-03-05 14:13:06
+    description: 
+-->
+<script setup>
+import "./full-eq-list.css";
+</script>
+
+<template>
+  <div class="absolute v-1 tag-container">
+    <span class="name-tag">M7上片</span>
+    <span class="name-tag">M6上片</span>
+    <span class="name-tag">M5上片</span>
+    <span class="name-tag">M4上片</span>
+    <span class="name-tag">M3上片</span>
+    <span class="name-tag">M2上片</span>
+    <span class="name-tag">M1上片</span>
+  </div>
+  <div class="absolute v-2 tag-container">
+    <span class="name-tag">M7磨边机</span>
+    <span class="name-tag">M6磨边机</span>
+    <span class="name-tag">M5磨边机</span>
+    <span class="name-tag">M4磨边机</span>
+    <span class="name-tag">M3磨边机</span>
+    <span class="name-tag">M2磨边机</span>
+    <span class="name-tag">M1磨边机</span>
+  </div>
+  <div class="absolute v-3 tag-container">
+    <span class="name-tag">M7清洗机</span>
+    <span class="name-tag">M6清洗机</span>
+    <span class="name-tag">M5清洗机</span>
+    <span class="name-tag">M4清洗机</span>
+    <span class="name-tag">M3清洗机</span>
+    <span class="name-tag">M2清洗机</span>
+    <span class="name-tag">M1清洗机</span>
+  </div>
+  <div class="absolute z-1 v-4 tag-container">
+    <span class="name-tag">Z7钻孔机</span>
+    <span class="name-tag">Z6钻孔机</span>
+    <span class="name-tag">Z5钻孔机</span>
+    <span class="name-tag">Z4钻孔机</span>
+    <span class="name-tag">Z3钻孔机</span>
+    <span class="name-tag">Z2钻孔机</span>
+    <span class="name-tag">Z1钻孔机</span>
+  </div>
+  <div class="absolute z-1 v-5 tag-container">
+    <span class="name-tag">S7清洗机</span>
+    <span class="name-tag">S6清洗机</span>
+    <span class="name-tag">S5清洗机</span>
+    <span class="name-tag">S4清洗机</span>
+    <span class="name-tag">S3清洗机</span>
+    <span class="name-tag">S2清洗机</span>
+    <span class="name-tag">S1清洗机</span>
+  </div>
+  <div class="absolute z-1 v-6 tag-container">
+    <span class="name-tag">S7前储片台</span>
+    <span class="name-tag">S6前储片台</span>
+    <span class="name-tag">S5前储片台</span>
+    <span class="name-tag">S4前储片台</span>
+    <span class="name-tag">S3前储片台</span>
+    <span class="name-tag">S2前储片台</span>
+    <span class="name-tag">S1前储片台</span>
+  </div>
+  <div class="absolute z-2 v-7 tag-container">
+    <span class="name-tag">S7丝印机</span>
+    <span class="name-tag">S6丝印机</span>
+    <span class="name-tag">S5丝印机</span>
+    <span class="name-tag">S4丝印机</span>
+    <span class="name-tag">S3丝印机</span>
+    <span class="name-tag">S2丝印机</span>
+    <span class="name-tag">S1丝印机</span>
+  </div>
+  <div class="absolute z-2 v-8 tag-container">
+    <span class="name-tag">S7固化炉</span>
+    <span class="name-tag">S6固化炉</span>
+    <span class="name-tag">S5固化炉</span>
+    <span class="name-tag">S4固化炉</span>
+    <span class="name-tag">S3固化炉</span>
+    <span class="name-tag">S2固化炉</span>
+    <span class="name-tag">S1固化炉</span>
+  </div>
+  <div class="absolute z-1 v-10 tag-container">
+    <span class="name-tag">D2镀膜机</span>
+    <span class="name-tag">D1镀膜机</span>
+  </div>
+  <div class="absolute z-1 v-9 tag-container">
+    <span class="name-tag">S7后储片台</span>
+    <span class="name-tag">S6后储片台</span>
+    <span class="name-tag">S5后储片台</span>
+    <span class="name-tag">S4后储片台</span>
+    <span class="name-tag">S3后储片台</span>
+    <span class="name-tag">S2后储片台</span>
+    <span class="name-tag">S1后储片台</span>
+  </div>
+  <div class="absolute z-3 tag-container">
+    <span class="name-tag">B3前储片台</span>
+    <span class="name-tag">B2前储片台</span>
+    <span class="name-tag">B1前储片台</span>
+  </div>
+  <div class="absolute z-3 b-1 tag-container">
+    <span class="name-tag">B3清洗机</span>
+    <span class="name-tag">B2清洗机</span>
+    <span class="name-tag">B1清洗机</span>
+  </div>
+  <div class="absolute z-3 b-2 tag-container">
+    <span class="name-tag">B3下片</span>
+    <span class="name-tag">B2下片</span>
+    <span class="name-tag">B1下片</span>
+  </div>
+  <div class="absolute z-3 b-3 tag-container">
+    <span class="name-tag">B3后储片台</span>
+    <span class="name-tag">B2后储片台</span>
+    <span class="name-tag">B1后储片台</span>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>
--- a/src/MainScreen.vue
+++ b/src/MainScreen.vue
@@ -0,0 +1,236 @@
+<!-- 报警列表页面 -->
+<script setup>
+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";
+import TodayYield from "./components/mainscreen/TodayYield.vue";
+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 { useGlass } from "./utils/glass";
+
+const mainContainer = ref(null);
+const props = defineProps({
+  line: {
+    type: Number,
+    default: 1,
+  },
+});
+const store = useWsStore();
+const GlassContainer = useGlass(store);
+const settingStore = useSettings();
+
+// 检查状态
+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);
+}
+</script>
+
+<template>
+  <div id="main-container" ref="mainContainer" class="main-container">
+    <div id="main-container__fulleq">
+      <FullEqList v-if="0" />
+    </div>
+    <DatetimeTool />
+    <Tools @change-resolution="handleResolutionChange" />
+    <AppHeader />
+
+    <GlassContainer />
+
+    <div class="main-screen">
+      <!-- <div
+        style="
+          position: absolute;
+          top: 0;
+          left: -279px;
+          width: calc(100% + 279px);
+          height: 100%;
+          background: #ccc3;
+        "
+      >
+        <ThreeD :line="line ?? '1'" />
+      </div> -->
+
+      <TodayYield class=" " />
+      <SumYield class=" " />
+      <TodayRate class=" " />
+      <SumRate class=" " />
+    </div>
+  </div>
+</template>
+
+<style>
+.dark-table {
+  height: 100%;
+  background: transparent;
+  user-select: none;
+}
+
+.dark-row {
+  color: #fff;
+  background: #006acd32 !important;
+  user-select: none;
+}
+
+.dark-row:nth-child(odd) {
+  background: #020d2d32 !important;
+}
+
+.dark-row > td.el-table__cell {
+  border: none;
+  font-size: 16px;
+}
+
+.dark-row > td.el-table__cell:not(:last-child) {
+  border-right: 1px solid #0003;
+}
+
+.dark-row:hover > td.el-table__cell {
+  background-color: #fff1 !important;
+}
+
+.dark-header {
+  background-color: transparent !important;
+  color: #fff;
+}
+
+.dark-header > th.el-table__cell.is-leaf {
+  border-bottom: none;
+  background-color: #006acd32 !important;
+  font-weight: 400;
+  letter-spacing: 1px;
+}
+
+.dark-header > th.el-table__cell {
+  font-size: 16px;
+}
+
+.dark-header > th.el-table__cell:not(:last-child) {
+  border-right: 1px solid #0003;
+}
+</style>
+
+<style scoped>
+.ccontainer {
+  width: 420px;
+  height: 420px;
+  background: #ccc3;
+  /* position: absolute; */
+}
+
+.left-top {
+  top: 32px;
+  left: 32px;
+}
+
+.left-bottom {
+  bottom: 32px;
+  left: 32px;
+}
+
+.right-top {
+  top: 32px;
+  right: 32px;
+}
+
+.right-bottom {
+  bottom: 32px;
+  right: 32px;
+}
+
+.main-container {
+  width: 1920px;
+  height: 1080px;
+  background: #000;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  background: url(./assets/bg.png) 100% / cover no-repeat;
+}
+
+.pages-wrapper {
+  flex: 1;
+  display: flex;
+  position: relative;
+}
+
+.main-screen {
+  flex: 1;
+  position: relative;
+  display: grid;
+  grid-template-rows: repeat(2, 400px);
+  grid-template-columns: repeat(2, 400px);
+  justify-content: center;
+  /* align-content: center; */
+  /* place-content: center; */
+  gap: 15% 55%;
+  z-index: 300;
+}
+
+.alert-list {
+  height: calc(100% - 56px);
+  width: 520px;
+
+  position: absolute;
+  top: 15px;
+  right: 32px;
+
+  display: flex;
+  flex-direction: column;
+}
+
+:fullscreen .alert-list {
+  width: 35%;
+  top: 32px;
+  height: calc(100% - 64px);
+}
+
+.alert-list__table {
+  height: calc(100% - 72px);
+}
+
+.alert-list__table >>> .el-table__inner-wrapper::before {
+  background: transparent;
+}
+
+button {
+  appearance: none;
+  outline: none;
+  border: none;
+  cursor: pointer;
+}
+
+.alert-btn {
+  width: 100%;
+  height: 72px;
+  background: #0f04;
+  color: #fff;
+  font-size: 32px;
+  line-height: 1;
+  letter-spacing: 2px;
+  transition: all 0.2s ease-out;
+}
+
+.alert-btn:hover {
+  background: #0f08;
+}
+</style>
--- a/src/assets/full-lines.png
+++ b/src/assets/full-lines.png
--- a/src/assets/glass.png
+++ b/src/assets/glass.png
--- a/src/components/HourChart.vue
+++ b/src/components/HourChart.vue
@@ -17,17 +17,14 @@ const hourData = ref([
  // { lineName: "005", hour: "00:50", num: 50 },
 ]);
 store.$subscribe((mutation, state) => {
-  // console.log("[HourChart] =======>", state.data2.lineHourList?.length);
  if (
    state.data2.lineHourList == undefined ||
    state.data2.lineHourList?.length == 0
  ) {
-    // console.log("[HourChart] 清除数据");
    hourData.value.splice(0);
    if (chart.value) chart.value.dispose();
    return;
  }
-  // console.log("[HourChart]  ===> 有数据: ", state.data2.lineHourList);
  hourData.value = (state.data2?.lineHourList ?? [
    // { lineName: '001', hour: '00:00', num: 10 },
    // { lineName: '002', hour: '00:20', num: 20 },
@@ -36,8 +33,8 @@ store.$subscribe((mutation, state) => {
    // { lineName: '005', hour: '00:50', num: 50 },
  ]).map((item, index) => ({
    id: `${item.lineName}_${index}`,
-    hour: item.hour || `${index}`.padStart(2, "0"),
-    data: item.num || Math.floor(Math.random() * 100),
+    hour: item.hour || '__',
+    data: item.num || 0,
  }));
  setupChart();
 });
@@ -46,7 +43,6 @@ function setupChart() {
  if (chart.value) chart.value.dispose();
  nextTick(() => {
    chart.value = echarts.init(chartChart.value);
-    // console.log("[HourChart]  ===> 设置chart: ", chart.value, hourData.value.map((item) => item.hour), hourData.value.map((item) => item.data));
    chartSetup(
      chart.value,
      hourData.value.map((item) => item.hour),
@@ -92,7 +88,7 @@ onMounted(() => {

 <style scoped>
 .chart {
-  height: 300px;
+  height: 450px;
 }

 .chart-chart {
--- a/src/components/LatestWeekYield.vue
+++ b/src/components/LatestWeekYield.vue
@@ -0,0 +1,163 @@
+<script setup>
+import { ref, watch, onMounted, nextTick } from "vue";
+import * as echarts from "echarts";
+import Container from "./Base/Container.vue";
+import { useWsStore } from "../store";
+import chartSetup, { loadData } from "./LatestWeekYieldOptions";
+
+const store = useWsStore();
+const chartContainer = ref(null);
+const chartInstance = ref(null);
+const show = ref(false);
+
+onMounted(() => {
+  chartContainer.value.classList.add("h-full");
+  const d = loadData(store.data2.lineSevenDayLogList);
+  // const d = loadData([
+  //   {
+  //     data: [
+  //       { day: "10-10", num: Math.floor(Math.random() * 500) },
+  //       { day: "10-11", num: Math.floor(Math.random() * 500) },
+  //       { day: "10-12", num: Math.floor(Math.random() * 500) },
+  //       { day: "10-13", num: Math.floor(Math.random() * 500) },
+  //       { day: "10-14", num: Math.floor(Math.random() * 500) },
+  //       { day: "10-15", num: Math.floor(Math.random() * 500) },
+  //       { day: "10-16", num: Math.floor(Math.random() * 500) },
+  //     ],
+  //     name: "钢一线",
+  //   },
+  //   {
+  //     data: [
+  //       { day: "10-10", num: Math.floor(Math.random() * 500) },
+  //       { day: "10-11", num: Math.floor(Math.random() * 500) },
+  //       { day: "10-12", num: Math.floor(Math.random() * 500) },
+  //       { day: "10-13", num: Math.floor(Math.random() * 500) },
+  //       { day: "10-14", num: Math.floor(Math.random() * 500) },
+  //       { day: "10-15", num: Math.floor(Math.random() * 500) },
+  //       { day: "10-16", num: Math.floor(Math.random() * 500) },
+  //     ],
+  //     name: "钢二线",
+  //   },
+  //   {
+  //     data: [
+  //       { day: "10-10", num: Math.floor(Math.random() * 500) },
+  //       { day: "10-11", num: Math.floor(Math.random() * 500) },
+  //       { day: "10-12", num: Math.floor(Math.random() * 500) },
+  //       { day: "10-13", num: Math.floor(Math.random() * 500) },
+  //       { day: "10-14", num: Math.floor(Math.random() * 500) },
+  //       { day: "10-15", num: Math.floor(Math.random() * 500) },
+  //       { day: "10-16", num: Math.floor(Math.random() * 500) },
+  //     ],
+  //     name: "钢三线",
+  //   },
+  // ]);
+  if (!d) {
+    show.value = false;
+    if (chartInstance.value) {
+      chartInstance.value.dispose();
+      chartInstance.value = null;
+    }
+  } else {
+    if (!chartInstance.value)
+      chartInstance.value = echarts.init(chartContainer.value);
+    chartSetup(chartInstance.value, d);
+    show.value = true;
+  }
+});
+
+// 订阅
+store.$subscribe((mutation, state) => {
+  const d = loadData(state.data2.lineSevenDayLogList);
+  // const d = loadData([
+  //   {
+  //     data: [
+  //       { day: "10-10", num: Math.floor(Math.random() * 500) },
+  //       { day: "10-11", num: Math.floor(Math.random() * 500) },
+  //       { day: "10-12", num: Math.floor(Math.random() * 500) },
+  //       { day: "10-13", num: Math.floor(Math.random() * 500) },
+  //       { day: "10-14", num: Math.floor(Math.random() * 500) },
+  //       { day: "10-15", num: Math.floor(Math.random() * 500) },
+  //       { day: "10-16", num: Math.floor(Math.random() * 500) },
+  //     ],
+  //     name: "钢一线",
+  //   },
+  //   {
+  //     data: [
+  //       { day: "10-10", num: Math.floor(Math.random() * 500) },
+  //       { day: "10-11", num: Math.floor(Math.random() * 500) },
+  //       { day: "10-12", num: Math.floor(Math.random() * 500) },
+  //       { day: "10-13", num: Math.floor(Math.random() * 500) },
+  //       { day: "10-14", num: Math.floor(Math.random() * 500) },
+  //       { day: "10-15", num: Math.floor(Math.random() * 500) },
+  //       { day: "10-16", num: Math.floor(Math.random() * 500) },
+  //     ],
+  //     name: "钢二线",
+  //   },
+  //   {
+  //     data: [
+  //       { day: "10-10", num: Math.floor(Math.random() * 500) },
+  //       { day: "10-11", num: Math.floor(Math.random() * 500) },
+  //       { day: "10-12", num: Math.floor(Math.random() * 500) },
+  //       { day: "10-13", num: Math.floor(Math.random() * 500) },
+  //       { day: "10-14", num: Math.floor(Math.random() * 500) },
+  //       { day: "10-15", num: Math.floor(Math.random() * 500) },
+  //       { day: "10-16", num: Math.floor(Math.random() * 500) },
+  //     ],
+  //     name: "钢三线",
+  //   },
+  // ]);
+  if (!d) {
+    show.value = false;
+    if (chartInstance.value) {
+      chartInstance.value.dispose();
+      chartInstance.value = null;
+    }
+  } else {
+    if (!chartInstance.value)
+      chartInstance.value = echarts.init(chartContainer.value);
+    chartSetup(chartInstance.value, d);
+    show.value = true;
+  }
+});
+</script>
+
+<template>
+  <Container class="chart" title="近7日产量" icon="cube">
+    <div
+      ref="chartContainer"
+      class="chart-chart"
+      :style="{ opacity: show ? 1 : 0 }"
+    ></div>
+    <p v-show="!show" class="empty-data-hint">暂无数据</p>
+  </Container>
+</template>
+
+<style scoped>
+.chart {
+  height: 450px;
+}
+
+.chart-chart {
+  height: 100%;
+}
+</style>
+
+<style>
+.empty-data-hint {
+  color: #c5c5c5;
+  letter-spacing: 1px;
+  font-size: 24px;
+  line-height: 1.25;
+  text-align: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  display: inline-block;
+  width: 200px;
+  height: 32px;
+  user-select: none;
+}
+</style>
--- a/src/components/LatestWeekYieldOptions.js
+++ b/src/components/LatestWeekYieldOptions.js
@@ -0,0 +1,137 @@
+export const options = {
+  color: ['#00D3E7', '#2B9BFF', '#0D4DFF'],
+  legend: {
+    textStyle: {
+      color: "#fff8",
+    },
+    right: 0,
+    itemWidth: 12,
+    itemHeight: 12
+  },
+  tooltip: {},
+  dataset: {
+    source: [],
+  },
+  grid: {
+    top: 56,
+    bottom: 12,
+    left: 10,
+    right: 20,
+    containLabel: true,
+  },
+  xAxis: {
+    type: "category",
+    axisLabel: {
+      fontSize: 12,
+      color: "#fff8",
+    },
+    axisTick: {
+      alignWithLabel: true,
+    },
+  },
+  yAxis: {
+    name: "片",
+    nameTextStyle: {
+      color: "#fff8",
+      fontSize: 14,
+    },
+    axisLabel: {
+      fontSize: 12,
+      color: "#fff8",
+    },
+    splitLine: {
+      lineStyle: {
+        color: "#fff8",
+      },
+    },
+    minInterval: 1,
+  },
+  series: [
+    {
+      type: "bar",
+      label: {
+        show: true,
+        distance: 20,
+        rotate: 90,
+        color: "#fff",
+        verticalAlign: "middle",
+        position: 'top',
+        formatter: (params) => {
+          return params.data[1];
+        },
+      },
+    },
+    {
+      type: "bar",
+      label: {
+        show: true,
+        distance: 20,
+        rotate: 90,
+        color: "#fff",
+        verticalAlign: "middle",
+        position: 'top',
+        formatter: (params) => {
+          return params.data[2];
+        },
+      },
+    },
+    {
+      type: "bar",
+      label: {
+        show: true,
+        distance: 20,
+        rotate: 90,
+        color: "#fff",
+        verticalAlign: "middle",
+        position: 'top',
+        formatter: (params) => {
+          return params.data[3];
+        },
+      },
+    },
+  ],
+};
+
+export default function setup(
+  echartInstance,
+  list = [
+    ["1-12", 1, 2, 3],
+    ["1-13", 4, 5, 6],
+    ["1-14", 14, 15, 16],
+    ["1-15", 9],
+    ["1-16", 4, 5, 6],
+    ["1-17", 1, 1, 1],
+  ]
+) {
+  const new_options = { ...options };
+  new_options.dataset.source = [["date", "钢1线", "钢2线", "钢3线"], ...list];
+  echartInstance.setOption(new_options);
+}
+
+export function createDatasetFrom(lines, datelist) {
+  const dataset = [];
+  datelist.forEach((date) => {
+    const row = [date];
+    lines.forEach((line) => {
+      const item = line.data.find((item) => item.day === date);
+      row.push(item ? item.num : 0);
+    });
+    dataset.push(row);
+  });
+  console.log(dataset);
+  return dataset;
+}
+
+export function findDatelist(lines) {
+  const dateList = [];
+  lines.forEach((line) => {
+    dateList.push(...line.data.map((item) => item.day));
+  });
+  return Array.from(new Set(dateList)).sort();
+}
+
+export function loadData(list) {
+  if (!list || list.length != 3 || list[0].data.length <= 0) return null;
+  const datelist = findDatelist(list);
+  return createDatasetFrom(list, datelist);
+}
--- 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/datapage/HourChart.vue
+++ b/src/components/datapage/HourChart.vue
@@ -30,8 +30,8 @@ store.$subscribe((mutation, state) => {
  }
  hourData.value = (state.data2?.lineHourList ?? []).map((item, index) => ({
    id: `${item.lineName}_${index}`,
-    hour: item.hour || `${index}`.padStart(2, "0"),
-    data: item.num || Math.floor(Math.random() * 100),
+    hour: item.hour || `__`,
+    data: item.num || 0,
  }));
  setupChart();
 });
--- a/src/components/datapage/LatestWeekYieldOptions.js
+++ b/src/components/datapage/LatestWeekYieldOptions.js
@@ -1,4 +1,5 @@
 export const options = {
+  color: ['#00D3E7', '#2B9BFF', '#0D4DFF'],
  legend: {
    textStyle: {
      color: "#fff8",
--- a/src/components/mainscreen/SumRate.vue
+++ b/src/components/mainscreen/SumRate.vue
@@ -0,0 +1,152 @@
+<script setup>
+import { ref, onMounted, nextTick } from "vue";
+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]) => {
+  const option = {
+    color: ["#F3908B"],
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "shadow",
+      },
+    },
+    grid: {
+      top: "5%",
+      bottom: "5%",
+      left: "3%",
+      right: "5%",
+      containLabel: true,
+    },
+    yAxis: {
+      type: "value",
+      axisLabel: {
+        fontSize: 14,
+        color: "#fff",
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: "#ccc6",
+        },
+      },
+    },
+    xAxis: {
+      type: "category",
+      data: ["钢1线", "钢2线", "钢3线"],
+      axisLabel: {
+        fontSize: 14,
+        color: "#fff",
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: "#ccc6",
+        },
+      },
+    },
+    series: [
+      {
+        type: "line",
+        data: datalist,
+        label: {
+          show: true,
+          position: "top",
+          // formatter: (params) => {
+          //   console.log("params", datalist[params.dataIndex]);
+          // },
+          formatter: "{c}%",
+          color: "#fff",
+          fontSize: 14,
+        },
+      },
+    ],
+  };
+
+  chart.setOption(option);
+};
+
+const store = useWsStore();
+const chartChart = ref(null);
+const chart = ref(null);
+const showChartDom = ref(false);
+
+/** 无状态，处理数据 */
+function loadData(yieldArray) {
+  // lineSumProductYield
+  const result = [];
+  if (yieldArray == undefined || yieldArray?.length == 0) return null;
+  for (let i = 0; i < yieldArray.length; ++i) {
+    if (yieldArray[i].name == "钢1线") {
+      result[0] = parseFloat(yieldArray[i].data);
+    } else if (yieldArray[i].name == "钢2线") {
+      result[1] = parseFloat(yieldArray[i].data);
+    } else if (yieldArray[i].name == "钢3线") {
+      result[2] = parseFloat(yieldArray[i].data);
+    }
+  }
+  return result;
+}
+
+function setupChart(chart, dom, data) {
+  if (chart.value) chart.value.dispose();
+  nextTick(() => {
+    chart.value = echarts.init(dom);
+    setupFn(chart.value, data);
+  });
+}
+
+/** 有状态，处理数据 */
+function __apply(yieldArray) {
+  const d = loadData(yieldArray);
+  if (!d) {
+    showChartDom.value = false;
+    if (chart.value) chart.value.dispose();
+    return;
+  }
+  showChartDom.value = true;
+  setupChart(chart, chartChart.value, d);
+}
+
+// 订阅
+store.$subscribe((mutation, state) => {
+  __apply(state.mainDataChart.lineSumProductYield);
+  // __apply([
+  //   { name: "钢1线", data: 0.32 },
+  //   { name: "钢2线", data: 0.91 },
+  //   { name: "钢3线", data: 0.54 },
+  // ]);
+});
+
+onMounted(() => {
+  chartChart.value.classList.add("h-full");
+  __apply([
+    { name: "钢1线", data: "0%" },
+    { name: "钢2线", data: "0%" },
+    { name: "钢3线", data: "0%" },
+  ]);
+});
+</script>
+
+<template>
+  <Container class="chart" title="累计生产线成品率" icon="cube">
+    <div
+      ref="chartChart"
+      class="chart-chart"
+      :style="{ opacity: showChartDom ? 1 : 0 }"
+    ></div>
+    <p v-show="!chart" class="empty-data-hint">暂无数据</p>
+  </Container>
+</template>
+
+<style scoped>
+.chart {
+  /* height: 300px; */
+}
+
+.chart-chart {
+  height: 100%;
+}
+</style>
--- a/src/components/mainscreen/SumYield.vue
+++ b/src/components/mainscreen/SumYield.vue
@@ -0,0 +1,155 @@
+<script setup>
+import { ref, onMounted, nextTick } from "vue";
+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 = {
+    color: ["#3398FB"],
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "shadow",
+      },
+    },
+    grid: {
+      top: "5%",
+      bottom: "5%",
+      left: "3%",
+      right: "5%",
+      containLabel: true,
+    },
+    xAxis: {
+      type: "value",
+      boundaryGap: [0, 0.01],
+      axisLabel: {
+        fontSize: 14,
+        color: "#fff",
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: "#ccc6",
+        },
+      },
+    },
+    yAxis: {
+      type: "category",
+      data: ["钢1线", "钢2线", "钢3线", "合计"],
+      axisLabel: {
+        fontSize: 14,
+        color: "#fff",
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: "#ccc6",
+        },
+      },
+    },
+    series: [
+      {
+        type: "bar",
+        data: datalist,
+        label: {
+          show: true,
+          position: "right",
+          formatter: "{c}",
+          color: "#fff",
+          fontSize: 14,
+        },
+      },
+    ],
+  };
+
+  chart.setOption(option);
+};
+
+const store = useWsStore();
+const chartChart = ref(null);
+const chart = ref(null);
+const showChartDom = ref(false);
+
+/** 无状态，处理数据 */
+function loadData(yieldArray) {
+  const result = [];
+  if (yieldArray == undefined || yieldArray?.length == 0) return null;
+  for (let i = 0; i < yieldArray.length; ++i) {
+    if (yieldArray[i].name == "钢1线") {
+      result[0] = parseFloat(yieldArray[i].data) || 0;
+    } else if (yieldArray[i].name == "钢2线") {
+      result[1] = parseFloat(yieldArray[i].data) || 0;
+    } else if (yieldArray[i].name == "钢3线") {
+      result[2] = parseFloat(yieldArray[i].data) || 0;
+    } else {
+      // 合计
+      result[3] = parseFloat(yieldArray[i].data) || 0;
+    }
+  }
+  return result;
+}
+
+function setupChart(chart, dom, data) {
+  if (chart.value) chart.value.dispose();
+  nextTick(() => {
+    chart.value = echarts.init(dom);
+    setupFn(chart.value, data);
+  });
+}
+
+/** 有状态，处理数据 */
+function __apply(yieldArray) {
+  const d = loadData(yieldArray);
+  if (!d) {
+    showChartDom.value = false;
+    if (chart.value) chart.value.dispose();
+    return;
+  }
+  showChartDom.value = true;
+  setupChart(chart, chartChart.value, d);
+}
+
+// 订阅
+store.$subscribe((mutation, state) => {
+  __apply(state.mainDataChart.lineSumProductData);
+  // __apply([
+  //   { name: "钢1线", data: 11 },
+  //   { name: "钢2线", data: 22 },
+  //   { name: "钢3线", data: 33 },
+  //   { name: "合计", data: 66 },
+  // ]);
+});
+
+onMounted(() => {
+  chartChart.value.classList.add("h-full");
+  __apply([
+    { name: "钢1线", data: 0 },
+    { name: "钢2线", data: 0 },
+    { name: "钢3线", data: 0 },
+    { name: "合计", data: 0 },
+  ]);
+});
+</script>
+
+<template>
+  <Container class="chart" title="累计生产线产量" icon="cube">
+    <div
+      ref="chartChart"
+      class="chart-chart"
+      :style="{ opacity: showChartDom ? 1 : 0 }"
+    ></div>
+    <p v-show="!chart" class="empty-data-hint">暂无数据</p>
+  </Container>
+</template>
+
+<style scoped>
+.chart {
+  /* height: 300px; */
+}
+
+.chart-chart {
+  height: 100%;
+}
+</style>
--- a/src/components/mainscreen/TodayRate.vue
+++ b/src/components/mainscreen/TodayRate.vue
@@ -0,0 +1,153 @@
+<script setup>
+import { ref, onMounted, nextTick } from "vue";
+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]) => {
+  const option = {
+    color: ["#F3908B"],
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "shadow",
+      },
+    },
+    grid: {
+      top: "5%",
+      bottom: "5%",
+      left: "3%",
+      right: "5%",
+      containLabel: true,
+    },
+    yAxis: {
+      type: "value",
+      axisLabel: {
+        fontSize: 14,
+        color: "#fff",
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: "#ccc6",
+        },
+      },
+    },
+    xAxis: {
+      type: "category",
+      data: ["钢1线", "钢2线", "钢3线"],
+      axisLabel: {
+        fontSize: 14,
+        color: "#fff",
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: "#ccc6",
+        },
+      },
+    },
+    series: [
+      {
+        type: "line",
+        data: datalist,
+        // data: datalist.map((item) => item * 100),
+        label: {
+          show: true,
+          position: "top",
+          // formatter: (params) => {
+          //   console.log("params", datalist[params.dataIndex]);
+          // },
+          formatter: "{c}%",
+          color: "#fff",
+          fontSize: 14,
+        },
+      },
+    ],
+  };
+
+  chart.setOption(option);
+};
+
+const store = useWsStore();
+const chartChart = ref(null);
+const chart = ref(null);
+const showChartDom = ref(false);
+
+/** 无状态，处理数据 */
+function loadData(yieldArray) {
+  // lineTodayProductYield
+  const result = [];
+  if (yieldArray == undefined || yieldArray?.length == 0) return null;
+  for (let i = 0; i < yieldArray.length; ++i) {
+    if (yieldArray[i].name == "钢1线") {
+      result[0] = parseFloat(yieldArray[i].data) || 0.0;
+    } else if (yieldArray[i].name == "钢2线") {
+      result[1] = parseFloat(yieldArray[i].data) || 0.0;
+    } else if (yieldArray[i].name == "钢3线") {
+      result[2] = parseFloat(yieldArray[i].data) || 0.0;
+    }
+  }
+  return result;
+}
+
+function setupChart(chart, dom, data) {
+  if (chart.value) chart.value.dispose();
+  nextTick(() => {
+    chart.value = echarts.init(dom);
+    setupFn(chart.value, data);
+  });
+}
+
+/** 有状态，处理数据 */
+function __apply(yieldArray) {
+  const d = loadData(yieldArray);
+  if (!d) {
+    showChartDom.value = false;
+    if (chart.value) chart.value.dispose();
+    return;
+  }
+  showChartDom.value = true;
+  setupChart(chart, chartChart.value, d);
+}
+
+// 订阅
+store.$subscribe((mutation, state) => {
+  __apply(state.mainDataChart.lineTodayProductYield);
+  // __apply([
+  //   { name: "钢1线", data: 0.32 },
+  //   { name: "钢2线", data: 0.91 },
+  //   { name: "钢3线", data: 0.54 },
+  // ]);
+});
+
+onMounted(() => {
+  chartChart.value.classList.add("h-full");
+  __apply([
+    { name: "钢1线", data: "0%" },
+    { name: "钢2线", data: "0%" },
+    { name: "钢3线", data: "0%" },
+  ]);
+});
+</script>
+
+<template>
+  <Container class="chart" title="今日生产线成品率" icon="cube">
+    <div
+      ref="chartChart"
+      class="chart-chart"
+      :style="{ opacity: showChartDom ? 1 : 0 }"
+    ></div>
+    <p v-show="!chart" class="empty-data-hint">暂无数据</p>
+  </Container>
+</template>
+
+<style scoped>
+.chart {
+  /* height: 300px; */
+}
+
+.chart-chart {
+  height: 100%;
+}
+</style>
--- a/src/components/mainscreen/TodayYield.vue
+++ b/src/components/mainscreen/TodayYield.vue
@@ -0,0 +1,159 @@
+<script setup>
+import { ref, onMounted, nextTick } from "vue";
+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 = {
+    color: ["#3398FB"],
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "shadow",
+      },
+    },
+    grid: {
+      top: "5%",
+      bottom: "5%",
+      left: "3%",
+      right: "5%",
+      containLabel: true,
+    },
+    xAxis: {
+      type: "value",
+      boundaryGap: [0, 0.01],
+      axisLabel: {
+        fontSize: 14,
+        color: "#fff",
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: "#ccc6",
+        },
+      },
+    },
+    yAxis: {
+      type: "category",
+      data: ["钢1线", "钢2线", "钢3线", "合计"],
+      axisLabel: {
+        fontSize: 14,
+        color: "#fff",
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: "#ccc6",
+        },
+      },
+    },
+    series: [
+      {
+        type: "bar",
+        data: datalist,
+        label: {
+          show: true,
+          position: "right",
+          formatter: "{c}",
+          color: "#fff",
+          fontSize: 14,
+        },
+      },
+    ],
+  };
+
+  chart.setOption(option);
+};
+
+const store = useWsStore();
+const chartChart = ref(null);
+const chart = ref(null);
+const showChartDom = ref(false);
+
+/** 无状态，处理数据 */
+function loadData(yieldArray) {
+  // lineTodayProductData
+  const result = [];
+  if (yieldArray == undefined || yieldArray?.length == 0) return null;
+  for (let i = 0; i < yieldArray.length; ++i) {
+    if (yieldArray[i].name == "钢1线") {
+      result[0] = parseFloat(yieldArray[i].data) || 0;
+    } else if (yieldArray[i].name == "钢2线") {
+      result[1] = parseFloat(yieldArray[i].data) || 0;
+    } else if (yieldArray[i].name == "钢3线") {
+      result[2] = parseFloat(yieldArray[i].data) || 0;
+    } else {
+      // 合计
+      result[3] = parseFloat(yieldArray[i].data) || 0;
+    }
+  }
+  return result;
+}
+
+function setupChart(chart, dom, data) {
+  if (chart.value) {
+    chart.value.dispose();
+    chart.value = null;
+  }
+  nextTick(() => {
+    chart.value = echarts.init(dom);
+    setupFn(chart.value, data);
+  });
+}
+
+/** 有状态，处理数据 */
+function __apply(yieldArray) {
+  const d = loadData(yieldArray);
+  if (!d) {
+    showChartDom.value = false;
+    if (chart.value) chart.value.dispose();
+    return;
+  }
+  showChartDom.value = true;
+  setupChart(chart, chartChart.value, d);
+}
+
+// 订阅
+store.$subscribe((mutation, state) => {
+  __apply(state.mainDataChart.lineTodayProductData);
+  // __apply([
+  //   { name: "钢1线", data: 11 },
+  //   { name: "钢2线", data: 22 },
+  //   { name: "钢3线", data: 33 },
+  //   { name: "合计", data: 66 },
+  // ]);
+});
+
+onMounted(() => {
+  chartChart.value.classList.add("h-full");
+  __apply([
+    { name: "钢1线", data: 0 },
+    { name: "钢2线", data: 0 },
+    { name: "钢3线", data: 0 },
+    { name: "合计", data: 0 },
+  ]);
+});
+</script>
+
+<template>
+  <Container class="chart" title="今日生产线产量" icon="cube">
+    <div
+      ref="chartChart"
+      class="chart-chart"
+      :style="{ opacity: showChartDom ? 1 : 0 }"
+    ></div>
+    <p v-show="!chart" class="empty-data-hint">暂无数据</p>
+  </Container>
+</template>
+
+<style scoped>
+.chart {
+  /* height: 300px; */
+}
+
+.chart-chart {
+  height: 100%;
+}
+</style>
--- a/src/full-eq-list.css
+++ b/src/full-eq-list.css
@@ -0,0 +1,180 @@
+#main-container__fulleq {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: url(./assets/full-lines.png) 100% / cover no-repeat;
+}
+
+.name-tag {
+  padding: 5px;
+  border-radius: 5px;
+  background: #ccc3;
+  backdrop-filter: blur(3px);
+  color: #000a;
+  font-size: 12px;
+  /* font-weight: 600; */
+  transition: background 0.1s ease-out;
+  user-select: none;
+  width: 72px;
+  text-align: center;
+  position: absolute;
+  /* cursor: pointer; */
+  /* transform: rotate(-45deg); */
+  box-shadow: 0 0 5px 2px #0003;
+}
+
+/* .name-tag:hover {
+    background: #666c;
+  } */
+
+.tag-container > .name-tag:first-child {
+  bottom: 214px;
+  left: -128px;
+}
+.tag-container > .name-tag:nth-child(2) {
+  bottom: 182px;
+  left: -100px;
+}
+.tag-container > .name-tag:nth-child(3) {
+  bottom: 150px;
+  left: -88px;
+}
+.tag-container > .name-tag:nth-child(4) {
+  bottom: 118px;
+  left: -68px;
+}
+.tag-container > .name-tag:nth-child(5) {
+  bottom: 86px;
+  left: -52px;
+}
+.tag-container > .name-tag:nth-child(6) {
+  bottom: 32px;
+  left: -20px;
+}
+.tag-container > .name-tag:nth-child(7) {
+  top: 0;
+  left: 0;
+}
+
+.absolute {
+  position: absolute;
+  padding: 8px;
+  z-index: 200;
+}
+
+.v-1 {
+  bottom: 160px;
+  left: 430px;
+}
+
+.v-2 {
+  bottom: 200px;
+  left: 480px;
+}
+
+.v-3 {
+  bottom: 250px;
+  left: 620px;
+}
+
+.z-1 > .name-tag:first-child {
+  bottom: 205px;
+  left: -155px;
+}
+.z-1 > .name-tag:nth-child(2) {
+  bottom: 180px;
+  left: -130px;
+}
+.v-4 {
+  bottom: 300px;
+  left: 730px;
+}
+
+.v-5 {
+  bottom: 340px;
+  left: 780px;
+}
+
+.v-6 {
+  bottom: 360px;
+  left: 840px;
+}
+
+.z-2 > .name-tag:first-child {
+  bottom: 205px;
+  left: -140px;
+}
+.z-2 > .name-tag:nth-child(2) {
+  bottom: 180px;
+  left: -110px;
+}
+.z-2 > .name-tag:nth-child(3) {
+  bottom: 152px;
+  left: -70px;
+}
+.z-2 > .name-tag:nth-child(4) {
+  bottom: 128px;
+  left: -50px;
+}
+.z-2 > .name-tag:nth-child(5) {
+  bottom: 100px;
+  left: -36px;
+}
+
+.v-7 {
+  bottom: 380px;
+  left: 880px;
+}
+
+.v-8 {
+  bottom: 410px;
+  left: 930px;
+}
+
+.v-9 {
+  bottom: 440px;
+  left: 1020px;
+}
+
+.v-10 {
+  bottom: 260px;
+  left: 1100px;
+}
+
+.z-3 {
+  bottom: 550px;
+  left: 1400px;
+  /* background: #c003; */
+}
+
+.z-3 > .name-tag:first-child {
+  bottom: 235px;
+  left: -155px;
+}
+
+.z-3 > .name-tag:nth-child(2) {
+  bottom: 188px;
+  left: -85px;
+}
+
+.z-3 > .name-tag:nth-child(3) {
+  bottom: 120px;
+  left: 35px;
+}
+
+.b-1 {
+  bottom: 570px;
+  left: 1440px;
+}
+
+.b-2 {
+  bottom: 600px;
+  left: 1490px;
+}
+
+.b-3 {
+  bottom: 620px;
+  left: 1530px;
+}
--- 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/pages/3D.vue
+++ b/src/pages/3D.vue
--- a/src/pages/DataPage.vue
+++ b/src/pages/DataPage.vue
@@ -1,8 +1,8 @@
 <!-- 实时数据页面 -->
 <script setup>
 import HourChart from "../components/datapage/HourChart.vue";
-import TeamChartDay from "../components/datapage/TeamChartDay.vue";
-import TeamChartMonth from "../components/datapage/TeamChartMonth.vue";
+// import TeamChartDay from "../components/datapage/TeamChartDay.vue";
+// import TeamChartMonth from "../components/datapage/TeamChartMonth.vue";
 import LatestWeekYield from '../components/datapage/LatestWeekYield.vue'
 import LineToday from '../components/datapage/LineToday.vue';
 import LineMonth from '../components/datapage/LineMonth.vue';
@@ -20,9 +20,9 @@ import LineMonth from '../components/datapage/LineMonth.vue';
    <!-- 本月生产线情况 -->
    <LineMonth />
    <!-- 本日班组情况 -->
-    <TeamChartDay />
+    <!-- <TeamChartDay /> -->
    <!-- 本月班组情况 -->
-    <TeamChartMonth />
+    <!-- <TeamChartMonth /> -->
  </div>
 </template>

@@ -31,10 +31,10 @@ import LineMonth from '../components/datapage/LineMonth.vue';
  flex: 1;
  position: relative;
  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 24px;
-  padding: 32px;
+  padding: 32px 56px;
  align-items: stretch;
 }

--- a/src/pages/ThreeDimension.vue
+++ b/src/pages/ThreeDimension.vue
@@ -3,6 +3,7 @@
 import HourChart from "../components/HourChart.vue";
 import TeamChartDay from "../components/TeamChartDay.vue";
 import TeamChartMonth from "../components/TeamChartMonth.vue";
+import LatestWeekYield from '../components/LatestWeekYield.vue'
 import ThreeD from './3D.vue'

 const props = defineProps({
@@ -21,8 +22,9 @@ const props = defineProps({
    </div>
    <div class="data-list">
      <HourChart />
-      <TeamChartDay />
-      <TeamChartMonth />
+      <LatestWeekYield />
+      <!-- <TeamChartDay />
+      <TeamChartMonth /> -->
    </div>
  </div>
 </template>
@@ -38,7 +40,7 @@ const props = defineProps({
  width: 480px;

  position: absolute;
-  top: 0;
+  top: 24px;
  right: 32px;
  gap: 24px;
  display: flex;
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -2,9 +2,11 @@ import { defineStore } from "pinia";
 import { ref } from "vue";

 export const useWsStore = defineStore("wsData", () => {
-  const data1 = ref({ test: "hello world" });
+  const data1 = ref({});
  const data2 = ref({});
  const data3 = ref({});
+  const mainDataChart = ref({});
+  const mainDataAlarm = ref({});

  function updateData(category, data) {
    switch (category) {
@@ -16,24 +18,17 @@ export const useWsStore = defineStore("wsData", () => {
        break;
      case "3":
        data3.value = { ...data3.value, ...data };
+        break;
+      case "main-chart":
+        mainDataChart.value = { ...mainDataChart.value, ...data };
+        break;
+      case "main-alarm":
+        mainDataAlarm.value = { ...mainDataAlarm.value, ...data };
+        break;
      default:
        break;
    }
  }

-  return { data1, data2, data3, updateData };
+  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,206 @@
+import glassImgSrc from "../assets/glass.png";
+import { connect0 } from "./useWebsocket";
+import { ref, watchEffect, onMounted, h } from "vue";
+
+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;
+  }
+}
+
+/** 允许展示的工段 */
+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",
+    },
+  });
+}
--- a/src/utils/useWebsocket.js
+++ b/src/utils/useWebsocket.js
@@ -1,6 +1,7 @@
 import Client from "./ws";

-export default function useWebsocket(store, path) {
+export default function useWebsocket(store, path, excludePaths = []) {
+  if (excludePaths.includes(path)) return;
  // connect0(store);
  connectPath(store, path);
 }
@@ -34,7 +35,8 @@ function connectPath(store, path) {
  );
 }

-function connect0(store) {
+export function connect0(store) {
+  console.log("[*] Connecting main screen........");
  new Client(
    {
      url: url + "/0",
@@ -44,6 +46,14 @@ function connect0(store) {
      try {
        const data = JSON.parse(message.data);
        console.log("message --- 0 ---> ", JSON.parse(message.data));
+
+        if ("lineSumProductYield" in data) {
+          // 主屏推送 图表数据
+          store.updateData("main-chart", data);
+        } else {
+          // 主屏推送 报警数据
+          store.updateData("main-alarm", data);
+        }
      } catch (err) {
        console.log("[x] 未解析的ws数据: ", err);
      }
				`@@ -1 +0,0 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>