ldeyun/cxc-szcx-uniapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'master' of http://10.75.166.171/cxcxt/cxc-szcx-uniapp

Browse Source 
# Conflicts:
#	.env.development
#	pages/views/renliziyuan/renyuanxinxi/index.vue
This commit is contained in:
ldeyun 2025-02-12 13:58:11 +08:00
commit 60ce182912
3 changed files with 258 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.env.development
View File

@ -1,4 +1,4 @@
# 开发环境
# 请求接口地址
VITE_REQUEST_BASE_URL = https://36.112.48.190
#VITE_REQUEST_BASE_URL = http://10.75.15.247:8080
#VITE_REQUEST_BASE_URL = https://36.112.48.190
VITE_REQUEST_BASE_URL = http://10.75.15.247:8080

5
pages/views/renliziyuan/renyuanxinxi/index.vue
View File

@ -15,6 +15,11 @@
<button type="primary" @click="toQtTongji">其他统计</button>
</uni-card>
</uni-section>
<uni-section title="人员统计" type="line">
<uni-card :is-shadow="false">
<button type="primary">人员统计</button>
</uni-card>
</uni-section>
</uni-card>
</view>

333
pages/views/renliziyuan/renyuanxinxi/qttongji.vue
View File

@ -1,80 +1,70 @@
<template>
<view>
<view class="container" id="top1">
<uni-row style="margin-bottom: 10rpx;margin-left: 30rpx;margin-right: 30rpx;">
<uni-row style="margin-bottom: 10rpx; margin-left: 30rpx; margin-right: 30rpx">
<uni-col :span="24"><uni-title :title="'所选单位ID'" align="left" type="h4"></uni-title></uni-col>
</uni-row>
<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="selectedOrgCode" returnCodeOrID="orgCode"
@change="onOrgCodeChange"></trq-depart-select>
</uni-col>
</uni-row>
<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">
<picker mode="selector" :range="fieldList" range-key="label" @change="onFieldChange">
<view class="picker">选择字段: {{ selectedFieldLabel }}</view>
</picker>
</uni-col>
</uni-row>
</view>
<!-- ECharts图表 -->
<view class="chart-container">
<l-echart ref="chart" @finished="initChart" @tap="onChartClick" />
<l-echart ref="chart" @finished="initChart" />
</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>
</uni-col>
<uni-col :span="5">
<view class="titleStyle">
姓名
</view>
<view class="titleStyle">姓名</view>
</uni-col>
<uni-col :span="5">
<view class="titleStyle">
性别
</view>
<view class="titleStyle">性别</view>
</uni-col>
<uni-col :span="5">
<view class="titleStyle">
年龄
</view>
<view class="titleStyle">年龄</view>
</uni-col>
<uni-col :span="6">
<view class="titleStyle">
操作
</view>
<view class="titleStyle">操作</view>
</uni-col>
</uni-row>
<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 personnelList">
<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 personnelList">
<uni-col :span="3">
<view class="dataStyle">
{{index+1}}
{{ index + 1 }}
</view>
</uni-col>
<uni-col :span="5">
<view class="dataStyle">
{{item.xm}}
{{ item.xm }}
</view>
</uni-col><uni-col :span="5">
</uni-col>
<uni-col :span="5">
<view class="dataStyle">
{{item.xb_dictText}}
{{ item.xb_dictText }}
</view>
</uni-col><uni-col :span="5">
</uni-col>
<uni-col :span="5">
<view class="dataStyle">
{{item.nl}}
{{ item.nl }}
</view>
</uni-col>
<uni-col :span="6">
@ -113,50 +103,31 @@
},
{
label: '学历',
value: 'whcd1'
},
value: 'rylb1'
}
]); // 字段列表
const selectedOrgCode = ref(''); // 当前选择的单位 orgCode
const selectedOrgCodeLabel = ref('请选择单位'); // 当前选择的单位名称
const selectedField = ref(''); // 当前选择的字段
const selectedFieldLabel = ref('请选择字段'); // 当前选择的字段名称
const orgCodeGroupData = ref([]); //按照orgcode进行分组的数据
const chartData = ref({}); // 图表数据
const personnelList = ref([]); // 人员列表 initChart
const chartOption = ref({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
xAxis: {
type: 'category',
data: [],
},
yAxis: {
type: 'value',
},
series: [{
name: '数量',
type: 'bar',
data: [],
}, ],
})
const chartOption = ref({});
function detail(record) {
// console.log(record)
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(() => {
// #ifdef APP
getHeight();
// #endif
})
});
// #ifdef APP
const getHeight = () => {
@ -170,7 +141,7 @@
.select('#top1')
.boundingClientRect((rect1) => {
// 计算上方组件高度总和
const topComponentsHeight = rect1.height
const topComponentsHeight = rect1.height;
// 计算下方组件的高度
bottomHeight.value = screenHeight - topComponentsHeight - 415;
})
@ -182,38 +153,232 @@
// 初始化图表
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({
// 初始化图表
setTimeout(async () => {
if (!chart.value) return;
const myChart = await chart.value.init(echarts);
chartOption.value = transformDataForEcharts(chartData.value, selectedOrgCode.value);
myChart.setOption({
xAxis: {
data: xb,
type: 'category',
data: chartOption.value.categories.map((code) =>
`${code}${chartOption.value.children ? ' ▶' : ''}`)
},
series: [{
data: number,
}, ],
yAxis: {
type: 'value'
},
series: chartOption.value.series,
tooltip: {
trigger: 'axis'
},
legend: {
data: chartOption.value.series.map((s) => s.name)
}
});
// 点击钻取事件
myChart.on('click', (params) => {
const clickedCode = params.name.split(' ')[0];
const nextData = transformDataForEcharts(originalData, clickedCode);
if (nextData.categories.length > 0) {
historyStack.push(currentLevel);
currentLevel = clickedCode;
renderChart(nextData);
} else if (nextData.children) {
historyStack.push(currentLevel);
currentLevel = clickedCode;
chartData = transformDataForEcharts(originalData, currentLevel);
renderChart(chartData);
} else {
console.log('已是最末级节点');
}
});
}, 300);
};
// 获取统计数据
/**
* 转换数据为支持钻取的ECharts格式
* @param {Array} data 原始数据
* @param {string} currentOrgCode 当前组织编码
* @returns {Object} 包含当前层级数据和子节点信息的对象
*/
function transformDataForEcharts(data, currentOrgCode = '') {
// 计算当前层级的长度（每级+3） 当前层级的作为标签显示再页面上，图上显示所有下一级的数据
const currentLevel = currentOrgCode.length;
const nextLevel = currentLevel + 3;
console.log(currentLevel, nextLevel, currentOrgCode, data);
// 过滤当前层级数据
let currentLevelData = {}
currentLevelData.orgCode = currentOrgCode
currentLevelData.data = data.fieldValues;
console.log(1, data.children);
// 存储所有的 orgCode
const xAxisData = [];
// 存储所有的 fieldValue 作为图例
const legendData = [];
// 存储每个 fieldValue 对应的数据系列
const seriesData = [];
// 递归处理数据
const processNode = (node) => {
try {
const orgCode = node.orgCode;
if (!xAxisData.includes(orgCode)) {
xAxisData.push(orgCode);
}
let tempseries = {}
tempseries.name = node.orgCode
tempseries.type = 'bar'
tempseries.data = []
node.fieldValues.forEach(fieldValueObj => {
let number = 0;
if (!fieldValueObj) {
const fieldValue = fieldValueObj.fieldValue;
if (!legendData.includes(fieldValue)) {
legendData.push(fieldValue);
}
number = fieldValueObj.number;
tempseries.data.push(number)
} else {
tempseries.data.push(0)
}
console.log(22, node.orgCode, number)
})
seriesData.push(tempseries)
};
// console.log(2, seriesData)
} catch (error) {
console.log(error)
}
if (node.children && node.children.length > 0) {
node.children.forEach(child => {
processNode(child);
});
}
}
console.log(3, seriesData)
// 从根节点开始处理
data.children.forEach(node => {
processNode(node);
});
// 转换 seriesData 为 ECharts 所需的数组格式
const series = Array.from(legendData).map(fieldValue => ({
name: fieldValue,
type: 'bar',
data: seriesData[fieldValue]
}));
console.log(2, xAxisData)
console.log(3, JSON.stringify(legendData))
console.log(4, series)
return {
xAxis: {
type: 'category',
data: xAxisData
},
legend: {
data: Array.from(legendData)
},
series: series
};
}
// 使用示例
// let currentLevel = 'A01A01'; // 初始层级
// let chartData = transformDataForEcharts(originalData, currentLevel);
//根据 orgCode 的分级格式，递归地汇总本级及其所有下级的数据，并将下级数据放在本级的 children 属性中。 deepseek
const groupByOrgCode = (orgCode, data) => {
// 过滤出本级和所有下级的数据
const filteredData = data.filter((item) => item.orgCode.startsWith(orgCode));
// 如果过滤后的数据为空，返回 null
if (filteredData.length === 0) {
return null;
}
// 按照 fieldValue 分组
const groupedByFieldValue = {};
filteredData.forEach((item) => {
if (!groupedByFieldValue[item.fieldValue]) {
groupedByFieldValue[item.fieldValue] = {
number: 0,
ldhth: []
};
}
groupedByFieldValue[item.fieldValue].number += item.number;
groupedByFieldValue[item.fieldValue].ldhth.push(...item.ldhth.split(','));
});
// 构建本级结果
const result = {
orgCode: orgCode,
fieldValues: Object.keys(groupedByFieldValue).map((fieldValue) => ({
fieldValue: fieldValue,
number: groupedByFieldValue[fieldValue].number,
ldhth: [...new Set(groupedByFieldValue[fieldValue].ldhth)] // 去重
})),
children: []
};
// 获取所有下一级的 orgCode
const nextLevelOrgCodes = new Set();
filteredData.forEach((item) => {
if (item.orgCode !== orgCode && item.orgCode.startsWith(orgCode)) {
const nextLevelOrgCode = item.orgCode.substring(0, orgCode.length + 3);
nextLevelOrgCodes.add(nextLevelOrgCode);
}
});
// 递归处理下一级数据
nextLevelOrgCodes.forEach((nextLevelOrgCode) => {
const child = groupByOrgCode(nextLevelOrgCode, data);
if (child) {
result.children.push(child);
}
});
return result;
};
//-----------------------------------------------------------------------------------------
// 获取统计数据 then
const fetchStatisticsData = async () => {
if (!selectedOrgCode.value || !selectedField.value) return;
try {
const res = await cxcRyDatAstatistics({
orgCode: selectedOrgCode.value,
field: selectedField.value,
field: selectedField.value
});
console.log(res)
chartData.value = res.data;
// console.log(res); //deepseek
orgCodeGroupData.value = groupByOrgCode(selectedOrgCode.value, res);
console.log(orgCodeGroupData.value);
chartData.value = orgCodeGroupData.value;
updateChart();
} catch (error) {
console.error('获取统计数据失败:', error);
@ -226,18 +391,18 @@
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();
};
@ -277,7 +442,7 @@
}
.query-btn {
background: #007AFF;
background: #007aff;
color: white;
padding: 0 40rpx;
border-radius: 8rpx;
@ -310,7 +475,7 @@
}
.chart-container {
height: 400rpx;
height: 800rpx;
margin-top: 20rpx;
}
@ -319,12 +484,11 @@
color: #747474;
line-height: 30px;
height: 30px;
background: #F2F9FC;
background: #f2f9fc;
text-align: center;
vertical-align: middle;
border-left: 1px solid #919191;
border-bottom: 1px solid #919191;
;
}
/* 内容样式 */
@ -343,6 +507,5 @@
border-bottom: 1px solid #919191;
border-left: 1px solid #919191;
text-overflow: ellipsis;
}
</style>