3-7

src/App.vue

@@ -26,12 +26,24 @@
           <el-submenu index="3">
             <template slot="title">性能分析</template>
             <el-menu-item index="/gradeEvaluation">等级评估</el-menu-item>
+            <el-submenu index="3-1">
+              <template slot="title">单机性能分析</template>
+              <el-menu-item index="/individual_Saturation">单机饱和度</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-submenu>
           </el-submenu>
           <el-submenu index="4">
-             <template slot="title">对标管理</template>
+            <template slot="title">对标管理</template>
             <el-submenu index="2-4">
               <template slot="title">风机绩效</template>
-              <el-menu-item index="/performanceList_fan">风机绩效榜单</el-menu-item>
+              <el-menu-item index="/performanceList_fan"
+                >风机绩效榜单</el-menu-item
+              >
             </el-submenu>
             <el-submenu index="2-5">
               <template slot="title">损失对标</template>
@@ -40,16 +52,20 @@
             <el-submenu index="2-6">
               <template slot="title">场际对标</template>
               <el-menu-item index="/benchmark_Venue">场内对标</el-menu-item>
-              <el-menu-item index="/benchmark_International">场际对标</el-menu-item>
+              <el-menu-item index="/benchmark_International"
+                >场际对标</el-menu-item
+              >
             </el-submenu>
-             <el-submenu index="2-7">
+            <el-submenu index="2-7">
               <template slot="title">项目对标</template>
               <el-menu-item index="/benchmark_project">项目对标</el-menu-item>
             </el-submenu>
             <el-submenu index="2-8">
               <template slot="title">性能对标</template>
               <el-menu-item index="/benchmark_property">性能对标</el-menu-item>
-              <el-menu-item index="/benchmark_SingleTransverse">单机横向对比</el-menu-item>
+              <el-menu-item index="/benchmark_SingleTransverse"
+                >单机横向对比</el-menu-item
+              >
             </el-submenu>
           </el-submenu>
           <el-submenu index="5">
@@ -63,7 +79,9 @@
             <el-menu-item index="7-1">人员矩阵</el-menu-item>
             <el-menu-item index="7-2">全局监视</el-menu-item>
             <el-menu-item index="/point">point</el-menu-item>
-            <el-menu-item index="/FanStatusQueryExport">风机状态查询导出</el-menu-item>
+            <el-menu-item index="/FanStatusQueryExport"
+              >风机状态查询导出</el-menu-item
+            >
           </el-submenu>
           <el-submenu index="8">
             <template slot="title">报表管理</template>

src/router/index.js

@@ -112,6 +112,36 @@ const routes = [{
 		name: 'benchmark_SingleTransverse',
 		component: () => import('../views/PropertyBenchnark/SingleTransverseBenchmark.vue')
 	}
+	,
+	{
+		path: '/GoodnessRank',
+		name: 'GoodnessRank',
+		component: () => import('../views/NormRanking/GoodnessfitRank.vue')
+	}
+	,
+	{
+		path: '/GrossgenerationRank',
+		name: 'GrossgenerationRank',
+		component: () => import('../views/NormRanking/Grossgeneration_Rank.vue')
+	}
+	,
+	{
+		path: '/PercentageLossr_Rank',
+		name: 'PercentageLossr_Rank',
+		component: () => import('../views/NormRanking/PercentageLossrRank.vue')
+	}	
+	,
+	{
+		path: '/individual_Saturation',
+		name: 'individual_Saturation',
+		component: () => import('../views/SinglePerformanceAnalysis/individualSaturation.vue')
+	}
+	,
+	{
+		path: '/power_Editor',
+		name: 'power_Editor',
+		component: () => import('../views/SinglePerformanceAnalysis/powerEditor.vue')
+	}
 ]
 
 const router = new VueRouter({

src/views/BorderBenchmark/InnationBenchmark_particulars.vue

@@ -0,0 +1,900 @@
+<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-select v-model="value2" 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="goReturn">返回</el-button>
+            </el-form-item>
+          </el-row>
+        </el-form>
+        <el-card>
+        <el-table
+            :data="fdcLineData"
+            :row-style="{ height: '10px' }" 
+            :cell-style="{ textAlign: 'center',padding:'1px' }" 
+            :header-cell-style="headStyle"
+            @selection-change="handleSelectionChange"
+            @sort-change="changeTableSort"
+            style="font-size: 10px;margin-bottom:100px;widht:100%"
+            >
+            <el-table-column label="场际对标列表一">
+            <el-table-column
+              fixed
+              type="index"
+              width="45">
+            </el-table-column>
+            <el-table-column
+              type="selection"
+              width=45>
+            </el-table-column>
+            <el-table-column
+              prop="wtId"
+              label="风机名称"
+              width="80">
+            </el-table-column>
+            <el-table-column
+              sortable
+              :formatter="filter_date"
+              prop="recordDate"
+              label="日期"
+              width="80"
+            >
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="ordernum"
+              label="排名"
+              width="50">
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="scadafdlnum"
+              label="发电量排名"
+               width="70">
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="scadafdl"
+              :formatter="filter_fdl"
+              label="发电量"
+               width="70">
+            </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="70">
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="xdss"
+              label="限电损失"
+               width="70">
+            <template slot-scope="scope">
+              <span>{{scope.row.xdss | rounding}}</span>
+            </template>
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="slssnum"
+              label="受累排名"
+               width="70">
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="slss"
+              label="受累损失"
+               width="70">
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="fnlyl"
+              label="风能利用率"
+               width="70">
+            </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="81">
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="slsslnum"
+              label="受累损失率排名"
+               width="81">
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="slssl"
+              label="受累损失率"
+               width="81">
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="fwjsl"
+              label="复位及时率"
+               width="81">
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="xqjsl"
+              label="消缺及时率"
+               width="81">
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="ztzhjsl"
+              label="状态转换率"
+               width="81">
+            </el-table-column>
+            </el-table-column>
+        </el-table>
+        </el-card>
+
+        <el-card>
+        <el-table
+            :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;margin-bottom:100px;widht:100%"
+            v-if="tb2"
+            >
+            <el-table-column label="场际对标列表二">
+            <el-table-column
+              fixed
+              type="index"
+              width="45">
+            </el-table-column>
+            <el-table-column
+              type="selection"
+              width=45>
+            </el-table-column>
+            <el-table-column
+              prop="wtId"
+              label="风机名称"
+              width="80">
+            </el-table-column>
+            <el-table-column
+              sortable
+              :formatter="filter_date"
+              prop="recordDate"
+              label="日期"
+              width="80"
+            >
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="ordernum"
+              label="排名"
+              width="50">
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="scadafdlnum"
+              label="发电量排名"
+               width="70">
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="scadafdl"
+              :formatter="filter_fdl"
+              label="发电量"
+               width="70">
+            </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="70">
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="xdss"
+              label="限电损失"
+               width="70">
+            <template slot-scope="scope">
+              <span>{{scope.row.xdss | rounding}}</span>
+            </template>
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="slssnum"
+              label="受累排名"
+               width="70">
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="slss"
+              label="受累损失"
+               width="70">
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="fnlyl"
+              label="风能利用率"
+               width="70">
+            </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="81">
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="slsslnum"
+              label="受累损失率排名"
+               width="81">
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="slssl"
+              label="受累损失率"
+               width="81">
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="fwjsl"
+              label="复位及时率"
+               width="81">
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="xqjsl"
+              label="消缺及时率"
+               width="81">
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="ztzhjsl"
+              label="状态转换率"
+               width="81">
+            </el-table-column>
+            </el-table-column>
+        </el-table>
+        </el-card>
+        <el-dialog class="el-dialog_body" width="60%" title="对标信息分析" :visible.sync="dialogTableVisible" append-to-body>
+							<div class="margin">
+								<div class="dialogLeftData">
+									<div id="leiDaTu3" class="echart"></div>
+                  <div id="leiDaTu4" 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>
+    </div>
+</template>
+<script>
+import formateDate from "@/utils/date";
+export default {
+    data(){
+        return{
+            tb2:false,
+            formInline: {
+                windfarm: "",
+                project: "",
+                line: "",
+            },
+            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 弄'
+            }],
+            options: [{
+                value: 'MHS_FDC',
+                label: '麻黄山风电场'
+                }, {
+                value: 'NSS_FDC',
+                label: '牛首山风电场'
+                },
+                {
+                value: 'SBQ_FDC',
+                label: '石板泉风电场'
+                },
+                {
+                value: 'QS_FDC',
+                label: '青山风电场'
+                },
+                {
+                value: 'XS_FDC',
+                label: '香山风电场'
+                }],
+            value: '',
+            value2:'',
+            timedate: [],
+            multipleSelection:[],
+            multipleSelection1:[],
+            multipleSelection2:[],
+            orderByColumn:'',
+            isAsc:'asc',
+            fdcLineData:'',
+            fdcLineData2:'',
+            currentPage2: 1,
+            pagesize: 10,
+            wpId:'',
+            beginDate:'',
+            endDate:'',
+            dialogTableVisible:false,
+            sortInOrder:[],
+            sortInOrderTop:[],
+            fdcName1:'',
+            fdcName2:'',
+            sortInOrde2:[],
+            getTableData:[],
+            fdcND:[],
+            fdcND1:'',
+            fdcND2:'',
+        }
+    },
+    filters: {
+      rounding (value) {
+      return value.toFixed(2)
+      }
+    },
+    created(){
+        this.YardTableData();
+    },
+    methods:{
+        queryApData() {
+            this.YardTableData();
+            if(this.value2 != null || this.value2 != undefined){
+                this.tb2 = true;
+            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 guilty = new URLSearchParams();
+            guilty.append('pageNum',this.currentPage2);
+            guilty.append('pageSize',this.pagesize);
+            guilty.append('orderByColumn',this.orderByColumn);
+            guilty.append('isAsc',this.isAsc);
+            guilty.append('wpId',this.value2);
+            guilty.append('beginDate',this.beginDate);
+            guilty.append('endDate',this.endDate);
+          this.$http.post('/contrast/benchmarkWpInWtList',guilty).then((res) => {
+            this.fdcLineData2 = res.data.data;
+          })
+            }
+        },
+        queryApDataMx() {
+           this.dialogTableVisible = true;
+           if(this.multipleSelection1.length+this.multipleSelection2.length==2){
+               this.multipleSelection = this.multipleSelection1.concat(this.multipleSelection2);
+           }else{
+               this.$message.error("请选两个风场！");
+               return;
+           }
+          if(this.multipleSelection.length==2){
+              this.fdcName1 = this.multipleSelection[0].wtName;
+              this.fdcName2 = this.multipleSelection[1].wtName;
+              this.fdcND1 = this.multipleSelection[0].wtName+""+formateDate(new Date(this.multipleSelection[0].recordDate) / 1000);
+              this.fdcND2 = this.multipleSelection[1].wtName+""+formateDate(new Date(this.multipleSelection[1].recordDate) / 1000);
+              this.fdcND.push(this.fdcND1,this.fdcND2);
+              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].wtName,'限电损失电量单位:万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].scadafdl,data2:this.multipleSelection[1].scadafdl});
+              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});        
+            } 
+           this.$nextTick(function() {
+              this.drawPie('leiDaTu3')
+           })
+           this.$nextTick(function() {
+              this.drawPie2('leiDaTu4')
+           })
+        },
+        filter_fdl(cellValue){
+             return parseFloat(cellValue.scadafdl).toFixed(2);
+    },
+        YardTableData(){
+            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 guilty = new URLSearchParams();
+            guilty.append('pageNum',this.currentPage2);
+            guilty.append('pageSize',this.pagesize);
+            guilty.append('orderByColumn',this.orderByColumn);
+            guilty.append('isAsc',this.isAsc);
+            if(this.value == ''){
+              guilty.append('wpId',this.wpId);
+            }else{
+              guilty.append('wpId',this.value);
+            }
+            guilty.append('beginDate',this.beginDate);
+            guilty.append('endDate',this.endDate);
+          this.$http.post('/contrast/benchmarkWpInWtList',guilty).then((res) => {
+            this.fdcLineData = 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;
+          if(column.order == "descending"){
+            this.isAsc = 'desc';
+          }else if(column.order == "ascending"){
+            this.isAsc = "asc";
+          }
+          this.YardTableData();
+        },
+        filter_date(cellValue) {
+            let date = new Date(cellValue.recordDate);
+            return formateDate(date/1000);
+    },
+        drawPie() {
+            var charts;
+            if (charts != null && charts != "" && charts != undefined){
+                charts.dispose();
+            }
+            charts= this.$echarts.init(document.getElementById('leiDaTu3'));
+            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('leiDaTu4'));
+            let option2 = {
+              legend: {
+                  orient: 'vertical',
+                  left: 'right'
+              },
+              tooltip: {},
+              dataset: {
+                  dimensions: ['product', '限电损失电量单位:万KWh', '故障损失电量单位:万KWh', '检修损失电量单位:万KWh', '性能损失电量单位:万KWh', '受累损失电量单位:万KWh'],
+                  source: this.sortInOrde2
+              },
+              xAxis: {type: 'category',date:this.fdcND,axisPointer: {
+                type: 'shadow'
+            }},
+              yAxis: {type: 'category'},
+              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);
+            
+          },
+          goReturn(){
+            this.$router.push('/benchmark_International')
+          },
+          toExcel(){}
+          }
+
+}
+</script>
+<style lang="scss" scoped>
+    .box{
+		width: 100%;
+		justify-content: space-around;
+ 		align-items: center;
+ 		overflow: hidden;
+	}
+  .searchBar{
+    margin-top: 1%;
+  }
+  #leiDaTu3 {
+		margin-left: 5%;
+		height: 300px;
+		width: 100%;
+		float: left;
+	}
+  #leiDaTu4 {
+		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/BorderBenchmark/InternationalBenchmark.vue

@@ -0,0 +1,978 @@
+<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-input
+                v-model="formInline.project"
+                id="project"
+                placeholder="项目"
+                @focus="checkwindfarm"
+              ></el-input>
+            </el-form-item>
+
+            <el-form-item label="线路">
+              <el-input
+                v-model="formInline.line"
+                id="line"
+                placeholder="线路"
+                @focus="checkproject"
+              ></el-input>
+            </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-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"
+      >
+        <el-table-column label="场外对标列表">
+          <el-table-column type="index" width="50"> </el-table-column>
+          <el-table-column
+            type="selection"
+            class="selection"
+            @selection-change="changeFun"
+            width="50"
+          >
+          </el-table-column>
+          <el-table-column sortable prop="ordernum" label="综合排名" width="60">
+          </el-table-column>
+         
+          <el-table-column
+            sortable
+            prop="scadafdlnum"
+            label="发电量排名"
+            width="70"
+          >
+          </el-table-column>
+          <el-table-column sortable prop="fdl" label="发电量" width="90">
+          </el-table-column>
+          <el-table-column
+            sortable
+            prop="gzssnum"
+            label="故障损失电量排名"
+            width="80"
+          >
+          </el-table-column>
+          <el-table-column sortable prop="gzss" label="故障损失电量" width="70">
+          </el-table-column>
+          <el-table-column
+            sortable
+            prop="whssnum"
+            label="检修损失电量排名"
+            width="75"
+          >
+          </el-table-column>
+          <el-table-column sortable prop="whss" label="检修损失电量" width="70">
+          </el-table-column>
+          <el-table-column
+            sortable
+            prop="qfssnum"
+            label="性能损失电量排名"
+            width="75"
+          >
+          </el-table-column>
+          <el-table-column sortable prop="qfss" label="性能损失电量" width="70">
+          </el-table-column>
+          <el-table-column
+            sortable
+            prop="xdssnum"
+            label="限电损失电量排名"
+            width="75"
+          >
+          </el-table-column>
+          <el-table-column sortable prop="xdss" label="限电损失电量" width="70">
+          </el-table-column>
+          <el-table-column
+            sortable
+            prop="slssnum"
+            label="受累损失电量排名"
+            width="75"
+          >
+          </el-table-column>
+          <el-table-column sortable prop="slss" label="受累损失电量" width="70">
+          </el-table-column>
+          <el-table-column
+            sortable
+            prop="fnlylnum"
+            label="风能利用率排名"
+            width="75"
+          >
+          </el-table-column>
+          <el-table-column
+            sortable
+            prop="fnlyl"
+            label="风能利用率(%)"
+            width="80"
+          >
+          </el-table-column>
+          <el-table-column
+            sortable
+            prop="gzsslnum"
+            label="故障损失率排名"
+            width="75"
+          >
+          </el-table-column>
+          <el-table-column
+            sortable
+            prop="gzssl"
+            label="故障损失率(%)"
+            width="75"
+          >
+          </el-table-column>
+          <el-table-column
+            sortable
+            prop="jxsslnum"
+            label="检修损失率排名"
+            width="75"
+          >
+          </el-table-column>
+          <el-table-column
+            sortable
+            prop="jxssl"
+            label="检修损失率(%)"
+            width="75"
+          >
+          </el-table-column>
+          <el-table-column sortable prop="qflnum" label="弃风率排名" width="70">
+          </el-table-column>
+          <el-table-column sortable prop="qfl" label="弃风率(%)" width="65">
+          </el-table-column>
+          <el-table-column
+            sortable
+            prop="xnsslnum"
+            label="性能损失率排名"
+            width="75"
+          >
+          </el-table-column>
+          <el-table-column
+            sortable
+            prop="xnssl"
+            label="性能损失率(%)"
+            width="75"
+          >
+          </el-table-column>
+          <el-table-column
+            sortable
+            prop="slsslnum"
+            label="受累损失率排名"
+            width="75"
+          >
+          </el-table-column>
+          <el-table-column
+            sortable
+            prop="slssl"
+            label="受累损失率(%)"
+            width="75"
+          >
+          </el-table-column>
+          <el-table-column
+            sortable
+            prop="fwjslnum"
+            label="复位及时率排名"
+            width="75"
+          >
+          </el-table-column>
+          <el-table-column
+            sortable
+            prop="fwjsl"
+            label="复位及时率(%)"
+            width="75"
+          >
+          </el-table-column>
+          <el-table-column
+            sortable
+            prop="ztzhjslnum"
+            label="状态转换率排名"
+            width="80"
+          >
+          </el-table-column>
+          <el-table-column
+            sortable
+            prop="ztzhjsl"
+            label="状态转换率(%)"
+            width="75"
+          >
+          </el-table-column>
+          <el-table-column fixed="right" prop="address" label="操作" width="70">
+            <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 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> -->
+
+      <el-row>
+        <el-col :span="12"
+          ><div
+            id="chartPie"
+            style="width: 800px; height: 400px; margin: auto"
+          ></div>
+        </el-col>
+        <el-col :span="12">
+          <div
+            id="chartPieRight"
+            style="width: 800px; height: 400px; margin: auto"
+          ></div
+        ></el-col>
+      </el-row>
+
+      <el-row>
+        <div class="box">
+          <div
+            id="chartHistogram"
+            style="width: 90%; height: 300px; margin: auto"
+          ></div>
+        </div>
+      </el-row>
+    </div>
+  </div>
+</template>
+<script>
+import FiveLossRatesHistogramChart from "../../views/benchMarking/FiveLossRatesHistogramChart.vue";
+import formateDate from "@/utils/date";
+import * as echarts from "echarts";
+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: "",
+      wpId: [],
+      wpName: [],
+      orderByColumn: "",
+      dialogTableVisible: false,
+      lineDataOption: [],
+      getChartDataValue: [],
+      getChartDataValue2: [],
+      getChartData:[]
+    };
+  },
+  components: {
+  },
+  created() {
+    this.FiveLossInformation();
+  },
+  methods: {
+    changeFun(val) {
+      this.selectrowdate = val;
+    },
+    filter_date(cellValue) {
+      let date = new Date(cellValue.recordDate);
+
+      return formateDate(date / 1000);
+    },
+    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: "/NationBenchmark_particulars",
+          query: {
+            wpId: this.wpId,
+            beginDate: this.beginDate,
+            endDate: this.endDate,
+            wpName: this.wpName,
+            select: this.lineDataOption,
+          },
+        });
+      } else {
+        this.lineDataOption.push({ id: b.wpId, name: b.wpName });
+        console.log(this.lineDataOption);
+        this.$router.push({
+          path: "/NationBenchmark_particulars",
+          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];
+      }
+      console.log(this.isAsc);
+      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/benchmarkWpOutList", fiveLossData)
+        .then((res) => {
+          that.gridData = res.data.data;
+          // console.log(that.gridData);
+          that.getPackageData(that.gridData);
+          that.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() {},
+    getPackageData(gridData) {
+      for (let i = 0; i < gridData.length; i++) {
+        this.getChartDataValue.push({
+          value: gridData[i].fdl,
+          name: gridData[i].wpName,
+        });
+        this.getChartDataValue2.push({
+          value: gridData[i].gzss,
+          name: gridData[i].wpName,
+        });
+      }
+      this.getChartDataImport();
+      this.getChartDataValue = [];
+      this.getChartDataValue2 = [];
+    },
+    getChartDataImport() {
+      var charts = echarts.init(document.getElementById("chartPie"));
+      let option = {
+        title: {
+          text: "发电量占比",
+          left: "center",
+        },
+        color: ["#90ED7D", "#F7A35C", "#7CB5EC", "#434348", "#8085E9"],
+        tooltip: {
+          trigger: "item",
+        },
+        legend: {
+          orient: "vertical",
+          left: "left",
+        },
+        series: [
+          {
+            type: "pie",
+            radius: "50%",
+            data: this.getChartDataValue,
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: "rgba(0, 0, 0, 0.5)",
+              },
+            },
+          },
+        ],
+      };
+      charts.setOption(option);
+
+      var charts2 = echarts.init(document.getElementById("chartPieRight"));
+      let option2 = {
+        title: {
+          text: "损失电量占比",
+          left: "center",
+        },
+        color: ["#90ED7D", "#F7A35C", "#7CB5EC", "#434348", "#8085E9"],
+        tooltip: {
+          trigger: "item",
+        },
+        legend: {
+          orient: "vertical",
+          left: "left",
+        },
+        series: [
+          {
+            type: "pie",
+            radius: "50%",
+            data: this.getChartDataValue2,
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: "rgba(0, 0, 0, 0.5)",
+              },
+            },
+          },
+        ],
+      };
+      charts2.setOption(option2);
+    },
+    getPackageData2(gridData){
+            this.getChartData = [];
+            for(let i=0;i<gridData.length;i++){
+                this.getChartData.push({product:gridData[i].wpName,'限电损失电量单位:万KWh':gridData[i].xdss,
+                '故障损失电量单位:万KWh':gridData[i].gzss,'检修损失电量单位:万KWh':gridData[i].jxssl,
+                '性能损失电量单位:万KWh':gridData[i].xnssl,'受累损失电量单位:万KWh':gridData[i].slss})
+            }
+            this.getChartDataImport2();
+        },
+        getChartDataImport2(){
+            var charts =echarts.init(document.getElementById("chartHistogram"));
+            let option = {
+            title: {
+                text: '损失电量分析',
+                left: 'center'
+            },
+            legend: {
+                orient: 'vertical',
+                left: 'right'
+            },
+            tooltip: {},
+            dataset: {
+                 dimensions: ['product', '限电损失电量单位:万KWh', '故障损失电量单位:万KWh', '检修损失电量单位:万KWh', '性能损失电量单位:万KWh', '受累损失电量单位:万KWh'],
+                 source: this.getChartData
+            },
+            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'
+                        }
+                    }
+                },
+                
+            ]
+        };
+        charts.setOption(option);
+        }
+  },
+};
+</script>
+<style lang="scss" scoped>
+.box {
+  width: 100%;
+  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/BorderBenchmark/YardBenchmark.vue

@@ -1,55 +1,898 @@
 <template>
-<el-container>
-  <el-header>Header</el-header>
-  <el-main>Main</el-main>
-  <el-footer>Footer</el-footer>
-</el-container>
+  <el-container>
+    <el-header>
+      <el-card style="margin-top: -10px">
+        <el-row :gutter="1">
+          <el-form :inline="true" class="demo-form-inline">
+            <el-form-item label="风场">
+              <el-select
+                v-model="fc"
+                clearable
+                placeholder="请选择"
+                @change="query_fc()"
+              >
+                <el-option
+                  v-for="item in FClist"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
+
+            <el-form-item label="开始时间">
+              <el-date-picker
+                v-model="beginDate"
+                type="date"
+                placeholder="选择日期"
+              >
+              </el-date-picker>
+            </el-form-item>
+
+            <el-form-item label="结束时间">
+              <el-date-picker
+                v-model="endDate"
+                type="date"
+                placeholder="选择日期"
+              >
+              </el-date-picker>
+            </el-form-item>
+
+            <el-form-item>
+              <el-button
+                type="primary"
+                @click="query_benchmarkWpList"
+                :plain="true"
+                >查询</el-button
+              >
+            </el-form-item>
+
+            <el-form-item>
+              <el-button type="primary" @click="dialog()" :plain="true"
+                >对标分析</el-button
+              >
+            </el-form-item>
+          </el-form>
+        </el-row>
+      </el-card>
+
+      <el-dialog
+        title="对标信息分析"
+        :visible.sync="dialogTableVisible"
+        width="65%"
+      >
+        <el-row>
+          <el-col :span="12">
+            <div id="leidatu" style="width: 600px; height: 350px"></div>
+            <div id="histogram_n" style="width: 600px; height: 350px"></div>
+          </el-col>
+          <el-col :span="12">
+            <el-table :data="getTableData">
+              <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>
+          </el-col>
+        </el-row>
+      </el-dialog>
+    </el-header>
+    <el-main>
+      <el-card style="margin-top: 20px; height: 400px">
+        <el-table
+          ref="multipleTable"
+          :data="tableData"
+          tooltip-effect="dark"
+          style="width: 100%; font-size: 1px"
+          :cell-style="{ textAlign: 'center'}"
+          :header-cell-style="headStyle"
+          max-height="330px"
+          @selection-change="changeFun"
+        >
+          >
+          <el-table-column label="场内对标列表">
+            <el-table-column type="index" width="50"> </el-table-column>
+            <el-table-column
+              type="selection"
+              class="selection"
+              @selection-change="changeFun"
+              width="50"
+            >
+            </el-table-column>
+            <el-table-column
+              sortable
+              prop="ordernum"
+              label="综合排名"
+              width="60"
+            >
+            </el-table-column>
+            <el-table-column
+              sortable
+              :formatter="filter_date"
+              prop="recordDate"
+              label="日期"
+              width="80"
+            >
+            </el-table-column>
+            <el-table-column
+              sortable
+              prop="scadafdlnum"
+              label="发电量排名"
+              width="70"
+            >
+            </el-table-column>
+            <el-table-column sortable prop="fdl" label="发电量" width="70">
+            </el-table-column>
+            <el-table-column
+              sortable
+              prop="gzssnum"
+              label="故障损失电量排名"
+              width="80"
+            >
+            </el-table-column>
+            <el-table-column
+              sortable
+              prop="gzss"
+              label="故障损失电量"
+              width="70"
+            >
+            </el-table-column>
+            <el-table-column
+              sortable
+              prop="whssnum"
+              label="检修损失电量排名"
+              width="75"
+            >
+            </el-table-column>
+            <el-table-column
+              sortable
+              prop="whss"
+              label="检修损失电量"
+              width="70"
+            >
+            </el-table-column>
+            <el-table-column
+              sortable
+              prop="qfssnum"
+              label="性能损失电量排名"
+              width="75"
+            >
+            </el-table-column>
+            <el-table-column
+              sortable
+              prop="qfss"
+              label="性能损失电量"
+              width="70"
+            >
+            </el-table-column>
+            <el-table-column
+              sortable
+              prop="xdssnum"
+              label="限电损失电量排名"
+              width="75"
+            >
+            </el-table-column>
+            <el-table-column
+              sortable
+              prop="xdss"
+              label="限电损失电量"
+              width="70"
+            >
+            </el-table-column>
+            <el-table-column
+              sortable
+              prop="slssnum"
+              label="受累损失电量排名"
+              width="75"
+            >
+            </el-table-column>
+            <el-table-column
+              sortable
+              prop="slss"
+              label="受累损失电量"
+              width="70"
+            >
+            </el-table-column>
+            <el-table-column
+              sortable
+              prop="fnlylnum"
+              label="风能利用率排名"
+              width="75"
+            >
+            </el-table-column>
+            <el-table-column
+              sortable
+              prop="fnlyl"
+              label="风能利用率(%)"
+              width="70"
+            >
+            </el-table-column>
+            <el-table-column
+              sortable
+              prop="gzsslnum"
+              label="故障损失率排名"
+              width="75"
+            >
+            </el-table-column>
+            <el-table-column
+              sortable
+              prop="gzssl"
+              label="故障损失率(%)"
+              width="70"
+            >
+            </el-table-column>
+            <el-table-column
+              sortable
+              prop="jxsslnum"
+              label="检修损失率排名"
+              width="70"
+            >
+            </el-table-column>
+            <el-table-column
+              sortable
+              prop="jxssl"
+              label="检修损失率(%)"
+              width="70"
+            >
+            </el-table-column>
+            <el-table-column
+              sortable
+              prop="qflnum"
+              label="弃风率排名"
+              width="70"
+            >
+            </el-table-column>
+            <el-table-column sortable prop="qfl" label="弃风率(%)" width="65">
+            </el-table-column>
+            <el-table-column
+              sortable
+              prop="xnsslnum"
+              label="性能损失率排名"
+              width="75"
+            >
+            </el-table-column>
+            <el-table-column
+              sortable
+              prop="xnssl"
+              label="性能损失率(%)"
+              width="70"
+            >
+            </el-table-column>
+            <el-table-column
+              sortable
+              prop="slsslnum"
+              label="受累损失率排名"
+              width="70"
+            >
+            </el-table-column>
+            <el-table-column
+              sortable
+              prop="slssl"
+              label="受累损失率(%)"
+              width="70"
+            >
+            </el-table-column>
+            <el-table-column
+              sortable
+              prop="fwjslnum"
+              label="复位及时率排名"
+              width="70"
+            >
+            </el-table-column>
+            <el-table-column
+              sortable
+              prop="fwjsl"
+              label="复位及时率(%)"
+              width="70"
+            >
+            </el-table-column>
+            <el-table-column
+              sortable
+              prop="ztzhjslnum"
+              label="状态转换率排名"
+              width="70"
+            >
+            </el-table-column>
+            <el-table-column
+              sortable
+              prop="ztzhjsl"
+              label="状态转换率(%)"
+              width="70"
+            >
+            </el-table-column>
+            <el-table-column
+              fixed="right"
+              prop="address"
+              label="操作"
+               width="70">
+               <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-card>
+    
+      <el-row
+        style="
+          width: 100%;
+          height: 400px;
+          display: flex;
+          justify-content: space-between;
+        "
+      >
+          <div id="histogram" style="width: 80%; height: 300px"></div>
+        
+      </el-row>
+    </el-main>
+  </el-container>
 </template>
 <script>
+import * as echarts from "echarts";
+import formateDate from "@/utils/date";
 export default {
-    data(){
+  data() {
+    return {
+      FClist: {
+        name: "",
+        id: "",
+      },
+      fdcName1:'',
+      fdcName2:'',
+      date1: "2021-01-01",
+      date2: "2020-01-03",
+      wp_n_1: {},
+      wp_n_2: {},
+      selectrowdate: {},
+      histogram: {
+        date: [],
+        xdss: [],
+        gzss: [],
+        jxss: [],
+        xnss: [],
+        slss: [],
+      },
+      wpId:[],
+      wpName:[],
+      lineDataOption:[],
+      beginDate: "2021-01-01",
+      endDate: "2021-01-21",
+      fc: "MHS_FDC",
+      tableData: [],
+      dialogTableVisible: false,
+      getChartDataValue: [],
+      getChartDataValue2: [],
+      getTableData: [],
+      gridData: [
+        {
+          date: "2016-05-02",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          date: "2016-05-04",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          date: "2016-05-01",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          date: "2016-05-03",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+      ],
+    };
+  },
+  methods: {
+    dialog() {
+      this.dialogTableVisible = true;
+      this.check_wpid();
+      this.$nextTick(function () {
+        this.drawleidatu();
+        this.drawhistogram_n();
+      });
+    },
+    headStyle() {
+			    return "text-align:center"
+		    },
+    check_wpid() {
+      this.wp_n_1="";
+      this.wp_n_2="";
+      this.fdcName1="";
+      this.fdcName2="";
+      this.getChartDataValue=[];
+      this.getChartDataValue2=[];
+      this.getTableData=[];
+      if (Object.keys(this.selectrowdate).length != 2) {
+        this.alert_jg();
+        return;
+      } else {
+        this.wp_n_1 = this.selectrowdate[0];
+        this.wp_n_2 = this.selectrowdate[1];
+        this.fdcName1 = this.wp_n_1.wpId;
+        this.fdcName2 = this.wp_n_2.wpId;
+        this.getChartDataValue.push(
+          this.wp_n_1.fnlyl,
+          this.wp_n_1.gzssl,
+          this.wp_n_1.jxssl,
+          this.wp_n_1.qfl,
+          this.wp_n_1.xnssl,
+          this.wp_n_1.slssl,
+          this.wp_n_1.fwjsl,
+          this.wp_n_1.ztzhl,
+          this.wp_n_1.xqjsl
+        );
+        this.getChartDataValue2.push(
+          this.wp_n_2.fnlyl,
+          this.wp_n_2.gzssl,
+          this.wp_n_2.jxssl,
+          this.wp_n_2.qfl,
+          this.wp_n_2.xnssl,
+          this.wp_n_2.slssl,
+          this.wp_n_2.fwjsl,
+          this.wp_n_2.ztzhl,
+          this.wp_n_2.xqjsl
+        );
+        this.getTableData.push({
+          index: "发电量",
+          data1: this.wp_n_1.scadafdl,
+          data2: this.wp_n_2.scadafdl,
+        });
+        this.getTableData.push({
+          index: "故障损失电量",
+          data1: this.wp_n_1.gzss,
+          data2: this.wp_n_2.gzss,
+        });
+        this.getTableData.push({
+          index: "检修损失电量",
+          data1: this.wp_n_1.jxssl,
+          data2: this.wp_n_2.jxssl,
+        });
+        this.getTableData.push({
+          index: "性能未达标损失电量",
+          data1: this.wp_n_1.xnsslfraction,
+          data2: this.wp_n_2.xnsslfraction,
+        });
+        this.getTableData.push({
+          index: "受累损失电量",
+          data1: this.wp_n_1.slss,
+          data2: this.wp_n_2.slss,
+        });
+        this.getTableData.push({
+          index: "风能利用率",
+          data1: this.wp_n_1.fnlyl,
+          data2: this.wp_n_2.fnlyl,
+        });
+        this.getTableData.push({
+          index: "故障损失率",
+          data1: this.wp_n_1.gzssl,
+          data2: this.wp_n_2.gzssl,
+        });
+        this.getTableData.push({
+          index: "检修损失率",
+          data1: this.wp_n_1.jxssl,
+          data2: this.wp_n_2.jxssl,
+        });
+        this.getTableData.push({
+          index: "弃风率",
+          data1: this.wp_n_1.qfl,
+          data2: this.wp_n_2.qfl,
+        });
+        this.getTableData.push({
+          index: "性能损失率",
+          data1: this.wp_n_1.xnssl,
+          data2: this.wp_n_2.xnssl,
+        });
+        this.getTableData.push({
+          index: "受累损失率",
+          data1: this.wp_n_1.slssl,
+          data2: this.wp_n_2.slssl,
+        });
+        this.getTableData.push({
+          index: "复位及时率",
+          data1: this.wp_n_1.fwjsl,
+          data2: this.wp_n_2.fwjsl,
+        });
+        this.getTableData.push({
+          index: "消缺及时率",
+          data1: this.wp_n_1.xqjsl,
+          data2: this.wp_n_2.xqjsl,
+        });
+        this.getTableData.push({
+          index: "状态转换率",
+          data1: this.wp_n_1.ztzhjsl,
+          data2: this.wp_n_2.ztzhjsl,
+        });
+      }
+    },
+    changeFun(val) {
+      this.selectrowdate = val;
+    },
+    query_fc() {
+      this.$http.get("powercompare/windfarmAjax?").then((res) => {
+        this.FClist = res.data.data;
+      });
+    },
+    alert_jg() {
+      this.$message({
+        message: "只能选择两条数据",
+        type: "warning",
+      });
+      return;
+    },
+    handleEdit(a,b){
+      this.wpId = [];
+      this.lineDataOption = [];
+      if(this.selectrowdate.length==2){
+        for(let i=0;i<this.selectrowdate.length;i++){
+        this.wpId.push(this.selectrowdate[i].wpId)
+        this.wpName.push(this.selectrowdate[i].wpName)
+        this.lineDataOption.push({id:this.selectrowdate[i].wpId,name:this.selectrowdate[i].wpName})
+        }
+        console.log(this.lineDataOption)
+        this.$router.push({
+          path:'/YardBenchmark_particulars',
+          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:'/YardBenchmark_particulars',
+          query:{wpId:b.wpId,
+                beginDate:this.beginDate,
+                endDate:this.endDate,
+                wpName:b.wpName,
+                select:this.lineDataOption}
+          })
+      }
+    },
+    query_benchmarkWpList() {
+      Object.assign(this.$data.histogram, this.$options.data().histogram);
+      let that = this;
+      var page = new URLSearchParams();
+      page.append("wpId", this.fc);
+      page.append("beginDate", this.beginDate);
+      page.append("endDate", this.endDate);
+      this.$http.post("/contrast/benchmarkWpList", page).then((res) => {
+        this.tableData = res.data.data;
+        console.log(this.tableData+"===");
+        let len = this.tableData.length;
+        for (let i = 0; i < len; i++) {
+          that.histogram.date[i] = formateDate(
+            new Date(res.data.data[i].recordDate) / 1000
+          );
+          if (
+            res.data.data[i].xdss == null ||
+            res.data.data[i].xdss == undefined
+          ) {
+            that.histogram.xdss[i] = 0;
+          } else {
+            that.histogram.xdss[i] = res.data.data[i].xdss;
+          }
+
+          if (
+            res.data.data[i].gzss == null ||
+            res.data.data[i].gzss == undefined
+          ) {
+            that.histogram.gzss[i] = 0;
+          } else {
+            that.histogram.gzss[i] = res.data.data[i].gzss;
+          }
+
+          if (
+            res.data.data[i].jxss == null ||
+            res.data.data[i].jxss == undefined
+          ) {
+            that.histogram.jxss[i] = 0;
+          } else {
+            that.histogram.jxss[i] = res.data.data[i].jxss;
+          }
+
+          if (
+            res.data.data[i].xnss == null ||
+            res.data.data[i].xnss == undefined
+          ) {
+            that.histogram.xnss[i] = 0;
+          } else {
+            that.histogram.xnss[i] = res.data.data[i].xnss;
+          }
 
+          if (
+            res.data.data[i].slss == null ||
+            res.data.data[i].slss == undefined
+          ) {
+            that.histogram.slss[i] = 0;
+          } else {
+            that.histogram.slss[i] = res.data.data[i].slss;
+          }
+        }
+
+        this.drawhistogram();
+      });
     },
-    methods(){
+    filter_date(cellValue) {
+      let date = new Date(cellValue.recordDate);
 
+      return formateDate(date / 1000);
     },
-    mounted(){
+    drawleidatu() {
+      var chartDom = document.getElementById("leidatu");
+      var myChart = echarts.init(chartDom);
+      var option;
+
+      option = {
+        title: {
+          text: "对标排名分析",
+          left: 400,
+          top: -5,
+          textStyle: {
+            fontSize: 13,
+          },
+        },
+        grid: {
+          top: "10%",
+          left: "10%",
+          right: "10%",
+          bottom: "0",
+        },
+        tooltip: {},
+        legend: {
+          orient: "vertical",
+          x: "left", //可设定图例在左、右、居中
+          y: "0", //可设定图例在上、下、居中
+          padding: [0, 50, 0, 0],
+        },
+        radar: {
+          // shape: 'circle',
+          name: {
+            textStyle: {
+              color: "#fff",
+              backgroundColor: "#999",
+              borderRadius: 3,
+              padding: [3, 5],
+            },
+          },
+          indicator: [
+            { name: "风能利用率", max: 100 },
+            { name: "故障损失率", max: 100 },
+            { name: "检修损失率", max: 100 },
+            { name: "弃风率", max: 100 },
+            { name: "性能损失率", max: 100 },
+            { name: "受累损失率", max: 100 },
+            { name: "复位及时率", max: 100 },
+            { name: "状态转换率", max: 100 },
+            { name: "消缺及时率", max: 100 },
+          ],
+        },
+        series: [
+          {
+            name: "预算 vs 开销（Budget vs spending）",
+            type: "radar",
+            // areaStyle: {normal: {}},
+            data: [
+              {
+                value: this.getChartDataValue,
+                name: formateDate(new Date(this.wp_n_1.recordDate) / 1000),
+              },
+              {
+                value: this.getChartDataValue2,
+                name: formateDate(new Date(this.wp_n_2.recordDate) / 1000),
+              },
+            ],
+          },
+        ],
+      };
 
+      option && myChart.setOption(option);
     },
-}
+    drawhistogram_n() {
+      var chartDom = document.getElementById("histogram_n");
+      var myChart = echarts.init(chartDom);
+      var option;
+
+      option = {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            crossStyle: {
+              color: "#999",
+            },
+          },
+        },
+        title: {
+          text: "损失电量分析",
+          left: 100,
+          top: 8,
+          textStyle: {
+            fontSize: 13,
+          },
+        },
+        grid: {
+          top: "90",
+          left: "10%",
+          right: "10%",
+          bottom: "30",
+        },
+        legend: {
+          orient: "vertical",
+          x: "right", //可设定图例在左、右、居中
+          y: 0, //可设定图例在上、下、居中
+          padding: [0, 50, 200, 0],
+          data: [
+            "限电损失电量(单位：万kwh)",
+            "故障损失电量(单位：万kwh)",
+            "检修损失电量(单位：万kwh)",
+            "性能损失电量(单位：万kwh)",
+            "受累损失电量(单位：万kwh)",
+          ],
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: [
+              formateDate(new Date(this.wp_n_1.recordDate) / 1000),
+              formateDate(new Date(this.wp_n_2.recordDate) / 1000),
+            ],
+            axisPointer: {
+              type: "shadow",
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "电量",
+
+            interval: 50,
+            axisLabel: {
+              formatter: "{value} 万kw",
+            },
+          },
+        ],
+        series: [
+          {
+            name: "限电损失电量(单位：万kwh)",
+            type: "bar",
+            yAxisIndex: 0,
+            data: [this.wp_n_1.xdss, this.wp_n_2.xdss],
+          },
+          {
+            name: "故障损失电量(单位：万kwh)",
+            type: "bar",
+            yAxisIndex: 0,
+            data: [this.wp_n_1.zzss, this.wp_n_2.gzss],
+          },
+          {
+            name: "检修损失电量(单位：万kwh)",
+            type: "bar",
+            yAxisIndex: 0,
+            data: [this.wp_n_1.jxss, this.wp_n_2.jxss],
+          },
+          {
+            name: "性能损失电量(单位：万kwh)",
+            type: "bar",
+            yAxisIndex: 0,
+            data: [this.wp_n_1.xnss, this.wp_n_2.xnss],
+          },
+          {
+            name: "受累损失电量(单位：万kwh)",
+            type: "bar",
+            yAxisIndex: 0,
+            data: [this.wp_n_1.slss, this.wp_n_2.slss],
+          },
+        ],
+      };
+
+      option && myChart.setOption(option);
+    },
+    drawhistogram() {
+      var app = {};
+      var chartDom = document.getElementById("histogram");
+
+      var myChart = echarts.init(chartDom);
+      var option;
+
+      option = {
+        title: {
+          text: "损失电量分析",
+        },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+        },
+        legend: {
+          data: [
+            "限电损失电量(单位：万kwh)",
+            "故障损失电量(单位：万kwh)",
+            "检修损失电量(单位：万kwh)",
+            "性能损失电量(单位：万kwh)",
+            "受累损失电量(单位：万kwh)",
+          ],
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        yAxis: {
+          type: "value",
+          boundaryGap: [0, 0.01],
+        },
+        xAxis: {
+          type: "category",
+          data: this.histogram.date,
+        },
+        series: [
+          {
+            name: "限电损失电量(单位：万kwh)",
+            type: "bar",
+            data: this.histogram.xdss,
+          },
+          {
+            name: "故障损失电量(单位：万kwh)",
+            type: "bar",
+            data: this.histogram.gzss,
+          },
+          ,
+          {
+            name: "检修损失电量(单位：万kwh)",
+            type: "bar",
+            data: this.histogram.jxss,
+          },
+          {
+            name: "性能损失电量(单位：万kwh)",
+            type: "bar",
+            data: this.histogram.xnss,
+          },
+          {
+            name: "受累损失电量(单位：万kwh)",
+            type: "bar",
+            data: this.histogram.slss,
+          },
+        ],
+      };
+      option && myChart.setOption(option);
+    },
+  },
+  mounted() {
+    this.query_fc();
+    this.query_benchmarkWpList();
+  },
+};
 </script>
 <style scoped>
- .el-header, .el-footer {
-    background-color: #B3C0D1;
-    color: #333;
-    text-align: center;
-    line-height: 60px;
-  }
-  
-  .el-aside {
-    background-color: #D3DCE6;
-    color: #333;
-    text-align: center;
-    line-height: 200px;
-  }
-  
-  .el-main {
-    background-color: #E9EEF3;
-    color: #333;
-    text-align: center;
-    line-height: 160px;
-  }
-  
-  body > .el-container {
-    margin-bottom: 40px;
-  }
-  
-  .el-container:nth-child(5) .el-aside,
-  .el-container:nth-child(6) .el-aside {
-    line-height: 260px;
-  }
-  
-  .el-container:nth-child(7) .el-aside {
-    line-height: 320px;
-  }
+.bg-purple-dark {
+  background: #fff;
+}
+.grid-content {
+  border-radius: 2px;
+  min-height: 36px;
+  margin-top: -15px;
+}
+.item {
+  margin-top: 10px;
+  margin-right: 40px;
+}
+.el-row {
+  margin: 10px;
+}
 </style>

src/views/BorderBenchmark/YardBenchmark_particulars.vue

@@ -0,0 +1,634 @@
+<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-form-item>
+              <el-button type="primary" @click="goReturn">返回</el-button>
+            </el-form-item>
+          </el-row>
+        </el-form>
+        <el-card>
+        <el-table
+            :data="fdcLineData"
+            :row-style="{ height: '10px' }" 
+            :cell-style="{ textAlign: 'center',padding:'1px' }" 
+            :header-cell-style="headStyle"
+            @selection-change="handleSelectionChange"
+            @sort-change="changeTableSort"
+            style="font-size: 10px;margin-bottom:100px;widht:100%"
+            >
+            <el-table-column label="损失率对标列表">
+            <el-table-column
+              fixed
+              type="index"
+              width="45">
+            </el-table-column>
+            <el-table-column
+              type="selection"
+              width=45>
+            </el-table-column>
+            <el-table-column
+              prop="wtId"
+              label="风机名称"
+              width="80">
+            </el-table-column>
+            <el-table-column
+              sortable
+              :formatter="filter_date"
+              prop="recordDate"
+              label="日期"
+              width="80"
+            >
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="ordernum"
+              label="排名"
+              width="50">
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="scadafdlnum"
+              label="发电量排名"
+               width="70">
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="scadafdl"
+              :formatter="filter_fdl"
+              label="发电量"
+               width="70">
+            </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="70">
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="xdss"
+              label="限电损失"
+               width="70">
+            <template slot-scope="scope">
+              <span>{{scope.row.xdss | rounding}}</span>
+            </template>
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="slssnum"
+              label="受累排名"
+               width="70">
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="slss"
+              label="受累损失"
+               width="70">
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="fnlyl"
+              label="风能利用率"
+               width="70">
+            </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="81">
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="slsslnum"
+              label="受累损失率排名"
+               width="81">
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="slssl"
+              label="受累损失率"
+               width="81">
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="fwjsl"
+              label="复位及时率"
+               width="81">
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="xqjsl"
+              label="消缺及时率"
+               width="81">
+            </el-table-column>
+            <el-table-column
+            :sortable="'custom'"
+              prop="ztzhjsl"
+              label="状态转换率"
+               width="81">
+            </el-table-column>
+            </el-table-column>
+        </el-table>
+        </el-card>
+        <el-dialog class="el-dialog_body" width="60%" title="对标信息分析" :visible.sync="dialogTableVisible" append-to-body>
+							<div class="margin">
+								<div class="dialogLeftData">
+									<div id="leiDaTu3" class="echart"></div>
+                  <div id="leiDaTu4" 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>
+    </div>
+</template>
+<script>
+import formateDate from "@/utils/date";
+export default {
+    data(){
+        return{
+            formInline: {
+                windfarm: "",
+                project: "",
+                line: "",
+            },
+            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 弄'
+            }],
+            options: [{
+                value: 'MHS_FDC',
+                label: '麻黄山风电场'
+                }, {
+                value: 'NSS_FDC',
+                label: '牛首山风电场'
+                },
+                {
+                value: 'SBQ_FDC',
+                label: '石板泉风电场'
+                },
+                {
+                value: 'QS_FDC',
+                label: '青山风电场'
+                },
+                {
+                value: 'XS_FDC',
+                label: '香山风电场'
+                }],
+            value: '',
+            timedate: [],
+            multipleSelection:[],
+            orderByColumn:'',
+            isAsc:'asc',
+            fdcLineData:'',
+            currentPage2: 1,
+            pagesize: 10,
+            wpId:'',
+            beginDate:'',
+            endDate:'',
+            dialogTableVisible:false,
+            sortInOrder:[],
+            sortInOrderTop:[],
+            fdcName1:'',
+            fdcName2:'',
+            sortInOrde2:[],
+            getTableData:[],
+        }
+    },
+    filters: {
+      rounding (value) {
+      return value.toFixed(2)
+      }
+    },
+    created(){
+        this.YardTableData();
+    },
+    methods:{
+        queryApData() {
+            this.YardTableData();
+        },
+        queryApDataMx() {
+           this.dialogTableVisible = true;
+
+          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,
+              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].wtName,'限电损失电量单位:万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].scadafdl,data2:this.multipleSelection[1].scadafdl});
+              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});        
+            } 
+           this.$nextTick(function() {
+              this.drawPie('leiDaTu3')
+           })
+           this.$nextTick(function() {
+              this.drawPie2('leiDaTu4')
+           })
+        },
+        filter_fdl(cellValue){
+             return parseFloat(cellValue.scadafdl).toFixed(2);
+    },
+        YardTableData(){
+            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 guilty = new URLSearchParams();
+            guilty.append('pageNum',this.currentPage2);
+            guilty.append('pageSize',this.pagesize);
+            guilty.append('orderByColumn',this.orderByColumn);
+            guilty.append('isAsc',this.isAsc);
+            if(this.value == ''){
+              guilty.append('wpId',this.wpId);
+            }else{
+              guilty.append('wpId',this.value);
+            }
+            guilty.append('beginDate',this.beginDate);
+            guilty.append('endDate',this.endDate);
+          this.$http.post('/contrast/benchmarkWpInWtList',guilty).then((res) => {
+            this.fdcLineData = res.data.data;
+            console.log(this.fdcLineData+"===");
+          })
+        },
+        headStyle() {
+			    return "text-align:center"
+		    },
+        handleSelectionChange(val) {
+            this.sortInOrder = [];
+            this.sortInOrderTop = [];
+            this.getTableData = [];
+            this.sortInOrde2 = [];
+            this.multipleSelection=[];
+            this.multipleSelection = val;
+                   
+        },
+        changeTableSort(column){
+          this.orderByColumn = column.prop;
+          if(column.order == "descending"){
+            this.isAsc = 'desc';
+          }else if(column.order == "ascending"){
+            this.isAsc = "asc";
+          }
+          this.YardTableData();
+        },
+        filter_date(cellValue) {
+          console.log(cellValue.recordDate);
+            let date = new Date(cellValue.recordDate);
+            return formateDate(date/1000);
+    },
+        drawPie() {
+            var charts;
+            if (charts != null && charts != "" && charts != undefined){
+                charts.dispose();
+            }
+            charts= this.$echarts.init(document.getElementById('leiDaTu3'));
+            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('leiDaTu4'));
+            let option2 = {
+              legend: {
+                  orient: 'vertical',
+                  left: 'right'
+              },
+              tooltip: {},
+              dataset: {
+                  dimensions: ['product', '限电损失电量单位:万KWh', '故障损失电量单位:万KWh', '检修损失电量单位:万KWh', '性能损失电量单位:万KWh', '受累损失电量单位:万KWh'],
+                  source: this.sortInOrde2
+              },
+              xAxis: {type: 'category'},
+              yAxis: {},
+              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);
+            
+          },
+          goReturn(){
+            this.$router.push('/benchmark_Venue')
+          },
+          toExcel(){}
+          }
+
+}
+</script>
+<style lang="scss" scoped>
+    .box{
+		width: 100%;
+		justify-content: space-around;
+ 		align-items: center;
+ 		overflow: hidden;
+	}
+  .searchBar{
+    margin-top: 1%;
+  }
+  #leiDaTu3 {
+		margin-left: 5%;
+		height: 300px;
+		width: 100%;
+		float: left;
+	}
+  #leiDaTu4 {
+		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/NormRanking/GoodnessfitRank.vue

@@ -0,0 +1,293 @@
+<template>
+  <el-container>
+    <el-header>
+      <el-card style="margin-top: -10px">
+        <el-row :gutter="1">
+          <el-form :inline="true" class="demo-form-inline">
+            <el-form-item label="风场">
+              <el-select v-model="fc" clearable placeholder="请选择">
+                <el-option
+                  v-for="item in FClist"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
+
+            <el-form-item label="开始时间">
+              <el-date-picker
+                v-model="beginDate"
+                type="date"
+                placeholder="选择日期"
+              >
+              </el-date-picker>
+            </el-form-item>
+
+            <el-form-item label="结束时间">
+              <el-date-picker
+                v-model="endDate"
+                type="date"
+                placeholder="选择日期"
+              >
+              </el-date-picker>
+            </el-form-item>
+
+            <el-form-item>
+              <el-button type="primary" @click="query_table" :plain="true"
+                >查询</el-button
+              >
+            </el-form-item>
+
+            <el-form-item>
+              <el-button type="primary" :plain="true">导出</el-button>
+            </el-form-item>
+
+            <el-form-item>
+              <el-button type="primary" @click="curveCreation" :plain="true"
+                >生成曲线</el-button
+              >
+            </el-form-item>
+          </el-form>
+        </el-row>
+      </el-card>
+    </el-header>
+
+    <el-main>
+      <el-card style="margin-top: 20px; height: 400px">
+        <el-table
+          :data="tableData"
+          style="width: 100%; font-size: 1px"
+          :cell-style="{ textAlign: 'center' }"
+          :header-cell-style="headStyle"
+          max-height="330px"
+          @selection-change="changeFun"
+        >
+          >
+          <el-table-column label="拟合优度排行榜">
+            <el-table-column type="index" width="80"> </el-table-column>
+            <el-table-column
+              type="selection"
+              class="selection"
+              @selection-change="changeFun"
+              width="190"
+            >
+            </el-table-column>
+            <el-table-column sortable prop="windfarm" label="风场" width="280">
+            </el-table-column>
+            <el-table-column
+              sortable
+              prop="windturbine"
+              label="风机"
+              width="280"
+            >
+            </el-table-column>
+            <el-table-column
+              sortable
+              prop="beginDate"
+              :formatter="filter_bdate"
+              label="起始时间"
+              width="280"
+            >
+            </el-table-column>
+            <el-table-column
+              sortable
+              prop="engDate"
+              :formatter="filter_edate"
+              label="截至日期"
+              width="180"
+            >
+            </el-table-column>
+            <el-table-column
+              :formatter="filter_power"
+              sortable
+              prop="power"
+              label="平均风速"
+              width="280"
+            >
+            </el-table-column>
+            <el-table-column
+              sortable
+              prop="generatingCapacity"
+              :formatter="filter_generatingCapacity"
+              label="拟合优度"
+              width="280"
+            >
+            </el-table-column>
+          </el-table-column>
+        </el-table>
+      </el-card>
+      <el-dialog
+        title="对标信息分析"
+        :visible.sync="dialogTableVisible"
+        width="65%"
+      >
+        <el-row>
+          <div id="histogram" style="width: 100%; height: 500px"></div>
+        </el-row>
+      </el-dialog>
+    </el-main>
+  </el-container>
+</template>
+<script>
+import formateDate from "@/utils/date";
+import * as echarts from "echarts";
+export default {
+  data() {
+    return {
+      FClist: {
+        name: "",
+        id: "",
+      },
+      tableData: [],
+      dialogTableVisible: false,
+      beginDate: "2021-01-01",
+      endDate: "2021-01-03",
+      fc: "MHS_FDC",
+      selectrowdate: {},
+      histogram_Date: [],
+      histogram_sers: [],
+    };
+  },
+  methods: {
+    query_fc() {
+      this.$http.get("powercompare/windfarmAjax?").then((res) => {
+        this.FClist = res.data.data;
+      });
+    },
+    query_table() {
+      this.$http
+        .get(
+          "leaderboard/fittingtoplist?wpIps=" +
+            this.fc +
+            "&pageNum=" +
+            1 +
+            "&pageSize=" +
+            10 +
+            "&orderByColumn=" +
+            "" +
+            "&isAsc=" +
+            "asc" +
+            "&beginDate=" +
+            this.beginDate +
+            "&endDate=" +
+            this.endDate
+        )
+        .then((res) => {
+          this.tableData = res.data.data;
+        });
+    },
+    headStyle() {
+      return "text-align:center";
+    },
+    changeFun(val) {
+      let wt = [];
+      this.histogram_Date = {};
+      this.histogram_sers = [];
+      for (let i = 0; i < Object.keys(val).length; i++) {
+        wt.push(val[i].windturbine);
+      }
+      this.$http
+        .get(
+          "leaderboard/fittingtopchart?wtIds=" +
+            wt +
+            "&beginDate=" +
+            this.beginDate +
+            "&endDate=" +
+            this.endDate
+        )
+        .then((res) => {
+          let that = this;
+          this.histogram_Date = [];
+          let design = [];
+          let h_Date = res.data.data;
+          this.histogram_sers = res.data.data.sers;
+          for (let j = 0; j < Object.keys(this.histogram_sers).length; j++) {
+            let name1 = res.data.data.sers[j];
+            design = h_Date[name1];
+            that.histogram_Date.push({
+              name: name1,
+              stack: "总量",
+              type: "line",
+              data: design,
+            });
+          }
+        });
+    },
+    filter_bdate(cellValue) {
+      let date = new Date(cellValue.beginDate);
+
+      return formateDate(date / 1000);
+    },
+    filter_edate(cellValue) {
+      let date = new Date(cellValue.endDate);
+
+      return formateDate(date / 1000);
+    },
+    filter_generatingCapacity(cellValue) {
+      return parseFloat(cellValue.generatingCapacity).toFixed(2);
+    },
+    filter_power(cellValue) {
+      return parseFloat(cellValue.power).toFixed(2);
+    },
+    curveCreation() {
+      this.dialogTableVisible = true;
+      this.$nextTick(function () {
+        this.drawhistogram();
+      });
+    },
+    drawhistogram() {
+      var myChart;
+
+      if (myChart != null && myChart != "" && myChart != undefined) {
+        myChart.dispose();
+      }
+      myChart= this.$echarts.init(document.getElementById('histogram'));
+
+      var option;
+
+      option = {
+        title: {
+          text: "折线图堆叠",
+        },
+        tooltip: {
+          trigger: "axis",
+        },
+        legend: {
+          data: this.histogram_sers,
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        toolbox: {
+          feature: {
+            saveAsImage: {},
+          },
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,21,22,23,24,25,26],
+        },
+        yAxis: {
+          type: "value",
+        },
+        series: this.histogram_Date,
+      };
+      myChart.clear();
+      option && myChart.setOption(option);
+    },
+  },
+  mounted() {
+    this.query_fc();
+  },
+};
+</script>
+<style scoped>
+</style>
+  
+    

src/views/NormRanking/Grossgeneration_Rank.vue

@@ -0,0 +1,259 @@
+<template>
+  <el-container>
+    <el-header>
+      <el-card style="margin-top: -10px">
+        <el-row :gutter="1">
+          <el-form :inline="true" class="demo-form-inline">
+            <el-form-item label="类型">
+              <el-select
+                v-model="lx"
+                @change="check_lx"
+                clearable
+                placeholder="请选择"
+              >
+                <el-option
+                  v-for="item in lxlist"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
+
+            <el-form-item label="风场">
+              <el-select v-model="fc" clearable placeholder="请选择">
+                <el-option
+                  v-for="item in FClist"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
+
+            <el-form-item label="开始时间">
+              <el-date-picker
+                v-model="beginDate"
+                type="date"
+                placeholder="选择日期"
+              >
+              </el-date-picker>
+            </el-form-item>
+
+            <el-form-item label="结束时间">
+              <el-date-picker
+                v-model="endDate"
+                type="date"
+                placeholder="选择日期"
+              >
+              </el-date-picker>
+            </el-form-item>
+
+            <el-form-item>
+              <el-button type="primary" @click="query_table" :plain="true"
+                >查询</el-button
+              >
+            </el-form-item>
+
+            <el-form-item>
+              <el-button type="primary" @click="toExcel" :plain="true">导出</el-button>
+            </el-form-item>
+          </el-form>
+        </el-row>
+      </el-card>
+
+    </el-header>
+
+    <el-main>
+      <el-card style="margin-top: 20px; height: 666px">
+        <el-table
+        id="tableData"
+          :data="tableData"
+          style="width: 100%; font-size: 1px"
+          :cell-style="{ textAlign: 'center' }"
+          :header-cell-style="headStyle"
+          max-height="666px"
+          @selection-change="changeFun"
+        >
+          >
+          <el-table-column label="总发电量排行榜">
+            <el-table-column type="index" width="80"> </el-table-column>
+            <el-table-column
+              type="selection"
+              class="selection"
+              @selection-change="changeFun"
+              width="190"
+            >
+            </el-table-column>
+            <el-table-column
+              sortable
+              prop="windfarm"
+              label="风场"
+              width="280"
+            >
+            </el-table-column>
+            <el-table-column
+              sortable
+              prop="windturbine"
+              label="风机"
+              width="280"
+            >
+            </el-table-column>
+            <el-table-column
+              sortable
+              prop="beginDate"
+              :formatter="filter_bdate"
+              label="起始时间"
+              width="280"
+            >
+            </el-table-column>
+            <el-table-column sortable prop="endDate" :formatter="filter_edate" label="截至日期" width="180">
+            </el-table-column>
+            <el-table-column
+              sortable
+              prop="speed"
+              :formatter="filter_speed"
+              label="平均风速"
+              width="280"
+            >
+            </el-table-column>
+            <el-table-column
+              sortable
+              prop="power"
+              :formatter="filter_power"
+              label="发电量"
+              width="280"
+            >
+            </el-table-column>
+          </el-table-column>
+        </el-table>
+      </el-card>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import formateDate from "@/utils/date";
+import excelHelper from "@/utils/excelHelper";
+export default {
+  data() {
+    return {
+      FClist: {},
+      GFlist: [
+        { name: "大武口光伏电站", id: "DWK_GDC" },
+        { name: "平罗光伏电站", id: "PL_GDC" },
+        { name: "宣和光伏电站", id: "XH_GDC" },
+        { name: "马场湖光伏电站", id: "MCH_GDC" },
+      ],
+      QBlist: [
+        { name: "大武口光伏电站", id: "DWK_GDC" },
+        { name: "平罗光伏电站", id: "PL_GDC" },
+        { name: "宣和光伏电站", id: "XH_GDC" },
+        { name: "马场湖光伏电站", id: "MCH_GDC" },
+        { name: "青山风电站", id: "QS_FDC" },
+        { name: "香山风电站", id: "XS_FDC" },
+        { name: "麻黄山风电站", id: "MHS_FDC" },
+        { name: "牛首山风电站", id: "NSS_FDC" },
+        { name: "石板泉风电站", id: "SBQ_FDC" },
+      ],
+      lxlist: [
+        {
+          name: "全部",
+          id: "qb",
+        },
+        {
+          name: "风场",
+          id: "fc",
+        },
+        {
+          name: "光伏",
+          id: "gf",
+        },
+      ],
+      tableData: [],
+      beginDate: "2021-01-01",
+      endDate: "2021-01-03",
+      lx: "qb",
+      fc: "",
+      selectrowdate: {},
+    };
+  },
+  methods: {
+    check_lx() {
+        this.fc="";
+      if (this.lx == "fc") {
+          this.FClist={};
+        this.query_fc();
+      } else if (this.lx == "gf") {
+        this.FClist={};
+        this.FClist = this.GFlist;
+      }else if(this.lx=="qb"){
+           this.FClist={};
+          this.FClist = this.QBlist;
+      }
+    },
+    query_fc() {
+      this.$http.get("powercompare/windfarmAjax?").then((res) => {
+        this.FClist = res.data.data;
+      });
+    },
+    query_table() {
+      this.$http
+        .get(
+          "leaderboard/totalPowerCapacityTopList?wpIps=" +
+            this.fc +
+            "&pageNum=" +
+            1 +
+            "&pageSize=" +
+            10 +
+            "&orderByColumn=" +
+            "" +
+            "&isAsc=" +
+            "asc" +
+            "&beginDate=" +
+            this.beginDate +
+            "&endDate=" +
+            this.endDate
+        )
+        .then((res) => {
+          this.tableData = res.data.data;
+          console.log(this.tableData);
+        });
+    },
+    toExcel() {
+      let that = this;
+        excelHelper.exportExcel("tableData", "总发电量排行", ".xls", true);
+    },
+    headStyle() {
+      return "text-align:center";
+    },
+    changeFun(val) {
+      this.selectrowdate = val;
+    },
+    filter_bdate(cellValue) {
+      let date = new Date(cellValue.beginDate);
+
+      return formateDate(date / 1000);
+    },
+    filter_edate(cellValue) {
+      let date = new Date(cellValue.endDate);
+
+      return formateDate(date / 1000);
+    },
+    filter_power(cellValue) {
+      return parseFloat(cellValue.power).toFixed(2);
+    },
+    filter_speed(cellValue) {
+      return parseFloat(cellValue.speed).toFixed(2);
+    },
+  },
+  mounted() {
+    this.check_lx();
+  },
+};
+</script>
+<style scoped>
+
+</style>

src/views/NormRanking/PercentageLossrRank.vue

@@ -0,0 +1,210 @@
+<template>
+  <el-container>
+    <el-header>
+      <el-card style="margin-top: -10px">
+        <el-row :gutter="1">
+          <el-form :inline="true" class="demo-form-inline">
+            <el-form-item label="类型">
+              <el-select
+                v-model="lx"
+                @change="query_table"
+                clearable
+                placeholder="请选择"
+              >
+                <el-option
+                  v-for="item in lxlist"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
+
+            <el-form-item label="风场">
+              <el-select
+                v-model="fc"
+                clearable
+                placeholder="请选择"
+                @change="query_table"
+              >
+                <el-option
+                  v-for="item in FClist"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
+
+            <el-form-item label="开始时间">
+              <el-date-picker
+                v-model="beginDate"
+                type="date"
+                placeholder="选择日期"
+              >
+              </el-date-picker>
+            </el-form-item>
+
+            <el-form-item label="结束时间">
+              <el-date-picker
+                v-model="endDate"
+                type="date"
+                placeholder="选择日期"
+              >
+              </el-date-picker>
+            </el-form-item>
+
+            <el-form-item>
+              <el-button type="primary" @click="query_table" :plain="true"
+                >查询</el-button
+              >
+            </el-form-item>
+
+            <el-form-item>
+              <el-button type="primary" :plain="true">导出</el-button>
+            </el-form-item>
+          </el-form>
+        </el-row>
+      </el-card>
+    </el-header>
+
+    <el-main>
+      <el-card style="margin-top: 20px; height: 400px">
+        <el-table
+          :data="tableData"
+          style="width: 100%; font-size: 1px"
+          :cell-style="{ textAlign: 'center' }"
+          :header-cell-style="headStyle"
+          max-height="330px"
+          @selection-change="changeFun"
+        >
+          >
+          <el-table-column label="损失率排行榜">
+            <el-table-column type="index" width="80"> </el-table-column>
+            <el-table-column
+              type="selection"
+              class="selection"
+              @selection-change="changeFun"
+              width="190"
+            >
+            </el-table-column>
+            <el-table-column sortable prop="windturbineid" label="名称" width="280">
+            </el-table-column>
+            <el-table-column
+              sortable
+              prop="daynhgzssdl2"
+              label="非计划检修损失率(%)"
+              width="280"
+            >
+            </el-table-column>
+            <el-table-column
+              sortable
+              prop="daynhwhssdl2"
+              label="计划检修损失率(%)"
+              width="280"
+            >
+            </el-table-column>
+            <el-table-column sortable prop="daynhxdssdl2" label="弃风率(%)" width="180">
+            </el-table-column>
+            <el-table-column
+              sortable
+              prop="dayspeed"
+              label="受累损失率(%)"
+              width="280"
+            >
+            </el-table-column>
+          </el-table-column>
+        </el-table>
+      </el-card>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      FClist: [
+        { name: "大武口光伏电站", id: "DWK_GDC" },
+        { name: "平罗光伏电站", id: "PL_GDC" },
+        { name: "宣和光伏电站", id: "XH_GDC" },
+        { name: "马场湖光伏电站", id: "MCH_GDC" },
+        { name: "青山风电站", id: "QS_FDC" },
+        { name: "香山风电站", id: "XS_FDC" },
+        { name: "麻黄山风电站", id: "MHS_FDC" },
+        { name: "牛首山风电站", id: "NSS_FDC" },
+        { name: "石板泉风电站", id: "SBQ_FDC" },
+      ],
+      lxlist: [
+        {
+          name: "风场",
+          id: "0",
+        },
+        {
+          name: "项目",
+          id: "1",
+        },
+        {
+          name: "线路",
+          id: "2",
+        },
+        {
+          name: "风机",
+          id: "3",
+        },
+      ],
+      tableData: [],
+      beginDate: "2021-01-01",
+      endDate: "2021-01-03",
+      lx: "0",
+      fc: "",
+      selectrowdate: {},
+    };
+  },
+  methods: {
+    query_fc() {
+      this.$http.get("powercompare/windfarmAjax?").then((res) => {
+        this.FClist = res.data.data;
+      });
+    },
+    query_table() {
+      this.$http
+        .get(
+          "leaderboard/lossList?wpId=" +
+            this.fc +
+            "&pageNum=" +
+            1 +
+            "&pageSize=" +
+            10 +
+            "&orderByColumn=" +
+            "" +
+            "&isAsc=" +
+            "asc" +
+            "&beginDate=" +
+            this.beginDate +
+            "&endDate=" +
+            this.endDate +
+            "&type=" +
+            this.lx
+        )
+        .then((res) => {
+          this.tableData = res.data.data;
+          console.log(this.tableData);
+        });
+    },
+    headStyle() {
+      return "text-align:center";
+    },
+    changeFun(val) {
+      this.selectrowdate = val;
+    },
+  },
+  mounted() {
+    this.query_table();
+  },
+};
+</script>
+<style scoped>
+</style>

src/views/PropertyBenchnark/qxt_nian.vue

@@ -0,0 +1,92 @@
+
+<template>
+  <div
+    id="linechar_n"
+    style="width: 1900px; height: 350px; margin-right: 30px; margin: auto"
+  ></div>
+</template>
+<script>
+import * as echarts from "echarts";
+export default {
+  data() {
+    return {
+      getChartData: [],
+    };
+  },
+  methods: {
+    drawLine_n(lineDate,fj) {
+      var chartDom1 = document.getElementById("linechar_n");
+      var myChart1 = echarts.init(chartDom1);
+      var option1;
+
+      option1 = {
+        title: {
+          text: "月功率曲线",
+        },
+        tooltip: {
+          trigger: "axis",
+        },
+        legend: {
+          data: fj,
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        toolbox: {
+          feature: {
+            saveAsImage: {},
+          },
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+
+          data: lineDate.speed,
+        },
+        yAxis: {
+          type: "value",
+        },
+        series: [
+          {
+            type: "line",
+            stack: "总量",
+            smooth: true,
+            data: lineDate.value1,
+          },
+          {
+            type: "line",
+            stack: "总量",
+            smooth: true,
+            data: lineDate.value2,
+          },
+          {
+            type: "line",
+            stack: "总量",
+            smooth: true,
+            data: lineDate.value3,
+          },
+          {
+            type: "line",
+            stack: "总量",
+            smooth: true,
+            data: lineDate.value4,
+          },
+          {
+            type: "line",
+            stack: "总量",
+            smooth: true,
+            data: lineDate.value5,
+          },
+        ],
+      };
+
+      option1 && myChart1.setOption(option1);
+    },
+  },
+};
+</script>
+  
+

src/views/PropertyBenchnark/qxt_yue.vue

@@ -0,0 +1,92 @@
+
+<template>
+  <div
+    id="linechar_y"
+    style="width: 1900px; height: 350px; margin-right: 30px; margin: auto"
+  ></div>
+</template>
+<script>
+import * as echarts from "echarts";
+export default {
+  data() {
+    return {
+      getChartData: [],
+    };
+  },
+  methods: {
+    drawLine_y(lineDate,fj) {
+      var chartDom1 = document.getElementById("linechar_y");
+      var myChart1 = echarts.init(chartDom1);
+      var option1;
+
+      option1 = {
+        title: {
+          text: "月功率曲线",
+        },
+        tooltip: {
+          trigger: "axis",
+        },
+        legend: {
+          data: fj,
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        toolbox: {
+          feature: {
+            saveAsImage: {},
+          },
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+
+          data: lineDate.speed,
+        },
+        yAxis: {
+          type: "value",
+        },
+        series: [
+          {
+            type: "line",
+            stack: "总量",
+            smooth: true,
+            data: lineDate.value1,
+          },
+          {
+            type: "line",
+            stack: "总量",
+            smooth: true,
+            data: lineDate.value2,
+          },
+          {
+            type: "line",
+            stack: "总量",
+            smooth: true,
+            data: lineDate.value3,
+          },
+          {
+            type: "line",
+            stack: "总量",
+            smooth: true,
+            data: lineDate.value4,
+          },
+          {
+            type: "line",
+            stack: "总量",
+            smooth: true,
+            data: lineDate.value5,
+          },
+        ],
+      };
+
+      option1 && myChart1.setOption(option1);
+    },
+  },
+};
+</script>
+  
+

src/views/SinglePerformanceAnalysis/individualSaturation.vue

@@ -0,0 +1,497 @@
+<template>
+  <el-container>
+    <el-main>
+      <el-tabs
+        label-width="380px"
+        type="border-card"
+        style="height: 100%; width: 100%"
+        v-model="activeName"
+      >
+        <el-tab-pane label="总功率情况" name="first" id="ri">
+          <el-row>
+            <el-card shadow="always">
+              <el-form :inline="true" class="demo-form-inline">
+                <el-col :span="11">
+                  <el-form-item label="风场">
+                    <el-select
+                      v-model="fc"
+                      clearable
+                      placeholder="请选择"
+                      @change="query()"
+                      style="width: 600px"
+                    >
+                      <el-option
+                        v-for="item in FClist"
+                        :key="item.id"
+                        :label="item.name"
+                        :value="item.id"
+                      >
+                      </el-option>
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="11">
+                  <el-form-item label="风机">
+                    <el-select
+                      v-model="fj"
+                      multiple
+                      clearable
+                      placeholder="请选择"
+                      style="width: 600px"
+                      @change="query_table()"
+                    >
+                      <el-option
+                        v-for="item in wtIdslist"
+                        :key="item.id"
+                        :label="item.name"
+                        :value="item.id"
+                      >
+                      </el-option>
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="2"> </el-col>
+              </el-form>
+            </el-card>
+            <el-card>
+              <el-table
+                ref="singleTable"
+                :data="tableData"
+                highlight-current-row
+                style="width: 100%"
+              >
+                <el-table-column label="单机总功率信息列表">
+                  <el-table-column type="index" width="38"> </el-table-column>
+                  <el-table-column property="date" label="风机" width="439">
+                  </el-table-column>
+                  <el-table-column property="name" label="风速" width="439">
+                  </el-table-column>
+                  <el-table-column
+                    property="address"
+                    label="实际拟合功率"
+                    width="450"
+                  >
+                  </el-table-column>
+                  <el-table-column
+                    property="address"
+                    label="最优拟合功率"
+                    width="450"
+                  >
+                  </el-table-column>
+                </el-table-column>
+              </el-table>
+
+              <el-row>
+                <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"
+                  style="margin-left: 33%"
+                >
+                </el-pagination>
+              </el-row>
+            </el-card>
+          </el-row>
+
+          <el-card>
+            <el-row style="margin-bottom: 50px">
+              <div
+                id="linechar"
+                style="
+                  width: 1900px;
+                  height: 350px;
+                  margin-right: 30px;
+                  margin: auto;
+                "
+              ></div>
+            </el-row>
+          </el-card>
+        </el-tab-pane>
+
+        <el-tab-pane label="月功率情况" name="second" id="yue">
+          <el-row>
+            <el-card shadow="always">
+              <el-form :inline="true" class="demo-form-inline">
+                <el-col :span="11">
+                  <el-form-item label="风电电场">
+                    <el-select
+                      v-model="fc"
+                      clearable
+                      placeholder="请选择"
+                      @change="query_yue()"
+                      style="width: 600px"
+                    >
+                      <el-option
+                        v-for="item in FClist"
+                        :key="item.id"
+                        :label="item.name"
+                        :value="item.id"
+                      >
+                      </el-option>
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="11">
+                  <el-form-item label="风机">
+                    <el-select
+                      v-model="fj"
+                      multiple
+                      clearable
+                      placeholder="请选择"
+                      style="width: 600px"
+                      @change="query_table_yue()"
+                    >
+                      <el-option
+                        v-for="item in wtIdslist"
+                        :key="item.id"
+                        :label="item.name"
+                        :value="item.id"
+                      >
+                      </el-option>
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="2"> </el-col>
+              </el-form>
+            </el-card>
+            <el-card>
+              <el-table
+                ref="singleTable"
+                :data="tableData"
+                highlight-current-row
+                style="width: 100%"
+              >
+                <el-table-column label="单机总功率信息列表">
+                  <el-table-column type="index" width="38"> </el-table-column>
+                  <el-table-column property="date" label="风机" width="421">
+                  </el-table-column>
+                  <el-table-column property="name" label="风速" width="421">
+                  </el-table-column>
+                  <el-table-column
+                    property="address"
+                    label="实际拟合功率"
+                    width="421"
+                  >
+                  </el-table-column>
+                  <el-table-column
+                    property="address"
+                    label="最优拟合功率"
+                    width="421"
+                  >
+                  </el-table-column>
+                  <el-table-column property="address" label="操作" width="100">
+                    <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-row>
+                <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"
+                  style="margin-left: 33%"
+                >
+                </el-pagination>
+              </el-row>
+            </el-card>
+          </el-row>
+          <el-card>
+            <el-row style="margin-bottom: 50px">
+              <div
+                id="linechar_yue"
+                style="
+                  width: 1900px;
+                  height: 350px;
+                  margin-right: 30px;
+                  margin: auto;
+                "
+              ></div>
+            </el-row>
+          </el-card>
+        </el-tab-pane>
+
+        <el-tab-pane label="日功率情况" name="thired" id="nian"> </el-tab-pane>
+      </el-tabs>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import formateDate from "@/utils/date";
+import excelHelper from "@/utils/excelHelper";
+import * as echarts from "echarts";
+export default {
+  data() {
+    return {
+      activeName: "first",
+      fc: "MHS_FDC",
+      fj: "MG01_01",
+      currentPage2: 1,
+      pagesize: 10,
+      orderByColumn: "windturbineid",
+      isAsc: "asc",
+      tableData: [],
+      FClist: [
+        { name: "麻黄山风电站", id: "MHS_FDC" },
+        { name: "牛首山风电站", id: "NSS_FDC" },
+        { name: "石板泉风电站", id: "SBQ_FDC" },
+        { name: "青山风电站", id: "QS_FDC" },
+        { name: "香山风电站", id: "XS_FDC" },
+      ],
+      wtIdslist: [
+        {
+          name: "麻黄山一号风机",
+          id: "MG01_01",
+        },
+      ],
+      tableData: [
+        {
+          date: "2016-05-02",
+          name: "王小虎",
+          address: "上海市",
+        },
+        {
+          date: "2016-05-04",
+          name: "王小虎",
+          address: "上海市",
+        },
+        {
+          date: "2016-05-01",
+          name: "王小虎",
+          address: "上海市",
+        },
+        {
+          date: "2016-05-03",
+          name: "王小虎",
+          address: "上海市",
+        },
+      ],
+    };
+  },
+  methods: {
+    query() {
+      let that = this;
+      this.$http
+        .get("powercompare/windturbineAjax?wpId=" + that.fc)
+        .then((res) => {
+          this.wtIdslist = res.data.data;
+        });
+        this.query_table();
+    },
+    query_yue() {
+      let that = this;
+      this.$http
+        .get("powercompare/windturbineAjax?wpId=" + that.fc)
+        .then((res) => {
+          this.wtIdslist = res.data.data;
+        });
+        this.query_table_yue();
+    },
+    query_table() {
+      let that = this;
+      this.tableData = [];
+      var page = new URLSearchParams();
+      page.append("pageNum", this.currentPage2);
+      page.append("pageSize", this.pagesize);
+      page.append("orderByColumn", this.orderByColumn);
+      page.append("isAsc", this.isAsc);
+      page.append("wpId", this.fc);
+      page.append("wtId", this.fj);
+      //   this.$http.post("/benchmarking/gadaylistByPage", page).then((res) => {
+      //     that.tableData = res.data.data;
+      //   });
+      this.draw_linechar();
+    },
+    query_table_yue() {
+      let that = this;
+      this.tableData = [];
+      var page = new URLSearchParams();
+      page.append("pageNum", this.currentPage2);
+      page.append("pageSize", this.pagesize);
+      page.append("orderByColumn", this.orderByColumn);
+      page.append("isAsc", this.isAsc);
+      page.append("wpId", this.fc);
+      page.append("wtId", this.fj);
+      //   this.$http.post("/benchmarking/gadaylistByPage", page).then((res) => {
+      //     that.tableData = res.data.data;
+      //   });
+      this.draw_linechar_yue();
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+      this.pagesize = val;
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    },
+    handleEdit(a, b) {
+      this.$router.push({
+        path: "/power_Editor",
+        query: {
+          data: b,
+        },
+      });
+    },
+    draw_linechar() {
+      var chartDom = document.getElementById("linechar");
+      var myChart = echarts.init(chartDom);
+      var option;
+
+      option = {
+        title: {
+          text: "折线图堆叠",
+        },
+        tooltip: {
+          trigger: "axis",
+        },
+        legend: {
+          data: ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"],
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        toolbox: {
+          feature: {
+            saveAsImage: {},
+          },
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
+        },
+        yAxis: {
+          type: "value",
+        },
+        series: [
+          {
+            name: "邮件营销",
+            type: "line",
+            stack: "总量",
+            data: [120, 132, 101, 134, 90, 230, 210],
+          },
+          {
+            name: "联盟广告",
+            type: "line",
+            stack: "总量",
+            data: [220, 182, 191, 234, 290, 330, 310],
+          },
+          {
+            name: "视频广告",
+            type: "line",
+            stack: "总量",
+            data: [150, 232, 201, 154, 190, 330, 410],
+          },
+          {
+            name: "直接访问",
+            type: "line",
+            stack: "总量",
+            data: [320, 332, 301, 334, 390, 330, 320],
+          },
+          {
+            name: "搜索引擎",
+            type: "line",
+            stack: "总量",
+            data: [820, 932, 901, 934, 1290, 1330, 1320],
+          },
+        ],
+      };
+
+      option && myChart.setOption(option);
+    },
+    draw_linechar_yue() {
+      var chartDom = document.getElementById("linechar_yue");
+      var myChart = echarts.init(chartDom);
+      var option;
+
+      option = {
+        title: {
+          text: "折线图堆叠",
+        },
+        tooltip: {
+          trigger: "axis",
+        },
+        legend: {
+          data: ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"],
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        toolbox: {
+          feature: {
+            saveAsImage: {},
+          },
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
+        },
+        yAxis: {
+          type: "value",
+        },
+        series: [
+          {
+            name: "邮件营销",
+            type: "line",
+            stack: "总量",
+            data: [120, 132, 101, 134, 90, 230, 210],
+          },
+          {
+            name: "联盟广告",
+            type: "line",
+            stack: "总量",
+            data: [220, 182, 191, 234, 290, 330, 310],
+          },
+          {
+            name: "视频广告",
+            type: "line",
+            stack: "总量",
+            data: [150, 232, 201, 154, 190, 330, 410],
+          },
+          {
+            name: "直接访问",
+            type: "line",
+            stack: "总量",
+            data: [320, 332, 301, 334, 390, 330, 320],
+          },
+          {
+            name: "搜索引擎",
+            type: "line",
+            stack: "总量",
+            data: [820, 932, 901, 934, 1290, 1330, 1320],
+          },
+        ],
+      };
+
+      option && myChart.setOption(option);
+    },
+  },
+  mounted() {
+    //this.query();
+    this.draw_linechar();
+  },
+};
+</script>
+<style scoped>
+</style>

src/views/SinglePerformanceAnalysis/powerEditor.vue

@@ -0,0 +1,95 @@
+<template>
+  <el-container>
+    <el-main>
+      <el-form :inline="true" label="right" size="mini"  label-width="300px" :model="formInline" class="demo-form-inline">
+        <el-row>
+            <el-col :span="2"><div class="text">风机编号:</div></el-col>
+          <el-col :span="10"
+            ><div>
+              <el-form-item >
+                <el-input
+                  v-model="formInline.user"
+                  placeholder="风机编号"
+                ></el-input>
+              </el-form-item></div
+          ></el-col>
+         <el-col :span="2"><div class="text">年份:</div></el-col>
+          <el-col :span="10"
+            ><div>
+              <el-form-item >
+                <el-input
+                  v-model="formInline.user"
+                  placeholder="年份"
+                ></el-input>
+              </el-form-item></div
+          ></el-col>
+        </el-row>
+
+         <el-row>
+             <el-col :span="2"><div class="text">月份:</div></el-col>
+          <el-col :span="10"
+            ><div>
+              <el-form-item >
+                <el-input
+                  v-model="formInline.user"
+                  placeholder="月份"
+                ></el-input>
+              </el-form-item></div
+          ></el-col>
+         <el-col :span="2"><div class="text">风速:</div></el-col>
+          <el-col :span="10"
+            ><div>
+              <el-form-item >
+                <el-input
+                  v-model="formInline.user"
+                  placeholder="风速"
+                ></el-input>
+              </el-form-item></div
+          ></el-col>
+        </el-row>
+        
+        <el-row>
+          <el-col :span="2"><div class="text">实际拟合:</div></el-col>
+          <el-col :span="10"
+            ><div>
+              <el-form-item >
+                <el-input
+                  v-model="formInline.user"
+                  placeholder="实际拟合"
+                ></el-input>
+              </el-form-item></div
+          ></el-col>
+         <el-col :span="2"><div class="text">最优拟合:</div></el-col>
+          <el-col :span="10"
+            ><div>
+              <el-form-item>
+                <el-input
+                  v-model="formInline.user"
+                  placeholder="最优拟合"
+                ></el-input>
+              </el-form-item></div
+          ></el-col>
+        </el-row>
+      </el-form>
+    </el-main>
+  </el-container>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      formInline: {
+        user: "",
+        region: "",
+      },
+    };
+  },
+  methods: {},
+};
+</script>
+<style scoped>
+.text {
+margin-top: 8px;
+margin-left: 50%;
+}
+</style>