src/pages/Travel/ExtraCommunity.vue

@@ -432,9 +432,14 @@ const handleDragScroll = (event) => {
     }
 };
 
-const getKgPercentage = ({ kg, loadedKg, volumeKg }) => {
+const getRate = ({ kg, loadedKg, volumeKg }) => {
     return Math.round((Math.max(loadedKg || 0, volumeKg || 0) / kg) * 100);
 };
+
+const getColor = (percentage) => {
+    if (percentage >= 100) return 'red-10';
+    else if (percentage >= 80 && percentage < 100) return 'deep-orange-10';
+};
 </script>
 
 <template>
@@ -512,14 +517,9 @@ const getKgPercentage = ({ kg, loadedKg, volumeKg }) => {
                         >
                             <QChip
                                 v-if="col.name === 'percentage'"
-                                :label="getKgPercentage(props.row) + '%'"
+                                :label="getRate(props.row) + '%'"
                                 class="text-left q-py-xs q-px-sm"
-                                :class="{
-                                    'bg-red-10': getKgPercentage(props.row) >= 100,
-                                    'bg-deep-orange-10':
-                                        getKgPercentage(props.row) >= 80 &&
-                                        getKgPercentage(props.row) < 100,
-                                }"
+                                :color="getColor(getRate(props.row))"
                             />
                             <span
                                 v-else-if="col.showValue"
@@ -599,6 +599,7 @@ const getKgPercentage = ({ kg, loadedKg, volumeKg }) => {
         </QTable>
     </QPage>
 </template>
+
 <style scoped lang="scss">
 .q-chip {
     color: var(--vn-text-color);