修改综合分析的发电量分析页面，修复PR分析图表高度bug

.env.development

@@ -4,8 +4,8 @@ VUE_APP_TEST=http://10.81.3.155:9002
 
 
 # VUE_APP_API=http://192.168.1.110:6060
-# VUE_APP_API=http://10.81.3.153:6060
-VUE_APP_API=http://192.168.1.103:6060
+VUE_APP_API=http://10.81.3.153:6060
+# VUE_APP_API=http://192.168.1.103:6060
 
 
 VUE_APP_ADAPTERURL=http://10.81.3.155:8011

src/assets/styles/svg.less

@@ -243,5 +243,35 @@
       }
     }
   }
+  &.svg-icon-skyBlue {
+    svg {
+      use {
+        fill: #1c99ff;
+      }
+    }
+
+    &.svg-shadow {
+      svg {
+        use {
+          filter: drop-shadow(0 0 6px #1c99ff);
+        }
+      }
+    }
+  }
+   &.svg-icon-orange1 {
+    svg {
+      use {
+        fill: #ff8300;
+      }
+    }
+
+    &.svg-shadow {
+      svg {
+        use {
+          filter: drop-shadow(0 0 6px #ff8300);
+        }
+      }
+    }
+  }
 
 }

src/views/economicsOperation/photovoltaicAnalyse/prAnalyse/components/barCharts.vue

@@ -44,14 +44,17 @@ export default {
     };
   },
   computed: {
-    legend() {
-      return this.bardata.legend;
+    end() {
+      var result = 20;
+      if (this.areaData) {
+        result = parseInt((this.pageSize / this.areaData.length) * 100);
+      }
+      return result;
     },
   },
   methods: {
     initChart() {
-      let chart = echarts.init(this.$el);
-
+      let chart = this.$el && echarts.init(this.$el);
       let option = {
         color: this.color,
         grid: {
@@ -62,7 +65,8 @@ export default {
           containLabel: true,
         },
         legend: {
-          data: this.bardata.legend,
+          show: true,
+          data: ["PR"],
           right: 0,
           icon: "ract",
           itemWidth: 4,
@@ -117,7 +121,7 @@ export default {
             axisTick: {
               show: false,
             },
-            data: this.bardata.name,
+            data: this.bardata?.name,
           },
         ],
         xAxis: [
@@ -145,39 +149,22 @@ export default {
               },
             },
           },
-          {
-            type: "value",
-            name: "",
-            axisLabel: {
-              show: false,
-              // formatter: "{value}",
-              // color: partten.getColor("gray"),
-            },
-            axisLine: {
-              show: false,
-            },
-            axisTick: {
-              show: false,
-            },
-            splitLine: {
-              show: false,
-            },
-          },
-        ],
-        series: [
-          {
-            name: this.bardata.legend,
-            type: "bar",
-            barWidth: 10,
-            label: {
-              show: false,
-              position: "insideRight",
-            },
-            data: this.bardata.data,
-          },
         ],
+        series: [],
       };
-      console.log(option);
+      if (this.bardata && this.bardata.data && this.bardata.data.length) {
+        option.series.push({
+          name: "PR",
+          type: "bar",
+          barWidth: 10,
+          barMinHeight: 2,
+          label: {
+            show: false,
+            position: "insideRight",
+          },
+          data: this.bardata.data,
+        });
+      }
       chart.setOption(option); //重新绘制图标
     },
     resize() {
@@ -198,7 +185,6 @@ export default {
     this.$nextTick(() => {
       this.$el.style.width = this.width;
       this.$el.style.height = this.height;
-
       this.initChart();
       window.addEventListener("resize", this.resize);
     });
@@ -220,15 +206,17 @@ export default {
         }
       }
     },
-    height() {
-      this.areaData = this.bardata.name;
-      this.initChart();
-    },
-    "$store.state.isFixed": {
-      handler() {
-        this.resize();
+    height: {
+      handler(val) {
+        this.areaData = this.bardata.area;
+        this.initChart();
       },
     },
+    // "$store.state.isFixed": {
+    //   handler() {
+    //     this.resize();
+    //   },
+    // },
   },
 };
 </script>

src/views/economicsOperation/photovoltaicAnalyse/prAnalyse/index.vue

@@ -50,7 +50,9 @@
               :prop="item.prop"
               :label="item.label"
               :width="item.width"
-              :sortable="item.prop != 'prpm' && item.prop != 'wtid'"
+              :sortable="
+                item.prop != 'prpm' && item.prop != 'wtid' ? 'custom' : false
+              "
             >
               <template #default="{ row }">
                 <div class="pr-table-cell" v-if="item.label == '增长率(%)'">
@@ -61,13 +63,13 @@
                   }}</span>
                   <span v-if="row[item.prop] && row[item.prop] != 0">
                     <i
-                      class="svg-icon svg-icon-sm svg-icon-green"
+                      class="svg-icon svg-icon-sm svg-icon-skyBlue"
                       v-if="row[item.prop] < 0"
                     >
                       <svgIcon svgid="svg-arrow-down"></svgIcon>
                     </i>
                     <i
-                      class="svg-icon svg-icon-sm svg-icon-red"
+                      class="svg-icon svg-icon-sm svg-icon-orange1"
                       v-if="row[item.prop] > 0"
                     >
                       <svgIcon svgid="svg-arrow-up"></svgIcon>
@@ -86,8 +88,15 @@
             <el-table-column width="800"></el-table-column>
           </el-table>
         </div>
-        <div class="chart-wrapper" :style="{ height: height }">
-          <barCharts height="100%" width="100%" :bardata="bardata" />
+        <div class="chart-wrapper">
+          <div :style="{ height: height }">
+            <barCharts
+              v-if="showDisplay"
+              height="100%"
+              width="100%"
+              :bardata="bardata"
+            />
+          </div>
         </div>
       </div>
     </div>
@@ -119,19 +128,15 @@ export default {
       ],
       tableData: [],
       bardata: {},
-      height: "",
+      height: "880px",
       target: "",
       sort: "",
+      showDisplay: true,
     };
   },
   components: { barCharts, svgIcon },
   created() {
     this.getStation();
-    if (this.tableData.length > 22) {
-      this.height = this.tableData.length * 37 + 53 + "px";
-    } else {
-      this.height = 23 * 38 + 80 + "px";
-    }
   },
   methods: {
     getStation() {
@@ -147,13 +152,30 @@ export default {
       });
     },
     getDatas() {
+      this.BASE.showLoading();
       getPrAnalysis({
         wpId: this.station,
         month: this.month,
         target: this.target,
         sort: this.sort,
       }).then((res) => {
+        this.BASE.closeLoading();
         if (res.code == 200) {
+          this.bardata = {
+            name: res.data.map((i) => i.wtid),
+            lengend: "PR",
+            data: res.data.map((i) => i.pr),
+          };
+          if (res.data.length > 22) {
+            this.height = res.data.length * 37 + 53 + "px";
+          } else {
+            this.height = 23 * 38 + 80 + "px";
+          }
+
+          this.showDisplay = false;
+          setTimeout(() => {
+            this.showDisplay = true;
+          }, 5);
           this.tableData = res.data.map((i) => {
             return {
               ...i,
@@ -161,11 +183,6 @@ export default {
               prtbzzl: i.prtbzzl ? i.prtbzzl.toFixed(2) : i.prtbzzl,
             };
           });
-          this.bardata = {
-            name: this.tableData.map((i) => i.wtid),
-            lengend: "PR",
-            data: this.tableData.map((i) => i.pr),
-          };
         }
       });
     },
@@ -241,7 +258,6 @@ export default {
     .pr-body {
       height: calc(100% - 36px);
       width: 100%;
-
       position: relative;
       overflow: auto;
       .table-wrapper {

src/views/economicsOperation/stationAnalyse/stationElectricAnalyse/index.vue

@@ -189,6 +189,7 @@ export default {
       list: [],
       barList: [],
       tableData: [],
+      showDisplay:true,
       tableHead: [
         { title: "指标名称", children: [] },
         { title: "一月", children: ["本月", "同比", "环比"] },

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

@@ -65,7 +65,7 @@
     <div class="data-bodys">
       <div class="line clearfix">
         <div class="leftContent left">
-          <span>{{ selectValue }}</span>
+          <span>{{ selectValue + "分析" }}</span>
         </div>
       </div>
       <div class="economicTable">
@@ -93,7 +93,7 @@
             :label="val"
             v-for="(val, index) in tableHead"
             :key="index"
-            width="142"
+            width="139"
             sortable
           >
             <template v-slot="scope">
@@ -125,7 +125,7 @@
                         <div>
                           <span style="width: 80%">{{
                             scope.row.targetList &&
-                            scope.row.targetList[index]?.current
+                            scope.row.targetList[index]?.current.toFixed(1)
                           }}</span>
                         </div>
                       </el-tooltip>
@@ -150,15 +150,28 @@
                       />
                     </div>
                   </el-col>
-                  <el-col :span="12"
-                    ><span>{{
-                      scope.row.targetList &&
-                      (scope.row.targetList[index]?.sameperiod ||
-                      scope.row.targetList[index]?.sameperiod === 0
-                        ? scope.row.targetList[index]?.sameperiod
-                        : "--")
-                    }}</span></el-col
-                  >
+                  <el-col :span="12">
+                    <div
+                      v-if="
+                        scope.row.targetList[index]?.sameperiod ||
+                        scope.row.targetList[index]?.sameperiod === 0
+                      "
+                    >
+                      <el-tooltip
+                        effect="dark"
+                        :content="scope.row.targetList[index]?.sameperiod"
+                        placement="top-start"
+                      >
+                        <div>
+                          <span style="width: 80%">{{
+                            scope.row.targetList &&
+                            scope.row.targetList[index]?.sameperiod.toFixed(1)
+                          }}</span>
+                        </div>
+                      </el-tooltip>
+                    </div>
+                    <div v-else>--</div>
+                  </el-col>
                 </el-row>
               </div>
             </template>
@@ -167,12 +180,7 @@
       </div>
     </div>
     <div class="echarts">
-      <div class="chart-name">
-        <div class="point point-left bottom"></div>
-        <div class="point point-right bottom"></div>
-        {{ selectValue }}
-      </div>
-      <div style="height: calc(100% - 39px - 10px); margin-top: 10px">
+      <div style="height: 100%; margin-top: 10px">
         <BarCharts
           :list="barList"
           width="97%"
@@ -251,19 +259,20 @@ export default {
       searchYear: this.getmonthValue(),
       selectList: [
         {
-          name: "发电量分析",
-        },
-        {
-          name: "综合场用电量",
+          name: "发电量",
         },
+
         {
           name: "上网电量",
         },
         {
           name: "购网电量",
         },
+        {
+          name: "综合场用电量",
+        },
       ],
-      selectValue: "发电量分析",
+      selectValue: "发电量",
     };
   },
   watch: {},
@@ -297,7 +306,7 @@ export default {
         list.targetList.forEach((item) => {
           barList[0].date.push(item.month + "月");
           barList[0].children.push(item.current || 0);
-          barList[1].children.push(item.compare || 0);
+          barList[1].children.push(item.sameperiod || 0);
         });
         this.barList = barList;
       }
@@ -307,7 +316,7 @@ export default {
     },
     search() {
       switch (this.selectValue) {
-        case "发电量分析":
+        case "发电量":
           fdlList({
             companys: this.company,
             type: this.tabIndex,
@@ -471,9 +480,23 @@ export default {
       color: #ff8300;
     }
   }
-
+  .el-col + .el-col {
+    padding-left: 0 !important;
+  }
+  .el-table::v-deep {
+    // .el-table__header-wrapper {
+    //   th {
+    //     height: 35px !important;
+    //     line-height: 35px !important;
+    //   }
+    // }
+
+    td {
+      height: 34px !important;
+      line-height: 34px !important;
+    }
+  }
   .line {
-    padding-bottom: 5px;
     .leftContent {
       width: 242px;
       height: 41px;