|
|
@@ -13,7 +13,7 @@
|
|
|
</el-col>
|
|
|
<el-col :span="12" class="wrong-list">
|
|
|
<panel :title="'故障信息'" :showLine="false">
|
|
|
- <div class="data-list" style="display:flex;">
|
|
|
+ <div class="data-list" style="display: flex">
|
|
|
<Table :data="top10TableLeft" :canScroll="false" />
|
|
|
<Table :data="top10TableRight" :canScroll="false" />
|
|
|
</div>
|
|
|
@@ -24,47 +24,56 @@
|
|
|
<el-col :span="12">
|
|
|
<panel :title="'八大部件'" :showLine="false">
|
|
|
<div class="table">
|
|
|
- <table style="width:100%;" border="0" cellspacing="0">
|
|
|
+ <table style="width: 100%" border="0" cellspacing="0">
|
|
|
<thead>
|
|
|
<tr>
|
|
|
- <th rowspan="1" class="type1" style="width:50px;"></th>
|
|
|
- <th rowspan="1" class="type1" style="width:105px;">健康度</th>
|
|
|
- <th rowspan="2" class="type1" style="width:400px;">
|
|
|
+ <th rowspan="1" class="type1" style="width: 50px"></th>
|
|
|
+ <th rowspan="1" class="type1" style="width: 105px">健康度</th>
|
|
|
+ <th rowspan="2" class="type1" style="width: 400px">
|
|
|
MTBF（H/H）
|
|
|
</th>
|
|
|
- <th rowspan="1" class="type1" style="width:180px;"></th>
|
|
|
- <th rowspan="1" class="type1" style="width:100px;">
|
|
|
+ <th rowspan="1" class="type1" style="width: 180px"></th>
|
|
|
+ <th rowspan="1" class="type1" style="width: 100px">
|
|
|
MTTR（H）
|
|
|
</th>
|
|
|
</tr>
|
|
|
</thead>
|
|
|
</table>
|
|
|
<el-scrollbar>
|
|
|
- <div style="height:calc(100vh - 174px);">
|
|
|
- <table style="width:100%;" border="0" cellspacing="0">
|
|
|
+ <div style="height: calc(100vh - 174px)">
|
|
|
+ <table style="width: 100%" border="0" cellspacing="0">
|
|
|
<tbody>
|
|
|
<tr v-for="(item, index) of partsArray" :key="index">
|
|
|
- <td style="width:50px;">
|
|
|
- {{item[1]}}
|
|
|
+ <td style="width: 50px">
|
|
|
+ {{ item[1] }}
|
|
|
</td>
|
|
|
- <td style="width:105px;">
|
|
|
- <div :style="'background-color: ' + item[0] + ';width:10px;height:10px;margin:0 auto;'"></div>
|
|
|
+ <td style="width: 105px">
|
|
|
+ <div
|
|
|
+ :style="
|
|
|
+ 'background-color: ' +
|
|
|
+ item[0] +
|
|
|
+ ';width:10px;height:10px;margin:0 auto;'
|
|
|
+ "
|
|
|
+ ></div>
|
|
|
</td>
|
|
|
- <td style="width:400px;">
|
|
|
+ <td style="width: 400px">
|
|
|
<div class="percent-item">
|
|
|
- {{item[3]}}%
|
|
|
- <div class="percent-bar" style="margin-right: 4px;">
|
|
|
- <div class="percent-value" :style="'width:' + item[3] +'%'"></div>
|
|
|
+ {{ item[3] }}%
|
|
|
+ <div class="percent-bar" style="margin-right: 4px">
|
|
|
+ <div
|
|
|
+ class="percent-value"
|
|
|
+ :style="'width:' + item[3] + '%'"
|
|
|
+ ></div>
|
|
|
</div>
|
|
|
<!-- 剩余9999/建个故障9999 -->
|
|
|
- {{item[4]}}
|
|
|
+ {{ item[4] }}
|
|
|
</div>
|
|
|
</td>
|
|
|
- <td style="width:200px;">
|
|
|
+ <td style="width: 200px">
|
|
|
<table-line-chart :height="'20px'" :list="item[8]" />
|
|
|
</td>
|
|
|
- <td style="width:#00bf4d">
|
|
|
- {{item[6]}}
|
|
|
+ <td style="width: #00bf4d">
|
|
|
+ {{ item[6] }}
|
|
|
</td>
|
|
|
</tr>
|
|
|
</tbody>
|
|
|
@@ -77,19 +86,42 @@
|
|
|
<el-col :span="12">
|
|
|
<div class="chart-title">
|
|
|
<div class="title-panel" style="">
|
|
|
- <span style="text-align: left;padding-left: 20px;font-size:12px;">故障信息 </span>
|
|
|
- <span class="des-title">预计损失电量<span class="num">73824.0</span><span class="unit">Kwh</span></span>
|
|
|
- <span class="des-title">预计检修时长<span class="num">29.33</span><span class="unit">H</span></span>
|
|
|
+ <span style="text-align: left; padding-left: 20px; font-size: 12px"
|
|
|
+ >故障信息
|
|
|
+ </span>
|
|
|
+ <span class="des-title"
|
|
|
+ >预计损失电量<span class="num">73824.0</span
|
|
|
+ ><span class="unit">Kwh</span></span
|
|
|
+ >
|
|
|
+ <span class="des-title"
|
|
|
+ >预计检修时长<span class="num">29.33</span
|
|
|
+ ><span class="unit">H</span></span
|
|
|
+ >
|
|
|
</div>
|
|
|
- <img-line-chart height="270px" :list="line.value" :units="line.units" />
|
|
|
+ <img-line-chart
|
|
|
+ height="270px"
|
|
|
+ />
|
|
|
</div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
<div class="fc-info mg-b-16">
|
|
|
<panel :title="'曲线'" :showLine="false">
|
|
|
- <zoom-line-chart height="35vh" :list="powerChartData.value" :units="powerChartData.units" />
|
|
|
+ <zoom-line-chart
|
|
|
+ height="35vh"
|
|
|
+ :list="powerChartData.value"
|
|
|
+ :units="powerChartData.units"
|
|
|
+ />
|
|
|
</panel>
|
|
|
</div>
|
|
|
+ <HealthReport
|
|
|
+ :show="healthReportShow"
|
|
|
+ :params="{ wtId: this.wtId, recorddate: this.recorddate }"
|
|
|
+ @closed="
|
|
|
+ (res) => {
|
|
|
+ this.healthReportShow = false;
|
|
|
+ }
|
|
|
+ "
|
|
|
+ />
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -101,18 +133,20 @@ import Table from "../../components/coms/table/table.vue";
|
|
|
import TableLineChart from "../../components/chart/line/table-line-chart.vue";
|
|
|
// import StrightLineChart from "../../components/chart/line/stright-line-chart.vue";
|
|
|
import ImgLineChart from "../../components/chart/line/img-line-chart.vue";
|
|
|
-import ZoomLineChart from '../../components/chart/line/zoom-line-chart.vue';
|
|
|
+import ZoomLineChart from "../../components/chart/line/zoom-line-chart.vue";
|
|
|
+import HealthReport from "@com/other/healthReport/index.vue";
|
|
|
|
|
|
export default {
|
|
|
- setup () { },
|
|
|
+ setup() {},
|
|
|
components: {
|
|
|
Panel,
|
|
|
Table,
|
|
|
TableLineChart,
|
|
|
ImgLineChart,
|
|
|
ZoomLineChart,
|
|
|
+ HealthReport
|
|
|
},
|
|
|
- data () {
|
|
|
+ data() {
|
|
|
const that = this;
|
|
|
return {
|
|
|
top5Table: {
|
|
|
@@ -133,7 +167,7 @@ export default {
|
|
|
width: "45%",
|
|
|
},
|
|
|
],
|
|
|
- data: []
|
|
|
+ data: [],
|
|
|
},
|
|
|
dateTable: {
|
|
|
column: [
|
|
|
@@ -151,12 +185,16 @@ export default {
|
|
|
name: "健康情况",
|
|
|
field: "",
|
|
|
width: "30%",
|
|
|
- template () {
|
|
|
+ template() {
|
|
|
return "<div style='border: 1px solid #182238;background: #303f6e;width: 70%;margin: 0 auto;color:#FFF;cursor: pointer;'>查看报告</div>";
|
|
|
},
|
|
|
+ click(e,row) {
|
|
|
+ that.recorddate = row.date;
|
|
|
+ that.healthReportShow = true;
|
|
|
+ },
|
|
|
},
|
|
|
],
|
|
|
- data: []
|
|
|
+ data: [],
|
|
|
},
|
|
|
top10TableLeft: {
|
|
|
column: [
|
|
|
@@ -167,7 +205,7 @@ export default {
|
|
|
},
|
|
|
{
|
|
|
name: "故障名称",
|
|
|
- field: "warnDesc"
|
|
|
+ field: "warnDesc",
|
|
|
},
|
|
|
{
|
|
|
name: "故障时间",
|
|
|
@@ -194,7 +232,7 @@ export default {
|
|
|
},
|
|
|
{
|
|
|
name: "故障名称",
|
|
|
- field: "warnDesc"
|
|
|
+ field: "warnDesc",
|
|
|
},
|
|
|
{
|
|
|
name: "故障时间",
|
|
|
@@ -224,7 +262,11 @@ export default {
|
|
|
name: "故障名称",
|
|
|
field: "v1",
|
|
|
template: function (data) {
|
|
|
- return "<div style='overflow: hidden;text-overflow:ellipsis;white-space: nowrap;'>" + data + "</div>";
|
|
|
+ return (
|
|
|
+ "<div style='overflow: hidden;text-overflow:ellipsis;white-space: nowrap;'>" +
|
|
|
+ data +
|
|
|
+ "</div>"
|
|
|
+ );
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
@@ -280,7 +322,7 @@ export default {
|
|
|
],
|
|
|
},
|
|
|
// 月发电量对比
|
|
|
- line: {
|
|
|
+ weatherChart: {
|
|
|
units: ["功率", "风速"],
|
|
|
value: [
|
|
|
{
|
|
|
@@ -290,67 +332,67 @@ export default {
|
|
|
{
|
|
|
text: "05-02 00:00",
|
|
|
value: 11,
|
|
|
- weather: 'sun',
|
|
|
+ weather: "sun",
|
|
|
direction: "n",
|
|
|
},
|
|
|
{
|
|
|
text: "05-04 00:00",
|
|
|
value: 11,
|
|
|
- weather: 'rain',
|
|
|
+ weather: "rain",
|
|
|
direction: "s",
|
|
|
},
|
|
|
{
|
|
|
text: "05-06 00:00",
|
|
|
value: 13,
|
|
|
- weather: 'sun',
|
|
|
+ weather: "sun",
|
|
|
direction: "w",
|
|
|
},
|
|
|
{
|
|
|
text: "05-08 00:00",
|
|
|
value: 12,
|
|
|
- weather: 'cloud',
|
|
|
+ weather: "cloud",
|
|
|
direction: "e",
|
|
|
},
|
|
|
{
|
|
|
text: "05-10 00:00",
|
|
|
value: 13,
|
|
|
- weather: 'sun',
|
|
|
+ weather: "sun",
|
|
|
direction: "nw",
|
|
|
},
|
|
|
{
|
|
|
text: "05-12 00:00",
|
|
|
value: 12,
|
|
|
- weather: 'sun',
|
|
|
+ weather: "sun",
|
|
|
direction: "ne",
|
|
|
},
|
|
|
{
|
|
|
text: "05-14 00:00",
|
|
|
value: 11,
|
|
|
- weather: 'cloud',
|
|
|
+ weather: "cloud",
|
|
|
direction: "sw",
|
|
|
},
|
|
|
{
|
|
|
text: "05-16 00:00",
|
|
|
value: 11,
|
|
|
- weather: 'sun',
|
|
|
+ weather: "sun",
|
|
|
direction: "se",
|
|
|
},
|
|
|
{
|
|
|
text: "05-18 00:00",
|
|
|
value: 13,
|
|
|
- weather: 'rain',
|
|
|
+ weather: "rain",
|
|
|
direction: "n",
|
|
|
},
|
|
|
{
|
|
|
text: "05-20 00:00",
|
|
|
value: 11,
|
|
|
- weather: 'cloud',
|
|
|
+ weather: "cloud",
|
|
|
direction: "n",
|
|
|
},
|
|
|
{
|
|
|
text: "05-22 00:00",
|
|
|
value: 12,
|
|
|
- weather: 'sun',
|
|
|
+ weather: "sun",
|
|
|
direction: "n",
|
|
|
},
|
|
|
],
|
|
|
@@ -409,102 +451,40 @@ export default {
|
|
|
},
|
|
|
powerChartData: {
|
|
|
units: [""],
|
|
|
- value: [{
|
|
|
- title: "",
|
|
|
- yAxisIndex: 0,
|
|
|
- value: []
|
|
|
- }],
|
|
|
- },
|
|
|
- line2: {
|
|
|
- units: ["功率", "风速"],
|
|
|
value: [
|
|
|
{
|
|
|
- title: "应发功率",
|
|
|
+ title: "",
|
|
|
yAxisIndex: 0,
|
|
|
- value: [
|
|
|
- {
|
|
|
- text: "05-02 00:00",
|
|
|
- value: 1,
|
|
|
- },
|
|
|
- {
|
|
|
- text: "05-04 00:00",
|
|
|
- value: 3,
|
|
|
- },
|
|
|
- {
|
|
|
- text: "05-06 00:00",
|
|
|
- value: 4,
|
|
|
- },
|
|
|
- {
|
|
|
- text: "05-08 00:00",
|
|
|
- value: 2,
|
|
|
- },
|
|
|
- {
|
|
|
- text: "05-10 00:00",
|
|
|
- value: 3,
|
|
|
- },
|
|
|
- {
|
|
|
- text: "05-12 00:00",
|
|
|
- value: 5,
|
|
|
- },
|
|
|
- {
|
|
|
- text: "05-14 00:00",
|
|
|
- value: 1,
|
|
|
- },
|
|
|
- {
|
|
|
- text: "05-16 00:00",
|
|
|
- value: 1,
|
|
|
- },
|
|
|
- {
|
|
|
- text: "05-18 00:00",
|
|
|
- value: 3,
|
|
|
- },
|
|
|
- {
|
|
|
- text: "05-20 00:00",
|
|
|
- value: 4,
|
|
|
- },
|
|
|
- {
|
|
|
- text: "05-22 00:00",
|
|
|
- value: 2,
|
|
|
- },
|
|
|
- {
|
|
|
- text: "05-24 00:00",
|
|
|
- value: 3,
|
|
|
- },
|
|
|
- {
|
|
|
- text: "05-26 00:00",
|
|
|
- value: 5,
|
|
|
- },
|
|
|
- {
|
|
|
- text: "05-28 00:00",
|
|
|
- value: 1,
|
|
|
- },
|
|
|
- ],
|
|
|
+ value: [],
|
|
|
},
|
|
|
],
|
|
|
},
|
|
|
+ healthReportShow: false,
|
|
|
};
|
|
|
},
|
|
|
|
|
|
- created () {
|
|
|
+ created() {
|
|
|
+ this.wpId = this.$route.params.wpId;
|
|
|
this.wtId = this.$route.params.wtId;
|
|
|
this.getTop5();
|
|
|
this.renderDateTable();
|
|
|
this.getTop10();
|
|
|
this.getMtbfByBj();
|
|
|
this.getFindPowerChar();
|
|
|
+ this.getWeather();
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
// 获取等级评价
|
|
|
- getTop5 () {
|
|
|
+ getTop5() {
|
|
|
let that = this;
|
|
|
that.API.requestData({
|
|
|
method: "POST",
|
|
|
subUrl: "healthsub/gadaytop5",
|
|
|
data: {
|
|
|
- wtId: that.wtId
|
|
|
+ wtId: that.wtId,
|
|
|
},
|
|
|
- success (res) {
|
|
|
+ success(res) {
|
|
|
let top5TableData = [];
|
|
|
let index = 1;
|
|
|
for (let key in res.data) {
|
|
|
@@ -514,48 +494,54 @@ export default {
|
|
|
date: ele[1],
|
|
|
rank: ele[2],
|
|
|
wpId: ele[3],
|
|
|
- wtId: ele[4]
|
|
|
+ wtId: ele[4],
|
|
|
});
|
|
|
index++;
|
|
|
}
|
|
|
that.top5Table.data = top5TableData;
|
|
|
- }
|
|
|
+ },
|
|
|
});
|
|
|
},
|
|
|
|
|
|
// 渲染健康报告表格
|
|
|
- renderDateTable (day = 5) {
|
|
|
+ renderDateTable(day = 5) {
|
|
|
let tableData = [];
|
|
|
for (let i = 0; i < day; i++) {
|
|
|
tableData.push({
|
|
|
- index: (i + 1),
|
|
|
- date: new Date((new Date().getTime() - 3600 * 1000 * 24 * (i + 1))).formatDate("yyyy-MM-dd hh:mm:ss"),
|
|
|
- wtId: this.wtId
|
|
|
+ index: i + 1,
|
|
|
+ date: new Date(
|
|
|
+ new Date().getTime() - 3600 * 1000 * 24 * (i + 1)
|
|
|
+ ).formatDate("yyyy-MM-dd hh:mm:ss"),
|
|
|
+ wtId: this.wtId,
|
|
|
});
|
|
|
}
|
|
|
this.dateTable.data = tableData;
|
|
|
},
|
|
|
|
|
|
// 获取等级评价
|
|
|
- getTop10 () {
|
|
|
+ getTop10() {
|
|
|
let that = this;
|
|
|
that.API.requestData({
|
|
|
method: "POST",
|
|
|
subUrl: "healthsub/queryStopTop10",
|
|
|
data: {
|
|
|
- wtId: that.wtId
|
|
|
+ wtId: that.wtId,
|
|
|
},
|
|
|
- success (res) {
|
|
|
+ success(res) {
|
|
|
let leftData = [];
|
|
|
let rightData = [];
|
|
|
|
|
|
res.data.forEach((ele, index) => {
|
|
|
const item = {
|
|
|
- index: (index + 1),
|
|
|
+ index: index + 1,
|
|
|
warnDesc: ele.warnDesc,
|
|
|
- startTime: new Date(ele.startTime).formatDate("yyyy-MM-dd hh:mm:ss"),
|
|
|
- stopTime: new Date(ele.stopTime).formatDate("yyyy-MM-dd hh:mm:ss"),
|
|
|
- stopHours: ele.stopHours
|
|
|
+ startTime: new Date(ele.startTime).formatDate(
|
|
|
+ "yyyy-MM-dd hh:mm:ss"
|
|
|
+ ),
|
|
|
+ stopTime: new Date(ele.stopTime).formatDate(
|
|
|
+ "yyyy-MM-dd hh:mm:ss"
|
|
|
+ ),
|
|
|
+ stopHours: ele.stopHours,
|
|
|
};
|
|
|
if (index < 5) {
|
|
|
leftData.push(item);
|
|
|
@@ -566,82 +552,125 @@ export default {
|
|
|
|
|
|
that.top10TableLeft.data = leftData;
|
|
|
that.top10TableRight.data = rightData;
|
|
|
- }
|
|
|
+ },
|
|
|
});
|
|
|
},
|
|
|
|
|
|
// 获取八大部件
|
|
|
- getMtbfByBj () {
|
|
|
+ getMtbfByBj() {
|
|
|
let that = this;
|
|
|
that.API.requestData({
|
|
|
method: "POST",
|
|
|
subUrl: "healthsub/getWtMttrandMtbfByBj",
|
|
|
data: {
|
|
|
- wtId: that.wtId
|
|
|
+ wtId: that.wtId,
|
|
|
},
|
|
|
- success (res) {
|
|
|
+ success(res) {
|
|
|
let partsArray = [];
|
|
|
for (let key in res.data) {
|
|
|
let linChartData = [];
|
|
|
res.data[key][2].split(",").forEach((ele, index) => {
|
|
|
linChartData.push({
|
|
|
- text: (index + 1),
|
|
|
+ text: index + 1,
|
|
|
value: ele,
|
|
|
});
|
|
|
});
|
|
|
res.data[key].push(linChartData);
|
|
|
- partsArray.push(res.data[key])
|
|
|
+ partsArray.push(res.data[key]);
|
|
|
}
|
|
|
that.partsArray = partsArray;
|
|
|
- }
|
|
|
+ },
|
|
|
});
|
|
|
},
|
|
|
|
|
|
// 获取发电曲线
|
|
|
- getFindPowerChar () {
|
|
|
+ getFindPowerChar() {
|
|
|
let that = this;
|
|
|
that.API.requestData({
|
|
|
method: "POST",
|
|
|
subUrl: "healthsub/findPowerChar",
|
|
|
data: {
|
|
|
- wtId: that.wtId
|
|
|
+ wtId: that.wtId,
|
|
|
},
|
|
|
- success (res) {
|
|
|
+ success(res) {
|
|
|
let chartUnits = ["(WM)", "(m/s)"];
|
|
|
- let chartData = [{
|
|
|
- title: "理论功率",
|
|
|
- yAxisIndex: 0,
|
|
|
- value: []
|
|
|
- }, {
|
|
|
- title: "实际功率",
|
|
|
- yAxisIndex: 0,
|
|
|
- value: []
|
|
|
- }, {
|
|
|
- title: "实时风速",
|
|
|
- yAxisIndex: 1,
|
|
|
- value: []
|
|
|
- }];
|
|
|
+ let chartData = [
|
|
|
+ {
|
|
|
+ title: "理论功率",
|
|
|
+ yAxisIndex: 0,
|
|
|
+ value: [],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "实际功率",
|
|
|
+ yAxisIndex: 0,
|
|
|
+ value: [],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "实时风速",
|
|
|
+ yAxisIndex: 1,
|
|
|
+ value: [],
|
|
|
+ },
|
|
|
+ ];
|
|
|
|
|
|
res.data.timearr.forEach((time, index) => {
|
|
|
chartData[0].value.push({
|
|
|
text: new Date(time).formatDate("MM-dd hh:mm"),
|
|
|
- value: res.data.llgl[index]
|
|
|
+ value: res.data.llgl[index],
|
|
|
});
|
|
|
chartData[1].value.push({
|
|
|
text: new Date(time).formatDate("MM-dd hh:mm"),
|
|
|
- value: res.data.sjgl[index]
|
|
|
+ value: res.data.sjgl[index],
|
|
|
});
|
|
|
chartData[2].value.push({
|
|
|
text: new Date(time).formatDate("MM-dd hh:mm"),
|
|
|
- value: res.data.ssfs[index]
|
|
|
+ value: res.data.ssfs[index],
|
|
|
});
|
|
|
});
|
|
|
that.powerChartData.value = chartData;
|
|
|
that.powerChartData.units = chartUnits;
|
|
|
- }
|
|
|
+ },
|
|
|
});
|
|
|
},
|
|
|
- }
|
|
|
+
|
|
|
+ // 获取天气信息
|
|
|
+ getWeather() {
|
|
|
+ let that = this;
|
|
|
+ that.API.requestData({
|
|
|
+ method: "POST",
|
|
|
+ subUrl: "healthsub/getWeatherRealDay5Info",
|
|
|
+ data: {
|
|
|
+ wpId: that.wpId,
|
|
|
+ },
|
|
|
+ success(res) {
|
|
|
+ console.log(123123, res);
|
|
|
+ let weatherChart = [];
|
|
|
+
|
|
|
+ let chartUnits = ["(m/s)", "(℃)"];
|
|
|
+ let chartData = [
|
|
|
+ {
|
|
|
+ title: "风速",
|
|
|
+ yAxisIndex: 0,
|
|
|
+ value: [],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "温度",
|
|
|
+ yAxisIndex: 1,
|
|
|
+ value: [],
|
|
|
+ },
|
|
|
+ ];
|
|
|
+
|
|
|
+ res.data.ls.forEach((item) => {
|
|
|
+ chartData[0].value.push({
|
|
|
+ text: "05-02 00:00",
|
|
|
+ value: 11,
|
|
|
+ weather: "sun",
|
|
|
+ direction: "n",
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|
|
|
|
Koishi