<template>
|
<!-- 右侧筛选盒子 -->
|
<div class="tab_panel_main_point">
|
<div class="tab_panel_box_bord">
|
<!-- 参数选型 -->
|
<div class="panel-collapse">
|
<div class="panel-body">
|
<div @click="state.m_paraTable4Disp.isShow = !state.m_paraTable4Disp.isShow" class="group_name">
|
<i class="iconfont iconxiajiantou" :class="state.m_paraTable4Disp.isShow ? 'down' : 'right'" />
|
{{ state.m_paraTable4Disp.title }}
|
</div>
|
<el-collapse-transition>
|
<div v-show="state.m_paraTable4Disp.isShow">
|
<div class="flex">
|
<el-col :span="!state.m_isVisibleStdUnit ? 24 : 16" class="custom_col_style">
|
<div class="table_box" style="border-left: unset !important; width: 100%">
|
<div class="content2 table_head" style="border-top: 1px solid #e9e9e9">
|
{{ t("detailPage.userUnit.TR") }}
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="8" v-if="state.m_isVisibleStdUnit">
|
<div class="table_box">
|
<div class="content2 table_head" style="border-top: 1px solid #e9e9e9">
|
{{ t("detailPage.standardUnit.TR") }}
|
</div>
|
</div>
|
</el-col>
|
</div>
|
<div class="flex">
|
<!-- 用户单位 参数 -->
|
<el-col :span="16" class="custom_col_style">
|
<el-col :span="6" style="width: 25%">
|
<div class="table_box">
|
<div class="content2 table_head" style="border-top: 1px solid #e9e9e9">
|
{{ t("detailPage.parameter.TR") }}
|
</div>
|
</div>
|
</el-col>
|
<!-- 用户单位 数据 -->
|
<el-col :span="9">
|
<div class="table_box">
|
<div class="content2 table_head" style="border-top: 1px solid #e9e9e9">
|
{{ t("detailPage.data.TR") }}
|
</div>
|
</div>
|
</el-col>
|
<!-- 用户单位 单位 -->
|
<el-col :span="9">
|
<div class="table_box">
|
<div class="content2 table_head" style="border-top: 1px solid #e9e9e9">
|
{{ t("detailPage.unit.TR") }}
|
</div>
|
</div>
|
</el-col>
|
</el-col>
|
<el-col :span="8" v-if="state.m_isVisibleStdUnit" class="flex">
|
<!-- 标准单位 数据 -->
|
<el-col :span="12">
|
<div class="table_box">
|
<div class="content3 table_head" style="border-top: 1px solid #e9e9e9">
|
{{ t("detailPage.data.TR") }}
|
</div>
|
</div>
|
</el-col>
|
<!-- 标准单位 单位 -->
|
<el-col :span="12">
|
<div class="table_box">
|
<div class="content3 table_head" style="border-top: 1px solid #e9e9e9">
|
{{ t("detailPage.unit.TR") }}
|
</div>
|
</div>
|
</el-col>
|
</el-col>
|
</div>
|
<!-- 表格内容部分 -->
|
<div class="flex" style=" flex-direction: column; box-sizing: unset !important;"
|
v-for="(table_item, table_index) in state.m_paraTable4Disp.nodeList" :key="'table' + table_index">
|
<div style="width: 100%">
|
<el-col class="flex" :span="24" style="width: 100%">
|
<el-col :span="16" class="custom_col_style">
|
<!-- 参数名 -->
|
<el-col :span="6" style="width: 25%">
|
<div class="table_box">
|
<div class="content2">{{ table_item.Name }}</div>
|
</div>
|
</el-col>
|
<!-- 用户单位 数据 -->
|
<el-col :span="9" class="flex">
|
<div class="table_box">
|
<div class="content2" v-if="table_item.IsEditAble">
|
<el-select v-if="table_item.Tag == 'MotorPower'" v-model.number="table_item.ValueUserUnit"
|
@change="changeMotorPower">
|
<el-option v-for="( select_item, select_index ) in table_item.Range"
|
:key="'select' + select_index" :value="select_item.value"
|
:label="select_item.label"></el-option>
|
</el-select>
|
<el-input :title="'请输入' +
|
table_item.Range[0] +
|
'~' +
|
table_item.Range[1] +
|
'的值'
|
" v-else-if="table_item.Range" :max="table_item.Range[1]" :min="table_item.Range[0]"
|
v-model.number="table_item.ValueUserUnit" type="number"></el-input>
|
<el-input v-else v-model.number="table_item.ValueUserUnit" type="number"></el-input>
|
|
</div>
|
<div class="content2" v-else>
|
{{ table_item.ValueUserUnit }}
|
</div>
|
</div>
|
</el-col>
|
<!-- 用户单位 单位 -->
|
<el-col :span="9" class="flex">
|
<div class="table_box" style="width: 100%">
|
<div class="content2" v-if="table_item.UnitListUser">
|
<div v-if="table_item.UnitListUser.length == 0">
|
{{ table_item.UnitNameUser }}
|
</div>
|
<el-select v-else v-model="table_item.UnitUser">
|
<el-option v-for="( unit_item, unit_index) in table_item.UnitListUser"
|
:key="'unit' + unit_index" :value="unit_item.value" :label="unit_item.label">
|
</el-option>
|
</el-select>
|
</div>
|
</div>
|
</el-col>
|
</el-col>
|
<el-col :span="8" v-if="state.m_isVisibleStdUnit" class="flex">
|
<!-- 标准单位 数据 -->
|
<el-col :span="12">
|
<div class="table_box">
|
<div class="content3">
|
{{ table_item.ValueStdUnit }}
|
</div>
|
</div>
|
</el-col>
|
<!-- 标准单位 单位 -->
|
<el-col :span="12">
|
<div class="table_box">
|
<div class="content3">
|
{{ table_item.UnitNameStd }}
|
</div>
|
</div>
|
</el-col>
|
</el-col>
|
</el-col>
|
</div>
|
</div>
|
|
<div class="flex" style=" flex-direction: column; box-sizing: unset !important; ">
|
<div style="width: 100%">
|
<el-col :span="24" class="flex" style="width: 100%">
|
<el-col :span="16" class="custom_col_style">
|
<!-- 用户单位 参数 -->
|
<el-col :span="6" style="width: 25%">
|
<div class="table_box">
|
<div class="content2"></div>
|
</div>
|
</el-col>
|
<!-- 用户单位 数据 -->
|
<el-col :span="9" class="flex">
|
<div class="table_box">
|
<div class="content2 flex" style=" justify-content: center; align-items: center;">
|
<el-button type="primary" size="small" style="width: 60%; color: #fff" plain
|
@click="clickGridRowRefreshByDp">
|
{{ t("detailPage.define.TR") }}
|
</el-button>
|
</div>
|
</div>
|
</el-col>
|
<!-- 用户单位 单位 -->
|
<el-col :span="9" class="flex">
|
<div class="table_box" style="width: 100%">
|
<div class="content2">
|
<div></div>
|
</div>
|
</div>
|
</el-col>
|
</el-col>
|
<el-col :span="8" v-if="state.m_isVisibleStdUnit" class="flex">
|
<!-- 标准单位 数据 -->
|
<el-col :span="12">
|
<div class="table_box">
|
<div class="content3"></div>
|
</div>
|
</el-col>
|
<!-- 标准单位 单位 -->
|
<el-col :span="12">
|
<div class="table_box">
|
<div class="content3"></div>
|
</div>
|
</el-col>
|
</el-col>
|
</el-col>
|
</div>
|
</div>
|
</div>
|
</el-collapse-transition>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script setup name="">
|
import UnitHelper from "@/utils/unit.js";
|
import { onMounted, ref, reactive } from "vue";
|
import { ElInput, ElRow, ElButton, ElCol, ElCollapseTransition, ElSelect, ElOption } from "element-plus";
|
import { useI18n } from "vue-i18n";
|
const emit = defineEmits(['cbChangeMotorPower', 'cbRefreshByDp', 'cbOpenErrorTips', 'cbCloseErrorTips'])
|
let { t } = useI18n()
|
let state = reactive({
|
m_currentLanguage: 0,
|
m_chartType: 0,
|
m_paraTable4Disp: {}, //参数选型
|
m_isVisibleStdUnit: true, //是否显示标准单位
|
m_pumpInfoData: {}
|
})
|
//获取初始化
|
const initPumpInfoData = (langType, pumpInfoData) => {
|
state.m_currentLanguage = langType;
|
if (pumpInfoData.SettingInfo == null) {
|
return;
|
}
|
if (pumpInfoData.MainParaItemList == null) {
|
return;
|
}
|
state.m_pumpInfoData = pumpInfoData;
|
|
buildTable(pumpInfoData.SettingInfo, pumpInfoData.MainParaItemList);
|
}
|
//构建表格
|
const buildTable = (unitSetting, mainParaItemList) => {
|
if (mainParaItemList == null) {
|
return;
|
}
|
|
let pointTable = {};
|
pointTable.title = `${t("detailPage.parameterSelection.TR")}`;
|
pointTable.isShow = true;
|
pointTable.nodeList = [];
|
var isDispStdUnitCol = false; //是否显示标准单位列
|
for (let i = 0; i < mainParaItemList.length; i++) {
|
let node = {};
|
node.Name = getTranslateString(mainParaItemList[i].Name); //翻译
|
node.Tag = mainParaItemList[i].Tag;
|
node.Range = mainParaItemList[i].Range;
|
node.IsEditAble = mainParaItemList[i].IsEditAble;
|
node.ValueUserUnit = "";
|
node.ValueStdUnit = "";
|
|
if (node.Tag == "RequestPointQ") {
|
node.UnitUser = unitSetting.UserUnitQ;
|
node.UnitNameUser = UnitHelper.GetUnitNameQ(unitSetting.UserUnitQ);
|
node.UnitListUser = UnitHelper.Q_Value_List;
|
|
node.UnitStd = unitSetting.StdUnitQ;
|
node.UnitNameStd = UnitHelper.GetUnitNameQ(unitSetting.StdUnitQ);
|
if (unitSetting.StdUnitQ != unitSetting.UserUnitQ) {
|
isDispStdUnitCol = true;
|
}
|
|
if (mainParaItemList[i].Value) {
|
var para_value = parseFloat(mainParaItemList[i].Value);
|
node.ValueUserUnit = UnitHelper.getDispValueQ(
|
UnitHelper.ConvertQ(
|
mainParaItemList[i].Unit,
|
node.UnitUser,
|
para_value
|
)
|
);
|
node.ValueStdUnit = UnitHelper.getDispValueQ(
|
UnitHelper.ConvertQ(
|
mainParaItemList[i].Unit,
|
node.UnitStd,
|
para_value
|
)
|
);
|
}
|
} else if (node.Tag == "RequestPointH") {
|
node.UnitUser = unitSetting.UserUnitH;
|
node.UnitNameUser = UnitHelper.GetUnitNameH(unitSetting.UserUnitH);
|
node.UnitListUser = UnitHelper.H_Value_List;
|
|
node.UnitStd = unitSetting.StdUnitH;
|
node.UnitNameStd = UnitHelper.GetUnitNameH(unitSetting.StdUnitH);
|
|
if (unitSetting.StdUnitH != unitSetting.UserUnitH) {
|
isDispStdUnitCol = true;
|
}
|
|
if (mainParaItemList[i].Value) {
|
var para_value = parseFloat(mainParaItemList[i].Value);
|
node.ValueUserUnit = UnitHelper.getDispValueH(
|
UnitHelper.ConvertH(
|
mainParaItemList[i].Unit,
|
node.UnitUser,
|
para_value
|
)
|
);
|
node.ValueStdUnit = UnitHelper.getDispValueH(
|
UnitHelper.ConvertH(
|
mainParaItemList[i].Unit,
|
node.UnitStd,
|
para_value
|
)
|
);
|
}
|
} else {
|
node.ValueUserUnit = mainParaItemList[i].Value;
|
node.UnitNameUser = mainParaItemList[i].UnitName;
|
|
node.UnitListUser = [];
|
}
|
|
if (node.Tag == "MotorPower") {
|
//将电机功率的值传给属性
|
if (mainParaItemList[i].Value) {
|
node.ValueUserUnit = parseFloat(mainParaItemList[i].Value);
|
node.Range = node.Range.map(item => {
|
return {
|
value: parseFloat(item),
|
label: item
|
}
|
})
|
emit("cbChangeMotorPower", node.ValueUserUnit);
|
}
|
}
|
//
|
pointTable.nodeList.push(node);
|
}
|
|
state.m_isVisibleStdUnit = isDispStdUnitCol;
|
state.m_paraTable4Disp = pointTable;
|
}
|
//修改设计点参数后 刷新(index 请求后台后,会调用此函数刷新数据)
|
const refreshPumpInfoData = (val) => {
|
if (val == null || val.MainParaItemList == null)
|
return;
|
|
let mainParaItemList = val.MainParaItemList;
|
for (let i = 0; i < mainParaItemList.length; i++) {
|
let item = mainParaItemList[i];
|
if (item.Value == null) continue;
|
if (item.Tag == "WrkD2") {
|
let dispValue = parseFloat(item.Value).toFixed(1);
|
setMainParaItemValue(item, dispValue);
|
}
|
if (item.Tag == "WrkSpeed" && val.IsChangeOriginCurve) {
|
let dispValue = parseFloat(item.Value);
|
setMainParaItemValue(item, dispValue);
|
}
|
if (item.Tag == "MotorPower") {
|
let dispValue = parseFloat(item.Value);
|
setMainParaItemValue(item, dispValue);
|
|
}
|
}
|
}
|
//外部获取选型参数(含选型点单位,流量扬程是用户单位)
|
const getDesignParas = () => {
|
let obj = {};
|
let nodeList = state.m_paraTable4Disp.nodeList;
|
if (nodeList == null || nodeList.length == 0)
|
return null;
|
|
nodeList.forEach((item) => {
|
if (item.Tag == "RequestPointQ") {
|
//流量
|
obj.DpQ = item.ValueUserUnit;
|
obj.DpQu = item.UnitUser;
|
}
|
if (item.Tag == "RequestPointH") {
|
//扬程
|
obj.DpH = item.ValueUserUnit;
|
obj.DpHu = item.UnitUser;
|
}
|
if (item.Tag == "WrkSpeed") {
|
//转速
|
obj.WrkSpeed = item.ValueUserUnit;
|
}
|
if (item.Tag == "WrkD2") {
|
//叶轮外径
|
obj.WrkD2 = item.ValueUserUnit;
|
}
|
});
|
|
if (obj.DpQ == null || obj.DpQ == "") {
|
return null;
|
}
|
if (obj.DpH == null || obj.DpH == "") {
|
return null;
|
}
|
return obj;
|
}
|
|
//点击刷新按钮
|
const clickGridRowRefreshByDp = () => {
|
let dp = getDesignParas();
|
if (dp == null || dp.DpQ == "" || dp.DpH == "") return;
|
|
//
|
var isDispStdUnitCol = false; //是否显示标准单位列
|
var paraTable4Disp = state.m_paraTable4Disp;
|
for (var i = 0; i < paraTable4Disp.nodeList.length; i++) {
|
var node = paraTable4Disp.nodeList[i];
|
if (node.Tag == "RequestPointQ") {
|
node.ValueStdUnit = dp.DpQ;
|
if (node.UnitUser != node.UnitStd) {
|
isDispStdUnitCol = true;
|
node.ValueStdUnit = UnitHelper.getDispValueQ(
|
UnitHelper.ConvertQ(
|
node.UnitUser,
|
node.UnitStd,
|
dp.DpQ
|
)
|
);
|
}
|
}
|
if (node.Tag == "RequestPointH") {
|
node.ValueStdUnit = dp.DpH;
|
if (node.UnitUser != node.UnitStd) {
|
isDispStdUnitCol = true;
|
node.ValueStdUnit = UnitHelper.getDispValueH(
|
UnitHelper.ConvertH(
|
node.UnitUser,
|
node.UnitStd,
|
dp.DpH
|
)
|
);
|
}
|
}
|
}
|
|
state.m_isVisibleStdUnit = isDispStdUnitCol;
|
state.m_paraTable4Disp = paraTable4Disp;
|
|
//回调父窗体函数
|
emit("cbRefreshByDp", dp);
|
}
|
//设置值
|
const setMainParaItemValue = (node, value) => {
|
let tag = node.Tag
|
if (value == null) return;
|
if (tag == null) return;
|
if (typeof value == 'string') {
|
value = parseFloat(value);
|
}
|
if (value < 0.1)
|
return;
|
var paraTable4Disp = state.m_paraTable4Disp;
|
for (var i = 0; i < paraTable4Disp.nodeList.length; i++) {
|
var item = paraTable4Disp.nodeList[i];
|
if (item.Tag == tag) {
|
item.ValueUserUnit = value;
|
item.Range = node.Range.map(item => {
|
return {
|
value: parseFloat(item),
|
label: item
|
}
|
})
|
}
|
}
|
state.m_paraTable4Disp = paraTable4Disp;
|
}
|
//更新转速参数(此方法用于暴露给外部使用)
|
const updateWorkSpeed = (speed) => {
|
if (speed == null) return;
|
if (typeof speed == 'string') {
|
speed = parseFloat(speed);
|
}
|
if (speed < 0.1)
|
return;
|
var paraTable4Disp = state.m_paraTable4Disp;
|
for (var i = 0; i < paraTable4Disp.nodeList.length; i++) {
|
var item = paraTable4Disp.nodeList[i];
|
if (item.Tag == "WrkSpeed") {
|
item.ValueStdUnit = speed;
|
item.ValueUserUnit = speed;
|
}
|
}
|
state.m_paraTable4Disp = paraTable4Disp;
|
}
|
//更新电机功率(此方法用于暴露给外部使用)
|
const updateMotorPower = (motorpower) => {
|
if (motorpower == null) return;
|
if (typeof motorpower == 'string') {
|
motorpower = parseFloat(motorpower);
|
}
|
if (motorpower < 0.1)
|
return;
|
var paraTable4Disp = state.m_paraTable4Disp;
|
for (var i = 0; i < paraTable4Disp.nodeList.length; i++) {
|
var item = paraTable4Disp.nodeList[i];
|
if (item.Tag == "MotorPower") {
|
item.ValueStdUnit = motorpower;
|
item.ValueUserUnit = motorpower;
|
}
|
}
|
state.m_paraTable4Disp = paraTable4Disp;
|
}
|
|
//监听参数选型电机功率下拉框
|
const changeMotorPower = (val) => {
|
emit("cbChangeMotorPower", val);
|
}
|
//翻译
|
const getTranslateString = (cn) => {
|
// if (this.m_currentLanguage == 0) return cn;
|
if (cn == "流量") return `${t("detailPage.flow.TR")}`;
|
else if (cn == "压力") return `${t("detailPage.press.TR")}`;
|
else if (cn == "扬程") return `${t("detailPage.head.TR")}`;
|
else if (cn == "效率") return `${t("detailPage.efficiency.TR")}`;
|
else if (cn == "功率") return `${t("detailPage.power.TR")}`;
|
else if (cn == "转速") return `${t("detailPage.speed.TR")}`;
|
else if (cn == "叶轮外径")
|
return `${t("detailPage.impellerDia.TR")}`;
|
else if (cn == "电机功率")
|
return `${t("detailPage.motorPower.TR")}`;
|
else return cn;
|
}
|
defineExpose({
|
initPumpInfoData,
|
getDesignParas,
|
refreshPumpInfoData,
|
updateWorkSpeed,
|
updateMotorPower
|
})
|
</script>
|
<style lang="scss">
|
.tab_panel_main_point {
|
.tab_panel_box_bord {
|
border: 1px solid #ddd;
|
margin-top: 1px;
|
border-bottom: 0;
|
height: 100%;
|
}
|
|
.panel-body {
|
display: flex;
|
flex-direction: column;
|
background-color: #fff !important;
|
margin-bottom: 10px;
|
cursor: pointer;
|
}
|
|
.panel-heading {
|
border-color: #ddd;
|
margin-bottom: 1px;
|
|
.panel-title {
|
margin-top: 0;
|
padding: 0;
|
height: 31px;
|
line-height: 31px;
|
margin-bottom: 0;
|
font-size: 16px;
|
color: black;
|
font-weight: bold;
|
text-align: left;
|
padding-left: 7px;
|
}
|
}
|
|
.cz_select input {
|
background-color: #eee;
|
border-color: #eee;
|
}
|
|
.table_box {
|
width: 99%;
|
height: 30px;
|
display: flex;
|
border-left: 1px solid #e9e9e9 !important;
|
border-bottom: 1px solid #e9e9e9 !important;
|
box-sizing: content-box;
|
|
.content2 {
|
width: 100%;
|
height: 100%;
|
line-height: 30px;
|
text-align: center;
|
background-color: #fff;
|
border-top: 1px solid #e9e9e9 !important;
|
// border-right: 1px solid #e9e9e9;
|
border-bottom: 1px solid #e9e9e9 !important;
|
color: #000000;
|
font-size: 14px;
|
box-sizing: content-box;
|
}
|
|
.content3 {
|
width: 100%;
|
height: 100%;
|
line-height: 30px;
|
text-align: center;
|
background-color: #fff;
|
border-top: 1px solid #e9e9e9 !important;
|
border-right: 1px solid #e9e9e9 !important;
|
border-bottom: 1px solid #e9e9e9 !important;
|
color: #000000;
|
font-size: 14px;
|
box-sizing: content-box;
|
}
|
|
.table_head {
|
border-top: 1px solid #e9e9e9 !important;
|
border-bottom: 1px solid #e9e9e9 !important;
|
}
|
|
.el-input__wrapper {
|
box-shadow: none;
|
}
|
|
.el-input__inner {
|
height: 24px;
|
line-height: 24px;
|
border: 1px solid #fff;
|
padding: unset;
|
text-align: center;
|
font-size: 14px;
|
}
|
|
.el-select__wrapper {
|
text-align: center;
|
box-shadow: none;
|
min-height: 28px;
|
}
|
|
.el-input__icon {
|
line-height: 24px;
|
width: 20px;
|
}
|
|
.el-input-number {
|
width: 100%;
|
line-height: unset;
|
}
|
|
.el-input-number__decrease {
|
display: block;
|
}
|
|
.el-input-number__increase {
|
display: block;
|
}
|
|
.install_content {
|
.el-input__inner {
|
text-align: left;
|
padding-left: 30px;
|
font-size: 12px;
|
}
|
}
|
}
|
|
[type=number] {
|
box-shadow: none !important;
|
}
|
|
[type=text] {
|
box-shadow: none !important;
|
}
|
|
.flex {
|
display: flex;
|
}
|
|
.custom_col_style {
|
display: flex;
|
max-width: unset;
|
flex: 1 auto
|
}
|
}
|
</style>
|
