sange-bridge/pages/formula/guozhuwan.vue

<template>
    <view class="math-container">
        <view class="header">
            <u-image width="100%" height="300rpx" :src="mathImgs[name].big" mode="aspectFit" @click="handleBigImage"></u-image>
        </view>
        <view class="main dir-top-wrap cross-center">
            <view class="form">
                <u-form-item label="左高(cm)" label-width="160">
                    <u-input type="number" v-model="formData.leftHeight" placeholder="请输入左侧高"/>
                </u-form-item>
                <u-form-item label="右高(cm)" label-width="160">
                    <u-input type="number" v-model="formData.rightHeight" placeholder="请输入右侧高"/>
                </u-form-item>
                <u-form-item label="左角度(°)" label-width="160">
                    <u-input type="number" v-model="formData.leftAngle" placeholder="请输入左角度"/>
                </u-form-item>
                <u-form-item label="右角度(°)" label-width="160">
                    <u-input type="number" v-model="formData.rightAngle" placeholder="请输入右角度"/>
                </u-form-item>
                <u-form-item label="边高(cm)" label-width="160">
                    <u-input type="number" v-model="formData.biangao" placeholder="请输入边高"/>
                </u-form-item>
                <u-form-item label="柱宽(cm)" label-width="160">
                    <u-input type="number" v-model="formData.zhukuan" placeholder="请输入柱宽"/>
                </u-form-item>
                <u-form-item label="长(cm)" label-width="160">
                    <u-input type="number" v-model="formData.length" placeholder="选填"/>
                </u-form-item>
            </view>
            <view class="btn-group main-left cross-center">
                <u-button :ripple="true" @click="handelCalc" :custom-style="{backgroundColor: $u.color['mainBgColor'],color:'#ffffff',width: '260rpx',marginRight:'30rpx'}">计算</u-button>
                <u-button :ripple="true" @click="handleClear">清空</u-button>
            </view>
        </view>
        <div class="footer">
            <view class="result dir-top-wrap cross-center" v-if="showResult">
                <view v-for="item in rules" v-if="item.value && item.show">
                    <text>{{item.name}}=</text>{{item.value}}{{item.unit}}
                    <text v-if="item.isHalf">{{$util.round(item.value/2,2)}}{{item.unit}}</text>
                </view>
            </view>
            <view class="title">计算图</view>
            <view class="calc-img">
                <text class="qiwan top">{{rules.qiwan.value?rules.qiwan.value:'**'}}{{rules.qiwan.unit}}</text>
                <text class="leftxiebian top">{{rules.leftxiebian.value?rules.leftxiebian.value:'**'}}{{rules.leftxiebian.unit}}</text>
                <text class="rightxiebian top">{{rules.rightxiebian.value?rules.rightxiebian.value:'**'}}{{rules.rightxiebian.unit}}</text>
                <text class="leftxiekou1 bottom">{{rules.leftxiekou.value?rules.leftxiekou.value:'**'}}{{rules.leftxiekou.unit}}</text>
                <text class="leftxiekou2 bottom">{{rules.leftxiekou.value?rules.leftxiekou.value:'**'}}{{rules.leftxiekou.unit}}</text>
                <text class="zhukuan">{{formData.zhukuan?$util.round(formData.zhukuan,2):'**'}}cm</text>
                <text class="rightxiekou1 bottom">{{rules.rightxiekou.value?rules.rightxiekou.value:'**'}}{{rules.rightxiekou.unit}}</text>
                <text class="rightxiekou2 bottom">{{rules.rightxiekou.value?rules.rightxiekou.value:'**'}}{{rules.rightxiekou.unit}}</text>
                <u-image width="100%" height="300rpx" :src="mathImgs[name].calc" mode="aspectFit"></u-image>
            </view>
            <view class="title">切割图</view>
            <u-image width="100%" height="300rpx" :src="mathImgs[name].slice" mode="aspectFit"></u-image>

        </div>
    </view>
</template>

<script>
    import mathImgs from "@/core/math-imgs"
    // 万能公式
    export default {
        data() {
            return {
                name: 'guozhuwan',
                mathImgs: mathImgs,
                formData: {
                    leftHeight: '',
                    rightHeight: '',
                    leftAngle: '',
                    rightAngle: '',
                    biangao: '',
                    zhukuan: '',
                    lenght: '',
                },
                // 用来验证 输入
                rules: {
                    leftxiebian: {name:'左斜边', value:'',unit:'cm',show: true},
                    leftxiekou:{name:'左切口', value:'',unit:'cm',show: true,isHalf:true},
                    rightxiebian: {name:'右斜边', value:'',unit:'cm',show: true},
                    rightxiekou:{name:'右切口', value:'',unit:'cm',show: true,isHalf:true},
                    qiwan:{name:'起弯', value:'',unit:'cm',show: false},
                }
            }
        },
        methods: {
            handleBigImage(){
                uni.previewImage({
                    urls: [mathImgs[this.name].big],
                });
            },
            handelCalc(){
                if(!this.formData.leftHeight ||  !this.formData.rightHeight || !this.formData.leftAngle || !this.formData.rightAngle
                    || !this.formData.biangao || !this.formData.zhukuan ){
                    this.$u.toast('请填写全部参数');
                    return
                }
                if( this.formData.leftAngle > 90 ||  this.formData.rightHeight > 90){
                    this.$u.toast('角度不能大于90');
                    return
                }
                this.initRules();
                /**
                 * 1、 左斜边=左高×csc左角度°
                 2、 左切口=边高×tan（左角度°÷2）×2
                 3、 右斜边=右高×csc右角度°
                 4、 右切口=边高×tan（右角度°÷2）×2
                 */
                this.rules.leftxiebian.value = this.formData.leftHeight * this.$util.csc(this.formData.leftAngle)
                this.rules.leftxiekou.value = this.formData.biangao * this.$util.tan(this.formData.leftAngle / 2) * 2
                this.rules.rightxiebian.value = this.formData.rightHeight * this.$util.csc(this.formData.rightAngle)
                this.rules.rightxiekou.value =  this.formData.biangao * this.$util.tan(this.formData.rightAngle / 2) * 2
                // 1、 起弯=长-左高×cot左角度°
                if(this.formData.length){
                    this.rules.qiwan.value = this.formData.length - this.formData.leftHeight * this.$util.cot(this.formData.leftAngle)
                }
                this.roundRules();
                this.$u.toast("请参考计算示意图")
            },
            roundRules(){
                for (const itemKey in this.rules) {
                    this.rules[itemKey].value = this.$util.round(this.rules[itemKey].value,2);
                }
            },
            initRules(){
                for (const itemKey in this.rules) {
                    this.rules[itemKey].value = "";
                }
            },
            handleClear() {
                this.initRules();
                this.formData = {
                    leftHeight: '',
                    rightHeight: '',
                    leftAngle: '',
                    rightAngle: '',
                    biangao: '',
                    zhukuan: '',
                    lenght: '',
                };
            }
        },
        computed:{
            showResult(){
                let validate = [];
                for (const itemKey in this.rules) {
                    validate.push(this.rules[itemKey].value);
                }
                return this.$util.checkArrayNotNullNumber(validate)
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import "@/static/css/math.scss";
    .qiwan{
        left: 80rpx;
    }
    .leftxiebian{
        left: 200rpx;
    }
    .rightxiebian{
        left: 440rpx;
    }
    .leftxiekou1{
        left: 160rpx;
    }
    .leftxiekou2{
        left: 260rpx;
    }
    .zhukuan{
        top: 200rpx;
        left: 320rpx;
    }
    .rightxiekou1{
        left: 380rpx;
    }
    .rightxiekou2{
        left: 490rpx;
    }
</style>