123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141 |
- <template>
- <view class="container">
- <view class="header">
- <view style="padding: 30px; ">
- <text class="title">产量 (吨)</text>
- <text class="value">{{ output }}</text>
- </view>
- </view>
-
- <view class="form">
- <view class="form-item">
- <text>纸机车速 V (M/min)</text>
- <input type="number" placeholder="请输入纸机车速" v-model="speed" />
-
- </view>
-
- <view class="form-item">
- <text>纸定量 q (g/m^2)</text>
- <input type="number" placeholder="请输入纸定量" v-model="paperWeight" />
-
- </view>
-
- <view class="form-item">
- <text>纸张宽度 mm</text>
- <input type="number" placeholder="请输入纸张宽度" v-model="paperWidth" />
-
- </view>
-
- <view class="form-item">
- <text>计算时间</text>
- <input type="number" placeholder="请输入计算时间" v-model="calculationTime" />
- <text>天</text>
-
- </view>
-
- <view class="form-item">
- <text>抄造率</text>
- <input type="number" placeholder="请输入效率" v-model="efficiency" />
- <text>%</text>
-
- </view>
- </view>
-
- <button class="calculate-btn" @click="calculate">立即计算</button>
- </view>
- </template>
- <script setup>
- import { ref } from 'vue'
- const speed = ref('')
- const paperWeight = ref('')
- const paperWidth = ref('')
- const calculationTime = ref('')
- const efficiency = ref('')
- const output = ref(0)
- const calculate = () => {
- // 将输入转换为数字
- const v = Number(speed.value)
- const q = Number(paperWeight.value)
- const w = Number(paperWidth.value) / 1000 // 转换为米
- const t = Number(calculationTime.value) * 24 * 60 // 转换为分钟
- const e = Number(efficiency.value) / 100 // 转换为小数
- // 计算产量
- const result = (v * q * w * e * t) / 1000000
- // 将结果四舍五入到两位小数
- output.value = Math.round(result * 100) / 100
- console.log(output.value)
- }
- </script>
- <style>
- .container {
- font-size: 14px;
-
- min-height: 100vh;
- }
- .header {
- height: 200px; /* 设置适当的高度 */
- background-image: url('https://leaseraycos.oss-cn-shanghai.aliyuncs.com/document/20240912212132_c5d4953d43246914c3ae2c3f0644be20_113328_750_1250.jpg');
- background-size: cover; /* 确保图片覆盖整个区域 */
- background-position: center; /* 图片居中 */
- background-repeat: no-repeat; /* 防止图片重复 */
- width: 100%;
- }
- .title {
- font-size: 18px;
- color: #ffffff;
- padding-right: 50px;
- font-weight: bold;
- }
- .value {
- font-size: 18px;
- color: #ffffff;
- font-weight: bold;
- }
- .form-item {
- background: #ffffff;
- padding: 10px;
- border-radius: 5px;
- margin-bottom: 5px;
- width: 90%;
- display: flex;
- align-items: center;
- }
- .form-item text {
- flex: 0 0 50%;
- padding-left: 10px;
- }
- .form-item input {
- flex: 0 0 35%;
- border: 1px #ccc solid;
- text-align: left;
- padding: 2px 10px;
- font-size: 12px;
- border-radius: 5px;
- height: 24px;
- margin-right: 5px;
- }
- .calculate-btn {
- background: #4a90e2;
- color: #ffffff;
- border: none;
- padding:5px ;
- border-radius: 5px;
- margin-top: 20px;
- width: 40%;
- }
- </style>
|