fix: 实体代码整理

README.md

@@ -29,7 +29,7 @@ npm run lint
 
 ### 3.图表组件库
 图表：echarts5.0  
-地图：amCharts  
+地图：amCharts4  
 拖拽 & Resize：Vue-grid-layout  https://jbaysolutions.github.io/vue-grid-layout/guide/
 
 ### 4.响应式方案
@@ -51,7 +51,7 @@ https://www.lodashjs.com/
 多个单词时，应该以高阶的 (通常是一般化描述的) 单词开头，以描述性的修饰词结尾  
 eg：`SearchButtonClear.vue` 反例：`ClearSearchButton.vue`
 - **文件夹**  
-使用小写，单词间使用连字符`-`连接，或使用驼峰格式 
+使用小写，单词间使用连字符`-`连接，或使用驼峰格式  
 eg：`right-box`、`rightBox`
 
 

src/views/charts/Chart.vue

@@ -299,13 +299,12 @@ import {
   isMapLine,
   isMapBlock,
   isSingleValueWithEcharts,
-  isSingleValueWithEchartsTemp,
+  isSingleValueWithPercent,
   isRelationShip,
   isTabs,
   isGroup,
   isSankey,
   isIpBasicInfo,
-  isIpOpenPort,
   isIpHostedDomain,
   isDomainWhois,
   isDomainDnsRecord,
@@ -441,9 +440,7 @@ export default {
       isEchartsWithStatistics: isEchartsWithStatistics(props.chartInfo.type),
       isSingleValue: isSingleValue(props.chartInfo.type),
       isSingleValueWithEcharts: isSingleValueWithEcharts(props.chartInfo.type),
-      isSingleValueWithEchartsTemp: isSingleValueWithEchartsTemp(
+      isSingleValueWithPercent: isSingleValueWithPercent(props.chartInfo.type),
-        props.chartInfo.type
-      ),
       isRelationShip: isRelationShip(props.chartInfo.type),
       isTable: isTable(props.chartInfo.type),
       isBasicTable: isBasicTable(props.chartInfo.type),
@@ -458,7 +455,6 @@ export default {
       isSankey: isSankey(props.chartInfo.type),
       isIpBasicInfo: isIpBasicInfo(props.chartInfo.type),
       isIpHostedDomain: isIpHostedDomain(props.chartInfo.type),
-      isIpOpenPort: isIpOpenPort(props.chartInfo.type),
       isDomainWhois: isDomainWhois(props.chartInfo.type),
       isDomainDnsRecord: isDomainDnsRecord(props.chartInfo.type),
       isCryptocurrencyEventList: isCryptocurrencyEventList(

src/views/charts/Panel.vue

@@ -45,7 +45,11 @@ import { ref } from 'vue'
 import { panelTypeAndRouteMapping } from '@/utils/constants'
 import { api, getPanelList, getChartList } from '@/utils/api'
 import { getNowTime } from '@/utils/date-util'
-import { getGroupHeight, getTypeCategory } from '@/views/charts/charts/tools'
+import {
+  isGroup,
+  isBlock,
+  getGroupHeight
+} from './charts/tools'
 
 export default {
   name: 'Panel',
@@ -115,7 +119,7 @@ export default {
     recursionParamsConvert (chart) {
       chart.params = chart.params ? JSON.parse(chart.params) : {}
       chart.firstShow = false
-      if (chart.type === 94) {
+      if (isGroup(chart.type)) {
         chart.oldH = chart.h
         /* chart.params = {
           collapse: false
@@ -125,10 +129,10 @@ export default {
           chart.h = 1
         }
       }
-      if (chart.type === 95) {
+      if (isBlock(chart.type)) {
         let sumGroup = 0
         chart.children.forEach(item => {
-          if (item.type === 94) {
+          if (isGroup(item.type)) {
             sumGroup++
           }
         })

src/views/charts/PanelChart.vue

@@ -26,7 +26,7 @@
     <!-- 数据查询后传入chart组件，chart组件内不查询，只根据接传递的数据来渲染 -->
     <chart
         ref="chart"
-        v-if="((!isGroup) || !(chartInfo.params && chartInfo.params.collapse)) && !isTitle "
+        v-if="(!isGroup || !(chartInfo.params && chartInfo.params.collapse)) && !isTitle "
         :chart-data="chartData"
         :result-type="resultType"
         :chart-info="chartInfo"
@@ -65,13 +65,13 @@ import {
   isMapLine,
   isMapBlock,
   isSingleValueWithEcharts,
-  isSingleValueWithEchartsTemp,
+  isSingleValueWithPercent,
   isRelationShip,
   isTabs,
   isGroup,
   isSankey,
   isIpBasicInfo,
-  isIpOpenPort,
+  isIpOpenPortBar,
   isIpHostedDomain,
   isDomainWhois,
   isDomainDnsRecord,
@@ -212,7 +212,7 @@ export default {
               }
               this.chartData = response.data.result
               this.resultType = response.data.resultType
-              if (this.chartInfo.type === 12) {
+              if (isEchartsWithStatistics(this.chartInfo.type)) {
                 const newArr = []
                 _.forEach(this.chartData, function (value, key) {
                   _.forEach(value.values, function (value, key) {
@@ -251,16 +251,16 @@ export default {
             }
           }).finally(() => {
             setTimeout(() => {
-              if(!(this.chartInfo.type === 33 || this.chartInfo.type === 34) ){
+              if(!(isIpHostedDomain(this.chartInfo.type) || isAppRelatedDomain(this.chartInfo.type)) ){
                 this.loading = false
               }else if(!this.chartData || this.chartData.length === 0){
                 this.loading = false
               }
             }, 200)
           })
-        } else if (this.chartInfo.type === 94) {
+        } else if (isGroup(this.chartInfo.type)) {
           this.chartInfo.children = [...this.chartInfo.children]
-        } else if (this.chartInfo.type === 95) {
+        } else if (isBlock(this.chartInfo.type)) {
           if (!this.chartInfo.firstShow) {
             this.chartInfo.firstShow = true
           } else {
@@ -410,7 +410,7 @@ export default {
       isEchartsWithStatistics: isEchartsWithStatistics(props.chartInfo.type),
       isSingleValue: isSingleValue(props.chartInfo.type),
       isSingleValueWithEcharts: isSingleValueWithEcharts(props.chartInfo.type),
-      isSingleValueWithEchartsTemp: isSingleValueWithEchartsTemp(props.chartInfo.type),
+      isSingleValueWithPercent: isSingleValueWithPercent(props.chartInfo.type),
       isRelationShip: isRelationShip(props.chartInfo.type),
       isTable: isTable(props.chartInfo.type),
       isActiveIpTable: isActiveIpTable(props.chartInfo.type),
@@ -424,7 +424,7 @@ export default {
       isSankey: isSankey(props.chartInfo.type),
       isIpBasicInfo: isIpBasicInfo(props.chartInfo.type),
       isIpHostedDomain: isIpHostedDomain(props.chartInfo.type),
-      isIpOpenPort: isIpOpenPort(props.chartInfo.type),
+      isIpOpenPortBar: isIpOpenPortBar(props.chartInfo.type),
       isDomainWhois: isDomainWhois(props.chartInfo.type),
       isDomainDnsRecord: isDomainDnsRecord(props.chartInfo.type),
       isCryptocurrencyEventList: isCryptocurrencyEventList(props.chartInfo.type),

src/views/charts/PanelChartList.vue

@@ -22,7 +22,7 @@
           :y="item.y"
           :static="item.static"
           :ref="'grid-item' + item.id"
-          :isResizable = "item.type === 'group' ? false: null"
+          :isResizable="isGroup ? false: null"
           dragAllowFrom=".chart-header"
           dragIgnoreFrom=".chart-header__tools"
           v-bind="anchorPoint(item)"
@@ -188,18 +188,7 @@ export default {
           })
           setTimeout(() => {
             this.copyDataList.forEach(item => {
-              // if (item.type === 95) {
+              if (isGroup(item.type) && !item.firstShow) {
-              //   console.log(item.h, item.name)
-              //   item.children.forEach(children => {
-              //     console.log(children.name, children.h, children.y)
-              //   })
-              //   let parentH = 1.5
-              //   parentH += getGroupHeight(item.children)
-              //   if (parentH !== item.h) {
-              //     item.h = parentH
-              //   }
-              // }
-              if (item.type === 94 && !item.firstShow) {
                 item.firstShow = true
                 this.copyDataList = [...this.copyDataList]
                 this.emitter.emit('groupParentCalcHeight', { chart: item, childrenList: this.copyDataList })

src/views/charts/charts/ChartBlock.vue

@@ -10,24 +10,36 @@
 
 <script>
 import chartMixin from '@/views/charts/charts/chart-mixin'
+import _ from 'lodash'
 
 export default {
   name: 'ChartBlock',
   mixins: [chartMixin],
   data () {
     return {
-      dataList: [],
       time: {},
       firstShow: false
     }
   },
   mounted () {
-    this.dataList = JSON.parse(JSON.stringify(this.chartInfo.children))
     this.firstShow = true
   },
   methods: {
     reload () {
-      this.dataList = JSON.parse(JSON.stringify(this.chartInfo.children))
+      this.dataList = _.cloneDeep(this.dataList)
+    }
+  },
+  setup (props) {
+    const copyAndSort = dataList => {
+      const list = _.cloneDeep(dataList)
+      return list.sort((data1, data2) => {
+        return data1.x - data2.x
+      })
+    }
+    const dataList = copyAndSort(props.chartInfo.children)
+    return {
+      copyAndSort,
+      dataList
     }
   }
 }

src/views/charts/charts/ChartMap.vue

@@ -109,67 +109,65 @@ export default {
       chart.geodata = getGeoData(storageKey.iso36112WorldLow)
       chart.projection = new am4Maps.projections.Miller()
       this.myChart = chart
-      setTimeout(() => {
+      this.polygonSeries = this.polygonSeriesFactory()
-        this.polygonSeries = this.polygonSeriesFactory()
 
-        if (this.isMapPoint) {
+      if (this.isMapPoint) {
-          this.worldImageSeries = this.imageSeriesFactory()
+        this.worldImageSeries = this.imageSeriesFactory()
-        }
+      }
 
-        this.loadAm4ChartMap(this.polygonSeries, this.worldImageSeries)
+      this.loadAm4ChartMap(this.polygonSeries, this.worldImageSeries)
 
-        // 地图点击事件
+      // 地图点击事件
-        if (this.isMapBlock) {
+      if (this.isMapBlock) {
-          this.polygonSeries.mapPolygons.template.events.on('hit', async ev => {
+        this.polygonSeries.mapPolygons.template.events.on('hit', async ev => {
-            const countryId = ev.target.dataItem.dataContext.id
+          const countryId = ev.target.dataItem.dataContext.id
-            if (countryId) {
+          if (countryId) {
-              ev.target.series.chart.zoomToMapObject(ev.target)
+            ev.target.series.chart.zoomToMapObject(ev.target)
-              ev.target.isHover = false
-              const geoData = getGeoData(countryId)
-              if (geoData) {
-                this.countrySeries = this.polygonSeriesFactory()
-                this.countrySeries.geodata = geoData
-                this.polygonSeries.hide()
-                const country = ev.target.dataItem.dataContext.serverCountry
-                const queryParams = { ...this.queryParams, country }
-                const chartData = await getData(replaceUrlPlaceholder(this.chartInfo.params.url, queryParams))
-                this.loadAm4ChartMap(this.countrySeries, null, country, chartData)
-              }
-            }
-          })
-        } else if (this.isMapPoint) {
-          this.worldImageSeries.mapImages.template.events.on('hit', async ev => {
-            const countryId = ev.target.dataItem.dataContext.id
             ev.target.isHover = false
-            if (countryId) {
+            const geoData = getGeoData(countryId)
-              const targetMapObject = this.polygonSeries.getPolygonById(countryId)
+            if (geoData) {
-              targetMapObject.series.chart.zoomToMapObject(targetMapObject)
+              this.countrySeries = this.polygonSeriesFactory()
-              const geoData = getGeoData(countryId)
+              this.countrySeries.geodata = geoData
-              if (geoData) {
+              this.polygonSeries.hide()
-                this.countrySeries = this.polygonSeriesFactory()
+              const country = ev.target.dataItem.dataContext.serverCountry
-                this.countrySeries.geodata = geoData
+              const queryParams = { ...this.queryParams, country }
-                this.countryImageSeries = this.imageSeriesFactory()
+              const chartData = await getData(replaceUrlPlaceholder(this.chartInfo.params.url, queryParams))
-                this.polygonSeries.hide()
+              this.loadAm4ChartMap(this.countrySeries, null, country, chartData)
-                this.worldImageSeries.hide()
-                const country = ev.target.dataItem.dataContext.location
-                const queryParams = { ...this.queryParams, ipLocationCountry: country }
-                const chartData = await getData(replaceUrlPlaceholder(this.chartInfo.params.url, queryParams))
-                this.loadAm4ChartMap(this.countrySeries, this.countryImageSeries, country, chartData)
-              }
             }
-          })
+          }
-        }
+        })
-        // dns地图legend上的数据
+      } else if (this.isMapPoint) {
-        if (!_.isEmpty(this.chartInfo.params.legendUrl)) {
+        this.worldImageSeries.mapImages.template.events.on('hit', async ev => {
-          setTimeout(() => {
+          const countryId = ev.target.dataItem.dataContext.id
-            this.chartInfo.params.legendUrl.forEach((url, i) => {
+          ev.target.isHover = false
-              getData(url).then(data => {
+          if (countryId) {
-                this.legends[i].value = data
+            const targetMapObject = this.polygonSeries.getPolygonById(countryId)
-              })
+            targetMapObject.series.chart.zoomToMapObject(targetMapObject)
+            const geoData = getGeoData(countryId)
+            if (geoData) {
+              this.countrySeries = this.polygonSeriesFactory()
+              this.countrySeries.geodata = geoData
+              this.countryImageSeries = this.imageSeriesFactory()
+              this.polygonSeries.hide()
+              this.worldImageSeries.hide()
+              const country = ev.target.dataItem.dataContext.location
+              const queryParams = { ...this.queryParams, ipLocationCountry: country }
+              const chartData = await getData(replaceUrlPlaceholder(this.chartInfo.params.url, queryParams))
+              this.loadAm4ChartMap(this.countrySeries, this.countryImageSeries, country, chartData)
+            }
+          }
+        })
+      }
+      // dns地图legend上的数据
+      if (!_.isEmpty(this.chartInfo.params.legendUrl)) {
+        setTimeout(() => {
+          this.chartInfo.params.legendUrl.forEach((url, i) => {
+            getData(url).then(data => {
+              this.legends[i].value = data
             })
           })
-        }
+        })
-      })
+      }
     },
     polygonSeriesFactory () {
       const polygonSeries = this.myChart.series.push(new am4Maps.MapPolygonSeries())

src/views/charts/charts/ChartSingleValue.vue

@@ -4,7 +4,7 @@
     :class="singleValueClass(type)"
     :style="{ backgroundColor: color }"
   >
-    <div class="single-value-icon__box" v-if="type !== 54">
+    <div class="single-value-icon__box" v-if="!isCommon3SingleValue(type)">
       <div
         class="single-value__icon"
         :style="`background-color: ${
@@ -17,7 +17,7 @@
         ></i>
       </div>
     </div>
-    <div class="single-value__content" v-if="type === 51">
+    <div class="single-value__content" v-if="isCommonSingleValue(type)">
       <div class="content__data">
         <span>{{
           handleSingleValue[0] || handleSingleValue[0] === 0
@@ -34,7 +34,7 @@
     </div>
     <div
       class="single-value__content single-value__content--with-chart"
-      v-if="type === 52"
+      v-if="isSingleValueWithEcharts(type)"
     >
       <div class="content__title">
         <span :title="chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name">{{
@@ -61,7 +61,7 @@
         <div class="chart-drawing" :id="`chart${chartInfo.id}`"></div>
       </div>
     </div>
-    <div class="single-value__content" v-if="type === 53">
+    <div class="single-value__content" v-if="isCommon2SingleValue(type)">
       <div class="content__title">
         <span :title="chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name">{{
           chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name
@@ -76,7 +76,7 @@
         <span class="single-value__unit">{{ handleSingleValue[1] }}</span>
       </div>
     </div>
-    <div class="single-value__content" v-if="type === 54">
+    <div class="single-value__content" v-if="isCommon3SingleValue(type)">
       <div class="single-value-icon__box">
         <div class="single-value__icon">
           <!-- 使用图标-->
@@ -102,7 +102,7 @@
       </div>
     </div>
 
-    <div class="single-value__content" v-if="type === 55">
+    <div class="single-value__content" v-if="isSingleValueWithPercent(type)">
       <div>
       <div class="content__title">
         <span :title="chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name">{{
@@ -131,8 +131,13 @@ import { unitTypes } from '@/utils/constants'
 import { get } from '@/utils/http'
 import { replaceUrlPlaceholder } from '@/utils/tools'
 import * as echarts from 'echarts'
-import { getOption, getChartColor } from '@/views/charts/charts/tools'
+import {
-import _ from 'lodash'
+  getOption,
+  getChartColor,
+  isCommonSingleValue,
+  isSingleValueWithEcharts,
+  isCommon2SingleValue, isSingleValueWithPercent, isCommon3SingleValue
+} from '@/views/charts/charts/tools'
 
 export default {
   name: 'chartSingleValue',
@@ -188,38 +193,30 @@ export default {
     singleValueClass () {
       return function (type) {
         let c
-        switch (type) {
+        if (this.isCommonSingleValue(type)) {
-          case 51: {
+          c = 'cn-chart__single-value--icon-left'
-            c = 'cn-chart__single-value--icon-left'
+        } else if (this.isSingleValueWithEcharts(type)) {
-            break
+          c = 'cn-chart__single-value--chart'
-          }
+        } else if (this.isCommon2SingleValue(type)) {
-          case 55: {
+          c = 'cn-chart__single-value--icon-right'
-            c = 'cn-chart__single-value--icon-doh'
+        } else if (this.isCommon3SingleValue(type)) {
-            break
+          c = 'cn-chart__single-value--icon-right--color'
-          }
+        } else if (this.isSingleValueWithPercent(type)) {
-          case 52: {
+          c = 'cn-chart__single-value--icon-doh'
-            c = 'cn-chart__single-value--chart'
-            break
-          }
-          case 53: {
-            c = 'cn-chart__single-value--icon-right'
-            break
-          }
-          case 54: {
-            c = 'cn-chart__single-value--icon-right--color'
-            break
-          }
-          default:
-            break
         }
         return c
       }
     }
   },
   methods: {
+    isCommonSingleValue,
+    isSingleValueWithEcharts,
+    isCommon2SingleValue,
+    isCommon3SingleValue,
+    isSingleValueWithPercent,
     chartSingleValueTotal () {
       const chartParams = this.$_.get(this.chartInfo, 'params') || {}
-      if (this.type === 52) {
+      if (isSingleValueWithEcharts(this.type)) {
         const dom = document.getElementById(`chart${this.chartInfo.id}`)
         const myChart = echarts.init(dom)
         this.chartOption = this.$_.cloneDeep(getOption(this.type))

src/views/charts/charts/tools.js

@@ -17,43 +17,32 @@ export function getCharBartColor (index) {
 }
 
 const typeOptionMappings = [
-  { value: 11, option: line }, // 常规折线图
+  { value: 101, option: line }, // 常规折线图
-  { value: 12, option: lineWithStatistics }, // 带统计表格的折线图
+  { value: 102, option: lineWithStatistics }, // 带统计表格的折线图
-  { value: 13, option: lineStack }, // 折线堆叠图
+  { value: 103, option: lineStack }, // 折线堆叠图
-  { value: 22, option: ipOpenPortBar }, // ip详情--开放端口的柱状图
+  { value: 202, option: ipOpenPortBar }, // ip详情--开放端口的柱状图
-  { value: 23, option: timeBar }, // 矿机所属单位
+  { value: 203, option: timeBar }, // 矿机所属单位
-  { value: 24, option: categoryBar }, // 挖矿事件统计
+  { value: 204, option: categoryBar }, // 挖矿事件统计
-  { value: 31, option: pieWithTable }, // 常规饼图
+  { value: 301, option: pieWithTable }, // 常规饼图
-  { value: 32, option: pieWithTable }, // 带表格饼图
+  { value: 302, option: pieWithTable }, // 带表格饼图
-  { value: 33, option: ipHostedDomain }, // ip详情--托管域名
+  { value: 303, option: ipHostedDomain }, // ip详情--托管域名
-  { value: 34, option: ipHostedDomain }, // app详情--相关域名
+  { value: 304, option: ipHostedDomain }, // app详情--相关域名
-  { value: 42, option: relationShip }, // 关系图
+  { value: 402, option: relationShip }, // 关系图
-  { value: 43, option: sankey }, // 桑基图
+  { value: 403, option: sankey }, // 桑基图
-  { value: 52, option: singleValueLine } // 单值图中的折线图
+  { value: 502, option: singleValueLine } // 单值图中的折线图
 ]
 export function getOption (type) {
   const mapping = typeOptionMappings.find(m => m.value === type)
   return mapping && mapping.option ? _.cloneDeep(mapping.option) : null
 }
 
-/* 柱状图:挖矿事件统计(time类型柱状图) */
-export function isEchartsTimeBar (type) {
-  return type === 23
-}
-/* 柱状图:矿机所属单位(category类型柱状图) */
-export function isEchartsCategoryBar (type) {
-  return type === 24
-}
-export function isIpOpenPortBar (type) {
-  return type === 22
-}
 /* 饼图柱状图等 */
 export function isEcharts (type) {
-  return type >= 11 && type <= 50
+  return type >= 101 && type <= 500
 }
 /* 地图 */
 export function isMap (type) {
-  return type >= 1 && type <= 10
+  return type >= 1 && type <= 100
 }
 /* 连线地图 */
 export function isMapLine (type) {
@@ -67,117 +56,137 @@ export function isMapBlock (type) {
 export function isMapPoint (type) {
   return type === 3
 }
-/* 普通折线图 */
-export function isEchartsLine (type) {
-  return type === 11
-}
-/* 普通饼图 */
-export function isEchartsPie (type) {
-  return type === 32
-}
-/* 带统计的折线图 */
-export function isEchartsWithStatistics (type) {
-  return type === 12
-}
-/* 关系图 */
-export function isRelationShip (type) {
-  return type === 42
-}
-/* 桑基图 */
-export function isSankey (type) {
-  return type === 43
-}
-/* 单值 */
-export function isSingleValue (type) {
-  return type >= 51 && type <= 60
-}
-/* 带折线图的单值 */
-export function isSingleValueWithEcharts (type) {
-  return type === 52
-}
-/* 带折线图的单值 */
-export function isSingleValueWithEchartsTemp (type) {
-  return type === 55
-}
-/* 带Table的饼图 */
-export function isEchartsWithTable (type) {
-  return type === 31
-}
-/* table */
-export function isTable (type) {
-  return type >= 61 && type <= 70
-}
-/* basic table */
-export function isBasicTable (type) {
-  return type === 61
-}
-/* table */
-export function isActiveIpTable (type) {
-  return type === 63
-}
-/* title */
-export function isTitle (type) {
-  return type === 93
-}
-/* tabs */
-export function isTabs (type) {
-  return type === 91
-}
 /* IP实体基本信息 */
 export function isIpBasicInfo (type) {
   return type === 4
 }
+/* 普通折线图 */
+export function isEchartsLine (type) {
+  return type === 101
+}
+/* 带统计的折线图 */
+export function isEchartsWithStatistics (type) {
+  return type === 102
+}
 /* IP实体开放端口 */
-export function isIpOpenPort (type) {
+export function isIpOpenPortBar (type) {
-  return type === 22
+  return type === 202
+}
+/* 柱状图:挖矿事件统计(time类型柱状图) */
+export function isEchartsTimeBar (type) {
+  return type === 203
+}
+/* 柱状图:矿机所属单位(category类型柱状图) */
+export function isEchartsCategoryBar (type) {
+  return type === 204
+}
+/* 带Table的饼图 */
+export function isEchartsWithTable (type) {
+  return type === 301
+}
+/* 普通饼图 */
+export function isEchartsPie (type) {
+  return type === 302
 }
 /* IP实体托管域名 */
 export function isIpHostedDomain (type) {
-  return type === 33
+  return type === 303
 }
 /* APP实体相关域名 */
 export function isAppRelatedDomain (type) {
-  return type === 34
+  return type === 304
 }
-/* APP实体基本信息 */
+/* 关系图 */
-export function isAppBasicInfo (type) {
+export function isRelationShip (type) {
-  return type === 82
+  return type === 402
 }
-/* DOMAIN实体Whois */
+/* 桑基图 */
-export function isDomainWhois (type) {
+export function isSankey (type) {
-  return type === 83
+  return type === 403
+}
+/* 单值 */
+export function isSingleValue (type) {
+  return type >= 501 && type <= 600
+}
+/* 常规单值图 */
+export function isCommonSingleValue (type) {
+  return type === 501
+}
+/* 带折线图的单值 */
+export function isSingleValueWithEcharts (type) {
+  return type === 502
+}
+/* 常规单值图2 */
+export function isCommon2SingleValue (type) {
+  return type === 503
+}
+/* 常规单值图3 */
+export function isCommon3SingleValue (type) {
+  return type === 504
+}
+/* 带折线图的单值 */
+export function isSingleValueWithPercent (type) {
+  return type === 505
+}
+/* table */
+export function isTable (type) {
+  return type >= 601 && type <= 700
+}
+/* basic table */
+export function isBasicTable (type) {
+  return type === 601
 }
 /* DOMAIN实体DNS记录 */
 export function isDomainDnsRecord (type) {
-  return type === 62
+  return type === 602
+}
+/* table */
+export function isActiveIpTable (type) {
+  return type === 603
+}
+/* APP实体基本信息 */
+export function isAppBasicInfo (type) {
+  return type === 702
+}
+/* DOMAIN实体Whois */
+export function isDomainWhois (type) {
+  return type === 703
 }
 /* 告警信息 */
 export function isAlarmInfo (type) {
-  return type === 84
+  return type === 704
 }
 /* 近期挖矿事件 */
 export function isCryptocurrencyEventList (type) {
-  return type === 85
+  return type === 705
 }
 /* 单支持情况统计 */
 export function isSingleSupportStatistics (type) {
-  return type === 86
+  return type === 706
 }
 /* 两个支持情况统计 */
 export function isTwoSupportStatistics (type) {
-  return type === 87
+  return type === 707
 }
 /* 域名递归解析 */
 export function isDomainRecursiveResolve (type) {
-  return type === 88
+  return type === 708
+}
+/* tabs */
+export function isTabs (type) {
+  return type === 801
+}
+/* title */
+export function isTitle (type) {
+  return type === 803
 }
 /* 组 */
 export function isGroup (type) {
-  return type === 94
+  return type === 804
 }
 /* 实体详情块 */
 export function isBlock (type) {
-  return type === 95
+  return type === 805
 }
 
 /* 根据type获取图表分类 */
@@ -215,7 +224,7 @@ export function getLayout (type) {
   if (!isSingleValue(type) && !isTitle(type)) {
     layout.push(layoutConstant.HEADER)
   }
-  if (type === 12 || type === 31) {
+  if (isEchartsWithStatistics(type) || isEchartsWithTable(type)) {
     layout.push(layoutConstant.FOOTER)
   }
   return layout

src/views/entityExplorer/entityList/Row.vue

@@ -101,17 +101,17 @@
                   <!-- 曲线-->
                   <div
                     class="row__charts"
-                    :id="`entityDetailSend${entityType}`"
+                    :id="`entityDetailSend${entityType}${listMode}`"
                     v-if="entityData.entityType === 'domain'"
                   ></div>
                   <div
                     class="row__charts"
-                    :id="`entityDetailSend${entityType}`"
+                    :id="`entityDetailSend${entityType}${listMode}`"
                     v-if="entityData.entityType === 'app'"
                   ></div>
                   <div
                     class="row__charts"
-                    :id="`entityDetailSend${entityType}`"
+                    :id="`entityDetailSend${entityType}${listMode}`"
                     v-if="entityData.entityType === 'ip'"
                   ></div>
                 </div>
@@ -136,17 +136,17 @@
 
                   <div
                     class="row__charts"
-                    :id="`entityDetailReceived${entityType}`"
+                    :id="`entityDetailReceived${entityType}${listMode}`"
                     v-if="entityData.entityType === 'domain'"
                   ></div>
                   <div
                     class="row__charts"
-                    :id="`entityDetailReceived${entityType}`"
+                    :id="`entityDetailReceived${entityType}${listMode}`"
                     v-if="entityData.entityType === 'app'"
                   ></div>
                   <div
                     class="row__charts"
-                    :id="`entityDetailReceived${entityType}`"
+                    :id="`entityDetailReceived${entityType}${listMode}`"
                     v-if="entityData.entityType === 'ip'"
                   ></div>
                 </div>
@@ -166,10 +166,9 @@
             </div>
             <div
               class="show-detail"
-              :style="{ visibility: !isCollapse ? 'visible' : 'hidden' }"
               @click="showDetail"
             >
-              {{ $t('overall.detail') }}>>
+              {{ $t('overall.detail') }}>
             </div>
           </div>
         </div>
@@ -188,29 +187,24 @@
 </template>
 
 <script>
-import entityListMixin from './entityListMixin'
 import DetailOverview from '@/views/entityExplorer/entityList/detailOverview/DetailOverview'
-import { unitTypes } from '@/utils/constants'
+import entityListMixin from './entityListMixin'
-import unitConvert from '@/utils/unit-convert'
-import entityDetailMixin from './detailOverview/entityDetailMixin'
 import relatedServer from '@/mixins/relatedServer'
-import { api } from '@/utils/api'
 
 export default {
   name: 'Row',
   props: {
     index: Number,
-    timeFilter: Object
+    timeFilter: Object,
+    listMode: String
   },
   components: {
     DetailOverview
   },
-  mixins: [entityListMixin, entityDetailMixin, relatedServer],
+  mixins: [entityListMixin, relatedServer],
   data () {
     return {
-      isCollapse: true, // 是否是折叠状态
+      isCollapse: true // 是否是折叠状态
-      trafficUrl: '',
-      entityType: ''
     }
   },
   computed: {
@@ -236,58 +230,6 @@ export default {
           return '-'
         }
       }
-    },
-    entityType () {
-      let type
-      switch (this.entityData.entityType) {
-        case 'ip': {
-          type = this.entityData.ipAddr
-          break
-        }
-        case 'domain': {
-          type = this.entityData.domainName
-          break
-        }
-        case 'app': {
-          type = this.entityData.appName
-          break
-        }
-        default:
-          break
-      }
-      this.entityType = type
-      return type
-    }
-  },
-  watch: {
-    entityData: {
-      deep: true,
-      handler (n) {
-        if (n.entityType) {
-          switch (n.entityType) {
-            case 'ip': {
-              this.trafficUrl = api.entityIpDetailTraffic
-              break
-            }
-            case 'domain': {
-              this.trafficUrl = api.entityDomainDetailTraffic
-              break
-            }
-            case 'app': {
-              this.trafficUrl = api.entityAppDetailTraffic
-              break
-            }
-            default:
-              break
-          }
-        }
-      }
-    }
-  },
-  setup () {
-    return {
-      unitConvert,
-      unitTypes
     }
   },
   methods: {
@@ -299,16 +241,6 @@ export default {
     /* 设为折叠状态 */
     collapse () {
       this.isCollapse = true
-    },
-    getQueryParams () {
-      const queryParams = {
-        startTime: parseInt(this.timeFilter.startTime / 1000),
-        endTime: parseInt(this.timeFilter.endTime / 1000),
-        appName: this.entityType,
-        domain: this.entityType,
-        ip: this.entityType
-      }
-      return queryParams
     }
   }
 }

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

@@ -224,7 +224,7 @@ export default {
               icon: 'cn-icon cn-icon-time',
               unitType: unitTypes.time
             },
-            type: 51,
+            type: 501,
             i18n: 'entities.avgRoundTripTime'
           },
           {
@@ -232,7 +232,7 @@ export default {
               icon: 'cn-icon cn-icon-http',
               unitType: unitTypes.time
             },
-            type: 51,
+            type: 501,
             i18n: 'entities.httpResponseLatency'
           },
           {
@@ -240,7 +240,7 @@ export default {
               icon: 'cn-icon cn-icon-ssl',
               unitType: unitTypes.time
             },
-            type: 51,
+            type: 501,
             i18n: 'entities.sslConLatency'
           },
           {
@@ -248,7 +248,7 @@ export default {
               icon: 'cn-icon cn-icon-package-loss',
               unitType: unitTypes.percent
             },
-            type: 51,
+            type: 501,
             i18n: 'entities.sequenceGapLossPercent'
           },
           {
@@ -256,7 +256,7 @@ export default {
               icon: 'cn-icon cn-icon-upload',
               unitType: unitTypes.percent
             },
-            type: 51,
+            type: 501,
             i18n: 'entities.pktRetransPercent'
           }
         ],
@@ -295,6 +295,7 @@ export default {
     this.$nextTick(() => {
       setTimeout(() => {
         this.chartGetMap()
+        this.queryRelated()
       }, 250)
     })
   },

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

@@ -229,7 +229,7 @@ export default {
               icon: 'cn-icon cn-icon-time',
               unitType: unitTypes.time
             },
-            type: 51,
+            type: 501,
             i18n: 'entities.avgRoundTripTime'
           },
           {
@@ -237,7 +237,7 @@ export default {
               icon: 'cn-icon cn-icon-http',
               unitType: unitTypes.time
             },
-            type: 51,
+            type: 501,
             i18n: 'entities.httpResponseLatency'
           },
           {
@@ -245,7 +245,7 @@ export default {
               icon: 'cn-icon cn-icon-ssl',
               unitType: unitTypes.time
             },
-            type: 51,
+            type: 501,
             i18n: 'entities.sslConLatency'
           },
           {
@@ -253,7 +253,7 @@ export default {
               icon: 'cn-icon cn-icon-package-loss',
               unitType: unitTypes.percent
             },
-            type: 51,
+            type: 501,
             i18n: 'entities.sequenceGapLossPercent'
           },
           {
@@ -261,7 +261,7 @@ export default {
               icon: 'cn-icon cn-icon-upload',
               unitType: unitTypes.percent
             },
-            type: 51,
+            type: 501,
             i18n: 'entities.pktRetransPercent'
           }
         ],
@@ -316,6 +316,7 @@ export default {
       setTimeout(() => {
         this.chartGetMap()
         this.getBasicProperties()
+        this.queryRelated()
       }, 250)
     })
   },

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

@@ -211,7 +211,7 @@ export default {
               icon: 'cn-icon cn-icon-time',
               unitType: unitTypes.time
             },
-            type: 51,
+            type: 501,
             i18n: 'entities.avgRoundTripTime'
           },
           {
@@ -219,7 +219,7 @@ export default {
               icon: 'cn-icon cn-icon-http',
               unitType: unitTypes.time
             },
-            type: 51,
+            type: 501,
             i18n: 'entities.httpResponseLatency'
           },
           {
@@ -227,7 +227,7 @@ export default {
               icon: 'cn-icon cn-icon-ssl',
               unitType: unitTypes.time
             },
-            type: 51,
+            type: 501,
             i18n: 'entities.sslConLatency'
           },
           {
@@ -235,7 +235,7 @@ export default {
               icon: 'cn-icon cn-icon-package-loss',
               unitType: unitTypes.percent
             },
-            type: 51,
+            type: 501,
             i18n: 'entities.sequenceGapLossPercent'
           },
           {
@@ -243,7 +243,7 @@ export default {
               icon: 'cn-icon cn-icon-upload',
               unitType: unitTypes.percent
             },
-            type: 51,
+            type: 501,
             i18n: 'entities.pktRetransPercent'
           }
         ],
@@ -302,6 +302,7 @@ export default {
     this.$nextTick(() => {
       setTimeout(() => {
         this.chartGetMap()
+        this.queryRelated()
       }, 250)
     })
   },

src/views/entityExplorer/entityList/entityListMixin.js

@@ -5,17 +5,21 @@ import * as echarts from 'echarts'
 import { entityListLineOption } from '@/views/charts/charts/chart-options'
 import { riskLevelMapping, unitTypes } from '@/utils/constants'
 import { getSecond } from '@/utils/date-util'
+import unitConvert from '@/utils/unit-convert'
 
 export default {
   props: {
     entity: Object,
     timeFilter: {},
-    listMode: ''
+    listMode: String
   },
   data () {
     return {
       entityData: {},
-      chartOption: null
+      trafficUrl: '',
+      chartOption: null,
+      unitTypes,
+      unitConvert
     }
   },
   computed: {
@@ -38,6 +42,26 @@ export default {
       }
       return className
     },
+    entityType () {
+      let type
+      switch (this.entityData.entityType) {
+        case 'ip': {
+          type = this.entityData.ipAddr
+          break
+        }
+        case 'domain': {
+          type = this.entityData.domainName
+          break
+        }
+        case 'app': {
+          type = this.entityData.appName
+          break
+        }
+        default:
+          break
+      }
+      return type
+    },
     entityName () {
       let name
       switch (this.entityData.entityType) {
@@ -57,25 +81,6 @@ export default {
       }
       return name
     },
-    queryUrl () {
-      let url
-      switch (this.entityData.entityType) {
-        case ('ip'): {
-          url = api.ipBytes
-          break
-        }
-        case ('domain'): {
-          url = api.domainBytes
-          break
-        }
-        case ('app'): {
-          url = api.appBytes
-          break
-        }
-        default: break
-      }
-      return url
-    },
     appRisk () {
       return function (level) {
         const m = riskLevelMapping.find(mapping => {
@@ -128,26 +133,6 @@ export default {
       })
       window.open(href, '_blank')
     },
-    queryTraffic () {
-      const queryParams = {
-        startTime: parseInt(this.timeFilter.startTime / 1000),
-        endTime: parseInt(this.timeFilter.endTime / 1000),
-        entityType: this.entityData.entityType,
-        name: this.entityName
-      }
-      get(api.entityTraffic, queryParams).then(response => {
-        if (response.code === 200) {
-          response.data.result.forEach(t => {
-            if (t.legend === 'bytesSentRate') {
-              this.entityData.bytesSentRate = t.aggregation.last
-            }
-            if (t.legend === 'bytesReceivedRate') {
-              this.entityData.bytesReceivedRate = t.aggregation.last
-            }
-          })
-        }
-      })
-    },
     querySecurity () {
       const queryParams = {
         startTime: getSecond(this.timeFilter.startTime),
@@ -174,7 +159,7 @@ export default {
       }
       get(url, queryParams).then(response => {
         if (response.code === 200) {
-          this.entityData.securityCount = response.data.result && response.data.result.length
+          this.entityData.securityCount = response.data.result ? response.data.result.length : 0
         }
       })
     },
@@ -204,99 +189,129 @@ export default {
       }
       get(url, queryParams).then(response => {
         if (response.code === 200) {
-          this.entityData.performanceCount = response.data.result && response.data.result.length
+          this.entityData.performanceCount = response.data.result ? response.data.result.length : 0
         }
       })
     },
-
+    getQueryParams () {
-    queryTrafficLine () {
+      return {
-      let chartOption
+        startTime: getSecond(this.timeFilter.startTime),
-      this.chartOption = this.$_.cloneDeep(entityListLineOption)
+        endTime: getSecond(this.timeFilter.endTime),
-      get(this.queryUrl, this.queryParams).then(response => {
+        appName: this.entityType,
-        if (response.code === 200) {
+        domain: this.entityType,
-          const seriesTemplate = this.chartOption.series[0]
+        ip: this.entityType
-          const series = response.data.result.map((r, i) => {
+      }
-            if (r.legend === 'bytes_sent_rate') {
+    },
-              return {
+    queryEntityDetailTraffic () {
-                ...seriesTemplate,
+      get(this.trafficUrl, this.getQueryParams()).then(response => {
-                name: this.$t('entities.sentThroughput'), // 'bytes_sent_rate',//legendMapping[`ip_${r.legend}`],
+        if (response.code === 200 && response.data.result && response.data.result.length > 0) {
-                data: r.values.map(v => [Number(v[0]) * 1000, Number(v[1]), unitTypes.byte]),
+          let sentSeries
+          let receivedSeries
+          response.data.result.forEach(t => {
+            if (t.legend === 'bytesRate') {
+              this.entityData.max = t.aggregation.max
+              this.entityData.avg = t.aggregation.avg
+              this.entityData.p50 = t.aggregation.p50
+              this.entityData.p90 = t.aggregation.p90
+            } else if (t.legend === 'bytesSentRate') {
+              this.entityData.bytesSentRate = _.nth(t.values, -3)[1]
+              sentSeries = {
+                name: this.$t('entities.sentThroughput'),
+                type: 'line',
+                legendHoverLink: false,
                 itemStyle: {
                   normal: {
-                    color: '#69b072',
                     lineStyle: {
-                      width: 1.5
+                      width: 1
                     }
                   }
                 },
-                smooth: true,
+                color: '#69b072',
-                areaStyle: {
+                data: _.dropRight(t.values, 2).map(v => [Number(v[0]) * 1000, Number(v[1]), unitTypes.byte]),
-                  opacity: 0.8,
+                showSymbol: false
-                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                    {
-                      offset: 0,
-                      color: '#f0fff8'
-                    },
-                    {
-                      offset: 1,
-                      color: '#f0fff8'
-                    }
-                  ])
-                }
               }
-            } else if (r.legend === 'bytes_received_rate') {
+            } else if (t.legend === 'bytesReceivedRate') {
-              return {
+              this.entityData.bytesReceivedRate = t.aggregation.last
-                ...seriesTemplate,
+              receivedSeries = {
-                name: this.$t('entities.receivedThroughput'), // legendMapping[`ip_${r.legend}`],
+                name: this.$t('entities.receivedThroughput'),
-                data: r.values.map(v => [Number(v[0]) * 1000, Number(v[1]), unitTypes.byte]),
+                type: 'line',
+                legendHoverLink: false,
                 itemStyle: {
                   normal: {
-                    color: '#7899c6',
                     lineStyle: {
-                      width: 1.5
+                      width: 1
                     }
                   }
                 },
-                smooth: true,
+                color: '#7899c6',
-                areaStyle: {
+                data: t.values.map(v => [Number(v[0]) * 1000, Number(v[1]), unitTypes.byte]),
-                  opacity: 0.8,
+                showSymbol: false
-                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                    {
-                      offset: 0,
-                      color: '#f0f4ff'
-                    },
-                    {
-                      offset: 1,
-                      color: '#f0f4ff'
-                    }
-                  ])
-                }
               }
             }
-            return {}
           })
-          chartOption = {
+          if (this.listMode === 'block') {
-            ...this.chartOption,
+            const chart = echarts.init(document.getElementById(`entityListChart${this.entityName}${this.listMode}`))
-            series
+            chart.setOption({
+              ...this.chartOption,
+              series: [sentSeries, receivedSeries]
+            })
+          } else if (this.listMode === 'list') {
+            const sentChart = echarts.init(document.getElementById(`entityDetailSend${this.entityName}${this.listMode}`))
+            const receivedChart = echarts.init(document.getElementById(`entityDetailReceived${this.entityName}${this.listMode}`))
+            sentChart.setOption({
+              ...this.chartOption,
+              series: [sentSeries]
+            })
+            receivedChart.setOption({
+              ...this.chartOption,
+              series: [receivedSeries]
+            })
           }
         }
       }).finally(() => {
-        this.$nextTick(() => {
+        setTimeout(() => {
-          if (chartOption) {
+          try {
-            const myChart = echarts.init(document.getElementById(`entityListChart${this.entityName}`))
+            this.$nextTick(() => {
-            myChart.setOption(chartOption)
+              this.sentChart && this.sentChart.resize()
-          }
+              this.receivedChart && this.receivedChart.resize()
-        })
+            })
+          } catch (e) {}
+        }, 250)
       })
     }
   },
-  mounted () {
+  watch: {
-    this.entityData = _.cloneDeep(this.entity)
+    entityData: {
-    setTimeout(() => { this.queryTraffic() })
+      deep: true,
-    setTimeout(() => { this.querySecurity() })
+      handler (n) {
-    setTimeout(() => { this.queryPerformance() })
+        if (n.entityType) {
-    if (this.listMode === 'block') {
+          switch (n.entityType) {
-      setTimeout(() => { this.queryTrafficLine() })
+            case 'ip': {
+              this.trafficUrl = api.entityIpDetailTraffic
+              break
+            }
+            case 'domain': {
+              this.trafficUrl = api.entityDomainDetailTraffic
+              break
+            }
+            case 'app': {
+              this.trafficUrl = api.entityAppDetailTraffic
+              break
+            }
+            default:
+              break
+          }
+        }
+      }
     }
+  },
+  mounted () {
+    this.chartOption = _.cloneDeep(entityListLineOption)
+    this.entityData = _.cloneDeep(this.entity)
+    setTimeout(() => {
+      this.querySecurity()
+      this.queryEntityDetailTraffic()
+      this.queryPerformance()
+    })
   }
 }