sange-bridge/pages/formula/anyangle.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="请选择角度" label-width="180">
                    <text @click="angleShow = true" class="select">{{angleTxt}}</text>
                    <u-select v-model="angleShow" :list="angleList" @confirm="handleSelectAngle"></u-select>
                </u-form-item>
                <u-form-item label="左斜边(cm)" label-width="180">
                    <u-input type="number" v-model="formData.leftxiebian" placeholder="请输入左斜边"/>
                </u-form-item>
                <u-form-item label="右斜边(cm)" label-width="180">
                    <u-input type="number" v-model="formData.rightxiebian" placeholder="请输入右斜边"/>
                </u-form-item>
                <u-form-item label="底边(cm)" label-width="180">
                    <u-input type="number" v-model="formData.dibian" placeholder="请输入底边"/>
                </u-form-item>
                <u-form-item label="边高(cm)" label-width="180">
                    <u-input type="number" v-model="formData.biangao" 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>{{$util.round(item.value,2)}}{{item.unit}}
                    <text v-if="item.isHalf">{{$util.round(item.value/2,2)}}{{item.unit}}</text>
                </view>
            </view>
        </div>
    </view>
</template>

<script>
    import mathImgs from "@/core/math-imgs"
    // 万能公式
    export default {
        data() {
            return {
                name: 'anyangle',
                mathImgs: mathImgs,
                formData: {
                    leftxiebian: '',
                    rightxiebian: '',
                    dibian: '',
                    biangao: '',
                    angle: '1'
                },
                // 用来验证 输入
                rules: {
                    left:{name:'左底角', value:'',unit:'°',show: true},
                    right: {name:'右底角', value:'',unit:'°',show: true},
                    top:{name:'顶角', value:'',unit:'°',show: true},
                    slice:{name:'切口', value:'',unit:'cm',show: true,isHalf:true},
                },
                angleShow: false,
                angleList: [
                    {value: '1',label: '顶角'},
                    {value: '2',label: '左底角'},
                    {value: '3',label: '右底角'},
                ],
                angleTxt: "顶角",
            }
        },
        methods: {
            handleBigImage(){
                uni.previewImage({
                    urls: [mathImgs[this.name].big],
                });
            },
            handelCalc(){
                if(!this.formData.leftxiebian){
                    this.$u.toast('请输入左斜边');
                    return
                }
                if(!this.formData.rightxiebian){
                    this.$u.toast('请输入右斜边');
                    return
                }
                if(!this.formData.dibian){
                    this.$u.toast('请输入底边');
                    return
                }
                this.initRules();
                /**
                 * 1、 已知左斜边（a）、右斜边（b）、底边（c），求左底度（A）、右底度（B）、顶角			（C）
                 * 左底角：cosA=（b²+c²-a²）÷（2bc）		当A>90°时，A=|180°-A|
                 右底度：cosB=（a²+c²-b²）÷（2ac）		当B>90°时，A=|180°-B|
                 顶角：cosC =（a²+b²-c²）÷（2ab）		当C>90°时，A=|180°-C|
                 2、 ①已知顶角：切口=边高×cosec顶角°
                 ②已知左底角：切口=边高×cosec左底角°
                 ③已知右底角：切口=边高×cosec右底角°
                 */
                let left = 0;
                let right = 0;
                let top = 0;

                let a = this.formData.leftxiebian;
                let b = this.formData.rightxiebian;
                let c = this.formData.dibian;
                let slice = 0;
                let biangao = this.formData.biangao;
                if(!this.$util.checkTriangle(a, b, c)){
                    this.$u.toast('两边之后要大于第三边');
                    return;
                }
                left = (Math.pow(a,2) + Math.pow(c,2) - Math.pow(b,2)) / (2 * a * c)
                right = (Math.pow(b,2) + Math.pow(c,2) - Math.pow(a,2)) / (2 * b * c)
                this.rules.left.value = this.$util.acos(left)
                this.rules.right.value = this.$util.acos(right)
                this.rules.top.value = top = 180 - this.rules.left.value - this.rules.right.value

                if(biangao){
                    if(this.formData.angle === '1'){ // 顶角
                        slice = biangao * this.$util.tan(this.rules.top.value/2)*2
                    }else if(this.formData.angle === '2'){ // 左底角
                        slice = biangao * this.$util.tan(this.rules.left.value/2)*2
                    }else{
                        slice = biangao * this.$util.tan(this.rules.right.value/2)*2
                    }
                }

                this.rules.slice.value = slice
                this.roundRules();
            },
            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 = "";
                }
            },
            handleSelectAngle(e){
                this.formData.angle = e[0].value;
                this.angleTxt = e[0].label;
                this.handelCalc()
            },
            handleClear() {
                this.initRules();
                this.formData = {
                    leftxiebian: '',
                    rightxiebian: '',
                    dibian: '',
                    biangao: '',
                    angle: '2'
                };
            }
        },
        computed:{
            showResult(){
                let validate = [];
                for (const itemKey in this.rules) {
                    validate.push(this.rules[itemKey].value);
                }
                return this.$util.checkArrayNotNullNumber(validate,1)
            },
        }
    }
</script>

<style lang="scss" scoped>
    @import "@/static/css/math.scss";
</style>