各环境区分配置地图区分

.env.demo

@@ -1,8 +1,8 @@
 ###
  # @Author: your name
  # @Date: 2025-07-17 15:36:25
- # @LastEditTime: 2025-07-30 10:03:03
- # @LastEditors: milo-MacBook-Pro.local
+ # @LastEditTime: 2025-07-30 10:14:45
+ # @LastEditors: bogon
  # @Description: In User Settings Edit
  # @FilePath: /performance-test/.env.demo
 ### 
@@ -14,29 +14,29 @@ VUE_APP_ISSHOWHD='default'
 
 VUE_APP_TITLE='机组功率曲线异常检测数据分析系统'
 #外网
-# VUE_APP_MAPVIEW=http://106.120.102.238:18998/tiles/{z}/{x}/{y}.png
-VUE_APP_MAPVIEW=/tiles/{z}/{x}/{y}.png
-VUE_APP_MAP=http://106.120.102.238:18998
-VUE_APP_UPLOAD="http://106.120.102.238:18998/api/energy-manage-service/api/check/upload"
-VUE_APP_APIPROXY='http://106.120.102.238:18998/api'
-VUE_APP_WZLAPIPROXY='http://106.120.102.238:18998/transDataWeb'
-VUE_APP_ETLAPIPROXY='http://106.120.102.238:18998/transDataWeb'
-VUE_APP_AnalysisMultiAPIPROXY='http://106.120.102.238:18998/AnalysisMulti'
-#自定义算法文佳 目前无法使用，可能是服务未启动
-VUE_APP_sAlgorithmAPIPROXY='http://106.120.102.238:18998/sAlgorithm'
-VUE_APP_databaseApiAPIPROXY='http://106.120.102.238:18998/databaseApi'
-VUE_APP_downLoadChartAPIPROXY='http://106.120.102.238:18998/downLoadChart'
+# # VUE_APP_MAPVIEW=http://106.120.102.238:18998/tiles/{z}/{x}/{y}.png
+# VUE_APP_MAPVIEW=/tiles/{z}/{x}/{y}.png
+# VUE_APP_MAP=http://106.120.102.238:18998
+# VUE_APP_UPLOAD="http://106.120.102.238:18998/api/energy-manage-service/api/check/upload"
+# VUE_APP_APIPROXY='http://106.120.102.238:18998/api'
+# VUE_APP_WZLAPIPROXY='http://106.120.102.238:18998/transDataWeb'
+# VUE_APP_ETLAPIPROXY='http://106.120.102.238:18998/transDataWeb'
+# VUE_APP_AnalysisMultiAPIPROXY='http://106.120.102.238:18998/AnalysisMulti'
+# #自定义算法文佳 目前无法使用，可能是服务未启动
+# VUE_APP_sAlgorithmAPIPROXY='http://106.120.102.238:18998/sAlgorithm'
+# VUE_APP_databaseApiAPIPROXY='http://106.120.102.238:18998/databaseApi'
+# VUE_APP_downLoadChartAPIPROXY='http://106.120.102.238:18998/downLoadChart'
 
 #内网
-# VUE_APP_UPLOAD="http://192.168.50.235/energy-manage-service/api/check/upload"
-# VUE_APP_MAPVIEW=/tiles/{z}/{x}/{y}.png
-# VUE_APP_MAP=http://192.168.50.235:8998
-# # VUE_APP_MAPVIEW=http://192.168.50.235/tiles/{z}/{x}/{y}.png
-# VUE_APP_APIPROXY='http://192.168.50.235:16600'
-# VUE_APP_WZLAPIPROXY='http://192.168.50.235:8998/transDataWeb'
-# VUE_APP_ETLAPIPROXY='http://192.168.50.235:8998/transDataWeb'
-# VUE_APP_AnalysisMultiAPIPROXY='http://192.168.50.235:8998/AnalysisMulti'
-# # #自定义算法文佳 目前无法使用，可能是服务未启动
-# VUE_APP_sAlgorithmAPIPROXY='http://192.168.50.235:8998/sAlgorithm'
-# VUE_APP_databaseApiAPIPROXY='http://192.168.50.234:3002'
-# VUE_APP_downLoadChartAPIPROXY='http://192.168.50.235:8999/downLoadChart'
+VUE_APP_UPLOAD="http://192.168.50.235/energy-manage-service/api/check/upload"
+VUE_APP_MAPVIEW=/tiles/{z}/{x}/{y}.png
+VUE_APP_MAP=http://192.168.50.235:8998
+# VUE_APP_MAPVIEW=http://192.168.50.235/tiles/{z}/{x}/{y}.png
+VUE_APP_APIPROXY='http://192.168.50.235:16600'
+VUE_APP_WZLAPIPROXY='http://192.168.50.235:8998/transDataWeb'
+VUE_APP_ETLAPIPROXY='http://192.168.50.235:8998/transDataWeb'
+VUE_APP_AnalysisMultiAPIPROXY='http://192.168.50.235:8998/AnalysisMulti'
+# #自定义算法文佳 目前无法使用，可能是服务未启动
+VUE_APP_sAlgorithmAPIPROXY='http://192.168.50.235:8998/sAlgorithm'
+VUE_APP_databaseApiAPIPROXY='http://192.168.50.234:3002'
+VUE_APP_downLoadChartAPIPROXY='http://192.168.50.235:8999/downLoadChart'

src/views/overview/components/fault_all/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-01-13 13:56:55
- * @LastEditTime: 2025-07-25 15:28:04
+ * @LastEditTime: 2025-08-01 09:54:06
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/overview/components/fault_all/index.vue
@@ -57,7 +57,7 @@
           :key="'Time3DChart'"
           :index="`${new Date().getTime()}` + 'fen'"
           :ref="'Time3DChart'"
-          :fileAddr="item?.fileAddr"
+          :chartData="zongFaultCsvData[0]"
         >
         </Time3DBarChart>
         <template v-for="(itemCsv, indCsv) in zongFaultCsvData">

src/views/overview/components/min_pitch1/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-07-24 17:07:30
- * @LastEditTime: 2025-07-29 09:44:57
+ * @LastEditTime: 2025-08-01 09:20:12
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/overview/components/min_pitch1/index.vue
@@ -29,7 +29,7 @@
           </div>
         </template>
         <div style="font-size: 12px; margin-top: 10px">
-          <!-- 风速均值分析是统计某一时间段内的平均风速，以反映风资源整体水平。风速均值是衡量风电场风资源潜力的重要指标。 -->
+          变桨频次明显高于其他机组的机组需关注其变桨轴承磨损情况及变桨轴承动作情况
         </div>
       </el-alert>
 

src/views/overview/components/min_pitch2/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-07-24 17:07:43
- * @LastEditTime: 2025-07-29 14:28:17
+ * @LastEditTime: 2025-08-01 09:20:40
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/overview/components/min_pitch2/index.vue
@@ -31,11 +31,7 @@
           </div>
         </template>
         <div style="font-size: 12px; margin-top: 10px">
-          <!-- 大部件温度分析在风电机组的运维和性能管理中扮演着极为关键的角色。以下是温度分析的几个重要作用： -->
-        </div>
-        <div style="font-size: 12px; margin-top: 10px">
-          <!-- 1.
-          温度是预示机械和电气故障的早期指标之一。通过监测关键部件如齿轮箱、发电机、轴承的温度，可以及时发现异常状况。这种早期检测允许采取预防性措施，从而避免成本高昂的维修和长时间的停机。 -->
+          变桨角度差异较高机组，需关注其桨叶动作情况，变桨时是否存在卡滞、振动，变桨电机编码器是否存在松动等异常
         </div>
       </el-alert>
       <div

src/views/overview/components/min_pitch3/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-07-24 17:07:55
- * @LastEditTime: 2025-07-29 09:44:49
+ * @LastEditTime: 2025-08-01 09:21:07
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/overview/components/min_pitch3/index.vue
@@ -28,8 +28,7 @@
           </div>
         </template>
         <div style="font-size: 12px; margin-top: 10px">
-          <!-- 此项分析是基于叶尖速比和三次根号下风能利用系数的比值，是机组除去风速影响以外的本身运行特性的展示，对于判断如何优化机组至关重要：
-          该分析也是监测风机性能的重要手段。如果该值出现异常趋势，可能预示着设备损耗、叶片故障等异常状态。通过分析运行数据，可以调整风机设计和操作策略，以保持理想的运行状态，从而优化整体性能和延长风机的使用寿命。 -->
+          变桨电机温升高、电流大的电机，需关注电机散热、电机振动、异响等异常，变桨时是否振动、卡滞、异响等异常
         </div>
       </el-alert>
 

src/views/overview/components/production_indicator1/index.vue

@@ -21,7 +21,10 @@
           </div>
         </template>
         <div style="font-size: 12px; margin-top: 10px">
-          <!-- 风向玫瑰图是一种表示某地不同风向出现频率分布的图表。 -->
+          依据公司生产运行指标评价管理办法规定计算对应运行指标。
+          <div style="font-size: 12px; margin-top: 10px">
+            对风场及机组各项运行指标进行统计，包括应发电量、实发电量、风机能量利用率，有效风速小时数，利用小时等指标。
+          </div>
         </div>
       </el-alert>
       <div class="titleCharts">分析分图 :</div>

src/views/overview/components/production_indicator2/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-07-23 10:53:25
- * @LastEditTime: 2025-07-29 09:46:07
+ * @LastEditTime: 2025-08-01 09:28:49
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/overview/components/production_indicator2/index.vue
@@ -30,7 +30,10 @@
           </div>
         </template>
         <div style="font-size: 12px; margin-top: 10px">
-          <!-- 对各个机组整体状态评估的发电量和故障时长进行统计 -->
+          依据公司生产运行指标评价管理办法规定计算对应运行指标。
+          <div style="font-size: 12px; margin-top: 10px">
+            对风场及机组各项运行指标进行统计，包括应发电量、实发电量、风机能量利用率，有效风速小时数，利用小时等指标。
+          </div>
         </div>
       </el-alert>
       <div class="chartsBox" v-if="fenFaultCsvData.length > 0">

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-06-23 17:11:03
+ * @LastEditTime: 2025-08-01 09:29:34
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/overview/components/production_indicator_all/index.vue
@@ -31,6 +31,9 @@
         </template>
         <div style="font-size: 12px; margin-top: 10px">
           依据公司生产运行指标评价管理办法规定计算对应运行指标。
+          <div style="font-size: 12px; margin-top: 10px">
+            对风场及机组各项运行指标进行统计，包括应发电量、实发电量、风机能量利用率，有效风速小时数，利用小时等指标。
+          </div>
         </div>
       </el-alert>
       <div v-if="productionIndicatorCsvData.length > 0">

src/views/overview/components/production_indicator_unit/index.vue

@@ -1,8 +1,8 @@
 <!--
  * @Author: your name
  * @Date: 2025-01-13 13:44:56
- * @LastEditTime: 2025-07-16 15:23:29
- * @LastEditors: milo-MacBook-Pro.local
+ * @LastEditTime: 2025-08-01 09:29:21
+ * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/overview/components/production_indicator_unit/index.vue
 -->
@@ -28,7 +28,10 @@
           </div>
         </template>
         <div style="font-size: 12px; margin-top: 10px">
-          对风场及机组各项运行指标进行统计，包括应发电量、实发电量、风机能量利用率，有效风速小时数，利用小时等指标。
+          依据公司生产运行指标评价管理办法规定计算对应运行指标。
+          <div style="font-size: 12px; margin-top: 10px">
+            对风场及机组各项运行指标进行统计，包括应发电量、实发电量、风机能量利用率，有效风速小时数，利用小时等指标。
+          </div>
         </div>
       </el-alert>
       <div v-if="productionIndicatorCsvData.length > 0" class="chartsBox">

src/views/overview/components/temperature_large_components_hig/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-01-21 09:58:32
- * @LastEditTime: 2025-06-06 16:44:37
+ * @LastEditTime: 2025-07-31 12:18:08
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/overview/components/temperature_large_components_hig/index.vue
@@ -61,7 +61,6 @@
         >
           分析总图 :
         </div>
-
         <lineAndChildLine
           v-if="item.batchCode && !item.fieldEngineCode"
           :setUpImgData="setUpImgData"

src/views/overview/components/yaw_error1/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-07-24 17:11:36
- * @LastEditTime: 2025-07-29 16:46:29
+ * @LastEditTime: 2025-08-01 09:23:02
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/overview/components/yaw_error1/index.vue
@@ -29,7 +29,7 @@
           </div>
         </template>
         <div style="font-size: 12px; margin-top: 10px">
-          <!-- 大部件温度分析在风电机组的运维和性能管理中扮演着极为关键的角色。以下是温度分析的几个重要作用： -->
+          月度偏航频次过多机组需关注偏航磨损情况，偏航速率过低机组需关注机组的偏航制动、电机抱闸、偏航余压是否异常；偏航速率过大机组需关注偏航余压是否异常
         </div>
       </el-alert>
       <VirtualList

src/views/overview/components/yaw_error2/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-07-24 17:12:39
- * @LastEditTime: 2025-07-29 14:21:31
+ * @LastEditTime: 2025-08-01 09:23:23
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/overview/components/yaw_error2/index.vue
@@ -28,11 +28,7 @@
           </div>
         </template>
         <div style="font-size: 12px; margin-top: 10px">
-          <!-- 大部件温度分析在风电机组的运维和性能管理中扮演着极为关键的角色。以下是温度分析的几个重要作用： -->
-        </div>
-        <div style="font-size: 12px; margin-top: 10px">
-          <!-- 1.
-          温度是预示机械和电气故障的早期指标之一。通过监测关键部件如齿轮箱、发电机、轴承的温度，可以及时发现异常状况。这种早期检测允许采取预防性措施，从而避免成本高昂的维修和长时间的停机。 -->
+          偏航时间占比过高的机组需关注机组偏航磨损情况，及异常动作原因
         </div>
       </el-alert>
       <div

src/views/overview/components/yaw_error3/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-07-24 17:12:55
- * @LastEditTime: 2025-07-25 09:08:54
+ * @LastEditTime: 2025-08-01 09:24:56
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/overview/components/yaw_error3/index.vue
@@ -28,7 +28,16 @@
           </div>
         </template>
         <div style="font-size: 12px; margin-top: 10px">
-          <!-- 大部件温度分析在风电机组的运维和性能管理中扮演着极为关键的角色。以下是温度分析的几个重要作用： -->
+          a.偏航要求动作，角度无变化
+          <div style="font-size: 12px; margin-top: 10px">
+            偏航控制及电气回路是否正常，偏航制动系统、电机抱闸是否异常；偏航传感器检测是否存在异常
+          </div>
+        </div>
+        <div style="font-size: 12px; margin-top: 10px">
+          b.偏航未要求动作，角度有变化
+          <div style="font-size: 12px; margin-top: 10px">
+            偏航动作或偏航制动是否异常，是否存在滑移；偏航传感器检测是否存在异常
+          </div>
         </div>
       </el-alert>
       <VirtualList

src/views/overview/components/yaw_error4/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-07-24 17:13:23
- * @LastEditTime: 2025-07-29 09:45:41
+ * @LastEditTime: 2025-08-01 09:25:38
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/overview/components/yaw_error4/index.vue
@@ -29,7 +29,7 @@
           </div>
         </template>
         <div style="font-size: 12px; margin-top: 10px">
-          <!-- 在风力发电机组中，额定功率是指风机在特定设计条件下能够安全、有效地输出的最大功率。这个值是基于风机设计和电气系统的能力确定的，通常是在一定的风速下测定，称为额定风速。达到额定风速时，风机可以产生最大的功率输出，而不会超过其机械和电气组件的设计极限。 -->
+          通过分析偏航系统残余压力值，可评估机组偏航余压是否满足设要求，既避免因余压不足导致偏航不稳，也防止余压过大增加偏航阻力与能耗，最终导致结构受损。
         </div>
       </el-alert>
       <div class="titleCharts">分析总图 :</div>

src/views/performance/components/chartsCom/LineAndScatter.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-07-24 17:30:10
- * @LastEditTime: 2025-07-29 14:41:53
+ * @LastEditTime: 2025-07-30 17:02:41
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/chartsCom/LineAndScatter.vue
@@ -186,7 +186,10 @@ export default {
             `${this.chartData.yaixs}:` +
             "%{y} <br>",
         };
-
+        // ✅ 设置 y2 绑定逻辑
+        if (index === 3) {
+          chartConfig.yaxis = "y2";
+        }
         if (this.chartType === "line") {
           //   chartConfig.mode = "lines"; // 如果是折线图
           chartConfig.fill = "none";

src/views/performance/components/chartsCom/Time3DBarChart.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-07-24 10:33:42
- * @LastEditTime: 2025-07-24 16:56:39
+ * @LastEditTime: 2025-08-01 13:49:41
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/chartsCom/Time3DBarChart.vue
@@ -68,14 +68,14 @@ import { colorSchemes } from "@/views/overview/js/colors";
 import { mapState } from "vuex";
 export default {
   props: {
-    fileAddr: {
-      default: "",
-      type: String,
-    },
     index: {
       default: "",
       type: String,
     },
+    chartData: {
+      default: () => {},
+      type: Object,
+    },
     setUpImgData: {
       default: () => [],
       type: Array,
@@ -85,7 +85,7 @@ export default {
   data() {
     return {
       color1: [], // 默认颜色
-      chartData: {},
+      // chartData: {},
       chartType: "scatter", // 当前图表类型（默认是散点图）
       colorSchemes: [...colorSchemes],
       pointSize: 1, // 默认点大小
@@ -115,65 +115,23 @@ export default {
       },
       deep: true,
     },
+    chartData: {
+      handler(newType) {
+        console.log(newType, "newType");
+        this.renderChart();
+      },
+      deep: true,
+    },
   },
   async mounted() {
     this.$nextTick(() => {
-      this.getData();
+      // this.getData();
       this.color1 = this.colorSchemes[0].colors;
+      this.renderChart();
     });
   },
 
   methods: {
-    async getData() {
-      if (this.fileAddr !== "") {
-        try {
-          this.loading = true;
-          this.cancelToken = axios.CancelToken.source();
-          const resultChartsData = await axios.get(this.fileAddr, {
-            cancelToken: this.cancelToken.token,
-          });
-          if (typeof resultChartsData.data === "string") {
-            let dataString = resultChartsData.data;
-            dataString = dataString.trim(); // 去除前后空格
-            dataString = dataString.replace(/Infinity/g, '"Infinity"'); // 处理无效字符
-            try {
-              const parsedData = JSON.parse(dataString);
-              this.chartData = parsedData;
-            } catch (error) {
-              console.error("JSON 解析失败:", error);
-            }
-          } else {
-            this.chartData = resultChartsData.data;
-            // this.chartData = {
-            //   xaixs: "故障代码",
-            //   yaixs: "时间",
-            //   zaixs: "出现次数",
-            //   data: [
-            //     {
-            //       xData: ["A01", "A01", "A02", "A02", "A03", "A03"],
-            //       yData: [
-            //         "2024-01-01",
-            //         "2024-02-01",
-            //         "2024-03-01",
-            //         "2024-04-01",
-            //         "2024-05-01",
-            //         "2024-06-01",
-            //       ],
-            //       zData: [100, 120, 90, 150, 110, 130],
-            //     },
-            //   ],
-            // };
-          }
-          this.renderChart();
-          this.isError = false;
-          this.loading = false;
-        } catch (error) {
-          this.isError = true;
-          this.loading = false;
-        }
-      }
-    },
-    // 格式化日期为 YY-MM 格式
     formatDate(dateString) {
       const date = new Date(dateString);
       const year = date.getFullYear(); // 获取年份后两位
@@ -181,83 +139,58 @@ export default {
       return `${year}-${month}`;
     },
     renderChart() {
-      // 提取 Y 轴数据中的月份，并去重
-      const uniqueMonths = Array.from(
-        new Set(
-          this.chartData.data[0].yData.map((date) => this.formatDate(date))
-        )
-      );
+      const colorMap = {}; // 记录每个 fault_detail 分配的颜色
+      const colorPalette = [...colorSchemes[0].colors];
+
+      let colorIndex = 0;
+      const traces = [];
+
       if (!this.color1) {
         this.color1 = colorSchemes[0].colors;
       }
-      // 设置每个月份对应的颜色
-      const monthColors = this.color1;
-      // 为每个月份生成独立的 trace，每个 trace 对应一个月份
-      const barTraces = [];
-      const borderTraces = [];
 
-      uniqueMonths.forEach((month, monthIndex) => {
-        const monthData = this.chartData.data[0].yData
-          .map((date, index) => (this.formatDate(date) === month ? index : -1))
-          .filter((index) => index !== -1);
+      this.chartData.data.forEach((item) => {
+        const fault = item.fault_detail;
+        const yVal = item.fault_time_sum;
+        const zVal = item.count;
 
-        const x = [],
-          y = [],
-          z = [];
-        const bx = [],
-          by = [],
-          bz = [];
-
-        monthData.forEach((index) => {
-          const xVal = this.chartData.data[0].xData[index];
-          const yVal = this.chartData.data[0].yData[index];
-          const zVal = this.chartData.data[0].zData[index];
-
-          // 数据柱体
-          x.push(xVal, xVal, null);
-          y.push(yVal, yVal, null);
-          z.push(0, zVal, null);
-        });
+        // 分配唯一颜色
+        if (!colorMap[fault]) {
+          colorMap[fault] = colorPalette[colorIndex % colorPalette.length];
+          colorIndex++;
+        }
 
-        // 柱体 trace
-        barTraces.push({
+        const trace = {
           type: "scatter3d",
           mode: "lines",
-          x,
-          y,
-          z,
+          x: [fault, fault, null],
+          y: [yVal, yVal, null],
+          z: [0, zVal, null],
           line: {
-            color: monthColors[monthIndex],
+            color: colorMap[fault],
             width: 16,
           },
-          name: month,
-          legendgroup: `month-${monthIndex}`,
+          name: fault,
           hovertemplate:
-            `${this.chartData.xaixs}: %{x}<br>` +
-            `${this.chartData.yaixs}: %{y}<br>` +
-            `${this.chartData.zaixs}: %{z}<extra></extra>`,
-        });
-      });
+            `故障代码: %{x}<br>` +
+            `累计时间: %{y}<br>` +
+            `出现次数: %{z}<extra></extra>`,
+          showlegend: true,
+        };
 
-      // 合并 trace 并绘图
-      const traces = [...borderTraces, ...barTraces]; // 边框放前面绘制
+        traces.push(trace);
+      });
 
       const layout = {
         title: {
-          text: this.chartData.data[0].title,
-          font: {
-            size: 16,
-            weight: "bold",
-          },
+          text: "故障代码出现次数",
+          font: { size: 16, weight: "bold" },
         },
         scene: {
           xaxis: {
-            showgrid: true, // 显示网格
-            zeroline: false, // 不显示零线
-            title: {
-              text: this.chartData.xaixs,
-              standoff: 100,
-            },
+            title: { text: "故障代码", standoff: 100 },
+            showgrid: true,
+            zeroline: false,
             gridcolor: "#fff",
             backgroundcolor: "#e0e7f1",
             showbackground: true,
@@ -265,56 +198,33 @@ export default {
             ticks: "outside",
             ticklen: 10,
             tickcolor: "black",
-            zeroline: false,
-            tickangle: -10,
-            dtick: this.chartData.xaixs === "风速（m/s）" ? 1 : undefined,
+            // tickangle: -10,
           },
-          // 对 Y 轴不显示默认标题，只保留 tick 标签，并适当加大 standoff 以防止标签挤在一起
           yaxis: {
-            title: {
-              text: this.chartData.yaixs, // 隐藏默认标题
-            },
-            showgrid: true, // 显示网格
-            zeroline: false, // 不显示零线
-            type: "category", // 让 Y 轴按类别均匀分布
-            categoryorder: "category ascending", // 按类别字母顺序排列
-            type: "date",
-            tickformat: "%Y-%m",
-            // dtick: "M3",//显式设置每3个月一个刻度
+            title: { text: "累计时间" },
+            showgrid: true,
+            zeroline: false,
             gridcolor: "#fff",
-            tickcolor: "#e5ecf6",
             backgroundcolor: "#e0e7f1",
             showbackground: true,
             linecolor: "black",
             ticks: "outside",
-            tickcolor: "black",
-            zeroline: false,
             tickangle: 25,
-            nticks: 3,
           },
           zaxis: {
-            title: {
-              text: this.chartData.zaixs,
-            },
+            title: { text: "出现次数" },
+            showgrid: true,
+            zeroline: false,
             gridcolor: "#fff",
-            tickcolor: "#fff",
             backgroundcolor: "#e0e7f1",
             showbackground: true,
             linecolor: "black",
             ticks: "outside",
-            tickcolor: "black",
-            zeroline: false,
             tickangle: -90,
-            nticks: 3,
           },
           bgcolor: "#e5ecf6",
-          aspectratio: {
-            x: 2.2,
-            y: 1.7,
-            z: 1,
-          },
+          aspectratio: { x: 2.2, y: 1.7, z: 1 },
           aspectmode: "manual",
-          gridcolor: "#fff",
           camera: {
             up: {
               x: 0.200292643688136,
@@ -340,20 +250,21 @@ export default {
         staticPlot: false,
         showlegend: true,
         legend: {
-          itemsizing: "constant", // ✅ 统一图例 marker 大小
+          x: 1.02,
+          y: 1,
+          marker: { size: 10 },
           font: {
-            size: 12,
-          },
-          marker: {
             size: 10,
           },
+          itemsizing: "constant",
+          itemwidth: 2, // 设置图例项的宽度
         },
       };
 
       const config = {
         modeBarButtonsToAdd: [
           {
-            name: "还原", // 自定义按钮
+            name: "还原",
             icon: Plotly.Icons.home,
             click: () => this.resetCamera(),
           },
@@ -363,46 +274,52 @@ export default {
           "resetCameraLastSave3d",
           "resetCameraDefault3d",
           "resetCameraLastSave",
-          "sendDataToCloud",
-          "zoom2d", // 缩放按钮
+          "zoom2d",
           "zoom3d",
           "plotlylogo2D",
           "plotlylogo3D",
         ],
         responsive: true,
-        displaylogo: false, // 可选：隐藏 Plotly logo
+        displaylogo: false,
       };
-      // 获取x轴和y轴的设置
+
+      // 设置轴范围和间距（如果配置了）
       const getChartSetUp = (axisTitle) => {
         return this.setUpImgData.find((item) => item.text.includes(axisTitle));
       };
-      // 更新x轴和y轴的范围与步长
-      const xChartSetUp = getChartSetUp(layout.scene.xaxis.title);
-      if (xChartSetUp) {
-        layout.scene.xaxis.dtick = xChartSetUp.dtick;
-        layout.scene.xaxis.range = [xChartSetUp.min, xChartSetUp.max];
+
+      const xSetup = getChartSetUp(layout.scene.xaxis.title.text);
+      if (xSetup) {
+        layout.scene.xaxis.dtick = xSetup.dtick;
+        layout.scene.xaxis.range = [xSetup.min, xSetup.max];
       }
-      const yChartSetUp = getChartSetUp(layout.scene.yaxis.title);
-      if (yChartSetUp) {
-        layout.scene.yaxis.dtick = yChartSetUp.dtick;
-        layout.scene.yaxis.range = [yChartSetUp.min, yChartSetUp.max];
+
+      const ySetup = getChartSetUp(layout.scene.yaxis.title.text);
+      if (ySetup) {
+        layout.scene.yaxis.dtick = ySetup.dtick;
+        layout.scene.yaxis.range = [ySetup.min, ySetup.max];
       }
-      const zChartSetUp = getChartSetUp(layout.scene.zaxis.title);
-      if (zChartSetUp) {
-        layout.scene.zaxis.dtick = zChartSetUp.dtick;
-        layout.scene.zaxis.range = [zChartSetUp.min, zChartSetUp.max];
+
+      const zSetup = getChartSetUp(layout.scene.zaxis.title.text);
+      if (zSetup) {
+        layout.scene.zaxis.dtick = zSetup.dtick;
+        layout.scene.zaxis.range = [zSetup.min, zSetup.max];
       }
+
       Plotly.newPlot(
-        `plotly-3d-chart-` + this.index,
+        `plotly-3d-chart-${this.index}`,
         traces,
         layout,
         config
-      ).then(function (gd) {
-        // 获取工具栏按钮
+      ).then((gd) => {
         const toolbar = gd.querySelector(".modebar");
         const buttons = toolbar.querySelectorAll(".modebar-btn");
+        const legends = document.querySelectorAll(".legendtext");
 
-        // 定义一个映射对象，方便修改按钮提示
+        legends.forEach((el) => {
+          const fullText = el.textContent;
+          el.setAttribute("data-fulltext", fullText);
+        });
         const titleMap = {
           "Download plot as a png": "保存图片",
           Autoscale: "缩放",
@@ -417,21 +334,18 @@ export default {
           "Orbital rotation": "轨道式旋转",
         };
 
-        // 遍历所有按钮，修改它们的 title
-        buttons.forEach(function (button) {
-          const dataTitle = button.getAttribute("data-title");
-          // 如果标题匹配，修改属性值
+        buttons.forEach((btn) => {
+          const dataTitle = btn.getAttribute("data-title");
           if (titleMap[dataTitle]) {
-            button.setAttribute("data-title", titleMap[dataTitle]);
+            btn.setAttribute("data-title", titleMap[dataTitle]);
           }
         });
       });
-      // 监听图表的 relayout 事件，获取并输出相机视角
+
       const plotElement = document.getElementById(
-        `plotly-3d-chart-` + this.index
+        `plotly-3d-chart-${this.index}`
       );
-      plotElement.on("plotly_relayout", function (eventData) {
-        // 在每次布局变更时，打印当前相机视角
+      plotElement.on("plotly_relayout", (eventData) => {
         if (eventData["scene.camera"]) {
           console.log(
             "当前相机视角:",
@@ -441,7 +355,6 @@ export default {
         }
       });
     },
-    // 还原视角
     resetCamera() {
       Plotly.relayout(`plotly-3d-chart-` + this.index, {
         "scene.camera": {
@@ -501,4 +414,32 @@ export default {
 ::v-deep canvas {
   /* height: 400px !important; */
 }
+/* 放在你页面的样式中 */
+.legendtext {
+  max-width: 30px;
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: top;
+  position: relative;
+  cursor: pointer;
+}
+
+.legendtext:hover::after {
+  content: attr(data-fulltext);
+  position: absolute;
+  left: 100%;
+  top: 0;
+  transform: translateX(6px);
+  max-width: 300px;
+  background: rgba(0, 0, 0, 0.85);
+  color: #fff;
+  font-size: 12px;
+  padding: 4px 6px;
+  border-radius: 4px;
+  z-index: 9999;
+  white-space: normal;
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
+}
 </style>

src/views/performance/components/chartsCom/json/demo.json

@@ -0,0 +1,124 @@
+{
+  "data": [
+    {
+      "fault_detail": "报警1_SS-0 保险断开",
+      "count": 1705,
+      "fault_time_sum": 6482.059444444444
+    },
+    {
+      "fault_detail": "报警67_自动刹车调节",
+      "count": 962,
+      "fault_time_sum": 4335.826944444444
+    },
+    {
+      "fault_detail": "报警2_SS-1 急停按扭",
+      "count": 2113,
+      "fault_time_sum": 3574.1180555555557
+    },
+    {
+      "fault_detail": "报警5_SS-4 刹车存储继电器",
+      "count": 1613,
+      "fault_time_sum": 2953.8069444444445
+    },
+    {
+      "fault_detail": "报警122_NCC310 的 A260.3 模块没有连接且齿轮箱低速泵保险丝熔断",
+      "count": 734,
+      "fault_time_sum": 2896.4894444444444
+    },
+    {
+      "fault_detail": "报警26_变桨 1 轮毂驱动故障",
+      "count": 1882,
+      "fault_time_sum": 2879.655
+    },
+    {
+      "fault_detail": "报警121_NCC310 的 A260.3 模块没有连接且齿轮箱高速泵保险丝熔断",
+      "count": 723,
+      "fault_time_sum": 2860.781388888889
+    },
+    {
+      "fault_detail": "报警154_电池放电接触器故障",
+      "count": 74,
+      "fault_time_sum": 2133.616111111111
+    },
+    {
+      "fault_detail": "报警28_变桨 2 轮毂驱动故障",
+      "count": 1475,
+      "fault_time_sum": 2073.9683333333332
+    },
+    {
+      "fault_detail": "报警66_刹车泵断路器",
+      "count": 618,
+      "fault_time_sum": 1693.4519444444445
+    },
+    {
+      "fault_detail": "报警9_SS-8 看门狗",
+      "count": 1658,
+      "fault_time_sum": 1668.2158333333334
+    },
+    {
+      "fault_detail": "报警120_齿轮油温度大于 90 度",
+      "count": 612,
+      "fault_time_sum": 1593.3308333333334
+    },
+    {
+      "fault_detail": "报警132_发电机 chock 温度传感器故障",
+      "count": 557,
+      "fault_time_sum": 1561.6619444444445
+    },
+    {
+      "fault_detail": "报警30_变桨 3 轮毂驱动故障",
+      "count": 1304,
+      "fault_time_sum": 1419.68
+    },
+    {
+      "fault_detail": "报警11_SS-10 刹车位置",
+      "count": 1251,
+      "fault_time_sum": 821.9633333333334
+    },
+    {
+      "fault_detail": "报警208_NCC310 控制柜的急停按钮被按下",
+      "count": 1514,
+      "fault_time_sum": 811.055
+    },
+    {
+      "fault_detail": "报警210_塔基柜急停按钮被按下",
+      "count": 48,
+      "fault_time_sum": 575.3369444444445
+    },
+    {
+      "fault_detail": "报警368_变频器一般性故障（GT）",
+      "count": 397,
+      "fault_time_sum": 499.2808333333333
+    },
+    {
+      "fault_detail": "报警372_变频器检测电网频率低（GT）",
+      "count": 490,
+      "fault_time_sum": 371.3019444444444
+    },
+    {
+      "fault_detail": "报警370_变频器检测电网电压低（GT）",
+      "count": 465,
+      "fault_time_sum": 355.49555555555554
+    },
+    {
+      "fault_detail": "报警197_偏航通讯故障",
+      "count": 251,
+      "fault_time_sum": 339.94694444444445
+    },
+    {
+      "fault_detail": "报警209_齿轮箱侧急停按钮被按下",
+      "count": 311,
+      "fault_time_sum": 244.38611111111112
+    },
+    {
+      "fault_detail": "报警186_柜风扇反馈异常（GT 机组）",
+      "count": 274,
+      "fault_time_sum": 241.4611111111111
+    },
+    {
+      "fault_detail": "报警106_主控程序与 GH 控制器版本不匹配",
+      "count": 114,
+      "fault_time_sum": 237.275
+    }
+  ]
+}

vue.config.js

@@ -65,12 +65,7 @@ module.exports = {
       "/api": {
         target: process.env.VUE_APP_APIPROXY,
         // target: "http://192.168.5.4:16200", // 石月
-        // target: "http://192.168.50.235:16200", // 内网
         // target: "http://192.168.5.15:16200",//陈
-        // target: "http://192.168.50.235:16600", //演示环境//16600
-        // target: "http://106.120.102.238:18998/api", //外网演示环境
-        // target: "http://106.120.102.238:16700", // 外网16700  生产16600
-        // target: "http://10.96.137.5",
         changeOrigin: true,
         pathRewrite: {
           "^/api": "", // 去掉 /api 前缀
@@ -79,8 +74,6 @@ module.exports = {
       // 未知量  //振动、激光测距仪
       "/WZLapi": {
         target: process.env.VUE_APP_WZLAPIPROXY,
-        // target: "http://192.168.50.241:9001", // WZLapi 目标地址
-        // target: "http://106.120.102.238:18080/WindTransDev", // WZLapi 外网目标地址
         changeOrigin: true,
         pathRewrite: {
           "^/WZLapi": "", // 去掉 /WZLapi 前缀
@@ -88,12 +81,6 @@ module.exports = {
       },
       "/ETLapi": {
         target: process.env.VUE_APP_ETLAPIPROXY,
-        // target: "http://192.168.50.241:9001", // WZLapi 目标地址
-        // target: "http://192.168.5.11:8001", // WZLapi 目标地址
-        // target: "http://106.120.102.238:18080/ImportDataDev", //导数工具
-        // target: "http://106.120.102.238:18080/WindTransDev", //WTL外网目标地址
-        // target: "http://106.120.102.238:18998/transDataWeb", //WTL演示环境
-        // target: "http://192.168.50.235:8998/transDataWeb", //WTL演示环境
         changeOrigin: true,
         pathRewrite: {
           "^/ETLapi": "", // 去掉 /WZLapi 前缀
@@ -112,7 +99,6 @@ module.exports = {
       // 王娇娇健康评估
       "/AnalysisMulti": {
         target: process.env.VUE_APP_AnalysisMultiAPIPROXY,
-        // target: "http://106.120.102.238:28999/AnalysisMulti",
         changeOrigin: true,
         pathRewrite: {
           "^/AnalysisMulti": "",
@@ -121,10 +107,6 @@ module.exports = {
       // 数据转换亮亮
       "/transDataWeb": {
         target: process.env.VUE_APP_WZLAPIPROXY,
-        // target: "http://192.168.50.241:9000/trans_data_web",//生产
-        // target: "http://192.168.50.235/transDataWeb", //测试
-        // target: "http://106.120.102.238:18998/transDataWeb", //演示外网
-        // target: "http://192.168.50.235:8999/transDataWeb", //测试
         changeOrigin: true,
         pathRewrite: {
           "^/transDataWeb": "",
@@ -133,8 +115,6 @@ module.exports = {
       //自定义算法文佳
       "/sAlgorithm": {
         target: process.env.VUE_APP_sAlgorithmAPIPROXY,
-        // target: "http://192.168.50.235:8666", // 目标地址
-        // target: "http://106.120.102.238:58880", //这个代理会走两次代理转发
         changeOrigin: true,
         pathRewrite: {
           "^/sAlgorithm": "",
@@ -143,7 +123,6 @@ module.exports = {
       //nodejs 数据库数据
       "/databaseApi": {
         target: process.env.VUE_APP_databaseApiAPIPROXY,
-        // target: "http://192.168.50.234:3002",
         // target: "http://106.120.102.238:58880", //这个代理会走两次代理转发
         changeOrigin: true,
         pathRewrite: {