<template>
    <div class="powerPredictionPage" :class="!theme ? 'themeDark' : 'themeLight'">
        <el-row class="windStstus">
            <el-col :span="11" class="scrollbar">
                <!-- <span class="scrollbarName">场站名称：</span> -->
                <el-scrollbar>
                    <div class="scrollbar-flex-content">
                        <p v-for="item in stationData" :key="item.no" class="scrollbar-demo-item"
                            :class="item.showBac ? 'changeBacksty' : 'defaultBacksty'" @click="changeStation(item.no)">
                            {{ item.stationName }}
                        </p>
                    </div>
                </el-scrollbar>
            </el-col>
            <el-col :span="13">
                <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>
            </el-col>
        </el-row>
        <div class="lineMain" :style="pageHeight">
            <el-row>
                <el-col :span="14">
                    <div class="lineStyle" v-on:dblclick="doubleclick('功率预测')">
                        <div style="display: flex;float: right;justify-content: end;margin-right: 23px;">
                            <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="powerChart" :style="chartStyle"></div>
                    </div>
                    <div class="lineStyle" v-on:dblclick="doubleclick('风速预测')">
                        <div id="windChart" :style="chartStyle"></div>
                    </div>
                    <div class="lineStyle">
                        <div id="assessmentChart" :style="chartStyle"></div>
                    </div>
                </el-col>
                <el-col :span="10">
                    <div class="lineStyle1">
                        <div id="installChart" :style="messageStyle"></div>
                    </div>
                    <div class="lineStyle1" :style="messageStylexc">
                        <div style="display:flex" :style="messageStyle">
                            <div style="width:50%">
                                <div id="guageChart" style="width:100%;height:100%"></div>
                            </div>
                            <div style="width:50%">
                                <div id="radarChart" style="width:100%;height:100%"></div>
                            </div>
                        </div>
                        <div style="display:flex" :style="messageStyle">
                            <div style="width:50%">
                                <div id="guageChart1" style="width:100%;height:100%"></div>
                            </div>
                            <div style="width:50%">
                                <div id="guageChart2" style="width:100%;height:100%"></div>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <power-prediction-dialog ref="prediction" :ExceedTimeList="ExceedTimeList" :echartsTheme="echartsTheme"
            :theme="theme"></power-prediction-dialog>
    </div>
</template>

<script>
    import powerPredictionDialog from '../../components/powerPredictionComponent/powerPredictionDialog/predictionDialogPage.vue'
    import {
        apiGetStationGL,
        apiGetglobalPowerCharts,
        apiGetglobalWindSpeedCharts,
        apiGetinstalledCapacity,
        apiGetpredictedAssessmentScores,
        apiGetmeteorologicalElements,
        apiGetwindRosetteChart,
        apiGetUnitStatusInfoByStationNo
    } from '../../api/api'
    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'
    export default {
        components: {
            powerPredictionDialog
        },
        data() {
            return {
                windTurbines: '',
                statusData: [],
                stationData: [],
                pickerTime: [],
                pickerTimeDia: [],
                itemVal: '',
                planFiveMin: '',
                showpowerLegend: [],
                echartsTheme: '',
                theme: null
            }
        },
        watch: {
            '$store.state.theme': {
                handler: function (newVal, oldVal) {
                    this.theme = newVal
                    this.echartsTheme = !newVal ? 'dark' : ''
                    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)
                    ]
                    this.pickerTimeDia = [
                        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.getStationData()

                },
                immediate: true
            }
        },
        created() {
            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)
            ]
            this.pickerTimeDia = [
                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.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.showpowerLegend = [{
                    name: '理论',
                    color: '#5672c4'
                },
                {
                    name: '可用',
                    color: '#95cc7a'
                },
                {
                    name: 'AGC',
                    color: '#f7c75f'
                },
                {
                    name: '超短期',
                    color: '#e96366'
                },
                {
                    name: '实际',
                    color: '#7ac1dd'
                },
            ]
            this.getStationData()
        },
        computed: {
            pageHeight() {
                return {
                    'height': document.documentElement.clientHeight - 140 + 'px'
                }
            },
            chartStyle() {
                let height = (document.documentElement.clientHeight - 120 - 100) / 3 + 'px'
                return {
                    'width': '100%',
                    'height': height
                }
            },
            messageStyle() {
                let height = (document.documentElement.clientHeight - 120 - 100) / 3 + 'px'
                return {
                    'width': '96%',
                    'height': height
                }
            },
            messageStylexc() {
                let height = (document.documentElement.clientHeight - 120 - 60) / 3 * 2 + 'px'
                return {
                    'width': '96%',
                    'height': height
                }
            }
        },
        mounted() {
            let that = this
            that.planFiveMin = setInterval(function () {
                that.seachData()
            }, 300000)
        },
        beforeRouteLeave(to, from, next) {
            next()
            if (this.planFiveMin) {
                clearInterval(this.planFiveMin);
                this.planFiveMin = null;
            }
        },
        methods: {
            doubleclick(name) {
                let title = ''
                this.stationData.forEach(item => {
                    if (item.no === this.windTurbines) {
                        title = item.stationName
                    }
                })
                this.$refs.prediction.dialogVisible = true
                this.$refs.prediction.isPower = false
                this.$refs.prediction.tableData = []
                this.$refs.prediction.dateType = 1
                this.$refs.prediction.title = title + name
                this.$refs.prediction.loading = true
                this.$refs.prediction.pickerTime = this.pickerTimeDia
                this.$refs.prediction.windTurbines = this.windTurbines
                this.$refs.prediction.windTurbinesVal = this.itemVal
                this.$nextTick(() => {
                    const myChart1 = this.$echarts.init(document.getElementById('powerChart'), this
                        .echartsTheme)
                    const myChart2 = this.$echarts.init(document.getElementById('windChart'), this.echartsTheme)
                    myChart1.dispatchAction({
                        type: 'hideTip'
                    });
                    myChart2.dispatchAction({
                        type: 'hideTip'
                    });
                    if (name === '功率预测') {
                        this.$refs.prediction.isPower = true
                        this.$refs.prediction.getChartsData()
                        this.$refs.prediction.getTableData()
                    } else {
                        this.$refs.prediction.isPower = false
                        this.$refs.prediction.getwindChartsData()
                        this.$refs.prediction.getwindTableData()
                    }
                })
            },
            getStationData() {
                apiGetStationGL().then(datas => {
                    this.stationData = datas.data.list
                    this.stationData[0].showBac = true
                    this.windTurbines = datas.data.list[0].no
                    this.itemVal = datas.data.list[0].itemVal
                    this.getPowerPrediction()
                    this.getWindSpeed()
                    this.getCapacity()
                    this.getAssessmentScore()
                    this.getIrradiance()
                    this.getwindRosetteChart()
                    this.getUnitStatus()
                })
            },
            // 根据场站编号获取机组状态信息
            getUnitStatus() {
                let that = this
                let params = {
                    stationNo: that.windTurbines
                }
                apiGetUnitStatusInfoByStationNo(params).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]
                                    }
                                }
                            })
                        }
                        console.log(datas)
                    }
                })
            },
            changeStation(val) {
                this.windTurbines = val
                this.stationData.forEach(item => {
                    if (item.no === val) {
                        this.itemVal = item.itemVal
                        item.showBac = true
                    } else {
                        item.showBac = false
                    }
                })
                this.seachData()
            },
            statusIcon(type) {
                let picture = ''
                if (type === '1') {
                    picture = 'yunxingPic'
                } else if (type === '2') {
                    picture = 'daijiPic'
                } else if (type === '3') {
                    picture = 'weihuPic'
                } else if (type === '4') {
                    picture = 'tingjiPic'
                } else if (type === '5') {
                    picture = 'xiandianPic'
                } else if (type === '6') {
                    picture = 'lixianPic'
                } else if (type === '7') {
                    picture = 'jianxiuPic'
                }
                return picture
            },
            seachData() {
                this.getPowerPrediction()
                this.getWindSpeed()
                this.getCapacity()
                this.getAssessmentScore()
                this.getwindRosetteChart()
                this.getIrradiance()
                this.getUnitStatus()
            },
            // 今日功率预测
            getPowerPrediction() {
                let pickStartTime = this.$utils.getTime(this.pickerTime[0])
                let pickEndTime = this.$utils.getTime(this.pickerTime[1])
                let type
                if (new Date(pickEndTime).getTime() - new Date(pickStartTime).getTime() <= 10 * 86400000) {
                    type = 1
                } else {
                    type = 2
                }
                let params = {
                    beginDataTime: pickStartTime,
                    endDataTime: pickEndTime,
                    stationNumber: this.windTurbines,
                    timeType: type,
                    // itemVal: this.itemVal,
                    itemVal: 0,
                    leadTime: 7,
                }
                apiGetglobalPowerCharts(params).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 this.$utils.isHasNum(it)
                                        }),
                                        symbol: 'none'
                                    }
                                    series.push(seriesObj)
                                }
                            })
                        }
                        this.getPowerLine('powerChart', '功率预测', xAxis, legend, series)
                    }
                })
            },
            // 今日风速预测
            getWindSpeed() {
                let pickStartTime = this.$utils.getTime(this.pickerTime[0])
                let pickEndTime = this.$utils.getTime(this.pickerTime[1])
                let type
                if (new Date(pickEndTime).getTime() - new Date(pickStartTime).getTime() <= 10 * 86400000) {
                    type = 1
                } else {
                    type = 2
                }
                let params = {
                    beginDataTime: pickStartTime,
                    endDataTime: pickEndTime,
                    stationNumber: this.windTurbines,
                    timeType: type
                }
                apiGetglobalWindSpeedCharts(params).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 => {
                                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('windChart', '风速预测', xAxis, legend, series)
                    }
                })
            },
            getPowerLine(name, title, xAxis, legend, series) {
                let option = {
                    backgroundColor: '',
                    title: {
                        text: title,
                        textStyle: {
                            fontSize: '16',
                            fontWeight: 'bold'
                        }
                    },
                    tooltip: {
                        trigger: 'axis',
                        formatter: name === 'powerChart' ? (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
                        } : ''
                    },
                    legend: {
                        // width: '380',
                        right: '20',
                        data: legend,
                        // show: name === 'powerChart' ? false : true
                        show: false
                    },
                    grid: {
                        left: '5%',
                        right: '5%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: xAxis
                    },
                    yAxis: {
                        type: 'value',
                        name: title === '功率预测' ? '兆瓦(Mw)' : 'm/s'
                    },
                    series: series
                };
                if (name === 'powerChart') {
                    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('powerChart', 'windChart', 0))
                myChart.on('mouseover', function (params) {
                    console.log('myChart1=====>>>>>', params)
                });
                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 params = {
                    stationNumber: this.windTurbines,
                    // itemVal: this.itemVal
                    itemVal: 0
                }
                apiGetinstalledCapacity(params).then(datas => {
                    console.log(datas)
                    if (datas && datas.data) {
                        let xAxis = []
                        let series = []
                        let legend = []
                        if (datas.data.name.length > 0) {
                            datas.data.name.forEach(item => {
                                xAxis.push(item)
                            })
                        }
                        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 this.$utils.isHasNum(it)
                                    }),
                                }
                                series.push(seriesObj)
                            })
                        }
                        this.getPowerBar('installChart', '功率统计', xAxis, legend, series)
                    }
                })
            },
            // 预测考核分数
            getAssessmentScore() {
                let params = {
                    stationNumber: this.windTurbines
                }
                apiGetpredictedAssessmentScores(params).then(datas => {
                    console.log(datas)
                    if (datas && datas.data) {
                        let xAxis = []
                        let series = []
                        let legend = []
                        if (datas.data.name.length > 0) {
                            datas.data.name.forEach(item => {
                                xAxis.push(item)
                            })
                        }
                        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 this.$utils.isHasNum(it)
                                    }),
                                }
                                series.push(seriesObj)
                            })
                        }
                        this.getPowerBar('assessmentChart', '预测考核分数', xAxis, legend, series)
                    }
                })
            },
            getPowerBar(name, title, xAxis, legend, series) {
                let option = {
                    backgroundColor: '',
                    title: {
                        text: title,
                        textStyle: {
                            fontSize: '16',
                            fontWeight: 'bold'
                        }
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '5%',
                        right: '5%',
                        bottom: '3%',
                        containLabel: true
                    },
                    legend: {
                        // bottom: bott,
                        right: '20',
                        data: legend
                    },
                    xAxis: [{
                        type: 'category',
                        axisTick: {
                            show: false
                        },
                        data: xAxis
                    }],
                    yAxis: [{
                        type: 'value',
                        name: title === '预测考核分数' ? '分' : '兆瓦(M/w)'
                    }],
                    series: series
                };
                // 基于准备好的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()
                })
            },
            // 仪表盘，玫瑰图
            getIrradiance() {
                let params = {
                    dateTime: this.getPowerTime(new Date()),
                    stationNumber: this.windTurbines
                }
                apiGetmeteorologicalElements(params).then(datas => {
                    if (datas.data && datas.data.dataFormatList.length > 0) {
                        const gaugeData = [{
                                title: {
                                    offsetCenter: ['-40%', '85%']
                                },
                                detail: {
                                    offsetCenter: ['-40%', '110%']
                                }
                            },
                            {
                                title: {
                                    offsetCenter: ['40%', '85%']
                                },
                                detail: {
                                    offsetCenter: ['40%', '110%']
                                }
                            },
                        ]
                        datas.data.dataFormatList.forEach(item => {
                            gaugeData[0].name = '实际' + item.name
                            gaugeData[0].value = Math.ceil(item.data[1])
                            gaugeData[1].name = '预测' + item.name
                            gaugeData[1].value = Math.ceil(item.data[0])
                            if (item.name === '温度') {
                                this.getGaugeX('guageChart', gaugeData)
                            } else if (item.name === '湿度') {
                                this.getGaugeX('guageChart1', gaugeData)
                            } else {
                                this.getGaugeX('guageChart2', gaugeData)
                            }
                        })
                    }
                })
            },
            //转换时间
            getPowerTime(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; 
                let timeF = ''
                timeF = y + '-' + m + '-' + d + ' ' + h + ':' + minute
                return this.$utils.changePowerPickDate(timeF)
            },
            getGaugeX(name, servies) {
                let formatVal = ''
                let maxNum = null
                let minNum = null
                if (name === 'guageChart') {
                    formatVal = '{value}℃'
                    maxNum = 50
                    minNum = -50
                } else if (name === 'guageChart1') {
                    formatVal = '{value}%'
                    maxNum = 100
                    minNum = 0
                } else {
                    formatVal = '{value}Pa'
                    maxNum = 1500
                    minNum = 0
                }
                let option = {
                    series: [{
                        type: 'gauge',
                        min: minNum,
                        max: maxNum,
                        anchor: {
                            show: true,
                            showAbove: true,
                            size: 18,
                            itemStyle: {
                                color: '#FAC858'
                            }
                        },
                        pointer: {
                            icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
                            width: 8,
                            length: '80%',
                            offsetCenter: [0, '8%']
                        },
                        progress: {
                            show: true,
                            overlap: true,
                            roundCap: true
                        },
                        axisLine: {
                            roundCap: true
                        },
                        data: servies,
                        title: {
                            fontSize: 14
                        },
                        detail: {
                            width: 40,
                            height: 14,
                            fontSize: 14,
                            color: '#fff',
                            backgroundColor: 'auto',
                            borderRadius: 3,
                            formatter: formatVal
                        }
                    }]
                };
                if (!this.theme) {
                    option.backgroundColor = ''
                }
                // 基于准备好的dom，初始化echarts实例
                let dom = document.getElementById(name);
                dom.removeAttribute("_echarts_instance_") ? dom.removeAttribute("_echarts_instance_") : ''
                let myChart = this.$echarts.init(dom, this.echartsTheme);
                // let that = this
                // setInterval(function () {
                //     that.getIrradiance()
                // }, 2000);
                myChart.setOption(option);
                window.addEventListener("resize", function () {
                    myChart.resize()
                })
            },
            //风向玫瑰图
            getwindRosetteChart() {
                let params = {
                    stationNumber: this.windTurbines
                }
                apiGetwindRosetteChart(params).then(datas => {
                    console.log(datas)
                    if (datas && datas.data) {
                        let radar = []
                        let radaxr = [0, 45, 90, 135, 180, 225, 270, 315, 360]
                        let serise = [{
                                value: [],
                                name: '实际风向'
                            },
                            {
                                value: [],
                                name: '预测风向'
                            }
                        ]
                        datas.data.dataFormatList[0].data.forEach((item, index) => {
                            if (radaxr.indexOf((index + 1) * 5) !== -1) {
                                let obj = {
                                    name: (index + 1) * 5
                                }
                                radar.unshift(obj)
                            }
                        })
                        datas.data.dataFormatList.forEach(itn => {
                            let ser1 = []
                            let ser2 = []
                            if (itn.name === '预测风速') {
                                itn.data.forEach((it, index) => {
                                    if (radaxr.indexOf((index + 1) * 5) !== -1) {
                                        ser1.unshift(it && it !== 0 ? it.toFixed(1) : 0)
                                    }
                                })
                                serise[1].value = ser1
                            } else {
                                itn.data.forEach((it, index) => {
                                    if (radaxr.indexOf((index + 1) * 5) !== -1) {
                                        ser2.unshift(it && it !== 0 ? it.toFixed(1) : 0)
                                    }
                                })
                                serise[0].value = ser2
                            }
                        })
                        radar.forEach(itb => {
                            if (itb.name === 360) {
                                itb.name = '北'
                            } else if (itb.name === 45) {
                                itb.name = '东北'
                            } else if (itb.name === 90) {
                                itb.name = '东'
                            } else if (itb.name === 135) {
                                itb.name = '东南'
                            } else if (itb.name === 180) {
                                itb.name = '南'
                            } else if (itb.name === 225) {
                                itb.name = '西南'
                            } else if (itb.name === 270) {
                                itb.name = '西'
                            } else if (itb.name === 315) {
                                itb.name = '西北'
                            }
                        })
                        this.getRadar(radar, serise)
                    }
                })
            },
            getRadar(radar, serise) {
                let option = {
                    backgroundColor: '',
                    legend: {
                        bottom: '-5',
                        data: ['实际', '预测']
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: (item) => {
                            let str =
                                `<span style="display:inline-block;margin-bottom:5px;">${item.name}(风向: 风速)</span></br>`
                            let strMsg = ''
                            radar.forEach((it, index) => {
                                strMsg = `<div>
                                <span style="display:inline-block;margin-right:4px;margin-top:3px;border-radius:10px;width:10px;height:10px;background-color:${item.color};\"></span>&nbsp;
                                <span style="display:inline-block;width: 55%">${it.name}:</span>&nbsp;&nbsp;<span>${item.data.value[index]}</span>
                                    </div>`
                                str = str + strMsg
                            })
                            return str
                        }
                    },
                    radar: {
                        // shape: 'circle',
                        indicator: radar
                    },
                    series: [{
                        type: 'radar',
                        data: serise
                    }]
                }
                // 基于准备好的dom，初始化echarts实例
                let dom = document.getElementById('radarChart');
                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/powerPredictionPageLess.less';

    .themeDark {

        .windStstus {
            background: #040c0b;
        }

        .lineMain {
            background: #040c0b;

            .lineStyle,
            .lineStyle1 {
                background: #161f1e;
            }
        }


    }

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

        .lineMain {
            background: #edeffb;

            .lineStyle,
            .lineStyle1 {
                background: #fff;
            }
        }

    }
</style>