动态改变样式

src/views/Performance/NewPerformanceList.vue

@@ -14,7 +14,7 @@
 
     <el-main>
       <el-card>
-        <el-form :inline="true" :model="formInline" class="demo-form-inline">
+        <el-form :inline="true"  class="demo-form-inline">
           <el-row :gutter="1">
             <el-form-item label="风场">
               <el-select v-model="fc" clearable placeholder="请选择" @change="query_xml()">
@@ -99,6 +99,7 @@
               <el-card
                 shadow="always"
                 ref="fc_zzt_card"
+                :style="styleObject_fc"
                 style="width: 40%; display: table-cell; vertical-align: middle"
               >
                 <div
@@ -109,13 +110,13 @@
 
               <el-card
                 shadow="always"
+                :style="styleObject_fc"
                 style="width: 58%"
-                height="600px"
                 id="moban"
               >
-                <el-table id="fc_table" :data="fc_date" style="width: 100%;font-size:1px" max-height="800px">
+                <el-table id="fc_table" :data="fc_date" style="width: 100%;font-size:1px" :max-height="tableHeight">
                   <el-table-column label="项目列表">
-                    <el-table-column fixed type="index" width="36">
+                    <el-table-column fixed type="index" width="41">
                     </el-table-column>
                     <el-table-column prop="generation" sortable label="名称" width="75">
                     </el-table-column>
@@ -261,6 +262,7 @@
             >
               <el-card
                 shadow="always"
+                :style="styleObject_pj"
                 style="width: 40%; display: table-cell; vertical-align: middle"
               >
                 <div
@@ -271,18 +273,18 @@
 
               <el-card
                 shadow="always"
+                :style="styleObject_pj"
                 style="width: 58%"
-                height="400px"
                 id="moban"
               >
                 <el-table
                   id="pj_table"
                   :data="pj_date"
                   style="width: 100%;font-size:1px;margin-bottom:10px"
-                  max-height="800px"
+                  :max-height="tableHeight"
                 >
                   <el-table-column label="项目列表">
-                       <el-table-column fixed type="index" width="36">
+                       <el-table-column fixed type="index" width="41">
                     </el-table-column>
                     <el-table-column prop="generation" sortable label="名称" width="75">
                     </el-table-column>
@@ -428,18 +430,19 @@
             >
               <el-card
                 shadow="always"
+                :style="styleObject_xl"
                 style="width: 40%; display: table-cell; vertical-align: middle"
                 
               >
                 <div
                   style="width: 100%; margin: auto;"
-                  :style="{height : judge === true ? '1200px' : '600px'}"
                   id="histogram_jdxl"
                 >
                 </div>
               </el-card>
 
               <el-card
+                :style="styleObject_xl"
                 shadow="always"
                 style="width: 58%"
                 id="moban"
@@ -448,11 +451,11 @@
                   id="xl_table"
                   :data="xl_date"
                   style="width: 100%;font-size:1px;margin-bottom:10px"
-                  max-height="1200px"
+                  :max-height="tableHeight"
                   
                 >
                   <el-table-column label="项目列表">
-                       <el-table-column fixed type="index" width="36">
+                       <el-table-column fixed type="index" width="41">
                     </el-table-column>
                     <el-table-column prop="generation" sortable label="名称" width="75">
                     </el-table-column>
@@ -603,11 +606,22 @@ import excelHelper from "@/utils/excelHelper";
 export default {
   data() {
     return {
+      len:10,
       fc:"",
       pj:"",
       xl:"",
-      judge:true,
-      autoHeight:1200,
+      autoHeight_fc: 400,
+      autoHeight_pj: 800,
+      autoHeight_xl: 1200,
+      styleObject_fc: {
+        height: '460px'
+      },
+      styleObject_pj: {
+        height: '860px'
+      },
+      styleObject_xl: {
+        height: '1220px'
+      },
       wpIdslist: {
         name:"",
         id:"",
@@ -620,11 +634,6 @@ export default {
         name:"",
         id:"",
       },
-      isextent_1: true,
-      isextent_2: false,
-      isextent_3: false,
-      isextent_4: false,
-      isextent_5: false,
       powerAjaxDetailAll: {
         generation: [],
         sacadafdl: [],
@@ -669,11 +678,14 @@ export default {
       });
     },
     query_xml(){
+      this.pj = "";
+      this.xl = "";
       this.$http.get("powercompare/projectAjax?wpIds=" + this.fc).then((res) => {
         this.projectlist = res.data.data;
       });
     },
     query_xl(){
+      this.xl = "";
       this.$http.get("powercompare/lineAjax?pjIds=" + this.pj).then((res) => {
         this.linelist = res.data.data;
       });
@@ -747,18 +759,24 @@ export default {
         this.$options.data().powerAjaxDetailAll
       );
       Object.assign(this.$data.datelength, this.$options.data().datelength);
-      Object.assign(this.$data.isextent_1, this.$options.data().isextent_1);
-      Object.assign(this.$data.isextent_2, this.$options.data().isextent_2);
-      Object.assign(this.$data.isextent_3, this.$options.data().isextent_3);
-      Object.assign(this.$data.isextent_4, this.$options.data().isextent_4);
-      Object.assign(this.$data.isextent_5, this.$options.data().isextent_5);
-      Object.assign(this.$data.autoHeight, this.$options.data().autoHeight);
       Object.assign(this.$data.fc_date, this.$options.data().fc_date);
       Object.assign(this.$data.xl_date, this.$options.data().xl_date);
       Object.assign(this.$data.pj_date, this.$options.data().ipj_date);
+      Object.assign(this.$data.autoHeight_fc, this.$options.data().autoHeight_fc);
+      Object.assign(this.$data.styleObject_fc, this.$options.data().styleObject_fc);
+      Object.assign(this.$data.autoHeight_pj, this.$options.data().autoHeight_pj);
+      Object.assign(this.$data.styleObject_pj, this.$options.data().styleObject_pj);
+      Object.assign(this.$data.autoHeight_xl, this.$options.data().autoHeight_xl);
+      Object.assign(this.$data.styleObject_xl, this.$options.data().styleObject_xl);
     },
     query() {
       this.resetdata();
+      this.styleObject_fc.height = '460px';
+      this.autoHeight_fc = '400px';
+      this.styleObject_pj.height = '860px';
+      this.autoHeight_pj = '800px';
+      this.styleObject_xl.height = '1260px';
+      this.autoHeight_xl = '1200px';
       // this.fc_date = "";
       // this.xl_date = "";
       // this.pj_date = "";
@@ -861,6 +879,17 @@ export default {
             let that = this;
             let queryAll = res.data.data;
             this.datelength = queryAll.length;
+            this.len = queryAll.length;
+            if(this.len <= 10){that.autoHeight_fc = 580; that.styleObject_fc.height = '700px' }
+            else if(this.len > 10 && this.len <=20){that.autoHeight_fc = 780; that.styleObject_fc.height = '800px';that.autoHeight_pj = 780; that.styleObject_pj.height = '800px';that.autoHeight_xl = 780; that.styleObject_xl.height = '800px' }
+            else if(this.len > 20 && this.len <=30){that.autoHeight_fc = 980; that.styleObject_fc.height = '1000px';that.autoHeight_pj = 980; that.styleObject_pj.height = '1000px';that.autoHeight_xl = 980; that.styleObject_xl.height = '1000px' }
+            else if(this.len > 30 && this.len <=40){that.autoHeight_fc = 1180; that.styleObject_fc.height = '1200px';that.autoHeight_pj = 1180; that.styleObject_pj.height = '1200px';that.autoHeight_xl = 1180; that.styleObject_xl.height = '1200px' }
+            else if(this.len > 40 && this.len <=50){that.autoHeight_fc = 1380; that.styleObject_fc.height = '1400px';that.autoHeight_pj = 1380; that.styleObject_pj.height = '1400px';that.autoHeight_xl = 1380; that.styleObject_xl.height = '1400px' }
+            else if(this.len > 50 && this.len <=60){that.autoHeight_fc = 1580; that.styleObject_fc.height = '1600px';that.autoHeight_pj = 1580; that.styleObject_pj.height = '1600px';that.autoHeight_xl = 1580; that.styleObject_xl.height = '1600px' }
+            else if(this.len > 60 && this.len <=70){that.autoHeight_fc = 1780; that.styleObject_fc.height = '1800px';that.autoHeight_pj = 1780; that.styleObject_pj.height = '1800px';that.autoHeight_xl = 1780; that.styleObject_xl.height = '1800px' }
+            else if(this.len > 70 && this.len <=80){that.autoHeight_fc = 1980; that.styleObject_fc.height = '2000px';that.autoHeight_pj = 1980; that.styleObject_pj.height = '2000px';that.autoHeight_xl = 1980; that.styleObject_xl.height = '2000px' }
+            else{that.autoHeight_fc = 2180; that.styleObject_fc.height = '2200px';that.autoHeight_pj = 2180; that.styleObject_pj.height = '2200px';that.autoHeight_xl = 2180; that.styleObject_xl.height = '2200px' }
+            
             for (let i = 0; i < queryAll.length; i++) {
               this.powerAjaxDetailAll.generation[i] = queryAll[i].generation;
               this.powerAjaxDetailAll.sacadafdl[i] = queryAll[i].sacadafdl;
@@ -897,13 +926,13 @@ export default {
       }
     },
     checkwindfarm() {
-      if (this.formInline.windfarm == "") {
+      if (this.fc == "") {
         this.$message.error("请选择风场！");
         return;
       }
     },
     checkproject() {
-      if (this.formInline.project == "") {
+      if (this.pj == "") {
         this.$message.error("请选择项目！");
         return;
       }
@@ -933,6 +962,8 @@ export default {
     },
     drawhistogram_fc(date) {
       this.chartLine = echarts.init(document.getElementById("histogram_fc"));
+      this.chartLine.clear();
+      this.chartLine.resize({height: this.autoHeight_fc})
       var option;
       option = {
         textStyle:{fontSize:10},
@@ -986,7 +1017,6 @@ export default {
         },
         series: [
           {
-            barWidth: 30,
             name: "实发电量",
             type: "bar",
             stack: "total",
@@ -1166,6 +1196,8 @@ export default {
     },
     drawhistogram_pj(date) {
       this.chartLine = echarts.init(document.getElementById("histogram_xm"));
+      this.chartLine.clear();
+      this.chartLine.resize({height: this.autoHeight_pj})
       var option;
 
       var option;
@@ -1220,7 +1252,6 @@ export default {
         },
         series: [
           {
-            barWidth: 30,
             name: "实发电量",
             type: "bar",
             stack: "total",
@@ -1402,7 +1433,7 @@ export default {
       
       this.chartLine = echarts.init(document.getElementById("histogram_jdxl"));
       this.chartLine.clear();
-      this.chartLine.resize({height: this.autoHeight})
+      this.chartLine.resize({height: this.autoHeight_xl})
       var option;
 
       var option;
@@ -1457,7 +1488,6 @@ export default {
         },
         series: [
           {
-            barWidth: 20,
             name: "实发电量",
             type: "bar",
             stack: "total",
@@ -1637,6 +1667,10 @@ export default {
     },
   },
   mounted() {
+    this.$nextTick(() => {
+                this.tableHeight = window.innerHeight + (this.len /10 ) * (this.len /10 ) * 100; 
+            //后面的50：根据需求空出的高度，自行调整
+        });
     this.query_wpid();
     this.query();
   },

src/views/Performance/PerformanceList.vue

@@ -106,62 +106,36 @@
               <el-card
                 shadow="always"
                 ref="fc_zzt_card"
+                :style="styleObject_fc"
                 style="
-                  height: 440px;
                   width: 45%;
                   display: table-cell;
                   vertical-align: middle;
                 "
               >
-                <el-popover
-                  placement="bottom"
-                  trigger="hover"
-                  v-model="visible"
-                  style="
-                    position: absolute;
-                    left: 780px;
-                    top: 10px;
-                    z-index: 99999;
-                    width: 70px;
-                  "
-                >
-                  <el-table
-                    :data="gridData"
-                    :show-header="false"
-                    max-height="400"
-                  >
-                    <el-table-column
-                      width="70"
-                      property="lyl"
-                      label="利用率"
-                    ></el-table-column>
-                  </el-table>
-                  <el-button slot="reference" @click="visible = !visible"
-                    >利用率</el-button
-                  >
-                </el-popover>
 
                 <div
                   id="histogram_fc"
                   ref="fc_zzt"
-                  style="width: 800px; height: 400px; margin: auto"
+                  style="width: 800px"
+                  
                 ></div>
               </el-card>
 
               <el-card
                 shadow="always"
                 style="width: 48%"
-                height="400px"
+                :style="styleObject_fc"
                 id="moban"
               >
                 <el-table
                   id="fc_table"
                   :data="fc_date"
                   style="width: 100%; font-size: 1px"
-                  max-height="400px"
+                  :max-height="tableHeight"
                 >
                   <el-table-column label="项目列表">
-                    <el-table-column fixed type="index" width="45">
+                    <el-table-column fixed type="index" width="40">
                     </el-table-column>
                     <el-table-column
                       prop="wtName"
@@ -259,40 +233,13 @@
             >
               <el-card
                 shadow="always"
+                :style="styleObject_pj"
                 style="
-                  height: 440px;
                   width: 48%;
                   display: table-cell;
                   vertical-align: middle;
                 "
               >
-                <el-popover
-                  placement="bottom"
-                  trigger="hover"
-                  v-model="visible2"
-                  style="
-                    position: absolute;
-                    left: 780px;
-                    top: 10px;
-                    z-index: 99999;
-                    width: 70px;
-                  "
-                >
-                  <el-table
-                    :data="gridData"
-                    :show-header="false"
-                    max-height="400"
-                  >
-                    <el-table-column
-                      width="70"
-                      property="lyl"
-                      label="利用率"
-                    ></el-table-column>
-                  </el-table>
-                  <el-button slot="reference" @click="visible2 = !visible2"
-                    >利用率</el-button
-                  >
-                </el-popover>
 
                 <div
                   id="histogram_xm"
@@ -302,18 +249,18 @@
 
               <el-card
                 shadow="always"
+                :style="styleObject_pj"
                 style="width: 48%"
-                height="400px"
                 id="moban"
               >
                 <el-table
                   id="pj_table"
                   :data="pj_date"
                   style="width: 100%; font-size: 1px"
-                  max-height="400px"
+                  :max-height="tableHeight"
                 >
                   <el-table-column label="项目列表">
-                    <el-table-column fixed type="index" width="45">
+                    <el-table-column fixed type="index" width="40">
                     </el-table-column>
                     <el-table-column
                       prop="wtName"
@@ -411,57 +358,30 @@
             >
               <el-card
                 shadow="always"
+                :style="styleObject_xl"
                 style="width: 48%; display: table-cell; vertical-align: middle"
               >
-                <el-popover
-                  placement="bottom"
-                  trigger="hover"
-                  v-model="visible3"
-                  style="
-                    position: absolute;
-                    left: 780px;
-                    top: 10px;
-                    z-index: 99999;
-                    width: 70px;
-                  "
-                >
-                  <el-table
-                    :data="gridData"
-                    :show-header="false"
-                    max-height="500"
-                  >
-                    <el-table-column
-                      width="70"
-                      property="lyl"
-                      label="利用率"
-                    ></el-table-column>
-                  </el-table>
-                  <el-button slot="reference" @click="visible3 = !visible3"
-                    >利用率</el-button
-                  >
-                </el-popover>
 
                 <div
                   id="histogram_jdxl"
                   style="width: 800px; margin: auto"
-                  :style="{ height: judge === true ? '1200px' : '600px' }"
                 ></div>
               </el-card>
 
               <el-card
                 shadow="always"
                 style="width: 48%"
-                height="400px"
+                :style="styleObject_xl"
                 id="moban"
               >
                 <el-table
                   id="xl_table"
                   :data="xl_date"
                   style="width: 100%; font-size: 1px"
-                  max-height="1200px"
+                  :max-height="tableHeight"
                 >
                   <el-table-column label="项目列表">
-                    <el-table-column fixed type="index" width="45">
+                    <el-table-column fixed type="index" width="40">
                     </el-table-column>
                     <el-table-column
                       prop="wtName"
@@ -559,15 +479,14 @@ import excelHelper from "@/utils/excelHelper";
 export default {
   data() {
     return {
+      len:10,
       fc:"",
       pj:"",
       xl:"",
-      visible: false,
-      visible2: false,
-      visible3: false,
       gridData: [],
-      judge: true,
-      autoHeight: 1200,
+      autoHeight_fc: 400,
+      autoHeight_pj: 800,
+      autoHeight_xl: 1200,
       wpIdslist: {
         name:"",
         id:"",
@@ -595,26 +514,36 @@ export default {
       table_xm: {},
       table_jdxl: {},
       queryAll_querybutton: {},
-       formInline: {
-        wpIds: "NSS_FDC",
-        project: "NSS01_GC",
-        line: "NSS01_XL",
+      styleObject_fc: {
+        height: '460px'
       },
+      styleObject_pj: {
+        height: '860px'
+      },
+      styleObject_xl: {
+        height: '1220px'
+      }
     };
   },
   methods: {
     onSubmit() {},
     query_wpid() {
+      
       this.$http.get("powercompare/windfarmAjax?").then((res) => {
         this.wpIdslist = res.data.data;
+        
       });
     },
     query_xml(){
+      this.pj = "";
+      this.xl = "";
       this.$http.get("powercompare/projectAjax?wpIds=" + this.fc).then((res) => {
         this.projectlist = res.data.data;
+        
       });
     },
     query_xl(){
+      this.xl = "";
       this.$http.get("powercompare/lineAjax?pjIds=" + this.pj).then((res) => {
         this.linelist = res.data.data;
       });
@@ -640,6 +569,18 @@ export default {
       rows.splice(index, 1);
     },
     query() {
+      Object.assign(this.$data.autoHeight_fc, this.$options.data().autoHeight_fc);
+      Object.assign(this.$data.styleObject_fc, this.$options.data().styleObject_fc);
+      Object.assign(this.$data.autoHeight_pj, this.$options.data().autoHeight_pj);
+      Object.assign(this.$data.styleObject_pj, this.$options.data().styleObject_pj);
+      Object.assign(this.$data.autoHeight_xl, this.$options.data().autoHeight_xl);
+      Object.assign(this.$data.styleObject_xl, this.$options.data().styleObject_xl);
+      this.styleObject_fc.height = '460px';
+      this.autoHeight_fc = '400px';
+      this.styleObject_pj.height = '860px';
+      this.autoHeight_pj = '800px';
+      this.styleObject_xl.height = '1260px';
+      this.autoHeight_xl = '1200px';
       this.fc_date = "";
       this.xl_date = "";
       this.pj_date = "";
@@ -661,7 +602,6 @@ export default {
           } else if (this.tableid === "pj") {
             that.drawhistogram_pj(res.data.data);
           } else if (this.tableid === "xl") {
-            this.autoHeight = 1200;
             that.drawhistogram_xl(res.data.data);
           }
         });
@@ -695,8 +635,8 @@ export default {
         });
     },
     async queryPowerAll() {
-      this.judge = false;
-      this.autoHeight = 600;
+      Object.assign(this.$data.autoHeight_fc, this.$options.data().autoHeight_fc);
+      Object.assign(this.$data.styleObject_fc, this.$options.data().styleObject_fc);
       let that = this;
       if (
         this.beginDate == "" ||
@@ -736,6 +676,16 @@ export default {
           .then((res) => {
             let that = this;
             let queryAll = res.data.data;
+            this.len = Object.keys(queryAll.names).length;
+            if(this.len <= 10){that.autoHeight_fc = 575; that.styleObject_fc.height = '700px' }
+            else if(this.len > 10 && this.len <=20){that.autoHeight_fc = 775; that.styleObject_fc.height = '800px';that.autoHeight_pj = 775; that.styleObject_pj.height = '800px';that.autoHeight_xl = 775; that.styleObject_xl.height = '800px' }
+            else if(this.len > 20 && this.len <=30){that.autoHeight_fc = 975; that.styleObject_fc.height = '1000px';that.autoHeight_pj = 975; that.styleObject_pj.height = '1000px';that.autoHeight_xl = 975; that.styleObject_xl.height = '1000px' }
+            else if(this.len > 30 && this.len <=40){that.autoHeight_fc = 1175; that.styleObject_fc.height = '1200px';that.autoHeight_pj = 1175; that.styleObject_pj.height = '1200px';that.autoHeight_xl = 1175; that.styleObject_xl.height = '1200px' }
+            else if(this.len > 40 && this.len <=50){that.autoHeight_fc = 1375; that.styleObject_fc.height = '1400px';that.autoHeight_pj = 1375; that.styleObject_pj.height = '1400px';that.autoHeight_xl = 1375; that.styleObject_xl.height = '1400px' }
+            else if(this.len > 50 && this.len <=60){that.autoHeight_fc = 1575; that.styleObject_fc.height = '1600px';that.autoHeight_pj = 1575; that.styleObject_pj.height = '1600px';that.autoHeight_xl = 1575; that.styleObject_xl.height = '1600px' }
+            else if(this.len > 60 && this.len <=70){that.autoHeight_fc = 1775; that.styleObject_fc.height = '1800px';that.autoHeight_pj = 1775; that.styleObject_pj.height = '1800px';that.autoHeight_xl = 1775; that.styleObject_xl.height = '1800px' }
+            else if(this.len > 70 && this.len <=80){that.autoHeight_fc = 1975; that.styleObject_fc.height = '2000px';that.autoHeight_pj = 1975; that.styleObject_pj.height = '2000px';that.autoHeight_xl = 1975; that.styleObject_xl.height = '2000px' }
+            else{that.autoHeight_fc = 2175; that.styleObject_fc.height = '2200px';that.autoHeight_pj = 2175; that.styleObject_pj.height = '2200px';that.autoHeight_xl = 2175; that.styleObject_xl.height = '2200px' }
             if (this.tableid === "fc") {
               that.drawhistogram_fc(queryAll);
             } else if (this.tableid === "pj") {
@@ -836,6 +786,8 @@ export default {
     },
     drawhistogram_fc(date) {
       this.chartLine = echarts.init(document.getElementById("histogram_fc"));
+      this.chartLine.clear();
+      this.chartLine.resize({ height: this.autoHeight_fc });
 
       var option;
       option = {
@@ -985,6 +937,9 @@ export default {
     },
     drawhistogram_pj(date) {
       this.chartLine = echarts.init(document.getElementById("histogram_xm"));
+      this.chartLine.clear();
+      this.chartLine.resize({ height: this.autoHeight_pj });
+
       var option;
 
       var option;
@@ -1136,7 +1091,7 @@ export default {
     drawhistogram_xl(date) {
       this.chartLine = echarts.init(document.getElementById("histogram_jdxl"));
       this.chartLine.clear();
-      this.chartLine.resize({ height: this.autoHeight });
+      this.chartLine.resize({ height: this.autoHeight_xl });
       var option;
 
       var option;
@@ -1287,6 +1242,10 @@ export default {
     },
   },
   mounted() {
+    this.$nextTick(() => {
+                this.tableHeight = window.innerHeight + (this.len /10 ) * (this.len /10 ) * 100; 
+            //后面的50：根据需求空出的高度，自行调整
+        });
     this.query_wpid();
     this.query();
   },