<template>
|
<!-- 变速曲线 -->
|
<div id="chartBox" style="width: 100%; height: 100%" class="performanceCurveBox" v-loading="state.m_loadingPage">
|
<!-- 图表区域 -->
|
<div style="overflow: hidden; width: 100%; height: calc(100% - 0.36rem)">
|
<div class="tubiao">
|
<div style="width: 100%; height: calc(100% - 0.1rem)" id="multiSpeedDiagramChart" ref="MultiSpeedChartSVG"></div>
|
</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';
|
import ConstParas from '@/utils/constParas.js';
|
// import html2canvas from 'html2canvas'; //div内容转图片
|
// import waterMarkHelper from "/@/utils/waterMarkHelper";
|
// import axiosHelper from "/@/utils/axiosHelper.js";
|
// import { useLogin } from "/@/store/login.js";
|
import { useRoute, useRouter } from 'vue-router';
|
// import { useI18n } from "vue-i18n";
|
// import { chartConfigStore } from "/@/store/chartConfig.js";
|
// import { CheckDownChartFile } from '/@/api/checkDown/index.js'
|
// 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 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,
|
});
|
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 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) => {});
|
};
|
// 检查导出曲线的权限
|
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);
|
});
|
});
|
};
|
|
const downChartImageFile = (filePath) => {
|
let link = document.createElement('a');
|
link.href = filePath; //下载链接
|
link.setAttribute('download', `${state.m_pumpName}-变速曲线.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') {
|
let color = state.m_chartDiagram.AddSpeedCurve(state.addSpeedValue);
|
if (color == null) return;
|
state.addSpeedValue = '';
|
}
|
if (type == '2') {
|
let color = state.m_chartDiagram.AddHzCurve(state.addHzValue);
|
if (color == null) return;
|
state.addHzValue = '';
|
}
|
};
|
//监听设置的转速曲线的颜色值
|
const changeSpeedColorValue = (value, index) => {
|
// console.log(value, index, 747);
|
if (state.m_chartDiagram == null) return;
|
//console.log(curve, 602);
|
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);
|
}
|
};
|
//点击"图表设置"的 子菜单
|
const btnClickChartDispSetChoiceMenu = (menuItem, choiceItem) => {};
|
//初始化
|
const initChart = (langType, pumpInfoData, size) => {
|
//console.log(pumpInfoData, 404);
|
if (pumpInfoData == null) {
|
return;
|
}
|
|
const el = document.getElementById('multiSpeedDiagramChart');
|
while (el.firstChild) {
|
el.removeChild(el.firstChild);
|
}
|
|
var chart_diagram = new MultiSpeedChartDiagram();
|
//设置语言
|
chart_diagram.setLocalizationType(0);
|
//设置容器
|
chart_diagram.setContainerDiv(
|
'multiSpeedDiagramChart', //Div名称
|
1200,
|
750 - 30
|
);
|
//设置提示框Name
|
chart_diagram.setToolTipName('featCurveTip');
|
//查询
|
chart_diagram.setChangeQueryDataCb(function (data) {
|
// console.log("setChangeQueryDataCb",data);
|
//_this.$emit("cbChangeChartQueryData", data); //回调父窗体事件
|
});
|
//修改了速度列表
|
chart_diagram.setChangeSpeedListCb(function (list) {
|
// console.log("setChangeSpeedListCb", list);
|
var speedList = [];
|
list.forEach((v) => {
|
speedList.push({
|
id: v.id,
|
value: v.speed,
|
text: v.speed + ' rpm',
|
color: v.color,
|
unit: 'rpm',
|
});
|
});
|
state.m_speedValueMenu.list = speedList;
|
});
|
//全局配置
|
var chartStyle = {
|
IsMonoColor: false,
|
IsDispSpectrum: true,
|
IsOnlyDispWrkCurve: false,
|
ColorH: '#6396C2',
|
ColorE: '#a90d41',
|
ColorP: '#e20df2',
|
ColorNPSH: '#8e870e',
|
ColorEquipment: '#013317',
|
ColorEqualParaCurvesE: '#402db7',
|
ColorCurveLabel: '#28004D',
|
};
|
|
/*_this.m_chartDispSettingMenu.options[0].choiceValue =
|
chartStyle.IsMonoColor;
|
_this.m_chartDispSettingMenu.options[1].choiceValue =
|
chartStyle.IsDispSpectrum;
|
_this.m_chartDispSettingMenu.options[2].value =
|
chartStyle.IsOnlyDispWrkCurve;
|
|
//上次配置
|
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;
|
}
|
|
if (chartConfig.IsOnlyDispWrkCurve != null) {
|
chartStyle.IsOnlyDispWrkCurve =
|
chartConfig.IsOnlyDispWrkCurve == 1 ? true : false;
|
|
_this.m_chartDispSettingMenu.options[2].value =
|
chartConfig.IsOnlyDispWrkCurve;
|
}
|
}*/
|
|
//初始化
|
chart_diagram.initialChart(pumpInfoData, chartStyle);
|
|
state.m_chartDiagram = chart_diagram;
|
};
|
//设置工作曲线
|
const setWrkCurveInfo = (dp, curve) => {
|
|
if (state.m_chartDiagram == null) return;
|
|
state.m_designPointParas = dp;
|
state.m_chartDiagram.setWrkCurveInfo(dp);
|
};
|
//根据流量计算功率
|
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">
|
.performanceCurveBox {
|
position: relative;
|
|
.chartBar {
|
background-color: white;
|
border-bottom: 0.01rem solid #cecece;
|
height: 0.35rem;
|
line-height: 0.35rem;
|
}
|
|
.el-dialog__header {
|
display: none;
|
}
|
|
.el-dialog--center .el-dialog__body {
|
padding: 0.25rem 0.25rem 0.15rem;
|
}
|
|
.el-dialog__footer {
|
padding: 0.05rem 0.05rem;
|
|
.el-button {
|
padding: 0.06rem 0.12rem;
|
min-height: 0.3rem;
|
}
|
}
|
|
.diagram {
|
cursor: pointer;
|
font-size: 0.12rem;
|
margin-top: 0;
|
margin-bottom: 0.03rem;
|
padding-top: 0.05rem;
|
height: 0.27rem;
|
|
& > span {
|
font-size: 0.12rem;
|
font-family: 'SourceHanSans-Bold';
|
}
|
}
|
|
.multispeed-tools-div {
|
font-size: 0.13rem;
|
font-weight: bold;
|
display: flex;
|
height: 100%;
|
padding: 0.04rem;
|
box-sizing: border-box;
|
gap: 0.05rem;
|
}
|
|
.multispeed_chart_btn {
|
border-width: 0;
|
padding: 0.07rem 0.14rem;
|
font-size: 0.12rem;
|
outline: none !important;
|
background-image: none !important;
|
border-radius: unset !important;
|
filter: none;
|
border-radius: 0;
|
box-shadow: none;
|
text-shadow: none;
|
height: 100%;
|
box-sizing: border-box;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
gap: 0.05rem;
|
|
&.default {
|
color: #333333;
|
background-color: #e5e5e5;
|
font-weight: 700;
|
|
&:hover {
|
background-color: #aaaaaa;
|
}
|
}
|
|
&.blue-stripe {
|
border-left: 0.03rem solid #002c66;
|
}
|
}
|
|
.add_speed_active {
|
color: #4b8df8 !important;
|
}
|
|
.rightFilterBox {
|
position: absolute;
|
right: 0rem;
|
top: 0rem;
|
width: auto;
|
background-color: white;
|
float: right;
|
|
.showChartInfoDiv {
|
width: 2rem;
|
display: block;
|
}
|
|
.boxHead {
|
height: 0.34rem;
|
border-left: none;
|
border-right: none;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
background-color: white;
|
border: 0.01rem solid transparent;
|
color: #3c763d;
|
border-color: #d6e9c6;
|
font-size: 0.14rem;
|
|
i {
|
font-size: 0.14rem;
|
}
|
}
|
|
.panel-heading {
|
background-color: #f5f5f5;
|
border-color: #ddd;
|
margin-bottom: 0.01rem;
|
|
.panel-title {
|
margin-top: 0;
|
padding: 0;
|
height: 0.23rem;
|
margin-bottom: 0;
|
font-size: 0.14rem;
|
background-color: #388cd4 !important;
|
color: white;
|
|
.right {
|
transform: rotate(-90deg);
|
transition: 0.2s;
|
}
|
|
.down {
|
transition: 0.2s;
|
transform: rotate(0deg);
|
}
|
}
|
|
.accordion-toggle {
|
padding: 0.1rem 0.15rem;
|
}
|
}
|
|
.panel-collapse {
|
height: auto;
|
|
.panel-body {
|
background-color: #545196 !important;
|
|
.el-checkbox {
|
color: #fff;
|
}
|
|
.el-checkbox,
|
.el-radio {
|
margin-right: 0.1rem;
|
}
|
|
.el-checkbox__label {
|
font-size: 0.12rem;
|
}
|
|
.el-checkbox__input.is-checked + .el-checkbox__label {
|
color: #fff;
|
font-size: 0.12rem;
|
}
|
|
.col-md-12 {
|
width: 100%;
|
margin-top: 0.03rem;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
.spectrumLeftParaLabelName {
|
line-height: 0.25rem;
|
margin-right: 0.05rem;
|
font-size: 0.12rem;
|
float: left;
|
width: 31%;
|
color: white;
|
background-color: #545196 !important;
|
}
|
|
.spectrumLeftParaLabelUnit {
|
line-height: 0.25rem;
|
margin-right: 0.05rem;
|
font-size: 0.12rem;
|
float: left;
|
width: 0.3rem;
|
color: white;
|
background-color: #545196 !important;
|
}
|
|
.el-input {
|
width: unset;
|
line-height: 0.3rem;
|
|
.el-input__inner {
|
height: 0.25rem;
|
line-height: 0.25rem;
|
width: 0.65rem;
|
text-align: right;
|
}
|
}
|
|
.pointShow {
|
.el-input__inner {
|
height: 0.25rem;
|
line-height: 0.25rem;
|
width: 100%;
|
text-align: center;
|
}
|
|
.el-input__prefix,
|
.el-input__suffix {
|
top: -0.07rem;
|
}
|
}
|
|
.chartInfoParaInput {
|
float: left;
|
line-height: 0.15rem;
|
width: 0.48rem !important;
|
text-align: right;
|
}
|
|
.form-control {
|
height: 0.08rem;
|
padding: 0.06rem 0.12rem;
|
font-size: 0.14rem;
|
font-weight: normal;
|
color: #333333;
|
background-color: white;
|
border: 0.01rem solid #b4afaf;
|
border-radius: 0;
|
box-shadow: none;
|
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
|
}
|
}
|
}
|
}
|
}
|
|
.searchbtn {
|
border-radius: 0;
|
border-width: 0;
|
padding: 0.02rem 0.14rem;
|
font-size: 0.14rem;
|
outline: none !important;
|
background-image: none !important;
|
filter: none;
|
box-shadow: none;
|
text-shadow: none;
|
display: inline-block;
|
font-weight: 400;
|
text-align: center;
|
vertical-align: middle;
|
cursor: pointer;
|
white-space: nowrap;
|
line-height: 0.2rem;
|
user-select: none;
|
margin-top: 0.08rem;
|
margin-left: 0.2rem;
|
height: 0.2rem;
|
margin-bottom: 0.02rem;
|
width: 0.6rem;
|
padding-top: 0.02rem;
|
border: 0.01rem solid #ccc;
|
}
|
|
.blue {
|
background-color: #6396c2 !important;
|
color: #fff;
|
}
|
|
.setBox {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
flex-direction: column;
|
|
.setGroup {
|
position: relative;
|
margin-bottom: 0.01rem !important;
|
padding: 0.05rem !important;
|
background-color: white;
|
border: 0.01rem solid transparent;
|
border-width: 0.01rem;
|
border-color: #bce8f1;
|
color: #31708f;
|
margin-top: 0.2rem;
|
|
.setTitle {
|
font-size: 0.18rem;
|
position: absolute;
|
top: -0.15rem;
|
background-color: #fff;
|
padding: 0 0.05rem;
|
}
|
|
.set_Option {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
// margin-top: 0.1rem;
|
.grid-content {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
margin-top: 0.05rem;
|
|
label {
|
width: 1.5rem;
|
font-size: 0.12rem;
|
text-align: right;
|
}
|
|
.el-input__inner {
|
text-align: right;
|
height: 0.4rem;
|
line-height: 0.4rem;
|
padding: 0 0;
|
}
|
}
|
}
|
}
|
}
|
|
.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: 0.05rem;
|
height: 0.34rem;
|
}
|
|
.el-color-picker--mini .el-color-picker__trigger {
|
width: 0.2rem;
|
height: 0.2rem;
|
}
|
|
.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: -1.77rem;
|
top: -0.01rem;
|
background: rgb(255, 255, 255);
|
border-width: 0.01rem 0.01rem 0.01rem 0.01rem;
|
border-color: #e5e5e5;
|
border-style: solid;
|
}
|
}
|
|
.mulit-chart-select_menu {
|
width: 100%;
|
display: flex;
|
background: #fff;
|
border: 0.01rem solid #e5e5e5;
|
|
.group_select_menu {
|
width: 100%;
|
border-right: 0.01rem solid #e5e5e5;
|
|
ul {
|
width: 100%;
|
list-style: none;
|
margin: 0;
|
padding: 0.06rem 0;
|
|
.group_style {
|
cursor: pointer;
|
color: #909399;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
padding: 0 0.3rem 0 0.2rem;
|
height: 0.34rem;
|
line-height: 0.34rem;
|
outline: none;
|
position: relative;
|
gap: 0.05rem;
|
box-sizing: border-box;
|
|
.label_name {
|
// flex: 1;
|
padding: 0 0.1rem;
|
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: 0.34rem;
|
line-height: 0.34rem;
|
outline: none;
|
padding: 0 0rem;
|
transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
|
width: 50%;
|
text-align: center;
|
// text-indent: 0.22rem;
|
}
|
|
.deleted_style {
|
position: absolute;
|
right: 0.1rem;
|
font-size: 0.16rem;
|
}
|
|
.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 0.3rem 0 0.2rem;
|
height: 0.34rem;
|
line-height: 0.34rem;
|
outline: none;
|
|
.label_name {
|
// flex: 1;
|
padding: 0 0.1rem;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
|
&:hover {
|
background: #f5f7fa;
|
color: #303133;
|
}
|
}
|
}
|
|
.label_active {
|
color: #409eff !important;
|
font-weight: 700;
|
}
|
|
.none_active {
|
color: #909399;
|
font-weight: unset;
|
}
|
}
|
}
|
}
|
|
.paramQuery_popover_style {
|
min-width: 2rem !important;
|
width: unset !important;
|
inset: 1.2rem auto auto 2.42rem !important;
|
padding: unset !important;
|
}
|
|
.multispeed_popover_style {
|
min-width: 2rem !important;
|
width: unset !important;
|
inset: 1.31rem auto auto 3.4rem !important;
|
padding: unset !important;
|
}
|
|
.SPEED_popover_style {
|
min-width: 1.5rem !important;
|
width: unset !important;
|
inset: 1.31rem auto auto 2.42rem !important;
|
padding: unset !important;
|
}
|
</style>
|
