<!--
 * @Author: your name
 * @Date: 2024-09-11 14:32:51
 * @LastEditTime: 2024-09-30 14:03:21
 * @LastEditors: bogon
 * @Description: In User Settings Edit
 * @FilePath: /performance-test/src/views/performance/components/chartsCom/BoxLineCharts.vue
-->
<template>
  <div>
    boxLineCharts
    <h1>额定功率和风速分析</h1>
    <div
      :id="`plotDivAbove25-${inds}`"
      style="width: 100%; height: 550px"
    ></div>
    <div
      :id="`plotDivBelow25-${inds}`"
      style="width: 100%; height: 550px"
    ></div>
    <!-- <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: {
    inds: {
      type: Number,
      default() {
        return 0;
      },
    },
  },
  data() {
    return {
      turbinesData: [
        { turbine: "Turbine1", envTemp: 26, windSpeed: 12, activePower: 1200 },
        { turbine: "Turbine1", envTemp: 26, windSpeed: 12, activePower: 1800 },
        { turbine: "Turbine1", envTemp: 26, windSpeed: 12, activePower: 1100 },
        { turbine: "Turbine1", envTemp: 26, windSpeed: 12, activePower: 1400 },
        { turbine: "Turbine1", envTemp: 26, windSpeed: 12, activePower: 1500 },
        { turbine: "Turbine1", envTemp: 26, windSpeed: 12, activePower: 1700 },
        { turbine: "Turbine1", envTemp: 26, windSpeed: 12, activePower: 1350 },
        { turbine: "Turbine2", envTemp: 26, windSpeed: 11, activePower: 1150 },
        { turbine: "Turbine2", envTemp: 26, windSpeed: 11, activePower: 1150 },
        { turbine: "Turbine2", envTemp: 26, windSpeed: 11, activePower: 1450 },
        { turbine: "Turbine2", envTemp: 26, windSpeed: 11, activePower: 1850 },
        { turbine: "Turbine2", envTemp: 26, windSpeed: 11, activePower: 1950 },
        { turbine: "Turbine2", envTemp: 26, windSpeed: 11, activePower: 1250 },
        { turbine: "Turbine2", envTemp: 26, windSpeed: 11, activePower: 1350 },
        { turbine: "Turbine3", envTemp: 26, windSpeed: 13, activePower: 1250 },
        { turbine: "Turbine3", envTemp: 26, windSpeed: 12, activePower: 1800 },
        { turbine: "Turbine3", envTemp: 26, windSpeed: 12, activePower: 1100 },
        { turbine: "Turbine3", envTemp: 26, windSpeed: 12, activePower: 1400 },
        { turbine: "Turbine3", envTemp: 26, windSpeed: 12, activePower: 1500 },
        { turbine: "Turbine3", envTemp: 26, windSpeed: 12, activePower: 1700 },
        { turbine: "Turbine3", envTemp: 26, windSpeed: 12, activePower: 1350 },
        { turbine: "Turbine4", envTemp: 26, windSpeed: 10, activePower: 1100 },
        { turbine: "Turbine4", envTemp: 26, windSpeed: 10, activePower: 1300 },
        { turbine: "Turbine4", envTemp: 26, windSpeed: 10, activePower: 1500 },
        { turbine: "Turbine4", envTemp: 26, windSpeed: 10, activePower: 1700 },
        { turbine: "Turbine4", envTemp: 26, windSpeed: 10, activePower: 1200 },
        { turbine: "Turbine4", envTemp: 26, windSpeed: 10, activePower: 1300 },
        { turbine: "Turbine5", envTemp: 28, windSpeed: 14, activePower: 1200 },
        { turbine: "Turbine5", envTemp: 28, windSpeed: 14, activePower: 1300 },
        { turbine: "Turbine5", envTemp: 28, windSpeed: 14, activePower: 1400 },
        { turbine: "Turbine5", envTemp: 28, windSpeed: 14, activePower: 1100 },
        { turbine: "Turbine6", envTemp: 26, windSpeed: 10, activePower: 1300 },
        { turbine: "Turbine6", envTemp: 26, windSpeed: 10, activePower: 1500 },
        { turbine: "Turbine6", envTemp: 26, windSpeed: 10, activePower: 1700 },
        { turbine: "Turbine6", envTemp: 26, windSpeed: 10, activePower: 1200 },
        { turbine: "Turbine6", envTemp: 26, windSpeed: 10, activePower: 1300 },
      ],
    };
  },
  mounted() {
    this.initcharts();
  },
  methods: {
    initcharts() {
      const lineDatas = allTypesDatas.filter(
        (item) => item.analysisTypeCode === "rated_power_windspeed"
      )[0];
      const above25 = this.turbinesData.filter((d) => d.envTemp >= 25);
      const below25 = this.turbinesData.filter((d) => d.envTemp < 25);

      // 中位数计算
      const medians = this.calculateMedians();

      const turbineNames = Object.keys(medians);
      const medianValues = Object.values(medians);
      const traceAbove25 = {
        y: above25.map((d) => d.activePower),
        x: above25.map((d) => d.turbine),
        type: "box",
        fillcolor: "#1d90ff",
        marker: {
          line: {
            color: "black",
          },
        },
        whiskerwidth: 1,
        boxpoints: "outliers",
        line: {
          color: "black",
        },
        showlegend: false,
        name: "Ambient Temp >= 25°C",
      };
      const traceMedianLine = {
        x: turbineNames,
        y: medianValues,
        mode: "markers",
        marker: { symbol: "line-ew-open", color: "red", size: 10 },
        showlegend: false,
      };
      const layoutAbove25 = {
        ...lineDatas.lableConfig,
        title: "额定全风速10min配电 (环境温度 < 25°C)",
        // plot_bgcolor: "#e5ecf6",
        // yaxis: {
        //   title: "Power",
        //   tickfont: { size: 10 },
        //   gridcolor: "rgb(255,255,255)",
        //   showgrid: true,
        //   zeroline: false,
        // },
        // xaxis: {
        //   title: "Turbine",
        //   tickangle: -45,
        //   type: "category",
        //   tickfont: { size: 10 },
        //   gridcolor: "rgb(255,255,255)",
        //   showgrid: true,
        //   zeroline: false,
        // },
        // boxmode: "group",
      };

      Plotly.newPlot(
        `plotDivAbove25-${this.inds}`,
        [traceAbove25, traceMedianLine],
        layoutAbove25
      );
    },
    //中位值的计算
    calculateMedians() {
      const medians = this.turbinesData.reduce((acc, d) => {
        if (!acc[d.turbine]) acc[d.turbine] = [];
        acc[d.turbine].push(d.activePower);
        return acc;
      }, {});

      for (let turbine in medians) {
        const values = medians[turbine].sort((a, b) => a - b);
        const middle = Math.floor(values.length / 2);
        medians[turbine] =
          values.length % 2 === 0
            ? (values[middle - 1] + values[middle]) / 2
            : values[middle];
      }
      return medians;
    },
  },
};
</script>
<style scoped></style>
