大屏整改

liuying

2024-11-10 19b415a1aa36dc70e5546b0fdeefa6a39570f19b

 yiqi_screen/src/components/Content.vue

@@ -1,47 +1,71 @@
<template>
  <div class="container">
    <img alt="guang" src="~@/assets/images/guang.png" class="guang" />

    <div class="header">
      <div class="title">
      
        <img
          :src="
            require(`@/assets/images/1.png`)
          "
          class="imgTitle"
        />
      4GC三代发动机连杆线</div>
        <img :src="require(`@/assets/images/1.png`)" class="imgTitle" />
        4GC三代发动机连杆线
      </div>
      <div class="left-text">
        <div style="line-height: 30px">{{ nowTime }}</div>
        <div style="padding-left: 25px">
          安全生产:{{ produceStatisData.currentSafeProductionDay }}天
        </div>
        <div>{{ nowTime }}</div>
        <div>安全生产:{{ produceStatisData.currentSafeProductionDay }}天</div>
      </div>

      <div class="right-text">
        <div style="line-height: 30px">
          当前班次:{{ produceStatisData.currentTeamName }}
        </div>
        <div>当前班次:{{ produceStatisData.currentTeamName }}</div>
        <div>班长:{{ produceStatisData.currentTeamLeader }}</div>
      </div>
    </div>
    <div class="main">
      <div class="main-top">
        <img src="~@/assets/images/prodline_all.png" class="prodline" />
        <div class="main-top_ly">
          <img
            src="~@/assets/images/prodline_all.png"
            class="prodline"
            alt="line"
          />

        <img
          v-for="item in equipmentStatusData"
          :key="item.id"
          :src="
            require(`@/assets/images/${imageColor[item.workingProcedure]}/${
              item.workingProcedure
            }.png`)
          "
          :class="`euip ${item.workingProcedure}`"
        />
          <!-- <img
            alt="t10"
            :src="require(`@/assets/images/10.png`)"
            class="OP88"
            id="animatedImage"
          />
          <img
            alt="t10"
            :src="require(`@/assets/images/10.png`)"
            class="OP89"
          />
          <img
            alt="t10"
            :src="require(`@/assets/images/10.png`)"
            class="OP90"
          /> -->
          <img
            alt="t1"
            v-for="item in equipmentStatusData"
            :key="item.id"
            :src="
              require(`@/assets/images/${imageColor[item.workingProcedure]}/${
                item.workingProcedure
              }.png`)
            "
            :class="`euip ${item.workingProcedure}`"
          />

        <img src="~@/assets/images/OP35.png" class="prodline_op35" />
        <img :src="require(`@/assets/images/${imageColor['OP10']}/OP40.png`)" class="euip OP40" />
        <img :src="require(`@/assets/images/${imageColor['unit']}/unit.png`)" class="euip unit" />
          <img alt="t2" src="~@/assets/images/OP35.png" class="prodline_op35" />
          <img
            alt="t3"
            :src="require(`@/assets/images/${imageColor['OP10']}/OP40.png`)"
            class="euip OP40"
          />
          <img
            alt="t4"
            :src="require(`@/assets/images/${imageColor['unit']}/unit.png`)"
            class="euip unit"
          />
        </div>
      </div>
      <!-- <button @click="flag=true">data改变</button> -->
      <div class="main-bottom">
@@ -55,24 +79,11 @@
        </div>
        <div class="echarts-box border_middle">
          <div class="echarts-title">质量数据趋势图</div>
          <div
            style="
              color: #fff;
              margin: 0 0.13rem;
              text-align: center;
              font-size: 0.17rem;
            "
          >
          <div class="box11">
            {{ qualityData.qualityType }}
          </div>
          <div>
            <div
              style="
                margin: 0 0.13rem;
                height: 0.13rem;
                background-color: #f14158;
              "
            ></div>
            <div class="box12"></div>
            <div
              style="
                margin: 0 0.13rem;
@@ -102,23 +113,30 @@
        <div class="echarts-box border_right1">
          <div class="echarts-title">本班/本月产量统计</div>

          
          <ProductionStatistics :produceStatisData="produceStatisData" />
          <div class="pie-label-left">
          <!-- 当前班组实际生产数量 -->
            <!-- 当前班组实际生产数量 -->
            {{ produceStatisData.currentShiftProduceNum }}
            <span v-if="produceStatisData.currentShiftPlanNum||produceStatisData.currentShiftPlanNum==0">/</span>
            <span
              v-if="
                produceStatisData.currentShiftPlanNum ||
                produceStatisData.currentShiftPlanNum == 0
              "
              >/</span
            >
            <!-- 当前班组计划生产数量 -->
            {{
              produceStatisData.currentShiftPlanNum
            }}
            {{ produceStatisData.currentShiftPlanNum }}
          </div>
          <div class="pie-label-right">
            {{ produceStatisData.currentMonthProduceNum }}
            <span v-if="produceStatisData.currentMonthPlanNum||produceStatisData.currentMonthPlanNum==0">/</span>
            {{
              produceStatisData.currentMonthPlanNum
            }}
            <span
              v-if="
                produceStatisData.currentMonthPlanNum ||
                produceStatisData.currentMonthPlanNum == 0
              "
              >/</span
            >
            {{ produceStatisData.currentMonthPlanNum }}
          </div>
        </div>
        <div class="echarts-box border_right2">
@@ -142,7 +160,7 @@
import ProductionStatistics from "./ProductionStatistics.vue";
import QualityDataTrendse from "./QualityDataTrends.vue";
import moment from "moment";

import anime from "animejs/lib/anime.es.js";
import {
  GetEquipmentCurrentState,
  getQualityData,
@@ -246,13 +264,15 @@
    async getEquipmentCurrentState() {
      try {
        let { data } = await GetEquipmentCurrentState();
        let equipmentData=[]
        data.forEach(item=>{
          const res=this.equipmentStatusData.filter(obj=>obj.workingProcedure==item.workingProcedure)
          if(res.length>0){
            equipmentData.push(item)
        let equipmentData = [];
        data.forEach((item) => {
          const res = this.equipmentStatusData.filter(
            (obj) => obj.workingProcedure == item.workingProcedure
          );
          if (res.length > 0) {
            equipmentData.push(item);
          }
        })
        });
        this.equipmentStatusData = equipmentData;
        this.getImageColor(data);
      } catch (error) {
@@ -314,6 +334,40 @@
      }
    },
  },
  mounted() {
    // var timeline = anime.timeline({
    //   easing: "easeOutExpo", // 运动效果
    //   loop: true, // 设置无限循环
    // });

    // // 第一个动画：横向移动
    // timeline
    //   .add({
    //     targets: "#animatedImage",
    //     translateX: 280, // 向右移动280px
    //     duration: 2000, // 动画持续时间
    //   })
    //   // 第二个动画：向下移动
    //   .add({
    //     targets: "#animatedImage",
    //     translateY: 50, // 向下移动50px
    //     duration: 2000, // 动画持续时间
    //   })
    //   // 间隔时间回到初始位置
    //   .add({
    //     targets: "#animatedImage",
    //     translateX: 0, // 回到初始位置
    //     translateY: 0, // 回到初始位置
    //     duration: 0, // 不需要动画
    //     delay: 1000, // 隔断时间1秒
    //   });

    // setTimeout(() => {
    //   timeline.pause(); // 暂停动画
    //   document.getElementById('animatedImage').classList.add('hidden');
    // }, 8000);
  },

  // beforeDestroy(){
  //   clearInterval(this.dataTimer)
  //   clearInterval(this.dateTimer)
@@ -321,77 +375,103 @@
};
</script>

<style  lang="scss" scoped>
<style lang="scss" scoped>
$allHeight: 13.5rem;
$titleHeight: 2rem;

.container {
  width: 100%;
  height: auto;
  position: relative;
  .guang {
    position: absolute;
    width: 100%;
    top: 30%;
    left: 0;
    z-index: 0;
    height: 69%;
  }

  .header {
    position: relative;
    z-index: 9;
    width: 100%;
    height: 2rem;
    background-image: url("~@/assets/images/title.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-bottom: 0.25rem;
    position: relative;

    .title {
      display: flex;
      vertical-align: middle;
      align-items: center;
      color: #41c7de;
      font-size: 0.38rem;
      font-size: 40px;
      font-weight: 700;
      position: absolute;
      top: .31rem;
      top: 12px;
      left: 50%;
      transform: translate(-50%);
      letter-spacing: 8px;
      .imgTitle{
        width: .5rem;
        position: absolute;
        /* top: 0.08rem; */
        left: -0.7rem;
      .imgTitle {
        width: 117px;
        margin-right: 69px;
      }
    }

    .left-text {
      font-size: 0.19rem;
      color: #fff;
      position: absolute;
      top: 1.15rem;
      left: 5rem;
      font-size: 18px;
    color: #fff;
    position: absolute;
    top: 57px;
    left: 38px;
    width: 372px;
    text-align: right;
    line-height: 48px;
    font-weight: 700;
    }

    .right-text {
      font-size: 0.19rem;
      text-align: right;
      color: #fff;
      position: absolute;
      top: 1.15rem;
      right: 5.3rem;
      font-size: 18px;
    text-align: right;
    color: #fff;
    position: absolute;
    top: 57px;
    right: 268px;
    line-height: 48px;
    font-weight: 700;
    }
  }

  .main {
    position: relative;
    width: 100%;
    height: auto;
    // display: flex;
    // flex-direction: column;
    // justify-content: space-between;
    padding: 0 0.28rem 0.19rem;
    z-index: 99;

    .main-top {
      width: 100%;
      height: 7.42rem;

      // background-color: #fff;
      margin-bottom: 0.29rem;
      background-image: url("~@/assets/images/border_prodline.png");
      background-size: 101.1% 101.8%;
      background-position: -0.13rem -0.13rem;
      background-size: 100% 100%;
      position: relative;

      .main-top_ly {
        width: 95%;
        margin: 0 auto;
        position: relative;
        height: 6.8rem;
      }

      .prodline {
        width:95%;
        width: 95%;
        display: block;
        position: absolute;
        top: 50%;
@@ -400,124 +480,132 @@
      }

      .prodline_op35 {
        position: absolute;
        top: 2.72rem;
        left: 4.3rem;
        width:1.8%;
        display: none;
        // position: absolute;
        // top: 2.72rem;
        // left: 4.3rem;
        // width:1.8%;
      }

      .euip {
        width:95%;
        width: 95%;
        position: absolute;
        top: -1.59rem;
        left: 1.28rem;
        
      }

      .OP05{
        top: -1.58rem;
        left: 0.12rem;   
      .OP05 {
        top: -76px;
        left: -220px;
      }

      .OP10,.OP40{
        top: -1.48rem;
        left: 0.5rem;
      .OP10,
      .OP40 {
        top: -90px;
        left: -236px;
        width: 112%;
        height: 902px;
      }

      .OP20{
        top: -1.8rem;
        left: 0.6rem;
      .OP20 {
        top: -95px;
        left: 31px;
        width: 86%;
        transform: scale(1.5, 1.2);
      }

      .OP30{
        top: -2.05rem;
        left: 0.3rem;
      .OP30 {
        top: -183px;
        left: -247px;
        width: 2061px;
        height: 923px;
      }

      .OP35{
        top: -1.8rem;
        left: 0.2rem;
      .OP35 {
        top: -104px;
        left: -182px;
      }

      .OP50{
        top: -1.69rem;
        left: 1.05rem;
      .OP50 {
        top: -168px;
        left: -75px;
        width: 100%;
      }

      .OP60{
        top: -1.65rem;
        left: 1.5rem;
      .OP60 {
        top: -178px;
        left: -31px;
        width: 100%;
      }

      .OP70{
        top: -1.52rem;
        left: 2.15rem;
      .OP70 {
        top: -175px;
        left: 23px;
        width: 101%;
      }

      .OP80,.unit{
      .OP80,
      .unit {
        top: -1.95rem;
        left: 1.98rem;
      }


      // img:nth-child(2) {
      //   width:100%;
      //   top: -2.05rem;
      //   left: 1.07rem;   
      //   left: 1.07rem;
      // }
    }

    .main-bottom {
      height: auto;
      // height: auto;
      height: 320px;
      // border: 1px solid red;
      display: flex;
      // background-color: skyblue;

      .border_left1 {
        width:3.84rem;
        margin-right: .14rem;
        width: 284px;
        margin-right: 20px;
        border: 0 !important;
        background-image: url("~@/assets/images/border_left1.png");
        background-size: 107.5% 104%;
        background-position: -0.14rem -0.13rem;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .border_left2 {
        width:3.02rem;
        margin-right: .16rem;
        width: 244px;
        margin-right: 20px;
        border: 0 !important;
        background-image: url("~@/assets/images/border_left2.png");
        background-size: 109.3% 104%;
        background-position: -0.14rem -0.13rem;
        background-image: url("~@/assets/images/border_left1.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .border_middle {
        width:6.09rem;
        margin-right: .16rem;
      width: 720px;
        margin-right: 20px;
        border: 0 !important;
        background-image: url("~@/assets/images/border_middle.png");
        background-size: 102.7% 104%;
        background-position: -0.14rem -0.13rem;
        // background-image: url("~@/assets/images/border_middle.png");
        background-image: url("~@/assets/images/border_left1.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .border_right1 {
        width:3.75rem;
        margin-right: .15rem;
        width: 244px;
        margin-right: 20px;
        border: 0 !important;
        background-image: url("~@/assets/images/border_right1.png");
        background-size: 107.5% 104%;
        background-position: -0.14rem -0.13rem;
        background-image: url("~@/assets/images/border_left1.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      .border_right2 {
        width:6.09rem;
        width: 284px;
        border: 0 !important;
        background-image: url("~@/assets/images/border_right2.png");
        background-size: 104.4% 104%;
        background-position: -0.14rem -0.13rem;
        background-image: url("~@/assets/images/border_left1.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

@@ -526,14 +614,14 @@
        border: 2px solid #3a45de;

        .echarts-title {
          font-size: 0.18rem;
          height: 0.75rem;
          padding: 0.31rem 0 0.26rem;
          margin: 0 0.23rem;
          font-size: 20px;
          height: 69px;
          padding-top: 20px;
          margin: 0 0 0 0;
          font-weight: 700;
          color: #00afb9;
          color: #00f8c6;
          text-align: center;
          border-bottom: 2px solid #3c37bf;
          border-bottom: 2px solid #04279d;
        }
      }

@@ -542,26 +630,31 @@

        .pie-label-left {
          position: absolute;
          bottom: 0.1rem;
          left: 0.7rem;
          color: #fff;
          font-size: 0.2rem;
          bottom: 10px;
          left: 0.1rem;
          color: #d9dbe6;
          font-size: 18px;
          font-weight: 300;
          width: 44%;
          text-align: center;
        }

        .pie-label-right {
          position: absolute;
          bottom: 0.1rem;
          right: 0.7rem;
          bottom: 10px;
          right: 0.3rem;
          color: #fff;
          font-size: 0.2rem;
          font-weight: 300;
          color: #d9dbe6;
          font-size: 18px;
          width: 44%;
          text-align: center;
        }
      }

      .box-container {
        width: 100%;
        height: 2.6rem;
        // height: 2.6rem;
        height: 236px;
        // background-color: rgb(196, 231, 178);
      }

@@ -574,4 +667,31 @@
    }
  }
}
</style>

.box11 {
  color: #fff;
  margin: 10px 0;
  text-align: center;
  font-size: 15px;
}
.box12 {
  margin: 0 0.13rem;
  height: 0.13rem;
  background-color: #f14158;
}

.OP88,
.OP89,
.OP90 {
  position: absolute;
  width: 20px;
}
#animatedImage {
  position: absolute;
  top: 70.5%;
  left: 75px;
}
.hidden {
  display: none; /* 隐藏元素 */
}
</style>