fix: 报告页面补充 loading 动画效果,自动刷新逻辑调整

This commit is contained in:
@changcode
2022-07-05 11:43:43 +08:00
parent fba81a2ec9
commit d2e37360da
3 changed files with 27 additions and 4 deletions

View File

@@ -8,6 +8,7 @@
width: 288px; width: 288px;
height: 100%; height: 100%;
border-right: 1px solid #E7EAED; border-right: 1px solid #E7EAED;
position: relative;
.cn-builtin-left-title { .cn-builtin-left-title {
padding: 28px 0 26px 13px; padding: 28px 0 26px 13px;
font-size: 16px; font-size: 16px;

View File

@@ -6,6 +6,7 @@
:height="height" :height="height"
:expand-row-keys="expandedIds" :expand-row-keys="expandedIds"
row-key="id" row-key="id"
v-loading="toolsLoading"
border border
tooltip-effect="light" tooltip-effect="light"
@header-dragend="dragend" @header-dragend="dragend"
@@ -107,6 +108,11 @@
<span v-if="item.prop === 'timeLimit'"> <span v-if="item.prop === 'timeLimit'">
{{handleTimeRange(scope.row)}} {{handleTimeRange(scope.row)}}
</span> </span>
<span v-else-if="item.prop === 'categoryId'">
<span v-for="item in categoryList">
<span v-if="scope.row.categoryId === item.id">{{item.name}}</span>
</span>
</span>
<span v-else-if="item.prop === 'timePlan'"> <span v-else-if="item.prop === 'timePlan'">
<template v-if="scope.row.config.isScheduler === 0"> <template v-if="scope.row.config.isScheduler === 0">
{{$t('report.always')}} {{$t('report.always')}}
@@ -217,6 +223,10 @@ export default {
Loading, Loading,
chartDetectionPagination chartDetectionPagination
}, },
props: {
categoryList: Array,
toolsLoading: Boolean
},
inject: ['reload'], inject: ['reload'],
data () { data () {
return { return {
@@ -227,7 +237,12 @@ export default {
label: 'ID', label: 'ID',
prop: 'id', prop: 'id',
show: true, show: true,
width: 40 width: 50
}, {
label: this.$t('report.categoryType'),
prop: 'categoryId',
show: true,
minWidth: 180
}, { }, {
label: this.$t('config.user.name'), label: this.$t('config.user.name'),
prop: 'name', prop: 'name',
@@ -384,7 +399,7 @@ export default {
}) })
} }
this.loadingDown = false this.loadingDown = false
const showInterval = this.downDataList.find(item => item.percent !== 1) const showInterval = this.downDataList.find(item => item.percent !== 1 && item.state !== 2)
if (this.downDataList && showInterval) { if (this.downDataList && showInterval) {
this.intervalChange(param) this.intervalChange(param)
} }

View File

@@ -1,6 +1,7 @@
<template> <template>
<div class="cn-builtin"> <div class="cn-builtin">
<div class="cn-builtin-left"> <div class="cn-builtin-left">
<loading :loading="builtinLeftLoading"></loading>
<div class="cn-builtin-left-title"> <div class="cn-builtin-left-title">
{{$t('report.category')}} {{$t('report.category')}}
</div> </div>
@@ -34,9 +35,10 @@
<template #default> <template #default>
<builtin-report-table <builtin-report-table
ref="dataTable" ref="dataTable"
v-loading="tools.loading" :tools-loading="tools.loading"
:api="url" :api="url"
:custom-table-title="tools.customTableTitle" :custom-table-title="tools.customTableTitle"
:category-list="builtinReportLeftMenu"
:height="mainTableHeight" :height="mainTableHeight"
:table-data="tableData" :table-data="tableData"
@delete="del" @delete="del"
@@ -75,6 +77,7 @@ import cnDataList from '@/components/table/CnDataList'
import dataListMixin from '@/mixins/data-list' import dataListMixin from '@/mixins/data-list'
import { api } from '@/utils/api' import { api } from '@/utils/api'
import ReportBox from '@/components/rightBox/report/ReportBox' import ReportBox from '@/components/rightBox/report/ReportBox'
import Loading from '@/components/common/Loading'
export default { export default {
name: 'Report', name: 'Report',
@@ -141,17 +144,20 @@ export default {
'report.november', 'report.november',
'report.december' 'report.december'
], ],
tableId: 'builtinReportTable' tableId: 'builtinReportTable',
builtinLeftLoading: false
} }
}, },
mixins: [dataListMixin], mixins: [dataListMixin],
components: { components: {
Loading,
cnDataList, cnDataList,
builtinReportTable, builtinReportTable,
ReportBox ReportBox
}, },
methods: { methods: {
queryGetTempData () { queryGetTempData () {
this.builtinLeftLoading = true
get(api.reportCategory).then(res => { get(api.reportCategory).then(res => {
if (res.code === 200) { if (res.code === 200) {
this.builtinReportLeftMenu = res.data.list.map(c => { this.builtinReportLeftMenu = res.data.list.map(c => {
@@ -161,6 +167,7 @@ export default {
} }
}) })
} }
this.builtinLeftLoading = false
}) })
}, },
getTableData (params) { getTableData (params) {