gongjiale
/
gangkou
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

✨ feat: 报告生成-厂界在线增加PDF下载功能

This commit is contained in:
LokerL 2024-10-29 17:06:15 +08:00
parent 31a9707d0a
commit 2346ffc7c1
1 changed files with 60 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

164
ruoyi-ui/src/views/reportGenerate/bound/index.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="app-container" id="html2canvas1">
<div class="app-container">
<el-row :gutter="10">
<el-col :span="6">
<dept-tree @deptChange="handleDeptChange" :showQuickGroup="true" />
@ -30,119 +30,76 @@
</el-row>
</el-col>
</el-row>
<!-- 数据标签 -->
<el-row style="padding: 10px">
<el-row
v-for="(group, index) in groupedDashboardTag"
:key="index"
:gutter="10"
style="margin-bottom: 10px"
>
<el-col
v-for="item in group"
:key="item.label"
:span="8"
style="display: flex; justify-content: center"
<div id="html2canvas1">
<!-- 数据标签 -->
<el-row style="padding: 10px">
<el-row
v-for="(group, index) in groupedDashboardTag"
:key="index"
:gutter="10"
style="margin-bottom: 10px"
>
<div class="card">
<div class="card-img">
<i :class="item.icon"></i>
</div>
<div class="card-content">
<div class="card-content__title">
<span>{{ item.label }}</span>
<el-col
v-for="item in group"
:key="item.label"
:span="8"
style="display: flex; justify-content: center"
>
<div class="card">
<div class="card-img">
<i :class="item.icon"></i>
</div>
<div class="card-content__value">
<span>{{ dashboardData[item.key] }}</span>
<div class="card-content">
<div class="card-content__title">
<span>{{ item.label }}</span>
</div>
<div class="card-content__value">
<span>{{ dashboardData[item.key] }}</span>
</div>
</div>
</div>
</div>
</el-col>
</el-col>
</el-row>
</el-row>
</el-row>
<!-- 数据表格 -->
<el-row>
<!-- 数据表格 -->
<el-row>
<el-table :data="tableData" style="width: 100%">
<el-table-column label="基本信息">
<el-table-column
prop="p"
label="归属企业">
</el-table-column>
<el-table-column
prop="sn"
label="设备编号">
</el-table-column>
<el-table-column
prop="address"
label="安装位置">
</el-table-column>
</el-table-column>
<el-table-column label="第一周期">
<el-table-column
prop="month1"
label="一月">
</el-table-column>
<el-table-column
prop="month2"
label="二月">
</el-table-column>
<el-table-column
prop="month3"
label="三月">
</el-table-column>
</el-table-column>
<el-table-column label="第二周期">
<el-table-column
prop="month4"
label="四月">
</el-table-column>
<el-table-column
prop="month5"
label="五月">
</el-table-column>
<el-table-column
prop="month6"
label="六月">
</el-table-column>
</el-table-column>
<el-table-column label="第三周期">
<el-table-column
prop="month7"
label="七月">
</el-table-column>
<el-table-column
prop="month8"
label="八月">
</el-table-column>
<el-table-column
prop="month9"
label="九月">
</el-table-column>
</el-table-column>
<el-table-column label="第四周期">
<el-table-column
prop="month10"
label="十月">
</el-table-column>
<el-table-column
prop="month11"
label="十一月">
</el-table-column>
<el-table-column
prop="month12"
label="十二月">
</el-table-column>
</el-table-column>
<el-table-column label="基本信息">
<el-table-column prop="p" label="归属企业"> </el-table-column>
<el-table-column prop="sn" label="设备编号"> </el-table-column>
<el-table-column prop="address" label="安装位置"> </el-table-column>
</el-table-column>
<el-table-column label="第一周期">
<el-table-column prop="month1" label="一月"> </el-table-column>
<el-table-column prop="month2" label="二月"> </el-table-column>
<el-table-column prop="month3" label="三月"> </el-table-column>
</el-table-column>
<el-table-column label="第二周期">
<el-table-column prop="month4" label="四月"> </el-table-column>
<el-table-column prop="month5" label="五月"> </el-table-column>
<el-table-column prop="month6" label="六月"> </el-table-column>
</el-table-column>
<el-table-column label="第三周期">
<el-table-column prop="month7" label="七月"> </el-table-column>
<el-table-column prop="month8" label="八月"> </el-table-column>
<el-table-column prop="month9" label="九月"> </el-table-column>
</el-table-column>
<el-table-column label="第四周期">
<el-table-column prop="month10" label="十月"> </el-table-column>
<el-table-column prop="month11" label="十一月"> </el-table-column>
<el-table-column prop="month12" label="十二月"> </el-table-column>
</el-table-column>
</el-table>
</el-row>
</el-row>
</div>
</div>
</template>
<script>
import moment from "moment";
import {getBoundDashboardData, getBoundTableData} from '@/api/report';
import { getBoundDashboardData, getBoundTableData } from "@/api/report";
import { downloadPDF } from "@/utils/pdf.js";
export default {
name: "report-generate-bound",
data() {
@ -201,7 +158,7 @@ export default {
month10: 10,
month11: 11,
month12: 12,
}
},
],
dashboardTag: [
{
@ -275,7 +232,6 @@ export default {
},
mounted() {
this.year = moment().format("YYYY");
},
computed: {
// 按3个为一组拆分的数据 [[], [], []]
@ -299,7 +255,7 @@ export default {
this.dept = dept;
},
generateReport() {
console.log(this.dept, this.year);
downloadPDF(document.querySelector("#html2canvas1"), "LDAR下载");
},
async handleSearch() {
if (!this.dept) {