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="showData">
                <div class="dataBox" @dblclick="dbClicks()">
                    <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" @dblclick="dbClick()" 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>
    </div>
    <DetailPages ref="detials" @closed="closed()" v-model="dialogVisible">
	</DetailPages>
    <Details title='健康指数' @closed="closeds()" v-model="display"></Details>
</template>
<script>
    import BackgroundData from 'utils/BackgroundData'
    import api from "api/index";
    import MessageBridge from 'utils/MessageBridge'
    import * as echarts from "echarts";
    import DetailPages from "./detailPages.vue";
    import Details from "./dataDetails.vue";
    export default {
        props: {
            // current: {
            //     type: Number,
            // },
        },
        components: {
			DetailPages,
            Details
		},
        data() {
            return {
                current: 1,
                datas: {},
                list: {},
                showDate: {},
                winFlag: 0,
                curveFlag: 0,
                fieldFlag: 0,
                dialogVisible: false,
                display: false,
            };
        },
        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)
                }else if(msg === 'OPEN_AGC-GS'){
                    this.dbClick()
                }
            },
            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.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: 125.85,
                            name: '实际功率',
                            itemStyle: {
                                color: 'rgba(75, 85, 174, 1)'
                            },
                            title: {
                                color: '#999999',
                                offsetCenter: ['-70%', '90%']
                            },
                            detail: {
                                width: 50,
                                height: 12,
                                fontSize: 18,
                                offsetCenter: ['-70%', '110%']
                            }
                        },
                        {
                            value: 137.63,
                            name: '理论功率',
                            itemStyle: {
                                color: 'rgba(05, 187, 76, 1)'
                            },
                            title: {
                                color: '#999999',
                                offsetCenter: ['0%', '90%']
                            },
                            detail: {
                                width: 50,
                                height: 12,
                                fontSize: 18,
                                offsetCenter: ['0%', '110%']
                            }
                        },
                        {
                            value: 132.04,
                            name: 'AGC有功设定',
                            itemStyle: {
                                color: 'rgba(186, 50, 55, 1)'
                            },
                            title: {
                                color: '#999999',
                                offsetCenter: ['70%', '90%']
                            },
                            detail: {
                                align: 'center',
                                width: 50,
                                height: 12,
                                fontSize: 18,
                                offsetCenter: ['70%', '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);
            },
            ChangeBar(values) {
                var bd = BackgroundData.getInstance();
                var mb = MessageBridge.getInstance();
                var vss = { key: "/topic/voice-control"};
                var popup = { key: "/topic/fault-popup"};
                mb.unregister(popup);
                mb.unregister(vss);
                if (!bd.LoginUser) {
                    this.$notify({
                        title: "请登录",
                        message: "切换模式需要先登录！",
                        type: "warning",
                        position: "bottom-right",
                        offset: 60,
                        duration: 3000,
                    });
                    return;
                }
                if (this.current !== values) {
                    this.$store.commit('current', Number(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
                        }
                    }
                }
            },
            dbClick(){
                this.dialogVisible = true;
                this.$refs.detials.getDate()
            },
            dbClicks(){
                this.display = true;
            },
            closed(){
                this.dialogVisible = false;
            },
            closeds(){
                this.display = false;
            }
        },
    }
</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>