update chart month

update team chart day
update
2024-01-22 17:02:38 +08:00 · 2024-01-22 16:37:54 +08:00 · 2024-01-22 16:29:59 +08:00 · 2024-01-22 15:36:44 +08:00 · 2024-01-22 15:06:29 +08:00 · 2024-01-22 14:23:50 +08:00
19 changed files with 641 additions and 261 deletions
--- a/src/App.vue
+++ b/src/App.vue
@ -14,27 +14,27 @@ if (urlPath.value === "/") {
 useWebsocket(store, urlPath.value);

 // 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);
-  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" :path="urlPath" />
-    <Slider :size="size" @size-change="setSize" />
+    <MainPage :path="urlPath" />
+    <!-- <Slider :size="size" @size-change="setSize" /> -->
  </div>
 </template>

--- a/src/MainPage.vue
+++ b/src/MainPage.vue
@ -9,27 +9,56 @@ import AlertListPage from "./pages/AlertListPage.vue";
 import DataPage from "./pages/DataPage.vue";
 import DatetimeTool from "./components/HeadTime.vue";
 import TriplePage from "./pages/3D.vue";
+import { useSettings } from "./store/settings";

 const props = defineProps(["path"]);
-const pathMap = {
-  '/1-1': 1,
-  '/1-2': 2,
-  '/1-3': 3,
-  '/1-4': 4,
-  '/2-1': 5,
-  '/2-2': 6,
-  '/2-3': 7,
-  '/2-4': 8,
-  '/3-1': 9,
-  '/3-2': 10,
-  '/3-3': 11,
-  '/3-4': 12
-}

+const pages = ['3d', 'data', 'realtime', 'alert']
 const currentPage = ref("3d");
 const handlePageChange = (page) => {
  currentPage.value = page;
 };
+
+
+const { settings } = useSettings();
+const timer = ref(null);
+watch(() => settings.carousel, val => {
+  if (val) {
+    timer.value = setInterval(() => {
+      handlePageChange(pages[(pages.indexOf(currentPage.value) + 1) % pages.length])
+    }, settings.carouselTime);
+    return;
+  }
+  clearInterval(timer.value);
+  timer.value = null;
+})
+
+watch(() => settings.carouselTime, val => {
+  if (val > 0) {
+    if (timer.value) clearInterval(timer.value);
+    timer.value = setInterval(() => {
+      handlePageChange(pages[(pages.indexOf(currentPage.value) + 1) % pages.length])
+    }, val);
+  }
+})
+
+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
+}
 </script>

 <template>
@ -37,13 +66,10 @@ const handlePageChange = (page) => {
    <DatetimeTool v-if="currentPage !== 'announcement'" />
    <Tools v-if="currentPage !== 'announcement'" />
    <AppHeader v-if="currentPage !== 'announcement'" />
-    <AnnoucementPage
-      v-if="currentPage === 'announcement'"
-      class="annoucement-page"
-      @home="() => handlePageChange('3d')"
-    />
+    <AnnoucementPage v-if="currentPage === 'announcement'" class="annoucement-page"
+      @home="() => handlePageChange('3d')" />
    <div v-else class="pages-wrapper">
-      <NavMenu @change="handlePageChange" />
+      <NavMenu @change="handlePageChange" :value="currentPage" />
      <TriplePage v-if="currentPage === '3d'" :line="pathMap[path] ?? '1'" />
      <DataPage v-if="currentPage === 'data'" />
      <AlertListPage v-if="currentPage === 'alert'" />
--- a/src/assets/menu_icon/IconBack.vue
+++ b/src/assets/menu_icon/IconBack.vue
@ -43,7 +43,7 @@ defineProps({
          <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-btn"
-            fill="#50A1EC"
+            :fill="color ?? '#50A1EC'"
          ></path>
        </g>
      </g>
--- 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/HourChart.vue
+++ b/src/components/HourChart.vue
@ -9,19 +9,32 @@ const store = useWsStore();
 const chartChart = ref(null);
 const chart = ref(null);
 // 小时数据
-const hourData = ref([]);
+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) => {
-  console.log("=======>", state.data2.lineHourList?.length);
+  // console.log("[HourChart] =======>", state.data2.lineHourList?.length);
  if (
    state.data2.lineHourList == undefined ||
    state.data2.lineHourList?.length == 0
  ) {
+    // console.log("[HourChart] 清除数据");
    hourData.value.splice(0);
    if (chart.value) chart.value.dispose();
    return;
  }
-  console.log("lineHourList ===> ", state.data2.lineHourList);
-  hourData.value = (state.data2?.lineHourList ?? []).map((item, index) => ({
+  // console.log("[HourChart]  ===> 有数据: ", state.data2.lineHourList);
+  hourData.value = (state.data2?.lineHourList ?? [
+    // { lineName: '001', hour: '00:00', num: 10 },
+    // { lineName: '002', hour: '00:20', num: 20 },
+    // { lineName: '003', hour: '00:30', num: 30 },
+    // { lineName: '004', hour: '00:40', num: 14 },
+    // { lineName: '005', hour: '00:50', num: 50 },
+  ]).map((item, index) => ({
    id: `${item.lineName}_${index}`,
    hour: item.hour || `${index}`.padStart(2, "0"),
    data: item.num || Math.floor(Math.random() * 100),
@ -33,6 +46,7 @@ function setupChart() {
  if (chart.value) chart.value.dispose();
  nextTick(() => {
    chart.value = echarts.init(chartChart.value);
+    // console.log("[HourChart]  ===> 设置chart: ", chart.value, hourData.value.map((item) => item.hour), hourData.value.map((item) => item.data));
    chartSetup(
      chart.value,
      hourData.value.map((item) => item.hour),
@ -64,11 +78,7 @@ onMounted(() => {

 <template>
  <Container class="chart" title="小时数据" icon="cube">
-    <div
-      ref="chartChart"
-      class="chart-chart"
-      style="{opacity: (hourData && hourData.length > 0) ? 1 : 0}"
-    ></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>
@ -80,9 +90,6 @@ onMounted(() => {
  height: 300px;
 }

-.chart-inner {
-}
-
 .chart-chart {
  height: 100%;
 }
--- a/src/components/HourChartOptions.js
+++ b/src/components/HourChartOptions.js
@ -1,9 +1,9 @@
 export const options = {
  grid: {
-    top: "10",
-    bottom: "10",
-    left: "10",
-    right: "10",
+    top: 10,
+    bottom: 0,
+    left: 12,
+    right: 10,
    containLabel: true,
  },
  xAxis: {
@ -43,8 +43,10 @@ export const options = {
  },
  series: [
    {
-      data: Array.from({ length: 7 }, () => Math.random() * 100),
+      data: [],
+      // data: Array.from({ length: 7 }, () => Math.random() * 100),
      type: "bar",
+      // barWidth: 20,
      showBackground: true,
      backgroundStyle: {
        color: "rgba(180, 180, 180, 0.2)",
--- 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,6 +59,7 @@ const handleClick = (page) => {
  position: relative;
  top: 72px;
  left: 0;
+  z-index: 10;
 }

 .flex-list {
@ -92,8 +98,9 @@ li {
  text-shadow: 0 5px 1px #001124;
  /* text-shadow: 0 5px 1px #004969; */
 }
+
 .nav-menu button:hover>span {
-  color: #b1daff;
+  color: #b1daff !important;
 }
 </style>

@ -105,5 +112,4 @@ li {
 .nav-menu button:hover>.nav-icon #announce-main,
 .nav-menu button:hover>.nav-icon #chart-main {
  fill: #b1daff !important;
-}
-</style>
+}</style>
--- a/src/components/RealtimeTable.vue
+++ b/src/components/RealtimeTable.vue
@ -58,7 +58,7 @@ store.$subscribe((mutation, state) => {

 <style scoped>
 .realtime-table {
-  background: #00f3;
+  /* background: #00f3; */
  height: 160px;
  width: 80%;
  align-self: self-start;
--- a/src/components/SettingDialog.vue
+++ b/src/components/SettingDialog.vue
@ -1,21 +1,18 @@
 <script setup>
-import { ref } from 'vue';
+import { useSettings } from '../store/settings'
+
 const emit = defineEmits(["close"]);
-const setting = ref({
-    resolution: {
-        width: null,
-        height: null
-    },
-    carousel: null,
-    fullscreen: false,
-    status: false,
-});
+const { settings, changeScale } = useSettings();

 function handleCancel() {
    emit('close')
 }

-function handleConfirm() { }
+function handleConfirm() {
+    // alert(JSON.stringify(settings, null, 2))
+    changeScale(settings.resolution.width, settings.resolution.height)
+    emit('close')
+}
 </script>

 <template>
@ -24,25 +21,25 @@ function handleConfirm() { }
        <div class="main-content">
            <div class="form-item">
                <label for="carousel">轮播时间</label>
-                <input id="carousel" type="number" v-model="setting.carousel" />
+                <input id="carousel" type="number" v-model="settings.carouselTime" />
                <span>秒</span>
            </div>
            <div class="form-item">
                <label for="resolution1">分辨率</label>
-                <input id="resolution1" type="number" v-model="setting.resolution.width" />
+                <input id="resolution1" type="number" v-model="settings.resolution.width" />
                <span>X</span>
-                <input id="resolution2" type="number" v-model="setting.resolution.height" />
+                <input id="resolution2" type="number" 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="[setting.fullscreen ? 'checked' : '']"
-                        v-model="setting.fullscreen" />
+                    <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="[setting.status ? 'checked' : '']"
-                        v-model="setting.status" />
+                    <input type="checkbox" id="status" name="status" :class="[settings.eqStatus ? 'checked' : '']"
+                        v-model="settings.eqStatus" />
                    <label for="status">设备状态</label>
                </div>
            </div>
--- a/src/components/TeamChartDay.vue
+++ b/src/components/TeamChartDay.vue
@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted } from "vue";
+import { ref, onMounted, nextTick } from "vue";
 import * as echarts from "echarts";
 import Container from "./Base/Container.vue";
 import { useWsStore } from "../store";
@ -11,18 +11,17 @@ const chart = ref(null);

 const dayData = ref([]);
 store.$subscribe((mutation, state) => {
+  console.log("[ChartDay]  ===>  state: ", state.data2.classTodayProductYield);
  if (
    state.data2.classTodayProductYield == undefined ||
    state.data2.classTodayProductYield?.length == 0
  ) {
+    console.log("[ChartDay]  ===>  清除状态");
    dayData.value.splice(0);
    if (chart.value) chart.value.dispose();
    return;
  }
-  console.log(
-    "classTodayProductYield ===> ",
-    state.data2.classTodayProductYield
-  );
+
  for (let i = 0; i < state.data2.classTodayProductYield.length; ++i) {
    if (state.data2.classTodayProductYield[i].teamName == "A组") {
      dayData.value[0] = parseInt(state.data2.classTodayProductYield[i].yield);
@ -32,9 +31,16 @@ store.$subscribe((mutation, state) => {
      dayData.value[2] = parseInt(state.data2.classTodayProductYield[i].yield);
    }
  }
+  console.log("[ChartDay]  ===>  dayData: ", dayData.value);
  setupChart();
 });

+// onMounted(() => {
+//   nextTick(() => {
+//     setupChart();
+//   })
+// })
+
 function setupChart() {
  if (chart.value) chart.value.dispose();
  nextTick(() => {
@ -50,11 +56,7 @@ onMounted(() => {

 <template>
  <Container class="chart" title="本日班组情况" icon="cube">
-    <div
-      ref="chartChart"
-      class="chart-chart"
-      style="{opacity: (dayData && dayData.length > 0) ? 1 : 0}"
-    ></div>
+    <div ref="chartChart" class="chart-chart" style="{opacity: (dayData && dayData.length > 0) ? 1 : 0}"></div>
    <p v-show="!dayData || dayData.length === 0" class="empty-data-hint">
      暂无数据
    </p>
@ -66,9 +68,6 @@ onMounted(() => {
  height: 300px;
 }

-.chart-inner {
-}
-
 .chart-chart {
  height: 100%;
 }
--- a/src/components/TeamChartDayOptions.js
+++ b/src/components/TeamChartDayOptions.js
@ -1,16 +1,22 @@
 export const options = {
+  color: ['#ffd601', '#72340b'],
  grid: {
-    top: "10",
-    bottom: "10",
-    left: "10",
-    right: "10",
+    top: 10,
+    bottom: 0,
+    left: 0,
+    right: 28,
    containLabel: true,
  },
  xAxis: {
    max: 100,
+    splitLine: {
+      lineStyle: {
+        color: "#fff2",
+      },
+    },
    axisLabel: {
-      fontSize: 22,
-      color: "#e5e5e533",
+      fontSize: 16,
+      color: "#e5e5e5a3",
    },
  },
  yAxis: {
@ -21,28 +27,28 @@ export const options = {
    animationDurationUpdate: 300,
    max: 2, // only the largest 3 bars will be displayed
    axisLabel: {
-      fontSize: 22,
-      color: "#e5e5e533",
+      fontSize: 16,
+      color: "#e5e5e5a3",
    },
    splitLine: {
-      show: false,
-      color: "#e5e5e533",
+      lineStyle: {
+        color: "#e5e5e5",
+      },
    },
  },
  series: [
    {
      realtimeSort: true,
-      name: "X",
      type: "bar",
-      data: [10, 20, 30],
+      // data: [10, 20, 30],
+      data: [],
      label: {
        show: true,
        position: "right",
        valueAnimation: true,
        formatter: "{c}%",
-        color: "#fff8",
-        fontWeight: "bold",
-        fontSize: 22,
+        color: "#fff",
+        fontSize: 16,
      },
    },
  ],
--- a/src/components/TeamChartMonth.vue
+++ b/src/components/TeamChartMonth.vue
@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted } from "vue";
+import { ref, onMounted, nextTick } from "vue";
 import * as echarts from "echarts";
 import Container from "./Base/Container.vue";
 import { useWsStore } from "../store";
@ -11,24 +11,35 @@ const chart = ref(null);

 const monthData = ref(null);
 store.$subscribe((mutation, state) => {
+  console.log("[ChartMonth]  ===>  state: ", state.data2.monthlyTarget);
  if (
    state.data2.monthlyTarget == undefined ||
    state.data2.monthlyTarget?.length == 0
  ) {
+    console.log("[ChartMonth]  ===>  清除状态");
    monthData.value = null;
    if (chart.value) chart.value.dispose();
    return;
  }
-  console.log("monthlyTarget ===> ", state.data2.monthlyTarget);
+
+  if (!state.data2.monthlyTarget[0]) return;
  const { targetProduction, nowProduction, targetYield, nowYield } =
    state.data2.monthlyTarget[0];
  monthData.value = { targetProduction, nowProduction, targetYield, nowYield };
  setupChart();
 });

+
+
+// 绿色：24FF5E
+// 黄色：FFB524
+// 红色：FF3737
+
+
 function setupChart() {
  if (chart.value) chart.value.dispose();
  nextTick(() => {
+    console.log("[ChartMonth]  ===>  初始化表格: ", monthData.value);
    chart.value = echarts.init(chartChart.value);
    setupFn(chart.value, monthData.value);
  });
@ -36,16 +47,15 @@ function setupChart() {

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

 <template>
  <Container class="chart" title="本月班组情况" icon="cube">
-    <div
-      ref="chartChart"
-      class="chart-chart"
-      style="{opacity: (monthData) ? 1 : 0}"
-    ></div>
+    <div ref="chartChart" class="chart-chart" style="{opacity: (monthData) ? 1 : 0}"></div>
    <p v-show="!monthData" class="empty-data-hint">暂无数据</p>
  </Container>
 </template>
@ -55,8 +65,7 @@ onMounted(() => {
  height: 300px;
 }

-.chart-inner {
-}
+.chart-inner {}

 .chart-chart {
  height: 100%;
--- a/src/components/TeamChartMonthOptions.js
+++ b/src/components/TeamChartMonthOptions.js
@ -1,43 +1,49 @@
 export const options = {
  grid: {
-    top: "10%",
-    bottom: "10%",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0
  },
  title: [
    {
      text: "当前产量：" + 100 + " 片",
      left: "27%",
      textAlign: "center",
-      top: "67%",
+      top: "70%",
      textStyle: {
-        fontSize: 12,
+        fontSize: 16,
+        color: '#fffa'
      },
    },
    {
      text: "目标产量：" + 100 + " 片",
      left: "27%",
      textAlign: "center",
-      top: "82%",
+      top: "85%",
      textStyle: {
-        fontSize: 12,
+        fontSize: 16,
+        color: '#fffa'
      },
    },
    {
      text: "当前成品率：" + 22 + "%",
-      left: "73%",
+      left: "72%",
      textAlign: "center",
-      top: "67%",
+      top: "70%",
      textStyle: {
-        fontSize: 12,
+        fontSize: 16,
+        color: '#fffa'
      },
    },
    {
      text: "目标成品率：" + 22 + "%",
-      left: "73%",
+      left: "72%",
      textAlign: "center",
-      top: "82%",
+      top: "85%",
      textStyle: {
-        fontSize: 12,
+        fontSize: 16,
+        color: '#fffa'
      },
    },
  ],
@ -71,7 +77,7 @@ export const options = {
      },
      detail: {
        valueAnimation: true,
-        fontSize: 12,
+        fontSize: 16,
        offsetCenter: [0, "0%"],
        formatter: "{value}%",
        color: "rgba(255, 255, 255, 1)",
@ -113,11 +119,11 @@ export const options = {
      detail: {
        show: true,
        valueAnimation: true,
-        fontSize: 12,
+        fontSize: 16,
        offsetCenter: [0, "0%"],
-        formatter: 0 + "%",
+        // formatter: 0 + "%",
        // formatter: (nowYield / targetYield * 100).toFixed(1) + '%',
-        color: "#fff8",
+        color: "#fff",
      },
      data: [
        {
@ -165,5 +171,6 @@ export default function setup(echartInstance, data) {
  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/Tools.vue
+++ b/src/components/Tools.vue
@ -3,8 +3,10 @@ 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 { settings } = useSettings();

 const visible = ref(false);
 function toHome() {
@ -13,13 +15,22 @@ function toHome() {
 function showDialog() {
  visible.value = true;
 }
+function toggleLunbo() {
+  settings.carousel = !settings.carousel;
+}
 </script>

 <template>
  <div class="tools">
-    <button @click="toHome"><IconBack /></button>
-    <button @click="showDialog"><IconSetting /></button>
-    <button><IconExchange /></button>
+    <button @click="toHome">
+      <IconBack />
+    </button>
+    <button @click="showDialog">
+      <IconSetting />
+    </button>
+    <button @click="toggleLunbo">
+      <IconExchange />
+    </button>
  </div>
  <SettingDialogVue v-if="visible" @close="visible = false;" />
 </template>
@ -67,5 +78,4 @@ button:hover svg #back-btn,
 button:hover svg #setting-btn,
 button:hover svg #switch-btn {
  fill: #b1daff !important;
-}
-</style>
+}</style>
--- a/src/pages/3D.vue
+++ b/src/pages/3D.vue
@ -1,117 +1,277 @@
 <!-- 三维页面 -->
 <script setup>
+import { useSettings } from '../store/settings'
+import { computed } from 'vue';
+const { settings } = useSettings();
 const props = defineProps({
  line: {
-    type: String,
-    default: "1",
+    type: Number,
+    default: 1,
  },
 });
+
+const eqStatus = computed(() => settings.eqStatus);
+console.log('eqStatus', eqStatus.value)
 </script>

 <template>
  <div class="triple-page" :class="['line-' + line]">
-    <div class="info-1" v-if="line == '1'">
-      <div class="info"><h1>M7上片</h1></div>
-      <div class="info"><h1>M6上片</h1></div>
-      <div class="info"><h1>M7磨边机</h1></div>
-      <div class="info"><h1>M6磨边机</h1></div>
-      <div class="info"><h1>M7清洗机</h1></div>
-      <div class="info"><h1>M6清洗机</h1></div>
+    <div class="info-1" v-if="eqStatus && line == '1'">
+      <div class="info">
+        <h1>M7上片</h1>
      </div>
-    <div class="info-2" v-if="line == '2'">
-      <div class="info"><h1>Z7钻孔机</h1></div>
-      <div class="info"><h1>Z6钻孔机</h1></div>
-      <div class="info"><h1>S7清洗机</h1></div>
-      <div class="info"><h1>S6清洗机</h1></div>
-      <div class="info"><h1>S7前储片台</h1></div>
-      <div class="info"><h1>S6前储片台</h1></div>
-      <div class="info"><h1>S7丝印机</h1></div>
-      <div class="info"><h1>S6丝印机</h1></div>
-      <div class="info"><h1>S7固化炉</h1></div>
-      <div class="info"><h1>S6固化炉</h1></div>
-      <div class="info"><h1>S7后储片台</h1></div>
-      <div class="info"><h1>S6后储片台</h1></div>
+      <div class="info">
+        <h1>M6上片</h1>
      </div>
-    <div class="info-3" v-if="line == '3'">
-      <div class="info"><h1>B1前储片台</h1></div>
+      <div class="info">
+        <h1>M7磨边机</h1>
      </div>
-    <div class="info-4" v-if="line == '4'">
-      <div class="info"><h1>B2清洗机</h1></div>
-      <div class="info"><h1>B2下片</h1></div>
-      <div class="info"><h1>B2后储片台</h1></div>
+      <div class="info">
+        <h1>M6磨边机</h1>
      </div>
-    <div class="info-5" v-if="line == '5'">
-      <div class="info"><h1>M5上片</h1></div>
-      <div class="info"><h1>M4上片</h1></div>
-      <div class="info"><h1>M3上片</h1></div>
-      <div class="info"><h1>M5磨边机</h1></div>
-      <div class="info"><h1>M4磨边机</h1></div>
-      <div class="info"><h1>M3磨边机</h1></div>
-      <div class="info"><h1>M5清洗机</h1></div>
-      <div class="info"><h1>M4清洗机</h1></div>
-      <div class="info"><h1>M3清洗机</h1></div>
+      <div class="info">
+        <h1>M7清洗机</h1>
      </div>
-    <div class="info-6" v-if="line == '6'">
-      <div class="info"><h1>Z5钻孔机</h1></div>
-      <div class="info"><h1>Z4钻孔机</h1></div>
-      <div class="info"><h1>Z3钻孔机</h1></div>
-      <div class="info"><h1>S5清洗机</h1></div>
-      <div class="info"><h1>S4清洗机</h1></div>
-      <div class="info"><h1>S3清洗机</h1></div>
-      <div class="info"><h1>S5前储片台</h1></div>
-      <div class="info"><h1>S4前储片台</h1></div>
-      <div class="info"><h1>S3前储片台</h1></div>
-      <div class="info"><h1>S5丝印机</h1></div>
-      <div class="info"><h1>S4丝印机</h1></div>
-      <div class="info"><h1>S3丝印机</h1></div>
+      <div class="info">
+        <h1>M6清洗机</h1>
      </div>
-    <div class="info-7" v-if="line == '7'">
-      <div class="info"><h1>S5后储片台</h1></div>
-      <div class="info"><h1>S4后储片台</h1></div>
-      <div class="info"><h1>S3后储片台</h1></div>
-      <div class="info"><h1>S5固化炉</h1></div>
-      <div class="info"><h1>S4固化炉</h1></div>
-      <div class="info"><h1>S3固化炉</h1></div>
-      <div class="info"><h1>B2前储片台</h1></div>
    </div>
-    <div class="info-8" v-if="line == '8'">
-      <div class="info"><h1>B1前储片台</h1></div>
-      <div class="info"><h1>B1清洗机</h1></div>
-      <div class="info"><h1>B1下片</h1></div>
-      <div class="info"><h1>B1后储片台</h1></div>
+    <div class="info-2" v-if="eqStatus && line == '2'">
+      <div class="info">
+        <h1>Z7钻孔机</h1>
      </div>
-    <div class="info-9" v-if="line == '9'">
-      <div class="info"><h1>M2上片</h1></div>
-      <div class="info"><h1>M1上片</h1></div>
-      <div class="info"><h1>M2磨边机</h1></div>
-      <div class="info"><h1>M1磨边机</h1></div>
-      <div class="info"><h1>M2清洗机</h1></div>
-      <div class="info"><h1>M1清洗机</h1></div>
+      <div class="info">
+        <h1>Z6钻孔机</h1>
      </div>
-    <div class="info-10" v-if="line == '10'">
+      <div class="info">
+        <h1>S7清洗机</h1>
+      </div>
+      <div class="info">
+        <h1>S6清洗机</h1>
+      </div>
+      <div class="info">
+        <h1>S7前储片台</h1>
+      </div>
+      <div class="info">
+        <h1>S6前储片台</h1>
+      </div>
+      <div class="info">
+        <h1>S7丝印机</h1>
+      </div>
+      <div class="info">
+        <h1>S6丝印机</h1>
+      </div>
+      <div class="info">
+        <h1>S7固化炉</h1>
+      </div>
+      <div class="info">
+        <h1>S6固化炉</h1>
+      </div>
+      <div class="info">
+        <h1>S7后储片台</h1>
+      </div>
+      <div class="info">
+        <h1>S6后储片台</h1>
+      </div>
+    </div>
+    <div class="info-3" v-if="eqStatus && line == '3'">
+      <div class="info">
+        <h1>B1前储片台</h1>
+      </div>
+    </div>
+    <div class="info-4" v-if="eqStatus && line == '4'">
+      <div class="info">
+        <h1>B2清洗机</h1>
+      </div>
+      <div class="info">
+        <h1>B2下片</h1>
+      </div>
+      <div class="info">
+        <h1>B2后储片台</h1>
+      </div>
+    </div>
+    <div class="info-5" v-if="eqStatus && line == '5'">
+      <div class="info">
+        <h1>M5上片</h1>
+      </div>
+      <div class="info">
+        <h1>M4上片</h1>
+      </div>
+      <div class="info">
+        <h1>M3上片</h1>
+      </div>
+      <div class="info">
+        <h1>M5磨边机</h1>
+      </div>
+      <div class="info">
+        <h1>M4磨边机</h1>
+      </div>
+      <div class="info">
+        <h1>M3磨边机</h1>
+      </div>
+      <div class="info">
+        <h1>M5清洗机</h1>
+      </div>
+      <div class="info">
+        <h1>M4清洗机</h1>
+      </div>
+      <div class="info">
+        <h1>M3清洗机</h1>
+      </div>
+    </div>
+    <div class="info-6" v-if="eqStatus && line == '6'">
+      <div class="info">
+        <h1>Z5钻孔机</h1>
+      </div>
+      <div class="info">
+        <h1>Z4钻孔机</h1>
+      </div>
+      <div class="info">
+        <h1>Z3钻孔机</h1>
+      </div>
+      <div class="info">
+        <h1>S5清洗机</h1>
+      </div>
+      <div class="info">
+        <h1>S4清洗机</h1>
+      </div>
+      <div class="info">
+        <h1>S3清洗机</h1>
+      </div>
+      <div class="info">
+        <h1>S5前储片台</h1>
+      </div>
+      <div class="info">
+        <h1>S4前储片台</h1>
+      </div>
+      <div class="info">
+        <h1>S3前储片台</h1>
+      </div>
+      <div class="info">
+        <h1>S5丝印机</h1>
+      </div>
+      <div class="info">
+        <h1>S4丝印机</h1>
+      </div>
+      <div class="info">
+        <h1>S3丝印机</h1>
+      </div>
+    </div>
+    <div class="info-7" v-if="eqStatus && line == '7'">
+      <div class="info">
+        <h1>S5后储片台</h1>
+      </div>
+      <div class="info">
+        <h1>S4后储片台</h1>
+      </div>
+      <div class="info">
+        <h1>S3后储片台</h1>
+      </div>
+      <div class="info">
+        <h1>S5固化炉</h1>
+      </div>
+      <div class="info">
+        <h1>S4固化炉</h1>
+      </div>
+      <div class="info">
+        <h1>S3固化炉</h1>
+      </div>
+      <div class="info">
+        <h1>B2前储片台</h1>
+      </div>
+    </div>
+    <div class="info-8" v-if="eqStatus && line == '8'">
+      <div class="info">
+        <h1>B1前储片台</h1>
+      </div>
+      <div class="info">
+        <h1>B1清洗机</h1>
+      </div>
+      <div class="info">
+        <h1>B1下片</h1>
+      </div>
+      <div class="info">
+        <h1>B1后储片台</h1>
+      </div>
+    </div>
+    <div class="info-9" v-if="eqStatus && line == '9'">
+      <div class="info">
+        <h1>M2上片</h1>
+      </div>
+      <div class="info">
+        <h1>M1上片</h1>
+      </div>
+      <div class="info">
+        <h1>M2磨边机</h1>
+      </div>
+      <div class="info">
+        <h1>M1磨边机</h1>
+      </div>
+      <div class="info">
+        <h1>M2清洗机</h1>
+      </div>
+      <div class="info">
+        <h1>M1清洗机</h1>
+      </div>
+    </div>
+    <div class="info-10" v-if="eqStatus && line == '10'">
      <!-- <div class="info"><h1>M2清洗机</h1></div>
    <div class="info"><h1>M1清洗机</h1></div> -->
-      <div class="info"><h1>Z2钻孔机</h1></div>
-      <div class="info"><h1>Z1钻孔机</h1></div>
-      <div class="info"><h1>S2清洗机</h1></div>
-      <div class="info"><h1>S1清洗机</h1></div>
-      <div class="info"><h1>S2前储片台</h1></div>
-      <div class="info"><h1>S1前储片台</h1></div>
-      <div class="info"><h1>S2丝印机</h1></div>
-      <div class="info"><h1>S1丝印机</h1></div>
+      <div class="info">
+        <h1>Z2钻孔机</h1>
      </div>
-    <div class="info-11" v-if="line == '11'">
-      <div class="info"><h1>S7后储片台</h1></div>
-      <div class="info"><h1>S6后储片台</h1></div>
-      <div class="info"><h1>S7固化炉</h1></div>
-      <div class="info"><h1>S6固化炉</h1></div>
-      <div class="info"><h1>B3前储片台</h1></div>
+      <div class="info">
+        <h1>Z1钻孔机</h1>
+      </div>
+      <div class="info">
+        <h1>S2清洗机</h1>
+      </div>
+      <div class="info">
+        <h1>S1清洗机</h1>
+      </div>
+      <div class="info">
+        <h1>S2前储片台</h1>
+      </div>
+      <div class="info">
+        <h1>S1前储片台</h1>
+      </div>
+      <div class="info">
+        <h1>S2丝印机</h1>
+      </div>
+      <div class="info">
+        <h1>S1丝印机</h1>
+      </div>
+    </div>
+    <div class="info-11" v-if="eqStatus && line == '11'">
+      <div class="info">
+        <h1>S7后储片台</h1>
+      </div>
+      <div class="info">
+        <h1>S6后储片台</h1>
+      </div>
+      <div class="info">
+        <h1>S7固化炉</h1>
+      </div>
+      <div class="info">
+        <h1>S6固化炉</h1>
+      </div>
+      <div class="info">
+        <h1>B3前储片台</h1>
+      </div>
+    </div>
+    <div class="info-12" v-if="eqStatus && line == '12'">
+      <div class="info">
+        <h1>B3前储片台</h1>
+      </div>
+      <div class="info">
+        <h1>B3清洗机</h1>
+      </div>
+      <div class="info">
+        <h1>B3下片</h1>
+      </div>
+      <div class="info">
+        <h1>B3后储片台</h1>
      </div>
-    <div class="info-12" v-if="line == '12'">
-      <div class="info"><h1>B3前储片台</h1></div>
-      <div class="info"><h1>B3清洗机</h1></div>
-      <div class="info"><h1>B3下片</h1></div>
-      <div class="info"><h1>B3后储片台</h1></div>
    </div>
  </div>
 </template>
@ -124,7 +284,6 @@ const props = defineProps({
  position: absolute;
  top: 0;
  left: 0;
-  z-index: -1;
  width: 100%;
  height: 100%;
  color: #fff;
@ -151,22 +310,27 @@ const props = defineProps({
  left: 490px;
  bottom: 250px;
 }
+
 .info-1 .info:nth-child(2) {
  left: 790px;
  bottom: 210px;
 }
+
 .info-1 .info:nth-child(3) {
  left: 660px;
  top: 480px;
 }
+
 .info-1 .info:nth-child(4) {
  left: 910px;
  top: 510px;
 }
+
 .info-1 .info:nth-child(5) {
  left: 880px;
  top: 220px;
 }
+
 .info-1 .info:nth-child(6) {
  left: 1100px;
  top: 260px;
@ -177,46 +341,57 @@ const props = defineProps({
  left: 580px;
  bottom: 200px;
 }
+
 .info-2 .info:nth-child(2) {
  left: 940px;
  bottom: 200px;
 }
+
 .info-2 .info:nth-child(3) {
  left: 640px;
  bottom: 360px;
 }
+
 .info-2 .info:nth-child(4) {
  left: 940px;
  bottom: 360px;
 }
+
 .info-2 .info:nth-child(5) {
  left: 660px;
  bottom: 580px;
 }
+
 .info-2 .info:nth-child(6) {
  left: 1060px;
  bottom: 520px;
 }
+
 .info-2 .info:nth-child(7) {
  left: 720px;
  top: 190px;
 }
+
 .info-2 .info:nth-child(8) {
  left: 1100px;
  top: 260px;
 }
+
 .info-2 .info:nth-child(9) {
  left: 800px;
  top: 120px;
 }
+
 .info-2 .info:nth-child(10) {
  left: 1100px;
  top: 144px;
 }
+
 .info-2 .info:nth-child(11) {
  left: 800px;
  top: 10px;
 }
+
 .info-2 .info:nth-child(12) {
  left: 1100px;
  top: 20px;
@ -233,10 +408,12 @@ const props = defineProps({
  left: 580px;
  bottom: 200px;
 }
+
 .info-4 .info:nth-child(2) {
  left: 800px;
  top: 100px;
 }
+
 .info-4 .info:nth-child(3) {
  left: 1240px;
  top: 40px;
@ -247,34 +424,42 @@ const props = defineProps({
  left: 490px;
  bottom: 300px;
 }
+
 .info-5 .info:nth-child(2) {
  left: 740px;
  bottom: 280px;
 }
+
 .info-5 .info:nth-child(3) {
  left: 960px;
  bottom: 240px;
 }
+
 .info-5 .info:nth-child(4) {
  left: 460px;
  bottom: 490px;
 }
+
 .info-5 .info:nth-child(5) {
  left: 760px;
  bottom: 490px;
 }
+
 .info-5 .info:nth-child(6) {
  left: 1060px;
  bottom: 450px;
 }
+
 .info-5 .info:nth-child(7) {
  left: 570px;
  top: 190px;
 }
+
 .info-5 .info:nth-child(8) {
  left: 890px;
  top: 200px;
 }
+
 .info-5 .info:nth-child(9) {
  left: 1190px;
  top: 200px;
@ -286,46 +471,57 @@ const props = defineProps({
  left: 480px;
  bottom: 530px;
 }
+
 .info-6 .info:nth-child(2) {
  left: 720px;
  bottom: 470px;
 }
+
 .info-6 .info:nth-child(3) {
  left: 990px;
  bottom: 460px;
 }
+
 .info-6 .info:nth-child(4) {
  left: 510px;
  top: 260px;
 }
+
 .info-6 .info:nth-child(5) {
  left: 810px;
  top: 260px;
 }
+
 .info-6 .info:nth-child(6) {
  left: 1110px;
  top: 280px;
 }
+
 .info-6 .info:nth-child(7) {
  left: 600px;
  top: 110px;
 }
+
 .info-6 .info:nth-child(8) {
  left: 900px;
  top: 110px;
 }
+
 .info-6 .info:nth-child(9) {
  left: 1200px;
  top: 110px;
 }
+
 .info-6 .info:nth-child(10) {
  left: 650px;
  top: 20px;
 }
+
 .info-6 .info:nth-child(11) {
  left: 950px;
  top: 30px;
 }
+
 .info-6 .info:nth-child(12) {
  left: 1230px;
  top: 20px;
@ -337,26 +533,32 @@ const props = defineProps({
  left: 400px;
  bottom: 440px;
 }
+
 .info-7 .info:nth-child(2) {
  left: 670px;
  bottom: 440px;
 }
+
 .info-7 .info:nth-child(3) {
  left: 960px;
  bottom: 450px;
 }
+
 .info-7 .info:nth-child(4) {
  left: 310px;
  bottom: 260px;
 }
+
 .info-7 .info:nth-child(5) {
  left: 620px;
  bottom: 260px;
 }
+
 .info-7 .info:nth-child(6) {
  left: 1110px;
  bottom: 240px;
 }
+
 .info-7 .info:nth-child(7) {
  left: 800px;
  top: 50px;
@ -367,14 +569,17 @@ const props = defineProps({
  left: 660px;
  bottom: 550px;
 }
+
 .info-8 .info:nth-child(2) {
  left: 990px;
  bottom: 690px;
 }
+
 .info-8 .info:nth-child(3) {
  left: 700px;
  top: 80px;
 }
+
 .info-8 .info:nth-child(4) {
  left: 1100px;
  top: 80px;
@ -385,22 +590,27 @@ const props = defineProps({
  left: 400px;
  bottom: 250px;
 }
+
 .info-9 .info:nth-child(2) {
  left: 1100px;
  bottom: 220px;
 }
+
 .info-9 .info:nth-child(3) {
  left: 496px;
  bottom: 570px;
 }
+
 .info-9 .info:nth-child(4) {
  left: 1100px;
  bottom: 490px;
 }
+
 .info-9 .info:nth-child(5) {
  left: 670px;
  top: 144px;
 }
+
 .info-9 .info:nth-child(6) {
  left: 1100px;
  top: 155px;
@ -411,30 +621,37 @@ const props = defineProps({
  left: 620px;
  bottom: 450px;
 }
+
 .info-10 .info:nth-child(2) {
  left: 1000px;
  bottom: 320px;
 }
+
 .info-10 .info:nth-child(3) {
  left: 736px;
  top: 270px;
 }
+
 .info-10 .info:nth-child(4) {
  left: 1200px;
  top: 330px;
 }
+
 .info-10 .info:nth-child(5) {
  left: 870px;
  top: 144px;
 }
+
 .info-10 .info:nth-child(6) {
  left: 1100px;
  top: 195px;
 }
+
 .info-10 .info:nth-child(7) {
  left: 900px;
  top: 55px;
 }
+
 .info-10 .info:nth-child(8) {
  left: 1200px;
  top: 68px;
@ -445,18 +662,22 @@ const props = defineProps({
  left: 570px;
  bottom: 450px;
 }
+
 .info-11 .info:nth-child(2) {
  left: 1100px;
  bottom: 410px;
 }
+
 .info-11 .info:nth-child(3) {
  left: 436px;
  bottom: 170px;
 }
+
 .info-11 .info:nth-child(4) {
  left: 1036px;
  bottom: 170px;
 }
+
 .info-11 .info:nth-child(5) {
  left: 890px;
  top: 94px;
@ -467,14 +688,17 @@ const props = defineProps({
  left: 570px;
  bottom: 250px;
 }
+
 .info-12 .info:nth-child(2) {
  left: 800px;
  bottom: 80px;
 }
+
 .info-12 .info:nth-child(3) {
  left: 1136px;
  bottom: 670px;
 }
+
 .info-12 .info:nth-child(4) {
  left: 836px;
  top: 70px;
@ -486,56 +710,67 @@ const props = defineProps({
  background-size: 1920px 1080px;
  background-position: 0 -80px;
 }
+
 .line-2 {
  background: url(../assets/model/F2.png) no-repeat;
  background-size: 1920px 1080px;
  background-position: 0 -80px;
 }
+
 .line-3 {
  background: url(../assets/model/F3.png) no-repeat;
  background-size: 1920px 1080px;
  background-position: 0 -80px;
 }
+
 .line-4 {
  background: url(../assets/model/F4.png) no-repeat;
  background-size: 1920px 1080px;
  background-position: 0 -80px;
 }
+
 .line-5 {
  background: url(../assets/model/F5.png) no-repeat;
  background-size: 1920px 1080px;
  background-position: 0 -80px;
 }
+
 .line-6 {
  background: url(../assets/model/F6.png) no-repeat;
  background-size: 1920px 1080px;
  background-position: 0 -80px;
 }
+
 .line-7 {
  background: url(../assets/model/F7.png) no-repeat;
  background-size: 1920px 1080px;
  background-position: 0 -80px;
 }
+
 .line-8 {
  background: url(../assets/model/F8.png) no-repeat;
  background-size: 1920px 1080px;
  background-position: 0 -80px;
 }
+
 .line-9 {
  background: url(../assets/model/F9.png) no-repeat;
  background-size: 1920px 1080px;
  background-position: 0 -80px;
 }
+
 .line-10 {
  background: url(../assets/model/F10.png) no-repeat;
  background-size: 1920px 1080px;
  background-position: 0 -80px;
 }
+
 .line-11 {
  background: url(../assets/model/F11.png) no-repeat;
  background-size: 1920px 1080px;
  background-position: 0 -80px;
 }
+
 .line-12 {
  background: url(../assets/model/F12.png) no-repeat;
  background-size: 1920px 1080px;
--- a/src/pages/AlertListPage.vue
+++ b/src/pages/AlertListPage.vue
@ -30,9 +30,9 @@ alarmList.value = (store.data1.alarmArrList ?? [
 //   }));
 // });

-function handleIgnore() {
-  alarmList.value.splice(0)
-}
+// function handleIgnore() {
+//   alarmList.value.splice(0)
+// }
 </script>

 <template>
--- a/src/pages/AnnouncementPage.vue
+++ b/src/pages/AnnouncementPage.vue
@ -46,10 +46,11 @@ const handleClose = () => {
    </main>
    <div class="announcement-footer">
      <button
+        id="return-btn"
        style="
-          position: absolute;
-          left: 12px;
-          bottom: 28px;
+          position: fixed;
+          right: 32px;
+          top: 56px;
          appearance: none;
          background: transparent;
          border: none;
@ -57,19 +58,25 @@ const handleClose = () => {
        "
        @click="handleClose"
      >
-        <IconBack />
+        <IconBack color="#f00"/>
      </button>
      <ScrollText> {{ 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;
@ -78,6 +85,7 @@ const handleClose = () => {
 .announcement-title {
  color: #fff;
  font-size: 72px;
+  line-height: 144px;
  font-weight: 500;
  letter-spacing: 2px;
  text-align: center;
@ -91,10 +99,11 @@ const handleClose = () => {
  font-family: serif;
  overflow: hidden;
  user-select: none;
+  margin-bottom: 32px;
 }

 .announcement-footer {
-  height: 128px;
+  height: 144px;
  /* background: #ccc1; */
  font-size: 64px;
  padding: 0 80px;
--- a/src/store/index.js
+++ b/src/store/index.js
@ -9,13 +9,13 @@ export const useWsStore = defineStore("wsData", () => {
  function updateData(category, 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 };
      default:
        break;
    }
--- a/src/store/settings.js
+++ b/src/store/settings.js
@ -1,16 +1,72 @@
 import { defineStore } from "pinia";
-import { ref } from "vue";
+import { ref, watch } from "vue";

 export const useSettings = defineStore("settings", () => {
  const settings = ref({
    resolution: {
-      width: null,
-      height: null,
+      width: 1920,
+      height: 1080,
    },
-    carousel: null,
+    carousel: false,
+    carouselTime: 10000, // s
    fullscreen: false,
-    status: false,
+    eqStatus: true,
  });
-  function updateSettings() {}
-  return { settings, updateSettings };
+
+  function changeScale(width, height) {
+    const xScale = width / 1920;
+    const yScale = height / 1080;
+    const style = {
+      transform: `scale(${xScale}, ${yScale})`,
+      transformOrigin: "top left",
+    };
+    document.documentElement.style.transform = style.transform;
+    document.documentElement.style.transformOrigin = style.transformOrigin;
+  }
+
+  function resetScale() {
+    document.documentElement.style.transform = "initial";
+    document.documentElement.style.transformOrigin = "initial";
+  }
+
+  watch(
+    () => settings.value.fullscreen,
+    (val) => {
+      if (val) {
+        document.documentElement.requestFullscreen().then(() => {
+          document.documentElement.style.width = "100vw";
+          document.documentElement.style.height = "100vh";
+          changeScale(
+            document.documentElement.clientWidth,
+            document.documentElement.clientHeight
+          );
+        });
+        return;
+      }
+      document.exitFullscreen().then(resetScale);
+    }
+  );
+
+  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;
+    }
+  }
+  return { settings, updateSettings, rewriteSettings, changeScale };
 });
Author	SHA1	Message	Date
$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