feat: 特殊 ip 列表重构

src/views/charts/ChartHeader.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="chart-header" :class="{'chart-header--title-chart': isTitle}">
-    <div class="chart-header__title" v-if="!isTable" :class="{'chart-header__title--block': isBlock}">{{chartInfo.name}}</div>
-    <template v-if="isTable">
+    <div class="chart-header__title" v-if="!isCurrentTable" :class="{'chart-header__title--block': isBlock}">{{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
@@ -10,7 +10,7 @@
         >
           as&nbsp;<span style="text-transform: capitalize">{{chartInfo.params.as}}</span>
         </span>
-      </div>
+      </div >
       <div class="header__operations">
         <el-popover trigger="hover" placement="top" :content="chartInfo.remark" v-if="chartInfo.remark">
           <template>
@@ -47,8 +47,27 @@
         <span class="header__operation-btn" @click="refresh"><i class="cn-icon cn-icon-refresh"></i></span>
       </div>
     </template>
+    <template v-else-if="isActiveIpTable">
+      <div class="header__operations">
+        <div class="header__operation header__operation--table" >
+        <el-select
+            size="mini"
+            v-model="activeIpTable.orderBy"
+            class="option__select select-column"
+            :placeholder="$t('overall.field')"
+            popper-class="option-popper"
+            @change="activeIpTableLimitChange"
+        >
+          <template v-for="item in chartActiveIpTableOrderOptions" :key="item">
+            <el-option :value="item">{{item}}</el-option>
+          </template>
+        </el-select>
+      </div>
+      </div>
+    </template>
+
     <chart-error :isError="isError" :errorInfo="errorInfo"></chart-error>
-    <div class="chart-header__tools" v-if="!isTitle && !isTabs && !isTable">
+    <div class="chart-header__tools" v-if="!isTitle && !isTabs && !isCurrentTable && !isActiveIpTable">
       <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"/>
@@ -66,11 +85,11 @@
 </template>
 
 <script>
-import { isTitle, isTabs, isBlock, isTable } from './charts/tools'
+import {isTitle, isTabs, isBlock, isTable, isActiveIpTable, isCurrentTable} from './charts/tools'
 import ChartError from '@/components/charts/ChartError'
 import { getNowTime } from '@/utils/date-util'
 import { ref } from 'vue'
-import {chartTableTopOptions} from "@/utils/constants";
+import {chartTableTopOptions, chartActiveIpTableOrderOptions} from "@/utils/constants";
 
 export default {
   name: 'ChartHeader',
@@ -92,7 +111,35 @@ export default {
   data () {
     return {
       dropdownMenuShow: false,
-      errorText: ''
+      errorText: '',
+
+      activeIpTable: { // ActiveIpTable select
+        orderBy: 'machine',
+        tableData: [
+          {
+            name: '192.168.20.21',
+            num: 111
+
+          }, {
+            name: '192.168.20.22',
+            num: 345
+          }, {
+            name: '192.168.20.23',
+            num: 111
+
+          }, {
+            name: '192.168.20.24',
+            num: 345
+          }, {
+            name: '192.168.20.25',
+            num: 111
+
+          }, {
+            name: '192.168.20.26',
+            num: 345
+          }
+        ] // table的所有数据
+      },
     }
   },
   methods: {
@@ -113,6 +160,9 @@ export default {
     },
     tableLimitChange () {
       this.$emit('tableChange')
+    },
+    activeIpTableLimitChange () {
+      this.$emit('tableChange')
     }
   },
   setup (props) {
@@ -123,10 +173,13 @@ export default {
     return {
       chartTimeFilter,
       chartTableTopOptions,
+      chartActiveIpTableOrderOptions,
       isTitle: isTitle(props.chartInfo.type),
       isBlock: isBlock(props.chartInfo.type),
       isTabs: isTabs(props.chartInfo.type),
-      isTable: isTable(props.chartInfo.type)
+      isTable: isTable(props.chartInfo.type),
+      isCurrentTable: isCurrentTable(props.chartInfo.type),
+      isActiveIpTable: isActiveIpTable(props.chartInfo.type),
     }
   }
 }