sis_zhfx/src/views/warn/czjl.vue

<template>
	<div class="knowledge-2">
		<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"
							@change="(wpId) => { getWt(wpId, true); }">
							<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="query-item">
						<div class="lable">开始日期：</div>
						<div class="search-input">
							<el-date-picker v-model="value1" type="datetimerange" range-separator="至"
								start-placeholder="开始日期" end-placeholder="结束日期">
							</el-date-picker>
						</div>
					</div>
				</div>
			</div>
			<div class="query-actions" style="margin-right: 1500px">
				<button class="btn green" @click="exportCsv">导出</button>
			</div>
		</div>
		<el-row :type="'flex'" class="content">
			<el-col :span="24">
				<ComTable :data="tableData" height="85vh"></ComTable>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import ComTable from "@com/coms/table/table.vue";
	import Papa from 'papaparse';
	export default {
		components: {
			ComTable,
			Papa
		},
		data() {
			return {
				value1: [],
				wpId: "",
				wpArray: [],
				wpName: "",
				wtId: "",
				tableData: {
					column: [{
							name: "编号",
							field: "index",
							is_num: false,
							is_light: false,
						},
						{
							name: "转换时间",
							field: "zhsj",
							is_num: false,
							is_light: false,
						},
						{
							name: "操作类型",
							field: "ConversionName",
							is_num: false,
							is_light: false,
						}
					],
					data: [],
				},
			};
		},
		created() {
			this.getWp();
			this.value1 = [new Date((new Date() - 3600 * 1000 * 24 * 30)).formatDate("yyyy-MM-dd"),new Date().formatDate("yyyy-MM-dd")];
		},
		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 = "操作类型.cvs";
				//必须点击否则不会下载
				el.click();
				//移除链接释放资源
				urlObject.revokeObjectURL(url);
			},
			formatDate(date) {
			  var date = new Date(date);
			  var YY = date.getFullYear() + '-';
			  var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
			  var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
			  var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
			  var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
			  var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
			  return YY + MM + DD +" "+hh + mm + ss;
			},
			// 获取风场
			getWp() {
				let that = this;
				that.API.requestData({
					baseURL: "http://10.155.32.4:9001",
					subUrl: "benchmarking/wplist",
					success(res) {
						that.wpArray = res.data;
						that.wpId = res.data[0].id;
						that.wpName = res.data[0].wpName;
						that.getWt(that.wpId);
					}
				});
			},
			// 获取风机
			getWt(wpid) {
				let that = this;
				if (that.wpId) {
					that.API.requestData({
						method: "GET",
						baseURL: "http://10.155.32.4:9001/",
						subUrl: "benchmarking/wtList",
						data: {
							wpid
						},
						success(res) {
							that.wtArray = res.data;
							that.wtId = res.data[0].id;
						}
					});
				}
			},
			// 获取停机事件
			requestSafeList(wpId,wtid) {
				let that = this;
				if(wpId && wtid){
					that.wpId = wpId;
					that.wtid = wtid;
				}
				if(typeof that.value1[0].valueOf() != 'string'){
					that.value1[0] = that.formatDate(that.value1[0].valueOf())
				}
				if(typeof that.value1[1].valueOf() != 'string'){
					that.value1[1] = that.formatDate(that.value1[1].valueOf())
				}
				let data = {
					WindPowerStation: that.wpId,
					wtid:that.wtid,
					beginDate: that.value1[0].valueOf(),
					endDate: that.value1[1].valueOf(),
				};
				that.API.requestData({
					showLoading:true,
					baseURL: "http://10.155.32.4:9001/",
					subUrl: "operationrecord/czlb",
					data,
					success(res) {
						if (res.code == 200) {
							that.tableData.data = [];
							if (res.data.length) {
								let data = res.data;
								for (var i = 0; i < data.length; i++) {
									let obj = {
										index: i+1,
										zhsj: data[i].zhsj,
										ConversionName: data[i].ConversionName,
									};
									that.tableData.data.push(obj);
								}
							}
						}
					},
				});
			},
		},
		watch:{
			wtId(e){
				this.requestSafeList(this.wpId,e);
			},
			value1(){
				this.requestSafeList(this.wpId,this.wtId);
			}
		}
	};
</script>

<style lang="less" scope>
	@titleGray: #9ca5a8;
	@rowGray: #606769;
	@darkBack: #536268;

	.knowledge-2 {
		.el-select {
			width: 200px;
		}

		.el-input {
			width: 200px;
		}
	}
</style>