一汽大屏 未提交的代码

liuying

2025-04-28 0630126012170da25291d55f0a1bd3130e64f434

 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>
@@ -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,35 +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(){
@@ -424,28 +451,28 @@
    }

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

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

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

      .prodline {
@@ -482,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 {
@@ -500,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 {
@@ -549,8 +584,13 @@
        width: 101%;
      }

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

      .OP80 {
        top: -1.95rem;
        left: 1.98rem;
      }
@@ -563,7 +603,7 @@
    }

    .main-bottom {
      height: 320px;
      height: 336px;
      display: flex;
      justify-content: center;
      .border_left1 {
@@ -624,7 +664,6 @@
          color: #00f8c6;
          text-align: center;
          border-bottom: 2px solid #0739a3;
          
        }
      }

@@ -697,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>