sis_zhfx/src/views/report/loadRate.vue

<template>
	<div>
		<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="query.stationId" clearable placeholder="请选择" popper-class="select">
							<el-option v-for="item in ChangZhan" :key="item.id" :value="item.id" :label="item.name">
							</el-option>
						</el-select>
					</div>
				</div>
				<div class="query-item">
					<div class="lable">日期：</div>
					<div class="search-input">
						<el-date-picker v-model="query.date" type="date" placeholder="日期" popper-class="date-select"
							value-format="YYYY-MM-DD"></el-date-picker>
					</div>
				</div>
				<div class="query-item">
					<div class="lable"></div>
					<div class="search-input">
						<el-select v-model="query.useType" style="width: 120px" placeholder="请选择" popper-class="select">
							<el-option value="1" label="负荷率"></el-option>
							<el-option value="2200" label="利用小时"></el-option>
						</el-select>
					</div>
				</div>
				<div class="query-item">
					<div class="lable"></div>
					<div class="search-input">
						<el-select v-model="query.time" style="width: 120px" placeholder="请选择" v-if="query.useType!=='2200'" popper-class="select">
							<el-option value="0930" label="早"></el-option>
							<el-option value="1230" label="中"></el-option>
							<el-option value="1830" label="晚"></el-option>
						</el-select>
					</div>
				</div>
				<div class="query-actions">
					<button class="btn green" @click="getTable()">查询</button>
					<button class="btn green" @click="exportCsv('now')">当前导出</button>
					<button class="btn green" @click="exportCsv('all')">全天导出</button>
				</div>
			</div>
		</div>
		<div class="table-box">
			<!-- <div class="title">光伏负荷率</div> -->
			<ComTable
			  ref="curRef"
			  :data="tableData"
			  :pageSize="-1"
			  height="85vh"
			  v-loading="tableLoading"
			  element-loading-text="拼命加载中.."
			  element-loading-background="rgba(0, 0, 0, 0.8)"
			></ComTable>
		</div>
	</div>
</template>
<script>
	import ComTable from "@/components/coms/table/table.vue";
import { ElMessage } from 'element-plus';
	import Papa from 'papaparse';
	export default {
		name: "boosterAlarm",
		components: {
			ComTable,
			Papa
		},
		data() {
			let that = this;
			return {
				ChangZhan: [],
				query: {
					stationId: 'DWK_GDC',
					date: new Date(new Date().getTime() - 3600 * 1000 * 24).formatDate("yyyy-MM-dd"),
					useType: '1',
					time: '0930'

					// stationId: 'DWK_GDC',
					// date: '2022-11-10',
					// time: '1830'
					// useType: '1',
				},
				tableLoading: true,
				pageIndex: 1,
				pageSize: 20,
				tableData: {
					column: [],
					data: [],
					currentPageTotal: 0
				}
			};
		},
		created() {
			this.ChangZhanVal();
			this.getTable();
		},
		methods: {
			exportCsv(type) {
				switch(type){
					case 'now':
						this.BASE.exportExcel(this.tableData, "光伏负荷率");
						break;
					case 'all':
						let el = document.createElement("a");
						//链接赋值
						el.href = window.__MODE__.baseURL + 'loadrate/down?date=' + this.query.date;
						el.download = '';
						el.target = '_blank'
						document.body.appendChild(el)
						el.click()
						document.body.removeChild(el)
						break;
				}
			},
			// 场站
			ChangZhanVal() {
				var that = this;
				that.API.requestData({
					method: "GET",
					subUrl: "powercompare/windfarmAllAjax",
					success(res) {
						that.ChangZhan = res.data.filter(o => o.id.includes('GDC'));
						that.query.stationId = that.ChangZhan[0].id;
					}
				});
			},
			getTable() {
				let that = this;
				this.tableLoading = true;
				if(this.query.useType!=='2200'){
					this.tableData.column = [{
						name: "逆变器编号",
						field: "id",
						is_num: false,
						is_light: false,
					},{
						name: "支路数量",
						field: "branchcount",
						is_num: false,
						is_light: false,
					},{
						name: "板件数量",
						field: "platecount",
						is_num: false,
						is_light: false,
					},{
						name: "逆变器所带光伏板总容量（kw）",
						field: "platecapacity",
						is_num: false,
						is_light: false,
					},{
						name: "时间",
						field: "time",
						is_num: false,
						is_light: false,
					},{
						name: "当前逆变器功率（kw）",
						field: "power",
						is_num: false,
						is_light: false,
					},{
						name: "负荷率（%）",
						field: "loadfactor",
						is_num: false,
						is_light: false,
						sortable: true
					} ]
				}else{
					this.tableData.column = [{
						name: "逆变器编号",
						field: "id",
						is_num: false,
						is_light: false,
					},{
						name: "支路数量",
						field: "branchcount",
						is_num: false,
						is_light: false,
					},{
						name: "板件数量",
						field: "platecount",
						is_num: false,
						is_light: false,
					},{
						name: "逆变器所带光伏板总容量（kw）",
						field: "platecapacity",
						is_num: false,
						is_light: false,
					},{
						name: "时间",
						field: "time",
						is_num: false,
						is_light: false,
					},{
						name: "逆变器发电量（kw·h）",
						field: "generatedenergy",
						is_num: false,
						is_light: false,
					},{
						name: "利用小时",
						field: "utilizationhour",
						is_num: false,
						is_light: false,
						sortable: true
					} ]
				}
				this.API.requestData({
					timeout: 30000,
					method: "GET",
					subUrl: "loadrate/info",
					showLoading: true,
					data: {
						stationid: that.query.stationId,
						date: that.query.date,
						time: that.query.useType!=='2200'? that.query.time: that.query.useType,
					},
					success(res) {
						var dataTab = [];
						if (res.data) {
						  res.data.forEach(item => {
						  	dataTab.push({ //表格
						  		branchcount: item.branchcount,
									generatedenergy: item.generatedenergy,
									id: item.id,
									loadfactor: item.loadfactor,
									platecapacity: item.platecapacity,
									platecount: item.platecount,
									power: item.power,
									time: item.time,
									utilizationhour: item.utilizationhour,
						  	})
						  })
						  that.tableData.data = dataTab;
						  that.tableData.total = 0;
						} else {
						  that.tableData.data = [];
						  that.tableData.total = 0;
						}
						that.tableLoading = false;
					},
					fail(err){
						that.tableData.data = [];
						that.tableData.total = 0;
						that.tableLoading = false;
					}
				})
			},
			formatTime(value) {
				if (typeof(value) == 'undefined') {
					return ''
				} else {
					let date = new Date(parseInt(value))
					let y = date.getFullYear()
					let MM = date.getMonth() + 1
					MM = MM < 10 ? ('0' + MM) : MM
					let d = date.getDate()
					d = d < 10 ? ('0' + d) : d
					return y + '-' + MM + '-' + d
				}
			},
			// onChangePage(params) {
			// 	this.pageIndex = params.pageIndex;
			// 	this.pageSize = params.pageSize;
			// 	this.getTable();
			// },
		}
	};
</script>
<style scoped>
	.title {
		background: rgba(255, 255, 255, 0.1);
		margin-bottom: 8px;
		padding: 1vh;
	}
</style>