CN-172 fix: 修复初始加载有些图表不显示数据的问题

src/components/charts/panel.scss

@@ -130,7 +130,7 @@
       align-items: center;
       flex-shrink: 0;
       padding: 10px 20px 10px 18px;
-      height: 50px;
+      height: 47px;
 
       .cn-chart__title {
         font-size: 16px;
@@ -380,7 +380,7 @@
       }
     }
     .cn-chart__body {
-      overflow-y: auto;
+      overflow: hidden auto;
 
       .el-table {
         padding: 0 10px;
@@ -507,7 +507,7 @@
     }
     .cn-panel {
       padding: 20px;
-      grid-gap: 20px;
+      grid-gap: 10px;
 
       &>.cn-chart>.cn-chart__header {
         border-bottom: 1px solid $--content-right-background-color;

src/components/entities/EntityList.vue

@@ -65,7 +65,7 @@
               <span class="body__row-label"><i class="cn-icon cn-icon-risk"></i>&nbsp;{{$t('entities.subcategory')}}:</span>
               <div class="body__row-value" :title="d.appSubategory">{{d.appSubategory || '-'}}</div>
             </div>
-            <div class="body__detail" @click="entityDetail({appId: d.appId, type: 6})">{{$t('overall.detail')}}></div>
+            <div class="body__detail" @click="entityDetail({app: d.appName, type: 6})">{{$t('overall.detail')}}></div>
           </template>
         </div>
       </div>

src/components/layout/Header.vue

@@ -12,9 +12,18 @@
           size="small"
           v-model="from"
           v-if="showEntityTypeSelector"
-          style="padding-left: 25px; width: 130px;"
+          style="padding-left: 25px; width: 140px;"
+          class="entity-selector"
       >
-        <el-option v-for="(value, key) in entityType" :key="key" :label="value" :value="key"></el-option>
+        <el-option v-for="(value, key) in entityType" :label="value" :key="key" :value="key">
+          <template v-if="value === entityType.ip"><i style="color: #23BF9A;" class="cn-icon cn-icon-ip"></i></template>
+          <template v-else-if="value === entityType.domain"><i style="color: #23BF9A;" class="cn-icon cn-icon-domain"></i></template>
+          <template v-else-if="value === entityType.app"><i style="color: #23BF9A;" class="cn-icon cn-icon-app"></i></template>
+          {{value}}
+        </el-option>
+        <template #prefix>
+          <i style="color: #23BF9A;" class="cn-icon" :class="`cn-icon-${from}`"></i>
+        </template>
       </el-select>
     </div>
     <!--个人操作-->
@@ -339,4 +348,9 @@ export default {
     color: #999;
   }
 }
+.entity-selector {
+  .el-input__prefix {
+    left: 7px !important;
+  }
+}
 </style>

src/views/charts/Chart.vue

@@ -129,6 +129,7 @@
           </div>
         </div>
       </template>
+      <!-- IP详情 托管域名 -->
       <template v-else-if="isIpHostedDomain">
         <div class="ip-detail__hosted-domain">
           <div class="hosted-domain__list">
@@ -149,6 +150,27 @@
           </div>
         </div>
       </template>
+      <!-- APP详情 关联域名 -->
+      <template v-else-if="isAppRelatedDomain">
+        <div class="app-detail__related-domain">
+          <div class="related-domain__list">
+            <div class="related-domain__list-title">{{$t('overall.domain')}}</div>
+            <div class="related-domain__list-body">
+              <div class="related-domain__list-row" v-for="(data, i) in detailData" :key="i"><i class="cn-icon cn-icon-domain"></i>&nbsp;{{data}}</div>
+            </div>
+          </div>
+          <div class="related-domain__chart">
+            <div>
+              <div class="related-domain__chart-title">{{$t('entities.byCategory')}}</div>
+              <div class="chart-drawing" :id="`chart${chartInfo.id}-0`"></div>
+            </div>
+            <div>
+              <div class="related-domain__chart-title">{{$t('entities.byCredit')}}</div>
+              <div class="chart-drawing" :id="`chart${chartInfo.id}-1`"></div>
+            </div>
+          </div>
+        </div>
+      </template>
       <div v-else class="chart-drawing" :id="`chart${chartInfo.id}`"></div>
     </template>
     <template #footer v-if="layout.indexOf(layoutConstant.FOOTER) > -1">
@@ -387,9 +409,9 @@
       <div style="display: flex; justify-content: space-between; width: 100%;">
         <el-descriptions :column="1" style="padding: 20px 30px;">
           <el-descriptions-item :label="$t('overall.appName')">{{detailData ? detailData.name : '-'}}</el-descriptions-item>
-          <el-descriptions-item :label="$t('overall.appFullName') + ':'">{{detailData.fullName || '-'}}</el-descriptions-item>
+          <el-descriptions-item :label="$t('overall.appFullName') + ':'">{{detailData ? detailData.allName : '-'}}</el-descriptions-item>
-          <el-descriptions-item :label="$t('overall.technology')">{{detailData.technology || '-'}}</el-descriptions-item>
+          <el-descriptions-item :label="$t('overall.technology')">{{detailData ? detailData.tech : '-'}}</el-descriptions-item>
-          <el-descriptions-item :label="$t('overall.remark')">{{detailData.remark || '-'}}</el-descriptions-item>
+          <el-descriptions-item :label="$t('overall.remark')">{{detailData ? detailData.remark : '-'}}</el-descriptions-item>
         </el-descriptions>
         <div style="display: flex;">
           <single-value
@@ -402,7 +424,7 @@
               <span>{{$t('entities.category')}}</span>
             </template>
             <template #data>
-              <span>test</span>
+              <span>{{detailData ? detailData.category : '-'}}</span>
             </template>
           </single-value>
           <single-value
@@ -415,7 +437,7 @@
               <span>{{$t('entities.subcategory')}}</span>
             </template>
             <template #data>
-              <span>test2</span>
+              <span>{{detailData ? detailData.subcategory : '-'}}</span>
             </template>
           </single-value>
           <single-value
@@ -428,46 +450,13 @@
               <span>{{$t('entities.reputationLevel')}}</span>
             </template>
             <template #data>
-              <span>test3</span>
+              <span>{{detailData ? detailData.risk : '-'}}</span>
             </template>
           </single-value>
         </div>
       </div>
     </div>
   </div>
-  <!-- APP详情-相关域名 -->
-  <div
-      v-else-if="isAppRelatedDomain"
-      class="cn-chart cn-chart__dns-record"
-      :style="computePosition"
-  >
-    <div class="cn-chart__header">
-      <chart-error
-          :isError="isError"
-          :errorInfo="errorInfo"
-      >
-      </chart-error>
-      <div class="header__title">
-        <span :title="chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name">{{chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name}}</span>
-      </div>
-    </div>
-    <div class="cn-chart__body">
-      <div class="entity-detail__dns-record">
-        <div class="dns-record__table">
-          <div style="height: 100%; overflow: hidden auto;">
-            <div class="dns-record__table-row dns-record__table-row--header">
-              <div class="dns-record__table-cell" style="min-width: 200px;">Type</div>
-              <div class="dns-record__table-cell" style="width: 100%;">Value</div>
-            </div>
-            <div class="dns-record__table-row" v-for="(data, index) in detailData" :key="index">
-              <div class="dns-record__table-cell">{{data.type || '-'}}</div>
-              <div class="dns-record__table-cell">{{data.value || '-'}}</div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
 </template>
 
 <script>
@@ -584,8 +573,11 @@ export default {
           }
           // TODO 优化：缓存地图，重新查询时只更改数据，不再次初始化
         } else if (this.isEcharts) {
-          if (this.isIpHostedDomain) {
+          if (this.isIpHostedDomain || this.isAppRelatedDomain) {
-
+            const dom = document.getElementById(`chart${this.chartInfo.id}-0`)
+            const dom2 = document.getElementById(`chart${this.chartInfo.id}-1`)
+            !this.myChart && (this.myChart = echarts.init(dom))
+            !this.myChart2 && (this.myChart2 = echarts.init(dom2))
           } else {
             const dom = document.getElementById(`chart${this.chartInfo.id}`)
             !this.myChart && (this.myChart = echarts.init(dom))
@@ -604,6 +596,8 @@ export default {
               this.initIpOpenPort(chartParams)
             } else if (this.isIpHostedDomain) {
               this.initIpHostedDomain(chartParams)
+            } else if (this.isAppRelatedDomain) {
+              this.initAppRelatedDomain(chartParams)
             } else {
               this.initECharts(chartParams)
             }
@@ -617,6 +611,7 @@ export default {
             this.singleValue.icon = chartParams.icon
             const gotData = new Promise(resolve => {
               if (chartParams.dataKey) {
+                console.info(this.parentData, chartParams)
                 if (this.parentData && this.parentData[chartParams.dataKey]) {
                   this.singleValue.value = this.parentData[chartParams.dataKey]
                 } else {
@@ -1229,15 +1224,72 @@ export default {
             this.noData = true
           } else {
             this.noData = false
-            // this.detailData = response.data.result
+            this.detailData = response.data.result
-            this.detailData = ['www.abcdefghijklmnopqrstuvwxyz.com', 'qq.com', 'baidu.com', 'alimama.com', 'google.com']
+            // this.detailData = ['www.abcdefghijklmnopqrstuvwxyz.com', 'qq.com', 'baidu.com', 'alimama.com', 'google.com']
+          }
+        }
+        this.chartOption.series[0].data = [
+          {
+            name: 'test1',
+            value: 32
+          },
+          {
+            name: 'test2',
+            value: 21
+          },
+          {
+            name: 'test3',
+            value: 20
+          },
+          {
+            name: 'test4',
+            value: 7
+          }
+        ]
+        this.myChart.setOption(this.chartOption)
+        this.myChart2.setOption(this.chartOption)
+      }).finally(() => {
+        setTimeout(() => {
+          this.loading = false
+        }, 250)
+      })
+    },
+    initAppRelatedDomain (chartParams) {
+      this.noData = false
+      this.loading = false
+      this.chartOption.series[0].data = [
+        {
+          name: 'test1',
+          value: 32
+        },
+        {
+          name: 'test2',
+          value: 21
+        },
+        {
+          name: 'test3',
+          value: 20
+        },
+        {
+          name: 'test4',
+          value: 7
+        }
+      ]
+      this.myChart.setOption(this.chartOption)
+      this.myChart2.setOption(this.chartOption)
+      /* get(replaceUrlPlaceholder(chartParams.url, { app: this.entity.app })).then(response => {
+        if (response.code === 200) {
+          if (this.$_.isEmpty(response.data.result)) {
+            this.noData = true
+          } else {
+            this.noData = false
           }
         }
       }).finally(() => {
         setTimeout(() => {
           this.loading = false
         }, 250)
-      })
+      }) */
     },
     initEchartsWithStatistics (chartParams) {
       const queryParams = { startTime: parseInt(this.timeFilter.startTime / 1000), endTime: parseInt(this.timeFilter.endTime / 1000), ...this.entity }
@@ -1500,6 +1552,17 @@ export default {
           })
         }
       }
+    },
+    parentData: {
+      immediate: true,
+      deep: true,
+      handler (n, o) {
+        if (n) {
+          this.$nextTick(() => {
+            this.initChart()
+          })
+        }
+      }
     }
   },
   setup (props) {
@@ -1532,7 +1595,8 @@ export default {
       isAppBasicInfo: isAppBasicInfo(props.chart.type),
       isAppRelatedDomain: isAppRelatedDomain(props.chart.type),
       layout: getLayout(props.chart.type),
-      myChart: shallowRef(null)
+      myChart: shallowRef(null),
+      myChart2: shallowRef(null) // 个别有两个图表的chart
     }
   },
   unmounted () {
@@ -1585,13 +1649,13 @@ export default {
     }
   }
 }
-.ip-detail__hosted-domain {
+.ip-detail__hosted-domain, .app-detail__related-domain {
   display: flex;
   flex-direction: column;
   height: 100%;
   width: 100%;
 
-  .hosted-domain__list {
+  .hosted-domain__list, .related-domain__list {
     display: flex;
     flex-direction: column;
     flex: 0 0 25%;
@@ -1599,23 +1663,23 @@ export default {
     padding-bottom: 20px;
     border-bottom: 1px solid $--right-box-border-color;
 
-    .hosted-domain__list-title {
+    .hosted-domain__list-title, .related-domain__list-title {
       padding: 13px 30px 0;
       height: 40px;
       color: #6B717B;
     }
-    .hosted-domain__list-body {
+    .hosted-domain__list-body, .related-domain__list-body {
       display: flex;
       flex-direction: column;
       height: calc(100% - 40px);
       overflow: hidden auto;
     }
-    .hosted-domain__list-row {
+    .hosted-domain__list-row, .related-domain__list-row {
       padding: 5px 30px;
       color: #3976CB;
     }
   }
-  .hosted-domain__chart {
+  .hosted-domain__chart, .related-domain__chart {
     display: flex;
     flex-direction: column;
     flex: 1;
@@ -1688,4 +1752,29 @@ export default {
     }
   }
 }
+.app-detail__related-domain {
+  flex-direction: row;
+  .related-domain__list {
+    border-bottom: none;
+  }
+  .related-domain__chart {
+    flex-direction: row;
+    border-left: 1px solid $--right-box-border-color;
+    padding: 3vh 5vw;
+    &>div {
+      flex: 0 0 50%;
+      display: flex;
+      flex-direction: column;
+      .related-domain__chart-title {
+        padding-left: 20px;
+        line-height: 50px;
+        flex: 0 0 50px;
+        color: #3976CB;
+      }
+      .chart-drawing {
+        flex: 1;
+      }
+    }
+  }
+}
 </style>

src/views/charts/Panel.vue

@@ -30,9 +30,9 @@
     <div class="entity-detail__header">
       <div class="detail-header__title">
         <span class="title__icon-circle">
-          <i class="cn-icon" :class="{'cn-icon-ip': entity.ip, 'cn-icon-domain': entity.domain, 'cn-icon-app': entity.appId}"></i>
+          <i class="cn-icon" :class="{'cn-icon-ip': entity.ip, 'cn-icon-domain': entity.domain, 'cn-icon-app': entity.app}"></i>
         </span>
-        <div class="title__name" :title="entity.ip || entity.domain || entity.appId || '-'">{{entity.ip || entity.domain || entity.appId || '-'}}</div></div>
+        <div class="title__name" :title="entity.ip || entity.domain || entity.app || '-'">{{entity.ip || entity.domain || entity.app || '-'}}</div></div>
       <div class="detail-header__operation">
         <div class="panel__time">
           <DateTimeRange class="date-time-range" :start-time="timeFilter.startTime" :end-time="timeFilter.endTime" ref="dateTimeRange" @change="reload"/>