处理数据

src/components/virtual_list/ManyVirtualList.vue

@@ -0,0 +1,80 @@
+<!--
+ * @Author: your name
+ * @Date: 2025-01-20 16:36:35
+ * @LastEditTime: 2025-01-20 16:36:35
+ * @LastEditors: your name
+ * @Description: In User Settings Edit
+ * @FilePath: /performance-test/src/components/virtual_list/ManyVirtualList.vue
+-->
+<template>
+  <div
+    class="virtual-list"
+    :style="{ height: list.length === 0 || list.length === 1 ? '452px' : '' }"
+  >
+    <div
+      class="charts"
+      v-if="list && list.length > 0"
+      :style="{ height: list.length === 0 || list.length === 1 ? '452px' : '' }"
+    >
+      <RecycleScroller
+        class="scroller"
+        :items="list"
+        :item-size="itemSize"
+        :key-field="keyField"
+        v-slot="{ item, index }"
+      >
+        <slot :item="item" :index="index"></slot>
+      </RecycleScroller>
+    </div>
+    <el-empty description="暂无分析记录" v-else></el-empty>
+  </div>
+</template>
+
+<script type="text/javascript">
+//import HelloWorld from '@/components/HelloWorld.vue'
+export default {
+  name: "VirtualList",
+  components: {},
+  props: {
+    list: {
+      type: Array,
+      default: () => [],
+    },
+    keyField: {
+      type: String,
+      default: "id",
+    },
+    itemSize: {
+      type: Number,
+      default: 300,
+    },
+  },
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.charts {
+  height: calc(100% - 150px);
+}
+
+.virtual-list {
+  height: 100%;
+}
+
+.scroller {
+  height: 100%;
+
+  /* 隐藏垂直滚动条 */
+  &::-webkit-scrollbar {
+    width: 0;
+  }
+
+  /* 隐藏水平滚动条 */
+  &::-webkit-scrollbar {
+    height: 0;
+  }
+}
+</style>

src/components/virtual_list/index.vue

@@ -1,18 +1,20 @@
 <template>
-  <div class="virtual-list" :style="{ height: list.length === 0 || list.length === 1 ? '452px' : '' }">
-    <div class="charts" v-if="list && list.length > 0"
-      :style="{ height: list.length === 0 || list.length === 1 ? '452px' : '' }">
-      <!-- <RecycleScroller class="scroller" :items="diagramRelationsDatas" :item-size="452" key-field="fieldEngineCode"
-            v-slot="{ item: itemChart }">
-            <TwoDMarkersChart :key="itemChart.fieldEngineCode" :ref="itemChart.fieldEngineCode"
-              :fileAddr="itemChart.fileAddr">
-            </TwoDMarkersChart>
-          </RecycleScroller> -->
-      <!-- <template v-for="(itemChart, indChart) in diagramRelationsDatas">
-          
-          </template> -->
-      <RecycleScroller class="scroller" :items="list" :item-size="itemSize" :key-field="keyField"
-        v-slot="{ item, index }">
+  <div
+    class="virtual-list"
+    :style="{ height: list.length === 0 || list.length === 1 ? '452px' : '' }"
+  >
+    <div
+      class="charts"
+      v-if="list && list.length > 0"
+      :style="{ height: list.length === 0 || list.length === 1 ? '452px' : '' }"
+    >
+      <RecycleScroller
+        class="scroller"
+        :items="list"
+        :item-size="itemSize"
+        :key-field="keyField"
+        v-slot="{ item, index }"
+      >
         <slot :item="item" :index="index"></slot>
       </RecycleScroller>
     </div>
@@ -28,23 +30,21 @@ export default {
   props: {
     list: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     keyField: {
       type: String,
-      default: 'id'
+      default: "id",
     },
     itemSize: {
       type: Number,
-      default: 300
-    }
+      default: 300,
+    },
   },
   data() {
-    return {
-
-    }
-  }
-}
+    return {};
+  },
+};
 </script>
 
 <style lang="scss" scoped>
@@ -69,4 +69,4 @@ export default {
     height: 0;
   }
 }
-</style>
+</style>

src/main.js

@@ -16,9 +16,9 @@ import "./styles/index.scss";
 import SvgIcons from "@/components/SvgIcons/index.vue";
 import VueDraggableResizable from "vue-draggable-resizable-gorkys";
 import "vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css";
-import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
+import "vue-virtual-scroller/dist/vue-virtual-scroller.css";
 import VirtualList from "@/components/virtual_list/index.vue";
-
+import ManyVirtualList from "@/components/virtual_list/ManyVirtualList.vue";
 
 Vue.component("VueDraggableResizable", VueDraggableResizable);
 Vue.component("SvgIcons", SvgIcons);
@@ -38,12 +38,13 @@ Vue.prototype.$qs = qs;
 
 // dialog拖拽全屏
 import dialogDrag from "./views/health/dialogDrag";
-import { RecycleScroller } from 'vue-virtual-scroller'
+import { RecycleScroller } from "vue-virtual-scroller";
 
 Vue.directive("dialogDrag", dialogDrag);
 
-Vue.component('RecycleScroller', RecycleScroller)
-Vue.component('VirtualList', VirtualList)
+Vue.component("RecycleScroller", RecycleScroller);
+Vue.component("VirtualList", VirtualList);
+Vue.component("ManyVirtualList", ManyVirtualList);
 
 Vue.use(ElementUI);
 // 引入tailwind

src/utils/request.js

@@ -4,7 +4,7 @@ import { Message } from "element-ui";
 const service = axios.create({
   baseURL: window?._BASE_CONFIG?.API || "/api",
   withCredentials: true,
-  timeout: 5000,
+  timeout: 10000,
 });
 
 const writeList = ["/api/energy-manage-service/sysuserinfo/open/userLogin"];

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

@@ -1,12 +1,12 @@
 <!--
  * @Author: your name
  * @Date: 2025-01-10 09:09:17
- * @LastEditTime: 2025-01-20 15:45:41
+ * @LastEditTime: 2025-01-20 16:33:59
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/overview/components/speed_power/index.vue
 -->
-
+<!--  -->
 <template>
   <div class="type-variable">
     <!-- 发电机转速和有功功率分析 -->
@@ -31,7 +31,17 @@
           在风力发电机组中，转速-功率散点图展示了风机发电机转速与风机产生的功率之间的关系。这种散点图能够揭示在不同转速速和操作条件下，发电机转速调整是如何影响风机的功率和转矩输出的。
         </div>
       </el-alert>
-      <div class="titleCharts">分析总图 :</div>
+      <!-- <div class="titleCharts">分析总图 :</div> -->
+      <!-- <div v-for="(item, index) in generalFilesDatas">
+            <DDrawingChart
+              :key="item.batchCode + index"
+              :index="index + 'zong'"
+              :ref="item.batchCode + index"
+              :fileAddr="item.fileAddr"
+            >
+            </DDrawingChart>
+          </div> -->
+
       <VirtualList
         :list="generalFilesDatas"
         keyField="batchCode"
@@ -47,16 +57,16 @@
         </DDrawingChart>
       </VirtualList>
 
-      <div class="titleCharts">分析分图 :</div>
+      <!-- <div class="titleCharts">分析分图 :</div> -->
 
       <VirtualList
-        :list="diagramRelationsDatas"
+        :list="diagramRelationsDatas2D"
         keyField="fieldEngineCode"
         :itemSize="452"
         v-slot="{ item, index }"
       >
         <TwoDMarkersChart
-          :index="index"
+          :index="index + 'TwoDMarkersChart'"
           :key="item.fieldEngineCode + 'TwoDMarkersChart'"
           :ref="item.fieldEngineCode"
           :fileAddr="item.fileAddr"
@@ -64,7 +74,7 @@
         </TwoDMarkersChart>
       </VirtualList>
       <VirtualList
-        :list="diagramRelationsDatas"
+        :list="diagramRelationsDatas3D"
         keyField="fieldEngineCode"
         :itemSize="452"
         v-slot="{ item, index }"
@@ -153,6 +163,8 @@ export default {
       requestRecord: [],
       commentDescriptionVos: [], //评论列表
       editableTabs: [],
+      diagramRelationsDatas2D: [],
+      diagramRelationsDatas3D: [],
     };
   },
   watch: {
@@ -273,6 +285,19 @@ export default {
           result.data[0].generalFiles.filter((item) =>
             item.fileAddr.endsWith(".json")
           ); //总图数据
+        console.log(this.generalFilesDatas, "总图数据");
+
+        if (result.data && result.data[0] && result.data[0].diagramRelations) {
+          const diagramRelationsDatas = result.data[0].diagramRelations.filter(
+            (item) => item.fileAddr.endsWith(".json")
+          );
+          this.diagramRelationsDatas2D = diagramRelationsDatas.filter(
+            (item) => this.getFileTypeFromUrl(item.fileAddr) === "speed_torque"
+          );
+          this.diagramRelationsDatas3D = diagramRelationsDatas.filter(
+            (item) => this.getFileTypeFromUrl(item.fileAddr) === "3D"
+          );
+        }
         this.diagramRelationsDatas =
           result.data &&
           result.data[0] &&
@@ -283,7 +308,16 @@ export default {
         console.error("Failed to fetch analysis details:", err);
       }
     },
-
+    getFileTypeFromUrl(url) {
+      // 判断文件名或路径是否包含关键字
+      if (url.includes("3D")) {
+        return "3D"; // 如果 URL 中包含 "3D" 字符串，判断为 3D 类型
+      } else if (url.includes("speed_torque")) {
+        return "speed_torque"; // 如果 URL 中包含 "speed_torque" 字符串，判断为 speed_torque 类型
+      } else {
+        return "Unknown"; // 如果都不包含，返回 Unknown 或其他提示
+      }
+    },
     // 请求风机列表
     async getWindEnfineList(batchCode, analysisTypeCode) {
       // console.log("请求风机列表 分钟级");

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

@@ -22,10 +22,15 @@
           在风力发电机组中，转速-功率散点图展示了风机发电机转速与风机产生的功率之间的关系。这种散点图能够揭示在不同转速速和操作条件下，发电机转速调整是如何影响风机的功率和转矩输出的。
         </div>
       </el-alert>
-      <div class="titleCharts">分析总图 :</div>
-      <!-- {{ generalFilesDatas[0] }} -->
+      <!-- <div class="titleCharts">分析总图 :</div> -->
       <!-- <div v-for="(item, index) in generalFilesDatas">
-       
+        <DDrawingChart
+          :key="item.batchCode + index"
+          :index="index + 'zong'"
+          :ref="item.batchCode + index"
+          :fileAddr="item.fileAddr"
+        >
+        </DDrawingChart>
       </div> -->
 
       <VirtualList
@@ -43,16 +48,16 @@
         </DDrawingChart>
       </VirtualList>
 
-      <div class="titleCharts">分析分图 :</div>
+      <!-- <div class="titleCharts">分析分图 :</div> -->
 
       <VirtualList
-        :list="diagramRelationsDatas"
+        :list="diagramRelationsDatas2D"
         keyField="fieldEngineCode"
         :itemSize="452"
         v-slot="{ item, index }"
       >
         <TwoDMarkersChart
-          :index="index"
+          :index="index + 'TwoDMarkersChart'"
           :key="item.fieldEngineCode + 'TwoDMarkersChart'"
           :ref="item.fieldEngineCode"
           :fileAddr="item.fileAddr"
@@ -60,7 +65,7 @@
         </TwoDMarkersChart>
       </VirtualList>
       <VirtualList
-        :list="diagramRelationsDatas"
+        :list="diagramRelationsDatas3D"
         keyField="fieldEngineCode"
         :itemSize="452"
         v-slot="{ item, index }"
@@ -149,6 +154,8 @@ export default {
       requestRecord: [],
       commentDescriptionVos: [], //评论列表
       editableTabs: [],
+      diagramRelationsDatas2D: [],
+      diagramRelationsDatas3D: [],
     };
   },
   watch: {
@@ -270,6 +277,18 @@ export default {
             item.fileAddr.endsWith(".json")
           ); //总图数据
         console.log(this.generalFilesDatas, "总图数据");
+
+        if (result.data && result.data[0] && result.data[0].diagramRelations) {
+          const diagramRelationsDatas = result.data[0].diagramRelations.filter(
+            (item) => item.fileAddr.endsWith(".json")
+          );
+          this.diagramRelationsDatas2D = diagramRelationsDatas.filter(
+            (item) => this.getFileTypeFromUrl(item.fileAddr) === "speed_torque"
+          );
+          this.diagramRelationsDatas3D = diagramRelationsDatas.filter(
+            (item) => this.getFileTypeFromUrl(item.fileAddr) === "3D"
+          );
+        }
         this.diagramRelationsDatas =
           result.data &&
           result.data[0] &&
@@ -280,7 +299,16 @@ export default {
         console.error("Failed to fetch analysis details:", err);
       }
     },
-
+    getFileTypeFromUrl(url) {
+      // 判断文件名或路径是否包含关键字
+      if (url.includes("3D")) {
+        return "3D"; // 如果 URL 中包含 "3D" 字符串，判断为 3D 类型
+      } else if (url.includes("speed_torque")) {
+        return "speed_torque"; // 如果 URL 中包含 "speed_torque" 字符串，判断为 speed_torque 类型
+      } else {
+        return "Unknown"; // 如果都不包含，返回 Unknown 或其他提示
+      }
+    },
     // 请求风机列表
     async getWindEnfineList(batchCode, analysisTypeCode) {
       // console.log("请求风机列表 分钟级");

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

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2025-01-17 19:04:52
- * @LastEditTime: 2025-01-20 15:44:18
+ * @LastEditTime: 2025-01-20 16:27:38
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/chartsCom/3DDrawingChart.vue
@@ -12,11 +12,7 @@
       :id="`plotly-3d-chart-` + index"
       style="width: 100%; height: 400px"
     ></div>
-    <div
-      v-loading="loading"
-      :ref="plotlyChart_`${index}`"
-      style="height: 400px"
-    >
+    <div v-loading="loading" ref="plotlyChart" style="height: 400px">
       <el-empty v-if="isError" description="请求失败"></el-empty>
     </div>
   </div>