fd_dwgz_zhyw_nx/src/views/powerCurve/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="wpId"
              clearable
              placeholder="请选择"
              popper-class="select"
              @change="
                (wpId) => {
                  getWt(wpId, true);
                }
              "
            >
              <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-select
              v-model="wtId"
              clearable
              placeholder="请选择"
              popper-class="select"
            >
              <el-option
                v-for="item in wtArray"
                :key="item.id"
                :value="item.id"
                :label="item.nemCode"
              />
            </el-select>
          </div>
        </div>
        <div class="query-item">
          <div class="lable">日期：</div>
          <div class="search-input">
            <el-date-picker
              v-model="recorddate"
              type="month"
              value-format="YYYY-MM"
              placeholder="选择日期"
              popper-class="date-select"
            >
            </el-date-picker>
          </div>
        </div>
      </div>
      <div class="query-actions">
        <button class="btn green" @click="search">搜索</button>
      </div>
    </div>
    <ScatterLineChart
      xTitle="风速(m/s)"
      yTitle="功率(kw)"
      :showLegend="true"
      :height="'calc(100vh - 40px)'"
      :lineData="chartLineData"
      :data="chartData"
    />
  </div>
</template>

<script>
import ScatterLineChart from "@com/chart/combination/scatter-line-chart.vue";
import api1 from "@api/economic/index.js";
import api from "@api/wisdomOverhaul/energy/index.js";
export default {
  // 名称
  name: "cutAnalyse",

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

  // 数据
  data() {
    return {
      isAsc: "asc",
      wpArray: [],
      wtArray: [],
      wpId: "",
      wtId: "",
      recorddate:
        "2021-09" ||
        new Date(new Date().getTime() - 3600 * 1000 * 24).formatDate("yyyy-MM"),
      chartLineData: {
        xTitle: "风速",
        yTitle: "功率",
        legends: [],
        data: [],
      },
      chartData: [
        {
          title: "",
          value: [],
        },
      ],
    };
  },

  // 函数
  methods: {
    // 获取风场
    getWp(reGetWp) {
      api1
        .getWpList({
          type: "-1",
        })
        .then((res) => {
          if (res.data.code === 200) {
            this.wpArray = res.data.data;
            this.wpId = res.data.data[0].id;
            this.getWt(this.wpId, reGetWp);
          }
        });
    },

    // 获取风机
    getWt(wpid, reGetWp) {
      if (wpid) {
        api1
          .getWtList({
            wpId: wpid,
          })
          .then((res) => {
            if (res.code === 200) {
              this.wtArray = res.data;
              this.wtId = res.data[0].id;
              if (!reGetWp) {
                this.getChartData();
              }
            }
          });
      }
    },

    // 获取图表数据
    getChartData() {
      api
        .scatterScatterWtAjax({
          wtId: this.wtId,
          year: this.recorddate.split("-")[0],
          month: this.recorddate.split("-")[1],
        })
        .then((res) => {
          if (res.data.line.length || res.data.scatter.length) {
            let chartLineData = {
              xTitle: "风速",
              yTitle: "功率",
              legends: [],
              // data: [[], []],
              data: [[]],
            };

            res.data.line.forEach((ele) => {
              // chartLineData.data[0].push(ele[0]);
              // chartLineData.data[1].push(ele[1]);
              chartLineData.data[0].push(ele[1]);
            });

            let chartData = [
              {
                title: "功率曲线拟合",
                value: res.data.scatter,
              },
            ];

            this.chartLineData = chartLineData;
            this.chartData = chartData;
          } else {
            this.BASE.showMsg({
              msg: "所选日期区间暂无数据",
            });
          }
        });

      // let that = this;
      // that.API.requestData({
      //   method: "POST",
      //   subUrl: "scatter/scatterWtAjax",
      //   showLoading: true,
      //   data: {
      //     wtId: that.wtId,
      //     year: that.recorddate.split("-")[0],
      //     month: that.recorddate.split("-")[1],
      //   },
      //   success(res) {
      //     if (res.data.line.length || res.data.scatter.length) {
      //       let chartLineData = {
      //         xTitle: "风速",
      //         yTitle: "功率",
      //         legends: [],
      //         // data: [[], []],
      //         data: [[]],
      //       };

      //       res.data.line.forEach((ele) => {
      //         // chartLineData.data[0].push(ele[0]);
      //         // chartLineData.data[1].push(ele[1]);
      //         chartLineData.data[0].push(ele[1]);
      //       });

      //       let chartData = [
      //         {
      //           title: "功率曲线拟合",
      //           value: res.data.scatter,
      //         },
      //       ];

      //       that.chartLineData = chartLineData;
      //       that.chartData = chartData;
      //     } else {
      //       that.BASE.showMsg({
      //         msg: "所选日期区间暂无数据",
      //       });
      //     }
      //   },
      // });
    },

    search() {
      if (!this.wpId || !this.wtId) {
        this.BASE.showMsg({
          msg: "场站与风机为必选项",
        });
      } else {
        this.getChartData();
      }
    },
  },

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

  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: auto;
    flex-grow: 1;
    margin-top: 1.481vh;
    height: 30vh;

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

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