windLifecontrolPro/src/views/powerPrediction/statisticalSummaryPage.vue

<template>
    <div class="statisticalSummary" :class="!theme ? 'themeDark' : 'themeLight'">
        <div class="statistical_wind">
            <el-row class="windStstus">
                <el-col :span="24" class="scrollbar">
                    <!-- <span class="scrollbarName">场站名称：</span> -->
                    <el-scrollbar>
                        <div class="scrollbar-flex-content">
                            <p v-for="item in stationData" :key="item.no" class="scrollbar-demo-item"
                                :class="item.showBac ? 'changeBacksty' : 'defaultBacksty'"
                                @click="changeStation(item.no)">
                                {{ item.stationName }}
                            </p>
                        </div>
                    </el-scrollbar>
                </el-col>
            </el-row>
        </div>
        <div class="lineMain" v-loading="loading">
            <el-row>
                <el-col :span="12" :style="pageHeight" style="padding-right: 10px">
                    <div class="lineStyle1">
                        <div id="monthChartBar" :style="chartsHeight"></div>
                    </div>
                    <div class="lineStyle1">
                        <el-row style="width: 100%; text-align: center">
                            <el-col :span="3" v-for="item in showpieColor" :key="item.name">
                                <span class="pieColorLine" :style="{ background: item.value }"></span>
                                <span :style="!theme ? 'color: #fff' : ''"
                                    style="font-size: 12px; margin-left: 8px">{{ item.name }}</span>
                            </el-col>
                        </el-row>
                        <div style="display: flex">
                            <div id="pieChartY" :style="pieHeight"></div>
                            <div id="pieChartS" :style="pieHeight"></div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="12" :style="pageHeight">
                    <div class="lineStyle1">
                        <div id="yearChartBar" :style="chartsHeight"></div>
                        <div :style="tableHeight">
                            <div style="display: flex; margin: 10px 0">
                                <!-- <el-button type="primary" disabled>年发电量报告</el-button> -->
                            </div>
                            <div class=" warn-table tablestyle">
                                <el-table :data="tableData" border style="width: 100%"
                                    element-loading-background="rgba(0,0,0,.5)" :header-cell-style="{
                                        padding: '4px',
                                        fontSize: '10px',
                                        fontWeight: bold,
                                        border: '0.5px solid rgba(0,0,0,.5) !important',
                                        }" :cell-style="{
                                        height: '40px',
                                        padding: '3px',
                                        fontSize: '10px',
                                        'border-top': '0px solid rgba(0,0,0,.5)',
                                        'border-bottom': '1px solid rgba(0,0,0,.5)',
                                        'border-right': '1px solid  rgba(0,0,0,.5)',
                                        }">
                                    <el-table-column prop="name" label="月份" width="54" align="center">
                                        <template #default="scope">
                                            <span>{{scope.row.name.substring(0,2)}}</span><br>
                                            <span>{{scope.row.name.substring(2,scope.row.name.length)}}</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column :prop="item.value" width="60" :label="item.name"
                                        v-for="(item, index) in tableColumn" :key="index">
                                    </el-table-column>
                                    <el-table-column prop="statistic" width="60" label="合计" />
                                </el-table>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
    import {
        apiGetStationDL,
        apiGetmonthlyPower,
        apiGetannualPower,
    } from "../../api/api";

    import jsonData from "./component/statisticalSummary.json";
    export default {
        data() {
            return {
                windTurbines: "",
                windTurbinesName: "",
                itemVal: "",
                stationData: [],
                tableData: [],
                pieColor: [],
                showpieColor: [],
                tableColumn: [],
                loading: false,
                echartsTheme: "",
                theme: null,
            };
        },
        watch: {
            "$store.state.theme": {
                handler: function (newVal, oldVal) {
                    this.theme = newVal;
                    this.echartsTheme = !newVal ? "dark" : "";
                    // this.getStationData();
                },
                immediate: true,
            },
        },
        created() {
            // this.initPageData();
            this.getStationData();
            (this.pieColor = [{
                    value: "",
                    name: "一月",
                },
                {
                    value: "",
                    name: "二月",
                },
                {
                    value: "",
                    name: "三月",
                },
                {
                    value: "",
                    name: "四月",
                },
                {
                    value: "",
                    name: "五月",
                },
                {
                    value: "",
                    name: "六月",
                },
                {
                    value: "",
                    name: "七月",
                },
                {
                    value: "",
                    name: "八月",
                },
                {
                    value: "",
                    name: "九月",
                },
                {
                    value: "",
                    name: "十月",
                },
                {
                    value: "",
                    name: "十一月",
                },
                {
                    value: "",
                    name: "十二月",
                },
                {
                    value: "",
                    name: "未发电量",
                },
            ]),
            (this.tableColumn = [{
                    value: "january",
                    name: "一月",
                },
                {
                    value: "february",
                    name: "二月",
                },
                {
                    value: "march",
                    name: "三月",
                },
                {
                    value: "april",
                    name: "四月",
                },
                {
                    value: "may",
                    name: "五月",
                },
                {
                    value: "june",
                    name: "六月",
                },
                {
                    value: "july",
                    name: "七月",
                },
                {
                    value: "august",
                    name: "八月",
                },
                {
                    value: "september",
                    name: "九月",
                },
                {
                    value: "october",
                    name: "十月",
                },
                {
                    value: "november",
                    name: "十一月",
                },
                {
                    value: "december",
                    name: "十二月",
                },
            ]);
        },
        computed: {
            pageHeight() {
                return {
                    height: document.documentElement.clientHeight - 100 + "px",
                };
            },
            chartsHeight() {
                let height = (document.documentElement.clientHeight - 140) / 2 + "px";
                return {
                    width: "100%",
                    height: height,
                };
            },
            pieHeight() {
                let height = (document.documentElement.clientHeight - 270) / 2 + "px";
                return {
                    width: "100%",
                    height: height,
                };
            },
            tableHeight() {
                let height = (document.documentElement.clientHeight - 150) / 2 + "px";
                return {
                    width: "100%",
                    height: height,
                };
            },
        },
        methods: {
            initPageData() {
                const that = this;
                that.stationData = []
                that.$nextTick(() => {
                    that.stationData = jsonData.dlStationsAllData.list;
                    let obj = {
                        stationName: "全域数据",
                        no: -1,
                        itemVal: 0,
                    };
                    that.stationData.unshift(obj);
                    that.windTurbines = jsonData.dlStationsAllData.list[0].no;
                    that.windTurbinesName = jsonData.dlStationsAllData.list[0].stationName;
                    that.itemVal = jsonData.dlStationsAllData.list[0].itemVal;
                    this.stationData[0].showBac = true;

                    {
                        let xAxis = [];
                        let series = [];
                        let series1 = [];
                        let legend = [];
                        jsonData.monthlyPowerGenerationReportData.dateList.forEach((item) => {
                            xAxis.push(item.substring(0, item.indexOf(" ") + 1));
                        });
                        jsonData.monthlyPowerGenerationReportData.dataFormatList.forEach(
                            (iten, index) => {
                                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);
                                let seriesObj1 = {
                                    name: iten.name,
                                    type: "bar",
                                    barGap: "1",
                                    emphasis: {
                                        focus: "series",
                                    },
                                    data: iten.data.map((it) => {
                                        return that.$utils.isHasNum(it);
                                    }),
                                };
                                series1.push(seriesObj1);
                            }
                        );
                        that.getPowerBar(
                            "monthChartBar",
                            "当月-日发电量",
                            xAxis,
                            legend,
                            series1
                        );
                    }

                    let monthLen = 0;
                    monthLen = new Date().getMonth() + 1;
                    // 表格数据处理
                    that.getTableData2(jsonData.annualPowerGenerationReportData.list3);
                    // 柱状图数据处理
                    that.getBarData(
                        jsonData.annualPowerGenerationReportData.list3,
                        monthLen
                    );
                    //饼状图数据处理
                    that.getPieData(
                        jsonData.annualPowerGenerationReportData.list3,
                        monthLen
                    );
                    that.loading = false;
                });
            },
            changeStation(val) {
                this.windTurbines = val;
                this.stationData.forEach((item) => {
                    if (item.no === val) {
                        this.windTurbinesName = item.stationName;
                        item.showBac = true;
                    } else {
                        item.showBac = false;
                    }
                });
                this.getWindSpeed();
                this.getYearData();
            },
            getStationData() {
                let that = this;
                that.loading = true;
                apiGetStationDL().then((datas) => {
                    that.stationData = datas.data.list;
                    let obj = {
                        stationName: "全域数据",
                        no: -1,
                        itemVal: 0,
                    };
                    that.stationData.unshift(obj);
                    that.windTurbines = datas.data.list[0].no;
                    that.windTurbinesName = datas.data.list[0].stationName;
                    that.itemVal = datas.data.list[0].itemVal;
                    this.stationData[0].showBac = true;
                    that.getWindSpeed("only");
                    that.getYearData("only");
                });
            },
            // 月发电量及功率预测--曲线图
            getWindSpeed() {
                let that = this;
                let params = {
                    stationNumber: that.windTurbines,
                    itemVal: that.itemVal,
                };
                apiGetmonthlyPower(params).then((datas) => {
                    if (datas && datas.data) {
                        let xAxis = [];
                        let series = [];
                        let series1 = [];
                        let legend = [];
                        if (datas.data.dateList.length > 0) {
                            datas.data.dateList.forEach((item) => {
                                xAxis.push(item.substring(0, item.indexOf(" ") + 1));
                            });
                        }
                        if (datas.data.dataFormatList.length > 0) {
                            datas.data.dataFormatList.forEach((iten, index) => {
                                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);
                                let seriesObj1 = {
                                    name: iten.name,
                                    type: "bar",
                                    barGap: "1",
                                    emphasis: {
                                        focus: "series",
                                    },
                                    data: iten.data.map((it) => {
                                        return that.$utils.isHasNum(it);
                                    }),
                                };
                                series1.push(seriesObj1);
                            });
                        }
                        that.getPowerBar(
                            "monthChartBar",
                            "当月-日发电量",
                            xAxis,
                            legend,
                            series1
                        );
                    }
                });
            },
            // 获取年发电量数据
            getYearData() {
                let that = this;
                let params = {
                    stationNumber: that.windTurbines,
                    itemVal: that.itemVal,
                };
                apiGetannualPower(params).then((datas) => {
                    if (datas && datas.data.list) {
                        let monthLen = 0;
                        monthLen = new Date().getMonth() + 1;
                        // 表格数据处理
                        that.getTableData2(datas.data.list);
                        // 柱状图数据处理
                        that.getBarData(datas.data.list, monthLen);
                        //饼状图数据处理
                        that.getPieData(datas.data.list, monthLen);
                        that.loading = false;
                    }
                });
            },
            // 处理当年月发电量表格数据
            getTableData(datas) {
                let proportion = {
                    name: "当月占比",
                    statistic: "-",
                };
                let proportionYear = {
                    name: "全年占比",
                    statistic: "-",
                };
                let monthName = [
                    "january",
                    "february",
                    "march",
                    "april",
                    "may",
                    "june",
                    "july",
                    "august",
                    "september",
                    "october",
                    "november",
                    "december",
                ];
                datas.forEach((item, index) => {
                    if (index === 0 || index === 1) {
                        item.statistic = 0;
                        monthName.forEach((its) => {
                            item[its] = item[its] ? Math.ceil(item[its]) : "-";
                        });
                        monthName.forEach((itv) => {
                            item.statistic += item[itv] && item[itv] !== "-" ? item[itv] : 0;
                        });
                        if (index === 0) {
                            item.name = "计划发电";
                        } else if (index === 1) {
                            item.name = "实际发电";
                        }
                    } else if (index === 2 || index === 3) {
                        item.statistic = "-";
                        monthName.forEach((itv) => {
                            item[itv] =
                                item[itv] && item[itv] !== null ?
                                (item[itv] * 100).toFixed(2) + "%" :
                                "-";
                        });
                        if (index === 2) {
                            item.name = "短期准确率";
                        } else if (index === 3) {
                            item.name = "超短准确率";
                        }
                    }
                });
                // 当月占比
                monthName.forEach((itc) => {
                    proportion[itc] = this.$utils.ratioCalculation(
                        datas[1][itc],
                        datas[0][itc]
                    );
                });
                datas.splice(2, 0, proportion);
                // 全年占比
                monthName.forEach((itc) => {
                    proportionYear[itc] = this.$utils.ratioCalculation(
                        datas[1][itc],
                        datas[0].statistic
                    );
                });
                datas.splice(3, 0, proportionYear);

                let num = 0;
                let num2 = 0;
                let num3 = 0;
                monthName.forEach((itb, index) => {
                    if (datas[4][itb] && datas[4][itb] !== "-") {
                        num += 1;
                        num2 += datas[4][itb].replace("%", "") / 100;
                    }
                    if (datas[5][itb] && datas[5][itb] !== "-") {
                        num3 += datas[5][itb].replace("%", "") / 100;
                    }
                });

                //全年占比统计
                proportionYear.statistic = this.$utils.ratioCalculation(
                    datas[1].statistic,
                    datas[0].statistic
                );
                //短期准确率统计
                datas[4].statistic = (num2 / num).toFixed(2) * 100 + "%";
                //超短期准确率统计
                datas[5].statistic = (num3 / num).toFixed(2) * 100 + "%";
                this.tableData = datas;
            },
            getTableData2(datas) {
                let nameArr = ["预测发电", "实际发电", "计划发电", "当月占比", "全年占比", "短期准确率", "超短准确率"]
                let monthName = [
                    "january",
                    "february",
                    "march",
                    "april",
                    "may",
                    "june",
                    "july",
                    "august",
                    "september",
                    "october",
                    "november",
                    "december",
                ];
                datas.forEach((it, idx) => {
                    let statisticNum = 0
                    it.name = nameArr[idx]
                    if (it.name === "预测发电" || it.name === "实际发电" || it.name === "计划发电") {
                        monthName.forEach(o => {
                            if (it[o] !== null) {
                                // it[o] = Number(it[o].toFixed(2))
                                it[o] = Math.ceil(it[o])
                                statisticNum = statisticNum + it[o]
                            } else {
                                statisticNum = statisticNum + 0
                            }
                        })
                        it.statistic = Math.ceil(statisticNum)
                    } else if (it.name === "当月占比" || it.name === "全年占比") {
                        monthName.forEach(o => {
                            if (it[o] !== null) {
                                it[o] = Number(it[o].toFixed(2))
                                statisticNum = statisticNum + it[o]
                            } else {
                                statisticNum = statisticNum + 0
                            }
                        })
                        it.statistic = statisticNum.toFixed(2)
                    }
                    // it.statistic = Math.ceil(statisticNum)
                })
                this.tableData = datas;
            },
            //处理当年月发电量柱状图数据
            getBarData(datas, val) {
                let xAxisAll = [
                    "一月",
                    "二月",
                    "三月",
                    "四月",
                    "五月",
                    "六月",
                    "七月",
                    "八月",
                    "九月",
                    "十月",
                    "十一月",
                    "十二月",
                ];
                let xAxis = [];
                for (let i = 0; i < val; i++) {
                    xAxis.push(xAxisAll[i]);
                }
                let legend = ["预测发电", "实际发电", "计划发电"];
                let series = [{
                        name: "预测发电",
                        type: "bar",
                        barGap: "1",
                        emphasis: {
                            focus: "series",
                        },
                        data: []
                    },
                    {
                        name: "实际发电",
                        type: "bar",
                        barGap: "1",
                        emphasis: {
                            focus: "series",
                        },
                        data: []
                    },
                    {
                        name: "计划发电",
                        type: "bar",
                        barGap: "1",
                        emphasis: {
                            focus: "series",
                        },
                        data: []
                    },
                ];
                datas.forEach((itn) => {
                    let data = [
                        itn.january,
                        itn.february,
                        itn.march,
                        itn.april,
                        itn.may,
                        itn.june,
                        itn.july,
                        itn.august,
                        itn.september,
                        itn.october,
                        itn.november,
                        itn.december,
                    ];
                    if (itn.name === "计划发电") {
                        series[2].data = data;
                    } else if (itn.name === "实际发电") {
                        series[1].data = data;
                    } else if (itn.name === "预测发电") {
                        series[0].data = data;
                    }
                });
                this.getPowerBar(
                    "yearChartBar",
                    "当年-月发电量",
                    xAxisAll,
                    legend,
                    series
                );
            },
            //处理当年月发电量饼状图数据
            getPieData(datas, val) {
                let activeval = 0;
                activeval += datas[1].january !== "-" ? datas[1].january * 1 : 0;
                activeval += datas[1].february !== "-" ? datas[1].february * 1 : 0;
                activeval += datas[1].march !== "-" ? datas[1].march * 1 : 0;
                activeval += datas[1].april !== "-" ? datas[1].april * 1 : 0;
                activeval += datas[1].may !== "-" ? datas[1].may * 1 : 0;
                activeval += datas[1].june !== "-" ? datas[1].june * 1 : 0;
                activeval += datas[1].july !== "-" ? datas[1].july * 1 : 0;
                activeval += datas[1].august !== "-" ? datas[1].august * 1 : 0;
                activeval += datas[1].september !== "-" ? datas[1].september * 1 : 0;
                activeval += datas[1].october !== "-" ? datas[1].october * 1 : 0;
                activeval += datas[1].november !== "-" ? datas[1].november * 1 : 0;
                activeval += datas[1].december !== "-" ? datas[1].december * 1 : 0;
                let obj = [{
                    // value: data-activeval < 0 ? 0 : data-activeval,
                    value: datas[0].statistic - activeval < 0 ?
                        0 : datas[0].statistic - activeval,
                    name: "未发电量",
                }, ];
                for (let i = 0; i < datas.length; i++) {
                    let seriesAll = [];
                    let series = [];
                    if (datas[i].name === "计划发电" || datas[i].name === "实际发电") {
                        seriesAll = [{
                                value: datas[i].january !== "-" ? datas[i].january * 1 : 0,
                                name: "一月",
                                nameEn: "january",
                            },
                            {
                                value: datas[i].february !== "-" ? datas[i].february * 1 : 0,
                                name: "二月",
                                nameEn: "february",
                            },
                            {
                                value: datas[i].march !== "-" ? datas[i].march * 1 : 0,
                                name: "三月",
                                nameEn: "march",
                            },
                            {
                                value: datas[i].april !== "-" ? datas[i].april * 1 : 0,
                                name: "四月",
                                nameEn: "april",
                            },
                            {
                                value: datas[i].may !== "-" ? datas[i].may * 1 : 0,
                                name: "五月",
                                nameEn: "may",
                            },
                            {
                                value: datas[i].june !== "-" ? datas[i].june * 1 : 0,
                                name: "六月",
                                nameEn: "june",
                            },
                            {
                                value: datas[i].july !== "-" ? datas[i].july * 1 : 0,
                                name: "七月",
                                nameEn: "july",
                            },
                            {
                                value: datas[i].august !== "-" ? datas[i].august * 1 : 0,
                                name: "八月",
                                nameEn: "august",
                            },
                            {
                                value: datas[i].september !== "-" ? datas[i].september * 1 : 0,
                                name: "九月",
                                nameEn: "september",
                            },
                            {
                                value: datas[i].october !== "-" ? datas[i].october * 1 : 0,
                                name: "十月",
                                nameEn: "october",
                            },
                            {
                                value: datas[i].november !== "-" ? datas[i].november * 1 : 0,
                                name: "十一月",
                                nameEn: "november",
                            },
                            {
                                value: datas[i].december !== "-" ? datas[i].december * 1 : 0,
                                name: "十二月",
                                nameEn: "december",
                            },
                        ];
                    }
                    if (datas[i].name === "计划发电") {
                        this.getPieChart("pieChartY", "计划发电", seriesAll);
                    } else if (datas[i].name === "实际发电") {
                        for (let i = 0; i < val; i++) {
                            series.push(seriesAll[i]);
                        }
                        this.getPieChart("pieChartS", "实际发电", series.concat(obj), datas);
                    }
                }
            },
            getPowerBar(name, title, xAxis, legend, series) {
                let option = {
                    title: {
                        text: this.windTurbinesName + title,
                        textStyle: {
                            fontSize: "16",
                            fontWeight: "bold",
                        },
                    },
                    tooltip: {
                        trigger: "axis",
                        axisPointer: {
                            type: "shadow",
                        },
                    },
                    grid: {
                        left: title === "今日发电量预测" ? "7%" : "6%",
                        right: "5%",
                        bottom: "3%",
                        containLabel: true,
                    },
                    legend: {
                        // bottom: bott,
                        right: "20",
                        data: legend,
                    },
                    xAxis: [{
                        type: "category",
                        axisTick: {
                            show: false,
                        },
                        data: xAxis,
                    }, ],
                    yAxis: [{
                        type: "value",
                        name: "万千瓦时(Wkw/h)",
                        splitLine: {
                            lineStyle: {
                                color: this.theme ? "#000" : "#ccc",
                                type: "dashed", // 修改为虚线
                                opacity: 0.2,
                            }
                        }
                    }, ],
                    series: series,
                };
                if (!this.theme) {
                    option.backgroundColor = "";
                }
                // 基于准备好的dom，初始化echarts实例
                let dom = document.getElementById(name);
                dom.removeAttribute("_echarts_instance_") ?
                    dom.removeAttribute("_echarts_instance_") :
                    "";
                let myChart = this.$echarts.init(dom, this.echartsTheme);
                myChart.setOption(option);
                window.addEventListener("resize", function () {
                    myChart.resize();
                });
            },
            getPieChart(name, title, series, datas) {
                let actureData = null;
                if (name === "pieChartS") {
                    datas.forEach((item) => {
                        if (item.name === "计划发电") {
                            actureData = item;
                        }
                    });
                }
                let option = {
                    title: {
                        text: title,
                        bottom: 10,
                        left: "center",
                    },
                    color: [
                        "#5672c4",
                        "#95cc7a",
                        "#f7c75f",
                        "#e96366",
                        "#7ac1dd",
                        "#47a274",
                        "#f78254",
                        "#9761b2",
                        "#e57cca",
                        "#5672c4",
                        "#95cc7a",
                        "#f7c75f",
                        "#e96366",
                    ],
                    tooltip: {
                        trigger: "item",
                        formatter: (item) => {
                            // debugger
                            let str =
                                `<span style="display:inline-block;margin-bottom:5px;">${item.seriesName}</span></br>`;
                            let monthD = "";
                            for (let i in actureData) {
                                if (item.data.nameEn === i) {
                                    monthD = `<span style="display:inline-block;width: 55%">当月占比：</span>&nbsp;&nbsp;<span>${
                  (item.data.value / actureData[i]).toFixed(2) * 100 + "%"
                }</span></br>`;
                                }
                            }
                            let strMsg = `<div>
                            <span style="display:inline-block;margin-right:4px;margin-top:3px;border-radius:10px;width:10px;height:10px;background-color:${
                              item.color
                            };\"></span>
                            <span style="display:inline-block;width: 40%">${
                              item.data.name
                            }:</span>&nbsp;&nbsp;<span>${
              item.data.value
            }</span></br>
                            ${monthD}
                            <span style="display:inline-block;width: 55%">全年占比：</span>&nbsp;&nbsp;<span>${Math.ceil(
                              item.percent
                            )}%</span></br>
                                </div>`;
                            str = str + strMsg;
                            return str;
                        },
                    },
                    series: [{
                        name: title,
                        type: "pie",
                        radius: "50%",
                        center: ["50%", "50%"],
                        data: series,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: "rgba(0, 0, 0, 0.5)",
                            },
                        },
                    }, ],
                };
                if (!this.theme) {
                    option.backgroundColor = "";
                }
                // 基于准备好的dom，初始化echarts实例
                let dom = document.getElementById(name);
                dom.removeAttribute("_echarts_instance_") ?
                    dom.removeAttribute("_echarts_instance_") :
                    "";
                let myChart = this.$echarts.init(dom, this.echartsTheme);
                myChart.setOption(option);
                let op = myChart.getOption();
                if (name === "pieChartS") {
                    this.changePieColor(op);
                }
                window.addEventListener("resize", function () {
                    myChart.resize();
                });
            },
            changePieColor(op) {
                let showPie = [];
                op.series[0].data.forEach((item, index) => {
                    let obj = {
                        value: op.color[index],
                        name: item.name,
                    };
                    showPie.push(obj);
                });
                this.showpieColor = showPie;
            },
        },
    };
</script>

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

    .themeDark {
        .statistical_wind {
            .windStstus {
                background: #040c0b;
            }
        }

        .lineMain {
            background: #040c0b;

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

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

        .lineMain {
            background: #edeffb;

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