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" :max="30" :colors="['#2EC6B4', '#85F6E9']" />
        </div>
        <span class="param-value">{{ mtbr }}min</span>
      </div>
      <div class="flex items-center gap-8">
        <span class="param-name">MTBF</span>
        <div class="progress-bar grow">
          <ProgreeBar :process="+mtbf" :max="99999" :colors="['#EB46A1', '#FF8BC3']" />
        </div>
        <span class="param-value">{{ mtbf }}h</span>
      </div>
    </div>
  </TechyBox>
</template>

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

const ProgreeBar = {
  name: 'ProgressBar',
  props: {
    process: {
      type: Number,
      default: 0
    },
    max: {
      type: Number,
      default: 100
    },
    colors: {
      type: Array,
      default: () => ['#1295FF', '#9DD5FF']
    }
  },
  data() {
    return {}
  },
  render: function(h) {
    return h(
      'div',
      {
        style: {
          height: '100%',
          width: '100%',
          borderRadius: 'calc(8px * var(--beilv))',
          position: 'relative',
          background: '#1E2D4590',
          overflow: 'hidden'
        }
      },
      [
        h(
          'div',
          {
            style: {
              position: 'absolute',
              left: 0,
              top: 0,
              width: this.process / this.max * 100 + '%',
              height: '100%',
              borderRadius: 'calc(8px * var(--beilv))',
              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: calc(14px * var(--beilv));
  line-height: calc(18px * var(--beilv));
  letter-spacing: calc(1px * var(--beilv));
  width: 30%;
  overflow-wrap: break-word;
  align-self: center;
  text-align: center;
}

.param-list {
  position: relative;
}

.param-name {
  opacity: 70%;
  text-align: right;
  font-size: calc(12px * var(--beilv));
  line-height: calc(14px * var(--beilv));
  width: 20%;
}
.param-value {
  opacity: 70%;
  text-align: left;
  /* font-size: 12px;
  line-height: 14px;
  width: 24px; */
  font-size: calc(12px * var(--beilv));
  line-height: calc(14px * var(--beilv));
  width: 18%;
}

.param-list::before {
  content: '';
  position: absolute;
  left: calc(-10px * var(--beilv));
  width: 2px;
  height: 100%;
  background: linear-gradient(to bottom, transparent, #455670, transparent);
}

.progress-bar {
  height: calc(8px * var(--beilv));
}

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