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