<template>
|
<!-- 性能曲线 -->
|
<div id="chartBox" v-loading="state.m_loadingPage" style="width: 100%; height: 100%" class="lxb_performanceCurveBox">
|
<div class="chartBar" v-if="false">
|
<div class="lxb-tools-div">
|
<a
|
ref="parameterQueryCtrl"
|
v-click-outside="onPQClickOutside"
|
class="diagram lxb_chart_btn default blue-stripe"
|
v-if="state.m_chartDispSettingMenu.isShowQueryChartBtn"
|
>
|
<i class="iconfont iconsearch" style="font-size: 0.12rem"></i>
|
<span style="margin-left: 0.01rem">
|
{{ t('detailPage.parameterQuery.TR') }}
|
</span>
|
</a>
|
<a ref="dispMenuCtrl" v-click-outside="onDispMenuClickOutside" class="diagram lxb_chart_btn default blue-stripe">
|
<i class="iconfont iconshebeisheshi" style="font-size: 0.12rem"></i>
|
<span style="margin-left: 0.01rem">{{ t('detailPage.displaySettings.TR') }}</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>
|
<!-- 参数查询设置菜单 -->
|
<el-popover
|
ref="PQ_popoverRef"
|
:virtual-ref="parameterQueryCtrl"
|
trigger="hover"
|
:show-arrow="false"
|
:offset="24"
|
virtual-triggering
|
popper-class="PQ_popover_style"
|
:hide-after="0"
|
>
|
<div class="select_menu" tabindex="1">
|
<div class="group_select_menu">
|
<ul>
|
<li
|
v-for="(menu_item, menu_index) in state.m_chartDispSettingMenu.chartQueryMenuOptions"
|
:key="menu_index"
|
style="position: relative"
|
>
|
<div
|
v-if="menu_item.type == 0"
|
@click="btnClickParamsQuerySetChoiceGrp(menu_item)"
|
class="group_style"
|
:class="state.m_chartDispSettingMenu.chartQueryMenuId == menu_item.id ? 'label_active' : 'none_active'"
|
>
|
<el-icon>
|
<ArrowRight />
|
</el-icon>
|
<span class="label_name">{{ menu_item.label }}</span>
|
</div>
|
<!-- 判断如果当前为check类型并且按钮为参数查询 -->
|
<template
|
v-if="
|
menu_item.type == 1 && menu_item.visible && (menu_item.id == 'paramsQuery1' || menu_item.id == 'paramsQuery2')
|
"
|
>
|
<el-popover placement="right" width="210" trigger="click" :teleported="false">
|
<div class="popover_cell">
|
<span class="label_name" style="width: 40%">{{ t('detailPage.parameter_s.TR') }}:</span>
|
<el-input size="small" style="width: 60%" v-model="state.m_currentParamsQueryValue"></el-input>
|
</div>
|
<div style="text-align: right; margin: 0; display: flex; justify-content: flex-end">
|
<el-button
|
style="min-width: 56px; min-height: 28px"
|
type="primary"
|
size="small"
|
@click="changeChartQueryValue(menu_item)"
|
>{{ t('detailPage.parameterDetermine.TR') }}</el-button
|
>
|
</div>
|
<template #reference>
|
<div class="group_style" :class="'none_active'" @click="clickMenuLabel(menu_item)">
|
<i class="icon-size"></i>
|
<span class="label_name">{{ menu_item.label }}</span>
|
</div>
|
</template>
|
</el-popover>
|
</template>
|
<!-- 判断当前是check类型菜单 -->
|
<div
|
v-else-if="menu_item.type == 1 && menu_item.visible"
|
@click="btnClickParamsQuerySetCheck(menu_item)"
|
class="group_style setting-menu-title"
|
:class="menu_item.value ? 'label_active' : 'none_active'"
|
>
|
<i class="icon-size iconfont" :class="menu_item.value == 1 ? 'iconselect_icon' : ''"></i>
|
<span class="label_name">{{ menu_item.label }}</span>
|
</div>
|
<ul
|
class="chart_disp_menu_style"
|
v-show="state.m_chartDispSettingMenu.chartQueryMenuId == menu_item.id && menu_item.type == 0"
|
>
|
<li
|
v-for="(choice_item, choice_index) in menu_item.choiceList"
|
@click="btnClickParamsQuerySetChoiceMenu(menu_item, choice_item)"
|
style="position: relative"
|
:key="choice_index"
|
class="node_style"
|
:class="menu_item.choiceValue == choice_item.value ? 'label_active' : 'none_active'"
|
>
|
<div v-if="choice_item.type == 'text'" style="cursor: pointer">
|
<span class="label_name">{{ choice_item.label }}</span>
|
<i
|
style="position: absolute; left: 0.32rem; top: 0.1rem"
|
:class="menu_item.choiceValue == choice_item.value ? 'iconfont iconselect_icon' : ''"
|
>
|
</i>
|
</div>
|
</li>
|
</ul>
|
</li>
|
</ul>
|
</div>
|
</div>
|
</el-popover>
|
<!-- 显示设置菜单 -->
|
<el-popover
|
ref="DispMenu_popoverRef"
|
:virtual-ref="dispMenuCtrl"
|
trigger="click"
|
:show-arrow="false"
|
:offset="24"
|
virtual-triggering
|
popper-class="DM_popover_style"
|
:hide-after="0"
|
>
|
<div class="select_menu" tabindex="1">
|
<div class="group_select_menu">
|
<ul class="setting-menu">
|
<li
|
v-for="(menu_item, menu_index) in state.m_chartDispSettingMenu.options"
|
:key="menu_index"
|
style="position: relative"
|
class="setting-menu-item"
|
>
|
<!-- 含有组 -->
|
<div
|
v-if="menu_item.type == 0"
|
:id="`group_${menu_item.id}`"
|
@click="btnClickChartDispSetChoiceGrp(menu_item)"
|
class="group_style setting-menu-title"
|
:class="setGroupItemClassName(menu_item)"
|
>
|
<span class="label_name">{{ menu_item.label }}</span>
|
<el-icon>
|
<ArrowRight />
|
</el-icon>
|
</div>
|
<!-- 不含有组 -->
|
<div
|
v-else-if="menu_item.type == 1"
|
@click="btnClickChartDispSetCheck(menu_item)"
|
class="group_style"
|
:class="menu_item.value ? 'label_active' : 'none_active'"
|
>
|
<span class="label_name">{{ menu_item.label }}</span>
|
<i class="icon-size iconfont" :class="menu_item.value == 1 ? 'iconselect_icon' : ''"></i>
|
</div>
|
|
<div class="choice_item_div_style">
|
<ul
|
class="chart_disp_menu_style setting-menu"
|
v-show="state.m_chartDispSettingMenu.acitveMenuId == menu_item.id && menu_item.type == 0"
|
>
|
<li
|
v-for="(choice_item, choice_index) in menu_item.choiceList"
|
style="position: relative"
|
:key="choice_index"
|
class="setting-menu-item node_style"
|
>
|
<div
|
@click.stop="btnClickChartDispSetChoiceMenu(menu_item, choice_item)"
|
v-if="choice_item.type == 'text'"
|
style="cursor: pointer"
|
class="group_style setting-menu-title"
|
:class="menu_item.choiceValue == choice_item.value ? 'label_active' : 'none_active'"
|
>
|
<i class="icon-size iconfont" :class="menu_item.choiceValue == choice_item.value ? 'iconselect_icon' : ''">
|
</i>
|
<span class="label_name">{{ choice_item.label }}</span>
|
</div>
|
<!-- 选择项类型为check -->
|
<div
|
@click.stop="btnClickChartDispSetChoiceMenu(menu_item, choice_item)"
|
v-if="choice_item.type == 'check'"
|
style="cursor: pointer"
|
class="group_style setting-menu-title"
|
:class="choice_item.value !== 0 ? 'label_active' : 'none_active'"
|
>
|
<i class="icon-size iconfont" :class="choice_item.value !== 0 ? 'iconselect_icon' : ''"> </i>
|
<span class="label_name">{{ choice_item.label }}</span>
|
</div>
|
<div
|
v-if="choice_item.type == 'input'"
|
style="display: flex; padding: 0px 10px; box-sizing: border-box"
|
class="setting-menu-title"
|
>
|
<i class="icon-size"></i>
|
<span class="label_name" style="width: 60%">{{ choice_item.label }}</span>
|
<el-input
|
size="small"
|
@change="changeChoiceValue(choice_item)"
|
style="min-width: 50px"
|
v-model="choice_item.value"
|
></el-input>
|
</div>
|
</li>
|
</ul>
|
</div>
|
</li>
|
</ul>
|
</div>
|
</div>
|
</el-popover>
|
</div>
|
</div>
|
<!-- 图表区域 -->
|
<div style="overflow: hidden; width: 100%; height: calc(100% - 0.36rem)">
|
<div class="tubiao">
|
<div style="width: 100%; height: calc(100% - 1px)" id="lxbChart" ref="FeatCurveSvg"></div>
|
</div>
|
</div>
|
<export-cad-dialog ref="exportCadDialogRef"></export-cad-dialog>
|
</div>
|
</template>
|
|
<script setup name="LXBChart">
|
import { reactive, onMounted, nextTick, ref, unref, onUnmounted, inject } from 'vue';
|
import { ElMessage, ElPopover, ElInput, ElButton, ClickOutside as vClickOutside } from 'element-plus';
|
import LxpChartDiagram from '@/components/Chart/js/LxpChartDiagram.js';
|
|
import UnitHelper from '@/utils/unit';
|
import ConstParas from '@/utils/constParas.js';
|
// import { chartConfigStore } from "/@/store/chartConfig.js";
|
import { useRoute, useRouter } from 'vue-router';
|
// import { useLogin } from "/@/store/login.js";
|
// import { useI18n } from "vue-i18n";
|
// import saveSvg from "save-svg-as-png"; //svg图标转图片-- 转不出水印
|
// import html2canvas from "html2canvas"; //div内容转图片
|
// import waterMarkHelper from "/@/utils/waterMarkHelper";
|
// import ExportCadDialog from "./ExportCadDialog.vue";
|
// import { CheckDownChartFile } from '/@/api/checkDown/index.js'
|
// const { t } = useI18n();
|
const emit = defineEmits(['cbChangeChartQueryStatus', 'cbChangeChartQueryData']);
|
const FeatCurveSvg = ref();
|
const parameterQueryCtrl = ref();
|
const PQ_popoverRef = ref();
|
|
const dispMenuCtrl = ref();
|
const DispMenu_popoverRef = ref();
|
|
// const chartConfig = chartConfigStore();
|
|
const exportCadDialogRef = ref();
|
|
// const userStore = useLogin();
|
// const userInfo = userStore.getUserInfo();
|
const route = useRoute();
|
const router = useRouter();
|
|
const cbGetExportCADData = inject('cbGetExportCADData', {}); //默认获取的为空对象
|
let state = reactive({
|
m_chartDiagram: null, //图表对象
|
m_dispExportPDF: false, //是否显示导出PDF
|
UnitListQ: UnitHelper.Q_Value_List, //流量单位
|
UnitListH: UnitHelper.H_Value_List, //扬程单位
|
UnitListP: UnitHelper.P_Value_List, //功率单位
|
|
m_isFullScreen: false, //是否全屏
|
m_chartBoxHight: 200, //图表盒子高度
|
|
m_coordinateBoxVisible: false, //设置坐标对话框的显/隐
|
|
m_chartDispSettingMenu: {
|
isShowQueryChartBtn: true, //是否显示图标上的查询按钮
|
|
isVisibleQueryMenu: false, //查询图表设置菜单
|
chartQueryMenuId: '',
|
acitveMenuId: '',
|
options: [],
|
chartQueryMenuOptions: [],
|
},
|
m_pumpName: '',
|
m_seriesID: 0,
|
m_pumpID: 0,
|
m_showParamsQueryDialog: false,
|
m_currentParamsQueryValue: '', //当前图表参数查询的参数
|
isSetChartDispSetChoiceGrpStyle: false, //是否设置了图表显示菜单的样式
|
m_loadingPage: false,
|
});
|
onMounted(() => {
|
// const lxbChartConfig = window.pageConfig.PumpDetailPage.LxbChartConfig ?? null;
|
// if (lxbChartConfig) {
|
// state.m_dispExportPDF = lxbChartConfig.IsShowExportPDF ?? false;
|
// }
|
nextTick(() => {
|
refreshWindowSize();
|
window.addEventListener('resize', refreshWindowSize);
|
});
|
});
|
//修改窗体尺寸
|
const refreshWindowSize = () => {
|
let headerHeight = 0;
|
let footerHeight = 0;
|
let totalHeight = 0;
|
let el = document.getElementById('lxbChart');
|
let parentEl = el.parentNode;
|
|
if (parentEl) {
|
totalHeight = parentEl.clientHeight;
|
}
|
|
state.m_chartBoxHight = totalHeight;
|
|
if (state.m_chartDiagram) {
|
const { width, height } = getDiagramSize();
|
state.m_chartDiagram.Resize(width, height);
|
}
|
};
|
const onPQClickOutside = () => {
|
unref(PQ_popoverRef).PQ_popoverRef?.delayHide?.();
|
};
|
const onDispMenuClickOutside = () => {
|
unref(DispMenu_popoverRef).DispMenu_popoverRef?.delayHide?.();
|
};
|
|
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('CAD');
|
state.m_loadingPage = false;
|
if (!checkStatus) return;
|
|
let data = cbGetExportCADData();
|
let dispSettingByDispCurve = getDispSettingMenuValueById('CurveBundleDispStyle');
|
data.pageSetting = {
|
FileType: 3,
|
LXBSettingByDispCurve: dispSettingByDispCurve + '',
|
};
|
exportCadDialogRef.value?.openDialog(data);
|
};
|
// 导出PDF
|
const clickExportPDF = async () => {
|
state.m_loadingPage = true;
|
let checkStatus = await checkDownChartFile('PDF');
|
state.m_loadingPage = false;
|
if (!checkStatus) return;
|
|
let data = cbGetExportCADData();
|
let dispSettingByDispCurve = getDispSettingMenuValueById('CurveBundleDispStyle');
|
data.pageSetting = {
|
FileType: 0,
|
LXBSettingByDispCurve: dispSettingByDispCurve + '',
|
};
|
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);
|
});
|
});
|
};
|
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 initPumpInfoData = (langType, pumpInfoData, cbDict, uiUserSetting) => {
|
if (pumpInfoData == null) return;
|
if (pumpInfoData.BaseInfo.PumpStyle != ConstParas.PumpStyle.LXP) {
|
return;
|
}
|
state.m_pumpName = pumpInfoData.BaseInfo.PumpName;
|
state.m_seriesID = pumpInfoData.BaseInfo.SeriesID;
|
state.m_pumpID = pumpInfoData.BaseInfo.PumpID;
|
|
initChart(langType, pumpInfoData, cbDict, uiUserSetting);
|
};
|
//点击"参数查询"菜单 type=0(带子菜单的)
|
const btnClickParamsQuerySetChoiceGrp = (menuItem) => {
|
if (state.m_chartDispSettingMenu.chartQueryMenuId == menuItem.id) {
|
state.m_chartDispSettingMenu.chartQueryMenuId = null;
|
} else {
|
state.m_chartDispSettingMenu.chartQueryMenuId = menuItem.id;
|
}
|
};
|
//点击"参数查询"菜单 type=1(checkbox)
|
const btnClickParamsQuerySetCheck = (menuItem) => {
|
state.m_chartDispSettingMenu.chartQueryMenuId = menuItem.id;
|
menuItem.value = menuItem.value == 0 ? 1 : 0;
|
let menuItemVisible = menuItem.value == 1 ? true : false;
|
|
let menuIDs = ['paramsQuery1', 'paramsQuery2'];
|
if (menuItem.id == 'chaxunquxian') {
|
state.m_chartDispSettingMenu.chartQueryMenuOptions.forEach((item) => {
|
if (menuIDs.includes(item.id)) {
|
item.visible = menuItemVisible;
|
}
|
});
|
//查询线的显/隐
|
if (state.m_chartDiagram != null) {
|
var isVisible = state.m_chartDiagram.getQueryIndicatVertLineVisible(1);
|
isVisible = !isVisible;
|
state.m_chartDiagram.setQueryIndicatVertLineVisible(isVisible, 1);
|
if (isVisible == false) {
|
state.m_chartDiagram.setQueryIndicatVertLineVisible(isVisible, 2);
|
}
|
state.m_chartDispSettingMenu.isVisibleQueryMenu = false;
|
|
emit('cbChangeChartQueryStatus', isVisible); //回调父窗体事件
|
}
|
}
|
if (menuIDs.includes(menuItem.id)) {
|
state.m_showParamsQueryDialog = true;
|
}
|
};
|
//点击"参数查询"的 子菜单
|
const btnClickParamsQuerySetChoiceMenu = (menuItem, choiceItem) => {
|
menuItem.choiceValue = choiceItem.value;
|
};
|
|
// 点击菜单名称
|
const clickMenuLabel = (menuItem) => {
|
state.m_currentParamsQueryValue = menuItem.value;
|
|
// let option = state.m_chartDispSettingMenu.chartQueryMenuOptions
|
// option.forEach((item) => {
|
// if (item.hasOwnProperty('visiblePop')) {
|
// menuItem.visiblePop = false
|
// }
|
// if (item.id == menuItem.id) {
|
// menuItem.visiblePop = true
|
// }
|
// })
|
};
|
|
//获取当前"参数查询"输入的参数
|
const changeChartQueryValue = (menuItem) => {
|
if (state.m_currentParamsQueryValue == '' || state.m_currentParamsQueryValue == null) return;
|
//console.log(menuItem);
|
|
var flow = parseFloat(state.m_currentParamsQueryValue);
|
var m3h = state.m_chartDiagram.transFlowToM3H(flow);
|
|
let menuID = menuItem.id;
|
//menuItem.value = menuItem.value == 0 ? 1 : 0;
|
if ('paramsQuery1' == menuID) {
|
menuItem.value = m3h;
|
state.m_showParamsQueryDialog = false;
|
state.m_chartDiagram.setQueryIndicatValue(m3h, 1);
|
state.m_chartDispSettingMenu.isVisibleQueryMenu = false;
|
} else if ('paramsQuery2' == menuID) {
|
menuItem.value = m3h;
|
state.m_showParamsQueryDialog = false;
|
state.m_chartDiagram.setQueryIndicatValue(m3h, 2);
|
}
|
};
|
|
//点击"图表设置"菜单 type=0(带子菜单的)
|
const btnClickChartDispSetChoiceGrp = (menuItem) => {
|
if (menuItem.disabled) return;
|
if (!state.isSetChartDispSetChoiceGrpStyle) {
|
setChartDispSetChoiceGrpStyle(menuItem.id);
|
state.isSetChartDispSetChoiceGrpStyle = true;
|
}
|
if (state.m_chartDispSettingMenu.acitveMenuId == menuItem.id) {
|
state.m_chartDispSettingMenu.acitveMenuId = null;
|
} else {
|
state.m_chartDispSettingMenu.acitveMenuId = menuItem.id;
|
}
|
};
|
//点击"图表设置"菜单 type=1(checkbox)
|
const btnClickChartDispSetCheck = (menuItem) => {
|
state.m_chartDispSettingMenu.acitveMenuId = menuItem.id;
|
menuItem.value = menuItem.value == 0 ? 1 : 0;
|
};
|
//点击"图表设置"的 子菜单
|
const btnClickChartDispSetChoiceMenu = (menuItem, choiceItem) => {
|
if (menuItem.id == 'euqipcurvedisp') {
|
//装置曲线
|
if (choiceItem.type == 'check') {
|
let visibleEquipCurve = choiceItem.value == 1 ? false : true;
|
choiceItem.value = choiceItem.value == 1 ? 0 : 1;
|
state.m_chartDiagram.setEquipCurveVisible(visibleEquipCurve);
|
}
|
chartConfig.IsDispEquipCurve(choiceItem.value);
|
}
|
|
if (menuItem.id == 'isMonorColor') {
|
chartConfig.IsMonorColor(choiceItem.value);
|
var isMonorColor = choiceItem.value == 1 ? true : false;
|
state.m_chartDiagram.setMonorColor(isMonorColor);
|
}
|
if (menuItem.id == 'isDispSpectrum') {
|
chartConfig.IsDispSpectrum(choiceItem.value);
|
var isDisp = choiceItem.value == 1 ? true : false;
|
state.m_chartDiagram.setSpectrumDisp(isDisp);
|
}
|
// 工作曲线显示设置
|
if (menuItem.id == 'CurveBundleDispStyle') {
|
state.m_chartDiagram.setCurveBundleDispStyle(choiceItem.value);
|
state.m_chartDispSettingMenu.isVisibleCombox = false;
|
// 仅显示工作曲线
|
if (choiceItem.value == 0) {
|
setDisabledByMenuItemId('isDispSpectrum', true);
|
setDisabledByMenuItemId('menuDispLabelD2', true);
|
}
|
// 设置显示最大最小工作曲线
|
else if (choiceItem.value == 1) {
|
setDisabledByMenuItemId('isDispSpectrum', false);
|
setDisabledByMenuItemId('menuDispLabelD2', true);
|
}
|
// 设置显示所有曲线
|
else if (choiceItem.value == 2) {
|
setDisabledByMenuItemId('isDispSpectrum', false);
|
setDisabledByMenuItemId('menuDispLabelD2', false);
|
}
|
}
|
// 叶轮外径设置
|
if (menuItem.id == 'menuDispLabelD2') {
|
if (choiceItem.type == 'check') {
|
// 多彩
|
if (choiceItem.tag == 'multiColorCurve') {
|
if (choiceItem.value == 0) {
|
choiceItem.value = 1;
|
state.m_chartDiagram.setCurveMultiColor(true);
|
} else {
|
choiceItem.value = 0;
|
state.m_chartDiagram.setCurveMultiColor(false);
|
}
|
}
|
// 显示/隐藏面板
|
if (choiceItem.tag == 'disCurveParasPanel') {
|
if (choiceItem.value == 0) {
|
choiceItem.value = 1;
|
state.m_chartDiagram.setCurveParasPanelDisp(true);
|
} else {
|
choiceItem.value = 0;
|
state.m_chartDiagram.setCurveParasPanelDisp(false);
|
}
|
}
|
}
|
}
|
// 设计点显示（暂时注释）
|
// if (menuItem.id == "dispDesignPoint") {
|
// chartConfig.IsDispDesignPoint(choiceItem.value);
|
|
// state.m_chartDiagram.setDesignPointDisp(choiceItem.value);
|
// }
|
// 设计点样式
|
if (menuItem.id == 'designPointStyle') {
|
if (choiceItem.value == 1) {
|
chartConfig.IsDispDesignPoint(0);
|
state.m_chartDiagram.setDesignPointDisp(0);
|
menuItem.choiceValue = choiceItem.value;
|
return;
|
}
|
chartConfig.IsDispDesignPoint(1);
|
state.m_chartDiagram.setDesignPointDisp(1);
|
chartConfig.DesignPointStyle(choiceItem.value);
|
state.m_chartDiagram.setDesignPointDispType(choiceItem.value);
|
}
|
if (choiceItem.type == 'text') {
|
menuItem.choiceValue = choiceItem.value;
|
}
|
};
|
|
// 监听"图表设置"的 子菜单输入框输入的值
|
const changeChoiceValue = (item) => {
|
if (item.tag == 'EuqipmentZeroH') {
|
if (item.value != '') state.m_chartDiagram.setEquipCurveZeroH(parseFloat(item.value));
|
}
|
};
|
|
//获取图表尺寸
|
const getDiagramSize = () => {
|
let chartBoxElement = document.getElementById('chartBox');
|
let parentElement = chartBoxElement.parentElement;
|
const diagramContentWidth = parentElement.clientWidth;
|
const diagramContentHeight = parentElement.clientHeight - 36;
|
return {
|
width: 1200,
|
height: 750 - 36,
|
};
|
};
|
//获取图表显示设置 菜单
|
const getChartDispMenuById = (id) => {
|
var options = state.m_chartDispSettingMenu.options;
|
for (var i = 0; i < options.length; i++) {
|
if (options[i].id == id) return options[i];
|
}
|
return null;
|
};
|
|
//初始化图表
|
const initChart = (langType, pumpInfoData, cbDict, uiUserSetting) => {
|
if (pumpInfoData == null) {
|
return;
|
}
|
|
document.getElementById('lxbChart').innerHTML = '';
|
var diagram_size = getDiagramSize();
|
var chart_diagram = new LxpChartDiagram();
|
//设置语言
|
chart_diagram.setLocalizationType(langType);
|
|
//设置单位
|
// chart_diagram.setUserSetting(
|
// uiUserSetting, //界面用户设置
|
// pumpInfoData.SettingInfo.SeriesUnitQ,
|
// pumpInfoData.SettingInfo.SeriesUnitH,
|
// pumpInfoData.SettingInfo.SeriesUnitP,
|
// pumpInfoData.SettingInfo.SeriesIsD2Meter
|
// );
|
//设置容器
|
chart_diagram.setContainerDiv(
|
'lxbChart', //Div名称
|
diagram_size.width,
|
diagram_size.height
|
);
|
//设置提示框Name
|
chart_diagram.setToolTipName('featCurveTip');
|
//查询曲线信息
|
chart_diagram.setChangeQueryDataCb(function (data) {
|
emit('cbChangeChartQueryData', data); //回调父窗体事件
|
});
|
|
//全局配置
|
var chartStyle = {
|
IsMonoColor: false,
|
IsDispSpectrum: true,
|
IsOnlyDispWrkCurve: false,
|
ColorH: '#6396C2',
|
ColorE: '#a90d41',
|
ColorP: '#e20df2',
|
ColorNPSH: '#8e870e',
|
ColorEquipment: '#013317',
|
ColorEqualParaCurvesE: '#402db7',
|
ColorCurveLabel: '#28004D',
|
BlodRegionCurveWidth: 3,
|
};
|
|
|
//初始化
|
chart_diagram.initialChart(pumpInfoData, chartStyle, cbDict);
|
|
state.m_chartDiagram = chart_diagram;
|
};
|
|
//获取装置曲线信息(报告会用)
|
const getEquipCurveInfo = () => {
|
return state.m_chartDiagram.getEquipCurveInfo();
|
};
|
|
const getChartDispStyle = () => {
|
return state.m_chartDiagram.getChartDispStyle();
|
};
|
|
//
|
const refreshByDp = (val) => {
|
if (state.m_chartDiagram == null) return;
|
state.m_chartDiagram.refreshByDp(val);
|
};
|
|
//根据流量计算功率
|
const calcPowerByFlow = (flow, unit) => {
|
if (state.m_chartDiagram == null) return;
|
return state.m_chartDiagram.calcPowerByFlow(flow, unit);
|
};
|
|
//根据流量计算效率
|
const calcEtaByFlow = (flow, unit) => {
|
if (state.m_chartDiagram == null) return;
|
return state.m_chartDiagram.calcEtaByFlow(flow, unit);
|
};
|
|
//修改了区域参数的流量(m3h单位下)
|
const refreshRegionByFlow = (flow_m3h, tag) => {
|
if (flow_m3h == null || tag == null) return;
|
if (state.m_chartDiagram == null) return;
|
return state.m_chartDiagram.refreshRegionByFlow(flow_m3h, tag);
|
};
|
|
//获取装置曲线 ---净扬程值
|
const getEquipCurveZeroH = () => {
|
let EquipCurveZeroH = 0;
|
state.m_chartDispSettingMenu.options.forEach((option) => {
|
if (option.id == 'euqipcurvedisp') {
|
option.choiceList.forEach((choice) => {
|
if (choice.tag == 'EuqipmentZeroH') {
|
EquipCurveZeroH = choice.value;
|
}
|
});
|
}
|
});
|
return EquipCurveZeroH;
|
};
|
|
//退出全屏
|
const exitFullScreen = () => {
|
state.m_isFullScreen = false;
|
};
|
|
const checkLogin = () => {
|
//检查登陆
|
var uToken = userInfo.Token;
|
if (uToken == null || uToken == '') {
|
userStore.login(route.fullPath);
|
return false;
|
}
|
return true;
|
};
|
// 根据显示设置菜单id获取当前设置的值
|
const getDispSettingMenuValueById = (id) => {
|
let choiceValue = '1';
|
state.m_chartDispSettingMenu.options.forEach((item) => {
|
if (item.id == id) {
|
choiceValue = item.choiceValue;
|
}
|
});
|
return choiceValue;
|
};
|
// 根据菜单ID设置菜单是否可用
|
const setDisabledByMenuItemId = (id, disabled) => {
|
let options = state.m_chartDispSettingMenu.options;
|
|
options.forEach((option) => {
|
if (option.id == id) {
|
option.disabled = disabled;
|
}
|
});
|
};
|
const setGroupItemClassName = (item) => {
|
if (item.disabled) {
|
return 'is-disabled';
|
}
|
return state.m_chartDispSettingMenu.acitveMenuId == item.id ? 'label_active' : 'none_active';
|
};
|
// 设置图表菜单配置样式
|
const setChartDispSetChoiceGrpStyle = (elID) => {
|
let groupEl = document.getElementById(`group_${elID}`);
|
let groupWidth = groupEl.clientWidth + 20;
|
let groupChioceEl = document.getElementsByClassName('choice_item_div_style');
|
for (let i = 0; i < groupChioceEl.length; i++) {
|
let element = groupChioceEl[i];
|
element.style.left = groupWidth + 'px';
|
}
|
};
|
const cbDispSettingMenuValueById = () => {
|
return getDispSettingMenuValueById('CurveBundleDispStyle');
|
};
|
defineExpose({
|
initPumpInfoData,
|
getDiagramSize,
|
getEquipCurveInfo,
|
getEquipCurveZeroH,
|
getChartDispStyle,
|
calcPowerByFlow,
|
calcEtaByFlow,
|
refreshByDp,
|
refreshRegionByFlow,
|
cbDispSettingMenuValueById,
|
});
|
</script>
|
<style lang="scss">
|
.lxb_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;
|
}
|
}
|
|
.icon-size {
|
height: 100%;
|
line-height: 36px;
|
width: 22px;
|
font-size: 12px;
|
}
|
|
.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;
|
}
|
}
|
|
.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;
|
}
|
}
|
|
.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-tools-div {
|
font-size: 0.13rem;
|
font-weight: bold;
|
display: flex;
|
height: 100%;
|
padding: 0.04rem;
|
box-sizing: border-box;
|
gap: 0.05rem;
|
}
|
|
.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%;
|
}
|
|
.chart_disp_menu_style {
|
position: absolute;
|
// right: -2rem;
|
left: 10px;
|
top: -0.01rem;
|
background: rgb(255, 255, 255);
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
}
|
|
.full_screen_style {
|
position: fixed;
|
left: 0;
|
top: 0;
|
right: 0;
|
bottom: 0;
|
background: #fff;
|
z-index: 9999;
|
}
|
}
|
|
.is-disabled {
|
cursor: not-allowed !important;
|
color: #cacfdb;
|
font-weight: 700 !important;
|
|
&:hover {
|
color: #cacfdb !important;
|
font-weight: 700 !important;
|
}
|
}
|
</style>
|
<style lang="scss">
|
.PQ_popover_style {
|
min-width: 2rem !important;
|
width: unset !important;
|
inset: 131px auto auto 241px !important;
|
padding: unset !important;
|
}
|
|
.DM_popover_style {
|
min-width: 2rem !important;
|
width: unset !important;
|
inset: 131px auto auto 280px !important;
|
padding: unset !important;
|
}
|
|
.icon-size {
|
min-width: 0.34rem;
|
}
|
|
.select_menu {
|
display: flex;
|
background: #fff;
|
|
.group_select_menu {
|
min-width: 2rem;
|
|
.setting-menu {
|
list-style: none;
|
// position: relative;
|
margin: 0;
|
|
.setting-menu-item {
|
font-size: 14px;
|
list-style: none;
|
cursor: pointer;
|
position: relative;
|
transition: border-color 0.3s, background-color 0.3s, color 0.3s;
|
box-sizing: border-box;
|
white-space: nowrap;
|
background-color: #fff;
|
float: none;
|
height: 36px;
|
line-height: 36px;
|
padding: 0 10px;
|
// color: #909399;
|
|
.setting-menu-title {
|
list-style: none;
|
cursor: pointer;
|
position: relative;
|
transition: border-color 0.3s, background-color 0.3s, color 0.3s;
|
box-sizing: border-box;
|
white-space: nowrap;
|
background-color: #fff;
|
float: none;
|
height: 36px;
|
line-height: 36px;
|
padding: 0 10px;
|
// color: #909399;
|
|
.label_name {
|
flex: 1;
|
padding: 0 0.1rem;
|
text-align: left;
|
}
|
}
|
}
|
}
|
|
ul {
|
min-width: 2rem;
|
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;
|
text-align: left;
|
}
|
|
&:hover {
|
background: #f5f7fa;
|
color: #409eff;
|
font-weight: 700;
|
}
|
|
.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;
|
text-align: left;
|
}
|
|
&:hover {
|
background: #f5f7fa;
|
color: #303133;
|
}
|
}
|
}
|
|
.label_active {
|
color: #409eff !important;
|
font-weight: 700;
|
}
|
|
.none_active {
|
color: #909399;
|
font-weight: 700;
|
}
|
}
|
}
|
}
|
|
.popover_cell {
|
display: flex;
|
margin-bottom: 0.1rem;
|
box-sizing: border-box;
|
justify-content: center;
|
align-items: center;
|
}
|
|
.choice_item_div_style {
|
position: absolute;
|
top: 0px;
|
left: 2rem;
|
z-index: 2094;
|
margin: 0 5px;
|
}
|
</style>
|
