hb_sis_zhfx/src/views/malfunctionDiagnose/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) => {
                  getProject();
                }
              "
            >
              <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="projectId"
              clearable
              placeholder="请选择"
              popper-class="select"
            >
              <el-option
                v-for="item in projectArray"
                :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="modelId"
              clearable
              placeholder="请选择"
              popper-class="select"
            >
              <el-option
                v-for="item in modelArray"
                :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="typeId"
              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>
    <el-dialog
      title="切入切出风速整合历史"
      v-model="dialogShow"
      width="85%"
      top="10vh"
      custom-class="modal"
      :close-on-click-modal="true"
      @closed="dialogType = ''"
    >
      <ComTable height="100vh" :data="tableHistoryData"></ComTable>
    </el-dialog>
  </div>
</template>

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

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

  // 数据
  data() {
    const that = this;
    return {
      isAsc: "asc",
      wpArray: [],
      wpId: "",
      projectId: "",
      projectArray: [],
      modelId: "2",
      modelArray: [
        {
          id: "2",
          value: "2",
          name: "极限学习机",
        },
        {
          id: "1",
          value: "1",
          name: "决策树分类法",
        },
      ],
      typeId: "1",
      typeArray: [
        {
          id: "1",
          value: "1",
          name: "顺时",
        },
        {
          id: "2",
          value: "2",
          name: "趋势",
        },
      ],
      dialogShow: false,
      tableData: {
        column: [
          {
            name: "风机",
            field: "windturbineid",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "型号",
            field: "inputsmall",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "评分",
            field: "inputsmallratio",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "操作",
            field: "",
            is_num: false,
            is_light: false,
            template() {
              return "<el-button type='text' style='cursor: pointer;'>详情</el-button>";
            },
            click(e, row) {},
          },
        ],
        data: [],
      },
    };
  },

  // 函数
  methods: {
    // 请求服务
    requestData() {
      let that = this;
      that.API.requestData({
        method: "GET",
        subUrl: "powercompare/windfarmAjax",
        success(res) {
          that.wpArray = res.data;
          that.wpId = res.data[0].id;
          that.getProject();
        },
      });
    },

    // 获取期数
    getProject() {
      let that = this;
      that.API.requestData({
        method: "GET",
        subUrl: "powercompare/projectAjax",
        data: {
          wpIds: that.wpId,
        },
        success(res) {
          that.projectArray = res.data;
          that.projectId = res.data[0].id;
          that.getTableData();
        },
      });
    },

    getTableData() {
      let that = this;
      if (!that.wpId || !that.projectId) {
        that.BASE.showMsg({
          msg: "场站与期数不可为空",
        });
      } else if (!that.modelId || !that.typeId) {
        that.BASE.showMsg({
          msg: "模型与时间类型不可为空",
        });
      } else {
        that.API.requestData({
          method: "POST",
          subUrl: "stopanalysis/stopAnalysisList",
          data: {
            wpId: that.projectId,
            isAsc: that.isAsc,
            modelId: that.modelId,
            typeId: that.typeId,
          },
          success(res) {
            console.log(123123, res);
            that.tableData.data = res.data;
          },
        });
      }
    },

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

  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: 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>