曲线偏差率分析页面功能实现，样式调整完成

src/api/powerGenerating/index.js

@@ -277,7 +277,7 @@ export function getWindFittingLine(data, timeout = 5000) {
   });
 }
 
-export function getWindFittingTime(data, timeout = 5000) {
+export function getWindFittingTime(data, timeout = 15000) {
   return request({
     baseURL: process.env.VUE_APP_TEST,
     url: "/power/fitting/time",
@@ -288,7 +288,7 @@ export function getWindFittingTime(data, timeout = 5000) {
   });
 }
 
-export function getWindRatedPower(data, timeout = 5000) {
+export function getWindRatedPower(data, timeout = 15000) {
   return request({
     baseURL: process.env.VUE_APP_TEST,
     url: "/rated/power",

src/components/excel.vue

@@ -76,7 +76,7 @@ const funCheckChange = (checkArr) => {
 .excel-wrapper {
   height: 100%;
   padding: 20px;
-  width: 18%;
+ 
   margin-right: 20px;
   .excel-item {
     padding: 10px 0;

src/components/tree.vue

@@ -272,10 +272,12 @@ defineExpose({ setCheckedKeys });
 <style lang="less" scoped>
 .tree-wrapper {
   height: 100%;
+  ;
   padding: 20px;
 
   .treeRef {
     height: calc(100% - 30px - 20px);
+    width: 100%;
     margin-top: 10px;
     padding: 10px 0;
     overflow: auto;

src/router/index.js

@@ -1714,6 +1714,17 @@ export const asyncRoutes = [
               permissions: ["jn_dlbb_dmb"],
             },
           },
+          {
+            path: "lineAnalysis",
+            name: "lineAnalysis",
+            component: () =>
+              import("@/views/powerGenerating/windAnalyse/lineAnalysis"),
+            meta: {
+              title: "曲线偏差率分析",
+              icon: "",
+              permissions: ["jn_dlbb_dmb"],
+            },
+          },
         ],
       },
     ],

src/views/powerGenerating/index.vue

@@ -44,6 +44,9 @@ export default {
         width: 20%;
         margin-right: 20px;
       }
+      .excel-wrapper{
+         width: 18%;
+      }
       .data-left-wrapper {
         display: flex;
         width: 22%;
@@ -85,8 +88,8 @@ export default {
           height: calc(50% - 10px);
           padding: 10px;
           position: relative;
-          .zoom-icon{
-            position:absolute;
+          .zoom-icon {
+            position: absolute;
             right: 10px;
             top: 10px;
             z-index: 2;
@@ -104,12 +107,17 @@ export default {
         flex-direction: column;
         padding: 10px;
         position: relative;
-        .submit-btn {
+        .submit-btn,
+        .submit-btns {
           position: absolute;
           z-index: 2;
           top: 10px;
           right: 10px;
         }
+        .data-table-chart {
+          height: 100%;
+          padding: 10px;
+        }
       }
     }
   }

src/views/powerGenerating/windAnalyse/lineAnalysis/components/current-scatter-chart.vue

@@ -4,12 +4,12 @@
 
 <script>
 import util from "@tools/util";
-import partten from "@tools/partten";
+import partten from "@/helper/partten";
 import * as echarts from "echarts";
-import chartTheme from './current-scatter-chart.json'
+import chartTheme from "./current-scatter-chart.json";
 
 export default {
-  name: 'currentScatterChart',
+  name: "currentScatterChart",
   props: {
     // 图表宽度
     width: {
@@ -42,7 +42,7 @@ export default {
     },
     dataSet: {
       type: String,
-      default: ''
+      default: "",
     },
     // 图表核心数据
     seriesData: {
@@ -75,35 +75,38 @@ export default {
         "#c531c7",
         "#bd3338",
       ],
-      theme: 'light'
+      theme: "dark",
     };
   },
   computed: {
-    collapse(){
-      return this.$store.state.collapse
-    }
+    collapse() {
+      return this.$store.state.collapse;
+    },
   },
   watch: {
-    height(){
-      if(this.chart){
-          this.chart.resize()
+    height() {
+      if (this.chart) {
+        this.chart.resize();
       }
     },
-    collapse(val){
-      if(this.chart){
+    collapse(val) {
+      if (this.chart) {
         setTimeout(() => {
-          this.chart.resize()
-        },300)
+          this.chart.resize();
+        }, 300);
       }
-    }
+    },
   },
   methods: {
     resize() {},
     initChart() {
       const that = this;
-      echarts.registerTheme('chartTheme', chartTheme)
-      let myChart = echarts.init(document.getElementById(this.id), 'chartTheme');
-      that.chart = myChart
+      echarts.registerTheme("chartTheme", chartTheme);
+      let myChart = echarts.init(
+        document.getElementById(this.id),
+        "chartTheme"
+      );
+      that.chart = myChart;
       //指定图表的配置项和数据
       const option = {
         //标题
@@ -122,14 +125,14 @@ export default {
         //     : "rgba(255,255,255,0.5)",
         //工具箱
         color: [
-            "rgb(255,0,0)",
-            "#FF8700",
-            "#e6b600d9",
-            "#0098d9",
-            "#3D54BE",
-            "#005eaa",
-            "#cda819",
-            "#32a487"
+          "rgb(255,0,0)",
+          "#FF8700",
+          "#e6b600d9",
+          "#0098d9",
+          "#3D54BE",
+          "#005eaa",
+          "#cda819",
+          "#32a487",
         ],
         toolbox: {
           show: false,
@@ -139,14 +142,14 @@ export default {
           borderColor: partten.getColor("gray"),
           textStyle: {
             fontSize: util.vh(16),
-            color: partten.getColor("gray")
+            color: partten.getColor("gray"),
           },
           iconStyle: {
-            borderColor:partten.getColor("gray")
+            borderColor: partten.getColor("gray"),
           },
           emphasis: {
             iconStyle: {
-              borderColor:partten.getColor("gray")
+              borderColor: partten.getColor("gray"),
             },
           },
         },
@@ -168,7 +171,7 @@ export default {
           // },
         },
         brush: {
-          seriesIndex: [2,3],
+          seriesIndex: [2, 3],
           yAxisIndex: 0,
           transformable: true,
           throttleType: "debounce",
@@ -205,23 +208,22 @@ export default {
         legend: {
           show: that.showLegend,
           // data: [ "拟合功率", "保证功率","无用点", "有用点", "Cp值"],
-          right: 260,
-          type: 'scroll',
-          top: "5",
+          right: 350,
+          type: "scroll",
+          top: 2,
           // icon: "circle",
           itemWidth: 6,
           inactiveColor:
-            that.theme === "dark"
-              ? partten.getColor("gray")
-              : "#000",
+            that.theme === "dark" ? partten.getColor("gray") : "#000",
           textStyle: {
-            color:
-              that.theme === "dark"
-                ? partten.getColor("grayl")
-                : "#000",
+            color: that.theme === "dark" ? partten.getColor("grayl") : "#000",
             fontSize: 12,
           },
-          
+          pageTextStyle: {
+            color: '#a6b0b2',
+          },
+          pageIconInactiveColor: "#aaa",
+          pageIconColor: "#05bb4c",
         },
         grid: {
           top: 58,
@@ -232,9 +234,9 @@ export default {
         //x轴
         xAxis: [
           {
-            name: 'm/s',
+            name: "m/s",
             nameTextStyle: {
-              color: '#838383'
+              color: "#838383",
             },
             type: "value",
             boundaryGap: false,
@@ -250,25 +252,24 @@ export default {
             },
             smooth: true,
             textStyle: {
-              color:
-                that.theme === "dark"
-                  ? partten.getColor("gray")
-                  : "#000",
+              color: that.theme === "dark" ? partten.getColor("gray") : "#000",
             },
           },
         ],
         //y轴没有显式设置，根据值自动生成y轴
-        yAxis: [{
-          splitLine: { show: false },
-          position: 'left',
-          min: 0,
-          name: 'kW',
-          nameTextStyle: {
-            color: '#838383'
-          }
-        }],
+        yAxis: [
+          {
+            splitLine: { show: false },
+            position: "left",
+            min: 0,
+            name: "kW",
+            nameTextStyle: {
+              color: "#838383",
+            },
+          },
+        ],
         animation: true,
-        dataset: that.dataSet.length? JSON.parse(that.dataSet) : [],
+        dataset: that.dataSet.length ? JSON.parse(that.dataSet) : [],
         //数据-data是最终要显示的数据
         series: that.seriesData,
       };
@@ -306,21 +307,21 @@ export default {
       myChart.on("brushSelected", (params) => {
         that.$emit("getSelected", params.batch || []);
       });
-      myChart.off('click')
-      myChart.on('click', params => {
-          // if(params.componentType === 'markArea'){
-          //   myChart.dispatchAction({
-          //     type: 'brush',
-          //     areas: [
-          //       {
-          //         xAxisIndex: 0,
-          //         brushType: 'lineX',
-          //         coordRange: [params.data.coord[0][0], params.data.coord[1][0]]
-          //       },
-          //     ]
-          //   });
-          // }
-        })
+      myChart.off("click");
+      myChart.on("click", (params) => {
+        // if(params.componentType === 'markArea'){
+        //   myChart.dispatchAction({
+        //     type: 'brush',
+        //     areas: [
+        //       {
+        //         xAxisIndex: 0,
+        //         brushType: 'lineX',
+        //         coordRange: [params.data.coord[0][0], params.data.coord[1][0]]
+        //       },
+        //     ]
+        //   });
+        // }
+      });
     },
   },
   created() {
@@ -328,9 +329,9 @@ export default {
   },
   mounted() {
     // this.$nextTick(() => {
-      this.$el.style.width = this.width;
-      this.$el.style.height = this.height;
-      this.initChart();
+    this.$el.style.width = this.width;
+    this.$el.style.height = this.height;
+    this.initChart();
     // });
   },
   updated() {

src/views/powerGenerating/windAnalyse/lineAnalysis/index.vue

@@ -6,6 +6,7 @@ import SubmitBtn from "@/components/SubmitBtn.vue";
 import { ref, nextTick, onActivated, onMounted, reactive } from "vue";
 import { ElMessage } from "element-plus";
 import util from "@tools/util";
+import BASE from "@tools/basicTool.js";
 import CurrentScatterChart from "./components/current-scatter-chart.vue";
 import {
   getWindFittingTree,
@@ -119,8 +120,10 @@ const funSubmit = async () => {
   const params = {
     ids: excelCheckIds.value.join(","),
   };
+  BASE.showLoading();
   const res = await getWindFittingLine(params);
   if (res.code === 200) {
+    BASE.closeLoading();
     seriesData.value = [];
     if (res.data.bzgl) {
       seriesData.value.push({
@@ -570,7 +573,7 @@ const wtDialog = ref(false);
 const wtData = ref([]);
 const activeTab = ref("1");
 /**created */
-funGetTree()
+funGetTree();
 // funGetProcessTree()
 /**mounted */
 
@@ -646,7 +649,7 @@ onActivated(() => {
         </div>
       </template>
       <el-table :data="wtData" row-key="id" :max-height="600">
-        <el-table-column property="windturbine" align="center" label="风机" />
+        <el-table-column property="windturbineId" align="center" label="风机" />
         <el-table-column
           property="pc5ratio"
           sortable
@@ -705,11 +708,11 @@ onActivated(() => {
             <SubmitBtn desc="时间占比" @click="funTimeArea"></SubmitBtn>
             <SubmitBtn desc="额定功率" @click="funPower"></SubmitBtn>
           </div>
-          <div class="p-[10px]">
+          <div class="data-table-chart">
             <CurrentScatterChart
               ref="chartRef"
               width="100%"
-              :height="`calc( ${tableHeight} - 40px )`"
+              height="`100%"
               chartTitle=""
               :xAxisData="xAxisData"
               :yAxisData="{ splitLine: { show: false } }"
@@ -722,12 +725,18 @@ onActivated(() => {
           </div>
         </div>
       </div>
-    
     </div>
   </div>
 </template>
-<style scoped>
+<style scoped lang="less">
 .s-dialog-body /deep/ .el-dialog__body {
   padding: 0px 20px;
 }
+.power-data-wrapper {
+  height: 100%;
+  margin-top: 0;
+}
+.data-table-wrapper {
+  width: calc(62% - 40px) !important;
+}
 </style>