<template>
|
<!-- 串并联曲线 -->
|
<div id="chartBox" v-loading="state.m_loadingPage" style="width: 100%; height: 100%;" class="performanceCurveBox">
|
<div class="chartBar">
|
<div class="chart-tools-div">
|
<!-- 曲线查询按钮 -->
|
<a ref="paramQueryCtrl" v-click-outside="onParamQueryClickOutside"
|
class="diagram conn_chart_btn default blue-stripe ml-5">
|
<i class="iconfont iconsearch" style="font-size: 12px"></i>
|
<span style="margin-left: 1px">
|
{{ t("detailPage.parameterQuery.TR") }}
|
</span>
|
</a>
|
|
<!-- 导出图表 -->
|
<el-dropdown placement="bottom">
|
<a class="diagram conn_chart_btn default blue-stripe" @click="btnClickExportChartImage">
|
<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 :disabled="true" @click="btnClickExportChartCAD"><i class="iconfont icontubiao_daoruCAD"
|
style="font-size: 28px"></i>CAD</el-dropdown-item>
|
</el-dropdown-menu>
|
</template>
|
</el-dropdown>
|
|
<!-- 链接方式 -->
|
<div class="flex" style="width: 180px;justify-content: center;align-items: center;">
|
<label class="chat_tool_label">{{ t("detailPage.method.TR") }}</label>
|
<el-select v-model="state.m_linkType" style="margin-left: 10px">
|
<el-option v-for="item in state.m_linkTypeList" :key="item.value" :label="item.label" :value="item.value">
|
</el-option>
|
</el-select>
|
</div>
|
<!-- 链接台数 -->
|
<div style="display: flex; justify-content: center; align-items: center;">
|
<label class="chat_tool_label">{{ t("detailPage.number.TR") }}</label>
|
<div style="
|
display: inline-flex;
|
align-items: flex-start;
|
justify-content: flex-start;
|
width: 100px;
|
">
|
<el-input-number v-model="state.m_linkNumber" controls-position="right" style="height: 32px"
|
:min="1"></el-input-number>
|
</div>
|
</div>
|
<div class="flex">
|
<el-button class="chat_tool_btn" type="primary" @click="updateConnChart">{{ t("detailPage.update.TR")
|
}}</el-button>
|
</div>
|
|
<!-- 参数查询显示/隐藏 -->
|
<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="DispMenu_popoverRef" :virtual-ref="dispMenuCtrl" trigger="click" :show-arrow="false"
|
:offset="24" virtual-triggering popper-class="conn_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>
|
|
<!-- 图表区域 -->
|
<div style="overflow: hidden; width: 100%;height: calc(100% - 36px);;">
|
<div class="tubiao">
|
<div style="width: 100%; height: 100%" id="connDiagramChart" ref="ConnChartSVG"></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 conn_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="connChart">
|
import { reactive, onMounted, nextTick, ref, unref } from "vue";
|
import {
|
ElMessage,
|
ElPopover,
|
ElInput,
|
ElButton,
|
ElDialog,
|
ElColorPicker,
|
ClickOutside as vClickOutside,
|
} from "element-plus";
|
import ConnChartDiagram from "@/components/Chart/js/ConnChartDiagram.js";
|
import ConstParas from "@/utils/constParas.js";
|
import html2canvas from "html2canvas"; //div内容转图片
|
import waterMarkHelper from "@/utils/waterMarkHelper";
|
import {CalcSinglePumpConnCurve,CheckDownChartFile } from '@/api/detail'
|
import { useLogin } from "@/stores/useLogin";
|
import { useRoute, useRouter } from "vue-router";
|
import { useI18n } from "vue-i18n";
|
import { chartConfigStore } from "@/stores/chartConfig.js";
|
const { t } = useI18n();
|
const chartConfig = chartConfigStore();
|
const userStore = useLogin();
|
const userInfo = userStore.getUserInfo();
|
const ConnChartSVG = ref();
|
|
const paramQueryCtrl = ref();
|
const Param_Query_popoverRef = ref();
|
|
const dispMenuCtrl = ref();
|
const DispMenu_popoverRef = ref();
|
const route = useRoute();
|
const router = useRouter();
|
|
let state = reactive({
|
m_chartDiagram: null, //图表对象
|
m_pumpName: "",
|
m_seriesID: 0,
|
m_pumpID: 0,
|
isFullScreen: false, //是否全屏
|
chartBoxHiehgt: 0, //图表盒子高度
|
|
exportChartDialogVisible: false, //曲线导出对话框显隐
|
|
addDialogVisible: false, //添加弹框显隐状态
|
m_speedValueMenu: {
|
isVisibleCombox: false, //下拉菜单的显示隐藏
|
list: [],
|
},
|
|
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_linkType: 0, //链接类型
|
m_linkTypeList: [
|
{
|
label: t("detailPage.parallelConnect.TR"),
|
value: 0,
|
},
|
{
|
label: t("detailPage.seriesConnect.TR"),
|
value: 1,
|
},
|
],
|
m_linkNumber: 1, //链接数量
|
m_loadingPage: false
|
});
|
onMounted(() => {
|
nextTick(() => {
|
refreshWindowSize();
|
});
|
});
|
//修改窗体尺寸
|
const refreshWindowSize = () => {
|
let headerHeight = 0;
|
let footerHeight = 0;
|
let calcHeight = 0
|
let el = document.getElementById('connDiagramChart')
|
let parentEl = el.parentElement
|
if (document.querySelector(".page-head-style")) {
|
headerHeight = document.querySelector(".page-head-style").clientHeight;
|
}
|
if (document.querySelector("#app footer")) {
|
footerHeight = document.querySelector("#app footer").clientHeight;
|
}
|
calcHeight = document.body.clientHeight - headerHeight - footerHeight - 86;
|
|
if (parentEl) {
|
calcHeight = parentEl.clientHeight
|
}
|
|
state.chartBoxHiehgt = calcHeight
|
if (state.m_chartDiagram) {
|
let diagramContentWidth = parentEl.clientWidth
|
let diagramContentHiehgt = parentEl.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(ConnChartSVG.value, { backgroundColor: "#fff" }).then(
|
(canvas) => {
|
let file = canvas.toDataURL("image/png");
|
waterMarkHelper.addImage(file, null, (base64Url) => {
|
downChartImageFile(base64Url);
|
});
|
}
|
);
|
};
|
//导出曲线图CAD
|
const btnClickExportChartCAD = () => { };
|
|
// 检查导出曲线的权限
|
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: 2,
|
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 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);
|
};
|
//点击"参数查询"菜单 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;
|
// 当前点击的是查询
|
if (menuItem.id == "chaxunquxian") {
|
if (menuItem.value == 1)
|
state.m_chartDiagram.setQueryIndicatVertLineVisible(true, 1);
|
else
|
state.m_chartDiagram.setQueryIndicatVertLineVisible(false, 1);
|
}
|
};
|
//点击"图表设置"菜单 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) => {
|
if (pumpInfoData == null) {
|
return;
|
}
|
|
document.getElementById("connDiagramChart").innerHTML = "";
|
|
var chart_diagram = new ConnChartDiagram();
|
//设置语言
|
chart_diagram.setLocalizationType(langType);
|
//设置容器
|
chart_diagram.setContainerDiv(
|
"connDiagramChart", //Div名称
|
size.width,
|
size.height - 35
|
);
|
|
//全局配置
|
var chartStyle = window.pageConfig.ChartStyle;
|
|
//初始化
|
chart_diagram.initialChart(pumpInfoData, chartStyle);
|
|
state.m_chartDiagram = chart_diagram;
|
|
// setTimeout(() => {
|
// state.m_chartDiagram.Resize(size.width, size.height - 35);
|
// state.m_chartDiagram.setConnectStatus(state.m_linkType,state.m_linkNumber);
|
// }, 500);
|
|
// 查询曲线
|
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;
|
|
return;
|
};
|
//设置工作曲线
|
const setWrkCurveInfo = (dp, curve) => {
|
if (state.m_chartDiagram == null) return;
|
state.m_designPointParas = dp;
|
state.m_chartDiagram.setWrkCurveInfo(dp, curve);
|
updateConnChart();
|
};
|
|
const showCoordinateBox = () => {
|
//显示设置坐标对话框
|
state.coordinateBoxVisible = true;
|
};
|
const onParamQueryClickOutside = () => {
|
unref(Param_Query_popoverRef).Param_Query_popoverRef?.delayHide?.()
|
};
|
// 更新串并联曲线
|
const updateConnChart = () => {
|
if (state.m_linkNumber <= 1) {
|
state.m_chartDiagram.setSingleCurveStatus();
|
return;
|
}
|
|
var chartDiagram = state.m_chartDiagram;
|
|
var pointsQH = chartDiagram.getOriginWorkCurveQH();
|
var pointsQP = chartDiagram.getOriginWorkCurveQP();
|
if (pointsQH == null || pointsQP == null) {
|
return;
|
}
|
//
|
|
let requestData = {
|
SeriesID: state.m_seriesID,
|
PumpID: state.m_pumpID,
|
ConnectType: state.m_linkType,
|
ConnectNumber: state.m_linkNumber,
|
PointQH: pointsQH,
|
PointQP: pointsQP,
|
};
|
CalcSinglePumpConnCurve(requestData).then((res) => {
|
let result = res.data;
|
if (result.Code != 0) {
|
ElMessage.error(result.Message);
|
return;
|
}
|
|
chartDiagram.setConnectCurveStatus(
|
state.m_linkType,
|
state.m_linkNumber,
|
result.Data.PointQH,
|
result.Data.PointQP
|
);
|
})
|
.catch((err) => {
|
console.log(err, 445);
|
});
|
};
|
//退出全屏
|
const exitFullScreen = () => {
|
state.isFullScreen = false;
|
};
|
//全屏
|
const fullScreen = () => {
|
state.isFullScreen = true;
|
setTimeout(() => {
|
initFullScreenChart();
|
}, 100);
|
};
|
|
const initFullScreenChart = () => { };
|
|
//
|
const checkLogin = () => {
|
//检查登陆
|
var Token = userInfo.Token;
|
if (Token == null || Token == "") {
|
userStore.login(route.fullPath);
|
return false;
|
}
|
return true;
|
};
|
defineExpose({
|
initPumpInfoData,
|
setWrkCurveInfo,
|
});
|
</script>
|
<style lang="scss">
|
.performanceCurveBox {
|
position: relative;
|
|
.chartBar {
|
background-color: white;
|
border-bottom: 1px solid #cecece;
|
height: 35px;
|
line-height: 35px;
|
}
|
|
.chart-tools-div {
|
font-size: 13px;
|
float: left;
|
font-weight: bold;
|
display: flex;
|
gap: 5px;
|
height: 100%;
|
align-items: center;
|
}
|
|
.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;
|
height: 27px;
|
|
&>span {
|
font-size: 12px;
|
font-family: "SourceHanSans-Bold";
|
}
|
}
|
|
.conn_chart_btn {
|
border-width: 0;
|
padding: 3px 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;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
align-items: center;
|
box-sizing: border-box;
|
|
&.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;
|
}
|
}
|
}
|
}
|
|
.chat_tool_label {
|
width: 80px;
|
font-size: 12px;
|
font-family: "SourceHanSans-Bold";
|
}
|
|
.paramQuery_popover_style {
|
min-width: 200px !important;
|
width: unset !important;
|
inset: 120px auto auto 242px !important;
|
padding: unset !important;
|
}
|
|
.conn_popover_style {
|
min-width: 200px !important;
|
width: unset !important;
|
inset: 205px auto auto 242px !important;
|
padding: unset !important;
|
}
|
|
.conn_SPEED_popover_style {
|
min-width: 150px !important;
|
width: unset !important;
|
inset: 204px auto auto 242px !important;
|
padding: unset !important;
|
}
|
|
#infoDv4VerticalLineConn1 {
|
font-size: 14px !important;
|
color: #000 !important;
|
width: 125px !important;
|
font-weight: bold
|
}
|
</style>
|
|
<style scoped>
|
:deep(.el-select__placeholder, .el-select__tags-text) {
|
text-align: center;
|
}
|
</style>
|
