sis_zhfx/src/views/warnStatistics/index.vue

<template>
  <div class="draught-fan-list">
    <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="lable">日期：</div>
          <div class="search-input">
            <el-date-picker v-model="recorddate" type="date" value-format="YYYY-MM-DD" placeholder="选择日期" popper-class="date-select">
            </el-date-picker>
          </div>
        </div>
      </div>
      <div class="query-actions">
        <button class="btn green" @click="search()">查询</button>
      </div>
    </div>
    <div class="df-table curTable">
      <el-table :data="tableData.data" height="78vh" max-height="78vh" stripe style="width: 100%" :border="true">
        <el-table-column :show-overflow-tooltip="true" prop="wtname" label="风机"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" :label="tableTitle">
          <el-table-column :show-overflow-tooltip="true" label="近一天">
            <el-table-column :show-overflow-tooltip="true" label="1">
              <el-table-column :show-overflow-tooltip="true" prop="day1top1name" label="故障"></el-table-column>
              <el-table-column :show-overflow-tooltip="true" prop="day1top1" label="频次" :sortable="true"></el-table-column>
            </el-table-column>
            <el-table-column :show-overflow-tooltip="true" label="2">
              <el-table-column :show-overflow-tooltip="true" prop="day1top2name" label="故障"></el-table-column>
              <el-table-column :show-overflow-tooltip="true" prop="day1top2" label="频次" :sortable="true"></el-table-column>
            </el-table-column>
            <el-table-column :show-overflow-tooltip="true" label="3">
              <el-table-column :show-overflow-tooltip="true" prop="day1top3name" label="故障"></el-table-column>
              <el-table-column :show-overflow-tooltip="true" prop="day1top3" label="频次" :sortable="true"></el-table-column>
            </el-table-column>
          </el-table-column>
          <el-table-column :show-overflow-tooltip="true" label="近三天">
            <el-table-column :show-overflow-tooltip="true" label="1">
              <el-table-column :show-overflow-tooltip="true" prop="day3top1name" label="故障"></el-table-column>
              <el-table-column :show-overflow-tooltip="true" prop="day3top1" label="频次" :sortable="true"></el-table-column>
            </el-table-column>
            <el-table-column :show-overflow-tooltip="true" label="2">
              <el-table-column :show-overflow-tooltip="true" prop="day3top2name" label="故障"></el-table-column>
              <el-table-column :show-overflow-tooltip="true" prop="day3top2" label="频次" :sortable="true"></el-table-column>
            </el-table-column>
            <el-table-column :show-overflow-tooltip="true" label="3">
              <el-table-column :show-overflow-tooltip="true" prop="day3top3name" label="故障"></el-table-column>
              <el-table-column :show-overflow-tooltip="true" prop="day3top3" label="频次" :sortable="true"></el-table-column>
            </el-table-column>
          </el-table-column>
          <el-table-column :show-overflow-tooltip="true" label="近七天">
            <el-table-column :show-overflow-tooltip="true" label="1">
              <el-table-column :show-overflow-tooltip="true" prop="day7top1name" label="故障"></el-table-column>
              <el-table-column :show-overflow-tooltip="true" prop="day7top1" label="频次" :sortable="true"></el-table-column>
            </el-table-column>
            <el-table-column :show-overflow-tooltip="true" label="2">
              <el-table-column :show-overflow-tooltip="true" prop="day7top2name" label="故障"></el-table-column>
              <el-table-column :show-overflow-tooltip="true" prop="day7top2" label="频次" :sortable="true"></el-table-column>
            </el-table-column>
            <el-table-column :show-overflow-tooltip="true" label="3">
              <el-table-column :show-overflow-tooltip="true" prop="day7top3name" label="故障"></el-table-column>
              <el-table-column :show-overflow-tooltip="true" prop="day7top3" label="频次" :sortable="true"></el-table-column>
            </el-table-column>
          </el-table-column>
          <el-table-column :show-overflow-tooltip="true" label="近十五天">
            <el-table-column :show-overflow-tooltip="true" label="1">
              <el-table-column :show-overflow-tooltip="true" prop="day15top1name" label="故障"></el-table-column>
              <el-table-column :show-overflow-tooltip="true" prop="day15top1" label="频次" :sortable="true"></el-table-column>
            </el-table-column>
            <el-table-column :show-overflow-tooltip="true" label="2">
              <el-table-column :show-overflow-tooltip="true" prop="day15top2name" label="故障"></el-table-column>
              <el-table-column :show-overflow-tooltip="true" prop="day15top2" label="频次" :sortable="true"></el-table-column>
            </el-table-column>
            <el-table-column :show-overflow-tooltip="true" label="3">
              <el-table-column :show-overflow-tooltip="true" prop="day15top3name" label="故障"></el-table-column>
              <el-table-column :show-overflow-tooltip="true" prop="day15top3" label="频次" :sortable="true"></el-table-column>
            </el-table-column>
          </el-table-column>
          <el-table-column :show-overflow-tooltip="true" label="近一个月">
            <el-table-column :show-overflow-tooltip="true" label="1">
              <el-table-column :show-overflow-tooltip="true" prop="month1top1name" label="故障"></el-table-column>
              <el-table-column :show-overflow-tooltip="true" prop="month1top1" label="频次" :sortable="true"></el-table-column>
            </el-table-column>
            <el-table-column :show-overflow-tooltip="true" label="2">
              <el-table-column :show-overflow-tooltip="true" prop="month1top2name" label="故障"></el-table-column>
              <el-table-column :show-overflow-tooltip="true" prop="month1top2" label="频次" :sortable="true"></el-table-column>
            </el-table-column>
            <el-table-column :show-overflow-tooltip="true" label="3">
              <el-table-column :show-overflow-tooltip="true" prop="month1top3name" label="故障"></el-table-column>
              <el-table-column :show-overflow-tooltip="true" prop="month1top3" label="频次" :sortable="true"></el-table-column>
            </el-table-column>
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="切入切出风速整合历史" v-model="dialogShow" width="85%" top="10vh" custom-class="modal"
      :close-on-click-modal="true" @closed="dialogType = ''">
    </el-dialog>
  </div>
</template>

<script>
export default {
  // 名称
  name: "cutAnalyse",

  // 数据
  data () {
    const that = this;
    return {
      isAsc: "asc",
      wpArray: [],
      wpId: "",
      recorddate: new Date((new Date().getTime() - 3600 * 1000 * 24)).formatDate("yyyy-MM-dd"),
      tableTitle: "",
      tableData: {
        column: [
          {
            name: "风机",
            field: "windturbineid",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "总小风切入",
            field: "inputsmall",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "总小风切入合格率",
            field: "inputsmallratio",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "总大风切入",
            field: "inputbig",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "总大风切入合格率",
            field: "inputbigratio",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "总小风切出",
            field: "outputsmall",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "总小风切出合格率",
            field: "outputsmallratio",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "总大风切出",
            field: "outputbig",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "总大风切出合格率",
            field: "outputbigmaxratio",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "日小风切入",
            field: "dayinputsmall",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "日小风切入合格率",
            field: "dayinputsmallratio",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "日小风切出",
            field: "dayoutputsmall",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "日小风切出合格率",
            field: "dayoutputsmallratio",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "日大风切入",
            field: "dayinputbig",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "日大风切入合格率",
            field: "dayinputbigratio",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "日大风切出",
            field: "dayoutputbig",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "日大风切出合格率",
            field: "dayoutputbigratio",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "月小风切入",
            field: "monthinputsmall",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "月小风切入合格率",
            field: "monthinputsmallratio",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "月大风切入",
            field: "monthinputbig",
            is_num: false,
            is_light: false,
          },
          {
            name: "月大风切入合格率",
            field: "monthinputbigratio",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "月小风切出",
            field: "monthoutputsmall",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "月小风切出合格率",
            field: "monthoutputsmallratio",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "月大风切出",
            field: "monthoutputbig",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "月大风切出合格率",
            field: "monthoutputbigratio",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "年小风切入",
            field: "yearinputsmall",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "年小风切入合格率",
            field: "yearinputsmallratio",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "年大风切入",
            field: "yearinputbig",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "年大风切入合格率",
            field: "yearinputbigratio",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "年小风切出",
            field: "yearoutputsmall",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "年小风切出合格率",
            field: "yearoutputsmallratio",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "年大风切出",
            field: "yearoutputbig",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "年大风切出合格率",
            field: "yearoutputbigratio",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "操作",
            field: "",
            is_num: false,
            is_light: false,
            template () {
              return "<el-button type='text' style='cursor: pointer;'>历史</el-button>";
            },
            click (e, row) {
              that.getOutputspeedHistoryList(row)
            }
          }
        ],
        data: [],
      },
    };
  },

  // 函数
  methods: {
    // 请求服务
    requestData () {
      let that = this;
      that.API.requestData({
        method: "GET",
        subUrl: "powercompare/windfarmAjax",
        success (res) {
          that.wpArray = res.data;
          that.wpId = res.data[0].id;
          that.getTableData();
        }
      });
    },

    getTableData () {
      let that = this;
      if (!that.wpId || !that.recorddate) {
        that.BASE.showMsg({
          msg: "场站与日期不可为空"
        });
      } else {
        that.API.requestData({
          method: "GET",
          baseURL: "http://10.155.32.4:8034/",
          subUrl: "reliability/earlyWarn",
          data: {
            wpid: that.wpId,
            date: that.recorddate
          },
          success (res) {
            if (res.data.length) {
              that.tableTitle = res.data[0].wpname + "预警统计";
              that.tableData.data = res.data;
            }
          }
        });
      }
    },

    search () {
      this.getTableData();
    }
  },

  created () {
    this.requestData();
  },

  mounted () { },

  unmounted () { },
};
</script>

<style lang="less" scoped>
.draught-fan-list {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .btn-group-tabs {
    display: flex;
    flex-direction: row;

    .photovoltaic {
      margin-left: 1.481vh;
    }
  }

  .df-table {
    border: 0.093vh solid fade(@darkgray, 50%);
    position: relative;
    overflow: auto;
    flex-grow: 1;
    margin-top: 1.481vh;

    &:before {
      content: '';
      width: 0.37vh;
      height: 0.37vh;
      background: @write;
      position: absolute;
      left: 0.278vh;
      top: 0.278vh;
    }

    tbody {
      height: calc(100vh - 166px);
    }
  }
}
</style>
<style lang="less">
.curTable {
  .cell {
    text-align: center;
  }
}
</style>