67 lines
2.0 KiB
Vue
67 lines
2.0 KiB
Vue
<script setup>
|
|
import { computed, defineProps, onBeforeMount, ref } from 'vue';
|
|
import typeJson from '../patients/type_parse.json';
|
|
|
|
const allTypes = ref(typeJson);
|
|
const props = defineProps({
|
|
type: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
value: {
|
|
type: String,
|
|
required: false,
|
|
},
|
|
})
|
|
|
|
const bgColor = ref(null)
|
|
const operator = {
|
|
c(obj, value) {
|
|
let keys = Object.keys(obj.values)
|
|
let prev = 0;
|
|
for (let key of keys) {
|
|
if (key > prev && key <= value) {
|
|
prev = key
|
|
}
|
|
}
|
|
return obj.values[prev]
|
|
},
|
|
e(obj, value) {
|
|
|
|
return obj.values[value]
|
|
},
|
|
}
|
|
const progressValue = ref(0); // Initialize progress value with 0
|
|
const finalValue = computed(() => {
|
|
const singleObject = allTypes.value[props.type];
|
|
// console.log('singleObject', singleObject)
|
|
if (operator[singleObject.type](singleObject, props.value) > 0 && operator[singleObject.type](singleObject, props.value) <= 33) {
|
|
bgColor.value = 'success'
|
|
}
|
|
if (operator[singleObject.type](singleObject, props.value) > 33 && operator[singleObject.type](singleObject, props.value) <= 50) {
|
|
bgColor.value = 'yellow'
|
|
}
|
|
if (operator[singleObject.type](singleObject, props.value) > 50 && operator[singleObject.type](singleObject, props.value) <= 80) {
|
|
bgColor.value = 'warning'
|
|
}
|
|
if (operator[singleObject.type](singleObject, props.value) > 80 && operator[singleObject.type](singleObject, props.value) <= 100) {
|
|
bgColor.value = 'red'
|
|
}
|
|
return operator[singleObject.type](singleObject, props.value)
|
|
|
|
})
|
|
|
|
onBeforeMount(async () => {
|
|
await new Promise(resolve => {
|
|
setTimeout(() => {
|
|
progressValue.value = finalValue.value;
|
|
resolve();
|
|
}, 500); // Simulating some delay, you can replace this with your actual async logic
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<v-progress-linear :model-value="progressValue" :height="22" :color="bgColor"></v-progress-linear>
|
|
</template>
|