zhaomiao 3 лет назад
Родитель
Сommit
25407fa1f3

+ 45 - 0
src/assets/css/singlePerformanceAnalysis/powerChart.scss

@@ -0,0 +1,45 @@
+.fj_w{
+  display: flex;
+  flex-direction: column;
+  width:100%;
+  .fj_ws{
+    display: flex;
+    flex-direction: row;
+    width:100%;
+  }
+  .fj_wx{
+    display: flex;
+    flex-direction: row;
+    width:100%;
+  }
+}
+.xm_w{
+  display: flex;
+  flex-direction: column;
+  width:100%;
+  .xm_ws{
+    display: flex;
+    flex-direction: row;
+    width:100%;
+  }
+  .xm_wx{
+    display: flex;
+    flex-direction: row;
+    width:100%;
+  }
+}
+.xl_w{
+  display: flex;
+  flex-direction: column;
+  width:100%;
+  .xl_ws{
+    display: flex;
+    flex-direction: row;
+    width:100%;
+  }
+  .xl_wx{
+    display: flex;
+    flex-direction: row;
+    width:100%;
+  }
+}

+ 15 - 0
src/assets/css/singlePerformanceAnalysis/powerandWindspeedChart.scss

@@ -0,0 +1,15 @@
+.box_w{
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  .box_ws{
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+  }
+  .box_wx{
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+  }
+}

+ 57 - 38
src/assets/js/normRanking/goodnessfitRank.js

@@ -1,4 +1,4 @@
-import * as echarts from "echarts";
+import { mapMutations , mapGetters} from "vuex";
 export default {
   data() {
     return {
@@ -20,10 +20,11 @@ export default {
       selectrowdate: {},
       histogram_Date: [],
       histogram_sers: [],
-      h_Date:[],
+      h_Date:{},
     };
   },
   methods: {
+    ...mapMutations(["loadingStore"]),
     /**
      * 查询风场
      */
@@ -66,37 +67,49 @@ export default {
     },
     /**
      * 矩阵选中 获取行数据
+     * 
      */
     changeFun(val) {
+      this.$store.commit("loadingStore",true);
       let wt = [];
-      this.histogram_Date = {};
+      this.histogram_Date = [];
       this.histogram_sers = [];
-      for (let i = 0; i < Object.keys(val).length; i++) {
-        wt.push(val[i].windturbine);
+      if( Object.keys(val).length > 2){
+        this.$message.error('只能选俩袄!');
+        this.$refs.table_sty.clearSelection();
+        this.histogram_sers = [];
+        this.histogram_Date = [];
+        return
+      }else{
+        for (let i = 0; i < Object.keys(val).length; i++) {
+          wt.push(val[i].windturbine);
+        }
+            this.API
+          .get(
+            "leaderboard/fittingtopchart?wtIds=" +
+              wt +
+              "&beginDate=" +
+              this.beginDate +
+              "&endDate=" +
+              this.endDate
+          )
+          .then((res) => {
+            this.histogram_Date = [];
+            this.h_Date = {};
+            this.h_Date = res.data;
+            this.histogram_sers = res.data.sers;
+            
+          }).catch(e=>e);
       }
-          this.API
-        .get(
-          "leaderboard/fittingtopchart?wtIds=" +
-            wt +
-            "&beginDate=" +
-            this.beginDate +
-            "&endDate=" +
-            this.endDate
-        )
-        .then((res) => {
-          this.histogram_Date = [];
-          this.h_Date = [];
-          this.h_Date = res.data;
-          this.histogram_sers = res.data.sers;
-        }).catch(e=>e);;
+      this.$store.commit('loadingStore',false);
       
     },
-    // toExcel() {
-    //   let that = this;
-    //   excelHelper.exportExcel("tableData", "拟合优度排行榜", ".xls", true);
-    // },
+    toExcel() {
+      this.BASE.excelHelp("tableData", "拟合优度排行榜", ".xls", true);
+    },
     /**
-     * 转换格式
+     * 转换格式 
+     * 
      */
     filter_bdate(cellValue) {
       let date = new Date(cellValue.beginDate);
@@ -120,20 +133,26 @@ export default {
     curveCreation() {
       let that = this;
       let design = [];
-      for (let j = 0; j < Object.keys(this.histogram_sers).length; j++) {
-        let name1 = that.histogram_sers[j];
-        design = that.h_Date[name1];
-        that.histogram_Date.push({
-          type: "line",
-          name: name1,
-          stack: "总量",
-          data: design,
-        });
-      }
       this.dialogTableVisible = true;
-      this.$nextTick(function () {
-        this.ECZM.zzt_cdbqd('histogram' , this.histogram_sers , this.histogram_Date);
-      });
+        for (let j = 0; j < Object.keys(this.histogram_sers).length; j++) {
+         
+          let name1 = that.histogram_sers[j];
+          design = that.h_Date[name1];
+          that.histogram_Date.push({
+            type: "line",
+            name: name1,
+            stack: "总量",
+            data: design,
+          });
+        }
+        this.$nextTick(function () {
+          this.ECZM.zzt_cdbqd('histogram' , this.histogram_sers , this.histogram_Date);
+          this.$refs.table_sty.clearSelection();
+         this.histogram_sers = [];
+         this.histogram_Date = [];
+        });
+         
+
     },
   },
   mounted() {

+ 21 - 15
src/assets/js/performanceAnalysis/cutAndSpeed.js

@@ -2,6 +2,7 @@
 export default {
     data() {
         return {
+
             //element ui表单组件自带数据 
             formInline: {
                 windfarm: "",
@@ -75,18 +76,19 @@ export default {
         },
         //排序方法
         changeTableSort(column) {
-            //排序方法 column.prop为点击要排序列的数据,将需要排序的值赋给orderByColumn
-            this.orderByColumn = column.prop;
-            //如果column.order为descending(点击排序上箭头),则为降序,若为ascending(点击排序下箭头),则为升序,并将值赋给isAsc
-            if (column.order == "descending") {
-                this.isAsc = 'desc';
-            } else if (column.order == "ascending") {
-                this.isAsc = "asc";
-            }
-            this.callAndSpeedData();
+             let {prop} = column;
+      
+      //排序方法 column.prop为点击要排序列的数据,将需要排序的值赋给orderByColumn
+     
+      //如果column.order为descending(点击排序上箭头),则为降序,若为ascending(点击排序下箭头),则为升序,并将值赋给isAsc
+      if (column.order == "descending") {
+        this.callAndSpeedData(prop,"desc");
+      } else if (column.order == "ascending") {
+        this.callAndSpeedData(prop,"asc");
+      }
         },
         //获取切入切出风速方法
-        callAndSpeedData() {
+        callAndSpeedData(a,b) {
             //判断time是否有值,若没有选择时间,则为昨日日期时间
             if (this.time == '') {
                 this.time = this.updateTime
@@ -97,10 +99,14 @@ export default {
             callAndSpeedData.append('pageNum', this.currentPage2);
             //页面数据个数
             callAndSpeedData.append('pageSize', this.pagesize);
-            //需要排序的参数
-            callAndSpeedData.append('orderByColumn', this.orderByColumn);
-            //升序还是降序
-            callAndSpeedData.append('isAsc', this.isAsc);
+            if(b == "" || b == null){
+                callAndSpeedData.append("isAsc", this.isAsc);
+                callAndSpeedData.append("orderByColumn", this.orderByColumn);
+              }else{
+                callAndSpeedData.append("isAsc", b);
+                callAndSpeedData.append("orderByColumn",a);
+               
+              }
             //风场id
             callAndSpeedData.append('wpId', this.value);
             //日期
@@ -112,7 +118,7 @@ export default {
         },
         //导出excel方法
         toExcel() {
-            excelHelper.exportExcel("callthepolicetable", "负荷率排行榜", ".xls", true);
+            this.BASE.excelHelp("callthepolicetable", "切入切出", ".xls", true);
         },
     }
 }

+ 23 - 9
src/assets/js/performanceAnalysis/gradeEvaluation.js

@@ -4,7 +4,7 @@ export default {
     return {
       //风场选择器
       options: [],
-      //风机日信息等级评估管理表格数
+      //风机日信息等级评估管理表格数
       gridData: [],
       //风机月信息等级评估管理表格数据
       gridDataMonth: [],
@@ -89,6 +89,9 @@ export default {
     
   },
   methods: {
+    sortChange(column){
+      console.log(column+"oooooo")
+    },
     headStyle() {
       //表格文字居中显示
       return "text-align:center";
@@ -100,15 +103,17 @@ export default {
     },
     //排序方法
     changeTableSort(column) {
+      let {prop} = column;
+      
       //排序方法 column.prop为点击要排序列的数据,将需要排序的值赋给orderByColumn
-      this.orderByColumn = column.prop;
+     
       //如果column.order为descending(点击排序上箭头),则为降序,若为ascending(点击排序下箭头),则为升序,并将值赋给isAsc
       if (column.order == "descending") {
-        this.isAsc = "desc";
+        this.gradeByDaygData(prop,"desc");
       } else if (column.order == "ascending") {
-        this.isAsc = "asc";
+        this.gradeByDaygData(prop,"asc");
       }
-      this.gradeByDaygData();
+      
     },
     //处理对比框表格数据方法val为点击多选框的数据
     handleSelectionChange(val) {
@@ -416,7 +421,7 @@ export default {
         this.gayearlistByPage();
       }
     },
-    gradeByDaygData() {
+    gradeByDaygData(a,b) {
       //风机日信息等级评估管理数据
       let that = this;
       var page = new URLSearchParams();
@@ -425,9 +430,18 @@ export default {
       //页面数据个数
       page.append("pageSize", this.pagesize);
       //需要排序的参数
-      page.append("orderByColumn", this.orderByColumn);
+     
       //升序还是降序
-      page.append("isAsc", this.isAsc);
+      if(b == "" || b == null){
+        page.append("isAsc", this.isAsc);
+        page.append("orderByColumn", this.orderByColumn);
+      }else{
+        page.append("isAsc", b);
+        page.append("orderByColumn",a);
+       
+      }
+      //列
+      
       //风场id
       page.append("wpId", this.value);
       if (this.value1 == "") {
@@ -436,8 +450,8 @@ export default {
       page.append("recorddate", this.value1);
       this.API.post("/benchmarking/gadaylistByPage", page).then((res) => {
         //gridData日表格数据
-        debugger
         that.gridData = res.data.list;
+        debugger
         //total日分页数据
         that.total = res.data.total;
       });

+ 1 - 1
src/assets/js/performanceAnalysis/plannedGeneration.js

@@ -212,7 +212,7 @@ export default {
         //     console.log(a,b,c)
         // },
         toExcel(){
-            excelHelper.exportExcel("callthepolicetable","负荷率排行榜",".xls",true);
+          this.BASE.excelHelp("callthepolicetable","计划发电量",".xls",true);
         },
     }
 }

+ 7 - 0
src/assets/js/singlePerformanceAnalysis/powerChart.js

@@ -36,6 +36,9 @@ export default {
   },
   created() { },
   methods: {
+    resize() {
+      location.reload()
+    },
     /**
      * 查询风场
      */
@@ -167,7 +170,11 @@ export default {
     },
   },
   mounted() {
+    window.addEventListener('resize', this.resize, true)
     this.query_wpid();
     this.query_scatter_1();
   },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.resize, true)
+ },
 };

+ 9 - 1
src/assets/js/singlePerformanceAnalysis/powerandWindspeedChart.js

@@ -28,6 +28,9 @@ export default {
   },
   created() {},
   methods: {
+    resize() {
+      location.reload()
+    },
     /**
      * 查询风机风场
      */
@@ -55,6 +58,7 @@ export default {
      * 获取数据
      */
     query_scatter() {
+      this.loading = true;
       let sdtDate = [];
       let lineDate = [];
       var digital = new URLSearchParams();
@@ -65,7 +69,7 @@ export default {
         sdtDate = res.data.scatter;
         lineDate = res.data.line;
         this.draw_scatter_diagram(sdtDate,lineDate);
-        this.loading=false;
+        this.loading = false;
       });
     },
     /**
@@ -157,7 +161,11 @@ export default {
     },
   },
   mounted() {
+    window.addEventListener('resize', this.resize, true)
     this.query_wpid();
     this.query_scatter();
   },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.resize, true)
+ },
 };

Разница между файлами не показана из-за своего большого размера
+ 569 - 565
src/tools/echartsToolzm.js


+ 6 - 12
src/views/normRanking/goodnessfitRank.vue

@@ -15,7 +15,6 @@
                 </el-option>
               </el-select>
             </el-form-item>
-
             <el-form-item label="开始时间">
               <el-date-picker
                 v-model="beginDate"
@@ -45,7 +44,7 @@
             </el-form-item>
 
             <el-form-item>
-              <el-button type="primary" :plain="true">导出</el-button>
+              <el-button type="primary" @click="toExcel" :plain="true">导出</el-button>
             </el-form-item>
 
             <el-form-item>
@@ -61,6 +60,8 @@
     <el-main>
       <el-card style=" height: 759px">
         <el-table
+          ref='table_sty'
+          class="table_sty"
           v-loading="loading"
           :data="tableData"
           id="tableData"
@@ -72,21 +73,19 @@
         >
           >
           <el-table-column label="拟合优度排行榜">
-            <el-table-column type="index" width="80"> </el-table-column>
+            <el-table-column type="index" > </el-table-column>
             <el-table-column
               type="selection"
               class="selection"
               @selection-change="changeFun"
-              width="60"
             >
             </el-table-column>
-            <el-table-column sortable prop="windfarm" label="风场" width="300">
+            <el-table-column sortable prop="windfarm" label="风场">
             </el-table-column>
             <el-table-column
               sortable
               prop="windturbine"
               label="风机"
-              width="300"
             >
             </el-table-column>
             <el-table-column
@@ -95,7 +94,6 @@
               :formatter="filter_bdate"
               value-format="yyyy-MM-dd"
               label="起始时间"
-              width="300"
             >
             </el-table-column>
             <el-table-column
@@ -104,7 +102,6 @@
               :formatter="filter_edate"
               value-format="yyyy-MM-dd"
               label="截至日期"
-              width="220"
             >
             </el-table-column>
             <el-table-column
@@ -112,7 +109,6 @@
               sortable
               prop="speed"
               label="平均风速"
-              width="295"
             >
             </el-table-column>
             <el-table-column
@@ -120,7 +116,6 @@
               prop="power"
               :formatter="filter_generatingCapacity"
               label="拟合优度"
-              width="295"
             >
             </el-table-column>
           </el-table-column>
@@ -132,9 +127,8 @@
         :modal-append-to-body="false"
         width="65%"
       >
-        <el-row>
           <div id="histogram" style="width: 100%; height: 500px"></div>
-        </el-row>
+        
       </el-dialog>
     </el-main>
   </el-container>

+ 2 - 0
src/views/performanceAnalysis/cutAndSpeed.vue

@@ -37,9 +37,11 @@
                 <el-button type="primary" @click="toExcel()">导出</el-button>
                 </el-form-item>
             </el-row>
+
             </el-form>
             </el-card>
             <el-table
+            
             class="table_sty"
             id="callthepolicetable"
             :data="gridData"

+ 1 - 0
src/views/performanceAnalysis/gradeEvaluation.vue

@@ -371,6 +371,7 @@
           id="daytable"
           :data="gridData"
           height="640"
+          sortTable="custom"
           @selection-change="handleSelectionChange"
           :header-cell-style="headStyle"
           @sort-change="changeTableSort"

+ 17 - 28
src/views/performanceAnalysis/singleMachinePower.vue

@@ -161,6 +161,7 @@
             </el-tab-pane>
         </el-tabs>
         <el-table v-if="switchtableall"
+            class="table_sty"
             id="singlemachinepower"
             :data="gridData"
             :row-style="{ height: '10px' }" 
@@ -175,28 +176,25 @@
             </el-table-column>
             <el-table-column
               prop="windturbineid"
-              label="风机"
-               width="460">
+              label="风机">
             </el-table-column>
             <el-table-column
             :sortable="'custom'"
               prop="speed"
-              label="风速"
-              width="460">
+              label="风速">
             </el-table-column>
             <el-table-column
               prop="actualpower"   
-              label="实际拟合功率"
-              width="460">
+              label="实际拟合功率">
             </el-table-column>
             <el-table-column
               prop="optimalpower"
-              label="最优拟合功率"
-              width="460">
+              label="最优拟合功率">
             </el-table-column>
             </el-table-column>        
        </el-table>
        <el-table v-if="switchtableday"
+            class="table_sty"
             id="singlemachinepower"
             :data="gridData"
             :row-style="{ height: '10px' }" 
@@ -211,29 +209,24 @@
             </el-table-column>
             <el-table-column
               prop="windturbineid"
-              label="风机"
-               width="370">
+              label="风机">
             </el-table-column>
             <el-table-column
             :sortable="'custom'"
               prop="speed"
-              label="风速"
-              width="370">
+              label="风速">
             </el-table-column>
             <el-table-column
               prop="actualpower"   
-              label="实际拟合功率"
-              width="370">
+              label="实际拟合功率">
             </el-table-column>
             <el-table-column
               prop="optimalpower"
-              label="最优拟合功率"
-              width="370">
+              label="最优拟合功率">
             </el-table-column>
             <el-table-column
                     prop="address"
-                    label="操作"
-                    width="370">
+                    label="操作">
                     <template slot-scope="scope">
                         <el-button size="mini"  @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                     </template>
@@ -241,6 +234,7 @@
             </el-table-column>        
        </el-table>
           <el-table v-if="switchtablemonth"
+            class="table_sty"
             id="singlemachinepower" 
             :data="gridData"
             :row-style="{ height: '10px' }" 
@@ -255,29 +249,24 @@
             </el-table-column>
             <el-table-column
               prop="windturbineid"
-              label="风机"
-               width="370">
+              label="风机">
             </el-table-column>
             <el-table-column
             :sortable="'custom'"
               prop="speed"
-              label="风速"
-              width="370">
+              label="风速">
             </el-table-column>
             <el-table-column
               prop="actualpower"   
-              label="实际拟合功率"
-              width="370">
+              label="实际拟合功率">
             </el-table-column>
             <el-table-column
               prop="optimalpower"
-              label="最优拟合功率"
-              width="370">
+              label="最优拟合功率">
             </el-table-column>
             <el-table-column
                     prop="address"
-                    label="操作"
-                    width="370">
+                    label="操作">
                     <template slot-scope="scope">
                         <el-button size="mini"  @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                     </template>

+ 37 - 20
src/views/singlePerformanceAnalysis/powerChart.vue

@@ -1,6 +1,4 @@
 <template>
-  <el-container>
-    <v-main>
       <el-tabs
         v-model="activeName"
         label-width="380px"
@@ -9,7 +7,9 @@
         style="width: 100%; height: 100%"
       >
         <el-tab-pane label="风场功率风速排布图" name="no_1" :key="'no_1'">
-          <el-form
+          <div class="fj_w">
+            <div class="fj_ws">
+              <el-form
             :inline="true"
             class="demo-form-inline"
             style="margin-top: 1%; margin-left: 1%"
@@ -56,21 +56,30 @@
                 >查询</el-button
               >
             </el-form-item>
-          </el-form>
-
-          <div
+              </el-form>
+            </div>
+            <div class="fj_wx">
+              <div
             id="scatter_diagram_1"
             v-loading="loading"
             style="
               height: 630px;
-              width: 1873px;
+              width: 100%;
               margin-left: 3px;
               margin-bottom: 3px;
             "
           ></div>
+            </div>
+          </div>
+          
+          
+  
+          
         </el-tab-pane>
         <el-tab-pane label="项目功率风速排布图" name="no_2" :key="'no_2'">
-          <el-form
+          <div class="xm_w">
+            <div class="xm_ws">
+              <el-form
             :inline="true"
             class="demo-form-inline"
             style="margin-top: 1%; margin-left: 1%"
@@ -132,21 +141,28 @@
                 >查询</el-button
               >
             </el-form-item>
-          </el-form>
-
-          <div
+              </el-form>
+            </div>
+            <div class="xm_wx">
+              <div
             id="scatter_diagram_2"
             v-loading="loading2"
             style="
               height: 630px;
-              width: 1873px;
+              width: 100%;
               margin-left: 3px;
               margin-bottom: 3px;
             "
           ></div>
+            </div>
+          </div>
+         
+          
         </el-tab-pane>
         <el-tab-pane label="线路功率风速排布图" name="no_3" :key="'no_3'">
-          <el-form
+          <div class="xl_w">
+            <div class="xl_ws">
+              <el-form
             :inline="true"
             class="demo-form-inline"
             style="margin-top: 1%; margin-left: 1%"
@@ -208,22 +224,23 @@
                 >查询</el-button
               >
             </el-form-item>
-          </el-form>
-          <el-card>
-            <div
+              </el-form>
+            </div>
+            <div class="xl_wx">
+              <div
               id="scatter_diagram_3"
               v-loading="loading3"
               style="
                 height: 630px;
-                width: 1833px;
+                width: 100%;
                 margin-bottom: 3px;
               "
             ></div>
-          </el-card>
+            </div>
+          </div>
+            
         </el-tab-pane>
       </el-tabs>
-    </v-main>
-  </el-container>
 </template>
 <script>
 import powerChart from "@assets/js/singlePerformanceAnalysis/powerChart";

+ 60 - 58
src/views/singlePerformanceAnalysis/powerandWindspeedChart.vue

@@ -1,67 +1,69 @@
 <template>
-  <div>
-    <el-form
-    style="width:9000px"
-      :inline="true"
-    >
-      <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"
+  <div class="box_w">
+    <div class="box_ws">
+      <el-form
+      style="width:9000px"
+        :inline="true"
+      >
+        <el-form-item label="风场">
+          <el-select
+            v-model="fc"
+            clearable
+            placeholder="请选择"
+            @change="query()"
           >
-          </el-option>
-        </el-select>
-      </el-form-item>
+            <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="year"
-          type="year"
-          value-format="yyyy"
-          placeholder="选择年"
-          :picker-options="pickerOptions"
-        >
+        <el-form-item label="年">
+          <el-date-picker
+            v-model="year"
+            type="year"
+            value-format="yyyy"
+            placeholder="选择年"
+            :picker-options="pickerOptions"
+          >
+            >
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="月">
+          <el-date-picker
+            v-model="month"
+            type="month"
+            value-format="M"
+            placeholder="选择月"
+            :picker-options="pickerOptions"
           >
-        </el-date-picker>
-      </el-form-item>
-      <el-form-item label="月">
-        <el-date-picker
-          v-model="month"
-          type="month"
-          value-format="M"
-          placeholder="选择月"
-          :picker-options="pickerOptions"
-        >
+            >
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="query_scatter" :plain="true"
+            >查询</el-button
           >
-        </el-date-picker>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" @click="query_scatter" :plain="true"
-          >查询</el-button
-        >
-      </el-form-item>
-    </el-form>
-    <div
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="box_wx"
       v-loading="loading"
       id="scatter_diagram"
       style="height: 730px; width: 100%; margin-left: 9px; margin-bottom: 39px"