gfwleak/cyber-narrator-cn-ui
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CN-271 feat: 图表重构-table类型

Browse Source
This commit is contained in:
@changcode
2022-01-19 15:54:27 +08:00
parent 759cbe3ce6
commit da28c3d940
6 changed files with 269 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/views/charts/ChartHeader.vue
View File

@@ -1,8 +1,54 @@
<template>
<div class="chart-header" :class="{'chart-header--title-chart': isTitle}">
<div class="chart-header__title" :class="{'chart-header__title--block': isBlock}">{{chartInfo.name}}</div>
<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">
<span :title="chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name">{{chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name}}</span>
<span
v-if="chartInfo.params && chartInfo.params.as"
class="ip-detail-as"
>
as&nbsp;<span style="text-transform: capitalize">{{chartInfo.params.as}}</span>
</span>
</div>
<div class="header__operations">
<el-popover trigger="hover" placement="top" :content="chartInfo.remark" v-if="chartInfo.remark">
<template>
<span class="header__operation-btn"><i class="cn-icon el-icon-info"></i></span>
</template>
</el-popover>
<div class="header__operation header__operation--table">
<el-select
size="mini"
v-model="table.limit"
class="option__select select-topn"
placeholder=""
popper-class="option-popper"
@change="tableLimitChange"
>
<el-option v-for="item in chartTableTopOptions" :key="item" :value="item">TOP&nbsp;{{item}}</el-option>
<template #prefix>TOP&nbsp;</template>
</el-select>
</div>
<div class="header__operation header__operation--table">
<el-select
size="mini"
v-model="table.orderBy"
class="option__select select-column"
:placeholder="$t('overall.field')"
popper-class="option-popper"
@change="tableLimitChange"
>
<template v-for="(item, index) in table.tableColumns" :key="item.prop">
<el-option v-if="index > 0" :value="item.prop">{{item.prop}}</el-option>
</template>
</el-select>
</div>
<span class="header__operation-btn" @click="refresh"><i class="cn-icon cn-icon-refresh"></i></span>
</div>
</template>
<chart-error :isError="isError" :errorInfo="errorInfo"></chart-error>
<div class="chart-header__tools" v-if="!isTitle && !isTabs">
<div class="chart-header__tools" v-if="!isTitle && !isTabs && !isTable">
<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"/>
@@ -20,10 +66,11 @@
</template>
<script>
import { isTitle, isTabs, isBlock } from './charts/tools'
import { isTitle, isTabs, isBlock, isTable } from './charts/tools'
import ChartError from '@/components/charts/ChartError'
import { getNowTime } from '@/utils/date-util'
import { ref } from 'vue'
import {chartTableTopOptions} from "@/utils/constants";
export default {
name: 'ChartHeader',
@@ -36,7 +83,8 @@ export default {
isError: {
type: Boolean,
default: false
}
},
table: Object
},
components: {
ChartError
@@ -62,6 +110,9 @@ export default {
},
dateTimeRangeChange (s, e, v) {
this.chartTimeFilter = { startTime: s, endTime: e, dateRangeValue: v }
},
tableLimitChange () {
this.$emit('tableChange')
}
},
setup (props) {
@@ -71,9 +122,11 @@ export default {
const chartTimeFilter = ref({ startTime, endTime, dateRangeValue })
return {
chartTimeFilter,
chartTableTopOptions,
isTitle: isTitle(props.chartInfo.type),
isBlock: isBlock(props.chartInfo.type),
isTabs: isTabs(props.chartInfo.type)
isTabs: isTabs(props.chartInfo.type),
isTable: isTable(props.chartInfo.type)
}
}
}