feat：从charts抄出charts
This commit is contained in:
zhangyu
@@ -1,11 +0,0 @@
|
|||||||
<?xml version="1.0" encoding="UTF-8"?>
|
|
||||||
<svg width="8px" height="32px" viewBox="0 0 8 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
||||||
<!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
|
|
||||||
<title>矩形</title>
|
|
||||||
<desc>Created with Sketch.</desc>
|
|
||||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
|
||||||
<g id="画板" transform="translate(-114.000000, -46.000000)" fill="#2D88FA">
|
|
||||||
<path d="M114,46 L114,46 C118.418278,46 122,49.581722 122,54 L122,70 C122,74.418278 118.418278,78 114,78 L114,46 Z" id="矩形"></path>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 674 B |
597
nezha-fronted/src/components/common/project/popData/chart.scss
Normal file
597
nezha-fronted/src/components/common/project/popData/chart.scss
Normal file
@@ -0,0 +1,597 @@
|
|||||||
|
.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:80px;
|
||||||
|
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: -6px;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
.el-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;
|
||||||
|
}
|
||||||
|
.el-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;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
1450
nezha-fronted/src/components/common/project/popData/lineChart.vue
Normal file
1450
nezha-fronted/src/components/common/project/popData/lineChart.vue
Normal file
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div class="edit-topology" >
|
<div class="edit-topology" v-if="editVisNetwork">
|
||||||
<span v-show="!selectNodeTitle&&editVisNetwork" class="edit-topology-module">
|
<span v-show="!selectNodeTitle&&editVisNetwork" class="edit-topology-module">
|
||||||
Module element :
|
Module element :
|
||||||
<span class="edit-topology-add" @click="addModelShow">Add</span>
|
<span class="edit-topology-add" @click="addModelShow">Add</span>
|
||||||
@@ -70,7 +70,7 @@
|
|||||||
<popDataMain :moduleId="this.selNodeId" :projectId="this.allModuleInfo.basic.id"></popDataMain>
|
<popDataMain :moduleId="this.selNodeId" :projectId="this.allModuleInfo.basic.id"></popDataMain>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="popDataShow.total">
|
<div v-if="popDataShow.total">
|
||||||
total
|
<total-chart :moduleId="this.selNodeId" :projectId="this.allModuleInfo.basic.id" :nodesArray="nodesArray"></total-chart>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="popDataShow.info">
|
<div v-if="popDataShow.info">
|
||||||
<popDataInfo :moduleId="this.selNodeId" :projectId="this.allModuleInfo.basic.id"></popDataInfo>
|
<popDataInfo :moduleId="this.selNodeId" :projectId="this.allModuleInfo.basic.id"></popDataInfo>
|
||||||
@@ -122,9 +122,11 @@
|
|||||||
import addLine from './addLine'
|
import addLine from './addLine'
|
||||||
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";
|
||||||
export default {
|
export default {
|
||||||
name:"topology",
|
name:"topology",
|
||||||
components: {
|
components: {
|
||||||
|
TotalChart,
|
||||||
'add-model':addNode,
|
'add-model':addNode,
|
||||||
'add-line':addLine,
|
'add-line':addLine,
|
||||||
'popDataMain':popDataMain,
|
'popDataMain':popDataMain,
|
||||||
@@ -449,6 +451,7 @@
|
|||||||
this.$emit('setTopologyData',nodesArray, edgesArray);
|
this.$emit('setTopologyData',nodesArray, edgesArray);
|
||||||
this.setNetworkData(nodesArray, edgesArray);
|
this.setNetworkData(nodesArray, edgesArray);
|
||||||
this.networkPopClose();
|
this.networkPopClose();
|
||||||
|
this.arrayDiff();
|
||||||
},
|
},
|
||||||
nodeEdit(){
|
nodeEdit(){
|
||||||
this.addNodeShow=true;
|
this.addNodeShow=true;
|
||||||
@@ -512,7 +515,7 @@
|
|||||||
// 数组取差集
|
// 数组取差集
|
||||||
arrayDiff(){
|
arrayDiff(){
|
||||||
// this.moduleDataS=this.allModuleInfos-this.nodesArray
|
// this.moduleDataS=this.allModuleInfos-this.nodesArray
|
||||||
this.moduleDataS=this.allModuleInfos;
|
this.moduleDataS={...this.allModuleInfos};
|
||||||
this.nodesArray.forEach((item)=>{
|
this.nodesArray.forEach((item)=>{
|
||||||
this.moduleDataS.module=this.moduleDataS.module.filter((item1)=> item.id!==item1.id)
|
this.moduleDataS.module=this.moduleDataS.module.filter((item1)=> item.id!==item1.id)
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -211,6 +211,9 @@
|
|||||||
@import './chart.scss';
|
@import './chart.scss';
|
||||||
</style>
|
</style>
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
.facade-top /deep/.active-icon{
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
.nz-icon-edit{
|
.nz-icon-edit{
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user