@ -1,63 +1,56 @@
< 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'" 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 -col :span ="24" >
< uni -row style = "margin-bottom: 10rpx; margin-left: 30rpx; margin-right: 30rpx" >
< uni -col :span ="5" > < uni -title :title ="'选择单位'" align = "left" type = "h4" > < / u n i - t i t l e > < / u n i - c o l >
< uni -col :span ="19" >
< trq -depart -select v -model = " selectedOrgCode " returnCodeOrID = "orgCode"
@ change = "onOrgCodeChange" > < / t r q - d e p a r t - s e l e c t >
< / 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 -col :span =" 24" >
< picker mode = "selector" :range ="fieldList" range -key = " label " @change ="onFieldChange" >
< view class = "picker" > 选择字段 : { { selectedFieldLabel } } < / view >
< / picker
< uni -row style = "margin-bottom: 20rpx; margin-left: 30rpx; margin-right: 30rpx">
< uni -col :span =" 5"> < uni -title :title ="'选择字段'" align = "left" type = "h4" > < / u n i - t i t l e > < / u n i - c o l >
< uni -col :span ="19" >
< uni -data -select v -model = " selectedField " :localdata ="fieldList"
@ change = "onFieldChange" > < / u n i - d a t a - s e l e c t >
< / u n i - c o l >
< / u n i - r o w >
< / view >
<!-- ECharts图表 -- >
< view class = "chart-container" >
< l -echart ref = "chart" @finished ="initChart" @tap ="onChartClick" / >
< l -echart ref = "chart" @finished ="initChart" / >
< / view >
<!-- 翻页按钮 -- >
< view style = "display: flex; justify-content: center; margin-top: 20px" >
< button @click ="prevPage" : disabled = "currentPage === 1" > 上一页 < / button >
< button @click ="nextPage" : disabled = "currentPage * pageSize >= chartDataCount.value" > 下一页 < / button >
< / view >
<!-- 数据表格 -- >
< uni -row style = "margin-top: 10px; margin-left: 30rpx;margin-right: 30rpx;" v-if ="personnelList.length>0" >
< uni -row style = "margin-top: 10px; margin-left: 30rpx; margin-right: 30rpx" v-if ="personnelList.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; ">
< uni -row style = "margin-bottom: 10rpx; margin-left: 30rpx; margin-right: 30rpx">
< view v-for ="(item, index) in personnelList" >
< uni -col :span ="3" >
< view class = "dataStyle" >
@ -68,11 +61,13 @@
< view class = "dataStyle" >
{ { 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 } }
< / 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 } }
< / view >
@ -92,71 +87,79 @@
import {
ref ,
reactive ,
onMounted
onMounted ,
computed
} from 'vue' ;
import * as echarts from 'echarts' ;
import {
cxcRyDatAstatistics ,
cxcRyDatAstatisticsDetails
} from '@/api/renyuan.js' ;
import {
initDictOption
} from '@/api/common.js' ;
/ / 存 储 下 方 组 件 的 高 度 t a b l e D a t a
const bottomHeight = ref ( 0 ) ;
/ / 新 增 加 载 状 态
const chart = ref ( null ) ;
const chartDataCount = ref ( 0 ) ;
const fieldList = ref ( [ {
label : '性别' ,
value : 'xb'
text : '性别' ,
value : 'xb' ,
isDict : true ,
dictCode : 'sex'
} ,
{
label : '年龄' ,
value : 'nl'
text : '政治面貌' ,
value : 'zzmm' ,
isDict : false ,
dictCode : ''
} ,
{
label : '学历' ,
value : 'whcd1'
} ,
text : '民族' ,
value : 'mz' ,
isDict : true ,
dictCode : 'mz'
}
] ) ; / / 字 段 列 表
const dictCode = ref ( "" )
const fieldisDict = ref ( true ) ;
const selectedOrgCode = ref ( '' ) ; / / 当 前 选 择 的 单 位 o r g C o d e
const selectedOrgCodeLabel = ref ( '请选择单位' ) ; / / 当 前 选 择 的 单 位 名 称
const selectedField = ref ( '' ) ; / / 当 前 选 择 的 字 段
const selectedFieldLabel = ref ( '请选择字段' ) ; / / 当 前 选 择 的 字 段 名 称
const orgCodeGroupData = ref ( [ ] ) ; / / 按 照 o r g c o d e 进 行 分 组 的 数 据 含 劳 动 合 同 号
const chartData = ref ( { } ) ; / / 图 表 数 据
const personnelList = ref ( [ ] ) ; / / 人 员 列 表 i n i t C h a r t
const fieldValues = ref ( [ ] ) ;
const chartOption = ref ( { } ) ;
const chartOption = ref ( {
tooltip : {
trigger : 'axis' ,
axisPointer : {
type : 'shadow' ,
} ,
} ,
xAxis : {
type : 'category' ,
data : [ ] ,
} ,
yAxis : {
type : 'value' ,
} ,
series : [ {
name : '数量' ,
type : 'bar' ,
data : [ ] ,
} , ] ,
} )
const chartTitle = computed ( ( ) => {
return selectedOrgCodeLabel . value + '人员(' + selectedFieldLabel . value + ')分组统计' ;
} ) ;
/ / 图 标 翻 页
const pageSize = ref ( 3 ) ; / / 每 页 显 示 的 项 目 数 量
const currentPage = ref ( 1 ) ; / / 当 前 页 码
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 ) )
} )
url : '/pages/views/renliziyuan/renyuanxinxi/detail?data=' + encodeURIComponent ( JSON . stringify ( record ) )
} ) ;
}
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 = ( ) => {
@ -170,7 +173,7 @@
. select ( '#top1' )
. boundingClientRect ( ( rect1 ) => {
/ / 计 算 上 方 组 件 高 度 总 和
const topComponentsHeight = rect1 . height
const topComponentsHeight = rect1 . height ;
/ / 计 算 下 方 组 件 的 高 度
bottomHeight . value = screenHeight - topComponentsHeight - 415 ;
} )
@ -182,39 +185,451 @@
/ / 初 始 化 图 表
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 ) ;
} ;
/ / 更 新 图 表
const updateChart = ( ) => {
if ( ! chart ) return ;
const {
xb ,
number
} = chartData . value ;
chart . setOption ( {
xAxis : {
data : xb ,
} ,
series : [ {
data : number ,
} , ] ,
const prevPage = ( ) => {
if ( currentPage . value > 1 ) {
currentPage . value -- ;
}
}
const nextPage = ( ) => {
if ( currentPage . value * pageSize . value < chartDataCount . value ) {
currentPage . value ++ ;
/ / 计 算 当 前 页 数 据 的 起 始 和 结 束 索 引
const startIndex = ( currentPage . value - 1 ) * pageSize . value ;
const endIndex = startIndex + pageSize . value ;
/ / c o n s t t e m p C h a r t D a t a = t e m p . s l i c e ( s t a r t I n d e x , e n d I n d e x ) ;
}
}
/ / 更 具 数 据 生 成 图 标 的 o p t i o n
const getChartOption = ( tempChartData ) => {
/ / l e t t e m p = J S O N . p a r s e ( J S O N . s t r i n g i f y ( t e m p c h a r t D a t a [ 0 ] . c h i l d r e n ) ) ;
/ / c h a r t D a t a C o u n t . v a l u e = t e m p . l e n g t h ;
/ / / / 计 算 当 前 页 数 据 的 起 始 和 结 束 索 引
/ / c o n s t s t a r t I n d e x = ( c u r r e n t P a g e . v a l u e - 1 ) * p a g e S i z e . v a l u e ;
/ / c o n s t e n d I n d e x = s t a r t I n d e x + p a g e S i z e . v a l u e ;
/ / / / 截 取 当 前 页 的 数 据
/ / c o n s t t e m p C h a r t D a t a = t e m p . s l i c e ( s t a r t I n d e x , e n d I n d e x ) ;
let xData = [ ] ;
let seriesData = [ ] ;
/ / c o n s o l e . l o g ( 1 , t e m p ) ;
/ / 当 前 机 构 下 的 数 据 t r a n s f o r m D a t a F o r E c h a r t s
tempChartData . forEach ( ( item ) => {
xData . push ( item . name ) ;
} ) ;
for ( let i = 0 ; i < fieldValues . value . length ; i ++ ) {
let tempData = [ ] ;
tempChartData . forEach ( ( item ) => {
if ( item . data [ i ] ) {
tempData . push ( item . data [ i ] ) ;
} else {
tempData . push ( 0 ) ;
}
} ) ;
seriesData . push ( {
name : fieldValues . value [ i ] ,
type : 'bar' ,
data : tempData
} ) ;
}
let tempOption = {
title : {
text : chartTitle . value ,
padding : [ 0 , 0 , 0 , 30 ]
} ,
toolbox : {
padding : [ 0 , 30 , 0 , 0 ] ,
show : true ,
feature : {
/ / 工 具 配 置 项
restore : {
show : true / / 是 否 显 示 该 工 具
} ,
saveAsImage : {
show : true / / 是 否 显 示 该 工 具
}
}
} ,
xAxis : {
type : 'category' ,
data : xData ,
axisLabel : {
color : '#7F84B5' ,
fontWeight : 300 ,
interval : 0 ,
rotate : 0
} ,
padding : [ 0 , 10 , 0 , 10 ] ,
axisTick : {
show : false / / 刻 度 线
} ,
axisLine : {
show : false / / 不 显 示 坐 标 轴 线
}
} ,
yAxis : [ {
show : true ,
boundaryGap : false , / / 解 决 数 据 与 线 不 对 应 问 题
type : 'value' ,
/ / n a m e : ' B u d g e t ( m i l l i o n U S D ) ' ,
/ / d a t a : t h i s . y L i s t ,
minInterval : 1 ,
axisLabel : {
interval : 0
} ,
splitLine : {
show : true ,
lineStyle : {
/ / 背 景 网 格 线
type : 'dashed'
}
} ,
axisTick : {
show : true / / 刻 度 线
} ,
axisLine : {
show : false / / 不 显 示 坐 标 轴 线
}
} ] ,
series : seriesData ,
legend : {
data : fieldValues . value ,
itemGap : 5 ,
padding : [ 0 , 15 , 0 , 15 ] ,
y : 'bottom' ,
itemHeight : 8 , / / 高
itemWidth : 18 , / / 宽
type : 'scroll'
}
} ;
/ / 获 取 统 计 数 据
return tempOption
}
/ / 更 新 图 表
const updateChart = ( tempchartData ) => {
/ / 初 始 化 图 表
setTimeout ( async ( ) => {
if ( ! chart . value ) return ;
const myChart = await chart . value . init ( echarts ) ;
console . log ( tempchartData ) ;
myChart . setOption ( getChartOption ( temp ) ) ;
/ / 点 击 钻 取 事 件
myChart . on ( 'click' , ( params ) => {
console . log ( params . name , params . seriesIndex , params . dataIndex ) ;
console . log ( orgCodeGroupData . value ) ;
let updateData = findRyByOrgCode ( orgCodeGroupData . value . children , params . name ) ;
/ / c o n s o l e . l o g ( u p d a t e D a t a ) ;
const ldhth = updateData . fieldValues [ params . dataIndex ] . ldhth ;
console . log ( ldhth ) ;
if ( ldhth && ldhth . length > 0 ) {
fetchPersonnelList ( ldhth ) ;
}
/ / u p d a t e C h a r t ( u p d a t e D a t a ) ;
} ) ;
} , 300 ) ;
} ;
/ / 根 据 一 个 键 值 查 找 数 据
/ / 查 找 人 员 劳 动 合 同 号
function findRyByOrgCode ( treeData , targetOrgCode ) {
/ / c o n s o l e . l o g ( t r e e D a t a , t a r g e t O r g C o d e ) ;
for ( const node of treeData ) {
/ / 如 果 当 前 节 点 匹 配 ， 直 接 返 回 该 节 点 及 其 子 节 点
if ( node . orgCode === targetOrgCode ) {
return node ;
}
/ / 递 归 检 查 子 节 点
if ( node . children && node . children . length > 0 ) {
const found = findNodeByOrgCode ( node . children , targetOrgCode ) ;
if ( found ) return found ;
}
}
return null ;
}
/ * *
* 从echart图标的树状数据中根据 orgCode 获取节点及其子节点数据
* @ param { Array } treeData 树状数据
* @ param { string } targetOrgCode 目标 orgCode
* @ returns { Object | null } 匹配的节点及其子节点数据 ， 未找到返回 null
* /
function findNodeByOrgCode ( treeData , targetOrgCode ) {
/ / c o n s o l e . l o g ( t r e e D a t a , t a r g e t O r g C o d e ) ;
for ( const node of treeData ) {
/ / 如 果 当 前 节 点 匹 配 ， 直 接 返 回 该 节 点 及 其 子 节 点
if ( node . name === targetOrgCode ) {
return node ;
}
/ / 递 归 检 查 子 节 点
if ( node . children && node . children . length > 0 ) {
const found = findNodeByOrgCode ( node . children , targetOrgCode ) ;
if ( found ) return found ;
}
}
return null ;
}
/ / 获 取 所 有 的 f i e l d V a l u e
function collectUniqueKeyValues ( tree , key ) {
const uniqueValues = new Set ( ) ; / / 使 用 S e t 来 自 动 处 理 唯 一 性
function traverse ( node ) {
if ( node [ key ] !== undefined ) {
uniqueValues . add ( node [ key ] ) ;
}
if ( node . children && Array . isArray ( node . children ) ) {
node . children . forEach ( ( child ) => traverse ( child ) ) ;
}
}
tree . forEach ( ( node ) => traverse ( node ) ) ; / / 假 设 t r e e 是 一 个 数 组
return Array . from ( uniqueValues ) ; / / 将 S e t 转 换 为 数 组
}
/ / 示 例 用 法
/ / c o n s t r e s u l t = f i n d N o d e B y O r g C o d e ( e c h a r t D a t a , " A 0 1 A 0 1 A 0 1 A 0 1 " ) ;
/ / c o n s o l e . l o g ( r e s u l t ) ;
/ * *
* 转换数据为支持钻取的ECharts格式
* @ param { Array } data 原始数据
* @ param { string } selectOrgCode 当前选择的组织编码
* @ returns { Object } 包含当前层级数据和子节点信息的对象 符合echart的格式
* /
/ / - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
function transformData ( selectOrgCode , data ) {
const nodes = new Map ( ) ;
/ / 获 取 所 有 的 f i e l d V a l u e 用 于 图 例 和 钻 取 和 d a t a [ ] 中 的 数 据 顺 序 保 持 一 致 动 态 建 立 f i e l d V a l u e 的 数 据
fieldValues . value = collectUniqueKeyValues ( data , 'fieldValue' ) ;
/ / 获 取 o r g C o d e 的 所 有 层 级
function getHierarchy ( orgCode ) {
const hierarchy = [ ] ;
for ( let i = selectOrgCode . length ; i <= orgCode . length ; i += 3 ) {
hierarchy . push ( orgCode . substring ( 0 , i ) ) ;
}
/ / c o n s o l e . l o g ( ' h i e r a r c h y ' , h i e r a r c h y ) ;
return hierarchy ;
}
/ / 获 取 父 级 o r g C o d e
function getParentCode ( code ) {
if ( code . length <= 3 ) return null ;
return code . substring ( 0 , code . length - 3 ) ;
}
/ / 动 态 赋 值 s e r i e s 的 数 据 长 度
let tempArrayValue = new Array ( fieldValues . value . length ) . fill ( 0 ) ;
/ / 创 建 所 有 节 点 并 建 立 父 子 关 系
data . forEach ( ( entry ) => {
const hierarchy = getHierarchy ( entry . orgCode ) ;
hierarchy . forEach ( ( code ) => {
if ( ! nodes . has ( code ) ) {
nodes . set ( code , {
orgCode : code ,
type : 'bar' ,
data : JSON . parse ( JSON . stringify ( tempArrayValue ) ) , / / 初 始 化 d a t a 为 [ 0 , 0 ] 动 态
children : [ ]
} ) ;
}
} ) ;
/ / c o n s o l e . l o g ( ' f i e l d V a l u e s ' , f i e l d V a l u e s . v a l u e , f i e l d V a l u e s . v a l u e . l e n g t h , h i e r a r c h y ) ;
/ / 更 新 当 前 节 点 的 d a t a
const node = nodes . get ( entry . orgCode ) ;
const fieldValue = parseInt ( entry . fieldValue , 10 ) ;
for ( let i = 0 ; i < fieldValues . value . length ; i ++ ) {
if ( fieldValue === parseInt ( fieldValues . value [ i ] , 10 ) ) {
/ / c o n s o l e . l o g ( 5 5 5 , i , f i e l d V a l u e , f i e l d V a l u e s . v a l u e [ i ] , e n t r y . n u m b e r ) ;
node . data [ i ] += entry . number ;
}
}
/ / c o n s o l e . l o g ( 1 1 , n o d e ) ;
/ / 建 立 父 子 关 系
for ( let i = 0 ; i < hierarchy . length - 1 ; i ++ ) {
const parentCode = hierarchy [ i ] ;
const childCode = hierarchy [ i + 1 ] ;
const parentNode = nodes . get ( parentCode ) ;
const childNode = nodes . get ( childCode ) ;
if ( ! parentNode . children . some ( ( c ) => c . orgCode === childCode ) ) {
parentNode . children . push ( childNode ) ;
}
}
} ) ;
/ / 计 算 非 叶 子 节 点 的 d a t a （ 子 节 点 之 和 ）
function computeData ( node ) {
if ( node . children . length === 0 ) return ;
node . data = JSON . parse ( JSON . stringify ( tempArrayValue ) ) ;
node . children . forEach ( ( child ) => {
computeData ( child ) ;
for ( let i = 0 ; i < fieldValues . value . length ; i ++ ) {
/ / c o n s o l e . l o g ( 6 6 6 , i , n o d e . d a t a [ i ] , c h i l d . d a t a [ i ] ) ;
node . data [ i ] += child . data [ i ] ;
}
} ) ;
}
/ / 获 取 所 有 根 节 点 （ 没 有 父 节 点 或 父 节 点 不 存 在 ）
const rootNodes = [ ] ;
nodes . forEach ( ( node , code ) => {
const parentCode = getParentCode ( code ) ;
/ / c o n s o l e . l o g ( p a r e n t C o d e ) ;
if ( ! parentCode || ! nodes . has ( parentCode ) ) {
rootNodes . push ( node ) ;
}
} ) ;
/ / 递 归 计 算 每 个 根 节 点 的 d a t a
rootNodes . forEach ( ( root ) => computeData ( root ) ) ;
/ / c o n s o l e . l o g ( ' r o o t N o d e s ' , r o o t N o d e s ) ;
/ / 转 换 为 目 标 格 式
function formatTree ( node ) {
return {
name : node . orgCode ,
type : 'bar' ,
data : node . data ,
children : node . children . map ( ( child ) => formatTree ( child ) )
} ;
}
return rootNodes . map ( ( root ) => formatTree ( root ) ) ;
}
/ / - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
/ / 根 据 o r g C o d e 的 分 级 格 式 ， 递 归 地 汇 总 本 级 及 其 所 有 下 级 的 数 据 ， 并 将 下 级 数 据 放 在 本 级 的 c h i l d r e n 属 性 中 。 d e e p s e e k
const groupByOrgCode = ( orgCode , data ) => {
/ / 过 滤 出 本 级 和 所 有 下 级 的 数 据
console . log ( 1 , data )
const filteredData = data . filter ( ( item ) => item . orgCode . startsWith ( orgCode ) ) ;
console . log ( 2 , filteredData )
/ / 如 果 过 滤 后 的 数 据 为 空 ， 返 回 n u l l
if ( filteredData . length === 0 ) {
uni . showToast ( {
title : "过滤后数据为空" ,
duration : 1000
} )
return null ;
}
/ / 按 照 f i e l d V a l u e 分 组
const groupedByFieldValue = { } ;
try {
filteredData . forEach ( ( item ) => {
/ / c o n s o l e . l o g ( i t e m . o r g C o d e , 1 1 , g r o u p e d B y F i e l d V a l u e [ i t e m . f i e l d V a l u e ] ) ;
if ( ! groupedByFieldValue [ item . fieldValue ] ) {
groupedByFieldValue [ item . fieldValue ] = {
number : 0 ,
ldhth : [ ]
} ;
}
/ / c o n s o l e . l o g ( i t e m . o r g C o d e , 2 2 , g r o u p e d B y F i e l d V a l u e [ i t e m . f i e l d V a l u e ] ) ;
groupedByFieldValue [ item . fieldValue ] . number += item . number ;
groupedByFieldValue [ item . fieldValue ] . ldhth . push ( ... item . ldhth . split ( ',' ) ) ;
} ) ;
} catch ( error ) {
console . log ( error )
}
/ / 构 建 本 级 结 果
const result = {
orgCode : orgCode ,
fieldValues : Object . keys ( groupedByFieldValue ) . map ( ( fieldValue ) => ( {
fieldValue : fieldValue ,
number : groupedByFieldValue [ fieldValue ] . number ,
ldhth : [ ... new Set ( groupedByFieldValue [ fieldValue ] . ldhth ) ] / / 去 重
} ) ) ,
children : [ ]
} ;
/ / c o n s o l e . l o g ( ' 本 级 ' , r e s u l t ) ;
/ / 获 取 所 有 下 一 级 的 o r g C o d e
const nextLevelOrgCodes = new Set ( ) ;
try {
filteredData . forEach ( ( item ) => {
if ( item . orgCode !== orgCode && item . orgCode . startsWith ( orgCode ) ) {
const nextLevelOrgCode = item . orgCode . substring ( 0 , orgCode . length + 3 ) ;
nextLevelOrgCodes . add ( nextLevelOrgCode ) ;
}
} ) ;
} catch ( error ) {
console . log ( error )
}
/ / 递 归 处 理 下 一 级 数 据
try {
nextLevelOrgCodes . forEach ( ( nextLevelOrgCode ) => {
const child = groupByOrgCode ( nextLevelOrgCode , data ) ;
if ( child ) {
result . children . push ( child ) ;
}
} ) ;
} catch ( error ) {
console . log ( error )
}
/ / c o n s o l e . l o g ( ' 全 部 ' , r e s u l t ) ;
return result ;
} ;
/ / 获 取 统 计 数 据 t h e n f i l t e r
const fetchStatisticsData = async ( ) => {
if ( ! selectedOrgCode . value || ! selectedField . value ) return ;
let res = [ ]
try {
const res = await cxcRyDatAstatistics ( {
res = await cxcRyDatAstatistics ( {
orgCode : selectedOrgCode . value ,
field : selectedField . value ,
dictCode : dictCode . value ,
fieldisDict : fieldisDict . value
} ) ;
console . log ( res )
chartData . value = res . data ;
updateChart ( ) ;
console . log ( res ) ; / / d e e p s e e k
if ( res . length = 0 ) {
uni . showToast ( {
title : "查询数据为空"
} )
return
} else {
console . log ( selectedOrgCode . value , res ) ;
orgCodeGroupData . value = groupByOrgCode ( selectedOrgCode . value , res ) ;
console . log ( orgCodeGroupData . value ) ;
chartData . value = transformData ( selectedOrgCode . value , res ) ;
let temp = [ ]
if ( chartData . value [ 0 ] . children . length > 0 ) {
temp = JSON . parse ( JSON . stringify ( chartData . value [ 0 ] . children ) ) ;
} else {
temp = chartData . value [ 0 ]
}
console . log ( temp )
chartDataCount . value = temp . length ;
/ / c o n s o l e . l o g ( c h a r t D a t a . v a l u e ) ;
updateChart ( temp ) ;
}
} catch ( error ) {
console . error ( '获取统计数据失败:' , error ) ;
}
@ -226,26 +641,39 @@
const res = await cxcRyDatAstatisticsDetails ( {
ldhth : ldhthList
} ) ;
console . log ( res )
console . log ( res ) ;
personnelList . value = res . data ;
} catch ( error ) {
console . error ( '获取人员列表失败:' , error ) ;
}
} ;
/ / 事 件 处 理
const onOrgCodeChange = ( e ) => {
console . log ( e )
const onOrgCodeChange = ( e , data ) => {
selectedOrgCode . value = e ;
console . log ( data . value . title ) ;
selectedOrgCodeLabel . value = data . value . title ;
fetchStatisticsData ( ) ;
} ;
const onFieldChange = ( e ) => {
const index = e . detail . value ;
selectedField . value = fieldList . value [ index ] . value ;
selectedFieldLabel . value = fieldList . value [ index ] . label ;
console . log ( e ) ;
try {
selectedField . value = e ;
for ( var index = 0 ; index < fieldList . value . length ; index ++ ) {
var element = fieldList . value [ index ] ;
console . log ( element ) ;
if ( element . value === e ) {
selectedFieldLabel . value = element . text ;
dictCode . value = element . dictCode
fieldisDict . value = element . isDict
}
}
fetchStatisticsData ( ) ;
} catch ( error ) {
/ / T O D O h a n d l e t h e e x c e p t i o n
console . log ( error ) ;
}
} ;
const onChartClick = ( e ) => {
@ -257,92 +685,155 @@
}
} ;
< / script >
< style scoped >
/* 颜色变量 */
: root {
-- primary - blue : # 409 eff ;
-- deep - blue : # 2 c7be5 ;
-- light - blue : # ecf5ff ;
-- gradient - start : # 6 b8cff ;
-- gradient - end : # 4364 f7 ;
-- hover - blue : # 66 b1ff ;
}
/* 全局容器 */
. container {
margin : 20 , 20 , 20 , 20 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 ;
}
. 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 ;
}
. stat - item {
display : flex ;
flex - direction : column ;
align - items : center ;
}
. label {
font - size : 24 rpx ;
color : # 666 ;
}
. value {
font - size : 36 rpx ;
font - weight : bold ;
color : # 0000 ff ;
margin : 10 rpx 10 rpx ;
padding : 10 rpx ;
background : linear - gradient ( 145 deg , # f5f9ff , var ( -- light - blue ) ) ;
border - radius : 24 rpx ;
box - shadow : 0 8 rpx 24 rpx rgba ( 64 , 158 , 255 , 0.15 ) ;
border : 2 rpx solid rgba ( 64 , 158 , 255 , 0.1 ) ;
}
/* 图表容器 */
. chart - container {
height : 400 rpx ;
margin - top : 20 rpx ;
height : 50 vh ;
margin : 20 rpx 0 ;
border - radius : 24 rpx ;
overflow : hidden ;
background : # ffffff ;
box - shadow : 0 8 rpx 32 rpx rgba ( 64 , 158 , 255 , 0.12 ) ;
border : 2 rpx solid rgba ( 64 , 158 , 255 , 0.08 ) ;
}
/* 表格标题行 */
. titleStyle {
font - size : 28 rpx ;
font - weight : 600 ;
color : # ffffff ;
background : linear - gradient ( 135 deg , var ( -- gradient - start ) , var ( -- gradient - end ) ) ;
padding : 28 rpx 0 ;
border - radius : 16 rpx 16 rpx 0 0 ;
box - shadow : 0 4 rpx 12 rpx rgba ( 67 , 100 , 247 , 0.2 ) ;
letter - spacing : 1 rpx ;
}
/* 数据行 */
. dataStyle {
font - size : 28 rpx ;
color : # 3 a466b ;
padding : 32 rpx 0 ;
background : # ffffff ;
border - bottom : 2 rpx solid # f0f6ff ;
transition : all 0.25 s cubic - bezier ( 0.4 , 0 , 0.2 , 1 ) ;
}
. dataStyle : hover {
background : # f8fbff ;
transform : translateY ( - 2 rpx ) ;
}
/* 操作按钮 */
button [ type = 'primary' ] {
background : linear - gradient ( 135 deg , var ( -- primary - blue ) , var ( -- deep - blue ) ) ;
border : none ;
border - radius : 12 rpx ;
padding : 12 rpx 32 rpx ;
font - size : 26 rpx ;
box - shadow : 0 6 rpx 16 rpx rgba ( 64 , 158 , 255 , 0.3 ) ;
transition : all 0.25 s ease ;
}
button [ type = 'primary' ] : active {
transform : scale ( 0.96 ) ;
box - shadow : 0 4 rpx 8 rpx rgba ( 64 , 158 , 255 , 0.3 ) ;
background : linear - gradient ( 135 deg , var ( -- deep - blue ) , var ( -- primary - blue ) ) ;
}
/* 滚动区域 */
scroll - view {
background : # ffffff ;
border - radius : 0 0 16 rpx 16 rpx ;
box - shadow : 0 8 rpx 24 rpx rgba ( 0 , 35 , 111 , 0.08 ) ;
}
/* 输入框聚焦效果 */
. trq - depart - select : focus - within {
box - shadow : 0 0 0 4 rpx rgba ( 64 , 158 , 255 , 0.2 ) ;
border - color : var ( -- primary - blue ) ;
}
/* 加载动画优化 */
@ keyframes fadeIn {
from {
opacity : 0 ;
transform : translateY ( 20 rpx ) ;
}
to {
opacity : 1 ;
transform : translateY ( 0 ) ;
}
}
. container > * {
animation : fadeIn 0.6 s cubic - bezier ( 0.23 , 1 , 0.32 , 1 ) ;
}
/* 自定义滚动条美化 */
: : - webkit - scrollbar {
width : 8 rpx ;
background : rgba ( 64 , 158 , 255 , 0.05 ) ;
}
: : - webkit - scrollbar - thumb {
background : linear - gradient ( 45 deg , var ( -- primary - blue ) , var ( -- deep - blue ) ) ;
border - radius : 12 rpx ;
border : 2 rpx solid white ;
}
/* 筛选行间距优化 */
. filter - row {
margin : 30 rpx 0 ;
padding : 20 rpx 0 ;
border - radius : 16 rpx ;
}
/* 响应式调整优化 */
@ media ( max - width : 768 px ) {
. chart - container {
height : 55 vh ;
border - radius : 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 ;
;
font - size : 26 rpx ;
padding : 24 rpx 0 ;
}
/* 内容样式 */
. 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 ;
button [ type = 'primary' ] {
padding : 10 rpx 24 rpx ;
font - size : 24 rpx ;
}
}
/* 数据行高亮效果 */
. data - row : nth - child ( even ) {
background : rgba ( 236 , 245 , 255 , 0.3 ) ;
}
. data - row : hover {
box - shadow : 0 4 rpx 12 rpx rgba ( 64 , 158 , 255 , 0.1 ) ;
}
< / style >
