|
|
@@ -1,852 +1,859 @@
|
|
|
-<template>
|
|
|
- <div class="health-10">
|
|
|
- <el-row :gutter="20" class="table-panel">
|
|
|
- <el-col :span="6">
|
|
|
- <panel :title="'等级评价'" :showLine="false">
|
|
|
- <Table :data="top5Table" :canScroll="false" />
|
|
|
- </panel>
|
|
|
- </el-col>
|
|
|
- <el-col :span="6">
|
|
|
- <panel :title="'健康报告'" :showLine="false">
|
|
|
- <Table :data="dateTable" :canScroll="false" />
|
|
|
- </panel>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12" class="wrong-list">
|
|
|
- <panel :title="'故障信息'" :showLine="false">
|
|
|
- <div class="data-list" style="display: flex">
|
|
|
- <Table :data="top10TableLeft" :canScroll="false" />
|
|
|
- <Table :data="top10TableRight" :canScroll="false" />
|
|
|
- </div>
|
|
|
- </panel>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row :gutter="20" class="table-chart">
|
|
|
- <el-col :span="12">
|
|
|
- <panel :title="'八大部件'" :showLine="false">
|
|
|
- <div class="table">
|
|
|
- <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">
|
|
|
- MTBF（H/H）
|
|
|
- </th>
|
|
|
- <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">
|
|
|
- <tbody>
|
|
|
- <tr v-for="(item, index) of partsArray" :key="index">
|
|
|
- <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>
|
|
|
- <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>
|
|
|
- </div>
|
|
|
- <!-- 剩余9999/建个故障9999 -->
|
|
|
- {{ item[4] }}
|
|
|
- </div>
|
|
|
- </td>
|
|
|
- <td style="width: 200px">
|
|
|
- <table-line-chart :height="'20px'" :list="item[8]" />
|
|
|
- </td>
|
|
|
- <td style="width: #00bf4d">
|
|
|
- {{ item[6] }}
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- </tbody>
|
|
|
- </table>
|
|
|
- </div>
|
|
|
- </el-scrollbar>
|
|
|
- </div>
|
|
|
- </panel>
|
|
|
- </el-col>
|
|
|
- <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
|
|
|
- >
|
|
|
- </div>
|
|
|
- <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"
|
|
|
- />
|
|
|
- </panel>
|
|
|
- </div>
|
|
|
- <HealthReport
|
|
|
- :show="healthReportShow"
|
|
|
- :params="{ wtId: this.wtId, recorddate: this.recorddate }"
|
|
|
- @closed="
|
|
|
- (res) => {
|
|
|
- this.healthReportShow = false;
|
|
|
- }
|
|
|
- "
|
|
|
- />
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-// import NormalLineChart from "../../components/chart/line/normal-line-chart.vue";
|
|
|
-// import SvgIcon from "../../components/coms/icon/svg-icon.vue";SvgIcon,
|
|
|
-import Panel from "../../components/coms/panel/panel.vue";
|
|
|
-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 HealthReport from "@com/other/healthReport/index.vue";
|
|
|
-
|
|
|
-export default {
|
|
|
- setup() {},
|
|
|
- components: {
|
|
|
- Panel,
|
|
|
- Table,
|
|
|
- TableLineChart,
|
|
|
- ImgLineChart,
|
|
|
- ZoomLineChart,
|
|
|
- HealthReport
|
|
|
- },
|
|
|
- data() {
|
|
|
- const that = this;
|
|
|
- return {
|
|
|
- top5Table: {
|
|
|
- column: [
|
|
|
- {
|
|
|
- name: "排名",
|
|
|
- field: "index",
|
|
|
- width: "10%",
|
|
|
- },
|
|
|
- {
|
|
|
- name: "日期",
|
|
|
- field: "date",
|
|
|
- width: "45%",
|
|
|
- },
|
|
|
- {
|
|
|
- name: "等级",
|
|
|
- field: "rank",
|
|
|
- width: "45%",
|
|
|
- },
|
|
|
- ],
|
|
|
- data: [],
|
|
|
- },
|
|
|
- dateTable: {
|
|
|
- column: [
|
|
|
- {
|
|
|
- name: "排名",
|
|
|
- field: "index",
|
|
|
- width: "10%",
|
|
|
- },
|
|
|
- {
|
|
|
- name: "日期",
|
|
|
- field: "date",
|
|
|
- width: "60%",
|
|
|
- },
|
|
|
- {
|
|
|
- name: "健康情况",
|
|
|
- field: "",
|
|
|
- width: "30%",
|
|
|
- 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: [],
|
|
|
- },
|
|
|
- top10TableLeft: {
|
|
|
- column: [
|
|
|
- {
|
|
|
- name: "排名",
|
|
|
- field: "index",
|
|
|
- width: "8%",
|
|
|
- },
|
|
|
- {
|
|
|
- name: "故障名称",
|
|
|
- field: "warnDesc",
|
|
|
- },
|
|
|
- {
|
|
|
- name: "故障时间",
|
|
|
- field: "startTime",
|
|
|
- width: "35%",
|
|
|
- },
|
|
|
- {
|
|
|
- name: "修复时间",
|
|
|
- field: "stopTime",
|
|
|
- },
|
|
|
- {
|
|
|
- name: "时长",
|
|
|
- field: "stopHours",
|
|
|
- },
|
|
|
- ],
|
|
|
- data: [],
|
|
|
- },
|
|
|
- top10TableRight: {
|
|
|
- column: [
|
|
|
- {
|
|
|
- name: "排名",
|
|
|
- field: "index",
|
|
|
- width: "8%",
|
|
|
- },
|
|
|
- {
|
|
|
- name: "故障名称",
|
|
|
- field: "warnDesc",
|
|
|
- },
|
|
|
- {
|
|
|
- name: "故障时间",
|
|
|
- field: "startTime",
|
|
|
- width: "35%",
|
|
|
- },
|
|
|
- {
|
|
|
- name: "修复时间",
|
|
|
- field: "stopTime",
|
|
|
- },
|
|
|
- {
|
|
|
- name: "时长",
|
|
|
- field: "stopHours",
|
|
|
- },
|
|
|
- ],
|
|
|
- data: [],
|
|
|
- },
|
|
|
- partsArray: [],
|
|
|
- tableData4: {
|
|
|
- column: [
|
|
|
- {
|
|
|
- name: " ",
|
|
|
- field: "name",
|
|
|
- width: "8%",
|
|
|
- },
|
|
|
- {
|
|
|
- name: "故障名称",
|
|
|
- field: "v1",
|
|
|
- template: function (data) {
|
|
|
- return (
|
|
|
- "<div style='overflow: hidden;text-overflow:ellipsis;white-space: nowrap;'>" +
|
|
|
- data +
|
|
|
- "</div>"
|
|
|
- );
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- name: "故障时间",
|
|
|
- field: "v2",
|
|
|
- width: "35%",
|
|
|
- },
|
|
|
- {
|
|
|
- name: "修复时间",
|
|
|
- field: "v3",
|
|
|
- },
|
|
|
- {
|
|
|
- name: "时长",
|
|
|
- field: "v4",
|
|
|
- },
|
|
|
- ],
|
|
|
- data: [
|
|
|
- {
|
|
|
- name: "1",
|
|
|
- v1: "风机叶轮刹车系统",
|
|
|
- v2: "2018-05-31 16:28:38",
|
|
|
- v3: "2018-05-31",
|
|
|
- v4: "0.09",
|
|
|
- },
|
|
|
- {
|
|
|
- name: "2",
|
|
|
- v1: "风机叶轮刹车系统",
|
|
|
- v2: "2018-05-31 16:28:38",
|
|
|
- v3: "2018-05-31",
|
|
|
- v4: "0.09",
|
|
|
- },
|
|
|
- {
|
|
|
- name: "3",
|
|
|
- v1: "风机叶轮刹车系统",
|
|
|
- v2: "2018-05-31 16:28:38",
|
|
|
- v3: "2018-05-31",
|
|
|
- v4: "0.09",
|
|
|
- },
|
|
|
- {
|
|
|
- name: "4",
|
|
|
- v1: "风机叶轮刹车系统",
|
|
|
- v2: "2018-05-31 16:28:38",
|
|
|
- v3: "2018-05-31",
|
|
|
- v4: "0.09",
|
|
|
- },
|
|
|
- {
|
|
|
- name: "5",
|
|
|
- v1: "风机叶轮刹车系统",
|
|
|
- v2: "2018-05-31 16:28:38",
|
|
|
- v3: "2018-05-31",
|
|
|
- v4: "0.09",
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- // 月发电量对比
|
|
|
- weatherChart: {
|
|
|
- units: ["功率", "风速"],
|
|
|
- value: [
|
|
|
- {
|
|
|
- title: "应发功率",
|
|
|
- yAxisIndex: 1,
|
|
|
- value: [
|
|
|
- {
|
|
|
- text: "05-02 00:00",
|
|
|
- value: 11,
|
|
|
- weather: "sun",
|
|
|
- direction: "n",
|
|
|
- },
|
|
|
- {
|
|
|
- text: "05-04 00:00",
|
|
|
- value: 11,
|
|
|
- weather: "rain",
|
|
|
- direction: "s",
|
|
|
- },
|
|
|
- {
|
|
|
- text: "05-06 00:00",
|
|
|
- value: 13,
|
|
|
- weather: "sun",
|
|
|
- direction: "w",
|
|
|
- },
|
|
|
- {
|
|
|
- text: "05-08 00:00",
|
|
|
- value: 12,
|
|
|
- weather: "cloud",
|
|
|
- direction: "e",
|
|
|
- },
|
|
|
- {
|
|
|
- text: "05-10 00:00",
|
|
|
- value: 13,
|
|
|
- weather: "sun",
|
|
|
- direction: "nw",
|
|
|
- },
|
|
|
- {
|
|
|
- text: "05-12 00:00",
|
|
|
- value: 12,
|
|
|
- weather: "sun",
|
|
|
- direction: "ne",
|
|
|
- },
|
|
|
- {
|
|
|
- text: "05-14 00:00",
|
|
|
- value: 11,
|
|
|
- weather: "cloud",
|
|
|
- direction: "sw",
|
|
|
- },
|
|
|
- {
|
|
|
- text: "05-16 00:00",
|
|
|
- value: 11,
|
|
|
- weather: "sun",
|
|
|
- direction: "se",
|
|
|
- },
|
|
|
- {
|
|
|
- text: "05-18 00:00",
|
|
|
- value: 13,
|
|
|
- weather: "rain",
|
|
|
- direction: "n",
|
|
|
- },
|
|
|
- {
|
|
|
- text: "05-20 00:00",
|
|
|
- value: 11,
|
|
|
- weather: "cloud",
|
|
|
- direction: "n",
|
|
|
- },
|
|
|
- {
|
|
|
- text: "05-22 00:00",
|
|
|
- value: 12,
|
|
|
- weather: "sun",
|
|
|
- direction: "n",
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- {
|
|
|
- title: "实际功率",
|
|
|
- yAxisIndex: 1,
|
|
|
- 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: 1,
|
|
|
- },
|
|
|
- {
|
|
|
- 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: 5,
|
|
|
- },
|
|
|
- {
|
|
|
- text: "05-18 00:00",
|
|
|
- value: 4,
|
|
|
- },
|
|
|
- {
|
|
|
- text: "05-20 00:00",
|
|
|
- value: 1,
|
|
|
- },
|
|
|
- {
|
|
|
- text: "05-22 00:00",
|
|
|
- value: 3,
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- powerChartData: {
|
|
|
- units: [""],
|
|
|
- value: [
|
|
|
- {
|
|
|
- title: "",
|
|
|
- yAxisIndex: 0,
|
|
|
- value: [],
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- healthReportShow: false,
|
|
|
- };
|
|
|
- },
|
|
|
-
|
|
|
- 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() {
|
|
|
- let that = this;
|
|
|
- that.API.requestData({
|
|
|
- method: "POST",
|
|
|
- subUrl: "healthsub/gadaytop5",
|
|
|
- data: {
|
|
|
- wtId: that.wtId,
|
|
|
- },
|
|
|
- success(res) {
|
|
|
- let top5TableData = [];
|
|
|
- let index = 1;
|
|
|
- for (let key in res.data) {
|
|
|
- let ele = res.data[key];
|
|
|
- top5TableData.push({
|
|
|
- index,
|
|
|
- date: ele[1],
|
|
|
- rank: ele[2],
|
|
|
- wpId: ele[3],
|
|
|
- wtId: ele[4],
|
|
|
- });
|
|
|
- index++;
|
|
|
- }
|
|
|
- that.top5Table.data = top5TableData;
|
|
|
- },
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- // 渲染健康报告表格
|
|
|
- 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,
|
|
|
- });
|
|
|
- }
|
|
|
- this.dateTable.data = tableData;
|
|
|
- },
|
|
|
-
|
|
|
- // 获取等级评价
|
|
|
- getTop10() {
|
|
|
- let that = this;
|
|
|
- that.API.requestData({
|
|
|
- method: "POST",
|
|
|
- subUrl: "healthsub/queryStopTop10",
|
|
|
- data: {
|
|
|
- wtId: that.wtId,
|
|
|
- },
|
|
|
- success(res) {
|
|
|
- let leftData = [];
|
|
|
- let rightData = [];
|
|
|
-
|
|
|
- res.data.forEach((ele, index) => {
|
|
|
- const item = {
|
|
|
- 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,
|
|
|
- };
|
|
|
- if (index < 5) {
|
|
|
- leftData.push(item);
|
|
|
- } else {
|
|
|
- rightData.push(item);
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- that.top10TableLeft.data = leftData;
|
|
|
- that.top10TableRight.data = rightData;
|
|
|
- },
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- // 获取八大部件
|
|
|
- getMtbfByBj() {
|
|
|
- let that = this;
|
|
|
- that.API.requestData({
|
|
|
- method: "POST",
|
|
|
- subUrl: "healthsub/getWtMttrandMtbfByBj",
|
|
|
- data: {
|
|
|
- wtId: that.wtId,
|
|
|
- },
|
|
|
- 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,
|
|
|
- value: ele,
|
|
|
- });
|
|
|
- });
|
|
|
- res.data[key].push(linChartData);
|
|
|
- partsArray.push(res.data[key]);
|
|
|
- }
|
|
|
- that.partsArray = partsArray;
|
|
|
- },
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- // 获取发电曲线
|
|
|
- getFindPowerChar() {
|
|
|
- let that = this;
|
|
|
- that.API.requestData({
|
|
|
- method: "POST",
|
|
|
- subUrl: "healthsub/findPowerChar",
|
|
|
- data: {
|
|
|
- wtId: that.wtId,
|
|
|
- },
|
|
|
- success(res) {
|
|
|
- let chartUnits = ["(WM)", "(m/s)"];
|
|
|
- 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],
|
|
|
- });
|
|
|
- chartData[1].value.push({
|
|
|
- text: new Date(time).formatDate("MM-dd hh:mm"),
|
|
|
- value: res.data.sjgl[index],
|
|
|
- });
|
|
|
- chartData[2].value.push({
|
|
|
- text: new Date(time).formatDate("MM-dd hh:mm"),
|
|
|
- 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>
|
|
|
-
|
|
|
-<style lang="less">
|
|
|
-.health-10 {
|
|
|
- font-size: 12px;
|
|
|
- .com-table {
|
|
|
- tbody tr td {
|
|
|
- padding: 0;
|
|
|
- height: 30px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .table {
|
|
|
- tbody {
|
|
|
- td {
|
|
|
- padding: 0;
|
|
|
- height: 30px;
|
|
|
- }
|
|
|
- tr:nth-child(2n) td {
|
|
|
- background-color: fade(@gray, 20%);
|
|
|
-
|
|
|
- &.item {
|
|
|
- background-color: transparent;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- th {
|
|
|
- background: fade(@gray, 40);
|
|
|
- font-size: 12px;
|
|
|
- font-weight: 400;
|
|
|
- line-height: 24px;
|
|
|
- color: @gray-l;
|
|
|
- border: 2px solid #07140f;
|
|
|
-
|
|
|
- &.type1 {
|
|
|
- border-left: 0;
|
|
|
- border-right: 0;
|
|
|
- }
|
|
|
- }
|
|
|
- td {
|
|
|
- color: @gray-l;
|
|
|
- text-align: center;
|
|
|
- height: 26px;
|
|
|
- line-height: 26px;
|
|
|
-
|
|
|
- &.item {
|
|
|
- width: 100px;
|
|
|
- div {
|
|
|
- color: @white;
|
|
|
- background: fade(@gray, 20);
|
|
|
- margin: 2px;
|
|
|
- border: 1px solid transparent;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .percent-item {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- height: 30px;
|
|
|
-
|
|
|
- .percent-bar {
|
|
|
- height: 12px;
|
|
|
- width: 170px;
|
|
|
- background: transparent;
|
|
|
- border: 1px solid @gray-l;
|
|
|
- margin-left: 8px;
|
|
|
-
|
|
|
- .percent-value {
|
|
|
- height: calc(100% - 4px);
|
|
|
- background: @green;
|
|
|
- margin: 2px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .score {
|
|
|
- width: 100px;
|
|
|
- div {
|
|
|
- background: fade(@gray, 20);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .panel-header {
|
|
|
- margin-bottom: 0;
|
|
|
- .panel-title {
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- }
|
|
|
- .fc-info {
|
|
|
- .panel-header {
|
|
|
- margin-bottom: 8px;
|
|
|
- }
|
|
|
- .panel-title {
|
|
|
- text-align: left;
|
|
|
- padding-left: 20px;
|
|
|
- }
|
|
|
- }
|
|
|
- .table-chart {
|
|
|
- height: 312px;
|
|
|
- .panel-title {
|
|
|
- text-align: left;
|
|
|
- padding-left: 20px;
|
|
|
- }
|
|
|
- .chart-title {
|
|
|
- // color: rgba(255, 255, 255, 0.75);
|
|
|
- color: @gray-l;
|
|
|
- .title-panel {
|
|
|
- height: 30px;
|
|
|
- line-height: 30px;
|
|
|
- margin-bottom: 8px;
|
|
|
- background-color: #1e2524;
|
|
|
- .des-title {
|
|
|
- padding-left: 100px;
|
|
|
- }
|
|
|
- .num {
|
|
|
- padding-left: 20px;
|
|
|
- color: #05bb4c;
|
|
|
- font-weight: 600;
|
|
|
- }
|
|
|
- .unit {
|
|
|
- padding-left: 20px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .table-panel .wrong-list {
|
|
|
- .panel-title {
|
|
|
- text-align: left;
|
|
|
- padding-left: 20px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .percent-item {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- height: 34px;
|
|
|
-
|
|
|
- .percent-bar {
|
|
|
- height: 12px;
|
|
|
- width: 170px;
|
|
|
- background: transparent;
|
|
|
- border: 1px solid @gray-l;
|
|
|
- margin-left: 8px;
|
|
|
-
|
|
|
- .percent-value {
|
|
|
- height: calc(100% - 4px);
|
|
|
- background: @green;
|
|
|
- margin: 2px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .score {
|
|
|
- width: 100px;
|
|
|
- div {
|
|
|
- background: fade(@gray, 20);
|
|
|
- }
|
|
|
- }
|
|
|
- .data-list {
|
|
|
- .dot {
|
|
|
- width: 12px;
|
|
|
- height: 12px;
|
|
|
- margin: auto;
|
|
|
-
|
|
|
- &.green {
|
|
|
- background: @green;
|
|
|
- }
|
|
|
-
|
|
|
- &.yellow {
|
|
|
- background: @yellow;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|
|
|
+<template>
|
|
|
+ <div class="health-10">
|
|
|
+ <wt-chooser @change="switchWt" :wpId="wpId" :wtId="wtId"></wt-chooser>
|
|
|
+ <el-row :gutter="20" class="table-panel">
|
|
|
+ <el-col :span="6">
|
|
|
+ <panel :title="'等级评价'" :showLine="false">
|
|
|
+ <Table :data="top5Table" :canScroll="false" />
|
|
|
+ </panel>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <panel :title="'健康报告'" :showLine="false">
|
|
|
+ <Table :data="dateTable" :canScroll="false" />
|
|
|
+ </panel>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12" class="wrong-list">
|
|
|
+ <panel :title="'故障信息'" :showLine="false">
|
|
|
+ <div class="data-list" style="display: flex">
|
|
|
+ <Table :data="top10TableLeft" :canScroll="false" />
|
|
|
+ <Table :data="top10TableRight" :canScroll="false" />
|
|
|
+ </div>
|
|
|
+ </panel>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20" class="table-chart">
|
|
|
+ <el-col :span="12">
|
|
|
+ <panel :title="'八大部件'" :showLine="false">
|
|
|
+ <div class="table">
|
|
|
+ <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">
|
|
|
+ MTBF（H/H）
|
|
|
+ </th>
|
|
|
+ <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">
|
|
|
+ <tbody>
|
|
|
+ <tr v-for="(item, index) of partsArray" :key="index">
|
|
|
+ <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>
|
|
|
+ <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>
|
|
|
+ </div>
|
|
|
+ <!-- 剩余9999/建个故障9999 -->
|
|
|
+ {{ item[4] }}
|
|
|
+ </div>
|
|
|
+ </td>
|
|
|
+ <td style="width: 200px">
|
|
|
+ <table-line-chart :height="'20px'" :list="item[8]" />
|
|
|
+ </td>
|
|
|
+ <td style="width: #00bf4d">
|
|
|
+ {{ item[6] }}
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ </el-scrollbar>
|
|
|
+ </div>
|
|
|
+ </panel>
|
|
|
+ </el-col>
|
|
|
+ <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
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <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"
|
|
|
+ />
|
|
|
+ </panel>
|
|
|
+ </div>
|
|
|
+ <HealthReport
|
|
|
+ :show="healthReportShow"
|
|
|
+ :params="{ wtId: this.wtId, recorddate: this.recorddate }"
|
|
|
+ @closed="
|
|
|
+ (res) => {
|
|
|
+ this.healthReportShow = false;
|
|
|
+ }
|
|
|
+ "
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import Panel from "../../components/coms/panel/panel.vue";
|
|
|
+import Table from "../../components/coms/table/table.vue";
|
|
|
+import TableLineChart from "../../components/chart/line/table-line-chart.vue";
|
|
|
+import ImgLineChart from "../../components/chart/line/img-line-chart.vue";
|
|
|
+import ZoomLineChart from "../../components/chart/line/zoom-line-chart.vue";
|
|
|
+import HealthReport from "@com/other/healthReport/index.vue";
|
|
|
+import WtChooser from "@com/coms/wt-chooser/wt-chooser.vue"
|
|
|
+
|
|
|
+export default {
|
|
|
+ setup() {},
|
|
|
+ components: {
|
|
|
+ Panel,
|
|
|
+ Table,
|
|
|
+ TableLineChart,
|
|
|
+ ImgLineChart,
|
|
|
+ ZoomLineChart,
|
|
|
+ HealthReport,
|
|
|
+ WtChooser
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ const that = this;
|
|
|
+ return {
|
|
|
+ top5Table: {
|
|
|
+ column: [
|
|
|
+ {
|
|
|
+ name: "排名",
|
|
|
+ field: "index",
|
|
|
+ width: "10%",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "日期",
|
|
|
+ field: "date",
|
|
|
+ width: "45%",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "等级",
|
|
|
+ field: "rank",
|
|
|
+ width: "45%",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ data: [],
|
|
|
+ },
|
|
|
+ dateTable: {
|
|
|
+ column: [
|
|
|
+ {
|
|
|
+ name: "排名",
|
|
|
+ field: "index",
|
|
|
+ width: "10%",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "日期",
|
|
|
+ field: "date",
|
|
|
+ width: "60%",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "健康情况",
|
|
|
+ field: "",
|
|
|
+ width: "30%",
|
|
|
+ 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: [],
|
|
|
+ },
|
|
|
+ top10TableLeft: {
|
|
|
+ column: [
|
|
|
+ {
|
|
|
+ name: "排名",
|
|
|
+ field: "index",
|
|
|
+ width: "8%",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "故障名称",
|
|
|
+ field: "warnDesc",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "故障时间",
|
|
|
+ field: "startTime",
|
|
|
+ width: "35%",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "修复时间",
|
|
|
+ field: "stopTime",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "时长",
|
|
|
+ field: "stopHours",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ data: [],
|
|
|
+ },
|
|
|
+ top10TableRight: {
|
|
|
+ column: [
|
|
|
+ {
|
|
|
+ name: "排名",
|
|
|
+ field: "index",
|
|
|
+ width: "8%",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "故障名称",
|
|
|
+ field: "warnDesc",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "故障时间",
|
|
|
+ field: "startTime",
|
|
|
+ width: "35%",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "修复时间",
|
|
|
+ field: "stopTime",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "时长",
|
|
|
+ field: "stopHours",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ data: [],
|
|
|
+ },
|
|
|
+ partsArray: [],
|
|
|
+ tableData4: {
|
|
|
+ column: [
|
|
|
+ {
|
|
|
+ name: " ",
|
|
|
+ field: "name",
|
|
|
+ width: "8%",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "故障名称",
|
|
|
+ field: "v1",
|
|
|
+ template: function (data) {
|
|
|
+ return (
|
|
|
+ "<div style='overflow: hidden;text-overflow:ellipsis;white-space: nowrap;'>" +
|
|
|
+ data +
|
|
|
+ "</div>"
|
|
|
+ );
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "故障时间",
|
|
|
+ field: "v2",
|
|
|
+ width: "35%",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "修复时间",
|
|
|
+ field: "v3",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "时长",
|
|
|
+ field: "v4",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ name: "1",
|
|
|
+ v1: "风机叶轮刹车系统",
|
|
|
+ v2: "2018-05-31 16:28:38",
|
|
|
+ v3: "2018-05-31",
|
|
|
+ v4: "0.09",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "2",
|
|
|
+ v1: "风机叶轮刹车系统",
|
|
|
+ v2: "2018-05-31 16:28:38",
|
|
|
+ v3: "2018-05-31",
|
|
|
+ v4: "0.09",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "3",
|
|
|
+ v1: "风机叶轮刹车系统",
|
|
|
+ v2: "2018-05-31 16:28:38",
|
|
|
+ v3: "2018-05-31",
|
|
|
+ v4: "0.09",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "4",
|
|
|
+ v1: "风机叶轮刹车系统",
|
|
|
+ v2: "2018-05-31 16:28:38",
|
|
|
+ v3: "2018-05-31",
|
|
|
+ v4: "0.09",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "5",
|
|
|
+ v1: "风机叶轮刹车系统",
|
|
|
+ v2: "2018-05-31 16:28:38",
|
|
|
+ v3: "2018-05-31",
|
|
|
+ v4: "0.09",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ // 月发电量对比
|
|
|
+ weatherChart: {
|
|
|
+ units: ["功率", "风速"],
|
|
|
+ value: [
|
|
|
+ {
|
|
|
+ title: "应发功率",
|
|
|
+ yAxisIndex: 1,
|
|
|
+ value: [
|
|
|
+ {
|
|
|
+ text: "05-02 00:00",
|
|
|
+ value: 11,
|
|
|
+ weather: "sun",
|
|
|
+ direction: "n",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "05-04 00:00",
|
|
|
+ value: 11,
|
|
|
+ weather: "rain",
|
|
|
+ direction: "s",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "05-06 00:00",
|
|
|
+ value: 13,
|
|
|
+ weather: "sun",
|
|
|
+ direction: "w",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "05-08 00:00",
|
|
|
+ value: 12,
|
|
|
+ weather: "cloud",
|
|
|
+ direction: "e",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "05-10 00:00",
|
|
|
+ value: 13,
|
|
|
+ weather: "sun",
|
|
|
+ direction: "nw",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "05-12 00:00",
|
|
|
+ value: 12,
|
|
|
+ weather: "sun",
|
|
|
+ direction: "ne",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "05-14 00:00",
|
|
|
+ value: 11,
|
|
|
+ weather: "cloud",
|
|
|
+ direction: "sw",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "05-16 00:00",
|
|
|
+ value: 11,
|
|
|
+ weather: "sun",
|
|
|
+ direction: "se",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "05-18 00:00",
|
|
|
+ value: 13,
|
|
|
+ weather: "rain",
|
|
|
+ direction: "n",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "05-20 00:00",
|
|
|
+ value: 11,
|
|
|
+ weather: "cloud",
|
|
|
+ direction: "n",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "05-22 00:00",
|
|
|
+ value: 12,
|
|
|
+ weather: "sun",
|
|
|
+ direction: "n",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "实际功率",
|
|
|
+ yAxisIndex: 1,
|
|
|
+ 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: 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ 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: 5,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "05-18 00:00",
|
|
|
+ value: 4,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "05-20 00:00",
|
|
|
+ value: 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "05-22 00:00",
|
|
|
+ value: 3,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ powerChartData: {
|
|
|
+ units: [""],
|
|
|
+ value: [
|
|
|
+ {
|
|
|
+ title: "",
|
|
|
+ yAxisIndex: 0,
|
|
|
+ value: [],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ healthReportShow: false,
|
|
|
+ };
|
|
|
+ },
|
|
|
+
|
|
|
+ created() {
|
|
|
+ this.init();
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ init(){
|
|
|
+ this.wpId = this.$route.params.wpId;
|
|
|
+ this.wtId = this.$route.params.wtId;
|
|
|
+ this.getTop5();
|
|
|
+ this.renderDateTable();
|
|
|
+ this.getTop10();
|
|
|
+ this.getMtbfByBj();
|
|
|
+ this.getFindPowerChar();
|
|
|
+ this.getWeather();
|
|
|
+ },
|
|
|
+ switchWt(data){
|
|
|
+ this.$router.push(`/health/health10/${data.wpId}/${data.wtId}`);
|
|
|
+ this.init();
|
|
|
+ },
|
|
|
+ // 获取等级评价
|
|
|
+ getTop5() {
|
|
|
+ let that = this;
|
|
|
+ that.API.requestData({
|
|
|
+ method: "POST",
|
|
|
+ subUrl: "healthsub/gadaytop5",
|
|
|
+ data: {
|
|
|
+ wtId: that.wtId,
|
|
|
+ },
|
|
|
+ success(res) {
|
|
|
+ let top5TableData = [];
|
|
|
+ let index = 1;
|
|
|
+ for (let key in res.data) {
|
|
|
+ let ele = res.data[key];
|
|
|
+ top5TableData.push({
|
|
|
+ index,
|
|
|
+ date: ele[1],
|
|
|
+ rank: ele[2],
|
|
|
+ wpId: ele[3],
|
|
|
+ wtId: ele[4],
|
|
|
+ });
|
|
|
+ index++;
|
|
|
+ }
|
|
|
+ that.top5Table.data = top5TableData;
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 渲染健康报告表格
|
|
|
+ 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,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.dateTable.data = tableData;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取等级评价
|
|
|
+ getTop10() {
|
|
|
+ let that = this;
|
|
|
+ that.API.requestData({
|
|
|
+ method: "POST",
|
|
|
+ subUrl: "healthsub/queryStopTop10",
|
|
|
+ data: {
|
|
|
+ wtId: that.wtId,
|
|
|
+ },
|
|
|
+ success(res) {
|
|
|
+ let leftData = [];
|
|
|
+ let rightData = [];
|
|
|
+
|
|
|
+ res.data.forEach((ele, index) => {
|
|
|
+ const item = {
|
|
|
+ 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,
|
|
|
+ };
|
|
|
+ if (index < 5) {
|
|
|
+ leftData.push(item);
|
|
|
+ } else {
|
|
|
+ rightData.push(item);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ that.top10TableLeft.data = leftData;
|
|
|
+ that.top10TableRight.data = rightData;
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取八大部件
|
|
|
+ getMtbfByBj() {
|
|
|
+ let that = this;
|
|
|
+ that.API.requestData({
|
|
|
+ method: "POST",
|
|
|
+ subUrl: "healthsub/getWtMttrandMtbfByBj",
|
|
|
+ data: {
|
|
|
+ wtId: that.wtId,
|
|
|
+ },
|
|
|
+ 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,
|
|
|
+ value: ele,
|
|
|
+ });
|
|
|
+ });
|
|
|
+ res.data[key].push(linChartData);
|
|
|
+ partsArray.push(res.data[key]);
|
|
|
+ }
|
|
|
+ that.partsArray = partsArray;
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取发电曲线
|
|
|
+ getFindPowerChar() {
|
|
|
+ let that = this;
|
|
|
+ that.API.requestData({
|
|
|
+ method: "POST",
|
|
|
+ subUrl: "healthsub/findPowerChar",
|
|
|
+ data: {
|
|
|
+ wtId: that.wtId,
|
|
|
+ },
|
|
|
+ success(res) {
|
|
|
+ let chartUnits = ["(WM)", "(m/s)"];
|
|
|
+ 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],
|
|
|
+ });
|
|
|
+ chartData[1].value.push({
|
|
|
+ text: new Date(time).formatDate("MM-dd hh:mm"),
|
|
|
+ value: res.data.sjgl[index],
|
|
|
+ });
|
|
|
+ chartData[2].value.push({
|
|
|
+ text: new Date(time).formatDate("MM-dd hh:mm"),
|
|
|
+ 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>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+.health-10 {
|
|
|
+ font-size: 12px;
|
|
|
+ .com-table {
|
|
|
+ tbody tr td {
|
|
|
+ padding: 0;
|
|
|
+ height: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .table {
|
|
|
+ tbody {
|
|
|
+ td {
|
|
|
+ padding: 0;
|
|
|
+ height: 30px;
|
|
|
+ }
|
|
|
+ tr:nth-child(2n) td {
|
|
|
+ background-color: fade(@gray, 20%);
|
|
|
+
|
|
|
+ &.item {
|
|
|
+ background-color: transparent;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ th {
|
|
|
+ background: fade(@gray, 40);
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 24px;
|
|
|
+ color: @gray-l;
|
|
|
+ border: 2px solid #07140f;
|
|
|
+
|
|
|
+ &.type1 {
|
|
|
+ border-left: 0;
|
|
|
+ border-right: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ td {
|
|
|
+ color: @gray-l;
|
|
|
+ text-align: center;
|
|
|
+ height: 26px;
|
|
|
+ line-height: 26px;
|
|
|
+
|
|
|
+ &.item {
|
|
|
+ width: 100px;
|
|
|
+ div {
|
|
|
+ color: @white;
|
|
|
+ background: fade(@gray, 20);
|
|
|
+ margin: 2px;
|
|
|
+ border: 1px solid transparent;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .percent-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ height: 30px;
|
|
|
+
|
|
|
+ .percent-bar {
|
|
|
+ height: 12px;
|
|
|
+ width: 170px;
|
|
|
+ background: transparent;
|
|
|
+ border: 1px solid @gray-l;
|
|
|
+ margin-left: 8px;
|
|
|
+
|
|
|
+ .percent-value {
|
|
|
+ height: calc(100% - 4px);
|
|
|
+ background: @green;
|
|
|
+ margin: 2px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .score {
|
|
|
+ width: 100px;
|
|
|
+ div {
|
|
|
+ background: fade(@gray, 20);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .panel-header {
|
|
|
+ margin-bottom: 0;
|
|
|
+ .panel-title {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .fc-info {
|
|
|
+ .panel-header {
|
|
|
+ margin-bottom: 8px;
|
|
|
+ }
|
|
|
+ .panel-title {
|
|
|
+ text-align: left;
|
|
|
+ padding-left: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .table-chart {
|
|
|
+ height: 312px;
|
|
|
+ .panel-title {
|
|
|
+ text-align: left;
|
|
|
+ padding-left: 20px;
|
|
|
+ }
|
|
|
+ .chart-title {
|
|
|
+ // color: rgba(255, 255, 255, 0.75);
|
|
|
+ color: @gray-l;
|
|
|
+ .title-panel {
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ background-color: #1e2524;
|
|
|
+ .des-title {
|
|
|
+ padding-left: 100px;
|
|
|
+ }
|
|
|
+ .num {
|
|
|
+ padding-left: 20px;
|
|
|
+ color: #05bb4c;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ .unit {
|
|
|
+ padding-left: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .table-panel .wrong-list {
|
|
|
+ .panel-title {
|
|
|
+ text-align: left;
|
|
|
+ padding-left: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .percent-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ height: 34px;
|
|
|
+
|
|
|
+ .percent-bar {
|
|
|
+ height: 12px;
|
|
|
+ width: 170px;
|
|
|
+ background: transparent;
|
|
|
+ border: 1px solid @gray-l;
|
|
|
+ margin-left: 8px;
|
|
|
+
|
|
|
+ .percent-value {
|
|
|
+ height: calc(100% - 4px);
|
|
|
+ background: @green;
|
|
|
+ margin: 2px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .score {
|
|
|
+ width: 100px;
|
|
|
+ div {
|
|
|
+ background: fade(@gray, 20);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .data-list {
|
|
|
+ .dot {
|
|
|
+ width: 12px;
|
|
|
+ height: 12px;
|
|
|
+ margin: auto;
|
|
|
+
|
|
|
+ &.green {
|
|
|
+ background: @green;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.yellow {
|
|
|
+ background: @yellow;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
