|
|
@@ -0,0 +1,400 @@
|
|
|
+import * as echarts from "echarts";
|
|
|
+//import ecStat from "echarts-stat";
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ wpIdslist: {
|
|
|
+ name: "",
|
|
|
+ id: "",
|
|
|
+ },
|
|
|
+ pjIdslist: {
|
|
|
+ name: "麻黄山一期工程",
|
|
|
+ id: "MHS01_GC",
|
|
|
+ },
|
|
|
+ xlIdslist: {
|
|
|
+ name: "麻黄山一号集电线路",
|
|
|
+ id: "MHS01_XL",
|
|
|
+ },
|
|
|
+ fc: "MHS_FDC",
|
|
|
+ pj: "麻黄山一期工程",
|
|
|
+ xl: "麻黄山一号集电线路",
|
|
|
+ year: "2021",
|
|
|
+ month: "01",
|
|
|
+ activeName: "no_1",
|
|
|
+ loading:true,
|
|
|
+ loading2:true,
|
|
|
+ loading3:true,
|
|
|
+ xllist: [],
|
|
|
+ scatter_1: [],
|
|
|
+ scatter_2: [],
|
|
|
+ scatter_3: [],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {},
|
|
|
+ methods: {
|
|
|
+ query_wpid() {
|
|
|
+ let that = this;
|
|
|
+ let newData = new Date();
|
|
|
+ this.year = newData.getFullYear()+'';
|
|
|
+ let month = newData.getMonth()+1;
|
|
|
+ if(month<10){that.month='0'+month};
|
|
|
+ this.$http.get("powercompare/windfarmAjax?").then((res) => {
|
|
|
+ this.wpIdslist = res.data.data;
|
|
|
+ // this.query_xml();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleClick() {
|
|
|
+ if (this.activeName == "no_1") {
|
|
|
+ this.query_scatter_1();
|
|
|
+ } else if (this.activeName == "no_2") {
|
|
|
+ this.query_scatter_2();
|
|
|
+ } else if (this.activeName == "no_3") {
|
|
|
+ this.query_scatter_3();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ query_xl() {
|
|
|
+ this.xl = "";
|
|
|
+ Object.assign(this.$data.xlIdslist, this.$options.data().xlIdslist);
|
|
|
+ this.$http
|
|
|
+ .get("powercompare/lineAjax?pjIds=" + this.xllist)
|
|
|
+ .then((res) => {
|
|
|
+ this.xlIdslist = res.data.data;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ query_scatter_1() {
|
|
|
+ let that = this;
|
|
|
+ Object.assign(this.$data.scatter_1, this.$options.data().scatter_1);
|
|
|
+ var digital = new URLSearchParams();
|
|
|
+ digital.append("wpId", this.fc);
|
|
|
+ digital.append("lnId", "");
|
|
|
+ digital.append("pjId", "");
|
|
|
+ digital.append("year", this.year);
|
|
|
+ digital.append("month", this.month);
|
|
|
+ this.$http.post("/scatter/scatterAjax", digital).then((res) => {
|
|
|
+ this.scatter_1 = res.data.data;
|
|
|
+ this.loading1=false;
|
|
|
+ this.draw_scatter_diagram_1();
|
|
|
+
|
|
|
+ });
|
|
|
+ },
|
|
|
+ query_scatter_2() {
|
|
|
+ let that = this;
|
|
|
+ Object.assign(this.$data.scatter_2, this.$options.data().scatter_2);
|
|
|
+ var digital = new URLSearchParams();
|
|
|
+ digital.append("wpId", this.fc);
|
|
|
+ digital.append("lnId", "");
|
|
|
+ digital.append("pjId", this.pj);
|
|
|
+ digital.append("year", this.year);
|
|
|
+ digital.append("month", this.month);
|
|
|
+ this.$http.post("/scatter/scatterAjax", digital).then((res) => {
|
|
|
+ this.scatter_2 = res.data.data;
|
|
|
+ this.loading2=false;
|
|
|
+ this.draw_scatter_diagram_2();
|
|
|
+
|
|
|
+ });
|
|
|
+ },
|
|
|
+ query_scatter_3() {
|
|
|
+ Object.assign(this.$data.scatter_3, this.$options.data().scatter_3);
|
|
|
+ var digital = new URLSearchParams();
|
|
|
+ digital.append("wpId", this.fc);
|
|
|
+ digital.append("lnId", this.xl);
|
|
|
+ digital.append("pjId", "");
|
|
|
+ digital.append("year", this.year);
|
|
|
+ digital.append("month", this.month);
|
|
|
+ this.$http.post("/scatter/scatterAjax", digital).then((res) => {
|
|
|
+ this.scatter_3 = res.data.data;
|
|
|
+ this.loading3=false;
|
|
|
+ this.draw_scatter_diagram_3();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ query_xml() {
|
|
|
+ let that = this;
|
|
|
+ Object.assign(this.$data.xllist, this.$options.data().xllist);
|
|
|
+ Object.assign(this.$data.pjIdslist, this.$options.data().pjIdslist);
|
|
|
+ this.pj = "";
|
|
|
+ this.xl = "";
|
|
|
+ this.xllist = [];
|
|
|
+ this.$http
|
|
|
+ .get("powercompare/projectAjax?wpIds=" + this.fc)
|
|
|
+ .then((res) => {
|
|
|
+ this.pjIdslist = res.data.data;
|
|
|
+ for (let i = 0; i < Object.keys(this.pjIdslist).length; i++) {
|
|
|
+ that.xllist.push(that.pjIdslist[i].id);
|
|
|
+ }
|
|
|
+ this.query_xl();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ filter() {
|
|
|
+ for (let i = 0; i < Object.keys(this.QBlist).length; i++) {
|
|
|
+ fjj = "";
|
|
|
+ fjj = this.QBlist[i].id;
|
|
|
+ if (fjj.endsWith("FDC")) {
|
|
|
+ that.FClist.push(this.QBlist[i]);
|
|
|
+ } else {
|
|
|
+ that.GFlist.push(this.QBlist[i]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ draw_scatter_diagram_1() {
|
|
|
+ var chartDom = document.getElementById("scatter_diagram_1");
|
|
|
+ var myChart = echarts.init(chartDom);
|
|
|
+ var option;
|
|
|
+
|
|
|
+
|
|
|
+ option = {
|
|
|
+ title: {
|
|
|
+ text: "风机功率排布情况",
|
|
|
+ lft: "300px",
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data: ["功率"],
|
|
|
+ right: "66px",
|
|
|
+ },
|
|
|
+
|
|
|
+ tooltip: {
|
|
|
+ show: false,
|
|
|
+ trigger: "axis",
|
|
|
+ axisPointer: {
|
|
|
+ type: "cross",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: "value",
|
|
|
+ scale: true,
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ type: "dashed",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ formatter: "{value} m/s",
|
|
|
+ },
|
|
|
+ splitNumber: 20,
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: "value",
|
|
|
+ scale: true,
|
|
|
+ min: -40,
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ type: "dashed",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ formatter: "{value} 万kw",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "功率",
|
|
|
+ type: "scatter",
|
|
|
+ color: "#FF7F50",
|
|
|
+ data: this.scatter_1,
|
|
|
+ markPoint: {
|
|
|
+ data: [
|
|
|
+ { type: "max", name: "最大值" },
|
|
|
+ { type: "min", name: "最小值" },
|
|
|
+ ],
|
|
|
+ symbol: "pin",
|
|
|
+ symbolSize: 50,
|
|
|
+ silent: true,
|
|
|
+ },
|
|
|
+ markLine: {
|
|
|
+ data: [{ type: "average", name: "平均值" }],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "line",
|
|
|
+ type: "line",
|
|
|
+ smooth: true,
|
|
|
+ datasetIndex: 1,
|
|
|
+ symbolSize: 0.1,
|
|
|
+ symbol: "circle",
|
|
|
+ color: "#87CEFA",
|
|
|
+ label: { show: false },
|
|
|
+ labelLayout: { dx: -20 },
|
|
|
+ encode: { label: 2, tooltip: 1 },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+
|
|
|
+ option && myChart.setOption(option);
|
|
|
+ },
|
|
|
+ draw_scatter_diagram_2() {
|
|
|
+ var chartDom = document.getElementById("scatter_diagram_2");
|
|
|
+ var myChart = echarts.init(chartDom);
|
|
|
+ var option;
|
|
|
+
|
|
|
+ option = {
|
|
|
+ title: {
|
|
|
+ text: "项目功率排布情况",
|
|
|
+ left: "300px",
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data: ["功率"],
|
|
|
+ right: "66px",
|
|
|
+ },
|
|
|
+
|
|
|
+ tooltip: {
|
|
|
+ show: false,
|
|
|
+ trigger: "axis",
|
|
|
+ axisPointer: {
|
|
|
+ type: "cross",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ type: "dashed",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ scale: true,
|
|
|
+ axisLabel: {
|
|
|
+ formatter: "{value} m/s",
|
|
|
+ },
|
|
|
+ splitNumber: 20,
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ min: -40,
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ type: "dashed",
|
|
|
+ },
|
|
|
+ scale: true,
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ formatter: "{value} 万kw",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "功率",
|
|
|
+ type: "scatter",
|
|
|
+ color: "#FF7F50",
|
|
|
+ data: this.scatter_2,
|
|
|
+ markPoint: {
|
|
|
+ data: [
|
|
|
+ { type: "max", name: "最大值" },
|
|
|
+ { type: "min", name: "最小值" },
|
|
|
+ ],
|
|
|
+ symbol: "pin",
|
|
|
+ symbolSize: 50,
|
|
|
+ silent: true,
|
|
|
+ },
|
|
|
+ markLine: {
|
|
|
+ data: [{ type: "average", name: "平均值" }],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "line",
|
|
|
+ type: "line",
|
|
|
+ smooth: true,
|
|
|
+ datasetIndex: 1,
|
|
|
+ symbolSize: 0.1,
|
|
|
+ symbol: "circle",
|
|
|
+ color: "#87CEFA",
|
|
|
+ label: { show: false },
|
|
|
+ labelLayout: { dx: -20 },
|
|
|
+ encode: { label: 2, tooltip: 1 },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+
|
|
|
+ option && myChart.setOption(option);
|
|
|
+ },
|
|
|
+ draw_scatter_diagram_3() {
|
|
|
+ var chartDom = document.getElementById("scatter_diagram_3");
|
|
|
+ var myChart = echarts.init(chartDom);
|
|
|
+ var option;
|
|
|
+
|
|
|
+
|
|
|
+ option = {
|
|
|
+ title: {
|
|
|
+ text: "线路功率排布情况",
|
|
|
+ left: "300px",
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data: ["功率"],
|
|
|
+ right: "66px",
|
|
|
+ },
|
|
|
+
|
|
|
+ tooltip: {
|
|
|
+ show: false,
|
|
|
+ trigger: "axis",
|
|
|
+ axisPointer: {
|
|
|
+ type: "cross",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ type: "dashed",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ scale: true,
|
|
|
+ axisLabel: {
|
|
|
+ formatter: "{value} m/s",
|
|
|
+ },
|
|
|
+ splitNumber: 20,
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ min: -40,
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ type: "dashed",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ formatter: "{value} 万kw",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "功率",
|
|
|
+ type: "scatter",
|
|
|
+ color: "#FF7F50",
|
|
|
+ data: this.scatter_3,
|
|
|
+ markPoint: {
|
|
|
+ data: [
|
|
|
+ { type: "max", name: "最大值" },
|
|
|
+ { type: "min", name: "最小值" },
|
|
|
+ ],
|
|
|
+ symbol: "pin",
|
|
|
+ symbolSize: 50,
|
|
|
+ silent: true,
|
|
|
+ },
|
|
|
+ // emphasis: {
|
|
|
+ // label: {
|
|
|
+ // show: true,
|
|
|
+ // position: "top",
|
|
|
+ // distance: 4,
|
|
|
+ // fontStyle: "italic",
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ markLine: {
|
|
|
+ data: [{ type: "average", name: "平均值" }],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "line",
|
|
|
+ type: "line",
|
|
|
+ smooth: true,
|
|
|
+ datasetIndex: 1,
|
|
|
+ symbolSize: 0.1,
|
|
|
+ symbol: "circle",
|
|
|
+ color: "#87CEFA",
|
|
|
+ label: { show: false },
|
|
|
+ labelLayout: { dx: -20 },
|
|
|
+ encode: { label: 2, tooltip: 1 },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+
|
|
|
+ option && myChart.setOption(option);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.query_wpid();
|
|
|
+ this.query_scatter_1();
|
|
|
+ },
|
|
|
+};
|
zhaomiao