修改风机绩效榜页面样式

src/assets/styles/button.less

@@ -1,27 +1,68 @@
 .btn {
-  height: 33px;
-  line-height: 33px;
-  flex: 0 0 auto;
-  background: transparent;
-  border: 1px solid @darkgray;
-  padding: 0 1.481vh;
-  color: @gray;
-  font-size: @fontsize-s;
-  cursor: pointer;
+  //   height: 33px;
+  //   line-height: 33px;
+  //   flex: 0 0 auto;
+  background-color: transparent !important;
+  border: 1px solid @darkgray !important;
+  //   padding: 0 1.481vh;
+  color: @gray !important;
+  font-size: @fontsize-s !important;
+  //   cursor: pointer;
 
   &:hover {
-    border-color: @green;
-    color: @green;
-    background: fade(@green, 20);
+    border-color: @green !important;
+    color: @green !important;
+    background: fade(@green, 20) !important;
   }
 
   &.green {
-    border-color: @green;
-    color: @green;
-    background: fade(@green, 20);
+    border-color: @green !important;
+    color: @green !important;
+    background: fade(@green, 20) !important;
   }
 
   & + button {
     margin-left: 16px;
   }
 }
+.tabCut1 {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin: 10px 0px 0px 20px;
+
+  .tabCut-item {
+    width: 93px;
+    height: 23px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 10px;
+    background: fade(@green, 50);
+    color: fade(@white, 50);
+    position: relative;
+    font-size: 12px;
+    &.green1 {
+      background: fade(@green, 80);
+      color: fade(@white, 80);
+    }
+
+    &.green1:before {
+      content: "";
+      width: 1px;
+      height: 7px;
+      background-color: #ffffff;
+      position: absolute;
+      left: 0;
+    }
+
+    &.green1:after {
+      content: "";
+      width: 1px;
+      height: 7px;
+      background-color: #ffffff;
+      position: absolute;
+      right: 0;
+    }
+  }
+}

src/assets/styles/form.less

@@ -142,6 +142,112 @@
       transition: opacity 0.3s ease-out;
     }
   }
+
+
+//   新样式
+ .query-form {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-top: 10px;
+    padding-left: 20px;
+    &.left {
+      justify-content: flex-start;
+    }
+    // 带标签查询项
+    .station {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      font-size: 14px;
+      font-family: Microsoft YaHei;
+      font-weight: 400;
+      color: #b3b3b3;
+      margin-right: 10px;
+    }
+    // 日期
+    .dates {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      font-size: 14px;
+      font-family: Microsoft YaHei;
+      font-weight: 400;
+      color: #b3b3b3;
+      margin-right: 10px;
+    }
+
+    .search-input {
+      margin-left: 10px;
+    }
+
+    .el-input__inner {
+      border-radius: 12.5px !important;
+    }
+
+    .query-actions {
+      display: flex;
+      flex-direction: row;
+      align-content: center;
+      margin-left: 10px;
+    }
+  }
+
+  input {
+    box-sizing: border-box;
+    flex: 0 0 200px;
+    border: 0px solid @darkgray;
+    color: @white;
+    outline: unset;
+    padding-right: 40px;
+    background: fade(#536268, 20);
+
+    &::placeholder {
+      font-size: 12px;
+      text-align: right;
+      color: @darkgray;
+    }
+  }
+
+  input[type="checkbox"] {
+    position: relative;
+    display: inline-block;
+    appearance: none;
+    width: 14px;
+    height: 14px;
+    outline: none;
+    border: 1px solid @gray;
+    background-color: #000;
+    border-radius: 20%;
+    margin: 0;
+    padding: 0;
+
+    &:checked {
+      border-color: @green;
+      background: @green;
+    }
+
+    &::after {
+      display: inline-block;
+      content: " ";
+      position: absolute;
+      left: 30%;
+      top: 5%;
+      width: 3px;
+      height: 7px;
+      border-color: #fff;
+      border-style: solid;
+      border-width: 0px 2px 2px 0px;
+      transform: rotate(45deg);
+      opacity: 0;
+    }
+
+    &:checked::after {
+      content: "";
+      opacity: 1;
+      transition: opacity 0.3s ease-out;
+    }
+  }
 }
 
 .search-input {

src/assets/styles/table.less

@@ -2,6 +2,13 @@
 @titleGray: #9ca5a8;
 @rowGray: #606769;
 @darkBack: #536268;
+.el-table td.el-table__cell,
+.el-table th.el-table__cell.is-leaf {
+  border-bottom: 0 !important;
+}
+.el-table th.el-table__cell {
+  border-right: 1px solid rgba(0, 0, 0, 0.8) !important;
+}
 .com-table {
   width: 100%;
   border-collapse: collapse;

src/assets/styles/theme/light/light-jsc.css

@@ -13,6 +13,11 @@
   font-weight: 700;
   transition: 0.25s;
 }
+#appBody.light .green1 {
+  color: rgba(255, 255, 255, 0.8);
+  font-weight: 700;
+  transition: 0.25s;
+}
 #appBody.light .white {
   color: #000;
   transition: 0.25s;
@@ -40,12 +45,20 @@
   color: #000;
   transition: 0.25s;
 }
-#appBody.light .security-days .security .text1 {
+#appBody.light .security-days .num {
+  color: #36348e;
+  transition: 0.25s;
+}
+#appBody.light .security-days .text1 {
   color: #000;
   transition: 0.25s;
 }
-#appBody.light .security-days .num {
-  color: #36348e;
+#appBody.light .save-item .save-value {
+  color: #000;
+  transition: 0.25s;
+}
+#appBody.light .save-item .save-name {
+  color: #5e6269;
   transition: 0.25s;
 }
 #appBody.light .tab-box .tab-item span svg use {
@@ -71,8 +84,13 @@
   background-image: linear-gradient(to top, rgba(57, 54, 143, 0.5), rgba(5, 187, 76, 0));
   transition: 0.25s;
 }
+#appBody.light .map .tab-box .tab-item.active1 {
+  color: #36348e;
+  position: relative;
+  background-image: linear-gradient(to top, rgba(57, 54, 143, 0.5), #ffffff);
+  transition: 0.25s;
+}
 #appBody.light .map .tab-box .tab-item.active::after {
-  /* border: 0.093vh solid #36348e; */
   transition: 0.25s;
 }
 #appBody.light .header-menu .header-menu-list .header-menu-item.active::after {
@@ -116,6 +134,12 @@
   color: #36348e;
   transition: 0.25s;
 }
+#appBody.light .query.mg-b-8 {
+  padding-top: 10px;
+}
+#appBody.light .query.mg-b-16 {
+  padding-top: 10px;
+}
 #appBody.light .svg-map-nx .item-label rect {
   fill: #36348e;
   transition: 0.25s;
@@ -146,10 +170,6 @@
   fill: #36348e;
   transition: 0.25s;
 }
-#appBody.light .svg-map .item-label-hover .isshow rect {
-  fill: #36348e;
-  transition: 0.25s;
-}
 #appBody.light .svg-map .item-label .mapKey {
   fill: #fff;
   transition: 0.25s;
@@ -172,6 +192,41 @@
 #appBody.light .svg-map .esp-c {
   stroke: #36348e;
 }
+#appBody.light .status {
+  background-color: #ffffff;
+  padding: 10px;
+  margin-top: 10px;
+  border-radius: 10px;
+}
+#appBody.light .status .table-box1 {
+  border: 0.093vh solid #ffffff;
+}
+#appBody.light .status .com-table tbody tr:nth-child(2n) {
+  background-color: #ffffff;
+}
+#appBody.light .monitorOverview .stationName {
+  color: #000000;
+}
+#appBody.light .monitorOverview .station-info .item-title {
+  color: #000000;
+}
+#appBody.light .monitorOverview .station-info .item-name {
+  color: #000000;
+}
+#appBody.light .monitorOverview .station-info .item-unit {
+  color: #000000;
+}
+#appBody.light .monitorOverview .model .energy-title {
+  color: #000000;
+  background-color: rgba(83, 98, 104, 0.4);
+}
+#appBody.light .monitorOverview .model1 .energy-title {
+  color: #000000;
+  background-color: rgba(83, 98, 104, 0.4);
+}
+#appBody.light .monitorOverview .energy-content .num {
+  color: #000000;
+}
 #appBody.light .com-panel-3,
 #appBody.light .com-panel,
 #appBody.light .header-body {
@@ -343,10 +398,10 @@
   border: 1px solid #ffffff;
 }
 #appBody.light .zbtjfx .zbtjfx-body .zbtjfx-up .zbtjfx-up-panel .zbtjfx-up-panel-l {
-  border-right: 1px dashed #36348E;
+  border-right: 1px dashed #36348e;
 }
 #appBody.light .zbtjfx .zbtjfx-body .zbtjfx-up .zbtjfx-up-panel .zbtjfx-up-panel-r-t {
-  color: #36348E;
+  color: #36348e;
 }
 #appBody.light .zbtjfx .zbtjfx-body .zbtjfx-up .zbtjfx-up-panel .zbtjfx-up-panel-r-b {
   color: #000000;

src/components/chart/combination/bar-line-chart.vue

@@ -77,7 +77,14 @@ export default {
     // 颜色
     color: {
       type: Array,
-      default: () => ["#323E6F", "#e17e23", "#ba3237", "#c531c7", "#ffffff", "#EDEB2F"],
+      default: () => [
+        "#323E6F",
+        "#e17e23",
+        "#ba3237",
+        "#c531c7",
+        "#ffffff",
+        "#EDEB2F",
+      ],
     },
     // 每页显示个数
     pageSize: {
@@ -112,33 +119,38 @@ export default {
         grid: {
           left: 40,
           right: 16,
-          bottom: 16,
-          top: 16,
+          bottom: 35,
+          top: 30,
           containLabel: true,
         },
         legend: {
           show: this.showLegend,
           data: this.bardata.legend,
+          top: 5,
           right: 56,
           icon: "ract",
           itemWidth: 8,
           itemHeight: 8,
-          inactiveColor: this.$store.state.themeName === "dark"
+          inactiveColor:
+            this.$store.state.themeName === "dark"
               ? partten.getColor("gray")
               : "#000",
           textStyle: {
-            color: this.$store.state.themeName === "dark"
-              ? partten.getColor("grayl")
-              : "#000",
+            color:
+              this.$store.state.themeName === "dark"
+                ? partten.getColor("grayl")
+                : "#000",
             fontSize: 12,
           },
         },
         tooltip: {
           trigger: "axis",
-          backgroundColor: this.$store.state.themeName === "dark"
+          backgroundColor:
+            this.$store.state.themeName === "dark"
               ? "rgba(0,0,0,0.4)"
               : "rgba(255,255,255,0.5)",
-          borderColor: this.$store.state.themeName === "dark"
+          borderColor:
+            this.$store.state.themeName === "dark"
               ? partten.getColor("gray")
               : "#000",
           textStyle: {
@@ -146,61 +158,62 @@ export default {
             fontSize: util.vh(16),
           },
         },
-        dataZoom: [
-          {
-            type: "inside",
-            start: 0,
-            end: this.end,
-            yAxisIndex: [0],
-          },
-          {
-            start: 0,
-            end: this.end,
-            bottom: 40,
-            yAxisIndex: [0],
-            backgroundColor: "transparent",
-            // handleIcon: "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
-            handleStyle: {
-              color: this.$store.state.themeName === "dark"
-              ? partten.getColor("green")
-              : partten.getColor("blue"),
-            },
-            moveHandleSize: 0,
-            // dataBackground: {
-            //   lineStyle: {
-            //     color: partten.getColor("gray"),
-            //   },
-            //   areaStyle: {
-            //     color: partten.getColor("gray"),
-            //   },
-            // },
-            // selectedDataBackground: {
-            //   lineStyle: {
-            //     color: partten.getColor("yellow"),
-            //   },
-            //   areaStyle: {
-            //     color: partten.getColor("yellow"),
-            //   },
-            // },
-            fillerColor: "transparent",
-            textStyle: {
-              color: this.$store.state.themeName === "dark"
-              ? partten.getColor("grayl")
-              : "#000",
-            },
-            borderColor: this.$store.state.themeName === "dark"
-              ? partten.getColor("gray")
-              : "#000",
-            brushSelect: false,
-          },
-        ],
+        // dataZoom: [
+        //   {
+        //     type: "inside",
+        //     start: 0,
+        //     end: this.end,
+        //     yAxisIndex: [0],
+        //   },
+        //   {
+        //     start: 0,
+        //     end: this.end,
+        //     bottom: 40,
+        //     yAxisIndex: [0],
+        //     backgroundColor: "transparent",
+        //     // handleIcon: "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
+        //     handleStyle: {
+        //       color: this.$store.state.themeName === "dark"
+        //       ? partten.getColor("green")
+        //       : partten.getColor("blue"),
+        //     },
+        //     moveHandleSize: 0,
+        //     // dataBackground: {
+        //     //   lineStyle: {
+        //     //     color: partten.getColor("gray"),
+        //     //   },
+        //     //   areaStyle: {
+        //     //     color: partten.getColor("gray"),
+        //     //   },
+        //     // },
+        //     // selectedDataBackground: {
+        //     //   lineStyle: {
+        //     //     color: partten.getColor("yellow"),
+        //     //   },
+        //     //   areaStyle: {
+        //     //     color: partten.getColor("yellow"),
+        //     //   },
+        //     // },
+        //     fillerColor: "transparent",
+        //     textStyle: {
+        //       color: this.$store.state.themeName === "dark"
+        //       ? partten.getColor("grayl")
+        //       : "#000",
+        //     },
+        //     borderColor: this.$store.state.themeName === "dark"
+        //       ? partten.getColor("gray")
+        //       : "#000",
+        //     brushSelect: false,
+        //   },
+        // ],
         yAxis: [
           {
             type: "category",
             axisLabel: {
-              color: this.$store.state.themeName === "dark"
-              ? partten.getColor("gray")
-              : "#000",
+              color:
+                this.$store.state.themeName === "dark"
+                  ? partten.getColor("gray")
+                  : "#000",
             },
             inverse: true,
             // minInterval: 10,
@@ -218,18 +231,21 @@ export default {
           {
             type: "value",
             axisLabel: {
-              color: this.$store.state.themeName === "dark"
-              ? partten.getColor("gray")
-              : "#000",
+              color:
+                this.$store.state.themeName === "dark"
+                  ? partten.getColor("gray")
+                  : "#000",
             },
             axisLine: {
+              show: false,
               type: "dashed",
               lineStyle: {
-                color: this.$store.state.themeName === "dark"
-              ? partten.getColor("gray")
-              : "#000",
+                color:
+                  this.$store.state.themeName === "dark"
+                    ? partten.getColor("gray")
+                    : "#000",
               },
-              width: 5,
+              width: 15,
             },
             axisTick: {
               show: false,
@@ -237,8 +253,11 @@ export default {
             splitLine: {
               lineStyle: {
                 type: "dashed",
-                dashOffset: 10,
-                color: this.$store.state.themeName === "dark" ? "#5a6162" : "#000" + 80,
+                dashOffset: 100,
+                color:
+                  this.$store.state.themeName === "dark"
+                    ? "#5a6162"
+                    : "#000" + 80,
               },
             },
           },
@@ -271,7 +290,7 @@ export default {
             name: this.bardata.legend[i],
             type: "bar",
             stack: "总量",
-            barWidth: 16,
+            barWidth: 10,
             label: {
               show: false,
               position: "insideRight",
@@ -279,7 +298,6 @@ export default {
             data: this.bardata.data[i],
           });
         }
-
       // line data
       if (this.lineData.length > 0) {
         option.series.push({
@@ -289,14 +307,16 @@ export default {
           smooth: false, //平滑展示
           xAxisIndex: 1,
           lineStyle: {
-            color: this.$store.state.themeName === "dark"
-              ? partten.getColor("green")
-              : partten.getColor("blue"),
+            color:
+              this.$store.state.themeName === "dark"
+                ? partten.getColor("green")
+                : partten.getColor("blue"),
           },
           itemStyle: {
-            color: this.$store.state.themeName === "dark"
-              ? partten.getColor("green")
-              : partten.getColor("blue"),
+            color:
+              this.$store.state.themeName === "dark"
+                ? partten.getColor("green")
+                : partten.getColor("blue"),
           },
         });
       }
@@ -324,12 +344,12 @@ export default {
       this.initChart();
     });
   },
-  beforeUpdate(){
-	  this.areaData = this.bardata.area;
-  },
-  beforeUpdate(){
-  	  this.areaData = this.bardata.area;
+  beforeUpdate() {
+    this.areaData = this.bardata.area;
   },
+  //   beforeUpdate() {
+  //     this.areaData = this.bardata.area;
+  //   },
   watch: {
     bardata(val) {
       if (val.area && val.area.length < this.pageSize) {
@@ -339,9 +359,9 @@ export default {
         }
       }
     },
-	"$store.state.themeName"() {
-	  this.initChart();
-	},
+    "$store.state.themeName"() {
+      this.initChart();
+    },
   },
 };
 </script>

src/views/Decision/Decision1.vue

@@ -1,131 +1,223 @@
 <template>
   <div class="decision-page-1">
-    <div class="query mg-b-8">
-      <div class="query-items">
-        <div class="query-item">
-          <div class="lable">场站：</div>
-          <div class="search-input">
-            <el-select
-              v-model="value1"
-              @change="ChangZhanChange(value1)"
-              clearable
-              placeholder="请选择"
-              popper-class="select"
-            >
-              <el-option
-                v-for="item in ChangZhan"
-                :key="item.id"
-                :value="item.id"
-                :label="item.name"
-              >
-              </el-option>
-            </el-select>
-          </div>
-        </div>
-        <div class="query-item">
-          <div class="lable">项目：</div>
-          <div class="search-input">
-            <el-select
-              v-model="value2"
-              @change="XiangMuChange(value2)"
-              multiple
-              collapse-tags
-              placeholder="请选择"
-              popper-class="select"
-            >
-              <el-option
-                v-for="item in XiangMu"
-                :key="item.id"
-                :value="item.id"
-                :label="item.name"
-              >
-              </el-option>
-            </el-select>
-          </div>
-        </div>
-        <div class="query-item">
-          <div class="lable">线路：</div>
-          <div class="search-input">
-            <el-select
-              v-model="value3"
-              @change="XianLuChange(value3)"
-              multiple
-              collapse-tags
-              placeholder="请选择"
-              popper-class="select"
-            >
-              <el-option
-                v-for="item in XianLu"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id"
-              >
-              </el-option>
-            </el-select>
-          </div>
-        </div>
-        <div class="query-item">
-          <div class="lable">开始日期：</div>
-          <div class="search-input">
-            <el-date-picker
-              v-model="value4"
-              @change="BeginChange(value4)"
-              type="date"
-              value-format="YYYY-MM-DD"
-              placeholder="选择日期"
-              popper-class="date-select"
-            >
-            </el-date-picker>
-          </div>
+    <div class="query-form">
+      <!-- mg-b-8-->
+      <div class="station">
+        场站：
+        <el-select
+          size="mini"
+          v-model="value1"
+          @change="ChangZhanChange(value1)"
+          clearable
+          placeholder="请选择"
+          popper-class="select"
+        >
+          <el-option
+            v-for="item in ChangZhan"
+            :key="item.id"
+            :value="item.id"
+            :label="item.name"
+          >
+          </el-option>
+        </el-select>
+      </div>
+      <div class="station">
+        项目：
+        <el-select
+          size="mini"
+          v-model="value2"
+          @change="XiangMuChange(value2)"
+          multiple
+          collapse-tags
+          placeholder="请选择"
+          popper-class="select"
+        >
+          <el-option
+            v-for="item in XiangMu"
+            :key="item.id"
+            :value="item.id"
+            :label="item.name"
+          >
+          </el-option>
+        </el-select>
+      </div>
+      <div class="station">
+        线路：
+        <el-select
+          size="mini"
+          v-model="value3"
+          @change="XianLuChange(value3)"
+          multiple
+          collapse-tags
+          placeholder="请选择"
+          popper-class="select"
+        >
+          <el-option
+            v-for="item in XianLu"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          >
+          </el-option>
+        </el-select>
+      </div>
+      <div class="dates">
+        开始日期：
+        <div class="search-input">
+          <el-date-picker
+            size="mini"
+            v-model="value4"
+            @change="BeginChange(value4)"
+            type="date"
+            value-format="YYYY-MM-DD"
+            placeholder="选择日期"
+            popper-class="date-select"
+          >
+          </el-date-picker>
         </div>
-        <div class="query-item">
-          <div class="lable">结束日期：</div>
-          <div class="search-input">
-            <el-date-picker
-              v-model="value5"
-              @change="EndChange(value5)"
-              type="date"
-              value-format="YYYY-MM-DD"
-              placeholder="选择日期"
-              popper-class="date-select"
-            >
-            </el-date-picker>
-            <div class="unit svg-icon svg-icon-gray">
-              <svg-icon :svgid="''" />
-            </div>
-          </div>
+      </div>
+      <div class="dates">
+        结束日期：
+        <div class="search-input">
+          <el-date-picker
+            size="mini"
+            v-model="value5"
+            @change="EndChange(value5)"
+            type="date"
+            value-format="YYYY-MM-DD"
+            placeholder="选择日期"
+            popper-class="date-select"
+          >
+          </el-date-picker>
+          <!-- <div class="unit svg-icon svg-icon-gray">
+            <svg-icon :svgid="''" />
+          </div> -->
         </div>
       </div>
-      <div class="query-actions" style="margin-left: 0px">
-        <button class="btn green" @click="AjaxCommon()">搜索</button>
-        <button class="btn" @click="mxClick()">明细信息</button>
-        <button class="btn" @click="exportExcel()">导出</button>
+      <div class="query-actions">
+        <el-button round size="mini" class="btn green" @click="AjaxCommon()"
+          >搜索</el-button
+        >
+        <el-button round size="mini" class="btn" @click="mxClick()"
+          >明细信息</el-button
+        >
+        <el-button round size="mini" class="btn" @click="exportExcel()"
+          >导出</el-button
+        >
       </div>
     </div>
-    <div class="actions mg-b-8">
-      <button
+    <!-- <div class="actions">
+      <el-button
         class="btn"
         :class="TypeClass == 1 ? 'green' : ''"
         @click="TypeClick(1)"
       >
         风场
-      </button>
-      <button
+      </el-button>
+      <el-button
         class="btn"
         :class="TypeClass == 2 ? 'green' : ''"
         @click="TypeClick(2)"
       >
         项目
-      </button>
-      <button
+      </el-button>
+      <el-button
         class="btn"
         :class="TypeClass == 3 ? 'green' : ''"
         @click="TypeClick(3)"
       >
         集电线路
-      </button>
+      </el-button>
+    </div> -->
+    <div class="tabCut1">
+      <div
+        class="tabCut-item"
+        @click="TypeClick(val.id)"
+        :class="TypeClass === val.id ? 'green1' : ''"
+        v-for="val in typeOptions"
+        :key="val.id"
+      >
+        <span>{{ val.name }}</span>
+      </div>
     </div>
-    <el-row :type="'flex'" class="content">
+    <!-- <div class="performance-title">
+      <div class="left-title">风机绩效榜</div>
+      <div class="right-title">项目列表</div>
+    </div> -->
+    <div class="performance" style="height: 90vh">
+      <div class="economicTable" style="height: 86vh">
+        <el-table
+          :data="tableData.data"
+          size="mini"
+          :cell-style="{ padding: '6px' }"
+          :row-style="{ height: '0px' }"
+          cell-class-name="table_cell"
+          stripe
+          @header-click="onHeaderClick"
+        >
+          <el-table-column align="center" prop="" label="" width="900">
+          </el-table-column>
+          <el-table-column align="center" type="index"> </el-table-column>
+          <el-table-column
+            align="center"
+            prop="name"
+            show-overflow-tooltip
+            label="名称"
+          >
+          </el-table-column>
+          <el-table-column align="center" prop="llfdl" label="理论发电量">
+          </el-table-column>
+          <el-table-column align="center" prop="sjfdl" label="实际发电量">
+          </el-table-column>
+          <el-table-column
+            align="center"
+            prop="fnlly"
+            label="风能利用率%"
+            width="120"
+          >
+          </el-table-column>
+          <el-table-column
+            show-overflow-tooltip
+            align="center"
+            prop="speed"
+            label="风速"
+          >
+          </el-table-column>
+          <el-table-column align="center" prop="fjhjx" label="故障">
+          </el-table-column>
+          <el-table-column align="center" prop="jhjx" label="检修">
+          </el-table-column>
+          <el-table-column align="center" prop="sl" label="受累">
+          </el-table-column>
+          <el-table-column align="center" prop="xd" label="限电">
+          </el-table-column>
+          <el-table-column align="center" prop="xn" label="性能">
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="left">
+        <bar-line-chart
+          v-if="showDisplay"
+          :height="height"
+          :bardata="bardata"
+          :lineData="lineData"
+          :color="barColor"
+          lineName="理论发电量"
+        />
+        <div class="lyl" :style="{ height: tableData.data.length * 35 + 'px' }">
+          <div
+            class="lyl-item"
+            v-for="(item, index) in tableData.data"
+            :key="index"
+          >
+            {{ item.fnlly }}%
+            <img class="lyl-item-img" src="@assets/images/fnlyl.png" />
+          </div>
+        </div>
+        <div class="dashed" :style="{ height: height }"></div>
+      </div>
+    </div>
+    <!-- <el-row :type="'flex'" class="content">
       <el-col :span="12" class="pd-r-8">
         <toolbar-panel title="风机绩效榜 (万kWh)" :showLine="false">
           <bar-line-chart
@@ -140,7 +232,6 @@
       <el-col :span="12" class="pd-l-8">
         <panel :title="'项目列表'" :showLine="false">
           <div class="project-table">
-            <!-- 分页Table -->
             <Table :data="tableData" :height="'calc(80vh - 50px)'">
               <template v-slot:tr v-if="tableData.data.length > 0">
                 <tr>
@@ -180,11 +271,10 @@
                 </tr>
               </template>
             </Table>
-            <!-- <Table :data="tableData"></Table> -->
           </div>
         </panel>
       </el-col>
-    </el-row>
+    </el-row> -->
   </div>
 </template>
 
@@ -307,9 +397,61 @@ export default {
         "#ccf0d3",
         "#4b55ae",
       ],
-      TypeClass: 1, //风场，项目，集电线路 的按钮颜色，默认第一个
+      actionClass: "1",
+      TypeClass: "1", //风场，项目，集电线路 的按钮颜色，默认第一个
+      typeOptions: [
+        { id: "1", name: "风场" },
+        { id: "2", name: "项目" },
+        { id: "3", name: "集电线路" },
+      ],
       bardata: [],
       lineData: [],
+      showDisplay: true,
+      height: "880px",
+      sort: "",
+      target: "",
+      sortList: [
+        {
+          id: "name",
+          sort: false,
+        },
+        {
+          id: "llfdl",
+          sort: false,
+        },
+        {
+          id: "sjfdl",
+          sort: false,
+        },
+        {
+          id: "speed",
+          sort: false,
+        },
+        {
+          id: "fjhjx",
+          sort: false,
+        },
+        {
+          id: "jhjx",
+          sort: false,
+        },
+        {
+          id: "sl",
+          sort: false,
+        },
+        {
+          id: "xd",
+          sort: false,
+        },
+        {
+          id: "xn",
+          sort: false,
+        },
+        {
+          id: "fnlly",
+          sort: false,
+        },
+      ],
     };
   },
   created() {
@@ -432,7 +574,21 @@ export default {
         return end;
       }
     },
+    onHeaderClick(column) {
+      console.log(column);
+      this.target = column.property;
+      this.sortList.forEach((item) => {
+        if (item.id === column.property) {
+          item.sort = !item.sort;
+          this.sort = item.sort ? 1 : 2;
+        } else {
+          item.sort = false;
+        }
+      });
+      this.AjaxCommon();
+    },
     AjaxCommon() {
+      this.actionClass = 1;
       api
         .benchmarking({
           wpids: this.value1,
@@ -441,8 +597,8 @@ export default {
           beginDate: this.value4,
           endDate: this.value5,
           type: this.TypeClass,
-          target: "",
-          sort: "",
+          target: this.target,
+          sort: this.sort,
         })
         .then((res) => {
           if (res) {
@@ -504,6 +660,25 @@ export default {
                 data: arr1,
               };
             }
+
+            // if (this.lineData.length > 22) {
+            //   this.height = this.lineData.length * 35 + 148 + "px";
+            // } else if (this.lineData.length == 14) {
+            //   this.height = 23 * 35 + 36 + "px";
+            // } else {
+            //   this.height = 23 * 35 + "px";
+            // }
+            if (this.lineData.length > 22) {
+              this.height = this.lineData.length * 35 + 85 + "px";
+            } else if (this.lineData.length == 14) {
+              this.height = 22 * 35 + 46 + "px";
+            } else {
+              this.height = 21 * 35 + 46 + "px";
+            }
+            this.showDisplay = false;
+            setTimeout(() => {
+              this.showDisplay = true;
+            }, 10);
             this.tableDataEnd = data2[data2.length - 1];
             data2.pop();
             this.tableData.data = data2;
@@ -618,8 +793,136 @@ export default {
 };
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 .decision-page-1 {
+  height: 93vh;
+  display: flex;
+  flex-direction: column;
+  .performance-title {
+    display: flex;
+    height: 41px;
+    align-items: center;
+
+    .left-title,
+    .right-title {
+      width: 46.8%;
+      padding-left: 30px;
+    }
+  }
+  .performance {
+    // display: flex;
+    // flex-direction: row;
+    width: 99.5%;
+    background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 5px;
+    overflow-y: auto;
+    position: relative;
+
+    .economicTable {
+      .el-table td.el-table__cell,
+      .el-table th.el-table__cell.is-leaf {
+        border-bottom: 0;
+      }
+    }
+    .left {
+      width: 45%;
+      height: 100%;
+      position: absolute;
+      left: 0;
+      top: 0;
+      display: flex;
+      flex-direction: row;
+      .dashed {
+        position: absolute;
+        width: 1px;
+        background-image: linear-gradient(
+          #3a4043 0%,
+          #3a4043 40%,
+          transparent 50%
+        );
+        background-size: 1px 9px;
+        margin-top: 45px;
+        height: 100%;
+        right: -50px;
+      }
+    }
+    .lyl {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: 70px;
+      font-size: 14px;
+      font-family: Arial;
+      font-weight: 400;
+      color: #1c98fe;
+      margin-top: 27px;
+      margin-left: 10px;
+    }
+    .lyl-item {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 36px;
+      position: relative;
+      width: 120px;
+    }
+    .lyl-item-img {
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      // height: 33px;
+    }
+
+    // .center {
+    //   width: 3%;
+    //   height: 90%;
+    //   position: relative;
+    //   margin-top: 50px;
+
+    //   .using {
+    //     width: 100%;
+    //     height: 100%;
+    //     z-index: 99;
+    //     position: absolute;
+    //     right: 0px;
+    //     top: 0px;
+    //   }
+    // }
+
+    .dashed {
+      width: 1px;
+      background-image: linear-gradient(
+        #3a4043 0%,
+        #3a4043 40%,
+        transparent 50%
+      );
+      background-size: 1px 9px;
+      margin-top: 45px;
+    }
+
+    .dashed1 {
+      width: 1px;
+      background-image: linear-gradient(
+        #3a4043 0%,
+        #3a4043 40%,
+        transparent 50%
+      );
+      background-size: 1px 9px;
+      margin-top: 45px;
+      margin-left: 20px;
+    }
+
+    .table {
+      width: 48%;
+      // background-color: yellowgreen;
+    }
+  }
+
+
+  .table_cell .cell {
+    white-space: nowrap;
+  }
+
   .com-panel .panel-title {
     line-height: 3.4259vh;
   }

src/views/Decision/Decision1Mx.vue

@@ -1,131 +1,219 @@
 <template>
   <div class="decision-page-1">
-    <div class="query mg-b-8">
-      <div class="query-items">
-        <div class="query-item">
-          <div class="lable">场站：</div>
-          <div class="search-input">
-            <el-select
-              v-model="value1"
-              @change="ChangZhanChange(value1)"
-              clearable
-              placeholder="请选择"
-              popper-class="select"
-            >
-              <el-option
-                v-for="item in ChangZhan"
-                :key="item.id"
-                :value="item.id"
-                :label="item.name"
-              >
-              </el-option>
-            </el-select>
-          </div>
-        </div>
-        <div class="query-item">
-          <div class="lable">项目：</div>
-          <div class="search-input">
-            <el-select
-              v-model="value2"
-              @change="XiangMuChange(value2)"
-              multiple
-              collapse-tags
-              placeholder="请选择"
-              popper-class="select"
-            >
-              <el-option
-                v-for="item in XiangMu"
-                :key="item.id"
-                :value="item.id"
-                :label="item.name"
-              >
-              </el-option>
-            </el-select>
-          </div>
-        </div>
-        <div class="query-item">
-          <div class="lable">线路：</div>
-          <div class="search-input">
-            <el-select
-              v-model="value3"
-              @change="XianLuChange(value3)"
-              multiple
-              collapse-tags
-              placeholder="请选择"
-              popper-class="select"
-            >
-              <el-option
-                v-for="item in XianLu"
-                :key="item.id"
-                :label="item.name"
-                :value="item.id"
-              >
-              </el-option>
-            </el-select>
-          </div>
-        </div>
-        <div class="query-item">
-          <div class="lable">开始日期：</div>
-          <div class="search-input">
-            <el-date-picker
-              v-model="value4"
-              @change="BeginChange(value4)"
-              type="date"
-              value-format="YYYY-MM-DD"
-              placeholder="选择日期"
-              popper-class="date-select"
-            >
-            </el-date-picker>
-          </div>
+    <div class="query-form">
+      <!-- mg-b-8-->
+      <div class="station">
+        场站：
+        <el-select
+          size="mini"
+          v-model="value1"
+          @change="ChangZhanChange(value1)"
+          clearable
+          placeholder="请选择"
+          popper-class="select"
+        >
+          <el-option
+            v-for="item in ChangZhan"
+            :key="item.id"
+            :value="item.id"
+            :label="item.name"
+          >
+          </el-option>
+        </el-select>
+      </div>
+      <div class="station">
+        项目：
+        <el-select
+          size="mini"
+          v-model="value2"
+          @change="XiangMuChange(value2)"
+          multiple
+          collapse-tags
+          placeholder="请选择"
+          popper-class="select"
+        >
+          <el-option
+            v-for="item in XiangMu"
+            :key="item.id"
+            :value="item.id"
+            :label="item.name"
+          >
+          </el-option>
+        </el-select>
+      </div>
+      <div class="station">
+        线路：
+        <el-select
+          size="mini"
+          v-model="value3"
+          @change="XianLuChange(value3)"
+          multiple
+          collapse-tags
+          placeholder="请选择"
+          popper-class="select"
+        >
+          <el-option
+            v-for="item in XianLu"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          >
+          </el-option>
+        </el-select>
+      </div>
+      <div class="dates">
+        开始日期：
+        <div class="search-input">
+          <el-date-picker
+            size="mini"
+            v-model="value4"
+            @change="BeginChange(value4)"
+            type="date"
+            value-format="YYYY-MM-DD"
+            placeholder="选择日期"
+            popper-class="date-select"
+          >
+          </el-date-picker>
         </div>
-        <div class="query-item">
-          <div class="lable">结束日期：</div>
-          <div class="search-input">
-            <el-date-picker
-              v-model="value5"
-              @change="EndChange(value5)"
-              type="date"
-              value-format="YYYY-MM-DD"
-              placeholder="选择日期"
-              popper-class="date-select"
-            >
-            </el-date-picker>
-            <div class="unit svg-icon svg-icon-gray">
-              <svg-icon :svgid="''" />
-            </div>
-          </div>
+      </div>
+      <div class="dates">
+        结束日期：
+        <div class="search-input">
+          <el-date-picker
+            size="mini"
+            v-model="value5"
+            @change="EndChange(value5)"
+            type="date"
+            value-format="YYYY-MM-DD"
+            placeholder="选择日期"
+            popper-class="date-select"
+          >
+          </el-date-picker>
+          <!-- <div class="unit svg-icon svg-icon-gray">
+            <svg-icon :svgid="''" />
+          </div> -->
         </div>
       </div>
       <div class="query-actions">
-        <button class="btn" @click="mxClick()">搜索</button>
-        <button class="btn green">明细信息</button>
-        <button class="btn" @click="exportExcel()">导出</button>
+        <el-button round size="mini" class="btn" @click="mxClick"
+          >搜索</el-button
+        >
+        <el-button round size="mini" class="btn green" @click="AjaxCommon"
+          >明细信息</el-button
+        >
+        <el-button round size="mini" class="btn" @click="exportExcel"
+          >导出</el-button
+        >
       </div>
     </div>
-    <div class="actions mg-b-8">
-      <button
-        class="btn"
-        :class="TypeClass == 1 ? 'green' : ''"
-        @click="TypeClick(1)"
-      >
-        风场
-      </button>
-      <button
-        class="btn"
-        :class="TypeClass == 2 ? 'green' : ''"
-        @click="TypeClick(2)"
-      >
-        项目
-      </button>
-      <button
-        class="btn"
-        :class="TypeClass == 3 ? 'green' : ''"
-        @click="TypeClick(3)"
+    <div class="tabCut1">
+      <div
+        class="tabCut-item"
+        @click="TypeClick(val.id)"
+        :class="TypeClass === val.id ? 'green1' : ''"
+        v-for="val in typeOptions"
+        :key="val.id"
       >
-        集电线路
-      </button>
+        <span>{{ val.name }}</span>
+      </div>
     </div>
-    <div class="contentMx">
+    <!-- <div class="performance-title">
+      <div class="left-title">风机绩效榜</div>
+      <div class="right-title">项目列表</div>
+    </div> -->
+    <div class="performance" style="height: 90vh">
+      <div class="economicTable" style="height: 86vh">
+        <el-table
+          :data="tableData.data"
+          size="mini"
+          :cell-style="{ padding: '6px' }"
+          :row-style="{ height: '0px' }"
+          cell-class-name="table_cell"
+          stripe
+          @header-click="onHeaderClick"
+        >
+          <el-table-column prop="" label="" width="1050"> </el-table-column>
+          <el-table-column align="center" prop="" label="" type="index">
+          </el-table-column>
+          <el-table-column align="center" prop="name" label="名称" width="180">
+          </el-table-column>
+          <el-table-column
+            align="center"
+            prop="llfdl"
+            label="理论发电量"
+            width="100"
+          >
+          </el-table-column>
+          <el-table-column
+            align="center"
+            prop="sjfdl"
+            label="实际发电量"
+            width="100"
+          >
+          </el-table-column>
+          <el-table-column
+            align="center"
+            prop="fnlly"
+            label="风能利用率%"
+            width="140"
+          >
+          </el-table-column>
+          <el-table-column
+            align="center"
+            prop="speed"
+            show-overflow-tooltip
+            label="风速"
+          >
+          </el-table-column>
+          <el-table-column align="center" prop="fjhjx1" label="故障损失">
+          </el-table-column>
+          <el-table-column align="center" prop="fjhjx2" label="故障受累">
+          </el-table-column>
+          <el-table-column align="center" prop="jhjx1" label="检修损失">
+          </el-table-column>
+          <el-table-column align="center" prop="jhjx2" label="检修受累">
+          </el-table-column>
+          <el-table-column align="center" prop="sl1" label="电网受累">
+          </el-table-column>
+          <el-table-column align="center" prop="sl2" label="天气受累">
+          </el-table-column>
+          <el-table-column align="center" prop="xd1" label="限电降出">
+          </el-table-column>
+          <el-table-column align="center" prop="xd2" label="限电停机">
+          </el-table-column>
+          <el-table-column align="center" prop="xn1" label="待风损失">
+          </el-table-column>
+          <el-table-column align="center" prop="xn2" label="手动停机">
+          </el-table-column>
+          <el-table-column align="center" prop="xn3" label="正常发电">
+          </el-table-column>
+          <el-table-column align="center" prop="xn4" label="缺陷降出">
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="left">
+        <bar-line-chart
+          v-if="showDisplay"
+          :height="height"
+          :bardata="bardata"
+          :lineData="lineData"
+          :color="barColor"
+          lineName="理论发电量"
+        />
+        <div class="lyl" :style="{ height: tableData.data.length * 35 + 'px' }">
+          <div
+            class="lyl-item"
+            v-for="(item, index) in tableData.data"
+            :key="index"
+          >
+            {{ item.fnlly }}%
+            <img class="lyl-item-img" src="@assets/images/fnlyl.png" />
+          </div>
+        </div>
+        <div class="dashed" :style="{ height: height }"></div>
+      </div>
+    </div>
+    <!-- <div class="contentMx">
       <div class="activeMx">
         <el-row :type="'flex'" class="content">
           <el-col :span="10" class="pd-r-8">
@@ -207,7 +295,7 @@
           </el-col>
         </el-row>
       </div>
-    </div>
+    </div> -->
   </div>
 </template>
 
@@ -384,9 +472,88 @@ export default {
         partten.getColor("brown"),
         partten.getColor("mauve"),
       ],
-      TypeClass: 1, //风场，项目，集电线路 的按钮颜色，默认第一个
+      TypeClass: "1", //风场，项目，集电线路 的按钮颜色，默认第一个
+      typeOptions: [
+        { id: "1", name: "风场" },
+        { id: "2", name: "项目" },
+        { id: "3", name: "集电线路" },
+      ],
       bardata: [],
       lineData: [],
+      showDisplay: true,
+      height: "858px",
+      sort: "",
+      target: "",
+      sortList: [
+        {
+          id: "name",
+          sort: false,
+        },
+        {
+          id: "llfdl",
+          sort: false,
+        },
+        {
+          id: "sjfdl",
+          sort: false,
+        },
+        {
+          id: "speed",
+          sort: false,
+        },
+        {
+          id: "fjhjx1",
+          sort: false,
+        },
+        {
+          id: "fjhjx2",
+          sort: false,
+        },
+        {
+          id: "jhjx1",
+          sort: false,
+        },
+        {
+          id: "jhjx2",
+          sort: false,
+        },
+        {
+          id: "sl1",
+          sort: false,
+        },
+        {
+          id: "sl2",
+          sort: false,
+        },
+        {
+          id: "xd1",
+          sort: false,
+        },
+        {
+          id: "xd2",
+          sort: false,
+        },
+        {
+          id: "xn1",
+          sort: false,
+        },
+        {
+          id: "xn2",
+          sort: false,
+        },
+        {
+          id: "xn3",
+          sort: false,
+        },
+        {
+          id: "xn4",
+          sort: false,
+        },
+        {
+          id: "fnlly",
+          sort: false,
+        },
+      ],
     };
   },
   created() {
@@ -410,11 +577,13 @@ export default {
       this.XiangMuVal(val);
     },
     XiangMuVal(val) {
-      api.benchmarkingProjectList({
-        wpids: val,
-      }).then((res) => {
-        this.XiangMu = res.data;
-      });
+      api
+        .benchmarkingProjectList({
+          wpids: val,
+        })
+        .then((res) => {
+          this.XiangMu = res.data;
+        });
     },
     XiangMuChange(val) {
       this.TypeClass = "";
@@ -424,11 +593,13 @@ export default {
       this.XianLuVal(val);
     },
     XianLuVal(val) {
-      api.benchmarkingLineList({
-        projects: val,
-      }).then((res) => {
-        this.XianLu = res.data
-      });
+      api
+        .benchmarkingLineList({
+          projects: val,
+        })
+        .then((res) => {
+          this.XianLu = res.data;
+        });
     },
     XianLuChange(val) {
       this.TypeClass = "";
@@ -676,6 +847,19 @@ export default {
         return end;
       }
     },
+    onHeaderClick(column) {
+      console.log(column);
+      this.target = column.property;
+      this.sortList.forEach((item) => {
+        if (item.id === column.property) {
+          item.sort = !item.sort;
+          this.sort = item.sort ? 1 : 2;
+        } else {
+          item.sort = false;
+        }
+      });
+      this.AjaxCommon();
+    },
     AjaxCommon() {
       api
         .benchmarkingmx({
@@ -685,8 +869,8 @@ export default {
           beginDate: this.value4,
           endDate: this.value5,
           type: this.TypeClass,
-          target: "",
-          sort: "",
+          target: this.target,
+          sort: this.sort,
         })
         .then((res) => {
           var name = [],
@@ -767,6 +951,24 @@ export default {
               data: arr1,
             };
           }
+          //   if (this.lineData.length > 22) {
+          //     this.height = this.lineData.length * 35 + 148 + "px";
+          //   } else if (this.lineData.length == 14) {
+          //     this.height = 23 * 35 + 36 + "px";
+          //   } else {
+          //     this.height = 23 * 35 + "px";
+          //   }
+          if (this.lineData.length > 22) {
+            this.height = this.lineData.length * 35 + 85 + "px";
+          } else if (this.lineData.length == 14) {
+            this.height = 22 * 35 + 46 + "px";
+          } else {
+            this.height = 21 * 35 + 46 + "px";
+          }
+          this.showDisplay = false;
+          setTimeout(() => {
+            this.showDisplay = true;
+          }, 10);
           this.tableDataEnd = data2[data2.length - 1];
           data2.pop();
           this.tableData.data = data2;
@@ -902,7 +1104,117 @@ export default {
 };
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
+.decision-page-1 {
+  height: 93vh;
+  display: flex;
+  flex-direction: column;
+  // 新样式
+  .performance-title {
+    display: flex;
+    height: 41px;
+    justify-content: space-between;
+    align-items: center;
+    .left-title,
+    .right-title {
+      width: 45.8%;
+
+      padding-left: 30px;
+    }
+  }
+
+  .performance {
+    display: flex;
+    flex-direction: row;
+    width: 98.5%;
+    background-color: rgba(0, 0, 0, 0.4);
+    border-radius: 5px;
+    overflow-y: auto;
+    position: relative;
+    margin-top: 10px;
+
+    .left {
+      width: 53%;
+      height: 100%;
+      position: absolute;
+      left: 0;
+      top: 0;
+      display: flex;
+      flex-direction: row;
+      .dashed {
+        position: absolute;
+        width: 1px;
+        background-image: linear-gradient(
+          #3a4043 0%,
+          #3a4043 40%,
+          transparent 50%
+        );
+        background-size: 1px 9px;
+        margin-top: 45px;
+        height: 100%;
+        right: -50px;
+      }
+    }
+
+    .lyl {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: 70px;
+      font-size: 14px;
+      font-family: Arial;
+      font-weight: 400;
+      color: #1c98fe;
+      margin-top: 27px;
+      margin-left: 10px;
+    }
+    .lyl-item {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 35px;
+      position: relative;
+      width: 120px;
+    }
+    .lyl-item-img {
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      // height: 33px;
+    }
+    .dashed {
+      width: 1px;
+      background-image: linear-gradient(
+        #3a4043 0%,
+        #3a4043 40%,
+        transparent 50%
+      );
+      background-size: 1px 9px;
+      margin-top: 45px;
+    }
+
+    .dashed1 {
+      width: 1px;
+      background-image: linear-gradient(
+        #3a4043 0%,
+        #3a4043 40%,
+        transparent 50%
+      );
+      background-size: 1px 9px;
+      margin-top: 45px;
+      margin-left: 20px;
+    }
+
+    .table {
+      width: 48%;
+      // background-color: yellowgreen;
+    }
+    .table_cell .cell {
+      white-space: nowrap;
+    }
+  }
+}
+
 .contentMx::-webkit-scrollbar {
   width: 10px;
   height: 20px;
@@ -1013,4 +1325,4 @@ export default {
 .bg-green2 {
   background-color: #1d3638;
 }
-</style>
+</style>