From 3db36759dbf8b71f5b7a88f806248d2ffeb068c0 Mon Sep 17 00:00:00 2001
From: zhangxiaolong <zhangxiaolong@geedgenetworks.com>
Date: Mon, 7 Mar 2022 14:59:14 +0800
Subject: [PATCH] =?UTF-8?q?=20CN-333=20fix=20:=20=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E4=B8=80=E4=BA=9B=E6=A0=B7=E5=BC=8F=E9=97=AE=E9=A2=98=E5=92=8C?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81=E9=80=BB=E8=BE=91=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../css/components/views/chartHeader.scss     |  47 ++--
 .../views/charts/chartAlarmInfo.scss          |  58 ++--
 src/views/charts/charts/ChartAlarmInfo.vue    | 249 +++++++++++++-----
 .../charts/charts/ChartTablePagination.vue    |   1 -
 .../charts/ChartTwoSituationStatistics.vue    |  27 +-
 5 files changed, 269 insertions(+), 113 deletions(-)

diff --git a/src/assets/css/components/views/chartHeader.scss b/src/assets/css/components/views/chartHeader.scss
index 63106ea3..d5990edc 100644
--- a/src/assets/css/components/views/chartHeader.scss
+++ b/src/assets/css/components/views/chartHeader.scss
@@ -1,40 +1,57 @@
-.cn-chart-header-button{
+.cn-chart-header-button {
     display: flex;
-    .cn-chart-header-button-all{
-        border: 1px solid #0091FF;
+    button:first-of-type{
+        border-radius: 2px 0 0 2px;
+
+    }
+    .cn-chart-header-button-all {
+        border-color: #0091FF;
         color: #0091FF;
         background-color: #FFFFFF;
+        border-radius: 2px 0 0 2px;
+
     }
-    .cn-chart-header-button-critical{
-        border: 1px solid #0091FF;
+
+    .cn-chart-header-button-critical {
+        border-color: #0091FF;
         color: #0091FF;
+        border-radius: 2px;
         background-color: #FFFFFF;
 
     }
-    .cn-chart-header-button-high{
-        border: 1px solid #0091FF;
+
+    .cn-chart-header-button-high {
+        border-color: #0091FF;
+        border-radius: 2px;
         background-color: #FFFFFF;
         color: #0091FF;
     }
-    .cn-chart-header-button-low{
-        border: 1px solid #0091FF;
+
+    .cn-chart-header-button-low {
+        border-color: #0091FF;
+        border-radius: 2px;
         background-color: #FFFFFF;
         color: #0091FF;
     }
-    .cn-chart-header-button-info{
-        border: 1px solid #0091FF;
+
+    .cn-chart-header-button-info {
+        border-color: #0091FF;
+        border-radius: 2px;
         background-color: #FFFFFF;
         color: #0091FF;
     }
-    .cn-chart-header-button-medium{
+
+    .cn-chart-header-button-medium {
         border: 1px solid #0091FF;
+        border-radius: 2px;
         background-color: #FFFFFF;
         color: #0091FF;
     }
-    .el-button--default{
+
+    .el-button--default {
         height: 24px;
-        border-radius: 2px 0 0 2px;
-        min-height:24px;
+        border-radius: 2px;
+        min-height: 24px;
         display: flex;
         justify-content: center;
         align-items: center;
diff --git a/src/assets/css/components/views/charts/chartAlarmInfo.scss b/src/assets/css/components/views/charts/chartAlarmInfo.scss
index a67a9aa8..451efccd 100644
--- a/src/assets/css/components/views/charts/chartAlarmInfo.scss
+++ b/src/assets/css/components/views/charts/chartAlarmInfo.scss
@@ -3,23 +3,28 @@
     height: 100%;
     margin-left: 30px;
     position: relative;
-    .cn-chart-alarm-info-mainContent{
-        height: calc(100% - 40px) ;
+
+    .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 ;
+            border-bottom: 1px solid #E7EAED;
+
             .cn-alarm-info-main {
                 display: flex;
-                .cn-alarm-info-main-left{
+
+                .cn-alarm-info-main-left {
                     position: relative;
                     display: flex;
                     justify-content: center;
                     align-items: center;
+
                     .cn-chart-alarm-info-icon {
                         width: 30px;
                         height: 30px;
@@ -28,56 +33,68 @@
                         justify-content: center;
                         align-items: center;
                     }
-                    .cn-icon-alert{
+
+                    .cn-icon-alert {
                         width: 12px;
                         position: absolute;
-                        top: 13px;
-                        left: 7px;
+                        top: calc(50% - 6px);
+                        left: calc(50% - 6px);
                     }
                 }
-                .cn-alarm-info-textContent{
+
+                .cn-alarm-info-textContent {
                     margin-left: 17px;
+
                     .cn-alarm-info-main-title {
-                        font-size: 19px;
+                        font-size: 16px;
                         line-height: 19px;
                     }
+
                     .cn-alarm-info-bottom {
-                        display: flex;
-                        font-size: 14px;
+                        font-size: 12px;
                         line-height: 14px;
                         text-align: center;
                         margin-top: 10px;
-                        
-        
+                        display: flex;
+                        flex-wrap: wrap;
+
                         .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;
+                                line-height: 14px;
+                                font-size: 12px;
                             }
                         }
-        
+
                         .cn-alarm-info-bottom-type {
                             width: auto;
                             height: 16px;
                             font-size: 12px;
                             border: 1px solid;
                             font-weight: 400;
+                            max-width: 72px;
+                            overflow: hidden;
                         }
-        
+
+
+
+
                         .cn-alarm-info-bottom-circle {
                             display: inline-block;
                             width: 5px;
@@ -85,13 +102,14 @@
                             border-radius: 50%;
                         }
                     }
-                    
+
                 }
-    
+
             }
         }
     }
-    .cn-chart-alarm-info-pagination{
+
+    .cn-chart-alarm-info-pagination {
         height: 40px;
         width: 100%;
     }
diff --git a/src/views/charts/charts/ChartAlarmInfo.vue b/src/views/charts/charts/ChartAlarmInfo.vue
index 02497834..4e2ccc78 100644
--- a/src/views/charts/charts/ChartAlarmInfo.vue
+++ b/src/views/charts/charts/ChartAlarmInfo.vue
@@ -1,77 +1,82 @@
 <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>
+      <div
+        class="cn-chart-alarm-content"
+        v-for="(value, index) in result ? result : []"
+        :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 }}
+              111.111.1.1
             </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">
               <div
-                class="cn-alarm-info-bottom-circle"
-                :style="{ background: eventSeverityColor[value.eventSeverity] }"
-              ></div>
-              &nbsp;&nbsp;&nbsp;
-              <div>
-                {{
-                  unitConvert(value.endTime - value.startTime, 'time').join(' ')
-                }}
+                class="cn-alarm-info-bottom-type"
+                :style="{
+                  color: eventSeverityColor[value.eventSeverity],
+                  'border-color': eventSeverityColor[value.eventSeverity],
+                }"
+              >
+                {{ 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>:&nbsp;&nbsp;&nbsp;
+
+              <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>
-
-    </div>
     <chart-table-pagination
       ref="tablePagination"
       class="cn-chart-alarm-info-pagination"
@@ -102,37 +107,141 @@ export default {
       pageSizeForAlarm: 9,
       eventSeverityColor: eventSeverityColor,
       pageNo: 1,
-      alarmInfoCount: {
-        
-      },
-      fromChartData:''
+      alarmInfoCount: {},
+      fromChartData: '',
+      result: [
+        {
+          entityType: 'ip',
+          serverIp: '1.2.3.4',
+          domain: '',
+          appName: 'wechat',
+          eventSeverity: 'high',
+          eventType: 'type1111111111111111111111111111111111',
+          startTime: 1111111111,
+          durationMs: 60000,
+          endTime: 111111111111111112,
+        },
+        {
+          entityType: 'ip',
+          serverIp: '1.2.3.4',
+          domain: '',
+          appName: 'wechat',
+          eventSeverity: 'high',
+          eventType: 'type111111111111111111111111111111111111',
+          startTime: 1111111111,
+          durationMs: 60000,
+          endTime: 1111111112,
+        },
+        {
+          entityType: 'ip',
+          serverIp: '1.2.3.4',
+          domain: '',
+          appName: 'wechat',
+          eventSeverity: 'high',
+          eventType: 'type',
+          startTime: 1111111111,
+          durationMs: 60000,
+          endTime: 1111111112,
+        },
+        {
+          entityType: 'ip',
+          serverIp: '1.2.3.4',
+          domain: '',
+          appName: 'wechat',
+          eventSeverity: 'high',
+          eventType: 'type',
+          startTime: 1111111111,
+          durationMs: 60000,
+          endTime: 1111111112,
+        },
+        {
+          entityType: 'ip',
+          serverIp: '1.2.3.4',
+          domain: '',
+          appName: 'wechat',
+          eventSeverity: 'high',
+          eventType: 'type',
+          startTime: 1111111111,
+          durationMs: 60000,
+          endTime: 1111111112,
+        },
+        {
+          entityType: 'ip',
+          serverIp: '1.2.3.4',
+          domain: '',
+          appName: 'wechat',
+          eventSeverity: 'high',
+          eventType: 'type',
+          startTime: 1111111111,
+          durationMs: 60000,
+          endTime: 1111111112,
+        },
+        {
+          entityType: 'ip',
+          serverIp: '1.2.3.4',
+          domain: '',
+          appName: 'wechat',
+          eventSeverity: 'high',
+          eventType: 'type',
+          startTime: 1111111111,
+          durationMs: 60000,
+          endTime: 1111111112,
+        },
+        {
+          entityType: 'ip',
+          serverIp: '1.2.3.4',
+          domain: '',
+          appName: 'wechat',
+          eventSeverity: 'high',
+          eventType: 'type',
+          startTime: 1111111111,
+          durationMs: 60000,
+          endTime: 1111111112,
+        },
+        {
+          entityType: 'ip',
+          serverIp: '1.2.3.4',
+          domain: '',
+          appName: 'wechat',
+          eventSeverity: 'high',
+          eventType: 'type',
+          startTime: 1111111111,
+          durationMs: 60000,
+          endTime: 1111111112,
+        },
+      ],
     }
   },
   watch: {
     tabHandleClickType: {
       deep: true,
       handler(n) {
-        this.getData(1,n)
+        this.getData(1, n)
       },
     },
   },
-  created(){
-    this.getData(1,'All')
+  created() {
+    this.getData(1, 'All')
   },
   components: {
     ChartTablePagination,
   },
   methods: {
     unitConvert,
-    getData(val,n) {
+    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
+        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),
diff --git a/src/views/charts/charts/ChartTablePagination.vue b/src/views/charts/charts/ChartTablePagination.vue
index 72f1ed04..07d6327d 100644
--- a/src/views/charts/charts/ChartTablePagination.vue
+++ b/src/views/charts/charts/ChartTablePagination.vue
@@ -29,7 +29,6 @@ export default {
   },
   computed: {
     totalPage () {
-      console.log(this.total,this.pageSize);
       const remainder = this.total % this.pageSize
       if (remainder) {
         return parseInt(this.total / this.pageSize) + 1
diff --git a/src/views/charts/charts/ChartTwoSituationStatistics.vue b/src/views/charts/charts/ChartTwoSituationStatistics.vue
index 62c88a21..8c2bd6d3 100644
--- a/src/views/charts/charts/ChartTwoSituationStatistics.vue
+++ b/src/views/charts/charts/ChartTwoSituationStatistics.vue
@@ -2,21 +2,21 @@
   <div class="chart-two-situation-statistics">
     <div
       class="situation-statistics-main"
-      v-for="(value, index) in chartData"
+      v-for="(value, key,index) in result ? result : []"
       :key="index"
     >
-      <div  class="situation-statistics-top">
+      <div class="situation-statistics-top">
         <div class="situation-statistics-main-left">
           <el-progress
             type="circle"
-            :color="chartInfo.params.color[0]"
+            :color="chartInfo.params.color[index]"
             width="76"
-            :percentage="value.percent"
+            :percentage="value.percent ? value.percent : 0"
           />
         </div>
         <div class="situation-statistics-main-right">
-          <div>{{ value.count }}</div>
-          <div>{{ $t(`dns.numberOfNodesSupporting${index}Protocol`)}}</div>
+          <div>{{ value.count ? value.count : '-' }}</div>
+          <div>{{ $t(`dns.numberOfNodesSupporting${key}Protocol`) }}</div>
         </div>
       </div>
     </div>
@@ -30,6 +30,19 @@ export default {
     chartInfo: Object,
     chartData: [Array, Object],
   },
-  
+  data() {
+    return {
+      result: {
+        doh: {
+          count: 111,
+          percent: 0.85,
+        },
+        dot: {
+          count: 111,
+          percent: 80.85,
+        },
+      },
+    }
+  },
 }
 </script>