sis_zhfx/src/views/warn/gfgj.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="wpId" clearable placeholder="请选择" popper-class="select" @change=" (wpId) => { Windturbines(); } ">
							<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-select v-model="wtId" placeholder="请选择" popper-class="select">
							<el-option v-for="item in windturbines" :key="item.id" :label="item.name" :value="item.id">
							</el-option>
						</el-select>
					</div>
				</div>
				<div class="query-item">
				  <div class="lable">描述：</div>
				  <div class="search-input">
				    <el-input v-model="alarmDesc" placeholder="报警描述"></el-input>
				  </div>
				</div>
				<div class="query-item">
					<div class="lable">开始日期：</div>
					<div class="search-input">
						<el-date-picker v-model="startDate" type="datetime" placeholder="开始日期"
							popper-class="date-select" value-format="YYYY-MM-DD HH:mm:ss"></el-date-picker>
					</div>
				</div>
				<div class="query-item">
					<div class="lable">结束日期：</div>
					<div class="search-input">
						<el-date-picker v-model="endDate" type="datetime" placeholder="开始日期" popper-class="date-select"
							value-format="YYYY-MM-DD HH:mm:ss"></el-date-picker>
					</div>
				</div>
				<div class="query-actions">
					<button class="btn green" @click="getTable()">查询</button>
					<button class="btn green" @click="exportExcel()">导出</button>
				</div>
			</div>
		</div>
		<div class="table-box">
			<div class="title">光伏告警</div>
			<ComTable ref="curRef" :data="tableData" :pageSize="20" @onPagging="onChangePage" @sizeChange="sizeChange"
				@pageClick="pageClick" 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";

	export default {
		components: {
			ComTable
		},
		data() {
			let that = this;
			return {
				waitAjax:true,//等待执行完了再加载table
				ChangZhan: [],
				wpId: "",
				wtId: "",
				windturbines: [],
				alarmDesc: "",
				startDate: "",
				endDate: "",
				tableLoading: true,
				pageIndex: 1,
				pageSize: 20,
				tableData: {
					column: [{
							name: "场站",
							field: "stationName",
							is_num: false,
							is_light: false,
							id: "id",
						},
						{
							name: "机组",
							field: "windturbineName",
							is_num: false,
							is_light: false,
							id: "id",
						},

						{
							name: "报警时间",
							field: "alertTime",
							is_num: false,
							is_light: false,
							id: "id",
						},
						{
							name: "报警描述",
							field: "alertText",
							is_num: false,
							is_light: false,
							id: "id",
						},
						{
							name: "报警类别",
							field: "category2",
							is_num: false,
							is_light: false,
							id: "id",
						},
						{
							name: "报警等级",
							field: "messageType",
							is_num: false,
							is_light: false,
							sortable: true,
							id: "id",
						},
					],
					data: [],
					currentPageTotal: 0,
				},
			};
		},
		created() {
			let end = new Date();
			let start = new Date(end.getTime() - 1 * 24 * 60 * 60 * 1000);
			this.endDate = end.formatDate("yyyy-MM-dd hh:mm:ss");
			this.startDate = start.formatDate("yyyy-MM-dd hh:mm:ss");
			this.ChangZhanVal();
		},
		methods: {
			// 场站
			ChangZhanVal() {
				var that = this;
				that.API.requestData({
					method: "GET",
					baseURL: "http://10.155.32.4:9001/benchmarking/wpgflist",
					success(res) {
						that.ChangZhan = res.data;
						that.wpId = res.data[0].id;
						that.Windturbines(that.wpId)
						if(that.waitAjax){
							that.getTable();
							that.waitAjax=false;
						}
					},
				});
			},
			Windturbines(wpId) {
				let that = this;
				that.API.requestData({
					method: "GET",
					baseURL: "http://10.155.32.4:8082/",
					subUrl: "powercompare/windturbineAjax",
					data: {
						wpId: wpId
					},
					success(res) {
						that.windturbines = res.data;
						that.windturbines.unshift({
							id: "",
							name: "请选择"
						});
					},
				});
			},
			getTable() {
				let that = this;
				this.tableLoading = true;
				this.API.requestData({
					timeout: 30000,
					method: "GET",
					baseURL: "http://192.168.1.18:8075/",
					subUrl: "alarm/history/page2",
					data: {
						category1: "GF",
						stationid: this.wpId,
						starttime: this.startDate,
						endtime: this.endDate,
						keyword: this.alarmDesc,
						windturbineid: this.wtId,
						pagenum: this.pageIndex,
						pagesize: this.pageSize,
					},
					success(res) {
						if (res.data) {
							that.tableData.data = res.data.records;
							that.tableData.total = res.data.total;
							console.log(that.tableData)
						} else {
							that.tableData.data = [];
							that.tableData.total = 0;
						}
						that.tableLoading = false;
					},
				});
			},
			onChangePage(params) {
				this.pageIndex = params.pageIndex;
				this.pageSize = params.pageSize;
				this.getTable();
			},
			exportExcel() {
				let excelData = this.BASE.deepCopy(this.tableData);
				this.BASE.exportExcel(excelData, "光伏告警");
			},
		},
	};
</script>
<style lang="less">
	.title {
		background: rgba(255, 255, 255, 0.1);
		margin-bottom: 8px;
		padding: 1vh;
	}
</style>