hb_sis_zhfx/src/views/windAnalysis/phdffx.vue

<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();
  },
  updated() {
    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.$nextTick(() => {
        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>