CN-409 Entity Explorer--详情页图表开发

src/views/charts/PanelChart.vue

@@ -251,7 +251,9 @@ export default {
             }
           }).finally(() => {
             setTimeout(() => {
+              if(!(this.chartInfo.type === 33 || this.chartInfo.type === 34)){
                 this.loading = false
+              }
             }, 200)
           })
         } else if (this.chartInfo.type === 94) {

src/views/charts/charts/ChartEchartAppRelateDomain.vue

@@ -25,6 +25,7 @@ import {
   ipHostedDomain
 } from '@/views/charts/charts/options/pie'
 import chartEchartMixin from './chart-echart-mixin'
+import { get,post } from '@/utils/http'
 
 export default {
   name: 'ChartEchartAppRelateDomain',
@@ -38,26 +39,65 @@ export default {
   methods: {
     initEcharts (id) {
       this.initDom(id, 2)
+      const chartParams = this.chartInfo.params
+      const domains = this.chartData.toString()
+      //const domains = "office.com,dbank.com"
       this.$emit('showLoading', true)
-      this.chartOption.series[0].data = [
+
-        {
+      let typeUrl = chartParams.byCategoryUrl.slice(0,chartParams.byCategoryUrl.indexOf('?'))
-          name: 'test1',
+      let reputationUrlUrl = chartParams.byReputationUrl.slice(0,chartParams.byReputationUrl.indexOf('?'))
-          value: 32
+
-        },
+       const byType = new Promise(resolve => {
-        {
+          post(typeUrl, { domains: domains }).then(response => {
-          name: 'test2',
+          //post(replaceUrlPlaceholder(chartParams.byCategoryUrl, { domains: domains })).then(response => {
-          value: 21
+             if (response.code === 200) {
-        },
+                if (this.$_.isEmpty(response.data.result)) {
-        {
+                   // this.noData0 = true
-          name: 'test3',
+                } else {
-          value: 20
+                   // this.noData0 = false
-        },
+                   //const chartOption = this.$_.cloneDeep(this.chartOption)
-        {
+                   const data = response.data.result.map(d => {
-          name: 'test4',
+                      return {
-          value: 7
+                         data: d,
+                         name: d.categoryName,
+                         value: parseInt(d.uniqDomains),
+                         unitType: chartParams.unitType
                       }
-      ]
+                   })
+                   this.chartOption.series[0].data = data
+                }
+             }
+          }).finally(() =>{
+             resolve()
+          })
+       })
+       const byReputation = new Promise(resolve => {
+          post(reputationUrlUrl, { domains: domains }).then(response => {
+             if (response.code === 200) {
+                if (this.$_.isEmpty(response.data.result)) {
+                   // this.noData1 = true
+                } else {
+                   // this.noData1 = false
+                   //const chartOption = this.$_.cloneDeep(this.chartOption)
+                   const data = response.data.result.map(d => {
+                      return {
+                         data: d,
+                         name: d.reputationLevel,
+                         value: parseInt(d.uniqDomains),
+                         unitType: chartParams.unitType
+                      }
+                   })
+                   this.chartOption2.series[0].data = data
+                   //this.myChart2.setOption(chartOption)
+                }
+             }
+          }).finally(() =>{
+             resolve()
+          })
+       })
+       Promise.all([byType, byReputation]).finally(response => {
           this.loadEchart(2)
+       })
     }
   }
 }

src/views/charts/charts/ChartEchartIpHostedDomain.vue

@@ -21,10 +21,6 @@
 </template>
 
 <script>
-import * as echarts from 'echarts'
-import {
-  ipHostedDomain
-} from '@/views/charts/charts/options/pie'
 import { replaceUrlPlaceholder } from '@/utils/tools'
 import { get } from '@/utils/http'
 import chartEchartMixin from './chart-echart-mixin'
@@ -43,57 +39,56 @@ export default {
     initEcharts (id) {
       this.initDom(id, 2)
       const chartParams = this.chartInfo.params
-      this.$emit('showLoading', true)
+      const domains = this.chartData.toString()
       const byType = new Promise(resolve => {
-        get(replaceUrlPlaceholder(chartParams.byTypeUrl, { ip: this.entity.ip })).then(response => {
+        get(replaceUrlPlaceholder(chartParams.byCategoryUrl, { domains: domains })).then(response => {
           if (response.code === 200) {
             if (this.$_.isEmpty(response.data.result)) {
               // this.noData0 = true
             } else {
               // this.noData0 = false
-              const chartOption = this.$_.cloneDeep(this.chartOption)
+              //chartOption = this.$_.cloneDeep(this.chartOption)
               const data = response.data.result.map(d => {
                 return {
                   data: d,
-                  name: d.category,
+                  name: d.categoryName,
-                  value: parseInt(d.count),
+                  value: parseInt(d.uniqDomains),
                   unitType: chartParams.unitType
                 }
               })
-              chartOption.series[0].data = data
+              this.chartOption.series[0].data = data
-              this.myChart.setOption(chartOption)
+              //this.myChart.setOption(this.chartOption)
             }
           }
            resolve()
         })
       })
       const byCredit = new Promise(resolve => {
-        get(replaceUrlPlaceholder(chartParams.byCreditUrl, { ip: this.entity.ip })).then(response => {
+        get(replaceUrlPlaceholder(chartParams.byReputationUrl, { domains: domains })).then(response => {
           if (response.code === 200) {
             if (this.$_.isEmpty(response.data.result)) {
               // this.noData1 = true
             } else {
               // this.noData1 = false
-              const chartOption = this.$_.cloneDeep(this.chartOption)
+              //this.chartOption2 = this.$_.cloneDeep(this.chartOption)
               const data = response.data.result.map(d => {
                 return {
                   data: d,
-                  name: d.reputation,
+                  name: d.reputationLevel,
-                  value: parseInt(d.count),
+                  value: parseInt(d.uniqDomains),
                   unitType: chartParams.unitType
                 }
               })
-              chartOption.series[0].data = data
+              this.chartOption2.series[0].data = data
-              this.myChart2.setOption(chartOption)
+             // this.myChart2.setOption(this.chartOption2)
             }
           }
            resolve()
         })
       })
+
       Promise.all([byType, byCredit]).finally(response => {
-        setTimeout(() => {
+         this.loadEchart(2)
-          this.$emit('showLoading', false)
-        }, 1000)
       })
     }
   }

src/views/charts/charts/chart-echart-mixin.js

@@ -31,7 +31,8 @@ export default {
   },
   data () {
     return {
-      chartOption: null
+      chartOption: null,
+      chartOption2: null
     }
   },
   methods: {
@@ -41,6 +42,7 @@ export default {
         const dom2 = document.getElementById(id + '-1')
         !this.myChart && (this.myChart = echarts.init(dom))
         !this.myChart2 && (this.myChart2 = echarts.init(dom2))
+        this.chartOption2 = this.$_.cloneDeep(getOption(this.chartInfo.type))
       } else {
         const dom = document.getElementById(id)
         !this.myChart && (this.myChart = echarts.init(dom))
@@ -81,7 +83,7 @@ export default {
         this.myChart.setOption(this.chartOption)
         this.$store.commit('setChartList', this.$_.cloneDeep(this.myChart))
         if (chartNum && chartNum == 2) {
-          this.myChart2.setOption(this.chartOption)
+          this.myChart2.setOption(this.chartOption2)
           this.$store.commit('setChartList', this.$_.cloneDeep(this.myChart2))
         }
         const _this = this

src/views/charts/charts/options/pie.js

@@ -56,7 +56,7 @@ export const ipHostedDomain = {
   legend: {
     orient: 'vertical',
     type: 'plain',
-    right: '8%',
+    left: '67%',
     top: 'middle',
     icon: 'circle',
     itemWidth: 10, // 设置宽度
@@ -64,7 +64,10 @@ export const ipHostedDomain = {
     itemGap: 20,
     tooltip: {
       show: true
-    }
+    },
+    formatter: function (name) {
+      return name.length > 9 ? name.substr(0, 9) + '...' : name
+    },
   },
   series: [
     {
@@ -76,9 +79,20 @@ export const ipHostedDomain = {
       label: {
         formatter: '{d}%'
       },
+      //right:'20%',
+      labelLine:{
+        length:6,
+        length2:6
+      } ,
       tooltip: {
         formatter: function (param, index, callback) {
-          return `${param.name}: ${unitConvert(param.value, param.data.unitType).join(' ')}`
+          if(param.data.unitType){
+            let tip = unitConvert(param.value, param.data.unitType)
+            tip = tip?tip.join(' '):''
+            return `${param.name}: ${tip}`
+          }else {
+            return `${param.name}: ${param.value}`
+          }
         }
       },
       emphasis: {