fd_dwgz_zhyw_nx/src/views/economicsOperation/nxfHomePage/index.vue

<template>
    <div style="width: 100%;height:100%;padding: 10px;">
        <div class="operationHome" v-if="$route.path === '/economicsOperation'">
            <!-- <tab @select="selectionItemClick" /> -->
            <div class="homeMain">
                <div class="homeLeaf">
                    <Row type="flex" class="plan" style="height:21%">
                        <Col :span="24">
                        <com-panel title="发电量" sub-title="单位:万kWh" bodyPadd="50px"
                            style="position: relative;height: 100%">
                            <div v-for="it in ForecastPower" :key="it" class="powerName">
                                <span :style="{top: it.top}">{{it.name}}</span>
                                <span :style="{top: it.top1}">{{it.value}}</span>
                                <span :style="{top: it.top2}">{{it.bfb}}%</span>
                                <span :style="{top: it.top3}">理论发电量 {{it.total}}</span>
                            </div>
                            <list-bar-chart-2 :list="ForecastPower" height="15vh" />
                        </com-panel>
                        </Col>
                    </Row>
                    <Row type="flex" class="plan" style="height:79%">
                        <Col :span="24">
                        <com-panel title="主要经济指标同期对比" sub-title="单位:万kWh" style="position: relative;height: 100%">
                            <operationTable :data="zbtqdb" height="100%"></operationTable>
                        </com-panel>
                        </Col>
                    </Row>
                </div>
                <div class="homeCenter">
                    <Row type="flex" style="height:23%;">
                        <Col :span="24" style="background: #142446 !important;">
                        <com-panel title="发电量完成率" sub-title="单位:万kWh" style="position: relative;height: 100%">
                            <power-plan :data="planData" :title="planBtnName" />
                        </com-panel>
                        </Col>
                    </Row>
                    <Row type="flex" style="height:25%">
                        <Col :span="24">
                        <com-panel title="限电" style="position: relative;height: 100%">
                            <multiple-y-line-chart-normal height="100%" :list="Powertrend" :yAxises="PowertrendYAxises"
                                :showLegend="true" :hoverType="'axis'" />
                        </com-panel>
                        </Col>
                    </Row>
                    <Row type="flex" style="height:25%">
                        <Col :span="24">
                        <com-panel title="损失电量" style="position: relative;height: 100%">
                            <multiple-y-line-chart-normal height="100%" :list="Powerloss" :yAxises="PowerlossYAxises"
                                :showLegend="true" :hoverType="'axis'" />
                        </com-panel>
                        </Col>
                    </Row>
                    <Row type="flex" style="height:26%">
                        <Col :span="24">
                        <com-panel title="发电量" style="position: relative;height: 100%">
                            <!-- <marker-line-chart :height="'100%'" :list="Powersend" myUnit='MW' :showLegend="true" /> -->
                            <multiple-bar-chart :list="Powersend" :units="['电量(万kwh)']" height="100%"
                                :showLegend="true" />
                        </com-panel>
                        </Col>
                    </Row>
                </div>
                <div class="homeRight">
                    <div class="tabs">
                        <div class="tab-item" v-for="(item, index) of tabData" :key="item"
                            :class="{ active: activeIndex == index }"
                            @click="selectTab(index, item)">
                            {{ item.text }}
                        </div>
                    </div>
                    <Row type="flex" class="rightplan" v-for="it in rightTableData" :key="it.name" style="height:50%">
                        <Col :span="24">
                        <com-panel :title="it.name"  style="position: relative;height: 100%">
                            <operationTable :data="it.data" height="100%"></operationTable>
                        </com-panel>
                        </Col>
                    </Row>
                </div>
            </div>
        </div>
        <router-view v-else />
    </div>
</template>

<script>
    import {
        generatingcapacity,
        homeright,
        homemiddle
    } from "@/api/economicIndex";
    import Row from "@com/coms/grid/row.vue";
    import Col from "@com/coms/grid/col.vue";
    import ComPanel from "@com/coms/panel/panel";
    import ListBarChart2 from "@com/chart/bar/list-bar-chart2.vue";
    import forecastBarComponent from "./component/forecastBarComponent.vue";
    import Tab from "@com/coms/tabs/tab.vue";
    import operationTable from "./component/operationTable.vue";
    import PowerPlan from "./component/power-plan.vue";
    import dataJson from "./component/dataJJJson.json"
    import MultipleYLineChartNormal from "./component/multiple-y-line-chart-normal.vue";
    import MultipleBarChart from "./component/multiple-bar-chart.vue";
    export default {
        name: "economicsOperation",
        components: {
            Row,
            Col,
            ComPanel,
            ListBarChart2,
            Tab,
            forecastBarComponent,
            operationTable,
            PowerPlan,
            MultipleYLineChartNormal,
            MultipleBarChart
        },
        data() {
            return {
                activeIndex: 0,
                tabData: [{
                    id: "year",
                    text: "年",
                }, {
                    id: "month",
                    text: "月",
                }, {
                    id: "week",
                    text: "周",
                }, ],
                rightTableData: [{
                        name: '风能利用率年排名',
                        data: []
                    },
                    {
                        name: '设备可利用率年排名',
                        data: []
                    }
                ],
                ForecastPower: [],
                fnlyl: dataJson.data.fnlyl,
                zbtqdb: {},
                sbklyl: {},
                lgxzkh: {},
                planData: {},
                planBtnName: "全部",
                Powertrend: [],
                PowertrendYAxises: [{
                        name: "限电量",
                        min: 0,
                        max: null,
                        unit: "(万kWh)",
                        position: "left",
                    },
                    {
                        name: "限电率",
                        min: 0,
                        max: 10,
                        unit: "(%)",
                        position: "right",
                    },
                ],
                Powerloss: [],
                PowerlossYAxises: [{
                        name: "损失电量",
                        min: 0,
                        max: null,
                        unit: "(万kWh)",
                        position: "left",
                    },
                    {
                        name: "限电率",
                        min: 0,
                        max: 10,
                        unit: "(%)",
                        position: "right",
                    },
                ],
                Powersend: [],
                timmer: null, // 定时器开关
            }
        },
        mounted() {
            this.getGeneratingcapacity()
             this.timmer = setInterval(() => {
                this.getGeneratingcapacity();
            }, 10000);
        },
        unmounted() {
            clearInterval(this.timmer);
            this.timmer = null;
        },
        methods: {
            selectTab(index, item) {
                console.log("ind===>>>", index)
                this.activeIndex = index;
                this.changeRightData()
            },
            changeRightData() {
                let that = this
                homeright({
                    periodType: this.activeIndex === 0 ? "year" : this.activeIndex === 1 ? "month" : "week"
                }).then(res =>{
                    if (res.data) {
                        that.rightTableData = [{
                                name: '风能利用率年排名',
                                data: res.data.fnlyl
                            },
                            {
                                name: '设备可利用率年排名',
                                data: res.data.sbklyl
                            },
                            // {
                            //     name: '两个细则考核',
                            //     data: res.data.lgxzkh
                            // },
                        ]
                    }
                })
                // .catch(e => {
                //     that.rightTableData = [{
                //             name: '风能利用率年排名',
                //             data: dataJson.data.fnlyl
                //         },
                //         {
                //             name: '设备可利用率年排名',
                //             data: dataJson.data.sbklyl
                //         },
                //     ]
                // })
            },
            //获取发电量和主要经济指标同期对比
            getGeneratingcapacity() {
                let that = this
                generatingcapacity().then(res => {
                    if (res.data) {
                        if (res.data.fdl?.length>0) {
                            res.data.fdl.forEach(it => {
                                dataJson.data.fdl.forEach(iv =>{
                                    if (it.name === iv.name) {
                                        iv.bfb = it.bfb === 0 ? 1 : it.bfb
                                        iv.total = it.total === 0 ? 1 : it.total
                                        iv.value = it.value === 0 ? 0 : it.value
                                    }
                                })
                            })
                            that.ForecastPower = dataJson.data.fdl
                        }
                        that.zbtqdb = res.data.zbtqdb
                    }
                })
                // .catch(e => {
                //     that.zbtqdb = dataJson.data.zbtqdb
                // })
                homemiddle().then(res =>{
                    if (res.data) {
                        that.planData = res.data.planData
                        that.Powertrend = res.data.Powertrend
                        that.Powersend = res.data.Powersend
                        that.Powerloss = res.data.Powerloss
                    }
                })
                // .catch(e => {
                //     that.planData = dataJson.data.planData
                //     that.Powertrend = dataJson.data.Powertrend
                //     that.Powersend = dataJson.data.Powersend
                //     that.Powerloss = dataJson.data.Powerloss
                // })
                this.changeRightData()
            },
        },
        watch: {
            $route: {
                handler(val) {
                    // debugger
                    if (val.path !== "/economicsOperation") {
                        clearInterval(this.timmer);
                        this.timmer = null;
                    } else {
                        this.timmer = setInterval(() => {
                            this.getGeneratingcapacity();
                        }, 10000);
                    }
                },
            },
        },
    };
</script>

<style lang="less">
    .operationHome {
        width: 100%;
        height: 100%;

       

        .homeMain {
            width: 100%;
            height: calc(100% - 25px);
            display: flex;
            justify-content: space-between;

            .homeLeaf {
                width: 25%;
                height: 100%;

                .powerName {
                    span {
                        position: absolute;

                        &:nth-child(1) {
                            font-size: 12px;
                            left: 30px;
                        }

                        &:nth-child(2) {
                            font-size: 16px;
                            left: 85px;
                        }

                        &:nth-child(3) {
                            font-size: 12px;
                            right: 10px;
                        }

                        &:nth-child(4) {
                            font-size: 12px;
                            right: 50px;
                        }
                    }
                }
            }

            .homeCenter {
                width: 48%;
                height: 100%;
            }

            .homeRight {
                width: 25%;
                height: 100%;
                position: relative;

                .rightplan {
                    margin-bottom: 15px;
                }

                 .tabs {
                    position: absolute;
                    right: 0;
                    z-index: 11111;
                    display: flex;
                    color: #fff;
                    margin-bottom: 1.111vh;
                    font-size: 12px;
                    display: flex;
                    justify-content: end;

                    .tab-item {
                        padding: 0.37vh 1.852vh;
                        cursor: pointer;

                        &.active {
                            color: #fff;
                            position: relative;
                            background-image: linear-gradient(to top, fade(#2169c3, 50%), fade(#2169c3, 0));

                            &::after {
                                content: "";
                                position: absolute;
                                width: 100%;
                                height: 0.463vh;
                                border: 0.093vh solid #2169c3;
                                border-top: 0;
                                left: 0;
                                bottom: 0;
                                box-sizing: border-box;
                            }
                        }
                    }
                }
            }
        }


    }
</style>