windLifecontrolPro/src/views/powerPrediction/homePageNoMap.vue

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

<script>
    import {
        apiGetStationGL,
        apiGetPowerPrediction,
        apiGetWindSpeed,
        apiGetCapacity,
        apiGetAssessmentScore,
        apiGetEarlyWarningInfo,
        apiGetallWeatherInfo,
        apiGetirradianceForecast,
        apiGetStatusInfoAll,
        apiGetinsertLoginInformation,
        apiGetpersonalInformation,
        apiGetsinglePointToLogin,
    } from "@/api/api";
    import globalDialog from "@/components/powerPredictionComponent/homePageAssembly/globalDialogPage.vue";
    import weatherDetail from "@/components/powerPredictionComponent/homePageAssembly/weatherDetail.vue";
    //状态图片
    import oneimg from "@/assets/windStatusPic/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 redImg from "@/assets/windStatusPic/red.png";
    import greenImg from "@/assets/windStatusPic/green.png";
    import yellowImg from "@/assets/windStatusPic/yellow.png";
    import timeImg from "@/assets/windStatusPic/time.png";
    import timeImg1 from "@/assets/windStatusPic/time1.png";
    //大风预警图片
    import windBlue from "@/assets/weather/windBlue.png";
    import windYellow from "@/assets/weather/windYellow.png";
    import windOrange from "@/assets/weather/windOrange.png";
    import windRed from "@/assets/weather/windRed.png";
    //暴雨预警图片
    import rainBlue from "@/assets/weather/rainBlue.png";
    import rainYellow from "@/assets/weather/rainYellow.png";
    import rainOrange from "@/assets/weather/rainOrange.png";
    import rainRed from "@/assets/weather/rainRed.png";
    //雷电预警图片
    import thunderYellow from "@/assets/weather/thunderYellow.png";
    import thunderOrange from "@/assets/weather/thunderOrange.png";
    import thunderRed from "@/assets/weather/thunderRed.png";
    //暴雪预警图片
    import snowBlue from "@/assets/weather/snowBlue.png";
    import snowYellow from "@/assets/weather/snowYellow.png";
    import snowOrange from "@/assets/weather/snowOrange.png";
    import snowRed from "@/assets/weather/snowRed.png";
    //正常天气
    import sunshine from "@/assets/weather/sunshine.png";
    import overcast from "@/assets/weather/overcast.png";
    import cloudy from "@/assets/weather/cloudy.png";
    import rain from "@/assets/weather/rain.png";
    import snow from "@/assets/weather/snow.png";
    import thunder from "@/assets/weather/thunder.png";

    import {
        setToken
    } from "@/utils/auth";

    import jsonData from "./component/homePageNoMap.json";

    import {
        apiGethomeData
    } from "@/api/gengra";
    export default {
        components: {
            // commonHeader,
            // twopointfiveEcharts,
            globalDialog,
            weatherDetail,
        },
        data() {
            return {
                statusTimer: "",
                statusData: [],
                statusDataW: [],
                planFiveMin: "",
                currentTime: "",
                warningData: [],
                extremeWeather: [],
                messageDataxc: [],
                messageDataAll: [],
                ExceedTimeList: [],
                stationData: [],
                pickerTime: [],
                bodyHeight: document.documentElement.clientHeight - 60 + "px",
                isreload: true,
                dayShow: true,
                monthShow: false,
                yearShow: false,
                windShow: true,
                sunShow: false,
                showpowerLegend: [],
                echartsTheme: "",
                theme: null,
                redImg: redImg,
                greenImg: greenImg,
                yellowImg: yellowImg,
                timeImg: timeImg,
                timeImg1: timeImg1,
                wpId: "GJNY_SXGS_DBXNY_ZGS0",
            };
        },
        created() {
            this.warningData = [{
                    name: "通讯预警",
                    nameEn: "txyj",
                    img: "",
                },
                {
                    name: "测风塔预警",
                    nameEn: "cftyj",
                    img: "",
                },
                {
                    name: "风机数据",
                    nameEn: "fjsj",
                    img: "",
                },
                {
                    name: "中国数值气象",
                    nameEn: "zgszqx",
                    img: "",
                },
                {
                    name: "欧洲数值气象",
                    nameEn: "ozszqx",
                    img: "",
                },
            ];
            this.messageDataAll = [{
                    id: 1,
                    name: "大风蓝色预警",
                    color: "#5599ff",
                    img: windBlue,
                    typeName: "windBlue",
                    msg: "未来24小时内，大风蓝色预警。做好防大风工作，关好门窗，加固围板、棚架，行人尽量不骑自行车，防高空坠物。",
                },
                {
                    id: 2,
                    name: "大风黄色预警",
                    color: "#fac858",
                    img: windYellow,
                    typeName: "windYellow",
                    msg: "未来12小时，大风黄色预警。应该停止露天活动和高空作业，切断户外危险电源，注意森林、草原火灾。",
                },
                {
                    id: 3,
                    name: "大风橙色预警",
                    color: "#fc8452",
                    img: windOrange,
                    typeName: "windOrange",
                    msg: "未来6小时大风橙色预警，检修人员减少外出，切断危险电源，注意防高空坠物。",
                },
                {
                    id: 4,
                    name: "大风红色预警",
                    color: "#e73e3e",
                    img: windRed,
                    typeName: "windRed",
                    msg: "未来6小时大风红色预警。应做好防范大风应急工作，工作人员不要随意外出，切断危险电源，设备设施尽快转移到安全地带。",
                },
                {
                    id: 5,
                    name: "暴雨蓝色预警",
                    color: "#5599ff",
                    img: rainBlue,
                    typeName: "rainBlue",
                    msg: "未来12小时内降雨量将达50毫米以上，注意山路湿滑。",
                },
                {
                    id: 6,
                    name: "暴雨黄色预警",
                    color: "#fac858",
                    img: rainYellow,
                    typeName: "rainYellow",
                    msg: "未来6小时内降雨量将达50毫米以上，降雨可能持续，检修人员提前返回场里。",
                },
                {
                    id: 7,
                    name: "暴雨橙色预警",
                    color: "#fc8452",
                    img: rainOrange,
                    typeName: "rainOrange",
                    msg: "未来3小时内降雨量将达50毫米以上，检修人员尽量避免现场工作。",
                },
                {
                    id: 8,
                    name: "暴雨红色预警",
                    color: "#e73e3e",
                    img: rainRed,
                    typeName: "rainRed",
                    msg: "未来3小时内降雨量将达100毫米以上，检修人员尽量避免现场工作或提前返回场里。",
                },
                {
                    id: 9,
                    name: "雷电黄色预警",
                    color: "#fac858",
                    img: thunderYellow,
                    typeName: "thunderYellow",
                    msg: "可能会造成雷电灾害事故，做好防雷工作。密切关注天气变化，尽量避免户外检修工作。",
                },
                {
                    id: 10,
                    name: "雷电橙色预警",
                    color: "#fc8452",
                    img: thunderOrange,
                    typeName: "thunderOrange",
                    msg: "雷电活动影响可能持续，出现雷电灾害事故的可能性比较大。落实防雷应急措施。工作人员避免户外活动，切断危险电源，不要在树下、电杆下、塔吊下避雨。",
                },
                {
                    id: 11,
                    name: "雷电红色预警",
                    color: "#e73e3e",
                    img: thunderRed,
                    typeName: "thunderRed",
                    msg: "未来2小时内有强烈的雷电活动发生，且可能持续，出现雷电灾害事故的可能性非常大。做好防雷应急抢险工作。工作人员躲入室内并关好门窗。切勿接触天线、水管、铁丝网、金属门窗、建筑物外墙，远离电线等带电设备和其他类似金属装置。密切注意雷电预警信息的发布。",
                },
                {
                    id: 12,
                    name: "暴雪蓝色预警",
                    color: "#5599ff",
                    img: snowBlue,
                    typeName: "snowBlue",
                    msg: "交通路面湿滑，可能会影响检修工作。",
                },
                {
                    id: 13,
                    name: "暴雪黄色预警",
                    color: "#fac858",
                    img: snowYellow,
                    typeName: "snowYellow",
                    msg: "交通路面湿滑，可能会影响检修工作。",
                },
                {
                    id: 14,
                    name: "暴雪橙色预警",
                    color: "#fc8452",
                    img: snowOrange,
                    typeName: "snowOrange",
                    msg: "可能影响交通，影响车行，避免坡路打滑。",
                },
                {
                    id: 15,
                    name: "暴雪红色预警",
                    color: "#e73e3e",
                    img: snowRed,
                    typeName: "snowRed",
                    msg: "对交通影响较大，车量出行困难，建议减少非必要出行。",
                },
                // {
                //     id: 16,
                //     type: '冻雨天气预警',
                //     color: '#fc8452',
                //     msg: '未来24小时可能有冻雨气象天气发生，请防范冻雨导致生产受累。'
                // },
                {
                    id: 17,
                    name: "晴天",
                    color: "#3ba272",
                    img: sunshine,
                    typeName: "sunshine",
                    msg: "蓝天真的很温柔，他将那些零零散散的云，都拥入自己的怀里。",
                },
                {
                    id: 18,
                    name: "阴天",
                    color: "#3ba272",
                    img: overcast,
                    typeName: "overcast",
                    msg: "乌云一片接着一片，板着脸走过，不时还传来一两声可怕的怒吼似箭的光，告诉着人们他的厉害。",
                },
                {
                    id: 19,
                    name: "多云",
                    color: "#3ba272",
                    img: cloudy,
                    typeName: "cloudy",
                    msg: "最美的天气，不是下雨天，不是大太阳天，而是多云的阴天，出门淋不着，晒不着。",
                },
                {
                    id: 20,
                    name: "雨天",
                    color: "#3ba272",
                    img: rain,
                    typeName: "rain",
                    msg: "再温柔平和宁静的落雨，也有把人浸透的威力。",
                },
                {
                    id: 21,
                    name: "雪天",
                    color: "#3ba272",
                    img: snow,
                    typeName: "snow",
                    msg: "雪花落入掌心，融化思念，释放温情，雪花落入大地，存储牵挂，诠释纯洁。",
                },
                {
                    id: 22,
                    name: "雷电",
                    color: "#3ba272",
                    img: thunder,
                    typeName: "thunder",
                    msg: "所有的雷声闪电，都是在雷雨云中发生的。",
                },
            ];
            this.ExceedTimeList = [{
                    label: "超前15分钟",
                    value: 0,
                },
                {
                    label: "超前30分钟",
                    value: 1,
                },
                {
                    label: "超前45分钟",
                    value: 2,
                },
                {
                    label: "超前1小时",
                    value: 3,
                },
                {
                    label: "超前1小时15分钟",
                    value: 4,
                },
                {
                    label: "超前1小时30分钟",
                    value: 5,
                },
                {
                    label: "超前1小时45分钟",
                    value: 6,
                },
                {
                    label: "超前2小时",
                    value: 7,
                },
                {
                    label: "超前2小时15分钟",
                    value: 8,
                },
                {
                    label: "超前2小时30分钟",
                    value: 9,
                },
                {
                    label: "超前2小时45分钟",
                    value: 10,
                },
                {
                    label: "超前3小时",
                    value: 11,
                },
                {
                    label: "超前3小时15分钟",
                    value: 12,
                },
                {
                    label: "超前3小时30分钟",
                    value: 13,
                },
                {
                    label: "超前3小时45分钟",
                    value: 14,
                },
                {
                    label: "超前4小时",
                    value: 15,
                },
                {
                    label: "超前5小时",
                    value: 19,
                },
                {
                    label: "超前6小时",
                    value: 23,
                },
            ];
            this.statusData = [{
                    img: oneimg,
                    name: "运行",
                    nameEn: "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 -
                    1000
                ),
            ];
            this.showpowerLegend = [{
                    name: "理论功率",
                    color: "#5672c4",
                },
                {
                    name: "可用功率",
                    color: "#95cc7a",
                },
                {
                    name: "AGC",
                    color: "#f7c75f",
                },
                {
                    name: "超短期",
                    color: "#e96366",
                },
                {
                    name: "实际",
                    color: "#7ac1dd",
                },
            ];
            // if (this.$route.query.markKey) {
            //   this.fromCustom(this.$route.query.userid);
            // }
        },
        computed: {
            pageHeight() {
                return {
                    height: document.documentElement.clientHeight - 115 + "px",
                };
            },
            leftDivStyle() {
                let pageHeight = document.documentElement.clientHeight - 210;
                let heightChart = pageHeight / 2 + "px";
                return {
                    height: heightChart,
                };
            },
            lineChartStyle() {
                let pageHeight = document.documentElement.clientHeight - 210;
                let heightChart = pageHeight / 2 + "px";
                return {
                    width: "98%",
                    height: heightChart,
                };
            },
            barChartStyle() {
                // let pageHeight = document.documentElement.clientHeight-220-240
                let pageHeight = document.documentElement.clientHeight - 260;
                let heightChart = pageHeight / 3 + "px";
                return {
                    width: "100%",
                    height: heightChart,
                };
            },
        },
        watch: {
            "$store.state.theme": {
                handler: function (newVal, oldVal) {
                    this.theme = newVal;
                    this.echartsTheme = !newVal ? "dark" : "";
                    if (oldVal != undefined) {
                        // this.getPowerPrediction();
                        // this.getWindSpeed("风速");
                        // this.getCapacity();
                        // this.getAssessmentScore(0);
                        // this.getAllStationWeather();
                        // this.getWarningInfo();
                        // this.getWindStstus();
                    }
                },
                immediate: true,
            },
        },
        mounted() {
            // this.initPageData();
            this.initPageFn()
        },
        beforeRouteLeave(to, from, next) {
            next();
            if (this.statusTimer) {
                clearInterval(this.statusTimer);
                this.statusTimer = null;
            }
            if (this.planFiveMin) {
                clearInterval(this.planFiveMin);
                this.planFiveMin = null;
            }
        },
        methods: {
            initPageFn() {
                this.getPowerPrediction();
                this.getWindSpeed("风速");
                this.getCapacity();
                this.getAssessmentScore(0);
                this.getAllStationWeather();
                this.getWarningInfo();
                this.getWindStstus();
                this.getStationData()
            },
            initPageData() {
                if (!this.$route.query.markKey) {
                    let that = this;
                    this.stationData = jsonData.glStationsAllData.list;
                    that.statusTimer = setInterval(function () {
                        that.currentTime = that.changeDate(new Date());
                    }, 1000);

                    {
                        let xAxis = [];
                        let series = [];
                        let legend = [];
                        jsonData.todayPowerForecastData.dateList.forEach((item) => {
                            xAxis.push(item.substring(item.indexOf(" ") + 1));
                        });
                        jsonData.todayPowerForecastData.dataFormatList.forEach((iten) => {
                            if (iten.name !== "短期") {
                                legend.push(iten.name);
                                let seriesObj = {
                                    name: iten.name,
                                    type: "line",
                                    data: iten.data.map((it) => {
                                        return that.$utils.isHasNum(it);
                                    }),
                                    symbol: "none",
                                };
                                series.push(seriesObj);
                            }
                        });
                        that.getPowerLine("lineChart", "今日功率预测", xAxis, legend, series);
                    }

                    that.handleWindSunData({
                            data: jsonData.todayWindSpeedForecastData
                        },
                        "风速"
                    );

                    // that.handleWindSunData(
                    //   { data: jsonData.todayIrradianceForecastData },
                    //   "辐照度"
                    // );

                    {
                        let xAxis = [];
                        let series = [];
                        let legend = [];
                        jsonData.installedCapacityData.name.forEach((item) => {
                            let XaObj = {
                                value: item,
                                textStyle: {
                                    width: 100,
                                    height: 25,
                                    backgroundColor: "#edeffb",
                                    color: "#36348e",
                                    borderRadius: 10,
                                    align: "center",
                                    verticalAlign: "middle",
                                },
                            };
                            xAxis.push(XaObj);
                        });

                        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("barChart", "功率统计", xAxis, legend, series);
                    }

                    {
                        let xAxis = [];
                        let series = [];
                        let legend = [];
                        jsonData.predictedAssessmentScoresData.name.forEach((item) => {
                            let XaObj = {
                                value: item,
                                textStyle: {
                                    width: 120,
                                    height: 25,
                                    backgroundColor: "#edeffb",
                                    color: "#36348e",
                                    borderRadius: 10,
                                    align: "center",
                                    verticalAlign: "middle",
                                },
                            };
                            xAxis.push(XaObj);
                        });

                        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("barChart1", "预测考核分数", xAxis, legend, series);
                    }

                    {
                        that.messageDataxc = [];
                        that.extremeWeather = jsonData.weatherForecastAllTerminalData
                        jsonData.weatherForecastAllTerminalData.forEach((item) => {
                            let weatherDataFromWeb = null;
                            weatherDataFromWeb = JSON.parse(item.content);
                            that.everyStationWeather(weatherDataFromWeb, item.terminalName);
                        });
                    }

                    that.warningData.forEach((item) => {
                        for (let it in jsonData.earlyWarningInfoData) {
                            if (item.nameEn === it) {
                                if (jsonData.earlyWarningInfoData[it] === 1) {
                                    item.img = that.redImg;
                                } else if (jsonData.earlyWarningInfoData[it] === 2) {
                                    item.img = that.greenImg;
                                } else {
                                    item.img = that.yellowImg;
                                }
                            }
                        }
                    });

                    that.statusData.forEach((item) => {
                        for (let it in jsonData.unitStatusInfoAllData) {
                            if (item.nameEn === it) {
                                item.number = jsonData.unitStatusInfoAllData[it];
                            }
                        }
                    });
                    that.statusDataW.forEach((item) => {
                        for (let it in jsonData.unitStatusInfoAllData) {
                            if (item.nameEn === it) {
                                item.number = jsonData.unitStatusInfoAllData[it];
                            }
                        }
                    });
                    that.allStatus = jsonData.unitStatusInfoAllData;
                    console.log("extremeWeather===>>>", that.extremeWeather)

                    that.messageDataxc.forEach(item => {
                        that.extremeWeather.forEach(it => {
                            if (item.name === it.terminalName) {
                                let obj = {
                                    alertTitle: it.alertTitle ? it.alertTitle : item.data[0].name,
                                    alertMessage: it.alertMessage ? it.alertMessage : item.data[0]
                                        .msg
                                }
                                item.alertObj = obj
                            }
                        })
                    })
                    console.log("messageDataxc===>>>321", that.messageDataxc)
                }
            },
            showColor(str) {
                return str.indexOf("预警") !== -1 ? true : false
            },
            showTitle(item) {
                return item.substring(0, item.indexOf('发布') + 2)
            },
            statusSty(item) {
                return `border: 1px solid ${item.borderSty};background: ${item.backSty}`;
            },
            statusNumSty(item) {
                return `border: 1px solid ${item.borderSty};background:${item.numBack}`;
            },
            fromCustom(name) {
                let that = this;
                let params = {
                    markKey: this.$route.query.markKey,
                    userid: this.$route.query.userid,
                };
                apiGetsinglePointToLogin(params)
                    .then((datas) => {
                        if (datas) {
                            setToken(datas.token);
                            that.LoginInfor(name, datas.id);
                        }
                    })
                    .catch((e) => {
                        let url = location.origin + "/#/login";
                        window.open(url, "_self");
                        location.reload();
                    });
            },
            // 插入登录信息
            LoginInfor(name, id) {
                let that = this;
                let params = {
                    loginName: name,
                };
                apiGetinsertLoginInformation(params).then((datas) => {
                    if (datas) {
                        window.sessionStorage.setItem(
                            "userDatamsg",
                            JSON.stringify(datas.data)
                        );
                        that.personalInfo(id);
                    }
                });
            },
            // 用户信息
            personalInfo(id) {
                let that = this;
                let params = {
                    userId: id,
                };
                apiGetpersonalInformation(params).then((datas) => {
                    if (datas) {
                        window.sessionStorage.setItem(
                            "usermsg",
                            JSON.stringify(datas.data.user)
                        );
                        that.$router.push({
                            name: "homePageNoMap",
                        });
                        setTimeout(() => {
                            that.getStationData();
                            that.statusTimer = setInterval(function () {
                                that.currentTime = that.changeDate(new Date());
                            }, 1000);
                            that.planFiveMin = setInterval(function () {
                                that.getPowerPrediction();
                                that.getWindSpeed(that.windShow ? "风速" : "辐照度");
                            }, 300000);
                            that.getPowerPrediction();
                            that.getWindSpeed("风速");
                            that.getCapacity();
                            that.getAssessmentScore(0);
                            that.getAllStationWeather();
                            that.getWarningInfo();
                            that.getWindStstus();
                            for (let i = 0; i < 1; i++) {
                                window.location.reload();
                            }
                        }, 500);
                    }
                });
            },
            // 获取风机状态服务
            getWindStstus() {
                let that = this;
                let params = {
                    wpId: this.wpId,
                };
                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];
                                    }
                                }
                            });
                        }
                    })
                apiGetStatusInfoAll().then((datas) => {
                    if (datas) {
                        if (datas.data) {
                            that.allStatus = datas.data;
                        }
                    }
                });
            },
            showDetail(item, index) {
                this.$refs.weatherDetail.dialogVisible = true;
                this.$refs.weatherDetail.title = "天气预警";
                this.$refs.weatherDetail.messageAll = this.messageDataxc;
                this.$refs.weatherDetail.activeName = index.toString();
                this.$refs.weatherDetail.statusName = item.data[0].name;
                console.log(item);
            },
            //获取预警状态信息
            getWarningInfo() {
                let that = this;
                apiGetEarlyWarningInfo().then((datas) => {
                    if (datas) {
                        if (datas.data) {
                            that.warningData.forEach((item) => {
                                for (let it in datas.data) {
                                    if (item.nameEn === it) {
                                        if (datas.data[it] === 1) {
                                            item.img = that.redImg;
                                        } else if (datas.data[it] === 2) {
                                            item.img = that.greenImg;
                                        } else {
                                            item.img = that.yellowImg;
                                        }
                                    }
                                }
                            });
                        }
                    }
                });
            },
            // 获取所有场站天气
            getAllStationWeather() {
                let that = this;
                apiGetallWeatherInfo().then((datas) => {
                    if (datas && datas.data) {
                        that.messageDataxc = [];
                        that.extremeWeather = datas.data
                        datas.data.forEach((item) => {
                            let weatherDataFromWeb = null;
                            weatherDataFromWeb = JSON.parse(item.content);
                            that.everyStationWeather(weatherDataFromWeb, item.terminalName);
                        });
                    }
                });
            },
            //处理每个场站天气数据
            everyStationWeather(weatherDataFromWeb, stationName) {
                // console.log("weatherDataFromWeb", weatherDataFromWeb);
                let weatherTit = {
                    windBlue: 0,
                    windYellow: 0,
                    windOrange: 0,
                    windRed: 0,
                    rainBlue: 0,
                    rainYellow: 0,
                    rainOrange: 0,
                    rainRed: 0,
                    thunderYellow: 0,
                    thunderOrange: 0,
                    thunderRed: 0,
                    snowBlue: 0,
                    snowYellow: 0,
                    snowOrange: 0,
                    snowRed: 0,
                };
                weatherDataFromWeb["24_hour_forecast"].info.forEach((item, index) => {
                    if (index < 24) {
                        if (item.wind_power_num === "6" || item.wind_power_num === "7") {
                            //大风蓝色预警
                            weatherTit.windBlue += 1;
                        }
                        if (index < 13) {
                            if (item.wind_power_num === "8" || item.wind_power_num === "9") {
                                //大风黄色预警
                                weatherTit.windYellow += 1;
                                weatherTit.windBlue = 0;
                            } else if (
                                item.precipitation > "40" &&
                                item.precipitation <= "50" &&
                                item.weather.indexOf("雨") !== -1
                            ) {
                                //暴雨蓝色预警
                                weatherTit.rainBlue += 1;
                            } else if (
                                item.precipitation > "3" &&
                                item.precipitation <= "4" &&
                                item.weather.indexOf("雪") !== -1
                            ) {
                                //暴雪蓝色预警
                                weatherTit.snowBlue += 1;
                            } else if (
                                item.precipitation >= "6" &&
                                item.weather.indexOf("雪") !== -1
                            ) {
                                //暴雪黄色预警
                                weatherTit.snowYellow += 1;
                                weatherTit.snowBlue = 0;
                            }
                            if (index < 7) {
                                if (
                                    item.wind_power_num === "10" ||
                                    item.wind_power_num === "11"
                                ) {
                                    //大风橙色预警
                                    weatherTit.windOrange += 1;
                                    weatherTit.windYellow = 0;
                                    weatherTit.windBlue = 0;
                                } else if (
                                    item.wind_power_num === "12" ||
                                    item.wind_power_num === "13"
                                ) {
                                    //大风红色预警
                                    weatherTit.windRed += 1;
                                    weatherTit.windOrange = 0;
                                    weatherTit.windYellow = 0;
                                    weatherTit.windBlue = 0;
                                } else if (
                                    item.weather.indexOf("雷") !== -1 ||
                                    item.weather.indexOf("电") !== -1
                                ) {
                                    //雷电黄色预警
                                    weatherTit.thunderYellow += 1;
                                } else if (
                                    item.precipitation > "40" &&
                                    item.precipitation <= 50 &&
                                    item.weather.indexOf("雨") !== -1
                                ) {
                                    //暴雨黄色预警
                                    weatherTit.rainYellow += 1;
                                    weatherTit.rainBlue = 0;
                                } else if (
                                    item.precipitation >= "10" &&
                                    item.weather.indexOf("雪") !== -1
                                ) {
                                    //暴雪橙色预警
                                    weatherTit.snowOrange += 1;
                                    weatherTit.snowYellow = 0;
                                    weatherTit.snowBlue = 0;
                                } else if (
                                    item.precipitation >= "15" &&
                                    item.weather.indexOf("雪") !== -1
                                ) {
                                    //暴雪红色预警
                                    weatherTit.snowRed += 1;
                                    weatherTit.snowOrange = 0;
                                    weatherTit.snowYellow = 0;
                                    weatherTit.snowBlue = 0;
                                }
                                if (index < 5) {
                                    if (
                                        item.weather.indexOf("雷") !== -1 ||
                                        item.weather.indexOf("电") !== -1
                                    ) {
                                        //雷电橙色预警
                                        weatherTit.thunderOrange += 1;
                                        weatherTit.thunderYellow = 0;
                                    }
                                    if (index < 4) {
                                        if (
                                            item.precipitation > "50" &&
                                            item.weather.indexOf("雨") !== -1
                                        ) {
                                            //暴雨橙色预警
                                            weatherTit.rainOrange += 1;
                                            weatherTit.rainYellow = 0;
                                            weatherTit.rainBlue = 0;
                                        } else if (
                                            item.precipitation >= "100" &&
                                            item.weather.indexOf("雨") !== -1
                                        ) {
                                            //暴雨红色预警
                                            weatherTit.rainRed += 1;
                                            weatherTit.rainOrange = 0;
                                            weatherTit.rainYellow = 0;
                                            weatherTit.rainBlue = 0;
                                        }
                                        if (index < 3) {
                                            if (
                                                item.weather.indexOf("雷") !== -1 ||
                                                item.weather.indexOf("电") !== -1
                                            ) {
                                                //雷电红色预警
                                                weatherTit.thunderRed += 1;
                                                weatherTit.thunderOrange = 0;
                                                weatherTit.thunderYellow = 0;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                });

                // let weatherStatus = ['wind', 'rain', 'thunder', 'snow']
                // let weatherLeave = ['Blue', 'Yellow', 'Orange', 'Red']
                let useweatherTit = {};
                for (let i in weatherTit) {
                    if (weatherTit[i] > 0) {
                        useweatherTit[i] = weatherTit[i];
                    }
                }
                if (Object.keys(useweatherTit).length > 0) {
                    for (let i in useweatherTit) {
                        let showMsgObj = {
                            name: stationName,
                            data: [],
                            weatherDetail: {},
                            weather: {},
                        };
                        for (let j = 0; j < this.messageDataAll.length; j++) {
                            if (this.messageDataAll[j].typeName === i) {
                                showMsgObj.data.push(this.messageDataAll[j]);
                                this.getOnlyWeatherData(
                                    weatherDataFromWeb["24_hour_forecast"].info,
                                    weatherDataFromWeb.weather,
                                    showMsgObj,
                                    "Y"
                                );
                                this.messageDataxc.push(showMsgObj);
                            }
                        }
                    }
                } else {
                    let showMsgObj = {
                        name: stationName,
                        data: [],
                        weatherDetail: {},
                        weather: {},
                    };
                    if (
                        weatherDataFromWeb.weather.weather.indexOf("晴") !== -1 ||
                        weatherDataFromWeb.weather.weather.indexOf("扬沙") !== -1 ||
                        weatherDataFromWeb.weather.weather.indexOf("霾") !== -1 ||
                        weatherDataFromWeb.weather.weather.indexOf("浮尘") !== -1
                    ) {
                        showMsgObj.data.push(this.messageDataAll[15]);
                    } else if (
                        weatherDataFromWeb.weather.weather.indexOf("阴") !== -1 ||
                        weatherDataFromWeb.weather.weather.indexOf("雾") !== -1
                    ) {
                        showMsgObj.data.push(this.messageDataAll[16]);
                    } else if (weatherDataFromWeb.weather.weather.indexOf("多云") !== -1) {
                        showMsgObj.data.push(this.messageDataAll[17]);
                    } else if (weatherDataFromWeb.weather.weather.indexOf("雨") !== -1) {
                        showMsgObj.data.push(this.messageDataAll[18]);
                    } else if (weatherDataFromWeb.weather.weather.indexOf("雪") !== -1) {
                        showMsgObj.data.push(this.messageDataAll[19]);
                    } else if (weatherDataFromWeb.weather.weather.indexOf("雷电") !== -1) {
                        showMsgObj.data.push(this.messageDataAll[20]);
                    }
                    this.messageDataxc.push(showMsgObj);
                    // weatherDataFromWeb['15_day_forecast'].info[0]
                    // weatherDataFromWeb['24_hour_forecast'].info[0]
                    this.getOnlyWeatherData(
                        weatherDataFromWeb["24_hour_forecast"].info[0],
                        weatherDataFromWeb.weather,
                        showMsgObj,
                        "N"
                    );
                }
                // console.log("weatherTit", weatherTit);
                this.messageDataxc.forEach(item => {
                    this.extremeWeather.forEach(it => {
                        if (item.name === it.terminalName) {
                            let obj = {
                                alertTitle: it.alertTitle ? it.alertTitle : item.data[0].name,
                                alertMessage: it.alertMessage ? it.alertMessage : item.data[0]
                                    .msg
                            }
                            item.alertObj = obj
                        }
                    })
                })
                console.log("messageDataxc===>>>123>", this.messageDataxc);
            },
            //获取天气预警的相关天气数据
            getOnlyWeatherData(datas, weather, obj, type) {
                if (type === "Y") {
                    for (let j = 0; j < datas.length; j++) {
                        let item = datas[j];
                        if (j < 24) {
                            if (
                                (item.wind_power_num === "6" || item.wind_power_num === "7") &&
                                obj.data[0].typeName === "windBlue"
                            ) {
                                //大风蓝色预警
                                obj.weatherDetail = item;
                                obj.weather = weather;
                            }
                            if (j < 13) {
                                if (
                                    (item.wind_power_num === "8" || item.wind_power_num === "9") &&
                                    obj.data[0].typeName === "windYellow"
                                ) {
                                    //大风黄色预警
                                    obj.weatherDetail = item;
                                    obj.weather = weather;
                                } else if (
                                    item.precipitation > "40" &&
                                    item.precipitation <= "50" &&
                                    item.weather.indexOf("雨") !== -1 &&
                                    obj.data[0].typeName === "rainBlue"
                                ) {
                                    //暴雨蓝色预警
                                    obj.weatherDetail = item;
                                    obj.weather = weather;
                                } else if (
                                    item.precipitation > "3" &&
                                    item.precipitation <= "4" &&
                                    item.weather.indexOf("雪") !== -1 &&
                                    obj.data[0].typeName === "snowBlue"
                                ) {
                                    //暴雪蓝色预警
                                    obj.weatherDetail = item;
                                    obj.weather = weather;
                                } else if (
                                    item.precipitation >= "6" &&
                                    item.weather.indexOf("雪") !== -1 &&
                                    obj.data[0].typeName === "snowYellow"
                                ) {
                                    //暴雪黄色预警
                                    obj.weatherDetail = item;
                                    obj.weather = weather;
                                }
                                if (j < 7) {
                                    if (
                                        (item.wind_power_num === "10" ||
                                            item.wind_power_num === "11") &&
                                        obj.data[0].typeName === "windOrange"
                                    ) {
                                        //大风橙色预警
                                        obj.weatherDetail = item;
                                        obj.weather = weather;
                                    } else if (
                                        (item.wind_power_num === "12" ||
                                            item.wind_power_num === "13") &&
                                        obj.data[0].typeName === "windRed"
                                    ) {
                                        //大风红色预警
                                        obj.weatherDetail = item;
                                        obj.weather = weather;
                                    } else if (
                                        (item.weather.indexOf("雷") !== -1 ||
                                            item.weather.indexOf("电") !== -1) &&
                                        obj.data[0].typeName === "thunderYellow"
                                    ) {
                                        //雷电黄色预警
                                        item.weatherDetail = item;
                                        item.weather = weather;
                                    } else if (
                                        item.precipitation > "40" &&
                                        item.precipitation <= 50 &&
                                        item.weather.indexOf("雨") !== -1 &&
                                        obj.data[0].typeName === "rainYellow"
                                    ) {
                                        //暴雨黄色预警
                                        obj.weatherDetail = item;
                                        obj.weather = weather;
                                    } else if (
                                        item.precipitation >= "10" &&
                                        item.weather.indexOf("雪") !== -1 &&
                                        obj.data[0].typeName === "snowOrange"
                                    ) {
                                        //暴雪橙色预警
                                        obj.weatherDetail = item;
                                        obj.weather = weather;
                                    } else if (
                                        item.precipitation >= "15" &&
                                        item.weather.indexOf("雪") !== -1 &&
                                        obj.data[0].typeName === "snowRed"
                                    ) {
                                        //暴雪红色预警
                                        obj.weatherDetail = item;
                                        obj.weather = weather;
                                    }
                                    if (j < 5) {
                                        if (
                                            (item.weather.indexOf("雷") !== -1 ||
                                                item.weather.indexOf("电") !== -1) &&
                                            obj.data[0].typeName === "thunderOrange"
                                        ) {
                                            //雷电橙色预警
                                            obj.weatherDetail = item;
                                            obj.weather = weather;
                                        }
                                        if (j < 4) {
                                            if (
                                                item.precipitation > "50" &&
                                                item.weather.indexOf("雨") !== -1 &&
                                                obj.data[0].typeName === "rainOrange"
                                            ) {
                                                //暴雨橙色预警
                                                item.weatherDetail = item;
                                                item.weather = weather;
                                            } else if (
                                                item.precipitation >= "100" &&
                                                item.weather.indexOf("雨") !== -1 &&
                                                obj.data[0].typeName === "rainRed"
                                            ) {
                                                //暴雨红色预警
                                                obj.weatherDetail = item;
                                                obj.weather = weather;
                                            }
                                            if (j < 3) {
                                                if (
                                                    (item.weather.indexOf("雷") !== -1 ||
                                                        item.weather.indexOf("电") !== -1) &&
                                                    obj.data[0].typeName === "thunderRed"
                                                ) {
                                                    //雷电红色预警
                                                    obj.weatherDetail = item;
                                                    obj.weather = weather;
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                } else {
                    obj.weatherDetail = datas;
                    obj.weather = weather;
                }
            },
            notReload(val) {
                this.isreload = val;
            },
            getStationData() {
                apiGetStationGL().then((datas) => {
                    this.stationData = datas.data.list;
                });
            },
            getWindorSunDate(type) {
                this.windShow = false;
                this.sunShow = false;
                if (type === "风速") {
                    this.windShow = true;
                    this.getWindSpeed("风速");
                } else {
                    this.sunShow = true;
                    this.getWindSpeed("辐照度");
                }
            },
            getbarDate(type) {
                this.dayShow = false;
                this.monthShow = false;
                this.yearShow = false;
                if (type === "日") {
                    this.dayShow = true;
                    this.getAssessmentScore(0);
                } else if (type === "月") {
                    this.monthShow = true;
                    this.getAssessmentScore(1);
                } else {
                    this.yearShow = true;
                    this.getAssessmentScore(2);
                }
            },
            doubleclick(name) {
                if (this.stationData.length > 0) {
                    this.isreload = false;
                    this.$refs.global.dialogVisible = true;
                    this.$refs.global.tableData = [];
                    this.$refs.global.dateType = 1;
                    this.$refs.global.loading = true;
                    this.$refs.global.pickerTime = this.pickerTime;
                    this.$refs.global.windShow = this.windShow;
                    this.$refs.global.init(name);
                    this.$nextTick(() => {
                        const myChart1 = this.$echarts.init(
                            document.getElementById("lineChart"),
                            this.echartsTheme
                        );
                        const myChart2 = this.$echarts.init(
                            document.getElementById("lineChart1"),
                            this.echartsTheme
                        );
                        myChart1.dispatchAction({
                            type: "hideTip",
                        });
                        myChart2.dispatchAction({
                            type: "hideTip",
                        });
                        if (name === "全域功率预测") {
                            this.$refs.global.getChartsData();
                            this.$refs.global.getTableData();
                        } else {
                            this.$refs.global.getwindChartsData();
                            this.$refs.global.getwindTableData();
                        }
                    });
                }
            },
            changeDate(date) {
                var y = date.getFullYear();
                var m = date.getMonth() + 1;
                m = m < 10 ? "0" + m : m;
                var d = date.getDate();
                d = d < 10 ? "0" + d : d;
                var h = date.getHours();
                h = h < 10 ? "0" + h : h;
                var minute = date.getMinutes();
                minute = minute < 10 ? "0" + minute : minute;
                var second = date.getSeconds();
                second = second < 10 ? "0" + second : second;
                return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second;
            },
            // 今日功率预测
            getPowerPrediction() {
                let that = this;
                apiGetPowerPrediction().then((datas) => {
                    if (datas && datas.data) {
                        let xAxis = [];
                        let series = [];
                        let legend = [];
                        if (datas.data.dateList.length > 0) {
                            datas.data.dateList.forEach((item) => {
                                xAxis.push(item.substring(item.indexOf(" ") + 1));
                            });
                        }
                        if (datas.data.dataFormatList.length > 0) {
                            datas.data.dataFormatList.forEach((iten) => {
                                if (iten.name !== "短期") {
                                    legend.push(iten.name);
                                    let seriesObj = {
                                        name: iten.name,
                                        type: "line",
                                        data: iten.data.map((it) => {
                                            return that.$utils.isHasNum(it);
                                        }),
                                        symbol: "none",
                                    };
                                    series.push(seriesObj);
                                }
                            });
                        }
                        that.getPowerLine("lineChart", "今日功率预测", xAxis, legend, series);
                    }
                });
            },
            // 今日风速预测
            getWindSpeed(type) {
                let that = this;
                if (type === "风速") {
                    apiGetWindSpeed().then((datas) => {
                        that.handleWindSunData(datas, type);
                    });
                } else {
                    apiGetirradianceForecast().then((datas) => {
                        that.handleWindSunData(datas, type);
                    });
                }
            },
            //处理风速和辐照度数据
            handleWindSunData(datas, type) {
                if (datas && datas.data) {
                    let xAxis = [];
                    let series = [];
                    let legend = [];
                    if (datas.data.dateList.length > 0) {
                        datas.data.dateList.forEach((item) => {
                            xAxis.push(item.substring(item.indexOf(" ") + 1));
                        });
                    }
                    if (datas.data.dataFormatList.length > 0) {
                        datas.data.dataFormatList.forEach((iten) => {
                            legend.push(iten.name);
                            let seriesObj = {
                                name: iten.name,
                                type: "line",
                                data: iten.data.map((it) => {
                                    return this.$utils.isHasNum(it);
                                }),
                                symbol: "none",
                            };
                            series.push(seriesObj);
                        });
                    }
                    this.getPowerLine(
                        "lineChart1",
                        type === "风速" ? "今日风速预测" : "今日辐照度预测",
                        xAxis,
                        legend,
                        series
                    );
                }
            },
            getPowerLine(name, title, xAxis, legend, series) {
                let option = {
                    title: {
                        text: title,
                        textStyle: {
                            fontSize: "16",
                            fontWeight: "bold",
                        },
                    },
                    tooltip: {
                        trigger: "axis",
                        formatter: name === "lineChart" ?
                            (item) => {
                                let str =
                                    `<span style="display:inline-block;margin-bottom: 5px">${item[0].axisValue}</span></br>`;
                                let strMsg = "";
                                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;
                            } : "",
                    },
                    // axisPointer: {
                    //     link: {
                    //         xAxisIndex: 'all'
                    //     },
                    //     label: {
                    //         formatter: (params) =>{
                    //             // debugger
                    //             this.lengedObj = params.seriesData[3]
                    //             console.log('lengedObj======>>>>', this.lengedObj)
                    //             if (this.lengedObj.color !== '#39ccd9') {
                    //                 option.legend.data = legend
                    //             } else {
                    //                 legend.forEach(it =>{
                    //                     if (it === '超短期') {
                    //                         it = '短期'
                    //                     }
                    //                 })
                    //                 option.legend.data = legend
                    //             }
                    //         }
                    //     }
                    // },
                    legend: {
                        right: name !== "lineChart1" ? "20" : "20%",
                        data: legend,
                        // show: name === 'lineChart' ? false : true
                        show: false,
                        // formatter: name === 'lineChart' ? (name, type) => {
                        //     // debugger
                        //     if (!type) {
                        //         switch (name) {
                        //             case '超短期':
                        //                 return this.lengedObj.seriesName ? this.lengedObj.seriesName : name
                        //                 break;
                        //             default:
                        //                 return name
                        //         }
                        //     } else {
                        //         let datalen = []
                        //         name.seriesData.forEach(it =>{
                        //             if (it.color === '#39ccd9') {
                        //                 it.seriesName = '短期'
                        //             }
                        //             datalen.push(it.seriesName)
                        //         })
                        //         return datalen
                        //     }
                        // } : ''
                    },
                    grid: {
                        left: "5%",
                        right: "5%",
                        bottom: "3%",
                        containLabel: true,
                    },
                    xAxis: {
                        type: "category",
                        boundaryGap: false,
                        data: xAxis,
                    },
                    yAxis: {
                        type: "value",
                        name: title === "今日功率预测" ?
                            "兆瓦(Mw)" : title === "今日风速预测" ?
                            "m/s" : "W/㎡",
                    },
                    series: series,
                };
                if (!this.theme) {
                    option.backgroundColor = "";
                }
                if (name === "lineChart") {
                    let hour = new Date().getHours() + 6;
                    let min = new Date().getMinutes();
                    let allTime = "";
                    let num = 0;
                    if (0 <= min && min < 15) {
                        allTime = hour + ":00:00";
                    } else if (15 <= min && min < 30) {
                        allTime = hour + ":15:00";
                    } else if (30 <= min && min < 45) {
                        allTime = hour + ":30:00";
                    } else if (45 <= min && min < 60) {
                        allTime = hour + ":45:00";
                    }
                    xAxis.forEach((item, index) => {
                        if (item === allTime) {
                            num = index;
                        }
                    });
                    if (num > 0) {
                        option.visualMap = {
                            show: false,
                            dimension: 0,
                            seriesIndex: 3,

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

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

    .themeDark {
        .homePage_main {
            background: #040c0b;

            .mainLeft,
            .mainRight {
                .lineStyle {
                    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;
                            }
                        }
                    }
                }
            }

            .mainLeft {
                .styleOneData {
                    span {
                        width: 90px;
                        border-radius: 4px;
                    }

                    .changeStyle {
                        color: #fff;
                        background: linear-gradient(90deg,
                                rgba(28, 108, 255, 0.7),
                                rgba(28, 108, 255, 0));
                        border: 1px solid #404858;
                    }
                }

                .styleData {
                    span {
                        width: 90px;
                    }

                    span:nth-child(1) {
                        border-right: none;
                        border-radius: 4px 0px 0px 4px;
                    }

                    span:nth-child(2) {
                        border-radius: 0px 4px 4px 0px;
                    }

                    .changeStyle {
                        color: #fff;
                        background: linear-gradient(90deg,
                                rgba(28, 108, 255, 0.7),
                                rgba(28, 108, 255, 0));
                        border: 1px solid #404858;
                    }

                    .defaultSty {
                        color: #a1a7b9;
                        background: linear-gradient(90deg,
                                rgba(64, 72, 88, 0.7),
                                rgba(64, 72, 88, 0));
                        border: 1px solid #404858;
                    }
                }
            }

            .mainRight {

                .styleData {
                    span {
                        width: 45px;
                    }

                    span:nth-child(1) {
                        border-right: none;
                        border-radius: 4px 0px 0px 4px;
                    }

                    span:nth-child(2) {
                        border-right: none;
                    }

                    span:nth-child(3) {
                        border-radius: 0px 4px 4px 0px;
                    }

                    .changeStyle {
                        color: #fff;
                        background: linear-gradient(90deg,
                                rgba(28, 108, 255, 0.7),
                                rgba(28, 108, 255, 0));
                        border: 1px solid #404858;
                    }

                    .defaultSty {
                        color: #a1a7b9;
                        background: linear-gradient(90deg,
                                rgba(64, 72, 88, 0.7),
                                rgba(64, 72, 88, 0));
                        border: 1px solid #404858;
                    }
                }

                .messageData {
                    background: #161f1e;

                    p {
                        color: #fff;
                    }

                    .msgHeight {

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

        .footer {
            background: #040c0b;

            .exitV {
                background: #161f1e;
                box-shadow: 0px 1px 5px 0px rgba(159, 161, 175, 0.72);
                position: relative;
                top: 10px;
                border-radius: 10px 10px 0 0;

                .time {
                    span {
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        font-size: 14px;
                        color: #fff;
                        line-height: 24px;
                        margin-left: 10px;
                    }
                }

                .earlywarning {
                    .warningdata {
                        span {
                            font-family: Microsoft YaHei;
                            font-weight: 400;
                            font-size: 14px;
                            color: #fff;
                            line-height: 24px;
                        }
                    }
                }
            }
        }
    }

    .themeLight {
        .homePage_main {
            background: #edeffb;

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

                    .chart-name {
                        display: flex;
                        align-items: center;
                        position: absolute;
                        top: 0;
                        height: 39px;
                        width: 96%;
                        border-bottom: 1px solid #e1e3ea;

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

                            &.point-left {
                                left: 0;
                            }

                            &.point-right {
                                right: 0;
                            }

                            &.top {
                                top: -1px;
                            }

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

            .mainLeft {
                .styleOneData {
                    span {
                        width: 90px;
                        border-radius: 4px;
                    }

                    .changeStyle {
                        color: #fff;
                        background: linear-gradient(90deg,
                                rgba(28, 108, 255, 0.7),
                                rgba(28, 108, 255, 0));
                        border: 1px solid #404858;
                    }
                }

                .styleData {
                    span {
                        width: 90px;
                    }

                    span:nth-child(1) {
                        border-right: none;
                        border-radius: 4px 0px 0px 4px;
                    }

                    span:nth-child(2) {
                        border-radius: 0px 4px 4px 0px;
                    }

                    .changeStyle {
                        color: #fff;
                        background: #4f70ec;
                        border: 1px solid #4f70ec;
                    }

                    .defaultSty {
                        color: #a1a7b9;
                        background: #d0d3e1;
                        border: 1px solid #d0d3e1;
                    }
                }
            }

            .mainRight {

                .styleData {
                    span {
                        width: 45px;
                    }

                    span:nth-child(1) {
                        border-right: none;
                        border-radius: 4px 0px 0px 4px;
                    }

                    span:nth-child(2) {
                        border-right: none;
                    }

                    span:nth-child(3) {
                        border-radius: 0px 4px 4px 0px;
                    }

                    .changeStyle {
                        color: #fff;
                        background: #4f70ec;
                        border: 1px solid #4f70ec;
                    }

                    .defaultSty {
                        color: #a1a7b9;
                        background: #d0d3e1;
                        border: 1px solid #d0d3e1;
                    }
                }

                .messageData {
                    background: #fff;

                    p {
                        color: #000;
                    }

                    .msgHeight {

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

        .footer {
            background: #edeffb;

            .exitV {
                background: #fff;
                box-shadow: 0px 1px 5px 0px rgba(159, 161, 175, 0.72);
                position: relative;
                top: 10px;
                border-radius: 10px 10px 0 0;

                .time {
                    span {
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        font-size: 14px;
                        color: #121212;
                        line-height: 24px;
                        margin-left: 10px;
                    }
                }

                .earlywarning {
                    .warningdata {
                        span {
                            font-family: Microsoft YaHei;
                            font-weight: 400;
                            font-size: 14px;
                            color: #121212;
                            line-height: 24px;
                        }
                    }
                }
            }
        }
    }
</style>