@ -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,52 +74,43 @@
< 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 ( {
/ / 存 储 下 方 组 件 的 高 度
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 ( '' ) ;
} ) ;
const chart = ref ( null ) ;
const chartOption = ref ( { } ) ;
const drillPopup = ref ( null ) ;
const drillList = ref ( [ ] ) ;
const drillTitle = ref ( '' ) ;
function detail ( record ) {
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 ) => {
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 ( ) ;
@ -138,24 +119,25 @@
age -- ;
}
return age ;
} ;
/ / 加 载 数 据
const departChange = async ( e , data ) => {
tableData . value = [ ]
console . log ( e )
} ;
/ / 加 载 数 据
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
console . log ( 123242353 ) ;
uni . showToast ( {
title: '全厂数据较多，请选 下一层级...' ,
icon : 'none ,
duration : 1000
} ) ;
isLoading . value = false ;
return ;
} else {
uni . showLoading ( {
title : '数据加载中...' ,
@ -168,51 +150,51 @@
fields : [ 'xm' , 'nl' , 'xb' , 'xb_dictText' , 'orgCode' , 'jcdw' , 'jcxd' , 'jcxdCode' ]
} ;
if ( orgCode . value . length <= 9 ) {
params . orgCode = orgCode . value
params . orgCode = orgCode . value ;
} else {
params . jcxd _code = orgCode . value
params . jcxd _code = orgCode . value ;
}
queryRenyuanByDepartID ( params ) . then ( ( res ) => {
queryRenyuanByDepartID ( params )
. then ( ( res ) => {
if ( res . success ) {
processData ( res . result . records ) ;
/ / 隐 藏 加 载 状 态
isLoading . value = false ;
uni . hideLoading ( ) ;
}
} ) . catch ( ( err ) => {
console . log ( err )
uni . showToast ( {
title : '数据加载失败' ,
icon : 'none'
} ) ;
} )
} catch ( error ) {
console . log ( error )
. catch ( ( err ) => {
console . log ( err ) ;
uni . showToast ( {
title : '数据加载失败' ,
icon : 'none'
icon : 'none' ,
duration : 1000
} ) ;
} ) ;
} catch ( error ) {
console . log ( error ) ;
uni . showToast ( {
title : '数据加载失败' ,
icon : 'none' ,
duration : 1000
} ) ;
} finally {
/ / 隐 藏 加 载 状 态
isLoading . value = false ;
uni . hideLoading ( ) ;
}
} ;
/ / 数 据 处 理
const processData = ( data ) => {
} ;
/ / 数 据 处 理
const processData = ( data ) => {
/ / 添 加 年 龄 字 段 并 过 滤 有 效 数 据
const validData = data . map ( item => ( {
const validData = data
. map ( ( item ) => ( {
... item ,
nl : calculateAge ( item . cssj )
} ) ) . filter ( item => item . nl >= 21 && item . nl <= 64 ) ;
} ) )
. 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 ;
@ -222,27 +204,25 @@
groupsData ( validData ) ;
/ / 生 成 图 表 数 据
generateChartData ( validData ) ;
} ;
} ;
/ / 计 算 统 计 信 息 . . .
const subOrgStaffs = ref ( { } ) ; / / 按 下 级 单 位 存 储 所 有 人 员
const ageGroupStaffs = ref ( { } ) ; / / 按 年 龄 段 存 储 所 有 人 员
/ / 计 算 统 计 信 息 . . .
const subOrgStaffs = ref ( { } ) ; / / 按 下 级 单 位 存 储 所 有 人 员
const ageGroupStaffs = ref ( { } ) ; / / 按 年 龄 段 存 储 所 有 人 员
const groupsData = ( data ) => {
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 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
subOrg = cur . orgCode ;
} else {
subOrg = cur . jcxdCode
subOrg = cur . jcxdCode ;
}
/ / 存 储 到 s u b O r g S t a f f s
@ -256,41 +236,38 @@
ageGroupStaffs . value [ ageRange ] = [ ] ;
}
ageGroupStaffs . value [ ageRange ] . push ( cur ) ;
} )
}
} ) ;
} ;
/ / 新 增 年 龄 范 围 计 算 方 法
const getAgeRange = ( age ) => {
/ / 新 增 年 龄 范 围 计 算 方 法
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 showStaffList = ( subOrg , ageRange ) => {
/ / 从 结 构 化 数 据 中 直 接 获 取
const targetStaffs = subOrgStaffs . value [ subOrg ] . filter ( staff =>
getAgeRange ( staff . nl ) === 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 ) => {
/ / 新 增 获 取 指 定 单 位 人 员 的 方 法
const getSubOrgStaffs = ( subOrgCode ) => {
return subOrgStaffs . value [ subOrgCode ] || [ ] ;
} ;
} ;
/ / 新 增 获 取 指 定 年 龄 段 人 员 的 方 法
const getAgeGroupStaffs = ( ageRange ) => {
/ / 新 增 获 取 指 定 年 龄 段 人 员 的 方 法
const getAgeGroupStaffs = ( ageRange ) => {
return ageGroupStaffs . value [ ageRange ] || [ ] ;
} ;
} ;
/ / 生 成 图 表 数 据 （ 修 改 部 分 ）
const generateChartData = ( data ) => {
/ / 生 成 图 表 数 据 （ 修 改 部 分 ）
const generateChartData = ( data ) => {
/ / 按 基 层 单 位 分 组
const ageRanges = [ '21-30岁' , '31-40岁' , '41-50岁' , '51-60岁' , '61-64岁' ] ;
const jcdwGroups = data . reduce ( ( acc , cur ) => {
@ -307,14 +284,13 @@
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 ) ,
data : xData . map ( ( jcdw ) => jcdwGroups [ jcdw ] . ageGroups [ index ] || 0 ) ,
itemStyle : {
color : [ '#5470C6' , '#91CC75' , '#FAC858' , '#EE6666' , '#73C0DE' ] [ index ]
} ,
@ -322,14 +298,14 @@
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 ] ,
padding : [ 0 , 0 , 0 , 30 ]
} ,
toolbox : {
padding : [ 0 , 30 , 0 , 0 ] ,
@ -377,7 +353,7 @@
color : '#7F84B5' ,
fontWeight : 300 ,
interval : 0 ,
rotate : 0 ,
rotate : 0
} ,
padding : [ 0 , 10 , 0 , 10 ] ,
axisTick : {
@ -387,7 +363,8 @@
show : false / / 不 显 示 坐 标 轴 线
}
} ,
yAxis : [ {
yAxis : [
{
show : true ,
boundaryGap : false , / / 解 决 数 据 与 线 不 对 应 问 题
type : 'value' ,
@ -411,40 +388,36 @@
axisLine : {
show : false / / 不 显 示 坐 标 轴 线
}
} ] ,
series : seriesData ,
}
] ,
series : seriesData
} ;
/ / 初 始 化 图 表
setTimeout ( async ( ) => {
if ( ! chart . value ) return
const myChart = await chart . value . init ( echarts )
myChart . setOption ( chartOption . value )
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 )
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 ( ( ) => {
onMounted ( ( ) => {
/ / # i f d e f A P P
getHeight ( ) ;
/ / # e n d i f
} )
/ / # i f d e f A P P
} ) ;
/ / # i f d e f A P P
const getHeight = ( ) => {
const getHeight = ( ) => {
/ / 获 取 屏 幕 高 度
const systemInfo = uni . getSystemInfoSync ( ) ;
const screenHeight = systemInfo . screenHeight ;
@ -455,95 +428,94 @@
. select ( '#top1' )
. boundingClientRect ( ( rect1 ) => {
/ / 计 算 上 方 组 件 高 度 总 和
const topComponentsHeight = rect1 . height
const topComponentsHeight = rect1 . height ;
/ / 计 算 下 方 组 件 的 高 度
bottomHeight . value = screenHeight - topComponentsHeight - 415 ;
} )
. exec ( ) ;
} ;
} ;
/ / # e n d i f
/ / 初 始 化 图 表
const initChart = ( ) => {
/ / # 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 )
} ;
if ( ! chart . value ) return ;
const myChart = await chart . value . init ( echarts ) ;
myChart . setOption ( chartOption . value ) ;
} , 300 ) ;
} ;
< / script >
< style scoped >
. container {
. container {
margin : 20 , 20 , 20 , 20 rpx ;
}
}
. input - group {
. input - group {
display : flex ;
gap : 20 rpx ;
margin - bottom : 30 rpx ;
}
}
. input {
. input {
flex : 1 ;
border : 1 rpx solid # ddd ;
padding : 15 rpx ;
border - radius : 8 rpx ;
}
}
. query - btn {
background : # 007 AFF ;
. query - btn {
background : # 007 aff ;
color : white ;
padding : 0 40 rpx ;
border - radius : 8 rpx ;
}
}
. stats - box {
. stats - box {
display : flex ;
justify - content : space - around ;
margin : 30 rpx 0 ;
padding : 20 rpx ;
background : # f8f8f8 ;
border - radius : 12 rpx ;
}
}
. stat - item {
. stat - item {
display : flex ;
flex - direction : column ;
align - items : center ;
}
}
. label {
. label {
font - size : 24 rpx ;
color : # 666 ;
}
}
. value {
. value {
font - size : 36 rpx ;
font - weight : bold ;
color : # 0000 ff ;
}
}
. chart - container {
. chart - container {
height : 400 rpx ;
margin - top : 20 rpx ;
}
}
. titleStyle {
. titleStyle {
font - size : 12 px ;
color : # 747474 ;
line - height : 30 px ;
height : 30 px ;
background : # F2F9FC ;
background : # f2f9fc ;
text - align : center ;
vertical - align : middle ;
border - left : 1 px solid # 919191 ;
border - bottom : 1 px solid # 919191 ;
;
}
}
/* 内容样式 */
. dataStyle {
/* 内容样式 */
. dataStyle {
max - font - size : 14 px ;
/* 最大字体限制 */
min - font - size : 10 px ;
@ -558,6 +530,5 @@
border - bottom : 1 px solid # 919191 ;
border - left : 1 px solid # 919191 ;
text - overflow : ellipsis ;
}
}
< / style >
