Merge branch 'hi-ucs-dev' of http://124.222.94.39:3001/wuhongjian/hi-ucs into hi-ucs-dev

This commit is contained in:
hucongqian 2022-06-30 13:46:28 +08:00
commit 05736161fb
6 changed files with 205 additions and 51 deletions

View File

@ -12,26 +12,16 @@ export default {
props: { props: {
title: String, title: String,
}, },
data() {
},
computed: {
},
methods: {
}
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.content-title { .content-title {
height:48px; height: 48px;
line-height:48px; line-height: 48px;
font-size: 18px; font-size: 18px;
font-weight: bold;
// color: #fff; // color: #fff;
} }
</style> </style>

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() {
@ -60,11 +60,8 @@ export default {
this.myChart.dispose() this.myChart.dispose()
} }
this.myChart = chartDom && echarts.init(chartDom); this.myChart = chartDom && echarts.init(chartDom);
console.log('this.myChart------------>', this.myChart);
let lengendArr = this.dataListCopy.filter(v => v.name); let lengendArr = this.dataListCopy.filter(v => v.name);
let colorArray = [ let colorArray = [
'#fe845e', '#ff3e55', '#d5c438', '#ff9999', '#9c78ed', '#48c760', '#48c6c7', '#0058e1', '#fe845e', '#ff3e55', '#d5c438', '#ff9999', '#9c78ed', '#48c760', '#48c6c7', '#0058e1',
] ]
@ -113,8 +110,8 @@ export default {
}, },
"icon": "circle", "icon": "circle",
"right": "0", "right": "0",
"bottom": "0", "bottom": "30",
"padding": [10, 60], // "padding": [10, 60],
"itemGap": 10, "itemGap": 10,
"data": lengendArr "data": lengendArr
}, },
@ -188,6 +185,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;

View File

@ -132,6 +132,7 @@ export default {
height: 32px; height: 32px;
line-height: 32px; line-height: 32px;
text-align: right; text-align: right;
cursor: pointer;
} }
.no-data { .no-data {

View File

@ -1,26 +1,63 @@
<template> <template>
<div class="frequency"> <div class="frequency">
555 <contentTitle title="部门能力使用频率TOP5"></contentTitle>
<div>标题</div> <div v-if="!noData" v-loading="loading">
<div class="no-box"> <div class="no-box">
<div class="no2"></div> <div class="no no2">
<div class="no1"></div> <div class="name" :style="{ color: colorObj[2] }">{{ no2Obj.name || '--' }}</div>
<div class="no3"></div> <div class="count">{{ no2Obj.count }}</div>
</div>
<div class="no no1">
<div class="name" :style="{ color: colorObj[1] }">{{ no1Obj.name }}</div>
<div class="count">{{ no1Obj.count }}</div>
</div>
<div class="no no3">
<div class="name" :style="{ color: colorObj[3] }">{{ no3Obj.name }}</div>
<div class="count">{{ no3Obj.count }}</div>
</div>
</div>
<div class="flex-row-between row-name" v-for="(data, i) in listInfo" :key="i">
<div class="left">
<div class="row-index">{{ i + 3 }}</div>
<div class="name-text">{{ data.name }}</div>
</div>
<div class="count-text">{{ data.count }}</div>
</div>
</div> </div>
<div></div> <div class="no-data" v-else>暂无数据</div>
</div> </div>
</template> </template>
<script> <script>
import * as Apis from '../api.js' import * as Apis from '../api.js'
import contentTitle from './content-title.vue'
export default { export default {
data() { data() {
return { return {
frequenceList: [], listInfo: [],
noInfo: {} colorObj: {
} 1: '#4658710',
2: '#734204',
3: '#805932',
},
no1Obj: {
name: '',
count: '',
},
no2Obj: {
name: '',
count: '',
},
no3Obj: {
name: '',
count: '',
},
noData: false,
loading: true,
};
}, },
mounted() { mounted() {
this.getData() this.getData();
}, },
methods: { methods: {
// //
@ -28,33 +65,67 @@ export default {
let data = { let data = {
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);
} }
console.log('res----频率-------->', res.data); console.log("res----频率-------->", res.data);
this.frequenceList = res.data.data.records || []; let _arr = res.data.data.records || [];
}, err => { if (_arr.length == 0) {
this.$message.error(err) this.noData = true
}) return;
}
for (let i = 0; i < 3; i++) {
let k = i + 1;
this[`no${k}Obj`].name = _arr[i].name
this[`no${k}Obj`].count = _arr[i].count
}
this.listInfo = []
this.listInfo.push(_arr[3])
this.listInfo.push(_arr[4])
}, err => {
this.loading = false;
this.$message.error(err);
});
}, },
} },
components: { contentTitle }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.flex-row-between {
display: flex;
width: 100%;
margin-bottom: 8px;
height: 52px;
align-items: center;
justify-content: space-between;
padding-left: 10px;
padding-right: 16px;
box-sizing: border-box;
}
.left {
display: flex;
}
.frequency { .frequency {
width: 540px; width: 540px;
height: 335px; height: 335px;
background: pink; background: #fff;
margin-right: 4px; padding: 0 16px;
box-sizing: border-box;
} }
.no-box { .no-box {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
margin-bottom: 24px;
} }
.no1 { .no1 {
@ -64,6 +135,13 @@ export default {
background-image: url("~@/assets/img/workBench/NO1.png"); background-image: url("~@/assets/img/workBench/NO1.png");
} }
.no {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.no2 { .no2 {
width: 170px; width: 170px;
height: 120px; height: 120px;
@ -78,4 +156,46 @@ export default {
margin-top: 10px; margin-top: 10px;
background-image: url("~@/assets/img/workBench/NO3.png"); background-image: url("~@/assets/img/workBench/NO3.png");
} }
.name {
font-size: 16px;
margin-bottom: 10px;
margin-top: 70px;
}
.count {
font-size: 18px;
color: #2b2b2b;
}
.row-name {
background: #f4f5f8;
border-radius: 1px;
}
.row-index {
font-size: 16px;
color: #414d60;
}
.name-text {
font-size: 16px;
color: #464545;
}
.num-text {
font-size: 14px;
color: #2b2b2b;
}
.no-data {
width: 540px;
height: 300px;
background: #fff;
line-height: 232px;
font-size: 16px;
color: #212121;
text-align: center;
}
</style> </style>

View File

@ -1,17 +1,32 @@
<template> <template>
<div class="risk"> <div class="risk">
555 <contentTitle title="部门能力风险TOP5"></contentTitle>
<div class="no-data">暂无数据</div>
</div> </div>
</template> </template>
<script> <script>
import contentTitle from './content-title.vue'
export default { export default {
components: { contentTitle }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.risk { .risk {
width: 540px; width: 540px;
height: 335px; height: 335px;
background: pink; background: #fff;
padding: 0 16px;
box-sizing: border-box;
}
.no-data {
width: 540px;
height: 300px;
background: #fff;
line-height: 232px;
font-size: 16px;
color: #212121;
text-align: center;
} }
</style> </style>

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;
}) })
}, },