gdy_pc_8/src/newPerformance/components/TemplateDetails/ReferenceContent.vue

<template>
    <div class="reference-box">
        <strong>如何设置指标自动计算公式？</strong>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="示例一" name="1">
                <strong>示例一：按【完成率】计分</strong>
                <p>
                    业绩指标，权重为20%，目标值是100万，评分规则为实际得分=目标完成比率×权重分（目标完成比率=结果值÷目标值）
                </p>
                <img src="@/assets/step/formulaStep/formula1.png" alt="" style="width: 600px; height: 400px;">
            </el-tab-pane>
            <el-tab-pane label="示例二" name="2">
                <strong>示例二：按【超目标递增】或【低于目标递减】计分时</strong>
                <p>
                    如：业绩指标，权重为20%，目标值是100万，评分规则为：<br />
                    1）当结果值等于目标值时，得满分（即权重分）；<br />
                    2）当结果值超过目标，每增加1%，在标准权重分基础上加2分；<br />
                    3）当目标未达成，每低于目标的1%，在标准权重分基础上扣2分；<br />
                </p>

                <el-carousel :key="idGenerator()" height="400px" indicator-position="outside" :pause-on-hover="true">
                    <el-carousel-item>
                        <img src="@/assets/step/formulaStep/formula2-1.png" alt="" style="width: 600px; height: 400px;">
                    </el-carousel-item>
                    <el-carousel-item>
                        <img src="@/assets/step/formulaStep/formula2-2.png" alt="" style="width: 600px; height: 400px;">
                    </el-carousel-item>
                    <el-carousel-item>
                        <img src="@/assets/step/formulaStep/formula2-3.png" alt="" style="width: 600px; height: 400px;">
                    </el-carousel-item>
                </el-carousel>
            </el-tab-pane>
            
            
            <el-tab-pane label="示例三" name="3">
                <strong>示例三：按【否定】计分时</strong>
                <p>
                    如：安全事故指标，权重为20%，目标为0起。评分规则为：<br />
                    无出现安全事故，得权重基础分20分，<br />
                    出现安全事故，此项为0分。
                </p>

                <el-carousel :key="idGenerator()" height="400px" :pause-on-hover="true" indicator-position="outside">
                    <el-carousel-item>
                        <img src="@/assets/step/formulaStep/formula3-1.png" alt="" style="width: 600px; height: 400px;">
                    </el-carousel-item>
                    <el-carousel-item>
                        <img src="@/assets/step/formulaStep/formula3-2.png" alt="" style="width: 600px; height: 400px;">
                    </el-carousel-item>
                </el-carousel>
            </el-tab-pane>

            <el-tab-pane label="示例四" name="4">
                <strong>示例四：按【区间】计分时</strong>
                <p>
                    如客户满意度指标，权重为20%，目标为90%。
                    完成90%以上得20分，80%～89%得15分，70%～79%得10分，60%～69%以上得5分，60％以下得0分。
                </p>

                <el-carousel :key="idGenerator()" height="400px" :pause-on-hover="true" indicator-position="outside">
                    <el-carousel-item>
                        <img src="@/assets/step/formulaStep/formula4-1.png" alt="" style="width: 600px; height: 400px;">
                    </el-carousel-item>
                    <el-carousel-item>
                        <img src="@/assets/step/formulaStep/formula4-2.png" alt="" style="width: 600px; height: 400px;">
                    </el-carousel-item>
                    <el-carousel-item>
                        <img src="@/assets/step/formulaStep/formula4-3.png" alt="" style="width: 600px; height: 400px;">
                    </el-carousel-item>
                    <el-carousel-item>
                        <img src="@/assets/step/formulaStep/formula4-4.png" alt="" style="width: 600px; height: 400px;">
                    </el-carousel-item>
                    <el-carousel-item>
                        <img src="@/assets/step/formulaStep/formula4-5.png" alt="" style="width: 600px; height: 400px;">
                    </el-carousel-item>
                </el-carousel>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>


<script>


export default {
    data() {
        return {
            activeName: "1",
        }
    },
    methods: {
        // id生成器

        idGenerator() {
            return Date.now() + Math.floor(Math.random() * 10000);
        },

        handleClick(tab, event) {
            // console.log(tab, event);
        },
    }
    
}
</script>