fd_dwgz_zhyw_nx/src/views/economicsOperation/stationAnalyse/windAndPhotovoltaic/index.vue

<template>
  <div class="windAndPhotovoltaic">
    <div class="wp-search">
      <div class="tabCut">
        <div
          @click="tabClick(val.id)"
          :class="[
            tabIndex === val.id ? 'active' : '',
            displayDetail ? 'disabled' : '',
          ]"
          v-for="val in tabOptions"
          :key="val.id"
        >
          <span>{{ val.name }}</span>
        </div>
      </div>
      <el-date-picker
        size="mini"
        type="date"
        v-model="date"
        value-format="YYYY-MM-DD"
        placeholder="请选择"
        style="margin-left: 15px"
        popper-class="date-select"
      >
      </el-date-picker>
      <el-button round size="mini" class="searchColor" @click="getDatas"
        >搜 索</el-button
      >
    </div>
    <div class="wp-content">
      <div class="leftContent">
        <span>{{ selectValue }}</span>
      </div>
      <div class="wp-body">
        <Wind v-if="tabIndex == -1" :date="date" ref="wind" />
        <Photovoltaic v-if="tabIndex == -2" :date="date" ref="voltaic" />
      </div>
    </div>
  </div>
</template>

<script>
import Wind from "@/views/economicsOperation/stationAnalyse/windAndPhotovoltaic/components/wind.vue";
import Photovoltaic from "@/views/economicsOperation/stationAnalyse/windAndPhotovoltaic/components/photovoltaic.vue";
import dayjs from "dayjs";
export default {
  name: "WindAndPhotovoltaic", //风光资源分析
  components: { Wind, Photovoltaic },
  data() {
    return {
      station: "",
      stationOptions: [],
      date: dayjs().add(-1, "day").format("YYYY-MM-DD"),
      tabIndex: -1,
      tabOptions: [
        { id: -1, name: "风电" },
        { id: -2, name: "光伏" },
      ],
    };
  },
  mounted() {},
  computed: {
    selectValue() {
      return this.tabIndex == -1 ? "风资源分析" : "光资源分析";
    },
  },
  methods: {
    tabClick(tab) {
      this.tabIndex = tab;
      this.selectValue = tab == -1 ? "风资源分析" : "光资源分析";
    },
    getDatas() {
      if (this.tabIndex == -1) {
        this.$refs.wind.getData(true);
      } else {
        this.$refs.voltaic.getData();
      }
    },
  },
};
</script>

<style lang="less" scoped>
.windAndPhotovoltaic {
  height: 100%;
  width: 100%;
  padding: 0 20px;
  .wp-search {
    padding: 10px 0;
    .tabCut {
      display: inline-block;

      div {
        display: inline-block;
        width: 60px;
        height: 27px;
        border: 1px solid #274934;
        text-align: center;
        line-height: 25px;
        cursor: pointer;
      }

      div:nth-child(1) {
        border-radius: 13px 0px 0px 13px;
        border-right-width: 0;
      }

      div:nth-child(2) {
        border-radius: 0px 13px 13px 0px;
      }

      .active {
        background-color: rgba(5, 187, 76, 0.9);
        color: #fff;
      }
      .disabled {
        cursor: not-allowed;
        pointer-events: none;
      }
    }
    button {
      margin-left: 10px;
      background: rgba(67, 81, 107, 0.3);
      border: 1px solid #274934;
      color: #b3b3b3;
    }

    .searchColor {
      background-color: rgba(5, 187, 76, 0.2);
      border: 1px solid #3b6c53;
      color: #b3b3b3;
      font-size: 14px;

      &:hover {
        background-color: rgba(5, 187, 76, 0.5);
        color: #ffffff;
      }
    }
  }
  .wp-content {
    height: calc(100% - 40px);
    padding-bottom: 10px;
    .leftContent {
      width: 242px;
      height: 45px;
      line-height: 45px;
      background: url("~@/assets/imgs/title_left_bg1.png") no-repeat;

      span {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #05bb4c;
        margin-left: 25px;
      }
    }
    .wp-body {
      height: calc(100% - 36px);
    }
  }
}
</style>