hb_sis_zhfx/src/components/coms/wt-chooser/wt-chooser.vue

<template>
  <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="getWtList">
            <el-option v-for="item in wpList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </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" @change="wtChange">
            <el-option v-for="item in wtList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  // 传参
  props: {
    wpId: { type: String, default: "MHS_FDC" },
    wtId: { type: String, default: "MG01_01" },
  },
  // 事件
  emits: {
  },
  data() {
    return {
      wpList: [],
      wtList: [],
    };
  },
  created() {
    this.getWpList();
    this.getWtList();
  },
  methods: {
    async getWpList() {
      const { data } = await this.API.requestData({
        subUrl: "powercompare/windfarmAjax",
      });
      this.wpList = data.data;
    },
    async getWtList() {
      const { data } = await this.API.requestData({
        subUrl: "powercompare/windturbineAjax",
        data: {
          wpId: this.wpId,
        },
      });
      this.wtList = data.data;
    },
    wtChange() {
      this.$emit("change", { wtId: this.wtId, wpId: this.wpId });
    },
  },
};
</script>

<style lang="less">
</style>