windLifecontrolPro/src/views/powerPrediction/homePageNoMap.vue

<template>
    <div class="homePageNoMap" :class="!theme ? 'themeDark' : 'themeLight'" :style="pageHeight">
        <div class="windStstus">
            <div class="everyOne" v-for="(item, index) in statusData" :key="index">
                <img :src="item.img" alt="">
                <span class="statusName">{{item.name}}</span>
                <span class="statusNum">{{item.number}}</span>
            </div>
        </div>
        <div class="homePage_main">
            <div class="mainLeft">
                <div class="lineStyle" v-on:dblclick="doubleclick('全域功率预测')">
                    <div style="display: flex;float: right;justify-content: end;margin-right: 53px;">
                        <div v-for="item in showpowerLegend" :key="item.name">
                            <span class="lineColor" :style="{'background': item.color}"></span>
                            <span class="powerLegendColor" :style="{'background': item.color}"></span>
                            <span :style="!theme ? 'color: #fff' : ''"
                                style="font-size: 12px;margin-left: 12px;position: relative;top: 1px;">{{item.name}}</span>
                        </div>
                    </div>
                    <div id="lineChart" :style="lineChartStyle"></div>
                </div>
                <div class="lineStyle" v-on:dblclick="doubleclick('全域风速预测')" style="position: relative">
                    <div class="styleData">
                        <span :class="windShow ? 'changeStyle' : 'defaultSty'" @click="getWindorSunDate('风速')">风速</span>
                        <span :class="sunShow ? 'changeStyle' : 'defaultSty'"
                            @click="getWindorSunDate('辐照度')">辐照度</span>
                    </div>
                    <div id="lineChart1" :style="lineChartStyle"></div>
                </div>
            </div>
            <div class="mainRight">
                <div class="lineStyle">
                    <div id="barChart" :style="barChartStyle"></div>
                </div>
                <div class="lineStyle">
                    <div class="styleData">
                        <span :class="dayShow ? 'changeStyle' : 'defaultSty'" @click="getbarDate('日')">日</span>
                        <span :class="monthShow ? 'changeStyle' : 'defaultSty'" @click="getbarDate('月')">月</span>
                        <span :class="yearShow ? 'changeStyle' : 'defaultSty'" @click="getbarDate('年')">年</span>
                    </div>
                    <div id="barChart1" :style="barChartStyle"></div>
                </div>
                <div class="messageData">
                    <div :style="barChartStyle">
                        <p style="margin-bottom:30px">温馨提示：</p>
                        <div class="msgHeight">
                            <div v-for="(item, index) in messageDataxc" :key="index">
                                <div style="display:flex">
                                    <span class="stationSty">{{item.name}}</span>
                                    <span class="titleSty"
                                        :style="{color: item.data[0].color}">【{{item.data[0].name}}】</span>
                                    <span class="msgSty" @click="showDetail(item, index)">{{item.data[0].msg}}</span>
                                </div>
                                <el-divider></el-divider>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="exitV">
                <div class="time">
                    <span>服务器时间：{{currentTime}}</span>
                </div>
                <div class="earlywarning">
                    <div class="warningdata" v-for="item in warningData" :key="item.name">
                        <span style="color:#fff">{{item.name}}</span>
                        <span class="warningColor" :style="`background:${item.color}`"></span>
                    </div>
                </div>
            </div>
        </div>
        <global-dialog ref="global" from="index" :echartsTheme="echartsTheme" :theme="theme" @notReload="notReload"
            :ExceedTimeList="ExceedTimeList" :stationData="stationData"></global-dialog>
        <weather-detail ref="weatherDetail"></weather-detail>
    </div>
</template>

<script>
    import {
        apiGetStationGL,
        apiGetPowerPrediction,
        apiGetWindSpeed,
        apiGetCapacity,
        apiGetAssessmentScore,
        apiGetEarlyWarningInfo,
        apiGetallWeatherInfo,
        apiGetirradianceForecast,
        apiGetStatusInfoAll,
        apiGetinsertLoginInformation,
        apiGetpersonalInformation,
        apiGetsinglePointToLogin
    } from '@/api/api'
    import globalDialog from '@/components/powerPredictionComponent/homePageAssembly/globalDialogPage.vue'
    import weatherDetail from '@/components/powerPredictionComponent/homePageAssembly/weatherDetail.vue'
    //状态图片
    import oneimg from '@/assets/windStatusPic/000.png'
    import twoimg from '@/assets/windStatusPic/001.png'
    import threeimg from '@/assets/windStatusPic/002.png'
    import fourimg from '@/assets/windStatusPic/003.png'
    import fiveimg from '@/assets/windStatusPic/004.png'
    import siximg from '@/assets/windStatusPic/005.png'
    import sevenimg from '@/assets/windStatusPic/006.png'
    //大风预警图片
    import windBlue from '@/assets/weather/windBlue.png'
    import windYellow from '@/assets/weather/windYellow.png'
    import windOrange from '@/assets/weather/windOrange.png'
    import windRed from '@/assets/weather/windRed.png'
    //暴雨预警图片
    import rainBlue from '@/assets/weather/rainBlue.png'
    import rainYellow from '@/assets/weather/rainYellow.png'
    import rainOrange from '@/assets/weather/rainOrange.png'
    import rainRed from '@/assets/weather/rainRed.png'
    //雷电预警图片
    import thunderYellow from '@/assets/weather/thunderYellow.png'
    import thunderOrange from '@/assets/weather/thunderOrange.png'
    import thunderRed from '@/assets/weather/thunderRed.png'
    //暴雪预警图片
    import snowBlue from '@/assets/weather/snowBlue.png'
    import snowYellow from '@/assets/weather/snowYellow.png'
    import snowOrange from '@/assets/weather/snowOrange.png'
    import snowRed from '@/assets/weather/snowRed.png'
    //正常天气
    import sunshine from '@/assets/weather/sunshine.png'
    import overcast from '@/assets/weather/overcast.png'
    import cloudy from '@/assets/weather/cloudy.png'
    import rain from '@/assets/weather/rain.png'
    import snow from '@/assets/weather/snow.png'
    import thunder from '@/assets/weather/thunder.png'

    import {
        setToken
    } from '@/utils/auth'
    export default {
        components: {
            // commonHeader,
            // twopointfiveEcharts,
            globalDialog,
            weatherDetail
        },
        data() {
            return {
                statusTimer: '',
                statusData: [],
                planFiveMin: '',
                currentTime: '',
                warningData: [],
                messageDataxc: [],
                messageDataAll: [],
                ExceedTimeList: [],
                stationData: [],
                pickerTime: [],
                bodyHeight: document.documentElement.clientHeight - 60 + 'px',
                isreload: true,
                dayShow: true,
                monthShow: false,
                yearShow: false,
                windShow: true,
                sunShow: false,
                showpowerLegend: [],
                echartsTheme: '',
                theme: null
            }
        },
        created() {
            console.log('aaaa', process.env)
            this.warningData = [{
                    name: '通讯预警',
                    nameEn: 'txyj',
                    color: ''
                },
                {
                    name: '测风塔预警',
                    nameEn: 'cftyj',
                    color: ''
                },
                {
                    name: '风机数据',
                    nameEn: 'fjsj',
                    color: ''
                },
                {
                    name: '中国数值气象',
                    nameEn: 'zgszqx',
                    color: ''
                },
                {
                    name: '欧洲数值气象',
                    nameEn: 'ozszqx',
                    color: ''
                },
            ]
            this.messageDataAll = [{
                    id: 1,
                    name: '大风蓝色预警',
                    color: '#5599ff',
                    img: windBlue,
                    typeName: 'windBlue',
                    msg: '未来24小时内，大风蓝色预警。做好防大风工作，关好门窗，加固围板、棚架，行人尽量不骑自行车，防高空坠物。'
                },
                {
                    id: 2,
                    name: '大风黄色预警',
                    color: '#fac858',
                    img: windYellow,
                    typeName: 'windYellow',
                    msg: '未来12小时，大风黄色预警。应该停止露天活动和高空作业，切断户外危险电源，注意森林、草原火灾。'
                },
                {
                    id: 3,
                    name: '大风橙色预警',
                    color: '#fc8452',
                    img: windOrange,
                    typeName: 'windOrange',
                    msg: '未来6小时大风橙色预警，检修人员减少外出，切断危险电源，注意防高空坠物。'
                },
                {
                    id: 4,
                    name: '大风红色预警',
                    color: '#e73e3e',
                    img: windRed,
                    typeName: 'windRed',
                    msg: '未来6小时大风红色预警。应做好防范大风应急工作，工作人员不要随意外出，切断危险电源，设备设施尽快转移到安全地带。'
                },
                {
                    id: 5,
                    name: '暴雨蓝色预警',
                    color: '#5599ff',
                    img: rainBlue,
                    typeName: 'rainBlue',
                    msg: '未来12小时内降雨量将达50毫米以上，注意山路湿滑。'
                },
                {
                    id: 6,
                    name: '暴雨黄色预警',
                    color: '#fac858',
                    img: rainYellow,
                    typeName: 'rainYellow',
                    msg: '未来6小时内降雨量将达50毫米以上，降雨可能持续，检修人员提前返回场里。'
                },
                {
                    id: 7,
                    name: '暴雨橙色预警',
                    color: '#fc8452',
                    img: rainOrange,
                    typeName: 'rainOrange',
                    msg: '未来3小时内降雨量将达50毫米以上，检修人员尽量避免现场工作。'
                },
                {
                    id: 8,
                    name: '暴雨红色预警',
                    color: '#e73e3e',
                    img: rainRed,
                    typeName: 'rainRed',
                    msg: '未来3小时内降雨量将达100毫米以上，检修人员尽量避免现场工作或提前返回场里。'
                },
                {
                    id: 9,
                    name: '雷电黄色预警',
                    color: '#fac858',
                    img: thunderYellow,
                    typeName: 'thunderYellow',
                    msg: '可能会造成雷电灾害事故，做好防雷工作。密切关注天气变化，尽量避免户外检修工作。'
                },
                {
                    id: 10,
                    name: '雷电橙色预警',
                    color: '#fc8452',
                    img: thunderOrange,
                    typeName: 'thunderOrange',
                    msg: '雷电活动影响可能持续，出现雷电灾害事故的可能性比较大。落实防雷应急措施。工作人员避免户外活动，切断危险电源，不要在树下、电杆下、塔吊下避雨。'
                },
                {
                    id: 11,
                    name: '雷电红色预警',
                    color: '#e73e3e',
                    img: thunderRed,
                    typeName: 'thunderRed',
                    msg: '未来2小时内有强烈的雷电活动发生，且可能持续，出现雷电灾害事故的可能性非常大。做好防雷应急抢险工作。工作人员躲入室内并关好门窗。切勿接触天线、水管、铁丝网、金属门窗、建筑物外墙，远离电线等带电设备和其他类似金属装置。密切注意雷电预警信息的发布。'
                },
                {
                    id: 12,
                    name: '暴雪蓝色预警',
                    color: '#5599ff',
                    img: snowBlue,
                    typeName: 'snowBlue',
                    msg: '交通路面湿滑，可能会影响检修工作。'
                },
                {
                    id: 13,
                    name: '暴雪黄色预警',
                    color: '#fac858',
                    img: snowYellow,
                    typeName: 'snowYellow',
                    msg: '交通路面湿滑，可能会影响检修工作。'
                },
                {
                    id: 14,
                    name: '暴雪橙色预警',
                    color: '#fc8452',
                    img: snowOrange,
                    typeName: 'snowOrange',
                    msg: '可能影响交通，影响车行，避免坡路打滑。'
                },
                {
                    id: 15,
                    name: '暴雪红色预警',
                    color: '#e73e3e',
                    img: snowRed,
                    typeName: 'snowRed',
                    msg: '对交通影响较大，车量出行困难，建议减少非必要出行。'
                },
                // {
                //     id: 16,
                //     type: '冻雨天气预警',
                //     color: '#fc8452',
                //     msg: '未来24小时可能有冻雨气象天气发生，请防范冻雨导致生产受累。'
                // },
                {
                    id: 17,
                    name: '晴天',
                    color: '#3ba272',
                    img: sunshine,
                    typeName: 'sunshine',
                    msg: '蓝天真的很温柔，他将那些零零散散的云，都拥入自己的怀里。'
                },
                {
                    id: 18,
                    name: '阴天',
                    color: '#3ba272',
                    img: overcast,
                    typeName: 'overcast',
                    msg: '乌云一片接着一片，板着脸走过，不时还传来一两声可怕的怒吼似箭的光，告诉着人们他的厉害。'
                },
                {
                    id: 19,
                    name: '多云',
                    color: '#3ba272',
                    img: cloudy,
                    typeName: 'cloudy',
                    msg: '最美的天气，不是下雨天，不是大太阳天，而是多云的阴天，出门淋不着，晒不着。'
                },
                {
                    id: 20,
                    name: '雨天',
                    color: '#3ba272',
                    img: rain,
                    typeName: 'rain',
                    msg: '再温柔平和宁静的落雨，也有把人浸透的威力。'
                },
                {
                    id: 21,
                    name: '雪天',
                    color: '#3ba272',
                    img: snow,
                    typeName: 'snow',
                    msg: '雪花落入掌心，融化思念，释放温情，雪花落入大地，存储牵挂，诠释纯洁。'
                },
                {
                    id: 22,
                    name: '雷电',
                    color: '#3ba272',
                    img: thunder,
                    typeName: 'thunder',
                    msg: '所有的雷声闪电，都是在雷雨云中发生的。'
                },
            ]
            this.ExceedTimeList = [{
                    label: '超前15分钟',
                    value: 0
                },
                {
                    label: '超前30分钟',
                    value: 1
                },
                {
                    label: '超前45分钟',
                    value: 2
                },
                {
                    label: '超前1小时',
                    value: 3
                },
                {
                    label: '超前1小时15分钟',
                    value: 4
                },
                {
                    label: '超前1小时30分钟',
                    value: 5
                },
                {
                    label: '超前1小时45分钟',
                    value: 6
                },
                {
                    label: '超前2小时',
                    value: 7
                },
                {
                    label: '超前2小时15分钟',
                    value: 8
                },
                {
                    label: '超前2小时30分钟',
                    value: 9
                },
                {
                    label: '超前2小时45分钟',
                    value: 10
                },
                {
                    label: '超前3小时',
                    value: 11
                },
                {
                    label: '超前3小时15分钟',
                    value: 12
                },
                {
                    label: '超前3小时30分钟',
                    value: 13
                },
                {
                    label: '超前3小时45分钟',
                    value: 14
                },
                {
                    label: '超前4小时',
                    value: 15
                },
                {
                    label: '超前5小时',
                    value: 19
                },
                {
                    label: '超前6小时',
                    value: 23
                }
            ]
            this.statusData = [{
                    img: oneimg,
                    name: '运行',
                    nameEn: 'yx',
                    number: 0
                },
                {
                    img: twoimg,
                    name: '待机',
                    nameEn: 'dj',
                    number: 0
                },
                {
                    img: threeimg,
                    name: '维护',
                    nameEn: 'wh',
                    number: 0
                },
                {
                    img: fourimg,
                    name: '停机',
                    nameEn: 'tj',
                    number: 0
                },
                {
                    img: fiveimg,
                    name: '限电',
                    nameEn: 'xd',
                    number: 0
                },
                {
                    img: siximg,
                    name: '离线',
                    nameEn: 'lx',
                    number: 0
                },
                {
                    img: sevenimg,
                    name: '检修',
                    nameEn: 'jx',
                    number: 0
                }
            ]
            this.pickerTime = [
                new Date(new Date(new Date().getTime()).setHours(0, 0, 0, 0) + 900 * 1000),
                new Date(new Date(new Date().getTime()).setHours(0, 0, 0, 0) + 24 * 60 * 60 * 1000 - 1000)
            ]
            this.showpowerLegend = [{
                    name: '理论功率',
                    color: '#5672c4'
                },
                {
                    name: '可用功率',
                    color: '#95cc7a'
                },
                {
                    name: 'AGC',
                    color: '#f7c75f'
                },
                {
                    name: '超短期',
                    color: '#e96366'
                },
                {
                    name: '实际',
                    color: '#7ac1dd'
                },
            ]
            if (this.$route.query.markKey) {
                this.fromCustom(this.$route.query.userid)
            }
        },
        computed: {
            pageHeight() {
                return {
                    'height': document.documentElement.clientHeight - 115 + 'px'
                }
            },
            lineChartStyle() {
                let pageHeight = document.documentElement.clientHeight - 210
                let heightChart = pageHeight / 2 + 'px'
                return {
                    'width': '98%',
                    'height': heightChart
                }
            },
            barChartStyle() {
                // let pageHeight = document.documentElement.clientHeight-220-240
                let pageHeight = document.documentElement.clientHeight - 260
                let heightChart = pageHeight / 3 + 'px'
                return {
                    'width': '100%',
                    'height': heightChart
                }
            }
        },
        watch: {
            '$store.state.theme': {
                handler: function (newVal, oldVal) {
                    this.theme = newVal
                    this.echartsTheme = !newVal ? 'dark' : ''
                    if (oldVal != undefined) {
                        this.getPowerPrediction()
                        this.getWindSpeed('风速')
                        this.getCapacity()
                        this.getAssessmentScore(0)
                        this.getAllStationWeather()
                        this.getWarningInfo()
                        this.getWindStstus()
                    }
                },
                immediate: true
            }
        },
        mounted() {
            if (!this.$route.query.markKey) {
                let that = this
                that.getStationData()
                that.statusTimer = setInterval(function () {
                    that.currentTime = that.changeDate(new Date())
                }, 1000)
                that.planFiveMin = setInterval(function () {
                    that.getPowerPrediction()
                    that.getWindSpeed(that.windShow ? '风速' : '辐照度')
                }, 300000)
                that.getPowerPrediction()
                that.getWindSpeed('风速')
                that.getCapacity()
                that.getAssessmentScore(0)
                that.getAllStationWeather()
                that.getWarningInfo()
                that.getWindStstus()
            }
        },
        beforeRouteLeave(to, from, next) {
            next()
            if (this.statusTimer) {
                clearInterval(this.statusTimer);
                this.statusTimer = null;
            }
            if (this.planFiveMin) {
                clearInterval(this.planFiveMin);
                this.planFiveMin = null;
            }
        },
        methods: {
            fromCustom(name) {
                let that = this
                let params = {
                    markKey: this.$route.query.markKey,
                    userid: this.$route.query.userid
                }
                apiGetsinglePointToLogin(params).then(datas => {
                    if (datas) {
                        setToken(datas.token)
                        that.LoginInfor(name, datas.id)
                    }
                }).catch(e => {
                    let url = location.origin + '/#/login'
                    window.open(url, '_self')
                    location.reload()
                })
            },
            // 插入登录信息
            LoginInfor(name, id) {
                let that = this
                let params = {
                    loginName: name
                }
                apiGetinsertLoginInformation(params).then(datas => {
                    if (datas) {
                        window.sessionStorage.setItem('userDatamsg', JSON.stringify(datas.data))
                        that.personalInfo(id)
                    }
                })
            },
            // 用户信息
            personalInfo(id) {
                let that = this
                let params = {
                    userId: id
                }
                apiGetpersonalInformation(params).then(datas => {
                    if (datas) {
                        window.sessionStorage.setItem('usermsg', JSON.stringify(datas.data.user))
                        that.$router.push({
                            name: 'homePageNoMap'
                        })
                        setTimeout(() => {
                            that.getStationData()
                            that.statusTimer = setInterval(function () {
                                that.currentTime = that.changeDate(new Date())
                            }, 1000)
                            that.planFiveMin = setInterval(function () {
                                that.getPowerPrediction()
                                that.getWindSpeed(that.windShow ? '风速' : '辐照度')
                            }, 300000)
                            that.getPowerPrediction()
                            that.getWindSpeed('风速')
                            that.getCapacity()
                            that.getAssessmentScore(0)
                            that.getAllStationWeather()
                            that.getWarningInfo()
                            that.getWindStstus()
                            for (let i = 0; i < 1; i++) {
                                window.location.reload();
                            }
                        }, 500)
                    }
                })
            },
            // 获取风机状态服务
            getWindStstus() {
                let that = this
                apiGetStatusInfoAll().then(datas => {
                    if (datas) {
                        if (datas.data) {
                            that.statusData.forEach(item => {
                                for (let it in datas.data) {
                                    if (item.nameEn === it) {
                                        item.number = datas.data[it]
                                    }
                                }
                            })
                            that.allStatus = datas.data
                        }
                    }
                })
            },
            showDetail(item, index) {
                this.$refs.weatherDetail.dialogVisible = true
                this.$refs.weatherDetail.title = '天气预警'
                this.$refs.weatherDetail.messageAll = this.messageDataxc
                this.$refs.weatherDetail.activeName = index.toString()
                this.$refs.weatherDetail.statusName = item.data[0].name
                console.log(item)
            },
            //获取预警状态信息
            getWarningInfo() {
                let that = this
                apiGetEarlyWarningInfo().then(datas => {
                    if (datas) {
                        if (datas.data) {
                            that.warningData.forEach(item => {
                                for (let it in datas.data) {
                                    if (item.nameEn === it) {
                                        if (datas.data[it] === 1) {
                                            item.color = '#ee6666'
                                        } else if (datas.data[it] === 2) {
                                            item.color = '#91cc75'
                                        } else {
                                            item.color = '#fac858'
                                        }
                                    }
                                }
                            })
                        }
                    }
                })
            },
            // 获取所有场站天气
            getAllStationWeather() {
                let that = this
                apiGetallWeatherInfo().then(datas => {
                    if (datas && datas.data) {
                        that.messageDataxc = []
                        datas.data.forEach(item => {
                            let weatherDataFromWeb = null
                            weatherDataFromWeb = JSON.parse(item.content)
                            that.everyStationWeather(weatherDataFromWeb, item.terminalName)
                        })
                        console.log('messageDataxc', that.messageDataxc)
                    }
                })
            },
            //处理每个场站天气数据
            everyStationWeather(weatherDataFromWeb, stationName) {
                console.log('weatherDataFromWeb', weatherDataFromWeb)
                let weatherTit = {
                    windBlue: 0,
                    windYellow: 0,
                    windOrange: 0,
                    windRed: 0,
                    rainBlue: 0,
                    rainYellow: 0,
                    rainOrange: 0,
                    rainRed: 0,
                    thunderYellow: 0,
                    thunderOrange: 0,
                    thunderRed: 0,
                    snowBlue: 0,
                    snowYellow: 0,
                    snowOrange: 0,
                    snowRed: 0
                }
                weatherDataFromWeb['24_hour_forecast'].info.forEach((item, index) => {
                    if (index < 24) {
                        if (item.wind_power_num === '6' || item.wind_power_num === '7') {
                            //大风蓝色预警
                            weatherTit.windBlue += 1
                        }
                        if (index < 13) {
                            if (item.wind_power_num === '8' || item.wind_power_num === '9') {
                                //大风黄色预警
                                weatherTit.windYellow += 1
                                weatherTit.windBlue = 0
                            } else if (item.precipitation > '40' && item.precipitation <= '50' && item.weather
                                .indexOf('雨') !== -1) {
                                //暴雨蓝色预警
                                weatherTit.rainBlue += 1
                            } else if (item.precipitation > '3' && item.precipitation <= '4' && item.weather
                                .indexOf('雪') !== -1) {
                                //暴雪蓝色预警
                                weatherTit.snowBlue += 1
                            } else if (item.precipitation >= '6' && item.weather.indexOf('雪') !== -1) {
                                //暴雪黄色预警
                                weatherTit.snowYellow += 1
                                weatherTit.snowBlue = 0
                            }
                            if (index < 7) {
                                if (item.wind_power_num === '10' || item.wind_power_num === '11') {
                                    //大风橙色预警
                                    weatherTit.windOrange += 1
                                    weatherTit.windYellow = 0
                                    weatherTit.windBlue = 0
                                } else if (item.wind_power_num === '12' || item.wind_power_num === '13') {
                                    //大风红色预警
                                    weatherTit.windRed += 1
                                    weatherTit.windOrange = 0
                                    weatherTit.windYellow = 0
                                    weatherTit.windBlue = 0
                                } else if (item.weather.indexOf('雷') !== -1 || item.weather.indexOf('电') !== -
                                    1) {
                                    //雷电黄色预警
                                    weatherTit.thunderYellow += 1
                                } else if (item.precipitation > '40' && item.precipitation <= 50 && item.weather
                                    .indexOf('雨') !== -1) {
                                    //暴雨黄色预警
                                    weatherTit.rainYellow += 1
                                    weatherTit.rainBlue = 0
                                } else if (item.precipitation >= '10' && item.weather.indexOf('雪') !== -1) {
                                    //暴雪橙色预警
                                    weatherTit.snowOrange += 1
                                    weatherTit.snowYellow = 0
                                    weatherTit.snowBlue = 0
                                } else if (item.precipitation >= '15' && item.weather.indexOf('雪') !== -1) {
                                    //暴雪红色预警
                                    weatherTit.snowRed += 1
                                    weatherTit.snowOrange = 0
                                    weatherTit.snowYellow = 0
                                    weatherTit.snowBlue = 0
                                }
                                if (index < 5) {
                                    if (item.weather.indexOf('雷') !== -1 || item.weather.indexOf('电') !== -1) {
                                        //雷电橙色预警
                                        weatherTit.thunderOrange += 1
                                        weatherTit.thunderYellow = 0
                                    }
                                    if (index < 4) {
                                        if (item.precipitation > '50' && item.weather.indexOf('雨') !== -1) {
                                            //暴雨橙色预警
                                            weatherTit.rainOrange += 1
                                            weatherTit.rainYellow = 0
                                            weatherTit.rainBlue = 0
                                        } else if (item.precipitation >= '100' && item.weather.indexOf('雨') !==
                                            -1) {
                                            //暴雨红色预警
                                            weatherTit.rainRed += 1
                                            weatherTit.rainOrange = 0
                                            weatherTit.rainYellow = 0
                                            weatherTit.rainBlue = 0
                                        }
                                        if (index < 3) {
                                            if (item.weather.indexOf('雷') !== -1 || item.weather.indexOf(
                                                    '电') !== -1) {
                                                //雷电红色预警
                                                weatherTit.thunderRed += 1
                                                weatherTit.thunderOrange = 0
                                                weatherTit.thunderYellow = 0
                                            }
                                        }
                                    }
                                }
                            }
                        }

                    }
                })

                // let weatherStatus = ['wind', 'rain', 'thunder', 'snow']
                // let weatherLeave = ['Blue', 'Yellow', 'Orange', 'Red']
                let useweatherTit = {}
                for (let i in weatherTit) {
                    if (weatherTit[i] > 0) {
                        useweatherTit[i] = weatherTit[i]
                    }
                }
                if (Object.keys(useweatherTit).length > 0) {
                    for (let i in useweatherTit) {
                        let showMsgObj = {
                            name: stationName,
                            data: [],
                            weatherDetail: {},
                            weather: {}
                        }
                        for (let j = 0; j < this.messageDataAll.length; j++) {
                            if (this.messageDataAll[j].typeName === i) {
                                showMsgObj.data.push(this.messageDataAll[j])
                                this.getOnlyWeatherData(weatherDataFromWeb['24_hour_forecast'].info, weatherDataFromWeb
                                    .weather, showMsgObj, 'Y')
                                this.messageDataxc.push(showMsgObj)
                            }
                        }
                    }
                } else {
                    let showMsgObj = {
                        name: stationName,
                        data: [],
                        weatherDetail: {},
                        weather: {}
                    }
                    if (weatherDataFromWeb.weather.weather.indexOf('晴') !== -1 ||
                        weatherDataFromWeb.weather.weather.indexOf('扬沙') !== -1 ||
                        weatherDataFromWeb.weather.weather.indexOf('霾') !== -1 ||
                        weatherDataFromWeb.weather.weather.indexOf('浮尘') !== -1) {
                        showMsgObj.data.push(this.messageDataAll[15])
                    } else if (weatherDataFromWeb.weather.weather.indexOf('阴') !== -1 ||
                        weatherDataFromWeb.weather.weather.indexOf('雾') !== -1) {
                        showMsgObj.data.push(this.messageDataAll[16])
                    } else if (weatherDataFromWeb.weather.weather.indexOf('多云') !== -1) {
                        showMsgObj.data.push(this.messageDataAll[17])
                    } else if (weatherDataFromWeb.weather.weather.indexOf('雨') !== -1) {
                        showMsgObj.data.push(this.messageDataAll[18])
                    } else if (weatherDataFromWeb.weather.weather.indexOf('雪') !== -1) {
                        showMsgObj.data.push(this.messageDataAll[19])
                    } else if (weatherDataFromWeb.weather.weather.indexOf('雷电') !== -1) {
                        showMsgObj.data.push(this.messageDataAll[20])
                    }
                    this.messageDataxc.push(showMsgObj)
                    // weatherDataFromWeb['15_day_forecast'].info[0]
                    // weatherDataFromWeb['24_hour_forecast'].info[0]
                    this.getOnlyWeatherData(weatherDataFromWeb['24_hour_forecast'].info[0], weatherDataFromWeb.weather,
                        showMsgObj, 'N')
                }
                console.log('weatherTit', weatherTit)
            },
            //获取天气预警的相关天气数据
            getOnlyWeatherData(datas, weather, obj, type) {
                if (type === 'Y') {
                    for (let j = 0; j < datas.length; j++) {
                        let item = datas[j]
                        if (j < 24) {
                            if ((item.wind_power_num === '6' || item.wind_power_num === '7') && obj.data[0].typeName ===
                                'windBlue') {
                                //大风蓝色预警
                                obj.weatherDetail = item
                                obj.weather = weather
                            }
                            if (j < 13) {
                                if ((item.wind_power_num === '8' || item.wind_power_num === '9') && obj.data[0]
                                    .typeName === 'windYellow') {
                                    //大风黄色预警
                                    obj.weatherDetail = item
                                    obj.weather = weather
                                } else if (item.precipitation > '40' && item.precipitation <= '50' &&
                                    item.weather.indexOf('雨') !== -1 && obj.data[0].typeName === 'rainBlue') {
                                    //暴雨蓝色预警
                                    obj.weatherDetail = item
                                    obj.weather = weather
                                } else if (item.precipitation > '3' && item.precipitation <= '4' &&
                                    item.weather.indexOf('雪') !== -1 && obj.data[0].typeName === 'snowBlue') {
                                    //暴雪蓝色预警
                                    obj.weatherDetail = item
                                    obj.weather = weather
                                } else if (item.precipitation >= '6' && item.weather.indexOf('雪') !== -1 && obj.data[0]
                                    .typeName === 'snowYellow') {
                                    //暴雪黄色预警
                                    obj.weatherDetail = item
                                    obj.weather = weather
                                }
                                if (j < 7) {
                                    if ((item.wind_power_num === '10' || item.wind_power_num === '11') && obj.data[0]
                                        .typeName === 'windOrange') {
                                        //大风橙色预警
                                        obj.weatherDetail = item
                                        obj.weather = weather
                                    } else if ((item.wind_power_num === '12' || item.wind_power_num === '13') && obj
                                        .data[0].typeName === 'windRed') {
                                        //大风红色预警
                                        obj.weatherDetail = item
                                        obj.weather = weather
                                    } else if ((item.weather.indexOf('雷') !== -1 || item.weather.indexOf('电') !== -1) &&
                                        obj.data[0].typeName === 'thunderYellow') {
                                        //雷电黄色预警
                                        item.weatherDetail = item
                                        item.weather = weather
                                    } else if (item.precipitation > '40' && item.precipitation <= 50 &&
                                        item.weather.indexOf('雨') !== -1 && obj.data[0].typeName === 'rainYellow') {
                                        //暴雨黄色预警
                                        obj.weatherDetail = item
                                        obj.weather = weather
                                    } else if (item.precipitation >= '10' && item.weather.indexOf('雪') !== -1 && obj
                                        .data[0].typeName === 'snowOrange') {
                                        //暴雪橙色预警
                                        obj.weatherDetail = item
                                        obj.weather = weather
                                    } else if (item.precipitation >= '15' && item.weather.indexOf('雪') !== -1 && obj
                                        .data[0].typeName === 'snowRed') {
                                        //暴雪红色预警
                                        obj.weatherDetail = item
                                        obj.weather = weather
                                    }
                                    if (j < 5) {
                                        if ((item.weather.indexOf('雷') !== -1 || item.weather.indexOf('电') !== -1) &&
                                            obj.data[0].typeName === 'thunderOrange') {
                                            //雷电橙色预警
                                            obj.weatherDetail = item
                                            obj.weather = weather
                                        }
                                        if (j < 4) {
                                            if (item.precipitation > '50' && item.weather.indexOf('雨') !== -1 && obj
                                                .data[0].typeName === 'rainOrange') {
                                                //暴雨橙色预警
                                                item.weatherDetail = item
                                                item.weather = weather
                                            } else if (item.precipitation >= '100' && item.weather.indexOf('雨') !== -
                                                1 && obj.data[0].typeName === 'rainRed') {
                                                //暴雨红色预警
                                                obj.weatherDetail = item
                                                obj.weather = weather
                                            }
                                            if (j < 3) {
                                                if ((item.weather.indexOf('雷') !== -1 || item.weather.indexOf('电') !== -
                                                        1) && obj.data[0].typeName === 'thunderRed') {
                                                    //雷电红色预警
                                                    obj.weatherDetail = item
                                                    obj.weather = weather
                                                }
                                            }
                                        }
                                    }
                                }
                            }

                        }
                    }
                } else {
                    obj.weatherDetail = datas
                    obj.weather = weather
                }
            },
            notReload(val) {
                this.isreload = val
            },
            getStationData() {
                apiGetStationGL().then(datas => {
                    this.stationData = datas.data.list
                })
            },
            getWindorSunDate(type) {
                this.windShow = false
                this.sunShow = false
                if (type === '风速') {
                    this.windShow = true
                    this.getWindSpeed('风速')
                } else {
                    this.sunShow = true
                    this.getWindSpeed('辐照度')
                }
            },
            getbarDate(type) {
                this.dayShow = false
                this.monthShow = false
                this.yearShow = false
                if (type === '日') {
                    this.dayShow = true
                    this.getAssessmentScore(0)
                } else if (type === '月') {
                    this.monthShow = true
                    this.getAssessmentScore(1)
                } else {
                    this.yearShow = true
                    this.getAssessmentScore(2)
                }
            },
            doubleclick(name) {
                if (this.stationData.length > 0) {
                    this.isreload = false
                    this.$refs.global.dialogVisible = true
                    this.$refs.global.tableData = []
                    this.$refs.global.dateType = 1
                    this.$refs.global.loading = true
                    this.$refs.global.pickerTime = this.pickerTime
                    this.$refs.global.windShow = this.windShow
                    this.$refs.global.init(name)
                    this.$nextTick(() => {
                        const myChart1 = this.$echarts.init(document.getElementById('lineChart'), this
                            .echartsTheme)
                        const myChart2 = this.$echarts.init(document.getElementById('lineChart1'), this
                            .echartsTheme)
                        myChart1.dispatchAction({
                            type: 'hideTip'
                        });
                        myChart2.dispatchAction({
                            type: 'hideTip'
                        });
                        if (name === '全域功率预测') {
                            this.$refs.global.getChartsData()
                            this.$refs.global.getTableData()
                        } else {
                            this.$refs.global.getwindChartsData()
                            this.$refs.global.getwindTableData()
                        }
                    })
                }
            },
            changeDate(date) {
                var y = date.getFullYear();
                var m = date.getMonth() + 1;
                m = m < 10 ? ('0' + m) : m;
                var d = date.getDate();
                d = d < 10 ? ('0' + d) : d;
                var h = date.getHours();
                h = h < 10 ? ('0' + h) : h;
                var minute = date.getMinutes();
                minute = minute < 10 ? ('0' + minute) : minute;
                var second = date.getSeconds();
                second = second < 10 ? ('0' + second) : second;
                return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second
            },
            // 今日功率预测
            getPowerPrediction() {
                let that = this
                apiGetPowerPrediction().then(datas => {
                    if (datas && datas.data) {
                        let xAxis = []
                        let series = []
                        let legend = []
                        if (datas.data.dateList.length > 0) {
                            datas.data.dateList.forEach(item => {
                                xAxis.push(item.substring(item.indexOf(' ') + 1))
                            })
                        }
                        if (datas.data.dataFormatList.length > 0) {
                            datas.data.dataFormatList.forEach(iten => {
                                if (iten.name !== '短期') {
                                    legend.push(iten.name)
                                    let seriesObj = {
                                        name: iten.name,
                                        type: 'line',
                                        data: iten.data.map(it => {
                                            return that.$utils.isHasNum(it)
                                        }),
                                        symbol: 'none'
                                    }
                                    series.push(seriesObj)
                                }
                            })
                        }
                        that.getPowerLine('lineChart', '今日功率预测', xAxis, legend, series)
                    }
                })
            },
            // 今日风速预测
            getWindSpeed(type) {
                let that = this
                if (type === '风速') {
                    apiGetWindSpeed().then(datas => {
                        that.handleWindSunData(datas, type)
                    })
                } else {
                    apiGetirradianceForecast().then(datas => {
                        that.handleWindSunData(datas, type)
                    })
                }
            },
            //处理风速和辐照度数据
            handleWindSunData(datas, type) {
                if (datas && datas.data) {
                    let xAxis = []
                    let series = []
                    let legend = []
                    if (datas.data.dateList.length > 0) {
                        datas.data.dateList.forEach(item => {
                            xAxis.push(item.substring(item.indexOf(' ') + 1))
                        })
                    }
                    if (datas.data.dataFormatList.length > 0) {
                        datas.data.dataFormatList.forEach(iten => {
                            legend.push(iten.name)
                            let seriesObj = {
                                name: iten.name,
                                type: 'line',
                                data: iten.data.map(it => {
                                    return this.$utils.isHasNum(it)
                                }),
                                symbol: 'none'
                            }
                            series.push(seriesObj)
                        })
                    }
                    this.getPowerLine('lineChart1', type === '风速' ? '今日风速预测' : '今日辐照度预测', xAxis, legend, series)
                }
            },
            getPowerLine(name, title, xAxis, legend, series) {
                let option = {
                    title: {
                        text: title,
                        textStyle: {
                            fontSize: '16',
                            fontWeight: 'bold'
                        }
                    },
                    tooltip: {
                        trigger: 'axis',
                        formatter: name === 'lineChart' ? (item) => {
                            let str =
                                `<span style="display:inline-block;margin-bottom: 5px">${item[0].axisValue}</span></br>`
                            let strMsg = ''
                            item.forEach((it, index) => {
                                if (index !== 3) {
                                    strMsg = `<div style="margin-bottom: 5px">
                                    <span style="display:inline-block;margin-right:4px;margin-top:3px;border-radius:10px;width:10px;height:10px;background-color:${it.color};\"></span>&nbsp;
                                    <span style="display:inline-block;">${it.seriesName}:</span>&nbsp;&nbsp;<span>${it.value}</span>
                                        </div>`

                                    this.showpowerLegend[index].name = it.seriesName
                                    this.showpowerLegend[index].color = it.color
                                } else {
                                    if (it.axisValue === '00:15:00') {
                                        it.color = '#e96366'
                                    }
                                    strMsg = `<div style="margin-bottom: 5px">
                                    <span style="display:inline-block;margin-right:4px;margin-top:3px;border-radius:10px;width:10px;height:10px;background-color:${it.color};\"></span>&nbsp;
                                    <span style="display:inline-block;">${it.color === '#e96366' ? '超短期' : '短期'}:</span>&nbsp;&nbsp;<span>${it.value}</span>
                                        </div>`
                                    if (it.color === '#e96366') {
                                        this.showpowerLegend[index].name = '超短期'
                                    } else {
                                        this.showpowerLegend[index].name = '短期'
                                    }
                                    this.showpowerLegend[index].color = it.color
                                }
                                str = str + strMsg
                            })
                            return str
                        } : ''
                    },
                    // axisPointer: {
                    //     link: {
                    //         xAxisIndex: 'all'
                    //     },
                    //     label: {
                    //         formatter: (params) =>{
                    //             // debugger
                    //             this.lengedObj = params.seriesData[3]
                    //             console.log('lengedObj======>>>>', this.lengedObj)
                    //             if (this.lengedObj.color !== '#39ccd9') {
                    //                 option.legend.data = legend
                    //             } else {
                    //                 legend.forEach(it =>{
                    //                     if (it === '超短期') {
                    //                         it = '短期'
                    //                     }
                    //                 })
                    //                 option.legend.data = legend
                    //             }
                    //         }
                    //     }
                    // },
                    legend: {
                        right: '20',
                        data: legend,
                        // show: name === 'lineChart' ? false : true
                        show: false
                        // formatter: name === 'lineChart' ? (name, type) => {
                        //     // debugger
                        //     if (!type) {
                        //         switch (name) {
                        //             case '超短期':
                        //                 return this.lengedObj.seriesName ? this.lengedObj.seriesName : name
                        //                 break;
                        //             default:
                        //                 return name
                        //         }
                        //     } else {
                        //         let datalen = []
                        //         name.seriesData.forEach(it =>{
                        //             if (it.color === '#39ccd9') {
                        //                 it.seriesName = '短期'
                        //             }
                        //             datalen.push(it.seriesName)
                        //         })
                        //         return datalen
                        //     }
                        // } : ''
                    },
                    grid: {
                        left: '5%',
                        right: '5%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: xAxis
                    },
                    yAxis: {
                        type: 'value',
                        name: title === '今日功率预测' ? '兆瓦(Mw)' : title === '今日风速预测' ? 'm/s' : 'W/㎡'
                    },
                    series: series
                };
                if (!this.theme) {
                    option.backgroundColor = ''
                }
                if (name === 'lineChart') {
                    let hour = new Date().getHours() + 6
                    let min = new Date().getMinutes()
                    let allTime = ''
                    let num = 0
                    if (0 <= min && min < 15) {
                        allTime = hour + ':00:00'
                    } else if (15 <= min && min < 30) {
                        allTime = hour + ':15:00'
                    } else if (30 <= min && min < 45) {
                        allTime = hour + ':30:00'
                    } else if (45 <= min && min < 60) {
                        allTime = hour + ':45:00'
                    }
                    xAxis.forEach((item, index) => {
                        if (item === allTime) {
                            num = index
                        }
                    })
                    if (num > 0) {
                        option.visualMap = {
                            show: false,
                            dimension: 0,
                            seriesIndex: 3,

                            pieces: [{
                                    gt: 0,
                                    lte: num,
                                    color: '#e96366'
                                },
                                {
                                    gt: num,
                                    color: '#39ccd9'
                                }
                            ]
                        }
                    }
                } else {
                    option.legend.show = true
                    option.data = legend
                    option.right = '20'
                }
                // 基于准备好的dom，初始化echarts实例
                let dom = document.getElementById(name);
                dom.removeAttribute("_echarts_instance_") ? dom.removeAttribute("_echarts_instance_") : ''
                let myChart = this.$echarts.init(dom, this.echartsTheme);
                myChart.setOption(option);
                myChart.on('mousemove', this.setTooltip('lineChart', 'lineChart1', this.windShow ? 3 : 0))
                window.addEventListener("resize", function () {
                    myChart.resize()
                })
            },
            setTooltip(name1, name2, num) {
                const myChart1 = this.$echarts.init(document.getElementById(name1), this.echartsTheme)
                const myChart2 = this.$echarts.init(document.getElementById(name2), this.echartsTheme)
                this.$utils.setTooltip(myChart1, myChart2, num)
            },
            // 装机，并网，实时，可用电量
            getCapacity() {
                let that = this
                apiGetCapacity().then(datas => {
                    if (datas && datas.data) {
                        let xAxis = []
                        let series = []
                        let legend = []
                        if (datas.data.name.length > 0) {
                            datas.data.name.forEach(item => {
                                let XaObj = {
                                    value: item,
                                    textStyle: {
                                        width: 100,
                                        height: 25,
                                        backgroundColor: '#edeffb',
                                        color: '#36348e',
                                        borderRadius: 10,
                                        align: 'center',
                                        verticalAlign: 'middle'
                                    }
                                }
                                xAxis.push(XaObj)
                            })
                        }
                        if (datas.data.dataFormatList.length > 0) {
                            datas.data.dataFormatList.forEach((iten, index) => {
                                legend.push(iten.name)
                                let seriesObj = {
                                    name: iten.name,
                                    type: 'bar',
                                    barGap: 0,
                                    emphasis: {
                                        focus: 'series'
                                    },
                                    data: iten.data.map(it => {
                                        return that.$utils.isHasNum(it)
                                    }),
                                    // itemStyle:{
                                    //     normal: {
                                    //         color: color[index]
                                    //     }
                                    // }
                                }
                                series.push(seriesObj)
                            })
                        }
                        that.getPowerBar('barChart', '功率统计', xAxis, legend, series)
                    }
                })
            },
            // 预测考核分数
            getAssessmentScore(type) {
                let that = this
                let params = {
                    statisticType: type
                }
                apiGetAssessmentScore(params).then(datas => {
                    if (datas && datas.data) {
                        let xAxis = []
                        let series = []
                        let legend = []
                        if (datas.data.name.length > 0) {
                            datas.data.name.forEach(item => {
                                let XaObj = {
                                    value: item,
                                    textStyle: {
                                        width: 100,
                                        height: 25,
                                        backgroundColor: '#edeffb',
                                        color: '#36348e',
                                        borderRadius: 10,
                                        align: 'center',
                                        verticalAlign: 'middle'
                                    }
                                }
                                xAxis.push(XaObj)
                            })
                        }
                        if (datas.data.dataFormatList.length > 0) {
                            datas.data.dataFormatList.forEach((iten, index) => {
                                legend.push(iten.name)
                                let seriesObj = {
                                    name: iten.name,
                                    type: 'bar',
                                    barGap: 0,
                                    emphasis: {
                                        focus: 'series'
                                    },
                                    data: iten.data.map(it => {
                                        return that.$utils.isHasNum(it)
                                    }),
                                }
                                series.push(seriesObj)
                            })
                        }
                        that.getPowerBar('barChart1', '预测考核分数', xAxis, legend, series)
                    }
                })
            },
            getPowerBar(name, title, xAxis, legend, series) {
                let option = {
                    title: {
                        text: title,
                        textStyle: {
                            fontSize: '16',
                            fontWeight: 'bold'
                        }
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {
                        right: '20',
                        data: title === '功率统计' ? legend : []
                    },
                    grid: {
                        left: '1%',
                        right: '5%',
                        bottom: '2%',
                        containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            margin: 18
                        },
                        data: xAxis
                    }],
                    yAxis: [{
                        type: 'value',
                        name: title === '预测考核分数' ? '分' : '兆瓦(M/w)'
                    }],
                    series: series
                };
                if (!this.theme) {
                    option.backgroundColor = ''
                }
                if (title === '预测考核分数') {
                    option.grid.height = '70%'
                    option.legend.width = '100%'
                    option.legend.top = 25
                } else {
                    option.legend.right = '20'
                }
                // 基于准备好的dom，初始化echarts实例
                let dom = document.getElementById(name);
                dom.removeAttribute("_echarts_instance_") ? dom.removeAttribute("_echarts_instance_") : ''
                let myChart = this.$echarts.init(dom, this.echartsTheme);
                myChart.setOption(option);
                window.addEventListener("resize", function () {
                    myChart.resize()
                })
            }
        }
    }
</script>

<style lang="less" scoped>
    @import '../../viewsCss/homePageNoMapLess.less';

    .themeDark {

        .windStstus,
        .homePage_main {
            background: #040c0b;
        }

        .homePage_main {

            .mainLeft,
            .mainRight {
                .lineStyle {
                    background: #161f1e;
                }
            }

            .mainRight {
                .messageData {
                    background: #161f1e;

                    p {
                        color: #fff;
                    }

                    .msgHeight {

                        .stationSty,
                        .msgSty {
                            color: #fff;
                        }
                    }
                }
            }
        }
    }

    .themeLight {
        .windStstus {
            background: linear-gradient(0deg, transparent, #373590);
        }

        .homePage_main {
            background: #edeffb;

            .mainLeft,
            .mainRight {
                .lineStyle {
                    background: #fff;
                }
            }

            .mainRight {
                .messageData {
                    background: #fff;

                    p {
                        color: #000;
                    }

                    .msgHeight {

                        .stationSty,
                        .msgSty {
                            color: #000;
                        }
                    }
                }
            }
        }
    }
</style>