style: 页面布局修改

- 将结果展示由卡片式修改为列表式
- 结果卡片添加原始参数展示功能

src/components.d.ts

@@ -9,6 +9,7 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     BeltSpecificationCalculate: typeof import('./components/Modules/BeltSpecificationCalculate.vue')['default']
+    CalculateResult: typeof import('./components/CalculateResult.vue')['default']
     FourLayerPaperStrawCalculate: typeof import('./components/Modules/FourLayerPaperStrawCalculate.vue')['default']
     InputParamSection: typeof import('./components/InputParamSection.vue')['default']
     MultiLayerPaperTapeWidthAngleCalculate: typeof import('./components/Modules/MultiLayerPaperTapeWidthAngleCalculate.vue')['default']
@@ -21,7 +22,6 @@ declare module 'vue' {
     ResultSection: typeof import('./components/ResultSection.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
-    ThreeeLayerPaperStrawCalculate: typeof import('./components/Modules/threeeLayerPaperStrawCalculate.vue')['default']
     ThreeLayerPaperStrawCalculate: typeof import('./components/Modules/ThreeLayerPaperStrawCalculate.vue')['default']
   }
 }

src/components/InputParamSection.vue

@@ -0,0 +1,20 @@
+<template>
+  <v-list-item>
+    <v-list-item-title class="text-h6 text-primary">
+      {{ value.value.toFixed(fixed ?? 2) }} {{ $t(`units.${value.unit}`) }}
+    </v-list-item-title>
+    <v-list-item-subtitle>
+      {{ label }}
+    </v-list-item-subtitle>
+  </v-list-item>
+</template>
+
+<script setup lang="ts">
+  import type { Param } from '@/types/param'
+
+  defineProps<{
+    label: string
+    value: Param
+    fixed?: number
+  }>()
+</script>

src/components/Modules/BeltSpecificationCalculate.vue

@@ -83,26 +83,52 @@
             {{ $t('results') }}
           </v-card-title>
 
-          <v-row>
+          <v-list lines="two">
-            <v-col cols="12">
+            <result-section
-              <result-card
               :label="`${$t('recommendBeltThickness')}`"
               :value="result.recommendBeltThickness"
             />
-            </v-col>
+            <result-section
-            <v-col cols="12">
-              <result-card
               :label="`${$t('recommendBeltWidth')}`"
               :value="result.recommendBeltWidth"
             />
-            </v-col>
+            <result-section
-            <v-col cols="12">
-              <result-card
               :label="`${$t('recommendBeltLength')}`"
               :value="result.recommendBeltLength"
             />
+          </v-list>
+
+          <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('calculationParameters') : $t('expandToShowCalculationParameters') }}
+                  </span>
+                </template>
+              </v-expansion-panel-title>
+              <v-expansion-panel-text>
+                <v-row>
+                  <v-col cols="6">
+                    <input-param-section :label="$t('maxWheelbase')" :value="maxWheelbase" />
+                  </v-col>
+                  <v-col cols="6">
+                    <input-param-section :label="$t('hubDiameter')" :value="hubDiameter" />
                   </v-col>
                 </v-row>
+                <v-row>
+                  <v-col cols="6">
+                    <input-param-section :label="$t('paperTubeInnerDiameter')" :value="paperCoreDiameter" />
+                  </v-col>
+                  <v-col cols="6">
+                    <input-param-section :label="$t('paperRollWallThickness')" :value="paperRollWallThickness" />
+                  </v-col>
+                </v-row>
+              </v-expansion-panel-text>
+            </v-expansion-panel>
+          </v-expansion-panels>
+
         </v-card>
       </v-col>
     </v-row>

src/components/Modules/FourLayerPaperStrawCalculate.vue

@@ -66,68 +66,84 @@
             />
             {{ $t('results') }}
           </v-card-title>
-          <v-row>
+          <v-list lines="two">
-            <v-col cols="12">
+            <result-section
-              <result-card
               :label="`${$t('paperStrawResult.paperTubeInnerDiameter')}`"
               :value="result.paperCoreDiameter"
             />
-            </v-col>
+            <result-section
-            <v-col cols="12">
-              <result-card
               :label="`${$t('paperStrawResult.paperTubeExternalDiameter')}`"
               :value="result.paperTubeExternalDiameter"
             />
-            </v-col>
+            <result-section
-            <v-col cols="12">
-              <result-card
               :label="`${$t('paperStrawResult.paperTubeThickness')}`"
               :value="result.paperTubeWallThickness"
             />
-            </v-col>
+            <result-section
-            <v-col cols="12">
-              <result-card
               :label="`${$t('paperStrawResult.bottomPaperAngle')}`"
               :value="result.bottomPaperAngle"
             />
-            </v-col>
+            <result-section
-            <v-col cols="12">
-              <result-card
               :label="`${$t('paperStrawResult.leadingLength')}`"
               :value="result.leadingLength"
             />
-            </v-col>
+            <result-section
-            <v-col cols="12">
-              <result-card
               :label="`${$t('paperStrawResult.bottomPaperWidth')}`"
               :value="result.bottomPaperWidth"
             />
-            </v-col>
+            <result-section
-            <v-col cols="12">
-              <result-card
               :label="`${$t('paperStrawResult.secondLayerPaperWidth')}`"
               :value="result.secondLayerPaperWidth"
             />
-            </v-col>
+            <result-section
-            <v-col cols="12">
-              <result-card
               :label="`${$t('paperStrawResult.thirdLayerPaperWidth')}`"
               :value="result.thirdLayerPaperWidth"
             />
-            </v-col>
+            <result-section
-            <v-col cols="12">
-              <result-card
               :label="`${$t('paperStrawResult.topPaperWidth')}`"
               :value="result.topPaperWidth"
             />
-            </v-col>
+            <result-section
-            <v-col cols="12">
-              <result-card
               :label="`${$t('paperStrawResult.beltWidth')}`"
               :value="result.beltWidth"
             />
+          </v-list>
+
+          <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('calculationParameters') : $t('expandToShowCalculationParameters') }}
+                  </span>
+                </template>
+              </v-expansion-panel-title>
+              <v-expansion-panel-text>
+                <v-row>
+                  <v-col cols="6">
+                    <input-param-section :label="$t('paperTubeInnerDiameter')" :value="paperCoreDiameter" />
+                  </v-col>
+                  <v-col cols="6">
+                    <input-param-section :label="$t('bottomPaperWidth')" :value="bottomPaperWidth" />
+                  </v-col>
+                  <v-col cols="6">
+                    <input-param-section :label="$t('bottomPaperThickness')" :value="bottomPaperThickness" />
+                  </v-col>
+                  <v-col cols="6">
+                    <input-param-section :label="$t('secondLayerPaperThickness')" :value="secondLayerPaperThickness" />
+                  </v-col>
+                  <v-col cols="6">
+                    <input-param-section :label="$t('thirdLayerPaperThickness')" :value="thirdLayerPaperThickness" />
+                  </v-col>
+                  <v-col cols="6">
+                    <input-param-section :label="$t('topPaperThickness')" :value="topPaperThickness" />
                   </v-col>
                 </v-row>
+              </v-expansion-panel-text>
+            </v-expansion-panel>
+          </v-expansion-panels>
+
         </v-card>
       </v-col>
     </v-row>

src/components/Modules/PaperRollWeightLengthCalculate.vue

@@ -93,26 +93,57 @@
             {{ $t('results') }}
           </v-card-title>
 
-          <v-row>
+          <v-list lines="two">
-            <v-col cols="12">
+            <result-section
-              <result-card
               :label="$t('paperRollWeight')"
               :value="result.paperRollWeight"
             />
-            </v-col>
+            <result-section
-            <v-col cols="12">
-              <result-card
               :label="$t('paperRollLength')"
               :value="result.paperRollLength"
             />
-            </v-col>
+            <result-section
-            <v-col cols="12">
-              <result-card
               :label="$t('paperThickness')"
               :value="result.paperThickness"
             />
+          </v-list>
+
+          <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('calculationParameters') : $t('expandToShowCalculationParameters') }}
+                  </span>
+                </template>
+              </v-expansion-panel-title>
+              <v-expansion-panel-text>
+                <v-row>
+                  <v-col cols="6">
+                    <input-param-section :label="$t('paperCoreDiameter')" :value="paperCoreDiameter" />
+                  </v-col>
+                  <v-col cols="6">
+                    <input-param-section :label="$t('paperRollExternalDiameter')" :value="paperRollExternalDiameter" />
                   </v-col>
                 </v-row>
+                <v-row>
+                  <v-col cols="6">
+                    <input-param-section :label="$t('paperRollWidth')" :value="paperRollWidth" />
+                  </v-col>
+                  <v-col cols="6">
+                    <input-param-section :label="$t('paperDensity')" :value="paperDensity" />
+                  </v-col>
+                </v-row>
+                <v-row>
+                  <v-col cols="6">
+                    <input-param-section :label="$t('paperGrammage')" :value="paperGrammage" />
+                  </v-col>
+                </v-row>
+              </v-expansion-panel-text>
+            </v-expansion-panel>
+          </v-expansion-panels>
+
         </v-card>
       </v-col>
     </v-row>

src/components/Modules/PaperTapeWidthAngleCalculate.vue

@@ -68,20 +68,38 @@
             {{ $t('results') }}
           </v-card-title>
 
+          <v-list lines="two">
+            <result-section :label="$t('beltAngle')" :value="result.beltAngle" />
+            <result-section :label="$t('paperHolderAngle')" :value="result.paperHolderAngle" />
+            <result-section :label="$t('leadingLength')" :value="result.leadingLength" />
+            <result-section :label="$t('paperWidth')" :value="result.paperWidth" />
+          </v-list>
+
+          <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('calculationParameters') : $t('expandToShowCalculationParameters') }}
+                  </span>
+                </template>
+              </v-expansion-panel-title>
+              <v-expansion-panel-text>
                 <v-row>
-            <v-col cols="12">
+                  <v-col cols="6">
-              <result-card :label="$t('beltAngle')" :value="result.beltAngle" />
+                    <input-param-section :label="$t('paperTubeInnerDiameter')" :value="paperCoreDiameter" />
+                  </v-col>
+                  <v-col cols="6">
+                    <input-param-section :label="$t('paperRollWallThickness')" :value="paperRollWallThickness" />
                   </v-col>
                   <v-col cols="12">
-              <result-card :label="$t('paperHolderAngle')" :value="result.paperHolderAngle" />
+                    <input-param-section :label="$t('innerPaperWidth')" :value="innerPaperWidth" />
-            </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-expansion-panel-text>
+            </v-expansion-panel>
+          </v-expansion-panels>
         </v-card>
       </v-col>
     </v-row>

src/components/Modules/PaperTubeProductionCalculate.vue

@@ -111,44 +111,80 @@
             {{ $t('results') }}
           </v-card-title>
 
-          <v-row>
+          <v-list lines="two">
-            <v-col cols="12">
+            <result-section
-              <result-card
               :label="$t('feedPaperSpeed')"
               :value="result.feedPaperSpeed"
             />
-            </v-col>
+            <result-section
-            <v-col cols="12">
-              <result-card
               :label="$t('outputSpeed')"
               :value="result.outputSpeed"
             />
-            </v-col>
+            <result-section
-            <v-col cols="12">
-              <result-card
               :label="$t('productionAmountPerHour')"
               :value="result.productionAmountPerHour"
             />
-            </v-col>
+            <result-section
-            <v-col cols="12">
-              <result-card
               :label="$t('productionWeightPerHour')"
               :value="result.productionWeightPerHour"
             />
-            </v-col>
+            <result-section
-            <v-col cols="12">
-              <result-card
               :label="$t('productionAmountPerDay')"
               :value="result.productionAmountPerDay"
             />
-            </v-col>
+            <result-section
-            <v-col cols="12">
-              <result-card
               :label="$t('productionWeightPerDay')"
               :value="result.productionWeightPerDay"
             />
+          </v-list>
+
+          <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('calculationParameters') : $t('expandToShowCalculationParameters') }}
+                  </span>
+                </template>
+              </v-expansion-panel-title>
+              <v-expansion-panel-text>
+                <v-row>
+                  <v-col cols="6">
+                    <input-param-section :label="$t('paperTubeInnerDiameter')" :value="paperCoreDiameter" />
+                  </v-col>
+                  <v-col cols="6">
+                    <input-param-section :label="$t('paperRollWallThickness')" :value="paperRollWallThickness" />
                   </v-col>
                 </v-row>
+                <v-row>
+                  <v-col cols="6">
+                    <input-param-section :label="$t('paperRollLength')" :value="paperRollLength" />
+                  </v-col>
+                  <v-col cols="6">
+                    <input-param-section :label="$t('paperDensity')" :value="paperDensity" />
+                  </v-col>
+                </v-row>
+                <v-row>
+                  <v-col cols="6">
+                    <input-param-section :label="$t('innerPaperWidth')" :value="innerPaperWidth" />
+                  </v-col>
+                  <v-col cols="6">
+                    <input-param-section :label="$t('workFrequency')" :value="workFrequency" />
+                  </v-col>
+                </v-row>
+                <v-row>
+                  <v-col cols="6">
+                    <input-param-section :label="$t('workTime')" :value="workTime" />
+                  </v-col>
+                  <v-col cols="6">
+                    <input-param-section :label="$t('workEfficiency')" :value="workEfficiency" />
+                  </v-col>
+                </v-row>
+              </v-expansion-panel-text>
+            </v-expansion-panel>
+          </v-expansion-panels>
+
         </v-card>
       </v-col>
     </v-row>

src/components/Modules/PaperTubeWeightCalculate.vue

@@ -93,21 +93,55 @@
             {{ $t('results') }}
           </v-card-title>
 
+          <v-list lines="two">
+            <result-section :label="$t('singlePaperTubeWeight')" :value="result.singlePaperTubeWeight" />
+            <result-section :label="$t('totalPaperTubeWeight')" :value="result.totalPaperTubeWeight" />
+          </v-list>
+
+          <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('calculationParameters') : $t('expandToShowCalculationParameters') }}
+                  </span>
+                </template>
+              </v-expansion-panel-title>
+              <v-expansion-panel-text>
                 <v-row>
-            <v-col cols="12">
+                  <v-col cols="6">
-              <result-card
+                    <input-param-section :label="$t('paperRollLength')" :value="paperRollLength" />
-                :label="`${$t('singlePaperTubeWeight')}`"
-                :value="result.singlePaperTubeWeight"
-              />
                   </v-col>
-            <v-col cols="12">
+                  <v-col cols="6">
-              <result-card
+                    <input-param-section
-                :label="`${$t('totalPaperTubeWeight')}`"
+                      :label="$t('paperDensity')"
-                :value="result.totalPaperTubeWeight"
+                      :value="paperDensity"
                     />
                   </v-col>
                 </v-row>
+                <v-row>
+                  <v-col cols="6">
+                    <input-param-section
+                      :fixed="0"
+                      :label="$t('productionAmount')"
+                      :value="productionAmount"
+                    />
+                  </v-col>
+                  <v-col cols="6">
+                    <input-param-section :label="$t('paperTubeInnerDiameter')" :value="paperCoreDiameter" />
+                  </v-col>
+                </v-row>
+                <v-row>
+                  <v-col cols="6">
+                    <input-param-section :label="$t('paperRollWallThickness')" :value="paperRollWallThickness" />
+                  </v-col>
+                </v-row>
+              </v-expansion-panel-text>
+            </v-expansion-panel>
+          </v-expansion-panels>
         </v-card>
+
       </v-col>
     </v-row>
   </div>
@@ -138,7 +172,7 @@
 
   const resetParameters = () => {
     paperRollLength.value = createParam(1000, 'mm')
-    paperDensity.value = createParam(0.76, 'gpcm3')
+    paperDensity.value = createParam(0.76, 'g_per_cm3')
     productionAmount.value = createParam(1000, 'pcs')
     paperCoreDiameter.value = createParam(76.2, 'mm')
     paperRollWallThickness.value = createParam(10, 'mm')

src/components/Modules/ThreeLayerPaperStrawCalculate.vue

@@ -63,62 +63,76 @@
             />
             {{ $t('results') }}
           </v-card-title>
-          <v-row>
+          <v-list lines="two">
-            <v-col cols="12">
+            <result-section
-              <result-card
               :label="`${$t('paperStrawResult.paperTubeInnerDiameter')}`"
               :value="result.paperCoreDiameter"
             />
-            </v-col>
+            <result-section
-            <v-col cols="12">
-              <result-card
               :label="`${$t('paperStrawResult.paperTubeExternalDiameter')}`"
               :value="result.paperTubeExternalDiameter"
             />
-            </v-col>
+            <result-section
-            <v-col cols="12">
-              <result-card
               :label="`${$t('paperStrawResult.paperTubeThickness')}`"
               :value="result.paperTubeWallThickness"
             />
-            </v-col>
+            <result-section
-            <v-col cols="12">
-              <result-card
               :label="`${$t('paperStrawResult.bottomPaperAngle')}`"
               :value="result.bottomPaperAngle"
             />
-            </v-col>
+            <result-section
-            <v-col cols="12">
-              <result-card
               :label="`${$t('paperStrawResult.leadingLength')}`"
               :value="result.leadingLength"
             />
-            </v-col>
+            <result-section
-            <v-col cols="12">
-              <result-card
               :label="`${$t('paperStrawResult.bottomPaperWidth')}`"
               :value="result.bottomPaperWidth"
             />
-            </v-col>
+            <result-section
-            <v-col cols="12">
-              <result-card
               :label="`${$t('paperStrawResult.middlePaperWidth')}`"
               :value="result.middlePaperWidth"
             />
-            </v-col>
+            <result-section
-            <v-col cols="12">
-              <result-card
               :label="`${$t('paperStrawResult.topPaperWidth')}`"
               :value="result.topPaperWidth"
             />
-            </v-col>
+            <result-section
-            <v-col cols="12">
-              <result-card
               :label="`${$t('paperStrawResult.beltWidth')}`"
               :value="result.beltWidth"
             />
+          </v-list>
+
+          <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('calculationParameters') : $t('expandToShowCalculationParameters') }}
+                  </span>
+                </template>
+              </v-expansion-panel-title>
+              <v-expansion-panel-text>
+                <v-row>
+                  <v-col cols="6">
+                    <input-param-section :label="$t('paperTubeInnerDiameter')" :value="paperCoreDiameter" />
+                  </v-col>
+                  <v-col cols="6">
+                    <input-param-section :label="$t('bottomPaperWidth')" :value="bottomPaperWidth" />
+                  </v-col>
+                  <v-col cols="6">
+                    <input-param-section :label="$t('bottomPaperThickness')" :value="bottomPaperThickness" />
+                  </v-col>
+                  <v-col cols="6">
+                    <input-param-section :label="$t('middlePaperThickness')" :value="middlePaperThickness" />
+                  </v-col>
+                  <v-col cols="6">
+                    <input-param-section :label="$t('topPaperThickness')" :value="topPaperThickness" />
                   </v-col>
                 </v-row>
+              </v-expansion-panel-text>
+            </v-expansion-panel>
+          </v-expansion-panels>
         </v-card>
       </v-col>
     </v-row>

src/components/ResultSection.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <v-list-item>
+      <v-list-item-title class="text-h4 text-primary font-weight-bold">
+        {{ value.value.toFixed(2) }} {{ $t(`units.${value.unit}`) }}
+      </v-list-item-title>
+      <v-list-item-subtitle>
+        {{ label }}
+      </v-list-item-subtitle>
+    </v-list-item>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import type { Param } from '@/types/param'
+
+  defineProps<{
+    label: string
+    value: Param
+  }>()
+</script>

src/plugins/vuetify.ts

@@ -30,6 +30,11 @@ const jinshenLightTheme: ThemeDefinition = {
 export default createVuetify({
   theme: {
     defaultTheme: 'light',
+    variations: {
+      colors: ['primary', 'secondary', 'success', 'info', 'warning', 'error'],
+      lighten: 5,
+      darken: 5,
+    },
     themes: {
       light: jinshenLightTheme,
     },