sis_zhfx/src/views/totalPowerRank/index.vue

<template>
  <div class="draught-fan-list">
    <div class="query mg-b-8">
      <div class="query-items">
        <div class="query-item">
          <div class="lable">类型：</div>
          <div class="search-input">
            <el-select
              v-model="wpIps"
              clearable
              placeholder="请选择"
              popper-class="select"
              @change="renderWprray"
            >
              <el-option
                v-for="item in typeArray"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              />
            </el-select>
          </div>
        </div>
        <div class="query-item">
          <div class="lable">场站：</div>
          <div class="search-input">
            <el-select
              v-model="wpId"
              clearable
              multiple
              collapse-tags
              placeholder="请选择"
              popper-class="select"
            >
              <el-option
                v-for="item in wpArray"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              />
            </el-select>
          </div>
        </div>
        <div class="query-item">
          <div class="lable">开始日期：</div>
          <div class="search-input">
            <el-date-picker
              v-model="beginDate"
              type="month"
              value-format="YYYY-MM-DD"
              placeholder="选择日期"
              popper-class="date-select"
            >
            </el-date-picker>
          </div>
        </div>
        <div class="query-item">
          <div class="lable">结束日期：</div>
          <div class="search-input">
            <el-date-picker
              v-model="endDate"
              type="month"
              value-format="YYYY-MM-DD"
              placeholder="选择日期"
              popper-class="date-select"
            >
            </el-date-picker>
          </div>
        </div>
      </div>
      <div class="query-actions">
        <button class="btn green" @click="search()">搜索</button>
      </div>
    </div>
    <div class="df-table">
      <ComTable height="100vh" :data="tableData"></ComTable>
    </div>
  </div>
</template>

<script>
import ComTable from "@com/coms/table/table.vue";
export default {
  // 名称
  name: "cutAnalyse",

  // 使用组件
  components: {
    ComTable,
  },

  // 数据
  data() {
    return {
      isAsc: "asc",
      typeArray: [],
      wpIps: "",
      wpArray: [],
      wpId: [],
      beginDate: new Date(new Date().getTime() - 3600 * 1000 * 24).formatDate(
        "yyyy-MM"
      ),
      endDate: new Date().formatDate("yyyy-MM"),
      dialogShow: false,
      tableData: {
        column: [
          {
            name: "风场",
            field: "windfarm",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "风机",
            field: "windturbine",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "起始日期",
            field: "beginDate",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "截止日期",
            field: "endDate",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "平均风速",
            field: "speed",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "发电量(万kwh)",
            field: "generatingCapacity",
            is_num: false,
            is_light: false,
            sortable: true,
          },
        ],
        data: [],
      },
    };
  },

  // 函数
  methods: {
    // 请求服务
    requestData() {
      let that = this;
      that.API.requestData({
        method: "GET",
        subUrl: "powercompare/windfarmAllAjax",
        data: {
          type: that.typeId,
        },
        success(res) {
          that.allWpArray = res.data;
          let fdc = [];
          let gf = [];

          res.data.forEach((ele) => {
            if (ele.id.indexOf("FDC") !== -1) {
              fdc.push(ele.id);
            } else {
              gf.push(ele.id);
            }
          });
          that.typeArray = [
            {
              id: [].concat(fdc, gf).toString(),
              name: "全部",
            },
            {
              id: fdc.toString(),
              name: "风场",
            },
            {
              id: gf.toString(),
              name: "光伏电站",
            },
          ];
          that.wpIps = [].concat(fdc, gf).toString();
          that.renderWprray();
        },
      });
    },

    renderWprray() {
      let wpArray = [];
      if (!this.wpIps) {
        this.wpIps = []
          .concat(
            this.typeArray[1].id.split(","),
            this.typeArray[2].id.split(",")
          )
          .toString();
      }
      this.allWpArray.forEach((ele) => {
        if (this.wpIps.indexOf("FDC") !== -1) {
          if (ele.id.indexOf("FDC") !== -1) {
            wpArray.push(ele);
          }
        } else if (this.wpIps.indexOf("GDC")) {
          if (ele.id.indexOf("GDC") !== -1) {
            wpArray.push(ele);
          }
        } else {
          wpArray.push(ele);
        }
      });
      this.wpId = this.wpIps ? this.wpIps.split(",") : [];
      this.wpArray = wpArray;
      this.getOutputSpeedList();
    },

    getOutputSpeedList() {
      let that = this;
      if (!that.beginDate || !that.endDate) {
        that.BASE.showMsg({
          msg: "日期不可为空",
        });
      } else {
        that.API.requestData({
          method: "GET",
          subUrl: "leaderboard/totalPowerCapacityTopList",
		  showLoading: true,
          data: {
            wpIps: that.wpId.length ? that.wpId.toString() : that.wpIps,
            isAsc: that.isAsc,
            beginDate: that.beginDate + "-01",
            endDate:
              that.endDate +
              "-" +
              (new Date().getDate() < 10
                ? "0" + new Date().getDate()
                : new Date().getDate()),
            orderByColumn: "",
          },
          success(res) {
            res.data.forEach((ele) => {
              ele.beginDate = new Date(ele.beginDate).formatDate("yyyy-MM-dd");
              ele.endDate = new Date(ele.beginDate).formatDate("yyyy-MM-dd");
			  ele.speed = ele.speed.toFixed(2);
            });
            res.data.sort((a, b) => {
              return b.power - a.power;
            });
            that.tableData.data = res.data;
          },
        });
      }
    },

    search() {
      this.getOutputSpeedList();
    },
  },

  created() {
    this.requestData();
  },

  mounted() {},

  unmounted() {},
};
</script>

<style lang="less" scoped>
.draught-fan-list {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .btn-group-tabs {
    display: flex;
    flex-direction: row;

    .photovoltaic {
      margin-left: 1.481vh;
    }
  }

  .df-table {
    border: 0.093vh solid fade(@darkgray, 50%);
    position: relative;
    overflow: hidden;
    flex-grow: 1;
    margin-top: 1.481vh;
    height: 80vh;

    &:before {
      content: "";
      width: 0.37vh;
      height: 0.37vh;
      background: @write;
      position: absolute;
      left: 0.278vh;
      top: 0.278vh;
    }

    tbody {
      height: calc(100vh - 166px);
    }
  }
}
</style>