eta_mobile_front/src/views/dataEDB/calculate/components/FormulaCalculate.vue

<script setup>
import apiDataEDB from '@/api/dataEDB'
import { showToast } from 'vant';
import {computed, reactive, ref,watch} from 'vue'
import SelectEDB from './SelectEDB.vue'
import EDBHistory from '@/views/dataEDB/components/EDBHistory.vue'
import SelectEDBClassify from '../../components/SelectEDBClassify.vue'
import SelectEDBUnit from '../../components/SelectEDBUnit.vue'
import SelectEDBFrequency from '../../components/SelectEDBFrequency.vue'
import {calculateTypeTipsMap,MAXADDEDBNUM} from '../../util/config'
import {generateSeriesArray} from '@/views/dataEDB/util/util.js'
import { useRoute, useRouter } from 'vue-router';
import {useToHistoryPage} from '@/hooks/edb/useToHistoryPage'
const {toHistoryPage} = useToHistoryPage()

import SelectDate from '@/components/SelectDate.vue'

const route=useRoute()
const router=useRouter()


const props=defineProps({
    edbInfo:{
        type:Object,
        default:null
    }
})

watch(
    ()=>props.edbInfo,
    ()=>{
        if(['edit','preview'].includes(route.query.type)){
            edbList.value=props.edbInfo.CalculateList.map(item=>{
                return {
                    tag:item.FromTag,
                    target:item.FromEdbInfoId,
                    startDate:item.StartDate,
                    endDate:item.EndDate,
                    name:item.FromEdbName
                }
            })
            formulaList.value= JSON.parse(props.edbInfo.EdbInfoDetail.CalculateFormula).map(_ =>({
                formula: _.f,
                date: _.d
            }))
            baseInfo.name=props.edbInfo.EdbInfoDetail.EdbName
            baseInfo.unit=props.edbInfo.EdbInfoDetail.Unit
            baseInfo.classify=props.edbInfo.EdbInfoDetail.ClassifyId
            baseInfo.frequency=props.edbInfo.EdbInfoDetail.Frequency
            baseInfo.nullValueWay=props.edbInfo.EdbInfoDetail.EmptyType
            baseInfo.maxNullWay=props.edbInfo.EdbInfoDetail.MaxEmptyType

            nullWayStr.value = nullWayOptions.value.find(_ =>_.value===baseInfo.nullValueWay).label
            maxNullStr.value = maxNullWayOptions.value.find(_=>_.value===baseInfo.maxNullWay).label

            if(props.edbInfo.EdbInfoDetail.Extra){
                const ExtraObj=JSON.parse(props.edbInfo.EdbInfoDetail.Extra)
                baseInfo.timeSeriesVal=ExtraObj.DateTag
                timeSeriesVal.value=timeSeriesOpts.value.find(_=>_.value===baseInfo.timeSeriesVal).label
            }

            setTimeout(() => {
                selectEDBClassifyINS.value?.getSelectClassifyOpt(props.edbInfo.EdbInfoDetail.ClassifyId)//获取选择的分类目录
            }, 1000);
        }
    }
)

// 预览页面
const isPreview=ref(route.query.type==='preview'||false)

const letterOpts = generateSeriesArray()||[];//字母数据

//公式说明
const showTips=ref(false)
const tips = ref('')
const tipsContent=ref(calculateTypeTipsMap.get(Number(route.query.source))||'')

//选择的指标集合
const edbList=ref([
    {
        tag:letterOpts[0],
        target:'',
        startDate:'',
        endDate:'',
        name:'',
        EdbType:0
    },
    {
        tag:letterOpts[1],
        target:'',
        startDate:'',
        endDate:'',
        name:'',
        EdbType:0
    },
    {
        tag:letterOpts[2],
        target:'',
        startDate:'',
        endDate:'',
        name:'',
        EdbType:0
    },
    {
        tag:letterOpts[3],
        target:'',
        startDate:'',
        endDate:'',
        name:'',
        EdbType:0
    }
])
function handleAddEdbList(){
    if(edbList.value.length>=MAXADDEDBNUM){
        showToast('添加指标个数已达上限')
        return
    }
    let tag = edbList.value[edbList.value.length-1].tag;
	let index = letterOpts.findIndex(item => item === tag);
	const item = {
		tag: letterOpts[index+1],
		target: '',
		start_date: '',
		end_date: '',
        name:'',
        EdbType:0
	};
	edbList.value.push(item);
}
function handleDeleteEDBItem(index){
    edbList.value.splice(index, 1)
}
// 选择指标
const showSelectEDB=ref(false)
let whichIndex=0
function handleShowSelectEDB(index){
    if(isPreview.value) return
    whichIndex=index
    showSelectEDB.value=true
}
function handleConfirmSelectEDB(e){
    edbList.value[whichIndex].target=e.EdbInfoId
    edbList.value[whichIndex].startDate=e.StartDate
    edbList.value[whichIndex].endDate=e.EndDate
    edbList.value[whichIndex].name=e.EdbName
    edbList.value[whichIndex].EdbType=e.EdbType
}

// 显示指标溯源
const showEDBHistory=ref(false)
const edbHistoryId=ref(0)
function handleShowEDBHistory(item){
    //计算指标打开弹窗,基础指标打开新页面
    if(item.EdbType===2){
        /* edbHistoryId.value=item.target
        showEDBHistory.value=true */
        toHistoryPage(item.target)
    }else{
        const routerEl=router.resolve({
            path:'/dataEDB/detail',
            query:{
                edbInfoId:item.target
            }
        })
        window.open(routerEl.href,'_blank')
    }
}

// 计算公式
const formulaVal=ref('')

// 基础信息
const edbNameInputFocus=ref(false)
const baseInfo=reactive({
    name:'',
    unit:'',
    classify:'',
    frequency:'',
    nullValueWay: 1,
    maxNullWay: 1,
    timeSeriesVal:'',
})

// 选择单位
const showSelectUnit=ref(false)
function onConfirmSelectUnit(value){
    baseInfo.unit=value
}

//选择分类
const showSelectClassify=ref(false)
const classifyStr=ref('')
const selectEDBClassifyINS=ref(null)
function handleConfirmClassify({value,selectedOptions}){
    if(selectedOptions.length===0){
        baseInfo.classify=''
        classifyStr.value=''
        return
    }
    baseInfo.classify=value
    const textArr=selectedOptions.map(item=>item.ClassifyName)
    classifyStr.value=`${textArr.join('/')}`
}

//选择频度
const showSelectFrequency=ref(false)
function handleConfirmFrequency(value){
    baseInfo.frequency=value
}


/* 公式改为列表 */
const formulaList = ref([{ formula: '' }])
const showSelectFormulaDate = ref(false)
const selectDateItem = ref({})
//日期时间段
const formulaDateArr = computed(() => {
    return formulaList.value.map(_ => _.date).filter(_ => _).sort((a,b) => new Date(a)-new Date(b))
})
/* 新增公式分段 */
function addFormulaHandle() {
    let addItem = {
        formula: formulaList.value[formulaList.value.length-1].formula,
        date: ''
    }
    formulaList.value.push(addItem)
}
/* 移除公式 */
function removeFormulaItem(index) {
    formulaList.value.splice(index,1)
}
/* 选择日期 检验 */
function handleConfirmFormulaDate(val) {
    const { startDate,endDate } = edbList.value[0];

    if(!startDate) {
        selectDateItem.value.date = val;
        return
    } 

    let dateStamp = new Date(val).getTime(), 
            startStamp = new Date(startDate).getTime(),
            endStamp = new Date(endDate).getTime();
    if (dateStamp > endStamp || dateStamp < startStamp) {
        return showToast('分段日期必须在第一个指标日期区间')
    }

    else if(formulaList.value.filter(_ => _.date===val).length>1) {
        return showToast('分段日期不可重复')
    }

    selectDateItem.value.date = val;
}



//空值处理弹窗
const nullWayStr = ref('查找前后35天最近值')
const showNullValPoup = ref(false)
const nullWayOptions = ref([
    { label: '查找前后35天最近值',value: 0 },
    { label: '不计算',value: 1 },
    { label: '前值填充',value: 2 },
    { label: '后值填充',value: 3 },
    { label: '等于0',value: 4 },
])
function onConfirmNullWay(e) {
    baseInfo.nullValueWay = e.selectedValues[0]
    nullWayStr.value = e.selectedOptions[0].label
    showNullValPoup.value = false
}


/* max空值处理显示 当输入的公式包含MAX、MIN且空值处理为0时，输入公式失焦后出现右侧选项； */
const showMaxNullDeal = computed(()=> {
    let haveMaxOrMin = formulaList.value.some(_ => _.formula.toUpperCase().includes('MAX') || _.formula.toUpperCase().includes('MIN'))

    return haveMaxOrMin && baseInfo.nullValueWay===4
})
//max空值处理
const maxNullStr = ref('等于0')
const showMaxNullValPoup = ref(false)
const maxNullWayOptions = ref([
    { label: '等于0',value: 1 },
    { label: '跳过空值',value: 2 },
])
function onConfirmMaxNullWay(e) {
    baseInfo.maxNullWay = e.selectedValues[0]
    maxNullStr.value = e.selectedOptions[0].label
    showMaxNullValPoup.value = false
}


// 生成指标时间序列
const timeSeriesVal=ref('')
const showTimeSeries=ref(false)
const timeSeriesOpts=computed(()=>{
    let arr=[]
    arr=edbList.value.filter(item=>item.target).map(item=>{
        return {
            label:`指标${item.tag}`,
            value:item.tag
        }
    })

    arr.push(
        {
			label:'所有指标时间序列并集',
			value:'all',
		}
    )

    return arr
})
function onConfirmTimeSeries(e){
    baseInfo.timeSeriesVal=e.selectedValues[0]
    timeSeriesVal.value=e.selectedOptions[0].label
    showTimeSeries.value=false
}

//一些文案提示
const formTips = ref({
    'null-val': `1、查找前后35天最近值：在参与计算的日期序列上某指标无值时，该指标往前/往后找距离最近的值作为当天的值进行计算，遍历允许跨年，往前最多35天，往后最多35天<br>
    2、不计算：只要有一个指标在某个日期没有值(即空值)，则计算指标在该日期没有值 <br>
    3、前值填充：空值优先以最近的前值填充，没有前值时，用后值填充 <br>
    4、后值填充：空值优先以最近的后值填充，没有前值时，用后值填充 <br>
    5、等于0：空值以0值参与计算 <br>
    注意：此处缺失值的处理，作用于数据全部时间段`,
    'max-null-val': `MAX、MIN公式中指标存在空值时按如下规则处理：<br>
    1、等于0，空值用0参与计算；<br>
    2、跳过空值，去除空值指标，剩余指标进行计算，若该日期所有指标均为空值，则该日期无值；`,
    'formula':`1、支持新增分段，实现不同分段使用不同的计算公式，若未新增分段，则所有日期序列用统一公式计算<br>
    2、新增分段需配置新公式和时间节点，在时间节点之前（不含）使用新公式，在时间节点之后（含）使用已配置公式，每个分段公式支持修改<br>
    3、分段时间节点不允许重复，不允许超出第一个指标的日期区间`
})

// 提交计算
async function handleSave(){
    if(!formulaList.value[0].formula){
        showToast('计算公式不能为空')
        return
    }
    if(!baseInfo.name){
        showToast('指标名称不能为空')
        return
    }
    if(!baseInfo.unit){
        showToast('指标单位不能为空')
        return
    }
    if(!baseInfo.classify){
        showToast('指标目录不能为空')
        return
    }
    if(!baseInfo.frequency){
        showToast('指标频度不能为空')
        return
    }
    const arr=edbList.value.filter(item=>item.target).map(item=>{
        return {
            EdbInfoId: item.target,
            FromTag: item.tag,
        }
    })

    let CalculateFormula = JSON.stringify(formulaList.value
        .filter((_,index) => index===0||(index>0&&_.formula&&_.date))
        .map(_ => ({ f:_.formula,d: _.date }))
    )

    const params={
        CalculateFormula,
        ClassifyId:baseInfo.classify,
        EdbName:baseInfo.name,
        Frequency:baseInfo.frequency,
        Unit:baseInfo.unit,
        EdbInfoIdArr:arr,
        EmptyType:baseInfo.nullValueWay,
        MaxEmptyType:baseInfo.maxNullWay,
        Extra:JSON.stringify({
			DateTag:baseInfo.timeSeriesVal
		})
    }
    const edbInfoId=route.query.edbInfoId
    const res=edbInfoId?await apiDataEDB.editCalculateFormula({...params,EdbInfoId:Number(edbInfoId)}):await apiDataEDB.addCalculateFormula(params)
    if(res.Ret===200){
        showToast(res.Msg)
        setTimeout(() => {
            if(edbInfoId){
                router.back()
            }else{
                router.replace({
                    path:'/dataEDB/detail',
                    query:{
                        edbInfoId:res.Data.EdbInfoId
                    }
                })
            }
        }, 1500);
    }
}

</script>

<template>
    <div class="formula-calculate-wrap">
        <section class="section select-edb-box">
            <van-swipe-cell  v-for="(item,index) in edbList" :key="item.tag" :disabled="index<4||isPreview">
                <van-field 
                    :label="item.tag"
                    :right-icon="!isPreview?'arrow':''"
                    @click-input="handleShowSelectEDB(index)"
                    :disabled="isPreview"
                >
                    <template #left-icon>
                        <div class="left-icon">
                            <svg-icon name="edb-history-tag" size="24px" v-if="item.target" @click="handleShowEDBHistory(item)"/>
                        </div>
                    </template>
                    <template #input>
                        <div class="edb-info-box">
                            <div class="edb-info" v-if="item.target">
                                <span class="name">{{item.name}}</span>
                                <span class="time">{{item.startDate}}至{{item.endDate}}</span>
                            </div>
                            <span class="placeholder" v-else>请选择指标</span>
                        </div>
                    </template>
                </van-field>
                <template #right>
                    <van-button square type="danger" text="删除" @click="handleDeleteEDBItem(index)"/>
                </template>
            </van-swipe-cell>
            <div class="add-edb-box" @click="handleAddEdbList" v-if="!isPreview">
                <img src="@/assets/imgs/icon01.png" alt="">
                <span>添加更多参数</span>
            </div>
        </section>
        <section class="section formula-box">

            <div class="section">
                <van-field  
                    v-model="nullWayStr"
                    required
                    input-align="right"
                    readonly
                    @click-input="showNullValPoup = true"
                    :right-icon="!isPreview?'arrow':''"
                    :disabled="isPreview"
                >
                    <template #label>
                        <span>
                            空值处理
                            <svg-icon class="icon" name="warning" @click="showTips=true;tips=formTips['null-val']"></svg-icon>
                        </span>
                    </template>
                </van-field>

                <van-field  
                    v-model="maxNullStr"
                    required
                    input-align="right"
                    readonly
                    @click-input="showMaxNullValPoup = true"
                    :right-icon="!isPreview?'arrow':''"
                    :disabled="isPreview"
                    v-if="showMaxNullDeal"
                >
                    <template #label>
                        <span>
                            MAX、MIN空值处理
                            <svg-icon class="icon" name="warning" @click="showTips=true;tips=formTips['max-null-val']"></svg-icon>
                        </span>
                    </template>
                </van-field>

                <van-field
                    v-model="timeSeriesVal"
                    input-align="right"
                    readonly
                    @click-input="showTimeSeries = true"
                    :right-icon="!isPreview?'arrow':''"
                    :disabled="isPreview"
                    label="生成指标时间序列"
                    label-width="140px"
                    placeholder="请选择"
                />
            </div>

            <div class="van-cell formula-wrap">
                <label class="van-cell__title van-field__label--required">计算公式 
                    <svg-icon class="icon" name="warning" @click="showTips=true;tips=formTips['formula']"></svg-icon>
                </label>
                <ul class="formula-list">

                    <li class="formula-item" v-for="(item,index) in formulaList" :key="index">
                        <template v-if="formulaDateArr.length&&(item.date||!index)">
                            <span v-if="index===0" class="date-section-text">{{formulaDateArr[formulaDateArr.length-1]}}(含)之后</span>
                            <span v-else-if="item.date===formulaDateArr[0]" class="date-section-text">{{formulaDateArr[0]}}之前</span>
                            <span v-else class="date-section-text">{{formulaDateArr[formulaDateArr.findIndex(_ =>_ ===item.date)-1]}}(含)—{{item.date}}</span>
                        </template>

                        <van-field
                            v-model="item.formula" 
                            placeholder="输入公式"
                            required
                            :disabled="isPreview"
                            class="formula-input"
                        />

                        <van-button type="default" size="small" v-if="index===0&&!isPreview" @click="addFormulaHandle" style="margin-left: 10px;">添加分段</van-button>

                        <template v-else>
                            <van-field
                                v-model="item.date" 
                                placeholder="日期"
                                required
                                :disabled="isPreview"
                                readonly
                                class="formula-input"
                                style="margin: 0 20px;"
                                @click-input="showSelectFormulaDate=true;selectDateItem=item;"
                            />

                            <van-icon name="clear" color="#333" size="20" @click="removeFormulaItem(index)" v-if="!isPreview"/>
                        </template>
                    </li>
                    <li class="formula-tips">
                        <p class="en-text-wrap">公式示例：A*0.5+B*C*1.2+120-MAX(A,B,C)</p>
                        <p class="en-text-wrap">函数支持：MAX(),MIN(),ln(A),log(a,A),abs(),exp(),pow(),round()</p>
                    </li>
                </ul>

            </div>
            <!-- <van-field  
                label="计算公式"
                required
            >
                <template #input>
                    <div style="margin-left:auto">
                    <input class="formula-input" :disabled="isPreview" type="text" placeholder="请输入公式" v-model="formulaVal">
                    <div class="formula-tips">
                        <p class="en-text-wrap">公式示例：A*0.5+B*C*1.2+120-MAX(A,B,C)</p>
                        <p class="en-text-wrap">函数支持：MAX(),MIN(),ln(A),log(a,A)</p>
                    </div>
                    </div>
                </template>
            </van-field> -->
        </section>
        <section class="section baseinfo-box">
            <van-field 
                v-model="baseInfo.name" 
                label="指标名称" 
                placeholder="指标名称"
                input-align="right"
                required
                @focus="edbNameInputFocus=true"
                @blur="edbNameInputFocus=false"
                :disabled="isPreview"
            >
                <template #right-icon>
                    <svg-icon v-if="!isPreview" class="edit-icon" name="edit" :color="edbNameInputFocus?'#0052D9':'#333333'"/>
                </template>
            </van-field>
            <van-field 
                :modelValue="baseInfo.unit"
                readonly
                label="单位" 
                placeholder="请选择单位"
                input-align="right"
                :right-icon="!isPreview?'arrow':''"
                required
                @click-input="showSelectUnit=true"
                :disabled="isPreview"
            />
            <van-field 
                :modelValue="classifyStr"
                readonly
                label="指标目录" 
                placeholder="请选择指标目录"
                input-align="right"
                :right-icon="!isPreview?'arrow':''"
                required
                @click-input="showSelectClassify=true"
                :disabled="isPreview"
            />
            <van-field 
                :modelValue="baseInfo.frequency"
                readonly
                label="频度" 
                placeholder="请选择指标频度"
                input-align="right"
                :right-icon="!isPreview?'arrow':''"
                required
                @click-input="showSelectFrequency=true"
                :disabled="isPreview"
            />
        </section>
        <div class="formula-intro-btn" @click="showTips=true;tips=tipsContent">
            <svg-icon class="icon" name="warning"></svg-icon>
            <span>公式说明</span>
        </div>
        <div class="opt-btns" v-if="!isPreview">
            <van-button class="primary2" @click="$router.back()">取消</van-button>
            <van-button type="primary" @click="handleSave">生成计算指标</van-button>
        </div>
    </div>

    <!-- 选择指标 -->
    <SelectEDB v-model:show="showSelectEDB" @select="handleConfirmSelectEDB"/>

    <!-- 指标溯源 -->
    <EDBHistory v-model:show="showEDBHistory" :edbInfoId="edbHistoryId"/>

    <!-- 选择单位 -->
    <SelectEDBUnit v-model:show="showSelectUnit" @select="onConfirmSelectUnit"/>

    <!-- 选择分类 -->
    <SelectEDBClassify ref="selectEDBClassifyINS" :defaultId="baseInfo.classify" v-model:show="showSelectClassify" @select="handleConfirmClassify" />

    <!-- 选择频度 -->
    <SelectEDBFrequency v-model:show="showSelectFrequency" @select="handleConfirmFrequency"/>

    <!-- 选择日期 -->
    <SelectDate v-model:show="showSelectFormulaDate" @select="handleConfirmFormulaDate"/>


    <!-- 公式说明 -->
    <van-dialog 
        v-model:show="showTips"
        confirmButtonText='知道啦'
    >
        <div class="edb-formula-tips-html-box" v-html="tips"></div>
    </van-dialog>

    <!-- 空值处理方式 -->
    <van-popup 
        :show="showNullValPoup" 
        round 
        position="bottom"
    >
        <van-picker
            title=""
            :columns="nullWayOptions"
            :columns-field-names="{
                text: 'label',
                value: 'value'
            }"
            @cancel="showNullValPoup=false"
            @confirm="onConfirmNullWay"
        />
    </van-popup>

    <!-- MAX空值处理方式 -->
    <van-popup 
        :show="showMaxNullValPoup" 
        round 
        position="bottom"
    >
        <van-picker
            title=""
            :columns="maxNullWayOptions"
            :columns-field-names="{
                text: 'label',
                value: 'value'
            }"
            @cancel="showMaxNullValPoup=false"
            @confirm="onConfirmMaxNullWay"
        />
    </van-popup>

    <!-- 选择生成指标时间序列 -->
    <van-popup 
        :show="showTimeSeries" 
        round 
        position="bottom"
    >
        <van-picker
            title=""
            :columns="timeSeriesOpts"
            :columns-field-names="{
                text: 'label',
                value: 'value'
            }"
            @cancel="showTimeSeries=false"
            @confirm="onConfirmTimeSeries"
        />
    </van-popup>


</template>

<style lang="scss" scoped>
.formula-calculate-wrap{
    min-height: 90vh;
    background-color: $page-bg-grey;
    padding-bottom: 210px ;
}
.section{
    background-color: #fff;
    margin-bottom: 32px;
}
.select-edb-box{
    .left-icon{
        width: 48px;
        height: 48px;
    }
    :deep(.van-cell__right-icon){
        align-self: center;
        color: #333;
    }
    .edb-info-box{
        width: 100%;
        text-align: right;
        .placeholder{
            color: var(--van-text-color-3);
        }
        .edb-info{
            display: flex;
            flex-direction: column;
        }
        .time{
            color: $font-grey_999;
            font-size: 24px;
        }
    }
    .add-edb-box{
        display: flex;
        justify-content: flex-end;
        align-items: center;
        color: $theme-color;
        font-size: 32px;
        padding: 32px var(--van-cell-horizontal-padding);
        img{
            width: 48px;
            height: 48px;
        }
    }

}
.formula-box{
    .formula-input{
        display: block;
        box-sizing: border-box;
        background-color: $page-bg-grey;
        padding: 12px 32px;
        border-radius: 12px;
        line-height: 1.7;
        width: 100%;
        flex: 1;
    }
    .formula-tips{
        font-size: 24px;
        color: $font-grey_999;
    }
}
.baseinfo-box{
    .edit-icon{
        width: 48px;
        height: 48px;
    }
}
.formula-intro-btn{
    width: 180px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: $theme-color;
    line-height: 1;
    background-color: #fff;
    border-radius: 32px;
    margin-left: auto;
    margin-right: var(--van-cell-horizontal-padding);
    .icon{
        width: 24px;
        height: 24px;
    }
}
.opt-btns{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    z-index: 99;
    padding: 48px;
    display: flex;
    justify-content: space-between;
    .van-button{
        width: 48%;
        max-width: 300PX;
    }
}
.formula-wrap {
    display: block;
    .formula-list { margin-top: 15px; }
    .formula-item {
        display: flex;
        align-items: center;
        position: relative;
        padding: 20px 0;
        .date-section-text {
            position: absolute;
            top: -15px;
        }
    }
}
@media screen and (min-width:$media-width){
    .formula-calculate-wrap{
        padding-bottom: 105px;
    }
    .section{
        margin-bottom: 16px;
    }
    .select-edb-box{
        .left-icon{
            width: 24px;
            height: 24px;
        }
        .edb-info-box{
            .time{
                font-size: 12px;
            }
        }
        .add-edb-box{
            font-size: 16px;
            padding: 16px var(--van-cell-horizontal-padding);
            img{
                width: 24px;
                height: 24px;
            }
        }
    }
    .formula-box{
        .formula-input{
            padding: 6px 16px;
            border-radius: 6px;
        }
        .formula-tips{
            font-size: 12px;
        }
    }
    .baseinfo-box{
        .edit-icon{
            width: 24px;
            height: 24px;
        }
    }
    .formula-intro-btn{
        width: 90px;
        height: 30px;
        gap: 2px;
        border-radius: 16px;
        .icon{
            width: 12px;
            height: 12px;
        }
    }
    .opt-btns{
        padding: 24px;
        justify-content: center;
        gap: 10px;
    }
    .formula-wrap .formula-item {
        display: flex;
        align-items: center;
        position: relative;
        padding: 15px 0;
        .date-section-text {
            position: absolute;
            top: -10px;
        }
    }
    
}
</style>