project-neic/src/components/PvDetailPages.vue

<template>
    <el-dialog width="80%" @opened="opened()" @closed="closed()" :show-close="false" custom-class="my-info-dialog">
        <template #title>
            <div style="margin-top: -10px; color: #ffffff">光伏详情</div>
        </template>
        <div class="pvDetail" v-loading="loading">
            <div class="pvLeftDetail">
                <div class="commonSty titleFont">
                    <span>光伏板号:</span>
                    <span style="width: 38%;color: #c3c3c3">{{windturbine.id}}</span>
                </div>
                <div class="commonSty titleFont">
                    <span>逆变器状态</span>
                </div>
                <div v-for="(item, index) in nbqData" :key="index" class="commonSty arrSty">
                    <div class="arrName">
                        <span>{{item.name}}</span>
                    </div>
                    <div class="arrMsg">
                        <span style="padding-right: 20px">{{item.value}}</span>
                        <span style="width: 20%;color: #c3c3c3">{{item.unit}}</span>
                    </div>
                </div>
            </div>
            <div class="pvRightDetail">
                <div class="pvRightDetail_top">
                    <div class="pvRightTopTitle">
                        <span>光伏板</span>
                        <span>汇流箱</span>
                        <span>逆变器</span>
                        <span>电网</span>
                    </div>
                    <div class="pvRightBotImg">
                        <div class="img1">
                            <img src="../assets/img/PV/pv_pic.png" alt="">
                        </div>
                        <div class="imgCom">
                            <img src="../assets/img/PV/pv_arrow_pic.png" alt="">
                        </div>
                        <div class="img2">
                            <img src="../assets/img/PV/pv_box_pic.png" alt="">
                        </div>
                        <div class="imgCom">
                            <img src="../assets/img/PV/pv_arrow_pic.png" alt="">
                        </div>
                        <div class="img3">
                            <img src="../assets/img/PV/pv_nb_pic.png" alt="">
                        </div>
                        <div class="imgCom">
                            <img src="../assets/img/PV/pv_arrow_pic.png" alt="">
                        </div>
                        <div>
                            <img src="../assets/img/PV/pv_elec_pic.png" alt="">
                        </div>
                    </div>
                </div>
                <div class="pvRightDetail_bot">
                    <div class="pvRightBotTitle">
                        <span>功率曲线</span>
                    </div>
                    <div class="pvRightBotEchart" id="pvEchart"></div>
                </div>
            </div>
        </div>
    </el-dialog>
</template>

<script>
import api from "api/index";
import * as echarts from "echarts";
export default {
    props: {
        windturbine: {
            type: Object,
            default: () => {
                return {}
            },
        },
    },
    watch: {
        windturbine: {
            handler: function (json) {
                if (json) {
                    // this.initData();
                }
            },
        },
    },
    data() {
        return {
            nbqData: [],
            echartsData: [],
            pvTitle: [],
            startTimer: null,
            echartTimer: null,
            loading: false
        };
    },
    computed: {
        echartHeight() {
            return {
                'height': document.documentElement.clientHeight-30 + 'px'
            }
        }
    },
    created() {
    },

    methods: {
        opened() {
            this.getPvStationInfoData()
            this.loading = true
        },
        // 获取光伏详情配置
        getPvStationInfoData() {
            let that = this
            that.echartsData = []
            api.getStationInfoData().then(datas =>{
                if (datas && datas.data) {
                    console.log(datas)
                    for(let i in datas.data) {
                        if (that.windturbine.station === i) {
                            this.startTimer = setInterval(() =>{
                                that.getPvStationData(datas.data[i].codeInfos)
                            }, 3000)
                            this.echartTimer = setInterval(() =>{
                                that.getEcharts(datas.data[i].codeInfos)
                            }, 10000)
                        }
                    }
                    
                }
            })
        },
        // 获取光伏详情配置数据
        getPvStationData(list) {
            console.log('list', list)
            console.log('windturbine', this.windturbine)
            let code = []
            list.forEach(it =>{
                code.push(it.code)
            })
            let params = {
                id: this.windturbine.id,
                codes: code.join(',')
            }
            api.getAllPvStationData(params).then(datas =>{
                if (datas && datas.data) {
                    list.forEach(it =>{
                        if (it.code) {
                            let codeFv = it.code.split(',')
                            if (codeFv.length === 1) {
                                for(let i in datas.data) {
                                    if (it.code === i) {
                                        it.value = datas.data[i].value.toFixed(2)
                                    }
                                }
                            } else if (codeFv.length > 1) {
                                for(let j =0; j<codeFv.length; j++) {
                                    let codeVal = 0
                                    for(let i in datas.data) {
                                        if (codeFv[j] === i) {
                                            codeVal += datas.data[i].value
                                        }
                                    }
                                    it.value = codeVal.toFixed(2)
                                }
                            }
                        } else {
                            it.value = 0.00
                        }
                    })
                    this.nbqData = list
                }
            })
        },
        // 获取曲线数据
        getEcharts(data) {
            let end = new Date().getTime()
            for(let i =0; i<data.length; i++) {
                let it = data[i]
                if (it.type) {
                    let params = {
                        id: this.windturbine.id,
                        code: it.code,
                        startTime: end - 8*60*60*1000,
                        endTime: end,
                        interval: 60
                    }
                    api.getAllPvHistoryData(params).then(datas =>{
                        let obj = {
                            name: it.name,
                            type: it.type,
                            series: datas.data
                        }
                        this.echartsData.push(obj)
                        if (this.echartsData.length === 3) {
                            this.changeDataFormat(this.echartsData)
                        }
                    })
                }
            }
        },
        changeDataFormat(datas) {
            let series = []
            let xAxis = []
            let legend = []
            console.log('datas', datas)
            datas.forEach((it, index) =>{
                legend.push(it.name)
                if (index === 0) {
                    it.series.forEach(ic =>{
                        let time = this.getTime(new Date(ic.ts))
                        xAxis.push(time)
                    })
                }
                let oneSeries = []
                it.series.forEach(iv =>{
                    oneSeries.push(iv.value)
                })
                let seriesObj = {
                    name: it.name,
                    type: 'line',
                    data: oneSeries.map(ib => {
                        return ib.toFixed(2)
                    }),
                    symbol: 'none'
                }
                series.push(seriesObj)
            })
            console.log('series', series)
            console.log('xAxis', xAxis)
            console.log('legend', legend)
            this.getglobalLine('pvEchart', xAxis, legend, series)
        },
        getTime(date){ 
            var h = date.getHours();  
            h=h < 10 ? ('0' + h) : h;  
            var minute = date.getMinutes();  
            minute = minute < 10 ? ('0' + minute) : minute;  
            var second=date.getSeconds();
            second=second < 10 ? ('0' + second) : second;
            return h + ':' + minute + ':' + second; 
        },
        closed(){
            clearInterval(this.startTimer);
            clearInterval(this.echartTimer);
            this.startTimer = null
            this.echartTimer = null
        },
        
        getglobalLine(name, xAxis, legend, series) {
            let option = {
                backgroundColor: '#232d38',
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: legend
                },
                grid: {
                    left: '5%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: xAxis
                },
                yAxis: {
                    type: 'value'
                },
                series: series
            };
            // 基于准备好的dom，初始化echarts实例
            let dom = document.getElementById(name);
            dom.removeAttribute("_echarts_instance_")
            let myChart = echarts.init(dom, 'dark');
            myChart.setOption(option);
            this.loading = false
            window.addEventListener("resize", function () {
                myChart.resize()
            })
        },
    }
};
</script>
<style lang="less" scoped>
.pvDetail {
    background-color: black;
    margin-top: -30px;
    margin-left: -10px;
    margin-right: -10px;
    margin-bottom: -30px;
    border-bottom: 20px solid rgb(36, 36, 36);
    display: flex;
    padding: 5px 10px;
    .pvLeftDetail{
        width: 20%;
        .commonSty{
            height: 40px;
            background:#232d38;
            border-radius: 10px;
            margin-top: 10px;
            span{
                color: #fff;
                position: relative;
                top: 8px;
                left: 16px;
            }
        }
        .titleFont{
            width: calc(100% - 20px);
            font-size: 16px;
            display: flex;
            padding-right: 20px;
            justify-content: space-between;
        }
        .arrSty{
            display: flex;
            justify-content: space-between;
            span{
                font-size: 14px;
            }
            .arrName{
                width: 40%;
                span{
                    color: #c3c3c3;
                }
            }
            .arrMsg{
                width: 60%;
                display: flex;
                justify-content: end;
                padding-right: 20px;
                span{
                    display: inline-block;
                }
            }
        }
    }
    .pvRightDetail{
        width: calc(80% - 10px);
        padding-left: 10px;
        .pvRightDetail_top{
            background:#232d38;
            border-radius: 10px;
            margin-top: 10px;
            .pvRightTopTitle{
                display: flex;
                justify-content: space-around;
                height: 30px;
                color: #253443;
                border-bottom: 1px solid #5c5b5b;
                padding: 5px 0;
                margin-bottom: 10px;
                span{
                    color: #fff;
                    margin-top: 3px;
                }
            }
            .pvRightBotImg{
                display: flex;
                justify-content: space-around;
                padding: 50px 0;
                .img1{
                    margin-top: 40px;
                }
                .img2{
                    margin-top: 35px;
                }
                .img3{
                    margin-top: 20px;
                }
                .imgCom{
                    margin-top: 50px;
                }
            }
        }
        .pvRightDetail_bot{
            background:#232d38;
            border-radius: 10px;
            margin-top: 10px;
            height: 60%;
            .pvRightBotTitle{
                text-align: center;
                height: 20px;
                color: #253443;
                border-bottom: 1px solid #5c5b5b;
                padding: 10px 0;
                margin-bottom: 10px;
                span{
                    color: #fff;
                }
            }
            .pvRightBotEchart{
                width: 100%;
                // height: calc(100% - 70px);
                height: 380px;
            }
        }
    }
}


</style>
<style lang="less">
.my-info-dialog{
    margin-top: 10vh !important;
}
</style>