jn_sis_zhfx/src/views/HealthControl/HealthTab4.vue

<template>
  <div class="health-tab-4">
    <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="station"
              clearable
              placeholder="请选择"
              popper-class="select"
            >
              <el-option
                v-for="item in stations"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="query-item">
          <div class="lable">机组</div>
          <div class="search-input">
            <el-select
              v-model="windturbine"
              placeholder="请选择"
              popper-class="select"
            >
              <el-option
                v-for="item in windturbines"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
        </div>

        <div class="query-item">
          <div class="lable">开始日期：</div>
          <div class="search-input">
            <el-date-picker
              v-model="starts"
              type="date"
              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="endts"
              type="date"
              placeholder="选择日期"
              popper-class="date-select"
            >
            </el-date-picker>
            <div class="unit svg-icon svg-icon-gray">
              <svg-icon :svgid="''" />
            </div>
          </div>
        </div>
      </div>

      <div class="query-actions" style="margin-right: 500px">
        <button class="btn green" @click="onClickSearch">搜 索</button>
      </div>
    </div>
    <div class="table-box">
      <ComTable :data="tableData" height="80vh"></ComTable>
    </div>
    <div class="dialog-box">
      <!-- <el-dialog
        title="日信息对比"
        v-model="dialogVisible"
        width="1200px"
        custom-class="modal"
        :close-on-click-modal="false"
      > -->
      <el-dialog
        title="消缺跟踪"
        v-model="dialogVisible"
        width="1200px"
        custom-class="modal"
        :close-on-click-modal="false"
      >
        <info-history :formdata="trackDate" />
      </el-dialog>
    </div>
    <el-dialog
      title="消缺历史"
      v-model="history"
      width="1400px"
      height="800px"
      custom-class="modal"
      :close-on-click-modal="false"
    >
      <History :formdata="trackDate" />
    </el-dialog>
  </div>
</template>

<script>
import InfoHistory from "./infotrack2.vue";
import History from "./healthTab4History.vue";
import ComTable from "@com/coms/table/table.vue";
import SvgIcon from "../../components/coms/icon/svg-icon.vue";
import { warn } from "@vue/runtime-core";
import api from "@api/wisdomOverhaul/health/index.js";
import api1 from "@api/economic/index.js";

export default {
  components: { InfoHistory, ComTable, SvgIcon, History },
  data() {
    const that = this;
    return {
      history: false,
      stations: [], // 场站
      windturbines: [], // 风机
      station: "",
      windturbine: "CL01_001",
      starts: "",
      endts: new Date(),
      tableData: {
        column: [
          {
            name: "场站",
            width: "120px",
            field: "wfname",
            is_light: false,
          },
          {
            name: "风机编号",
            width: "100px",
            field: "wtid",
            is_light: false,
          },
          {
            name: "任务开始时间",
            width: "150px",
            field: "operationdate",
            is_light: false,
          },
          {
            name: "任务接受时间",
            width: "150px",
            field: "departuretime",
            is_light: false,
          },
          {
            name: "检修原因",
            field: "reason",
            is_light: false,
          },
          {
            name: "消缺工艺",
            field: "repairedcomment",
            is_light: false,
          },
          {
            name: "操作",
            width: "170px",
            field: "",
            is_num: false,
            is_light: false,
            template() {
              return "<el-button type='text' style='cursor: pointer;' value='gz'>消缺跟踪</el-button>&nbsp;&nbsp;<el-button type='text' style='cursor: pointer;' value='ls'>消缺历史</el-button>";
            },
            click(e, row) {
              if ("gz" == event.target.getAttribute("value")) {
                that.onClickTrack(row);
              }
              if ("ls" == event.target.getAttribute("value")) {
                that.requestTrack(row);
                that.history = true;
              }
            },
          },
        ],
        data: [],
      },
      dialogVisible: false,
      trackDate: undefined,
    };
  },
  created() {
    this.starts = new Date().formatDate("yyyy-MM") + "-01";
    // this.starts = "2021-01-01";
    this.requestStations();
  },
  methods: {
    // 搜索按钮
    onClickSearch() {
      this.requestFinishedList();
    },
    // 消缺跟踪
    onClickTrack(row) {
      this.dialogVisible = true;
      this.requestTrack(row);
    },
    // 历史查询
    onClickHistory(row) {
      this.dialogVisible = true;
    },
    // 获取场站
    requestStations() {
      api1.benchmarkingWplist({}).then((res) => {
        if (res.code == 200) {
          if (res.code == 200) {
            this.stations = res.data;
            this.station = this.stations[0].id;
            this.requestFinishedList();
          }
        }
      });
    },
    // 获取风机
    requestWindturbines(wpid) {
      api
        .powercompareWindturbineAjax({
          wpId: wpid,
        })
        .then((res) => {
          if (res.code == 200) this.windturbines = res.data;
        });

      // let that = this;
      // that.API.requestData({
      //   method: "GET",
      //   subUrl: "powercompare/windturbineAjax",
      //   data: { wpId: wpid },
      //   success(res) {
      //     if (res.code == 200) that.windturbines = res.data;
      //   },
      // });
    },
    // 获取已完成消缺单列表
    requestFinishedList() {
      api
        .recommenFinishedList({
          wpId: this.station,
          wtId: this.windturbine,
          beginDate: new Date(this.starts).formatDate("yyyy-MM-dd"),
          endDate: new Date(this.endts).formatDate("yyyy-MM-dd"),
        })
        .then((res) => {
          if (res.code == 200) {
            this.tableData.data = [];
            res.data.forEach((item) => {
              let obj = {
                wfname: item.wfname,
                wtid: item.wtid,
                operationdate: item.operationdate
                  ? new Date(item.operationdate).formatDate(
                      "yyyy-MM-dd hh:mm:ss"
                    )
                  : "",
                departuretime: item.departuretime
                  ? new Date(item.departuretime).formatDate(
                      "yyyy-MM-dd hh:mm:ss"
                    )
                  : "",
                reason: item.reason,
                repairedcomment: item.repairedcomment,
                rid: item.rid,
              };
              this.tableData.data.push(obj);
            });
          }
        });
      // let that = this;
      // that.API.requestData({
      //   method: "POST",
      //   subUrl: "recommen/finishedList",
      //   data: {
      //     wpId: that.station,
      //     wtId: that.windturbine,
      //     beginDate: new Date(that.starts).formatDate("yyyy-MM-dd"),
      //     endDate: new Date(that.endts).formatDate("yyyy-MM-dd"),
      //   },
      //   success(res) {
      //     if (res.code == 200) {
      //       that.tableData.data = [];
      //       res.data.forEach((item) => {
      //         let obj = {
      //           wfname: item.wfname,
      //           wtid: item.wtid,
      //           operationdate: item.operationdate
      //             ? new Date(item.operationdate).formatDate(
      //                 "yyyy-MM-dd hh:mm:ss"
      //               )
      //             : "",
      //           departuretime: item.departuretime
      //             ? new Date(item.departuretime).formatDate(
      //                 "yyyy-MM-dd hh:mm:ss"
      //               )
      //             : "",
      //           reason: item.reason,
      //           repairedcomment: item.repairedcomment,
      //           rid: item.rid,
      //         };
      //         that.tableData.data.push(obj);
      //       });
      //     }
      //   },
      // });
    },
    // 通过消缺单获得详细信息
    requestTrack(row) {
      api
        .recommenFindMainTrack({
          rid: row.rid,
        })
        .then((res) => {
          if (res.code == 200) {
            this.trackDate = res.data;
          }
        });

      // let that = this;
      // that.API.requestData({
      //   method: "POST",
      //   subUrl: "recommen/findMainTrack",
      //   timeout: 30000,
      //   data: {
      //     rid: row.rid,
      //   },
      //   success(res) {
      //     if (res.code == 200) {
      //       that.trackDate = res.data;
      //     }
      //   },
      // });
    },
  },
  watch: {
    station(val) {
      this.windturbine = "";
      this.requestWindturbines(val);
    },
  },
};
</script>

<style lang="less" scope>
@titleGray: #9ca5a8;
@rowGray: #606769;
@darkBack: #536268;
.health-tab-4 {
  .dialog-box {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>