sis_zhfx/src/views/sampleDatabase/powerlineAnalysis/index.vue

<template>
  <div>
    <!-- <div>
      <panel :title="'偏航对风分析'" :showLine="false">
        <div style="height: 200px" class="chart" id="linechart"></div>
      </panel>
    </div> -->
    <div>
      <panel :title="'功率曲线拟合'" :showLine="false">
        <el-button @click="get()">查询</el-button>
        <ScatterLineChart
          xTitle="风速(m/s)"
          yTitle="功率(kw)"
          :showLegend="true"
          :height="'calc(70vh)'"
          :symbolSize="5"
          :data="scatterData"
          :lineData="lineData"
        ></ScatterLineChart>
      </panel>
    </div>
  </div>
</template>

<script>
import Panel from "../../../components/coms/panel/panel.vue";
import ScatterLineChart from "./scatter-line-chart.vue";
import util from "@/helper/util.js";
import partten from "@/helper/partten.js";
import * as echarts from "echarts";

export default {
  // 使用组件
  components: {
    Panel,
    ScatterLineChart,
  },
  data() {
    return {
      scatterData: [
        {
          title: "",
          value: [],
        },
      ],
      lineData: { legends: [], data: [[], []] },
    };
  },
  created() {
    // this.$nextTick(() => {
    //   this.getPHAnalyse();
    // });
  },
  methods: {
    get() {
      // this.getPHAnalyse();
       this.getScatter();
    },
    //散点数据
    getScatter() {
      let that = this;
      that.API.requestData({
        method: "POST",
        baseURL: "http://192.168.10.5:9002/",
        subUrl: "scatter/list",
        data: {
          station: "NSS_FDC",
          wtId: "NG01_01",
          time: "2021-11",
        },
        success(res) {
          if (res.code == 200 && res.data) {
            let scatterArr = [
              {
                title: "NG01有用点",
                value: res.data.scatter,
              },
            ];
            that.scatterData = scatterArr;
            let lineArr = {
              legends: ["实际", "修正"],
              data: [[], []],
            };
            res.data.lineactual.forEach((ele) => {
              lineArr.data[0].push(ele[1]);
            });
            res.data.lineoptimal.forEach((ele) => {
              lineArr.data[1].push(ele[1]);
            });
            that.lineData = lineArr;
          }
        },
      });
    },
    //偏航对风分析
    getPHAnalyse() {
      let that = this;
      //  that.API.requestData({
      //    method: "POST",
      //    baseURL: "http://192.168.10.5:9002/",
      //    subUrl: "scatter/range",
      //    data: {
      //      station: "NSS_FDC",
      //      wtId: "NG01_01",
      //      time: "2021-11",
      //    },
      //    success(res) {
      //      if (res.code == 200 && res.data) {
      const xData = [
        "-50",
        "-49",
        "-48",
        "-47",
        "-46",
        "-45",
        "-44",
        "-43",
        "-42",
        "-41",
        "-40",
        "-39",
        "-38",
        "-37",
        "-36",
        "-35",
        "-34",
        "-33",
        "-32",
        "-31",
        "-30",
        "-29",
        "-28",
        "-27",
        "-26",
        "-25",
        "-24",
        "-23",
        "-22",
        "-21",
        "-20",
        "-19",
        "-18",
        "-17",
        "-16",
        "-15",
        "-14",
        "-13",
        "-12",
        "-11",
        "-10",
        "-9",
        "-8",
        "-7",
        "-6",
        "-5",
        "-4",
        "-3",
        "-2",
        "-1",
        "0",
        "1",
        "2",
        "3",
        "4",
        "5",
        "6",
        "7",
        "8",
        "9",
        "10",
        "11",
        "12",
        "13",
        "14",
        "15",
        "16",
        "17",
        "18",
        "19",
        "20",
        "21",
        "22",
        "23",
        "24",
        "25",
        "26",
        "27",
        "28",
        "29",
        "30",
        "31",
        "32",
        "33",
        "34",
        "35",
        "36",
        "37",
        "38",
        "39",
        "40",
        "41",
        "42",
        "43",
        "44",
        "45",
        "46",
        "47",
        "48",
        "49",
        "50",
      ];
      const lData = [
        1, 1, 0, 0, 0, 0, 1, 1, 0, 1, 0, 1, 0, 4, 3, 3, 1, 3, 1, 2, 5, 5, 5, 5,
        9, 15, 16, 25, 39, 42, 62, 77, 103, 108, 161, 189, 238, 309, 418, 480,
        538, 635, 777, 877, 1021, 1170, 1224, 1341, 1409, 1421, 3016, 1493,
        1437, 1389, 1334, 1177, 1135, 1031, 865, 693, 599, 538, 404, 318, 252,
        207, 200, 140, 103, 81, 77, 66, 46, 32, 27, 16, 19, 9, 4, 9, 10, 5, 7,
        7, 3, 1, 3, 2, 1, 1, 0, 0, 2, 2, 1, 1, 0, 1, 1, 0, 2,
      ];
      //   const dataMap = res.data[0];
      //   for (let key in dataMap) {
      //     let tmpKey = key.replace(/r/, "");
      //     tmpKey = tmpKey.replace(/f/, "-");
      //     if (tmpKey < 100) {
      //       xData.push(tmpKey);
      //       lData.push(dataMap[key]);
      //     }
      //   }
      console.log(xData);
      console.log(lData);
      let option = {
        color: ["#05bb4c", "#4b55ae", "#fa8c16", "#f8de5b"],
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(0,0,0,0.4)",
          borderColor: partten.getColor("gray"),
          textStyle: {
            color: "#fff",
            fontSize: util.vh(16),
          },
        },
        legend: {
          show: false,
          data: ["偏航次数"],
          right: 56,
          icon: "circle",
          itemWidth: 6,
          inactiveColor: "#606769",
          textStyle: {
            color: partten.getColor("grayl"),
            fontSize: 12,
          },
        },
        toolbox: {
          brush: {
            type: ["lineX", "clear"],
          },
        },
        //拖动选择属性
        brush: {
          xAxisIndex: "all",
          brushLink: "all",
          throttleDelay: 1,
          outOfBrush: {
            colorAlpha: 0.5,
          },
        },
        grid: {
          top: util.vh(40),
          left: util.vh(60),
          right: util.vh(130),
          bottom: util.vh(24),
        },
        xAxis: [
          {
            name: "对风偏差（度）",
            type: "category",
            boundaryGap: false,
            axisLabel: {
              formatter: "{value}",
              fontSize: util.vh(14),
              textStyle: {
                color: partten.getColor("gray"),
              },
            },
            data: xData,
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "数量",
            axisLabel: {
              formatter: "{value}",
              fontSize: util.vh(14),
            },
            splitLine: {
              lineStyle: {
                color: partten.getColor("gray") + 55,
                type: "dashed",
              },
            },
          },
        ],
        series: [
          {
            name: "数量",
            type: "line",
            smooth: true,
            zlevel: 0,
            lineStyle: {
              normal: {
                color: "#05bb4c",
                width: 1,
              },
            },
            yAxisIndex: 0,
            data: lData,
          },
        ],
      };
      const chart = echarts.init(document.getElementById("linechart"));
      chart.clear();
      chart.setOption(option);
      //拖动选择属性
      chart.dispatchAction({
        type: "brush",
        areas: [
          {
            brushType: "lineX",
            coordRange: ["-15", "15"],
            xAxisIndex: 0,
          },
        ],
      });
      chart.on("brushSelected", function (params) {
        var mainSeries = params.batch[0].areas;
        var selectedItems = []; //选中区域的横纵标
        for (var i = 0; i < mainSeries.length; i++) {
          if (mainSeries[i].coordRange && mainSeries[i].coordRange.length > 0) {
            for (var j = 0; j < mainSeries[i].coordRange.length; j++) {
              selectedItems.push(mainSeries[i].coordRange[j]);
            }
          }
        }
        
           console.log(selectedItems);
      });

      this.resize = function () {
        chart.resize();
      };
      window.addEventListener("resize", this.resize);
      // }
      //    },
      //  });
    },
  },
};
</script>

<style lang="less" scoped>
</style>