fix: table类型图表逻辑调整；完善一些工具方法；地图切换实现

2022-03-06 23:26:42 +08:00
parent f4daaa8e75
commit 5427ea0760
11 changed files with 150 additions and 49 deletions
--- a/src/assets/css/components/index.scss
+++ b/src/assets/css/components/index.scss
@@ -38,6 +38,7 @@
@import './views/charts/chartEchartAppRelateDomain';
@import './views/charts/ChartOneSituationStatistics';
@import './views/charts/ChartTwoSituationStatistics';
+@import './views/charts/chartMap';


 //@import '../chart';
--- a/src/assets/css/components/views/charts/chartMap.scss
+++ b/src/assets/css/components/views/charts/chartMap.scss
@@ -0,0 +1,60 @@
+.cn-chart__map {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  .map-drawing {
+    flex: 1;
+  }
+  .map-chart__legends {
+    flex-basis: 116px;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    padding: 0 30px;
+
+    .map-chart__legend {
+      padding-bottom: 5px;
+      flex-grow: 0;
+      flex-shrink: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      border: 1px solid #E0E6EF;
+      border-left-color: transparent;
+      border-right-color: transparent;;
+      cursor: pointer;
+
+      &:first-of-type {
+        border-left-color: #E0E6EF;
+      }
+      &:last-of-type {
+        border-right-color: #E0E6EF;
+      }
+      &.map-chart__legend--active {
+        border-color: #59ABFF;
+
+        .legend__value {
+          color: #1890FF;
+        }
+      }
+      .legend__circle-marker {
+        flex: 0 0 12px;
+        margin: 12px 0 8px 0;
+        width: 12px;
+        border-radius: 50%;
+      }
+      .legend__value {
+        font-size: 18px;
+        font-weight: bold;
+        color: #333333;
+      }
+      .legend__name {
+        padding: 0 10px;
+        color: #666666;
+        font-size: 12px;
+        text-align: center;
+      }
+    }
+  }
+}
--- a/src/utils/constants.js
+++ b/src/utils/constants.js
@@ -130,7 +130,19 @@ export const unitTypes = {
 export const chartTableDefaultPageSize = 10 // table类型图表默认每页数据量
 export const chartTableTopOptions = [10, 100] // table类型图表的TOP-N选项
 export const chartActiveIpTableOrderOptions = ['machine'] // active ip table类型图表的order 选项
-// table类型图表的TOP-N选项
+// table类型图表column映射
+export const chartTableColumnMapping = {
+  sessions: 'overall.sessions',
+  packets: 'overall.packets',
+  bytes: 'overall.bytes',
+  clientIp: 'overall.clientIp',
+  serverIp: 'overall.serverIp',
+  domain: 'overall.domain',
+  appName: 'overall.appName',
+  queryRate: 'dns.queryRate',
+  dnsLatency: 'dns.averageResolveLatency',
+  responseFailRate: 'dns.responseFailureRate'
+}
 export const chartPieTableTopOptions = [
  { name: 'Sessions', value: 'sessions' },
  { name: 'Packets', value: 'packets' },
--- a/src/utils/date-util.js
+++ b/src/utils/date-util.js
@@ -29,7 +29,7 @@ export function getMillisecond (time) {
      ms = Math.floor(time * (10 ** (0 - difference)))
    }
  }
-  return ms
+  return ms ? Number(ms) : null
 }
 // 初始化日期
 export function getNowTime (interval) {
--- a/src/utils/tools.js
+++ b/src/utils/tools.js
@@ -444,12 +444,18 @@ export function lineToHump (name) {
 }
 // 下划线转换空格首位大写
 export function lineToSpace (name) {
+  if (_.isEmpty(name)) {
+    return ''
+  }
  return _.upperFirst(name.replace(/\_(\w)/g, function (all, letter) {
    return ` ${letter.toUpperCase()}`
  }))
 }
 // 驼峰转换下划线
 export function humpToLine (name) {
+  if (_.isEmpty(name)) {
+    return ''
+  }
  return name.replace(/([A-Z])/g, '_$1').toLowerCase()
 }
 // 搜索功能：对象转字符串
--- a/src/views/charts/Chart.vue
+++ b/src/views/charts/Chart.vue
@@ -16,6 +16,7 @@
        :chart-data="chartData"
        :query-params="queryParams"
        :entity="entity"
+        @query="query"
        @showLoading="showLoading"
      ></chart-map>

@@ -79,7 +80,7 @@
      ></chart-ip-open-port-bar>

      <chart-table
-        v-else-if="isTable && isCurrentTable"
+        v-else-if="isTable && isBasicTable"
        :chart-info="chartInfo"
        :chart-data="chartData"
        :table="table"
@@ -231,7 +232,7 @@ import {
  isEchartsLine,
  isSingleValue,
  isTable,
-  isCurrentTable,
+  isBasicTable,
  isActiveIpTable,
  isTitle,
  isMap,
@@ -344,6 +345,9 @@ export default {
        this.$refs['chart' + this.chartInfo.id].initEchartsWithTable(
          `chart${this.chartInfo.id}`
        )
+    },
+    query (params) {
+      this.$emit('query', params)
    }
  },
  watch: {
@@ -369,7 +373,7 @@ export default {
      ),
      isRelationShip: isRelationShip(props.chartInfo.type),
      isTable: isTable(props.chartInfo.type),
-      isCurrentTable: isCurrentTable(props.chartInfo.type),
+      isBasicTable: isBasicTable(props.chartInfo.type),
      isActiveIpTable: isActiveIpTable(props.chartInfo.type),
      isMap: isMap(props.chartInfo.type),
      isTitle: isTitle(props.chartInfo.type),
--- a/src/views/charts/ChartHeader.vue
+++ b/src/views/charts/ChartHeader.vue
@@ -11,8 +11,8 @@
      </span>
      {{chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name}}
    </div>
-    <div class="chart-header__title" v-else-if="!isCurrentTable" :class="{'chart-header__title--block': isBlock}" :title="chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name">{{chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name}}</div>
-    <template v-if="isCurrentTable">
+    <div class="chart-header__title" v-else-if="!isBasicTable" :class="{'chart-header__title--block': isBlock}" :title="chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name">{{chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name}}</div>
+    <template v-if="isBasicTable">
      <div class="chart-header__title">
        <span :title="chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name">{{chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name}}</span>
        <span
@@ -50,8 +50,8 @@
              popper-class="option-popper"
              @change="tableLimitChange"
          >
-            <template v-for="(item, index) in table.tableColumns" :key="item.prop">
-              <el-option v-if="index > 0" :value="item.prop">{{item.prop}}</el-option>
+            <template v-for="(item, index) in table.tableColumns.order" :key="item.prop">
+              <el-option :label="$t(chartTableColumnMapping[item])" :value="item"></el-option>
            </template>
          </el-select>
        </div>
@@ -96,7 +96,7 @@
    </template>

    <chart-error :isError="isError" :errorInfo="errorInfo"></chart-error>
-    <div class="chart-header__tools" v-if="!isTitle && !isTabs && !isCurrentTable && !isActiveIpTable && !isEchartsWithTable">
+    <div class="chart-header__tools" v-if="!isTitle && !isTabs && !isBasicTable && !isActiveIpTable && !isEchartsWithTable">
      <div class="panel__time" v-if="chartInfo.params && chartInfo.params.showTimeTool">
        <date-time-range class="date-time-range" :start-time="chartTimeFilter.startTime" :end-time="chartTimeFilter.endTime" ref="dateTimeRange" @change="reload"/>
        <time-refresh class="date-time-range" @change="timeRefreshChange" :end-time="chartTimeFilter.endTime"/>
@@ -114,11 +114,11 @@
 </template>

 <script>
-import { isTitle, isTabs, isBlock, isTable, isActiveIpTable, isCurrentTable, isGroup, isEchartsWithTable } from './charts/tools'
+import { isTitle, isTabs, isBlock, isTable, isActiveIpTable, isBasicTable, isGroup, isEchartsWithTable } from './charts/tools'
 import ChartError from '@/views/charts/ChartError'
 import { getNowTime } from '@/utils/date-util'
 import { ref } from 'vue'
-import { chartTableTopOptions, chartActiveIpTableOrderOptions, chartPieTableTopOptions } from '@/utils/constants'
+import { chartTableTopOptions, chartActiveIpTableOrderOptions, chartPieTableTopOptions, chartTableColumnMapping } from '@/utils/constants'

 export default {
  name: 'ChartHeader',
@@ -140,6 +140,7 @@ export default {
  },
  data () {
    return {
+      chartTableColumnMapping,
      dropdownMenuShow: false,
      errorText: '',

@@ -226,7 +227,7 @@ export default {
      isBlock: isBlock(props.chartInfo.type),
      isTabs: isTabs(props.chartInfo.type),
      isTable: isTable(props.chartInfo.type),
-      isCurrentTable: isCurrentTable(props.chartInfo.type),
+      isBasicTable: isBasicTable(props.chartInfo.type),
      isActiveIpTable: isActiveIpTable(props.chartInfo.type),
      isEchartsWithTable: isEchartsWithTable(props.chartInfo.type),
      isGroup: isGroup(props.chartInfo.type)
--- a/src/views/charts/PanelChart.vue
+++ b/src/views/charts/PanelChart.vue
@@ -37,6 +37,7 @@
        :table="table"
        :is-fullscreen="isFullscreen"
        :order-pie-table="orderPieTable"
+        @query="(params) => getChartData(null, params)"
        @showLoading="showLoading"
    ></chart>
  </div>
@@ -145,14 +146,6 @@ export default {
            num: 345
          }
        ] // table的所有数据
-      },
-      table: {
-        pageSize: chartTableDefaultPageSize,
-        limit: chartTableTopOptions[0], // top-n
-        orderBy: 'sessions',
-        tableColumns: [], // table字段
-        tableData: [], // table的所有数据
-        currentPageData: [] // table当前页的数据
      }
    }
  },
@@ -189,10 +182,10 @@ export default {
          ...this.entity,
          ...extraParams
        }
-        // 默认参数特殊处理
        const requestUrl = url || (chartParams && chartParams.url)
+        // 默认参数特殊处理
        if (requestUrl && requestUrl.indexOf('dnsServerRole') > -1) {
-          this.queryParams.dnsServerRole = dnsServerRole.RTDNS
+          this.queryParams.dnsServerRole = extraParams.dnsServerRole || dnsServerRole.RTDNS
        }
        if (requestUrl) {
          get(replaceUrlPlaceholder(requestUrl, this.queryParams)).then(response => {
@@ -207,13 +200,13 @@ export default {
                data: {
                  result: [
                    {
-                      dnsServerRole: 'TLDNS',
+                      dnsServerRole: extraParams.dnsServerRole || dnsServerRole.RTDNS,
                      ipLocationCountry: 'China',
                      ipLocationId: 'CN',
                      count: 161
                    },
                    {
-                      dnsServerRole: 'RTDNS',
+                      dnsServerRole: extraParams.dnsServerRole || dnsServerRole.RTDNS,
                      ipLocationCountry: 'Japan',
                      ipLocationId: 'JP',
                      count: 222
@@ -231,9 +224,6 @@ export default {
                })
              }
              this.chartData = response.data.result
-              this.table.tableData = response.data.result
-              this.table.tableColumns = this.getTableTitle(response.data.result)
-              this.table.currentPageData = this.getTargetPageData(1, this.table.pageSize, this.table.tableData)
              this.resultType = response.data.resultType
              if (this.chartInfo.type === 12) {
                const newArr = []
@@ -252,7 +242,12 @@ export default {
                  }
                })
              }
-              if (this.isSingleValue) {
+              if (this.isTable) {
+                this.table.tableData = response.data.result
+                // this.table.tableColumns = chartParams.columns
+                // this.table.tableColumns = this.getTableTitle(response.data.result)
+                this.table.currentPageData = this.getTargetPageData(1, this.table.pageSize, this.table.tableData)
+              } else if (this.isSingleValue) {
                if (chartParams && chartParams.dataKey) {
                  if (response.data.result && (response.data.result[chartParams.dataKey] || response.data.result[chartParams.dataKey] === 0)) {
                    this.chartData = response.data.result[chartParams.dataKey]
@@ -395,7 +390,19 @@ export default {
    const dateRangeValue = 60
    const { startTime, endTime } = getNowTime(dateRangeValue)
    const chartTimeFilter = ref({ startTime, endTime, dateRangeValue })
+    let table = {}
+    if (isTable(props.chartInfo.type)) {
+      table = {
+        pageSize: chartTableDefaultPageSize,
+        limit: chartTableTopOptions[0], // top-n
+        orderBy: props.chartInfo.params.columns.order[0],
+        tableColumns: props.chartInfo.params.columns, // table字段
+        tableData: [], // table的所有数据
+        currentPageData: [] // table当前页的数据
+      }
+    }
    return {
+      table,
      chartTimeFilter,
      isEcharts: isEcharts(props.chartInfo.type),
      isEchartsTimeBar: isEchartsTimeBar(props.chartInfo.type),
--- a/src/views/charts/charts/ChartActiveIpTable.vue
+++ b/src/views/charts/charts/ChartActiveIpTable.vue
@@ -28,18 +28,18 @@
            v-for="(c, i) in table.tableColumns"
            show-overflow-tooltip
            :key="i"
-            :label="c.label"
-            :prop="c.prop"
+            :label="$t(chartTableOrderOptionsMapping[c])"
+            :prop="c"
        >
          <template #default="{ row }">
-            <span v-if="c.prop === 'bytes'">
-                {{unitConvert(row[c.prop], unitTypes.byte).join(' ')}}
+            <span v-if="c === 'bytes'">
+                {{unitConvert(row[c], unitTypes.byte).join(' ')}}
            </span>
-            <span v-else-if="c.prop === 'packets' || c.prop === 'sessions'">
-                {{unitConvert(row[c.prop], unitTypes.number).join(' ')}}
+            <span v-else-if="c === 'packets' || c === 'sessions'">
+                {{unitConvert(row[c], unitTypes.number).join(' ')}}
            </span>
            <span v-else>
-                {{row[c.prop]}}
+                {{row[c]}}
            </span>
          </template>
        </el-table-column>
@@ -49,7 +49,7 @@
 </template>

 <script>
-import { unitTypes } from '@/utils/constants'
+import { unitTypes, chartTableOrderOptionsMapping } from '@/utils/constants'
 import unitConvert from '@/utils/unit-convert'
 export default {
  name: 'ChartActiveIpTable',
@@ -61,6 +61,7 @@ export default {
  },
  data () {
    return {
+      chartTableOrderOptionsMapping,
      unitConvert,
      unitTypes,
      activeIpTable: {
--- a/src/views/charts/charts/ChartTable.vue
+++ b/src/views/charts/charts/ChartTable.vue
@@ -9,22 +9,30 @@
        <el-table-column v-if="table.currentPageData.length" type="index" label="#">
        </el-table-column>
        <el-table-column
-            v-for="(c, i) in table.tableColumns"
+            v-for="(c, i) in table.tableColumns.common"
            show-overflow-tooltip
            :key="i"
-            :label="c.label"
-            :prop="c.prop"
+            :label="$t(chartTableColumnMapping[c])"
+            :prop="c"
        >
-          <template #header>{{$t(c.label)}}</template>
+        </el-table-column>
+        <el-table-column
+            v-for="(c, i) in table.tableColumns.order"
+            show-overflow-tooltip
+            :key="i"
+            :label="$t(chartTableColumnMapping[c])"
+            :prop="c"
+        >
+          <template #header>{{$t(chartTableColumnMapping[c])}}</template>
          <template #default="{ row }">
-            <span v-if="c.prop === 'bytes'">
-                {{unitConvert(row[c.prop], unitTypes.byte).join(' ')}}
+            <span v-if="c === 'bytes'">
+                {{unitConvert(row[c], unitTypes.byte).join(' ')}}
            </span>
-            <span v-else-if="c.prop === 'packets' || c.prop === 'sessions'">
-                {{unitConvert(row[c.prop], unitTypes.number).join(' ')}}
+            <span v-else-if="c === 'packets' || c === 'sessions'">
+                {{unitConvert(row[c], unitTypes.number).join(' ')}}
            </span>
            <span v-else>
-                {{row[c.prop]}}
+                {{row[c]}}
            </span>
          </template>
        </el-table-column>
@@ -41,7 +49,7 @@
 </template>

 <script>
-import { unitTypes } from '@/utils/constants'
+import { unitTypes, chartTableColumnMapping } from '@/utils/constants'
 import unitConvert from '@/utils/unit-convert'
 import ChartTablePagination from '@/views/charts/charts/ChartTablePagination'
 export default {
@@ -57,6 +65,7 @@ export default {
  },
  data () {
    return {
+      chartTableColumnMapping,
      unitConvert,
      unitTypes
    }
--- a/src/views/charts/charts/tools.js
+++ b/src/views/charts/charts/tools.js
@@ -107,8 +107,8 @@ export function isEchartsWithTable (type) {
 export function isTable (type) {
  return type >= 61 && type <= 70
 }
-/* current table */
-export function isCurrentTable (type) {
+/* basic table */
+export function isBasicTable (type) {
  return type === 61
 }
 /* table */