86 lines
2.5 KiB
Vue
86 lines
2.5 KiB
Vue
<script setup>
|
|
import { computed, defineProps, onBeforeMount, ref } from 'vue';
|
|
import typeJson from './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" style="">
|
|
<!-- <template v-slot:default="{ progressValue }"> -->
|
|
<strong class="answer">{{ props.value }}</strong>
|
|
<!-- </template> -->
|
|
</v-progress-linear>
|
|
</template>
|
|
<style>
|
|
.v-progress-linear__determinate {
|
|
border-radius: 0px 5px 5px 0px !important;
|
|
}
|
|
|
|
.answer {
|
|
background: rgb(var(--v-theme-yellow));
|
|
border-radius: 25px 25px 25px 25px;
|
|
padding-left: 7px;
|
|
padding-right: 7px;
|
|
font-size: 10px;
|
|
color: white;
|
|
font-weight: 500;
|
|
}
|
|
</style>
|