<!--
 * @Author: your name
 * @Date: 2024-09-11 14:23:08
 * @LastEditTime: 2024-09-30 11:22:10
 * @LastEditors: bogon
 * @Description: In User Settings Edit
 * @FilePath: /performance-test/src/views/performance/components/chartsCom/lineChart.vue
-->
<template>
  <div>
    <h1>大部件温度传感器分析</h1>
    <div :id="`chart-${inds}`" style="width: 100%; height: 550px"></div>
    <div id="chart-types" 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: {
      default() {
        return "0";
      },
      type: String,
    }, //循环下标防止图表覆盖问题
    lineData: {
      default() {
        return {};
      },
      type: Object,
    }, //图表数据
    comType: {
      default() {
        return "";
      },
      type: String,
    }, //总图、分图
    chartsType: {
      default() {
        return [];
      },
      type: Array,
    },
    chartData: {
      default: () => {
        return [
          {
            x: [0, 1, 2, 3, 4], // X轴数据
            y: [0, 1, 4, 9, 16], // Y轴数据
          },
          {
            x: [0, 1, 2, 3, 4], // X轴数据
            y: [1, 3, 5, 7, 11], // Y轴数据
          },
          {
            x: [0, 1, 2, 3, 4], // X轴数据
            y: [2, 5, 8, 10, 13], // Y轴数据
          },
          {
            x: [0, 1, 2, 3, 4], // X轴数据
            y: [3, 6, 9, 12, 15], // Y轴数据
          },
          {
            x: [0, 1, 2, 3, 4], // X轴数据
            y: [10, 25, 20, 40, 35], // Y轴数据
          },
          {
            x: [0, 1, 2, 3, 4], // X轴数据
            y: [5, 10, 15, 10, 25], // Y轴数据
          },
        ];
      },
      type: Array,
    },
  },
  name: "LineChart",
  data() {
    return {};
  },
  mounted() {
    // this.initChart();
    this.initChartsType();
  },
  methods: {
    initChart() {
      const lineDatas = allTypesDatas.filter(
        (item) => item.analysisTypeCode === "temperature_large_components"
      )[0];
      const trace = {
        x: this.chartData[0].x,
        y: this.chartData[0].y,
        mode: "lines", // 折线图模式
        line: {
          // color: "darkblue",
          // color:'lightgrey',
          color: "#2f123a", //齿轮箱高速轴温度分布
          width: 2,
        },
        type: "scatter", // 使用散点图的类型生成线
      };
      const layout = { ...lineDatas.lableConfig };
      const config = {
        responsive: true, // 自适应
      };

      // 使用 Plotly 绘制图表
      Plotly.newPlot(`chart-${this.inds}`, [trace], layout, config);
    },
    initChartsType() {
      const lineDatas = allTypesDatas.filter(
        (item) => item.analysisTypeCode === "temperature_large_components"
      )[0];
      const chartsType = lineDatas.chartsType[1].children.filter(
        (item) => item.name === "发电机温度偏差:"
      )[0];
      const trace = chartsType.line_dash.map((item, ind) => {
        return {
          x: this.chartData[ind].x,
          y: this.chartData[ind].y,
          mode: "lines", // 折线图模式
          name: item.name,
          line: { color: item.color, dash: item.dash },
          type: "scatter", // 使用散点图的类型生成线
        };
      });
      const layout = { ...chartsType.lableConfig };
      const config = {
        responsive: true, // 自适应
      };

      // 使用 Plotly 绘制图表
      Plotly.newPlot(`chart-types`, trace, layout, config);
    },
  },
};
</script>
<style scoped></style>
