windLifecontrolPro/src/views/home/index.vue

<template>
    <div class="homePage" :class="!swichTheme ? 'themeDarkHome' : 'themeLightHome'" :style="pageHeight">
        <div class="homeMain">
            <div class="leftMain">
                <div style="height:55px"></div>
                <!-- 天气预测 -->
                <div class="weather">
                    <div class="comHeader">
                        <div class="headerLeft">
                            <span class="gray"></span>
                            <span class="blue"></span>
                        </div>
                        <div class="headerRight">
                            <span class="headerName">天气预测</span>
                            <span class="headerZs">
                                <span class="headerZsN"></span>
                            </span>
                        </div>
                    </div>
                    <div class="weatherMain">
                        <div class="weatherMain_top">
                            <div class="wetherImg">
                                <img :src="tianqi" alt="">
                            </div>
                            <div class="wetherMsg">
                                <span class="wetherMsg_Du">11°</span>
                                <div class="wetherMsg_Det">
                                    <span style="margin-left:5px">阴</span>
                                    <span>北风</span>
                                    <span>3-4级</span>
                                </div>
                            </div>
                        </div>
                        <div class="weatherMain_bot">
                            <div class="weaMain" v-for="it in weatherArr" :key="it.name">
                                <img :src="it.img" alt="">
                                <p class="pOne">{{it.value}}</p>
                                <p class="pTwo">{{it.name}}</p>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 预测电量 -->
                <div class="Electric">
                    <div class="comHeader">
                        <div class="headerLeft">
                            <span class="gray"></span>
                            <span class="blue"></span>
                        </div>
                        <div class="headerRight">
                            <div class="headerNaAll">
                                <span class="headerNa">预测电量</span>
                                <span class="headerNa2">单位：万kWh</span>
                            </div>
                            <span class="headerZs">
                                <span class="headerZsN"></span>
                            </span>
                        </div>
                    </div>
                    <div class="electricMain">
                        <div v-for="(item, index) in dayFa" :key="index" class="electricMain_day">
                            <div class="powerCharts">
                                <div class="powerName">{{ item[0].name }}</div>
                                <div class="powerItem">
                                    <div class="powerValue">
                                        <span style="background-color:#FF9B23"></span>
                                        <span>{{ item[0].total }}</span>
                                    </div>
                                    <forecast-bar-component :list="item" height="40px" width="410px" />
                                </div>
                            </div>
                        </div>
                        <div style="margin-top: 20px">
                            <div v-for="(item, index) in monthFa" :key="index" class="electricMain_month">
                                <div class="powerCharts">
                                    <div class="powerName">{{ item[0].name }}</div>
                                    <div class="powerItem">
                                        <div class="powerValue">
                                            <span style="background-color:#FF9B23"></span>
                                            <span>{{ item[0].total }}</span>
                                        </div>
                                        <forecast-bar-component :list="item" height="40px" width="410px" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 实际功率 -->
                <div class="power">
                    <div class="comHeader">
                        <div class="headerLeft">
                            <span class="gray"></span>
                            <span class="blue"></span>
                        </div>
                        <div class="headerRight">
                            <div class="headerNaAll">
                                <span class="headerNa">实际功率</span>
                                <span class="headerNa2">单位：万kWh</span>
                            </div>
                            <span class="headerZs">
                                <span class="headerZsN"></span>
                            </span>
                        </div>
                    </div>
                    <div class="powerMain">
                        <echarts-gauge-component :data="powerDataHome" />
                    </div>
                </div>
            </div>
            <div class="map">
                <p class="dingbian">定边县</p>
                <p class="jingbian">靖边县</p>
                <div class="fengjiSty" v-for="it in fengjiArr" :key="it" :style="fengjiStyFn(it)">
                    <div class="mainSv">
                        <img :src="fengji" class="fengjiImg">
                        <img :src="quan" class="quanImg">
                        <img :src="fengjiBack" class="fengjiBackImg">
                        <span class="dianSty"></span>
                    </div>
                    <div class="mainMsg">
                        <span>{{it.name}}</span>
                    </div>
                </div>
            </div>
            <div class="rightMain">
                <div style="height:55px"></div>
                <!-- 电量分析 -->
                <div class="powerAnalysis">
                    <div class="comHeader">
                        <div class="headerLeft">
                            <span class="gray"></span>
                            <span class="blue"></span>
                        </div>
                        <div class="headerRight">
                            <div class="headerNaAll">
                                <span class="headerNa">电量分析</span>
                                <span class="headerNa2">单位：万kWh</span>
                            </div>
                            <span class="headerZs">
                                <span class="headerZsN"></span>
                            </span>
                        </div>
                    </div>
                    <div class="powerAnalysisMain">
                        <div class="analysRadio">
                            <el-radio-group v-model="powerAnalyRadio">
                                <el-radio-button label="日" value="日" />
                                <el-radio-button label="月" value="月" />
                                <el-radio-button label="年" value="年" />
                            </el-radio-group>
                        </div>
                        <div class="analysMain">
                            <div class="analysMain_left">
                                <div class="analLeftTop">
                                    <img :src="dlTop1" alt="">
                                    <span>增发电量</span>
                                    <span>30</span>
                                </div>
                                <div class="analLeftEcharts">
                                    <echarts-pie :data="analyPieData" :index="1" />
                                    <span class="echartsNum">25%</span>
                                    <span class="echartsName">提升率</span>
                                </div>
                                <div class="analLeftBot">
                                    <div class="analLeftBot_top">
                                        <img :src="zengfa" class="leftImg">
                                        <div class="analyleftbottopAll">
                                            <div class="analyleftbottopName">及时并网增发电量</div>
                                            <div class="analyleftbottopSty">
                                                <span>30</span>
                                                <img :src="dlTop2" alt="">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="analLeftBot_top">
                                        <img :src="zengfa" class="leftImg">
                                        <div class="analyleftbottopAll">
                                            <div class="analyleftbottopName">主动维护降低损失电量</div>
                                            <div class="analyleftbottopSty">
                                                <span>30</span>
                                                <img :src="dlTop2" alt="">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="analysMain_left">
                                <div class="analLeftTop">
                                    <img :src="dlBot1" alt="">
                                    <span>增发电量</span>
                                    <span>30</span>
                                </div>
                                <div class="analLeftEcharts">
                                    <echarts-pie :data="analyPieData" :index="2" />
                                    <span class="echartsNum">25%</span>
                                    <span class="echartsName">提升率</span>
                                </div>
                                <div class="analLeftBot">
                                    <div class="analLeftBot_top">
                                        <img :src="sunshi" class="leftImg">
                                        <div class="analyleftbottopAll">
                                            <div class="analyleftbottopName">及时并网增发电量</div>
                                            <div class="analyleftbottopSty">
                                                <span>30</span>
                                                <img :src="dlBot2" alt="">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="analLeftBot_top">
                                        <img :src="sunshi" class="leftImg">
                                        <div class="analyleftbottopAll">
                                            <div class="analyleftbottopName">主动维护降低损失电量</div>
                                            <div class="analyleftbottopSty">
                                                <span>30</span>
                                                <img :src="dlBot2" alt="">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 计划电量 -->
                <div class="powerPlan">
                    <div class="comHeader">
                        <div class="headerLeft">
                            <span class="gray"></span>
                            <span class="blue"></span>
                        </div>
                        <div class="headerRight">
                            <div class="headerNaAll">
                                <span class="headerNa">计划电量完成情况</span>
                            </div>
                            <span class="headerZs">
                                <span class="headerZsN"></span>
                            </span>
                        </div>
                    </div>
                    <div class="powerPlanMain">
                        <div class="analysRadio">
                            <el-radio-group v-model="powerPlanRadio">
                                <el-radio-button label="风" value="风" />
                                <el-radio-button label="光" value="光" disabled />
                                <el-radio-button label="总" value="总" disabled />
                            </el-radio-group>
                        </div>
                        <div class="planMain">
                            <div class="planMain_left">
                                <div class="analysMain_echarts">
                                    <echarts-pie-2 :data="powerPlanData" :index="1" />
                                </div>
                                <div class="analysMain_Msg">
                                    <div class="analysMain_Msg_top">
                                        <div class="analysMain_Msg_top_flex">
                                            <span>计划</span>
                                            <span>343</span>
                                        </div>
                                        <div class="analysMain_Msg_top_flex">
                                            <span>实际</span>
                                            <span>434</span>
                                        </div>
                                    </div>
                                    <div class="analysMain_Msg_bot">
                                        <span>月计划完成率</span>
                                    </div>
                                </div>
                            </div>
                            <div class="planMain_left">
                                <div class="analysMain_echarts">
                                    <echarts-pie-2 :data="powerPlanData" :index="2" />
                                </div>
                                <div class="analysMain_Msg">
                                    <div class="analysMain_Msg_top">
                                        <div class="analysMain_Msg_top_flex">
                                            <span>计划</span>
                                            <span>343</span>
                                        </div>
                                        <div class="analysMain_Msg_top_flex">
                                            <span>实际</span>
                                            <span>434</span>
                                        </div>
                                    </div>
                                    <div class="analysMain_Msg_bot">
                                        <span>月计划完成率</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="monthPower">
                <div id="monthPowers" style="width:100%;height:100%"></div>
            </div>
            <div class="hover72Power">
                <div id="hover72Powers" style="width:100%;height:100%"></div>
            </div>
        </div>
    </div>

</template>

<script>
    import fengji from '@/assets/images/indexCom/fengji.png'
    import quan from '@/assets/images/indexCom/quan.png'
    import fengjiBack from '@/assets/images/indexCom/fengjiBack.png'
    import tixing from '@/assets/images/indexCom/tixing.png'
    import tianqi from '@/assets/menuImg/power_tqyb.png'

    import dlTop1 from '@/assets/images/indexCom/dlTop1.png'
    import dlTop2 from '@/assets/images/indexCom/dlTop2.png'
    import dlBot1 from '@/assets/images/indexCom/dlBot1.png'
    import dlBot2 from '@/assets/images/indexCom/dlBot2.png'
    import zengfa from '@/assets/images/indexCom/zengfa.png'
    import sunshi from '@/assets/images/indexCom/sunshi.png'

    import wea1 from '@/assets/images/indexCom/wea_1.png'
    import wea2 from '@/assets/images/indexCom/wea_2.png'
    import wea3 from '@/assets/images/indexCom/wea_3.png'
    import wea4 from '@/assets/images/indexCom/wea_4.png'
    import wea5 from '@/assets/images/indexCom/wea_5.png'

    import forecastBarComponent from "@/components/homeComponent/forecastBarComponent.vue";
    import echartsGaugeComponent from "@/components/homeComponent/echartsGaugeComponent.vue";
    import echartsPie from "@/components/homeComponent/echartsPie.vue";
    import echartsPie2 from "@/components/homeComponent/echartsPie2.vue";

    export default {
        components: {
            forecastBarComponent,
            echartsGaugeComponent,
            echartsPie,
            echartsPie2,
        },
        data() {
            return {
                fengji: fengji,
                quan: quan,
                fengjiBack: fengjiBack,
                tixing: tixing,
                tianqi: tianqi,
                wea1: wea1,
                wea2: wea2,
                wea3: wea3,
                wea4: wea4,
                wea5: wea5,
                dlTop1: dlTop1,
                dlTop2: dlTop2,
                dlBot1: dlBot1,
                dlBot2: dlBot2,
                zengfa: zengfa,
                sunshi: sunshi,
                weatherArr: [],
                fengjiArr: [],
                dayFa: [],
                monthFa: [],
                powerDataHome: [],
                powerAnalyRadio: '日',
                analyPieData: [],
                powerPlanRadio: '风',
                powerPlanData: []
            }
        },
        created() {
            this.weatherArr = [{
                    name: '能见度',
                    value: 20,
                    img: wea1
                },
                {
                    name: '湿度',
                    value: 70.5,
                    img: wea2
                },
                {
                    name: '气压',
                    value: 99,
                    img: wea3
                },
                {
                    name: '日出时间',
                    value: '04:36',
                    img: wea4
                },
                {
                    name: '日落时间',
                    value: '18:50',
                    img: wea5
                },
            ]
            this.fengjiArr = [{
                    name: '繁食沟风电场',
                    left: '23%',
                    top: '43%'
                },
                {
                    name: '新庄风电场',
                    left: '35%',
                    top: '31%'
                },
                {
                    name: '草山梁风电场',
                    left: '45%',
                    top: '41%'
                },
                {
                    name: '雷家山风电场',
                    left: '52%',
                    top: '28%'
                },
                {
                    name: '吉山梁风电场',
                    left: '58%',
                    top: '42%'
                },
                {
                    name: '左庄风电场',
                    left: '64%',
                    top: '50%'
                },
            ]
            this.dayFa = [
                [{
                    name: "日发电量",
                    id: "day",
                    value: (12548 / 10000).toFixed(2),
                    color: '#FF9B23',
                    total: (32548 / 10000).toFixed(2),
                }, ],
                [{
                    name: "日预测电量",
                    id: "day2",
                    value: (12548 / 10000).toFixed(2),
                    color: '#FF9B23',
                    total: (32548 / 10000).toFixed(2),
                }, ],
            ]
            this.monthFa = [
                [{
                    name: "月发电量",
                    id: "day",
                    value: (12548 / 10000).toFixed(2),
                    color: '#1C99FF',
                    total: (32548 / 10000).toFixed(2),
                }, ],
                [{
                    name: "月预测电量",
                    id: "day2",
                    value: (12548 / 10000).toFixed(2),
                    color: '#1C99FF',
                    total: (32548 / 10000).toFixed(2),
                }, ],
            ]
            this.powerDataHome = [{
                    title: "风速",
                    value: 15,
                    max: 25,
                    unit: "MW",
                },
                {
                    title: "保证功率",
                    value: 1254,
                    max: 3000,
                    unit: "MW",
                },
                {
                    title: "应发功率",
                    value: 3256,
                    max: 4000,
                    unit: "MW",
                },
                {
                    title: "实发功率",
                    value: 3256,
                    max: 4000,
                    unit: "MW",
                },
            ];
        },
        computed: {
            pageHeight() {
                return {
                    'height': document.documentElement.clientHeight - 50 + 'px'
                }
            }
        },
        mounted() {
            this.getPowerBar()
            this.getPowerLine()
        },
        methods: {
            fengjiStyFn(it) {
                return `left:${it.left};top:${it.top}`
            },
            getPowerBar(xAxis, series) {
                let option = {
                    title: {
                        text: '月发电量',
                        left: '10px',
                        top: '20px',
                        textStyle: {
                            fontSize: '16',
                            fontWeight: 400,
                            color: '#fff'
                        }
                    },
                    color: ['#7981AF', '#1C99FF', '#E57F25'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '2%',
                        right: '2%',
                        bottom: '5%',
                        height: '90px',
                        containLabel: true
                    },
                    legend: {
                        right: '20',
                        data: ['日发电量', '上网电量', '购网电量']
                    },
                    xAxis: [{
                        type: 'category',
                        axisTick: {
                            show: false
                        },
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    }],
                    yAxis: [{
                        type: 'value',
                        splitNumber: 3.5,
                        splitLine: {
                            lineStyle: {
                                color: ['#393F4D']
                            }
                        },
                        name: '单位：万KWh'
                    }],
                    series: [{
                            data: [120, 200, 150, 80, 70, 110, 130],
                            barGap: '0',
                            type: 'bar'
                        },
                        {
                            data: [120, 200, 150, 80, 70, 110, 130],
                            type: 'bar'
                        },
                        {
                            data: [120, 200, 150, 80, 70, 110, 130],
                            type: 'bar'
                        }
                    ]
                };
                if (!this.theme) {
                    option.backgroundColor = ''
                }
                // 基于准备好的dom，初始化echarts实例
                let dom = document.getElementById('monthPowers');
                dom.removeAttribute("_echarts_instance_") ? dom.removeAttribute("_echarts_instance_") : ''
                let myChart = this.$echarts.init(dom);
                myChart.setOption(option);
                window.addEventListener("resize", function () {
                    myChart.resize()
                })
            },
            getPowerLine(xAxis, legend, series) {
                let option = {
                    title: {
                        text: '72小时功率曲线',
                        left: '10px',
                        top: '20px',
                        textStyle: {
                            fontSize: '16',
                            fontWeight: 400,
                            color: '#fff'
                        }
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    color: ['#7981AF', '#1C99FF', '#E57F25'],
                    legend: {
                        // width: '380',
                        right: '20',
                        data: legend
                    },
                    grid: {
                        left: '2%',
                        right: '2%',
                        bottom: '5%',
                        height: '90px',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    },
                    yAxis: {
                        type: 'value',
                        splitNumber: 3,
                        splitLine: {
                            lineStyle: {
                                color: ['#393F4D']
                            }
                        },
                        name: '单位：万KWh'
                    },
                    series: [{
                        data: [820, 932, 901, 934, 1290, 1330, 1320],
                        type: 'line',
                        symbol: 'none'
                    }]
                };
                if (!this.theme) {
                    option.backgroundColor = ''
                }
                // 基于准备好的dom，初始化echarts实例
                let dom = document.getElementById('hover72Powers');
                dom.removeAttribute("_echarts_instance_") ? dom.removeAttribute("_echarts_instance_") : ''
                let myChart = this.$echarts.init(dom);
                myChart.setOption(option);
                window.addEventListener("resize", function () {
                    myChart.resize()
                })
            },
        }
    }
</script>

<style lang="less">
    .homePage {
        height: 100%;

        .homeMain {
            display: flex;
            width: 100%;
            height: 74vh;

            .comHeader {
                height: 28px;
                display: flex;

                .headerLeft {
                    height: 28px;
                    width: 20px;
                    position: relative;

                    .gray {
                        position: absolute;
                        left: 5px;
                        top: 3px;
                        display: inline-block;
                        width: 5px;
                        height: 5px;
                        background: #CBD2E2;
                    }

                    .blue {
                        position: absolute;
                        left: 5px;
                        top: 20px;
                        display: inline-block;
                        width: 5px;
                        height: 5px;
                        background: #1C99FF;
                        transform: rotate(45deg);
                    }
                }

                .headerRight {
                    width: 427px;
                    height: 28px;
                    background: #2D3138;
                    position: relative;

                    .headerName {
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        font-size: 16px;
                        color: #FFFFFF;
                        line-height: 28px;
                        margin-left: 10px;
                    }

                    .headerNaAll {
                        display: flex;
                        justify-content: space-between;

                        .headerNa {
                            font-family: Microsoft YaHei;
                            font-weight: 400;
                            font-size: 16px;
                            color: #FFFFFF;
                            line-height: 28px;
                            margin-left: 10px;
                        }

                        .headerNa2 {
                            font-family: Microsoft YaHei;
                            font-weight: 400;
                            font-size: 12px;
                            color: #787F8F;
                            line-height: 28px;
                            margin-right: 8px;
                        }
                    }

                    .headerZs {
                        display: inline-block;
                        position: absolute;
                        right: 0;
                        top: 22px;
                        width: 32px;
                        height: 6px;
                        background: #0F0F0F;

                        .headerZsN {
                            position: relative;
                            top: -8px;
                            left: 2px;
                            display: inline-block;
                            width: 30px;
                            height: 4px;
                            background: #41454C;
                        }
                    }
                }
            }

            .leftMain {
                width: 25%;
                height: 100%;
                margin-left: 37px;


                .weather {
                    margin-bottom: 30px;

                    .weatherMain {
                        margin-top: 15px;

                        .weatherMain_top {
                            display: flex;

                            .wetherImg {
                                img {
                                    width: 48px;
                                    height: 48px;
                                }

                                margin: 9px 0 0 25px;
                            }

                            .wetherMsg {
                                margin-left: 21px;

                                .wetherMsg_Du {
                                    font-family: SourceHanSansCN;
                                    font-weight: 400;
                                    font-size: 30px;
                                    color: #FFFFFF;
                                }

                                .wetherMsg_Det {
                                    display: flex;

                                    span {
                                        font-family: Microsoft YaHei;
                                        font-weight: 400;
                                        font-size: 14px;
                                        color: #FFFFFF;
                                        margin-right: 25px;
                                    }
                                }
                            }
                        }

                        .weatherMain_bot {
                            display: flex;
                            justify-content: space-around;
                            margin-top: 18px;

                            .weaMain {
                                text-align: center;

                                .pOne {
                                    font-family: SourceHanSansCN;
                                    font-weight: 400;
                                    font-size: 14px;
                                    color: #FFFFFF;
                                    line-height: 28px;
                                }

                                .pTwo {
                                    font-family: Microsoft YaHei;
                                    font-weight: 400;
                                    font-size: 14px;
                                    color: #8B93A6;
                                }
                            }
                        }
                    }
                }

                .Electric {
                    margin-bottom: 30px;

                    .electricMain {
                        padding-top: 20px;

                        .electricMain_day,
                        .electricMain_month {
                            .powerCharts {
                                position: relative;
                                display: flex;
                                flex-direction: row;
                                align-items: flex-end;
                                width: 100%;
                                margin-top: 5px;
                                margin-left: 10px;

                                .powerName {
                                    position: absolute;
                                    left: 15px;
                                    top: -8px;
                                    font-family: Microsoft YaHei;
                                    font-weight: 400;
                                    font-size: 14px;
                                    color: #8B93A6;
                                    line-height: 28px;
                                }

                                .powerItem {
                                    display: flex;
                                    position: relative;

                                    .powerValue {
                                        font-size: 12px;
                                        font-family: Bicubik;
                                        position: absolute;
                                        right: -12px;
                                        top: 17px;

                                        span:nth-child(1) {
                                            width: 5px;
                                            height: 5px;
                                            border-radius: 5px;
                                            display: inline-block;
                                            background-color: #fff;
                                            margin-right: 5px;
                                        }

                                        span:nth-child(2) {
                                            font-family: Bicubik;
                                            font-weight: 400;
                                            font-size: 12px;
                                            color: #FFFFFF;
                                            position: relative;
                                            top: 2px;
                                        }
                                    }
                                }
                            }
                        }


                    }
                }

                .power {
                    .powerMain {
                        margin-top: 10px;
                    }
                }
            }

            .map {
                width: 50%;
                height: 100%;
                position: relative;

                .dingbian,
                .jingbian {
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    font-size: 18px;
                    color: #A5ABB7;
                    line-height: 35px;
                    text-shadow: 0px 1px 2px #070A11;
                }

                .dingbian {
                    position: absolute;
                    top: 68%;
                    left: 15%;
                }

                .jingbian {
                    position: absolute;
                    top: 30%;
                    left: 67%;
                }

                .fengjiSty {
                    position: absolute;
                    width: 40px;

                    .mainSv {
                        position: relative;
                        width: 40px;

                        .quanImg {
                            position: absolute;
                            left: 5px;
                            bottom: -2px;
                        }

                        .fengjiBackImg {
                            position: absolute;
                            bottom: -2px;
                            left: -5px;
                        }

                        .dianSty {
                            display: inline-block;
                            width: 6px;
                            height: 7px;
                            background: #31FBFD;
                            border-radius: 50%;
                            position: absolute;
                            left: 3px;
                        }
                    }

                    .mainMsg {
                        width: 105px;
                        height: 30px;
                        background-image: url('@/assets/images/indexCom/tixing.png');
                        background-repeat: no-repeat;
                        position: absolute;
                        bottom: -7px;
                        left: -98px;

                        span {
                            font-family: Microsoft YaHei;
                            font-weight: 400;
                            font-size: 14px;
                            color: #FFFFFF;
                            line-height: 23px;
                            position: relative;
                            left: 6px;
                            top: 2px;
                        }
                    }
                }
            }

            .rightMain {
                width: 25%;
                height: 100%;

                .analysRadio {
                    margin: 16px 0 7px 20px;

                    .el-radio-group {
                        height: 28px;

                        .el-radio-button {
                            .el-radio-button__inner {
                                width: 48px;
                                background: transparent;
                                color: #fff;
                                border: 1px solid #3B4C6C;
                            }

                        }

                        .is-active {
                            background: linear-gradient(90deg, rgba(28, 113, 255, 0), rgba(28, 113, 255, 0.6));
                        }
                    }
                }

                .powerAnalysis {
                    .powerAnalysisMain {


                        .analysMain {
                            margin-left: 20px;
                            width: 100%;
                            display: flex;

                            .analysMain_left {
                                width: 50%;

                                .analLeftTop {
                                    display: flex;

                                    img {
                                        width: 14px;
                                        height: 14px;
                                        position: relative;
                                        top: 5px;
                                    }

                                    span {
                                        font-family: Microsoft YaHei;
                                        font-weight: 400;
                                        font-size: 14px;
                                        color: #8B93A6;
                                        line-height: 28px;
                                        margin-left: 3px;
                                    }
                                }

                                .analLeftEcharts {
                                    position: relative;

                                    .echartsNum {
                                        position: absolute;
                                        top: 30%;
                                        left: 38%;
                                        font-family: Bicubik;
                                        font-weight: 400;
                                        font-size: 16px;
                                        color: #1C99FF;
                                    }

                                    .echartsName {
                                        position: absolute;
                                        top: 50%;
                                        left: 38%;
                                        font-family: Microsoft YaHei;
                                        font-weight: 400;
                                        font-size: 14px;
                                        color: #8B93A6;
                                    }
                                }

                                .analLeftBot {
                                    .analLeftBot_top {
                                        display: flex;

                                        .leftImg {
                                            width: 36px;
                                            height: 36px;
                                        }

                                        .analyleftbottopAll {
                                            margin-left: 2px;

                                            .analyleftbottopName {
                                                position: relative;
                                                top: -5px;
                                                font-family: Microsoft YaHei;
                                                font-weight: 400;
                                                font-size: 14px;
                                                color: #8B93A6;
                                                line-height: 28px;
                                            }

                                            .analyleftbottopSty {
                                                display: flex;
                                                position: relative;
                                                top: -13px;

                                                span {
                                                    font-family: Bicubik;
                                                    font-weight: 400;
                                                    font-size: 16px;
                                                    color: #FFFFFF;
                                                    line-height: 28px;
                                                }

                                                img {
                                                    width: 12px;
                                                    height: 12px;
                                                    position: relative;
                                                    top: 8px;
                                                    left: 8px;
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }

                .powerPlan {
                    margin-top: 30px;

                    .powerPlanMain {
                        .planMain {
                            width: calc(100% - 20px);
                            display: flex;
                            justify-content: space-around;

                            .planMain_left {
                                padding: 0 20px;
                                width: calc(50% - 40px);

                                .analysMain_echarts {
                                    width: 100%;
                                    text-align: center;
                                    border-bottom: 1px dashed #393F4D;
                                }

                                .analysMain_Msg {
                                    .analysMain_Msg_top {
                                        display: flex;
                                        justify-content: space-between;
                                        width: 100%;

                                        .analysMain_Msg_top_flex {
                                            display: flex;
                                            justify-content: space-between;
                                            padding: 0 20px;
                                            width: 60px;

                                            span:nth-child(1) {
                                                font-family: Microsoft YaHei;
                                                font-weight: 400;
                                                font-size: 14px;
                                                color: #8B93A6;
                                                line-height: 28px;
                                            }

                                            span:nth-child(2) {
                                                font-family: Arial;
                                                font-weight: 400;
                                                font-size: 14px;
                                                color: #FFFFFF;
                                                line-height: 28px;
                                            }
                                        }
                                    }

                                    .analysMain_Msg_bot {
                                        background: #2D3138;
                                        // opacity: 0.5;
                                        text-align: center;

                                        span {
                                            font-family: Microsoft YaHei;
                                            font-weight: 400;
                                            font-size: 14px;
                                            color: #8B93A6;
                                            line-height: 28px;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }

        .footer {
            display: flex;
            justify-content: space-between;
            padding: 0 36px;
            width: calc(100% - 72px);
            height: 19vh;

            .monthPower {
                width: calc(50% - 10px);
                background: rgba(41, 45, 53, 0.4);
                border-radius: 6px;
            }

            .hover72Power {
                width: calc(50% - 10px);
                background: rgba(41, 45, 53, 0.4);
                border-radius: 6px;
            }
        }
    }

    .themeDarkHome {
        background-color: #0F0F0F;
        background-image: url('@/assets/images/indexCom/backImg_B.png');
        background-repeat: no-repeat;

        .homeMain {

            .map {
                background-image: url('@/assets/images/indexCom/map_B.png');
                background-repeat: no-repeat;
                background-size: 90%;
                background-position: center;
            }
        }
    }
</style>