|
@@ -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>
|