|
@@ -1,7 +1,7 @@
|
|
|
<!--
|
|
|
* @Author: your name
|
|
|
* @Date: 2024-09-11 14:32:12
|
|
|
- * @LastEditTime: 2025-07-10 11:09:31
|
|
|
+ * @LastEditTime: 2025-07-15 14:17:51
|
|
|
* @LastEditors: bogon
|
|
|
* @Description: In User Settings Edit
|
|
|
* @FilePath: /performance-test/src/views/performance/components/chartsCom/powerMarkers2DCharts.vue
|
|
@@ -133,8 +133,6 @@ export default {
|
|
|
// this.color1 = this.themeColor;
|
|
|
// }
|
|
|
});
|
|
|
-
|
|
|
- // console.log(this.color1, colorSchemes[0].colors, "color1");
|
|
|
},
|
|
|
methods: {
|
|
|
// 根据配色方案设置每个选项的样式
|
|
@@ -275,6 +273,7 @@ export default {
|
|
|
"%{y} <br>" +
|
|
|
`时间: %{customdata}<extra></extra>`, // 在 hover 中显示格式化后的时间
|
|
|
customdata: data.colorbar || data.color, // 将格式化后的时间存入 customdata
|
|
|
+ timedata: data.timeData,
|
|
|
};
|
|
|
}
|
|
|
if (lineData) {
|
|
@@ -401,8 +400,8 @@ export default {
|
|
|
"Download plot as a png": "保存图片",
|
|
|
Autoscale: "缩放",
|
|
|
Pan: "平移",
|
|
|
- "Zoom out": "放大",
|
|
|
- "Zoom in": "缩小",
|
|
|
+ "Zoom out": "缩小",
|
|
|
+ "Zoom in": "放大",
|
|
|
"Box Select": "选择框操作",
|
|
|
"Lasso Select": "套索选择操作",
|
|
|
"Reset axes": "重置操作",
|
|
@@ -436,7 +435,7 @@ export default {
|
|
|
x: xClick, // 点击点的 x 坐标
|
|
|
y: yClick, // 点击点的 y 坐标
|
|
|
index: pointIndex, // 点击点的索引
|
|
|
- time: data.points[0].text, // 点击点的时间信息
|
|
|
+ time: data.points[0]?.data?.timedata[data.points[0].pointIndex], // 点击点的时间信息
|
|
|
});
|
|
|
|
|
|
// 初始化颜色和大小数组
|
|
@@ -462,7 +461,6 @@ export default {
|
|
|
|
|
|
// 用于跟踪已添加的 (x, y) 组合
|
|
|
const addedPoints = {};
|
|
|
-
|
|
|
// 遍历图表数据中的所有点,检查是否在多边形内
|
|
|
gd.data[0].x.forEach((xVal, i) => {
|
|
|
const yVal = gd.data[0].y[i];
|
|
@@ -472,9 +470,8 @@ export default {
|
|
|
this.selectedPoints.push({
|
|
|
x: gd.data[0].x[i],
|
|
|
y: gd.data[0].y[i],
|
|
|
- time: gd.data[0].text[i],
|
|
|
+ time: gd.data[0].timedata[i],
|
|
|
});
|
|
|
-
|
|
|
newColors[i] = "red"; // 高亮选择的点
|
|
|
newSize[i] = 10; // 设置点的大小
|
|
|
addedPoints[pointKey] = true;
|
|
@@ -489,30 +486,6 @@ export default {
|
|
|
newSize[point.index] = 10;
|
|
|
});
|
|
|
|
|
|
- // 使用 Plotly.restyle 更新颜色和大小
|
|
|
- // Plotly.restyle(gd, {
|
|
|
- // "marker.color": [newColors],
|
|
|
- // "marker.size": [newSize],
|
|
|
- // });
|
|
|
-
|
|
|
- // // 确保选中的点在最上面
|
|
|
- // const scatterTrace = gd.data[0]; // 原来的散点数据
|
|
|
- // const selectedTrace = {
|
|
|
- // x: this.selectedPoints.map((p) => p.x),
|
|
|
- // y: this.selectedPoints.map((p) => p.y),
|
|
|
- // mode: "markers",
|
|
|
- // type: "scattergl",
|
|
|
- // marker: {
|
|
|
- // color: "red", // 选中点颜色
|
|
|
- // size: 10,
|
|
|
- // },
|
|
|
- // };
|
|
|
-
|
|
|
- // // 合并数据,并保证选中点在最后
|
|
|
- // const updatedTraces = [scatterTrace, selectedTrace]; // 选中的点 `selectedTrace` 放在最后
|
|
|
-
|
|
|
- // // 更新图表
|
|
|
- // Plotly.react(gd, updatedTraces, gd.layout);
|
|
|
Plotly.addTraces(gd, {
|
|
|
x: this.selectedPoints.map((p) => p.x),
|
|
|
y: this.selectedPoints.map((p) => p.y),
|
|
@@ -548,28 +521,67 @@ export default {
|
|
|
}
|
|
|
this.downloadCSV();
|
|
|
},
|
|
|
- downloadCSV() {
|
|
|
- const headers = [this.chartData.xaixs, this.chartData.yaixs];
|
|
|
- const csvRows = [headers]; // 保存标头
|
|
|
- // 使用 Set 或 Map 去重
|
|
|
- const uniquePoints = [];
|
|
|
- this.selectedPoints.forEach((point) => {
|
|
|
- if (!uniquePoints.some((p) => p.x === point.x && p.y === point.y)) {
|
|
|
- uniquePoints.push(point);
|
|
|
+ async downloadCSV() {
|
|
|
+ try {
|
|
|
+ const paramValueTypes = await axios.get("/ETLapi/sysConf/getByType", {
|
|
|
+ params: { type: "en_cn_mapping" },
|
|
|
+ });
|
|
|
+ // 使用 Set 或 Map 去重
|
|
|
+ const uniquePoints = [];
|
|
|
+ this.selectedPoints.forEach((point) => {
|
|
|
+ if (!uniquePoints.some((p) => p.x === point.x && p.y === point.y)) {
|
|
|
+ uniquePoints.push(point);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ const newTimedata = uniquePoints.map((item) => item.time);
|
|
|
+
|
|
|
+ const result = await axios.post(
|
|
|
+ "/ETLapi/dataTransfer/getWindTurbineAndTimestamps",
|
|
|
+ {
|
|
|
+ timestamps: [...newTimedata],
|
|
|
+ transferType: this.chartData.scada || "", //分析数据源类型
|
|
|
+ windFarmCode: this.chartData.field_code || "", //风场编号
|
|
|
+ windTurbineNumber: this.chartData.data[0].engineCode || "", //风机编号
|
|
|
+ }
|
|
|
+ );
|
|
|
+ const allData = result?.data?.datas || [];
|
|
|
+ if (!allData.length) {
|
|
|
+ console.warn("无数据返回");
|
|
|
+ return;
|
|
|
}
|
|
|
- });
|
|
|
- // 将去重后的点加入 CSV 数据
|
|
|
- uniquePoints.forEach((point) => {
|
|
|
- csvRows.push(`${point.x},${point.y}`);
|
|
|
- });
|
|
|
- const csvString = csvRows.join("\n");
|
|
|
- const blob = new Blob([csvString], { type: "text/csv; charset=utf-8" });
|
|
|
- const url = URL.createObjectURL(blob);
|
|
|
- const a = document.createElement("a");
|
|
|
- a.href = url;
|
|
|
- a.download = "selected_data.csv";
|
|
|
- a.click();
|
|
|
- URL.revokeObjectURL(url);
|
|
|
+
|
|
|
+ const firstItem = allData[0];
|
|
|
+
|
|
|
+ // 4. 获取可用映射字段
|
|
|
+ const mapping = paramValueTypes?.data?.datas || [];
|
|
|
+ const matchedMapping = mapping.filter((m) =>
|
|
|
+ firstItem.hasOwnProperty(m.paramKey)
|
|
|
+ );
|
|
|
+
|
|
|
+ // 5. 构建 CSV 表头(中文)
|
|
|
+ const headers = matchedMapping.map((m) => m.paramValue).join(",");
|
|
|
+
|
|
|
+ // 6. 构建 CSV 内容行
|
|
|
+ const rows = allData.map((item) => {
|
|
|
+ return matchedMapping.map((m) => item[m.paramKey] ?? "").join(",");
|
|
|
+ });
|
|
|
+
|
|
|
+ // 7. 合并为 CSV 字符串
|
|
|
+ const csvString = [headers, ...rows].join("\n");
|
|
|
+
|
|
|
+ // 8. 下载
|
|
|
+ const blob = new Blob([csvString], { type: "text/csv; charset=utf-8" });
|
|
|
+ const url = URL.createObjectURL(blob);
|
|
|
+ const a = document.createElement("a");
|
|
|
+ a.href = url;
|
|
|
+ a.download = "selected_data.csv";
|
|
|
+ document.body.appendChild(a);
|
|
|
+ a.click();
|
|
|
+ document.body.removeChild(a);
|
|
|
+ URL.revokeObjectURL(url);
|
|
|
+ } catch (err) {
|
|
|
+ console.error(err);
|
|
|
+ }
|
|
|
},
|
|
|
updateChartColor(color) {
|
|
|
// 更新图表颜色
|