光伏告警饼状图

src/views/warn/gfgj.vue

@@ -33,6 +33,7 @@
 				<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>
@@ -42,18 +43,40 @@
 				@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
+			ComTable,
+			DualPieChart,
+			Get_PDF
 		},
 		data() {
 			let that = this;
 			return {
+				innerAnalyis: [],
+				outerAnalyis: [],
+				dialogVisible: false,
 				waitAjax:true,//等待执行完了再加载table
 				ChangZhan: [],
 				wpId: "",
@@ -169,6 +192,50 @@
 				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",
+						stId: 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],
+							messageType = ['低','中低','中','中高','高'],
+							val = Object.values(data);
+						val.pop();
+						val.forEach((ele,index) =>{
+							analyis.push({
+							  name: messageType[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>
@@ -178,4 +245,9 @@
 		margin-bottom: 8px;
 		padding: 1vh;
 	}
+	.pdfDom{
+		padding-top: 5vh;
+		background-color: #111C1B;
+		height: 50vh;
+	}
 </style>