sange-bridge/pages/formula/normal.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="digit" v-model="formData.height" :placeholder="heightInput.placeholder" :disabled="heightInput.disabled"/>
                </u-form-item>
                <u-form-item label="角度(°)" label-width="160">
                    <u-input type="digit" v-model="formData.angle" :placeholder="angleInput.placeholder" :disabled="angleInput.disabled"/>
                </u-form-item>
                <u-form-item label="底边(cm)" label-width="160">
                    <u-input type="digit" v-model="formData.dibian" :placeholder="dibianInput.placeholder" :disabled="dibianInput.disabled"/>
                </u-form-item>
                <u-form-item label="斜边(cm)" label-width="160">
                    <u-input type="digit" v-model="formData.xiebian" :placeholder="xiebianInput.placeholder" :disabled="xiebianInput.disabled"/>
                </u-form-item>
                <u-form-item label="边高(cm)" label-width="160">
                    <u-input type="digit" v-model="formData.biangao" placeholder="选填"/>
                </u-form-item>
                <u-form-item label="长(cm)" label-width="160">
                    <u-input type="digit" 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="xiebian top">{{rules.xiebian.value?rules.xiebian.value:'**'}}{{rules.xiebian.unit}}</text>
                <text class="slice1 bottom">{{rules.slice.value?rules.slice.value:'**'}}{{rules.slice.unit}}</text>
                <text class="slice2 bottom">{{rules.slice.value?rules.slice.value:'**'}}{{rules.slice.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: 'normal',
                mathImgs: mathImgs,
                formData: {
                    height: '',
                    angle: '',
                    dibian: '',
                    xiebian: '',
                    biangao: '',
                    lenght: '',
                },
                // 用来验证 输入
                rules: {
                    height: {name:'高', value:'',unit:'cm',show: true},
                    angle:{name:'角度', value:'',unit:'°',show: true},
                    dibian: {name:'底边', value:'',unit:'cm',show: true},
                    xiebian:{name:'斜边', value:'',unit:'cm',show: true},
                    slice:{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.angle &&  this.formData.angle > 90){
                    this.$u.toast('角度不能大于90');
                    return
                }
                this.initRules();
                /*1：已知高、角度：底边=高÷tan角度°		斜边=高÷sin角度°*/
                if(this.formData.height && this.formData.angle){
                    this.rules.dibian.value = this.formData.height/this.$util.tan(this.formData.angle);
                    this.rules.xiebian.value = this.formData.height/this.$util.sin(this.formData.angle);
                }
                /* 2：已知高、底边：tan角度°=高÷底边		斜边²=高²+底边²*/
                if(this.formData.height && this.formData.dibian){
                    this.rules.angle.value = this.$util.atan(this.formData.height/this.formData.dibian);
                    this.rules.xiebian.value = Math.sqrt(Math.pow(this.formData.height,2) + Math.pow(this.formData.dibian,2));
                }
                /* 3：已知角度、底边：高=底边×tan角度°		斜边=底边÷cos角度°*/
                if(this.formData.angle && this.formData.dibian){
                    this.rules.height.value = this.formData.dibian*this.$util.tan(this.formData.angle);
                    this.rules.xiebian.value = this.formData.dibian/this.$util.cos(this.formData.angle);
                }
                /* 4：已知角度、斜边：高=斜边×sin角度°		底边=斜边×cos角度°*/
                if(this.formData.angle && this.formData.xiebian){
                    this.rules.height.value = this.formData.xiebian/this.$util.sin(this.formData.angle);
                    this.rules.dibian.value = this.formData.xiebian/this.$util.cos(this.formData.angle);
                }
                /* 5：已知底边、斜边：高²=斜边²-底边²		cos角度°=底边÷斜边*/
                if(this.formData.dibian && this.formData.xiebian){
                    this.rules.height.value = Math.sqrt(Math.pow(this.formData.xiebian,2) - Math.pow(this.formData.dibian,2));
                    this.rules.angle.value = this.$util.acos(this.formData.dibian/this.formData.xiebian);
                }
                /*选填（输入边高计算出切口）：1、 切口=边高×tan（角度°÷2）×2 2、 起弯=长-底边*/
                if(this.formData.biangao){
                    let angle = this.rules.angle.value ? this.rules.angle.value : this.formData.angle
                    this.rules.slice.value = this.formData.biangao * this.$util.tan(angle / 2) * 2;
                }
                if(this.formData.length){
                    let dibian = this.formData.dibian ? this.formData.dibian : this.rules.dibian.value
                    this.rules.qiwan.value = this.formData.length - dibian;
                }
                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 = "";
                }
            },
            getInputItem(item){
                let validate = [];
                for (const itemKey in this.rules) {
                    if(item !== itemKey && typeof this.formData[itemKey] !== "undefined")
                        validate.push(this.formData[itemKey]);
                }
                let placeholder = `请输入${this.rules[item].name}`;
                let disabled = false;
                if(this.$util.checkArrayNotNullNumber(validate)){
                    disabled = true;
                    placeholder = '无需输入';
                }
                return {placeholder: placeholder,disabled:disabled};

            },
            handleClear() {
                this.initRules();
                this.formData = {
                    height: '',
                    angle: '',
                    dibian: '',
                    xiebian: '',
                    biangao: '',
                    lenght: '',
                };
            }
        },
        computed:{
            heightInput(){
                return this.getInputItem('height')
            },
            angleInput(){
                return this.getInputItem('angle')
            },
            dibianInput(){
                return this.getInputItem('dibian')
            },
            xiebianInput(){
                return this.getInputItem('xiebian')
            },
            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: 100rpx;
    }
    .xiebian{
        left: 300rpx;
    }
    .slice1{
        left: 210rpx;
    }
    .slice2{
        left: 430rpx;
    }
</style>