|
|
@@ -1,134 +1,3 @@
|
|
|
-<!-- <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: [],
|
|
|
- }, // 故障时长
|
|
|
- fenFaultCsvData: {
|
|
|
- type: Array,
|
|
|
- default: [],
|
|
|
- },
|
|
|
- },
|
|
|
- watch: {
|
|
|
- faultCounts: {
|
|
|
- deep: true,
|
|
|
- handler(v) {
|
|
|
- this.renderChart();
|
|
|
- },
|
|
|
- },
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.renderChart();
|
|
|
- },
|
|
|
- methods: {
|
|
|
- renderChart() {
|
|
|
- // 故障次数的散点图数据（左侧 Y 轴）
|
|
|
- const scatterFaultCounts = {
|
|
|
- x: this.faultTypes.slice(0, 10),
|
|
|
- y: this.faultCounts.slice(0, 10),
|
|
|
- mode: "markers", // 散点图
|
|
|
- marker: { color: "#64ADC2", size: 10 }, // 蓝色散点
|
|
|
- name: "故障次数",
|
|
|
- hovertemplate: `机组:` + ` %{x} <br> ` + `故障次数:` + "%{y} 次<br>",
|
|
|
- };
|
|
|
-
|
|
|
- // // 故障时长的散点图数据（右侧 Y 轴）
|
|
|
- // const scatterFaultDurations = {
|
|
|
- // x: this.faultTypes.slice(0, 10),
|
|
|
- // y: this.faultDurations.slice(0, 10),
|
|
|
- // mode: "markers", // 散点图
|
|
|
- // marker: { color: "#1A295D", size: 10 }, // 红色散点
|
|
|
- // name: "故障时长",
|
|
|
- // yaxis: "y2", // 使用第二个 Y 轴（右侧）
|
|
|
- // hovertemplate: `机组:` + ` %{x} <br> ` + `故障时长:` + "%{y} 分钟<br>",
|
|
|
- // };
|
|
|
-
|
|
|
- // 布局配置，设置双 Y 轴
|
|
|
- const layout = {
|
|
|
- title: {
|
|
|
- text: "机组故障次数与时长分析Top10",
|
|
|
- font: {
|
|
|
- size: 16,
|
|
|
- weight: "bold",
|
|
|
- },
|
|
|
- },
|
|
|
- xaxis: {
|
|
|
- title: "故障机组",
|
|
|
- tickangle: 30,
|
|
|
- tickmode: "array",
|
|
|
- tickvals: this.faultTypes.slice(0, 10), // 保证这里是字符串数组
|
|
|
- ticktext: this.faultTypes.slice(0, 10), // 确保 ticktext 使用相同的标签
|
|
|
- tickfont: { size: 12 },
|
|
|
- type: "category", // 让 Y 轴按类别均匀分布
|
|
|
- // categoryorder: "category ascending", // 按类别字母顺序排列
|
|
|
- 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" },
|
|
|
- // showgrid: false, // 隐藏 Y 轴网格线
|
|
|
- // overlaying: "y", // 在第一个 Y 轴上方绘制
|
|
|
- // side: "right", // 右侧的 Y 轴
|
|
|
- // position: 1, // 调整右侧轴的位置
|
|
|
- // showline: true,
|
|
|
-
|
|
|
- // // tickvals: this.faultTypes.slice(0, 10), // 保证这里是字符串数组
|
|
|
- // // ticktext: this.faultTypes.slice(0, 10), // 确保 ticktext 使用相同的标签
|
|
|
- // linecolor: "#1A295D", // 设置右侧轴线颜色
|
|
|
- // },
|
|
|
- plot_bgcolor: "#e5ecf6",
|
|
|
- gridcolor: "#fff",
|
|
|
- bgcolor: "#e5ecf6", // 设置背景颜色
|
|
|
- showlegend: false, // 显示图例
|
|
|
- margin: {
|
|
|
- t: 80, // 上边距
|
|
|
- b: 150, // 下边距，给 X 轴标签更多空间
|
|
|
- },
|
|
|
- };
|
|
|
-
|
|
|
- // 渲染图表
|
|
|
- Plotly.newPlot(this.$refs.chart, [scatterFaultCounts], layout);
|
|
|
- },
|
|
|
- },
|
|
|
-};
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped>
|
|
|
-/* 你可以根据需要添加样式 */
|
|
|
-</style> -->
|
|
|
-
|
|
|
<template>
|
|
|
<div>
|
|
|
<div ref="chart" style="width: 100%; height: 500px"></div>
|
|
|
@@ -166,89 +35,12 @@ export default {
|
|
|
this.renderChart();
|
|
|
},
|
|
|
methods: {
|
|
|
- // renderChart() {
|
|
|
- // // 步骤 1：归一化 faultCounts 用于 marker.size 显示
|
|
|
- // const rawSizes = this.faultCounts;
|
|
|
- // const minSize = 8; // 最小圆点大小
|
|
|
- // const maxSize = 30; // 最大圆点大小
|
|
|
-
|
|
|
- // const sizeRange = maxSize - minSize;
|
|
|
- // const minValue = Math.min(...rawSizes);
|
|
|
- // const maxValue = Math.max(...rawSizes);
|
|
|
- // const normalizedSizes = rawSizes.map((val) => {
|
|
|
- // if (maxValue === minValue) return (minSize + maxSize) / 2;
|
|
|
- // return ((val - minValue) / (maxValue - minValue)) * sizeRange + minSize;
|
|
|
- // });
|
|
|
- // console.log("durationHour", this.faultTypes);
|
|
|
- // // 步骤 2：生成每个散点（使用归一化后的 size）
|
|
|
- // const data = this.faultTypes.map((name, i) => {
|
|
|
- // const durationHour = this.faultDurations.map((s) => {
|
|
|
- // // console.log(s, "s");
|
|
|
- // return (s / 3600).toFixed(2);
|
|
|
- // });
|
|
|
- // const count = this.faultCounts[i];
|
|
|
-
|
|
|
- // return {
|
|
|
- // x: [name],
|
|
|
- // y: [durationHour[i]],
|
|
|
- // mode: "markers",
|
|
|
- // type: "scatter",
|
|
|
- // name: name,
|
|
|
- // marker: {
|
|
|
- // size: normalizedSizes[i],
|
|
|
- // sizemode: "area",
|
|
|
- // sizeref: 1,
|
|
|
- // sizemin: 4,
|
|
|
- // showscale: false,
|
|
|
- // },
|
|
|
- // hovertemplate: `机组: ${name}<br>故障时长: ${durationHour[i]} 小时<br>故障次数: ${count} 次<extra></extra>`,
|
|
|
- // };
|
|
|
- // });
|
|
|
-
|
|
|
- // const layout = {
|
|
|
- // title: {
|
|
|
- // text: "机组故障时长与故障次数分析",
|
|
|
- // font: { size: 16, weight: "bold" },
|
|
|
- // },
|
|
|
- // xaxis: {
|
|
|
- // title: "故障机组",
|
|
|
- // type: "category",
|
|
|
- // tickangle: 30,
|
|
|
- // tickfont: { size: 12 },
|
|
|
- // gridcolor: "rgb(255,255,255)", // 网格线颜色
|
|
|
- // tickcolor: "rgb(255,255,255)",
|
|
|
- // backgroundcolor: "#e5ecf6",
|
|
|
- // showbackground: true, // 显示背景
|
|
|
- // },
|
|
|
- // yaxis: {
|
|
|
- // title: "故障时长（小时）",
|
|
|
- // tickfont: { size: 12 },
|
|
|
- // gridcolor: "rgb(255,255,255)", // 网格线颜色
|
|
|
- // tickcolor: "rgb(255,255,255)",
|
|
|
- // backgroundcolor: "#e5ecf6",
|
|
|
- // showbackground: true, // 显示背景
|
|
|
- // },
|
|
|
- // plot_bgcolor: "#e5ecf6",
|
|
|
- // gridcolor: "#fff", // 设置网格线颜色
|
|
|
- // margin: { t: 80, b: 120 },
|
|
|
- // showlegend: true,
|
|
|
- // legendgroup: "same",
|
|
|
- // legend: {
|
|
|
- // itemsizing: "constant", // ✅ 统一图例 marker 大小
|
|
|
- // font: {
|
|
|
- // size: 12,
|
|
|
- // },
|
|
|
- // },
|
|
|
- // };
|
|
|
-
|
|
|
- // Plotly.newPlot(this.$refs.chart, data, layout);
|
|
|
- // },
|
|
|
renderChart() {
|
|
|
// 步骤 1：预处理，将数据打包成对象数组以便排序
|
|
|
const combined = this.faultTypes.map((name, i) => ({
|
|
|
name,
|
|
|
count: this.faultCounts[i],
|
|
|
- durationHour: (this.faultDurations[i] / 3600).toFixed(2),
|
|
|
+ durationHour: this.faultDurations[i],
|
|
|
}));
|
|
|
|
|
|
// 步骤 2：按 name 字符串排序
|
liujiejie