sange-bridge/pages/formula/duochengzhijiao.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">
                    <u-input type="number" v-model="formData.angle"  placeholder="请输入角度"/>
                </u-form-item>
                <u-form-item label="层间距(cm)" label-width="180">
                    <u-input type="number" v-model="formData.cengjianju"  placeholder="请输入层间距"/>
                </u-form-item>
                <u-form-item label="已测量层数" label-width="180">
                    <text @click="cengShow = true" class="select">{{cengTxt}}</text>
                    <u-select v-model="cengShow" :list="cengList" @confirm="handleSelectCeng"></u-select>
                </u-form-item>
                <u-form-item label="斜边(cm)" label-width="180">
                    <u-input type="number" v-model="formData.xiebian"  placeholder="请输入斜边"/>
                </u-form-item>
                <u-form-item label="边高(cm)" label-width="180">
                    <u-input type="number" v-model="formData.biangao" placeholder="请输入边高"/>
                </u-form-item>
                <u-form-item label="起弯(cm)" label-width="180">
                    <u-input type="number" v-model="formData.qiwan" 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="diyiceng">{{rules.diyiceng.value?rules.diyiceng.value:'**'}}{{rules.diyiceng.unit}}</text>
                <text class="diyicengqiwan">{{rules.diyicengqiwan.value?rules.diyicengqiwan.value:'**'}}{{rules.diyicengqiwan.unit}}</text>
                <text class="slice1">{{rules.slice.value?rules.slice.value:'**'}}{{rules.slice.unit}}</text>
                <text class="slice2">{{rules.slice.value?rules.slice.value:'**'}}{{rules.slice.unit}}</text>
                <text class="dierceng">{{rules.dierceng.value?rules.dierceng.value:'**'}}{{rules.dierceng.unit}}</text>
                <text class="diercengqiwan">{{rules.diercengqiwan.value?rules.diercengqiwan.value:'**'}}{{rules.diercengqiwan.unit}}</text>
                <text class="slice3">{{rules.slice.value?rules.slice.value:'**'}}{{rules.slice.unit}}</text>
                <text class="slice4">{{rules.slice.value?rules.slice.value:'**'}}{{rules.slice.unit}}</text>
                <text class="disanceng">{{rules.disanceng.value?rules.disanceng.value:'**'}}{{rules.disanceng.unit}}</text>
                <text class="disancengqiwan">{{rules.disancengqiwan.value?rules.disancengqiwan.value:'**'}}{{rules.disancengqiwan.unit}}</text>
                <text class="slice5">{{rules.slice.value?rules.slice.value:'**'}}{{rules.slice.unit}}</text>
                <text class="slice6">{{rules.slice.value?rules.slice.value:'**'}}{{rules.slice.unit}}</text>
                <text class="cengjianju1">{{formData.cengjianju?formData.cengjianju:'**'}}cm</text>
                <text class="cengjianju2">{{formData.cengjianju?formData.cengjianju:'**'}}cm</text>
                <u-image width="100%" height="600rpx" :src="mathImgs[name].calc" mode="widthFix"></u-image>
            </view>
            <view class="title">切割图</view>
            <u-image width="100%" height="600rpx" :src="mathImgs[name].slice" mode="widthFix"></u-image>

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

<script>
    import mathImgs from "@/core/math-imgs"
    // 万能公式
    export default {
        data() {
            return {
                name: 'duochengzhijiao',
                mathImgs: mathImgs,
                formData: {
                    angle: '',
                    cengjianju: '',
                    ceng: '1',
                    xiebian: '',
                    biangao: '',
                    qiwan: '',
                },
                // 用来验证 输入
                rules: {
                    diyiceng: {name:'第一层斜边', value:'',unit:'cm',show: true},
                    dierceng:{name:'第二层斜边', value:'',unit:'cm',show: true},
                    disanceng: {name:'第三层斜边', value:'',unit:'cm',show: true},
                    diyicengqiwan: {name:'第一层起弯', value:'',unit:'cm',show: true},
                    diercengqiwan:{name:'第二层起弯', value:'',unit:'cm',show: true},
                    disancengqiwan: {name:'第三层起弯', value:'',unit:'cm',show: true},
                    slice:{name:'切口', value:'',unit:'cm',show: true,isHalf:true},
                },
                cengShow: false,
                cengList: [
                    {value: '1',label: '第一层'},
                    {value: '2',label: '第二层'},
                    {value: '3',label: '第三层'},
                ],
                cengTxt: "第一层",
            }
        },
        methods: {
            handleBigImage(){
                uni.previewImage({
                    urls: [mathImgs[this.name].big],
                });
            },
            handelCalc(){
                if(!this.formData.angle){
                    this.$u.toast('请输入角度');
                    return
                }
                if( this.formData.angle &&  this.formData.angle >= 90){
                    this.$u.toast('角度不能大于和等于90');
                    return
                }
                if(!this.formData.cengjianju){
                    this.$u.toast('请输入层间距');
                    return
                }
                if(!this.formData.xiebian){
                    this.$u.toast('请输入斜边');
                    return
                }
                if(!this.formData.biangao){
                    this.$u.toast('请输入边高');
                    return
                }
                this.initRules();
                /**
                 * 1、 已知第一层：
                 * 第二层斜边=斜边-（边高+层间距）×tan（角度°÷2）×2
                 * 第三层斜边=斜边-（边高+层间距）×tan（角度°÷2）×4
                 * 切口 = 边高×tan（角度°÷2）×2
                 */
                this.formData.angle = parseFloat(this.formData.angle);
                this.formData.cengjianju = parseFloat(this.formData.cengjianju);
                this.formData.biangao = parseFloat(this.formData.biangao);
                this.formData.xiebian = parseFloat(this.formData.xiebian);
                this.formData.ceng = parseFloat(this.formData.ceng);
                this.formData.cengjianju = parseFloat(this.formData.cengjianju);
                this.formData.qiwan = parseFloat(this.formData.qiwan);


                if(this.formData.ceng === 1){
                    this.rules.diyiceng.value = this.formData.xiebian
                    this.rules.diyicengqiwan.value =  this.formData.qiwan
                    this.rules.diyiceng.show = false;
                    this.rules.diyicengqiwan.show = false;

                    this.rules.dierceng.value = this.formData.xiebian - (this.formData.biangao + this.formData.cengjianju) * this.$util.tan(this.formData.angle / 2) * 2;
                    this.rules.disanceng.value = this.formData.xiebian - (this.formData.biangao + this.formData.cengjianju) * this.$util.tan(this.formData.angle / 2) * 4;
                    /**
                     * 1、 已知第一层起弯：
                     * 第二层起弯 = 起弯-（边高+层间距）×tan（角度°÷2）
                     * 第三层起弯 = 起弯-（边高+层间距）×tan（角度°÷2）×2
                     */
                    if(this.formData.qiwan){
                        this.rules.diercengqiwan.value = this.formData.qiwan - (this.formData.biangao + this.formData.cengjianju) * this.$util.tan(this.formData.angle / 2);
                        this.rules.disancengqiwan.value = this.formData.qiwan - (this.formData.biangao + this.formData.cengjianju) * this.$util.tan(this.formData.angle / 2) * 2;
                    }
                }
                /**
                 *  2、 已知第二层：
                 *  第一层斜边=斜边＋（边高+层间距）×tan（角度°÷2）×2
                 *  第三层斜边=斜边-（边高+层间距）×tan（角度°÷2）×2
                 *  切口 = 边高×tan（角度°÷2）×2
                 */
                if(this.formData.ceng === 2){
                    this.rules.dierceng.value = this.formData.xiebian
                    this.rules.diercengqiwan.value =  this.formData.qiwan
                    this.rules.dierceng.show = false;
                    this.rules.diercengqiwan.show = false;

                    this.rules.diyiceng.value = this.formData.xiebian + (this.formData.biangao + this.formData.cengjianju) * this.$util.tan(this.formData.angle / 2) * 2;
                    this.rules.disanceng.value = this.formData.xiebian - (this.formData.biangao + this.formData.cengjianju) * this.$util.tan(this.formData.angle / 2) * 2;
                    /**
                     * 1、 已知第二层起弯
                     * 第一层起弯 = 起弯＋（边高+层间数）×tan（角度°÷2）
                     * 第三层起弯 = 起弯-（边高+层间数）×tan（角度°÷2）
                     */
                    if(this.formData.qiwan){
                        this.rules.diyicengqiwan.value = this.formData.qiwan + (this.formData.biangao + this.formData.cengjianju) * this.$util.tan(this.formData.angle / 2);
                        this.rules.disancengqiwan.value = this.formData.qiwan - (this.formData.biangao + this.formData.cengjianju) * this.$util.tan(this.formData.angle / 2);
                    }
                }
                /**
                 * 3、 已知第三层：
                 * 第一层斜边=斜边＋（边高+层间距）×tan（角度°÷2）×4
                 * 第二层斜边=斜边＋（边高+层间距）×tan（角度°÷2）×2
                 * 切口 = 边高×tan（角度°÷2）×2
                 */
                if(this.formData.ceng === 3){
                    this.rules.disanceng.value = this.formData.xiebian
                    this.rules.disancengqiwan.value =  this.formData.qiwan
                    this.rules.disanceng.show = false;
                    this.rules.disancengqiwan.show = false;

                    this.rules.diyiceng.value = this.formData.xiebian + (this.formData.biangao + this.formData.cengjianju) * this.$util.tan(this.formData.angle / 2) * 4;
                    this.rules.dierceng.value = this.formData.xiebian + (this.formData.biangao + this.formData.cengjianju) * this.$util.tan(this.formData.angle / 2) * 2;
                    /**
                     * 3、 已知第三层起弯：
                     * 第一层起弯 = 起弯＋（边高+层间数）×tan（角度°÷2）×4
                     * 第二层起弯 = 起弯＋（边高+层间数）×tan（角度°÷2）×2
                     */
                    if(this.formData.qiwan){
                        this.rules.diyicengqiwan.value = this.formData.qiwan + (this.formData.biangao + this.formData.cengjianju) * this.$util.tan(this.formData.angle / 2) * 4
                        this.rules.diercengqiwan.value = this.formData.qiwan + (this.formData.biangao + this.formData.cengjianju) * this.$util.tan(this.formData.angle / 2) * 2;
                    }
                }
                this.rules.slice.value = this.formData.biangao * this.$util.tan(this.formData.angle / 2) * 2;

                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 = "";
                    this.rules[itemKey].show = true;
                }
            },
            handleSelectCeng(e){
                this.formData.ceng = e[0].value;
                this.cengTxt = e[0].label;
            },
            handleClear() {
                this.initRules();
                this.formData = {
                    angle: '',
                    cengjianju: '',
                    ceng: '1',
                    xiebian: '',
                    biangao: '',
                    qiwan: '',
                };
            }
        },
        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";
    .diyiceng{
        left: 150rpx;
    }
    .diyicengqiwan{
        left: 320rpx;
    }
    .slice1{
        top: 170rpx;
        left: 240rpx;
    }
    .slice2{
        top: 170rpx;
        left: 445rpx;
    }
    .dierceng{
        top: 190rpx;
        left: 170rpx;
    }
    .diercengqiwan{
        top: 190rpx;
        left: 340rpx;
    }
    .slice3{
        top: 350rpx;
        left: 260rpx;
    }
    .slice4{
        top: 350rpx;
        left: 445rpx;
    }
    .disanceng{
        top: 360rpx;
        left: 170rpx;
    }
    .disancengqiwan{
        top: 360rpx;
        left: 340rpx;
    }
    .slice5{
        top: 520rpx;
        left: 280rpx;
    }
    .slice6{
        top: 520rpx;
        left: 445rpx;
    }
    .cengjianju1{
        top: 200rpx;
    }
    .cengjianju2{
        top: 370rpx;
    }
</style>