ld/ld-site
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add weight conversion to unit conversion tool.

Browse Source
This commit is contained in:
liding 2024-06-30 08:17:43 +08:00
parent 5131b9396b
commit 1146f3b180
2 changed files with 150 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/tool/unit_conversion/UnitConversionWrapper.astro
View File

@ -1,5 +1,8 @@
---
import DataUnitConversion from "./DataUnitConversion.vue";
import WeightConversion from "./WeightConversion.vue";
---
<DataUnitConversion client:load />
<WeightConversion client:load />

147
src/components/tool/unit_conversion/WeightConversion.vue Normal file
View File

@ -0,0 +1,147 @@
<script setup>
import { computed, ref } from 'vue';
import BigNumber from "bignumber.js";
/**
* @typedef {string} UnitNameStr
*/
/**
* @enum {UnitNameStr}
*/
const twToMetricUnitName = Object.freeze({
JIN: "jin",
LIANG: "liang",
QIAN: "qian",
FEN: "fen",
GRAM: "gram",
KILOGRAM: "kilogram"
})
/**
* @enum {number}
*/
const twToMetricUnitNameToWeight = Object.freeze({
[twToMetricUnitName.JIN]: 600,
[twToMetricUnitName.LIANG]: 600 / 16,
[twToMetricUnitName.QIAN]: 600 / 16 / 10,
[twToMetricUnitName.FEN]: 600 / 16 / 10 / 10,
[twToMetricUnitName.GRAM]: 1,
[twToMetricUnitName.KILOGRAM]: 1 * 1000,
})
const weight = ref({
[twToMetricUnitName.JIN]: '',
[twToMetricUnitName.LIANG]: '',
[twToMetricUnitName.QIAN]: '',
[twToMetricUnitName.FEN]: '',
[twToMetricUnitName.GRAM]: '',
[twToMetricUnitName.KILOGRAM]: '',
});
/**
* Change ref variable when user inputs some characters.
* @param {UnitNameStr} unitName
* @returns {void}
*/
function weightChanged(unitName) {
/**
* @type {object.<UnitNameStr, string>}
*/
let result = {};
// assign 0 to current input if nothing is passed
if (weight.value[unitName].length === 0) result[unitName] = '0';
let inputedGram = new BigNumber(twToMetricUnitNameToWeight[unitName]).multipliedBy(weight.value[unitName]);
for (const key in twToMetricUnitNameToWeight) {
result[key] = inputedGram.div(twToMetricUnitNameToWeight[key]).toString();
}
result[unitName] = weight.value[unitName];
for (const key in twToMetricUnitNameToWeight) {
if (result[key] !== 'NaN') {
weight.value[key] = result[key];
} else if (result[key] === 'NaN') {
weight.value[key] = '';
}
}
}
</script>
<template>
<h1>重量换算</h1>
<div class="unit-conversion-computation-area metric">
<p>公制重量:</p>
<div class="unit-conversion-computation-node">
<input class="size-text" :id="twToMetricUnitName.KILOGRAM" type="text"
v-model="weight[twToMetricUnitName.KILOGRAM]" @input="weightChanged(twToMetricUnitName.KILOGRAM)">
<span class="unit-name">千克</span>
</div>
<div class="unit-conversion-computation-node">
<input class="size-text" :id="twToMetricUnitName.GRAM" type="text" v-model="weight[twToMetricUnitName.GRAM]"
@input="weightChanged(twToMetricUnitName.GRAM)">
<span class="unit-name">克</span>
</div>
</div>
<div class="unit-conversion-computation-area tw">
<p>台湾制重量:</p>
<div class="unit-conversion-computation-node">
<input class="size-text" :id="twToMetricUnitName.JIN" type="text" v-model="weight[twToMetricUnitName.JIN]"
@input="weightChanged(twToMetricUnitName.JIN)">
<span class="unit-name">斤</span>
</div>
<div class="unit-conversion-computation-node">
<input class="size-text" :id="twToMetricUnitName.LIANG" type="text" v-model="weight[twToMetricUnitName.LIANG]"
@input="weightChanged(twToMetricUnitName.LIANG)">
<span class="unit-name">两</span>
</div>
<div class="unit-conversion-computation-node">
<input class="size-text" :id="twToMetricUnitName.QIAN" type="text" v-model="weight[twToMetricUnitName.QIAN]"
@input="weightChanged(twToMetricUnitName.QIAN)">
<span class="unit-name">钱</span>
</div>
<div class="unit-conversion-computation-node">
<input class="size-text" :id="twToMetricUnitName.FEN" type="text" v-model="weight[twToMetricUnitName.FEN]"
@input="weightChanged(twToMetricUnitName.FEN)">
<span class="unit-name">分</span>
</div>
</div>
</template>
<style>
h1,
p,
.unit-conversion-computation-node {
margin: 0.5em 0;
}
.unit-conversion-computation-node {
float: left;
width: 170px;
margin: 0 8px 0 0;
}
.size-text {
margin: 0 6px 0 0;
width: 115px
}
@media screen and (max-width: 395px) {
.unit-conversion-computation-node {
width: 130px;
}
.size-text {
width: 85px;
}
}
.unit-conversion-computation-area::after {
content: '';
display: block;
clear: both;
}
.unit-conversion-computation-result {
margin: 0.5em 0 0.5em 0;
height: 1em;
}
</style>