123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179 |
- <template>
- <view class="container">
- <view class="header">
- <view style="padding: 30px; ">
- <text class="title">辊体重量G (KG)</text>
- <text class="value">{{ weight }}KG</text>
- </view>
- </view>
- <view class="form">
- <view class="form-item">
- <text>辊体外径D (mm)</text>
- <input type="number" placeholder="请输入外径" v-model="outerDiameter" />
- </view>
- <view class="form-item">
- <text>辊体壁厚t (mm)</text>
- <input type="number" placeholder="请输入壁厚" v-model="wallThickness" />
- </view>
- <view class="form-item">
- <text>辊体内径d (mm)</text>
- <input type="number" v-model="innerDiameter" disabled />
- </view>
- <view class="form-item">
- <text>辊体面宽B (mm)</text>
- <input type="number" placeholder="请输入面宽" v-model="faceWidth" />
- </view>
- <view class="form-item">
- <text>材料密度p(Kg/m³)</text>
- <picker :value="materialIndex" :range="materials" range-key="name" @change="onMaterialChange">
- <view class="uni-input">{{ materials[materialIndex].name }}</view>
- </picker>
- </view>
- </view>
- <button class="calculate-btn" @click="calculate">立即计算</button>
- </view>
- </template>
- <script setup>
- import {
- ref,computed
- } from 'vue'
- const outerDiameter = ref('')
- const wallThickness = ref('')
- const innerDiameter = computed(() => {
- if (outerDiameter.value && wallThickness.value) {
- return Number(outerDiameter.value) - 2 * Number(wallThickness.value)
- }
- return ''
- })
- const faceWidth = ref('')
- const selectedMaterial = ref('7850')
- const weight = ref(0)
- const materials = ref([{
- name: '碳钢',
- density: 7.8
- },
- {
- name: '不锈钢',
- density: 7.8
- },
- {
- name: '铸铁',
- density: 7.3
- },
- // 可以根据需要添加更多材料
- ])
- const materialIndex = ref(0)
- const onMaterialChange = (e) => {
- materialIndex.value = e.detail.value
- selectedMaterial.value = materials.value[materialIndex.value].density
- }
- const calculate = () => {
- // 将输入转换为数字
- const D = Number(outerDiameter.value)
- const t = Number(wallThickness.value)
- const d = Number(innerDiameter.value)
- const B = Number(faceWidth.value)
- const p = Number(selectedMaterial.value)
- // 计算辊体重量
- // 公式: G = π * (D^2 - d^2) * B * p / 4 / 1000000
- const result = 3.14 * (Math.pow(D, 2) - Math.pow(d, 2)) * B * p / 4 / 1000000
- // 将结果四舍五入到两位小数
- weight.value = Math.round(result * 100) / 100
- }
- </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;
- border-bottom: 2px solid #FFF;
- }
- .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 40%;
- padding-left: 10px;
- }
- .form-item input {
- flex: 0 0 50%;
- border: 1px #ccc solid;
- text-align: left;
- padding: 2px 10px;
- font-size: 12px;
- border-radius: 5px;
- height: 30px;
- margin-right: 5px;
- }
- .form-item select {
- flex: 0 0 58%;
- border: 1px #ccc solid;
- text-align: left;
- padding: 2px 10px;
- font-size: 12px;
- border-radius: 5px;
- height: 35px;
- margin-right: 5px;
- }
- .calculate-btn {
- background: #4a90e2;
- color: #ffffff;
- border: none;
- padding: 5px;
- border-radius: 5px;
- margin-top: 20px;
- width: 40%;
- }
- </style>
|