<template>
|
<!-- 变速曲线 -->
|
<div
|
id="chartBox"
|
style="width: 100%; height: 100%"
|
class="ms_performanceCurveBox"
|
v-loading="state.m_loadingPage"
|
>
|
<div class="chartBar">
|
<div class="multispeed-tools-div">
|
<!-- 曲线查询按钮 -->
|
<a
|
ref="paramQueryCtrl"
|
v-click-outside="onParamQueryClickOutside"
|
@click="btnClickChartQuery"
|
class="diagram multispeed_chart_btn default blue-stripe"
|
>
|
<i class="iconfont iconsearch" style="font-size: 12px"></i>
|
<span style="margin-left: 1px">
|
{{ t("detailPage.parameterQuery.TR") }}
|
</span>
|
</a>
|
<!-- 速度列表 -->
|
<a
|
ref="multiSpeedCtrl"
|
v-click-outside="onDispMenuClickOutside"
|
class="diagram multispeed_chart_btn default blue-stripe"
|
>
|
<i class="iconfont iconshebeisheshi" style="font-size: 12px"></i>
|
<span style="margin-left: 1px">{{
|
t("detailPage.speedList.TR")
|
}}</span>
|
</a>
|
<!-- 显示设置 -->
|
<a
|
ref="dispMenuCtrl"
|
v-click-outside="onDispMenuClickOutside"
|
class="diagram multispeed_chart_btn default blue-stripe"
|
>
|
<i class="iconfont iconshebeisheshi" style="font-size: 12px"></i>
|
<span style="margin-left: 1px">{{
|
t("detailPage.displaySettings.TR")
|
}}</span>
|
</a>
|
<!-- 导出图表 -->
|
<el-dropdown placement="bottom">
|
<a class="diagram multispeed_chart_btn default blue-stripe">
|
<i class="iconfont icondaochu1" style="font-size: 12px"></i>
|
<span style="margin-left: 1px">{{
|
t("detailPage.curveExport.TR")
|
}}</span>
|
</a>
|
<template #dropdown>
|
<el-dropdown-menu>
|
<el-dropdown-item @click="btnClickExportChartImage"
|
><i
|
class="iconfont iconshiwutupian"
|
style="font-size: 28px"
|
></i
|
>{{ t("detailPage.picture.TR") }}</el-dropdown-item
|
>
|
<el-dropdown-item @click="btnClickExportChartCAD"
|
><i
|
class="iconfont icontubiao_daoruCAD"
|
style="font-size: 28px"
|
></i
|
>CAD</el-dropdown-item
|
>
|
</el-dropdown-menu>
|
</template>
|
</el-dropdown>
|
|
<!-- 参数查询显示/隐藏 -->
|
<el-popover
|
ref="Param_Query_popoverRef"
|
:virtual-ref="paramQueryCtrl"
|
trigger="click"
|
:show-arrow="false"
|
:offset="24"
|
virtual-triggering
|
popper-class="paramQuery_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"
|
@focus="focusInput(menu_item)"
|
></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: 32px; top: 10px"
|
:class="
|
menu_item.choiceValue == choice_item.value
|
? 'iconfont iconselect_icon'
|
: ''
|
"
|
>
|
</i>
|
</div>
|
</li>
|
</ul>
|
</li>
|
</ul>
|
</div>
|
</div>
|
</el-popover>
|
|
<!-- 显示速度列表 -->
|
<el-popover
|
ref="SPEED_popoverRef"
|
:virtual-ref="multiSpeedCtrl"
|
trigger="click"
|
:show-arrow="false"
|
:offset="24"
|
virtual-triggering
|
popper-class="SPEED_popover_style"
|
:hide-after="0"
|
>
|
<div class="mulit-chart-select_menu" tabindex="1">
|
<div class="group_select_menu">
|
<ul>
|
<li
|
v-for="(menu_item, menu_index) in state.m_speedValueMenu.list"
|
:key="menu_index"
|
>
|
<div class="group_style">
|
<span class="speed_input_style">{{
|
menu_item.type == 2 ? "★" : ""
|
}}</span>
|
<span class="speed_input_style">{{
|
menu_item.value.toFixed(1)
|
}}</span>
|
<span>{{ menu_item.unit }}</span>
|
<el-color-picker
|
@change="
|
changeSpeedColorValue(menu_item.color, menu_index)
|
"
|
size="small"
|
v-model="menu_item.color"
|
:teleported="false"
|
></el-color-picker>
|
<span class="deleted_style">
|
<i
|
class="iconfont iconguanbi"
|
@click="detelCurrentSpeedItem(menu_index)"
|
></i>
|
</span>
|
</div>
|
</li>
|
<el-popover
|
placement="right"
|
@show="popoverShow"
|
@hide="popoverHide"
|
v-model="state.addDialogVisible"
|
width="220px"
|
trigger="click"
|
:teleported="false"
|
>
|
<div class="transfer_type" style="margin-bottom: 7px">
|
<el-radio v-model="state.m_currentAddType" label="1">{{
|
t("selectPage.speed.TR")
|
}}</el-radio>
|
<el-radio v-model="state.m_currentAddType" label="2">{{
|
t("ebookPage.motorFrequency.TR")
|
}}</el-radio>
|
</div>
|
<!-- 添加转速 -->
|
<template v-if="state.m_currentAddType == '1'">
|
<el-input
|
:placeholder="t('detailPage.pleaseEnterSpeed.TR')"
|
v-model="state.addSpeedValue"
|
clearable
|
></el-input>
|
</template>
|
<!-- 添加频率 -->
|
<template v-if="state.m_currentAddType == '2'">
|
<el-input
|
:placeholder="t('detailPage.pleaseEnterHz.TR')"
|
v-model="state.addHzValue"
|
clearable
|
></el-input>
|
</template>
|
<div style="text-align: right; margin-top: 7px">
|
<!-- <el-button size="small" type="primary" @click="state.addDialogVisible = false">{{
|
t("detailPage.cancel.TR")
|
}}</el-button> -->
|
<el-button
|
type="primary"
|
style="padding: 7px 10px"
|
size="small"
|
@click="clickBtnAddSpeed"
|
>{{ t("detailPage.define.TR") }}</el-button
|
>
|
</div>
|
<template #reference>
|
<li>
|
<div
|
class="group_style"
|
:class="
|
state.addSpeedIsActive ? 'add_speed_active' : ''
|
"
|
>
|
<span class="label_name" style="text-align: center">{{
|
t("detailPage.addPinLv.TR")
|
}}</span>
|
<i
|
class="iconfont iconright"
|
style="position: absolute; right: 10px"
|
></i>
|
</div>
|
</li>
|
</template>
|
</el-popover>
|
<li>
|
<div
|
class="group_style"
|
@click="state.addOperatingDialogVisible = true"
|
>
|
<span class="label_name" style="text-align: center"
|
>添加运行点</span
|
>
|
</div>
|
</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="multispeed_popover_style"
|
:hide-after="0"
|
>
|
<div class="mulit-chart-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="
|
state.m_chartDispSettingMenu.acitveMenuId == menu_item.id
|
? 'label_active'
|
: 'none_active'
|
"
|
>
|
<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>
|
<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>
|
<!-- 曲线导出弹框 -->
|
<el-dialog
|
:title="t('detailPage.tip.TR')"
|
:modal="false"
|
top="1vh"
|
v-model="state.exportChartDialogVisible"
|
width="30%"
|
>
|
<div class="dialog_title_style">{{ t("detailPage.tip.TR") }}</div>
|
<div class="dialog_content_style">
|
{{ t("detailPage.downloadTips.TR") }}
|
</div>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="state.exportChartDialogVisible = false">{{
|
t("detailPage.cancel.TR")
|
}}</el-button>
|
<el-button type="primary" @click="downClientFile">{{
|
t("detailPage.download.TR")
|
}}</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
<!-- 添加运行点 -->
|
<el-dialog
|
align-center
|
v-model="state.addOperatingDialogVisible"
|
width="400px"
|
>
|
<div class="dialog_title_style">添加运行点</div>
|
<div
|
style="
|
width: 100%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
padding: 20px;
|
box-sizing: border-box;
|
"
|
>
|
<el-form
|
ref="OpreationPointFormRef"
|
:model="state.m_OperationPoint"
|
:rules="state.m_OperationPointRule"
|
style="width: 300px"
|
>
|
<el-form-item label="流量" prop="Q">
|
<el-input v-model="state.m_OperationPoint.Q"></el-input>
|
</el-form-item>
|
<el-form-item label="扬程" prop="H">
|
<el-input v-model="state.m_OperationPoint.H"></el-input>
|
</el-form-item>
|
</el-form>
|
</div>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="state.addOperatingDialogVisible = false">{{
|
t("detailPage.cancel.TR")
|
}}</el-button>
|
<el-button type="primary" @click="confirmOprationPoint"
|
>确定</el-button
|
>
|
</span>
|
</template>
|
</el-dialog>
|
|
<!-- 图表区域 -->
|
<div style="overflow: hidden; width: 100%; height: calc(100% - 36px)">
|
<div class="tubiao">
|
<div
|
style="width: 100%; height: calc(100% - 10px)"
|
id="multiSpeedDiagramChart"
|
ref="MultiSpeedChartSVG"
|
></div>
|
</div>
|
</div>
|
<div
|
v-if="state.isFullScreen"
|
style="
|
position: fixed;
|
left: 0;
|
top: 0;
|
right: 0;
|
bottom: 0;
|
background: #fff;
|
z-index: 9999;
|
"
|
>
|
<div style="height: 40px; line-height: 40px; text-align: left">
|
<a
|
class="diagram multispeed_chart_btn default blue-stripe"
|
style="margin-left: 5px"
|
>
|
<i class="iconfont iconfullscreen" style="font-size: 12px"></i>
|
<span @click="exitFullScreen" style="margin-left: 1px">
|
{{ t("detailPage.exitFull.TR") }}
|
</span>
|
</a>
|
</div>
|
<div
|
style="width: 100%; height: calc(100% - 40px)"
|
id="ChartFullScreen"
|
></div>
|
</div>
|
</div>
|
</template>
|
|
<script setup name="multiSpeedChart">
|
import { reactive, onMounted, nextTick, ref, unref } from "vue";
|
import {
|
ElMessage,
|
ElPopover,
|
ElInput,
|
ElButton,
|
ElDialog,
|
ElColorPicker,
|
ClickOutside as vClickOutside,
|
} from "element-plus";
|
import MultiSpeedChartDiagram from "@/components/Chart/js/MultiSpeedChartDiagram.js";
|
import UtilsHelper from "@/utils/utils.js";
|
import ConstParas from "@/utils/constParas.js";
|
import html2canvas from "html2canvas"; //div内容转图片
|
import waterMarkHelper from "@/utils/waterMarkHelper.js";
|
import axiosHelper from "@/utils/axiosHelper.js";
|
import { useLogin } from "@/stores/useLogin";
|
import { useRoute, useRouter } from "vue-router";
|
import { useI18n } from "vue-i18n";
|
import { chartConfigStore } from "@/stores/chartConfig.js";
|
import { CheckDownChartFile } from "@/api/detail";
|
const { t } = useI18n();
|
const chartConfig = chartConfigStore();
|
const userStore = useLogin();
|
const userInfo = userStore.getUserInfo();
|
const MultiSpeedChartSVG = ref();
|
|
const paramQueryCtrl = ref();
|
const Param_Query_popoverRef = ref();
|
|
const multiSpeedCtrl = ref();
|
const SPEED_popoverRef = ref();
|
|
const dispMenuCtrl = ref();
|
const DispMenu_popoverRef = ref();
|
|
const OpreationPointFormRef = ref();
|
const route = useRoute();
|
const router = useRouter();
|
const emit = defineEmits([
|
"cbChangeChartQueryData",
|
"cbSetDispMSChartQueryData",
|
]);
|
let state = reactive({
|
m_chartDiagram: null, //图表对象
|
m_pumpName: "",
|
m_seriesID: 0,
|
m_pumpID: 0,
|
isFullScreen: false, //是否全屏
|
chartBoxHiehgt: 0, //图表盒子高度
|
|
exportChartDialogVisible: false, //曲线导出对话框显隐
|
addSpeedValue: "", //添加新的转速的值
|
addHzValue: "50", //添加新的频率的值
|
m_currentAddType: "2", //当前添加的值的类型 默认2 1是转速、2是频率
|
|
addDialogVisible: false, //添加弹框显隐状态
|
m_speedValueMenu: {
|
isVisibleCombox: false, //下拉菜单的显示隐藏
|
list: [],
|
},
|
addSpeedIsActive: false, //添加转速样式
|
coordinateBoxVisible: false, //设置坐标对话框的显/隐
|
m_designPointParas: null,
|
m_chartDispSettingMenu: {
|
isShowQueryChartBtn: false, //是否显示图标上的查询按钮
|
isVisibleCombox: false, //下拉菜单的显示隐藏
|
acitveMenuId: "",
|
chartQueryMenuId: null,
|
options: [
|
{
|
id: "xianshi",
|
label: "图表颜色",
|
type: 1, //没有子菜单
|
choiceValue: 0,
|
choiceList: [
|
{
|
label: "单色",
|
value: 1,
|
},
|
{
|
label: "彩色",
|
value: 0,
|
},
|
],
|
},
|
],
|
chartQueryMenuOptions: [],
|
},
|
m_loadingPage: false,
|
addOperatingDialogVisible: false,
|
m_currentParamsQueryValue: "",
|
|
m_OperationPoint: {
|
Q: "",
|
H: "",
|
},
|
m_OperationPointRule: {
|
Q: [{ required: true, message: "请输入流量", trigger: "change" }],
|
H: [{ required: true, message: "请输入扬程", trigger: "change" }],
|
},
|
});
|
onMounted(() => {
|
nextTick(() => {
|
refreshWindowSize();
|
});
|
// window.addEventListener(
|
// "resize",
|
// () => {
|
// return (() => {
|
// refreshWindowSize();
|
// })();
|
// },
|
// false
|
// );
|
});
|
//修改窗体尺寸
|
const refreshWindowSize = () => {
|
let totalHeight = 0;
|
let headerHeight = 0;
|
let footerHeight = 0;
|
if (document.querySelector(".page-head-style")) {
|
headerHeight = document.querySelector(".page-head-style").clientHeight;
|
}
|
if (document.querySelector("#app footer")) {
|
footerHeight = document.querySelector("#app footer").clientHeight;
|
}
|
totalHeight = document.body.clientHeight - headerHeight - footerHeight;
|
|
let el_dom = document.getElementById("multiSpeedDiagramChart");
|
let parentDom = el_dom.parentElement;
|
if (parentDom) {
|
totalHeight = parentDom.clientHeight;
|
}
|
state.chartBoxHiehgt = totalHeight;
|
if (state.m_chartDiagram) {
|
var diagramContentWidth = parentDom.clientWidth;
|
var diagramContentHiehgt = parentDom.clientHeight;
|
|
state.m_chartDiagram.Resize(diagramContentWidth, diagramContentHiehgt);
|
}
|
};
|
//确定运行点参数
|
const confirmOprationPoint = async () => {
|
const validateStatus = await OpreationPointFormRef.value.validate();
|
if (!validateStatus) return;
|
|
let Q = state.m_OperationPoint.Q;
|
let H = state.m_OperationPoint.H;
|
|
//关闭弹框
|
state.addOperatingDialogVisible = false;
|
OpreationPointFormRef.value.resetFields();
|
|
state.m_chartDiagram.AddSpeedCurveDp(Q, H);
|
};
|
//导出曲线图
|
const btnClickExportChartImage = async () => {
|
state.m_loadingPage = true;
|
let checkStatus = await checkDownChartFile("PNG");
|
state.m_loadingPage = false;
|
if (!checkStatus) return;
|
html2canvas(MultiSpeedChartSVG.value, { backgroundColor: "#fff" }).then(
|
(canvas) => {
|
let file = canvas.toDataURL("image/png");
|
waterMarkHelper.addImage(file, null, (base64Url) => {
|
downChartImageFile(base64Url);
|
});
|
}
|
);
|
};
|
//点击"参数查询"菜单 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 dispMSChartQueryData = menuItem.value == 1 ? true : false;
|
// 当前点击的是查询
|
if (menuItem.id == "chaxunquxian") {
|
if (menuItem.value == 1) {
|
state.m_chartDiagram.setQueryIndicatVertLineVisible(true, 1);
|
} else {
|
state.m_chartDiagram.setQueryIndicatVertLineVisible(false, 1);
|
}
|
emit("cbSetDispMSChartQueryData", dispMSChartQueryData);
|
}
|
};
|
//导出曲线图CAD
|
const btnClickExportChartCAD = async () => {
|
state.m_loadingPage = true;
|
let checkStatus = await checkDownChartFile("CAD");
|
state.m_loadingPage = false;
|
if (!checkStatus) return;
|
|
var simuSpeedCurves = state.m_chartDiagram.getSpeedCurveList();
|
var list_speed = [];
|
simuSpeedCurves.forEach((element) => {
|
list_speed.push(element.speed);
|
});
|
if (list_speed.length <= 1) {
|
ElMessage.warning("至少两条曲线才能导出");
|
return;
|
}
|
let requestData = {
|
SeriesID: state.m_seriesID,
|
PumpID: state.m_pumpID,
|
Speeds: list_speed,
|
};
|
if (state.m_designPointParas != null) {
|
//requestData.DesignPoint = state.m_designPointParas;
|
}
|
axiosHelper
|
.post({
|
version: 3,
|
controller: "PumpChart",
|
action: "CreateMultiSpeedChartCad",
|
data: requestData,
|
apiUrlType: "main",
|
isAddUrlSoftType: "true",
|
})
|
.then((res) => {
|
let result = res.data;
|
if (result.Code != 0) {
|
ElMessage.error(result.Message);
|
return;
|
}
|
let filePath =
|
window.globalConfig.WebApiUrl.FileUrl +
|
"temp/selectReport/" +
|
result.Data;
|
// let filePath = window.globalConfig.WebApiUrl.MainUrl + "temp/selectReport/" + result.Data;
|
UtilsHelper.downloadFile(
|
filePath,
|
UtilsHelper.extractFileExtension(filePath)
|
);
|
})
|
.catch((err) => {
|
console.log(err, 455);
|
});
|
};
|
// 检查导出曲线的权限
|
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: 1,
|
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 clickBtnAddSpeed = () => {
|
state.addDialogVisible = false;
|
let type = state.m_currentAddType;
|
if (type == "1") {
|
var color = state.m_chartDiagram.AddSpeedCurve(state.addSpeedValue, null);
|
if (color == null) return;
|
state.addSpeedValue = "";
|
}
|
if (type == "2") {
|
var color = state.m_chartDiagram.AddHzCurve(state.addHzValue);
|
if (color == null) return;
|
state.addHzValue = "";
|
}
|
};
|
//监听设置的转速曲线的颜色值
|
const changeSpeedColorValue = (value, index) => {
|
if (state.m_chartDiagram == null) return;
|
let id = state.m_speedValueMenu.list[index].id;
|
state.m_chartDiagram.editColorById(id, value);
|
};
|
//删除当前列表节点
|
const detelCurrentSpeedItem = (index) => {
|
let id = state.m_speedValueMenu.list[index].id;
|
state.m_speedValueMenu.list.splice(index, 1);
|
//console.log(id, 434);
|
state.m_chartDiagram.deleteCurveById(id);
|
};
|
//获取修改的转速值 在失去焦点或者按enter键的时候 执行该代码
|
const changeEditSpeedValue = (index) => {
|
// 待修改--------
|
var speed = state.m_speedValueMenu.list[index].value;
|
//------------
|
speed = parseInt(speed);
|
let id = state.m_speedValueMenu.list[index].id;
|
if (speed < 10) return;
|
var list = state.m_speedValueMenu.list;
|
list[index].value = speed;
|
state.m_speedValueMenu.list = list;
|
state.m_chartDiagram.editSpeedById(id, speed);
|
};
|
//下载客户端
|
const downClientFile = () => {
|
state.exportChartDialogVisible = false;
|
let filePath = window.pageConfig.IndexPage.DanjiUrl;
|
if ((filePath = "")) {
|
return;
|
}
|
window.open(filePath, "_blank");
|
};
|
// 初始化获取泵的数据
|
const initPumpInfoData = (langType, pumpInfoData, size) => {
|
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, size);
|
};
|
//点击"图表查询"
|
const btnClickChartQuery = () => {
|
//查询线的显/隐
|
};
|
//点击"图表设置"菜单 type=0(带子菜单的)
|
const btnClickChartDispSetChoiceGrp = (menuItem) => {
|
state.m_chartDispSettingMenu.acitveMenuId = menuItem.id;
|
};
|
//点击"图表设置"菜单 type=1(checkbox)
|
const btnClickChartDispSetCheck = (menuItem) => {
|
menuItem.value = menuItem.value == 0 ? 1 : 0;
|
state.m_chartDispSettingMenu.isVisibleCombox = false;
|
//点击“标注频率”
|
if (menuItem.id == "dispPinLv") {
|
let dispPinlv = menuItem.value == 0 ? false : true;
|
state.m_chartDiagram.setCurveLabelDispHz(dispPinlv);
|
}
|
//点击“标注转速”
|
if (menuItem.id == "dispSpeed") {
|
let dispSpeed = menuItem.value == 0 ? false : true;
|
state.m_chartDiagram.setCurveLabelDispSpeed(dispSpeed);
|
}
|
// 点击“标注效率”
|
if (menuItem.id == "dispEfficiency") {
|
let disp = menuItem.value == 0 ? false : true;
|
state.m_chartDiagram.setAxisDispEta(disp);
|
}
|
};
|
//点击"图表设置"的 子菜单
|
const btnClickChartDispSetChoiceMenu = (menuItem, choiceItem) => {};
|
//初始化
|
const initChart = (langType, pumpInfoData, size) => {
|
if (pumpInfoData == null) {
|
return;
|
}
|
|
document.getElementById("multiSpeedDiagramChart").innerHTML = "";
|
|
var chart_diagram = new MultiSpeedChartDiagram();
|
//设置语言
|
chart_diagram.setLocalizationType(langType);
|
//设置容器
|
chart_diagram.setContainerDiv(
|
"multiSpeedDiagramChart", //Div名称
|
size.width,
|
size.height - 35
|
);
|
//设置提示框Name
|
chart_diagram.setToolTipName("featCurveTip");
|
//查询
|
chart_diagram.setChangeQueryDataCb((data) => {
|
emit("cbChangeChartQueryData", data); //回调父窗体事件
|
});
|
//修改了速度列表
|
chart_diagram.setChangeSpeedListCb((list) => {
|
let speedList = [];
|
list.forEach((v) => {
|
const speed = v.speed;
|
speedList.push({
|
id: v.id,
|
value: speed,
|
text: speed + " rpm",
|
color: v.color,
|
unit: "rpm",
|
type: v.type,
|
});
|
});
|
state.m_speedValueMenu.list = speedList;
|
});
|
|
//全局配置
|
var chartStyle = window.pageConfig.ChartStyle;
|
|
let options = [
|
{
|
id: "dispPinLv",
|
label: `标注频率`,
|
type: 1, //没有子菜单
|
value: 1,
|
},
|
{
|
id: "dispSpeed",
|
label: `标注转速`,
|
type: 1, //没有子菜单
|
value: 1,
|
},
|
{
|
id: "dispEfficiency",
|
label: `标注效率`,
|
type: 1, //没有子菜单
|
value: 0,
|
},
|
];
|
state.m_chartDispSettingMenu.options = options;
|
|
chart_diagram.setCurveLabelDispHz(true);
|
|
// 查询曲线
|
let chartQueryMenuOption = [
|
{
|
id: "chaxunquxian",
|
label: `${t("detailPage.queryCurve.TR")}`,
|
type: 1, //1 无子菜单
|
value: 0,
|
visible: true,
|
},
|
// {
|
// id: "paramsQuery1",
|
// label: `${t("detailPage.parameterQuery.TR")}1`,
|
// type: 1, //1 无子菜单
|
// value: "",
|
// visible: false,
|
// },
|
// {
|
// id: "paramsQuery2",
|
// label: `${t("detailPage.parameterQuery.TR")}2`,
|
// type: 1, //1 无子菜单
|
// value: "",
|
// visible: false,
|
// }
|
];
|
state.m_chartDispSettingMenu.chartQueryMenuOptions = chartQueryMenuOption;
|
|
/*_this.m_chartDispSettingMenu.options[0].choiceValue =
|
chartStyle.IsMonoColor;
|
_this.m_chartDispSettingMenu.options[1].choiceValue =
|
chartStyle.IsDispSpectrum;
|
|
|
//上次配置
|
let chartConfig = _this.$store.state.instante.chartConfig;
|
|
if (chartConfig) {
|
if (chartConfig.IsMonorColor != null) {
|
chartStyle.IsMonoColor = chartConfig.IsMonorColor == 1 ? true : false;
|
|
_this.m_chartDispSettingMenu.options[0].choiceValue =
|
chartConfig.IsMonorColor;
|
}
|
|
if (chartConfig.IsDispSpectrum != null) {
|
chartStyle.IsDispSpectrum =
|
chartConfig.IsDispSpectrum == 1 ? true : false;
|
|
_this.m_chartDispSettingMenu.options[1].choiceValue =
|
chartConfig.IsDispSpectrum;
|
}
|
}*/
|
|
//初始化
|
chart_diagram.initialChart(pumpInfoData, chartStyle);
|
|
state.m_chartDiagram = chart_diagram;
|
setTimeout(() => {
|
state.m_chartDiagram.Resize(size.width, size.height - 35);
|
}, 500);
|
};
|
//设置工作曲线
|
const setWrkCurveInfo = (dp, curve) => {
|
if (state.m_chartDiagram == null) return;
|
|
state.m_designPointParas = dp;
|
state.m_chartDiagram.setWrkCurveInfo(curve);
|
};
|
//根据流量计算功率
|
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);
|
};
|
//修改了区域参数的流量
|
const refreshRegionByFlow = (std_unit_flow, tag) => {
|
if (state.m_chartDiagram == null) return;
|
return state.m_chartDiagram.refreshRegionByFlow(std_unit_flow, tag);
|
};
|
|
const showCoordinateBox = () => {
|
//显示设置坐标对话框
|
state.coordinateBoxVisible = true;
|
//this.calcCoordinate();
|
};
|
const onParamQueryClickOutside = () => {
|
unref(Param_Query_popoverRef).Param_Query_popoverRef?.delayHide?.();
|
};
|
const onDispMenuClickOutside = () => {
|
unref(DispMenu_popoverRef).DispMenu_popoverRef?.delayHide?.();
|
};
|
const getSpeedList = () => {
|
let speedList = [];
|
state.m_speedValueMenu.list.forEach((item) => {
|
speedList.push(item.value);
|
});
|
return speedList.join(",");
|
};
|
//退出全屏
|
const exitFullScreen = () => {
|
state.isFullScreen = false;
|
};
|
//全屏
|
const fullScreen = () => {
|
state.isFullScreen = true;
|
setTimeout(() => {
|
initFullScreenChart();
|
}, 100);
|
};
|
|
const initFullScreenChart = () => {
|
var IdName = "ChartFullScreen";
|
};
|
//
|
const popoverShow = () => {
|
state.addSpeedIsActive = true;
|
};
|
//
|
const popoverHide = () => {
|
state.addSpeedIsActive = false;
|
};
|
//
|
const checkLogin = () => {
|
//检查登陆
|
var Token = userInfo.Token;
|
if (Token == null || Token == "") {
|
userStore.login(route.fullPath);
|
return false;
|
}
|
return true;
|
};
|
defineExpose({
|
initPumpInfoData,
|
setWrkCurveInfo,
|
getSpeedList,
|
});
|
</script>
|
<style lang="scss">
|
.ms_performanceCurveBox {
|
position: relative;
|
|
.chartBar {
|
background-color: white;
|
border-bottom: 1px solid #cecece;
|
height: 35px;
|
line-height: 35px;
|
}
|
|
.el-dialog__header {
|
display: none;
|
}
|
|
.el-dialog--center .el-dialog__body {
|
padding: 25px 25px 15px;
|
}
|
|
.el-dialog__footer {
|
padding: 5px 5px;
|
|
.el-button {
|
padding: 6px 12px;
|
min-height: 30px;
|
}
|
}
|
|
.diagram {
|
cursor: pointer;
|
font-size: 12px;
|
margin-top: 0;
|
margin-bottom: 3px;
|
padding-top: 5px;
|
height: 27px;
|
|
& > span {
|
font-size: 12px;
|
font-family: "SourceHanSans-Bold";
|
}
|
}
|
|
.multispeed-tools-div {
|
font-size: 13px;
|
font-weight: bold;
|
display: flex;
|
height: 100%;
|
padding: 4px;
|
box-sizing: border-box;
|
gap: 5px;
|
}
|
|
.multispeed_chart_btn {
|
border-width: 0;
|
padding: 7px 14px;
|
font-size: 12px;
|
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: 5px;
|
|
&.default {
|
color: #333333;
|
background-color: #e5e5e5;
|
font-weight: 700;
|
|
&:hover {
|
background-color: #aaaaaa;
|
}
|
}
|
|
&.blue-stripe {
|
border-left: 3px solid #002c66;
|
}
|
}
|
|
.add_speed_active {
|
color: #4b8df8 !important;
|
}
|
|
.rightFilterBox {
|
position: absolute;
|
right: 0px;
|
top: 0px;
|
width: auto;
|
background-color: white;
|
float: right;
|
|
.showChartInfoDiv {
|
width: 200px;
|
display: block;
|
}
|
|
.boxHead {
|
height: 34px;
|
border-left: none;
|
border-right: none;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
background-color: white;
|
border: 1px solid transparent;
|
color: #3c763d;
|
border-color: #d6e9c6;
|
font-size: 14px;
|
|
i {
|
font-size: 14px;
|
}
|
}
|
|
.panel-heading {
|
background-color: #f5f5f5;
|
border-color: #ddd;
|
margin-bottom: 1px;
|
|
.panel-title {
|
margin-top: 0;
|
padding: 0;
|
height: 23px;
|
margin-bottom: 0;
|
font-size: 14px;
|
background-color: #388cd4 !important;
|
color: white;
|
|
.right {
|
transform: rotate(-90deg);
|
transition: 0.2s;
|
}
|
|
.down {
|
transition: 0.2s;
|
transform: rotate(0deg);
|
}
|
}
|
|
.accordion-toggle {
|
padding: 10px 15px;
|
}
|
}
|
|
.panel-collapse {
|
height: auto;
|
|
.panel-body {
|
background-color: #545196 !important;
|
|
.el-checkbox {
|
color: #fff;
|
}
|
|
.el-checkbox,
|
.el-radio {
|
margin-right: 10px;
|
}
|
|
.el-checkbox__label {
|
font-size: 12px;
|
}
|
|
.el-checkbox__input.is-checked + .el-checkbox__label {
|
color: #fff;
|
font-size: 12px;
|
}
|
|
.col-md-12 {
|
width: 100%;
|
margin-top: 3px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
.spectrumLeftParaLabelName {
|
line-height: 25px;
|
margin-right: 5px;
|
font-size: 12px;
|
float: left;
|
width: 31%;
|
color: white;
|
background-color: #545196 !important;
|
}
|
|
.spectrumLeftParaLabelUnit {
|
line-height: 25px;
|
margin-right: 5px;
|
font-size: 12px;
|
float: left;
|
width: 30px;
|
color: white;
|
background-color: #545196 !important;
|
}
|
|
.el-input {
|
width: unset;
|
line-height: 30px;
|
|
.el-input__inner {
|
height: 25px;
|
line-height: 25px;
|
width: 65px;
|
text-align: right;
|
}
|
}
|
|
.pointShow {
|
.el-input__inner {
|
height: 25px;
|
line-height: 25px;
|
width: 100%;
|
text-align: center;
|
}
|
|
.el-input__prefix,
|
.el-input__suffix {
|
top: -7px;
|
}
|
}
|
|
.chartInfoParaInput {
|
float: left;
|
line-height: 15px;
|
width: 48px !important;
|
text-align: right;
|
}
|
|
.form-control {
|
height: 8px;
|
padding: 6px 12px;
|
font-size: 14px;
|
font-weight: normal;
|
color: #333333;
|
background-color: white;
|
border: 1px 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: 2px 14px;
|
font-size: 14px;
|
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: 20px;
|
user-select: none;
|
margin-top: 8px;
|
margin-left: 20px;
|
height: 20px;
|
margin-bottom: 2px;
|
width: 60px;
|
padding-top: 2px;
|
border: 1px 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: 1px !important;
|
padding: 5px !important;
|
background-color: white;
|
border: 1px solid transparent;
|
border-width: 1px;
|
border-color: #bce8f1;
|
color: #31708f;
|
margin-top: 20px;
|
|
.setTitle {
|
font-size: 18px;
|
position: absolute;
|
top: -15px;
|
background-color: #fff;
|
padding: 0 5px;
|
}
|
|
.set_Option {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
// margin-top: 10px;
|
.grid-content {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
margin-top: 5px;
|
|
label {
|
width: 150px;
|
font-size: 12px;
|
text-align: right;
|
}
|
|
.el-input__inner {
|
text-align: right;
|
height: 40px;
|
line-height: 40px;
|
padding: 0 0;
|
}
|
}
|
}
|
}
|
}
|
|
.dialog_title_style {
|
height: 30px;
|
font-size: 22px;
|
text-align: left;
|
text-indent: 20px;
|
}
|
|
.dialog_content_style {
|
height: 20px;
|
text-align: left;
|
text-indent: 20px;
|
margin-top: 10px;
|
}
|
|
.el-color-picker {
|
line-height: 3;
|
margin-left: 5px;
|
height: 34px;
|
}
|
|
.el-color-picker--mini .el-color-picker__trigger {
|
width: 20px;
|
height: 20px;
|
}
|
|
.el-color-picker__trigger {
|
padding: unset;
|
}
|
|
.el-color-picker--mini .el-color-picker__empty,
|
.el-color-picker--mini .el-color-picker__icon {
|
color: transparent;
|
}
|
|
.tubiao {
|
height: 100%;
|
width: 100%;
|
}
|
|
.disp_SetChoiceMenu_style {
|
position: absolute;
|
right: -177px;
|
top: -1px;
|
background: rgb(255, 255, 255);
|
border-width: 1px 1px 1px 1px;
|
border-color: #e5e5e5;
|
border-style: solid;
|
}
|
}
|
|
.mulit-chart-select_menu {
|
width: 100%;
|
display: flex;
|
background: #fff;
|
border: 1px solid #e5e5e5;
|
|
.group_select_menu {
|
width: 100%;
|
border-right: 1px solid #e5e5e5;
|
|
ul {
|
width: 100%;
|
list-style: none;
|
margin: 0;
|
padding: 6px 0;
|
|
.group_style {
|
cursor: pointer;
|
color: #909399;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
padding: 0 30px 0 20px;
|
height: 34px;
|
line-height: 34px;
|
outline: none;
|
position: relative;
|
gap: 5px;
|
box-sizing: border-box;
|
|
.label_name {
|
// flex: 1;
|
padding: 0 10px;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
|
.speed_input_style {
|
-webkit-appearance: none;
|
background-color: transparent;
|
background-image: none;
|
border: none;
|
box-sizing: border-box;
|
color: #606266;
|
display: inline-block;
|
font-size: inherit;
|
height: 34px;
|
line-height: 34px;
|
outline: none;
|
padding: 0 0px;
|
transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
|
width: 50%;
|
text-align: center;
|
}
|
|
.deleted_style {
|
position: absolute;
|
right: 10px;
|
font-size: 16px;
|
}
|
|
.deleted_style:hover {
|
color: red;
|
cursor: pointer;
|
}
|
|
&:hover {
|
background: #f5f7fa;
|
color: #303133;
|
}
|
|
.node_style {
|
cursor: pointer;
|
color: #909399;
|
display: flex;
|
align-items: center;
|
padding: 0 30px 0 20px;
|
height: 34px;
|
line-height: 34px;
|
outline: none;
|
|
.label_name {
|
// flex: 1;
|
padding: 0 10px;
|
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;
|
}
|
}
|
}
|
}
|
|
.paramQuery_popover_style {
|
min-width: 200px !important;
|
width: unset !important;
|
inset: 120px auto auto 242px !important;
|
padding: unset !important;
|
}
|
|
.multispeed_popover_style {
|
min-width: 200px !important;
|
width: unset !important;
|
inset: 131px auto auto 340px !important;
|
padding: unset !important;
|
}
|
|
.SPEED_popover_style {
|
min-width: 150px !important;
|
width: unset !important;
|
inset: 131px auto auto 242px !important;
|
padding: unset !important;
|
}
|
</style>
|
<style scoped>
|
:deep(.el-color-picker .el-color-picker__icon) {
|
display: none;
|
}
|
:deep(.el-color-picker__color) {
|
border: unset;
|
}
|
:deep(.el-color-picker__trigger) {
|
border: unset;
|
}
|
</style>
|
