feat: CN-1592 UI 新增Tag检索界面
This commit is contained in:
hanyuxia
@@ -44,6 +44,7 @@
|
|||||||
@import './views/charts/chartMap';
|
@import './views/charts/chartMap';
|
||||||
@import 'views/charts/chartRelationShipList';
|
@import 'views/charts/chartRelationShipList';
|
||||||
@import 'views/report/report';
|
@import 'views/report/report';
|
||||||
|
@import 'views/tag/tag';
|
||||||
@import 'components/rightBox/report/reportBox';
|
@import 'components/rightBox/report/reportBox';
|
||||||
|
|
||||||
@import './views/charts2/panel';
|
@import './views/charts2/panel';
|
||||||
|
|||||||
261
src/assets/css/components/views/tag/tag.scss
Normal file
261
src/assets/css/components/views/tag/tag.scss
Normal file
@@ -0,0 +1,261 @@
|
|||||||
|
.cn-tag {
|
||||||
|
background: #fff;
|
||||||
|
margin: 10px;
|
||||||
|
height: calc(100% - 20px) !important;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
.cn-tag-right {
|
||||||
|
flex: 1;
|
||||||
|
.list-page .main-container {
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
.cn-table {
|
||||||
|
height: calc(100% - 62px) !important;
|
||||||
|
|
||||||
|
.el-table--fit.el-table--border {
|
||||||
|
height: calc(100% - 55px) !important;
|
||||||
|
}
|
||||||
|
.el-table__header th:first-of-type {
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
.has-gutter .el-table-column--selection .el-checkbox {
|
||||||
|
border-left: none;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.el-scrollbar__bar.is-vertical {
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
.el-table__row .el-table-column--selection .cell {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.el-table__row.expanded {
|
||||||
|
td {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-table__body-wrapper {
|
||||||
|
.el-table__expanded-cell {
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-table__fixed,
|
||||||
|
.el-table__fixed-right {
|
||||||
|
.el-table__expanded-cell {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-table__expanded-cell {
|
||||||
|
.down {
|
||||||
|
margin-left: 32px;
|
||||||
|
height: 100%;
|
||||||
|
width: calc(100% - 32px);
|
||||||
|
background: #fff; //盖住fixed产生的阴影
|
||||||
|
:deep .is-leaf {
|
||||||
|
color: #1b2e3b;
|
||||||
|
background: #ebeef5;
|
||||||
|
}
|
||||||
|
.el-range-editor--small.el-input__wrapper {
|
||||||
|
height: 32px;
|
||||||
|
line-height: 32px;
|
||||||
|
}
|
||||||
|
.cn-detection__footer {
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
.el-pagination__jump {
|
||||||
|
margin-left: 3px;
|
||||||
|
}
|
||||||
|
.el-pagination__goto {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.el-input--small {
|
||||||
|
width: 46px !important;
|
||||||
|
.el-input__wrapper {
|
||||||
|
height: 22px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-pagination--small {
|
||||||
|
.btn-prev {
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.btn-next {
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
&span {
|
||||||
|
color: $--color-text-primary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.block.drop-down-time {
|
||||||
|
margin: 15px 0 14px 0;
|
||||||
|
.el-date-editor {
|
||||||
|
justify-content: center;
|
||||||
|
.el-range-separator {
|
||||||
|
width: 24px;
|
||||||
|
}
|
||||||
|
.el-input__icon.el-range__close-icon {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.expand {
|
||||||
|
min-height: 95px;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
position: relative;
|
||||||
|
.panel-chart__no-data {
|
||||||
|
line-height: 95px;
|
||||||
|
}
|
||||||
|
.expand-cell {
|
||||||
|
display: flex;
|
||||||
|
background: #FFFFFF;
|
||||||
|
border: 1px solid #E7EAED;
|
||||||
|
border-radius: 2px;
|
||||||
|
margin: 0 12px 16px 0;
|
||||||
|
width: 300px;
|
||||||
|
height: 97px;
|
||||||
|
.expand-right {
|
||||||
|
background: #F9F9F9;
|
||||||
|
border-radius: 2px;
|
||||||
|
width: 97px;
|
||||||
|
height: 94px;
|
||||||
|
position: relative;
|
||||||
|
.demo-progress {
|
||||||
|
position: absolute;
|
||||||
|
top: 21px;
|
||||||
|
left: 18.5px;
|
||||||
|
}
|
||||||
|
.demo-progress,.demo-progress .el-progress-circle {
|
||||||
|
width: 57px !important;
|
||||||
|
height: 57px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.expand-left {
|
||||||
|
text-align: center;
|
||||||
|
width: calc(100% - 97px);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
.expand-name {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #666666;
|
||||||
|
font-weight: 400;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
i {
|
||||||
|
padding: 2px 3px 0 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.expand-time {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #666666;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
div:nth-of-type(1) {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.expand-icon {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
margin: 0 8px;
|
||||||
|
font-size: 14px;
|
||||||
|
.table-operation-item--no-border {
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.table-operation-item--disabled {
|
||||||
|
cursor: not-allowed;
|
||||||
|
filter: grayscale(1);
|
||||||
|
opacity: .6;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.table-operation-all {
|
||||||
|
width: 300px;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 17px;
|
||||||
|
z-index: 2;
|
||||||
|
left: 20px;
|
||||||
|
line-height: 24px;
|
||||||
|
height: 24px;
|
||||||
|
display: flex;
|
||||||
|
.el-checkbox {
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
padding: 0;
|
||||||
|
.el-checkbox__input,.el-checkbox__inner {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
min-width: unset;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.table-operation-all-span {
|
||||||
|
height: 24px;
|
||||||
|
display: flex;
|
||||||
|
span {
|
||||||
|
margin: 0 10px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #666666;
|
||||||
|
letter-spacing: 0;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
.table-operation-back-down {
|
||||||
|
font-weight: 500;
|
||||||
|
height: 24px;
|
||||||
|
background: #D7D7D7;
|
||||||
|
border-radius: 2px;
|
||||||
|
cursor: not-allowed;
|
||||||
|
span {
|
||||||
|
margin: 3px 8px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.table-operation-back-down div {
|
||||||
|
color: #FFFFFF;
|
||||||
|
height: 24px;
|
||||||
|
background: #D7D7D7;
|
||||||
|
border-radius: 2px;
|
||||||
|
i {
|
||||||
|
font-size: 25px;
|
||||||
|
top: calc(50% - 12px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.table-operation-back-down.table-operation-all-checkbox {
|
||||||
|
background: #0091ff;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.table-operation-back-down.table-operation-all-loading {
|
||||||
|
background: #D7D7D7;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.table-operation-items {
|
||||||
|
.table-operation-item--no-border {
|
||||||
|
margin-right: 16px;
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.table-operation-item--no-border:last-of-type {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
.table-operation-item--no-border {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
771
src/components/table/tag/TagTable.vue
Normal file
771
src/components/table/tag/TagTable.vue
Normal file
@@ -0,0 +1,771 @@
|
|||||||
|
<template>
|
||||||
|
<el-table
|
||||||
|
id="tagTable"
|
||||||
|
ref="dataTable"
|
||||||
|
:header-cell-class-name="headerCellClass"
|
||||||
|
:data="tableData"
|
||||||
|
:expand-row-keys="expandedIds"
|
||||||
|
empty-text=" "
|
||||||
|
tooltip-effect="light"
|
||||||
|
:row-key="(row) => { return row.id }"
|
||||||
|
:reserve-selection="true"
|
||||||
|
@header-dragend="dragend"
|
||||||
|
@sort-change="tableDataSort"
|
||||||
|
@expand-change="dropExpandChange"
|
||||||
|
@selection-change="selectionChange"
|
||||||
|
>
|
||||||
|
<el-table-column type="expand" width="30">
|
||||||
|
<template #default="props">
|
||||||
|
<div class="down">
|
||||||
|
<div class="block drop-down-time">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="timeRange"
|
||||||
|
size="small"
|
||||||
|
:format="format"
|
||||||
|
:clearable="false"
|
||||||
|
type="datetimerange"
|
||||||
|
range-separator="To"
|
||||||
|
:start-placeholder="$t('detections.startTime')"
|
||||||
|
:end-placeholder="$t('detections.endTime')"
|
||||||
|
@change="datePickerChange(props.row)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="expand">
|
||||||
|
<loading :loading="loadingDown"></loading>
|
||||||
|
<chart-no-data v-if="downDataList.length === 0 && !loadingDown"></chart-no-data>
|
||||||
|
<div class="expand-cell" v-for="(item, index) in downDataList" :key="index">
|
||||||
|
<div class="expand-right">
|
||||||
|
<div class="demo-progress">
|
||||||
|
<el-progress :stroke-width="10" type="circle" :percentage="computePercent(item)"
|
||||||
|
:color="computePercent(item) === 'Failed' ? '#D8A6A6' : (computePercent(item) === 100 ? '#21bf9a' : '#50b3ef')">
|
||||||
|
<template #default="{ percentage }">
|
||||||
|
<span style="font-size: 0.875rem;" v-if="percentage !== 'Failed'">{{ percentage + '%' }}</span>
|
||||||
|
<span style="font-size: 0.875rem;color: #C14843" v-else>{{ percentage }}</span>
|
||||||
|
</template>
|
||||||
|
</el-progress>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="expand-left">
|
||||||
|
<div class="expand-name"><i class="cn-icon cn-icon-user"></i>{{ username }}</div>
|
||||||
|
<div class="expand-time">
|
||||||
|
<div>{{ $t('tag.creationTime') }}</div>
|
||||||
|
<div>{{ dateFormatByAppearance(item.ctime) }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="expand-icon">
|
||||||
|
<div class="table-operation-item--no-border"
|
||||||
|
:class="{'table-operation-item--disabled': computePercent(item) === 'Failed' || computePercent(item) < 100}"
|
||||||
|
@click="tagOperation(['download', item])">
|
||||||
|
<loading :loading="loadingTableId === item.id" size="small"></loading>
|
||||||
|
<svg class="icon" aria-hidden="true" :class="{'table-operation-all-loading': loadingTableId}">
|
||||||
|
<use xlink:href="#cn-icon-download2"></use>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="table-operation-item--no-border"
|
||||||
|
:class="{'table-operation-item--disabled': computePercent(item) === 'Failed' || computePercent(item) < 100}"
|
||||||
|
@click="tagOperation(['preview', item])">
|
||||||
|
<loading :loading="loadingPreviewId === item.id" size="small"></loading>
|
||||||
|
<svg class="icon" aria-hidden="true" :class="{'table-operation-all-loading': loadingPreviewId}">
|
||||||
|
<use xlink:href="#cn-icon-preview"></use>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="table-operation-item--no-border" @click="downDeleteQueryChange(item, props)">
|
||||||
|
<svg class="icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#cn-icon-shanchu"></use>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="cn-detection__footer">
|
||||||
|
<chart-detection-pagination
|
||||||
|
ref="pagination"
|
||||||
|
:page-obj="pageObj"
|
||||||
|
@pageJump="pageJump"
|
||||||
|
></chart-detection-pagination>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
:resizable="false"
|
||||||
|
align="center"
|
||||||
|
type="selection"
|
||||||
|
width="30">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
v-for="item in customTableTitles"
|
||||||
|
:key="item.prop"
|
||||||
|
:fixed="item.fixed"
|
||||||
|
:label="item.label"
|
||||||
|
:min-width="`${item.minWidth}`"
|
||||||
|
:prop="item.prop"
|
||||||
|
:resizable="true"
|
||||||
|
:show-overflow-tooltip="item.prop === 'timePlan'"
|
||||||
|
:sort-orders="['ascending', 'descending']"
|
||||||
|
:sortable="item.sortable"
|
||||||
|
:width="`${item.width}`"
|
||||||
|
>
|
||||||
|
<template #header>
|
||||||
|
<span class="data-column__span">{{ item.label }}</span>
|
||||||
|
<div class="col-resize-area"></div>
|
||||||
|
</template>
|
||||||
|
<template #default="scope" :column="item">
|
||||||
|
<span v-if="item.prop === 'timeLimit'">
|
||||||
|
{{ handleTimeRange(scope.row) }}
|
||||||
|
</span>
|
||||||
|
<span v-else-if="item.prop === 'categoryId'">
|
||||||
|
<span>{{ getCategoryName(scope.row.categoryId) }}</span>
|
||||||
|
</span>
|
||||||
|
<span v-else-if="item.prop === 'timePlan'">
|
||||||
|
<template v-if="scope.row.config && scope.row.config.isScheduler === 0">
|
||||||
|
{{ $t('tag.always') }}
|
||||||
|
</template>
|
||||||
|
<template v-else-if="scope.row.config && scope.row.config.isScheduler === 1">
|
||||||
|
<el-popover
|
||||||
|
placement="right-start"
|
||||||
|
:width="270"
|
||||||
|
trigger="hover"
|
||||||
|
class="my-table"
|
||||||
|
@show="handleConfig(scope.row)"
|
||||||
|
>
|
||||||
|
<template #reference>
|
||||||
|
<span>
|
||||||
|
<template v-if="scope.row.config && scope.row.config.schedulerConfig">
|
||||||
|
<template v-if="scope.row.config.schedulerConfig.type === 'day'">
|
||||||
|
{{ $t('tag.daily') }}
|
||||||
|
</template>
|
||||||
|
<template v-else-if="scope.row.config.schedulerConfig.type === 'week'">
|
||||||
|
{{ $t('tag.weekly') }}
|
||||||
|
</template>
|
||||||
|
<template v-else-if="scope.row.config.schedulerConfig.type === 'month'">
|
||||||
|
{{ $t('tag.monthly') }}
|
||||||
|
</template>
|
||||||
|
<template v-else-if="scope.row.config.schedulerConfig.type === ''">
|
||||||
|
{{ $t('tag.oneTime') }}
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
-
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
<el-row class="margin-l-10 margin-t-20">
|
||||||
|
<el-col :span="8" class="tooltip-column-name">{{ $t('tag.period') }}</el-col>
|
||||||
|
<el-col :span="16">{{ configPeriod }}</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row class="margin-l-10">
|
||||||
|
<el-col :span="8" class="tooltip-column-name">{{ $t('tag.custom') }}</el-col>
|
||||||
|
<el-col :span="16">{{ configCustom }}</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row class="margin-l-10">
|
||||||
|
<el-col :span="8" class="tooltip-column-name">{{ $t('tag.startTime') }}</el-col>
|
||||||
|
<el-col :span="16">{{ dateFormatByAppearance(scope.row.schedulerStart) || '-' }}</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row class="margin-l-10">
|
||||||
|
<el-col :span="8" class="tooltip-column-name">{{ $t('tag.endTime') }}</el-col>
|
||||||
|
<el-col :span="16">{{ dateFormatByAppearance(scope.row.schedulerEnd) || '-' }}</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-popover>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
-
|
||||||
|
</template>
|
||||||
|
</span>
|
||||||
|
<span v-else-if="item.prop === 'userName'">
|
||||||
|
{{ (scope.row.sysUser && scope.row.sysUser.name) || '-' }}
|
||||||
|
</span>
|
||||||
|
<span v-else-if="item.prop === 'lastTime'">
|
||||||
|
{{ scope.row.lastTime ? dateFormatByAppearance(scope.row.lastTime) : '-' }}
|
||||||
|
</span>
|
||||||
|
<span v-else-if="item.prop === 'total'">
|
||||||
|
{{ scope.row[item.prop] || 0 }}
|
||||||
|
</span>
|
||||||
|
<span v-else>{{ scope.row[item.prop] || '-' }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<template v-slot:empty >
|
||||||
|
<div class="table-no-data" v-if="isNoData">
|
||||||
|
<div class="table-no-data__title">{{ $t('npm.noData') }}</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import table from '@/mixins/table'
|
||||||
|
import Loading from '@/components/common/Loading'
|
||||||
|
import axios from 'axios'
|
||||||
|
import { api } from '@/utils/api'
|
||||||
|
import { storageKey } from '@/utils/constants'
|
||||||
|
import { urlParamsHandler, overwriteUrl, headerCellClass } from '@/utils/tools'
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import { dateFormatToUTC, getNowTime } from '@/utils/date-util'
|
||||||
|
import chartDetectionPagination from '@/views/charts/charts/chartDetectionPagination'
|
||||||
|
import ChartNoData from '@/views/charts/charts/ChartNoData'
|
||||||
|
import { useRoute } from 'vue-router'
|
||||||
|
import { parseInt } from 'lodash'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'tagTable',
|
||||||
|
mixins: [table],
|
||||||
|
components: {
|
||||||
|
ChartNoData,
|
||||||
|
Loading,
|
||||||
|
chartDetectionPagination
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
categoryList: Array,
|
||||||
|
toolsLoading: Boolean,
|
||||||
|
categoryId: Number,
|
||||||
|
isNoData: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
inject: ['reload'],
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
format: localStorage.getItem(storageKey.dateFormat),
|
||||||
|
username: localStorage.getItem(storageKey.username),
|
||||||
|
tableTitle: [ // 原始table列
|
||||||
|
{
|
||||||
|
label: 'ID',
|
||||||
|
prop: 'id',
|
||||||
|
show: true,
|
||||||
|
width: 50
|
||||||
|
}, {
|
||||||
|
label: this.$t('config.user.name'),
|
||||||
|
prop: 'name',
|
||||||
|
show: true,
|
||||||
|
minWidth: 200,
|
||||||
|
sortable: 'custom'
|
||||||
|
}, {
|
||||||
|
label: this.$t('tag.categoryType'),
|
||||||
|
prop: 'categoryId',
|
||||||
|
show: true,
|
||||||
|
minWidth: 180
|
||||||
|
}, {
|
||||||
|
label: this.$t('tag.timeLimit'),
|
||||||
|
prop: 'timeLimit',
|
||||||
|
show: true,
|
||||||
|
minWidth: 110
|
||||||
|
}, {
|
||||||
|
label: this.$t('tag.timePlan'),
|
||||||
|
prop: 'timePlan',
|
||||||
|
show: true,
|
||||||
|
minWidth: 110
|
||||||
|
}, {
|
||||||
|
label: this.$t('tag.operationUserName'),
|
||||||
|
prop: 'userName',
|
||||||
|
show: true,
|
||||||
|
minWidth: 70
|
||||||
|
}, {
|
||||||
|
label: this.$t('tag.resultCount'),
|
||||||
|
prop: 'total',
|
||||||
|
show: true,
|
||||||
|
minWidth: 50
|
||||||
|
}, {
|
||||||
|
label: this.$t('tag.lastExecutionTime'),
|
||||||
|
prop: 'lastTime',
|
||||||
|
show: true,
|
||||||
|
width: 170,
|
||||||
|
sortable: 'custom'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
checkboxAll: false,
|
||||||
|
isIndeterminate: false,
|
||||||
|
checkboxIds: {},
|
||||||
|
batchDow: false,
|
||||||
|
builtinId: '',
|
||||||
|
indeterminate: false,
|
||||||
|
loading: false,
|
||||||
|
loadingDown: false,
|
||||||
|
loadingTableId: '',
|
||||||
|
loadingPreviewId: '',
|
||||||
|
downDataList: [],
|
||||||
|
disableEdit: false, // 编辑按钮是否不可用，当选择多条记录的时候你，编辑按钮不可用
|
||||||
|
// pageObj: {
|
||||||
|
// pageNo: 1,
|
||||||
|
// pageSize: 20,
|
||||||
|
// total: 0,
|
||||||
|
// resetPageNo: true
|
||||||
|
// },
|
||||||
|
// expandedIds: [],
|
||||||
|
interval: null,
|
||||||
|
typeMappings: [
|
||||||
|
{
|
||||||
|
key: 'day',
|
||||||
|
value: this.$t('tag.daily')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'week',
|
||||||
|
value: this.$t('tag.weekly')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'month',
|
||||||
|
value: this.$t('tag.monthly')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '',
|
||||||
|
value: this.$t('tag.oneTime')
|
||||||
|
}
|
||||||
|
],
|
||||||
|
typeUnitMappings: [
|
||||||
|
{
|
||||||
|
key: 'day',
|
||||||
|
value: this.$t('tag.days')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'week',
|
||||||
|
value: this.$t('tag.week')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'month',
|
||||||
|
value: this.$t('tag.months')
|
||||||
|
}
|
||||||
|
],
|
||||||
|
scheduleTypeList: tag.scheduleTypeList,
|
||||||
|
weekdayList: tag.weekdayList,
|
||||||
|
monthList: tag.monthList,
|
||||||
|
weekOptions: tag.weekOptions,
|
||||||
|
configPeriod: '',
|
||||||
|
configCustom: '',
|
||||||
|
selectIds: [], // 单行选中的id列表
|
||||||
|
initExpandFlag: false // 初始化时单行展开标志，false是未展开，true展开
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 添加vue3的setup，目的是添加/获取地址栏的参数
|
||||||
|
*/
|
||||||
|
setup () {
|
||||||
|
const { startTime, endTime } = getNowTime(60 * 24 * 30)
|
||||||
|
const timeRange = ref([startTime, endTime])
|
||||||
|
|
||||||
|
const { query } = useRoute()
|
||||||
|
|
||||||
|
// 展开行的id列表，只展开一行
|
||||||
|
const expandedId = []
|
||||||
|
if (query.expandId) {
|
||||||
|
expandedId.push(parseInt(query.expandId))
|
||||||
|
}
|
||||||
|
const expandedIds = ref(expandedId || [])
|
||||||
|
// 展开行的分页信息
|
||||||
|
const tempPageObj = {
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 20,
|
||||||
|
total: 0,
|
||||||
|
resetPageNo: true
|
||||||
|
}
|
||||||
|
|
||||||
|
let pageNo = query.expandPage
|
||||||
|
if (pageNo !== undefined) {
|
||||||
|
pageNo = parseInt(pageNo)
|
||||||
|
if (pageNo > 1) {
|
||||||
|
tempPageObj.pageNo = pageNo
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
pageNo = 1
|
||||||
|
}
|
||||||
|
const pageObj = ref(tempPageObj)
|
||||||
|
|
||||||
|
return {
|
||||||
|
timeRange,
|
||||||
|
expandedIds,
|
||||||
|
pageObj
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
tableData (newVal, oldVal) {
|
||||||
|
if (newVal) {
|
||||||
|
this.showSelectedRow()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
expandedIds (newVal, oldVal) {
|
||||||
|
if (newVal !== undefined && newVal.length > 0) {
|
||||||
|
const expandIdParam = {
|
||||||
|
expandId: newVal[0]
|
||||||
|
}
|
||||||
|
this.reloadUrl(expandIdParam)
|
||||||
|
|
||||||
|
if (this.initExpandFlag) {
|
||||||
|
const expandPage = {
|
||||||
|
expandPage: 1
|
||||||
|
}
|
||||||
|
this.reloadUrl(expandPage)
|
||||||
|
}
|
||||||
|
|
||||||
|
const dateParam = {
|
||||||
|
startTime: dateFormatToUTC(this.timeRange[0]),
|
||||||
|
endTime: dateFormatToUTC(this.timeRange[1])
|
||||||
|
}
|
||||||
|
this.reloadUrl(dateParam)
|
||||||
|
} else {
|
||||||
|
// 删除地址栏参数，然后删除缓存
|
||||||
|
const newQuery = this.$route.query // 深拷贝路由数据
|
||||||
|
delete newQuery.expandId
|
||||||
|
delete newQuery.expandPage
|
||||||
|
delete newQuery.startTime
|
||||||
|
delete newQuery.endTime
|
||||||
|
this.reloadUrl(newQuery, 'cleanOldParams')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
timeRange (newVal, oldVal) {
|
||||||
|
if (newVal) {
|
||||||
|
const dateParam = {
|
||||||
|
startTime: dateFormatToUTC(newVal[0]),
|
||||||
|
endTime: dateFormatToUTC(newVal[1])
|
||||||
|
}
|
||||||
|
this.reloadUrl(dateParam)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
handleTimeRange () {
|
||||||
|
return function (row) {
|
||||||
|
let str = ''
|
||||||
|
if (row.config && row.config.timeConfig && row.config.timeConfig.type) {
|
||||||
|
str += row.config.timeConfig.type
|
||||||
|
if (['today', 'yesterday', 'this', 'customize'].indexOf(row.config.timeConfig.type) === -1 && row.config.timeConfig.offset) {
|
||||||
|
str += ` ${row.config.timeConfig.offset} ${row.config.timeConfig.unit}`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return str
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computePercent () {
|
||||||
|
return function (item) {
|
||||||
|
if (item.state === 2) {
|
||||||
|
return 'Failed'
|
||||||
|
}
|
||||||
|
if (item.percent === 1) {
|
||||||
|
if (localStorage.getItem(storageKey.s3Enable) == 1) {
|
||||||
|
if (item.state === 1 && item.upload === 1) {
|
||||||
|
return 100
|
||||||
|
} else {
|
||||||
|
return 99.99
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (item.state === 1) {
|
||||||
|
return 100
|
||||||
|
} else {
|
||||||
|
return 99.99
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
return parseFloat(item.percent * 100).toFixed(2)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.expandTable()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
headerCellClass,
|
||||||
|
/**
|
||||||
|
* 进入页面判断是否需要展开表格
|
||||||
|
* 即展开表格后刷新界面，保持展开效果
|
||||||
|
*/
|
||||||
|
expandTable () {
|
||||||
|
const expandInfo = this.expandedIds
|
||||||
|
|
||||||
|
if (expandInfo !== undefined && expandInfo.length > 0) {
|
||||||
|
const obj = {
|
||||||
|
id: expandInfo[0]
|
||||||
|
}
|
||||||
|
|
||||||
|
this.dropExpandChange(obj, expandInfo, 'init')
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
this.initExpandFlag = true
|
||||||
|
}, 1500)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 显示选中的行，即分页后依旧显示
|
||||||
|
*/
|
||||||
|
showSelectedRow () {
|
||||||
|
const selectIds = this.selectIds
|
||||||
|
|
||||||
|
this.$nextTick(() => {
|
||||||
|
if (selectIds.length > 0) {
|
||||||
|
this.tableData.forEach(item => {
|
||||||
|
if (selectIds.includes(item.id)) {
|
||||||
|
this.$refs.dataTable.toggleRowSelection(item)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
getJobStatus (tag) {
|
||||||
|
if (tag.state === 1 && tag.upload === 1) {
|
||||||
|
return this.$t('overall.completed')
|
||||||
|
} else {
|
||||||
|
return this.$t('overall.inProgress')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
tagOperation (arr) {
|
||||||
|
if (arr[1].percent === 1) {
|
||||||
|
this.tableOperation(arr)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 单行选中
|
||||||
|
*/
|
||||||
|
selectionChange (objs) {
|
||||||
|
this.$emit('selectionChange', objs)
|
||||||
|
this.checkboxIds.id = objs.map(item => {
|
||||||
|
return item.id
|
||||||
|
}).join(',')
|
||||||
|
|
||||||
|
this.batchDow = objs.length > 0
|
||||||
|
|
||||||
|
this.checkboxAll = objs.length === this.tableData.length
|
||||||
|
this.isIndeterminate = objs.length > 0 && objs.length < this.tableData.length
|
||||||
|
|
||||||
|
// 选中状态回显
|
||||||
|
const selectIds = []
|
||||||
|
if (objs.length > 0) {
|
||||||
|
objs.forEach(item => {
|
||||||
|
selectIds.push(item.id)
|
||||||
|
})
|
||||||
|
// this.selectIds = selectIds
|
||||||
|
}
|
||||||
|
this.batchDeleteObjs = objs
|
||||||
|
if (objs.length > 1) {
|
||||||
|
this.disableEdit = true
|
||||||
|
} else {
|
||||||
|
this.disableEdit = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 全选按钮
|
||||||
|
*/
|
||||||
|
selectAll (objs) {
|
||||||
|
const selectIds = []
|
||||||
|
this.isIndeterminate = false
|
||||||
|
|
||||||
|
if (objs) {
|
||||||
|
objs.forEach(item => {
|
||||||
|
this.$refs.dataTable.toggleAllSelection(item)
|
||||||
|
// this.checkboxAll = true;
|
||||||
|
selectIds.push(item.id)
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
this.$refs.dataTable.clearSelection()
|
||||||
|
}
|
||||||
|
|
||||||
|
this.batchDeleteObjs = objs
|
||||||
|
if (objs.length > 1) {
|
||||||
|
this.disableEdit = true
|
||||||
|
} else {
|
||||||
|
this.disableEdit = false
|
||||||
|
}
|
||||||
|
|
||||||
|
// this.selectIds = selectIds
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 向地址栏添加/删除参数
|
||||||
|
*/
|
||||||
|
reloadUrl (newParam, clean) {
|
||||||
|
const { query } = this.$route
|
||||||
|
let newUrl = urlParamsHandler(window.location.href, query, newParam)
|
||||||
|
if (clean) {
|
||||||
|
newUrl = urlParamsHandler(window.location.href, query, newParam, clean)
|
||||||
|
}
|
||||||
|
overwriteUrl(newUrl)
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 表格左侧点击展开收起
|
||||||
|
*/
|
||||||
|
dropExpandChange (row, expandedRows, flag) {
|
||||||
|
this.expandedIds = []
|
||||||
|
clearInterval(this.interval)
|
||||||
|
if (expandedRows.length > 0 && row) {
|
||||||
|
this.expandedIds.push(row.id)
|
||||||
|
if (flag === undefined) {
|
||||||
|
this.pageObj.pageNo = 1
|
||||||
|
}
|
||||||
|
|
||||||
|
this.datePickerChange(row)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
datePickerChange (row, show) {
|
||||||
|
if (!show) {
|
||||||
|
if (this.pageObj.pageNo <= 1) {
|
||||||
|
this.pageObj.pageNo = 1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const param = {
|
||||||
|
tempId: row.id,
|
||||||
|
startTime: dateFormatToUTC(this.timeRange[0]),
|
||||||
|
endTime: dateFormatToUTC(this.timeRange[1]),
|
||||||
|
...this.pageObj
|
||||||
|
}
|
||||||
|
this.dropDownQueryChange(param)
|
||||||
|
},
|
||||||
|
dropDownQueryChange (param) {
|
||||||
|
this.loadingDown = true
|
||||||
|
this.downDataList = []
|
||||||
|
axios.get(api.reportJob, { params: param }).then(res => {
|
||||||
|
if (res.status === 200) {
|
||||||
|
this.downDataList = res.data.data.list
|
||||||
|
this.pageObj.total = res.data.data.total
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs.dataTable.doLayout()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
this.loadingDown = false
|
||||||
|
const showInterval = this.downDataList.find(item => item.percent !== 1 && item.state !== 2)
|
||||||
|
if (this.downDataList && showInterval) {
|
||||||
|
this.intervalChange(param)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
dataConversionProcessing (param) {
|
||||||
|
axios.get(api.reportJob, { params: param }).then(res => {
|
||||||
|
if (res.status === 200) {
|
||||||
|
this.downDataList = res.data.data.list
|
||||||
|
this.pageObj.total = res.data.data.total
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
downDeleteQueryChange (row, props) {
|
||||||
|
this.$confirm(this.$t('tip.confirmDelete'), {
|
||||||
|
confirmButtonText: this.$t('tip.yes'),
|
||||||
|
cancelButtonText: this.$t('tip.no'),
|
||||||
|
type: 'warning'
|
||||||
|
}).then(() => {
|
||||||
|
axios.delete(api.reportJob + '?ids=' + row.id).then(response => {
|
||||||
|
if (response.status === 200) {
|
||||||
|
this.delFlag = true
|
||||||
|
this.$message({
|
||||||
|
duration: 2000,
|
||||||
|
type: 'success',
|
||||||
|
message: this.$t('tip.deleteSuccess')
|
||||||
|
})
|
||||||
|
this.dropDownQueryChange({ tempId: props.row.id })
|
||||||
|
this.$emit('reload')
|
||||||
|
} else {
|
||||||
|
this.$message.error(response.data.message)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}).catch(() => {})
|
||||||
|
},
|
||||||
|
pageJump (val) {
|
||||||
|
this.pageObj.pageNo = val
|
||||||
|
if (this.expandedIds.length > 0) {
|
||||||
|
this.datePickerChange({ id: this.expandedIds[0] }, true)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
intervalChange (param) {
|
||||||
|
clearInterval(this.interval)
|
||||||
|
this.interval = setInterval(() => {
|
||||||
|
// 通过深拷贝，触发watch监听到timeRange，也可使用$set进行触发
|
||||||
|
this.timeRange = JSON.parse(JSON.stringify(this.timeRange))
|
||||||
|
this.timeRange[1] = this.timeRange[1] + 30000
|
||||||
|
param.endTime = dateFormatToUTC(this.timeRange[1])
|
||||||
|
this.dataConversionProcessing(param)
|
||||||
|
}, 30000)
|
||||||
|
},
|
||||||
|
handleConfigArray (array, list) {
|
||||||
|
const group = []
|
||||||
|
array.forEach(item => {
|
||||||
|
const matchItem = list.find(m => m.value === item)
|
||||||
|
if (matchItem) {
|
||||||
|
group.push(this.$t(matchItem.name))
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return group.toString()
|
||||||
|
},
|
||||||
|
handleConfig (row) {
|
||||||
|
this.handleConfigPeriod(row)
|
||||||
|
this.handleConfigCustom(row)
|
||||||
|
},
|
||||||
|
handleConfigPeriod (row) {
|
||||||
|
let str = ''
|
||||||
|
if (row.config && row.config.schedulerConfig) {
|
||||||
|
const type = row.config.schedulerConfig.type
|
||||||
|
if (type === '') {
|
||||||
|
str = this.$t('tag.oneTime')
|
||||||
|
} else { // isRepeat=1 每天，每周，每月
|
||||||
|
const period = this.typeMappings.find(m => m.key === type)
|
||||||
|
const interval = row.config.schedulerConfig.interval
|
||||||
|
const months = row.config.schedulerConfig.months
|
||||||
|
if (interval > 1) {
|
||||||
|
const unit = this.typeUnitMappings.find(m => m.key === type)
|
||||||
|
if (unit) {
|
||||||
|
str = this.$t('tag.every') + ' ' + interval + ' ' + unit.value
|
||||||
|
} else {
|
||||||
|
str = '-'
|
||||||
|
}
|
||||||
|
} else if (interval === 1) {
|
||||||
|
if (type === this.scheduleTypeList[2].value) { // 月
|
||||||
|
if (this.$_.isEmpty(months)) { // 空代表循环
|
||||||
|
str = period.value
|
||||||
|
} else { // 非空代表不循环
|
||||||
|
str = this.handleConfigArray(months, this.monthList)// X月，Y月
|
||||||
|
}
|
||||||
|
} else if (period) {
|
||||||
|
str = period.value
|
||||||
|
} else {
|
||||||
|
str = '-'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.configPeriod = str
|
||||||
|
},
|
||||||
|
handleConfigCustom (row) {
|
||||||
|
let str = ''
|
||||||
|
if (row.config && row.config.schedulerConfig) {
|
||||||
|
const type = row.config.schedulerConfig.type
|
||||||
|
if (type === '') { // 单次
|
||||||
|
str = '-'
|
||||||
|
} else { // 每日，每周，每月
|
||||||
|
const period = this.typeMappings.find(m => m.key === type)
|
||||||
|
if (type === this.scheduleTypeList[0].value) { // 日
|
||||||
|
str = '-'
|
||||||
|
} else if (type === this.scheduleTypeList[1].value) { // 周
|
||||||
|
const weekDates = row.config.schedulerConfig.weekDates
|
||||||
|
str = this.handleConfigArray(weekDates, this.weekdayList)
|
||||||
|
} else if (type === this.scheduleTypeList[2].value) { // 月
|
||||||
|
const monthDates = row.config.schedulerConfig.monthDates// 日期
|
||||||
|
const monthWeekDates = row.config.schedulerConfig.monthWeekDates// 哪几周
|
||||||
|
const weekDates = row.config.schedulerConfig.weekDates// 周几
|
||||||
|
if (!this.$_.isEmpty(monthDates)) {
|
||||||
|
str = this.$t('tag.date') + '-' + monthDates
|
||||||
|
} else {
|
||||||
|
if (!this.$_.isEmpty(monthWeekDates)) {
|
||||||
|
str += this.$t('tag.week') + '-' + this.handleConfigArray(monthWeekDates, this.weekOptions)
|
||||||
|
}
|
||||||
|
if (!this.$_.isEmpty(weekDates)) {
|
||||||
|
str += ' ' + this.handleConfigArray(weekDates, this.weekdayList)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
str = '-'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.configCustom = str
|
||||||
|
},
|
||||||
|
getCategoryName (id) {
|
||||||
|
let name = '-'
|
||||||
|
for (let i = 0; i < this.categoryList.length; i++) {
|
||||||
|
if (id === this.categoryList[i].id) {
|
||||||
|
name = this.categoryList[i].name
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return name
|
||||||
|
}
|
||||||
|
},
|
||||||
|
beforeUnmount () {
|
||||||
|
clearInterval(this.interval)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@@ -162,6 +162,8 @@ export function handleComponent (code) {
|
|||||||
return () => import('@/views/detections/detectionPolicies/PolicyForm')
|
return () => import('@/views/detections/detectionPolicies/PolicyForm')
|
||||||
case 'report':
|
case 'report':
|
||||||
return () => import('@/views/report/Report')
|
return () => import('@/views/report/Report')
|
||||||
|
//case 'tag':
|
||||||
|
//return () => import('@/views/tag/Tag')
|
||||||
case 'knowledgeBase':
|
case 'knowledgeBase':
|
||||||
return () => import('@/views/setting/KnowledgeBase')
|
return () => import('@/views/setting/KnowledgeBase')
|
||||||
case 'userDefinedLibrary':
|
case 'userDefinedLibrary':
|
||||||
|
|||||||
@@ -311,6 +311,36 @@ export const metricOptions = [
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
|
export const tagIntentOptions = [
|
||||||
|
{
|
||||||
|
value: 'Malicious',
|
||||||
|
label: 'tag.intent.malicious'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'Benign',
|
||||||
|
label: 'tag.intent.benign'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'Unknown',
|
||||||
|
label: 'tag.intent.unknown'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
export const tagCategoryOptions = [
|
||||||
|
{
|
||||||
|
value: 'Malicious',
|
||||||
|
label: 'tag.intent.malicious'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'Benign',
|
||||||
|
label: 'tag.intent.benign'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'Unknown',
|
||||||
|
label: 'tag.intent.unknown'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
export const metricType = {
|
export const metricType = {
|
||||||
Bits: 'Bits/s',
|
Bits: 'Bits/s',
|
||||||
Packets: 'Packets/s',
|
Packets: 'Packets/s',
|
||||||
|
|||||||
@@ -167,8 +167,12 @@ export default {
|
|||||||
})
|
})
|
||||||
},
|
},
|
||||||
resize () {
|
resize () {
|
||||||
this.myChart.resize()
|
if(this.myChart) {
|
||||||
this.myChart2.resize()
|
this.myChart.resize()
|
||||||
|
}
|
||||||
|
if(this.myChart2) {
|
||||||
|
this.myChart2.resize()
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
|||||||
394
src/views/tag/Tag.vue
Normal file
394
src/views/tag/Tag.vue
Normal file
@@ -0,0 +1,394 @@
|
|||||||
|
<template>
|
||||||
|
<div class="cn-tag">
|
||||||
|
<div class="cn-tag-right">
|
||||||
|
<cn-data-list
|
||||||
|
ref="dataList"
|
||||||
|
:tableId="tableId"
|
||||||
|
v-model:custom-table-title="tools.customTableTitle"
|
||||||
|
:api="url"
|
||||||
|
:from="fromRoute.builtinReport"
|
||||||
|
:layout="['search']"
|
||||||
|
@search="search"
|
||||||
|
>
|
||||||
|
<template #top-tool-left>
|
||||||
|
<button id="account-add" class="top-tool-btn margin-r-10 top-tool-btn--create"
|
||||||
|
v-if="hasPermission('createReport')"
|
||||||
|
@click="add">
|
||||||
|
<i class="cn-icon-xinjian cn-icon"></i>
|
||||||
|
<span>{{$t('overall.create')}}</span>
|
||||||
|
</button>
|
||||||
|
<button id="tag-edit" class="top-tool-btn margin-r-10" :disabled="disableEdit"
|
||||||
|
v-if="hasPermission('editReport')"
|
||||||
|
@click="editReport">
|
||||||
|
<i class="cn-icon-edit cn-icon"></i>
|
||||||
|
<span>{{$t('overall.edit')}}</span>
|
||||||
|
</button>
|
||||||
|
<button id="tag-delete" class="top-tool-btn margin-r-10" :disabled="disableDelete"
|
||||||
|
v-if="hasPermission('deleteReport')"
|
||||||
|
@click="delBatch">
|
||||||
|
<i class="cn-icon-delete cn-icon"></i>
|
||||||
|
<span>{{$t('overall.delete')}}</span>
|
||||||
|
</button>
|
||||||
|
<el-select
|
||||||
|
key="intentSelect"
|
||||||
|
size="small"
|
||||||
|
v-model="intent"
|
||||||
|
placeholder=" "
|
||||||
|
:teleported="false"
|
||||||
|
style="width:135px;margin-right:10px;"
|
||||||
|
@change="intentChange"
|
||||||
|
>
|
||||||
|
<template #prefix>
|
||||||
|
<span class="select-prefix">{{$t('tag.intent')}}:</span>
|
||||||
|
</template>
|
||||||
|
<el-option v-for="item in tagIntentOptions" :key="item.value" :label="$t(item.label)" :value="item.value"></el-option>
|
||||||
|
</el-select>
|
||||||
|
<el-select
|
||||||
|
key="categorySelect"
|
||||||
|
size="small"
|
||||||
|
v-model="category"
|
||||||
|
placeholder=" "
|
||||||
|
:teleported="false"
|
||||||
|
style="width:150px;margin-right:10px;"
|
||||||
|
@change="categoryChange"
|
||||||
|
>
|
||||||
|
<template #prefix>
|
||||||
|
<span class="select-prefix">{{$t('tag.category')}}:</span>
|
||||||
|
</template>
|
||||||
|
<el-option v-for="item in tagCategoryOptions" :key="item.value" :label="$t(item.label)" :value="item.value"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</template>
|
||||||
|
<template #default>
|
||||||
|
<loading :loading="loading"></loading>
|
||||||
|
<report-table
|
||||||
|
ref="dataTable"
|
||||||
|
:api="url"
|
||||||
|
:isNoData="isNoData"
|
||||||
|
:custom-table-title="tools.customTableTitle"
|
||||||
|
:category-list="builtinReportLeftMenu"
|
||||||
|
:height="mainTableHeight"
|
||||||
|
:table-data="tableData"
|
||||||
|
:category-id="builtinId"
|
||||||
|
@delete="del"
|
||||||
|
@edit="edit"
|
||||||
|
@download="download"
|
||||||
|
@preview="preview"
|
||||||
|
@orderBy="tableDataSort"
|
||||||
|
@reload="getTableData"
|
||||||
|
@selectionChange="selectionChange"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
<template #pagination>
|
||||||
|
<pagination ref="pagination" :page-obj="pageObj" :tableData="tableData" :table-id="tableId" @pageNo='pageNo' @pageSize='pageSize'></pagination>
|
||||||
|
</template>
|
||||||
|
</cn-data-list>
|
||||||
|
<el-drawer
|
||||||
|
v-model="rightBox.show"
|
||||||
|
direction="rtl"
|
||||||
|
custom-class="common-right-box"
|
||||||
|
class="common-right-box"
|
||||||
|
:size="700"
|
||||||
|
:with-header="false"
|
||||||
|
destroy-on-close>
|
||||||
|
<report-box
|
||||||
|
:object="object"
|
||||||
|
:category-list="builtinReportLeftMenu"
|
||||||
|
:current-category-id="builtinId"
|
||||||
|
@close="closeRightBox"
|
||||||
|
/>
|
||||||
|
</el-drawer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import axios from 'axios'
|
||||||
|
import ReportTable from '@/components/table/report/ReportTable'
|
||||||
|
import cnDataList from '@/components/table/CnDataList'
|
||||||
|
import dataListMixin from '@/mixins/data-list'
|
||||||
|
import { api } from '@/utils/api'
|
||||||
|
import { tagIntentOptions,tagCategoryOptions } from '@/utils/constants'
|
||||||
|
import { urlParamsHandler, overwriteUrl } from '@/utils/tools'
|
||||||
|
import ReportBox from '@/components/rightBox/report/ReportBox'
|
||||||
|
import Loading from '@/components/common/Loading'
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import { useRoute } from 'vue-router'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'Report',
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
builtinReportLeftMenu: [], // 左侧列表菜单数据
|
||||||
|
builtinColor: false,
|
||||||
|
// builtinId: '',
|
||||||
|
url: api.reportTemp,
|
||||||
|
tagIntentOptions,
|
||||||
|
tagCategoryOptions,
|
||||||
|
blankObject: {
|
||||||
|
id: '',
|
||||||
|
name: '',
|
||||||
|
type: '',
|
||||||
|
source: 'session_record_cn',
|
||||||
|
cTime: '',
|
||||||
|
uTime: '',
|
||||||
|
remark: '',
|
||||||
|
config: {
|
||||||
|
isRepeat: 0,
|
||||||
|
isScheduler: 0,
|
||||||
|
cronExpression: '',
|
||||||
|
startTime: '',
|
||||||
|
endTime: '',
|
||||||
|
queryParam: {},
|
||||||
|
schedulerConfig: {
|
||||||
|
type: 'day',
|
||||||
|
weekDates: [],
|
||||||
|
months: [],
|
||||||
|
monthDates: [],
|
||||||
|
monthWeekDates: [],
|
||||||
|
interval: 1
|
||||||
|
},
|
||||||
|
timeConfig: {
|
||||||
|
type: 'yesterday',
|
||||||
|
offset: 1,
|
||||||
|
unit: 'hour'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
schedulerStart: '',
|
||||||
|
schedulerEnd: '',
|
||||||
|
categoryId: '',
|
||||||
|
categoryParams: []
|
||||||
|
},
|
||||||
|
checkWeekListData: [
|
||||||
|
'report.sunday',
|
||||||
|
'report.monday',
|
||||||
|
'report.tuesday',
|
||||||
|
'report.wednesday',
|
||||||
|
'report.thursday',
|
||||||
|
'report.friday',
|
||||||
|
'report.saturday'
|
||||||
|
],
|
||||||
|
checkMonthsListData: [
|
||||||
|
'report.january',
|
||||||
|
'report.february',
|
||||||
|
'report.march',
|
||||||
|
'report.april',
|
||||||
|
'report.may',
|
||||||
|
'report.june',
|
||||||
|
'report.july',
|
||||||
|
'report.august',
|
||||||
|
'report.september',
|
||||||
|
'report.october',
|
||||||
|
'report.november',
|
||||||
|
'report.december'
|
||||||
|
],
|
||||||
|
tableId: 'reportTable',
|
||||||
|
builtinLeftLoading: false,
|
||||||
|
// builtinRightLoading: false,
|
||||||
|
isInit: true,
|
||||||
|
intent:'All',
|
||||||
|
category:'All',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 添加vue3的setup，目的是添加/获取地址栏的参数
|
||||||
|
*/
|
||||||
|
setup () {
|
||||||
|
const { query } = useRoute()
|
||||||
|
const builtinId = ref(parseInt(query.categoryId) || '')
|
||||||
|
const urlPageNo = ref(parseInt(query.pageNo) || 1)
|
||||||
|
|
||||||
|
return {
|
||||||
|
builtinId,
|
||||||
|
urlPageNo
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mixins: [dataListMixin],
|
||||||
|
components: {
|
||||||
|
Loading,
|
||||||
|
cnDataList,
|
||||||
|
ReportTable,
|
||||||
|
ReportBox
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.queryGetTempData()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
builtinId (n) {
|
||||||
|
const { query } = this.$route
|
||||||
|
let newUrl = urlParamsHandler(window.location.href, query, {
|
||||||
|
categoryId: n,
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 20
|
||||||
|
})
|
||||||
|
|
||||||
|
// 点击“全部”或者首次进入界面时，不显示左侧菜单栏参数
|
||||||
|
const newQuery = JSON.parse(JSON.stringify(query)) // 深拷贝路由数据
|
||||||
|
|
||||||
|
if (n === null) {
|
||||||
|
delete newQuery.categoryId
|
||||||
|
} else {
|
||||||
|
delete newQuery.startTime
|
||||||
|
delete newQuery.endTime
|
||||||
|
delete newQuery.expandId
|
||||||
|
delete newQuery.expandPage
|
||||||
|
delete newQuery.pageNo
|
||||||
|
delete newQuery.pageSize
|
||||||
|
}
|
||||||
|
|
||||||
|
newUrl = urlParamsHandler(window.location.href, query, newQuery, 'clean')
|
||||||
|
|
||||||
|
overwriteUrl(newUrl)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
intentChange (value) {
|
||||||
|
|
||||||
|
},
|
||||||
|
categoryChange (value) {
|
||||||
|
|
||||||
|
},
|
||||||
|
queryGetTempData () {
|
||||||
|
this.builtinLeftLoading = true
|
||||||
|
axios.get(api.reportCategory, { params: { pageSize: 999 } }).then(res => {
|
||||||
|
if (res.status === 200) {
|
||||||
|
this.builtinReportLeftMenu = res.data.data.list.map(c => {
|
||||||
|
return {
|
||||||
|
...c,
|
||||||
|
config: c.config ? JSON.parse(c.config) : {}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
if (this.builtinId !== '') {
|
||||||
|
this.builtinTabs(this.builtinId, 'init')
|
||||||
|
} else {
|
||||||
|
this.getTableData()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.builtinLeftLoading = false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
tableDataSort (orderBy) {
|
||||||
|
this.searchLabel.orderBy = orderBy
|
||||||
|
this.getTableData(this.searchLabel)
|
||||||
|
},
|
||||||
|
getTableData (params) {
|
||||||
|
this.searchLabel = null
|
||||||
|
if (params) {
|
||||||
|
this.searchLabel = { ...this.searchLabel, ...params }
|
||||||
|
}
|
||||||
|
this.searchLabel = { ...this.searchLabel, ...this.pageObj }
|
||||||
|
// this.tools.loading = true
|
||||||
|
// this.builtinRightLoading = true
|
||||||
|
// this.loading = true
|
||||||
|
this.isNoData = false
|
||||||
|
// this.tableData = []
|
||||||
|
this.toggleLoading(true)
|
||||||
|
delete this.searchLabel.total
|
||||||
|
let listUrl = this.url
|
||||||
|
if (this.listUrl) {
|
||||||
|
listUrl = this.listUrl
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.builtinId !== '') {
|
||||||
|
this.searchLabel.categoryId = this.builtinId
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!this.isInit) {
|
||||||
|
axios.get(listUrl, { params: this.searchLabel }).then(response => {
|
||||||
|
if (response.status === 200) {
|
||||||
|
for (let i = 0; i < response.data.data.list.length; i++) {
|
||||||
|
response.data.data.list[i].status = response.data.data.list[i].status + ''
|
||||||
|
}
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.tableData = response.data.data.list.map(item => {
|
||||||
|
return {
|
||||||
|
...item,
|
||||||
|
config: item.config ? JSON.parse(item.config) : {}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
this.pageObj.total = response.data.data.total
|
||||||
|
this.isNoData = !this.tableData || this.tableData.length === 0
|
||||||
|
})
|
||||||
|
// TODO 回到顶部
|
||||||
|
} else {
|
||||||
|
this.isNoData = true
|
||||||
|
}
|
||||||
|
}).finally(() => {
|
||||||
|
this.toggleLoading(false)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
this.isInit = false
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 点击左侧tab页
|
||||||
|
*/
|
||||||
|
builtinTabs (id, flag) {
|
||||||
|
this.builtinId = id
|
||||||
|
if (flag === undefined) {
|
||||||
|
this.pageObj.pageNo = 1
|
||||||
|
this.pageObj.pageSize = 20
|
||||||
|
}
|
||||||
|
this.getTableData({ categoryId: id })
|
||||||
|
},
|
||||||
|
edit (u) {
|
||||||
|
this.initConfig(u)
|
||||||
|
this.object = u
|
||||||
|
this.rightBox.show = true
|
||||||
|
},
|
||||||
|
editReport () {
|
||||||
|
if (this.batchDeleteObjs.length === 0) {
|
||||||
|
this.$alert(this.$t('tip.pleaseSelectForEdit'), {
|
||||||
|
confirmButtonText: this.$t('tip.yes'),
|
||||||
|
type: 'warning'
|
||||||
|
}).catch(() => {})
|
||||||
|
} else {
|
||||||
|
const curRecord = this.batchDeleteObjs[0]
|
||||||
|
this.initConfig(curRecord)
|
||||||
|
this.object = curRecord
|
||||||
|
this.rightBox.show = true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
initConfig (u) {
|
||||||
|
if (!u.config) {
|
||||||
|
u.config = {
|
||||||
|
isRepeat: 0,
|
||||||
|
cronExpression: '',
|
||||||
|
startTime: '',
|
||||||
|
endTime: '',
|
||||||
|
queryParam: {},
|
||||||
|
schedulerConfig: {
|
||||||
|
type: 'day',
|
||||||
|
weekDates: [],
|
||||||
|
months: [],
|
||||||
|
monthDates: [],
|
||||||
|
monthWeekDates: [],
|
||||||
|
interval: 1
|
||||||
|
},
|
||||||
|
timeConfig: {
|
||||||
|
type: 'yesterday',
|
||||||
|
offset: 1,
|
||||||
|
unit: ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else if (!u.config.schedulerConfig) {
|
||||||
|
u.config.schedulerConfig = {
|
||||||
|
type: 'day',
|
||||||
|
weekDates: [],
|
||||||
|
months: [],
|
||||||
|
monthDates: [],
|
||||||
|
monthWeekDates: [],
|
||||||
|
interval: 1
|
||||||
|
}
|
||||||
|
} else if (!u.config.timeConfig) {
|
||||||
|
u.config.timeConfig = {
|
||||||
|
type: 'yesterday',
|
||||||
|
offset: 1,
|
||||||
|
unit: ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
Reference in New Issue
Block a user