feat:CN-1570 轨迹地图页右上角饼图、折线图开发

src/components/layout/Header.vue

@@ -337,7 +337,7 @@ export default {
       return this.$store.getters.menuList.find(menu => menu.code === 'locationIntelligence')
     },
     otherMenu () {
-      return this.$store.getters.menuList.filter(menu => ['locationIntelligence','networkAnalytics', 'I18N', 'entityDetail', 'entityGraph', 'detectionPolicy'].indexOf(menu.code) === -1)
+      return this.$store.getters.menuList.filter(menu => ['locationIntelligence', 'networkAnalytics', 'I18N', 'entityDetail', 'entityGraph', 'detectionPolicy'].indexOf(menu.code) === -1)
 
       /* function excludeButton (menu) {
         for (let i = 0; i < menu.length; i++) {

src/mock/location.js

@@ -23,251 +23,251 @@ if (openMock) {
       }
     }
   })
-  Mock.mock(new RegExp(BASE_CONFIG.baseUrl + 'v1/locationIntelligence/active/subscribers.*'), 'get', function (requestObj) {
+  Mock.mock(new RegExp(BASE_CONFIG.baseUrl + 'v1/locationIntelligence/active/trend.*'), 'get', function (requestObj) {
     const lineData = [
       [
         1707357180,
-        "0"
+        '0'
       ],
       [
         1707357240,
-        "67781"
+        '67781'
       ],
       [
         1707357300,
-        "8878"
+        '8878'
       ],
       [
         1707357360,
-        "71386"
+        '71386'
       ],
       [
         1707357420,
-        "119827"
+        '119827'
       ],
       [
         1707357480,
-        "63332"
+        '63332'
       ],
       [
         1707357540,
-        "139829"
+        '139829'
       ],
       [
         1707357600,
-        "12184"
+        '12184'
       ],
       [
         1707357660,
-        "3922"
+        '3922'
       ],
       [
         1707357720,
-        "41349"
+        '41349'
       ],
       [
         1707357780,
-        "54148"
+        '54148'
       ],
       [
         1707357840,
-        "2530"
+        '2530'
       ],
       [
         1707357900,
-        "17814"
+        '17814'
       ],
       [
         1707357960,
-        "0"
+        '0'
       ],
       [
         1707358020,
-        "25336"
+        '25336'
       ],
       [
         1707358080,
-        "5684"
+        '5684'
       ],
       [
         1707358140,
-        "46829"
+        '46829'
       ],
       [
         1707358200,
-        "2546"
+        '2546'
       ],
       [
         1707358260,
-        "33345"
+        '33345'
       ],
       [
         1707358320,
-        "304847"
+        '304847'
       ],
       [
         1707358380,
-        "73994"
+        '73994'
       ],
       [
         1707358440,
-        "170837"
+        '170837'
       ],
       [
         1707358500,
-        "35891"
+        '35891'
       ],
       [
         1707358560,
-        "138272"
+        '138272'
       ],
       [
         1707358620,
-        "194981"
+        '194981'
       ],
       [
         1707358680,
-        "292987"
+        '292987'
       ],
       [
         1707358740,
-        "95844"
+        '95844'
       ],
       [
         1707358800,
-        "7424"
+        '7424'
       ],
       [
         1707358860,
-        "22057"
+        '22057'
       ],
       [
         1707358920,
-        "61791"
+        '61791'
       ],
       [
         1707358980,
-        "23838"
+        '23838'
       ],
       [
         1707359040,
-        "11664"
+        '11664'
       ],
       [
         1707359100,
-        "76485"
+        '76485'
       ],
       [
         1707359160,
-        "37542"
+        '37542'
       ],
       [
         1707359220,
-        "40851"
+        '40851'
       ],
       [
         1707359280,
-        "27611"
+        '27611'
       ],
       [
         1707359340,
-        "170709"
+        '170709'
       ],
       [
         1707359400,
-        "2290"
+        '2290'
       ],
       [
         1707359460,
-        "15577"
+        '15577'
       ],
       [
         1707359520,
-        "124024"
+        '124024'
       ],
       [
         1707359580,
-        "22947"
+        '22947'
       ],
       [
         1707359640,
-        "4131"
+        '4131'
       ],
       [
         1707359700,
-        "208705"
+        '208705'
       ],
       [
         1707359760,
-        "120407"
+        '120407'
       ],
       [
         1707359820,
-        "58706"
+        '58706'
       ],
       [
         1707359880,
-        "90036"
+        '90036'
       ],
       [
         1707359940,
-        "41000"
+        '41000'
       ],
       [
         1707360000,
-        "87489"
+        '87489'
       ],
       [
         1707360060,
-        "12170"
+        '12170'
       ],
       [
         1707360120,
-        "24611"
+        '24611'
       ],
       [
         1707360180,
-        "25815"
+        '25815'
       ],
       [
         1707360240,
-        "50903"
+        '50903'
       ],
       [
         1707360300,
-        "102385"
+        '102385'
       ],
       [
         1707360360,
-        "58121"
+        '58121'
       ],
       [
         1707360420,
-        "95365"
+        '95365'
       ],
       [
         1707360480,
-        "66674"
+        '66674'
       ],
       [
         1707360540,
-        "89708"
+        '89708'
       ],
       [
         1707360600,
-        "64098"
+        '64098'
       ],
       [
         1707360660,
-        "41778"
+        '41778'
       ],
       [
         1707360720,
-        "246241"
+        '246241'
       ],
       [
         1707360780,
-        "0"
+        '0'
       ]
     ]
     return {
@@ -280,4 +280,24 @@ if (openMock) {
       }
     }
   })
+  Mock.mock(new RegExp(BASE_CONFIG.baseUrl + 'v1/locationIntelligence/active/count.*'), 'get', function (requestObj) {
+    const item = JSON.parse(requestObj.body)
+    if (item && item.cycle === 0) {
+      return {
+        msg: 'success',
+        code: 200,
+        data: {
+          total: 19366
+        }
+      }
+    } else {
+      return {
+        msg: 'success',
+        code: 200,
+        data: {
+          total: 16366
+        }
+      }
+    }
+  })
 }

src/utils/api.js

@@ -355,7 +355,8 @@ export const api = {
   location: {
     map: apiVersion + '/locationIntelligence/map',
     density: apiVersion + '/locationIntelligence/population/density',
-    trend: apiVersion + '/locationIntelligence/active/subscribers'
+    trend: apiVersion + '/locationIntelligence/active/trend',
+    count: apiVersion + '/locationIntelligence/active/count'
   }
 }
 

src/utils/constants.js

@@ -1901,7 +1901,7 @@ export const pluginBasicInfo = [
   {
     id: 112,
     name: 'IpVanish VPN',
-    type: ['IP','Domain'],
+    type: ['IP', 'Domain'],
     schedule: 'plugin.hourly',
     desc: 'knowledgeBase.desc.ipVanishDomain',
     iconUrl: 'images/knowledge-base-logo/ip-vanish.png'
@@ -1909,7 +1909,7 @@ export const pluginBasicInfo = [
   {
     id: 113,
     name: 'Ivacy VPN',
-    type: ['IP','Domain'],
+    type: ['IP', 'Domain'],
     schedule: 'plugin.hourly',
     desc: 'knowledgeBase.desc.ivacyDomain',
     iconUrl: 'images/knowledge-base-logo/ivacy.png'
@@ -1925,7 +1925,7 @@ export const pluginBasicInfo = [
   {
     id: 115,
     name: 'CyberGhost VPN',
-    type: ['IP','Domain'],
+    type: ['IP', 'Domain'],
     schedule: 'plugin.hourly',
     desc: 'knowledgeBase.desc.cyberGhostDomain',
     iconUrl: 'images/knowledge-base-logo/cyber-ghost.png'
@@ -1933,7 +1933,7 @@ export const pluginBasicInfo = [
   {
     id: 116,
     name: 'Windscribe VPN',
-    type: ['IP','Domain'],
+    type: ['IP', 'Domain'],
     schedule: 'plugin.hourly',
     desc: 'knowledgeBase.desc.windscribeDomain',
     iconUrl: 'images/knowledge-base-logo/windscribe.png'
@@ -1961,7 +1961,7 @@ export const pluginBasicInfo = [
     schedule: 'plugin.hourly',
     desc: 'knowledgeBase.desc.vpnunlimited',
     iconUrl: 'images/knowledge-base-logo/vpnunlimited.png'
-  },
+  }
 ]
 
 export const builtInKnowledgeBaseBasicInfo = [

src/views/location/Index.vue

@@ -26,14 +26,23 @@
       <div class="analysis-map" id="analysisMap"></div>
       <div class="analysis-statistics">
         <div class="analysis-statistics__chart">
-          <div class="chart__header">Population Density</div>
+          <div class="chart__header">{{$t('locationIntelligence.populationDensity')}}</div>
-          <div class="chart__drawing" id="populationDensityChart"></div>
+          <div class="chart__body">
+            <div class="chart__drawing" id="populationDensityChart"></div>
+            <div class="chart__legend">
+              <div v-for="legend in pieValueRamp" class="legend-item">
+                <div class="legend-icon" :style="`background:rgb(${legend.color});`"></div>
+                <div class="legend-range" >{{legend.start}}~{{legend.end}}</div>
+                <div class="legend-count">{{legend.count}}</div>
+              </div>
+            </div>
+          </div>
         </div>
         <div class="analysis-statistics__chart">
-          <div class="chart__header">Active Subscribers</div>
+          <div class="chart__header">{{$t('locationIntelligence.activeSubscribers')}}</div>
           <div class="chart__statistics">
-            <div class="statistics-number">19334</div>
+            <div class="statistics-number">{{activeCount}}</div>
-            <div class="statistics-trend">-{{valueToRangeValue(0.39542, unitTypes.percent).join(' ')}}</div>
+            <div class="statistics-trend">-{{valueToRangeValue(activeCountChain, unitTypes.percent).join(' ')}}</div>
           </div>
           <div class="chart__drawing" id="activeSubscribersChart"></div>
         </div>
@@ -188,7 +197,9 @@ export default {
         hexagon: 'hexagon',
         baseStation: 'base-station',
         human: 'human'
-      }
+      },
+      activeCount: '',
+      activeCountChain: ''
     }
   },
   methods: {
@@ -254,6 +265,7 @@ export default {
         // 右侧关注列表
 
         // 右上角折线图
+        _this.renderActiveSubscribersLine()
       })
       function hoverTrigger (source, id, hover) {
         map.setFeatureState({ source, id }, { hover })
@@ -279,7 +291,9 @@ export default {
         if (!this.pieChart) {
           this.pieChart = echarts.init(document.getElementById('populationDensityChart'))
         }
-        this.pieChart.setOption(this.pieOption)
+        this.$nextTick(() => {
+          this.pieChart.setOption(this.pieOption)
+        })
       } catch (e) {
         this.errorMsgHandler(e)
         console.error(e)
@@ -287,6 +301,37 @@ export default {
         this.loading.pieLoading = false
       }
     },
+    async renderActiveSubscribersLine () {
+      const params = {
+        ...this.timeFilter
+      }
+      this.loading.lineLoading = true
+      try {
+        const curCountResponse = await axios.get(api.location.count, { ...params, cycle: 0, data: { cycle: 0 } })// 当前周期活跃用户总数
+        const preCountResponse = await axios.get(api.location.count, { ...params, cycle: 1, data: { cycle: 1 } })// 上一周期活跃用户总数
+        this.activeCount = curCountResponse.data.data.total
+        const preActiveCount = preCountResponse.data.data.total
+        if (preActiveCount !== 0) {
+          this.activeCountChain = (this.activeCount - preActiveCount) / preActiveCount
+        }
+        const trendResponse = await axios.get(api.location.trend, { params })
+        const activeSubscribersData = trendResponse.data.data.result.values
+        const option = _.cloneDeep(appListChartOption)
+        option.series[0].data = activeSubscribersData.map(d => {
+          return [d[0], d[1], unitTypes.number]
+        })
+        this.lineOption = option
+        if (!this.lineChart) {
+          this.lineChart = echarts.init(document.getElementById('activeSubscribersChart'))
+        }
+        this.lineChart.setOption(this.lineOption)
+      } catch (e) {
+        this.errorMsgHandler(e)
+        console.error(e)
+      } finally {
+        this.loading.lineLoading = false
+      }
+    },
     async queryHexagon () {
       const params = {
         ...this.boundaryBox,
@@ -569,6 +614,49 @@ export default {
           color: #353636;
           font-size: 16px;
         }
+        .chart__body {
+          display:flex;
+          flex-direction:row;
+          width:100%;
+          height:calc(100% - 32px);
+          .chart__legend {
+            width:calc(60% - 22px);
+            height: 100%;
+            display:flex;
+            flex-direction:column;
+            justify-content: center;
+            .legend-item {
+              display:flex;
+              flex-direction:row;
+              justify-content: left;
+              align-items: center;
+              padding-top:2px;
+              padding-bottom:2px;
+              .legend-icon {
+                width:16px;
+                height:6px;
+                border-radius: 2px;
+                margin-right:10px;
+              }
+              .legend-range {
+                margin-right:40px;
+                width:54px;
+                font-family: Helvetica;
+                font-size: 12px;
+                color: #575757;
+                line-height: 12px;
+                font-weight: 400;
+              }
+              .legend-count {
+                font-family: Helvetica;
+                font-size: 12px;
+                color: #353636;
+                line-height: 12px;
+                font-weight: 400;
+              }
+            }
+          }
+        }
         .chart__statistics {
           display: flex;
           height: 20px;
@@ -590,7 +678,9 @@ export default {
           }
         }
         .chart__drawing {
-          height: calc(100% - 32px);
+          height: 100%;
+          width:calc(40% + 12px);
+          margin-right:10px;
         }
         #activeSubscribersChart {
           height: calc(100% - 52px);

src/views/location/chartOption.js

@@ -3,6 +3,7 @@ export const pieOption = {
     trigger: 'item'
   },
   legend: {
+    show: false,
     right: 'right',
     top: 'middle',
     orient: 'vertical',