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

<template>
  <div class="screen-container">
    <common-headerB title="装调一体式智能生产线仿真大屏" />
    <div class="body">
      <div class="left bg">
        <TitleHeaderB title="工位状态" />
        <div class="totalInfo">
          <div class="left">
            <div class="text">{{ countData.dayRate }}</div>
          </div>
          <div class="right">
            <div class="big">
              <div class="leftBox">
                <div class="num">{{ countData.dayPlan }}</div>
                <div class="title">今日计划</div>
              </div>
              <div class="rightBox">
                <div class="num">{{ countData.dayFinish }}</div>
                <div class="title">今日完成</div>
              </div>
            </div>
            <div class="small">
              <div class="title">本周进度</div>
              <div class="title">
                {{ countData.weekFinish }} &nbsp;/
                <span class="num">{{ countData.weekPlan }}</span>
              </div>
            </div>
            <div class="small">
              <div class="title">本月进度</div>
              <div class="title">
                {{ countData.monthFinish }} &nbsp;/
                <span class="num">{{ countData.monthPlan }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="titleInfo">
          <div class="infoItem">
            <div class="leftItem">工位名称</div>
            <div class="rightItem">完成率</div>
          </div>
        </div>
        <ShowScroll
          ref="ShowScrollRef1"
          :scrollRef="scrollbarRef1"
          :innerRef="innerRef1"
        >
          <el-scrollbar ref="scrollbarRef1" class="scrollbar">
            <div ref="innerRef1">
              <div
                class="infoItem"
                v-for="(item, index) in taskRateArray"
                :key="index"
              >
                <div class="leftItem textComent itembg">
                  {{ item.stationName }}
                </div>
                <div class="rightItem itembg">{{ item.dayRate }}</div>
              </div>
            </div>
          </el-scrollbar>
        </ShowScroll>
      </div>
      <div class="middle">
        <div class="item">
          <el-image src="/images/111.gif" style="width: 100%; height: 100%" />
        </div>
        <div class="item">
          <TitleHeaderB title="自动化设备状态" />
          <ShowScroll
            ref="ShowScrollRef2"
            :scrollRef="scrollbarRef2"
            :innerRef="innerRef2"
          >
            <el-scrollbar ref="scrollbarRef2" class="scrollbar">
              <div ref="innerRef2" class="infoContent">
                <div
                  class="deviceInfo"
                  v-for="(item, index) in deviceArray"
                  :key="index"
                >
                  <div class="img">
                    <el-image
                      :src="`/images/${getRandomLetter()}.png`"
                      class="img"
                    />
                    <div
                      class="imgbg"
                      :class="{
                        outlinebg: item.state == '离线',
                        errorbg: item.state == '故障',
                      }"
                    ></div>
                  </div>
                  <div class="info">
                    <div class="info1">{{ item.deviceName }}</div>
                    <div class="info2">
                      <div class="text2">
                        今日稼动
                        <span class="nums">{{ item.utilizationRate }}</span>
                      </div>
                      |
                      <div class="text2">
                        总稼动
                        <span class="nums" style="color: white">{{
                          item.totalRate
                        }}</span>
                      </div>
                    </div>
                    <div class="info3">
                      <div class="ip">IP:{{ item.ip }}</div>
                      <div
                        class="infoState"
                        :class="{
                          red: item.state == '故障',
                          white: item.state == '离线',
                        }"
                      >
                        {{ item.state }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-scrollbar>
          </ShowScroll>
        </div>
        <div class="item">
          <TitleHeaderB title="不合格情况" />
          <div class="scrollbar" style="position: relative">
            <div id="charts2"></div>
          </div>
        </div>
      </div>
      <div class="right bg">
        <div class="top">
          <TitleHeaderB title="今日排产" />
          <div class="titleInfo">
            <div class="infoItem">
              <div class="leftItem1">产品名称</div>
              <div class="midItem1">今日排产</div>
              <div class="rightItem1">完成率</div>
            </div>
          </div>
          <ShowScroll
            ref="ShowScrollRef3"
            :scrollRef="scrollbarRef3"
            :innerRef="innerRef3"
          >
            <el-scrollbar
              class="scrollbar"
              ref="scrollbarRef3"
              style="height: 53vh"
            >
              <div ref="innerRef3">
                <div
                  class="infoItem"
                  v-for="(item, index) in materialArray"
                  :key="index"
                >
                  <div class="leftItem1 textComent itembg">
                    {{ item.materialName }}
                  </div>
                  <div class="midItem1 itembg">{{ item.planNum }}</div>
                  <div class="rightItem1 itembg">{{ item.dayRate }}</div>
                </div>
              </div>
            </el-scrollbar>
          </ShowScroll>
        </div>
        <div class="bottom">
          <TitleHeaderB title="今日报故" />
          <div class="titleInfo">
            <div class="infoItem">
              <div class="leftItem">工位名称</div>
              <div class="rightItem">报故数量</div>
            </div>
          </div>
          <ShowScroll
            ref="ShowScrollRef4"
            :scrollRef="scrollbarRef4"
            :innerRef="innerRef4"
          >
            <el-scrollbar
              ref="scrollbarRef4"
              class="scrollbar"
              style="height: 20vh"
            >
              <div ref="innerRef4">
                <div
                  class="infoItem"
                  v-for="(item, index) in todayErrorArray"
                  :key="index"
                >
                  <div class="leftItem textComent itembg">
                    {{ item.materialName }}
                  </div>
                  <div class="rightItem itembg" style="color: #db4848">
                    {{ item.unqualifiedNum }}
                  </div>
                </div>
              </div>
            </el-scrollbar>
          </ShowScroll>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import CommonHeaderB from "@/views/report/statistics/screens/common-headerB.vue";
import TitleHeaderB from "../titleHeaderB.vue";
import ShowScroll from "@/components/ShowScroll/index.vue";
import * as echarts from "echarts";
import {
  getFaultCount,
  getTaskCount,
  getTaskRate,
  getDeviceList,
  getMaterialRate,
  getTodayError,
} from "@/api/bigScreen";
import Middle3D from "./middle3D.vue";
import moment from "moment";
const fontSize = ref(0);
const scrollbarRef1 = ref(null);
const ShowScrollRef1 = ref(null);
const innerRef1 = ref(null);
const scrollbarRef2 = ref(null);
const ShowScrollRef2 = ref(null);
const innerRef2 = ref(null);
const scrollbarRef3 = ref(null);
const ShowScrollRef3 = ref(null);
const innerRef3 = ref(null);
const scrollbarRef4 = ref(null);
const ShowScrollRef4 = ref(null);
const innerRef4 = ref(null);
const setFontSize = () => {
  fontSize.value = (window.innerHeight / 100) * 1.55;
};
const charts2 = shallowRef(null);
const chartsData2 = ref([]);
const getRandomLetter = () => {
  const letters = ["a", "b", "c", "d"];
  const randomIndex = Math.floor(Math.random() * letters.length);
  return letters[randomIndex];
};
const getData4 = async () => {
  //不合格品统计
  const { data } = await getFaultCount();
  chartsData2.value = data;
};
const countData = ref({});
//获取今日任务完成相关统计
const getTodayData = async () => {
  const { data } = await getTaskCount();
  countData.value = data;
};
const taskRateArray = ref([]);
//获取工位任务完成率
const getRateArray = async () => {
  const { data } = await getTaskRate();
  taskRateArray.value = data;
  nextTick(() => {
    ShowScrollRef1.value.setActive();
  });
};
const deviceArray = ref([]);
//获取设备列表
const getDevice = async () => {
  const { data } = await getDeviceList();
  deviceArray.value = data;
  nextTick(() => {
    ShowScrollRef2.value.setActive();
  });
};
const materialArray = ref([]);
const getMaterialArray = async () => {
  const { data } = await getMaterialRate();
  materialArray.value = data;
  nextTick(() => {
    ShowScrollRef3.value.setActive();
  });
};
//今日报故
const todayErrorArray = ref([]);
const getTodayErrorArray = async () => {
  const { data } = await getTodayError();
  todayErrorArray.value = data;
  nextTick(() => {
    ShowScrollRef4.value.setActive();
  });
};
const option1 = {
  xAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    axisLabel: {
      fontSize: 12,
    },
  },
  tooltip: {
    trigger: "axis",
    backgroundColor: "#00000030",
    textStyle: {
      color: "#fff",
    },
    formatter: function (param) {
      const array = [
        moment().year() +
          "年" +
          param[0].name +
          "&nbsp;&nbsp;" +
          param[0].value +
          "<br/>",
      ];
      for (
        let i = 0;
        i < chartsData2.value.faultList[param[0].dataIndex].length;
        i++
      ) {
        array.push(
          ` <span style='width: 10vw'>${chartsData2.value.faultList[param[0].dataIndex][i].materialName}</span><span style='color:#D75656;'>&nbsp;&nbsp;${chartsData2.value.faultList[param[0].dataIndex][i].unqualifiedNum}</span>` +
            "<br/>"
        );
      }
      return array.join("");
    },
  },
  grid: {
    left: "3%",
    right: "3%",
    top: "12%",
    bottom: "15%",
  },
  yAxis: {
    type: "value",
    axisLabel: {
      fontSize: 12,
    },
    minInterval: 1,
  },
  series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: "line",
      stack: "Total",
      label: {
        show: true,
        position: "top",
        fontSize: 20,
        color: "white",
      },
      itemStyle: {
        color: "#D7565680",
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "#D7565680",
          },
          {
            offset: 1,
            color: "#D7565680",
          },
        ]),
      },
    },
  ],
  textStyle: {
    fontSize: fontSize.value,
  },
};
const setChart1Option = () => {
  const op1 = { ...option1 };
  if (chartsData2.value && charts2.value) {
    op1.series[0].data = chartsData2.value.countList;
    op1.series[0].label.fontSize = fontSize.value;
    op1.xAxis.data = chartsData2.value.monthList;
    op1.yAxis.axisLabel.fontSize = fontSize.value;
    op1.xAxis.axisLabel.fontSize = fontSize.value;
    op1.tooltip.textStyle.fontSize = fontSize.value;
    charts2.value.setOption(op1, true);
  }
};
onMounted(async () => {
  setFontSize();
  await getData4();
  getTodayData();
  getRateArray();
  getDevice();
  getMaterialArray();
  getTodayErrorArray();
  charts2.value = echarts.init(document.getElementById("charts2"));
  setChart1Option();
  window.addEventListener("resize", function () {
    charts2.value.resize();
  });
});
</script>

<style lang="scss" scoped>
.red {
  color: red !important;
}
.white {
  color: white !important;
}
.titleInfo {
  height: 3vh;
}
.scrollbar {
  padding-top: 0.5vh;
  height: 58vh;
}
#charts2 {
  width: 100%;
  height: 100%;
  position: absolute;
}
.screen-container {
  width: 100vw;
  height: 100vh;
  background-image: url("@/assets/images/screen_bg_task.png");
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.bg {
  background-color: rgba(0, 0, 0, 0.4);
}
.body {
  padding-top: 1vh;
  width: 100vw;
  height: 90vh;
  display: flex;
  justify-content: space-evenly;
  .left {
    padding: 1vh;
    width: 18vw;
    height: 90vh;
    .totalInfo {
      height: 20vh;
      display: flex;
      padding: 1vh;
      .left {
        width: 7vw;
        height: 7vw;
        background-image: url("@/assets/images/cel.png");
        background-size: 100% 100%;
        background-position: center;
        position: relative;
        .text {
          width: 7vw;
          height: 7vw;
          top: 0;
          left: 0;
          color: white;
          text-align: center;
          line-height: 6vw;
          font-size: 2.3vh;
          padding-right: 1vw;
        }
      }
      .right {
        width: 9vw;
        height: 20vh;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        .title {
          font-size: 1.5vh;
          color: white;
          text-align: center;
        }
        .big {
          height: 8vh;
          width: 9vw;
          display: flex;
          .num {
            font-size: 3vh;
            font-weight: bolder;
            color: white;
            text-align: center;
          }

          .leftBox {
            width: 4.5vw;
            height: 8vh;
            border-right: 0.1vw solid white;
          }
          .rightBox {
            width: 4.5vw;
            height: 8vh;
          }
        }
        .small {
          height: 4vh;
          display: flex;
          justify-content: space-between;
          .num {
            color: rgb(8, 174, 199);
          }
        }
      }
    }
  }
  .middle {
    width: 60vw;
    height: 90vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .item {
      height: 29vh;
      padding: 1vh;
      width: 100%;
      background-color: rgba(0, 0, 0, 0.4);
      .scrollbar {
        height: 23.9vh;
        width: 100%;
        .infoContent {
          width: 100%;
          padding: 1vh;
          display: grid;
          gap: 0.6vw;
          grid-template-columns: repeat(3, 1fr);
          .deviceInfo {
            width: 19vw;
            height: 10vh;
            display: flex;
            background-color: rgba(255, 255, 255, 0.1);
            clip-path: polygon(0% 0%, 85% 0%, 100% 25%, 100% 100%, 0% 100%);
            .img {
              height: 10vh;
              width: 7vw;
              position: relative;
              .imgbg {
                position: absolute;
                height: 10vh;
                width: 7vw;
                top: 0;
                left: 0;
                z-index: 2;
                background-color: #06ffa520;
                border: 0.4vh solid #06ffa5;
              }
              .outlinebg {
                background-color: #ffffff20 !important;
                border: 0.4vh solid #fff !important;
              }
              .errorbg {
                background-color: #db484820 !important;
                border: 0.4vh solid #db4848 !important;
              }
            }
            .info {
              height: 10vh;
              width: 12vw;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              padding-top: 1vh;

              .info1 {
                padding-left: 0.5vw;
                height: 2vh;
                font-size: 2vh;
                line-height: 2vh;
                font-weight: 600;
                color: white;
              }
              .info2 {
                height: 2vh;
                padding-left: 0.5vw;
                display: flex;
                justify-content: space-between;
                align-items: center;
                color: white;
                padding-right: 1vw;
                .text2 {
                  font-size: 1.5vh;
                  .nums {
                    color: #0ae0ff;
                    font-weight: 600;
                  }
                }
              }
              .info3 {
                height: 2vh;
                font-size: 2vh;
                background-color: rgba(255, 255, 255, 0.1);
                display: flex;
                padding-left: 0.5vw;
                padding-right: 1vw;
                justify-content: space-between;
                .ip {
                  font-size: 1.6vh;
                  line-height: 2vh;
                  color: white;
                }
                .infoState {
                  font-size: 1.6vh;
                  line-height: 2vh;
                  color: #06ffa5;
                }
              }
            }
          }
        }
      }
    }
  }
  .right {
    width: 18vw;
    height: 90vh;
    display: flex;
    flex-direction: column;
    .top {
      height: 61vh;
      padding: 1vh;
    }
    .bottom {
      height: 29vh;
      padding: 1vh;
    }
  }
}
.textComent {
  white-space: nowrap; /* 不允许换行 */
  overflow: hidden; /* 超出长度时隐藏 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
}
.infoItem {
  height: 4vh;
  margin-bottom: 0.4vh;
  display: flex;
  .leftItem {
    flex: 1;
    height: 4vh;
    font-size: 1.8vh;
    line-height: 4vh;
    color: white;
    text-align: center;
  }
  .rightItem {
    width: 25%;
    height: 4vh;
    line-height: 4vh;
    margin-left: 0.3vw;
    font-size: 1.8vh;
    color: white;
    text-align: center;
  }
  .leftItem1 {
    flex: 1;
    height: 4vh;
    font-size: 1.8vh;
    line-height: 4vh;
    color: white;
    text-align: center;
  }
  .midItem1 {
    width: 25%;
    height: 4vh;
    line-height: 4vh;
    margin-left: 0.3vw;
    font-size: 1.8vh;
    color: white;
    text-align: center;
  }
  .rightItem1 {
    width: 20%;
    height: 4vh;
    line-height: 4vh;
    margin-left: 0.3vw;
    font-size: 1.8vh;
    color: white;
    text-align: center;
  }
}
.itembg {
  background-color: #46464635;
}
</style>