增加全局interval hook。线存库存大屏。一体仿真大屏增加循环调用逻辑。

.env.development

@@ -11,6 +11,6 @@ VITE_APP_BASE_API = '/dev-api'
 VITE_APP_UPLOAD_URL = 'http://192.168.101.4:9000'
 # 开发接口地址
 #VITE_APP_API_URL = 'http://192.168.101.4:8078'
-VITE_APP_API_URL = 'http://192.168.101.178:8078'
+VITE_APP_API_URL = 'http://192.168.101.4:8078'
 # 是否启用 Mock 服务
 VITE_MOCK_DEV_SERVER = false

src/api/bigScreen/index.ts

@@ -54,6 +54,14 @@ export function getOffLineInfo() {
     method: "post",
   });
 }
+// 线边库库存统计数据
+export function getLineSideStock() {
+  return request({
+    url: "/api/v1/process/census/stock/info",
+    method: "post",
+  });
+}
+
 export function getStationState() {
   return request({
     url: "/api/v1/process/census/station/state",

src/hooks/timeInterval.ts

@@ -0,0 +1,18 @@
+import { onMounted, onUnmounted, ref } from "vue";
+
+export function useTimeInterval(callback, delay = 300000) {
+  const intervalId = ref(null);
+
+  onMounted(() => {
+    // 设置定时器，每5分钟（300000毫秒）执行一次回调函数
+    callback();
+    intervalId.value = setInterval(callback, delay);
+  });
+
+  onUnmounted(() => {
+    // 组件卸载时清除定时器
+    if (intervalId.value) {
+      clearInterval(intervalId.value);
+    }
+  });
+}

src/router/index.ts

@@ -63,6 +63,11 @@ export const constantRoutes: RouteRecordRaw[] = [
     path: "/lineScreen",
     component: () => import("@/views/report/statistics/screens/line/index.vue"),
   },
+  {
+    path: "/repertoryStatistic",
+    component: () =>
+      import("@/views/report/statistics/screens/repertoryStatistic/index.vue"),
+  },
   // 外部链接
   // {
   //   path: "/external-link",

src/views/report/statistics/screens/line/index.vue

@@ -173,7 +173,7 @@
           <TitleHeaderB title="今日报故" />
           <div class="titleInfo">
             <div class="infoItem">
-              <div class="leftItem">工位名称</div>
+              <div class="leftItem">物料名称</div>
               <div class="rightItem">报故数量</div>
             </div>
           </div>
@@ -224,6 +224,7 @@ import {
 } from "@/api/bigScreen";
 import Middle3D from "./middle3D.vue";
 import moment from "moment";
+import { useTimeInterval } from "@/hooks/timeInterval";
 const fontSize = ref(0);
 const scrollbarRef1 = ref(null);
 const ShowScrollRef1 = ref(null);
@@ -389,16 +390,21 @@ const setChart1Option = () => {
 onMounted(async () => {
   setFontSize();
   await getData4();
+
+  charts2.value = echarts.init(document.getElementById("charts2"));
+
+  window.addEventListener("resize", function () {
+    charts2.value.resize();
+  });
+});
+
+useTimeInterval(async () => {
   getTodayData();
   getRateArray();
   getDevice();
   getMaterialArray();
   getTodayErrorArray();
-  charts2.value = echarts.init(document.getElementById("charts2"));
   setChart1Option();
-  window.addEventListener("resize", function () {
-    charts2.value.resize();
-  });
 });
 </script>
 

src/views/report/statistics/screens/repertoryStatistic/index.vue

@@ -0,0 +1,212 @@
+<template>
+  <div :key="viewKey" class="screen-container">
+    <common-header title="线边库库存统计" />
+    <div class="screen-content">
+      <div class="chartsCarouselBox itemBackgroud">
+        <div class="carouselHeader tableStyle">
+          <div class="a1 center1Text">物料名称</div>
+          <div class="a2 center1Text">总库存</div>
+          <div class="a2 center1Text">计划用量</div>
+          <div class="a2 center1Text">已使用数</div>
+          <div class="a2 center1Text">库存预警</div>
+        </div>
+        <div class="carouselBody">
+          <TransitionGroup name="list" tag="ul">
+            <li
+              class="carouselItem tableStyle"
+              :key="item"
+              style="height: 9.6vh"
+              v-for="item in showDatas"
+            >
+              <div class="a1 infoBackgroud centerText textComent">
+                {{ item.materialName }}
+              </div>
+              <div class="a2 infoBackgroud centerText textComent">
+                {{ item.allNum }}
+              </div>
+              <div
+                class="a2 infoBackgroud centerText textComent"
+                style="font-weight: bolder"
+              >
+                {{ item.planNum }}
+              </div>
+              <div
+                class="a2 infoBackgroud centerText textComent"
+                style="font-weight: bolder"
+              >
+                {{ item.useNum }}
+              </div>
+              <div
+                class="a2 infoBackgroud centerText textComent"
+                style="font-weight: bolder"
+              >
+                {{ item.warningNum }}
+              </div>
+            </li>
+          </TransitionGroup>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import CommonHeader from "@/views/report/statistics/screens/common-header.vue";
+import { getLineSideStock, getOffLineInfo } from "@/api/bigScreen";
+import { useTimeInterval } from "@/hooks/timeInterval";
+const viewKey = ref(false);
+const checkFullscreen = () => {
+  viewKey.value = !viewKey.value;
+};
+const datas = ref([]);
+const borderRef = ref(null);
+const showDatas = ref([]);
+const interval1 = ref(null);
+const sum1 = ref(1);
+const setShowData1 = (num, time) => {
+  sum1.value = num;
+  if (datas.value.length > num) {
+    const dataA = JSON.parse(JSON.stringify(datas.value));
+    showDatas.value = dataA.splice(0, num);
+    interval1.value = setInterval(async () => {
+      await showDatas.value.push(datas.value[sum1.value % datas.value.length]);
+      showDatas.value.splice(0, 1);
+      sum1.value = sum1.value + 1;
+    }, time);
+  } else {
+    showDatas.value = datas.value;
+  }
+};
+const getListData = async () => {
+  const { data } = await getLineSideStock();
+  datas.value = data;
+};
+
+onMounted(async () => {
+  window.addEventListener("resize", checkFullscreen);
+  borderRef.value?.initWH();
+});
+
+useTimeInterval(async () => {
+  await getListData();
+  setShowData1(8, 3000);
+});
+
+onUnmounted(() => {
+  if (interval1.value) {
+    clearInterval(interval1.value);
+  }
+  document.removeEventListener("resize", checkFullscreen);
+});
+</script>
+
+<style lang="scss" scoped>
+.list-move,
+.list-enter-active,
+.list-leave-active {
+  transition: all 0.5s ease;
+}
+.list-enter-from,
+.list-leave-to {
+  opacity: 0;
+  transform: translateY(-4.6vh);
+}
+.list-leave-active {
+  position: absolute;
+}
+.screen-container {
+  width: 100vw;
+  height: 100vh;
+  background-image: url("@/assets/images/screen_bg_task.png");
+  background-size: cover;
+  background-position: center;
+}
+.itemBackgroud {
+  background-color: rgba(0, 0, 0, 0.6);
+}
+.screen-content {
+  width: 100vw;
+  height: 88vh;
+  margin-top: 2vh;
+  padding: 0 2vh;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  position: relative;
+}
+.tableStyle {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  .left {
+    width: 66%;
+  }
+  .middle {
+    width: 19%;
+  }
+  .right {
+    width: 13%;
+  }
+}
+.centerText {
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 3vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 9.6vh;
+  text-align: center;
+  padding: 0 1vh;
+}
+.center1Text {
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 2vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 0.3vh;
+}
+.infoBackgroud {
+  background-color: rgba(255, 255, 255, 0.05);
+}
+.textComent {
+  white-space: nowrap; /* 不允许换行 */
+  overflow: hidden; /* 超出长度时隐藏 */
+  text-overflow: ellipsis; /* 超出部分显示省略号 */
+}
+.chartsCarouselBox {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 2vh;
+  .carouselHeader {
+    height: calc(3vh);
+    line-height: 3vh;
+    margin-bottom: 0.5vh;
+    .a1 {
+      width: 25vw;
+    }
+    .a2 {
+      width: 17vw;
+    }
+  }
+  .carouselBody {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+
+    .carouselItem {
+      margin-bottom: 0.5vh;
+      width: 96vw;
+      .a1 {
+        width: 25vw;
+        display: inline-block;
+      }
+      .a2 {
+        width: 17vw;
+      }
+    }
+  }
+}
+</style>