<template>
|
<!-- 性能曲线 -->
|
<div id="chartBox" style="width: 100%; height: 100%" class="performanceCurveBox" v-loading="state.m_loadingPage">
|
<div class="chartBar">
|
<div class="zlb-tools-div" style="font-size: 0.13rem; float: left; font-weight: bold">
|
<a class="diagram btn default blue-stripe" v-if="state.isShowSearchParams">
|
<i class="iconfont iconsearch" style="font-size: 0.12rem"></i>
|
<span style="margin-left: 0.01rem">查询</span>
|
</a>
|
<a @click="exportImg" v-if="false" class="diagram btn default blue-stripe" style="margin-left: 0.05rem">
|
<i class="iconfont icondaochu" style="font-size: 0.12rem"></i>
|
<span style="margin-left: 0.01rem">{{ t("detailPage.curveExport.TR") }}</span>
|
</a>
|
<!-- <a v-if="true" class="diagram btn default blue-stripe" style="margin-left: 0.05rem" @click="outputChartToCAD">
|
<i class="iconfont icondaochu" style="font-size: 0.12rem"></i>
|
<span style="margin-left: 0.01rem">导出CAD</span>
|
</a> -->
|
<!-- 导出设置 -->
|
<el-dropdown placement="bottom">
|
<a class="diagram lxb_chart_btn default blue-stripe">
|
<i class="iconfont icondaochu1" style="font-size: 0.12rem"></i>
|
<span style="margin-left: 0.01rem">{{
|
t("detailPage.curveExport.TR")
|
}}</span>
|
</a>
|
<template #dropdown>
|
<el-dropdown-menu>
|
<el-dropdown-item @click="btnClickExportChart"><i class="iconfont iconshiwutupian"
|
style="font-size: 0.28rem"></i>{{ t("detailPage.picture.TR") }}</el-dropdown-item>
|
<el-dropdown-item @click="clickExportCAD"><i class="iconfont icontubiao_daoruCAD"
|
style="font-size: 0.28rem"></i>CAD</el-dropdown-item>
|
<el-dropdown-item @click="clickExportPDF" v-if="state.m_dispExportPDF"><i class="iconfont iconpdf"
|
style="font-size: 0.28rem"></i>PDF</el-dropdown-item>
|
</el-dropdown-menu>
|
</template>
|
</el-dropdown>
|
<a class="diagram btn default blue-stripe" style="margin-left: 0.05rem" v-if="false">
|
<i class="iconfont iconshuxing" style="font-size: 0.12rem"></i>
|
<span style="margin-left: 0.01rem">设置坐标</span>
|
</a>
|
<a class="diagram btn default blue-stripe" style="margin-left: 0.05rem" v-if="false">
|
<i class="iconfont iconshuxing" style="font-size: 0.12rem"></i>
|
<span style="margin-left: 0.01rem">设置单位</span>
|
</a>
|
<a class="diagram btn default blue-stripe" style="margin-left: 0.05rem" v-if="false">
|
<i class="iconfont iconfullscreen" style="font-size: 0.12rem"></i>
|
<span style="margin-left: 0.01rem">全屏</span>
|
</a>
|
</div>
|
</div>
|
|
<!-- 图表区域 -->
|
<div id="zlbChartContaiter" ref="FeatCurveSvg" style="overflow: hidden; width: 100%"
|
:style="'height:' + state.m_chartBoxHight + 'px'">
|
<div class="tubiao">
|
<div style="width: 100%; height: calc(100% - 0.1rem)" id="zlbChart"></div>
|
</div>
|
</div>
|
<div v-if="state.m_isFullScreen" style="
|
position: fixed; left: 0; top: 0;
|
right: 0; bottom: 0; background: #fff; z-index: 9999;
|
">
|
<div style="height: 0.4rem; line-height: 0.4rem; text-align: left">
|
<a class="diagram btn default blue-stripe" style="margin-left: 0.05rem">
|
<i class="iconfont iconfullscreen" style="font-size: 0.12rem"></i>
|
<span @click="exitFullScreen" style="margin-left: 0.01rem">退出全屏</span>
|
</a>
|
</div>
|
<div style="width: 100%; height: calc(100% - 0.4rem)" id="seriesChartFullScreen"></div>
|
</div>
|
<export-cad-dialog ref="exportCadDialogRef"></export-cad-dialog>
|
</div>
|
</template>
|
|
<script setup name="zlbchart">
|
import { reactive, onMounted, nextTick, ref, unref, onUnmounted, inject } from "vue";
|
import { ElMessage, ElPopover, ElInput, ElButton } from "element-plus";
|
import ZlpChartDiagram from "@/components/Chart/js/ZlpChartDiagram.js";
|
import ConstParas from "@/utils/constParas.js";
|
import waterMarkHelper from "@/utils/waterMarkHelper.js";
|
import html2canvas from "html2canvas"; //div内容转图片
|
import { useRoute, useRouter } from "vue-router";
|
import { useLogin } from "@/stores/useLogin";
|
import { useI18n } from "vue-i18n";
|
import ExportCadDialog from "./ExportCadDialog.vue";
|
import { CheckDownChartFile } from '@/api/detail'
|
const { t } = useI18n();
|
const userStore = useLogin();
|
const userInfo = userStore.getUserInfo();
|
const route = useRoute();
|
const router = useRouter();
|
const FeatCurveSvg = ref()
|
const exportCadDialogRef = ref()
|
const cbGetExportCADData = inject("cbGetExportCADData", {}); //默认获取的为空对象
|
let state = reactive({
|
isShowSearchParams: false, //是否显示图标上的查询按钮
|
m_chartDiagram: null, //svg对象
|
m_pumpName: "",
|
m_seriesID: 0,
|
m_pumpID: 0,
|
m_isFullScreen: false, //是否全屏
|
m_chartBoxHight: 0, //图表盒子高度
|
m_dispExportPDF: false,//是否显示导出PDF按钮
|
m_loadingPage: false
|
})
|
onMounted(() => {
|
const lxbChartConfig = window.pageConfig.PumpDetailPage.LxbChartConfig ?? null;
|
if (lxbChartConfig) {
|
state.m_dispExportPDF = lxbChartConfig.IsShowExportPDF ?? false;
|
}
|
nextTick(() => {
|
refreshWindowSize();
|
});
|
})
|
|
const refreshWindowSize = () => {
|
let headerHeight = 0;
|
let footerHeight = 0;
|
if (document.querySelector("#app header")) {
|
headerHeight = document.querySelector("#app header").clientHeight;
|
}
|
if (document.querySelector("#app footer")) {
|
footerHeight = document.querySelector("#app footer").clientHeight;
|
}
|
|
state.m_chartBoxHight =
|
document.body.clientHeight - headerHeight - footerHeight - 75; //
|
|
if (state.m_chartDiagram) {
|
//
|
var size = getDiagramSize();
|
state.m_chartDiagram.Resize(size.width, size.hiehgt);
|
}
|
}
|
// 初始化获取泵的数据
|
const initPumpInfoData = (langType, pumpInfoData, cbDict, uiUserSetting) => {
|
if (pumpInfoData == null) return;
|
// console.log(pumpInfoData, 276);
|
if (pumpInfoData.BaseInfo.PumpStyle != ConstParas.PumpStyle.ZLP) {
|
return;
|
}
|
|
state.m_pumpName = pumpInfoData.BaseInfo.PumpName;
|
state.m_seriesID = pumpInfoData.BaseInfo.SeriesID;
|
state.m_pumpID = pumpInfoData.BaseInfo.PumpID;
|
|
initChart(langType, pumpInfoData, cbDict, uiUserSetting);
|
}
|
|
const initChart = (langType, pumpInfoData, cbDict, uiUserSetting) => {
|
if (pumpInfoData == null) {
|
return;
|
}
|
document.getElementById("zlbChart").innerHTML = "";
|
var diagram_size = getDiagramSize();
|
let chart_diagram = new ZlpChartDiagram();
|
//设置语言
|
chart_diagram.setLocalizationType(langType);
|
|
//全局配置
|
var chartStyle = window.pageConfig.ChartStyle;
|
chart_diagram.setUserSetting(
|
uiUserSetting, //界面用户设置
|
pumpInfoData.SettingInfo.SeriesUnitQ,
|
pumpInfoData.SettingInfo.SeriesUnitH,
|
pumpInfoData.SettingInfo.SeriesUnitP
|
);
|
chart_diagram.setContainerDiv(
|
"zlbChart",
|
diagram_size.width,
|
diagram_size.height
|
);
|
chart_diagram.initialChart(pumpInfoData, chartStyle, cbDict); //绘制
|
state.m_chartDiagram = chart_diagram;
|
}
|
//
|
const updateConstantLine = (paras) => {
|
state.m_chartDiagram.updateConstantLine(paras);
|
}
|
//
|
const refreshByDp = (val) => {
|
if (state.m_chartDiagram == null) return;
|
state.m_chartDiagram.refreshByDp(val);
|
}
|
//导出性能曲线 https://gitee.com/mirrors/saveSvgAsPng
|
const btnClickExportChart = async () => {
|
state.m_loadingPage = true;
|
let checkStatus = await checkDownChartFile('PNG')
|
state.m_loadingPage = false;
|
if (!checkStatus) return;
|
html2canvas(FeatCurveSvg.value, { backgroundColor: "#fff" }).then(
|
(canvas) => {
|
let file = canvas.toDataURL("image/png");
|
const TextContent = state.m_pumpName;
|
const TextWaterMarkOpts = {
|
content: TextContent,
|
position: "right",
|
};
|
waterMarkHelper.addImage(
|
file,
|
null,
|
(base64Url) => {
|
downChartImageFile(base64Url);
|
},
|
TextWaterMarkOpts
|
);
|
}
|
);
|
};
|
// 导出CAD
|
const clickExportCAD = async () => {
|
state.m_loadingPage = true;
|
let checkStatus = await checkDownChartFile('PNG')
|
state.m_loadingPage = false;
|
if (!checkStatus) return;
|
let data = cbGetExportCADData();
|
// console.log(data, 455);
|
|
data.pageSetting = {
|
FileType: 3,
|
ZLBSettingByDispCurve: "",
|
};
|
exportCadDialogRef.value?.openDialog(data);
|
};
|
// 导出PDF
|
const clickExportPDF = async () => {
|
state.m_loadingPage = true;
|
let checkStatus = await checkDownChartFile('PNG')
|
state.m_loadingPage = false;
|
if (!checkStatus) return;
|
let data = cbGetExportCADData();
|
// let dispSettingByDispCurve = getDispSettingMenuValueById(
|
// "CurveBundleDispStyle"
|
// );
|
data.pageSetting = {
|
FileType: 0,
|
ZLBSettingByDispCurve: "",
|
};
|
// console.log(data, 455);
|
exportCadDialogRef.value?.openDialog(data);
|
};
|
|
// 检查导出曲线的权限
|
const checkDownChartFile = (fileSuffixType) => {
|
let FileSuffix = {
|
PNG: 4,
|
CAD: 3,
|
PDF: 0
|
}
|
let isLogin = checkLogin();
|
if (!isLogin) return false
|
let requestData = {
|
SeriesID: state.m_seriesID,
|
ProductID: state.m_pumpID,
|
FileType: 0,
|
FileSuffixType: FileSuffix[fileSuffixType]
|
};
|
return new Promise((resolve, reject) => {
|
CheckDownChartFile(requestData).then((res) => {
|
let result = res.data;
|
if (result.Code != 0) {
|
ElMessage.error(result.Message);
|
resolve(false);
|
}
|
resolve(true);
|
})
|
.catch((err) => {
|
reject(err)
|
console.log(err, 455);
|
});
|
})
|
};
|
const downChartImageFile = (filePath) => {
|
let link = document.createElement("a");
|
link.href = filePath; //下载链接
|
link.setAttribute(
|
"download",
|
`${state.m_pumpName}-${t("detailPage.performanceCurve.TR")}.png`
|
);
|
link.style.display = "none"; //a标签隐藏
|
document.body.appendChild(link);
|
link.click();
|
setTimeout(() => {
|
link.remove();
|
}, 500);
|
}
|
const checkLogin = () => {
|
//检查登陆
|
var uToken = userInfo.Token;
|
if (uToken == null || uToken == "") {
|
userStore.login(route.fullPath);
|
return false;
|
}
|
return true;
|
}
|
//获取图表尺寸
|
const getDiagramSize = () => {
|
var diagramContentWidth = document.querySelector("#zlbChart").clientWidth;
|
var diagramContentHeight =
|
document.querySelector("#zlbChart").clientHeight;
|
return {
|
width: diagramContentWidth,
|
height: diagramContentHeight,
|
};
|
}
|
const exitFullScreen = () => { }
|
|
|
|
defineExpose({
|
initPumpInfoData,
|
refreshByDp,
|
updateConstantLine
|
})
|
|
</script>
|
<style lang="scss">
|
.performanceCurveBox {
|
position: relative;
|
|
.chartBar {
|
background-color: white;
|
border-bottom: 0.01rem solid #cecece;
|
height: 0.35rem;
|
line-height: 0.35rem;
|
}
|
|
.el-dialog__header {
|
display: none;
|
}
|
|
.el-dialog--center .el-dialog__body {
|
padding: 0.25rem 0.25rem 0.15rem;
|
}
|
|
.el-dialog__footer {
|
padding: 0.05rem 0.05rem;
|
|
.el-button {
|
padding: 0.06rem 0.12rem;
|
min-height: 0.3rem;
|
}
|
}
|
|
.diagram {
|
cursor: pointer;
|
font-size: 0.12rem;
|
margin-top: 0;
|
margin-bottom: 0.03rem;
|
padding-top: 0.05rem;
|
height: 0.27rem;
|
|
&>span {
|
font-size: 0.12rem;
|
}
|
}
|
|
.btn {
|
border-width: 0;
|
padding: 0.07rem 0.14rem;
|
font-size: 0.12rem;
|
outline: none !important;
|
background-image: none !important;
|
filter: none;
|
border-radius: 0;
|
box-shadow: none;
|
text-shadow: none;
|
|
&.default {
|
color: #333333;
|
background-color: #e5e5e5;
|
|
&:hover {
|
background-color: #aaaaaa;
|
}
|
}
|
|
&.blue-stripe {
|
border-left: 0.03rem solid #4b8df8;
|
}
|
}
|
|
.rightFilterBox {
|
position: absolute;
|
right: 0rem;
|
top: 0rem;
|
width: auto;
|
background-color: white;
|
float: right;
|
|
.showChartInfoDiv {
|
width: 2rem;
|
display: block;
|
}
|
|
.boxHead {
|
height: 0.34rem;
|
border-left: none;
|
border-right: none;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
background-color: white;
|
border: 0.01rem solid transparent;
|
color: #3c763d;
|
border-color: #d6e9c6;
|
font-size: 0.14rem;
|
|
i {
|
font-size: 0.14rem;
|
}
|
}
|
|
.panel-heading {
|
background-color: #f5f5f5;
|
border-color: #ddd;
|
margin-bottom: 0.01rem;
|
|
.panel-title {
|
margin-top: 0;
|
padding: 0;
|
height: 0.23rem;
|
margin-bottom: 0;
|
font-size: 0.14rem;
|
background-color: #388cd4 !important;
|
color: white;
|
|
.right {
|
transform: rotate(-90deg);
|
transition: 0.2s;
|
}
|
|
.down {
|
transition: 0.2s;
|
transform: rotate(0deg);
|
}
|
}
|
|
.accordion-toggle {
|
padding: 0.1rem 0.15rem;
|
}
|
}
|
|
.panel-collapse {
|
height: auto;
|
|
.panel-body {
|
background-color: #545196 !important;
|
|
.el-checkbox {
|
color: #fff;
|
}
|
|
.el-checkbox,
|
.el-radio {
|
margin-right: 0.1rem;
|
}
|
|
.el-checkbox__label {
|
font-size: 0.12rem;
|
}
|
|
.el-checkbox__input.is-checked+.el-checkbox__label {
|
color: #fff;
|
font-size: 0.12rem;
|
}
|
|
.col-md-12 {
|
width: 100%;
|
margin-top: 0.03rem;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
.spectrumLeftParaLabelName {
|
line-height: 0.25rem;
|
margin-right: 0.05rem;
|
font-size: 0.12rem;
|
float: left;
|
width: 31%;
|
color: white;
|
background-color: #545196 !important;
|
}
|
|
.spectrumLeftParaLabelUnit {
|
line-height: 0.25rem;
|
margin-right: 0.05rem;
|
font-size: 0.12rem;
|
float: left;
|
width: 0.3rem;
|
color: white;
|
background-color: #545196 !important;
|
}
|
|
.el-input {
|
width: unset;
|
line-height: 0.3rem;
|
|
.el-input__inner {
|
height: 0.25rem;
|
line-height: 0.25rem;
|
width: 0.65rem;
|
text-align: right;
|
}
|
}
|
|
.pointShow {
|
.el-input__inner {
|
height: 0.25rem;
|
line-height: 0.25rem;
|
width: 100%;
|
text-align: center;
|
}
|
|
.el-input__prefix,
|
.el-input__suffix {
|
top: -0.07rem;
|
}
|
}
|
|
.chartInfoParaInput {
|
float: left;
|
line-height: 0.15rem;
|
width: 0.48rem !important;
|
text-align: right;
|
}
|
|
.form-control {
|
height: 0.08rem;
|
padding: 0.06rem 0.12rem;
|
font-size: 0.14rem;
|
font-weight: normal;
|
color: #333333;
|
background-color: white;
|
border: 0.01rem solid #b4afaf;
|
border-radius: 0;
|
box-shadow: none;
|
transition: border-color ease-in-out 0.15s,
|
box-shadow ease-in-out 0.15s;
|
}
|
}
|
}
|
}
|
}
|
|
.lxb_chart_btn {
|
border-width: 0;
|
padding: 0.07rem 0.14rem;
|
font-size: 0.12rem;
|
outline: none !important;
|
background-image: none !important;
|
border-radius: unset !important;
|
filter: none;
|
border-radius: 0;
|
box-shadow: none;
|
text-shadow: none;
|
height: 100%;
|
box-sizing: border-box;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
gap: 0.05rem;
|
|
&.default {
|
color: #333333;
|
background-color: #e5e5e5;
|
font-weight: 700;
|
|
&:hover {
|
background-color: #aaaaaa;
|
}
|
}
|
|
&.blue-stripe {
|
border-left: 0.03rem solid #002c66;
|
}
|
}
|
|
.searchbtn {
|
border-radius: 0;
|
border-width: 0;
|
padding: 0.02rem 0.14rem;
|
font-size: 0.14rem;
|
outline: none !important;
|
background-image: none !important;
|
filter: none;
|
box-shadow: none;
|
text-shadow: none;
|
display: inline-block;
|
font-weight: 400;
|
text-align: center;
|
vertical-align: middle;
|
cursor: pointer;
|
white-space: nowrap;
|
line-height: 0.2rem;
|
user-select: none;
|
margin-top: 0.08rem;
|
margin-left: 0.2rem;
|
height: 0.2rem;
|
margin-bottom: 0.02rem;
|
width: 0.6rem;
|
padding-top: 0.02rem;
|
border: 0.01rem solid #ccc;
|
}
|
|
.blue {
|
background-color: #6396c2 !important;
|
color: #fff;
|
}
|
|
.setBox {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
flex-direction: column;
|
|
.setGroup {
|
position: relative;
|
margin-bottom: 0.01rem !important;
|
padding: 0.05rem !important;
|
background-color: white;
|
border: 0.01rem solid transparent;
|
border-width: 0.01rem;
|
border-color: #bce8f1;
|
color: #31708f;
|
margin-top: 20px;
|
|
.setTitle {
|
font-size: 0.18rem;
|
position: absolute;
|
top: -15px;
|
background-color: #fff;
|
padding: 0 5px;
|
}
|
|
.set_Option {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
// margin-top: 0.1rem;
|
.grid-content {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
margin-top: 0.05rem;
|
|
label {
|
width: 1.5rem;
|
font-size: 0.12rem;
|
text-align: right;
|
}
|
|
.el-input__inner {
|
text-align: right;
|
height: 0.4rem;
|
line-height: 40px;
|
padding: 0 0;
|
}
|
}
|
}
|
}
|
}
|
|
.tubiao {
|
height: 100%;
|
width: 100%;
|
}
|
|
.zlb-tools-div {
|
font-size: 0.13rem;
|
font-weight: bold;
|
display: flex;
|
height: 100%;
|
padding: 0.04rem;
|
box-sizing: border-box;
|
gap: 0.05rem;
|
}
|
|
}
|
</style>
|
