222

schangxiang@126.com

2025-09-26 2b05362eba2f989b7857349cc9a3a1c12f8181b6

 yiqi_screen/src/components/Content.vue

@@ -20,30 +20,59 @@
    <div class="main">
      <div class="main-top">
        <div class="main-top_ly">
          <!-- 产线布局图 -->
          <img
            src="~@/assets/images/prodline_all.png"
            class="prodline"
            alt="line"
          />

          <!-- <img
            alt="t10"
            :src="require(`@/assets/images/10.png`)"
            class="OP88"
            id="animatedImage"
          />
          <!-- <img src="~@/assets/images/9.png" class="line100" alt="line100" />
          <p style="color: white;"> {{equipmentStatusData}} </p> -->


          <!-- 顶部 -->
          <div v-for="item in equipmentStatusData">
            <!-- <p style="color: white;font-size: 32px">  {{ item.equipmentCurrentState }} </p>  -->

            <img
              :alt="item.workingProcedure"
              :src="
                require(`@/assets/images/${
                  imageColor[item.workingProcedure]
                }/zhuozi.png`)
              "
              class="prodline_op325"
            />

            <img
              :alt="item.workingProcedure"
              v-if="
                item.equipmentCurrentState == 1 &&
                item.workingProcedure == 'OP30'
              "
              src="~@/assets/images/6.gif"
              class="box100"
            />
            <img
              v-if="
                item.equipmentCurrentState == 1 &&
                item.workingProcedure == 'OP20'
              "
              src="~@/assets/images/8.gif"
              class="box200"
            />
            <img
              v-if="
                item.equipmentCurrentState == 1 &&
                item.workingProcedure == 'OP50'
              "
              src="~@/assets/images/8.gif"
              class="box300"
            />
          </div>

          <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="
@@ -54,14 +83,16 @@
            :class="`euip ${item.workingProcedure}`"
          />

          <img alt="t2" src="~@/assets/images/OP35.png" class="prodline_op35" />
          <img
            alt="t3"
            src="~@/assets/images/OP35.png"
            class="prodline_op325"
          />

          <img
            :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"
          />
@@ -70,15 +101,21 @@
      <!-- <button @click="flag=true">data改变</button> -->
      <div class="main-bottom">
        <div class="echarts-box border_left1">
          <div class="echarts-title">设备运行状态统计图</div>
          <div class="echarts-title">
            <span class="title1"> 设备运行状态统计图 </span>
          </div>
          <EquipmentRunStatus :equipmentStatusData="equipmentStatusData" />
        </div>
        <div class="echarts-box border_left2">
          <div class="echarts-title">产线健康能力图</div>
          <div class="echarts-title">
            <span class="title1"> 产线健康能力图 </span>
          </div>
          <ProdlineHealthy />
        </div>
        <div class="echarts-box border_middle">
          <div class="echarts-title">质量数据趋势图</div>
          <div class="echarts-title">
            <span class="title1"> 质量数据趋势图 </span>
          </div>
          <div class="box11">
            {{ qualityData.qualityType }}
          </div>
@@ -88,7 +125,7 @@
              style="
                margin: 0 0.13rem;
                height: 0.13rem;
                background-color: #a7cf29;
                background-color: #e6e705;
              "
            ></div>
          </div>
@@ -98,7 +135,7 @@
              style="
                margin: 0 0.13rem;
                height: 0.13rem;
                background-color: #a7cf29;
                background-color: #e6e705;
              "
            ></div>
            <div
@@ -111,7 +148,18 @@
          </div>
        </div>
        <div class="echarts-box border_right1">
          <div class="echarts-title">本班/本月产量统计</div>
          <div class="echarts-title">
            <span class="title1"> 本班/本月产量统计 </span>
          </div>

          <!-- 
          <div class="ring-container quan1">
            <div class="outer-ring"></div>
            <div class="inner-ring"></div>
          </div> -->

          <div class="quan1"></div>
          <div class="quan2"></div>

          <ProductionStatistics :produceStatisData="produceStatisData" />
          <div class="pie-label-left">
@@ -140,7 +188,9 @@
          </div>
        </div>
        <div class="echarts-box border_right2">
          <div class="echarts-title">生产完成趋势</div>
          <div class="echarts-title">
            <span class="title1"> 生产完成趋势 </span>
          </div>
          <ProductionCompletionTrend
            :produceCompletionData="produceCompletionData"
          />
@@ -270,11 +320,15 @@
            (obj) => obj.workingProcedure == item.workingProcedure
          );
          if (res.length > 0) {
            // item.equipmentCurrentState =5; 测试
            equipmentData.push(item);
          }
        });
        this.equipmentStatusData = equipmentData;
        console.log(88888888);
        console.log(JSON.stringify(this.equipmentStatusData) );
        this.getImageColor(data);
        
      } catch (error) {
        console.log(error);
      }
@@ -290,7 +344,8 @@
          this.imageColor[item.workingProcedure] = result[0].color;
        }
      });
      // console.log(this.imageColor, "getImageColor");
      console.log(5555555555);
       console.log(this.imageColor, "getImageColor");
    },
    // 获取质量数据
    async getQualityData() {
@@ -335,37 +390,7 @@
    },
  },
  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(){
@@ -403,10 +428,10 @@
    margin-bottom: 0.25rem;

    .title {
      font-family: Source Han Sans CN;
      display: flex;
      vertical-align: middle;
      align-items: center;
      color: #41c7de;
      font-size: 40px;
      font-weight: 700;
      position: absolute;
@@ -414,6 +439,11 @@
      left: 50%;
      transform: translate(-50%);
      letter-spacing: 8px;

      background: linear-gradient(0deg, #a7ffff, #83d0dc);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;

      .imgTitle {
        width: 117px;
        margin-right: 69px;
@@ -421,26 +451,28 @@
    }

    .left-text {
      font-size: 18px;
    color: #fff;
    position: absolute;
    top: 57px;
    left: 38px;
    width: 372px;
    text-align: right;
    line-height: 48px;
    font-weight: 700;
      font-size: 16px;
      color: #fff;
      position: absolute;
      top: 79px;
      left: 37px;
      width: 368px;
      text-align: right;
      line-height: 23px;
      font-weight: 700;
      transform: scaleY(2);
    }

    .right-text {
      font-size: 18px;
    text-align: right;
    color: #fff;
    position: absolute;
    top: 57px;
    right: 268px;
    line-height: 48px;
    font-weight: 700;
      font-size: 16px;
      text-align: right;
      color: #fff;
      position: absolute;
      top: 79px;
      right: 268px;
      line-height: 23px;
      font-weight: 700;
      transform: scaleY(2);
    }
  }

@@ -467,7 +499,7 @@
        width: 95%;
        margin: 0 auto;
        position: relative;
        height: 6.8rem;
        height: 526px;
      }

      .prodline {
@@ -477,14 +509,22 @@
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        height: 225px;
      }

      .prodline_op35 {
        display: none;
        // position: absolute;
        // top: 2.72rem;
        // left: 4.3rem;
        // width:1.8%;
        position: absolute;
        top: 246px;
        left: 106px;
        width: 40px;
        z-index: 0;
      }
      .prodline_op325 {
        position: absolute;
        top: 254px;
        left: 108px;
        width: 38px;
        height: 63px;
      }

      .euip {
@@ -495,41 +535,41 @@
      }

      .OP05 {
        top: -76px;
        left: -220px;
        top: -122px;
        left: -223px;
      }

      .OP10,
      .OP40 {
        top: -90px;
        left: -236px;
        width: 112%;
        height: 902px;
        top: -133px;
        left: -145px;
        height: 904px;
      }

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

      .OP30 {
        top: -183px;
        left: -247px;
        top: -152px;
        left: -226px;
        width: 2061px;
        height: 923px;
      }

      .OP35 {
        top: -104px;
        top: -151px;
        left: -182px;
        width: 100%;
        z-index: 999;
      }

      .OP50 {
        top: -168px;
        left: -75px;
        width: 100%;
        top: -108px;
        left: 11px;
        width: 90%;
      }

      .OP60 {
@@ -544,8 +584,13 @@
        width: 101%;
      }

      .OP80,
      .unit {
        top: -113px;
        left: 86px;
        transform: scale(1.2);
      }

      .OP80 {
        top: -1.95rem;
        left: 1.98rem;
      }
@@ -558,12 +603,9 @@
    }

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

      justify-content: center;
      .border_left1 {
        width: 284px;
        margin-right: 20px;
@@ -583,7 +625,7 @@
      }

      .border_middle {
      width: 720px;
        width: 720px;
        margin-right: 20px;
        border: 0 !important;
        // background-image: url("~@/assets/images/border_middle.png");
@@ -621,7 +663,7 @@
          font-weight: 700;
          color: #00f8c6;
          text-align: center;
          border-bottom: 2px solid #04279d;
          border-bottom: 2px solid #0739a3;
        }
      }

@@ -631,22 +673,22 @@
        .pie-label-left {
          position: absolute;
          bottom: 10px;
          left: 0.1rem;
          color: #d9dbe6;
          font-size: 18px;
          left: 0;
          color: white;
          font-size: 16px;
          font-weight: 300;
          width: 44%;
          width: 54%;
          text-align: center;
        }

        .pie-label-right {
          position: absolute;
          bottom: 10px;
          right: 0.3rem;
          right: 0;
          color: #fff;
          color: #d9dbe6;
          font-size: 18px;
          width: 44%;
          color: white;
          font-size: 16px;
          width: 54%;
          text-align: center;
        }
      }
@@ -694,4 +736,111 @@
.hidden {
  display: none; /* 隐藏元素 */
}

// .ring-container {
//   position: relative;
//   width: 85px;
//   height: 85px;
//   display: flex;
//   justify-content: center;
//   align-items: center;
// }

// .outer-ring {
//   position: absolute;
//   width: 100%;
//   height: 100%;
//   border-radius: 50%;
//   background: transparent;
//   border: 1px solid #3498db; /* 外环颜色 */
// }

// .inner-ring {
//   position: absolute;
//   width: 80%;
//   height: 80%;
//   border-radius: 50%;
//   background: transparent;
//   box-shadow: inset 0 0 30px #084b71;
//   border: 1px solid #3c5da9;
// }

// .quan1{
//   position: absolute;
//     top: 142px;
//     left: 19px;
// }

.quan1 {
  position: absolute;
  background-size: 100% 100%;
  content: "";
  width: 125px;
  height: 118px;
  z-index: -1;
  top: 117px;
  left: 3px;
  transform: scaleY(2);
  border-radius: 100%;
  background-image: url("@/assets/images/quan.png"); /* 替换为您的背景图路径 */
  background-size: cover; /* 或使用 contain，根据需要选择 */
  background-repeat: no-repeat;
  background-size: 95%;
}

.quan2 {
  position: absolute;
  background-size: 100% 100%;
  content: "";
  width: 125px;
  height: 118px;
  z-index: -1;
  top: 117px;
  left: 120px;
  transform: scaleY(2);
  border-radius: 100%;
  background-image: url("@/assets/images/quan.png"); /* 替换为您的背景图路径 */
  background-size: cover; /* 或使用 contain，根据需要选择 */
  background-repeat: no-repeat;
  background-size: 95%;
}
.box100 {
  position: absolute;
  left: 25%;
  top: 35%;
  width: 67px;
  z-index: 9999;
}

.box200 {
  position: absolute;
  left: 4%;
  top: 48%;
  width: 77px;
  z-index: 9999;
}
.box300 {
  position: absolute;
  left: 44%;
  top: 49%;
  width: 75px;
  z-index: 9999;
}
.title1 {
  transform: scaleY(2);
  font-size: 12px;
  display: block;
  margin-top: 7px;
}
.zuozi {
  position: absolute;
  top: 10px;
  left: 10px;
}
.line100 {
  position: absolute;
  left: 5px;
  top: 64%;
  height: 18px;
}
</style>