769 lines
20 KiB
Vue
769 lines
20 KiB
Vue
<template>
|
|
<div class="resource-aggregation">
|
|
<!-- 各类资源汇聚量 -->
|
|
<div class="resource-aggregation-left">
|
|
<div class="title">
|
|
{{ dataList.title }}
|
|
<div class="hengxian"></div>
|
|
</div>
|
|
<div class="content">
|
|
<div class="content-son">
|
|
<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="{
|
|
backgroundImage: `url(${item.photo}) `,
|
|
}"
|
|
></span>
|
|
<span class="name-text">{{ item.type }}</span>
|
|
</div>
|
|
<div class="organization-value">
|
|
<span class="num">{{ item.amount || 0 }}</span>
|
|
<span>{{ item.organization }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="resource-aggregation-right">
|
|
<div class="title">
|
|
来源部门
|
|
<div class="hengxian"></div>
|
|
</div>
|
|
<div class="bumensnum">
|
|
<div class="bumensnum-photo"></div>
|
|
<span>部门总数</span>
|
|
<p>
|
|
<span class="num">{{ bumenSum }}</span>
|
|
<span>个</span>
|
|
</p>
|
|
</div>
|
|
<div class="content">
|
|
<div :key="leftDom"></div>
|
|
<div class="left" id="left"></div>
|
|
<div class="center"></div>
|
|
<div class="right" id="right"></div>
|
|
<!-- <div class="right-son1">汇聚量</div> -->
|
|
<div class="right-son2">上架资源部门分布</div>
|
|
</div>
|
|
</div>
|
|
<!-- 来源部门 -->
|
|
<div></div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
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'
|
|
import { message } from 'ant-design-vue'
|
|
//各类资源汇聚量
|
|
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) => {
|
|
console.log('selectTotal===============>', res)
|
|
if (res.data.code !== 0) {
|
|
return message.error(res.data.msg)
|
|
}
|
|
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) => {
|
|
let _obj = {
|
|
organization: '项',
|
|
type: val.type,
|
|
photo: val.type && imgObj[val.type],
|
|
amount: val.count,
|
|
}
|
|
if (val.type == '基础设施') {
|
|
if (uavAndIndividualSoldier.num) {
|
|
_obj.amount = val.count - 0 + uavAndIndividualSoldier.num
|
|
}
|
|
}
|
|
if (val.type == '知识库') {
|
|
_obj.organization = '条'
|
|
}
|
|
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([])
|
|
|
|
//能力统计-来源部门统计接口
|
|
const sourceDepartment = () => {
|
|
sourceDepartmentStatistics().then((res) => {
|
|
// datas.value = res.data.data.deptTypeCount
|
|
bumenSum.value = res.data.data.deptCount
|
|
for (const key in res.data.data.deptTypeCount) {
|
|
datas.value.push({
|
|
name: key,
|
|
value: res.data.data.deptTypeCount[key],
|
|
})
|
|
}
|
|
let fanwei = ref([])
|
|
for (const key in res.data.data.deptTotalCount) {
|
|
laiyuanDataList.value.push({
|
|
name: res.data.data.deptTotalCount[key],
|
|
value: res.data.data.deptTotalCount[key],
|
|
fanwei: '',
|
|
})
|
|
fanwei.value.push(key)
|
|
fanwei.value.map((item, index) => {
|
|
if (index + 1 < fanwei.value.length) {
|
|
laiyuanDataList.value[index].fanwei =
|
|
item + '-' + fanwei.value[index + 1]
|
|
} else {
|
|
laiyuanDataList.value[index].fanwei = item + '以上'
|
|
}
|
|
})
|
|
}
|
|
console.log('laiyuanDataList.value', laiyuanDataList.value)
|
|
funnelPlot(laiyuanDataList.value)
|
|
})
|
|
}
|
|
//来源部门饼图
|
|
let leftDom = ref(0)
|
|
const pieCharti = (dataLists) => {
|
|
leftDom.value += 'a'
|
|
echarts.init(document.getElementById('left')).dispose()
|
|
let chartDom = document.getElementById('left')
|
|
let myChart = echarts.init(chartDom)
|
|
let option
|
|
let index = -1
|
|
option = {
|
|
title: {
|
|
// text: '区级占比',
|
|
x: 'center',
|
|
y: '35%',
|
|
textStyle: {
|
|
fontWeight: 'normal',
|
|
fontSize: 16,
|
|
},
|
|
},
|
|
tooltip: {
|
|
show: true,
|
|
trigger: 'item',
|
|
formatter: '{b}: {c} ({d}%)',
|
|
},
|
|
legend: {
|
|
icon: 'emptyCircle',
|
|
itemGap: 20,
|
|
padding: 20,
|
|
// orient: 'horizontal',
|
|
bottom: 0,
|
|
formatter: function (name) {
|
|
if (index < 4) {
|
|
index += 1
|
|
}
|
|
let dom = ref()
|
|
datas.value.map((item) => {
|
|
if (item.name == name) {
|
|
dom.value = name + ' ' + item.value
|
|
}
|
|
})
|
|
return dom.value
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
center: ['50%', '40%'],
|
|
type: 'pie',
|
|
// selectedMode: 'single',
|
|
radius: ['50%', '30%'],
|
|
color: ['#fe845e', '#6cc95a', '#02d1b0', '#1772ff', '#FAC858'],
|
|
top: '0',
|
|
label: {
|
|
normal: {
|
|
show: false,
|
|
position: 'inner',
|
|
formatter: '{d}%',
|
|
|
|
// textStyle: {
|
|
// color: '#fff',
|
|
// fontWeight: 'bold',
|
|
// fontSize: 14,
|
|
// },
|
|
},
|
|
},
|
|
labelLine: {
|
|
normal: {
|
|
show: false,
|
|
},
|
|
},
|
|
data: dataLists,
|
|
},
|
|
{
|
|
type: 'pie',
|
|
center: ['50%', '40%'],
|
|
radius: ['58%', '50%'],
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#c2c7d6',
|
|
},
|
|
emphasis: {
|
|
color: '#ADADAD',
|
|
},
|
|
},
|
|
label: {
|
|
normal: {
|
|
position: 'inner',
|
|
formatter: '{c}',
|
|
textStyle: {
|
|
color: '#777777',
|
|
fontWeight: 'bold',
|
|
fontSize: 14,
|
|
},
|
|
},
|
|
},
|
|
// data: dataLists,
|
|
},
|
|
],
|
|
}
|
|
|
|
option && myChart.setOption(option)
|
|
}
|
|
//来源部门漏斗图
|
|
const funnelPlot = (dataList) => {
|
|
// 排序
|
|
let arrCopy = ['1-5', '5-10', '10-15', '15-20', '20以上']
|
|
// 真实数据
|
|
dataList.sort((a, b) => {
|
|
return Number(a.value) - Number(b.value)
|
|
})
|
|
|
|
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)
|
|
dataList = dataList.reverse()
|
|
echarts.init(document.getElementById('right')).dispose()
|
|
let chartDom = document.getElementById('right')
|
|
let myChart = echarts.init(chartDom)
|
|
// let option = {
|
|
// tooltip: {
|
|
// trigger: 'item',
|
|
// formatter: function (info) {
|
|
// let _obj = dataList.find((v) => v.fanwei == info.data.name) || {}
|
|
// let dom = ref()
|
|
// dom.value =
|
|
// '部门数<br/>' +
|
|
// (_obj.fanwei || '--') +
|
|
// ' : ' +
|
|
// (_obj.value || _obj.value === 0 ? _obj.value : '--') +
|
|
// '项'
|
|
// console.log('name', info.data)
|
|
// return dom.value
|
|
// },
|
|
// },
|
|
// grid: {
|
|
// height: '65%',
|
|
// width: '45%',
|
|
// left: '20%',
|
|
// bottom: 30,
|
|
// },
|
|
// xAxis: {
|
|
// show: false,
|
|
// type: 'category',
|
|
// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|
// },
|
|
// yAxis: {
|
|
// show: false,
|
|
// type: 'value',
|
|
// min: 0,
|
|
// max: 20,
|
|
// },
|
|
// series: [
|
|
// {
|
|
// name: '部门数',
|
|
// type: 'funnel',
|
|
// left: '28%',
|
|
// right: '35%',
|
|
// top: '15%',
|
|
// bottom: '10%',
|
|
// minSize: '0%',
|
|
// maxSize: '100%',
|
|
// sort: 'ascending',
|
|
// label: {
|
|
// show: true,
|
|
// 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: 40,
|
|
// lineStyle: {
|
|
// width: 1,
|
|
// type: 'solid',
|
|
// },
|
|
// },
|
|
// itemStyle: {
|
|
// borderColor: '#fff',
|
|
// borderWidth: 1,
|
|
// },
|
|
// emphasis: {
|
|
// label: {
|
|
// fontSize: 20,
|
|
// },
|
|
// },
|
|
// data: chartData,
|
|
// },
|
|
// ],
|
|
// }
|
|
|
|
let option = {
|
|
// title: {
|
|
// text: 'ECharts 入门示例'
|
|
// },
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: function (info) {
|
|
let _obj = dataList.find((v) => v.fanwei == info.name) || {}
|
|
let dom = ref()
|
|
dom.value =
|
|
'部门数<br/>' +
|
|
(_obj.fanwei || '--') +
|
|
' : ' +
|
|
(_obj.value || _obj.value === 0 ? _obj.value : '--') +
|
|
'个'
|
|
console.log('name', info)
|
|
return dom.value
|
|
},
|
|
},
|
|
legend: {
|
|
data: [],
|
|
},
|
|
xAxis: {
|
|
name: '上架数量区间',
|
|
data: [],
|
|
},
|
|
yAxis: {
|
|
name: '部门数量（个）',
|
|
minInterval: 1,
|
|
},
|
|
grid: {
|
|
height: '65%',
|
|
width: '63%',
|
|
left: '12%',
|
|
bottom: 30,
|
|
},
|
|
series: [
|
|
{
|
|
name: '',
|
|
type: 'bar',
|
|
barWidth: 35,
|
|
barGap: '-100%',
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#ECB53F',
|
|
},
|
|
},
|
|
// data: [5, 20, 36, 10, 10, 20]
|
|
data: [],
|
|
},
|
|
{
|
|
name: '',
|
|
type: 'bar',
|
|
barWidth: 35,
|
|
barGap: '-100%',
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#FE845E',
|
|
},
|
|
},
|
|
// data: [5, 20, 36, 10, 10, 20]
|
|
data: [],
|
|
},
|
|
{
|
|
name: '',
|
|
type: 'bar',
|
|
barWidth: 35,
|
|
barGap: '-100%',
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#6CC95A',
|
|
},
|
|
},
|
|
// data: [5, 20, 36, 10, 10, 20]
|
|
data: [],
|
|
},
|
|
{
|
|
name: '',
|
|
type: 'bar',
|
|
barWidth: 35,
|
|
barGap: '-100%',
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#02D1B0',
|
|
},
|
|
},
|
|
// data: [5, 20, 36, 10, 10, 20]
|
|
data: [],
|
|
},
|
|
{
|
|
name: '',
|
|
type: 'bar',
|
|
barWidth: 35,
|
|
barGap: '-100%',
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#1772FF',
|
|
},
|
|
},
|
|
// data: [5, 20, 36, 10, 10, 20]
|
|
data: [],
|
|
},
|
|
],
|
|
}
|
|
option.legend.data = []
|
|
option.xAxis.data = []
|
|
dataList.map((val, index) => {
|
|
// option.legend.data.push(val.fanwei)
|
|
option.xAxis.data.push(val.fanwei)
|
|
option.series[index].name = val.fanwei
|
|
let arr = []
|
|
for (let i = 0; i < 5; i++) {
|
|
if (i == index) {
|
|
arr.push(val.value)
|
|
// arr.push(10) // 方便更改样式
|
|
} else {
|
|
arr.push(0)
|
|
}
|
|
}
|
|
option.series[index].data = arr
|
|
})
|
|
option && myChart.setOption(option)
|
|
}
|
|
onMounted(() => {
|
|
// findZywMessage()
|
|
// snum()
|
|
sourceDepartment()
|
|
})
|
|
watch(
|
|
datas,
|
|
(value) => {
|
|
pieCharti(value)
|
|
},
|
|
{ deep: true }
|
|
)
|
|
// watch(
|
|
// laiyuanDataList,
|
|
// (value) => {
|
|
// funnelPlot(value)
|
|
// console.log(value, ' laiyuanDataList')
|
|
// },
|
|
// { deep: true }
|
|
// )
|
|
</script>
|
|
<style lang="less" scoped>
|
|
@font-face {
|
|
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;
|
|
border-radius: 1px;
|
|
margin-top: 6px;
|
|
background: #0058e1;
|
|
}
|
|
|
|
.resource-aggregation {
|
|
font-size: 18px;
|
|
font-family: text-typeface;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
background: #f3f5f9;
|
|
padding-bottom: 60px;
|
|
|
|
.resource-aggregation-left {
|
|
background: #fff;
|
|
border: 1px solid #e6e9ed;
|
|
border-radius: 2px;
|
|
box-shadow: 0 4px 20px rgba(233, 233, 233, 0.1);
|
|
width: 360px;
|
|
height: 397px;
|
|
padding: 20px;
|
|
padding-top: 64px;
|
|
position: relative;
|
|
|
|
.title {
|
|
position: absolute;
|
|
top: 20px;
|
|
font-size: 18px;
|
|
color: #212121;
|
|
}
|
|
|
|
.content {
|
|
.content-son {
|
|
.content-left {
|
|
margin-bottom: 8px;
|
|
height: 56px;
|
|
width: 320px;
|
|
background: #f1f4fb;
|
|
display: flex;
|
|
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;
|
|
height: 32px;
|
|
width: 32px;
|
|
margin-right: 11px;
|
|
}
|
|
}
|
|
|
|
.organization-value {
|
|
margin-right: 16px;
|
|
|
|
.num {
|
|
font-size: 26px;
|
|
}
|
|
|
|
span:nth-child(2) {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.resource-aggregation-right {
|
|
background: #fff;
|
|
border: 1px solid #e6e9ed;
|
|
border-radius: 2px;
|
|
box-shadow: 0 4px 20px rgba(233, 233, 233, 0.1);
|
|
margin-left: 20px;
|
|
width: 920px;
|
|
height: 397px;
|
|
padding: 64px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
display: flex;
|
|
padding-left: 120px;
|
|
|
|
.title {
|
|
position: absolute;
|
|
top: 20px;
|
|
left: 20px;
|
|
font-size: 18px;
|
|
color: #212121;
|
|
}
|
|
|
|
.bumensnum {
|
|
width: 100px;
|
|
position: absolute;
|
|
left: 20px;
|
|
height: 313px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding-top: 66px;
|
|
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;
|
|
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;
|
|
left: 65.5%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|