update carosul

update 环
Merge branch 'master' of http://git.picaiba.com/g7hoo/chenzhou
2024-03-21 17:05:20 +08:00 · 2024-03-21 15:18:50 +08:00 · 2024-03-21 10:48:24 +08:00 · 2024-03-21 10:47:49 +08:00 · 2024-03-21 10:31:12 +08:00 · 2024-03-21 10:30:57 +08:00
105 changed files with 8388 additions and 689 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/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
        "echarts": "^5.4.3",
        "element-plus": "^2.4.4",
        "pinia": "^2.1.7",
+        "screenfull": "^6.0.2",
        "vue": "^3.3.11",
        "vue3-marquee": "^4.1.0"
      },
@@ -1123,6 +1124,14 @@
        "fsevents": "~2.3.2"
      }
    },
+    "node_modules/screenfull": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmmirror.com/screenfull/-/screenfull-6.0.2.tgz",
+      "integrity": "sha512-AQdy8s4WhNvUZ6P8F6PB21tSPIYKniic+Ogx0AacBMjKP1GUHN2E9URxQHtCusiwxudnCKkdy4GrHXPPJSkCCw==",
+      "engines": {
+        "node": "^14.13.1 || >=16.0.0"
+      }
+    },
    "node_modules/source-map-js": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
@@ -1888,6 +1897,11 @@
        "fsevents": "~2.3.2"
      }
    },
+    "screenfull": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmmirror.com/screenfull/-/screenfull-6.0.2.tgz",
+      "integrity": "sha512-AQdy8s4WhNvUZ6P8F6PB21tSPIYKniic+Ogx0AacBMjKP1GUHN2E9URxQHtCusiwxudnCKkdy4GrHXPPJSkCCw=="
+    },
    "source-map-js": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
    "echarts": "^5.4.3",
    "element-plus": "^2.4.4",
    "pinia": "^2.1.7",
+    "screenfull": "^6.0.2",
    "vue": "^3.3.11",
    "vue3-marquee": "^4.1.0"
  },
--- a/src/AlertListScreen.vue
+++ b/src/AlertListScreen.vue
@@ -0,0 +1,276 @@
+<!-- 报警列表页面 -->
+<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>
+
+      <ul class="main-screen-navigator alert-screen-navigator">
+        <li><a href="/main-screen">主屏页面</a></li>
+        <li class="active">报警列表</li>
+        <li><a href="/1-1">分屏页面</a></li>
+      </ul>
+    </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,48 +1,55 @@
 <script setup>
 import { ref, onMounted } from "vue";
 import MainPage from "./MainPage.vue";
-import Slider from "./components/Slider.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 = document.location.pathname;
-if (urlPath === "/") {
-  urlPath = "/1-1";
+let urlPath = ref(document.location.pathname);
+if (urlPath.value === "/") {
+  urlPath.value = "/1-1";
 }
-useWebsocket(store, urlPath);
+useWebsocket(store, urlPath.value, excludePaths);

 // size setting
-const size = ref(80);
-onMounted(() => {
-  setSize(size.value);
-});
+// const size = ref(80);
+// onMounted(() => {
+//   setSize(size.value);
+// });

 // style update
-const styles = ref({});
-function setSize(value) {
-  const v = (value / 100).toFixed(2);
-  console.log("size change", value);
-  styles.value = {
-    transform: `scale(${v})`,
-    // transform: `scale(${v * 24 / 33}, ${v})`,
-    transformOrigin: "top left",
-  };
-}
+// const styles = ref({});
+// function setSize(value) {
+//   const v = (value / 100).toFixed(2);
+//   styles.value = {
+//     transform: `scale(${v})`,
+//     // transform: `scale(${v * 24 / 33}, ${v})`,
+//     transformOrigin: "top left",
+//   };
+// }
 </script>

 <template>
  <div id="app-container">
-    <MainPage :style="styles" />
-    <Slider :size="size" @size-change="setSize" />
+    <!-- <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>

 <style scoped>
 #app-container {
-  width: 100vw;
-  height: 100vh;
+  /* width: 100vw;
+  height: 100vh; */
  background: #fff;
+  height: 100%;
+  display: inline-block;
 }
 </style>
--- 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/MainPage.vue
+++ b/src/MainPage.vue
@@ -1,24 +1,133 @@
 <script setup>
-import { ref } from 'vue';
-import Tools from './components/Tools.vue';
-import NavMenu from './components/NavMenu.vue';
-import AnnoucementPage from './pages/AnnouncementPage.vue';
-import RealtimePage from './pages/RealtimePage.vue';
-import AppHeader from './components/Base/Header.vue';
-import AlertListPage from './pages/AlertListPage.vue'
-import DataPage from './pages/DataPage.vue';
+import { ref, onMounted } from "vue";
+import Tools from "./components/Tools.vue";
+import NavMenu from "./components/NavMenu.vue";
+import AnnoucementPage from "./pages/AnnouncementPage.vue";
+import RealtimePage from "./pages/RealtimePage.vue";
+import AppHeader from "./components/Base/Header.vue";
+import AlertListPage from "./pages/AlertListPage.vue";
+import DataPage from "./pages/DataPage.vue";
+import DatetimeTool from "./components/HeadTime.vue";
+import ThreeDimension from "./pages/ThreeDimension.vue";
+import { useSettings } from "./store/settings";

+const props = defineProps(["path"]);

-const currentPage = ref('3d');
+const pages = ["3d", "data", "realtime", "alert", "announcement"];
+const currentPage = ref("3d");
 const handlePageChange = (page) => {
  currentPage.value = page;
-  console.log(currentPage.value);
 };
+const mainContainer = ref(null);
+
+const store = useSettings();
+const timer = ref(null);
+
+function startCarousel(pages, duration) {
+  if (timer.value) clearInterval(timer.value);
+  timer.value = setInterval(() => {
+    handlePageChange(
+      pages[(pages.indexOf(currentPage.value) + 1) % pages.length]
+    );
+  }, duration);
+}
+
+store.$subscribe((mutation, state) => {
+  const pages = state.settings.carouselPages;
+  // 如果更新了时间
+  if (
+    mutation.events.key == "carouselTime" &&
+    state.settings.carouselTime > 0 &&
+    state.settings.carousel
+  ) {
+    startCarousel(pages, state.settings.carouselTime * 1000);
+  } else if (mutation.events.key == "carousel") {
+    // 如果更新了状态
+    if (state.settings.carousel) {
+      startCarousel(pages, state.settings.carouselTime * 1000);
+    } else {
+      clearInterval(timer.value);
+      timer.value = null;
+    }
+  } else if (mutation.events.key == "carouselPages") {
+    if (state.settings.carousel) {
+      startCarousel(pages, state.settings.carouselTime * 1000);
+    } else {
+      clearInterval(timer.value);
+      timer.value = null;
+    }
+  }
+});
+
+// 检查状态
+onMounted(() => {
+  const settings = store.settings;
+  const pages = settings.carouselPages;
+  if (settings.carousel) {
+    // 开始轮播
+    if (timer.value) clearInterval(timer.value);
+    timer.value = setInterval(() => {
+      handlePageChange(
+        pages[(pages.indexOf(currentPage.value) + 1) % pages.length]
+      );
+    }, settings.carouselTime * 1000);
+  }
+  // 设置分辨率
+  handleResolutionChange(settings.resolution.width, settings.resolution.height);
+});
+
+const pathMap = {
+  // 钢三线
+  "/3-1": 1,
+  "/3-2": 2,
+  "/3-3": 11, // 3,
+  "/3-4": 12,
+  // 钢二线
+  "/2-1": 5,
+  "/2-2": 6,
+  "/2-3": 7,
+  "/2-4": 4,
+  // 钢一线
+  "/1-1": 9,
+  "/1-2": 10,
+  "/1-3": 3,
+  "/1-4": 8,
+};
+
+function handleResolutionChange(width, height) {
+  console.log("document.documentElement", document.documentElement);
+  if (mainContainer.value) {
+    // mainContainer.value.style.width = `${width}px`;
+    // mainContainer.value.style.height = `${height}px`;
+    // changeScale(mainContainer.value, width, height)
+    changeScale(mainContainer.value, width, 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 resetScale(elm) {
+  elm.style.transform = "initial";
+  elm.style.transformOrigin = "initial";
+}
 </script>

 <template>
-  <div class="main-container">
-    <Tools v-if="currentPage !== 'announcement'" />
+  <div id="main-container" ref="mainContainer" class="main-container">
+    <DatetimeTool v-if="currentPage !== 'announcement'" />
+    <Tools
+      v-if="currentPage !== 'announcement'"
+      @change-resolution="handleResolutionChange"
+    />
    <AppHeader v-if="currentPage !== 'announcement'" />
    <AnnoucementPage
      v-if="currentPage === 'announcement'"
@@ -26,11 +135,21 @@ const handlePageChange = (page) => {
      @home="() => handlePageChange('3d')"
    />
    <div v-else class="pages-wrapper">
-      <NavMenu @change="handlePageChange" />
-      <div v-if="currentPage === '3d'" class="3d-page">3d</div>
-      <DataPage v-if="currentPage === 'data'" />
-      <AlertListPage v-if="currentPage === 'alert'" />
-      <RealtimePage v-if="currentPage === 'realtime'" />
+      <NavMenu @change="handlePageChange" :value="currentPage" />
+      <!-- <TriplePage v-if="currentPage === '3d'" :line="pathMap[path] ?? '1'" /> -->
+      <ThreeDimension
+        v-if="currentPage === '3d'"
+        :line="pathMap[path] ?? '1'"
+      />
+      <DataPage v-if="currentPage === 'data'" :line="pathMap[path] ?? '1'" />
+      <AlertListPage
+        v-if="currentPage === 'alert'"
+        :line="pathMap[path] ?? '1'"
+      />
+      <RealtimePage
+        v-if="currentPage === 'realtime'"
+        :line="pathMap[path] ?? '1'"
+      />
    </div>
  </div>
 </template>
@@ -43,10 +162,6 @@ const handlePageChange = (page) => {
  position: relative;
  display: flex;
  flex-direction: column;
-  /** 
-  background: url('https://img1.baidu.com/it/u=2052683582,2603151390&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800')
-  100% / 100% no-repeat;
-  */
  background: url(./assets/bg.png) 100% / cover no-repeat;
 }

--- a/src/MainScreen.vue
+++ b/src/MainScreen.vue
@@ -0,0 +1,294 @@
+<!-- 报警列表页面 -->
+<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>
+
+    <ul class="main-screen-navigator alert-screen-navigator">
+      <li class="active">主屏页面</li>
+      <li><a href="/alert-list">报警列表</a></li>
+      <li><a href="/1-1">分屏页面</a></li>
+    </ul>
+  </div>
+</template>
+
+<style>
+ul,
+li {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.alert-screen-navigator a,
+.main-screen-navigator a {
+  color: #fff;
+  text-decoration: none;
+}
+
+.alert-screen-navigator,
+.main-screen-navigator {
+  position: absolute;
+  z-index: 1000;
+  bottom: 32px;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  width: 460px;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  background: rgba(46, 175, 214, 0.1);
+  color: #fff;
+  font-size: 16px;
+  letter-spacing: 1px;
+  user-select: none;
+  padding: 12px;
+  border-radius: 32px;
+}
+
+.alert-screen-navigator > li,
+.main-screen-navigator > li {
+  cursor: pointer;
+  transition: all 0.2s ease-out;
+  border-radius: 20px;
+  padding: 12px 24px;
+  font-size: 20px;
+}
+
+.alert-screen-navigator > li:hover,
+.main-screen-navigator > li:hover {
+  background: rgba(5, 106, 246, 0.168);
+}
+
+.alert-screen-navigator > li.active,
+.main-screen-navigator > li.active {
+  background: rgba(5, 106, 246, 0.668);
+}
+
+.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/dialog-bg.png
+++ b/src/assets/dialog-bg.png
--- a/src/assets/dialog-button.png
+++ b/src/assets/dialog-button.png
--- a/src/assets/full-lines.png
+++ b/src/assets/full-lines.png
--- a/src/assets/glass.png
+++ b/src/assets/glass.png
--- a/src/assets/line.png
+++ b/src/assets/line.png
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/assets/logo@2x.png
+++ b/src/assets/logo@2x.png
--- a/src/assets/menu_icon/3d.svg
+++ b/src/assets/menu_icon/3d.svg
@@ -1,25 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="48px" height="52px" viewBox="0 0 48 52" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>三维</title>
-    <defs>
-        <filter x="-2.1%" y="-6.5%" width="104.2%" height="126.1%" filterUnits="objectBoundingBox" id="filter-1">
-            <feOffset dx="0" dy="5" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feColorMatrix values="0 0 0 0 0.000727194297   0 0 0 0 0.0682545659   0 0 0 0 0.141870471  0 0 0 1 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
-            <feMerge>
-                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
-                <feMergeNode in="SourceGraphic"></feMergeNode>
-            </feMerge>
-        </filter>
-    </defs>
-    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="郴州旗滨光伏光电玻璃" transform="translate(-442.096000, -369.480000)" fill="#339DFF" fill-rule="nonzero">
-            <g id="编组-10备份" filter="url(#filter-1)" transform="translate(297.632000, 369.480000)">
-                <g id="三维" transform="translate(145.464000, 0.000000)">
-                    <rect id="矩形" opacity="0" x="0" y="0" width="46" height="46"></rect>
-                    <path d="M35.7105456,15.5919309 L22.9695828,21.8792738 L10.22862,15.5919309 C9.52887162,15.2212721 9.57390493,14.3413905 10.2736533,14.0192291 L22.0377397,8.88543169 C22.6127804,8.60830362 23.2813518,8.60830362 23.8563926,8.88543169 L35.6170148,13.9707317 C36.413758,14.3413905 36.413758,15.2212721 35.7105456,15.5919309 Z M20.4026841,37.1871353 L9.62240234,31.3605178 C8.97115139,31.0383564 8.5970285,30.4806362 8.5970285,29.8363134 L8.5970285,18.1345809 C8.5970285,17.4417607 9.48383831,17.0226045 10.1385534,17.3932633 L22.1243422,23.4485115 L22.1243422,36.5150998 C22.1659114,37.1628866 21.2202119,37.6928941 20.4026841,37.1871353 L20.4026841,37.1871353 Z M25.5849789,37.1871353 L36.3687247,31.3605178 C36.9749424,31.0383564 37.3490653,30.4806362 37.3490653,29.8363134 L37.3490653,18.1345809 C37.3490653,17.4417607 36.4622554,17.0226045 35.8075404,17.3932633 L23.7247568,23.4415833 L23.7247568,36.5047075 C23.7247568,37.1975276 24.6981691,37.7691043 25.5815148,37.1871353 L25.5849789,37.1871353 L25.5849789,37.1871353 Z" id="形状"></path>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
--- a/src/assets/menu_icon/Icon3D.vue
+++ b/src/assets/menu_icon/Icon3D.vue
@@ -40,7 +40,7 @@ defineProps({
          result="shadowBlurOuter1"
        ></feGaussianBlur>
        <feColorMatrix
-          values="0 0 0 0 0.000727194297   0 0 0 0 0.0682545659   0 0 0 0 0.141870471  0 0 0 1 0"
+          values="0 0 0 0 0.0123   0 0 0 0 0.0123   0 0 0 0 0.0123  0 0 0 1 0"
          type="matrix"
          in="shadowBlurOuter1"
          result="shadowMatrixOuter1"
--- a/src/assets/menu_icon/IconBack.vue
+++ b/src/assets/menu_icon/IconBack.vue
@@ -26,7 +26,7 @@ defineProps({
      fill-rule="evenodd"
    >
      <g
-        id="郴州旗滨光伏光电玻璃"
+        id="back-btn__inner"
        transform="translate(-1728.160000, -46.400000)"
        fill-rule="nonzero"
      >
@@ -42,8 +42,8 @@ defineProps({
          ></rect>
          <path
            d="M40.6,25.8120454 C40.6,28.1705437 40.1561224,30.3912077 39.2683673,32.4740374 C38.3806122,34.5568671 37.1637755,36.4023154 35.6178571,38.0103825 C34.0719388,39.6184495 32.2505102,40.935533 30.1535714,41.9616329 C28.0566327,42.9877328 25.7989796,43.6079872 23.3806122,43.8223962 C23.227551,43.853026 23.0897959,43.8759984 22.9673469,43.8913133 C22.844898,43.9066283 22.7071429,43.9142857 22.5540816,43.9142857 L14.6102041,43.9142857 C14.0897959,43.9142857 13.5770408,43.8223962 13.0719388,43.6386171 C12.5668367,43.454838 12.1153061,43.2021417 11.7173469,42.8805283 C11.3193878,42.5589149 10.9903061,42.1836993 10.730102,41.7548814 C10.469898,41.3260635 10.3397959,40.8819307 10.3397959,40.422483 C10.3397959,39.9630353 10.4622449,39.5189025 10.7071429,39.0900846 C10.9520408,38.6612667 11.2734694,38.2937086 11.6714286,37.9874101 C12.0693878,37.6811116 12.5132653,37.4360728 13.0030612,37.2522937 C13.4928571,37.0685146 13.9979592,36.9766251 14.5183673,36.9766251 L21.6357143,37.0225699 C23.2581633,37.0225699 24.7887755,36.7239288 26.227551,36.1266468 C27.6663265,35.5293648 28.9214286,34.7253312 29.9928571,33.7145462 C31.0642857,32.7037613 31.9061224,31.5168546 32.5183673,30.1538264 C33.1306122,28.7907981 33.4367347,27.3282229 33.4367347,25.7661006 C33.4367347,24.2958679 33.1612245,22.9175247 32.6102041,21.6310711 C32.0591837,20.3446175 31.3015306,19.1959982 30.3372449,18.1852132 C29.3729592,17.1744282 28.2479592,16.3550797 26.9622449,15.7271679 C25.6765306,15.099256 24.2836735,14.7087254 22.7836735,14.5555762 C22.722449,14.5555762 22.6841837,14.5632336 22.6688776,14.5785485 C22.6535714,14.5938635 22.6153061,14.6015209 22.5540816,14.6015209 L15.2530612,14.6015209 L15.2530612,18.2311579 C15.2530612,18.7518654 15.0464286,19.1347385 14.6331633,19.3797773 C14.219898,19.624816 13.5540816,19.4716668 12.6357143,18.9203295 C12.3908163,18.7671803 12.0005102,18.4991691 11.4647959,18.116296 C10.9290816,17.7334229 10.3015306,17.2816327 9.58214286,16.7609252 C8.8627551,16.2402178 8.10510204,15.6888805 7.30918367,15.1069134 L5.01326531,13.3610121 C4.55408163,12.9934539 4.15612245,12.664183 3.81938776,12.3731995 C3.48265306,12.0822159 3.31428571,11.7223152 3.31428571,11.2934973 C3.31428571,10.9259391 3.50561224,10.543066 3.88826531,10.144878 C4.27091837,9.74668998 4.70714286,9.34850195 5.19693878,8.95031393 C5.74795918,8.4908662 6.40612245,7.95484386 7.17142857,7.34224689 C7.93673469,6.72964993 8.69438776,6.13236789 9.44438776,5.55040077 C10.1943878,4.96843365 10.8678571,4.44006877 11.4647959,3.96530612 C12.0617347,3.49054347 12.4826531,3.16127261 12.727551,2.97749352 C13.4622449,2.4567861 14.0591837,2.34958163 14.5183673,2.65588011 C14.977551,2.96217859 15.222449,3.42162632 15.2530612,4.03422328 L15.2530612,7.70980507 L22.5540816,7.70980507 C22.7071429,7.70980507 22.8678571,7.72512 23.0362245,7.75574984 C23.2045918,7.78637969 23.3653061,7.81700954 23.5183673,7.84763939 C25.9061224,8.09267818 28.1408163,8.72059006 30.222449,9.73137506 C32.3040816,10.74216 34.1178571,12.0515861 35.6637755,13.6596531 C37.2096939,15.2677201 38.4188776,17.1131685 39.2913265,19.1959982 C40.1637755,21.2788279 40.6,23.4841769 40.6,25.8120454 L40.6,25.8120454 Z"
-            id="back-main"
-            fill="#50A1EC"
+            id="back-btn"
+            :fill="color ?? '#50A1EC'"
          ></path>
        </g>
      </g>
--- a/src/assets/menu_icon/IconExchange.vue
+++ b/src/assets/menu_icon/IconExchange.vue
@@ -0,0 +1,51 @@
+<!-- Icon: chart Icon -->
+<script setup>
+defineProps({
+  color: {
+    type: String,
+    default: null,
+  },
+});
+</script>
+
+<template>
+  <svg
+    width="46.4px"
+    height="46.4px"
+    viewBox="0 0 46.4 46.4"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+  >
+    <title>切换按钮</title>
+    <g
+      id="页面-1"
+      stroke="none"
+      stroke-width="1"
+      fill="none"
+      fill-rule="evenodd"
+    >
+      <g
+        id="switch-btn"
+        transform="translate(-1852.960000, -46.400000)"
+        :fill="color ?? '#50A1EC'"
+        fill-rule="nonzero"
+      >
+        <g id="更换" transform="translate(1852.960000, 46.400000)">
+          <rect
+            id="矩形"
+            opacity="0"
+            x="0"
+            y="0"
+            width="46.4"
+            height="46.4"
+          ></rect>
+          <path
+            d="M40.9717781,18.7161691 L40.9717781,5.43717134 C40.9738761,4.87810519 40.7611607,4.33958668 40.3775642,3.9328765 C40.0050921,3.53784772 39.4863949,3.31362026 38.943456,3.31292634 L24.7497395,3.31292634 C24.2116286,3.31292634 23.696939,3.53517775 23.3155926,3.9328765 C22.9319868,4.33959642 22.7192707,4.87813062 22.7213786,5.43721018 L22.7213786,18.7161691 C22.7213786,19.888252 23.6291217,20.8427445 24.7497007,20.8427445 L38.943456,20.8427445 C39.4815282,20.8427445 39.9962177,20.6204931 40.3775642,20.2204639 C40.7611699,19.813744 40.9738861,19.2752098 40.9717781,18.7161302 L40.9717781,18.7161691 Z M20.6485756,25.5544979 L6.4548591,25.5544979 C5.33894103,25.5544979 4.42888325,26.5090292 4.42888325,27.6810734 L4.42888325,40.9577794 C4.42888325,42.1321929 5.33894103,43.0843549 6.45718959,43.0843549 L20.6485756,43.0843549 C21.7715628,43.0843549 22.6769208,42.1321929 22.6769208,40.9601099 L22.6769208,27.6811122 C22.6769208,26.5090292 21.7691935,25.5544979 20.6509449,25.5544979 L20.6485756,25.5544979 Z M8.8481596,21.7013761 L14.3857622,14.916804 L10.6472619,14.916804 C10.672975,11.0964257 13.9482897,7.04672681 17.4598387,7.04672681 L19.0319898,7.02804402 L19.0319898,3.34333928 L17.5253256,3.34333928 C11.6906628,3.34333928 6.96259599,8.50192592 6.96259599,14.865339 L6.96259599,14.916804 L3.31292634,14.916804 L8.8481596,21.7013761 Z M43.0843549,31.5085208 L37.544383,24.7286486 L32.0115191,31.5085208 L35.8061843,31.5085208 C35.7781018,35.3312685 32.3834659,39.2288638 28.8719168,39.2288638 L27.3652526,39.2288638 L27.3652526,43.0843549 L28.8719168,43.0843549 C34.7066185,43.0843549 39.4347241,37.9257683 39.4347241,31.5623164 L39.4347241,31.5085208 L43.0843549,31.5085208 L43.0843549,31.5085208 Z"
+            id="形状"
+          ></path>
+        </g>
+      </g>
+    </g>
+  </svg>
+</template>
--- a/src/assets/menu_icon/IconSetting.vue
+++ b/src/assets/menu_icon/IconSetting.vue
@@ -0,0 +1,54 @@
+<!-- Icon: chart Icon -->
+<script setup>
+defineProps({
+  color: {
+    type: String,
+    default: null,
+  },
+});
+</script>
+
+<template>
+  <svg
+    width="46.4px"
+    height="46.4px"
+    viewBox="0 0 46.4 46.4"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+  >
+    <title>设置按钮</title>
+    <g
+      id="页面-1"
+      stroke="none"
+      stroke-width="1"
+      fill="none"
+      fill-rule="evenodd"
+    >
+      <g
+        id="setting-btn"
+        transform="translate(-1790.560000, -46.400000)"
+        :fill="color ?? '#50A1EC'"
+        fill-rule="nonzero"
+      >
+        <g
+          id="设置按钮"
+          transform="translate(1790.560000, 46.400000)"
+        >
+          <rect
+            id="矩形"
+            opacity="0"
+            x="0"
+            y="0"
+            width="46.4"
+            height="46.4"
+          ></rect>
+          <path
+            d="M43.890706,19.2851449 C43.8812948,19.2004447 43.8718837,19.1298613 43.857767,19.0875112 L43.857767,19.0498667 L43.8389447,18.9463443 C43.5048497,17.3182191 42.4272755,16.2688783 41.0861897,16.2688783 L40.8650282,16.2688783 C38.578124,16.2688783 36.7241317,14.4054748 36.7241317,12.1279818 C36.7241317,11.6009586 36.968821,10.8527739 37.0723434,10.5892623 C37.7217113,9.0740706 37.0299934,7.34712854 35.425396,6.46718804 L30.3763256,3.61091057 L30.2822143,3.57797162 C29.9057692,3.45562695 29.4681517,3.30975446 28.978773,3.30975446 C28.0658936,3.30975446 27.0400806,3.73325524 26.4048294,4.36850641 C25.6095891,5.15433563 23.9955805,6.32602111 23.0356454,6.32602111 C22.0804159,6.32602111 20.4617018,5.15904119 19.6664615,4.36850641 C18.9888602,3.70031629 18.052453,3.30975446 17.0925179,3.30975446 C16.5890225,3.30975446 16.1655217,3.45092139 15.7890766,3.57797162 L15.7043764,3.61091057 L10.4106167,6.47659917 L10.3776778,6.49542142 C9.09305874,7.3000729 8.57074111,9.14465407 9.22481453,10.6080845 L9.23422566,10.6269068 L9.24363679,10.645729 C9.3471592,10.8763017 9.66713757,11.6574253 9.66713757,12.3397322 C9.66713757,14.6266364 7.80373415,16.4806286 5.52624108,16.4806286 L5.30507956,16.4806286 C3.90282143,16.4806286 2.85348061,17.5158528 2.55232451,19.1769169 L2.53350225,19.2710282 L2.53350225,19.3039672 C2.53350225,19.3510228 2.51467999,19.4169007 2.5005633,19.5016009 C2.3829242,20.2121411 2.10059034,21.8873219 2.10059034,23.2566411 C2.10059034,24.6259603 2.37821863,26.3011411 2.5005633,27.0116813 C2.50997443,27.0963815 2.51938556,27.1669649 2.53350225,27.209315 L2.53350225,27.2469595 L2.55232451,27.3504819 C2.88641956,28.9786071 3.96399376,30.027948 5.30507956,30.027948 L5.4180131,30.027948 C7.7049173,30.027948 9.55890959,31.8913514 9.55890959,34.1688445 C9.55890959,34.6958676 9.31422025,35.4440523 9.21069784,35.7075639 C8.5848578,37.1333499 9.17775889,38.9638144 10.5611948,39.8861049 L10.5988393,39.9049272 L15.5867373,42.6812101 L15.6808486,42.714149 C16.0572937,42.8364937 16.4855001,42.9823662 16.9748788,42.9823662 C18.019514,42.9823662 18.9606269,42.5823932 19.5488224,41.9236142 C19.6052891,41.8812642 19.6617559,41.8247974 19.7276338,41.7683306 C20.329946,41.2413074 21.9486601,39.8484604 23.0168232,39.8484604 C23.8120635,39.8484604 25.1437382,40.6813453 26.484824,42.0224311 C27.1624252,42.6906212 28.0988325,43.081183 29.0587676,43.081183 C29.7081355,43.081183 30.188103,42.9023716 30.7339485,42.6341544 L30.7527707,42.6247433 L35.867719,39.7966992 L35.8865413,39.777877 C37.1711603,38.9732255 37.6934779,37.1286443 37.0394045,35.6652139 L37.0299934,35.6463916 L37.0205822,35.6275694 C37.0111711,35.6228638 36.6111981,34.7899789 36.6864872,34.0417942 L36.6958983,33.9947386 L36.6958983,33.9476829 C36.6958983,31.6607787 38.5593017,29.8067864 40.8367948,29.8067864 L41.072073,29.8067864 C42.4743311,29.8067864 43.5236719,28.7715623 43.8248281,27.1104982 L43.8436503,27.0163869 L43.8436503,26.9834479 C43.8530614,26.9458034 43.8624726,26.8893366 43.8765893,26.8140476 C43.9989339,26.1223297 44.2815012,24.5083212 44.2815012,23.030774 C44.2906789,21.6661604 44.0130506,19.9956851 43.890706,19.2851449 L43.890706,19.2851449 Z M23.1862235,29.7503197 C19.5676446,29.7503197 16.6360781,26.8187532 16.6360781,23.2001743 C16.6360781,19.5815954 19.5676446,16.650029 23.1862235,16.650029 C26.8048024,16.650029 29.7363689,19.5815954 29.7363689,23.2001743 C29.7363689,26.8187532 26.8048024,29.7503197 23.1862235,29.7503197 L23.1862235,29.7503197 Z"
+            id="形状"
+          ></path>
+        </g>
+      </g>
+    </g>
+  </svg>
+</template>
--- a/src/assets/menu_icon/alert.svg
+++ b/src/assets/menu_icon/alert.svg
@@ -1,26 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="48px" height="52px" viewBox="0 0 48 52" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>作业报警</title>
-    <defs>
-        <filter x="-2.1%" y="-6.5%" width="104.2%" height="126.1%" filterUnits="objectBoundingBox" id="filter-1">
-            <feOffset dx="0" dy="5" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feColorMatrix values="0 0 0 0 0.000727194297   0 0 0 0 0.0682545659   0 0 0 0 0.141870471  0 0 0 1 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
-            <feMerge>
-                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
-                <feMergeNode in="SourceGraphic"></feMergeNode>
-            </feMerge>
-        </filter>
-    </defs>
-    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="郴州旗滨光伏光电玻璃" transform="translate(-190.632000, -449.520000)">
-            <g id="编组-13" filter="url(#filter-1)" transform="translate(46.168000, 449.520000)">
-                <g id="作业报警" transform="translate(145.464000, 0.000000)">
-                    <rect id="矩形" fill="#339DFF" fill-rule="nonzero" opacity="0" x="0" y="0" width="46" height="46"></rect>
-                    <path d="M35.7411775,33.9474082 L37.1695529,38.295 L8.88938457,38.295 L10.3135957,33.9474082 L35.7411775,33.9474082 Z M17.4873997,34.7525178 L11.0062675,34.7525178 L10.1039896,37.4898904 L14.7528034,37.4898904 C15.6632941,36.5763931 16.5748268,35.663935 17.4873997,34.7525178 Z M23.1078975,7.705 C29.3322274,7.705 34.3780436,12.7508163 34.3780436,18.9751461 L34.3780436,32.8202548 L11.6767295,32.8202548 L11.6767295,18.9751461 C11.6767295,12.7508163 16.7225458,7.705 22.9468756,7.705 Z M22.9877921,26.3291412 C22.4589845,26.3291412 22.009498,26.4877834 21.6393327,26.8579488 C21.242727,27.2016737 21.0576443,27.6511602 21.0576443,28.2064082 C21.0576443,28.7352158 21.242727,29.1847023 21.6393327,29.5548676 C22.009498,29.9250329 22.4589845,30.1101156 22.9877921,30.1101156 C23.5165997,30.1101156 23.9925266,29.9250329 24.3891323,29.581308 C24.7592976,29.2111426 24.9443803,28.7616562 24.9443803,28.2064082 C24.9443803,27.6511602 24.7592976,27.2016737 24.3891323,26.8579488 C24.0189669,26.4877834 23.5430401,26.3291412 22.9877921,26.3291412 Z M23.0010123,11.6630298 C21.9837753,11.6630298 21.1591419,12.4876633 21.1591419,13.5049002 C21.1591419,13.5378197 21.1600244,13.5707331 21.1617885,13.6036053 L21.7069846,23.7625379 C21.7438925,24.4502633 22.3122973,24.9889816 23.0010123,24.9889816 C23.6897273,24.9889816 24.2581321,24.4502633 24.29504,23.7625379 L24.840236,13.6036053 C24.8947493,12.58783 24.1154925,11.7201898 23.0997173,11.6656765 C23.0668452,11.6639124 23.0339317,11.6630298 23.0010123,11.6630298 Z" id="形状结合" fill="#339DFF" fill-rule="nonzero"></path>
-                    <g id="！" transform="translate(21.291840, 18.019580)"></g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
--- a/src/assets/menu_icon/back.svg
+++ b/src/assets/menu_icon/back.svg
@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="46.4px" height="46.4px" viewBox="0 0 46.4 46.4" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>撤销</title>
-    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="郴州旗滨光伏光电玻璃" transform="translate(-1728.160000, -46.400000)" fill-rule="nonzero">
-            <g id="撤销" transform="translate(1728.160000, 46.400000)">
-                <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="46.4" height="46.4"></rect>
-                <path d="M40.6,25.8120454 C40.6,28.1705437 40.1561224,30.3912077 39.2683673,32.4740374 C38.3806122,34.5568671 37.1637755,36.4023154 35.6178571,38.0103825 C34.0719388,39.6184495 32.2505102,40.935533 30.1535714,41.9616329 C28.0566327,42.9877328 25.7989796,43.6079872 23.3806122,43.8223962 C23.227551,43.853026 23.0897959,43.8759984 22.9673469,43.8913133 C22.844898,43.9066283 22.7071429,43.9142857 22.5540816,43.9142857 L14.6102041,43.9142857 C14.0897959,43.9142857 13.5770408,43.8223962 13.0719388,43.6386171 C12.5668367,43.454838 12.1153061,43.2021417 11.7173469,42.8805283 C11.3193878,42.5589149 10.9903061,42.1836993 10.730102,41.7548814 C10.469898,41.3260635 10.3397959,40.8819307 10.3397959,40.422483 C10.3397959,39.9630353 10.4622449,39.5189025 10.7071429,39.0900846 C10.9520408,38.6612667 11.2734694,38.2937086 11.6714286,37.9874101 C12.0693878,37.6811116 12.5132653,37.4360728 13.0030612,37.2522937 C13.4928571,37.0685146 13.9979592,36.9766251 14.5183673,36.9766251 L21.6357143,37.0225699 C23.2581633,37.0225699 24.7887755,36.7239288 26.227551,36.1266468 C27.6663265,35.5293648 28.9214286,34.7253312 29.9928571,33.7145462 C31.0642857,32.7037613 31.9061224,31.5168546 32.5183673,30.1538264 C33.1306122,28.7907981 33.4367347,27.3282229 33.4367347,25.7661006 C33.4367347,24.2958679 33.1612245,22.9175247 32.6102041,21.6310711 C32.0591837,20.3446175 31.3015306,19.1959982 30.3372449,18.1852132 C29.3729592,17.1744282 28.2479592,16.3550797 26.9622449,15.7271679 C25.6765306,15.099256 24.2836735,14.7087254 22.7836735,14.5555762 C22.722449,14.5555762 22.6841837,14.5632336 22.6688776,14.5785485 C22.6535714,14.5938635 22.6153061,14.6015209 22.5540816,14.6015209 L15.2530612,14.6015209 L15.2530612,18.2311579 C15.2530612,18.7518654 15.0464286,19.1347385 14.6331633,19.3797773 C14.219898,19.624816 13.5540816,19.4716668 12.6357143,18.9203295 C12.3908163,18.7671803 12.0005102,18.4991691 11.4647959,18.116296 C10.9290816,17.7334229 10.3015306,17.2816327 9.58214286,16.7609252 C8.8627551,16.2402178 8.10510204,15.6888805 7.30918367,15.1069134 L5.01326531,13.3610121 C4.55408163,12.9934539 4.15612245,12.664183 3.81938776,12.3731995 C3.48265306,12.0822159 3.31428571,11.7223152 3.31428571,11.2934973 C3.31428571,10.9259391 3.50561224,10.543066 3.88826531,10.144878 C4.27091837,9.74668998 4.70714286,9.34850195 5.19693878,8.95031393 C5.74795918,8.4908662 6.40612245,7.95484386 7.17142857,7.34224689 C7.93673469,6.72964993 8.69438776,6.13236789 9.44438776,5.55040077 C10.1943878,4.96843365 10.8678571,4.44006877 11.4647959,3.96530612 C12.0617347,3.49054347 12.4826531,3.16127261 12.727551,2.97749352 C13.4622449,2.4567861 14.0591837,2.34958163 14.5183673,2.65588011 C14.977551,2.96217859 15.222449,3.42162632 15.2530612,4.03422328 L15.2530612,7.70980507 L22.5540816,7.70980507 C22.7071429,7.70980507 22.8678571,7.72512 23.0362245,7.75574984 C23.2045918,7.78637969 23.3653061,7.81700954 23.5183673,7.84763939 C25.9061224,8.09267818 28.1408163,8.72059006 30.222449,9.73137506 C32.3040816,10.74216 34.1178571,12.0515861 35.6637755,13.6596531 C37.2096939,15.2677201 38.4188776,17.1131685 39.2913265,19.1959982 C40.1637755,21.2788279 40.6,23.4841769 40.6,25.8120454 L40.6,25.8120454 Z" id="路径" fill="#50A1EC"></path>
-            </g>
-        </g>
-    </g>
-</svg>
--- a/src/assets/menu_icon/chart.svg
+++ b/src/assets/menu_icon/chart.svg
@@ -1,25 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="48px" height="52px" viewBox="0 0 48 52" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>数据</title>
-    <defs>
-        <filter x="-2.1%" y="-6.5%" width="104.2%" height="126.1%" filterUnits="objectBoundingBox" id="filter-1">
-            <feOffset dx="0" dy="5" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feColorMatrix values="0 0 0 0 0.000727194297   0 0 0 0 0.0682545659   0 0 0 0 0.141870471  0 0 0 1 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
-            <feMerge>
-                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
-                <feMergeNode in="SourceGraphic"></feMergeNode>
-            </feMerge>
-        </filter>
-    </defs>
-    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="郴州旗滨光伏光电玻璃" transform="translate(-190.632000, -369.480000)" fill="#B1DAFF" fill-rule="nonzero">
-            <g id="编组-10" filter="url(#filter-1)" transform="translate(46.168000, 369.480000)">
-                <g id="数据" transform="translate(145.464000, 0.000000)">
-                    <rect id="矩形" opacity="0" x="0" y="0" width="46" height="46"></rect>
-                    <path d="M6.57144141,27.3809609 L12.0475977,27.3809609 L12.0475977,38.3333633 L6.57144141,38.3333633 L6.57144141,27.3809609 Z M15.3333184,18.6190391 L20.8095195,18.6190391 L20.8095195,38.3333184 L15.3333184,38.3333184 L15.3333184,18.6190391 Z M24.0951953,20.8095195 L29.5714414,20.8095195 L29.5714414,38.3333184 L24.0951953,38.3333184 L24.0951953,20.8095195 Z M32.8571621,7.66668164 L38.3333184,7.66668164 L38.3333184,38.3333184 L32.8571621,38.3333184 L32.8571621,7.66668164 Z" id="形状"></path>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
--- a/src/assets/menu_icon/clock.svg
+++ b/src/assets/menu_icon/clock.svg
@@ -1,25 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="48px" height="52px" viewBox="0 0 48 52" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>实时</title>
-    <defs>
-        <filter x="-2.1%" y="-6.5%" width="104.2%" height="126.1%" filterUnits="objectBoundingBox" id="filter-1">
-            <feOffset dx="0" dy="5" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feColorMatrix values="0 0 0 0 0.000727194297   0 0 0 0 0.0682545659   0 0 0 0 0.141870471  0 0 0 1 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
-            <feMerge>
-                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
-                <feMergeNode in="SourceGraphic"></feMergeNode>
-            </feMerge>
-        </filter>
-    </defs>
-    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="郴州旗滨光伏光电玻璃" transform="translate(-190.632000, -529.560000)" fill="#339DFF" fill-rule="nonzero">
-            <g id="编组-14" filter="url(#filter-1)" transform="translate(46.168000, 529.560000)">
-                <g id="实时" transform="translate(145.464000, 0.000000)">
-                    <rect id="矩形" opacity="0" x="0" y="0" width="46" height="46"></rect>
-                    <path d="M22.9685547,9.19550781 C24.8300681,9.19550781 26.6341937,9.55776764 28.3307175,10.2787006 C29.9698535,10.9709396 31.4439999,11.9644641 32.710116,13.2305801 C33.976232,14.4966962 34.9697565,15.9708426 35.6619955,17.6099786 C36.3793417,19.3065024 36.7451883,21.1106281 36.7451883,22.9721414 C36.7451883,24.8336548 36.3829285,26.6377805 35.6619955,28.3343042 C34.9697565,29.9734402 33.976232,31.4475867 32.710116,32.7137027 C31.4439999,33.9798187 29.9698535,34.9733432 28.3307175,35.6655823 C26.6341937,36.3829285 24.8300681,36.748775 22.9685547,36.748775 C21.1070413,36.748775 19.3029156,36.3865152 17.6063919,35.6655823 C15.9672559,34.9733432 14.4931094,33.9798187 13.2269934,32.7137027 C11.9608774,31.4475867 10.9673529,29.9734402 10.2751138,28.3343042 C9.55776764,26.6377805 9.19192108,24.8336548 9.19192108,22.9721414 C9.19192108,21.1106281 9.55418091,19.3065024 10.2751138,17.6099786 C10.9673529,15.9708426 11.9608774,14.4966962 13.2269934,13.2305801 C14.4931094,11.9644641 15.9672559,10.9709396 17.6063919,10.2787006 C19.3065024,9.56135437 21.1106281,9.19550781 22.9685547,9.19550781 M22.9685547,6.9 C14.0949823,6.9 6.9,14.0949823 6.9,22.9685547 C6.9,31.8421271 14.0949823,39.0371094 22.9685547,39.0371094 C31.8421271,39.0371094 39.0371094,31.8421271 39.0371094,22.9685547 C39.0371094,14.0949823 31.8457138,6.9 22.9685547,6.9 L22.9685547,6.9 Z M22.9577945,11.1287558 C16.419184,11.1287558 11.1215823,16.4263574 11.1215823,22.964968 C11.1215823,29.5035785 16.419184,34.8011801 22.9577945,34.8011801 C29.496405,34.8011801 34.7940067,29.5035785 34.7940067,22.964968 C34.7940067,16.4263574 29.496405,11.1287558 22.9577945,11.1287558 Z M30.0953891,22.0682852 C30.0953891,22.7210703 29.5645529,23.2519064 28.9117679,23.2519064 L21.8351477,23.2519064 C21.1823627,23.2519064 20.6515265,22.7210703 20.6515265,22.0682852 L20.6515265,14.9952518 C20.6515265,14.3424667 21.1823627,13.8116306 21.8351477,13.8116306 C22.4879327,13.8116306 23.0187689,14.3424667 23.0187689,14.9952518 L23.0187689,20.884664 L28.9117679,20.884664 C29.5645529,20.884664 30.0953891,21.4155002 30.0953891,22.0682852 Z" id="形状"></path>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
--- a/src/assets/menu_icon/cube.svg
+++ b/src/assets/menu_icon/cube.svg
@@ -1,25 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="48px" height="52px" viewBox="0 0 48 52" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>三维</title>
-    <defs>
-        <filter x="-2.1%" y="-6.5%" width="104.2%" height="126.1%" filterUnits="objectBoundingBox" id="filter-1">
-            <feOffset dx="0" dy="5" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feColorMatrix values="0 0 0 0 0.000727194297   0 0 0 0 0.0682545659   0 0 0 0 0.141870471  0 0 0 1 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
-            <feMerge>
-                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
-                <feMergeNode in="SourceGraphic"></feMergeNode>
-            </feMerge>
-        </filter>
-    </defs>
-    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="郴州旗滨光伏光电玻璃" transform="translate(-324.017417, -200.480000)" fill="#339DFF" fill-rule="nonzero">
-            <g id="编组-10备份" filter="url(#filter-1)" transform="translate(179.553417, 200.480000)">
-                <g id="三维" transform="translate(145.464000, 0.000000)">
-                    <rect id="矩形" opacity="0" x="0" y="0" width="46" height="46"></rect>
-                    <path d="M35.7105456,15.5919309 L22.9695828,21.8792738 L10.22862,15.5919309 C9.52887162,15.2212721 9.57390493,14.3413905 10.2736533,14.0192291 L22.0377397,8.88543169 C22.6127804,8.60830362 23.2813518,8.60830362 23.8563926,8.88543169 L35.6170148,13.9707317 C36.413758,14.3413905 36.413758,15.2212721 35.7105456,15.5919309 Z M20.4026841,37.1871353 L9.62240234,31.3605178 C8.97115139,31.0383564 8.5970285,30.4806362 8.5970285,29.8363134 L8.5970285,18.1345809 C8.5970285,17.4417607 9.48383831,17.0226045 10.1385534,17.3932633 L22.1243422,23.4485115 L22.1243422,36.5150998 C22.1659114,37.1628866 21.2202119,37.6928941 20.4026841,37.1871353 L20.4026841,37.1871353 Z M25.5849789,37.1871353 L36.3687247,31.3605178 C36.9749424,31.0383564 37.3490653,30.4806362 37.3490653,29.8363134 L37.3490653,18.1345809 C37.3490653,17.4417607 36.4622554,17.0226045 35.8075404,17.3932633 L23.7247568,23.4415833 L23.7247568,36.5047075 C23.7247568,37.1975276 24.6981691,37.7691043 25.5815148,37.1871353 L25.5849789,37.1871353 L25.5849789,37.1871353 Z" id="形状"></path>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
--- a/src/assets/menu_icon/exchange.svg
+++ b/src/assets/menu_icon/exchange.svg
@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="46.4px" height="46.4px" viewBox="0 0 46.4 46.4" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>更换</title>
-    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="郴州旗滨光伏光电玻璃" transform="translate(-1852.960000, -46.400000)" fill="#50A1EC" fill-rule="nonzero">
-            <g id="更换" transform="translate(1852.960000, 46.400000)">
-                <rect id="矩形" opacity="0" x="0" y="0" width="46.4" height="46.4"></rect>
-                <path d="M40.9717781,18.7161691 L40.9717781,5.43717134 C40.9738761,4.87810519 40.7611607,4.33958668 40.3775642,3.9328765 C40.0050921,3.53784772 39.4863949,3.31362026 38.943456,3.31292634 L24.7497395,3.31292634 C24.2116286,3.31292634 23.696939,3.53517775 23.3155926,3.9328765 C22.9319868,4.33959642 22.7192707,4.87813062 22.7213786,5.43721018 L22.7213786,18.7161691 C22.7213786,19.888252 23.6291217,20.8427445 24.7497007,20.8427445 L38.943456,20.8427445 C39.4815282,20.8427445 39.9962177,20.6204931 40.3775642,20.2204639 C40.7611699,19.813744 40.9738861,19.2752098 40.9717781,18.7161302 L40.9717781,18.7161691 Z M20.6485756,25.5544979 L6.4548591,25.5544979 C5.33894103,25.5544979 4.42888325,26.5090292 4.42888325,27.6810734 L4.42888325,40.9577794 C4.42888325,42.1321929 5.33894103,43.0843549 6.45718959,43.0843549 L20.6485756,43.0843549 C21.7715628,43.0843549 22.6769208,42.1321929 22.6769208,40.9601099 L22.6769208,27.6811122 C22.6769208,26.5090292 21.7691935,25.5544979 20.6509449,25.5544979 L20.6485756,25.5544979 Z M8.8481596,21.7013761 L14.3857622,14.916804 L10.6472619,14.916804 C10.672975,11.0964257 13.9482897,7.04672681 17.4598387,7.04672681 L19.0319898,7.02804402 L19.0319898,3.34333928 L17.5253256,3.34333928 C11.6906628,3.34333928 6.96259599,8.50192592 6.96259599,14.865339 L6.96259599,14.916804 L3.31292634,14.916804 L8.8481596,21.7013761 Z M43.0843549,31.5085208 L37.544383,24.7286486 L32.0115191,31.5085208 L35.8061843,31.5085208 C35.7781018,35.3312685 32.3834659,39.2288638 28.8719168,39.2288638 L27.3652526,39.2288638 L27.3652526,43.0843549 L28.8719168,43.0843549 C34.7066185,43.0843549 39.4347241,37.9257683 39.4347241,31.5623164 L39.4347241,31.5085208 L43.0843549,31.5085208 L43.0843549,31.5085208 Z" id="形状"></path>
-            </g>
-        </g>
-    </g>
-</svg>
--- a/src/assets/menu_icon/realtime.svg
+++ b/src/assets/menu_icon/realtime.svg
@@ -1,25 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="48px" height="52px" viewBox="0 0 48 52" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>实时</title>
-    <defs>
-        <filter x="-2.1%" y="-6.5%" width="104.2%" height="126.1%" filterUnits="objectBoundingBox" id="filter-1">
-            <feOffset dx="0" dy="5" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feColorMatrix values="0 0 0 0 0.000727194297   0 0 0 0 0.0682545659   0 0 0 0 0.141870471  0 0 0 1 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
-            <feMerge>
-                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
-                <feMergeNode in="SourceGraphic"></feMergeNode>
-            </feMerge>
-        </filter>
-    </defs>
-    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="郴州旗滨光伏光电玻璃" transform="translate(-190.632000, -529.560000)" fill="#339DFF" fill-rule="nonzero">
-            <g id="编组-14" filter="url(#filter-1)" transform="translate(46.168000, 529.560000)">
-                <g id="实时" transform="translate(145.464000, 0.000000)">
-                    <rect id="矩形" opacity="0" x="0" y="0" width="46" height="46"></rect>
-                    <path d="M22.9685547,9.19550781 C24.8300681,9.19550781 26.6341937,9.55776764 28.3307175,10.2787006 C29.9698535,10.9709396 31.4439999,11.9644641 32.710116,13.2305801 C33.976232,14.4966962 34.9697565,15.9708426 35.6619955,17.6099786 C36.3793417,19.3065024 36.7451883,21.1106281 36.7451883,22.9721414 C36.7451883,24.8336548 36.3829285,26.6377805 35.6619955,28.3343042 C34.9697565,29.9734402 33.976232,31.4475867 32.710116,32.7137027 C31.4439999,33.9798187 29.9698535,34.9733432 28.3307175,35.6655823 C26.6341937,36.3829285 24.8300681,36.748775 22.9685547,36.748775 C21.1070413,36.748775 19.3029156,36.3865152 17.6063919,35.6655823 C15.9672559,34.9733432 14.4931094,33.9798187 13.2269934,32.7137027 C11.9608774,31.4475867 10.9673529,29.9734402 10.2751138,28.3343042 C9.55776764,26.6377805 9.19192108,24.8336548 9.19192108,22.9721414 C9.19192108,21.1106281 9.55418091,19.3065024 10.2751138,17.6099786 C10.9673529,15.9708426 11.9608774,14.4966962 13.2269934,13.2305801 C14.4931094,11.9644641 15.9672559,10.9709396 17.6063919,10.2787006 C19.3065024,9.56135437 21.1106281,9.19550781 22.9685547,9.19550781 M22.9685547,6.9 C14.0949823,6.9 6.9,14.0949823 6.9,22.9685547 C6.9,31.8421271 14.0949823,39.0371094 22.9685547,39.0371094 C31.8421271,39.0371094 39.0371094,31.8421271 39.0371094,22.9685547 C39.0371094,14.0949823 31.8457138,6.9 22.9685547,6.9 L22.9685547,6.9 Z M22.9577945,11.1287558 C16.419184,11.1287558 11.1215823,16.4263574 11.1215823,22.964968 C11.1215823,29.5035785 16.419184,34.8011801 22.9577945,34.8011801 C29.496405,34.8011801 34.7940067,29.5035785 34.7940067,22.964968 C34.7940067,16.4263574 29.496405,11.1287558 22.9577945,11.1287558 Z M30.0953891,22.0682852 C30.0953891,22.7210703 29.5645529,23.2519064 28.9117679,23.2519064 L21.8351477,23.2519064 C21.1823627,23.2519064 20.6515265,22.7210703 20.6515265,22.0682852 L20.6515265,14.9952518 C20.6515265,14.3424667 21.1823627,13.8116306 21.8351477,13.8116306 C22.4879327,13.8116306 23.0187689,14.3424667 23.0187689,14.9952518 L23.0187689,20.884664 L28.9117679,20.884664 C29.5645529,20.884664 30.0953891,21.4155002 30.0953891,22.0682852 Z" id="形状"></path>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
--- a/src/assets/menu_icon/setting.svg
+++ b/src/assets/menu_icon/setting.svg
@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="46.4px" height="46.4px" viewBox="0 0 46.4 46.4" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>138设置、系统设置、功能设置、属性</title>
-    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="郴州旗滨光伏光电玻璃" transform="translate(-1790.560000, -46.400000)" fill="#50A1EC" fill-rule="nonzero">
-            <g id="138设置、系统设置、功能设置、属性" transform="translate(1790.560000, 46.400000)">
-                <rect id="矩形" opacity="0" x="0" y="0" width="46.4" height="46.4"></rect>
-                <path d="M43.890706,19.2851449 C43.8812948,19.2004447 43.8718837,19.1298613 43.857767,19.0875112 L43.857767,19.0498667 L43.8389447,18.9463443 C43.5048497,17.3182191 42.4272755,16.2688783 41.0861897,16.2688783 L40.8650282,16.2688783 C38.578124,16.2688783 36.7241317,14.4054748 36.7241317,12.1279818 C36.7241317,11.6009586 36.968821,10.8527739 37.0723434,10.5892623 C37.7217113,9.0740706 37.0299934,7.34712854 35.425396,6.46718804 L30.3763256,3.61091057 L30.2822143,3.57797162 C29.9057692,3.45562695 29.4681517,3.30975446 28.978773,3.30975446 C28.0658936,3.30975446 27.0400806,3.73325524 26.4048294,4.36850641 C25.6095891,5.15433563 23.9955805,6.32602111 23.0356454,6.32602111 C22.0804159,6.32602111 20.4617018,5.15904119 19.6664615,4.36850641 C18.9888602,3.70031629 18.052453,3.30975446 17.0925179,3.30975446 C16.5890225,3.30975446 16.1655217,3.45092139 15.7890766,3.57797162 L15.7043764,3.61091057 L10.4106167,6.47659917 L10.3776778,6.49542142 C9.09305874,7.3000729 8.57074111,9.14465407 9.22481453,10.6080845 L9.23422566,10.6269068 L9.24363679,10.645729 C9.3471592,10.8763017 9.66713757,11.6574253 9.66713757,12.3397322 C9.66713757,14.6266364 7.80373415,16.4806286 5.52624108,16.4806286 L5.30507956,16.4806286 C3.90282143,16.4806286 2.85348061,17.5158528 2.55232451,19.1769169 L2.53350225,19.2710282 L2.53350225,19.3039672 C2.53350225,19.3510228 2.51467999,19.4169007 2.5005633,19.5016009 C2.3829242,20.2121411 2.10059034,21.8873219 2.10059034,23.2566411 C2.10059034,24.6259603 2.37821863,26.3011411 2.5005633,27.0116813 C2.50997443,27.0963815 2.51938556,27.1669649 2.53350225,27.209315 L2.53350225,27.2469595 L2.55232451,27.3504819 C2.88641956,28.9786071 3.96399376,30.027948 5.30507956,30.027948 L5.4180131,30.027948 C7.7049173,30.027948 9.55890959,31.8913514 9.55890959,34.1688445 C9.55890959,34.6958676 9.31422025,35.4440523 9.21069784,35.7075639 C8.5848578,37.1333499 9.17775889,38.9638144 10.5611948,39.8861049 L10.5988393,39.9049272 L15.5867373,42.6812101 L15.6808486,42.714149 C16.0572937,42.8364937 16.4855001,42.9823662 16.9748788,42.9823662 C18.019514,42.9823662 18.9606269,42.5823932 19.5488224,41.9236142 C19.6052891,41.8812642 19.6617559,41.8247974 19.7276338,41.7683306 C20.329946,41.2413074 21.9486601,39.8484604 23.0168232,39.8484604 C23.8120635,39.8484604 25.1437382,40.6813453 26.484824,42.0224311 C27.1624252,42.6906212 28.0988325,43.081183 29.0587676,43.081183 C29.7081355,43.081183 30.188103,42.9023716 30.7339485,42.6341544 L30.7527707,42.6247433 L35.867719,39.7966992 L35.8865413,39.777877 C37.1711603,38.9732255 37.6934779,37.1286443 37.0394045,35.6652139 L37.0299934,35.6463916 L37.0205822,35.6275694 C37.0111711,35.6228638 36.6111981,34.7899789 36.6864872,34.0417942 L36.6958983,33.9947386 L36.6958983,33.9476829 C36.6958983,31.6607787 38.5593017,29.8067864 40.8367948,29.8067864 L41.072073,29.8067864 C42.4743311,29.8067864 43.5236719,28.7715623 43.8248281,27.1104982 L43.8436503,27.0163869 L43.8436503,26.9834479 C43.8530614,26.9458034 43.8624726,26.8893366 43.8765893,26.8140476 C43.9989339,26.1223297 44.2815012,24.5083212 44.2815012,23.030774 C44.2906789,21.6661604 44.0130506,19.9956851 43.890706,19.2851449 L43.890706,19.2851449 Z M23.1862235,29.7503197 C19.5676446,29.7503197 16.6360781,26.8187532 16.6360781,23.2001743 C16.6360781,19.5815954 19.5676446,16.650029 23.1862235,16.650029 C26.8048024,16.650029 29.7363689,19.5815954 29.7363689,23.2001743 C29.7363689,26.8187532 26.8048024,29.7503197 23.1862235,29.7503197 L23.1862235,29.7503197 Z" id="形状"></path>
-            </g>
-        </g>
-    </g>
-</svg>
--- a/src/assets/menu_icon/volumn.svg
+++ b/src/assets/menu_icon/volumn.svg
@@ -1,25 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="48px" height="52px" viewBox="0 0 48 52" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>公告</title>
-    <defs>
-        <filter x="-2.0%" y="-6.5%" width="104.1%" height="126.1%" filterUnits="objectBoundingBox" id="filter-1">
-            <feOffset dx="0" dy="5" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
-            <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
-            <feColorMatrix values="0 0 0 0 0.000727194297   0 0 0 0 0.0682545659   0 0 0 0 0.141870471  0 0 0 1 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
-            <feMerge>
-                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
-                <feMergeNode in="SourceGraphic"></feMergeNode>
-            </feMerge>
-        </filter>
-    </defs>
-    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="郴州旗滨光伏光电玻璃" transform="translate(-190.400000, -609.600000)" fill="#339DFF" fill-rule="nonzero">
-            <g id="编组-16" filter="url(#filter-1)" transform="translate(40.600000, 609.600000)">
-                <g id="公告" transform="translate(150.800000, 0.000000)">
-                    <rect id="矩形" opacity="0" x="0" y="0" width="46" height="46"></rect>
-                    <path d="M30.3731127,7.0415548 C30.6461469,7.47823638 30.7909962,7.98286723 30.7909962,8.49788033 L30.7909962,37.5026565 C30.7909962,38.5015369 30.2490901,39.421784 29.3754337,39.9060218 C28.5017772,40.3902597 27.4341394,40.3621897 26.5871353,39.8327127 L15.4811218,32.8913027 L9.59667074,32.8913027 C7.47215062,32.8913027 5.74988677,31.1690388 5.74988677,29.0445187 L5.74988677,16.9560586 C5.74988677,14.8315385 7.47215062,13.1092746 9.59667074,13.1092746 L15.4811218,13.1092746 L26.5871353,6.1682689 C27.2050859,5.78194662 27.9512052,5.65696139 28.6613178,5.82081487 C29.3714304,5.98466834 29.9873526,6.42393505 30.3735574,7.0419591 L30.3731127,7.0415548 Z M35.2380429,12.4399576 C35.8250354,12.0325632 36.6311444,12.1781494 37.0385482,12.7651353 C41.318693,18.9141159 41.32058,27.0770845 37.0432785,33.2280433 C36.63061,33.7993823 35.8365528,33.9353013 35.2573529,33.5337405 C34.6781529,33.1321798 34.5269284,32.3408949 34.9172316,31.7540499 C38.5795365,26.490065 38.5778106,19.5026379 34.9129056,14.2404629 C34.5055112,13.6534704 34.6510974,12.8473614 35.2380833,12.4399576 L35.2380429,12.4399576 Z" id="形状"></path>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
--- a/src/assets/model/F1.png
+++ b/src/assets/model/F1.png
--- a/src/assets/model/F10.png
+++ b/src/assets/model/F10.png
--- a/src/assets/model/F11.png
+++ b/src/assets/model/F11.png
--- a/src/assets/model/F12.png
+++ b/src/assets/model/F12.png
--- a/src/assets/model/F2.png
+++ b/src/assets/model/F2.png
--- a/src/assets/model/F3.png
+++ b/src/assets/model/F3.png
--- a/src/assets/model/F4.png
+++ b/src/assets/model/F4.png
--- a/src/assets/model/F5.png
+++ b/src/assets/model/F5.png
--- a/src/assets/model/F6.png
+++ b/src/assets/model/F6.png
--- a/src/assets/model/F7.png
+++ b/src/assets/model/F7.png
--- a/src/assets/model/F8.png
+++ b/src/assets/model/F8.png
--- a/src/assets/model/F9.png
+++ b/src/assets/model/F9.png
--- a/src/assets/svg/IconStatus.vue
+++ b/src/assets/svg/IconStatus.vue
@@ -0,0 +1,24 @@
+<!-- Icon: alert Icon -->
+<script setup>
+defineProps({
+  color: {
+    type: String,
+    default: null,
+  },
+});
+</script>
+
+<template>
+  <svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>状态icon</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+      <g id="郴州旗滨光伏光电玻璃" transform="translate(-641.167539, -519.090909)" :fill="color ?? '#24FF5E'" fill-rule="nonzero">
+        <g id="状态icon" transform="translate(641.167539, 519.090909)">
+          <path
+            d="M21.6498582,4.55479956 C21.6463914,4.55050501 21.642058,4.54535155 21.6368579,4.54191591 C18.7967223,1.61303292 15.0188308,0 11,0 C6.98116924,0 3.20327766,1.61303292 0.362275449,4.54191591 C0.128269776,4.7824107 0,5.10278412 0,5.44377138 C0,5.78389972 0.127403089,6.10341423 0.361408761,6.34390902 C0.595414434,6.58440381 0.905688623,6.71753486 1.23676332,6.71753486 C1.56697132,6.71753486 1.87724551,6.58440381 2.11125118,6.34390902 C4.48510873,3.89687452 7.64158525,2.54924478 11,2.54924478 C14.3584147,2.54924478 17.515758,3.89773343 19.8887488,6.34476793 C20.1236212,6.58526272 20.4338954,6.71839377 20.7641034,6.71839377 C21.0943114,6.71839377 21.4054523,6.58526272 21.6377246,6.34476793 C21.8725969,6.10427314 22,5.78304081 22,5.44291247 C21.9991333,5.10879649 21.8760637,4.79443544 21.6498582,4.55479956 Z M10.9998918,22 C14.348751,22 17.0635378,19.3620338 17.0635378,16.1079376 C17.0635378,12.8538414 14.348751,10.2158752 10.9998918,10.2158752 C7.65103259,10.2158752 4.9362458,12.8538414 4.9362458,16.1079376 C4.9362458,19.3620338 7.65103259,22 10.9998918,22 Z M11,5.19640531 C8.47793886,5.19640531 6.10668137,6.16869139 4.32390482,7.9363281 C4.06909864,8.18884763 3.92869524,8.52382252 3.92869524,8.88027016 C3.92869524,9.23757671 4.06909864,9.5734105 4.32390482,9.82507112 C4.57784431,10.0767317 4.91585251,10.2158752 5.27552789,10.2158752 C5.63520328,10.2158752 5.97407816,10.0767317 6.22801765,9.82507112 C7.50291522,8.56161456 9.19815632,7.86589749 11,7.86589749 C12.8027104,7.86589749 14.4979515,8.56161456 15.7719824,9.82507112 C16.0267885,10.0767317 16.3647967,10.2158752 16.7253388,10.2158752 C17.0858809,10.2158752 17.4247558,10.0767317 17.6778286,9.82421221 C18.2030413,9.30285386 18.2013079,8.45682754 17.6778286,7.9363281 C15.8933186,6.1695503 13.5220611,5.19640531 11,5.19640531 Z"
+            id="形状"></path>
+        </g>
+      </g>
+    </g>
+</svg></template>
--- a/src/assets/svg/check.svg
+++ b/src/assets/svg/check.svg
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="26px" height="26px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="28px" height="28px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>任务</title>
    <defs>
        <linearGradient x1="91.384997%" y1="100%" x2="25.4330364%" y2="7.84095011e-14%" id="linearGradient-1">
--- a/src/assets/svg/cube-twice.svg
+++ b/src/assets/svg/cube-twice.svg
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="26px" height="26px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="28px" height="28px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>更多 2</title>
    <defs>
        <linearGradient x1="100%" y1="100%" x2="20.318998%" y2="7.84095011e-14%" id="linearGradient-1">
--- a/src/assets/svg/cube.svg
+++ b/src/assets/svg/cube.svg
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="26px" height="26px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="28px" height="28px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>多种 2</title>
    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="环动科技热处理车间立库看板" transform="translate(-39.000000, -620.000000)" fill="#FFFFFF" fill-rule="nonzero">
--- a/src/assets/svg/stack.svg
+++ b/src/assets/svg/stack.svg
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="26px" height="26px" viewBox="0 0 24.4721163 23.7661066" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg width="28px" height="28px" viewBox="0 0 24.4721163 23.7661066" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>多种</title>
    <defs>
        <linearGradient x1="100%" y1="89.6187762%" x2="20.318998%" y2="10.3812238%" id="linearGradient-1">
--- a/src/assets/svg/status_icon.svg
+++ b/src/assets/svg/status_icon.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>状态icon</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="郴州旗滨光伏光电玻璃" transform="translate(-641.167539, -519.090909)" fill="#FF3737" fill-rule="nonzero">
+            <g id="状态icon" transform="translate(641.167539, 519.090909)">
+                <path d="M21.6498582,4.55479956 C21.6463914,4.55050501 21.642058,4.54535155 21.6368579,4.54191591 C18.7967223,1.61303292 15.0188308,0 11,0 C6.98116924,0 3.20327766,1.61303292 0.362275449,4.54191591 C0.128269776,4.7824107 0,5.10278412 0,5.44377138 C0,5.78389972 0.127403089,6.10341423 0.361408761,6.34390902 C0.595414434,6.58440381 0.905688623,6.71753486 1.23676332,6.71753486 C1.56697132,6.71753486 1.87724551,6.58440381 2.11125118,6.34390902 C4.48510873,3.89687452 7.64158525,2.54924478 11,2.54924478 C14.3584147,2.54924478 17.515758,3.89773343 19.8887488,6.34476793 C20.1236212,6.58526272 20.4338954,6.71839377 20.7641034,6.71839377 C21.0943114,6.71839377 21.4054523,6.58526272 21.6377246,6.34476793 C21.8725969,6.10427314 22,5.78304081 22,5.44291247 C21.9991333,5.10879649 21.8760637,4.79443544 21.6498582,4.55479956 Z M10.9998918,22 C14.348751,22 17.0635378,19.3620338 17.0635378,16.1079376 C17.0635378,12.8538414 14.348751,10.2158752 10.9998918,10.2158752 C7.65103259,10.2158752 4.9362458,12.8538414 4.9362458,16.1079376 C4.9362458,19.3620338 7.65103259,22 10.9998918,22 Z M11,5.19640531 C8.47793886,5.19640531 6.10668137,6.16869139 4.32390482,7.9363281 C4.06909864,8.18884763 3.92869524,8.52382252 3.92869524,8.88027016 C3.92869524,9.23757671 4.06909864,9.5734105 4.32390482,9.82507112 C4.57784431,10.0767317 4.91585251,10.2158752 5.27552789,10.2158752 C5.63520328,10.2158752 5.97407816,10.0767317 6.22801765,9.82507112 C7.50291522,8.56161456 9.19815632,7.86589749 11,7.86589749 C12.8027104,7.86589749 14.4979515,8.56161456 15.7719824,9.82507112 C16.0267885,10.0767317 16.3647967,10.2158752 16.7253388,10.2158752 C17.0858809,10.2158752 17.4247558,10.0767317 17.6778286,9.82421221 C18.2030413,9.30285386 18.2013079,8.45682754 17.6778286,7.9363281 C15.8933186,6.1695503 13.5220611,5.19640531 11,5.19640531 Z" id="形状"></path>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/src/components/Base/Container.vue
+++ b/src/components/Base/Container.vue
@@ -51,7 +51,7 @@ const props = defineProps({
      <div class="cube" :class="[`cube-${cubeCorner}`]"></div>
      <div class="container-header">
        <Icon :name="icon" />
-        <span>{{ title }}</span>
+        <span class="container-header__title">{{ title }}</span>
      </div>
      <div class="container-body">
        <slot />
@@ -105,6 +105,10 @@ const props = defineProps({
  padding: 8px 12px;
 }

+.container-header__title {
+  font-size: 24px;
+}
+
 .container-body {
  background: #ffffff11;
  backdrop-filter: blur(2px);
--- a/src/components/Base/Header.vue
+++ b/src/components/Base/Header.vue
@@ -1,11 +1,10 @@
 <script setup>
-import { ref, computed } from 'vue';
 </script>

 <template>
  <header class="header">
    <div>
-      <Icon htmlRole="logo" icon="logo" />
+      <div class="icon"></div>
      <h1 class="header__title">郴州旗滨光伏光电玻璃有限公司</h1>
    </div>
  </header>
@@ -18,18 +17,29 @@ import { ref, computed } from 'vue';
  background: url(../../assets/header-bg@2x.png) 100% / 100% no-repeat;
 }

+
+header .icon {
+  background: url(../../assets/logo.png) 100% / contain no-repeat;
+  width: 52px;
+  height: 40px;
+}
+
 .header > div {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  /** width: 520px; **/
-  width: 480px;
+  width: 520px;
  top: 20px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
 }

 .header__title {
  font-weight: 400;
+  font-size: 30px;
  letter-spacing: 2px;
  color: #fff;
  user-select: none;
--- a/src/components/Base/Icon.vue
+++ b/src/components/Base/Icon.vue
@@ -41,9 +41,8 @@ const icon = computed(() => {

 <style scoped>
 .icon {
-  height: 16px;
-  width: 16px;
-  background: #fff3;
+  height: 24px;
+  width: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
--- a/src/components/Chart/RateChart.vue
+++ b/src/components/Chart/RateChart.vue
@@ -0,0 +1,159 @@
+<script setup>
+import { computed, nextTick, onMounted, ref, watch } from "vue";
+import * as echarts from "echarts";
+import getOptions from "./rateOption";
+
+const props = defineProps({
+  isOnlyChild: {
+    type: Boolean,
+    default: false,
+  },
+  rawData: {
+    type: Object,
+    default: () => {
+      return {
+        targetProduction: 0,
+        nowProduction: 0,
+        targetYield: 0,
+        nowYield: 0,
+      };
+    },
+  },
+  displayPlaceholder: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+watch(
+  () => props.isOnlyChild,
+  (newVal) => {
+    reInitChart();
+  }
+);
+
+const rate = computed(() => {
+  if (!props.rawData?.nowYield || props.rawData.nowYield == 0) return [0, 0];
+  // const _rate = ((props.rawData.nowYield / props.rawData.targetYield) * 100)
+  //   .toFixed(2)
+  //   .toString();
+  // return [parseInt(_rate), _rate.split(".")[1]];
+  return [
+    parseInt(props.rawData.nowYield),
+    ((props.rawData.nowYield + "").split(".")[1] ?? "").padStart(2, "0"),
+  ];
+});
+
+const chart = ref(null);
+const rateChartRef = ref(null);
+
+function reInitChart() {
+  if (chart.value) chart.value.dispose();
+  const _chart = echarts.init(rateChartRef.value);
+  _chart.setOption(getOptions(props.rawData));
+  chart.value = _chart;
+}
+
+onMounted(() => {
+  nextTick(() => {
+    reInitChart();
+  });
+});
+</script>
+
+<template>
+  <div class="chart rate-chart">
+    <div ref="rateChartRef" class="chart-container"></div>
+
+    <div :class="['fake-chart-title', isOnlyChild ? 'is-only-child' : '']">
+      <span class="integer-part">{{ rate[0] }}.</span>
+      <span class="decimal-part">{{ rate[1] }}%</span>
+    </div>
+
+    <div class="text-intro">
+      <div class="text-intro__item">
+        <span class="legend-box green"></span>
+        <span>当前成品率: {{ props.rawData?.nowYield ?? 0 }}%</span>
+      </div>
+      <div class="text-intro__item">
+        <span class="legend-box blue"></span>
+        <span>目标成品率: {{ props.rawData?.targetYield ?? 0 }}%</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.rate-chart {
+  height: 240px;
+  flex-grow: 1;
+  position: relative;
+}
+
+.chart-placeholder,
+.chart-container {
+  margin: auto;
+  width: 320px;
+  height: 100%;
+  background: "#0f01";
+  position: relative;
+}
+
+.fake-chart-title {
+  user-select: none;
+  position: absolute;
+  top: 30%;
+  left: 36%;
+}
+
+.fake-chart-title.is-only-child {
+  left: 36%;
+}
+
+.fake-chart-title > .integer-part {
+  font-size: 48px;
+  color: #fff;
+}
+
+.fake-chart-title > .decimal-part {
+  font-size: 32px;
+  color: #fff;
+}
+
+.text-intro {
+  position: absolute;
+  height: auto;
+  width: 240px;
+  bottom: 18px;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  align-items: center;
+  user-select: none;
+}
+
+.text-intro__item {
+  font-size: 20px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.legend-box {
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+}
+
+.green {
+  background: #4cf0e8;
+}
+
+.blue {
+  background: #1065ff;
+}
+</style>
--- a/src/components/Chart/YieldChart.vue
+++ b/src/components/Chart/YieldChart.vue
@@ -0,0 +1,110 @@
+<script setup>
+import { nextTick, onMounted, ref, watch } from "vue";
+import * as echarts from "echarts";
+import getOptions from "./yieldOption";
+
+const props = defineProps({
+  rawData: {
+    type: Object,
+    default: () => {
+      return {
+        targetProduction: 0,
+        nowProduction: 0,
+        targetYield: 0,
+        nowYield: 0,
+      };
+    },
+  },
+  displayPlaceholder: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const chart = ref(null);
+const yieldChartRef = ref(null);
+
+function reInitChart() {
+  // if (props.displayPlaceholder) return;
+  if (chart.value) chart.value.dispose();
+  const _chart = echarts.init(yieldChartRef.value);
+  _chart.setOption(
+    getOptions(
+      props.rawData ?? {
+        nowProduction: 0,
+        targetProduction: 0,
+      }
+    )
+  );
+  chart.value = _chart;
+}
+
+onMounted(() => {
+  nextTick(() => {
+    reInitChart();
+  });
+});
+</script>
+
+<template>
+  <div class="chart yield-chart">
+    <!-- <div v-if="displayPlaceholder" class="chart-placeholder"></div>
+    <div v-else ref="yieldChartRef" class="chart-container"></div> -->
+    <div ref="yieldChartRef" class="chart-container"></div>
+    <div class="text-intro">
+      <div class="text-intro__item">
+        <span class="legend-box green"></span>
+        <span>当前产量: {{ rawData?.nowProduction ?? 0 }}片</span>
+      </div>
+      <div v-if="!displayPlaceholder" class="text-intro__item">
+        <span>目标产量: {{ rawData?.targetProduction ?? 0 }}片</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.yield-chart {
+  height: 240px;
+  flex-grow: 1;
+  position: relative;
+}
+
+.chart-placeholder,
+.chart-container {
+  margin: auto;
+  width: 320px;
+  height: 100%;
+  background: "#0f01";
+}
+
+.text-intro {
+  position: absolute;
+  height: auto;
+  width: 220px;
+  bottom: 18px;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  align-items: center;
+  user-select: none;
+}
+
+.text-intro__item {
+  font-size: 20px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.legend-box {
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+  background: #4cf0e8;
+}
+</style>
--- a/src/components/Chart/rateOption.js
+++ b/src/components/Chart/rateOption.js
@@ -0,0 +1,149 @@
+const radius = ["58%", "72%"];
+const radius2 = ["45%", "58%"];
+const grid = {
+  top: 0,
+  left: 24,
+  right: 24,
+  bottom: 32,
+};
+const title = {
+  // 由外部负责展示，此处占位
+  text: " ",
+  left: "50%",
+  top: "30%",
+  textAlign: "center",
+  textStyle: {
+    fontWeight: 400,
+    fontSize: 48,
+    color: "#fffd",
+  },
+  subtext: "当前成品率\u2002",
+  subtextStyle: {
+    fontSize: 20,
+    fontWeight: 100,
+    color: "#fffd",
+    align: "right",
+  },
+};
+const tooltip = {
+  //   trigger: "item",
+  show: false,
+};
+const legend = {
+  top: "5%",
+  left: "center",
+};
+const bgSerie = {
+  type: "pie",
+  radius: radius,
+  center: ["50%", "40%"],
+  emptyCircleStyle: {
+    color: "#042c5f33",
+  },
+};
+const dataSerie = {
+  type: "pie",
+  radius: radius,
+  center: ["50%", "40%"],
+  avoidLabelOvervlap: false,
+  label: {
+    show: false,
+    // position: "center",
+  },
+  labelLine: {
+    show: false,
+  },
+  data: [
+    {
+      value: 90,
+      name: "当前成品率",
+      selected: false,
+      itemStyle: {
+        borderJoin: "round",
+        borderCap: "round",
+        borderWidth: 12,
+        borderRadius: "50%",
+        color: {
+          type: "linear",
+          x: 1,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            { offset: 0, color: "#4CF0E811" },
+            { offset: 1, color: "#4CF0E8" },
+          ],
+        },
+      },
+    },
+    {
+      value: 20,
+      name: "-",
+      itemStyle: { color: "transparent" },
+      label: { show: false },
+    },
+  ],
+};
+const targetSerie = {
+  type: "pie",
+  radius: radius2,
+  center: ["50%", "40%"],
+  avoidLabelOvervlap: false,
+  label: {
+    show: false,
+  },
+  labelLine: {
+    show: false,
+  },
+  data: [
+    {
+      value: 90,
+      name: "目标成品率",
+      selected: false,
+      itemStyle: {
+        borderJoin: "round",
+        borderCap: "round",
+        borderWidth: 12,
+        borderRadius: "50%",
+        color: {
+          type: "linear",
+          x: 1,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            { offset: 0, color: "#1065ff66" },
+            { offset: 1, color: "#1065ff" },
+          ],
+        },
+      },
+    },
+    {
+      value: 20,
+      name: "-",
+      itemStyle: { color: "transparent" },
+      label: { show: false },
+    },
+  ],
+};
+
+export default (data) => {
+  title.subtext = "当前成品率\u2002";
+  dataSerie.data[0].value = data?.nowYield ?? 0;
+  dataSerie.data[1].value = 100 - (data?.nowYield ?? 0);
+  targetSerie.data[0].value = data?.targetYield ?? 0;
+  targetSerie.data[1].value = 100 - (data?.targetYield ?? 0);
+  return {
+    tooltip,
+    title,
+    grid,
+    series: [
+      // background
+      bgSerie,
+      // actual data
+      dataSerie,
+      // target data
+      targetSerie,
+    ],
+  };
+};
--- a/src/components/Chart/yieldOption.js
+++ b/src/components/Chart/yieldOption.js
@@ -0,0 +1,157 @@
+const radius = ["58%", "72%"];
+const radius2 = ["45%", "58%"];
+const grid = {
+  top: 0,
+  left: 24,
+  right: 24,
+  bottom: 32,
+};
+const title = {
+  text: "75%",
+  left: "50%",
+  top: "30%",
+  textAlign: "center",
+  textStyle: {
+    fontWeight: 400,
+    fontSize: 48,
+    color: "#fffd",
+  },
+  subtext: "当前产量\u2002",
+  subtextStyle: {
+    fontSize: 20,
+    fontWeight: 100,
+    color: "#fffd",
+    align: "right",
+  },
+};
+const tooltip = {
+  //   trigger: "item",
+  show: false,
+};
+const legend = {
+  top: "5%",
+  left: "center",
+};
+const bgSerie = {
+  type: "pie",
+  radius: radius,
+  center: ["50%", "40%"],
+  emptyCircleStyle: {
+    color: "#042c5f33",
+  },
+};
+const dataSerie = {
+  type: "pie",
+  radius: radius,
+  center: ["50%", "40%"],
+  avoidLabelOvervlap: false,
+  label: {
+    show: false,
+    // position: "center",
+  },
+  labelLine: {
+    show: false,
+  },
+  data: [
+    {
+      value: 90,
+      name: "当前产量",
+      selected: false,
+      itemStyle: {
+        borderJoin: "round",
+        borderCap: "round",
+        borderWidth: 12,
+        borderRadius: "50%",
+        color: {
+          type: "linear",
+          x: 1,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            { offset: 0, color: "#4CF0E811" },
+            { offset: 1, color: "#4CF0E8" },
+          ],
+        },
+      },
+    },
+    {
+      value: 20,
+      name: "-",
+      itemStyle: { color: "transparent" },
+      label: { show: false },
+    },
+  ],
+};
+
+const targetSerie = {
+  type: "pie",
+  radius: radius2,
+  center: ["50%", "40%"],
+  avoidLabelOvervlap: false,
+  label: {
+    show: false,
+  },
+  labelLine: {
+    show: false,
+  },
+  data: [
+    {
+      value: 90,
+      name: "目标成产量",
+      selected: false,
+      itemStyle: {
+        borderJoin: "round",
+        borderCap: "round",
+        borderWidth: 12,
+        borderRadius: "50%",
+        color: {
+          type: "linear",
+          x: 1,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            { offset: 0, color: "#1065ff66" },
+            { offset: 1, color: "#1065ff" },
+          ],
+        },
+      },
+    },
+    {
+      value: 20,
+      name: "-",
+      itemStyle: { color: "transparent" },
+      label: { show: false },
+    },
+  ],
+};
+
+export default (data) => {
+  // title.text =
+  //   (100 * (+data.nowProduction / +data.targetProduction)).toFixed(0) + "%";
+  // 外圈
+  title.text = data.nowProduction || 0;
+  dataSerie.data[0].value = data.nowProduction;
+  dataSerie.data[1].value = !data.targetProduction
+    ? data.nowProduction == 0
+      ? 1
+      : 0
+    : data.targetProduction - data.nowProduction;
+
+  // 内圈
+  targetSerie.data[0].value = data?.targetProduction ?? 0;
+  targetSerie.data[1].value = data?.targetProduction ? 0 : 1;
+
+  return {
+    tooltip,
+    title,
+    grid,
+    series: [
+      // background
+      bgSerie,
+      dataSerie,
+      targetSerie,
+    ],
+  };
+};
--- a/src/components/Dribbble/Dialog.vue
+++ b/src/components/Dribbble/Dialog.vue
@@ -1,54 +0,0 @@
-<script setup>
-import './style.css';
-import { Close } from '@element-plus/icons-vue';
-import { ref, onMounted, onBeforeUnmount } from 'vue';
-
-const contentVisible = ref(false);
-const emit = defineEmits(['close']);
-
-onMounted(() => {
-  setTimeout(() => {
-    contentVisible.value = true;
-  }, 100);
-});
-
-onBeforeUnmount(() => {});
-
-function close() {
-  contentVisible.value = false;
-  setTimeout(() => {
-    emit('close');
-  }, 150);
-}
-</script>
-
-<template>
-  <div class="modal">
-    <div class="dribbble-dialog pop-out" :class="{ visible: contentVisible }">
-      <div class="logo"></div>
-      <div class="left"></div>
-      <div class="right"></div>
-      <div class="content-text">
-        <p>Advance your career with a</p>
-        <p>Professional Diploma in UX Design</p>
-        <button>Learn More</button>
-      </div>
-      <el-button
-        :icon="Close"
-        size="small"
-        circle
-        style="
-          background: #eeeb;
-          color: #000;
-          border: none;
-          position: absolute;
-          top: -3px;
-          right: 8px;
-          z-index: -10;
-        "
-        @click="close"
-      ></el-button>
-    </div>
-  </div>
-</template>
-i
--- a/src/components/Dribbble/style.css
+++ b/src/components/Dribbble/style.css
@@ -1,105 +0,0 @@
-.modal {
-  background: #0003;
-  position: fixed;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-  display: grid;
-  place-items: center;
-  color: #000;
-}
-
-.dribbble-dialog {
-  position: relative;
-  margin: 12px;
-  background: #fff;
-  border-radius: 18px;
-  box-shadow: 0 0 32px 2px #0001;
-  overflow-x: hidden;
-  height: auto;
-  padding: 20px;
-  transition: all 0.1s cubic-bezier(0, 0.48, 0, 1.18);
-}
-
-.content-text {
-  margin: 56px 56px 32px;
-  text-align: center;
-  font-weight: 700;
-  line-height: 1;
-}
-
-p {
-  margin: 10px 0;
-  user-select: none;
-}
-
-button {
-  border: none;
-  outline: none;
-  appearance: none;
-  padding: 12px 24px;
-  border-radius: 20px;
-  background: #000;
-  color: #fff;
-  margin-top: 12px;
-  font-size: 12px;
-  font-weight: 700;
-  letter-spacing: 0.5px;
-  text-transform: uppercase;
-  transition: all 0.1s ease-out;
-}
-
-button:hover {
-  cursor: pointer;
-  background: #000b;
-}
-
-.logo {
-  width: 128px;
-  height: 40px;
-  position: absolute;
-  top: 20px;
-  left: 20px;
-  background: url(../../assets/logo@2x.png) center / contain no-repeat;
-}
-
-.left {
-  width: 160px;
-  height: 80px;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  background: url(../../assets/leftcorner@2x.png) center / 100% 100% no-repeat;
-  z-index: -100;
-}
-
-.right {
-  width: 100px;
-  height: 118px;
-  position: absolute;
-  z-index: -100;
-  top: -2px;
-  right: 0;
-  background: url(../../assets/rightcorner@2x.png) center / 100% 100% no-repeat;
-}
-
-.fade-in {
-  opacity: 0;
-  transform: translateY(-56px);
-}
-
-.fade-in.visible {
-  transform: translateY(0);
-  opacity: 1;
-}
-
-.pop-out {
-  opacity: 0;
-  transform: scale(0);
-}
-
-.pop-out.visible {
-  opacity: 1;
-  transform: scale(1);
-}
--- a/src/components/DropdownBtnYaolu.vue
+++ b/src/components/DropdownBtnYaolu.vue
@@ -0,0 +1,86 @@
+<template>
+	<div class="drop-down-btn">
+		<button class="top-btn" @click='toggleExpand'><span style="margin-right: 3px;">{{active}}</span><svg-icon class-name="arrow" icon-class="arrow" :style="{transform:isExpand?'rotate(180deg)':'rotate(0deg)'}"/></button>
+		<div v-show="isExpand" class="btn-box">
+			<button
+				class="btn"
+				v-for="opt in options"
+				:key="opt"
+				@click="clickBtn(opt)"
+				v-show="active !== opt">
+				<span class="btn-text">
+					{{ opt }}
+				</span>
+			</button>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'DropDownBtn',
+	components: {},
+	props: ['options', 'active'],
+	data() {
+		return {
+			isExpand: false
+		};
+	},
+	computed: {},
+	methods: {
+		clickBtn(opt) {
+			this.$emit('emitFun', opt)
+			this.isExpand = !this.isExpand
+		},
+		toggleExpand() {
+			this.isExpand = !this.isExpand
+		}
+	},
+};
+</script>
+
+<style scoped lang="scss">
+.drop-down-btn {
+	z-index: 1000;
+	button {
+		border: none;
+		appearance: none;
+		outline: none;
+		color: #fff;
+		font-size: 14px;
+		padding: 8px 5px 8px 8px;
+		height: 32px;
+	}
+	.top-btn {
+		background: #02457E;
+		border-radius: 5px;
+		cursor: pointer;
+		.arrow {
+			font-size: 16px;
+		}
+	}
+	.btn-box {
+		.btn {
+			display: block;
+			width: 100%;
+			background: #03233C;
+			&:hover {
+				background: #02457E;
+				transition: all 0.5s ease-out;
+			}
+			.btn-text{
+				padding: 0px 5px 6px;
+				border-bottom: 1px solid #010D18;
+			}
+		}
+		.btn:last-child{
+			border-bottom-right-radius: 5px;
+			border-bottom-left-radius: 5px;
+			.btn-text{
+				height: 16px;
+				border-bottom: none;
+			}
+		}
+	}
+}
+</style>
--- a/src/components/HeadTime.vue
+++ b/src/components/HeadTime.vue
@@ -0,0 +1,30 @@
+<!-- 顶部的时间  -->
+
+<script setup>
+import { ref, watch, onMounted } from "vue";
+const time = ref(new Date().toLocaleTimeString());
+const date = ref(new Date().toLocaleDateString().replaceAll("/", "."));
+
+onMounted(() => {
+  setInterval(() => {
+    time.value = new Date().toLocaleTimeString();
+    date.value = new Date().toLocaleDateString().replaceAll("/", ".");
+  }, 1000);
+});
+</script>
+
+<template>
+  <div class="datetime">{{ time }} | {{ date }}</div>
+</template>
+
+<style scoped>
+.datetime {
+  padding: 8px;
+  position: absolute;
+  top: 50px;
+  right: 420px;
+  font-size: 24px;
+  color: #69b4ff;
+  line-height: 1;
+}
+</style>
--- a/src/components/HourChart.vue
+++ b/src/components/HourChart.vue
@@ -1,48 +1,111 @@
 <script setup>
-import { ref, onMounted } from "vue";
+import { ref, watch, onMounted, nextTick } from "vue";
 import * as echarts from "echarts";
 import Container from "./Base/Container.vue";
 import { useWsStore } from "../store";
-import charSetup from "./HourChartOptions";
+import chartSetup from "./HourChartOptions";

 const store = useWsStore();
 const chartChart = ref(null);
 const chart = ref(null);
 // 小时数据
-const hourData = ref([]);
-// store.$subscribe((mutation, state) => {
-//   hourData.value = state.data2.lineDetailData.map((item, index) => ({
-//     id: item.id,
-//     eqName: item.equipmentName,
-//     eqIndex: index + 1,
-//     alarmGrade: item.alarmLevel,
-//     alarmDetail: item.alarmDetails,
-//     position: `${item.productLine} - ${item.segment}`,
-//   }));
-// });
+const hourData = ref([
+  // { lineName: "001", hour: "00:00", num: 10 },
+  // { lineName: "002", hour: "00:20", num: 20 },
+  // { lineName: "003", hour: "00:30", num: 30 },
+  // { lineName: "004", hour: "00:40", num: 14 },
+  // { lineName: "005", hour: "00:50", num: 50 },
+]);
+store.$subscribe((mutation, state) => {
+  if (
+    state.data2.lineHourList == undefined ||
+    state.data2.lineHourList?.length == 0
+  ) {
+    hourData.value.splice(0);
+    if (chart.value) chart.value.dispose();
+    return;
+  }
+  hourData.value = (state.data2?.lineHourList ?? []).map((item, index) => ({
+    id: `${item.lineName}_${index}`,
+    hour: item.hour || "__",
+    data: item.num || 0,
+  }));
+  setupChart();
+});
+
+function setupChart() {
+  if (chart.value) chart.value.dispose();
+  nextTick(() => {
+    chart.value = echarts.init(chartChart.value);
+    chartSetup(
+      chart.value,
+      hourData.value.map((item) => item.hour),
+      hourData.value.map((item) => item.data)
+    );
+  });
+
+  // chart.value.setOption({
+  //   xAxis: {
+  //     type: "category",
+  //     data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+  //   },
+  //   yAxis: {
+  //     type: "value",
+  //   },
+  //   series: [
+  //     {
+  //       data: [150, 230, 224, 218, 135, 147, 260],
+  //       type: "line",
+  //     },
+  //   ],
+  // });
+}

 onMounted(() => {
  chartChart.value.classList.add("h-full");
-  chart.value = echarts.init(chartChart.value);
+  // setupChart();
 });
 </script>

 <template>
  <Container class="chart" title="小时数据" icon="cube">
-    <div ref="chartChart" class="chart-chart"></div>
+    <div
+      ref="chartChart"
+      class="chart-chart"
+      style="{opacity: (hourData && hourData.length > 0) ? 1 : 0}"
+    ></div>
+    <p v-show="!hourData || hourData.length === 0" class="empty-data-hint">
+      暂无数据
+    </p>
  </Container>
 </template>

 <style scoped>
 .chart {
-  height: 300px;
-}
-
-.chart-inner {
-  background: #0f0;
+  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/HourChartOptions.js
+++ b/src/components/HourChartOptions.js
@@ -1,30 +1,67 @@
 export const options = {
+  color: ["#FFD160", "#99D66C", "#5B9BFF", "#2760FF", "#8167F6", "#FF00B2"],
  grid: {
-    top: "5%",
-    bottom: "5%",
-    left: "3%",
-    right: "3%",
+    top: 10,
+    bottom: 0,
+    left: 12,
+    right: 10,
    containLabel: true,
  },
  xAxis: {
    type: "category",
    data: [],
    axisLabel: {
-      fontSize: 24,
+      fontSize: 16,
+      color: '#fff8'
+    },
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: "#e6e6e633",
+      },
    },
  },
  yAxis: {
    type: "value",
-    axisLabel: {
-      fontSize: 24,
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: "#e6e6e633",
+      },
    },
-    minInterval: 1,
+    splitLine: {
+      lineStyle: {
+        color: '#e6e6e633'
+      }
+    },
+    axisLabel: {
+      fontSize: 16,
+      color: '#fff8'
+    },
+    // minInterval: 1,
+    // max: 100,
+    // min: 1,
+    max: function(value) {
+      return value.max + Math.floor(value.max / 5)
+    }
  },
  series: [
    {
      data: [],
+      // data: Array.from({ length: 7 }, () => Math.random() * 100),
      type: "bar",
+      // barWidth: 20,
      showBackground: true,
+      label: {
+        show: true,
+        distance: 20,
+        rotate: 90,
+        color: '#fff',
+        fontSize: 16,
+        verticalAlign: "middle",
+        position: 'top',
+        formatter: "{c}"
+      },
      backgroundStyle: {
        color: "rgba(180, 180, 180, 0.2)",
      },
@@ -33,8 +70,8 @@ export const options = {
 };

 export default function setup(echartInstance, timeArr, dataArr) {
-  const options = { ...options };
-  options.xAxis.data = timeArr;
-  options.series[0].data = dataArr;
-  echartInstance.setOption(options);
+  const new_options = { ...options };
+  new_options.xAxis.data = timeArr;
+  new_options.series[0].data = dataArr;
+  echartInstance.setOption(new_options);
 }
--- 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/NavMenu.vue
+++ b/src/components/NavMenu.vue
@@ -5,7 +5,7 @@ import IconAlert from "../assets/menu_icon/IconAlert.vue";
 import IconChart from "../assets/menu_icon/IconChart.vue";
 import IconRealtime from "../assets/menu_icon/IconRealtime.vue";
 import IconAnnounce from "../assets/menu_icon/IconAnnouncement.vue";
-
+const props = defineProps(['value'])
 const emit = defineEmits(["change"]);
 const handleClick = (page) => {
  emit("change", page);
@@ -17,27 +17,32 @@ const handleClick = (page) => {
    <ul class="flex-list">
      <li>
        <button type="button" @click="(e) => handleClick('3d')">
-          <span style="">三维界面</span><Icon3D class="nav-icon" />
+          <span :style="{ color: value == '3d' ? '#b1daff' : '#339dff' }">三维界面</span>
+          <Icon3D class="nav-icon" :color="value == '3d' ? '#b1daff' : '#339dff'" />
        </button>
      </li>
      <li>
        <button type="button" @click="(e) => handleClick('data')">
-          <span style="">数据界面</span><IconChart class="nav-icon" />
+          <span :style="{ color: value == 'data' ? '#b1daff' : '#339dff' }">数据界面</span>
+          <IconChart class="nav-icon" :color="value == 'data' ? '#b1daff' : '#339dff'" />
        </button>
      </li>
      <li>
        <button type="button" @click="(e) => handleClick('realtime')">
-          <span style="">实时数据</span><IconRealtime class="nav-icon" />
+          <span :style="{ color: value == 'realtime' ? '#b1daff' : '#339dff' }">实时数据</span>
+          <IconRealtime class="nav-icon" :color="value == 'realtime' ? '#b1daff' : '#339dff'" />
        </button>
      </li>
      <li>
        <button type="button" @click="(e) => handleClick('alert')">
-          <span style="">报警列表</span><IconAlert class="nav-icon" />
+          <span :style="{ color: value == 'alert' ? '#b1daff' : '#339dff' }">报警列表</span>
+          <IconAlert class="nav-icon" :color="value == 'alert' ? '#b1daff' : '#339dff'" />
        </button>
      </li>
      <li>
        <button type="button" @click="(e) => handleClick('announcement')">
-          <span style="">公告页面</span><IconAnnounce class="nav-icon" />
+          <span style="">公告页面</span>
+          <IconAnnounce class="nav-icon" />
        </button>
      </li>
    </ul>
@@ -54,8 +59,13 @@ const handleClick = (page) => {
  position: relative;
  top: 72px;
  left: 0;
+  z-index: 10;
 }

+/* :fullscreen .nav-menu {
+  top: 25%;
+} */
+
 .flex-list {
  display: flex;
  flex-direction: column;
@@ -84,24 +94,27 @@ li {
  gap: 8px;
 }

-.nav-menu button > span {
+.nav-menu button>span {
  font-size: 32px;
  letter-spacing: 3px;
  line-height: 45px;
  color: #339dff;
+  text-shadow: 0 5px 1px #001124;
+  /* text-shadow: 0 5px 1px #004969; */
 }
-.nav-menu button:hover > span {
-  color: #b1daff;
+
+.nav-menu button:hover>span {
+  color: #b1daff !important;
 }
 </style>

 <style>
-.nav-menu button:hover > .nav-icon #icon3d-g,
-.nav-menu button:hover > .nav-icon #alert-rect,
-.nav-menu button:hover > .nav-icon #alert-dot,
-.nav-menu button:hover > .nav-icon #realtime-main,
-.nav-menu button:hover > .nav-icon #announce-main,
-.nav-menu button:hover > .nav-icon #chart-main {
+.nav-menu button:hover>.nav-icon #icon3d-g,
+.nav-menu button:hover>.nav-icon #alert-rect,
+.nav-menu button:hover>.nav-icon #alert-dot,
+.nav-menu button:hover>.nav-icon #realtime-main,
+.nav-menu button:hover>.nav-icon #announce-main,
+.nav-menu button:hover>.nav-icon #chart-main {
  fill: #b1daff !important;
 }
 </style>
--- a/src/components/RealtimeChart.vue
+++ b/src/components/RealtimeChart.vue
@@ -41,7 +41,7 @@ const options = {
    axisLabel: { show: false },
    axisTick: { show: false },
    splitLine: { show: false },
-    data: ["废片", "阶段成品"],
+    data: ["阶段成品", "废片"],
    axisLabel: {
      fontSize: 24,
      color: "#fff",
--- a/src/components/RealtimeTable.vue
+++ b/src/components/RealtimeTable.vue
@@ -3,8 +3,26 @@
 import { ref } from "vue";
 import { useWsStore } from "../store";

-const listData = ref([]);
 const store = useWsStore();
+const listData = ref((store.data2.lineDetailData || Array(3).fill({})).map(
+  (item, index) => ({
+    productLine: item.productLine || "---",
+    mbt: item.edgingInput || "---",
+    mbb: item.edgingOutput || "---",
+    dkt: item.drillingInput || "---",
+    dkb: item.drillingOutput || "---",
+    dmt: item.coatingInput || "---",
+    dmb: item.coatingOutput || "---",
+    syt: item.silkInput || "---",
+    syb: item.silkOutput || "---",
+    ght: item.solidificationInput || "---",
+    ghb: item.solidificationOutput || "---",
+    gh1: item.temperingInput || "---",
+    gh2: item.temperingOutput || "---",
+    bzt: item.finalInput || "---",
+    bzb: item.finalOutput || "---",
+  })
+));
 store.$subscribe((mutation, state) => {
  listData.value = (state.data2.lineDetailData || Array(3).fill({})).map(
    (item, index) => ({
@@ -30,13 +48,8 @@ store.$subscribe((mutation, state) => {

 <template>
  <div class="realtime-table">
-    <el-table
-      class="dark-table"
-      :data="listData"
-      :show-overflow-tooltip="true"
-      row-class-name="dark-row"
-      header-row-class-name="dark-header"
-    >
+    <el-table class="dark-table" :data="listData" :show-overflow-tooltip="true" row-class-name="dark-row"
+      header-row-class-name="dark-header">
      <el-table-column prop="productLine" label="产线"></el-table-column>
      <el-table-column prop="mbt" label="磨边上"></el-table-column>
      <el-table-column prop="mbb" label="磨边下"></el-table-column>
@@ -58,7 +71,7 @@ store.$subscribe((mutation, state) => {

 <style scoped>
 .realtime-table {
-  background: #00f3;
+  /* background: #00f3; */
  height: 160px;
  width: 80%;
  align-self: self-start;
@@ -68,7 +81,7 @@ store.$subscribe((mutation, state) => {
  height: 100%;
 }

-.dark-table >>> .el-table__inner-wrapper::before {
+.dark-table>>>.el-table__inner-wrapper::before {
  background-color: transparent !important;
 }
 </style>
--- a/src/components/SettingDialog.vue
+++ b/src/components/SettingDialog.vue
@@ -0,0 +1,363 @@
+<script setup>
+import { ref } from "vue";
+import { useSettings } from "../store/settings";
+const emit = defineEmits(["close", "change-resolution"]);
+
+const store = useSettings();
+const settings = ref(store.settings);
+store.$subscribe((mutation, state) => {
+  settings.value.fullscreen = state.settings.fullscreen;
+});
+
+function handleCancel() {
+  emit("close");
+}
+
+function handleConfirm() {
+  if (settings.value.resolution.width < 480)
+    store.settings.resolution.width = 480;
+  if (settings.value.resolution.width > 7680)
+    store.settings.resolution.width = 7680;
+  if (settings.value.resolution.height < 270)
+    store.settings.resolution.height = 270;
+  if (settings.value.resolution.height > 4320)
+    store.settings.resolution.height = 4320;
+
+  emit(
+    "change-resolution",
+    store.settings.resolution.width,
+    store.settings.resolution.height
+  );
+}
+</script>
+
+<template>
+  <div class="setting-dialog">
+    <h1>设置</h1>
+    <div class="main-content">
+      <div class="form-item">
+        <label for="carousel">轮播时间</label>
+        <input id="carousel" type="number" v-model="settings.carouselTime" />
+        <span>秒</span>
+      </div>
+      <div
+        class="form-item"
+        style="display: flex; flex-direction: column; gap: 12px"
+      >
+        <label for="carouselPages">轮播项目</label>
+        <div class="carousel-page__list">
+          <div>
+            <input
+              type="checkbox"
+              id="cp-3d"
+              name="carouselPages"
+              :class="[
+                settings.carouselPages.includes('3d') ? 'checked' : '',
+                'carousel-page',
+              ]"
+              @change="
+                () => {
+                  store.updateSettings({ type: 'carousel-page', value: '3d' });
+                }
+              "
+            />
+            <label for="cp-3d">三维界面</label>
+          </div>
+          <div>
+            <input
+              type="checkbox"
+              id="cp-data"
+              name="carouselPages"
+              :class="[
+                settings.carouselPages.includes('data') ? 'checked' : '',
+                'carousel-page',
+              ]"
+              @change="
+                () => {
+                  store.updateSettings({
+                    type: 'carousel-page',
+                    value: 'data',
+                  });
+                }
+              "
+            />
+            <label for="cp-data">数据界面</label>
+          </div>
+          <div>
+            <input
+              type="checkbox"
+              id="cp-realtime"
+              name="carouselPages"
+              :class="[
+                settings.carouselPages.includes('realtime') ? 'checked' : '',
+                'carousel-page',
+              ]"
+              @change="
+                () => {
+                  store.updateSettings({
+                    type: 'carousel-page',
+                    value: 'realtime',
+                  });
+                }
+              "
+            />
+            <label for="cp-realtime">实时数据</label>
+          </div>
+          <div>
+            <input
+              type="checkbox"
+              id="cp-alert"
+              name="carouselPages"
+              :class="[
+                settings.carouselPages.includes('alert') ? 'checked' : '',
+                'carousel-page',
+              ]"
+              @change="
+                () => {
+                  store.updateSettings({
+                    type: 'carousel-page',
+                    value: 'alert',
+                  });
+                }
+              "
+            />
+            <label for="cp-alert">报警列表</label>
+          </div>
+          <div>
+            <input
+              type="checkbox"
+              id="cp-announcement"
+              name="carouselPages"
+              :class="[
+                settings.carouselPages.includes('announcement')
+                  ? 'checked'
+                  : '',
+                'carousel-page',
+              ]"
+              @change="
+                () => {
+                  store.updateSettings({
+                    type: 'carousel-page',
+                    value: 'announcement',
+                  });
+                }
+              "
+            />
+            <label for="cp-announcement">公告页面</label>
+          </div>
+        </div>
+      </div>
+      <div class="form-item">
+        <label for="resolution1">分辨率</label>
+        <input
+          id="resolution1"
+          type="number"
+          min="480"
+          max="7680"
+          v-model="settings.resolution.width"
+        />
+        <span>X</span>
+        <input
+          id="resolution2"
+          type="number"
+          min="270"
+          max="4320"
+          v-model="settings.resolution.height"
+        />
+        <span>px</span>
+      </div>
+      <div class="form-item selector">
+        <!-- <div class="opt opt1">
+                    <input type="checkbox" id="fullscreen" name="fullscreen" :class="[settings.fullscreen ? 'checked' : '']"
+                        v-model="settings.fullscreen" />
+                    <label for="fullscreen">全屏显示</label>
+                </div> -->
+        <div class="opt opt2">
+          <input
+            type="checkbox"
+            id="status"
+            name="status"
+            :class="[settings.eqStatus ? 'checked' : '', 'carousel-page']"
+            v-model="settings.eqStatus"
+          />
+          <label for="status">设备状态</label>
+        </div>
+      </div>
+    </div>
+    <div class="footer">
+      <button @click="handleCancel" class="btn btn-cancel">取消</button>
+      <button @click="handleConfirm" class="btn btn-confirm">确认</button>
+    </div>
+  </div>
+  <div class="modal"></div>
+</template>
+
+<style scoped>
+* {
+  user-select: none;
+}
+
+.setting-dialog {
+  position: absolute;
+  margin: auto;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 577px;
+  height: 422px;
+  background: url(../assets/dialog-bg.png) 100% / contain no-repeat;
+  z-index: 1001;
+  transition: all 0.3s ease-out;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 24px 80px;
+}
+
+.main-content {
+  flex: 1;
+  padding-top: 10px;
+}
+
+.form-item {
+  margin: 20px 0;
+  display: flex;
+  gap: 8px;
+  color: #fff;
+  font-size: 24px;
+  letter-spacing: 2px;
+  padding: 0 12px;
+}
+
+.form-item.selector {
+  gap: 32px;
+}
+
+.opt {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.opt2 {
+  font-size: 16px;
+}
+
+.form-item input {
+  flex: 1;
+  border: none;
+  appearance: none;
+  outline: none;
+  border-radius: 4px;
+  padding: 4px 12px;
+  font-size: 18px;
+}
+
+input#resolution1,
+input#resolution2 {
+  width: 10px;
+}
+
+input[type="checkbox"] {
+  appearance: initial;
+  width: 24px;
+  height: 24px;
+  background: #fff;
+  flex: unset;
+  padding: unset;
+  font-size: unset;
+  cursor: pointer;
+}
+
+input[type="checkbox"].checked {
+  background: #0049ff;
+  position: relative;
+}
+
+input[type="checkbox"].checked::after {
+  content: "\2713";
+  color: #fff;
+  font-size: 22px;
+  line-height: 24px;
+  text-align: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.carousel-page__list {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  font-size: 16px;
+}
+
+.carousel-page__list > div {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+input[type="checkbox"].carousel-page {
+  width: 18px;
+  height: 18px;
+}
+input[type="checkbox"].carousel-page.checked::after {
+  font-size: 14px;
+  line-height: 18px;
+}
+
+label {
+  cursor: pointer;
+  user-select: none;
+}
+
+.footer {
+  display: flex;
+  gap: 12px;
+}
+
+.btn {
+  flex: 1;
+  padding: 12px;
+  font-size: 20px;
+  cursor: pointer;
+  letter-spacing: 8px;
+  background: url(../assets/dialog-button.png) 0 0 / 100% 100% no-repeat;
+}
+
+button {
+  appearance: none;
+  outline: none;
+  background: none;
+  border: none;
+  color: #fff;
+}
+
+.modal {
+  /* position: fixed;
+    height: 1080px;
+    width: 1920px; */
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  left: 0;
+  top: 0;
+  background: #0003;
+  backdrop-filter: blur(3px);
+  z-index: 999;
+  transition: all 0.3s ease-out;
+}
+
+.setting-dialog > h1 {
+  text-align: center;
+  letter-spacing: 24px;
+  font-weight: 400;
+  text-shadow: 0 5px 1px #001124;
+  user-select: none;
+  color: #fff;
+}
+</style>
--- a/src/components/TeamChartDay.vue
+++ b/src/components/TeamChartDay.vue
@@ -1,39 +1,75 @@
 <script setup>
-import { ref, onMounted } from 'vue';
-import * as echarts from 'echarts';
-import Container from './Base/Container.vue';
+import { ref, onMounted, nextTick } from "vue";
+import * as echarts from "echarts";
+import Container from "./Base/Container.vue";
+import { useWsStore } from "../store";
+import setupFn from "./TeamChartDayOptions";

+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].teamName == "A组") {
+      result[0] = parseInt(yieldArray[i].yield);
+    } else if (yieldArray[i].teamName == "B组") {
+      result[1] = parseInt(yieldArray[i].yield);
+    } else if (yieldArray[i].teamName == "C组") {
+      result[2] = parseInt(yieldArray[i].yield);
+    }
+  }
+  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);
+  // const d = loadData([
+  //   { teamName: "A组", yield: 11 },
+  //   { teamName: "B组", yield: 23 },
+  //   { teamName: "C组", yield: 14 },
+  // ]);
+  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.data2.classTodayProductYield);
+});

 onMounted(() => {
-  chartChart.value.classList.add('h-full');
-  const mc = echarts.init(chartChart.value);
-  mc.setOption({
-    grid: {
-      top: 24,
-      bottom: 24,
-      left: 24,
-      right: 24,
-    },
-    tooltip: {},
-    xAxis: {
-      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
-    },
-    yAxis: {},
-    series: [
-      {
-        name: '销量',
-        type: 'bar',
-        data: [5, 20, 36, 10, 10, 20],
-      },
-    ],
-  });
+  chartChart.value.classList.add("h-full");
+  // __apply();
 });
 </script>

 <template>
  <Container class="chart" title="本日班组情况" icon="cube">
-    <div ref="chartChart" class="chart-chart"></div>
+    <div
+      ref="chartChart"
+      class="chart-chart"
+      :style="{ opacity: showChartDom ? 1 : 0 }"
+    ></div>
+    <p v-show="!chart" class="empty-data-hint">暂无数据</p>
  </Container>
 </template>

@@ -42,10 +78,6 @@ onMounted(() => {
  height: 300px;
 }

-.chart-inner {
-  background: #0f0;
-}
-
 .chart-chart {
  height: 100%;
 }
--- a/src/components/TeamChartDayOptions.js
+++ b/src/components/TeamChartDayOptions.js
@@ -0,0 +1,59 @@
+export const options = {
+  color: ['#a4c9d1', '#72340b', '#ffd601' ],
+  grid: {
+    top: 8,
+    bottom: 20,
+    left: 42,
+    right: 28,
+  },  
+  legend: {
+    show: false,
+  },
+  xAxis: {
+    max: 100,
+    splitLine: {
+      lineStyle: {
+        color: "#fff2",
+      },
+    },
+    axisLabel: {
+      fontSize: 16,
+      color: "#e5e5e5a3",
+    },
+  },
+  yAxis: {
+    type: "category",
+    data: ["A组", "B组", "C组"],
+    inverse: true,
+    max: 2, // only the largest 3 bars will be displayed
+    axisLabel: {
+      fontSize: 16,
+      color: "#e5e5e5a3",
+    },
+    splitLine: {
+      lineStyle: {
+        color: "#e5e5e5",
+      },
+    },
+  },
+  series: [
+    {
+      type: "bar",
+      data: [34, 2, 23],
+      label: {
+        show: true,
+        position: "right",
+        formatter: "{c}%",
+        color: "#fff",
+        fontSize: 16,
+      },
+    },
+  ],
+
+};
+
+export default function setup(echartInstance, dataArr) {
+  const new_options = { ...options };
+  new_options.series[0].data = dataArr;
+  echartInstance.setOption(new_options);
+}
--- a/src/components/TeamChartMonth.vue
+++ b/src/components/TeamChartMonth.vue
@@ -1,39 +1,87 @@
 <script setup>
-import { ref, onMounted } from 'vue';
-import * as echarts from 'echarts';
-import Container from './Base/Container.vue';
+import { ref, onMounted, nextTick } from "vue";
+import * as echarts from "echarts";
+import Container from "./Base/Container.vue";
+import { useWsStore } from "../store";
+import setupFn from "./TeamChartMonthOptions";

-const chartChart = ref(null);
+const show = ref(false);
+const chartContainer = ref(null);
+const chartInstance = ref(null);
+const store = useWsStore();

+// 绿色：24FF5E
+// 黄色：FFB524
+// 红色：FF3737
 onMounted(() => {
-  chartChart.value.classList.add('h-full');
-  const mc = echarts.init(chartChart.value);
-  mc.setOption({
-    grid: {
-      top: 24,
-      bottom: 24,
-      left: 24,
-      right: 24,
-    },
-    tooltip: {},
-    xAxis: {
-      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
-    },
-    yAxis: {},
-    series: [
-      {
-        name: '销量',
-        type: 'bar',
-        data: [5, 20, 36, 10, 10, 20],
-      },
-    ],
-  });
+  chartContainer.value.classList.add("h-full");
+  const d = loadData(store.data2.monthlyTarget);
+  // const d = loadData([
+  //   {
+  //     targetProduction: 100,
+  //     nowProduction: 66,
+  //     targetYield: 13,
+  //     nowYield: 3,
+  //   },
+  // ]);
+  if (!d) {
+    show.value = false;
+    if (chartInstance.value) {
+      chartInstance.value.dispose();
+      chartInstance.value = null;
+    }
+  } else {
+    if (!chartInstance.value)
+      chartInstance.value = echarts.init(chartContainer.value);
+    setupFn(chartInstance.value, d);
+    show.value = true;
+  }
 });
+
+// 订阅
+store.$subscribe((mutation, state) => {
+  const d = loadData(state.data2.monthlyTarget);
+  if (!d) {
+    show.value = false;
+    if (chartInstance.value) {
+      chartInstance.value.dispose();
+      chartInstance.value = null;
+    }
+  } else {
+    if (!chartInstance.value)
+      chartInstance.value = echarts.init(chartContainer.value);
+    setupFn(chartInstance.value, d);
+    show.value = true;
+  }
+});
+
+// utils
+function loadData(monthlyTarget) {
+  if (
+    monthlyTarget == undefined ||
+    // monthlyTarget?.length == 0 ||
+    !monthlyTarget[0]
+  ) {
+    return null;
+  }
+
+  return {
+    targetProduction: monthlyTarget[0].targetProduction,
+    nowProduction: monthlyTarget[0].nowProduction,
+    targetYield: monthlyTarget[0].targetYield,
+    nowYield: monthlyTarget[0].nowYield,
+  };
+}
 </script>

 <template>
  <Container class="chart" title="本月班组情况" icon="cube">
-    <div ref="chartChart" class="chart-chart"></div>
+    <div
+      ref="chartContainer"
+      class="chart-chart"
+      :style="{ opacity: show ? 1 : 0 }"
+    ></div>
+    <p v-show="!show" class="empty-data-hint">暂无数据</p>
  </Container>
 </template>

@@ -42,10 +90,6 @@ onMounted(() => {
  height: 300px;
 }

-.chart-inner {
-  background: #0f0;
-}
-
 .chart-chart {
  height: 100%;
 }
--- a/src/components/TeamChartMonthOptions.js
+++ b/src/components/TeamChartMonthOptions.js
@@ -0,0 +1,192 @@
+export const options = {
+  color: ["#99D66C", "#5B9BFF", "#8167F6", "#FF00B2"],
+  grid: {
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
+  title: [
+    {
+      text: "当前产量：" + 118 + " 片",
+      left: "27%",
+      textAlign: "center",
+      top: "70%",
+      textStyle: {
+        fontSize: 16,
+        color: "#fffa",
+      },
+    },
+    {
+      text: "目标产量：" + 213 + " 片",
+      left: "27%",
+      textAlign: "center",
+      top: "85%",
+      textStyle: {
+        fontSize: 16,
+        color: "#fffa",
+      },
+    },
+    {
+      text: "当前成品率：" + 78 + "%",
+      left: "72%",
+      textAlign: "center",
+      top: "70%",
+      textStyle: {
+        fontSize: 16,
+        color: "#fffa",
+      },
+    },
+    {
+      text: "目标成品率：" + 90 + "%",
+      left: "72%",
+      textAlign: "center",
+      top: "85%",
+      textStyle: {
+        fontSize: 16,
+        color: "#fffa",
+      },
+    },
+  ],
+  series: [
+    {
+      type: "gauge",
+      startAngle: 90,
+      center: ["27%", "35%"],
+      endAngle: -270,
+      radius: "55%",
+      progress: {
+        show: true,
+        width: 12,
+      },
+      axisLine: {
+        lineStyle: {
+          width: 12,
+        },
+      },
+      pointer: {
+        show: false,
+      },
+      axisTick: {
+        show: false,
+      },
+      splitLine: {
+        show: false,
+      },
+      axisLabel: {
+        show: false,
+      },
+      detail: {
+        valueAnimation: true,
+        fontSize: 16,
+        offsetCenter: [0, "0%"],
+        formatter: "{value}%",
+        color: "rgba(255, 255, 255, 1)",
+      },
+      data: [
+        {
+          // value: (nowProduction / targetProduction * 100).toFixed(1),
+          value: 89.78,
+        },
+      ],
+    },
+    {
+      type: "gauge",
+      startAngle: 90,
+      center: ["73%", "35%"],
+      endAngle: -270,
+      radius: "55%",
+      progress: {
+        show: true,
+        width: 12,
+      },
+      axisLine: {
+        lineStyle: {
+          width: 12,
+        },
+      },
+      pointer: {
+        show: false,
+      },
+      axisTick: {
+        show: false,
+      },
+      splitLine: {
+        show: false,
+      },
+      axisLabel: {
+        show: false,
+      },
+      detail: {
+        show: true,
+        valueAnimation: true,
+        fontSize: 16,
+        offsetCenter: [0, "0%"],
+        // formatter: 0 + "%",
+        // formatter: (nowYield / targetYield * 100).toFixed(1) + '%',
+        color: "#fff",
+      },
+      data: [
+        {
+          // value: targetYield,
+          value: 78,
+          name: "Perfect",
+          title: {
+            show: false,
+          },
+          detail: {
+            show: false,
+            valueAnimation: true,
+            offsetCenter: ["0%", "-20%"],
+          },
+        },
+        {
+          value: 90,
+          name: "Good",
+          title: {
+            show: false,
+          },
+          detail: {
+            show: false,
+            valueAnimation: true,
+            offsetCenter: ["0%", "10%"],
+            formatter: "99.23%",
+          },
+        },
+        {
+          value: 0,
+          detail: {
+            show: true,
+          },
+        },
+      ],
+    },
+  ],
+};
+export default function setup(echartInstance, data) {
+  const new_options = { ...options };
+  new_options.title[0].text = "当前产量：" + data.nowProduction + " 片";
+  new_options.title[1].text = "目标产量：" + data.targetProduction + " 片";
+  new_options.title[2].text = "当前成品率：" + data.nowYield + "%";
+  new_options.title[3].text = "目标成品率：" + data.targetYield + "%";
+  new_options.series[0].data[0].value =
+    data.nowProduction != null &&
+    data.targetProduction != null &&
+    data.targetProduction != 0
+      ? ((data.nowProduction / data.targetProduction) * 100).toFixed(1)
+      : 0;
+  new_options.series[1].data[0].value = data.targetYield;
+  new_options.series[1].data[1].value = data.nowYield;
+  new_options.series[1].detail.formatter =
+    data.nowYield != null && data.targetYield != null && data.targetYield != 0
+      ? ((data.nowYield / data.targetYield) * 100).toFixed(2) + "%"
+      : "0%";
+  echartInstance.setOption(new_options);
+}
+
+// {
+//   "targetProduction": 99,
+//   "nowProduction": 58,
+//   "targetYield": 12,
+//   "nowYield": 9
+// }
--- a/src/components/Tools.vue
+++ b/src/components/Tools.vue
@@ -1,21 +1,113 @@
 <script setup>
-import { ref, watch, onMounted } from 'vue';
+import { ref, watch, onMounted } from "vue";
+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";
+
+const emit = defineEmits(["change-resolution"]);
+
+const { settings, updateSettings } = useSettings();
+// store.$subscribe((_, state) => {
+//   settings.value.carousel = state.settings.carousel;
+// })
+const visible = ref(false);
+
+function toHome() {
+  document.location.reload();
+}
+function showDialog() {
+  visible.value = true;
+}
+function toggleLunbo() {
+  updateSettings({ type: "carousel", value: null });
+}
+
+function handleChangeResolution(w, h) {
+  emit("change-resolution", w, h);
+  visible.value = false;
+}
 </script>

 <template>
-  <div class="tools">
-    <button>Home</button>
-    <button>Settings</button>
-    <button>AutoScroll</button>
+  <div id="tools-bar" class="tools">
+    <button @click="toHome">
+      <IconBack />
+    </button>
+    <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
+      >
+      <IconExchange :color="settings.carousel ? '#03356a' : '#50A1EC'" />
+    </button>
  </div>
+  <Teleport to="body">
+    <SettingDialogVue
+      v-if="visible"
+      @close="visible = false"
+      @change-resolution="handleChangeResolution"
+    />
+  </Teleport>
 </template>

 <style scoped>
 .tools {
-  background: #00f;
-  padding: 8px;
  position: absolute;
-  bottom: 24px;
-  left: 24px;
+  top: 28px;
+  right: 24px;
+  display: flex;
+  gap: 0px;
+  z-index: 1000;
+}
+
+button {
+  appearance: none;
+  border: none;
+  outline: none;
+  background: transparent;
+  cursor: pointer;
+  user-select: none;
+  transition: fill 0.2s ease-out;
+  cursor: pointer;
+}
+
+.tools button {
+  transform: scale(0.75);
+}
+
+.tools button:not(:first-child) {
+  /* transform: scale(.7) translateX(-20px); */
+  margin-left: -10px;
+}
+</style>
+
+<style>
+button svg #back-btn,
+button svg #setting-btn,
+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 {
+  fill: #b1daff !important;
 }
 </style>
--- a/src/components/data.json
+++ b/src/components/data.json
@@ -1,11 +0,0 @@
-{
-  "code": 0,
-  "data": [
-    { "date": "2023-01-01", "检测项目": "光刻胶&显影", "光刻胶残留": "1" },
-    { "date": "2023-01-01", "检测项目": "激光一", "磨面擦伤": "1" },
-    { "date": "2023-01-01", "检测项目": "激光二", "刻线宽度不良": "1" },
-    { "date": "2023-01-02", "检测项目": "光刻胶&显影", "光刻胶残留": "2" },
-    { "date": "2023-01-02", "检测项目": "激光一", "刻线宽度不良": "2" },
-    { "date": "2023-01-03", "检测项目": "激光二", "擦伤": "3" }
-  ]
-}
--- a/src/components/datapage/HourChart.vue
+++ b/src/components/datapage/HourChart.vue
@@ -0,0 +1,99 @@
+<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 from "./HourChartOptions";
+
+const store = useWsStore();
+const chartChart = ref(null);
+const chart = ref(null);
+// 小时数据
+const hourData = ref([
+  // { hour: "0:1", data: 10 },
+  // { hour: "0:2", data: 13 },
+  // { hour: "0:3", data: 20 },
+  // { hour: "0:4", data: 12 },
+  // { hour: "0:5", data: 12 },
+  // { hour: "0:6", data: 11 },
+  // { hour: "0:7", data: 10 },
+  // { hour: "0:8", data: 1 },
+]);
+store.$subscribe((mutation, state) => {
+  if (
+    state.data2.lineHourList == undefined ||
+    state.data2.lineHourList?.length == 0
+  ) {
+    hourData.value.splice(0);
+    if (chart.value) chart.value.dispose();
+    return;
+  }
+  hourData.value = (state.data2?.lineHourList ?? []).map((item, index) => ({
+    id: `${item.lineName}_${index}`,
+    hour: item.hour || `__`,
+    data: item.num || 0,
+  }));
+  setupChart();
+});
+
+function setupChart() {
+  if (chart.value) chart.value.dispose();
+  nextTick(() => {
+    chart.value = echarts.init(chartChart.value);
+    chartSetup(
+      chart.value,
+      hourData.value.map((item) => item.hour),
+      hourData.value.map((item) => item.data)
+    );
+  });
+}
+
+onMounted(() => {
+  chartChart.value.classList.add("h-full");
+  // setupChart();
+});
+</script>
+
+<template>
+  <Container class="chart" title="小时数据" icon="cube">
+    <div
+      ref="chartChart"
+      class="chart-chart"
+      style="{opacity: (hourData && hourData.length > 0) ? 1 : 0}"
+    ></div>
+    <p v-show="!hourData || hourData.length === 0" class="empty-data-hint">
+      暂无数据
+    </p>
+  </Container>
+</template>
+
+<style scoped>
+.chart {
+  /* height: 300px; */
+  height: auto;
+}
+
+.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/datapage/HourChartOptions.js
+++ b/src/components/datapage/HourChartOptions.js
@@ -0,0 +1,77 @@
+export const options = {
+  color: ["#FFD160", "#99D66C", "#5B9BFF", "#2760FF", "#8167F6", "#FF00B2"],
+  grid: {
+    top: 10,
+    bottom: 0,
+    left: 12,
+    right: 10,
+    containLabel: true,
+  },
+  xAxis: {
+    type: "category",
+    data: [],
+    axisLabel: {
+      fontSize: 16,
+      color: "#fff8",
+    },
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: "#e6e6e633",
+      },
+    },
+  },
+  yAxis: {
+    type: "value",
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: "#e6e6e633",
+      },
+    },
+    splitLine: {
+      lineStyle: {
+        color: "#e6e6e633",
+      },
+    },
+    axisLabel: {
+      fontSize: 16,
+      color: "#fff8",
+    },
+    minInterval: 1,
+    // max: 100,
+    // min: 1
+    max: function(value) {
+      return value.max + Math.floor(value.max / 4)
+    }
+  },
+  series: [
+    {
+      data: [],
+      // data: Array.from({ length: 7 }, () => Math.random() * 100),
+      type: "bar",
+      // barWidth: 20,
+      showBackground: true,
+      label: {
+        show: true,
+        distance: 20,
+        rotate: 90,
+        color: '#fff',
+        fontSize: 16,
+        verticalAlign: "middle",
+        position: 'top',
+        formatter: "{c}"
+      },
+      backgroundStyle: {
+        color: "rgba(180, 180, 180, 0.2)",
+      },
+    },
+  ],
+};
+
+export default function setup(echartInstance, timeArr, dataArr) {
+  const new_options = { ...options };
+  new_options.xAxis.data = timeArr;
+  new_options.series[0].data = dataArr;
+  echartInstance.setOption(new_options);
+}
--- a/src/components/datapage/LatestWeekYield.vue
+++ b/src/components/datapage/LatestWeekYield.vue
@@ -0,0 +1,164 @@
+<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: 300px; */
+  height: auto;
+}
+
+.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/datapage/LatestWeekYieldOptions.js
+++ b/src/components/datapage/LatestWeekYieldOptions.js
@@ -0,0 +1,134 @@
+export const options = {
+  color: ['#00D3E7', '#2B9BFF', '#0D4DFF'],
+  legend: {
+    textStyle: {
+      color: "#fff8",
+    },
+  },
+  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/datapage/LineMonth.vue
+++ b/src/components/datapage/LineMonth.vue
@@ -0,0 +1,143 @@
+<script setup>
+import { ref, onMounted, nextTick } from "vue";
+import Container from "../Base/Container.vue";
+import { useWsStore } from "../../store";
+import YieldChart from "../Chart/YieldChart.vue";
+import RateChart from "../Chart/RateChart.vue";
+
+const displayProductionChart = ref(false);
+const displayRateChart = ref(false);
+const websocketData = ref(null);
+const refreshToken = ref(1);
+const store = useWsStore();
+
+onMounted(() => {
+  // websocketData.value = loadData([
+  //   {
+  //     targetProduction: 0,
+  //     nowProduction: 10,
+  //     targetYield: 10.34,
+  //     nowYield: 3.11,
+  //   },
+  // ]);
+  websocketData.value = loadData(store.data2.monthlyTarget);
+  if (!websocketData.value) {
+    displayProductionChart.value = false;
+    displayRateChart.value = false;
+  } else {
+    /** 阻止  targetProduction == 0 */
+    if (!websocketData.value.targetProduction) {
+      displayProductionChart.value = false;
+    } else {
+      displayProductionChart.value = true;
+    }
+    /** 阻止  targetYield == 0 */
+    if (!websocketData.value.targetYield) {
+      displayRateChart.value = false;
+    } else {
+      displayRateChart.value = true;
+    }
+  }
+});
+
+// 订阅
+store.$subscribe((mutation, state) => {
+  // const d = loadData([
+  //   {
+  //     targetProduction: 100,
+  //     nowProduction: 66,
+  //     targetYield: 13,
+  //     nowYield: 3,
+  //   },
+  // ]);
+  websocketData.value = loadData(state.data2.monthlyTarget);
+  if (!websocketData.value) {
+    displayProductionChart.value = false;
+    displayRateChart.value = false;
+  } else {
+    /** 阻止  targetProduction == 0 */
+    if (!websocketData.value.targetProduction) {
+      displayProductionChart.value = false;
+    } else {
+      if (refreshToken.value > 100000) refreshToken.value = 0;
+      refreshToken.value += 1;
+      displayProductionChart.value = true;
+    }
+    /** 阻止  targetYield == 0 */
+    if (!websocketData.value.targetYield) {
+      displayRateChart.value = false;
+    } else {
+      if (refreshToken.value > 100000) refreshToken.value = 0;
+      refreshToken.value += 1;
+      displayRateChart.value = true;
+    }
+  }
+});
+
+// utils
+function loadData(monthlyTarget) {
+  if (monthlyTarget == undefined || !monthlyTarget[0]) {
+    return null;
+  }
+  return {
+    targetProduction: monthlyTarget[0].targetProduction,
+    nowProduction: monthlyTarget[0].nowProduction,
+    targetYield: monthlyTarget[0].targetYield,
+    nowYield: monthlyTarget[0].nowYield,
+  };
+}
+</script>
+
+<template>
+  <Container class="chart" title="本月生产线情况" icon="cube">
+    <!-- <div
+      ref="chartContainer"
+      class="chart-chart"
+      :style="{ opacity: show ? 1 : 0 }"
+    ></div>
+    <p v-show="!show" class="empty-data-hint">暂无数据</p> -->
+    <div class="container-body__h-full">
+      <yield-chart
+        :key="refreshToken + '_yield_chart_linemonth'"
+        :raw-data="websocketData"
+      />
+      <rate-chart
+        :display-placeholder="!displayRateChart"
+        :key="refreshToken + '_rate_chart_linemonth'"
+        :raw-data="websocketData"
+        :isOnlyChild="!displayProductionChart"
+      />
+      <!-- <p
+        v-if="!displayProductionChart && !displayRateChart"
+        style="
+          height: 100%;
+          line-height: 350px;
+          user-select: none;
+          flex: 1;
+          color: #fffc;
+          font-size: 24px;
+          text-align: center;
+        "
+      >
+        暂无数据
+      </p> -->
+    </div>
+  </Container>
+</template>
+
+<style scoped>
+.chart {
+  /* height: 300px; */
+  height: auto;
+}
+
+.chart-chart {
+  height: 100%;
+}
+
+.container-body__h-full {
+  height: 100%;
+  display: flex;
+  gap: 12px;
+}
+</style>
--- a/src/components/datapage/LineMonthOptions.js
+++ b/src/components/datapage/LineMonthOptions.js
@@ -0,0 +1,177 @@
+export const options = {
+  color: ["#99D66C", "#5B9BFF", "#8167F6", "#FF00B2"],
+  grid: {
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0
+  },
+  title: [
+    {
+      text: "当前产量：" + 100 + " 片",
+      left: "27%",
+      textAlign: "center",
+      top: "70%",
+      textStyle: {
+        fontSize: 16,
+        color: '#fffd'
+      },
+    },
+    {
+      text: "目标产量：" + 100 + " 片",
+      left: "27%",
+      textAlign: "center",
+      top: "85%",
+      textStyle: {
+        fontSize: 16,
+        color: '#fffd'
+      },
+    },
+    {
+      text: "当前成品率：" + 22 + "%",
+      left: "72%",
+      textAlign: "center",
+      top: "70%",
+      textStyle: {
+        fontSize: 16,
+        color: '#fffd'
+      },
+    },
+    {
+      text: "目标成品率：" + 22 + "%",
+      left: "72%",
+      textAlign: "center",
+      top: "85%",
+      textStyle: {
+        fontSize: 16,
+        color: '#fffd'
+      },
+    },
+  ],
+  series: [
+    {
+      type: "gauge",
+      startAngle: 90,
+      center: ["27%", "35%"],
+      endAngle: -270,
+      radius: "55%",
+      progress: {
+        show: true,
+        width: 24,
+      },
+      axisLine: {
+        lineStyle: {
+          width: 24,
+        },
+      },
+      pointer: {
+        show: false,
+      },
+      axisTick: {
+        show: false,
+      },
+      splitLine: {
+        show: false,
+      },
+      axisLabel: {
+        show: false,
+      },
+      detail: {
+        valueAnimation: true,
+        fontSize: 16,
+        offsetCenter: [0, "0%"],
+        formatter: "{value}%",
+        color: "rgba(255, 255, 255, 1)",
+      },
+      data: [
+        {
+          // value: (nowProduction / targetProduction * 100).toFixed(1),
+          value: 100,
+        },
+      ],
+    },
+    {
+      type: "gauge",
+      startAngle: 90,
+      center: ["73%", "35%"],
+      endAngle: -270,
+      radius: "55%",
+      progress: {
+        show: true,
+        width: 24,
+      },
+      axisLine: {
+        lineStyle: {
+          width: 24,
+        },
+      },
+      pointer: {
+        show: false,
+      },
+      axisTick: {
+        show: false,
+      },
+      splitLine: {
+        show: false,
+      },
+      axisLabel: {
+        show: false,
+      },
+      detail: {
+        show: true,
+        valueAnimation: true,
+        fontSize: 16,
+        offsetCenter: [0, "0%"],
+        // formatter: 0 + "%",
+        // formatter: (nowYield / targetYield * 100).toFixed(1) + '%',
+        color: "#fff",
+      },
+      data: [
+        {
+          // value: targetYield,
+          value: 100,
+          name: "Perfect",
+          title: {
+            show: false,
+          },
+          detail: {
+            show: false,
+            valueAnimation: true,
+            offsetCenter: ["0%", "-20%"],
+          },
+        },
+        {
+          value: 100,
+          // value: nowYield,
+          name: "Good",
+          title: {
+            show: false,
+          },
+          detail: {
+            show: false,
+            valueAnimation: true,
+            offsetCenter: ["0%", "10%"],
+          },
+        },
+        {
+          value: 0,
+          detail: {
+            show: true,
+          },
+        },
+      ],
+    },
+  ],
+};
+export default function setup(echartInstance, data) {
+  const new_options = { ...options };
+  new_options.title[0].text = "当前产量：" + data.nowProduction + " 片";
+  new_options.title[1].text = "目标产量：" + data.targetProduction + " 片";
+  new_options.title[2].text = "当前成品率：" + data.nowYield + "%";
+  new_options.title[3].text = "目标成品率：" + data.targetYield + "%";
+  new_options.series[0].data[0].value = (data.nowProduction / data.targetProduction * 100).toFixed(1)
+  new_options.series[1].data[0].value = data.targetYield
+  new_options.series[1].data[1].value = data.nowYield
+  new_options.series[1].detail.formatter = (data.nowYield / data.targetYield * 100).toFixed(2) + '%',
+  echartInstance.setOption(new_options);
+}
--- a/src/components/datapage/LineToday
+++ b/src/components/datapage/LineToday
@@ -0,0 +1,102 @@
+<script setup>
+import { ref, onMounted, nextTick } from "vue";
+import * as echarts from "echarts";
+import Container from "../Base/Container.vue";
+import { useWsStore } from "../../store";
+import setupFn from "./LineTodayOptions";
+
+const show = ref(false);
+const chartContainer = ref(null);
+const chartInstance = ref(null);
+const store = useWsStore();
+
+onMounted(() => {
+  chartContainer.value.classList.add("h-full");
+  const d = loadData(store.data2.dailyTarget);
+  // const d = loadData([
+  //   {
+  //     targetProduction: 100,
+  //     nowProduction: 66,
+  //     targetYield: 13,
+  //     nowYield: 3,
+  //   },
+  // ]);
+  if (!d) {
+    show.value = false;
+    if (chartInstance.value) {
+      chartInstance.value.dispose();
+      chartInstance.value = null;
+    }
+  } else {
+    if (!chartInstance.value)
+      chartInstance.value = echarts.init(chartContainer.value);
+    setupFn(chartInstance.value, d);
+    show.value = true;
+  }
+});
+
+// 订阅
+store.$subscribe((mutation, state) => {
+  const d = loadData(state.data2.dailyTarget);
+  // const d = loadData([
+  //   {
+  //     targetProduction: 100,
+  //     nowProduction: 66,
+  //     targetYield: 13,
+  //     nowYield: 3,
+  //   },
+  // ]);
+  if (!d) {
+    show.value = false;
+    if (chartInstance.value) {
+      chartInstance.value.dispose();
+      chartInstance.value = null;
+    }
+  } else {
+    if (!chartInstance.value)
+      chartInstance.value = echarts.init(chartContainer.value);
+    setupFn(chartInstance.value, d);
+    show.value = true;
+  }
+});
+
+// utils
+function loadData(dailyTarget) {
+  if (
+    dailyTarget == undefined ||
+    // dailyTarget?.length == 0 ||
+    !dailyTarget[0]
+  ) {
+    return null;
+  }
+
+  return {
+    targetProduction: dailyTarget[0].targetProduction,
+    nowProduction: dailyTarget[0].nowProduction,
+    targetYield: dailyTarget[0].targetYield,
+    nowYield: dailyTarget[0].nowYield,
+  };
+}
+</script>
+
+<template>
+  <Container class="chart" title="本日生产线情况" 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: 300px; */
+  height: auto;
+}
+
+.chart-chart {
+  height: 100%;
+}
+</style>
--- a/src/components/datapage/LineToday.vue
+++ b/src/components/datapage/LineToday.vue
@@ -0,0 +1,148 @@
+<script setup>
+import { ref, onMounted, nextTick } from "vue";
+import Container from "../Base/Container.vue";
+import { useWsStore } from "../../store";
+import YieldChart from "../Chart/YieldChart.vue";
+import RateChart from "../Chart/RateChart.vue";
+
+const displayProductionChart = ref(false);
+const displayRateChart = ref(false);
+const websocketData = ref(null);
+const refreshToken = ref(1);
+const store = useWsStore();
+
+onMounted(() => {
+  // websocketData.value = loadData([
+  //   {
+  //     targetProduction: 1220,
+  //     nowProduction: 8,
+  //     targetYield: null,
+  //     nowYield: null,
+  //   },
+  // ]);
+  websocketData.value = loadData(store.data2.dailyTarget);
+  if (!websocketData.value) {
+    displayProductionChart.value = false;
+    displayRateChart.value = false;
+  } else {
+    /** 阻止  targetProduction == 0 */
+    if (!websocketData.value.targetProduction) {
+      displayProductionChart.value = false;
+    } else {
+      displayProductionChart.value = true;
+    }
+    /** 阻止  targetYield == 0 */
+    if (!websocketData.value.targetYield) {
+      displayRateChart.value = false;
+    } else {
+      displayRateChart.value = true;
+    }
+  }
+});
+
+// 订阅
+store.$subscribe((mutation, state) => {
+  // const d = loadData([
+  //   {
+  //     targetProduction: 100,
+  //     nowProduction: 66,
+  //     targetYield: 13,
+  //     nowYield: 3,
+  //   },
+  // ]);
+  websocketData.value = loadData(state.data2.dailyTarget);
+  if (!websocketData.value) {
+    displayProductionChart.value = false;
+    displayRateChart.value = false;
+  } else {
+    /** 阻止  targetProduction == 0 */
+    if (!websocketData.value.targetProduction) {
+      displayProductionChart.value = false;
+    } else {
+      if (refreshToken.value > 100000) refreshToken.value = 0;
+      refreshToken.value += 1;
+      displayProductionChart.value = true;
+    }
+    /** 阻止  targetYield == 0 */
+    if (!websocketData.value.targetYield) {
+      displayRateChart.value = false;
+    } else {
+      if (refreshToken.value > 100000) refreshToken.value = 0;
+      refreshToken.value += 1;
+      displayRateChart.value = true;
+    }
+  }
+});
+
+// utils
+function loadData(dailyTarget) {
+  if (dailyTarget == undefined || !dailyTarget[0]) {
+    return null;
+  }
+
+  return {
+    // 目标产量
+    targetProduction: dailyTarget[0].targetProduction,
+    // 当前产量
+    nowProduction: dailyTarget[0].nowProduction,
+    // 目标成品率
+    targetYield: dailyTarget[0].targetYield,
+    // 当前成品率
+    nowYield: dailyTarget[0].nowYield,
+  };
+}
+</script>
+
+<template>
+  <Container class="chart" title="本日生产线情况" icon="cube">
+    <!-- <div
+      ref="chartContainer"
+      class="chart-chart"
+      :style="{ opacity: show ? 1 : 0 }"
+    ></div>
+    <p v-show="!show" class="empty-data-hint">暂无数据</p> -->
+    <div class="container-body__h-full">
+      <yield-chart
+        :key="refreshToken + '_yield_chart_linetoday'"
+        :raw-data="websocketData"
+      />
+      <rate-chart
+        :display-placeholder="!displayRateChart"
+        :key="refreshToken + '_rate_chart_linetoday'"
+        :raw-data="websocketData"
+        :isOnlyChild="!displayProductionChart"
+      />
+      <!-- <p
+        v-if="!displayProductionChart && !displayRateChart"
+        style="
+          height: 100%;
+          line-height: 350px;
+          user-select: none;
+          flex: 1;
+          color: #fffc;
+          font-size: 24px;
+          text-align: center;
+        "
+      >
+        暂无数据
+      </p> -->
+    </div>
+  </Container>
+</template>
+
+<style scoped>
+.chart {
+  /* height: 300px; */
+  height: auto;
+}
+
+.chart-chart {
+  height: 100%;
+}
+
+.container-body__h-full {
+  height: 100%;
+  display: flex;
+  gap: 12px;
+}
+</style>
--- a/src/components/datapage/LineTodayOptions.js
+++ b/src/components/datapage/LineTodayOptions.js
@@ -0,0 +1,192 @@
+export const options = {
+  color: ["#99D66C", "#5B9BFF", "#8167F6", "#FF00B2"],
+  grid: {
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
+  title: [
+    {
+      text: "当前产量：" + 118 + " 片",
+      left: "27%",
+      textAlign: "center",
+      top: "70%",
+      textStyle: {
+        fontSize: 16,
+        color: "#fffd",
+      },
+    },
+    {
+      text: "目标产量：" + 213 + " 片",
+      left: "27%",
+      textAlign: "center",
+      top: "85%",
+      textStyle: {
+        fontSize: 16,
+        color: "#fffd",
+      },
+    },
+    {
+      text: "当前成品率：" + 78 + "%",
+      left: "72%",
+      textAlign: "center",
+      top: "70%",
+      textStyle: {
+        fontSize: 16,
+        color: "#fffd",
+      },
+    },
+    {
+      text: "目标成品率：" + 90 + "%",
+      left: "72%",
+      textAlign: "center",
+      top: "85%",
+      textStyle: {
+        fontSize: 16,
+        color: "#fffd",
+      },
+    },
+  ],
+  series: [
+    {
+      type: "gauge",
+      startAngle: 90,
+      center: ["27%", "35%"],
+      endAngle: -270,
+      radius: "55%",
+      progress: {
+        show: true,
+        width: 24,
+      },
+      axisLine: {
+        lineStyle: {
+          width: 24,
+        },
+      },
+      pointer: {
+        show: false,
+      },
+      axisTick: {
+        show: false,
+      },
+      splitLine: {
+        show: false,
+      },
+      axisLabel: {
+        show: false,
+      },
+      detail: {
+        valueAnimation: true,
+        fontSize: 16,
+        offsetCenter: [0, "0%"],
+        formatter: "{value}%",
+        color: "rgba(255, 255, 255, 1)",
+      },
+      data: [
+        {
+          // value: (nowProduction / targetProduction * 100).toFixed(1),
+          value: 89.78,
+        },
+      ],
+    },
+    {
+      type: "gauge",
+      startAngle: 90,
+      center: ["73%", "35%"],
+      endAngle: -270,
+      radius: "55%",
+      progress: {
+        show: true,
+        width: 24,
+      },
+      axisLine: {
+        lineStyle: {
+          width: 24,
+        },
+      },
+      pointer: {
+        show: false,
+      },
+      axisTick: {
+        show: false,
+      },
+      splitLine: {
+        show: false,
+      },
+      axisLabel: {
+        show: false,
+      },
+      detail: {
+        show: true,
+        valueAnimation: true,
+        fontSize: 16,
+        offsetCenter: [0, "0%"],
+        // formatter: 0 + "%",
+        // formatter: (nowYield / targetYield * 100).toFixed(1) + '%',
+        color: "#fff",
+      },
+      data: [
+        {
+          // value: targetYield,
+          value: 78,
+          name: "Perfect",
+          title: {
+            show: false,
+          },
+          detail: {
+            show: false,
+            valueAnimation: true,
+            offsetCenter: ["0%", "-20%"],
+          },
+        },
+        {
+          value: 90,
+          name: "Good",
+          title: {
+            show: false,
+          },
+          detail: {
+            show: false,
+            valueAnimation: true,
+            offsetCenter: ["0%", "10%"],
+            formatter: "99.23%",
+          },
+        },
+        {
+          value: 0,
+          detail: {
+            show: true,
+          },
+        },
+      ],
+    },
+  ],
+};
+export default function setup(echartInstance, data) {
+  const new_options = { ...options };
+  new_options.title[0].text = "当前产量：" + data.nowProduction + " 片";
+  new_options.title[1].text = "目标产量：" + data.targetProduction + " 片";
+  new_options.title[2].text = "当前成品率：" + data.nowYield + "%";
+  new_options.title[3].text = "目标成品率：" + data.targetYield + "%";
+  new_options.series[0].data[0].value =
+    data.nowProduction != null &&
+    data.targetProduction != null &&
+    data.targetProduction != 0
+      ? ((data.nowProduction / data.targetProduction) * 100).toFixed(1)
+      : 0;
+  new_options.series[1].data[0].value = data.targetYield;
+  new_options.series[1].data[1].value = data.nowYield;
+  new_options.series[1].detail.formatter =
+    data.nowYield != null && data.targetYield != null && data.targetYield != 0
+      ? ((data.nowYield / data.targetYield) * 100).toFixed(2) + "%"
+      : "0%";
+  echartInstance.setOption(new_options);
+}
+
+// {
+//   "targetProduction": 99,
+//   "nowProduction": 58,
+//   "targetYield": 12,
+//   "nowYield": 9
+// }
--- a/src/components/datapage/TeamChartDay.vue
+++ b/src/components/datapage/TeamChartDay.vue
@@ -0,0 +1,84 @@
+<script setup>
+import { ref, onMounted, nextTick } from "vue";
+import * as echarts from "echarts";
+import Container from "../Base/Container.vue";
+import { useWsStore } from "../../store";
+import setupFn from "./TeamChartDayOptions";
+
+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].teamName == "A组") {
+      result[0] = parseInt(yieldArray[i].yield);
+    } else if (yieldArray[i].teamName == "B组") {
+      result[1] = parseInt(yieldArray[i].yield);
+    } else if (yieldArray[i].teamName == "C组") {
+      result[2] = parseInt(yieldArray[i].yield);
+    }
+  }
+  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);
+  // const d = loadData([
+  //   { teamName: "A组", yield: 11 },
+  //   { teamName: "B组", yield: 23 },
+  //   { teamName: "C组", yield: 14 },
+  // ]);
+  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.data2.classTodayProductYield);
+});
+
+onMounted(() => {
+  chartChart.value.classList.add("h-full");
+  // __apply();
+});
+</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/datapage/TeamChartDayOptions.js
+++ b/src/components/datapage/TeamChartDayOptions.js
@@ -0,0 +1,59 @@
+export const options = {
+  color: ['#a4c9d1', '#72340b', '#ffd601' ],
+  grid: {
+    top: 8,
+    bottom: 20,
+    left: 42,
+    right: 28,
+  },  
+  legend: {
+    show: false,
+  },
+  xAxis: {
+    max: 100,
+    splitLine: {
+      lineStyle: {
+        color: "#fff2",
+      },
+    },
+    axisLabel: {
+      fontSize: 16,
+      color: "#e5e5e5a3",
+    },
+  },
+  yAxis: {
+    type: "category",
+    data: ["A组", "B组", "C组"],
+    inverse: true,
+    max: 2, // only the largest 3 bars will be displayed
+    axisLabel: {
+      fontSize: 16,
+      color: "#e5e5e5a3",
+    },
+    splitLine: {
+      lineStyle: {
+        color: "#e5e5e5",
+      },
+    },
+  },
+  series: [
+    {
+      type: "bar",
+      data: [34, 2, 23],
+      label: {
+        show: true,
+        position: "right",
+        formatter: "{c}%",
+        color: "#fff",
+        fontSize: 16,
+      },
+    },
+  ],
+
+};
+
+export default function setup(echartInstance, dataArr) {
+  const new_options = { ...options };
+  new_options.series[0].data = dataArr;
+  echartInstance.setOption(new_options);
+}
--- a/src/components/datapage/TeamChartMonth.vue
+++ b/src/components/datapage/TeamChartMonth.vue
@@ -0,0 +1,84 @@
+<script setup>
+import { ref, onMounted, nextTick } from "vue";
+import * as echarts from "echarts";
+import Container from "../Base/Container.vue";
+import { useWsStore } from "../../store";
+import setupFn from "./TeamChartMonthOptions";
+
+const store = useWsStore();
+const chartChart = ref(null);
+const chart = ref(null);
+const showChartDom = ref(false);
+
+/** 无状态，处理数据 */
+function loadData(yieldArray) {
+  if (yieldArray == undefined || yieldArray?.length == 0) return null;
+  const result = [];
+  for (let i = 0; i < yieldArray.length; ++i) {
+    if (yieldArray[i].teamName == "A组") {
+      result[0] = parseInt(yieldArray[i].yield);
+    } else if (yieldArray[i].teamName == "B组") {
+      result[1] = parseInt(yieldArray[i].yield);
+    } else if (yieldArray[i].teamName == "C组") {
+      result[2] = parseInt(yieldArray[i].yield);
+    }
+  }
+  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);
+  // const d = loadData([
+  //   { teamName: "A组", yield: 11 },
+  //   { teamName: "B组", yield: 23 },
+  //   { teamName: "C组", yield: 14 },
+  // ]);
+  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.data2.lineTeamMonthYieldList);
+});
+
+onMounted(() => {
+  chartChart.value.classList.add("h-full");
+  // __apply();
+});
+</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/datapage/TeamChartMonthOptions.js
+++ b/src/components/datapage/TeamChartMonthOptions.js
@@ -0,0 +1,59 @@
+export const options = {
+  color: ['#a4c9d1', '#72340b', '#ffd601' ],
+  grid: {
+    top: 8,
+    bottom: 20,
+    left: 42,
+    right: 28,
+  },  
+  legend: {
+    show: false,
+  },
+  xAxis: {
+    max: 100,
+    splitLine: {
+      lineStyle: {
+        color: "#fff2",
+      },
+    },
+    axisLabel: {
+      fontSize: 16,
+      color: "#e5e5e5a3",
+    },
+  },
+  yAxis: {
+    type: "category",
+    data: ["A组", "B组", "C组"],
+    inverse: true,
+    max: 2, // only the largest 3 bars will be displayed
+    axisLabel: {
+      fontSize: 16,
+      color: "#e5e5e5a3",
+    },
+    splitLine: {
+      lineStyle: {
+        color: "#e5e5e5",
+      },
+    },
+  },
+  series: [
+    {
+      type: "bar",
+      data: [34, 2, 23],
+      label: {
+        show: true,
+        position: "right",
+        formatter: "{c}%",
+        color: "#fff",
+        fontSize: 16,
+      },
+    },
+  ],
+
+};
+
+export default function setup(echartInstance, dataArr) {
+  const new_options = { ...options };
+  new_options.series[0].data = dataArr;
+  echartInstance.setOption(new_options);
+}
--- 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,157 @@
+<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",
+        rotate: 32,
+        margin: 12
+      },
+      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,161 @@
+<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",
+        rotate: 32,
+        margin: 12
+      },
+      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();
+}, 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/AlertListPage.vue
+++ b/src/pages/AlertListPage.vue
@@ -2,18 +2,24 @@
 <script setup>
 import { ref } from "vue";
 import { useWsStore } from "../store";
-const alarmList = ref([]);
-const store = useWsStore();
+import Container from "../components/Base/Container.vue";
+import ThreeD from './3D.vue'

-alarmList.value = (store.data1.alarmArrList ?? []).map((item, index) => ({
+const props = defineProps({
+  line: {
+    type: Number,
+    default: 1,
+  },
+});
+const store = useWsStore();
+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,
@@ -24,44 +30,30 @@ store.$subscribe((mutation, state) => {
    position: `${item.productLine} - ${item.segment}`,
  }));
 });
+
+// function handleIgnore() {
+//   alarmList.value.splice(0)
+// }
 </script>

 <template>
  <div class="alert-list-page">
-    <div class="alert-list">
+    <div style="position: absolute; top: 0; left: -279px; width: calc(100% + 279px); height: 100%;">
+      <ThreeD :line="line ?? '1'" />
+    </div>
+    <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="90"
-          ></el-table-column>
-          <el-table-column
-            prop="eqIndex"
-            label="序号"
-            width="60"
-          ></el-table-column>
-          <el-table-column
-            prop="alarmGrade"
-            label="报警等级"
-            width="90"
-          ></el-table-column>
-          <el-table-column
-            prop="alarmDetail"
-            label="报警细节"
-            width="144"
-          ></el-table-column>
+        <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"></el-table-column>
+          <el-table-column prop="eqIndex" label="序号" width="60"></el-table-column>
+          <el-table-column prop="alarmGrade" label="报警等级" width="100"></el-table-column>
+          <el-table-column prop="alarmDetail" label="报警细节" width="144"></el-table-column>
          <el-table-column prop="position" label="定位"></el-table-column>
        </el-table>
      </div>
-      <button class="alert-btn">忽略</button>
-    </div>
+      <!-- <button @click="handleIgnore" class="alert-btn">忽略</button> -->
+    </Container>
  </div>
 </template>

@@ -71,19 +63,31 @@ store.$subscribe((mutation, state) => {
  /* height: 72%; */
  height: 100%;
  background: transparent;
+  user-select: none;
 }

 .dark-row {
  color: #fff;
-  background: #005eff25 !important;
+  background: #006ACD32 !important;
+  user-select: none;
 }

-.dark-row > td.el-table__cell {
+.dark-row:nth-child(odd) {
+  background: #020D2D32 !important;
+}
+
+.dark-row>td.el-table__cell {
  border: none;
+  font-size: 16px;
 }

-.dark-row:hover > td.el-table__cell {
-  background-color: #005effaa !important;
+.dark-row>td.el-table__cell:not(:last-child) {
+  border-right: 1px solid #0003;
+}
+
+.dark-row:hover>td.el-table__cell {
+  /* background-color: #020D2D20 !important; */
+  background-color: #fff1 !important;
 }

 .dark-header {
@@ -91,14 +95,19 @@ store.$subscribe((mutation, state) => {
  color: #fff;
 }

-.dark-header > th.el-table__cell.is-leaf {
+.dark-header>th.el-table__cell.is-leaf {
  border-bottom: none;
-  background-color: #005eff95 !important;
+  background-color: #006ACD32 !important;
  font-weight: 400;
  letter-spacing: 1px;
 }

-.dark-header > th.el-table__cell {
+.dark-header>th.el-table__cell {
+  font-size: 16px;
+}
+
+.dark-header>th.el-table__cell:not(:last-child) {
+  border-right: 1px solid #0003;
 }
 </style>

@@ -109,23 +118,29 @@ store.$subscribe((mutation, state) => {
 }

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

  position: absolute;
-  top: 0;
-  right: 0;
+  top: 15px;
+  right: 32px;

  display: flex;
  flex-direction: column;
 }

-.alert-list__table {
-  height: calc(100% - 72px);
-  background: linear-gradient(to right, transparent, #0ba6ff80);
+:fullscreen .alert-list {
+  width: 35%;
+  top: 32px;
+  height: calc(100% - 64px);
 }

-.alert-list__table >>> .el-table__inner-wrapper::before {
+.alert-list__table {
+  height: calc(100% - 72px);
+  /* background: linear-gradient(to right, transparent, #0ba6ff80); */
+}
+
+.alert-list__table>>>.el-table__inner-wrapper::before {
  background: transparent;
 }

@@ -137,6 +152,7 @@ button {
 }

 .alert-btn {
+  width: 100%;
  height: 72px;
  background: #0f04;
  color: #fff;
--- a/src/pages/AnnouncementPage.vue
+++ b/src/pages/AnnouncementPage.vue
@@ -2,6 +2,7 @@
 <script setup>
 import { ref } from "vue";
 import { useWsStore } from "../store";
+import IconBack from "../assets/menu_icon/IconBack.vue";
 const emit = defineEmits(["home"]);

 // load 公告
@@ -39,36 +40,49 @@ const handleClose = () => {
  <div class="announcement-page">
    <h1 class="announcement-title">公告栏</h1>
    <main class="announcement-content">
-      <ScrollText :vertical="true" :duration="10" :pause-on-hover="true">
+      <ScrollText :vertical="true" :duration="120" :pause-on-hover="false">
        <div v-html="vertical_content"></div>
      </ScrollText>
    </main>
    <div class="announcement-footer">
-      <button
-        style="position: absolute; left: 0; bottom: 10px"
-        @click="handleClose"
-      >
-        返回
+      <button id="return-btn" style="
+          position: absolute;
+          right: 32px;
+          top: 56px;
+          appearance: none;
+          background: transparent;
+          border: none;
+          cursor: pointer;
+        " @click="handleClose">
+        <IconBack color="#f00" />
      </button>
-      <ScrollText> {{ horizontal_content }} </ScrollText>
+      <ScrollText :duration="50"> {{ horizontal_content }} </ScrollText>
    </div>
  </div>
 </template>

+<style>
+#return-btn:hover #back-btn__inner #back-btn {
+  fill: #F008 !important;
+}
+</style>
+
 <style scoped>
 .announcement-page {
  flex: 1;
  height: 100%;
  width: 100%;
-  background: #000;
+  background: url(../assets/line.png) 0 0 / 100% 100% no-repeat, #000;
  display: flex;
  flex-direction: column;
  color: #f00;
+  position: relative;
 }

 .announcement-title {
  color: #fff;
  font-size: 72px;
+  line-height: 144px;
  font-weight: 500;
  letter-spacing: 2px;
  text-align: center;
@@ -82,16 +96,25 @@ const handleClose = () => {
  font-family: serif;
  overflow: hidden;
  user-select: none;
+  margin-bottom: 32px;
+}
+
+:fullscreen .announcement-content {
+  margin-bottom: 5%;
+  padding: 56px 80px 12px 80px;
 }

 .announcement-footer {
-  height: 128px;
+  height: 144px;
  /* background: #ccc1; */
  font-size: 64px;
  padding: 0 80px;
  line-height: 128px;
  font-family: sans-serif;
-  position: relative;
  user-select: none;
 }
+
+:fullscreen .announcement-footer {
+  line-height: 80px;
+}
 </style>
--- a/src/pages/DataPage.vue
+++ b/src/pages/DataPage.vue
@@ -1,17 +1,28 @@
 <!-- 实时数据页面 -->
 <script setup>
-import HourChart from "../components/HourChart.vue";
-import TeamChartDay from "../components/TeamChartDay.vue";
-import TeamChartMonth from "../components/TeamChartMonth.vue";
+import HourChart from "../components/datapage/HourChart.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';
+
 </script>

 <template>
  <div class="data-page">
-    <div class="data-list">
-      <HourChart />
-      <TeamChartDay />
-      <TeamChartMonth />
-    </div>
+    <!-- 小时数据 -->
+    <HourChart />
+    <!-- 近7日产量 -->
+    <LatestWeekYield />
+    <!-- 本日生产线情况 -->
+    <LineToday />
+    <!-- 本月生产线情况 -->
+    <LineMonth />
+    <!-- 本日班组情况 -->
+    <!-- <TeamChartDay /> -->
+    <!-- 本月班组情况 -->
+    <!-- <TeamChartMonth /> -->
  </div>
 </template>

@@ -19,18 +30,23 @@ import TeamChartMonth from "../components/TeamChartMonth.vue";
 .data-page {
  flex: 1;
  position: relative;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
+  gap: 24px;
+  padding: 32px 56px;
+  align-items: stretch;
 }

-.data-list {
-  height: 100%;
-  width: 480px;
-
-  position: absolute;
-  top: 0;
-  right: 32px;
-
-  display: flex;
-  flex-direction: column;
+/* 
+:fullscreen .data-list {
+  width: 35%;
+  gap: 32px;
+  padding: 32px 0;
  justify-content: space-around;
 }
+
+:fullscreen .data-list>div {
+  flex: 1;
+} */
 </style>
--- a/src/pages/ThreeDimension.vue
+++ b/src/pages/ThreeDimension.vue
@@ -0,0 +1,60 @@
+<!-- 实时数据页面 -->
+<script setup>
+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({
+  line: {
+    type: Number,
+    default: 1,
+  },
+});
+
+</script>
+
+<template>
+  <div class="data-page">
+    <div style="position: absolute; top: 0; left: -279px; width: calc(100% + 279px); height: 100%;">
+      <ThreeD :line="line ?? '1'" />
+    </div>
+    <div class="data-list">
+      <HourChart />
+      <LatestWeekYield />
+      <!-- <TeamChartDay />
+      <TeamChartMonth /> -->
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.data-page {
+  flex: 1;
+  position: relative;
+}
+
+.data-list {
+  /* height: 100%; */
+  width: 480px;
+
+  position: absolute;
+  top: 24px;
+  right: 32px;
+  gap: 24px;
+  display: flex;
+  flex-direction: column;
+}
+
+:fullscreen .data-list {
+  width: 35%;
+  gap: 12px;
+  padding: 32px 0;
+  justify-content: space-around;
+}
+
+:fullscreen .data-list>div {
+  flex: 1;
+}
+</style>
--- a/src/pages/eqMaps.js
+++ b/src/pages/eqMaps.js
@@ -0,0 +1,166 @@
+export const initState = {
+  // 钢一线
+  M1上片: "",
+  M2上片: "",
+  M1磨边机: "",
+  M2磨边机: "",
+  M1清洗机: "",
+  M1清洗机: "",
+  S1丝印机: "",
+  S2丝印机: "",
+  S1前储片台: "",
+  S2前储片台: "",
+  S1清洗机: "",
+  S2清洗机: "",
+  Z1钻孔机: "",
+  Z2钻孔机: "",
+  B1前储片台: "",
+  B1后储片台: "",
+  B1下片: "",
+  B1清洗机: "",
+  //
+  M3清洗机: "",
+  M4清洗机: "",
+  M5清洗机: "",
+  M3磨边机: "",
+  M4磨边机: "",
+  M5磨边机: "",
+  M3上片: "",
+  M4上片: "",
+  M5上片: "",
+  Z3钻孔机: "",
+  Z4钻孔机: "",
+  Z5钻孔机: "",
+  S3清洗机: "",
+  S4清洗机: "",
+  S5清洗机: "",
+  S3前储片台: "",
+  S4前储片台: "",
+  S5前储片台: "",
+  S3丝印机: "",
+  S4丝印机: "",
+  S5丝印机: "",
+  S3固化机: "",
+  S4固化机: "",
+  S5固化机: "",
+  S3后储片台: "",
+  S4后储片台: "",
+  S5后储片台: "",
+  B2前储片台: "",
+  B2后储片台: "",
+  B2下片: "",
+  B2清洗机: "",
+  //
+  M6上片: "",
+  M7上片: "",
+  M6磨边机: "",
+  M7磨边机: "",
+  M6清洗机: "",
+  M7清洗机: "",
+  Z6钻孔机: "",
+  Z7钻孔机: "",
+  S6清洗机: "",
+  S7清洗机: "",
+  S6前储片台: "",
+  S7前储片台: "",
+  S6丝印机: "",
+  S7丝印机: "",
+  S6固化炉: "",
+  S7固化炉: "",
+  S6后储片台: "",
+  S7后储片台: "",
+  B3前储片台: "",
+  B3后储片台: "",
+  B3清洗机: "",
+  B3下片: "",
+};
+
+export const statusMap = [
+  "error", // 关机
+  "work", // 工作
+  "warn", // 未工作
+  "error", // 错误
+];
+
+export const eqMap = {
+  // 钢一线
+  C1LR1: "M1上片",
+  C1LR2: "M2上片",
+  C1MM1: "M1磨边机",
+  C1MM2: "M2磨边机",
+  C1ECM1: "M1清洗机",
+  C1ECM2: "M2清洗机",
+  "s1--": "S1丝印机",
+  "s2--": "S2丝印机",
+  C1ST1: "S1前储片台",
+  C1ST2: "S2前储片台",
+  C1SCM1: "S1清洗机",
+  C1SCM2: "S2清洗机",
+  C1HP1: "Z1钻孔机",
+  C1HP2: "Z2钻孔机",
+  C3ST1: "B1前储片台",
+  C3ST2: "B1后储片台",
+  C3UL1: "B1下片",
+  C3UL1: "B1下片1",
+  C3UL2: "B1下片2",
+  C3UCM1: "B1清洗机",
+  //
+  B1ECM1: "M3清洗机",
+  B1ECM2: "M4清洗机",
+  B1ECM3: "M5清洗机",
+  B1MM1: "M3磨边机",
+  B1MM2: "M4磨边机",
+  B1MM3: "M5磨边机",
+  B1LR1: "M3上片",
+  B1LR2: "M4上片",
+  B1LR3: "M5上片",
+  B1HP1: "Z3钻孔机",
+  B1HP2: "Z4钻孔机",
+  B1HP3: "Z5钻孔机",
+  B1SCM1: "S3清洗机",
+  B1SCM2: "S4清洗机",
+  B1SCM3: "S5清洗机",
+  B1ST1: "S3前储片台",
+  B1ST2: "S4前储片台",
+  B1ST3: "S5前储片台",
+  B1SP1: "S3丝印机",
+  B1SP2: "S4丝印机",
+  B1SP3: "S5丝印机",
+  B2CO1: "S3固化炉",
+  B2CO2: "S4固化炉",
+  B2CO3: "S5固化炉",
+  B2ST1: "S3后储片台",
+  B2ST2: "S4后储片台",
+  B2ST3: "S5后储片台",
+  B3ST1: "B2前储片台",
+  B3ST2: "B2后储片台",
+  B3UL1: "B2下片",
+  B3UL1: "B2下片1",
+  B3UL2: "B2下片2",
+  B3UCM1: "B2清洗机",
+  //
+  A1LR1: "M6上片",
+  A1LR2: "M7上片",
+  A1MM1: "M6磨边机",
+  A1MM2: "M7磨边机",
+  A1ECM1: "M6清洗机",
+  A1ECM2: "M7清洗机",
+  A1HP1: "Z6钻孔机",
+  A1HP2: "Z7钻孔机",
+  A1SCM1: "S6清洗机",
+  A1SCM2: "S7清洗机",
+  A1ST1: "S6前储片台",
+  A1ST2: "S7前储片台",
+  A1SP1: "S6丝印机",
+  A1SP2: "S7丝印机",
+  A2CO1: "S6固化炉",
+  A2CO2: "S7固化炉",
+  A2ST1: "S6后储片台",
+  A2ST2: "S7后储片台",
+  A3ST1: "B3前储片台",
+  A3ST2: "B3后储片台",
+  A3UCM1: "B3清洗机",
+  A3UL1: "B3下片",
+  A3UL1: "B3下片1",
+  A3UL2: "B3下片2",
+};
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,41 +1,34 @@
 import { defineStore } from "pinia";
-import { ref } from 'vue';
-
+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) {
-    console.log('update', data)
    switch (category) {
      case "1":
-        data1.value = data;
+        data1.value = { ...data1.value, ...data };
        break;
      case "2":
-        data2.value = data;
+        data2.value = { ...data2.value, ...data };
        break;
      case "3":
-        data3.value = data;
+        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/store/settings.js
+++ b/src/store/settings.js
@@ -0,0 +1,91 @@
+import { defineStore } from "pinia";
+import { ref, watch } from "vue";
+
+export const useSettings = defineStore("settings", () => {
+  const initialSettings = localStorage.getItem("settings");
+  const settings = ref(
+    initialSettings
+      ? JSON.parse(initialSettings)
+      : {
+          resolution: {
+            width: 1920,
+            height: 1080,
+          },
+          carousel: true,
+          carouselTime: 30, // s
+          carouselPages: ["3d", "data", "realtime", "alert", "announcement"],
+          fullscreen: false,
+          eqStatus: true,
+        }
+  );
+
+  const clearFullscreenFlag = (e) => {
+    if (!document.fullscreenElement) {
+      settings.value.fullscreen = false;
+    }
+  };
+
+  watch(
+    () => settings.value.fullscreen,
+    (val) => {
+      // const mainContainer = document.getElementById("main-container");
+      const mainContainer = document.documentElement;
+      if (val) {
+        mainContainer.requestFullscreen().then(() => {
+          document.removeEventListener("fullscreenchange", clearFullscreenFlag);
+          document.addEventListener("fullscreenchange", clearFullscreenFlag);
+        });
+        return;
+      }
+      if (document.fullscreenElement) document.exitFullscreen();
+    }
+  );
+
+  watch(
+    () => settings.value,
+    (val) => {
+      localStorage.setItem("settings", JSON.stringify(val));
+    },
+    {
+      immediate: true,
+      deep: true,
+    }
+  );
+
+  function rewriteSettings(payload) {
+    settings.value = payload;
+  }
+
+  function updateSettings({ type, value }) {
+    switch (type) {
+      case "carousel":
+        settings.value.carousel = !settings.value.carousel;
+        break;
+      case "fullscreen":
+        settings.value.fullscreen = !settings.value.fullscreen;
+        break;
+      case "eq":
+        settings.value.eqStatus = !settings.value.eqStatus;
+        break;
+      case "resolution":
+        settings.value.resolution.height = value.height;
+        settings.value.resolution.width = value.width;
+        break;
+      case "carousel-page":
+        const exists = settings.value.carouselPages.includes(value);
+        if (exists)
+          settings.value.carouselPages = settings.value.carouselPages.filter(
+            (page) => page !== value
+          );
+        else {
+          settings.value.carouselPages.splice(
+            ["3d", "data", "realtime", "alert", "announcement"].indexOf(value),
+            0,
+            value
+          );
+        }
+        break;
+    }
+  }
+  return { settings, updateSettings, rewriteSettings };
+});
--- a/src/style.css
+++ b/src/style.css
@@ -1,4 +1,9 @@
 * {
  box-sizing: border-box;
  margin: 0;
+  font-family: '黑体', Arial, Helvetica, sans-serif;
 }
+
+html, body {
+  height: 100%;
+}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	d77506ed31	update carosul	2024-03-21 17:05:20 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	f03cf59e73	update 环	2024-03-21 15:18:50 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	c2e901e4bc	Merge branch 'master' of http://git.picaiba.com/g7hoo/chenzhou	2024-03-21 10:48:24 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	8cf50b9cb9	1	2024-03-21 10:47:49 +08:00
gtz	04e98ab1db	管理端备份	2024-03-21 10:31:12 +08:00
gtz	347e51e9a4	Merge branch 'master' of git.picaiba.com:g7hoo/chenzhou	2024-03-21 10:30:57 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	fe7b34615a	1	2024-03-21 10:30:40 +08:00
gtz	1b0746cc2d	Merge branch 'master' of git.picaiba.com:g7hoo/chenzhou	2024-03-20 11:45:43 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	c992fa0200	1	2024-03-20 11:22:50 +08:00
gtz	b97532e4e1	Merge branch 'master' of git.picaiba.com:g7hoo/chenzhou	2024-03-20 10:43:12 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	82573307e9	1	2024-03-20 10:36:40 +08:00
gtz	20f5cec3e9	Merge branch 'master' of git.picaiba.com:g7hoo/chenzhou	2024-03-20 10:32:32 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	67d59c5693	1	2024-03-20 10:30:30 +08:00
gtz	43f7ccac4c	Merge branch 'master' of git.picaiba.com:g7hoo/chenzhou	2024-03-20 10:23:40 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	55947ceb16	update	2024-03-20 09:18:16 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	fccd2ab9cc	1	2024-03-19 16:53:05 +08:00
gtz	e44b2b5f5b	Merge branch 'master' of git.picaiba.com:g7hoo/chenzhou	2024-03-19 16:47:46 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	43a6f59afe	update chart	2024-03-19 16:43:08 +08:00
gtz	aeb43c8d41	Merge branch 'master' of git.picaiba.com:g7hoo/chenzhou	2024-03-19 15:58:00 +08:00
gtz	5652cff730	1	2024-03-19 15:57:57 +08:00
Melete	f66b3a8a7a	update	2024-03-18 19:58:42 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	476b936660	conflict	2024-03-18 17:16:30 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	59c652c3cf	add 导航 & update chart样式 & update 横坐标倾斜	2024-03-18 17:14:20 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	bb7f77e3ac	add 导航 & update chart样式	2024-03-18 17:13:41 +08:00
gtz	e306b0f837	1	2024-03-16 10:12:01 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	85cc0c4c43	update alert list 3d info	2024-03-15 16:08:48 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	cfcdf4eb0a	1	2024-03-15 14:49:00 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	bb44001961	update	2024-03-14 17:06:53 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	f9fc8e8c66	1	2024-03-13 16:08:09 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	d56efd1c2f	update main-screen glass	2024-03-11 09:43:50 +08:00
$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
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	9c3b9218d2	1	2024-03-05 17:00:30 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	52a9111a19	update websocket and store	2024-03-05 16:42:21 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	8ff6fd02df	update main-screen	2024-03-05 14:15:31 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	1b33520b61	1	2024-03-05 10:58:38 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	335f61c0a1	update charts	2024-03-05 10:24:45 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	fb4c1500e7	update bg	2024-02-29 15:23:31 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	8d30507f1b	update	2024-02-28 17:02:33 +08:00
gtz	ae7adebae0	Merge branch 'master' of git.picaiba.com:g7hoo/chenzhou	2024-02-28 16:51:57 +08:00
gtz	ae3c430d38	1	2024-02-28 16:51:52 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	23bf4790df	add 2 extra pages	2024-02-28 16:07:44 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	544e42ac83	bugfix	2024-02-28 15:14:02 +08:00
gtz	d4001ed86e	Merge branch 'master' of git.picaiba.com:g7hoo/chenzhou	2024-02-27 16:00:17 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	ca35a1768d	update init settings	2024-02-27 15:59:54 +08:00
gtz	9cdd255947	1	2024-02-27 15:52:28 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	1c4ce804ff	done 本月班组情况	2024-01-31 11:22:01 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	da305dbba9	done 本日班组情况	2024-01-31 11:16:39 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	62d3566f29	done 本月生产线情况	2024-01-31 11:04:52 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	7eab7ddebb	done 本日生产线情况	2024-01-31 10:49:56 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	e0da16c903	done latest week	2024-01-31 10:20:34 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	53ead47882	1	2024-01-30 17:00:44 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	31f427789f	update 3d--本月班组情况	2024-01-30 15:39:10 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	2a6cb3fe87	update	2024-01-30 14:23:51 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	22f4b99ab1	1	2024-01-30 14:09:40 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	2276c1f9dd	1	2024-01-29 17:03:21 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	85e82a1913	modify	2024-01-29 14:14:06 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	23cb871c93	adjust file structures	2024-01-29 09:21:49 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	7c84ba4595	1	2024-01-26 17:15:51 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	c314f4b78e	update datapage	2024-01-26 16:48:51 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	086be4da66	fix lunbo	2024-01-26 16:38:23 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	259752291c	fix fullscreen	2024-01-26 16:35:51 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	b6b17d1ef0	1	2024-01-26 16:01:56 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	9b3779555c	update 3d	2024-01-26 14:41:37 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	e25dfe8f02	1	2024-01-23 16:49:29 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	98dd4428af	1	2024-01-23 16:32:08 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	8402afcdfc	update fullscreen layout	2024-01-23 15:39:15 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	90c29c141c	solve fullscreen issue	2024-01-23 14:55:16 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	0d96fec181	update status	2024-01-23 11:23:36 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	7bf5a24cda	update names	2024-01-23 10:58:36 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	bc96f76d7f	update	2024-01-23 10:12:39 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	112730b52a	update 上下片数据	2024-01-23 10:08:25 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	733ee07fa7	update chart month	2024-01-22 17:02:38 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	32ae14602e	update team chart day	2024-01-22 16:37:54 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	e7a0d10423	update	2024-01-22 16:29:59 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	ef3c7a422a	update lunbo	2024-01-22 15:36:44 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	e425de93c7	update fullscreen	2024-01-22 15:06:29 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	14991c7ede	setup settings store	2024-01-22 14:23:50 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	71e9204fd4	done announcement	2024-01-22 13:55:27 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	c39a00cac1	update tools \|dialog\|store	2024-01-22 11:25:13 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	3d765b4026	update charts	2024-01-19 16:58:33 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	ac8eb57317	update	2024-01-19 15:24:47 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	d78e93b494	update 3d position	2024-01-19 11:07:06 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	bbc22e41e0	update 3d page	2024-01-18 16:31:50 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	6fa6df4697	暂时保存一下窑炉的那个切换按钮组	2024-01-18 16:14:35 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	b48f3a713c	update chart settings	2024-01-18 15:57:33 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	eac23b3408	add models	2024-01-18 15:37:28 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	283528866a	update alert list	2024-01-18 15:26:24 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	4343b7ed28	update header part	2024-01-18 15:20:05 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	9f5233e062	merge	2024-01-18 11:26:54 +08:00
$DESKTOP-FUDKNA8\znjsz$ DESKTOP-FUDKNA8\znjsz	ae597432c7	update leftside buttons	2024-01-18 11:23:52 +08:00