fix：修改首页加载图片顺序错误的问题
This commit is contained in:
zhangyu
@@ -1,597 +0,0 @@
|
|||||||
.clearfix:after{
|
|
||||||
display: block;
|
|
||||||
content: "";
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
.clearfix{
|
|
||||||
margin-bottom: 0px;
|
|
||||||
}
|
|
||||||
.hidden{
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
.visible{
|
|
||||||
visibility: visible;
|
|
||||||
}
|
|
||||||
.legend-shape{
|
|
||||||
display:inline-block;
|
|
||||||
margin-right:5px;
|
|
||||||
border-radius:10px;
|
|
||||||
width:15px;
|
|
||||||
height:5px;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
.ft-gr{
|
|
||||||
color:lightgray;
|
|
||||||
}
|
|
||||||
.legend-container{
|
|
||||||
width: calc(100% - 30px);
|
|
||||||
max-height:40px;
|
|
||||||
min-height:25px;
|
|
||||||
font-size:12px;
|
|
||||||
text-align:left;
|
|
||||||
left: 10px;
|
|
||||||
bottom: 0px;
|
|
||||||
line-height: 18px;
|
|
||||||
position: absolute;
|
|
||||||
padding-bottom:3px;
|
|
||||||
}
|
|
||||||
.nz-icon-warning{
|
|
||||||
color: #e6a23c;
|
|
||||||
}
|
|
||||||
.legend-container-screen.legend-container {
|
|
||||||
max-height: 80px;
|
|
||||||
min-height:25px;
|
|
||||||
}
|
|
||||||
.legend-item{
|
|
||||||
text-overflow:ellipsis;
|
|
||||||
white-space:nowrap;
|
|
||||||
/*width:100%;*/
|
|
||||||
margin-right:10px;
|
|
||||||
overflow-x:hidden;
|
|
||||||
cursor:pointer;
|
|
||||||
display:inline-block;
|
|
||||||
float:left;
|
|
||||||
line-height: 20px;
|
|
||||||
}
|
|
||||||
.nz-chart-dropdown {
|
|
||||||
height: 180px;
|
|
||||||
li {
|
|
||||||
padding-left:15px !important;
|
|
||||||
padding-right:0px !important;
|
|
||||||
width:140px;
|
|
||||||
text-align: left;
|
|
||||||
i {
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.nz-chart-dropdown-one {
|
|
||||||
height: 36px;
|
|
||||||
li {
|
|
||||||
padding-left:15px !important;
|
|
||||||
padding-right:0px !important;
|
|
||||||
width:140px;
|
|
||||||
text-align: left;
|
|
||||||
i {
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.panel-info-corner {
|
|
||||||
color: #767980;
|
|
||||||
cursor: pointer;
|
|
||||||
position: absolute;
|
|
||||||
display: none;
|
|
||||||
left: 0;
|
|
||||||
width: 28px;
|
|
||||||
height: 28px;
|
|
||||||
z-index: 2;
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
.panel-info-corner--error {
|
|
||||||
display: block;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
.panel-info-corner .fa {
|
|
||||||
position: relative;
|
|
||||||
top: -4px;
|
|
||||||
left: -6px;
|
|
||||||
font-size: 75%;
|
|
||||||
z-index: 3;
|
|
||||||
}
|
|
||||||
.panel-info-corner .fa-model {
|
|
||||||
position: relative;
|
|
||||||
top: -3px;
|
|
||||||
left: 4px;
|
|
||||||
font-size: 75%;
|
|
||||||
z-index: 3;
|
|
||||||
}
|
|
||||||
.fa, .fa-model{
|
|
||||||
display: inline-block;
|
|
||||||
text-rendering: auto;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel-info-corner--error .panel-info-corner-inner {
|
|
||||||
border-left: 28px solid #e02f44;
|
|
||||||
border-right: none;
|
|
||||||
border-bottom: 28px solid rgba(0,0,0,0);
|
|
||||||
}
|
|
||||||
.panel-info-corner-inner {
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
}
|
|
||||||
.chart-error-popper[x-placement^=top] .popper__arrow::after {
|
|
||||||
border-top-color: #e02f44;
|
|
||||||
bottom:0px;
|
|
||||||
}
|
|
||||||
.chart-error-popper[x-placement^=bottom] .popper__arrow::after {
|
|
||||||
border-bottom-color: #e02f44;
|
|
||||||
}
|
|
||||||
.popper__arrow::after{
|
|
||||||
border:solid 3px yellow
|
|
||||||
}
|
|
||||||
.chart-error-popper{
|
|
||||||
background-color:#e02f44;
|
|
||||||
color:#FFF;
|
|
||||||
word-wrap:break-word;
|
|
||||||
word-break:break-word;
|
|
||||||
max-width:280px;
|
|
||||||
border: 1px solid #e02f44;
|
|
||||||
}
|
|
||||||
.chart-warring-popper[x-placement^=top] .popper__arrow::after {
|
|
||||||
border-top-color: #e6a23c;
|
|
||||||
bottom:0px;
|
|
||||||
}
|
|
||||||
.chart-warring-popper[x-placement^=bottom] .popper__arrow::after {
|
|
||||||
border-bottom-color: #e6a23c;
|
|
||||||
}
|
|
||||||
.popper__arrow::after{
|
|
||||||
border:solid 3px yellow
|
|
||||||
}
|
|
||||||
.chart-warring-popper{
|
|
||||||
background-color:#e6a23c;
|
|
||||||
color:#FFF;
|
|
||||||
word-wrap:break-word;
|
|
||||||
word-break:break-word;
|
|
||||||
max-width:280px;
|
|
||||||
border: 1px solid #e6a23c;
|
|
||||||
}
|
|
||||||
.moreTitle{
|
|
||||||
.panel-info-corner--error .panel-info-corner-inner {
|
|
||||||
border-left: 28px solid #e6a23c;
|
|
||||||
border-right: none;
|
|
||||||
border-bottom: 28px solid rgba(0,0,0,0);
|
|
||||||
}
|
|
||||||
.panel-info-corner-inner {
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
}
|
|
||||||
.nz-icon-warning:before {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.nz-chart-resize {
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.resize-box {
|
|
||||||
border: 1px solid #d8dce1;
|
|
||||||
position: absolute;
|
|
||||||
box-sizing: border-box;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
.resize-shadow {
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
position: absolute;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
.resize-shadow-active {
|
|
||||||
background-color: #f5f9ff;
|
|
||||||
border: 1px solid #b7d0f7;
|
|
||||||
box-shadow: 1px 1px 1px #d3e1f8;
|
|
||||||
}
|
|
||||||
.drag-disabled .el-dropdown-link {
|
|
||||||
cursor: default !important;
|
|
||||||
}
|
|
||||||
.resize-box {
|
|
||||||
.pagination {
|
|
||||||
padding-top: 0;
|
|
||||||
}
|
|
||||||
.success {
|
|
||||||
background-color: #50d050;
|
|
||||||
color: white;
|
|
||||||
padding: 2px 5px;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
.danger {
|
|
||||||
background-color: #d64f40;
|
|
||||||
color: white;
|
|
||||||
padding:2px 5px;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
.chart-table, .chart-alert-info {
|
|
||||||
width: 100%;
|
|
||||||
.table-container {
|
|
||||||
padding: 0 6px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
.nz-table {
|
|
||||||
margin-top: 6px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.chart-single-stat {
|
|
||||||
width: 100%;
|
|
||||||
.single-stat-container {
|
|
||||||
padding-left: 8px;
|
|
||||||
padding-right: 8px;
|
|
||||||
display: table;
|
|
||||||
text-align: center;
|
|
||||||
width: calc(100% - 16px);
|
|
||||||
.single-stat-content{
|
|
||||||
text-align:center;
|
|
||||||
vertical-align: middle;
|
|
||||||
display:table-cell;
|
|
||||||
font-size:30px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.chart-container.chart-detail {
|
|
||||||
height: 100%;
|
|
||||||
position: relative;
|
|
||||||
background-color: white;
|
|
||||||
.chart-title:hover {
|
|
||||||
background-color:#d8dce1;
|
|
||||||
}
|
|
||||||
.chart-title:not(.drag-disabled) {
|
|
||||||
cursor: move;
|
|
||||||
}
|
|
||||||
.chart-title {
|
|
||||||
text-align: center;
|
|
||||||
width: 100%;
|
|
||||||
line-height: 30px;
|
|
||||||
padding: 1px 3px 0 3px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
.nz-chart-top{
|
|
||||||
width:100%;
|
|
||||||
}
|
|
||||||
.el-dropdown-link {
|
|
||||||
cursor: move;
|
|
||||||
}
|
|
||||||
.nz-icon-arrow-down {
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
.chart-title-text {
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: 26px;
|
|
||||||
color: #52545c;
|
|
||||||
display:flex;
|
|
||||||
justify-content:center;
|
|
||||||
align-items:center;
|
|
||||||
max-width:calc(100% - 20px);
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
.chart-title-icon{
|
|
||||||
display: inline-block;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.chart-info {
|
|
||||||
padding-top: 6px;
|
|
||||||
width: 100%;
|
|
||||||
height: calc(100% - 34px);
|
|
||||||
}
|
|
||||||
.active-icon {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
.chart-sub {
|
|
||||||
padding: 0 15px;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
:last-of-type {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.chart-sub-title {
|
|
||||||
background-color: #efefef;
|
|
||||||
font-size: 13px;
|
|
||||||
color: #505255;
|
|
||||||
padding-left: 2px;
|
|
||||||
height: 25px;
|
|
||||||
line-height: 25px;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
.chart-sub-content, .chart-third-content, .chart-forth-content {
|
|
||||||
width: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
>.content-item>.item-tip {
|
|
||||||
display: inline-block;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
>.content-item>.item-tip:not(.content-item-value-muti) {
|
|
||||||
padding: 0 3px 0 13px;
|
|
||||||
}
|
|
||||||
>.content-item {
|
|
||||||
font-size: 13px;
|
|
||||||
line-height: 26px;
|
|
||||||
border-top: 1px solid rgb(235, 238, 245);
|
|
||||||
display: flex;
|
|
||||||
position: relative;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
.item-tip> {
|
|
||||||
.item-tip-hide {
|
|
||||||
display: none;
|
|
||||||
position: absolute;
|
|
||||||
bottom: 34px;
|
|
||||||
min-width: 50px;
|
|
||||||
white-space: normal;
|
|
||||||
}
|
|
||||||
.item-tip-key {
|
|
||||||
left: 17%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
width: 33%;
|
|
||||||
}
|
|
||||||
.item-tip-value {
|
|
||||||
left: 67%;
|
|
||||||
width: 63%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
}
|
|
||||||
.item-tip-hide::after {
|
|
||||||
content: '';
|
|
||||||
display: block;
|
|
||||||
width:0;
|
|
||||||
height:0;
|
|
||||||
overflow: hidden;
|
|
||||||
font-size: 0;
|
|
||||||
line-height: 0;
|
|
||||||
border: 5px;
|
|
||||||
border-style: dashed dashed solid dashed;
|
|
||||||
border-color: white transparent transparent transparent;
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
bottom: 0;
|
|
||||||
transform: translate(-50%, 10px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.item-tip:hover>.item-tip-show {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.item-tip.deep {
|
|
||||||
padding-left: 26px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
height: 26px;
|
|
||||||
}
|
|
||||||
.item-tip.deepp {
|
|
||||||
padding-left: 39px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
height: 26px;
|
|
||||||
}
|
|
||||||
.item-tip.deep:nth-of-type(2) {
|
|
||||||
padding-left: 13px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
height: 26px;
|
|
||||||
}
|
|
||||||
.item-tip.deepp:last-of-type {
|
|
||||||
padding-left: 13px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
height: 26px;
|
|
||||||
}
|
|
||||||
.tag-value:hover .item-tip-show {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.tag-value {
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
.content-item-key {
|
|
||||||
color: #666;
|
|
||||||
width: 35%;
|
|
||||||
height: 26px;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
.content-item-key .no-overflow, .content-item-value .no-overflow {
|
|
||||||
text-overflow: unset;
|
|
||||||
white-space: normal;
|
|
||||||
}
|
|
||||||
.content-item-value {
|
|
||||||
.item-value-sub {
|
|
||||||
padding: 0 3px 0 13px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
.item-value-sub:not(:last-of-type) {
|
|
||||||
border-bottom: 1px solid rgb(235, 238, 245);
|
|
||||||
}
|
|
||||||
.nz-table {
|
|
||||||
th .cell {
|
|
||||||
height: 25px;
|
|
||||||
line-height: 25px;
|
|
||||||
}
|
|
||||||
td .cell {
|
|
||||||
min-height: 26px;
|
|
||||||
line-height: 26px;
|
|
||||||
}
|
|
||||||
.el-table__body {
|
|
||||||
background-color: white;
|
|
||||||
}
|
|
||||||
.el-table__body tr:last-of-type td {
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
.el-table__body tr td {
|
|
||||||
background-color: white;
|
|
||||||
}
|
|
||||||
.el-table__body tr:hover>td {
|
|
||||||
background-color: white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
border-left: 1px solid rgb(235, 238, 245);
|
|
||||||
color: #1a1a1a;
|
|
||||||
width: 65%;
|
|
||||||
height: 99%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.chart-sub-content {
|
|
||||||
>.content-item:first-of-type {
|
|
||||||
border-top: none;
|
|
||||||
}
|
|
||||||
>.content-item:last-of-type {
|
|
||||||
border-bottom: 1px solid rgb(235, 238, 245);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.chart-url {
|
|
||||||
.url-container {
|
|
||||||
padding: 0 8px 8px 8px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.line-chart-block, .chart-table, .chart-single-stat, .chart-url, .chart-asset-info, .chart-alert-info, .chart-project-info, .chart-alert-rule-info ,.vis-network{
|
|
||||||
height: 100%;
|
|
||||||
position: relative;
|
|
||||||
background-color: white;
|
|
||||||
.chartTitle:hover {
|
|
||||||
background-color:#d8dce1;
|
|
||||||
}
|
|
||||||
.chartTitle {
|
|
||||||
text-align: center;
|
|
||||||
width: 100%;
|
|
||||||
line-height: 30px;
|
|
||||||
height: 28px;
|
|
||||||
padding: 1px 3px 0 3px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
.nz-chart-top{
|
|
||||||
width:100%;
|
|
||||||
}
|
|
||||||
.el-dropdown-link {
|
|
||||||
cursor: move;
|
|
||||||
}
|
|
||||||
.nz-icon-arrow-down {
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
.chart-title {
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: 26px;
|
|
||||||
color: #52545c;
|
|
||||||
display:flex;
|
|
||||||
justify-content:center;
|
|
||||||
align-items:center;
|
|
||||||
.chart-title-text{
|
|
||||||
max-width:calc(100% - 20px);
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.chart-title-icon{
|
|
||||||
display: inline-block;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.line-area {
|
|
||||||
box-sizing: border-box;
|
|
||||||
background: #FFF;
|
|
||||||
min-height: 95px;
|
|
||||||
padding-left:8px;
|
|
||||||
padding-right:8px;
|
|
||||||
}
|
|
||||||
.button-panel-height{
|
|
||||||
height:26px;
|
|
||||||
}
|
|
||||||
.button-panel-height button{
|
|
||||||
height:26px;
|
|
||||||
}
|
|
||||||
.edit {
|
|
||||||
position: absolute;
|
|
||||||
right: 20px;
|
|
||||||
top: 17px;
|
|
||||||
z-index: 10;
|
|
||||||
|
|
||||||
}
|
|
||||||
.chart-select {
|
|
||||||
position: absolute;
|
|
||||||
left: 40px;
|
|
||||||
top: 25px;
|
|
||||||
z-index: 10;
|
|
||||||
font-size: 14px;
|
|
||||||
.chart-select-btn {
|
|
||||||
margin-right: 10px;
|
|
||||||
cursor: pointer;
|
|
||||||
&.active {
|
|
||||||
color: #5aacff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/*没有数据显示*/
|
|
||||||
.null {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 24px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.dialog-tool {
|
|
||||||
margin-right: 40px;
|
|
||||||
}
|
|
||||||
.line-chart-block-modal {
|
|
||||||
.el-dialog{
|
|
||||||
height: 80%;
|
|
||||||
}
|
|
||||||
.line-area {
|
|
||||||
box-sizing: border-box;
|
|
||||||
background: #FFF;
|
|
||||||
height: 100%;
|
|
||||||
span.highcharts-title {/*针对highcharts设置的样式，echarts需要修改？？*/
|
|
||||||
display: block !important;
|
|
||||||
width: 50%;
|
|
||||||
font-size: 14px !important;
|
|
||||||
overflow: hidden;
|
|
||||||
word-wrap: break-word !important;
|
|
||||||
white-space: pre-wrap !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.element-top-border {
|
|
||||||
padding-bottom: 5px;
|
|
||||||
border-top: 1px solid #dfe7f2;
|
|
||||||
margin-top:-25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.element-bottom-border {
|
|
||||||
border-bottom: 1px solid #dfe7f2;
|
|
||||||
margin-bottom:-20px;
|
|
||||||
}
|
|
||||||
.pt10{
|
|
||||||
padding-top:10px;
|
|
||||||
}
|
|
||||||
.el-dialog__body {
|
|
||||||
height: calc(100% - 80px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-dialog__header{
|
|
||||||
padding: 20px 20px 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -1,689 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="chart-box">
|
|
||||||
<div v-for="(item, index) in dataList" :key="item.id" :id="'chart-' + item.id" :name="item.title" v-show="!item.isHide" class="chart">
|
|
||||||
<lineChars
|
|
||||||
v-if="item.type === 'line' || item.type === 'bar' ||item.type == 'stackArea' || item.type === 4"
|
|
||||||
:key="'inner' + item.id"
|
|
||||||
:ref="'editChart'+item.id"
|
|
||||||
@on-refresh-data="refreshChart"
|
|
||||||
@on-remove-chart-block="removeChart"
|
|
||||||
:panel-id="index"
|
|
||||||
:chart-index="index"
|
|
||||||
:chart-data="item"
|
|
||||||
v-loading="item.loading"
|
|
||||||
@loadingFalse="loadingFalse"
|
|
||||||
>
|
|
||||||
</lineChars>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import axios from 'axios';
|
|
||||||
import bus from '@/libs/bus';
|
|
||||||
import chartDataFormat from "@/components/charts/chartDataFormat";
|
|
||||||
import lineChars from "./lineChart";
|
|
||||||
export default {
|
|
||||||
name:"totalChart",
|
|
||||||
components:{
|
|
||||||
lineChars
|
|
||||||
},
|
|
||||||
props:{
|
|
||||||
nodesArray:{},
|
|
||||||
moduleId:{},
|
|
||||||
projectId:{},
|
|
||||||
},
|
|
||||||
watch:{
|
|
||||||
|
|
||||||
},
|
|
||||||
data(){
|
|
||||||
return{
|
|
||||||
dataList:[],
|
|
||||||
filter:{
|
|
||||||
panelId:'',
|
|
||||||
start_time:'',
|
|
||||||
end_time:'',
|
|
||||||
},
|
|
||||||
chartDataCacheGroup:new Map
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted(){
|
|
||||||
let item = {...this.nodesArray.find((item)=>item.id==this.moduleId)};
|
|
||||||
let arr=[];
|
|
||||||
item.expressions.forEach((item1,index)=>{
|
|
||||||
let obj={...item,elements:[{...item1,expression:item1.metric,}],isHide:false,type:'line',title:item1.name,id:index,loading:true};
|
|
||||||
obj.unit=item1.unit;
|
|
||||||
arr.push(obj)
|
|
||||||
});
|
|
||||||
this.dataList=arr;
|
|
||||||
this.$nextTick(()=>{
|
|
||||||
arr.forEach(item1=>{
|
|
||||||
this.getData(item1, '', '');
|
|
||||||
})
|
|
||||||
});
|
|
||||||
this.$set(this.filter, "panelId", this.projectId);
|
|
||||||
},
|
|
||||||
methods:{
|
|
||||||
//刷新图表
|
|
||||||
refreshChart(chartId,searchTime) {
|
|
||||||
this.dataList.forEach((item, index) => {
|
|
||||||
if (item.id === chartId) {
|
|
||||||
this.getChartData(item, index, 'refresh');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
// 删除图表
|
|
||||||
removeChart(chartId) { //from 区分从哪里点击的删除 1.从图表面板 2.从编辑框
|
|
||||||
const chart = this.dataList.find(item => item.id === chartId);
|
|
||||||
if (chart) {
|
|
||||||
this.$emit('on-remove-chart', chart);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
//获取图表数据
|
|
||||||
getData(chartInfo, pos, filterType){
|
|
||||||
this.$set(this.filter, "start_time", bus.timeFormate(new Date().getTime()-60*60*1000, "yyyy-MM-dd hh:mm:ss"));
|
|
||||||
this.$set(this.filter, "end_time", bus.timeFormate(new Date().getTime(), "yyyy-MM-dd hh:mm:ss"));
|
|
||||||
let startTime = this.filter.start_time;
|
|
||||||
let endTime = this.filter.end_time;
|
|
||||||
let step = bus.getStep(startTime, endTime);
|
|
||||||
chartInfo.loading=true;
|
|
||||||
const chartItem = chartInfo;
|
|
||||||
this.$nextTick(() => {
|
|
||||||
const axiosArr = chartItem.elements.map((ele) => {
|
|
||||||
const filterItem = ele;
|
|
||||||
let query = encodeURIComponent(filterItem.expression);
|
|
||||||
return this.$get('/prom/api/v1/query_range?query=' + query + "&start=" + this.$stringTimeParseToUnix(startTime) + "&end=" + this.$stringTimeParseToUnix(endTime) + '&step=' + step);
|
|
||||||
});
|
|
||||||
// 一个图表的所有element单独获取数据
|
|
||||||
axios.all(axiosArr).then((res) => {
|
|
||||||
if (res.length > 0) {
|
|
||||||
const series = [];
|
|
||||||
let singleStatRlt = '';
|
|
||||||
const legend = [];
|
|
||||||
const tableData = [];
|
|
||||||
const sumData = {
|
|
||||||
name: 'sum',
|
|
||||||
data: [],
|
|
||||||
visible: true,
|
|
||||||
threshold: null,
|
|
||||||
};
|
|
||||||
let errorMsg = "";
|
|
||||||
res.forEach((response, innerPos) => {
|
|
||||||
if (response.status === 'success') {
|
|
||||||
errorMsg = "";
|
|
||||||
if (response.data.result) {
|
|
||||||
// 循环处理每个elements下获取的数据列
|
|
||||||
if (chartItem.type === 'singleStat') {
|
|
||||||
if (response.data.result.length === 1) {
|
|
||||||
let statistics = chartItem.param.statistics;
|
|
||||||
if (response.data.result[0].values) {
|
|
||||||
singleStatRlt = bus.getSingleStatRlt(statistics, response.data.result[0].values);
|
|
||||||
}
|
|
||||||
} else if (response.data.result.length > 1) {
|
|
||||||
singleStatRlt = this.$t("dashboard.panel.singleStatErrorTip");
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
response.data.result.forEach((queryItem, resIndex) => {
|
|
||||||
const seriesItem = {
|
|
||||||
theData: {
|
|
||||||
name: '',
|
|
||||||
symbol: 'emptyCircle', //去掉点
|
|
||||||
symbolSize: [2, 2],
|
|
||||||
smooth: 0.2, //曲线变平滑
|
|
||||||
showSymbol: false,
|
|
||||||
data: [],
|
|
||||||
lineStyle: {
|
|
||||||
width: 1,
|
|
||||||
opacity: 0.9
|
|
||||||
},
|
|
||||||
type: chartInfo.type,
|
|
||||||
},
|
|
||||||
metric_name: '',
|
|
||||||
};
|
|
||||||
|
|
||||||
if (chartInfo.type === 'stackArea') {
|
|
||||||
seriesItem.theData.type = 'line';
|
|
||||||
seriesItem.theData.stack = chartInfo.title;
|
|
||||||
seriesItem.theData.areaStyle = {"opacity": 0.3};
|
|
||||||
}
|
|
||||||
if((chartInfo.type === 'line'||chartInfo.type === 'stackArea'||chartInfo.type === 'bar')&& chartInfo.param && chartInfo.param.threshold){
|
|
||||||
seriesItem.theData.markLine={
|
|
||||||
silent: true,
|
|
||||||
symbol:['circle','circle'],
|
|
||||||
label:{
|
|
||||||
distance:this.computeDistance(chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(chartInfo.param.threshold)),
|
|
||||||
formatter:function(params){
|
|
||||||
return chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(params.value)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
lineStyle:{
|
|
||||||
color:'#d64f40',
|
|
||||||
width:2,
|
|
||||||
type:'dotted'
|
|
||||||
},
|
|
||||||
data: [{
|
|
||||||
yAxis: Number(chartInfo.param.threshold)
|
|
||||||
}, ]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// 图表中每条线的名字,后半部分
|
|
||||||
let host = '';//up,
|
|
||||||
if (queryItem.metric.__name__) {
|
|
||||||
host = `${queryItem.metric.__name__}{`;//up,
|
|
||||||
}
|
|
||||||
const tagsArr = Object.keys(queryItem.metric);//["__name__","asset","idc","instance","job","module","project"]
|
|
||||||
// 设置时间-数据格式对
|
|
||||||
let tempArr = [];
|
|
||||||
let dpsArr = [];
|
|
||||||
tempArr = queryItem.values;
|
|
||||||
dpsArr = Object.entries(queryItem.values);//[ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]
|
|
||||||
dpsArr = dpsArr.map(item => {
|
|
||||||
return [item[0], [item[1][0], Number(item[1][1])]]
|
|
||||||
});
|
|
||||||
// 判断是否有数据, && tagsArr.length > 0
|
|
||||||
if (dpsArr.length > 0 && this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
|
|
||||||
tagsArr.forEach((tag, i) => {
|
|
||||||
if (tag !== '__name__') {
|
|
||||||
host += `${tag}="${queryItem.metric[tag]}",`;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
if (host.endsWith(',')) {
|
|
||||||
host = host.substr(0, host.length - 1);
|
|
||||||
}
|
|
||||||
if (queryItem.metric.__name__) {
|
|
||||||
host += "}";
|
|
||||||
}
|
|
||||||
if (!host || host === '') {
|
|
||||||
host = chartItem.elements[innerPos].expression;
|
|
||||||
}
|
|
||||||
//处理legend别名
|
|
||||||
let alias = this.$refs['editChart' + chartItem.id][0].dealLegendAlias(host, chartItem.elements[innerPos].legend);
|
|
||||||
if (!alias || alias === '') {
|
|
||||||
alias = host;
|
|
||||||
}
|
|
||||||
legend.push({name: host + resIndex, alias: alias});
|
|
||||||
// 图表中每条线的名字,去掉最后的逗号与空格:metric名称, 标签1=a,标签2=c
|
|
||||||
seriesItem.theData.name = host + resIndex;
|
|
||||||
//alert(seriesItem.theData.name);
|
|
||||||
seriesItem.metric_name = seriesItem.theData.name;
|
|
||||||
// 将秒改为毫秒
|
|
||||||
//alert('table=='+JSON.stringify(queryItem))
|
|
||||||
seriesItem.theData.data = tempArr.map((dpsItem, dpsIndex) => {
|
|
||||||
let t_date = new Date(dpsItem[0] * 1000);
|
|
||||||
let timeTmp = bus.timeFormate(t_date, 'yyyy-MM-dd hh:mm:ss');
|
|
||||||
tableData.push({//表格数据
|
|
||||||
element: {element: host, alias: alias},
|
|
||||||
time: timeTmp,//采集时间
|
|
||||||
value: dpsItem[1],//数值
|
|
||||||
});
|
|
||||||
return [dpsItem[0] * 1000, dpsItem[1]];
|
|
||||||
});
|
|
||||||
series.push(seriesItem.theData);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
if (response.msg) {
|
|
||||||
//this.$message.error(response.msg);
|
|
||||||
errorMsg = response.msg;
|
|
||||||
} else if (response.error) {
|
|
||||||
//this.$message.error(response.error);
|
|
||||||
errorMsg = response.error;
|
|
||||||
} else {
|
|
||||||
//this.$message.error(response);
|
|
||||||
errorMsg = response;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
|
|
||||||
let chartData = {
|
|
||||||
chartItem: chartItem,
|
|
||||||
series: series,
|
|
||||||
singleStatRlt: singleStatRlt,
|
|
||||||
legend: legend,
|
|
||||||
tableData: tableData,
|
|
||||||
panelId: this.filter.panelId,
|
|
||||||
filter: this.filter,
|
|
||||||
filterType: filterType,
|
|
||||||
errorMsg: errorMsg,
|
|
||||||
}
|
|
||||||
this.chartDataCacheGroup.set(chartInfo.id, chartData);
|
|
||||||
if (chartItem.type === 'table') {//表格
|
|
||||||
if (filterType === 'showFullScreen') {//全屏查询
|
|
||||||
this.$refs['editChart' + chartItem.id][0].setData(chartItem, tableData,
|
|
||||||
this.filter.panelId, this.filter, filterType, errorMsg);
|
|
||||||
} else {
|
|
||||||
this.$refs['editChart' + chartItem.id][0].setData(chartItem, tableData,
|
|
||||||
this.filter.panelId, this.filter, '', errorMsg);
|
|
||||||
}
|
|
||||||
} else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4) {
|
|
||||||
if (series.length && chartItem.type === 4) {//曲线汇总
|
|
||||||
//series.push(sumData);//后续需要
|
|
||||||
}
|
|
||||||
if (filterType === 'showFullScreen') {//全屏查询
|
|
||||||
this.$refs['editChart' + chartItem.id][0].setData(chartItem, series,
|
|
||||||
this.filter.panelId, this.filter, legend, filterType, errorMsg);
|
|
||||||
} else {
|
|
||||||
this.$refs['editChart' + chartItem.id][0].setData(chartItem, series,
|
|
||||||
this.filter.panelId, this.filter, legend, '', errorMsg);
|
|
||||||
}
|
|
||||||
} else if (chartItem.type === 'singleStat') {
|
|
||||||
if (filterType === 'showFullScreen') {//全屏查询
|
|
||||||
this.$refs['editChart' + chartItem.id][0].setData(chartItem, singleStatRlt,
|
|
||||||
this.filter.panelId, this.filter, filterType, errorMsg);
|
|
||||||
} else {
|
|
||||||
this.$refs['editChart' + chartItem.id][0].setData(chartItem, singleStatRlt,
|
|
||||||
this.filter.panelId, this.filter, '', errorMsg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
const type = chartItem.type;
|
|
||||||
if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
|
|
||||||
if (type === 'table') {
|
|
||||||
if (filterType === 'showFullScreen') {//table的全屏查询
|
|
||||||
this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId,
|
|
||||||
this.filter, filterType);
|
|
||||||
} else {
|
|
||||||
this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId,
|
|
||||||
this.filter);
|
|
||||||
}
|
|
||||||
} else if (type === 'line' || type === 'bar' || type === 'stackArea' || chartItem.type === 4) {
|
|
||||||
if (filterType === 'showFullScreen') {//table的全屏查询
|
|
||||||
this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId,
|
|
||||||
this.filter, filterType);
|
|
||||||
} else {
|
|
||||||
this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId,
|
|
||||||
this.filter);
|
|
||||||
}
|
|
||||||
} else if (chartItem.type === 'singleStat') {
|
|
||||||
if (filterType === 'showFullScreen') {//全屏查询
|
|
||||||
this.$refs['editChart' + chartItem.id][0].setData(chartItem, '',
|
|
||||||
this.filter.panelId, this.filter, filterType);
|
|
||||||
} else {
|
|
||||||
this.$refs['editChart' + chartItem.id][0].setData(chartItem, '',
|
|
||||||
this.filter.panelId, this.filter);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}).catch((error) => {
|
|
||||||
if (error) {
|
|
||||||
this.$message.error(error.toString());
|
|
||||||
console.error(error)
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
getChartDataForSearch(chartItem,realIndex){
|
|
||||||
let chartData = this.chartDataCacheGroup.get(chartItem.id);
|
|
||||||
if(chartData){
|
|
||||||
let filterType = chartData.filterType;
|
|
||||||
let errorMsg = chartData.errorMsg;
|
|
||||||
let tableData = chartData.tableData;
|
|
||||||
let panelId = chartData.panelId;
|
|
||||||
let filter = chartData.filter;
|
|
||||||
let legend = chartData.legend;
|
|
||||||
let series = chartData.series;
|
|
||||||
let singleStatRlt = chartData.singleStatRlt;
|
|
||||||
if(this.$refs['editChart'+chartItem.id] && this.$refs['editChart'+chartItem.id].length>0) {
|
|
||||||
if (chartItem.type === 'table') {//表格
|
|
||||||
if (filterType === 'showFullScreen') {//全屏查询
|
|
||||||
this.$refs['editChart'+chartItem.id][0].setData(chartItem, tableData,
|
|
||||||
panelId, filter, filterType,errorMsg);
|
|
||||||
} else {
|
|
||||||
this.$refs['editChart'+chartItem.id][0].setData(chartItem, tableData,
|
|
||||||
panelId, filter,'',errorMsg);
|
|
||||||
}
|
|
||||||
} else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4) {
|
|
||||||
if (filterType === 'showFullScreen') {//全屏查询
|
|
||||||
this.$refs['editChart'+chartItem.id][0].setData(chartItem, series,
|
|
||||||
panelId, filter, legend, filterType,errorMsg);
|
|
||||||
} else {
|
|
||||||
this.$refs['editChart'+chartItem.id][0].setData(chartItem, series,
|
|
||||||
panelId, filter, legend,'',errorMsg);
|
|
||||||
}
|
|
||||||
}else if(chartItem.type ==='singleStat'){
|
|
||||||
if (filterType === 'showFullScreen') {//全屏查询
|
|
||||||
this.$refs['editChart'+chartItem.id][0].setData(chartItem, singleStatRlt,
|
|
||||||
this.filter.panelId, this.filter, filterType,errorMsg);
|
|
||||||
} else {
|
|
||||||
this.$refs['editChart'+chartItem.id][0].setData(chartItem, singleStatRlt,
|
|
||||||
this.filter.panelId, this.filter,'',errorMsg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}else {
|
|
||||||
this.getChartData(chartItem, realIndex);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// 获取一个图表具体数据,图表信息，图表位置index
|
|
||||||
getChartData(chartInfo, pos, filterType) {
|
|
||||||
const chartItem = chartInfo;
|
|
||||||
const index = pos; // 指标
|
|
||||||
if(chartItem.type === 'assetInfo'){
|
|
||||||
if (chartItem.from != 'endpoint') {
|
|
||||||
this.$set(chartItem, "draggable", true);
|
|
||||||
this.$set(chartItem, "resizable", true);
|
|
||||||
}
|
|
||||||
this.getAssetInfoChartData(chartItem);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if(chartItem.type === 'endpointInfo'){
|
|
||||||
this.getEndpointInfoChartData(chartItem);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if(chartItem.type == 'projectInfo'){
|
|
||||||
chartItem.title = this.$t("project.chart.projectInfo");
|
|
||||||
this.getProjectInfoChartData(chartItem);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if(chartItem.type === 'alertList'){
|
|
||||||
this.getAlertListChartData(chartItem,filterType);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if(chartItem.type === 'alertRuleInfo'){
|
|
||||||
this.getAlertRuleChartData(chartItem);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.isModel) {
|
|
||||||
this.modelStaticData(chartInfo, filterType);
|
|
||||||
} else {
|
|
||||||
// 没有数据的设置提示信息暂无数据-针对每一个图
|
|
||||||
const len = chartItem.elements.length;
|
|
||||||
if (len === 0) {
|
|
||||||
this.$nextTick(() => {
|
|
||||||
if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
|
|
||||||
this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId, this.filter);//????怎么设置的无数据？？
|
|
||||||
}
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
let startTime = '';
|
|
||||||
let endTime = '';
|
|
||||||
if (filterType === 'refresh') {//刷新
|
|
||||||
const now = new Date();
|
|
||||||
const origin = new Date(this.filter.end_time);
|
|
||||||
const numInterval = now.getTime() - origin.getTime();
|
|
||||||
if (numInterval >= 60000) {//大于1分钟，则start、end均往后移numInterval，否则时间不变
|
|
||||||
startTime = this.getNewTime(this.filter.start_time, numInterval);
|
|
||||||
endTime = bus.timeFormate(now, 'yyyy-MM-dd hh:mm:ss');
|
|
||||||
} else {
|
|
||||||
startTime = this.filter.start_time;
|
|
||||||
endTime = this.filter.end_time;
|
|
||||||
}
|
|
||||||
} else if (filterType === 'showFullScreen') {//全屏时间查询
|
|
||||||
startTime = this.filter.start_time;
|
|
||||||
endTime = this.filter.end_time;
|
|
||||||
//this.$parent.refreshTime(startTime,endTime);全屏查询，不更新panel列表的时间条件
|
|
||||||
} else {
|
|
||||||
startTime = this.filter.start_time;
|
|
||||||
endTime = this.filter.end_time;
|
|
||||||
}
|
|
||||||
let step = bus.getStep(startTime, endTime);
|
|
||||||
this.$nextTick(() => {
|
|
||||||
const axiosArr = chartItem.elements.map((ele) => {
|
|
||||||
const filterItem = ele;
|
|
||||||
let query = encodeURIComponent(filterItem.expression);
|
|
||||||
return this.$get('/prom/api/v1/query_range?query=' + query + "&start=" + this.$stringTimeParseToUnix(startTime) + "&end=" + this.$stringTimeParseToUnix(endTime) + '&step=' + step);
|
|
||||||
});
|
|
||||||
// 一个图表的所有element单独获取数据
|
|
||||||
axios.all(axiosArr).then((res) => {
|
|
||||||
if (res.length > 0) {
|
|
||||||
const series = [];
|
|
||||||
let singleStatRlt = '';
|
|
||||||
const legend = [];
|
|
||||||
const tableData = [];
|
|
||||||
const sumData = {
|
|
||||||
name: 'sum',
|
|
||||||
data: [],
|
|
||||||
visible: true,
|
|
||||||
threshold: null,
|
|
||||||
};
|
|
||||||
let errorMsg = "";
|
|
||||||
res.forEach((response, innerPos) => {
|
|
||||||
if (response.status === 'success') {
|
|
||||||
errorMsg = "";
|
|
||||||
if (response.data.result) {
|
|
||||||
// 循环处理每个elements下获取的数据列
|
|
||||||
if (chartItem.type === 'singleStat') {
|
|
||||||
if (response.data.result.length === 1) {
|
|
||||||
let statistics = chartItem.param.statistics;
|
|
||||||
if (response.data.result[0].values) {
|
|
||||||
singleStatRlt = bus.getSingleStatRlt(statistics, response.data.result[0].values);
|
|
||||||
}
|
|
||||||
} else if (response.data.result.length > 1) {
|
|
||||||
singleStatRlt = this.$t("dashboard.panel.singleStatErrorTip");
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
response.data.result.forEach((queryItem, resIndex) => {
|
|
||||||
const seriesItem = {
|
|
||||||
theData: {
|
|
||||||
name: '',
|
|
||||||
symbol: 'emptyCircle', //去掉点
|
|
||||||
symbolSize: [2, 2],
|
|
||||||
smooth: 0.2, //曲线变平滑
|
|
||||||
showSymbol: false,
|
|
||||||
data: [],
|
|
||||||
lineStyle: {
|
|
||||||
width: 1,
|
|
||||||
opacity: 0.9
|
|
||||||
},
|
|
||||||
type: chartInfo.type,
|
|
||||||
},
|
|
||||||
metric_name: '',
|
|
||||||
};
|
|
||||||
|
|
||||||
if (chartInfo.type === 'stackArea') {
|
|
||||||
seriesItem.theData.type = 'line';
|
|
||||||
seriesItem.theData.stack = chartInfo.title;
|
|
||||||
seriesItem.theData.areaStyle = {"opacity": 0.3};
|
|
||||||
}
|
|
||||||
if((chartInfo.type === 'line'||chartInfo.type === 'stackArea'||chartInfo.type === 'bar')&& chartInfo.param && chartInfo.param.threshold){
|
|
||||||
seriesItem.theData.markLine={
|
|
||||||
silent: true,
|
|
||||||
symbol:['circle','circle'],
|
|
||||||
label:{
|
|
||||||
distance:this.computeDistance(chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(chartInfo.param.threshold)),
|
|
||||||
formatter:function(params){
|
|
||||||
return chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(params.value)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
lineStyle:{
|
|
||||||
color:'#d64f40',
|
|
||||||
width:2,
|
|
||||||
type:'dotted'
|
|
||||||
},
|
|
||||||
data: [{
|
|
||||||
yAxis: Number(chartInfo.param.threshold)
|
|
||||||
}, ]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// 图表中每条线的名字,后半部分
|
|
||||||
let host = '';//up,
|
|
||||||
if (queryItem.metric.__name__) {
|
|
||||||
host = `${queryItem.metric.__name__}{`;//up,
|
|
||||||
}
|
|
||||||
const tagsArr = Object.keys(queryItem.metric);//["__name__","asset","idc","instance","job","module","project"]
|
|
||||||
// 设置时间-数据格式对
|
|
||||||
let tempArr = [];
|
|
||||||
let dpsArr = [];
|
|
||||||
tempArr = queryItem.values;
|
|
||||||
dpsArr = Object.entries(queryItem.values);//[ ["0",[1577959830.781,"0"]], ["1",[1577959845.781,"0"]] ]
|
|
||||||
dpsArr = dpsArr.map(item => {
|
|
||||||
return [item[0], [item[1][0], Number(item[1][1])]]
|
|
||||||
});
|
|
||||||
// 判断是否有数据, && tagsArr.length > 0
|
|
||||||
if (dpsArr.length > 0 && this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
|
|
||||||
tagsArr.forEach((tag, i) => {
|
|
||||||
if (tag !== '__name__') {
|
|
||||||
host += `${tag}="${queryItem.metric[tag]}",`;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
if (host.endsWith(',')) {
|
|
||||||
host = host.substr(0, host.length - 1);
|
|
||||||
}
|
|
||||||
if (queryItem.metric.__name__) {
|
|
||||||
host += "}";
|
|
||||||
}
|
|
||||||
if (!host || host === '') {
|
|
||||||
host = chartItem.elements[innerPos].expression;
|
|
||||||
}
|
|
||||||
//处理legend别名
|
|
||||||
let alias = this.$refs['editChart' + chartItem.id][0].dealLegendAlias(host, chartItem.elements[innerPos].legend);
|
|
||||||
if (!alias || alias === '') {
|
|
||||||
alias = host;
|
|
||||||
}
|
|
||||||
legend.push({name: host + resIndex, alias: alias});
|
|
||||||
// 图表中每条线的名字,去掉最后的逗号与空格:metric名称, 标签1=a,标签2=c
|
|
||||||
seriesItem.theData.name = host + resIndex;
|
|
||||||
//alert(seriesItem.theData.name);
|
|
||||||
seriesItem.metric_name = seriesItem.theData.name;
|
|
||||||
// 将秒改为毫秒
|
|
||||||
//alert('table=='+JSON.stringify(queryItem))
|
|
||||||
seriesItem.theData.data = tempArr.map((dpsItem, dpsIndex) => {
|
|
||||||
let t_date = new Date(dpsItem[0] * 1000);
|
|
||||||
let timeTmp = bus.timeFormate(t_date, 'yyyy-MM-dd hh:mm:ss');
|
|
||||||
tableData.push({//表格数据
|
|
||||||
// label: host.slice(host.indexOf('{') + 1,host.indexOf('}')),//label
|
|
||||||
// metric: queryItem.metric.__name__?queryItem.metric.__name__:'',//metric列
|
|
||||||
element: {element: host, alias: alias},
|
|
||||||
time: timeTmp,//采集时间
|
|
||||||
value: dpsItem[1],//数值
|
|
||||||
});
|
|
||||||
return [dpsItem[0] * 1000, dpsItem[1]];
|
|
||||||
});
|
|
||||||
series.push(seriesItem.theData);
|
|
||||||
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
if (response.msg) {
|
|
||||||
//this.$message.error(response.msg);
|
|
||||||
errorMsg = response.msg;
|
|
||||||
} else if (response.error) {
|
|
||||||
//this.$message.error(response.error);
|
|
||||||
errorMsg = response.error;
|
|
||||||
} else {
|
|
||||||
//this.$message.error(response);
|
|
||||||
errorMsg = response;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
|
|
||||||
let chartData = {
|
|
||||||
chartItem: chartItem,
|
|
||||||
series: series,
|
|
||||||
singleStatRlt: singleStatRlt,
|
|
||||||
legend: legend,
|
|
||||||
tableData: tableData,
|
|
||||||
panelId: this.filter.panelId,
|
|
||||||
filter: this.filter,
|
|
||||||
filterType: filterType,
|
|
||||||
errorMsg: errorMsg,
|
|
||||||
};
|
|
||||||
this.chartDataCacheGroup.set(chartInfo.id, chartData);
|
|
||||||
if (chartItem.type === 'table') {//表格
|
|
||||||
if (filterType === 'showFullScreen') {//全屏查询
|
|
||||||
this.$refs['editChart' + chartItem.id][0].setData(chartItem, tableData,
|
|
||||||
this.filter.panelId, this.filter, filterType, errorMsg);
|
|
||||||
} else {
|
|
||||||
this.$refs['editChart' + chartItem.id][0].setData(chartItem, tableData,
|
|
||||||
this.filter.panelId, this.filter, '', errorMsg);
|
|
||||||
}
|
|
||||||
} else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4) {
|
|
||||||
if (series.length && chartItem.type === 4) {//曲线汇总
|
|
||||||
//series.push(sumData);//后续需要
|
|
||||||
}
|
|
||||||
if (filterType === 'showFullScreen') {//全屏查询
|
|
||||||
this.$refs['editChart' + chartItem.id][0].setData(chartItem, series,
|
|
||||||
this.filter.panelId, this.filter, legend, filterType, errorMsg);
|
|
||||||
} else {
|
|
||||||
this.$refs['editChart' + chartItem.id][0].setData(chartItem, series,
|
|
||||||
this.filter.panelId, this.filter, legend, '', errorMsg);
|
|
||||||
}
|
|
||||||
} else if (chartItem.type === 'singleStat') {
|
|
||||||
if (filterType === 'showFullScreen') {//全屏查询
|
|
||||||
this.$refs['editChart' + chartItem.id][0].setData(chartItem, singleStatRlt,
|
|
||||||
this.filter.panelId, this.filter, filterType, errorMsg);
|
|
||||||
} else {
|
|
||||||
this.$refs['editChart' + chartItem.id][0].setData(chartItem, singleStatRlt,
|
|
||||||
this.filter.panelId, this.filter, '', errorMsg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
const type = chartItem.type;
|
|
||||||
if (this.$refs['editChart' + chartItem.id] && this.$refs['editChart' + chartItem.id].length > 0) {
|
|
||||||
if (type === 'table') {
|
|
||||||
if (filterType === 'showFullScreen') {//table的全屏查询
|
|
||||||
this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId,
|
|
||||||
this.filter, filterType);
|
|
||||||
} else {
|
|
||||||
this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId,
|
|
||||||
this.filter);
|
|
||||||
}
|
|
||||||
} else if (type === 'line' || type === 'bar' || type === 'stackArea' || chartItem.type === 4) {
|
|
||||||
if (filterType === 'showFullScreen') {//table的全屏查询
|
|
||||||
this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId,
|
|
||||||
this.filter, filterType);
|
|
||||||
} else {
|
|
||||||
this.$refs['editChart' + chartItem.id][0].setData(chartItem, [], this.filter.panelId,
|
|
||||||
this.filter);
|
|
||||||
}
|
|
||||||
} else if (chartItem.type === 'singleStat') {
|
|
||||||
if (filterType === 'showFullScreen') {//全屏查询
|
|
||||||
this.$refs['editChart' + chartItem.id][0].setData(chartItem, '',
|
|
||||||
this.filter.panelId, this.filter, filterType);
|
|
||||||
} else {
|
|
||||||
this.$refs['editChart' + chartItem.id][0].setData(chartItem, '',
|
|
||||||
this.filter.panelId, this.filter);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}).catch((error) => {
|
|
||||||
if (error) {
|
|
||||||
this.$message.error(error.toString());
|
|
||||||
console.error(error)
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
getNewTime(time, num) {
|
|
||||||
const date = new Date(time);
|
|
||||||
const newDate = new Date(parseInt(date.getTime(), 10) + num);
|
|
||||||
return bus.timeFormate(newDate, 'yyyy-MM-dd hh:mm:ss');
|
|
||||||
},
|
|
||||||
// 关闭loading状态
|
|
||||||
loadingFalse(item){
|
|
||||||
this.$set(this.dataList[item.id],'loading',false);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.chart{
|
|
||||||
width: 500px;
|
|
||||||
height: 300px;
|
|
||||||
border: 1px solid #FFFFFF;
|
|
||||||
box-shadow: 1px 2px 4px 0 rgba(0,0,0,0.12), -1px 1px 9px -1px rgba(205,205,205,0.77);
|
|
||||||
margin-bottom: 15px;
|
|
||||||
}
|
|
||||||
.chart-box{
|
|
||||||
/*padding-left: 600px;*/
|
|
||||||
position: relative;
|
|
||||||
max-height: calc(100vh - 100px);
|
|
||||||
padding: 3px 15px 50px 15px;
|
|
||||||
z-index: 11;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -270,10 +270,6 @@
|
|||||||
<div v-if="popDataShow.info">
|
<div v-if="popDataShow.info">
|
||||||
<popDataInfo :moduleId="moduleId" :projectId="projectInfo.id"></popDataInfo>
|
<popDataInfo :moduleId="moduleId" :projectId="projectInfo.id"></popDataInfo>
|
||||||
</div>
|
</div>
|
||||||
<!--chart-->
|
|
||||||
<div v-if="popDataShow.total">
|
|
||||||
<topoTooltip :chartDataParent="chartDataInfo" :filterTime="filterTime" :isChart="true"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<!--endpoint-->
|
<!--endpoint-->
|
||||||
<transition name="right-box">
|
<transition name="right-box">
|
||||||
@@ -340,7 +336,6 @@
|
|||||||
import VueDraggableResizable from 'vue-draggable-resizable';//api https://github.com/mauricius/vue-draggable-resizable
|
import VueDraggableResizable from 'vue-draggable-resizable';//api https://github.com/mauricius/vue-draggable-resizable
|
||||||
import popDataMain from './popData/Main'
|
import popDataMain from './popData/Main'
|
||||||
import popDataInfo from './popData/Info'
|
import popDataInfo from './popData/Info'
|
||||||
import TotalChart from "./popData/totalChart";
|
|
||||||
import alertTable from "./popData/alertTable";
|
import alertTable from "./popData/alertTable";
|
||||||
import assetTable from "./popData/assetTable";
|
import assetTable from "./popData/assetTable";
|
||||||
import endpointTable from "./popData/endpointTable";
|
import endpointTable from "./popData/endpointTable";
|
||||||
@@ -481,7 +476,6 @@
|
|||||||
VueDraggableResizable,
|
VueDraggableResizable,
|
||||||
popDataMain,
|
popDataMain,
|
||||||
popDataInfo,
|
popDataInfo,
|
||||||
TotalChart,
|
|
||||||
alertTable,
|
alertTable,
|
||||||
assetTable,
|
assetTable,
|
||||||
endpointTable,
|
endpointTable,
|
||||||
@@ -602,81 +596,7 @@
|
|||||||
methods:{
|
methods:{
|
||||||
init(){
|
init(){
|
||||||
canvasOptions.on=this.onMessage;
|
canvasOptions.on=this.onMessage;
|
||||||
this.getTopologyData().then((data)=>{
|
this.reload();
|
||||||
this.openTopologyData(data).then(()=>{
|
|
||||||
//获取对应的值 给节点 连线添加对应动画
|
|
||||||
this.lineName=data.lineName?data.lineName:this.lineName;
|
|
||||||
this.chartGetData=[];
|
|
||||||
let axiosArr=[];
|
|
||||||
let promiseArr=[];
|
|
||||||
let self=this;
|
|
||||||
let pensPromise=(pen, arr,index)=>{
|
|
||||||
return new Promise(function(resolve, reject) {
|
|
||||||
Promise.all(arr).then((res)=>{
|
|
||||||
self.chartGetData[index].res=self.computeData(res,pen.data.aggregation,pen);
|
|
||||||
self.setAnimation(pen,self.chartGetData[index].res);
|
|
||||||
resolve()
|
|
||||||
});
|
|
||||||
});
|
|
||||||
};
|
|
||||||
let endTime=this.filterTime[1];
|
|
||||||
let startTime=this.filterTime[0];
|
|
||||||
let step=bus.getStep(startTime,endTime);
|
|
||||||
data.pens&&data.pens.forEach((item,index)=>{
|
|
||||||
this.chartGetData.push({id:item.id,res:[]});
|
|
||||||
let arr=item.data.expressArr.map((ele)=>{
|
|
||||||
let query=encodeURIComponent(ele);
|
|
||||||
if(!query){
|
|
||||||
return new Promise(resolve=>{
|
|
||||||
resolve({data:"",status:'no query'});
|
|
||||||
})
|
|
||||||
}
|
|
||||||
query+='&nullType='+'connected';
|
|
||||||
return this.$get('/prom/api/v1/query_range?query='+query+"&start="+this.$stringTimeParseToUnix(startTime)+"&end="+this.$stringTimeParseToUnix(endTime)+'&step='+step);
|
|
||||||
});
|
|
||||||
axiosArr.push({item,arr});
|
|
||||||
promiseArr.push(pensPromise(item,arr,index))
|
|
||||||
});
|
|
||||||
Promise.all(promiseArr).then((res)=>{
|
|
||||||
getTopology(this.topologyIndex).open(data);
|
|
||||||
getTopology(this.topologyIndex).lock(1);
|
|
||||||
this.objChange=false;
|
|
||||||
let flag=false;
|
|
||||||
|
|
||||||
let position={
|
|
||||||
x:this.$refs['topology-canvas'+this.topologyIndexF].offsetWidth,
|
|
||||||
y:this.$refs['topology-canvas'+this.topologyIndexF].offsetHeight,
|
|
||||||
}
|
|
||||||
getTopology(this.topologyIndex).centerView(20);
|
|
||||||
getTopology(this.topologyIndex).data.pens.forEach(item=>{
|
|
||||||
if(flag){
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if(item.rect.ex>position.x || item.rect.ey>position.y){
|
|
||||||
getTopology(this.topologyIndex).fitView(20);
|
|
||||||
flag=true
|
|
||||||
}
|
|
||||||
});
|
|
||||||
getTopology(this.topologyIndex).centerView(20);
|
|
||||||
this.penToolTipScale= getTopology(this.topologyIndex).data.scale;
|
|
||||||
setTimeout(()=>{
|
|
||||||
getTopology(this.topologyIndex).data.pens.forEach(item=>{
|
|
||||||
if(item.animatePlay){
|
|
||||||
item.stopAnimate();
|
|
||||||
setTimeout(()=>{
|
|
||||||
item.startAnimate()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},100);
|
|
||||||
})
|
|
||||||
// if(this.fromPrev){
|
|
||||||
// getTopology(this.topologyIndex).scaleTo(data.scale/2)
|
|
||||||
// }
|
|
||||||
// getTopology(this.topologyIndex).fitView();
|
|
||||||
this.getNodesArr();
|
|
||||||
});
|
|
||||||
})
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
|
|
||||||
reload(){
|
reload(){
|
||||||
@@ -721,12 +641,10 @@
|
|||||||
getTopology(this.topologyIndex).lock(1);
|
getTopology(this.topologyIndex).lock(1);
|
||||||
this.objChange=false;
|
this.objChange=false;
|
||||||
let flag=false;
|
let flag=false;
|
||||||
|
|
||||||
let position={
|
let position={
|
||||||
x:this.$refs['topology-canvas'+this.topologyIndexF].offsetWidth,
|
x:this.$refs['topology-canvas'+this.topologyIndexF].offsetWidth,
|
||||||
y:this.$refs['topology-canvas'+this.topologyIndexF].offsetHeight,
|
y:this.$refs['topology-canvas'+this.topologyIndexF].offsetHeight,
|
||||||
}
|
}
|
||||||
getTopology(this.topologyIndex).centerView(20);
|
|
||||||
getTopology(this.topologyIndex).data.pens.forEach(item=>{
|
getTopology(this.topologyIndex).data.pens.forEach(item=>{
|
||||||
if(flag){
|
if(flag){
|
||||||
return
|
return
|
||||||
@@ -757,6 +675,7 @@
|
|||||||
})
|
})
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
dateChange() {
|
dateChange() {
|
||||||
let nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType;
|
let nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType;
|
||||||
this.setSearchTime(nowTimeType.type,nowTimeType.value);
|
this.setSearchTime(nowTimeType.type,nowTimeType.value);
|
||||||
@@ -847,7 +766,7 @@
|
|||||||
let self=this;
|
let self=this;
|
||||||
data.pens.forEach((item=>{
|
data.pens.forEach((item=>{
|
||||||
if(item.type===0&&item.data.imageId){
|
if(item.type===0&&item.data.imageId){
|
||||||
item.image=this.iconArray.find(item1=>item1.id==item.data.imageId).image
|
item.image=this.iconArray.find(item1=>item1.id==item.data.imageId).image;
|
||||||
}
|
}
|
||||||
if(item.type===0){
|
if(item.type===0){
|
||||||
promiseArr.push(this.$get('/module/stat',{id:item.data.moduleId}));
|
promiseArr.push(this.$get('/module/stat',{id:item.data.moduleId}));
|
||||||
@@ -1638,6 +1557,8 @@
|
|||||||
imgidList.forEach((item,index)=>{
|
imgidList.forEach((item,index)=>{
|
||||||
if(item.data.imageId){
|
if(item.data.imageId){
|
||||||
promiseArr.push( this.dealImg(`/project/topo/icon/${item.data.imageId}`));
|
promiseArr.push( this.dealImg(`/project/topo/icon/${item.data.imageId}`));
|
||||||
|
}else{
|
||||||
|
promiseArr.push('');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
Promise.all(promiseArr).then(res2=>{
|
Promise.all(promiseArr).then(res2=>{
|
||||||
@@ -1647,17 +1568,9 @@
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
this.iconArray.forEach((item,index)=>{
|
this.iconArray.forEach((item,index)=>{
|
||||||
if(!item.id){return};
|
if(item.id){
|
||||||
this.tools[1].children.push({
|
|
||||||
...imageTemp,
|
|
||||||
data:{
|
|
||||||
...imageTemp.data,
|
|
||||||
text:item.imageName,
|
|
||||||
image:res2[index],
|
|
||||||
imageId:item.id,
|
|
||||||
}
|
|
||||||
})
|
|
||||||
item.image=res2[index];
|
item.image=res2[index];
|
||||||
|
}
|
||||||
});
|
});
|
||||||
this.imgInit=true;
|
this.imgInit=true;
|
||||||
})
|
})
|
||||||
@@ -1862,9 +1775,23 @@
|
|||||||
// this.toolShow.attrCord=[domRect.width-350,0];
|
// this.toolShow.attrCord=[domRect.width-350,0];
|
||||||
// this.toolShow.height=domRect.height;
|
// this.toolShow.height=domRect.height;
|
||||||
getTopology(this.topologyIndex).canvasPos=domRect;
|
getTopology(this.topologyIndex).canvasPos=domRect;
|
||||||
getTopology(this.topologyIndex).centerView();
|
let flag=false;
|
||||||
|
|
||||||
|
let position={
|
||||||
|
x:this.$refs['topology-canvas'+this.topologyIndexF].offsetWidth,
|
||||||
|
y:this.$refs['topology-canvas'+this.topologyIndexF].offsetHeight,
|
||||||
|
}
|
||||||
|
getTopology(this.topologyIndex).data.pens.forEach(item=>{
|
||||||
|
if(flag){
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if(item.rect.ex>position.x || item.rect.ey>position.y){
|
||||||
|
getTopology(this.topologyIndex).fitView(20);
|
||||||
|
flag=true
|
||||||
|
}
|
||||||
|
});
|
||||||
|
getTopology(this.topologyIndex).centerView(20);
|
||||||
this.getNodesArr();
|
this.getNodesArr();
|
||||||
console.log(213213123123);
|
|
||||||
},
|
},
|
||||||
canvasMove(e){// 画布上的移动 确定tooltip的位置
|
canvasMove(e){// 画布上的移动 确定tooltip的位置
|
||||||
if(this.tooltipPosition.show){
|
if(this.tooltipPosition.show){
|
||||||
|
|||||||
@@ -63,7 +63,7 @@
|
|||||||
:popper-append-to-body="false"
|
:popper-append-to-body="false"
|
||||||
@change="changeTopologyOpt(lineName,'lineName')">
|
@change="changeTopologyOpt(lineName,'lineName')">
|
||||||
<div slot="prefix">
|
<div slot="prefix">
|
||||||
<div class="icon-item">
|
<div class="icon-item" style="width: 100%;padding: 0">
|
||||||
<svg>
|
<svg>
|
||||||
<g fill="none" stroke="black" stroke-width="1">
|
<g fill="none" stroke="black" stroke-width="1">
|
||||||
<path
|
<path
|
||||||
@@ -74,14 +74,15 @@
|
|||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<el-option :disabled="true" :value="false">默认连线类型</el-option>
|
<el-option :disabled="true" :value="false">{{$t('project.topology.defaultLineType')}}</el-option>
|
||||||
<el-option v-for="(item,index) in penLineType" :value="item.name" :key="index">
|
<el-option v-for="(item,index) in penLineType" :value="item.name" :key="index">
|
||||||
<div class="icon-item">
|
<div class="icon-item" style="position: relative;width: 100%;padding: 0">
|
||||||
<svg>
|
<svg>
|
||||||
<g fill="none" :stroke="(lineName==item.name)?'#ee9d3f':'black'" stroke-width="1">
|
<g fill="none" :stroke="(lineName==item.name)?'#ee9d3f':'black'" stroke-width="1">
|
||||||
<path :d="item.d" :stroke-dasharray="item['stroke-dasharray']"></path>
|
<path :d="item.d" :stroke-dasharray="item['stroke-dasharray']"></path>
|
||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
|
<span style="position: absolute;left:60px;top: 0;">{{item.name}}</span>
|
||||||
</div>
|
</div>
|
||||||
</el-option>
|
</el-option>
|
||||||
</el-select>
|
</el-select>
|
||||||
@@ -97,6 +98,7 @@
|
|||||||
ref="topTool"
|
ref="topTool"
|
||||||
@toolShowChange="toolShowChange"
|
@toolShowChange="toolShowChange"
|
||||||
:cachesIndex="cachesIndex"
|
:cachesIndex="cachesIndex"
|
||||||
|
:redoIndexChange="redoIndexChange"
|
||||||
:toolShow="toolShow">
|
:toolShow="toolShow">
|
||||||
</topology-top-tool>
|
</topology-top-tool>
|
||||||
|
|
||||||
@@ -245,7 +247,9 @@
|
|||||||
<div :style="{position:'absolute',top:tooltipPosition.top+'px',left:tooltipPosition.left+'px'}"
|
<div :style="{position:'absolute',top:tooltipPosition.top+'px',left:tooltipPosition.left+'px'}"
|
||||||
v-if="tooltipPosition.show&&!editTopologyFlag"
|
v-if="tooltipPosition.show&&!editTopologyFlag"
|
||||||
@mouseover="tooltipOver"
|
@mouseover="tooltipOver"
|
||||||
@mouseout="tooltipOut">
|
@mouseout="tooltipOut"
|
||||||
|
ref="topoTooltip"
|
||||||
|
>
|
||||||
<topoTooltip :chartDataParent="chartData" :filterTime="filterTime"/>
|
<topoTooltip :chartDataParent="chartData" :filterTime="filterTime"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -266,10 +270,6 @@
|
|||||||
<div v-if="popDataShow.info">
|
<div v-if="popDataShow.info">
|
||||||
<popDataInfo :moduleId="moduleId" :projectId="projectInfo.id"></popDataInfo>
|
<popDataInfo :moduleId="moduleId" :projectId="projectInfo.id"></popDataInfo>
|
||||||
</div>
|
</div>
|
||||||
<!--chart-->
|
|
||||||
<div v-if="popDataShow.total">
|
|
||||||
<topoTooltip :chartDataParent="chartDataInfo" :filterTime="filterTime" :isChart="true"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<!--endpoint-->
|
<!--endpoint-->
|
||||||
<transition name="right-box">
|
<transition name="right-box">
|
||||||
@@ -336,7 +336,6 @@
|
|||||||
import VueDraggableResizable from 'vue-draggable-resizable';//api https://github.com/mauricius/vue-draggable-resizable
|
import VueDraggableResizable from 'vue-draggable-resizable';//api https://github.com/mauricius/vue-draggable-resizable
|
||||||
import popDataMain from './popData/Main'
|
import popDataMain from './popData/Main'
|
||||||
import popDataInfo from './popData/Info'
|
import popDataInfo from './popData/Info'
|
||||||
import TotalChart from "./popData/totalChart";
|
|
||||||
import alertTable from "./popData/alertTable";
|
import alertTable from "./popData/alertTable";
|
||||||
import assetTable from "./popData/assetTable";
|
import assetTable from "./popData/assetTable";
|
||||||
import endpointTable from "./popData/endpointTable";
|
import endpointTable from "./popData/endpointTable";
|
||||||
@@ -385,6 +384,7 @@
|
|||||||
name:'',
|
name:'',
|
||||||
},
|
},
|
||||||
saveData:{},
|
saveData:{},
|
||||||
|
redoIndex:0,
|
||||||
dataLength:0,
|
dataLength:0,
|
||||||
editTopologyFlag:false,
|
editTopologyFlag:false,
|
||||||
searchTime: bus.getTimezontDateRange(),
|
searchTime: bus.getTimezontDateRange(),
|
||||||
@@ -446,9 +446,9 @@
|
|||||||
chartData:{},
|
chartData:{},
|
||||||
chartGetData:[],
|
chartGetData:[],
|
||||||
penLineType:[
|
penLineType:[
|
||||||
{d:'M5 19 a50,100 0 0,1 40,0',"stroke-dasharray":"",name:'curve'},
|
{d:'M5 19 a50,100 0 0,1 40,0',"stroke-dasharray":"",name:this.$t('project.topology.curve')},
|
||||||
{d:'M5 8 l20 0 l0 12 l20 0',"stroke-dasharray":"",name:'polyline'},
|
{d:'M5 8 l20 0 l0 12 l20 0',"stroke-dasharray":"",name:this.$t('project.topology.polyline')},
|
||||||
{d:'M5 14 l40 0',"stroke-dasharray":"",name:'line'},
|
{d:'M5 14 l40 0',"stroke-dasharray":"",name:this.$t('project.topology.line')},
|
||||||
// {d:'M5 20 C0,8 50,0 85,0',"stroke-dasharray":"",name:'mind'},
|
// {d:'M5 20 C0,8 50,0 85,0',"stroke-dasharray":"",name:'mind'},
|
||||||
],
|
],
|
||||||
lineName:'curve',
|
lineName:'curve',
|
||||||
@@ -476,7 +476,6 @@
|
|||||||
VueDraggableResizable,
|
VueDraggableResizable,
|
||||||
popDataMain,
|
popDataMain,
|
||||||
popDataInfo,
|
popDataInfo,
|
||||||
TotalChart,
|
|
||||||
alertTable,
|
alertTable,
|
||||||
assetTable,
|
assetTable,
|
||||||
endpointTable,
|
endpointTable,
|
||||||
@@ -597,81 +596,7 @@
|
|||||||
methods:{
|
methods:{
|
||||||
init(){
|
init(){
|
||||||
canvasOptions.on=this.onMessage;
|
canvasOptions.on=this.onMessage;
|
||||||
this.getTopologyData().then((data)=>{
|
this.reload();
|
||||||
this.openTopologyData(data).then(()=>{
|
|
||||||
//获取对应的值 给节点 连线添加对应动画
|
|
||||||
this.lineName=data.lineName?data.lineName:this.lineName;
|
|
||||||
this.chartGetData=[];
|
|
||||||
let axiosArr=[];
|
|
||||||
let promiseArr=[];
|
|
||||||
let self=this;
|
|
||||||
let pensPromise=(pen, arr,index)=>{
|
|
||||||
return new Promise(function(resolve, reject) {
|
|
||||||
Promise.all(arr).then((res)=>{
|
|
||||||
self.chartGetData[index].res=self.computeData(res,pen.data.aggregation,pen);
|
|
||||||
self.setAnimation(pen,self.chartGetData[index].res);
|
|
||||||
resolve()
|
|
||||||
});
|
|
||||||
});
|
|
||||||
};
|
|
||||||
let endTime=this.filterTime[1];
|
|
||||||
let startTime=this.filterTime[0];
|
|
||||||
let step=bus.getStep(startTime,endTime);
|
|
||||||
data.pens&&data.pens.forEach((item,index)=>{
|
|
||||||
this.chartGetData.push({id:item.id,res:[]});
|
|
||||||
let arr=item.data.expressArr.map((ele)=>{
|
|
||||||
let query=encodeURIComponent(ele);
|
|
||||||
if(!query){
|
|
||||||
return new Promise(resolve=>{
|
|
||||||
resolve({data:"",status:'no query'});
|
|
||||||
})
|
|
||||||
}
|
|
||||||
query+='&nullType='+'connected';
|
|
||||||
return this.$get('/prom/api/v1/query_range?query='+query+"&start="+this.$stringTimeParseToUnix(startTime)+"&end="+this.$stringTimeParseToUnix(endTime)+'&step='+step);
|
|
||||||
});
|
|
||||||
axiosArr.push({item,arr});
|
|
||||||
promiseArr.push(pensPromise(item,arr,index))
|
|
||||||
});
|
|
||||||
Promise.all(promiseArr).then((res)=>{
|
|
||||||
getTopology(this.topologyIndex).open(data);
|
|
||||||
getTopology(this.topologyIndex).lock(1);
|
|
||||||
this.objChange=false;
|
|
||||||
let flag=false;
|
|
||||||
|
|
||||||
let position={
|
|
||||||
x:this.$refs['topology-canvas'+this.topologyIndexF].offsetWidth,
|
|
||||||
y:this.$refs['topology-canvas'+this.topologyIndexF].offsetHeight,
|
|
||||||
}
|
|
||||||
getTopology(this.topologyIndex).centerView(20);
|
|
||||||
getTopology(this.topologyIndex).data.pens.forEach(item=>{
|
|
||||||
if(flag){
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if(item.rect.ex>position.x || item.rect.ey>position.y){
|
|
||||||
getTopology(this.topologyIndex).fitView(20);
|
|
||||||
flag=true
|
|
||||||
}
|
|
||||||
});
|
|
||||||
getTopology(this.topologyIndex).centerView(20);
|
|
||||||
this.penToolTipScale= getTopology(this.topologyIndex).data.scale;
|
|
||||||
setTimeout(()=>{
|
|
||||||
getTopology(this.topologyIndex).data.pens.forEach(item=>{
|
|
||||||
if(item.animatePlay){
|
|
||||||
item.stopAnimate();
|
|
||||||
setTimeout(()=>{
|
|
||||||
item.startAnimate()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},100);
|
|
||||||
})
|
|
||||||
// if(this.fromPrev){
|
|
||||||
// getTopology(this.topologyIndex).scaleTo(data.scale/2)
|
|
||||||
// }
|
|
||||||
// getTopology(this.topologyIndex).fitView();
|
|
||||||
this.getNodesArr();
|
|
||||||
});
|
|
||||||
})
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
|
|
||||||
reload(){
|
reload(){
|
||||||
@@ -716,12 +641,10 @@
|
|||||||
getTopology(this.topologyIndex).lock(1);
|
getTopology(this.topologyIndex).lock(1);
|
||||||
this.objChange=false;
|
this.objChange=false;
|
||||||
let flag=false;
|
let flag=false;
|
||||||
|
|
||||||
let position={
|
let position={
|
||||||
x:this.$refs['topology-canvas'+this.topologyIndexF].offsetWidth,
|
x:this.$refs['topology-canvas'+this.topologyIndexF].offsetWidth,
|
||||||
y:this.$refs['topology-canvas'+this.topologyIndexF].offsetHeight,
|
y:this.$refs['topology-canvas'+this.topologyIndexF].offsetHeight,
|
||||||
}
|
}
|
||||||
getTopology(this.topologyIndex).centerView(20);
|
|
||||||
getTopology(this.topologyIndex).data.pens.forEach(item=>{
|
getTopology(this.topologyIndex).data.pens.forEach(item=>{
|
||||||
if(flag){
|
if(flag){
|
||||||
return
|
return
|
||||||
@@ -752,6 +675,7 @@
|
|||||||
})
|
})
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
dateChange() {
|
dateChange() {
|
||||||
let nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType;
|
let nowTimeType = this.$refs.pickTime.$refs.timePicker.nowTimeType;
|
||||||
this.setSearchTime(nowTimeType.type,nowTimeType.value);
|
this.setSearchTime(nowTimeType.type,nowTimeType.value);
|
||||||
@@ -842,7 +766,7 @@
|
|||||||
let self=this;
|
let self=this;
|
||||||
data.pens.forEach((item=>{
|
data.pens.forEach((item=>{
|
||||||
if(item.type===0&&item.data.imageId){
|
if(item.type===0&&item.data.imageId){
|
||||||
item.image=this.iconArray.find(item1=>item1.id==item.data.imageId).image
|
item.image=this.iconArray.find(item1=>item1.id==item.data.imageId).image;
|
||||||
}
|
}
|
||||||
if(item.type===0){
|
if(item.type===0){
|
||||||
promiseArr.push(this.$get('/module/stat',{id:item.data.moduleId}));
|
promiseArr.push(this.$get('/module/stat',{id:item.data.moduleId}));
|
||||||
@@ -1161,15 +1085,8 @@
|
|||||||
},
|
},
|
||||||
|
|
||||||
onMessage(event,data,e){
|
onMessage(event,data,e){
|
||||||
// console.log('onMessage',event,data);
|
// console.log('onMessage',event);
|
||||||
// console.log(getTopology(this.topologyIndex))
|
// console.log(getTopology(this.topologyIndex))
|
||||||
if(getTopology(this.topologyIndex)){
|
|
||||||
this.cachesIndex=getTopology(this.topologyIndex).caches.index;
|
|
||||||
if(this.$refs.topTool){
|
|
||||||
this.$refs.topTool.redoFlag=false
|
|
||||||
}
|
|
||||||
;
|
|
||||||
}
|
|
||||||
if(!Array.isArray(data)&&data){//判断不是数组 提前个data配置好节点属性
|
if(!Array.isArray(data)&&data){//判断不是数组 提前个data配置好节点属性
|
||||||
// if(data.type===0){
|
// if(data.type===0){
|
||||||
// data.textRect=new Rect(data.rect.ex-10,data.rect.ey-10,data.rect.width,data.rect.height);
|
// data.textRect=new Rect(data.rect.ex-10,data.rect.ey-10,data.rect.width,data.rect.height);
|
||||||
@@ -1213,13 +1130,14 @@
|
|||||||
}else if(data.type==1&& !data.data){
|
}else if(data.type==1&& !data.data){
|
||||||
//连线是否自动计算锚点
|
//连线是否自动计算锚点
|
||||||
// data.manualCps=true;
|
// data.manualCps=true;
|
||||||
|
data.animateColor='#FA901C';
|
||||||
data.data={
|
data.data={
|
||||||
animatePlay:false,
|
animatePlay:false,
|
||||||
strokeStyle:data.strokeStyle,
|
strokeStyle:data.strokeStyle,
|
||||||
animateColor:data.animateColor,
|
animateColor:data.animateColor,
|
||||||
arrowColor:data.arrowColor,
|
arrowColor:"#00000",
|
||||||
fromArrowColor:data.fromArrowColor,
|
fromArrowColor:"#00000",
|
||||||
toArrowColor:data.toArrowColor,
|
toArrowColor:"#00000",
|
||||||
lineWidth:1,
|
lineWidth:1,
|
||||||
//chart 配置项
|
//chart 配置项
|
||||||
valueMapping:[{
|
valueMapping:[{
|
||||||
@@ -1246,12 +1164,12 @@
|
|||||||
moduleName:'',
|
moduleName:'',
|
||||||
url:'',
|
url:'',
|
||||||
};
|
};
|
||||||
data.animateColor='#FA901C'
|
|
||||||
}
|
}
|
||||||
if(data.type===0||data.type===1){
|
if(data.type===0||data.type===1){
|
||||||
data.lineWidth=data.data.lineWidth;
|
data.lineWidth=data.data.lineWidth;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
switch(event){
|
switch(event){
|
||||||
case 'moveInNode':
|
case 'moveInNode':
|
||||||
case 'moveInLine':
|
case 'moveInLine':
|
||||||
@@ -1263,7 +1181,26 @@
|
|||||||
this.tooltipPosition.show=false;
|
this.tooltipPosition.show=false;
|
||||||
setTimeout(()=>{
|
setTimeout(()=>{
|
||||||
this.tooltipPosition.show=true;
|
this.tooltipPosition.show=true;
|
||||||
},50);
|
let ePosition=window.ePosition;
|
||||||
|
let boxWidth=document.getElementsByClassName('page')[0].offsetWidth;
|
||||||
|
let boxHeight=document.getElementsByClassName('page')[0].offsetHeight;
|
||||||
|
this.tooltipPosition.left=ePosition.layerX+20;
|
||||||
|
this.tooltipPosition.top=ePosition.layerY;
|
||||||
|
this.$nextTick(()=>{
|
||||||
|
if(this.$refs['topoTooltip']){
|
||||||
|
if((boxWidth/2)>ePosition.layerX){
|
||||||
|
this.tooltipPosition.left=ePosition.layerX+20;
|
||||||
|
}else {
|
||||||
|
this.tooltipPosition.left=ePosition.layerX - 20 - this.$refs['topoTooltip'].offsetWidth;
|
||||||
|
}
|
||||||
|
if(boxHeight>(ePosition.layerY+this.$refs['topoTooltip'].offsetHeight)){
|
||||||
|
this.tooltipPosition.top=ePosition.layerY;
|
||||||
|
}else {
|
||||||
|
this.tooltipPosition.top=ePosition.layerY - this.$refs['topoTooltip'].offsetHeight;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},100);
|
||||||
break;
|
break;
|
||||||
case 'moveOutNode':
|
case 'moveOutNode':
|
||||||
case 'moveOutLine':
|
case 'moveOutLine':
|
||||||
@@ -1273,18 +1210,35 @@
|
|||||||
this.timer3=setTimeout(()=>{
|
this.timer3=setTimeout(()=>{
|
||||||
this.tooltipPosition.show=false;
|
this.tooltipPosition.show=false;
|
||||||
this.timer3=null
|
this.timer3=null
|
||||||
},150)
|
},50)
|
||||||
}else{
|
}else{
|
||||||
clearTimeout(this.timer3);
|
clearTimeout(this.timer3);
|
||||||
this.timer3=setTimeout(()=>{
|
this.timer3=setTimeout(()=>{
|
||||||
this.tooltipPosition.show=false;
|
this.tooltipPosition.show=false;
|
||||||
this.timer3=null
|
this.timer3=null
|
||||||
},150)
|
},50)
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
// 右侧输入框编辑状态时点击编辑区域其他元素，onMessage执行后才执行onUpdateProps方法，通过setTimeout让onUpdateProps先执行
|
// 右侧输入框编辑状态时点击编辑区域其他元素，onMessage执行后才执行onUpdateProps方法，通过setTimeout让onUpdateProps先执行
|
||||||
setTimeout(()=>{
|
setTimeout(()=>{
|
||||||
|
// setTimeout(()=>{
|
||||||
|
// if(getTopology(this.topologyIndex)){
|
||||||
|
// this.cachesIndex=getTopology(this.topologyIndex).caches.index;
|
||||||
|
// console.log(this.cachesIndex)
|
||||||
|
// }
|
||||||
|
// if(getTopology(this.topologyIndex)&&this.$refs.topTool&&this.$refs.topTool.redoFlag){
|
||||||
|
// console.log( this.cachesIndex, this.redoIndex);
|
||||||
|
// if(event==='redo'){
|
||||||
|
// this.redoIndex++;
|
||||||
|
// }else{
|
||||||
|
// this.redoIndex--;
|
||||||
|
// }
|
||||||
|
// if(this.$refs.topTool&&(this.redoIndex!==this.cachesIndex)){
|
||||||
|
// this.$refs.topTool.redoFlag=false
|
||||||
|
// };
|
||||||
|
// }
|
||||||
|
// },50);
|
||||||
switch(event){
|
switch(event){
|
||||||
case 'node':
|
case 'node':
|
||||||
case 'addNode':
|
case 'addNode':
|
||||||
@@ -1603,6 +1557,8 @@
|
|||||||
imgidList.forEach((item,index)=>{
|
imgidList.forEach((item,index)=>{
|
||||||
if(item.data.imageId){
|
if(item.data.imageId){
|
||||||
promiseArr.push( this.dealImg(`/project/topo/icon/${item.data.imageId}`));
|
promiseArr.push( this.dealImg(`/project/topo/icon/${item.data.imageId}`));
|
||||||
|
}else{
|
||||||
|
promiseArr.push('');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
Promise.all(promiseArr).then(res2=>{
|
Promise.all(promiseArr).then(res2=>{
|
||||||
@@ -1612,17 +1568,9 @@
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
this.iconArray.forEach((item,index)=>{
|
this.iconArray.forEach((item,index)=>{
|
||||||
if(!item.id){return};
|
if(item.id){
|
||||||
this.tools[1].children.push({
|
|
||||||
...imageTemp,
|
|
||||||
data:{
|
|
||||||
...imageTemp.data,
|
|
||||||
text:item.imageName,
|
|
||||||
image:res2[index],
|
|
||||||
imageId:item.id,
|
|
||||||
}
|
|
||||||
})
|
|
||||||
item.image=res2[index];
|
item.image=res2[index];
|
||||||
|
}
|
||||||
});
|
});
|
||||||
this.imgInit=true;
|
this.imgInit=true;
|
||||||
})
|
})
|
||||||
@@ -1681,8 +1629,8 @@
|
|||||||
item.animateColor=item.data.animateColor;
|
item.animateColor=item.data.animateColor;
|
||||||
item.strokeStyle=item.data.strokeStyle;
|
item.strokeStyle=item.data.strokeStyle;
|
||||||
item.arrowColor=item.data.arrowColor;
|
item.arrowColor=item.data.arrowColor;
|
||||||
item.fromArrowColor=item.data.fromArrowColor;
|
item.fromArrowColor=item.data.arrowColor;
|
||||||
item.toArrowColor=item.data.toArrowColor;
|
item.toArrowColor=item.data.arrowColor;
|
||||||
item.animatePlay=false;
|
item.animatePlay=false;
|
||||||
item.font.color="#000000";
|
item.font.color="#000000";
|
||||||
}
|
}
|
||||||
@@ -1691,6 +1639,10 @@
|
|||||||
this.toolShow.attrCord=[domRect.width-350,0];
|
this.toolShow.attrCord=[domRect.width-350,0];
|
||||||
this.toolShow.height=domRect.height;
|
this.toolShow.height=domRect.height;
|
||||||
getTopology(this.topologyIndex).canvasPos=domRect;
|
getTopology(this.topologyIndex).canvasPos=domRect;
|
||||||
|
getTopology(this.topologyIndex).caches={
|
||||||
|
index:0,
|
||||||
|
list:[JSON.parse(JSON.stringify(getTopology(this.topologyIndex).data))]
|
||||||
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -1819,19 +1771,33 @@
|
|||||||
/*tools 方法*/
|
/*tools 方法*/
|
||||||
|
|
||||||
winResize(){
|
winResize(){
|
||||||
let domRect=document.getElementById('topology-canvas'+this.topologyIndexF).getBoundingClientRect();
|
let domRect=document.getElementById('topology-canvas'+this.topologyIndex).getBoundingClientRect();
|
||||||
this.toolShow.attrCord=[domRect.width-350,0];
|
// this.toolShow.attrCord=[domRect.width-350,0];
|
||||||
this.toolShow.height=domRect.height;
|
// this.toolShow.height=domRect.height;
|
||||||
getTopology(this.topologyIndex).canvasPos=domRect;
|
getTopology(this.topologyIndex).canvasPos=domRect;
|
||||||
getTopology(this.topologyIndex).centerView();
|
let flag=false;
|
||||||
|
|
||||||
|
let position={
|
||||||
|
x:this.$refs['topology-canvas'+this.topologyIndexF].offsetWidth,
|
||||||
|
y:this.$refs['topology-canvas'+this.topologyIndexF].offsetHeight,
|
||||||
|
}
|
||||||
|
getTopology(this.topologyIndex).data.pens.forEach(item=>{
|
||||||
|
if(flag){
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if(item.rect.ex>position.x || item.rect.ey>position.y){
|
||||||
|
getTopology(this.topologyIndex).fitView(20);
|
||||||
|
flag=true
|
||||||
|
}
|
||||||
|
});
|
||||||
|
getTopology(this.topologyIndex).centerView(20);
|
||||||
this.getNodesArr();
|
this.getNodesArr();
|
||||||
},
|
},
|
||||||
canvasMove(e){// 画布上的移动 确定tooltip的位置
|
canvasMove(e){// 画布上的移动 确定tooltip的位置
|
||||||
if(this.tooltipPosition.show){
|
if(this.tooltipPosition.show){
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
this.tooltipPosition.top=e.offsetY;
|
window.ePosition=e
|
||||||
this.tooltipPosition.left=e.offsetX+20;
|
|
||||||
},
|
},
|
||||||
tooltipOver(){
|
tooltipOver(){
|
||||||
clearTimeout(this.timer3);
|
clearTimeout(this.timer3);
|
||||||
@@ -1841,7 +1807,7 @@
|
|||||||
this.timer3=setTimeout(()=>{
|
this.timer3=setTimeout(()=>{
|
||||||
this.tooltipPosition.show=false;
|
this.tooltipPosition.show=false;
|
||||||
this.timer3=null
|
this.timer3=null
|
||||||
},150)
|
},50)
|
||||||
},
|
},
|
||||||
nodeDefaultWidth(nodeName){
|
nodeDefaultWidth(nodeName){
|
||||||
switch(nodeName){
|
switch(nodeName){
|
||||||
@@ -1879,6 +1845,9 @@
|
|||||||
}
|
}
|
||||||
return false;
|
return false;
|
||||||
},
|
},
|
||||||
|
redoIndexChange(index){
|
||||||
|
this.redoIndex=index
|
||||||
|
}
|
||||||
},
|
},
|
||||||
destroyed(){
|
destroyed(){
|
||||||
getTopology(this.topologyIndex).destroy();
|
getTopology(this.topologyIndex).destroy();
|
||||||
|
|||||||
Reference in New Issue
Block a user