<template>
|
<!-- 性能曲线 -->
|
<div id="chartBox" v-loading="state.m_loadingPage" style="width: 100%; height: 100%" class="lxb_performanceCurveBox">
|
<div class="chartBar">
|
<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: 12px"></i>
|
<span style="margin-left: 1px">
|
{{ 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: 12px"></i>
|
<span style="margin-left: 1px">{{
|
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: 12px"></i>
|
<span style="margin-left: 1px">{{
|
t("detailPage.curveExport.TR")
|
}}</span>
|
</a>
|
<template #dropdown>
|
<el-dropdown-menu>
|
<el-dropdown-item @click="btnClickExportChart"><i class="iconfont iconshiwutupian"
|
style="font-size: 28px"></i>{{ t("detailPage.picture.TR") }}</el-dropdown-item>
|
<el-dropdown-item @click="clickExportCAD"><i class="iconfont icontubiao_daoruCAD"
|
style="font-size: 28px"></i>CAD</el-dropdown-item>
|
<el-dropdown-item @click="clickExportPDF" v-if="state.m_dispExportPDF"><i class="iconfont iconpdf"
|
style="font-size: 28px"></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: 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="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% - 36px)">
|
<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.js";
|
// import setCoordinate from "./setLxpCoordinate.vue"; //设置坐标
|
import ConstParas from "@/utils/constParas.js";
|
import { chartConfigStore } from "@/stores/chartConfig.js";
|
import { useRoute, useRouter } from "vue-router";
|
import { useLogin } from "@/stores/useLogin";
|
import { useI18n } from "vue-i18n";
|
// import saveSvg from "save-svg-as-png"; //svg图标转图片-- 转不出水印
|
import html2canvas from "html2canvas"; //div内容转图片
|
import waterMarkHelper from "@/utils/waterMarkHelper.js";
|
import ExportCadDialog from "./ExportCadDialog.vue";
|
import { CheckDownChartFile } from '@/api/detail'
|
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;
|
}
|
if (document.querySelector("#app header")) {
|
headerHeight = document.querySelector("#app header").clientHeight;
|
}
|
if (document.querySelector("#app footer")) {
|
footerHeight = document.querySelector("#app footer").clientHeight;
|
}
|
let filterHeaderHeight = 0;
|
if (document.querySelector(".filter-header")) {
|
filterHeaderHeight = document.querySelector(".filter-header").clientHeight + 51;
|
}
|
|
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?.();
|
};
|
|
//导出性能曲线 https://gitee.com/mirrors/saveSvgAsPng
|
const btnClickExportChart = async () => {
|
state.m_loadingPage = true;
|
let checkStatus = await checkDownChartFile('PNG')
|
state.m_loadingPage = false;
|
if (!checkStatus) return;
|
html2canvas(FeatCurveSvg.value, { backgroundColor: "#fff" }).then(
|
(canvas) => {
|
let file = canvas.toDataURL("image/png");
|
const TextContent = state.m_pumpName;
|
const TextWaterMarkOpts = {
|
content: TextContent,
|
position: "right",
|
};
|
waterMarkHelper.addImage(
|
file,
|
null,
|
(base64Url) => {
|
downChartImageFile(base64Url);
|
},
|
TextWaterMarkOpts
|
);
|
}
|
);
|
};
|
|
// 导出CAD
|
const clickExportCAD = async () => {
|
state.m_loadingPage = true;
|
let checkStatus = await checkDownChartFile('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)
|
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 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: diagramContentWidth,
|
height: diagramContentHeight,
|
};
|
};
|
//获取图表显示设置 菜单
|
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;
|
}
|
let options = [
|
{
|
//1
|
id: "designPointStyle",
|
label: `${t("detailPage.designPointStyle.TR")}`,
|
type: 0, //有子菜单
|
choiceValue: 0,
|
choiceType: "check",
|
disabled: false,
|
choiceList: [
|
{
|
label: `${t("detailPage.noDisplay.TR")}`,
|
value: 1,
|
type: "text", //只显示文本
|
tag: "",
|
disabled: false,
|
},
|
{
|
label: `${t("detailPage.crosshair.TR")}`,
|
value: 0,
|
type: "text",
|
tag: "",
|
disabled: false,
|
},
|
{
|
label: `${t("detailPage.invertedTriangle.TR")}`,
|
value: 2,
|
type: "text",
|
tag: "",
|
disabled: false,
|
},
|
{
|
label: `${t("detailPage.roundDot.TR")}`,
|
value: 4,
|
type: "text",
|
tag: "",
|
disabled: false,
|
},
|
{
|
label: `${t("detailPage.boldRightAngle.TR")}`,
|
value: 5,
|
type: "text",
|
tag: "",
|
disabled: false,
|
},
|
],
|
},
|
{
|
//index:2
|
id: "isMonorColor",
|
label: `${t("detailPage.chartColor.TR")}`,
|
type: 0, //有子菜单
|
choiceValue: 0,
|
disabled: false,
|
choiceList: [
|
{
|
label: `${t("detailPage.monochrome.TR")}`,
|
value: 1,
|
type: "text",
|
tag: "",
|
disabled: false,
|
},
|
{
|
label: `${t("detailPage.multicolour.TR")}`,
|
value: 0,
|
type: "text",
|
tag: "",
|
disabled: false,
|
},
|
],
|
},
|
// 装置曲线
|
{
|
//index:4
|
id: "euqipcurvedisp",
|
label: `${t("detailPage.deviceCurve.TR")}`,
|
type: 0, //有子菜单
|
choiceValue: null,
|
disabled: false,
|
choiceList: [
|
{
|
label: `${t("detailPage.displayIndex.TR")}`,
|
value: 0,
|
type: "check", //只显示文本
|
tag: "isDispEuqipment",
|
disabled: false,
|
},
|
{
|
label: `${t("detailPage.netHeadValue.TR")}`,
|
value: 0,
|
type: "input", //可输入
|
tag: "EuqipmentZeroH",
|
disabled: false,
|
},
|
],
|
},
|
// 显示工作曲线
|
{
|
id: "CurveBundleDispStyle",
|
label: `${t("detailPage.displayCurve.TR")}`,
|
type: 0, //有子菜单
|
choiceValue: 2,
|
disabled: false,
|
choiceList: [
|
{
|
label: `${t("detailPage.onlyDisplayCurve.TR")}`,
|
value: 0,
|
type: "text",
|
tag: "",
|
disabled: false,
|
},
|
{
|
label: `${t("detailPage.maxMinWorkingCurve.TR")}`,
|
value: 1,
|
type: "text",
|
tag: "",
|
disabled: false,
|
},
|
{
|
label: `${t("detailPage.showAllCurves.TR")}`,
|
value: 2,
|
type: "text",
|
tag: "",
|
disabled: false,
|
},
|
],
|
},
|
{
|
//index:3
|
id: "isDispSpectrum",
|
label: `${t("detailPage.spectrumDisplay.TR")}`,
|
type: 0, //有子菜单
|
choiceValue: 0,
|
disabled: false,
|
choiceList: [
|
{
|
label: `${t("detailPage.display.TR")}`,
|
value: 1,
|
type: "text", //只显示文本
|
tag: "",
|
disabled: false,
|
},
|
{
|
label: `${t("detailPage.noDisplay.TR")}`,
|
value: 0,
|
type: "text", //只显示文本
|
tag: "",
|
disabled: false,
|
},
|
],
|
},
|
];
|
// 显示叶轮外径
|
if (pumpInfoData.BaseInfo.ChartType == 1) {
|
options.push({
|
//index:6
|
id: "menuDispLabelD2",
|
label: `${t("detailPage.impellerDia.TR")}`,
|
type: 0, //有子菜单
|
choiceValue: null,
|
disabled: false,
|
choiceList: [
|
{
|
label: `多彩曲线`,
|
value: 1,
|
type: "check",
|
tag: "multiColorCurve",
|
disabled: false,
|
},
|
{
|
label: `${t("detailPage.displayPanel.TR")}`,
|
value: 0,
|
type: "check",
|
tag: "disCurveParasPanel",
|
disabled: false,
|
},
|
],
|
});
|
}
|
state.m_chartDispSettingMenu.options = options;
|
|
// 查询曲线
|
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;
|
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 = window.pageConfig.ChartStyle;
|
// 设置图表颜色
|
var menuIsMonorColor = getChartDispMenuById("isMonorColor");
|
menuIsMonorColor.choiceValue = chartStyle.IsMonoColor;
|
// 设置型谱显示
|
var menuisDispSpectrum = getChartDispMenuById("isDispSpectrum");
|
menuisDispSpectrum.choiceValue = chartStyle.IsDispSpectrum;
|
// 曲线显示风格
|
var menuCurveBundleDispStyle = getChartDispMenuById("CurveBundleDispStyle");
|
menuCurveBundleDispStyle.choiceValue =
|
pumpInfoData.SettingInfo.LxpCurveBundleDispStyle;
|
chartStyle.LxpCurveBundleDispStyle =
|
pumpInfoData.SettingInfo.LxpCurveBundleDispStyle;
|
//
|
if (pumpInfoData.SettingInfo.LxpCurveBundleDispStyle == 0) {
|
setDisabledByMenuItemId("isDispSpectrum", true);
|
setDisabledByMenuItemId("menuDispLabelD2", true);
|
} else if (pumpInfoData.SettingInfo.LxpCurveBundleDispStyle == 1) {
|
setDisabledByMenuItemId("menuDispLabelD2", true);
|
}
|
|
//是否显示叶轮外径参数面板
|
chartStyle.IsDispCurveParasPanel = false;
|
chartStyle.IsMultiColorCurve = true;
|
//显示子型号
|
chartStyle.IsDispCurveName = true;
|
|
var menuDesignPointStyle = getChartDispMenuById("designPointStyle");
|
var menuEuqipcurvedisp = getChartDispMenuById("euqipcurvedisp");
|
//上次配置
|
if (chartConfig) {
|
if (chartConfig.isMonorColor != null) {
|
chartStyle.IsMonoColor = chartConfig.isMonorColor == 1 ? true : false;
|
menuIsMonorColor.choiceValue = chartConfig.isMonorColor;
|
}
|
|
if (chartConfig.isDispSpectrum != null) {
|
chartStyle.IsDispSpectrum =
|
chartConfig.isDispSpectrum == 1 ? true : false;
|
menuisDispSpectrum.choiceValue = chartConfig.isDispSpectrum;
|
}
|
|
if (chartConfig.designPointStyle != null) {
|
chartStyle.DesignPointDispType = chartConfig.designPointStyle;
|
menuDesignPointStyle.choiceValue = chartConfig.designPointStyle;
|
}
|
|
if (
|
chartConfig.isDispEquipCurve != null &&
|
chartConfig.isDispEquipCurve == 1
|
) {
|
menuEuqipcurvedisp.choiceList[0].value = 1;
|
chartStyle.IsDispEquipCurve = true;
|
}
|
}
|
|
//初始化
|
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: 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;
|
}
|
}
|
|
.icon-size {
|
height: 100%;
|
line-height: 36px;
|
width: 22px;
|
font-size: 12px;
|
}
|
|
.diagram {
|
cursor: pointer;
|
font-size: 12px;
|
margin-top: 0;
|
margin-bottom: 3px;
|
padding-top: 5px;
|
height: 27px;
|
|
&>span {
|
font-size: 12px;
|
}
|
}
|
|
.lxb_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;
|
}
|
}
|
|
.rightFilterBox {
|
position: absolute;
|
right: 0;
|
top: 0;
|
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 {
|
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;
|
}
|
}
|
}
|
}
|
}
|
|
.lxb-tools-div {
|
font-size: 13px;
|
font-weight: bold;
|
display: flex;
|
height: 100%;
|
padding: 4px;
|
box-sizing: border-box;
|
gap: 5px;
|
}
|
|
.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;
|
}
|
}
|
}
|
}
|
}
|
|
.tubiao {
|
height: 100%;
|
width: 100%;
|
}
|
|
.chart_disp_menu_style {
|
position: absolute;
|
left: 10px;
|
top: -1px;
|
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: 200px !important;
|
width: unset !important;
|
inset: 131px auto auto 241px !important;
|
padding: unset !important;
|
}
|
|
.DM_popover_style {
|
min-width: 200px !important;
|
width: unset !important;
|
top: 131px !important;
|
right: auto !important;
|
bottom: auto !important;
|
left: 280px !important;
|
padding: unset !important;
|
}
|
|
.icon-size {
|
min-width: 34px;
|
}
|
|
.select_menu {
|
display: flex;
|
background: #fff;
|
|
.group_select_menu {
|
min-width: 200px;
|
|
.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 10px;
|
text-align: left;
|
}
|
}
|
}
|
}
|
|
ul {
|
min-width: 200px;
|
list-style: none;
|
margin: 0;
|
padding: 6px 0;
|
|
.group_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;
|
text-align: left;
|
}
|
|
&:hover {
|
background: #f5f7fa;
|
color: #409eff;
|
font-weight: 700;
|
}
|
|
.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;
|
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: 10px;
|
box-sizing: border-box;
|
justify-content: center;
|
align-items: center;
|
}
|
|
.choice_item_div_style {
|
position: absolute;
|
top: 0px;
|
left: 200px;
|
z-index: 2094;
|
margin: 0 5px;
|
}
|
</style>
|
