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

<template>
  <div>
    <!-- 总图组件 -->
    <div
      v-if="comType === 'generalDrawing'"
      :id="`power-curve-plot${inds}`"
      style="width: 100%; height: 550px"
    ></div>
    <!-- 分图组件  -->
    <template v-else-if="comType === 'graph'">
      <div :id="`chart-${inds}`" style="width: 100%; height: 550px"></div>
    </template>
  </div>
</template>
<script>
import Plotly from "plotly.js-dist";
export default {
  props: {
    lineMarkerData: Object,
    comType: String,
    inds: String,
  },
  name: "PowerCurvePlot",
  data() {
    return {
      graphData: [], //分图数据length data
      config: {
        powerConfig: {
          mode: "lines+markers",
          name: "合同功率曲线",
          line: {
            color: "red",
            width: 1, // 设置线条的宽度为1
          },
          marker: { color: "red", size: 4 },
        },
        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() {
      // console.log(this.lineMarkerData, "this.lineMarkerData");
      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 = [];
      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,
      });
      // console.log(this.powerCurveData, "this.powerCurveData");
      const layout = {
        title: "有功功率曲线分析" + this.lineMarkerData.engineTypeName,
        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${this.inds}`, data, layout);
    },
    //初始化分图
    initializeEngineCharts() {
      const fentuCharts = this.powerCurveData.turbines.filter(
        (item) =>
          item.enginCode === this.lineMarkerData?.formInfoFieldEngineCode
      );
      // console.log(this.powerCurveData.turbines, "this.powerCurveData.turbines");
      // console.log(fentuCharts, "fentuCharts");
      if (fentuCharts[0]?.enginName || fentuCharts[0]?.enginCode) {
        const highlightedData = [];
        const nonHighlightedData = [];
        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) => {
          const isHighlighted =
            turbine?.enginCode ===
              this.lineMarkerData?.formInfoFieldEngineCode ||
            turbine?.enginName === this.lineMarkerData?.formInfoFieldEngineCode;

          const trace = {
            x: turbine.xData,
            y: turbine.yData.map((val) => (val !== null ? val : 0.0)),
            mode: "lines",
            name: turbine.enginName,
            line: {
              color: isHighlighted ? "#1c77b3" : "#d3d3d3",
            },
          };

          if (isHighlighted) {
            highlightedData.push(trace); // 高亮的线条放入 highlighedData
          } else {
            nonHighlightedData.push(trace); // 非高亮的线条放入 nonHighlightedData
          }
        });
        // 先添加非高亮的风机数据
        const data = [...nonHighlightedData, ...highlightedData]; // 高亮的风机数据最后添加
        // 添加合同功率曲线
        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",
            width: 1, // 设置线条的宽度为1
          },
          marker: { color: "red", size: 4 },
        });
        Plotly.newPlot(`chart-${this.inds}`, data, layout);
      }
    },
  },
};
</script>

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