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

2021-09-24 19:24:25 +08:00
parent 56d32ce8ca
commit 4d239cd2b3
5 changed files with 162 additions and 59 deletions
--- a/src/components/charts/panel.scss
+++ b/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;
--- a/src/components/entities/EntityList.vue
+++ b/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>
--- a/src/components/layout/Header.vue
+++ b/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>
--- a/src/views/charts/Chart.vue
+++ b/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.technology')">{{detailData.technology || '-'}}</el-descriptions-item>
-          <el-descriptions-item :label="$t('overall.remark')">{{detailData.remark || '-'}}</el-descriptions-item>
+          <el-descriptions-item :label="$t('overall.appFullName') + ':'">{{detailData ? detailData.allName : '-'}}</el-descriptions-item>
+          <el-descriptions-item :label="$t('overall.technology')">{{detailData ? detailData.tech : '-'}}</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 = ['www.abcdefghijklmnopqrstuvwxyz.com', 'qq.com', 'baidu.com', 'alimama.com', 'google.com']
+            this.detailData = response.data.result
+            // 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>
--- a/src/views/charts/Panel.vue
+++ b/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"/>