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

export default {
  components: { InfoHistory, ComTable, SvgIcon ,History},
  data() {
    const that = this;
    return {
	  history:false,
      stations: [], // 场站
      windturbines: [], // 风机
      station: "",
      windturbine: "",
      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() {
      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.requestFinishedList();
          }
        },
      });
    },
    // 获取风机
    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;
        },
      });
    },
    // 获取已完成消缺单列表
    requestFinishedList() {
      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) {
      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>