<template>
|
<!-- 性能曲线 -->
|
<div id="chartBox" style="width: 100%; height: 100%" class="performanceCurveBox">
|
<!-- 图表区域 -->
|
<div style="overflow: hidden; width: 100%" :style="'height:' + chartBoxHiehgt + 'px'">
|
<div class="tubiao">
|
<div style="width: 100%; height: calc(100% - 1px)" id="fanChart" ref="FeatCurveSvg"></div>
|
</div>
|
</div>
|
<div v-if="isFullScreen" class="fullscreen_style">
|
<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">
|
{{ $t('detailPage.exitFull.TR') }}
|
</span>
|
</a>
|
</div>
|
<div style="width: 100%; height: calc(100% - 0.4rem)" id="ChartFullScreen"></div>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { onMounted, ref, reactive, nextTick } from 'vue';
|
import $ from '@/assets/js/jquery-3.4.1.min';
|
import ChartDiagram from '@/components/chart/FanSpeedChartDiagram.js';
|
import UnitHelper from '@/utils/unit';
|
import ConstParas from '@/utils/constParas.js';
|
|
let state = reactive({
|
m_chartDiagram: null, //图表对象
|
|
UnitListQ: UnitHelper.Q_Value_List, //流量单位
|
UnitListH: UnitHelper.H_Value_List, //扬程单位
|
UnitListP: UnitHelper.P_Value_List, //功率单位
|
|
isFullScreen: false, //是否全屏
|
chartBoxHiehgt: 0, //图表盒子高度
|
|
coordinateBoxVisible: false, //设置坐标对话框的显/隐
|
|
m_chartDispSettingMenu: {
|
isShowQueryChartBtn: true, //是否显示图标上的查询按钮
|
|
isShowSubMenu: false, //下拉菜单的显示隐藏
|
acitveMenuId: '',
|
subMenus: [],
|
},
|
m_pumpName: '',
|
m_seriesID: 0,
|
m_pumpID: 0,
|
});
|
onMounted(() => {
|
nextTick(function () {
|
refreshWindowSize();
|
});
|
|
window.addEventListener(
|
'resize',
|
() => {
|
return (() => {
|
refreshWindowSize();
|
})();
|
},
|
false
|
);
|
});
|
//修改窗体尺寸
|
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;
|
}
|
const infoDv4VerticalLine = document.getElementById('infoDv4VerticalLine');
|
if (infoDv4VerticalLine) {
|
infoDv4VerticalLine.remove();
|
}
|
const fanChart = document.getElementById('fanChart');
|
if (fanChart) {
|
while (fanChart.firstChild) {
|
fanChart.removeChild(fanChart.firstChild);
|
}
|
}
|
|
this.chartBoxHiehgt = document.body.clientHeight - headerHeight - footerHeight - 75; //
|
if (this.m_chartDiagram) {
|
var diagramContentWidth = document.querySelector('#fanChart').clientWidth;
|
var diagramContentHiehgt = document.querySelector('#fanChart').clientHeight;
|
//console.log(diagramContentWidth, diagramContentHiehgt);
|
this.m_chartDiagram.Resize(diagramContentWidth, diagramContentHiehgt);
|
}
|
};
|
//导出性能曲线 //https://gitee.com/mirrors/saveSvgAsPng
|
const btnClickExportChart = () => {
|
return;
|
};
|
|
// 初始化获取 数据
|
const initFanInfoData = (langType, fanInfoData, cbDict, uiUserSetting) => {
|
if (fanInfoData == null) return;
|
|
this.m_pumpName = fanInfoData.BaseInfo.PumpName;
|
this.m_seriesID = fanInfoData.BaseInfo.SeriesID;
|
this.m_pumpID = fanInfoData.BaseInfo.PumpID;
|
|
var _this = this;
|
|
let subMenus = [
|
|
];
|
this.m_chartDispSettingMenu.subMenus = subMenus;
|
|
initChart(langType, fanInfoData, cbDict, uiUserSetting);
|
};
|
|
//点击"图表查询"
|
const btnClickChartQuery = () => {
|
//查询线的显/隐
|
if (this.m_chartDiagram != null) {
|
//console.log('查询线显示')
|
var isChartQueryStatus = this.m_chartDiagram.getQueryIndicatVertLineVisible();
|
isChartQueryStatus = !isChartQueryStatus;
|
this.m_chartDiagram.setQueryIndicatVertLineVisible(isChartQueryStatus);
|
this.$emit('cbChangeChartQueryStatus', isChartQueryStatus); //回调父窗体事件
|
}
|
};
|
//点击"图表设置"菜单 type=0(带子菜单的)
|
const btnClickChartDispSetChoiceGrp = (menuItem) => {
|
this.m_chartDispSettingMenu.acitveMenuId = menuItem.id;
|
};
|
//点击"图表设置"菜单 type=1(checkbox)
|
const btnClickChartDispSetCheck = (menuItem) => {
|
menuItem.value = menuItem.value == 0 ? 1 : 0;
|
this.m_chartDispSettingMenu.isShowSubMenu = false;
|
|
if (menuItem.id == 'dispCurveDispQP') {
|
this.m_chartDiagram.dispDispCurveQP(menuItem.value == 1 ? true : false);
|
} else if (menuItem.id == 'dispCurveDispQV') {
|
this.m_chartDiagram.dispDispCurveQV(menuItem.value == 1 ? true : false);
|
} else if (menuItem.id == 'dispNodePtText') {
|
this.m_chartDiagram.dispNodePtText(menuItem.value == 1 ? true : false);
|
}
|
};
|
//点击"图表设置"的 子菜单
|
const btnClickChartDispSetChoiceMenu = (menuItem, choiceItem) => {
|
this.m_chartDispSettingMenu.isShowSubMenu = false;
|
menuItem.choiceValue = choiceItem.value;
|
|
|
};
|
//初始化图表
|
const initChart = (langType, fanInfoData, cbDict, uiUserSetting) => {
|
let _this = this;
|
// console.log(fanInfoData, 404);
|
if (fanInfoData == null) {
|
return;
|
}
|
|
$('#fanChart').empty();
|
|
// console.log(document.body.clientHeight, document.documentElement.clientHeight)
|
var diagramContentWidth = document.querySelector('#fanChart').clientWidth;
|
var diagramContentHeight = document.querySelector('#fanChart').clientHeight;
|
|
var chart_diagram = new ChartDiagram();
|
//设置语言
|
chart_diagram.setLocalizationType(langType);
|
|
//console.log(fanInfoData.SettingInfo)
|
//设置单位
|
chart_diagram.setUserSetting(
|
uiUserSetting, //界面用户设置
|
fanInfoData.SettingInfo.SeriesUnitQ,
|
fanInfoData.SettingInfo.SeriesUnitH,
|
fanInfoData.SettingInfo.SeriesUnitP,
|
fanInfoData.SettingInfo.SeriesIsD2Meter
|
);
|
//设置容器
|
chart_diagram.setContainerDiv(
|
'fanChart', //Div名称
|
diagramContentWidth,
|
diagramContentHeight
|
);
|
//设置提示框Name
|
chart_diagram.setToolTipName('featCurveTip');
|
//查询曲线信息
|
chart_diagram.setChangeQueryDataCb(function (data) {
|
//console.log("setChangeQueryDataCb",data);
|
//_this.$emit("cbChangeChartQueryData", data); //回调父窗体事件
|
});
|
|
//全局配置
|
var chartStyle = window.pageConfig.ChartStyle;
|
|
//初始化
|
chart_diagram.initialChart(fanInfoData, chartStyle, cbDict);
|
|
_this.m_chartDiagram = chart_diagram;
|
};
|
|
//通过设计点选型刷新
|
const refreshByDp = (val) => {
|
if (this.m_chartDiagram == null) return;
|
this.m_chartDiagram.refreshByDp(val);
|
};
|
//根据流量计算功率
|
const calcPowerByFlow = (flow, unit) => {
|
if (this.m_chartDiagram == null) return;
|
|
return this.m_chartDiagram.calcPowerByFlow(flow, unit);
|
};
|
|
//根据流量计算效率
|
const calcEtaByFlow = (flow, unit) => {
|
if (this.m_chartDiagram == null) return;
|
|
return this.m_chartDiagram.calcEtaByFlow(flow, unit);
|
};
|
//修改了区域参数的流量(m3h单位下)
|
const refreshRegionByFlow = (flow_m3h, tag) => {
|
if (flow_m3h == null || tag == null) return;
|
if (this.m_chartDiagram == null) return;
|
|
return this.m_chartDiagram.refreshRegionByFlow(flow_m3h, tag);
|
};
|
|
const showCoordinateBox = () => {
|
//显示设置坐标对话框
|
this.coordinateBoxVisible = true;
|
};
|
// 设置坐标
|
const setCoordinate = () => {
|
// this.coordinateBoxVisible = false;
|
// console.log(this.coordinatePara, 429);
|
let yMax = Math.max(
|
//判断结束刻度是否超过Y轴最大刻度
|
this.coordinatePara.EndLineNoNPSH,
|
this.coordinatePara.EndLineNoE,
|
this.coordinatePara.EndLineNoP,
|
this.coordinatePara.EndLineNoH
|
);
|
let unit = this.coordinatePara.unitObj;
|
this.coordinatePara.GridNumberY = yMax > this.coordinatePara.GridNumberY ? yMax : this.coordinatePara.GridNumberY; //设置Y轴最大刻度
|
let coordinatePara = JSON.parse(JSON.stringify(this.coordinateParaOld)); //做新旧值比较
|
let coordinateParaUpdata = JSON.parse(JSON.stringify(this.coordinatePara)); //设置坐标信息数据 和设置坐标展示的数据区别开
|
let H = coordinatePara.CoordMaxH - this.coordinatePara.CoordMaxH;
|
|
H = UnitHelper.ConvertH(unit.H, UnitHelper.Unit.Default.H, H);
|
//扬程最小值换算
|
coordinateParaUpdata.CoordMinH = this.coordinatePara.CoordMinH = coordinateParaUpdata.CoordMinH - H;
|
//扬程间隔刻度换算
|
coordinateParaUpdata.CoordSpaceH = UnitHelper.ConvertH(unit.H, UnitHelper.Unit.Default.H, coordinateParaUpdata.CoordSpaceH);
|
//流量间隔刻度换算
|
coordinateParaUpdata.CoordSpaceQ = UnitHelper.ConvertQ(unit.Q, UnitHelper.Unit.Default.Q, coordinateParaUpdata.CoordSpaceQ);
|
let P = coordinatePara.CoordMaxP - this.coordinatePara.CoordMaxP;
|
P = UnitHelper.ConvertP(unit.P, UnitHelper.Unit.Default.P, P);
|
|
//功率最小值换算
|
coordinateParaUpdata.CoordMinP = this.coordinatePara.CoordMinP = this.coordinatePara.CoordMinP - P;
|
|
//功率间隔刻度换算
|
coordinateParaUpdata.CoordSpaceP = UnitHelper.ConvertP(unit.P, UnitHelper.Unit.Default.P, coordinateParaUpdata.CoordSpaceP);
|
|
this.coordinatePara.CoordMinNPSH = this.coordinatePara.CoordMinNPSH;
|
//更新图表坐标信息
|
this.m_chartDiagram.UpdateByCoordinate(coordinateParaUpdata);
|
//设置坐标后调用一次计算坐标函数 更新间隔刻度改变后最大最小值的变化
|
//this.calcCoordinate();
|
//把更改后的坐标信息赋值给老的坐标信息对象
|
this.coordinateParaOld = JSON.parse(JSON.stringify(this.coordinatePara));
|
};
|
//下载客户端
|
const downClientFile = () => {
|
let filePath = window.pageConfig.IndexPage.DanjiUrl;
|
if ((filePath = '')) {
|
return;
|
}
|
window.open(filePath, '_blank');
|
};
|
defineExpose({
|
initFanInfoData,
|
});
|
</script>
|
<style lang="scss">
|
.performanceCurveBox {
|
position: relative;
|
.fullscreen_style {
|
position: fixed;
|
left: 0;
|
top: 0;
|
right: 0;
|
bottom: 0;
|
background: #fff;
|
z-index: 9999;
|
}
|
.chartBar {
|
background-color: white;
|
border-bottom: 0.01rem solid #cecece;
|
height: 0.35rem;
|
line-height: 0.35rem;
|
.select_menu {
|
position: absolute;
|
top: 0.34rem;
|
left: 0.73rem;
|
display: flex;
|
background: #fff;
|
border: 0.01rem solid #e5e5e5;
|
.group_select_menu {
|
width: 1.75rem;
|
border-right: 0.01rem solid #e5e5e5;
|
ul {
|
width: 100%;
|
list-style: none;
|
margin: 0;
|
padding: 0.06rem 0;
|
.group_style {
|
cursor: pointer;
|
color: #909399;
|
display: flex;
|
align-items: center;
|
padding: 0 0.3rem 0 0.2rem;
|
height: 0.34rem;
|
line-height: 0.34rem;
|
outline: none;
|
.label_name {
|
flex: 1;
|
padding: 0 0.1rem;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
&:hover {
|
background: #f5f7fa;
|
color: #303133;
|
}
|
|
.node_style {
|
cursor: pointer;
|
color: #909399;
|
display: flex;
|
align-items: center;
|
padding: 0 0.3rem 0 0.2rem;
|
height: 0.34rem;
|
line-height: 0.34rem;
|
outline: none;
|
.label_name {
|
flex: 1;
|
padding: 0 0.1rem;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
&:hover {
|
background: #f5f7fa;
|
color: #303133;
|
}
|
}
|
}
|
.label_active {
|
color: #409eff !important;
|
font-weight: 700;
|
}
|
.none_active {
|
color: #909399;
|
font-weight: unset;
|
}
|
}
|
}
|
}
|
}
|
.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;
|
border-radius: unset !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;
|
}
|
}
|
}
|
}
|
}
|
.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: 0.2rem;
|
.setTitle {
|
font-size: 0.18rem;
|
position: absolute;
|
top: -0.15rem;
|
background-color: #fff;
|
padding: 0 0.05rem;
|
}
|
.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: 0.4rem;
|
padding: 0 0;
|
}
|
}
|
}
|
}
|
}
|
.tubiao {
|
height: 100%;
|
width: 100%;
|
}
|
}
|
</style>
|
