yudao-init/src/views/copilot/factoryData/components/ProdMonitorOld.vue

<!--
 * @Author: zhp
 * @Date: 2024-05-21 14:25:19
 * @LastEditTime: 2024-05-21 14:25:19
 * @LastEditors: zhp
 * @Description:
-->
<template>
  <div class="prod-monitor">
    <div class="fto-box">
      <div class="icon">
        <img
          src="./../assets/images/fto.png"
          alt=""
          style="width: 2.1875vw; height: 2.2875vw"
        />
      </div>
      <div class="middle-box">
        <span class="type">玻璃类型</span>
        <span class="type-name">FTO投入</span>
      </div>
      <div class="right-box">
        <span class="type">投入数量</span>
        <span class="num">{{ prodFto[0] ? prodFto[0].chipInput : 0 }}</span>
      </div>
    </div>
    <div class="std-box">
      <div class="icon">
        <img
          src="./../assets/images/std.png"
          alt=""
          style="width: 2.1875vw; height: 2.1875vw"
        />
      </div>
      <div class="middle-box">
        <div class="separate">
          <div>
            <span class="type">玻璃类型</span>
            <span class="type-name">标准组检产量</span>
          </div>
          <div>
            <span class="type">良品数量</span>
            <span class="type-name">{{
              msgObj.stand.goodNumber ? msgObj.stand.goodNumber : 0
            }}</span>
          </div>
        </div>
      </div>
      <div class="right-box">
        <div class="separate">
          <div>
            <span class="type">生产数量</span>
            <span class="num">{{
              msgObj.stand.outputNumber ? msgObj.stand.outputNumber : 0
            }}</span>
          </div>
          <div>
            <span class="type1">良品率</span>
            <span class="num"
              >{{ msgObj.stand.yieldRate ? msgObj.stand.yieldRate : 0 }}%</span
            >
          </div>
        </div>
      </div>
    </div>
    <div class="chip-box">
      <div class="icon">
        <img
          src="./../assets/images/chip.png"
          alt=""
          style="width: 2.1875vw; height: 2.1875vw"
        />
      </div>
      <div class="middle-box">
        <div class="separate">
          <div>
            <span class="type">玻璃类型</span>
            <span class="type-name">芯片产量</span>
          </div>
          <div>
            <span class="type">良品数量</span>
            <span class="type-name">{{
              msgObj.chip.goodNumber ? msgObj.chip.goodNumber : 0
            }}</span>
          </div>
        </div>
      </div>
      <div class="right-box">
        <div class="separate">
          <div>
            <span class="type">生产数量</span>
            <span class="num">{{
              msgObj.chip.outputNumber ? msgObj.chip.outputNumber : 0
            }}</span>
          </div>
          <div>
            <span class="type1">良品率</span>
            <span class="num"
              >{{ msgObj.chip.yieldRate ? msgObj.chip.yieldRate : 0 }}%</span
            >
          </div>
        </div>
      </div>
    </div>
    <div class="bipv-box">
      <div class="icon">
        <img
          src="./../assets/images/bipv.png"
          alt=""
          style="width: 2.1875vw; height: 2.1875vw"
        />
      </div>
      <div class="middle-box">
        <div class="separate">
          <div>
            <span class="type">玻璃类型</span>
            <span class="type-name">BIPV产量</span>
          </div>
          <div>
            <span class="type">良品数量</span>
            <span class="type-name">{{
              msgObj.bipv.goodNumber ? msgObj.bipv.goodNumber : 0
            }}</span>
          </div>
        </div>
      </div>
      <div class="right-box">
        <div class="separate">
          <div>
            <span class="type">生产数量</span>
            <span class="num">{{
              msgObj.bipv.outputNumber ? msgObj.bipv.outputNumber : 0
            }}</span>
          </div>
          <div>
            <span class="type1">良品率</span>
            <span class="num"
              >{{ msgObj.bipv.yieldRate ? msgObj.bipv.yieldRate : 0 }}%</span
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "ProdMonitor",
  data() {
    return {
      msgObj: {
        stand: {},
        chip: {},
        bipv: {},
      },
    };
  },
  props: {
    prodOutPut: {
      type: Array,
      default: [],
    },
    prodFto: {
      type: Array,
      default: [],
    },
  },
  watch: {
    prodOutPut() {
      this.makeData();
    },
  },
  mounted() {
    this.makeData();
  },
  methods: {
    makeData() {
      this.msgObj.chip = {};
      this.msgObj.stand = {};
      this.msgObj.bipv = {};
      if (this.prodOutPut.length > 0) {
        this.prodOutPut.map((item) => {
          if (item.glassType === 0) {
            this.msgObj.chip = item;
          } else if (item.glassType === 1) {
            this.msgObj.stand = item;
          } else if (item.glassType === 2) {
            this.msgObj.bipv = item;
          }
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.prod-monitor {
  height: 100%;
  display: flex;
  gap: 6px;
  flex-direction: column;
  .fto-box,
  .std-box,
  .chip-box,
  .bipv-box {
    box-shadow: inset 0 0 12px 2px #fff3;
    border-radius: 4px;
    display: flex;
    align-items: center;
    .icon {
      flex: 1;
      text-align: center;
    }
    .middle-box {
      flex: 2.086;
      position: relative;
    }
    .right-box {
      flex: 2.424;
      position: relative;
    }
    .type {
      display: inline-block;
      font-size: 0.9375vw;
      color: #6db6ff;
      position: relative;
      text-align: right;
      padding-right: 0.417vw;
      letter-spacing: 2px;
      width: 6.25vw;
    }
    .type1 {
      display: inline-block;
      font-size: 0.9375vw;
      color: #6db6ff;
      position: relative;
      text-align: right;
      padding-right: 0.6vw;
      width: 6.25vw;
      padding-left: 1.6vw;
      text-align: justify;
      text-align-last: justify;
    }
    .type-name {
      font-size: 1.042vw;
      color: #fff;
      position: relative;
      text-align: left;
      padding-left: 0.573vw;
    }
    .type-name::before {
      content: "";
      display: inline-block;
      width: 1px;
      height: 1.042vw;
      border: 1px solid;
      border-image: linear-gradient(
          180deg,
          rgba(0, 176, 243, 0),
          rgba(31, 143, 255, 1)
        )
        2 2;
      position: absolute;
      left: 0;
      top: 4px;
    }
    .num {
      font-size: 1.042vw;
      color: #fff;
      position: relative;
      text-align: left;
      padding-left: 0.573vw;
    }
    .num::before {
      content: "";
      display: inline-block;
      width: 1px;
      height: 1.042vw;
      border: 1px solid;
      border-image: linear-gradient(
          180deg,
          rgba(0, 176, 243, 0),
          rgba(31, 143, 255, 1)
        )
        2 2;
      position: absolute;
      left: 0;
      top: 4px;
    }
  }
  .fto-box {
    flex: 1;
    .type::before {
      content: "";
      display: inline-block;
      width: 1px;
      height: 1.6146vw;
      border: 1px solid;
      border-image: linear-gradient(
          135deg,
          rgba(0, 176, 243, 0),
          rgba(31, 143, 255, 1),
          rgba(31, 143, 255, 0)
        )
        2 2;
      position: absolute;
      left: 0;
      top: -2px;
    }
  }
  .std-box {
    flex: 1.3;
  }
  .chip-box {
    flex: 1.3;
  }
  .bipv-box {
    flex: 1.3;
  }
  .std-box,
  .chip-box,
  .bipv-box {
    .separate::before {
      content: "";
      display: inline-block;
      width: 1px;
      height: 3.125vw;
      border: 1px solid;
      border-image: linear-gradient(
          135deg,
          rgba(0, 176, 243, 0),
          rgba(31, 143, 255, 1),
          rgba(31, 143, 255, 0)
        )
        2 2;
      position: absolute;
      left: 0;
      top: -2px;
    }
  }
}
</style>