sis_zhfx/src/views/report/weather.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-date-picker v-model="startDate" 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-date-picker v-model="endDate" 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="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-actions">
					<button class="btn green" @click="getTable()">查询</button>
					<button class="btn green" @click="exportCsv()">导出</button>
				</div>
			</div>
		</div>
		<div class="table-box">
			<div class="title">气象数据</div>
			<ComTable
			  ref="curRef"
			  :data="tableData"
			  :pageSize="pageSize"
			  @onPagging="onChangePage"
			  height="68vh"
			  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 Papa from 'papaparse';
	export default {
		name: "boosterAlarm",
		components: {
			ComTable,
			Papa
		},
		data() {
			let that = this;
			return {
				ChangZhan: [],
				stationId: "MHS_FDC",
				startDate: "",
				endDate: "",
				tableLoading: true,
				pageIndex: 1,
				pageSize: 20,
				tableData: {
					column: [{
						name: "记录日期",
						field: "recodedata",
						is_num: false,
						is_light: false,
					}, {
						name: "地点",
						field: "region",
						is_num: false,
						is_light: false,
					}, {
						name: "气象",
						field: "weather",
						is_num: false,
						is_light: false,
					}, {
						name: "最高温度（℃）",
						field: "maximumtem",
						is_num: false,
						is_light: false,
					}, {
						name: "最低温度（℃）",
						field: "minimumtem",
						is_num: false,
						is_light: false,
					}, {
						name: "日出时间",
						field: "sunrise",
						is_num: false,
						is_light: false,
					}, {
						name: "日落时间",
						field: "sunset",
						is_num: false,
						is_light: false,
					}, {
						name: "白气象",
						field: "weather1",
						is_num: false,
						is_light: false,
					}, {
						name: "夜气象",
						field: "weather2",
						is_num: false,
						is_light: false,
					}, {
						name: "白温度（℃）",
						field: "temperature1",
						is_num: false,
						is_light: false,
					}, {
						name: "夜温度（℃）",
						field: "temperature2",
						is_num: false,
						is_light: false,
					}, {
						name: "白体感（℃）",
						field: "realfeel1",
						is_num: false,
						is_light: false,
					}, {
						name: "夜体感（℃）",
						field: "realfeel2",
						is_num: false,
						is_light: false,
					}, {
						name: "白降水（ml）",
						field: "precipitation1",
						is_num: false,
						is_light: false,
					}, {
						name: "夜降水（ml）",
						field: "precipitation2",
						is_num: false,
						is_light: false,
					}, {
						name: "白风向",
						field: "winddirection1",
						is_num: false,
						is_light: false,
					}, {
						name: "夜风向",
						field: "winddirection2",
						is_num: false,
						is_light: false,
					}, {
						name: "白风速(m/s)",
						field: "speed1",
						is_num: false,
						is_light: false,
					}, {
						name: "夜风速(m/s)",
						field: "speed2",
						is_num: false,
						is_light: false,
					}, ],
					data: [],
					currentPageTotal: 0
				}
			};
		},
		created() {
			this.ChangZhanVal();
			let end = new Date();
			let start = new Date(end.getTime() - 1 * 24 * 60 * 60 * 1000);
			this.endDate = end.formatDate("yyyy-MM-dd");
			this.startDate = start.formatDate("yyyy-MM-dd");
			this.getTable();
		},
		methods: {
			exportCsv() {
				let data = this.tableData;
				let arrName = [];
				let dataArr = [];
				data.column.forEach(item =>{
					arrName.push(item.name)
				})
				data.data.forEach(ele=>{
					let i = 0;
					let obj = {};
					for(var j in ele){
						obj[arrName[i++]] = ele[j]
					}
					dataArr.push(obj)
				})
				
				var csv = Papa.unparse(dataArr);
				//定义文件内容，类型必须为Blob 否则createObjectURL会报错
				let content = new Blob([csv]);
				//生成url对象
				let urlObject = window.URL || window.webkitURL || window;
				let url = urlObject.createObjectURL(content);
				//生成<a></a>DOM元素
				let el = document.createElement("a");
				//链接赋值
				el.href = url;
				el.download = "历史天气.csv";
				//必须点击否则不会下载
				el.click();
				//移除链接释放资源
				urlObject.revokeObjectURL(url);
			},
			// 场站
			ChangZhanVal() {
				var that = this;
				that.API.requestData({
					method: "GET",
					subUrl: "powercompare/windfarmAjax",
					success(res) {
						that.ChangZhan = res.data;
						that.stationId = res.data[0].id;
					}
				});
			},
			getTable() {
				let that = this;
				this.tableLoading = true;
				this.API.requestData({
					timeout: 30000,
					method: "GET",
					subUrl: "weather/history/list",
					data: {
						wpId: that.stationId,
						startTs: that.startDate,
						endTs: that.endDate,
						pageNum: that.pageIndex,
						pageSize: that.pageSize,
					},
					success(res) {
						var dataTab = [];
						if (res.data) {
						  res.data.list.forEach(item => {
						  	dataTab.push({ //表格
						  		recodedata: that.formatTime(item.recodedata),
						  		region: item.region,
						  		weather: item.weather,
						  		maximumtem: item.maximumtem,
						  		minimumtem: item.minimumtem,
						  		sunrise: item.sunrise,
						  		sunset: item.sunset,
						  		weather1: item.weather1,
						  		weather2: item.weather2,
						  		temperature1: item.temperature1,
						  		temperature2: item.temperature2,
						  		realfeel1: item.realfeel1,
						  		realfeel2: item.realfeel2,
						  		precipitation1: item.precipitation1,
						  		precipitation2: item.precipitation2,
						  		winddirection1: item.winddirection1,
						  		winddirection2: item.winddirection2,
						  		speed1: item.speed1,
						  		speed2: item.speed2
						  	})
						  })
						  that.tableData.data = dataTab;
						  that.tableData.total = res.data.total;
						} else {
						  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>