Untitled
Anonymous
plain_text
01/21/2026 1:30 AM
50.4 KB
10
Indexable
<template>
<el-container style="min-height: 100vh">
<el-header><myHeader /></el-header>
<el-container style="min-height: 100vh">
<el-aside class="navMenu" width="180px">
<navMenu />
</el-aside>
<el-container>
<el-main class="Print">
<div class="aaaa" style="width: 230mm">
<el-button
style="position: fixed; top: 120px; right: 30px"
type="primary"
@click="printReport"
>
打印</el-button
>
<el-button
style="position: fixed; top: 200px; right: 30px"
type="primary"
@click="saveReport"
>
保存</el-button
>
<p />
<div class="aaaa" style="width: 230mm">
<div
class="print"
id="printPage1"
style="
background: #fff;
width: 230mm;
height: 297mm;
padding-top: 5mm;
"
>
<el-row>
<el-col :span="4" style="padding-left: 40px">
<img
class="the-logo"
src="@/assets/logo.png"
style="width: auto; height: 20mm"
v-if="printLogo == ''"
/>
<img
v-else
class="the-logo"
:src="printLogo"
style="width: auto; height: 20mm"
/>
</el-col>
<el-col :span="18">
<tr style="font-size: 12px; line-height: 0.5">
<p />
姓名：{{
report.userName
}}
<p />
出生日期：
{{
birthday
}}
<p />
报告生成时间：{{
generatedTime
}}
<p />
报告来源：{{
printSource
}}
</tr>
</el-col>
<el-col :span="2">
<!-- <p /> -->
<!-- <div align="center">1/{{ report.days.length + 3 }}</div> -->
</el-col>
</el-row>
<div class="el-divider el-divider--horizontal"></div>
<div style="padding: 0 10mm">
<tr style="font-size: 20px; line-height: 1.7">
患者档案
</tr>
<tr style="font-size: 18px; line-height: 1.5; color: #409eff">
基本信息
</tr>
<div style="font-size: 14px; line-height: 1.5">
<el-row>
<el-col :span="12">姓名：{{ report.userName }}</el-col>
<el-col :span="12">性别：{{ genderHelper() }}</el-col>
</el-row>
<el-row>
<el-col :span="12">出生日期：{{ birthday }}</el-col>
<el-col :span="12">年龄：{{ report.userAge }}</el-col>
</el-row>
<el-row>
<el-col :span="12"
>身高：{{ report.userHeight }} cm</el-col
>
<el-col :span="12"
>体重：{{ report.userWeight }} kg</el-col
>
</el-row>
<el-row>
<el-col :span="12"
>BMI：{{ report.userBmi }} kg/m<sup>2</sup></el-col
>
<el-col :span="12">证件编号：{{ report.userId }}</el-col>
</el-row>
<el-row>
<el-col :span="12">地址：{{ report.userAddress }}</el-col>
</el-row>
</div>
<br />
<tr style="font-size: 18px; line-height: 1.5; color: #409eff">
设备信息
</tr>
<div style="font-size: 14px; line-height: 1.5">
<el-row>
<el-col :span="12"
>设备型号：{{ report.deviceType }}</el-col
>
<el-col :span="12">序列号：{{ report.deviceId }}</el-col>
<el-col :span="12"
>设备模式：{{ report.deviceMode }}（{{
report.deviceGender
}}）</el-col
>
<el-col :span="12"
>湿化器：{{ report.deviceHumid }}</el-col
>
<el-col v-if="showTubeHeat" :span="12"
>加温管路：{{ report.deviceTubeHeat }}</el-col
>
<el-col :span="12"
>管道类型：{{ report.deviceTube }}</el-col
>
<el-col :span="12"
>面罩类型：{{ report.deviceMask }}</el-col
>
<el-col :span="12"
>压力释放：{{ report.deviceEpr }}</el-col
>
</el-row>
</div>
<br />
<tr style="font-size: 20px; line-height: 1.7">
数据统计
</tr>
<tr style="font-size: 18px; line-height: 1.5; color: #409eff">
压力
</tr>
<div style="font-size: 14px; line-height: 1.5">
<el-row>
<el-col :span="8"
>中位值：{{ report.dataStatistics.presMid }}</el-col
>
<el-col :span="8"
>95%：{{ report.dataStatistics.pres95 }}</el-col
>
<el-col :span="8"
>最大值：{{ report.dataStatistics.presMax }}</el-col
>
</el-row>
</div>
<br />
<tr style="font-size: 18px; line-height: 1.5; color: #409eff">
漏气量
</tr>
<div style="font-size: 14px; line-height: 1.5">
<el-row>
<el-col :span="8"
>中位值：{{ report.dataStatistics.leakMid }}</el-col
>
<el-col :span="8"
>95%：{{ report.dataStatistics.leak95 }}</el-col
>
<el-col :span="8"
>最大值：{{ report.dataStatistics.leakMax }}</el-col
>
</el-row>
</div>
<br />
<tr style="font-size: 18px; line-height: 1.5; color: #409eff">
呼吸事件
</tr>
<div style="font-size: 14px; line-height: 1.5">
<el-row>
<el-col :span="8"
>AI：{{ report.dataStatistics.ai }}</el-col
>
<el-col :span="8"
>HI：{{ report.dataStatistics.hi }}</el-col
>
<el-col :span="8"
>AHI：{{ report.dataStatistics.ahi }}</el-col
>
</el-row>
<el-row>
<el-col :span="8"
>OAI：{{ report.dataStatistics.oai }}</el-col
>
<el-col :span="8"
>CAI：{{ report.dataStatistics.cai }}</el-col
>
</el-row>
</div>
<br />
<tr style="font-size: 18px; line-height: 1.5; color: #409eff">
总使用情况
</tr>
<div style="font-size: 14px; line-height: 1.5">
<el-row>
<el-col :span="8">开始日期：{{ report.days[0] }}</el-col>
<el-col :span="8"
>结束日期：{{
report.days[report.days.length - 1]
}}</el-col
>
<el-col :span="8"
>总天数：{{
report.printLt4Day + report.printSt4Day
}}</el-col
>
<el-col :span="8"
>使用时长高于4小时天数：{{ report.printLt4Day }}</el-col
>
<el-col :span="8"
>使用时长低于4小时天数：{{ report.printSt4Day }}</el-col
>
<el-col :span="8"
>使用时长高于4小时比例：{{
report.printLt4Percentage
}}</el-col
>
<el-col :span="8"
>未使用天数：{{ report.printUnuseDay }}</el-col
>
<el-col :span="8"
>总小时数：{{
(report.printTotalHours / 3600).toFixed(1)
}}</el-col
>
<el-col :span="8"
>中位小时数：{{
(report.printMidHour / 3600).toFixed(1)
}}</el-col
>
<el-col :span="8"
>平均小时数：{{
(report.printAvgHour / 3600).toFixed(1)
}}</el-col
>
</el-row>
</div>
<br />
<tr style="font-size: 20px; line-height: 1.7">
其他信息
</tr>
<div style="font-size: 14px; line-height: 1.5">
<el-row>
<el-col :span="12"
>不良习惯：{{ report.userBadHabit }}</el-col
>
<el-col :span="12"
>家族遗传：{{ report.userFamilyDisease }}</el-col
>
</el-row>
<el-row>
<el-col :span="12"
>药物史：{{ report.userMedicine }}</el-col
>
<el-col :span="12"
>合并症： {{ report.userComplications }}</el-col
>
</el-row>
<el-row>
<el-col :span="12">备注： {{ report.otherInfo }}</el-col>
</el-row>
</div>
</div>
</div>
<div class="pagebreak">
<p />
</div>
<div
class="print"
id="printPage2"
style="
background: #fff;
width: 230mm;
height: 297mm;
padding-top: 5mm;
"
>
<el-row>
<el-col :span="4" style="padding-left: 40px">
<img
v-if="printLogo == ''"
class="the-logo"
src="@/assets/logo.png"
style="width: auto; height: 20mm"
/>
<img
v-else
class="the-logo"
:src="printLogo"
style="width: auto; height: 20mm"
/>
</el-col>
<el-col :span="18">
<tr style="font-size: 12px; line-height: 0.5">
<p />
姓名：{{
report.userName
}}
<p />
出生日期：
{{
birthday
}}
<p />
报告生成时间：{{
generatedTime
}}
<p />
报告来源：{{
printSource
}}
</tr>
</el-col>
<el-col :span="2">
<!-- <p /> -->
<!-- <div align="center">2/{{ report.days.length + 3 }}</div> -->
</el-col>
</el-row>
<div class="el-divider el-divider--horizontal"></div>
<el-row>
<el-col :span="6">
<el-form label-width="180px"></el-form>
<div class="row"></div>
</el-col>
<el-col style="width: 200mm; height: 260mm">
<v-chart
class="chart"
:option="cachedPage2Option"
autoresize
:init-options="{
renderer: 'canvas',
useDirtyRect: true,
}"
/>
</el-col>
</el-row>
</div>
<div class="pagebreak">
<p />
</div>
<div v-for="(item, index) in report.days" v-bind:key="item">
<div
class="print"
:id="item"
style="
background: #fff;
width: 230mm;
height: 297mm;
padding-top: 5mm;
height: 297mm;
"
>
<el-row>
<el-col :span="4" style="padding-left: 40px">
<img
class="the-logo"
src="@/assets/logo.png"
style="width: auto; height: 20mm"
v-if="printLogo == ''"
/>
<img
v-else
class="the-logo"
:src="printLogo"
style="width: auto; height: 20mm"
/>
</el-col>
<el-col :span="18">
<tr style="font-size: 12px; line-height: 0.5">
<p />
姓名：{{
report.userName
}}
<p />
出生日期：
{{
birthday
}}
<p />
报告生成时间：{{
generatedTime
}}
<p />
报告来源：{{
printSource
}}
</tr>
</el-col>
<el-col :span="2">
<!-- <p />
<div align="center">
{{ index + 3 }}/{{ report.days.length + 3 }}
</div> -->
</el-col>
</el-row>
<div class="el-divider el-divider--horizontal"></div>
<el-row>
<el-col :span="6">
<el-form label-width="180px"></el-form>
<div class="row"></div>
</el-col>
<el-col style="width: 200mm; height: 260mm">
<v-chart
class="chart"
:option="getOption(item)"
autoresize
:init-options="{
renderer: 'canvas',
useDirtyRect: true,
}"
/>
<div class="chart" id="myEcharts"></div>
</el-col>
</el-row>
</div>
<div class="pagebreak">
<p />
</div>
</div>
<div class="pagebreak">
<p />
</div>
<div v-for="(item, index) in settingsTableList" v-bind:key="item">
<div
class="print"
id="printPageSetting"
style="
background: #fff;
width: 230mm;
height: 297mm;
padding-top: 5mm;
"
>
<el-row>
<el-col :span="4" style="padding-left: 40px">
<img
class="the-logo"
src="@/assets/logo.png"
style="width: auto; height: 20mm"
v-if="printLogo == ''"
/>
<img
v-else
class="the-logo"
:src="printLogo"
style="width: auto; height: 20mm"
/>
</el-col>
<el-col :span="18">
<tr style="font-size: 12px; line-height: 0.5">
<p />
姓名：{{
report.userName
}}
<p />
出生日期：
{{
birthday
}}
<p />
报告生成时间：{{
generatedTime
}}
<p />
报告来源：{{
printSource
}}
</tr>
</el-col>
<el-col :span="2">
<!-- <p />
<div align="center">
{{ report.days.length + 3 }}/{{ report.days.length + 3 }}
</div> -->
</el-col>
</el-row>
<div class="el-divider el-divider--horizontal"></div>
<!-- Table for settings change -->
<div style="padding: 0 10mm">
<tr
style="font-size: 18px; line-height: 1.5; color: #409eff"
>
参数设置
</tr>
<el-table :data="item" style="width: 100%">
<el-table-column prop="time" label="设定时间" width="180">
</el-table-column>
<el-table-column prop="setting" label="变更参数">
<template #default="scope">
<span v-html="scope.row.setting"></span>
</template>
</el-table-column>
</el-table>
</div>
</div>
<div class="pagebreak">
<p />
</div>
</div>
</div>
<!-- 打印设置按钮 -->
<div style="margin-top: 30px; text-align: center">
<el-button @click="goToPrintSettings" style="margin: 20px 0">
打印设置
</el-button>
</div>
</div>
</el-main>
</el-container>
</el-container>
</el-container>
</template>
<script setup lang="ts">
import myHeader from "./myHeader.vue";
import navMenu from "./navMenu.vue";
import { inject, onMounted, reactive, computed } from "vue";
import { useRouter } from "vue-router";
import { Setting } from "@element-plus/icons-vue";
const report: any = inject("report");
const router = useRouter();
// 判断固件版本是否应该显示加温管路
function shouldShowTubeHeat(firmwareVersion: string): boolean {
if (!firmwareVersion) return false;
// 移除可能的 "V" 前缀并转换为小写进行比较
const normalizedVersion = firmwareVersion.replace(/^[vV]/, "").toLowerCase();
// V1.0 开头的不显示（包括 1.0.x）
if (normalizedVersion.startsWith("1.0")) {
return false;
}
// 1.1 开头的显示
if (normalizedVersion.startsWith("1.1")) {
return true;
}
// 其他版本默认显示（向后兼容）
return true;
}
// 计算是否显示加温管路
const showTubeHeat = computed(() => {
const firmwareVersion = report.otherInfo
? report.otherInfo.replace("固件版本：", "")
: "";
return shouldShowTubeHeat(firmwareVersion);
});
import * as echarts from "echarts";
import { jsPDF } from "jspdf";
import html2canvas from "html2canvas";
// import DataStatistics from "../widget/DataStatistics.vue";
import { ElLoading } from "element-plus";
import VChart, { THEME_KEY } from "vue-echarts";
import { ref, provide } from "vue";
import "echarts";
import { BrowserWindow } from "electron/main";
const Store = require("electron-store");
const store = new Store();
const printSource = store.get("printSource");
const printLogo = store.get("printLogo");
provide(THEME_KEY, "light");
// 缓存计算结果
const cachedPage2Option = computed(() => page2option());
const chartOptions = new Map();
function page2option() {
return {
color: ["#3e8aee", "#3e8aee", "#3e8aee", "#0021BB", "#ff1200", "#00a600"],
title: [
{
top: "0%",
right: "20",
text: "使用总览",
},
{
top: "0%",
left: "center",
text: "使用时长",
},
{
top: "25%",
left: "center",
text: "压力",
},
{
top: "50%",
left: "center",
text: "漏气量",
},
{
top: "75%",
left: "center",
text: "AHI",
},
],
animation: false,
silent: true, // 禁用所有交互
toolbox: {
show: false,
},
legend: {
// 图例
bottom: "5%",
left: "center",
data: [
// "压力（cmH2O）", "漏气量（L/min）",
"OAI",
"CAI",
"HI",
],
silent: true, // 禁用图例交互
},
// 移除 brush 配置以提高性能
// brush: {
// xAxisIndex: "all",
// brushLink: "all",
// outOfBrush: {
// colorAlpha: 0.3,
// },
// },
grid: [
{
left: "15%",
right: "7%",
top: "5%",
bottom: "80%",
},
{
left: "15%",
right: "7%",
top: "30%",
bottom: "55%",
},
{
left: "15%",
right: "7%",
top: "55%",
bottom: "30%",
},
{
left: "15%",
right: "7%",
top: "80%",
bottom: "10%",
},
],
xAxis: [
{
// name: "压力",
type: "category",
data: report.days,
scale: true,
axisLine: { onZero: false },
splitLine: { show: false },
splitNumber: 20,
min: "dataMin",
max: "dataMax",
silent: true, // 禁用坐标轴交互
},
{
// name: "漏气量",
type: "category",
gridIndex: 1,
data: report.days,
scale: true,
axisLine: { onZero: false },
splitLine: { show: false },
splitNumber: 20,
min: "dataMin",
max: "dataMax",
silent: true,
},
{
// name: "Ahi",
type: "category",
gridIndex: 2,
data: report.days,
scale: true,
axisLine: { onZero: false },
splitLine: { show: false },
splitNumber: 20,
min: "dataMin",
max: "dataMax",
silent: true,
},
{
// name: "Duration",
type: "category",
gridIndex: 3,
data: report.days,
scale: true,
axisLine: { onZero: false },
splitLine: { show: false },
splitNumber: 20,
min: "dataMin",
max: "dataMax",
silent: true,
},
],
yAxis: [
{
scale: true,
min: 0,
max: 10,
silent: true,
},
{
scale: true,
gridIndex: 1,
min: 0,
max: 30,
silent: true,
},
{
scale: true,
gridIndex: 2,
min: 0,
max: 40,
silent: true,
},
{
scale: true,
gridIndex: 3,
min: 0,
max: 20,
silent: true,
},
],
series: [
{
name: "使用时间（h/Day）",
type: "bar",
barMaxWidth: 15,
symbol: "none",
xAxisIndex: 0,
yAxisIndex: 0,
data: report.statDuration,
},
{
name: "压力（cmH2O）",
type: "bar",
barMaxWidth: 15,
symbol: "none",
xAxisIndex: 1,
yAxisIndex: 1,
data: report.statPres,
},
{
name: "漏气量（L/min）",
type: "bar",
barMaxWidth: 15,
symbol: "none",
xAxisIndex: 2,
yAxisIndex: 2,
data: report.statLeak,
},
{
name: "OAI",
type: "bar",
barMaxWidth: 15,
stack: "ahi",
symbol: "none",
xAxisIndex: 3,
yAxisIndex: 3,
data: report.statOai,
},
{
name: "CAI",
type: "bar",
barMaxWidth: 15,
stack: "ahi",
symbol: "none",
xAxisIndex: 3,
yAxisIndex: 3,
data: report.statCai,
},
{
name: "HI",
type: "bar",
stack: "ahi",
symbol: "none",
xAxisIndex: 3,
yAxisIndex: 3,
data: report.statHi,
},
],
};
}
function getOption(index: string) {
// 使用缓存避免重复计算
if (chartOptions.has(index)) {
return chartOptions.get(index);
}
console.log(index);
// MarkArea for Ramp
var markAreaData = [];
var timeData = report.dataDetail[index].time;
var rampData = report.dataDetail[index].ramp;
// 遍历 ramp 数据，寻找值为 1 的区间
var startIndex = null;
for (var i = 0; i < rampData.length; i++) {
if (rampData[i] === 1 && startIndex === null) {
// 记录区间开始
startIndex = i;
} else if (rampData[i] !== 1 && startIndex !== null) {
// 记录区间结束
markAreaData.push([
{ xAxis: timeData[startIndex] },
{ xAxis: timeData[i - 1] },
]);
startIndex = null;
}
}
// 如果最后一个区间持续到数据末尾
if (startIndex !== null) {
markAreaData.push([
{ xAxis: timeData[startIndex] },
{ xAxis: timeData[rampData.length - 1] },
]);
}
// MarkLine for points where both peak and peep are 0
var markLineData = [];
var peakData = report.dataDetail[index].peak;
var peepData = report.dataDetail[index].peep;
for (var i = 0; i < timeData.length; i++) {
if (peakData[i] === 0 && peepData[i] === 0) {
markLineData.push({
xAxis: timeData[i],
lineStyle: {
color: "#aaaaaa",
width: 1,
type: "dashed",
},
label: {
show: false,
},
});
}
}
const option = {
title: [
{
right: "20",
text: index,
},
{
top: "2%",
left: "center",
text: "压力",
},
{
top: "32%",
left: "center",
text: "潮气量",
},
{
top: "62%",
left: "center",
text: "漏气量",
},
{
top: "89%",
left: "center",
text: "AHI",
},
],
animation: false,
silent: true, // 禁用所有交互
toolbox: {
show: false,
},
legend: {
// 图例
bottom: 10,
left: "center",
data: [
// "压力（cmH2O）",
// "潮气量（mL）",
// "漏气量（L/min）",
"阻塞性呼吸暂停",
"中枢性呼吸暂停",
"低通气",
],
silent: true, // 禁用图例交互
},
// 移除 brush 配置以提高性能
// brush: {
// xAxisIndex: "all",
// brushLink: "all",
// outOfBrush: {
// colorAlpha: 0.3,
// },
// },
grid: [
{
left: "10%",
right: "5%",
top: "5%",
bottom: "75%",
},
{
left: "10%",
right: "5%",
top: "35%",
bottom: "45%",
},
{
left: "10%",
right: "5%",
top: "65%",
bottom: "15%",
},
{
left: "10%",
right: "5%",
top: "92%",
bottom: "5%",
},
],
xAxis: [
{
type: "category",
data: report.dataDetail[index].time,
scale: true,
axisLine: { onZero: false },
splitLine: { show: false },
splitNumber: 20,
min: "dataMin",
max: "dataMax",
silent: true,
},
{
type: "category",
gridIndex: 1,
data: report.dataDetail[index].time,
scale: true,
axisLine: { onZero: false },
splitLine: { show: false },
splitNumber: 20,
min: "dataMin",
max: "dataMax",
silent: true,
},
{
type: "category",
gridIndex: 2,
data: report.dataDetail[index].time,
scale: true,
axisLine: { onZero: false },
splitLine: { show: false },
splitNumber: 20,
min: "dataMin",
max: "dataMax",
silent: true,
},
{
type: "category",
gridIndex: 3,
data: report.dataDetail[index].time,
scale: true,
axisLine: { onZero: false },
splitLine: { show: false },
axisLabel: { show: false },
splitNumber: 20,
min: "dataMin",
max: "dataMax",
silent: true,
},
],
yAxis: [
{
scale: true,
min: 0,
max: 30,
silent: true,
},
{
scale: true,
gridIndex: 1,
min: 0,
max: 1200,
silent: true,
},
{
scale: true,
gridIndex: 2,
min: 0,
max: 100,
silent: true,
},
{
show: false,
gridIndex: 3,
min: 0,
max: 1,
silent: true,
},
],
// 移除 dataZoom 以提高性能
// dataZoom: [
// {
// show: false,
// gridIndex: 4,
// min: 0,
// max: 1,
// },
// ],
series: [
{
name: "Peak（cmH2O）",
type: "line",
lineStyle: { color: "#3e8aee", opacity: 0.75 },
symbol: "none",
xAxisIndex: 0,
yAxisIndex: 0,
data: report.dataDetail[index].peak,
markArea: {
itemStyle: {
color: "rgba(255, 100, 100, 0.3)", // 红色，带透明度
},
data: markAreaData,
},
markLine: {
silent: true,
symbol: "none",
lineStyle: {
color: "#ff0000",
width: 2,
type: "solid",
},
label: {
show: true,
position: "end",
formatter: "Peak=0&Peep=0",
fontSize: 10,
color: "#aaaaaa",
},
data: markLineData,
},
},
{
name: "Peep（cmH2O）",
type: "line",
lineStyle: { color: "#E75714", opacity: 0.75 },
symbol: "none",
xAxisIndex: 0,
yAxisIndex: 0,
data: report.dataDetail[index].peep,
},
{
name: "潮气量（mL）",
type: "line",
lineStyle: { color: "#3e8aee" },
symbol: "none",
xAxisIndex: 1,
yAxisIndex: 1,
data: report.dataDetail[index].VT,
markLine: {
silent: true,
symbol: "none",
lineStyle: {
color: "#aaaaaa",
width: 1,
type: "dashed",
},
label: {
show: false,
},
data: markLineData,
},
},
{
name: "漏气量（L/min）",
type: "line",
symbol: "none",
xAxisIndex: 2,
yAxisIndex: 2,
data: report.dataDetail[index].leakage,
markLine: {
silent: true,
symbol: "none",
lineStyle: {
color: "#aaaaaa",
width: 1,
type: "dashed",
},
label: {
show: false,
},
data: markLineData,
},
},
{
name: "阻塞性呼吸暂停",
type: "bar",
itemStyle: { color: "#0021BB" },
barMinWidth: 3,
stack: "Ahi",
symbol: "none",
xAxisIndex: 3,
yAxisIndex: 3,
data: report.dataDetail[index].oai,
},
{
name: "中枢性呼吸暂停",
type: "bar",
itemStyle: { color: "#ff1200" },
barMinWidth: 3,
stack: "Ahi",
symbol: "none",
xAxisIndex: 3,
yAxisIndex: 3,
data: report.dataDetail[index].cai,
},
{
name: "低通气",
type: "bar",
itemStyle: { color: "#00a600" },
barMinWidth: 3,
stack: "Ahi",
symbol: "none",
xAxisIndex: 3,
yAxisIndex: 3,
data: report.dataDetail[index].hi,
},
],
// 漏气量的颜色标注
visualMap: [
{
show: false,
seriesIndex: 3,
pieces: [
{
gt: 0,
lte: 30,
color: "#34A852", // 定义颜色
},
{
gt: 30,
lte: 40,
color: "#FABD05", // 定义颜色
},
{
gt: 40,
color: "#EA4336", // 定义颜色
},
],
},
],
};
// 缓存选项以避免重复计算
chartOptions.set(index, option);
return option;
}
// 预先计算所有图表配置以减少渲染时间
onMounted(() => {
// 预加载所有图表配置
if (report.days) {
report.days.forEach((day: string) => {
getOption(day);
});
}
});
const moment = require("moment");
let settingsTable = report.settings;
const chunkSize = 20;
let settingsTableList: any[] = [];
for (let i = 0; i < settingsTable.length; i += chunkSize) {
const chunk = settingsTable.slice(i, i + chunkSize);
settingsTableList.push(chunk);
}
let birthday = moment(report.userBirthday).format("YYYY年MM月DD日");
let generatedTime = moment(Date().toLocaleString()).format("YYYY年MM月DD日");
function genderHelper() {
let gender = report.userGender;
if (gender == "male") {
return "男";
}
if (gender == "female") {
return "女";
}
return "";
}
// async function saveReport() {
// const loading = ElLoading.service({ fullscreen: true });
// let pdf = await preparePdf();
// loading.close();
// pdf.save("print.pdf");
// }
// async function preparePdf() {
// let pdf = new jsPDF("p", "pt", "a4");
// const canvas1 = await html2canvas(document.getElementById("printPage1")!, {
// scale: 8,
// }).then((canvas) => {
// const imgBlob = canvas.toDataURL("image/jpeg", 1.0);
// const imgWidth = 651.97;
// const imgHeight = 841.89;
// pdf.addImage(imgBlob, "JPEG", 0, 0, imgWidth, imgHeight);
// console.log("add page 1");
// });
// const canvas2 = await html2canvas(document.getElementById("printPage2")!, {
// scale: 8,
// }).then((canvas) => {
// const imgBlob = canvas.toDataURL("image/jpeg", 1.0);
// const imgWidth = 651.97;
// const imgHeight = 841.89;
// pdf.addPage();
// pdf.addImage(imgBlob, "JPEG", 0, 0, imgWidth, imgHeight);
// console.log("add page 2");
// });
// for (let day of report.days) {
// let canvas3 = await html2canvas(document.getElementById(day)!, {
// scale: 8,
// }).then((canvas) => {
// const imgBlob = canvas.toDataURL("image/jpeg", 3.0);
// const imgWidth = 653.97;
// const imgHeight = 843.89;
// pdf.addPage();
// pdf.addImage(imgBlob, "JPEG", 0, 0, imgWidth, imgHeight);
// console.log(day);
// });
// }
// const canvas4 = await html2canvas(
// document.getElementById("printPageSetting")!,
// {
// scale: 8,
// }
// ).then((canvas) => {
// const imgBlob = canvas.toDataURL("image/jpeg", 1.0);
// const imgWidth = 651.97;
// const imgHeight = 841.89;
// pdf.addPage();
// pdf.addImage(imgBlob, "JPEG", 0, 0, imgWidth, imgHeight);
// console.log("add page 4");
// });
// return pdf;
// }
const { ipcRenderer } = require("electron");
async function saveReport() {
ipcRenderer.send("savePDF");
}
async function printReport() {
ipcRenderer.send("printReport");
}
function goToPrintSettings() {
router.push("/printSetting");
}
</script>
<style lang="less" scope>
.chart {
width: 90%;
height: 100%;
}
.print {
text-align: left;
}
.el-input {
width: 100%;
}
@media print {
.el-header {
display: none;
}
.el-aside {
display: none;
}
.el-message {
display: none !important;
}
.el-divider {
border-top: 1px solid gray;
}
.el-button {
display: none;
}
.aaaa * {
visibility: visible;
}
.aaaa {
position: absolute;
top: 0cm;
left: 0cm;
}
.print {
height: 297mm;
page-break-after: always;
page-break-inside: avoid;
}
.pagebreak {
display: none;
}
}
.Print {
background-color: #e9eef3;
color: #333;
text-align: center;
margin-top: 60px;
}
</style>
Editor is loading...
Leave a Comment