From 4c01a2eb952b52823f7286840cab02fcb2bc053d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=92=B1=E5=86=A0=E5=AD=A6?= <1109935898@qq.com>
Date: Mon, 30 Oct 2023 12:02:57 +0800
Subject: [PATCH] =?UTF-8?q?=E6=95=B0=E6=8D=AE=E5=88=86=E6=9E=90=EF=BC=8C?=
 =?UTF-8?q?=E5=9F=BA=E7=A1=80=E5=88=86=E6=9E=90=EF=BC=8C=E8=A1=A8=E6=A0=BC?=
 =?UTF-8?q?=E6=8E=92=E5=BA=8F=E9=94=99=E4=B9=B1=EF=BC=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../diagram/components/MultiChart.vue         | 266 +++++++++---------
 .../diagram/components/SingleChart.vue        | 130 +++++----
 .../diagram/components/renderTableGroup.js    |  10 +-
 3 files changed, 218 insertions(+), 188 deletions(-)

diff --git a/src/views/DataAnalyse/diagram/components/MultiChart.vue b/src/views/DataAnalyse/diagram/components/MultiChart.vue
index b2f75403..01f4b735 100644
--- a/src/views/DataAnalyse/diagram/components/MultiChart.vue
+++ b/src/views/DataAnalyse/diagram/components/MultiChart.vue
@@ -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,
     };
   },
 });
diff --git a/src/views/DataAnalyse/diagram/components/SingleChart.vue b/src/views/DataAnalyse/diagram/components/SingleChart.vue
index efa6cf64..f1e75dd0 100644
--- a/src/views/DataAnalyse/diagram/components/SingleChart.vue
+++ b/src/views/DataAnalyse/diagram/components/SingleChart.vue
@@ -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,
     };
   },
 });
diff --git a/src/views/DataAnalyse/diagram/components/renderTableGroup.js b/src/views/DataAnalyse/diagram/components/renderTableGroup.js
index 1fd2e099..b8310bd4 100644
--- a/src/views/DataAnalyse/diagram/components/renderTableGroup.js
+++ b/src/views/DataAnalyse/diagram/components/renderTableGroup.js
@@ -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;