偏航对风分析

src/router/index.js

@@ -792,6 +792,11 @@ const routes = [{
 	component: () =>
 		import( /* webpackChunkName: "malfunctionStatistics" */ "../views/globalMonitor/index.vue"),
 },
+{
+	path: "/phdffx", // 偏航对风分析
+	name: "phdffx",
+	component: () => import( /* webpackChunkName: "malfunctionStatistics" */ "../views/windAnalysis/phdffx.vue"),
+},
 ]
 const router = createRouter({
 	history: createWebHashHistory(),

src/views/windAnalysis/phdffx.vue

@@ -0,0 +1,582 @@
+<template>
+  <div id="phdffx">
+    <div class="query mg-b-8">
+      <div class="query-items">
+        <div class="query-item">
+          <div class="lable">场站：</div>
+          <div class="search-input">
+            <el-select v-model="wpId" clearable placeholder="请选择" popper-class="select" @change="(wpId) => { getTurbines() }">
+              <el-option v-for="item in wpList" :key="item.id" :value="item.id" :label="item.name"></el-option>
+            </el-select>
+          </div>
+        </div>
+        <div class="query-item">
+          <div class="lable">机组：</div>
+          <div class="search-input">
+            <el-select v-model="wtId" placeholder="请选择" popper-class="select">
+              <el-option v-for="item in wtList" :key="item.id" :label="item.name" :value="item.id"></el-option>
+            </el-select>
+          </div>
+        </div>
+        <div class="query-item">
+          <div class="lable">开始日期：</div>
+          <div class="search-input">
+            <el-date-picker v-model="startDate" type="date" placeholder="开始日期" popper-class="date-select" value-format="YYYY-MM-DD"></el-date-picker>
+          </div>
+        </div>
+        <div class="query-item">
+          <div class="lable">结束日期：</div>
+          <div class="search-input">
+            <el-date-picker v-model="endDate" type="date" placeholder="开始日期" popper-class="date-select" value-format="YYYY-MM-DD"></el-date-picker>
+          </div>
+        </div>
+        <div class="query-actions">
+          <button class="btn green" @click="getCharts()">查询</button>
+        </div>
+      </div>
+    </div>
+    <div class="mg-b-16">
+      <panel :title="'偏航对风风速分析'" :showLine="false">
+        <!-- <LineChart :list="statusData" :units="['']" :height="'220px'" /> -->
+        <div class="chart" id="linechart1"></div>
+      </panel>
+    </div>
+    <div class="mg-b-16">
+      <panel :title="'偏航对风功率分析'" :showLine="false">
+        <div class="chart" id="linechart2"></div>
+      </panel>
+    </div>
+    <div class="mg-b-16">
+      <panel :title="'偏航对风分析'" :showLine="false">
+        <div class="chart" id="linechart3"></div>
+      </panel>
+    </div>
+    <el-dialog :title="'偏航对风分析明细'" v-model="dialogShow" width="80%" top="10vh" custom-class="modal dBody" :close-on-click-modal="true">
+      <div class="chart" id="linechartDialog"></div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import LineChart from "../../components/chart/line/normal-line-chart.vue";
+import Panel from "../../components/coms/panel/panel.vue";
+import util from "@/helper/util.js";
+import partten from "@/helper/partten.js";
+import * as echarts from "echarts";
+export default {
+  name: "phdffx",
+  components: { LineChart, Panel },
+  data() {
+    return {
+      wpList: [],
+      wpId: "MHS_FDC",
+      wtList: [],
+      wtId: "MG01_01",
+      startDate: "",
+      endDate: "",
+      line1XData: [],
+      line2XData: [],
+      dialogShow: false,
+    };
+  },
+  created() {
+    this.getStations();
+    this.getTurbines();
+    let end = new Date();
+    let start = new Date();
+    start.setDate(1);
+    this.endDate = end.formatDate("yyyy-MM-dd");
+    this.startDate = start.formatDate("yyyy-MM-dd");
+
+    this.getCharts();
+  },
+  methods: {
+    // 场站
+    async getStations() {
+      const res = await this.API.requestData({
+        method: "GET",
+        baseURL: "http://10.155.32.4:9001/",
+        subUrl: "benchmarking/wplist",
+      });
+      this.wpList = res.data.data;
+      this.wpId = res.data.data[0].id;
+    },
+    async getTurbines() {
+      const res = await this.API.requestData({
+        method: "GET",
+        subUrl: "powercompare/windturbineAjax",
+        data: { wpId: this.wpId },
+      });
+      this.wtList = res.data.data;
+      this.wtId = res.data.data[0].id;
+    },
+    getCharts() {
+      this.getChart1();
+      this.getChart2();
+      this.getChart3();
+    },
+    async getChart1() {
+      const res = await this.API.requestData({
+        method: "POST",
+        subUrl: "yaw/getPassRate",
+        data: {
+          wtId: this.wtId,
+          beginDate: this.startDate,
+          endDate: this.endDate,
+          type: 2,
+        },
+      });
+      if (res && res.data && res.data.data) {
+        const xData = [];
+        const lData = [];
+        res.data.data.forEach((e) => {
+          xData.push(e.speed);
+          lData.push(e.passrate);
+        });
+        this.line1XData = xData;
+        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,
+            },
+          },
+          grid: {
+            top: util.vh(40),
+            left: util.vh(60),
+            right: util.vh(100),
+            bottom: util.vh(24),
+          },
+          xAxis: [
+            {
+              name: "风速（m/s）",
+              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("linechart1"));
+        chart.clear();
+        chart.setOption(option);
+        this.resize = function () {
+          chart.resize();
+        };
+        chart.getZr().off("click");
+        chart.getZr().on("click", (params) => {
+          const pointInPixel = [params.offsetX, params.offsetY];
+          if (chart.containPixel("grid", pointInPixel)) {
+            let xIndex = chart.convertFromPixel({ seriesIndex: 0 }, [
+              params.offsetX,
+              params.offsetY,
+            ])[0];
+            // 图标点击事件
+            this.showDetail("2", this.line1XData[xIndex]);
+          }
+        });
+        window.addEventListener("resize", this.resize);
+      }
+    },
+    async getChart2() {
+      const res = await this.API.requestData({
+        method: "POST",
+        subUrl: "yaw/getPassRate",
+        data: {
+          wtId: this.wtId,
+          beginDate: this.startDate,
+          endDate: this.endDate,
+          type: 1,
+        },
+      });
+      if (res && res.data && res.data.data) {
+        const xData = [];
+        const lData = [];
+        res.data.data.forEach((e) => {
+          xData.push(e.power);
+          lData.push(e.passrate);
+        });
+        this.line2XData = xData;
+        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,
+            },
+          },
+          grid: {
+            top: util.vh(40),
+            left: util.vh(60),
+            right: util.vh(100),
+            bottom: util.vh(24),
+          },
+          xAxis: [
+            {
+              name: "功率（kW）",
+              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("linechart2"));
+        chart.clear();
+        chart.setOption(option);
+        this.resize = function () {
+          chart.resize();
+        };
+        chart.getZr().off("click");
+        chart.getZr().on("click", (params) => {
+          const pointInPixel = [params.offsetX, params.offsetY];
+          if (chart.containPixel("grid", pointInPixel)) {
+            let xIndex = chart.convertFromPixel({ seriesIndex: 0 }, [
+              params.offsetX,
+              params.offsetY,
+            ])[0];
+            this.showDetail("1", this.line2XData[xIndex]/100);
+          }
+        });
+        window.addEventListener("resize", this.resize);
+      }
+    },
+    async getChart3() {
+      const res = await this.API.requestData({
+        method: "POST",
+        subUrl: "yaw/getTotalRanges",
+        data: {
+          wtId: this.wtId,
+          beginDate: this.startDate,
+          endDate: this.endDate,
+          type: 1,
+        },
+      });
+      if (res && res.data && res.data.data) {
+        const xData = [];
+        const lData = [];
+        const dataMap = res.data.data;
+        for (let key in dataMap) {
+          let tmpKey = key.replace(/r/, "");
+          tmpKey = tmpKey.replace(/_/, "-");
+          if (tmpKey < 100) {
+            xData.push(tmpKey);
+            lData.push(dataMap[key]);
+          }
+        }
+        this.line3Data = 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,
+            },
+          },
+          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("linechart3"));
+        chart.clear();
+        chart.setOption(option);
+        this.resize = function () {
+          chart.resize();
+        };
+        window.addEventListener("resize", this.resize);
+      }
+    },
+    async showDetail(type, value) {
+      this.dialogShow = true;
+      const res = await this.API.requestData({
+        method: "POST",
+        subUrl: "yaw/getRanges",
+        data: {
+          wtId: this.wtId,
+          beginDate: this.startDate,
+          endDate: this.endDate,
+          type: type,
+          value: value,
+        },
+      });
+      if (res && res.data && res.data.data) {
+        const xData = [];
+        const lData = [];
+        const dataMap = res.data.data;
+        for (let key in dataMap) {
+          let tmpKey = key.replace(/r/, "");
+          tmpKey = tmpKey.replace(/_/, "-");
+          if (tmpKey < 100) {
+            xData.push(tmpKey);
+            lData.push(dataMap[key]);
+          }
+        }
+        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,
+            },
+          },
+          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("linechartDialog"));
+        chart.clear();
+        chart.setOption(option);
+        this.resize = function () {
+          chart.resize();
+        };
+      }
+    },
+  },
+};
+</script>
+<style lang="less">
+#phdffx {
+  .chart {
+    width: 100%;
+    height: 220px;
+    display: block;
+    margin: auto;
+  }
+}
+</style>