wuhongjian
/
hi-ucs
1
0
Fork 0
Code Issues Pull Requests Projects Releases 10 Wiki Activity

工作台：添加loading

This commit is contained in:
guoyue 2022-06-30 13:15:27 +08:00
parent 6c88eb6da3
commit b4d28c2418
3 changed files with 47 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
back/src/views/modules/workBench/components/dept-chart-view.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div> <div class="chart-box">
<div class="title">{{ title }}</div> <div class="title">{{ title }}</div>
<div v-if="dataListCopy.length > 0" style="width:260px; height:232px" class="dept-chart-view" :id="id"> <div v-if="dataListCopy.length > 0" style="width:260px; height:232px" class="dept-chart-view" :id="id">
</div> </div>
@ -40,7 +40,7 @@ export default {
// 解决数据初始渲染不出来的问题 // 解决数据初始渲染不出来的问题
setTimeout(() => { setTimeout(() => {
this.initChart() this.initChart()
}, 1000) }, 2000)
} }
} }
}, },
@ -51,7 +51,7 @@ export default {
mounted() { mounted() {
setTimeout(() => { setTimeout(() => {
this.initChart() this.initChart()
}, 1000) }, 2000)
}, },
methods: { methods: {
initChart() { initChart() {
@ -188,6 +188,12 @@ export default {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.chart-box {
width: 260px;
height: 232px;
margin: 1px;
}
.dept-chart-view { .dept-chart-view {
width: 260px; width: 260px;
height: 232px; height: 232px;

9
back/src/views/modules/workBench/components/frequency-top5-view.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="frequency"> <div class="frequency">
<contentTitle title="部门能力使用频率TOP5"></contentTitle> <contentTitle title="部门能力使用频率TOP5"></contentTitle>
<div v-if="!noData"> <div v-if="!noData" v-loading="loading">
<div class="no-box"> <div class="no-box">
<div class="no no2"> <div class="no no2">
<div class="name" :style="{ color: colorObj[2] }">{{ no2Obj.name || '--' }}</div> <div class="name" :style="{ color: colorObj[2] }">{{ no2Obj.name || '--' }}</div>
@ -52,7 +52,8 @@ export default {
name: '', name: '',
count: '', count: '',
}, },
noData: false noData: false,
loading: true,
}; };
}, },
mounted() { mounted() {
@ -65,7 +66,9 @@ export default {
limit: 5, limit: 5,
page: 1, page: 1,
}; };
this.loading = true
Apis.getFrequence(data, res => { Apis.getFrequence(data, res => {
this.loading = false;
if (res.data.code !== 0) { if (res.data.code !== 0) {
return this.$message.error(res.data.msg); return this.$message.error(res.data.msg);
} }
@ -83,7 +86,9 @@ export default {
this.listInfo = [] this.listInfo = []
this.listInfo.push(_arr[3]) this.listInfo.push(_arr[3])
this.listInfo.push(_arr[4]) this.listInfo.push(_arr[4])
}, err => { }, err => {
this.loading = false;
this.$message.error(err); this.$message.error(err);
}); });
}, },

37
back/src/views/modules/workBench/workBench.vue
View File

@ -3,13 +3,17 @@
<!-- 上 --> <!-- 上 -->
<div class="flex-row-start top"> <div class="flex-row-start top">
<div class="flex-row-start dept-left"> <div class="flex-row-start dept-left">
<dept-todo-view title="部门待办" :dataInfo="toToData"></dept-todo-view> <dept-todo-view title="部门待办" v-loading="loadingToDo" :dataInfo="toToData"></dept-todo-view>
<dept-todo-view title="部门已办" :dataInfo="hasToDodoData" style="margin-left: 0"></dept-todo-view> <dept-todo-view title="部门已办" v-loading="loadingHasToDo" :dataInfo="hasToDodoData"
style="margin-left: 0"></dept-todo-view>
</div> </div>
<div class="flex-row-start dept-chart-box"> <div class="flex-row-start dept-chart-box">
<dept-chart-view id="shelves" title="部门上架" :dataList="resourceData"></dept-chart-view> <dept-chart-view id="shelves" title="部门上架" v-loading="loadingResource" :dataList="resourceData">
<dept-chart-view id="apply" title="部门申请" :dataList="applyData"></dept-chart-view> </dept-chart-view>
<dept-chart-view id="demand" title="部门需求" :dataList="requireData"></dept-chart-view> <dept-chart-view id="apply" title="部门申请" v-loading="loadingApply" :dataList="applyData">
</dept-chart-view>
<dept-chart-view id="demand" title="部门需求" v-loading="loadingRequire" :dataList="requireData">
</dept-chart-view>
</div> </div>
</div> </div>
<!-- 中 --> <!-- 中 -->
@ -67,6 +71,11 @@ export default {
applyData: [], applyData: [],
// 上架 // 上架
requireData: [], requireData: [],
loadingToDo: false,
loadingHasToDo: false,
loadingResource: false,
loadingApply: false,
loadingRequire: false,
} }
}, },
mounted() { mounted() {
@ -84,11 +93,13 @@ export default {
methods: { methods: {
// 待办 // 待办
getToDo() { getToDo() {
this.loadingToDo = true;
let data = { let data = {
limit: 5, limit: 5,
page: 1, page: 1,
} }
Apis.getToDoTask(data, res => { Apis.getToDoTask(data, res => {
this.loadingToDo = false;
if (res.data.code !== 0) { if (res.data.code !== 0) {
return this.$message.error(res.data.msg) return this.$message.error(res.data.msg)
} }
@ -96,7 +107,8 @@ export default {
this.toToData.list = res.data.data.records || [] this.toToData.list = res.data.data.records || []
this.toToData.num = res.data.data.records.length || 0 this.toToData.num = res.data.data.records.length || 0
}, err => { }, err => {
this.$message.error(err) this.$message.error(err);
this.loadingToDo = false;
}) })
}, },
// 已办 // 已办
@ -105,7 +117,9 @@ export default {
limit: 5, limit: 5,
page: 1, page: 1,
} }
this.loadingHasToDo = true;
Apis.getHasToDoTask(data, res => { Apis.getHasToDoTask(data, res => {
this.loadingHasToDo = false;
if (res.data.code !== 0) { if (res.data.code !== 0) {
return this.$message.error(res.data.msg) return this.$message.error(res.data.msg)
} }
@ -114,12 +128,15 @@ export default {
this.hasToDodoData.num = res.data.data.records.length || 0 this.hasToDodoData.num = res.data.data.records.length || 0
}, err => { }, err => {
this.$message.error(err) this.$message.error(err)
this.loadingHasToDo = false;
console.log('err-----已办------->', err); console.log('err-----已办------->', err);
}) })
}, },
// 部门上架 // 部门上架
getShelvesTotal() { getShelvesTotal() {
this.loadingResource = true;
Apis.getTotalByDept({}, res => { Apis.getTotalByDept({}, res => {
this.loadingResource = false;
if (res.data.code !== 0) { if (res.data.code !== 0) {
return this.$message.error(res.data.msg) return this.$message.error(res.data.msg)
} }
@ -127,11 +144,14 @@ export default {
this.resourceData = this.formatList(res.data.data.total || []) this.resourceData = this.formatList(res.data.data.total || [])
}, err => { }, err => {
this.$message.error(err) this.$message.error(err)
this.loadingResource = false;
}) })
}, },
// 部门申请 // 部门申请
getApplyTotal() { getApplyTotal() {
this.loadingApply = true;
Apis.getApply({}, res => { Apis.getApply({}, res => {
this.loadingApply = false;
if (res.data.code !== 0) { if (res.data.code !== 0) {
return this.$message.error(res.data.msg) return this.$message.error(res.data.msg)
} }
@ -139,6 +159,7 @@ export default {
this.applyData = this.formatList(res.data.data.total || []) this.applyData = this.formatList(res.data.data.total || [])
}, err => { }, err => {
this.$message.error(err) this.$message.error(err)
this.loadingApply = false;
}) })
}, },
formatList(list = [], nameStr = 'type') { formatList(list = [], nameStr = 'type') {
@ -153,14 +174,18 @@ export default {
}, },
// 部门需求 // 部门需求
getRequireTotal() { getRequireTotal() {
this.loadingRequire = true;
Apis.getRequire({}, res => { Apis.getRequire({}, res => {
this.loadingRequire = false;
if (res.data.code !== 0) { if (res.data.code !== 0) {
return this.$message.error(res.data.msg) return this.$message.error(res.data.msg)
} }
console.log('res----部门需求-------->', res.data); console.log('res----部门需求-------->', res.data);
this.requireData = this.formatList(res.data.data.total || [], 'flag') this.requireData = this.formatList(res.data.data.total || [], 'flag')
}, err => { }, err => {
this.$message.error(err) this.$message.error(err)
this.loadingRequire = false;
}) })
}, },