CN-332 fix : 样式修改

CN-333 fix : 样式修改

src/views/charts/ChartHeader.vue

@@ -132,21 +132,26 @@
 
     <template v-else-if="isAlarmInfo">
       <div class="cn-chart-header-button">
+        <el-button-group class="cn-chart-header-button-group">
         <el-button
           :class="isFocusAll ? 'cn-chart-header-button-all' : ''"
           @click="tabHandleClick('All')"
+          size="small"
           >{{ $t('dns.all') }}</el-button
         >
         <el-button
           :label="value"
           :name="value"
+          plain:true
           v-for="(value, key) in eventSeverity"
           :key="key"
+          size="small"
           :class=" isFocus === value ? 'cn-chart-header-button-' + value : ''"
           @click="tabHandleClick(value)"
         >
           {{ value }}
         </el-button>
+      </el-button-group>
       </div>
     </template>
 
@@ -296,6 +301,7 @@ export default {
       }
     },
     reload (s, e, v) {
+      console.log(s,e,v);
       this.dateTimeRangeChange(s, e, v)
     },
     groupShow () {
@@ -303,6 +309,7 @@ export default {
     },
     dateTimeRangeChange (s, e, v) {
       this.chartTimeFilter = { startTime: s, endTime: e, dateRangeValue: v }
+      console.log(this.chartTimeFilter);
       this.$emit('refresh', this.chartTimeFilter)
     },
     tableLimitChange () {

src/views/charts/charts/ChartAlarmInfo.vue

@@ -231,8 +231,6 @@ export default {
     unitConvert,
     getData (val, n) {
       this.pageNo = val
-      const now = window.$dayJs.tz().valueOf()
-      console.log(window.$dayJs.tz())
       const extraParams = {
         pageNo: val,
         pageSize: this.pageSizeForAlarm,

src/views/charts/charts/ChartOneSituationStatistics.vue

@@ -6,11 +6,11 @@
           type="circle"
           :color="chartInfo.params.color"
           width="76"
-          :percentage="chartData ? chartData.percent : 0"
+          :percentage="$_.get(chartData, 'percent', '-') "
         />
       </div>
       <div class="situation-statistics-main-right">
-        <div>{{ chartData ? (chartData.count || '-') : '-' }}</div>
+        <div> {{ $_.get(chartData, 'count', '-') }} </div>
         <div class="situation-statistic-main-right-font">{{ $t(`dns.numberOfNodes`) }}</div>
       </div>
     </div>
@@ -18,6 +18,7 @@
 </template>
 
 <script>
+import _ from 'lodash'
 export default {
   name: 'ChartOneSituationStatistics',
   props: {

src/views/charts/charts/ChartTwoSituationStatistics.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="chart-two-situation-statistics">
     <div
-      class="situation-statistics-main"
-      v-for="(value, key,index) in chartData ? chartData : []"
+      class="chart-two-situation-statistics-main"
+      v-for="(value, key,index) in result ? result : []"
       :key="index"
     >
-      <div class="situation-statistics-top">
-        <div class="situation-statistics-main-left">
+      <div class="chart-two-situation-statistics-top">
+        <div class="chart-two-situation-statistics-main-left">
           <el-progress
             type="circle"
             :color="chartInfo.params.color[index]"
@@ -14,7 +14,7 @@
             :percentage="value.percent ? value.percent : 0"
           />
         </div>
-        <div class="situation-statistics-main-right">
+        <div class="chart-two-situation-statistics-main-right">
           <div>{{ value.count ? value.count : '-' }}</div>
           <div>{{ $t(`dns.numberOfNodesSupporting${key}Protocol`) }}</div>
         </div>
@@ -32,17 +32,21 @@ export default {
   },
   data () {
     return {
-      // result: {
-      //   doh: {
-      //     count: 111,
-      //     percent: 0.85,
-      //   },
-      //   dot: {
-      //     count: 111,
-      //     percent: 80.85,
-      //   },
-      // },
+      result: {
+        doh: {
+          count: 111,
+          percent: 0.85,
+        },
+        dot: {
+          count: 111,
+          percent: 80.85,
+        },
+      },
     }
+  },
+  mounted(){
+    console.log(this.chartInfo);
+    console.log(this.chartData);
   }
 }
 </script>