JG-ADMIN-TEMP/src/views/report/statistics/screens/capacity/index.vue

<template>
  <div 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 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.todayNum }}
              </div>
              <div
                class="a2 infoBackgroud centerText textComent"
                style="font-weight: bolder"
              >
                {{ item.allOffNum }}
              </div>
              <div
                class="a2 infoBackgroud centerText textComent"
                style="font-weight: bolder"
              >
                {{ item.orderNum }}
              </div>
              <div
                class="a2 infoBackgroud centerText textComent"
                style="font-weight: bolder"
              >
                {{ item.rate }}
              </div>
              <div
                class="a2 infoBackgroud centerText textComent"
                style="font-weight: bolder"
              >
                {{ item.batchNum }}
              </div>
              <div
                class="a2 infoBackgroud centerText textComent"
                style="font-weight: bolder"
              >
                {{ item.completeBatch }}
              </div>
              <div
                class="a2 infoBackgroud centerText textComent"
                style="font-weight: bolder"
              >
                {{ item.testNum }}
              </div>
            </li>
          </TransitionGroup>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import CommonHeader from "@/views/report/statistics/screens/common-header.vue";
import { getOffLineInfo } from "@/api/bigScreen";
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 getOffLineInfo();
  datas.value = [...data, ...data, ...data];
};
onMounted(async () => {
  borderRef.value?.initWH();
  await getListData();
  setShowData1(8, 3000);
});
onUnmounted(() => {
  if (interval1.value) {
    clearInterval(interval1.value);
  }
});
</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: 9.9vw;
    }
  }
  .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: 9.9vw;
      }
    }
  }
}
</style>