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

CN-599 feat: 新报告功能

Browse Source
This commit is contained in:
chenjinsong
2022-06-08 18:32:52 +08:00
parent 996adc1483
commit e516258a2a
9 changed files with 131 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/assets/css/common/right-box-common.scss
View File

@@ -62,10 +62,6 @@
}
}
.el-form-item__content {
.el-input-group--prepend {
width: 626px;
height: 32px;
}
.input-box {
.el-textarea {
.el-textarea__inner {
@@ -264,14 +260,7 @@
.right-box__select {
width: 100%;
}
.right-box-select-dropdown {
width: 625px;
}
.right-box-select-report.right-box-select-dropdown {
width: 640px;
}
.el-select-last.right-box-select-dropdown {
width: 434px;
left: 1698px;
}
.limit-height .el-cascader-menu {

3
src/assets/css/components/components/rightBox/report/builtinReportBox.scss
View File

@@ -91,7 +91,7 @@
display: flex;
}
.el-input-single {
width: 200px;
width: 140px;
height: 32px;
margin-top: 10px;
.el-input__inner {
@@ -105,7 +105,6 @@
}
}
.right-box__select-single {
width: 430px;
height: 32px;
margin: 10px 0 0 10px;
}

71
src/components/rightBox/report/ReportBox.vue
View File

@@ -18,7 +18,6 @@
<el-select id="account-input-roleIds"
v-model="editObject.config.timeConfig.type"
class="right-box__select"
clearable
collapse-tags
:disabled="!!editObject.id"
placeholder=""
@@ -66,7 +65,7 @@
</div>
</el-form-item>
<!--startTime-->
<el-form-item :label="$t('report.dataStartTime')" prop="startTime" v-if="editObject.config.timeConfig.type === 'customize'">
<el-form-item :label="$t('report.dataStartTime')" prop="config.startTime" v-if="editObject.config.timeConfig.type === 'customize'">
<div class="demo-datetime-picker">
<div class="block">
<el-date-picker
@@ -83,7 +82,7 @@
</div>
</el-form-item>
<!--endTime-->
<el-form-item :label="$t('report.dataEndTime')" prop="endTime" v-if="editObject.config.timeConfig.type === 'customize'">
<el-form-item :label="$t('report.dataEndTime')" prop="config.endTime" v-if="editObject.config.timeConfig.type === 'customize'">
<div class="demo-datetime-picker">
<div class="block">
<el-date-picker
@@ -100,7 +99,7 @@
</div>
</el-form-item >
<el-form-item class="el-height">
<el-checkbox v-model="scheduleChecked" :disabled="editObject.config.timeConfig.type === 'customize' || editObject.id" :label="$t('report.enableTimeSchedule')" size="large" />
<el-checkbox v-model="scheduleChecked" :disabled="editObject.config.timeConfig.type === 'customize' || !!editObject.id" :label="$t('report.enableTimeSchedule')" size="large" />
</el-form-item>
<!--Enable time schedule-->
<el-form-item prop="enableTimeSchedule" v-if="scheduleChecked">
@@ -170,7 +169,7 @@
size="small"
@change="()=>{ this.$forceUpdate() }">
<template v-for="time in weekOptions" :key="time.value">
<el-option :label="time.name" :value="time.value"></el-option>
<el-option :label="$t(time.name)" :value="time.value"></el-option>
</template>
</el-select>
<div class="enable-month-week">
@@ -216,7 +215,7 @@
</div>
</el-form-item>
<!--categoryType-->
<el-form-item :label="$t('report.categoryType')" prop="categoryType">
<el-form-item :label="$t('report.categoryType')" prop="categoryId">
<el-select id="account-input-roleIds"
v-model="editObject.categoryId"
class="right-box__select"
@@ -232,6 +231,12 @@
</template>
</el-select>
</el-form-item>
<!-- 参数 -->
<el-form-item :label="$t('config.operationlog.params')" prop="params" v-if="categoryParams.length > 0">
<el-input v-model="param.value" placeholder="" v-for="(param, index) in categoryParams" :key="index" size="small" style="vertical-align: unset;" :disabled="!!editObject.id">
<template #prepend>{{param.key}}</template>
</el-input>
</el-form-item>
</el-form>
</div>
</div>
@@ -252,13 +257,14 @@ import { storageKey, report } from '@/utils/constants'
import { api } from '@/utils/api'
import _ from 'lodash'
import { post, put } from '@/utils/http'
import { getMillisecond } from '@/utils/date-util'
import { dateFormat, getMillisecond } from '@/utils/date-util'
export default {
name: 'ReportBox',
mixins: [rightBoxMixin],
props: {
categoryList: Array
categoryList: Array,
currentCategoryId: Number
},
data () {
return {
@@ -287,9 +293,23 @@ export default {
monthWeekdayCheckedAll: false,
monthWeekdayIsIndeterminate: false,
categoryParams: [],
rules: { // 表单校验规则
name: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
],
categoryId: [
{ required: true, message: this.$t('validate.required'), trigger: 'change' }
],
schedulerStart: [
{ required: true, message: this.$t('validate.required'), trigger: 'change' }
],
'config.startTime': [
{ required: true, message: this.$t('validate.required'), trigger: 'change' }
],
'config.endTime': [
{ required: true, message: this.$t('validate.required'), trigger: 'change' }
]
}
}
@@ -301,6 +321,18 @@ export default {
scheduleChecked (n) {
this.editObject.config.isScheduler = n ? 1 : 0
},
'editObject.categoryId': {
handler (n) {
const category = this.categoryList.find(c => c.id === n)
if (category && category.config && category.config.queryParam) {
this.categoryParams = Object.keys(category.config.queryParam).map(key => {
return { key: key, value: category.config.queryParam[key] }
})
} else {
this.categoryParams = []
}
}
},
object: {
deep: true,
immediate: true,
@@ -310,6 +342,21 @@ export default {
if (n.config.schedulerConfig && n.config.schedulerConfig.type) {
this.scheduleType = n.config.schedulerConfig.type
}
if (n.schedulerStart) {
this.editObject.schedulerStart = dateFormat(this.editObject.schedulerStart, this.dateFormat)
}
if (n.schedulerEnd) {
this.editObject.schedulerEnd = dateFormat(this.editObject.schedulerEnd, this.dateFormat)
}
if (n.id) {
if (n.config.queryParam && Object.keys(n.config.queryParam).length > 0) {
this.categoryParams = Object.keys(n.config.queryParam).map(key => {
return { key: key, value: n.config.queryParam[key] }
})
}
} else if (this.currentCategoryId) {
this.editObject.categoryId = this.currentCategoryId
}
}
}
},
@@ -352,7 +399,6 @@ export default {
schedulerEnd = getMillisecond(this.editObject.schedulerEnd)
}
console.info(this.editObject.config)
const copyObject = _.cloneDeep(this.editObject)
if (startTime) {
copyObject.config.startTime = startTime
@@ -366,6 +412,13 @@ export default {
if (schedulerEnd) {
copyObject.schedulerEnd = schedulerEnd
}
if (this.categoryParams.length > 0) {
const queryParam = {}
this.categoryParams.forEach(p => {
queryParam[p.key] = p.value
})
copyObject.config.queryParam = queryParam
}
copyObject.config = JSON.stringify(copyObject.config)
if (valid) {
if (copyObject.id) {

8
src/components/rightBox/report/reportTestBox.vue
View File

@@ -228,14 +228,6 @@
</template>
</el-select>
</el-form-item>
<!-- <el-form-item :label="$t('report.categoryType')" prop="categoryType">-->
<!-- <el-input v-model="editObject.config.queryConfig.key1" placeholder="" size="small">-->
<!-- <template #prepend>Key</template>-->
<!-- </el-input>-->
<!-- <el-input v-model="editObject.config.queryConfig.key2" placeholder="" size="small">-->
<!-- <template #prepend>Key</template>-->
<!-- </el-input>-->
<!-- </el-form-item>-->
</el-form>
</div>
</div>

22
src/components/table/report/reportTestTable.vue
View File

@@ -4,9 +4,10 @@
ref="dataTable"
:data="tableData"
:height="height"
:expand-row-keys="expandedIds"
row-key="id"
border
tooltip-effect="light"
:expand-row-keys="expandedIds"
@header-dragend="dragend"
@sort-change="tableDataSort"
@expand-change="dropExpandChange"
@@ -150,7 +151,7 @@ import { del, get } from '@/utils/http'
import { api } from '@/utils/api'
import { storageKey } from '@/utils/constants'
import { ref } from 'vue'
import { getSecond } from '@/utils/date-util'
import { dateFormatToUTC } from '@/utils/date-util'
import chartDetectionPagination from '@/views/charts/charts/chartDetectionPagination'
export default {
name: 'builtinReportTable',
@@ -196,13 +197,7 @@ export default {
prop: 'total',
show: true,
minWidth: 50
}, /*{
label: this.$t('report.lastModified'),
prop: 'utime',
show: true,
minWidth: 150,
sortable: 'custom'
}, */{
}, {
label: this.$t('report.lastExecutionTime'),
prop: 'lastTime',
show: true,
@@ -276,8 +271,8 @@ export default {
datePickerChange (row) {
const param = {
tempId: row.id,
startTime: getSecond(new Date(this.value[0]).getTime()),
endTime: getSecond(new Date(this.value[1]).getTime()),
startTime: dateFormatToUTC(this.value[0]),
endTime: dateFormatToUTC(this.value[1]),
...this.pageObj
}
this.dropDownQueryChange(param)
@@ -314,7 +309,10 @@ export default {
})
},
pageJump (val) {
this.pageObj.pageNo = val
if (this.expandedIds.length > 0) {
this.datePickerChange({ id: this.expandedIds[0] })
}
}
},
setup () {

11
src/mixins/data-list.js
View File

@@ -90,16 +90,7 @@ export default {
for (let i = 0; i < response.data.list.length; i++) {
response.data.list[i].status = response.data.list[i].status + ''
}
if (this.tableId === 'builtinReportTable') {
this.tableData = response.data.list.map(item => {
return {
...item,
config: item.config ? JSON.parse(item.config) : {}
}
})
} else {
this.tableData = response.data.list
}
this.tableData = response.data.list
this.pageObj.total = response.data.total
// TODO 回到顶部
}

8
src/utils/constants.js
View File

@@ -457,10 +457,10 @@ export const report = {
{ name: 'report.december', value: 12 }
],
weekOptions: [
{ name: '1', value: 1 },
{ name: '2', value: 2 },
{ name: '3', value: 3 },
{ name: '4', value: 4 },
{ name: 'report.1stWeek', value: 1 },
{ name: 'report.2ndWeek', value: 2 },
{ name: 'report.3rdWeek', value: 3 },
{ name: 'report.4thWeek', value: 4 },
{ name: 'report.lastWeek', value: 5 }
]
}

16
src/utils/date-util.js
View File

@@ -44,9 +44,9 @@ export function rTime (date) {
// 时间格式转换
export function dateFormat (date, format = 'YYYY-MM-DD HH:mm:ss') {
let d = date
// date不是数字，则视为时间字符串，例如2022-02-22 22:22
// date不是数字，则视为utc时区的时间字符串，例如2022-02-22 22:22
if (isNaN(date)) {
d = window.$dayJs(date).valueOf() + parseInt(localStorage.getItem('cn-timezone-local-offset'))
d = window.$dayJs(date).valueOf() + parseInt(localStorage.getItem(storageKey.timezoneLocalOffset)) * 3600000
} else {
d = getMillisecond(date)
}
@@ -57,3 +57,15 @@ export function dateFormat (date, format = 'YYYY-MM-DD HH:mm:ss') {
export function dateFormatByAppearance (date) {
return dateFormat(date, localStorage.getItem(storageKey.dateFormat))
}
// 带时区的日期转为utc日期
export function dateFormatToUTC (date, format = 'YYYY-MM-DD HH:mm:ss') {
let d = date
// date不是数字，则视为utc时区的时间字符串，例如2022-02-22 22:22
if (isNaN(date)) {
d = window.$dayJs(date).valueOf() - parseInt(localStorage.getItem(storageKey.timezoneLocalOffset)) * 3600000
} else {
d = getMillisecond(date)
}
d = window.$dayJs(d).tz().format(format)
return d
}

44
src/views/report/reportTest.vue
View File

@@ -61,6 +61,7 @@
<report-box
:object="object"
:category-list="builtinReportLeftMenu"
:current-category-id="builtinId"
@close="closeRightBox"
/>
</el-drawer>
@@ -88,7 +89,7 @@ export default {
id: '',
name: '',
type: '',
source: '',
source: 'session_record_cn',
cTime: '',
uTime: '',
remark: '',
@@ -98,7 +99,7 @@ export default {
cronExpression: '',
startTime: '',
endTime: '',
queryConfig: {},
queryParam: {},
schedulerConfig: {
type: 'day',
weekDates: [],
@@ -110,7 +111,7 @@ export default {
timeConfig: {
type: 'yesterday',
offset: 1,
unit: ''
unit: 'hour'
}
},
schedulerStart: '',
@@ -153,7 +154,40 @@ export default {
queryGetTempData () {
get(api.reportCategory).then(res => {
if (res.code === 200) {
this.builtinReportLeftMenu = res.data.list
this.builtinReportLeftMenu = res.data.list.map(c => {
return {
...c,
config: c.config ? JSON.parse(c.config) : {}
}
})
}
})
},
getTableData (params) {
if (params) {
this.searchLabel = { ...this.searchLabel, ...params }
}
this.searchLabel = { ...this.searchLabel, ...this.pageObj }
this.tools.loading = true
delete this.searchLabel.total
let listUrl = this.url
if (this.listUrl) {
listUrl = this.listUrl
}
get(listUrl, this.searchLabel).then(response => {
this.tools.loading = false
if (response.code === 200) {
for (let i = 0; i < response.data.list.length; i++) {
response.data.list[i].status = response.data.list[i].status + ''
}
this.tableData = response.data.list.map(item => {
return {
...item,
config: item.config ? JSON.parse(item.config) : {}
}
})
this.pageObj.total = response.data.total
// TODO 回到顶部
}
})
},
@@ -173,7 +207,7 @@ export default {
cronExpression: '',
startTime: '',
endTime: '',
queryConfig: {},
queryParam: {},
schedulerConfig: {
type: 'day',
weekDates: [],