184 lines
3.5 KiB
Vue
184 lines
3.5 KiB
Vue
<template>
|
|
<div class="tool-detail-page">
|
|
|
|
<!-- 计算模式 -->
|
|
<n-card size="small" title="计算模式">
|
|
<n-form-item
|
|
class="form-item-no-feedback"
|
|
:show-label="false"
|
|
>
|
|
<n-select
|
|
v-model:value="mode"
|
|
:options="[
|
|
{ label: '1 -> 2', value: '1-to-2' },
|
|
{ label: '2 -> 1', value: '2-to-1' },
|
|
]"
|
|
:on-blur="update"
|
|
/>
|
|
</n-form-item>
|
|
</n-card>
|
|
|
|
<!-- 小数位数 -->
|
|
<n-card size="small" title="小数位数">
|
|
<n-form-item
|
|
class="form-item-no-feedback"
|
|
:show-label="false"
|
|
>
|
|
<n-input-number
|
|
v-model:value="decimals"
|
|
:min="0"
|
|
:max="10"
|
|
:precision="0"
|
|
:step="1"
|
|
:on-blur="update"
|
|
></n-input-number>
|
|
</n-form-item>
|
|
</n-card>
|
|
|
|
<!-- 基础比例 -->
|
|
<n-card size="small" title="基础比例">
|
|
<n-form-item
|
|
class="form-item-no-feedback"
|
|
:show-label="false"
|
|
>
|
|
<n-input-number
|
|
v-model:value="base.a"
|
|
:min="limit.min"
|
|
:max="limit.max"
|
|
:precision="0"
|
|
:step="1"
|
|
:on-blur="update"
|
|
></n-input-number>
|
|
<span class="split">:</span>
|
|
<n-input-number
|
|
v-model:value="base.b"
|
|
:min="limit.min"
|
|
:max="limit.max"
|
|
:precision="0"
|
|
:step="1"
|
|
:on-blur="update"
|
|
></n-input-number>
|
|
</n-form-item>
|
|
</n-card>
|
|
|
|
<!-- 计算比例 -->
|
|
<n-card size="small" title="计算比例">
|
|
<n-form-item
|
|
class="form-item-no-feedback"
|
|
:show-label="false"
|
|
>
|
|
<n-input-number
|
|
v-model:value="calc.a"
|
|
:disabled="mode === '2-to-1'"
|
|
:step="1"
|
|
:on-blur="update"
|
|
></n-input-number>
|
|
<span class="split">:</span>
|
|
<n-input-number
|
|
v-model:value="calc.b"
|
|
:disabled="mode === '1-to-2'"
|
|
:step="1"
|
|
:on-blur="update"
|
|
></n-input-number>
|
|
</n-form-item>
|
|
</n-card>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
bignumber, divide, floor, multiply, number, round,
|
|
} from 'mathjs';
|
|
|
|
import {
|
|
NCard, NFormItem, NInputNumber, NSelect,
|
|
} from 'naive-ui';
|
|
|
|
import {
|
|
reactive, ref,
|
|
} from 'vue';
|
|
|
|
/** 基础比例 */
|
|
const base = reactive({
|
|
a: 1,
|
|
b: 1,
|
|
});
|
|
|
|
/** 计算比例 */
|
|
const calc = reactive({
|
|
a: 1,
|
|
b: 1,
|
|
});
|
|
|
|
/** 小数位数 */
|
|
const decimals = ref(5);
|
|
|
|
/** 数值范围限制 */
|
|
const limit = {
|
|
min: -99999999,
|
|
max: 99999999,
|
|
};
|
|
|
|
/** 模式 */
|
|
const mode = ref('1-to-2');
|
|
|
|
/** 计算 */
|
|
function calculate() {
|
|
|
|
let { min, max } = limit;
|
|
|
|
let useMode = mode.value;
|
|
let ratio = divide(bignumber(base.a), bignumber(base.b));
|
|
|
|
if (useMode === '1-to-2') {
|
|
|
|
// 注：只允许整数
|
|
let a = number(floor(calc.a));
|
|
|
|
(a < min) && (a = min);
|
|
(a > max) && (a = max);
|
|
|
|
calc.a = a;
|
|
calc.b = number(round(divide(bignumber(a), ratio), decimals.value));
|
|
|
|
} else if (useMode === '2-to-1') {
|
|
|
|
// 注：只允许整数
|
|
let b = number(floor(calc.b));
|
|
|
|
(b < min) && (b = min);
|
|
(b > max) && (b = max);
|
|
|
|
calc.a = number(round(multiply(bignumber(b), ratio), decimals.value));
|
|
calc.b = b;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
/** 更新 */
|
|
function update() {
|
|
calculate();
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.tool-detail-page {
|
|
:deep(.n-input-number) {
|
|
width: 12em;
|
|
}
|
|
|
|
:deep(.n-select) {
|
|
width: 12em;
|
|
}
|
|
}
|
|
|
|
.split {
|
|
display: inline-block;
|
|
width: 2em;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
}
|
|
</style>
|