123 lines
4.1 KiB
Vue
123 lines
4.1 KiB
Vue
<template>
|
|
<div class="calculator-container">
|
|
<v-row justify="center">
|
|
<!-- 参数输入区域 -->
|
|
<v-col
|
|
cols="12"
|
|
lg="5"
|
|
md="6"
|
|
>
|
|
<v-card
|
|
class="pa-6 parameter-card"
|
|
elevation="8"
|
|
rounded="xl"
|
|
>
|
|
<v-card-title class="text-h5 mb-6 d-flex align-center">
|
|
<v-icon
|
|
class="mr-3"
|
|
color="primary"
|
|
icon="mdi-tune"
|
|
size="large"
|
|
/>
|
|
{{ $t('parameters') }}
|
|
</v-card-title>
|
|
|
|
<v-row>
|
|
<v-col cols="12">
|
|
<param-input-field
|
|
v-model="paperCoreDiameter"
|
|
:label="`${$t('paperCoreDiameter')} (${paperCoreDiameter.unit})`"
|
|
/>
|
|
</v-col>
|
|
<v-col cols="12">
|
|
<param-input-field
|
|
v-model="paperRollWallThickness"
|
|
:label="`${$t('paperRollWallThickness')} (${paperRollWallThickness.unit})`"
|
|
/>
|
|
</v-col>
|
|
<v-col cols="12">
|
|
<param-input-field
|
|
v-model="innerPaperWidth"
|
|
:label="`${$t('innerPaperWidth')} (${innerPaperWidth.unit})`"
|
|
/>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<v-divider class="my-6" />
|
|
|
|
<v-row>
|
|
<v-btn
|
|
block
|
|
color="warning"
|
|
prepend-icon="mdi-refresh"
|
|
size="large"
|
|
variant="outlined"
|
|
@click="resetParameters"
|
|
>
|
|
{{ $t('reset') }}
|
|
</v-btn>
|
|
</v-row>
|
|
</v-card>
|
|
</v-col>
|
|
|
|
<!-- 结果显示区域 -->
|
|
<v-col cols="12" lg="5" md="6">
|
|
<v-card class="pa-6 result-card" elevation="8" rounded="xl">
|
|
<v-card-title class="text-h5 mb-6 d-flex align-center">
|
|
<v-icon class="mr-3" color="primary" icon="mdi-calculator" size="large" />
|
|
{{ $t('results') }}
|
|
</v-card-title>
|
|
|
|
<v-row>
|
|
<v-col cols="12">
|
|
<result-card :label="$t('beltAngle')" :value="result.beltAngle" />
|
|
</v-col>
|
|
<v-col cols="12">
|
|
<result-card :label="$t('paperHolderAngle')" :value="result.paperHolderAngle" />
|
|
</v-col>
|
|
<v-col cols="12">
|
|
<result-card :label="$t('leadingLength')" :value="result.leadingLength" />
|
|
</v-col>
|
|
<v-col cols="12">
|
|
<result-card :label="$t('paperWidth')" :value="result.paperWidth" />
|
|
</v-col>
|
|
</v-row>
|
|
</v-card>
|
|
</v-col>
|
|
</v-row>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, ref } from 'vue'
|
|
import ParamInputField from '@/components/ParamInputField.vue'
|
|
import { createParam, type Param } from '@/types/param'
|
|
import { degreesToRadians, radiansToDegrees } from '@/utils/angle'
|
|
|
|
const paperCoreDiameter = ref<Param>(createParam(76.2, 'mm'))
|
|
const paperRollWallThickness = ref<Param>(createParam(10, 'mm'))
|
|
const innerPaperWidth = ref<Param>(createParam(105, 'mm'))
|
|
|
|
const result = computed(() => {
|
|
const paperRollExternalDiameter = paperCoreDiameter.value.value + 2 * paperRollWallThickness.value.value
|
|
const paperHolderAngle = 90 - radiansToDegrees(Math.acos(innerPaperWidth.value.value / (paperCoreDiameter.value.value * Math.PI)))
|
|
const leadingLength = innerPaperWidth.value.value / Math.sin(degreesToRadians(90 - paperHolderAngle))
|
|
const beltAngle = 90 - radiansToDegrees(Math.atan(paperRollExternalDiameter * Math.PI / leadingLength))
|
|
const paperWidth = leadingLength * Math.sin(Math.atan(paperRollExternalDiameter * Math.PI / leadingLength))
|
|
|
|
return {
|
|
beltAngle: createParam(beltAngle, '°'),
|
|
paperHolderAngle: createParam(paperHolderAngle, '°'),
|
|
leadingLength: createParam(leadingLength, 'mm'),
|
|
paperWidth: createParam(paperWidth, 'mm'),
|
|
}
|
|
})
|
|
|
|
const resetParameters = () => {
|
|
paperCoreDiameter.value = createParam(76.2, 'mm')
|
|
paperRollWallThickness.value = createParam(10, 'mm')
|
|
innerPaperWidth.value = createParam(105, 'mm')
|
|
}
|
|
|
|
</script>
|