市局：能力统计，部门数漏斗图更改，覆盖部门量更改为资源汇聚部门量，与部门总数保持一直
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">
|
||||
|
|
@ -103,52 +100,71 @@
|
|||
// 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) => {
|
||||
|
|
@ -294,28 +310,44 @@
|
|||
}
|
||||
//来源部门漏斗图
|
||||
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 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,
|
||||
}
|
||||
})
|
||||
|
||||
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,12 +410,8 @@
|
|||
fontSize: 20,
|
||||
},
|
||||
},
|
||||
data: dataList,
|
||||
},
|
||||
{
|
||||
data: [],
|
||||
type: 'bar',
|
||||
},
|
||||
data: chartData,
|
||||
}
|
||||
],
|
||||
}
|
||||
|
||||
|
|
@ -407,16 +443,19 @@
|
|||
font-family: 'num-typeface';
|
||||
src: url('~@/assets/newHome/font/num-typeface.otf');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'text-typeface';
|
||||
src: url('~@/assets/newHome/font/text-typeface.otf');
|
||||
}
|
||||
|
||||
.num {
|
||||
font-family: num-typeface;
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.hengxian {
|
||||
height: 3px;
|
||||
width: 30px;
|
||||
|
|
@ -424,6 +463,7 @@
|
|||
margin-top: 6px;
|
||||
background: #0058e1;
|
||||
}
|
||||
|
||||
.resource-aggregation {
|
||||
font-size: 18px;
|
||||
font-family: text-typeface;
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue