performance-test/src/views/performance/components/PlotlyCharts.vue

<template>
  <div>
    <!-- 总图组件 -->
    <div
      v-if="comType === 'generalDrawing'"
      id="power-curve-plot"
      style="width: 100%; height: 550px"
    ></div>
    <!-- 分图组件  -->
    <template v-else-if="comType === 'graph'">
      <div id="chart-" style="width: 100%; height: 550px"></div>
    </template>
  </div>
</template>

<script>
import Plotly from "plotly.js-dist";

export default {
  props: {
    lineMarkerData: Object,
    comType: String,
  },
  name: "PowerCurvePlot",
  data() {
    return {
      graphData: [], //分图数据length data
      config: {
        powerConfig: {
          mode: "lines+markers",
          name: "合同功率曲线",
          line: { color: "red" },
          marker: { color: "red", size: 5 },
        },
        lableConfig: {
          title: { text: "", x: 0.5 },
          plot_bgcolor: "#e5ecf6", // Chart background color
          xaxis: {
            title: "风速(m/s)",
            // range: [0, 26],
            tickmode: "linear",
            gridcolor: "rgb(255,255,255)",
            showgrid: true,
            zeroline: false,
            tickcolor: "rgb(255,255,255)",
            dtick: 1,
            tickangle: -45,
          },
          yaxis: {
            title: "功率(kW)",
            gridcolor: "rgb(255,255,255)",
            showgrid: true,
            zeroline: false,

            tickcolor: "rgb(255,255,255)",
          },
          legend: {
            orientation: "h",
            xanchor: "center",
            x: 0.5,
            y: -0.2,
          },
        },
        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",
        ],
      },
      powerCurveData: {
        turbines: [],
        contractPowerCurve: [],
      },
    };
  },
  mounted() {
    this.updateCharts(); // 初次渲染
  },
  watch: {
    lineMarkerData: {
      deep: true,
      handler() {
        this.updateCharts(); // 数据变化时更新
      },
    },
    comType(newType, oldType) {
      if (newType !== oldType) {
        this.updateCharts(); // 类型变化时更新
      }
    },
  },
  methods: {
    updateCharts() {
      this.powerCurveData.turbines =
        this.lineMarkerData.data?.filter(
          (item) => item.enginName !== "合同功率曲线"
        ) || [];

      this.powerCurveData.contractPowerCurve =
        this.lineMarkerData.data?.filter(
          (item) => item.enginName === "合同功率曲线"
        ) || [];

      if (this.comType === "generalDrawing" && this.lineMarkerData?.data) {
        this.renderPlot();
      } else if (this.comType === "graph" && this.lineMarkerData?.data) {
        this.$nextTick(() => {
          this.initializeEngineCharts();
        });
      }
    },
    renderPlot() {
      const data = [];
      // Add traces for each turbine with colors from config
      this.powerCurveData.turbines.forEach((turbine, index) => {
        data.push({
          x: turbine.xData,
          y: turbine.yData.map((val) => (val !== null ? val : 0.0)),
          mode: "lines",
          name: turbine.enginName,
          line: {
            color: this.config.colors[index % this.config.colors.length],
          },
        });
      });

      data.push({
        x: this.powerCurveData.contractPowerCurve[0].xData,
        y: this.powerCurveData.contractPowerCurve[0].yData,
        mode: this.config.powerConfig.mode,
        name: this.config.powerConfig.name,
        line: this.config.powerConfig.line,
        marker: this.config.powerConfig.marker,
      });
      const layout = {
        title: this.config.lableConfig.title.text || "有功功率曲线分析",
        plot_bgcolor: this.config.lableConfig.plot_bgcolor,
        xaxis: this.config.lableConfig.xaxis,
        yaxis: this.config.lableConfig.yaxis,
        legend: this.config.lableConfig.legend,
      };
      Plotly.newPlot("power-curve-plot", data, layout);
    },
    //初始化分图
    //初始化分图
    initializeEngineCharts() {
      const fentuCharts = this.powerCurveData.turbines.filter(
        (item) =>
          item.enginCode === this.lineMarkerData?.formInfoFieldEngineCode ||
          item.enginName === this.lineMarkerData?.formInfoFieldEngineCode
      );
      const data = [];
      const layout = {
        title:
          fentuCharts[0].enginName ||
          fentuCharts[0].enginCode + "风机有功功率曲线分析",
        plot_bgcolor: this.config.lableConfig.plot_bgcolor,
        xaxis: this.config.lableConfig.xaxis,
        yaxis: this.config.lableConfig.yaxis,
        legend: this.config.lableConfig.legend,
      };
      this.powerCurveData.turbines.forEach((turbine, index) => {
        data.push({
          x: turbine.xData,
          y: turbine.yData.map((val) => (val !== null ? val : 0.0)),
          mode: "lines",
          name: turbine.enginName,
          line: {
            color:
              turbine?.enginCode ===
                this.lineMarkerData?.formInfoFieldEngineCode ||
              turbine?.enginName ===
                this.lineMarkerData?.formInfoFieldEngineCode
                ? "#1c77b3"
                : "#d3d3d3",
          },
        });
      });

      data.push({
        x: this.powerCurveData.contractPowerCurve[0].xData,
        y: this.powerCurveData.contractPowerCurve[0].yData,
        mode: "lines+markers",
        name: this.powerCurveData.contractPowerCurve[0].enginName,
        line: {
          color: "red",
        },
      });
      Plotly.newPlot("chart-", data, layout);
    },
  },
};
</script>

<style scoped>
/* You can add styles for your component here */
</style>