fd_dwgz_zhyw/src/views/MalfunctionWarning/components/testReport.vue

<template>
	<el-dialog custom-class="cDialog" top="50px" v-model="dialogVisible" width="80%" @opened="report()">
		<el-button style="position: absolute; right: 24px; top: 60px; z-index: 5000" type="primary" @click="exportPDF">
			导出为PDF</el-button>
		<div class="pdfDom">
			<div class="title">故障检测报告</div>
			<div class="info">
				<div class="infoContent">
					<div class="contents">
						<div class="contentsTitle">风机编号：</div>
						<div>{{reportData.windturbineId}}</div>
					</div>
					<div class="contents">
						<div class="contentsTitle">风机型号：</div>
						<div>{{reportData.model}}</div>
					</div>
					<div class="contents">
						<div class="contentsTitle">故障发生时间：</div>
						<div>{{reportData.faultTime}}</div>
					</div>
				</div>
				<div class="infoContent">
					<div class="contents">
						<div class="contentsTitle">使用模型：</div>
						<div>{{modelName}}</div>
					</div>
					<div class="contents">
						<div class="contentsTitle">训练次数：</div>
						<div>{{reportData.trainingTimes}}次</div>
					</div>
					<div class="contents"></div>
				</div>
				<div class="result">
					<div class="moduleTitle">诊断结果:</div>
					<div class="resultContent">
						诊断故障最大可能为<text style="color: #dc143c">{{faultResult}}</text>下表为各故障可能发生的实际概率：
					</div>
					<div class="resultTable">
						<el-table empty-text="暂无数据" :data="faultList"
							:header-cell-style="{ background: 'rgb(153,204,255)', color: '#000', 'font-size': '20px', }"
							:cell-style="{ 'font-size': '20px', color: '#696969', }" border stripe
							style="width: 100%; margin: 10px 0">
							<el-table-column prop="name" label="故障名称" align="center"></el-table-column>
							<el-table-column prop="percent" label="发生概率" align="center"></el-table-column>
						</el-table>
					</div>
				</div>
				<div class="result">
					<div class="moduleTitle">诊断依据:</div>
					<div class="resultContent">
						根据风场情况，训练故障权重图、训练和测试准确率、训练模型误差率如下：
					</div>
					<div class="charts">
						<LineChart width="33.33%" v-if="lossList" id="reporLoss" :reportFlag="true" :dataList="lossList"></LineChart>
						<LineChart width="33.33%" v-if="accuracyList" id="reporAccuracy" :reportFlag="true" :dataList="accuracyList"> </LineChart>
						<BarChart width="33.33%" v-if="barList.length > 0" id="reportBar" :baseLine='BaseLine' :barList="barList"> </BarChart>
					</div>
					<div class="resultContent">
						该模型训练和测试的准确率分别为<text style="color: #dc143c">{{result[0]}} 和 {{result[1]}}</text>；
						误差率分别为<text style="color: #dc143c">{{result2[0]}} 和 {{result2[1]}}</text>；<br>
						该模型训练所倚重的测点比重分别为：<text style="color: #dc143c" v-for="(item,index) in proportionList" :key="index">{{item.name+item.percent+(index != (proportionList.length-1)?'、':'')}}</text>。<br>
						模型训练过程所有测点倚重占比如下表所示：
					</div>
					<div class="resultTable">
						<el-table empty-text="暂无数据" :data="proportionList" :header-cell-style="{ background: 'rgb(153,204,255)', color: '#000', 'font-size': '20px', }" :cell-style="{ 'font-size': '20px', color: '#696969', }" border stripe style="width: 100%; margin: 10px 0">
							<el-table-column prop="name" label="故障名称" align="center"></el-table-column>
							<el-table-column prop="percent" label="发生概率" align="center"></el-table-column>
						</el-table>
					</div>
				</div>
			</div>
		</div>
	</el-dialog>
</template>
<script>
	import Get_PDF from "@tools/htmlToPdf";
	import LineChart from "./lineChart.vue";
	import BarChart from "./barChart.vue";
	export default {
		components: {
			LineChart,
			BarChart,
		},
		props: {
			faultid: '',
		},
		created() {
			
		},
		data() {
			return {
				result:[],
				result2:[],
				modelName:'',
				lossList: {},
				accuracyList: {},
				BaseLine: '',
				barList: [],
				faultResult:'',
				reportData: {},
				faultList: [{
						name: "齿轮箱故障",
						percent: "80%",
					},
					{
						name: "变频器故障",
						percent: "17%",
					},
				],
				proportionList: [{
						name: "偏航位置",
						percent: "7.2%",
					},
					{
						name: "发电机转速",
						percent: "4.4%",
					}
				],
			};
		},
		methods: {
			jzxF(arr){
				let jzx = [],
					jzxData = [],
					baselineAdd = 0;
				arr.forEach(ele => {
					if (parseFloat(ele.value) >= this.BaseLine) {
						baselineAdd += parseFloat(ele.value);
						jzx.push(ele)
					}
				})
				
				let jzxNum = [];
				let jzxNum2 = []; //初始顺序
				jzx.forEach(ele => {
					jzxNum.push(parseFloat(ele.value));
					jzxNum2.push(parseFloat(ele.value));
				})
				let jzxNumData = jzxNum.sort().reverse().slice(0, 5);
				
				jzxNumData.forEach(ele => {
					let idx = jzxNum2.indexOf(ele);
					jzxData.push({
						name: jzx[idx].name,
						percent: ((ele/baselineAdd)*100).toFixed(3) + "%",
					})
				})
				this.proportionList = jzxData;
			},
			history(name) {
			  let that = this;
			  that.API.requestData({
			    method: "GET",
			    baseURL: "http://10.155.32.14:9090/",
			    subUrl: "api/supervised/history",
			    success(res) {
			      if (res) {
					let data = res.find(ele=>{
						  return ele.name === name
					  });
					  
					data.coordinate = JSON.parse(data?.coordinate);
					data.coordinate.bar = JSON.parse(data?.coordinate.bar);
					
					that.lossList.loss = data?.coordinate.loss;
					that.lossList.val_loss = data?.coordinate.val_loss;
					
					that.BaseLine = parseFloat(data?.coordinate.BaseLine);
					that.accuracyList.accuracy = data?.coordinate.accuracy;
					that.accuracyList.val_accuracy = data?.coordinate.val_accuracy;
					
					data?.coordinate.bar?.sort(that.Compare("value"));
					that.barList = data?.coordinate.bar?.slice(0, 5);
					
					let accuracy = that.accuracyList.accuracy.sort()[that.accuracyList.accuracy.length-1];
					let val_accuracy = that.accuracyList.val_accuracy.sort()[that.accuracyList.val_accuracy.length-1];
					let loss = that.lossList.loss.sort()[that.lossList.loss.length-1];
					let val_loss = that.lossList.val_loss.sort()[that.lossList.val_loss.length-1];
					that.endResult(accuracy,val_accuracy,loss,val_loss);
					
					that.jzxF(data?.coordinate.bar);
			      }
			    },
			  });
			},
			endResult(accuracy,val_accuracy,loss,val_loss){//取数组最后一位
				let result = [accuracy,val_accuracy];
				result.forEach((ele,index)=>{
					result[index] = (ele*100).toFixed(3)+'%'
				})
				let result2 = [loss,val_loss];
				result2.forEach((ele,index)=>{
					result2[index] = ele.toFixed(2)
				})
				this.result = result;
				this.result2 = result2;
			},
			Compare(property) {
			  return function (a, b) {
			    var value1 = a[property];
			    var value2 = b[property];
			    return value2 - value1;
			  };
			},
			exportPDF(name) {// 导出PDF
				this.BASE.showMsg({
					type: "success",
					msg: "正在导出...请稍后...",
				});
				Get_PDF.downloadPDF(document.querySelector(".pdfDom"), "故障检测报告");
			},
			report() {
				let that = this;
				that.API.requestData({
					method: "GET",
					subUrl: "http://10.155.32.14:9090/api/autofault/report",
					success(res) {
						if (res) {
							res.forEach(ele => {
								if (ele.id === that.faultid) {
									that.history(ele.modelName)
									that.reportData = ele;
									that.modelName=ele.modelName.split('-')[2];
									let faultList = [],
										faultResult = '';
									ele.result.split(' ').forEach(ele => {
										let data = ele.split(':');
										if(data.length > 1){
											faultList.push({
												name: data[0],
												percent: data[1] * 100 + '%'
											})
											faultResult += data[0] + ':' + data[1] * 100 + '%，'
										}
									})
									
									that.faultResult = faultResult;
									that.faultList = faultList;
									
								}
							})
						}
					},
				});
			}
		},
	};
</script>
<style lang="less" scoped>
	.cDialog {
		position: relative;

		.pdfDom {
			padding: 30px 50px;
		}

		.title {
			text-align: center;
			font-size: 32px;
			font-weight: 700;
		}

		.info {
			display: flex;
			flex-direction: column;
			width: 100%;

			.infoContent {
				width: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				margin-bottom: 20px;
				font-size: 22px;

				.contents {
					display: flex;
					flex-direction: row;
					align-items: center;
					width: 33%;

					.contentsTitle {
						font-weight: bold;
					}
				}
			}

			.result {
				font-size: 22px;

				.resultTable {
					display: flex;
					width: 40%;
					margin-left: 30%;
				}

				.charts {
					display: flex;
					justify-content: left;
				}
			}
		}
	}
</style>