6-2 清数据 该布局

src/assets/css/performanceAnalysis/singleMachineAnalysis.scss

@@ -1,7 +1,7 @@
 .box{
     width: 100%;
     // display: flex;
-    justify-content: space-around;
+    justify-content:  flex-start;
      align-items: center;
      overflow: hidden;
   }

src/assets/css/performanceAnalysis/singleMachineAnalysisOperation.scss

@@ -1,7 +1,7 @@
 .box{
     width: 100%;
     // display: flex;
-    justify-content: space-around;
+    justify-content:  flex-start;
      align-items: center;
      overflow: hidden;
   }

src/assets/css/performanceAnalysis/singleMachinePower.scss

@@ -1,16 +1,17 @@
 .box{
     width: 100%;
     display: flex;
-    justify-content: space-around;
+    justify-content:  flex-start;
      align-items: center;
      overflow: hidden;
 }
 .searchBar{
     margin-top: 1%;
+    width: 100%;
 }
 #leiDaTu {
     margin-left: 5%;
     height: 200px;
-    width: 90%;
+    width: 95%;
     float: left;
 }

src/assets/css/singlePerformanceAnalysis/individualPandectinformationdetails.scss

@@ -1,3 +1,123 @@
 .el-form-item {
   margin-bottom: 3px;
-}
+}
+#mar-r el-form-item{
+  margin-right: 7px !important;
+}
+.n1{
+  display: flex;
+  flex-direction:column;
+  width: 100%;
+  .n1_on{
+    
+    display: flex;
+    flex-direction:row;
+    width: 100%;
+     
+  }.n1_tw{
+    display: flex;
+    flex-direction:row;
+    width: 100%;
+    height: 239px;
+  }.n1_th{
+    display: flex;
+    flex-direction:row;
+    width: 100%;
+    height: 200px;
+  }
+  .n1_fo{
+    display: flex;
+    flex-direction:row;
+    width: 100%;
+  }
+}
+.n2{
+  display: flex;
+  flex-direction:column;
+  width: 100%;
+  .n2_on{
+    display: flex;
+    flex-direction:row;
+    width: 100%;
+  }
+  .n2_tw{
+    display: flex;
+    flex-direction:row;
+    width: 100%;
+    .n2_tw_z{
+      display: flex;
+    flex-direction:row;
+    width: 50%;
+    height: 200px;
+    }
+    .n2_tw_y{
+    display: flex;
+    flex-direction:column;
+    width: 50%;
+    height: 200px;
+    .n2_tw_y_s{
+      display: flex;
+    flex-direction:row;
+    }
+    .n2_tw_y_x{
+      display: flex;
+    flex-direction:row;
+    }
+    }
+  }
+  .n2_th{
+    display: flex;
+    flex-direction:row;
+    width: 100%;
+    .n2_th_z{
+      display: flex;
+    flex-direction:row;
+    height: 200px;
+    width: 50%;
+    }
+    .n2_th_y{
+      width: 50%;
+      display: flex;
+    flex-direction:column;
+    height: 200px;
+    .n2_th_y_s{
+      display: flex;
+      flex-direction:row;
+    }
+    .n2_th_y_x{
+      display: flex;
+      flex-direction:row;
+
+    }
+    }
+  }
+  .n2_fo{
+    display: flex;
+    flex-direction:row;
+    width: 100%;
+    .n2_fo_l{
+      display: flex;
+    flex-direction:row;
+    width: 28%;
+    }
+    .n2_fo_m{
+      display: flex;
+    flex-direction:column;
+    width: 22%;
+    .n2_fo_m_s{
+      display: flex;
+      flex-direction:row;
+      height: 85px;
+    }.n2_fo_m_x{
+      display: flex;
+      flex-direction:row;
+      height: 190px
+    }
+    }
+    .n2_fo_r{
+      display: flex;
+    flex-direction:row;
+    width: 50%;
+    }
+  }
+}

src/assets/js/performanceAnalysis/singleMachineAnalysis.js

@@ -1,4 +1,3 @@
-// import excelHelper from "@/utils/excelHelper";
 import * as echarts from "echarts";
 export default {
     data() {
@@ -109,7 +108,7 @@ export default {
             })
         },
         toExcel(){
-            excelHelper.exportExcel("callthepolicetable","负荷率排行榜",".xls",true);
+            this.BASE.excelHelp("callthepolicetable","单机组运行指标",".xls",true);
         },
     }
 }

src/assets/js/performanceAnalysis/singleMachinePower.js

@@ -79,12 +79,6 @@ export default {
             this.singleMachinePower();
         },
         singleMachinePower() {
-            this.gridDataChart = [];
-            this.gridDataChartX = [];
-            this.gridDataChartYsjnh = [];
-            this.gridDataChartYzynh = [];
-            this.gridDataChartYbzgl = [];
-
             var singleMachinePowerData = new URLSearchParams();
             var singleMachinePowerDataChart = new URLSearchParams();
             if (this.information == 'first') {
@@ -98,20 +92,28 @@ export default {
                 singleMachinePowerData.append('isAsc', this.isAsc);
                 singleMachinePowerData.append('wtId', this.value2);
                 this.API.post("/powersaturation/powersaturationamonutlist", singleMachinePowerData).then((res) => {
+                    this.gridData = [];
                     this.gridData = res.data.list;
                     this.total = res.data.total;
                 })
                 singleMachinePowerDataChart.append('wtId', this.value2);
+               
                 this.API.post("/powersaturation/powersaturationamonutchart", singleMachinePowerDataChart).then((res) => {
-                    this.gridDataChart = res.data;
-                    for (let i = 0; i < this.gridDataChart.length; i++) {
-                        this.gridDataChartX.push(this.gridDataChart[i].value1);
-                        this.gridDataChartYsjnh.push(this.gridDataChart[i].value2);
-                        this.gridDataChartYzynh.push(this.gridDataChart[i].value3);
-                        this.gridDataChartYbzgl.push(this.gridDataChart[i].value4);
+                   
+                     let  gridDataChart = [];
+                     let gridDataChartX = [];
+                     let gridDataChartYsjnh = [];
+                     let gridDataChartYzynh = [];
+                     let gridDataChartYbzgl = [];
+                     gridDataChart = res.data;
+                    for (let i = 0; i < gridDataChart.length; i++) {
+                        gridDataChartX.push(gridDataChart[i].value1);
+                        gridDataChartYsjnh.push(gridDataChart[i].value2);
+                        gridDataChartYzynh.push(gridDataChart[i].value3);
+                        gridDataChartYbzgl.push(gridDataChart[i].value4);
                     }
                     this.$nextTick(function () {
-                        this.drawPie('leiDaTu')
+                        this.drawPie('leiDaTu',gridDataChartX,gridDataChartYsjnh,gridDataChartYzynh,gridDataChartYbzgl)
                     })
                 })
             } else if (this.information == 'second') {
@@ -150,26 +152,34 @@ export default {
                 console.log(this.timemonth)
                 singleMachinePowerData.append('month', this.timemonth);
                 this.API.post("/powersaturation/powersaturationmonthlist", singleMachinePowerData).then((res) => {
+                    this.gridData = [];
                     this.gridData = res.data.list;
                     this.total = res.data.total;
                 })
                 singleMachinePowerDataChart.append('wtId', this.value2);
                 singleMachinePowerDataChart.append('year', this.timeyear);
                 singleMachinePowerDataChart.append('month', this.timemonth);
+                
                 this.API.post("/powersaturation/powersaturationmonthchart", singleMachinePowerDataChart).then((res) => {
-                    this.gridDataChart = res.data;
-                    for (let i = 0; i < this.gridDataChart.length; i++) {
-                        this.gridDataChartX.push(this.gridDataChart[i].value1);
-                        this.gridDataChartYsjnh.push(this.gridDataChart[i].value2);
-                        this.gridDataChartYzynh.push(this.gridDataChart[i].value3);
-                        this.gridDataChartYbzgl.push(this.gridDataChart[i].value4);
+                    let  gridDataChart = [];
+                     let gridDataChartX = [];
+                     let gridDataChartYsjnh = [];
+                     let gridDataChartYzynh = [];
+                     let gridDataChartYbzgl = [];
+                     gridDataChart = res.data;
+                    for (let i = 0; i < gridDataChart.length; i++) {
+                        gridDataChartX.push(gridDataChart[i].value1);
+                        gridDataChartYsjnh.push(gridDataChart[i].value2);
+                        gridDataChartYzynh.push(gridDataChart[i].value3);
+                        gridDataChartYbzgl.push(gridDataChart[i].value4);
                     }
                     console.log(this.gridDataChart)
                     this.$nextTick(function () {
-                        this.drawPie('leiDaTu')
+                        this.drawPie('leiDaTu',gridDataChartX,gridDataChartYsjnh,gridDataChartYzynh,gridDataChartYbzgl)
                     })
                 })
             } else if (this.information == 'cord') {
+
                 this.title = '单机日功率信息列表';
                 this.switchtableall = false;
                 this.switchtableday = false;
@@ -184,50 +194,57 @@ export default {
                 singleMachinePowerData.append('wtId', this.value2);
                 singleMachinePowerData.append('recorddate', this.time);
                 this.API.post("/powersaturation/powersaturationlist", singleMachinePowerData).then((res) => {
+                    this.gridData = [];
                     this.gridData = res.data.list;
                     this.total = res.data.total;
                 })
                 singleMachinePowerDataChart.append('wtId', this.value2);
                 singleMachinePowerDataChart.append('recorddate', this.time);
+               
                 this.API.post("/powersaturation/powersaturationchart", singleMachinePowerDataChart).then((res) => {
-                    this.gridDataChart = res.data;
-                    for (let i = 0; i < this.gridDataChart.length; i++) {
-                        this.gridDataChartX.push(this.gridDataChart[i].value1);
-                        this.gridDataChartYsjnh.push(this.gridDataChart[i].value2);
-                        this.gridDataChartYzynh.push(this.gridDataChart[i].value3);
-                        this.gridDataChartYbzgl.push(this.gridDataChart[i].value4);
+                     let  gridDataChart = [];
+                     let gridDataChartX = [];
+                     let gridDataChartYsjnh = [];
+                     let gridDataChartYzynh = [];
+                     let gridDataChartYbzgl = [];
+                     gridDataChart = res.data;
+                    for (let i = 0; i < gridDataChart.length; i++) {
+                        gridDataChartX.push(gridDataChart[i].value1);
+                        gridDataChartYsjnh.push(gridDataChart[i].value2);
+                        gridDataChartYzynh.push(gridDataChart[i].value3);
+                        gridDataChartYbzgl.push(gridDataChart[i].value4);
                     }
                     this.$nextTick(function () {
-                        this.drawPie('leiDaTu')
+                        this.drawPie('leiDaTu',gridDataChartX,gridDataChartYsjnh,gridDataChartYzynh,gridDataChartYbzgl)
                     })
                 })
             }
         },
         toExcel() {
-            excelHelper.exportExcel("singlemachinepower", "负荷率排行榜", ".xls", true);
+            this.BASE.excelHelp("singlemachinepower", "单机饱和度", ".xls", true);
         },
-        drawPie() {
-            this.ECLZX.getSingleMachineSaturationChart("leiDaTu",this.gridDataChartX,
-            [
-                {
-                  name: '实际拟合功率',
-                  type: 'line',
-                  stack: '总量',
-                  data: this.gridDataChartYsjnh
-                },
-                {
-                  name: '最优拟合功率',
-                  type: 'line',
-                  stack: '总量',
-                  data: this.gridDataChartYzynh
-                },
-                {
-                  name: '保证功率',
-                  type: 'line',
-                  stack: '总量',
-                  data: this.gridDataChartYbzgl
-                },
-              ],['实际拟合功率', '最优拟合功率', '保证功率']);
+        drawPie(a,s,d,f,g) {
+            this.ECLZX.getSingleMachineSaturationChart("leiDaTu", s,
+                [
+                    {
+                        name: '实际拟合功率',
+                        type: 'line',
+                        stack: '总量',
+                        data: d
+                    },
+                    {
+                        name: '最优拟合功率',
+                        type: 'line',
+                        stack: '总量',
+                        data: f
+                    },
+                    {
+                        name: '保证功率',
+                        type: 'line',
+                        stack: '总量',
+                        data: g
+                    },
+                ], ['实际拟合功率', '最优拟合功率', '保证功率']);
 
         },
     }

src/assets/js/singlePerformanceAnalysis/individualPandectinformation.js

@@ -51,9 +51,9 @@ export default {
         },
       });
     },
-    // toExcel() {
-    //   excelHelper.exportExcel("tableData", "单机信息总览", ".xls", true);
-    // },
+    toExcel() {
+      this.BASE.excelHelp("tableData", "单机信息总览", ".xls", true);
+    },
     query_wpid() {
         this.API.get("powercompare/windfarmAjax?").then((res) => {
         this.wpIdslist = res.data;

src/assets/js/singlePerformanceAnalysis/individualPandectinformationdetails.js

@@ -129,6 +129,9 @@ export default {
     };
   },
   methods: {
+    resize() {
+      this.$router.replace({ path:"/individualPandectinformation" })
+    },
     /**返回 */
     goback() {
       this.$router.push({ path: "/individualPandectinformation" });
@@ -194,23 +197,24 @@ export default {
       });
     },
     query_Data02() {
-      this.gztabledate.sjnh = [];
-      this.gztabledate.zynh = [];
-      this.gztabledate.bzgl = [];
-      this.gztabledate.len = [];
+      let gztabledate = {};
+      gztabledate.sjnh = [];
+      gztabledate.zynh = [];
+      gztabledate.bzgl = [];
+      gztabledate.len = [];
       let that = this;
       var digital = new URLSearchParams();
       digital.append("wtId", this.fj);
       digital.append("recorddate", this.data_01);
       this.API.post("/goodness/glchat", digital).then((res) => {
-        that.linechartdate = res.data;
-        for (let i = 0; i < Object.keys(that.linechartdate).length; i++) {
-          that.gztabledate.sjnh.push(that.linechartdate[i].value2);
-          that.gztabledate.zynh.push(that.linechartdate[i].value3);
-          that.gztabledate.bzgl.push(that.linechartdate[i].value4);
-          that.gztabledate.len.push(i);
+        let lined = res.data;
+        for (let i = 0; i < Object.keys(lined).length; i++) {
+          gztabledate.sjnh.push(lined[i].value2);
+          gztabledate.zynh.push(lined[i].value3);
+          gztabledate.bzgl.push(lined[i].value4);
+          gztabledate.len.push(i);
         }
-        that.drawlinechart();
+        that.drawlinechart(gztabledate);
       });
       this.ybjtable();
     },
@@ -892,11 +896,7 @@ export default {
       // this.pie_data5 = [];
       // this.pie_data6 = [];
       let _this = this;
-
-
-
       let api = [];
-
       for (var i = 0; i < 6; i++) {
         var digital = new URLSearchParams();
         digital.append("wtId", this.fj);
@@ -904,10 +904,8 @@ export default {
         digital.append("type", (i + 1) + "");
         api.push(this.API.post("/goodness/pieChart", digital));
       }
-
       Promise.all(api).then(function (res) {
         res.forEach((item, index) => {
-
           _this.pie_data = [];
           let piedata = [];
           piedata = item.data;
@@ -921,17 +919,6 @@ export default {
         });
       });
       return;
-      this.API.post("/goodness/pieChart", digital).then((res) => {
-        let piedata = [];
-        piedata = res.data;
-        for (let i = 0; i < Object.keys(piedata).length; i++) {
-          this.pie_data.push({
-            value: piedata[i].value1,
-            name: piedata[i].name,
-          });
-        }
-        // this.query_02();
-      });
     },
     handleSizeChange_bj(val) {
       this.pagesize_bj = val;
@@ -1075,7 +1062,7 @@ export default {
 
       option && myChart.setOption(option);
     },
-    drawlinechart() {
+    drawlinechart(gztabledate) {
       var chartDom = document.getElementById("echartline");
       var myChart = echarts.init(chartDom);
       var option;
@@ -1104,7 +1091,7 @@ export default {
         xAxis: {
           type: "category",
           boundaryGap: false,
-          data: this.gztabledate.len,
+          data: gztabledate.len,
         },
         yAxis: {
           type: "value",
@@ -1114,19 +1101,19 @@ export default {
             name: "实际拟合功率",
             type: "line",
             stack: "总量",
-            data: this.gztabledate.sjnh,
+            data: gztabledate.sjnh,
           },
           {
             name: "最优拟合功率",
             type: "line",
             stack: "总量",
-            data: this.gztabledate.zynh,
+            data: gztabledate.zynh,
           },
           {
             name: "保证功率",
             type: "line",
             stack: "总量",
-            data: this.gztabledate.bzgl,
+            data: gztabledate.bzgl,
           },
         ],
       };
@@ -1137,18 +1124,20 @@ export default {
   created() {
     
   },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.resize, true)
+ },
   mounted(){
+    //监听页面缩放
+    window.addEventListener('resize', this.resize, true)
+    //获取数据
     this.fc = this.$route.query.data.windtpowerstationid;
     this.fj = this.$route.query.data.windturbineid;
     this.data_01 = this.BASE.getBzDate(
         new Date(this.$route.query.data.recorddate)
     );
     window.addEventListener("beforeunload", () => {
-      sessionStorage.setItem('fc', JSON.stringify(this.$route.query.data.windtpowerstationid));
-      sessionStorage.setItem('fj', JSON.stringify(this.$route.query.data.windturbineid));
-      sessionStorage.setItem('data_01', JSON.stringify(this.BASE.getBzDate(
-        new Date(this.$route.query.data.recorddate),0
-      )));
+      this.$router.push({ path: "/individualPandectinformation" });
     });
     this.gaindate();
     this.query_cutin_windspeed1();

src/views/performanceAnalysis/singleMachineAnalysis.vue

@@ -48,6 +48,7 @@
             </el-card>
             <div style="font-size:30px;text-align:center;margin-top:1%">{{title}}</div>
             <el-table
+            class="table_sty"
             id="callthepolicetable"
             :data="gridData"
             :row-style="{ height: '10px' }" 
@@ -63,92 +64,77 @@
             </el-table-column>
             <el-table-column
               prop="windturbineName"
-              label="机组编号"
-               width="250">
+              label="机组编号">
             </el-table-column>
             <el-table-column
             :sortable="'custom'"
               prop="fdl"
-              label="实际发电量(万千瓦时)"
-              width="250">
+              label="实际发电量(万千瓦时)">
             </el-table-column>
             <el-table-column
             :sortable="'custom'"
               prop="llfdl"
-              label="理论发电量(万千瓦时)"
-               width="250">
+              label="理论发电量(万千瓦时)">
             </el-table-column>
             <el-table-column
             :sortable="'custom'"
               prop="sbklyl"
-              label="设备利用小时数(小时)"
-               width="250">
+              label="设备利用小时数(小时)">
             </el-table-column>
             <el-table-column
             :sortable="'custom'"
               prop="sbklyl"
-              label="设备可利用率(%)"
-               width="250">
+              label="设备可利用率(%)">
             </el-table-column>
             <el-table-column
             :sortable="'custom'"
               prop="dxklyxs"
-              label="等效可用系数(%)"
-               width="250">
+              label="等效可用系数(%)">
             </el-table-column>
             <el-table-column
             :sortable="'custom'"
               prop="fs"
-              label="平均风速(m/s)"
-               width="250">
+              label="平均风速(m/s)">
             </el-table-column>
             <el-table-column
             :sortable="'custom'"
               prop="xfqr"
-              label="小风切入风速(m/s)"
-               width="250">
+              label="小风切入风速(m/s)">
             </el-table-column>
             <el-table-column
             :sortable="'custom'"
               prop="yxxs"
-              label="有效风时数(小时)"
-               width="250">
+              label="有效风时数(小时)">
             </el-table-column>
             <el-table-column
             :sortable="'custom'"
               prop="gzss"
-              label="故障损失电量(万千瓦时)"
-               width="250">
+              label="故障损失电量(万千瓦时)">
             </el-table-column>
             <el-table-column
             :sortable="'custom'"
               prop="xdss"
-              label="调度限电损失电量(万千瓦时)"
-               width="250">
+              label="调度限电损失电量(万千瓦时)">
             </el-table-column>
             <el-table-column
             :sortable="'custom'"
               prop="jxss"
-              label="计划检修损失电量(万千瓦时)"
-               width="250">
+              label="计划检修损失电量(万千瓦时)">
             </el-table-column>
             <el-table-column
             :sortable="'custom'"
               prop="xnss"
-              label="性能未达标损失电量(万千瓦时)"
-               width="250">
+              label="性能未达标损失电量(万千瓦时)">
             </el-table-column>
             <el-table-column
             :sortable="'custom'"
               prop="gzxs"
-              label="故障停用时间(小时)"
-               width="250">
+              label="故障停用时间(小时)">
             </el-table-column>
             <el-table-column
             :sortable="'custom'"
               prop="glyzxxs"
-              label="机组功率一致性系数(%)"
-               width="250">
+              label="机组功率一致性系数(%)">
             </el-table-column>
             <!-- <el-table-column
             :sortable="'custom'"

src/views/singlePerformanceAnalysis/individualPandectinformation.vue

@@ -1,9 +1,14 @@
 <template>
   <el-card>
-    <el-form :inline="true"  class="demo-form-inline">
+    <el-form :inline="true" class="demo-form-inline">
       <el-row>
         <el-form-item label="风场">
-          <el-select v-model="fc" clearable @change="query_table" placeholder="请选择">
+          <el-select
+            v-model="fc"
+            clearable
+            @change="query_table"
+            placeholder="请选择"
+          >
             <el-option
               v-for="item in wpIdslist"
               :key="item.id"
@@ -15,69 +20,66 @@
         </el-form-item>
 
         <el-form-item label="日期">
-              <el-date-picker
-                @change="query_table"
-                v-model="date_1"
-                value-format="yyyy-MM-dd"
-                type="date"
-                placeholder="选择日期"
-                :picker-options="pickerOptions">
-              >
-              </el-date-picker>
-            </el-form-item>
+          <el-date-picker
+            @change="query_table"
+            v-model="date_1"
+            value-format="yyyy-MM-dd"
+            type="date"
+            placeholder="选择日期"
+            :picker-options="pickerOptions"
+          >
+            >
+          </el-date-picker>
+        </el-form-item>
 
         <el-form-item style="margin-left: 190px">
-          <el-button type="primary" >导出</el-button>
+          <el-button type="primary" @click="toExcel">导出</el-button>
         </el-form-item>
       </el-row>
     </el-form>
     <el-table
+      class="table_sty"
       ref="singleTable"
       id="tableData"
       :data="tableData"
-       border
-       :cell-style="{ textAlign: 'center'}" 
+      border
+      :cell-style="{ textAlign: 'center' }"
+      :header-cell-style="{ textAlign:'center',background:'#F5F7FA'}"
       highlight-current-row
       style="width: 100%"
       max-height="759px"
     >
       <el-table-column label="单机信息总览列表">
-      <el-table-column type="index" width="80"> </el-table-column>
-      <el-table-column property="windtpowerstationid" label="风场" width="120">
-      </el-table-column>
-      <el-table-column property="windturbineid" label="风机" width="120">
-      </el-table-column>
-      <el-table-column property="modelid" label="型号" width="150">
-      </el-table-column>
-      <el-table-column property="daytop" label="日排行榜" width="120">
-      </el-table-column>
-      <el-table-column property="daygoodness" label="日拟合优度" width="130">
-      </el-table-column>
-      <el-table-column property="dayspeed" label="日风速" width="120">
-      </el-table-column>
-      <el-table-column property="monthtop" label="月排行榜" width="120">
-      </el-table-column>
-      <el-table-column property="monthgoodness" label="月拟合优度" width="130">
-      </el-table-column>
-      <el-table-column property="monthspeed" label="月风速" width="120">
-      </el-table-column>
-      <el-table-column property="yeartop" label="年排行榜" width="120">
-      </el-table-column>
-      <el-table-column property="yeargoodness" label="年拟合优度" width="120">
-      </el-table-column>
-      <el-table-column property="yearspeed" label="年风速" width="120">
-      </el-table-column>
-      <el-table-column property="address" label="操作" width="240">
-        <template slot-scope="scope">
-          <el-button size="mini" @click="handleEdit(scope.row)"
-            >详情</el-button
-          >
+        <el-table-column type="index" width="80"> </el-table-column>
+        <el-table-column property="windtpowerstationid" label="风场">
+        </el-table-column>
+        <el-table-column property="windturbineid" label="风机">
+        </el-table-column>
+        <el-table-column property="modelid" label="型号"> </el-table-column>
+        <el-table-column property="daytop" label="日排行榜"> </el-table-column>
+        <el-table-column property="daygoodness" label="日拟合优度">
+        </el-table-column>
+        <el-table-column property="dayspeed" label="日风速"> </el-table-column>
+        <el-table-column property="monthtop" label="月排行榜">
+        </el-table-column>
+        <el-table-column property="monthgoodness" label="月拟合优度">
+        </el-table-column>
+        <el-table-column property="monthspeed" label="月风速" width="120">
+        </el-table-column>
+        <el-table-column property="yeartop" label="年排行榜" width="120">
+        </el-table-column>
+        <el-table-column property="yeargoodness" label="年拟合优度">
+        </el-table-column>
+        <el-table-column property="yearspeed" label="年风速"> </el-table-column>
+        <el-table-column property="address" label="操作" width="240">
+          <template slot-scope="scope">
+            <el-button size="mini" @click="handleEdit(scope.row)"
+              >详情</el-button
+            >
 
-          <el-button size="mini" @click="history(scope.row)"
-            >历史</el-button
-          >
-        </template>
-      </el-table-column>
+            <el-button size="mini" @click="history(scope.row)">历史</el-button>
+          </template>
+        </el-table-column>
       </el-table-column>
     </el-table>
   </el-card>
@@ -89,5 +91,5 @@ export default individualPandectinformation;
 </script>
 
 <style lang="scss" scoped>
- @import "@assets/css/singlePerformanceAnalysis/individualPandectinformation.scss";
+@import "@assets/css/singlePerformanceAnalysis/individualPandectinformation.scss";
 </style>

src/views/singlePerformanceAnalysis/individualPandectinformationdetails.vue

@@ -3,75 +3,132 @@
     <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
       <el-tab-pane label="风机运行情况" name="no_1">
         <el-card>
-          <el-form :inline="true" class="demo-form-inline" >
-            <el-form-item label="风场">
-              <el-select
-                v-model="fc"
-                clearable
-                placeholder="请选择"
-                @change="query()"
-              >
-                <el-option
-                  v-for="item in wpIdslist"
-                  :key="item.id"
-                  :label="item.name"
-                  :value="item.id"
-                >
-                </el-option>
-              </el-select>
-            </el-form-item>
+          <div class="n1">
+            <div class="n1_on">
+              <el-form :inline="true" class="demo-form-inline">
+                <el-form-item label="风场">
+                  <el-select
+                    v-model="fc"
+                    clearable
+                    placeholder="请选择"
+                    @change="query()"
+                  >
+                    <el-option
+                      v-for="item in wpIdslist"
+                      :key="item.id"
+                      :label="item.name"
+                      :value="item.id"
+                    >
+                    </el-option>
+                  </el-select>
+                </el-form-item>
 
-            <el-form-item label="风机">
-              <el-select v-model="fj" placeholder="请选择" :multiple-limit="5">
-                <el-option
-                  v-for="item in wtIdslist"
-                  :key="item.id"
-                  :label="item.name"
-                  :value="item.id"
-                >
-                </el-option>
-              </el-select>
-            </el-form-item>
+                <el-form-item label="风机">
+                  <el-select
+                    v-model="fj"
+                    placeholder="请选择"
+                    :multiple-limit="5"
+                  >
+                    <el-option
+                      v-for="item in wtIdslist"
+                      :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="data_01"
-                value-format="yyyy-MM-dd"
-                type="date"
-                placeholder="选择日期"
-                :picker-options="pickerOptions">
-              >
-              </el-date-picker>
-            </el-form-item>
-            <el-form-item>
-              <el-button
-                type="primary"
-                @click="query_cutin_windspeed"
-                :plain="true"
-                >查询</el-button
-              >
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary" @click="goback">返回</el-button>
-            </el-form-item>
-          </el-form>
-          <el-row>
-            <div
-            v-loading="loading"
-              id="line_dataZoom"
-              style="
-                width: 2100px;
-                height: 239px;
-                margin-left: -6%;
-                margin-bottom:-1%
-              "
-            ></div>
-          </el-row>
-          <el-row>
-            <di id="echart_line" style="width: 1800px; height: 200px"></di>
-          </el-row>
-          <el-row>
-            <!-- <el-col :span="7" style="margin-left: 3%">
+                <el-form-item label="日期">
+                  <el-date-picker
+                    v-model="data_01"
+                    value-format="yyyy-MM-dd"
+                    type="date"
+                    placeholder="选择日期"
+                    :picker-options="pickerOptions"
+                  >
+                    >
+                  </el-date-picker>
+                </el-form-item>
+                <el-form-item>
+                  <el-button
+                    type="primary"
+                    @click="query_cutin_windspeed"
+                    :plain="true"
+                    >查询</el-button
+                  >
+                </el-form-item>
+                <el-form-item>
+                  <el-button type="primary" @click="goback">返回</el-button>
+                </el-form-item>
+              </el-form>
+            </div>
+             <el-card style="width:100%;margin-top:13px">
+            <div class="n1_tw" >
+             
+                <div
+                  v-loading="loading"
+                  id="line_dataZoom"
+                  style="width: 100%; margin-bottom: -1%"
+                ></div>
+              
+            </div>
+            </el-card>
+            <el-card style="width:100%">
+            <div class="n1_th">
+              
+                <div id="echart_line" style="width: 100%"></div>
+              
+            </div>
+            </el-card>
+            <el-card>
+              <div class="n1_fo">
+                <el-col :span="23" style="margin-left: 2%"
+                  ><div>
+                    <el-table
+                      :data="tableData_01_xd"
+                      max-height="263px"
+                      height="263px"
+                      border
+                      style="width: 100%"
+                    >
+                      <el-table-column label="当日限电记录">
+                        <el-table-column prop="windturbineid" label="名字">
+                        </el-table-column>
+                        <el-table-column
+                          prop="starttime"
+                          :formatter="starttime"
+                          label="停机日期"
+                        >
+                        </el-table-column>
+                        <el-table-column
+                          prop="stoptime"
+                          :formatter="stoptime"
+                          label="恢复日期"
+                        >
+                        </el-table-column>
+                        <el-table-column prop="losspower" label="损失电量">
+                        </el-table-column>
+                        <el-table-column prop="stophours" label="限电时长">
+                        </el-table-column>
+                      </el-table-column>
+                    </el-table>
+                    <el-pagination
+                      style="margin-left: 633px"
+                      @size-change="handleSizeChange_01_xd"
+                      @current-change="handleCurrentChange_01_xd"
+                      :current-page.sync="currentPage3_01_xd"
+                      :page-size="3"
+                      layout="prev, pager, next, jumper"
+                      :total="pages01_xd"
+                    >
+                    </el-pagination></div
+                ></el-col>
+              </div>
+            </el-card>
+          </div>
+
+          <!-- <el-col :span="7" style="margin-left: 3%">
               <div>
                 <el-table
                   :data="tableData_01_bj"
@@ -152,66 +209,12 @@
               >
               </el-pagination
             ></el-col> -->
-            <el-col :span="23" style="margin-left: 2%"
-              ><div>
-                <el-table
-                  :data="tableData_01_xd"
-                  max-height="263px"
-                  height="263px"
-                  border
-                  style="width: 100%"
-                >
-                  <el-table-column label="当日限电记录">
-                    <el-table-column
-                      prop="windturbineid"
-                      label="名字"
-                      width="358"
-                    >
-                    </el-table-column>
-                    <el-table-column
-                      prop="starttime"
-                      :formatter="starttime"
-                      label="停机日期"
-                      width="358"
-                    >
-                    </el-table-column>
-                    <el-table-column
-                      prop="stoptime"
-                      :formatter="stoptime"
-                      label="恢复日期"
-                      width="358"
-                    >
-                    </el-table-column>
-                    <el-table-column
-                      prop="losspower"
-                      label="损失电量"
-                      width="358"
-                    >
-                    </el-table-column>
-                    <el-table-column
-                      prop="stophours"
-                      label="限电时长"
-                      width="358"
-                    >
-                    </el-table-column>
-                  </el-table-column>
-                </el-table>
-                <el-pagination
-                  style="margin-left: 633px"
-                  @size-change="handleSizeChange_01_xd"
-                  @current-change="handleCurrentChange_01_xd"
-                  :current-page.sync="currentPage3_01_xd"
-                  :page-size="3"
-                  layout="prev, pager, next, jumper"
-                  :total="pages01_xd"
-                >
-                </el-pagination></div
-            ></el-col>
-          </el-row>
         </el-card>
       </el-tab-pane>
       <el-tab-pane label="风机日详细信息" name="no_2">
-        <el-form
+        <div class="n2">
+          <div class="n2_on">
+            <el-form
           :inline="true"
           class="demo-form-inline"
           style="margin-left: 1%"
@@ -251,8 +254,9 @@
               value-format="yyyy-MM-dd"
               type="date"
               placeholder="选择日期"
-              :picker-options="pickerOptions">
+              :picker-options="pickerOptions"
             >
+              >
             </el-date-picker>
           </el-form-item>
           <el-form-item>
@@ -261,39 +265,42 @@
             >
           </el-form-item>
           <el-form-item>
-              <el-button type="primary" @click="goback">返回</el-button>
-            </el-form-item>
-        </el-form>
-        <el-row>
-          <el-col :span="12">
-            <div
+            <el-button type="primary" @click="goback">返回</el-button>
+          </el-form-item>
+            </el-form>
+          </div>
+          <el-card style="width:100%">
+          <div class="n2_tw">
+            <div class="n2_tw_z">
+              <div
               id="echartline"
-              style="width: 900px; height: 200px; margin: auto"
+              style="width: 100%; height: 200px; margin: auto"
             ></div>
-          </el-col>
-          <el-col :span="12">
-            <el-table
+            </div>
+            <div class="n2_tw_y">
+              <div class="n2_tw_y_s">
+              <el-table
               :data="tableData_02_bj"
               max-height="200px"
               border
-              style="width: 100%"
             >
               <el-table-column label="当日报警记录">
-                <el-table-column prop="windturbineid" label="风机" width="309">
+                <el-table-column prop="windturbineid" label="风机" >
                 </el-table-column>
-                <el-table-column prop="warnDesc" label="描述" width="309">
+                <el-table-column prop="warnDesc" label="描述">
                 </el-table-column>
                 <el-table-column
                   :formatter="formatter_date"
                   prop="warningtime"
                   label="报警日期"
-                  width="309"
                 >
                 </el-table-column>
               </el-table-column>
             </el-table>
+            </div>
+            <div class="n2_tw_y_x">
             <el-pagination
-              style="margin-left: 210px"
+              style="margin-left: 39%"
               @size-change="handleSizeChange_bj"
               @current-change="handleCurrentChange_bj"
               :current-page.sync="currentPage3_bj"
@@ -302,11 +309,13 @@
               :page-count="pages02_bj"
             >
             </el-pagination>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="12">
-            <el-card>
+            </div>
+            </div>
+          </div>
+          </el-card>
+          <el-card style="width:100%">
+          <div class="n2_th">
+            <div class="n2_th_z">
               <el-form
                 :inline="true"
                 :model="formInline"
@@ -435,10 +444,9 @@
                   ></el-input>
                 </el-form-item>
               </el-form>
-            </el-card>
-          </el-col>
-          <el-col :span="12"
-            ><div>
+            </div>
+            <div class="n2_th_y">
+              <div class="n2_th_y_s">
               <el-table
                 :data="tableData_02_gz"
                 max-height="170px"
@@ -450,27 +458,26 @@
                   <el-table-column
                     prop="windTurbineId"
                     label="风机"
-                    width="309"
                   >
                   </el-table-column>
                   <el-table-column
                     prop="startTime"
                     :formatter="startTime"
                     label="停机日期"
-                    width="309"
                   >
                   </el-table-column>
                   <el-table-column
                     prop="stopTime"
                     :formatter="stopTime"
                     label="恢复日期"
-                    width="309"
                   >
                   </el-table-column>
                 </el-table-column>
               </el-table>
+              </div>
+              <div class="n2_th_y_x">
               <el-pagination
-                style="margin-left: 210px"
+                style="margin-left: 40%"
                 @size-change="handleSizeChange_gz"
                 @current-change="handleCurrentChange_gz"
                 :current-page.sync="currentPage3_gz"
@@ -478,12 +485,12 @@
                 layout="prev, pager, next, jumper"
                 :page-count="pages02_gz"
               >
-              </el-pagination></div
-          ></el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="7">
-            <el-card>
+              </el-pagination>
+              </div>
+            </div>
+          </div></el-card><el-card>
+          <div class="n2_fo">
+            <div class="n2_fo_l">
               <el-form
                 :inline="true"
                 :model="formInline"
@@ -582,10 +589,10 @@
                   ></el-input>
                 </el-form-item>
               </el-form>
-            </el-card>
-          </el-col>
-          <el-col :span="5">
-            <el-row>
+            </div>
+            <div class="n2_fo_m">
+              <div class="n2_fo_m_s">
+
               <el-form
                 :inline="true"
                 :model="formInline"
@@ -606,34 +613,41 @@
                   ></el-input>
                 </el-form-item>
               </el-form>
-            </el-row>
-            <el-row>
+
+              </div>
+              <div class="n2_fo_m_x">
               <div
                 id="leidatu"
-                style="height: 230px; width: 393px; margin-left: 9px"
+                style="height: 190px; width: 100%; margin-left: 9px;margin-top:-23px"
               ></div>
-            </el-row>
-          </el-col>
-          <el-col :span="12">
-            <el-table
+
+              </div>
+            </div>
+            <div class="n2_fo_r">
+              <el-table
               :data="tableData_02_ybj"
-              max-height="288px"
+              mix-height="238px"
+              max-height="238px"
               border
-              hheight="288px"
               style="width: 100%"
             >
               <el-table-column label="当月报警排行">
-                <el-table-column prop="name" label="名字" width="460">
+                <el-table-column prop="name" label="名字">
                 </el-table-column>
-                <el-table-column prop="num" label="次数" width="460">
+                <el-table-column prop="num" label="次数">
                 </el-table-column>
               </el-table-column>
             </el-table>
-          </el-col>
-        </el-row>
+            </div>
+          </div></el-card>
+        </div>
       </el-tab-pane>
       <el-tab-pane label="风场玫瑰图" name="no_3">
-        <el-form :inline="true" class="demo-form-inline" style="margin-left: 1%">
+        <el-form
+          :inline="true"
+          class="demo-form-inline"
+          style="margin-left: 1%"
+        >
           <el-form-item label="风场">
             <el-select
               v-model="fc"
@@ -666,8 +680,8 @@
             >
           </el-form-item>
           <el-form-item>
-              <el-button type="primary" @click="goback">返回</el-button>
-            </el-form-item>
+            <el-button type="primary" @click="goback">返回</el-button>
+          </el-form-item>
         </el-form>
         <el-row>
           <el-col :span="8"
@@ -729,7 +743,11 @@
         </el-row>
       </el-tab-pane>
       <el-tab-pane label="风机玫瑰图" name="no_4">
-        <el-form :inline="true" class="demo-form-inline" style="margin-left: 1%">
+        <el-form
+          :inline="true"
+          class="demo-form-inline"
+          style="margin-left: 1%"
+        >
           <el-form-item label="风场">
             <el-select
               v-model="fc"
@@ -774,8 +792,8 @@
             >
           </el-form-item>
           <el-form-item>
-              <el-button type="primary" @click="goback">返回</el-button>
-            </el-form-item>
+            <el-button type="primary" @click="goback">返回</el-button>
+          </el-form-item>
         </el-form>
         <el-row>
           <el-col :span="8"
@@ -837,7 +855,11 @@
         </el-row>
       </el-tab-pane>
       <el-tab-pane label="风机切入切出分析" name="no_5">
-        <el-form :inline="true" class="demo-form-inline" style="margin-left: 1%">
+        <el-form
+          :inline="true"
+          class="demo-form-inline"
+          style="margin-left: 1%"
+        >
           <el-form-item label="风场">
             <el-select
               v-model="fc"
@@ -882,8 +904,8 @@
             >
           </el-form-item>
           <el-form-item>
-              <el-button type="primary" @click="goback">返回</el-button>
-            </el-form-item>
+            <el-button type="primary" @click="goback">返回</el-button>
+          </el-form-item>
         </el-form>
         <el-row>
           <el-col :span="8"
@@ -944,7 +966,12 @@
           </el-col> </el-row
       ></el-tab-pane>
     </el-tabs>
-    <el-dialog title="点击信息详情" :modal-append-to-body="false" :visible.sync="dialogVisible" width="39%">
+    <el-dialog
+      title="点击信息详情"
+      :modal-append-to-body="false"
+      :visible.sync="dialogVisible"
+      width="39%"
+    >
       <el-table :data="biaogeDate" border style="width: 100%">
         <el-table-column prop="ks" label="开始时间" width="160">
         </el-table-column>
@@ -975,5 +1002,5 @@ export default individualPandectinformationdetails;
 </script>
 
 <style lang="scss" scoped>
- @import "@assets/css/singlePerformanceAnalysis/individualPandectinformationdetails.scss";
+@import "@assets/css/singlePerformanceAnalysis/individualPandectinformationdetails.scss";
 </style>