Merge branch 'hi-ucs-dev' of http://124.222.94.39:3001/wuhongjian/hi-ucs into hi-ucs-dev
This commit is contained in:
commit
05736161fb
|
@ -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>
|
|
@ -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;
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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>
|
||||||
<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 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>
|
|
@ -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>
|
|
@ -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;
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue