sis_zhfx/src/views/performanceAnalysis/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>
        <button class="btn green" @click="exportExcel">导出</button>
      </div>
    </div>
    <div class="df-table">
      <ComTable height="78vh" :data="tableData"></ComTable>
    </div>
    <el-dialog title="单机历史性能分析" v-model="dialogShow" width="85%" top="10vh" custom-class="modal"
      :close-on-click-modal="true" @closed="dialogType = ''">
      <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="wpId2" clearable placeholder="请选择" popper-class="select" @change="reGetWtArray">
                <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-select v-model="wtId" clearable placeholder="请选择" popper-class="select">
                <el-option v-for="item in wtArray" :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="beginDate" 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="endDate" 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="reGetHistoryTableData">查询</button>
          <button class="btn green" @click="exportExcel2">导出</button>
        </div>
      </div>
      <ComTable height="78vh" :data="historyTableData"></ComTable>
    </el-dialog>
  </div>
</template>

<script>
import ComTable from "@com/coms/table/table.vue";
export default {
  // 名称
  name: "cutAnalyse",

  // 使用组件
  components: {
    ComTable
  },

  // 数据
  data () {
    const that = this;
    return {
      isAsc: "asc",
      wpArray: [],
      wtArray: [],
      wpId: "",
      wtId: "",
      wpId2: "",
      recorddate: new Date((new Date().getTime() - 3600 * 1000 * 24)).formatDate("yyyy-MM-dd"),
      beginDate: "",
      endDate: "",
      dialogShow: false,

      tableData: {
        column: [
          {
            name: "风机",
            field: "windturbineid",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "型号",
            field: "modelid",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "日排行榜",
            field: "daytop",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "日拟合优度(%)",
            field: "daygoodness",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "日风速(m/s)",
            field: "dayspeed",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "月排行榜",
            field: "monthtop",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "月拟合优度(%)",
            field: "monthgoodness",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "月风速(m/s)",
            field: "monthspeed",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "年排行榜",
            field: "yeartop",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "年拟合优度(%)",
            field: "yeargoodness",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "年风速(m/s)",
            field: "yearspeed",
            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.jumpUrl(row);
            }
          },
          {
            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: [],
      },

      historyTableData: {
        column: [
          {
            name: "日期",
            field: "time",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "风机",
            field: "windturbineid",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "日发电量",
            field: "c1",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "日理论发电量",
            field: "c2",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "日平均功率",
            field: "c3",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "日运行小时",
            field: "c4",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "日待机小时",
            field: "c5",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "日故障小时",
            field: "c6",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "日维护小时",
            field: "c7",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "日终端小时",
            field: "c8",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "日有效风时",
            field: "c9",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "日损失电量",
            field: "c10",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "日报警次数",
            field: "c11",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "日停机次数",
            field: "c12",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "日不饱和次数",
            field: "c13",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "日设备可利用率",
            field: "c14",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "日平均温度",
            field: "c15",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "日平均湿度",
            field: "c16",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "日平均压强",
            field: "c17",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "日拟合优度",
            field: "c18",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            name: "日实际/保证",
            field: "c19",
            is_num: false,
            is_light: false,
            sortable: true
          },
        ],
        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.getOutputSpeedList(that.wpId)
        }
      });
    },

    getOutputSpeedList (wpId) {
      let that = this;
      if (!that.wpId || !that.recorddate) {
        that.BASE.showMsg({
          msg: "场站与日期不可为空"
        });
      } else {
        that.API.requestData({
          method: "POST",
          subUrl: "goodness/windturbinegoodness",
          data: {
            wpId,
            isAsc: that.isAsc,
            recorddate: that.recorddate
          },
          success (res) {
            that.tableData.data = res.data.list;
          }
        });
      }

    },

    getOutputspeedHistoryList (item) {
      let that = this;

      that.API.requestData({
        method: "GET",
        subUrl: "powercompare/windturbineAjax",
        data: {
          wpId: item.windtpowerstationid
        },
        success (res) {
          that.wtArray = res.data;

          that.wpId2 = item.windtpowerstationid;
          that.wtId = item.windturbineid;
          that.beginDate = (new Date().formatDate("yyyy-MM") + '-01');
          that.endDate = new Date().formatDate("yyyy-MM-dd");

          that.API.requestData({
            method: "POST",
            subUrl: "goodness/goodhistorylist",
            data: {
              wpId: that.wpId2,
              wtId: that.wtId,
              beginDate: that.beginDate,
              endDate: that.endDate
            },
            success (res) {
              res.data.forEach(ele => {
                ele.time = new Date(ele.recorddate).formatDate("yyyy-MM-dd");
              });
              that.historyTableData.data = res.data;
              that.dialogShow = true;
            }
          });
        }
      });
    },

    reGetWtArray () {
      let that = this;
      that.API.requestData({
        method: "GET",
        subUrl: "powercompare/windturbineAjax",
        data: {
          wpId: that.wpId2
        },
        success (res) {
          that.wtArray = res.data;
          that.wtId = res.data[0].id;
        }
      });
    },

    reGetHistoryTableData () {
      let that = this;
      if (!that.wpId2) {
        that.BASE.showMgs({
          msg: "场站不可为空"
        });
      } else if (!that.wtId) {
        that.BASE.showMgs({
          msg: "风机不可为空"
        });
      } else if (!that.beginDate || !that.endDate) {
        that.BASE.showMgs({
          msg: "开始日期与结束日期不可为空"
        });
      } else {
        that.API.requestData({
          method: "POST",
          subUrl: "goodness/goodhistorylist",
          data: {
            wpId: that.wpId2,
            wtId: that.wtId,
            beginDate: that.beginDate,
            endDate: that.endDate
          },
          success (res) {
            res.data.forEach(ele => {
              ele.time = new Date(ele.recorddate).formatDate("yyyy-MM-dd");
            });
            that.historyTableData.data = res.data;
            that.dialogShow = true;
          }
        });
      }
    },

    search () {
      this.getOutputSpeedList(this.wpId);
    },

    // 外围表格导出excel
    exportExcel () {
      let that = this;
      const { export_json_to_excel } = require('@tools/excel/Export2Excel.js'); // 注意这个Export2Excel路径      

      // const tHeader = ['点名', '描述']; // 上面设置Excel的表格第一行的标题       
      // const filterVal = ['id', 'name']; // 上面的index、nickName、name是tableData里对象的属性key值   

      let tHeader = []; // 上面设置Excel的表格第一行的标题       
      let filterVal = []; // 上面的index、nickName、name是tableData里对象的属性key值

      that.tableData.column.forEach(ele => {
        if (ele.name !== "操作") {
          tHeader.push(ele.name);
          filterVal.push(ele.field);
        }
      });

      const list = that.tableData.data; //把要导出的数据tableData存到list 
      const data = that.formatJson(filterVal, list);
      export_json_to_excel(tHeader, data, '导出的Excel'); // 最后一个是表名字
    },

    // 弹窗表格导出excel
    exportExcel2 () {
      let that = this;
      const { export_json_to_excel } = require('@tools/excel/Export2Excel.js'); // 注意这个Export2Excel路径      

      // const tHeader = ['点名', '描述']; // 上面设置Excel的表格第一行的标题       
      // const filterVal = ['id', 'name']; // 上面的index、nickName、name是tableData里对象的属性key值   

      let tHeader = []; // 上面设置Excel的表格第一行的标题       
      let filterVal = []; // 上面的index、nickName、name是tableData里对象的属性key值

      that.historyTableData.column.forEach(ele => {
        if (ele.name !== "操作") {
          tHeader.push(ele.name);
          filterVal.push(ele.field);
        }
      });

      const list = that.historyTableData.data; //把要导出的数据tableData存到list 
      const data = that.formatJson(filterVal, list);
      export_json_to_excel(tHeader, data, '导出的Excel'); // 最后一个是表名字
    },

    formatJson (filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]));
    },

    // 页面跳转
    jumpUrl (item) {
      this.$router.push(`/decision/performanceAnalysis/detail/${item.windtpowerstationid}/${item.windturbineid}`);
    }
  },

  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>