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="tabs">
                <div class="tab-item" v-for="(item, index) of tabData" :key="item" @click="selectTab(index, item)"
                    :class="{ active: activeIndex == index }">
                    {{ item.text }}
                </div>
            </div>
            <div class="homeMain">
                <div class="homeLeaf">
                    <Row type="flex" class="plan" style="height:20%">
                        <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:78%">
                        <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:20%;">
                        <Col :span="24" style="background: #142446 !important;">
                        <power-plan :data="planData" :title="planBtnName" />
                        </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">
                    <Row type="flex" class="rightplan" v-for="it in rightTableData" :key="it.name" style="height:32%">
                        <Col :span="24">
                        <com-panel :title="it.name" sub-title="（电量单位：万kWh）" 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: [],
                ForecastPower: [],
                fnlyl: dataJson.data.fnlyl,
                zbtqdb: dataJson.data.zbtqdb,
                sbklyl: {},
                lgxzkh: {},
                planData: dataJson.data.planData,
                planBtnName: "全部",
                Powertrend: dataJson.data.Powertrend,
                PowertrendYAxises: [{
                        name: "限电量",
                        min: 0,
                        max: null,
                        unit: "(万kWh)",
                        position: "left",
                    },
                    {
                        name: "限电率",
                        min: 0,
                        max: 10,
                        unit: "(%)",
                        position: "right",
                    },
                ],
                Powerloss: dataJson.data.Powerloss,
                PowerlossYAxises: [{
                        name: "损失电量",
                        min: 0,
                        max: null,
                        unit: "(万kWh)",
                        position: "left",
                    },
                    {
                        name: "限电率",
                        min: 0,
                        max: 10,
                        unit: "(%)",
                        position: "right",
                    },
                ],
                Powersend: dataJson.data.Powersend,
            }
        },
        mounted() {
            this.getGeneratingcapacity()
        },
        methods: {
            selectTab(index, item) {
                this.activeIndex = index;
            },
            //获取发电量和主要经济指标同期对比
            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
                    }
                })
                homeright().then(res =>{
                    if (res.data) {
                        that.rightTableData = [{
                                name: '风能利用率年排名',
                                data: res.data.fnlyl
                            },
                            {
                                name: '设备可利用率年排名',
                                data: res.data.sbklyl
                            },
                            {
                                name: '两个细则考核',
                                data: res.data.lgxzkh
                            },
                        ]
                    }
                })
                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
                    }
                })
            },
        }
    };
</script>

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

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

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

                .rightplan {
                    margin-bottom: 15px;
                }
            }
        }


    }
</style>