update carosul

src/MainPage.vue

@@ -13,7 +13,7 @@ import { useSettings } from "./store/settings";
 
 const props = defineProps(["path"]);
 
-const pages = ['3d', 'data', 'realtime', 'alert', 'announcement']
+const pages = ["3d", "data", "realtime", "alert", "announcement"];
 const currentPage = ref("3d");
 const handlePageChange = (page) => {
   currentPage.value = page;
@@ -23,67 +23,84 @@ const mainContainer = ref(null);
 const store = useSettings();
 const timer = ref(null);
 
-store.$subscribe((mutation, state) => {
+function startCarousel(pages, duration) {
-  // 如果更新了时间
-  if (mutation.events.key == 'carouselTime' && state.settings.carouselTime > 0 && state.settings.carousel) {
   if (timer.value) clearInterval(timer.value);
   timer.value = setInterval(() => {
-      handlePageChange(pages[(pages.indexOf(currentPage.value) + 1) % pages.length])
+    handlePageChange(
-    }, state.settings.carouselTime * 1000);
+      pages[(pages.indexOf(currentPage.value) + 1) % pages.length]
-  } else if (mutation.events.key == 'carousel') {
+    );
+  }, 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) {
-      timer.value = setInterval(() => {
+      startCarousel(pages, state.settings.carouselTime * 1000);
-        handlePageChange(pages[(pages.indexOf(currentPage.value) + 1) % pages.length])
+    } else {
-      }, state.settings.carouselTime * 1000);
+      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])
+      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-1": 1,
-  '/3-2': 2,
+  "/3-2": 2,
-  '/3-3': 11, // 3,
+  "/3-3": 11, // 3,
-  '/3-4': 12,
+  "/3-4": 12,
   // 钢二线
-  '/2-1': 5,
+  "/2-1": 5,
-  '/2-2': 6,
+  "/2-2": 6,
-  '/2-3': 7,
+  "/2-3": 7,
-  '/2-4': 4,
+  "/2-4": 4,
   // 钢一线
-  '/1-1': 9,
+  "/1-1": 9,
-  '/1-2': 10,
+  "/1-2": 10,
-  '/1-3': 3,
+  "/1-3": 3,
-  '/1-4': 8
+  "/1-4": 8,
-}
+};
 
 function handleResolutionChange(width, height) {
-  console.log('document.documentElement', document.documentElement)
+  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)
+    changeScale(mainContainer.value, width, height);
   }
 }
 
@@ -102,23 +119,37 @@ function resetScale(elm) {
   elm.style.transform = "initial";
   elm.style.transformOrigin = "initial";
 }
-
 </script>
 
 <template>
   <div id="main-container" ref="mainContainer" class="main-container">
     <DatetimeTool v-if="currentPage !== 'announcement'" />
-    <Tools v-if="currentPage !== 'announcement'" @change-resolution="handleResolutionChange" />
+    <Tools
+      v-if="currentPage !== 'announcement'"
+      @change-resolution="handleResolutionChange"
+    />
     <AppHeader v-if="currentPage !== 'announcement'" />
-    <AnnoucementPage v-if="currentPage === 'announcement'" class="annoucement-page"
+    <AnnoucementPage
-      @home="() => handlePageChange('3d')" />
+      v-if="currentPage === 'announcement'"
+      class="annoucement-page"
+      @home="() => handlePageChange('3d')"
+    />
     <div v-else class="pages-wrapper">
       <NavMenu @change="handlePageChange" :value="currentPage" />
       <!-- <TriplePage v-if="currentPage === '3d'" :line="pathMap[path] ?? '1'" /> -->
-      <ThreeDimension 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'" />
+      <AlertListPage
-      <RealtimePage v-if="currentPage === 'realtime'" :line="pathMap[path] ?? '1'" />
+        v-if="currentPage === 'alert'"
+        :line="pathMap[path] ?? '1'"
+      />
+      <RealtimePage
+        v-if="currentPage === 'realtime'"
+        :line="pathMap[path] ?? '1'"
+      />
     </div>
   </div>
 </template>

src/components/Chart/YieldChart.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { nextTick, onMounted, ref } from "vue";
+import { nextTick, onMounted, ref, watch } from "vue";
 import * as echarts from "echarts";
 import getOptions from "./yieldOption";
 
@@ -25,10 +25,17 @@ const chart = ref(null);
 const yieldChartRef = ref(null);
 
 function reInitChart() {
-  if (props.displayPlaceholder) return;
+  // if (props.displayPlaceholder) return;
   if (chart.value) chart.value.dispose();
   const _chart = echarts.init(yieldChartRef.value);
-  _chart.setOption(getOptions(props.rawData));
+  _chart.setOption(
+    getOptions(
+      props.rawData ?? {
+        nowProduction: 0,
+        targetProduction: 0,
+      }
+    )
+  );
   chart.value = _chart;
 }
 
@@ -41,8 +48,9 @@ onMounted(() => {
 
 <template>
   <div class="chart yield-chart">
-    <div v-if="displayPlaceholder" class="chart-placeholder"></div>
+    <!-- <div v-if="displayPlaceholder" class="chart-placeholder"></div>
-    <div v-else ref="yieldChartRef" class="chart-container"></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>

src/components/Chart/rateOption.js

@@ -128,7 +128,7 @@ const targetSerie = {
 };
 
 export default (data) => {
-  title.subtext = data?.nowYield == null ? "" : "当前成品率\u2002";
+  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;

src/components/Chart/yieldOption.js

@@ -1,4 +1,5 @@
-const radius = ["55%", "70%"];
+const radius = ["58%", "72%"];
+const radius2 = ["45%", "58%"];
 const grid = {
   top: 0,
   left: 24,
@@ -83,12 +84,65 @@ const dataSerie = {
   ],
 };
 
+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) + '片';
+  // 外圈
+  title.text = data.nowProduction || 0;
   dataSerie.data[0].value = data.nowProduction;
-  dataSerie.data[1].value = data.targetProduction - 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,
@@ -96,8 +150,8 @@ export default (data) => {
     series: [
       // background
       bgSerie,
-      // actual data
       dataSerie,
+      targetSerie,
     ],
   };
 };

src/components/SettingDialog.vue

@@ -1,27 +1,33 @@
 <script setup>
-import { ref } from 'vue';
+import { ref } from "vue";
-import { useSettings } from '../store/settings'
+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')
+  emit("close");
 }
 
 function handleConfirm() {
-    // alert(JSON.stringify(settings, null, 2))
+  if (settings.value.resolution.width < 480)
-    // changeScale(settings.resolution.width, settings.resolution.height)
+    store.settings.resolution.width = 480;
-    if (settings.value.resolution.width < 480) store.settings.resolution.width = 480;
+  if (settings.value.resolution.width > 7680)
-    if (settings.value.resolution.width > 7680) store.settings.resolution.width = 7680;
+    store.settings.resolution.width = 7680;
-    if (settings.value.resolution.height < 270) store.settings.resolution.height = 270;
+  if (settings.value.resolution.height < 270)
-    if (settings.value.resolution.height > 4320) store.settings.resolution.height = 4320;
+    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)
+  emit(
+    "change-resolution",
+    store.settings.resolution.width,
+    store.settings.resolution.height
+  );
 }
 </script>
 
@@ -34,11 +40,130 @@ function handleConfirm() {
         <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" />
+        <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" />
+        <input
+          id="resolution2"
+          type="number"
+          min="270"
+          max="4320"
+          v-model="settings.resolution.height"
+        />
         <span>px</span>
       </div>
       <div class="form-item selector">
@@ -48,8 +173,13 @@ function handleConfirm() {
                     <label for="fullscreen">全屏显示</label>
                 </div> -->
         <div class="opt opt2">
-                    <input type="checkbox" id="status" name="status" :class="[settings.eqStatus ? 'checked' : '']"
+          <input
-                        v-model="settings.eqStatus" />
+            type="checkbox"
+            id="status"
+            name="status"
+            :class="[settings.eqStatus ? 'checked' : '', 'carousel-page']"
+            v-model="settings.eqStatus"
+          />
           <label for="status">设备状态</label>
         </div>
       </div>
@@ -78,10 +208,10 @@ function handleConfirm() {
   height: 422px;
   background: url(../assets/dialog-bg.png) 100% / contain no-repeat;
   z-index: 1001;
-    transition: all .3s ease-out;
+  transition: all 0.3s ease-out;
   display: flex;
   flex-direction: column;
-    gap: 18px;
+  gap: 12px;
   padding: 24px 80px;
 }
 
@@ -91,11 +221,11 @@ function handleConfirm() {
 }
 
 .form-item {
-    margin: 32px 0;
+  margin: 20px 0;
   display: flex;
   gap: 8px;
   color: #fff;
-    font-size: 28px;
+  font-size: 24px;
   letter-spacing: 2px;
   padding: 0 12px;
 }
@@ -105,12 +235,15 @@ function handleConfirm() {
 }
 
 .opt {
-    margin-left: 24px;
   display: flex;
   align-items: center;
   gap: 8px;
 }
 
+.opt2 {
+  font-size: 16px;
+}
+
 .form-item input {
   flex: 1;
   border: none;
@@ -143,7 +276,7 @@ input[type="checkbox"].checked {
 }
 
 input[type="checkbox"].checked::after {
-    content: '\2713';
+  content: "\2713";
   color: #fff;
   font-size: 22px;
   line-height: 24px;
@@ -155,6 +288,28 @@ input[type="checkbox"].checked::after {
   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;
@@ -167,10 +322,10 @@ label {
 
 .btn {
   flex: 1;
-    padding: 18px;
+  padding: 12px;
-    font-size: 28px;
+  font-size: 20px;
   cursor: pointer;
-    letter-spacing: 12px;
+  letter-spacing: 8px;
   background: url(../assets/dialog-button.png) 0 0 / 100% 100% no-repeat;
 }
 
@@ -194,10 +349,10 @@ button {
   background: #0003;
   backdrop-filter: blur(3px);
   z-index: 999;
-    transition: all .3s ease-out;
+  transition: all 0.3s ease-out;
 }
 
-.setting-dialog>h1 {
+.setting-dialog > h1 {
   text-align: center;
   letter-spacing: 24px;
   font-weight: 400;

src/components/datapage/LineMonth.vue

@@ -98,7 +98,6 @@ function loadData(monthlyTarget) {
     <p v-show="!show" class="empty-data-hint">暂无数据</p> -->
     <div class="container-body__h-full">
       <yield-chart
-        :display-placeholder="!displayProductionChart"
         :key="refreshToken + '_yield_chart_linemonth'"
         :raw-data="websocketData"
       />

src/components/datapage/LineToday.vue

@@ -14,10 +14,10 @@ const store = useWsStore();
 onMounted(() => {
   // websocketData.value = loadData([
   //   {
-  //     targetProduction: 120,
+  //     targetProduction: 1220,
-  //     nowProduction: 0,
+  //     nowProduction: 8,
-  //     targetYield: 0,
+  //     targetYield: null,
-  //     nowYield: 10,
+  //     nowYield: null,
   //   },
   // ]);
   websocketData.value = loadData(store.data2.dailyTarget);
@@ -103,7 +103,6 @@ function loadData(dailyTarget) {
     <p v-show="!show" class="empty-data-hint">暂无数据</p> -->
     <div class="container-body__h-full">
       <yield-chart
-        :display-placeholder="!displayProductionChart"
         :key="refreshToken + '_yield_chart_linetoday'"
         :raw-data="websocketData"
       />

src/main.js

@@ -10,7 +10,7 @@ const pinia = createPinia();
 
 setTimeout(() => {
   window.location.reload();
-}, 24 * 60 * 60 * 1000);
+}, 60 * 60 * 1000);
 
 const app = createApp(App);
 app.use(pinia);

src/store/settings.js

@@ -13,6 +13,7 @@ export const useSettings = defineStore("settings", () => {
           },
           carousel: true,
           carouselTime: 30, // s
+          carouselPages: ["3d", "data", "realtime", "alert", "announcement"],
           fullscreen: false,
           eqStatus: true,
         }
@@ -70,6 +71,20 @@ export const useSettings = defineStore("settings", () => {
         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 };