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

<template>
  <div class="screen-container">
    <common-header title="质量统计" />
    <div class="screen-content">
      <div class="infoItem">
        <div class="infoItemHeader itemBackgroud">
          <TitleHeader title="报故统计" />
          <div class="chartsBox">
            <div id="charts1"></div>
          </div>
        </div>
        <div class="infoItemBody itemBackgroud">
          <TitleHeader title="报故缺陷项分布" />
          <div class="chartsBox">
            <div id="charts3"></div>
          </div>
        </div>
      </div>
      <div class="infoItem">
        <div class="infoItemHeader itemBackgroud">
          <TitleHeader title="不合格品统计" />
          <div class="chartsBox">
            <div id="charts2"></div>
          </div>
        </div>
        <div class="infoItemBody itemBackgroud">
          <TitleHeader title="报故处理跟踪" />
          <div class="chartsCarouselBox">
            <div class="carouselHeader tableStyle">
              <div class="left center1Text">产品名称</div>
              <div class="middle center1Text">状态</div>
              <div class="right center1Text">报故数量</div>
            </div>
            <div class="carouselBody">
              <TransitionGroup name="list" tag="ul">
                <li
                  class="carouselItem tableStyle"
                  :key="item"
                  style="height: 4.3vh"
                  v-for="item in showData1"
                >
                  <div class="left infoBackgroud centerText textComent">
                    {{ item.materialName }}
                  </div>
                  <div class="middle infoBackgroud centerText textComent">
                    {{ item.currentState }}
                  </div>
                  <div
                    class="right infoBackgroud centerText textComent"
                    style="font-weight: bolder"
                  >
                    {{ item.unqualifiedNum }}
                  </div>
                </li>
              </TransitionGroup>
            </div>
          </div>
        </div>
      </div>
      <div
        class="infoItem itemBackgroud"
        style="justify-content: flex-start; padding: 0.8vw"
      >
        <TitleHeader title="产品合格率" />
        <div class="chartsCarouselBox">
          <div class="carouselBody" style="padding: 2vh 0">
            <TransitionGroup name="list" tag="ul">
              <li
                class="carouselItem table1Style"
                :key="item"
                v-for="item in showData2"
                style="height: 8vh"
              >
                <div class="left infoBackgroud centerText">
                  <div class="line">
                    <div class="box">
                      <div class="box1"></div>
                    </div>
                    <div class="titleTextBox textComent">
                      {{ item.materialName }}
                    </div>
                  </div>
                  <div class="line">
                    <div class="title1TextBox textComent">
                      {{ item.materialModel }}
                    </div>
                  </div>
                </div>
                <div class="middle infoBackgroud centerText textComent">
                  {{ item.rate }}
                </div>
              </li>
            </TransitionGroup>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import CommonHeader from "@/views/report/statistics/screens/common-header.vue";
import TitleHeader from "../titleHeader.vue";
import {
  getFaultBug,
  getFaultCount,
  getFaultTrack,
  getCensusNonconforming,
  getQualifiedRate,
} from "@/api/bigScreen";
import * as echarts from "echarts";
const charts1 = shallowRef(null);
const charts2 = shallowRef(null);
const charts3 = shallowRef(null);
//存放接口数据
//报故统计
const chartsData1 = ref({});
//不合格品统计
const chartsData2 = ref([]);
//报故缺陷分布
const chartsData3 = ref({});
//报故处理跟踪
const data1 = ref([]);
const showData1 = ref([]);
const sum1 = ref(1);
const interval1 = ref(null);
const setShowData1 = (num, time) => {
  sum1.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[sum1.value % data1.value.length]);
      showData1.value.splice(0, 1);
      sum1.value = sum1.value + 1;
    }, time);
  } else {
    showData1.value = data1.value;
  }
};
//产品合格率
const data2 = ref([]);
const showData2 = ref([]);
const sum2 = ref(1);
const interval2 = ref(null);
const fontSize = ref(0);
const setFontSize = () => {
  fontSize.value = (window.innerHeight / 100) * 1.55;
};
const setShowData2 = (num, time) => {
  sum2.value = num;
  if (data2.value.length > num) {
    const dataA = JSON.parse(JSON.stringify(data2.value));
    showData2.value = dataA.splice(0, num);
    interval2.value = setInterval(async () => {
      await showData2.value.push(data2.value[sum2.value % data2.value.length]);
      showData2.value.splice(0, 1);
      sum2.value = sum2.value + 1;
    }, time);
  } else {
    showData2.value = data2.value;
  }
};
const getData1 = async () => {
  //报故缺陷项分布
  const { data } = await getFaultBug();
  chartsData3.value = data;
};
const getData2 = async () => {
  //报故统计
  const { data } = await getFaultCount();
  chartsData1.value = data;
};
const getData3 = async () => {
  //报故处理跟踪
  const { data } = await getFaultTrack();
  data1.value = data;
  setShowData1(9, 2500);
};
const getData4 = async () => {
  //不合格品统计
  const { data } = await getCensusNonconforming();
  chartsData2.value = data;
};
const getData5 = async () => {
  //产品合格率
  const { data } = await getQualifiedRate();
  data2.value = data;
  setShowData2(8, 4000);
};
const getData = async () => {
  await getData1();
  await getData2();
  await getData3();
  await getData4();
  await getData5();
};
const option1 = {
  xAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    axisLabel: {
      fontSize: 12,
    },
  },
  grid: {
    left: "8%",
    right: "3%",
    top: "10%",
    bottom: "10%",
  },
  yAxis: {
    type: "value",
    axisLabel: {
      fontSize: 12,
    },
  },
  series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: "line",
      symbol: "none",
      itemStyle: {
        color: "#BCB62E80",
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "#BCB62E80",
          },
          {
            offset: 1,
            color: "#BCB62E20",
          },
        ]),
      },
    },
  ],
  textStyle: {
    fontSize: 999,
  },
};

const option2 = {
  xAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    axisLabel: {
      fontSize: 12,
    },
  },
  grid: {
    left: "8%",
    right: "3%",
    top: "10%",
    bottom: "10%",
  },
  yAxis: {
    type: "value",
    axisLabel: {
      fontSize: 12,
    },
  },
  textStyle: {
    fontSize: 999,
  },
  series: [
    {
      data: [820, 932, 901, 934, 1290, 0, 700],
      type: "line",
      symbol: "none",
      itemStyle: {
        color: "#D7565680",
      },

      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "#D7565680",
          },
          {
            offset: 1,
            color: "#D7565620",
          },
        ]),
      },
    },
  ],
};
const option3 = {
  textStyle: {
    fontSize: 99,
  },
  yAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    axisLabel: {
      fontSize: 12,
    },
  },
  grid: {
    left: "18%",
    right: "7%",
    top: "10%",
    bottom: "10%",
  },
  xAxis: {
    type: "value",
    axisLabel: {
      fontSize: 12,
    },
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: "bar",
      itemStyle: {
        color: "#daf4ff",
      },
      barWidth: "15%",
    },
  ],
};
const setChart3Option = () => {
  const op3 = { ...option3 };
  if (chartsData3.value && charts3.value) {
    op3.series[0].data = chartsData3.value.countList;
    op3.yAxis.data = chartsData3.value.bugNameList;
    op3.yAxis.axisLabel.fontSize = fontSize.value;
    op3.xAxis.axisLabel.fontSize = fontSize.value;
    charts3.value.setOption(op3, true);
  }
};
const setChart2Option = () => {
  const op2 = { ...option2 };
  if (chartsData1.value && charts1.value) {
    op2.series[0].data = chartsData1.value.countList;
    op2.xAxis.data = chartsData1.value.monthList;
    op2.yAxis.axisLabel.fontSize = fontSize.value;
    op2.xAxis.axisLabel.fontSize = fontSize.value;
    charts1.value.setOption(op2, true);
  }
};
const setChart1Option = () => {
  const op1 = { ...option1 };
  if (chartsData2.value && charts2.value) {
    op1.series[0].data = chartsData2.value.countList;
    op1.xAxis.data = chartsData2.value.monthList;
    op1.yAxis.axisLabel.fontSize = fontSize.value;
    op1.xAxis.axisLabel.fontSize = fontSize.value;
    charts2.value.setOption(op1, true);
  }
};
onMounted(async () => {
  setFontSize();
  charts1.value = echarts.init(document.getElementById("charts1"));
  charts2.value = echarts.init(document.getElementById("charts2"));
  charts3.value = echarts.init(document.getElementById("charts3"));
  await getData();
});
onUnmounted(() => {
  if (interval1.value) {
    clearInterval(interval1.value);
  }
  if (interval2.value) {
    clearInterval(interval2.value);
  }
});
watch(
  [() => chartsData3.value, () => chartsData1.value, () => chartsData2.value],
  () => {
    setChart3Option();
    setChart2Option();
    setChart1Option();
  },
  { deep: true }
);
</script>

<style lang="scss" scoped>
#charts1 {
  width: 100%;
  height: 100%;
  transform-origin: center center; /* 设置变换的原点为元素中心 */
  position: absolute;
}
#charts2 {
  width: 100%;
  height: 100%;
  position: absolute;
}
#charts3 {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-origin: center center; /* 设置变换的原点为元素中心 */
  transform: scale(1.1); /* 放大1.5倍 */
}
.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;
}
.list1-leave-active {
  transition: all 0.5s ease;
}
.list1-leave-to {
  opacity: 0;
  transform: translateY(-8vh);
}
.list1-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);
}
.infoBackgroud {
  background-color: rgba(255, 255, 255, 0.05);
}
.screen-content {
  width: 100vw;
  height: calc(100vh - 96px - 18px);
  margin-top: 18px;
  display: flex;
  justify-content: space-evenly;
  .infoItem {
    width: 31vw;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .infoItemHeader {
      height: 36%;
      display: flex;
      flex-direction: column;
      padding: 0.8vw;
      width: 100%;
      .chartsBox {
        flex: 1;
        position: relative;
      }
    }
    .infoItemBody {
      width: 100%;
      height: 60%;
      display: flex;
      flex-direction: column;
      padding: 0.8vw;
      .chartsBox {
        flex: 1;
        position: relative;
      }
    }
  }
}
.chartsCarouselBox {
  flex: 1;
  display: flex;
  flex-direction: column;
  .carouselHeader {
    height: calc(2vh);
    line-height: 2vh;
    margin-bottom: 0.5vh;
  }
  .carouselBody {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .carouselItem {
      margin-bottom: 0.5vh;
      width: calc(31vw - 1.6vw);
    }
  }
}
.centerText {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.8vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.3vh;
}
.center1Text {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.4vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.3vh;
}
.tableStyle {
  display: flex;
  justify-content: space-between;
  width: 100%;
  .left {
    width: 66%;
  }
  .middle {
    width: 19%;
  }
  .right {
    width: 13%;
  }
}
.table1Style {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 2vh !important;
  .left {
    width: calc(80% - 0.5vh);
    padding: 1vh 2vh 1vh 3vh;
    display: flex;
    flex-direction: column;
    .line {
      width: 100%;
      flex: 1;
      display: flex;
      align-items: center;
      .box {
        height: 1.8vh;
        width: 1.8vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgba(255, 255, 255, 0.1);
        .box1 {
          height: 0.8vh;
          width: 0.8vh;
          background-color: rgba(255, 255, 255, 1);
        }
      }
      .titleTextBox {
        font-size: 2vh;
        color: white;
        font-weight: bold;
        flex: 1;
        margin-left: 0.5vh;
      }
      .title1TextBox {
        font-size: 1.4vh;
        color: #ffffff60;
        flex: 1;
        margin-left: calc(1.8vh + 2px);
      }
    }
  }
  .middle {
    width: 20%;
  }
}
.textComent {
  white-space: nowrap; /* 不允许换行 */
  overflow: hidden; /* 超出长度时隐藏 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
}
</style>