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

src/assets/css/components/views/charts/chartSingleValue.scss

@@ -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;

src/assets/css/components/views/charts/panel.scss

@@ -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;

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

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

src/views/charts/ChartHeader.vue

@@ -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" :class="{'chart-header--title-chart': isTitle, 'is-group-collapse': isGroup, 'panel-chart-block': isBlock}">
-    <div class="chart-header__title" v-if="!isCurrentTable&&(isGroup)" :class="{'chart-header__title--block': isBlock}">
+    <div class="chart-header__title" v-if="isGroup">
-      <span @click="groupShow"> <i class="cn-icon" :class="chartInfo.params&&chartInfo.params.collpase ? 'cn-icon-arrow-right': 'cn-icon-arrow-down'"></i></span>
+      <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)

src/views/charts/Panel.vue

@@ -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 = {
+        /* chart.params = {
-          collpase: false
+          collapse: false
-        }
+        } */
         chart.h = getGroupHeight(chart.children) + 1.5
-        if (chart.params.collpase) {
+        if (chart.params.collapse) {
           chart.h = 1
         }
       }

src/views/charts/PanelChart.vue

@@ -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"

src/views/charts/PanelChartList.vue

@@ -122,8 +122,8 @@ export default {
     groupShow (chart) {
       this.copyDataList.forEach((item, index) => {
         if (item.id === chart.id) {
-          item.params.collpase = !item.params.collpase
+          item.params.collapse = !item.params.collapse
-          if (item.params.collpase) {
+          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)

src/views/charts/charts/ChartGroup.vue

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

src/views/entityExplorer/entityList/detailOverview/Domain.vue

@@ -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>