@ -1,18 +1,17 @@
< template >
< view >
< view class = "container" id = "top1" >
< uni -row style = "margin-bottom: 10rpx; margin-left: 30rpx;margin-right: 30rpx; ">
< uni -col :span ="24" > < uni -title :title ="'所选单位 ID: '+orgCode " align = "left" type = "h4" > < / u n i - t i t l e > < / u n i - c o l >
< uni -row style = "margin-bottom: 10rpx; margin-left: 30rpx; margin-right: 30rpx">
< uni -col :span ="24" > < uni -title :title ="'所选单位 '" align = "left" type = "h4" > < / u n i - t i t l e > < / u n i - c o l >
< / u n i - r o w >
< uni -row style = "margin-bottom: 20rpx; margin-left: 30rpx;margin-right: 30rpx; ">
< uni -row style = "margin-bottom: 20rpx; margin-left: 30rpx; margin-right: 30rpx">
< uni -col :span ="24" >
< trq -depart -select v -model = " orgCode " returnCodeOrID = "orgCode"
@ change = "departChange" > < / t r q - d e p a r t - s e l e c t >
< trq -depart -select v-model ="orgCode" returnCodeOrID="orgCode" @change="departChange" > < / trq -depart -select >
< / u n i - c o l >
< / u n i - r o w >
<!-- 概览统计 -- >
< view class = "stats-box" v-if ="summary.total" >
< view class = " stat-item">
< view class = " stat-item">
< text class = "label" > 总人数 < / text >
< text class = "value" > { { summary . total } } < / text >
< / view >
@ -27,56 +26,47 @@
< l -echart ref = "chart" @finished ="initChart" / >
< / view >
<!-- 数据表格 -- >
< uni -row style = "margin-top: 10px; margin-left: 30rpx; margin-right: 30rpx; " v-if ="tableData.length >0">
< uni -row style = "margin-top: 10px; margin-left: 30rpx; margin-right: 30rpx" v-if ="tableData.length > 0">
< uni -col :span ="3" >
< view class = "titleStyle" >
序号
< / view >
< view class = "titleStyle" > 序号 < / view >
< / u n i - c o l >
< uni -col :span ="5" >
< view class = "titleStyle" >
姓名
< / view >
< view class = "titleStyle" > 姓名 < / view >
< / u n i - c o l >
< uni -col :span ="5" >
< view class = "titleStyle" >
性别
< / view >
< view class = "titleStyle" > 性别 < / view >
< / u n i - c o l >
< uni -col :span ="5" >
< view class = "titleStyle" >
年龄
< / view >
< view class = "titleStyle" > 年龄 < / view >
< / u n i - c o l >
< uni -col :span ="6" >
< view class = "titleStyle" >
操作
< / view >
< view class = "titleStyle" > 操作 < / view >
< / u n i - c o l >
< / u n i - r o w >
< scroll -view scroll -y : style = "{ height: bottomHeight + 'px' }">
< uni -row style = "margin-bottom: 10rpx; margin-left: 30rpx;margin-right: 30rpx; ">
< view v-for ="(item, index) in tableData">
< scroll -view scroll -y : style = "{ height: bottomHeight + 'px' }">
< uni -row style = "margin-bottom: 10rpx; margin-left: 30rpx; margin-right: 30rpx">
< view v-for ="(item, index) in tableData">
< uni -col :span ="3" >
< view class = "dataStyle" >
{ { index + 1 } }
{ { index + 1 } }
< / view >
< / u n i - c o l >
< uni -col :span ="5" >
< view class = "dataStyle" >
{ { item . xm } }
{ { item . xm } }
< / view >
< / u n i - c o l > < u n i - c o l : s p a n = " 5 " >
< / u n i - c o l >
< uni -col :span ="5" >
< view class = "dataStyle" >
{ { item . xb _dictText } }
{ { item . xb _dictText } }
< / view >
< / u n i - c o l > < u n i - c o l : s p a n = " 5 " >
< / u n i - c o l >
< uni -col :span ="5" >
< view class = "dataStyle" >
{ { item . nl } }
{ { item . nl } }
< / view >
< / u n i - c o l >
< uni -col :span ="6" >
@ -84,310 +74,297 @@
< button size = "mini" type = "primary" @click ="detail(item)" > 详情 < / button >
< / view >
< / u n i - c o l >
< / view >
< / u n i - r o w >
< / s c r o l l - v i e w >
< / view >
< / template >
< script setup >
import {
ref ,
reactive ,
onMounted
} from 'vue' ;
import * as echarts from 'echarts'
import { ref , reactive , onMounted } from 'vue' ;
import * as echarts from 'echarts' ;
import {
queryRenyuanByDepartID
} from '@/api/renyuan.js'
import { queryRenyuanByDepartID } from '@/api/renyuan.js' ;
/ / 存 储 下 方 组 件 的 高 度
const bottomHeight = ref ( 0 ) ;
/ / 新 增 加 载 状 态
const isLoading = ref ( false ) ;
const orgCode = ref ( '' ) ;
const rawData = ref ( [ ] ) ;
const tableData = ref ( [ ] ) ;
const summary = reactive ( {
total : 0 ,
avgAge : 0
/ / 存 储 下 方 组 件 的 高 度
const bottomHeight = ref ( 0 ) ;
/ / 新 增 加 载 状 态
const isLoading = ref ( false ) ;
const orgCode = ref ( '' ) ;
const rawData = ref ( [ ] ) ;
const tableData = ref ( [ ] ) ;
const summary = reactive ( {
total : 0 ,
avgAge : 0
} ) ;
const chart = ref ( null ) ;
const chartOption = ref ( { } ) ;
const drillPopup = ref ( null ) ;
const drillList = ref ( [ ] ) ;
const drillTitle = ref ( '' ) ;
function detail ( record ) {
/ / c o n s o l e . l o g ( r e c o r d )
uni . navigateTo ( {
url : '/pages/views/renliziyuan/renyuanxinxi/detail?data=' + encodeURIComponent ( JSON . stringify ( record ) )
} ) ;
const chart = ref ( null ) ;
const chartOption = ref ( { } ) ;
const drillPopup = ref ( null ) ;
const drillList = ref ( [ ] ) ;
const drillTitle = ref ( '' ) ;
function detail ( record ) {
/ / c o n s o l e . l o g ( r e c o r d )
uni . navigateTo ( {
url : "/pages/views/renliziyuan/renyuanxinxi/detail?data=" + encodeURIComponent ( JSON . stringify ( record ) )
} )
}
/ / 计 算 年 龄 i n i t C h a r t
const calculateAge = ( birthDate ) => {
const today = new Date ( ) ;
const birth = new Date ( birthDate ) ;
let age = today . getFullYear ( ) - birth . getFullYear ( ) ;
const monthDiff = today . getMonth ( ) - birth . getMonth ( ) ;
if ( monthDiff < 0 || ( monthDiff === 0 && today . getDate ( ) < birth . getDate ( ) ) ) {
age -- ;
}
/ / 计 算 年 龄 i n i t C h a r t
const calculateAge = ( birthDate ) => {
const today = new Date ( ) ;
const birth = new Date ( birthDate ) ;
let age = today . getFullYear ( ) - birth . getFullYear ( ) ;
const monthDiff = today . getMonth ( ) - birth . getMonth ( ) ;
if ( monthDiff < 0 || ( monthDiff === 0 && today . getDate ( ) < birth . getDate ( ) ) ) {
age -- ;
return age ;
} ;
/ / 加 载 数 据
const departChange = async ( e , data ) => {
tableData . value = [ ] ;
console . log ( e ) ;
orgCode . value = e ;
try {
/ / 显 示 加 载 状 态
isLoading . value = true ;
if ( orgCode . value . length <= 6 ) {
console . log ( 123242353 ) ;
uni . showToast ( {
title : '全厂数据较多，请选 下一层级...' ,
icon : 'none' ,
duration : 1000
} ) ;
isLoading . value = false ;
return ;
} else {
uni . showLoading ( {
title : '数据加载中...' ,
mask : true
} ) ;
}
return age ;
} ;
/ / 加 载 数 据
const departChange = async ( e , data ) => {
tableData . value = [ ]
console . log ( e )
orgCode . value = e ;
try {
/ / 显 示 加 载 状 态
isLoading . value = true ;
if ( orgCode . value . length <= 6 ) {
console . log ( 123242353 )
uni . showLoading ( {
title : '全厂数据较多，耐心等待数据加载中...' ,
mask : true
} ) ;
} else {
uni . showLoading ( {
title : '数据加载中...' ,
mask : true
} ) ;
}
let params = {
pageSize : 3000 ,
fields : [ 'xm' , 'nl' , 'xb' , 'xb_dictText' , 'orgCode' , 'jcdw' , 'jcxd' , 'jcxdCode' ]
} ;
if ( orgCode . value . length <= 9 ) {
params . orgCode = orgCode . value
} else {
params . jcxd _code = orgCode . value
}
queryRenyuanByDepartID ( params ) . then ( ( res ) => {
let params = {
pageSize : 3000 ,
fields : [ 'xm' , 'nl' , 'xb' , 'xb_dictText' , 'orgCode' , 'jcdw' , 'jcxd' , 'jcxdCode' ]
} ;
if ( orgCode . value . length <= 9 ) {
params . orgCode = orgCode . value ;
} else {
params . jcxd _code = orgCode . value ;
}
queryRenyuanByDepartID ( params )
. then ( ( res ) => {
if ( res . success ) {
processData ( res . result . records ) ;
/ / 隐 藏 加 载 状 态
isLoading . value = false ;
uni . hideLoading ( ) ;
}
} ) . catch ( ( err ) => {
console . log ( err )
} )
. catch ( ( err ) => {
console . log ( err ) ;
uni . showToast ( {
title : '数据加载失败' ,
icon : 'none'
icon : 'none' ,
duration : 1000
} ) ;
} )
} catch ( error ) {
console . log ( error )
uni . showToast ( {
title : '数据加载失败' ,
icon : 'none'
} ) ;
} finally {
/ / 隐 藏 加 载 状 态
isLoading . value = false ;
uni . hideLoading ( ) ;
}
} ;
} catch ( error ) {
console . log ( error ) ;
uni . showToast ( {
title : '数据加载失败' ,
icon : 'none' ,
duration : 1000
} ) ;
} finally {
/ / 隐 藏 加 载 状 态
isLoading . value = false ;
uni . hideLoading ( ) ;
}
} ;
/ / 数 据 处 理
const processData = ( data ) => {
/ / 添 加 年 龄 字 段 并 过 滤 有 效 数 据
const validData = data . map ( item => ( {
/ / 数 据 处 理
const processData = ( data ) => {
/ / 添 加 年 龄 字 段 并 过 滤 有 效 数 据
const validData = data
. map ( ( item ) => ( {
... item ,
nl : calculateAge ( item . cssj )
} ) ) . filter ( item => item . nl >= 21 && item . nl <= 64 ) ;
/ / 计 算 概 览 数 据
summary . total = validData . length ;
summary . avgAge = validData . reduce ( ( sum , cur ) => sum + cur . nl , 0 ) / summary . total || 0 ;
/ / 生 成 表 格 数 据
/ / t a b l e D a t a . v a l u e = v a l i d D a t a ;
groupsData ( validData ) ;
/ / 生 成 图 表 数 据
generateChartData ( validData ) ;
} ;
/ / 计 算 统 计 信 息 . . .
const subOrgStaffs = ref ( { } ) ; / / 按 下 级 单 位 存 储 所 有 人 员
const ageGroupStaffs = ref ( { } ) ; / / 按 年 龄 段 存 储 所 有 人 员
const groupsData = ( data ) => {
/ / 清 空 旧 数 据
subOrgStaffs . value = { } ;
ageGroupStaffs . value = { } ;
data . reduce ( ( acc , cur ) => {
/ / c o n s o l e . l o g ( c u r )
let subOrg = "" ;
let ageRange = getAgeRange ( cur . nl ) ;
/ / c o n s o l e . l o g ( c u r . o r g C o d e , c u r . j c x d C o d e )
if ( cur . orgCode <= 6 ) {
subOrg = cur . orgCode
} else {
subOrg = cur . jcxdCode
}
/ / 存 储 到 s u b O r g S t a f f s
if ( ! subOrgStaffs . value [ subOrg ] ) {
subOrgStaffs . value [ subOrg ] = [ ] ;
}
subOrgStaffs . value [ subOrg ] . push ( cur ) ;
/ / 存 储 到 a g e G r o u p S t a f f s
if ( ! ageGroupStaffs . value [ ageRange ] ) {
ageGroupStaffs . value [ ageRange ] = [ ] ;
}
ageGroupStaffs . value [ ageRange ] . push ( cur ) ;
} )
}
/ / 新 增 年 龄 范 围 计 算 方 法
const getAgeRange = ( age ) => {
const ranges = [ '21-30岁' , '31-40岁' , '41-50岁' , '51-60岁' , '61-64岁' ] ;
const index = Math . floor ( ( age - 21 ) / 10 ) ;
return ranges [ index ] || '其他' ;
} ;
/ / 修 改 后 的 显 示 人 员 列 表 方 法
const showStaffList = ( subOrg , ageRange ) => {
/ / 从 结 构 化 数 据 中 直 接 获 取
const targetStaffs = subOrgStaffs . value [ subOrg ] . filter ( staff =>
getAgeRange ( staff . nl ) === ageRange
) ;
staffList . value = targetStaffs ;
popupTitle . value = ` ${ subOrg } ${ ageRange } 人员列表（共 ${ targetStaffs . length } 人） ` ;
popup . value . open ( ) ;
} ;
/ / 新 增 获 取 指 定 单 位 人 员 的 方 法
const getSubOrgStaffs = ( subOrgCode ) => {
return subOrgStaffs . value [ subOrgCode ] || [ ] ;
} ;
/ / 新 增 获 取 指 定 年 龄 段 人 员 的 方 法
const getAgeGroupStaffs = ( ageRange ) => {
return ageGroupStaffs . value [ ageRange ] || [ ] ;
} ;
/ / 生 成 图 表 数 据 （ 修 改 部 分 ）
const generateChartData = ( data ) => {
/ / 按 基 层 单 位 分 组
const ageRanges = [ '21-30岁' , '31-40岁' , '41-50岁' , '51-60岁' , '61-64岁' ] ;
const jcdwGroups = data . reduce ( ( acc , cur ) => {
if ( ! acc [ cur . jcdw ] ) {
acc [ cur . jcdw ] = {
ageGroups : [ 0 , 0 , 0 , 0 , 0 ] / / 2 1 - 3 0 , 3 1 - 4 0 , 4 1 - 5 0 , 5 1 - 6 0 , 6 1 - 6 4
} ;
}
const ageGroup = Math . floor ( ( cur . nl - 21 ) / 10 ) ;
/ / c o n s o l e . l o g ( a g e G r o u p , c u r . j c d w )
if ( ageGroup >= 0 && ageGroup <= 4 ) {
acc [ cur . jcdw ] . ageGroups [ ageGroup ] ++ ;
}
return acc ;
} , { } ) ;
/ / 生 成 分 组 柱 状 图 配 置
const xData = Object . keys ( jcdwGroups ) ;
const seriesData = ageRanges . map ( ( range , index ) => ( {
name : range ,
type : 'bar' ,
data : xData . map ( jcdw => jcdwGroups [ jcdw ] . ageGroups [ index ] || 0 ) ,
itemStyle : {
color : [ '#5470C6' , '#91CC75' , '#FAC858' , '#EE6666' , '#73C0DE' ] [ index ]
} ,
/ / 显 示 数 值 标 签
label : {
show : true ,
position : 'top'
} ,
/ / 设 置 柱 宽 为 2 0 像 素
/ / b a r W i d t h : 2 0
} ) )
chartOption . value = {
title : {
text : '人员年龄分组统计' ,
padding : [ 0 , 0 , 0 , 30 ] ,
} ,
toolbox : {
padding : [ 0 , 30 , 0 , 0 ] ,
show : true ,
feature : {
/ / 工 具 配 置 项
. filter ( ( item ) => item . nl >= 21 && item . nl <= 64 ) ;
/ / 计 算 概 览 数 据
summary . total = validData . length ;
summary . avgAge = validData . reduce ( ( sum , cur ) => sum + cur . nl , 0 ) / summary . total || 0 ;
/ / 生 成 表 格 数 据
/ / t a b l e D a t a . v a l u e = v a l i d D a t a ;
restore : {
show : true / / 是 否 显 示 该 工 具
} ,
saveAsImage : {
show : true / / 是 否 显 示 该 工 具
}
}
} ,
/ / t o o l t i p : {
/ / t r i g g e r : ' a x i s ' ,
/ / a x i s P o i n t e r : {
/ / t y p e : ' s h a d o w ' ,
/ / l a b e l : {
/ / s h o w : f a l s e
/ / }
/ / }
/ / } ,
grid : {
top : '15%' ,
left : '4%' ,
right : '4%' ,
bottom : '10%' ,
containLabel : true
} ,
legend : {
data : ageRanges ,
itemGap : 5 ,
padding : [ 0 , 15 , 0 , 15 ] ,
y : 'bottom' ,
itemHeight : 8 , / / 高
itemWidth : 8 , / / 宽
type : 'scroll'
} ,
xAxis : {
type : 'category' ,
data : xData ,
axisLabel : {
color : '#7F84B5' ,
fontWeight : 300 ,
interval : 0 ,
rotate : 0 ,
groupsData ( validData ) ;
/ / 生 成 图 表 数 据
generateChartData ( validData ) ;
} ;
/ / 计 算 统 计 信 息 . . .
const subOrgStaffs = ref ( { } ) ; / / 按 下 级 单 位 存 储 所 有 人 员
const ageGroupStaffs = ref ( { } ) ; / / 按 年 龄 段 存 储 所 有 人 员
const groupsData = ( data ) => {
/ / 清 空 旧 数 据
subOrgStaffs . value = { } ;
ageGroupStaffs . value = { } ;
data . reduce ( ( acc , cur ) => {
/ / c o n s o l e . l o g ( c u r )
let subOrg = '' ;
let ageRange = getAgeRange ( cur . nl ) ;
/ / c o n s o l e . l o g ( c u r . o r g C o d e , c u r . j c x d C o d e )
if ( cur . orgCode <= 6 ) {
subOrg = cur . orgCode ;
} else {
subOrg = cur . jcxdCode ;
}
/ / 存 储 到 s u b O r g S t a f f s
if ( ! subOrgStaffs . value [ subOrg ] ) {
subOrgStaffs . value [ subOrg ] = [ ] ;
}
subOrgStaffs . value [ subOrg ] . push ( cur ) ;
/ / 存 储 到 a g e G r o u p S t a f f s
if ( ! ageGroupStaffs . value [ ageRange ] ) {
ageGroupStaffs . value [ ageRange ] = [ ] ;
}
ageGroupStaffs . value [ ageRange ] . push ( cur ) ;
} ) ;
} ;
/ / 新 增 年 龄 范 围 计 算 方 法
const getAgeRange = ( age ) => {
const ranges = [ '21-30岁' , '31-40岁' , '41-50岁' , '51-60岁' , '61-64岁' ] ;
const index = Math . floor ( ( age - 21 ) / 10 ) ;
return ranges [ index ] || '其他' ;
} ;
/ / 修 改 后 的 显 示 人 员 列 表 方 法
const showStaffList = ( subOrg , ageRange ) => {
/ / 从 结 构 化 数 据 中 直 接 获 取
const targetStaffs = subOrgStaffs . value [ subOrg ] . filter ( ( staff ) => getAgeRange ( staff . nl ) === ageRange ) ;
staffList . value = targetStaffs ;
popupTitle . value = ` ${ subOrg } ${ ageRange } 人员列表（共 ${ targetStaffs . length } 人） ` ;
popup . value . open ( ) ;
} ;
/ / 新 增 获 取 指 定 单 位 人 员 的 方 法
const getSubOrgStaffs = ( subOrgCode ) => {
return subOrgStaffs . value [ subOrgCode ] || [ ] ;
} ;
/ / 新 增 获 取 指 定 年 龄 段 人 员 的 方 法
const getAgeGroupStaffs = ( ageRange ) => {
return ageGroupStaffs . value [ ageRange ] || [ ] ;
} ;
/ / 生 成 图 表 数 据 （ 修 改 部 分 ）
const generateChartData = ( data ) => {
/ / 按 基 层 单 位 分 组
const ageRanges = [ '21-30岁' , '31-40岁' , '41-50岁' , '51-60岁' , '61-64岁' ] ;
const jcdwGroups = data . reduce ( ( acc , cur ) => {
if ( ! acc [ cur . jcdw ] ) {
acc [ cur . jcdw ] = {
ageGroups : [ 0 , 0 , 0 , 0 , 0 ] / / 2 1 - 3 0 , 3 1 - 4 0 , 4 1 - 5 0 , 5 1 - 6 0 , 6 1 - 6 4
} ;
}
const ageGroup = Math . floor ( ( cur . nl - 21 ) / 10 ) ;
/ / c o n s o l e . l o g ( a g e G r o u p , c u r . j c d w )
if ( ageGroup >= 0 && ageGroup <= 4 ) {
acc [ cur . jcdw ] . ageGroups [ ageGroup ] ++ ;
}
return acc ;
} , { } ) ;
/ / 生 成 分 组 柱 状 图 配 置
const xData = Object . keys ( jcdwGroups ) ;
const seriesData = ageRanges . map ( ( range , index ) => ( {
name : range ,
type : 'bar' ,
data : xData . map ( ( jcdw ) => jcdwGroups [ jcdw ] . ageGroups [ index ] || 0 ) ,
itemStyle : {
color : [ '#5470C6' , '#91CC75' , '#FAC858' , '#EE6666' , '#73C0DE' ] [ index ]
} ,
/ / 显 示 数 值 标 签
label : {
show : true ,
position : 'top'
}
/ / 设 置 柱 宽 为 2 0 像 素
/ / b a r W i d t h : 2 0
} ) ) ;
chartOption . value = {
title : {
text : '人员年龄分组统计' ,
padding : [ 0 , 0 , 0 , 30 ]
} ,
toolbox : {
padding : [ 0 , 30 , 0 , 0 ] ,
show : true ,
feature : {
/ / 工 具 配 置 项
restore : {
show : true / / 是 否 显 示 该 工 具
} ,
padding : [ 0 , 10 , 0 , 10 ] ,
axisTick : {
show : false / / 刻 度 线
} ,
axisLine : {
show : false / / 不 显 示 坐 标 轴 线
saveAsImage : {
show : true / / 是 否 显 示 该 工 具
}
}
} ,
/ / t o o l t i p : {
/ / t r i g g e r : ' a x i s ' ,
/ / a x i s P o i n t e r : {
/ / t y p e : ' s h a d o w ' ,
/ / l a b e l : {
/ / s h o w : f a l s e
/ / }
/ / }
/ / } ,
grid : {
top : '15%' ,
left : '4%' ,
right : '4%' ,
bottom : '10%' ,
containLabel : true
} ,
legend : {
data : ageRanges ,
itemGap : 5 ,
padding : [ 0 , 15 , 0 , 15 ] ,
y : 'bottom' ,
itemHeight : 8 , / / 高
itemWidth : 8 , / / 宽
type : 'scroll'
} ,
xAxis : {
type : 'category' ,
data : xData ,
axisLabel : {
color : '#7F84B5' ,
fontWeight : 300 ,
interval : 0 ,
rotate : 0
} ,
yAxis : [ {
padding : [ 0 , 10 , 0 , 10 ] ,
axisTick : {
show : false / / 刻 度 线
} ,
axisLine : {
show : false / / 不 显 示 坐 标 轴 线
}
} ,
yAxis : [
{
show : true ,
boundaryGap : false , / / 解 决 数 据 与 线 不 对 应 问 题
type : 'value' ,
@ -411,153 +388,147 @@
axisLine : {
show : false / / 不 显 示 坐 标 轴 线
}
} ] ,
series : seriesData ,
} ;
/ / 初 始 化 图 表
setTimeout ( async ( ) => {
if ( ! chart . value ) return
const myChart = await chart . value . init ( echarts )
myChart . setOption ( chartOption . value )
myChart . on ( 'click' , ( params ) => {
console . log ( params . seriesName )
tableData . value = getAgeGroupStaffs ( params . seriesName )
} )
} , 300 )
/ / # i f d e f A P P
getHeight ( ) ;
/ / # e n d i f
}
] ,
series : seriesData
} ;
onMounted ( ( ) => {
/ / # i f d e f A P P
getHeight ( ) ;
/ / # e n d i f
} )
/ / # i f d e f A P P
const getHeight = ( ) => {
/ / 获 取 屏 幕 高 度
const systemInfo = uni . getSystemInfoSync ( ) ;
const screenHeight = systemInfo . screenHeight ;
/ / 创 建 选 择 器 查 询 对 象
const query = uni . createSelectorQuery ( ) ;
/ / 获 取 上 方 组 件 的 高 度
query
. select ( '#top1' )
. boundingClientRect ( ( rect1 ) => {
/ / 计 算 上 方 组 件 高 度 总 和
const topComponentsHeight = rect1 . height
/ / 计 算 下 方 组 件 的 高 度
bottomHeight . value = screenHeight - topComponentsHeight - 415 ;
} )
. exec ( ) ;
} ;
/ / # e n d i f
/ / 初 始 化 图 表
const initChart = ( ) => {
setTimeout ( async ( ) => {
if ( ! chart . value ) return
const myChart = await chart . value . init ( echarts )
myChart . setOption ( chartOption . value )
} , 300 )
} ;
setTimeout ( async ( ) => {
if ( ! chart . value ) return ;
const myChart = await chart . value . init ( echarts ) ;
myChart . setOption ( chartOption . value ) ;
myChart . on ( 'click' , ( params ) => {
console . log ( params . seriesName ) ;
tableData . value = getAgeGroupStaffs ( params . seriesName ) ;
} ) ;
} , 300 ) ;
/ / # i f d e f A P P
getHeight ( ) ;
/ / # e n d i f
} ;
onMounted ( ( ) => {
/ / # i f d e f A P P
getHeight ( ) ;
/ / # e n d i f
} ) ;
/ / # i f d e f A P P
const getHeight = ( ) => {
/ / 获 取 屏 幕 高 度
const systemInfo = uni . getSystemInfoSync ( ) ;
const screenHeight = systemInfo . screenHeight ;
/ / 创 建 选 择 器 查 询 对 象
const query = uni . createSelectorQuery ( ) ;
/ / 获 取 上 方 组 件 的 高 度
query
. select ( '#top1' )
. boundingClientRect ( ( rect1 ) => {
/ / 计 算 上 方 组 件 高 度 总 和
const topComponentsHeight = rect1 . height ;
/ / 计 算 下 方 组 件 的 高 度
bottomHeight . value = screenHeight - topComponentsHeight - 415 ;
} )
. exec ( ) ;
} ;
/ / # e n d i f
/ / 初 始 化 图 表
const initChart = ( ) => {
setTimeout ( async ( ) => {
if ( ! chart . value ) return ;
const myChart = await chart . value . init ( echarts ) ;
myChart . setOption ( chartOption . value ) ;
} , 300 ) ;
} ;
< / script >
< style scoped >
. container {
margin : 20 , 20 , 20 , 20 rpx ;
}
. container {
margin : 20 , 20 , 20 , 20 rpx ;
}
. input - group {
display : flex ;
gap : 20 rpx ;
margin - bottom : 30 rpx ;
}
. input - group {
display : flex ;
gap : 20 rpx ;
margin - bottom : 30 rpx ;
}
. input {
flex : 1 ;
border : 1 rpx solid # ddd ;
padding : 15 rpx ;
border - radius : 8 rpx ;
}
. input {
flex : 1 ;
border : 1 rpx solid # ddd ;
padding : 15 rpx ;
border - radius : 8 rpx ;
}
. query - btn {
background : # 007 AFF ;
color : white ;
padding : 0 40 rpx ;
border - radius : 8 rpx ;
}
. query - btn {
background : # 007 aff ;
color : white ;
padding : 0 40 rpx ;
border - radius : 8 rpx ;
}
. stats - box {
display : flex ;
justify - content : space - around ;
margin : 30 rpx 0 ;
padding : 20 rpx ;
background : # f8f8f8 ;
border - radius : 12 rpx ;
}
. stats - box {
display : flex ;
justify - content : space - around ;
margin : 30 rpx 0 ;
padding : 20 rpx ;
background : # f8f8f8 ;
border - radius : 12 rpx ;
}
. stat - item {
display : flex ;
flex - direction : column ;
align - items : center ;
}
. stat - item {
display : flex ;
flex - direction : column ;
align - items : center ;
}
. label {
font - size : 24 rpx ;
color : # 666 ;
}
. label {
font - size : 24 rpx ;
color : # 666 ;
}
. value {
font - size : 36 rpx ;
font - weight : bold ;
color : # 0000 ff ;
}
. value {
font - size : 36 rpx ;
font - weight : bold ;
color : # 0000 ff ;
}
. chart - container {
height : 400 rpx ;
margin - top : 20 rpx ;
}
. chart - container {
height : 400 rpx ;
margin - top : 20 rpx ;
}
. titleStyle {
font - size : 12 px ;
color : # 747474 ;
line - height : 30 px ;
height : 30 px ;
background : # F2F9FC ;
text - align : center ;
vertical - align : middle ;
border - left : 1 px solid # 919191 ;
border - bottom : 1 px solid # 919191 ;
;
}
. titleStyle {
font - size : 12 px ;
color : # 747474 ;
line - height : 30 px ;
height : 30 px ;
background : # f2f9fc ;
text - align : center ;
vertical - align : middle ;
border - left : 1 px solid # 919191 ;
border - bottom : 1 px solid # 919191 ;
}
/* 内容样式 */
. dataStyle {
max - font - size : 14 px ;
/* 最大字体限制 */
min - font - size : 10 px ;
/* 最小字体限制 */
font - size : 12 px ;
color : # 00007 f ;
line - height : 30 px ;
height : 30 px ;
font - weight : 500 ;
text - align : center ;
vertical - align : middle ;
border - bottom : 1 px solid # 919191 ;
border - left : 1 px solid # 919191 ;
text - overflow : ellipsis ;
}
< / style >
/* 内容样式 */
. dataStyle {
max - font - size : 14 px ;
/* 最大字体限制 */
min - font - size : 10 px ;
/* 最小字体限制 */
font - size : 12 px ;
color : # 00007 f ;
line - height : 30 px ;
height : 30 px ;
font - weight : 500 ;
text - align : center ;
vertical - align : middle ;
border - bottom : 1 px solid # 919191 ;
border - left : 1 px solid # 919191 ;
text - overflow : ellipsis ;
}
< / style >
