sis_zhfx/src/views/warn/xdgl.vue

<template>
  <div class="knowledge-2">
    <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="wpId" clearable placeholder="请选择" popper-class="select">
              <el-option v-for="item in wpArray" :key="item.id" :value="item.id" :label="item.name" />
            </el-select>
          </div>
        </div>
        <div class="query-item">
          <div class="query-item">
          <div class="lable">开始日期：</div>
          <div class="search-input">
            <el-date-picker
              v-model="value1"
              @change="BeginChange(value1)"
              type="date"
              value-format="YYYY-MM-DD"
              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="value2"
              @change="EndChange(value2)"
              type="date"
              value-format="YYYY-MM-DD"
              placeholder="选择日期"
              popper-class="date-select"
            >
            </el-date-picker>
            <div class="unit svg-icon svg-icon-gray">
              <svg-icon :svgid="''" />
            </div>
          </div>
        </div>
        </div>
      </div>
      <div class="query-actions" style="margin-right: 1500px">
        <button class="btn green" @click="onClickSearch">查询</button>
      </div>
    </div>
    <div>
      <ComTable :data="tableData" height="85vh"></ComTable>
    </div>
  </div>
</template>

<script>
import ComTable from "@com/coms/table/table.vue";

export default {
  components: { ComTable },
  data() {
    return {
      value1: "",
      value2: "",
      wpId: "",
      wpArray: [],
      tableData: {
        column: [
          {
            name: "编号",
            field: "id",
            is_num: true,
            is_light: false,
          },
          {
            name: "限电时刻",
            field: "stopTime",
            is_num: false,
            is_light: false,
          },
          {
            name: "恢复时刻",
            field: "startTime",
            is_num: false,
            is_light: false,
          },
          {
            name: "停机类型",
            field: "stopTypeId",
            is_num: false,
            is_light: false,
          },
          {
            name: "限电时间",
            field: "stopHours",
            is_num: false,
            is_light: false,
          },
          {
            name: "损失电量(kWh)",
            field: "lossPower",
            is_num: false,
            is_light: false,
          },
          {
            name: "限电原因",
            field: "description",
            is_num: false,
            is_light: false,
          },
          {
            name: "关联风机",
            field: "wts",
            is_num: false,
            is_light: false,
          },
        ],
        data: [],
      },
    };
  },
  created() {
    // this.requestSafeList();
    this.value1 = new Date((new Date().getTime() - 3600 * 1000 * 24)).formatDate("yyyy-MM-dd");
		this.value2 = this.getTime(2);
    this.getWp();
    this.requestSafeList();
  },
  methods: {
    getTime(val) { //时间戳处理，val=1是默认开始时间（当前月第一天），val=2是默认结束时间（今天）
				var date = new Date();
				var year = date.getFullYear(),
					month = date.getMonth() + 1,
					day = date.getDate();
				month >= 1 && month <= 9 ? (month = '0' + month) : '';
				day >= 0 && day <= 9 ? (day = '0' + day) : '';
				var begin = year + '-' + month + '-01';
				var end = year + '-' + month + '-' + day;
				if (val == 1) {
					return begin;
				} else if (val == 2) {
					return end;
				}
			},
// 获取风场
    getWp (reGetWp) {
      let that = this;
      that.API.requestData({
        baseURL: "http://10.155.32.4:9001",
          subUrl: "benchmarking/wplist",
        success (res) {
          that.wpArray = res.data;
          that.wpId = res.data[0].id;
          that.wpName = res.data[0].wpId;
          // that.getWt(that.wpId, reGetWp);
        }
      });
    },

    
    BeginChange(vl) {
      this.value1 = vl;
    },
    EndChange(vl) {
      this.value2 = vl;
    },
    typeChange(vl) {
      this.type = vl;
    },
    // 搜索按钮
    onClickSearch() {
      this.requestSafeList();
    },
    // 获取限电事间
    requestSafeList() {
      let that = this;

      let data = {
        tablepar: {
          pageNum: 1,
          pageSize: 1000,
        },
        beginDate: that.value1,
        endDate: that.value2,
        wpId: that.wpId,
      };

      

      this.API.requestData({
        method: "POST",
        subUrl: "/brownouts/getBrownoutsList",
        data,
        success(res) {
          if (res.code == 200) {
            that.tableData.data = [];
            if(res.data.list.length){
              let data = res.data.list;
              for (var i = 0; i < data.length; i++) {
                let obj = {
                  id: i+1,
                  stopTime: new Date(data[i].stopTime).formatDate("yyyy-MM-dd hh:mm:ss"),
                  startTime: new Date(data[i].startTime).formatDate("yyyy-MM-dd hh:mm:ss"),
                  stopTypeId: data[i].stopTypeId,
                  stopHours: data[i].stopHours,
                  lossPower: data[i].lossPower,
                  description: data[i].description,
                  wts: data[i].wts,
                };
                that.tableData.data.push(obj);
              }
            }
          }
        },
      });
    },
  },
};
</script>

<style lang="less" scope>
@titleGray: #9ca5a8;
@rowGray: #606769;
@darkBack: #536268;
.knowledge-2 {
  .el-select {
    width: 200px;
  }
  .el-input {
    width: 200px;
  }
}
</style>