fix: bug修复、地图色阶初版

src/components/charts/chart-options.js

@@ -245,39 +245,23 @@ const singleValueLine = {
   animation: false,
   grid: {
     left: 0,
-    bottom: 0,
+    bottom: 2,
     top: 5,
     right: 0
   },
   color: chartColor,
   legend: {
-    tooltip: {
-      show: true,
-      formatter: '{a}'
-    },
-    show: false,
-    right: 23,
-    top: 8,
-    orient: 'horizontal',
-    icon: 'circle',
-    itemGap: 20,
-    itemWidth: 10,
-    textStyle: {
-      padding: [0, 0, 0, 5],
-      fontSize: 14
-    },
-    formatter: tooLongFormatter
+    show: false
   },
   series: [
     {
-      name: '访问用户量',
       type: 'line',
-      smooth: true,
+      legendHoverLink: false,
       itemStyle: {
         normal: {
           color: '#81C9FF',
           lineStyle: {
-            width:2
+            width: 2
           }
         }
       },

src/components/charts/panel.scss

@@ -40,6 +40,11 @@
     border-radius: 2px;
     height: 100%;
     width: 100%;
+
+    .chart-drawing {
+      height: 100%;
+      width: 100%;
+    }
   }
   &>.cn-chart__echarts, &>.cn-chart__table, &>.cn-chart__map {
     display: flex;
@@ -62,11 +67,6 @@
     }
     .cn-chart__body {
       flex: auto;
-
-      .chart-drawing {
-        height: 100%;
-        width: 100%;
-      }
     }
   }
   &>.cn-chart__single-value.cn-chart__single-value--icon-left {

src/components/entities/entities.scss

@@ -43,7 +43,7 @@
       }
       .cn-entity {
         box-sizing: border-box;
-        margin-bottom: 30px;
+        margin: 0 10px 30px;
         width: 240px;
         height: 315px;
         background: #FFFFFF;

src/components/layout/Header.vue

@@ -125,12 +125,20 @@ export default {
     },
     entityName () {
       return this.$store.getters.entityName
+    },
+    storeFrom () {
+      return this.$store.getters.from
     }
   },
   watch: {
     from (n) {
       this.$store.commit('entityTypeChange', n)
     },
+    storeFrom (n) {
+      if (this.from !== n) {
+        this.from = n
+      }
+    },
     entityName (n) {
       const breadcrumb = this.breadcrumbMap.find(b => b.path === '/entityExplorer')
       breadcrumb.childName = n

src/utils/http.js

@@ -41,8 +41,8 @@ axios.interceptors.request.use(
 axios.interceptors.response.use(
   response => {
     if (licenceErrorCode.indexOf(response.data.code) !== -1) {
-      window.location.href = '/'
       sessionStorage.removeItem(storageKey.token)
+      window.location.href = '/'
     } else if (response.status === 200) {
       if (accountErrorCode.indexOf(response.data.code) !== -1) {
         window.location.href = '/'

src/views/charts/Chart.vue

@@ -88,7 +88,7 @@
   >
     <template #title><span :title="chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name">{{chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name}}</span></template>
     <template #data>
-      <span>{{handleSingleValue[0]}}</span>
+      <span>{{isNaN(handleSingleValue[0]) ? '-' : handleSingleValue[0]}}</span>
       <span class="single-value__unit">{{handleSingleValue[1]}}</span>
     </template>
     <template #chart>
@@ -275,17 +275,8 @@ export default {
                 this.chartOption = this.$_.cloneDeep(getOption(this.chart.type))
                 const seriesTemplate = this.chartOption.series[0]
 
-                const queryParams = { startTime: parseInt(this.timeFilter.startTime / 1000), endTime: parseInt(this.timeFilter.endTime / 1000) }
                 get(replaceUrlPlaceholder(chartParams.urlLine, queryParams)).then(response => {
                   if (response.code === 200) {
-                    /*response.data.result = [
-                      {
-                        legend: "session_rate",
-                        values:[
-                          ["1625122200","2"],["1625122500","2"],["1625122800","1"],["1625123100","1"],["1625123400","2"],["1625123700","2"],["1625124000","2"],["1625124300","3"],["1625124600","3"],["1625124900","3"]
-                        ]
-                      }
-                    ]*/
                     this.chartOption.series = response.data.result.map((r, i) => {
                       return {
                         ...seriesTemplate,
@@ -301,11 +292,14 @@ export default {
                   this.$nextTick(() => {
                     this.myChart.resize()
                   })
-                  setTimeout(() => { this.loading = false }, 250)
                 })
               } else {
                 this.loading = false
               }
+            }).catch(() => {
+              this.singleValue.value = ''
+            }).finally(() => {
+              setTimeout(() => { this.loading = false }, 250)
             })
           }
         } else if (this.isTabs) {
@@ -447,9 +441,10 @@ export default {
             polygonSeries.heatRules.push({
               property: 'fill',
               target: polygonSeries.mapPolygons.template,
-              min: am4Core.color('#FFFF00'),
-              max: am4Core.color('#E66767')
+              min: am4Core.color('#EABA2B'),
+              max: am4Core.color('#D95D41')
             })
+
             polygonSeries.data = response.data.result.map(r => {
               return {
                 id: r.serverId,
@@ -457,6 +452,21 @@ export default {
                 value: r.establishLatency || r.httpResponseLatency || r.sslConLatency || r.sequenceGapLossPercent || r.pktRetransPercent || r.sessions
               }
             })
+            const sorted = polygonSeries.data.sort((a, b) => b.value - a.value)
+
+            const heatLegend = this.myChart.createChild(am4Maps.HeatLegend)
+            heatLegend.series = polygonSeries
+            heatLegend.align = 'center'
+            console.info(sorted)
+            if (!this.$_.isEmpty(sorted)) {
+              heatLegend.minValue = 0
+              heatLegend.maxValue = Number(sorted[0].value)
+            }
+            heatLegend.markerContainer.height = 6
+            heatLegend.width = am4Core.percent(25)
+            heatLegend.marginLeft = am4Core.percent(4)
+            heatLegend.valign = 'bottom'
+
             const polygonTemplate = polygonSeries.mapPolygons.template
             polygonTemplate.tooltipText = '{name}{title}'
             // polygonTemplate.numberFormatter = new am4Core.NumberFormatter().bigNumberPrefixes
@@ -464,6 +474,7 @@ export default {
             polygonTemplate.strokeWidth = 0.5
           }
         }
+      }).finally(() => {
         setTimeout(() => { this.loading = false }, 250)
       })
     },
@@ -526,6 +537,7 @@ export default {
         this.$nextTick(() => {
           this.myChart.resize()
         })
+      }).finally(() => {
         setTimeout(() => { this.loading = false }, 250)
       })
     },
@@ -555,6 +567,7 @@ export default {
         this.$nextTick(() => {
           this.myChart.resize()
         })
+      }).finally(() => {
         setTimeout(() => { this.loading = false }, 250)
       })
     },
@@ -590,12 +603,11 @@ export default {
               if (response2.code === 200) {
                 this.pieTableData = response2.data.result
               }
-              this.loading = false
             })
-          } else {
+          }
+        }
+      }).finally(() => {
         setTimeout(() => { this.loading = false }, 250)
-          }
-        }
       })
       // legend点击事件
       this.myChart.off('legendselectchanged')
@@ -656,7 +668,8 @@ export default {
           this.table.tableColumns = this.getTableTitle(response.data.result)
           this.table.currentPageData = this.getTargetPageData(1, this.table.pageSize, this.table.tableData)
         }
-        this.loading = false
+      }).finally(() => {
+        setTimeout(() => { this.loading = false }, 250)
       })
     },
     echartsResize () {

src/views/charts/Panel.vue

@@ -9,7 +9,7 @@
         <el-radio-button v-for="tab in tabs" :key="tab.key" :label="tab.label"></el-radio-button>
       </el-radio-group>
     </div>
-    <div class="cn-panel" id="cn-panel">
+    <div class="cn-panel" id="cn-panel" :style="{height: typeName ? 'calc(100% - 80px)' : ''}">
       <div class="panel__time">
         <DateTimeRange class="date-time-range" :start-time="timeFilter.startTime" :end-time="timeFilter.endTime" ref="dateTimeRange" @change="reload"/>
         <TimeRefresh class="date-time-range" @change="timeRefreshChange" :end-time="timeFilter.endTime"/>

src/views/entities/EntityExplorer.vue

@@ -309,7 +309,6 @@ export default {
       }
     },
     pageNoRight (val) {
-      console.info(val)
       this.pageObjRight.pageNo = val
       this.search()
     },
@@ -471,6 +470,7 @@ export default {
     }
   },
   beforeUnmount () {
+    this.$store.commit('entityTypeChange', Object.keys(entityType)[0])
     this.$store.commit('showEntityTypeSelector', false)
   }
 }