{"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":[]}