| 1 |
- {"ast":null,"code":"export default {\n props: {\n ready: {\n type: Number,\n required: true\n },\n occupied: {\n type: Number,\n required: true\n },\n offline: {\n type: Number,\n required: true\n }\n },\n computed: {\n total() {\n return this.ready + this.occupied + this.offline;\n },\n statuses() {\n const readyProgress = this.ready / this.total * 100;\n const occupiedProgress = this.occupied / this.total * 100;\n const offlineProgress = this.offline / this.total * 100;\n return [{\n label: 'Ready',\n progress: readyProgress,\n count: this.ready\n }, {\n label: 'Occupied',\n progress: occupiedProgress,\n count: this.occupied\n }, {\n label: 'Offline',\n progress: offlineProgress,\n count: this.offline\n }];\n }\n }\n};","map":{"version":3,"names":["props","ready","type","Number","required","occupied","offline","computed","total","statuses","readyProgress","occupiedProgress","offlineProgress","label","progress","count"],"sources":["src/components/StatusBar/index.vue"],"sourcesContent":["<template>\n <div class=\"status-bar\">\n <div class=\"status-bar-item\" v-for=\"(status, index) in statuses\" :key=\"index\">\n <div class=\"status-label\">{{ status.label }}</div>\n <div class=\"status-progress\">\n <div class=\"status-progress-bar\" :style=\"{ width: status.progress + '%' }\"></div>\n <div class=\"status-count\">{{ status.count }}</div>\n </div>\n </div>\n </div>\n</template>\n\n<script>\nexport default {\n props: {\n ready: {\n type: Number,\n required: true\n },\n occupied: {\n type: Number,\n required: true\n },\n offline: {\n type: Number,\n required: true\n }\n },\n computed: {\n total() {\n return this.ready + this.occupied + this.offline;\n },\n statuses() {\n const readyProgress = (this.ready / this.total) * 100;\n const occupiedProgress = (this.occupied / this.total) * 100;\n const offlineProgress = (this.offline / this.total) * 100;\n\n return [\n { label: 'Ready', progress: readyProgress, count: this.ready },\n { label: 'Occupied', progress: occupiedProgress, count: this.occupied },\n { label: 'Offline', progress: offlineProgress, count: this.offline }\n ];\n }\n }\n};\n</script>\n\n<style scoped>\n.status-bar {\n margin-top: 1.11vh;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n}\n\n.status-bar-item {\n display: flex;\n flex-direction: row;\n align-items: center;\n margin-bottom: 1.11vh;\n}\n\n.status-label {\n margin-right: 10px;\n width:6.04vw;\n}\n\n.status-progress {\n width: 13.59vw;\n height: 100%;\n overflow: hidden;\n display: flex;\n align-items: center;\n /* height: 100%; */\n}\n\n.status-progress-bar {\n width: 0;\n height: 1.85vh;\n background: linear-gradient(180deg, #9EFB83 0%, #4AB22E 100%);\n border-radius: 10px;\n transition: width 0.3s;\n}\n\n.status-count {\n margin-left: 10px;\n}\n\n.status-bar-item:nth-child(1) .status-progress-bar{\n background: linear-gradient(180deg, #9EFB83 0%, #4AB22E 100%);\n}\n.status-bar-item:nth-child(2) .status-progress-bar{\n background: linear-gradient(180deg, #83CBFB 0%, #2E74B2 100%);\n}\n.status-bar-item:nth-child(3) .status-progress-bar{\n background: linear-gradient(180deg, #5f5f5f 0%, #7f7f7f 100%);\n}\n</style>"],"mappings":"AAaA;EACAA,KAAA;IACAC,KAAA;MACAC,IAAA,EAAAC,MAAA;MACAC,QAAA;IACA;IACAC,QAAA;MACAH,IAAA,EAAAC,MAAA;MACAC,QAAA;IACA;IACAE,OAAA;MACAJ,IAAA,EAAAC,MAAA;MACAC,QAAA;IACA;EACA;EACAG,QAAA;IACAC,MAAA;MACA,YAAAP,KAAA,QAAAI,QAAA,QAAAC,OAAA;IACA;IACAG,SAAA;MACA,MAAAC,aAAA,QAAAT,KAAA,QAAAO,KAAA;MACA,MAAAG,gBAAA,QAAAN,QAAA,QAAAG,KAAA;MACA,MAAAI,eAAA,QAAAN,OAAA,QAAAE,KAAA;MAEA,QACA;QAAAK,KAAA;QAAAC,QAAA,EAAAJ,aAAA;QAAAK,KAAA,OAAAd;MAAA,GACA;QAAAY,KAAA;QAAAC,QAAA,EAAAH,gBAAA;QAAAI,KAAA,OAAAV;MAAA,GACA;QAAAQ,KAAA;QAAAC,QAAA,EAAAF,eAAA;QAAAG,KAAA,OAAAT;MAAA,EACA;IACA;EACA;AACA"},"metadata":{},"sourceType":"module","externalDependencies":[]}
|
