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 15:31:41 +08:00
parent 5b811997cc
commit 996adc1483
14 changed files with 665 additions and 235 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,13 @@
.right-box.right-box-report {
.right-box__container {
.container__form {
.el-checkbox {
margin-right: 24px;
line-height: 28px;
}
.el-checkbox-group {
line-height: 28px;
}
.el-height.el-form-item {
margin-bottom: 18px;
.el-form-item__content {
@@ -19,6 +26,7 @@
border: 1px solid #E7EAED;
border-right: none;
line-height: 32px;
color: #333;
}
.enable-tabs:nth-of-type(4) {
border-right: 1px solid #E7EAED;
@@ -26,17 +34,16 @@
.enable-tabs.active {
border: 1px solid #1890FF;
border-radius: 2px;
color: #1890FF;
}
.enable-tabs.disable {
cursor: not-allowed;
}
}
.enable-tabs-per-month {
margin-top: 10px;
.enable-month-tab {
display: flex;
.el-checkbox {
height: 32px;
line-height: 32px;
margin-left: 14px;
}
.enable-month-tabs {
height: 32px;
width: 290px;
@@ -44,6 +51,7 @@
border: 1px solid #E7EAED;
border-right: none;
line-height: 32px;
color: #333;
}
.enable-month-tabs:nth-of-type(2) {
border-right: 1px solid #E7EAED;
@@ -51,58 +59,36 @@
.enable-month-tabs.active {
border: 1px solid #1890FF;
border-radius: 2px;
color: #1890FF;
}
.enable-month-tabs.disable {
cursor: not-allowed;
}
.el-checkbox {
padding-left: 10px;
margin-right: 0;
}
}
.enable-month-data-tab {
margin-bottom: 20px;
.enable-month-data-tabs {
.el-checkbox-group {
width: calc(100% + 20px);
.el-checkbox:nth-of-type(10) {
margin-right: 0;
}
.el-checkbox {
height: 20px;
width: 36px;
line-height: 20px;
}
}
}
.enable-month-value {
width: 393px;
height: 17px;
font-size: 12px;
color: #666666;
letter-spacing: 0;
font-weight: 400;
height: 16px;
line-height: 16px;
}
}
}
.enable-month-moon {
.enable-month-moon-custom {
height: 30px;
.enable-month-moon-custom, .enable-tabs-custom {
height: 32px;
line-height: 40px;
color: #666;
}
.enable-month-all {
.enable-month-all, .enable-month-data-tabs {
display: flex;
.enable-month-all-months.el-checkbox {
margin-right: 20px;
}
}
.enable-month-week {
display: flex;
.enable-month-week-all.el-checkbox {
margin-right: 20px;
height: 35px;
line-height: 35px;
}
.el-checkbox-group {
width: calc(100% - 52px);
height: 35px;
.el-checkbox {
line-height: 35px;
}
}
}
}
.el-input-single {
width: 200px;
@@ -111,6 +97,12 @@
.el-input__inner {
text-align: center;
}
.el-input-group__prepend, .el-input-group__append {
padding: 0 10px;
i {
font-size: 12px;
}
}
}
.right-box__select-single {
width: 430px;

427
src/components/rightBox/report/ReportBox.vue Normal file
View File

@@ -0,0 +1,427 @@
<template>
<div class="right-box right-box-report">
<div class="right-box__header">
<div class="header__title">{{editObject.id ? $t('report.editReport') : $t('report.createReport')}}</div>
<div class="header__operation">
<span v-cancel="{object: editObject, func: esc}"><i class="cn-icon cn-icon-close"></i></span>
</div>
</div>
<div class="right-box__container">
<div class="container__form">
<el-form ref="userForm" :model="editObject" :rules="rules" label-position="top" label-width="120px">
<!--name-->
<el-form-item :label="$t('report.name')" prop="name">
<el-input id="account-input-name" v-model="editObject.name" maxlength="64" placeholder="" show-word-limit size="small" type="text"></el-input>
</el-form-item>
<!--time limit-->
<el-form-item :label="$t('report.timeLimit')" prop="timeLimit">
<el-select id="account-input-roleIds"
v-model="editObject.config.timeConfig.type"
class="right-box__select"
clearable
collapse-tags
:disabled="!!editObject.id"
placeholder=""
popper-class="right-box-select-dropdown right-box-select-report "
size="small">
<template v-for="time in timeRuleList" :key="time.value">
<el-option :label="time.name" :value="time.value"></el-option>
</template>
</el-select>
<template v-if="editObject.config.timeConfig.type === 'this'">
<el-select id="reportBoxTimeUnitSelect"
:disabled="!!editObject.id"
v-model="editObject.config.timeConfig.unit"
class="right-box__select"
clearable
collapse-tags
placeholder=""
popper-class="right-box-select-dropdown right-box-select-report "
size="small"
@change="()=>{ this.$forceUpdate() }">
<template v-for="time in timeUnitList" :key="time.value">
<el-option :label="time.name" :value="time.value"></el-option>
</template>
</el-select>
</template>
<div v-else-if="editObject.config.timeConfig.type === 'last' || editObject.config.timeConfig.type === 'previous'" style="display: flex;">
<el-input v-model="editObject.config.timeConfig.offset" size="small" class="el-input-single" placeholder="" :disabled="!!editObject.id">
<template #prepend><i @click="timeOffsetHandle('m')" class="cn-icon cn-icon-a-"></i></template>
<template #append><i @click="timeOffsetHandle('p')" class="cn-icon cn-icon-a-1"></i></template>
</el-input>
<el-select id="reportBoxTimeUnitSelect"
v-model="editObject.config.timeConfig.unit"
class="right-box__select right-box__select-single"
clearable
collapse-tags
:disabled="!!editObject.id"
placeholder=""
popper-class="right-box-select-dropdown el-select-last"
size="small"
@change="()=>{ this.$forceUpdate() }">
<template v-for="time in timeUnitList" :key="time.value">
<el-option :label="time.name" :value="time.value"></el-option>
</template>
</el-select>
</div>
</el-form-item>
<!--startTime-->
<el-form-item :label="$t('report.dataStartTime')" prop="startTime" v-if="editObject.config.timeConfig.type === 'customize'">
<div class="demo-datetime-picker">
<div class="block">
<el-date-picker
style="width: 100%"
v-model="editObject.config.startTime"
size="small"
:format="dateFormat"
:disabled="!!editObject.id"
prefix-icon="cn-icon cn-icon-shijian"
type="datetime"
placeholder=""
/>
</div>
</div>
</el-form-item>
<!--endTime-->
<el-form-item :label="$t('report.dataEndTime')" prop="endTime" v-if="editObject.config.timeConfig.type === 'customize'">
<div class="demo-datetime-picker">
<div class="block">
<el-date-picker
style="width: 100%"
v-model="editObject.config.endTime"
size="small"
:format="dateFormat"
:disabled="!!editObject.id"
prefix-icon="cn-icon cn-icon-shijian"
type="datetime"
placeholder=""
/>
</div>
</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-form-item>
<!--Enable time schedule-->
<el-form-item prop="enableTimeSchedule" v-if="scheduleChecked">
<div class="enable-tab">
<div class="enable-tabs" @click="editObject.id ? null : (scheduleType = type.value)" v-for="type in scheduleTypeList" :key="type.value" :class="{'active': scheduleType === type.value, 'disable': editObject.id}">{{$t(type.name)}}</div>
</div>
<div class="enable-tabs-daily" v-if="scheduleType === scheduleTypeList[0].value">
<div class="enable-tabs-custom">{{$t('report.customEvery')}}</div>
<el-input v-model="editObject.config.schedulerConfig.interval" size="small" placeholder="" style="margin-top: 0.3125rem;" :disabled="!!editObject.id">
<template #append>{{$t('report.day')}}</template>
</el-input>
</div>
<div class="enable-tabs-weekly" v-else-if="scheduleType === scheduleTypeList[1].value" :disabled="!!editObject.id">
<!-- 每隔几周暂时隐藏 -->
<!-- <div class="enable-tabs-custom">{{$t('report.customEvery')}}</div>
<el-input v-model="editObject.config.schedulerConfig.interval" size="small" placeholder="Please input">
<template #append>{{$t('report.week')}}</template>
</el-input>-->
<el-checkbox-group v-model="editObject.config.schedulerConfig.weekDates" style="margin-top: 0.3125rem" :disabled="!!editObject.id">
<el-checkbox v-for="(item, index) in weekdayList" :key="index" :label="item.value">{{$t(item.name)}}</el-checkbox>
</el-checkbox-group>
</div>
<!-- 月 -->
<div class="enable-tabs-per-month" v-else-if="scheduleType === scheduleTypeList[2].value">
<div class="enable-month-tab">
<div class="enable-month-tabs" @click="editObject.id ? null : (monthScheduleType = 'daily')" :class="{'active': monthScheduleType === 'daily', 'disable': editObject.id}">{{$t('report.date')}}</div>
<div class="enable-month-tabs" @click="editObject.id ? null : (monthScheduleType = 'weekly')" :class="{'active': monthScheduleType === 'weekly', 'disable': editObject.id}">{{$t('report.week')}}</div>
<el-checkbox v-model="monthIsCycle" :label="$t('report.cycle')" size="large" :disabled="!!editObject.id"/>
</div>
<div class="enable-month-data-tab">
<!-- 自定义月，循环 -->
<template v-if="monthIsCycle">
<div class="enable-tabs-custom">{{$t('report.customEvery')}}</div>
<el-input v-model="editObject.config.schedulerConfig.interval" size="small" placeholder="" style="margin-top: 0.3125rem;" :disabled="!!editObject.id">
<template #append>{{$t('report.moon')}}</template>
</el-input>
</template>
<!-- 自定义月，非循环 -->
<template v-else>
<div class="enable-month-moon-custom">{{$t('report.custom')}}</div>
<div class="enable-month-all">
<el-checkbox v-model="monthCheckedAll" class="enable-month-all-months" :indeterminate="monthIsIndeterminate" @change="monthCheckAllChange" :label="$t('report.allMonths')" :disabled="!!editObject.id"/>
<el-checkbox-group v-model="editObject.config.schedulerConfig.months" @change="monthCheckChange" :disabled="!!editObject.id">
<el-checkbox v-for="(item, index) in monthList" :key="index" :label="item.value">{{$t(item.name)}}</el-checkbox>
</el-checkbox-group>
</div>
</template>
<!-- 按日期 -->
<template v-if="monthScheduleType === 'daily'">
<div class="enable-month-data-tabs">
<el-checkbox v-model="dateCheckedAll" :indeterminate="dateIsIndeterminate" @change="dateCheckAllChange" :label="$t('report.all')" size="large" :disabled="!!editObject.id"/>
<el-checkbox-group v-model="editObject.config.schedulerConfig.monthDates" @change="dateCheckChange" :disabled="!!editObject.id">
<el-checkbox v-for="item in dateList" :key="item" :label="item"/>
</el-checkbox-group>
</div>
<div class="enable-month-value">*一月，三月，五月，七月，八月，十月和12月含31天;闰年二月含29天*</div>
</template>
<!-- 按周 -->
<template v-else-if="monthScheduleType === 'weekly'">
<el-select id="account-input-roleIds"
v-model="editObject.config.schedulerConfig.monthWeekDates"
class="right-box__select"
multiple
placeholder=""
:disabled="!!editObject.id"
popper-class="right-box-select-dropdown right-box-select-report "
size="small"
@change="()=>{ this.$forceUpdate() }">
<template v-for="time in weekOptions" :key="time.value">
<el-option :label="time.name" :value="time.value"></el-option>
</template>
</el-select>
<div class="enable-month-week">
<el-checkbox v-model="monthWeekdayCheckedAll" class="enable-month-week-all" :label="$t('report.all')" :indeterminate="monthWeekdayIsIndeterminate" @change="monthWeekdayCheckAllChange" size="large" :disabled="!!editObject.id"/>
<el-checkbox-group v-model="editObject.config.schedulerConfig.weekDates" @change="monthWeekdayCheckChange" :disabled="!!editObject.id">
<el-checkbox v-for="(item, index) in weekdayList" :key="index" :label="item.value">{{$t(item.name)}}</el-checkbox>
</el-checkbox-group>
</div>
</template>
</div>
</div>
</el-form-item>
<!--生效时间-->
<el-form-item :label="$t('report.effectiveTime')" prop="schedulerStart" v-if="scheduleChecked">
<div class="demo-datetime-picker">
<div class="block">
<el-date-picker
style="width: 100%"
v-model="editObject.schedulerStart"
size="small"
:format="dateFormat"
prefix-icon="cn-icon cn-icon-shijian"
type="datetime"
placeholder=""
/>
</div>
</div>
</el-form-item>
<!--失效时间-->
<el-form-item :label="$t('report.expiryTime')" prop="schedulerEnd" v-if="scheduleChecked">
<div class="demo-datetime-picker">
<div class="block">
<el-date-picker
style="width: 100%"
v-model="editObject.schedulerEnd"
size="small"
:format="dateFormat"
prefix-icon="cn-icon cn-icon-shijian"
type="datetime"
placeholder=""
/>
</div>
</div>
</el-form-item>
<!--categoryType-->
<el-form-item :label="$t('report.categoryType')" prop="categoryType">
<el-select id="account-input-roleIds"
v-model="editObject.categoryId"
class="right-box__select"
clearable
collapse-tags
placeholder=""
:disabled="!!editObject.id"
popper-class="right-box-select-dropdown right-box-select-report "
size="small"
@change="typeChange">
<template v-for="category in categoryList" :key="category.id">
<el-option :label="category.name" :value="category.id"></el-option>
</template>
</el-select>
</el-form-item>
</el-form>
</div>
</div>
<div class="right-box__footer">
<button id="asset-edit-cancel" v-cancel="{object: editObject, func: esc}" class="footer__btn footer__btn--light">
<span>{{$t('overall.cancel')}}</span>
</button>
<button id="asset-edit-save" :class="{'footer__btn--disabled': blockOperation.save}" :disabled="blockOperation.save" class="footer__btn" @click="save">
<span>{{$t('overall.save')}}</span>
</button>
</div>
</div>
</template>
<script>
import rightBoxMixin from '@/mixins/right-box'
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'
export default {
name: 'ReportBox',
mixins: [rightBoxMixin],
props: {
categoryList: Array
},
data () {
return {
url: api.reportTemp,
storageKey,
timeRuleList: report.timeRuleList,
timeUnitList: report.timeUnitList,
scheduleTypeList: report.scheduleTypeList,
weekdayList: report.weekdayList,
monthList: report.monthList,
weekOptions: report.weekOptions,
dateList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31],
dateFormat: localStorage.getItem(storageKey.dateFormat),
scheduleChecked: false,
scheduleType: '',
monthScheduleType: 'daily', // daily weekly
monthIsCycle: true,
dateCheckedAll: false,
dateIsIndeterminate: false,
monthCheckedAll: false,
monthIsIndeterminate: false,
monthWeekdayCheckedAll: false,
monthWeekdayIsIndeterminate: false,
rules: { // 表单校验规则
name: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
]
}
}
},
watch: {
scheduleType (n, o) {
this.editObject.config.schedulerConfig.type = n
},
scheduleChecked (n) {
this.editObject.config.isScheduler = n ? 1 : 0
},
object: {
deep: true,
immediate: true,
handler (n) {
this.editObject = JSON.parse(JSON.stringify(n))
this.scheduleChecked = this.editObject.config.isScheduler === 1
if (n.config.schedulerConfig && n.config.schedulerConfig.type) {
this.scheduleType = n.config.schedulerConfig.type
}
}
}
},
methods: {
timeOffsetHandle (type) {
if (type === 'p') {
if (_.isNumber(this.editObject.config.timeConfig.offset)) {
this.editObject.config.timeConfig.offset++
} else {
this.editObject.config.timeConfig.offset = 1
}
} else if (type === 'm') {
if (_.isNumber(this.editObject.config.timeConfig.offset)) {
this.editObject.config.timeConfig.offset--
}
}
},
typeChange (id) {
},
save () {
if (this.blockOperation.save) { return }
this.blockOperation.save = true
this.$refs.userForm.validate((valid) => {
let startTime = ''
let endTime = ''
let schedulerStart = ''
let schedulerEnd = ''
if (this.editObject.config && this.editObject.config.startTime) {
startTime = getMillisecond(this.editObject.config.startTime)
}
if (this.editObject.config && this.editObject.config.endTime) {
endTime = getMillisecond(this.editObject.config.endTime)
}
if (this.editObject.schedulerStart) {
schedulerStart = getMillisecond(this.editObject.schedulerStart)
}
if (this.editObject.schedulerEnd) {
schedulerEnd = getMillisecond(this.editObject.schedulerEnd)
}
console.info(this.editObject.config)
const copyObject = _.cloneDeep(this.editObject)
if (startTime) {
copyObject.config.startTime = startTime
}
if (endTime) {
copyObject.config.endTime = endTime
}
if (schedulerStart) {
copyObject.schedulerStart = schedulerStart
}
if (schedulerEnd) {
copyObject.schedulerEnd = schedulerEnd
}
copyObject.config = JSON.stringify(copyObject.config)
if (valid) {
if (copyObject.id) {
put(this.url, copyObject).then(res => {
this.blockOperation.save = false
if (res.code === 200) {
this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
this.esc(true)
} else {
this.$message.error(res.msg)
}
})
} else {
post(this.url, copyObject).then(res => {
this.blockOperation.save = false
if (res.code === 200) {
this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
this.esc(true)
} else {
this.$message.error(res.msg)
}
})
}
} else {
this.blockOperation.save = false
return false
}
})
},
dateCheckAllChange (checked) {
this.editObject.config.schedulerConfig.monthDates = checked ? this.dateList : []
this.dateIsIndeterminate = false
},
monthCheckAllChange (checked) {
this.editObject.config.schedulerConfig.months = checked ? this.monthList.map(m => m.value) : []
this.monthIsIndeterminate = false
},
monthWeekdayCheckAllChange (checked) {
this.editObject.config.schedulerConfig.weekDates = checked ? this.weekdayList.map(m => m.value) : []
this.monthWeekdayIsIndeterminate = false
},
dateCheckChange (val) {
const checkedCount = val.length
this.dateCheckedAll = checkedCount === this.dateList.length
this.dateIsIndeterminate = checkedCount > 0 && checkedCount < this.dateList.length
},
monthCheckChange (val) {
const checkedCount = val.length
this.monthCheckedAll = checkedCount === this.monthList.length
this.monthIsIndeterminate = checkedCount > 0 && checkedCount < this.monthList.length
},
monthWeekdayCheckChange (val) {
const checkedCount = val.length
this.monthWeekdayCheckedAll = checkedCount === this.weekdayList.length
this.monthWeekdayIsIndeterminate = checkedCount > 0 && checkedCount < this.weekdayList.length
}
}
}
</script>

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

@@ -1,5 +1,5 @@
<template>
<div v-click-outside="{object: editObject, func: esc}" class="right-box right-box-report">
<div class="right-box right-box-report">
<div class="right-box__header">
<div class="header__title">{{editObject.id ? $t('report.editBuiltin') : $t('report.createBuiltin')}}</div>
<div class="header__operation">

2
src/components/rightBox/settings/ChartBox.vue
View File

@@ -1,5 +1,5 @@
<template>
<div v-click-outside="{object: editObject, func: esc}" class="right-box right-box-user">
<div class="right-box right-box-user">
<div class="right-box__header">
<div class="header__title">{{editObject.id ? $t('config.chart.edit') : $t('config.chart.add')}}</div>
<div class="header__operation">

2
src/components/rightBox/settings/GalaxyProxyBox.vue
View File

@@ -1,5 +1,5 @@
<template>
<div v-click-outside="{object: editObject, func: esc}" class="right-box">
<div class="right-box">
<div class="right-box__header">
<div class="header__title">{{editObject.id ? $t('overall.edit') : $t('overall.new')}}</div>
<div class="header__operation">

2
src/components/rightBox/settings/I18nBox.vue
View File

@@ -1,5 +1,5 @@
<template>
<div v-click-outside="{object: editObject, func: esc}" class="right-box right-box-user">
<div class="right-box right-box-user">
<div class="right-box__header">
<div class="header__title">{{editObject.id ? $t('config.i18n.edit') : $t('config.i18n.add')}}</div>
<div class="header__operation">

2
src/components/rightBox/settings/RoleBox.vue
View File

@@ -1,5 +1,5 @@
<template>
<div v-click-outside="{object: editRole, func: esc}" class="right-box right-box-role">
<div class="right-box right-box-role">
<div class="right-box__header">
<div class="header__title">{{editRole.id ? $t('config.roles.editRole') : $t('config.roles.createRole')}}</div>
<div class="header__operation">

2
src/components/rightBox/settings/UserBox.vue
View File

@@ -1,5 +1,5 @@
<template>
<div v-click-outside="{object: editObject, func: esc}" class="right-box right-box-user">
<div class="right-box right-box-user">
<div class="right-box__header">
<div class="header__title">{{editObject.id ? $t('config.user.editUser') : $t('config.user.createUser')}}</div>
<div class="header__operation">

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

@@ -1,16 +1,18 @@
<template>
<el-table
id="userTable"
id="reportTable"
ref="dataTable"
:data="tableData"
:height="height"
border
tooltip-effect="light"
:expand-row-keys="expandedIds"
@header-dragend="dragend"
@sort-change="tableDataSort"
@expand-change="dropExpandChange"
@selection-change="selectionChange"
>
<el-table-column type="expand">
<el-table-column type="expand" width="30">
<template #default="props">
<div class="down">
<loading :loading="loadingDown"></loading>
@@ -21,16 +23,20 @@
:format="format"
type="datetimerange"
range-separator="To"
start-placeholder="Start date"
end-placeholder="End date"
@change="datePickerChange(props)"
:start-placeholder="$t('detections.startTime')"
:end-placeholder="$t('detections.endTime')"
@change="datePickerChange(props.row)"
/>
</div>
<div class="expand">
<div class="expand-cell" v-for="(item, index) in downDataList" :key="index">
<div class="expand-right">
<div class="demo-progress">
<el-progress type="circle" :percentage="item.percent" :color="item.percent === 100 ? '#5cb87a' : '#1989fa'" />
<el-progress type="circle" :percentage="item.percent * 100" :color="item.percent === 1 ? '#21bf9a' : '#50b3ef'">
<template #default="{ percentage }">
<span style="font-size: 0.875rem;">{{ percentage }}%</span>
</template>
</el-progress>
</div>
</div>
<div class="expand-left">
@@ -66,7 +72,6 @@
ref="pagination"
:page-obj="pageObj"
@pageJump="pageJump"
:pageSizeForAlarm="pageObj.pageSize"
></chart-detection-pagination>
</div>
</div>
@@ -76,7 +81,7 @@
:resizable="false"
align="center"
type="selection"
width="55">
width="30">
</el-table-column>
<el-table-column
v-for="(item, index) in customTableTitles"
@@ -86,6 +91,7 @@
: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}`"
@@ -96,12 +102,18 @@
</template>
<template #default="scope" :column="item">
<span v-if="item.prop === 'timeLimit'">
{{scope.row.config.timeConfig.type}}
{{handleTimeRange(scope.row)}}
</span>
<span v-else-if="item.prop === 'utime'">
{{dateFormatByAppearance(scope.row.utime)}}
<span v-else-if="item.prop === 'timePlan'">
{{(scope.row.config && scope.row.config.schedulerConfig) || '-'}}
</span>
<span v-else>{{scope.row[item.prop]}}</span>
<span v-else-if="item.prop === 'userName'">
{{(scope.row.sysUser && scope.row.sysUser.name) || '-'}}
</span>
<span v-else-if="item.prop === 'lastExecutionTime'">
{{scope.row.lastTime ? dateFormatByAppearance(scope.row.lastTime) : '-'}}
</span>
<span v-else>{{scope.row[item.prop] || '-'}}</span>
</template>
</el-table-column>
<el-table-column
@@ -115,12 +127,6 @@
<div class="table-operation-items">
<button class="table-operation-item" @click="tableOperation(['edit', scope.row])"><i class="cn-icon cn-icon-bianji"></i></button>
<button class="table-operation-item" @click="tableOperation(['delete', scope.row])"><i class="cn-icon cn-icon-shanchu"></i></button>
<!-- <div class="table-operation-item&#45;&#45;no-border" @click="tableOperation(['rerun', scope.row])">
<loading :loading="loadingPreviewId === scope.row.id"></loading>
<svg class="icon2" aria-hidden="true" :class="{'table-operation-all-loading': loadingPreviewId}">
<use xlink:href="#cn-icon-refresh"></use>
</svg>
</div>-->
</div>
</template>
</el-table-column>
@@ -163,42 +169,44 @@ export default {
label: 'ID',
prop: 'id',
show: true,
minWidth: 80
width: 40
}, {
label: this.$t('config.user.name'),
prop: 'name',
show: true,
minWidth: 200,
sortable: 'custom'
}, {
label: this.$t('report.timeLimit'),
prop: 'timeLimit',
show: true
show: true,
minWidth: 110
}, {
label: this.$t('report.timePlan'),
prop: 'type',
prop: 'timePlan',
show: true,
minWidth: 110
}, {
label: this.$t('report.operationUserName'),
prop: 'userName',
show: true,
minWidth: 170
minWidth: 70
}, {
label: this.$t('report.resultCount'),
prop: 'resultCount',
prop: 'total',
show: true,
minWidth: 130
}, {
minWidth: 50
}, /*{
label: this.$t('report.lastModified'),
prop: 'utime',
show: true,
minWidth: 150,
sortable: 'custom'
}, {
}, */{
label: this.$t('report.lastExecutionTime'),
prop: 'lastExecutionTime',
prop: 'lastTime',
show: true,
minWidth: 200,
width: 170,
sortable: 'custom'
}
],
@@ -214,9 +222,24 @@ export default {
downDataList: [],
pageObj: {
pageNo: 1,
pageSize: 30,
pageSize: 20,
total: 0,
resetPageNo: true
},
expandedIds: []
}
},
computed: {
handleTimeRange () {
return function (row) {
let str = ''
if (row.config && row.config.timeConfig && row.config.timeConfig.type) {
str += row.config.timeConfig.type
if (row.config.timeConfig.offset) {
str += ` ${row.config.timeConfig.offset} ${row.config.timeConfig.unit}`
}
}
return str
}
}
},
@@ -243,25 +266,32 @@ export default {
this.$refs.dataTable.clearSelection()
}
},
dropExpandChange (row, rows) {
const isExpand = rows.some(t => t.id === row.id)
if (isExpand) {
this.dropDownQueryChange({ tempId: row.id })
dropExpandChange (row, expandedRows) {
this.expandedIds = []
if (expandedRows.length > 0 && row) {
this.expandedIds.push(row.id)
this.datePickerChange(row)
}
},
datePickerChange (props) {
const row = {
tempId: props.row.id,
datePickerChange (row) {
const param = {
tempId: row.id,
startTime: getSecond(new Date(this.value[0]).getTime()),
endTime: getSecond(new Date(this.value[1]).getTime())
endTime: getSecond(new Date(this.value[1]).getTime()),
...this.pageObj
}
this.dropDownQueryChange(row)
this.dropDownQueryChange(param)
},
dropDownQueryChange (row) {
dropDownQueryChange (param) {
this.loadingDown = true
get(api.reportJob, row).then(res => {
this.downDataList = []
get(api.reportJob, param).then(res => {
if (res.code === 200) {
this.downDataList = res.data.list
this.pageObj.total = res.data.total
this.$nextTick(() => {
this.$refs.dataTable.doLayout()
})
}
this.loadingDown = false
})

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

@@ -94,7 +94,7 @@ export default {
this.tableData = response.data.list.map(item => {
return {
...item,
config: JSON.parse(item.config)
config: item.config ? JSON.parse(item.config) : {}
}
})
} else {

45
src/utils/constants.js
View File

File diff suppressed because one or more lines are too long

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

@@ -1,16 +1,6 @@
import _ from 'lodash'
import { storageKey } from '@/utils/constants'
// 获取初始化时间
/* Date.prototype.setStart = function () {
this.setHours(0)
this.setMinutes(0)
this.setSeconds(0)
}
Date.prototype.setEnd = function () {
this.setHours(23)
this.setMinutes(59)
this.setSeconds(59)
} */
// 将时间转化为秒
export function getSecond (time) {
const ms = getMillisecond(time)
@@ -20,17 +10,23 @@ export function getSecond (time) {
export function getMillisecond (time) {
let ms = null
if (_.isDate(time)) {
ms = time.getTime()
ms = window.$dayJs.tz(new Date(time)).valueOf()
} else if (_.isNumber(time)) {
const timeStr = _.toString(time)
const difference = timeStr.length - 13
if (difference >= 0) {
ms = timeStr.slice(0, 13)
ms = window.$dayJs.tz(new Date(Number(timeStr.slice(0, 13)))).valueOf()
} else {
ms = Math.floor(time * (10 ** (0 - difference)))
ms = window.$dayJs.tz(new Date(Math.floor(time * (10 ** (0 - difference))))).valueOf()
}
} else if (_.isString(time)) {
try {
ms = window.$dayJs.tz(new Date(time)).valueOf()
} catch (e) {
ms = null
}
}
return ms ? Number(ms) : null
return ms || null
}
// 初始化日期
export function getNowTime (interval) {

68
src/utils/tools.js
View File

@@ -277,74 +277,6 @@ export const cancelWithChange = {
delete el.__vueDomClick__
}
}
/* clickOutside指令 */
const exceptClassName = ['prevent-click-outside'] // clickOutside排除的class(白名单)
export const clickOutside = {
// 初始化指令
beforeMount (el, binding) {
/* let oldValue
try {
oldValue = JSON.parse(JSON.stringify(binding.value.object))
} catch (e) {
} */
function documentHandler (e) {
if (el.contains(e.target)) {
return false
} else {
let flag = true
const path = e.path || (e.composedPath && e.composedPath())
// eslint-disable-next-line no-labels
top: for (let i = 0; i < path.length; i++) {
for (let j = 0; j < exceptClassName.length; j++) {
if (path[i].className && path[i].className.indexOf(exceptClassName[j]) !== -1) {
flag = false
// eslint-disable-next-line no-labels
break top
}
}
}
if (!flag) {
return false
}
binding.value()
/* if (oldValue) {
const newValue = JSON.parse(JSON.stringify(binding.value.oldValue))
if (!isEqual(oldValue, newValue)) {
ElMessageBox.confirm('Confirm？', { // TODO 国际化
confirmButtonText: 'Yes', // TODO 国际化
cancelButtonText: 'No', // TODO 国际化
type: 'warning'
}).then(() => {
if (binding.value.func) {
binding.value.func()
}
})
} else {
binding.value.func()
}
} else {
if (binding.arg) {
binding.value(e, binding.arg)
} else {
if (binding.value) {
binding.value(e)
}
}
} */
}
}
// 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
el.__vueClickOutside__ = documentHandler
document.addEventListener('click', documentHandler)
},
unmounted (el, binding) {
// 解除事件监听
document.removeEventListener('click', el.__vueClickOutside__)
delete el.__vueClickOutside__
}
}
function noDataDomFactory () {
const noDataDom = document.createElement('div')

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

@@ -58,10 +58,9 @@
:with-header="false"
:size="700"
destroy-on-close>
<builtin-report-box
<report-box
:object="object"
:check-week-list-data="checkWeekListData"
:check-months-list-data="checkMonthsListData"
:category-list="builtinReportLeftMenu"
@close="closeRightBox"
/>
</el-drawer>
@@ -75,7 +74,7 @@ import builtinReportTable from '@/components/table/report/reportTestTable'
import cnDataList from '@/components/table/CnDataList'
import dataListMixin from '@/mixins/data-list'
import { api } from '@/utils/api'
import builtinReportBox from '@/components/rightBox/report/reportTestBox'
import ReportBox from '@/components/rightBox/report/ReportBox'
export default {
name: 'Report',
@@ -89,43 +88,38 @@ export default {
id: '',
name: '',
type: '',
// config: '',
source: '',
cTime: '',
uTime: '',
htmContent: '',
remark: '',
uniq: '',
config: {
isRepeat: 0,
isScheduler: 0,
cronExpression: '',
startTime: '',
endTime: '',
queryConfig: {
key1: '',
key2: ''
},
queryConfig: {},
schedulerConfig: {
// type: '',
week_dates: [1, 2, 3, 4, 5, 6, 7],
months: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
month_dates: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31],
month_week_dates: [0, 1, 2, 3, 4, 5, 6],
type: 'day',
weekDates: [],
months: [],
monthDates: [],
monthWeekDates: [],
interval: 1
},
timeConfig: {
type: 'day',
offset: 0,
type: 'yesterday',
offset: 1,
unit: ''
}
},
schedulerStart: '',
schedulerEnd: '',
category_id: 1
categoryId: ''
},
checkWeekListData: [
'report.sunday',
'report.onMonday',
'report.monday',
'report.tuesday',
'report.wednesday',
'report.thursday',
@@ -153,41 +147,63 @@ export default {
components: {
cnDataList,
builtinReportTable,
builtinReportBox
ReportBox
},
methods: {
queryGetTempData () {
console.log(api.reportCategory)
get(api.reportCategory).then(res => {
this.builtinReportLeftMenu = [
{ id: 1, name: 'Tencent网络服务质量监测报告(IDC精简版)' },
{ id: 2, name: '网络服务质量监测报告(IDC精简版)' },
{ id: 3, name: '出入口整体流量监测报告' },
{ id: 4, name: '出入口字节跳动流量监测报告' }
]
if (res.code === 200) {
this.builtinReportLeftMenu = res.data.list
}
})
},
builtinTabs (id) {
this.getTableData({ tempId: id })
this.getTableData({ categoryId: id })
this.builtinId = id
},
edit (u) {
get(this.url, { id: u.id, name: u.name }).then(response => {
if (response.code === 200) {
let dataList = []
dataList = response.data.list.map(item => {
return {
...item,
config: JSON.parse(item.config)
}
})
this.object = dataList[0]
this.initConfig(u)
this.object = u
this.rightBox.show = true
},
initConfig (u) {
if (!u.config) {
u.config = {
isRepeat: 0,
cronExpression: '',
startTime: '',
endTime: '',
queryConfig: {},
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: ''
}
}
})
}
},
mounted () {