SIS_Web/src/views/FanStatusQueryExport/FanStatusQueryExport.vue

<template>
  <div>
    <div class="top">
      风场:
      <el-select
        v-model="WindVal"
        filterable
        placeholder="请选择风电场"
        @change="getFanName"
      >
        <el-option
          v-for="item in WindFarm"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      机组:
      <el-select v-model="FJval" filterable placeholder="请选择机组">
        <el-option
          v-for="item in options"
          :key="item.ID"
          :label="item.NAME"
          :value="item.ID"
        >
        </el-option>
      </el-select>
      风机状态:
      <el-select
        v-model="fanStatusVal"
        filterable
        placeholder="请选择风机状态类型"
      >
        <el-option
          v-for="item in fanStatus"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>

      时间:
      <el-date-picker
        v-model="timeValue"
        value-format="yyyy-MM-dd"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
      <el-button type="primary" @click="search">查询</el-button>
      <download-excel
        class="export-excel-wrapper"
        :data="tableData"
        :fields="json_fields"
        name="风机状态"
        :disabled="disabled"
      >
        <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
        <el-button type="primary">导出</el-button>
      </download-excel>
    </div>

    <el-table :data="tableData" height="700" style="width: 100%" center>
      <el-table-column prop="FJ" label="场站风机" align="center"> </el-table-column>
      <el-table-column prop="STATUSDESC" label="状态类型" align="center"> </el-table-column>
      <el-table-column label="状态开始时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.STARTTIME}}
        </template>
      </el-table-column>
      <el-table-column prop="STOPTIME" label="状态结束时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.STOPTIME}}
        </template>
      </el-table-column>
      <el-table-column prop="SPEED" label="风速" align="center"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
import dateFormat from "../../../public/js/dateFormat";
export default {
  data() {
    return {
      disabled: true,
      json_fields: {
        '场站风机': 'FJ',
        '状态类型': 'STATUSDESC',
        '状态开始时间': 'STARTTIME',
        '状态结束时间': 'STOPTIME',
        '风速': 'SPEED',
      },
      json_meta: [
        [
          {
            " key ": " charset ",
            " value ": " utf- 8 ",
          },
        ],
      ],
      excelTitle: "" || "excel",
      FJval: "",
      fanStatusVal: "0",
      satuscode: "",
      props: { multiple: true },
      options: [],
      tableData: [
        {
          FJ:'',
          STATUSDESC:'',
          STARTTIME:'',
          STOPTIME:'',
          SPEED:'',
        },
      ],
      WindVal: "MHS_FDC",
      timeValue: [
        dateFormat(
          "yyyy-MM-dd ",
          new Date(new Date().setDate(new Date().getDate() - 2))
        ),
        dateFormat("yyyy-MM-dd ", new Date()),
      ],

      WindFarm: [
        {
          value: "MHS_FDC",
          label: "麻黄山风电场",
        },
        {
          value: "XS_FDC",
          label: "香山风电场",
        },
        {
          value: "QS_FDC",
          label: "青山风电场",
        },
        {
          value: "NSS_FDC",
          label: "牛首山风电场",
        },
        {
          value: "SBQ_FDC",
          label: "石板泉风电场",
        },
      ],
      fanStatus: [
        {
          value: "0",
          label: "待机",
        },
        {
          value: "1",
          label: "运行故障",
        },
        {
          value: "3",
          label: "故障",
        },
        {
          value: "4",
          label: "离线",
        },
        {
          value: "5",
          label: "限电停机",
        },
        {
          value: "6",
          label: "限出力",
        },
      ],
    };
  },
  creat() {
    this.getFjStatus();
  },
  mounted() {
    this.getFanName();
  },
  filters: {
    timeF(val) {
      if (val) {
        return dateFormat("yyyy-MM-dd", new Date(val));
      }
    },
  },
  methods: {
    search() {
      this.getFjStatus();
    },
    getFanName() {
      this.options = [];
      this.$http
        .post("FanStatusQueryExport/FanName", this.WindVal)
        .then((res) => {
          var res = res.data;
          this.options = res;
          this.FJval = res[0].NAME;
          this.$nextTick(() => {
            this.getFjStatus();
          });
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    getFjStatus() {
      this.$http
        .post("FanStatusQueryExport/FjStatus", {
          name: this.FJval,
          satuscode: this.fanStatusVal,
          starttime: this.timeValue[0],
          stoptime: this.timeValue[1],
        })
        .then((res) => {          
          var data = res.data;
          var FJdata;
          for (let m in this.options) {
            if (this.options[m].ID == this.FJval) {
              FJdata = this.options[m].NAME;
            }
          }
          for (let i in data) {
            data[i].FJ = FJdata;
          }
          for(let i in data){
            data[i].STARTTIME = dateFormat("yyyy-MM-dd ", new Date(data[i].STARTTIME))
            data[i].STOPTIME = dateFormat("yyyy-MM-dd ", new Date(data[i].STOPTIME))
          }
          this.tableData = data;
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.top {
  width: 80%;
  margin: 20px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  overflow: hidden;
}
</style>