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 style="display: flex;flex-direction: row;z-index: 2;">
            <!-- <div class="dataShow">
                <div class="number">
                    <div class="dataName">健康指数</div>
                    <div class="numbers">{{showDate.healthIndex}}</div>
                </div>
                <div class="progress">
                    <div class="progressNum" :style="healthStyle"></div>
                </div>
                <div class="number">
                    <div class="dataName">资源指数</div>
                    <div class="numbers">{{showDate.resourceIndex}}</div>
                </div>
                <div class="progress">
                    <div class="progressNum" :style="resourceStyle"></div>
                </div>
            </div> -->
            <div class="showData">
                <div class="dataBox">
                    <div class="dataTitle">健康指数</div>
                    <div class="datas">{{showDate.healthIndex}}</div>
                </div>
                <div class="dataBox">
                    <div class="dataTitle">资源指数</div>
                    <div class="datas">{{showDate.resourceIndex}}</div>
                </div>
            </div>
            <div id="mainEcharts" class="echarts"></div>
            <div class="showData">
                <div class="dataBox-right">
                    <div class="dataTitle">风能利用率</div>
                    <div class="datas">{{showDate.windEnergyRate}}%</div>
                </div>
                <div class="dataBox-right">
                    <div class="dataTitle">曲线跟随率</div>
                    <div class="datas">{{showDate.curveFollowingRate}}%</div>
                </div>
            </div>
            <!-- <div class="dataShows">
                <div class="number">
                    <div class="numbers-right">{{showDate.windEnergyRate}}%</div>
                    <div class="dataName-right">风能利用率</div>
                </div>
                <div class="progress-right">
                    <div class="progressNum-right" :style="windStyle"></div>
                </div>
                <div class="number">
                    <div class="numbers-right">{{showDate.curveFollowingRate}}%</div>
                    <div class="dataName-right">曲线跟随率</div>
                </div>
                <div class="progress-right">
                    <div class="progressNum-right" :style="curveStyle"></div>
                </div>
            </div> -->
        </div>
    </div>
</template>
<script>
    import BackgroundData from 'utils/BackgroundData'
    import api from "api/index";
    import MessageBridge from 'utils/MessageBridge'
    import * as echarts from "echarts";
    export default {
        props: {
            // current: {
            //     type: Number,
            // },
        },
        data() {
            return {
                current: 1,
                datas: {},
                list: {},
                showDate:{},
                winFlag: 0,
                curveFlag: 0,
                fieldFlag: 0,
                healthWidth: 0,
                resourceWidth: 0,
                windWidth: 0,
                curveWidth: 0,
            };
        },
        created() {
            this.initData();
            this.getData(),
                this.refreshTimer = setInterval(this.getData, 20000);
        },
        computed: {
            healthStyle() {
                return `width: ${this.healthWidth}%;`
            },
            resourceStyle() {
                return `width: ${this.resourceWidth}%;`
            },
            windStyle() {
                return `width: ${this.windWidth}%;`
            },
            curveStyle() {
                return `width: ${this.curveWidth}%;`
            },
        },
        mounted() {
            // this.current = this.$props.current
            this.$nextTick(() => {
                if (document.getElementById('mainEcharts')) {
                    this.getEcharts()
                }
            });
        },
        methods: {
            initData() {
                var mb = MessageBridge.getInstance();
                var vss = [{ key: "/topic/voice-control", action: this.windturbineMessage }];
                var vs = [{ key: "/topic/title-info", action: this.getEchartss }];
                mb.register(vs);
                mb.register(vss);
            },
            windturbineMessage(msg) {
                let arr = []
                if (msg === 'CLOSE') {
                    arr.push(msg)
                } else {
                    arr = msg.split('-')
                }
                this.dialogVisible = false
                this.showSvg = false
                this.svgWeb = ''
                console.log(arr);
                if (arr[0] === 'OPEN_PAGE_MANUAL') {
                    this.ChangeBar(2)
                } else if (arr[0] === 'OPEN_PAGE_AUTOMATIC') {
                    this.ChangeBar(0)
                } else if (arr[0] === 'OPEN_PAGE_RECOMMENDATION') {
                    this.ChangeBar(1)
                }
            },
            getEchartss(msg){
                let data = JSON.parse(msg)
                data.healthIndex = Number(data.healthIndex).toFixed(0)
                data.resourceIndex = Number(data.resourceIndex).toFixed(0)
                data.realTimePower = data.realTimePower.toFixed(2)
                data.theoreticalPower = data.theoreticalPower.toFixed(2)
                data.agcPowerSet = data.agcPowerSet.toFixed(2)
                data.windEnergyRate = data.windEnergyRate.toFixed(2)
                data.curveFollowingRate = data.curveFollowingRate.toFixed(2)
                this.healthWidth= (data.healthIndex/4000)*100
                this.resourceWidth= (data.resourceIndex/4000)*100
                this.windWidth= data.windEnergyRate
                this.curveWidth= data.curveFollowingRate
                this.showDate = data
                this.getEcharts()
            },
            getEcharts() {
                var chartDom = document.getElementById('mainEcharts');
                var myChart = echarts.init(chartDom, '#000000');
                var option;
                option = {
                    series: [{
                        type: 'gauge',
                        max: 664,
                        splitNumber: 8,
                        anchor: {
                            show: true,
                            showAbove: true,
                            size: 9,
                            width: 5,
                            itemStyle: {
                                color: '#FAC858'
                            }
                        },
                        pointer: {
                            icon: '',
                            width: 3,
                            length: '80%',
                            offsetCenter: [0, '8%']
                        },

                        progress: {
                            show: true,
                            overlap: true,
                            roundCap: true
                        },
                        axisLine: {
                            lineStyle: {//仪表盘轴线相关配置。
                                width: 2,
                                color: [[1, 'rgba(83, 92, 93, 0.5)']]
                            }
                        },
                        axisLabel: {
                            // textStyle: {//数字刻度样式
                            //     color: '#000000',
                            //     fontSize: 12,
                            // }
                        },
                        splitLine: {//分隔线样式相关
                            length: 0,//分割线的长度
                            lineStyle: {
                                width: 1,
                                color: '#000000'
                            }
                        },
                        data: [{
                            value: 21,
                            name: '实际功率',
                            itemStyle: {
                                color: 'rgba(75, 85, 174, 1)'
                            },
                            title: {
                                color: '#999999',
                                offsetCenter: ['-60%', '90%']
                            },
                            detail: {
                                width: 40,
                                height: 12,
                                fontSize: 18,
                                offsetCenter: ['-60%', '110%']
                            }
                        },
                        {
                            value: 24,
                            name: '理论功率',
                            itemStyle: {
                                color: 'rgba(05, 187, 76, 1)'
                            },
                            title: {
                                color: '#999999',
                                offsetCenter: ['-5%', '90%']
                            },
                            detail: {
                                width: 40,
                                height: 12,
                                fontSize: 18,
                                offsetCenter: ['-5%', '110%']
                            }
                        },
                        {
                            value: 73,
                            name: 'AGC有功设定',
                            itemStyle: {
                                color: 'rgba(186, 50, 55, 1)'
                            },
                            title: {
                                color: '#999999',
                                offsetCenter: ['60%', '90%']
                            },
                            detail: {
                                align: 'center',
                                width: 60,
                                height: 12,
                                fontSize: 18,
                                offsetCenter: ['60%', '110%']
                            }
                        }
                        ],
                        title: {
                            fontSize: 12
                        },
                        detail: {
                            width: 20,
                            height: 7,
                            fontSize: 12,
                            color: '#fff',
                            backgroundColor: 'auto',
                            borderRadius: 3,
                            formatter: ''
                        }
                    }]
                };
                option.series[0].data[0].value = Number(this.showDate.realTimePower);
                option.series[0].data[1].value = Number(this.showDate.theoreticalPower);
                option.series[0].data[2].value = Number(this.showDate.agcPowerSet);
                myChart.setOption(option, true);
            },
            getData() {
                api.getOverview().then(res => {
                    if (res) {
                        let data = res.data
                        if (this.datas.curveFollowingRate > data.curveFollowingRate) {
                            this.curveFlag = 2
                        } else if (this.datas.curveFollowingRate < data.curveFollowingRate) {
                            this.curveFlag = 1
                        } else {
                            this.curveFlag = 0
                        }

                        if (this.datas.fieldElectricityRate > data.fieldElectricityRate) {
                            this.fieldFlag = 2
                        } else if (this.datas.fieldElectricityRate < data.fieldElectricityRate) {
                            this.fieldFlag = 1
                        } else {
                            this.fieldFlag = 0
                        }

                        if (this.datas.windEnergyRate > data.windEnergyRate) {
                            this.winFlag = 2
                        } else if (this.datas.windEnergyRate < data.windEnergyRate) {
                            this.winFlag = 1
                        } else {
                            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 (values === 2) {
                        this.current = values
                        this.$router.push(`/ManualPage?current=${values}`)
                    } else if (values === 1){
                        this.$store.commit('current', values)
                        if(this.current === 0){
                            this.current = values
                        }else{
                            this.current = values
                            this.$router.push(`/?current=${values}`)
                        }
                    } else if(values === 0){
                        this.$store.commit('current', values)
                        if(this.current === 2){
                            this.current = values
                            this.$router.push(`/?current=${values}`)
                        }else{
                            this.current = values
                        }
                        
                    }
                    
                }
            },
            // controls(value) {
            //     this.current = value
            // }
        },
    }
</script>
<style scoped>
    .body {
        width: 100%;
        height: 28.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;
        /* background-image: url('../../assets/img/type/background.png'); */
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }

    .control {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        font-size: 14px;
        color: #ffffff;
        /* margin-right: 5px; */
        position: absolute;
        right: 10px;
        z-index: 99;
    }

    .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 {
        display: flex;
        flex-direction: row-reverse;
        font-size: 12px;
        color: #999999;
        /* margin-bottom: 6px; */
        margin-left: 26px;
        /* margin-bottom: 20px; */
    }

    .dataName-right {
        display: flex;
        flex-direction: row;
        font-size: 14px;
        color: #999999;
        /* margin-bottom: 6px; */
        margin-right: 50px;
        /* margin-bottom: 20px; */
    }

    .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;
    }

    .dataShow {
        display: flex;
        flex-direction: column;
        width: 200px;
        position: absolute;
        left: 1px;
        top: 62%;
        line-height: 35px;
    }

    .dataShows {
        display: flex;
        flex-direction: column;
        width: 200px;
        position: absolute;
        right: -35px;
        top: 62%;
        line-height: 35px;
    }

    .number {
        display: flex;
        flex-direction: row;
        align-items: center;
        font-size: 16px;
        color: #ffffff;
        align-items: center;
        justify-content: space-between;
    }

    .progress {
        display: flex;
        align-items: center;
        margin-left: 20px;
        width: 130px;
        height: 10px;
        border: 1px solid rgba(83, 92, 93, 0.5);
        background-color: #000000;
        margin-bottom: 20px;
    }

    .progress-right {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        margin-left: 20px;
        width: 130px;
        height: 10px;
        border: 1px solid rgba(83, 92, 93, 0.5);
        background-color: #000000;
        margin-bottom: 20px;
    }

    .progressNum {
        /* width: 60%; */
        height: 40%;
        background-color: rgba(75, 85, 174, 1);
        border-radius: 2px;
    }

    .progressNum-right {
        /* width: 60%; */
        height: 40%;
        background-color: rgba(75, 85, 174, 1);
        border-radius: 2px;
    }

    .echarts {
        width: 300px;
        height: 280px;
        margin-top: 20px;
        /* background-color: #000000; */
        margin-left: 10px;
    }

    .wind {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 20px;
    }

    .windNum {
        font-size: 14px;
        color: #ffffff;
    }

    .windTitle {
        font-size: 18px;
        color: #ffffff;
    }

    .follow {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 20px;
        margin-right: 20px;
    }

    .followNum {
        font-size: 14px;
        color: #ffffff;
    }

    .followTitle {
        font-size: 18px;
        color: #ffffff;
    }
    .numbers{
        margin-right: 48px;
    }
    .numbers-right{
        margin-left: 18px;
    }
    .showData{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .dataBox{
        display: flex;
        flex-direction: column;
        width: 120px;
        height: 60px;
        border: 1px solid rgba(83, 92, 93, 1);
        margin-bottom: 15px;
        margin-top: 15px;
        margin-left: 30px;
    }
    .dataBox-right{
        display: flex;
        flex-direction: column;
        width: 120px;
        height: 60px;
        border: 1px solid rgba(83, 92, 93, 1);
        margin-bottom: 15px;
        margin-top: 15px;
        margin-right: 30px;
    }
    .dataTitle{
        height: 50%;
        display: flex;
        flex-direction: row;
        align-items: center;
        font-size: 12px;
        color: rgba(153, 162, 163, 1);
        margin-left: 5px;
    }
    .datas{
        height: 50%;
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        font-size: 16px;
        color: rgba(05, 187, 76, 1);
        margin-right: 5px;
    }
</style>