gfwleak/cyber-narrator-cn-ui
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CN-269 图表重构-echarts类型图表重构

Browse Source
This commit is contained in:
hyx
2022-01-26 15:40:10 +08:00
parent 014abba5d1
commit 15a19edddf
13 changed files with 841 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/assets/css/components/index.scss
View File

@@ -27,6 +27,9 @@
@import './views/charts/chartAppBasicInfo';
@import './views/charts/chartDomainDnsRecord';
@import './views/charts/chartDomainWhois';
@import './views/charts/chartEchartWithTable';
@import './views/charts/ipBasicInfo';
@import './views/charts/chartEchartIpHostedDomain';
@import './views/charts/chartEchartAppRelateDomain';
//@import '../chart';

70
src/assets/css/components/views/charts/chartEchartAppRelateDomain.scss Normal file
View File

@@ -0,0 +1,70 @@
.cn-panel2 {
position: relative;
.chart-list {
.vue-grid-layout > .vue-grid-item {
.cn-chart {
.app-detail__related-domain {
display: flex;
flex-direction: row;
height: 100%;
width: 100%;
.related-domain__list {
display: flex;
flex-direction: column;
flex: 0 0 25%;
overflow: auto;
padding-bottom: 20px;
border-bottom: 1px solid $--right-box-border-color;
.related-domain__list-title {
padding: 13px 30px 0;
height: 40px;
color: #6B717B;
}
.related-domain__list-body {
display: flex;
flex-direction: column;
height: calc(100% - 40px);
overflow: hidden auto;
}
.related-domain__list-row {
padding: 5px 30px;
color: #3976CB;
i {
color: #B8C1D1;
}
}
}
.related-domain__chart {
display: flex;
flex-direction: row;
flex: 1;
& > div {
flex: 0 0 50%;
display: flex;
flex-direction: column;
.related-domain__chart-title {
padding-left: 20px;
line-height: 50px;
flex: 0 0 50px;
}
.chart-drawing {
flex: 1;
}
}
}
}
}
}
}
}
.cn-panel2 .chart-list > .vue-grid-layout > .vue-grid-item > .panel-chart .chart-header {
border-bottom: 1px solid $--right-box-border-color;
}

67
src/assets/css/components/views/charts/chartEchartIpHostedDomain.scss Normal file
View File

@@ -0,0 +1,67 @@
.cn-panel2 {
position: relative;
.chart-list {
.vue-grid-layout > .vue-grid-item {
.cn-chart {
.ip-detail__hosted-domain {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
.hosted-domain__list {
display: flex;
flex-direction: column;
flex: 0 0 25%;
overflow: auto;
padding-bottom: 20px;
border-bottom: 1px solid $--right-box-border-color;
.hosted-domain__list-title {
padding: 13px 30px 0;
height: 40px;
color: #6B717B;
}
.hosted-domain__list-body {
display: flex;
flex-direction: column;
height: calc(100% - 40px);
overflow: hidden auto;
}
.hosted-domain__list-row {
padding: 5px 30px;
color: #3976CB;
i {
color: #B8C1D1;
}
}
}
.hosted-domain__chart {
display: flex;
flex-direction: column;
flex: 1;
& > div {
flex: 0 0 50%;
display: flex;
flex-direction: column;
.hosted-domain__chart-title {
padding-left: 20px;
line-height: 50px;
flex: 0 0 50px;
}
.chart-drawing {
flex: 1;
}
}
}
}
}
}
}
}

78
src/assets/css/components/views/charts/chartEchartWithTable.scss Normal file
View File

@@ -0,0 +1,78 @@
.cn-panel2 {
position: relative;
.chart-list {
.vue-grid-layout>.vue-grid-item {
.cn-chart {
height: 100% !important;
.cn-chart__echarts {
display: flex;
flex-direction: column;
height:100%;
.cn-chart__body {
flex: auto;
display: flex;
overflow: hidden auto;
.el-table {
padding: 0 10px;
&:before {
height: 0;
}
thead {
color: #333;
}
th.is-leaf, td {
border-bottom: none;
}
th {
padding-bottom: 5px;
}
td {
padding: 4px 0;
color: #333;
}
}
.chart-drawing{
height: calc(100% - 36px) !important;
}
}
.cn-chart__body.pie-with-table {
flex-basis: 40%;
}
.cn-chart__footer.pie-with-table {
flex-basis: 60%;
padding: 10px 30px 30px;
}
}
.pie-table {
font-size: 14px;
color: #333333;
font-weight: 500;
.el-table__header-wrapper {
.cell {
color: #333;
}
}
.el-table__expanded-cell[class*=cell] {
padding: 0;
}
.expand-table .el-table__body .el-table__row:last-of-type td {
border: none;
}
.expand-table {
font-weight: 400;
color: #606266;
.el-table__body-wrapper {
height: auto !important;
}
}
}
}
}
}
}