hb_sis_zhfx/src/views/HealthControl/HealthTab3.vue

<template>
  <div class="health-tab-3">
    <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="950px"
        custom-class="modal"
        :close-on-click-modal="false"
      >
        <info-track :formdata="trackDate" />
      </el-dialog>
    </div>
  </div>
</template>

<script>
import InfoTrack from "./infotrack.vue";
import ComTable from "@com/coms/table/table.vue";
import SvgIcon from "../../components/coms/icon/svg-icon.vue";
import api from "@api/wisdomOverhaul/health/index.js";

import api1 from "@api/economic/index.js";

export default {
  components: { InfoTrack, ComTable, SvgIcon },
  data() {
    const that = this;
    return {
      stations: [], // 场站
      windturbines: [], // 风机
      station: "",
      windturbine: "CL01_001",
      starts: "",
      endts: new Date(),
      tableData: {
        column: [
          {
            name: "场站",
            field: "wfname",
            width: "150px",
            is_light: false,
          },
          {
            name: "风机编号",
            field: "wtid",
            width: "150px",
            is_light: false,
          },
          {
            name: "任务开始时间",
            width: "200px",
            field: "operationdate",
            is_light: false,
          },
          {
            name: "任务接受时间",
            width: "200px",
            field: "departuretime",
            is_light: false,
          },
          {
            name: "检修原因",
            field: "reason",
            is_light: false,
          },
          {
            name: "受否下单",
            width: "100px",
            field: "ismain",
            is_light: false,
          },
          {
            name: "任务状态",
            width: "150px",
            field: "status",
            is_light: false,
          },
          {
            name: "操作",
            width: "100px",
            field: "",
            is_num: false,
            is_light: false,
            template() {
              return "<el-button type='text' style='cursor: pointer;'>消缺跟踪</el-button>";
            },
            click(e, row) {
              that.onClickTrack(row);
            },
          },
        ],
        data: [],
      },
      dialogVisible: false,
      trackDate: undefined,
    };
  },
  created() {
    this.starts = new Date(
      new Date().setMonth(new Date().getMonth() - 2)
    ).formatDate("yyyy-MM-dd");
    this.requestStations();
  },
  methods: {
    // 搜索按钮
    onClickSearch() {
      this.requestUnfinishedList();
    },
    // 消缺跟踪
    onClickTrack(row) {
      this.requestTrack(row);
    },
    // 获取场站
    requestStations() {
      api1.benchmarkingWplist({}).then((res) => {
        if (res.code == 200) {
          this.stations = res.data;
          this.station = this.stations[0]?.id;
        //  this.windturbine = this.windturbines[0]?.id;
          this.requestUnfinishedList();
        }
      });

      // let that = this;
      // that.API.requestData({
      //   method: "GET",
      //   subUrl: "powercompare/windfarmAjax",
      //   success(res) {
      //     if (res.code == 200) {
      //       that.stations = res.data;
      //       that.station = that.stations[3].id;
      //       that.requestUnfinishedList();
      //     }
      //   },
      // });
    },
    // 获取风机
    requestWindturbines(wpid) {
      api
        .powercompareWindturbineAjax({
          wpId: wpid,
        })
        .then((res) => {
          if (res.code == 200) {
            this.windturbines = res.data;
         this.windturbine = this.windturbines[0].id;

          }
        });

      // let that = this;
      // that.API.requestData({
      //   method: "GET",
      //   subUrl: "powercompare/windturbineAjax",
      //   data: { wpId: wpid },
      //   success(res) {
      //     if (res.code == 200) that.windturbines = res.data;
      //   },
      // });
    },
    // 获取未完成消缺单列表
    requestUnfinishedList() {
      api
        .recommenUnfinishedList({
          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,
                ismain: item.ismain,
                status: item.status,
                rid: item.rid,
              };
              this.tableData.data.push(obj);
            });
          }
        });

      // let that = this;
      // that.API.requestData({
      //   method: "POST",
      //   subUrl: "recommen/unfinishedList",
      //   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,
      //           ismain: item.ismain,
      //           status: item.status,
      //           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;
            console.warn(this.trackDate);
            this.dialogVisible = true;
          }
        });

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

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