|
|
@@ -1,81 +1,59 @@
|
|
|
<template>
|
|
|
- <div class="historysingleMachine">
|
|
|
- <div class="historysingleMachine_top">
|
|
|
+ <div class="historyTurbineMonitor">
|
|
|
+ <div class="historyTurbineMonitor_top">
|
|
|
<div class="stationsv">
|
|
|
<span class="timeaa">时间：</span>
|
|
|
<el-date-picker
|
|
|
v-model="pickerTimer"
|
|
|
- type="daterange"
|
|
|
+ type="datetimerange"
|
|
|
range-separator="至"
|
|
|
start-placeholder="开始时间"
|
|
|
end-placeholder="结束时间"
|
|
|
size="mini"
|
|
|
- format="YYYY/MM/DD"
|
|
|
- value-format="YYYY-MM-DD"
|
|
|
+ format="YYYY/MM/DD HH:mm:ss"
|
|
|
+ value-format="YYYY-MM-DD HH:mm:ss"
|
|
|
/>
|
|
|
</div>
|
|
|
+ <div class="stationsv">
|
|
|
+ <span class="timeaa">间隔：</span>
|
|
|
+ <el-input-number v-model="picknum" :min="1" />
|
|
|
+ <span class="timeaa">秒</span>
|
|
|
+ </div>
|
|
|
<div class="but">
|
|
|
- <el-button round size="mini" class="buttons" @click="seachData"
|
|
|
+ <el-button round size="mini" class="buttons" @click="funGetHistoryTableData"
|
|
|
>搜 索</el-button
|
|
|
>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="economicTable1">
|
|
|
<el-table
|
|
|
- :data="historysingleMachineData"
|
|
|
+ :data="historyTurbineMonitor"
|
|
|
stripe
|
|
|
size="mini"
|
|
|
- height="calc(100% - 40px)"
|
|
|
+ height="100%"
|
|
|
ref="historysingleTable"
|
|
|
style="width: 100%"
|
|
|
>
|
|
|
<el-table-column
|
|
|
align="center"
|
|
|
- :label="tabIndex === -1 ? '风机' : '逆变器'"
|
|
|
- width="80"
|
|
|
- fixed="left"
|
|
|
- >
|
|
|
- <template #default="{ row }">
|
|
|
- <span>{{ tabIndex === -1 ? row.wtcode : row.wtname }}</span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column
|
|
|
- align="center"
|
|
|
- prop="recordDate"
|
|
|
- label="日期"
|
|
|
- width="120"
|
|
|
- fixed="left"
|
|
|
+ label="时间"
|
|
|
>
|
|
|
<template #default="scope">
|
|
|
<span>{{ dateTimeFn(scope.row) }}</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
<el-table-column
|
|
|
- v-for="(item, index) in tabIndex === -1 ? tableHeader : tableHeaderGf"
|
|
|
- :key="index"
|
|
|
- sortable
|
|
|
- :prop="item.code"
|
|
|
- :label="item.title"
|
|
|
- show-overflow-tooltip
|
|
|
- header-align="center"
|
|
|
align="center"
|
|
|
- >
|
|
|
- <template #header="scope">
|
|
|
- <div v-if="scope.column.label.indexOf('(') > 0">
|
|
|
- <div style="font-size: 14px">
|
|
|
- {{
|
|
|
- scope.column.label.slice(0, scope.column.label.indexOf("("))
|
|
|
- }}
|
|
|
- </div>
|
|
|
- <div style="font-size: 12px">
|
|
|
- {{ scope.column.label.slice(scope.column.label.indexOf("(")) }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div v-else>{{ scope.column.label }}</div>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
+ prop="ednaId"
|
|
|
+ label="测点"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ prop="pointValue"
|
|
|
+ label="值"
|
|
|
+ />
|
|
|
</el-table>
|
|
|
- <el-pagination
|
|
|
+ <!-- <el-pagination
|
|
|
@current-change="handleCurrentChange"
|
|
|
:current-page="page.currentPage"
|
|
|
:page-size="page.pagesize"
|
|
|
@@ -84,184 +62,128 @@
|
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
|
:total="page.total"
|
|
|
>
|
|
|
- </el-pagination>
|
|
|
+ </el-pagination> -->
|
|
|
+ </div>
|
|
|
+ <div class="echarts">
|
|
|
+ <div style="height: 100%; margin-top: 10px;padding-top: 10px">
|
|
|
+ <div id="comonentsEcharts" style="width: 100vw; height: 330px" ></div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import {
|
|
|
- getApihistorywindturbinegoodnesslist,
|
|
|
- getApihistorywindturbinegoodnesslistGf,
|
|
|
- getApiequipmentListByWp,
|
|
|
+ getComponentsHistoryData
|
|
|
} from "@/api/monthlyPerformanceAnalysis";
|
|
|
+import dayjs from "dayjs";
|
|
|
+import dataJson from "./dataJson.json";
|
|
|
export default {
|
|
|
props: {
|
|
|
- // historyCompanyOptions: {
|
|
|
- // type: Array,
|
|
|
- // default: () => [],
|
|
|
- // },
|
|
|
- tabIndex: { type: Number, required: true },
|
|
|
- historyStationOptions: {
|
|
|
- type: Array,
|
|
|
- default: () => [],
|
|
|
+ hiswindVal: {
|
|
|
+ type: String,
|
|
|
+ default: () => ""
|
|
|
},
|
|
|
+ hisuniVal: {
|
|
|
+ type: String,
|
|
|
+ default: () => ""
|
|
|
+ }
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- // hiscompanyVal: "",
|
|
|
- hisstationVal: "",
|
|
|
- hiswindVal: "",
|
|
|
+ picknum: 300,
|
|
|
pickerTimer: [],
|
|
|
- historysingleMachineData: [],
|
|
|
- hisWindOptions: [],
|
|
|
- showBtn: true,
|
|
|
+ historyTurbineMonitor: [],
|
|
|
page: {
|
|
|
pagesize: 20,
|
|
|
currentPage: 1,
|
|
|
total: 0,
|
|
|
},
|
|
|
- tableHeader: [
|
|
|
- { title: "日发电量(万kWh)", code: "rfdl" },
|
|
|
- { title: "月发电量(万kWh)", code: "yfdl" },
|
|
|
- { title: "年发电量(万kWh)", code: "nfdl" },
|
|
|
- { title: "日平均风速", code: "rpjfs" },
|
|
|
- { title: "月平均风速", code: "ypjfs" },
|
|
|
- { title: "年平均风速", code: "npjfs" },
|
|
|
- { title: "日运行小时(h)", code: "ryxxs" },
|
|
|
- { title: "月运行小时(h)", code: "yyxxs" },
|
|
|
- { title: "年运行小时(h)", code: "nyxxs" },
|
|
|
- { title: "日待机小时(h)", code: "rdjxs" },
|
|
|
- { title: "月待机小时(h)", code: "ydjxs" },
|
|
|
- { title: "年待机小时(h)", code: "ndjxs" },
|
|
|
- { title: "日故障小时(h)", code: "rgzxs" },
|
|
|
- { title: "月故障小时(h)", code: "ygzxs" },
|
|
|
- { title: "年故障小时(h)", code: "ngzxs" },
|
|
|
- { title: "日检修小时(h)", code: "rjxxs" },
|
|
|
- { title: "月检修小时(h)", code: "yjxxs" },
|
|
|
- { title: "年检修小时(h)", code: "njxxs" },
|
|
|
- { title: "日中断小时(h)", code: "rzdxs" },
|
|
|
- { title: "月中断小时(h)", code: "yzdxs" },
|
|
|
- { title: "年中断小时(h)", code: "nzdxs" },
|
|
|
- { title: "日有效风时(h)", code: "ryxfs" },
|
|
|
- { title: "月有效风时(h)", code: "yyxfs" },
|
|
|
- { title: "年有效风时(h)", code: "nyxfs" },
|
|
|
- { title: "日损失电量(万kWh)", code: "rssdl" },
|
|
|
- { title: "月损失电量(万kWh)", code: "yssdl" },
|
|
|
- { title: "年损失电量(万kWh)", code: "nssdl" },
|
|
|
- { title: "日停机次数", code: "rtjcs" },
|
|
|
- { title: "月停机次数", code: "ytjcs" },
|
|
|
- { title: "年停机次数", code: "ntjcs" },
|
|
|
- { title: "日设备可利用率", code: "rsbklyl" },
|
|
|
- { title: "月设备可利用率", code: "ysbklyl" },
|
|
|
- { title: "年设备可利用率", code: "nsbklyl" },
|
|
|
- { title: "日平均温度", code: "rpjwd" },
|
|
|
- { title: "月平均温度", code: "ypjwd" },
|
|
|
- { title: "年平均温度", code: "npjwd" },
|
|
|
- ],
|
|
|
- tableHeaderGf: [
|
|
|
- { title: "型号", code: "model" },
|
|
|
- { title: "日系统效率", code: "rxtxl" },
|
|
|
- { title: "日离散率", code: "rlsl" },
|
|
|
- { title: "日转换效率", code: "rzhxl" },
|
|
|
- { title: "月系统效率", code: "yxtxl" },
|
|
|
- { title: "月离散率", code: "ylsl" },
|
|
|
- { title: "月转换效率", code: "yzhxl" },
|
|
|
- { title: "年系统效率", code: "nxtxl" },
|
|
|
- { title: "年离散率", code: "nlsl" },
|
|
|
- { title: "年转换效率", code: "nzhxl" },
|
|
|
- ],
|
|
|
};
|
|
|
},
|
|
|
+ mounted() {
|
|
|
+ // this.historyTurbineMonitor = dataJson.data.historyTurbineMonitor
|
|
|
+ this.pickerTimer = [
|
|
|
+ dayjs(new Date()).add(-1, "day").format("YYYY-MM-DD HH:mm:ss"),
|
|
|
+ dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss")
|
|
|
+ ]
|
|
|
+ // this.changeData(dataJson.data.historyTurbineMonitor)
|
|
|
+ this.funGetHistoryTableData()
|
|
|
+ },
|
|
|
methods: {
|
|
|
- async init(row) {
|
|
|
- // this.hiscompanyVal = row.companyId;
|
|
|
- this.hisstationVal = row.windtpowerstationId;
|
|
|
- this.hiswindVal = row.windturbineId;
|
|
|
- await this.getTableData();
|
|
|
- },
|
|
|
- dateTimeFn(row) {
|
|
|
- return row.recordDate
|
|
|
- ? row.recordDate.substring(0, row.recordDate.indexOf("T"))
|
|
|
- : row.date.substring(0, row.date.indexOf("T"));
|
|
|
- },
|
|
|
- headerArr(label) {
|
|
|
- let arr = label.split("");
|
|
|
- let Newarr = [];
|
|
|
- let num = 0;
|
|
|
- let str = "";
|
|
|
- arr.forEach((it, index) => {
|
|
|
- num++;
|
|
|
- str += it;
|
|
|
- if (label.indexOf(it) + 1 !== label.length) {
|
|
|
- if (num % 2 === 0) {
|
|
|
- Newarr.push(str);
|
|
|
- str = "";
|
|
|
- }
|
|
|
- } else {
|
|
|
- Newarr.push(str);
|
|
|
+ funGetHistoryTableData() {
|
|
|
+ let that = this;
|
|
|
+ let params = {
|
|
|
+ startTs: new Date(that.pickerTimer[0]).getTime() / 1000,
|
|
|
+ endTs: new Date(that.pickerTimer[1]).getTime() / 1000,
|
|
|
+ windturbineId: that.hiswindVal,
|
|
|
+ uniformCode: that.hisuniVal,
|
|
|
+ interval: that.picknum
|
|
|
+ }
|
|
|
+ getComponentsHistoryData(params).then((res) => {
|
|
|
+ if (res) {
|
|
|
+ that.changeData(res)
|
|
|
}
|
|
|
});
|
|
|
- return Newarr;
|
|
|
},
|
|
|
- async getWindPowerStation() {
|
|
|
- const { data } = await getApiequipmentListByWp({
|
|
|
- wpid: this.hisstationVal,
|
|
|
+ changeData(res) {
|
|
|
+ this.historyTurbineMonitor = res
|
|
|
+ let xAxis = []
|
|
|
+ let series = []
|
|
|
+ res.forEach(it => {
|
|
|
+ xAxis.push(dayjs(it.pointTime).format("MM-DD HH:mm:ss"))
|
|
|
+ series.push(it.pointValue)
|
|
|
});
|
|
|
- this.hisWindOptions = data.data;
|
|
|
- if (!this.hiswindVal && data.data.length) {
|
|
|
- this.hiswindVal = data.data[0].id;
|
|
|
- }
|
|
|
- },
|
|
|
- // changeBtn(id) {
|
|
|
- // this.tabIndex = id;
|
|
|
- // this.$emit("getHisStationOptions", this.tabIndex, this.hiscompanyVal);
|
|
|
- // this.getTableData();
|
|
|
- // },
|
|
|
- changeStation(val) {
|
|
|
- this.hisstationVal = val;
|
|
|
- this.hiswindVal = "";
|
|
|
- this.getWindPowerStation();
|
|
|
- },
|
|
|
- changeWind(val) {
|
|
|
- this.hiswindVal = val;
|
|
|
- this.getTableData();
|
|
|
- },
|
|
|
- seachData() {
|
|
|
- this.getTableData();
|
|
|
+ this.getPowerLine(
|
|
|
+ xAxis,
|
|
|
+ series,
|
|
|
+ "comonentsEcharts"
|
|
|
+ );
|
|
|
},
|
|
|
- async getTableData() {
|
|
|
- let params = {
|
|
|
- type: this.tabIndex,
|
|
|
- pageNum: this.page.currentPage,
|
|
|
- pageSize: this.page.pagesize,
|
|
|
- beginDate: this.pickerTimer[0],
|
|
|
- endDate: this.pickerTimer[1],
|
|
|
- wpId: this.hisstationVal,
|
|
|
- wtId: this.hiswindVal,
|
|
|
+ getPowerLine(
|
|
|
+ xAxis,
|
|
|
+ series,
|
|
|
+ name
|
|
|
+ ) {
|
|
|
+ let myChart;
|
|
|
+
|
|
|
+ let option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: "3%",
|
|
|
+ right: "5%",
|
|
|
+ bottom: "0",
|
|
|
+ height: "300px",
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: xAxis
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value'
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ data: series,
|
|
|
+ type: 'line',
|
|
|
+ }
|
|
|
+ ]
|
|
|
};
|
|
|
- let datas = [];
|
|
|
|
|
|
- // this.historysingleMachineData = dataJson.data.data.records;
|
|
|
- // this.page.total = dataJson.data.data.length;
|
|
|
- if (this.tabIndex == -1) {
|
|
|
- datas = await getApihistorywindturbinegoodnesslist(params);
|
|
|
- this.historysingleMachineData = datas.data.data.records;
|
|
|
- this.page.total = datas.data.data.total;
|
|
|
- } else {
|
|
|
- // datas = await getApihistorywindturbinegoodnesslistGf(params);
|
|
|
- // this.historysingleMachineData = datas.data.data;
|
|
|
- // this.page.total = datas.data.data.length;
|
|
|
- }
|
|
|
- },
|
|
|
- handleSizeChange(val) {
|
|
|
- this.page.currentPage = 1;
|
|
|
- this.page.pagesize = val;
|
|
|
- this.getTableData();
|
|
|
+ // 基于准备好的dom，初始化echarts实例
|
|
|
+ let dom = document.getElementById(name);
|
|
|
+ dom && dom.removeAttribute("_echarts_instance_");
|
|
|
+ myChart = this.$echarts.init(dom);
|
|
|
+ myChart.setOption(option);
|
|
|
+ window.addEventListener("resize", () => {
|
|
|
+ myChart.resize();
|
|
|
+ });
|
|
|
},
|
|
|
- handleCurrentChange(val) {
|
|
|
- this.page.currentPage = val;
|
|
|
- this.getTableData();
|
|
|
+ dateTimeFn(row) {
|
|
|
+ return dayjs(row.pointTime).format("YYYY-MM-DD HH:mm:ss")
|
|
|
},
|
|
|
//转换时间
|
|
|
getchangeTime(date) {
|
|
|
@@ -277,9 +199,9 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
-.historysingleMachine {
|
|
|
+.historyTurbineMonitor {
|
|
|
height: 100%;
|
|
|
- .historysingleMachine_top {
|
|
|
+ .historyTurbineMonitor_top {
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
align-items: center;
|
|
|
@@ -332,7 +254,13 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
.economicTable1 {
|
|
|
- height: calc(100% - 58px);
|
|
|
+ height: 55vh;
|
|
|
+ }
|
|
|
+ .echarts {
|
|
|
+ background: #142446 !important;
|
|
|
+ border-radius: 5px;
|
|
|
+ width: 100%;
|
|
|
+ height: 350px;
|
|
|
}
|
|
|
}
|
|
|
.el-pagination ::v-deep {
|
sunzehao