fix: 1、调整实体详情--安全事件和性能事件样式；2、删除无用代码；3、修复axios错误导入方式

src/assets/css/components/index.scss

@@ -79,5 +79,5 @@
 @import 'views/administration/Appearance.scss';
 
 @import 'views/setting/knowledgeBase';
-@import "views/charts2/EntityDetailLine";
+@import "@/assets/css/components/views/charts2/entityDetailLine.scss";
-@import "views/charts2/EntityDetailTabs";
+@import "@/assets/css/components/views/charts2/entityDetailTabs.scss";

src/assets/css/components/views/charts2/entityDetailTabs.scss

@@ -57,6 +57,7 @@
       height: calc(100% - 39px);
       border: 1px solid $tab-border-color;
       border-top: none;
+      padding: 30px 20px 20px 20px; // 根据原型调整上边距为30px，但20px更协调
     }
 
     .tab-pane--border-card {
@@ -65,3 +66,8 @@
     }
   }
 }
+
+.entity-detail-event-border {
+  border: 1px solid #E2E5EC;
+  border-radius: 4px;
+}

src/views/charts2/charts/entityDetail/EntityDetailTabs.vue

@@ -1,21 +1,19 @@
 <template>
   <div class="entity-detail-tabs">
     <div class="entity-detail-tabs__active-bar"></div>
-    <el-tabs v-model="activeTab"
+    <el-tabs v-model="activeTab" class="cn-chart__tabs--border-card" type="border-card">
-             class="cn-chart__tabs--border-card"
+      <el-tab-pane
-             type="border-card"
+          v-for="tab in tabs"
-    >
-      <el-tab-pane v-for="tab in tabs"
           :key="tab.name"
           :name="tab.name"
-                   class="tab-pane--border-card"
+          class="tab-pane--border-card">
-      >
         <template #label>
 <!--          <div class="el-tabs__active-bar is-top" style="width: 80.9998px; transform: translateX(177px);"></div>-->
           <i :class="tab.icon"></i>{{tab.label}}
         </template>
         <information-aggregation v-if="tab.name === entityDetailTabsName.informationAggregation"></information-aggregation>
         <domain-name-resolution v-else-if="tab.name === entityDetailTabsName.domainNameResolution"></domain-name-resolution>
+        <digital-certificate v-else-if="tab.name === entityDetailTabsName.digitalCertificate" />
         <security-event v-else-if="tab.name === entityDetailTabsName.securityEvent" :timeFilter="timeFilter" />
         <performance-event v-else-if="tab.name === entityDetailTabsName.performanceEvent" />
       </el-tab-pane>
@@ -32,11 +30,13 @@ import InformationAggregation from '@/views/charts2/charts/entityDetail/tabs/Inf
 import DomainNameResolution from '@/views/charts2/charts/entityDetail/tabs/DomainNameResolution'
 import SecurityEvent from '@/views/charts2/charts/entityDetail/tabs/SecurityEvent'
 import PerformanceEvent from '@/views/charts2/charts/entityDetail/tabs/PerformanceEvent'
+import DigitalCertificate from '@/views/charts2/charts/entityDetail/tabs/DigitalCertificate'
 
 export default {
   name: 'EntityDetailTabs',
   mixins: [chartMixin],
   components: {
+    DigitalCertificate,
     PerformanceEvent,
     SecurityEvent,
     InformationAggregation,
@@ -77,7 +77,7 @@ export default {
     if (entityType === 'domain') {
       tabs.splice(2, 0, { name: entityDetailTabsName.subdomain, label: i18n.global.t('entities.subdomain'), icon: 'cn-icon cn-icon-sub-type' })
     }
-    const activeTab = ref(tabs[0].name)
+    const activeTab = ref(tabs[2].name)
     return {
       entityType,
       activeTab,

src/views/charts2/charts/entityDetail/tabs/PerformanceEvent.vue

@@ -1,7 +1,7 @@
 <template>
   <chart-no-data v-if="isNoData && !showError"></chart-no-data>
   <div
-      class="detection-border"
+      class="entity-detail-event-border"
       v-for="item in eventList"
       :key="item.eventId"
       style="margin-bottom: 10px;">
@@ -46,10 +46,10 @@
 </template>
 
 <script>
-import { getMillisecond, getNowTime, getSecond } from '@/utils/date-util'
+import { getNowTime, getSecond } from '@/utils/date-util'
 import { eventSeverityColor1 } from '@/utils/constants'
 import unitConvert from '@/utils/unit-convert'
-import axios from '_axios@0.21.4@axios'
+import axios from 'axios'
 import { api } from '@/utils/api'
 import { ref } from 'vue'
 import { useRoute } from 'vue-router'
@@ -94,19 +94,6 @@ export default {
   mounted () {
     this.initData()
   },
-  computed: {
-    pointColor () {
-      return function (item) {
-        let color = '#8FA1BE'
-        if (item.startTime && item.endTime) {
-          if (getMillisecond(item.endTime) - getMillisecond(item.startTime) < 5 * 60 * 1000) {
-            color = '#D84C4C'
-          }
-        }
-        return { backgroundColor: color }
-      }
-    }
-  },
   methods: {
     unitConvert,
     initData () {
@@ -143,18 +130,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-.detection-border {
-  border: 1px solid #E2E5EC;
-  border-radius: 4px;
-}
-
-.basic-info__item-duration {
-  display: inline-block;
-  height: 6px;
-  width: 6px;
-  border-radius: 50%;
-  margin-right: 8px;
-}
-</style>

src/views/charts2/charts/entityDetail/tabs/SecurityEvent.vue

@@ -1,7 +1,7 @@
 <template>
   <chart-no-data v-if="isNoData && !showError"></chart-no-data>
   <div
-      class="detection-border"
+      class="entity-detail-event-border"
       v-for="item in eventList"
       :key="item.eventId"
       style="margin-bottom: 10px;">
@@ -70,10 +70,10 @@
 </template>
 
 <script>
-import { getMillisecond, getNowTime, getSecond } from '@/utils/date-util'
+import { getNowTime, getSecond } from '@/utils/date-util'
 import { eventSeverityColor1 } from '@/utils/constants'
 import unitConvert from '@/utils/unit-convert'
-import axios from '_axios@0.21.4@axios'
+import axios from 'axios'
 import { api } from '@/utils/api'
 import { ref } from 'vue'
 import { useRoute } from 'vue-router'
@@ -118,19 +118,6 @@ export default {
   mounted () {
     this.initData()
   },
-  computed: {
-    pointColor () {
-      return function (item) {
-        let color = '#8FA1BE'
-        if (item.startTime && item.endTime) {
-          if (getMillisecond(item.endTime) - getMillisecond(item.startTime) < 5 * 60 * 1000) {
-            color = '#D84C4C'
-          }
-        }
-        return { backgroundColor: color }
-      }
-    }
-  },
   methods: {
     unitConvert,
     initData () {
@@ -167,18 +154,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-.detection-border {
-  border: 1px solid #E2E5EC;
-  border-radius: 4px;
-}
-
-.basic-info__item-duration {
-  display: inline-block;
-  height: 6px;
-  width: 6px;
-  border-radius: 50%;
-  margin-right: 8px;
-}
-</style>