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

perf: 优化实体详情标题样式

Browse Source
This commit is contained in:
chenjinsong
2022-02-08 18:15:58 +08:00
parent f365d8bb11
commit 088f1980e1
9 changed files with 52 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/assets/css/components/views/charts/chartSingleValue.scss
View File

@@ -1,5 +1,9 @@
.cn-chart__single-value {
&.cn-chart__single-value--detail-overview.cn-chart__single-value--icon-left {
width: unset;
flex: 0 0 240px;
flex-wrap: wrap;
.single-value__icon {
width: 38px;
height: 38px;

16
src/assets/css/components/views/charts/panel.scss
View File

@@ -61,11 +61,27 @@
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
&.chart-header__title--block {
color: #1890FF;
font-weight: bold;
font-size: 16px;
}
.arrow-icon {
display: inline-block;
transform: rotate(0);
transition: all linear .2s;
&.reg-down {
transform: rotate(90deg);
}
i {
font-size: 12px;
color: #999;
}
}
}
.chart-header__tools {
display: flex;

1
src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss
View File

@@ -37,6 +37,7 @@
.overview__row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
padding: 2px 0;
font-size: 14px;

24
src/views/charts/ChartHeader.vue
View File

@@ -1,13 +1,19 @@
<template>
<div class="chart-header" :class="{'chart-header--title-chart': isTitle, 'is-group-collapse': chartInfo.params&&chartInfo.params.collpase, 'panel-chart-block': isBlock}">
<div class="chart-header__title" v-if="!isCurrentTable&&(isGroup)" :class="{'chart-header__title--block': isBlock}">
<span @click="groupShow"> <i class="cn-icon" :class="chartInfo.params&&chartInfo.params.collpase ? 'cn-icon-arrow-right': 'cn-icon-arrow-down'"></i></span>
<div class="chart-header" :class="{'chart-header--title-chart': isTitle, 'is-group-collapse': isGroup, 'panel-chart-block': isBlock}">
<div class="chart-header__title" v-if="isGroup">
<span
@click="groupShow"
v-if="chartInfo.params && chartInfo.params.collapsable"
class="arrow-icon"
:class="{'reg-down': chartInfo.params && !chartInfo.params.collapse}"
>
<i class="cn-icon cn-icon-arrow-right"></i>
</span>
{{chartInfo.name}}
</div>
<div class="chart-header__title" v-else-if="!isCurrentTable" :class="{'chart-header__title--block': isBlock}">{{chartInfo.name}}</div>
<template v-if="isCurrentTable">
<div class="chart-header__title">
<!-- -->
<span :title="chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name">{{chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name}}</span>
<span
v-if="chartInfo.params && chartInfo.params.as"
@@ -101,7 +107,7 @@
<span class="header__operation-btn"><i class="cn-icon el-icon-info"></i></span>
</template>
</el-popover>
<span class="header__operation-btn" @click="refresh"><i class="cn-icon cn-icon-refresh"></i></span>
<span class="header__operation-btn" @click="refresh" v-if="showRefreshButton"><i class="cn-icon cn-icon-refresh"></i></span>
</template>
</div>
</div>
@@ -198,6 +204,14 @@ export default {
this.$emit('orderPieTableChange', this.orderPieTable)
}
},
computed: {
showRefreshButton () {
// 自己是group且父元素是block时，不显示刷新按钮
// TODO 父元素是block，且只有自己一个子元素时，不显示刷新按钮
const isGroupAndParentIsBlock = this.chartInfo.parent.type === 95 && this.isGroup
return !isGroupAndParentIsBlock
}
},
setup (props) {
const dateRangeValue = 60
const { startTime, endTime } = getNowTime(dateRangeValue)

10
src/views/charts/Panel.vue
View File

@@ -113,14 +113,14 @@ export default {
this.detailChartList = this.detailTabs[index].children
},
recursionParamsConvert (chart) {
chart.params = chart.params ? JSON.parse(chart.params) : null
chart.params = chart.params ? JSON.parse(chart.params) : {}
if (chart.type === 94) {
chart.oldH = chart.h
chart.params = {
collpase: false
}
/* chart.params = {
collapse: false
} */
chart.h = getGroupHeight(chart.children) + 1.5
if (chart.params.collpase) {
if (chart.params.collapse) {
chart.h = 1
}
}

2
src/views/charts/PanelChart.vue
View File

@@ -25,7 +25,7 @@
<!-- 数据查询后传入chart组件，chart组件内不查询，只根据接传递的数据来渲染 -->
<chart
ref="chart"
v-if="((!isGroup) || !(chartInfo.params && chartInfo.params.collpase)) && !isTitle"
v-if="((!isGroup) || !(chartInfo.params && chartInfo.params.collapse)) && !isTitle"
:chart-data="chartData"
:result-type="resultType"
:chart-info="chartInfo"

6
src/views/charts/PanelChartList.vue
View File

@@ -122,8 +122,8 @@ export default {
groupShow (chart) {
this.copyDataList.forEach((item, index) => {
if (item.id === chart.id) {
item.params.collpase = !item.params.collpase
if (item.params.collpase) {
item.params.collapse = !item.params.collapse
if (item.params.collapse) {
item.h = 1
} else {
item.h = getGroupHeight(item.children) + 1.5
@@ -134,7 +134,7 @@ export default {
this.emitter.emit('groupParentCalcHeight', { chart, childrenList: this.copyDataList })
},
groupParentCalcHeight (chart, childrenList) {
console.log(chart, childrenList)
// console.log(chart, childrenList)
setTimeout(() => {
const parent = this.copyDataList.find(chartitem => chartitem.id === chart.parent.id)
const children = parent.children.find(item => item.id === chart.id)

1
src/views/charts/charts/ChartGroup.vue
View File

@@ -18,6 +18,7 @@ export default {
timeFilter: Object
},
mounted () {
console.info(this.chartInfo)
}
}
</script>

2
src/views/entityExplorer/entityList/detailOverview/Domain.vue
View File

@@ -79,6 +79,8 @@
v-for="(chartInfo, i) in singleValues.chartInfos"
:chart-info="chartInfo"
:chart-data="singleValues.chartDatas[i]"
:key="i"
class="cn-chart__single-value--detail-overview"
></chart-single-value>
</div>
</div>