hb_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" >
							<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-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>
					<button class="btn green" @click="fx">分析</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>
		<el-dialog title="报警等级占比图" v-model="dialogVisible" width="750px" top="10vh" custom-class="modal" :close-on-click-modal="false" :destroy-on-close='true'>
			<el-row type="flex" justify="end">
				<div class="query">
					<div class="query-items">
						<div class="query-actions">
							<button class="btn green" @click="exportPDF">导出为PDF</button>
						</div>
					</div>
				</div>
			</el-row>
			<el-row>
				<div class="pdfDom">
					<dual-pie-chart height="40vh" width='700px' :innerData="innerAnalyis" :outerData="outerAnalyis" />
				</div>
			</el-row>
		</el-dialog>
	</div>
</template>
<script>
	import ComTable from "@/components/coms/table/table.vue";
	import DualPieChart from "@/components/chart/pie/dual-pie-chart.vue";
	import Get_PDF from "@tools/htmlToPdf";
	export default {
		components: {
			ComTable,
			DualPieChart,
			Get_PDF
		},
		data() {
			let that = this;
			return {
				innerAnalyis: [],
				outerAnalyis: [],
				dialogVisible: false,
				waitAjax:true,//等待执行完了再加载table
				ChangZhan: [],
				wpId: "",
				alarmDesc: "",
				startDate: "",
				endDate: "",
				tableLoading: true,
				pageIndex: 1,
				pageSize: 20,
				tableData: {
					column: [{
							name: "场站",
							field: "stationName",
							is_num: false,
							is_light: false,
						}, 
						{
							name: "报警时间",
							field: "alertTime",
							is_num: false,
							is_light: false,
						},
						{
							name: "报警描述",
							field: "alertText",
							is_num: false,
							is_light: false,
						},
						{
							name: "报警类别",
							field: "category1",
							is_num: false,
							is_light: false,
						},
						{
							name: "报警等级",
							field: "rank",
							is_num: false,
							is_light: false,
							sortable: true,
						},
					],
					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;
						if(that.waitAjax){
							that.getTable();
							that.waitAjax=false;
						}
					},
				});
			},
			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,
						pagenum: this.pageIndex,
						pagesize: this.pageSize,
					},
					success(res) {
						if (res.data) {
							let rank = ['低','中低','中','中高','高'];
							let data = res.data.records;
							data.forEach(ele=>{
								ele.rank = rank[parseInt(ele.rank) - 1];
								ele.category1 == 'GF' ? ele.category1 = '光伏': ele.category1 = '升压站';
							})
							that.tableData.data = data;
							that.tableData.total = res.data.total;
						} 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, "光伏告警");
			},
			fx(){
				var that = this;
				that.API.requestData({
					method: "GET",
					timeout: 30000,
					showLoading:true,
					subUrl: "photovoltaic/query",
					data: {
						category1: "GF",
						stationid: this.wpId,
						starttime: this.startDate,
						endtime: this.endDate,
						keyword: this.alarmDesc,
						pagenum: this.pageIndex,
						pagesize: this.pageSize,
					},
					success(res) {
						var analyis = [];
						let data = res.data[1],
							rank = ['低','中低','中','中高','高'],
							val = Object.values(data);
						val.pop();
						val.forEach((ele,index) =>{
							analyis.push({
							  name: rank[index],
							  value: ele
							})
						})
						that.innerAnalyis = analyis;
						that.outerAnalyis = analyis;
						that.dialogVisible= true;
					},
				});
			},
			exportPDF(name) {
			  this.BASE.showMsg({
			    type: "success",
			    msg: "正在导出...请稍后...",
			  });
			  Get_PDF.downloadPDF(
			    document.querySelector(".pdfDom"),
			    "报警等级占比图"
			  );
			},
		},
	};
</script>
<style lang="less">
	.title {
		background: rgba(255, 255, 255, 0.1);
		margin-bottom: 8px;
		padding: 1vh;
	}
	.pdfDom{
		padding-top: 5vh;
		background-color: #111C1B;
		height: 50vh;
	}
</style>