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

<template>
  <div :key="viewKey" class="screen-container">
    <common-header title="工位任务分布/防静电监控" />
    <!-- <div
      style="
        width: 100vw;
        height: 92vh;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
      "
    >
      <dv-border-box1
        ref="borderRef"
        style="width: 66.6%; height: 66.6%; position: absolute"
        :style="{ transform: 'scale(' + 1.5 + ')' }"
      />
    </div> -->
    <div class="screen-content">
      <!-- <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">
            <div class="left-info">
              <div
                class="box"
                style="
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                "
              >
                <div class="title">{{ item.materialName }}</div>
                <div class="code">{{ item.materialModel }}</div>
              </div>
              <div class="box">
                <div style="display: flex; align-items: center">
                  <dv-digital-flop
                    :config="completeNumConfigs[index]"
                    class="flop"
                  />
                  <span class="plan-num">/</span>
                  <dv-digital-flop
                    :config="taskNumConfigs[index]"
                    class="flop"
                  />
                </div>
                <div class="desc">完成数量 / 计划数量</div>
              </div>
            </div>
            <div class="right-chart">
              <dv-water-level-pond
                :config="{
                  data: [setPondNumber(item.rate)],
                  shape: 'round',
                }"
                :key="sum1"
                style="width: 16vh; height: 16vh"
              />
            </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">
          <title-header :title="item.stationName" />
          <div class="grid-bottom">
            <div class="left-info">
              <div
                class="box"
                style="
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                "
              >
                <div class="title">{{ item.materialName }}</div>
                <div class="code">{{ item.materialModel }}</div>
              </div>
              <div class="box">
                <div style="display: flex; align-items: center">
                  <dv-digital-flop
                    :config="completeNumConfigs[index + 3]"
                    class="flop"
                  />
                  <span class="plan-num">/</span>
                  <dv-digital-flop
                    :config="taskNumConfigs[index + 3]"
                    class="flop"
                  />
                </div>
                <div class="desc">完成数量 / 计划数量</div>
              </div>
            </div>
            <div class="right-chart">
              <dv-water-level-pond
                :config="{
                  data: [setPondNumber(item.rate)],
                  shape: 'round',
                }"
                :key="sum1"
                style="width: 16vh; height: 16vh"
              />
            </div>
          </div>
        </div>
      </TransitionGroup>
      <TransitionGroup class="rowbox" name="list3" tag="ul">
        <div v-for="(item, index) in showdatas3" :key="item" class="grid-item">
          <title-header :title="item.stationName" />
          <div class="grid-bottom">
            <div class="left-info">
              <div
                class="box"
                style="
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                "
              >
                <div class="title">{{ item.materialName }}</div>
                <div class="code">{{ item.materialModel }}</div>
              </div>
              <div class="box">
                <div style="display: flex; align-items: center">
                  <dv-digital-flop
                    :config="completeNumConfigs[index + 3]"
                    class="flop"
                  />
                  <span class="plan-num">/</span>
                  <dv-digital-flop
                    :config="taskNumConfigs[index + 3]"
                    class="flop"
                  />
                </div>
                <div class="desc">完成数量 / 计划数量</div>
              </div>
            </div>
            <div class="right-chart">
              <dv-water-level-pond
                :config="{
                  data: [setPondNumber(item.rate)],
                  shape: 'round',
                }"
                :key="sum1"
                style="width: 16vh; height: 16vh"
              />
            </div>
          </div>
        </div>
      </TransitionGroup>
    </div>
  </div>
</template>

<script setup>
import CommonHeader from "@/views/report/statistics/screens/common-header.vue";
import TitleHeader from "@/views/report/statistics/screens/titleHeader.vue";
import { getStationTaskInfo, getStationState } from "@/api/bigScreen";
const showData1 = ref([]);
const fontSize = ref(0);
const setPondNumber = (str) => {
  const number = Number(str).toFixed(2);
  if (number == 1) {
    return 100;
  } else {
    let str = number.toString(); // "0.18"
    let truncated = parseInt(
      str.substring(str.indexOf(".") + 1, str.indexOf(".") + 3)
    );
    return truncated;
  }
};
const viewKey = ref(false);
const setFontSize = () => {
  fontSize.value = (window.innerHeight / 100) * 4;
};
const datas = ref([]);
// const showdatas1 = ref([]);
const showdatas2 = ref([]);
const showdatas3 = ref([]);
const getData = async () => {
  const { data } = await getStationTaskInfo();
  datas.value = [...data];
  // if (datas.value.length < 9) {
  //   completeNumConfigs.value.splice(0, datas.value.length - 1);
  //   taskNumConfigs.value.splice(0, datas.value.length - 1);
  // }
};
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 > 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(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)]
      // );
      showdatas2.value.push(
        datas.value[(sum1.value + 2) % (datas.value.length - 1)]
      );
      showdatas3.value.push(
        datas.value[(sum1.value + 5) % (datas.value.length - 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 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(0, 3);
    showdatas3.value = dataC.splice(3, 3);
    setNumber(2000);
  }
};
const completeNumConfigs = ref([
  {
    number: [0],
    style: {
      fontSize: fontSize,
    },
  },
  {
    number: [0],
    style: {
      fontSize: fontSize,
    },
  },
  {
    number: [0],
    style: {
      fontSize: fontSize,
    },
  },
  {
    number: [0],
    style: {
      fontSize: fontSize,
    },
  },
  {
    number: [0],
    style: {
      fontSize: fontSize,
    },
  },
  {
    number: [0],
    style: {
      fontSize: fontSize,
    },
  },
  {
    number: [0],
    style: {
      fontSize: fontSize,
    },
  },
  {
    number: [0],
    style: {
      fontSize: fontSize,
    },
  },
  {
    number: [0],
    style: {
      fontSize: fontSize,
    },
  },
]);

const taskNumConfigs = ref([
  {
    number: [0],
    style: {
      fontSize: fontSize,
      fill: "#ffffff",
    },
  },
  {
    number: [0],
    style: {
      fontSize: fontSize,
      fill: "#ffffff",
    },
  },
  {
    number: [0],
    style: {
      fontSize: fontSize,
      fill: "#ffffff",
    },
  },
  {
    number: [0],
    style: {
      fontSize: fontSize,
      fill: "#ffffff",
    },
  },
  {
    number: [0],
    style: {
      fontSize: fontSize,
      fill: "#ffffff",
    },
  },
  {
    number: [0],
    style: {
      fontSize: fontSize,
      fill: "#ffffff",
    },
  },
  {
    number: [0],
    style: {
      fontSize: fontSize,
      fill: "#ffffff",
    },
  },
  {
    number: [0],
    style: {
      fontSize: fontSize,
      fill: "#ffffff",
    },
  },
  {
    number: [0],
    style: {
      fontSize: fontSize,
      fill: "#ffffff",
    },
  },
]);
const setTimeOutFnc = (array, num, time) => {
  setTimeout(() => {
    array.number = [num];
  }, 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 (showdatas2.value.length > 0) {
    showdatas2.value.forEach((item, index) => {
      setTimeOutFnc(
        completeNumConfigs.value[index + 3],
        item.completeNum,
        time
      );
      setTimeOutFnc(taskNumConfigs.value[index + 3], item.taskNum, time);
    });
  }
  if (showdatas3.value.length > 0) {
    showdatas2.value.forEach((item, index) => {
      setTimeOutFnc(
        completeNumConfigs.value[index + 3],
        item.completeNum,
        time
      );
      setTimeOutFnc(taskNumConfigs.value[index + 3], item.taskNum, time);
    });
  }
};
onUnmounted(() => {
  if (interval1.value) {
    clearInterval(interval1.value);
  }
});
const checkFullscreen = () => {
  viewKey.value = !viewKey.value;
};
onMounted(async () => {
  window.addEventListener("resize", checkFullscreen);
  setFontSize();
  await getData();
  await getData1();
  setShowData1(17, 2000);
  setShowDatas(5000);
});
onUnmounted(() => {
  document.removeEventListener("resize", checkFullscreen);
});
</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;
}
.list1-leave-active {
  transition: all 2s ease;
}
.list1-enter-from {
  transform: translateX(80vw);
}
.list1-leave-to {
  opacity: 0;
  transform: translateX(-40vw);
}
.list1-leave-active {
  position: absolute;
}
.list2-move,
.list2-enter-active {
  transition: all 1.25s ease;
}
.list2-leave-active {
  transition: all 2s ease;
}
.list2-enter-from {
  transform: translateX(60vw);
}
.list2-leave-to {
  opacity: 0;
  height: 0;
  transform: translateY(-40vh);
}
.list2-leave-active {
  position: absolute;
}
.list3-move,
.list3-enter-active {
  transition: all 1.75s ease;
}
.list3-leave-active {
  transition: all 2s ease;
}
.list3-enter-from {
  transform: translateX(40vw);
}
.list3-leave-to {
  opacity: 0;
  height: 0;
  transform: translateX(40vw);
}
.list3-leave-active {
  position: absolute;
}
//动画配置--
:deep(.dv-water-pond-level) {
  text {
    font-size: 4vh;
  }
}
.screen-container {
  width: 100vw;
  height: 100vh;
  background-image: url("@/assets/images/screen_bg_task.png");
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.flop {
  width: 10vh;
  height: 6vh;
  display: block;
  font-size: 4vh;
}
.screen-content {
  height: 84vh;
  margin-top: 2vh;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0 2vh;
  .rowbox {
    width: 32vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
  }
  .grid-item {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 2vh;
    padding: 2vh 1vh;
    width: 31vw;
    height: 25vh;

    .grid-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex: 1; //当父组件为flex时候，子组件剩余空间可写100%或者flex：1；

      .left-info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: start;
        padding: 0px 1vh;
        height: 100%;
        width: 65%;

        .box {
          height: 50%;
          width: 100%;
        }

        .title {
          font-weight: 500;
          font-size: 3vh;
          color: #ffffff;
          line-height: 3vh;
          width: 100%;
          display: block;
          white-space: nowrap; /* 不允许换行 */
          overflow: hidden; /* 超出长度时隐藏 */
          text-overflow: ellipsis; /* 超出部分显示省略号 */
        }

        .code {
          font-weight: 400;
          font-size: 2vh;
          color: #fff9;
          line-height: 2vh;
          margin-top: 1vh;
          display: -webkit-box;
          -webkit-line-clamp: 2; /* 限制为两行 */
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .com-num {
          font-weight: 500;
          font-size: 2vh;
          color: #55d1aa;
        }

        .plan-num {
          font-weight: 500;
          font-size: 4vh;
          color: #fff;
        }

        .desc {
          font-weight: 400;
          font-size: 2vh;
          color: #ffffff;
          line-height: 2vh;
          padding-left: 1.4vh;
        }
      }

      .right-chart {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        width: 35%;
      }
    }
  }
}
</style>