修改bug封装风向玫瑰组件

src/components/EchartsCom.vue

@@ -1,6 +1,5 @@
 <template>
   <!-- 定义标签 -->
-
   <div
     v-resize="resize"
     :id="id"

src/utils/allTypesOfAnalysisData.js

@@ -1018,7 +1018,10 @@ export const allTypesDatas = [
       title: { text: "数据完整度检测（%）", x: 0.5 },
       plot_bgcolor: "#e5ecf6", // 图表区域背景颜色
       xaxis: {
-        title: "日期",
+        title: {
+          text: "日期", // X 轴标签
+          standoff: 20, // 设置 X 轴标签与刻度标记之间的距离
+        },
         gridcolor: "rgb(255,255,255)",
         showgrid: true,
         zeroline: false,
@@ -1028,7 +1031,10 @@ export const allTypesDatas = [
         tickangle: -45, // 设置x轴标签倾斜45度
       },
       yaxis: {
-        title: "机组",
+        title: {
+          text: "机组", // X 轴标签
+          standoff: 20, // 设置 X 轴标签与刻度标记之间的距离
+        },
         gridcolor: "rgb(255,255,255)",
         showgrid: true,
         zeroline: false,
@@ -1036,6 +1042,7 @@ export const allTypesDatas = [
         ticklen: 5,
         gridwidth: 4, // 网格线宽度
       },
+      showlegend: false,
       // 添加边框
       annotations: [], // 初始化注释数组
     },
@@ -1184,7 +1191,7 @@ export const allTypesDatas = [
       },
     },
     lableConfig: {
-      title: "Wind Rose",
+      title: "风向玫瑰图",
       plot_bgcolor: "#e5ecf6", // 背景颜色
       polar: {
         bgcolor: "#e5ecf6", // 极坐标背景颜色
@@ -1197,6 +1204,24 @@ export const allTypesDatas = [
           gridcolor: "rgb(255,255,255)", // 角度网格线颜色
           tickcolor: "rgb(255,255,255)", // 刻度线颜色
           linecolor: "rgb(255,255,255)", // 角度轴线颜色
+          ticktext: [
+            "N",
+            "NNE",
+            "NE",
+            "ENE",
+            "E",
+            "ESE",
+            "SE",
+            "SSE",
+            "S",
+            "SSW",
+            "SW",
+            "WSW",
+            "W",
+            "WNW",
+            "NW",
+            "NNW",
+          ],
         },
       },
       showlegend: true, // 显示图例
@@ -1373,6 +1398,7 @@ export const allTypesDatas = [
           opacity: 0.7,
         },
         type: "scatter",
+        showlegend: false,
       },
       {
         mode: "lines+markers",
@@ -1390,7 +1416,7 @@ export const allTypesDatas = [
         title: "风速",
         tickmode: "array",
         gridcolor: "rgb(255,255,255)",
-        showgrid: true,
+        showgrid: false,
         zeroline: false,
         tickcolor: "rgb(255,255,255)",
         tickangle: -45,
@@ -1399,7 +1425,7 @@ export const allTypesDatas = [
         title: "功率",
         tickmode: "array",
         gridcolor: "rgb(255,255,255)",
-        showgrid: true,
+        showgrid: false,
         zeroline: false,
         tickcolor: "rgb(255,255,255)",
       },
@@ -2558,7 +2584,7 @@ export const allTypesDatas = [
   {
     analysisTypeName: "秒级SCADA数据记录完整度分析",
     analysisTypeCode: "data_integrity_second",
-    title: "数据完整度检测（%）",
+    title: "数据完整度检测（%）秒级",
     modeType: "heatmap",
     graphType: "heatmap",
     xLable: "机组",
@@ -2575,8 +2601,12 @@ export const allTypesDatas = [
     lableConfig: {
       plot_bgcolor: "#e5ecf6", // 图表区域背景颜色
       xaxis: {
+        title: {
+          text: "日期", // X 轴标签
+          standoff: 20, // 设置 X 轴标签与刻度标记之间的距离
+        },
         gridcolor: "rgb(255,255,255)",
-        showgrid: true,
+        showgrid: false,
         zeroline: false,
         ticklen: 5,
         gridwidth: 4, // 网格线宽度
@@ -2584,6 +2614,10 @@ export const allTypesDatas = [
         tickangle: -45, // 设置x轴标签倾斜45度
       },
       yaxis: {
+        title: {
+          text: "机组", // X 轴标签
+          standoff: 20, // 设置 X 轴标签与刻度标记之间的距离
+        },
         gridcolor: "rgb(255,255,255)",
         showgrid: true,
         zeroline: false,
@@ -2591,6 +2625,7 @@ export const allTypesDatas = [
         ticklen: 5,
         gridwidth: 4, // 网格线宽度
       },
+      showlegend: false,
       // 添加边框
       annotations: [], // 初始化注释数组
     },

src/views/performance/assetssDetail.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2024-05-27 09:25:45
- * @LastEditTime: 2024-09-30 14:28:12
+ * @LastEditTime: 2024-10-09 09:11:01
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/assetssDetail.vue
@@ -12,6 +12,9 @@
     <!-- <LineCharts></LineCharts> -->
     <!-- 通过json文件绘制新的图表 -->
     <!-- <CreateNewChart></CreateNewChart> -->
+    <!-- <HeatmapCharts></HeatmapCharts> -->
+    <!-- <WindRoseChart></WindRoseChart> -->
+    <!-- <PowerMarkers2DCharts></PowerMarkers2DCharts> -->
     <el-row type="flex" justify="space-between">
       <el-col :span="8">
         <el-button
@@ -379,6 +382,9 @@ import {
 import CreateNewChart from "./createNewChart.vue";
 import DetailCharts from "./components/DetailCharts.vue";
 import BoxLineCharts from "./components/chartsCom/BoxLineCharts";
+import HeatmapCharts from "./components/chartsCom/HeatmapCharts.vue";
+import WindRoseChart from "./components/chartsCom/WindRoseChart.vue";
+import PowerMarkers2DCharts from "./components/chartsCom/powerMarkers2DCharts.vue";
 // import JsonMarkerCharts from "./components/JsonMarkerCharts.vue";
 import PlotlyCharts from "./components/PlotlyCharts.vue";
 import LineCharts from "./components/chartsCom/lineChart.vue";
@@ -390,11 +396,14 @@ import axios from "axios";
 export default {
   components: {
     DetailCharts,
+    WindRoseChart,
     // JsonMarkerCharts,
+    HeatmapCharts,
     CreateNewChart,
     PlotlyCharts,
     LineCharts,
     BoxLineCharts,
+    PowerMarkers2DCharts,
   },
   data() {
     return {

src/views/performance/components/EditAnalysis.vue

@@ -1,8 +1,8 @@
 <!--
  * @Author: your name
  * @Date: 2024-05-29 09:14:23
- * @LastEditTime: 2024-09-30 16:11:40
- * @LastEditors: bogon
+ * @LastEditTime: 2024-09-30 16:28:49
+ * @LastEditors: milo-MacBook-Pro.local
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/EditAnalysis.vue
 -->
@@ -545,7 +545,6 @@ import PlotlyCharts from "./PlotlyCharts.vue";
 import { downLoadCsvFile } from "@/utils/common";
 import Papa from "papaparse";
 import axios from "axios";
-import { style } from "plotly.js-with-locales/lib/bar";
 export default {
   components: {
     TinymceEditor,

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

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2024-09-11 14:30:17
- * @LastEditTime: 2024-09-29 16:59:53
+ * @LastEditTime: 2024-10-09 15:31:48
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/chartsCom/BarChart.vue

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

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2024-09-11 14:32:51
- * @LastEditTime: 2024-09-30 14:03:21
+ * @LastEditTime: 2024-10-08 14:09:36
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/chartsCom/BoxLineCharts.vue
@@ -119,6 +119,7 @@ export default {
       const layoutAbove25 = {
         ...lineDatas.lableConfig,
         title: "额定全风速10min配电 (环境温度 < 25°C)",
+        autosize: true, // 开启自适应
         // plot_bgcolor: "#e5ecf6",
         // yaxis: {
         //   title: "Power",
@@ -142,7 +143,10 @@ export default {
       Plotly.newPlot(
         `plotDivAbove25-${this.inds}`,
         [traceAbove25, traceMedianLine],
-        layoutAbove25
+        layoutAbove25,
+        {
+          responsive: true,
+        }
       );
     },
     //中位值的计算

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

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2024-09-11 14:29:26
- * @LastEditTime: 2024-09-29 17:00:09
+ * @LastEditTime: 2024-10-08 14:07:53
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/chartsCom/HeatmapCharts.vue
@@ -18,9 +18,40 @@
 import { allTypesDatas } from "@/utils/allTypesOfAnalysisData.js";
 import Plotly from "plotly.js-dist";
 export default {
-  props: {},
+  props: {
+    inds: {
+      type: Number,
+      default() {
+        return 0;
+      },
+    },
+  },
   data() {
-    return {};
+    return {
+      initData: [
+        {
+          z: [
+            [100, 95, 20, 7, 75, 100],
+            [0, 50, 0, 0, 0, 0],
+            [100, 74, 7, 95, 100, 100],
+          ],
+          x: [
+            "#2024-01",
+            "#2024-02",
+            "#2024-03",
+            "#2024-04",
+            "#2024-05",
+            "#2024-06",
+          ],
+          y: ["Morning", "Afternoon", "Evening"],
+          // y: ["Morning", "Afternoon"],
+          type: "heatmap",
+          colorscale: "Viridis", //分钟scads
+          showscale: false, // 应该放在这里
+          hoverongaps: false,
+        },
+      ],
+    };
   },
   mounted() {
     this.initcharts();
@@ -28,8 +59,67 @@ export default {
   methods: {
     initcharts() {
       const lineDatas = allTypesDatas.filter(
-        (item) => item.analysisTypeCode === "temperature_large_components"
+        (item) =>
+          item.analysisTypeCode === "data_integrity_second" ||
+          item.analysisTypeCode === "data_integrity_minute"
       )[0];
+      const layout = {
+        ...lineDatas.lableConfig,
+        showlegend: false,
+        shapes: this.createShapesBorder(
+          this.initData[0].y.length,
+          this.initData[0].x.length,
+          1,
+          "white",
+          0
+        ), // 添加边框
+        margin: {
+          l: 100, // 左侧边距，单位是像素
+          r: 100, // 右侧边距，单位是像素
+          t: 100, // 上方边距，单位是像素
+          b: 100, // 下方边距，单位是像素
+        },
+        autosize: true, // 开启自适应
+      };
+      // 添加注释
+      for (var i = 0; i < this.initData[0].y.length; i++) {
+        for (var j = 0; j < this.initData[0].x.length; j++) {
+          const value = this.initData[0].z[i][j];
+          const fontColor = value < 50 ? "white" : "#434443"; // 根据 z 值判断字体颜色
+          var result = {
+            xref: "x",
+            yref: "y",
+            x: this.initData[0].x[j],
+            y: this.initData[0].y[i],
+            text: this.initData[0].z[i][j],
+            font: { size: 12, color: fontColor },
+            showarrow: false,
+          };
+          layout.annotations.push(result);
+        }
+      }
+      Plotly.newPlot(`chart-${this.inds}`, this.initData, layout, {
+        responsive: true,
+      });
+    },
+    createShapesBorder(rows, cols, borderWidth, borderColor, offset) {
+      var shapes = [];
+      for (var row = 0; row < rows; row++) {
+        for (var col = 0; col < cols; col++) {
+          shapes.push({
+            type: "rect",
+            x0: col - 0.5 - offset,
+            x1: col + 0.5 + offset,
+            y0: row - 0.5 - offset,
+            y1: row + 0.5 + offset,
+            line: {
+              color: borderColor,
+              width: borderWidth,
+            },
+          });
+        }
+      }
+      return shapes;
     },
   },
 };

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

@@ -1,36 +1,155 @@
-<!--
- * @Author: your name
- * @Date: 2024-09-11 14:31:05
- * @LastEditTime: 2024-09-29 17:03:38
- * @LastEditors: bogon
- * @Description: In User Settings Edit
- * @FilePath: /performance-test/src/views/performance/components/chartsCom/WindRoseChart.vue
--->
 <template>
   <div>
-    WindRoseChart
     <h1>风向玫瑰分析</h1>
-    <div :id="`chart-${inds}`" style="width: 100%; height: 550px"></div>
+    <div :id="`plotDiv-${inds}`" style="width: 100%; height: 550px"></div>
   </div>
 </template>
+
 <script>
-import { allTypesDatas } from "@/utils/allTypesOfAnalysisData.js";
 import Plotly from "plotly.js-dist";
+
 export default {
-  props: {},
-  data() {
-    return {};
+  props: {
+    data: {
+      type: Array,
+      default: () => [
+        { windSpeed: 2.5, windDirection: 30 },
+        { windSpeed: 4.8, windDirection: 60 },
+        { windSpeed: 7.2, windDirection: 90 },
+        { windSpeed: 9.1, windDirection: 120 },
+        { windSpeed: 3.5, windDirection: 150 },
+        { windSpeed: 5.6, windDirection: 180 },
+        { windSpeed: 8.3, windDirection: 210 },
+        { windSpeed: 6.4, windDirection: 240 },
+        { windSpeed: 2.9, windDirection: 270 },
+        { windSpeed: 7.7, windDirection: 300 },
+        { windSpeed: 3.2, windDirection: 330 },
+        { windSpeed: 4.0, windDirection: 360 },
+        { windSpeed: 5.1, windDirection: 45 },
+        { windSpeed: 6.9, windDirection: 75 },
+        { windSpeed: 8.6, windDirection: 105 },
+        { windSpeed: 7.0, windDirection: 135 },
+        { windSpeed: 4.5, windDirection: 165 },
+        { windSpeed: 9.0, windDirection: 195 },
+        { windSpeed: 3.8, windDirection: 225 },
+        { windSpeed: 5.9, windDirection: 255 },
+        { windSpeed: 7.5, windDirection: 285 },
+        { windSpeed: 6.0, windDirection: 315 },
+        { windSpeed: 2.7, windDirection: 345 },
+      ],
+    },
+    inds: {
+      type: [Number, String],
+      default: 1,
+    },
   },
   mounted() {
-    this.initcharts();
+    this.renderChart();
   },
   methods: {
-    initcharts() {
-      const lineDatas = allTypesDatas.filter(
-        (item) => item.analysisTypeCode === "wind_direction_frequency"
-      )[0];
+    renderChart() {
+      const bins = [0, 3, 6, 9, Infinity];
+      const speedLabels = ["[0,3)", "[3,6)", "[6,9)", ">=9"];
+      const windDirections = Array.from({ length: 16 }, (_, i) => i * 22.5);
+      const directionLabels = [
+        "N",
+        "NNE",
+        "NE",
+        "ENE",
+        "E",
+        "ESE",
+        "SE",
+        "SSE",
+        "S",
+        "SSW",
+        "SW",
+        "WSW",
+        "W",
+        "WNW",
+        "NW",
+        "NNW",
+      ];
+      const colorscale = {
+        "[0,3)": "rgba(247, 251, 255, 1.0)",
+        "[3,6)": "rgba(171, 207, 229, 1.0)",
+        "[6,9)": "rgba(55, 135, 192, 1.0)",
+        ">=9": "rgba(8, 48, 107, 1.0)",
+      };
+
+      const speedBins = this.data.map((item) => {
+        for (let i = 0; i < bins.length - 1; i++) {
+          if (item.windSpeed >= bins[i] && item.windSpeed < bins[i + 1]) {
+            return speedLabels[i];
+          }
+        }
+        return ">=9";
+      });
+
+      const directionBins = this.data.map((item) => {
+        return windDirections.find(
+          (d, i) =>
+            item.windDirection >= d &&
+            item.windDirection < windDirections[i + 1]
+        );
+      });
+
+      const counts = {};
+      speedLabels.forEach((speedLabel) => {
+        counts[speedLabel] = Array(windDirections.length - 1).fill(0);
+      });
+
+      this.data.forEach((item, i) => {
+        const speedLabel = speedBins[i];
+        const directionBin = directionBins[i];
+        const index = windDirections.indexOf(directionBin);
+        counts[speedLabel][index]++;
+      });
+
+      const traces = speedLabels.map((speedLabel) => {
+        const percentage = counts[speedLabel].map(
+          (c) => (c / this.data.length) * 100
+        );
+        return {
+          r: percentage,
+          theta: windDirections,
+          name: speedLabel,
+          type: "barpolar",
+          marker: {
+            color: colorscale[speedLabel],
+            line: {
+              color: "white",
+              width: 1,
+            },
+          },
+        };
+      });
+
+      const layout = {
+        title: "Wind Rose",
+        plot_bgcolor: "#e5ecf6",
+        polar: {
+          bgcolor: "#e5ecf6",
+          radialaxis: {
+            gridcolor: "rgb(255,255,255)",
+            showgrid: true,
+            linecolor: "rgb(255,255,255)",
+          },
+          angularaxis: {
+            tickvals: windDirections,
+            ticktext: directionLabels,
+            gridcolor: "rgb(255,255,255)",
+            tickcolor: "rgb(255,255,255)",
+            linecolor: "rgb(255,255,255)",
+          },
+        },
+        showlegend: true,
+        legend: { title: { text: "Wind Speed" } },
+      };
+
+      Plotly.newPlot(`plotDiv-${this.inds}`, traces, layout);
     },
   },
 };
 </script>
+
 <style scoped></style>

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

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2024-09-11 14:23:08
- * @LastEditTime: 2024-09-30 11:22:10
+ * @LastEditTime: 2024-10-08 14:10:25
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/chartsCom/lineChart.vue
@@ -100,13 +100,18 @@ export default {
         },
         type: "scatter", // 使用散点图的类型生成线
       };
-      const layout = { ...lineDatas.lableConfig };
+      const layout = {
+        ...lineDatas.lableConfig,
+        autosize: true, // 开启自适应
+      };
       const config = {
         responsive: true, // 自适应
       };
 
       // 使用 Plotly 绘制图表
-      Plotly.newPlot(`chart-${this.inds}`, [trace], layout, config);
+      Plotly.newPlot(`chart-${this.inds}`, [trace], layout, config, {
+        responsive: true,
+      });
     },
     initChartsType() {
       const lineDatas = allTypesDatas.filter(

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

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2024-09-11 14:32:12
- * @LastEditTime: 2024-09-29 16:58:48
+ * @LastEditTime: 2024-10-09 09:08:19
  * @LastEditors: bogon
  * @Description: In User Settings Edit
  * @FilePath: /performance-test/src/views/performance/components/chartsCom/powerMarkers2DCharts.vue
@@ -10,17 +10,20 @@
   <div>
     powerMarkers2DCharts
     <h1>逐月有功功率散点2D分析</h1>
-    <h1>偏航控制策略异常检测 2D</h1>
+    <!-- <h1>偏航控制策略异常检测 2D</h1>  目前没找到这个分析类型-->
     <div :id="`chart-${inds}`" style="width: 100%; height: 550px"></div>
   </div>
 </template>
 <script>
 import { allTypesDatas } from "@/utils/allTypesOfAnalysisData.js";
 import Plotly from "plotly.js-dist";
+
 export default {
-  props: {},
-  data() {
-    return {};
+  props: {
+    inds: {
+      type: [Number, String],
+      default: 1,
+    },
   },
   mounted() {
     this.initcharts();
@@ -28,10 +31,113 @@ export default {
   methods: {
     initcharts() {
       const lineDatas = allTypesDatas.filter(
-        (item) => item.analysisTypeCode === "temperature_large_components"
+        (item) => item.analysisTypeCode === "power_scatter_2D"
       )[0];
+
+      if (lineDatas) {
+        this.createScatterPlot(lineDatas);
+      }
+    },
+
+    createScatterPlot(lineDatas) {
+      const generateData = (count) => {
+        const windSpeed = Array.from({ length: count }, (_, i) => i + 1);
+        const activePower = Array.from(
+          { length: count },
+          () => Math.random() * 600
+        );
+        //时间决定散点颜色，
+        const monthIntTime = Array.from(
+          { length: count },
+          (_, i) => Math.floor(Date.now() / 1000) - i * 2629743
+        );
+
+        return { windSpeed, activePower, monthIntTime };
+      };
+
+      const turbineData = {
+        name: lineDatas.name || "Turbine2",
+        ...generateData(100),
+      };
+
+      const guaranteePowerCurve = {
+        windSpeed: Array.from({ length: 100 }, (_, i) => i + 1),
+        activePower: Array.from({ length: 100 }, (_, i) =>
+          Math.floor(Math.random() * 600 - 1)
+        ),
+      };
+
+      const trace1 = {
+        x: turbineData.windSpeed,
+        y: turbineData.activePower,
+        mode: "markers",
+        marker: {
+          color: turbineData.monthIntTime,
+          colorscale: "Rainbow",
+          size: 10,
+          opacity: 0.7,
+          colorbar: {
+            tickvals: turbineData.monthIntTime.filter((_, i) => i % 20 === 0),
+            ticktext: turbineData.monthIntTime
+              .filter((_, i) => i % 20 === 0)
+              .map((ts) => new Date(ts * 1000).toISOString().slice(0, 7)),
+            thickness: 18,
+            len: 1,
+            outlinecolor: "rgba(255,255,255,0)",
+          },
+        },
+        type: "scatter",
+        showlegend: false,
+      };
+
+      const trace2 = {
+        x: guaranteePowerCurve.windSpeed,
+        y: guaranteePowerCurve.activePower,
+        mode: "lines+markers",
+        marker: { color: "gray", size: 7 },
+        name: "Contract Guarantee Power Curve",
+        type: "scatter",
+      };
+
+      const layout = {
+        title: lineDatas.lableConfig.title,
+        plot_bgcolor: "#e5ecf6",
+        xaxis: {
+          title: lineDatas.lableConfig.xaxis.title,
+          tickvals: turbineData.windSpeed.filter((_, i) => i % 10 === 0),
+          ticktext: turbineData.windSpeed
+            .filter((_, i) => i % 10 === 0)
+            .map((ws) => ws.toFixed(1)),
+          tickmode: "array",
+          gridcolor: "rgb(255,255,255)",
+          showgrid: true,
+          zeroline: false,
+          tickcolor: "rgb(255,255,255)",
+          tickangle: -45,
+        },
+        yaxis: {
+          title: lineDatas.lableConfig.yaxis.title,
+          tickvals: Array.from({ length: 7 }, (_, i) => i * 100),
+          ticktext: Array.from({ length: 7 }, (_, i) => (i * 100).toString()),
+          tickmode: "array",
+          gridcolor: "rgb(255,255,255)",
+          showgrid: true,
+          zeroline: false,
+          tickcolor: "rgb(255,255,255)",
+        },
+        legend: {
+          yanchor: "bottom",
+          y: 0,
+          xanchor: "right",
+          x: 1,
+          bgcolor: "rgba(0, 0, 0, 0)",
+        },
+      };
+
+      Plotly.newPlot(`chart-${this.inds}`, [trace1, trace2], layout);
     },
   },
 };
 </script>
+
 <style scoped></style>

vue.config.js

@@ -59,7 +59,6 @@ module.exports = {
       },
     },
   },
-
   devServer: {
     // contentBase: path.join(__dirname, "public"),
     proxy: {