feature/大屏一改

src/api/bigScreen/index.ts

@@ -54,3 +54,9 @@ export function getOffLineInfo() {
     method: "post",
   });
 }
+export function getStationState() {
+  return request({
+    url: "/api/v1/process/census/station/state",
+    method: "post",
+  });
+}

src/views/report/statistics/screens/common-header.vue

@@ -18,9 +18,9 @@ defineProps({
   align-items: center;
   height: 8vh;
   font-weight: 600;
-  font-size: 5.6vh;
+  font-size: 4.6vh;
   color: #ffffff;
-  line-height: 5.8vh;
+  line-height: 4.6vh;
   background-image: url("@/assets/images/screen_header1.png");
   background-size: 100% 100%;
   background-position: center;

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

@@ -1,6 +1,6 @@
 <template>
   <div :key="viewKey" class="screen-container">
-    <common-header title="工位任务分布" />
+    <common-header title="工位任务分布/防静电监控" />
     <!-- <div
       style="
         width: 100vw;
@@ -18,7 +18,7 @@
       />
     </div> -->
     <div class="screen-content">
-      <TransitionGroup class="rowbox" name="list1" tag="ul">
+      <!-- <TransitionGroup class="rowbox" name="list1" tag="ul">
         <div v-for="(item, index) in showdatas1" :key="item" class="grid-item">
           <title-header :title="item.stationName" />
           <div class="grid-bottom">
@@ -61,6 +61,38 @@
             </div>
           </div>
         </div>
+      </TransitionGroup> -->
+      <TransitionGroup class="rowbox itemBackgroud" name="list1" tag="ul">
+        <title-header :title="'防静电监控'" />
+        <div class="chartsCarouselBox">
+          <div class="carouselHeader tableStyle">
+            <div class="left center1Text">工位名称</div>
+            <div class="right center1Text">状态</div>
+          </div>
+          <div class="carouselBody">
+            <TransitionGroup name="list" tag="ul">
+              <li
+                class="carouselItem tableStyle"
+                :key="item"
+                v-for="item in showData1"
+              >
+                <div class="left infoBackgroud centerText textComent">
+                  {{ item.stationName }}
+                </div>
+                <div
+                  :class="{
+                    outline: item.state === '离线',
+                    error: item.state === '故障',
+                  }"
+                  class="right infoBackgroud centerText textComent"
+                  style="font-weight: bolder"
+                >
+                  {{ item.state }}
+                </div>
+              </li>
+            </TransitionGroup>
+          </div>
+        </div>
       </TransitionGroup>
       <TransitionGroup class="rowbox" name="list2" tag="ul">
         <div v-for="(item, index) in showdatas2" :key="item" class="grid-item">
@@ -157,7 +189,8 @@
 <script setup>
 import CommonHeader from "@/views/report/statistics/screens/common-header.vue";
 import TitleHeader from "@/views/report/statistics/screens/titleHeader.vue";
-import { getStationTaskInfo } from "@/api/bigScreen";
+import { getStationTaskInfo, getStationState } from "@/api/bigScreen";
+const showData1 = ref([]);
 const fontSize = ref(0);
 const setPondNumber = (str) => {
   const number = Number(str).toFixed(2);
@@ -176,7 +209,7 @@ const setFontSize = () => {
   fontSize.value = (window.innerHeight / 100) * 4;
 };
 const datas = ref([]);
-const showdatas1 = ref([]);
+// const showdatas1 = ref([]);
 const showdatas2 = ref([]);
 const showdatas3 = ref([]);
 const getData = async () => {
@@ -189,38 +222,58 @@ const getData = async () => {
 };
 const interval1 = ref(null);
 const sum1 = ref(1);
+const sum2 = ref(1);
+const data1 = ref([]);
+const getData1 = async () => {
+  const { data } = await getStationState();
+  data1.value = data.stationState;
+};
+const setShowData1 = (num, time) => {
+  sum2.value = num;
+  if (data1.value.length > num) {
+    const dataA = JSON.parse(JSON.stringify(data1.value));
+    showData1.value = dataA.splice(0, num);
+    interval1.value = setInterval(async () => {
+      await showData1.value.push(data1.value[sum2.value % data1.value.length]);
+      showData1.value.splice(0, 1);
+      sum2.value = sum2.value + 1;
+    }, time);
+  } else {
+    showData1.value = data1.value;
+  }
+};
 const setShowDatas = async (time) => {
-  if (datas.value.length > 9) {
-    const dataA = JSON.parse(JSON.stringify(datas.value));
+  if (datas.value.length > 6) {
+    // const dataA = JSON.parse(JSON.stringify(datas.value));
     const dataB = JSON.parse(JSON.stringify(datas.value));
     const dataC = JSON.parse(JSON.stringify(datas.value));
-    showdatas1.value = dataA.splice(0, 3);
-    showdatas2.value = dataB.splice(3, 3);
-    showdatas3.value = dataC.splice(6, 3);
+    // showdatas1.value = dataA.splice(0, 3);
+    showdatas2.value = dataB.splice(0, 3);
+    showdatas3.value = dataC.splice(3, 3);
     setNumber(1750);
     interval1.value = setInterval(async () => {
-      showdatas1.value.push(
-        datas.value[(sum1.value + 2) % (datas.value.length - 1)]
-      );
+      // showdatas1.value.push(
+      //   datas.value[(sum1.value + 2) % (datas.value.length - 1)]
+      // );
       showdatas2.value.push(
-        datas.value[(sum1.value + 5) % (datas.value.length - 1)]
+        datas.value[(sum1.value + 2) % (datas.value.length - 1)]
       );
       showdatas3.value.push(
-        datas.value[(sum1.value + 8) % (datas.value.length - 1)]
+        datas.value[(sum1.value + 5) % (datas.value.length - 1)]
       );
-      showdatas1.value.splice(0, 1);
+      // showdatas1.value.splice(0, 1);
       showdatas2.value.splice(0, 1);
       showdatas3.value.splice(0, 1);
       setNumber(0);
       sum1.value = sum1.value + 1;
     }, time);
   } else {
-    const dataA = JSON.parse(JSON.stringify(datas.value));
+    // const dataA = JSON.parse(JSON.stringify(datas.value));
     const dataB = JSON.parse(JSON.stringify(datas.value));
     const dataC = JSON.parse(JSON.stringify(datas.value));
-    showdatas1.value = dataA.splice(0, 3);
-    showdatas2.value = dataB.splice(3, 3);
-    showdatas3.value = dataC.splice(6, 3);
+    // showdatas1.value = dataA.splice(0, 3);
+    showdatas2.value = dataB.splice(0, 3);
+    showdatas3.value = dataC.splice(3, 3);
     setNumber(2000);
   }
 };
@@ -352,12 +405,12 @@ const setTimeOutFnc = (array, num, time) => {
   }, time);
 };
 const setNumber = (time) => {
-  if (showdatas1.value.length > 0) {
-    showdatas1.value.forEach((item, index) => {
-      setTimeOutFnc(completeNumConfigs.value[index], item.completeNum, time);
-      setTimeOutFnc(taskNumConfigs.value[index], item.taskNum, time);
-    });
-  }
+  // if (showdatas1.value.length > 0) {
+  //   showdatas1.value.forEach((item, index) => {
+  //     setTimeOutFnc(completeNumConfigs.value[index], item.completeNum, time);
+  //     setTimeOutFnc(taskNumConfigs.value[index], item.taskNum, time);
+  //   });
+  // }
   if (showdatas2.value.length > 0) {
     showdatas2.value.forEach((item, index) => {
       setTimeOutFnc(
@@ -391,6 +444,8 @@ onMounted(async () => {
   window.addEventListener("resize", checkFullscreen);
   setFontSize();
   await getData();
+  await getData1();
+  setShowData1(17, 2000);
   setShowDatas(5000);
 });
 onUnmounted(() => {
@@ -399,7 +454,102 @@ onUnmounted(() => {
 </script>
 
 <style lang="scss" scoped>
+.outline {
+  background-color: rgb(80, 83, 90) !important;
+}
+.error {
+  background-color: rgb(219, 72, 72) !important;
+}
+.centerText {
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 1.7vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 0.3vh;
+  font-weight: 100 !important;
+}
+.textComent {
+  white-space: nowrap; /* 不允许换行 */
+  overflow: hidden; /* 超出长度时隐藏 */
+  text-overflow: ellipsis; /* 超出部分显示省略号 */
+}
+.itemBackgroud {
+  background-color: rgba(0, 0, 0, 0.6);
+  padding: 2vh;
+  border-radius: 2vh;
+}
+.infoBackgroud {
+  background-color: rgba(255, 255, 255, 0.05);
+}
+.tableStyle {
+  display: flex;
+  justify-content: space-between;
+  width: 30vw;
+  .left {
+    width: 83%;
+  }
+
+  .right {
+    width: 16%;
+  }
+}
+.center1Text {
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 1.7vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 0.3vh;
+}
+.chartsCarouselBox {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  .carouselHeader {
+    height: calc(2vh);
+    line-height: 2vh;
+    margin-bottom: 0.5vh;
+  }
+  .carouselBody {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    overflow: hidden;
+    .carouselItem {
+      margin-bottom: 0.5vh;
+      height: 3.9vh;
+    }
+  }
+}
+.infoItemBody {
+  width: 100%;
+  height: 60%;
+  display: flex;
+  flex-direction: column;
+  padding: 0.8vw;
+  .chartsBox {
+    flex: 1;
+    position: relative;
+  }
+}
 //动画配置
+.list-move,
+.list-enter-active,
+.list-leave-active {
+  transition: all 1s ease;
+}
+.list-enter-from,
+.list-leave-to {
+  opacity: 0;
+  transform: scaleY(0) translateY(-4.6vh);
+}
+.list-leave-active {
+  position: absolute;
+}
 .list1-move,
 .list1-enter-active {
   transition: all 0.75s ease;
@@ -485,6 +635,7 @@ onUnmounted(() => {
     display: flex;
     flex-direction: column;
     align-items: center;
+    justify-content: space-between;
   }
   .grid-item {
     height: 100%;
@@ -495,7 +646,6 @@ onUnmounted(() => {
     padding: 2vh 1vh;
     width: 31vw;
     height: 25vh;
-    margin-bottom: 3vh;
 
     .grid-bottom {
       display: flex;