diff --git a/.env.development b/.env.development
index e059f52..c4b6cb0 100644
--- a/.env.development
+++ b/.env.development
@@ -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
diff --git a/pages/views/renliziyuan/renyuanxinxi/index.vue b/pages/views/renliziyuan/renyuanxinxi/index.vue
index 782e15d..93104d7 100644
--- a/pages/views/renliziyuan/renyuanxinxi/index.vue
+++ b/pages/views/renliziyuan/renyuanxinxi/index.vue
@@ -15,6 +15,11 @@
+
+
+
+
+
diff --git a/pages/views/renliziyuan/renyuanxinxi/qttongji.vue b/pages/views/renliziyuan/renyuanxinxi/qttongji.vue
index 3afc3cd..717e07e 100644
--- a/pages/views/renliziyuan/renyuanxinxi/qttongji.vue
+++ b/pages/views/renliziyuan/renyuanxinxi/qttongji.vue
@@ -1,80 +1,70 @@
-
+
-
+
-
+
选择字段: {{ selectedFieldLabel }}
-
-
+
-
-
+
-
- 序号
-
+ 序号
-
- 姓名
-
+ 姓名
-
- 性别
-
+ 性别
-
- 年龄
-
+ 年龄
-
- 操作
-
+ 操作
-
-
-
+
+
+
- {{index+1}}
+ {{ index + 1 }}
- {{item.xm}}
+ {{ item.xm }}
-
+
+
- {{item.xb_dictText}}
+ {{ item.xb_dictText }}
-
+
+
- {{item.nl}}
+ {{ item.nl }}
@@ -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({
- xAxis: {
- data: xb,
- },
- series: [{
- data: number,
- }, ],
- });
+ // 初始化图表
+ setTimeout(async () => {
+ if (!chart.value) return;
+ const myChart = await chart.value.init(echarts);
+ chartOption.value = transformDataForEcharts(chartData.value, selectedOrgCode.value);
+ myChart.setOption({
+ xAxis: {
+ type: 'category',
+ data: chartOption.value.categories.map((code) =>
+ `${code}${chartOption.value.children ? ' ▶' : ''}`)
+ },
+ 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;
-
}
\ No newline at end of file