页面自适应完成

src/assets/css/common.css

@@ -917,3 +917,12 @@ background-color: rgba(30,90,163, .5);
   background: rgba(0, 70, 199, 0.4);
   border: 1px solid #2a374f;
 }
+.el-date-range-picker .el-date-table td.in-range div{
+  background-color: #003277;
+}
+.el-date-range-picker .el-date-table td.in-range div:hover{
+  background-color: #003277;
+}
+.el-date-range-picker__header .el-picker-panel__icon-btn{
+    color: #bac5d5;
+}

src/components/chart/line/double-yAxis-line-chart.vue

@@ -91,7 +91,7 @@ export default {
         grid: {
           top: 56,
           left: 40,
-          right: 30,
+          right: 40,
           bottom: 24,
           containLabel: true,
         },

src/views/layout/economicsOperation/analyse/cleanAnalyse/index.vue

@@ -1,95 +1,102 @@
 <template>
   <div class="powerLinefitting">
-    <div class="powerLinefitting_topAll">
-      <div class="powerLinefitting_top">
-        <div class="form-wrapper">
-          <div class="select-wrapper">
-            <el-select
-              size="mini"
-              v-model="tabEvent"
-              placeholder="请选择"
-              @change="changeBtn"
+    <div class="powerLinefitting_top">
+      <div class="form-wrapper">
+        <div class="select-wrapper">
+          <el-select
+            size="mini"
+            v-model="tabEvent"
+            placeholder="请选择"
+            @change="changeBtn"
+          >
+            <el-option
+              v-for="item in tabOptions"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
             >
-              <el-option
-                v-for="item in tabOptions"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id"
-              >
-              </el-option>
-            </el-select>
-            <el-select
-              size="mini"
-              v-model="companyVal"
-              placeholder="请选择"
-              @change="changeCompan"
+            </el-option>
+          </el-select>
+          <el-select
+            size="mini"
+            v-model="companyVal"
+            placeholder="请选择"
+            @change="changeCompan"
+          >
+            <el-option
+              v-for="item in companyOptions"
+              :key="item.id"
+              :label="item.aname"
+              :value="item.id"
             >
-              <el-option
-                v-for="item in companyOptions"
-                :key="item.id"
-                :label="item.aname"
-                :value="item.id"
-              >
-              </el-option>
-            </el-select>
-            <el-select
-              size="mini"
-              v-model="stationVal"
-              placeholder="请选择"
-              clearable
-              @change="changeStation"
+            </el-option>
+          </el-select>
+          <el-select
+            size="mini"
+            v-model="stationVal"
+            placeholder="请选择"
+            clearable
+            @change="changeStation"
+          >
+            <el-option
+              v-for="item in stationOptions"
+              :key="item.id"
+              :label="item.aname"
+              :value="item.id"
             >
-              <el-option
-                v-for="item in stationOptions"
-                :key="item.id"
-                :label="item.aname"
-                :value="item.id"
-              >
-              </el-option>
-            </el-select>
-            <el-select
-              size="mini"
-              v-model="windVal"
-              placeholder="请选择"
-              clearable
-              @change="changeWind"
+            </el-option>
+          </el-select>
+          <el-select
+            size="mini"
+            v-model="windVal"
+            placeholder="请选择"
+            clearable
+            @change="changeWind"
+          >
+            <el-option
+              v-for="item in windsOptions"
+              :key="item.id"
+              :label="item.aname"
+              :value="item.nemCode"
             >
-              <el-option
-                v-for="item in windsOptions"
-                :key="item.id"
-                :label="item.aname"
-                :value="item.nemCode"
+            </el-option>
+          </el-select>
+        </div>
+        <div class="date-wrapper">
+          <div class="date-item-wrapper">
+            日期
+            <div class="date-item-date">
+              <el-date-picker
+                size="mini"
+                v-model="dateTime"
+                type="date"
+                value-format="YYYY-MM-DD"
+                placeholder="选择日期"
               >
-              </el-option>
-            </el-select>
-          </div>
-          <div class="date-wrapper">
-            <div class="date-item-wrapper">
-              日期
-              <div class="date-item-date">
-                <el-date-picker
-                  size="mini"
-                  v-model="dateTime"
-                  type="date"
-                  value-format="YYYY-MM-DD"
-                  placeholder="选择日期"
-                >
-                </el-date-picker>
-              </div>
+              </el-date-picker>
             </div>
           </div>
         </div>
-        <div class="but">
-          <el-button round size="mini" class="buttons" @click="getTableData"
-            >查询</el-button
-          >
-          <el-button round size="mini" class="buttons" @click="downXlsxFn"
-            >导出</el-button
-          >
-        </div>
+      </div>
+      <div class="but">
+        <el-button
+          round
+          size="mini"
+          class="buttons search"
+          @click="getTableData"
+          >查询</el-button
+        >
+        <el-button
+          round
+          size="mini"
+          class="buttons download"
+          @click="downXlsxFn"
+          >导出</el-button
+        >
       </div>
     </div>
-    <div style="background: rgba(0, 0, 0, 0.4)">
+
+    <div style="background: rgba(0, 0, 0, 0.4); height: calc(100% - 60px)">
       <div class="powerLinefitting_title clearfix">
         <div class="leftContent floatLeft"><span>清洗分析</span></div>
         <div class="rightContent floatRight"></div>
@@ -100,7 +107,7 @@
           :data="stationAnalyseData"
           stripe
           size="mini"
-          height="75vh"
+          height="calc(100% - 35px)"
           ref="fitting_table"
           style="width: 100%"
         >
@@ -314,123 +321,86 @@ export default {
 };
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 .powerLinefitting {
   padding: 0 23px;
-  .powerLinefitting_topAll {
+  height: 100%;
+  .powerLinefitting_top ::v-deep {
     display: flex;
-    justify-content: space-between;
-    .powerLinefitting_top {
+    flex-direction: row;
+    align-items: center;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    padding-left: 10px;
+    .form-wrapper {
       display: flex;
-      flex-direction: row;
       align-items: center;
-      margin-top: 10px;
-      margin-bottom: 10px;
-      .form-wrapper {
+      .select-wrapper {
         display: flex;
         align-items: center;
-        .select-wrapper {
-          display: flex;
-          align-items: center;
-          .el-select {
-            width: 155px;
-            .el-input .el-input__inner {
-              width: 150px;
-            }
-          }
-        }
-        .date-wrapper {
-          display: flex;
-          align-items: center;
-          font-size: 14px;
-          font-family: Microsoft YaHei;
-          font-weight: 400;
-          color: #b3b3b3;
-          margin-left: 10px;
-          .date-item-wrapper {
-            display: flex;
-            align-items: center;
-            margin-right: 15px;
-            .date-item-date {
-              margin-left: 10px;
-              .el-input .el-input__inner {
-                font-size: 13px;
-                color: #b3b3b3;
-              }
-            }
+        .el-select {
+          width: 155px;
+          .el-input .el-input__inner {
+            width: 150px;
           }
         }
       }
-      .station {
+      .date-wrapper {
         display: flex;
-        flex-direction: row;
         align-items: center;
         font-size: 14px;
         font-family: Microsoft YaHei;
         font-weight: 400;
         color: #b3b3b3;
-        margin-right: 25px;
-      }
-      .search-input {
         margin-left: 10px;
-        .el-input__inner {
-          width: 175px;
-        }
-        .el-input__suffix {
-          right: -50px;
-        }
-      }
-
-      .but {
-        display: flex;
-        flex-direction: row;
-        align-content: center;
-        .buttons:nth-child(1) {
-          background: rgba(0, 70, 199, 0.6);
-          border: 1px solid #1f51ae;
-          border-radius: 13px;
-          color: #fff;
-          &:hover {
-            background: rgba(14, 90, 229, 0.9);
-            border-radius: 13px;
-            color: #fff;
+        .date-item-wrapper {
+          display: flex;
+          align-items: center;
+          margin-right: 15px;
+          .date-item-date {
+            margin-left: 10px;
+            .el-input {
+              width: 155px;
+            }
+            .el-input .el-input__inner {
+              font-size: 13px;
+              color: #b3b3b3;
+            }
           }
         }
-        .buttons:nth-child(2) {
-          background: rgba(67, 81, 107, 0.3);
-          border: 1px solid #3b4c6c;
-          border-radius: 13px;
-          font-size: 14px;
-          color: #b3b3b3;
-        }
       }
     }
-    .selections {
+    .but {
       display: flex;
-      margin-top: 10px;
-      position: relative;
-      right: 120px;
-      .selections_btn {
-        flex: 0 0 55px;
-        text-align: center;
-        height: 33px;
-        line-height: 33px;
-        margin-right: 8px;
+      flex-direction: row;
+      align-content: center;
+    }
+    .el-button + .el-button {
+      margin-left: 0;
+    }
+    .buttons {
+      background: rgba(0, 70, 199, 0.6);
+      border: 1px solid #1f51ae;
+      border-radius: 13px;
+      font-size: 14px;
+      margin-right: 10px;
+
+      &.search {
         color: #fff;
-        font-size: 1.296vh;
-        background: fade(#606769, 20);
-        border: 1px solid fade(#606769, 20);
-        border-radius: 20px;
-        &:hover,
-        &.active {
-          background: fade(#0046c7, 80);
-          border: 1px solid #0046c7;
-          color: #b9b9b9;
-          cursor: pointer;
+        &:hover {
+          background: rgba(14, 90, 229, 0.9);
+          border-radius: 13px;
+          color: #fff;
         }
       }
+      &.download {
+        background: rgba(67, 81, 107, 0.3);
+        border: 1px solid #3b4c6c;
+        color: #b3b3b3;
+      }
     }
   }
+
   .powerLinefitting_title {
     padding-left: 10px;
     .leftContent {
@@ -471,7 +441,8 @@ export default {
     zoom: 1;
   }
 
-  .powerLinefitting_Table {
+  .powerLinefitting_Table::v-deep {
+    height: calc(100% - 46px);
     .historyBtn {
       cursor: pointer;
       color: #1c99ff;
@@ -545,12 +516,5 @@ export default {
       }
     }
   }
-
-  .el-picker__popper .el-date-range-picker__header .el-picker-panel__icon-btn {
-    color: #fff;
-  }
-  .el-picker__popper .el-date-table .in-range div {
-    background: #43516b;
-  }
 }
 </style>

src/views/layout/economicsOperation/analyse/inverterAnalyse/index.vue

@@ -1,65 +1,71 @@
 <template>
   <div class="powerLinefitting">
-    <div class="powerLinefitting_topAll">
-      <div class="powerLinefitting_top">
-        <div class="form-wrapper">
-          <div class="select-wrapper">
-            <el-select
-              size="mini"
-              v-model="tabEvent"
-              placeholder="请选择"
-              @change="changeBtn"
-            >
-              <el-option
-                v-for="item in tabOptions"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id"
-              >
-              </el-option>
-            </el-select>
-            <el-select
-              size="mini"
-              v-model="companyVal"
-              placeholder="请选择"
-              @change="changeCompan"
-            >
-              <el-option
-                v-for="item in companyOptions"
-                :key="item.id"
-                :label="item.aname"
-                :value="item.id"
-              >
-              </el-option>
-            </el-select>
-            <el-select
-              size="mini"
-              v-model="stationVal"
-              placeholder="请选择"
-              clearable
-              @change="changeStation"
+    <div class="powerLinefitting_top">
+      <div class="form-wrapper">
+        <div class="select-wrapper">
+          <el-select
+            size="mini"
+            v-model="tabEvent"
+            placeholder="请选择"
+            @change="changeBtn"
+          >
+            <el-option
+              v-for="item in tabOptions"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
             >
-              <el-option
-                v-for="item in stationOptions"
-                :key="item.id"
-                :label="item.aname"
-                :value="item.id"
-              >
-              </el-option>
-            </el-select>
-          </div>
-        </div>
-        <div class="but">
-          <el-button round size="mini" class="buttons" @click="getTableData"
-            >查询</el-button
+            </el-option>
+          </el-select>
+          <el-select
+            size="mini"
+            v-model="companyVal"
+            placeholder="请选择"
+            @change="changeCompan"
           >
-          <el-button round size="mini" class="buttons" @click="downXlsxFn"
-            >导出</el-button
+            <el-option
+              v-for="item in companyOptions"
+              :key="item.id"
+              :label="item.aname"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+          <el-select
+            size="mini"
+            v-model="stationVal"
+            placeholder="请选择"
+            clearable
+            @change="changeStation"
           >
+            <el-option
+              v-for="item in stationOptions"
+              :key="item.id"
+              :label="item.aname"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
         </div>
       </div>
+      <div class="but">
+        <el-button
+          round
+          size="mini"
+          class="buttons search"
+          @click="getTableData"
+          >查询</el-button
+        >
+        <el-button
+          round
+          size="mini"
+          class="buttons download"
+          @click="downXlsxFn"
+          >导出</el-button
+        >
+      </div>
     </div>
-    <div style="background: rgba(0, 0, 0, 0.4)">
+    <div style="background: rgba(0, 0, 0, 0.4); height: calc(100% - 60px)">
       <div class="powerLinefitting_title clearfix">
         <div class="leftContent floatLeft"><span>逆变器分析</span></div>
         <div class="rightContent floatRight"></div>
@@ -70,7 +76,7 @@
           :data="stationAnalyseData"
           stripe
           size="mini"
-          height="75vh"
+          height="calc(100% - 35px)"
           ref="fitting_table"
           style="width: 100%"
         >
@@ -104,7 +110,7 @@
     <el-dialog
       class="dialogs"
       width="85%"
-      top="8vh"
+      top="120px"
       v-model="dialogCurveVisible"
       :show-close="true"
     >
@@ -118,7 +124,7 @@
           <!--                    <i class="el-icon-full-screen"  @click="c"></i>-->
         </div>
       </template>
-      <div class="dialog-body" style="height: 65vh; width: 100%">
+      <div class="dialog-body" style="height: 400px; width: 100%">
         <HistoryDetail ref="inverterDetail" />
         <img
           class="dialog-img"
@@ -260,123 +266,85 @@ export default {
 };
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 .powerLinefitting {
   padding: 0 23px;
-  .powerLinefitting_topAll {
+  height: 100%;
+
+  .powerLinefitting_top ::v-deep {
     display: flex;
-    justify-content: space-between;
-    .powerLinefitting_top {
+    flex-direction: row;
+    align-items: center;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    padding-left: 10px;
+    .form-wrapper {
       display: flex;
-      flex-direction: row;
       align-items: center;
-      margin-top: 10px;
-      margin-bottom: 10px;
-      .form-wrapper {
+      .select-wrapper {
         display: flex;
         align-items: center;
-        .select-wrapper {
-          display: flex;
-          align-items: center;
-          .el-select {
-            width: 155px;
-            .el-input .el-input__inner {
-              width: 150px;
-            }
-          }
-        }
-        .date-wrapper {
-          display: flex;
-          align-items: center;
-          font-size: 14px;
-          font-family: Microsoft YaHei;
-          font-weight: 400;
-          color: #b3b3b3;
-          margin-left: 10px;
-          .date-item-wrapper {
-            display: flex;
-            align-items: center;
-            margin-right: 15px;
-            .date-item-date {
-              margin-left: 10px;
-              .el-input .el-input__inner {
-                font-size: 13px;
-                color: #b3b3b3;
-              }
-            }
+        .el-select {
+          width: 155px;
+          .el-input .el-input__inner {
+            width: 150px;
           }
         }
       }
-      .station {
+      .date-wrapper {
         display: flex;
-        flex-direction: row;
         align-items: center;
         font-size: 14px;
         font-family: Microsoft YaHei;
         font-weight: 400;
         color: #b3b3b3;
-        margin-right: 25px;
-      }
-      .search-input {
         margin-left: 10px;
-        .el-input__inner {
-          width: 175px;
-        }
-        .el-input__suffix {
-          right: -50px;
-        }
-      }
-
-      .but {
-        display: flex;
-        flex-direction: row;
-        align-content: center;
-        .buttons:nth-child(1) {
-          background: rgba(0, 70, 199, 0.6);
-          border: 1px solid #1f51ae;
-          border-radius: 13px;
-          color: #fff;
-          &:hover {
-            background: rgba(14, 90, 229, 0.9);
-            border-radius: 13px;
-            color: #fff;
+        .date-item-wrapper {
+          display: flex;
+          align-items: center;
+          margin-right: 15px;
+          .date-item-date {
+            margin-left: 10px;
+            .el-input .el-input__inner {
+              font-size: 13px;
+              color: #b3b3b3;
+            }
           }
         }
-        .buttons:nth-child(2) {
-          background: rgba(67, 81, 107, 0.3);
-          border: 1px solid #3b4c6c;
-          border-radius: 13px;
-          font-size: 14px;
-          color: #b3b3b3;
-        }
       }
     }
-    .selections {
+
+    .but {
       display: flex;
-      margin-top: 10px;
-      position: relative;
-      right: 120px;
-      .selections_btn {
-        flex: 0 0 55px;
-        text-align: center;
-        height: 33px;
-        line-height: 33px;
-        margin-right: 8px;
+      flex-direction: row;
+      align-content: center;
+    }
+    .el-button + .el-button {
+      margin-left: 0;
+    }
+    .buttons {
+      background: rgba(0, 70, 199, 0.6);
+      border: 1px solid #1f51ae;
+      border-radius: 13px;
+      font-size: 14px;
+      margin-right: 10px;
+
+      &.search {
         color: #fff;
-        font-size: 1.296vh;
-        background: fade(#606769, 20);
-        border: 1px solid fade(#606769, 20);
-        border-radius: 20px;
-        &:hover,
-        &.active {
-          background: fade(#0046c7, 80);
-          border: 1px solid #0046c7;
-          color: #b9b9b9;
-          cursor: pointer;
+        &:hover {
+          background: rgba(14, 90, 229, 0.9);
+          border-radius: 13px;
+          color: #fff;
         }
       }
+      &.download {
+        background: rgba(67, 81, 107, 0.3);
+        border: 1px solid #3b4c6c;
+        color: #b3b3b3;
+      }
     }
   }
+
   .powerLinefitting_title {
     padding-left: 10px;
     .leftContent {
@@ -417,14 +385,15 @@ export default {
     zoom: 1;
   }
 
-  .powerLinefitting_Table {
+  .powerLinefitting_Table ::v-deep {
+    height: calc(100% - 41px - 10px);
+    margin: 0 5px 5px 5px;
+    padding-bottom: 10px;
     .historyBtn {
       cursor: pointer;
       color: #1c99ff;
       padding: 3px 10px;
     }
-    margin: 0 5px 5px 5px;
-    padding-bottom: 10px;
     .pagination-wrapper {
       display: flex;
       justify-content: flex-end;
@@ -491,12 +460,5 @@ export default {
       }
     }
   }
-
-  .el-picker__popper .el-date-range-picker__header .el-picker-panel__icon-btn {
-    color: #fff;
-  }
-  .el-picker__popper .el-date-table .in-range div {
-    background: #43516b;
-  }
 }
 </style>

src/views/layout/economicsOperation/analyse/lightResourceAnalyse/index.vue

@@ -1,135 +1,130 @@
 <template>
   <div class="powerLinefitting">
-    <div class="powerLinefitting_topAll">
-      <div class="powerLinefitting_top">
-        <div class="form-wrapper">
-          <div class="select-wrapper">
-            <el-select
-                size="mini"
-                v-model="tabEvent"
-                placeholder="请选择"
-                @change="changeBtn"
+    <div class="powerLinefitting_top">
+      <div class="form-wrapper">
+        <div class="select-wrapper">
+          <el-select
+            size="mini"
+            v-model="tabEvent"
+            placeholder="请选择"
+            @change="changeBtn"
+          >
+            <el-option
+              v-for="item in tabOptions"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
             >
-              <el-option
-                  v-for="item in tabOptions"
-                  :key="item.id"
-                  :label="item.name"
-                  :value="item.id"
-              >
-              </el-option>
-            </el-select>
-            <el-select
-                size="mini"
-                v-model="companyVal"
-                placeholder="请选择"
-                @change="changeCompan"
+            </el-option>
+          </el-select>
+          <el-select
+            size="mini"
+            v-model="companyVal"
+            placeholder="请选择"
+            @change="changeCompan"
+          >
+            <el-option
+              v-for="item in companyOptions"
+              :key="item.id"
+              :label="item.aname"
+              :value="item.id"
             >
-              <el-option
-                  v-for="item in companyOptions"
-                  :key="item.id"
-                  :label="item.aname"
-                  :value="item.id"
-              >
-              </el-option>
-            </el-select>
-            <el-select
-                size="mini"
-                v-model="stationVal"
-                placeholder="请选择"
-                clearable
-                multiple
-                collapse-tags
-                @change="changeStation"
+            </el-option>
+          </el-select>
+          <el-select
+            size="mini"
+            v-model="stationVal"
+            placeholder="请选择"
+            clearable
+            multiple
+            collapse-tags
+            @change="changeStation"
+          >
+            <el-option
+              v-for="item in stationOptions"
+              :key="item.id"
+              :label="item.aname"
+              :value="item.id"
             >
-              <el-option
-                  v-for="item in stationOptions"
-                  :key="item.id"
-                  :label="item.aname"
-                  :value="item.id"
+            </el-option>
+          </el-select>
+        </div>
+        <div class="date-wrapper">
+          <div class="date-item-wrapper">
+            开始时间
+            <div class="date-item-date">
+              <el-date-picker
+                size="mini"
+                v-model="starTime"
+                type="datetime"
+                value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="选择时间"
               >
-              </el-option>
-            </el-select>
-          </div>
-          <div class="date-wrapper">
-            <div class="date-item-wrapper">
-              开始时间
-              <div class="date-item-date">
-                <el-date-picker
-                    size="mini"
-                    v-model="starTime"
-                    type="datetime"
-                    value-format="YYYY-MM-DD HH:mm:ss"
-                    placeholder="选择时间"
-                >
-                </el-date-picker>
-              </div>
+              </el-date-picker>
             </div>
-            <div class="date-item-wrapper">
-              结束时间
-              <div class="date-item-date">
-                <el-date-picker
-                    size="mini"
-                    v-model="endTime"
-                    type="datetime"
-                    value-format="YYYY-MM-DD HH:mm:ss"
-                    placeholder="选择时间"
-                >
-                </el-date-picker>
-              </div>
+          </div>
+          <div class="date-item-wrapper">
+            结束时间
+            <div class="date-item-date">
+              <el-date-picker
+                size="mini"
+                v-model="endTime"
+                type="datetime"
+                value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="选择时间"
+              >
+              </el-date-picker>
             </div>
           </div>
         </div>
-        <div class="but">
-          <el-button round size="mini" class="buttons" @click="getTableData"
+      </div>
+      <div class="but">
+        <el-button
+          round
+          size="mini"
+          class="buttons search"
+          @click="getTableData"
           >查询</el-button
-          >
-          <el-button round size="mini" class="buttons" @click="downXlsxFn"
+        >
+        <el-button
+          round
+          size="mini"
+          class="buttons download"
+          @click="downXlsxFn"
           >导出</el-button
-          >
-        </div>
+        >
       </div>
     </div>
-    <div style="background: rgba(0, 0, 0, 0.4)">
+
+    <div
+      style="
+        background: rgba(0, 0, 0, 0.4);
+        height: calc(100% - 50px - 300px - 20px);
+      "
+    >
       <div class="powerLinefitting_title clearfix">
         <div class="leftContent floatLeft"><span>光资源分析</span></div>
         <div class="rightContent floatRight"></div>
       </div>
       <div class="powerLinefitting_Table">
         <el-table
-            :data="tableData"
-            stripe
-            size="mini"
-            height="48vh"
-            ref="fitting_table"
-            style="width: 100%"
+          :data="tableData"
+          stripe
+          size="mini"
+          height="100%"
+          ref="fitting_table"
+          style="width: 100%"
         >
           <el-table-column
-              v-for="(item, index) in tableHeader"
-              :key="index"
-              sortable
-              :prop="item.code"
-              :label="item.title"
-              align="center"
+            v-for="(item, index) in tableHeader"
+            :key="index"
+            sortable
+            :prop="item.code"
+            :label="item.title"
+            align="center"
           >
           </el-table-column>
         </el-table>
-        <!--    <div class="pagination-wrapper">
-          <el-pagination
-            @current-change="handleCurrentChange"
-            :current-page="page.currentPage"
-            :page-size="page.pagesize"
-            layout="total, prev, pager, next, jumper"
-            :total="page.total"
-          >
-          </el-pagination>
-        </div>
-           <multipleLinesChart
-          height="100%"
-          width="100%"
-          :list="linesData"
-          :units="['W/m²']"
-        />
-        -->
       </div>
       <div class="powerLinefitting_Echarts">
         <div class="chart-name">
@@ -139,10 +134,10 @@
         </div>
         <div class="fittingEchartSty">
           <multipleLinesChart
-              height="100%"
-              width="100%"
-              :list="linesData"
-              :units="['W/m²']"
+            height="100%"
+            width="100%"
+            :list="linesData"
+            :units="['W/m²']"
           />
         </div>
       </div>
@@ -263,123 +258,83 @@ export default {
 };
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 .powerLinefitting {
   padding: 0 23px;
-  .powerLinefitting_topAll {
+  height: 100%;
+  .powerLinefitting_top ::v-deep {
     display: flex;
-    justify-content: space-between;
-    .powerLinefitting_top {
+    flex-direction: row;
+    align-items: center;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    padding-left: 10px;
+    .form-wrapper {
       display: flex;
-      flex-direction: row;
       align-items: center;
-      margin-top: 10px;
-      margin-bottom: 10px;
-      .form-wrapper {
+      .select-wrapper {
         display: flex;
         align-items: center;
-        .select-wrapper {
-          display: flex;
-          align-items: center;
-          .el-select {
-            width: 155px;
-            .el-input .el-input__inner {
-              width: 150px;
-            }
-          }
-        }
-        .date-wrapper {
-          display: flex;
-          align-items: center;
-          font-size: 14px;
-          font-family: Microsoft YaHei;
-          font-weight: 400;
-          color: #b3b3b3;
-          margin-left: 10px;
-          .date-item-wrapper {
-            display: flex;
-            align-items: center;
-            margin-right: 15px;
-            .date-item-date {
-              margin-left: 10px;
-              .el-input .el-input__inner {
-                font-size: 13px;
-                color: #b3b3b3;
-              }
-            }
+        .el-select {
+          width: 155px;
+          .el-input .el-input__inner {
+            width: 150px;
           }
         }
       }
-      .station {
+      .date-wrapper {
         display: flex;
-        flex-direction: row;
         align-items: center;
         font-size: 14px;
         font-family: Microsoft YaHei;
         font-weight: 400;
         color: #b3b3b3;
-        margin-right: 25px;
-      }
-      .search-input {
         margin-left: 10px;
-        .el-input__inner {
-          width: 175px;
-        }
-        .el-input__suffix {
-          right: -50px;
-        }
-      }
-
-      .but {
-        display: flex;
-        flex-direction: row;
-        align-content: center;
-        .buttons:nth-child(1) {
-          background: rgba(0, 70, 199, 0.6);
-          border: 1px solid #1f51ae;
-          border-radius: 13px;
-          color: #fff;
-          &:hover {
-            background: rgba(14, 90, 229, 0.9);
-            border-radius: 13px;
-            color: #fff;
+        .date-item-wrapper {
+          display: flex;
+          align-items: center;
+          margin-right: 15px;
+          .date-item-date {
+            margin-left: 10px;
+            .el-input .el-input__inner {
+              font-size: 13px;
+              color: #b3b3b3;
+            }
           }
         }
-        .buttons:nth-child(2) {
-          background: rgba(67, 81, 107, 0.3);
-          border: 1px solid #3b4c6c;
-          border-radius: 13px;
-          font-size: 14px;
-          color: #b3b3b3;
-        }
       }
     }
-    .selections {
+    .but {
       display: flex;
-      margin-top: 10px;
-      position: relative;
-      right: 120px;
-      .selections_btn {
-        flex: 0 0 55px;
-        text-align: center;
-        height: 33px;
-        line-height: 33px;
-        margin-right: 8px;
+      flex-direction: row;
+      align-content: center;
+    }
+    .el-button + .el-button {
+      margin-left: 0;
+    }
+    .buttons {
+      background: rgba(0, 70, 199, 0.6);
+      border: 1px solid #1f51ae;
+      border-radius: 13px;
+      font-size: 14px;
+      margin-right: 10px;
+
+      &.search {
         color: #fff;
-        font-size: 1.296vh;
-        background: fade(#606769, 20);
-        border: 1px solid fade(#606769, 20);
-        border-radius: 20px;
-        &:hover,
-        &.active {
-          background: fade(#0046c7, 80);
-          border: 1px solid #0046c7;
-          color: #b9b9b9;
-          cursor: pointer;
+        &:hover {
+          background: rgba(14, 90, 229, 0.9);
+          border-radius: 13px;
+          color: #fff;
         }
       }
+      &.download {
+        background: rgba(67, 81, 107, 0.3);
+        border: 1px solid #3b4c6c;
+        color: #b3b3b3;
+      }
     }
   }
+
   .powerLinefitting_title {
     padding-left: 10px;
     .leftContent {
@@ -423,6 +378,7 @@ export default {
   .powerLinefitting_Table {
     margin: 0 5px 5px 5px;
     padding-bottom: 10px;
+    height: calc(100% - 46px);
     .pagination-wrapper {
       display: flex;
       justify-content: flex-end;
@@ -495,7 +451,7 @@ export default {
     width: 100%;
     background: rgba(0, 0, 0, 0.45);
     position: relative;
-    height: 39px;
+    height: 300px;
     // border-bottom: 1px solid rgba(153, 153, 153, 0.5);
     font-size: 16px;
     font-family: Microsoft YaHei;
@@ -539,8 +495,7 @@ export default {
     }
     .fittingEchartSty {
       width: 100%;
-      height: 280px;
-      background: rgba(0, 0, 0, 0.45);
+      height: calc(100% - 39px);
     }
   }
 
@@ -566,28 +521,5 @@ export default {
       bottom: -1px;
     }
   }
-  .el-overlay {
-    .el-overlay-dialog {
-      overflow-y: hidden !important;
-      .powerLinefittinghistoryModel {
-        margin-top: 0 !important;
-        .el-dialog__body {
-          padding-top: 10px;
-        }
-      }
-      .contrastModal {
-        .el-dialog__body {
-          padding-top: 10px;
-        }
-      }
-    }
-  }
-
-  .el-picker__popper .el-date-range-picker__header .el-picker-panel__icon-btn {
-    color: #fff;
-  }
-  .el-picker__popper .el-date-table .in-range div {
-    background: #43516b;
-  }
 }
 </style>

src/views/layout/economicsOperation/analyse/standAloneAnalyse/historyDetail.vue

@@ -2,14 +2,14 @@
   <div class="historysingleMachine">
     <div class="historysingleMachine_top">
       <div class="stationsv">
-        <span class="timeaa">时间</span>
+        <span class="timeaa">日期</span>
         <el-date-picker
           v-model="pickerTimer"
           type="daterange"
           range-separator="To"
           start-placeholder="开始时间"
           end-placeholder="结束时间"
-          :size="size"
+          size="mini"
           format="YYYY/MM/DD"
           value-format="YYYY-MM-DD"
         />
@@ -210,8 +210,8 @@ export default {
 };
 </script>
 
-<style lang="less">
-.historysingleMachine {
+<style lang="less" scoped>
+.historysingleMachine ::v-deep {
   padding: 0 23px;
   .historysingleMachine_top {
     display: flex;
@@ -316,7 +316,6 @@ export default {
         width: 10%;
         color: #fff;
         position: relative;
-        top: -7px;
       }
     }
   }
@@ -389,5 +388,4 @@ export default {
     }
   }
 }
-
 </style>

src/views/layout/economicsOperation/analyse/standAloneAnalyse/historyDetailFd.vue

@@ -273,7 +273,7 @@ export default {
 };
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 .historysingleMachine {
   padding: 0 23px;
   .historysingleMachine_top {
@@ -379,7 +379,6 @@ export default {
         width: 10%;
         color: #fff;
         position: relative;
-        top: -7px;
       }
     }
   }

src/views/layout/economicsOperation/analyse/standAloneAnalyse/index.vue

@@ -1,74 +1,82 @@
 <template>
   <div class="singleMachine">
     <div class="singleMachine_top">
-      <div class="singleMachine-form">
-        <el-select
-          size="mini"
-          v-model="tabIndex"
-          placeholder="请选择"
-          @change="changeBtn"
-        >
-          <el-option
-            v-for="item in tabOptions"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id"
+      <div class="form-wrapper">
+        <div class="select-wrapper">
+          <el-select
+            size="mini"
+            v-model="tabIndex"
+            placeholder="请选择"
+            @change="changeBtn"
           >
-          </el-option>
-        </el-select>
-        <el-select
-          size="mini"
-          v-model="companyVal"
-          placeholder="请选择"
-          @change="changeCompan"
-        >
-          <el-option
-            v-for="item in companyOptions"
-            :key="item.id"
-            :label="item.aname"
-            :value="item.id"
+            <el-option
+              v-for="item in tabOptions"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+          <el-select
+            size="mini"
+            v-model="companyVal"
+            placeholder="请选择"
+            @change="changeCompan"
           >
-          </el-option>
-        </el-select>
-        <el-select
-          size="mini"
-          v-model="stationVal"
-          placeholder="请选择"
-          @change="changeStation"
-          clearable
-        >
-          <el-option
-            v-for="item in stationOptions"
-            :key="item.id"
-            :label="item.aname"
-            :value="item.id"
+            <el-option
+              v-for="item in companyOptions"
+              :key="item.id"
+              :label="item.aname"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+          <el-select
+            size="mini"
+            v-model="stationVal"
+            placeholder="请选择"
+            @change="changeStation"
+            clearable
           >
-          </el-option>
-        </el-select>
-        <div class="station">
-          时间
-          <div class="search-input">
-            <el-date-picker
-              v-model="pickerTimer"
-              type="date"
-              value-format="YYYY-MM-DD"
-              placeholder="选择日期"
-              popper-class="date-select"
+            <el-option
+              v-for="item in stationOptions"
+              :key="item.id"
+              :label="item.aname"
+              :value="item.id"
             >
-            </el-date-picker>
+            </el-option>
+          </el-select>
+        </div>
+        <div class="date-wrapper">
+          <div class="date-item-wrapper">
+            选择日期
+            <div class="date-item-date">
+              <el-date-picker
+                v-model="pickerTimer"
+                type="date"
+                value-format="YYYY-MM-DD"
+                placeholder="选择日期"
+                size="mini"
+              >
+              </el-date-picker>
+            </div>
           </div>
         </div>
       </div>
       <div class="but">
-        <el-button round size="mini" class="buttons" @click="seachData"
+        <el-button round size="mini" class="buttons search" @click="seachData"
           >搜索</el-button
         >
-        <el-button round size="mini" class="buttons" @click="downXlsxFn"
+        <el-button
+          round
+          size="mini"
+          class="buttons download"
+          @click="downXlsxFn"
           >导出</el-button
         >
       </div>
     </div>
-    <div style="background: rgba(0, 0, 0, 0.45)">
+    <div style="background: rgba(0, 0, 0, 0.45); height: calc(100% - 60px)">
       <div class="singleMachine_title clearfix">
         <div class="leftContent floatLeft"><span>单机性能分析</span></div>
         <div class="rightContent floatRight"></div>
@@ -79,7 +87,7 @@
           size="mini"
           stripe
           ref="stand_table"
-          height="75vh"
+          height="calc(100% - 40px)"
           style="width: 100%"
         >
           <el-table-column
@@ -113,19 +121,22 @@
             </template>
           </el-table-column>
         </el-table>
-        <el-pagination
-          @current-change="handleCurrentChange"
-          :current-page="page.currentPage"
-          :page-size="page.pagesize"
-          layout="total, prev, pager, next, jumper"
-          :total="page.total"
-        >
-        </el-pagination>
+        <div class="pagination-wrapper">
+          <el-pagination
+            @current-change="handleCurrentChange"
+            :current-page="page.currentPage"
+            :page-size="page.pagesize"
+            layout="total, prev, pager, next, jumper"
+            :total="page.total"
+          >
+          </el-pagination>
+        </div>
       </div>
     </div>
     <el-dialog
       v-model="dialogVisible"
       width="100%"
+      fullscreen
       custom-class="windhistoryDetailModel"
       :close-on-click-modal="false"
     >
@@ -360,10 +371,10 @@ export default {
 };
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 .singleMachine {
   padding: 0 23px;
-
+  height: 100%;
   .singleMachine_title {
     padding-left: 10px;
     .leftContent {
@@ -410,55 +421,69 @@ export default {
     zoom: 1;
   }
 
-  .singleMachine_top {
+  .singleMachine_top ::v-deep {
     display: flex;
     flex-direction: row;
     align-items: center;
-    padding-top: 10px;
+    margin-top: 10px;
     margin-bottom: 10px;
-
-    .singleMachine-form {
+    padding-left: 10px;
+    .form-wrapper {
       display: flex;
       align-items: center;
-      .el-select {
-        width: 155px;
-        margin-right: 15px;
-        ::v-deep.el-input .el-input__inner {
-          width: 150px;
+      .select-wrapper {
+        display: flex;
+        align-items: center;
+        .el-select {
+          width: 155px;
+          margin-right: 10px;
+          .el-input .el-input__inner {
+            width: 150px;
+          }
         }
       }
-    }
-    .station {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      font-size: 14px;
-      font-family: Microsoft YaHei;
-      font-weight: 400;
-      color: #b3b3b3;
-      margin-right: 10px;
-      margin-left: 10px;
-    }
-
-    .search-input {
-      margin-left: 10px;
-      .el-input__inner {
-        width: 175px;
-      }
-      .el-input__suffix {
-        right: -50px;
+      .date-wrapper {
+        display: flex;
+        align-items: center;
+        font-size: 14px;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        color: #b3b3b3;
+        .date-item-wrapper {
+          white-space: nowrap;
+          display: flex;
+          align-items: center;
+          margin-right: 15px;
+          .date-item-date {
+            margin-left: 10px;
+            .el-input {
+              width: 155px;
+            }
+            .el-input .el-input__inner {
+              width: 150px;
+              font-size: 13px;
+              color: #b3b3b3;
+            }
+          }
+        }
       }
     }
-
     .but {
       display: flex;
       flex-direction: row;
       align-content: center;
-      margin-left: 20px;
-      .buttons:nth-child(1) {
-        background: rgba(0, 70, 199, 0.6);
-        border: 1px solid #1f51ae;
-        border-radius: 13px;
+    }
+    .el-button + .el-button {
+      margin-left: 0;
+    }
+    .buttons {
+      background: rgba(0, 70, 199, 0.6);
+      border: 1px solid #1f51ae;
+      border-radius: 13px;
+      font-size: 14px;
+      margin-right: 10px;
+
+      &.search {
         color: #fff;
         &:hover {
           background: rgba(14, 90, 229, 0.9);
@@ -466,19 +491,18 @@ export default {
           color: #fff;
         }
       }
-      .buttons:nth-child(2) {
+      &.download {
         background: rgba(67, 81, 107, 0.3);
         border: 1px solid #3b4c6c;
-        border-radius: 13px;
-        font-size: 14px;
         color: #b3b3b3;
       }
     }
   }
 
-  .singleMachine_Table {
+  .singleMachine_Table ::v-deep {
     margin: 0 5px 5px 5px;
     padding-bottom: 10px;
+    height: calc(100% - 41px - 10px);
     .el-table--mini {
       margin: 5px;
       .el-table__header-wrapper {
@@ -508,59 +532,44 @@ export default {
         }
       }
     }
-
-    .el-pagination {
-      display: flex;
-      justify-content: flex-end;
-      margin-right: 40px;
-      margin-top: 20px;
-
-      .btn-prev,
-      .btn-next,
-      .btn-quickprev,
-      .btn-quicknext,
-      .el-pager,
-      .number {
-        background: rgba(58, 63, 75, 0.4);
-        color: #fff;
-        border-radius: 2px;
-      }
-
-      .el-pager .active {
-        background: #083c94;
-        color: #fff;
-        border-radius: 2px;
-      }
-
-      .el-pagination__total,
-      .el-pagination__jump {
-        color: #fff;
-        .el-input__inner {
-          background: rgba(58, 63, 75, 0.2);
-          border: 1px solid #3e4349;
-          color: #fff;
-          border-radius: 2px;
-        }
-      }
-    }
-
     .historyBtn {
       cursor: pointer;
       color: #1c99ff;
       padding: 3px 10px;
     }
-  }
-
-  .el-overlay {
-    .el-overlay-dialog {
-      overflow-y: hidden !important;
+    .pagination-wrapper {
+      display: flex;
+      justify-content: flex-end;
+      padding-right: 20px;
+      .el-pagination {
+        display: flex;
+        align-items: center;
+        .btn-prev,
+        .btn-next,
+        .btn-quickprev,
+        .btn-quicknext,
+        .el-pager,
+        .number {
+          background: rgba(58, 63, 75, 0.4);
+          color: #fff;
+          border-radius: 2px;
+        }
 
-      .windhistoryDetailModel,
-      .windDetailmodal {
-        margin-top: 0 !important;
+        .el-pager .active {
+          background: #083c94;
+          color: #fff;
+          border-radius: 2px;
+        }
 
-        .el-dialog__body {
-          padding: 10px 20px 20px 20px;
+        .el-pagination__total,
+        .el-pagination__jump {
+          color: #fff;
+          .el-input__inner {
+            background: rgba(58, 63, 75, 0.2);
+            border: 1px solid #3e4349;
+            color: #fff;
+            border-radius: 2px;
+          }
         }
       }
     }

src/views/layout/economicsOperation/analyse/standAloneAnalyse/indexFd.vue

@@ -1,74 +1,82 @@
 <template>
   <div class="singleMachine">
     <div class="singleMachine_top">
-      <div class="singleMachine-form">
-        <el-select
-          size="mini"
-          v-model="tabIndex"
-          placeholder="请选择"
-          @change="changeBtn"
-        >
-          <el-option
-            v-for="item in tabOptions"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id"
+      <div class="form-wrapper">
+        <div class="select-wrapper">
+          <el-select
+            size="mini"
+            v-model="tabIndex"
+            placeholder="请选择"
+            @change="changeBtn"
           >
-          </el-option>
-        </el-select>
-        <el-select
-          size="mini"
-          v-model="companyVal"
-          placeholder="请选择"
-          @change="changeCompan"
-        >
-          <el-option
-            v-for="item in companyOptions"
-            :key="item.id"
-            :label="item.aname"
-            :value="item.id"
+            <el-option
+              v-for="item in tabOptions"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+          <el-select
+            size="mini"
+            v-model="companyVal"
+            placeholder="请选择"
+            @change="changeCompan"
           >
-          </el-option>
-        </el-select>
-        <el-select
-          size="mini"
-          v-model="stationVal"
-          placeholder="请选择"
-          @change="changeStation"
-          clearable
-        >
-          <el-option
-            v-for="item in stationOptions"
-            :key="item.id"
-            :label="item.aname"
-            :value="item.id"
+            <el-option
+              v-for="item in companyOptions"
+              :key="item.id"
+              :label="item.aname"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+          <el-select
+            size="mini"
+            v-model="stationVal"
+            placeholder="请选择"
+            @change="changeStation"
+            clearable
           >
-          </el-option>
-        </el-select>
-        <div class="station">
-          时间
-          <div class="search-input">
-            <el-date-picker
-              v-model="pickerTimer"
-              type="date"
-              value-format="YYYY-MM-DD"
-              placeholder="选择日期"
-              popper-class="date-select"
+            <el-option
+              v-for="item in stationOptions"
+              :key="item.id"
+              :label="item.aname"
+              :value="item.id"
             >
-            </el-date-picker>
+            </el-option>
+          </el-select>
+        </div>
+        <div class="date-wrapper">
+          <div class="date-item-wrapper">
+            选择日期
+            <div class="date-item-date">
+              <el-date-picker
+                v-model="pickerTimer"
+                type="date"
+                value-format="YYYY-MM-DD"
+                placeholder="选择日期"
+                size="mini"
+              >
+              </el-date-picker>
+            </div>
           </div>
         </div>
       </div>
       <div class="but">
-        <el-button round size="mini" class="buttons" @click="seachData"
+        <el-button round size="mini" class="buttons search" @click="seachData"
           >搜索</el-button
         >
-        <el-button round size="mini" class="buttons" @click="downXlsxFn"
+        <el-button
+          round
+          size="mini"
+          class="buttons download"
+          @click="downXlsxFn"
           >导出</el-button
         >
       </div>
     </div>
-    <div style="background: rgba(0, 0, 0, 0.45)">
+    <div style="background: rgba(0, 0, 0, 0.45); height: calc(100% - 60px)">
       <div class="singleMachine_title clearfix">
         <div class="leftContent floatLeft"><span>单机性能分析</span></div>
         <div class="rightContent floatRight"></div>
@@ -79,7 +87,7 @@
           size="mini"
           stripe
           ref="stand_table"
-          height="75vh"
+          height="calc(100% - 40px)"
           style="width: 100%"
         >
           <el-table-column
@@ -126,6 +134,7 @@
     <el-dialog
       v-model="dialogVisible"
       width="100%"
+      fullscreen
       custom-class="windhistoryDetailModel"
       :close-on-click-modal="false"
     >
@@ -350,10 +359,10 @@ export default {
 };
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 .singleMachine {
   padding: 0 23px;
-
+  height: 100%;
   .singleMachine_title {
     padding-left: 10px;
     .leftContent {
@@ -400,55 +409,69 @@ export default {
     zoom: 1;
   }
 
-  .singleMachine_top {
+  .singleMachine_top ::v-deep {
     display: flex;
     flex-direction: row;
     align-items: center;
-    padding-top: 10px;
+    margin-top: 10px;
     margin-bottom: 10px;
-
-    .singleMachine-form {
+    padding-left: 10px;
+    .form-wrapper {
       display: flex;
       align-items: center;
-      .el-select {
-        width: 155px;
-        margin-right: 15px;
-        ::v-deep.el-input .el-input__inner {
-          width: 150px;
+      .select-wrapper {
+        display: flex;
+        align-items: center;
+        .el-select {
+          width: 155px;
+          margin-right: 10px;
+          .el-input .el-input__inner {
+            width: 150px;
+          }
         }
       }
-    }
-    .station {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      font-size: 14px;
-      font-family: Microsoft YaHei;
-      font-weight: 400;
-      color: #b3b3b3;
-      margin-right: 10px;
-      margin-left: 10px;
-    }
-
-    .search-input {
-      margin-left: 10px;
-      .el-input__inner {
-        width: 175px;
-      }
-      .el-input__suffix {
-        right: -50px;
+      .date-wrapper {
+        display: flex;
+        align-items: center;
+        font-size: 14px;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        color: #b3b3b3;
+        .date-item-wrapper {
+          white-space: nowrap;
+          display: flex;
+          align-items: center;
+          margin-right: 15px;
+          .date-item-date {
+            margin-left: 10px;
+            .el-input {
+              width: 155px;
+            }
+            .el-input .el-input__inner {
+              width: 150px;
+              font-size: 13px;
+              color: #b3b3b3;
+            }
+          }
+        }
       }
     }
-
     .but {
       display: flex;
       flex-direction: row;
       align-content: center;
-      margin-left: 20px;
-      .buttons:nth-child(1) {
-        background: rgba(0, 70, 199, 0.6);
-        border: 1px solid #1f51ae;
-        border-radius: 13px;
+    }
+    .el-button + .el-button {
+      margin-left: 0;
+    }
+    .buttons {
+      background: rgba(0, 70, 199, 0.6);
+      border: 1px solid #1f51ae;
+      border-radius: 13px;
+      font-size: 14px;
+      margin-right: 10px;
+
+      &.search {
         color: #fff;
         &:hover {
           background: rgba(14, 90, 229, 0.9);
@@ -456,11 +479,9 @@ export default {
           color: #fff;
         }
       }
-      .buttons:nth-child(2) {
+      &.download {
         background: rgba(67, 81, 107, 0.3);
         border: 1px solid #3b4c6c;
-        border-radius: 13px;
-        font-size: 14px;
         color: #b3b3b3;
       }
     }
@@ -469,6 +490,7 @@ export default {
   .singleMachine_Table {
     margin: 0 5px 5px 5px;
     padding-bottom: 10px;
+    height: calc(100% - 41px - 10px);
     .el-table--mini {
       margin: 5px;
       .el-table__header-wrapper {

src/views/layout/economicsOperation/analyse/stationAnalyse/index.vue

@@ -1,93 +1,105 @@
 <template>
   <div class="powerLinefitting">
-    <div class="powerLinefitting_topAll">
-      <div class="powerLinefitting_top">
-        <div class="form-wrapper">
-          <div class="select-wrapper">
-            <el-select
-              size="mini"
-              v-model="tabEvent"
-              placeholder="请选择"
-              @change="changeBtn"
+    <div class="powerLinefitting_top">
+      <div class="form-wrapper">
+        <div class="select-wrapper">
+          <el-select
+            size="mini"
+            v-model="tabEvent"
+            placeholder="请选择"
+            @change="changeBtn"
+          >
+            <el-option
+              v-for="item in tabOptions"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
             >
-              <el-option
-                v-for="item in tabOptions"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id"
-              >
-              </el-option>
-            </el-select>
-            <el-select
-              size="mini"
-              v-model="companyVal"
-              placeholder="请选择"
-              @change="changeCompan"
+            </el-option>
+          </el-select>
+          <el-select
+            size="mini"
+            v-model="companyVal"
+            placeholder="请选择"
+            @change="changeCompan"
+          >
+            <el-option
+              v-for="item in companyOptions"
+              :key="item.id"
+              :label="item.aname"
+              :value="item.id"
             >
-              <el-option
-                v-for="item in companyOptions"
-                :key="item.id"
-                :label="item.aname"
-                :value="item.id"
-              >
-              </el-option>
-            </el-select>
-            <el-select
-              size="mini"
-              v-model="stationVal"
-              placeholder="请选择"
-              clearable
-              @change="changeStation"
+            </el-option>
+          </el-select>
+          <el-select
+            size="mini"
+            v-model="stationVal"
+            placeholder="请选择"
+            clearable
+            @change="changeStation"
+          >
+            <el-option
+              v-for="item in stationOptions"
+              :key="item.id"
+              :label="item.aname"
+              :value="item.id"
             >
-              <el-option
-                v-for="item in stationOptions"
-                :key="item.id"
-                :label="item.aname"
-                :value="item.id"
+            </el-option>
+          </el-select>
+        </div>
+        <div class="date-wrapper">
+          <div class="date-item-wrapper">
+            开始时间
+            <div class="date-item-date">
+              <el-date-picker
+                size="mini"
+                v-model="starTime"
+                type="datetime"
+                value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="选择时间"
               >
-              </el-option>
-            </el-select>
-          </div>
-          <div class="date-wrapper">
-            <div class="date-item-wrapper">
-              开始时间
-              <div class="date-item-date">
-                <el-date-picker
-                  size="mini"
-                  v-model="starTime"
-                  type="datetime"
-                  value-format="YYYY-MM-DD HH:mm:ss"
-                  placeholder="选择时间"
-                >
-                </el-date-picker>
-              </div>
+              </el-date-picker>
             </div>
-            <div class="date-item-wrapper">
-              结束时间
-              <div class="date-item-date">
-                <el-date-picker
-                  size="mini"
-                  v-model="endTime"
-                  type="datetime"
-                  value-format="YYYY-MM-DD HH:mm:ss"
-                  placeholder="选择时间"
-                >
-                </el-date-picker>
-              </div>
+          </div>
+          <div class="date-item-wrapper">
+            结束时间
+            <div class="date-item-date">
+              <el-date-picker
+                size="mini"
+                v-model="endTime"
+                type="datetime"
+                value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="选择时间"
+              >
+              </el-date-picker>
             </div>
           </div>
         </div>
-        <div class="but">
-          <el-button round size="mini" class="buttons" @click="getTableData"
-            >查询</el-button
-          >
-          <el-button round size="mini" class="buttons" @click="downXlsxFn"
-            >导出</el-button
-          >
-        </div>
+      </div>
+      <div class="but">
+        <el-button
+          round
+          size="mini"
+          class="buttons search"
+          @click="getTableData"
+          >查询</el-button
+        >
+        <el-button
+          round
+          size="mini"
+          class="buttons download"
+          @click="downXlsxFn"
+          >导出</el-button
+        >
       </div>
     </div>
-    <div style="background: rgba(0, 0, 0, 0.4)">
+
+    <div
+      style="
+        background: rgba(0, 0, 0, 0.4);
+        height: calc(100% - 50px - 300px - 20px);
+      "
+    >
       <div class="powerLinefitting_title clearfix">
         <div class="leftContent floatLeft"><span>场站性能分析</span></div>
         <div class="rightContent floatRight"></div>
@@ -98,7 +110,7 @@
           :data="stationAnalyseData"
           stripe
           size="mini"
-          height="48vh"
+          height="100%"
           ref="fitting_table"
           style="width: 100%"
         >
@@ -259,123 +271,85 @@ export default {
 };
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 .powerLinefitting {
   padding: 0 23px;
-  .powerLinefitting_topAll {
+  height: 100%;
+
+  .powerLinefitting_top ::v-deep {
     display: flex;
-    justify-content: space-between;
-    .powerLinefitting_top {
+    flex-direction: row;
+    align-items: center;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    padding-left: 10px;
+    .form-wrapper {
       display: flex;
-      flex-direction: row;
       align-items: center;
-      margin-top: 10px;
-      margin-bottom: 10px;
-      .form-wrapper {
+      .select-wrapper {
         display: flex;
         align-items: center;
-        .select-wrapper {
-          display: flex;
-          align-items: center;
-          .el-select {
-            width: 155px;
-            .el-input .el-input__inner {
-              width: 150px;
-            }
-          }
-        }
-        .date-wrapper {
-          display: flex;
-          align-items: center;
-          font-size: 14px;
-          font-family: Microsoft YaHei;
-          font-weight: 400;
-          color: #b3b3b3;
-          margin-left: 10px;
-          .date-item-wrapper {
-            display: flex;
-            align-items: center;
-            margin-right: 15px;
-            .date-item-date {
-              margin-left: 10px;
-              .el-input .el-input__inner {
-                font-size: 13px;
-                color: #b3b3b3;
-              }
-            }
+        .el-select {
+          width: 155px;
+          .el-input .el-input__inner {
+            width: 150px;
           }
         }
       }
-      .station {
+      .date-wrapper {
         display: flex;
-        flex-direction: row;
         align-items: center;
         font-size: 14px;
         font-family: Microsoft YaHei;
         font-weight: 400;
         color: #b3b3b3;
-        margin-right: 25px;
-      }
-      .search-input {
         margin-left: 10px;
-        .el-input__inner {
-          width: 175px;
-        }
-        .el-input__suffix {
-          right: -50px;
-        }
-      }
-
-      .but {
-        display: flex;
-        flex-direction: row;
-        align-content: center;
-        .buttons:nth-child(1) {
-          background: rgba(0, 70, 199, 0.6);
-          border: 1px solid #1f51ae;
-          border-radius: 13px;
-          color: #fff;
-          &:hover {
-            background: rgba(14, 90, 229, 0.9);
-            border-radius: 13px;
-            color: #fff;
+        .date-item-wrapper {
+          display: flex;
+          align-items: center;
+          margin-right: 15px;
+          .date-item-date {
+            margin-left: 10px;
+            .el-input .el-input__inner {
+              font-size: 13px;
+              color: #b3b3b3;
+            }
           }
         }
-        .buttons:nth-child(2) {
-          background: rgba(67, 81, 107, 0.3);
-          border: 1px solid #3b4c6c;
-          border-radius: 13px;
-          font-size: 14px;
-          color: #b3b3b3;
-        }
       }
     }
-    .selections {
+
+    .but {
       display: flex;
-      margin-top: 10px;
-      position: relative;
-      right: 120px;
-      .selections_btn {
-        flex: 0 0 55px;
-        text-align: center;
-        height: 33px;
-        line-height: 33px;
-        margin-right: 8px;
+      flex-direction: row;
+      align-content: center;
+    }
+    .el-button + .el-button {
+      margin-left: 0;
+    }
+    .buttons {
+      background: rgba(0, 70, 199, 0.6);
+      border: 1px solid #1f51ae;
+      border-radius: 13px;
+      font-size: 14px;
+      margin-right: 10px;
+
+      &.search {
         color: #fff;
-        font-size: 1.296vh;
-        background: fade(#606769, 20);
-        border: 1px solid fade(#606769, 20);
-        border-radius: 20px;
-        &:hover,
-        &.active {
-          background: fade(#0046c7, 80);
-          border: 1px solid #0046c7;
-          color: #b9b9b9;
-          cursor: pointer;
+        &:hover {
+          background: rgba(14, 90, 229, 0.9);
+          border-radius: 13px;
+          color: #fff;
         }
       }
+      &.download {
+        background: rgba(67, 81, 107, 0.3);
+        border: 1px solid #3b4c6c;
+        color: #b3b3b3;
+      }
     }
   }
+
   .powerLinefitting_title {
     padding-left: 10px;
     .leftContent {
@@ -419,6 +393,7 @@ export default {
   .powerLinefitting_Table {
     margin: 0 5px 5px 5px;
     padding-bottom: 10px;
+    height: calc(100% - 46px);
     .el-table--mini {
       margin: 5px;
       .el-table__header-wrapper {
@@ -454,8 +429,7 @@ export default {
     width: 100%;
     background: rgba(0, 0, 0, 0.45);
     position: relative;
-    height: 39px;
-    // border-bottom: 1px solid rgba(153, 153, 153, 0.5);
+    height: 300px;
     font-size: 16px;
     font-family: Microsoft YaHei;
     font-weight: 400;
@@ -498,32 +472,8 @@ export default {
     }
     .fittingEchartSty {
       width: 100%;
-      height: 280px;
-      background: rgba(0, 0, 0, 0.45);
-    }
-  }
-  .el-overlay {
-    .el-overlay-dialog {
-      overflow-y: hidden !important;
-      .powerLinefittinghistoryModel {
-        margin-top: 0 !important;
-        .el-dialog__body {
-          padding-top: 10px;
-        }
-      }
-      .contrastModal {
-        .el-dialog__body {
-          padding-top: 10px;
-        }
-      }
+      height: calc(100% - 39px);
     }
   }
-
-  .el-picker__popper .el-date-range-picker__header .el-picker-panel__icon-btn {
-    color: #fff;
-  }
-  .el-picker__popper .el-date-table .in-range div {
-    background: #43516b;
-  }
 }
 </style>

src/views/layout/economicsOperation/analyse/stationAnalyse/indexFd.vue

@@ -1,93 +1,105 @@
 <template>
   <div class="powerLinefitting">
-    <div class="powerLinefitting_topAll">
-      <div class="powerLinefitting_top">
-        <div class="form-wrapper">
-          <div class="select-wrapper">
-            <el-select
-              size="mini"
-              v-model="tabEvent"
-              placeholder="请选择"
-              @change="changeBtn"
+    <div class="powerLinefitting_top">
+      <div class="form-wrapper">
+        <div class="select-wrapper">
+          <el-select
+            size="mini"
+            v-model="tabEvent"
+            placeholder="请选择"
+            @change="changeBtn"
+          >
+            <el-option
+              v-for="item in tabOptions"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
             >
-              <el-option
-                v-for="item in tabOptions"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id"
-              >
-              </el-option>
-            </el-select>
-            <el-select
-              size="mini"
-              v-model="companyVal"
-              placeholder="请选择"
-              @change="changeCompan"
+            </el-option>
+          </el-select>
+          <el-select
+            size="mini"
+            v-model="companyVal"
+            placeholder="请选择"
+            @change="changeCompan"
+          >
+            <el-option
+              v-for="item in companyOptions"
+              :key="item.id"
+              :label="item.aname"
+              :value="item.id"
             >
-              <el-option
-                v-for="item in companyOptions"
-                :key="item.id"
-                :label="item.aname"
-                :value="item.id"
-              >
-              </el-option>
-            </el-select>
-            <el-select
-              size="mini"
-              v-model="stationVal"
-              placeholder="请选择"
-              clearable
-              @change="changeStation"
+            </el-option>
+          </el-select>
+          <el-select
+            size="mini"
+            v-model="stationVal"
+            placeholder="请选择"
+            clearable
+            @change="changeStation"
+          >
+            <el-option
+              v-for="item in stationOptions"
+              :key="item.id"
+              :label="item.aname"
+              :value="item.id"
             >
-              <el-option
-                v-for="item in stationOptions"
-                :key="item.id"
-                :label="item.aname"
-                :value="item.id"
+            </el-option>
+          </el-select>
+        </div>
+        <div class="date-wrapper">
+          <div class="date-item-wrapper">
+            开始时间
+            <div class="date-item-date">
+              <el-date-picker
+                size="mini"
+                v-model="starTime"
+                type="datetime"
+                value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="选择时间"
               >
-              </el-option>
-            </el-select>
-          </div>
-          <div class="date-wrapper">
-            <div class="date-item-wrapper">
-              开始时间
-              <div class="date-item-date">
-                <el-date-picker
-                  size="mini"
-                  v-model="starTime"
-                  type="datetime"
-                  value-format="YYYY-MM-DD HH:mm:ss"
-                  placeholder="选择时间"
-                >
-                </el-date-picker>
-              </div>
+              </el-date-picker>
             </div>
-            <div class="date-item-wrapper">
-              结束时间
-              <div class="date-item-date">
-                <el-date-picker
-                  size="mini"
-                  v-model="endTime"
-                  type="datetime"
-                  value-format="YYYY-MM-DD HH:mm:ss"
-                  placeholder="选择时间"
-                >
-                </el-date-picker>
-              </div>
+          </div>
+          <div class="date-item-wrapper">
+            结束时间
+            <div class="date-item-date">
+              <el-date-picker
+                size="mini"
+                v-model="endTime"
+                type="datetime"
+                value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="选择时间"
+              >
+              </el-date-picker>
             </div>
           </div>
         </div>
-        <div class="but">
-          <el-button round size="mini" class="buttons" @click="getTableData"
-            >查询</el-button
-          >
-          <el-button round size="mini" class="buttons" @click="downXlsxFn"
-            >导出</el-button
-          >
-        </div>
+      </div>
+      <div class="but">
+        <el-button
+          round
+          size="mini"
+          class="buttons search"
+          @click="getTableData"
+          >查询</el-button
+        >
+        <el-button
+          round
+          size="mini"
+          class="buttons download"
+          @click="downXlsxFn"
+          >导出</el-button
+        >
       </div>
     </div>
-    <div style="background: rgba(0, 0, 0, 0.4)">
+
+    <div
+      style="
+        background: rgba(0, 0, 0, 0.4);
+        height: calc(100% - 50px - 300px - 20px);
+      "
+    >
       <div class="powerLinefitting_title clearfix">
         <div class="leftContent floatLeft"><span>场站性能分析</span></div>
         <div class="rightContent floatRight"></div>
@@ -98,7 +110,7 @@
           :data="stationAnalyseData"
           stripe
           size="mini"
-          height="48vh"
+          height="100%"
           ref="fitting_table"
           style="width: 100%"
         >
@@ -259,123 +271,85 @@ export default {
 };
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 .powerLinefitting {
   padding: 0 23px;
-  .powerLinefitting_topAll {
+  height: 100%;
+
+  .powerLinefitting_top ::v-deep {
     display: flex;
-    justify-content: space-between;
-    .powerLinefitting_top {
+    flex-direction: row;
+    align-items: center;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    padding-left: 10px;
+    .form-wrapper {
       display: flex;
-      flex-direction: row;
       align-items: center;
-      margin-top: 10px;
-      margin-bottom: 10px;
-      .form-wrapper {
+      .select-wrapper {
         display: flex;
         align-items: center;
-        .select-wrapper {
-          display: flex;
-          align-items: center;
-          .el-select {
-            width: 155px;
-            .el-input .el-input__inner {
-              width: 150px;
-            }
-          }
-        }
-        .date-wrapper {
-          display: flex;
-          align-items: center;
-          font-size: 14px;
-          font-family: Microsoft YaHei;
-          font-weight: 400;
-          color: #b3b3b3;
-          margin-left: 10px;
-          .date-item-wrapper {
-            display: flex;
-            align-items: center;
-            margin-right: 15px;
-            .date-item-date {
-              margin-left: 10px;
-              .el-input .el-input__inner {
-                font-size: 13px;
-                color: #b3b3b3;
-              }
-            }
+        .el-select {
+          width: 155px;
+          .el-input .el-input__inner {
+            width: 150px;
           }
         }
       }
-      .station {
+      .date-wrapper {
         display: flex;
-        flex-direction: row;
         align-items: center;
         font-size: 14px;
         font-family: Microsoft YaHei;
         font-weight: 400;
         color: #b3b3b3;
-        margin-right: 25px;
-      }
-      .search-input {
         margin-left: 10px;
-        .el-input__inner {
-          width: 175px;
-        }
-        .el-input__suffix {
-          right: -50px;
-        }
-      }
-
-      .but {
-        display: flex;
-        flex-direction: row;
-        align-content: center;
-        .buttons:nth-child(1) {
-          background: rgba(0, 70, 199, 0.6);
-          border: 1px solid #1f51ae;
-          border-radius: 13px;
-          color: #fff;
-          &:hover {
-            background: rgba(14, 90, 229, 0.9);
-            border-radius: 13px;
-            color: #fff;
+        .date-item-wrapper {
+          display: flex;
+          align-items: center;
+          margin-right: 15px;
+          .date-item-date {
+            margin-left: 10px;
+            .el-input .el-input__inner {
+              font-size: 13px;
+              color: #b3b3b3;
+            }
           }
         }
-        .buttons:nth-child(2) {
-          background: rgba(67, 81, 107, 0.3);
-          border: 1px solid #3b4c6c;
-          border-radius: 13px;
-          font-size: 14px;
-          color: #b3b3b3;
-        }
       }
     }
-    .selections {
+
+    .but {
       display: flex;
-      margin-top: 10px;
-      position: relative;
-      right: 120px;
-      .selections_btn {
-        flex: 0 0 55px;
-        text-align: center;
-        height: 33px;
-        line-height: 33px;
-        margin-right: 8px;
+      flex-direction: row;
+      align-content: center;
+    }
+    .el-button + .el-button {
+      margin-left: 0;
+    }
+    .buttons {
+      background: rgba(0, 70, 199, 0.6);
+      border: 1px solid #1f51ae;
+      border-radius: 13px;
+      font-size: 14px;
+      margin-right: 10px;
+
+      &.search {
         color: #fff;
-        font-size: 1.296vh;
-        background: fade(#606769, 20);
-        border: 1px solid fade(#606769, 20);
-        border-radius: 20px;
-        &:hover,
-        &.active {
-          background: fade(#0046c7, 80);
-          border: 1px solid #0046c7;
-          color: #b9b9b9;
-          cursor: pointer;
+        &:hover {
+          background: rgba(14, 90, 229, 0.9);
+          border-radius: 13px;
+          color: #fff;
         }
       }
+      &.download {
+        background: rgba(67, 81, 107, 0.3);
+        border: 1px solid #3b4c6c;
+        color: #b3b3b3;
+      }
     }
   }
+
   .powerLinefitting_title {
     padding-left: 10px;
     .leftContent {
@@ -419,6 +393,7 @@ export default {
   .powerLinefitting_Table {
     margin: 0 5px 5px 5px;
     padding-bottom: 10px;
+    height: calc(100% - 46px);
     .el-table--mini {
       margin: 5px;
       .el-table__header-wrapper {
@@ -454,7 +429,7 @@ export default {
     width: 100%;
     background: rgba(0, 0, 0, 0.45);
     position: relative;
-    height: 39px;
+    height: 300px;
     // border-bottom: 1px solid rgba(153, 153, 153, 0.5);
     font-size: 16px;
     font-family: Microsoft YaHei;
@@ -498,8 +473,7 @@ export default {
     }
     .fittingEchartSty {
       width: 100%;
-      height: 280px;
-      background: rgba(0, 0, 0, 0.45);
+      height: calc(100% - 39px);
     }
   }
   .el-overlay {
@@ -518,12 +492,5 @@ export default {
       }
     }
   }
-
-  .el-picker__popper .el-date-range-picker__header .el-picker-panel__icon-btn {
-    color: #fff;
-  }
-  .el-picker__popper .el-date-table .in-range div {
-    background: #43516b;
-  }
 }
 </style>

src/views/layout/economicsOperation/analyse/stationMonthAnalyse/index.vue

@@ -1,65 +1,64 @@
 <template>
   <div class="powerLinefitting">
-    <div class="powerLinefitting_topAll">
-      <div class="powerLinefitting_top">
-        <div class="form-wrapper">
-          <div class="select-wrapper">
-            <el-select
-              size="mini"
-              v-model="tabEvent"
-              placeholder="请选择"
-              @change="changeBtn"
+    <div class="powerLinefitting_top">
+      <div class="form-wrapper">
+        <div class="select-wrapper">
+          <el-select
+            size="mini"
+            v-model="tabEvent"
+            placeholder="请选择"
+            @change="changeBtn"
+          >
+            <el-option
+              v-for="item in tabOptions"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
             >
-              <el-option
-                v-for="item in tabOptions"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id"
-              >
-              </el-option>
-            </el-select>
-            <el-select
-              size="mini"
-              v-model="companyVal"
-              placeholder="请选择"
-              @change="changeCompan"
+            </el-option>
+          </el-select>
+          <el-select
+            size="mini"
+            v-model="companyVal"
+            placeholder="请选择"
+            @change="changeCompan"
+          >
+            <el-option
+              v-for="item in companyOptions"
+              :key="item.id"
+              :label="item.aname"
+              :value="item.id"
             >
-              <el-option
-                v-for="item in companyOptions"
-                :key="item.id"
-                :label="item.aname"
-                :value="item.id"
+            </el-option>
+          </el-select>
+        </div>
+        <div class="date-wrapper">
+          <div class="date-item-wrapper">
+            选择月份
+            <div class="date-item-date">
+              <el-date-picker
+                size="mini"
+                v-model="month"
+                type="month"
+                value-format="YYYY-MM"
+                placeholder="选择月份"
               >
-              </el-option>
-            </el-select>
-          </div>
-          <div class="date-wrapper">
-            <div class="date-item-wrapper">
-              选择月份
-              <div class="date-item-date">
-                <el-date-picker
-                  size="mini"
-                  v-model="month"
-                  type="month"
-                  value-format="YYYY-MM"
-                  placeholder="选择月份"
-                >
-                </el-date-picker>
-              </div>
+              </el-date-picker>
             </div>
           </div>
         </div>
-        <div class="but">
-          <el-button round size="mini" class="buttons" @click="getTableData"
-            >查询</el-button
-          >
-          <el-button round size="mini" class="buttons" @click="downXlsxFn"
-            >导出</el-button
-          >
-        </div>
+      </div>
+      <div class="but">
+        <el-button round size="mini" class="buttons" @click="getTableData"
+          >查询</el-button
+        >
+        <el-button round size="mini" class="buttons" @click="downXlsxFn"
+          >导出</el-button
+        >
       </div>
     </div>
-    <div style="background: rgba(0, 0, 0, 0.4)">
+
+    <div style="background: rgba(0, 0, 0, 0.4); height: calc(100% - 60px)">
       <div class="powerLinefitting_title clearfix">
         <div class="leftContent floatLeft"><span>场站月度分析</span></div>
         <div class="rightContent floatRight"></div>
@@ -70,7 +69,7 @@
           :data="stationAnalyseData"
           stripe
           size="mini"
-          height="80vh"
+          height="100%"
           ref="fitting_table"
           style="width: 100%"
           @row-click="handleRowClick"
@@ -90,6 +89,7 @@
               :prop="subItem.code"
               :label="subItem.title"
               align="center"
+              show-overflow-tooltip
             >
               <template v-if="subItem.title != '场站'" #header="scope">
                 <div>
@@ -108,24 +108,10 @@
         </el-table>
       </div>
     </div>
-    <!-- <div class="powerLinefitting_Echarts">
-      <div class="chart-name">
-        <div class="point left bottom"></div>
-        <div class="point right bottom"></div>
-        <span>性能分析曲线</span>
-      </div>
-      <div class="fittingEchartSty">
-        <doubleYAxisLineChart
-          :tabEvent="tabEvent"
-          :unit="'(W/m²)'"
-          :list="stationLineData"
-        />
-      </div>
-    </div> -->
     <el-dialog
       class="dialogs"
       width="85%"
-      top="8vh"
+      top="100px"
       v-model="dialogCurveVisible"
       :show-close="true"
     >
@@ -284,7 +270,7 @@ export default {
     //切换公司
     changeCompan(val) {
       this.companyVal = val;
-      this.getStationData();
+      this.getTableData();
     },
     async getTableData() {
       let params = {
@@ -322,123 +308,103 @@ export default {
 };
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 .powerLinefitting {
   padding: 0 23px;
-  .powerLinefitting_topAll {
+  height: 100%;
+
+  .powerLinefitting_top ::v-deep {
     display: flex;
-    justify-content: space-between;
-    .powerLinefitting_top {
+    flex-direction: row;
+    align-items: center;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    padding-left: 10px;
+    .form-wrapper {
       display: flex;
-      flex-direction: row;
       align-items: center;
-      margin-top: 10px;
-      margin-bottom: 10px;
-      .form-wrapper {
+      .select-wrapper {
         display: flex;
         align-items: center;
-        .select-wrapper {
-          display: flex;
-          align-items: center;
-          .el-select {
-            width: 155px;
-            .el-input .el-input__inner {
-              width: 150px;
-            }
-          }
-        }
-        .date-wrapper {
-          display: flex;
-          align-items: center;
-          font-size: 14px;
-          font-family: Microsoft YaHei;
-          font-weight: 400;
-          color: #b3b3b3;
-          margin-left: 10px;
-          .date-item-wrapper {
-            display: flex;
-            align-items: center;
-            margin-right: 15px;
-            .date-item-date {
-              margin-left: 10px;
-              .el-input .el-input__inner {
-                font-size: 13px;
-                color: #b3b3b3;
-              }
-            }
+        .el-select {
+          width: 155px;
+          .el-input .el-input__inner {
+            width: 150px;
           }
         }
       }
-      .station {
+      .date-wrapper {
         display: flex;
-        flex-direction: row;
         align-items: center;
         font-size: 14px;
         font-family: Microsoft YaHei;
         font-weight: 400;
         color: #b3b3b3;
-        margin-right: 25px;
-      }
-      .search-input {
         margin-left: 10px;
-        .el-input__inner {
-          width: 175px;
-        }
-        .el-input__suffix {
-          right: -50px;
-        }
-      }
-
-      .but {
-        display: flex;
-        flex-direction: row;
-        align-content: center;
-        .buttons:nth-child(1) {
-          background: rgba(0, 70, 199, 0.6);
-          border: 1px solid #1f51ae;
-          border-radius: 13px;
-          color: #fff;
-          &:hover {
-            background: rgba(14, 90, 229, 0.9);
-            border-radius: 13px;
-            color: #fff;
+        .date-item-wrapper {
+          display: flex;
+          align-items: center;
+          margin-right: 15px;
+          .date-item-date {
+            margin-left: 10px;
+            width: 155px;
+            .el-input .el-input__inner {
+              width: 150px;
+              font-size: 13px;
+              color: #b3b3b3;
+            }
+            .el-input .el-input__suffix {
+              right: 70px;
+            }
           }
         }
-        .buttons:nth-child(2) {
-          background: rgba(67, 81, 107, 0.3);
-          border: 1px solid #3b4c6c;
-          border-radius: 13px;
-          font-size: 14px;
-          color: #b3b3b3;
-        }
       }
     }
-    .selections {
+    .station {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      font-size: 14px;
+      font-family: Microsoft YaHei;
+      font-weight: 400;
+      color: #b3b3b3;
+      margin-right: 25px;
+    }
+    .search-input {
+      margin-left: 10px;
+      .el-input__inner {
+        width: 175px;
+      }
+      .el-input__suffix {
+        right: -50px;
+      }
+    }
+
+    .but {
       display: flex;
-      margin-top: 10px;
-      position: relative;
-      right: 120px;
-      .selections_btn {
-        flex: 0 0 55px;
-        text-align: center;
-        height: 33px;
-        line-height: 33px;
-        margin-right: 8px;
+      flex-direction: row;
+      align-content: center;
+      .buttons:nth-child(1) {
+        background: rgba(0, 70, 199, 0.6);
+        border: 1px solid #1f51ae;
+        border-radius: 13px;
         color: #fff;
-        font-size: 1.296vh;
-        background: fade(#606769, 20);
-        border: 1px solid fade(#606769, 20);
-        border-radius: 20px;
-        &:hover,
-        &.active {
-          background: fade(#0046c7, 80);
-          border: 1px solid #0046c7;
-          color: #b9b9b9;
-          cursor: pointer;
+        &:hover {
+          background: rgba(14, 90, 229, 0.9);
+          border-radius: 13px;
+          color: #fff;
         }
       }
+      .buttons:nth-child(2) {
+        background: rgba(67, 81, 107, 0.3);
+        border: 1px solid #3b4c6c;
+        border-radius: 13px;
+        font-size: 14px;
+        color: #b3b3b3;
+      }
     }
   }
+
   .powerLinefitting_title {
     padding-left: 10px;
     .leftContent {
@@ -482,6 +448,7 @@ export default {
   .powerLinefitting_Table {
     margin: 0 5px 5px 5px;
     padding-bottom: 10px;
+    height: calc(100% - 41px - 10px);
     .el-table--mini {
       margin: 5px;
       .el-table__header-wrapper {
@@ -512,81 +479,5 @@ export default {
       }
     }
   }
-  .powerLinefitting_Echarts {
-    margin-top: 10px;
-    width: 100%;
-    background: rgba(0, 0, 0, 0.45);
-    position: relative;
-    height: 39px;
-    // border-bottom: 1px solid rgba(153, 153, 153, 0.5);
-    font-size: 16px;
-    font-family: Microsoft YaHei;
-    font-weight: 400;
-    color: #ffffff;
-    .chart-name {
-      display: flex;
-      align-items: center;
-      padding-left: 20px;
-      position: relative;
-      height: 39px;
-      width: 98%;
-      margin-left: 1%;
-      border-bottom: 1px solid rgba(153, 153, 153, 0.5);
-      font-size: 16px;
-      font-family: Microsoft YaHei;
-      font-weight: 400;
-      color: #ffffff;
-      .point {
-        width: 6px;
-        height: 1px;
-        background-color: #ffffff;
-        position: absolute;
-
-        &.left {
-          left: 0;
-        }
-
-        &.right {
-          right: 0;
-        }
-
-        &.top {
-          top: -1px;
-        }
-
-        &.bottom {
-          bottom: -1px;
-        }
-      }
-    }
-    .fittingEchartSty {
-      width: 100%;
-      height: 280px;
-      background: rgba(0, 0, 0, 0.45);
-    }
-  }
-  .el-overlay {
-    .el-overlay-dialog {
-      overflow-y: hidden !important;
-      .powerLinefittinghistoryModel {
-        margin-top: 0 !important;
-        .el-dialog__body {
-          padding-top: 10px;
-        }
-      }
-      .contrastModal {
-        .el-dialog__body {
-          padding-top: 10px;
-        }
-      }
-    }
-  }
-
-  .el-picker__popper .el-date-range-picker__header .el-picker-panel__icon-btn {
-    color: #fff;
-  }
-  .el-picker__popper .el-date-table .in-range div {
-    background: #43516b;
-  }
 }
 </style>

src/views/layout/economicsOperation/benchmarkingManagement/brandBenchmarking/index.vue

@@ -827,6 +827,7 @@ export default {
   align-items: center;
   margin-top: 10px;
   margin-bottom: 10px;
+  padding-left: 10px;
 
   .form-wrapper {
     display: flex;
@@ -856,15 +857,14 @@ export default {
         margin-right: 15px;
         .date-item-date {
           margin-left: 10px;
-          width: 155px;
+          .el-input {
+            width: 155px;
+          }
           .el-input .el-input__inner {
             width: 150px;
             font-size: 13px;
             color: #b3b3b3;
           }
-          .el-input .el-input__suffix {
-            right: 70px;
-          }
         }
       }
     }

src/views/layout/economicsOperation/benchmarkingManagement/companyBenchmarking/index.vue

@@ -939,6 +939,7 @@ export default {
   align-items: center;
   margin-top: 10px;
   margin-bottom: 10px;
+  padding-left: 10px;
 
   .form-wrapper {
     display: flex;
@@ -968,15 +969,14 @@ export default {
         margin-right: 15px;
         .date-item-date {
           margin-left: 10px;
-          width: 155px;
+          .el-input {
+            width: 155px;
+          }
           .el-input .el-input__inner {
             width: 150px;
             font-size: 13px;
             color: #b3b3b3;
           }
-          .el-input .el-input__suffix {
-            right: 70px;
-          }
         }
       }
     }

src/views/layout/economicsOperation/benchmarkingManagement/intervalBenchmarking/index.vue

@@ -970,6 +970,7 @@ export default {
   align-items: center;
   margin-top: 10px;
   margin-bottom: 10px;
+  padding-left: 10px;
 
   .form-wrapper {
     display: flex;
@@ -999,15 +1000,14 @@ export default {
         margin-right: 15px;
         .date-item-date {
           margin-left: 10px;
-          width: 155px;
+          .el-input {
+            width: 155px;
+          }
           .el-input .el-input__inner {
             width: 150px;
             font-size: 13px;
             color: #b3b3b3;
           }
-          .el-input .el-input__suffix {
-            right: 70px;
-          }
         }
       }
     }

src/views/layout/economicsOperation/benchmarkingManagement/loseRate/index.vue

@@ -1037,6 +1037,7 @@ export default {
   align-items: center;
   margin-top: 10px;
   margin-bottom: 10px;
+  padding-left: 10px;
 
   .form-wrapper {
     display: flex;
@@ -1066,15 +1067,14 @@ export default {
         margin-right: 15px;
         .date-item-date {
           margin-left: 10px;
-          width: 155px;
+          .el-input {
+            width: 155px;
+          }
           .el-input .el-input__inner {
             width: 150px;
             font-size: 13px;
             color: #b3b3b3;
           }
-          .el-input .el-input__suffix {
-            right: 70px;
-          }
         }
       }
     }

src/views/layout/economicsOperation/benchmarkingManagement/machineBenchmarking/index.vue

@@ -1134,6 +1134,7 @@ export default {
   align-items: center;
   margin-top: 10px;
   margin-bottom: 10px;
+  padding-left: 10px;
 
   .form-wrapper {
     display: flex;
@@ -1163,15 +1164,14 @@ export default {
         margin-right: 5px;
         .date-item-date {
           margin-left: 10px;
-          width: 155px;
+          .el-input {
+            width: 155px;
+          }
           .el-input .el-input__inner {
             width: 150px;
             font-size: 13px;
             color: #b3b3b3;
           }
-          .el-input .el-input__suffix {
-            right: 70px;
-          }
         }
       }
     }

src/views/layout/economicsOperation/benchmarkingManagement/performanceRankingList/decision1Mx.vue

@@ -621,6 +621,7 @@ export default {
   align-items: center;
   margin-top: 10px;
   margin-bottom: 10px;
+  padding-left: 10px;
   padding-left: 20px;
   .form-wrapper {
     display: flex;
@@ -650,15 +651,14 @@ export default {
         margin-right: 15px;
         .date-item-date {
           margin-left: 10px;
-          width: 155px;
+          .el-input {
+            width: 155px;
+          }
           .el-input .el-input__inner {
             width: 150px;
             font-size: 13px;
             color: #b3b3b3;
           }
-          .el-input .el-input__suffix {
-            right: 70px;
-          }
         }
       }
     }

src/views/layout/economicsOperation/benchmarkingManagement/performanceRankingList/index.vue

@@ -544,6 +544,7 @@ export default {
   align-items: center;
   margin-top: 10px;
   margin-bottom: 10px;
+  padding-left: 10px;
   padding-left: 20px;
   .form-wrapper {
     display: flex;
@@ -573,15 +574,14 @@ export default {
         margin-right: 15px;
         .date-item-date {
           margin-left: 10px;
-          width: 155px;
+          .el-input {
+            width: 155px;
+          }
           .el-input .el-input__inner {
             width: 150px;
             font-size: 13px;
             color: #b3b3b3;
           }
-          .el-input .el-input__suffix {
-            right: 70px;
-          }
         }
       }
     }

src/views/layout/economicsOperation/benchmarkingManagement/projectBenchmarking/index.vue

@@ -987,6 +987,7 @@ export default {
   align-items: center;
   margin-top: 10px;
   margin-bottom: 10px;
+  padding-left: 10px;
 
   .form-wrapper {
     display: flex;
@@ -1016,15 +1017,14 @@ export default {
         margin-right: 15px;
         .date-item-date {
           margin-left: 10px;
-          width: 155px;
+          .el-input {
+            width: 155px;
+          }
           .el-input .el-input__inner {
             width: 150px;
             font-size: 13px;
             color: #b3b3b3;
           }
-          .el-input .el-input__suffix {
-            right: 70px;
-          }
         }
       }
     }

src/views/layout/economicsOperation/benchmarkingManagement/quarterBenchmarking/index.vue

@@ -1087,6 +1087,7 @@ export default {
   align-items: center;
   margin-top: 10px;
   margin-bottom: 10px;
+  padding-left: 10px;
 
   .form-wrapper {
     display: flex;
@@ -1116,15 +1117,14 @@ export default {
         margin-right: 15px;
         .date-item-date {
           margin-left: 10px;
-          width: 155px;
+          .el-input {
+            width: 155px;
+          }
           .el-input .el-input__inner {
             width: 150px;
             font-size: 13px;
             color: #b3b3b3;
           }
-          .el-input .el-input__suffix {
-            right: 70px;
-          }
         }
       }
     }

src/views/layout/economicsOperation/benchmarkingManagement/siteBenchmarking/index.vue

@@ -1218,6 +1218,7 @@ export default {
   align-items: center;
   margin-top: 10px;
   margin-bottom: 10px;
+  padding-left: 10px;
   padding-left: 5px;
   .form-wrapper {
     display: flex;
@@ -1247,15 +1248,14 @@ export default {
         margin-right: 15px;
         .date-item-date {
           margin-left: 10px;
-          width: 155px;
+          .el-input {
+            width: 155px;
+          }
           .el-input .el-input__inner {
             width: 150px;
             font-size: 13px;
             color: #b3b3b3;
           }
-          .el-input .el-input__suffix {
-            right: 70px;
-          }
         }
       }
     }

src/views/layout/economicsOperation/benchmarkingManagement/valueBenchmarking/index.vue

@@ -154,6 +154,7 @@ export default {
   align-items: center;
   margin-top: 10px;
   margin-bottom: 10px;
+  padding-left: 10px;
   padding-left: 15px;
   .form-wrapper {
     display: flex;
@@ -172,15 +173,14 @@ export default {
         margin-right: 15px;
         .date-item-date {
           margin-left: 10px;
-          width: 155px;
+          .el-input {
+            width: 155px;
+          }
           .el-input .el-input__inner {
             width: 150px;
             font-size: 13px;
             color: #b3b3b3;
           }
-          .el-input .el-input__suffix {
-            right: 70px;
-          }
         }
       }
     }

src/views/layout/economicsOperation/benchmarkingManagement/wiringBenchmarking/index.vue

@@ -1054,6 +1054,7 @@ export default {
   align-items: center;
   margin-top: 10px;
   margin-bottom: 10px;
+  padding-left: 10px;
 
   .form-wrapper {
     display: flex;
@@ -1089,9 +1090,6 @@ export default {
             font-size: 13px;
             color: #b3b3b3;
           }
-          .el-input .el-input__suffix {
-            right: 70px;
-          }
         }
       }
     }

src/views/layout/economicsOperation/index.vue

@@ -170,11 +170,11 @@ export default {
               icon: "icon-fjfx",
               path: "/economicsOperation/performanceAnalyse/performanceAssess",
             },
-            {
-              titleName: "单机月度分析",
-              icon: "",
-              path: "/economicsOperation/analyse/monthlyAnalysis",
-            },
+            // {
+            //   titleName: "单机月度分析",
+            //   icon: "",
+            //   path: "/economicsOperation/analyse/monthlyAnalysis",
+            // },
             {
               titleName: "光资源分析",
               icon: "",

src/views/layout/economicsOperation/insert/cleanInsert/components/operation.vue

@@ -2,7 +2,7 @@
   <el-dialog
     class="dialogs"
     width="45%"
-    top="10vh"
+    top="120px"
     v-model="dialogCurveVisible"
     :show-close="true"
     @close="close"
@@ -16,7 +16,7 @@
         <div class="title">{{ dialogTitle }}</div>
       </div>
     </template>
-    <div class="dialog-body" style="height: 45vh; width: 100%">
+    <div class="dialog-body" style="height: 450px; width: 100%">
       <div class="body-wrapper">
         <el-form ref="form" :model="form" :rules="rules" label-width="120px">
           <el-form-item label="场站" prop="windpowerstationId">

src/views/layout/economicsOperation/insert/cleanInsert/index.vue

@@ -1,95 +1,93 @@
 <template>
   <div class="powerLinefitting">
-    <div class="powerLinefitting_topAll">
-      <div class="powerLinefitting_top">
-        <div class="form-wrapper">
-          <div class="select-wrapper">
-            <el-select
-              size="mini"
-              v-model="tabEvent"
-              placeholder="请选择"
-              @change="changeBtn"
+    <div class="powerLinefitting_top">
+      <div class="form-wrapper">
+        <div class="select-wrapper">
+          <el-select
+            size="mini"
+            v-model="tabEvent"
+            placeholder="请选择"
+            @change="changeBtn"
+          >
+            <el-option
+              v-for="item in tabOptions"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
             >
-              <el-option
-                v-for="item in tabOptions"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id"
-              >
-              </el-option>
-            </el-select>
-            <el-select
-              size="mini"
-              v-model="companyVal"
-              placeholder="请选择"
-              @change="changeCompan"
+            </el-option>
+          </el-select>
+          <el-select
+            size="mini"
+            v-model="companyVal"
+            placeholder="请选择"
+            @change="changeCompan"
+          >
+            <el-option
+              v-for="item in companyOptions"
+              :key="item.id"
+              :label="item.aname"
+              :value="item.id"
             >
-              <el-option
-                v-for="item in companyOptions"
-                :key="item.id"
-                :label="item.aname"
-                :value="item.id"
-              >
-              </el-option>
-            </el-select>
-            <el-select
-              size="mini"
-              v-model="stationVal"
-              placeholder="请选择"
-              @change="changeStation"
+            </el-option>
+          </el-select>
+          <el-select
+            size="mini"
+            v-model="stationVal"
+            placeholder="请选择"
+            @change="changeStation"
+          >
+            <el-option
+              v-for="item in stationOptions"
+              :key="item.id"
+              :label="item.aname"
+              :value="item.id"
             >
-              <el-option
-                v-for="item in stationOptions"
-                :key="item.id"
-                :label="item.aname"
-                :value="item.id"
+            </el-option>
+          </el-select>
+        </div>
+        <div class="date-wrapper">
+          <div class="date-item-wrapper">
+            开始时间
+            <div class="date-item-date">
+              <el-date-picker
+                size="mini"
+                v-model="starTime"
+                type="datetime"
+                value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="选择时间"
               >
-              </el-option>
-            </el-select>
-          </div>
-          <div class="date-wrapper">
-            <div class="date-item-wrapper">
-              开始时间
-              <div class="date-item-date">
-                <el-date-picker
-                  size="mini"
-                  v-model="starTime"
-                  type="datetime"
-                  value-format="YYYY-MM-DD HH:mm:ss"
-                  placeholder="选择时间"
-                >
-                </el-date-picker>
-              </div>
+              </el-date-picker>
             </div>
-            <div class="date-item-wrapper">
-              结束时间
-              <div class="date-item-date">
-                <el-date-picker
-                  size="mini"
-                  v-model="endTime"
-                  type="datetime"
-                  value-format="YYYY-MM-DD HH:mm:ss"
-                  placeholder="选择时间"
-                >
-                </el-date-picker>
-              </div>
+          </div>
+          <div class="date-item-wrapper">
+            结束时间
+            <div class="date-item-date">
+              <el-date-picker
+                size="mini"
+                v-model="endTime"
+                type="datetime"
+                value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="选择时间"
+              >
+              </el-date-picker>
             </div>
           </div>
         </div>
-        <div class="but">
-          <el-button round size="mini" class="buttons" @click="getTableData"
-            >查询</el-button
-          >
-          <el-button round size="mini" class="buttons" @click="handleAdd"
-            >新增</el-button
-          >
-          <el-button round size="mini" class="buttons" @click="downXlsxFn"
-            >导出</el-button
-          >
-        </div>
+      </div>
+      <div class="but">
+        <el-button round size="mini" class="buttons" @click="getTableData"
+          >查询</el-button
+        >
+        <el-button round size="mini" class="buttons" @click="handleAdd"
+          >新增</el-button
+        >
+        <el-button round size="mini" class="buttons" @click="downXlsxFn"
+          >导出</el-button
+        >
       </div>
     </div>
-    <div style="background: rgba(0, 0, 0, 0.4)">
+    <div style="background: rgba(0, 0, 0, 0.4); height: calc(100% - 60px)">
       <div class="powerLinefitting_title clearfix">
         <div class="leftContent floatLeft"><span>清洗录入</span></div>
         <div class="rightContent floatRight"></div>
@@ -100,7 +98,7 @@
           :data="stationAnalyseData"
           stripe
           size="mini"
-          height="80vh"
+          height="calc(100% - 35px)"
           ref="fitting_table"
           style="width: 100%"
           @row-click="handleRowClick"
@@ -135,20 +133,6 @@
         </div>
       </div>
     </div>
-    <!-- <div class="powerLinefitting_Echarts">
-      <div class="chart-name">
-        <div class="point left bottom"></div>
-        <div class="point right bottom"></div>
-        <span>性能分析曲线</span>
-      </div>
-      <div class="fittingEchartSty">
-        <doubleYAxisLineChart
-          :tabEvent="tabEvent"
-          :unit="'(W/m²)'"
-          :list="stationLineData"
-        />
-      </div>
-    </div> -->
     <operation
       ref="operation"
       :stationOptions="stationOptions"
@@ -258,12 +242,12 @@ export default {
       this.$refs["operation"].form.begindate = dayjs().format(
         "YYYY-MM-DD HH:mm:ss"
       );
-    //   this.$refs["operation"].form.planEnddate = dayjs().format(
-    //     "YYYY-MM-DD HH:mm:ss"
-    //   );
-    //   this.$refs["operation"].form.actualEnddate = dayjs().format(
-    //     "YYYY-MM-DD HH:mm:ss"
-    //   );
+      //   this.$refs["operation"].form.planEnddate = dayjs().format(
+      //     "YYYY-MM-DD HH:mm:ss"
+      //   );
+      //   this.$refs["operation"].form.actualEnddate = dayjs().format(
+      //     "YYYY-MM-DD HH:mm:ss"
+      //   );
       this.$refs["operation"].openDialog();
     },
     //编辑
@@ -318,132 +302,105 @@ export default {
 };
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 .powerLinefitting {
   padding: 0 23px;
-  .powerLinefitting_topAll {
+  height: 100%;
+  .powerLinefitting_top ::v-deep{
     display: flex;
-    justify-content: space-between;
-    .powerLinefitting_top {
+    flex-direction: row;
+    align-items: center;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    padding-left: 10px;
+    .form-wrapper {
       display: flex;
-      flex-direction: row;
       align-items: center;
-      margin-top: 10px;
-      margin-bottom: 10px;
-      .form-wrapper {
+      .select-wrapper {
         display: flex;
         align-items: center;
-        .select-wrapper {
-          display: flex;
-          align-items: center;
-          .el-select {
-            width: 155px;
-            .el-input .el-input__inner {
-              width: 150px;
-            }
-          }
-        }
-        .date-wrapper {
-          display: flex;
-          align-items: center;
-          font-size: 14px;
-          font-family: Microsoft YaHei;
-          font-weight: 400;
-          color: #b3b3b3;
-          margin-left: 10px;
-          .date-item-wrapper {
-            display: flex;
-            align-items: center;
-            margin-right: 15px;
-            .date-item-date {
-              margin-left: 10px;
-              .el-input .el-input__inner {
-                font-size: 13px;
-                color: #b3b3b3;
-              }
-            }
+        .el-select {
+          width: 155px;
+          .el-input .el-input__inner {
+            width: 150px;
           }
         }
       }
-      .station {
+      .date-wrapper {
         display: flex;
-        flex-direction: row;
         align-items: center;
         font-size: 14px;
         font-family: Microsoft YaHei;
         font-weight: 400;
         color: #b3b3b3;
-        margin-right: 25px;
-      }
-      .search-input {
         margin-left: 10px;
-        .el-input__inner {
-          width: 175px;
-        }
-        .el-input__suffix {
-          right: -50px;
+        .date-item-wrapper {
+          display: flex;
+          align-items: center;
+          margin-right: 15px;
+          .date-item-date {
+            margin-left: 10px;
+            .el-input .el-input__inner {
+              font-size: 13px;
+              color: #b3b3b3;
+            }
+          }
         }
       }
+    }
+    .station {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      font-size: 14px;
+      font-family: Microsoft YaHei;
+      font-weight: 400;
+      color: #b3b3b3;
+      margin-right: 25px;
+    }
+    .search-input {
+      margin-left: 10px;
+      .el-input__inner {
+        width: 175px;
+      }
+      .el-input__suffix {
+        right: -50px;
+      }
+    }
 
-      .but {
-        display: flex;
-        flex-direction: row;
-        align-content: center;
-        .buttons:nth-child(1) {
-          background: rgba(0, 70, 199, 0.6);
-          border: 1px solid #1f51ae;
+    .but {
+      display: flex;
+      flex-direction: row;
+      align-content: center;
+      .buttons:nth-child(1) {
+        background: rgba(0, 70, 199, 0.6);
+        border: 1px solid #1f51ae;
+        border-radius: 13px;
+        color: #fff;
+        &:hover {
+          background: rgba(14, 90, 229, 0.9);
           border-radius: 13px;
           color: #fff;
-          &:hover {
-            background: rgba(14, 90, 229, 0.9);
-            border-radius: 13px;
-            color: #fff;
-          }
         }
+      }
 
-        .buttons:nth-child(2) {
-          background: rgba(0, 70, 199, 0.6);
-          border: 1px solid #1f51ae;
+      .buttons:nth-child(2) {
+        background: rgba(0, 70, 199, 0.6);
+        border: 1px solid #1f51ae;
+        border-radius: 13px;
+        color: #fff;
+        &:hover {
+          background: rgba(14, 90, 229, 0.9);
           border-radius: 13px;
           color: #fff;
-          &:hover {
-            background: rgba(14, 90, 229, 0.9);
-            border-radius: 13px;
-            color: #fff;
-          }
-        }
-        .buttons:nth-child(3) {
-          background: rgba(67, 81, 107, 0.3);
-          border: 1px solid #3b4c6c;
-          border-radius: 13px;
-          font-size: 14px;
-          color: #b3b3b3;
         }
       }
-    }
-    .selections {
-      display: flex;
-      margin-top: 10px;
-      position: relative;
-      right: 120px;
-      .selections_btn {
-        flex: 0 0 55px;
-        text-align: center;
-        height: 33px;
-        line-height: 33px;
-        margin-right: 8px;
-        color: #fff;
-        font-size: 1.296vh;
-        background: fade(#606769, 20);
-        border: 1px solid fade(#606769, 20);
-        border-radius: 20px;
-        &:hover,
-        &.active {
-          background: fade(#0046c7, 80);
-          border: 1px solid #0046c7;
-          color: #b9b9b9;
-          cursor: pointer;
-        }
+      .buttons:nth-child(3) {
+        background: rgba(67, 81, 107, 0.3);
+        border: 1px solid #3b4c6c;
+        border-radius: 13px;
+        font-size: 14px;
+        color: #b3b3b3;
       }
     }
   }
@@ -487,9 +444,10 @@ export default {
     zoom: 1;
   }
 
-  .powerLinefitting_Table {
+  .powerLinefitting_Table ::v-deep{
     margin: 0 5px 5px 5px;
     padding-bottom: 10px;
+    height: calc(100% - 41px - 10px);
     .operationBtn {
       cursor: pointer;
       color: #1c99ff;
@@ -561,81 +519,5 @@ export default {
       }
     }
   }
-  .powerLinefitting_Echarts {
-    margin-top: 10px;
-    width: 100%;
-    background: rgba(0, 0, 0, 0.45);
-    position: relative;
-    height: 39px;
-    // border-bottom: 1px solid rgba(153, 153, 153, 0.5);
-    font-size: 16px;
-    font-family: Microsoft YaHei;
-    font-weight: 400;
-    color: #ffffff;
-    .chart-name {
-      display: flex;
-      align-items: center;
-      padding-left: 20px;
-      position: relative;
-      height: 39px;
-      width: 98%;
-      margin-left: 1%;
-      border-bottom: 1px solid rgba(153, 153, 153, 0.5);
-      font-size: 16px;
-      font-family: Microsoft YaHei;
-      font-weight: 400;
-      color: #ffffff;
-      .point {
-        width: 6px;
-        height: 1px;
-        background-color: #ffffff;
-        position: absolute;
-
-        &.left {
-          left: 0;
-        }
-
-        &.right {
-          right: 0;
-        }
-
-        &.top {
-          top: -1px;
-        }
-
-        &.bottom {
-          bottom: -1px;
-        }
-      }
-    }
-    .fittingEchartSty {
-      width: 100%;
-      height: 280px;
-      background: rgba(0, 0, 0, 0.45);
-    }
-  }
-  .el-overlay {
-    .el-overlay-dialog {
-      overflow-y: hidden !important;
-      .powerLinefittinghistoryModel {
-        margin-top: 0 !important;
-        .el-dialog__body {
-          padding-top: 10px;
-        }
-      }
-      .contrastModal {
-        .el-dialog__body {
-          padding-top: 10px;
-        }
-      }
-    }
-  }
-
-  .el-picker__popper .el-date-range-picker__header .el-picker-panel__icon-btn {
-    color: #fff;
-  }
-  .el-picker__popper .el-date-table .in-range div {
-    background: #43516b;
-  }
 }
 </style>

src/views/layout/economicsOperation/insert/faultInsert/components/operation.vue

@@ -2,7 +2,7 @@
   <el-dialog
     class="dialogs"
     width="45%"
-    top="10vh"
+    top="120px"
     v-model="dialogCurveVisible"
     :show-close="true"
     @close="close"
@@ -16,7 +16,7 @@
         <div class="title">{{ dialogTitle }}</div>
       </div>
     </template>
-    <div class="dialog-body" style="height: 45vh; width: 100%">
+    <div class="dialog-body" style="height: 450px; width: 100%">
       <div class="body-wrapper">
         <el-form ref="form" :model="form" :rules="rules" label-width="120px">
           <el-form-item label="场站" prop="windpowerstationId">

src/views/layout/economicsOperation/insert/faultInsert/index.vue

@@ -1,95 +1,93 @@
 <template>
   <div class="powerLinefitting">
-    <div class="powerLinefitting_topAll">
-      <div class="powerLinefitting_top">
-        <div class="form-wrapper">
-          <div class="select-wrapper">
-            <el-select
-              size="mini"
-              v-model="tabEvent"
-              placeholder="请选择"
-              @change="changeBtn"
+    <div class="powerLinefitting_top">
+      <div class="form-wrapper">
+        <div class="select-wrapper">
+          <el-select
+            size="mini"
+            v-model="tabEvent"
+            placeholder="请选择"
+            @change="changeBtn"
+          >
+            <el-option
+              v-for="item in tabOptions"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
             >
-              <el-option
-                v-for="item in tabOptions"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id"
-              >
-              </el-option>
-            </el-select>
-            <el-select
-              size="mini"
-              v-model="companyVal"
-              placeholder="请选择"
-              @change="changeCompan"
+            </el-option>
+          </el-select>
+          <el-select
+            size="mini"
+            v-model="companyVal"
+            placeholder="请选择"
+            @change="changeCompan"
+          >
+            <el-option
+              v-for="item in companyOptions"
+              :key="item.id"
+              :label="item.aname"
+              :value="item.id"
             >
-              <el-option
-                v-for="item in companyOptions"
-                :key="item.id"
-                :label="item.aname"
-                :value="item.id"
-              >
-              </el-option>
-            </el-select>
-            <el-select
-              size="mini"
-              v-model="stationVal"
-              placeholder="请选择"
-              @change="changeStation"
+            </el-option>
+          </el-select>
+          <el-select
+            size="mini"
+            v-model="stationVal"
+            placeholder="请选择"
+            @change="changeStation"
+          >
+            <el-option
+              v-for="item in stationOptions"
+              :key="item.id"
+              :label="item.aname"
+              :value="item.id"
             >
-              <el-option
-                v-for="item in stationOptions"
-                :key="item.id"
-                :label="item.aname"
-                :value="item.id"
+            </el-option>
+          </el-select>
+        </div>
+        <div class="date-wrapper">
+          <div class="date-item-wrapper">
+            开始时间
+            <div class="date-item-date">
+              <el-date-picker
+                size="mini"
+                v-model="starTime"
+                type="datetime"
+                value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="选择时间"
               >
-              </el-option>
-            </el-select>
-          </div>
-          <div class="date-wrapper">
-            <div class="date-item-wrapper">
-              开始时间
-              <div class="date-item-date">
-                <el-date-picker
-                  size="mini"
-                  v-model="starTime"
-                  type="datetime"
-                  value-format="YYYY-MM-DD HH:mm:ss"
-                  placeholder="选择时间"
-                >
-                </el-date-picker>
-              </div>
+              </el-date-picker>
             </div>
-            <div class="date-item-wrapper">
-              结束时间
-              <div class="date-item-date">
-                <el-date-picker
-                  size="mini"
-                  v-model="endTime"
-                  type="datetime"
-                  value-format="YYYY-MM-DD HH:mm:ss"
-                  placeholder="选择时间"
-                >
-                </el-date-picker>
-              </div>
+          </div>
+          <div class="date-item-wrapper">
+            结束时间
+            <div class="date-item-date">
+              <el-date-picker
+                size="mini"
+                v-model="endTime"
+                type="datetime"
+                value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="选择时间"
+              >
+              </el-date-picker>
             </div>
           </div>
         </div>
-        <div class="but">
-          <el-button round size="mini" class="buttons" @click="getTableData"
-            >查询</el-button
-          >
-          <el-button round size="mini" class="buttons" @click="handleAdd"
-            >新增</el-button
-          >
-          <el-button round size="mini" class="buttons" @click="downXlsxFn"
-            >导出</el-button
-          >
-        </div>
+      </div>
+      <div class="but">
+        <el-button round size="mini" class="buttons" @click="getTableData"
+          >查询</el-button
+        >
+        <el-button round size="mini" class="buttons" @click="handleAdd"
+          >新增</el-button
+        >
+        <el-button round size="mini" class="buttons" @click="downXlsxFn"
+          >导出</el-button
+        >
       </div>
     </div>
-    <div style="background: rgba(0, 0, 0, 0.4)">
+    <div style="background: rgba(0, 0, 0, 0.4); height: calc(100% - 60px)">
       <div class="powerLinefitting_title clearfix">
         <div class="leftContent floatLeft"><span>故障录入</span></div>
         <div class="rightContent floatRight"></div>
@@ -100,7 +98,7 @@
           :data="stationAnalyseData"
           stripe
           size="mini"
-          height="80vh"
+          height="calc(100% - 35px)"
           ref="fitting_table"
           style="width: 100%"
           @row-click="handleRowClick"
@@ -135,20 +133,6 @@
         </div>
       </div>
     </div>
-    <!-- <div class="powerLinefitting_Echarts">
-      <div class="chart-name">
-        <div class="point left bottom"></div>
-        <div class="point right bottom"></div>
-        <span>性能分析曲线</span>
-      </div>
-      <div class="fittingEchartSty">
-        <doubleYAxisLineChart
-          :tabEvent="tabEvent"
-          :unit="'(W/m²)'"
-          :list="stationLineData"
-        />
-      </div>
-    </div> -->
     <operation
       ref="operation"
       :stationOptions="stationOptions"
@@ -317,132 +301,105 @@ export default {
 };
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 .powerLinefitting {
   padding: 0 23px;
-  .powerLinefitting_topAll {
+  height: 100%;
+  .powerLinefitting_top::v-deep {
     display: flex;
-    justify-content: space-between;
-    .powerLinefitting_top {
+    flex-direction: row;
+    align-items: center;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    padding-left: 10px;
+    .form-wrapper {
       display: flex;
-      flex-direction: row;
       align-items: center;
-      margin-top: 10px;
-      margin-bottom: 10px;
-      .form-wrapper {
+      .select-wrapper {
         display: flex;
         align-items: center;
-        .select-wrapper {
-          display: flex;
-          align-items: center;
-          .el-select {
-            width: 155px;
-            .el-input .el-input__inner {
-              width: 150px;
-            }
-          }
-        }
-        .date-wrapper {
-          display: flex;
-          align-items: center;
-          font-size: 14px;
-          font-family: Microsoft YaHei;
-          font-weight: 400;
-          color: #b3b3b3;
-          margin-left: 10px;
-          .date-item-wrapper {
-            display: flex;
-            align-items: center;
-            margin-right: 15px;
-            .date-item-date {
-              margin-left: 10px;
-              .el-input .el-input__inner {
-                font-size: 13px;
-                color: #b3b3b3;
-              }
-            }
+        .el-select {
+          width: 155px;
+          .el-input .el-input__inner {
+            width: 150px;
           }
         }
       }
-      .station {
+      .date-wrapper {
         display: flex;
-        flex-direction: row;
         align-items: center;
         font-size: 14px;
         font-family: Microsoft YaHei;
         font-weight: 400;
         color: #b3b3b3;
-        margin-right: 25px;
-      }
-      .search-input {
         margin-left: 10px;
-        .el-input__inner {
-          width: 175px;
-        }
-        .el-input__suffix {
-          right: -50px;
+        .date-item-wrapper {
+          display: flex;
+          align-items: center;
+          margin-right: 15px;
+          .date-item-date {
+            margin-left: 10px;
+            .el-input .el-input__inner {
+              font-size: 13px;
+              color: #b3b3b3;
+            }
+          }
         }
       }
+    }
+    .station {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      font-size: 14px;
+      font-family: Microsoft YaHei;
+      font-weight: 400;
+      color: #b3b3b3;
+      margin-right: 25px;
+    }
+    .search-input {
+      margin-left: 10px;
+      .el-input__inner {
+        width: 175px;
+      }
+      .el-input__suffix {
+        right: -50px;
+      }
+    }
 
-      .but {
-        display: flex;
-        flex-direction: row;
-        align-content: center;
-        .buttons:nth-child(1) {
-          background: rgba(0, 70, 199, 0.6);
-          border: 1px solid #1f51ae;
+    .but {
+      display: flex;
+      flex-direction: row;
+      align-content: center;
+      .buttons:nth-child(1) {
+        background: rgba(0, 70, 199, 0.6);
+        border: 1px solid #1f51ae;
+        border-radius: 13px;
+        color: #fff;
+        &:hover {
+          background: rgba(14, 90, 229, 0.9);
           border-radius: 13px;
           color: #fff;
-          &:hover {
-            background: rgba(14, 90, 229, 0.9);
-            border-radius: 13px;
-            color: #fff;
-          }
         }
+      }
 
-        .buttons:nth-child(2) {
-          background: rgba(0, 70, 199, 0.6);
-          border: 1px solid #1f51ae;
+      .buttons:nth-child(2) {
+        background: rgba(0, 70, 199, 0.6);
+        border: 1px solid #1f51ae;
+        border-radius: 13px;
+        color: #fff;
+        &:hover {
+          background: rgba(14, 90, 229, 0.9);
           border-radius: 13px;
           color: #fff;
-          &:hover {
-            background: rgba(14, 90, 229, 0.9);
-            border-radius: 13px;
-            color: #fff;
-          }
-        }
-        .buttons:nth-child(3) {
-          background: rgba(67, 81, 107, 0.3);
-          border: 1px solid #3b4c6c;
-          border-radius: 13px;
-          font-size: 14px;
-          color: #b3b3b3;
         }
       }
-    }
-    .selections {
-      display: flex;
-      margin-top: 10px;
-      position: relative;
-      right: 120px;
-      .selections_btn {
-        flex: 0 0 55px;
-        text-align: center;
-        height: 33px;
-        line-height: 33px;
-        margin-right: 8px;
-        color: #fff;
-        font-size: 1.296vh;
-        background: fade(#606769, 20);
-        border: 1px solid fade(#606769, 20);
-        border-radius: 20px;
-        &:hover,
-        &.active {
-          background: fade(#0046c7, 80);
-          border: 1px solid #0046c7;
-          color: #b9b9b9;
-          cursor: pointer;
-        }
+      .buttons:nth-child(3) {
+        background: rgba(67, 81, 107, 0.3);
+        border: 1px solid #3b4c6c;
+        border-radius: 13px;
+        font-size: 14px;
+        color: #b3b3b3;
       }
     }
   }
@@ -486,9 +443,10 @@ export default {
     zoom: 1;
   }
 
-  .powerLinefitting_Table {
+  .powerLinefitting_Table ::v-deep {
     margin: 0 5px 5px 5px;
     padding-bottom: 10px;
+    height: calc(100% - 41px - 10px);
     .operationBtn {
       cursor: pointer;
       color: #1c99ff;
@@ -560,81 +518,5 @@ export default {
       }
     }
   }
-  .powerLinefitting_Echarts {
-    margin-top: 10px;
-    width: 100%;
-    background: rgba(0, 0, 0, 0.45);
-    position: relative;
-    height: 39px;
-    // border-bottom: 1px solid rgba(153, 153, 153, 0.5);
-    font-size: 16px;
-    font-family: Microsoft YaHei;
-    font-weight: 400;
-    color: #ffffff;
-    .chart-name {
-      display: flex;
-      align-items: center;
-      padding-left: 20px;
-      position: relative;
-      height: 39px;
-      width: 98%;
-      margin-left: 1%;
-      border-bottom: 1px solid rgba(153, 153, 153, 0.5);
-      font-size: 16px;
-      font-family: Microsoft YaHei;
-      font-weight: 400;
-      color: #ffffff;
-      .point {
-        width: 6px;
-        height: 1px;
-        background-color: #ffffff;
-        position: absolute;
-
-        &.left {
-          left: 0;
-        }
-
-        &.right {
-          right: 0;
-        }
-
-        &.top {
-          top: -1px;
-        }
-
-        &.bottom {
-          bottom: -1px;
-        }
-      }
-    }
-    .fittingEchartSty {
-      width: 100%;
-      height: 280px;
-      background: rgba(0, 0, 0, 0.45);
-    }
-  }
-  .el-overlay {
-    .el-overlay-dialog {
-      overflow-y: hidden !important;
-      .powerLinefittinghistoryModel {
-        margin-top: 0 !important;
-        .el-dialog__body {
-          padding-top: 10px;
-        }
-      }
-      .contrastModal {
-        .el-dialog__body {
-          padding-top: 10px;
-        }
-      }
-    }
-  }
-
-  .el-picker__popper .el-date-range-picker__header .el-picker-panel__icon-btn {
-    color: #fff;
-  }
-  .el-picker__popper .el-date-table .in-range div {
-    background: #43516b;
-  }
 }
 </style>

src/views/layout/economicsOperation/performanceAnalyse/performanceAssess/dayDetailInfo.vue

@@ -345,8 +345,8 @@ export default {
 };
 </script>
 
-<style lang="less">
-.Evaluationinfo {
+<style lang="less" scoped>
+.Evaluationinfo ::v-deep{
   height: 100%;
   .header {
     display: flex;
@@ -356,7 +356,7 @@ export default {
     background: rgba(83, 89, 104, 0.3);
     font-family: MicrosoftYaHei;
     .herder-info {
-      flex: 1 0 8.5%;
+      flex: 1 0 25%;
       color: #a5a3a3;
       font-family: MicrosoftYaHei;
       text-align: center;

src/views/layout/economicsOperation/performanceAnalyse/performanceAssess/dayDetailInfoFd.vue

@@ -486,8 +486,8 @@ export default {
 };
 </script>
 
-<style lang="less">
-.Evaluationinfo {
+<style lang="less" scoped>
+.Evaluationinfo ::v-deep {
   .header {
     display: flex;
     width: 100%;

src/views/layout/economicsOperation/performanceAnalyse/performanceAssess/index.vue

@@ -2,71 +2,76 @@
   <div class="comprehensiveEvaluation">
     <div class="Evaluation_topall">
       <div class="Evaluation_top">
-        <el-select
-          size="mini"
-          v-model="tabEvent"
-          placeholder="请选择"
-          @change="changeBtn"
-        >
-          <el-option
-            v-for="item in tabOptions"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id"
-          >
-          </el-option>
-        </el-select>
-        <el-select
-          size="mini"
-          v-model="companyVal"
-          placeholder="请选择"
-          @change="changeCompan"
-        >
-          <el-option
-            v-for="item in companyOptions"
-            :key="item.id"
-            :label="item.aname"
-            :value="item.id"
-          >
-          </el-option>
-        </el-select>
-
-        <el-select
-          size="mini"
-          v-model="stationVal"
-          placeholder="请选择"
-          clearable
-          @change="changeStation"
-        >
-          <el-option
-            v-for="item in stationOptions"
-            :key="item.id"
-            :label="item.aname"
-            :value="item.id"
-          >
-          </el-option>
-        </el-select>
-        <div class="station">
-          时间
-          <div class="search-input">
-            <el-date-picker
-              v-model="pickerTimer"
-              type="date"
-              value-format="YYYY-MM-DD"
-              placeholder="选择日期"
-              popper-class="date-select"
+        <div class="form-wrapper">
+          <div class="select-wrapper">
+            <el-select
+              size="mini"
+              v-model="tabEvent"
+              placeholder="请选择"
+              @change="changeBtn"
             >
-            </el-date-picker>
+              <el-option
+                v-for="item in tabOptions"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              >
+              </el-option>
+            </el-select>
+            <el-select
+              size="mini"
+              v-model="companyVal"
+              placeholder="请选择"
+              @change="changeCompan"
+            >
+              <el-option
+                v-for="item in companyOptions"
+                :key="item.id"
+                :label="item.aname"
+                :value="item.id"
+              >
+              </el-option>
+            </el-select>
+            <el-select
+              size="mini"
+              v-model="stationVal"
+              placeholder="请选择"
+              clearable
+              @change="changeStation"
+            >
+              <el-option
+                v-for="item in stationOptions"
+                :key="item.id"
+                :label="item.aname"
+                :value="item.id"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div class="date-wrapper">
+            <div class="date-item-wrapper">
+              选择日期
+              <div class="date-item-date">
+                <el-date-picker
+                  v-model="pickerTimer"
+                  type="date"
+                  value-format="YYYY-MM-DD"
+                  placeholder="选择日期"
+                  size="mini"
+                >
+                </el-date-picker>
+              </div>
+            </div>
           </div>
         </div>
         <div class="but">
-          <el-button round size="mini" class="buttons" @click="seachData"
+          <el-button round size="mini" class="buttons search" @click="seachData"
             >搜索</el-button
           >
           <el-button
             round
             size="mini"
-            class="buttons"
+            class="buttons download"
             @click="contrastFn"
             :disabled="chooseList.length === 2 ? false : true"
             >信息对比</el-button
@@ -97,7 +102,7 @@
         </div>
       </div>
     </div>
-    <div style="background: rgba(0, 0, 0, 0.4)">
+    <div style="background: rgba(0, 0, 0, 0.4); height: calc(100% - 63px)">
       <div class="Evaluation_title clearfix">
         <div class="leftContent floatLeft"><span>性能等级评估</span></div>
         <div class="rightContent floatRight"></div>
@@ -109,7 +114,7 @@
           stripe
           @selection-change="handleCurrentChange"
           size="mini"
-          height="80vh"
+          height="100%"
           ref="Eval_table"
           style="width: 100%"
         >
@@ -155,6 +160,7 @@
     <el-dialog
       v-model="dialogVisible"
       width="100%"
+      fullscreen
       custom-class="EvaluationhistoryModel"
       :close-on-click-modal="false"
     >
@@ -174,8 +180,7 @@
     <el-dialog
       v-model="contrastVisible"
       width="88%"
-      height="48vh"
-      top="1.5vh"
+      top="40px"
       custom-class="contrastModal"
       :close-on-click-modal="false"
     >
@@ -201,13 +206,8 @@
 </template>
 
 <script>
-import {
-  getApicompanyslist,
-  getApiwpByCplistlist,
-  getApiequipmentinfoDayList,
-} from "@/api/monthlyPerformanceAnalysis";
+import { getApiequipmentinfoDayList } from "@/api/monthlyPerformanceAnalysis";
 import { GetOrganization, GetStationByCompany } from "@/api/headerNav.js";
-import utils from "@/utils/downXlsx";
 import historyDetail from "./historyDetail.vue";
 import dayDetailInfo from "./dayDetailInfo.vue";
 export default {
@@ -367,10 +367,10 @@ export default {
 };
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 .comprehensiveEvaluation {
   padding: 0 23px;
-
+  height: 100%;
   .Evaluation_title {
     padding-left: 10px;
     .leftContent {
@@ -410,14 +410,15 @@ export default {
   .clearfix {
     zoom: 1;
   }
-  .Evaluation_topall {
+  .Evaluation_topall ::v-deep {
     display: flex;
     justify-content: space-between;
+    padding: 10px 0 10px 10px;
     .selections {
       position: relative;
       right: 120px;
       display: flex;
-      margin-top: 10px;
+      align-items: center;
       .selections_btn {
         flex: 0 0 55px;
         text-align: center;
@@ -425,7 +426,7 @@ export default {
         line-height: 33px;
         margin-right: 8px;
         color: #fff;
-        font-size: 1.296vh;
+        font-size: 12px;
         background: fade(#606769, 20);
         border: 1px solid fade(#606769, 20);
         border-radius: 20px;
@@ -442,34 +443,43 @@ export default {
       display: flex;
       flex-direction: row;
       align-items: center;
-      margin-top: 10px;
-      margin-bottom: 10px;
-      .el-select {
-        width: 155px;
-        margin-right: 15px;
-        ::v-deep .el-input .el-input__inner {
-          width: 150px;
-        }
-      }
-      .station {
+      .form-wrapper {
         display: flex;
-        flex-direction: row;
         align-items: center;
-        font-size: 14px;
-        font-family: Microsoft YaHei;
-        font-weight: 400;
-        color: #b3b3b3;
-        margin-right: 10px;
-        margin-left: 10px;
-      }
-
-      .search-input {
-        margin-left: 10px;
-        .el-input__inner {
-          width: 175px;
+        .select-wrapper {
+          display: flex;
+          align-items: center;
+          .el-select {
+            width: 155px;
+            .el-input .el-input__inner {
+              width: 150px;
+            }
+          }
         }
-        .el-input__suffix {
-          right: -50px;
+        .date-wrapper {
+          display: flex;
+          align-items: center;
+          font-size: 14px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #b3b3b3;
+          margin-left: 10px;
+          .date-item-wrapper {
+            display: flex;
+            align-items: center;
+            margin-right: 15px;
+            .date-item-date {
+              margin-left: 10px;
+              .el-input {
+                width: 155px;
+              }
+              .el-input .el-input__inner {
+                font-size: 13px;
+                width: 150px;
+                color: #b3b3b3;
+              }
+            }
+          }
         }
       }
 
@@ -477,11 +487,17 @@ export default {
         display: flex;
         flex-direction: row;
         align-content: center;
-        margin-left: 20px;
-        .buttons:nth-child(1) {
-          background: rgba(0, 70, 199, 0.6);
-          border: 1px solid #1f51ae;
-          border-radius: 13px;
+      }
+      .el-button + .el-button {
+        margin-left: 0;
+      }
+      .buttons {
+        background: rgba(0, 70, 199, 0.6);
+        border: 1px solid #1f51ae;
+        border-radius: 13px;
+        font-size: 14px;
+        margin-right: 10px;
+        &.search {
           color: #fff;
           &:hover {
             background: rgba(14, 90, 229, 0.9);
@@ -489,19 +505,18 @@ export default {
             color: #fff;
           }
         }
-        .buttons:nth-child(2) {
+        &.download {
           background: rgba(67, 81, 107, 0.3);
           border: 1px solid #3b4c6c;
-          border-radius: 13px;
-          font-size: 14px;
           color: #b3b3b3;
         }
       }
     }
   }
-  .Evaluation_Table {
+  .Evaluation_Table ::v-deep {
     padding: 5px;
     padding-bottom: 10px;
+    height: calc(100% - 41px - 10px);
     .el-table--mini {
       margin: 5px;
       .el-table__header-wrapper {
@@ -544,35 +559,5 @@ export default {
       }
     }
   }
-  .el-overlay {
-    .el-overlay-dialog {
-      overflow-y: hidden !important;
-      .EvaluationhistoryModel {
-        margin-top: 0 !important;
-        .el-dialog__body {
-          padding-top: 10px;
-        }
-      }
-      .contrastModal {
-        .el-dialog__header {
-          border: none;
-        }
-        .el-dialog__body {
-          height: calc(100vh - 2.5vh - 54px);
-          padding-top: 10px;
-          .dialog-body {
-            height: 100%;
-          }
-        }
-      }
-    }
-  }
-
-  .el-picker__popper .el-date-range-picker__header .el-picker-panel__icon-btn {
-    color: #fff;
-  }
-  .el-picker__popper .el-date-table .in-range div {
-    background: #43516b;
-  }
 }
 </style>

src/views/layout/economicsOperation/performanceAnalyse/performanceAssess/indexFd.vue

@@ -2,71 +2,76 @@
   <div class="comprehensiveEvaluation">
     <div class="Evaluation_topall">
       <div class="Evaluation_top">
-        <el-select
-          size="mini"
-          v-model="tabEvent"
-          placeholder="请选择"
-          @change="changeBtn"
-        >
-          <el-option
-            v-for="item in tabOptions"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id"
-          >
-          </el-option>
-        </el-select>
-        <el-select
-          size="mini"
-          v-model="companyVal"
-          placeholder="请选择"
-          @change="changeCompan"
-        >
-          <el-option
-            v-for="item in companyOptions"
-            :key="item.id"
-            :label="item.aname"
-            :value="item.id"
-          >
-          </el-option>
-        </el-select>
-
-        <el-select
-          size="mini"
-          v-model="stationVal"
-          placeholder="请选择"
-          clearable
-          @change="changeStation"
-        >
-          <el-option
-            v-for="item in stationOptions"
-            :key="item.id"
-            :label="item.aname"
-            :value="item.id"
-          >
-          </el-option>
-        </el-select>
-        <div class="station">
-          时间
-          <div class="search-input">
-            <el-date-picker
-              v-model="pickerTimer"
-              type="date"
-              value-format="YYYY-MM-DD"
-              placeholder="选择日期"
-              popper-class="date-select"
+        <div class="form-wrapper">
+          <div class="select-wrapper">
+            <el-select
+              size="mini"
+              v-model="tabEvent"
+              placeholder="请选择"
+              @change="changeBtn"
             >
-            </el-date-picker>
+              <el-option
+                v-for="item in tabOptions"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              >
+              </el-option>
+            </el-select>
+            <el-select
+              size="mini"
+              v-model="companyVal"
+              placeholder="请选择"
+              @change="changeCompan"
+            >
+              <el-option
+                v-for="item in companyOptions"
+                :key="item.id"
+                :label="item.aname"
+                :value="item.id"
+              >
+              </el-option>
+            </el-select>
+            <el-select
+              size="mini"
+              v-model="stationVal"
+              placeholder="请选择"
+              clearable
+              @change="changeStation"
+            >
+              <el-option
+                v-for="item in stationOptions"
+                :key="item.id"
+                :label="item.aname"
+                :value="item.id"
+              >
+              </el-option>
+            </el-select>
+          </div>
+          <div class="date-wrapper">
+            <div class="date-item-wrapper">
+              选择日期
+              <div class="date-item-date">
+                <el-date-picker
+                  v-model="pickerTimer"
+                  type="date"
+                  value-format="YYYY-MM-DD"
+                  placeholder="选择日期"
+                  size="mini"
+                >
+                </el-date-picker>
+              </div>
+            </div>
           </div>
         </div>
         <div class="but">
-          <el-button round size="mini" class="buttons" @click="seachData"
+          <el-button round size="mini" class="buttons search" @click="seachData"
             >搜索</el-button
           >
           <el-button
             round
             size="mini"
-            class="buttons"
+            class="buttons download"
             @click="contrastFn"
             :disabled="chooseList.length === 2 ? false : true"
             >信息对比</el-button
@@ -97,7 +102,7 @@
         </div>
       </div>
     </div>
-    <div style="background: rgba(0, 0, 0, 0.4)">
+    <div style="background: rgba(0, 0, 0, 0.4); height: calc(100% - 63px)">
       <div class="Evaluation_title clearfix">
         <div class="leftContent floatLeft"><span>性能等级评估</span></div>
         <div class="rightContent floatRight"></div>
@@ -109,7 +114,7 @@
           stripe
           @selection-change="handleCurrentChange"
           size="mini"
-          height="80vh"
+          height="100%"
           ref="Eval_table"
           style="width: 100%"
         >
@@ -364,10 +369,10 @@ export default {
 };
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 .comprehensiveEvaluation {
   padding: 0 23px;
-
+  height: 100%;
   .Evaluation_title {
     padding-left: 10px;
     .leftContent {
@@ -407,14 +412,15 @@ export default {
   .clearfix {
     zoom: 1;
   }
-  .Evaluation_topall {
+  .Evaluation_topall ::v-deep {
     display: flex;
     justify-content: space-between;
+    padding: 10px 0 10px 10px;
     .selections {
       position: relative;
       right: 120px;
       display: flex;
-      margin-top: 10px;
+      align-items: center;
       .selections_btn {
         flex: 0 0 55px;
         text-align: center;
@@ -422,7 +428,7 @@ export default {
         line-height: 33px;
         margin-right: 8px;
         color: #fff;
-        font-size: 1.296vh;
+        font-size: 12px;
         background: fade(#606769, 20);
         border: 1px solid fade(#606769, 20);
         border-radius: 20px;
@@ -439,34 +445,43 @@ export default {
       display: flex;
       flex-direction: row;
       align-items: center;
-      margin-top: 10px;
-      margin-bottom: 10px;
-      .el-select {
-        width: 155px;
-        margin-right: 15px;
-        ::v-deep .el-input .el-input__inner {
-          width: 150px;
-        }
-      }
-      .station {
+      .form-wrapper {
         display: flex;
-        flex-direction: row;
         align-items: center;
-        font-size: 14px;
-        font-family: Microsoft YaHei;
-        font-weight: 400;
-        color: #b3b3b3;
-        margin-right: 10px;
-        margin-left: 10px;
-      }
-
-      .search-input {
-        margin-left: 10px;
-        .el-input__inner {
-          width: 175px;
+        .select-wrapper {
+          display: flex;
+          align-items: center;
+          .el-select {
+            width: 155px;
+            .el-input .el-input__inner {
+              width: 150px;
+            }
+          }
         }
-        .el-input__suffix {
-          right: -50px;
+        .date-wrapper {
+          display: flex;
+          align-items: center;
+          font-size: 14px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #b3b3b3;
+          margin-left: 10px;
+          .date-item-wrapper {
+            display: flex;
+            align-items: center;
+            margin-right: 15px;
+            .date-item-date {
+              margin-left: 10px;
+              .el-input {
+                width: 155px;
+              }
+              .el-input .el-input__inner {
+                font-size: 13px;
+                width: 150px;
+                color: #b3b3b3;
+              }
+            }
+          }
         }
       }
 
@@ -474,11 +489,17 @@ export default {
         display: flex;
         flex-direction: row;
         align-content: center;
-        margin-left: 20px;
-        .buttons:nth-child(1) {
-          background: rgba(0, 70, 199, 0.6);
-          border: 1px solid #1f51ae;
-          border-radius: 13px;
+      }
+      .el-button + .el-button {
+        margin-left: 0;
+      }
+      .buttons {
+        background: rgba(0, 70, 199, 0.6);
+        border: 1px solid #1f51ae;
+        border-radius: 13px;
+        font-size: 14px;
+        margin-right: 10px;
+        &.search {
           color: #fff;
           &:hover {
             background: rgba(14, 90, 229, 0.9);
@@ -486,19 +507,18 @@ export default {
             color: #fff;
           }
         }
-        .buttons:nth-child(2) {
+        &.download {
           background: rgba(67, 81, 107, 0.3);
           border: 1px solid #3b4c6c;
-          border-radius: 13px;
-          font-size: 14px;
           color: #b3b3b3;
         }
       }
     }
   }
-  .Evaluation_Table {
+  .Evaluation_Table ::v-deep {
     padding: 5px;
     padding-bottom: 10px;
+    height: calc(100% - 41px - 10px);
     .el-table--mini {
       margin: 5px;
       .el-table__header-wrapper {
@@ -541,31 +561,5 @@ export default {
       }
     }
   }
-  .el-overlay {
-    .el-overlay-dialog {
-      overflow-y: hidden !important;
-      .EvaluationhistoryModel {
-        margin-top: 0 !important;
-        .el-dialog__body {
-          padding-top: 10px;
-        }
-      }
-      .contrastModal {
-        .el-dialog__header {
-          border: none;
-        }
-        .el-dialog__body {
-          padding-top: 10px;
-        }
-      }
-    }
-  }
-
-  .el-picker__popper .el-date-range-picker__header .el-picker-panel__icon-btn {
-    color: #fff;
-  }
-  .el-picker__popper .el-date-table .in-range div {
-    background: #43516b;
-  }
 }
 </style>

src/views/layout/economicsOperation/powerCurve/powerLineAnalyse/index.vue

@@ -1,108 +1,120 @@
 <template>
   <div class="powerLinefitting">
-    <div class="powerLinefitting_topAll">
-      <div class="powerLinefitting_top">
-        <div class="form-wrapper">
-          <div class="select-wrapper">
-            <el-select
-              size="mini"
-              v-model="tabEvent"
-              placeholder="请选择"
-              @change="changeBtn"
+    <div class="powerLinefitting_top">
+      <div class="form-wrapper">
+        <div class="select-wrapper">
+          <el-select
+            size="mini"
+            v-model="tabEvent"
+            placeholder="请选择"
+            @change="changeBtn"
+          >
+            <el-option
+              v-for="item in tabOptions"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
             >
-              <el-option
-                v-for="item in tabOptions"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id"
-              >
-              </el-option>
-            </el-select>
-            <el-select
-              size="mini"
-              v-model="companyVal"
-              placeholder="请选择"
-              @change="changeCompan"
+            </el-option>
+          </el-select>
+          <el-select
+            size="mini"
+            v-model="companyVal"
+            placeholder="请选择"
+            @change="changeCompan"
+          >
+            <el-option
+              v-for="item in companyOptions"
+              :key="item.id"
+              :label="item.aname"
+              :value="item.id"
             >
-              <el-option
-                v-for="item in companyOptions"
-                :key="item.id"
-                :label="item.aname"
-                :value="item.id"
-              >
-              </el-option>
-            </el-select>
-            <el-select
-              size="mini"
-              v-model="stationVal"
-              placeholder="请选择"
-              clearable
-              @change="changeStation"
+            </el-option>
+          </el-select>
+          <el-select
+            size="mini"
+            v-model="stationVal"
+            placeholder="请选择"
+            clearable
+            @change="changeStation"
+          >
+            <el-option
+              v-for="item in stationOptions"
+              :key="item.id"
+              :label="item.aname"
+              :value="item.id"
             >
-              <el-option
-                v-for="item in stationOptions"
-                :key="item.id"
-                :label="item.aname"
-                :value="item.id"
-              >
-              </el-option>
-            </el-select>
-            <el-select
-              size="mini"
-              v-model="windVal"
-              placeholder="请选择"
-              clearable
-              @change="changeWind"
+            </el-option>
+          </el-select>
+          <el-select
+            size="mini"
+            v-model="windVal"
+            placeholder="请选择"
+            clearable
+            @change="changeWind"
+          >
+            <el-option
+              v-for="item in windsOptions"
+              :key="item.id"
+              :label="item.aname"
+              :value="item.nemCode"
             >
-              <el-option
-                v-for="item in windsOptions"
-                :key="item.id"
-                :label="item.aname"
-                :value="item.nemCode"
+            </el-option>
+          </el-select>
+        </div>
+        <div class="date-wrapper">
+          <div class="date-item-wrapper">
+            开始时间
+            <div class="date-item-date">
+              <el-date-picker
+                size="mini"
+                v-model="starTime"
+                type="datetime"
+                value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="选择时间"
               >
-              </el-option>
-            </el-select>
-          </div>
-          <div class="date-wrapper">
-            <div class="date-item-wrapper">
-              开始时间
-              <div class="date-item-date">
-                <el-date-picker
-                  size="mini"
-                  v-model="starTime"
-                  type="datetime"
-                  value-format="YYYY-MM-DD HH:mm:ss"
-                  placeholder="选择时间"
-                >
-                </el-date-picker>
-              </div>
+              </el-date-picker>
             </div>
-            <div class="date-item-wrapper">
-              结束时间
-              <div class="date-item-date">
-                <el-date-picker
-                  size="mini"
-                  v-model="endTime"
-                  type="datetime"
-                  value-format="YYYY-MM-DD HH:mm:ss"
-                  placeholder="选择时间"
-                >
-                </el-date-picker>
-              </div>
+          </div>
+          <div class="date-item-wrapper">
+            结束时间
+            <div class="date-item-date">
+              <el-date-picker
+                size="mini"
+                v-model="endTime"
+                type="datetime"
+                value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="选择时间"
+              >
+              </el-date-picker>
             </div>
           </div>
         </div>
-        <div class="but">
-          <el-button round size="mini" class="buttons" @click="getTableData"
-            >查询</el-button
-          >
-          <el-button round size="mini" class="buttons" @click="downXlsxFn"
-            >导出</el-button
-          >
-        </div>
+      </div>
+      <div class="but">
+        <el-button
+          round
+          size="mini"
+          class="buttons search"
+          @click="getTableData"
+          >查询</el-button
+        >
+        <el-button
+          round
+          size="mini"
+          class="buttons download"
+          @click="downXlsxFn"
+          >导出</el-button
+        >
       </div>
     </div>
-    <div style="background: rgba(0, 0, 0, 0.4)">
+
+    <div
+      style="
+        background: rgba(0, 0, 0, 0.4);
+        height: calc(100% - 50px - 300px - 20px);
+      "
+    >
       <div class="powerLinefitting_title clearfix">
         <div class="leftContent floatLeft"><span>功率曲线分析</span></div>
         <div class="rightContent floatRight"></div>
@@ -113,7 +125,7 @@
           :data="stationAnalyseData"
           stripe
           size="mini"
-          height="48vh"
+          height="100%"
           ref="fitting_table"
           style="width: 100%"
         >
@@ -316,123 +328,84 @@ export default {
 };
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 .powerLinefitting {
   padding: 0 23px;
-  .powerLinefitting_topAll {
+  height: 100%;
+  .powerLinefitting_top ::v-deep {
     display: flex;
-    justify-content: space-between;
-    .powerLinefitting_top {
+    flex-direction: row;
+    align-items: center;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    padding-left: 10px;
+    padding-left: 10px;
+    .form-wrapper {
       display: flex;
-      flex-direction: row;
       align-items: center;
-      margin-top: 10px;
-      margin-bottom: 10px;
-      .form-wrapper {
+      .select-wrapper {
         display: flex;
         align-items: center;
-        .select-wrapper {
-          display: flex;
-          align-items: center;
-          .el-select {
-            width: 155px;
-            .el-input .el-input__inner {
-              width: 150px;
-            }
-          }
-        }
-        .date-wrapper {
-          display: flex;
-          align-items: center;
-          font-size: 14px;
-          font-family: Microsoft YaHei;
-          font-weight: 400;
-          color: #b3b3b3;
-          margin-left: 10px;
-          .date-item-wrapper {
-            display: flex;
-            align-items: center;
-            margin-right: 15px;
-            .date-item-date {
-              margin-left: 10px;
-              .el-input .el-input__inner {
-                font-size: 13px;
-                color: #b3b3b3;
-              }
-            }
+        .el-select {
+          width: 155px;
+          .el-input .el-input__inner {
+            width: 150px;
           }
         }
       }
-      .station {
+      .date-wrapper {
         display: flex;
-        flex-direction: row;
         align-items: center;
         font-size: 14px;
         font-family: Microsoft YaHei;
         font-weight: 400;
         color: #b3b3b3;
-        margin-right: 25px;
-      }
-      .search-input {
         margin-left: 10px;
-        .el-input__inner {
-          width: 175px;
-        }
-        .el-input__suffix {
-          right: -50px;
-        }
-      }
-
-      .but {
-        display: flex;
-        flex-direction: row;
-        align-content: center;
-        .buttons:nth-child(1) {
-          background: rgba(0, 70, 199, 0.6);
-          border: 1px solid #1f51ae;
-          border-radius: 13px;
-          color: #fff;
-          &:hover {
-            background: rgba(14, 90, 229, 0.9);
-            border-radius: 13px;
-            color: #fff;
+        .date-item-wrapper {
+          display: flex;
+          align-items: center;
+          margin-right: 15px;
+          .date-item-date {
+            margin-left: 10px;
+            .el-input .el-input__inner {
+              font-size: 13px;
+              color: #b3b3b3;
+            }
           }
         }
-        .buttons:nth-child(2) {
-          background: rgba(67, 81, 107, 0.3);
-          border: 1px solid #3b4c6c;
-          border-radius: 13px;
-          font-size: 14px;
-          color: #b3b3b3;
-        }
       }
     }
-    .selections {
+    .but {
       display: flex;
-      margin-top: 10px;
-      position: relative;
-      right: 120px;
-      .selections_btn {
-        flex: 0 0 55px;
-        text-align: center;
-        height: 33px;
-        line-height: 33px;
-        margin-right: 8px;
+      flex-direction: row;
+      align-content: center;
+    }
+    .el-button + .el-button {
+      margin-left: 0;
+    }
+    .buttons {
+      background: rgba(0, 70, 199, 0.6);
+      border: 1px solid #1f51ae;
+      border-radius: 13px;
+      font-size: 14px;
+      margin-right: 10px;
+
+      &.search {
         color: #fff;
-        font-size: 1.296vh;
-        background: fade(#606769, 20);
-        border: 1px solid fade(#606769, 20);
-        border-radius: 20px;
-        &:hover,
-        &.active {
-          background: fade(#0046c7, 80);
-          border: 1px solid #0046c7;
-          color: #b9b9b9;
-          cursor: pointer;
+        &:hover {
+          background: rgba(14, 90, 229, 0.9);
+          border-radius: 13px;
+          color: #fff;
         }
       }
+      &.download {
+        background: rgba(67, 81, 107, 0.3);
+        border: 1px solid #3b4c6c;
+        color: #b3b3b3;
+      }
     }
   }
+
   .powerLinefitting_title {
     padding-left: 10px;
     .leftContent {
@@ -476,6 +449,7 @@ export default {
   .powerLinefitting_Table {
     margin: 0 5px 5px 5px;
     padding-bottom: 10px;
+    height: calc(100% - 46px);
     .el-table--mini {
       margin: 5px;
       .el-table__header-wrapper {
@@ -511,7 +485,7 @@ export default {
     width: 100%;
     background: rgba(0, 0, 0, 0.45);
     position: relative;
-    height: 39px;
+    height: 300px;
     // border-bottom: 1px solid rgba(153, 153, 153, 0.5);
     font-size: 16px;
     font-family: Microsoft YaHei;
@@ -555,32 +529,8 @@ export default {
     }
     .fittingEchartSty {
       width: 100%;
-      height: 280px;
-      background: rgba(0, 0, 0, 0.45);
-    }
-  }
-  .el-overlay {
-    .el-overlay-dialog {
-      overflow-y: hidden !important;
-      .powerLinefittinghistoryModel {
-        margin-top: 0 !important;
-        .el-dialog__body {
-          padding-top: 10px;
-        }
-      }
-      .contrastModal {
-        .el-dialog__body {
-          padding-top: 10px;
-        }
-      }
+      height: calc(100% - 39px);
     }
   }
-
-  .el-picker__popper .el-date-range-picker__header .el-picker-panel__icon-btn {
-    color: #fff;
-  }
-  .el-picker__popper .el-date-table .in-range div {
-    background: #43516b;
-  }
 }
 </style>

src/views/layout/economicsOperation/powerCurve/powerLineAnalyse/indexFd.vue

@@ -1,108 +1,120 @@
 <template>
   <div class="powerLinefitting">
-    <div class="powerLinefitting_topAll">
-      <div class="powerLinefitting_top">
-        <div class="form-wrapper">
-          <div class="select-wrapper">
-            <el-select
-              size="mini"
-              v-model="tabEvent"
-              placeholder="请选择"
-              @change="changeBtn"
+    <div class="powerLinefitting_top">
+      <div class="form-wrapper">
+        <div class="select-wrapper">
+          <el-select
+            size="mini"
+            v-model="tabEvent"
+            placeholder="请选择"
+            @change="changeBtn"
+          >
+            <el-option
+              v-for="item in tabOptions"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
             >
-              <el-option
-                v-for="item in tabOptions"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id"
-              >
-              </el-option>
-            </el-select>
-            <el-select
-              size="mini"
-              v-model="companyVal"
-              placeholder="请选择"
-              @change="changeCompan"
+            </el-option>
+          </el-select>
+          <el-select
+            size="mini"
+            v-model="companyVal"
+            placeholder="请选择"
+            @change="changeCompan"
+          >
+            <el-option
+              v-for="item in companyOptions"
+              :key="item.id"
+              :label="item.aname"
+              :value="item.id"
             >
-              <el-option
-                v-for="item in companyOptions"
-                :key="item.id"
-                :label="item.aname"
-                :value="item.id"
-              >
-              </el-option>
-            </el-select>
-            <el-select
-              size="mini"
-              v-model="stationVal"
-              placeholder="请选择"
-              clearable
-              @change="changeStation"
+            </el-option>
+          </el-select>
+          <el-select
+            size="mini"
+            v-model="stationVal"
+            placeholder="请选择"
+            clearable
+            @change="changeStation"
+          >
+            <el-option
+              v-for="item in stationOptions"
+              :key="item.id"
+              :label="item.aname"
+              :value="item.id"
             >
-              <el-option
-                v-for="item in stationOptions"
-                :key="item.id"
-                :label="item.aname"
-                :value="item.id"
-              >
-              </el-option>
-            </el-select>
-            <el-select
-              size="mini"
-              v-model="windVal"
-              placeholder="请选择"
-              clearable
-              @change="changeWind"
+            </el-option>
+          </el-select>
+          <el-select
+            size="mini"
+            v-model="windVal"
+            placeholder="请选择"
+            clearable
+            @change="changeWind"
+          >
+            <el-option
+              v-for="item in windsOptions"
+              :key="item.id"
+              :label="item.aname"
+              :value="item.nemCode"
             >
-              <el-option
-                v-for="item in windsOptions"
-                :key="item.id"
-                :label="item.aname"
-                :value="item.nemCode"
+            </el-option>
+          </el-select>
+        </div>
+        <div class="date-wrapper">
+          <div class="date-item-wrapper">
+            开始时间
+            <div class="date-item-date">
+              <el-date-picker
+                size="mini"
+                v-model="starTime"
+                type="datetime"
+                value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="选择时间"
               >
-              </el-option>
-            </el-select>
-          </div>
-          <div class="date-wrapper">
-            <div class="date-item-wrapper">
-              开始时间
-              <div class="date-item-date">
-                <el-date-picker
-                  size="mini"
-                  v-model="starTime"
-                  type="datetime"
-                  value-format="YYYY-MM-DD HH:mm:ss"
-                  placeholder="选择时间"
-                >
-                </el-date-picker>
-              </div>
+              </el-date-picker>
             </div>
-            <div class="date-item-wrapper">
-              结束时间
-              <div class="date-item-date">
-                <el-date-picker
-                  size="mini"
-                  v-model="endTime"
-                  type="datetime"
-                  value-format="YYYY-MM-DD HH:mm:ss"
-                  placeholder="选择时间"
-                >
-                </el-date-picker>
-              </div>
+          </div>
+          <div class="date-item-wrapper">
+            结束时间
+            <div class="date-item-date">
+              <el-date-picker
+                size="mini"
+                v-model="endTime"
+                type="datetime"
+                value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="选择时间"
+              >
+              </el-date-picker>
             </div>
           </div>
         </div>
-        <div class="but">
-          <el-button round size="mini" class="buttons" @click="getTableData"
-            >查询</el-button
-          >
-          <el-button round size="mini" class="buttons" @click="downXlsxFn"
-            >导出</el-button
-          >
-        </div>
+      </div>
+      <div class="but">
+        <el-button
+          round
+          size="mini"
+          class="buttons search"
+          @click="getTableData"
+          >查询</el-button
+        >
+        <el-button
+          round
+          size="mini"
+          class="buttons download"
+          @click="downXlsxFn"
+          >导出</el-button
+        >
       </div>
     </div>
-    <div style="background: rgba(0, 0, 0, 0.4)">
+
+    <div
+      style="
+        background: rgba(0, 0, 0, 0.4);
+        height: calc(100% - 50px - 300px - 20px);
+      "
+    >
       <div class="powerLinefitting_title clearfix">
         <div class="leftContent floatLeft"><span>功率曲线分析</span></div>
         <div class="rightContent floatRight"></div>
@@ -113,7 +125,7 @@
           :data="stationAnalyseData"
           stripe
           size="mini"
-          height="48vh"
+          height="100%"
           ref="fitting_table"
           style="width: 100%"
         >
@@ -316,123 +328,84 @@ export default {
 };
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 .powerLinefitting {
   padding: 0 23px;
-  .powerLinefitting_topAll {
+  height: 100%;
+  .powerLinefitting_top ::v-deep {
     display: flex;
-    justify-content: space-between;
-    .powerLinefitting_top {
+    flex-direction: row;
+    align-items: center;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    padding-left: 10px;
+    padding-left: 10px;
+    .form-wrapper {
       display: flex;
-      flex-direction: row;
       align-items: center;
-      margin-top: 10px;
-      margin-bottom: 10px;
-      .form-wrapper {
+      .select-wrapper {
         display: flex;
         align-items: center;
-        .select-wrapper {
-          display: flex;
-          align-items: center;
-          .el-select {
-            width: 155px;
-            .el-input .el-input__inner {
-              width: 150px;
-            }
-          }
-        }
-        .date-wrapper {
-          display: flex;
-          align-items: center;
-          font-size: 14px;
-          font-family: Microsoft YaHei;
-          font-weight: 400;
-          color: #b3b3b3;
-          margin-left: 10px;
-          .date-item-wrapper {
-            display: flex;
-            align-items: center;
-            margin-right: 15px;
-            .date-item-date {
-              margin-left: 10px;
-              .el-input .el-input__inner {
-                font-size: 13px;
-                color: #b3b3b3;
-              }
-            }
+        .el-select {
+          width: 155px;
+          .el-input .el-input__inner {
+            width: 150px;
           }
         }
       }
-      .station {
+      .date-wrapper {
         display: flex;
-        flex-direction: row;
         align-items: center;
         font-size: 14px;
         font-family: Microsoft YaHei;
         font-weight: 400;
         color: #b3b3b3;
-        margin-right: 25px;
-      }
-      .search-input {
         margin-left: 10px;
-        .el-input__inner {
-          width: 175px;
-        }
-        .el-input__suffix {
-          right: -50px;
-        }
-      }
-
-      .but {
-        display: flex;
-        flex-direction: row;
-        align-content: center;
-        .buttons:nth-child(1) {
-          background: rgba(0, 70, 199, 0.6);
-          border: 1px solid #1f51ae;
-          border-radius: 13px;
-          color: #fff;
-          &:hover {
-            background: rgba(14, 90, 229, 0.9);
-            border-radius: 13px;
-            color: #fff;
+        .date-item-wrapper {
+          display: flex;
+          align-items: center;
+          margin-right: 15px;
+          .date-item-date {
+            margin-left: 10px;
+            .el-input .el-input__inner {
+              font-size: 13px;
+              color: #b3b3b3;
+            }
           }
         }
-        .buttons:nth-child(2) {
-          background: rgba(67, 81, 107, 0.3);
-          border: 1px solid #3b4c6c;
-          border-radius: 13px;
-          font-size: 14px;
-          color: #b3b3b3;
-        }
       }
     }
-    .selections {
+    .but {
       display: flex;
-      margin-top: 10px;
-      position: relative;
-      right: 120px;
-      .selections_btn {
-        flex: 0 0 55px;
-        text-align: center;
-        height: 33px;
-        line-height: 33px;
-        margin-right: 8px;
+      flex-direction: row;
+      align-content: center;
+    }
+    .el-button + .el-button {
+      margin-left: 0;
+    }
+    .buttons {
+      background: rgba(0, 70, 199, 0.6);
+      border: 1px solid #1f51ae;
+      border-radius: 13px;
+      font-size: 14px;
+      margin-right: 10px;
+
+      &.search {
         color: #fff;
-        font-size: 1.296vh;
-        background: fade(#606769, 20);
-        border: 1px solid fade(#606769, 20);
-        border-radius: 20px;
-        &:hover,
-        &.active {
-          background: fade(#0046c7, 80);
-          border: 1px solid #0046c7;
-          color: #b9b9b9;
-          cursor: pointer;
+        &:hover {
+          background: rgba(14, 90, 229, 0.9);
+          border-radius: 13px;
+          color: #fff;
         }
       }
+      &.download {
+        background: rgba(67, 81, 107, 0.3);
+        border: 1px solid #3b4c6c;
+        color: #b3b3b3;
+      }
     }
   }
+
   .powerLinefitting_title {
     padding-left: 10px;
     .leftContent {
@@ -476,6 +449,7 @@ export default {
   .powerLinefitting_Table {
     margin: 0 5px 5px 5px;
     padding-bottom: 10px;
+    height: calc(100% - 46px);
     .el-table--mini {
       margin: 5px;
       .el-table__header-wrapper {
@@ -511,7 +485,7 @@ export default {
     width: 100%;
     background: rgba(0, 0, 0, 0.45);
     position: relative;
-    height: 39px;
+    height: 300px;
     // border-bottom: 1px solid rgba(153, 153, 153, 0.5);
     font-size: 16px;
     font-family: Microsoft YaHei;
@@ -555,32 +529,8 @@ export default {
     }
     .fittingEchartSty {
       width: 100%;
-      height: 280px;
-      background: rgba(0, 0, 0, 0.45);
-    }
-  }
-  .el-overlay {
-    .el-overlay-dialog {
-      overflow-y: hidden !important;
-      .powerLinefittinghistoryModel {
-        margin-top: 0 !important;
-        .el-dialog__body {
-          padding-top: 10px;
-        }
-      }
-      .contrastModal {
-        .el-dialog__body {
-          padding-top: 10px;
-        }
-      }
+      height: calc(100% - 39px);
     }
   }
-
-  .el-picker__popper .el-date-range-picker__header .el-picker-panel__icon-btn {
-    color: #fff;
-  }
-  .el-picker__popper .el-date-table .in-range div {
-    background: #43516b;
-  }
 }
 </style>

src/views/layout/economicsOperation/powerCurve/powerLinefitting/index.vue

@@ -1,95 +1,87 @@
 <template>
   <div class="powerLinefitting">
-    <div class="powerLinefitting_topAll">
-      <div class="powerLinefitting_top">
-        <el-select
-          size="mini"
-          v-model="tabEvent"
-          placeholder="请选择"
-          @change="changeBtn"
-        >
-          <el-option
-            v-for="item in tabOptions"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id"
-          >
-          </el-option>
-        </el-select>
-        <el-select
-          size="mini"
-          v-model="companyVal"
-          placeholder="请选择"
-          @change="changeCompan"
-        >
-          <el-option
-            v-for="item in companyOptions"
-            :key="item.id"
-            :label="item.aname"
-            :value="item.id"
-          >
-          </el-option>
-        </el-select>
-
-        <el-select
-          size="mini"
-          v-model="stationVal"
-          placeholder="请选择"
-          clearable
-          @change="changeStation"
-        >
-          <el-option
-            v-for="item in stationOptions"
-            :key="item.id"
-            :label="item.aname"
-            :value="item.id"
+    <div class="powerLinefitting_top">
+      <div class="form-wrapper">
+        <div class="select-wrapper">
+          <el-select
+            size="mini"
+            v-model="tabEvent"
+            placeholder="请选择"
+            @change="changeBtn"
           >
-          </el-option>
-        </el-select>
-
-        <el-select size="mini" v-model="windVal" placeholder="请选择" clearable>
-          <el-option
-            v-for="item in windsOptions"
-            :key="item.id"
-            :label="item.aname"
-            :value="item.nemCode"
+            <el-option
+              v-for="item in tabOptions"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+          <el-select
+            size="mini"
+            v-model="companyVal"
+            placeholder="请选择"
+            @change="changeCompan"
           >
-          </el-option>
-        </el-select>
-        <div class="but">
-          <el-button round size="mini" class="buttons" @click="seachData"
-            >拟合</el-button
+            <el-option
+              v-for="item in companyOptions"
+              :key="item.id"
+              :label="item.aname"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+          <el-select
+            size="mini"
+            v-model="stationVal"
+            placeholder="请选择"
+            clearable
+            @change="changeStation"
           >
-          <el-button round size="mini" class="buttons" @click="downXlsxFn"
-            >导出</el-button
+            <el-option
+              v-for="item in stationOptions"
+              :key="item.id"
+              :label="item.aname"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+          <el-select
+            size="mini"
+            v-model="windVal"
+            placeholder="请选择"
+            clearable
           >
+            <el-option
+              v-for="item in windsOptions"
+              :key="item.id"
+              :label="item.aname"
+              :value="item.nemCode"
+            >
+            </el-option>
+          </el-select>
         </div>
       </div>
-      <!-- <div class="selections">
-        <div
-          class="selections_btn"
-          @click="tabSelect(0)"
-          :class="{ active: tabIndex == 0 }"
-        >
-          日
-        </div>
-        <div
-          class="selections_btn"
-          @click="tabSelect(1)"
-          :class="{ active: tabIndex == 1 }"
+      <div class="but">
+        <el-button round size="mini" class="buttons search" @click="seachData"
+          >拟合</el-button
         >
-          月
-        </div>
-        <div
-          class="selections_btn"
-          @click="tabSelect(2)"
-          :class="{ active: tabIndex == 2 }"
+        <el-button
+          round
+          size="mini"
+          class="buttons download"
+          @click="downXlsxFn"
+          >导出</el-button
         >
-          年
-        </div>
-      </div> -->
+      </div>
     </div>
-    <div style="background: rgba(0, 0, 0, 0.4)">
+
+    <div
+      style="
+        background: rgba(0, 0, 0, 0.4);
+        height: calc(100% - 50px - 300px - 20px);
+      "
+    >
       <div class="powerLinefitting_title clearfix">
         <div class="leftContent floatLeft"><span>功率曲线拟合</span></div>
         <div class="rightContent floatRight"></div>
@@ -100,7 +92,7 @@
           :data="powerLinefittingData"
           stripe
           size="mini"
-          height="48vh"
+          height="100%"
           ref="fitting_table"
           style="width: 100%"
         >
@@ -128,20 +120,11 @@
 </template>
 
 <script>
-import {
-  getApicompanyslist,
-  getApiwpByCplistlist,
-  getApiequipmentList,
-  getApiPerformancecurvefitting,
-} from "@/api/monthlyPerformanceAnalysis";
+import { getApiPerformancecurvefitting } from "@/api/monthlyPerformanceAnalysis";
 import {
   GetOrganization,
   GetStationByCompany,
   GetwtByWp,
-  GetProjectList,
-  GetLineList,
-  GetSquareList,
-  GeWtList,
 } from "@/api/headerNav.js";
 import * as echarts from "echarts";
 import partten from "@/helper/partten.js";
@@ -176,13 +159,6 @@ export default {
   created() {
     this.getCompanyData();
   },
-  watch: {
-    tabEvent() {
-      this.$router.push({
-        path: "/economicsOperation/powerCurve/powerLinefittingFd",
-      });
-    },
-  },
   methods: {
     // 切换tab
     tabSelect(index) {
@@ -251,7 +227,7 @@ export default {
         companys: this.companyVal,
       };
       const datas = await getApiPerformancecurvefitting(params);
-      console.log("time111===>", new Date().getTime());
+
       this.changeEchartsData(datas.data.chanrt);
       datas.data.list.forEach((item) => {
         item.speed = item.speed.toFixed(2);
@@ -375,11 +351,9 @@ export default {
       let myChart = echarts.init(dom);
       myChart.clear();
       myChart.setOption(option);
-      console.log(222222, new Date().getTime());
       window.addEventListener("resize", function () {
         myChart.resize();
       });
-      console.log("time222===>", new Date().getTime());
     },
     //转换时间
     getchangeTime(date) {
@@ -405,118 +379,62 @@ export default {
 };
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 .powerLinefitting {
   padding: 0 23px;
-  .powerLinefitting_topAll {
+  height: 100%;
+  .powerLinefitting_top ::v-deep {
     display: flex;
-    justify-content: space-between;
-    .powerLinefitting_top {
+    flex-direction: row;
+    align-items: center;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    padding-left: 10px;
+    .form-wrapper {
       display: flex;
-      flex-direction: row;
       align-items: center;
-      margin-top: 10px;
-      margin-bottom: 10px;
-      .station {
+      .select-wrapper {
         display: flex;
-        flex-direction: row;
         align-items: center;
-        font-size: 14px;
-        font-family: Microsoft YaHei;
-        font-weight: 400;
-        color: #b3b3b3;
-        margin-right: 10px;
-        margin-left: 10px;
-      }
-      .search-input {
-        margin-left: 10px;
-        .el-input__inner {
-          width: 175px;
-        }
-        .el-input__suffix {
-          right: -50px;
-        }
-      }
-
-      .tabCut {
-        display: inline-block;
-        margin: 0 10px;
-
-        div {
-          display: inline-block;
-          width: 60px;
-          height: 27px;
-          border: 1px solid #354460;
-          text-align: center;
-          line-height: 25px;
-          cursor: pointer;
-        }
-
-        div:nth-child(1) {
-          border-radius: 13px 0px 0px 13px;
-        }
-
-        div:nth-child(2) {
-          border-radius: 0px 13px 13px 0px;
-        }
-
-        .active {
-          background-color: #0c3378;
-          color: #fff;
-        }
-      }
-
-      .but {
-        display: flex;
-        flex-direction: row;
-        align-content: center;
-        margin-left: 20px;
-        .buttons:nth-child(1) {
-          background: rgba(0, 70, 199, 0.6);
-          border: 1px solid #1f51ae;
-          border-radius: 13px;
-          color: #fff;
-          &:hover {
-            background: rgba(14, 90, 229, 0.9);
-            border-radius: 13px;
-            color: #fff;
+        .el-select {
+          width: 155px;
+          .el-input .el-input__inner {
+            width: 150px;
           }
         }
-        .buttons:nth-child(2) {
-          background: rgba(67, 81, 107, 0.3);
-          border: 1px solid #3b4c6c;
-          border-radius: 13px;
-          font-size: 14px;
-          color: #b3b3b3;
-        }
       }
     }
-    .selections {
+    .but {
       display: flex;
-      margin-top: 10px;
-      position: relative;
-      right: 120px;
-      .selections_btn {
-        flex: 0 0 55px;
-        text-align: center;
-        height: 33px;
-        line-height: 33px;
-        margin-right: 8px;
+      flex-direction: row;
+      align-content: center;
+    }
+    .el-button + .el-button {
+      margin-left: 0;
+    }
+    .buttons {
+      background: rgba(0, 70, 199, 0.6);
+      border: 1px solid #1f51ae;
+      border-radius: 13px;
+      font-size: 14px;
+      margin-right: 10px;
+
+      &.search {
         color: #fff;
-        font-size: 1.296vh;
-        background: fade(#606769, 20);
-        border: 1px solid fade(#606769, 20);
-        border-radius: 20px;
-        &:hover,
-        &.active {
-          background: fade(#0046c7, 80);
-          border: 1px solid #0046c7;
-          color: #b9b9b9;
-          cursor: pointer;
+        &:hover {
+          background: rgba(14, 90, 229, 0.9);
+          border-radius: 13px;
+          color: #fff;
         }
       }
+      &.download {
+        background: rgba(67, 81, 107, 0.3);
+        border: 1px solid #3b4c6c;
+        color: #b3b3b3;
+      }
     }
   }
+
   .powerLinefitting_title {
     padding-left: 10px;
     .leftContent {
@@ -560,6 +478,7 @@ export default {
   .powerLinefitting_Table {
     margin: 0 5px 5px 5px;
     padding-bottom: 10px;
+    height: calc(100% - 46px);
     .el-table--mini {
       margin: 5px;
       .el-table__header-wrapper {
@@ -595,7 +514,7 @@ export default {
     width: 100%;
     background: rgba(0, 0, 0, 0.45);
     position: relative;
-    height: 39px;
+    height: 300px;
     // border-bottom: 1px solid rgba(153, 153, 153, 0.5);
     font-size: 16px;
     font-family: Microsoft YaHei;
@@ -639,32 +558,8 @@ export default {
     }
     .fittingEchartSty {
       width: 100%;
-      height: 280px;
-      background: rgba(0, 0, 0, 0.45);
+      height: calc(100% - 39px);
     }
   }
-  .el-overlay {
-    .el-overlay-dialog {
-      overflow-y: hidden !important;
-      .powerLinefittinghistoryModel {
-        margin-top: 0 !important;
-        .el-dialog__body {
-          padding-top: 10px;
-        }
-      }
-      .contrastModal {
-        .el-dialog__body {
-          padding-top: 10px;
-        }
-      }
-    }
-  }
-
-  .el-picker__popper .el-date-range-picker__header .el-picker-panel__icon-btn {
-    color: #fff;
-  }
-  .el-picker__popper .el-date-table .in-range div {
-    background: #43516b;
-  }
 }
 </style>

src/views/layout/economicsOperation/powerCurve/powerLinefitting/indexFd.vue

@@ -1,95 +1,87 @@
 <template>
   <div class="powerLinefitting">
-    <div class="powerLinefitting_topAll">
-      <div class="powerLinefitting_top">
-        <el-select
-          size="mini"
-          v-model="tabEvent"
-          placeholder="请选择"
-          @change="changeBtn"
-        >
-          <el-option
-            v-for="item in tabOptions"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id"
-          >
-          </el-option>
-        </el-select>
-        <el-select
-          size="mini"
-          v-model="companyVal"
-          placeholder="请选择"
-          @change="changeCompan"
-        >
-          <el-option
-            v-for="item in companyOptions"
-            :key="item.id"
-            :label="item.aname"
-            :value="item.id"
-          >
-          </el-option>
-        </el-select>
-
-        <el-select
-          size="mini"
-          v-model="stationVal"
-          placeholder="请选择"
-          clearable
-          @change="changeStation"
-        >
-          <el-option
-            v-for="item in stationOptions"
-            :key="item.id"
-            :label="item.aname"
-            :value="item.id"
+    <div class="powerLinefitting_top">
+      <div class="form-wrapper">
+        <div class="select-wrapper">
+          <el-select
+            size="mini"
+            v-model="tabEvent"
+            placeholder="请选择"
+            @change="changeBtn"
           >
-          </el-option>
-        </el-select>
-
-        <el-select size="mini" v-model="windVal" placeholder="请选择" clearable>
-          <el-option
-            v-for="item in windsOptions"
-            :key="item.id"
-            :label="item.aname"
-            :value="item.nemCode"
+            <el-option
+              v-for="item in tabOptions"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+          <el-select
+            size="mini"
+            v-model="companyVal"
+            placeholder="请选择"
+            @change="changeCompan"
           >
-          </el-option>
-        </el-select>
-        <div class="but">
-          <el-button round size="mini" class="buttons" @click="seachData"
-            >拟合</el-button
+            <el-option
+              v-for="item in companyOptions"
+              :key="item.id"
+              :label="item.aname"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+          <el-select
+            size="mini"
+            v-model="stationVal"
+            placeholder="请选择"
+            clearable
+            @change="changeStation"
           >
-          <el-button round size="mini" class="buttons" @click="downXlsxFn"
-            >导出</el-button
+            <el-option
+              v-for="item in stationOptions"
+              :key="item.id"
+              :label="item.aname"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+          <el-select
+            size="mini"
+            v-model="windVal"
+            placeholder="请选择"
+            clearable
           >
+            <el-option
+              v-for="item in windsOptions"
+              :key="item.id"
+              :label="item.aname"
+              :value="item.nemCode"
+            >
+            </el-option>
+          </el-select>
         </div>
       </div>
-      <!-- <div class="selections">
-        <div
-          class="selections_btn"
-          @click="tabSelect(0)"
-          :class="{ active: tabIndex == 0 }"
-        >
-          日
-        </div>
-        <div
-          class="selections_btn"
-          @click="tabSelect(1)"
-          :class="{ active: tabIndex == 1 }"
+      <div class="but">
+        <el-button round size="mini" class="buttons search" @click="seachData"
+          >拟合</el-button
         >
-          月
-        </div>
-        <div
-          class="selections_btn"
-          @click="tabSelect(2)"
-          :class="{ active: tabIndex == 2 }"
+        <el-button
+          round
+          size="mini"
+          class="buttons download"
+          @click="downXlsxFn"
+          >导出</el-button
         >
-          年
-        </div>
-      </div> -->
+      </div>
     </div>
-    <div style="background: rgba(0, 0, 0, 0.4)">
+
+    <div
+      style="
+        background: rgba(0, 0, 0, 0.4);
+        height: calc(100% - 50px - 300px - 20px);
+      "
+    >
       <div class="powerLinefitting_title clearfix">
         <div class="leftContent floatLeft"><span>功率曲线拟合</span></div>
         <div class="rightContent floatRight"></div>
@@ -100,7 +92,7 @@
           :data="powerLinefittingData"
           stripe
           size="mini"
-          height="48vh"
+          height="100%"
           ref="fitting_table"
           style="width: 100%"
         >
@@ -128,20 +120,11 @@
 </template>
 
 <script>
-import {
-  getApicompanyslist,
-  getApiwpByCplistlist,
-  getApiequipmentList,
-  getApiPerformancecurvefitting,
-} from "@/api/monthlyPerformanceAnalysis";
+import { getApiPerformancecurvefitting } from "@/api/monthlyPerformanceAnalysis";
 import {
   GetOrganization,
   GetStationByCompany,
   GetwtByWp,
-  GetProjectList,
-  GetLineList,
-  GetSquareList,
-  GeWtList,
 } from "@/api/headerNav.js";
 import * as echarts from "echarts";
 import partten from "@/helper/partten.js";
@@ -176,13 +159,6 @@ export default {
   created() {
     this.getCompanyData();
   },
-  watch: {
-    tabEvent() {
-      this.$router.push({
-        path: "/economicsOperation/powerCurve/powerLinefitting",
-      });
-    },
-  },
   methods: {
     // 切换tab
     tabSelect(index) {
@@ -191,7 +167,7 @@ export default {
     },
     changeBtn() {
       this.$router.push({
-        path: "/economicsOperation/powerCurve/powerLinefittingFd",
+        path: "/economicsOperation/powerCurve/powerLinefitting",
       });
     },
     // 获取公司列表
@@ -251,7 +227,7 @@ export default {
         companys: this.companyVal,
       };
       const datas = await getApiPerformancecurvefitting(params);
-      console.log("time111===>", new Date().getTime());
+
       this.changeEchartsData(datas.data.chanrt);
       datas.data.list.forEach((item) => {
         item.speed = item.speed.toFixed(2);
@@ -336,7 +312,7 @@ export default {
           right: 15,
           bottom: 24,
         },
-       xAxis: [
+        xAxis: [
           {
             type: "category",
             boundaryGap: false,
@@ -375,11 +351,9 @@ export default {
       let myChart = echarts.init(dom);
       myChart.clear();
       myChart.setOption(option);
-      console.log(222222, new Date().getTime());
       window.addEventListener("resize", function () {
         myChart.resize();
       });
-      console.log("time222===>", new Date().getTime());
     },
     //转换时间
     getchangeTime(date) {
@@ -405,118 +379,62 @@ export default {
 };
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 .powerLinefitting {
   padding: 0 23px;
-  .powerLinefitting_topAll {
+  height: 100%;
+  .powerLinefitting_top ::v-deep {
     display: flex;
-    justify-content: space-between;
-    .powerLinefitting_top {
+    flex-direction: row;
+    align-items: center;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    padding-left: 10px;
+    .form-wrapper {
       display: flex;
-      flex-direction: row;
       align-items: center;
-      margin-top: 10px;
-      margin-bottom: 10px;
-      .station {
+      .select-wrapper {
         display: flex;
-        flex-direction: row;
         align-items: center;
-        font-size: 14px;
-        font-family: Microsoft YaHei;
-        font-weight: 400;
-        color: #b3b3b3;
-        margin-right: 10px;
-        margin-left: 10px;
-      }
-      .search-input {
-        margin-left: 10px;
-        .el-input__inner {
-          width: 175px;
-        }
-        .el-input__suffix {
-          right: -50px;
-        }
-      }
-
-      .tabCut {
-        display: inline-block;
-        margin: 0 10px;
-
-        div {
-          display: inline-block;
-          width: 60px;
-          height: 27px;
-          border: 1px solid #354460;
-          text-align: center;
-          line-height: 25px;
-          cursor: pointer;
-        }
-
-        div:nth-child(1) {
-          border-radius: 13px 0px 0px 13px;
-        }
-
-        div:nth-child(2) {
-          border-radius: 0px 13px 13px 0px;
-        }
-
-        .active {
-          background-color: #0c3378;
-          color: #fff;
-        }
-      }
-
-      .but {
-        display: flex;
-        flex-direction: row;
-        align-content: center;
-        margin-left: 20px;
-        .buttons:nth-child(1) {
-          background: rgba(0, 70, 199, 0.6);
-          border: 1px solid #1f51ae;
-          border-radius: 13px;
-          color: #fff;
-          &:hover {
-            background: rgba(14, 90, 229, 0.9);
-            border-radius: 13px;
-            color: #fff;
+        .el-select {
+          width: 155px;
+          .el-input .el-input__inner {
+            width: 150px;
           }
         }
-        .buttons:nth-child(2) {
-          background: rgba(67, 81, 107, 0.3);
-          border: 1px solid #3b4c6c;
-          border-radius: 13px;
-          font-size: 14px;
-          color: #b3b3b3;
-        }
       }
     }
-    .selections {
+    .but {
       display: flex;
-      margin-top: 10px;
-      position: relative;
-      right: 120px;
-      .selections_btn {
-        flex: 0 0 55px;
-        text-align: center;
-        height: 33px;
-        line-height: 33px;
-        margin-right: 8px;
+      flex-direction: row;
+      align-content: center;
+    }
+    .el-button + .el-button {
+      margin-left: 0;
+    }
+    .buttons {
+      background: rgba(0, 70, 199, 0.6);
+      border: 1px solid #1f51ae;
+      border-radius: 13px;
+      font-size: 14px;
+      margin-right: 10px;
+
+      &.search {
         color: #fff;
-        font-size: 1.296vh;
-        background: fade(#606769, 20);
-        border: 1px solid fade(#606769, 20);
-        border-radius: 20px;
-        &:hover,
-        &.active {
-          background: fade(#0046c7, 80);
-          border: 1px solid #0046c7;
-          color: #b9b9b9;
-          cursor: pointer;
+        &:hover {
+          background: rgba(14, 90, 229, 0.9);
+          border-radius: 13px;
+          color: #fff;
         }
       }
+      &.download {
+        background: rgba(67, 81, 107, 0.3);
+        border: 1px solid #3b4c6c;
+        color: #b3b3b3;
+      }
     }
   }
+
   .powerLinefitting_title {
     padding-left: 10px;
     .leftContent {
@@ -560,6 +478,7 @@ export default {
   .powerLinefitting_Table {
     margin: 0 5px 5px 5px;
     padding-bottom: 10px;
+    height: calc(100% - 46px);
     .el-table--mini {
       margin: 5px;
       .el-table__header-wrapper {
@@ -595,7 +514,7 @@ export default {
     width: 100%;
     background: rgba(0, 0, 0, 0.45);
     position: relative;
-    height: 39px;
+    height: 300px;
     // border-bottom: 1px solid rgba(153, 153, 153, 0.5);
     font-size: 16px;
     font-family: Microsoft YaHei;
@@ -639,32 +558,8 @@ export default {
     }
     .fittingEchartSty {
       width: 100%;
-      height: 280px;
-      background: rgba(0, 0, 0, 0.45);
+      height: calc(100% - 39px);
     }
   }
-  .el-overlay {
-    .el-overlay-dialog {
-      overflow-y: hidden !important;
-      .powerLinefittinghistoryModel {
-        margin-top: 0 !important;
-        .el-dialog__body {
-          padding-top: 10px;
-        }
-      }
-      .contrastModal {
-        .el-dialog__body {
-          padding-top: 10px;
-        }
-      }
-    }
-  }
-
-  .el-picker__popper .el-date-range-picker__header .el-picker-panel__icon-btn {
-    color: #fff;
-  }
-  .el-picker__popper .el-date-table .in-range div {
-    background: #43516b;
-  }
 }
 </style>

src/views/layout/economicsOperation/thematicAnalysis/doubleRate/index.vue

@@ -301,6 +301,7 @@ export default {
     padding: 10px 0;
     align-items: center;
     justify-content: space-between;
+    padding-left: 10px;
     .station {
       display: flex;
       flex-direction: row;

src/views/layout/economicsOperation/thematicAnalysis/failure/index.vue

@@ -1,54 +1,61 @@
 <template>
   <div class="parcel-box">
     <div class="failure-header">
-      <div class="search">
-        <div class="search-left">
-          <el-select
-            size="mini"
-            v-model="tabIndex"
-            placeholder="请选择"
-            @change="tabClick"
-          >
-            <el-option
-              v-for="item in tabOptions"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id"
-            >
-            </el-option>
-          </el-select>
-          <el-select
-            size="mini"
-            v-model="company"
-            placeholder="请选择"
-            @change="getHomePageData()"
-          >
-            <el-option
-              v-for="item in companyOptions"
-              :key="item.id"
-              :label="item.aname"
-              :value="item.id"
-            >
-            </el-option>
-          </el-select>
-          <div class="search-input">
-            <el-date-picker
-              size="mini"
-              v-model="searchYear"
-              type="year"
-              value-format="YYYY"
-              placeholder="选择年"
-              popper-class="date-select"
+      <div class="search-left">
+        <div class="title">
+          <div class="form-wrapper">
+            <div class="select-wrapper">
+              <el-select
+                size="mini"
+                v-model="tabIndex"
+                placeholder="请选择"
+                @change="tabClick"
+              >
+                <el-option
+                  v-for="item in tabOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                >
+                </el-option>
+              </el-select>
+              <el-select
+                size="mini"
+                v-model="company"
+                placeholder="请选择"
+                @change="search"
+              >
+                <el-option
+                  v-for="item in companyOptions"
+                  :key="item.id"
+                  :label="item.aname"
+                  :value="item.id"
+                >
+                </el-option>
+              </el-select>
+            </div>
+            <div class="date-wrapper">
+              <div class="date-item-wrapper">
+                <div class="date-item-date">
+                  <el-date-picker
+                    size="mini"
+                    v-model="searchYear"
+                    type="year"
+                    value-format="YYYY"
+                    placeholder="选择年"
+                  >
+                  </el-date-picker>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="btns">
+            <el-button round size="mini" class="buttons search" @click="search"
+              >搜索</el-button
             >
-            </el-date-picker>
           </div>
+          <!-- <el-button round size="mini">导出</el-button> -->
         </div>
-        <div class="search-btns">
-          <el-button round size="mini" class="searchColor" @click="search"
-            >搜索</el-button
-          >
-        </div>
-        <!-- <el-button round size="mini">导出</el-button> -->
       </div>
       <div class="search-right">
         <img class="select-back" src="@assets/img/images/select-back.png" />
@@ -56,7 +63,7 @@
           <el-select
             v-model="selectValue"
             placeholder="请选择"
-            @change="getHomePageData()"
+            @change="search"
             clearable
           >
             <el-option
@@ -83,7 +90,7 @@
           style="width: 100%"
           size="mini"
           stripe
-          height="50vh"
+          height="100%"
           :header-cell-style="{ 'text-align': 'center' }"
           @row-click="rowClick"
         >
@@ -182,16 +189,16 @@
         <div class="point right bottom"></div>
         {{ selectValue }}
       </div>
-      <div>
+      <div style="height: calc(100% - 50px)">
         <BarCharts
           :list="barList"
           width="97%"
-          height="32vh"
-          :top="60"
+          height="100%"
+          :top="25"
           :pillarName="pillarName"
           :xdate="false"
           :showLegend="true"
-          :units="['', '']"
+          :units="['']"
         ></BarCharts>
       </div>
     </div>
@@ -202,7 +209,6 @@
 import { GetOrganization } from "@/api/headerNav.js";
 import BarCharts from "../../homePage/components/barCharts.vue";
 import {
-  companys,
   gzsslList,
   whsslList,
   xdsslList,
@@ -418,9 +424,6 @@ export default {
           break;
       }
     },
-    getHomePageData() {
-      this.search();
-    },
     monthChange(data) {
       let year = new Date(data).getFullYear().toString();
       return year;
@@ -451,76 +454,117 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.data-bodys {
-  display: flex;
-  flex-direction: column;
-  background-color: rgba(0, 0, 0, 0.45);
-  border-radius: 5px;
-  padding: 5px;
-}
-
 .parcel-box {
   padding: 0 20px;
   box-sizing: border-box;
+  height: 100%;
   .failure-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
-  }
-  .search {
-    display: flex;
-    flex-direction: row;
-    padding-top: 10px;
-    padding-bottom: 10px;
-    align-items: center;
-    // justify-content: space-between;
-
-    button {
-      margin-left: 10px;
-      background: rgba(67, 81, 107, 0.3);
-      border: 1px solid #354460;
-      color: #b3b3b3;
-    }
-    ::v-deep .search-left {
+    .search-left ::v-deep {
       display: flex;
+      flex-direction: row;
       align-items: center;
-      .el-select {
-        margin-right: 10px;
-        width: 155px;
-        .el-input .el-input__inner {
-          width: 150px;
+      .title {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        margin-top: 10px;
+        margin-bottom: 10px;
+        padding-left: 10px;
+        .form-wrapper {
+          display: flex;
+          align-items: center;
+          .select-wrapper {
+            display: flex;
+            align-items: center;
+            .el-select {
+              width: 155px;
+              margin-right: 10px;
+              .el-input .el-input__inner {
+                width: 150px;
+              }
+            }
+          }
+          .date-wrapper {
+            display: flex;
+            align-items: center;
+            font-size: 14px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #b3b3b3;
+            .date-item-wrapper {
+              white-space: nowrap;
+              display: flex;
+              align-items: center;
+              margin-right: 15px;
+              .date-item-date {
+                .el-input {
+                  width: 155px;
+                }
+                .el-input .el-input__inner {
+                  width: 150px;
+                  font-size: 13px;
+                  color: #b3b3b3;
+                }
+              }
+            }
+          }
+        }
+        .but {
+          display: flex;
+          flex-direction: row;
+          align-content: center;
+        }
+        .el-button + .el-button {
+          margin-left: 0;
+        }
+        .buttons {
+          background-color: rgba(0, 70, 199, 0.2);
+          border: 1px solid #3b4c6c;
+          color: #b3b3b3;
+          font-size: 14px;
+          margin-right: 10px;
+          &:hover {
+            background-color: rgba(0, 70, 199, 0.5);
+            color: #ffffff;
+          }
         }
       }
     }
-    .search-btns {
-      display: flex;
-      .searchColor {
-        background-color: rgba(0, 70, 199, 0.2);
-        border: 1px solid #3b4c6c;
-        color: #b3b3b3;
-        font-size: 14px;
-
-        &:hover {
-          background-color: rgba(0, 70, 199, 0.5);
-          color: #ffffff;
-        }
+    ::v-deep .search-right {
+      position: relative;
+      .select-back {
+        position: absolute;
+        top: -1px;
+        left: 0;
+      }
+      .el-select .el-input__inner {
+        background: rgba(67, 81, 107, 0.2);
+        border: 0px solid #2a374f;
+        border-radius: 0px;
       }
     }
   }
-  ::v-deep .search-right {
-    position: relative;
-    .select-back {
-      position: absolute;
-      top: -1px;
-      left: 0;
+  .data-bodys {
+    height: calc(100% - 60px - 300px - 10px);
+    display: flex;
+    flex-direction: column;
+    background-color: rgba(0, 0, 0, 0.45);
+    border-radius: 5px;
+    padding: 5px;
+    .icon-arrow-down:before {
+      color: #ff8300;
+    }
+    .icon-arrow-up:before {
+      color: #1c99ff;
     }
-    .el-select .el-input__inner {
-      background: rgba(67, 81, 107, 0.2);
-      border: 0px solid #2a374f;
-      border-radius: 0px;
+    .economicTable {
+      width: 100%;
+      height: calc(100% - 46px);
     }
   }
-
   .line {
     padding-bottom: 5px;
 
@@ -558,6 +602,7 @@ export default {
     background-color: rgba(0, 0, 0, 0.45);
     border-radius: 5px;
     width: 100%;
+    height: 300px;
   }
 }
 
@@ -574,35 +619,10 @@ export default {
   zoom: 1;
 }
 
-/deep/ .el-input__prefix {
-  right: -15px;
-  left: unset;
-}
-
-/deep/ .el-input--prefix .el-input__inner {
-  padding-left: 20px;
-}
-
 .el-table::before {
   height: 0;
 }
 
-.compare-lift-down {
-  margin-left: 7px;
-  font-size: 14px;
-  font-family: Arial;
-  font-weight: 400;
-  color: #ff8300;
-}
-
-.compare-lift-up {
-  margin-left: 7px;
-  font-size: 14px;
-  font-family: Arial;
-  font-weight: 400;
-  color: #1c99ff;
-}
-
 .chart-name {
   display: flex;
   align-items: center;

src/views/layout/economicsOperation/thematicAnalysis/failure/indexFd.vue

@@ -1,54 +1,61 @@
 <template>
   <div class="parcel-box">
     <div class="failure-header">
-      <div class="search">
-        <div class="search-left">
-          <el-select
-            size="mini"
-            v-model="tabIndex"
-            placeholder="请选择"
-            @change="tabClick"
-          >
-            <el-option
-              v-for="item in tabOptions"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id"
-            >
-            </el-option>
-          </el-select>
-          <el-select
-            size="mini"
-            v-model="company"
-            placeholder="请选择"
-            @change="getHomePageData()"
-          >
-            <el-option
-              v-for="item in companyOptions"
-              :key="item.id"
-              :label="item.aname"
-              :value="item.id"
-            >
-            </el-option>
-          </el-select>
-          <div class="search-input">
-            <el-date-picker
-              size="mini"
-              v-model="searchYear"
-              type="year"
-              value-format="YYYY"
-              placeholder="选择年"
-              popper-class="date-select"
+      <div class="search-left">
+        <div class="title">
+          <div class="form-wrapper">
+            <div class="select-wrapper">
+              <el-select
+                size="mini"
+                v-model="tabIndex"
+                placeholder="请选择"
+                @change="tabClick"
+              >
+                <el-option
+                  v-for="item in tabOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                >
+                </el-option>
+              </el-select>
+              <el-select
+                size="mini"
+                v-model="company"
+                placeholder="请选择"
+                @change="search"
+              >
+                <el-option
+                  v-for="item in companyOptions"
+                  :key="item.id"
+                  :label="item.aname"
+                  :value="item.id"
+                >
+                </el-option>
+              </el-select>
+            </div>
+            <div class="date-wrapper">
+              <div class="date-item-wrapper">
+                <div class="date-item-date">
+                  <el-date-picker
+                    size="mini"
+                    v-model="searchYear"
+                    type="year"
+                    value-format="YYYY"
+                    placeholder="选择年"
+                  >
+                  </el-date-picker>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="btns">
+            <el-button round size="mini" class="buttons search" @click="search"
+              >搜索</el-button
             >
-            </el-date-picker>
           </div>
+          <!-- <el-button round size="mini">导出</el-button> -->
         </div>
-        <div class="search-btns">
-          <el-button round size="mini" class="searchColor" @click="search"
-            >搜索</el-button
-          >
-        </div>
-        <!-- <el-button round size="mini">导出</el-button> -->
       </div>
       <div class="search-right">
         <img class="select-back" src="@assets/img/images/select-back.png" />
@@ -56,7 +63,7 @@
           <el-select
             v-model="selectValue"
             placeholder="请选择"
-            @change="getHomePageData()"
+            @change="search"
             clearable
           >
             <el-option
@@ -83,7 +90,7 @@
           style="width: 100%"
           size="mini"
           stripe
-          height="50vh"
+          height="100%"
           :header-cell-style="{ 'text-align': 'center' }"
           @row-click="rowClick"
         >
@@ -182,16 +189,16 @@
         <div class="point right bottom"></div>
         {{ selectValue }}
       </div>
-      <div>
+      <div style="height: calc(100% - 50px)">
         <BarCharts
           :list="barList"
           width="97%"
-          height="32vh"
-          :top="60"
+          height="100%"
+          :top="25"
           :pillarName="pillarName"
           :xdate="false"
           :showLegend="true"
-          :units="['', '']"
+          :units="['']"
         ></BarCharts>
       </div>
     </div>
@@ -202,7 +209,6 @@
 import { GetOrganization } from "@/api/headerNav.js";
 import BarCharts from "../../homePage/components/barCharts.vue";
 import {
-  companys,
   gzsslList,
   whsslList,
   xdsslList,
@@ -212,8 +218,6 @@ import {
 export default {
   name: "failureFd",
   components: {
-    // ChartColumnar,
-    // Panel,
     BarCharts,
   },
   data() {
@@ -418,9 +422,6 @@ export default {
           break;
       }
     },
-    getHomePageData() {
-      this.search();
-    },
     monthChange(data) {
       let year = new Date(data).getFullYear().toString();
       return year;
@@ -451,71 +452,117 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.data-bodys {
-  display: flex;
-  flex-direction: column;
-  background-color: rgba(0, 0, 0, 0.45);
-  border-radius: 5px;
-  padding: 5px;
-}
-
 .parcel-box {
   padding: 0 20px;
   box-sizing: border-box;
+  height: 100%;
   .failure-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
-  }
-  .search {
-    display: flex;
-    flex-direction: row;
-    padding-top: 10px;
-    padding-bottom: 10px;
-    align-items: center;
-    // justify-content: space-between;
-
-    button {
-      margin-left: 10px;
-      background: rgba(67, 81, 107, 0.3);
-      border: 1px solid #354460;
-      color: #b3b3b3;
-    }
-    ::v-deep .search-left {
+    .search-left ::v-deep {
       display: flex;
+      flex-direction: row;
       align-items: center;
-      .el-select {
-        margin-right: 10px;
-        width: 155px;
-        .el-input .el-input__inner {
-          width: 150px;
+      .title {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        margin-top: 10px;
+        margin-bottom: 10px;
+        padding-left: 10px;
+        .form-wrapper {
+          display: flex;
+          align-items: center;
+          .select-wrapper {
+            display: flex;
+            align-items: center;
+            .el-select {
+              width: 155px;
+              margin-right: 10px;
+              .el-input .el-input__inner {
+                width: 150px;
+              }
+            }
+          }
+          .date-wrapper {
+            display: flex;
+            align-items: center;
+            font-size: 14px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #b3b3b3;
+            .date-item-wrapper {
+              white-space: nowrap;
+              display: flex;
+              align-items: center;
+              margin-right: 15px;
+              .date-item-date {
+                .el-input {
+                  width: 155px;
+                }
+                .el-input .el-input__inner {
+                  width: 150px;
+                  font-size: 13px;
+                  color: #b3b3b3;
+                }
+              }
+            }
+          }
+        }
+        .but {
+          display: flex;
+          flex-direction: row;
+          align-content: center;
+        }
+        .el-button + .el-button {
+          margin-left: 0;
+        }
+        .buttons {
+          background-color: rgba(0, 70, 199, 0.2);
+          border: 1px solid #3b4c6c;
+          color: #b3b3b3;
+          font-size: 14px;
+          margin-right: 10px;
+          &:hover {
+            background-color: rgba(0, 70, 199, 0.5);
+            color: #ffffff;
+          }
         }
       }
     }
-    .search-btns {
-      display: flex;
-      .searchColor {
-        background-color: rgba(0, 70, 199, 0.2);
-        border: 1px solid #3b4c6c;
-        color: #b3b3b3;
-        font-size: 14px;
-
-        &:hover {
-          background-color: rgba(0, 70, 199, 0.5);
-          color: #ffffff;
-        }
+    ::v-deep .search-right {
+      position: relative;
+      .select-back {
+        position: absolute;
+        top: -1px;
+        left: 0;
+      }
+      .el-select .el-input__inner {
+        background: rgba(67, 81, 107, 0.2);
+        border: 0px solid #2a374f;
+        border-radius: 0px;
       }
     }
   }
-  .search-right {
-    position: relative;
-    .select-back {
-      position: absolute;
-      top: -1px;
-      left: 0;
+  .data-bodys {
+    height: calc(100% - 60px - 300px - 10px);
+    display: flex;
+    flex-direction: column;
+    background-color: rgba(0, 0, 0, 0.45);
+    border-radius: 5px;
+    padding: 5px;
+    .icon-arrow-down:before {
+      color: #ff8300;
+    }
+    .icon-arrow-up:before {
+      color: #1c99ff;
+    }
+    .economicTable {
+      width: 100%;
+      height: calc(100% - 46px);
     }
   }
-
   .line {
     padding-bottom: 5px;
 
@@ -553,6 +600,7 @@ export default {
     background-color: rgba(0, 0, 0, 0.45);
     border-radius: 5px;
     width: 100%;
+    height: 300px;
   }
 }
 
@@ -569,35 +617,10 @@ export default {
   zoom: 1;
 }
 
-/deep/ .el-input__prefix {
-  right: -15px;
-  left: unset;
-}
-
-/deep/ .el-input--prefix .el-input__inner {
-  padding-left: 20px;
-}
-
 .el-table::before {
   height: 0;
 }
 
-.compare-lift-down {
-  margin-left: 7px;
-  font-size: 14px;
-  font-family: Arial;
-  font-weight: 400;
-  color: #ff8300;
-}
-
-.compare-lift-up {
-  margin-left: 7px;
-  font-size: 14px;
-  font-family: Arial;
-  font-weight: 400;
-  color: #1c99ff;
-}
-
 .chart-name {
   display: flex;
   align-items: center;

src/views/layout/economicsOperation/thematicAnalysis/generation/index.vue

@@ -1,52 +1,60 @@
 <template>
   <div class="parcel-box">
     <div class="failure-header">
-      <div class="search">
-        <div class="search-left">
-          <el-select
-            size="mini"
-            v-model="tabIndex"
-            placeholder="请选择"
-            @change="tabClick"
-          >
-            <el-option
-              v-for="item in tabOptions"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id"
-            >
-            </el-option>
-          </el-select>
-          <el-select
-            size="mini"
-            v-model="company"
-            placeholder="请选择"
-            @change="search"
-          >
-            <el-option
-              v-for="item in companyOptions"
-              :key="item.id"
-              :label="item.aname"
-              :value="item.id"
-            >
-            </el-option>
-          </el-select>
-          <div class="search-input">
-            <el-date-picker
-              size="mini"
-              v-model="searchYear"
-              type="year"
-              value-format="YYYY"
-              placeholder="选择年"
-              popper-class="date-select"
+      <div class="search-left">
+        <div class="title">
+          <div class="form-wrapper">
+            <div class="select-wrapper">
+              <el-select
+                size="mini"
+                v-model="tabIndex"
+                placeholder="请选择"
+                @change="tabClick"
+              >
+                <el-option
+                  v-for="item in tabOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                >
+                </el-option>
+              </el-select>
+              <el-select
+                size="mini"
+                v-model="company"
+                placeholder="请选择"
+                @change="search"
+              >
+                <el-option
+                  v-for="item in companyOptions"
+                  :key="item.id"
+                  :label="item.aname"
+                  :value="item.id"
+                >
+                </el-option>
+              </el-select>
+            </div>
+            <div class="date-wrapper">
+              <div class="date-item-wrapper">
+                <div class="date-item-date">
+                  <el-date-picker
+                    size="mini"
+                    v-model="searchYear"
+                    type="year"
+                    value-format="YYYY"
+                    placeholder="选择年"
+                  >
+                  </el-date-picker>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="btns">
+            <el-button round size="mini" class="buttons search" @click="search"
+              >搜索</el-button
             >
-            </el-date-picker>
           </div>
-        </div>
-        <div class="search-btns">
-          <el-button round size="mini" class="searchColor" @click="search"
-            >搜索</el-button
-          >
+          <!-- <el-button round size="mini">导出</el-button> -->
         </div>
       </div>
       <div class="search-right">
@@ -82,7 +90,7 @@
           style="width: 100%"
           size="mini"
           stripe
-          height="50vh"
+          height="100%"
           :header-cell-style="{ 'text-align': 'center' }"
           @row-click="rowClick"
         >
@@ -161,22 +169,22 @@
         </el-table>
       </div>
     </div>
-    <div class="echarts" style="height: 30vh">
+    <div class="echarts">
       <div class="chart-name">
         <div class="point left bottom"></div>
         <div class="point right bottom"></div>
         {{ selectValue }}
       </div>
-      <div>
+      <div style="height: calc(100% - 50px)">
         <BarCharts
           :list="barList"
           width="97%"
-          height="32vh"
-          :top="60"
+          height="100%"
+          :top="25"
           :pillarName="pillarName"
           :xdate="false"
           :showLegend="true"
-          :units="['', '']"
+          :units="['']"
         ></BarCharts>
       </div>
     </div>
@@ -358,80 +366,122 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.data-bodys {
-  display: flex;
-  flex-direction: column;
-  background-color: rgba(0, 0, 0, 0.45);
-  border-radius: 5px;
-  padding: 5px;
-  .icon-arrow-down:before {
-    color: #ff8300;
-  }
-  .icon-arrow-up:before {
-    color: #1c99ff;
-  }
-}
-
 .parcel-box {
   padding: 0 20px;
   box-sizing: border-box;
-
+  height: 100%;
   .failure-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
-  }
-  .search {
-    display: flex;
-    flex-direction: row;
-    padding-top: 10px;
-    padding-bottom: 10px;
-    align-items: center;
-    // justify-content: space-between;
-
-    button {
-      margin-left: 10px;
-      background: rgba(67, 81, 107, 0.3);
-      border: 1px solid #354460;
-      color: #b3b3b3;
-    }
-    ::v-deep .search-left {
+    .search-left ::v-deep {
       display: flex;
+      flex-direction: row;
       align-items: center;
-      .el-select {
-        margin-right: 10px;
-        width: 155px;
-        .el-input .el-input__inner {
-          width: 150px;
+      .title {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        margin-top: 10px;
+        margin-bottom: 10px;
+        padding-left: 10px;
+        .form-wrapper {
+          display: flex;
+          align-items: center;
+          .select-wrapper {
+            display: flex;
+            align-items: center;
+            .el-select {
+              width: 155px;
+              margin-right: 10px;
+              .el-input .el-input__inner {
+                width: 150px;
+              }
+            }
+          }
+          .date-wrapper {
+            display: flex;
+            align-items: center;
+            font-size: 14px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #b3b3b3;
+            .date-item-wrapper {
+              white-space: nowrap;
+              display: flex;
+              align-items: center;
+              margin-right: 15px;
+              .date-item-date {
+                .el-input {
+                  width: 155px;
+                }
+                .el-input .el-input__inner {
+                  width: 150px;
+                  font-size: 13px;
+                  color: #b3b3b3;
+                }
+              }
+            }
+          }
+        }
+        .but {
+          display: flex;
+          flex-direction: row;
+          align-content: center;
+        }
+        .el-button + .el-button {
+          margin-left: 0;
+        }
+        .buttons {
+          background-color: rgba(0, 70, 199, 0.2);
+          border: 1px solid #3b4c6c;
+          color: #b3b3b3;
+          font-size: 14px;
+          margin-right: 10px;
+          &:hover {
+            background-color: rgba(0, 70, 199, 0.5);
+            color: #ffffff;
+          }
         }
       }
     }
-    .search-btns {
-      display: flex;
-      .searchColor {
-        background-color: rgba(0, 70, 199, 0.2);
-        border: 1px solid #3b4c6c;
-        color: #b3b3b3;
-        font-size: 14px;
-
-        &:hover {
-          background-color: rgba(0, 70, 199, 0.5);
-          color: #ffffff;
-        }
+    ::v-deep .search-right {
+      position: relative;
+      .select-back {
+        position: absolute;
+        top: -1px;
+        left: 0;
+      }
+      .el-select .el-input__inner {
+        background: rgba(67, 81, 107, 0.2);
+        border: 0px solid #2a374f;
+        border-radius: 0px;
       }
     }
   }
-  .search-right {
-    position: relative;
-    .select-back {
-      position: absolute;
-      top: -1px;
-      left: 0;
+  .data-bodys {
+    height: calc(100% - 60px - 300px - 10px);
+    display: flex;
+    flex-direction: column;
+    background-color: rgba(0, 0, 0, 0.45);
+    border-radius: 5px;
+    padding: 5px;
+
+    .icon-arrow-down:before {
+      color: #ff8300;
+    }
+    .icon-arrow-up:before {
+      color: #1c99ff;
     }
-  }
 
+    .economicTable {
+      width: 100%;
+      height: calc(100% - 46px);
+    }
+  }
   .line {
     padding-bottom: 5px;
+
     .leftContent {
       width: 242px;
       height: 41px;
@@ -462,10 +512,11 @@ export default {
   }
 
   .echarts {
-    margin-top: 20px;
+    margin-top: 10px;
     background-color: rgba(0, 0, 0, 0.45);
     border-radius: 5px;
     width: 100%;
+    height: 300px;
   }
 }
 
@@ -482,15 +533,6 @@ export default {
   zoom: 1;
 }
 
-/deep/ .el-input__prefix {
-  right: -15px;
-  left: unset;
-}
-
-/deep/ .el-input--prefix .el-input__inner {
-  padding-left: 20px;
-}
-
 .el-table::before {
   height: 0;
 }

src/views/layout/economicsOperation/thematicAnalysis/generation/indexFd.vue

@@ -1,52 +1,60 @@
 <template>
   <div class="parcel-box">
     <div class="failure-header">
-      <div class="search">
-        <div class="search-left">
-          <el-select
-            size="mini"
-            v-model="tabIndex"
-            placeholder="请选择"
-            @change="tabClick"
-          >
-            <el-option
-              v-for="item in tabOptions"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id"
-            >
-            </el-option>
-          </el-select>
-          <el-select
-            size="mini"
-            v-model="company"
-            placeholder="请选择"
-            @change="search"
-          >
-            <el-option
-              v-for="item in companyOptions"
-              :key="item.id"
-              :label="item.aname"
-              :value="item.id"
-            >
-            </el-option>
-          </el-select>
-          <div class="search-input">
-            <el-date-picker
-              size="mini"
-              v-model="searchYear"
-              type="year"
-              value-format="YYYY"
-              placeholder="选择年"
-              popper-class="date-select"
+      <div class="search-left">
+        <div class="title">
+          <div class="form-wrapper">
+            <div class="select-wrapper">
+              <el-select
+                size="mini"
+                v-model="tabIndex"
+                placeholder="请选择"
+                @change="tabClick"
+              >
+                <el-option
+                  v-for="item in tabOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                >
+                </el-option>
+              </el-select>
+              <el-select
+                size="mini"
+                v-model="company"
+                placeholder="请选择"
+                @change="search"
+              >
+                <el-option
+                  v-for="item in companyOptions"
+                  :key="item.id"
+                  :label="item.aname"
+                  :value="item.id"
+                >
+                </el-option>
+              </el-select>
+            </div>
+            <div class="date-wrapper">
+              <div class="date-item-wrapper">
+                <div class="date-item-date">
+                  <el-date-picker
+                    size="mini"
+                    v-model="searchYear"
+                    type="year"
+                    value-format="YYYY"
+                    placeholder="选择年"
+                  >
+                  </el-date-picker>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="btns">
+            <el-button round size="mini" class="buttons search" @click="search"
+              >搜索</el-button
             >
-            </el-date-picker>
           </div>
-        </div>
-        <div class="search-btns">
-          <el-button round size="mini" class="searchColor" @click="search"
-            >搜索</el-button
-          >
+          <!-- <el-button round size="mini">导出</el-button> -->
         </div>
       </div>
       <div class="search-right">
@@ -82,15 +90,15 @@
           style="width: 100%"
           size="mini"
           stripe
-          height="50vh"
+          height="100%"
           :header-cell-style="{ 'text-align': 'center' }"
           @row-click="rowClick"
         >
           <el-table-column
             align="left"
             prop=""
-            label="场站"
             width="80"
+            label="场站"
             show-overflow-tooltip
             sortable
           >
@@ -161,22 +169,22 @@
         </el-table>
       </div>
     </div>
-    <div class="echarts" style="height: 30vh">
+    <div class="echarts">
       <div class="chart-name">
         <div class="point left bottom"></div>
         <div class="point right bottom"></div>
         {{ selectValue }}
       </div>
-      <div>
+      <div style="height: calc(100% - 50px)">
         <BarCharts
           :list="barList"
           width="97%"
-          height="32vh"
-          :top="60"
+          height="100%"
+          :top="25"
           :pillarName="pillarName"
           :xdate="false"
           :showLegend="true"
-          :units="['', '']"
+          :units="['']"
         ></BarCharts>
       </div>
     </div>
@@ -188,7 +196,7 @@ import { GetOrganization } from "@/api/headerNav.js";
 import BarCharts from "../../homePage/components/barCharts.vue";
 import { companys, fdlList, zhcydlList } from "@/api/curveAnalyse";
 export default {
-  name: "curveAnalyse",
+  name: "generationGf",
   components: {
     // ChartColumnar,
     // Panel,
@@ -295,10 +303,9 @@ export default {
                 },
               ];
               this.tableData = [...arr, ...res.data];
-
               this.rowClick(res.data[res.data.length - 1]);
             } else {
-              this.rowClick([]);
+              this.barList = [];
             }
           });
           break;
@@ -321,7 +328,6 @@ export default {
                 },
               ];
               this.tableData = [...arr, ...res.data];
-
               this.rowClick(res.data[res.data.length - 1]);
             } else {
               this.barList = [];
@@ -360,80 +366,122 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.data-bodys {
-  display: flex;
-  flex-direction: column;
-  background-color: rgba(0, 0, 0, 0.45);
-  border-radius: 5px;
-  padding: 5px;
-  .icon-arrow-down:before {
-    color: #ff8300;
-  }
-  .icon-arrow-up:before {
-    color: #1c99ff;
-  }
-}
-
 .parcel-box {
   padding: 0 20px;
   box-sizing: border-box;
-
+  height: 100%;
   .failure-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
-  }
-  .search {
-    display: flex;
-    flex-direction: row;
-    padding-top: 10px;
-    padding-bottom: 10px;
-    align-items: center;
-    // justify-content: space-between;
-
-    button {
-      margin-left: 10px;
-      background: rgba(67, 81, 107, 0.3);
-      border: 1px solid #354460;
-      color: #b3b3b3;
-    }
-    ::v-deep .search-left {
+    .search-left ::v-deep {
       display: flex;
+      flex-direction: row;
       align-items: center;
-      .el-select {
-        margin-right: 10px;
-        width: 155px;
-        .el-input .el-input__inner {
-          width: 150px;
+      .title {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        margin-top: 10px;
+        margin-bottom: 10px;
+        padding-left: 10px;
+        .form-wrapper {
+          display: flex;
+          align-items: center;
+          .select-wrapper {
+            display: flex;
+            align-items: center;
+            .el-select {
+              width: 155px;
+              margin-right: 10px;
+              .el-input .el-input__inner {
+                width: 150px;
+              }
+            }
+          }
+          .date-wrapper {
+            display: flex;
+            align-items: center;
+            font-size: 14px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #b3b3b3;
+            .date-item-wrapper {
+              white-space: nowrap;
+              display: flex;
+              align-items: center;
+              margin-right: 15px;
+              .date-item-date {
+                .el-input {
+                  width: 155px;
+                }
+                .el-input .el-input__inner {
+                  width: 150px;
+                  font-size: 13px;
+                  color: #b3b3b3;
+                }
+              }
+            }
+          }
+        }
+        .but {
+          display: flex;
+          flex-direction: row;
+          align-content: center;
+        }
+        .el-button + .el-button {
+          margin-left: 0;
+        }
+        .buttons {
+          background-color: rgba(0, 70, 199, 0.2);
+          border: 1px solid #3b4c6c;
+          color: #b3b3b3;
+          font-size: 14px;
+          margin-right: 10px;
+          &:hover {
+            background-color: rgba(0, 70, 199, 0.5);
+            color: #ffffff;
+          }
         }
       }
     }
-    .search-btns {
-      display: flex;
-      .searchColor {
-        background-color: rgba(0, 70, 199, 0.2);
-        border: 1px solid #3b4c6c;
-        color: #b3b3b3;
-        font-size: 14px;
-
-        &:hover {
-          background-color: rgba(0, 70, 199, 0.5);
-          color: #ffffff;
-        }
+    ::v-deep .search-right {
+      position: relative;
+      .select-back {
+        position: absolute;
+        top: -1px;
+        left: 0;
+      }
+      .el-select .el-input__inner {
+        background: rgba(67, 81, 107, 0.2);
+        border: 0px solid #2a374f;
+        border-radius: 0px;
       }
     }
   }
-  .search-right {
-    position: relative;
-    .select-back {
-      position: absolute;
-      top: -1px;
-      left: 0;
+  .data-bodys {
+    height: calc(100% - 60px - 300px - 10px);
+    display: flex;
+    flex-direction: column;
+    background-color: rgba(0, 0, 0, 0.45);
+    border-radius: 5px;
+    padding: 5px;
+
+    .icon-arrow-down:before {
+      color: #ff8300;
+    }
+    .icon-arrow-up:before {
+      color: #1c99ff;
     }
-  }
 
+    .economicTable {
+      width: 100%;
+      height: calc(100% - 46px);
+    }
+  }
   .line {
     padding-bottom: 5px;
+
     .leftContent {
       width: 242px;
       height: 41px;
@@ -464,10 +512,11 @@ export default {
   }
 
   .echarts {
-    margin-top: 20px;
+    margin-top: 10px;
     background-color: rgba(0, 0, 0, 0.45);
     border-radius: 5px;
     width: 100%;
+    height: 300px;
   }
 }
 
@@ -484,15 +533,6 @@ export default {
   zoom: 1;
 }
 
-/deep/ .el-input__prefix {
-  right: -15px;
-  left: unset;
-}
-
-/deep/ .el-input--prefix .el-input__inner {
-  padding-left: 20px;
-}
-
 .el-table::before {
   height: 0;
 }

src/views/layout/economicsOperation/thematicAnalysis/utillHours/index.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="parcel-box">
-    <div class="failure-header">
-      <div class="search">
-        <div class="search-left">
+    <div class="title">
+      <div class="form-wrapper">
+        <div class="select-wrapper">
           <el-select
             size="mini"
             v-model="tabIndex"
@@ -31,24 +31,28 @@
             >
             </el-option>
           </el-select>
-          <div class="search-input">
-            <el-date-picker
-              size="mini"
-              v-model="searchYear"
-              type="year"
-              value-format="YYYY"
-              placeholder="选择年"
-              popper-class="date-select"
-            >
-            </el-date-picker>
-          </div>
         </div>
-        <div class="search-btns">
-          <el-button round size="mini" class="searchColor" @click="search"
-            >搜索</el-button
-          >
+        <div class="date-wrapper">
+          <div class="date-item-wrapper">
+            <div class="date-item-date">
+              <el-date-picker
+                size="mini"
+                v-model="searchYear"
+                type="year"
+                value-format="YYYY"
+                placeholder="选择年"
+              >
+              </el-date-picker>
+            </div>
+          </div>
         </div>
       </div>
+      <div class="btns">
+        <el-button round size="mini" class="buttons search" @click="search"
+          >搜索</el-button
+        >
+      </div>
+      <!-- <el-button round size="mini">导出</el-button> -->
     </div>
     <div class="data-bodys">
       <div class="line clearfix">
@@ -63,7 +67,7 @@
           style="width: 100%"
           size="mini"
           stripe
-          height="50vh"
+          height="100%"
           :header-cell-style="{ 'text-align': 'center' }"
           @row-click="rowClick"
         >
@@ -142,22 +146,22 @@
         </el-table>
       </div>
     </div>
-    <div class="echarts" style="height: 30vh">
+    <div class="echarts">
       <div class="chart-name">
         <div class="point left bottom"></div>
         <div class="point right bottom"></div>
         利用小时分析
       </div>
-      <div>
+      <div style="height: calc(100% - 50px)">
         <BarCharts
           :list="barList"
           width="97%"
-          height="32vh"
-          :top="60"
+          height="100%"
+          :top="25"
           :pillarName="pillarName"
           :xdate="false"
           :showLegend="true"
-          :units="['', '']"
+          :units="['']"
         ></BarCharts>
       </div>
     </div>
@@ -302,75 +306,74 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.data-bodys {
-  display: flex;
-  flex-direction: column;
-  background-color: rgba(0, 0, 0, 0.45);
-  border-radius: 5px;
-  padding: 5px;
-  .icon-arrow-down:before {
-    color: #ff8300;
-  }
-  .icon-arrow-up:before {
-    color: #1c99ff;
-  }
-}
-
 .parcel-box {
   padding: 0 20px;
   box-sizing: border-box;
-
-  .failure-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-  .search {
+  height: 100%;
+  .title ::v-deep {
     display: flex;
     flex-direction: row;
-    padding-top: 10px;
-    padding-bottom: 10px;
     align-items: center;
-    // justify-content: space-between;
-
-    button {
-      margin-left: 10px;
-      background: rgba(67, 81, 107, 0.3);
-      border: 1px solid #354460;
-      color: #b3b3b3;
-    }
-    ::v-deep .search-left {
+    margin-top: 10px;
+    margin-bottom: 10px;
+    padding-left: 10px;
+    .form-wrapper {
       display: flex;
       align-items: center;
-      .el-select {
-        margin-right: 10px;
-        width: 155px;
-        .el-input .el-input__inner {
-          width: 150px;
+      .select-wrapper {
+        display: flex;
+        align-items: center;
+        .el-select {
+          width: 155px;
+          margin-right: 10px;
+          .el-input .el-input__inner {
+            width: 150px;
+          }
         }
       }
-    }
-    .search-btns {
-      display: flex;
-      .searchColor {
-        background-color: rgba(0, 70, 199, 0.2);
-        border: 1px solid #3b4c6c;
-        color: #b3b3b3;
+      .date-wrapper {
+        display: flex;
+        align-items: center;
         font-size: 14px;
-
-        &:hover {
-          background-color: rgba(0, 70, 199, 0.5);
-          color: #ffffff;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        color: #b3b3b3;
+        .date-item-wrapper {
+          white-space: nowrap;
+          display: flex;
+          align-items: center;
+          margin-right: 15px;
+          .date-item-date {
+            .el-input {
+              width: 155px;
+            }
+            .el-input .el-input__inner {
+              width: 150px;
+              font-size: 13px;
+              color: #b3b3b3;
+            }
+          }
         }
       }
     }
-  }
-  .search-right {
-    position: relative;
-    .select-back {
-      position: absolute;
-      top: -1px;
-      left: 0;
+    .but {
+      display: flex;
+      flex-direction: row;
+      align-content: center;
+    }
+    .el-button + .el-button {
+      margin-left: 0;
+    }
+    .buttons {
+      background-color: rgba(0, 70, 199, 0.2);
+      border: 1px solid #3b4c6c;
+      color: #b3b3b3;
+      font-size: 14px;
+      margin-right: 10px;
+      &:hover {
+        background-color: rgba(0, 70, 199, 0.5);
+        color: #ffffff;
+      }
     }
   }
 
@@ -404,12 +407,30 @@ export default {
       float: right;
     }
   }
-
+  .data-bodys {
+    height: calc(100% - 60px - 300px - 10px);
+    display: flex;
+    flex-direction: column;
+    background-color: rgba(0, 0, 0, 0.45);
+    border-radius: 5px;
+    padding: 5px;
+    .icon-arrow-down:before {
+      color: #ff8300;
+    }
+    .icon-arrow-up:before {
+      color: #1c99ff;
+    }
+    .economicTable {
+      width: 100%;
+      height: calc(100% - 46px);
+    }
+  }
   .echarts {
-    margin-top: 20px;
+    margin-top: 10px;
     background-color: rgba(0, 0, 0, 0.45);
     border-radius: 5px;
     width: 100%;
+    height: 300px;
   }
 }
 
@@ -426,15 +447,6 @@ export default {
   zoom: 1;
 }
 
-/deep/ .el-input__prefix {
-  right: -15px;
-  left: unset;
-}
-
-/deep/ .el-input--prefix .el-input__inner {
-  padding-left: 20px;
-}
-
 .el-table::before {
   height: 0;
 }

src/views/layout/economicsOperation/thematicAnalysis/utillHours/indexFd.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="parcel-box">
-    <div class="failure-header">
-      <div class="search">
-        <div class="search-left">
+    <div class="title">
+      <div class="form-wrapper">
+        <div class="select-wrapper">
           <el-select
             size="mini"
             v-model="tabIndex"
@@ -31,24 +31,28 @@
             >
             </el-option>
           </el-select>
-          <div class="search-input">
-            <el-date-picker
-              size="mini"
-              v-model="searchYear"
-              type="year"
-              value-format="YYYY"
-              placeholder="选择年"
-              popper-class="date-select"
-            >
-            </el-date-picker>
-          </div>
         </div>
-        <div class="search-btns">
-          <el-button round size="mini" class="searchColor" @click="search"
-            >搜索</el-button
-          >
+        <div class="date-wrapper">
+          <div class="date-item-wrapper">
+            <div class="date-item-date">
+              <el-date-picker
+                size="mini"
+                v-model="searchYear"
+                type="year"
+                value-format="YYYY"
+                placeholder="选择年"
+              >
+              </el-date-picker>
+            </div>
+          </div>
         </div>
       </div>
+      <div class="btns">
+        <el-button round size="mini" class="buttons search" @click="search"
+          >搜索</el-button
+        >
+      </div>
+      <!-- <el-button round size="mini">导出</el-button> -->
     </div>
     <div class="data-bodys">
       <div class="line clearfix">
@@ -63,7 +67,7 @@
           style="width: 100%"
           size="mini"
           stripe
-          height="50vh"
+          height="100%"
           :header-cell-style="{ 'text-align': 'center' }"
           @row-click="rowClick"
         >
@@ -142,22 +146,22 @@
         </el-table>
       </div>
     </div>
-    <div class="echarts" style="height: 30vh">
+    <div class="echarts">
       <div class="chart-name">
         <div class="point left bottom"></div>
         <div class="point right bottom"></div>
         利用小时分析
       </div>
-      <div>
+      <div style="height: calc(100% - 50px)">
         <BarCharts
           :list="barList"
           width="97%"
-          height="32vh"
-          :top="60"
+          height="100%"
+          :top="25"
           :pillarName="pillarName"
           :xdate="false"
           :showLegend="true"
-          :units="['', '']"
+          :units="['']"
         ></BarCharts>
       </div>
     </div>
@@ -169,7 +173,7 @@ import { GetOrganization } from "@/api/headerNav.js";
 import BarCharts from "../../homePage/components/barCharts.vue";
 import { lyxsList } from "@/api/curveAnalyse";
 export default {
-  name: "utillHours", //利用小时分析
+  name: "utillHoursFd", //利用小时分析
   components: {
     // ChartColumnar,
     // Panel,
@@ -302,75 +306,74 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.data-bodys {
-  display: flex;
-  flex-direction: column;
-  background-color: rgba(0, 0, 0, 0.45);
-  border-radius: 5px;
-  padding: 5px;
-  .icon-arrow-down:before {
-    color: #ff8300;
-  }
-  .icon-arrow-up:before {
-    color: #1c99ff;
-  }
-}
-
 .parcel-box {
   padding: 0 20px;
   box-sizing: border-box;
-
-  .failure-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-  .search {
+  height: 100%;
+  .title ::v-deep {
     display: flex;
     flex-direction: row;
-    padding-top: 10px;
-    padding-bottom: 10px;
     align-items: center;
-    // justify-content: space-between;
-
-    button {
-      margin-left: 10px;
-      background: rgba(67, 81, 107, 0.3);
-      border: 1px solid #354460;
-      color: #b3b3b3;
-    }
-    ::v-deep .search-left {
+    margin-top: 10px;
+    margin-bottom: 10px;
+    padding-left: 10px;
+    .form-wrapper {
       display: flex;
       align-items: center;
-      .el-select {
-        margin-right: 10px;
-        width: 155px;
-        .el-input .el-input__inner {
-          width: 150px;
+      .select-wrapper {
+        display: flex;
+        align-items: center;
+        .el-select {
+          width: 155px;
+          margin-right: 10px;
+          .el-input .el-input__inner {
+            width: 150px;
+          }
         }
       }
-    }
-    .search-btns {
-      display: flex;
-      .searchColor {
-        background-color: rgba(0, 70, 199, 0.2);
-        border: 1px solid #3b4c6c;
-        color: #b3b3b3;
+      .date-wrapper {
+        display: flex;
+        align-items: center;
         font-size: 14px;
-
-        &:hover {
-          background-color: rgba(0, 70, 199, 0.5);
-          color: #ffffff;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        color: #b3b3b3;
+        .date-item-wrapper {
+          white-space: nowrap;
+          display: flex;
+          align-items: center;
+          margin-right: 15px;
+          .date-item-date {
+            .el-input {
+              width: 155px;
+            }
+            .el-input .el-input__inner {
+              width: 150px;
+              font-size: 13px;
+              color: #b3b3b3;
+            }
+          }
         }
       }
     }
-  }
-  .search-right {
-    position: relative;
-    .select-back {
-      position: absolute;
-      top: -1px;
-      left: 0;
+    .but {
+      display: flex;
+      flex-direction: row;
+      align-content: center;
+    }
+    .el-button + .el-button {
+      margin-left: 0;
+    }
+    .buttons {
+      background-color: rgba(0, 70, 199, 0.2);
+      border: 1px solid #3b4c6c;
+      color: #b3b3b3;
+      font-size: 14px;
+      margin-right: 10px;
+      &:hover {
+        background-color: rgba(0, 70, 199, 0.5);
+        color: #ffffff;
+      }
     }
   }
 
@@ -404,12 +407,30 @@ export default {
       float: right;
     }
   }
-
+  .data-bodys {
+    height: calc(100% - 60px - 300px - 10px);
+    display: flex;
+    flex-direction: column;
+    background-color: rgba(0, 0, 0, 0.45);
+    border-radius: 5px;
+    padding: 5px;
+    .icon-arrow-down:before {
+      color: #ff8300;
+    }
+    .icon-arrow-up:before {
+      color: #1c99ff;
+    }
+    .economicTable {
+      width: 100%;
+      height: calc(100% - 46px);
+    }
+  }
   .echarts {
-    margin-top: 20px;
+    margin-top: 10px;
     background-color: rgba(0, 0, 0, 0.45);
     border-radius: 5px;
     width: 100%;
+    height: 300px;
   }
 }
 
@@ -426,15 +447,6 @@ export default {
   zoom: 1;
 }
 
-/deep/ .el-input__prefix {
-  right: -15px;
-  left: unset;
-}
-
-/deep/ .el-input--prefix .el-input__inner {
-  padding-left: 20px;
-}
-
 .el-table::before {
   height: 0;
 }

src/views/layout/economicsOperation/thematicAnalysis/windEnergy/index.vue

@@ -1,49 +1,54 @@
 <template>
   <div class="parcel-box">
-    <div class="search">
-      <div class="search-left">
-        <el-select
-          size="mini"
-          v-model="tabIndex"
-          placeholder="请选择"
-          @change="tabClick"
-        >
-          <el-option
-            v-for="item in tabOptions"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id"
-          >
-          </el-option>
-        </el-select>
-        <el-select
-          size="mini"
-          v-model="company"
-          placeholder="请选择"
-          @change="getHomePageData()"
-        >
-          <el-option
-            v-for="item in companyOptions"
-            :key="item.id"
-            :label="item.aname"
-            :value="item.id"
+    <div class="title">
+      <div class="form-wrapper">
+        <div class="select-wrapper">
+          <el-select
+            size="mini"
+            v-model="tabIndex"
+            placeholder="请选择"
+            @change="tabClick"
           >
-          </el-option>
-        </el-select>
-        <div class="search-input">
-          <el-date-picker
+            <el-option
+              v-for="item in tabOptions"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+          <el-select
             size="mini"
-            v-model="searchYear"
-            type="year"
-            value-format="YYYY"
-            placeholder="选择年"
-            popper-class="date-select"
+            v-model="company"
+            placeholder="请选择"
+            @change="search"
           >
-          </el-date-picker>
+            <el-option
+              v-for="item in companyOptions"
+              :key="item.id"
+              :label="item.aname"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+        </div>
+        <div class="date-wrapper">
+          <div class="date-item-wrapper">
+            <div class="date-item-date">
+              <el-date-picker
+                size="mini"
+                v-model="searchYear"
+                type="year"
+                value-format="YYYY"
+                placeholder="选择年"
+              >
+              </el-date-picker>
+            </div>
+          </div>
         </div>
       </div>
-      <div class="search-btns">
-        <el-button round size="mini" class="searchColor" @click="search"
+      <div class="btns">
+        <el-button round size="mini" class="buttons search" @click="search"
           >搜索</el-button
         >
       </div>
@@ -62,7 +67,7 @@
           style="width: 100%"
           size="mini"
           stripe
-          height="50vh"
+          height="100%"
           :header-cell-style="{ 'text-align': 'center' }"
           @row-click="rowClick"
         >
@@ -155,22 +160,22 @@
         </el-table>
       </div>
     </div>
-    <div class="echarts" style="height: 30vh">
+    <div class="echarts">
       <div class="chart-name">
         <div class="point left bottom"></div>
         <div class="point right bottom"></div>
         风能利用率
       </div>
-      <div style="margin-top: 10px">
+      <div style="height: calc(100% - 50px)">
         <BarCharts
           :list="barList"
           width="97%"
-          height="32vh"
-          :top="60"
+          height="100%"
+          :top="25"
           :pillarName="pillarName"
           :xdate="false"
           :showLegend="true"
-          :units="['', '']"
+          :units="['']"
         ></BarCharts>
       </div>
     </div>
@@ -180,9 +185,9 @@
 <script>
 import { GetOrganization } from "@/api/headerNav.js";
 import BarCharts from "../../../economicsOperation/homePage/components/barCharts.vue";
-import { companys, fnlylList } from "@/api/curveAnalyse";
+import { fnlylList } from "@/api/curveAnalyse";
 export default {
-  name: "curveAnalyse",
+  name: "windEnergy",
   components: {
     BarCharts,
   },
@@ -278,9 +283,7 @@ export default {
         }
       });
     },
-    getHomePageData() {
-      this.search();
-    },
+
     monthChange(data) {
       let year = new Date(data).getFullYear().toString();
       return year;
@@ -311,32 +314,77 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.data-bodys {
-  display: flex;
-  flex-direction: column;
-  background-color: rgba(0, 0, 0, 0.45);
-  border-radius: 5px;
-  padding: 5px;
-}
-
 .parcel-box {
   padding: 0 20px;
   box-sizing: border-box;
-
-  ::v-deep .search-left {
+  height: 100%;
+  .title ::v-deep {
     display: flex;
+    flex-direction: row;
     align-items: center;
-    .el-select {
-      margin-right: 10px;
-      width: 155px;
-      .el-input .el-input__inner {
-        width: 150px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    padding-left: 10px;
+    .form-wrapper {
+      display: flex;
+      align-items: center;
+      .select-wrapper {
+        display: flex;
+        align-items: center;
+        .el-select {
+          width: 155px;
+          margin-right: 10px;
+          .el-input .el-input__inner {
+            width: 150px;
+          }
+        }
+      }
+      .date-wrapper {
+        display: flex;
+        align-items: center;
+        font-size: 14px;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        color: #b3b3b3;
+        .date-item-wrapper {
+          white-space: nowrap;
+          display: flex;
+          align-items: center;
+          margin-right: 15px;
+          .date-item-date {
+            .el-input {
+              width: 155px;
+            }
+            .el-input .el-input__inner {
+              width: 150px;
+              font-size: 13px;
+              color: #b3b3b3;
+            }
+          }
+        }
       }
     }
-    .search-btns {
+    .but {
       display: flex;
+      flex-direction: row;
+      align-content: center;
+    }
+    .el-button + .el-button {
+      margin-left: 0;
+    }
+    .buttons {
+      background-color: rgba(0, 70, 199, 0.2);
+      border: 1px solid #3b4c6c;
+      color: #b3b3b3;
+      font-size: 14px;
+      margin-right: 10px;
+      &:hover {
+        background-color: rgba(0, 70, 199, 0.5);
+        color: #ffffff;
+      }
     }
   }
+
   .line {
     padding-bottom: 5px;
 
@@ -362,40 +410,30 @@ export default {
       background: url("../../../../../assets/imgs/title_right_bg.png");
     }
   }
-
-  .search {
+  .data-bodys {
+    height: calc(100% - 60px - 300px - 10px);
     display: flex;
-    flex-direction: row;
-    padding-top: 10px;
-    padding-bottom: 10px;
-    align-items: center;
-    // justify-content: space-between;
-
-    button {
-      margin-left: 10px;
-      background: rgba(67, 81, 107, 0.3);
-      border: 1px solid #354460;
-      color: #b3b3b3;
+    flex-direction: column;
+    background-color: rgba(0, 0, 0, 0.45);
+    border-radius: 5px;
+    padding: 5px;
+    .icon-arrow-down:before {
+      color: #ff8300;
     }
-
-    .searchColor {
-      background-color: rgba(0, 70, 199, 0.2);
-      border: 1px solid #3b4c6c;
-      color: #b3b3b3;
-      font-size: 14px;
-
-      &:hover {
-        background-color: rgba(0, 70, 199, 0.5);
-        color: #ffffff;
-      }
+    .icon-arrow-up:before {
+      color: #1c99ff;
+    }
+    .economicTable {
+      width: 100%;
+      height: calc(100% - 46px);
     }
   }
-
   .echarts {
-    margin-top: 20px;
+    margin-top: 10px;
     background-color: rgba(0, 0, 0, 0.45);
     border-radius: 5px;
     width: 100%;
+    height: 300px;
   }
 }
 
@@ -420,35 +458,10 @@ export default {
   float: right;
 }
 
-/deep/ .el-input__prefix {
-  right: -15px;
-  left: unset;
-}
-
-/deep/ .el-input--prefix .el-input__inner {
-  padding-left: 20px;
-}
-
 .el-table::before {
   height: 0;
 }
 
-.compare-lift-down {
-  margin-left: 7px;
-  font-size: 14px;
-  font-family: Arial;
-  font-weight: 400;
-  color: #ff8300;
-}
-
-.compare-lift-up {
-  margin-left: 7px;
-  font-size: 14px;
-  font-family: Arial;
-  font-weight: 400;
-  color: #1c99ff;
-}
-
 .chart-name {
   display: flex;
   align-items: center;

src/views/layout/economicsOperation/thematicAnalysis/windEnergy/indexGf.vue

@@ -1,49 +1,54 @@
 <template>
   <div class="parcel-box">
-    <div class="search">
-      <div class="search-left">
-        <el-select
-          size="mini"
-          v-model="tabIndex"
-          placeholder="请选择"
-          @change="tabClick"
-        >
-          <el-option
-            v-for="item in tabOptions"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id"
-          >
-          </el-option>
-        </el-select>
-        <el-select
-          size="mini"
-          v-model="company"
-          placeholder="请选择"
-          @change="getHomePageData()"
-        >
-          <el-option
-            v-for="item in companyOptions"
-            :key="item.id"
-            :label="item.aname"
-            :value="item.id"
+    <div class="title">
+      <div class="form-wrapper">
+        <div class="select-wrapper">
+          <el-select
+            size="mini"
+            v-model="tabIndex"
+            placeholder="请选择"
+            @change="tabClick"
           >
-          </el-option>
-        </el-select>
-        <div class="search-input">
-          <el-date-picker
+            <el-option
+              v-for="item in tabOptions"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+          <el-select
             size="mini"
-            v-model="searchYear"
-            type="year"
-            value-format="YYYY"
-            placeholder="选择年"
-            popper-class="date-select"
+            v-model="company"
+            placeholder="请选择"
+            @change="getHomePageData()"
           >
-          </el-date-picker>
+            <el-option
+              v-for="item in companyOptions"
+              :key="item.id"
+              :label="item.aname"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+        </div>
+        <div class="date-wrapper">
+          <div class="date-item-wrapper">
+            <div class="date-item-date">
+              <el-date-picker
+                size="mini"
+                v-model="searchYear"
+                type="year"
+                value-format="YYYY"
+                placeholder="选择年"
+              >
+              </el-date-picker>
+            </div>
+          </div>
         </div>
       </div>
-      <div class="search-btns">
-        <el-button round size="mini" class="searchColor" @click="search"
+      <div class="btns">
+        <el-button round size="mini" class="buttons search" @click="search"
           >搜索</el-button
         >
       </div>
@@ -62,7 +67,7 @@
           style="width: 100%"
           size="mini"
           stripe
-          height="50vh"
+          height="100%"
           :header-cell-style="{ 'text-align': 'center' }"
           @row-click="rowClick"
         >
@@ -106,7 +111,6 @@
                       style="
                         padding: 0 10px;
                         width: 100%;
-                        height: 100%;
                         display: flex;
                         flex-direction: row;
                         align-items: center;
@@ -155,22 +159,22 @@
         </el-table>
       </div>
     </div>
-    <div class="echarts" style="height: 30vh">
+    <div class="echarts">
       <div class="chart-name">
         <div class="point left bottom"></div>
         <div class="point right bottom"></div>
         光能利用率
       </div>
-      <div style="margin-top: 10px">
+      <div style="height: calc(100% - 50px)">
         <BarCharts
           :list="barList"
           width="97%"
-          height="32vh"
-          :top="60"
+          height="100%"
+          :top="25"
           :pillarName="pillarName"
           :xdate="false"
           :showLegend="true"
-          :units="['', '']"
+          :units="['']"
         ></BarCharts>
       </div>
     </div>
@@ -178,9 +182,9 @@
 </template>
 
 <script>
-import BarCharts from "../../homePage/components/barCharts.vue";
 import { GetOrganization } from "@/api/headerNav.js";
-import { companys, fnlylList } from "@/api/curveAnalyse";
+import BarCharts from "../../../economicsOperation/homePage/components/barCharts.vue";
+import { fnlylList } from "@/api/curveAnalyse";
 export default {
   name: "lightEnergy",
   components: {
@@ -195,7 +199,6 @@ export default {
         { id: -1, name: "风电" },
         { id: -2, name: "光伏" },
       ],
-      // barHeight: '260px',
       barList: [],
       tableData: [],
       tableHead: [
@@ -290,7 +293,7 @@ export default {
       return year;
     },
 
-    tabClick(data) {
+    tabClick() {
       this.$router.push({
         path: "/economicsOperation/thematicAnalysis/windEnergy",
       });
@@ -311,32 +314,77 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.data-bodys {
-  display: flex;
-  flex-direction: column;
-  background-color: rgba(0, 0, 0, 0.45);
-  border-radius: 5px;
-  padding: 5px;
-}
-
 .parcel-box {
   padding: 0 20px;
   box-sizing: border-box;
-
-  ::v-deep .search-left {
+  height: 100%;
+  .title ::v-deep {
     display: flex;
+    flex-direction: row;
     align-items: center;
-    .el-select {
-      margin-right: 10px;
-      width: 155px;
-      .el-input .el-input__inner {
-        width: 150px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    padding-left: 10px;
+    .form-wrapper {
+      display: flex;
+      align-items: center;
+      .select-wrapper {
+        display: flex;
+        align-items: center;
+        .el-select {
+          width: 155px;
+          margin-right: 10px;
+          .el-input .el-input__inner {
+            width: 150px;
+          }
+        }
+      }
+      .date-wrapper {
+        display: flex;
+        align-items: center;
+        font-size: 14px;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        color: #b3b3b3;
+        .date-item-wrapper {
+          white-space: nowrap;
+          display: flex;
+          align-items: center;
+          margin-right: 15px;
+          .date-item-date {
+            .el-input {
+              width: 155px;
+            }
+            .el-input .el-input__inner {
+              width: 150px;
+              font-size: 13px;
+              color: #b3b3b3;
+            }
+          }
+        }
       }
     }
-    .search-btns {
+    .but {
       display: flex;
+      flex-direction: row;
+      align-content: center;
+    }
+    .el-button + .el-button {
+      margin-left: 0;
+    }
+    .buttons {
+      background-color: rgba(0, 70, 199, 0.2);
+      border: 1px solid #3b4c6c;
+      color: #b3b3b3;
+      font-size: 14px;
+      margin-right: 10px;
+      &:hover {
+        background-color: rgba(0, 70, 199, 0.5);
+        color: #ffffff;
+      }
     }
   }
+
   .line {
     padding-bottom: 5px;
 
@@ -362,39 +410,30 @@ export default {
       background: url("../../../../../assets/imgs/title_right_bg.png");
     }
   }
-
-  .search {
+  .data-bodys {
+    height: calc(100% - 60px - 300px - 10px);
     display: flex;
-    flex-direction: row;
-    padding-top: 10px;
-    align-items: center;
-    // justify-content: space-between;
-
-    button {
-      margin-left: 10px;
-      background: rgba(67, 81, 107, 0.3);
-      border: 1px solid #354460;
-      color: #b3b3b3;
+    flex-direction: column;
+    background-color: rgba(0, 0, 0, 0.45);
+    border-radius: 5px;
+    padding: 5px;
+    .icon-arrow-down:before {
+      color: #ff8300;
     }
-
-    .searchColor {
-      background-color: rgba(0, 70, 199, 0.2);
-      border: 1px solid #3b4c6c;
-      color: #b3b3b3;
-      font-size: 14px;
-
-      &:hover {
-        background-color: rgba(0, 70, 199, 0.5);
-        color: #ffffff;
-      }
+    .icon-arrow-up:before {
+      color: #1c99ff;
+    }
+    .economicTable {
+      width: 100%;
+      height: calc(100% - 46px);
     }
   }
-
   .echarts {
-    margin-top: 20px;
+    margin-top: 10px;
     background-color: rgba(0, 0, 0, 0.45);
     border-radius: 5px;
     width: 100%;
+    height: 300px;
   }
 }
 
@@ -419,35 +458,10 @@ export default {
   float: right;
 }
 
-/deep/ .el-input__prefix {
-  right: -15px;
-  left: unset;
-}
-
-/deep/ .el-input--prefix .el-input__inner {
-  padding-left: 20px;
-}
-
 .el-table::before {
   height: 0;
 }
 
-.compare-lift-down {
-  margin-left: 7px;
-  font-size: 14px;
-  font-family: Arial;
-  font-weight: 400;
-  color: #ff8300;
-}
-
-.compare-lift-up {
-  margin-left: 7px;
-  font-size: 14px;
-  font-family: Arial;
-  font-weight: 400;
-  color: #1c99ff;
-}
-
 .chart-name {
   display: flex;
   align-items: center;