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

<template>
  <div style="width: 100%; height: 100%; padding: 10px; background: #030713">
    <el-tabs v-model="tabActiveName" class="jjyxTabs" v-if="false">
      <el-tab-pane label="运行指标" name="yxzb">
        <iframe
          :src="
            iframeUrl +
            '/index.html/#/runtime/b0d3f1f4-3e5d-429b-af81-2661e7099caa/862c8272-8cf8-435c-b3fc-b28936b4bfe0?instanceId=82546b6b-59a3-7a1b-fbd4-b2d4516cf991'
          "
          class="yxzbBox"
        ></iframe>
      </el-tab-pane>
      <el-tab-pane label="经济分析" name="jjfx">
        <div class="operationHome">
          <!-- <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 + tabData[activeIndex].text + '排名'"
                    style="position: relative; height: 100%"
                  >
                    <operationTable
                      :data="it.data"
                      height="100%"
                    ></operationTable>
                  </com-panel>
                </Col>
              </Row>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>

    <div
      class="operationHome"
      :style="`height:${
        switchTabShow() ? '100%' : 'calc(100% - 20px);margin-top:20px;'
      }`"
      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 + tabData[activeIndex].text + '排名'"
                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 {
      tabActiveName: "jjfx",
      activeIndex: 0,
      iframeUrl: "",
      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, // 定时器开关
    };
  },

  created() {
    this.iframeUrl = process.env.VUE_APP_URL;
  },
  mounted() {
    this.getGeneratingcapacity();
    this.timmer = setInterval(() => {
      this.getGeneratingcapacity();
    }, 10000);
  },

  unmounted() {
    clearInterval(this.timmer);
    this.timmer = null;
  },

  methods: {
    switchTabShow() {
      return (
        window.location.href.indexOf("#/integratedAlarm") === -1 &&
        window.location.href.indexOf("#/nxreport") === -1
      );
    },

    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">
.jjyxTabs {
  width: 100%;
  height: calc(100% - 40px);

  .el-tabs__header {
    margin-bottom: 8px;
  }

  .el-tabs__content,
  .el-tab-pane {
    width: 100%;
    height: 100%;
  }

  .yxzbBox {
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0;
    margin: 0;
    outline: 0;
  }
}
.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>