CN-1086: 实体列表静态页面开发

This commit is contained in:
刘洪洪
2023-06-15 18:48:47 +08:00
parent eb493edc02
commit 71b0d5e053
17 changed files with 780 additions and 159 deletions

View File

@@ -3,13 +3,18 @@
class="entity-explorer"
:class="{'entity-explorer--show-list': showList}">
<!-- 顶部工具栏在列表页显示 -->
<div class="explorer-top-tools" v-show="showList">
<DateTimeRange :start-time="timeFilter.startTime" :end-time="timeFilter.endTime" :date-range="timeFilter.dateRangeValue" ref="dateTimeRange" @change="reload"/>
<TimeRefresh class="date-time-range" @change="timeRefreshChange" :end-time="timeFilter.endTime"/>
<el-button-group size="mini">
<el-button size="mini" @click="listMode = 'list'" :class="{'active': listMode === 'list'}"><i class="cn-icon cn-icon-list"></i></el-button>
<el-button size="mini" @click="listMode = 'block'" :class="{'active': listMode === 'block'}"><i class="cn-icon cn-icon-blocks"></i></el-button>
</el-button-group>
<div class="explorer-top-tools explorer-top-tools-new" v-show="showList">
<div class="explorer-detection-top-tools">
<div class="explorer-top-tools-title">{{$t('network.entity')}}</div>
</div>
<div class="explorer-top-tools">
<DateTimeRange :start-time="timeFilter.startTime" :end-time="timeFilter.endTime" :date-range="timeFilter.dateRangeValue" ref="dateTimeRange" @change="reload"/>
<TimeRefresh class="date-time-range" @change="timeRefreshChange" :end-time="timeFilter.endTime"/>
<el-button-group size="mini">
<el-button size="mini" @click="listMode = 'list'" :class="{'active': listMode === 'list'}"><i class="cn-icon cn-icon-list"></i></el-button>
<el-button size="mini" @click="listMode = 'block'" :class="{'active': listMode === 'block'}"><i class="cn-icon cn-icon-blocks"></i></el-button>
</el-button-group>
</div>
</div>
<!-- 搜索组件 -->
<explorer-search
@@ -18,6 +23,11 @@
:show-list="showList"
@search="search"
></explorer-search>
<!--todo静态数据之后记得修改-->
<div class="explorer-result" v-if="showList">
8,866 resultsIP 2666Domain 3200APP 3000
</div>
<!-- 内容区 -->
<div class="explorer-container" v-if="showList" style="height: calc(100% - 20px); flex-direction: column">
<div style="display: flex; height: auto;">