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

52
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,10 +161,12 @@ export default defineComponent({
option.value = config;
}
watch(
() => props.data,
(data) => {
const titleList = data.head.map((item) => item.title);
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 = {};
@@ -175,6 +178,15 @@ export default defineComponent({
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;
}
});
}
tableSource.value = tableData;
const radioOptions = tableData.map((item) => ({
@@ -183,8 +195,15 @@ export default defineComponent({
}));
plainOptions.value = radioOptions;
value1.value = radioOptions[0]?.value ?? "";
head.value = data.head;
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";
@@ -202,9 +221,7 @@ export default defineComponent({
slots: {customRender: item.key},
width: 100,
// align: "center",
sorter: (a, b) => {
return a[item.key] > b[item.key] ? -1 : 1
},
sorter: true,
};
} else {
return {
@@ -226,7 +243,7 @@ export default defineComponent({
});
let column = [];
data.head.map((item, index) => {
const customRender = generateTableCustomRender(data, item, "rowGroupTitle", "rowGroupTitle");
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') {
@@ -239,9 +256,7 @@ export default defineComponent({
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
},
sorter: (index === 0 || hasRowGroup && index === 1) ? null : true,
customRender,
});
} else {
@@ -277,7 +292,7 @@ export default defineComponent({
} else {
const hasRowGroup = data.head[0]?.key === "rowGroupTitle";
columns.value = data.head.map((item, index) => {
const customRender = generateTableCustomRender(data, item, "rowGroupTitle", "rowGroupTitle");
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 {
@@ -289,9 +304,7 @@ export default defineComponent({
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
},
sorter: (index === 0 || hasRowGroup && index === 1) ? null : true,
customRender,
};
} else {
@@ -309,11 +322,9 @@ export default defineComponent({
}
});
}
},
{
immediate: true,
}
);
watch(() => props.data, updateColumns, { immediate: true });
watch(chart, (val) => {
chartInstance.value = val
})
@@ -327,6 +338,7 @@ export default defineComponent({
option,
handleUpdateAction,
chart_params,
onTableChange,
};
},
});

40
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,17 +109,34 @@ export default defineComponent({
const config = useChartOption(data, type, data_label, other, props.data.max);
option.value = config;
}
watch(
() => props.data,
(data) => {
function onTableChange(pagination, filters, sorter) {
updateColumns(props.data, sorter);
}
function updateColumns(d, sorter) {
const { columnKey, order } = sorter || {};
const data = d || props.data;
source.value = data.option;
tableSource.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;
});
console.log("tableSource",tableSource.value);
tableInstance.value.data = tableSource.value;
columns.value = data.head?.map((item, index) => {
const customRender = generateTableCustomRender(data, item);
const customRender = generateTableCustomRender(tableSource.value, item);
if(item.key === 'answerRate' || item.key === 'rate') {
return {
@@ -142,7 +160,7 @@ export default defineComponent({
width: 100,
// align: "center",
fixed: index === 0 ? "left" : null,
sorter: (a, b) => { return a.number > b.number? -1 : 1 },
sorter: true,
customRender,
};
} else {
@@ -160,13 +178,10 @@ export default defineComponent({
}
}) || [];
tableInstance.value.data = tableSource.value;
tableInstance.value.columns = data.head;
},
{
immediate: true,
}
);
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;