index.vue 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
  1. <template>
  2. <view class="container">
  3. <view class="header">
  4. <view style="padding: 30px; ">
  5. <text class="title">辊体重量G (KG)</text>
  6. <text class="value">{{ weight }}KG</text>
  7. </view>
  8. </view>
  9. <view class="form">
  10. <view class="form-item">
  11. <text>辊体外径D (mm)</text>
  12. <input type="number" placeholder="请输入外径" v-model="outerDiameter" />
  13. </view>
  14. <view class="form-item">
  15. <text>辊体壁厚t (mm)</text>
  16. <input type="number" placeholder="请输入壁厚" v-model="wallThickness" />
  17. </view>
  18. <view class="form-item">
  19. <text>辊体内径d (mm)</text>
  20. <input type="number" v-model="innerDiameter" disabled />
  21. </view>
  22. <view class="form-item">
  23. <text>辊体面宽B (mm)</text>
  24. <input type="number" placeholder="请输入面宽" v-model="faceWidth" />
  25. </view>
  26. <view class="form-item">
  27. <text>材料密度p(Kg/m³)</text>
  28. <picker :value="materialIndex" :range="materials" range-key="name" @change="onMaterialChange">
  29. <view class="uni-input">{{ materials[materialIndex].name }}</view>
  30. </picker>
  31. </view>
  32. </view>
  33. <button class="calculate-btn" @click="calculate">立即计算</button>
  34. </view>
  35. </template>
  36. <script setup>
  37. import {
  38. ref,computed
  39. } from 'vue'
  40. const outerDiameter = ref('')
  41. const wallThickness = ref('')
  42. const innerDiameter = computed(() => {
  43. if (outerDiameter.value && wallThickness.value) {
  44. return Number(outerDiameter.value) - 2 * Number(wallThickness.value)
  45. }
  46. return ''
  47. })
  48. const faceWidth = ref('')
  49. const selectedMaterial = ref('7850')
  50. const weight = ref(0)
  51. const materials = ref([{
  52. name: '碳钢',
  53. density: 7.8
  54. },
  55. {
  56. name: '不锈钢',
  57. density: 7.8
  58. },
  59. {
  60. name: '铸铁',
  61. density: 7.3
  62. },
  63. // 可以根据需要添加更多材料
  64. ])
  65. const materialIndex = ref(0)
  66. const onMaterialChange = (e) => {
  67. materialIndex.value = e.detail.value
  68. selectedMaterial.value = materials.value[materialIndex.value].density
  69. }
  70. const calculate = () => {
  71. // 将输入转换为数字
  72. const D = Number(outerDiameter.value)
  73. const t = Number(wallThickness.value)
  74. const d = Number(innerDiameter.value)
  75. const B = Number(faceWidth.value)
  76. const p = Number(selectedMaterial.value)
  77. // 计算辊体重量
  78. // 公式: G = π * (D^2 - d^2) * B * p / 4 / 1000000
  79. const result = 3.14 * (Math.pow(D, 2) - Math.pow(d, 2)) * B * p / 4 / 1000000
  80. // 将结果四舍五入到两位小数
  81. weight.value = Math.round(result * 100) / 100
  82. }
  83. </script>
  84. <style>
  85. .container {
  86. font-size: 14px;
  87. min-height: 100vh;
  88. }
  89. .header {
  90. height: 200px;
  91. /* 设置适当的高度 */
  92. background-image: url('https://leaseraycos.oss-cn-shanghai.aliyuncs.com/document/20240912212132_c5d4953d43246914c3ae2c3f0644be20_113328_750_1250.jpg');
  93. background-size: cover;
  94. /* 确保图片覆盖整个区域 */
  95. background-position: center;
  96. /* 图片居中 */
  97. background-repeat: no-repeat;
  98. /* 防止图片重复 */
  99. width: 100%;
  100. }
  101. .title {
  102. font-size: 18px;
  103. color: #ffffff;
  104. padding-right: 50px;
  105. font-weight: bold;
  106. }
  107. .value {
  108. font-size: 18px;
  109. color: #ffffff;
  110. font-weight: bold;
  111. border-bottom: 2px solid #FFF;
  112. }
  113. .form-item {
  114. background: #ffffff;
  115. padding: 10px;
  116. border-radius: 5px;
  117. margin-bottom: 5px;
  118. width: 90%;
  119. display: flex;
  120. align-items: center;
  121. }
  122. .form-item text {
  123. flex: 0 0 40%;
  124. padding-left: 10px;
  125. }
  126. .form-item input {
  127. flex: 0 0 50%;
  128. border: 1px #ccc solid;
  129. text-align: left;
  130. padding: 2px 10px;
  131. font-size: 12px;
  132. border-radius: 5px;
  133. height: 30px;
  134. margin-right: 5px;
  135. }
  136. .form-item select {
  137. flex: 0 0 58%;
  138. border: 1px #ccc solid;
  139. text-align: left;
  140. padding: 2px 10px;
  141. font-size: 12px;
  142. border-radius: 5px;
  143. height: 35px;
  144. margin-right: 5px;
  145. }
  146. .calculate-btn {
  147. background: #4a90e2;
  148. color: #ffffff;
  149. border: none;
  150. padding: 5px;
  151. border-radius: 5px;
  152. margin-top: 20px;
  153. width: 40%;
  154. }
  155. </style>