<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: '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 + '%', 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: 15%; } .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>