windLifecontrolPro/src/views/powerPrediction/panoramicPower.vue

<template>
    <div class="panoramicPowerPage" :class="!theme ? 'themeDark' : 'themeLight'">
        <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 class="windLeft">
                <div class="windMsg">
                    <span>总装机：</span>
                    <span>{{ allStatus.zzj }}台组</span>
                </div>
                <div class="windMsg">
                    <span>总装机容量：</span>
                    <span>{{ allStatus.zzjrl }}Mw</span>
                </div>
            </div>
        </div>
        <div class="lineMain" :style="pageHeight" v-loading="loading">
            <el-row>
                <el-col :span="8" v-for="(item, index) in chartsData" :key="index">
                    <div class="lineStyle" v-on:dblclick="doubleclick(item)" style="position: relative">
                        <div style="
                display: flex;
                float: right;
                justify-content: end;
                margin-right: 53px;
              ">
                            <div v-for="it in item.showpowerLegend" :key="it.name">
                                <span class="lineColor" :style="{ background: it.color }"></span>
                                <span class="powerLegendColor" :style="{ background: it.color }"></span>
                                <span :style="!theme ? 'color: #fff' : ''" style="
                    font-size: 12px;
                    margin-left: 12px;
                    position: relative;
                    top: 1px;
                  ">{{ it.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' + Number(index + 1)" :style="lineChartStyle"></div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <panorama-dialog ref="panorama" from="panoramicPower" :ExceedTimeList="ExceedTimeList"
            :echartsTheme="echartsTheme" :theme="theme"></panorama-dialog>
    </div>
</template>

<script>
    import panoramaDialog from "@/components/powerPredictionComponent/panoramicPowerDialog/panoramaPowerDialogPage.vue";
    import {
        apiGetpanoramicPowerCharts,
        apiGetStatusInfoAll
    } from "../../api/api";
    import oneimg from "@/assets/windStatusPic/yunxing.png";
    import twoimg from "@/assets/windStatusPic/daiji.png";
    import threeimg from "@/assets/windStatusPic/weihu.png";
    import fourimg from "@/assets/windStatusPic/tingji.png";
    import fiveimg from "@/assets/windStatusPic/xiandian.png";
    import siximg from "@/assets/windStatusPic/shoulei.png";
    import sevenimg from "@/assets/windStatusPic/guzhang.png";
    import oneimg1 from "@/assets/windStatusPic/yunxing_W.png";
    import twoimg1 from "@/assets/windStatusPic/daiji_W.png";
    import threeimg1 from "@/assets/windStatusPic/weihu_W.png";
    import fourimg1 from "@/assets/windStatusPic/tingji_W.png";
    import fiveimg1 from "@/assets/windStatusPic/xiandian_W.png";
    import siximg1 from "@/assets/windStatusPic/shoulei_W.png";
    import sevenimg1 from "@/assets/windStatusPic/guzhang_W.png";

    import jsonData from "./component/panoramicPower.json";
    import {
        apiGethomeData
    } from "@/api/gengra";
    export default {
        components: {
            panoramaDialog,
        },
        data() {
            return {
                statusData: [],
                statusDataW: [],
                chartsData: [],
                weatherDataFromApi: {},
                pickerTime: [],
                loading: false,
                planFiveMin: "",
                allStatus: {},
                showpowerLegend: [],
                echartsTheme: "",
                theme: null,
                wpId: "GJNY_SXGS_DBXNY_ZGS0",
            };
        },
        watch: {
            "$store.state.theme": {
                handler: function (newVal, oldVal) {
                    this.theme = newVal;
                    this.echartsTheme = !newVal ? "dark" : "";
                    this.getChartData();
                },
                immediate: true,
            },
        },
        created() {
            this.weatherDataFromApi = JSON.parse(
                window.sessionStorage.getItem("weatherData")
            );
            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: fiveimg,
                    name: "限电",
                    nameEn: "xdsum",
                    borderSty: "#C530C8",
                    backSty: "#7A277F",
                    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: 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: fiveimg1,
                    name: "限电",
                    nameEn: "xdsum",
                    borderSty: "#E757EA",
                    backSty: "#C530C8",
                    numBack: "#901193",
                    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: 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.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.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
                ),
            ];
        },
        mounted() {
            let that = this;
            // that.initPageData();
            // that.getChartData();
            that.getWindStatus();
            that.planFiveMin = setInterval(function () {
                that.getChartData();
            }, 300000);
        },
        computed: {
            pageHeight() {
                return {
                    // 'width': '100%',
                    height: document.documentElement.clientHeight - 110 + "px",
                };
            },
            lineChartStyle() {
                let heightChart = "";
                // let pageHeight = document.documentElement.clientHeight-120-(Math.ceil(this.chartsData.length/3)*40)
                let pageHeight =
                    document.documentElement.clientHeight -
                    100 -
                    Math.ceil(this.chartsData.length / 3) * 40;
                if (this.chartsData.length <= 3) {
                    heightChart = "350px";
                } else {
                    heightChart = pageHeight / Math.ceil(this.chartsData.length / 3) + "px";
                }
                return {
                    width: "100%",
                    height: heightChart,
                    // 'height': '300px'
                };
            },
        },
        beforeRouteLeave(to, from, next) {
            next();
            if (this.planFiveMin) {
                clearInterval(this.planFiveMin);
                this.planFiveMin = null;
            }
        },
        methods: {
            initPageData() {
                const that = this;
                that.$nextTick(() => {
                    {
                        let xAxis = [];
                        xAxis = jsonData.panoramicPowerData.dateList.map((it) =>
                            it.substring(it.indexOf(" ") + 1, it.length)
                        );
                        that.chartsData = jsonData.panoramicPowerData.stationInformationList;
                        that.chartsData.forEach((item, index) => {
                            item.showpowerLegend = [{
                                    name: "理论",
                                    color: "#5672c4",
                                },
                                {
                                    name: "可用",
                                    color: "#95cc7a",
                                },
                                {
                                    name: "AGC",
                                    color: "#f7c75f",
                                },
                                {
                                    name: "超短期",
                                    color: "#e96366",
                                },
                                {
                                    name: "实际",
                                    color: "#7ac1dd",
                                },
                            ];
                            let legend = [];
                            let series = [];
                            let namess = "";
                            for (let i = 0; i < item.dataFormatList.length; i++) {
                                if (item.dataFormatList[i].name !== "短期") {
                                    legend.push(item.dataFormatList[i].name);
                                    namess = item.name;
                                    let seriesObj = {
                                        name: item.dataFormatList[i].name,
                                        type: "line",
                                        data: item.dataFormatList[i].data.map((it) => {
                                            return this.$utils.isHasNum(it);
                                        }),
                                        symbol: "none",
                                    };
                                    series.push(seriesObj);
                                }
                            }
                            this.$nextTick(() => {
                                this.getPowerLine(namess, index, xAxis, legend, series);
                            });
                        });
                        that.loading = false;
                    }

                    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;
                });
            },
            statusSty(item) {
                return `border: 1px solid ${item.borderSty};background: ${item.backSty}`;
            },
            statusNumSty(item) {
                return `border: 1px solid ${item.borderSty};background:${item.numBack}`;
            },
            doubleclick(item) {
                console.log("db", item);
                this.$refs.panorama.dialogVisible = true;
                this.$refs.panorama.stationData = item;
                this.$refs.panorama.title = item.name + "功率预测";
                this.$refs.panorama.pickerTime = this.pickerTime;
                this.$nextTick(() => {
                    this.$refs.panorama.getChartsData();
                    this.$refs.panorama.getTableData();
                });
            },
            //获取风机状态
            getWindStatus() {
                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;
                        }
                    }
                });
            },
            statusIcon(type) {
                let picture = "";
                if (type === "1") {
                    picture = "yunxingPic";
                } else if (type === "2") {
                    picture = "daijiPic";
                } else if (type === "3") {
                    picture = "weihuPic";
                } else if (type === "4") {
                    picture = "tingjiPic";
                } else if (type === "5") {
                    picture = "xiandianPic";
                } else if (type === "6") {
                    picture = "lixianPic";
                } else if (type === "7") {
                    picture = "jianxiuPic";
                }
                return picture;
            },
            getChartData() {
                this.loading = true;
                this.chartsData = [];
                apiGetpanoramicPowerCharts().then((datas) => {
                    if (datas && datas.data) {
                        let xAxis = [];
                        if (datas.data.dateList) {
                            xAxis = datas.data.dateList.map((it) =>
                                it.substring(it.indexOf(" ") + 1, it.length)
                            );
                        }
                        if (datas.data.stationInformationList) {
                            this.chartsData = datas.data.stationInformationList;
                            this.chartsData.forEach((item, index) => {
                                item.showpowerLegend = [{
                                        name: "理论",
                                        color: "#5672c4",
                                    },
                                    {
                                        name: "可用",
                                        color: "#95cc7a",
                                    },
                                    {
                                        name: "AGC",
                                        color: "#f7c75f",
                                    },
                                    {
                                        name: "超短期",
                                        color: "#e96366",
                                    },
                                    {
                                        name: "实际",
                                        color: "#7ac1dd",
                                    },
                                ];
                                let legend = [];
                                let series = [];
                                let namess = "";
                                for (let i = 0; i < item.dataFormatList.length; i++) {
                                    if (item.dataFormatList[i].name !== "短期") {
                                        legend.push(item.dataFormatList[i].name);
                                        namess = item.name;
                                        let seriesObj = {
                                            name: item.dataFormatList[i].name,
                                            type: "line",
                                            data: item.dataFormatList[i].data.map((it) => {
                                                return this.$utils.isHasNum(it);
                                            }),
                                            symbol: "none",
                                        };
                                        series.push(seriesObj);
                                    }
                                }
                                this.$nextTick(() => {
                                    this.getPowerLine(namess, index, xAxis, legend, series);
                                });
                            });
                        }
                        this.loading = false;
                    }
                });
            },
            getPowerLine(name, numxc, xAxis, legend, series) {
                let namevc = "lineChart" + Number(numxc + 1);
                let option = {
                    title: {
                        text: name,
                        textStyle: {
                            fontSize: "16",
                            fontWeight: "bold",
                        },
                    },
                    tooltip: {
                        trigger: "axis",
                        formatter: (item) => {
                            // debugger

                            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.chartsData[numxc].showpowerLegend[index].name =
                                            it.seriesName;
                                        this.chartsData[numxc].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.chartsData[numxc].showpowerLegend[index].name = "超短期";
                                        } else {
                                            this.chartsData[numxc].showpowerLegend[index].name = "短期";
                                        }
                                        this.chartsData[numxc].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.chartsData[numxc].showpowerLegend[3].name = "超短期";
                                } else {
                                    this.chartsData[numxc].showpowerLegend[3].name = "短期";
                                }
                                this.chartsData[numxc].showpowerLegend[3].color = item[0].color;
                                str = str + strMsg;
                            }
                            return str;
                        },
                    },
                    legend: {
                        top: 0,
                        right: 0,
                        data: legend,
                        show: false,
                    },
                    grid: {
                        left: "5%",
                        right: "4%",
                        bottom: "3%",
                        containLabel: true,
                    },
                    xAxis: {
                        type: "category",
                        boundaryGap: false,
                        data: xAxis,
                    },
                    yAxis: {
                        type: "value",
                        name: "兆瓦(Mw)",
                    },
                    series: series,
                };
                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",
                            },
                        ],
                    };
                }
                if (!this.theme) {
                    option.backgroundColor = "";
                }
                // 基于准备好的dom，初始化echarts实例
                let dom = document.getElementById(namevc);
                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/panoramicPowerLess.less";

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

        .lineMain {
            background: #040c0b;

            .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;
                        }
                    }
                }
            }
        }
    }

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

        .lineMain {
            background: #edeffb;

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