|
|
@@ -1,142 +0,0 @@
|
|
|
-<!--
|
|
|
- * @Author: your name
|
|
|
- * @Date: 2024-08-16 16:19:19
|
|
|
- * @LastEditTime: 2024-12-24 10:47:21
|
|
|
- * @LastEditors: bogon
|
|
|
- * @Description: In User Settings Edit
|
|
|
- * @FilePath: /performance-test/src/views/performance/components/JsonMarkerCharts.vue
|
|
|
--->
|
|
|
-<template>
|
|
|
- <!-- json 数据渲染plotly散点图 废弃页面-->
|
|
|
- <div>
|
|
|
- <div ref="chart" style="width: 100%; height: 500px"></div>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-<script>
|
|
|
-import Plotly from "plotly.js-dist";
|
|
|
-import axios from "axios";
|
|
|
-
|
|
|
-export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- dataArr: [], // 存储好点标识的数据
|
|
|
- dataBrr: [], // 存储坏点标识的数据
|
|
|
- dataCrr: [], // 存储限电点标识的数据
|
|
|
- };
|
|
|
- },
|
|
|
- async mounted() {
|
|
|
- try {
|
|
|
- // 从服务器获取数据
|
|
|
- const response = await axios.get(
|
|
|
- // "http://localhost:3006/wof053600062/WOF053600062-WOB00021/power_curve/manual/demo.json"
|
|
|
- "http://localhost:3006/getEchartsData"
|
|
|
- );
|
|
|
- this.processData(response.data); // 处理并分类数据
|
|
|
- this.initChart(); // 初始化图表
|
|
|
- } catch (error) {
|
|
|
- console.error("Error fetching data:", error);
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- processData(data) {
|
|
|
- data.forEach((item) => {
|
|
|
- switch (item.lab) {
|
|
|
- case "1":
|
|
|
- this.dataArr.push({ x: item.wind_velocity, y: item.active_power });
|
|
|
- break;
|
|
|
- case "5":
|
|
|
- this.dataBrr.push({ x: item.wind_velocity, y: item.active_power });
|
|
|
- break;
|
|
|
- case "4":
|
|
|
- this.dataCrr.push({ x: item.wind_velocity, y: item.active_power });
|
|
|
- break;
|
|
|
- default:
|
|
|
- return;
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- initChart() {
|
|
|
- const chartElement = this.$refs.chart;
|
|
|
- const trace1 = {
|
|
|
- x: this.dataArr.map((d) => d.x),
|
|
|
- y: this.dataArr.map((d) => d.y),
|
|
|
- mode: "markers",
|
|
|
- marker: { color: "green" },
|
|
|
- name: "好点",
|
|
|
- };
|
|
|
- const trace2 = {
|
|
|
- x: this.dataBrr.map((d) => d.x),
|
|
|
- y: this.dataBrr.map((d) => d.y),
|
|
|
- mode: "markers",
|
|
|
- marker: { color: "red" },
|
|
|
- name: "坏点",
|
|
|
- };
|
|
|
- const trace3 = {
|
|
|
- x: this.dataCrr.map((d) => d.x),
|
|
|
- y: this.dataCrr.map((d) => d.y),
|
|
|
- mode: "markers",
|
|
|
- marker: { color: "blue" },
|
|
|
- name: "限电点",
|
|
|
- };
|
|
|
-
|
|
|
- const data = [trace1, trace2, trace3];
|
|
|
-
|
|
|
- const layout = {
|
|
|
- title: "Scatter Plot",
|
|
|
- xaxis: {
|
|
|
- title: "Wind Velocity",
|
|
|
- gridcolor: "rgb(255,255,255)",
|
|
|
- range: [1, 10],
|
|
|
- showgrid: true,
|
|
|
- showline: false,
|
|
|
- showticklabels: true,
|
|
|
- tickcolor: "rgb(127,127,127)",
|
|
|
- ticks: "outside",
|
|
|
- zeroline: false,
|
|
|
- },
|
|
|
- yaxis: {
|
|
|
- title: "Active Power",
|
|
|
- gridcolor: "rgb(255,255,255)",
|
|
|
- showgrid: true,
|
|
|
- showline: false,
|
|
|
- showticklabels: true,
|
|
|
- tickcolor: "rgb(127,127,127)",
|
|
|
- ticks: "outside",
|
|
|
- zeroline: false,
|
|
|
- },
|
|
|
- showlegend: true,
|
|
|
- hovermode: "closest",
|
|
|
- hovermode: "closest",
|
|
|
- paper_bgcolor: "rgb(255,255,255)",
|
|
|
- // plot_bgcolor: "rgb(229,229,229)",
|
|
|
- // paper_bgcolor: "lightgray", // 设置图表外部区域背景色
|
|
|
- plot_bgcolor: "#e5ecf6", // 设置绘图区背景色
|
|
|
- };
|
|
|
-
|
|
|
- Plotly.newPlot(chartElement, data, layout);
|
|
|
-
|
|
|
- // 响应窗口大小变化
|
|
|
- window.addEventListener("resize", () => {
|
|
|
- Plotly.Plots.resize(chartElement);
|
|
|
- });
|
|
|
-
|
|
|
- // 处理图表的选择事件
|
|
|
- chartElement.on("plotly_selected", (eventData) => {
|
|
|
- if (eventData) {
|
|
|
- const selectedPoints = [];
|
|
|
- eventData.points.forEach((pt) => {
|
|
|
- selectedPoints.push({
|
|
|
- x: pt.x,
|
|
|
- y: pt.y,
|
|
|
- curveNumber: pt.curveNumber,
|
|
|
- });
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- },
|
|
|
-};
|
|
|
-</script>
|
|
|
-<style scoped>
|
|
|
-/* 自定义样式 */
|
|
|
-</style>
|
liujiejie