neic-hefeng/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(showDate.healthIndex,'健康指数')">
                    <div class="dataTitle">健康指数</div>
                    <div class="datas">{{showDate.healthIndex?.value.toFixed(0)}}</div>
                </div>
                <div class="dataBox" @dblclick="dbClicks(showDate.resourceIndex,'资源指数')">
                    <div class="dataTitle">资源指数</div>
                    <div class="datas">{{showDate.resourceIndex?.value.toFixed(0)}}</div>
                </div>
            </div>
            <div>
                <div id="mainEcharts" @dblclick="dbClick()" class="echarts"></div>
                <div class="powerContent">
                    <div class="power" @dblclick="dbClicks(showDate.realTimePower,'实际功率')">
                        <div class="powerTitle">实际功率</div>
                        <div class="powerDatas" style="background-color: rgba(75, 85, 174, 1);">
                            {{showDate.realTimePower?.value.toFixed(2)}}</div>
                    </div>
                    <div class="power1" @dblclick="dbClicks(showDate.theoreticalPower,'理论功率')">
                        <div class="powerTitle">理论功率</div>
                        <div class="powerDatas" style="background-color: rgba(05, 187, 76, 1);">
                            {{showDate.theoreticalPower?.value.toFixed(2)}}</div>
                    </div>
                    <div class="power2" @dblclick="dbClicks(showDate.agcPowerSet,'AGC有功设定')">
                        <div class="powerTitle">AGC有功设定</div>
                        <div class="powerDatas" style="background-color: rgba(186, 50, 55, 1);">
                            {{showDate.agcPowerSet?.value.toFixed(2)}}</div>
                    </div>
                </div>
            </div>
            <div class="showData">
                <div class="dataBox-right" @dblclick="dbClicks(showDate.windEnergyRate,'风能利用率')">
                    <div class="dataTitle">风能利用率</div>
                    <div class="datas">{{showDate.windEnergyRate?.value.toFixed(2)}}%</div>
                </div>
                <div class="dataBox-right" @dblclick="dbClicks(showDate.curveFollowingRate,'曲线跟随率')">
                    <div class="dataTitle">曲线跟随率</div>
                    <div class="datas">{{showDate.curveFollowingRate?.value.toFixed(2)}}%</div>
                </div>
            </div>
        </div>
    </div>
    <DetailPages ref="detials" @closed="closed()" v-model="dialogVisible">
    </DetailPages>
    <Details @closed="closeds()" v-model="display" :partsName='partsName' echartsId="modelEcharts" :datas="modelDetails"
        @search-data="search" @original-data="originalData"></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 "../basicDataDetails.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,
                modelDetails: [],
                partsName: '',
                modelData: {},
                interval: 60,
            };
        },
        created() {
            this.initData();
        },
        computed: {

        },
        mounted() {
            this.$nextTick(() => {
                if (document.getElementById('mainEcharts')) {
                    this.getEcharts()
                }
            });
        },
        methods: {
            initData() {
                let mb = MessageBridge.getInstance();
                let vss = [{ key: "/topic/voice-control", action: this.windturbineMessage }];
                let 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) {
                this.showDate = JSON.parse(msg)
                this.getEcharts()
            },
            getEcharts() {
                let chartDom = document.getElementById('mainEcharts');
                let myChart = echarts.init(chartDom, '#000000');
                let 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: false,
                        detail: false,
                        //     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?.value);
                option.series[0].data[1].value = Number(this.showDate.theoreticalPower?.value);
                option.series[0].data[2].value = Number(this.showDate.agcPowerSet?.value);
                myChart.setOption(option, true);
            },
            ChangeBar(values) {
                let bd = BackgroundData.getInstance();
                let mb = MessageBridge.getInstance();
                let vss = { key: "/topic/voice-control" };
                let popup = { key: "/topic/fault-popup" };
                mb.unregister(popup);
                mb.unregister(vss);
                this.$router.push(`/?current=${values}`)
                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(data, partsName, timeValues) {
                this.modelData = data
                let date = new Date()
                let endTs = timeValues ? (timeValues[1] > date.getTime()) ? date.getTime() : timeValues[1] : date.getTime();
                let startTs = timeValues ? timeValues[0] : endTs - 28800000;
                api.getPower({
                    tagName: data.tag,
                    startTs: startTs,
                    endTs: endTs,
                    interval: this.interval,
                }).then(res => {
                    if (res.data.length > 0) {
                        this.partsName = partsName
                        this.display = true;
                        this.modelDetails = res.data
                    }
                })
            },
            original(data, partsName, timeValues) {
                this.modelData = data
                let date = new Date()
                let endTs = timeValues ? (timeValues[1] > date.getTime()) ? date.getTime() : timeValues[1] : date.getTime();
                let startTs = timeValues ? timeValues[0] : endTs - 28800000;
                api.getOriginalPower({
                    tagName: data.tag,
                    startTs: startTs,
                    endTs: endTs,
                }).then(res => {
                    if (res.data.length > 0) {
                        this.partsName = partsName
                        this.display = true;
                        this.modelDetails = res.data
                    }
                })
            },
            search(values,interval) {
                this.interval = interval
                this.dbClicks(this.modelData, this.partsName, values)
            },
            originalData(values) {
                this.original(this.modelData, this.partsName, values)
            },
            closed() {
                this.dialogVisible = false;
            },
            closeds() {
                this.display = false;
                this.interval = 60
            }
        },
    }
</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);
    }

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

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

    .powerContent {
        display: flex;
        flex-direction: row;
        align-items: center;
        color: #ffffff;
        position: relative;
        bottom: 18%;
        left: 11%;
    }

    .power {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        padding: 5px 10px;
    }

    .power1 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        padding: 5px 3px 5px 10px;
    }

    .power2 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        padding: 5px 3px;
    }

    .powerTitle {
        margin-bottom: 3px;
    }

    .powerDatas {
        border-radius: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        font-weight: 600;
        padding: 2px 5px;
    }
</style>