调生产效能指标

src/components/virtual_list/index.vue

@@ -1,12 +1,12 @@
 <template>
   <div
     class="virtual-list"
-    :style="{ height: list.length === 0 || list.length === 1 ? '452px' : '' }"
+    :style="{ height: list.length === 0 || list.length === 1 ? '600px' : '' }"
   >
     <div
       class="charts"
       v-if="list && list.length > 0"
-      :style="{ height: list.length === 0 || list.length === 1 ? '452px' : '' }"
+      :style="{ height: list.length === 0 || list.length === 1 ? '600px' : '' }"
     >
       <RecycleScroller
         class="scroller"

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

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-01-09 18:09:41
- * @LastEditTime: 2025-01-21 15:57:52
+ * @LastEditTime: 2025-01-23 09:21:07
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/overview/components/pitch_power/index.vue
@@ -36,7 +36,7 @@
       <VirtualList
         :list="diagramRelationsDatas"
         keyField="fieldEngineCode"
-        :itemSize="452"
+        :itemSize="600"
         v-slot="{ item, index }"
       >
         <!-- <TwoDMarkersChart
@@ -53,14 +53,14 @@
           :fileAddr="item.fileAddr"
         >
         </TwoDMarkersChart>
-        <DDrawingChart
+        <Time3DChart
           v-if="getFileTypeFromUrl(item.fileAddr) === '3D'"
-          :key="item.fieldEngineCode + 'DDrawingChart'"
+          :key="item.fieldEngineCode + 'Time3DChart'"
           :index="index + 'fen'"
-          :ref="item.fieldEngineCode + 'DDrawingChart'"
+          :ref="item.fieldEngineCode + 'Time3DChart'"
           :fileAddr="item.fileAddr"
         >
-        </DDrawingChart>
+        </Time3DChart>
       </VirtualList>
       <el-tabs value="first" v-if="isShowDescription">
         <el-tab-pane label="意见描述" name="first">
@@ -96,7 +96,7 @@ import DicCard from "@/views/overview/components/dicCard/index.vue";
 import FilterChart from "@/views/overview/components/filterChart/index.vue";
 import TwoDMarkersChart from "@/views/performance/components/chartsCom/TwoDMarkersChart.vue";
 import TinymceEditor from "@/components/Tinymce.vue";
-import DDrawingChart from "@/views/performance/components/chartsCom/3DDrawingChart.vue";
+import Time3DChart from "@/views/performance/components/chartsCom/Time3DChart.vue";
 import {
   analysisDetail,
   queryAnalysisedEngine,
@@ -109,7 +109,7 @@ export default {
     DicCard,
     FilterChart,
     TwoDMarkersChart,
-    DDrawingChart,
+    Time3DChart,
     TinymceEditor,
   },
   props: {

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

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-01-09 18:10:22
- * @LastEditTime: 2025-01-21 16:00:46
+ * @LastEditTime: 2025-01-23 09:15:09
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/overview/components/power_scatter/index.vue
@@ -35,16 +35,16 @@
       <VirtualList
         :list="diagramRelationsDatas"
         keyField="fieldEngineCode"
-        :itemSize="452"
+        :itemSize="600"
         v-slot="{ item, index }"
       >
-        <DDrawingChart
+        <Time3DChart
           :key="item.fieldEngineCode"
           :index="index + 'fen'"
           :ref="item.fieldEngineCode"
           :fileAddr="item.fileAddr"
         >
-        </DDrawingChart>
+        </Time3DChart>
       </VirtualList>
 
       <el-tabs value="first" v-if="isShowDescription">
@@ -79,7 +79,7 @@
 <script>
 import DicCard from "@/views/overview/components/dicCard/index.vue";
 import FilterChart from "@/views/overview/components/filterChart/index.vue";
-import DDrawingChart from "@/views/performance/components/chartsCom/3DDrawingChart.vue";
+import Time3DChart from "@/views/performance/components/chartsCom/Time3DChart.vue";
 import TinymceEditor from "@/components/Tinymce.vue";
 import {
   analysisDetail,
@@ -92,7 +92,7 @@ export default {
   components: {
     DicCard,
     FilterChart,
-    DDrawingChart,
+    Time3DChart,
     TinymceEditor,
   },
   props: {

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

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-01-10 09:09:17
- * @LastEditTime: 2025-01-21 16:09:43
+ * @LastEditTime: 2025-01-23 09:21:14
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/overview/components/speed_power/index.vue
@@ -35,7 +35,7 @@
       <VirtualList
         :list="generalFilesDatas"
         keyField="batchCode"
-        :itemSize="452"
+        :itemSize="600"
         v-slot="{ item, index }"
       >
         <DDrawingChart
@@ -50,7 +50,7 @@
       <VirtualList
         :list="diagramRelationsDatas"
         keyField="fieldEngineCode"
-        :itemSize="452"
+        :itemSize="600"
         v-slot="{ item, index }"
       >
         <TwoDMarkersChart
@@ -61,14 +61,14 @@
           :fileAddr="item.fileAddr"
         >
         </TwoDMarkersChart>
-        <DDrawingChart
+        <Time3DChart
           v-if="getFileTypeFromUrl(item.fileAddr) === '3D'"
-          :key="item.fieldEngineCode + 'DDrawingChart'"
+          :key="item.fieldEngineCode + 'Time3DChart'"
           :index="index + 'fen'"
-          :ref="item.fieldEngineCode + 'DDrawingChart'"
+          :ref="item.fieldEngineCode + 'Time3DChart'"
           :fileAddr="item.fileAddr"
         >
-        </DDrawingChart>
+        </Time3DChart>
       </VirtualList>
 
       <el-tabs value="first" v-if="isShowDescription">
@@ -105,6 +105,7 @@ import DicCard from "@/views/overview/components/dicCard/index.vue";
 import FilterChart from "@/views/overview/components/filterChart/index.vue";
 import DDrawingChart from "@/views/performance/components/chartsCom/3DDrawingChart.vue";
 import TinymceEditor from "@/components/Tinymce.vue";
+import Time3DChart from "@/views/performance/components/chartsCom/Time3DChart.vue";
 import {
   analysisDetail,
   queryAnalysisedEngine,
@@ -119,6 +120,7 @@ export default {
     FilterChart,
     DDrawingChart,
     TinymceEditor,
+    Time3DChart,
     TwoDMarkersChart,
   },
   props: {
@@ -366,8 +368,8 @@ export default {
     overflow: auto;
     padding: 20px;
     flex: 1;
-        /* 滚动条整体样式 */
-        &::-webkit-scrollbar {
+    /* 滚动条整体样式 */
+    &::-webkit-scrollbar {
       width: 6px; /* 滚动条宽度 */
     }
 

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

@@ -36,7 +36,7 @@
       <VirtualList
         :list="generalFilesDatas"
         keyField="batchCode"
-        :itemSize="452"
+        :itemSize="600"
         v-slot="{ item, index }"
       >
         <DDrawingChart
@@ -53,7 +53,7 @@
       <VirtualList
         :list="diagramRelationsDatas"
         keyField="fieldEngineCode"
-        :itemSize="452"
+        :itemSize="600"
         v-slot="{ item, index }"
       >
         <TwoDMarkersChart
@@ -64,14 +64,14 @@
           :fileAddr="item.fileAddr"
         >
         </TwoDMarkersChart>
-        <DDrawingChart
+        <Time3DChart
           v-if="getFileTypeFromUrl(item.fileAddr) === '3D'"
-          :key="item.fieldEngineCode + 'DDrawingChart'"
+          :key="item.fieldEngineCode + 'Time3DChart'"
           :index="index + 'fen'"
-          :ref="item.fieldEngineCode + 'DDrawingChart'"
+          :ref="item.fieldEngineCode + 'Time3DChart'"
           :fileAddr="item.fileAddr"
         >
-        </DDrawingChart>
+        </Time3DChart>
       </VirtualList>
 
       <el-tabs value="first" v-if="isShowDescription">
@@ -107,6 +107,7 @@
 import DicCard from "@/views/overview/components/dicCard/index.vue";
 import FilterChart from "@/views/overview/components/filterChart/index.vue";
 import DDrawingChart from "@/views/performance/components/chartsCom/3DDrawingChart.vue";
+import Time3DChart from "@/views/performance/components/chartsCom/Time3DChart.vue";
 import TinymceEditor from "@/components/Tinymce.vue";
 import {
   analysisDetail,
@@ -121,6 +122,7 @@ export default {
     DicCard,
     FilterChart,
     DDrawingChart,
+    Time3DChart,
     TinymceEditor,
     TwoDMarkersChart,
   },
@@ -373,8 +375,8 @@ export default {
     overflow: auto;
     padding: 20px;
     flex: 1;
-        /* 滚动条整体样式 */
-        &::-webkit-scrollbar {
+    /* 滚动条整体样式 */
+    &::-webkit-scrollbar {
       width: 6px; /* 滚动条宽度 */
     }
 

src/views/performance/components/chartsCom/3DDrawingChart.vue

@@ -1,18 +1,6 @@
-<!--
- * @Author: your name
- * @Date: 2025-01-17 19:04:52
- * @LastEditTime: 2025-01-22 17:42:58
- * @LastEditors: milo-MacBook-Pro.local
- * @Description: In User Settings Edit
- * @FilePath: /performance-test/src/views/performance/components/chartsCom/3DDrawingChart.vue
--->
 <template>
-  <div style="height: 452px">
-    <div
-      :id="`plotly-3d-chart-` + index"
-      style="width: 100%; height: 450px"
-    ></div>
-    <div v-loading="loading" ref="plotlyChart" style="height: 450px">
+  <div>
+    <div v-loading="loading" ref="plotlyChart" style="height: 600px">
       <el-empty v-if="isError" description="请求失败"></el-empty>
     </div>
   </div>
@@ -36,64 +24,7 @@ export default {
   data() {
     return {
       color1: "",
-      chartData: {
-        // analysisTypeCode: "发电机转速和有功功率分析",
-        // engineCode: "WEM00013",
-        // engineTypeName: "WT2000/100",
-        // xaixs: "发电机转速（r/min）",
-        // yaixs: "时间",
-        // zaixs: "有功功率（kw）",
-        // data: [
-        //   {
-        //     engineName: "#01",
-        //     engineCode: "WOG00604",
-        //     title: " 月度发电机转速功率3D散点图：#01",
-        //     xData: [
-        //       1079.0, 1080.0, 1796.0, 1798.0, 1800.0, 1800.0, 1797.0, 1799.0,
-        //       1782.0, 1637.0, 1680.0, 1536.0, 1560.0, 1545.0, 1699.0, 1686.0,
-        //       1700.0, 1711.0, 1605.0, 1277.0, 1182.0, 1171.0, 1080.0, 1080.0,
-        //       1080.0, 1079.0, 1079.0, 1080.0, 1097.0, 1165.0, 1080.0, 1080.0,
-        //       1080.0, 1080.0, 1122.0, 1079.0, 1079.0, 1079.0, 1296.0,
-        //     ],
-        //     yData: [
-        //       "2023-01",
-        //       "2023-01",
-        //       "2023-01",
-        //       "2023-01",
-        //       "2023-01",
-        //       "2023-01",
-        //       "2023-01",
-        //       "2023-01",
-        //       "2023-10",
-        //       "2023-10",
-        //       "2023-10",
-        //       "2023-10",
-        //       "2023-10",
-        //       "2023-10",
-        //       "2023-10",
-        //       "2023-11",
-        //       "2023-11",
-        //       "2023-11",
-        //       "2023-11",
-        //       "2023-11",
-        //       "2023-11",
-        //       "2023-11",
-        //       "2023-11",
-        //       "2023-11",
-        //       "2023-11",
-        //       "2023-11",
-        //       "2023-11",
-        //       "2023-11",
-        //     ],
-        //     zData: [
-        //       100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200,
-        //       1300, 1400, 1500, 1600, 1700, 1800, 1900, 2000, 2100, 2200, 2300,
-        //       2400, 2500, 2600, 2700, 2800, 2900, 3000, 3100, 3200, 3300, 3400,
-        //     ],
-        //     mode: "markers",
-        //   },
-        // ],
-      },
+      chartData: {},
     };
   },
   mixins: [myMixin],
@@ -111,11 +42,11 @@ export default {
           const resultChartsData = await axios.get(this.fileAddr, {
             cancelToken: this.cancelToken.token,
           });
-          // console.log(
-          //   resultChartsData.data,
-          //   JSON.parse(resultChartsData.data),
-          //   "解析3D数据"
-          // );
+          console.log(
+            resultChartsData.data,
+            JSON.parse(resultChartsData.data),
+            "解析3D数据"
+          );
           this.chartData = resultChartsData.data;
           this.renderChart();
           this.isError = false;
@@ -155,6 +86,7 @@ export default {
               ],
         },
       };
+      const config = { scrollZoom: true };
 
       const layout = {
         title: this.chartData.data[0].title,
@@ -181,29 +113,35 @@ export default {
             showbackground: true, // 显示背景
           },
           aspectratio: {
-            x: 1.5, // X 轴比例
-            y: 2, // Y 轴比例
-            z: 2, // Z 轴比例（可根据需要调整）
+            x: 1, // X 轴比例
+            y: 3, // Y 轴比例
+            z: 1, // Z 轴比例（可根据需要调整）
           },
           plot_bgcolor: "#e5ecf6",
           gridcolor: "#fff", // 设置网格线颜色
           camera: {
+            center: {
+              x: 0, // 设置中心点
+              y: 0, // 设置中心点
+              z: 0, // 设置中心点
+            },
             eye: {
-              x: 2, // 眼睛的位置
-              y: 2, // 眼睛的位置
-              z: 2, // 眼睛的位置
+              x: 0, // 眼睛的位置
+              y: 0, // 眼睛的位置
+              z: 2.5, // 眼睛的位置
             },
             up: {
-              x: 1, // 设置上方向
-              y: 0.5, // 设置上方向
-              z: 0.5, // 设置上方向
+              x: 0, // 设置上方向
+              y: 0, // 设置上方向
+              z: 1, // 设置上方向
             },
           },
         },
         margin: { t: 50, b: 50, l: 50, r: 50 }, // 图表边距
+        staticPlot: false,
       };
-
-      Plotly.newPlot(`plotly-3d-chart-` + this.index, [trace], layout);
+      console.log(trace, "渲染图表3Ds");
+      Plotly.newPlot(`plotly-3d-chart-` + this.index, [trace], layout, config);
     },
   },
 };
@@ -217,6 +155,6 @@ export default {
 }
 
 ::v-deep canvas {
-  height: 400px !important;
+  /* height: 400px !important; */
 }
 </style>

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

@@ -0,0 +1,182 @@
+<!--
+ * @Author: your name
+ * @Date: 2025-01-22 18:50:27
+ * @LastEditTime: 2025-01-23 09:12:18
+ * @LastEditors: bogon
+ * @Description: In User Settings Edit
+ * @FilePath: /performance-test/src/views/performance/components/chartsCom/Time3DChart.vue
+-->
+<template>
+  <div>
+    <div v-loading="loading" ref="plotlyChart" style="height: 600px">
+      <el-empty v-if="isError" description="请求失败"></el-empty>
+    </div>
+  </div>
+</template>
+
+<script>
+import Plotly from "plotly.js-dist";
+import axios from "axios";
+import { myMixin } from "@/mixins/chartRequestMixin";
+export default {
+  props: {
+    fileAddr: {
+      default: "",
+      type: String,
+    },
+    index: {
+      default: "",
+      type: String,
+    },
+  },
+  data() {
+    return {
+      color1: "",
+      chartData: {},
+    };
+  },
+  mixins: [myMixin],
+  async mounted() {
+    this.getData();
+  },
+
+  methods: {
+    async getData() {
+      if (this.fileAddr !== "") {
+        try {
+          this.loading = true;
+          this.cancelToken = axios.CancelToken.source();
+          console.log(this.fileAddr, "3D url");
+          const resultChartsData = await axios.get(this.fileAddr, {
+            cancelToken: this.cancelToken.token,
+          });
+          // console.log(
+          //   resultChartsData.data,
+          //   JSON.parse(resultChartsData.data),
+          //   "解析3D数据"
+          // );
+          this.chartData = resultChartsData.data;
+          this.renderChart();
+          this.isError = false;
+          this.loading = false;
+        } catch (error) {
+          this.isError = true;
+          this.loading = false;
+        }
+      }
+    },
+    renderChart() {
+      // 提取 Y 轴数据中的月份
+      const months = this.chartData.data[0].yData.map((date) => {
+        const month = new Date(date).getMonth(); // 获取月份，0-11 (Jan - Dec)
+        return month;
+      });
+
+      // 设置每个月份对应的颜色
+      const monthColors = [
+        "#DBEEBC",
+        "#A8D7BE",
+        "#8ECAC1",
+        "#77BDC2",
+        "#64ADC2",
+        "#559ABE",
+        "#4884B7",
+        "#406DAB",
+        "#3856A0",
+        "#314291",
+        "#28357A",
+        "#1A285E",
+        "#FF7F50",
+        "#FFD700",
+        "#90EE90",
+      ];
+
+      // 为每个点根据月份设置颜色
+      const pointColors = months.map((month) => monthColors[month]);
+
+      // 构造3D散点图数据
+      const trace = {
+        x: this.chartData.data[0].xData, // 发电机转速
+        y: this.chartData.data[0].yData, // 时间
+        z: this.chartData.data[0].zData, // 有功功率
+        mode: "markers", // 强制设置为markers，避免出现线条
+        type: "scatter3d", // 3D 散点图
+        marker: {
+          size: 2, // 点的大小
+          color: pointColors, // 设置每个点的颜色（根据月份）
+          colorscale: "YlGnBu", // 可以选择颜色比例，如 'YlGnBu'
+        },
+      };
+
+      const config = { scrollZoom: true };
+
+      const layout = {
+        title: this.chartData.data[0].title,
+        scene: {
+          xaxis: {
+            title: this.chartData.xaixs, // X 轴标题
+            gridcolor: "rgb(255,255,255)", // 网格线颜色
+            tickcolor: "rgb(255,255,255)",
+            backgroundcolor: "#e5ecf6",
+            showbackground: true, // 显示背景
+          },
+          yaxis: {
+            title: this.chartData.yaixs, // Y 轴标题
+            gridcolor: "rgb(255,255,255)", // 网格线颜色
+            tickcolor: "rgb(255,255,255)",
+            backgroundcolor: "#e5ecf6",
+            showbackground: true, // 显示背景
+          },
+          zaxis: {
+            title: this.chartData.zaixs, // Z 轴标题
+            gridcolor: "rgb(255,255,255)", // 网格线颜色
+            tickcolor: "rgb(255,255,255)",
+            backgroundcolor: "#e5ecf6",
+            showbackground: true, // 显示背景
+          },
+          aspectratio: {
+            x: 1, // X 轴比例
+            y: 3, // Y 轴比例
+            z: 1, // Z 轴比例（可根据需要调整）
+          },
+          plot_bgcolor: "#e5ecf6",
+          gridcolor: "#fff", // 设置网格线颜色
+          camera: {
+            center: {
+              x: 0, // 设置中心点
+              y: 0, // 设置中心点
+              z: 0, // 设置中心点
+            },
+            eye: {
+              x: 0, // 眼睛的位置
+              y: 0, // 眼睛的位置
+              z: 2.5, // 眼睛的位置
+            },
+            up: {
+              x: 0, // 设置上方向
+              y: 0, // 设置上方向
+              z: 1, // 设置上方向
+            },
+          },
+        },
+        margin: { t: 50, b: 50, l: 50, r: 50 }, // 图表边距
+        staticPlot: false,
+      };
+
+      Plotly.newPlot(`plotly-3d-chart-` + this.index, [trace], layout, config);
+    },
+  },
+};
+</script>
+
+<style scoped>
+/* 样式可以根据需求自定义 */
+#plotly-3d-chart {
+  width: 100%;
+  height: 500px;
+}
+
+::v-deep canvas {
+  /* height: 400px !important; */
+}
+</style>