project-neic/src/components/modeControl/modeControl.vue

<template>
    <div class="body">
        <div class="control">
            <div :class="current===0?'smart_on':'smart'" @click="ChangeBar(0)">智能</div>
            <div :class="current===1?'recommend_on':'recommend'" @click="ChangeBar(1)">推荐</div>
            <div :class="current===2?'manual_on':'manual'" @click="ChangeBar(2)">手动</div>
        </div>
        <div class="dataArea">
            <div class="dataBlock">
                <div class="dataName">风能利用率</div>
                <div class="numerical">
                    <div class="data">
                        <div class="values">{{datas.windEnergyRate}}</div>
                        <div class="unit">%</div>
                    </div>
                    <img v-if="winFlag === 1" class="images" src="../../assets/img/type/up.png" alt="">
                    <img v-if="winFlag === 2" class="images" src="../../assets/img/type/down.png" alt="">
                    <div v-if="winFlag === 0" class="images_none"></div>
                </div>
            </div>
            <div class="dataBlock">
                <div class="dataName">曲线跟随率</div>
                <div class="numerical">
                    <div class="data">
                        <div class="values">{{datas.curveFollowingRate}}</div>
                        <div class="unit">%</div>
                    </div>
                    <img v-if="curveFlag === 1" class="images" src="../../assets/img/type/up.png" alt="">
                    <img v-if="curveFlag === 2" class="images" src="../../assets/img/type/down.png" alt="">
                    <div v-if="curveFlag === 0" class="images_none"></div>
                </div>
            </div>
            <div class="dataBlock">
                <div class="dataName">场用电率</div>
                <div class="numerical">
                    <div class="data">
                        <div class="values">{{datas.fieldElectricityRate}}</div>
                        <div class="unit">%</div>
                    </div>
                    <img v-if="fieldFlag === 1" class="images" src="../../assets/img/type/up.png" alt="">
                    <img v-if="fieldFlag === 2" class="images" src="../../assets/img/type/down.png" alt="">
                    <div v-if="fieldFlag === 0" class="images_none"></div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import BackgroundData from 'utils/BackgroundData'
    import api from "api/index";
    export default {
        props: {
            current: {
                type: Number,
            },
        },
        data() {
            return {
                current: 1,
                datas: {},
                winFlag: 0,
                curveFlag: 0,
                fieldFlag: 0,
            };
        },
        created() {
            this.getData(),
            this.refreshTimer = setInterval(this.getData, 20000);
        },
        mounted() {
            this.current = this.$props.current
            console.log(this.current);
        },
        methods: {
            getData() {
                api.getOverview().then(res => {
                    if (res) {
                        let data = res.data
                        this.datas.curveFollowingRate ?
                            (this.datas.curveFollowingRate > data.curveFollowingRate) ?
                                (this.curveFlag = 2)
                                : (this.datas.curveFollowingRate === data.curveFollowingRate) ? (this.curveFlag = 0) : (this.curveFlag = 1)
                            : (this.curveFlag = 0)
                        this.datas.fieldElectricityRate ?
                            (this.datas.fieldElectricityRate > data.fieldElectricityRate) ?
                                (this.fieldFlag = 2)
                                : (this.datas.fieldElectricityRate === data.fieldElectricityRate) ? (this.fieldFlag = 0) : (this.fieldFlag = 1)
                            : (this.fieldFlag = 0)
                        this.datas.windEnergyRate ?
                            (this.datas.windEnergyRate > data.windEnergyRate) ?
                                (this.winFlag = 2)
                                : (this.datas.windEnergyRate === data.windEnergyRate) ? (this.winFlag = 0) : (this.winFlag = 1)
                            : (this.winFlag = 0)
                        data.curveFollowingRate = data.curveFollowingRate.toFixed(2)
                        data.fieldElectricityRate = data.fieldElectricityRate.toFixed(2)
                        data.windEnergyRate = data.windEnergyRate.toFixed(2)
                        this.datas = data
                    }
                })
            },
            ChangeBar(values) {
                var bd = BackgroundData.getInstance();
                if (!bd.LoginUser) {
                    this.$notify({
                        title: "请登录",
                        message: "切换模式需要先登录！",
                        type: "warning",
                        position: "bottom-right",
                        offset: 60,
                        duration: 3000,
                    });
                    return;
                }
                if (this.current !== values) {
                    if ((this.current === 0 && values === 1) || (this.current === 1 && values === 0)) {
                        this.current = values
                        this.$emit('clicks', values);
                    } else if (values === 2 && this.current !== 2) {
                        this.$router.push('/ManualPage?current=' + values)
                        // this.current = values
                    } else {
                        this.$router.push('/?current=' + values)
                    }
                }
            },
            controls(value) {
                this.current = value
            }
        },
    }
</script>
<style scoped>
    .body {
        width: 100%;
        height: 18.5vh;
        /* background-color: #ffffff; */
        margin-left: 15px;
        margin-top: 20px;
        border-left: 1px solid #373737;
        border-right: 1px solid #373737;
        border-bottom: 1px solid #373737;
    }

    .control {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        font-size: 14px;
        color: #ffffff;
        margin-right: 5px;
    }

    .manual {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 29px;
        width: 86px;
        border-left: 1px solid rgba(51, 51, 51, 1);
        border-top: 1px solid rgba(51, 51, 51, 1);
        border-bottom: 1px solid rgba(51, 51, 51, 1);
        border-top-left-radius: 15px;
        border-bottom-left-radius: 15px;
    }

    .manual_on {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 29px;
        width: 86px;
        border-left: 1px solid rgba(37, 116, 219, 1);
        border-top: 1px solid rgba(37, 116, 219, 1);
        border-bottom: 1px solid rgba(37, 116, 219, 1);
        border-top-left-radius: 15px;
        border-bottom-left-radius: 15px;
        background-color: rgba(37, 116, 219, 1);
    }

    .recommend {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 29px;
        width: 86px;
        border-top: 1px solid rgba(51, 51, 51, 1);
        border-bottom: 1px solid rgba(51, 51, 51, 1);
    }

    .recommend_on {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 29px;
        width: 86px;
        border-top: 1px solid rgba(37, 116, 219, 1);
        border-bottom: 1px solid rgba(37, 116, 219, 1);
        background-color: rgba(37, 116, 219, 1);
    }

    .smart {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 29px;
        width: 86px;
        border-right: 1px solid rgba(51, 51, 51, 1);
        border-top: 1px solid rgba(51, 51, 51, 1);
        border-bottom: 1px solid rgba(51, 51, 51, 1);
        border-top-right-radius: 15px;
        border-bottom-right-radius: 15px;
    }

    .smart_on {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 29px;
        width: 86px;
        border-right: 1px solid rgba(37, 116, 219, 1);
        border-top: 1px solid rgba(37, 116, 219, 1);
        border-bottom: 1px solid rgba(37, 116, 219, 1);
        border-top-right-radius: 15px;
        border-bottom-right-radius: 15px;
        background-color: rgba(37, 116, 219, 1);
    }

    .dataArea {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .dataBlock {
        width: 29%;
        height: 82px;
        background-color: #242424;
        border: 1px solid #3D3D3D;
        margin-left: 18px;
        margin-top: 35px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .dataName {
        font-size: 16px;
        color: #FFFFFF;
        margin-left: 26px;
        margin-bottom: 6px;
    }

    .numerical {
        display: flex;
        flex-direction: row;
        color: #05BB4C;
        align-items: center;
        margin-left: 26px;
    }

    .data {
        display: flex;
        flex-direction: row;
        color: #05BB4C;
        align-items: baseline;
    }

    .values {
        font-size: 16px;
    }

    .unit {
        font-size: 12px;
        margin-left: 8px;
    }

    .images {
        width: 18px;
        height: 18px;
        margin-left: 10px;
        margin-top: 3px;
    }

    .images_none {
        width: 18px;
        height: 3px;
        background-color: #FFA500;
        margin-left: 10px;
        border-radius: 1px;
        margin-top: -3px;
    }
</style>