浏览代码

fix 图表

liujiejie 4 月之前
父节点
当前提交
d6c919b9f6
共有 36 个文件被更改,包括 345 次插入296 次删除
  1. 3 0
      src/App.vue
  2. 27 8
      src/components/virtual_list/index.vue
  3. 24 0
      src/styles/global.scss
  4. 25 25
      src/views/admin/cockpitManage/Index.vue
  5. 2 0
      src/views/home/components/Menu.vue
  6. 2 2
      src/views/overview/components/cp/index.vue
  7. 2 2
      src/views/overview/components/cp_windspeed/index.vue
  8. 2 2
      src/views/overview/components/fault_all/index.vue
  9. 1 1
      src/views/overview/components/fault_unit/index.vue
  10. 1 1
      src/views/overview/components/power_curve/index.vue
  11. 2 2
      src/views/overview/components/production_indicator_all/index.vue
  12. 2 2
      src/views/overview/components/production_indicator_unit/index.vue
  13. 16 13
      src/views/overview/components/speed_power/index.vue
  14. 12 13
      src/views/overview/components/speed_torque/index.vue
  15. 1 1
      src/views/overview/components/temperature_large_components_Winding_tem/index.vue
  16. 2 2
      src/views/overview/components/temperature_large_components_adriven/index.vue
  17. 1 1
      src/views/overview/components/temperature_large_components_hig/index.vue
  18. 2 2
      src/views/overview/components/temperature_large_components_low/index.vue
  19. 1 1
      src/views/overview/components/temperature_large_components_mid/index.vue
  20. 2 2
      src/views/overview/components/temperature_large_components_min/index.vue
  21. 1 1
      src/views/overview/components/temperature_large_components_tem_deviation/index.vue
  22. 2 2
      src/views/overview/components/temperature_large_components_undriven/index.vue
  23. 2 2
      src/views/overview/components/tsr/index.vue
  24. 1 1
      src/views/overview/components/tsr_cp_power/index.vue
  25. 2 2
      src/views/overview/components/tsr_cp_power_scatter/index.vue
  26. 1 1
      src/views/overview/components/tsr_trend/index.vue
  27. 2 2
      src/views/overview/components/tsr_windspeed/index.vue
  28. 3 3
      src/views/overview/components/wind_direction_frequency/index.vue
  29. 2 2
      src/views/overview/components/yaw_error/index.vue
  30. 47 43
      src/views/performance/components/chartsCom/3DDrawingChart.vue
  31. 2 2
      src/views/performance/components/chartsCom/BarChart.vue
  32. 16 16
      src/views/performance/components/chartsCom/ColorbarInitTwoDmarkersChart.vue
  33. 87 93
      src/views/performance/components/chartsCom/Time3DChart.vue
  34. 15 15
      src/views/performance/components/chartsCom/TwoDMarkersChart.vue
  35. 15 15
      src/views/performance/components/chartsCom/TwoDMarkersChart1.vue
  36. 17 16
      src/views/performance/components/chartsCom/powerMarkers2DCharts.vue

+ 3 - 0
src/App.vue

@@ -24,6 +24,9 @@ body {
   width: 100%;
   height: 100%;
 }
+::v-deep .vue-recycle-scroller__item-wrapper::-webkit-scrollbar {
+  display: block !important;
+}
 // ::-webkit-scrollbar {
 //   display: none;
 // }

+ 27 - 8
src/components/virtual_list/index.vue

@@ -51,6 +51,11 @@ export default {
 .charts {
   // height: calc(100% - 150px);
   height: 100%;
+  .vue-recycle-scroller {
+    ::v-deep .vue-recycle-scroller__item-wrapper::-webkit-scrollbar {
+      display: block !important;
+    }
+  }
 }
 
 .virtual-list {
@@ -62,15 +67,29 @@ export default {
 .scroller {
   height: 100%;
   overflow: hidden;
+}
+.scroller {
+  // height: 400px; /* 限制高度,才会有滚动条 */
+  overflow-y: auto; /* 显示垂直滚动条 */
+  scrollbar-width: thin; /* 适用于 Firefox */
+  scrollbar-color: #888 #f1f1f1; /* 滚动条颜色 */
+}
 
-  /* 隐藏垂直滚动条 */
-  &::-webkit-scrollbar {
-    width: 0;
-  }
+/* WebKit 浏览器(Chrome、Safari)的滚动条样式 */
+.scroller::-webkit-scrollbar {
+  width: 8px; /* 滚动条宽度 */
+}
 
-  /* 隐藏水平滚动条 */
-  &::-webkit-scrollbar {
-    height: 0;
-  }
+.scroller::-webkit-scrollbar-track {
+  background: #f1f1f1; /* 滚动条轨道颜色 */
+}
+
+.scroller::-webkit-scrollbar-thumb {
+  background: #888; /* 滚动条颜色 */
+  border-radius: 4px;
+}
+
+.scroller::-webkit-scrollbar-thumb:hover {
+  background: #555; /* 滚动条悬停颜色 */
 }
 </style>

+ 24 - 0
src/styles/global.scss

@@ -153,3 +153,27 @@
 ::v-deep .el-dialog__headerbtn .el-dialog__close {
   color: #fff;
 }
+.scroller {
+  height: 100%; /* 限制高度,才会有滚动条 */
+  overflow-y: auto; /* 显示垂直滚动条 */
+  scrollbar-width: thin; /* 适用于 Firefox */
+  scrollbar-color: #888 #f1f1f1; /* 滚动条颜色 */
+}
+
+/* WebKit 浏览器(Chrome、Safari)的滚动条样式 */
+.scroller::-webkit-scrollbar {
+  width: 8px; /* 滚动条宽度 */
+}
+
+.scroller::-webkit-scrollbar-track {
+  background: #f1f1f1; /* 滚动条轨道颜色 */
+}
+
+.scroller::-webkit-scrollbar-thumb {
+  background: #888; /* 滚动条颜色 */
+  border-radius: 4px;
+}
+
+.scroller::-webkit-scrollbar-thumb:hover {
+  background: #555; /* 滚动条悬停颜色 */
+}

+ 25 - 25
src/views/admin/cockpitManage/Index.vue

@@ -17,7 +17,7 @@
         >
         </selecttree>
 
-        <p  >
+        <p>
           <span class="SpText">已接入风场数:</span>
           {{ totalList?.fieldSumNumber ? totalList.fieldSumNumber : 0 }}
@@ -220,7 +220,7 @@ export default {
     featureClick(data) {
       console.log(data, "featureClick");
       const val = data.val;
-      if (val === "-1" || val === -1||val === 10) {
+      if (val === "-1" || val === -1 || val === 10) {
         this.$message.error("当前风场未完成分析");
       } else if (val === "0" || val === 0) {
         this.$message({
@@ -270,36 +270,36 @@ export default {
     color: #fff;
     border-radius: 5px;
     p {
-    line-height: 24px;
+      line-height: 24px;
 
-    .SpText {
-      display: inline-block;
-      width: 120px;
-      text-align: right;
-    }
+      .SpText {
+        display: inline-block;
+        width: 120px;
+        text-align: right;
+      }
 
-    .red,
-    .yellow,
-    .green {
-      display: inline-block;
-      width: 30px;
-      height: 12px;
-      margin-right: 5px;
-    }
+      .red,
+      .yellow,
+      .green {
+        display: inline-block;
+        width: 30px;
+        height: 12px;
+        margin-right: 5px;
+      }
 
-    .red {
-      background-color: #e16757;
-    }
+      .red {
+        background-color: #e16757;
+      }
 
-    .yellow {
-      background-color: #eecb5f;
-    }
+      .yellow {
+        background-color: #eecb5f;
+      }
 
-    .green {
-      background-color: #7ecf51;
+      .green {
+        background-color: #7ecf51;
+      }
     }
   }
-  }
 
   .task {
     // background: #f4f4f4;

+ 2 - 0
src/views/home/components/Menu.vue

@@ -266,6 +266,8 @@ export default {
 }
 
 .asideBox {
+  height: 100vh;
+  overflow-y: scroll;
   position: relative;
   padding-bottom: 40px;
   padding-top: 16px;

+ 2 - 2
src/views/overview/components/cp/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-01-09 18:05:58
- * @LastEditTime: 2025-03-14 16:37:21
+ * @LastEditTime: 2025-03-21 14:38:49
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/overview/components/cp/index.vue
@@ -10,7 +10,7 @@
 <template>
   <div class="type-variable">
     <!-- 风能利用系数和有功功率分析 -->
-    <div class="left">
+    <div class="left scroller">
       <FilterChart
         :windList="windEngineGroupList"
         @getEnfineList="getEnfineList"

+ 2 - 2
src/views/overview/components/cp_windspeed/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-01-09 18:08:00
- * @LastEditTime: 2025-02-26 11:09:24
+ * @LastEditTime: 2025-03-21 14:39:04
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/overview/components/cp_windspeed/index.vue
@@ -10,7 +10,7 @@
 <template>
   <div class="type-variable">
     <!-- 风能利用系数和风速分析 -->
-    <div class="left">
+    <div class="left scroller">
       <FilterChart
         :windList="windEngineGroupList"
         :setUpimg="['风能利用系数']"

+ 2 - 2
src/views/overview/components/fault_all/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-01-13 13:56:55
- * @LastEditTime: 2025-03-17 14:06:59
+ * @LastEditTime: 2025-03-21 14:39:23
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/overview/components/fault_all/index.vue
@@ -10,7 +10,7 @@
 <template>
   <div class="type-variable">
     <!-- 全场故障统计 -->
-    <div class="left">
+    <div class="left scroller">
       <FilterChart
         :setUpimg="[]"
         :isShowEngList="false"

+ 1 - 1
src/views/overview/components/fault_unit/index.vue

@@ -9,7 +9,7 @@
 <template>
   <div class="type-variable">
     <!-- 机组故障统计 -->
-    <div class="left">
+    <div class="left scroller">
       <FilterChart
         :setUpimg="[]"
         :isShowEngList="false"

+ 1 - 1
src/views/overview/components/power_curve/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="type-variable">
     <!-- 有功功率曲线分析 -->
-    <div class="left">
+    <div class="left scroller">
       <FilterChart
         :windList="windEngineGroupList"
         @getEnfineList="getEnfineList"

+ 2 - 2
src/views/overview/components/production_indicator_all/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-01-13 13:45:50
- * @LastEditTime: 2025-03-17 13:59:45
+ * @LastEditTime: 2025-03-21 14:40:16
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/overview/components/production_indicator_all/index.vue
@@ -10,7 +10,7 @@
 <template>
   <div class="type-variable">
     <!-- 全场指标 -->
-    <div class="left">
+    <div class="left scroller">
       <FilterChart
         :setUpimg="[]"
         :isShowEngList="false"

+ 2 - 2
src/views/overview/components/production_indicator_unit/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-01-13 13:44:56
- * @LastEditTime: 2025-03-14 16:55:28
+ * @LastEditTime: 2025-03-21 14:40:25
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/overview/components/production_indicator_unit/index.vue
@@ -9,7 +9,7 @@
 <template>
   <div class="type-variable">
     <!-- 机组指标 -->
-    <div class="left">
+    <div class="left scroller">
       <FilterChart
         :setUpimg="[]"
         :windList="windEngineGroupList"

+ 16 - 13
src/views/overview/components/speed_power/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-01-10 09:09:17
- * @LastEditTime: 2025-03-14 17:48:42
+ * @LastEditTime: 2025-03-21 14:08:22
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/overview/components/speed_power/index.vue
@@ -32,14 +32,17 @@
           在风力发电机组中,转速-功率散点图展示了风机发电机转速与风机产生的功率之间的关系。这种散点图能够揭示在不同转速速和操作条件下,发电机转速调整是如何影响风机的功率和转矩输出的。
         </div>
       </el-alert>
-      <div class="titleCharts">分析总图 :</div>
+      <!-- <div class="titleCharts">分析总图 :</div> -->
+
+      <!-- <div class="titleCharts">分析分图 :</div> -->
       <VirtualList
-        :list="generalFilesDatas"
+        :list="[...generalFilesDatas, ...diagramRelationsDatas]"
         keyField="fileAddr"
         :itemSize="700"
         v-slot="{ item, index }"
       >
         <DDrawingChart
+          v-if="item.batchCode && !item.fieldEngineCode"
           :setUpImgData="setUpImgData"
           :key="item.batchCode + index"
           :index="index + 'zong'"
@@ -47,16 +50,11 @@
           :fileAddr="item.fileAddr"
         >
         </DDrawingChart>
-      </VirtualList>
-      <div class="titleCharts">分析分图 :</div>
-      <VirtualList
-        :list="diagramRelationsDatas"
-        keyField="fileAddr"
-        :itemSize="700"
-        v-slot="{ item, index }"
-      >
         <powerMarkers2DCharts
-          v-if="getFileTypeFromUrl(item.fileAddr) === 'speed_power'"
+          v-if="
+            item.fieldEngineCode &&
+            getFileTypeFromUrl(item.fileAddr) === 'speed_power'
+          "
           :index="index + 'powerMarkers2DCharts'"
           :setUpImgData="setUpImgData"
           :key="item.fieldEngineCode + 'powerMarkers2DCharts'"
@@ -65,7 +63,9 @@
         ></powerMarkers2DCharts>
 
         <Time3DChart
-          v-if="getFileTypeFromUrl(item.fileAddr) === '3D'"
+          v-if="
+            item.fieldEngineCode && getFileTypeFromUrl(item.fileAddr) === '3D'
+          "
           :setUpImgData="setUpImgData"
           :key="item.fieldEngineCode + 'Time3DChart'"
           :index="index + 'fen'"
@@ -406,6 +406,9 @@ export default {
 };
 </script>
 <style scoped lang="scss">
+// ::v-deep .vue-recycle-scroller__item-wrapper::-webkit-scrollbar {
+//   display: block !important;
+// }
 .type-variable {
   display: flex;
   height: 90%;

+ 12 - 13
src/views/overview/components/speed_torque/index.vue

@@ -23,13 +23,17 @@
           在风力发电机组中,转速-功率散点图展示了风机发电机转速与风机产生的功率之间的关系。这种散点图能够揭示在不同转速速和操作条件下,发电机转速调整是如何影响风机的功率和转矩输出的。
         </div>
       </el-alert>
+
+      <!-- <div class="titleCharts">分析分图 :</div> -->
+
       <VirtualList
-        :list="generalFilesDatas"
+        :list="[...generalFilesDatas, ...diagramRelationsDatas]"
         keyField="fileAddr"
         :itemSize="700"
         v-slot="{ item, index }"
       >
         <DDrawingChart
+          v-if="item.batchCode && !item.fieldEngineCode"
           :setUpImgData="setUpImgData"
           :key="item.batchCode + index"
           :index="index + 'zong'"
@@ -37,19 +41,12 @@
           :fileAddr="item.fileAddr"
         >
         </DDrawingChart>
-      </VirtualList>
-
-      <!-- <div class="titleCharts">分析分图 :</div> -->
-
-      <VirtualList
-        :list="diagramRelationsDatas"
-        keyField="fileAddr"
-        :itemSize="700"
-        v-slot="{ item, index }"
-      >
         <powerMarkers2DCharts
           :setUpImgData="setUpImgData"
-          v-if="getFileTypeFromUrl(item.fileAddr) === 'speed_torque'"
+          v-if="
+            item.fieldEngineCode &&
+            getFileTypeFromUrl(item.fileAddr) === 'speed_torque'
+          "
           :index="index + 'powerMarkers2DCharts'"
           :key="item.fieldEngineCode + 'powerMarkers2DCharts'"
           :ref="item.fieldEngineCode"
@@ -57,7 +54,9 @@
         ></powerMarkers2DCharts>
         <Time3DChart
           :setUpImgData="setUpImgData"
-          v-if="getFileTypeFromUrl(item.fileAddr) === '3D'"
+          v-if="
+            item.fieldEngineCode && getFileTypeFromUrl(item.fileAddr) === '3D'
+          "
           :key="item.fieldEngineCode + 'Time3DChart'"
           :index="index + 'fen'"
           :ref="item.fieldEngineCode + 'Time3DChart'"

+ 1 - 1
src/views/overview/components/temperature_large_components_Winding_tem/index.vue

@@ -10,7 +10,7 @@
 <template>
   <div class="type-variable">
     <!-- 发电机-绕组温度分析 -->
-    <div class="left">
+    <div class="left scroller">
       <FilterChart
         :setUpimg="['有功功率']"
         :windList="windEngineGroupList"

+ 2 - 2
src/views/overview/components/temperature_large_components_adriven/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-01-21 10:01:52
- * @LastEditTime: 2025-02-26 11:22:19
+ * @LastEditTime: 2025-03-21 14:40:48
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/overview/components/temperature_large_components_adriven/index.vue
@@ -10,7 +10,7 @@
 <template>
   <div class="type-variable">
     <!-- 发电机-驱动端轴承温度分析 -->
-    <div class="left">
+    <div class="left scroller">
       <FilterChart
         :setUpimg="['有功功率']"
         :windList="windEngineGroupList"

+ 1 - 1
src/views/overview/components/temperature_large_components_hig/index.vue

@@ -10,7 +10,7 @@
 <template>
   <div class="type-variable">
     <!-- 齿轮箱-高速轴温度分析 -->
-    <div class="left">
+    <div class="left scroller">
       <FilterChart
         :setUpimg="['有功功率']"
         :windList="windEngineGroupList"

+ 2 - 2
src/views/overview/components/temperature_large_components_low/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-01-21 10:00:25
- * @LastEditTime: 2025-02-26 11:22:39
+ * @LastEditTime: 2025-03-21 14:40:59
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/overview/components/temperature_large_components_low/index.vue
@@ -10,7 +10,7 @@
 <template>
   <div class="type-variable">
     <!-- 齿轮箱-低速轴温度分析 -->
-    <div class="left">
+    <div class="left scroller">
       <FilterChart
         :setUpimg="['有功功率']"
         :windList="windEngineGroupList"

+ 1 - 1
src/views/overview/components/temperature_large_components_mid/index.vue

@@ -10,7 +10,7 @@
 <template>
   <div class="type-variable">
     <!-- 齿轮箱-中速轴温度分析 -->
-    <div class="left">
+    <div class="left scroller">
       <FilterChart
         :setUpimg="['有功功率']"
         :windList="windEngineGroupList"

+ 2 - 2
src/views/overview/components/temperature_large_components_min/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-01-21 10:01:06
- * @LastEditTime: 2025-02-26 11:22:58
+ * @LastEditTime: 2025-03-21 14:41:08
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/overview/components/temperature_large_components_min/index.vue
@@ -10,7 +10,7 @@
 <template>
   <div class="type-variable">
     <!-- 主轴承温度分析 -->
-    <div class="left">
+    <div class="left scroller">
       <FilterChart
         :setUpimg="['有功功率']"
         :windList="windEngineGroupList"

+ 1 - 1
src/views/overview/components/temperature_large_components_tem_deviation/index.vue

@@ -10,7 +10,7 @@
 <template>
   <div class="type-variable">
     <!-- 发电机-轴承温度偏差分析 -->
-    <div class="left">
+    <div class="left scroller">
       <FilterChart
         :setUpimg="['有功功率']"
         :windList="windEngineGroupList"

+ 2 - 2
src/views/overview/components/temperature_large_components_undriven/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-01-21 10:02:36
- * @LastEditTime: 2025-02-26 11:23:36
+ * @LastEditTime: 2025-03-21 14:41:17
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/overview/components/temperature_large_components_undriven/index.vue
@@ -10,7 +10,7 @@
 <template>
   <div class="type-variable">
     <!-- 发电机-非驱动端轴承温度分析 -->
-    <div class="left">
+    <div class="left scroller">
       <FilterChart
         :setUpimg="['有功功率']"
         :windList="windEngineGroupList"

+ 2 - 2
src/views/overview/components/tsr/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-01-10 09:10:11
- * @LastEditTime: 2025-02-26 11:24:02
+ * @LastEditTime: 2025-03-21 14:41:29
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/overview/components/tsr/index.vue
@@ -10,7 +10,7 @@
 <template>
   <div class="type-variable">
     <!-- 叶尖速比和有功功率分析 -->
-    <div class="left">
+    <div class="left scroller">
       <FilterChart
         :setUpimg="['叶尖速比']"
         :windList="windEngineGroupList"

+ 1 - 1
src/views/overview/components/tsr_cp_power/index.vue

@@ -10,7 +10,7 @@
 <template>
   <div class="type-variable">
     <!-- 叶尖速比-风能利用系数-功率分析 -->
-    <div class="left">
+    <div class="left scroller">
       <FilterChart
         :setUpimg="['有功功率']"
         :windList="windEngineGroupList"

+ 2 - 2
src/views/overview/components/tsr_cp_power_scatter/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-01-10 09:22:59
- * @LastEditTime: 2025-03-14 18:17:25
+ * @LastEditTime: 2025-03-21 14:41:39
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/overview/components/index.vue
@@ -10,7 +10,7 @@
 <template>
   <div class="type-variable">
     <!-- 叶尖速比-Cp-功率散点分析--只有分图不存在总图 -->
-    <div class="left">
+    <div class="left scroller">
       <FilterChart
         :setUpimg="['有功功率']"
         :windList="windEngineGroupList"

+ 1 - 1
src/views/overview/components/tsr_trend/index.vue

@@ -10,7 +10,7 @@
 <template>
   <div class="type-variable">
     <!-- 叶尖速比时序分析--只有分图不存在总图 -->
-    <div class="left">
+    <div class="left scroller">
       <FilterChart
         :setUpimg="['叶尖速比']"
         :windList="windEngineGroupList"

+ 2 - 2
src/views/overview/components/tsr_windspeed/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-01-10 09:10:59
- * @LastEditTime: 2025-02-26 11:24:51
+ * @LastEditTime: 2025-03-21 14:41:49
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/overview/components/tsr_windspeed/index.vue
@@ -10,7 +10,7 @@
 <template>
   <div class="type-variable">
     <!-- 叶尖速比和风速分析 -->
-    <div class="left">
+    <div class="left scroller">
       <FilterChart
         :setUpimg="['叶尖速比']"
         :windList="windEngineGroupList"

+ 3 - 3
src/views/overview/components/wind_direction_frequency/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-01-10 09:11:12
- * @LastEditTime: 2025-03-14 20:19:37
+ * @LastEditTime: 2025-03-21 14:43:58
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/overview/components/wind_direction_frequency/index.vue
@@ -9,7 +9,7 @@
 <template>
   <div class="type-variable">
     <!-- 风向玫瑰分析 -->
-    <div class="left">
+    <div class="left scroller">
       <FilterChart
         :setUpimg="[]"
         :windList="windEngineGroupList"
@@ -47,7 +47,7 @@
           :fileAddr="item.fileAddr"
         ></WindRoseChart>
       </VirtualList> -->
-      <div>
+      <div class="scroller">
         <template>
           <el-row>
             <el-col

+ 2 - 2
src/views/overview/components/yaw_error/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-01-10 09:24:14
- * @LastEditTime: 2025-02-26 11:26:51
+ * @LastEditTime: 2025-03-21 14:42:04
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/overview/components/yaw_error/index.vue
@@ -10,7 +10,7 @@
 <template>
   <div class="type-variable">
     <!-- 静态偏航误差分析 -->
-    <div class="left">
+    <div class="left scroller">
       <FilterChart
         :setUpimg="[]"
         :windList="windEngineGroupList"

+ 47 - 43
src/views/performance/components/chartsCom/3DDrawingChart.vue

@@ -28,19 +28,19 @@
           </el-option>
         </el-select>
       </div>
-    </div>
-    <!-- 点大小控制 -->
-    <div style="display: flex; align-items: center">
-      <el-slider
-        v-model="pointSize"
-        :min="1"
-        :max="15"
-        :step="1"
-        label="点的大小"
-        show-stops
-        style="width: 150px"
-        @change="updateChartColor"
-      ></el-slider>
+      <!-- 点大小控制 -->
+      <div style="display: flex; align-items: center">
+        <el-slider
+          v-model="pointSize"
+          :min="1"
+          :max="15"
+          :step="1"
+          label="点的大小"
+          show-stops
+          style="width: 150px"
+          @change="updateChartColor"
+        ></el-slider>
+      </div>
     </div>
 
     <!-- 图表展示区域 -->
@@ -224,27 +224,30 @@ export default {
             tickcolor: "rgb(255,255,255)",
             backgroundcolor: "#CFD4DC",
             showbackground: true,
-            linewidth: 2, // 轴线宽度
+            // linewidth: 2, // 轴线宽度
             linecolor: "black", // 轴线颜色
             ticks: "outside", // 设置刻度线在轴线外
             fixedrange: true, // 防止缩放
-            tickwidth: 2,
+            // tickwidth: 2,
             tickcolor: "black",
+            tickangle: -10,
           },
           yaxis: {
             title: this.chartData.yaixs,
-            // tickvals: tickvals,
-            // ticktext: ticktext,
-            // range: [0.5, tickvals.length + 0.5], // 让刻度均匀排列
+            tickvals: [...new Set(this.chartData.data[0].yData)],
+            ticktext: [...new Set(this.chartData.data[0].yData)],
+            type: "category", // 让 Y 轴按类别均匀分布
+            categoryorder: "category ascending", // 按类别字母顺序排列
             gridcolor: "rgb(255,255,255)",
             tickcolor: "rgb(255,255,255)",
             backgroundcolor: "#CFD4DC",
             showbackground: true,
-            linewidth: 2, // 轴线宽度
+            // linewidth: 2, // 轴线宽度
             linecolor: "black", // 轴线颜色
             ticks: "outside", // 设置刻度线在轴线外
-            tickwidth: 2,
+            // tickwidth: 2,
             tickcolor: "black",
+            tickangle: 25,
           },
           zaxis: {
             title: this.chartData.zaixs,
@@ -253,15 +256,16 @@ export default {
             backgroundcolor: "#CFD4DC",
             showbackground: true,
             fixedrange: true, // 防止缩放
-            linewidth: 2, // 轴线宽度
+            // linewidth: 2, // 轴线宽度
             linecolor: "black", // 轴线颜色
             ticks: "outside", // 设置刻度线在轴线外
-            tickwidth: 2,
+            // tickwidth: 2,
             tickcolor: "black",
+            tickangle: -90,
           },
           aspectratio: {
-            x: 2.3,
-            y: 1.8,
+            x: 2.2,
+            y: 1.7,
             z: 1,
           },
           plot_bgcolor: "#e5ecf6",
@@ -269,19 +273,19 @@ export default {
           bgcolor: "#e5ecf6", // 设置背景颜色
           camera: {
             up: {
-              x: 0.1404902084609593,
-              y: 0.21761427477626,
-              z: 0.9658708654577998,
+              x: 0.200292643688136,
+              y: 0.2488259353493132,
+              z: 0.947612004346693,
             },
             center: {
-              x: -0.1006727339672774,
-              y: 0.0754471798006855,
-              z: 0.005741722270889481,
+              x: -0.052807476121180814,
+              y: 0.02451796399554085,
+              z: -0.022911006648570736,
             },
             eye: {
-              x: -2.10865062403837,
-              y: -2.6322931505097884,
-              z: 0.9078749284640724,
+              x: -2.126379643342493,
+              y: -2.551422475965373,
+              z: 1.0917667684145647,
             },
             projection: {
               type: "orthographic",
@@ -372,19 +376,19 @@ export default {
       Plotly.relayout(`plotly-3d-chart-` + this.index, {
         "scene.camera": {
           up: {
-            x: 0,
-            y: 0,
-            z: 1,
+            x: 0.200292643688136,
+            y: 0.2488259353493132,
+            z: 0.947612004346693,
           },
           center: {
-            x: 0,
-            y: 0,
-            z: 0,
+            x: -0.052807476121180814,
+            y: 0.02451796399554085,
+            z: -0.022911006648570736,
           },
           eye: {
-            x: -1.9411806339437676,
-            y: -1.0688695891896567,
-            z: 0.47888991188707036,
+            x: -2.126379643342493,
+            y: -2.551422475965373,
+            z: 1.0917667684145647,
           },
           projection: {
             type: "orthographic",
@@ -392,7 +396,7 @@ export default {
         },
         "scene.aspectratio": {
           x: 2.2,
-          y: 1.8,
+          y: 1.7,
           z: 1,
         },
       });

+ 2 - 2
src/views/performance/components/chartsCom/BarChart.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2024-09-11 14:30:17
- * @LastEditTime: 2025-03-17 14:25:46
+ * @LastEditTime: 2025-03-21 14:20:42
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/chartsCom/BarChart.vue
@@ -108,7 +108,7 @@ export default {
     },
     // 绘制图表
     drawChart() {
-      if (this.chartData.data.length === 0) return;
+      if (this.chartData.data && this.chartData.data.length === 0) return;
       const chartDataset = this.chartData.data[0];
       const trace = {
         x: chartDataset.xData, // 横坐标数据

+ 16 - 16
src/views/performance/components/chartsCom/ColorbarInitTwoDmarkersChart.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-03-14 10:30:00
- * @LastEditTime: 2025-03-20 14:06:22
+ * @LastEditTime: 2025-03-21 14:55:21
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/chartsCom/colorbarInitTwoDmarkersChart.vue
@@ -42,7 +42,6 @@
             ></span
           ></el-option>
         </el-select>
-        <span style="margin-left: 10px">自定义颜色</span>
       </div>
       <!-- 图表类型切换按钮 -->
       <!-- <div>
@@ -51,21 +50,22 @@
         >
         <el-button size="small" @click="setChartType('line')">折线图</el-button>
       </div> -->
+      <!-- 点大小控制 -->
+      <div style="display: flex; align-items: center">
+        <!-- <span style="margin-right: 10px">点大小</span> -->
+        <el-slider
+          v-model="pointSize"
+          :min="2"
+          :max="15"
+          :step="1"
+          label="点的大小"
+          show-stops
+          style="width: 150px"
+          @change="updateChartColor"
+        ></el-slider>
+      </div>
     </div>
-    <!-- 点大小控制 -->
-    <div style="display: flex; align-items: center">
-      <!-- <span style="margin-right: 10px">点大小</span> -->
-      <el-slider
-        v-model="pointSize"
-        :min="2"
-        :max="15"
-        :step="1"
-        label="点的大小"
-        show-stops
-        style="width: 150px"
-        @change="updateChartColor"
-      ></el-slider>
-    </div>
+
     <div
       v-loading="loading"
       :ref="'plotlyChart-' + index"

+ 87 - 93
src/views/performance/components/chartsCom/Time3DChart.vue

@@ -28,20 +28,21 @@
           </el-option>
         </el-select>
       </div>
+      <!-- 点大小控制 -->
+      <div style="display: flex; align-items: center">
+        <el-slider
+          v-model="pointSize"
+          :min="1"
+          :max="15"
+          :step="1"
+          label="点的大小"
+          show-stops
+          style="width: 150px"
+          @change="updateChartColor"
+        ></el-slider>
+      </div>
     </div>
-    <!-- 点大小控制 -->
-    <div style="display: flex; align-items: center">
-      <el-slider
-        v-model="pointSize"
-        :min="1"
-        :max="15"
-        :step="1"
-        label="点的大小"
-        show-stops
-        style="width: 150px"
-        @change="updateChartColor"
-      ></el-slider>
-    </div>
+
     <div
       v-loading="loading"
       :id="`plotly-3d-chart-` + index"
@@ -204,12 +205,11 @@ export default {
 
         return trace;
       });
-
       const layout = {
         title: {
           text: this.chartData.data[0].title,
           font: {
-            size: 16, // 设置标题字体大小(默认 16)
+            size: 16,
             weight: "bold",
           },
         },
@@ -217,39 +217,37 @@ export default {
           xaxis: {
             title: {
               text: this.chartData.xaixs,
-              standoff: 100, // 调整标题与轴线之间的间距(单位:像素)
-            }, // X 轴标题
+              standoff: 100,
+            },
             gridcolor: "#fff",
             backgroundcolor: "#CFD4DC",
             showbackground: true,
-            linewidth: 2, // 轴线宽度
-            linecolor: "black", // 轴线颜色
-            ticks: "outside", // 设置刻度线在轴线外
-            tickwidth: 2,
-            //刻度线长度
+            linecolor: "black",
+            ticks: "outside",
             ticklen: 10,
             tickcolor: "black",
-            zeroline: false, // 显示 X 轴的中轴线
-            // tickangle: 60, // 设置Z轴刻度值的角度
+            zeroline: false,
+            tickangle: -10,
           },
+          // 对 Y 轴不显示默认标题,只保留 tick 标签,并适当加大 standoff 以防止标签挤在一起
           yaxis: {
             title: {
-              text: this.chartData.yaixs,
-              standoff: 20,
+              text: this.chartData.yaixs, // 隐藏默认标题
             },
+            type: "category", // 让 Y 轴按类别均匀分布
+            categoryorder: "category ascending", // 按类别字母顺序排列
             type: "date",
             tickformat: "%Y-%m",
+            dtick: "M3",
             gridcolor: "#fff",
             tickcolor: "#e5ecf6",
             backgroundcolor: "#CFD4DC",
             showbackground: true,
-            linewidth: 2, // 轴线宽度
-            linecolor: "black", // 轴线颜色
-            ticks: "outside", // 设置刻度线在轴线外
-            tickwidth: 2,
+            linecolor: "black",
+            ticks: "outside",
             tickcolor: "black",
-            zeroline: false, // 显示 X 轴的中轴线
-            // tickangle: -60, // 设置Z轴刻度值的角度
+            zeroline: false,
+            tickangle: 25,
           },
           zaxis: {
             title: {
@@ -259,73 +257,69 @@ export default {
             tickcolor: "#fff",
             backgroundcolor: "#CFD4DC",
             showbackground: true,
-            linewidth: 2, // 轴线宽度
-            linecolor: "black", // 轴线颜色
-            ticks: "outside", // 设置刻度线在轴线外
-            tickwidth: 2,
+            linecolor: "black",
+            ticks: "outside",
             tickcolor: "black",
-            zeroline: false, // 显示 X 轴的中轴线
-            // tickangle: -70, // 设置Z轴刻度值的角度
+            zeroline: false,
+            tickangle: -90,
           },
-          bgcolor: "#e5ecf6", // 设置背景颜色
+          bgcolor: "#e5ecf6",
           aspectratio: {
-            x: 2.3,
-            y: 1.8,
+            x: 2.2,
+            y: 1.7,
             z: 1,
           },
-          aspectmode: "manual", // ✅ 让 XYZ 轴比例不同
+          aspectmode: "manual",
           gridcolor: "#fff",
-          camera:
-            // {
-            //   up: {
-            //     x: 0.1844786403547818,
-            //     y: 0.25799580142092143,
-            //     z: 0.9483700742336969,
-            //   },
-            //   center: {
-            //     x: -0.06295317102243307,
-            //     y: 0.028475940086919383,
-            //     z: -0.05128519057088931,
-            //   },
-            //   eye: {
-            //     x: -2.2073041701824168,
-            //     y: -2.49385665138218,
-            //     z: 1.0520163618321585,
-            //   },
-            //   projection: {
-            //     type: "orthographic",
-            //   },
-            // },
-            {
-              up: {
-                x: 0.1404902084609593,
-                y: 0.21761427477626,
-                z: 0.9658708654577998,
-              },
-              center: {
-                x: -0.1006727339672774,
-                y: 0.0754471798006855,
-                z: 0.005741722270889481,
-              },
-              eye: {
-                x: -2.10865062403837,
-                y: -2.6322931505097884,
-                z: 0.9078749284640724,
-              },
-              projection: {
-                type: "orthographic",
-              },
+          camera: {
+            up: {
+              x: 0.200292643688136,
+              y: 0.2488259353493132,
+              z: 0.947612004346693,
             },
+            center: {
+              x: -0.052807476121180814,
+              y: 0.02451796399554085,
+              z: -0.022911006648570736,
+            },
+            eye: {
+              x: -2.126379643342493,
+              y: -2.551422475965373,
+              z: 1.0917667684145647,
+            },
+            projection: {
+              type: "orthographic",
+            },
+          },
+          // 添加 annotation 模拟 Y 轴标题
+          // annotations: [
+          //   {
+          //     x: -0.15, // 让标题靠左
+          //     y: 1, // 让标题在 Y 轴顶部
+          //     xref: "paper",
+          //     yref: "paper",
+          //     text: this.chartData.xaixs, // Y 轴标题
+          //     showarrow: false,
+          //     textangle: 90, // 旋转 90°
+          //     font: {
+          //       size: 16,
+          //       color: "black",
+          //     },
+          //     xanchor: "right",
+          //     yanchor: "top", // 避免重叠
+          //   },
+          // ],
         },
         margin: { t: 50, b: 50, l: 50, r: 50 },
         staticPlot: false,
         showlegend: true,
         legend: {
           marker: {
-            size: 10, // 图例中点的大小
+            size: 10,
           },
         },
       };
+
       const config = {
         modeBarButtonsToAdd: [
           {
@@ -384,19 +378,19 @@ export default {
       Plotly.relayout(`plotly-3d-chart-` + this.index, {
         "scene.camera": {
           up: {
-            x: 0,
-            y: 0,
-            z: 1,
+            x: 0.200292643688136,
+            y: 0.2488259353493132,
+            z: 0.947612004346693,
           },
           center: {
-            x: 0,
-            y: 0,
-            z: 0,
+            x: -0.052807476121180814,
+            y: 0.02451796399554085,
+            z: -0.022911006648570736,
           },
           eye: {
-            x: -1.9411806339437676,
-            y: -1.0688695891896567,
-            z: 0.47888991188707036,
+            x: -2.126379643342493,
+            y: -2.551422475965373,
+            z: 1.0917667684145647,
           },
           projection: {
             type: "orthographic",
@@ -404,7 +398,7 @@ export default {
         },
         "scene.aspectratio": {
           x: 2.2,
-          y: 1.8,
+          y: 1.7,
           z: 1,
         },
       });

+ 15 - 15
src/views/performance/components/chartsCom/TwoDMarkersChart.vue

@@ -27,7 +27,20 @@
             ></span
           ></el-option>
         </el-select>
-        <span style="margin-left: 10px">自定义颜色</span>
+      </div>
+      <!-- 点大小控制 -->
+      <div style="display: flex; align-items: center">
+        <!-- <span style="margin-right: 10px">点大小</span> -->
+        <el-slider
+          v-model="pointSize"
+          :min="1"
+          :max="15"
+          :step="1"
+          label="点的大小"
+          show-stops
+          style="width: 150px"
+          @change="updateChartColor"
+        ></el-slider>
       </div>
       <!-- 图表类型切换按钮 -->
       <!-- <div>
@@ -37,20 +50,7 @@
         <el-button size="small" @click="setChartType('line')">折线图</el-button>
       </div> -->
     </div>
-    <!-- 点大小控制 -->
-    <div style="display: flex; align-items: center">
-      <!-- <span style="margin-right: 10px">点大小</span> -->
-      <el-slider
-        v-model="pointSize"
-        :min="1"
-        :max="15"
-        :step="1"
-        label="点的大小"
-        show-stops
-        style="width: 150px"
-        @change="updateChartColor"
-      ></el-slider>
-    </div>
+
     <div
       v-loading="loading"
       :ref="'plotlyChart-' + index"

+ 15 - 15
src/views/performance/components/chartsCom/TwoDMarkersChart1.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2024-09-11 14:32:12
- * @LastEditTime: 2025-03-20 14:35:08
+ * @LastEditTime: 2025-03-21 14:53:57
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/chartsCom/powerMarkers2DCharts.vue
@@ -39,20 +39,20 @@
             </el-option>
           </el-select>
         </div>
-      </div>
-      <!-- 点大小控制 -->
-      <div style="display: flex; align-items: center">
-        <!-- <span style="margin-right: 10px">点大小</span> -->
-        <el-slider
-          v-model="pointSize"
-          :min="1"
-          :max="15"
-          :step="1"
-          label="点的大小"
-          show-stops
-          style="width: 150px"
-          @change="updateChartColor"
-        ></el-slider>
+        <!-- 点大小控制 -->
+        <div style="display: flex; align-items: center">
+          <!-- <span style="margin-right: 10px">点大小</span> -->
+          <el-slider
+            v-model="pointSize"
+            :min="1"
+            :max="15"
+            :step="1"
+            label="点的大小"
+            show-stops
+            style="width: 150px"
+            @change="updateChartColor"
+          ></el-slider>
+        </div>
       </div>
       <div
         v-loading="loading"

+ 17 - 16
src/views/performance/components/chartsCom/powerMarkers2DCharts.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2024-09-11 14:32:12
- * @LastEditTime: 2025-03-18 09:27:14
+ * @LastEditTime: 2025-03-21 14:57:48
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/chartsCom/powerMarkers2DCharts.vue
@@ -9,7 +9,7 @@
 <!-- <h1>逐月有功功率散点2D分析</h1> 
  <h1>偏航控制策略异常检测 2D</h1>  目前没找到这个分析模型-->
 <template>
-  <div style="min-height: 600px">
+  <div style="min-height: 700px">
     <!-- 2D散点图 -->
     <template>
       <div style="display: flex; align-items: center; margin-top: 20px">
@@ -39,21 +39,22 @@
             </el-option>
           </el-select>
         </div>
+        <!-- 点大小控制 -->
+        <div style="display: flex; align-items: center">
+          <!-- <span style="margin-right: 10px">点大小</span> -->
+          <el-slider
+            v-model="pointSize"
+            :min="1"
+            :max="15"
+            :step="1"
+            label="点的大小"
+            show-stops
+            style="width: 150px"
+            @change="updateChartColor"
+          ></el-slider>
+        </div>
       </div>
-      <!-- 点大小控制 -->
-      <div style="display: flex; align-items: center">
-        <!-- <span style="margin-right: 10px">点大小</span> -->
-        <el-slider
-          v-model="pointSize"
-          :min="1"
-          :max="15"
-          :step="1"
-          label="点的大小"
-          show-stops
-          style="width: 150px"
-          @change="updateChartColor"
-        ></el-slider>
-      </div>
+
       <div
         v-loading="loading"
         :ref="`plotlyChart-${index}`"