inl-ui 0.0.24 → 0.0.25

package/src/pageComponent/views/data-center/dataAnalysis.tsx

@@ -1,532 +1,532 @@
-import { defineComponent, onMounted, ref, provide, PropType, reactive } from "vue";
-import utils from "@/utils";
-import searchHeader from "./components/searchHeader";
-import leftTree from "./components/leftTree";
-import contentTable from "./components/table";
-import GroupModal from "./components/groupModal";
-import analysisApi from "@/api/dataAnalysis";
-import "./assets/less/dataAnalysis.less";
-import initChart, { Chart } from "./components/chart";
-import { item } from "cabinet";
-import { deepclone } from "@/pageComponent/utils/";
-import { message } from "ant-design-vue";
-
-export interface IUrlObj {
-  list: string;
-}
-const com = defineComponent({
-  components: {
-    searchHeader,
-    leftTree,
-    contentTable,
-    // GroupModal,
-  },
-  props: {
-    url: {
-      type: Object as PropType<Partial<IUrlObj>>,
-      default: () => ({}),
-    },
-    prefix: {
-      type: String,
-    },
-    serverName: {
-      type: String,
-    },
-    dividerGap: {
-      type: Number,
-      default: 24,
-    },
-    dividerColor: {
-      type: String,
-      default: "#EFF2F6",
-    },
-  },
-  setup(props) {
-    let chart: Chart;
-    onMounted(() => {
-      getDefaultGroup();
-      // initLine();
-    });
-    const tabs: any = ref([
-      {
-        name: "默认分组",
-        id: "normal",
-      },
-      {
-        name: "自定义分组",
-        id: "self",
-      },
-    ]);
-
-    const activityTab: any = ref("normal");
-
-    const activiteKey: any = ref("chart");
-
-    const commonVal: any = ref(false);
-
-    const treeData: any = ref([]);
-
-    const isLoading: any = ref(false);
-
-    const changeTab = (val: any) => {
-      activityTab.value = val;
-      treeData.value = [];
-      if(val === 'self') {
-        getCustomGroup()
-      } else {
-        getDefaultGroup();
-      }
-    };
-
-    const getDefaultGroup = async () => {
-      // 获取默认分组数据
-      const res = await analysisApi.getDefaultGroup();
-      treeData.value = (res.data[0].tree || []).map((item: any) => {
-        const { children, property } = item;
-        let obj: any = [];
-        if (children && children.length > 0 && property && property.length > 0) {
-          obj = [
-            {
-              id: `${item.id}-type`,
-              name: "系统属性",
-              children: [
-                {
-                  id: `${item.id}-all`,
-                  name: "全部",
-                  type: "all",
-                  prName: item.name,
-                },
-                ...property,
-              ],
-              type: "selfType",
-              prName: item.name,
-            },
-          ];
-        } else {
-          obj = property;
-        }
-        const arr = (children || []).concat(obj);
-        item.checkable = false;
-        item.children = computedArr(arr,false, true);
-        return item;
-      });
-      // modalConfig.modalData = deepclone(treeData.value);
-    };
-
-    const expandedKeys: any = ref([]);
-
-    const getModalData = async (name = "") => {
-      // 获取弹窗
-      expandedKeys.value = [];
-      const res = await analysisApi.searchByName({ name });
-      modalConfig.modalData = (res.data || []).map((item: any) => {
-        const { children, property } = item;
-        let obj: any = [];
-        
-        if (children && children.length > 0 && property &&property.length > 0) {
-          obj = [
-            {
-              id: `${item.id}-type`,
-              name: "系统属性",
-              children: [
-                {
-                  id: `${item.id}-all`,
-                  name: "全部",
-                  type: "all",
-                  prName: item.name,
-                },
-                ...property,
-              ],
-              type: "selfType",
-              prName: item.name,
-            },
-          ];
-        } else {
-          obj = property;
-        }
-        if (name !== "" && children) {
-          expandedKeys.value.push(item.id);
-          obj = [];
-        }
-        const arr = (children || []).concat(obj);
-        item.checkable = false;
-        item.children = computedArr(arr, name !==  '', true);
-        return item;
-      });
-      // modalConfig.modalData = deepclone(treeData.value);
-    };
-
-    const getCustomGroup = async () => {
-      // 获取默认分组数据
-      const res = await analysisApi.getCustomGroup();
-      treeData.value = (res.data || []).map((item: any) => {
-        const { group, tree } = item;
-        item.id = group.id;
-        item.name = group.name;
-        item.checkable = false;
-        item.showIcon = true;
-        item.children = (tree || []).map((el: any) => {
-          const { children, property } = el;
-          let obj: any = [];
-          
-          if (children && children.length > 0 && property && property.length > 0) {
-            obj = [
-              {
-                id: `${el.id}-type`,
-                name: "系统属性",
-                children: property,
-                type: "selfType",
-                prName: item.name,
-              },
-            ];
-          } else {
-            obj = property;
-          }
-          const arr = (children || []).concat(obj);
-          el.checkable = false;
-          el.children = computedArr(arr);
-          return el;
-        });
-        return item;
-      });
-    };
-
-
-    const computedArr = (arr: any, search=false, defaults=false) => {
-      if (arr) {
-        arr.forEach((item: any) => {
-          const { children, property } = item;
-          
-          let obj: any = [];
-          if (
-            children &&
-            children.length > 0 &&
-            property &&
-            property.length > 0
-          ) {
-            
-            obj = [
-              {
-                id: `${item.id}-type`,
-                name: "系统属性",
-                // children: property,
-                type: "selfType",
-                prName: item.name,
-                children: defaults
-                  ? [
-                      {
-                        id: `${item.id}-all`,
-                        name: "全部",
-                        type: "all",
-                        prName: item.name,
-                      },
-                      ...property,
-                    ]
-                  : property,
-              },
-            ];
-          } else {
-            obj = property || [];
-          }
-          if (search && children && item.type !== 'selfType') {
-            obj = [];
-            expandedKeys.value.push(item.id);
-          }
-          const arr = (children || []).concat(obj);
-          
-          arr.forEach((el: any) => {
-            el.parentName = item.prName
-              ? item.prName + "-" + el.name
-              : item.name + "-" + el.name;
-            if (el.pointCode) {
-              el.id = el.pointCode;
-              el.checkable = true;
-            } else {
-              el.checkable = false;
-            }
-          });
-          item.children = computedArr(arr, search, defaults);
-          if (item.children.length > 0) {
-            item.checkable = false;
-          } else {
-            item.checkable = true;
-          }
-        });
-      }
-      return arr;
-    };
-    const tableColumns: any = ref([
-      {
-        title: "时间",
-        dataIndex: "time",
-        align: "center",
-        fixed: "left",
-        width: 150,
-      },
-    ]);
-    const tableData: any = ref([]);
-
-    const serachHandle = (postData: any) => {
-      postParams.value = postData || {};
-      initLine();
-    };
-
-    const postParams: any = ref({});
-    const pointData: any = ref([]);
-
-    const initLine = async () => {
-      isLoading.value = true;
-      tableData.value = [];
-
-      const res = await analysisApi.getChartData({
-        ...postParams.value,
-        pointInfo: pointData.value,
-      });
-      const chartData: any = [];
-      tableColumns.value = [
-        {
-          title: "时间",
-          dataIndex: "time",
-          align: "center",
-          fixed: "left",
-          width: 150,
-        },
-        
-      ];
-      
-      res.data.forEach((item: any) => {
-        if (item.data) {
-          let rowData: any = {
-            time: item.time,
-          };
-          for (const i in item.data) {
-            const val = commonVal.value
-              ? item.data[i].perValue
-              : item.data[i].value;
-            const currentItem = choosePointData.value.find(
-              (el: any) => el.code === i
-            );
-            const obj = {
-              time: item.time,
-              name: currentItem?.name,
-              code: i,
-              value: `${val !== null ? Number(val) : 0}`,
-              perValue: item.data[i].perValue,
-              unit: item.data[i].unit ? item.data[i].unit : '',
-            };
-            chartData.push(obj);
-
-            const idx = tableColumns.value.findIndex(
-              (el: any) => el.dataIndex === i
-            );
-            if (idx === -1) {
-              const column = {
-                title: currentItem?.name,
-                dataIndex: i,
-                k: i,
-                align: "center",
-                width: 150,
-              };
-              tableColumns.value.push(column);
-            } 
-
-            rowData = Object.assign(
-              {
-                [i]: item.data[i].value,
-              },
-              rowData
-            );
-          }
-          tableData.value.push(rowData);
-        }
-      });
-      const height = document.getElementById("dataAnlysisChart")?.clientHeight;
-      
-      if (!chart || chart.destroyed) {
-        chart = initChart("chart", chartData, height);
-      } else {
-        if (chartData.length > 0) {
-          chart.changeData(chartData);
-        } else {
-          chart.destroy();
-        }
-      }
-      isLoading.value = false;
-    };
-
-    const changeData = () => {
-      commonVal.value = !commonVal.value;
-      initLine();
-    };
-
-    const exportData = async () => {
-      const res = await analysisApi.downloadAnalysis({
-        ...postParams.value,
-        pointInfo: pointData.value,
-      });
-      const blob = new Blob([res], {
-        type: "text/html;charset=UTF-8",
-      });
-      const a = document.createElement("a");
-      a.href = URL.createObjectURL(blob);
-      a.download = "数据分析.xls";
-      a.style.display = "none";
-      document.body.appendChild(a);
-      a.click();
-      a.remove();
-    };
-
-    const choosePointData: any = ref([]);
-
-    const chooseData = (val: any) => {
-      pointData.value = (val.checkedNode || []).map((item: any) => {
-        return {
-          pointCode: item.id,
-          pointName: item.parentName,
-        };
-      });
-      choosePointData.value = (val.checkedNode || []).map((item: any) => {
-        return {
-          code: item.id,
-          name: item.parentName,
-        };
-      });
-      initLine();
-    };
-
-    const editData = async(node: any) => {
-      modalConfig.groupInfo = {
-        id: node.id,
-        name: node.name
-      };
-      getModalData();
-      modalConfig.modalTitle = "编辑分组";
-      modalConfig.type = "edit";
-      modalConfig.modalVisible = true;
-    }
-
-    const deleteData = async (node: any) => {
-      const res = await analysisApi.deleteGroup({
-        id: node.id,
-      });
-      message.success("删除成功");
-      getCustomGroup();
-    };
-
-    const modalConfig: any = reactive({
-      modalTitle: "",
-      modalVisible: false,
-      modalData: [],
-      groupInfo: {},
-      type: ''
-    });
-    const modalTitle: any = ref("");
-
-    const addGroup = () => {
-      getModalData();
-      modalConfig.type = 'add';
-      modalConfig.modalTitle = "添加分组";
-      modalConfig.modalVisible = true;
-    };
-
-    return () => (
-      <div class="dataAnalysis">
-        <a-spin spinning={isLoading.value}>
-          <searchHeader onSearch={serachHandle} onExport={exportData} />
-          <div class="content">
-            <div class="leftTree">
-              <a-tabs v-model={activityTab.value} onChange={changeTab}>
-                {tabs.value.map((item: any) => (
-                  <a-tab-pane key={item.id} tab={item.name}>
-                    {item.id === "self" ? (
-                      <a-button onClick={addGroup}>新建分组</a-button>
-                    ) : null}
-                    <div class="treeWrap">
-                      <leftTree
-                        type={item.id}
-                        treeData={treeData.value}
-                        onFilter={chooseData}
-                        onEdit={editData}
-                        onDelete={deleteData}
-                      />
-                    </div>
-                  </a-tab-pane>
-                ))}
-              </a-tabs>
-            </div>
-            <div class="rightContent">
-              <div class="contentTitle">
-                <div
-                  class={["guiyi", commonVal.value ? "" : "active"]}
-                  onClick={() => {
-                    changeData();
-                  }}
-                >
-                  <img
-                    src={`/micro-assets/inl/dataCenter/${
-                      commonVal.value ? "changeIcon" : "changeIconActive"
-                    }.png`}
-                  />
-                  {commonVal.value ? "取消归一化" : "归一化"}
-                </div>
-                <div class="tabs">
-                  <span
-                    class={[activiteKey.value === "chart" ? "active" : ""]}
-                    onClick={() => {
-                      activiteKey.value = "chart";
-                      initLine();
-                    }}
-                  >
-                    <img
-                      src={`/micro-assets/inl/dataCenter/${
-                        activiteKey.value === "chart" ? "chartActive" : "chart"
-                      }.png`}
-                    />
-                  </span>
-                  <span
-                    class={[activiteKey.value === "table" ? "active" : ""]}
-                    onClick={() => {
-                      activiteKey.value = "table";
-                      initLine();
-                    }}
-                  >
-                    <img
-                      src={`/micro-assets/inl/dataCenter/${
-                        activiteKey.value === "table" ? "tableActive" : "table"
-                      }.png`}
-                    />
-                  </span>
-                </div>
-              </div>
-              {/* chart/table */}
-              <div id="dataAnlysisChart">
-                <div
-                  id="chart"
-                  style={{ height: "100%" }}
-                  v-show={activiteKey.value === "chart"}
-                ></div>
-                <contentTable
-                  v-show={activiteKey.value === "table"}
-                  columns={tableColumns.value}
-                  tableData={tableData.value}
-                />
-              </div>
-            </div>
-          </div>
-        </a-spin>
-
-        <GroupModal
-          v-model={[modalConfig.modalVisible, "visible"]}
-          modalTitle={modalConfig.modalTitle}
-          treeData={modalConfig.modalData}
-          onRefresh={getCustomGroup}
-          groupInfo={modalConfig.groupInfo}
-          type={modalConfig.type}
-          onSerach={getModalData}
-          expandedKeys={expandedKeys.value}
-        />
-      </div>
-    );
-  },
-});
-export default utils.installComponent(com, "data-analysis");
+import { defineComponent, onMounted, ref, provide, PropType, reactive } from "vue";
+import utils from "@/utils";
+import searchHeader from "./components/searchHeader";
+import leftTree from "./components/leftTree";
+import contentTable from "./components/table";
+import GroupModal from "./components/groupModal";
+import analysisApi from "@/api/dataAnalysis";
+import "./assets/less/dataAnalysis.less";
+import initChart, { Chart } from "./components/chart";
+import { item } from "cabinet";
+import { deepclone } from "@/pageComponent/utils/";
+import { message } from "ant-design-vue";
+
+export interface IUrlObj {
+  list: string;
+}
+const com = defineComponent({
+  components: {
+    searchHeader,
+    leftTree,
+    contentTable,
+    // GroupModal,
+  },
+  props: {
+    url: {
+      type: Object as PropType<Partial<IUrlObj>>,
+      default: () => ({}),
+    },
+    prefix: {
+      type: String,
+    },
+    serverName: {
+      type: String,
+    },
+    dividerGap: {
+      type: Number,
+      default: 24,
+    },
+    dividerColor: {
+      type: String,
+      default: "#EFF2F6",
+    },
+  },
+  setup(props) {
+    let chart: Chart;
+    onMounted(() => {
+      getDefaultGroup();
+      // initLine();
+    });
+    const tabs: any = ref([
+      {
+        name: "默认分组",
+        id: "normal",
+      },
+      {
+        name: "自定义分组",
+        id: "self",
+      },
+    ]);
+
+    const activityTab: any = ref("normal");
+
+    const activiteKey: any = ref("chart");
+
+    const commonVal: any = ref(false);
+
+    const treeData: any = ref([]);
+
+    const isLoading: any = ref(false);
+
+    const changeTab = (val: any) => {
+      activityTab.value = val;
+      treeData.value = [];
+      if(val === 'self') {
+        getCustomGroup()
+      } else {
+        getDefaultGroup();
+      }
+    };
+
+    const getDefaultGroup = async () => {
+      // 获取默认分组数据
+      const res = await analysisApi.getDefaultGroup();
+      treeData.value = (res.data[0].tree || []).map((item: any) => {
+        const { children, property } = item;
+        let obj: any = [];
+        if (children && children.length > 0 && property && property.length > 0) {
+          obj = [
+            {
+              id: `${item.id}-type`,
+              name: "系统属性",
+              children: [
+                {
+                  id: `${item.id}-all`,
+                  name: "全部",
+                  type: "all",
+                  prName: item.name,
+                },
+                ...property,
+              ],
+              type: "selfType",
+              prName: item.name,
+            },
+          ];
+        } else {
+          obj = property;
+        }
+        const arr = (children || []).concat(obj);
+        item.checkable = false;
+        item.children = computedArr(arr,false, true);
+        return item;
+      });
+      // modalConfig.modalData = deepclone(treeData.value);
+    };
+
+    const expandedKeys: any = ref([]);
+
+    const getModalData = async (name = "") => {
+      // 获取弹窗
+      expandedKeys.value = [];
+      const res = await analysisApi.searchByName({ name });
+      modalConfig.modalData = (res.data || []).map((item: any) => {
+        const { children, property } = item;
+        let obj: any = [];
+        
+        if (children && children.length > 0 && property &&property.length > 0) {
+          obj = [
+            {
+              id: `${item.id}-type`,
+              name: "系统属性",
+              children: [
+                {
+                  id: `${item.id}-all`,
+                  name: "全部",
+                  type: "all",
+                  prName: item.name,
+                },
+                ...property,
+              ],
+              type: "selfType",
+              prName: item.name,
+            },
+          ];
+        } else {
+          obj = property;
+        }
+        if (name !== "" && children) {
+          expandedKeys.value.push(item.id);
+          obj = [];
+        }
+        const arr = (children || []).concat(obj);
+        item.checkable = false;
+        item.children = computedArr(arr, name !==  '', true);
+        return item;
+      });
+      // modalConfig.modalData = deepclone(treeData.value);
+    };
+
+    const getCustomGroup = async () => {
+      // 获取默认分组数据
+      const res = await analysisApi.getCustomGroup();
+      treeData.value = (res.data || []).map((item: any) => {
+        const { group, tree } = item;
+        item.id = group.id;
+        item.name = group.name;
+        item.checkable = false;
+        item.showIcon = true;
+        item.children = (tree || []).map((el: any) => {
+          const { children, property } = el;
+          let obj: any = [];
+          
+          if (children && children.length > 0 && property && property.length > 0) {
+            obj = [
+              {
+                id: `${el.id}-type`,
+                name: "系统属性",
+                children: property,
+                type: "selfType",
+                prName: item.name,
+              },
+            ];
+          } else {
+            obj = property;
+          }
+          const arr = (children || []).concat(obj);
+          el.checkable = false;
+          el.children = computedArr(arr);
+          return el;
+        });
+        return item;
+      });
+    };
+
+
+    const computedArr = (arr: any, search=false, defaults=false) => {
+      if (arr) {
+        arr.forEach((item: any) => {
+          const { children, property } = item;
+          
+          let obj: any = [];
+          if (
+            children &&
+            children.length > 0 &&
+            property &&
+            property.length > 0
+          ) {
+            
+            obj = [
+              {
+                id: `${item.id}-type`,
+                name: "系统属性",
+                // children: property,
+                type: "selfType",
+                prName: item.name,
+                children: defaults
+                  ? [
+                      {
+                        id: `${item.id}-all`,
+                        name: "全部",
+                        type: "all",
+                        prName: item.name,
+                      },
+                      ...property,
+                    ]
+                  : property,
+              },
+            ];
+          } else {
+            obj = property || [];
+          }
+          if (search && children && item.type !== 'selfType') {
+            obj = [];
+            expandedKeys.value.push(item.id);
+          }
+          const arr = (children || []).concat(obj);
+          
+          arr.forEach((el: any) => {
+            el.parentName = item.prName
+              ? item.prName + "-" + el.name
+              : item.name + "-" + el.name;
+            if (el.pointCode) {
+              el.id = el.pointCode;
+              el.checkable = true;
+            } else {
+              el.checkable = false;
+            }
+          });
+          item.children = computedArr(arr, search, defaults);
+          if (item.children.length > 0) {
+            item.checkable = false;
+          } else {
+            item.checkable = true;
+          }
+        });
+      }
+      return arr;
+    };
+    const tableColumns: any = ref([
+      {
+        title: "时间",
+        dataIndex: "time",
+        align: "center",
+        fixed: "left",
+        width: 150,
+      },
+    ]);
+    const tableData: any = ref([]);
+
+    const serachHandle = (postData: any) => {
+      postParams.value = postData || {};
+      initLine();
+    };
+
+    const postParams: any = ref({});
+    const pointData: any = ref([]);
+
+    const initLine = async () => {
+      isLoading.value = true;
+      tableData.value = [];
+
+      const res = await analysisApi.getChartData({
+        ...postParams.value,
+        pointInfo: pointData.value,
+      });
+      const chartData: any = [];
+      tableColumns.value = [
+        {
+          title: "时间",
+          dataIndex: "time",
+          align: "center",
+          fixed: "left",
+          width: 150,
+        },
+        
+      ];
+      
+      res.data.forEach((item: any) => {
+        if (item.data) {
+          let rowData: any = {
+            time: item.time,
+          };
+          for (const i in item.data) {
+            const val = commonVal.value
+              ? item.data[i].perValue
+              : item.data[i].value;
+            const currentItem = choosePointData.value.find(
+              (el: any) => el.code === i
+            );
+            const obj = {
+              time: item.time,
+              name: currentItem?.name,
+              code: i,
+              value: `${val !== null ? Number(val) : 0}`,
+              perValue: item.data[i].perValue,
+              unit: item.data[i].unit ? item.data[i].unit : '',
+            };
+            chartData.push(obj);
+
+            const idx = tableColumns.value.findIndex(
+              (el: any) => el.dataIndex === i
+            );
+            if (idx === -1) {
+              const column = {
+                title: currentItem?.name,
+                dataIndex: i,
+                k: i,
+                align: "center",
+                width: 150,
+              };
+              tableColumns.value.push(column);
+            } 
+
+            rowData = Object.assign(
+              {
+                [i]: item.data[i].value,
+              },
+              rowData
+            );
+          }
+          tableData.value.push(rowData);
+        }
+      });
+      const height = document.getElementById("dataAnlysisChart")?.clientHeight;
+      
+      if (!chart || chart.destroyed) {
+        chart = initChart("chart", chartData, height);
+      } else {
+        if (chartData.length > 0) {
+          chart.changeData(chartData);
+        } else {
+          chart.destroy();
+        }
+      }
+      isLoading.value = false;
+    };
+
+    const changeData = () => {
+      commonVal.value = !commonVal.value;
+      initLine();
+    };
+
+    const exportData = async () => {
+      const res = await analysisApi.downloadAnalysis({
+        ...postParams.value,
+        pointInfo: pointData.value,
+      });
+      const blob = new Blob([res], {
+        type: "text/html;charset=UTF-8",
+      });
+      const a = document.createElement("a");
+      a.href = URL.createObjectURL(blob);
+      a.download = "数据分析.xls";
+      a.style.display = "none";
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
+    };
+
+    const choosePointData: any = ref([]);
+
+    const chooseData = (val: any) => {
+      pointData.value = (val.checkedNode || []).map((item: any) => {
+        return {
+          pointCode: item.id,
+          pointName: item.parentName,
+        };
+      });
+      choosePointData.value = (val.checkedNode || []).map((item: any) => {
+        return {
+          code: item.id,
+          name: item.parentName,
+        };
+      });
+      initLine();
+    };
+
+    const editData = async(node: any) => {
+      modalConfig.groupInfo = {
+        id: node.id,
+        name: node.name
+      };
+      getModalData();
+      modalConfig.modalTitle = "编辑分组";
+      modalConfig.type = "edit";
+      modalConfig.modalVisible = true;
+    }
+
+    const deleteData = async (node: any) => {
+      const res = await analysisApi.deleteGroup({
+        id: node.id,
+      });
+      message.success("删除成功");
+      getCustomGroup();
+    };
+
+    const modalConfig: any = reactive({
+      modalTitle: "",
+      modalVisible: false,
+      modalData: [],
+      groupInfo: {},
+      type: ''
+    });
+    const modalTitle: any = ref("");
+
+    const addGroup = () => {
+      getModalData();
+      modalConfig.type = 'add';
+      modalConfig.modalTitle = "添加分组";
+      modalConfig.modalVisible = true;
+    };
+
+    return () => (
+      <div class="dataAnalysis">
+        <a-spin spinning={isLoading.value}>
+          <searchHeader onSearch={serachHandle} onExport={exportData} />
+          <div class="content">
+            <div class="leftTree">
+              <a-tabs v-model={activityTab.value} onChange={changeTab}>
+                {tabs.value.map((item: any) => (
+                  <a-tab-pane key={item.id} tab={item.name}>
+                    {item.id === "self" ? (
+                      <a-button onClick={addGroup}>新建分组</a-button>
+                    ) : null}
+                    <div class="treeWrap">
+                      <leftTree
+                        type={item.id}
+                        treeData={treeData.value}
+                        onFilter={chooseData}
+                        onEdit={editData}
+                        onDelete={deleteData}
+                      />
+                    </div>
+                  </a-tab-pane>
+                ))}
+              </a-tabs>
+            </div>
+            <div class="rightContent">
+              <div class="contentTitle">
+                <div
+                  class={["guiyi", commonVal.value ? "" : "active"]}
+                  onClick={() => {
+                    changeData();
+                  }}
+                >
+                  <img
+                    src={`/micro-assets/inl/dataCenter/${
+                      commonVal.value ? "changeIcon" : "changeIconActive"
+                    }.png`}
+                  />
+                  {commonVal.value ? "取消归一化" : "归一化"}
+                </div>
+                <div class="tabs">
+                  <span
+                    class={[activiteKey.value === "chart" ? "active" : ""]}
+                    onClick={() => {
+                      activiteKey.value = "chart";
+                      initLine();
+                    }}
+                  >
+                    <img
+                      src={`/micro-assets/inl/dataCenter/${
+                        activiteKey.value === "chart" ? "chartActive" : "chart"
+                      }.png`}
+                    />
+                  </span>
+                  <span
+                    class={[activiteKey.value === "table" ? "active" : ""]}
+                    onClick={() => {
+                      activiteKey.value = "table";
+                      initLine();
+                    }}
+                  >
+                    <img
+                      src={`/micro-assets/inl/dataCenter/${
+                        activiteKey.value === "table" ? "tableActive" : "table"
+                      }.png`}
+                    />
+                  </span>
+                </div>
+              </div>
+              {/* chart/table */}
+              <div id="dataAnlysisChart">
+                <div
+                  id="chart"
+                  style={{ height: "100%" }}
+                  v-show={activiteKey.value === "chart"}
+                ></div>
+                <contentTable
+                  v-show={activiteKey.value === "table"}
+                  columns={tableColumns.value}
+                  tableData={tableData.value}
+                />
+              </div>
+            </div>
+          </div>
+        </a-spin>
+
+        <GroupModal
+          v-model={[modalConfig.modalVisible, "visible"]}
+          modalTitle={modalConfig.modalTitle}
+          treeData={modalConfig.modalData}
+          onRefresh={getCustomGroup}
+          groupInfo={modalConfig.groupInfo}
+          type={modalConfig.type}
+          onSerach={getModalData}
+          expandedKeys={expandedKeys.value}
+        />
+      </div>
+    );
+  },
+});
+export default utils.installComponent(com, "data-analysis");