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

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;
+      }
 }

src/views/charts/Chart.vue

@@ -200,14 +200,15 @@
       ></chart-two-Situation-Statistics>
 
       <chart-alarm-info
-      v-else-if="isAlarmInfo"
+        v-else-if="isAlarmInfo"
         :chart-info="chartInfo"
         :chart-data="chartData"
         :query-params="queryParams"
         @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 () {
+  data() {
     return {
-      tabHandleClickType: ''
+      tabHandleClickType: '',
     }
   },
   props: {
@@ -329,10 +330,10 @@ export default {
     isError: Boolean,
     table: Object,
     orderPieTable: Object,
-    tabHandleClickType: String
+    tabHandleClickType: String,
   },
   computed: {
-    isNoData () {
+    isNoData() {
       return (
         !this.loading &&
         (_.isEmpty(this.chartData) || this.isError) &&
@@ -347,51 +348,54 @@ export default {
         !this.isAlarmInfo
       )
     },
-    chartOption () {
+    chartOption() {
       if (this.customChartOption) {
         return _.cloneDeep(this.customChartOption)
       } else {
         return getOption(this.chartInfo.type)
       }
-    }
+    },
   },
   methods: {
-    resize () {
+    resize() {
       this.$refs['chart' + this.chartInfo.id] &&
         this.$refs['chart' + this.chartInfo.id].resize()
     },
-    showLoading (show) {
+    showLoading(show) {
       this.$emit('showLoading', show)
     },
-    getAlarmInfo (url, extraParams, isRefresh, timeFilter) {
+    getAlarmInfo(url, extraParams, isRefresh, timeFilter) {
       this.$emit('getChartData', url, extraParams, isRefresh, timeFilter)
     },
-    getChartData (url, extraParams) {
+    getChartData(url, extraParams) {
       this.$emit('getChartData', url, extraParams)
     },
-    initEchartsWithTable () {
+    initEchartsWithTable() {
       this.$refs['chart' + this.chartInfo.id] &&
         this.$refs['chart' + this.chartInfo.id].initEchartsWithTable(
-          `chart${this.chartInfo.id}`
+          `chart${this.chartInfo.id}`,
         )
     },
-    query (params) {
+    query(params) {
       this.$emit('query', params)
-    }
+    },
   },
   watch: {
     chartData: {
       deep: true,
-      handler (n) {}
+      handler(n) {},
     },
     tabHandleClickType: {
       deep: true,
-      handler (n) {
+      handler(n) {
         this.tabHandleClickType = n
-      }
-    }
+      },
+    },
+    queryParams: {
+      deep: true,
+    },
   },
-  setup (props) {
+  setup(props) {
     return {
       isEcharts: isEcharts(props.chartInfo.type),
       isEchartsLine: isEchartsLine(props.chartInfo.type),
@@ -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>

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>
@@ -133,25 +146,30 @@
     <template v-else-if="isAlarmInfo">
       <div class="cn-chart-header-button">
         <el-button-group class="cn-chart-header-button-group">
-        <el-button
-          :class="isFocusAll ? 'cn-chart-header-button-all' : ''"
-          @click="tabHandleClick('All')"
-          size="small"
-          >{{ $t('dns.all') }}</el-button
-        >
-        <el-button
-          :label="value"
-          :name="value"
-          plain:true
-          v-for="(value, key) in eventSeverity"
-          :key="key"
-          size="small"
-          :class=" isFocus === value ? 'cn-chart-header-button-' + value : ''"
-          @click="tabHandleClick(value)"
-        >
-          {{ value }}
-        </el-button>
-      </el-button-group>
+          <el-button
+            :class="isFocusAll ? 'cn-chart-header-button-all' : ''"
+            @click="tabHandleClick('All')"
+            size="small"
+            >{{ $t('dns.all') }}</el-button
+          >
+          <el-button
+            :label="value"
+            :name="value"
+            plain:true
+            v-for="(value, key) in eventSeverity"
+            :key="key"
+            size="small"
+            :class="isFocus === value ? 'cn-chart-header-button-' + value : ''"
+            @click="tabHandleClick(value)"
+          >
+            {{ 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,19 +255,19 @@ 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 () {
+  data() {
     return {
       chartTableColumnMapping,
       dropdownMenuShow: false,
@@ -262,37 +280,37 @@ 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: {
-    refresh () {
+    refresh() {
       this.$emit('refresh')
     },
-    timeRefreshChange () {
+    timeRefreshChange() {
       if (!this.$refs.dateTimeRange.isCustom) {
         const value = this.chartTimeFilter.dateRangeValue
         this.$refs.dateTimeRange.quickChange(value)
@@ -300,57 +318,52 @@ export default {
         this.$emit('refresh')
       }
     },
-    reload (s, e, v) {
+    reload(s, e, v) {
       this.dateTimeRangeChange(s, e, v)
     },
-    groupShow () {
+    groupShow() {
       this.$emit('groupShow', this.chartInfo)
     },
-    dateTimeRangeChange (s, e, v) {
+    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 () {
+    tableLimitChange() {
       this.$emit('tableChange')
     },
-    activeIpTableLimitChange () {
+    activeIpTableLimitChange() {
       this.$emit('tableChange')
     },
-    orderPieTableChange () {
+    orderPieTableChange() {
       this.$emit('orderPieTableChange', this.orderPieTable)
     },
-    tabHandleClick (item) {
+    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 () {
+    showRefreshButton() {
       // 自己是group且父元素是block时，不显示刷新按钮
       // TODO 父元素是block，且只有自己一个子元素时，不显示刷新按钮
       const isGroupAndParentIsBlock =
         this.$_.get(this.chartInfo.parent, 'type') === 95 && this.isGroup
       return !isGroupAndParentIsBlock
-    }
+    },
   },
-  setup (props) {
+  setup(props) {
     const dateRangeValue = 60
     const { startTime, endTime } = getNowTime(dateRangeValue)
     // entity详情内的chart时间工具不是公共的，需要单独定义
@@ -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>

src/views/charts/PanelChart.vue

@@ -26,7 +26,7 @@
     <!-- 数据查询后传入chart组件，chart组件内不查询，只根据接传递的数据来渲染 -->
     <chart
         ref="chart"
-        v-if="((!isGroup) || !(chartInfo.params && chartInfo.params.collapse)) && !isTitle"
+        v-if="((!isGroup) || !(chartInfo.params && chartInfo.params.collapse)) && !isTitle "
         :chart-data="chartData"
         :result-type="resultType"
         :chart-info="chartInfo"
@@ -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)
     }
   }
 }

src/views/charts/charts/ChartAlarmInfo.vue

@@ -25,9 +25,11 @@
           </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 === 'app'">{{ value.appName }}</span>
-            <span v-if="value.entityType === 'ip'">{{ value.serverIp }}</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>
 
             <div class="cn-alarm-info-bottom">
@@ -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,35 +103,65 @@ export default {
     chartInfo: Object,
     chartData: [Array, Object],
     tabHandleClickType: String,
-    queryParams: Object
+    queryParams: Object,
   },
-  data () {
+  data() {
     return {
       pageSizeForAlarm: 9,
       eventSeverityColor: eventSeverityColor,
       pageNo: 1,
       alarmInfoCount: {},
       fromChartData: '',
-      
     }
   },
   watch: {
     tabHandleClickType: {
       deep: true,
-      handler (n) {
-        this.getData(1, n)
-      }
-    }
-  },
-  created () {
-    this.getData(1, 'All')
+      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)
+          
+        }
+      },
+    },
   },
   components: {
-    ChartTablePagination
+    ChartTablePagination,
   },
   methods: {
     unitConvert,
-    getData (val, n) {
+    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 = {
         pageNo: val,
@@ -138,17 +171,19 @@ export default {
             ? ''
             : n
           : this.tabHandleClickType === 'All'
-            ? ''
-            : this.tabHandleClickType
+          ? ''
+          : this.tabHandleClickType
       }
       const query = {
         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) {
+    pageJump(val) {
       this.getData(val)
-    }
-  }
+    },
+  },
 }
 </script>

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)