hz/ylst-pc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

数据分析，基础分析，表格排序错乱；

Browse Source
This commit is contained in:
钱冠学
2023-10-30 12:02:57 +08:00
parent 02767d9d93
commit 4c01a2eb95
3 changed files with 218 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files

266
src/views/DataAnalyse/diagram/components/MultiChart.vue
View File

@@ -22,6 +22,7 @@
"
rowKey="index"
class="ant-table-striped"
@change="onTableChange"
>
<template
v-for="col in columns"
@@ -160,125 +161,57 @@ export default defineComponent({
option.value = config;
}
watch(
() => props.data,
(data) => {
const titleList = data.head.map((item) => item.title);
const tableData = data.option.map((item) => {
const child_option = item.option;
const obj = {};
child_option.forEach((element) => {
const key = element.index;
obj[key] = element.number;
});
obj.option = item.option_title;
obj.rowGroupTitle = item.rowGroupTitle;
return obj;
function onTableChange(pagination, filters, sorter) {
updateColumns(props.data, sorter);
}
function updateTableSource(data, sorter) {
const { columnKey, order } = sorter || {};
const tableData = data.option.map((item) => {
const child_option = item.option;
const obj = {};
child_option.forEach((element) => {
const key = element.index;
obj[key] = element.number;
});
tableSource.value = tableData;
const radioOptions = tableData.map((item) => ({
label: item.option,
value: item.option,
}));
plainOptions.value = radioOptions;
value1.value = radioOptions[0]?.value ?? "";
head.value = data.head;
tableInstance.value.data = tableData;
tableInstance.value.columns = data.head;
if(data.group_head.length > 0){
const hasRowGroup = data.head[0]?.key === "rowGroupTitle";
let keys = [];
columns.value = data.group_head.map((groupItem, groupIndex) => {
let children = [];
children = groupItem.children.map((item) => {
keys.push(item.key);
if (item.key !== 'option' && item.key !== 'answer_sn' && item.key !== '1.00' && item.key !== '2.00' && item.key !== '3.00' && item.key !== '4.00' && item.key !== '5.00') {
return {
...item,
title: () => <RenderTableTitle title={item.title}/>,
name: item.title,
dataIndex: item.key,
slots: {customRender: item.key},
width: 100,
// align: "center",
sorter: (a, b) => {
return a[item.key] > b[item.key] ? -1 : 1
},
};
} else {
return {
...item,
title: () => <RenderTableTitle title={item.title}/>,
name: item.title,
dataIndex: item.key,
slots: {customRender: item.key},
width: 100,
// align: "center",
};
}
});
return {
...groupItem,
title: () => <RenderTableTitle title={groupItem.title}/>,
children: children,
}
});
let column = [];
data.head.map((item, index) => {
const customRender = generateTableCustomRender(data, item, "rowGroupTitle", "rowGroupTitle");
if(!keys.includes(item.key)){
if (item.key !== 'rowGroupTitle' && item.key !== 'option' && item.key !== 'answer_sn' && item.key !== '1.00' && item.key !== '2.00' && item.key !== '3.00' && item.key !== '4.00' && item.key !== '5.00') {
column.push({
...item,
title: () => <RenderTableTitle title={item.title}/>,
name: item.title,
dataIndex: item.key,
slots: {customRender: item.key},
width: 100,
// align: "center",
fixed: (index === 0 || hasRowGroup && index === 1) ? 'left' : null,
sorter: (index === 0 || hasRowGroup && index === 1) ? null : (a, b) => {
return a[item.key] > b[item.key] ? -1 : 1
},
customRender,
});
} else {
column.push({
...item,
title: () => <RenderTableTitle title={item.title}/>,
name: item.title,
dataIndex: item.key,
slots: {customRender: item.key},
width: 100,
// align: "center",
fixed: (index === 0 || hasRowGroup && index === 1) ? 'left' : null,
customRender,
});
}
}
});
let group = column.find(item => item.key === 'rowGroupTitle');
if(group){
column.splice(column.indexOf(group),1);
obj.option = item.option_title;
obj.rowGroupTitle = item.rowGroupTitle;
return obj;
});
if (columnKey) {
tableData.sort((a, b) => {
switch(order) {
case "ascend": return a[columnKey] - b[columnKey];
case "descend": return b[columnKey] - a[columnKey];
default: return 0;
}
let option = column.find(item => item.key === 'option');
if(option){
column.splice(column.indexOf(option),1);
}
column = column.map((i) => {
return {
title: "",
children: [i],
};
});
columns.value = [group,option,...columns.value,...column];
} else {
const hasRowGroup = data.head[0]?.key === "rowGroupTitle";
columns.value = data.head.map((item, index) => {
const customRender = generateTableCustomRender(data, item, "rowGroupTitle", "rowGroupTitle");
});
}
tableSource.value = tableData;
const radioOptions = tableData.map((item) => ({
label: item.option,
value: item.option,
}));
plainOptions.value = radioOptions;
value1.value = radioOptions[0]?.value ?? "";
tableInstance.value.data = tableData;
}
function updateColumns(d, sorter) {
const data = d || props.data;
updateTableSource(data, sorter);
const titleList = data.head.map((item) => item.title);
head.value = data.head;
tableInstance.value.columns = data.head;
if(data.group_head.length > 0){
const hasRowGroup = data.head[0]?.key === "rowGroupTitle";
let keys = [];
columns.value = data.group_head.map((groupItem, groupIndex) => {
let children = [];
children = groupItem.children.map((item) => {
keys.push(item.key);
if (item.key !== 'option' && item.key !== 'answer_sn' && item.key !== '1.00' && item.key !== '2.00' && item.key !== '3.00' && item.key !== '4.00' && item.key !== '5.00') {
return {
...item,
@@ -288,11 +221,7 @@ export default defineComponent({
slots: {customRender: item.key},
width: 100,
// align: "center",
fixed: (index === 0 || hasRowGroup && index === 1) ? 'left' : null,
sorter: (index === 0 || hasRowGroup && index === 1) ? null : (a, b) => {
return a[item.key] > b[item.key] ? -1 : 1
},
customRender,
sorter: true,
};
} else {
return {
@@ -303,17 +232,99 @@ export default defineComponent({
slots: {customRender: item.key},
width: 100,
// align: "center",
fixed: (index === 0 || hasRowGroup && index === 1) ? 'left' : null,
customRender,
};
}
});
return {
...groupItem,
title: () => <RenderTableTitle title={groupItem.title}/>,
children: children,
}
});
let column = [];
data.head.map((item, index) => {
const customRender = generateTableCustomRender(tableSource.value, item, "rowGroupTitle", "rowGroupTitle");
if(!keys.includes(item.key)){
if (item.key !== 'rowGroupTitle' && item.key !== 'option' && item.key !== 'answer_sn' && item.key !== '1.00' && item.key !== '2.00' && item.key !== '3.00' && item.key !== '4.00' && item.key !== '5.00') {
column.push({
...item,
title: () => <RenderTableTitle title={item.title}/>,
name: item.title,
dataIndex: item.key,
slots: {customRender: item.key},
width: 100,
// align: "center",
fixed: (index === 0 || hasRowGroup && index === 1) ? 'left' : null,
sorter: (index === 0 || hasRowGroup && index === 1) ? null : true,
customRender,
});
} else {
column.push({
...item,
title: () => <RenderTableTitle title={item.title}/>,
name: item.title,
dataIndex: item.key,
slots: {customRender: item.key},
width: 100,
// align: "center",
fixed: (index === 0 || hasRowGroup && index === 1) ? 'left' : null,
customRender,
});
}
}
});
let group = column.find(item => item.key === 'rowGroupTitle');
if(group){
column.splice(column.indexOf(group),1);
}
},
{
immediate: true,
let option = column.find(item => item.key === 'option');
if(option){
column.splice(column.indexOf(option),1);
}
column = column.map((i) => {
return {
title: "",
children: [i],
};
});
columns.value = [group,option,...columns.value,...column];
} else {
const hasRowGroup = data.head[0]?.key === "rowGroupTitle";
columns.value = data.head.map((item, index) => {
const customRender = generateTableCustomRender(tableSource.value, item, "rowGroupTitle", "rowGroupTitle");
if (item.key !== 'option' && item.key !== 'answer_sn' && item.key !== '1.00' && item.key !== '2.00' && item.key !== '3.00' && item.key !== '4.00' && item.key !== '5.00') {
return {
...item,
title: () => <RenderTableTitle title={item.title}/>,
name: item.title,
dataIndex: item.key,
slots: {customRender: item.key},
width: 100,
// align: "center",
fixed: (index === 0 || hasRowGroup && index === 1) ? 'left' : null,
sorter: (index === 0 || hasRowGroup && index === 1) ? null : true,
customRender,
};
} else {
return {
...item,
title: () => <RenderTableTitle title={item.title}/>,
name: item.title,
dataIndex: item.key,
slots: {customRender: item.key},
width: 100,
// align: "center",
fixed: (index === 0 || hasRowGroup && index === 1) ? 'left' : null,
customRender,
};
}
});
}
);
}
watch(() => props.data, updateColumns, { immediate: true });
watch(chart, (val) => {
chartInstance.value = val
})
@@ -327,6 +338,7 @@ export default defineComponent({
option,
handleUpdateAction,
chart_params,
onTableChange,
};
},
});

130
src/views/DataAnalyse/diagram/components/SingleChart.vue
View File

@@ -16,6 +16,7 @@
:rowClassName="(record, index) => (index % 2 === 1 ? 'table-striped' : null)"
rowKey="index"
class="ant-table-striped"
@change="onTableChange"
>
<template v-for="col in columns" #[col.dataIndex]="{ text }" :key="col.dataIndex">
<render-table-title :title="text"></render-table-title>
@@ -108,65 +109,79 @@ export default defineComponent({
const config = useChartOption(data, type, data_label, other, props.data.max);
option.value = config;
}
watch(
() => props.data,
(data) => {
source.value = data.option;
tableSource.value = data.option;
tableSource.value.forEach(item => {
item.group_title = item.groupTitle;
});
console.log("tableSource",tableSource.value);
columns.value = data.head?.map((item, index) => {
const customRender = generateTableCustomRender(data, item);
if(item.key === 'answerRate' || item.key === 'rate') {
return {
...item,
title: () => <RenderTableTitleLo title={item.title} tooltipType={item.key} />,
dataIndex: item.key,
key: item.key,
slots: { customRender: item.key },
width: 100,
// align: "center",
fixed: index === 0 ? "left" : null,
customRender,
};
} else if (item.key === 'number') {
return {
...item,
title: () => <RenderTableTitle title={item.title} />,
dataIndex: item.key,
key: item.key,
slots: { customRender: item.key },
width: 100,
// align: "center",
fixed: index === 0 ? "left" : null,
sorter: (a, b) => { return a.number > b.number? -1 : 1 },
customRender,
};
} else {
return {
...item,
title: () => <RenderTableTitle title={item.title} />,
dataIndex: item.key,
key: item.key,
slots: { customRender: item.key },
width: 100,
// align: "center",
fixed: index === 0 ? "left" : null,
customRender,
};
}
function onTableChange(pagination, filters, sorter) {
updateColumns(props.data, sorter);
}
}) || [];
tableInstance.value.data = tableSource.value;
tableInstance.value.columns = data.head;
},
{
immediate: true,
}
);
function updateColumns(d, sorter) {
const { columnKey, order } = sorter || {};
const data = d || props.data;
source.value = data.option;
tableSource.value = (data.option || []).sort((a, b) => {
if (!columnKey) {
return 0;
}
switch(order) {
case "ascend": return a[columnKey] - b[columnKey];
case "descend": return b[columnKey] - a[columnKey];
default: return 0;
}
});
console.log('====', tableSource.value)
console.log('----', columnKey, order)
tableSource.value.forEach(item => {
item.group_title = item.groupTitle;
});
tableInstance.value.data = tableSource.value;
columns.value = data.head?.map((item, index) => {
const customRender = generateTableCustomRender(tableSource.value, item);
if(item.key === 'answerRate' || item.key === 'rate') {
return {
...item,
title: () => <RenderTableTitleLo title={item.title} tooltipType={item.key} />,
dataIndex: item.key,
key: item.key,
slots: { customRender: item.key },
width: 100,
// align: "center",
fixed: index === 0 ? "left" : null,
customRender,
};
} else if (item.key === 'number') {
return {
...item,
title: () => <RenderTableTitle title={item.title} />,
dataIndex: item.key,
key: item.key,
slots: { customRender: item.key },
width: 100,
// align: "center",
fixed: index === 0 ? "left" : null,
sorter: true,
customRender,
};
} else {
return {
...item,
title: () => <RenderTableTitle title={item.title} />,
dataIndex: item.key,
key: item.key,
slots: { customRender: item.key },
width: 100,
// align: "center",
fixed: index === 0 ? "left" : null,
customRender,
};
}
}) || [];
tableInstance.value.columns = data.head;
}
watch(() => props.data, updateColumns, { immediate: true });
watch(chart, (val) => {
chartInstance.value = val;
@@ -178,6 +193,7 @@ export default defineComponent({
scroll,
option,
handleUpdateAction,
onTableChange,
};
},
});

10
src/views/DataAnalyse/diagram/components/renderTableGroup.js
View File

@@ -8,16 +8,18 @@
*/
export function generateTableCustomRender(data, item, key = "group_title", field = "groupTitle") {
return item.key !== key ? null : ({ text, index }) => {
let rowSpan = 0;
let rowSpan = 1;
const options = data.option || [];
const options = data || [];
const prevGroupTitle = options[index - 1]?.[field];
if(!text) {
rowSpan = 1;
} else if(!index || prevGroupTitle !== text) {
} else if(text === prevGroupTitle) {
rowSpan = 0;
} else {
for(let i = index; i < options.length; i += 1) {
if(text === options[i]?.[field]) {
if(text === options[i + 1]?.[field]) {
rowSpan += 1;
} else {
break;