feat：从charts抄出charts
This commit is contained in:
zhangyu
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
Reference in New Issue
Block a user