CN-140 feat: 实体详情改为弹框形式

src/components/charts/chart-options.js

@@ -384,6 +384,18 @@ export function isTitle (type) {
 export function isTabs (type) {
   return type === 91
 }
+/* IP实体基本信息 */
+export function isIpBasicInfo (type) {
+  return type === 4
+}
+/* IP实体开放端口 */
+export function isIpOpenPort (type) {
+  return type === 22
+}
+/* IP实体托管域名 */
+export function isIpHostedDomain (type) {
+  return type === 33
+}
 export function getOption (type) {
   const mapping = typeOptionMappings.find(m => m.value === type)
   return mapping && mapping.option ? _.cloneDeep(mapping.option) : null

src/components/charts/panel.scss

@@ -532,7 +532,6 @@
       align-items: center;
       padding-left: 20px;
       font-size: 20px;
-      font-weight: bold;
 
       .title__icon-circle {
         display: flex;
@@ -544,18 +543,24 @@
         background-color: #B8C1D1;
 
         i {
-          background-color: white;
+          color: white;
-          font-size: 17px;
+          font-size: 20px;
         }
       }
       .title__name {
         padding-left: 10px;
+        color: #333;
       }
     }
     .detail-header__operation {
       display: flex;
       align-items: end;
 
+      .panel__time {
+        display: flex;
+        padding: 0 30px 10px 0;
+      }
+
       & > .el-tabs > .el-tabs__header { // header背景色
         margin: 0 0 -1px 0;
 
@@ -617,9 +622,6 @@
   .el-dialog__body {
     height: 100%;
     padding: 0;
-    .panel__time {
-      display: none;
-    }
   }
 }
 .option-popper {

src/views/charts/Panel.vue

@@ -38,14 +38,16 @@
           <DateTimeRange class="date-time-range" :start-time="timeFilter.startTime" :end-time="timeFilter.endTime" ref="dateTimeRange" @change="reload"/>
           <TimeRefresh class="date-time-range" @change="timeRefreshChange" :end-time="timeFilter.endTime"/>
         </div>
-        <el-tabs v-model="currentTab">
+        <el-tabs
+            v-model="currentTab"
+            @tab-click="changeTab"
+        >
           <el-tab-pane
-              v-for="(tab, index) in detailTabs"
+              v-for="tab in detailTabs"
               :label="tab.i18n ? $t(tab.i18n) : tab.name"
               :name="`${tab.id}`"
               :key="tab.id"
               :ref="`chart-${tab.id}`"
-              @tab-click="changeTab(index)"
           >
           </el-tab-pane>
         </el-tabs>
@@ -91,7 +93,7 @@ export default {
   },
   async mounted () {
     await this.init()
-    this.currentTab = this.detailTabs[0].id
+    this.currentTab = this.detailTabs[0].id + ''
   },
   setup (props, ctx) {
     // data
@@ -134,10 +136,9 @@ export default {
         }
       }
     },
-    changeTab (i) {
+    changeTab ({ index }) {
-      this.currentTab = this.detailTabs[i].id
+      this.currentTab = this.detailTabs[index].id + ''
-      this.detailChartList = this.detailTabs[i].children
+      this.detailChartList = this.detailTabs[index].children
-      this.init()
     },
     recursionParamsConvert (chart) {
       chart.params = chart.params ? JSON.parse(chart.params) : null