'init'

src/views/EquipmentManager/components/EquipmentAnalysisBox.vue

@@ -0,0 +1,190 @@
+<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>