158 lines
4.8 KiB
Vue
158 lines
4.8 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="paperRollExternalDiameter"
|
|
:label="`${$t('paperRollExternalDiameter')} (${paperRollExternalDiameter.unit})`"
|
|
/>
|
|
</v-col>
|
|
<v-col cols="12">
|
|
<param-input-field
|
|
v-model="paperRollWidth"
|
|
:label="`${$t('paperRollWidth')} (${paperRollWidth.unit})`"
|
|
/>
|
|
</v-col>
|
|
<v-col cols="12">
|
|
<param-input-field
|
|
v-model="paperDensity"
|
|
:label="`${$t('paperDensity')} (${paperDensity.unit})`"
|
|
/>
|
|
</v-col>
|
|
<v-col cols="12">
|
|
<param-input-field
|
|
v-model="paperGrammage"
|
|
:label="`${$t('paperGrammage')} (${paperGrammage.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('paperRollWeight')"
|
|
:value="result.paperRollWeight"
|
|
/>
|
|
</v-col>
|
|
<v-col cols="12">
|
|
<result-card
|
|
:label="$t('paperRollLength')"
|
|
:value="result.paperRollLength"
|
|
/>
|
|
</v-col>
|
|
<v-col cols="12">
|
|
<result-card
|
|
:label="$t('paperThickness')"
|
|
:value="result.paperThickness"
|
|
/>
|
|
</v-col>
|
|
</v-row>
|
|
</v-card>
|
|
</v-col>
|
|
</v-row>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, ref } from 'vue'
|
|
import { createParam, type Param } from '@/types/param'
|
|
|
|
const paperCoreDiameter = ref<Param>(createParam(76.2, 'mm'))
|
|
const paperRollExternalDiameter = ref<Param>(createParam(200, 'mm'))
|
|
const paperRollWidth = ref<Param>(createParam(100, 'mm'))
|
|
const paperDensity = ref<Param>(createParam(0.76, 'g/cm³'))
|
|
const paperGrammage = ref<Param>(createParam(420, 'g/m²'))
|
|
|
|
const result = computed(() => {
|
|
const paperRollExternalRadius = paperRollExternalDiameter.value.value / 2
|
|
const paperCoreRadius = paperCoreDiameter.value.value / 2
|
|
const paperRollVolume = (Math.PI * Math.pow(paperRollExternalRadius, 2) - Math.PI * Math.pow(paperCoreRadius, 2)) * paperRollWidth.value.value
|
|
const paperThickness = paperGrammage.value.value / paperDensity.value.value / 1000 // 计算纸张厚度
|
|
const paperRollWeight = paperRollVolume * paperDensity.value.value / 1_000_000 // 计算重量
|
|
const paperRollLength = paperRollVolume / (paperThickness * paperRollWidth.value.value) / 1000 // 计算长度
|
|
return {
|
|
paperRollWeight: createParam(paperRollWeight, 'kg'),
|
|
paperRollLength: createParam(paperRollLength, 'm'),
|
|
paperThickness: createParam(paperThickness, 'mm'),
|
|
}
|
|
})
|
|
|
|
const resetParameters = () => {
|
|
paperCoreDiameter.value = createParam(76.2, 'mm')
|
|
paperRollExternalDiameter.value = createParam(200, 'mm')
|
|
paperRollWidth.value = createParam(100, 'mm')
|
|
paperDensity.value = createParam(0.76, 'g/cm³')
|
|
paperGrammage.value = createParam(420, 'g/m²')
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="sass">
|
|
|
|
</style>
|