Strona główna Odkrywaj Pomoc
Zarejestruj się Zaloguj się
rui.jiang
/
performance-test
1
0
Forkuj 0
Pliki Problemy 0 Oczekujące zmiany 0 Wiki
Przeglądaj źródła

添加需求主题修改/散点大小修改功能

liujiejie 5 miesięcy temu
rodzic
ff214a8fcc
commit
2f591a6cbd
24 zmienionych plików z 1123 dodań i 210 usunięć
Widok podzielony Pokaż statystyki zmian
  1. 96 0
      aa.html
  2. 6 0
      src/components/map/index.vue
  3. 8 6
      src/views/overview/components/analysis_information/index.vue
  4. 3 3
      src/views/overview/components/filterChart/index.vue
  5. 1 1
      src/views/overview/components/min_pitch/index.vue
  6. 6 6
      src/views/overview/components/pitch_generator_speed/index.vue
  7. 1 7
      src/views/overview/components/pitch_power/index.vue
  8. 2 1
      src/views/overview/components/power_curve/index.vue
  9. 3 18
      src/views/overview/components/yaw_error_density/index.vue
  10. 27 9
      src/views/overview/index.vue
  11. 532 0
      src/views/overview/js/colors.js
  12. 10 9
      src/views/performance/assetssMag.vue
  13. 60 2
      src/views/performance/components/PlotlyCharts.vue
  14. 17 6
      src/views/performance/components/analysisEvent.vue
  15. 46 15
      src/views/performance/components/chartsCom/GeneratorTemperature.vue
  16. 52 9
      src/views/performance/components/chartsCom/NoColourBandTwoDMarkerChart.vue
  17. 45 30
      src/views/performance/components/chartsCom/TwoDMarkersChart.vue
  18. 41 30
      src/views/performance/components/chartsCom/lineAndChildLine.vue
  19. 5 12
      src/views/performance/components/chartsCom/lineChartsFen.vue
  20. 114 36
      src/views/performance/components/chartsCom/powerMarkers2DCharts.vue
  21. 46 8
      src/views/performance/components/chartsCom/yawErrorLine.vue
  22. 0 0
      src2.13.zip
  23. BIN
      src2.14.zip
  24. 2 2
      vue.config.js

+ 96 - 0
aa.html
Wyświetl plik 

@@ -0,0 +1,96 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+  <head>
 
+    <meta charset="UTF-8" />
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    <title>2D Scatter Plot with Time-based Colorbar</title>
 
+    <!-- 引入 Plotly.js -->
 
+    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
 
+  </head>
 
+  <body>
 
+    <div id="plotly-chart"></div>
 
+
 
+    <script>
 
+      // 示例数据
 
+      const colorbarData = [
 
+        "2023-03",
 
+        "2023-03",
 
+        "2023-03",
 
+        "2023-03",
 
+        "2023-03",
 
+        "2023-03",
 
+        "2023-03",
 
+        "2023-03",
 
+        "2023-04",
 
+        "2023-04",
 
+        "2023-04",
 
+        "2023-04",
 
+        "2023-04",
 
+        "2023-04",
 
+        "2023-04",
 
+        "2023-04",
 
+        "2023-06",
 
+        "2023-06",
 
+      ];
 
+
 
+      const xData = [
 
+        4.2, 5.2, 4.04, 3.91, 3.69, 3.73, 4.31, 3.99, 3.75, 3.77, 3.49, 3.18,
 
+        2.77, 3, 3.52, 3.23, 3.09, 3.39,
 
+      ];
 
+
 
+      const yData = [
 
+        310.18, 391.66, 286.01, 242.07, 244.45, 250.31, 302.12, 240.6, 251.22,
 
+        215.52, 135.86, 75.99, 10.25, 100.25, 310.25, 410.25, 190.25, 210.25,
 
+      ];
 
+
 
+      // 映射时间到数值：2023-03 -> 1, 2023-04 -> 2, 2023-06 -> 3
 
+      const timeMapping = {
 
+        "2023-03": 1,
 
+        "2023-04": 2,
 
+        "2023-06": 3,
 
+      };
 
+
 
+      // 将时间字符串映射为数字
 
+      const colorValues = colorbarData.map((date) => timeMapping[date]);
 
+
 
+      // 配置散点图的数据
 
+      const trace = {
 
+        x: xData, // 风速数据
 
+        y: yData, // 有功功率数据
 
+        mode: "markers", // 选择散点图
 
+        type: "scatter", // 散点图
 
+        text: colorbarData, // 鼠标悬停时显示的文本（时间）
 
+        hovertemplate:
 
+          "<b>时间: %{text}</b><br>" +
 
+          "风速: %{x} m/s<br>" +
 
+          "功率: %{y} kW<extra></extra>", // 鼠标悬停时显示的内容
 
+        marker: {
 
+          color: colorValues, // 使用数字化的时间数据来映射颜色
 
+          colorscale: "Viridis", // 颜色渐变
 
+          colorbar: {
 
+            title: "年月", // 色条标题
 
+            tickvals: [1, 2, 3], // 设置 colorbar 上的刻度
 
+            ticktext: ["2023-03", "2023-04", "2023-06"], // 设置刻度对应的时间标签
 
+          },
 
+          size: 10, // 设置散点的大小
 
+        },
 
+      };
 
+      // "风速: %{x}(m/s)<br>" +
 
+      //       "有功功率: %{y}（kw）<br>" +
 
+      //       "时间: %{marker.color:.2f}<extra></extra>", // 鼠标悬停时显示的内容
 
+      // 配置布局
 
+      const layout = {
 
+        title: "风速与有功功率的散点图",
 
+        xaxis: {
 
+          title: "风速 (m/s)", // X轴标题
 
+        },
 
+        yaxis: {
 
+          title: "有功功率 (kW)", // Y轴标题
 
+        },
 
+      };
 
+
 
+      // 绘制图表
 
+      Plotly.newPlot("plotly-chart", [trace], layout);
 
+    </script>
 
+  </body>
 
+</html>

+ 6 - 0
src/components/map/index.vue
Wyświetl plik 

@@ -5,6 +5,12 @@
 
       <h3>{{ hoverInfo.fieldName }}</h3>
 
       <div>
 
         <p>
 
+          <span>状态:</span
 
+          ><span>{{
 
+            hoverInfo.analysisState === 30 ? "已完成分析" : "未完成分析"
 
+          }}</span>
 
+        </p>
 
+        <p>
 
           <span>风场编号</span><span>{{ hoverInfo.codeNumber }}</span>
 
         </p>
 
         <p>

+ 8 - 6
src/views/overview/components/analysis_information/index.vue
Wyświetl plik 

@@ -1,5 +1,5 @@
 
 <template>
 
-  <el-card shadow="always" class="box-card">
 
+  <el-card shadow="always" class="box-card" v-loading="loading">
 
     <div class="box-header">
 
       <h4>分析介绍:</h4>
 
       <div class="box-header-min">
 
@@ -192,7 +192,7 @@
 
 import Map from "../map/index.vue";
 
 import { getFieldInfo } from "@/api/overview";
 
 import { getWindEngineGroup } from "@/api/ledger";
 
-import { aW } from "plotly.js-dist";
 
+
 
 export default {
 
   name: "AnalysisInformation",
 
   components: {
 
@@ -207,6 +207,7 @@ export default {
 
 
   data() {
 
     return {
 
+      loading: false,
 
       fieldInfo: {
 
         fieldCode: "",
 
       }, //风场信息
 
@@ -242,9 +243,7 @@ export default {
 
   methods: {
 
     //获取风机信息
 
     async getEngineInfo(engineCode) {
 
-      console.log(engineCode, "engineCode");
 
       await getWindEngineGroup({ engineCode }).then((res) => {
 
-        console.log(res, "res");
 
         if (res.code === 200) {
 
           this.windDetail = res.data;
 
         }
 
@@ -267,13 +266,16 @@ export default {
 
     async getFieldInfoMess() {
 
       //分析详情
 
       try {
 
+        this.loading = true;
 
         const res = await getFieldInfo({ batchCode: this.initBatchCode });
 
-
 
         if (res.code === 200) {
 
           this.fieldInfo = res.data.fieldInfo; //风场信息
 
           this.analysisInfo = res.data.analysisInfo; //分析类型编号
 
         }
 
-      } catch (err) {}
 
+      } catch (err) {
 
+      } finally {
 
+        this.loading = false;
 
+      }
 
     },
 
     handleChange(val) {
 
       console.log(val);

+ 3 - 3
src/views/overview/components/filterChart/index.vue
Wyświetl plik 

@@ -1,7 +1,7 @@
 
 <!--
 
  * @Author: your name
 
  * @Date: 2025-01-13 14:53:21
 
- * @LastEditTime: 2025-02-12 13:49:00
 
+ * @LastEditTime: 2025-02-18 09:16:21
 
  * @LastEditors: bogon
 
  * @Description: In User Settings Edit
 
  * @FilePath: /performance-test/src/views/overview/components/filterChart/index.vue
 
@@ -33,10 +33,10 @@
 
         >查询</el-button
 
       >
 
       <el-button type="primary" size="small" @click="onSubmit('handlePrevious')"
 
-        >上一条分析结果</el-button
 
+        >上一批分析结果</el-button
 
       >
 
       <el-button type="primary" size="small" @click="onSubmit('handleNext')"
 
-        >下一条分析结果</el-button
 
+        >下一批分析结果</el-button
 
       >
 
     </el-form-item>
 
   </el-form>

+ 1 - 1
src/views/overview/components/min_pitch/index.vue
Wyświetl plik 

@@ -1,7 +1,7 @@
 
 <!--
 
  * @Author: your name
 
  * @Date: 2025-01-09 18:08:13
 
- * @LastEditTime: 2025-02-12 16:33:16
 
+ * @LastEditTime: 2025-02-17 17:11:19
 
  * @LastEditors: bogon
 
  * @Description: In User Settings Edit
 
  * @FilePath: /performance-test/src/views/overview/components/min_pitch/index.vue

+ 6 - 6
src/views/overview/components/pitch_generator_speed/index.vue
Wyświetl plik 

@@ -1,7 +1,7 @@
 
 <!--
 
  * @Author: your name
 
  * @Date: 2025-01-09 18:09:25
 
- * @LastEditTime: 2025-02-12 16:34:20
 
+ * @LastEditTime: 2025-02-17 17:22:39
 
  * @LastEditors: bogon
 
  * @Description: In User Settings Edit
 
  * @FilePath: /performance-test/src/views/overview/components/pitch_generator_speed/index.vue
 
@@ -39,12 +39,12 @@
 
         :itemSize="452"
 
         v-slot="{ item, index }"
 
       >
 
-        <TwoDMarkersChart
 
-          :key="item.fieldEngineCode"
 
+        <powerMarkers2DCharts
 
+          :key="item.fieldEngineCode + index"
 
           :index="`${new Date().getTime()}` + index"
 
           :ref="item.fieldEngineCode"
 
           :fileAddr="item.fileAddr"
 
-        ></TwoDMarkersChart>
 
+        ></powerMarkers2DCharts>
 
       </VirtualList>
 
       <el-dialog
 
         v-if="isShowDescription"
 
@@ -95,7 +95,7 @@
 
 <script>
 
 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 powerMarkers2DCharts from "@/views/performance/components/chartsCom/powerMarkers2DCharts.vue";
 
 import TinymceEditor from "@/components/Tinymce.vue";
 
 import {
 
   analysisDetail,
 
@@ -108,8 +108,8 @@ export default {
 
   components: {
 
     DicCard,
 
     FilterChart,
 
-    TwoDMarkersChart,
 
     TinymceEditor,
 
+    powerMarkers2DCharts,
 
   },
 
   props: {
 
     initBatchCode: {

+ 1 - 7
src/views/overview/components/pitch_power/index.vue
Wyświetl plik 

@@ -1,7 +1,7 @@
 
 <!--
 
  * @Author: your name
 
  * @Date: 2025-01-09 18:09:41
 
- * @LastEditTime: 2025-02-12 16:40:18
 
+ * @LastEditTime: 2025-02-17 17:22:49
 
  * @LastEditors: bogon
 
  * @Description: In User Settings Edit
 
  * @FilePath: /performance-test/src/views/overview/components/pitch_power/index.vue
 
@@ -39,12 +39,6 @@
 
         :itemSize="600"
 
         v-slot="{ item, index }"
 
       >
 
-        <!-- <TwoDMarkersChart
 
-          :key="`${new Date().getTime()}` + item.fieldEngineCode"
 
-          :index="`${new Date().getTime()}` + index"
 
-          :ref="`${new Date().getTime()}` + item.fieldEngineCode"
 
-          :fileAddr="item.fileAddr"
 
-        ></TwoDMarkersChart> -->
 
         <TwoDMarkersChart
 
           v-if="getFileTypeFromUrl(item.fileAddr) === 'pitch_power'"
 
           :index="index + 'TwoDMarkersChart'"

+ 2 - 1
src/views/overview/components/power_curve/index.vue
Wyświetl plik 

@@ -1,7 +1,7 @@
 
 <!--
 
  * @Author: your name
 
  * @Date: 2025-01-09 18:10:08
 
- * @LastEditTime: 2025-02-13 11:21:00
 
+ * @LastEditTime: 2025-02-18 15:25:04
 
  * @LastEditors: bogon
 
  * @Description: In User Settings Edit
 
  * @FilePath: /performance-test/src/views/overview/components/power_curve/index.vue
 
@@ -42,6 +42,7 @@
 
             <el-col :span="24" :key="ind + 'leftTable'">
 
               <div class="leftTable">
 
                 <el-button
 
+                  size="small"
 
                   @click="
 
                     downLoadCsv(
 
                       powerCurveDom && powerCurveDom.powerCurveTableData

+ 3 - 18
src/views/overview/components/yaw_error_density/index.vue
Wyświetl plik 

@@ -1,7 +1,7 @@
 
 <!--
 
  * @Author: your name
 
  * @Date: 2025-01-10 09:26:12
 
- * @LastEditTime: 2025-02-13 11:08:01
 
+ * @LastEditTime: 2025-02-17 17:21:45
 
  * @LastEditors: bogon
 
  * @Description: In User Settings Edit
 
  * @FilePath: /performance-test/src/views/overview/components/yaw_error_density/index.vue
 
@@ -36,13 +36,6 @@
 
         :itemSize="452"
 
         v-slot="{ item, index }"
 
       >
 
-        <!-- <TwoDMarkersChart
 
-          :index="index + item.fieldEngineCode"
 
-          :key="item.fieldEngineCode"
 
-          :ref="item.fieldEngineCode"
 
-          :fileAddr="item.fileAddr"
 
-        >
 
-        </TwoDMarkersChart> -->
 
         <YawErrorDensityChart
 
           :index="index + item.fieldEngineCode"
 
           :key="item.fieldEngineCode"
 
@@ -51,14 +44,7 @@
 
         >
 
         </YawErrorDensityChart>
 
       </VirtualList>
 
-      <!-- <div class="charts" v-if="diagramRelationsDatas">
 
-        <RecycleScroller class="scroller" :items="diagramRelationsDatas" :item-size="452" 
-          v-slot="{ item: itemChart }">
 
-          <TwoDMarkersChart :key="itemChart.fieldEngineCode" :ref="itemChart.fieldEngineCode"
 
-            :fileAddr="itemChart.fileAddr">
 
-          </TwoDMarkersChart>
 
-        </RecycleScroller>
 
-      </div> -->
 
+
 
       <el-dialog
 
         v-if="isShowDescription"
 
         title="添加评论"
 
@@ -108,7 +94,7 @@
 
 <script>
 
 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 YawErrorDensityChart from "@/views/performance/components/chartsCom/YawErrorDensityChart.vue";
 
 import TinymceEditor from "@/components/Tinymce.vue";
 
 import {
 
@@ -121,7 +107,6 @@ export default {
 
   components: {
 
     DicCard,
 
     FilterChart,
 
-    TwoDMarkersChart,
 
     YawErrorDensityChart,
 
     TinymceEditor,
 
   },

+ 27 - 9
src/views/overview/index.vue
Wyświetl plik 

@@ -212,7 +212,6 @@ export default {
 
       this.isShow = false;
 
     },
 
     handleTousutiwen() {
 
-      console.log("点击评论");
 
       this.isShow = true;
 
     },
 
     //展开/收起
 
@@ -229,7 +228,6 @@ export default {
 
           node.expanded = false;
 
         });
 
       }
 
-      console.log(this.isExpanded, "展开/收起");
 
     },
 
 
     // 获取树形结构数据
 
@@ -293,11 +291,17 @@ export default {
 
     },
 
     // 点击树形节点时
 
     handleNodeClick(data) {
 
-      console.log(data, "data");
 
-      if (data.levelstate === "1" || data.levelstate === "2") {
 
+      if (
 
+        (data.children &&
 
+          data.children.length <= 0 &&
 
+          data.levelstate === "1") ||
 
+        (data.children && data.children.length <= 0 && data.levelstate === "2")
 
+      ) {
 
         this.$message.warning("当前选中风场未进行任何分析，请重新选择");
 
       } else {
 
-        this.initBatchCode = data.codeNumber; // 更新选中的节点
 
+        if (!data.children) {
 
+          this.initBatchCode = data.codeNumber; // 更新选中的节点
 
+        }
 
       }
 
     },
 
     //获取
 
@@ -317,9 +321,25 @@ export default {
 
     },
 
     // 过滤树形节点的方法
 
     filterNode(value, data) {
 
-      if (!value) return true;
 
-      return data.fieldOrCompanyName.indexOf(value) !== -1;
 
+      if (!value) return true; // 如果没有输入过滤文本，则返回true，显示所有节点
 
+
 
+      // 先判断当前节点是否符合过滤条件
 
+      let isMatch = data.fieldOrCompanyName.indexOf(value) !== -1;
 
+
 
+      // 如果当前节点有子节点且子节点长度大于0，强制显示父节点并保留所有子节点
 
+      if (data.children && data.children.length > 0) {
 
+        // 递归过滤子节点，如果子节点有一个匹配，则保留父节点
 
+        isMatch =
 
+          isMatch ||
 
+          data.children.some((child) => this.filterNode(value, child));
 
+      }
 
+
 
+      return isMatch;
 
     },
 
+    // filterNode(value, data) {
 
+    //   if (!value) return true;
 
+    //   return data.fieldOrCompanyName.indexOf(value) !== -1;
 
+    // },
 
     setInitBathCode(val) {
 
       // this.initBatchCode = val;
 
       this.isShowComment = true;
 
@@ -330,14 +350,12 @@ export default {
 
       this.batchTitle = batchObj.batchName;
 
       console.log(this.batchTitle, "this.batchTitle");
 
     },
 
-
 
     // 关闭上一条、下一条弹窗展示组件设置
 
     handleClose() {
 
       this.isShowComment = false;
 
     },
 
     // 菜单选中项的事件
 
     handleSelect(key, keyPath) {
 
-      console.log(key, keyPath, "切换");
 
       this.analysisTypeCode = key;
 
       this.activeIndex = key;
 
       this.currentComponent = () => import(`./components/${key}/index.vue`);

+ 532 - 0
src/views/overview/js/colors.js
Wyświetl plik 

@@ -0,0 +1,532 @@
 
+/*
 
+ * @Author: your name
 
+ * @Date: 2025-02-17 15:31:57
 
+ * @LastEditTime: 2025-02-18 15:22:20
 
+ * @LastEditors: bogon
 
+ * @Description: In User Settings Edit
 
+ * @FilePath: /performance-test/src/views/overview/js/colors.js
 
+ */
 
+export const colorSchemes = [
 
+  {
 
+    label: "默认",
 
+    colors: [
 
+      "#FFFFDF",
 
+      "#DFEDC1",
 
+      "#EBF6C1",
 
+      "#DBEEBC",
 
+      "#A8D7BE",
 
+      "#8ECAC1",
 
+      "#77BDC2",
 
+      "#64ADC2",
 
+      "#559ABE",
 
+      "#4884B7",
 
+      "#406DAB",
 
+      "#3856A0",
 
+      "#314291",
 
+      "#28357A",
 
+      "#1A285E",
 
+    ],
 
+  },
 
+  {
 
+    label: "复古",
 
+    colors: [
 
+      "#387FC9",
 
+      "#715219",
 
+      "#EA7637",
 
+      "#182B7C",
 
+      "#B6B642",
 
+      "#C83629",
 
+      "#672064",
 
+      "#E48179",
 
+      "#459BAF",
 
+      "#FF69B4",
 
+      "#800080",
 
+      "#7C3B6C",
 
+      "#DAA520",
 
+      "#BC8F8F",
 
+      "#F5DEB3",
 
+      "#D2B48C",
 
+      "#F0E68C",
 
+      "#FFF8DC",
 
+      "#FFE4B5",
 
+      "#C0C0C0",
 
+      "#6A3D9D",
 
+      "#9B7D37",
 
+      "#FDCB6E",
 
+      "#FF6F61",
 
+      "#D1A5A0",
 
+      "#8E5A78",
 
+      "#CF7555",
 
+      "#F29B60",
 
+      "#6F88B3",
 
+      "#5F3F7E",
 
+      "#B564A2",
 
+      "#FF8860",
 
+      "#B67E5F",
 
+      "#A67A92",
 
+      "#8B6B4E",
 
+      "#9E7F7C",
 
+      "#DC8F3D",
 
+      "#C7789E",
 
+      "#E5A745",
 
+      "#5C97A3",
 
+    ],
 
+  },
 
+  {
 
+    label: "淡雅",
 
+    colors: [
 
+      "#97A2F9",
 
+      "#EA8783",
 
+      "#F5C380",
 
+      "#F7E87C",
 
+      "#9EE68F",
 
+      "#62B6F6",
 
+      "#7FAAF0",
 
+      "#C49DF9",
 
+      "#424348",
 
+      "#32CD32",
 
+      "#8B008B",
 
+      "#FFD700",
 
+      "#32CD32",
 
+      "#A9A9A9",
 
+      "#B9E9E2",
 
+      "#FF6347",
 
+      "#E3B9E6",
 
+      "#00BFFF",
 
+      "#FF4500",
 
+      "#808080",
 
+      "#D1C4E9",
 
+      "#B3E5FC",
 
+      "#F0E68C",
 
+      "#E8B6C1",
 
+      "#C8C3D5",
 
+      "#A9B2D8",
 
+      "#FFC0CB",
 
+      "#9ACD32",
 
+      "#C71585",
 
+      "#6A5ACD",
 
+      "#8FBC8F",
 
+      "#A52A2A",
 
+      "#D2691E",
 
+      "#40E0D0",
 
+      "#00CED1",
 
+      "#B0E0E6",
 
+      "#FF1493",
 
+      "#AFB9D2",
 
+      "#C2DFFF",
 
+      "#F4A300",
 
+    ],
 
+  },
 
+  {
 
+    label: "商务",
 
+    colors: [
 
+      "#294F91",
 
+      "#555555",
 
+      "#B26F28",
 
+      "#2B666A",
 
+      "#B83C38",
 
+      "#615B9B",
 
+      "#898989",
 
+      "#9B982F",
 
+      "#377C57",
 
+      "#A52A2A",
 
+      "#B8860B",
 
+      "#6A5ACD",
 
+      "#20B2AA",
 
+      "#D3D3D3",
 
+      "#708090",
 
+      "#2F4F4F",
 
+      "#556B2F",
 
+      "#8B4513",
 
+      "#483D8B",
 
+      "#00BFFF",
 
+      "#C71585",
 
+      "#DDA0DD",
 
+      "#FF6347",
 
+      "#8B0000",
 
+      "#6B8E23",
 
+      "#B22222",
 
+      "#A52A2A",
 
+      "#CD5C5C",
 
+      "#F4A300",
 
+      "#FF8C00",
 
+      "#F0E68C",
 
+      "#F5F5DC",
 
+      "#3E8E41",
 
+      "#6A5ACD",
 
+      "#708090",
 
+      "#C0C0C0",
 
+      "#2F4F4F",
 
+      "#FFB6C1",
 
+      "#A8D5BA",
 
+      "#96C5AE",
 
+      "#E1C16E",
 
+    ],
 
+  },
 
+  {
 
+    label: "简洁",
 
+    colors: [
 
+      "#949FF8",
 
+      "#ABDEFC",
 
+      "#F3AC9B",
 
+      "#A989F7",
 
+      "#8DC1F9",
 
+      "#AF65AE",
 
+      "#423E78",
 
+      "#E48178",
 
+      "#449CB0",
 
+      "#F5F5F5",
 
+      "#FFD700",
 
+      "#DC143C",
 
+      "#32CD32",
 
+      "#FF6347",
 
+      "#00FA9A",
 
+      "#FF1493",
 
+      "#1E90FF",
 
+      "#FF4500",
 
+      "#C71585",
 
+      "#FF8C00",
 
+      "#9932CC",
 
+      "#6A5ACD",
 
+      "#4169E1",
 
+      "#32CD32",
 
+      "#FFB6C1",
 
+      "#D2691E",
 
+      "#8A2BE2",
 
+      "#B0C4DE",
 
+      "#FF69B4",
 
+      "#20B2AA",
 
+      "#F0E68C",
 
+      "#00BFFF",
 
+      "#F4A300",
 
+      "#FFD700",
 
+      "#DCDCDC",
 
+      "#DC143C",
 
+      "#B0E0E6",
 
+      "#A9A9A9",
 
+      "#FAEBD7",
 
+      "#8A2BE2",
 
+    ],
 
+  },
 
+  {
 
+    label: "渐变",
 
+    colors: [
 
+      "#F96F4A",
 
+      "#F78F4F",
 
+      "#FCB06C",
 
+      "#FFC475",
 
+      "#FFE286",
 
+      "#FDF1A9",
 
+      "#FBFFBE",
 
+      "#EEF9A7",
 
+      "#E4F39E",
 
+      "#CFEE9E",
 
+      "#A8DCA2",
 
+      "#85D0AE",
 
+      "#60C5A3",
 
+      "#52A3AE",
 
+      "#4FA4B5",
 
+      "#3586BF",
 
+      "#476CB9",
 
+      "#7A8FBD",
 
+      "#A9B8C6",
 
+      "#93B5D2",
 
+      "#D2C0C3",
 
+      "#BDC8D9",
 
+      "#B5B5B5",
 
+      "#90B3C3",
 
+      "#C6A9A1",
 
+      "#A8B3D0",
 
+      "#5E6B8D",
 
+      "#7B85A6",
 
+      "#A6A7D6",
 
+      "#3E5667",
 
+      "#485B72",
 
+      "#E1A692",
 
+      "#5E3B6E",
 
+      "#8D4F3F",
 
+      "#9F6B48",
 
+      "#A8C5A8",
 
+      "#F4A9C0",
 
+      "#D3C7D7",
 
+      "#A2A1D0",
 
+      "#9D7F6F",
 
+    ],
 
+  },
 
+];
 
+
 
+export const colorSchemesLine = [
 
+  {
 
+    label: "默认",
 
+    colors: [
 
+      "#636EFA",
 
+      "#EF553B",
 
+      "#00CC96",
 
+      "#AB63FA",
 
+      "#FFA15A",
 
+      "#19D3F3",
 
+      "#FF6692",
 
+      "#B6E880",
 
+      "#FF97FF",
 
+      "#FECB52",
 
+      "#636EFB",
 
+      "#EF553C",
 
+      "#00CC97",
 
+      "#AB63FB",
 
+      "#FFA15B",
 
+      "#19D3F4",
 
+      "#FF6693",
 
+      "#B6E881",
 
+      "#FF97FE",
 
+      "#FECB51",
 
+      "#1F77B4",
 
+      "#FF7F0E",
 
+      "#2CA02C",
 
+      "#D62728",
 
+      "#9467BD",
 
+      "#8C564B",
 
+      "#E377C2",
 
+      "#7F7F7F",
 
+      "#BCBD22",
 
+      "#17BECF",
 
+      "#1A55F2",
 
+      "#FF5733",
 
+      "#33FF57",
 
+      "#3375FF",
 
+      "#FF33A6",
 
+      "#57FF33",
 
+      "#3380FF",
 
+      "#FF8033",
 
+      "#57FF80",
 
+      "#8033FF",
 
+      "#FF3380",
 
+      "#FFD733",
 
+    ],
 
+  },
 
+  {
 
+    label: "复古",
 
+    colors: [
 
+      "#387FC9",
 
+      "#715219",
 
+      "#EA7637",
 
+      "#182B7C",
 
+      "#B6B642",
 
+      "#C83629",
 
+      "#672064",
 
+      "#E48179",
 
+      "#459BAF",
 
+      "#FF69B4",
 
+      "#800080",
 
+      "#7C3B6C",
 
+      "#DAA520",
 
+      "#BC8F8F",
 
+      "#F5DEB3",
 
+      "#D2B48C",
 
+      "#F0E68C",
 
+      "#FFF8DC",
 
+      "#FFE4B5",
 
+      "#C0C0C0",
 
+      "#6A3D9D",
 
+      "#9B7D37",
 
+      "#FDCB6E",
 
+      "#FF6F61",
 
+      "#D1A5A0",
 
+      "#8E5A78",
 
+      "#CF7555",
 
+      "#F29B60",
 
+      "#6F88B3",
 
+      "#5F3F7E",
 
+      "#B564A2",
 
+      "#FF8860",
 
+      "#B67E5F",
 
+      "#A67A92",
 
+      "#8B6B4E",
 
+      "#9E7F7C",
 
+      "#DC8F3D",
 
+      "#C7789E",
 
+      "#E5A745",
 
+      "#5C97A3",
 
+    ],
 
+  },
 
+  {
 
+    label: "淡雅",
 
+    colors: [
 
+      "#97A2F9",
 
+      "#EA8783",
 
+      "#F5C380",
 
+      "#F7E87C",
 
+      "#9EE68F",
 
+      "#62B6F6",
 
+      "#7FAAF0",
 
+      "#C49DF9",
 
+      "#424348",
 
+      "#32CD32",
 
+      "#8B008B",
 
+      "#FFD700",
 
+      "#32CD32",
 
+      "#A9A9A9",
 
+      "#B9E9E2",
 
+      "#FF6347",
 
+      "#E3B9E6",
 
+      "#00BFFF",
 
+      "#FF4500",
 
+      "#808080",
 
+      "#D1C4E9",
 
+      "#B3E5FC",
 
+      "#F0E68C",
 
+      "#E8B6C1",
 
+      "#C8C3D5",
 
+      "#A9B2D8",
 
+      "#FFC0CB",
 
+      "#9ACD32",
 
+      "#C71585",
 
+      "#6A5ACD",
 
+      "#8FBC8F",
 
+      "#A52A2A",
 
+      "#D2691E",
 
+      "#40E0D0",
 
+      "#00CED1",
 
+      "#B0E0E6",
 
+      "#FF1493",
 
+      "#AFB9D2",
 
+      "#C2DFFF",
 
+      "#F4A300",
 
+    ],
 
+  },
 
+  {
 
+    label: "商务",
 
+    colors: [
 
+      "#294F91",
 
+      "#555555",
 
+      "#B26F28",
 
+      "#2B666A",
 
+      "#B83C38",
 
+      "#615B9B",
 
+      "#898989",
 
+      "#9B982F",
 
+      "#377C57",
 
+      "#A52A2A",
 
+      "#B8860B",
 
+      "#6A5ACD",
 
+      "#20B2AA",
 
+      "#D3D3D3",
 
+      "#708090",
 
+      "#2F4F4F",
 
+      "#556B2F",
 
+      "#8B4513",
 
+      "#483D8B",
 
+      "#00BFFF",
 
+      "#C71585",
 
+      "#DDA0DD",
 
+      "#FF6347",
 
+      "#8B0000",
 
+      "#6B8E23",
 
+      "#B22222",
 
+      "#A52A2A",
 
+      "#CD5C5C",
 
+      "#F4A300",
 
+      "#FF8C00",
 
+      "#F0E68C",
 
+      "#F5F5DC",
 
+      "#3E8E41",
 
+      "#6A5ACD",
 
+      "#708090",
 
+      "#C0C0C0",
 
+      "#2F4F4F",
 
+      "#FFB6C1",
 
+      "#A8D5BA",
 
+      "#96C5AE",
 
+      "#E1C16E",
 
+    ],
 
+  },
 
+  {
 
+    label: "简洁",
 
+    colors: [
 
+      "#949FF8",
 
+      "#ABDEFC",
 
+      "#F3AC9B",
 
+      "#A989F7",
 
+      "#8DC1F9",
 
+      "#AF65AE",
 
+      "#423E78",
 
+      "#E48178",
 
+      "#449CB0",
 
+      "#F5F5F5",
 
+      "#FFD700",
 
+      "#DC143C",
 
+      "#32CD32",
 
+      "#FF6347",
 
+      "#00FA9A",
 
+      "#FF1493",
 
+      "#1E90FF",
 
+      "#FF4500",
 
+      "#C71585",
 
+      "#FF8C00",
 
+      "#9932CC",
 
+      "#6A5ACD",
 
+      "#4169E1",
 
+      "#32CD32",
 
+      "#FFB6C1",
 
+      "#D2691E",
 
+      "#8A2BE2",
 
+      "#B0C4DE",
 
+      "#FF69B4",
 
+      "#20B2AA",
 
+      "#F0E68C",
 
+      "#00BFFF",
 
+      "#F4A300",
 
+      "#FFD700",
 
+      "#DCDCDC",
 
+      "#DC143C",
 
+      "#B0E0E6",
 
+      "#A9A9A9",
 
+      "#FAEBD7",
 
+      "#8A2BE2",
 
+    ],
 
+  },
 
+  {
 
+    label: "渐变",
 
+    colors: [
 
+      "#F96F4A",
 
+      "#F78F4F",
 
+      "#FCB06C",
 
+      "#FFC475",
 
+      "#FFE286",
 
+      "#FDF1A9",
 
+      "#FBFFBE",
 
+      "#EEF9A7",
 
+      "#E4F39E",
 
+      "#CFEE9E",
 
+      "#A8DCA2",
 
+      "#85D0AE",
 
+      "#60C5A3",
 
+      "#52A3AE",
 
+      "#4FA4B5",
 
+      "#3586BF",
 
+      "#476CB9",
 
+      "#7A8FBD",
 
+      "#A9B8C6",
 
+      "#93B5D2",
 
+      "#D2C0C3",
 
+      "#BDC8D9",
 
+      "#B5B5B5",
 
+      "#90B3C3",
 
+      "#C6A9A1",
 
+      "#A8B3D0",
 
+      "#5E6B8D",
 
+      "#7B85A6",
 
+      "#A6A7D6",
 
+      "#3E5667",
 
+      "#485B72",
 
+      "#E1A692",
 
+      "#5E3B6E",
 
+      "#8D4F3F",
 
+      "#9F6B48",
 
+      "#A8C5A8",
 
+      "#F4A9C0",
 
+      "#D3C7D7",
 
+      "#A2A1D0",
 
+      "#9D7F6F",
 
+    ],
 
+  },
 
+];

+ 10 - 9
src/views/performance/assetssMag.vue
Wyświetl plik 

@@ -144,13 +144,20 @@
 
         <el-table-column
 
           align="center"
 
           label="待分析排位"
 
-          prop="dataTypeName"
 
+          prop="orderNum"
 
           min-width="200"
 
         >
 
           <template slot-scope="scope">
 
-            <span> {{ scope.row.dataTypeName }}</span>
 
+            <span> {{ scope.row.orderNum }}</span>
 
           </template>
 
         </el-table-column>
 
+        <!-- <el-table-column
 
+          align="center"
 
+          label="排队序号"
 
+          prop="orderNum"
 
+          min-width="200"
 
+        >
 
+        </el-table-column> -->
 
         <el-table-column
 
           align="center"
 
           label="数据类型名称"
 
@@ -158,6 +165,7 @@
 
           min-width="200"
 
         >
 
         </el-table-column>
 
+
 
         <!-- <el-table-column
 
           prop="errState"
 
           align="center"
 
@@ -261,13 +269,6 @@
 
               </el-dropdown-menu>
 
             </el-dropdown>
 
             <span v-else>/</span>
 
-            <!-- <el-button type="text" size="small">
 
-              {{
 
-                scope.row.errState == 0 && scope.row.analysisState !== -1
 
-                  ? "查看报告"
 
-                  : "/"
 
-              }}
 
-            </el-button> -->
 
           </template>
 
         </el-table-column>
 
         <el-table-column

+ 60 - 2
src/views/performance/components/PlotlyCharts.vue
Wyświetl plik 

@@ -1,5 +1,33 @@
 
 <template>
 
   <div>
 
+    <div style="display: flex; align-items: center">
 
+      <div
 
+        style="margin-right: 20px; display: flex; align-items: center"
 
+        v-if="comType === 'generalDrawing'"
 
+      >
 
+        <el-select
 
+          size="small"
 
+          v-model="color1"
 
+          @change="updateChartColor"
 
+          placeholder="选择配色方案"
 
+          style="width: 200px"
 
+        >
 
+          <el-option
 
+            v-for="(scheme, index) in colorSchemes"
 
+            :key="index"
 
+            :label="scheme.label"
 
+            :value="scheme.colors"
 
+            :style="getOptionStyle(scheme.colors)"
 
+          ></el-option>
 
+        </el-select>
 
+        <!-- <span style="margin-left: 10px">自定义颜色</span> -->
 
+      </div>
 
+      <div>
 
+        <el-button size="small" @click="toggleChartType">
 
+          切换为{{ chartType === "line" ? "面积图" : "折线图" }}
 
+        </el-button>
 
+      </div>
 
+    </div>
 
     <!-- 总图组件 -->
 
     <div
 
       v-if="comType === 'generalDrawing'"
 
@@ -14,6 +42,7 @@
 
 </template>
 
 <script>
 
 import Plotly from "plotly.js-dist";
 
+import { colorSchemesLine } from "@/views/overview/js/colors";
 
 export default {
 
   props: {
 
     lineMarkerData: Object,
 
@@ -23,7 +52,11 @@ export default {
 
   name: "PowerCurvePlot",
 
   data() {
 
     return {
 
+      chartType: "line", // 默认图表类型是折线图
 
       graphData: [], //分图数据length data
 
+      color1: [], // 默认颜色
 
+      // 配色方案列表（每个方案是一个颜色数组）
 
+      colorSchemes: [...colorSchemesLine],
 
       config: {
 
         powerConfig: {
 
           mode: "lines+markers",
 
@@ -53,7 +86,6 @@ export default {
 
             gridcolor: "rgb(255,255,255)",
 
             showgrid: true,
 
             zeroline: false,
 
-
 
             tickcolor: "rgb(255,255,255)",
 
           },
 
           legend: {
 
@@ -159,8 +191,12 @@ export default {
 
           y: turbine.yData.map((val) => (val !== null ? val : 0.0)),
 
           mode: "lines",
 
           name: turbine.enginName,
 
+          fill: this.chartType === "line" ? "none" : "tonexty",
 
           line: {
 
-            color: this.config.colors[index % this.config.colors.length],
 
+            color:
 
+              this.color1.length > 0
 
+                ? this.color1[index % this.color1.length]
 
+                : this.config.colors[index % this.config.colors.length],
 
           },
 
         });
 
       });
 
@@ -215,6 +251,7 @@ export default {
 
             y: turbine.yData.map((val) => (val !== null ? val : 0.0)),
 
             mode: "lines",
 
             name: turbine.enginName,
 
+            fill: this.chartType === "line" ? "none" : "tonexty",
 
             line: {
 
               color: isHighlighted ? "#1c77b3" : "#d3d3d3",
 
             },
 
@@ -243,6 +280,27 @@ export default {
 
         Plotly.newPlot(`chart-${this.inds}`, data, layout);
 
       }
 
     },
 
+    // 切换图表类型
 
+    toggleChartType() {
 
+      this.chartType = this.chartType === "line" ? "bar" : "line"; // 切换图表类型
 
+      // 重新绘制图表
 
+      this.updateCharts();
 
+    },
 
+    updateChartColor(color) {
 
+      // 更新图表颜色
 
+      // this.color1 = color;
 
+      this.updateCharts();
 
+    },
 
+    // 根据配色方案设置每个选项的样式
 
+    getOptionStyle(scheme) {
 
+      return {
 
+        background: `linear-gradient(to right, ${scheme.join(", ")})`,
 
+        color: "#fff",
 
+        height: "30px",
 
+        lineHeight: "30px",
 
+        borderRadius: "4px",
 
+      };
 
+    },
 
   },
 
 };
 
 </script>

+ 17 - 6
src/views/performance/components/analysisEvent.vue
Wyświetl plik 

@@ -1,7 +1,7 @@
 
 <!--
 
  * @Author: your name
 
  * @Date: 2024-05-29 09:13:51
 
- * @LastEditTime: 2025-02-13 14:53:10
 
+ * @LastEditTime: 2025-02-18 09:50:52
 
  * @LastEditors: bogon
 
  * @Description: In User Settings Edit
 
  * @FilePath: /performance-test/src/views/performance/components/analysisEvent.vue
 
@@ -76,6 +76,7 @@
 
                   collapse-tags
 
                   multiple
 
                   clearable
 
+                  @change="handleScadaAnalysis"
 
                 >
 
                   <el-checkbox v-model="checked" @change="selectAll"
 
                     >全选</el-checkbox
 
@@ -770,13 +771,22 @@ export default {
 
   },
 
   methods: {
 
     getTimeList() {
 
+      let scada = [];
 
+      if (this.form.scada) {
 
+        scada.push(this.form.scada);
 
+      } else {
 
+        scada = this.form.configAnalysis.map((item) => {
 
+          console.log(item.split("|")[1]);
 
+          return item.split("|")[1];
 
+        });
 
+        console.log([...new Set(scada)], "scada");
 
+      }
 
       axios
 
         .post("/transDataWeb/dataTransfer/getTimeRange", {
 
-          transferType: this.form.scada,
 
+          transferType: [...new Set(scada)],
 
           windFarmCode: this.$route.query.fieldEngineCode,
 
         })
 
         .then((res) => {
 
-          console.log(res, "jieguo ");
 
           if (res.data.code === 200) {
 
             this.timeRanges = res.data.datas;
 
             console.log(this.timeRanges, "this.timeRanges");
 
@@ -819,12 +829,13 @@ export default {
 
       });
 
       return isDisabled;
 
     },
 
-    handleScada() {
 
-      this.getQueryDataTime();
 
+    handleScadaAnalysis() {
 
+      this.getTimeList();
 
+      // this.getQueryDataTime();
 
     },
 
     handleScada() {
 
       this.getTimeList();
 
-      this.getQueryDataTime();
 
+      // this.getQueryDataTime();
 
     },
 
     async getQueryDataTime() {
 
       const res = await queryDataTime({

+ 46 - 15
src/views/performance/components/chartsCom/GeneratorTemperature.vue
Wyświetl plik 

@@ -1,7 +1,7 @@
 
 <!--
 
  * @Author: your name
 
  * @Date: 2025-01-21 11:18:49
 
- * @LastEditTime: 2025-02-12 15:18:54
 
+ * @LastEditTime: 2025-02-18 15:42:40
 
  * @LastEditors: bogon
 
  * @Description: In User Settings Edit
 
  * @FilePath: /performance-test/src/views/performance/components/chartsCom/GeneratorTemperature.vue
 
@@ -10,18 +10,27 @@
 
   <div>
 
     <!-- 图表控制面板 总图-->
 
     <div style="display: flex; align-items: center">
 
-      <!-- <div style="margin-right: 20px; display: flex; align-items: center">
 
-          <el-color-picker
 
-            size="small"
 
-            v-model="color1"
 
-            show-alpha
 
-            @change="updateChartColor"
 
-          ></el-color-picker>
 
-          <span style="margin-left: 10px">自定义颜色</span>
 
-        </div> -->
 
+      <div style="margin-right: 20px; display: flex; align-items: center">
 
+        <el-select
 
+          size="small"
 
+          v-model="color1"
 
+          @change="updateChartColor"
 
+          placeholder="选择配色方案"
 
+          style="width: 200px"
 
+        >
 
+          <el-option
 
+            v-for="(scheme, index) in colorSchemes"
 
+            :key="index"
 
+            :label="scheme.label"
 
+            :value="scheme.colors"
 
+            :style="getOptionStyle(scheme.colors)"
 
+          ></el-option>
 
+        </el-select>
 
+        <!-- <span style="margin-left: 10px">自定义颜色</span> -->
 
+      </div>
 
       <div>
 
         <el-button size="small" @click="toggleChartType">
 
-          切换为{{ chartType === "line" ? "柱状图" : "折线图" }}
 
+          切换为{{ chartType === "line" ? "面积图" : "折线图" }}
 
         </el-button>
 
       </div>
 
     </div>
 
@@ -41,6 +50,7 @@
 
 import { nextTick } from "vue"; // 导入 nextTick
 
 import Plotly from "plotly.js-dist";
 
 import axios from "axios";
 
+import { colorSchemesLine } from "@/views/overview/js/colors";
 
 import { myMixin } from "@/mixins/chartRequestMixin"; // 假设你需要的 mixin
 
 
 export default {
 
@@ -60,8 +70,11 @@ export default {
 
   data() {
 
     return {
 
       chartData: {},
 
+      color1: [], // 默认颜色
 
+      // 配色方案列表（每个方案是一个颜色数组）
 
+      colorSchemes: [...colorSchemesLine],
 
       chartType: "line", // 默认图表类型是折线图
 
-      color1: "#406DAB", // 默认颜色
 
+
 
       loading: false,
 
       isError: false,
 
       colors: [
 
@@ -126,17 +139,25 @@ export default {
 
           name: turbine.Name, // 使用机组名称
 
           line: {
 
             dash: this.typeLine[index % this.colors.length],
 
-            color: this.colors[index % this.colors.length], // 为每个机组分配不同的颜色
 
+            color:
 
+              this.color1.length > 0
 
+                ? this.color1[index % this.color1.length]
 
+                : this.colors[index % this.colors.length], // 为每个机组分配不同的颜色
 
           },
 
           marker: {
 
-            color: this.colors[index % this.colors.length], // 为每个机组分配不同的颜色
 
+            color:
 
+              this.color1.length > 0
 
+                ? this.color1[index % this.color1.length]
 
+                : this.colors[index % this.colors.length], // 为每个机组分配不同的颜色
 
           },
 
         };
 
 
         if (this.chartType === "line") {
 
+          chartConfig.fill = "none";
 
           chartConfig.mode = "lines"; // 如果是折线图
 
         } else if (this.chartType === "bar") {
 
-          chartConfig.type = "bar"; // 如果是柱状图
 
+          chartConfig.fill = "tonexty";
 
+          // chartConfig.type = "bar"; // 如果是柱状图
 
         }
 
 
         data.push(chartConfig);
 
@@ -176,6 +197,16 @@ export default {
 
     updateChartColor() {
 
       this.drawChart(); // 更新颜色后重新绘制图表
 
     },
 
+    // 根据配色方案设置每个选项的样式
 
+    getOptionStyle(scheme) {
 
+      return {
 
+        background: `linear-gradient(to right, ${scheme.join(", ")})`,
 
+        color: "#fff",
 
+        height: "30px",
 
+        lineHeight: "30px",
 
+        borderRadius: "4px",
 
+      };
 
+    },
 
   },
 
 };
 
 </script>

+ 52 - 9
src/views/performance/components/chartsCom/NoColourBandTwoDMarkerChart.vue
Wyświetl plik 

@@ -1,7 +1,7 @@
 
 <!--
 
  * @Author: your name
 
  * @Date: 2025-01-17 17:22:04
 
- * @LastEditTime: 2025-02-12 15:22:42
 
+ * @LastEditTime: 2025-02-17 17:36:23
 
  * @LastEditors: bogon
 
  * @Description: In User Settings Edit
 
  * @FilePath: /performance-test/src/views/performance/components/chartsCom/NoColourBandTwoDMarkerChart.vue
 
@@ -12,23 +12,52 @@
 
     <template>
 
       <div style="display: flex; align-items: center; margin-top: 20px">
 
         <div style="margin-right: 20px; display: flex; align-items: center">
 
-          <el-color-picker
 
+          <!-- <el-color-picker
 
             size="small"
 
             v-model="color1"
 
             show-alpha
 
             @change="updateChartColor"
 
           ></el-color-picker>
 
-          <span style="margin-left: 10px">自定义颜色</span>
 
+          <span style="margin-left: 10px">自定义颜色</span> -->
 
+          <el-select
 
+            size="small"
 
+            v-model="color1"
 
+            @change="updateChartColor"
 
+            placeholder="选择配色方案"
 
+            style="width: 200px"
 
+          >
 
+            <el-option
 
+              v-for="(scheme, index) in colorSchemes"
 
+              :key="index"
 
+              :label="scheme.label"
 
+              :value="scheme.colors"
 
+              :style="getOptionStyle(scheme.colors)"
 
+            ></el-option>
 
+          </el-select>
 
         </div>
 
         <!-- 图表类型切换按钮 -->
 
-        <div>
 
+        <!-- <div>
 
           <el-button size="small" @click="setChartType('scatter')"
 
             >散点图</el-button
 
           >
 
           <el-button size="small" @click="setChartType('line')"
 
             >折线图</el-button
 
           >
 
-        </div>
 
+        </div> -->
 
+      </div>
 
+      <!-- 点大小控制 -->
 
+      <div style="display: flex; align-items: center">
 
+        <!-- <span style="margin-right: 10px">点大小</span> -->
 
+        <el-slider
 
+          v-model="pointSize"
 
+          :min="3"
 
+          :max="15"
 
+          :step="1"
 
+          label="点的大小"
 
+          show-stops
 
+          style="width: 150px"
 
+          @change="updateChartColor"
 
+        ></el-slider>
 
       </div>
 
       <div v-loading="loading" ref="plotlyChart" style="height: 400px">
 
         <el-empty v-if="isError" description="请求失败"></el-empty>
 
@@ -40,6 +69,7 @@
 
 <script>
 
 import Plotly from "plotly.js-dist";
 
 import axios from "axios";
 
+import { colorSchemes } from "@/views/overview/js/colors";
 
 import { myMixin } from "@/mixins/chartRequestMixin";
 
 
 export default {
 
@@ -55,9 +85,13 @@ export default {
 
   },
 
   data() {
 
     return {
 
+      pointSize: 5, // 默认点大小
 
+      color1: colorSchemes[0].colors, // 默认颜色
 
+      // 配色方案列表（每个方案是一个颜色数组）
 
+      colorSchemes: [...colorSchemes],
 
       chartData: {},
 
       chartType: "scatter", // 初始化为散点图 (scatter)
 
-      color1: "", // 默认颜色
 
+
 
       selectedPoints: [],
 
       originalColors: [],
 
       originalSizes: [],
 
@@ -67,6 +101,16 @@ export default {
 
     this.getData();
 
   },
 
   methods: {
 
+    // 根据配色方案设置每个选项的样式
 
+    getOptionStyle(scheme) {
 
+      return {
 
+        background: `linear-gradient(to right, ${scheme.join(", ")})`,
 
+        color: "#fff",
 
+        height: "30px",
 
+        lineHeight: "30px",
 
+        borderRadius: "4px",
 
+      };
 
+    },
 
     async getData() {
 
       if (this.fileAddr !== "") {
 
         try {
 
@@ -122,7 +166,7 @@ export default {
 
             // colorbar: {
 
             //   title: data.colorbartitle, // 色标标题
 
             // },
 
-            size: new Array(data.xData.length).fill(6), // 初始点大小
 
+            size: new Array(data.xData.length).fill(this.pointSize), // 初始点大小
 
           },
 
         };
 
       } else if (this.chartType === "line") {
 
@@ -211,7 +255,6 @@ export default {
 
         Plotly.relayout(plotElement, layout); // 使用 relayout 来确保自定义按钮应用
 
       });
 
     },
 
-
 
     handleSelectClick(gd) {
 
       // 绑定 plotly_click 事件
 
       gd.on("plotly_click", (data) => {
 
@@ -341,7 +384,7 @@ export default {
 
 
     updateChartColor(color) {
 
       // 更新图表颜色
 
-      this.color1 = color;
 
+      // this.color1 = color;
 
       console.log(this.color1, "this.color1");
 
       this.drawChart();
 
     },

+ 45 - 30
src/views/performance/components/chartsCom/TwoDMarkersChart.vue
Wyświetl plik 

@@ -4,12 +4,21 @@
 
     <template>
 
       <div style="display: flex; align-items: center; padding-top: 20px">
 
         <div style="margin-right: 20px; display: flex; align-items: center">
 
-          <el-color-picker
 
+          <el-select
 
             size="small"
 
             v-model="color1"
 
-            show-alpha
 
             @change="updateChartColor"
 
-          ></el-color-picker>
 
+            placeholder="选择配色方案"
 
+            style="width: 200px"
 
+          >
 
+            <el-option
 
+              v-for="(scheme, index) in colorSchemes"
 
+              :key="index"
 
+              :label="scheme.label"
 
+              :value="scheme.colors"
 
+              :style="getOptionStyle(scheme.colors)"
 
+            ></el-option>
 
+          </el-select>
 
           <span style="margin-left: 10px">自定义颜色</span>
 
         </div>
 
         <!-- 图表类型切换按钮 -->
 
@@ -22,6 +31,20 @@
 
           >
 
         </div>
 
       </div>
 
+      <!-- 点大小控制 -->
 
+      <div style="display: flex; align-items: center">
 
+        <!-- <span style="margin-right: 10px">点大小</span> -->
 
+        <el-slider
 
+          v-model="pointSize"
 
+          :min="3"
 
+          :max="15"
 
+          :step="1"
 
+          label="点的大小"
 
+          show-stops
 
+          style="width: 150px"
 
+          @change="updateChartColor"
 
+        ></el-slider>
 
+      </div>
 
       <!-- <div v-loading="$parent.requestRecord[index] === 'start'"> -->
 
       <div
 
         v-loading="loading"
 
@@ -39,7 +62,7 @@
 
 import Plotly from "plotly.js-dist";
 
 import axios from "axios";
 
 import { myMixin } from "@/mixins/chartRequestMixin";
 
-
 
+import { colorSchemes } from "@/views/overview/js/colors";
 
 export default {
 
   props: {
 
     fileAddr: {
 
@@ -52,31 +75,13 @@ export default {
 
   },
 
   data() {
 
     return {
 
-      chartData: {
 
-        // analysisTypeCode: "动态偏航误差",
 
-        // engineCode: "WEM00026",
 
-        // engineTypeName: "",
 
-        // xaixs: "对风角度(度)",
 
-        // yaixs: "风速(m/s)",
 
-        // data: [
 
-        //   {
 
-        //     engineName: "#01",
 
-        //     engineCode: "WOG00935",
 
-        //     title: "动态偏航误差分析-#01",
 
-        //     xData: [
 
-        //       -15.4, -9.2, 4, 7, 9, -6.7, -5.2, -3.9, 0.9, 5.4, 6.4, 12.5, -8.1,
 
-        //       3.0, -4.5,
 
-        //     ],
 
-        //     yData: [
 
-        //       3.3, 3.7, 1290.0, 10, 7, 8, 858.0, 987.0, 1159.0, 1091.0, 979.0,
 
-        //       1023.5, 1210.1, 1105.4, 970.2,
 
-        //     ],
 
-        //     colorbartitle: "密度",
 
-        //   },
 
-        // ],
 
-      },
 
+      pointSize: 5, // 默认点大小
 
+      color1: colorSchemes[0].colors, // 默认颜色
 
+      // 配色方案列表（每个方案是一个颜色数组）
 
+      colorSchemes: [...colorSchemes],
 
+      chartData: {},
 
       chartType: "scatter", // 初始化为散点图 (scatter)
 
-      color1: "", // 默认颜色
 
+      // color1: "", // 默认颜色
 
       selectedPoints: [],
 
       originalColors: [],
 
       originalSizes: [],
 
@@ -87,6 +92,16 @@ export default {
 
     this.getData();
 
   },
 
   methods: {
 
+    // 根据配色方案设置每个选项的样式
 
+    getOptionStyle(scheme) {
 
+      return {
 
+        background: `linear-gradient(to right, ${scheme.join(", ")})`,
 
+        color: "#fff",
 
+        height: "30px",
 
+        lineHeight: "30px",
 
+        borderRadius: "4px",
 
+      };
 
+    },
 
     async getData() {
 
       if (this.fileAddr !== "") {
 
         try {
 
@@ -146,7 +161,7 @@ export default {
 
             colorbar: {
 
               title: data.colorbartitle, // 色标标题
 
             },
 
-            size: new Array(data.xData.length).fill(6), // 初始点大小
 
+            size: new Array(data.xData.length).fill(this.pointSize), // 点的大小
 
           },
 
         };
 
       } else if (this.chartType === "line") {
 
@@ -363,7 +378,7 @@ export default {
 
 
     updateChartColor(color) {
 
       // 更新图表颜色
 
-      this.color1 = color;
 
+      // this.color1 = color;
 
       console.log(this.color1, "this.color1");
 
       this.drawChart();
 
     },

+ 41 - 30
src/views/performance/components/chartsCom/lineAndChildLine.vue
Wyświetl plik 

@@ -2,18 +2,24 @@
 
   <div>
 
     <!-- 图表控制面板 总图-->
 
     <div style="display: flex; align-items: center">
 
-      <!-- <div style="margin-right: 20px; display: flex; align-items: center">
 
-        <el-color-picker
 
-          size="small"
 
-          v-model="color1"
 
-          show-alpha
 
-          @change="updateChartColor"
 
-        ></el-color-picker>
 
-        <span style="margin-left: 10px">自定义颜色</span>
 
-      </div> -->
 
+      <el-select
 
+        size="small"
 
+        v-model="color1"
 
+        @change="updateChartColor"
 
+        placeholder="选择配色方案"
 
+        style="width: 200px"
 
+      >
 
+        <el-option
 
+          v-for="(scheme, index) in colorSchemes"
 
+          :key="index"
 
+          :label="scheme.label"
 
+          :value="scheme.colors"
 
+          :style="getOptionStyle(scheme.colors)"
 
+        ></el-option>
 
+      </el-select>
 
       <div>
 
         <el-button size="small" @click="toggleChartType">
 
-          切换为{{ chartType === "line" ? "柱状图" : "折线图" }}
 
+          切换为{{ chartType === "line" ? "面积图" : "折线图" }}
 
         </el-button>
 
       </div>
 
     </div>
 
@@ -33,6 +39,7 @@
 
 import { nextTick } from "vue"; // 导入 nextTick
 
 import Plotly from "plotly.js-dist";
 
 import axios from "axios";
 
+import { colorSchemesLine } from "@/views/overview/js/colors";
 
 import { myMixin } from "@/mixins/chartRequestMixin"; // 假设你需要的 mixin
 
 
 export default {
 
@@ -53,24 +60,11 @@ export default {
 
     return {
 
       chartData: {},
 
       chartType: "line", // 默认图表类型是折线图
 
-      color1: "#406DAB", // 默认颜色
 
+      color1: [], // 默认颜色
 
+      // 配色方案列表（每个方案是一个颜色数组）
 
+      colorSchemes: [...colorSchemesLine],
 
       loading: false,
 
       isError: false,
 
-      // colors: [
 
-      //   "#DFEDC1",
 
-      //   "#DBEEBC",
 
-      //   "#A8D7BE",
 
-      //   "#8ECAC1",
 
-      //   "#77BDC2",
 
-      //   "#64ADC2",
 
-      //   "#559ABE",
 
-      //   "#4884B7",
 
-      //   "#406DAB",
 
-      //   "#3856A0",
 
-      //   "#314291",
 
-      //   "#28357A",
 
-      //   "#1A285E",
 
-      // ],
 
       colors: [
 
         "#636EFA",
 
         "#EF553B",
 
@@ -132,7 +126,6 @@ export default {
 
           const resultChartsData = await axios.get(this.fileAddr, {
 
             cancelToken: this.cancelToken.token,
 
           });
 
-          console.log("resultChartsData.data", resultChartsData);
 
           this.chartData = resultChartsData.data;
 
 
           // 使用 nextTick 来确保 DOM 渲染完成后绘制图表
 
@@ -161,17 +154,25 @@ export default {
 
             y: turbine.yData, // Y 数据
 
             name: turbine.engineName, // 使用机组名称
 
             line: {
 
-              color: this.colors[index % this.colors.length], // 为每个机组分配不同的颜色
 
+              color:
 
+                this.color1.length > 0
 
+                  ? this.color1[index % this.color1.length]
 
+                  : this.colors[index % this.colors.length], // 为每个机组分配不同的颜色
 
             },
 
             marker: {
 
-              color: this.colors[index % this.colors.length], // 为每个机组分配不同的颜色
 
+              color:
 
+                this.color1.length > 0
 
+                  ? this.color1[index % this.color1.length]
 
+                  : this.colors[index % this.colors.length], // 为每个机组分配不同的颜色
 
             },
 
           };
 
 
           if (this.chartType === "line") {
 
             chartConfig.mode = "lines"; // 如果是折线图
 
+            chartConfig.fill = "none";
 
           } else if (this.chartType === "bar") {
 
-            chartConfig.type = "bar"; // 如果是柱状图
 
+            // chartConfig.type = "bar"; // 如果是柱状图
 
+            chartConfig.fill = "tonexty";
 
           }
 
 
           data.push(chartConfig);
 
@@ -226,6 +227,16 @@ export default {
 
     updateChartColor() {
 
       this.drawChart(); // 更新颜色后重新绘制图表
 
     },
 
+    // 根据配色方案设置每个选项的样式
 
+    getOptionStyle(scheme) {
 
+      return {
 
+        background: `linear-gradient(to right, ${scheme.join(", ")})`,
 
+        color: "#fff",
 
+        height: "30px",
 
+        lineHeight: "30px",
 
+        borderRadius: "4px",
 
+      };
 
+    },
 
   },
 
 };
 
 </script>

+ 5 - 12
src/views/performance/components/chartsCom/lineChartsFen.vue
Wyświetl plik 

@@ -1,7 +1,7 @@
 
 <!--
 
  * @Author: your name
 
  * @Date: 2025-01-20 11:41:41
 
- * @LastEditTime: 2025-02-12 15:15:10
 
+ * @LastEditTime: 2025-02-18 15:45:06
 
  * @LastEditors: bogon
 
  * @Description: In User Settings Edit
 
  * @FilePath: /performance-test/src/views/performance/components/chartsCom/lineChartsFen.vue
 
@@ -10,18 +10,9 @@
 
   <div>
 
     <!-- 图表控制面板 分图-->
 
     <div style="display: flex; align-items: center">
 
-      <div style="margin-right: 20px; display: flex; align-items: center">
 
-        <el-color-picker
 
-          size="small"
 
-          v-model="color1"
 
-          show-alpha
 
-          @change="updateChartColor"
 
-        ></el-color-picker>
 
-        <span style="margin-left: 10px">自定义颜色</span>
 
-      </div>
 
       <div>
 
         <el-button size="small" @click="toggleChartType">
 
-          切换为{{ chartType === "line" ? "柱状图" : "折线图" }}
 
+          切换为{{ chartType === "line" ? "面积图" : "折线图" }}
 
         </el-button>
 
       </div>
 
     </div>
 
@@ -138,9 +129,11 @@ export default {
 
         // 判断是否为线图
 
         if (this.chartType === "line") {
 
           chartConfig.mode = "lines"; // 如果是折线图
 
+          chartConfig.fill = "none";
 
           lineData.push(chartConfig); // 将线图数据存储到 lineData 中
 
         } else if (this.chartType === "bar") {
 
-          chartConfig.type = "bar"; // 如果是柱状图
 
+          // chartConfig.type = "bar"; // 如果是柱状图
 
+          chartConfig.fill = "tonexty";
 
           data.push(chartConfig); // 将柱状图数据存储到 data 中
 
         }
 
       });

+ 114 - 36
src/views/performance/components/chartsCom/powerMarkers2DCharts.vue
Wyświetl plik 

@@ -1,7 +1,7 @@
 
 <!--
 
  * @Author: your name
 
  * @Date: 2024-09-11 14:32:12
 
- * @LastEditTime: 2025-02-12 16:27:11
 
+ * @LastEditTime: 2025-02-17 16:55:46
 
  * @LastEditors: bogon
 
  * @Description: In User Settings Edit
 
  * @FilePath: /performance-test/src/views/performance/components/chartsCom/powerMarkers2DCharts.vue
 
@@ -11,22 +11,43 @@
 
 <!-- powerMarkers2DCharts
 
     <h1>逐月有功功率散点2D分析</h1> -->
 
 <!-- <h1>偏航控制策略异常检测 2D</h1>  目前没找到这个分析类型-->
 
-
 
 <template>
 
   <div style="min-height: 300px">
 
     <!-- 2D散点图 -->
 
     <template>
 
       <div style="display: flex; align-items: center; margin-top: 20px">
 
         <div style="margin-right: 20px; display: flex; align-items: center">
 
-          <el-color-picker
 
+          <el-select
 
             size="small"
 
             v-model="color1"
 
-            show-alpha
 
             @change="updateChartColor"
 
-          ></el-color-picker>
 
-          <span style="margin-left: 10px">自定义颜色</span>
 
+            placeholder="选择配色方案"
 
+            style="width: 200px"
 
+          >
 
+            <el-option
 
+              v-for="(scheme, index) in colorSchemes"
 
+              :key="index"
 
+              :label="scheme.label"
 
+              :value="scheme.colors"
 
+              :style="getOptionStyle(scheme.colors)"
 
+            ></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="3"
 
+          :max="15"
 
+          :step="1"
 
+          label="点的大小"
 
+          show-stops
 
+          style="width: 150px"
 
+          @change="updateChartColor"
 
+        ></el-slider>
 
+      </div>
 
       <div
 
         v-loading="loading"
 
         :ref="`plotlyChart-${index}`"
 
@@ -42,7 +63,7 @@
 
 import Plotly from "plotly.js-dist";
 
 import axios from "axios";
 
 import { myMixin } from "@/mixins/chartRequestMixin";
 
-
 
+import { colorSchemes } from "@/views/overview/js/colors";
 
 export default {
 
   mixins: [myMixin],
 
   props: {
 
@@ -56,28 +77,42 @@ export default {
 
   },
 
   data() {
 
     return {
 
+      pointSize: 5, // 默认点大小
 
       chartData: {},
 
       chartType: "scatter", // 默认显示散点图
 
-      color1: "", // 默认颜色
 
+      color1: colorSchemes[0].colors, // 默认颜色
 
       selectedPoints: [],
 
       originalColors: [],
 
       originalSizes: [],
 
+      // 配色方案列表（每个方案是一个颜色数组）
 
+      colorSchemes: [...colorSchemes],
 
     };
 
   },
 
   async mounted() {
 
     this.getData();
 
+    this.color1 = colorSchemes[0].colors;
 
+    // console.log(this.color1, colorSchemes[0].colors, "color1");
 
   },
 
   methods: {
 
+    // 根据配色方案设置每个选项的样式
 
+    getOptionStyle(scheme) {
 
+      return {
 
+        background: `linear-gradient(to right, ${scheme.join(", ")})`,
 
+        color: "#fff",
 
+        height: "30px",
 
+        lineHeight: "30px",
 
+        borderRadius: "4px",
 
+      };
 
+    },
 
     async getData() {
 
       if (this.fileAddr !== "") {
 
         try {
 
           this.loading = true;
 
           this.cancelToken = axios.CancelToken.source();
 
-          console.log(this.cancelToken);
 
+
 
           const resultChartsData = await axios.get(this.fileAddr, {
 
             cancelToken: this.cancelToken.token,
 
           });
 
-          console.log(resultChartsData);
 
           this.chartData = resultChartsData.data;
 
           this.drawChart();
 
           this.isError = false;
 
@@ -89,17 +124,50 @@ export default {
 
       }
 
     },
 
     drawChart() {
 
+      // 提取散点数据和线数据
 
       const data =
 
         this.chartData.data &&
 
         this.chartData.data.filter(
 
           (item) => item.enginName !== "合同功率曲线"
 
         )[0]; // 点数据
 
+
 
       const lineData =
 
         this.chartData.data &&
 
         this.chartData.data.filter(
 
           (item) => item.enginName === "合同功率曲线"
 
         )[0]; // 线数据
 
 
+      // 提取唯一时间标签，并计算 tickvals 和 ticktext
 
+      const uniqueTimeLabels = [...new Set(data.colorbar)]; // 从 colorbar 中提取唯一的时间标签
 
+      const tickvals = uniqueTimeLabels.map((label, index) => index + 1); // 根据时间标签生成 tickvals
 
+      const ticktext = uniqueTimeLabels.map((dateStr) => {
 
+        const date = new Date(dateStr);
 
+        return date.toLocaleDateString("en-CA", {
 
+          year: "numeric",
 
+          month: "2-digit",
 
+        }); // 格式化为 'yyyy-MM'
 
+      }); // 使用格式化后的时间作为 ticktext
 
+      const timeMapping = uniqueTimeLabels.reduce((acc, curr, index) => {
 
+        acc[curr] = index + 1;
 
+        return acc;
 
+      }, {});
 
+      // 获取 yData 的最小值和最大值来做比例值的计算
 
+      const minValue = Math.min(...tickvals);
 
+      const maxValue = Math.max(...tickvals);
 
+      console.log(tickvals, ticktext, this.color1, "tickvals");
 
+      // 计算比例值
 
+      const colors = ticktext.map((item, ind) => {
 
+        // 计算比例值（可以根据需要调整映射的数据范围）
 
+        const proportion = (tickvals[ind] - minValue) / (maxValue - minValue);
 
+        return [
 
+          proportion, // 比例值
 
+          this.color1[ind], // 对应的颜色
 
+        ];
 
+      });
 
+      console.log(colors, "colors");
 
+      // 将时间字符串映射为数字
 
+      const colorValues = data.colorbar.map((date, index) => timeMapping[date]);
 
+
 
       let scatterTrace = {}; // 用于存放散点图的 trace
 
       let lineTrace = {}; // 用于存放折线图的 trace
 
 
@@ -107,8 +175,8 @@ export default {
 
       this.originalColors = [...data.yData];
 
       this.originalSizes = new Array(data.xData.length).fill(6); // 初始点大小
 
 
+      // 绘制散点图
 
       if (this.chartType === "scatter") {
 
-        // 散点图
 
         scatterTrace = {
 
           x: data.xData,
 
           y: data.yData,
 
@@ -116,11 +184,12 @@ export default {
 
           type: "scattergl", // 使用散点图
 
           text: data.engineName, // 提示文本
 
           marker: {
 
-            color: data.yData, // 根据 yData 设置颜色
 
+            color: colorValues, // 使用时间数据来映射颜色
 
             colorscale: this.color1
 
               ? [
 
-                  [0, "#F9FDD2"], // 颜色从 this.color1 开始
 
-                  [1, this.color1], // 结束颜色为其他颜色
 
+                  ...colors,
 
+                  // [0, this.color1[0]], // 颜色从 this.color1 开始
 
+                  // [1, this.color1[this.color1.length - 1]], // 结束颜色为其他颜色
 
                 ]
 
               : [
 
                   [0, "#F9FDD2"],
 
@@ -131,27 +200,36 @@ export default {
 
                   [0.75, "#407DB3"],
 
                   [0.9, "#2E4C9A"],
 
                   [1, "#1B2973"],
 
-                ],
 
+                ], // 默认颜色渐变
 
             colorbar: {
 
               title: data.colorbartitle, // 色标标题
 
+              tickvals: tickvals, // 设置刻度值
 
+              ticktext: ticktext, // 设置刻度文本
 
+              tickmode: "array", // 使用数组模式
 
+              tickangle: -45, // 可选：调整刻度文本的角度
 
             },
 
-            size: new Array(data.xData.length).fill(6), // 初始点大小
 
+            size: new Array(data.xData.length).fill(this.pointSize), // 点的大小
 
+          },
 
+          hovertemplate:
 
+            "风速: %{x}(m/s)<br>" +
 
+            "有功功率: %{y}(kw)<br>" +
 
+            `时间: %{customdata}<extra></extra>`, // 在 hover 中显示格式化后的时间
 
+          customdata: data.colorbar, // 将格式化后的时间存入 customdata
 
+        };
 
+      }
 
+      if (lineData) {
 
+        // 绘制折线图
 
+        lineTrace = {
 
+          x: lineData.xData, // 线数据的 xData
 
+          y: lineData.yData, // 线数据的 yData
 
+          mode: "lines+markers", // 线和点同时显示
 
+          type: "scattergl", // 使用 scattergl 类型
 
+          text: lineData.engineName, // 提示文本
 
+          line: {
 
+            color: "red", // 线条颜色
 
           },
 
         };
 
       }
 
-
 
-      // 折线图
 
-      lineTrace = {
 
-        x: lineData.xData, // 线数据的 xData
 
-        y: lineData.yData, // 线数据的 yData
 
-        mode: "lines+markers", // 线和点同时显示
 
-        type: "scattergl", // 使用 scattergl 类型
 
-        text: lineData.engineName, // 提示文本
 
-        line: {
 
-          // color: this.color1 || "red", // 使用自定义颜色
 
-          color: "red",
 
-        },
 
-      };
 
 
       // 图表布局
 
       const layout = {
 
@@ -175,6 +253,7 @@ export default {
 
         gridcolor: "#fff", // 设置网格线颜色
 
       };
 
 
+      // 配置工具栏按钮
 
       const config = {
 
         modeBarButtonsToAdd: [
 
           {
 
@@ -194,27 +273,26 @@ export default {
 
           },
 
         ],
 
         modeBarButtonsToRemove: [
 
-          // 移除不需要的工具按钮
 
-          "lasso2d",
 
+          "lasso2d", // 移除不需要的工具按钮
 
         ],
 
         displaylogo: false,
 
         editable: true,
 
         scrollZoom: false,
 
       };
 
 
-      // 合并 scatter 和 line 数据
 
+      // 合并散点和折线图的数据
 
       const traces = [];
 
       if (scatterTrace) traces.push(scatterTrace); // 如果有散点数据
 
       if (lineTrace) traces.push(lineTrace); // 如果有线图数据
 
 
       // 使用 Plotly 绘制图表
 
       Plotly.react(
 
-        this.$refs[`plotlyChart-${this.index}`],
 
+        this.$refs[`plotlyChart-${this.index}`], // 这里是对 DOM 元素的引用
 
         traces,
 
         layout,
 
         config
 
       ).then(() => {
 
-        // 确保在图表加载完成后设置工具栏按钮
 
+        // 确保图表加载完成后设置工具栏按钮
 
         const plotElement = this.$refs[`plotlyChart-${this.index}`];
 
         Plotly.relayout(plotElement, layout); // 使用 relayout 来确保自定义按钮应用
 
       });
 
@@ -343,8 +421,8 @@ export default {
 
     },
 
     updateChartColor(color) {
 
       // 更新图表颜色
 
-      this.color1 = color;
 
-      console.log(this.color1, "this.color1");
 
+      console.log(color, "this.color1");
 
+      // this.color1 = color;
 
       this.drawChart();
 
     },
 
   },

+ 46 - 8
src/views/performance/components/chartsCom/yawErrorLine.vue
Wyświetl plik 

@@ -1,7 +1,7 @@
 
 <!--
 
  * @Author: your name
 
  * @Date: 2025-01-22 09:42:59
 
- * @LastEditTime: 2025-02-12 15:24:21
 
+ * @LastEditTime: 2025-02-18 16:08:23
 
  * @LastEditors: bogon
 
  * @Description: In User Settings Edit
 
  * @FilePath: /performance-test/src/views/performance/components/chartsCom/yawErrorLine.vue
 
@@ -9,10 +9,28 @@
 
 <template>
 
   <div>
 
     <!-- 图表控制面板 总图-->
 
-    <div style="display: flex; align-items: center">
 
+    <div style="display: flex; align-items: center; margin: 10px 0">
 
+      <div style="margin-right: 20px; display: flex; align-items: center">
 
+        <el-select
 
+          size="small"
 
+          v-model="color1"
 
+          @change="updateChartColor"
 
+          placeholder="选择配色方案"
 
+          style="width: 200px"
 
+        >
 
+          <el-option
 
+            v-for="(scheme, index) in colorSchemes"
 
+            :key="index"
 
+            :label="scheme.label"
 
+            :value="scheme.colors"
 
+            :style="getOptionStyle(scheme.colors)"
 
+          ></el-option>
 
+        </el-select>
 
+        <!-- <span style="margin-left: 10px">自定义颜色</span> -->
 
+      </div>
 
       <div>
 
         <el-button size="small" @click="toggleChartType">
 
-          切换为{{ chartType === "line" ? "柱状图" : "折线图" }}
 
+          切换为{{ chartType === "line" ? "面积图" : "折线图" }}
 
         </el-button>
 
       </div>
 
     </div>
 
@@ -33,7 +51,7 @@ import { nextTick } from "vue"; // 导入 nextTick
 
 import Plotly from "plotly.js-dist";
 
 import axios from "axios";
 
 import { myMixin } from "@/mixins/chartRequestMixin"; // 假设你需要的 mixin
 
-
 
+import { colorSchemesLine } from "@/views/overview/js/colors";
 
 export default {
 
   props: {
 
     fileAddr: {
 
@@ -52,7 +70,9 @@ export default {
 
     return {
 
       chartData: {},
 
       chartType: "line", // 默认图表类型是折线图
 
-      color1: "#406DAB", // 默认颜色
 
+      color1: [], // 默认颜色
 
+      // 配色方案列表（每个方案是一个颜色数组）
 
+      colorSchemes: [...colorSchemesLine],
 
       loading: false,
 
       isError: false,
 
       colors: [
 
@@ -117,17 +137,25 @@ export default {
 
             y: turbine.yData, // Y 数据
 
             name: turbine.engineName, // 使用机组名称
 
             line: {
 
-              color: this.colors[index % this.colors.length], // 为每个机组分配不同的颜色
 
+              color:
 
+                this.color1.length > 0
 
+                  ? this.color1[index % this.color1.length]
 
+                  : this.colors[index % this.colors.length], // 为每个机组分配不同的颜色
 
             },
 
             marker: {
 
-              color: this.colors[index % this.colors.length], // 为每个机组分配不同的颜色
 
+              color:
 
+                this.color1.length > 0
 
+                  ? this.color1[index % this.color1.length]
 
+                  : this.colors[index % this.colors.length], // 为每个机组分配不同的颜色
 
             },
 
           };
 
 
           if (this.chartType === "line") {
 
             chartConfig.mode = "lines+markers"; // 如果是折线图
 
+            chartConfig.fill = "none";
 
           } else if (this.chartType === "bar") {
 
-            chartConfig.type = "bar"; // 如果是柱状图
 
+            // chartConfig.type = "bar"; // 如果是柱状图
 
+            chartConfig.fill = "tonexty";
 
           }
 
 
           data.push(chartConfig);
 
@@ -182,6 +210,16 @@ export default {
 
     updateChartColor() {
 
       this.drawChart(); // 更新颜色后重新绘制图表
 
     },
 
+    // 根据配色方案设置每个选项的样式
 
+    getOptionStyle(scheme) {
 
+      return {
 
+        background: `linear-gradient(to right, ${scheme.join(", ")})`,
 
+        color: "#fff",
 
+        height: "30px",
 
+        lineHeight: "30px",
 
+        borderRadius: "4px",
 
+      };
 
+    },
 
   },
 
 };
 
 </script>

+ 0 - 0
src.zip → src2.13.zip
Wyświetl plik


BIN
src2.14.zip
Wyświetl plik


+ 2 - 2
vue.config.js
Wyświetl plik 

@@ -66,8 +66,8 @@ module.exports = {
 
         // 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:16500", //演示环境
 
-        target: "http://106.120.102.238:26500", //外网演示环境
 
+        target: "http://192.168.50.235:16500", //演示环境
 
+        // target: "http://106.120.102.238:26500", //外网演示环境
 
         // target: "http://106.120.102.238:16700", // 外网16700  生产16600
 
         // target: "http://10.96.137.5",
 
         changeOrigin: true,