Feature: 多层纸带宽度角度计算-基本表格增删
This commit is contained in:
@ -1,11 +1,222 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<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"
|
||||
:disabled="recordList.length > 0"
|
||||
:label="`${$t('paperCoreDiameter')} (${paperCoreDiameter.unit})`"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<param-input-field
|
||||
v-model="bottomPaperWidth"
|
||||
:disabled="recordList.length > 0"
|
||||
:label="`${$t('bottomPaperWidth')} (${bottomPaperWidth.unit})`"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<param-input-field
|
||||
v-model="paperGrammage"
|
||||
:label="`${$t('paperGrammage')} (${paperGrammage.unit})`"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<param-input-field
|
||||
v-model="paperDensity"
|
||||
:label="`${$t('paperDensity')} (${paperDensity.unit})`"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-divider class="my-6" />
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<div class="d-flex flex-column flex-sm-row justify-end align-center ga-3">
|
||||
<!-- 次要功能按钮组 -->
|
||||
<div class="d-flex ga-2 order-2 order-sm-1">
|
||||
<v-btn
|
||||
color="warning"
|
||||
size="small"
|
||||
variant="outlined"
|
||||
@click="clearAll"
|
||||
>
|
||||
<v-icon class="mr-1">mdi-refresh</v-icon>
|
||||
{{ $t('clear') }}
|
||||
</v-btn>
|
||||
<v-btn
|
||||
color="success"
|
||||
size="small"
|
||||
variant="outlined"
|
||||
@click="saveParams"
|
||||
>
|
||||
<v-icon class="mr-1">mdi-content-save</v-icon>
|
||||
{{ $t('save') }}
|
||||
</v-btn>
|
||||
</div>
|
||||
|
||||
<!-- 主要功能按钮组 -->
|
||||
<v-btn-group
|
||||
class="order-1 order-sm-2"
|
||||
color="primary"
|
||||
divided
|
||||
variant="elevated"
|
||||
>
|
||||
<v-btn
|
||||
:size="$vuetify.display.xs ? 'default' : 'large'"
|
||||
@click="removeLayer"
|
||||
>
|
||||
<v-icon class="mr-1">mdi-minus</v-icon>
|
||||
{{ $t('remove') }}
|
||||
</v-btn>
|
||||
<v-btn
|
||||
:size="$vuetify.display.xs ? 'default' : 'large'"
|
||||
@click="addLayer"
|
||||
>
|
||||
<v-icon class="mr-1">mdi-plus</v-icon>
|
||||
{{ $t('add') }}
|
||||
</v-btn>
|
||||
</v-btn-group>
|
||||
</div>
|
||||
</v-col>
|
||||
</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-table
|
||||
fixed-header
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{{ $t('layer') }}</th>
|
||||
<th>{{ $t('paperGrammage') }}</th>
|
||||
<th>{{ $t('cumulative Thickness') }}</th>
|
||||
<th>{{ $t('angle') }}</th>
|
||||
<th>{{ $t('paperWidth') }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(record, index) in recordList" :key="index">
|
||||
<td>{{ record.layer }}</td>
|
||||
<td>{{ record.grammage.value.toFixed(2) }} {{ record.grammage.unit }}</td>
|
||||
<td>{{ record.cumulativeThickness.value.toFixed(2) }} {{ record.cumulativeThickness.unit }}</td>
|
||||
<td>{{ record.angle.value.toFixed(2) }} {{ record.angle.unit }}</td>
|
||||
<td>{{ record.paperWidth.value.toFixed(2) }} {{ record.paperWidth.unit }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</v-table>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="sass">
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
import { createParam, type Param } from '@/types/param'
|
||||
import { degreesToRadians, radiansToDegrees } from '@/utils/angle'
|
||||
|
||||
</style>
|
||||
interface LayerRecord {
|
||||
layer: number
|
||||
grammage: Param
|
||||
cumulativeThickness: Param
|
||||
angle: Param
|
||||
paperWidth: Param
|
||||
}
|
||||
|
||||
const paperCoreDiameter = ref<Param>(createParam(76.2, 'mm'))
|
||||
const bottomPaperWidth = ref<Param>(createParam(100, 'mm'))
|
||||
const paperGrammage = ref<Param>(createParam(420, 'g/m²'))
|
||||
const paperDensity = ref<Param>(createParam(0.76, 'g/cm³'))
|
||||
|
||||
const recordList = ref<LayerRecord[]>([])
|
||||
|
||||
const result = computed(() => {
|
||||
const paperRollWallThickness = paperGrammage.value.value / paperDensity.value.value / 1000
|
||||
// eslint-disable-next-line unicorn/prefer-at
|
||||
const paperTotalThickness = recordList.value.length === 0 ? 0 : recordList.value[recordList.value.length - 1].cumulativeThickness.value
|
||||
const paperRollExternalDiameter = paperCoreDiameter.value.value + 2 * paperTotalThickness
|
||||
const paperAngle = 90 - radiansToDegrees(Math.acos(bottomPaperWidth.value.value / (paperCoreDiameter.value.value * Math.PI)))
|
||||
const leadingLength = bottomPaperWidth.value.value / Math.sin(degreesToRadians(90 - paperAngle))
|
||||
const beltAngle = 90 - radiansToDegrees(Math.atan(paperRollExternalDiameter * Math.PI / leadingLength))
|
||||
const paperWidth = leadingLength * Math.sin(degreesToRadians(radiansToDegrees(Math.atan(paperRollExternalDiameter * Math.PI / leadingLength))))
|
||||
|
||||
return {
|
||||
layer: recordList.value.length + 1,
|
||||
grammage: paperGrammage.value,
|
||||
cumulativeThickness: createParam(paperTotalThickness + paperRollWallThickness, 'mm'),
|
||||
angle: createParam(beltAngle, '°'),
|
||||
paperWidth: createParam(paperWidth, 'mm'),
|
||||
}
|
||||
})
|
||||
|
||||
// 按钮功能方法
|
||||
const clearAll = () => {
|
||||
recordList.value = []
|
||||
}
|
||||
|
||||
const saveParams = () => {
|
||||
// TODO 计算结果导出为Excel
|
||||
console.log('SAVE')
|
||||
}
|
||||
|
||||
const addLayer = () => {
|
||||
// 添加层的逻辑
|
||||
recordList.value.push({
|
||||
layer: result.value.layer,
|
||||
grammage: result.value.grammage,
|
||||
cumulativeThickness: result.value.cumulativeThickness,
|
||||
angle: result.value.angle,
|
||||
paperWidth: result.value.paperWidth,
|
||||
})
|
||||
}
|
||||
|
||||
const removeLayer = () => {
|
||||
// 移除层的逻辑
|
||||
recordList.value.pop()
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -47,5 +47,13 @@
|
||||
"custom": "Customize",
|
||||
"recommendBeltLength": "Recommended belt length",
|
||||
"recommendBeltWidth": "Recommended bandwidth",
|
||||
"recommendBeltThickness": "Recommended belt thickness"
|
||||
"recommendBeltThickness": "Recommended belt thickness",
|
||||
"bottomPaperWidth": "Bottom paper width",
|
||||
"save": "Save",
|
||||
"clear": "Clear",
|
||||
"remove": "Remove",
|
||||
"add": "Add",
|
||||
"layer": "Layer",
|
||||
"cumulative Thickness": "Cumulative thickness",
|
||||
"angle": "Angle"
|
||||
}
|
||||
|
||||
@ -47,5 +47,13 @@
|
||||
"custom": "自定义",
|
||||
"recommendBeltThickness": "推荐皮带厚度",
|
||||
"recommendBeltWidth": "推荐皮带宽度",
|
||||
"recommendBeltLength": "推荐皮带长度"
|
||||
"recommendBeltLength": "推荐皮带长度",
|
||||
"bottomPaperWidth": "底纸宽度",
|
||||
"save": "保存",
|
||||
"clear": "清空",
|
||||
"remove": "移除",
|
||||
"add": "新增",
|
||||
"layer": "层数",
|
||||
"cumulative Thickness": "累计厚度",
|
||||
"angle": "角度"
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user