windLifecontrolPro/src/views/powerPrediction/powerPredictionPage.vue

<template>
    <div class="powerPredictionPage" :class="!theme ? 'themeDark' : 'themeLight'">
        <el-row class="windStstus">
            <el-col :span="6" class="scrollbar">
                <!-- <span class="scrollbarName">场站名称：</span> -->
                <div class="seachPower">
                    <el-form class="generat-seach" :inline="true">
                        <el-form-item label="场站">
                            <el-select v-model="reportStation" placeholder="选择场站" @change="changeWindNo">
                                <el-option v-for="item in stationData" :key="item.no" :label="item.stationName"
                                    :value="item.no">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="seachData">查询</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <!-- <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="17">
                <div class="everyOne" v-for="(item, index) in !theme ? statusData : statusDataW" :key="index"
                    :style="statusSty(item)">
                    <div class="everyOneImg" style="width: 39px">
                        <img :src="item.img" alt="" />
                    </div>
                    <span class="statusName"
                        :style="{ color: `${!theme ? item.borderSty : '#fff'}` }">{{ item.name }}</span>
                    <span class="statusNum" :style="statusNumSty(item)">{{
            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('功率预测')" style="position: relative">
                        <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 class="chart-name">
                            <div class="point point-left bottom"></div>
                            <div class="point point-right bottom"></div>
                        </div>
                        <div id="powerChart" :style="chartStyle"></div>
                    </div>
                    <div class="lineStyle" v-on:dblclick="doubleclick('风速预测')" style="position: relative">
                        <div class="chart-name">
                            <div class="point point-left bottom"></div>
                            <div class="point point-right bottom"></div>
                        </div>
                        <div id="windChart" :style="chartStyle"></div>
                    </div>
                    <div class="lineStyle" style="position: relative">
                        <div class="chart-name">
                            <div class="point point-left bottom"></div>
                            <div class="point point-right bottom"></div>
                        </div>
                        <div id="assessmentChart" :style="chartStyle"></div>
                    </div>
                </el-col>
                <el-col :span="10">
                    <div class="lineStyle1" style="position: relative">
                        <div class="chart-name">
                            <div class="point point-left bottom"></div>
                            <div class="point point-right bottom"></div>
                        </div>
                        <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/yunxing.png";
    import twoimg from "@/assets/windStatusPic/daiji.png";
    import threeimg from "@/assets/windStatusPic/weihu.png";
    import fourimg from "@/assets/windStatusPic/tingji.png";
    import fiveimg from "@/assets/windStatusPic/xiandian.png";
    import siximg from "@/assets/windStatusPic/shoulei.png";
    import sevenimg from "@/assets/windStatusPic/guzhang.png";
    import oneimg1 from "@/assets/windStatusPic/yunxing_W.png";
    import twoimg1 from "@/assets/windStatusPic/daiji_W.png";
    import threeimg1 from "@/assets/windStatusPic/weihu_W.png";
    import fourimg1 from "@/assets/windStatusPic/tingji_W.png";
    import fiveimg1 from "@/assets/windStatusPic/xiandian_W.png";
    import siximg1 from "@/assets/windStatusPic/shoulei_W.png";
    import sevenimg1 from "@/assets/windStatusPic/guzhang_W.png";

    import jsonData from "./component/power.json";
    import {
        apiGethomeData
    } from "@/api/gengra";
    export default {
        components: {
            powerPredictionDialog,
        },
        data() {
            return {
                windTurbines: "",
                reportStation: "",
                stationCode: "",
                statusData: [],
                statusDataW: [],
                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: "yxsum",
                    borderSty: "#1C99FF",
                    backSty: "#0046C7",
                    numBack: "#212223",
                    number: 0,
                },
                {
                    img: twoimg,
                    name: "待机",
                    nameEn: "djsum",
                    borderSty: "#05BB4C",
                    backSty: "#258952",
                    numBack: "#212223",
                    number: 0,
                },
                {
                    img: sevenimg,
                    name: "故障",
                    nameEn: "jxsum",
                    borderSty: "#BA3237",
                    backSty: "#73262B",
                    numBack: "#212223",
                    number: 0,
                },
                {
                    img: threeimg,
                    name: "维护",
                    nameEn: "whsum",
                    borderSty: "#E17D24",
                    backSty: "#694119",
                    numBack: "#212223",
                    number: 0,
                },
                {
                    img: fiveimg,
                    name: "限电",
                    nameEn: "xdsum",
                    borderSty: "#C530C8",
                    backSty: "#7A277F",
                    numBack: "#212223",
                    number: 0,
                },
                {
                    img: siximg,
                    name: "受累",
                    nameEn: "tjsum",
                    borderSty: "#fff",
                    backSty: "#38393B",
                    numBack: "#212223",
                    number: 0,
                },
                {
                    img: fourimg,
                    name: "离线",
                    nameEn: "lxsum",
                    borderSty: "#52595B",
                    backSty: "#272a2b",
                    numBack: "#212223",
                    number: 0,
                },
            ];
            this.statusDataW = [{
                    img: oneimg1,
                    name: "运行",
                    nameEn: "yxsum",
                    borderSty: "#3777E8",
                    backSty: "#1850B3",
                    numBack: "#073484",
                    number: 0,
                },
                {
                    img: twoimg1,
                    name: "待机",
                    nameEn: "djsum",
                    borderSty: "#6BDB97",
                    backSty: "#0EAC4C",
                    numBack: "#077C35",
                    number: 0,
                },
                {
                    img: sevenimg1,
                    name: "故障",
                    nameEn: "jxsum",
                    borderSty: "#73262B",
                    backSty: "#BA3237",
                    numBack: "#881B1F",
                    number: 0,
                },
                {
                    img: threeimg1,
                    name: "维护",
                    nameEn: "whsum",
                    borderSty: "#F1AF74",
                    backSty: "#E17D24",
                    numBack: "#A6530A",
                    number: 0,
                },
                {
                    img: fiveimg1,
                    name: "限电",
                    nameEn: "xdsum",
                    borderSty: "#E757EA",
                    backSty: "#C530C8",
                    numBack: "#901193",
                    number: 0,
                },
                {
                    img: fourimg1,
                    name: "受累",
                    nameEn: "tjsum",
                    borderSty: "#CDCDCD",
                    backSty: "#A8A8A8",
                    numBack: "#878787",
                    number: 0,
                },
                {
                    img: siximg1,
                    name: "离线",
                    nameEn: "lxsum",
                    borderSty: "#595D61",
                    backSty: "#38393B",
                    numBack: "#151719",
                    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 - 110 + "px",
                };
            },
            chartStyle() {
                let height =
                    (document.documentElement.clientHeight - 100 - 100) / 3 + "px";
                return {
                    width: "100%",
                    height: height,
                };
            },
            messageStyle() {
                let height =
                    (document.documentElement.clientHeight - 100 - 100) / 3 + "px";
                return {
                    width: "96%",
                    height: height,
                };
            },
            messageStylexc() {
                let height =
                    ((document.documentElement.clientHeight - 100 - 60) / 3) * 2 + "px";
                return {
                    width: "96%",
                    height: height,
                };
            },
        },
        mounted() {
            let that = this;
            that.initPageData();
            that.planFiveMin = setInterval(function () {
                // that.seachData();
            }, 300000);
        },
        beforeRouteLeave(to, from, next) {
            next();
            if (this.planFiveMin) {
                clearInterval(this.planFiveMin);
                this.planFiveMin = null;
            }
        },
        methods: {
            initPageData() {
                const that = this;

                {
                    let xAxis = [];
                    let series = [];
                    let legend = [];
                    jsonData.globalPowerPredictionChartData2.dateList.forEach((item) => {
                        xAxis.push(item.substring(item.indexOf(" ") + 1));
                    });

                    jsonData.globalPowerPredictionChartData2.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("powerChart", "功率预测", xAxis, legend, series);
                }

                {
                    let xAxis = [];
                    let series = [];
                    let legend = [];
                    jsonData.globalWindSpeedForecastChartData.dateList.forEach((item) => {
                        xAxis.push(item.substring(item.indexOf(" ") + 1));
                    });
                    jsonData.globalWindSpeedForecastChartData.dataFormatList.forEach(
                        (iten) => {
                            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("windChart", "风速预测", xAxis, legend, series);
                }

                {
                    let xAxis = [];
                    let series = [];
                    let legend = [];
                    jsonData.installedCapacityData.name.forEach((item) => {
                        xAxis.push(item);
                    });
                    jsonData.installedCapacityData.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("installChart", "功率统计", xAxis, legend, series);
                }

                {
                    let xAxis = [];
                    let series = [];
                    let legend = [];
                    jsonData.predictedAssessmentScoresData.name.forEach((item) => {
                        xAxis.push(item);
                    });
                    jsonData.predictedAssessmentScoresData.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(
                        "assessmentChart",
                        "预测考核分数",
                        xAxis,
                        legend,
                        series
                    );
                }

                {
                    // let radar = [];
                    // let radaxr = [0, 45, 90, 135, 180, 225, 270, 315, 360];
                    // let serise = [{
                    //         value: [],
                    //         name: "实际风向",
                    //     },
                    //     {
                    //         value: [],
                    //         name: "预测风向",
                    //     },
                    // ];
                    // jsonData.windRosetteChartData.dataFormatList[0].data.forEach(
                    //     (item, index) => {
                    //         if (radaxr.indexOf((index + 1) * 5) !== -1) {
                    //             let obj = {
                    //                 name: (index + 1) * 5,
                    //             };
                    //             radar.unshift(obj);
                    //         }
                    //     }
                    // );
                    // jsonData.windRosetteChartData.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 = "西北";
                    //     }
                    // });
                    let serise = []
                    jsonData.meteorologicalElementsData.dataFormatList.forEach(it => {
                        if (it.name === '风向') {
                            serise = it.data
                        }

                    })
                    that.getRose(serise);
                }

                const gaugeData = [{
                        title: {
                            offsetCenter: ["-40%", "85%"],
                        },
                        detail: {
                            offsetCenter: ["-40%", "110%"],
                        },
                    },
                    {
                        title: {
                            offsetCenter: ["40%", "85%"],
                        },
                        detail: {
                            offsetCenter: ["40%", "110%"],
                        },
                    },
                ];
                jsonData.meteorologicalElementsData.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 === "温度") {
                        that.getGaugeX("guageChart", gaugeData);
                    } else if (item.name === "湿度") {
                        that.getGaugeX("guageChart1", gaugeData);
                    } else {
                        that.getGaugeX("guageChart2", gaugeData);
                    }
                });

                that.statusData.forEach((item) => {
                    for (let it in jsonData.unitStatusInfoByStationNoData) {
                        if (item.nameEn === it) {
                            item.number = jsonData.unitStatusInfoByStationNoData[it];
                        }
                    }
                });
                that.statusDataW.forEach((item) => {
                    for (let it in jsonData.unitStatusInfoByStationNoData) {
                        if (item.nameEn === it) {
                            item.number = jsonData.unitStatusInfoByStationNoData[it];
                        }
                    }
                });
            },
            statusSty(item) {
                return `border: 1px solid ${item.borderSty};background: ${item.backSty}`;
            },
            statusNumSty(item) {
                return `border: 1px solid ${item.borderSty};background:${item.numBack}`;
            },
            doubleclick(name) {
                let title = this.reportStation;
                // debugger
                // this.stationData.forEach((item) => {
                //     if (item.stationName === 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.reportStation = datas.data.list[0].stationName;
                    this.stationCode = datas.data.list[0].stationCode;
                    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];
                //                     }
                //                 }
                //             });
                //             that.statusDataW.forEach((item) => {
                //                 for (let it in datas.data) {
                //                     if (item.nameEn === it) {
                //                         item.number = datas.data[it];
                //                     }
                //                 }
                //             });
                //         }
                //     }
                // });
                let params = {
                    wpId: this.stationCode,
                };
                apiGethomeData(params)
                    .then((res) => {
                        if (res && res.data.ztmap) {
                            that.statusData.forEach((item) => {
                                for (let it in res.data.ztmap) {
                                    if (item.nameEn === it) {
                                        item.number = res.data.ztmap[it];
                                    }
                                }
                            });
                            that.statusDataW.forEach((item) => {
                                for (let it in res.data.ztmap) {
                                    if (item.nameEn === it) {
                                        item.number = res.data.ztmap[it];
                                    }
                                }
                            });
                        }
                    })
            },
            changeWindNo(val) {
                this.windTurbines = val
                this.stationData.forEach((item) => {
                    if (item.no === val) {
                        this.stationCode = item.stationCode
                        this.reportStation = item.stationName;
                    }
                });
            },
            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 = 2;
                // 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: 0
                };
                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 = "";
                                if (item.length > 1) {
                                    item.forEach((it, index) => {
                                        // if (index !== 3) {
                                        if (it.seriesName !== "超短期") {
                                            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;
                                    });
                                } else {
                                    if (item[0].axisValue === "00:15:00") {
                                        item[0].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:${
                                        item[0].color
                                    };\"></span>&nbsp;
                                    <span style="display:inline-block;">${
                                        item[0].color === "#e96366" ? "超短期" : "短期"
                                    }:</span>&nbsp;&nbsp;<span>${item[0].value}</span>
                                        </div>`;
                                    if (item[0].color === "#e96366") {
                                        this.showpowerLegend[3].name = "超短期";
                                    } else {
                                        this.showpowerLegend[3].name = "短期";
                                    }
                                    this.showpowerLegend[3].color = item[0].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) => {
                    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) => {
                    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 if (item.name === '风向') {
                                this.getRose(item.data);
                            } 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) => {
                    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 = "西北";
                        //     }
                        // });
                        let serise = []
                        datas.data.dataFormatList.forEach(it => {
                            if (it.name === '风向') {
                                serise = it.data
                            }

                        })
                        console.log("风向", datas.data.dataFormatList)
                        this.getRose(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();
                });
            },
            getRose(serise) {
                let option = {
                    backgroundColor: '',
                    polar: {
                        radius: [10, '80%']
                    },
                    radiusAxis: {
                        // max: 25,
                        startAngle: 75
                    },
                    angleAxis: {
                        type: 'category',
                        data: ["北", "东北", "东", "东南", "南", "西南", "西", "西北"],
                        boundaryGap: false,
                        axisLabel: {
                            show: true,
                            interval: 0,
                            formatter: '{value}',
                            align: 'center',
                            margin: 10
                        },
                        axisTick: {
                            show: true,
                            alignWithLabel: true
                        }
                    },
                    tooltip: {},
                    series: [{
                            name: '实际',
                            type: 'bar',
                            data: serise[1],
                            coordinateSystem: 'polar',
                            barWidth: 15
                        },
                        {
                            name: '预测',
                            type: 'bar',
                            data: serise[0],
                            coordinateSystem: 'polar',
                            barWidth: 15
                        }
                    ],
                    animation: false
                };
                // 基于准备好的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;

                .chart-name {
                    display: flex;
                    align-items: center;
                    position: absolute;
                    top: 0;
                    height: 39px;
                    width: 96%;
                    border-bottom: 1px solid rgba(153, 153, 153, 0.5);

                    .point {
                        width: 6px;
                        height: 1px;
                        background-color: #ffffff;
                        position: absolute;

                        &.point-left {
                            left: 0;
                        }

                        &.point-right {
                            right: 0;
                        }

                        &.top {
                            top: -1px;
                        }

                        &.bottom {
                            bottom: -1px;
                        }
                    }
                }
            }
        }
    }

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

        .lineMain {
            background: #edeffb;

            .lineStyle,
            .lineStyle1 {
                background: #fff;
            }
        }
    }
</style>