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>
|
||||
<div class="content">
|
||||
<div class="edit-topology" >
|
||||
<div class="edit-topology" v-if="editVisNetwork">
|
||||
<span v-show="!selectNodeTitle&&editVisNetwork" class="edit-topology-module">
|
||||
Module element :
|
||||
<span class="edit-topology-add" @click="addModelShow">Add</span>
|
||||
@@ -70,7 +70,7 @@
|
||||
<popDataMain :moduleId="this.selNodeId" :projectId="this.allModuleInfo.basic.id"></popDataMain>
|
||||
</div>
|
||||
<div v-if="popDataShow.total">
|
||||
total
|
||||
<total-chart :moduleId="this.selNodeId" :projectId="this.allModuleInfo.basic.id" :nodesArray="nodesArray"></total-chart>
|
||||
</div>
|
||||
<div v-if="popDataShow.info">
|
||||
<popDataInfo :moduleId="this.selNodeId" :projectId="this.allModuleInfo.basic.id"></popDataInfo>
|
||||
@@ -122,9 +122,11 @@
|
||||
import addLine from './addLine'
|
||||
import popDataMain from './popData/Main'
|
||||
import popDataInfo from './popData/Info'
|
||||
import TotalChart from "./popData/totalChart";
|
||||
export default {
|
||||
name:"topology",
|
||||
components: {
|
||||
TotalChart,
|
||||
'add-model':addNode,
|
||||
'add-line':addLine,
|
||||
'popDataMain':popDataMain,
|
||||
@@ -449,6 +451,7 @@
|
||||
this.$emit('setTopologyData',nodesArray, edgesArray);
|
||||
this.setNetworkData(nodesArray, edgesArray);
|
||||
this.networkPopClose();
|
||||
this.arrayDiff();
|
||||
},
|
||||
nodeEdit(){
|
||||
this.addNodeShow=true;
|
||||
@@ -512,7 +515,7 @@
|
||||
// 数组取差集
|
||||
arrayDiff(){
|
||||
// this.moduleDataS=this.allModuleInfos-this.nodesArray
|
||||
this.moduleDataS=this.allModuleInfos;
|
||||
this.moduleDataS={...this.allModuleInfos};
|
||||
this.nodesArray.forEach((item)=>{
|
||||
this.moduleDataS.module=this.moduleDataS.module.filter((item1)=> item.id!==item1.id)
|
||||
})
|
||||
|
||||
@@ -211,6 +211,9 @@
|
||||
@import './chart.scss';
|
||||
</style>
|
||||
<style scoped>
|
||||
.facade-top /deep/.active-icon{
|
||||
margin-top: 0;
|
||||
}
|
||||
.nz-icon-edit{
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user