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";

export default {
  components: { InfoTrack, ComTable, SvgIcon },
  data() {
    const that = this
    return {
      stations: [], // 场站
      windturbines: [], // 风机
      station: "",
      windturbine: "",
      starts: "",
      endts: new Date(),
      tableData: {
        column: [
          { 
            name: "场站",
            field: "wfname",
            is_light: false
          },
          { 
            name: "风机编号",
            field: "wtid",
            is_light: false
          },
          { 
            name: "任务开始时间",
            field: "operationdate",
            is_light: false
          },
          { 
            name: "任务接受时间",
            field: "departuretime",
            is_light: false
          },
          { 
            name: "检修原因",
            field: "reason",
            is_light: false
          },
          { 
            name: "受否下单",
            field: "ismain",
            is_light: false
          },
          { 
            name: "任务状态",
            field: "status",
            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.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() {
      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) {
      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() {
      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){
      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>