fd_dwgz_zhyw/src/views/wtSaturability/tab1.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>
      <div class="query-actions">
        <button class="btn green" @click="search">搜索</button>
      </div>
    </div>
    <div class="df-table">
      <ComTable height="35vh" :data="tableData"></ComTable>
    </div>
    <Mlc
      height="300px"
      :list="chartData"
      :units="chartUnit"
      :showLegend="true"
    />
  </div>
</template>

<script>
import ComTable from "@com/coms/table/table.vue";
import Mlc from "@com/chart/line/multiple-line-chart.vue";
import api1 from "@api/economic/index.js";
import api from "@api/wisdomOverhaul/energy/index.js";
export default {
  // 名称
  name: "cutAnalyse",

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

  // 数据
  data() {
    return {
      isAsc: "asc",
      wpArray: [],
      wtArray: [],
      wpId: "",
      wtId: "",
      tableData: {
        column: [
          {
            name: "风机",
            field: "windturbineId",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "风速(m/s)",
            field: "speed",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "实际拟合功率(kW)",
            field: "actualPower",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "最优拟合功率(kW)",
            field: "optimalPower",
            is_num: false,
            is_light: false,
            sortable: true,
          },
        ],
        data: [],
      },
      chartData: [
        {
          title: "",
          yAxisIndex: 0,
          value: [],
        },
      ],
      // chartUnit: ["功率(MW)", "(m/s)"]
      chartUnit: ["功率(MW)"],
    };
  },

  // 函数
  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.getTabData();
                this.getChartData();
              }
            }
          });
      }
    },

    getTabData() {
      api
        .powersaturationPowersaturationamonutlist({
          wtId: this.wtId,
          pageNum: 1,
          pageSize: 5,
        })
        .then((res) => {
          if (res.data) this.tableData.data = res.data.records;
          this.getChartData();
        });
    },

    // 获取图表数据
    getChartData() {
      api
        .powersaturationPowersaturationamonutchart({
          wtId: this.wtId,
        })
        .then((res) => {
          const keyArray = [
            //   {
            //   key: "value1",
            //   title: "风速"
            // },
            {
              key: "value2",
              title: "实际拟合功率",
            },
            {
              key: "value3",
              title: "最优拟合功率",
            },
            {
              key: "value4",
              title: "保证功率",
            },
          ];

          let chartData = [
            //   {
            //   title: "风速",
            //   // yAxisIndex: 1,
            //    yAxisIndex: 0,
            //   value: []
            // },

            {
              title: "实际拟合功率",
              yAxisIndex: 0,
              value: [],
            },
            {
              title: "最优拟合功率",
              yAxisIndex: 0,
              value: [],
            },
            {
              title: "保证功率",
              yAxisIndex: 0,
              value: [],
            },
          ];

          keyArray.forEach((keyEle, keyIndex) => {
            res?.data?.forEach((ele) => {
              chartData[keyIndex].value.push({
                text: "",
                value: ele[keyEle.key],
              });
            });
          });

          this.chartData = chartData;
        });

      // let that = this;
      // that.API.requestData({
      //   method: "POST",
      //   subUrl: "powersaturation/powersaturationamonutchart",
      //   data: {
      //     wtId: that.wtId,
      //   },
      //   success(res) {
      //     const keyArray = [
      //       //   {
      //       //   key: "value1",
      //       //   title: "风速"
      //       // },
      //       {
      //         key: "value2",
      //         title: "实际拟合功率",
      //       },
      //       {
      //         key: "value3",
      //         title: "最优拟合功率",
      //       },
      //       {
      //         key: "value4",
      //         title: "保证功率",
      //       },
      //     ];

      //     let chartData = [
      //       //   {
      //       //   title: "风速",
      //       //   // yAxisIndex: 1,
      //       //    yAxisIndex: 0,
      //       //   value: []
      //       // },

      //       {
      //         title: "实际拟合功率",
      //         yAxisIndex: 0,
      //         value: [],
      //       },
      //       {
      //         title: "最优拟合功率",
      //         yAxisIndex: 0,
      //         value: [],
      //       },
      //       {
      //         title: "保证功率",
      //         yAxisIndex: 0,
      //         value: [],
      //       },
      //     ];

      //     keyArray.forEach((keyEle, keyIndex) => {
      //       res.data.forEach((ele) => {
      //         chartData[keyIndex].value.push({
      //           text: "",
      //           value: ele[keyEle.key],
      //         });
      //       });
      //     });

      //     that.chartData = chartData;
      //   },
      // });
    },

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

  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>