hb_sis_zhfx/src/views/malfunctionRecall/index.vue

<template>
  <div class="knowledge-2">
    <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.name"
              />
            </el-select>
          </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 class="query-item">
          <div class="query-item">
            <div class="lable">开始日期：</div>
            <div class="search-input">
              <el-date-picker
                v-model="value1"
                @change="BeginChange(value1)"
                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="value2"
                @change="EndChange(value2)"
                type="date"
                value-format="YYYY-MM-DD"
                placeholder="选择日期"
                popper-class="date-select"
              >
              </el-date-picker>
              <div class="unit svg-icon svg-icon-gray">
                <svg-icon :svgid="''" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="query-actions" style="margin-right: 1500px">
        <button class="btn green" @click="onClickSearch">查询</button>
      </div>
    </div>
    <div>
      <ComTable :data="tableData" height="85vh"></ComTable>
    </div>
    <div>
      <el-dialog
        title="故障诊断"
        v-model="dialogVisible"
        width="1400px"
        top="10vh"
        custom-class="modal hide-header"
        :close-on-click-modal="false"
        :before-close="onClickDialogClose"
      >
        <fault-diagnosis :data="rowitem" ref="rowitemS" :key="componentKey" />
      </el-dialog>
    </div>
  </div>
</template>

<script>
import ComTable from "@com/coms/table/table.vue";
import FaultDiagnosis from "./components/fault-diagnosis.vue";
import api from "@api/wisdomOverhaul/fault/index.js";
import api1 from "@api/economic/index.js";

export default {
  components: { ComTable, FaultDiagnosis },
  data() {
    const that = this;
    return {
      componentKey: 0,
      value1: "",
      value2: "",
      wpId: "",
      wpArray: [],
      rowitem: "",
      wpName: "",
      wtId: "",
      type: "2",
      dialogVisible: false,
      tableData: {
        column: [
          {
            name: "场站",
            field: "wpName",
            is_num: true,
            is_light: false,
          },
          {
            name: "机组",
            field: "windTurbineId",
            is_num: false,
            is_light: false,
          },
          {
            name: "开始时刻",
            field: "stopTime",
            is_num: false,
            is_light: false,
          },
          {
            name: "结束时刻",
            field: "startTime",
            is_num: false,
            is_light: false,
          },
          {
            name: "停机小时数(h)",
            field: "stopHours",
            is_num: false,
            is_light: false,
          },
          {
            name: "停机类型",
            field: "warnDesc",
            is_num: false,
            is_light: false,
          },
          {
            name: "损失电量(kWh)",
            field: "lossPower",
            is_num: false,
            is_light: false,
          },
          {
            name: "操作",
            field: "",
            is_num: false,
            is_light: false,
            template() {
              return "<el-button type='text' style='cursor: pointer;'>回溯</el-button>";
            },
            click(e, row) {
              that.onClickOption(row);
            },
          },
        ],
        data: [],
      },
    };
  },
  created() {
    this.value1 = new Date(new Date().getTime() - 3600 * 1000 * 24).formatDate(
      "yyyy-MM-dd"
    );
    this.value2 = this.getTime(2);
    this.getWp();
  },
  methods: {
    getTime(val) {
      //时间戳处理，val=1是默认开始时间（当前月第一天），val=2是默认结束时间（今天）
      var date = new Date();
      var year = date.getFullYear(),
        month = date.getMonth() + 1,
        day = date.getDate();
      month >= 1 && month <= 9 ? (month = "0" + month) : "";
      day >= 0 && day <= 9 ? (day = "0" + day) : "";
      var begin = year + "-" + month + "-01";
      var end = year + "-" + month + "-" + day;
      if (val == 1) {
        return begin;
      } else if (val == 2) {
        return end;
      }
    },
    // 获取风场
    getWp(reGetWp) {
      api1.benchmarkingWplist().then((res) => {
        this.wpArray = res.data;
        this.wpId = res.data[0].id;
        this.wpName = res.data[0].wpName;
        this.getWt(this.wpId, reGetWp);
        this.requestSafeList();
      });
    },

    // 获取风机
    getWt(wpid, reGetWp) {
      let that = this;
      if (that.wpId) {
        api1
          .benchmarkingWtList({
            wpid,
          })
          .then((res) => {
            this.wtArray = res.data;
            // that.wtId = res.data[0].id;
          });
      }
    },
    BeginChange(vl) {
      this.value1 = vl;
    },
    EndChange(vl) {
      this.value2 = vl;
    },
    typeChange(vl) {
      this.type = vl;
    },
    // 搜索按钮
    onClickSearch() {
      this.requestSafeList();
    },
    // 获取停机事件
    requestSafeList() {
      let that = this;

      let data = {
        tablepar: {
          pageNum: 1,
          pageSize: 1000,
        },
        beginDate: that.value1,
        endDate: that.value2,
        wpId: that.wpId,
        type: 2,
        wtId: null,
      };

      if (that.wtId != "") data.wtId = that.wtId;
      if (that.type != "") data.type = that.type;

      api.eventGetShutdownevent(data).then((res) => {
        if (res.code == 200) {
          this.tableData.data = [];
          if (res.data.list.length) {
            let data = res.data.list;
            for (var i = 0; i < data.length; i++) {
              let obj = {
                wpName: data[i].wpName,
                windTurbineId: data[i].windTurbineId,
                stopTime: new Date(data[i].stopTime).formatDate(
                  "yyyy-MM-dd hh:mm:ss"
                ),

                stopHours: data[i].stopHours,
                statusName: data[i].statusName,
                warnDesc: data[i].warnDesc,
                lossPower: data[i].lossPower,
                handleWay: data[i].handleWay,
              };
              if (data[i].startTime)
                obj.startTime = new Date(data[i].startTime).formatDate(
                  "yyyy-MM-dd hh:mm:ss"
                );
              this.tableData.data.push(obj);
            }
          }
        }
      });
    },
    // 回放按钮
    onClickOption(row) {
      this.rowitem = row;
      this.dialogVisible = true;
      this.componentKey += 1;
    },
    // 关闭弹窗
    onClickDialogClose() {
      this.dialogVisible = false;
    },
  },
};
</script>

<style lang="less" scope>
@titleGray: #9ca5a8;
@rowGray: #606769;
@darkBack: #536268;
.knowledge-2 {
  .el-select {
    width: 200px;
  }
  .el-input {
    width: 200px;
  }
}
</style>