hb_sis_zhfx/src/views/allLifeManage/tab3.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="getWtArray"
            >
              <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.name"
              />
            </el-select>
          </div>
        </div>
        <div class="query-item">
          <div class="lable">开始日期：</div>
          <div class="search-input">
            <el-date-picker
              v-model="starttime"
              type="date"
              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="endtime"
              type="date"
              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-select
              v-model="type"
              clearable
              placeholder="请选择"
              popper-class="select"
            >
              <el-option
                v-for="item in typeArray"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              />
            </el-select>
          </div>
        </div>
      </div>
      <div class="query-actions">
        <button class="btn green" @click="search()">查询</button>
      </div>
    </div>
    <div class="df-table">
      <ComTable height="78vh" :data="tableData"></ComTable>
    </div>
  </div>
</template>

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

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

  // 数据
  data() {
    const that = this;
    return {
      wpArray: [],
      wpId: "",
      wtArray: [],
      wtId: "",
      type: "异动",
      typeArray: [
        {
          id: "检修",
          label: "检修",
          value: "检修",
        },
        {
          id: "异动",
          label: "异动",
          value: "异动",
        },
        {
          id: "故障",
          label: "故障",
          value: "故障",
        },
      ],
      starttime: new Date().formatDate("yyyy-MM") + "-01",
      endtime: new Date().formatDate("yyyy-MM-dd"),
      tableData: {
        column: [
          {
            name: "检修负责人",
            field: "leader",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "检修类型",
            field: "type",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "风机编号",
            field: "wtnum",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "开始时间",
            field: "starttime",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "结束时间",
            field: "endtime",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "检修原因",
            field: "problem",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "检修方式",
            field: "solveway",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "设备唯一编号",
            field: "eqnum",
            is_num: false,
            is_light: false,
            sortable: true,
          },
        ],
        data: [],
      },
    };
  },

  // 函数
  methods: {
    // 获取风场

    getWpArray() {
      api1.benchmarkingWplist({}).then((res) => {
        this.wpArray = res.data;
        this.wpId = this.wpId || res.data[0].id;
        this.getWtArray(this.wpId, true);
      });
    },
    // getWpArray() {
    //   // let that = this;
    //   // that.API.requestData({
    //   //   method: "GET",
    //   //   subUrl: "powercompare/windfarmAjax",
    //   //   success (res) {
    //   //     that.wpArray = res.data;
    //   //     that.wpId = that.wpId || res.data[0].id;
    //   //     that.getWtArray(that.wpId, true);
    //   //   }
    //   // });
    // },

    // 获取风机
    getWtArray(wpId, keepRequest) {
      let that = this;
      if (wpId) {
        api1
          .powercompareWindturbineAjax({
            wpId: wpId,
          })
          .then((res) => {
            this.wtArray = res.data;
            const findRes = res.data.some((ele) => {
              return ele.id === this.wtId;
            });
            this.wtId = findRes ? this.wtId : res.data[0].id;
            this.getTableData();
          });

        // that.API.requestData({
        //   method: "GET",
        //   subUrl: "powercompare/windturbineAjax",
        //   data: {
        //     wpId,
        //   },
        //   success(res) {
        //     that.wtArray = res.data;
        //     const findRes = res.data.some((ele) => {
        //       return ele.id === that.wtId;
        //     });
        //     that.wtId = findRes ? that.wtId : res.data[0].id;
        //     that.getTableData();
        //   },
        // });
      } else {
        that.wtArray = [];
        that.wtId = "";
      }
    },

    getTableData() {
      let that = this;
      if (!that.wpId || !that.starttime || !that.endtime) {
        that.BASE.showMsg({
          msg: "场站与日期不可为空",
        });
      } else {
        api
          .equoperationrecordList({
            wtid: this.wtId,
            starttime: this.starttime,
            endtime: this.endtime,
            type: this.type,
            pagenum: 1,
            pagesize: 50000,
          })
          .then((res) => {
            this.tableData.data = res.data.records;
          });

        // that.API.requestData({
        //   method: "GET",
        //   baseURL: "http://192.168.1.18:9988/",
        //   subUrl: "equoperationrecord/list",
        //   data: {
        //     wtid: that.wtId,
        //     starttime: that.starttime,
        //     endtime: that.endtime,
        //     type: that.type,
        //     pagenum: 1,
        //     pagesize: 50000,
        //   },
        //   success(res) {
        //     that.tableData.data = res.data.records;
        //   },
        // });
      }
    },

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

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

  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;

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

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