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

@@ -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>

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">
+            <template
-              <el-option :value="item" :label="$t(chartTableColumnMapping[item])"></el-option>
+              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
+            num: 345,
-          }
+          },
-        ] // table的所有数据
+        ], // 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>

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)
     }
   }
 }

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>{{ value.startTime ? dayJs.tz(getMillisecond(value.startTime)).format('YYYY-MM-DD HH:mm:ss') : '-' }}</div>
-              </div>:&nbsp;&nbsp;&nbsp;
+              </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>

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)