hb_sis_zhfx/src/views/singleAnalysis/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="month"
              value-format="YYYY-MM"
              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">
        <template v-slot:tr v-if="tableData.data.length > 0">
          <tr>
            <td v-for="(item, index) in tableData.column" :key="index">
              {{ tableDataEnd[item.field] }}
            </td>
          </tr>
        </template>
      </ComTable>
    </div>
    <el-dialog
      :title="wtId + '号风机' + year + '年' + month + '月运行指标性能分析'"
      v-model="dialogVisible"
      width="70%"
      top="10vh"
      custom-class="modal"
      :close-on-click-modal="false"
	  :destroy-on-close='true'
    >
      <ZnzhFx :wtId="wtId" :year="year" :month="month" />
    </el-dialog>
  </div>
</template>

<script>
import ComTable from "../Decision/table.vue";
import ZnzhFx from "./znzhfx.vue";
export default {
  // 名称
  name: "cutAnalyse",

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

  // 数据
  data() {
    const that = this;
    return {
      isAsc: "asc",
      wpArray: [],
      wpId: "",
      dialogVisible: false,
      wtId: "",
      year: "",
      month: "",
      recorddate: new Date(new Date().getTime() - 3600 * 1000 * 24).formatDate(
        "yyyy-MM"
      ),
      tableDataEnd: [], //合计
      tableData: {
        column: [
          {
            name: "机组编号",
            field: "windturbineName",
            cursor: "pointer",
            is_num: false,
            is_light: false,
            sortable: true,
            click(e, row) {
              that.goznzhfx(row);
            },
          },
          {
            name: "实际发电量(万千瓦时)",
            field: "fdl",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "理论发电量(万千瓦时)",
            field: "llfdl",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "设备利用小时数(小时)",
            field: "lyxs",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "设备可利用率(%)",
            field: "sbklyl",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "等效可用系数(%)",
            field: "tjxs",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "平均风速(m/s)",
            field: "fs",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "小风切入风速(m/s)",
            field: "xfqr",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "有效风时数(小时)",
            field: "yxfss",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "故障损失电量(万千瓦时)",
            field: "gzss",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "调度限电损失电量(万千瓦时)",
            field: "xdss",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "计划检修损失电量(万千瓦时)",
            field: "jxss",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "性能未达标损失电量(万千瓦时)",
            field: "xnss",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "受累损失电量(万千瓦时)",
            field: "slss",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "故障停用时间(小时)",
            field: "gzxs",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "检修停用时间(小时)",
            field: "jxxs",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "机组功率一致性系数(%)",
            field: "glyzxxs",
            is_num: false,
            is_light: false,
            sortable: true,
          },
        ],
        data: [],
      },
    };
  },

  // 函数
  methods: {
    goznzhfx(row) {
      let that = this;
      that.wtId = row.windturbineid;
      that.year = new Date(this.recorddate).formatDate("yyyy");
      that.month = new Date(this.recorddate).formatDate("MM");
      that.dialogVisible = true;
      that.$router.push({path:`/decision/znzhfx/${row.windturbineid}/${new Date(this.recorddate).formatDate("yyyy")}/${new Date(this.recorddate).formatDate("MM")}`})
    },
    // 请求服务
    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: "singleanalysis/singleanalysisMain",
          showLoading: true,
          data: {
            wpId,
            isAsc: that.isAsc,
            year: new Date(that.recorddate).getFullYear(),
            month: new Date(that.recorddate).getMonth() + 1,
          },
          success(res) {
            res.data.forEach((ele) => {
              for (let key in ele) {
                ele[key] = ele[key] || 0;
              }
            });
            that.tableDataEnd = res.data[res.data.length - 1];
            res.data.pop();
            that.tableData.data = res.data;
          },
        });
      }
    },
    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);
        }
      });

      var list = [];
      that.tableData.data.forEach((i, index) => {
        list.push(i);
      });
      list.push(that.tableDataEnd);
      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]));
    },
  },

  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 {
    cursor: pointer;
    border: 0.093vh solid fade(@darkgray, 50%);
    position: relative;
    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">
.draught-fan-list {
  .el-dialog__body {
    height: 600px;
    max-height: 600px;
    overflow-y: scroll;
  }
}
</style>