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:
@changcode
2022-06-01 16:33:54 +08:00
parent 0d9b8ddb4d
commit a8b2d9e092
14 changed files with 1082 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
src/assets/css/components/components/rightBox/report/builtinReportBox.scss Normal file
View File

@@ -0,0 +1,113 @@
.right-box.right-box-report {
.right-box__container {
.container__form {
.enable-tab {
display: flex;
.enable-tabs {
height: 32px;
width: 160px;
text-align: center;
border: 1px solid #E7EAED;
border-right: none;
line-height: 32px;
}
.enable-tabs:nth-of-type(4) {
border-right: 1px solid #E7EAED;
}
.enable-tabs.active {
border: 1px solid #1890FF;
border-radius: 2px;
}
}
.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;
text-align: center;
border: 1px solid #E7EAED;
border-right: none;
line-height: 32px;
}
.enable-month-tabs:nth-of-type(2) {
border-right: 1px solid #E7EAED;
}
.enable-month-tabs.active {
border: 1px solid #1890FF;
border-radius: 2px;
}
}
.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;
}
}
}
.enable-month-moon {
.enable-month-moon-custom {
height: 30px;
}
.enable-month-all {
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;
height: 32px;
margin-top: 10px;
.el-input__inner {
text-align: center;
}
}
.right-box__select-single {
width: 430px;
height: 32px;
margin: 10px 0 0 10px;
}
}
}
}

1
src/assets/css/components/index.scss
View File

@@ -43,6 +43,7 @@
@import './views/charts/chartMap';
@import 'views/charts/chartRelationShipList';
@import './views/report/builtinReport';
@import './components/rightBox/report/builtinReportBox';
//@import '../chart';

86
src/assets/css/components/views/report/builtinReport.scss
View File

@@ -39,12 +39,72 @@
.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-table__expanded-cell {
.expand {
width: 100%;
display: flex;
justify-content: center;
.expand-cell {
display: flex;
background: #FFFFFF;
border: 1px solid #E7EAED;
border-radius: 2px;
margin-right: 16px;
width: 300px;
height: 97px;
.expand-right {
background: #F9F9F9;
border-radius: 2px;
width: 97px;
height: 95px;
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;
}
.expand-time {
font-size: 12px;
color: #999999;
font-weight: 400;
margin-bottom: 4px;
}
.expand-icon {
display: flex;
justify-content: space-evenly;
margin: 0 8px;
font-size: 14px;
}
}
}
}
}
}
}
.el-table__header th:first-of-type .el-checkbox:last-of-type {
border-left: none;
display: none;
}
.table-operation-all {
width: 300px;
position: absolute;
@@ -81,7 +141,6 @@
border-radius: 2px;
line-height: 21px;
cursor: pointer;
position: relative;
span {
margin: 3px 8px;
font-size: 12px;
@@ -110,6 +169,8 @@
.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;
@@ -119,21 +180,6 @@
justify-content: center;
flex-direction: column;
position: relative;
.chart__loading {
.el-icon-loading {
font-size: 12px;
left: calc(50% - 6px);
top: calc(50% - 6px);
}
}
.icon {
height: 25px;
width: 25px;
}
.icon2 {
height: 16px;
width: 16px;
}
}
}
}

38
src/assets/css/font/iconfont.css
View File

@@ -1,8 +1,8 @@
@font-face {
font-family: "cn-icon"; /* Project id 2614877 */
src: url('iconfont.woff2?t=1652249170229') format('woff2'),
url('iconfont.woff?t=1652249170229') format('woff'),
url('iconfont.ttf?t=1652249170229') format('truetype');
src: url('iconfont.woff2?t=1653978200371') format('woff2'),
url('iconfont.woff?t=1653978200371') format('woff'),
url('iconfont.ttf?t=1653978200371') format('truetype');
}
.cn-icon {
@@ -13,6 +13,38 @@
-moz-osx-font-smoothing: grayscale;
}
.cn-icon-a-:before {
content: "\e77b";
}
.cn-icon-a-1:before {
content: "\e781";
}
.cn-icon-bianji:before {
content: "\e77c";
}
.cn-icon-chuangjian:before {
content: "\e77d";
}
.cn-icon-shijian:before {
content: "\e77e";
}
.cn-icon-shijianjihua:before {
content: "\e77f";
}
.cn-icon-shanchu:before {
content: "\e780";
}
.cn-icon-a-allclear:before {
content: "\e779";
}
.cn-icon-org:before {
content: "\e770";
}

2
src/assets/css/font/iconfont.js
View File

File diff suppressed because one or more lines are too long

BIN
src/assets/css/font/iconfont.ttf
View File

Binary file not shown.

BIN
src/assets/css/font/iconfont.woff
View File

Binary file not shown.

BIN
src/assets/css/font/iconfont.woff2
View File

Binary file not shown.

389
src/components/rightBox/report/reportTestBox.vue Normal file
View File

@@ -0,0 +1,389 @@
<template>
<div v-click-outside="{object: editObject, func: esc}" 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">
<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">
<template v-if="tabNum === 2">
<el-select id="account-input-roleIds"
v-model="editObject.id"
class="right-box__select"
clearable
collapse-tags
placeholder="select"
popper-class="right-box-select-dropdown prevent-clickoutside"
size="small"
@change="()=>{ this.$forceUpdate() }">
<template v-for="time in perMonthList" :key="time.value">
<el-option :label="time.name" :value="time.value"></el-option>
</template>
</el-select>
</template>
<el-select id="account-input-roleIds"
v-model="editObject.name"
class="right-box__select"
clearable
collapse-tags
placeholder=""
popper-class="right-box-select-dropdown prevent-clickoutside"
size="small"
@change="()=>{ this.$forceUpdate() }">
<template v-for="time in timeLimit" :key="time.value">
<el-option :label="time.name" :value="time.value"></el-option>
</template>
</el-select>
<template v-if="tabNum === 3">
<el-input v-model="single" @change="singleChange" size="small" class="el-input-single" placeholder="Please input">
<template #prepend><i @click="add" class="cn-icon cn-icon-a-1"></i></template>
<template #append><i @click="piece" class="cn-icon cn-icon-a-"></i></template>
</el-input>
<el-select id="account-input-roleIds"
v-model="editObject.id"
class="right-box__select right-box__select-single"
clearable
collapse-tags
placeholder="1"
popper-class="right-box-select-dropdown prevent-clickoutside"
size="small"
@change="()=>{ this.$forceUpdate() }">
<template v-for="time in timeLimit" :key="time.value">
<el-option :label="time.name" :value="time.value"></el-option>
</template>
</el-select>
</template>
</el-form-item>
<!--Enable time schedule-->
<el-form-item prop="enableTimeSchedule">
<el-checkbox v-model="scheduleChecked" :label="$t('report.enableTimeSchedule')" size="large" />
<div class="enable-tab">
<div class="enable-tabs" @click="enableTabs(0)" :class="{'active': tabNum === 0}">{{$t('report.daily')}}</div>
<div class="enable-tabs" @click="enableTabs(1)" :class="{'active': tabNum === 1}">{{$t('report.weekly')}}</div>
<div class="enable-tabs" @click="enableTabs(2)" :class="{'active': tabNum === 2}">{{$t('report.perMonth')}}</div>
<div class="enable-tabs" @click="enableTabs(3)" :class="{'active': tabNum === 3}">{{$t('report.single')}}</div>
</div>
<div class="enable-tabs-daily" v-if="tabNum === 0">
<div class="enable-tabs-custom">{{$t('report.customEvery')}}</div>
<el-input v-model="day" size="small" placeholder="Please input">
<template #append>{{$t('report.day')}}</template>
</el-input>
</div>
<div class="enable-tabs-weekly" v-if="tabNum === 1">
<div class="enable-tabs-custom">{{$t('report.customEvery')}}</div>
<el-input v-model="week" size="small" placeholder="Please input">
<template #append>{{$t('report.week')}}</template>
</el-input>
<el-checkbox-group v-model="checkWeeklyList">
<el-checkbox v-for="(item, index) in citiesWeekly" :key="index" :label="item" />
</el-checkbox-group>
</div>
<div class="enable-tabs-per-month" v-if="tabNum === 2">
<div class="enable-month-tab">
<div class="enable-month-tabs" @click="enableMonthTabs(0)" :class="{'active': tabMonthNum === 0}">{{$t('report.date')}}</div>
<div class="enable-month-tabs" @click="enableMonthTabs(1)" :class="{'active': tabMonthNum === 1}">{{$t('report.week')}}</div>
<el-checkbox v-model="perMonthChecked" @change="checkboxChange" :label="$t('report.cycle')" size="large" />
</div>
<div class="enable-month-data-tab" v-if="tabMonthNum === 0">
<div class="enable-tabs-custom">{{$t('report.customEvery')}}</div>
<el-input v-model="moon" size="small" placeholder="Please input">
<template #append>{{$t('report.moon')}}</template>
</el-input>
<div class="enable-month-data-tabs">
<div>
<el-checkbox v-model="dateCheckedAll" :indeterminate="isIndeterminateDate" @change="checkAllChange" :label="$t('report.all')" size="large" />
</div>
<el-checkbox-group v-model="dateList" @change="checkedCitiesChange">
<el-checkbox v-for="(item, index) in citiesDate" :key="index" :label="item" />
</el-checkbox-group>
</div>
<div class="enable-month-value">*一月，三月，五月，七月，八月，十月和12月含31天;闰年二月含29天*</div>
</div>
<div class="enable-month-moon" v-if="tabMonthNum === 1">
<template v-if="perMonthChecked">
<div class="enable-month-moon-custom">{{$t('report.custom')}}</div>
<div class="enable-month-all">
<el-checkbox v-model="allMonthsChecked" class="enable-month-all-months" :indeterminate="isIndeterminateMonths" @change="checkMonthsAllChange" :label="$t('report.allMonths')" size="large" />
<el-checkbox-group v-model="checkMonthsList">
<el-checkbox v-for="(item, index) in citiesMonths" :key="index" :label="item" @change="checkedMonthsCitiesChange" />
</el-checkbox-group>
</div>
</template>
<template v-else>
<div class="enable-tabs-custom">{{$t('report.customEvery')}}</div>
<el-input v-model="moon" size="small" placeholder="Please input">
<template #append>{{$t('report.moon')}}</template>
</el-input>
</template>
<el-select id="account-input-roleIds"
v-model="editObject.id"
class="right-box__select"
multiple
placeholder="Select"
popper-class="right-box-select-dropdown prevent-clickoutside"
size="small"
@change="()=>{ this.$forceUpdate() }">
<template v-for="time in timeLimit" :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="checkedAll" class="enable-month-week-all" :label="$t('report.all')" :indeterminate="isIndeterminateWeek" @change="checkWeekAllChange" size="large" />
<el-checkbox-group v-model="checkWeekList" >
<el-checkbox v-for="(item, index) in citiesWeek" @change="checkedWeekCitiesChange" :key="index" :label="item" />
</el-checkbox-group>
</div>
</div>
</div>
</el-form-item>
<!--startTime-->
<el-form-item :label="$t('report.startTime')" prop="startTime">
<div class="demo-datetime-picker">
<div class="block">
<el-date-picker
style="width: 100%"
v-model="editObject.startTime"
size="small"
:format="format"
prefix-icon="cn-icon cn-icon-shijian"
type="datetime"
placeholder="Select date and time"
/>
</div>
</div>
</el-form-item>
<!--endTime-->
<el-form-item :label="$t('report.endTime')" prop="endTime">
<div class="demo-datetime-picker">
<div class="block">
<el-date-picker
style="width: 100%"
v-model="editObject.endTime"
size="small"
:format="format"
prefix-icon="cn-icon cn-icon-shijian"
type="datetime"
placeholder="Select date and time"
/>
</div>
</div>
</el-form-item>
<!--categoryType-->
<el-form-item :label="$t('report.categoryType')" prop="categoryType">
<el-select id="account-input-roleIds"
v-model="editObject.type"
class="right-box__select"
clearable
collapse-tags
placeholder=""
popper-class="right-box-select-dropdown prevent-clickoutside"
size="small"
@change="()=>{ this.$forceUpdate() }">
<template v-for="time in timeLimit" :key="time.value">
<el-option :label="time.name" :value="time.value"></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 { get, post, put } from '@/utils/http'
import { themeData, langData, storageKey, timeLimit, perMonthList } from '@/utils/constants'
import { api } from '@/utils/api'
import { ref } from 'vue'
export default {
name: 'builtinReportBox',
mixins: [rightBoxMixin],
props: {
checkMonthsListData: {
type: Array
},
checkWeekListData: {
type: Array
}
},
data () {
return {
url: api.user,
loginName: localStorage.getItem(storageKey.username),
format: localStorage.getItem(storageKey.dateFormat),
rules: { // 表单校验规则
name: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
]
},
scheduleChecked: false,
perMonthChecked: false,
tabNum: '',
tabMonthNum: '',
single: 0,
themeData,
langData,
timeLimit,
perMonthList
}
},
setup (props) {
// weekly
const checkWeeklyList = ref([props.checkWeekListData[0]])
let citiesWeekly = ref([])
citiesWeekly = props.checkWeekListData
// week
const checkWeekList = ref([props.checkWeekListData[0]])
const checkedAll = ref(false)
const isIndeterminateWeek = ref(true)
const citiesWeek = ref([])
citiesWeek.value = props.checkWeekListData
const checkWeekAllChange = (val) => {
checkWeekList.value = val ? citiesWeek.value : []
isIndeterminateWeek.value = false
}
const checkedWeekCitiesChange = (val) => {
const checkedCount = val.length
checkedAll.value = checkedCount === citiesWeek.value.length
isIndeterminateWeek.value = checkedCount > 0 && checkedCount < citiesWeek.value.length
}
// date
const dateList = ref([])
const dateCheckedAll = ref(false)
const isIndeterminateDate = ref(true)
const citiesDate = [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]
const checkAllChange = (val) => {
dateList.value = val ? citiesDate : []
isIndeterminateDate.value = false
}
const checkedCitiesChange = (val) => {
const checkedCount = val.length
dateCheckedAll.value = checkedCount === citiesDate.length
isIndeterminateDate.value = checkedCount > 0 && checkedCount < citiesDate.length
}
// months
const checkMonthsList = ref([props.checkMonthsListData[0]])
const allMonthsChecked = ref(false)
const isIndeterminateMonths = ref(true)
const citiesMonths = ref([])
citiesMonths.value = props.checkMonthsListData
const checkMonthsAllChange = (val) => {
checkMonthsList.value = val ? citiesMonths.value : []
isIndeterminateMonths.value = false
}
const checkedMonthsCitiesChange = (val) => {
const checkedCount = val.length
allMonthsChecked.value = checkedCount === citiesMonths.value.length
isIndeterminateMonths.value = checkedCount > 0 && checkedCount < citiesMonths.value.length
}
return {
// weekly
checkWeeklyList,
citiesWeekly,
// week
checkWeekList,
citiesWeek,
checkedAll,
isIndeterminateWeek,
checkWeekAllChange,
checkedWeekCitiesChange,
// date
dateList,
citiesDate,
dateCheckedAll,
isIndeterminateDate,
checkAllChange,
checkedCitiesChange,
// months
checkMonthsList,
citiesMonths,
allMonthsChecked,
isIndeterminateMonths,
checkMonthsAllChange,
checkedMonthsCitiesChange
}
},
mounted () {
},
methods: {
save () {
if (this.blockOperation.save) { return }
this.blockOperation.save = true
this.$refs.userForm.validate((valid) => {
if (valid) {
if (this.editObject.id) {
put(this.url, this.editObject).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, this.editObject).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
}
})
},
enableTabs (num) {
this.tabNum = num
},
enableMonthTabs (num) {
this.tabMonthNum = num
},
checkboxChange (val) {
this.perMonthChecked = val
},
singleChange (val) {
this.single = val
},
add () {
this.single++
},
piece () {
if (this.single <= 0) return
this.single--
}
},
watch: {
object: {
deep: true,
immediate: true,
handler (n) {
}
}
}
}
</script>

314
src/components/table/report/reportTestTable.vue Normal file
View File

@@ -0,0 +1,314 @@
<template>
<el-table
id="userTable"
ref="dataTable"
:data="tableData"
:height="height"
border
@header-dragend="dragend"
@sort-change="tableDataSort"
@selection-change="selectionChange"
>
<el-table-column type="expand">
<template #default="props">
<div class="expand">
<dov class="expand-cell">
<div class="expand-right">
<div class="demo-progress">
<el-progress type="circle" :percentage="percentage" :color="percentage === 100 ? '#5cb87a' : '#1989fa'" />
</div>
</div>
<div class="expand-left">
<div class="expand-name"><i class="cn-icon"></i>admin</div>
<div class="expand-time">
<div>{{ $t('report.creationTime') }}</div>
<div>{{props.row.startTime}}</div>
</div>
<div class="expand-icon">
<div class="table-operation-item--no-border" @click="tableOperation(['download', props.row, 1])">
<loading :loading="loadingTableId === props.row.id"></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" @click="tableOperation(['preview', props.row])">
<loading :loading="loadingPreviewId === props.row.id"></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="tableOperation(['delete', props.row])">
<loading :loading="loadingPreviewId === props.row.id"></loading>
<svg class="icon" aria-hidden="true" :class="{'table-operation-all-loading': loadingPreviewId}">
<use xlink:href="#cn-icon-shanchu"></use>
</svg>
</div>
</div>
</div>
</dov>
<dov class="expand-cell">
<div class="expand-right">
<div class="demo-progress">
<el-progress type="circle" :percentage="percentage" :color="percentage === 100 ? '#5cb87a' : '#1989fa'" />
</div>
</div>
<div class="expand-left">
<div class="expand-name"><i class="cn-icon"></i>admin</div>
<div class="expand-time">
<div>{{ $t('report.creationTime') }}</div>
<div>{{props.row.startTime}}</div>
</div>
<div class="expand-icon">
<div class="table-operation-item--no-border" @click="tableOperation(['download', props.row, 1])">
<loading :loading="loadingTableId === props.row.id"></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" @click="tableOperation(['preview', props.row])">
<loading :loading="loadingPreviewId === props.row.id"></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="tableOperation(['delete', props.row])">
<loading :loading="loadingPreviewId === props.row.id"></loading>
<svg class="icon" aria-hidden="true" :class="{'table-operation-all-loading': loadingPreviewId}">
<use xlink:href="#cn-icon-shanchu"></use>
</svg>
</div>
</div>
</div>
</dov>
<dov class="expand-cell">
<div class="expand-right">
<div class="demo-progress">
<el-progress type="circle" :percentage="percentage" :color="percentage === 100 ? '#5cb87a' : '#1989fa'" />
</div>
</div>
<div class="expand-left">
<div class="expand-name"><i class="cn-icon"></i>admin</div>
<div class="expand-time">
<div>{{ $t('report.creationTime') }}</div>
<div>{{props.row.startTime}}</div>
</div>
<div class="expand-icon">
<div class="table-operation-item--no-border" @click="tableOperation(['download', props.row, 1])">
<loading :loading="loadingTableId === props.row.id"></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" @click="tableOperation(['preview', props.row])">
<loading :loading="loadingPreviewId === props.row.id"></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="tableOperation(['delete', props.row])">
<loading :loading="loadingPreviewId === props.row.id"></loading>
<svg class="icon" aria-hidden="true" :class="{'table-operation-all-loading': loadingPreviewId}">
<use xlink:href="#cn-icon-shanchu"></use>
</svg>
</div>
</div>
</div>
</dov>
<dov class="expand-cell">
<div class="expand-right">
<div class="demo-progress">
<el-progress type="circle" :percentage="percentage" :color="percentage === 100 ? '#5cb87a' : '#1989fa'" />
</div>
</div>
<div class="expand-left">
<div class="expand-name"><i class="cn-icon"></i>admin</div>
<div class="expand-time">
<div>{{ $t('report.creationTime') }}</div>
<div>{{props.row.startTime}}</div>
</div>
<div class="expand-icon">
<div class="table-operation-item--no-border" @click="tableOperation(['download', props.row, 1])">
<loading :loading="loadingTableId === props.row.id"></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" @click="tableOperation(['preview', props.row])">
<loading :loading="loadingPreviewId === props.row.id"></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="tableOperation(['delete', props.row])">
<loading :loading="loadingPreviewId === props.row.id"></loading>
<svg class="icon" aria-hidden="true" :class="{'table-operation-all-loading': loadingPreviewId}">
<use xlink:href="#cn-icon-shanchu"></use>
</svg>
</div>
</div>
</div>
</dov>
</div>
</template>
</el-table-column>
<el-table-column
:resizable="false"
align="center"
type="selection"
width="55">
</el-table-column>
<el-table-column
v-for="(item, index) in customTableTitles"
:key="`col-${index}`"
:fixed="item.fixed"
:label="item.label"
:min-width="`${item.minWidth}`"
:prop="item.prop"
:resizable="true"
: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 === 'dataRange'">
<template v-if="scope.row.startTime && scope.row.endTime">
{{dateFormatByAppearance(scope.row.startTime)}}<span style="padding: 0 5px">-</span>{{dateFormatByAppearance(scope.row.endTime)}}
</template>
</span>
<span v-else-if="item.prop === 'type'">
{{scope.row.reportTemp.name}}
</span>
<span v-else-if="item.prop === 'state'">
{{getJobStatus(scope.row)}}
</span>
<span v-else>{{scope.row[item.prop]}}</span>
</template>
</el-table-column>
<el-table-column
:resizable="false"
:width="operationWidth"
fixed="right">
<template #header>
<div class="table-operation-title">{{$t('overall.option')}}</div>
</template>
<template #default="scope">
<div class="table-operation-items" v-if="scope.row.state === 1">
<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>
</el-table>
<div class="table-operation-all">
<el-checkbox v-model="checkboxAll" @change="selectAll(tableData)"></el-checkbox>
<div class="table-operation-all-span">
<span>{{ $t('overall.all') }}</span>
<div class="table-operation-back-down" :class="{'table-operation-all-checkbox': batchDow, 'table-operation-all-loading': loading}" @click="tableOperation(['delete', this.checkboxIds])">
<loading :loading="loading"></loading>
<span>{{$t('report.batchDeletion')}}</span>
</div>
</div>
</div>
</template>
<script>
import table from '@/mixins/table'
import Loading from '@/components/common/Loading'
export default {
name: 'builtinReportTable',
mixins: [table],
components: {
Loading
},
data () {
return {
tableTitle: [ // 原始table列
{
label: 'ID',
prop: 'id',
show: true
}, {
label: this.$t('config.user.name'),
prop: 'name',
show: true,
sortable: 'custom'
}, {
label: this.$t('report.timeLimit'),
prop: 'timeLimit',
show: true
}, {
label: this.$t('report.timePlan'),
prop: 'timePlan',
show: true,
minWidth: 110
}, {
label: this.$t('report.operationUserName'),
prop: 'operationUserName',
show: true
}, {
label: this.$t('report.resultCount'),
prop: 'resultCount',
show: true,
width: 130
}, {
label: this.$t('report.lastModified'),
prop: 'LastModified',
show: true,
width: 130,
sortable: 'custom'
}, {
label: this.$t('report.lastExecutionTime'),
prop: 'lastExecutionTime',
show: true,
width: 130,
sortable: 'custom'
}
],
checkboxAll: false,
checkboxIds: '',
batchDow: false,
builtinId: '',
indeterminate: false,
loading: false,
loadingTableId: '',
loadingPreviewId: '',
percentage: 80
}
},
methods: {
getJobStatus (report) {
if (report.state === 1 && report.upload === 1) {
return this.$t('overall.completed')
} else {
return this.$t('overall.inProgress')
}
},
selectionChange (objs) {
this.$emit('selectionChange', objs)
this.checkboxIds = objs.map(item => { return item.id }).join(',')
this.checkboxAll = objs.length > 0 || objs.length === this.tableData.length
this.batchDow = objs.length > 0
},
selectAll (objs) {
if (objs) {
objs.forEach(item => {
this.$refs.dataTable.toggleAllSelection(item)
})
} else {
this.$refs.dataTable.clearSelection()
}
}
}
}
</script>

4
src/router/index.js
View File

@@ -34,6 +34,10 @@ const routes = [
path: '/report/builtIn',
component: () => import('@/views/report/builtinReport')
},
{
path: '/report/test',
component: () => import('@/views/report/reportTest')
},
{
path: '/operationLog',
component: () => import('@/views/settings/OperationLog')

13
src/utils/constants.js
View File

File diff suppressed because one or more lines are too long

41
src/views/charts/charts/ChartRelationShip.vue
View File

@@ -228,47 +228,6 @@ export default {
_this.queryEntityDetail(_this.relationShipDomainUrl, params, queryParams)
}
})
/*this.myChart.on('mouseover', function (params) {
this.tableName = params.data.name
_this.timer = setTimeout(() => {
_this.timers = setTimeout(() => {
if (dom.offsetHeight > (params.event.event.offsetY + div.offsetHeight)) {
div.style.top = params.event.event.offsetY + 'px'
div.style.left = params.event.event.offsetX + 'px'
} else {
div.style.top = params.event.event.offsetY - div.offsetHeight + 'px'
div.style.left = params.event.event.offsetX + 'px'
}
_this.showList = true
}, 300)
if (params.data.type === 'ip') {
queryParams = {
ip: params.data.name,
startTime: getSecond(_this.timeFilter.startTime),
endTime: getSecond(_this.timeFilter.endTime)
}
_this.queryEntityDetail(_this.relationShipIpUrl, params, queryParams)
} else if (params.data.type === 'app_name') {
queryParams = {
appName: params.data.name,
startTime: getSecond(_this.timeFilter.startTime),
endTime: getSecond(_this.timeFilter.endTime)
}
_this.queryEntityDetail(_this.relationShipAppUrl, params, queryParams)
} else if (params.data.type === 'domain') {
queryParams = {
domain: params.data.name,
startTime: getSecond(_this.timeFilter.startTime),
endTime: getSecond(_this.timeFilter.endTime)
}
_this.queryEntityDetail(_this.relationShipDomainUrl, params, queryParams)
}
}, 500)
})
this.myChart.on('mouseout', function (params) {
clearTimeout(_this.timer)
clearTimeout(_this.timers)
})*/
this.chartOption.series[0].data = data
this.chartOption.series[0].links = links
this.myChart.setOption(this.chartOption)

146
src/views/report/reportTest.vue Normal file
View File

@@ -0,0 +1,146 @@
<template>
<div class="cn-builtin">
<div class="cn-builtin-left">
<div class="cn-builtin-left-title">
{{$t('report.category')}}
</div>
<div class="cn-builtin-left-menu" :class="{'cn-active': !builtinId}" @click="builtinTabs(null)">
{{$t('dns.all')}}
</div>
<div class="cn-builtin-left-menu" :class="{'cn-active': builtinId === item.id}" v-for="item in builtinReportLeftMenu" :key="item.id" @click="builtinTabs(item.id)">
{{item.name}}
</div>
</div>
<div class="cn-builtin-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-right>
<button
id="account-add"
class="top-tool-btn"
type="button"
@click="add"
>
<i class="cn-icon-add cn-icon"/>
</button>
</template>
<template #default>
<builtin-report-table
ref="dataTable"
v-loading="tools.loading"
:api="url"
:custom-table-title="tools.customTableTitle"
:height="mainTableHeight"
:table-data="tableData"
@download="download"
@delete="del"
@edit="edit"
@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"
:with-header="false"
:size="700"
destroy-on-close>
<builtin-report-box
:object="object"
:check-week-list-data="checkWeekListData"
:check-months-list-data="checkMonthsListData"
@close="closeRightBox"
/>
</el-drawer>
</div>
</div>
</template>
<script>
import { get } from '@/utils/http'
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'
export default {
name: 'Report',
data () {
return {
builtinReportLeftMenu: [], // 左侧列表菜单数据
builtinColor: false,
builtinId: '',
url: api.reportJob,
blankObject: { // 空白对象
id: '',
name: '',
ctime: '',
remark: '',
uniq: '',
startTime: '',
endTime: ''
},
checkWeekListData: [
this.$t('report.sunday'),
this.$t('report.onMonday'),
this.$t('report.tuesday'),
this.$t('report.wednesday'),
this.$t('report.thursday'),
this.$t('report.friday'),
this.$t('report.saturday')
],
checkMonthsListData: [
this.$t('report.january'),
this.$t('report.february'),
this.$t('report.march'),
this.$t('report.april'),
this.$t('report.may'),
this.$t('report.june'),
this.$t('report.july'),
this.$t('report.august'),
this.$t('report.september'),
this.$t('report.october'),
this.$t('report.november'),
this.$t('report.december')
],
tableId: 'builtinReportTable'
}
},
mixins: [dataListMixin],
components: {
cnDataList,
builtinReportTable,
builtinReportBox
},
methods: {
queryGetTempData () {
get(api.reportTemp).then(res => {
if (res.code === 200) {
this.builtinReportLeftMenu = res.data.list
}
})
},
builtinTabs (id) {
this.getTableData({ tempId: id })
this.builtinId = id
}
},
mounted () {
this.queryGetTempData()
}
}
</script>