project-neic/src/components/PvDetailPages.vue

<template>
    <el-dialog width="80%" @opened="opened()" @closed="closed()" :show-close="false" class="my-info-dialog">
        <template #title>
            <div style="margin-top: -10px; color: #ffffff">光伏详情</div>
        </template>
        <div class="pvDetail">
            <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.tes}}</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: []
        };
    },
    created() {
        this.nbqData = [
            {
                name: '交流电压',
                value: 0,
                tes: 'V'
            },
            {
                name: '交流电流',
                value: 0,
                tes: 'A'
            },
            {
                name: '直流电压',
                value: 0,
                tes: 'V'
            },
            {
                name: '直流电流',
                value: 0,
                tes: 'A'
            },
            {
                name: '并网功率',
                value: 0,
                tes: 'KW'
            },
            {
                name: '电网频率',
                value: 0,
                tes: 'Hz'
            },
            {
                name: '功率因数',
                value: 0,
                tes: ''
            },
            {
                name: '日发电量',
                value: 0,
                tes: 'Kwh'
            },
            {
                name: '月发电量',
                value: 0,
                tes: 'Kwh'
            },
            {
                name: '年发电量',
                value: 0,
                tes: 'Kwh'
            },
            {
                name: '累计发电量',
                value: 0,
                tes: 'Kwh'
            },
            {
                name: '逆变器温度',
                value: 0,
                tes: '℃'
            },
            {
                name: '效率',
                value: 0,
                tes: '%'
            },
        ]
    },

    methods: {
        opened() {
            this.$nextTick(() =>{
                this.getEcharts()
            })
        },
        closed(){},
        // 获取曲线数据
        getEcharts() {
            let series = [
                {
                name: 'Email',
                type: 'line',
                stack: 'Total',
                data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                name: 'Union Ads',
                type: 'line',
                stack: 'Total',
                data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
                name: 'Video Ads',
                type: 'line',
                stack: 'Total',
                data: [150, 232, 201, 154, 190, 330, 410]
                },
                {
                name: 'Direct',
                type: 'line',
                stack: 'Total',
                data: [320, 332, 301, 334, 390, 330, 320]
                },
                {
                name: 'Search Engine',
                type: 'line',
                stack: 'Total',
                data: [820, 932, 901, 934, 1290, 1330, 1320]
                }
            ]
            let xAxis = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            let legend = ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
            this.getglobalLine('pvEchart', xAxis, legend, series)
        },
        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',
                    name: '万千瓦时(Wkw/h)'
                },
                series: series
            };
            // 基于准备好的dom，初始化echarts实例
            let dom = document.getElementById(name);
            let myChart = echarts.init(dom, 'dark');
            myChart.setOption(option);
            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;
            .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: 375px;
            }
        }
    }
}


</style>