11-mes-new/src/views/EquipmentManager/components/EquipmentAnalysisBox.vue

<template>
  <TechyBox class="equipment-analysis-box flex gap-16">
    <div class="equipment-analysis-box__title">
      {{ name }}
    </div>
    <div class="param-list grow flex flex-col gap-8 justify-center">
      <div class="flex items-center gap-8">
        <span class="param-name">OEE</span>
        <div class="progress-bar grow">
          <ProgreeBar :process="+oee * 100" />
        </div>
        <span class="param-value">{{ oee | noDecimalFilter }}%</span>
      </div>
      <div class="flex items-center gap-8">
        <span class="param-name">MTBR</span>
        <div class="progress-bar grow">
          <ProgreeBar :process="+mtbr * 100" :colors="['#2EC6B4', '#85F6E9']" />
        </div>
        <span class="param-value">{{ mtbr | noDecimalFilter }}%</span>
      </div>
      <div class="flex items-center gap-8">
        <span class="param-name">MTBF</span>
        <div class="progress-bar grow">
          <ProgreeBar :process="+mtbf * 100" :colors="['#EB46A1', '#FF8BC3']" />
        </div>
        <span class="param-value">{{ mtbf | noDecimalFilter }}%</span>
      </div>
    </div>
  </TechyBox>
</template>

<script>
import TechyBox from './TechyBox.vue'

const ProgreeBar = {
  name: 'ProgressBar',
  props: {
    process: {
      type: Number,
      default: 0
    },
    colors: {
      type: Array,
      default: () => ['#1295FF', '#9DD5FF']
    }
  },
  data() {
    return {}
  },
  render: function(h) {
    return h(
      'div',
      {
        style: {
          height: '0.5vh',
          width: '100%',
          borderRadius: '8px',
          position: 'relative',
          background: '#1E2D4590',
          // background: 'red',
          overflow: 'hidden'
        }
      },
      [
        h(
          'div',
          {
            style: {
              position: 'absolute',
              left: 0,
              top: 0,
              width: this.process + '%',
              height: '100%',
              borderRadius: '8px',
              background: `linear-gradient(to right, ${this.colors[0]}, ${this.colors[1]})`
            }
          },
          ''
        )
      ]
    )
  }
}

export default {
  name: 'EquipmentAnalysisBox',
  components: { TechyBox, ProgreeBar },
  filters: {
    noDecimalFilter(val) {
      // val: string or number
      if (typeof val === 'string') val = parseFloat(val)
      return (val * 100).toFixed(0)
    }
  },
  props: {
    name: String,
    oee: [String, Number],
    mtbf: [String, Number],
    mtbr: [String, Number]
  },
  data() {
    return {}
  },
  created() {},
  mounted() {},
  methods: {}
}
</script>

<style scoped>
.equipment-analysis-box {
  color: white;
  padding: 12px;
}

.equipment-analysis-box__title {
  font-size: 1.25vh;
  line-height: 2vh;
  letter-spacing: 1px;
  width: 3vw;
  overflow-wrap: break-word;
  align-self: center;
  text-align: center;
}

.param-list {
  position: relative;
}

.param-name {
  opacity: 70%;
  text-align: right;
  /* font-size: 12px;
  line-height: 14px;
  width: 36px; */
  font-size: 1vh;
  line-height: 1.2;
  width: 2vw;
}
.param-value {
  opacity: 70%;
  text-align: left;
  /* font-size: 12px;
  line-height: 14px;
  width: 24px; */
  font-size: 1vh;
  line-height: 1.2;
  width: 1.5vw;
}

.param-list::before {
  content: '';
  position: absolute;
  left: -11px;
  top: 10%;
  width: 1px;
  /* height: 100%; */
  height: 80%;
  background: linear-gradient(to bottom, transparent, #ffffff8c, transparent);
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.grow {
  flex-grow: 1;
}

.gap-8 {
  /* gap: 8px; */
  gap: 0.8vh;
}
.gap-16 {
  /* gap: 16px; */
  gap: 1.6vh;
}
</style>