222

schangxiang@126.com

2025-09-26 2b05362eba2f989b7857349cc9a3a1c12f8181b6

 yiqi_screen/src/components/Content.vue

@@ -1,83 +1,131 @@
<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 src="~@/assets/images/9.png" class="line100" alt="line100" />
          <p style="color: white;"> {{equipmentStatusData}} </p> -->

        <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" />

          <!-- 顶部 -->
          <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
            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_op325"
          />

          <img
            :src="require(`@/assets/images/${imageColor['OP10']}/OP40.png`)"
            class="euip OP40"
          />
          <img
            :src="require(`@/assets/images/${imageColor['unit']}/unit.png`)"
            class="euip unit"
          />
        </div>
      </div>
      <!-- <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
            style="
              color: #fff;
              margin: 0 0.13rem;
              text-align: center;
              font-size: 0.17rem;
            "
          >
          <div class="echarts-title">
            <span class="title1"> 质量数据趋势图 </span>
          </div>
          <div class="box11">
            {{ qualityData.qualityType }}
          </div>
          <div>
            <div class="box12"></div>
            <div
              style="
                margin: 0 0.13rem;
                height: 0.13rem;
                background-color: #f14158;
              "
            ></div>
            <div
              style="
                margin: 0 0.13rem;
                height: 0.13rem;
                background-color: #a7cf29;
                background-color: #e6e705;
              "
            ></div>
          </div>
@@ -87,7 +135,7 @@
              style="
                margin: 0 0.13rem;
                height: 0.13rem;
                background-color: #a7cf29;
                background-color: #e6e705;
              "
            ></div>
            <div
@@ -100,29 +148,49 @@
          </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">
          <!-- 当前班组实际生产数量 -->
            <!-- 当前班组实际生产数量 -->
            {{ 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">
          <div class="echarts-title">生产完成趋势</div>
          <div class="echarts-title">
            <span class="title1"> 生产完成趋势 </span>
          </div>
          <ProductionCompletionTrend
            :produceCompletionData="produceCompletionData"
          />
@@ -142,7 +210,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,15 +314,21 @@
    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) {
            // 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);
      }
@@ -270,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() {
@@ -314,6 +389,10 @@
      }
    },
  },
  mounted() {

  },

  // beforeDestroy(){
  //   clearInterval(this.dataTimer)
  //   clearInterval(this.dateTimer)
@@ -321,204 +400,254 @@
};
</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 {
      font-family: Source Han Sans CN;
      display: flex;
    vertical-align: middle;
    align-items: center;
      color: #41c7de;
      font-size: 0.38rem;
      vertical-align: middle;
      align-items: center;
      font-size: 40px;
      font-weight: 700;
      position: absolute;
      top: .31rem;
      top: 12px;
      left: 50%;
      transform: translate(-50%);
      letter-spacing: 8px;
      .imgTitle{
        width: 0.7rem;
        margin-right: .2rem;

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

      .imgTitle {
        width: 117px;
        margin-right: 69px;
      }
    }

    .left-text {
      font-size: 0.19rem;
      font-size: 16px;
      color: #fff;
      position: absolute;
      top: 1.15rem;
      left: 5rem;
      top: 79px;
      left: 37px;
      width: 368px;
      text-align: right;
      line-height: 23px;
      font-weight: 700;
      transform: scaleY(2);
    }

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

  .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: 526px;
      }

      .prodline {
        width:95%;
        width: 95%;
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        height: 225px;
      }

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

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

      .OP05{
        top: -1.58rem;
        left: 0.12rem;   
      .OP05 {
        top: -122px;
        left: -223px;
      }

      .OP10,.OP40{
        top: -1.48rem;
        left: 0.5rem;
      .OP10,
      .OP40 {
        top: -133px;
        left: -145px;
        height: 904px;
      }

      .OP20{
        top: -1.8rem;
        left: 0.6rem;
      .OP20 {
        top: -95px;
        left: -77px;
        width: 86%;
      }

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

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

      .OP50{
        top: -1.69rem;
        left: 1.05rem;
      .OP50 {
        top: -108px;
        left: 11px;
        width: 90%;
      }

      .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{
      .unit {
        top: -113px;
        left: 86px;
        transform: scale(1.2);
      }

      .OP80 {
        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: 336px;
      display: flex;
      // background-color: skyblue;

      justify-content: center;
      .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;
      }

@@ -527,14 +656,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 #0739a3;
        }
      }

@@ -543,30 +672,31 @@

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

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

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

@@ -579,4 +709,138 @@
    }
  }
}
</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; /* 隐藏元素 */
}

// .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>