performance-test/src/views/performance/components/chartsCom/FaultAll.vue

<!--
 * @Author: your name
 * @Date: 2025-01-15 14:24:59
 * @LastEditTime: 2025-07-10 11:01:20
 * @LastEditors: bogon
 * @Description: In User Settings Edit
 * @FilePath: /performance-test/src/views/performance/components/chartsCom/FaultAll.vue
-->
<template>
  <div>
    <div ref="chart" style="width: 100%; height: 400px"></div>
  </div>
</template>

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

export default {
  name: "faultAll",
  props: {
    faultTypes: {
      type: Array,
      default: [],
    }, // 故障类型
    faultCounts: {
      type: Array,
      default: [],
    }, // 故障次数
    faultDurations: {
      type: Array,
      default: [],
    }, // 故障时长
    zongFaultCsvData: {
      type: Array,
      default: [],
    },
  },
  watch: {
    zongFaultCsvData: {
      deep: true,
      handler(v) {
        if (v && v[0] && v[0].data) {
          this.faultTypes = v[0].data.map((item) => item.fault_detail);
          this.faultCounts = v[0].data.map((item) => item.count);
          this.faultDurations = v[0].data.map((item) => item.fault_time_sum);
          this.renderChart();
        }
      },
    },

    faultCounts: {
      deep: true,
      handler(v) {
        this.renderChart();
      },
    },
  },
  mounted() {
    this.renderChart();
  },
  methods: {
    renderChart() {
      // 故障次数的柱状图数据（左侧 Y 轴）
      const barTrace = {
        x: this.faultTypes.slice(0, 10),
        y: this.faultCounts.slice(0, 10),
        type: "bar",
        marker: { color: "#64ADC2" }, // 蓝色柱状图
        name: "故障次数",
        hovertemplate:
          `故障类型:` + ` %{x} <br> ` + `故障次数:` + "%{y} 次<br>",
      };

      // 故障时长的折线图数据（右侧 Y 轴）
      const lineTrace = {
        x: this.faultTypes.slice(0, 10),
        y: this.faultDurations.slice(0, 10).map((item) => item.toFixed(2)),
        type: "scatter",
        mode: "lines+markers", // 线性图 + 点标记
        line: { color: "#1A295D" }, // 红色折线
        name: "故障时长",
        yaxis: "y2", // 使用第二个 Y 轴（右侧）
        hovertemplate:
          `故障类型:` + ` %{x} <br> ` + `故障时长:` + "%{y} 小时 <br>",
      };

      // 布局配置，设置双 Y 轴
      const layout = {
        title: {
          text: "全场故障次数与时长分析Top10",
          font: {
            size: 16, // 设置标题字体大小（默认 16）
            weight: "bold",
          },
        },
        xaxis: {
          title: "故障类型",
          tickangle: 30,
          tickmode: "array",
          tickvals: this.faultTypes.slice(0, 10),
          tickfont: { size: 12 },
          gridcolor: "rgb(255,255,255)",
          tickcolor: "rgb(255,255,255)",
          backgroundcolor: "#e5ecf6",
        },
        yaxis: {
          title: "故障次数",
          titlefont: { color: "#64ADC2" },
          tickfont: { color: "#64ADC2" },
          side: "left", // 左侧的 Y 轴
          showline: true,
          linecolor: "#64ADC2",
          gridcolor: "rgb(255,255,255)",
          tickcolor: "rgb(255,255,255)",
          backgroundcolor: "#e5ecf6",
        },
        yaxis2: {
          title: "故障时长 (小时)",
          titlefont: { color: "#1A295D" },
          tickfont: { color: "#1A295D" },
          overlaying: "y", // 在第一个 Y 轴上方绘制
          side: "right", // 右侧的 Y 轴
          position: 1, // 调整右侧轴的位置
          showline: true,
          linecolor: "#1A295D", // 设置右侧轴线颜色
        },
        barmode: "group", // 柱状图分组
        plot_bgcolor: "#e5ecf6",
        gridcolor: "#fff",
        bgcolor: "#e5ecf6", // 设置背景颜色
        showlegend: false,
        // legend: {
        //   //   x: 1, // 设置 legend 水平位置
        //   //   y: 1, // 设置 legend 垂直位置
        //   xanchor: "left", // 使图例与 x 轴对齐
        //   yanchor: "top", // 使图例与 y 轴对齐
        //   pad: {
        //     r: 100, // 设置图表与 legend 之间的上间距
        //   },
        // },
        margin: {
          t: 80, // 上边距
          b: 150, // 下边距，给 X 轴标签更多空间
          //   r: 200, // 增加右边距，避免图例遮挡右侧 Y 轴
        },
      };

      // 渲染图表
      Plotly.newPlot(this.$refs.chart, [barTrace, lineTrace], layout, {
        modeBarButtonsToRemove: [
          // 移除不需要的工具按钮
          "lasso2d",
          "sendDataToCloud",
          "resetCameraLastSave3d",
          "resetCameraDefault3d",
          "resetCameraLastSave",
          "sendDataToCloud",
          "zoom2d", // 缩放按钮
          "zoom3d",
          "plotlylogo2D",
          "plotlylogo3D",
        ],
        displaylogo: false,
        responsive: true,
      }).then(function (gd) {
        // 获取工具栏按钮
        const toolbar = gd.querySelector(".modebar");
        const buttons = toolbar.querySelectorAll(".modebar-btn");

        // 定义一个映射对象，方便修改按钮提示
        const titleMap = {
          "Download plot as a png": "保存图片",
          Autoscale: "缩放",
          Pan: "平移",
          "Zoom out": "缩小",
          "Zoom in": "放大",
          "Box Select": "选择框操作",
          "Lasso Select": "套索选择操作",
          "Reset axes": "重置操作",
          "Reset camera to default": "重置相机视角",
          "Turntable rotation": "转台式旋转",
          "Orbital rotation": "轨道式旋转",
        };

        // 遍历所有按钮，修改它们的 title
        buttons.forEach(function (button) {
          const dataTitle = button.getAttribute("data-title");

          // 如果标题匹配，修改属性值
          if (titleMap[dataTitle]) {
            button.setAttribute("data-title", titleMap[dataTitle]);
          }
        });
      });
    },
  },
};
</script>

<style scoped>
/* 你可以根据需要添加样式 */
</style>