CN-333 feat : Dashboard--dns 实时告警信息图表开发 以及CN-332样式修改

src/assets/css/components/index.scss

@@ -38,6 +38,8 @@
 @import './views/charts/chartEchartAppRelateDomain';
 @import './views/charts/ChartOneSituationStatistics';
 @import './views/charts/ChartTwoSituationStatistics';
+@import './views/charts/chartAlarmInfo';
+@import './views/chartHeader';
 
 
 //@import '../chart';

src/assets/css/components/views/chartHeader.scss

@@ -0,0 +1,42 @@
+.cn-chart-header-button{
+    display: flex;
+    .cn-chart-header-button-all{
+        border: 1px solid #0091FF;
+        color: #0091FF;
+        background-color: #FFFFFF;
+    }
+    .cn-chart-header-button-critical{
+        border: 1px solid #0091FF;
+        color: #0091FF;
+        background-color: #FFFFFF;
+
+    }
+    .cn-chart-header-button-high{
+        border: 1px solid #0091FF;
+        background-color: #FFFFFF;
+        color: #0091FF;
+    }
+    .cn-chart-header-button-low{
+        border: 1px solid #0091FF;
+        background-color: #FFFFFF;
+        color: #0091FF;
+    }
+    .cn-chart-header-button-info{
+        border: 1px solid #0091FF;
+        background-color: #FFFFFF;
+        color: #0091FF;
+    }
+    .cn-chart-header-button-medium{
+        border: 1px solid #0091FF;
+        background-color: #FFFFFF;
+        color: #0091FF;
+    }
+    .el-button--default{
+        height: 24px;
+        border-radius: 2px 0 0 2px;
+        min-height:24px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+}

src/assets/css/components/views/charts/ChartOneSituationStatistics.scss

@@ -1,10 +1,28 @@
-.situation-statistics-main {
+.chart-one-situation-statistics{
-    display: flex;
+    padding-top: 22px;
-    align-items: center;
+    .situation-statistics-main {
-    margin-left: 50px;
+        display: flex;
-    margin-top: 20px;
+        align-items: center;
-    
+        margin-left: 33px;
-    .situation-statistics-main-right{
+        .situation-statistics-main-left{
-        margin-left: 40px;
+            display: block;
-    }
+            width: 76px;
-  }
+            height: 76px;
+            .el-progress__text span{
+                font-size: 16px;
+            }
+        }
+        .situation-statistics-main-right{
+            margin-left: 22px;
+            :first-child{
+                font-size: 18px;
+                color: #333;
+            }
+            :last-child{
+                margin-top: 5px;
+                font-size: 14px;
+                color: #666666;
+            }
+        }
+      }
+}

src/assets/css/components/views/charts/ChartTwoSituationStatistics.scss

@@ -1,19 +1,28 @@
 
 .chart-two-situation-statistics{
+    padding-top: 22px;
     .situation-statistics-top {
         display: flex;
         align-items: center;
-        
+        margin-left: 33px;
-        .situation-statistics-main-right{
+        padding-top: 22px;
-            margin-left: 40px;
+        .situation-statistics-main-left{
+            display: block;
+            .el-progress__text span{
+                font-size: 16px;
+            }
         }
-    }
-    .situation-statistics-bottom {
-        display: flex;
-        align-items: center;
-        
         .situation-statistics-main-right{
-            margin-left: 40px;
+            margin-left: 22px;
+            :first-child{
+                font-size: 18px;
+                color: #333;
+            }
+            :last-child{
+                margin-top: 5px;
+                font-size: 14px;
+                color: #666666;
+            }
         }
-    }
+      }
 }

src/assets/css/components/views/charts/chartAlarmInfo.scss

@@ -0,0 +1,98 @@
+.cn-chart-alarm-info {
+    width: 100%;
+    height: 100%;
+    margin-left: 30px;
+    position: relative;
+    .cn-chart-alarm-info-mainContent{
+        height: calc(100% - 40px) ;
+        width: 100%;
+        .cn-chart-alarm-content {
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            width: 100%;
+            height: calc(100% / 9);
+            border-bottom: 1px solid #E7EAED ;
+            .cn-alarm-info-main {
+                display: flex;
+                .cn-alarm-info-main-left{
+                    position: relative;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    .cn-chart-alarm-info-icon {
+                        width: 30px;
+                        height: 30px;
+                        border-radius: 50%;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                    }
+                    .cn-icon-alert{
+                        width: 12px;
+                        position: absolute;
+                        top: 13px;
+                        left: 7px;
+                    }
+                }
+                .cn-alarm-info-textContent{
+                    margin-left: 17px;
+                    .cn-alarm-info-main-title {
+                        font-size: 19px;
+                        line-height: 19px;
+                    }
+                    .cn-alarm-info-bottom {
+                        display: flex;
+                        font-size: 14px;
+                        line-height: 14px;
+                        text-align: center;
+                        margin-top: 10px;
+                        
+        
+                        .cn-alarm-info-bottom-middle {
+                            display: flex;
+                            margin-left: 20px;
+                            height: 14px;
+                            .cn-alarm-info-bottom-time {
+                                color: #999999;
+                                line-height: 14px;
+                                font-size: 12px;
+                            }
+                        }
+        
+                        .cn-alarm-info-bottom-right {
+                            display: flex;
+                            justify-content: center;
+                            align-items: center;
+                            margin-left: 17px;
+                            .cn-alarm-info-bottom-time {
+                                color: #999999;
+                            }
+                        }
+        
+                        .cn-alarm-info-bottom-type {
+                            width: auto;
+                            height: 16px;
+                            font-size: 12px;
+                            border: 1px solid;
+                            font-weight: 400;
+                        }
+        
+                        .cn-alarm-info-bottom-circle {
+                            display: inline-block;
+                            width: 5px;
+                            height: 5px;
+                            border-radius: 50%;
+                        }
+                    }
+                    
+                }
+    
+            }
+        }
+    }
+    .cn-chart-alarm-info-pagination{
+        height: 40px;
+        width: 100%;
+    }
+}

src/assets/css/components/views/charts/panel.scss

@@ -590,3 +590,4 @@
     font-size: 12px;
   }
 }
+

src/utils/api.js

@@ -95,7 +95,7 @@ export const api = {
       listBasic: '/interface/detection/performance/list/basic',
       overviewBasic: '/interface/detection/performance/detail/overview/basic'
     }
-  }
+  },
 }
 
 /* panel */

src/views/charts/Chart.vue

@@ -184,6 +184,7 @@
         v-else-if="isSingleSupportStatistics"
         :chart-info="chartInfo"
         :chart-data="chartData"
+        :query-params="queryParams"
         @showLoading="showLoading"
         :entity="entity"
       ></chart-one-Situation-Statistics>
@@ -192,9 +193,21 @@
         v-else-if="isTwoSupportStatistics"
         :chart-info="chartInfo"
         :chart-data="chartData"
+        :query-params="queryParams"
         @showLoading="showLoading"
         :entity="entity"
       ></chart-two-Situation-Statistics>
+
+      <chart-alarm-info
+      v-else-if="isAlarmInfo"
+        :chart-info="chartInfo"
+        :chart-data="chartData"
+        :query-params="queryParams"
+        @showLoading="showLoading"
+        :tabHandleClickType="tabHandleClickType"
+        @getAlarmInfo="getAlarmInfo"
+        :entity="entity">
+      </chart-alarm-info>
     </template>
   </div>
 </template>
@@ -226,6 +239,7 @@ import ChartRelationShip from '@/views/charts/charts/ChartRelationShip'
 import ChartSanKey from '@/views/charts/charts/ChartSanKey'
 import ChartOneSituationStatistics from '@/views/charts/charts/ChartOneSituationStatistics'
 import ChartTwoSituationStatistics from '@/views/charts/charts/ChartTwoSituationStatistics'
+import ChartAlarmInfo from '@/views/charts/charts/ChartAlarmInfo'
 import {
   isEcharts,
   isEchartsLine,
@@ -260,7 +274,8 @@ import {
   isAppRelatedDomain,
   isBlock,
   isSingleSupportStatistics,
-  isTwoSupportStatistics
+  isTwoSupportStatistics,
+  isAlarmInfo
 } from './charts/tools'
 import _ from 'lodash'
 
@@ -292,7 +307,13 @@ export default {
     ChartEchartIpHostedDomain,
     ChartEchartAppRelateDomain,
     ChartOneSituationStatistics,
-    ChartTwoSituationStatistics
+    ChartTwoSituationStatistics,
+    ChartAlarmInfo
+  },
+  data(){
+    return{
+      tabHandleClickType:''
+    }
   },
   props: {
     chartInfo: Object,
@@ -306,7 +327,8 @@ export default {
     entity: Object,
     isError: Boolean,
     table: Object,
-    orderPieTable: Object
+    orderPieTable: Object,
+    tabHandleClickType:String
   },
   computed: {
     isNoData () {
@@ -320,7 +342,8 @@ export default {
         !this.isActiveIpTable &&
         !this.isMap &&
         !this.isSingleSupportStatistics &&
-        !this.isTwoSupportStatistics
+        !this.isTwoSupportStatistics &&
+        !this.isAlarmInfo
       )
     },
     chartOption () {
@@ -329,7 +352,7 @@ export default {
       } else {
         return getOption(this.chartInfo.type)
       }
-    }
+    },
   },
   methods: {
     resize () {
@@ -339,17 +362,26 @@ export default {
     showLoading (show) {
       this.$emit('showLoading', show)
     },
+    getAlarmInfo(url,extraParams){
+      this.$emit('getChartData',url,extraParams)
+    },
     initEchartsWithTable () {
       this.$refs['chart' + this.chartInfo.id] &&
         this.$refs['chart' + this.chartInfo.id].initEchartsWithTable(
           `chart${this.chartInfo.id}`
         )
-    }
+    },
   },
   watch: {
     chartData: {
       deep: true,
       handler (n) {}
+    },
+    tabHandleClickType:{
+      deep:true,
+      handler(n){
+        this.tabHandleClickType = n
+      }
     }
   },
   setup (props) {
@@ -390,8 +422,9 @@ export default {
       isAppBasicInfo: isAppBasicInfo(props.chartInfo.type),
       isAppRelatedDomain: isAppRelatedDomain(props.chartInfo.type),
       isSingleSupportStatistics: isSingleSupportStatistics(props.chartInfo.type),
-      isTwoSupportStatistics: isTwoSupportStatistics(props.chartInfo.type)
+      isTwoSupportStatistics: isTwoSupportStatistics(props.chartInfo.type),
+      isAlarmInfo: isAlarmInfo(props.chartInfo.type),
     }
-  }
+  },
 }
 </script>

src/views/charts/ChartHeader.vue

@@ -1,124 +1,241 @@
 <template>
-  <div class="chart-header" :class="{'chart-header--title-chart': isTitle, 'is-group-collapse': isGroup, 'panel-chart-block': isBlock}">
+  <div
+    class="chart-header"
+    :class="{
+      'chart-header--title-chart': isTitle,
+      'is-group-collapse': isGroup,
+      'panel-chart-block': isBlock,
+    }"
+  >
     <div class="chart-header__title" v-if="isGroup">
       <span
-          @click="groupShow"
+        @click="groupShow"
-          v-if="chartInfo.params && chartInfo.params.collapsable"
+        v-if="chartInfo.params && chartInfo.params.collapsable"
-          class="arrow-icon"
+        class="arrow-icon"
-          :class="{'reg-down': chartInfo.params && !chartInfo.params.collapse}"
+        :class="{ 'reg-down': chartInfo.params && !chartInfo.params.collapse }"
       >
         <i class="cn-icon cn-icon-arrow-right"></i>
       </span>
-      {{chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name}}
+      {{ 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>
-    <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">
-        <span :title="chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name">{{chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name}}</span>
+        <span :title="chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name">{{
+          chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name
+        }}</span>
         <span
-            v-if="chartInfo.params && chartInfo.params.as"
+          v-if="chartInfo.params && chartInfo.params.as"
-            class="ip-detail-as"
+          class="ip-detail-as"
         >
-          as&nbsp;<span style="text-transform: capitalize">{{chartInfo.params.as}}</span>
+          as&nbsp;<span style="text-transform: capitalize">{{
+            chartInfo.params.as
+          }}</span>
         </span>
-      </div >
+      </div>
       <div class="header__operations">
-        <el-popover trigger="hover" placement="top" :content="chartInfo.remark" v-if="chartInfo.remark">
+        <el-popover
+          trigger="hover"
+          placement="top"
+          :content="chartInfo.remark"
+          v-if="chartInfo.remark"
+        >
           <template>
-            <span class="header__operation-btn"><i class="cn-icon el-icon-info"></i></span>
+            <span class="header__operation-btn"
+              ><i class="cn-icon el-icon-info"></i
+            ></span>
           </template>
         </el-popover>
         <div class="header__operation header__operation--table">
           <el-select
-              size="mini"
+            size="mini"
-              v-model="table.limit"
+            v-model="table.limit"
-              class="option__select select-topn"
+            class="option__select select-topn"
-              placeholder=""
+            placeholder=""
-              popper-class="option-popper"
+            popper-class="option-popper"
-              @change="tableLimitChange"
+            @change="tableLimitChange"
           >
-            <el-option v-for="item in chartTableTopOptions" :key="item" :value="item">TOP&nbsp;{{item}}</el-option>
+            <el-option
+              v-for="item in chartTableTopOptions"
+              :key="item"
+              :value="item"
+              >TOP&nbsp;{{ item }}</el-option
+            >
             <template #prefix>TOP&nbsp;</template>
           </el-select>
         </div>
         <div class="header__operation header__operation--table">
           <el-select
-              size="mini"
+            size="mini"
-              v-model="table.orderBy"
+            v-model="table.orderBy"
-              class="option__select select-column"
+            class="option__select select-column"
-              :placeholder="$t('overall.field')"
+            :placeholder="$t('overall.field')"
-              popper-class="option-popper"
+            popper-class="option-popper"
-              @change="tableLimitChange"
+            @change="tableLimitChange"
           >
-            <template v-for="(item, index) in table.tableColumns" :key="item.prop">
+            <template
-              <el-option v-if="index > 0" :value="item.prop">{{item.prop}}</el-option>
+              v-for="(item, index) in table.tableColumns"
+              :key="item.prop"
+            >
+              <el-option v-if="index > 0" :value="item.prop">{{
+                item.prop
+              }}</el-option>
             </template>
           </el-select>
         </div>
-        <span class="header__operation-btn" @click="refresh"><i class="cn-icon cn-icon-refresh"></i></span>
+        <span class="header__operation-btn" @click="refresh"
+          ><i class="cn-icon cn-icon-refresh"></i
+        ></span>
       </div>
     </template>
     <template v-else-if="isActiveIpTable">
       <div class="header__operations">
-        <div class="header__operation header__operation--table" >
+        <div class="header__operation header__operation--table">
-        <el-select
+          <el-select
             size="mini"
             v-model="activeIpTable.orderBy"
             class="option__select select-column"
             :placeholder="$t('overall.field')"
             popper-class="option-popper"
             @change="activeIpTableLimitChange"
-        >
+          >
-          <template v-for="item in chartActiveIpTableOrderOptions" :key="item">
+            <template
-            <el-option :value="item">{{item}}</el-option>
+              v-for="item in chartActiveIpTableOrderOptions"
-          </template>
+              :key="item"
-        </el-select>
+            >
-      </div>
+              <el-option :value="item">{{ item }}</el-option>
+            </template>
+          </el-select>
+        </div>
       </div>
     </template>
 
     <template v-else-if="isEchartsWithTable">
       <div class="header__operations">
-        <div class="header__operation header__operation--table" >
+        <div class="header__operation header__operation--table">
           <el-select
-                  size="mini"
+            size="mini"
-                  v-model="orderPieTable"
+            v-model="orderPieTable"
-                  class="option__select select-column"
+            class="option__select select-column"
-                  placeholder=""
+            placeholder=""
-                  popper-class="option-popper"
+            popper-class="option-popper"
-                  @change="orderPieTableChange"
+            @change="orderPieTableChange"
           >
-            <el-option v-for="item in chartPieTableTopOptions" :key="item.value" :value="item.value">&nbsp{{item.name}}</el-option>
+            <el-option
+              v-for="item in chartPieTableTopOptions"
+              :key="item.value"
+              :value="item.value"
+              >&nbsp;{{ item.name }}</el-option
+            >
           </el-select>
         </div>
-        <span class="header__operation-btn" @click="refresh"><i class="cn-icon cn-icon-refresh"></i></span>
+        <span class="header__operation-btn" @click="refresh"
+          ><i class="cn-icon cn-icon-refresh"></i
+        ></span>
+      </div>
+    </template>
+
+    <template v-else-if="isAlarmInfo">
+      <div class="cn-chart-header-button">
+        <el-button
+          :class="isFocusAll ? 'cn-chart-header-button-all' : ''"
+          @click="tabHandleClick('All')"
+          >{{ $t('dns.all') }}</el-button
+        >
+        <el-button
+          :label="value"
+          :name="value"
+          v-for="(value, key) in eventSeverity"
+          :key="key"
+          :class=" isFocus === value ? 'cn-chart-header-button-' + value : ''"
+          @click="tabHandleClick(value)"
+        >
+          {{ value }}
+        </el-button>
       </div>
     </template>
 
     <chart-error :isError="isError" :errorInfo="errorInfo"></chart-error>
-    <div class="chart-header__tools" v-if="!isTitle && !isTabs && !isCurrentTable && !isActiveIpTable && !isEchartsWithTable">
+    <div
-      <div class="panel__time" v-if="chartInfo.params && chartInfo.params.showTimeTool">
+      class="chart-header__tools"
-        <date-time-range class="date-time-range" :start-time="chartTimeFilter.startTime" :end-time="chartTimeFilter.endTime" ref="dateTimeRange" @change="reload"/>
+      v-if="
-        <time-refresh class="date-time-range" @change="timeRefreshChange" :end-time="chartTimeFilter.endTime"/>
+        !isTitle &&
+        !isTabs &&
+        !isCurrentTable &&
+        !isActiveIpTable &&
+        !isEchartsWithTable &&
+        !isAlarmInfo
+      "
+    >
+      <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"
+        />
       </div>
       <template v-else-if="!isBlock">
-        <el-popover trigger="click" placement="top" :content="chartInfo.remark" v-if="chartInfo.remark">
+        <el-popover
+          trigger="click"
+          placement="top"
+          :content="chartInfo.remark"
+          v-if="chartInfo.remark"
+        >
           <template #reference>
-            <span class="header__operation-btn"><i class="cn-icon el-icon-info"></i></span>
+            <span class="header__operation-btn"
+              ><i class="cn-icon el-icon-info"></i
+            ></span>
           </template>
         </el-popover>
-        <span class="header__operation-btn" @click="refresh" v-if="showRefreshButton"><i class="cn-icon cn-icon-refresh"></i></span>
+        <span
+          class="header__operation-btn"
+          @click="refresh"
+          v-if="showRefreshButton"
+          ><i class="cn-icon cn-icon-refresh"></i
+        ></span>
       </template>
     </div>
   </div>
 </template>
 
 <script>
-import { isTitle, isTabs, isBlock, isTable, isActiveIpTable, isCurrentTable, isGroup, isEchartsWithTable } from './charts/tools'
+import {
+  isTitle,
+  isTabs,
+  isBlock,
+  isTable,
+  isActiveIpTable,
+  isCurrentTable,
+  isGroup,
+  isEchartsWithTable,
+  isAlarmInfo,
+} 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,
+  eventSeverity,
+} from '@/utils/constants'
 
 export default {
   name: 'ChartHeader',
@@ -126,57 +243,61 @@ 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 {
       dropdownMenuShow: false,
       errorText: '',
-
+      isFocus:false,
-      activeIpTable: { // ActiveIpTable select
+      isFocusAll: true,
+      activeIpTable: {
+        // ActiveIpTable select
         orderBy: 'machine',
         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: {
-    refresh () {
+    refresh() {
       this.$emit('refresh')
     },
-    timeRefreshChange () {
+    timeRefreshChange() {
       if (!this.$refs.dateTimeRange.isCustom) {
         const value = this.chartTimeFilter.dateRangeValue
         this.$refs.dateTimeRange.quickChange(value)
@@ -184,35 +305,56 @@ 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 }
       this.$emit('refresh', this.chartTimeFilter)
     },
-    tableLimitChange () {
+    tableLimitChange() {
       this.$emit('tableChange')
     },
-    activeIpTableLimitChange () {
+    activeIpTableLimitChange() {
       this.$emit('tableChange')
     },
-    orderPieTableChange () {
+    orderPieTableChange() {
       this.$emit('orderPieTableChange', this.orderPieTable)
+    },
+    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){
+      }
     }
   },
   computed: {
-    showRefreshButton () {
+    showRefreshButton() {
       // 自己是group且父元素是block时，不显示刷新按钮
       // TODO 父元素是block，且只有自己一个子元素时，不显示刷新按钮
-      const isGroupAndParentIsBlock = this.$_.get(this.chartInfo.parent, 'type') === 95 && this.isGroup
+      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时间工具不是公共的，需要单独定义
@@ -222,6 +364,7 @@ export default {
       chartTableTopOptions,
       chartActiveIpTableOrderOptions,
       chartPieTableTopOptions,
+      eventSeverity,
       isTitle: isTitle(props.chartInfo.type),
       isBlock: isBlock(props.chartInfo.type),
       isTabs: isTabs(props.chartInfo.type),
@@ -229,8 +372,9 @@ export default {
       isCurrentTable: isCurrentTable(props.chartInfo.type),
       isActiveIpTable: isActiveIpTable(props.chartInfo.type),
       isEchartsWithTable: isEchartsWithTable(props.chartInfo.type),
-      isGroup: isGroup(props.chartInfo.type)
+      isGroup: isGroup(props.chartInfo.type),
+      isAlarmInfo: isAlarmInfo(props.chartInfo.type),
     }
-  }
+  },
 }
 </script>

src/views/charts/PanelChart.vue

@@ -16,6 +16,7 @@
         :order-pie-table="orderPieTable"
         @loadMore="loadMore"
         @refresh="refresh"
+        @tabHandleClick="tabHandleClick"
         @groupShow="groupShow"
         @showFullscreen="showFullscreen"
         @tableChange="tableChange"
@@ -37,7 +38,9 @@
         :table="table"
         :is-fullscreen="isFullscreen"
         :order-pie-table="orderPieTable"
+        @getChartData="getChartData"
         @showLoading="showLoading"
+        :tabHandleClickType="tabHandleClickType"
     ></chart>
   </div>
 </template>
@@ -153,7 +156,8 @@ export default {
         tableColumns: [], // table字段
         tableData: [], // table的所有数据
         currentPageData: [] // table当前页的数据
-      }
+      },
+      tabHandleClickType:''
     }
   },
   computed: {
@@ -290,6 +294,9 @@ export default {
       this.emitter.emit('chart-pageNo')
       this.getChartData(null, {}, true, chartTimeFilter)
     },
+    tabHandleClick(value){
+      this.tabHandleClickType = value
+    },
     showFullscreen (show) {
       this.$emit('showFullscreen', show, this.chartInfo)
     },

src/views/charts/charts/ChartAlarmInfo.vue

@@ -0,0 +1,160 @@
+<template>
+  <div class="cn-chart-alarm-info">
+    <div class="cn-chart-alarm-info-mainContent">
+    <div
+      class="cn-chart-alarm-content"
+      v-for="(value, index) in chartData"
+      :key="index"
+    >
+      <div class="cn-alarm-info-main">
+        <div class="cn-alarm-info-main-left">
+          <div
+            class="cn-chart-alarm-info-icon"
+            :style="{
+              background: eventSeverityColor[value.eventSeverity],
+              opacity: 0.1,
+            }"
+          ></div>
+          <i
+            class="cn-icon cn-icon-alert"
+            :style="{
+              color: eventSeverityColor[value.eventSeverity],
+              opacity: 1,
+            }"
+          ></i>
+        </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> -->
+            111.111.1.1
+          </div>
+
+          <div class="cn-alarm-info-bottom">
+            <div
+              class="cn-alarm-info-bottom-type"
+              :style="{ 'color': eventSeverityColor[value.eventSeverity] ,'border-color':eventSeverityColor[value.eventSeverity]}"
+            >
+              <!-- {{$t(`${value.eventType}`)}} -->
+              {{ value.eventType }}
+            </div>
+
+            <div class="cn-alarm-info-bottom-middle">
+              <i class="cn-icon cn-icon-time2"></i>
+
+              <div class="cn-alarm-info-bottom-time">
+               &nbsp; {{ $t(`dns.startTime`) }}:&nbsp;&nbsp;&nbsp;
+              </div>
+              <div>{{ changeDate(value.startTime) }}</div>
+            </div>
+
+            <div class="cn-alarm-info-bottom-right">
+              <i class="cn-icon cn-icon-time2"></i>
+              <div class="cn-alarm-info-bottom-time">
+                &nbsp;{{ $t(`dns.duration`) }}:&nbsp;&nbsp;&nbsp;
+              </div>
+
+              <div
+                class="cn-alarm-info-bottom-circle"
+                :style="{ background: eventSeverityColor[value.eventSeverity] }"
+              ></div>
+              &nbsp;&nbsp;&nbsp;
+              <div>
+                {{
+                  unitConvert(value.endTime - value.startTime, 'time').join(' ')
+                }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    </div>
+    <chart-table-pagination
+      ref="tablePagination"
+      class="cn-chart-alarm-info-pagination"
+      :total="alarmInfoCount.result"
+      :pageSizeForAlarm="pageSizeForAlarm"
+      v-model:currentPage="pageNo"
+      @pageJump="pageJump"
+    ></chart-table-pagination>
+  </div>
+</template>
+
+<script>
+import { eventSeverityColor } from '@/utils/constants'
+import _ from 'lodash'
+import unitConvert from '@/utils/unit-convert'
+import ChartTablePagination from '@/views/charts/charts/ChartTablePagination'
+import { get } from '@/utils/http'
+
+export default {
+  name: 'isAlarmInfo',
+  props: {
+    chartInfo: Object,
+    chartData: [Array, Object],
+    tabHandleClickType: String,
+  },
+  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')
+  },
+  components: {
+    ChartTablePagination,
+  },
+  methods: {
+    unitConvert,
+    getData(val,n) {
+      this.pageNo = val
+      const now = window.$dayJs.tz().valueOf()
+      const extraParams = {
+        pageNo: val,
+        pageSize: this.pageSizeForAlarm,
+        eventSeverity: n? (n==='All'?'':n ): this.tabHandleClickType === 'All'?'':this.tabHandleClickType
+      }
+      console.log('extraParams',extraParams);
+      this.$emit('getAlarmInfo', null, extraParams)
+      const queryParams = {
+        startTime: Math.floor(now / 1000 - 3600),
+        endTime: Math.floor(now / 1000),
+        eventSeverity:
+          this.tabHandleClickType === 'All' ? '' : this.tabHandleClickType,
+      }
+
+      get('/interface/dns/alarmInfoCount', {
+        ...queryParams,
+      }).then((response) => {
+        if (response.code === 200) {
+          this.alarmInfoCount = response.data
+        }
+      })
+    },
+    changeDate(value) {
+      return window.$dayJs.tz(value).format('YYYY-MM-DD HH:mm:ss')
+    },
+    pageJump(val) {
+      this.getData(val)
+    },
+  },
+}
+</script>

src/views/charts/charts/ChartOneSituationStatistics.vue

@@ -1,22 +1,17 @@
 <template>
   <div class="chart-one-situation-statistics">
-    <div class="situation-statistics-main" v-if="chartInfo.id === 686">
+    <div class="situation-statistics-main">
       <div class="situation-statistics-main-left">
-        <el-progress type="circle" :color="chartInfo.params.color" width="100" :percentage="percentage" />
+        <el-progress
+          type="circle"
+          :color="chartInfo.params.color"
+          width="76"
+          :percentage="chartData.percent"
+        />
       </div>
       <div class="situation-statistics-main-right">
-        <div>{{ result.Dnssec.all }}</div>
+        <div>{{ chartData.count }}</div>
-        <div>{{ $t(`dns.numberOfNodes`) }}</div>
+        <div class="situation-statistic-main-right-font">{{ $t(`dns.numberOfNodes`) }}</div>
-      </div>
-    </div>
-
-    <div class="situation-statistics-main" v-if="chartInfo.id === 687">
-      <div class="situation-statistics-main-left">
-        <el-progress type="circle" width="100" :color="chartInfo.params.color" :percentage="percentage" />
-      </div>
-      <div class="situation-statistics-main-right">
-        <div>{{ result.IPV6.all }}</div>
-        <div>{{ $t(`dns.numberOfNodes`) }}</div>
       </div>
     </div>
   </div>
@@ -27,30 +22,7 @@ export default {
   name: 'ChartOneSituationStatistics',
   props: {
     chartInfo: Object,
-    chartData: [Array, Object]
+    chartData: [Array, Object],
   },
-  data () {
-    return {
-      result: {
-        Dnssec: {
-          num: 5200,
-          all: 18000
-        },
-        IPV6: {
-          num: 2000,
-          all: 10000
-        }
-      }
-    }
-  },
-  computed: {
-    percentage () {
-      if (this.chartInfo.id === 686) {
-        return parseInt((this.result.Dnssec.num / this.result.Dnssec.all) * 100)
-      } else {
-        return parseInt((this.result.IPV6.num / this.result.IPV6.all) * 100)
-      }
-    }
-  }
 }
 </script>

src/views/charts/charts/ChartTablePagination.vue

@@ -18,16 +18,18 @@ import { chartTableDefaultPageSize } from '@/utils/constants'
 export default {
   name: 'ChartTablePagination',
   props: {
-    total: Number
+    total: Number,
+    pageSizeForAlarm:Number
   },
   data () {
     return {
-      pageSize: chartTableDefaultPageSize,
+      pageSize: this.pageSizeForAlarm?this.pageSizeForAlarm:chartTableDefaultPageSize,
       pageNo: 1
     }
   },
   computed: {
     totalPage () {
+      console.log(this.total,this.pageSize);
       const remainder = this.total % this.pageSize
       if (remainder) {
         return parseInt(this.total / this.pageSize) + 1

src/views/charts/charts/ChartTwoSituationStatistics.vue

@@ -2,27 +2,23 @@
   <div class="chart-two-situation-statistics">
     <div
       class="situation-statistics-main"
-      v-for="(value, index) in result"
+      v-for="(value, index) in chartData"
       :key="index"
     >
-    <div v-if="value.type === 'doh'" class="situation-statistics-top">
+      <div  class="situation-statistics-top">
-      <div class="situation-statistics-main-left">
+        <div class="situation-statistics-main-left">
-        <el-progress type="circle" :color="chartInfo.params.color[0]" width="100" :percentage="(parseInt((value.num/value.all)*100))" />
+          <el-progress
+            type="circle"
+            :color="chartInfo.params.color[0]"
+            width="76"
+            :percentage="value.percent"
+          />
+        </div>
+        <div class="situation-statistics-main-right">
+          <div>{{ value.count }}</div>
+          <div>{{ $t(`dns.numberOfNodesSupporting${index}Protocol`)}}</div>
+        </div>
       </div>
-      <div class="situation-statistics-main-right">
-        <div>{{ value.all }}</div>
-        <div>{{ $t(`dns.numberOfNodesSupportingDoHProtocol`) }}</div>
-      </div>
-    </div>
-    <div v-if="value.type === 'dot'" class="situation-statistics-bottom">
-      <div class="situation-statistics-main-left">
-        <el-progress type="circle" :color="chartInfo.params.color[1]" width="100" :percentage="(parseInt((value.num/value.all)*100))" />
-      </div>
-      <div class="situation-statistics-main-right">
-        <div>{{ value.all }}</div>
-        <div>{{ $t(`dns.numberOfNodesSupportingDoTProtocol`) }}</div>
-      </div>
-    </div>
     </div>
   </div>
 </template>
@@ -32,24 +28,8 @@ export default {
   name: 'ChartTwoSituationStatistics',
   props: {
     chartInfo: Object,
-    chartData: [Array, Object]
+    chartData: [Array, Object],
   },
-  data () {
+  
-    return {
-      result: {
-        encryptedDns1: {
-          num: 1800,
-          all: 10000,
-          type: 'doh'
-        },
-        encryptedDns2: {
-          num: 13500,
-          all: 22000,
-          type: 'dot'
-        }
-      }
-    }
-  }
-
 }
 </script>

src/views/charts/charts/tools.js

@@ -150,6 +150,10 @@ export function isDomainWhois (type) {
 export function isDomainDnsRecord (type) {
   return type === 62
 }
+/* 告警信息 */
+export function isAlarmInfo (type) {
+  return type === 84
+}
 /* 近期挖矿事件 */
 export function isCryptocurrencyEventList (type) {
   return type === 85