jinshen_calculator/src/components/Modules/PaperRollWeightLengthCalculate.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('common.parameters') }}
          </v-card-title>

          <v-row>
            <v-col cols="12">
              <param-input-field
                v-model="paperCoreDiameter"
                :label="$t('page.paper-roll-weight-length.parameters.paper-core-diameter')"
              />
            </v-col>
            <v-col cols="12">
              <param-input-field
                v-model="paperRollExternalDiameter"
                :label="$t('page.paper-roll-weight-length.parameters.paper-roll-external-diameter')"
              />
            </v-col>
            <v-col cols="12">
              <param-input-field
                v-model="paperRollWidth"
                :label="$t('page.paper-roll-weight-length.parameters.paper-roll-width')"
              />
            </v-col>
            <v-col cols="12">
              <param-input-field
                v-model="paperDensity"
                :label="$t('page.paper-roll-weight-length.parameters.paper-density')"
              />
            </v-col>
            <v-col cols="12">
              <param-input-field
                v-model="paperGrammage"
                :label="$t('page.paper-roll-weight-length.parameters.paper-grammage')"
              />
            </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('common.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('common.results') }}
          </v-card-title>

          <v-list lines="two">
            <result-list-item
              :label="$t('page.paper-roll-weight-length.results.paper-roll-weight')"
              :value="result.paperRollWeight"
            />
            <result-list-item
              :label="$t('page.paper-roll-weight-length.results.paper-roll-length')"
              :value="result.paperRollLength"
            />
            <result-list-item
              :label="$t('page.paper-roll-weight-length.results.paper-thickness')"
              :value="result.paperThickness"
            />
          </v-list>

          <v-divider class="my-4" />

          <v-expansion-panels flat multiple>
            <v-expansion-panel hide-actions>
              <v-expansion-panel-title class="text-warning font-weight-bold">
                <template #default="{ expanded }">
                  <span>
                    <v-icon icon="mdi-information-outline" />
                    {{ expanded ? $t('common.calculate-parameters') : $t('common.expand-to-show-calculate-parameters') }}
                  </span>
                </template>
              </v-expansion-panel-title>
              <v-expansion-panel-text>
                <v-row>
                  <v-col cols="6">
                    <input-param-section :label="$t('page.paper-roll-weight-length.parameters.paper-core-diameter')" :value="paperCoreDiameter" />
                  </v-col>
                  <v-col cols="6">
                    <input-param-section :label="$t('page.paper-roll-weight-length.parameters.paper-roll-external-diameter')" :value="paperRollExternalDiameter" />
                  </v-col>
                </v-row>
                <v-row>
                  <v-col cols="6">
                    <input-param-section :label="$t('page.paper-roll-weight-length.parameters.paper-roll-width')" :value="paperRollWidth" />
                  </v-col>
                  <v-col cols="6">
                    <input-param-section :label="$t('page.paper-roll-weight-length.parameters.paper-density')" :value="paperDensity" />
                  </v-col>
                </v-row>
                <v-row>
                  <v-col cols="6">
                    <input-param-section :label="$t('page.paper-roll-weight-length.parameters.paper-grammage')" :value="paperGrammage" />
                  </v-col>
                </v-row>
              </v-expansion-panel-text>
            </v-expansion-panel>
          </v-expansion-panels>

        </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(1200, 'mm'))
  const paperRollWidth = ref<Param>(createParam(1600, 'mm'))
  const paperDensity = ref<Param>(createParam(0.76, 'g_per_cm3'))
  const paperGrammage = ref<Param>(createParam(420, 'g_per_m2'))

  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_per_cm3')
    paperGrammage.value = createParam(420, 'g_per_m2')
  }
</script>

<style scoped lang="sass">

</style>