jn_sis_zhfx/src/views/IntegratedAlarm/safe/stopQuery/index.vue

<template>
  <div class="stopQueryBox">
    <div class="form-wrapper">
      <div class="search-wrapper">
        <div class="search-item">
          <span class="label">风场：</span>
          <div class="search-content">
            <el-select
              v-model="wpId"
              size="mini"
              placeholder="全部"
              popper-class="select"
              @change="
                () => {
                  wtId = '';
                  getWtList();
                }
              "
            >
              <el-option
                v-for="item in wpArray"
                :key="item.id"
                :value="item.id"
                :label="item.aname"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="search-item">
          <span class="label">风机：</span>
          <div class="search-content">
            <el-select
              v-model="wtId"
              clearable
              size="mini"
              placeholder="全部"
              popper-class="select"
              @change="() => {}"
            >
              <el-option
                v-for="item in wtArray"
                :key="item.nemCode"
                :value="item.nemCode"
                :label="item.name"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="search-item">
          <span class="label">停机类型：</span>
          <div class="search-content">
            <el-select
              v-model="type"
              size="mini"
              placeholder="全部"
              popper-class="select"
              @change="() => {}"
            >
              <el-option value="gz" label="故障" />
              <el-option value="wh" label="检修" />
            </el-select>
          </div>
        </div>
        <div class="search-item">
          <span class="label">故障描述：</span>
          <div class="search-content">
            <el-input
              v-model="description"
              placeholder="请输入..."
              size="mini"
              clearable
            ></el-input>
          </div>
        </div>
        <div class="search-item">
          <span class="label">日期区间：</span>
          <div class="search-content">
            <el-date-picker
              v-model="dateRange"
              size="mini"
              type="datetimerange"
              range-separator="-"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              @change="getTableData"
            >
            </el-date-picker>
          </div>
        </div>
      </div>
      <div class="btns">
        <el-button class="buttons" round size="mini" @click="getTableData"
          >查询</el-button
        >
      </div>
    </div>
    <div class="table-wrapper">
      <div class="leftContent">
        <span>{{ pageTitle }}</span>
      </div>
      <el-table
        size="mini"
        :data="tableData"
        height="calc(100% - 43px - 40px)"
        style="width: 100%"
        stripe
      >
        <el-table-column
          :label="item.label"
          :prop="item.prop"
          show-overflow-tooltip
          header-align="center"
          align="center"
          v-for="(item, index) in tHeader"
          :key="index"
        >
          <template #default="scope">
            <span>
              {{ scope.row[item.prop] != "NULL" ? scope.row[item.prop] : "--" }}
            </span>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-wrapper">
        <el-pagination
          layout="total, sizes, prev, pager, next"
          :page-sizes="[22, 100, 500, 1000]"
          @size-change="
            (value) => {
              pageNum = 1;
              pageSize = value;
              getTableData();
            }
          "
          :current-page="pageNum"
          :page-size="pageSize"
          :total="total"
          @current-change="currentChange"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import dayjs from "dayjs";
import {
  getWpList,
  fetchWindturbineList,
  getStopQueryTableData,
} from "@/api/zhbj/index.js";

export default {
  name: "stopQuery",
  data() {
    return {
      pageTitle: "停机查询",
      wpId: "",
      wpArray: [],
      wtId: "",
      wtArray: [],
      dateRange: [],
      type: "gz",
      description: "",
      pageNum: 1,
      pageSize: 22,
      total: 0,
      tableData: [],
      tHeader: [
        {
          label: "设备编号",
          prop: "code",
        },
        {
          label: "停机时间",
          prop: "stopTimeName",
        },
        {
          label: "恢复启动时间",
          prop: "startTimeName",
        },
        {
          label: "停机小时数",
          prop: "stopHours",
        },
        {
          label: "损失电量",
          prop: "lossPower",
        },
        {
          label: "报警编号",
          prop: "warningId",
        },
        {
          label: "处理方式",
          prop: "handleWay",
        },
        {
          label: "故障现象",
          prop: "faultView",
        },
        {
          label: "故障类型",
          prop: "typeName",
        },
      ],
    };
  },

  created() {
    this.dateRange = [
      dayjs().subtract(7, "day").format("YYYY-MM-DD HH:mm:ss"),
      dayjs().format("YYYY-MM-DD HH:mm:ss"),
    ];
    this.getWpList();
  },

  methods: {
    async getWpList() {
      const { data } = await getWpList("windturbine");
      this.wpId = data?.[0]?.id || "";
      this.wpArray = data || [];
      this.getWtList();
    },

    async getWtList() {
      const { data } = await fetchWindturbineList(this.wpId);
      this.wtArray = data || [];
      this.getTableData();
    },

    async getTableData() {
      this.BASE.showLoading();
      const { data } = await getStopQueryTableData({
        wpId: this.wpId,
        wtId: this.wtId,
        type: this.type,
        description: this.description,
        begin: this.dateRange?.[0] || "",
        end: this.dateRange?.[1] || "",
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      });
      this.BASE.closeLoading();
      data?.records?.forEach((ele) => {
        ele.stopTimeName = dayjs(ele.stopTime).format("YYYY-MM-DD HH:mm:ss");
        ele.startTimeName = ele.startTime
          ? dayjs(ele.startTime).format("YYYY-MM-DD HH:mm:ss")
          : "";
        ele.typeName = ele.stopTypeId === "gz" ? "故障" : "检修";
      });

      this.tableData = data?.records || [];
      this.total = data.total || 0;
    },

    currentChange(pageNum) {
      this.pageNum = pageNum;
      this.getTableData();
    },
  },
};
</script>

<style lang="less" scoped>
.stopQueryBox {
  height: 100%;
  width: 100%;
  padding: 0 20px;
  padding-bottom: 15px;
  .form-wrapper ::v-deep {
    display: flex;
    // flex-direction: column;
    padding-top: 15px;
    .search-wrapper {
      display: flex;
      align-items: center;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #b3b3b3;
      margin-bottom: 15px;
      .search-item {
        display: flex;
        margin-right: 10px;
        max-width: 450px;
        align-items: center;
        .label {
          margin-right: 10px;
          text-align: right;
          white-space: nowrap;
          // width: 60px;
        }
        .search-content {
          flex: 1;
        }
      }
    }
    .buttons {
      background-color: rgba(5, 187, 76, 0.2);
      border: 1px solid #3b6c53;
      color: #b3b3b3;
      font-size: 14px;

      &:hover {
        background-color: rgba(5, 187, 76, 0.5);
        color: #ffffff;
      }
    }
  }
  .table-wrapper {
    height: calc(100% - 62px);
    width: 100%;
    .leftContent {
      width: 242px;
      height: 41px;
      display: flex;
      align-items: center;
      background: url("~@/assets/imgs/title_left_bg1.png") no-repeat;

      span {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #05bb4c;
        margin-left: 25px;
      }
    }
    .pagination-wrapper :deep {
      text-align: right;
      margin-top: 10px;
    }
  }
}
</style>