windLifecontrolPro/src/views/home/index.vue

<template>
    <div class="homePage" :class="!swichTheme ? 'themeDarkHome' : 'themeLightHome'">
        <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="!swichTheme ? tianqi : tianqiW" alt="">
                            </div>
                            <div class="wetherMsg">
                                <span class="wetherMsg_Du">{{weatherFrom.temperature}}°</span>
                                <div class="wetherMsg_Det">
                                    <span style="margin-left:5px">{{weatherFrom.weather}}</span>
                                    <span>{{weatherFrom.wind_direction}}</span>
                                    <span>{{weatherFrom.wind_power}}</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">
                                    <forecast-bar-component :list="item" height="40px" width="370px"
                                        :theme="swichTheme" />
                                    <div class="powerValue">
                                        <span style="background-color:#FF9B23"></span>
                                        <span>{{ item[0].value }}</span>
                                    </div>
                                </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">
                                        <forecast-bar-component :list="item" height="40px" width="410px"
                                            :theme="swichTheme" />
                                        <div class="powerValue powerValuesc">
                                            <span style="background-color:#FF9B23"></span>
                                            <span>{{ item[0].value }}</span>
                                        </div>
                                    </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" :theme="swichTheme" />
                    </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" :theme="swichTheme"
                                        :colors="['#1850B3', '#B2B8CA']" />
                                    <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 analysMain_right">
                                <div class="analLeftTop">
                                    <img :src="dlBot1" alt="">
                                    <span>损失电量</span>
                                    <span>30</span>
                                </div>
                                <div class="analLeftEcharts">
                                    <echarts-pie :data="analyPieData" :index="2" :theme="swichTheme"
                                        :colors="['#F87909', '#B2B8CA']" />
                                    <span class="echartsNum echartsJing">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 class="echartsJing">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 class="echartsJing">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" :theme="swichTheme" />
                                </div>
                                <div class="analysMain_Msg">
                                    <div class="analysMain_Msg_top">
                                        <div class="analysMain_Msg_top_flex">
                                            <span>计划</span>
                                            <span>{{Math.floor(powerPlanData.yjhwc)}}</span>
                                        </div>
                                        <div class="analysMain_Msg_top_flex">
                                            <span>实际</span>
                                            <span>{{Math.floor(powerPlanData.ysjwc)}}</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" :theme="swichTheme" />
                                </div>
                                <div class="analysMain_Msg">
                                    <div class="analysMain_Msg_top">
                                        <div class="analysMain_Msg_top_flex">
                                            <span>计划</span>
                                            <span>{{Math.floor(powerPlanData.njhwc)}}</span>
                                        </div>
                                        <div class="analysMain_Msg_top_flex">
                                            <span>实际</span>
                                            <span>{{Math.floor(powerPlanData.nsjwc)}}</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 tianqiW from '@/assets/images/indexCom/weatherW.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";

    import {
        apiGethomeData
    } from '@/api/gengra'

    export default {
        components: {
            forecastBarComponent,
            echartsGaugeComponent,
            echartsPie,
            echartsPie2,
        },
        data() {
            return {
                swichTheme: null,
                fengji: fengji,
                quan: quan,
                fengjiBack: fengjiBack,
                tixing: tixing,
                tianqi: tianqi,
                tianqiW: tianqiW,
                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: {},
                homeDataVo: {},
                weatherFrom: {
                    temperature: '',
                    weather: '',
                    wind_direction: '',
                    wind_power: '',
                }
            }
        },
        created() {
            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%'
                },
            ]

        },
        computed: {
            pageHeight() {
                return {
                    'height': document.documentElement.clientHeight - 50 + 'px'
                }
            }
        },
        watch: {
            "$store.state.theme"(newVal, oldVal) {
                this.swichTheme = newVal
                this.getHomeData()
            }
        },
        mounted() {
            this.swichTheme = JSON.parse(window.sessionStorage.getItem('theme'))
            this.getPowerLine()
            this.getHomeData()
        },
        methods: {
            fengjiStyFn(it) {
                return `left:${it.left};top:${it.top}`
            },
            getHomeData() {
                let that = this
                let params = {
                    wpId: 'GJNY_SXGS_DBXNY_ZGS0'
                }
                apiGethomeData(params).then(res => {
                    if (res && res.data) {
                        if (res.data.tq) {

                            //天气预报
                            let weatherObj = JSON.parse(res.data.tq[0].content)
                            that.weatherFrom = {
                                temperature: weatherObj.weather.temperature,
                                weather: weatherObj.weather.weather,
                                wind_direction: weatherObj.weather.wind_direction,
                                wind_power: weatherObj.weather.wind_power,
                            }
                            this.weatherArr = [{
                                    name: '能见度',
                                    value: weatherObj.weather.visibility,
                                    img: wea1
                                },
                                {
                                    name: '湿度',
                                    value: weatherObj.weather.humidity,
                                    img: wea2
                                },
                                {
                                    name: '气压',
                                    value: weatherObj.weather.pressure,
                                    img: wea3
                                },
                                {
                                    name: '日出时间',
                                    value: weatherObj.feature.sunriseTime,
                                    img: wea4
                                },
                                {
                                    name: '日落时间',
                                    value: weatherObj.feature.sunsetTime,
                                    img: wea5
                                },
                            ]
                        }
                        //预测电量
                        if (res.data.vo) {
                            that.homeDataVo = res.data.vo
                            let it = res.data.vo
                            that.dayFa = [
                                [{
                                    name: "日发电量",
                                    id: "day",
                                    value: it.rfdl,
                                    color: '#FF9B23',
                                    total: 1500,
                                }, ],
                                [{
                                    name: "日预测电量",
                                    id: "day2",
                                    value: it.rycdl,
                                    color: '#FF9B23',
                                    total: 1500,
                                }, ],
                            ]
                            that.monthFa = [
                                [{
                                    name: "月发电量",
                                    id: "day",
                                    value: it.yfdl,
                                    color: '#1C99FF',
                                    total: 45000,
                                }, ],
                                [{
                                    name: "月预测电量",
                                    id: "day2",
                                    value: it.yycdl,
                                    color: '#1C99FF',
                                    total: 45000,
                                }, ],
                            ]
                            that.powerDataHome = [{
                                    title: "风速",
                                    value: it.pjfs,
                                    max: 25,
                                    unit: "MW",
                                },
                                {
                                    title: "保证功率",
                                    value: it.bzgl,
                                    max: it.bzgl * 1.08,
                                    unit: "MW",
                                },
                                {
                                    title: "应发功率",
                                    value: it.yfgl,
                                    max: it.yfgl * 1.08,
                                    unit: "MW",
                                },
                                {
                                    title: "实发功率",
                                    value: it.sfgl,
                                    max: it.sfgl * 1.08,
                                    unit: "MW",
                                },
                            ];
                        }
                        //计划电量完成情况
                        if (res.data.jhwcl) {
                            that.powerPlanData = res.data.jhwcl
                        }
                        // 月发电量
                        if (res.data.dllist && res.data.dllist.length > 0) {
                            let xAxis = []
                            let seriesRF = []
                            let seriesSW = []
                            let seriesGW = []
                            res.data.dllist.forEach(it => {
                                xAxis.push(it.rq)
                                seriesRF.push(it.yfdl)
                                seriesSW.push(it.yswdl)
                                seriesGW.push(it.ygwdl)
                            })
                            let series = [{
                                    name: '日发电量',
                                    data: seriesRF,
                                    barGap: '0',
                                    type: 'bar'
                                },
                                {
                                    name: '上网电量',
                                    data: seriesSW,
                                    type: 'bar'
                                },
                                {
                                    name: '购网电量',
                                    data: seriesGW,
                                    type: 'bar'
                                }
                            ]
                            that.getPowerBar(xAxis, series)
                        }
                        // 72小时功率曲线
                        if (res.data['72time'] && res.data['72time'].length > 0) {
                            let xAxis = []
                            let seriesSpeed = []
                            let seriesGl = []
                            let seriesSJ = []
                            res.data['72time'].forEach(it => {
                                let date = it.time.substring(0, it.time.indexOf('T') + 3)
                                xAxis.push(date)
                                seriesSpeed.push(it.speed)
                                seriesGl.push(it.gl)
                                seriesSJ.push(it.sjgl)
                            })
                            let series = [{
                                    name: '平均风速',
                                    data: seriesSpeed,
                                    yAxisIndex: 1,
                                    type: 'line',
                                    symbol: 'none'
                                },
                                {
                                    name: '应发功率',
                                    data: seriesGl,
                                    type: 'line',
                                    symbol: 'none'
                                },
                                {
                                    name: '实际功率',
                                    data: seriesSJ,
                                    type: 'line',
                                    symbol: 'none'
                                }
                            ]
                            that.getPowerLine(xAxis, series)
                        }
                    }
                })
            },
            getPowerBar(xAxis, series) {
                let option = {
                    title: {
                        text: '月发电量',
                        left: '10px',
                        top: '20px',
                        textStyle: {
                            fontSize: '16',
                            fontWeight: 400,
                            color: !this.swichTheme ? '#fff' : '#1850B3'
                        }
                    },
                    color: ['#7981AF', '#1C99FF', '#E57F25'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '2%',
                        right: '2%',
                        bottom: '5%',
                        height: '90px',
                        containLabel: true
                    },
                    legend: {
                        right: '20',
                        top: '20',
                        itemWidth: 5,
                        itemHeight: 5,
                        data: ['日发电量', '上网电量', '购网电量']
                    },
                    xAxis: [{
                        type: 'category',
                        axisTick: {
                            show: false
                        },
                        data: xAxis
                    }],
                    yAxis: [{
                        type: 'value',
                        splitNumber: 3.5,
                        splitLine: {
                            lineStyle: {
                                color: ['#393F4D']
                            }
                        },
                        name: '单位：万KWh'
                    }],
                    series: series
                };
                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, series) {
                let option = {
                    title: {
                        text: '72小时功率曲线',
                        left: '10px',
                        top: '20px',
                        textStyle: {
                            fontSize: '16',
                            fontWeight: 400,
                            color: !this.swichTheme ? '#fff' : '#1850B3'
                        }
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    color: ['#7981AF', '#1C99FF', '#E57F25'],
                    legend: {
                        right: '20',
                        top: '20',
                        itemWidth: 5,
                        itemHeight: 5,
                        data: ['平均风速', '应发功率', '实际功率']
                    },
                    grid: {
                        left: '2%',
                        right: '2%',
                        bottom: '5%',
                        height: '90px',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: xAxis
                    },
                    yAxis: [{
                            type: 'value',
                            splitNumber: 3,
                            splitLine: {
                                lineStyle: {
                                    color: ['#393F4D']
                                }
                            },
                            name: '单位：万KWh'
                        },
                        {
                            type: 'value',
                            splitNumber: 3,
                            splitLine: {
                                lineStyle: {
                                    color: ['#393F4D']
                                }
                            },
                            name: '单位：m/s'
                        },
                    ],
                    series: series
                };
                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;
                    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;
                            line-height: 28px;
                            margin-right: 8px;
                        }
                    }

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

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

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


                .weather {
                    margin-bottom: 30px;

                    .weatherMain {
                        margin-top: 15px;

                        .weatherMain_top {
                            display: flex;

                            .wetherImg {

                                margin: 9px 0 0 25px;
                            }

                            .wetherMsg {
                                margin-left: 21px;

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

                                .wetherMsg_Det {
                                    display: flex;

                                    span {
                                        font-family: Microsoft YaHei;
                                        font-weight: 400;
                                        font-size: 14px;
                                        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;
                                    line-height: 28px;
                                }

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

                .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;
                                    line-height: 28px;
                                }

                                .powerItem {
                                    display: flex;
                                    // position: relative;

                                    .powerValue {
                                        font-size: 12px;
                                        font-family: Bicubik;
                                        position: relative;
                                        left: 3px;
                                        top: 17px;

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

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

                                    .powerValuesc {
                                        left: -35px;
                                    }
                                }
                            }
                        }


                    }
                }

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

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

                .dingbian,
                .jingbian {
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    font-size: 18px;
                    line-height: 35px;
                }

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

                        }
                    }
                }

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

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

                                .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;
                                                line-height: 28px;
                                            }

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

                                                span {
                                                    font-family: Bicubik;
                                                    font-weight: 400;
                                                    font-size: 16px;
                                                    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;
                                }

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

                                        .analysMain_Msg_top_flex {
                                            display: flex;
                                            padding: 0 10px;
                                            width: calc(100% - 20px);

                                            span {
                                                display: inline-block;
                                            }

                                            span:nth-child(1) {
                                                width: 30px;
                                                font-family: Microsoft YaHei;
                                                font-weight: 400;
                                                font-size: 14px;
                                                line-height: 28px;
                                            }

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

                                    .analysMain_Msg_bot {
                                        // opacity: 0.5;
                                        text-align: center;

                                        span {
                                            font-family: Microsoft YaHei;
                                            font-weight: 400;
                                            font-size: 14px;
                                            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;
            }

            .map {

                .dingbian,
                .jingbian {
                    color: #A5ABB7;
                    text-shadow: 0px 1px 2px #070A11;
                }

                .fengjiSty {
                    .mainSv {
                        .dianSty {
                            background: #31FBFD;
                        }
                    }
                }
            }

            .comHeader {
                .headerRight {
                    background: #2D3138;

                    .headerNaAll {
                        .headerNa2 {
                            color: #787F8F;
                        }
                    }

                    .headerZs {
                        background: #0F0F0F;

                        .headerZsN {
                            background: #41454C;

                        }
                    }
                }
            }

            .leftMain {
                .weather {
                    .weatherMain {
                        .weatherMain_top {
                            .wetherImg {
                                img {
                                    width: 48px;
                                    height: 48px;
                                }

                            }

                            .wetherMsg {
                                .wetherMsg_Du {
                                    color: #FFFFFF;
                                }

                                .wetherMsg_Det {
                                    span {
                                        color: #FFFFFF;
                                    }
                                }
                            }
                        }

                        .weatherMain_bot {

                            .weaMain {

                                .pOne {
                                    color: #FFFFFF;
                                }

                                .pTwo {
                                    color: #8B93A6;
                                }
                            }
                        }
                    }
                }

                .Electric {

                    .electricMain {

                        .electricMain_day,
                        .electricMain_month {
                            .powerCharts {

                                .powerName {
                                    color: #8B93A6;
                                }

                                .powerItem {

                                    .powerValue {

                                        span:nth-child(1) {
                                            background-color: #fff;
                                        }

                                        span:nth-child(2) {
                                            color: #FFFFFF;
                                        }
                                    }
                                }
                            }
                        }


                    }
                }
            }

            .rightMain {

                .analysRadio {

                    .el-radio-group {

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

                            }

                        }

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

                .powerAnalysis {
                    .powerAnalysisMain {


                        .analysMain {

                            .analysMain_left {

                                .analLeftTop {

                                    span {
                                        color: #8B93A6;
                                    }
                                }

                                .analLeftEcharts {

                                    .echartsNum {
                                        color: #1C99FF;
                                    }

                                    .echartsName {
                                        color: #8B93A6;
                                    }
                                }

                                .analLeftBot {
                                    .analLeftBot_top {

                                        .analyleftbottopAll {

                                            .analyleftbottopName {
                                                color: #8B93A6;
                                            }

                                            .analyleftbottopSty {

                                                span {
                                                    color: #FFFFFF;
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }

                .powerPlan {

                    .powerPlanMain {
                        .planMain {

                            .planMain_left {

                                .analysMain_echarts {
                                    border-bottom: 1px dashed #393F4D;
                                }

                                .analysMain_Msg {
                                    .analysMain_Msg_top {

                                        .analysMain_Msg_top_flex {

                                            span:nth-child(1) {
                                                color: #8B93A6;
                                            }

                                            span:nth-child(2) {
                                                color: #FFFFFF;
                                            }
                                        }
                                    }

                                    .analysMain_Msg_bot {
                                        background: #2D3138;

                                        span {
                                            color: #8B93A6;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }

        .footer {

            .monthPower {
                background: rgba(41, 45, 53, 0.4);
            }

            .hover72Power {
                background: rgba(41, 45, 53, 0.4);
            }
        }
    }

    .themeLightHome {
        background-color: #e6e8f2;
        background-image: url('@/assets/images/indexCom/backImg_W.png');
        background-repeat: no-repeat;

        .homeMain {

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

            .map {

                .dingbian,
                .jingbian {
                    color: #fff;
                    text-shadow: 0px 1px 2px #070A11;
                }

                .fengjiSty {
                    .mainSv {
                        .dianSty {
                            background: #1850B3;
                            border: 1px solid #FFFFFF;
                        }
                    }
                }
            }

            .comHeader {
                .headerRight {
                    background: #1850B3;

                    .headerNaAll {
                        .headerNa2 {
                            color: #BABED3;
                        }
                    }

                    .headerZs {
                        background: #fff;

                        .headerZsN {
                            background: #4F70EC;

                        }
                    }
                }
            }

            .leftMain {
                .weather {
                    .weatherMain {
                        .weatherMain_top {
                            .wetherMsg {
                                .wetherMsg_Du {
                                    color: #1850B3;
                                }

                                .wetherMsg_Det {
                                    span {
                                        color: #575A5F;
                                    }
                                }
                            }
                        }

                        .weatherMain_bot {

                            .weaMain {

                                .pOne {
                                    color: #575A5F;
                                }

                                .pTwo {
                                    color: #646972;
                                }
                            }
                        }
                    }
                }

                .Electric {

                    .electricMain {

                        .electricMain_day,
                        .electricMain_month {
                            .powerCharts {

                                .powerName {
                                    color: #67666C;
                                }

                                .powerItem {

                                    .powerValue {

                                        span:nth-child(1) {
                                            background-color: #fff;
                                        }

                                        span:nth-child(2) {
                                            color: #242426;
                                        }
                                    }
                                }
                            }
                        }


                    }
                }
            }

            .rightMain {

                .analysRadio {

                    .el-radio-group {

                        .el-radio-button {
                            .el-radio-button__inner {
                                color: #646972;
                            }

                        }

                        .is-active {

                            .el-radio-button__inner {
                                background: #1850B3 !important;
                                color: #fff;

                            }
                        }
                    }
                }

                .powerAnalysis {
                    .powerAnalysisMain {


                        .analysMain {

                            .analysMain_left {

                                .analLeftTop {

                                    span:nth-child(1) {
                                        color: #646972;
                                    }

                                    span:nth-child(2) {
                                        color: #242426;
                                    }
                                }

                                .analLeftEcharts {

                                    .echartsNum {
                                        color: #1850B3;
                                    }

                                    .echartsJing {
                                        color: #F87909;
                                    }

                                    .echartsName {
                                        color: #646972;
                                    }
                                }

                                .analLeftBot {
                                    .analLeftBot_top {

                                        .analyleftbottopAll {

                                            .analyleftbottopName {
                                                color: #646972;
                                            }

                                            .analyleftbottopSty {

                                                span {
                                                    color: #1850B3;
                                                }

                                                .echartsJing {
                                                    color: #F87909;
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }

                .powerPlan {

                    .powerPlanMain {
                        .planMain {

                            .planMain_left {

                                .analysMain_echarts {
                                    border-bottom: 1px dashed #393F4D;
                                }

                                .analysMain_Msg {
                                    .analysMain_Msg_top {

                                        .analysMain_Msg_top_flex {

                                            span:nth-child(1) {
                                                color: #646972;
                                            }

                                            span:nth-child(2) {
                                                color: #1850B3;
                                            }
                                        }
                                    }

                                    .analysMain_Msg_bot {
                                        background: #ccd0de;

                                        span {
                                            color: #646972;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }

        .footer {

            .monthPower {
                background: rgba(255, 255, 255, 0.8);
            }

            .hover72Power {
                background: rgba(255, 255, 255, 0.8);
            }
        }
    }
</style>