CN-335 : Dashboard--dns AlarmInfo表接口请求问题

2022-03-10 14:57:42 +08:00
parent 1fda36a1bd
commit 455ecae0c3
6 changed files with 195 additions and 123 deletions
--- a/src/assets/css/components/views/chartHeader.scss
+++ b/src/assets/css/components/views/chartHeader.scss
@@ -1,7 +1,7 @@
 .cn-chart-header-button {
+    display: flex;
    .cn-chart-header-button-group {
        display: flex;
-
        .el-button {
            border-radius: 0%;
        }
@@ -74,5 +74,9 @@
        }
    }

-
+    .header__operation-btn {
+        margin-left: 12px;
+        cursor: pointer;
+        color: #999;
+      }
 }
--- a/src/views/charts/Chart.vue
+++ b/src/views/charts/Chart.vue
@@ -207,7 +207,8 @@
        @showLoading="showLoading"
        :tabHandleClickType="tabHandleClickType"
        @getAlarmInfo="getAlarmInfo"
-        :entity="entity">
+        :entity="entity"
+      >
      </chart-alarm-info>
    </template>
  </div>
@@ -276,7 +277,7 @@ import {
  isBlock,
  isSingleSupportStatistics,
  isTwoSupportStatistics,
-  isAlarmInfo
+  isAlarmInfo,
 } from './charts/tools'
 import _ from 'lodash'

@@ -309,11 +310,11 @@ export default {
    ChartEchartAppRelateDomain,
    ChartOneSituationStatistics,
    ChartTwoSituationStatistics,
-    ChartAlarmInfo
+    ChartAlarmInfo,
  },
  data() {
    return {
-      tabHandleClickType: ''
+      tabHandleClickType: '',
    }
  },
  props: {
@@ -329,7 +330,7 @@ export default {
    isError: Boolean,
    table: Object,
    orderPieTable: Object,
-    tabHandleClickType: String
+    tabHandleClickType: String,
  },
  computed: {
    isNoData() {
@@ -353,7 +354,7 @@ export default {
      } else {
        return getOption(this.chartInfo.type)
      }
-    }
+    },
  },
  methods: {
    resize() {
@@ -372,24 +373,27 @@ export default {
    initEchartsWithTable() {
      this.$refs['chart' + this.chartInfo.id] &&
        this.$refs['chart' + this.chartInfo.id].initEchartsWithTable(
-          `chart${this.chartInfo.id}`
+          `chart${this.chartInfo.id}`,
        )
    },
    query(params) {
      this.$emit('query', params)
-    }
+    },
  },
  watch: {
    chartData: {
      deep: true,
-      handler (n) {}
+      handler(n) {},
    },
    tabHandleClickType: {
      deep: true,
      handler(n) {
        this.tabHandleClickType = n
-      }
-    }
+      },
+    },
+    queryParams: {
+      deep: true,
+    },
  },
  setup(props) {
    return {
@@ -404,7 +408,7 @@ export default {
      isSingleValue: isSingleValue(props.chartInfo.type),
      isSingleValueWithEcharts: isSingleValueWithEcharts(props.chartInfo.type),
      isSingleValueWithEchartsTemp: isSingleValueWithEchartsTemp(
-        props.chartInfo.type
+        props.chartInfo.type,
      ),
      isRelationShip: isRelationShip(props.chartInfo.type),
      isTable: isTable(props.chartInfo.type),
@@ -424,14 +428,16 @@ export default {
      isDomainWhois: isDomainWhois(props.chartInfo.type),
      isDomainDnsRecord: isDomainDnsRecord(props.chartInfo.type),
      isCryptocurrencyEventList: isCryptocurrencyEventList(
-        props.chartInfo.type
+        props.chartInfo.type,
      ),
      isAppBasicInfo: isAppBasicInfo(props.chartInfo.type),
      isAppRelatedDomain: isAppRelatedDomain(props.chartInfo.type),
-      isSingleSupportStatistics: isSingleSupportStatistics(props.chartInfo.type),
+      isSingleSupportStatistics: isSingleSupportStatistics(
+        props.chartInfo.type,
+      ),
      isTwoSupportStatistics: isTwoSupportStatistics(props.chartInfo.type),
-      isAlarmInfo: isAlarmInfo(props.chartInfo.type)
-    }
+      isAlarmInfo: isAlarmInfo(props.chartInfo.type),
    }
+  },
 }
 </script>
--- a/src/views/charts/ChartHeader.vue
+++ b/src/views/charts/ChartHeader.vue
@@ -18,7 +18,14 @@
      </span>
      {{ chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name }}
    </div>
-    <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>
+    <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">{{
@@ -73,8 +80,14 @@
            popper-class="option-popper"
            @change="tableLimitChange"
          >
-            <template v-for="(item, index) in table.tableColumns.order" :key="item.prop">
-              <el-option :value="item" :label="$t(chartTableColumnMapping[item])"></el-option>
+            <template
+              v-for="(item, index) in table.tableColumns.order"
+              :key="item.prop"
+            >
+              <el-option
+                :value="item"
+                :label="$t(chartTableColumnMapping[item])"
+              ></el-option>
            </template>
          </el-select>
        </div>
@@ -152,6 +165,11 @@
            {{ value }}
          </el-button>
        </el-button-group>
+        <div>
+          <span class="header__operation-btn" @click="refresh"
+            ><i class="cn-icon cn-icon-refresh"></i
+          ></span>
+        </div>
      </div>
    </template>

@@ -218,7 +236,7 @@ import {
  isBasicTable,
  isGroup,
  isEchartsWithTable,
-  isAlarmInfo
+  isAlarmInfo,
 } from './charts/tools'
 import ChartError from '@/views/charts/ChartError'
 import { getNowTime } from '@/utils/date-util'
@@ -228,7 +246,7 @@ import {
  chartActiveIpTableOrderOptions,
  chartPieTableTopOptions,
  eventSeverity,
-  chartTableColumnMapping
+  chartTableColumnMapping,
 } from '@/utils/constants'

 export default {
@@ -237,17 +255,17 @@ export default {
    chartInfo: Object,
    errorInfo: {
      type: String,
-      default: ''
+      default: '',
    },
    isError: {
      type: Boolean,
-      default: false
+      default: false,
    },
    table: Object,
-    orderPieTable: Object
+    orderPieTable: Object,
  },
  components: {
-    ChartError
+    ChartError,
  },
  data() {
    return {
@@ -262,30 +280,30 @@ export default {
        tableData: [
          {
            name: '192.168.20.21',
-            num: 111
+            num: 111,
          },
          {
            name: '192.168.20.22',
-            num: 345
+            num: 345,
          },
          {
            name: '192.168.20.23',
-            num: 111
+            num: 111,
          },
          {
            name: '192.168.20.24',
-            num: 345
+            num: 345,
          },
          {
            name: '192.168.20.25',
-            num: 111
+            num: 111,
          },
          {
            name: '192.168.20.26',
-            num: 345
-          }
-        ] // table的所有数据
-      }
+            num: 345,
+          },
+        ], // table的所有数据
+      },
    }
  },
  methods: {
@@ -308,7 +326,7 @@ export default {
    },
    dateTimeRangeChange(s, e, v) {
      this.chartTimeFilter = { startTime: s, endTime: e, dateRangeValue: v }
-      console.log(this.chartTimeFilter);
+      console.log(this.chartTimeFilter)
      this.$emit('refresh', this.chartTimeFilter)
    },
    tableLimitChange() {
@@ -322,24 +340,19 @@ export default {
    },
    tabHandleClick(item) {
      this.isFocus = item
-      this.isFocusAll = false
      if (item === 'All') {
        this.isFocusAll = true
      } else {
        this.isFocusAll = false
      }
      this.$emit('tabHandleClick', item)
-    }
    },
-  beforeCreate () {
-    this.$emit('tabHandleClick', 'All')
  },
  watch: {
    isFocus: {
      deep: true,
-      handler (n) {
-      }
-    }
+      handler(n) {},
+    },
  },
  computed: {
    showRefreshButton() {
@@ -348,7 +361,7 @@ export default {
      const isGroupAndParentIsBlock =
        this.$_.get(this.chartInfo.parent, 'type') === 95 && this.isGroup
      return !isGroupAndParentIsBlock
-    }
+    },
  },
  setup(props) {
    const dateRangeValue = 60
@@ -369,8 +382,8 @@ export default {
      isActiveIpTable: isActiveIpTable(props.chartInfo.type),
      isEchartsWithTable: isEchartsWithTable(props.chartInfo.type),
      isGroup: isGroup(props.chartInfo.type),
-      isAlarmInfo: isAlarmInfo(props.chartInfo.type)
-    }
+      isAlarmInfo: isAlarmInfo(props.chartInfo.type),
    }
+  },
 }
 </script>
--- a/src/views/charts/PanelChart.vue
+++ b/src/views/charts/PanelChart.vue
@@ -77,7 +77,8 @@ import {
  isCryptocurrencyEventList,
  isAppBasicInfo,
  isAppRelatedDomain,
-  isBlock
+  isBlock,
+  isAlarmInfo
 } from './charts/tools'
 import { tableTitleMapping, legendMapping } from '@/views/charts/charts/chart-table-title'
 import { replaceUrlPlaceholder } from '@/utils/tools'
@@ -179,11 +180,18 @@ export default {
          this.queryTimeRange = { startTime: getSecond(this.chartTimeFilter.startTime), endTime: getSecond(this.chartTimeFilter.endTime) }
        }
        const chartParams = this.chartInfo.params
+        if(isAlarmInfo && JSON.stringify(extraParams) === '{}'){
+          extraParams = {
+            pageNo : 1,
+            pageSize : 9
+          }
+        }
        // 接口查询参数
        this.queryParams = {
          ...this.handleQueryParams(),
          ...this.queryTimeRange,
          ...this.entity,
+          
          ...extraParams
        }
        const requestUrl = url || (chartParams && chartParams.url)
@@ -411,7 +419,8 @@ export default {
      isDomainDnsRecord: isDomainDnsRecord(props.chartInfo.type),
      isCryptocurrencyEventList: isCryptocurrencyEventList(props.chartInfo.type),
      isAppBasicInfo: isAppBasicInfo(props.chartInfo.type),
-      isAppRelatedDomain: isAppRelatedDomain(props.chartInfo.type)
+      isAppRelatedDomain: isAppRelatedDomain(props.chartInfo.type),
+      isAlarmInfo:isAlarmInfo(props.chartInfo.type)
    }
  }
 }
--- a/src/views/charts/charts/ChartAlarmInfo.vue
+++ b/src/views/charts/charts/ChartAlarmInfo.vue
@@ -25,7 +25,9 @@
          </div>
          <div class="cn-alarm-info-textContent">
            <div class="cn-alarm-info-main-title">
-              <span v-if="value.entityType === 'domain'">{{ value.domain }}</span>
+              <span v-if="value.entityType === 'domain'">{{
+                value.domain
+              }}</span>
              <span v-if="value.entityType === 'app'">{{ value.appName }}</span>
              <span v-if="value.entityType === 'ip'">{{ value.serverIp }}</span>
            </div>
@@ -46,8 +48,9 @@
                <div class="cn-alarm-info-bottom-time">
                  &nbsp; {{ $t(`dns.startTime`) }}:&nbsp;&nbsp;&nbsp;
                </div>
-                <div>{{ changeDate(value.startTime) }}</div>
-              </div>:&nbsp;&nbsp;&nbsp;
+                <div>{{ value.startTime ? dayJs.tz(getMillisecond(value.startTime)).format('YYYY-MM-DD HH:mm:ss') : '-' }}</div>
+              </div>
+              &nbsp;&nbsp;&nbsp;

              <div class="cn-alarm-info-bottom-right">
                <i class="cn-icon cn-icon-time2"></i>
@@ -70,7 +73,6 @@
                  }}
                </div>
              </div>
-
            </div>
          </div>
        </div>
@@ -93,6 +95,7 @@ import _ from 'lodash'
 import unitConvert from '@/utils/unit-convert'
 import ChartTablePagination from '@/views/charts/charts/ChartTablePagination'
 import { get } from '@/utils/http'
+import { getMillisecond } from '@/utils/date-util'

 export default {
  name: 'isAlarmInfo',
@@ -100,7 +103,7 @@ export default {
    chartInfo: Object,
    chartData: [Array, Object],
    tabHandleClickType: String,
-    queryParams: Object
+    queryParams: Object,
  },
  data() {
    return {
@@ -109,25 +112,55 @@ export default {
      pageNo: 1,
      alarmInfoCount: {},
      fromChartData: '',
-      
    }
  },
  watch: {
    tabHandleClickType: {
      deep: true,
      handler(n) {
+          this.$nextTick(() => {
            this.getData(1, n)
-      }
+          })
+      },
+    },
+    alarmInfoCount: {
+      deep: true,
+      handler(n) {
+      },
+    },
+    queryParams: {
+      deep: true,
+      handler(n) {
+        if(n.startTime && n.endTime ){
+            this.getCount(1)
+          
        }
      },
-  created () {
-    this.getData(1, 'All')
+    },
  },
  components: {
-    ChartTablePagination
+    ChartTablePagination,
  },
  methods: {
    unitConvert,
+    getMillisecond,
+    getCount(){
+      let countQuery = {
+          startTime: this.queryParams.startTime,
+          endTime: this.queryParams.endTime,
+          eventSeverity:
+            this.tabHandleClickType === 'All' ? '' : this.tabHandleClickType,
+        }
+        this.$nextTick(() => {
+          get('/interface/dns/alarmInfoCount', {
+            ...countQuery,
+          }).then((response) => {
+            if (response.code === 200) {
+              this.alarmInfoCount = response.data
+            }
+          })
+        })
+    },
    getData(val, n) {
      this.pageNo = val
      const extraParams = {
@@ -145,10 +178,12 @@ export default {
        startTime: this.queryParams.startTime,
        endTime: this.queryParams.endTime,
        eventSeverity:
-          this.tabHandleClickType === 'All' ? '' : this.tabHandleClickType
+          this.tabHandleClickType === 'All' ? '' : this.tabHandleClickType,
      }
-      this.$emit('getAlarmInfo', null, extraParams, false, { startTime: query.startTime, endTime: query.endTime })
-
+      this.$emit('getAlarmInfo', null, extraParams, false, {
+        startTime: query.startTime,
+        endTime: query.endTime
+      })
      get('/interface/dns/alarmInfoCount', {
        ...query
      }).then((response) => {
@@ -157,12 +192,9 @@ export default {
        }
      })
    },
-    changeDate (value) {
-      return window.$dayJs.tz(value).format('YYYY-MM-DD HH:mm:ss')
-    },
    pageJump(val) {
      this.getData(val)
-    }
-  }
+    },
+  },
 }
 </script>
--- a/src/views/charts/charts/ChartTablePagination.vue
+++ b/src/views/charts/charts/ChartTablePagination.vue
@@ -37,6 +37,14 @@ export default {
      }
    }
  },
+  watch:{
+    pageSizeForAlarm:{
+      deep:true,
+    },
+    total:{
+      deep:true,
+    }
+  },
  methods: {
    current (val) {
      this.$emit('pageJump', val)