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: "name",
            is_num: false,
            is_light: false,
            sortable: true
          },
          {
            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(`/new/dj1/${item.windtpowerstationid}`);
    }
  },

  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>