Feature: 多层纸带宽度角度计算-基本表格增删
This commit is contained in:
@ -1,11 +1,222 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
<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>
|
</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",
|
"custom": "Customize",
|
||||||
"recommendBeltLength": "Recommended belt length",
|
"recommendBeltLength": "Recommended belt length",
|
||||||
"recommendBeltWidth": "Recommended bandwidth",
|
"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": "自定义",
|
"custom": "自定义",
|
||||||
"recommendBeltThickness": "推荐皮带厚度",
|
"recommendBeltThickness": "推荐皮带厚度",
|
||||||
"recommendBeltWidth": "推荐皮带宽度",
|
"recommendBeltWidth": "推荐皮带宽度",
|
||||||
"recommendBeltLength": "推荐皮带长度"
|
"recommendBeltLength": "推荐皮带长度",
|
||||||
|
"bottomPaperWidth": "底纸宽度",
|
||||||
|
"save": "保存",
|
||||||
|
"clear": "清空",
|
||||||
|
"remove": "移除",
|
||||||
|
"add": "新增",
|
||||||
|
"layer": "层数",
|
||||||
|
"cumulative Thickness": "累计厚度",
|
||||||
|
"angle": "角度"
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user