SIS_Web/src/components/gradeEvaluation/GradeEvaluation.vue

<template>
<div class="box">
	<div class="overallSituation">
				<el-tabs v-model="activeName" @tab-click="handleClick" type="border-card" style="width: 100%;margin: 0.5%;height: 130px;">
					<el-tab-pane label="风机日信息等级评估管理" name="first" :key="'first'">
						<div style="float: left;">查询条件</div>
						<div style="margin-left: 5%;width: 20%;float: left;">
							<span>风场</span>
							<el-select v-model="value" placeholder="请选择" style="margin-left: 5%;" @change="currentSel">
								<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</div>
						<div class="block" style="width:20%;float: left;">
							<span>日期</span>
							<el-date-picker v-model="value1" type="date" placeholder="选择日期" style="margin-left: 5%;">
							</el-date-picker>
						</div>
						<div style="width: 2%; float:left;margin-left: 10%;">
							<el-button type="primary" @click="dialogTableVisibleOpen()">对比</el-button>
						</div>
							<div style="width: 2%; float:left;margin-left: 10%;">
							<el-button type="primary" @click="exportData()">导出</el-button>
						</div>
						<el-dialog class="el-dialog_body" width="65%" title="日信息对比" :visible.sync="dialogTableVisible" append-to-body>
							<div class="margin">
								<div class="dialogLeftData">
									<el-table
									    :data="sortInOrderTop"
									    height="97"
									    border
										:header-cell-style="headStyle" :cell-style="{ textAlign: 'center',padding:'0px' }"
										:row-style="{height:'10px'}"
									    style="width: 100%;font-size: 10px;">
									    <el-table-column
									      prop="lhpj"
									      :label=fanNumber1
									      width="252.5">
									    </el-table-column>
									    <el-table-column
									      prop="zhpm"
									      :label=fanNumber2
									      width="252.5">
									    </el-table-column>
									  </el-table>
									<div id="leiDaTu" class="echart"></div>
								</div>

								<div class="dialogRightData">
									<el-table :data="sortInOrder" height="618"
									:row-style="{ height: '10px' }"
									border :header-cell-style="headStyle" :cell-style="{ textAlign: 'center',padding:'1px' }" 
									 style="width: 100%;font-size: 10px;">
										<el-table-column label="基础指标">
											<el-table-column prop="lx" label="类型" width="85">
											</el-table-column>
											<el-table-column prop="index" label="指标" width="115">
											</el-table-column>
											<el-table-column prop="data1" :label=fan1 width="100">
											</el-table-column>
											<el-table-column prop="data2" :label=fan2 width="100">
											</el-table-column>
											<el-table-column prop="ranking1" :label=ranking1 width="74">
											</el-table-column>
											<el-table-column prop="ranking2" :label=ranking2 width="74">
											</el-table-column>
											<el-table-column prop="score1" :label=score1 width="74">
											</el-table-column>
											<el-table-column prop="score2" :label=score2 width="74">
											</el-table-column>
										</el-table-column>
									</el-table>
								</div>
							</div>
						</el-dialog>
					</el-tab-pane>
					<el-tab-pane label="风机月信息等级评估管理" name="second" :key="'second'">
						<div style="float: left;">查询条件</div>
						<div style="margin-left: 5%;width: 20%;float: left;">
							<span>风场</span>
							<el-select v-model="value" placeholder="请选择" style="margin-left: 5%;" @change="currentSel">
								<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</div>
						<div class="block" style="width:20%;float: left;">
							<span>日期</span>
							<el-date-picker v-model="value1" type="month" placeholder="选择月" style="margin-left: 5%;">
    						</el-date-picker>
							<!-- <el-date-picker v-model="value1" type="date" placeholder="选择日期" style="margin-left: 5%;">
							</el-date-picker> -->
						</div>
						<div style="width: 2%; float:left;margin-left: 10%;">
							<el-button type="primary" @click="dialogTableVisibleOpenMonth()">对比</el-button>
						</div>
						<el-dialog class="el-dialog_body" width="65%" title="月信息对比" :visible.sync="dialogTableVisibleMonth"
						 append-to-body>
								<div class="margin">
								<div class="dialogLeftData">
									<el-table
									    :data="sortInOrderTop"
									    height="97"
									    border
										:header-cell-style="headStyle" :cell-style="{ textAlign: 'center',padding:'0px' }"
										:row-style="{height:'10px'}"
									    style="width: 100%;font-size: 10px;">
									    <el-table-column
									      prop="lhpj"
									      :label=fanNumber1
									      width="252.5">
									    </el-table-column>
									    <el-table-column
									      prop="zhpm"
									      :label=fanNumber2
									      width="252.5">
									    </el-table-column>
									  </el-table>
									<div id="leiDaTu2" class="echart"></div>
								</div>

								<div class="dialogRightData">
									<el-table :data="sortInOrder" height="618"
									:row-style="{ height: '10px' }"
									border :header-cell-style="headStyle" :cell-style="{ textAlign: 'center',padding:'1px' }" 
									 style="width: 100%;font-size: 10px;">
										<el-table-column label="基础指标">
											<el-table-column prop="lx" label="类型" width="85">
											</el-table-column>
											<el-table-column prop="index" label="指标" width="115">
											</el-table-column>
											<el-table-column prop="data1" :label=fan1 width="100">
											</el-table-column>
											<el-table-column prop="data2" :label=fan2 width="100">
											</el-table-column>
											<el-table-column prop="ranking1" :label=ranking1 width="74">
											</el-table-column>
											<el-table-column prop="ranking2" :label=ranking2 width="74">
											</el-table-column>
											<el-table-column prop="score1" :label=score1 width="74">
											</el-table-column>
											<el-table-column prop="score2" :label=score2 width="74">
											</el-table-column>
										</el-table-column>
									</el-table>
								</div>
							</div>
						</el-dialog>
					</el-tab-pane>
					<el-tab-pane label="风机年信息等级评估管理" name="cord" :key="'cord'">
						<div style="float: left;">查询条件</div>
						<div style="margin-left: 5%;width: 20%;float: left;">
							<span>风场</span>
							<el-select v-model="value" placeholder="请选择" style="margin-left: 5%;" @change="currentSel">
								<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</div>
						<div class="block" style="width:20%;float: left;">
							<span>日期</span>
							<el-date-picker v-model="value1" type="year" placeholder="选择年" style="margin-left: 5%;">
							</el-date-picker>
							<!-- <el-date-picker v-model="value1" type="date" placeholder="选择日期" style="margin-left: 5%;">
							</el-date-picker> -->
						</div>
						<div style="width: 2%; float:left;margin-left: 10%;">
							<el-button type="primary" @click="dialogTableVisibleOpenYear()">对比</el-button>
						</div>
						<el-dialog class="el-dialog_body" width="65%" title="年信息对比" :visible.sync="dialogTableVisibleYear" append-to-body>
								<div class="margin">
								<div class="dialogLeftData">
									<el-table
									    :data="sortInOrderTop"
									    height="97"
									    border
										:header-cell-style="headStyle" :cell-style="{ textAlign: 'center',padding:'0px' }"
										:row-style="{height:'10px'}"
									    style="width: 100%;font-size: 10px;">
									    <el-table-column
									      prop="lhpj"
									      :label=fanNumber1
									      width="252.5">
									    </el-table-column>
									    <el-table-column
									      prop="zhpm"
									      :label=fanNumber2
									      width="252.5">
									    </el-table-column>
									  </el-table>
									<div id="leiDaTu3" class="echart"></div>
								</div>

								<div class="dialogRightData">
									<el-table :data="sortInOrder" height="618"
									:row-style="{ height: '10px' }"
									border :header-cell-style="headStyle" :cell-style="{ textAlign: 'center',padding:'1px' }" 
									 style="width: 100%;font-size: 10px;">
										<el-table-column label="基础指标">
											<el-table-column prop="lx" label="类型" width="85">
											</el-table-column>
											<el-table-column prop="index" label="指标" width="115">
											</el-table-column>
											<el-table-column prop="data1" :label=fan1 width="100">
											</el-table-column>
											<el-table-column prop="data2" :label=fan2 width="100">
											</el-table-column>
											<el-table-column prop="ranking1" :label=ranking1 width="74">
											</el-table-column>
											<el-table-column prop="ranking2" :label=ranking2 width="74">
											</el-table-column>
											<el-table-column prop="score1" :label=score1 width="74">
											</el-table-column>
											<el-table-column prop="score2" :label=score2 width="74">
											</el-table-column>
										</el-table-column>
									</el-table>
								</div>
							</div>
						</el-dialog>
					</el-tab-pane>
				</el-tabs>

			<el-main v-if="dailyInformation == true">
				<el-table id="test1" :data="gridData" height="595" @selection-change="handleSelectionChange" :header-cell-style="headStyle"
				 :cell-style="{ textAlign: 'center' }" style="font-size: 10px;">
					<el-table-column label="等级评定日信息查看">
						<el-table-column type="selection" width="55">
						</el-table-column>
						<el-table-column prop="windturbineid" label="风机编号" width="85">
						</el-table-column>
						<el-table-column prop="level" label="等级" width="65">
						</el-table-column>
						<el-table-column prop="rank" label="综合排名" width="85">
						</el-table-column>
						<el-table-column prop="dayfdl" label="发电量" width="75">
						</el-table-column>
						<el-table-column prop="dayllfdl" label="理论发电量" width="105">
						</el-table-column>
						<el-table-column prop="dayfs" label="平均风速" width="85">
						</el-table-column>
						<el-table-column prop="daygl" label="平均功率" width="85">
						</el-table-column>
						<el-table-column prop="daygzssdl" label="故障损失" width="85">
						</el-table-column>
						<el-table-column prop="dayxdssdl" label="限电损失" width="85">
						</el-table-column>
						<el-table-column prop="daywhssdl" label="维护损失" width="85">
						</el-table-column>
						<el-table-column prop="dayxnssdl" label="性能损失" width="85">
						</el-table-column>
						<el-table-column prop="dayslssdl" label="日受累损失电量" width="120">
						</el-table-column>
						<el-table-column prop="daylyxs" label="利用小时数" width="105">
						</el-table-column>
						<el-table-column prop="daynhyd" label="拟合优度" width="85">
						</el-table-column>
						<el-table-column prop="daysbklyl" label="设备可利用率" width="105">
						</el-table-column>
						<el-table-column prop="daydxkyxs" label="等效可用系数" width="105">
						</el-table-column>
						<el-table-column prop="dayyxfss" label="有效风时数" width="105">
						</el-table-column>
						<el-table-column prop="dayxfqr" label="平均切入风速" width="105">
						</el-table-column>
						<el-table-column prop="dayjfpl" label="静风频率" width="85">
						</el-table-column>
						<el-table-column prop="dayglyzxxs" label="功率一致性系数" width="120">
						</el-table-column>
					</el-table-column>
				</el-table>
				<div style="text-align: center;">
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage2"
					 :page-size="pagesize" layout="prev, pager, next" :total="1000">
					</el-pagination>
				</div>
			</el-main>
			<el-main v-if="monthlyInformation == true">
				<el-table :data="gridDataMonth" height="595" @selection-change="handleSelectionChange" :header-cell-style="headStyle"
				 :cell-style="{ textAlign: 'center' }" style="font-size: 10px;">
					<el-table-column label="等级评定月信息查看">
						<el-table-column type="selection" width="55">
						</el-table-column>
						<el-table-column prop="windturbineid" label="风机编号" width="85">
						</el-table-column>
						<el-table-column prop="level" label="等级" width="65">
						</el-table-column>
						<el-table-column prop="rank" label="综合排名" width="85">
						</el-table-column>
						<el-table-column prop="dayfdl" label="发电量" width="75">
						</el-table-column>
						<el-table-column prop="dayllfdl" label="理论发电量" width="105">
						</el-table-column>
						<el-table-column prop="dayfs" label="平均风速" width="85">
						</el-table-column>
						<el-table-column prop="daygl" label="平均功率" width="85">
						</el-table-column>
						<el-table-column prop="daygzssdl" label="故障损失" width="85">
						</el-table-column>
						<el-table-column prop="dayxdssdl" label="限电损失" width="85">
						</el-table-column>
						<el-table-column prop="daywhssdl" label="维护损失" width="85">
						</el-table-column>
						<el-table-column prop="dayxnssdl" label="性能损失" width="85">
						</el-table-column>
						<el-table-column prop="dayslssdl" label="日受累损失电量" width="120">
						</el-table-column>
						<el-table-column prop="daylyxs" label="利用小时数" width="105">
						</el-table-column>
						<el-table-column prop="daynhyd" label="拟合优度" width="85">
						</el-table-column>
						<el-table-column prop="daysbklyl" label="设备可利用率" width="105">
						</el-table-column>
						<el-table-column prop="daydxkyxs" label="等效可用系数" width="105">
						</el-table-column>
						<el-table-column prop="dayyxfss" label="有效风时数" width="105">
						</el-table-column>
						<el-table-column prop="dayxfqr" label="平均切入风速" width="105">
						</el-table-column>
						<el-table-column prop="dayjfpl" label="静风频率" width="85">
						</el-table-column>
						<el-table-column prop="dayglyzxxs" label="功率一致性系数" width="120">
						</el-table-column>
					</el-table-column>
				</el-table>
				<div style="text-align: center;">
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage2"
					 :page-size="pagesize" layout="prev, pager, next" :total="1000">
					</el-pagination>
				</div>
			</el-main>
			<el-main v-if="annualInformation == true">
				<el-table :data="gridDataYear" height="595" @selection-change="handleSelectionChange" :header-cell-style="headStyle"
				 :cell-style="{ textAlign: 'center' }" style="font-size: 10px;">
					<el-table-column label="等级评定年信息查看">
						<el-table-column type="selection" width="55">
						</el-table-column>
						<el-table-column prop="windturbineid" label="风机编号" width="85">
						</el-table-column>
						<el-table-column prop="level" label="等级" width="65">
						</el-table-column>
						<el-table-column prop="rank" label="综合排名" width="85">
						</el-table-column>
						<el-table-column prop="dayfdl" label="发电量" width="75">
						</el-table-column>
						<el-table-column prop="dayllfdl" label="理论发电量" width="105">
						</el-table-column>
						<el-table-column prop="dayfs" label="平均风速" width="85">
						</el-table-column>
						<el-table-column prop="daygl" label="平均功率" width="85">
						</el-table-column>
						<el-table-column prop="daygzssdl" label="故障损失" width="85">
						</el-table-column>
						<el-table-column prop="dayxdssdl" label="限电损失" width="85">
						</el-table-column>
						<el-table-column prop="daywhssdl" label="维护损失" width="85">
						</el-table-column>
						<el-table-column prop="dayxnssdl" label="性能损失" width="85">
						</el-table-column>
						<el-table-column prop="dayslssdl" label="日受累损失电量" width="120">
						</el-table-column>
						<el-table-column prop="daylyxs" label="利用小时数" width="105">
						</el-table-column>
						<el-table-column prop="daynhyd" label="拟合优度" width="85">
						</el-table-column>
						<el-table-column prop="daysbklyl" label="设备可利用率" width="105">
						</el-table-column>
						<el-table-column prop="daydxkyxs" label="等效可用系数" width="105">
						</el-table-column>
						<el-table-column prop="dayyxfss" label="有效风时数" width="105">
						</el-table-column>
						<el-table-column prop="dayxfqr" label="平均切入风速" width="105">
						</el-table-column>
						<el-table-column prop="dayjfpl" label="静风频率" width="85">
						</el-table-column>
						<el-table-column prop="dayglyzxxs" label="功率一致性系数" width="120">
						</el-table-column>
					</el-table-column>
				</el-table>
				<div style="text-align: center;">
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage2"
					 :page-size="pagesize" layout="prev, pager, next" :total="1000">
					</el-pagination>
				</div>
			</el-main>
	</div>
	</div>
</template>


<script>


import excelHelper from "@/utils/excelHelper";

	export default {
		data() {
			return {
				options: [{
					value: 'MHS_FDC',
					label: '麻黄山'
				}, {
					value: 'NSS_FDC',
					label: '牛首山'
				}],
				gridData: [],
				gridDataMonth:[],
				gridDataYear:[],
				value: 'NSS_FDC',
				value1: '2021-01-01',
				yearvalue:'',
				monthvalue:'',
				dialogTableVisible: false,
				dialogTableVisibleMonth: false,
				dialogTableVisibleYear: false,
				multipleSelection: [],
				currentPage2: 1,
				pagesize: 10,
				radarChartData1: [],
				radarChartData2: [],
				radarChartName: "",
				radatChartWindturbineid1: '',
				radatChartWindturbineid2: '',
				fan1: '',
				fan2: '',
				fanNumber1 : '',
				fanNumber2 : '',
				dailyInformation: true,
				monthlyInformation: false,
				annualInformation: false,
				activeName: 'first',
				sortInOrder : [],
				sortInOrderTop: [],
				ranking1:'',
				ranking2:'',
				score1:'',
				score2:''
			}
		},
		created() {

		},
		mounted() {
			this.gradeByDaygData();
			this.gamonthlistByPage();
			this.gayearlistByPage();
		},
		methods: {
			handleOpen(key, keyPath) {
				console.log(key, keyPath);
			},
			handleClose(key, keyPath) {
				console.log(key, keyPath);
			},
			headStyle() {
				return "text-align:center"
			},
			currentSel(){
				this.gradeByDaygData();
				this.gamonthlistByPage();
				this.gayearlistByPage();
			},
			handleSelectionChange(val) {
				this.sortInOrder = [];
				this.sortInOrderTop = [];
				this.multipleSelection = val;
				if(	this.multipleSelection.length==2)
				{
					this.fan1 = this.multipleSelection[0].windturbineid
					this.fanNumber1='风机编号：'+ this.fan1;
					this.fan2 = this.multipleSelection[1].windturbineid
					this.fanNumber2='风机编号：'+ this.fan2;
					this.ranking1 = '排名：' + this.fan1.slice(5);
					this.ranking2 = '排名：' + this.fan2.slice(5);
					this.score1 = '评分：' + this.fan1.slice(5);
					this.score2 = '评分：' + this.fan2.slice(5);
					this.sortInOrderTop.push({lhpj:'量化评级：' + this.multipleSelection[0].level,zhpm:'量化评级：' + this.multipleSelection[1].level});
					this.sortInOrderTop.push({lhpj:'综合排名：' + this.multipleSelection[0].rank,zhpm: '综合排名：' + this.multipleSelection[1].rank});
					this.sortInOrder.push({lx:'',index: '发电量',data1:this.multipleSelection[0].dayfdl,data2:this.multipleSelection[1].dayfdl,ranking1:this.multipleSelection[0].monthfdl,ranking2:this.multipleSelection[1].monthfdl,score1:this.multipleSelection[0].yearfdl,score2:this.multipleSelection[1].yearfdl});
					this.sortInOrder.push({lx:'',index: '理论发电量',data1:this.multipleSelection[0].dayllfdl,data2:this.multipleSelection[1].dayllfdl,ranking1:this.multipleSelection[0].monthllfdl,ranking2:this.multipleSelection[1].monthllfdl,score1:this.multipleSelection[0].yearllfdl,score2:this.multipleSelection[1].yearllfdl});
					this.sortInOrder.push({lx:'',index: '平均功率' ,data1:this.multipleSelection[0].daygl,data2:this.multipleSelection[1].daygl,ranking1:this.multipleSelection[0].monthgl,ranking2:this.multipleSelection[1].monthgl,score1:this.multipleSelection[0].yeargl,score2:this.multipleSelection[1].yeargl});
					this.sortInOrder.push({lx:'',index: '故障损失电量',data1:this.multipleSelection[0].daygzssdl,data2:this.multipleSelection[1].daygzssdl,ranking1:this.multipleSelection[0].monthgzssdl,ranking2:this.multipleSelection[1].monthgzssdl,score1:this.multipleSelection[0].yeargzssdl,score2:this.multipleSelection[1].yeargzssdl});
					this.sortInOrder.push({lx:'',index: '限电损失电量',data1:this.multipleSelection[0].dayxdssdl,data2:this.multipleSelection[1].dayxdssdl,ranking1:this.multipleSelection[0].monthxdssdl,ranking2:this.multipleSelection[1].monthxdssdl,score1:this.multipleSelection[0].yearxdssdl,score2:this.multipleSelection[1].yearxdssdl});
					this.sortInOrder.push({lx:'',index: '维护损失电量',data1:this.multipleSelection[0].daywhssdl,data2:this.multipleSelection[1].daywhssdl,ranking1:this.multipleSelection[0].monthwhssdl,ranking2:this.multipleSelection[1].monthwhssdl,score1:this.multipleSelection[0].yearwhssdl,score2:this.multipleSelection[1].yearwhssdl});
					this.sortInOrder.push({lx:'',index: '故障时间',data1:this.multipleSelection[0].daygzsj,data2:this.multipleSelection[1].daygzsj,ranking1:this.multipleSelection[0].monthgzsj,ranking2:this.multipleSelection[1].monthgzsj,score1:this.multipleSelection[0].yeargzsj,score2:this.multipleSelection[1].yeargzsj});
					this.sortInOrder.push({lx:'',index: '维护时间',data1:this.multipleSelection[0].daywhsj,data2:this.multipleSelection[1].daywhsj,ranking1:this.multipleSelection[0].monthwhsj,ranking2:this.multipleSelection[1].monthwhsj,score1:this.multipleSelection[0].yearwhsj,score2:this.multipleSelection[1].yearwhsj});
					this.sortInOrder.push({lx:'',index: '运行时间',data1:this.multipleSelection[0].dayyxsj,data2:this.multipleSelection[1].dayyxsj,ranking1:this.multipleSelection[0].monthyxsj,ranking2:this.multipleSelection[1].monthyxsj,score1:this.multipleSelection[0].yearyxsj,score2:this.multipleSelection[1].yearyxsj});
					this.sortInOrder.push({lx:'',index: '停机时间',data1:this.multipleSelection[0].daytjsj,data2:this.multipleSelection[1].daytjsj,ranking1:this.multipleSelection[0].monthtjsj,ranking2:this.multipleSelection[1].monthtjsj,score1:this.multipleSelection[0].yeartjsj,score2:this.multipleSelection[1].yeartjsj});
					this.sortInOrder.push({lx:'性能',index: '平均切入风速',data1:this.multipleSelection[0].dayxfqr,data2:this.multipleSelection[1].dayxfqr,ranking1:this.multipleSelection[0].monthxfqr,ranking2:this.multipleSelection[1].monthxfqr,score1:this.multipleSelection[0].yearxfqr,score2:this.multipleSelection[1].yearxfqr});
					this.sortInOrder.push({lx:'性能',index: '性能损失电量',data1:this.multipleSelection[0].dayxnssdl,data2:this.multipleSelection[1].dayxnssdl,ranking1:this.multipleSelection[0].monthxnssdl,ranking2:this.multipleSelection[1].monthxnssdl,score1:this.multipleSelection[0].yearxnssdl,score2:this.multipleSelection[1].yearxnssdl});
					this.sortInOrder.push({lx:'性能',index: '拟合优度',data1:this.multipleSelection[0].daynhyd,data2:this.multipleSelection[1].daynhyd,ranking1:this.multipleSelection[0].monthnhyd,ranking2:this.multipleSelection[1].monthnhyd,score1:this.multipleSelection[0].yearnhyd,score2:this.multipleSelection[1].yearnhyd});
					this.sortInOrder.push({lx:'性能',index: '功率一致性系数',data1:this.multipleSelection[0].dayglyzxxs,data2:this.multipleSelection[1].dayglyzxxs,ranking1:this.multipleSelection[0].monthglyzxxs,ranking2:this.multipleSelection[1].monthglyzxxs,score1:this.multipleSelection[0].yearglyzxxs,score2:this.multipleSelection[1].yearglyzxxs});
					this.sortInOrder.push({lx:'可靠性管理',index: '利用小时',data1:this.multipleSelection[0].daylyxs,data2:this.multipleSelection[1].daylyxs,ranking1:this.multipleSelection[0].monthlyxs,ranking2:this.multipleSelection[1].monthlyxs,score1:this.multipleSelection[0].yearlyxs,score2:this.multipleSelection[1].yearlyxs});
					this.sortInOrder.push({lx:'可靠性管理',index: '设备可利用率',data1:this.multipleSelection[0].daysbklyl,data2:this.multipleSelection[1].daysbklyl,ranking1:this.multipleSelection[0].monthsbklyl,ranking2:this.multipleSelection[1].monthsbklyl,score1:this.multipleSelection[0].yearsbklyl,score2:this.multipleSelection[1].yearsbklyl});
					this.sortInOrder.push({lx:'可靠性管理',index: '等效可利用系数',data1:this.multipleSelection[0].daydxkyxs,data2:this.multipleSelection[1].daydxkyxs,ranking1:this.multipleSelection[0].monthdxkyxs,ranking2:this.multipleSelection[1].monthdxkyxs,score1:this.multipleSelection[0].yeardxkyxs,score2:this.multipleSelection[1].yeardxkyxs});
					this.sortInOrder.push({lx:'可靠性管理',index: '有效风时速',data1:this.multipleSelection[0].dayyxfss,data2:this.multipleSelection[1].dayyxfss,ranking1:this.multipleSelection[0].monthyxfss,ranking2:this.multipleSelection[1].monthyxfss,score1:this.multipleSelection[0].yearyxfss,score2:this.multipleSelection[1].yearyxfss});
					this.sortInOrder.push({lx:'资源',index: '平均风速',data1:this.multipleSelection[0].dayfs,data2:this.multipleSelection[1].dayfs,ranking1:this.multipleSelection[0].monthfs,ranking2:this.multipleSelection[1].monthfs,score1:this.multipleSelection[0].yearfs,score2:this.multipleSelection[1].yearfs});
					this.sortInOrder.push({lx:'资源',index: '静风频率',data1:this.multipleSelection[0].daygl,data2:this.multipleSelection[1].daygl,ranking1:this.multipleSelection[0].monthgl,ranking2:this.multipleSelection[1].monthgl,score1:this.multipleSelection[0].yeargl,score2:this.multipleSelection[1].yeargl});	
					this.radarChartData();
				}
				
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				// console.log(`当前页: ${val}`);
				this.gradeByDaygData();
				this.gamonthlistByPage();
				this.gayearlistByPage();
			},
			exportData() {

			excelHelper.exportExcel("test1","fileName",".xls",true);

			},
			dialogTableVisibleOpen() {
				this.dialogTableVisible = true;
				this.radatChartWindturbineid1 = this.multipleSelection[0].windturbineid;
				this.radatChartWindturbineid2 = this.multipleSelection[1].windturbineid;
				this.$nextTick(function() {
					this.drawPie('leiDaTu')
				})
			},
			dialogTableVisibleOpenMonth() {
				this.dialogTableVisibleMonth = true;
				this.radatChartWindturbineid1 = this.multipleSelection[0].windturbineid;
				this.radatChartWindturbineid2 = this.multipleSelection[1].windturbineid;
				this.$nextTick(function() {
					this.drawPie2('leiDaTu2')
				})
			},
			dialogTableVisibleOpenYear() {
				this.dialogTableVisibleYear = true;
				this.radatChartWindturbineid1 = this.multipleSelection[0].windturbineid;
				this.radatChartWindturbineid2 = this.multipleSelection[1].windturbineid;
				this.$nextTick(function() {
					this.drawPie3('leiDaTu2')
				})
			},
			handleClick(tab) {
				// this.sortInOrder = [];
				// this.sortInOrderTop = [];
				if (tab.name === 'first') {
					this.dailyInformation = true
					this.monthlyInformation = false
					this.annualInformation = false
					this.gradeByDaygData();
					this.gamonthlistByPage();
					this.gayearlistByPage();
				} else if (tab.name === 'second') {
					this.dailyInformation = false
					this.monthlyInformation = true
					this.annualInformation = false
					this.gradeByDaygData();
					this.gamonthlistByPage();
					this.gayearlistByPage();
				} else if (tab.name === 'cord') {
					this.dailyInformation = false
					this.monthlyInformation = false
					this.annualInformation = true
					this.gradeByDaygData();
					this.gamonthlistByPage();
					this.gayearlistByPage();
				}
			},
			gradeByDaygData() {
				let that = this;
				var page = new URLSearchParams();
				page.append('pageNum', this.currentPage2);
				page.append('pageSize', this.pagesize);
				page.append('wpId', this.value);
				page.append('recorddate', this.value1);
				this.$http.post("/benchmarking/gadaylistByPage", page).then((res) => {
					that.gridData = res.data.data.list;
				})

			},
			gamonthlistByPage(){
				let that = this;
				this.yearvalue = this.value1.slice(0,4);
				this.monthvalue = this.value1.slice(5,7);
				var pagemonth = new URLSearchParams();
				pagemonth.append('pageNum',this.currentPage2);
				pagemonth.append('pageSize',this.pagesize);
				pagemonth.append('wpId',this.value);
				pagemonth.append('year',this.yearvalue);
				pagemonth.append('month',this.monthvalue);
				this.$http.post("/benchmarking/gamonthlistByPage",pagemonth).then((res) => {
					that.gridDataMonth = res.data.data.list;
					
				})
			},
			gayearlistByPage(){
				let that = this;
				this.yearvalue = this.value1.slice(0,4);
				var pageyear = new URLSearchParams();
				pageyear.append('pageNum',this.currentPage2);
				pageyear.append('pageSize',this.pagesize);
				pageyear.append('wpId',this.value);
				pageyear.append('year',this.yearvalue);
				this.$http.post("/benchmarking/gayearlistByPage",pageyear).then((res) =>{
					that.gridDataYear = res.data.data.list;
					console.log(that.gridDataYear)
				})

			},
			radarChartData() {
				let that = this;
				this.$http.get("/benchmarking/wtchart?gaid1=" + this.multipleSelection[0].id +
					"&gaid2=" + this.multipleSelection[1].id).then((res) => {
					console.log(res)
					var arr1 = [];
					var name = [];
					res.data.data.gaid1.forEach(function(item) {
						arr1.push({
							data1: item.data1
						})
						name.push({
							name: item.name
						})
					})
					that.radarChartName = name
					var target = {
						max: 15
					}
					for (let v = 0; v < that.radarChartName.length; v++) {
						const returnedTarget = Object.assign(that.radarChartName[v], target);
					}
					for (let i = 0; i < arr1.length; i++) {
						that.radarChartData1.push(arr1[i].data1)
					}
					var arr2 = [];
					res.data.data.gaid2.forEach(function(item) {
						arr2.push({
							data1: item.data1
						})
					})
					for (let j = 0; j < arr2.length; j++) {
						that.radarChartData2.push(arr2[j].data1)
					}
					
				})
			},
			drawPie() {
				var charts;
				if (charts != null && charts != "" && charts != undefined){
				    charts.dispose();
				}
				charts= this.$echarts.init(document.getElementById('leiDaTu'));
				let option = {
					tooltip: {},
					legend: {
						x: 'center', //可设定图例在左、右、居中
						y: 'bottom',
						data: [this.radatChartWindturbineid1, this.radatChartWindturbineid2]
					},
					radar: {
						// shape: 'circle',
						name: {
							textStyle: {
								color: '#fff',
								backgroundColor: '#999',
								borderRadius: 3,
								padding: [3, 5]
							}
						},
						indicator: this.radarChartName
					},
					series: [{
						name: '预算 vs 开销（Budget vs spending）',
						type: 'radar',
						// areaStyle: {normal: {}},
						data: [{
								value: this.radarChartData1,
								name: this.radatChartWindturbineid1
							},
							{
								value: this.radarChartData2,
								name: this.radatChartWindturbineid2
							}
						]
					}]
				}
				charts.clear();
				charts.setOption(option);
				
			},drawPie2() {
				var charts2;
				if (charts2 != null && charts2 != "" && charts2 != undefined){
				    charts2.dispose();
				}
				charts2= this.$echarts.init(document.getElementById('leiDaTu2'));
				let option2 = {
					tooltip: {},
					legend: {
						x: 'center', //可设定图例在左、右、居中
						y: 'bottom',
						data: [this.radatChartWindturbineid1, this.radatChartWindturbineid2]
					},
					radar: {
						// shape: 'circle',
						name: {
							textStyle: {
								color: '#fff',
								backgroundColor: '#999',
								borderRadius: 3,
								padding: [3, 5]
							}
						},
						indicator: this.radarChartName
					},
					series: [{
						name: '预算 vs 开销（Budget vs spending）',
						type: 'radar',
						// areaStyle: {normal: {}},
						data: [{
								value: this.radarChartData1,
								name: this.radatChartWindturbineid1
							},
							{
								value: this.radarChartData2,
								name: this.radatChartWindturbineid2
							}
						]
					}]
				}
				charts2.clear();
				charts2.setOption(option2);
				
			},
			drawPie3() {
				var charts3;
				if (charts3 != null && charts3 != "" && charts3 != undefined){
				    charts3.dispose();
				}

				charts3= this.$echarts.init(document.getElementById('leiDaTu3'));
				let option3 = {
					tooltip: {},
					legend: {
						x: 'center', //可设定图例在左、右、居中
						y: 'bottom',
						data: [this.radatChartWindturbineid1, this.radatChartWindturbineid2]
					},
					radar: {
						// shape: 'circle',
						name: {
							textStyle: {
								color: '#fff',
								backgroundColor: '#999',
								borderRadius: 3,
								padding: [3, 5]
							}
						},
						indicator: this.radarChartName
					},
					series: [{
						name: '预算 vs 开销（Budget vs spending）',
						type: 'radar',
						// areaStyle: {normal: {}},
						data: [{
								value: this.radarChartData1,
								name: this.radatChartWindturbineid1
							},
							{
								value: this.radarChartData2,
								name: this.radatChartWindturbineid2
							}
						]
					}]
				}
				charts3.clear();
				charts3.setOption(option3);
				
			},

		}
	}
</script>

<style>
	.box{
		width: 100%;
		display: flex;
		justify-content: space-around;
 		align-items: center;
 		overflow: hidden;
	}

	.overallSituation{
		width: 100%;
		flex-grow: 1;
	}

	.leftNavigation {
		width: 15%;
		height: 790px;
	}

	#leiDaTu {
		margin-left: 5%;
		height: 480px;
		width: 450px;
		float: left;
	}

	#leiDaTu2 {
		margin-left: 5%;
		height: 480px;
		width: 450px;
		float: left;
	}

	#leiDaTu3 {
		margin-left: 5%;
		height: 480px;
		width: 450px;
		float: left;
	}

	.margin {
		width: 100%;
		height: 618px;
		border: #000000 1px solid;
	}

	.dialogLeftData {
		width: 42%;
		height: 120px;
		text-align: center;
		float: left;
	}

	.dialogRightData {
		width: 58%;
		height: 650px;
		text-align: center;
		float: left;
	}
</style>