|
|
@@ -1,122 +1,179 @@
|
|
|
<template>
|
|
|
- <div class="optimizationSuggestions">
|
|
|
- <div class="main_top">
|
|
|
- <div class="form-wrapper">
|
|
|
- <!-- <div class="station">
|
|
|
+ <div class="optimizationSuggestions">
|
|
|
+ <div class="main_top">
|
|
|
+ <div class="form-wrapper">
|
|
|
+ <!-- <div class="station">
|
|
|
场站：
|
|
|
<el-select v-model="reportStation" placeholder="选择场站">
|
|
|
<el-option v-for="item in stationList" :key="item.id" :label="item.name" :value="item.id">
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
</div> -->
|
|
|
- <div class="station">
|
|
|
- 报告月份
|
|
|
- <el-date-picker style="width: 120px" v-model="reportParamDate" type="month" value-format="YYYY-MM"
|
|
|
- placeholder="请选择" />
|
|
|
- </div>
|
|
|
- <div class="but">
|
|
|
- <el-button type="primary" round size="mini" @click="handleReportOp">查询</el-button>
|
|
|
- <el-button style="width: 100px" type="danger" round size="mini" @click="exportPDFop"
|
|
|
- :loading="loading">导出 PDF
|
|
|
- </el-button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class="station">
|
|
|
+ 时间
|
|
|
+ <el-date-picker
|
|
|
+ v-model="reportParamDate"
|
|
|
+ type="datetime"
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
+ placeholder="请选择"
|
|
|
+ />
|
|
|
</div>
|
|
|
- <div class="infoBox">
|
|
|
- <div id="pdfDom" ref="pdfContent" :style="!theme ? 'background-color: #040c0b' : 'background-color: #fff'">
|
|
|
- <h2 style="
|
|
|
+ <div class="but">
|
|
|
+ <el-button type="primary" round size="mini" @click="handleReportOp"
|
|
|
+ >查询</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ style="width: 100px"
|
|
|
+ type="danger"
|
|
|
+ round
|
|
|
+ size="mini"
|
|
|
+ @click="exportPDFop"
|
|
|
+ :loading="loading"
|
|
|
+ >导出 PDF
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="infoBox">
|
|
|
+ <div
|
|
|
+ id="pdfDom"
|
|
|
+ ref="pdfContent"
|
|
|
+ :style="!theme ? 'background-color: #040c0b' : 'background-color: #fff'"
|
|
|
+ >
|
|
|
+ <h2
|
|
|
+ style="
|
|
|
font-weight: bolder;
|
|
|
text-align: center;
|
|
|
margin-bottom: 20px;
|
|
|
text-align: center;
|
|
|
- " :style="!theme ? 'color: #fff' : 'color: #000'">
|
|
|
- {{ OperationName }}
|
|
|
- </h2>
|
|
|
- <!-- 概述 -->
|
|
|
- <h3 style="text-indent: 2em; font-weight: bolder; margin-bottom: 10px"
|
|
|
- :style="!theme ? 'color: #fff' : 'color: #000'">
|
|
|
- 1.概述
|
|
|
- </h3>
|
|
|
- <p style="
|
|
|
+ "
|
|
|
+ :style="!theme ? 'color: #fff' : 'color: #000'"
|
|
|
+ >
|
|
|
+ {{ OperationName }}
|
|
|
+ </h2>
|
|
|
+ <!-- 概述 -->
|
|
|
+ <h3
|
|
|
+ style="text-indent: 2em; font-weight: bolder; margin-bottom: 10px"
|
|
|
+ :style="!theme ? 'color: #fff' : 'color: #000'"
|
|
|
+ >
|
|
|
+ 1.概述
|
|
|
+ </h3>
|
|
|
+ <p
|
|
|
+ style="
|
|
|
text-indent: 2em;
|
|
|
font-size: 15px;
|
|
|
text-align: justify;
|
|
|
line-height: 22px;
|
|
|
- ">
|
|
|
- {{ OperationGs }}
|
|
|
- </p>
|
|
|
- <h4 style="text-indent: 2em; font-weight: bolder; margin: 10px 0"
|
|
|
- :style="!theme ? 'color: #fff' : 'color: #000'">
|
|
|
- 1.1 风电场基本信息
|
|
|
- </h4>
|
|
|
- <div style="text-indent: 2em; line-height: 30px; font-size: 15px" v-for="(item, index) in basrMsgArr"
|
|
|
- :key="index">
|
|
|
- <span style="
|
|
|
+ "
|
|
|
+ >
|
|
|
+ {{ OperationGs }}
|
|
|
+ </p>
|
|
|
+ <h4
|
|
|
+ style="text-indent: 2em; font-weight: bolder; margin: 10px 0"
|
|
|
+ :style="!theme ? 'color: #fff' : 'color: #000'"
|
|
|
+ >
|
|
|
+ 1.1 风电场基本信息
|
|
|
+ </h4>
|
|
|
+ <div
|
|
|
+ style="text-indent: 2em; line-height: 30px; font-size: 15px"
|
|
|
+ v-for="(item, index) in basrMsgArr"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ style="
|
|
|
background: #fff;
|
|
|
width: 8px;
|
|
|
height: 8px;
|
|
|
border-radius: 10px;
|
|
|
display: inline-block;
|
|
|
margin: 0 15px 0 15px;
|
|
|
- " :style="!theme ? 'background: #fff' : 'background: #000'"></span>
|
|
|
- <span style="font-weight: bolder; margin-right: 10px"
|
|
|
- :style="!theme ? 'color: #fff' : 'color: #000'">{{ item.name }}:
|
|
|
- </span>
|
|
|
- <span style="text-align: justify; line-height: 22px"
|
|
|
- :style="!theme ? 'color: #fff' : 'color: #000'">{{ item.value }}</span>
|
|
|
- </div>
|
|
|
- <!-- 筛选标准 -->
|
|
|
- <h3 style="
|
|
|
+ "
|
|
|
+ :style="!theme ? 'background: #fff' : 'background: #000'"
|
|
|
+ ></span>
|
|
|
+ <span
|
|
|
+ style="font-weight: bolder; margin-right: 10px"
|
|
|
+ :style="!theme ? 'color: #fff' : 'color: #000'"
|
|
|
+ >{{ item.name }}:
|
|
|
+ </span>
|
|
|
+ <span
|
|
|
+ style="text-align: justify; line-height: 22px"
|
|
|
+ :style="!theme ? 'color: #fff' : 'color: #000'"
|
|
|
+ >{{ item.value }}</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <!-- 筛选标准 -->
|
|
|
+ <h3
|
|
|
+ style="
|
|
|
text-indent: 2em;
|
|
|
font-weight: bolder;
|
|
|
margin-bottom: 10px;
|
|
|
margin-top: 10px;
|
|
|
- " :style="!theme ? 'color: #fff' : 'color: #000'">
|
|
|
- 2.筛选标准
|
|
|
- </h3>
|
|
|
- <p style="
|
|
|
+ "
|
|
|
+ :style="!theme ? 'color: #fff' : 'color: #000'"
|
|
|
+ >
|
|
|
+ 2.筛选标准
|
|
|
+ </h3>
|
|
|
+ <p
|
|
|
+ style="
|
|
|
text-indent: 2em;
|
|
|
font-size: 15px;
|
|
|
text-align: justify;
|
|
|
line-height: 22px;
|
|
|
- ">
|
|
|
- 本报告依据以下标准对风机进行筛选：
|
|
|
- </p>
|
|
|
- <div style="text-indent: 2em; line-height: 30px; font-size: 15px" v-for="(item, index) in orderMsgArr"
|
|
|
- :key="index">
|
|
|
- <span style="
|
|
|
+ "
|
|
|
+ >
|
|
|
+ 本报告依据以下标准对风机进行筛选：
|
|
|
+ </p>
|
|
|
+ <div
|
|
|
+ style="text-indent: 2em; line-height: 30px; font-size: 15px"
|
|
|
+ v-for="(item, index) in orderMsgArr"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ style="
|
|
|
background: #fff;
|
|
|
width: 8px;
|
|
|
height: 8px;
|
|
|
border-radius: 10px;
|
|
|
display: inline-block;
|
|
|
margin: 0 15px 0 15px;
|
|
|
- " :style="!theme ? 'background: #fff' : 'background: #000'"></span>
|
|
|
- <span style="font-weight: bolder; margin-right: 10px"
|
|
|
- :style="!theme ? 'color: #fff' : 'color: #000'">{{ item.name }}:
|
|
|
- </span>
|
|
|
- <span style="text-align: justify; line-height: 22px"
|
|
|
- :style="!theme ? 'color: #fff' : 'color: #000'">{{ item.value }}</span>
|
|
|
- </div>
|
|
|
- <!-- 风机筛选分析 -->
|
|
|
- <h3 style="
|
|
|
+ "
|
|
|
+ :style="!theme ? 'background: #fff' : 'background: #000'"
|
|
|
+ ></span>
|
|
|
+ <span
|
|
|
+ style="font-weight: bolder; margin-right: 10px"
|
|
|
+ :style="!theme ? 'color: #fff' : 'color: #000'"
|
|
|
+ >{{ item.name }}:
|
|
|
+ </span>
|
|
|
+ <span
|
|
|
+ style="text-align: justify; line-height: 22px"
|
|
|
+ :style="!theme ? 'color: #fff' : 'color: #000'"
|
|
|
+ >{{ item.value }}</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <!-- 风机筛选分析 -->
|
|
|
+ <h3
|
|
|
+ style="
|
|
|
text-indent: 2em;
|
|
|
font-weight: bolder;
|
|
|
margin-bottom: 10px;
|
|
|
margin-top: 10px;
|
|
|
- " :style="!theme ? 'color: #fff' : 'color: #000'">
|
|
|
- 3.风机筛选分析
|
|
|
- </h3>
|
|
|
- <p style="
|
|
|
+ "
|
|
|
+ :style="!theme ? 'color: #fff' : 'color: #000'"
|
|
|
+ >
|
|
|
+ 3.风机筛选分析
|
|
|
+ </h3>
|
|
|
+ <p
|
|
|
+ style="
|
|
|
text-indent: 2em;
|
|
|
font-size: 15px;
|
|
|
text-align: justify;
|
|
|
line-height: 22px;
|
|
|
- ">
|
|
|
- 根据以上标准，对每台风机的运行数据及隐患问题信息进行分析，结果如下：
|
|
|
- </p>
|
|
|
- <div class="warn-table">
|
|
|
- <!-- <el-table class="toolSty" :data="fjsxList1" border style="width: 100%; margin: 10px 0"
|
|
|
+ "
|
|
|
+ >
|
|
|
+ 根据以上标准，对每台风机的运行数据及隐患问题信息进行分析，结果如下：
|
|
|
+ </p>
|
|
|
+ <div class="warn-table">
|
|
|
+ <!-- <el-table class="toolSty" :data="fjsxList1" border style="width: 100%; margin: 10px 0"
|
|
|
max-height="500" stripe :header-cell-style="{
|
|
|
padding: '4px',
|
|
|
fontSize: '12px',
|
|
|
@@ -148,43 +205,77 @@
|
|
|
<el-table-column align="center" prop="performanceIssues" label="性能问题" width="60"
|
|
|
fixed="right" />
|
|
|
</el-table> -->
|
|
|
- <!-- 温度类隐患 -->
|
|
|
- <el-table class="toolSty" :data="fjsxList2" border style="width: 100%; margin: 10px 0" stripe
|
|
|
- :header-cell-style="{
|
|
|
+ <!-- 温度类隐患 -->
|
|
|
+ <el-table
|
|
|
+ class="toolSty"
|
|
|
+ :data="fjsxList2"
|
|
|
+ border
|
|
|
+ style="width: 100%; margin: 10px 0"
|
|
|
+ stripe
|
|
|
+ :header-cell-style="{
|
|
|
padding: '4px',
|
|
|
fontSize: '12px',
|
|
|
fontWeight: bold,
|
|
|
border: '0.5px solid rgba(0,0,0,.5) !important',
|
|
|
- }" :cell-style="{
|
|
|
+ }"
|
|
|
+ :cell-style="{
|
|
|
height: '40px',
|
|
|
padding: '3px',
|
|
|
fontSize: '12px',
|
|
|
'border-top': '0px solid rgba(0,0,0,.5)',
|
|
|
'border-bottom': '1px solid rgba(0,0,0,.5)',
|
|
|
'border-right': '1px solid rgba(0,0,0,.5)',
|
|
|
- }">
|
|
|
- <el-table-column prop="turbineId" align="center" label="风机编号" width="60" />
|
|
|
- <el-table-column prop="downtimeCount" align="center" label="故障停机次数" width="60" />
|
|
|
- <el-table-column v-for="(item, index) in orderTableColumn2" :key="index" :label="item.name"
|
|
|
- :width="item.width" align="center">
|
|
|
- <el-table-column v-for="(res, index) in item.children" :key="index" :label="res.name"
|
|
|
- align="center" :width="res.width ? res.width : 73">
|
|
|
- <template #default="scope">
|
|
|
- <span>
|
|
|
- {{ scope.row[res.code] ? scope.row[res.code] : "-" }}
|
|
|
- </span>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="reliabilityIssue" align="center" label="可靠性问题" width="60" />
|
|
|
- </el-table>
|
|
|
- </div>
|
|
|
-
|
|
|
- <h4 style="text-indent: 2em; font-weight: bolder; margin: 10px 0"
|
|
|
- :style="!theme ? 'color: #fff' : 'color: #000'">
|
|
|
- 3.1 分析结果
|
|
|
- </h4>
|
|
|
- <!-- <div style="text-indent: 2em; line-height: 30px; font-size: 15px"
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ prop="turbineId"
|
|
|
+ align="center"
|
|
|
+ label="风机编号"
|
|
|
+ width="60"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ prop="downtimeCount"
|
|
|
+ align="center"
|
|
|
+ label="故障停机次数"
|
|
|
+ width="60"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ v-for="(item, index) in orderTableColumn2"
|
|
|
+ :key="index"
|
|
|
+ :label="item.name"
|
|
|
+ :width="item.width"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ v-for="(res, index) in item.children"
|
|
|
+ :key="index"
|
|
|
+ :label="res.name"
|
|
|
+ align="center"
|
|
|
+ :width="res.width ? res.width : 73"
|
|
|
+ >
|
|
|
+ <template #default="scope">
|
|
|
+ <span>
|
|
|
+ {{ scope.row[res.code] ? scope.row[res.code] : "-" }}
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="reliabilityIssue"
|
|
|
+ align="center"
|
|
|
+ label="可靠性问题"
|
|
|
+ width="60"
|
|
|
+ />
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <h4
|
|
|
+ style="text-indent: 2em; font-weight: bolder; margin: 10px 0"
|
|
|
+ :style="!theme ? 'color: #fff' : 'color: #000'"
|
|
|
+ >
|
|
|
+ 3.1 分析结果
|
|
|
+ </h4>
|
|
|
+ <!-- <div style="text-indent: 2em; line-height: 30px; font-size: 15px"
|
|
|
v-for="(item, index) in orderResultArr" :key="index">
|
|
|
<span style="
|
|
|
background: #fff;
|
|
|
@@ -197,127 +288,207 @@
|
|
|
<span style="text-align: justify; margin-right: 10px; line-height: 22px"
|
|
|
:style="!theme ? 'color: #fff' : 'color: #000'">{{ item }}</span>
|
|
|
</div> -->
|
|
|
- <div style="text-indent: 2em;line-height: 30px;font-size: 15px;"
|
|
|
- v-for="(item, index) in orderAnalysisArr" :key="index">
|
|
|
- <span style="background: #fff;
|
|
|
- width: 8px;
|
|
|
- height: 8px;
|
|
|
- border-radius: 10px;
|
|
|
- display: inline-block;
|
|
|
- margin: 0 15px 0 15px;" :style="!theme ? 'background: #fff' : 'background: #000'"></span>
|
|
|
- <span style="font-weight: bolder;margin-right: 10px;"
|
|
|
- :style="!theme ? 'color: #fff' : 'color: #000'">{{item.windName}}: </span>
|
|
|
- <span style="
|
|
|
- text-align: justify;margin-right: 10px;
|
|
|
- line-height: 22px;" :style="!theme ? 'color: #fff' : 'color: #000'">{{ item.value }}</span>
|
|
|
- </div>
|
|
|
- <p style="font-size: 16px;font-weight: bolder;margin: 10px 0 10px 40px"
|
|
|
- :style="!theme ? 'color: #fff' : 'color: #000'">根据以上分析，筛选出的问题风机包括: </p>
|
|
|
- <div style="text-indent: 2em;line-height: 30px;font-size: 15px;" v-for="(item, index) in orderResultArr"
|
|
|
- :key="index">
|
|
|
- <span style="background: #fff;
|
|
|
- width: 8px;
|
|
|
- height: 8px;
|
|
|
- border-radius: 10px;
|
|
|
- display: inline-block;
|
|
|
- margin: 0 15px 0 15px;" :style="!theme ? 'background: #fff' : 'background: #000'"></span>
|
|
|
- <span style="font-weight: bolder;margin-right: 10px;"
|
|
|
- :style="!theme ? 'color: #fff' : 'color: #000'">{{item.windName}}: </span>
|
|
|
- <span style="
|
|
|
- text-align: justify;margin-right: 10px;
|
|
|
- line-height: 22px;" :style="!theme ? 'color: #fff' : 'color: #000'">{{ item.value }}</span>
|
|
|
- </div>
|
|
|
+ <div
|
|
|
+ style="text-indent: 2em; line-height: 30px; font-size: 15px"
|
|
|
+ v-for="(item, index) in orderAnalysisArr"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ style="
|
|
|
+ background: #fff;
|
|
|
+ width: 8px;
|
|
|
+ height: 8px;
|
|
|
+ border-radius: 10px;
|
|
|
+ display: inline-block;
|
|
|
+ margin: 0 15px 0 15px;
|
|
|
+ "
|
|
|
+ :style="!theme ? 'background: #fff' : 'background: #000'"
|
|
|
+ ></span>
|
|
|
+ <span
|
|
|
+ style="font-weight: bolder; margin-right: 10px"
|
|
|
+ :style="!theme ? 'color: #fff' : 'color: #000'"
|
|
|
+ >{{ item.windName }}:
|
|
|
+ </span>
|
|
|
+ <span
|
|
|
+ style="text-align: justify; margin-right: 10px; line-height: 22px"
|
|
|
+ :style="!theme ? 'color: #fff' : 'color: #000'"
|
|
|
+ >{{ item.value }}</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <p
|
|
|
+ style="font-size: 16px; font-weight: bolder; margin: 10px 0 10px 40px"
|
|
|
+ :style="!theme ? 'color: #fff' : 'color: #000'"
|
|
|
+ >
|
|
|
+ 根据以上分析，筛选出的问题风机包括:
|
|
|
+ </p>
|
|
|
+ <div
|
|
|
+ style="text-indent: 2em; line-height: 30px; font-size: 15px"
|
|
|
+ v-for="(item, index) in orderResultArr"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ style="
|
|
|
+ background: #fff;
|
|
|
+ width: 8px;
|
|
|
+ height: 8px;
|
|
|
+ border-radius: 10px;
|
|
|
+ display: inline-block;
|
|
|
+ margin: 0 15px 0 15px;
|
|
|
+ "
|
|
|
+ :style="!theme ? 'background: #fff' : 'background: #000'"
|
|
|
+ ></span>
|
|
|
+ <span
|
|
|
+ style="font-weight: bolder; margin-right: 10px"
|
|
|
+ :style="!theme ? 'color: #fff' : 'color: #000'"
|
|
|
+ >{{ item.windName }}:
|
|
|
+ </span>
|
|
|
+ <span
|
|
|
+ style="text-align: justify; margin-right: 10px; line-height: 22px"
|
|
|
+ :style="!theme ? 'color: #fff' : 'color: #000'"
|
|
|
+ >{{ item.value }}</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
|
|
|
- <!-- 风机情况说明 -->
|
|
|
- <h3 style="
|
|
|
+ <!-- 风机情况说明 -->
|
|
|
+ <h3
|
|
|
+ style="
|
|
|
text-indent: 2em;
|
|
|
font-weight: bolder;
|
|
|
margin-bottom: 10px;
|
|
|
margin-top: 10px;
|
|
|
- " :style="!theme ? 'color: #fff' : 'color: #000'">
|
|
|
- 4.问题风机情况说明
|
|
|
- </h3>
|
|
|
- <div v-for="(val, key, index) in windSituationReport" :key="index">
|
|
|
- <h4 style="text-indent: 2em; font-weight: bolder; margin: 10px 0"
|
|
|
- :style="!theme ? 'color: #fff' : 'color: #000'">
|
|
|
- {{ `${key}号机组` }}
|
|
|
- </h4>
|
|
|
- <div style="text-indent: 2em; line-height: 30px; font-size: 15px" v-for="(item, index) in val"
|
|
|
- :key="index">
|
|
|
- <span style="
|
|
|
+ "
|
|
|
+ :style="!theme ? 'color: #fff' : 'color: #000'"
|
|
|
+ >
|
|
|
+ 4.问题风机情况说明
|
|
|
+ </h3>
|
|
|
+ <div v-for="(val, key, index) in windSituationReport" :key="index">
|
|
|
+ <h4
|
|
|
+ style="text-indent: 2em; font-weight: bolder; margin: 10px 0"
|
|
|
+ :style="!theme ? 'color: #fff' : 'color: #000'"
|
|
|
+ >
|
|
|
+ {{ `${key}号机组` }}
|
|
|
+ </h4>
|
|
|
+ <div
|
|
|
+ style="text-indent: 2em; line-height: 30px; font-size: 15px"
|
|
|
+ v-for="(item, index) in val"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ style="
|
|
|
background: #fff;
|
|
|
width: 8px;
|
|
|
height: 8px;
|
|
|
border-radius: 10px;
|
|
|
display: inline-block;
|
|
|
margin: 0 15px 0 15px;
|
|
|
- " :style="!theme ? 'background: #fff' : 'background: #000'"></span>
|
|
|
- <span v-if="item.indexOf('\n') !== -1">
|
|
|
- <span style="text-align: justify; line-height: 22px"
|
|
|
- :style="!theme ? 'color: #fff' : 'color: #000'">{{ item.split('\n')[0] }};</span>
|
|
|
- <p style="text-indent: 9rem; text-align: justify; line-height: 22px"
|
|
|
- :style="!theme ? 'color: #fff' : 'color: #000'">{{ item.split('\n')[1] }}</p>
|
|
|
- </span>
|
|
|
- <span style="font-weight: bolder;margin-right: 10px;" v-else
|
|
|
- :style="!theme ? 'color: #fff' : 'color: #000'">{{item}} </span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 检修建议 -->
|
|
|
- <h3 style="
|
|
|
+ "
|
|
|
+ :style="!theme ? 'background: #fff' : 'background: #000'"
|
|
|
+ ></span>
|
|
|
+ <span v-if="item.indexOf('\n') !== -1">
|
|
|
+ <span
|
|
|
+ style="text-align: justify; line-height: 22px"
|
|
|
+ :style="!theme ? 'color: #fff' : 'color: #000'"
|
|
|
+ >{{ item.split("\n")[0] }};</span
|
|
|
+ >
|
|
|
+ <p
|
|
|
+ style="
|
|
|
+ text-indent: 9rem;
|
|
|
+ text-align: justify;
|
|
|
+ line-height: 22px;
|
|
|
+ "
|
|
|
+ :style="!theme ? 'color: #fff' : 'color: #000'"
|
|
|
+ >
|
|
|
+ {{ item.split("\n")[1] }}
|
|
|
+ </p>
|
|
|
+ </span>
|
|
|
+ <span
|
|
|
+ style="font-weight: bolder; margin-right: 10px"
|
|
|
+ v-else
|
|
|
+ :style="!theme ? 'color: #fff' : 'color: #000'"
|
|
|
+ >{{ item }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 检修建议 -->
|
|
|
+ <h3
|
|
|
+ style="
|
|
|
text-indent: 2em;
|
|
|
font-weight: bolder;
|
|
|
margin-bottom: 10px;
|
|
|
margin-top: 10px;
|
|
|
- " :style="!theme ? 'color: #fff' : 'color: #000'">
|
|
|
- 5.检修建议
|
|
|
- </h3>
|
|
|
- <p style="
|
|
|
+ "
|
|
|
+ :style="!theme ? 'color: #fff' : 'color: #000'"
|
|
|
+ >
|
|
|
+ 5.检修建议
|
|
|
+ </h3>
|
|
|
+ <p
|
|
|
+ style="
|
|
|
text-indent: 2em;
|
|
|
font-size: 15px;
|
|
|
text-align: justify;
|
|
|
line-height: 22px;
|
|
|
- ">
|
|
|
- 针对筛选出的风机，提出以下检修建议：
|
|
|
- </p>
|
|
|
- <div v-for="(val, key, index) in maintenanceRecommendations" :key="index">
|
|
|
- <h4 style="text-indent: 2em; font-weight: bolder; margin: 10px 0"
|
|
|
- :style="!theme ? 'color: #fff' : 'color: #000'">
|
|
|
- {{ `${key}号机组` }}
|
|
|
- </h4>
|
|
|
- <div style="text-indent: 2em; line-height: 30px; font-size: 15px" v-for="(item, idx) in val"
|
|
|
- :key="idx">
|
|
|
- <span style="
|
|
|
+ "
|
|
|
+ >
|
|
|
+ 针对筛选出的风机，提出以下检修建议：
|
|
|
+ </p>
|
|
|
+ <div
|
|
|
+ v-for="(val, key, index) in maintenanceRecommendations"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <h4
|
|
|
+ style="text-indent: 2em; font-weight: bolder; margin: 10px 0"
|
|
|
+ :style="!theme ? 'color: #fff' : 'color: #000'"
|
|
|
+ >
|
|
|
+ {{ `${key}号机组` }}
|
|
|
+ </h4>
|
|
|
+ <div
|
|
|
+ style="text-indent: 2em; line-height: 30px; font-size: 15px"
|
|
|
+ v-for="(item, idx) in val"
|
|
|
+ :key="idx"
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ style="
|
|
|
background: #fff;
|
|
|
width: 8px;
|
|
|
height: 8px;
|
|
|
border-radius: 10px;
|
|
|
display: inline-block;
|
|
|
margin: 0 15px 0 15px;
|
|
|
- " :style="!theme ? 'background: #fff' : 'background: #000'"></span>
|
|
|
- <span style="text-align: justify; line-height: 22px"
|
|
|
- :style="!theme ? 'color: #fff' : 'color: #000'">{{ item }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 结论 -->
|
|
|
- <h3 style="
|
|
|
+ "
|
|
|
+ :style="!theme ? 'background: #fff' : 'background: #000'"
|
|
|
+ ></span>
|
|
|
+ <span
|
|
|
+ style="text-align: justify; line-height: 22px"
|
|
|
+ :style="!theme ? 'color: #fff' : 'color: #000'"
|
|
|
+ >{{ item }}</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 结论 -->
|
|
|
+ <h3
|
|
|
+ style="
|
|
|
text-indent: 2em;
|
|
|
font-weight: bolder;
|
|
|
margin-bottom: 10px;
|
|
|
margin-top: 10px;
|
|
|
- " :style="!theme ? 'color: #fff' : 'color: #000'">
|
|
|
- 6.结论
|
|
|
- </h3>
|
|
|
- <p style="
|
|
|
+ "
|
|
|
+ :style="!theme ? 'color: #fff' : 'color: #000'"
|
|
|
+ >
|
|
|
+ 6.结论
|
|
|
+ </h3>
|
|
|
+ <p
|
|
|
+ style="
|
|
|
text-indent: 2em;
|
|
|
font-size: 15px;
|
|
|
text-align: justify;
|
|
|
line-height: 22px;
|
|
|
- ">
|
|
|
- {{ conclusionMsg }}
|
|
|
- </p>
|
|
|
- <!-- <div style="text-indent: 2em;line-height: 30px;font-size: 15px;"
|
|
|
+ "
|
|
|
+ >
|
|
|
+ {{ conclusionMsg }}
|
|
|
+ </p>
|
|
|
+ <!-- <div style="text-indent: 2em;line-height: 30px;font-size: 15px;"
|
|
|
v-for="(item, idx) in conclusionMsg.resultObj" :key="idx">
|
|
|
<span style="background: #fff;
|
|
|
width: 8px;
|
|
|
@@ -332,7 +503,7 @@
|
|
|
line-height: 22px;" :style="!theme ? 'color: #fff' : 'color: #000'">{{ item.value }}</span>
|
|
|
</div> -->
|
|
|
|
|
|
- <!-- <div style="display: flex; margin-top: 15px">
|
|
|
+ <!-- <div style="display: flex; margin-top: 15px">
|
|
|
<p style="
|
|
|
text-indent: 2em;
|
|
|
font-size: 15px;
|
|
|
@@ -358,474 +529,474 @@
|
|
|
日期：XXX
|
|
|
</p>
|
|
|
</div> -->
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import Docxtemplater from "docxtemplater";
|
|
|
- import PizZip from "pizzip";
|
|
|
- import JSZipUtils from "jszip-utils";
|
|
|
- import html2canvas from 'html2canvas';
|
|
|
- import jsPDF from 'jspdf';
|
|
|
- import {
|
|
|
- saveAs
|
|
|
- } from "file-saver";
|
|
|
- import dayjs from "dayjs";
|
|
|
-
|
|
|
- import {
|
|
|
- getWpList,
|
|
|
- apiGeWarningReport
|
|
|
- } from "@/api/zhbj";
|
|
|
-
|
|
|
- import {
|
|
|
- ElMessage
|
|
|
- } from "element-plus";
|
|
|
-
|
|
|
- import jsonData from "./dataJson.json";
|
|
|
- export default {
|
|
|
- name: "yhjyReport",
|
|
|
- data() {
|
|
|
- return {
|
|
|
- stationList: [],
|
|
|
- reportStation: "NX_FGS_HA_FDC_STA",
|
|
|
- basrMsgArr: jsonData.basrMsgArr,
|
|
|
- orderMsgArr: jsonData.orderMsgArr,
|
|
|
- orderAnalysisArr: [],
|
|
|
- orderResultArr: [],
|
|
|
- maintenanceRecommendations: [],
|
|
|
- windSituationReport: [],
|
|
|
- orderTableColumn: jsonData.orderTableColumn,
|
|
|
- orderTableColumn2: jsonData.orderTableColumn2,
|
|
|
- conclusionMsg: {},
|
|
|
- OperationName: "",
|
|
|
- OperationGs: "",
|
|
|
- OperationMonth: "",
|
|
|
- fjsxList1: [],
|
|
|
- fjsxList2: [],
|
|
|
- theme: true,
|
|
|
- loading: false,
|
|
|
- reportParamDate: dayjs()
|
|
|
- .subtract(1, "month")
|
|
|
- .startOf("month")
|
|
|
- .format("YYYY-MM"),
|
|
|
- };
|
|
|
- },
|
|
|
-
|
|
|
- created() {
|
|
|
- this.theme = this.$store.state.theme;
|
|
|
- },
|
|
|
-
|
|
|
- mounted() {
|
|
|
- this.funGetStation();
|
|
|
- },
|
|
|
-
|
|
|
- methods: {
|
|
|
- /**场站 */
|
|
|
- funGetStation() {
|
|
|
- let that = this;
|
|
|
- // this.renderReportPage({
|
|
|
- // data: jsonData.reldata
|
|
|
- // });
|
|
|
- that.stationList = [];
|
|
|
- that.reportStation = "";
|
|
|
- getWpList().then((res) => {
|
|
|
- if (res) {
|
|
|
- that.stationList = res.data;
|
|
|
- if (that.stationList.length) {
|
|
|
- that.reportStation = that.stationList[0].id;
|
|
|
- that.handleReportOp();
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- async exportPDFop() {
|
|
|
- this.loading = true;
|
|
|
- try {
|
|
|
- // 获取要转换为PDF的内容
|
|
|
- const element = this.$refs.pdfContent;
|
|
|
-
|
|
|
- // 保存当前滚动位置
|
|
|
- const originalScrollTop = window.scrollY;
|
|
|
-
|
|
|
- // 将页面滚动到顶部
|
|
|
- window.scrollTo(0, 0);
|
|
|
-
|
|
|
- // 设置元素的高度为内容的实际高度
|
|
|
- const originalHeight = element.style.height;
|
|
|
- const originalOverflow = element.style.overflow;
|
|
|
- if (originalHeight) {
|
|
|
- element.style.height = `${element.scrollHeight}px`;
|
|
|
- }
|
|
|
- if (originalOverflow) {
|
|
|
- element.style.overflow = 'hidden';
|
|
|
- }
|
|
|
-
|
|
|
- // 使用html2canvas将HTML内容转换为canvas
|
|
|
- const canvas = await html2canvas(element, {
|
|
|
- scale: 2, // 提高分辨率
|
|
|
- logging: true, // 开启日志记录
|
|
|
- useCORS: true // 处理跨域图片
|
|
|
- });
|
|
|
-
|
|
|
- // 恢复原来的样式
|
|
|
- element.style.height = originalHeight || '';
|
|
|
- element.style.overflow = originalOverflow || '';
|
|
|
-
|
|
|
- // 恢复滚动位置
|
|
|
- window.scrollTo(0, originalScrollTop);
|
|
|
-
|
|
|
- // 将canvas转换为Data URL
|
|
|
- const imgData = canvas.toDataURL('image/png');
|
|
|
-
|
|
|
- // 创建一个新的jsPDF实例
|
|
|
- const doc = new jsPDF('p', 'mm', 'a4');
|
|
|
-
|
|
|
- // 计算图片在PDF中的位置和大小
|
|
|
- const imgProps = doc.getImageProperties(imgData);
|
|
|
- const pdfWidth = doc.internal.pageSize.getWidth();
|
|
|
- const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
|
|
|
-
|
|
|
- // 计算每页的高度
|
|
|
- const pageHeight = doc.internal.pageSize.getHeight();
|
|
|
- let heightLeft = pdfHeight;
|
|
|
-
|
|
|
- // 添加第一页
|
|
|
- doc.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
|
|
|
-
|
|
|
- // 添加后续页面
|
|
|
- while (heightLeft > pageHeight) {
|
|
|
- heightLeft -= pageHeight;
|
|
|
- doc.addPage();
|
|
|
- doc.addImage(imgData, 'PNG', 0, -pdfHeight + heightLeft, pdfWidth, pdfHeight);
|
|
|
- }
|
|
|
-
|
|
|
- // 保存PDF文件
|
|
|
- doc.save('优化建议报告.pdf');
|
|
|
- this.loading = false;
|
|
|
- } catch (error) {
|
|
|
- console.error('Error generating PDF:', error);
|
|
|
- this.loading = false
|
|
|
- }
|
|
|
- },
|
|
|
- exportWORD() {
|
|
|
- httpRequest
|
|
|
- .get(
|
|
|
- `/WarningReport/report?time=${this.reportParamDate}&wpid=${this.reportStation}`
|
|
|
- )
|
|
|
- .then((tempRes) => {
|
|
|
- this.getWordFn(tempRes);
|
|
|
- })
|
|
|
- .catch((e) => {
|
|
|
- // this.getWordFn({
|
|
|
- // data: jsonData.reldata,
|
|
|
- // });
|
|
|
- });
|
|
|
- },
|
|
|
- // 导出word方法
|
|
|
- getWordFn(tempRes) {
|
|
|
- let temWordData = {
|
|
|
- titleName: this.OperationName,
|
|
|
- operationGs: this.OperationGs,
|
|
|
- stationName: tempRes.data.stationid.aname,
|
|
|
- windNumber: tempRes.data.stationid.jrwindQuantityLd,
|
|
|
- zzjrl: tempRes.data.stationid.windCapacity,
|
|
|
- reportTime: tempRes.data.reporttime,
|
|
|
- fjsxList1: tempRes.data.xnwtls,
|
|
|
- fjsxList2: [],
|
|
|
- orderAnalysisArr: this.orderAnalysisArr,
|
|
|
- orderResultArr: this.orderResultArr,
|
|
|
- windSituationReportWord: [],
|
|
|
- maintenanceRecommendationsWord: [],
|
|
|
- conclusionResult: `本次分析针对${tempRes.data.stationid.aname}的风机发电能力下降及可靠性隐患进行了全面评估。通过实施短期和长期检修措施，预计将显著提高设备的发电效率和运行可靠性。`,
|
|
|
- };
|
|
|
-
|
|
|
- tempRes.data.kkxwtls.forEach((it) => {
|
|
|
- for (const key in it) {
|
|
|
- if (Object.prototype.hasOwnProperty.call(it, key)) {
|
|
|
- const element = it[key];
|
|
|
- if (element === null) {
|
|
|
- it[key] = "-";
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- temWordData.fjsxList2 = tempRes.data.kkxwtls;
|
|
|
-
|
|
|
- //4.风机情况说明
|
|
|
- let qksmNum = 0;
|
|
|
- for (const key in tempRes.data.qksm) {
|
|
|
- if (Object.prototype.hasOwnProperty.call(tempRes.data.qksm, key)) {
|
|
|
- const element = tempRes.data.qksm[key];
|
|
|
- let eleArr = [];
|
|
|
-
|
|
|
- element.forEach((it) => {
|
|
|
- let eleObj = {
|
|
|
- name: it.substring(0, it.indexOf("：")),
|
|
|
- value: it.substring(it.indexOf("："), it.length)
|
|
|
- // value: it.substring(it.indexOf("："), it.length)?.indexOf('\n') > -1 ? it
|
|
|
- // .substring(it.indexOf("："), it.length).split('\n') : it.substring(it
|
|
|
- // .indexOf("："), it.length),
|
|
|
- };
|
|
|
- eleArr.push(eleObj);
|
|
|
- });
|
|
|
- let obj = {
|
|
|
- index: qksmNum++,
|
|
|
- windName: key,
|
|
|
- windValue: eleArr,
|
|
|
- };
|
|
|
- temWordData.windSituationReportWord.push(obj);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- //5.风机情况说明
|
|
|
- let jxjyNum = 0;
|
|
|
- for (const key in tempRes.data.jxjy) {
|
|
|
- if (Object.prototype.hasOwnProperty.call(tempRes.data.jxjy, key)) {
|
|
|
- const element = tempRes.data.jxjy[key];
|
|
|
- let eleArr = [];
|
|
|
- element.forEach((it) => {
|
|
|
- let eleObj = {
|
|
|
- name: it.substring(0, it.indexOf(":")),
|
|
|
- value: it.substring(it.indexOf(":"), it.length),
|
|
|
- };
|
|
|
- eleArr.push(eleObj);
|
|
|
- });
|
|
|
- let obj = {
|
|
|
- index: jxjyNum++,
|
|
|
- windName: key,
|
|
|
- windValue: eleArr,
|
|
|
- };
|
|
|
- temWordData.maintenanceRecommendationsWord.push(obj);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 读取并获得模板文件的二进制内容
|
|
|
- JSZipUtils.getBinaryContent(
|
|
|
- `./static/optimizationSuggestionsReport.docx`,
|
|
|
- (error, content) => {
|
|
|
- // 抛出异常
|
|
|
- if (error) throw error;
|
|
|
- // 创建一个JSZip实例，内容为模板的内容
|
|
|
- let zip = new PizZip(content);
|
|
|
- // 创建并加载docxtemplater实例对象
|
|
|
- let doc = new Docxtemplater();
|
|
|
- doc.loadZip(zip);
|
|
|
- doc.setData(temWordData);
|
|
|
- try {
|
|
|
- // 用模板变量的值替换所有模板变量
|
|
|
- doc.render();
|
|
|
- } catch (error) {
|
|
|
- // 抛出异常
|
|
|
- let e = {
|
|
|
- message: error.message,
|
|
|
- name: error.name,
|
|
|
- stack: error.stack,
|
|
|
- properties: error.properties,
|
|
|
- };
|
|
|
- console.log(
|
|
|
- JSON.stringify({
|
|
|
- error: e,
|
|
|
- })
|
|
|
- );
|
|
|
- throw error;
|
|
|
- }
|
|
|
- // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
|
|
|
- let out = doc.getZip().generate({
|
|
|
- type: "blob",
|
|
|
- mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
|
|
|
- });
|
|
|
- // 将目标文件对象保存为目标类型的文件，并命名
|
|
|
- saveAs(out, `${temWordData.titleName}.docx`);
|
|
|
- }
|
|
|
- );
|
|
|
- },
|
|
|
- handleReportOp() {
|
|
|
- if (this.reportParamDate) {
|
|
|
- this.OperationName = "";
|
|
|
- this.OperationGs = "";
|
|
|
- this.OperationMonth = "";
|
|
|
- // this.basrMsgArr = [];
|
|
|
- this.fjsxList1 = [];
|
|
|
- this.fjsxList2 = [];
|
|
|
- this.orderAnalysisArr = []
|
|
|
- this.orderResultArr = [];
|
|
|
- this.windSituationReport = {};
|
|
|
- this.maintenanceRecommendations = {};
|
|
|
- this.conclusionMsg = "";
|
|
|
-
|
|
|
- let params = {
|
|
|
- reportParamDate: this.reportParamDate,
|
|
|
- reportStation: this.reportStation
|
|
|
- }
|
|
|
-
|
|
|
- apiGeWarningReport(params).then((res) => {
|
|
|
- this.renderReportPage(res);
|
|
|
- })
|
|
|
- .catch(() => {
|
|
|
- // this.renderReportPage({
|
|
|
- // data: jsonData.reldata,
|
|
|
- // });
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- renderReportPage(res) {
|
|
|
- this.OperationMonth = res.data.reporttime;
|
|
|
- let date = this.OperationMonth.split("-");
|
|
|
- this.OperationName =
|
|
|
- date[0] +
|
|
|
- "年" +
|
|
|
- date[1] +
|
|
|
- "月" +
|
|
|
- res.data.stationid.aname +
|
|
|
- "性能优化建议报告";
|
|
|
- this.OperationGs = `本报告旨在对${res.data.stationid.aname}内的风机进行综合分析，以筛选出同时存在性能问题和可靠性隐患的风机，为后续的检修与优化提供依据。`;
|
|
|
-
|
|
|
- this.basrMsgArr.forEach((it) => {
|
|
|
- if (it.nameEn === "reportDate") {
|
|
|
- it.value = date[0] + "年" + date[1] + "月";
|
|
|
- } else {
|
|
|
- it.value = res.data.stationid[it.nameEn];
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- this.orderMsgArr.forEach((it) => {
|
|
|
- it.value = jsonData.orderMsg[it.nameEn];
|
|
|
- });
|
|
|
-
|
|
|
- this.fjsxList2 = res.data.kkxwtls;
|
|
|
- // 3.1筛选结果
|
|
|
- res.data.FilterResults.split("\n").forEach((ele) => {
|
|
|
- let obj = {
|
|
|
- windName: ele.split("：")[0],
|
|
|
- value: ele.split("：")[1]
|
|
|
- }
|
|
|
- this.orderResultArr.push(obj);
|
|
|
- });
|
|
|
- // for (const key in res.data.FilterResults) {
|
|
|
- // if (Object.prototype.hasOwnProperty.call(res.data.FilterResults, key)) {
|
|
|
- // const element = res.data.FilterResults[key];
|
|
|
- // let obj = {
|
|
|
- // windName: key,
|
|
|
- // value: element
|
|
|
- // }
|
|
|
- // }
|
|
|
- // }
|
|
|
- // 4风机情况说明
|
|
|
- this.windSituationReport = res.data.qksm;
|
|
|
- // 5检修建议
|
|
|
- this.maintenanceRecommendations = res.data.jxjy;
|
|
|
-
|
|
|
- this.conclusionMsg =
|
|
|
- `本次分析针对${res.data.stationid.aname}的风机发电能力下降及可靠性隐患进行了全面评估。通过实施短期和长期检修措施，预计将显著提高设备的发电效率和运行可靠性。`;
|
|
|
- },
|
|
|
- },
|
|
|
-
|
|
|
- watch: {
|
|
|
- "$store.state.theme"(bool) {
|
|
|
- this.theme = bool;
|
|
|
- },
|
|
|
- },
|
|
|
+import Docxtemplater from "docxtemplater";
|
|
|
+import PizZip from "pizzip";
|
|
|
+import JSZipUtils from "jszip-utils";
|
|
|
+import html2canvas from "html2canvas";
|
|
|
+import jsPDF from "jspdf";
|
|
|
+import { saveAs } from "file-saver";
|
|
|
+import dayjs from "dayjs";
|
|
|
+
|
|
|
+import { getWpList, apiGeWarningReport } from "@/api/zhbj";
|
|
|
+
|
|
|
+import { ElMessage } from "element-plus";
|
|
|
+
|
|
|
+import jsonData from "./dataJson.json";
|
|
|
+export default {
|
|
|
+ name: "yhjyReport",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ stationList: [],
|
|
|
+ reportStation: "NX_FGS_HA_FDC_STA",
|
|
|
+ basrMsgArr: jsonData.basrMsgArr,
|
|
|
+ orderMsgArr: jsonData.orderMsgArr,
|
|
|
+ orderAnalysisArr: [],
|
|
|
+ orderResultArr: [],
|
|
|
+ maintenanceRecommendations: [],
|
|
|
+ windSituationReport: [],
|
|
|
+ orderTableColumn: jsonData.orderTableColumn,
|
|
|
+ orderTableColumn2: jsonData.orderTableColumn2,
|
|
|
+ conclusionMsg: {},
|
|
|
+ OperationName: "",
|
|
|
+ OperationGs: "",
|
|
|
+ OperationMonth: "",
|
|
|
+ fjsxList1: [],
|
|
|
+ fjsxList2: [],
|
|
|
+ theme: true,
|
|
|
+ loading: false,
|
|
|
+ reportParamDate: dayjs()
|
|
|
+ .subtract(1, "month")
|
|
|
+ .format("YYYY-MM-DD HH:mm:s"),
|
|
|
};
|
|
|
+ },
|
|
|
+
|
|
|
+ created() {
|
|
|
+ this.theme = this.$store.state.theme;
|
|
|
+ },
|
|
|
+
|
|
|
+ mounted() {
|
|
|
+ this.funGetStation();
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ /**场站 */
|
|
|
+ funGetStation() {
|
|
|
+ let that = this;
|
|
|
+ // this.renderReportPage({
|
|
|
+ // data: jsonData.reldata
|
|
|
+ // });
|
|
|
+ that.stationList = [];
|
|
|
+ that.reportStation = "";
|
|
|
+ getWpList().then((res) => {
|
|
|
+ if (res) {
|
|
|
+ that.stationList = res.data;
|
|
|
+ if (that.stationList.length) {
|
|
|
+ that.reportStation = that.stationList[0].id;
|
|
|
+ that.handleReportOp();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ async exportPDFop() {
|
|
|
+ this.loading = true;
|
|
|
+ try {
|
|
|
+ // 获取要转换为PDF的内容
|
|
|
+ const element = this.$refs.pdfContent;
|
|
|
+
|
|
|
+ // 保存当前滚动位置
|
|
|
+ const originalScrollTop = window.scrollY;
|
|
|
+
|
|
|
+ // 将页面滚动到顶部
|
|
|
+ window.scrollTo(0, 0);
|
|
|
+
|
|
|
+ // 设置元素的高度为内容的实际高度
|
|
|
+ const originalHeight = element.style.height;
|
|
|
+ const originalOverflow = element.style.overflow;
|
|
|
+ if (originalHeight) {
|
|
|
+ element.style.height = `${element.scrollHeight}px`;
|
|
|
+ }
|
|
|
+ if (originalOverflow) {
|
|
|
+ element.style.overflow = "hidden";
|
|
|
+ }
|
|
|
+
|
|
|
+ // 使用html2canvas将HTML内容转换为canvas
|
|
|
+ const canvas = await html2canvas(element, {
|
|
|
+ scale: 2, // 提高分辨率
|
|
|
+ logging: true, // 开启日志记录
|
|
|
+ useCORS: true, // 处理跨域图片
|
|
|
+ });
|
|
|
+
|
|
|
+ // 恢复原来的样式
|
|
|
+ element.style.height = originalHeight || "";
|
|
|
+ element.style.overflow = originalOverflow || "";
|
|
|
+
|
|
|
+ // 恢复滚动位置
|
|
|
+ window.scrollTo(0, originalScrollTop);
|
|
|
+
|
|
|
+ // 将canvas转换为Data URL
|
|
|
+ const imgData = canvas.toDataURL("image/png");
|
|
|
+
|
|
|
+ // 创建一个新的jsPDF实例
|
|
|
+ const doc = new jsPDF("p", "mm", "a4");
|
|
|
+
|
|
|
+ // 计算图片在PDF中的位置和大小
|
|
|
+ const imgProps = doc.getImageProperties(imgData);
|
|
|
+ const pdfWidth = doc.internal.pageSize.getWidth();
|
|
|
+ const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
|
|
|
+
|
|
|
+ // 计算每页的高度
|
|
|
+ const pageHeight = doc.internal.pageSize.getHeight();
|
|
|
+ let heightLeft = pdfHeight;
|
|
|
+
|
|
|
+ // 添加第一页
|
|
|
+ doc.addImage(imgData, "PNG", 0, 0, pdfWidth, pdfHeight);
|
|
|
+
|
|
|
+ // 添加后续页面
|
|
|
+ while (heightLeft > pageHeight) {
|
|
|
+ heightLeft -= pageHeight;
|
|
|
+ doc.addPage();
|
|
|
+ doc.addImage(
|
|
|
+ imgData,
|
|
|
+ "PNG",
|
|
|
+ 0,
|
|
|
+ -pdfHeight + heightLeft,
|
|
|
+ pdfWidth,
|
|
|
+ pdfHeight
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ // 保存PDF文件
|
|
|
+ doc.save("优化建议报告.pdf");
|
|
|
+ this.loading = false;
|
|
|
+ } catch (error) {
|
|
|
+ console.error("Error generating PDF:", error);
|
|
|
+ this.loading = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ exportWORD() {
|
|
|
+ httpRequest
|
|
|
+ .get(
|
|
|
+ `/WarningReport/report?time=${this.reportParamDate}&wpid=${this.reportStation}`
|
|
|
+ )
|
|
|
+ .then((tempRes) => {
|
|
|
+ this.getWordFn(tempRes);
|
|
|
+ })
|
|
|
+ .catch((e) => {
|
|
|
+ // this.getWordFn({
|
|
|
+ // data: jsonData.reldata,
|
|
|
+ // });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 导出word方法
|
|
|
+ getWordFn(tempRes) {
|
|
|
+ let temWordData = {
|
|
|
+ titleName: this.OperationName,
|
|
|
+ operationGs: this.OperationGs,
|
|
|
+ stationName: tempRes.data.stationid.aname,
|
|
|
+ windNumber: tempRes.data.stationid.jrwindQuantityLd,
|
|
|
+ zzjrl: tempRes.data.stationid.windCapacity,
|
|
|
+ reportTime: tempRes.data.reporttime,
|
|
|
+ fjsxList1: tempRes.data.xnwtls,
|
|
|
+ fjsxList2: [],
|
|
|
+ orderAnalysisArr: this.orderAnalysisArr,
|
|
|
+ orderResultArr: this.orderResultArr,
|
|
|
+ windSituationReportWord: [],
|
|
|
+ maintenanceRecommendationsWord: [],
|
|
|
+ conclusionResult: `本次分析针对${tempRes.data.stationid.aname}的风机发电能力下降及可靠性隐患进行了全面评估。通过实施短期和长期检修措施，预计将显著提高设备的发电效率和运行可靠性。`,
|
|
|
+ };
|
|
|
+
|
|
|
+ tempRes.data.kkxwtls.forEach((it) => {
|
|
|
+ for (const key in it) {
|
|
|
+ if (Object.prototype.hasOwnProperty.call(it, key)) {
|
|
|
+ const element = it[key];
|
|
|
+ if (element === null) {
|
|
|
+ it[key] = "-";
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ temWordData.fjsxList2 = tempRes.data.kkxwtls;
|
|
|
+
|
|
|
+ //4.风机情况说明
|
|
|
+ let qksmNum = 0;
|
|
|
+ for (const key in tempRes.data.qksm) {
|
|
|
+ if (Object.prototype.hasOwnProperty.call(tempRes.data.qksm, key)) {
|
|
|
+ const element = tempRes.data.qksm[key];
|
|
|
+ let eleArr = [];
|
|
|
+
|
|
|
+ element.forEach((it) => {
|
|
|
+ let eleObj = {
|
|
|
+ name: it.substring(0, it.indexOf("：")),
|
|
|
+ value: it.substring(it.indexOf("："), it.length),
|
|
|
+ // value: it.substring(it.indexOf("："), it.length)?.indexOf('\n') > -1 ? it
|
|
|
+ // .substring(it.indexOf("："), it.length).split('\n') : it.substring(it
|
|
|
+ // .indexOf("："), it.length),
|
|
|
+ };
|
|
|
+ eleArr.push(eleObj);
|
|
|
+ });
|
|
|
+ let obj = {
|
|
|
+ index: qksmNum++,
|
|
|
+ windName: key,
|
|
|
+ windValue: eleArr,
|
|
|
+ };
|
|
|
+ temWordData.windSituationReportWord.push(obj);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ //5.风机情况说明
|
|
|
+ let jxjyNum = 0;
|
|
|
+ for (const key in tempRes.data.jxjy) {
|
|
|
+ if (Object.prototype.hasOwnProperty.call(tempRes.data.jxjy, key)) {
|
|
|
+ const element = tempRes.data.jxjy[key];
|
|
|
+ let eleArr = [];
|
|
|
+ element.forEach((it) => {
|
|
|
+ let eleObj = {
|
|
|
+ name: it.substring(0, it.indexOf(":")),
|
|
|
+ value: it.substring(it.indexOf(":"), it.length),
|
|
|
+ };
|
|
|
+ eleArr.push(eleObj);
|
|
|
+ });
|
|
|
+ let obj = {
|
|
|
+ index: jxjyNum++,
|
|
|
+ windName: key,
|
|
|
+ windValue: eleArr,
|
|
|
+ };
|
|
|
+ temWordData.maintenanceRecommendationsWord.push(obj);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 读取并获得模板文件的二进制内容
|
|
|
+ JSZipUtils.getBinaryContent(
|
|
|
+ `./static/optimizationSuggestionsReport.docx`,
|
|
|
+ (error, content) => {
|
|
|
+ // 抛出异常
|
|
|
+ if (error) throw error;
|
|
|
+ // 创建一个JSZip实例，内容为模板的内容
|
|
|
+ let zip = new PizZip(content);
|
|
|
+ // 创建并加载docxtemplater实例对象
|
|
|
+ let doc = new Docxtemplater();
|
|
|
+ doc.loadZip(zip);
|
|
|
+ doc.setData(temWordData);
|
|
|
+ try {
|
|
|
+ // 用模板变量的值替换所有模板变量
|
|
|
+ doc.render();
|
|
|
+ } catch (error) {
|
|
|
+ // 抛出异常
|
|
|
+ let e = {
|
|
|
+ message: error.message,
|
|
|
+ name: error.name,
|
|
|
+ stack: error.stack,
|
|
|
+ properties: error.properties,
|
|
|
+ };
|
|
|
+ console.log(
|
|
|
+ JSON.stringify({
|
|
|
+ error: e,
|
|
|
+ })
|
|
|
+ );
|
|
|
+ throw error;
|
|
|
+ }
|
|
|
+ // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
|
|
|
+ let out = doc.getZip().generate({
|
|
|
+ type: "blob",
|
|
|
+ mimeType:
|
|
|
+ "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
|
|
|
+ });
|
|
|
+ // 将目标文件对象保存为目标类型的文件，并命名
|
|
|
+ saveAs(out, `${temWordData.titleName}.docx`);
|
|
|
+ }
|
|
|
+ );
|
|
|
+ },
|
|
|
+ handleReportOp() {
|
|
|
+ if (this.reportParamDate) {
|
|
|
+ this.OperationName = "";
|
|
|
+ this.OperationGs = "";
|
|
|
+ this.OperationMonth = "";
|
|
|
+ // this.basrMsgArr = [];
|
|
|
+ this.fjsxList1 = [];
|
|
|
+ this.fjsxList2 = [];
|
|
|
+ this.orderAnalysisArr = [];
|
|
|
+ this.orderResultArr = [];
|
|
|
+ this.windSituationReport = {};
|
|
|
+ this.maintenanceRecommendations = {};
|
|
|
+ this.conclusionMsg = "";
|
|
|
+
|
|
|
+ let params = {
|
|
|
+ reportParamDate: this.reportParamDate,
|
|
|
+ reportStation: this.reportStation,
|
|
|
+ };
|
|
|
+
|
|
|
+ apiGeWarningReport(params)
|
|
|
+ .then((res) => {
|
|
|
+ this.renderReportPage(res);
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ // this.renderReportPage({
|
|
|
+ // data: jsonData.reldata,
|
|
|
+ // });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ renderReportPage(res) {
|
|
|
+ this.OperationMonth = res.data.reporttime;
|
|
|
+ let date = this.OperationMonth.split("-");
|
|
|
+ this.OperationName =
|
|
|
+ date[0] +
|
|
|
+ "年" +
|
|
|
+ date[1] +
|
|
|
+ "月" +
|
|
|
+ res.data.stationid.aname +
|
|
|
+ "性能优化建议报告";
|
|
|
+ this.OperationGs = `本报告旨在对${res.data.stationid.aname}内的风机进行综合分析，以筛选出同时存在性能问题和可靠性隐患的风机，为后续的检修与优化提供依据。`;
|
|
|
+
|
|
|
+ this.basrMsgArr.forEach((it) => {
|
|
|
+ if (it.nameEn === "reportDate") {
|
|
|
+ it.value = date[0] + "年" + date[1] + "月";
|
|
|
+ } else {
|
|
|
+ it.value = res.data.stationid[it.nameEn];
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ this.orderMsgArr.forEach((it) => {
|
|
|
+ it.value = jsonData.orderMsg[it.nameEn];
|
|
|
+ });
|
|
|
+
|
|
|
+ this.fjsxList2 = res.data.kkxwtls;
|
|
|
+ // 3.1筛选结果
|
|
|
+ res.data.FilterResults.split("\n").forEach((ele) => {
|
|
|
+ let obj = {
|
|
|
+ windName: ele.split("：")[0],
|
|
|
+ value: ele.split("：")[1],
|
|
|
+ };
|
|
|
+ this.orderResultArr.push(obj);
|
|
|
+ });
|
|
|
+ // for (const key in res.data.FilterResults) {
|
|
|
+ // if (Object.prototype.hasOwnProperty.call(res.data.FilterResults, key)) {
|
|
|
+ // const element = res.data.FilterResults[key];
|
|
|
+ // let obj = {
|
|
|
+ // windName: key,
|
|
|
+ // value: element
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // 4风机情况说明
|
|
|
+ this.windSituationReport = res.data.qksm;
|
|
|
+ // 5检修建议
|
|
|
+ this.maintenanceRecommendations = res.data.jxjy;
|
|
|
+
|
|
|
+ this.conclusionMsg = `本次分析针对${res.data.stationid.aname}的风机发电能力下降及可靠性隐患进行了全面评估。通过实施短期和长期检修措施，预计将显著提高设备的发电效率和运行可靠性。`;
|
|
|
+ },
|
|
|
+ },
|
|
|
+
|
|
|
+ watch: {
|
|
|
+ "$store.state.theme"(bool) {
|
|
|
+ this.theme = bool;
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
- .optimizationSuggestions {
|
|
|
- height: 96%;
|
|
|
+.optimizationSuggestions {
|
|
|
+ height: 96%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-content: center;
|
|
|
+
|
|
|
+ .main_top {
|
|
|
+ height: 40px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .form-wrapper {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ margin: 10px 0 10px 20px;
|
|
|
+
|
|
|
+ .station {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #b3b3b3;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .search-input {
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .but {
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: flex-start;
|
|
|
+ flex-direction: row;
|
|
|
align-content: center;
|
|
|
-
|
|
|
- .main_top {
|
|
|
- height: 40px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .form-wrapper {
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- align-items: center;
|
|
|
- margin: 10px 0 10px 20px;
|
|
|
-
|
|
|
- .station {
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- align-items: center;
|
|
|
- font-size: 14px;
|
|
|
- font-family: Microsoft YaHei;
|
|
|
- font-weight: 400;
|
|
|
- color: #b3b3b3;
|
|
|
- margin-right: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .search-input {
|
|
|
- margin-left: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .but {
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- align-content: center;
|
|
|
- margin-left: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .buttons {
|
|
|
- background-color: rgba(5, 187, 76, 0.2);
|
|
|
- border: 1px solid #3b6c53;
|
|
|
- color: #b3b3b3;
|
|
|
- font-size: 14px;
|
|
|
-
|
|
|
- &:hover {
|
|
|
- background-color: rgba(5, 187, 76, 0.5);
|
|
|
- color: #ffffff;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ margin-left: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .buttons {
|
|
|
+ background-color: rgba(5, 187, 76, 0.2);
|
|
|
+ border: 1px solid #3b6c53;
|
|
|
+ color: #b3b3b3;
|
|
|
+ font-size: 14px;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background-color: rgba(5, 187, 76, 0.5);
|
|
|
+ color: #ffffff;
|
|
|
}
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .infoBox {
|
|
|
- height: calc(100% - 80px);
|
|
|
- overflow: scroll;
|
|
|
+ .infoBox {
|
|
|
+ height: calc(100% - 80px);
|
|
|
+ overflow: scroll;
|
|
|
|
|
|
- #pdfDom {
|
|
|
- margin: 20px;
|
|
|
- }
|
|
|
- }
|
|
|
+ #pdfDom {
|
|
|
+ margin: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- &.themeLight {
|
|
|
- .topPsty {
|
|
|
- color: #2778ff;
|
|
|
- background: #ffffff;
|
|
|
- }
|
|
|
- }
|
|
|
+ &.themeLight {
|
|
|
+ .topPsty {
|
|
|
+ color: #2778ff;
|
|
|
+ background: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- &.themeDark {
|
|
|
- .topPsty {
|
|
|
- color: #1c99ff;
|
|
|
- background: #1e2126;
|
|
|
- }
|
|
|
- }
|
|
|
+ &.themeDark {
|
|
|
+ .topPsty {
|
|
|
+ color: #1c99ff;
|
|
|
+ background: #1e2126;
|
|
|
}
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
|
|
<style lang="less">
|
|
|
- .el-overlay {
|
|
|
- .el-overlay-dialog {
|
|
|
- .reportDia {
|
|
|
- margin-top: 0 !important;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
+.el-overlay {
|
|
|
+ .el-overlay-dialog {
|
|
|
.reportDia {
|
|
|
- .repoerDateBox {
|
|
|
- width: calc(100% - 40px);
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
+ margin-top: 0 !important;
|
|
|
}
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.reportDia {
|
|
|
+ .repoerDateBox {
|
|
|
+ width: calc(100% - 40px);
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
