|
|
@@ -0,0 +1,339 @@
|
|
|
+<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>
|
baiyanting