数据分析部分矩阵以及选择新增分组

src/views/DataAnalyse/diagram/components/MultiChart.vue

@@ -169,6 +169,7 @@ export default defineComponent({
             obj[key] = element.number;
           });
           obj.option = item.option_title;
+          obj.rowGroupTitle = item.rowGroupTitle;
           return obj;
         });
         tableSource.value = tableData;
@@ -180,34 +181,116 @@ export default defineComponent({
         plainOptions.value = radioOptions;
         value1.value = radioOptions[0]?.value ?? "";
         head.value = data.head;
-        tableInstance.value.data = tableData
+        tableInstance.value.data = tableData;
-        tableInstance.value.columns = data.head
+        tableInstance.value.columns = data.head;
-        columns.value = data.head.map((item, index) => {
+        if(data.group_head.length > 0){
-          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'){
+          let keys = [];
+          columns.value = data.group_head.map((groupItem) => {
+            let children = [];
+            children = groupItem.children.map((item, index) => {
+              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",
+                  fixed: (index === 0 || item.key === 'avg') ? 'left' : null,
+                  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",
+                  fixed: (index === 0 || item.key === 'avg') ? 'left' : null
+                };
+              }
+            });
             return {
-              ...item,
+              ...groupItem,
-              title: () => <RenderTableTitle title={item.title} />,
+              children: children,
-              name: item.title,
+            }
-              dataIndex: item.key,
+          });
-              slots: { customRender: item.key },
+          let column = [];
-              width: 100,
+          data.head.map((item, index) => {
-              // align: "center",
+            if(!keys.includes(item.key)){
-              fixed: (index === 0 || item.key === 'avg') ? 'left' : null,
+              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') {
-              sorter: (a, b) => { return a[item.key] > b[item.key] ? -1 : 1 },
+                column.push({
-            };
+                  ...item,
-          }else{
+                  title: () => <RenderTableTitle title={item.title}/>,
-            return {
+                  name: item.title,
-              ...item,
+                  dataIndex: item.key,
-              title: () => <RenderTableTitle title={item.title} />,
+                  slots: {customRender: item.key},
-              name: item.title,
+                  width: 100,
-              dataIndex: item.key,
+                  // align: "center",
-              slots: { customRender: item.key },
+                  fixed: (index === 0 || item.key === 'avg') ? 'left' : null,
-              width: 100,
+                  sorter: (a, b) => {
-              // align: "center",
+                    return a[item.key] > b[item.key] ? -1 : 1
-              fixed: (index === 0 || item.key === 'avg') ? 'left' : null
+                  },
-            };
+                });
+              } 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 || item.key === 'avg') ? 'left' : null
+                });
+              }
+            }
+          });
+          let group = column.find(item => item.key === 'rowGroupTitle');
+          if(group){
+            column.splice(column.indexOf(group),1);
           }
-        });
+          let option = column.find(item => item.key === 'option');
+          if(option){
+            column.splice(column.indexOf(option),1);
+          }
+          columns.value = [group,option,...columns.value,...column];
+        } else {
+          columns.value = data.head.map((item, index) => {
+            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 || item.key === 'avg') ? 'left' : null,
+                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",
+                fixed: (index === 0 || item.key === 'avg') ? 'left' : null
+              };
+            }
+          });
+        }
       },
       {
         immediate: true,

src/views/DataAnalyse/diagram/components/SingleChart.vue

@@ -79,7 +79,6 @@ export default defineComponent({
   },
   setup(props) {
     const chartInstance = inject("chartInstance");
-
     const tableInstance = inject("tableInstance");
     const chart = ref(null);
     const columns = ref([]);
@@ -113,6 +112,10 @@ export default defineComponent({
       (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) => {
           if(item.key === 'answerRate' || item.key === 'rate') {
             return {