GeneratorTemperature.js 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  1. /*
  2. * 发电机温度图(终极稳定版)
  3. */
  4. import { renderChart } from "../chartService/index.js";
  5. export const generateGeneratorTemperature = async (
  6. data,
  7. bucketName,
  8. objectName,
  9. ) => {
  10. if (!data || !Array.isArray(data.data)) {
  11. throw new Error("generator temperature data invalid");
  12. }
  13. const typeLine = ["solid", "solid", "dot", "dot", "dash", "solid"];
  14. const colorDefault = [
  15. "#0000F5",
  16. "#377E21",
  17. "#0000F5",
  18. "#377E21",
  19. "#000000",
  20. "#F2A93B",
  21. ];
  22. const chartDataset = data.data;
  23. // ✅ traces 构建
  24. const traces = chartDataset.map((turbine, index) => {
  25. const color =
  26. data.color1 && data.color1.length > 0
  27. ? data.color1[index % data.color1.length]
  28. : colorDefault[index % colorDefault.length];
  29. const base = {
  30. x: turbine.xData || [],
  31. y: turbine.yData || [],
  32. name: turbine.Name || `series-${index}`,
  33. hovertemplate: `${data.xaixs || "X"}: %{x}<br>${
  34. data.yaixs || "Y"
  35. }: %{y}<br>`,
  36. marker: { color },
  37. };
  38. if (data.chartType === "bar") {
  39. return {
  40. ...base,
  41. type: "bar",
  42. };
  43. }
  44. // 默认 line
  45. return {
  46. ...base,
  47. type: "scatter",
  48. mode: "lines",
  49. line: {
  50. dash: typeLine[index % typeLine.length],
  51. color,
  52. },
  53. };
  54. });
  55. // ✅ layout
  56. const layout = {
  57. title: {
  58. text: `发电机-轴承温度偏差: ${data.turbineName || ""}`,
  59. font: { size: 16 },
  60. },
  61. xaxis: {
  62. title: data.xaixs || "X轴",
  63. gridcolor: "rgb(255,255,255)",
  64. tickcolor: "rgb(255,255,255)",
  65. backgroundcolor: "#e5ecf6",
  66. showbackground: true,
  67. showline: true, // ✅ 显示 X 轴轴线
  68. linecolor: "#ffffff", // ✅ X 轴轴线颜色设为白色
  69. zeroline: false,
  70. },
  71. yaxis: {
  72. title: data.yaixs || "Y轴",
  73. gridcolor: "rgb(255,255,255)",
  74. tickcolor: "rgb(255,255,255)",
  75. backgroundcolor: "#e5ecf6",
  76. showbackground: true,
  77. showline: true, // ✅ 显示 X 轴轴线
  78. linecolor: "#ffffff", // ✅ X 轴轴线颜色设为白色
  79. zeroline: false,
  80. },
  81. plot_bgcolor: "#e5ecf6",
  82. paper_bgcolor: "#e5ecf6",
  83. margin: {
  84. l: 50,
  85. r: 50,
  86. t: 60,
  87. b: 50,
  88. },
  89. barmode: data.chartType === "bar" ? "stack" : "group",
  90. // ✅ 阈值线(核心保留)
  91. shapes: [
  92. createThresholdLine(15, "red"),
  93. createThresholdLine(-15, "red"),
  94. createThresholdLine(5, "#F9DD70"),
  95. createThresholdLine(-5, "#F9DD70"),
  96. createThresholdLine(0, "#fff"),
  97. ],
  98. };
  99. // ✅ 统一出口
  100. return await renderChart({
  101. traces,
  102. layout,
  103. bucketName,
  104. objectName,
  105. });
  106. };
  107. // ✅ 抽离:阈值线生成器(非常推荐)
  108. function createThresholdLine(y, color) {
  109. return {
  110. type: "line",
  111. xref: "paper",
  112. x0: 0,
  113. x1: 1,
  114. yref: "y",
  115. y0: y,
  116. y1: y,
  117. line: {
  118. color,
  119. width: 2,
  120. dash: y === 0 ? "solid" : "dash",
  121. },
  122. };
  123. }