李再勋功能提交并修改

src/App.vue

@@ -26,18 +26,26 @@
           <el-submenu index="3">
             <template slot="title">性能分析</template>
             <el-menu-item index="/gradeEvaluation">等级评估</el-menu-item>
+            <el-menu-item index="/cutAndSpeed">切入切出风速整合</el-menu-item>
+            <el-menu-item index="/performanceAnalysis">单机性能分析</el-menu-item>
+            <el-menu-item index="/singleMachinePower">单机功率信息</el-menu-item>
+            <el-menu-item index="/plannedGeneration">计划发电量列表</el-menu-item>
             <el-submenu index="3-1">
               <template slot="title">单机性能分析</template>
               <el-menu-item index="/individual_Saturation">单机饱和度</el-menu-item>
               <el-menu-item index="/individual_Pandectinformation">单机信息总览</el-menu-item>
               <el-menu-item index="/PowerandWindspeed_Chart">单机功率风速排布图</el-menu-item>
-              <el-menu-item index="/Power_Chart">风机功率排布图</el-menu-item>
+              <el-menu-item index="/Power_Chart">风机功率排布图</el-menu-item>  
             </el-submenu>
             <el-submenu index="3-2">
               <template slot="title">指标排行</template>
               <el-menu-item index="/GoodnessRank">拟合优度排行</el-menu-item>
               <el-menu-item index="/GrossgenerationRank">总发电量排行</el-menu-item>
               <el-menu-item index="/PercentageLossr_Rank">损失率排行榜</el-menu-item>
+              <el-menu-item index="/rankingLoadRate">负荷率排行榜</el-menu-item>
+              <el-menu-item index="/rankingCallThePolice">报警排行榜</el-menu-item>
+              <el-menu-item index="/rankingUtilization">利用率排行榜</el-menu-item>
+              <el-menu-item index="/rankingCurveDeviationRate">曲线偏差率排行</el-menu-item>
             </el-submenu>
           </el-submenu>
           <el-submenu index="4">
@@ -51,6 +59,11 @@
             <el-submenu index="2-5">
               <template slot="title">损失对标</template>
               <el-menu-item index="/fiveLossRates">五项损失率</el-menu-item>
+              <el-menu-item index="/lossRateFailure">故障损失率</el-menu-item>
+              <el-menu-item index="/lossRateAffected">受累损失率</el-menu-item>
+              <el-menu-item index="/lossRateMaintenance">检修损失率</el-menu-item>
+              <el-menu-item index="/lossRatePerformance">性能损失率</el-menu-item>
+              <el-menu-item index="/lossRateAbandoned">弃风率</el-menu-item>
             </el-submenu>
             <el-submenu index="2-6">
               <template slot="title">场际对标</template>
@@ -89,6 +102,7 @@
           <el-submenu index="8">
             <template slot="title">报表管理</template>
           </el-submenu>
+          
         </el-menu>
       </el-header>
       <el-main>

src/router/index.js

@@ -168,6 +168,96 @@ const routes = [{
 		path: '/Power_Chart',
 		component: () => import('../views/SinglePerformanceAnalysis/PowerChart.vue')
 	}
+	,
+	{
+		path: '/lossRateAbandoned',
+		name: 'lossRateAbandoned',
+		component: () => import('../views/benchMarking/LossRateAbandoned.vue')
+	}
+	,
+	{
+		path: '/lossRateAffected',
+		name: 'lossRateAffected',
+		component: () => import('../views/benchMarking/LossRateAffected.vue')
+	}
+	,
+	{
+		path: '/lossRateFailure',
+		name: 'lossRateFailure',
+		component: () => import('../views/benchMarking/LossRateFailure.vue')
+	}
+	,
+	{
+		path: '/lossRateMaintenance',
+		name: 'lossRateMaintenance',
+		component: () => import('../views/benchMarking/LossRateMaintenance.vue')
+	}
+	,
+	{
+		path: '/lossRatePerformance',
+		name: 'lossRatePerformance',
+		component: () => import('../views/benchMarking/LossRatePerformance.vue')
+	}
+	,
+	{
+		path: '/rankingLoadRate',
+		name: 'rankingLoadRate',
+		component: () => import('../views/rankingIndex/RankingLoadRate.vue')
+	}
+	,
+	{
+		path: '/rankingCurveDeviationRate',
+		name: 'rankingCurveDeviationRate',
+		component: () => import('../views/rankingIndex/RankingCurveDeviationRate.vue')
+	}
+	,
+	{
+		path: '/rankingCallThePolice',
+		name: 'rankingCallThePolice',
+		component: () => import('../views/rankingIndex/RankingCallThePolice.vue')
+	}
+	,
+	{
+		path: '/rankingUtilization',
+		name: 'rankingUtilization',
+		component: () => import('../views/rankingIndex/RankingUtilization.vue')
+	}
+	,
+	{
+		path: '/singleMachinePower',
+		name: 'singleMachinePower',
+		component: () => import('../views/rankingIndex/SingleMachinePower.vue')
+	}
+	,
+	{
+		path: '/plannedGeneration',
+		name: 'plannedGeneration',
+		component: () => import('../views/rankingIndex/PlannedGeneration.vue')
+	}
+	,
+	{
+		path: '/cutAndSpeed',
+		name: 'cutAndSpeed',
+		component: () => import('../views/rankingIndex/CutAndSpeed.vue')
+	}
+	,
+	{
+		path: '/cutAndSpeedHistory',
+		name: 'cutAndSpeedHistory',
+		component: () => import('../views/rankingIndex/CutAndSpeedHistory.vue')
+	}
+	,
+	{
+		path: '/performanceAnalysis',
+		name: 'performanceAnalysis',
+		component: () => import('../views/gradeEvaluation/PerformanceAnalysis.vue')
+	}
+	,
+	{
+		path: '/performanceAnalysisOperation',
+		name: 'performanceAnalysisOperation',
+		component: () => import('../views/gradeEvaluation/PerformanceAnalysisOperation.vue')
+	}
 ]
 
 const router = new VueRouter({

src/utils/fomatDate.js

@@ -0,0 +1,23 @@
+export function formatDate(date, fmt) {
+    if (/(y+)/.test(fmt)) {
+      fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
+    }
+    let o = {
+      'M+': date.getMonth() + 1,
+      'd+': date.getDate(),
+      'h+': date.getHours(),
+      'm+': date.getMinutes(),
+      's+': date.getSeconds()
+    }
+    for (let k in o) {
+      if (new RegExp(`(${k})`).test(fmt)) {
+        let str = o[k] + ''
+        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str))
+      }
+    }
+    return fmt
+  }
+   
+  function padLeftZero(str) {
+    return ('00' + str).substr(str.length)
+  }

src/views/benchMarking/FiveLossLineTable.vue

@@ -3,8 +3,8 @@
         <div class="searchBar">
         <el-form :inline="true" :model="formInline" class="demo-form-inline">
           <el-row :gutter="1">
-            <el-form-item label="风场">
-              <el-select v-model="value"  multiple placeholder="请选择">
+            <el-form-item label="风场一">
+              <el-select v-model="value"  placeholder="请选择">
               <el-option
                 v-for="item in options"
                 :key="item.name"
@@ -12,6 +12,16 @@
                 :value="item.id">
               </el-option>
             </el-select>
+            <el-form-item label="风场二">
+              <el-select v-model="value2"  placeholder="请选择">
+              <el-option
+                v-for="item in options"
+                :key="item.name"
+                :label="item.name"
+                :value="item.id">
+              </el-option>
+            </el-select>
+            </el-form-item>
             </el-form-item>
             <el-form-item label="选择时间：">
               <el-date-picker
@@ -25,7 +35,7 @@
               </el-date-picker>
             </el-form-item>
             <el-form-item>
-              <el-button type="primary" @click="queryApData" :plain="true">查询</el-button>
+              <el-button type="primary" @click="FiveLossTableDataTable1" :plain="true">查询</el-button>
             </el-form-item>
             <el-form-item >
               <el-button type="primary" @click="queryApDataMx">对标分析</el-button>
@@ -59,7 +69,7 @@
             <el-table-column
               prop="wtId"
               label="风机"
-              width="80">
+              width="85">
             </el-table-column>
             <el-table-column
             :sortable="'custom'"
@@ -116,13 +126,13 @@
             :sortable="'custom'"
               prop="xdssnum"
               label="限电排名"
-               width="70">
+               width="80">
             </el-table-column>
             <el-table-column
             :sortable="'custom'"
               prop="xdss"
               label="限电损失"
-               width="70">
+               width="80">
             <template slot-scope="scope">
               <span>{{scope.row.xdss | rounding}}</span>
             </template>
@@ -131,13 +141,189 @@
             :sortable="'custom'"
               prop="slssnum"
               label="受累排名"
-               width="70">
+               width="80">
             </el-table-column>
             <el-table-column
             :sortable="'custom'"
               prop="slss"
               label="受累损失"
+               width="80">
+            </el-table-column>
+             <el-table-column
+             :sortable="'custom'"
+              prop="gzsslnum"
+              label="故障损失率排名"
+               width="90">
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="gzssl"
+              label="故障损失率"
+               width="80">
+            </el-table-column>
+             <el-table-column
+             :sortable="'custom'"
+              prop="jxsslnum"
+              label="检修损失率排名"
+               width="90">
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="jxssl"
+              label="检修损失率"
+               width="80">
+            </el-table-column>
+             <el-table-column
+             :sortable="'custom'"
+              prop="qflnum"
+              label="弃风率排名"
+               width="80">
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="qfl"
+              label="弃风率"
+               width="60">
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="xnsslnum"
+              label="性能损失率排名"
+               width="85">
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="xnssl"
+              label="性能损失率"
+               width="80">
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="slssl"
+              label="受累损失率"
+               width="80">
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="fwjsl"
+              label="复位及时率"
+               width="80">
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="xqjsl"
+              label="消缺及时率"
+               width="80">
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="ztzhjsl"
+              label="状态转换率"
+               width="80">
+            </el-table-column>
+            </el-table-column>
+        </el-table>
+             <el-table
+             v-if="tableSwitch"
+            :data="fdcLineData2"
+            :row-style="{ height: '10px' }" 
+            :cell-style="{ textAlign: 'center',padding:'1px' }" 
+            :header-cell-style="headStyle"
+            @selection-change="handleSelectionChange2"
+            @sort-change="changeTableSort"
+            style="font-size: 10px;"
+            >
+            <el-table-column label="损失率对标列表">
+            <el-table-column
+              type="index"
+              width="45">
+            </el-table-column>
+            <el-table-column
+              type="selection"
+              width=45>
+            </el-table-column>
+            <el-table-column
+              prop="wtId"
+              label="风机"
+              width="85">
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="ordernum"
+              label="排名"
+              width="50">
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="gzssnum"
+              label="故障排名"
+               width="70">
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="gzss"
+              label="故障损失"
                width="70">
+            <template slot-scope="scope">
+              <span>{{scope.row.gzss | rounding}}</span>
+            </template>
+            </el-table-column>
+             <el-table-column
+             :sortable="'custom'"
+              prop="whssnum"
+              label="检修排名"
+               width="70">
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="whss"
+              label="检修损失"
+               width="80">
+            <template slot-scope="scope">
+              <span>{{scope.row.whss | rounding}}</span>
+            </template>
+            </el-table-column>
+             <el-table-column
+             :sortable="'custom'"
+              prop="qfssnum"
+              label="性能排名"
+               width="70">
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="qfss"
+              label="性能损失"
+               width="80">
+            <template slot-scope="scope">
+              <span>{{scope.row.qfss | rounding}}</span>
+            </template>
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="xdssnum"
+              label="限电排名"
+               width="80">
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="xdss"
+              label="限电损失"
+               width="80">
+            <template slot-scope="scope">
+              <span>{{scope.row.xdss | rounding}}</span>
+            </template>
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="slssnum"
+              label="受累排名"
+               width="80">
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="slss"
+              label="受累损失"
+               width="80">
             </el-table-column>
              <el-table-column
              :sortable="'custom'"
@@ -185,31 +371,31 @@
             :sortable="'custom'"
               prop="xnssl"
               label="性能损失率"
-               width="81">
+               width="80">
             </el-table-column>
             <el-table-column
             :sortable="'custom'"
               prop="slssl"
               label="受累损失率"
-               width="81">
+               width="80">
             </el-table-column>
             <el-table-column
             :sortable="'custom'"
               prop="fwjsl"
               label="复位及时率"
-               width="81">
+               width="80">
             </el-table-column>
             <el-table-column
             :sortable="'custom'"
               prop="xqjsl"
               label="消缺及时率"
-               width="81">
+               width="80">
             </el-table-column>
             <el-table-column
             :sortable="'custom'"
               prop="ztzhjsl"
               label="状态转换率"
-               width="81">
+               width="80">
             </el-table-column>
             </el-table-column>
         </el-table>
@@ -263,6 +449,7 @@ export default {
                 name: '王小虎',
                 address: '上海市普陀区金沙江路 1516 弄'
             }],
+            fdcLineData2:[],
             options: [{
                 value: 'MHS_FDC',
                 label: '麻黄山风电场'
@@ -283,16 +470,24 @@ export default {
                 label: '香山风电场'
                 }],
             value: '',
+            value2:'',
+            valueAll:'',
             timedate: [],
+            timedate2:[],
             multipleSelection:[],
+            multipleSelection1:[],
+            multipleSelection2:[],
             orderByColumn:'',
             isAsc:'asc',
-            fdcLineData:'',
+            fdcLineData:[],
             currentPage2: 1,
             pagesize: 10,
+            tableSwitch:false,
             wpId:'',
             beginDate:'',
+            beginDate2:'',
             endDate:'',
+            endDate2:'',
             dialogTableVisible:false,
             sortInOrder:[],
             sortInOrderTop:[],
@@ -315,53 +510,15 @@ export default {
             this.FiveLossTableData();
         },
         queryApDataMx() {
-           this.dialogTableVisible = true;
-           this.$nextTick(function() {
-              this.drawPie('leiDaTu3')
-           })
-           this.$nextTick(function() {
-              this.drawPie2('leiDaTu4')
-           })
-        },
-        FiveLossTableData(){
-            this.$http.get('/powercompare/windfarmAjax').then((res) => {
-              this.options = res.data.data;
-            })
-            this.wpId = this.$route.query.wpId;
-            if(this.timedate == ''){
-                this.beginDate = this.$route.query.beginDate;
-                this.endDate = this.$route.query.endDate;
-            }else{
-                this.beginDate = this.timedate[0];
-                this.endDate = this.timedate[1];
-            }
-            var fiveLossLineData = new URLSearchParams();
-            fiveLossLineData.append('pageNum',this.currentPage2);
-            fiveLossLineData.append('pageSize',this.pagesize);
-            fiveLossLineData.append('orderByColumn',this.orderByColumn);
-            fiveLossLineData.append('isAsc',this.isAsc);
-            if(this.value == ''){
-              fiveLossLineData.append('wpId',this.wpId);
-            }else{
-              fiveLossLineData.append('wpId',this.value);
+            this.dialogTableVisible = true;
+            if (this.multipleSelection1.length + this.multipleSelection2.length == 2) {
+              this.multipleSelection = this.multipleSelection1.concat(this.multipleSelection2);
+            } else {
+              this.$message.error("请选两个风场！");
+              return;
             }
-            fiveLossLineData.append('beginDate',this.beginDate);
-            fiveLossLineData.append('endDate',this.endDate);
-          this.$http.post('/contrast/benchmarkWtList',fiveLossLineData).then((res) => {
-            this.fdcLineData = res.data.data;
-          })
-        },
-        headStyle() {
-			    return "text-align:center"
-		    },
-        handleSelectionChange(val) {
-            this.sortInOrder = [];
-            this.sortInOrderTop = [];
-            this.getTableData = [];
-            this.sortInOrde2 = [];
-            this.multipleSelection = val;
+            console.log(this.multipleSelection)
             if(this.multipleSelection.length==2){
-              console.log(this.multipleSelection)
               this.fdcName1 = this.multipleSelection[0].wtName;
               this.fdcName2 = this.multipleSelection[1].wtName;
               this.sortInOrder.push(this.multipleSelection[0].fnlyl,this.multipleSelection[0].xqjsl,
@@ -391,7 +548,84 @@ export default {
               this.getTableData.push({index:'复位及时率',data1:this.multipleSelection[0].fwjsl,data2:this.multipleSelection[1].fwjsl});
               this.getTableData.push({index:'消缺及时率',data1:this.multipleSelection[0].xqjsl,data2:this.multipleSelection[1].xqjsl});
               this.getTableData.push({index:'状态转换率',data1:this.multipleSelection[0].ztzhjsl,data2:this.multipleSelection[1].ztzhjsl});        
-            }        
+            }
+            this.$nextTick(function() {
+                this.drawPie('leiDaTu3')
+            })
+            this.$nextTick(function() {
+                this.drawPie2('leiDaTu4')
+            })
+        },
+        FiveLossTableData(){
+            this.$http.get('/powercompare/windfarmAjax').then((res) => {
+              this.options = res.data.data;
+            })
+            this.wpId = this.$route.query.wpId;
+            if(this.timedate == ''){
+                this.beginDate = this.$route.query.beginDate;
+                this.endDate = this.$route.query.endDate;
+            }else{
+                this.beginDate = this.timedate[0];
+                this.endDate = this.timedate[1];
+            }
+            if(this.wpId.length == 2){
+                this.tableSwitch = true;
+                this.value = this.wpId[0];
+                this.value2 = this.wpId[1]
+                this.FiveLossTableDataTable1();
+            }else{
+                this.value = this.wpId;
+                this.FiveLossTableDataTable1();
+            }
+        },
+        FiveLossTableDataTable1(){
+            var fiveLossLineDatatable1 = new URLSearchParams();
+            fiveLossLineDatatable1.append('pageNum',this.currentPage2);
+            fiveLossLineDatatable1.append('pageSize',this.pagesize);
+            fiveLossLineDatatable1.append('orderByColumn',this.orderByColumn);
+            fiveLossLineDatatable1.append('isAsc',this.isAsc);
+            fiveLossLineDatatable1.append('wpId',this.value);
+            fiveLossLineDatatable1.append('beginDate',this.beginDate);
+            fiveLossLineDatatable1.append('endDate',this.endDate);           
+            this.$http.post('/contrast/benchmarkWtList',fiveLossLineDatatable1).then((res) => {
+              this.fdcLineData = res.data.data;
+            })
+            this.FiveLossTableDataTable2(); 
+        },
+        FiveLossTableDataTable2(){
+          // console.log(this.value2)
+            var fiveLossLineDatatable2 = new URLSearchParams();
+            fiveLossLineDatatable2.append('pageNum',this.currentPage2);
+            fiveLossLineDatatable2.append('pageSize',this.pagesize);
+            fiveLossLineDatatable2.append('orderByColumn',this.orderByColumn);
+            fiveLossLineDatatable2.append('isAsc',this.isAsc);
+            fiveLossLineDatatable2.append('wpId',this.value2);
+            fiveLossLineDatatable2.append('beginDate',this.beginDate);
+            fiveLossLineDatatable2.append('endDate',this.endDate);           
+            this.$http.post('/contrast/benchmarkWtList',fiveLossLineDatatable2).then((res) => {
+              this.fdcLineData2 = res.data.data;
+            })
+        },
+        headStyle() {
+			    return "text-align:center"
+		    },
+        handleSelectionChange(val) {
+            this.sortInOrder = [];
+            this.sortInOrderTop = [];
+            this.getTableData = [];
+            this.sortInOrde2 = [];
+            this.multipleSelection1 = [];
+            this.multipleSelection1 = val;
+            
+          
+        },
+        handleSelectionChange2(val) {
+            this.sortInOrder = [];
+            this.sortInOrderTop = [];
+            this.getTableData = [];
+            this.sortInOrde2 = [];
+            this.multipleSelection2 = [];
+            this.multipleSelection2 = val;
         },
         changeTableSort(column){
           this.orderByColumn = column.prop;

src/views/benchMarking/LossRateAbandoned.vue

@@ -0,0 +1,563 @@
+<template>
+<div class="box">
+  <div class="searchBar">
+    <el-form :inline="true" :model="formInline" class="demo-form-inline">
+          <el-row :gutter="1">
+            <el-form-item label="风场">
+              <el-select v-model="value"  multiple placeholder="请选择">
+              <el-option
+                v-for="item in options"
+                :key="item.name"
+                :label="item.name"
+                :value="item.id">
+              </el-option>
+            </el-select>
+            </el-form-item>
+            <el-form-item label="选择时间：">
+              <el-date-picker
+                v-model="timedate"
+                value-format="yyyy-MM-dd"
+                type="daterange"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+              >
+              </el-date-picker>
+            </el-form-item>
+
+            <el-form-item>
+              <el-button type="primary" @click="queryApData" :plain="true"
+                >查询</el-button
+              >
+            </el-form-item>
+
+            <el-form-item >
+              <el-button type="primary" @click="queryApDataMx"
+                >对标分析</el-button
+              >
+            </el-form-item>
+
+            <el-form-item>
+              <el-button type="primary" @click="toExcel">导出</el-button>
+            </el-form-item>
+          </el-row>
+        </el-form>
+       <el-table
+            :data="gridData"
+            :row-style="{ height: '10px' }" 
+            :cell-style="{ textAlign: 'center',padding:'1px' }" 
+            :header-cell-style="headStyle"
+            @selection-change="handleSelectionChange"
+            @sort-change="changeTableSort"
+            style="font-size: 10px;"  v-if="value2=='qf'">
+            <el-table-column label="损失率对标列表">
+            <el-table-column
+              type="index"
+              width="30">
+            </el-table-column>
+            <el-table-column
+              type="selection"
+              width=45>
+            </el-table-column>
+            <el-table-column
+              prop="wpName"
+              label="风机"
+              width="300">
+            </el-table-column>
+             <el-table-column
+             :sortable="'custom'"
+              prop="qfl"
+              label="弃风率"
+               width="300">
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="qflnum"
+              label="弃风率排名"
+               width="300">
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="xdssnum"
+              label="限电损失电量排名"
+               width="300">
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="xdss"
+              label="限电损失电量"
+               width="300">
+            </el-table-column>
+            <el-table-column
+              prop="address"
+              label="操作"
+               width="300">
+               <template slot-scope="scope">
+                  <el-button size="mini"  @click="handleEdit(scope.$index, scope.row)">详情</el-button>
+               </template>
+            </el-table-column>  
+            </el-table-column>        
+       </el-table>
+       	<el-dialog class="el-dialog_body" width="60%" title="对标信息分析" :visible.sync="dialogTableVisible" append-to-body>
+							<div class="margin">
+								<div class="dialogLeftData">
+									<div id="leiDaTu" class="echart"></div>
+                  <div id="leiDaTu2" class="echart"></div>
+								</div>
+								<div class="dialogRightData">
+									<el-table :data="getTableData" height="618"
+									:row-style="{ height: '10px' }"
+									border :header-cell-style="headStyle" :cell-style="{ textAlign: 'center',padding:'7px' }" 
+									 style="width: 100%;font-size: 10px;">
+											<el-table-column prop="index" label="指标">
+											</el-table-column>
+											<el-table-column prop="data1" :label=fdcName1>
+											</el-table-column>
+											<el-table-column prop="data2" :label=fdcName2>
+											</el-table-column>
+									</el-table>
+								</div>
+							</div>
+						</el-dialog>
+       <div class="pieChart">
+         <FiveLossRatesPieChart ref="FiveLossRatesPieChart"></FiveLossRatesPieChart>
+      </div>
+      <div class="histogramChart">
+         <FiveLossRatesHistogramChart ref="FiveLossRatesHistogramChart"></FiveLossRatesHistogramChart>
+      </div>
+    </div> 
+</div>
+</template>
+<script>
+import FiveLossRatesPieChart from '../../views/benchMarking/FiveLossRatesPieChart.vue';
+import FiveLossRatesHistogramChart from '../../views/benchMarking/FiveLossRatesHistogramChart.vue';
+export default {
+    data(){
+      return {
+        formInline: {
+        windfarm: "",
+        project: "",
+        line: "",
+        },
+        timedate: [
+            // {beginDate:'2021-01-01'},
+            // {endDate:'2021-01-04'}
+        ],
+        isAsc:'asc',
+        beginDate:'2021-01-01',
+        endDate:'2021-01-04',
+        gridData:"",
+        multipleSelection:[],
+        sortInOrder:[],
+        sortInOrderTop:[],
+        sortInOrde2:[],
+        getTableData:[],
+        sortInOrderTop2:[],
+        fdcName1:'',
+        fdcName2:'',
+        currentPage2: 1,
+        pagesize: 10,
+        fdcLineData:'',
+        options: [{
+          value: 'MHS_FDC',
+          label: '麻黄山风电场'
+        }, {
+          value: 'NSS_FDC',
+          label: '牛首山风电场'
+        },
+        {
+          value: 'SBQ_FDC',
+          label: '石板泉风电场'
+        },
+        {
+          value: 'QS_FDC',
+          label: '青山风电场'
+        },
+        {
+          value: 'XS_FDC',
+          label: '香山风电场'
+        }],
+        value: '',
+        value2:'qf',
+        wpId:[],
+        wpName:[],
+        orderByColumn:'',
+        dialogTableVisible:false,
+        lineDataOption:[],
+        tableData: [{
+            date: '2016-05-02',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1518 弄'
+          }, {
+            date: '2016-05-04',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1517 弄'
+          }, {
+            date: '2016-05-01',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1519 弄'
+          }, {
+            date: '2016-05-03',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1516 弄'
+          },
+          {
+            date: '2016-05-03',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1516 弄'
+          },
+          {
+            date: '2016-05-03',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1516 弄'
+          }]
+
+      }
+    },
+    components:{
+      FiveLossRatesPieChart:FiveLossRatesPieChart,
+      FiveLossRatesHistogramChart:FiveLossRatesHistogramChart
+    },
+    created(){
+      this.FiveLossInformation();
+    },
+    methods:{
+      headStyle() {
+				return "text-align:center"
+			},
+      onSubmit() {
+      console.log("submit!");
+    },
+    handleClick() {},
+    deleteRow(index, rows) {
+      rows.splice(index, 1);
+    },
+    queryApData() {
+      this.FiveLossInformation();
+    },
+    handleEdit(a,b){
+      this.wpId = [];
+      this.lineDataOption = [];
+      if(this.multipleSelection.length==2){
+        for(let i=0;i<this.multipleSelection.length;i++){
+        this.wpId.push(this.multipleSelection[i].wpId)
+        this.wpName.push(this.multipleSelection[i].wpName)
+        this.lineDataOption.push({id:this.multipleSelection[i].wpId,name:this.multipleSelection[i].wpName})
+        }
+        console.log(this.lineDataOption)
+        this.$router.push({
+          path:'/fiveLossLineTable',
+          query:{
+            wpId:this.wpId,
+            beginDate:this.beginDate,
+            endDate:this.endDate,
+            wpName:this.wpName,
+            select:this.lineDataOption
+          }
+        })
+      }else{
+          console.log(b)
+          this.lineDataOption.push({id:b.wpId,name:b.wpName})
+          console.log(this.lineDataOption)
+          this.$router.push({
+          path:'/fiveLossLineTable',
+          query:{wpId:b.wpId,
+                beginDate:this.beginDate,
+                endDate:this.endDate,
+                wpName:b.wpName,
+                select:this.lineDataOption}
+          })
+      }
+    },
+    checkwindfarm() {
+      if (this.formInline.windfarm == "") {
+        this.$message.error("请选择风场！");
+        return;
+      }
+    },
+    checkproject() {
+      if (this.formInline.project == "") {
+        this.$message.error("请选择项目！");
+        return;
+      }
+      if (new Date(this.timedate) == null) {
+        this.$message.error("请选择时间");
+        return;
+      }
+    },
+    queryApDataMx() {
+       this.dialogTableVisible = true;
+       this.$nextTick(function() {
+					this.drawPie('leiDaTu')
+			 })
+       this.$nextTick(function() {
+					this.drawPie2('leiDaTu2')
+			 })
+    },
+    handleSelectionChange(val) {
+        this.sortInOrder = [];
+				this.sortInOrderTop = [];
+        this.getTableData = [];
+        this.sortInOrde2 = [];
+        this.multipleSelection = val;
+        if(this.multipleSelection.length==2){
+          this.fdcName1 = this.multipleSelection[0].wpName;
+          this.fdcName2 = this.multipleSelection[1].wpName;
+          this.sortInOrder.push(this.multipleSelection[0].fnlyl,this.multipleSelection[0].xqjsl,
+          this.multipleSelection[0].ztzhjsl,this.multipleSelection[0].fwjsl,this.multipleSelection[0].slssl,
+          this.multipleSelection[0].xnssl,this.multipleSelection[0].qfl,this.multipleSelection[0].jxssl,
+          this.multipleSelection[0].gzssl);
+          this.sortInOrderTop.push(this.multipleSelection[1].fnlyl,this.multipleSelection[1].xqjsl,
+          this.multipleSelection[1].ztzhjsl,this.multipleSelection[1].fwjsl,this.multipleSelection[1].slssl,
+          this.multipleSelection[1].xnssl,this.multipleSelection[1].qfl,this.multipleSelection[1].jxssl,
+          this.multipleSelection[1].gzssl);
+          for(let i=0;i<this.multipleSelection.length;i++){
+          this.sortInOrde2.push({product:this.multipleSelection[i].wpName,'限电损失电量单位:万KWh':this.multipleSelection[i].xdss,
+                '故障损失电量单位:万KWh':this.multipleSelection[i].gzss,'检修损失电量单位:万KWh':this.multipleSelection[i].jxssl,
+                '性能损失电量单位:万KWh':this.multipleSelection[i].xnssl,'受累损失电量单位:万KWh':this.multipleSelection[i].slss});
+          }
+          this.getTableData.push({index:'发电量',data1:this.multipleSelection[0].fdl,data2:this.multipleSelection[1].fdl});
+          this.getTableData.push({index:'故障损失电量',data1:this.multipleSelection[0].gzss,data2:this.multipleSelection[1].gzss});
+          this.getTableData.push({index:'检修损失电量',data1:this.multipleSelection[0].jxssl,data2:this.multipleSelection[1].jxssl});
+          this.getTableData.push({index:'性能未达标损失电量',data1:this.multipleSelection[0].xnsslfraction,data2:this.multipleSelection[1].xnsslfraction});
+          this.getTableData.push({index:'受累损失电量',data1:this.multipleSelection[0].slss,data2:this.multipleSelection[1].slss});
+          this.getTableData.push({index:'风能利用率',data1:this.multipleSelection[0].fnlyl,data2:this.multipleSelection[1].fnlyl});
+          this.getTableData.push({index:'故障损失率',data1:this.multipleSelection[0].gzssl,data2:this.multipleSelection[1].gzssl});
+          this.getTableData.push({index:'检修损失率',data1:this.multipleSelection[0].jxssl,data2:this.multipleSelection[1].jxssl});
+          this.getTableData.push({index:'弃风率',data1:this.multipleSelection[0].qfl,data2:this.multipleSelection[1].qfl});
+          this.getTableData.push({index:'性能损失率',data1:this.multipleSelection[0].xnssl,data2:this.multipleSelection[1].xnssl});
+          this.getTableData.push({index:'受累损失率',data1:this.multipleSelection[0].slssl,data2:this.multipleSelection[1].slssl});
+          this.getTableData.push({index:'复位及时率',data1:this.multipleSelection[0].fwjsl,data2:this.multipleSelection[1].fwjsl});
+          this.getTableData.push({index:'消缺及时率',data1:this.multipleSelection[0].xqjsl,data2:this.multipleSelection[1].xqjsl});
+          this.getTableData.push({index:'状态转换率',data1:this.multipleSelection[0].ztzhjsl,data2:this.multipleSelection[1].ztzhjsl});        
+        }        
+    },
+    handleCurrentChange(val) {
+				// console.log(`当前页: ${val}`);
+		},
+    handleSizeChange(val) {
+				console.log(`每页 ${val} 条`);
+				this.pagesize = val;
+    },
+    changeTableSort(column){
+				this.orderByColumn = column.prop;
+				if(column.order == "descending"){
+					this.isAsc = 'desc';
+				}else if(column.order == "ascending"){
+					this.isAsc = "asc";
+				}
+				this.FiveLossInformation();
+		},
+    FiveLossInformation(){
+      let that = this;
+      this.$http.get('/powercompare/windfarmAjax').then((res) => {
+        that.options = res.data.data;
+      })
+      if(this.timedate == ''){
+        this.timedate[0] = '2021-01-01';
+        this.timedate[1] = '2021-01-04';
+        this.beginDate = this.timedate[0];
+        this.endDate = this.timedate[1];
+      }else{
+        this.beginDate = this.timedate[0];
+        this.endDate = this.timedate[1];
+      }
+      var fiveLossData = new URLSearchParams();
+        fiveLossData.append('pageNum',this.currentPage2);
+        fiveLossData.append('pageSize',this.pagesize);
+        fiveLossData.append('orderByColumn',this.orderByColumn);
+        fiveLossData.append('isAsc',this.isAsc);
+        fiveLossData.append('wpId',this.value);
+        fiveLossData.append('beginDate',this.beginDate);
+        fiveLossData.append('endDate',this.endDate);
+      this.$http.post('/contrast/benchmarkLossList',fiveLossData).then((res) => {
+          that.gridData = res.data.data;
+          that.$refs.FiveLossRatesPieChart.getPackageData(that.gridData,that.value2);
+          that.$refs.FiveLossRatesHistogramChart.getPackageData2(that.gridData);
+      })
+    },
+    drawPie() {
+				var charts;
+				if (charts != null && charts != "" && charts != undefined){
+				    charts.dispose();
+				}
+				charts= this.$echarts.init(document.getElementById('leiDaTu'));
+				let option = {
+					title: {
+        // text: '对标排名分析',
+        left: 'center'
+    },
+    tooltip: {},
+    // legend: {
+    //     data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）'],
+    //     left: 'right'
+    // },
+    radar: {
+        // shape: 'circle',
+        name: {
+            textStyle: {
+                color: '#fff',
+                backgroundColor: '#999',
+                borderRadius: 3,
+                padding: [3, 5]
+            }
+        },
+        indicator: [
+            { name: '风能利用率', max: 150},
+            { name: '消缺及时率', max: 150},
+            { name: '状态转换率', max: 150},
+            { name: '复位及时率', max: 150},
+            { name: '受累损失率', max: 150},
+            { name: '性能损失率', max: 150},
+            { name: '弃风率', max: 150},
+            { name: '检修损失率', max: 150},
+            { name: '故障损失率', max: 150},
+        ]
+    },
+    series: [{
+        name: '预算 vs 开销（Budget vs spending）',
+        type: 'radar',
+        // areaStyle: {normal: {}},
+        data: [
+            {
+                value: this.sortInOrder,
+                name:this.fdcName1
+            },
+            {
+                value: this.sortInOrderTop,
+                name: this.fdcName2
+            }
+        ]
+    }]
+				}
+				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 = {
+					legend: {
+              orient: 'vertical',
+              left: 'right'
+          },
+          tooltip: {},
+          dataset: {
+              dimensions: ['product', '限电损失电量单位:万KWh', '故障损失电量单位:万KWh', '检修损失电量单位:万KWh', '性能损失电量单位:万KWh', '受累损失电量单位:万KWh'],
+              source: this.sortInOrde2
+          },
+          xAxis: {type: 'category'},
+          yAxis: {},
+          // Declare several bar series, each will be mapped
+          // to a column of dataset.source by default.
+          series: [
+              {
+                    // barGap:'100%',/*多个并排柱子设置柱子之间的间距*/
+                    type: 'bar',
+                    barWidth : 30,
+                    itemStyle:{
+                        normal:{
+                            color:'#D201D8'
+                        }
+                    }
+                },
+                {
+                    
+                    type: 'bar',
+                    barWidth : 30,
+                    itemStyle:{
+                        normal:{
+                            color:'#FD0100'
+                        }
+                    }
+                },
+                {
+                    
+                    type: 'bar',
+                    barWidth : 30,
+                    itemStyle:{
+                        normal:{
+                            color:'#FF7B16'
+                        }
+                    }
+                },
+                {
+                    
+                    type: 'bar',
+                    barWidth : 30,
+                    itemStyle:{
+                        normal:{
+                            color:'#8085E9'
+                        }
+                    }
+                },
+                {
+                    type: 'bar',
+                    barWidth : 30,
+                    itemStyle:{
+                        normal:{
+                            color:'#A6A6A6'
+                        }
+                    }
+                },
+          ]
+              }
+              charts2.clear();
+              charts2.setOption(option2);
+				
+			},
+    toExcel(){}
+    },
+}
+</script>
+<style lang="scss" scoped>
+  .box{
+		width: 100%;
+		display: flex;
+		justify-content: space-around;
+ 		align-items: center;
+ 		overflow: hidden;
+	}
+  .searchBar{
+    margin-top: 1%;
+  }
+  .pieChart{
+    margin-top: 2%;
+  }
+  .histogramChart{
+    margin-bottom: 10%;
+  }
+  #leiDaTu {
+		margin-left: 5%;
+		height: 300px;
+		width: 100%;
+		float: left;
+	}
+  #leiDaTu2 {
+		margin: 15%;
+		height: 300px;
+		width: 450px;
+		float: left;
+	}
+  .margin {
+		width: 100%;
+		height: 618px;
+	}
+  .dialogLeftData {
+		width: 50%;
+		height: 650px;
+		text-align: center;
+		float: left;
+	}
+
+	.dialogRightData {
+		width: 50%;
+		height: 650px;
+		text-align: center;
+		float: left;
+	}
+</style>

src/views/benchMarking/LossRateAffected.vue

@@ -0,0 +1,563 @@
+<template>
+<div class="box">
+  <div class="searchBar">
+    <el-form :inline="true" :model="formInline" class="demo-form-inline">
+          <el-row :gutter="1">
+            <el-form-item label="风场">
+              <el-select v-model="value"  multiple placeholder="请选择">
+              <el-option
+                v-for="item in options"
+                :key="item.name"
+                :label="item.name"
+                :value="item.id">
+              </el-option>
+            </el-select>
+            </el-form-item>
+            <el-form-item label="选择时间：">
+              <el-date-picker
+                v-model="timedate"
+                value-format="yyyy-MM-dd"
+                type="daterange"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+              >
+              </el-date-picker>
+            </el-form-item>
+
+            <el-form-item>
+              <el-button type="primary" @click="queryApData" :plain="true"
+                >查询</el-button
+              >
+            </el-form-item>
+
+            <el-form-item >
+              <el-button type="primary" @click="queryApDataMx"
+                >对标分析</el-button
+              >
+            </el-form-item>
+
+            <el-form-item>
+              <el-button type="primary" @click="toExcel">导出</el-button>
+            </el-form-item>
+          </el-row>
+        </el-form>
+       <el-table
+            :data="gridData"
+            :row-style="{ height: '10px' }" 
+            :cell-style="{ textAlign: 'center',padding:'1px' }" 
+            :header-cell-style="headStyle"
+            @selection-change="handleSelectionChange"
+            @sort-change="changeTableSort"
+            style="font-size: 10px;"  v-if="value2=='sl'">
+            <el-table-column label="损失率对标列表">
+            <el-table-column
+              type="index"
+              width="30">
+            </el-table-column>
+            <el-table-column
+              type="selection"
+              width=45>
+            </el-table-column>
+            <el-table-column
+              prop="wpName"
+              label="风机"
+              width="300">
+            </el-table-column>
+             <el-table-column
+             :sortable="'custom'"
+              prop="slssnum"
+              label="受累损失电量排名"
+               width="300">
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="slss"
+              label="受累损失电量"
+               width="300">
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="slsslnum"
+              label="受累损失率排名"
+               width="300">
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="fwjsl"
+              label="受累损失率(%)"
+               width="300">
+            </el-table-column>
+            <el-table-column
+              prop="address"
+              label="操作"
+               width="300">
+               <template slot-scope="scope">
+                  <el-button size="mini"  @click="handleEdit(scope.$index, scope.row)">详情</el-button>
+               </template>
+            </el-table-column>
+          </el-table-column>
+       </el-table>
+       	<el-dialog class="el-dialog_body" width="60%" title="对标信息分析" :visible.sync="dialogTableVisible" append-to-body>
+							<div class="margin">
+								<div class="dialogLeftData">
+									<div id="leiDaTu" class="echart"></div>
+                  <div id="leiDaTu2" class="echart"></div>
+								</div>
+								<div class="dialogRightData">
+									<el-table :data="getTableData" height="618"
+									:row-style="{ height: '10px' }"
+									border :header-cell-style="headStyle" :cell-style="{ textAlign: 'center',padding:'7px' }" 
+									 style="width: 100%;font-size: 10px;">
+											<el-table-column prop="index" label="指标">
+											</el-table-column>
+											<el-table-column prop="data1" :label=fdcName1>
+											</el-table-column>
+											<el-table-column prop="data2" :label=fdcName2>
+											</el-table-column>
+									</el-table>
+								</div>
+							</div>
+						</el-dialog>
+       <div class="pieChart">
+         <FiveLossRatesPieChart ref="FiveLossRatesPieChart"></FiveLossRatesPieChart>
+      </div>
+      <div class="histogramChart">
+         <FiveLossRatesHistogramChart ref="FiveLossRatesHistogramChart"></FiveLossRatesHistogramChart>
+      </div>
+    </div> 
+</div>
+</template>
+<script>
+import FiveLossRatesPieChart from '../../views/benchMarking/FiveLossRatesPieChart.vue';
+import FiveLossRatesHistogramChart from '../../views/benchMarking/FiveLossRatesHistogramChart.vue';
+export default {
+    data(){
+      return {
+        formInline: {
+        windfarm: "",
+        project: "",
+        line: "",
+        },
+        timedate: [
+            // {beginDate:'2021-01-01'},
+            // {endDate:'2021-01-04'}
+        ],
+        isAsc:'asc',
+        beginDate:'2021-01-01',
+        endDate:'2021-01-04',
+        gridData:"",
+        multipleSelection:[],
+        sortInOrder:[],
+        sortInOrderTop:[],
+        sortInOrde2:[],
+        getTableData:[],
+        sortInOrderTop2:[],
+        fdcName1:'',
+        fdcName2:'',
+        currentPage2: 1,
+        pagesize: 10,
+        fdcLineData:'',
+        options: [{
+          value: 'MHS_FDC',
+          label: '麻黄山风电场'
+        }, {
+          value: 'NSS_FDC',
+          label: '牛首山风电场'
+        },
+        {
+          value: 'SBQ_FDC',
+          label: '石板泉风电场'
+        },
+        {
+          value: 'QS_FDC',
+          label: '青山风电场'
+        },
+        {
+          value: 'XS_FDC',
+          label: '香山风电场'
+        }],
+        value: '',
+        value2:'sl',
+        wpId:[],
+        wpName:[],
+        orderByColumn:'',
+        dialogTableVisible:false,
+        lineDataOption:[],
+        tableData: [{
+            date: '2016-05-02',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1518 弄'
+          }, {
+            date: '2016-05-04',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1517 弄'
+          }, {
+            date: '2016-05-01',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1519 弄'
+          }, {
+            date: '2016-05-03',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1516 弄'
+          },
+          {
+            date: '2016-05-03',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1516 弄'
+          },
+          {
+            date: '2016-05-03',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1516 弄'
+          }]
+
+      }
+    },
+    components:{
+      FiveLossRatesPieChart:FiveLossRatesPieChart,
+      FiveLossRatesHistogramChart:FiveLossRatesHistogramChart
+    },
+    created(){
+      this.FiveLossInformation();
+    },
+    methods:{
+      headStyle() {
+				return "text-align:center"
+			},
+      onSubmit() {
+      console.log("submit!");
+    },
+    handleClick() {},
+    deleteRow(index, rows) {
+      rows.splice(index, 1);
+    },
+    queryApData() {
+      this.FiveLossInformation();
+    },
+    handleEdit(a,b){
+      this.wpId = [];
+      this.lineDataOption = [];
+      if(this.multipleSelection.length==2){
+        for(let i=0;i<this.multipleSelection.length;i++){
+        this.wpId.push(this.multipleSelection[i].wpId)
+        this.wpName.push(this.multipleSelection[i].wpName)
+        this.lineDataOption.push({id:this.multipleSelection[i].wpId,name:this.multipleSelection[i].wpName})
+        }
+        console.log(this.lineDataOption)
+        this.$router.push({
+          path:'/fiveLossLineTable',
+          query:{
+            wpId:this.wpId,
+            beginDate:this.beginDate,
+            endDate:this.endDate,
+            wpName:this.wpName,
+            select:this.lineDataOption
+          }
+        })
+      }else{
+          console.log(b)
+          this.lineDataOption.push({id:b.wpId,name:b.wpName})
+          console.log(this.lineDataOption)
+          this.$router.push({
+          path:'/fiveLossLineTable',
+          query:{wpId:b.wpId,
+                beginDate:this.beginDate,
+                endDate:this.endDate,
+                wpName:b.wpName,
+                select:this.lineDataOption}
+          })
+      }
+    },
+    checkwindfarm() {
+      if (this.formInline.windfarm == "") {
+        this.$message.error("请选择风场！");
+        return;
+      }
+    },
+    checkproject() {
+      if (this.formInline.project == "") {
+        this.$message.error("请选择项目！");
+        return;
+      }
+      if (new Date(this.timedate) == null) {
+        this.$message.error("请选择时间");
+        return;
+      }
+    },
+    queryApDataMx() {
+       this.dialogTableVisible = true;
+       this.$nextTick(function() {
+					this.drawPie('leiDaTu')
+			 })
+       this.$nextTick(function() {
+					this.drawPie2('leiDaTu2')
+			 })
+    },
+    handleSelectionChange(val) {
+        this.sortInOrder = [];
+				this.sortInOrderTop = [];
+        this.getTableData = [];
+        this.sortInOrde2 = [];
+        this.multipleSelection = val;
+        if(this.multipleSelection.length==2){
+          this.fdcName1 = this.multipleSelection[0].wpName;
+          this.fdcName2 = this.multipleSelection[1].wpName;
+          this.sortInOrder.push(this.multipleSelection[0].fnlyl,this.multipleSelection[0].xqjsl,
+          this.multipleSelection[0].ztzhjsl,this.multipleSelection[0].fwjsl,this.multipleSelection[0].slssl,
+          this.multipleSelection[0].xnssl,this.multipleSelection[0].qfl,this.multipleSelection[0].jxssl,
+          this.multipleSelection[0].gzssl);
+          this.sortInOrderTop.push(this.multipleSelection[1].fnlyl,this.multipleSelection[1].xqjsl,
+          this.multipleSelection[1].ztzhjsl,this.multipleSelection[1].fwjsl,this.multipleSelection[1].slssl,
+          this.multipleSelection[1].xnssl,this.multipleSelection[1].qfl,this.multipleSelection[1].jxssl,
+          this.multipleSelection[1].gzssl);
+          for(let i=0;i<this.multipleSelection.length;i++){
+          this.sortInOrde2.push({product:this.multipleSelection[i].wpName,'限电损失电量单位:万KWh':this.multipleSelection[i].xdss,
+                '故障损失电量单位:万KWh':this.multipleSelection[i].gzss,'检修损失电量单位:万KWh':this.multipleSelection[i].jxssl,
+                '性能损失电量单位:万KWh':this.multipleSelection[i].xnssl,'受累损失电量单位:万KWh':this.multipleSelection[i].slss});
+          }
+          this.getTableData.push({index:'发电量',data1:this.multipleSelection[0].fdl,data2:this.multipleSelection[1].fdl});
+          this.getTableData.push({index:'故障损失电量',data1:this.multipleSelection[0].gzss,data2:this.multipleSelection[1].gzss});
+          this.getTableData.push({index:'检修损失电量',data1:this.multipleSelection[0].jxssl,data2:this.multipleSelection[1].jxssl});
+          this.getTableData.push({index:'性能未达标损失电量',data1:this.multipleSelection[0].xnsslfraction,data2:this.multipleSelection[1].xnsslfraction});
+          this.getTableData.push({index:'受累损失电量',data1:this.multipleSelection[0].slss,data2:this.multipleSelection[1].slss});
+          this.getTableData.push({index:'风能利用率',data1:this.multipleSelection[0].fnlyl,data2:this.multipleSelection[1].fnlyl});
+          this.getTableData.push({index:'故障损失率',data1:this.multipleSelection[0].gzssl,data2:this.multipleSelection[1].gzssl});
+          this.getTableData.push({index:'检修损失率',data1:this.multipleSelection[0].jxssl,data2:this.multipleSelection[1].jxssl});
+          this.getTableData.push({index:'弃风率',data1:this.multipleSelection[0].qfl,data2:this.multipleSelection[1].qfl});
+          this.getTableData.push({index:'性能损失率',data1:this.multipleSelection[0].xnssl,data2:this.multipleSelection[1].xnssl});
+          this.getTableData.push({index:'受累损失率',data1:this.multipleSelection[0].slssl,data2:this.multipleSelection[1].slssl});
+          this.getTableData.push({index:'复位及时率',data1:this.multipleSelection[0].fwjsl,data2:this.multipleSelection[1].fwjsl});
+          this.getTableData.push({index:'消缺及时率',data1:this.multipleSelection[0].xqjsl,data2:this.multipleSelection[1].xqjsl});
+          this.getTableData.push({index:'状态转换率',data1:this.multipleSelection[0].ztzhjsl,data2:this.multipleSelection[1].ztzhjsl});        
+        }        
+    },
+    handleCurrentChange(val) {
+				// console.log(`当前页: ${val}`);
+		},
+    handleSizeChange(val) {
+				console.log(`每页 ${val} 条`);
+				this.pagesize = val;
+    },
+    changeTableSort(column){
+				this.orderByColumn = column.prop;
+				if(column.order == "descending"){
+					this.isAsc = 'desc';
+				}else if(column.order == "ascending"){
+					this.isAsc = "asc";
+				}
+				this.FiveLossInformation();
+		},
+    FiveLossInformation(){
+      let that = this;
+      this.$http.get('/powercompare/windfarmAjax').then((res) => {
+        that.options = res.data.data;
+      })
+      if(this.timedate == ''){
+        this.timedate[0] = '2021-01-01';
+        this.timedate[1] = '2021-01-04';
+        this.beginDate = this.timedate[0];
+        this.endDate = this.timedate[1];
+      }else{
+        this.beginDate = this.timedate[0];
+        this.endDate = this.timedate[1];
+      }
+      var fiveLossData = new URLSearchParams();
+        fiveLossData.append('pageNum',this.currentPage2);
+        fiveLossData.append('pageSize',this.pagesize);
+        fiveLossData.append('orderByColumn',this.orderByColumn);
+        fiveLossData.append('isAsc',this.isAsc);
+        fiveLossData.append('wpId',this.value);
+        fiveLossData.append('beginDate',this.beginDate);
+        fiveLossData.append('endDate',this.endDate);
+      this.$http.post('/contrast/benchmarkLossList',fiveLossData).then((res) => {
+          that.gridData = res.data.data;
+          that.$refs.FiveLossRatesPieChart.getPackageData(that.gridData,that.value2);
+          that.$refs.FiveLossRatesHistogramChart.getPackageData2(that.gridData);
+      })
+    },
+    drawPie() {
+				var charts;
+				if (charts != null && charts != "" && charts != undefined){
+				    charts.dispose();
+				}
+				charts= this.$echarts.init(document.getElementById('leiDaTu'));
+				let option = {
+					title: {
+        // text: '对标排名分析',
+        left: 'center'
+    },
+    tooltip: {},
+    // legend: {
+    //     data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）'],
+    //     left: 'right'
+    // },
+    radar: {
+        // shape: 'circle',
+        name: {
+            textStyle: {
+                color: '#fff',
+                backgroundColor: '#999',
+                borderRadius: 3,
+                padding: [3, 5]
+            }
+        },
+        indicator: [
+            { name: '风能利用率', max: 150},
+            { name: '消缺及时率', max: 150},
+            { name: '状态转换率', max: 150},
+            { name: '复位及时率', max: 150},
+            { name: '受累损失率', max: 150},
+            { name: '性能损失率', max: 150},
+            { name: '弃风率', max: 150},
+            { name: '检修损失率', max: 150},
+            { name: '故障损失率', max: 150},
+        ]
+    },
+    series: [{
+        name: '预算 vs 开销（Budget vs spending）',
+        type: 'radar',
+        // areaStyle: {normal: {}},
+        data: [
+            {
+                value: this.sortInOrder,
+                name:this.fdcName1
+            },
+            {
+                value: this.sortInOrderTop,
+                name: this.fdcName2
+            }
+        ]
+    }]
+				}
+				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 = {
+					legend: {
+              orient: 'vertical',
+              left: 'right'
+          },
+          tooltip: {},
+          dataset: {
+              dimensions: ['product', '限电损失电量单位:万KWh', '故障损失电量单位:万KWh', '检修损失电量单位:万KWh', '性能损失电量单位:万KWh', '受累损失电量单位:万KWh'],
+              source: this.sortInOrde2
+          },
+          xAxis: {type: 'category'},
+          yAxis: {},
+          // Declare several bar series, each will be mapped
+          // to a column of dataset.source by default.
+          series: [
+              {
+                    // barGap:'100%',/*多个并排柱子设置柱子之间的间距*/
+                    type: 'bar',
+                    barWidth : 30,
+                    itemStyle:{
+                        normal:{
+                            color:'#D201D8'
+                        }
+                    }
+                },
+                {
+                    
+                    type: 'bar',
+                    barWidth : 30,
+                    itemStyle:{
+                        normal:{
+                            color:'#FD0100'
+                        }
+                    }
+                },
+                {
+                    
+                    type: 'bar',
+                    barWidth : 30,
+                    itemStyle:{
+                        normal:{
+                            color:'#FF7B16'
+                        }
+                    }
+                },
+                {
+                    
+                    type: 'bar',
+                    barWidth : 30,
+                    itemStyle:{
+                        normal:{
+                            color:'#8085E9'
+                        }
+                    }
+                },
+                {
+                    type: 'bar',
+                    barWidth : 30,
+                    itemStyle:{
+                        normal:{
+                            color:'#A6A6A6'
+                        }
+                    }
+                },
+          ]
+              }
+              charts2.clear();
+              charts2.setOption(option2);
+				
+			},
+    toExcel(){}
+    },
+}
+</script>
+<style lang="scss" scoped>
+  .box{
+		width: 100%;
+		display: flex;
+		justify-content: space-around;
+ 		align-items: center;
+ 		overflow: hidden;
+	}
+  .searchBar{
+    margin-top: 1%;
+  }
+  .pieChart{
+    margin-top: 2%;
+  }
+  .histogramChart{
+    margin-bottom: 10%;
+  }
+  #leiDaTu {
+		margin-left: 5%;
+		height: 300px;
+		width: 100%;
+		float: left;
+	}
+  #leiDaTu2 {
+		margin: 15%;
+		height: 300px;
+		width: 450px;
+		float: left;
+	}
+  .margin {
+		width: 100%;
+		height: 618px;
+	}
+  .dialogLeftData {
+		width: 50%;
+		height: 650px;
+		text-align: center;
+		float: left;
+	}
+
+	.dialogRightData {
+		width: 50%;
+		height: 650px;
+		text-align: center;
+		float: left;
+	}
+</style>

src/views/benchMarking/LossRateFailure.vue

@@ -0,0 +1,563 @@
+<template>
+<div class="box">
+  <div class="searchBar">
+    <el-form :inline="true" :model="formInline" class="demo-form-inline">
+          <el-row :gutter="1">
+            <el-form-item label="风场">
+              <el-select v-model="value"  multiple placeholder="请选择">
+              <el-option
+                v-for="item in options"
+                :key="item.name"
+                :label="item.name"
+                :value="item.id">
+              </el-option>
+            </el-select>
+            </el-form-item>
+            <el-form-item label="选择时间：">
+              <el-date-picker
+                v-model="timedate"
+                value-format="yyyy-MM-dd"
+                type="daterange"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+              >
+              </el-date-picker>
+            </el-form-item>
+
+            <el-form-item>
+              <el-button type="primary" @click="queryApData" :plain="true"
+                >查询</el-button
+              >
+            </el-form-item>
+
+            <el-form-item >
+              <el-button type="primary" @click="queryApDataMx"
+                >对标分析</el-button
+              >
+            </el-form-item>
+
+            <el-form-item>
+              <el-button type="primary" @click="toExcel">导出</el-button>
+            </el-form-item>
+          </el-row>
+        </el-form>
+       <el-table
+            :data="gridData"
+            :row-style="{ height: '10px' }" 
+            :cell-style="{ textAlign: 'center',padding:'1px' }" 
+            :header-cell-style="headStyle"
+            @selection-change="handleSelectionChange"
+            @sort-change="changeTableSort"
+            style="font-size: 10px;"  v-if="value2=='gz'">
+            <el-table-column label="损失率对标列表">
+            <el-table-column
+              type="index"
+              width="30">
+            </el-table-column>
+            <el-table-column
+              type="selection"
+              width=45>
+            </el-table-column>
+            <el-table-column
+              prop="wpName"
+              label="风机"
+              width="300">
+            </el-table-column>
+             <el-table-column
+             :sortable="'custom'"
+              prop="gzssnum"
+              label="故障损失电量排名"
+               width="300">
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="gzss"
+              label="故障损失电量"
+               width="300">
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="gzsslnum"
+              label="故障损失率排名"
+               width="300">
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="gzssl"
+              label="故障损失率(%)"
+               width="300">
+            </el-table-column>
+            <el-table-column
+              prop="address"
+              label="操作"
+               width="300">
+               <template slot-scope="scope">
+                  <el-button size="mini"  @click="handleEdit(scope.$index, scope.row)">详情</el-button>
+               </template>
+            </el-table-column>
+          </el-table-column>
+       </el-table>
+       	<el-dialog class="el-dialog_body" width="60%" title="对标信息分析" :visible.sync="dialogTableVisible" append-to-body>
+							<div class="margin">
+								<div class="dialogLeftData">
+									<div id="leiDaTu" class="echart"></div>
+                  <div id="leiDaTu2" class="echart"></div>
+								</div>
+								<div class="dialogRightData">
+									<el-table :data="getTableData" height="618"
+									:row-style="{ height: '10px' }"
+									border :header-cell-style="headStyle" :cell-style="{ textAlign: 'center',padding:'7px' }" 
+									 style="width: 100%;font-size: 10px;">
+											<el-table-column prop="index" label="指标">
+											</el-table-column>
+											<el-table-column prop="data1" :label=fdcName1>
+											</el-table-column>
+											<el-table-column prop="data2" :label=fdcName2>
+											</el-table-column>
+									</el-table>
+								</div>
+							</div>
+						</el-dialog>
+       <div class="pieChart">
+         <FiveLossRatesPieChart ref="FiveLossRatesPieChart"></FiveLossRatesPieChart>
+      </div>
+      <div class="histogramChart">
+         <FiveLossRatesHistogramChart ref="FiveLossRatesHistogramChart"></FiveLossRatesHistogramChart>
+      </div>
+    </div> 
+</div>
+</template>
+<script>
+import FiveLossRatesPieChart from '../../views/benchMarking/FiveLossRatesPieChart.vue';
+import FiveLossRatesHistogramChart from '../../views/benchMarking/FiveLossRatesHistogramChart.vue';
+export default {
+    data(){
+      return {
+        formInline: {
+        windfarm: "",
+        project: "",
+        line: "",
+        },
+        timedate: [
+            // {beginDate:'2021-01-01'},
+            // {endDate:'2021-01-04'}
+        ],
+        isAsc:'asc',
+        beginDate:'2021-01-01',
+        endDate:'2021-01-04',
+        gridData:"",
+        multipleSelection:[],
+        sortInOrder:[],
+        sortInOrderTop:[],
+        sortInOrde2:[],
+        getTableData:[],
+        sortInOrderTop2:[],
+        fdcName1:'',
+        fdcName2:'',
+        currentPage2: 1,
+        pagesize: 10,
+        fdcLineData:'',
+        options: [{
+          value: 'MHS_FDC',
+          label: '麻黄山风电场'
+        }, {
+          value: 'NSS_FDC',
+          label: '牛首山风电场'
+        },
+        {
+          value: 'SBQ_FDC',
+          label: '石板泉风电场'
+        },
+        {
+          value: 'QS_FDC',
+          label: '青山风电场'
+        },
+        {
+          value: 'XS_FDC',
+          label: '香山风电场'
+        }],
+        value: '',
+        value2:'gz',
+        wpId:[],
+        wpName:[],
+        orderByColumn:'',
+        dialogTableVisible:false,
+        lineDataOption:[],
+        tableData: [{
+            date: '2016-05-02',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1518 弄'
+          }, {
+            date: '2016-05-04',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1517 弄'
+          }, {
+            date: '2016-05-01',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1519 弄'
+          }, {
+            date: '2016-05-03',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1516 弄'
+          },
+          {
+            date: '2016-05-03',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1516 弄'
+          },
+          {
+            date: '2016-05-03',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1516 弄'
+          }]
+
+      }
+    },
+    components:{
+      FiveLossRatesPieChart:FiveLossRatesPieChart,
+      FiveLossRatesHistogramChart:FiveLossRatesHistogramChart
+    },
+    created(){
+      this.FiveLossInformation();
+    },
+    methods:{
+      headStyle() {
+				return "text-align:center"
+			},
+      onSubmit() {
+      console.log("submit!");
+    },
+    handleClick() {},
+    deleteRow(index, rows) {
+      rows.splice(index, 1);
+    },
+    queryApData() {
+      this.FiveLossInformation();
+    },
+    handleEdit(a,b){
+      this.wpId = [];
+      this.lineDataOption = [];
+      if(this.multipleSelection.length==2){
+        for(let i=0;i<this.multipleSelection.length;i++){
+        this.wpId.push(this.multipleSelection[i].wpId)
+        this.wpName.push(this.multipleSelection[i].wpName)
+        this.lineDataOption.push({id:this.multipleSelection[i].wpId,name:this.multipleSelection[i].wpName})
+        }
+        console.log(this.lineDataOption)
+        this.$router.push({
+          path:'/fiveLossLineTable',
+          query:{
+            wpId:this.wpId,
+            beginDate:this.beginDate,
+            endDate:this.endDate,
+            wpName:this.wpName,
+            select:this.lineDataOption
+          }
+        })
+      }else{
+          console.log(b)
+          this.lineDataOption.push({id:b.wpId,name:b.wpName})
+          console.log(this.lineDataOption)
+          this.$router.push({
+          path:'/fiveLossLineTable',
+          query:{wpId:b.wpId,
+                beginDate:this.beginDate,
+                endDate:this.endDate,
+                wpName:b.wpName,
+                select:this.lineDataOption}
+          })
+      }
+    },
+    checkwindfarm() {
+      if (this.formInline.windfarm == "") {
+        this.$message.error("请选择风场！");
+        return;
+      }
+    },
+    checkproject() {
+      if (this.formInline.project == "") {
+        this.$message.error("请选择项目！");
+        return;
+      }
+      if (new Date(this.timedate) == null) {
+        this.$message.error("请选择时间");
+        return;
+      }
+    },
+    queryApDataMx() {
+       this.dialogTableVisible = true;
+       this.$nextTick(function() {
+					this.drawPie('leiDaTu')
+			 })
+       this.$nextTick(function() {
+					this.drawPie2('leiDaTu2')
+			 })
+    },
+    handleSelectionChange(val) {
+        this.sortInOrder = [];
+				this.sortInOrderTop = [];
+        this.getTableData = [];
+        this.sortInOrde2 = [];
+        this.multipleSelection = val;
+        if(this.multipleSelection.length==2){
+          this.fdcName1 = this.multipleSelection[0].wpName;
+          this.fdcName2 = this.multipleSelection[1].wpName;
+          this.sortInOrder.push(this.multipleSelection[0].fnlyl,this.multipleSelection[0].xqjsl,
+          this.multipleSelection[0].ztzhjsl,this.multipleSelection[0].fwjsl,this.multipleSelection[0].slssl,
+          this.multipleSelection[0].xnssl,this.multipleSelection[0].qfl,this.multipleSelection[0].jxssl,
+          this.multipleSelection[0].gzssl);
+          this.sortInOrderTop.push(this.multipleSelection[1].fnlyl,this.multipleSelection[1].xqjsl,
+          this.multipleSelection[1].ztzhjsl,this.multipleSelection[1].fwjsl,this.multipleSelection[1].slssl,
+          this.multipleSelection[1].xnssl,this.multipleSelection[1].qfl,this.multipleSelection[1].jxssl,
+          this.multipleSelection[1].gzssl);
+          for(let i=0;i<this.multipleSelection.length;i++){
+          this.sortInOrde2.push({product:this.multipleSelection[i].wpName,'限电损失电量单位:万KWh':this.multipleSelection[i].xdss,
+                '故障损失电量单位:万KWh':this.multipleSelection[i].gzss,'检修损失电量单位:万KWh':this.multipleSelection[i].jxssl,
+                '性能损失电量单位:万KWh':this.multipleSelection[i].xnssl,'受累损失电量单位:万KWh':this.multipleSelection[i].slss});
+          }
+          this.getTableData.push({index:'发电量',data1:this.multipleSelection[0].fdl,data2:this.multipleSelection[1].fdl});
+          this.getTableData.push({index:'故障损失电量',data1:this.multipleSelection[0].gzss,data2:this.multipleSelection[1].gzss});
+          this.getTableData.push({index:'检修损失电量',data1:this.multipleSelection[0].jxssl,data2:this.multipleSelection[1].jxssl});
+          this.getTableData.push({index:'性能未达标损失电量',data1:this.multipleSelection[0].xnsslfraction,data2:this.multipleSelection[1].xnsslfraction});
+          this.getTableData.push({index:'受累损失电量',data1:this.multipleSelection[0].slss,data2:this.multipleSelection[1].slss});
+          this.getTableData.push({index:'风能利用率',data1:this.multipleSelection[0].fnlyl,data2:this.multipleSelection[1].fnlyl});
+          this.getTableData.push({index:'故障损失率',data1:this.multipleSelection[0].gzssl,data2:this.multipleSelection[1].gzssl});
+          this.getTableData.push({index:'检修损失率',data1:this.multipleSelection[0].jxssl,data2:this.multipleSelection[1].jxssl});
+          this.getTableData.push({index:'弃风率',data1:this.multipleSelection[0].qfl,data2:this.multipleSelection[1].qfl});
+          this.getTableData.push({index:'性能损失率',data1:this.multipleSelection[0].xnssl,data2:this.multipleSelection[1].xnssl});
+          this.getTableData.push({index:'受累损失率',data1:this.multipleSelection[0].slssl,data2:this.multipleSelection[1].slssl});
+          this.getTableData.push({index:'复位及时率',data1:this.multipleSelection[0].fwjsl,data2:this.multipleSelection[1].fwjsl});
+          this.getTableData.push({index:'消缺及时率',data1:this.multipleSelection[0].xqjsl,data2:this.multipleSelection[1].xqjsl});
+          this.getTableData.push({index:'状态转换率',data1:this.multipleSelection[0].ztzhjsl,data2:this.multipleSelection[1].ztzhjsl});        
+        }        
+    },
+    handleCurrentChange(val) {
+				// console.log(`当前页: ${val}`);
+		},
+    handleSizeChange(val) {
+				console.log(`每页 ${val} 条`);
+				this.pagesize = val;
+    },
+    changeTableSort(column){
+				this.orderByColumn = column.prop;
+				if(column.order == "descending"){
+					this.isAsc = 'desc';
+				}else if(column.order == "ascending"){
+					this.isAsc = "asc";
+				}
+				this.FiveLossInformation();
+		},
+    FiveLossInformation(){
+      let that = this;
+      this.$http.get('/powercompare/windfarmAjax').then((res) => {
+        that.options = res.data.data;
+      })
+      if(this.timedate == ''){
+        this.timedate[0] = '2021-01-01';
+        this.timedate[1] = '2021-01-04';
+        this.beginDate = this.timedate[0];
+        this.endDate = this.timedate[1];
+      }else{
+        this.beginDate = this.timedate[0];
+        this.endDate = this.timedate[1];
+      }
+      var fiveLossData = new URLSearchParams();
+        fiveLossData.append('pageNum',this.currentPage2);
+        fiveLossData.append('pageSize',this.pagesize);
+        fiveLossData.append('orderByColumn',this.orderByColumn);
+        fiveLossData.append('isAsc',this.isAsc);
+        fiveLossData.append('wpId',this.value);
+        fiveLossData.append('beginDate',this.beginDate);
+        fiveLossData.append('endDate',this.endDate);
+      this.$http.post('/contrast/benchmarkLossList',fiveLossData).then((res) => {
+          that.gridData = res.data.data;
+          that.$refs.FiveLossRatesPieChart.getPackageData(that.gridData,that.value2);
+          that.$refs.FiveLossRatesHistogramChart.getPackageData2(that.gridData);
+      })
+    },
+    drawPie() {
+				var charts;
+				if (charts != null && charts != "" && charts != undefined){
+				    charts.dispose();
+				}
+				charts= this.$echarts.init(document.getElementById('leiDaTu'));
+				let option = {
+					title: {
+        // text: '对标排名分析',
+        left: 'center'
+    },
+    tooltip: {},
+    // legend: {
+    //     data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）'],
+    //     left: 'right'
+    // },
+    radar: {
+        // shape: 'circle',
+        name: {
+            textStyle: {
+                color: '#fff',
+                backgroundColor: '#999',
+                borderRadius: 3,
+                padding: [3, 5]
+            }
+        },
+        indicator: [
+            { name: '风能利用率', max: 150},
+            { name: '消缺及时率', max: 150},
+            { name: '状态转换率', max: 150},
+            { name: '复位及时率', max: 150},
+            { name: '受累损失率', max: 150},
+            { name: '性能损失率', max: 150},
+            { name: '弃风率', max: 150},
+            { name: '检修损失率', max: 150},
+            { name: '故障损失率', max: 150},
+        ]
+    },
+    series: [{
+        name: '预算 vs 开销（Budget vs spending）',
+        type: 'radar',
+        // areaStyle: {normal: {}},
+        data: [
+            {
+                value: this.sortInOrder,
+                name:this.fdcName1
+            },
+            {
+                value: this.sortInOrderTop,
+                name: this.fdcName2
+            }
+        ]
+    }]
+				}
+				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 = {
+					legend: {
+              orient: 'vertical',
+              left: 'right'
+          },
+          tooltip: {},
+          dataset: {
+              dimensions: ['product', '限电损失电量单位:万KWh', '故障损失电量单位:万KWh', '检修损失电量单位:万KWh', '性能损失电量单位:万KWh', '受累损失电量单位:万KWh'],
+              source: this.sortInOrde2
+          },
+          xAxis: {type: 'category'},
+          yAxis: {},
+          // Declare several bar series, each will be mapped
+          // to a column of dataset.source by default.
+          series: [
+              {
+                    // barGap:'100%',/*多个并排柱子设置柱子之间的间距*/
+                    type: 'bar',
+                    barWidth : 30,
+                    itemStyle:{
+                        normal:{
+                            color:'#D201D8'
+                        }
+                    }
+                },
+                {
+                    
+                    type: 'bar',
+                    barWidth : 30,
+                    itemStyle:{
+                        normal:{
+                            color:'#FD0100'
+                        }
+                    }
+                },
+                {
+                    
+                    type: 'bar',
+                    barWidth : 30,
+                    itemStyle:{
+                        normal:{
+                            color:'#FF7B16'
+                        }
+                    }
+                },
+                {
+                    
+                    type: 'bar',
+                    barWidth : 30,
+                    itemStyle:{
+                        normal:{
+                            color:'#8085E9'
+                        }
+                    }
+                },
+                {
+                    type: 'bar',
+                    barWidth : 30,
+                    itemStyle:{
+                        normal:{
+                            color:'#A6A6A6'
+                        }
+                    }
+                },
+          ]
+              }
+              charts2.clear();
+              charts2.setOption(option2);
+				
+			},
+    toExcel(){}
+    },
+}
+</script>
+<style lang="scss" scoped>
+  .box{
+		width: 100%;
+		display: flex;
+		justify-content: space-around;
+ 		align-items: center;
+ 		overflow: hidden;
+	}
+  .searchBar{
+    margin-top: 1%;
+  }
+  .pieChart{
+    margin-top: 2%;
+  }
+  .histogramChart{
+    margin-bottom: 10%;
+  }
+  #leiDaTu {
+		margin-left: 5%;
+		height: 300px;
+		width: 100%;
+		float: left;
+	}
+  #leiDaTu2 {
+		margin: 15%;
+		height: 300px;
+		width: 450px;
+		float: left;
+	}
+  .margin {
+		width: 100%;
+		height: 618px;
+	}
+  .dialogLeftData {
+		width: 50%;
+		height: 650px;
+		text-align: center;
+		float: left;
+	}
+
+	.dialogRightData {
+		width: 50%;
+		height: 650px;
+		text-align: center;
+		float: left;
+	}
+</style>

src/views/benchMarking/LossRateMaintenance.vue

@@ -0,0 +1,563 @@
+<template>
+<div class="box">
+  <div class="searchBar">
+    <el-form :inline="true" :model="formInline" class="demo-form-inline">
+          <el-row :gutter="1">
+            <el-form-item label="风场">
+              <el-select v-model="value"  multiple placeholder="请选择">
+              <el-option
+                v-for="item in options"
+                :key="item.name"
+                :label="item.name"
+                :value="item.id">
+              </el-option>
+            </el-select>
+            </el-form-item>
+            <el-form-item label="选择时间：">
+              <el-date-picker
+                v-model="timedate"
+                value-format="yyyy-MM-dd"
+                type="daterange"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+              >
+              </el-date-picker>
+            </el-form-item>
+
+            <el-form-item>
+              <el-button type="primary" @click="queryApData" :plain="true"
+                >查询</el-button
+              >
+            </el-form-item>
+
+            <el-form-item >
+              <el-button type="primary" @click="queryApDataMx"
+                >对标分析</el-button
+              >
+            </el-form-item>
+
+            <el-form-item>
+              <el-button type="primary" @click="toExcel">导出</el-button>
+            </el-form-item>
+          </el-row>
+        </el-form>
+       <el-table
+            :data="gridData"
+            :row-style="{ height: '10px' }" 
+            :cell-style="{ textAlign: 'center',padding:'1px' }" 
+            :header-cell-style="headStyle"
+            @selection-change="handleSelectionChange"
+            @sort-change="changeTableSort"
+            style="font-size: 10px;"  v-if="value2=='jx'">
+            <el-table-column label="损失率对标列表">
+            <el-table-column
+              type="index"
+              width="30">
+            </el-table-column>
+            <el-table-column
+              type="selection"
+              width=45>
+            </el-table-column>
+            <el-table-column
+              prop="wpName"
+              label="风机"
+              width="300">
+            </el-table-column>
+             <el-table-column
+             :sortable="'custom'"
+              prop="whssnum"
+              label="检修损失电量排名"
+               width="300">
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="whss"
+              label="检修损失电量"
+               width="300">
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="jxsslnum"
+              label="检修损失率排名"
+               width="300">
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="jxssl"
+              label="检修损失率(%)"
+               width="300">
+            </el-table-column>
+            <el-table-column
+              prop="address"
+              label="操作"
+               width="300">
+               <template slot-scope="scope">
+                  <el-button size="mini"  @click="handleEdit(scope.$index, scope.row)">详情</el-button>
+               </template>
+            </el-table-column>
+          </el-table-column>
+       </el-table>
+       	<el-dialog class="el-dialog_body" width="60%" title="对标信息分析" :visible.sync="dialogTableVisible" append-to-body>
+							<div class="margin">
+								<div class="dialogLeftData">
+									<div id="leiDaTu" class="echart"></div>
+                  <div id="leiDaTu2" class="echart"></div>
+								</div>
+								<div class="dialogRightData">
+									<el-table :data="getTableData" height="618"
+									:row-style="{ height: '10px' }"
+									border :header-cell-style="headStyle" :cell-style="{ textAlign: 'center',padding:'7px' }" 
+									 style="width: 100%;font-size: 10px;">
+											<el-table-column prop="index" label="指标">
+											</el-table-column>
+											<el-table-column prop="data1" :label=fdcName1>
+											</el-table-column>
+											<el-table-column prop="data2" :label=fdcName2>
+											</el-table-column>
+									</el-table>
+								</div>
+							</div>
+						</el-dialog>
+       <div class="pieChart">
+         <FiveLossRatesPieChart ref="FiveLossRatesPieChart"></FiveLossRatesPieChart>
+      </div>
+      <div class="histogramChart">
+         <FiveLossRatesHistogramChart ref="FiveLossRatesHistogramChart"></FiveLossRatesHistogramChart>
+      </div>
+    </div> 
+</div>
+</template>
+<script>
+import FiveLossRatesPieChart from '../../views/benchMarking/FiveLossRatesPieChart.vue';
+import FiveLossRatesHistogramChart from '../../views/benchMarking/FiveLossRatesHistogramChart.vue';
+export default {
+    data(){
+      return {
+        formInline: {
+        windfarm: "",
+        project: "",
+        line: "",
+        },
+        timedate: [
+            // {beginDate:'2021-01-01'},
+            // {endDate:'2021-01-04'}
+        ],
+        isAsc:'asc',
+        beginDate:'2021-01-01',
+        endDate:'2021-01-04',
+        gridData:"",
+        multipleSelection:[],
+        sortInOrder:[],
+        sortInOrderTop:[],
+        sortInOrde2:[],
+        getTableData:[],
+        sortInOrderTop2:[],
+        fdcName1:'',
+        fdcName2:'',
+        currentPage2: 1,
+        pagesize: 10,
+        fdcLineData:'',
+        options: [{
+          value: 'MHS_FDC',
+          label: '麻黄山风电场'
+        }, {
+          value: 'NSS_FDC',
+          label: '牛首山风电场'
+        },
+        {
+          value: 'SBQ_FDC',
+          label: '石板泉风电场'
+        },
+        {
+          value: 'QS_FDC',
+          label: '青山风电场'
+        },
+        {
+          value: 'XS_FDC',
+          label: '香山风电场'
+        }],
+        value: '',
+        value2:'jx',
+        wpId:[],
+        wpName:[],
+        orderByColumn:'',
+        dialogTableVisible:false,
+        lineDataOption:[],
+        tableData: [{
+            date: '2016-05-02',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1518 弄'
+          }, {
+            date: '2016-05-04',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1517 弄'
+          }, {
+            date: '2016-05-01',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1519 弄'
+          }, {
+            date: '2016-05-03',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1516 弄'
+          },
+          {
+            date: '2016-05-03',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1516 弄'
+          },
+          {
+            date: '2016-05-03',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1516 弄'
+          }]
+
+      }
+    },
+    components:{
+      FiveLossRatesPieChart:FiveLossRatesPieChart,
+      FiveLossRatesHistogramChart:FiveLossRatesHistogramChart
+    },
+    created(){
+      this.FiveLossInformation();
+    },
+    methods:{
+      headStyle() {
+				return "text-align:center"
+			},
+      onSubmit() {
+      console.log("submit!");
+    },
+    handleClick() {},
+    deleteRow(index, rows) {
+      rows.splice(index, 1);
+    },
+    queryApData() {
+      this.FiveLossInformation();
+    },
+    handleEdit(a,b){
+      this.wpId = [];
+      this.lineDataOption = [];
+      if(this.multipleSelection.length==2){
+        for(let i=0;i<this.multipleSelection.length;i++){
+        this.wpId.push(this.multipleSelection[i].wpId)
+        this.wpName.push(this.multipleSelection[i].wpName)
+        this.lineDataOption.push({id:this.multipleSelection[i].wpId,name:this.multipleSelection[i].wpName})
+        }
+        console.log(this.lineDataOption)
+        this.$router.push({
+          path:'/fiveLossLineTable',
+          query:{
+            wpId:this.wpId,
+            beginDate:this.beginDate,
+            endDate:this.endDate,
+            wpName:this.wpName,
+            select:this.lineDataOption
+          }
+        })
+      }else{
+          console.log(b)
+          this.lineDataOption.push({id:b.wpId,name:b.wpName})
+          console.log(this.lineDataOption)
+          this.$router.push({
+          path:'/fiveLossLineTable',
+          query:{wpId:b.wpId,
+                beginDate:this.beginDate,
+                endDate:this.endDate,
+                wpName:b.wpName,
+                select:this.lineDataOption}
+          })
+      }
+    },
+    checkwindfarm() {
+      if (this.formInline.windfarm == "") {
+        this.$message.error("请选择风场！");
+        return;
+      }
+    },
+    checkproject() {
+      if (this.formInline.project == "") {
+        this.$message.error("请选择项目！");
+        return;
+      }
+      if (new Date(this.timedate) == null) {
+        this.$message.error("请选择时间");
+        return;
+      }
+    },
+    queryApDataMx() {
+       this.dialogTableVisible = true;
+       this.$nextTick(function() {
+					this.drawPie('leiDaTu')
+			 })
+       this.$nextTick(function() {
+					this.drawPie2('leiDaTu2')
+			 })
+    },
+    handleSelectionChange(val) {
+        this.sortInOrder = [];
+				this.sortInOrderTop = [];
+        this.getTableData = [];
+        this.sortInOrde2 = [];
+        this.multipleSelection = val;
+        if(this.multipleSelection.length==2){
+          this.fdcName1 = this.multipleSelection[0].wpName;
+          this.fdcName2 = this.multipleSelection[1].wpName;
+          this.sortInOrder.push(this.multipleSelection[0].fnlyl,this.multipleSelection[0].xqjsl,
+          this.multipleSelection[0].ztzhjsl,this.multipleSelection[0].fwjsl,this.multipleSelection[0].slssl,
+          this.multipleSelection[0].xnssl,this.multipleSelection[0].qfl,this.multipleSelection[0].jxssl,
+          this.multipleSelection[0].gzssl);
+          this.sortInOrderTop.push(this.multipleSelection[1].fnlyl,this.multipleSelection[1].xqjsl,
+          this.multipleSelection[1].ztzhjsl,this.multipleSelection[1].fwjsl,this.multipleSelection[1].slssl,
+          this.multipleSelection[1].xnssl,this.multipleSelection[1].qfl,this.multipleSelection[1].jxssl,
+          this.multipleSelection[1].gzssl);
+          for(let i=0;i<this.multipleSelection.length;i++){
+          this.sortInOrde2.push({product:this.multipleSelection[i].wpName,'限电损失电量单位:万KWh':this.multipleSelection[i].xdss,
+                '故障损失电量单位:万KWh':this.multipleSelection[i].gzss,'检修损失电量单位:万KWh':this.multipleSelection[i].jxssl,
+                '性能损失电量单位:万KWh':this.multipleSelection[i].xnssl,'受累损失电量单位:万KWh':this.multipleSelection[i].slss});
+          }
+          this.getTableData.push({index:'发电量',data1:this.multipleSelection[0].fdl,data2:this.multipleSelection[1].fdl});
+          this.getTableData.push({index:'故障损失电量',data1:this.multipleSelection[0].gzss,data2:this.multipleSelection[1].gzss});
+          this.getTableData.push({index:'检修损失电量',data1:this.multipleSelection[0].jxssl,data2:this.multipleSelection[1].jxssl});
+          this.getTableData.push({index:'性能未达标损失电量',data1:this.multipleSelection[0].xnsslfraction,data2:this.multipleSelection[1].xnsslfraction});
+          this.getTableData.push({index:'受累损失电量',data1:this.multipleSelection[0].slss,data2:this.multipleSelection[1].slss});
+          this.getTableData.push({index:'风能利用率',data1:this.multipleSelection[0].fnlyl,data2:this.multipleSelection[1].fnlyl});
+          this.getTableData.push({index:'故障损失率',data1:this.multipleSelection[0].gzssl,data2:this.multipleSelection[1].gzssl});
+          this.getTableData.push({index:'检修损失率',data1:this.multipleSelection[0].jxssl,data2:this.multipleSelection[1].jxssl});
+          this.getTableData.push({index:'弃风率',data1:this.multipleSelection[0].qfl,data2:this.multipleSelection[1].qfl});
+          this.getTableData.push({index:'性能损失率',data1:this.multipleSelection[0].xnssl,data2:this.multipleSelection[1].xnssl});
+          this.getTableData.push({index:'受累损失率',data1:this.multipleSelection[0].slssl,data2:this.multipleSelection[1].slssl});
+          this.getTableData.push({index:'复位及时率',data1:this.multipleSelection[0].fwjsl,data2:this.multipleSelection[1].fwjsl});
+          this.getTableData.push({index:'消缺及时率',data1:this.multipleSelection[0].xqjsl,data2:this.multipleSelection[1].xqjsl});
+          this.getTableData.push({index:'状态转换率',data1:this.multipleSelection[0].ztzhjsl,data2:this.multipleSelection[1].ztzhjsl});        
+        }        
+    },
+    handleCurrentChange(val) {
+				// console.log(`当前页: ${val}`);
+		},
+    handleSizeChange(val) {
+				console.log(`每页 ${val} 条`);
+				this.pagesize = val;
+    },
+    changeTableSort(column){
+				this.orderByColumn = column.prop;
+				if(column.order == "descending"){
+					this.isAsc = 'desc';
+				}else if(column.order == "ascending"){
+					this.isAsc = "asc";
+				}
+				this.FiveLossInformation();
+		},
+    FiveLossInformation(){
+      let that = this;
+      this.$http.get('/powercompare/windfarmAjax').then((res) => {
+        that.options = res.data.data;
+      })
+      if(this.timedate == ''){
+        this.timedate[0] = '2021-01-01';
+        this.timedate[1] = '2021-01-04';
+        this.beginDate = this.timedate[0];
+        this.endDate = this.timedate[1];
+      }else{
+        this.beginDate = this.timedate[0];
+        this.endDate = this.timedate[1];
+      }
+      var fiveLossData = new URLSearchParams();
+        fiveLossData.append('pageNum',this.currentPage2);
+        fiveLossData.append('pageSize',this.pagesize);
+        fiveLossData.append('orderByColumn',this.orderByColumn);
+        fiveLossData.append('isAsc',this.isAsc);
+        fiveLossData.append('wpId',this.value);
+        fiveLossData.append('beginDate',this.beginDate);
+        fiveLossData.append('endDate',this.endDate);
+      this.$http.post('/contrast/benchmarkLossList',fiveLossData).then((res) => {
+          that.gridData = res.data.data;
+          that.$refs.FiveLossRatesPieChart.getPackageData(that.gridData,that.value2);
+          that.$refs.FiveLossRatesHistogramChart.getPackageData2(that.gridData);
+      })
+    },
+    drawPie() {
+				var charts;
+				if (charts != null && charts != "" && charts != undefined){
+				    charts.dispose();
+				}
+				charts= this.$echarts.init(document.getElementById('leiDaTu'));
+				let option = {
+					title: {
+        // text: '对标排名分析',
+        left: 'center'
+    },
+    tooltip: {},
+    // legend: {
+    //     data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）'],
+    //     left: 'right'
+    // },
+    radar: {
+        // shape: 'circle',
+        name: {
+            textStyle: {
+                color: '#fff',
+                backgroundColor: '#999',
+                borderRadius: 3,
+                padding: [3, 5]
+            }
+        },
+        indicator: [
+            { name: '风能利用率', max: 150},
+            { name: '消缺及时率', max: 150},
+            { name: '状态转换率', max: 150},
+            { name: '复位及时率', max: 150},
+            { name: '受累损失率', max: 150},
+            { name: '性能损失率', max: 150},
+            { name: '弃风率', max: 150},
+            { name: '检修损失率', max: 150},
+            { name: '故障损失率', max: 150},
+        ]
+    },
+    series: [{
+        name: '预算 vs 开销（Budget vs spending）',
+        type: 'radar',
+        // areaStyle: {normal: {}},
+        data: [
+            {
+                value: this.sortInOrder,
+                name:this.fdcName1
+            },
+            {
+                value: this.sortInOrderTop,
+                name: this.fdcName2
+            }
+        ]
+    }]
+				}
+				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 = {
+					legend: {
+              orient: 'vertical',
+              left: 'right'
+          },
+          tooltip: {},
+          dataset: {
+              dimensions: ['product', '限电损失电量单位:万KWh', '故障损失电量单位:万KWh', '检修损失电量单位:万KWh', '性能损失电量单位:万KWh', '受累损失电量单位:万KWh'],
+              source: this.sortInOrde2
+          },
+          xAxis: {type: 'category'},
+          yAxis: {},
+          // Declare several bar series, each will be mapped
+          // to a column of dataset.source by default.
+          series: [
+              {
+                    // barGap:'100%',/*多个并排柱子设置柱子之间的间距*/
+                    type: 'bar',
+                    barWidth : 30,
+                    itemStyle:{
+                        normal:{
+                            color:'#D201D8'
+                        }
+                    }
+                },
+                {
+                    
+                    type: 'bar',
+                    barWidth : 30,
+                    itemStyle:{
+                        normal:{
+                            color:'#FD0100'
+                        }
+                    }
+                },
+                {
+                    
+                    type: 'bar',
+                    barWidth : 30,
+                    itemStyle:{
+                        normal:{
+                            color:'#FF7B16'
+                        }
+                    }
+                },
+                {
+                    
+                    type: 'bar',
+                    barWidth : 30,
+                    itemStyle:{
+                        normal:{
+                            color:'#8085E9'
+                        }
+                    }
+                },
+                {
+                    type: 'bar',
+                    barWidth : 30,
+                    itemStyle:{
+                        normal:{
+                            color:'#A6A6A6'
+                        }
+                    }
+                },
+          ]
+              }
+              charts2.clear();
+              charts2.setOption(option2);
+				
+			},
+    toExcel(){}
+    },
+}
+</script>
+<style lang="scss" scoped>
+  .box{
+		width: 100%;
+		display: flex;
+		justify-content: space-around;
+ 		align-items: center;
+ 		overflow: hidden;
+	}
+  .searchBar{
+    margin-top: 1%;
+  }
+  .pieChart{
+    margin-top: 2%;
+  }
+  .histogramChart{
+    margin-bottom: 10%;
+  }
+  #leiDaTu {
+		margin-left: 5%;
+		height: 300px;
+		width: 100%;
+		float: left;
+	}
+  #leiDaTu2 {
+		margin: 15%;
+		height: 300px;
+		width: 450px;
+		float: left;
+	}
+  .margin {
+		width: 100%;
+		height: 618px;
+	}
+  .dialogLeftData {
+		width: 50%;
+		height: 650px;
+		text-align: center;
+		float: left;
+	}
+
+	.dialogRightData {
+		width: 50%;
+		height: 650px;
+		text-align: center;
+		float: left;
+	}
+</style>

src/views/benchMarking/LossRatePerformance.vue

@@ -0,0 +1,563 @@
+<template>
+<div class="box">
+  <div class="searchBar">
+    <el-form :inline="true" :model="formInline" class="demo-form-inline">
+          <el-row :gutter="1">
+            <el-form-item label="风场">
+              <el-select v-model="value"  multiple placeholder="请选择">
+              <el-option
+                v-for="item in options"
+                :key="item.name"
+                :label="item.name"
+                :value="item.id">
+              </el-option>
+            </el-select>
+            </el-form-item>
+            <el-form-item label="选择时间：">
+              <el-date-picker
+                v-model="timedate"
+                value-format="yyyy-MM-dd"
+                type="daterange"
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+              >
+              </el-date-picker>
+            </el-form-item>
+
+            <el-form-item>
+              <el-button type="primary" @click="queryApData" :plain="true"
+                >查询</el-button
+              >
+            </el-form-item>
+
+            <el-form-item >
+              <el-button type="primary" @click="queryApDataMx"
+                >对标分析</el-button
+              >
+            </el-form-item>
+
+            <el-form-item>
+              <el-button type="primary" @click="toExcel">导出</el-button>
+            </el-form-item>
+          </el-row>
+        </el-form>
+       <el-table
+            :data="gridData"
+            :row-style="{ height: '10px' }" 
+            :cell-style="{ textAlign: 'center',padding:'1px' }" 
+            :header-cell-style="headStyle"
+            @selection-change="handleSelectionChange"
+            @sort-change="changeTableSort"
+            style="font-size: 10px;"  v-if="value2=='xn'">
+            <el-table-column label="损失率对标列表">
+            <el-table-column
+              type="index"
+              width="30">
+            </el-table-column>
+            <el-table-column
+              type="selection"
+              width=45>
+            </el-table-column>
+            <el-table-column
+              prop="wpName"
+              label="风机"
+              width="300">
+            </el-table-column>
+             <el-table-column
+             :sortable="'custom'"
+              prop="qfssnum"
+              label="性能损失电量排名"
+               width="300">
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="qfss"
+              label="性能损失电量"
+               width="300">
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="xnsslnum"
+              label="性能损失率排名"
+               width="300">
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="xnssl"
+              label="性能损失率(%)"
+               width="300">
+            </el-table-column>
+            <el-table-column
+              prop="address"
+              label="操作"
+               width="300">
+               <template slot-scope="scope">
+                  <el-button size="mini"  @click="handleEdit(scope.$index, scope.row)">详情</el-button>
+               </template>
+            </el-table-column>
+          </el-table-column>
+       </el-table>
+       	<el-dialog class="el-dialog_body" width="60%" title="对标信息分析" :visible.sync="dialogTableVisible" append-to-body>
+							<div class="margin">
+								<div class="dialogLeftData">
+									<div id="leiDaTu" class="echart"></div>
+                  <div id="leiDaTu2" class="echart"></div>
+								</div>
+								<div class="dialogRightData">
+									<el-table :data="getTableData" height="618"
+									:row-style="{ height: '10px' }"
+									border :header-cell-style="headStyle" :cell-style="{ textAlign: 'center',padding:'7px' }" 
+									 style="width: 100%;font-size: 10px;">
+											<el-table-column prop="index" label="指标">
+											</el-table-column>
+											<el-table-column prop="data1" :label=fdcName1>
+											</el-table-column>
+											<el-table-column prop="data2" :label=fdcName2>
+											</el-table-column>
+									</el-table>
+								</div>
+							</div>
+						</el-dialog>
+       <div class="pieChart">
+         <FiveLossRatesPieChart ref="FiveLossRatesPieChart"></FiveLossRatesPieChart>
+      </div>
+      <div class="histogramChart">
+         <FiveLossRatesHistogramChart ref="FiveLossRatesHistogramChart"></FiveLossRatesHistogramChart>
+      </div>
+    </div> 
+</div>
+</template>
+<script>
+import FiveLossRatesPieChart from '../../views/benchMarking/FiveLossRatesPieChart.vue';
+import FiveLossRatesHistogramChart from '../../views/benchMarking/FiveLossRatesHistogramChart.vue';
+export default {
+    data(){
+      return {
+        formInline: {
+        windfarm: "",
+        project: "",
+        line: "",
+        },
+        timedate: [
+            // {beginDate:'2021-01-01'},
+            // {endDate:'2021-01-04'}
+        ],
+        isAsc:'asc',
+        beginDate:'2021-01-01',
+        endDate:'2021-01-04',
+        gridData:"",
+        multipleSelection:[],
+        sortInOrder:[],
+        sortInOrderTop:[],
+        sortInOrde2:[],
+        getTableData:[],
+        sortInOrderTop2:[],
+        fdcName1:'',
+        fdcName2:'',
+        currentPage2: 1,
+        pagesize: 10,
+        fdcLineData:'',
+        options: [{
+          value: 'MHS_FDC',
+          label: '麻黄山风电场'
+        }, {
+          value: 'NSS_FDC',
+          label: '牛首山风电场'
+        },
+        {
+          value: 'SBQ_FDC',
+          label: '石板泉风电场'
+        },
+        {
+          value: 'QS_FDC',
+          label: '青山风电场'
+        },
+        {
+          value: 'XS_FDC',
+          label: '香山风电场'
+        }],
+        value: '',
+        value2:'xn',
+        wpId:[],
+        wpName:[],
+        orderByColumn:'',
+        dialogTableVisible:false,
+        lineDataOption:[],
+        tableData: [{
+            date: '2016-05-02',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1518 弄'
+          }, {
+            date: '2016-05-04',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1517 弄'
+          }, {
+            date: '2016-05-01',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1519 弄'
+          }, {
+            date: '2016-05-03',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1516 弄'
+          },
+          {
+            date: '2016-05-03',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1516 弄'
+          },
+          {
+            date: '2016-05-03',
+            name: '王小虎',
+            address: '上海市普陀区金沙江路 1516 弄'
+          }]
+
+      }
+    },
+    components:{
+      FiveLossRatesPieChart:FiveLossRatesPieChart,
+      FiveLossRatesHistogramChart:FiveLossRatesHistogramChart
+    },
+    created(){
+      this.FiveLossInformation();
+    },
+    methods:{
+      headStyle() {
+				return "text-align:center"
+			},
+      onSubmit() {
+      console.log("submit!");
+    },
+    handleClick() {},
+    deleteRow(index, rows) {
+      rows.splice(index, 1);
+    },
+    queryApData() {
+      this.FiveLossInformation();
+    },
+    handleEdit(a,b){
+      this.wpId = [];
+      this.lineDataOption = [];
+      if(this.multipleSelection.length==2){
+        for(let i=0;i<this.multipleSelection.length;i++){
+        this.wpId.push(this.multipleSelection[i].wpId)
+        this.wpName.push(this.multipleSelection[i].wpName)
+        this.lineDataOption.push({id:this.multipleSelection[i].wpId,name:this.multipleSelection[i].wpName})
+        }
+        console.log(this.lineDataOption)
+        this.$router.push({
+          path:'/fiveLossLineTable',
+          query:{
+            wpId:this.wpId,
+            beginDate:this.beginDate,
+            endDate:this.endDate,
+            wpName:this.wpName,
+            select:this.lineDataOption
+          }
+        })
+      }else{
+          console.log(b)
+          this.lineDataOption.push({id:b.wpId,name:b.wpName})
+          console.log(this.lineDataOption)
+          this.$router.push({
+          path:'/fiveLossLineTable',
+          query:{wpId:b.wpId,
+                beginDate:this.beginDate,
+                endDate:this.endDate,
+                wpName:b.wpName,
+                select:this.lineDataOption}
+          })
+      }
+    },
+    checkwindfarm() {
+      if (this.formInline.windfarm == "") {
+        this.$message.error("请选择风场！");
+        return;
+      }
+    },
+    checkproject() {
+      if (this.formInline.project == "") {
+        this.$message.error("请选择项目！");
+        return;
+      }
+      if (new Date(this.timedate) == null) {
+        this.$message.error("请选择时间");
+        return;
+      }
+    },
+    queryApDataMx() {
+       this.dialogTableVisible = true;
+       this.$nextTick(function() {
+					this.drawPie('leiDaTu')
+			 })
+       this.$nextTick(function() {
+					this.drawPie2('leiDaTu2')
+			 })
+    },
+    handleSelectionChange(val) {
+        this.sortInOrder = [];
+				this.sortInOrderTop = [];
+        this.getTableData = [];
+        this.sortInOrde2 = [];
+        this.multipleSelection = val;
+        if(this.multipleSelection.length==2){
+          this.fdcName1 = this.multipleSelection[0].wpName;
+          this.fdcName2 = this.multipleSelection[1].wpName;
+          this.sortInOrder.push(this.multipleSelection[0].fnlyl,this.multipleSelection[0].xqjsl,
+          this.multipleSelection[0].ztzhjsl,this.multipleSelection[0].fwjsl,this.multipleSelection[0].slssl,
+          this.multipleSelection[0].xnssl,this.multipleSelection[0].qfl,this.multipleSelection[0].jxssl,
+          this.multipleSelection[0].gzssl);
+          this.sortInOrderTop.push(this.multipleSelection[1].fnlyl,this.multipleSelection[1].xqjsl,
+          this.multipleSelection[1].ztzhjsl,this.multipleSelection[1].fwjsl,this.multipleSelection[1].slssl,
+          this.multipleSelection[1].xnssl,this.multipleSelection[1].qfl,this.multipleSelection[1].jxssl,
+          this.multipleSelection[1].gzssl);
+          for(let i=0;i<this.multipleSelection.length;i++){
+          this.sortInOrde2.push({product:this.multipleSelection[i].wpName,'限电损失电量单位:万KWh':this.multipleSelection[i].xdss,
+                '故障损失电量单位:万KWh':this.multipleSelection[i].gzss,'检修损失电量单位:万KWh':this.multipleSelection[i].jxssl,
+                '性能损失电量单位:万KWh':this.multipleSelection[i].xnssl,'受累损失电量单位:万KWh':this.multipleSelection[i].slss});
+          }
+          this.getTableData.push({index:'发电量',data1:this.multipleSelection[0].fdl,data2:this.multipleSelection[1].fdl});
+          this.getTableData.push({index:'故障损失电量',data1:this.multipleSelection[0].gzss,data2:this.multipleSelection[1].gzss});
+          this.getTableData.push({index:'检修损失电量',data1:this.multipleSelection[0].jxssl,data2:this.multipleSelection[1].jxssl});
+          this.getTableData.push({index:'性能未达标损失电量',data1:this.multipleSelection[0].xnsslfraction,data2:this.multipleSelection[1].xnsslfraction});
+          this.getTableData.push({index:'受累损失电量',data1:this.multipleSelection[0].slss,data2:this.multipleSelection[1].slss});
+          this.getTableData.push({index:'风能利用率',data1:this.multipleSelection[0].fnlyl,data2:this.multipleSelection[1].fnlyl});
+          this.getTableData.push({index:'故障损失率',data1:this.multipleSelection[0].gzssl,data2:this.multipleSelection[1].gzssl});
+          this.getTableData.push({index:'检修损失率',data1:this.multipleSelection[0].jxssl,data2:this.multipleSelection[1].jxssl});
+          this.getTableData.push({index:'弃风率',data1:this.multipleSelection[0].qfl,data2:this.multipleSelection[1].qfl});
+          this.getTableData.push({index:'性能损失率',data1:this.multipleSelection[0].xnssl,data2:this.multipleSelection[1].xnssl});
+          this.getTableData.push({index:'受累损失率',data1:this.multipleSelection[0].slssl,data2:this.multipleSelection[1].slssl});
+          this.getTableData.push({index:'复位及时率',data1:this.multipleSelection[0].fwjsl,data2:this.multipleSelection[1].fwjsl});
+          this.getTableData.push({index:'消缺及时率',data1:this.multipleSelection[0].xqjsl,data2:this.multipleSelection[1].xqjsl});
+          this.getTableData.push({index:'状态转换率',data1:this.multipleSelection[0].ztzhjsl,data2:this.multipleSelection[1].ztzhjsl});        
+        }        
+    },
+    handleCurrentChange(val) {
+				// console.log(`当前页: ${val}`);
+		},
+    handleSizeChange(val) {
+				console.log(`每页 ${val} 条`);
+				this.pagesize = val;
+    },
+    changeTableSort(column){
+				this.orderByColumn = column.prop;
+				if(column.order == "descending"){
+					this.isAsc = 'desc';
+				}else if(column.order == "ascending"){
+					this.isAsc = "asc";
+				}
+				this.FiveLossInformation();
+		},
+    FiveLossInformation(){
+      let that = this;
+      this.$http.get('/powercompare/windfarmAjax').then((res) => {
+        that.options = res.data.data;
+      })
+      if(this.timedate == ''){
+        this.timedate[0] = '2021-01-01';
+        this.timedate[1] = '2021-01-04';
+        this.beginDate = this.timedate[0];
+        this.endDate = this.timedate[1];
+      }else{
+        this.beginDate = this.timedate[0];
+        this.endDate = this.timedate[1];
+      }
+      var fiveLossData = new URLSearchParams();
+        fiveLossData.append('pageNum',this.currentPage2);
+        fiveLossData.append('pageSize',this.pagesize);
+        fiveLossData.append('orderByColumn',this.orderByColumn);
+        fiveLossData.append('isAsc',this.isAsc);
+        fiveLossData.append('wpId',this.value);
+        fiveLossData.append('beginDate',this.beginDate);
+        fiveLossData.append('endDate',this.endDate);
+      this.$http.post('/contrast/benchmarkLossList',fiveLossData).then((res) => {
+          that.gridData = res.data.data;
+          that.$refs.FiveLossRatesPieChart.getPackageData(that.gridData,that.value2);
+          that.$refs.FiveLossRatesHistogramChart.getPackageData2(that.gridData);
+      })
+    },
+    drawPie() {
+				var charts;
+				if (charts != null && charts != "" && charts != undefined){
+				    charts.dispose();
+				}
+				charts= this.$echarts.init(document.getElementById('leiDaTu'));
+				let option = {
+					title: {
+        // text: '对标排名分析',
+        left: 'center'
+    },
+    tooltip: {},
+    // legend: {
+    //     data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）'],
+    //     left: 'right'
+    // },
+    radar: {
+        // shape: 'circle',
+        name: {
+            textStyle: {
+                color: '#fff',
+                backgroundColor: '#999',
+                borderRadius: 3,
+                padding: [3, 5]
+            }
+        },
+        indicator: [
+            { name: '风能利用率', max: 150},
+            { name: '消缺及时率', max: 150},
+            { name: '状态转换率', max: 150},
+            { name: '复位及时率', max: 150},
+            { name: '受累损失率', max: 150},
+            { name: '性能损失率', max: 150},
+            { name: '弃风率', max: 150},
+            { name: '检修损失率', max: 150},
+            { name: '故障损失率', max: 150},
+        ]
+    },
+    series: [{
+        name: '预算 vs 开销（Budget vs spending）',
+        type: 'radar',
+        // areaStyle: {normal: {}},
+        data: [
+            {
+                value: this.sortInOrder,
+                name:this.fdcName1
+            },
+            {
+                value: this.sortInOrderTop,
+                name: this.fdcName2
+            }
+        ]
+    }]
+				}
+				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 = {
+					legend: {
+              orient: 'vertical',
+              left: 'right'
+          },
+          tooltip: {},
+          dataset: {
+              dimensions: ['product', '限电损失电量单位:万KWh', '故障损失电量单位:万KWh', '检修损失电量单位:万KWh', '性能损失电量单位:万KWh', '受累损失电量单位:万KWh'],
+              source: this.sortInOrde2
+          },
+          xAxis: {type: 'category'},
+          yAxis: {},
+          // Declare several bar series, each will be mapped
+          // to a column of dataset.source by default.
+          series: [
+              {
+                    // barGap:'100%',/*多个并排柱子设置柱子之间的间距*/
+                    type: 'bar',
+                    barWidth : 30,
+                    itemStyle:{
+                        normal:{
+                            color:'#D201D8'
+                        }
+                    }
+                },
+                {
+                    
+                    type: 'bar',
+                    barWidth : 30,
+                    itemStyle:{
+                        normal:{
+                            color:'#FD0100'
+                        }
+                    }
+                },
+                {
+                    
+                    type: 'bar',
+                    barWidth : 30,
+                    itemStyle:{
+                        normal:{
+                            color:'#FF7B16'
+                        }
+                    }
+                },
+                {
+                    
+                    type: 'bar',
+                    barWidth : 30,
+                    itemStyle:{
+                        normal:{
+                            color:'#8085E9'
+                        }
+                    }
+                },
+                {
+                    type: 'bar',
+                    barWidth : 30,
+                    itemStyle:{
+                        normal:{
+                            color:'#A6A6A6'
+                        }
+                    }
+                },
+          ]
+              }
+              charts2.clear();
+              charts2.setOption(option2);
+				
+			},
+    toExcel(){}
+    },
+}
+</script>
+<style lang="scss" scoped>
+  .box{
+		width: 100%;
+		display: flex;
+		justify-content: space-around;
+ 		align-items: center;
+ 		overflow: hidden;
+	}
+  .searchBar{
+    margin-top: 1%;
+  }
+  .pieChart{
+    margin-top: 2%;
+  }
+  .histogramChart{
+    margin-bottom: 10%;
+  }
+  #leiDaTu {
+		margin-left: 5%;
+		height: 300px;
+		width: 100%;
+		float: left;
+	}
+  #leiDaTu2 {
+		margin: 15%;
+		height: 300px;
+		width: 450px;
+		float: left;
+	}
+  .margin {
+		width: 100%;
+		height: 618px;
+	}
+  .dialogLeftData {
+		width: 50%;
+		height: 650px;
+		text-align: center;
+		float: left;
+	}
+
+	.dialogRightData {
+		width: 50%;
+		height: 650px;
+		text-align: center;
+		float: left;
+	}
+</style>

src/views/gradeEvaluation/PerformanceAnalysis.vue

@@ -0,0 +1,248 @@
+<template>
+    <div class="box">
+        <div class="searchBar">
+            <el-card class="box-card">
+                <div slot="header" class="clearfix" style="font-size:15px">
+                    <span>查询条件</span>
+                </div>
+                <el-form :inline="true" :model="formInline" class="demo-form-inline">
+            <el-row :gutter="1">
+                <el-form-item label="风场：">
+                <el-select v-model="value"  placeholder="请选择" @change="projectData">
+                <el-option
+                    v-for="item in options"
+                    :key="item.name"
+                    :label="item.name"
+                    :value="item.id">
+                </el-option>
+                </el-select>
+                </el-form-item>
+                <el-form-item label="年份：">
+                        <el-date-picker
+                        v-model="timeyear"
+                        type="year"
+                        placeholder="选择年"
+                        >
+                        </el-date-picker>
+                    </el-form-item>
+                    <el-form-item label="月份：">
+                        <el-date-picker
+                        v-model="timemonth"
+                        type="month"
+                        placeholder="选择月">
+                        </el-date-picker>
+                    </el-form-item>
+                <el-form-item>
+                <el-button type="primary" @click="queryApData" :plain="true"
+                    >计算</el-button
+                >
+                </el-form-item>
+                <el-form-item>
+                <el-button type="primary" @click="toExcel()">导出</el-button>
+                </el-form-item>
+            </el-row>
+            </el-form>
+            </el-card>
+            <div style="font-size:30px;text-align:center;margin-top:1%">{{title}}</div>
+            <el-table
+            id="callthepolicetable"
+            :data="gridData"
+            :row-style="{ height: '10px' }" 
+            :cell-style="{ textAlign: 'center',padding:'1px' }" 
+            :header-cell-style="headStyle"
+            @sort-change="changeTableSort"
+            @row-click="tableDatawindturbineName"
+            border
+            style="font-size: 10px;margin-top:1%">
+            <el-table-column
+              type="index"
+              width="40">
+            </el-table-column>
+            <el-table-column
+              prop="windturbineName"
+              label="机组编号"
+               width="125">
+            </el-table-column>
+            <el-table-column
+              prop="fdl"
+              label="实际发电量(万千瓦时)"
+              width="90">
+            </el-table-column>
+            <el-table-column
+              prop="llfdl"
+              label="理论发电量(万千瓦时)"
+               width="90">
+            </el-table-column>
+            <el-table-column
+              prop="sbklyl"
+              label="设备利用小时数(小时)"
+               width="90">
+            </el-table-column>
+            <el-table-column
+              prop="sbklyl"
+              label="设备可利用率(%)"
+               width="90">
+            </el-table-column>
+            <el-table-column
+              prop="dxklyxs"
+              label="等效可用系数(%)"
+               width="90">
+            </el-table-column>
+            <el-table-column
+              prop="fs"
+              label="平均风速(m/s)"
+               width="90">
+            </el-table-column>
+            <el-table-column
+              prop="xfqr"
+              label="小风切入风速(m/s)"
+               width="90">
+            </el-table-column>
+            <el-table-column
+              prop="yxxs"
+              label="有效风时数(小时)"
+               width="90">
+            </el-table-column>
+            <el-table-column
+              prop="gzss"
+              label="故障损失电量(万千瓦时)"
+               width="95">
+            </el-table-column>
+            <el-table-column
+              prop="xdss"
+              label="调度限电损失电量(万千瓦时)"
+               width="80">
+            </el-table-column>
+            <el-table-column
+              prop="jxss"
+              label="计划检修损失电量(万千瓦时)"
+               width="80">
+            </el-table-column>
+            <el-table-column
+              prop="xnss"
+              label="性能未达标损失电量(万千瓦时)"
+               width="85">
+            </el-table-column>
+            <el-table-column
+              prop="gzxs"
+              label="故障停用时间(小时)"
+               width="80">
+            </el-table-column>
+            <el-table-column
+              prop="glyzxxs"
+              label="机组功率一致性系数(%)"
+               width="80">
+            </el-table-column>
+            <el-table-column
+              prop="jfpl"
+              label="静风频率"
+               width="80">
+            </el-table-column>        
+       </el-table>
+       </div>
+    </div>
+</template>
+<script>
+import excelHelper from "@/utils/excelHelper";
+import * as echarts from "echarts";
+export default {
+    data() {
+      return {
+        formInline: {
+        windfarm: "",
+        project: "",
+        line: "",
+        },
+        timeyear:'2021',
+        timemonth:'1',
+        currentPage2: 1,
+	      pagesize: 10,
+        gridData:[],
+        gridDataChart:[],
+        charFreData:[],
+        charNameData:[],
+        options: [],
+        options2: [],
+        orderByColumn:'',
+        isAsc: '',
+        value: 'MHS_FDC',
+        value2:'',
+        fanData:'',
+        title:'',
+      }
+    },
+   
+    created(){
+        this.callAndSpeedData();
+    },
+    methods:{
+        queryApData() {
+            this.callAndSpeedData();
+        },
+        headStyle() {
+          return "text-align:center"
+        },
+        tableDatawindturbineName(val){
+          this.fanData = val;
+          console.log(this.fanData)
+          this.$router.push({
+            path:'/performanceAnalysisOperation',
+            query:{
+              data:this.fanData,
+              timeyear: this.timeyear,
+              timemonth: this.timemonth
+            }
+          })
+        },
+        changeTableSort(column){
+          this.orderByColumn = column.prop;
+          if(column.order == "descending"){
+            this.isAsc = 'desc';
+          }else if(column.order == "ascending"){
+            this.isAsc = "asc";
+          }
+          this.callAndSpeedData();
+        },
+        projectData(){
+            this.$http.get('/powercompare/projectAjax?wpIds=' + this.value).then((res) =>{
+                this.options2 = res.data.data;
+            })
+        },
+        callAndSpeedData(){
+            this.$http.get('/powercompare/windfarmAjax').then((res) => {
+                this.options = res.data.data;
+            })
+            var performanceAnalysis = new URLSearchParams();
+            performanceAnalysis.append('pageNum',this.currentPage2);
+		      	performanceAnalysis.append('pageSize',this.pagesize);
+            performanceAnalysis.append('orderByColumn',this.orderByColumn);
+            performanceAnalysis.append('isAsc',this.isAsc);
+		  	    performanceAnalysis.append('wpId',this.value);
+            performanceAnalysis.append('year',this.timeyear);
+            performanceAnalysis.append('month',this.timemonth);
+            this.$http.post('/singleanalysis/singleanalysisMain',performanceAnalysis).then((res) => {
+                this.gridData = res.data.data;
+                this.title = this.gridData[0].windPowerStationName + this.timeyear + '年' + this.timemonth + '月单台机组运行指标性能分析';
+            })
+        },
+        toExcel(){
+            excelHelper.exportExcel("callthepolicetable","负荷率排行榜",".xls",true);
+        },
+    }
+}
+</script>
+<style lang="scss" scoped>
+    .box{
+		width: 100%;
+		display: flex;
+		justify-content: space-around;
+ 		align-items: center;
+ 		overflow: hidden;
+  	}
+    .searchBar{
+        margin-top: 1%;
+    }
+    .box-card{
+        width: 100%;
+    }
+</style>

src/views/gradeEvaluation/PerformanceAnalysisOperation.vue

@@ -0,0 +1,511 @@
+<template>
+    <div class="box">
+        <div class="searchBar">
+            <div style="font-size:30px;text-align:center;margin-top:1%">{{title}}</div>
+            <el-table
+                id="callthepolicetable"
+                :row-style="{ height: '10px' }" 
+                :cell-style="{ textAlign: 'center',padding:'1px' }" 
+                :header-cell-style="headStyle"
+                @sort-change="changeTableSort"
+                :data="tableDataAll"
+                border
+                style="width: 100%;margin-top:2%;margin-left:1.5%">
+                <el-table-column
+                prop="name"
+                label="指标名称"
+                width="330">
+                </el-table-column>
+                <el-table-column
+                prop="byz"
+                label="本月值"
+                width="330">
+                </el-table-column>
+                <el-table-column
+                prop="qntq"
+                label="去年同期"
+                width="330">
+                </el-table-column>
+                <el-table-column
+                prop="tbzzl"
+                label="同比增长率（%）"
+                width="330">
+                </el-table-column>
+                <el-table-column
+                prop="hb"
+                label="环比"
+                width="330">
+                </el-table-column>
+                <el-table-column
+                prop="hq"
+                label="环比增减值（%）"
+                width="330">
+                </el-table-column>
+            </el-table>
+            <div style="width:90%;margin-left:4%;margin-top:1%">本月{{text1}}设备小时数{{sbxxs}}小时、同比{{tbsbxxs}}小时，设备可利用率{{sbklly}}%、同比{{tbsbklly}}%，等效可用系数{{dxkyxs}}%、同比{{tbdxkyxs}}%，静风频率达到{{jfpl}}%、同比{{tbjfpl}}%，机组功率特性一致性系数达到{{gltxyzx}}%、同比{{tbglyzxxs}}%。</div>
+            <div style="width:70%;margin-left:4%;margin-top:1%">{{text2}}</div>
+            <div id="chartHistogram" style="width: 100%; height: 400px; margin: auto"></div>
+            <div id="losschartHistogram" style="width: 100%; height: 400px; margin: auto"></div>
+            <div id="windchartHistogram" style="width: 100%; height: 400px; margin: auto"></div>
+            <div style="width: 90%; height: 300px; margin: auto"></div>
+
+        </div>
+    </div>
+</template>
+<script>
+import * as echarts from "echarts";
+import {formatDate} from '../../utils/fomatDate';
+export default {
+    data(){
+        return {
+            formInline: {
+                windfarm: "",
+                project: "",
+                line: "",
+            },
+            title:'',
+            year:'',
+            month:'',
+            getData:[],
+            tableDataAll:[],
+            text1:'',
+            sbxxs:'',
+            tbsbxxs:'',
+            tbsbklly:'',
+            sbklly:'',
+            dxkyxs:'',
+            tbdxkyxs:'',
+            jfpl:'',
+            tbjfpl:'',
+            gltxyzx:'',
+            tbglyzxxs:'',
+            text2:'',
+            fdlChart:'',
+            wsChart:'',
+            date:[],
+            date2:[],
+            date3:[],
+            xdData:[],
+            xnwdbData:[],
+            jxssData:[],
+            gzssData:[],
+            fdldata:[],
+            fsdata:[],
+            jdChart:[],
+            jfData:[],
+            djData:[],
+            tableData: [{
+                date: '2016-05-02',
+                name: '王小虎',
+                address: '上海市普陀区金沙江路 1518 弄'
+                }, {
+                date: '2016-05-04',
+                name: '王小虎',
+                address: '上海市普陀区金沙江路 1517 弄'
+                }, {
+                date: '2016-05-01',
+                name: '王小虎',
+                address: '上海市普陀区金沙江路 1519 弄'
+                }, {
+                date: '2016-05-03',
+                name: '王小虎',
+                address: '上海市普陀区金沙江路 1516 弄'
+            }]
+        }
+    },
+    filters: {　
+　　 　//方法一: yyyy-MM-dd hh:mm
+        
+    },
+    created(){
+        this.performance();
+        this.$nextTick(function() {
+			this.getChartDataImport('chartHistogram')
+		})
+    },
+    methods:{
+        headStyle() {
+          return "text-align:center"
+        },
+        changeTableSort(column){
+          this.orderByColumn = column.prop;
+          if(column.order == "descending"){
+            this.isAsc = 'desc';
+          }else if(column.order == "ascending"){
+            this.isAsc = "asc";
+          }
+          this.performance();
+        },
+        performance(){
+            this.tableDataAll = [];
+            this.getData = this.$route.query.data;
+            this.year = this.$route.query.timeyear;
+            this.month = this.$route.query.timemonth;
+            this.title =  this.getData.windturbineName + this.year + '年' + this.month + '月运行指标性能分析';
+            var performance = new URLSearchParams();
+            performance.append('wtId',this.getData.windturbineid);
+            performance.append('year',this.year);
+            performance.append('month',this.month);
+            this.$http.post('/singleanalysis/singleanalysisSub',performance).then((res) =>{
+                this.tableData = res.data.data;
+                console.log(this.tableData)
+                this.tableDataAll.push({name:'实际发电量（万千瓦时）',byz:this.tableData.byzb.fdl,qntq:this.tableData.tqzb.fdl,tbzzl:this.tableData.tbzb.fdl,hb:this.tableData.hbzb.fdl,hq:this.tableData.hqzb.fdl});
+                this.tableDataAll.push({name:'理论发电量（万千瓦时）',byz:this.tableData.byzb.llfdl,qntq:this.tableData.tqzb.llfdl,tbzzl:this.tableData.tbzb.llfdl,hb:this.tableData.hbzb.llfdl,hq:this.tableData.hqzb.llfdl});
+                this.tableDataAll.push({name:'设备利用小时（小时）',byz:this.tableData.byzb.lyxs,qntq:this.tableData.tqzb.lyxs,tbzzl:this.tableData.tbzb.lyxs,hb:this.tableData.hbzb.lyxs,hq:this.tableData.hqzb.lyxs});
+                this.tableDataAll.push({name:'设备利用率（%）',byz:this.tableData.byzb.sbklyl,qntq:this.tableData.tqzb.sbklyl,tbzzl:this.tableData.tbzb.sbklyl,hb:this.tableData.hbzb.sbklyl,hq:this.tableData.hqzb.sbklyl});
+                this.tableDataAll.push({name:'等效可用系数（%）',byz:this.tableData.byzb.dxklyxs,qntq:this.tableData.tqzb.dxklyxs,tbzzl:this.tableData.tbzb.dxklyxs,hb:this.tableData.hbzb.dxklyxs,hq:this.tableData.hqzb.dxklyxs});
+                this.tableDataAll.push({name:'平均风速（m/s）',byz:this.tableData.byzb.fs,qntq:this.tableData.tqzb.fs,tbzzl:this.tableData.tbzb.fs,hb:this.tableData.hbzb.fs,hq:this.tableData.hqzb.fs});
+                this.tableDataAll.push({name:'小风切入风速（m/s）',byz:this.tableData.byzb.xfqr,qntq:this.tableData.tqzb.xfqr,tbzzl:this.tableData.tbzb.xfqr,hb:this.tableData.hbzb.xfqr,hq:this.tableData.hqzb.xfqr});
+                this.tableDataAll.push({name:'小风切入合格率（%）',byz:this.tableData.byzb.xfqrhgl,qntq:this.tableData.tqzb.xfqrhgl,tbzzl:this.tableData.tbzb.xfqrhgl,hb:this.tableData.hbzb.xfqrhgl,hq:this.tableData.hqzb.xfqrhgl});
+                this.tableDataAll.push({name:'有效风时数（小时）',byz:this.tableData.byzb.yxfss,qntq:this.tableData.tqzb.yxfss,tbzzl:this.tableData.tbzb.yxfss,hb:this.tableData.hbzb.yxfss,hq:this.tableData.hqzb.yxfss});
+                this.tableDataAll.push({name:'故障损失电量（万千瓦时）',byz:this.tableData.byzb.gzss,qntq:this.tableData.tqzb.gzss,tbzzl:this.tableData.tbzb.gzss,hb:this.tableData.hbzb.gzss,hq:this.tableData.hqzb.gzss});
+                this.tableDataAll.push({name:'调度限电损失电量（万千瓦时）',byz:this.tableData.byzb.xdss,qntq:this.tableData.tqzb.xdss,tbzzl:this.tableData.tbzb.xdss,hb:this.tableData.hbzb.xdss,hq:this.tableData.hqzb.xdss});
+                this.tableDataAll.push({name:'计划检修损失电量（万千瓦时）',byz:this.tableData.byzb.jxss,qntq:this.tableData.tqzb.jxss,tbzzl:this.tableData.tbzb.jxss,hb:this.tableData.hbzb.jxss,hq:this.tableData.hqzb.jxss});
+                this.tableDataAll.push({name:'性能未达标损失电量（万千瓦时）',byz:this.tableData.byzb.xnss,qntq:this.tableData.tqzb.xnss,tbzzl:this.tableData.tbzb.xnss,hb:this.tableData.hbzb.xnss,hq:this.tableData.hqzb.xnss});
+                this.tableDataAll.push({name:'故障停运时间（小时）',byz:this.tableData.byzb.gzxs,qntq:this.tableData.tqzb.gzxs,tbzzl:this.tableData.tbzb.gzxs,hb:this.tableData.hbzb.gzxs,hq:this.tableData.hqzb.gzxs});
+                this.tableDataAll.push({name:'检修停运时间（小时）',byz:this.tableData.byzb.jxxs,qntq:this.tableData.tqzb.jxxs,tbzzl:this.tableData.tbzb.jxxs,hb:this.tableData.hbzb.jxxs,hq:this.tableData.hqzb.jxxs});
+                this.tableDataAll.push({name:'并网时间（小时）',byz:this.tableData.byzb.rlxs,qntq:this.tableData.tqzb.rlxs,tbzzl:this.tableData.tbzb.rlxs,hb:this.tableData.hbzb.rlxs,hq:this.tableData.hqzb.rlxs});
+                this.tableDataAll.push({name:'待机时间（小时）',byz:this.tableData.byzb.tjxs,qntq:this.tableData.tqzb.tjxs,tbzzl:this.tableData.tbzb.tjxs,hb:this.tableData.hbzb.tjxs,hq:this.tableData.hqzb.tjxs});
+                this.tableDataAll.push({name:'通讯中断时间（小时）',byz:this.tableData.byzb.zdxs,qntq:this.tableData.tqzb.zdxs,tbzzl:this.tableData.tbzb.zdxs,hb:this.tableData.hbzb.zdxs,hq:this.tableData.hqzb.zdxs});
+                this.tableDataAll.push({name:'功率特性一致性系数（%）',byz:this.tableData.byzb.glyzxxs,qntq:this.tableData.tqzb.glyzxxs,tbzzl:this.tableData.tbzb.glyzxxs,hb:this.tableData.hbzb.glyzxxs,hq:this.tableData.hqzb.glyzxxs});
+                this.tableDataAll.push({name:'静风频率（%）',byz:this.tableData.byzb.jfpl,qntq:this.tableData.tqzb.jfpl,tbzzl:this.tableData.tbzb.jfpl,hb:this.tableData.hbzb.jfpl,hq:this.tableData.hqzb.jfpl});
+                this.text1 = this.tableData.byzb.windturbineName;
+                this.sbxxs = this.tableData.byzb.lyxs;
+                this.tbsbxxs = this.tableData.tqzb.lyxs;
+                this.sbklly = this.tableData.byzb.sbklyl;
+                this.tbsbklly = this.tableData.tqzb.sbklyl;
+                this.dxkyxs = this.tableData.byzb.dxklyxs;
+                this.tbdxkyxs = this.tableData.tqzb.dxklyxs;
+                this.jfpl = this.tableData.byzb.jfpl;
+                this.tbjfpl = this.tableData.tqzb.jfpl;
+                this.gltxyzx = this.tableData.byzb.glyzxxs;
+                this.tbglyzxxs = this.tableData.tqzb.glyzxxs;
+                this.text2 = this.tableData.byzb.windturbineName + this.year + '年' + this.month + '月平均风速' + this.tableData.byzb.fs + 'm/s、同比' + 
+                this.tableData.tqzb.fs + 'm/s，有效风时数' + this.tableData.byzb.yxfss + '小时、同比' + this.tableData.tqzb.yxfss + '小时，实际发电电量' + 
+                this.tableData.byzb.fdl + '万kwh、同比' + this.tableData.tqzb.fdl + '万kwh，同比增长率' + this.tableData.tbzb.fdl + '%，各项损失电量累计' +
+                this.tableData.byzb.xnss + '万kwh、同比' + this.tableData.tqzb.xnss + '万kwh，同比增长率' + this.tableData.tbzb.xnss + '%，理论发电量' + 
+                this.tableData.byzb.llfdl + '万kwh、实际发电量与理论发电量相差' + this.tableData.tbzb.llfdl + '万kwh' ;               
+            })
+            this.$http.post('/singleanalysis/singleanalysisChart',performance).then((res) => {
+                this.fdlChart = res.data.data.ff;
+                for(let i = 0;i<this.fdlChart.length;i++){
+                    let date = new Date(this.fdlChart[i].recorddate);
+                    if(formatDate(date, 'yyyy-MM-dd').substring(8,10)<10){
+                        this.date.push(formatDate(date, 'yyyy-MM-dd').substring(9,10) + '日');
+                    }else{
+                        this.date.push(formatDate(date, 'yyyy-MM-dd').substring(8,10) + '日');
+                    }
+                    this.fdldata.push(this.fdlChart[i].fdl);
+                    this.fsdata.push(this.fdlChart[i].fs);
+                    this.$nextTick(function() {
+                        this.getChartDataImport('chartHistogram')
+                    })
+                } 
+                this.wsChart = res.data.data.ws;
+                for(let i = 0;i<this.wsChart.length;i++){
+                    let wsdate = new Date(this.wsChart[i].recorddate);
+                    if(formatDate(wsdate, 'yyyy-MM-dd').substring(8,10)<10){
+                        this.date2.push(formatDate(wsdate, 'yyyy-MM-dd').substring(9,10) + '日');
+                    }else{
+                        this.date2.push(formatDate(wsdate, 'yyyy-MM-dd').substring(8,10) + '日');
+                    }
+                    this.xdData.push(this.wsChart[i].xdss);
+                    this.xnwdbData.push(this.wsChart[i].xnss);
+                    this.jxssData.push(this.wsChart[i].jxss);
+                    this.gzssData.push(this.wsChart[i].gzss);
+                    this.$nextTick(function() {
+                        this.getLossChartDataImport('losschartHistogram')
+                    })
+                }
+                this.jdChart = res.data.data.jd;
+                for(let i = 0;i<this.jdChart.length;i++){
+                    let jddata = new Date(this.jdChart[i].recorddate);
+                    if(formatDate(jddata, 'yyyy-MM-dd').substring(8,10)<10){
+                        this.date3.push(formatDate(jddata, 'yyyy-MM-dd').substring(9,10) + '日');
+                    }else{
+                        this.date3.push(formatDate(jddata, 'yyyy-MM-dd').substring(8,10) + '日');
+                    }
+                    this.jfData.push(this.jdChart[i].jfpl);
+                    this.djData.push(this.jdChart[i].tjsj);
+                    this.$nextTick(function() {
+                        this.getWindChartDataImport('windchartHistogram')
+                    })
+                }
+            })
+                
+        },
+        getChartDataImport(){
+            var charts =echarts.init(document.getElementById("chartHistogram"));
+            let option = {
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'cross',
+                        crossStyle: {
+                            color: '#999'
+                        }
+                    }
+                },
+                legend: {
+                    orient: 'vertical',
+                    left: 'center',
+                    bottom:'bottom',
+                    data: ['发电量(万千瓦时)', '风速(m/s)']
+                },
+                xAxis: [
+                    {
+                        type: 'category',
+                        data: this.date,
+                        axisPointer: {
+                            type: 'shadow'
+                        },
+                        splitLine: {
+                             show: true,
+                        }
+                    }
+                ],
+                yAxis: [
+                    {
+                        type: 'value',
+                        // name: '发电量',
+                        min: 0,
+                        max: 30000,
+                        interval: 30000,
+                        axisLabel: {
+                            formatter: '{value} kwh'
+                        },
+                    },
+                    {
+                        type: 'value',
+                        // name: '风速',
+                        min: 0,
+                        max: 15,
+                        interval: 5,
+                        axisLabel: {
+                            formatter: '{value} .00'
+                        }
+                    }
+                ],
+                series: [
+                    {
+                        name: '发电量(万千瓦时)',
+                        type: 'bar',
+                        itemStyle:{
+                            normal:{
+                                color:'#0000D3'
+                            }
+                        },
+                        data: this.fdldata
+                    },
+                    {
+                        name: '风速(m/s)',
+                        type: 'line',
+                        yAxisIndex: 1,
+                        itemStyle : {  
+                            normal : {  
+                                color:'#C248C2',
+                                lineStyle:{  
+                                    color:'#C248C2'  
+                                }  
+                            }  
+                        }, 
+                        data: this.fsdata
+                    }
+                ]
+        };
+        charts.setOption(option);
+        },
+        getLossChartDataImport(){
+            var charts =echarts.init(document.getElementById("losschartHistogram"));
+            let option = {
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'cross',
+                        crossStyle: {
+                            color: '#999'
+                        }
+                    }
+                },
+                legend: {
+                    orient: 'vertical',
+                    left: 'center',
+                    bottom:'bottom',
+                    data: ['限电损失电量(万千瓦时)', '性能未达标损失电量(万千瓦时)', '检修损失电量(万千瓦时)', '故障损失电量(万千瓦时)']
+                },
+                xAxis: [
+                    {
+                        type: 'category',
+                        data: this.date2,
+                        axisPointer: {
+                            type: 'shadow'
+                        },
+                        splitLine: {
+                             show: true,
+                        },
+
+                    }
+                ],
+                yAxis: [
+                    {
+                        type: 'value'
+                    }
+                ],
+                series: [
+                    {
+                        name: '限电损失电量(万千瓦时)',
+                        type: 'bar',
+                        stack: 'vistors',
+                        label: {
+                            show: false
+                        },
+                        emphasis: {
+                            focus: 'series'
+                        },
+                        itemStyle:{
+                            normal:{
+                                color:'#99CCFF'
+                            }
+                        },
+                        data: this.xdData
+                    },
+                    {
+                        name: '性能未达标损失电量(万千瓦时)',
+                        type: 'bar',
+                        stack: 'vistors',
+                        label: {
+                            show: false
+                        },
+                        emphasis: {
+                            focus: 'series'
+                        },
+                        itemStyle:{
+                            normal:{
+                                color:'#FF00FF'
+                            }
+                        },
+                        data: this.xnwdbData
+                    },
+                    {
+                        name: '检修损失电量(万千瓦时)',
+                        type: 'bar',
+                        stack: 'vistors',
+                        label: {
+                            show: false
+                        },
+                        emphasis: {
+                            focus: 'series'
+                        },
+                        itemStyle:{
+                            normal:{
+                                color:'#FFCC00'
+                            }
+                        },
+                        data: this.jxssData
+                    },
+                    {
+                        name: '故障损失电量(万千瓦时)',
+                        type: 'bar',
+                        stack: 'vistors',
+                        label: {
+                            show: false
+                        },
+                        emphasis: {
+                            focus: 'series'
+                        },
+                        itemStyle:{
+                            normal:{
+                                color:'#800080'
+                            }
+                        },
+                        data: this.gzssData
+                    },
+                ]
+            };
+            charts.setOption(option);
+        },
+        getWindChartDataImport(){
+            var charts =echarts.init(document.getElementById("windchartHistogram"));
+            let option = {
+                tooltip: {
+                    trigger: 'axis'
+                },
+                legend: {
+                    orient: 'vertical',
+                    left: 'center',
+                    bottom:'bottom',
+                    data: ['静风频率', '待机台数']
+                },
+                toolbox: {
+                    feature: {
+                        saveAsImage: {}
+                    }
+                },
+                xAxis: {
+                    type: 'category',
+                    boundaryGap: false,
+                    axisPointer: {
+                            type: 'shadow'
+                        },
+                        splitLine: {
+                             show: true,
+                        },
+                    data: this.date3
+                },
+                yAxis: {
+                    type: 'value',
+                    axisLabel: {
+                            formatter: '{value} .00'
+                        }
+                },
+                series: [
+                    {
+                        name: '静风频率',
+                        type: 'line',
+                        stack: '总量',
+                        data: this.jfData,
+                        itemStyle : {  
+                            normal : {  
+                                color:'#F64A4A',
+                                lineStyle:{  
+                                    color:'#F64A4A'  
+                                }  
+                            }  
+                        },
+                    },
+                    {
+                        name: '待机台数',
+                        type: 'line',
+                        stack: '总量',
+                        data: this.djData,
+                        itemStyle : {  
+                            normal : {  
+                                color:'#4343F8',
+                                lineStyle:{  
+                                    color:'#4343F8'  
+                                }  
+                            }  
+                        },
+                    }
+                ]
+            };
+            charts.setOption(option);
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+    .box{
+		width: 100%;
+		display: flex;
+		justify-content: space-around;
+ 		align-items: center;
+ 		overflow: hidden;
+  	}
+    .searchBar{
+        margin-top: 1%;
+    }
+    .box-card{
+        width: 100%;
+    }
+</style>

src/views/rankingIndex/CutAndSpeed.vue

@@ -0,0 +1,327 @@
+<template>
+    <div class="box">
+        <div class="searchBar">
+            <el-card class="box-card">
+                <div slot="header" class="clearfix" style="font-size:15px">
+                    <span>查询条件</span>
+                </div>
+                <el-form :inline="true" :model="formInline" class="demo-form-inline">
+            <el-row :gutter="1">
+                <el-form-item label="风场：">
+                <el-select v-model="value"  placeholder="请选择">
+                <el-option
+                    v-for="item in options"
+                    :key="item.name"
+                    :label="item.name"
+                    :value="item.id">
+                </el-option>
+                </el-select>
+                </el-form-item>
+                <el-form-item label="日期：">
+                        <el-date-picker
+                        value-format="yyyy-MM-dd"
+                        v-model="time"
+                        type="date"
+                        placeholder="选择日期">
+                        </el-date-picker>
+                </el-form-item>
+
+                <el-form-item>
+                <el-button type="primary" @click="queryApData" :plain="true"
+                    >查询</el-button
+                >
+                </el-form-item>
+                <el-form-item>
+                <el-button type="primary" @click="toExcel()">导出</el-button>
+                </el-form-item>
+            </el-row>
+            </el-form>
+            </el-card>
+            <el-table
+            id="callthepolicetable"
+            :data="gridData"
+            :row-style="{ height: '10px' }" 
+            :cell-style="{ textAlign: 'center',padding:'1px' }" 
+            :header-cell-style="headStyle"
+            @sort-change="changeTableSort"
+            style="font-size: 10px;margin-top:1%">
+            <el-table-column label="切入切出风速整合">
+            <el-table-column
+              type="index"
+              width="40">
+            </el-table-column>
+            <el-table-column
+              prop="windturbineid"
+              label="风机"
+               width="80">
+            </el-table-column>
+            <el-table-column
+              prop="inputsmallratio"
+              label="总小风切入"
+              width="60">
+            </el-table-column>
+            <el-table-column
+              prop="inputbigratio"
+              label="总大风切入"
+               width="60">
+            </el-table-column>
+            <el-table-column
+              prop="outputsmallratio"
+              label="总小风切出"
+               width="60">
+            </el-table-column>
+            <el-table-column
+              prop="outputbigmaxratio"
+              label="总大风切出"
+               width="60">
+            </el-table-column>
+            <el-table-column
+              prop="dayinputsmall"
+              label="日小风切入"
+               width="60">
+            </el-table-column>
+            <el-table-column
+              prop="dayinputsmallratio"
+              label="日小风切入合格"
+               width="60">
+            </el-table-column>
+            <el-table-column
+              prop="dayoutputsmall"
+              label="日小风切出"
+               width="60">
+            </el-table-column>
+            <el-table-column
+              prop="dayoutputsmallratio"
+              label="日小风切出合格"
+               width="60">
+            </el-table-column>
+            <el-table-column
+              prop="dayinputbig"
+              label="日大风切入"
+               width="60">
+            </el-table-column>
+            <el-table-column
+              prop="dayinputbigratio"
+              label="日大风切入合格"
+               width="60">
+            </el-table-column>
+            <el-table-column
+              prop="dayoutputbig"
+              label="日大风切出"
+               width="60">
+            </el-table-column>
+            <el-table-column
+              prop="dayoutputbigratio"
+              label="日大风切出合格"
+               width="60">
+            </el-table-column>
+            <el-table-column
+              prop="monthinputsmall"
+              label="月小风切入"
+               width="60">
+            </el-table-column>
+            <el-table-column
+              prop="monthinputsmallratio"
+              label="月小风切入合格"
+               width="60">
+            </el-table-column>
+            <el-table-column
+              prop="monthinputbig"
+              label="月大风切入"
+               width="60">
+            </el-table-column>
+            <el-table-column
+              prop="monthinputbigratio"
+              label="月大风切入合格"
+               width="60">
+            </el-table-column>
+            <el-table-column
+              prop="monthoutputsmall"
+              label="月小风切出"
+               width="60">
+            </el-table-column>
+            <el-table-column
+              prop="monthoutputsmallratio"
+              label="月小风切出合格"
+               width="60">
+            </el-table-column>
+            <el-table-column
+              prop="monthoutputbig"
+              label="月大风切出"
+               width="60">
+            </el-table-column>
+            <el-table-column
+              prop="monthoutputbigratio"
+              label="月大风切出合格"
+               width="60">
+            </el-table-column>
+            <el-table-column
+              prop="yearinputsmall"
+              label="年小风切入"
+               width="60">
+            </el-table-column>
+            <el-table-column
+              prop="yearinputsmallratio"
+              label="年小风切入合格"
+               width="60">
+            </el-table-column>
+            <el-table-column
+              prop="yearinputbig"
+              label="年大风切入"
+               width="60">
+            </el-table-column>
+            <el-table-column
+              prop="yearinputbigratio"
+              label="年大风切入合格"
+               width="60">
+            </el-table-column>
+            <el-table-column
+              prop="yearoutputsmall"
+              label="年小风切出"
+               width="60">
+            </el-table-column>
+            <el-table-column
+              prop="yearoutputsmallratio"
+              label="年小风切出合格"
+               width="60">
+            </el-table-column>
+            <el-table-column
+              prop="yearoutputbig"
+              label="年大风切出"
+               width="60">
+            </el-table-column>
+            <el-table-column
+              prop="yearoutputbigratio"
+              label="年大风切出合格"
+               width="60">
+            </el-table-column>
+            <el-table-column
+              prop="address"
+              label="操作"
+               width="80">
+               <template slot-scope="scope">
+                  <el-button size="mini"  @click="handleEdit(scope.$index, scope.row)">历史</el-button>
+               </template>
+            </el-table-column>  
+            </el-table-column>        
+       </el-table>
+       <div style="margin-top:1%"> 
+       <div id="chartHistogram" style="width: 100%; height: 250px; margin: auto"></div>
+       </div>
+       </div>
+    </div>
+</template>
+<script>
+import excelHelper from "@/utils/excelHelper";
+import * as echarts from "echarts";
+export default {
+    data() {
+      return {
+        formInline: {
+        windfarm: "",
+        project: "",
+        line: "",
+        },
+        time: '2021-01-01',
+        currentPage2: 1,
+	      pagesize: 10,
+        gridData:[],
+        gridDataChart:[],
+        charFreData:[],
+        charNameData:[],
+        options: [],
+        orderByColumn:'',
+        isAsc: '',
+        value: 'MHS_FDC',
+        wtid:'',
+        endDate:'',
+      }
+    },
+   
+    created(){
+        this.callAndSpeedData();
+        this.getNowFormatDate()
+    },
+    methods:{
+       getNowFormatDate(){
+          var date = new Date();
+          var seperator1 = "-";
+          var year = date.getFullYear();
+          var month = date.getMonth() + 1;
+          var strDate = date.getDate();
+          if (month >= 1 && month <= 9) {
+            month = "0" + month;
+          }
+          if (strDate >= 0 && strDate <= 9) {
+            strDate = "0" + strDate;
+          }
+          var currentdate = year + seperator1 + month + seperator1 + strDate;
+          this.endDate = currentdate;
+          return currentdate;
+       },
+        queryApData() {
+            this.callAndSpeedData();
+        },
+        handleEdit(a,b){
+          this.wtId = b.windturbineid;
+          console.log(this.wtId)
+          this.$router.push({
+          path:'/cutAndSpeedHistory',
+          query:{
+            wpId:this.value,
+            wtId:this.wtId,
+            beginDate:this.time,
+            endDate:this.endDate,
+          }
+        })
+        },
+        headStyle() {
+          return "text-align:center"
+        },
+        changeTableSort(column){
+          this.orderByColumn = column.prop;
+          if(column.order == "descending"){
+            this.isAsc = 'desc';
+          }else if(column.order == "ascending"){
+            this.isAsc = "asc";
+          }
+          this.callAndSpeedData();
+        },
+        callAndSpeedData(){
+            this.$http.get('/powercompare/windfarmAjax').then((res) => {
+                this.options = res.data.data;
+            })
+            console.log(this.time)
+            var callAndSpeedData = new URLSearchParams();
+            callAndSpeedData.append('pageNum',this.currentPage2);
+		      	callAndSpeedData.append('pageSize',this.pagesize);
+            callAndSpeedData.append('orderByColumn',this.orderByColumn);
+            callAndSpeedData.append('isAsc',this.isAsc);
+		  	    callAndSpeedData.append('wpId',this.value);
+		      	callAndSpeedData.append('recorddate',this.time);
+            this.$http.post('/outputspeed/outputSpeedlist',callAndSpeedData).then((res) => {
+                this.gridData = res.data.data
+                console.log(this.gridData)
+            })
+        },
+        toExcel(){
+            excelHelper.exportExcel("callthepolicetable","负荷率排行榜",".xls",true);
+        },
+    }
+}
+</script>
+<style lang="scss" scoped>
+    .box{
+		width: 100%;
+		display: flex;
+		justify-content: space-around;
+ 		align-items: center;
+ 		overflow: hidden;
+	}
+    .searchBar{
+        margin-top: 1%;
+    }
+    .box-card{
+        width: 100%;
+    }
+</style>

src/views/rankingIndex/CutAndSpeedHistory.vue

@@ -0,0 +1,303 @@
+<template>
+    <div class="box">
+        <div class="searchBar">
+            <el-card class="box-card">
+                <div slot="header" class="clearfix" style="font-size:15px">
+                    <span>查询条件</span>
+                </div>
+                <el-form :inline="true" :model="formInline" class="demo-form-inline">
+            <el-row :gutter="1">
+                <el-form-item label="风场：">
+                <el-select v-model="value"  placeholder="请选择" @change="queryApData">
+                <el-option
+                    v-for="item in options"
+                    :key="item.name"
+                    :label="item.name"
+                    :value="item.id">
+                </el-option>
+                </el-select>
+                </el-form-item>
+                <el-form-item label="风机：">
+                <el-select v-model="value2"  
+                 placeholder="请选择">
+                <el-option
+                    v-for="item in options2"
+                    :key="item.name"
+                    :label="item.name"
+                    :value="item.id"
+                >
+                </el-option>
+                </el-select>
+                </el-form-item>
+                <el-form-item label="选择时间：">
+                <el-date-picker
+                    v-model="timedate"
+                    value-format="yyyy-MM-dd"
+                    type="daterange"
+                    range-separator="至"
+                    start-placeholder="开始日期"
+                    end-placeholder="结束日期"
+                    format="yyyy-MM-dd"
+                >
+                </el-date-picker>
+                </el-form-item>
+                <el-form-item>
+                <el-button type="primary" @click="queryApData" :plain="true"
+                    >查询</el-button
+                >
+                </el-form-item>
+                <el-form-item>
+                <el-button type="primary" @click="toExcel()">导出</el-button>
+                </el-form-item>
+                <el-form-item>
+                  <el-button type="primary" @click="goReturn">返回</el-button>
+                </el-form-item>
+            </el-row>
+            </el-form>
+            </el-card>
+            <el-table
+            id="callthepolicetable"
+            :data="gridData"
+            :row-style="{ height: '10px' }" 
+            :cell-style="{ textAlign: 'center',padding:'1px' }" 
+            :header-cell-style="headStyle"
+            @sort-change="changeTableSort"
+            style="font-size: 10px;margin-top:1%">
+            <el-table-column label="切入切出风速整合历史">
+            <el-table-column
+              type="index"
+              width="40">
+            </el-table-column>
+            <el-table-column
+              prop="windturbineid"
+              label="风机"
+               width="90">
+            </el-table-column>
+            <el-table-column
+              label="日期"
+               width="90">
+            <template slot-scope="scope">
+                {{scope.row.recorddate  | formatDate}}
+            </template>
+            </el-table-column>
+            <el-table-column
+              prop="inputsmallratio"
+              label="总小风切入"
+              width="90">
+            </el-table-column>
+            <el-table-column
+              prop="inputbigratio"
+              label="总大风切入"
+               width="90">
+            </el-table-column>
+            <el-table-column
+              prop="outputsmallratio"
+              label="总小风切出"
+               width="90">
+            </el-table-column>
+            <el-table-column
+              prop="outputbigmaxratio"
+              label="总大风切出"
+               width="90">
+            </el-table-column>
+            <el-table-column
+              prop="dayinputsmall"
+              label="日小风切入"
+               width="90">
+            </el-table-column>
+            <el-table-column
+              prop="dayoutputsmall"
+              label="日小风切出"
+               width="90">
+            </el-table-column>
+            <el-table-column
+              prop="dayinputbig"
+              label="日大风切入"
+               width="90">
+            </el-table-column>
+            <el-table-column
+              prop="dayoutputbig"
+              label="日大风切出"
+               width="90">
+            </el-table-column>
+            <el-table-column
+              prop="monthinputsmall"
+              label="月小风切入"
+               width="90">
+            </el-table-column>
+            <el-table-column
+              prop="monthinputbig"
+              label="月大风切入"
+               width="90">
+            </el-table-column>
+            <el-table-column
+              prop="monthoutputsmall"
+              label="月小风切出"
+               width="90">
+            </el-table-column>
+            <el-table-column
+              prop="monthoutputbig"
+              label="月大风切出"
+               width="90">
+            </el-table-column>
+            <el-table-column
+              prop="yearinputsmall"
+              label="年小风切入"
+               width="90">
+            </el-table-column>
+            <el-table-column
+              prop="yearinputbig"
+              label="年大风切入"
+               width="90">
+            </el-table-column>
+            <el-table-column
+              prop="yearoutputsmall"
+              label="年小风切出"
+               width="90">
+            </el-table-column>
+            <el-table-column
+              prop="yearoutputbig"
+              label="年大风切出"
+               width="90">
+            </el-table-column>
+            </el-table-column>        
+       </el-table>
+       <div style="margin-top:1%"> 
+       <div id="chartHistogram" style="width: 100%; height: 250px; margin: auto"></div>
+       </div>
+       </div>
+    </div>
+</template>
+<script>
+import {formatDate} from '../../utils/fomatDate';
+import excelHelper from "@/utils/excelHelper";
+export default {
+    data() {
+      return {
+        formInline: {
+        windfarm: "",
+        project: "",
+        line: "",
+        },
+        time: '2021-01-01',
+        timedate: [
+            // {beginDate:'2021-01-01'},
+            // {endDate:'2021-01-04'}
+        ],
+        currentPage2: 1,
+	    pagesize: 10,
+        gridData:[],
+        gridDataChart:[],
+        charFreData:[],
+        charNameData:[],
+        options: [],
+        options2: [],
+        orderByColumn:'',
+        isAsc: '',
+        value: '',
+        value2:'',
+        wtid:'',
+        endDate:'',
+      }
+    },
+    filters: {　
+　　 　//方法一: yyyy-MM-dd hh:mm
+        formatDate(time) {
+            let date = new Date(time)
+            // console.log(new Date(time))
+            return formatDate(date, 'yyyy-MM-dd')
+        },
+        rounding (value) {
+            return value.toFixed(2)
+        }
+    },
+    created(){
+        this.callAndSpeedData();
+    },
+    methods:{
+        queryApData() {
+            this.callAndSpeedData();
+        },
+        headStyle() {
+          return "text-align:center"
+        },
+        changeTableSort(column){
+          this.orderByColumn = column.prop;
+          if(column.order == "descending"){
+            this.isAsc = 'desc';
+          }else if(column.order == "ascending"){
+            this.isAsc = "asc";
+          }
+          this.callAndSpeedData();
+        },
+        callAndSpeedData(){
+            this.$http.get('/powercompare/windfarmAjax').then((res) => {
+                this.options = res.data.data;
+            })
+            // this.value = this.$route.query.wpId;
+            if(this.value == ''){
+                this.value = this.$route.query.wpId;
+                this.$http.get('/powercompare/windturbineAjax?wpId=' + this.value).then((res) => {
+                    this.options2 = res.data.data;
+                })
+            }else{
+               this.$http.get('/powercompare/windturbineAjax?wpId=' + this.value).then((res) => {
+                    this.options2 = res.data.data;
+                }) 
+            }
+            var callAndSpeedData = new URLSearchParams();
+            callAndSpeedData.append('pageNum',this.currentPage2);
+		    callAndSpeedData.append('pageSize',this.pagesize);
+            callAndSpeedData.append('orderByColumn',this.orderByColumn);
+            callAndSpeedData.append('isAsc',this.isAsc);
+            if(this.value == ''){
+                this.value = this.$route.query.wpId;
+                callAndSpeedData.append('wpId',this.value);
+            }else{
+                callAndSpeedData.append('wpId',this.value);
+            }
+		  	if(this.value2 == ''){
+                this.value2 = this.$route.query.wtId;
+                callAndSpeedData.append('wtId',this.value2);
+                console.log(this.value2)
+            }else{
+                callAndSpeedData.append('wtId',this.value2);
+            }
+            if(this.timedate == ''){
+                this.timedate[0] = this.$route.query.beginDate;
+                this.timedate[1] = this.$route.query.endDate;
+                callAndSpeedData.append('beginDate',this.timedate[0]);
+                callAndSpeedData.append('endDate',this.timedate[1]);
+            }else{
+                callAndSpeedData.append('beginDate',this.timedate[0]);
+                callAndSpeedData.append('endDate',this.timedate[1]);
+            }
+            this.$http.post('/outputspeed/outputspeedhistorylist',callAndSpeedData).then((res) => {
+                this.gridData = res.data.data
+                console.log(this.gridData)
+            })
+        },
+        goReturn(){
+            this.$router.push('/cutAndSpeed')
+          },
+        toExcel(){
+            excelHelper.exportExcel("callthepolicetable","负荷率排行榜",".xls",true);
+        },
+    }
+}
+</script>
+<style lang="scss" scoped>
+    .box{
+		width: 100%;
+		display: flex;
+		justify-content: space-around;
+ 		align-items: center;
+ 		overflow: hidden;
+	}
+    .searchBar{
+        margin-top: 1%;
+    }
+    .box-card{
+        width: 100%;
+    }
+</style>

src/views/rankingIndex/PlannedGeneration.vue

@@ -0,0 +1,451 @@
+<template>
+    <div class="box">
+        <div class="searchBar">
+            <el-card class="box-card">
+                <div slot="header" class="clearfix" style="font-size:15px">
+                    <span>查询条件</span>
+                </div>
+                <el-form :inline="true" :model="formInline" class="demo-form-inline">
+            <el-row :gutter="1">
+                <el-form-item label="风场：">
+                <el-select v-model="value"  placeholder="请选择" @change="projectData">
+                <el-option
+                    v-for="item in options"
+                    :key="item.name"
+                    :label="item.name"
+                    :value="item.id">
+                </el-option>
+                </el-select>
+                </el-form-item>
+                <el-form-item label="项目：">
+                <el-select v-model="value2"  placeholder="请选择">
+                <el-option
+                    v-for="item in options2"
+                    :key="item.name"
+                    :label="item.name"
+                    :value="item.id">
+                </el-option>
+                </el-select>
+                </el-form-item>
+                <el-form-item label="年份：">
+                        <el-date-picker
+                        v-model="timeyear"
+                        type="year"
+                        placeholder="选择年"
+                        >
+                        </el-date-picker>
+                </el-form-item>
+                <el-form-item>
+                <el-button type="primary" @click="queryApData" :plain="true"
+                    >查询</el-button
+                >
+                </el-form-item>
+                <el-form-item>
+                <el-button type="primary" @click="dialogFormVisible = true" :plain="true"
+                    >新增</el-button
+                >
+                </el-form-item>
+                <el-form-item>
+                <el-button type="primary" @click="toExcel()">导出</el-button>
+                </el-form-item>
+            </el-row>
+            </el-form>
+            </el-card>
+            <el-table
+            id="callthepolicetable"
+            :data="gridData"
+            :row-style="{ height: '10px' }" 
+            :cell-style="{ textAlign: 'center',padding:'1px' }" 
+            :header-cell-style="headStyle"
+            @row-click="tableDatawindturbineName"
+            @sort-change="changeTableSort"
+            style="font-size: 10px;margin-top:1%">
+            <el-table-column label="计划发电量列表">
+            <el-table-column
+              type="index"
+              width="40">
+            </el-table-column>
+            <el-table-column
+              prop="projectName"
+              label="名称"
+               width="125"
+            >
+            </el-table-column>
+            <el-table-column
+              prop="year"
+              label="年"
+              width="120">
+            </el-table-column>
+            <el-table-column
+              prop="gc01"
+              label="1月"
+               width="120">
+            </el-table-column>
+            <el-table-column
+              prop="gc02"
+              label="2月"
+               width="120">
+            </el-table-column>
+            <el-table-column
+              prop="gc03"
+              label="3月"
+               width="120">
+            </el-table-column>
+            <el-table-column
+              prop="gc04"
+              label="4月"
+               width="120">
+            </el-table-column>
+            <el-table-column
+              prop="gc05"
+              label="5月"
+               width="120">
+            </el-table-column>
+            <el-table-column
+              prop="gc06"
+              label="6月"
+               width="120">
+            </el-table-column>
+            <el-table-column
+              prop="gc07"
+              label="7月"
+               width="120">
+            </el-table-column>
+            <el-table-column
+              prop="gc08"
+              label="8月"
+               width="120">
+            </el-table-column>
+            <el-table-column
+              prop="gc09"
+              label="9月"
+               width="120">
+            </el-table-column>
+            <el-table-column
+              prop="gc10"
+              label="10月"
+               width="120">
+            </el-table-column>
+            <el-table-column
+              prop="gc11"
+              label="11月"
+               width="120">
+            </el-table-column>
+            <el-table-column
+              prop="gc12"
+              label="12月"
+               width="120">
+            </el-table-column>
+            <el-table-column
+              prop="generatingcapacity"
+              label="合计"
+               width="120">
+            </el-table-column>
+            </el-table-column>        
+       </el-table>
+       <el-dialog title="新增信息" :visible.sync="dialogFormVisible">
+            <el-form :model="form">
+                <el-form :inline="true" :model="formInline" class="demo-form-inline" style="margin-left:3.5%">
+                <el-form-item label="风场：" >
+                    <el-select v-model="value"  placeholder="请选择" @change="projectData">
+                    <el-option
+                        v-for="item in options"
+                        :key="item.name"
+                        :label="item.name"
+                        :value="item.id">
+                    </el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="项目：" >
+                    <el-select v-model="value2"  placeholder="请选择">
+                    <el-option
+                        v-for="item in options2"
+                        :key="item.name"
+                        :label="item.name"
+                        :value="item.id">
+                    </el-option>
+                    </el-select>
+                </el-form-item>
+                 <el-form-item label="年份：" >
+                        <el-date-picker
+                        v-model="timeyear"
+                        type="year"
+                        placeholder="选择年"
+                        >
+                        </el-date-picker>
+                </el-form-item>
+                </el-form>
+                <el-form-item label="1月份计划发电量(万kWh)" :label-width="formLabelWidth">
+                    <el-input v-model="form.gc01" autocomplete="off"></el-input>
+                </el-form-item>
+                <el-form-item label="2月份计划发电量(万kWh)" :label-width="formLabelWidth">
+                    <el-input v-model="form.gc02" autocomplete="off"></el-input>
+                </el-form-item>
+                <el-form-item label="3月份计划发电量(万kWh)" :label-width="formLabelWidth">
+                    <el-input v-model="form.gc03" autocomplete="off"></el-input>
+                </el-form-item>
+                <el-form-item label="4月份计划发电量(万kWh)" :label-width="formLabelWidth">
+                    <el-input v-model="form.gc04" autocomplete="off"></el-input>
+                </el-form-item>
+                <el-form-item label="5月份计划发电量(万kWh)" :label-width="formLabelWidth">
+                    <el-input v-model="form.gc05" autocomplete="off"></el-input>
+                </el-form-item>
+                <el-form-item label="6月份计划发电量(万kWh)" :label-width="formLabelWidth">
+                    <el-input v-model="form.gc06" autocomplete="off"></el-input>
+                </el-form-item>
+                <el-form-item label="7月份计划发电量(万kWh)" :label-width="formLabelWidth">
+                    <el-input v-model="form.gc07" autocomplete="off"></el-input>
+                </el-form-item>
+                <el-form-item label="8月份计划发电量(万kWh)" :label-width="formLabelWidth">
+                    <el-input v-model="form.gc08" autocomplete="off"></el-input>
+                </el-form-item>
+                <el-form-item label="9月份计划发电量(万kWh)" :label-width="formLabelWidth">
+                    <el-input v-model="form.gc09" autocomplete="off"></el-input>
+                </el-form-item>
+                <el-form-item label="10月份计划发电量(万kWh)" :label-width="formLabelWidth">
+                    <el-input v-model="form.gc10" autocomplete="off"></el-input>
+                </el-form-item>
+                <el-form-item label="11月份计划发电量(万kWh)" :label-width="formLabelWidth">
+                    <el-input v-model="form.gc11" autocomplete="off"></el-input>
+                </el-form-item>
+                <el-form-item label="12月份计划发电量(万kWh)" :label-width="formLabelWidth">
+                    <el-input v-model="form.gc12" autocomplete="off"></el-input>
+                </el-form-item>
+                <el-form-item label="全年计划发电量(万kWh)" :label-width="formLabelWidth">
+                    <el-input v-model="form.generatingcapacity" autocomplete="off"></el-input>
+                </el-form-item>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+                <el-button @click="dialogFormVisible = false">取 消</el-button>
+                <el-button type="primary" @click="addSaveData()">保存</el-button>
+            </div>
+        </el-dialog>
+        <el-dialog title="修改信息" :visible.sync="dialogFormVisible2">
+            <el-form :model="form">
+                <el-form :inline="true" :model="formInline" class="demo-form-inline" style="margin-left:3.5%">
+                <el-form-item label="风场：" >
+                    <el-select v-model="value"  placeholder="请选择" @change="projectData">
+                    <el-option
+                        v-for="item in options"
+                        :key="item.name"
+                        :label="item.name"
+                        :value="item.id">
+                    </el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="项目：" >
+                    <el-select v-model="value2"  placeholder="请选择">
+                    <el-option
+                        v-for="item in options2"
+                        :key="item.name"
+                        :label="item.name"
+                        :value="item.id">
+                    </el-option>
+                    </el-select>
+                </el-form-item>
+                 <el-form-item label="年份：" >
+                        <el-date-picker
+                        v-model="timeyear"
+                        type="year"
+                        placeholder="选择年"
+                        >
+                        </el-date-picker>
+                </el-form-item>
+                </el-form>
+                <el-form-item label="1月份计划发电量(万kWh)" :label-width="formLabelWidth">
+                    <el-input v-model="form.gc01" autocomplete="off"></el-input>
+                </el-form-item>
+                <el-form-item label="2月份计划发电量(万kWh)" :label-width="formLabelWidth">
+                    <el-input v-model="form.gc02" autocomplete="off"></el-input>
+                </el-form-item>
+                <el-form-item label="3月份计划发电量(万kWh)" :label-width="formLabelWidth">
+                    <el-input v-model="form.gc03" autocomplete="off"></el-input>
+                </el-form-item>
+                <el-form-item label="4月份计划发电量(万kWh)" :label-width="formLabelWidth">
+                    <el-input v-model="form.gc04" autocomplete="off"></el-input>
+                </el-form-item>
+                <el-form-item label="5月份计划发电量(万kWh)" :label-width="formLabelWidth">
+                    <el-input v-model="form.gc05" autocomplete="off"></el-input>
+                </el-form-item>
+                <el-form-item label="6月份计划发电量(万kWh)" :label-width="formLabelWidth">
+                    <el-input v-model="form.gc06" autocomplete="off"></el-input>
+                </el-form-item>
+                <el-form-item label="7月份计划发电量(万kWh)" :label-width="formLabelWidth">
+                    <el-input v-model="form.gc07" autocomplete="off"></el-input>
+                </el-form-item>
+                <el-form-item label="8月份计划发电量(万kWh)" :label-width="formLabelWidth">
+                    <el-input v-model="form.gc08" autocomplete="off"></el-input>
+                </el-form-item>
+                <el-form-item label="9月份计划发电量(万kWh)" :label-width="formLabelWidth">
+                    <el-input v-model="form.gc09" autocomplete="off"></el-input>
+                </el-form-item>
+                <el-form-item label="10月份计划发电量(万kWh)" :label-width="formLabelWidth">
+                    <el-input v-model="form.gc10" autocomplete="off"></el-input>
+                </el-form-item>
+                <el-form-item label="11月份计划发电量(万kWh)" :label-width="formLabelWidth">
+                    <el-input v-model="form.gc11" autocomplete="off"></el-input>
+                </el-form-item>
+                <el-form-item label="12月份计划发电量(万kWh)" :label-width="formLabelWidth">
+                    <el-input v-model="form.gc12" autocomplete="off"></el-input>
+                </el-form-item>
+                <el-form-item label="全年计划发电量(万kWh)" :label-width="formLabelWidth">
+                    <el-input v-model="form.generatingcapacity" autocomplete="off"></el-input>
+                </el-form-item>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+                <el-button @click="dialogFormVisible = false">取 消</el-button>
+                <el-button type="primary" @click="addSaveData()">保存</el-button>
+            </div>
+        </el-dialog>
+       </div>
+    </div>
+</template>
+<script>
+import excelHelper from "@/utils/excelHelper";
+import * as echarts from "echarts";
+export default {
+    data() {
+      return {
+        formInline: {
+        windfarm: "",
+        project: "",
+        line: "",
+        },
+        timeyear:'2021',
+        currentPage2: 1,
+	    pagesize: 10,
+        gridData:[],
+        gridDataChart:[],
+        charFreData:[],
+        charNameData:[],
+        options: [],
+        options2: [],
+        orderByColumn:'',
+        isAsc: '',
+        value: '',
+        value2:'',
+        dialogFormVisible: false,
+        dialogFormVisible2: false,
+        form: {
+          gc01: '',
+          gc02: '',
+          gc03: '',
+          gc04: '',
+          gc05: '',
+          gc06: '',
+          gc07: '',
+          gc08: '',
+          gc09: '',
+          gc10: '',
+          gc11: '',
+          gc12: '',
+          generatingcapacity: '',
+        },
+        formLabelWidth: '200px'
+      }
+    },
+   
+    created(){
+        this.callAndSpeedData();
+    },
+    methods:{
+        queryApData() {
+            this.callAndSpeedData();
+        },
+        handleEdit(a,b){
+          this.wtId = b.windturbineid;
+          console.log(this.wtId)
+          this.$router.push({
+          path:'/cutAndSpeedHistory',
+          query:{
+            wpId:this.value,
+            wtId:this.wtId,
+            beginDate:this.time,
+            endDate:this.endDate,
+          }
+        })
+        },
+        tableDatawindturbineName(val){
+          this.dialogFormVisible = true;
+          this.fanData = val;
+          console.log(this.fanData)
+        },
+        headStyle() {
+          return "text-align:center"
+        },
+        changeTableSort(column){
+          this.orderByColumn = column.prop;
+          if(column.order == "descending"){
+            this.isAsc = 'desc';
+          }else if(column.order == "ascending"){
+            this.isAsc = "asc";
+          }
+          this.callAndSpeedData();
+        },
+        projectData(){
+            this.$http.get('/powercompare/projectAjax?wpIds=' + this.value).then((res) =>{
+                this.options2 = res.data.data;
+            })
+        },
+        callAndSpeedData(){
+            this.$http.get('/powercompare/windfarmAjax').then((res) => {
+                this.options = res.data.data;
+            })
+            var plannedGenerationData = new URLSearchParams();
+		  	plannedGenerationData.append('wpId',this.value);
+		    plannedGenerationData.append('pjId',this.value2);
+            plannedGenerationData.append('year',this.timeyear);
+            this.$http.post('/projectplan/getProjectPlanVo',plannedGenerationData).then((res) => {
+                this.gridData = res.data.data
+                console.log(this.gridData)
+            })
+        },
+        addSaveData(){
+            console.log(this.fanData.gc01)
+            var addSaveData = new URLSearchParams();
+            addSaveData.append('id',this.value);
+            addSaveData.append('projectid',this.value2);
+            addSaveData.append('generatingcapacity',this.form.generatingcapacity);
+            addSaveData.append('year',this.timeyear);
+            addSaveData.append('gc01',this.form.gc01);
+            addSaveData.append('gc02',this.form.gc02);
+            addSaveData.append('gc03',this.form.gc03);
+            addSaveData.append('gc04',this.form.gc04);
+            addSaveData.append('gc05',this.form.gc05);
+            addSaveData.append('gc06',this.form.gc06);
+            addSaveData.append('gc07',this.form.gc07);
+            addSaveData.append('gc08',this.form.gc08);
+            addSaveData.append('gc09',this.form.gc09);
+            addSaveData.append('gc10',this.form.gc10);
+            addSaveData.append('gc11',this.form.gc11);
+            addSaveData.append('gc12',this.form.gc12);
+            this.$http.post('/projectplan/saveData',addSaveData).then((res) => {
+                console.log(res.data)
+            })
+            this.dialogFormVisible = false;
+        },
+        modifyData(a,b,c){
+            this.dialogFormVisible2 = true;
+            console.log(a,b,c)
+        },
+        toExcel(){
+            excelHelper.exportExcel("callthepolicetable","负荷率排行榜",".xls",true);
+        },
+    }
+}
+</script>
+<style lang="scss" scoped>
+    .box{
+		width: 100%;
+		display: flex;
+		justify-content: space-around;
+ 		align-items: center;
+ 		overflow: hidden;
+	}
+    .searchBar{
+        margin-top: 1%;
+    }
+    .box-card{
+        width: 100%;
+    }
+</style>

src/views/rankingIndex/RankingCallThePolice.vue

@@ -0,0 +1,229 @@
+<template>
+    <div class="box">
+        <div class="searchBar">
+            <el-card class="box-card">
+                <div slot="header" class="clearfix" style="font-size:15px">
+                    <span>查询条件</span>
+                </div>
+                <el-form :inline="true" :model="formInline" class="demo-form-inline">
+            <el-row :gutter="1">
+                <el-form-item label="维度">
+                <el-select v-model="value"  placeholder="请选择">
+                <el-option
+                    v-for="item in options"
+                    :key="item.name"
+                    :label="item.name"
+                    :value="item.id">
+                </el-option>
+                </el-select>
+                </el-form-item>
+                <el-form-item label="选择时间：">
+                <el-date-picker
+                    v-model="timedate"
+                    value-format="yyyy-MM-dd"
+                    type="daterange"
+                    range-separator="至"
+                    start-placeholder="开始日期"
+                    end-placeholder="结束日期"
+                    format="yyyy-MM-dd"
+                >
+                </el-date-picker>
+                </el-form-item>
+
+                <el-form-item>
+                <el-button type="primary" @click="queryApData" :plain="true"
+                    >查询</el-button
+                >
+                </el-form-item>
+                <el-form-item>
+                <el-button type="primary" @click="toExcel()">导出</el-button>
+                </el-form-item>
+            </el-row>
+            </el-form>
+            </el-card>
+            <el-table
+            id="callthepolicetable"
+            :data="gridData"
+            :row-style="{ height: '10px' }" 
+            :cell-style="{ textAlign: 'center',padding:'1px' }" 
+            :header-cell-style="headStyle"
+            @sort-change="changeTableSort"
+            style="font-size: 10px;margin-top:1%">
+            <el-table-column label="报警信息统计排行">
+            <el-table-column
+              type="index"
+              width="40">
+            </el-table-column>
+            <el-table-column
+              prop="num"
+              label="序号"
+               width="605">
+            </el-table-column>
+            <el-table-column
+              prop="name"
+              label="名称"
+              width="605">
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="frequency"
+              label="频率（次）"
+               width="605">
+            </el-table-column>
+            </el-table-column>        
+       </el-table>
+       <div style="margin-top:1%"> 
+       <div id="chartHistogram" style="width: 100%; height: 250px; margin: auto"></div>
+       </div>
+       </div>
+    </div>
+</template>
+<script>
+import excelHelper from "@/utils/excelHelper";
+import * as echarts from "echarts";
+export default {
+    data() {
+      return {
+        formInline: {
+        windfarm: "",
+        project: "",
+        line: "",
+        },
+        timedate: [
+            // {beginDate:'2021-01-01'},
+            // {endDate:'2021-01-04'}
+        ],
+        currentPage2: 1,
+		pagesize: 10,
+        gridData:[],
+        gridDataChart:[],
+        charFreData:[],
+        charNameData:[],
+        options: [{
+          id: '1',
+          name: '按报警统计'
+        }, {
+          id: '2',
+          name: '按报警分类统计'
+        }, {
+          id: '3',
+          name: '按厂家统计'
+        }],
+        orderByColumn:'',
+        isAsc: '',
+        value: '1',
+      }
+    },
+   
+    created(){
+        this.callThePolicRateData();
+        
+    },
+    methods:{
+        queryApData() {
+            this.callThePolicRateData();
+            this.$nextTick(function() {
+			this.getChartDataImport('chartHistogram')
+		})
+        },
+        
+        headStyle() {
+			return "text-align:center"
+		},
+        
+        changeTableSort(column){
+			this.orderByColumn = column.prop;
+			if(column.order == "descending"){
+				this.isAsc = 'desc';
+			}else if(column.order == "ascending"){
+				this.isAsc = "asc";
+			}
+			this.callThePolicRateData();
+		},
+        callThePolicRateData(){
+            this.charFreData = [];
+            this.charNameData = [];
+            if(this.timedate == ''){
+                this.timedate[0] = '2021-01-01';
+                this.timedate[1] = '2021-01-04';
+                this.beginDate = this.timedate[0];
+                this.endDate = this.timedate[1];
+            }else{
+                this.beginDate = this.timedate[0];
+                this.endDate = this.timedate[1];
+            }
+            var callThePolicRateData = new URLSearchParams();
+            callThePolicRateData.append('pageNum',this.currentPage2);
+			callThePolicRateData.append('pageSize',this.pagesize);
+            callThePolicRateData.append('orderByColumn',this.orderByColumn);
+            callThePolicRateData.append('isAsc',this.isAsc);
+			callThePolicRateData.append('type',this.value);
+			callThePolicRateData.append('beginDate',this.beginDate);
+            callThePolicRateData.append('endDate',this.endDate);
+            this.$http.post('/leaderboard/querywarningStatistical',callThePolicRateData).then((res) => {
+                this.gridData = res.data.data
+            })
+            var callThePolicRateChartData = new URLSearchParams();
+            callThePolicRateChartData.append('type',this.value);
+			callThePolicRateChartData.append('beginDate',this.beginDate);
+            callThePolicRateChartData.append('endDate',this.endDate);
+            this.$http.post('/leaderboard/querywarningStatisticalPie',callThePolicRateChartData).then((res) => {
+                this.gridDataChart = res.data.data
+                for(let i=0;i<this.gridDataChart.length;i++){
+                    this.charFreData.push(this.gridDataChart[i].frequency);
+                    this.charNameData.push(this.gridDataChart[i].name);
+                }
+                console.log(this.charNameData)
+                this.$nextTick(function() {
+			        this.getChartDataImport('chartHistogram')
+		        })
+            })
+           
+            
+        },
+        toExcel(){
+            excelHelper.exportExcel("callthepolicetable","负荷率排行榜",".xls",true);
+        },
+        getChartDataImport(){
+            var charts =echarts.init(document.getElementById("chartHistogram"));
+            let option = {
+                title: {
+                    text: '报警数据统计分析',
+                    left: 'center'
+                },
+                xAxis: {
+                    type: 'category',
+                    data: this.charNameData,
+                    axisLabel: {
+                        interval:0,
+                    }
+
+                },
+                yAxis: {
+                    type: 'value'
+                },
+                series: [{
+                    data: this.charFreData,
+                    type: 'bar'
+                }]
+            };
+            charts.setOption(option);
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+    .box{
+		width: 100%;
+		display: flex;
+		justify-content: space-around;
+ 		align-items: center;
+ 		overflow: hidden;
+	}
+    .searchBar{
+        margin-top: 1%;
+    }
+    .box-card{
+        width: 100%;
+    }
+</style>

src/views/rankingIndex/RankingCurveDeviationRate.vue

@@ -0,0 +1,250 @@
+<template>
+    <div class="box">
+        <div class="searchBar">
+            <el-tabs v-model="activeName" @tab-click="handleClick" type="card">
+                <el-tab-pane label="月曲线偏差率排行榜" name="first" :key="'first'">
+                    <el-card class="box-card">
+                    <div slot="header" class="clearfix" style="font-size:15px">
+                        <span>查询条件</span>
+                    </div>
+                    <el-form :inline="true" :model="formInline" class="demo-form-inline">
+                <el-row :gutter="1">
+                    <el-form-item label="风场">
+                    <el-select v-model="value"  
+                    @change="queryApData()" placeholder="请选择">
+                    <el-option
+                        v-for="item in options"
+                        :key="item.name"
+                        :label="item.name"
+                        :value="item.id"
+                    >
+                    </el-option>
+                    </el-select>
+                    </el-form-item>
+                    <el-form-item label="年份：">
+                        <el-date-picker
+                        v-model="timeyear"
+                        type="year"
+                        placeholder="选择年"
+                        >
+                        </el-date-picker>
+                    </el-form-item>
+                    <el-form-item label="月份：">
+                        <el-date-picker
+                        v-model="timemonth"
+                        type="month"
+                        placeholder="选择月">
+                        </el-date-picker>
+                    </el-form-item>
+                    <el-form-item>
+                    <el-button type="primary" @click="queryApData" :plain="true"
+                        >查询</el-button
+                    >
+                    </el-form-item>
+                    <el-form-item>
+                    <el-button type="primary" @click="toExcel()">导出</el-button>
+                    </el-form-item>
+                </el-row>
+                </el-form>
+                </el-card>
+            </el-tab-pane>
+            <el-tab-pane label="日曲线偏差率排行榜" name="second" :key="'second'">
+                <el-card class="box-card">
+                    <div slot="header" class="clearfix" style="font-size:15px">
+                        <span>查询条件</span>
+                    </div>
+                    <el-form :inline="true" :model="formInline" class="demo-form-inline">
+                <el-row :gutter="1">
+                    <el-form-item label="风场">
+                    <el-select v-model="value"  
+                    @change="queryApData()" placeholder="请选择">
+                    <el-option
+                        v-for="item in options"
+                        :key="item.name"
+                        :label="item.name"
+                        :value="item.id"
+                    >
+                    </el-option>
+                    </el-select>
+                    </el-form-item>
+                    <el-form-item label="选择时间：">
+                        <el-date-picker
+                        value-format="yyyy-MM-dd"
+                        v-model="time"
+                        type="date"
+                        placeholder="选择日期">
+                        </el-date-picker>
+                    </el-form-item>
+
+                    <el-form-item>
+                    <el-button type="primary" @click="queryApData" :plain="true"
+                        >查询</el-button
+                    >
+                    </el-form-item>
+                    <el-form-item>
+                    <el-button type="primary" @click="toExcel()">导出</el-button>
+                    </el-form-item>
+                </el-row>
+                </el-form>
+                </el-card>
+            </el-tab-pane>
+        </el-tabs>
+        <el-table
+            id="devicerattable"
+            :data="gridData"
+            :row-style="{ height: '10px' }" 
+            :cell-style="{ textAlign: 'center',padding:'1px' }" 
+            :header-cell-style="headStyle"
+            @sort-change="changeTableSort"
+            style="font-size: 10px;margin-top:1%">
+            <el-table-column :label=title>
+            <el-table-column
+              type="index"
+              width="40">
+            </el-table-column>
+            <el-table-column
+              prop="windturbineid"
+              label="风机"
+               width="260">
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="monthdeviationrate"
+              label="实际/保证(%)"
+              width="260">
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="standarddeviationrate"   
+              label="实际/量优(%)"
+              width="260">
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="yeardeviationrate"
+              label="实际/保证(%)"
+              width="260">
+            </el-table-column>
+            <el-table-column
+              prop="deviationrate1"
+              label="环比"
+               width="260">
+            </el-table-column>
+            <el-table-column
+              prop="deviationrate2"
+              label="同比"
+               width="260">
+            </el-table-column>
+            <el-table-column
+              prop="deviationrate3"
+              label="比标杆风机"
+               width="260">
+            </el-table-column>
+            </el-table-column>        
+       </el-table>
+        </div>
+    </div>
+</template>
+<script>
+import excelHelper from "@/utils/excelHelper";
+export default {
+    data(){
+        return {
+            formInline: {
+                windfarm: "",
+                project: "",
+                line: "",
+            },
+            activeName: 'first',
+            information:'first',
+            value:'MHS_FDC',
+            value2:'',
+            options: [],
+            time:'2021-01-01',
+            timemonth:'1',
+            timeyear:'2021',
+            title:'月曲线偏差率排行榜',
+            daymonth:'',
+            dayyear:'',
+            currentPage2: 1,
+		    pagesize: 10,
+            orderByColumn:'',
+            isAsc: '',
+            gridData:[],
+            
+        }
+    },
+    created(){
+        this.DeviceRatData();
+    },
+    methods:{
+        queryApData() {
+             this.DeviceRatData();
+        },
+        headStyle() {
+			return "text-align:center"
+		},
+        handleClick(tab) {
+            // console.log(tab.name)
+            this.information = tab.name;
+            this.DeviceRatData();
+        },
+        changeTableSort(column){
+			this.orderByColumn = column.prop;
+			if(column.order == "descending"){
+				this.isAsc = 'desc';
+			}else if(column.order == "ascending"){
+				this.isAsc = "asc";
+			}
+			this.DeviceRatData();
+		},
+        DeviceRatData(){
+            this.$http.get('/powercompare/windfarmAjax').then((res) => {
+                this.options = res.data.data;
+            })
+            var deviceRatData = new URLSearchParams();
+            if(this.information == 'first'){
+                this.title = '月曲线偏差率排行榜';
+                deviceRatData.append('pageNum',this.currentPage2);
+                deviceRatData.append('pageSize',this.pagesize);
+                deviceRatData.append('orderByColumn',this.orderByColumn);
+                deviceRatData.append('isAsc',this.isAsc);
+                deviceRatData.append('wpId',this.value);
+                deviceRatData.append('year',this.timeyear);
+                deviceRatData.append('month',this.timemonth);
+                this.$http.post("/leaderboard/curvefittingmonthmainList",deviceRatData).then((res) => {
+                    this.gridData = res.data.data;
+                    // console.log(res)
+                })
+            }else if(this.information == 'second'){
+                this.title = '日曲线偏差率排行榜';
+                deviceRatData.append('pageNum',this.currentPage2);
+                deviceRatData.append('pageSize',this.pagesize);
+                deviceRatData.append('orderByColumn',this.orderByColumn);
+                deviceRatData.append('isAsc',this.isAsc);
+                deviceRatData.append('wpId',this.value);
+                deviceRatData.append('recorddate',this.time);
+                this.$http.post("/leaderboard/curvefittingmainList",deviceRatData).then((res) =>{
+                    this.gridData = res.data.data;
+                    console.log(res)
+                })
+            }
+        },
+        toExcel(){
+            excelHelper.exportExcel("devicerattable","负荷率排行榜",".xls",true);
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+    .box{
+		width: 100%;
+		display: flex;
+		justify-content: space-around;
+ 		align-items: center;
+ 		overflow: hidden;
+	}
+    .searchBar{
+        margin-top: 1%;
+    }
+</style>

src/views/rankingIndex/RankingLoadRate.vue

@@ -0,0 +1,233 @@
+<template>
+    <div class="box">
+        <div class="searchBar">
+            <el-card class="box-card">
+                <div slot="header" class="clearfix" style="font-size:15px">
+                    <span>查询条件</span>
+                </div>
+                <el-form :inline="true" :model="formInline" class="demo-form-inline">
+            <el-row :gutter="1">
+                <el-form-item label="类型">
+                <el-select v-model="value"  placeholder="请选择">
+                <el-option
+                    v-for="item in options"
+                    :key="item.label"
+                    :label="item.label"
+                    :value="item.value">
+                </el-option>
+                </el-select>
+                </el-form-item>
+                <el-form-item label="风场">
+                <el-select v-model="value2"  
+                @change="queryApData()" placeholder="请选择">
+                <el-option
+                    v-for="item in options2"
+                    :key="item.name"
+                    :label="item.name"
+                    :value="item.id"
+                >
+                </el-option>
+                </el-select>
+                </el-form-item>
+                <el-form-item label="选择时间：">
+                <el-date-picker
+                    v-model="timedate"
+                    value-format="yyyy-MM-dd"
+                    type="daterange"
+                    range-separator="至"
+                    start-placeholder="开始日期"
+                    end-placeholder="结束日期"
+                    format="yyyy-MM-dd"
+                >
+                </el-date-picker>
+                </el-form-item>
+
+                <el-form-item>
+                <el-button type="primary" @click="queryApData" :plain="true"
+                    >查询</el-button
+                >
+                </el-form-item>
+                <el-form-item>
+                <el-button type="primary" @click="toExcel()">导出</el-button>
+                </el-form-item>
+            </el-row>
+            </el-form>
+            </el-card>
+            <el-table
+            id="loadratetable"
+            :data="gridData"
+            :row-style="{ height: '10px' }" 
+            :cell-style="{ textAlign: 'center',padding:'1px' }" 
+            :header-cell-style="headStyle"
+            @sort-change="changeTableSort"
+            style="font-size: 10px;margin-top:1%">
+            <el-table-column label="负荷率排行榜">
+            <el-table-column
+              type="index"
+              width="40">
+            </el-table-column>
+            <el-table-column
+              prop="windfarm"
+              label="风场"
+               width="260">
+            </el-table-column>
+            <el-table-column
+              prop="windturbine"
+              label="风机"
+              width="260">
+            </el-table-column>
+            <el-table-column
+              label="起始日期"
+               width="260">
+            <template slot-scope="scope">
+                {{scope.row.beginDate  | formatDate}}
+            </template>
+            </el-table-column>
+            <el-table-column
+              label="截至日期"
+               width="260">
+            <template slot-scope="scope">
+                {{scope.row.endDate  | formatDate}}
+            </template>
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="speed"
+              label="平均风速"
+               width="260">
+            <template slot-scope="scope">
+              <span>{{scope.row.speed | rounding}}</span>
+            </template>
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="power"
+              label="平均功率"
+               width="260">
+            <template slot-scope="scope">
+              <span>{{scope.row.power | rounding}}</span>
+            </template>
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="generatingCapacity"
+              label="平均效率"
+               width="260">
+            </el-table-column>
+            </el-table-column>        
+       </el-table>
+        </div>
+    </div>
+</template>
+<script>
+import {formatDate} from '../../utils/fomatDate';
+import excelHelper from "@/utils/excelHelper";
+export default {
+    data() {
+      return {
+        formInline: {
+        windfarm: "",
+        project: "",
+        line: "",
+        },
+        timedate: [
+            // {beginDate:'2021-01-01'},
+            // {endDate:'2021-01-04'}
+        ],
+        currentPage2: 1,
+		pagesize: 10,
+        gridData:[],
+        options: [{
+          value: 'fc',
+          label: '风场'
+        }, {
+          value: 'gf',
+          label: '光伏'
+        }],
+        options2: [],
+        orderByColumn:'',
+        isAsc: '',
+        value: '风场',
+        value2: 'MHS_FDC'
+      }
+    },
+    filters: {　
+　　 　//方法一: yyyy-MM-dd hh:mm
+        formatDate(time) {
+            let date = new Date(time)
+            // console.log(new Date(time))
+            return formatDate(date, 'yyyy-MM-dd')
+        },
+        rounding (value) {
+            return value.toFixed(2)
+        }
+    },
+    created(){
+        this.loadRateData();
+    },
+    methods:{
+        queryApData() {
+            this.loadRateData();
+        },
+        
+        headStyle() {
+			return "text-align:center"
+		},
+        
+        changeTableSort(column){
+			this.orderByColumn = column.prop;
+			if(column.order == "descending"){
+				this.isAsc = 'desc';
+			}else if(column.order == "ascending"){
+				this.isAsc = "asc";
+			}
+			this.loadRateData();
+		},
+        loadRateData(){
+            let that = this;
+            this.$http.get('/powercompare/windfarmAjax').then((res) => {
+                that.options2 = res.data.data;
+            })
+            if(this.timedate == ''){
+                this.timedate[0] = '2021-01-01';
+                this.timedate[1] = '2021-01-04';
+                this.beginDate = this.timedate[0];
+                this.endDate = this.timedate[1];
+            }else{
+                this.beginDate = this.timedate[0];
+                this.endDate = this.timedate[1];
+            }
+            var loadRateData = new URLSearchParams();
+            loadRateData.append('pageNum',this.currentPage2);
+			loadRateData.append('pageSize',this.pagesize);
+            loadRateData.append('orderByColumn',this.orderByColumn);
+            loadRateData.append('isAsc',this.isAsc);
+			loadRateData.append('wpId',this.value2);
+			loadRateData.append('beginDate',this.beginDate);
+            loadRateData.append('endDate',this.endDate);
+            this.$http.post('/leaderboard/loadfactortoplist',loadRateData).then((res) => {
+                this.gridData = res.data.data
+                console.log(this.gridData)
+            })
+        },
+        toExcel(){
+            excelHelper.exportExcel("loadratetable","曲线偏差率排行榜",".xls",true);
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+    .box{
+		width: 100%;
+		display: flex;
+		justify-content: space-around;
+ 		align-items: center;
+ 		overflow: hidden;
+	}
+    .searchBar{
+        margin-top: 1%;
+    }
+    .box-card{
+        width: 100%;
+    }
+</style>

src/views/rankingIndex/RankingUtilization.vue

@@ -0,0 +1,214 @@
+<template>
+    <div class="box">
+        <div class="searchBar">
+            <el-card class="box-card">
+                <div slot="header" class="clearfix" style="font-size:15px">
+                    <span>查询条件</span>
+                </div>
+                <el-form :inline="true" :model="formInline" class="demo-form-inline">
+            <el-row :gutter="1">
+                <el-form-item label="类型">
+                <el-select v-model="value"  placeholder="请选择">
+                <el-option
+                    v-for="item in options"
+                    :key="item.label"
+                    :label="item.label"
+                    :value="item.value">
+                </el-option>
+                </el-select>
+                </el-form-item>
+                <el-form-item label="风场">
+                <el-select v-model="value2"  
+                 placeholder="请选择">
+                <el-option
+                    v-for="item in options2"
+                    :key="item.name"
+                    :label="item.name"
+                    :value="item.id"
+                >
+                </el-option>
+                </el-select>
+                </el-form-item>
+                <el-form-item label="选择时间：">
+                <el-date-picker
+                    v-model="timedate"
+                    value-format="yyyy-MM-dd"
+                    type="daterange"
+                    range-separator="至"
+                    start-placeholder="开始日期"
+                    end-placeholder="结束日期"
+                    format="yyyy-MM-dd"
+                >
+                </el-date-picker>
+                </el-form-item>
+
+                <el-form-item>
+                <el-button type="primary" @click="queryApData" :plain="true"
+                    >查询</el-button
+                >
+                </el-form-item>
+                <el-form-item>
+                <el-button type="primary" @click="toExcel()">导出</el-button>
+                </el-form-item>
+            </el-row>
+            </el-form>
+            </el-card>
+            <el-table
+            id="loadratetable"
+            :data="gridData"
+            :row-style="{ height: '10px' }" 
+            :cell-style="{ textAlign: 'center',padding:'1px' }" 
+            :header-cell-style="headStyle"
+            @sort-change="changeTableSort"
+            style="font-size: 10px;margin-top:1%">
+            <el-table-column label="利用率排行榜">
+            <el-table-column
+              type="index"
+              width="40">
+            </el-table-column>
+            <el-table-column
+              prop="windturbineid"
+              label="名称"
+               width="460">
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="daydl2"
+              label="实际发电量(万KW)"
+               width="460">
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="daylldl"
+              label="理论发电量(万KW)"
+               width="460">
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="dayspeed"
+              label="风能利用率(%)"
+               width="460">
+            </el-table-column>
+            </el-table-column>        
+       </el-table>
+        </div>
+    </div>
+</template>
+<script>
+import {formatDate} from '../../utils/fomatDate';
+import excelHelper from "@/utils/excelHelper";
+export default {
+    data() {
+      return {
+        formInline: {
+        windfarm: "",
+        project: "",
+        line: "",
+        },
+        timedate: [
+            // {beginDate:'2021-01-01'},
+            // {endDate:'2021-01-04'}
+        ],
+        currentPage2: 1,
+		pagesize: 10,
+        gridData:[],
+        options: [{
+          value: '0',
+          label: '风场'
+        }, {
+          value: '1',
+          label: '项目'
+        },{
+          value: '2',
+          label: '线路'
+        },{
+          value: '3',
+          label: '风机'
+        }],
+        options2: [],
+        orderByColumn:'',
+        isAsc: '',
+        value: '0',
+        value2: ''
+      }
+    },
+    filters: {　
+　　 　//方法一: yyyy-MM-dd hh:mm
+        formatDate(time) {
+            let date = new Date(time)
+            // console.log(new Date(time))
+            return formatDate(date, 'yyyy-MM-dd')
+        },
+        rounding (value) {
+            return value.toFixed(2)
+        }
+    },
+    created(){
+        this.UtilizationRateData();
+    },
+    methods:{
+        queryApData() {
+            this.UtilizationRateData();
+        },
+        
+        headStyle() {
+			return "text-align:center"
+		},
+        
+        changeTableSort(column){
+			this.orderByColumn = column.prop;
+			if(column.order == "descending"){
+				this.isAsc = 'desc';
+			}else if(column.order == "ascending"){
+				this.isAsc = "asc";
+			}
+			this.UtilizationRateData();
+		},
+        UtilizationRateData(){
+            let that = this;
+            this.$http.get('/powercompare/windfarmAjax').then((res) => {
+                that.options2 = res.data.data;
+            })
+            if(this.timedate == ''){
+                this.timedate[0] = '2021-01-01';
+                this.timedate[1] = '2021-01-04';
+                this.beginDate = this.timedate[0];
+                this.endDate = this.timedate[1];
+            }else{
+                this.beginDate = this.timedate[0];
+                this.endDate = this.timedate[1];
+            }
+            var utilizationRateData = new URLSearchParams();
+            utilizationRateData.append('pageNum',this.currentPage2);
+			utilizationRateData.append('pageSize',this.pagesize);
+            utilizationRateData.append('orderByColumn',this.orderByColumn);
+            utilizationRateData.append('isAsc',this.isAsc);
+			utilizationRateData.append('wpId',this.value2);
+			utilizationRateData.append('beginDate',this.beginDate);
+            utilizationRateData.append('endDate',this.endDate);
+            utilizationRateData.append('type',this.value);
+            this.$http.post('/leaderboard/utilizationList',utilizationRateData).then((res) => {
+                this.gridData = res.data.data
+            })
+        },
+        toExcel(){
+            excelHelper.exportExcel("loadratetable","曲线偏差率排行榜",".xls",true);
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+    .box{
+		width: 100%;
+		display: flex;
+		justify-content: space-around;
+ 		align-items: center;
+ 		overflow: hidden;
+	}
+    .searchBar{
+        margin-top: 1%;
+    }
+    .box-card{
+        width: 100%;
+    }
+</style>

src/views/rankingIndex/SingleMachinePower.vue

@@ -0,0 +1,566 @@
+<template>
+    <div class="box">
+        <div class="searchBar">
+            <el-tabs v-model="activeName" @tab-click="handleClick" type="card">
+                <el-tab-pane label="总功率情况" name="first" :key="'first'">
+                    <el-card class="box-card">
+                    <div slot="header" class="clearfix" style="font-size:15px;height:10px">
+                        <span>查询条件</span>
+                    </div>
+                    <el-form :inline="true" :model="formInline" class="demo-form-inline" style="height:30px">
+                <el-row :gutter="1">
+                    <el-form-item label="风电电场：">
+                    <el-select v-model="value"  
+                    @change="queryApData()" placeholder="请选择">
+                    <el-option
+                        v-for="item in options"
+                        :key="item.name"
+                        :label="item.name"
+                        :value="item.id"
+                    >
+                    </el-option>
+                    </el-select>
+                    </el-form-item>
+                    <el-form-item label="风机：">
+                    <el-select v-model="value2"  
+                    @change="queryApData()" placeholder="请选择">
+                    <el-option
+                        v-for="item in options2"
+                        :key="item.name"
+                        :label="item.name"
+                        :value="item.id"
+                    >
+                    </el-option>
+                    </el-select>
+                    </el-form-item>
+                    <el-form-item>
+                    <el-button type="primary" @click="queryApData" :plain="true"
+                        >查询</el-button
+                    >
+                    </el-form-item>
+                    <el-form-item>
+                    <el-button type="primary" @click="toExcel()">导出</el-button>
+                    </el-form-item>
+                </el-row>
+                </el-form>
+                </el-card>
+            </el-tab-pane>
+            <el-tab-pane label="月功率情况" name="second" :key="'second'">
+                <el-card class="box-card">
+                    <div slot="header" class="clearfix" style="font-size:15px;height:10px">
+                        <span>查询条件</span>
+                    </div>
+                    <el-form :inline="true" :model="formInline" class="demo-form-inline" style="height:30px">
+                <el-row :gutter="1">
+                    <el-form-item label="风场">
+                    <el-select v-model="value"  
+                    @change="queryApData()" placeholder="请选择">
+                    <el-option
+                        v-for="item in options"
+                        :key="item.name"
+                        :label="item.name"
+                        :value="item.id"
+                    >
+                    </el-option>
+                    </el-select>
+                    </el-form-item>
+                    <el-form-item label="风机：">
+                    <el-select v-model="value2"  
+                    @change="queryApData()" placeholder="请选择">
+                    <el-option
+                        v-for="item in options2"
+                        :key="item.name"
+                        :label="item.name"
+                        :value="item.id"
+                    >
+                    </el-option>
+                    </el-select>
+                    </el-form-item>
+                    <el-form-item label="年份：">
+                        <el-date-picker
+                        v-model="timeyear"
+                        
+                        type="year"
+                        placeholder="选择年"
+                        >
+                        </el-date-picker>
+                    </el-form-item>
+                    <el-form-item label="月份：">
+                        <el-date-picker
+                        v-model="timemonth"
+                        type="month"
+                        placeholder="选择月">
+                        </el-date-picker>
+                    </el-form-item>
+
+                    <el-form-item>
+                    <el-button type="primary" @click="queryApData" :plain="true"
+                        >查询</el-button
+                    >
+                    </el-form-item>
+                    <el-form-item>
+                    <el-button type="primary" @click="toExcel()">导出</el-button>
+                    </el-form-item>
+                </el-row>
+                </el-form>
+                </el-card>
+            </el-tab-pane>
+            <el-tab-pane label="日功率情况" name="cord" :key="'cord'">
+                <el-card class="box-card">
+                    <div slot="header" class="clearfix" style="font-size:15px;height:10px">
+                        <span>查询条件</span>
+                    </div>
+                    <el-form :inline="true" :model="formInline" class="demo-form-inline" style="height:30px">
+                <el-row :gutter="1">
+                    <el-form-item label="风场">
+                    <el-select v-model="value"  
+                    @change="queryApData()" placeholder="请选择">
+                    <el-option
+                        v-for="item in options"
+                        :key="item.name"
+                        :label="item.name"
+                        :value="item.id"
+                    >
+                    </el-option>
+                    </el-select>
+                    </el-form-item>
+                    <el-form-item label="风机：">
+                    <el-select v-model="value2"  
+                    @change="queryApData()" placeholder="请选择">
+                    <el-option
+                        v-for="item in options2"
+                        :key="item.name"
+                        :label="item.name"
+                        :value="item.id"
+                    >
+                    </el-option>
+                    </el-select>
+                    </el-form-item>
+                    <el-form-item label="选择时间：">
+                        <el-date-picker
+                        v-model="time"
+                        type="date"
+                        placeholder="选择日期">
+                        </el-date-picker>
+                    </el-form-item>
+
+                    <el-form-item>
+                    <el-button type="primary" @click="queryApData" :plain="true"
+                        >查询</el-button
+                    >
+                    </el-form-item>
+                    <el-form-item>
+                    <el-button type="primary" @click="toExcel()">导出</el-button>
+                    </el-form-item>
+                </el-row>
+                </el-form>
+                </el-card>
+            </el-tab-pane>
+        </el-tabs>
+        <el-table v-if="switchtableall"
+            id="singlemachinepower"
+            :data="gridData"
+            :row-style="{ height: '10px' }" 
+            :cell-style="{ textAlign: 'center',padding:'1px' }" 
+            :header-cell-style="headStyle"
+            @sort-change="changeTableSort"
+            style="font-size: 10px;margin-top:0.5%">
+            <el-table-column :label=title>
+            <el-table-column
+              type="index"
+              width="40">
+            </el-table-column>
+            <el-table-column
+              prop="windturbineid"
+              label="风机"
+               width="480">
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="speed"
+              label="风速"
+              width="480">
+            </el-table-column>
+            <el-table-column
+              prop="actualpower"   
+              label="实际拟合功率"
+              width="480">
+            </el-table-column>
+            <el-table-column
+              prop="optimalpower"
+              label="最优拟合功率"
+              width="480">
+            </el-table-column>
+            </el-table-column>        
+       </el-table>
+       <el-table v-if="switchtableday"
+            id="singlemachinepower"
+            :data="gridData"
+            :row-style="{ height: '10px' }" 
+            :cell-style="{ textAlign: 'center',padding:'1px' }" 
+            :header-cell-style="headStyle"
+            @sort-change="changeTableSort"
+            style="font-size: 10px;margin-top:0.5%">
+            <el-table-column :label=title>
+            <el-table-column
+              type="index"
+              width="40">
+            </el-table-column>
+            <el-table-column
+              prop="windturbineid"
+              label="风机"
+               width="380">
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="speed"
+              label="风速"
+              width="380">
+            </el-table-column>
+            <el-table-column
+              prop="actualpower"   
+              label="实际拟合功率"
+              width="380">
+            </el-table-column>
+            <el-table-column
+              prop="optimalpower"
+              label="最优拟合功率"
+              width="380">
+            </el-table-column>
+            <el-table-column
+                    prop="address"
+                    label="操作"
+                    width="380">
+                    <template slot-scope="scope">
+                        <el-button size="mini"  @click="handleEdit(scope.$index, scope.row)">修改</el-button>
+                    </template>
+                </el-table-column>
+            </el-table-column>        
+       </el-table>
+          <el-table v-if="switchtablemonth"
+            id="singlemachinepower" 
+            :data="gridData"
+            :row-style="{ height: '10px' }" 
+            :cell-style="{ textAlign: 'center',padding:'1px' }" 
+            :header-cell-style="headStyle"
+            @sort-change="changeTableSort"
+            style="font-size: 10px;margin-top:0.5%">
+            <el-table-column :label=title>
+            <el-table-column
+              type="index"
+              width="40">
+            </el-table-column>
+            <el-table-column
+              prop="windturbineid"
+              label="风机"
+               width="380">
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="speed"
+              label="风速"
+              width="380">
+            </el-table-column>
+            <el-table-column
+              prop="actualpower"   
+              label="实际拟合功率"
+              width="380">
+            </el-table-column>
+            <el-table-column
+              prop="optimalpower"
+              label="最优拟合功率"
+              width="380">
+            </el-table-column>
+            <el-table-column
+                    prop="address"
+                    label="操作"
+                    width="380">
+                    <template slot-scope="scope">
+                        <el-button size="mini"  @click="handleEdit(scope.$index, scope.row)">修改</el-button>
+                    </template>
+                </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-sizes="[10, 50, 100, 1000]"
+				:page-size="pagesize" layout="sizes, prev, pager, next" :total="1000">
+			</el-pagination>
+		</div>
+        <div id="leiDaTu" class="echart"></div>
+        </div>
+    </div>
+</template>
+<script>
+import excelHelper from "@/utils/excelHelper";
+export default {
+    data(){
+        return {
+            formInline: {
+                windfarm: "",
+                project: "",
+                line: "",
+            },
+            activeName: 'first',
+            information:'first',
+            value:'MHS_FDC',
+            value2:'MG01_01',
+            options: [],
+            options2:[],
+            time:'2021-01-01',
+            timemonth:'1',
+            timeyear:'2021',
+            title:'月曲线偏差率排行榜',
+            daymonth:'',
+            dayyear:'',
+            currentPage2: 1,
+		    pagesize: 10,
+            orderByColumn:'',
+            isAsc: '',
+            gridData:[],
+            gridDataChart:[],
+            gridDataChartX:[],
+            gridDataChartYsjnh:[],
+            gridDataChartYzynh:[],
+            gridDataChartYbzgl:[],
+            switchtableall:true,
+            switchtableday:false,
+            switchtablemonth:false,
+            
+        }
+    },
+    created(){
+        this.singleMachinePower();
+    },
+    methods:{
+        queryApData() {
+             this.singleMachinePower();
+        },
+        handleSizeChange(val) {
+			console.log(`每页 ${val} 条`);
+			this.pagesize = val;
+            this.singleMachinePower();
+		},
+        handleCurrentChange(val) {
+			// console.log(`当前页: ${val}`);
+            this.singleMachinePower();
+		},
+        headStyle() {
+			return "text-align:center"
+		},
+        handleClick(tab) {
+            // console.log(tab.name)
+            this.information = tab.name;
+            this.singleMachinePower();
+        },
+        changeTableSort(column){
+			this.orderByColumn = column.prop;
+			if(column.order == "descending"){
+				this.isAsc = 'desc';
+			}else if(column.order == "ascending"){
+				this.isAsc = "asc";
+			}
+			this.singleMachinePower();
+		},
+        singleMachinePower(){
+            this.gridDataChartX = [];
+            this.gridDataChartYsjnh = [];
+            this.gridDataChartYzynh = [];
+            this.gridDataChartYbzgl = [];
+            this.$http.get('/powercompare/windfarmAjax').then((res) => {
+                this.options = res.data.data;
+            })
+            this.$http.get('/powercompare/windturbineAjax?wpId=' + this.value).then((res) => {
+                this.options2 = res.data.data;
+            })
+            var singleMachinePowerData = new URLSearchParams();
+            var singleMachinePowerDataChart = new URLSearchParams();
+            if(this.information == 'first'){
+                this.title = '单机总功率信息列表';
+                this.switchtableall = true;
+                this.switchtableday = false;
+                this.switchtablemonth = false;
+                singleMachinePowerData.append('pageNum',this.currentPage2);
+                singleMachinePowerData.append('pageSize',this.pagesize);
+                singleMachinePowerData.append('orderByColumn',this.orderByColumn);
+                singleMachinePowerData.append('isAsc',this.isAsc);
+                singleMachinePowerData.append('wtId',this.value2);
+                this.$http.post("/powersaturation/powersaturationamonutlist",singleMachinePowerData).then((res) => {
+                    this.gridData = res.data.data.list;
+                })
+                singleMachinePowerDataChart.append('wtId',this.value2);
+                this.$http.post("/powersaturation/powersaturationamonutchart",singleMachinePowerDataChart).then((res) => {
+                    this.gridDataChart = res.data.data;
+                     for(let i=0;i<this.gridDataChart.length;i++){
+                        this.gridDataChartX.push(this.gridDataChart[i].value1);
+                        this.gridDataChartYsjnh.push(this.gridDataChart[i].value2);
+                        this.gridDataChartYzynh.push(this.gridDataChart[i].value3);
+                        this.gridDataChartYbzgl.push(this.gridDataChart[i].value4);
+                    }
+                    this.$nextTick(function() {
+                        this.drawPie('leiDaTu')
+                    })
+                })
+            }else if(this.information == 'second'){
+                this.title = '单机月功率信息列表';
+                this.switchtableall = false;
+                this.switchtableday = true;
+                this.switchtablemonth = false;
+                singleMachinePowerData.append('pageNum',this.currentPage2);
+                singleMachinePowerData.append('pageSize',this.pagesize);
+                singleMachinePowerData.append('orderByColumn',this.orderByColumn);
+                singleMachinePowerData.append('isAsc',this.isAsc);
+                singleMachinePowerData.append('wtId',this.value2);
+                singleMachinePowerData.append('year',this.timeyear);
+                singleMachinePowerData.append('month',this.timemonth);
+                this.$http.post("/powersaturation/powersaturationmonthlist",singleMachinePowerData).then((res) =>{
+                    this.gridData = res.data.data.list;
+                })
+                singleMachinePowerDataChart.append('wtId',this.value2);
+                singleMachinePowerDataChart.append('year',this.timeyear);
+                singleMachinePowerDataChart.append('month',this.timemonth);
+                this.$http.post("/powersaturation/powersaturationmonthchart",singleMachinePowerDataChart).then((res) => {
+                    this.gridDataChart = res.data.data;
+                     for(let i=0;i<this.gridDataChart.length;i++){
+                        this.gridDataChartX.push(this.gridDataChart[i].value1);
+                        this.gridDataChartYsjnh.push(this.gridDataChart[i].value2);
+                        this.gridDataChartYzynh.push(this.gridDataChart[i].value3);
+                        this.gridDataChartYbzgl.push(this.gridDataChart[i].value4);
+                    }
+                    console.log(this.gridDataChart)
+                    this.$nextTick(function() {
+                        this.drawPie('leiDaTu')
+                    })
+                })
+            }else if(this.information == 'cord'){
+                this.title = '单机日功率信息列表';
+                this.switchtableall = false;
+                this.switchtableday = false;
+                this.switchtablemonth = true;
+                singleMachinePowerData.append('pageNum',this.currentPage2);
+                singleMachinePowerData.append('pageSize',this.pagesize);
+                singleMachinePowerData.append('orderByColumn',this.orderByColumn);
+                singleMachinePowerData.append('isAsc',this.isAsc);
+                singleMachinePowerData.append('wtId',this.value2);
+                singleMachinePowerData.append('recorddate',this.time);
+                this.$http.post("/powersaturation/powersaturationlist",singleMachinePowerData).then((res) =>{
+                    this.gridData = res.data.data.list;
+                })
+                singleMachinePowerDataChart.append('wtId',this.value2);
+                singleMachinePowerDataChart.append('recorddate',this.time);
+                this.$http.post("/powersaturation/powersaturationchart",singleMachinePowerDataChart).then((res) => {
+                    this.gridDataChart = res.data.data;
+                     for(let i=0;i<this.gridDataChart.length;i++){
+                        this.gridDataChartX.push(this.gridDataChart[i].value1);
+                        this.gridDataChartYsjnh.push(this.gridDataChart[i].value2);
+                        this.gridDataChartYzynh.push(this.gridDataChart[i].value3);
+                        this.gridDataChartYbzgl.push(this.gridDataChart[i].value4);
+                    }
+                    this.$nextTick(function() {
+                        this.drawPie('leiDaTu')
+                    })
+                })
+            }
+        },
+        toExcel(){
+            excelHelper.exportExcel("singlemachinepower","负荷率排行榜",".xls",true);
+        },
+        drawPie() {
+				var charts;
+				if (charts != null && charts != "" && charts != undefined){
+				    charts.dispose();
+				}
+				charts= this.$echarts.init(document.getElementById('leiDaTu'));
+				let option = {
+					title: {
+                        left: 'center',
+                        text: '功率曲线'
+                    },
+                    tooltip: {
+                        trigger: 'axis'
+                    },
+                    legend: {
+                        data: ['实际拟合功率', '最优拟合功率', '保证功率'],
+                        x: 'right',
+                        
+                    },
+                    grid: {
+                        left: '3%',
+                        right: '4%',
+                        bottom: '1%',
+                        containLabel: true
+                    },
+                    xAxis: {
+                        type: 'category',
+                        boundaryGap: false,
+                        data: this.gridDataChartX
+                    },
+                    yAxis: {
+                        type: 'value',
+                        name:'功率(KW)',
+                        nameLocation :'center',
+                        nameTextStyle: {
+                            padding: [0, 0, 30, 0]    // 四个数字分别为上右下左与原位置距离
+                        },
+                        max: 2000,
+                        axisLabel:{
+                            formatter: function (value) {
+                            var texts = [];
+                                if (value < 1000) {
+                                    value = value / 1000;
+                                    texts.push(value+'k');
+                                }
+                                if (value >= 1000) {
+                                    value = value / 1000;
+                                    texts.push(value+'k');
+                                }
+                                return texts;
+                            }
+                        },
+                    },
+                    series: [
+                        {
+                            name: '实际拟合功率',
+                            type: 'line',
+                            stack: '总量',
+                            data: this.gridDataChartYsjnh
+                        },
+                        {
+                            name: '最优拟合功率',
+                            type: 'line',
+                            stack: '总量',
+                            data: this.gridDataChartYzynh
+                        },
+                        {
+                            name: '保证功率',
+                            type: 'line',
+                            stack: '总量',
+                            data: this.gridDataChartYbzgl
+                        },
+                    ]
+				}
+				charts.clear();
+				charts.setOption(option);
+				
+			},
+    }
+}
+</script>
+<style lang="scss" scoped>
+    .box{
+		width: 100%;
+		display: flex;
+		justify-content: space-around;
+ 		align-items: center;
+ 		overflow: hidden;
+	}
+    .searchBar{
+        margin-top: 1%;
+    }
+    #leiDaTu {
+		margin-left: 5%;
+		height: 200px;
+		width: 90%;
+		float: left;
+	}
+</style>