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

2022-03-07 09:30:17 +08:00
parent 6e33638715
commit ef1686ce70
15 changed files with 672 additions and 200 deletions
--- a/src/assets/css/components/index.scss
+++ b/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';
--- a/src/assets/css/components/views/chartHeader.scss
+++ b/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;
+    }
+}
--- a/src/assets/css/components/views/charts/ChartOneSituationStatistics.scss
+++ b/src/assets/css/components/views/charts/ChartOneSituationStatistics.scss
@@ -1,10 +1,28 @@
+.chart-one-situation-statistics{
+    padding-top: 22px;
    .situation-statistics-main {
        display: flex;
        align-items: center;
-    margin-left: 50px;
-    margin-top: 20px;
-    
+        margin-left: 33px;
+        .situation-statistics-main-left{
+            display: block;
+            width: 76px;
+            height: 76px;
+            .el-progress__text span{
+                font-size: 16px;
+            }
+        }
        .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;
+            }
+        }
      }
 }
--- a/src/assets/css/components/views/charts/ChartTwoSituationStatistics.scss
+++ b/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;
+        padding-top: 22px;
+        .situation-statistics-main-left{
+            display: block;
+            .el-progress__text span{
+                font-size: 16px;
+            }
+        }
        .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;
            }
-    }
-    .situation-statistics-bottom {
-        display: flex;
-        align-items: center;
-        
-        .situation-statistics-main-right{
-            margin-left: 40px;
        }
      }
 }
--- a/src/assets/css/components/views/charts/chartAlarmInfo.scss
+++ b/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%;
+    }
+}
--- a/src/assets/css/components/views/charts/panel.scss
+++ b/src/assets/css/components/views/charts/panel.scss
@@ -590,3 +590,4 @@
    font-size: 12px;
  }
 }
+
--- a/src/utils/api.js
+++ b/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 */
--- a/src/views/charts/Chart.vue
+++ b/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>
--- a/src/views/charts/ChartHeader.vue
+++ b/src/views/charts/ChartHeader.vue
@@ -1,5 +1,12 @@
 <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"
@@ -11,21 +18,39 @@
      </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>
+    <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"
          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 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">
@@ -37,7 +62,12 @@
            popper-class="option-popper"
            @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>
@@ -50,12 +80,19 @@
            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"
+              :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">
@@ -69,7 +106,10 @@
            popper-class="option-popper"
            @change="activeIpTableLimitChange"
          >
-          <template v-for="item in chartActiveIpTableOrderOptions" :key="item">
+            <template
+              v-for="item in chartActiveIpTableOrderOptions"
+              :key="item"
+            >
              <el-option :value="item">{{ item }}</el-option>
            </template>
          </el-select>
@@ -88,37 +128,114 @@
            popper-class="option-popper"
            @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 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
+      class="chart-header__tools"
+      v-if="
+        !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,50 +243,54 @@ 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 {
      dropdownMenuShow: false,
      errorText: '',
-
-      activeIpTable: { // ActiveIpTable select
+      isFocus:false,
+      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
-          }
-        ] // table的所有数据
-      }
+            num: 345,
+          },
+        ], // table的所有数据
+      },
    }
  },
  methods: {
@@ -202,15 +323,36 @@ export default {
    },
    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() {
      // 自己是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) {
    const dateRangeValue = 60
@@ -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>
--- a/src/views/charts/PanelChart.vue
+++ b/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)
    },
--- a/src/views/charts/charts/ChartAlarmInfo.vue
+++ b/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>
--- a/src/views/charts/charts/ChartOneSituationStatistics.vue
+++ b/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>{{ $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>{{ chartData.count }}</div>
+        <div class="situation-statistic-main-right-font">{{ $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>
--- a/src/views/charts/charts/ChartTablePagination.vue
+++ b/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
--- a/src/views/charts/charts/ChartTwoSituationStatistics.vue
+++ b/src/views/charts/charts/ChartTwoSituationStatistics.vue
@@ -2,25 +2,21 @@
  <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">
-        <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.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>{{ value.count }}</div>
+          <div>{{ $t(`dns.numberOfNodesSupporting${index}Protocol`)}}</div>
        </div>
      </div>
    </div>
@@ -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>
--- a/src/views/charts/charts/tools.js
+++ b/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