index.vue 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
  1. <template>
  2. <view class="container">
  3. <view class="header">
  4. <view style="padding: 30px; ">
  5. <text class="title">产量 (吨)</text>
  6. <text class="value">{{ output }}</text>
  7. </view>
  8. </view>
  9. <view class="form">
  10. <view class="form-item">
  11. <text>纸机车速 V (M/min)</text>
  12. <input type="number" placeholder="请输入纸机车速" v-model="speed" />
  13. </view>
  14. <view class="form-item">
  15. <text>纸定量 q (g/m^2)</text>
  16. <input type="number" placeholder="请输入纸定量" v-model="paperWeight" />
  17. </view>
  18. <view class="form-item">
  19. <text>纸张宽度 mm</text>
  20. <input type="number" placeholder="请输入纸张宽度" v-model="paperWidth" />
  21. </view>
  22. <view class="form-item">
  23. <text>计算时间</text>
  24. <input type="number" placeholder="请输入计算时间" v-model="calculationTime" />
  25. <text>天</text>
  26. </view>
  27. <view class="form-item">
  28. <text>抄造率</text>
  29. <input type="number" placeholder="请输入效率" v-model="efficiency" />
  30. <text>%</text>
  31. </view>
  32. </view>
  33. <button class="calculate-btn" @click="calculate">立即计算</button>
  34. </view>
  35. </template>
  36. <script setup>
  37. import { ref } from 'vue'
  38. const speed = ref('')
  39. const paperWeight = ref('')
  40. const paperWidth = ref('')
  41. const calculationTime = ref('')
  42. const efficiency = ref('')
  43. const output = ref(0)
  44. const calculate = () => {
  45. // 将输入转换为数字
  46. const v = Number(speed.value)
  47. const q = Number(paperWeight.value)
  48. const w = Number(paperWidth.value) / 1000 // 转换为米
  49. const t = Number(calculationTime.value) * 24 * 60 // 转换为分钟
  50. const e = Number(efficiency.value) / 100 // 转换为小数
  51. // 计算产量
  52. const result = (v * q * w * e * t) / 1000000
  53. // 将结果四舍五入到两位小数
  54. output.value = Math.round(result * 100) / 100
  55. console.log(output.value)
  56. }
  57. </script>
  58. <style>
  59. .container {
  60. font-size: 14px;
  61. min-height: 100vh;
  62. }
  63. .header {
  64. height: 200px; /* 设置适当的高度 */
  65. background-image: url('https://leaseraycos.oss-cn-shanghai.aliyuncs.com/document/20240912212132_c5d4953d43246914c3ae2c3f0644be20_113328_750_1250.jpg');
  66. background-size: cover; /* 确保图片覆盖整个区域 */
  67. background-position: center; /* 图片居中 */
  68. background-repeat: no-repeat; /* 防止图片重复 */
  69. width: 100%;
  70. }
  71. .title {
  72. font-size: 18px;
  73. color: #ffffff;
  74. padding-right: 50px;
  75. font-weight: bold;
  76. }
  77. .value {
  78. font-size: 18px;
  79. color: #ffffff;
  80. font-weight: bold;
  81. }
  82. .form-item {
  83. background: #ffffff;
  84. padding: 10px;
  85. border-radius: 5px;
  86. margin-bottom: 5px;
  87. width: 90%;
  88. display: flex;
  89. align-items: center;
  90. }
  91. .form-item text {
  92. flex: 0 0 50%;
  93. padding-left: 10px;
  94. }
  95. .form-item input {
  96. flex: 0 0 35%;
  97. border: 1px #ccc solid;
  98. text-align: left;
  99. padding: 2px 10px;
  100. font-size: 12px;
  101. border-radius: 5px;
  102. height: 24px;
  103. margin-right: 5px;
  104. }
  105. .calculate-btn {
  106. background: #4a90e2;
  107. color: #ffffff;
  108. border: none;
  109. padding:5px ;
  110. border-radius: 5px;
  111. margin-top: 20px;
  112. width: 40%;
  113. }
  114. </style>