hb_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",
          showLoading: true,
          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>