CN-56 perf: entity详情布局

README.md

@@ -29,7 +29,7 @@ npm run lint
 
 ### 3.图表组件库
 图表：echarts5.0  
-地图(支持下钻)(待定)：echarts+自定义事件 | amCharts  
+地图：amCharts  
 拖拽 & Resize：Vue-grid-layout  https://jbaysolutions.github.io/vue-grid-layout/guide/
 
 ### 4.响应式方案
@@ -37,7 +37,7 @@ lib-flexible + postcss-px2rem-exclude + 媒体查询
 lib-flexible 将px自动转为rem，postcss-px2rem-exclude 避免将ui库的css转换，媒体查询根据不同屏幕大小使用不同的root font size
 
 ### 5.工具
-使用lodash库，该库包含大部分常用工具方法，包括数组操作、函数功能扩展、对象操作等，且高性能、一致。开发中应该优先使用该库的方法  
+lodash库，该库包含大部分常用工具方法，包括数组操作、函数功能扩展、对象操作等，且高性能、一致。开发中应该优先使用该库的方法  
 https://www.lodashjs.com/
 
 ## 开发规范 & 要求

src/components/entities/EntityList.vue

@@ -36,7 +36,7 @@
               <span class="body__row-label">{{$t('entities.asn')}}:</span>
               <div class="body__row-value" :title="d.asn">{{d.asn || '-'}}</div>
             </div>
-            <div class="body__detail">{{$t('overall.detail')}}</div>
+            <div class="body__detail" @click="entityDetail">{{$t('overall.detail')}}</div>
           </template>
           <template v-else-if="entityType === 'domain'">
             <div class="body__row">
@@ -51,7 +51,7 @@
               <span class="body__row-label">{{$t('entities.creditScore')}}:</span>
               <div class="body__row-value" :title="d.reputationScore">{{d.reputationScore || '-'}}</div>
             </div>
-            <div class="body__detail">{{$t('overall.detail')}}</div>
+            <div class="body__detail" @click="entityDetail({domain: d.domainName})">{{$t('overall.detail')}}</div>
           </template>
           <template v-else-if="entityType === 'app'">
             <div class="body__row">
@@ -66,7 +66,7 @@
               <span class="body__row-label">{{$t('entities.subcategory')}}:</span>
               <div class="body__row-value" :title="d.appSubategory">{{d.appSubategory || '-'}}</div>
             </div>
-            <div class="body__detail">{{$t('overall.detail')}}</div>
+            <div class="body__detail" @click="entityDetail({appId: d.appId})">{{$t('overall.detail')}}</div>
           </template>
         </div>
       </div>
@@ -95,6 +95,12 @@ export default {
     entityType: String,
     pageObj: Object
   },
+  data () {
+    return {
+      showDetail: false,
+      typeName: ''
+    }
+  },
   computed: {
     circleColor () {
       let color
@@ -161,6 +167,9 @@ export default {
           }
         })
       })
+    },
+    entityDetail (params) {
+      this.$emit('showDetail', params)
     }
   }
 }

src/components/layout/LeftMenu.vue

@@ -111,7 +111,7 @@ export default {
   methods: {
     jump (route) {
       if (route === this.route) {
-        // this.refresh()
+        this.refresh()
         return
       }
       this.$router.push({

src/utils/constants.js

@@ -36,7 +36,10 @@ export const fromRoute = {
 export const panelTypeAndRouteMapping = {
   trafficSummary: 1,
   networkAppPerformance: 2,
-  dnsServiceInsights: 3
+  dnsServiceInsights: 3,
+  ipEntityDetail: 4,
+  domainEntityDetail: 5,
+  appEntityDetail: 6
 }
 
 export const position = {

src/views/charts/Chart.vue

@@ -632,7 +632,7 @@ export default {
       immediate: true,
       deep: true,
       handler (n, o) {
-        if (n) {
+        if (n && o) {
           this.$nextTick(() => {
             this.initChart()
           })
@@ -643,7 +643,6 @@ export default {
   setup (props) {
     const chartInfo = JSON.parse(JSON.stringify(props.chart))
     chartInfo.category = getTypeCategory(props.chart.type)
-    chartInfo.params = chartInfo.params ? JSON.parse(chartInfo.params) : null
     return {
       chartInfo,
       layoutConstant,

src/views/charts/Panel.vue

@@ -40,6 +40,10 @@ import TimeRefresh from '@/components/common/TimeRange/TimeRefresh'
 
 export default {
   name: 'Panel',
+  props: {
+    typeName: String,
+    entity: Object
+  },
   components: {
     Chart,
     DateTimeRange,
@@ -61,7 +65,7 @@ export default {
     const panel = ref({})
     let panelType = 1 // 取得panel的type
     const { params } = useRoute()
-    panelTypeAndRouteMapping[params.typeName] && (panelType = panelTypeAndRouteMapping[params.typeName])
+    panelType = props.typeName ? panelTypeAndRouteMapping[props.typeName] : panelTypeAndRouteMapping[params.typeName]
     return {
       panelType,
       panel,
@@ -78,10 +82,23 @@ export default {
       if (this.panel.id) {
         this.chartList = (await getChartList({ panelId: this.panel.id, pageSize: -1 })).map(chart => {
           chart.i = chart.id
+          this.recursionParamsConvert(chart)
           return chart
         })
       }
     },
+    recursionParamsConvert (chart) {
+      console.info(chart)
+      chart.params = chart.params ? JSON.parse(chart.params) : null
+      if (this.entity) {
+        chart.params = { ...chart.params, ...this.entity }
+      }
+      if (!this.$_.isEmpty(chart.children)) {
+        chart.children.forEach(c => {
+          this.recursionParamsConvert(c)
+        })
+      }
+    },
     timeRefreshChange () {
       if (!this.$refs.dateTimeRange.isCustom) {
         const value = this.timeFilter.dateRangeValue

src/views/entities/EntityExplorer.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="outer-box">
+  <div class="outer-box" v-if="!showDetail">
     <div class="cn-entities">
       <el-select
           size="small"
@@ -30,11 +30,13 @@
           :list-data="listData"
           :entity-type="filterType"
           :page-obj="pageObjRight"
+          @showDetail="entityDetail"
           @pageSize="pageSizeRight"
           @pageNo="pageNoRight"
       ></entity-list>
     </div>
   </div>
+  <cn-panel v-else :entity="currentEntity" :type-name="typeName"></cn-panel>
 </template>
 
 <script>
@@ -43,6 +45,7 @@ import { ref } from 'vue'
 import LeftFilter from '@/components/entities/LeftFilter'
 import EntityList from '@/components/entities/EntityList'
 import { getEntityIpFilterList, getEntityDomainFilterList, getEntityAppFilterList, getEntityIpList, getEntityDomainList, getEntityAppList } from '@/utils/api'
+import Panel from '@/views/charts/Panel'
 export default {
   name: 'EntityExplorer',
   data () {
@@ -64,12 +67,16 @@ export default {
         pageSize: 50,
         total: 0
       },
-      listData: []
+      listData: [],
+      showDetail: false,
+      typeName: '',
+      currentEntity: {}
     }
   },
   components: {
     LeftFilter,
-    EntityList
+    EntityList,
+    'cn-panel': Panel
   },
   methods: {
     async showMore (key) {
@@ -231,6 +238,11 @@ export default {
           })
         }
       }
+    },
+    entityDetail (entity) {
+      this.typeName = `${this.filterType.toLowerCase()}EntityDetail`
+      this.currentEntity = entity
+      this.showDetail = true
     }
   },
   watch: {