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

市局：能力统计，部门数漏斗图更改，覆盖部门量更改为资源汇聚部门量，与部门总数保持一直

This commit is contained in:
guoyue 2022-10-03 15:46:11 +08:00
parent 12d3cc221c
commit 1d5d4845c2
1 changed files with 552 additions and 492 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

354
front/src/views/abilityStatistics/components/ResourceAggregation.vue
View File

@ -11,12 +11,9 @@
<div v-for="item in dataList.dataList" :key="item.name"> <div v-for="item in dataList.dataList" :key="item.name">
<div v-if="item.type !== '资源汇聚总量'" class="content-left"> <div v-if="item.type !== '资源汇聚总量'" class="content-left">
<div class="name"> <div class="name">
<span <span class="name-photo" :style="{
class="name-photo"
:style="{
backgroundImage: `url(${item.photo}) `, backgroundImage: `url(${item.photo}) `,
}" }"></span>
></span>
<span class="name-text">{{ item.type }}</span> <span class="name-text">{{ item.type }}</span>
</div> </div>
<div class="organization-value"> <div class="organization-value">
@ -55,113 +52,132 @@
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, onMounted, watch } from 'vue' import { ref, onMounted, watch } from 'vue'
import { selectTotal } from '@/api/home' import { selectTotal } from '@/api/home'
import { import {
// numberOfResourcesByCategory, // numberOfResourcesByCategory,
sourceDepartmentStatistics, sourceDepartmentStatistics,
} from '@/api/abilityStatistics.js' } from '@/api/abilityStatistics.js'
// import { zywMessage } from '@/api/home' // import { zywMessage } from '@/api/home'
import * as echarts from 'echarts' import * as echarts from 'echarts'
//各类资源汇聚量 //各类资源汇聚量
let dataList = ref({ let dataList = ref({
title: '各类资源汇聚量', title: '各类资源汇聚量',
dataList: [], dataList: [],
}) })
// let photo = ref([ // let photo = ref([
// require('../../../assets/abilityStatistics/banner-jc.png'), // require('../../../assets/abilityStatistics/banner-jc.png'),
// require('../../../assets/abilityStatistics/banner-sj.png'), // require('../../../assets/abilityStatistics/banner-sj.png'),
// require('../../../assets/abilityStatistics/banner-zj.png'), // require('../../../assets/abilityStatistics/banner-zj.png'),
// require('../../../assets/abilityStatistics/banner-yy.png'), // require('../../../assets/abilityStatistics/banner-yy.png'),
// require('../../../assets/abilityStatistics/banner-zs.png'), // require('../../../assets/abilityStatistics/banner-zs.png'),
// ]) // ])
// let name = ref([]) // let name = ref([])
// 获取数据资源数据 // 获取数据资源数据
// const findZywMessage = () => { // const findZywMessage = () => {
// zywMessage().then((res) => { // zywMessage().then((res) => {
// const { data } = res.data // const { data } = res.data
// dataSourceNum.value = data.sxmlcount || 0 // dataSourceNum.value = data.sxmlcount || 0
// snum() // snum()
// }) // })
// } // }
//各类资源数目接口 //各类资源数目接口
// function snum() { // function snum() {
// numberOfResourcesByCategory().then((res) => { // numberOfResourcesByCategory().then((res) => {
// dataList.value.dataList = res.data.data // dataList.value.dataList = res.data.data
// res.data.data.map((item, index) => { // res.data.data.map((item, index) => {
// // if (dataList.value.dataList[index].type === '数据资源') { // // if (dataList.value.dataList[index].type === '数据资源') {
// // dataList.value.dataList[index].amount = dataSourceNum.value || 0 // // dataList.value.dataList[index].amount = dataSourceNum.value || 0
// // } // // }
// dataList.value.dataList[index].organization = '个' // dataList.value.dataList[index].organization = '个'
// dataList.value.dataList[index].photo = photo.value[index] // dataList.value.dataList[index].photo = photo.value[index]
// }) // })
// }) // })
// } // }
selectTotal().then((res) => { selectTotal().then((res) => {
console.log('selectTotal===============>', res.data.data) console.log('selectTotal===============>', res.data.data)
// res.data.data.map((item, index) => { // res.data.data.map((item, index) => {
// dataList.value.dataList[index].organization = '个' // dataList.value.dataList[index].organization = '个'
// dataList.value.dataList[index].photo = photo.value[index] // dataList.value.dataList[index].photo = photo.value[index]
// }) // })
let imgObj = {
'组件服务': require('../../../assets/abilityStatistics/banner-zj.png'),
'应用资源': require('../../../assets/abilityStatistics/banner-yy.png'),
'基础设施': require('../../../assets/abilityStatistics/banner-jc.png'),
'数据资源': require('../../../assets/abilityStatistics/banner-sj.png'),
'知识库': require('../../../assets/abilityStatistics/banner-zs.png'),
}
res.data.data.total.forEach((val) => { res.data.data.total.forEach((val) => {
switch (val.type) { let _obj = {
case '组件服务':
dataList.value.dataList.push({
organization: '个', organization: '个',
type: '组件服务', type: val.type,
photo: require('../../../assets/abilityStatistics/banner-zj.png'), photo: val.type && imgObj[val.type],
amount: val.count, amount: val.count,
}) }
break if (val.type == '基础设施') {
case '应用资源':
dataList.value.dataList.push({
organization: '个',
type: '应用资源',
photo: require('../../../assets/abilityStatistics/banner-yy.png'),
amount: val.count,
})
break
case '基础设施':
if (uavAndIndividualSoldier.num) { if (uavAndIndividualSoldier.num) {
val.count = val.count - 0 + uavAndIndividualSoldier.num _obj.amount = val.count - 0 + uavAndIndividualSoldier.num
} }
dataList.value.dataList.push({
organization: '个',
type: '基础设施',
photo: require('../../../assets/abilityStatistics/banner-jc.png'),
amount: val.count,
})
break
case '数据资源':
dataList.value.dataList.push({
organization: '个',
type: '数据资源',
photo: require('../../../assets/abilityStatistics/banner-sj.png'),
amount: val.count,
})
break
case '知识库':
dataList.value.dataList.push({
organization: '个',
type: '知识库',
photo: require('../../../assets/abilityStatistics/banner-zs.png'),
amount: val.count,
})
break
} }
dataList.value.dataList.push(_obj)
// switch (val.type) {
// case '组件服务':
// dataList.value.dataList.push({
// organization: '个',
// type: '组件服务',
// photo: require('../../../assets/abilityStatistics/banner-zj.png'),
// amount: val.count,
// })
// break
// case '应用资源':
// dataList.value.dataList.push({
// organization: '个',
// type: '应用资源',
// photo: require('../../../assets/abilityStatistics/banner-yy.png'),
// amount: val.count,
// })
// break
// case '基础设施':
// if (uavAndIndividualSoldier.num) {
// val.count = val.count - 0 + uavAndIndividualSoldier.num
// }
// dataList.value.dataList.push({
// organization: '个',
// type: '基础设施',
// photo: require('../../../assets/abilityStatistics/banner-jc.png'),
// amount: val.count,
// })
// break
// case '数据资源':
// dataList.value.dataList.push({
// organization: '个',
// type: '数据资源',
// photo: require('../../../assets/abilityStatistics/banner-sj.png'),
// amount: val.count,
// })
// break
// case '知识库':
// dataList.value.dataList.push({
// organization: '个',
// type: '知识库',
// photo: require('../../../assets/abilityStatistics/banner-zs.png'),
// amount: val.count,
// })
// break
// }
}) })
let arr = ['组件服务', '应用资源', '基础设施', '数据资源', '知识库'] let arr = ['组件服务', '应用资源', '基础设施', '数据资源', '知识库']
dataList.value.dataList.sort((a, b) => { dataList.value.dataList.sort((a, b) => {
return arr.indexOf(a.type) - arr.indexOf(b.type) return arr.indexOf(a.type) - arr.indexOf(b.type)
}) })
}) })
let datas = ref([]) let datas = ref([])
let laiyuanDataList = ref([]) let laiyuanDataList = ref([])
// let dataSourceNum = ref(0) // let dataSourceNum = ref(0)
let bumenSum = ref([]) let bumenSum = ref([])
//能力统计-来源部门统计接口 //能力统计-来源部门统计接口
const sourceDepartment = () => { const sourceDepartment = () => {
sourceDepartmentStatistics().then((res) => { sourceDepartmentStatistics().then((res) => {
// datas.value = res.data.data.deptTypeCount // datas.value = res.data.data.deptTypeCount
bumenSum.value = res.data.data.deptCount bumenSum.value = res.data.data.deptCount
@ -190,10 +206,10 @@
} }
console.log('laiyuanDataList.value', laiyuanDataList.value) console.log('laiyuanDataList.value', laiyuanDataList.value)
}) })
} }
//来源部门饼图 //来源部门饼图
let leftDom = ref(0) let leftDom = ref(0)
const pieCharti = (dataLists) => { const pieCharti = (dataLists) => {
leftDom.value += 'a' leftDom.value += 'a'
echarts.init(document.getElementById('left')).dispose() echarts.init(document.getElementById('left')).dispose()
let chartDom = document.getElementById('left') let chartDom = document.getElementById('left')
@ -291,31 +307,47 @@
} }
option && myChart.setOption(option) option && myChart.setOption(option)
}
//来源部门漏斗图
const funnelPlot = (dataList) => {
// 排序
let arrCopy = ['0-5', '5-10', '10-15', '15-20', '20以上']
// 真实数据
dataList.sort((a, b) => {
console.log(arrCopy.indexOf(a.fanwei), arrCopy.indexOf(b.fanwei))
return arrCopy.indexOf(b.fanwei) - arrCopy.indexOf(a.fanwei)
})
let _arr = dataList.map(v => v.fanwei) || arrCopy;
// 数据配置形成金字塔形状固定
let chartData = _arr.map((v, i) => {
return {
name: v,
value: 10 + 10 * i,
} }
//来源部门漏斗图 })
const funnelPlot = (dataList) => {
// let arr = ['0-5', '5-10', '10-15', '15-20', '20以上'] let newArr = [];
// dataList.sort((a, b) => { dataList.map(v => {
// console.log(arr.indexOf(a.fanwei), arr.indexOf(b.fanwei)) if (v.value && Number(v.value > 0)) {
// return arr.indexOf(b.fanwei) - arr.indexOf(a.fanwei) newArr.push({
// }) name: v.fanwei,
value: v.value
})
}
})
console.log('============》', dataList) console.log('============》', dataList)
echarts.init(document.getElementById('right')).dispose() echarts.init(document.getElementById('right')).dispose()
let chartDom = document.getElementById('right') let chartDom = document.getElementById('right')
let myChart = echarts.init(chartDom) let myChart = echarts.init(chartDom)
let option let option = {
option = {
// title: {
// text: '汇聚量',
// },
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
formatter: function (name) { formatter: function (info) {
let _obj = dataList.find(v => v.fanwei == info.data.name) || {}
let dom = ref() let dom = ref()
dom.value = dom.value =
'部门数<br/>' + name.data.fanwei + ' : ' + name.data.value + '个' '部门数<br/>' + (_obj.fanwei || '--') + ' : ' + (_obj.value || _obj.value === 0 ? _obj.value : '--') + '个'
console.log('name', name.data) console.log('name', info.data)
return dom.value return dom.value
}, },
}, },
@ -340,26 +372,34 @@
{ {
name: '部门数', name: '部门数',
type: 'funnel', type: 'funnel',
left: '20%', left: '28%',
top: '10%', right: '35%',
width: '60%', top: '15%',
height: '80%', bottom: '10%',
min: 0,
max: 100,
minSize: '0%', minSize: '0%',
maxSize: '100%', maxSize: '100%',
sort: 'ascending', sort: 'ascending',
gap: 2,
label: { label: {
show: true, show: true,
position: 'inside', formatter: function (info) {
let _obj = dataList.find(v => v.fanwei == info.data.name) || {}
let dom = ref()
dom.value = (_obj.fanwei || '--') + ' : ' + (_obj.value || _obj.value === 0 ? _obj.value : '--') + '个';
console.log('name', info.data)
return dom.value
},
rich: {
b: {
fontSize: 14
}
}
}, },
labelLine: { labelLine: {
length: 10, length: 40,
lineStyle: { lineStyle: {
width: 1, width: 1,
type: 'solid', type: 'solid'
}, }
}, },
itemStyle: { itemStyle: {
borderColor: '#fff', borderColor: '#fff',
@ -370,61 +410,61 @@
fontSize: 20, fontSize: 20,
}, },
}, },
data: dataList, data: chartData,
}, }
{
data: [],
type: 'bar',
},
], ],
} }
option && myChart.setOption(option) option && myChart.setOption(option)
} }
onMounted(() => { onMounted(() => {
// findZywMessage() // findZywMessage()
// snum() // snum()
sourceDepartment() sourceDepartment()
}) })
watch( watch(
datas, datas,
(value) => { (value) => {
pieCharti(value) pieCharti(value)
}, },
{ deep: true } { deep: true }
) )
watch( watch(
laiyuanDataList, laiyuanDataList,
(value) => { (value) => {
funnelPlot(value) funnelPlot(value)
console.log(value, ' laiyuanDataList') console.log(value, ' laiyuanDataList')
}, },
{ deep: true } { deep: true }
) )
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@font-face { @font-face {
font-family: 'num-typeface'; font-family: 'num-typeface';
src: url('~@/assets/newHome/font/num-typeface.otf'); src: url('~@/assets/newHome/font/num-typeface.otf');
} }
@font-face {
@font-face {
font-family: 'text-typeface'; font-family: 'text-typeface';
src: url('~@/assets/newHome/font/text-typeface.otf'); src: url('~@/assets/newHome/font/text-typeface.otf');
} }
.num {
.num {
font-family: num-typeface; font-family: num-typeface;
font-size: 32px; font-size: 32px;
font-weight: 600; font-weight: 600;
margin-right: 5px; margin-right: 5px;
} }
.hengxian {
.hengxian {
height: 3px; height: 3px;
width: 30px; width: 30px;
border-radius: 1px; border-radius: 1px;
margin-top: 6px; margin-top: 6px;
background: #0058e1; background: #0058e1;
} }
.resource-aggregation {
.resource-aggregation {
font-size: 18px; font-size: 18px;
font-family: text-typeface; font-family: text-typeface;
width: 100%; width: 100%;
@ -432,6 +472,7 @@
justify-content: center; justify-content: center;
background: #f3f5f9; background: #f3f5f9;
padding-bottom: 60px; padding-bottom: 60px;
.resource-aggregation-left { .resource-aggregation-left {
background: #fff; background: #fff;
border: 1px solid #e6e9ed; border: 1px solid #e6e9ed;
@ -442,12 +483,14 @@
padding: 20px; padding: 20px;
padding-top: 64px; padding-top: 64px;
position: relative; position: relative;
.title { .title {
position: absolute; position: absolute;
top: 20px; top: 20px;
font-size: 18px; font-size: 18px;
color: #212121; color: #212121;
} }
.content { .content {
.content-son { .content-son {
.content-left { .content-left {
@ -459,10 +502,12 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
border-radius: 1px; border-radius: 1px;
.name { .name {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
.name-photo { .name-photo {
margin-left: 10px; margin-left: 10px;
display: inline-block; display: inline-block;
@ -471,11 +516,14 @@
margin-right: 11px; margin-right: 11px;
} }
} }
.organization-value { .organization-value {
margin-right: 16px; margin-right: 16px;
.num { .num {
font-size: 26px; font-size: 26px;
} }
span:nth-child(2) { span:nth-child(2) {
font-size: 16px; font-size: 16px;
} }
@ -484,6 +532,7 @@
} }
} }
} }
.resource-aggregation-right { .resource-aggregation-right {
background: #fff; background: #fff;
border: 1px solid #e6e9ed; border: 1px solid #e6e9ed;
@ -497,6 +546,7 @@
position: relative; position: relative;
display: flex; display: flex;
padding-left: 120px; padding-left: 120px;
.title { .title {
position: absolute; position: absolute;
top: 20px; top: 20px;
@ -504,6 +554,7 @@
font-size: 18px; font-size: 18px;
color: #212121; color: #212121;
} }
.bumensnum { .bumensnum {
width: 100px; width: 100px;
position: absolute; position: absolute;
@ -516,49 +567,58 @@
background: rgba(0, 88, 225, 0.1); background: rgba(0, 88, 225, 0.1);
border-right: 1px solid rgba(0, 88, 225, 0.5); border-right: 1px solid rgba(0, 88, 225, 0.5);
border-radius: 2px; border-radius: 2px;
.bumensnum-photo { .bumensnum-photo {
height: 50px; height: 50px;
width: 50px; width: 50px;
background: url('~@/assets/abilityStatistics/bumenzongshu.png') background: url('~@/assets/abilityStatistics/bumenzongshu.png') no-repeat;
no-repeat;
margin-bottom: 30px; margin-bottom: 30px;
} }
p { p {
margin-top: 18px; margin-top: 18px;
color: #0058e1; color: #0058e1;
.num { .num {
font-size: 30px; font-size: 30px;
} }
span:last-child { span:last-child {
font-size: 16px; font-size: 16px;
} }
} }
} }
.content { .content {
width: 779px; width: 779px;
height: 313px; height: 313px;
display: flex; display: flex;
position: relative; position: relative;
background: #f1f4fb; background: #f1f4fb;
.left { .left {
width: 373px; width: 373px;
height: 313px; height: 313px;
} }
.center { .center {
height: 240px; height: 240px;
width: 1px; width: 1px;
margin-top: 31px; margin-top: 31px;
background: #d0d4de; background: #d0d4de;
} }
.right { .right {
width: 406px; width: 406px;
height: 313px; height: 313px;
} }
.right-son1 { .right-son1 {
position: absolute; position: absolute;
top: 10px; top: 10px;
left: 52.5%; left: 52.5%;
} }
.right-son2 { .right-son2 {
position: absolute; position: absolute;
top: 10px; top: 10px;
@ -566,5 +626,5 @@
} }
} }
} }
} }
</style> </style>